@element-plus/nightly 0.0.20251228 → 0.0.20251229

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

@@ -2,25 +2,126 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var iconsVue = require('@element-plus/icons-vue');
-var runtime = require('../../../utils/vue/props/runtime.js');
-var icon = require('../../../utils/vue/icon.js');
+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');
 
-const collapseItemProps = runtime.buildProps({
-  title: {
-    type: String,
-    default: ""
+const _hoisted_1 = ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex", "aria-disabled"];
+const _hoisted_2 = ["id", "aria-hidden", "aria-labelledby"];
+const _sfc_main = vue.defineComponent({
+  ...{
+    name: "ElCollapseItem"
   },
-  name: {
-    type: runtime.definePropType([String, Number]),
-    default: void 0
-  },
-  icon: {
-    type: icon.iconPropType,
-    default: iconsVue.ArrowRight
-  },
-  disabled: Boolean
+  __name: "collapse-item",
+  props: collapseItem.collapseItemProps,
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const {
+      focusing,
+      id,
+      isActive,
+      handleFocus,
+      handleHeaderClick,
+      handleEnterClick
+    } = useCollapseItem.useCollapseItem(props);
+    const {
+      arrowKls,
+      headKls,
+      rootKls,
+      itemTitleKls,
+      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("div", {
+            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 ? void 0 : 0,
+            "aria-disabled": _ctx.disabled,
+            role: "button",
+            onClick: _cache[0] || (_cache[0] = (...args) => vue.unref(handleHeaderClick) && vue.unref(handleHeaderClick)(...args)),
+            onKeydown: _cache[1] || (_cache[1] = vue.withKeys(vue.withModifiers(
+              (...args) => vue.unref(handleEnterClick) && vue.unref(handleEnterClick)(...args),
+              ["stop"]
+            ), ["space", "enter"])),
+            onFocus: _cache[2] || (_cache[2] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
+            onBlur: _cache[3] || (_cache[3] = ($event) => focusing.value = false)
+          }, [
+            vue.createElementVNode(
+              "span",
+              {
+                class: vue.normalizeClass(vue.unref(itemTitleKls))
+              },
+              [
+                vue.renderSlot(_ctx.$slots, "title", { isActive: vue.unref(isActive) }, () => [
+                  vue.createTextVNode(
+                    vue.toDisplayString(_ctx.title),
+                    1
+                  )
+                ])
+              ],
+              2
+            ),
+            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, _hoisted_1),
+          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, _hoisted_2), [
+                [vue.vShow, vue.unref(isActive)]
+              ])
+            ]),
+            _: 3
+          })
+        ],
+        2
+      );
+    };
+  }
 });
+var CollapseItem = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/collapse/src/collapse-item.vue"]]);
 
-exports.collapseItemProps = collapseItemProps;
+exports["default"] = CollapseItem;
 //# 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.ts"],"sourcesContent":["import { buildProps, definePropType, iconPropType } from '@element-plus/utils'\nimport { ArrowRight } from '@element-plus/icons-vue'\n\nimport type { ExtractPropTypes, ExtractPublicPropTypes } 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>\nexport type CollapseItemPropsPublic = ExtractPublicPropTypes<\n  typeof collapseItemProps\n>\n"],"names":["buildProps","definePropType","iconPropType","ArrowRight"],"mappings":";;;;;;;;AAMO,MAAM,oBAAoBA,kBAAW,CAAA;AAAA,EAI1C,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA,EAIA,IAAM,EAAA;AAAA,IACJ,IAAM,EAAAC,sBAAA,CAAmC,CAAC,MAAA,EAAQ,MAAM,CAAC,CAAA;AAAA,IACzD,OAAS,EAAA,KAAA,CAAA;AAAA,GACX;AAAA,EAIA,IAAM,EAAA;AAAA,IACJ,IAAM,EAAAC,iBAAA;AAAA,IACN,OAAS,EAAAC,mBAAA;AAAA,GACX;AAAA,EAIA,QAAU,EAAA,OAAA;AACZ,CAAU;;;;"}
