@element-plus/nightly 0.0.20241208 → 0.0.20241210

package/lib/components/collapse/src/collapse-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item.js","sources":["../../../../../../packages/components/collapse/src/collapse-item.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\nimport { ArrowRight } from '@element-plus/icons-vue'\nimport type { ExtractPropTypes } from 'vue'\nimport type { CollapseActiveName } from './collapse'\n\nexport const collapseItemProps = buildProps({\n  /**\n   * @description title of the panel\n   */\n  title: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description unique identification of the panel\n   */\n  name: {\n    type: definePropType<CollapseActiveName>([String, Number]),\n    default: undefined,\n  },\n  /**\n   * @description icon of the collapse item\n   */\n  icon: {\n    type: iconPropType,\n    default: ArrowRight,\n  },\n  /**\n   * @description disable the collapse item\n   */\n  disabled: Boolean,\n} as const)\nexport type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>\n"],"names":["buildProps","definePropType","iconPropType","ArrowRight"],"mappings":";;;;;;;;AAEY,MAAC,iBAAiB,GAAGA,kBAAU,CAAC;AAC5C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,iBAAY;AACtB,IAAI,OAAO,EAAEC,mBAAU;AACvB,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,CAAC;;;;"}
+{"version":3,"file":"collapse-item.js","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <button\n      :id=\"scopedHeadId\"\n      :class=\"headKls\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"scopedContentId\"\n      :aria-describedby=\"scopedContentId\"\n      :tabindex=\"disabled ? -1 : 0\"\n      type=\"button\"\n      @click=\"handleHeaderClick\"\n      @keydown.space.enter.stop.prevent=\"handleEnterClick\"\n      @focus=\"handleFocus\"\n      @blur=\"focusing = false\"\n    >\n      <slot name=\"title\">{{ title }}</slot>\n      <slot name=\"icon\" :is-active=\"isActive\">\n        <el-icon :class=\"arrowKls\">\n          <component :is=\"icon\" />\n        </el-icon>\n      </slot>\n    </button>\n\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"scopedContentId\"\n        role=\"region\"\n        :class=\"itemWrapperKls\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"scopedHeadId\"\n      >\n        <div :class=\"itemContentKls\">\n          <slot />\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { collapseItemProps } from './collapse-item'\nimport { useCollapseItem, useCollapseItemDOM } from './use-collapse-item'\n\ndefineOptions({\n  name: 'ElCollapseItem',\n})\n\nconst props = defineProps(collapseItemProps)\nconst {\n  focusing,\n  id,\n  isActive,\n  handleFocus,\n  handleHeaderClick,\n  handleEnterClick,\n} = useCollapseItem(props)\n\nconst {\n  arrowKls,\n  headKls,\n  rootKls,\n  itemWrapperKls,\n  itemContentKls,\n  scopedContentId,\n  scopedHeadId,\n} = useCollapseItemDOM(props, { focusing, isActive, id })\n\ndefineExpose({\n  /** @description current collapse-item whether active */\n  isActive,\n})\n</script>\n"],"names":["useCollapseItem","useCollapseItemDOM"],"mappings":";;;;;;;;;;;uCA8Cc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAGA,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,EAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,KACF,GAAIA,gCAAgB,KAAK,CAAA,CAAA;AAEzB,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,QACEC,kCAAmB,CAAA,KAAA,EAAO,EAAE,QAAU,EAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAExD,IAAa,MAAA,CAAA;AAAA,MAAA,QAAA;AAAA,KAEX,CAAA,CAAA;AAAA,IACF,OAAC,CAAA,IAAA,EAAA,MAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/collapse/src/collapse-item2.js

