@element-plus/nightly 0.0.20251228 → 0.0.20251229

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

@@ -1,22 +1,123 @@
-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: ""
+const _hoisted_1 = ["id", "aria-expanded", "aria-controls", "aria-describedby", "tabindex", "aria-disabled"];
+const _hoisted_2 = ["id", "aria-hidden", "aria-labelledby"];
+const _sfc_main = defineComponent({
+  ...{
+    name: "ElCollapseItem"
   },
-  name: {
-    type: definePropType([String, Number]),
-    default: void 0
-  },
-  icon: {
-    type: iconPropType,
-    default: ArrowRight
-  },
-  disabled: Boolean
+  __name: "collapse-item",
+  props: collapseItemProps,
+  setup(__props, { expose: __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 ? void 0 : 0,
+            "aria-disabled": _ctx.disabled,
+            role: "button",
+            onClick: _cache[0] || (_cache[0] = (...args) => unref(handleHeaderClick) && unref(handleHeaderClick)(...args)),
+            onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(
+              (...args) => unref(handleEnterClick) && unref(handleEnterClick)(...args),
+              ["stop"]
+            ), ["space", "enter"])),
+            onFocus: _cache[2] || (_cache[2] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
+            onBlur: _cache[3] || (_cache[3] = ($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, _hoisted_1),
+          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, _hoisted_2), [
+                [vShow, unref(isActive)]
+              ])
+            ]),
+            _: 3
+          })
+        ],
+        2
+      );
+    };
+  }
 });
