"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const event = require("../../../constants/event.js");
const error = require("../../../utils/error.js");
const index = require("../../../hooks/use-namespace/index.js");
const useFormCommonProps = require("../../form/src/hooks/use-form-common-props.js");
const useFormItem = require("../../form/src/hooks/use-form-item.js");
const index$1 = require("../../input/index.js");
const colorPickerPanel = require("./color-picker-panel.js");
const alphaSlider = require("./components/alpha-slider.js");
const hueSlider = require("./components/hue-slider.js");
const predefine = require("./components/predefine.js");
const svPanel = require("./components/sv-panel.js");
const useCommonColor = require("./composables/use-common-color.js");
const Vue = require("vue");
var color_picker_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElColorPickerPanel",
  __name: "color-picker-panel",
  props: colorPickerPanel.colorPickerPanelProps,
  emits: colorPickerPanel.colorPickerPanelEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const ns = index.useNamespace("color-picker-panel");
    const { formItem } = useFormItem.useFormItem();
    const disabled = useFormCommonProps.useFormDisabled();
    const hueRef = Vue.ref();
    const svRef = Vue.ref();
    const alphaRef = Vue.ref();
    const inputRef = Vue.ref();
    const customInput = Vue.ref("");
    const { color } = Vue.inject(colorPickerPanel.ROOT_COMMON_COLOR_INJECTION_KEY, () => useCommonColor.useCommonColor(props, emit), true);
    function handleConfirm() {
      color.fromString(customInput.value);
      if (color.value !== customInput.value) customInput.value = color.value;
    }
    function handleFocusout() {
      var _a;
      if (props.validateEvent) (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => error.debugWarn(err));
    }
    function update() {
      var _a, _b, _c;
      (_a = hueRef.value) == null ? void 0 : _a.update();
      (_b = svRef.value) == null ? void 0 : _b.update();
      (_c = alphaRef.value) == null ? void 0 : _c.update();
    }
    Vue.onMounted(() => {
      if (props.modelValue) customInput.value = color.value;
      Vue.nextTick(update);
    });
    Vue.watch(() => props.modelValue, (newVal) => {
      if (newVal !== color.value) newVal ? color.fromString(newVal) : color.clear();
    });
    Vue.watch(() => color.value, (val) => {
      emit(event.UPDATE_MODEL_EVENT, val);
      customInput.value = val;
      if (props.validateEvent) formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
    });
    Vue.provide(colorPickerPanel.colorPickerPanelContextKey, { currentColor: Vue.computed(() => color.value) });
    __expose({
      color,
      inputRef,
      update
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        class: Vue.normalizeClass([
          Vue.unref(ns).b(),
          Vue.unref(ns).is("disabled", Vue.unref(disabled)),
          Vue.unref(ns).is("border", __props.border)
        ]),
        onFocusout: handleFocusout
      }, [
        Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("wrapper")) }, [Vue.createVNode(hueSlider.default, {
          ref_key: "hueRef",
          ref: hueRef,
          color: Vue.unref(color),
          vertical: "",
          disabled: Vue.unref(disabled),
          class: Vue.normalizeClass(["hue-slider", __props.hueSliderClass]),
          style: Vue.normalizeStyle(__props.hueSliderStyle)
        }, null, 8, [
          "color",
          "disabled",
          "class",
          "style"
        ]), Vue.createVNode(svPanel.default, {
          ref_key: "svRef",
          ref: svRef,
          color: Vue.unref(color),
          disabled: Vue.unref(disabled)
        }, null, 8, ["color", "disabled"])], 2),
        __props.showAlpha ? (Vue.openBlock(), Vue.createBlock(alphaSlider.default, {
          key: 0,
          ref_key: "alphaRef",
          ref: alphaRef,
          color: Vue.unref(color),
          disabled: Vue.unref(disabled)
        }, null, 8, ["color", "disabled"])) : Vue.createCommentVNode("v-if", true),
        __props.predefine ? (Vue.openBlock(), Vue.createBlock(predefine.default, {
          key: 1,
          ref: "predefine",
          "enable-alpha": __props.showAlpha,
          color: Vue.unref(color),
          colors: __props.predefine,
          disabled: Vue.unref(disabled)
        }, null, 8, [
          "enable-alpha",
          "color",
          "colors",
          "disabled"
        ])) : Vue.createCommentVNode("v-if", true),
        Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("footer")) }, [Vue.createVNode(Vue.unref(index$1.ElInput), {
          ref_key: "inputRef",
          ref: inputRef,
          modelValue: customInput.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => customInput.value = $event),
          "validate-event": false,
          size: "small",
          disabled: Vue.unref(disabled),
          onChange: handleConfirm
        }, null, 8, ["modelValue", "disabled"]), Vue.renderSlot(_ctx.$slots, "footer")], 2)
      ], 34);
    };
  }
});
exports.default = color_picker_panel_vue_vue_type_script_setup_true_lang_default;