@@ -2,97 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
-var index$1 = require('../../collapse-transition/index.js');
-var index = require('../../icon/index.js');
-var collapseItem = require('./collapse-item.js');
-var useCollapseItem = require('./use-collapse-item.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var iconsVue = require('@element-plus/icons-vue');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var icon = require('../../../utils/vue/icon.js');
 
-const __default__ = vue.defineComponent({
-  name: "ElCollapseItem"
+const collapseItemProps = runtime.buildProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  name: {
+    type: runtime.definePropType([String, Number]),
+    default: void 0
+  },
+  icon: {
+    type: icon.iconPropType,
+    default: iconsVue.ArrowRight
+  },
+  disabled: Boolean
 });
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: collapseItem.collapseItemProps,
-  setup(__props, { expose }) {
-    const props = __props;
-    const {
-      focusing,
-      id,
-      isActive,
-      handleFocus,
-      handleHeaderClick,
-      handleEnterClick
-    } = useCollapseItem.useCollapseItem(props);
-    const {
-      arrowKls,
-      headKls,
-      rootKls,
-      itemWrapperKls,
-      itemContentKls,
-      scopedContentId,
-      scopedHeadId
-    } = useCollapseItem.useCollapseItemDOM(props, { focusing, isActive, id });
-    expose({
-      isActive
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(vue.unref(rootKls))
-      }, [
-        vue.createElementVNode("button", {
-          id: vue.unref(scopedHeadId),
-          class: vue.normalizeClass(vue.unref(headKls)),
-          "aria-expanded": vue.unref(isActive),
-          "aria-controls": vue.unref(scopedContentId),
-          "aria-describedby": vue.unref(scopedContentId),
-          tabindex: _ctx.disabled ? -1 : 0,
-          type: "button",
-          onClick: vue.unref(handleHeaderClick),
-          onKeydown: vue.withKeys(vue.withModifiers(vue.unref(handleEnterClick), ["stop", "prevent"]), ["space", "enter"]),
-          onFocus: vue.unref(handleFocus),
-          onBlur: ($event) => focusing.value = false
-        }, [
-          vue.renderSlot(_ctx.$slots, "title", {}, () => [
-            vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
-          ]),
-          vue.renderSlot(_ctx.$slots, "icon", { isActive: vue.unref(isActive) }, () => [
-            vue.createVNode(vue.unref(index.ElIcon), {
-              class: vue.normalizeClass(vue.unref(arrowKls))
-            }, {
-              default: vue.withCtx(() => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.icon)))
-              ]),
-              _: 1
-            }, 8, ["class"])
-          ])
-        ], 42, ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex", "onClick", "onKeydown", "onFocus", "onBlur"]),
-        vue.createVNode(vue.unref(index$1.ElCollapseTransition), null, {
-          default: vue.withCtx(() => [
-            vue.withDirectives(vue.createElementVNode("div", {
-              id: vue.unref(scopedContentId),
-              role: "region",
-              class: vue.normalizeClass(vue.unref(itemWrapperKls)),
-              "aria-hidden": !vue.unref(isActive),
-              "aria-labelledby": vue.unref(scopedHeadId)
-            }, [
-              vue.createElementVNode("div", {
-                class: vue.normalizeClass(vue.unref(itemContentKls))
-              }, [
-                vue.renderSlot(_ctx.$slots, "default")
-              ], 2)
-            ], 10, ["id", "aria-hidden", "aria-labelledby"]), [
-              [vue.vShow, vue.unref(isActive)]
-            ])
-          ]),
-          _: 3
-        })
-      ], 2);
-    };
-  }
-});
-var CollapseItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "collapse-item.vue"]]);
 
-exports["default"] = CollapseItem;
+exports.collapseItemProps = collapseItemProps;
 //# sourceMappingURL=collapse-item2.js.map

