@element-plus/nightly 0.0.20250705 → 0.0.20250707

package/es/components/collapse/src/collapse-item2.mjs

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

package/es/components/collapse/src/collapse-item2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse-item2.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\nimport { ArrowRight } from '@element-plus/icons-vue'\n\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":[],"mappings":";;;;AAEY,MAAC,iBAAiB,GAAG,UAAU,CAAC;AAC5C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,YAAY;AACtB,IAAI,OAAO,EAAE,UAAU;AACvB,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,CAAC;;;;"}
+{"version":3,"file":"collapse-item2.mjs","sources":["../../../../../../packages/components/collapse/src/collapse-item.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <div\n      :id=\"scopedHeadId\"\n      :class=\"headKls\"\n      :aria-expanded=\"isActive\"\n      :aria-controls=\"scopedContentId\"\n      :aria-describedby=\"scopedContentId\"\n      :tabindex=\"disabled ? -1 : 0\"\n      role=\"button\"\n      @click=\"handleHeaderClick\"\n      @keydown.space.enter.stop=\"handleEnterClick\"\n      @focus=\"handleFocus\"\n      @blur=\"focusing = false\"\n    >\n      <span :class=\"itemTitleKls\">\n        <slot name=\"title\" :is-active=\"isActive\">{{ title }}</slot>\n      </span>\n      <slot name=\"icon\" :is-active=\"isActive\">\n        <el-icon :class=\"arrowKls\">\n          <component :is=\"icon\" />\n        </el-icon>\n      </slot>\n    </div>\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  itemTitleKls,\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":[],"mappings":";;;;;;;mCAgDc,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,GAAI,gBAAgB,KAAK,CAAA,CAAA;AAEzB,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA;AAAA,QACE,kBAAmB,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/es/components/collapse/src/collapse.d.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue';
 import type { Arrayable, Awaitable } from '@element-plus/nightly/es/utils';
 export type CollapseActiveName = string | number;
 export type CollapseModelValue = Arrayable<CollapseActiveName>;
@@ -16,6 +16,7 @@ export declare const collapseProps: {
     };
 };
 export type CollapseProps = ExtractPropTypes<typeof collapseProps>;
+export type CollapsePropsPublic = __ExtractPublicPropTypes<typeof collapseProps>;
 export declare const collapseEmits: {
     "update:modelValue": (value: CollapseModelValue) => value is string | number | CollapseActiveName[];
     change: (value: CollapseModelValue) => value is string | number | CollapseActiveName[];

package/es/components/collapse/src/collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.mjs","sources":["../../../../../../packages/components/collapse/src/collapse.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isArray,\n  isNumber,\n  isString,\n  mutable,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { Arrayable, Awaitable } from '@element-plus/utils'\n\nexport type CollapseActiveName = string | number\nexport type CollapseModelValue = Arrayable<CollapseActiveName>\n\nexport type CollapseIconPositionType = 'left' | 'right'\n\nexport const emitChangeFn = (value: CollapseModelValue) =>\n  isNumber(value) || isString(value) || isArray(value)\n\nexport const collapseProps = buildProps({\n  /**\n   * @description whether to activate accordion mode\n   */\n  accordion: Boolean,\n  /**\n   * @description currently active panel, the type is `string` in accordion mode, otherwise it is `array`\n   */\n  modelValue: {\n    type: definePropType<CollapseModelValue>([Array, String, Number]),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description set expand icon position\n   */\n  expandIconPosition: {\n    type: definePropType<CollapseIconPositionType>([String]),\n    default: 'right',\n  },\n  /**\n   * @description before-collapse hook before the collapse state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop collapsing\n   */\n  beforeCollapse: {\n    type: definePropType<(name: CollapseActiveName) => Awaitable<boolean>>(\n      Function\n    ),\n  },\n} as const)\nexport type CollapseProps = ExtractPropTypes<typeof collapseProps>\n\nexport const collapseEmits = {\n  [UPDATE_MODEL_EVENT]: emitChangeFn,\n  [CHANGE_EVENT]: emitChangeFn,\n}\nexport type CollapseEmits = typeof collapseEmits\n"],"names":[],"mappings":";;;;;;AASY,MAAC,YAAY,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,KAAK,EAAE;AAChF,MAAC,aAAa,GAAG,UAAU,CAAC;AACxC,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAClC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,CAAC,kBAAkB,GAAG,YAAY;AACpC,EAAE,CAAC,YAAY,GAAG,YAAY;AAC9B;;;;"}
+{"version":3,"file":"collapse.mjs","sources":["../../../../../../packages/components/collapse/src/collapse.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isArray,\n  isNumber,\n  isString,\n  mutable,\n} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ExtractPropTypes, __ExtractPublicPropTypes } from 'vue'\nimport type { Arrayable, Awaitable } from '@element-plus/utils'\n\nexport type CollapseActiveName = string | number\nexport type CollapseModelValue = Arrayable<CollapseActiveName>\n\nexport type CollapseIconPositionType = 'left' | 'right'\n\nexport const emitChangeFn = (value: CollapseModelValue) =>\n  isNumber(value) || isString(value) || isArray(value)\n\nexport const collapseProps = buildProps({\n  /**\n   * @description whether to activate accordion mode\n   */\n  accordion: Boolean,\n  /**\n   * @description currently active panel, the type is `string` in accordion mode, otherwise it is `array`\n   */\n  modelValue: {\n    type: definePropType<CollapseModelValue>([Array, String, Number]),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description set expand icon position\n   */\n  expandIconPosition: {\n    type: definePropType<CollapseIconPositionType>([String]),\n    default: 'right',\n  },\n  /**\n   * @description before-collapse hook before the collapse state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop collapsing\n   */\n  beforeCollapse: {\n    type: definePropType<(name: CollapseActiveName) => Awaitable<boolean>>(\n      Function\n    ),\n  },\n} as const)\nexport type CollapseProps = ExtractPropTypes<typeof collapseProps>\nexport type CollapsePropsPublic = __ExtractPublicPropTypes<typeof collapseProps>\n\nexport const collapseEmits = {\n  [UPDATE_MODEL_EVENT]: emitChangeFn,\n  [CHANGE_EVENT]: emitChangeFn,\n}\nexport type CollapseEmits = typeof collapseEmits\n"],"names":[],"mappings":";;;;;;AASY,MAAC,YAAY,GAAG,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,KAAK,EAAE;AAChF,MAAC,aAAa,GAAG,UAAU,CAAC;AACxC,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AACjD,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAClC,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,CAAC,kBAAkB,GAAG,YAAY;AACpC,EAAE,CAAC,YAAY,GAAG,YAAY;AAC9B;;;;"}

package/es/components/color-picker/index.mjs

@@ -1,5 +1,5 @@
-import ColorPicker from './src/color-picker.mjs';
-export { colorPickerContextKey, colorPickerEmits, colorPickerProps } from './src/color-picker2.mjs';
+import ColorPicker from './src/color-picker2.mjs';
+export { colorPickerContextKey, colorPickerEmits, colorPickerProps } from './src/color-picker.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 
 const ElColorPicker = withInstall(ColorPicker);

package/es/components/color-picker/src/color-picker.d.ts

@@ -1,4 +1,4 @@
-import type { ComputedRef, ExtractPropTypes, InjectionKey } from 'vue';
+import type { ComputedRef, ExtractPropTypes, InjectionKey, __ExtractPublicPropTypes } from 'vue';
 import type ColorPicker from './color-picker.vue';
 export declare const colorPickerProps: {
     readonly ariaLabel: StringConstructor;
@@ -34,6 +34,7 @@ export declare const colorPickerEmits: {
     blur: (evt: FocusEvent) => boolean;
 };
 export type ColorPickerProps = ExtractPropTypes<typeof colorPickerProps>;
+export type ColorPickerPropsPublic = __ExtractPublicPropTypes<typeof colorPickerProps>;
 export type ColorPickerEmits = typeof colorPickerEmits;
 export type ColorPickerInstance = InstanceType<typeof ColorPicker> & unknown;
 export interface ColorPickerContext {

package/es/components/color-picker/src/color-picker.mjs

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