'use strict';

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

var vue = require('vue');
require('../../../utils/index.js');
var core = require('@vueuse/core');
var antDesignVue = require('ant-design-vue');
require('./config/index.js');
var color = require('./config/color.js');
var index = require('./config/color-pipette/index.js');
require('./components/alpha-slider.vue.js');
require('./components/hue-slider.vue.js');
require('./components/pre-define.vue.js');
require('./components/sv-panel.vue.js');
var createNamespace = require('../../../utils/create-namespace.js');
var colorPicker = require('./config/color-picker.js');
var useOptions = require('./config/use-options.js');
var svPanel_vue_vue_type_script_setup_true_lang = require('./components/sv-panel.vue2.js');
var hueSlider_vue_vue_type_script_setup_true_lang = require('./components/hue-slider.vue2.js');
var alphaSlider_vue_vue_type_script_setup_true_lang = require('./components/alpha-slider.vue2.js');
var preDefine_vue_vue_type_script_setup_true_lang = require('./components/pre-define.vue2.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlColorPicker" },
  __name: "color-picker",
  props: colorPicker.colorPickerProps,
  emits: colorPicker.colorPickerEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace.createNamespace("color-picker");
    const hasClickBtn = vue.ref(false);
    const hueSlider = vue.ref();
    const svPanel = vue.ref();
    const alpha = vue.ref();
    const color$1 = vue.reactive(
      new color.default({
        enableAlpha: props.showAlpha,
        format: props.colorFormat
      })
    );
    const pipette = vue.reactive(
      new index.default({
        container: props.pipetteContainer,
        colorFormat: props.colorFormat,
        listener: {
          onOk: async (e) => {
            console.log({
              color: e.color,
              colors: e.colors,
              container: props.pipetteContainer
            });
            color$1.fromString(e.color);
            customInput.value = e.color;
          }
        }
      })
    );
    const showPicker = vue.ref(false);
    const showPanelColor = vue.ref(false);
    const customInput = vue.ref("");
    const formItemContext = antDesignVue.Form.useInjectFormItemContext();
    const displayedColor = vue.computed(() => {
      if (!props.value && !showPanelColor.value) {
        return "transparent";
      }
      return colorPicker.displayedRgb(color$1, props.showAlpha);
    });
    const colorDisabled = vue.computed(() => {
      return props.disabled;
    });
    const currentColor = vue.computed(() => {
      return !props.value && !showPanelColor.value ? "" : color$1.value;
    });
    vue.provide(useOptions.OPTIONS_KEY, {
      currentColor
    });
    const setShowPicker = (value) => {
      showPicker.value = value;
    };
    const debounceSetShowPicker = core.useDebounceFn(setShowPicker, 50);
    const hide = () => {
      debounceSetShowPicker(false);
      resetColor();
    };
    const resetColor = () => {
      vue.nextTick(() => {
        if (props.value) {
          color$1.fromString(props.value);
        } else {
          showPanelColor.value = false;
        }
      });
    };
    const handleTrigger = () => {
      if (colorDisabled.value) return;
      debounceSetShowPicker(!showPicker.value);
    };
    const handleConfirm = () => {
      color$1.fromString(customInput.value);
    };
    const confirmValue = () => {
      hasClickBtn.value = true;
      const value = color$1.value;
      emits("update:value", value);
      emits("change", value);
      formItemContext.onFieldChange();
      debounceSetShowPicker(false);
      vue.nextTick(() => {
        const newColor = new color.default({
          enableAlpha: props.showAlpha,
          format: props.colorFormat
        });
        newColor.fromString(props.value);
        if (!color$1.compare(newColor)) {
          resetColor();
        }
      });
      showPicker.value = false;
    };
    const clear = () => {
      hasClickBtn.value = true;
      debounceSetShowPicker(false);
      emits("update:value", null);
      emits("change", null);
      formItemContext.onFieldChange();
      resetColor();
      showPicker.value = false;
    };
    const getPopupContainer = (triggerNode) => {
      return triggerNode.parentElement;
    };
    const handleColorPicking = async () => {
      pipette.start();
    };
    vue.watch(
      () => props.value,
      (newVal) => {
        if (!newVal) {
          showPanelColor.value = false;
        } else if (newVal && newVal !== color$1.value) {
          color$1.fromString(newVal);
        }
      }
    );
    vue.watch(
      () => currentColor.value,
      (val) => {
        customInput.value = val;
        emits("active-change", val);
      }
    );
    vue.watch(
      () => color$1.value,
      () => {
        if (!props.value && !showPanelColor.value) {
          showPanelColor.value = true;
        }
      }
    );
    vue.watch(
      () => showPicker.value,
      (newVal) => {
        if (newVal) {
          hasClickBtn.value = false;
        } else {
          if (!hasClickBtn.value) {
            hide();
          }
        }
        vue.nextTick(() => {
          hueSlider.value?.update();
          setTimeout(() => {
            svPanel.value?.update();
            alpha.value?.update();
          }, 20);
        });
      }
    );
    vue.watch([() => props.colorFormat, () => props.showAlpha], ([val, alpha2]) => {
      const newColor = new color.default({
        enableAlpha: alpha2,
        format: val
      });
      for (const i in newColor) {
        if (Object.prototype.hasOwnProperty.call(color$1, i) && Object.prototype.hasOwnProperty.call(newColor, i)) {
          color$1[i] = newColor[i];
        }
      }
      pipette.setColorFormat(val);
      confirmValue();
    });
    vue.onMounted(() => {
      if (props.value) {
        color$1.fromString(props.value);
        customInput.value = currentColor.value;
      }
    });
    __expose({
      getPopupContainer,
      setShowPicker,
      debounceSetShowPicker
    });
    return (_ctx, _cache) => {
      const _component_ll_input = vue.resolveComponent("ll-input");
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_ll_button = vue.resolveComponent("ll-button");
      const _component_a_popover = vue.resolveComponent("a-popover");
      const _component_a_input_group = vue.resolveComponent("a-input-group");
      return vue.openBlock(), vue.createBlock(_component_a_input_group, {
        compact: "",
        class: vue.normalizeClass([vue.unref(bem).b("container")])
      }, {
        default: vue.withCtx(() => [
          !_ctx.pickerMode ? (vue.openBlock(), vue.createBlock(_component_ll_input, {
            key: 0,
            value: customInput.value,
            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
            size: _ctx.size,
            disabled: colorDisabled.value,
            readonly: true,
            "allow-clear": _ctx.allowClear,
            placeholder: _ctx.placeholder,
            onClear: clear
          }, null, 8, ["value", "size", "disabled", "allow-clear", "placeholder"])) : vue.createCommentVNode("v-if", true),
          vue.createVNode(_component_a_popover, vue.mergeProps({
            open: showPicker.value,
            trigger: "click"
          }, _ctx.$attrs), {
            content: vue.withCtx(() => [
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(vue.unref(bem).m("dropdown-main-wrapper"))
                },
                [
                  vue.createVNode(svPanel_vue_vue_type_script_setup_true_lang.default, {
                    ref_key: "svPanel",
                    ref: svPanel,
                    color: color$1
                  }, null, 8, ["color"]),
                  vue.createVNode(hueSlider_vue_vue_type_script_setup_true_lang.default, {
                    ref_key: "hueSlider",
                    ref: hueSlider,
                    class: "hue-slider",
                    color: color$1,
                    vertical: ""
                  }, null, 8, ["color"])
                ],
                2
                /* CLASS */
              ),
              _ctx.showAlpha ? (vue.openBlock(), vue.createBlock(alphaSlider_vue_vue_type_script_setup_true_lang.default, {
                key: 0,
                ref_key: "alpha",
                ref: alpha,
                color: color$1
              }, null, 8, ["color"])) : vue.createCommentVNode("v-if", true),
              _ctx.predefine.length ? (vue.openBlock(), vue.createBlock(preDefine_vue_vue_type_script_setup_true_lang.default, {
                key: 1,
                ref: "predefine",
                color: color$1,
                colors: _ctx.predefine
              }, null, 8, ["color", "colors"])) : vue.createCommentVNode("v-if", true),
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass(vue.unref(bem).m("dropdown-button"))
                },
                [
                  vue.createElementVNode(
                    "span",
                    {
                      class: vue.normalizeClass(vue.unref(bem).m("dropdown-value"))
                    },
                    [
                      props.usePipette ? (vue.openBlock(), vue.createBlock(_component_ll_button, {
                        key: 0,
                        size: "small",
                        onClick: handleColorPicking
                      }, {
                        default: vue.withCtx(() => [
                          vue.createVNode(_component_ll_icon, { "icon-name": "icon-straw" })
                        ]),
                        _: 1
                        /* STABLE */
                      })) : vue.createCommentVNode("v-if", true),
                      vue.createVNode(_component_ll_input, {
                        value: customInput.value,
                        "onUpdate:value": _cache[1] || (_cache[1] = ($event) => customInput.value = $event),
                        size: "small",
                        onPressEnter: handleConfirm,
                        onBlur: handleConfirm
                      }, null, 8, ["value"])
                    ],
                    2
                    /* CLASS */
                  ),
                  vue.createElementVNode(
                    "div",
                    {
                      class: vue.normalizeClass(vue.unref(bem).m("button"))
                    },
                    [
                      vue.createVNode(_component_ll_button, {
                        type: "link",
                        size: "small",
                        class: vue.normalizeClass(vue.unref(bem).m("cancel-button")),
                        onClick: clear
                      }, {
                        default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
                          vue.createTextVNode(
                            " \u6E05\u7A7A ",
                            -1
                            /* CACHED */
                          )
                        ])]),
                        _: 1
                        /* STABLE */
                      }, 8, ["class"]),
                      vue.createVNode(_component_ll_button, {
                        size: "small",
                        onClick: confirmValue
                      }, {
                        default: vue.withCtx(() => [..._cache[3] || (_cache[3] = [
                          vue.createTextVNode(
                            " \u786E\u5B9A ",
                            -1
                            /* CACHED */
                          )
                        ])]),
                        _: 1
                        /* STABLE */
                      })
                    ],
                    2
                    /* CLASS */
                  )
                ],
                2
                /* CLASS */
              )
            ]),
            default: vue.withCtx(() => [
              vue.createVNode(_component_ll_button, {
                class: vue.normalizeClass(vue.unref(bem).b()),
                disabled: colorDisabled.value,
                size: _ctx.size,
                onClick: handleTrigger
              }, {
                icon: vue.withCtx(() => [
                  vue.createElementVNode(
                    "div",
                    {
                      class: vue.normalizeClass([
                        vue.unref(bem).m("color"),
                        _ctx.showAlpha ? vue.unref(bem).is("alpha") : "",
                        !_ctx.pickerMode ? vue.unref(bem).is("show-input") : ""
                      ])
                    },
                    [
                      vue.createElementVNode(
                        "div",
                        {
                          class: vue.normalizeClass([vue.unref(bem).m("color-inner")]),
                          style: vue.normalizeStyle({ backgroundColor: displayedColor.value })
                        },
                        [
                          vue.createVNode(_component_ll_icon, {
                            "icon-name": showPicker.value ? "icon-line-arrow-folding" : "icon-line-arrow-down",
                            color: "var(--default-icon)",
                            size: _ctx.size === "small" ? 12 : void 0
                          }, null, 8, ["icon-name", "size"])
                        ],
                        6
                        /* CLASS, STYLE */
                      )
                    ],
                    2
                    /* CLASS */
                  )
                ]),
                _: 1
                /* STABLE */
              }, 8, ["class", "disabled", "size"])
            ]),
            _: 1
            /* STABLE */
          }, 16, ["open"])
        ]),
        _: 1
        /* STABLE */
      }, 8, ["class"]);
    };
  }
});

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