package/lib/components/collapse/src/collapse-item2.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item2.js","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <button\n      :id=\"scopedHeadId\"\n      :class=\"headKls\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"scopedContentId\"\n      :aria-describedby=\"scopedContentId\"\n      :tabindex=\"disabled ? -1 : 0\"\n      type=\"button\"\n      @click=\"handleHeaderClick\"\n      @keydown.space.enter.stop.prevent=\"handleEnterClick\"\n      @focus=\"handleFocus\"\n      @blur=\"focusing = false\"\n    >\n      <slot name=\"title\">{{ title }}</slot>\n      <slot name=\"icon\" :is-active=\"isActive\">\n        <el-icon :class=\"arrowKls\">\n          <component :is=\"icon\" />\n        </el-icon>\n      </slot>\n    </button>\n\n    <el-collapse-transition>\n      <div\n        v-show=\"isActive\"\n        :id=\"scopedContentId\"\n        role=\"region\"\n        :class=\"itemWrapperKls\"\n        :aria-hidden=\"!isActive\"\n        :aria-labelledby=\"scopedHeadId\"\n      >\n        <div :class=\"itemContentKls\">\n          <slot />\n        </div>\n      </div>\n    </el-collapse-transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport ElCollapseTransition from '@element-plus/components/collapse-transition'\nimport ElIcon from '@element-plus/components/icon'\nimport { collapseItemProps } from './collapse-item'\nimport { useCollapseItem, useCollapseItemDOM } from './use-collapse-item'\n\ndefineOptions({\n  name: 'ElCollapseItem',\n})\n\nconst props = defineProps(collapseItemProps)\nconst {\n  focusing,\n  id,\n  isActive,\n  handleFocus,\n  handleHeaderClick,\n  handleEnterClick,\n} = useCollapseItem(props)\n\nconst {\n  arrowKls,\n  headKls,\n  rootKls,\n  itemWrapperKls,\n  itemContentKls,\n  scopedContentId,\n  scopedHeadId,\n} = useCollapseItemDOM(props, { focusing, isActive, id })\n\ndefineExpose({\n  /** @description current collapse-item whether active */\n  isActive,\n})\n</script>\n"],"names":["useCollapseItem","useCollapseItemDOM"],"mappings":";;;;;;;;;;;uCA8Cc,CAAA;AAAA,EACZ,IAAM,EAAA,gBAAA;AACR,CAAA,CAAA,CAAA;;;;;;AAGA,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,EAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,KACF,GAAIA,gCAAgB,KAAK,CAAA,CAAA;AAEzB,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,QACEC,kCAAmB,CAAA,KAAA,EAAO,EAAE,QAAU,EAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAExD,IAAa,MAAA,CAAA;AAAA,MAAA,QAAA;AAAA,KAEX,CAAA,CAAA;AAAA,IACF,OAAC,CAAA,IAAA,EAAA,MAAA,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"collapse-item2.js","sources":["../../../../../../packages/components/collapse/src/collapse-item.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\nimport { ArrowRight } from '@element-plus/icons-vue'\nimport type { ExtractPropTypes } from 'vue'\nimport type { CollapseActiveName } from './collapse'\n\nexport const collapseItemProps = buildProps({\n  /**\n   * @description title of the panel\n   */\n  title: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description unique identification of the panel\n   */\n  name: {\n    type: definePropType<CollapseActiveName>([String, Number]),\n    default: undefined,\n  },\n  /**\n   * @description icon of the collapse item\n   */\n  icon: {\n    type: iconPropType,\n    default: ArrowRight,\n  },\n  /**\n   * @description disable the collapse item\n   */\n  disabled: Boolean,\n} as const)\nexport type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>\n"],"names":["buildProps","definePropType","iconPropType","ArrowRight"],"mappings":";;;;;;;;AAEY,MAAC,iBAAiB,GAAGA,kBAAU,CAAC;AAC5C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,sBAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAEC,iBAAY;AACtB,IAAI,OAAO,EAAEC,mBAAU;AACvB,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,CAAC;;;;"}

package/lib/components/color-picker/index.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var colorPicker$1 = require('./src/color-picker2.js');
-var colorPicker = require('./src/color-picker.js');
+var colorPicker$1 = require('./src/color-picker.js');
+var colorPicker = require('./src/color-picker2.js');
 var install = require('../../utils/vue/install.js');
 
 const ElColorPicker = install.withInstall(colorPicker$1["default"]);