+{"version":3,"file":"collapse-item2.js","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 ? undefined : 0\"\n      :aria-disabled=\"disabled\"\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":["useCollapseItem","useCollapseItemDOM","_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","disabled","_withKeys","_withModifiers","_renderSlot","_createTextVNode","title","_createVNode","ElIcon","_createBlock","_resolveDynamicComponent","icon","ElCollapseTransition","_withCtx","_withDirectives"],"mappings":"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"}

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var colorPicker$1 = require('./src/color-picker.js');
-var colorPicker = require('./src/color-picker2.js');
+var colorPicker$1 = require('./src/color-picker2.js');
+var colorPicker = require('./src/color-picker.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,400 +2,63 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
 var lodashUnified = require('lodash-unified');
-var index$8 = require('../../icon/index.js');
-var core = require('@vueuse/core');
-var index$4 = require('../../tooltip/index.js');
-var index$6 = require('../../button/index.js');
-var iconsVue = require('@element-plus/icons-vue');
-var colorPicker = require('./color-picker2.js');
-var index$5 = require('../../color-picker-panel/index.js');
-var color = require('../../color-picker-panel/src/utils/color.js');
-var useCommonColor = require('../../color-picker-panel/src/composables/use-common-color.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var colorPickerPanel = require('../../color-picker-panel/src/color-picker-panel.js');
-var index$7 = 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-empty-values/index.js');
-var index$3 = require('../../../hooks/use-focus-controller/index.js');
-var error = require('../../../utils/error.js');
+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-empty-values/index.js');
+var index$2 = require('../../../hooks/use-aria/index.js');
 var event = require('../../../constants/event.js');
-var event$1 = require('../../../utils/dom/event.js');
-var aria = require('../../../constants/aria.js');
+var shared = require('@vue/shared');
 
-const _hoisted_1 = ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex"];
-const _sfc_main = vue.defineComponent({
-  ...{
-    name: "ElColorPicker"
+const colorPickerProps = runtime.buildProps({
+  persistent: {
+    type: Boolean,
+    default: true
   },
-  __name: "color-picker",
-  props: colorPicker.colorPickerProps,
-  emits: colorPicker.colorPickerEmits,
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { t } = index.useLocale();
-    const ns = index$1.useNamespace("color");
-    const { formItem } = useFormItem.useFormItem();
-    const colorSize = useFormCommonProps.useFormSize();
-    const colorDisabled = useFormCommonProps.useFormDisabled();
-    const { valueOnClear, isEmptyValue } = index$2.useEmptyValues(props, null);
-    const commonColor = useCommonColor.useCommonColor(props, emit);
-    const { inputId: buttonId, isLabeledByFormItem } = useFormItem.useFormItemInputId(props, {
-      formItemContext: formItem
-    });
-    const popper = vue.ref();
-    const triggerRef = vue.ref();
-    const pickerPanelRef = vue.ref();
-    const showPicker = vue.ref(false);
-    const showPanelColor = vue.ref(false);
-    let shouldActiveChange = true;
-    const { isFocused, handleFocus, handleBlur } = index$3.useFocusController(triggerRef, {
-      disabled: colorDisabled,
-      beforeBlur(event) {
-        var _a;
-        return (_a = popper.value) == null ? void 0 : _a.isFocusInsideContent(event);
-      },
-      afterBlur() {
-        var _a;
-        setShowPicker(false);
-        resetColor();
-        if (props.validateEvent) {
-          (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur").catch((err) => error.debugWarn(err));
-        }
-      }
-    });
-    const color$1 = core.reactiveComputed(
-      () => {
-        var _a, _b;
-        return (_b = (_a = pickerPanelRef.value) == null ? void 0 : _a.color) != null ? _b : commonColor.color;
-      }
-    );
-    const panelProps = vue.computed(
-      () => lodashUnified.pick(props, Object.keys(colorPickerPanel.colorPickerPanelProps))
-    );
-    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) {
-      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 = 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;
-      if (showPicker.value) {
-        resetColor();
-      }
-      debounceSetShowPicker(!showPicker.value);
-    }
-    function confirmValue() {
-      const value = isEmptyValue(color$1.value) ? valueOnClear.value : color$1.value;
-      emit(event.UPDATE_MODEL_EVENT, value);
-      emit(event.CHANGE_EVENT, 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, valueOnClear.value);
-      emit(event.CHANGE_EVENT, valueOnClear.value);
-      if (props.modelValue !== valueOnClear.value && props.validateEvent) {
-        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
-      }
-      resetColor();
-      emit("clear");
-    }
-    function handleShowTooltip() {
-      var _a, _b;
-      (_b = (_a = pickerPanelRef == null ? void 0 : pickerPanelRef.value) == null ? void 0 : _a.inputRef) == null ? void 0 : _b.focus();
-    }
-    function handleClickOutside() {
-      if (!showPicker.value)
-        return;
-      hide();
-      isFocused.value && focus();
-    }
-    function handleEsc(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      setShowPicker(false);
-      resetColor();
-    }
-    function handleKeyDown(event) {
-      const code = event$1.getEventCode(event);
-      switch (code) {
-        case aria.EVENT_CODE.enter:
-        case aria.EVENT_CODE.numpadEnter:
-        case aria.EVENT_CODE.space:
-          event.preventDefault();
-          event.stopPropagation();
-          show();
-          break;
-        case aria.EVENT_CODE.esc:
-          handleEsc(event);
-          break;
-      }
-    }
-    function focus() {
-      triggerRef.value.focus();
-    }
-    function blur() {
-      triggerRef.value.blur();
-    }
-    vue.watch(
-      () => currentColor.value,
-      (val) => {
-        shouldActiveChange && emit("activeChange", val);
-        shouldActiveChange = true;
-      }
-    );
-    vue.watch(
-      () => color$1.value,
-      () => {
-        if (!props.modelValue && !showPanelColor.value) {
-          showPanelColor.value = true;
-        }
-      }
-    );
-    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(
-      () => showPicker.value,
-      () => {
-        pickerPanelRef.value && vue.nextTick(pickerPanelRef.value.update);
-      }
-    );
-    vue.provide(colorPickerPanel.ROOT_COMMON_COLOR_INJECTION_KEY, commonColor);
-    __expose({
-      color: color$1,
-      show,
-      hide,
-      focus,
-      blur
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(index$4.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"), _ctx.popperClass],
-        "popper-style": _ctx.popperStyle,
-        "stop-popper-mouse-event": false,
-        pure: "",
-        loop: "",
-        role: "dialog",
-        effect: "light",
-        trigger: "click",
-        teleported: _ctx.teleported,
-        transition: `${vue.unref(ns).namespace.value}-zoom-in-top`,
-        persistent: _ctx.persistent,
-        "append-to": _ctx.appendTo,
-        onShow: handleShowTooltip,
-        onHide: _cache[2] || (_cache[2] = ($event) => setShowPicker(false))
-      }, {
-        content: vue.withCtx(() => [
-          vue.withDirectives((vue.openBlock(), vue.createBlock(
-            vue.unref(index$5.ElColorPickerPanel),
-            vue.mergeProps({
-              ref_key: "pickerPanelRef",
-              ref: pickerPanelRef
-            }, panelProps.value, {
-              border: false,
-              "validate-event": false,
-              onKeydown: vue.withKeys(handleEsc, ["esc"])
-            }),
-            {
-              footer: vue.withCtx(() => [
-                vue.createElementVNode("div", null, [
-                  _ctx.clearable ? (vue.openBlock(), vue.createBlock(vue.unref(index$6.ElButton), {
-                    key: 0,
-                    class: vue.normalizeClass(vue.unref(ns).be("footer", "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.createCommentVNode("v-if", true),
-                  vue.createVNode(vue.unref(index$6.ElButton), {
-                    plain: "",
-                    size: "small",
-                    class: vue.normalizeClass(vue.unref(ns).be("footer", "btn")),
-                    onClick: confirmValue
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createTextVNode(
-                        vue.toDisplayString(vue.unref(t)("el.colorpicker.confirm")),
-                        1
-                      )
-                    ]),
-                    _: 1
-                  }, 8, ["class"])
-                ])
-              ]),
-              _: 1
-            },
-            16
-          )), [
-            [vue.unref(index$7["default"]), handleClickOutside, triggerRef.value]
-          ])
-        ]),
-        default: vue.withCtx(() => [
-          vue.createElementVNode("div", vue.mergeProps({
-            id: vue.unref(buttonId),
-            ref_key: "triggerRef",
-            ref: triggerRef
-          }, _ctx.$attrs, {
-            class: btnKls.value,
-            role: "button",
-            "aria-label": buttonAriaLabel.value,
-            "aria-labelledby": buttonAriaLabelledby.value,
-            "aria-description": vue.unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
-            "aria-disabled": vue.unref(colorDisabled),
-            tabindex: vue.unref(colorDisabled) ? void 0 : _ctx.tabindex,
-            onKeydown: handleKeyDown,
-            onFocus: _cache[0] || (_cache[0] = (...args) => vue.unref(handleFocus) && vue.unref(handleFocus)(...args)),
-            onBlur: _cache[1] || (_cache[1] = (...args) => vue.unref(handleBlur) && vue.unref(handleBlur)(...args))
-          }), [
-            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: displayedColor.value
-                        })
-                      },
-                      [
-                        vue.withDirectives(vue.createVNode(vue.unref(index$8.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$8.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, _hoisted_1)
-        ]),
-        _: 1
-      }, 8, ["visible", "popper-class", "popper-style", "teleported", "transition", "persistent", "append-to"]);
-    };
-  }
+  modelValue: {
+    type: runtime.definePropType(String),
+    default: void 0
+  },
+  id: String,
+  showAlpha: Boolean,
+  colorFormat: String,
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  size: index.useSizeProp,
+  popperClass: content.useTooltipContentProps.popperClass,
+  popperStyle: content.useTooltipContentProps.popperStyle,
+  tabindex: {
+    type: [String, Number],
+    default: 0
+  },
+  teleported: content.useTooltipContentProps.teleported,
+  appendTo: content.useTooltipContentProps.appendTo,
+  predefine: {
+    type: runtime.definePropType(Array)
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  ...index$1.useEmptyValuesProps,
+  ...index$2.useAriaProps(["ariaLabel"])
 });
-var ColorPicker = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/color-picker.vue"]]);
+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,
+  clear: () => true
+};
 
-exports["default"] = ColorPicker;
+exports.colorPickerEmits = colorPickerEmits;
+exports.colorPickerProps = colorPickerProps;
 //# sourceMappingURL=color-picker.js.map