+var CollapseItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/collapse/src/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, 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":[],"mappings":";;;;AAMO,MAAM,oBAAoB,UAAW,CAAA;AAAA,EAI1C,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA,EAIA,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,cAAA,CAAmC,CAAC,MAAA,EAAQ,MAAM,CAAC,CAAA;AAAA,IACzD,OAAS,EAAA,KAAA,CAAA;AAAA,GACX;AAAA,EAIA,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,YAAA;AAAA,IACN,OAAS,EAAA,UAAA;AAAA,GACX;AAAA,EAIA,QAAU,EAAA,OAAA;AACZ,CAAU;;;;"}
+{"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 ? 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":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","disabled","_withKeys","_withModifiers","_renderSlot","_createTextVNode","title","_createVNode","_createBlock","_resolveDynamicComponent","icon","_withCtx","_withDirectives"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
-import ColorPicker from './src/color-picker.mjs';
-export { colorPickerEmits, colorPickerProps } from './src/color-picker2.mjs';
+import ColorPicker from './src/color-picker2.mjs';
+export { 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.mjs

@@ -1,397 +1,59 @@
-import { defineComponent, ref, computed, watch, nextTick, provide, openBlock, createBlock, unref, withCtx, withDirectives, mergeProps, withKeys, createElementVNode, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, createVNode, normalizeStyle, vShow } from 'vue';
-import { pick, debounce } from 'lodash-unified';
-import { ElIcon } from '../../icon/index.mjs';
-import { reactiveComputed } from '@vueuse/core';
-import { ElTooltip } from '../../tooltip/index.mjs';
-import { ElButton } from '../../button/index.mjs';
-import { ArrowDown, Close } from '@element-plus/icons-vue';
-import { colorPickerProps, colorPickerEmits } from './color-picker2.mjs';
-import { ElColorPickerPanel } from '../../color-picker-panel/index.mjs';
-import Color from '../../color-picker-panel/src/utils/color.mjs';
-import { useCommonColor } from '../../color-picker-panel/src/composables/use-common-color.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { colorPickerPanelProps, ROOT_COMMON_COLOR_INJECTION_KEY } from '../../color-picker-panel/src/color-picker-panel.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 { debugWarn } from '../../../utils/error.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 { getEventCode } from '../../../utils/dom/event.mjs';
-import { EVENT_CODE } from '../../../constants/aria.mjs';
+import { isString } from '@vue/shared';
 
-const _hoisted_1 = ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex"];
-const _sfc_main = defineComponent({
-  ...{
-    name: "ElColorPicker"
+const colorPickerProps = buildProps({
+  persistent: {
+    type: Boolean,
+    default: true
   },
-  __name: "color-picker",
-  props: colorPickerProps,
-  emits: colorPickerEmits,
-  setup(__props, { expose: __expose, emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const { t } = useLocale();
-    const ns = useNamespace("color");
-    const { formItem } = useFormItem();
-    const colorSize = useFormSize();
-    const colorDisabled = useFormDisabled();
-    const { valueOnClear, isEmptyValue } = useEmptyValues(props, null);
-    const commonColor = useCommonColor(props, emit);
-    const { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {
-      formItemContext: formItem
-    });
-    const popper = ref();
-    const triggerRef = ref();
-    const pickerPanelRef = ref();
-    const showPicker = ref(false);
-    const showPanelColor = ref(false);
-    let shouldActiveChange = true;
-    const { isFocused, handleFocus, handleBlur } = 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) => debugWarn(err));
-        }
-      }
-    });
-    const color = reactiveComputed(
-      () => {
-        var _a, _b;
-        return (_b = (_a = pickerPanelRef.value) == null ? void 0 : _a.color) != null ? _b : commonColor.color;
-      }
-    );
-    const panelProps = computed(
-      () => pick(props, Object.keys(colorPickerPanelProps))
-    );
-    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 = "";
-          nextTick(() => {
-            showPanelColor.value = false;
-          });
-        }
-      });
-    }
-    function handleTrigger() {
-      if (colorDisabled.value)
-        return;
-      if (showPicker.value) {
-        resetColor();
-      }
-      debounceSetShowPicker(!showPicker.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();
-      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 = getEventCode(event);
-      switch (code) {
-        case EVENT_CODE.enter:
-        case EVENT_CODE.numpadEnter:
-        case EVENT_CODE.space:
-          event.preventDefault();
-          event.stopPropagation();
-          show();
-          break;
-        case EVENT_CODE.esc:
-          handleEsc(event);
-          break;
-      }
-    }
-    function focus() {
-      triggerRef.value.focus();
-    }
-    function blur() {
-      triggerRef.value.blur();
-    }
-    watch(
-      () => currentColor.value,
-      (val) => {
-        shouldActiveChange && emit("activeChange", val);
-        shouldActiveChange = true;
-      }
-    );
-    watch(
-      () => color.value,
-      () => {
-        if (!props.modelValue && !showPanelColor.value) {
-          showPanelColor.value = true;
-        }
-      }
-    );
-    watch(
-      () => props.modelValue,
-      (newVal) => {
-        if (!newVal) {
-          showPanelColor.value = false;
-        } else if (newVal && newVal !== color.value) {
-          shouldActiveChange = false;
-          color.fromString(newVal);
-        }
-      }
-    );
-    watch(
-      () => showPicker.value,
-      () => {
-        pickerPanelRef.value && nextTick(pickerPanelRef.value.update);
-      }
-    );
-    provide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor);
-    __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"), _ctx.popperClass],
-        "popper-style": _ctx.popperStyle,
-        "stop-popper-mouse-event": false,
-        pure: "",
-        loop: "",
-        role: "dialog",
-        effect: "light",
-        trigger: "click",
-        teleported: _ctx.teleported,
-        transition: `${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: withCtx(() => [
-          withDirectives((openBlock(), createBlock(
-            unref(ElColorPickerPanel),
-            mergeProps({
-              ref_key: "pickerPanelRef",
-              ref: pickerPanelRef
-            }, panelProps.value, {
-              border: false,
-              "validate-event": false,
-              onKeydown: withKeys(handleEsc, ["esc"])
-            }),
-            {
-              footer: withCtx(() => [
-                createElementVNode("div", null, [
-                  _ctx.clearable ? (openBlock(), createBlock(unref(ElButton), {
-                    key: 0,
-                    class: normalizeClass(unref(ns).be("footer", "link-btn")),
-                    text: "",
-                    size: "small",
-                    onClick: clear
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(
-                        toDisplayString(unref(t)("el.colorpicker.clear")),
-                        1
-                      )
-                    ]),
-                    _: 1
-                  }, 8, ["class"])) : createCommentVNode("v-if", true),
-                  createVNode(unref(ElButton), {
-                    plain: "",
-                    size: "small",
-                    class: normalizeClass(unref(ns).be("footer", "btn")),
-                    onClick: confirmValue
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(
-                        toDisplayString(unref(t)("el.colorpicker.confirm")),
-                        1
-                      )
-                    ]),
-                    _: 1
-                  }, 8, ["class"])
-                ])
-              ]),
-              _: 1
-            },
-            16
-          )), [
-            [unref(ClickOutside), handleClickOutside, triggerRef.value]
-          ])
-        ]),
-        default: withCtx(() => [
-          createElementVNode("div", mergeProps({
-            id: unref(buttonId),
-            ref_key: "triggerRef",
-            ref: triggerRef
-          }, _ctx.$attrs, {
-            class: btnKls.value,
-            role: "button",
-            "aria-label": buttonAriaLabel.value,
-            "aria-labelledby": buttonAriaLabelledby.value,
-            "aria-description": unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
-            "aria-disabled": unref(colorDisabled),
-            tabindex: unref(colorDisabled) ? void 0 : _ctx.tabindex,
-            onKeydown: handleKeyDown,
-            onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args)),
-            onBlur: _cache[1] || (_cache[1] = (...args) => unref(handleBlur) && unref(handleBlur)(...args))
-          }), [
-            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: displayedColor.value
-                        })
-                      },
-                      [
-                        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, _hoisted_1)
-        ]),
-        _: 1
-      }, 8, ["visible", "popper-class", "popper-style", "teleported", "transition", "persistent", "append-to"]);
-    };
-  }
+  modelValue: {
+    type: definePropType(String),
+    default: void 0
+  },
+  id: String,
+  showAlpha: Boolean,
+  colorFormat: String,
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  size: useSizeProp,
+  popperClass: useTooltipContentProps.popperClass,
+  popperStyle: useTooltipContentProps.popperStyle,
+  tabindex: {
+    type: [String, Number],
+    default: 0
+  },
+  teleported: useTooltipContentProps.teleported,
+  appendTo: useTooltipContentProps.appendTo,
+  predefine: {
+    type: definePropType(Array)
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  ...useEmptyValuesProps,
+  ...useAriaProps(["ariaLabel"])
 });
-var ColorPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/color-picker/src/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,
+  clear: () => true
+};
 
-export { ColorPicker as default };
+export { colorPickerEmits, colorPickerProps };
 //# sourceMappingURL=color-picker.mjs.map