import { defineComponent, ref, watch, watchEffect, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, Fragment, renderList, normalizeStyle } from 'vue';
import '../config/index.mjs';
import Color from '../config/color.mjs';
import { useOptions } from '../config/use-options.mjs';
import '../../../../utils/index.mjs';
import { createNamespace } from '../../../../utils/create-namespace.mjs';
import { parseColors, preDefineProps } from '../config/pre-define.mjs';

"use strict";
const _hoisted_1 = ["onClick"];
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "PreDefine" },
  __name: "pre-define",
  props: preDefineProps,
  setup(__props) {
    const props = __props;
    const bem = createNamespace("pre-define");
    const currentColor = useOptions()?.currentColor;
    const rgbaColors = ref(parseColors(props.colors, props.color));
    const handleSelect = (index) => {
      props.color.fromString(props.colors[index]);
    };
    watch(
      () => currentColor.value,
      (val) => {
        if (val) {
          const color = new Color();
          color.fromString(val);
          rgbaColors.value.forEach((item) => {
            item.selected = color.compare(item);
          });
        }
      }
    );
    watchEffect(() => {
      rgbaColors.value = parseColors(props.colors, props.color);
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(unref(bem).b())
        },
        [
          createElementVNode(
            "div",
            {
              class: normalizeClass(unref(bem).m("colors"))
            },
            [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(rgbaColors.value, (item, index) => {
                  return openBlock(), createElementBlock("div", {
                    key: index,
                    class: normalizeClass({
                      [unref(bem).m("color-selector")]: true,
                      [unref(bem).is("selected")]: item.selected,
                      [unref(bem).is("alpha")]: item._alpha < 100
                    }),
                    onClick: ($event) => handleSelect(index)
                  }, [
                    createElementVNode(
                      "div",
                      {
                        style: normalizeStyle({ backgroundColor: item.value })
                      },
                      null,
                      4
                      /* STYLE */
                    )
                  ], 10, _hoisted_1);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ],
            2
            /* CLASS */
          )
        ],
        2
        /* CLASS */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=pre-define.vue2.mjs.map
