'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
var colorPresetPicker = require('./color-preset-picker.js');
var createNamespace = require('../../../utils/create-namespace.js');

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

exports.default = _sfc_main;
//# sourceMappingURL=color-preset-picker.vue2.js.map
