import { defineComponent, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, Fragment, renderList, createElementVNode } from 'vue';
import '../../../utils/index.mjs';
import { colorPresetPickerEmits, colorPresetPickerProps } from './color-preset-picker.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';

"use strict";
const _hoisted_1 = ["onClick"];
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlColorPresetPicker" },
  __name: "color-preset-picker",
  props: colorPresetPickerProps,
  emits: colorPresetPickerEmits,
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace("color-preset-picker");
    const isActive = computed(() => {
      return (color) => {
        return props.multiple ? props.value?.includes(color) : props.value[0] === color;
      };
    });
    const isDisabled = computed(() => {
      return (color) => {
        if (props.multiple && !props.value?.includes(color) && props.maxCount > 0 && props.value.length >= props.maxCount) {
          return true;
        }
        return false;
      };
    });
    const handleColorSelect = (color) => {
      if (props.readonly) return;
      if (props.multiple) {
        const currentValues = [...props.value];
        const colorIndex = currentValues.indexOf(color);
        if (colorIndex > -1) {
          currentValues.splice(colorIndex, 1);
        } else {
          if (props.maxCount > 0 && props.value.length >= props.maxCount) return;
          currentValues.push(color);
        }
        emits("update:value", currentValues);
        emits("change", currentValues);
      } else {
        emits("update:value", color === props.value[0] ? [] : [color]);
        emits("change", color === props.value[0] ? [] : [color]);
      }
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass([unref(bem).b()]),
          style: normalizeStyle({ gap: _ctx.gap + "px" })
        },
        [
          (openBlock(true), createElementBlock(
            Fragment,
            null,
            renderList(_ctx.colors || [], (color, index) => {
              return openBlock(), createElementBlock("div", {
                key: index,
                class: normalizeClass([
                  unref(bem).e("color-item"),
                  _ctx.readonly ? unref(bem).is("readonly") : "",
                  unref(bem).is(_ctx.size ? _ctx.size : _ctx.extendSize),
                  _ctx.shape === "round" ? unref(bem).is("round") : unref(bem).is("square"),
                  isActive.value(color) ? unref(bem).is("item-active") : "",
                  isDisabled.value(color) ? unref(bem).is("disabled") : ""
                ]),
                style: normalizeStyle({ backgroundColor: color }),
                onClick: ($event) => handleColorSelect(color)
              }, [
                createElementVNode(
                  "div",
                  {
                    class: normalizeClass(["inner-content"]),
                    style: normalizeStyle({ borderColor: isActive.value(color) ? "#fff" : "transparent" })
                  },
                  [..._cache[0] || (_cache[0] = [
                    createElementVNode(
                      "div",
                      {
                        class: "inner",
                        style: { backgroundColor: "transparent" }
                      },
                      null,
                      -1
                      /* CACHED */
                    )
                  ])],
                  4
                  /* STYLE */
                )
              ], 14, _hoisted_1);
            }),
            128
            /* KEYED_FRAGMENT */
          ))
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=color-preset-picker.vue2.mjs.map