package/lib/components/color-picker/src/color-picker.js

@@ -2,49 +2,406 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
 var lodashUnified = require('lodash-unified');
-var runtime = require('../../../utils/vue/props/runtime.js');
-var index = require('../../../hooks/use-size/index.js');
-var content = require('../../tooltip/src/content.js');
-var index$1 = require('../../../hooks/use-aria/index.js');
+var index$5 = require('../../button/index.js');
+var index$7 = require('../../icon/index.js');
+var index$3 = require('../../tooltip/index.js');
+var index$4 = require('../../input/index.js');
+var iconsVue = require('@element-plus/icons-vue');
+var alphaSlider = require('./components/alpha-slider.js');
+var hueSlider = require('./components/hue-slider.js');
+var predefine = require('./components/predefine.js');
+var svPanel = require('./components/sv-panel.js');
+var color = require('./utils/color.js');
+var colorPicker = require('./color-picker2.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index$6 = require('../../../directives/click-outside/index.js');
+var index = require('../../../hooks/use-locale/index.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
+var useFormItem = require('../../form/src/hooks/use-form-item.js');
+var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
+var index$2 = require('../../../hooks/use-focus-controller/index.js');
 var event = require('../../../constants/event.js');
-var shared = require('@vue/shared');
+var error = require('../../../utils/error.js');
+var aria = require('../../../constants/aria.js');
 
-const colorPickerProps = runtime.buildProps({
-  modelValue: String,
-  id: String,
-  showAlpha: Boolean,
-  colorFormat: String,
-  disabled: Boolean,
-  size: index.useSizeProp,
-  popperClass: {
-    type: String,
-    default: ""
-  },
-  tabindex: {
-    type: [String, Number],
-    default: 0
-  },
-  teleported: content.useTooltipContentProps.teleported,
-  predefine: {
-    type: runtime.definePropType(Array)
-  },
-  validateEvent: {
-    type: Boolean,
-    default: true
-  },
-  ...index$1.useAriaProps(["ariaLabel"])
+const __default__ = vue.defineComponent({
+  name: "ElColorPicker"
 });
-const colorPickerEmits = {
-  [event.UPDATE_MODEL_EVENT]: (val) => shared.isString(val) || lodashUnified.isNil(val),
-  [event.CHANGE_EVENT]: (val) => shared.isString(val) || lodashUnified.isNil(val),
-  activeChange: (val) => shared.isString(val) || lodashUnified.isNil(val),
-  focus: (evt) => evt instanceof FocusEvent,
-  blur: (evt) => evt instanceof FocusEvent
-};
-const colorPickerContextKey = Symbol("colorPickerContextKey");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: colorPicker.colorPickerProps,
+  emits: colorPicker.colorPickerEmits,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const { t } = index.useLocale();
+    const ns = index$1.useNamespace("color");
+    const { formItem } = useFormItem.useFormItem();
+    const colorSize = useFormCommonProps.useFormSize();
+    const colorDisabled = useFormCommonProps.useFormDisabled();
+    const { inputId: buttonId, isLabeledByFormItem } = useFormItem.useFormItemInputId(props, {
+      formItemContext: formItem
+    });
+    const hue = vue.ref();
+    const sv = vue.ref();
+    const alpha = vue.ref();
+    const popper = vue.ref();
+    const triggerRef = vue.ref();
+    const inputRef = vue.ref();
+    const { isFocused, handleFocus, handleBlur } = index$2.useFocusController(triggerRef, {
+      beforeFocus() {
+        return colorDisabled.value;
+      },
+      beforeBlur(event) {
+        var _a;
+        return (_a = popper.value) == null ? void 0 : _a.isFocusInsideContent(event);
+      },
+      afterBlur() {
+        setShowPicker(false);
+        resetColor();
+      }
+    });
+    let shouldActiveChange = true;
+    const color$1 = vue.reactive(new color["default"]({
+      enableAlpha: props.showAlpha,
+      format: props.colorFormat || "",
+      value: props.modelValue
+    }));
+    const showPicker = vue.ref(false);
+    const showPanelColor = vue.ref(false);
+    const customInput = vue.ref("");
+    const displayedColor = vue.computed(() => {
+      if (!props.modelValue && !showPanelColor.value) {
+        return "transparent";
+      }
+      return displayedRgb(color$1, props.showAlpha);
+    });
+    const currentColor = vue.computed(() => {
+      return !props.modelValue && !showPanelColor.value ? "" : color$1.value;
+    });
+    const buttonAriaLabel = vue.computed(() => {
+      return !isLabeledByFormItem.value ? props.ariaLabel || t("el.colorpicker.defaultLabel") : void 0;
+    });
+    const buttonAriaLabelledby = vue.computed(() => {
+      return isLabeledByFormItem.value ? formItem == null ? void 0 : formItem.labelId : void 0;
+    });
+    const btnKls = vue.computed(() => {
+      return [
+        ns.b("picker"),
+        ns.is("disabled", colorDisabled.value),
+        ns.bm("picker", colorSize.value),
+        ns.is("focused", isFocused.value)
+      ];
+    });
+    function displayedRgb(color2, showAlpha) {
+      if (!(color2 instanceof color["default"])) {
+        throw new TypeError("color should be instance of _color Class");
+      }
+      const { r, g, b } = color2.toRgb();
+      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
+    }
+    function setShowPicker(value) {
+      showPicker.value = value;
+    }
+    const debounceSetShowPicker = lodashUnified.debounce(setShowPicker, 100, { leading: true });
+    function show() {
+      if (colorDisabled.value)
+        return;
+      setShowPicker(true);
+    }
+    function hide() {
+      debounceSetShowPicker(false);
+      resetColor();
+    }
+    function resetColor() {
+      vue.nextTick(() => {
+        if (props.modelValue) {
+          color$1.fromString(props.modelValue);
+        } else {
+          color$1.value = "";
+          vue.nextTick(() => {
+            showPanelColor.value = false;
+          });
+        }
+      });
+    }
+    function handleTrigger() {
+      if (colorDisabled.value)
+        return;
+      debounceSetShowPicker(!showPicker.value);
+    }
+    function handleConfirm() {
+      color$1.fromString(customInput.value);
+    }
+    function confirmValue() {
+      const value = color$1.value;
+      emit(event.UPDATE_MODEL_EVENT, value);
+      emit("change", value);
+      if (props.validateEvent) {
+        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
+      }
+      debounceSetShowPicker(false);
+      vue.nextTick(() => {
+        const newColor = new color["default"]({
+          enableAlpha: props.showAlpha,
+          format: props.colorFormat || "",
+          value: props.modelValue
+        });
+        if (!color$1.compare(newColor)) {
+          resetColor();
+        }
+      });
+    }
+    function clear() {
+      debounceSetShowPicker(false);
+      emit(event.UPDATE_MODEL_EVENT, null);
+      emit("change", null);
+      if (props.modelValue !== null && props.validateEvent) {
+        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
+      }
+      resetColor();
+    }
+    function handleClickOutside() {
+      if (!showPicker.value)
+        return;
+      hide();
+      isFocused.value && focus();
+    }
+    function handleEsc(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      setShowPicker(false);
+      resetColor();
+    }
+    function handleKeyDown(event) {
+      switch (event.code) {
+        case aria.EVENT_CODE.enter:
+        case aria.EVENT_CODE.numpadEnter:
+        case aria.EVENT_CODE.space:
+          event.preventDefault();
+          event.stopPropagation();
+          show();
+          inputRef.value.focus();
+          break;
+        case aria.EVENT_CODE.esc:
+          handleEsc(event);
+          break;
+      }
+    }
+    function focus() {
+      triggerRef.value.focus();
+    }
+    function blur() {
+      triggerRef.value.blur();
+    }
+    vue.onMounted(() => {
+      if (props.modelValue) {
+        customInput.value = currentColor.value;
+      }
+    });
+    vue.watch(() => props.modelValue, (newVal) => {
+      if (!newVal) {
+        showPanelColor.value = false;
+      } else if (newVal && newVal !== color$1.value) {
+        shouldActiveChange = false;
+        color$1.fromString(newVal);
+      }
+    });
+    vue.watch(() => [props.colorFormat, props.showAlpha], () => {
+      color$1.enableAlpha = props.showAlpha;
+      color$1.format = props.colorFormat || color$1.format;
+      color$1.doOnChange();
+      emit(event.UPDATE_MODEL_EVENT, color$1.value);
+    });
+    vue.watch(() => currentColor.value, (val) => {
+      customInput.value = val;
+      shouldActiveChange && emit("activeChange", val);
+      shouldActiveChange = true;
+    });
+    vue.watch(() => color$1.value, () => {
+      if (!props.modelValue && !showPanelColor.value) {
+        showPanelColor.value = true;
+      }
+    });
+    vue.watch(() => showPicker.value, () => {
+      vue.nextTick(() => {
+        var _a, _b, _c;
+        (_a = hue.value) == null ? void 0 : _a.update();
+        (_b = sv.value) == null ? void 0 : _b.update();
+        (_c = alpha.value) == null ? void 0 : _c.update();
+      });
+    });
+    vue.provide(colorPicker.colorPickerContextKey, {
+      currentColor
+    });
+    expose({
+      color: color$1,
+      show,
+      hide,
+      focus,
+      blur
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(index$3.ElTooltip), {
+        ref_key: "popper",
+        ref: popper,
+        visible: showPicker.value,
+        "show-arrow": false,
+        "fallback-placements": ["bottom", "top", "right", "left"],
+        offset: 0,
+        "gpu-acceleration": false,
+        "popper-class": [vue.unref(ns).be("picker", "panel"), vue.unref(ns).b("dropdown"), _ctx.popperClass],
+        "stop-popper-mouse-event": false,
+        effect: "light",
+        trigger: "click",
+        teleported: _ctx.teleported,
+        transition: `${vue.unref(ns).namespace.value}-zoom-in-top`,
+        persistent: "",
+        onHide: ($event) => setShowPicker(false)
+      }, {
+        content: vue.withCtx(() => [
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            onKeydown: vue.withKeys(handleEsc, ["esc"])
+          }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).be("dropdown", "main-wrapper"))
+            }, [
+              vue.createVNode(hueSlider["default"], {
+                ref_key: "hue",
+                ref: hue,
+                class: "hue-slider",
+                color: vue.unref(color$1),
+                vertical: ""
+              }, null, 8, ["color"]),
+              vue.createVNode(svPanel["default"], {
+                ref_key: "sv",
+                ref: sv,
+                color: vue.unref(color$1)
+              }, null, 8, ["color"])
+            ], 2),
+            _ctx.showAlpha ? (vue.openBlock(), vue.createBlock(alphaSlider["default"], {
+              key: 0,
+              ref_key: "alpha",
+              ref: alpha,
+              color: vue.unref(color$1)
+            }, null, 8, ["color"])) : vue.createCommentVNode("v-if", true),
+            _ctx.predefine ? (vue.openBlock(), vue.createBlock(predefine["default"], {
+              key: 1,
+              ref: "predefine",
+              "enable-alpha": _ctx.showAlpha,
+              color: vue.unref(color$1),
+              colors: _ctx.predefine
+            }, null, 8, ["enable-alpha", "color", "colors"])) : vue.createCommentVNode("v-if", true),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btns"))
+            }, [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass(vue.unref(ns).be("dropdown", "value"))
+              }, [
+                vue.createVNode(vue.unref(index$4.ElInput), {
+                  ref_key: "inputRef",
+                  ref: inputRef,
+                  modelValue: customInput.value,
+                  "onUpdate:modelValue": ($event) => customInput.value = $event,
+                  "validate-event": false,
+                  size: "small",
+                  onKeyup: vue.withKeys(handleConfirm, ["enter"]),
+                  onBlur: handleConfirm
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "onKeyup"])
+              ], 2),
+              vue.createVNode(vue.unref(index$5.ElButton), {
+                class: vue.normalizeClass(vue.unref(ns).be("dropdown", "link-btn")),
+                text: "",
+                size: "small",
+                onClick: clear
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.colorpicker.clear")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              vue.createVNode(vue.unref(index$5.ElButton), {
+                plain: "",
+                size: "small",
+                class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btn")),
+                onClick: confirmValue
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.colorpicker.confirm")), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])
+            ], 2)
+          ], 40, ["onKeydown"])), [
+            [vue.unref(index$6["default"]), handleClickOutside]
+          ])
+        ]),
+        default: vue.withCtx(() => [
+          vue.createElementVNode("div", vue.mergeProps({
+            id: vue.unref(buttonId),
+            ref_key: "triggerRef",
+            ref: triggerRef
+          }, _ctx.$attrs, {
+            class: vue.unref(btnKls),
+            role: "button",
+            "aria-label": vue.unref(buttonAriaLabel),
+            "aria-labelledby": vue.unref(buttonAriaLabelledby),
+            "aria-description": vue.unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
+            "aria-disabled": vue.unref(colorDisabled),
+            tabindex: vue.unref(colorDisabled) ? -1 : _ctx.tabindex,
+            onKeydown: handleKeyDown,
+            onFocus: vue.unref(handleFocus),
+            onBlur: vue.unref(handleBlur)
+          }), [
+            vue.unref(colorDisabled) ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(vue.unref(ns).be("picker", "mask"))
+            }, null, 2)) : vue.createCommentVNode("v-if", true),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).be("picker", "trigger")),
+              onClick: handleTrigger
+            }, [
+              vue.createElementVNode("span", {
+                class: vue.normalizeClass([vue.unref(ns).be("picker", "color"), vue.unref(ns).is("alpha", _ctx.showAlpha)])
+              }, [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass(vue.unref(ns).be("picker", "color-inner")),
+                  style: vue.normalizeStyle({
+                    backgroundColor: vue.unref(displayedColor)
+                  })
+                }, [
+                  vue.withDirectives(vue.createVNode(vue.unref(index$7.ElIcon), {
+                    class: vue.normalizeClass([vue.unref(ns).be("picker", "icon"), vue.unref(ns).is("icon-arrow-down")])
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.ArrowDown))
+                    ]),
+                    _: 1
+                  }, 8, ["class"]), [
+                    [vue.vShow, _ctx.modelValue || showPanelColor.value]
+                  ]),
+                  vue.withDirectives(vue.createVNode(vue.unref(index$7.ElIcon), {
+                    class: vue.normalizeClass([vue.unref(ns).be("picker", "empty"), vue.unref(ns).is("icon-close")])
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.Close))
+                    ]),
+                    _: 1
+                  }, 8, ["class"]), [
+                    [vue.vShow, !_ctx.modelValue && !showPanelColor.value]
+                  ])
+                ], 6)
+              ], 2)
+            ], 2)
+          ], 16, ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex", "onFocus", "onBlur"])
+        ]),
+        _: 1
+      }, 8, ["visible", "popper-class", "teleported", "transition", "onHide"]);
+    };
+  }
+});
+var ColorPicker = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "color-picker.vue"]]);
 
-exports.colorPickerContextKey = colorPickerContextKey;
-exports.colorPickerEmits = colorPickerEmits;
-exports.colorPickerProps = colorPickerProps;
+exports["default"] = ColorPicker;
 //# sourceMappingURL=color-picker.js.map