@element-plus/nightly 0.0.20250427 → 0.0.20250429

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

@@ -1 +1 @@
-{"version":3,"file":"collapse-item2.mjs","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":[],"mappings":";;;;;;;mCA8Cc,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,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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'\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;;;;"}

package/es/components/collapse/src/collapse.d.ts

@@ -5,7 +5,7 @@ export type CollapseModelValue = Arrayable<CollapseActiveName>;
 export declare const emitChangeFn: (value: CollapseModelValue) => value is string | number | CollapseActiveName[];
 export declare const collapseProps: {
     readonly accordion: BooleanConstructor;
-    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | CollapseActiveName[]) | (() => CollapseModelValue) | ((new (...args: any[]) => string | number | CollapseActiveName[]) | (() => CollapseModelValue))[], unknown, unknown, () => [], boolean>;
+    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | CollapseActiveName[]) | (() => CollapseModelValue) | ((new (...args: any[]) => string | number | CollapseActiveName[]) | (() => CollapseModelValue))[], unknown, unknown, () => undefined, boolean>;
 };
 export type CollapseProps = ExtractPropTypes<typeof collapseProps>;
 export declare const collapseEmits: {

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

@@ -1,5 +1,4 @@
 import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { mutable } from '../../../utils/typescript.mjs';
 import { isNumber } from '../../../utils/types.mjs';
 import { isString, isArray } from '@vue/shared';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
@@ -9,7 +8,7 @@ const collapseProps = buildProps({
   accordion: Boolean,
   modelValue: {
     type: definePropType([Array, String, Number]),
-    default: () => mutable([])
+    default: () => void 0
   }
 });
 const collapseEmits = {

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'\nimport type { ExtractPropTypes } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\n\nexport type CollapseActiveName = string | number\nexport type CollapseModelValue = Arrayable<CollapseActiveName>\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} 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,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} from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport type { ExtractPropTypes } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\n\nexport type CollapseActiveName = string | number\nexport type CollapseModelValue = Arrayable<CollapseActiveName>\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: () => undefined,\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":";;;;;AAQY,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,KAAK,CAAC;AACzB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,aAAa,GAAG;AAC7B,EAAE,CAAC,kBAAkB,GAAG,YAAY;AACpC,EAAE,CAAC,YAAY,GAAG,YAAY;AAC9B;;;;"}

package/es/components/collapse/src/collapse.vue.d.ts

@@ -3,10 +3,10 @@ declare function __VLS_template(): {
 };
 declare const __VLS_component: import("vue").DefineComponent<{
     readonly accordion: BooleanConstructor;
-    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | import("./collapse").CollapseActiveName[]) | (() => import("./collapse").CollapseModelValue) | ((new (...args: any[]) => string | number | import("./collapse").CollapseActiveName[]) | (() => import("./collapse").CollapseModelValue))[], unknown, unknown, () => [], boolean>;
+    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | import("./collapse").CollapseActiveName[]) | (() => import("./collapse").CollapseModelValue) | ((new (...args: any[]) => string | number | import("./collapse").CollapseActiveName[]) | (() => import("./collapse").CollapseModelValue))[], unknown, unknown, () => undefined, boolean>;
 }, {
     /** @description active names */
-    activeNames: import("vue").Ref<(string | number)[]>;
+    activeNames: import("vue").ComputedRef<(string | number)[]>;
     /** @description set active names */
     setActiveNames: (_activeNames: import("./collapse").CollapseActiveName[]) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -14,7 +14,7 @@ declare const __VLS_component: import("vue").DefineComponent<{
     change: (value: import("./collapse").CollapseModelValue) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly accordion: BooleanConstructor;
-    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | import("./collapse").CollapseActiveName[]) | (() => import("./collapse").CollapseModelValue) | ((new (...args: any[]) => string | number | import("./collapse").CollapseActiveName[]) | (() => import("./collapse").CollapseModelValue))[], unknown, unknown, () => [], boolean>;
+    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string | number | import("./collapse").CollapseActiveName[]) | (() => import("./collapse").CollapseModelValue) | ((new (...args: any[]) => string | number | import("./collapse").CollapseActiveName[]) | (() => import("./collapse").CollapseModelValue))[], unknown, unknown, () => undefined, boolean>;
 }>> & {
     "onUpdate:modelValue"?: ((value: import("./collapse").CollapseModelValue) => any) | undefined;
     onChange?: ((value: import("./collapse").CollapseModelValue) => any) | undefined;

package/es/components/collapse/src/use-collapse.d.ts

@@ -1,7 +1,7 @@
 import type { SetupContext } from 'vue';
 import type { CollapseActiveName, CollapseEmits, CollapseProps } from './collapse';
 export declare const useCollapse: (props: CollapseProps, emit: SetupContext<CollapseEmits>["emit"]) => {
-    activeNames: import("vue").Ref<(string | number)[]>;
+    activeNames: import("vue").ComputedRef<(string | number)[]>;
     setActiveNames: (_activeNames: CollapseActiveName[]) => void;
 };
 export declare const useCollapseDOM: () => {

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

@@ -1,11 +1,16 @@
-import { ref, watch, provide, computed } from 'vue';
+import { ref, computed, provide } from 'vue';
 import { collapseContextKey } from './constants.mjs';
 import { castArray } from 'lodash-unified';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const useCollapse = (props, emit) => {
-  const activeNames = ref(castArray(props.modelValue));
+  const activeNames = ref([]);
+  const computedActiveNames = computed(() => {
+    var _a;
+    const activeKeys = (_a = props.modelValue) != null ? _a : activeNames.value;
+    return castArray(activeKeys);
+  });
   const setActiveNames = (_activeNames) => {
     activeNames.value = _activeNames;
     const value = props.accordion ? activeNames.value[0] : activeNames.value;
@@ -14,9 +19,9 @@ const useCollapse = (props, emit) => {
   };
   const handleItemClick = (name) => {
     if (props.accordion) {
-      setActiveNames([activeNames.value[0] === name ? "" : name]);
+      setActiveNames([computedActiveNames.value[0] === name ? "" : name]);
     } else {
-      const _activeNames = [...activeNames.value];
+      const _activeNames = [...computedActiveNames.value];
       const index = _activeNames.indexOf(name);
       if (index > -1) {
         _activeNames.splice(index, 1);
@@ -26,13 +31,12 @@ const useCollapse = (props, emit) => {
       setActiveNames(_activeNames);
     }
   };
-  watch(() => props.modelValue, () => activeNames.value = castArray(props.modelValue), { deep: true });
   provide(collapseContextKey, {
-    activeNames,
+    activeNames: computedActiveNames,
     handleItemClick
   });
   return {
-    activeNames,
+    activeNames: computedActiveNames,
     setActiveNames
   };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"use-collapse.mjs","sources":["../../../../../../packages/components/collapse/src/use-collapse.ts"],"sourcesContent":["import { computed, provide, ref, watch } from 'vue'\nimport { ensureArray } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { collapseContextKey } from './constants'\n\nimport type { SetupContext } from 'vue'\nimport type {\n  CollapseActiveName,\n  CollapseEmits,\n  CollapseProps,\n} from './collapse'\n\nexport const useCollapse = (\n  props: CollapseProps,\n  emit: SetupContext<CollapseEmits>['emit']\n) => {\n  const activeNames = ref(ensureArray(props.modelValue))\n\n  const setActiveNames = (_activeNames: CollapseActiveName[]) => {\n    activeNames.value = _activeNames\n    const value = props.accordion ? activeNames.value[0] : activeNames.value\n    emit(UPDATE_MODEL_EVENT, value)\n    emit(CHANGE_EVENT, value)\n  }\n\n  const handleItemClick = (name: CollapseActiveName) => {\n    if (props.accordion) {\n      setActiveNames([activeNames.value[0] === name ? '' : name])\n    } else {\n      const _activeNames = [...activeNames.value]\n      const index = _activeNames.indexOf(name)\n\n      if (index > -1) {\n        _activeNames.splice(index, 1)\n      } else {\n        _activeNames.push(name)\n      }\n      setActiveNames(_activeNames)\n    }\n  }\n\n  watch(\n    () => props.modelValue,\n    () => (activeNames.value = ensureArray(props.modelValue)),\n    { deep: true }\n  )\n\n  provide(collapseContextKey, {\n    activeNames,\n    handleItemClick,\n  })\n  return {\n    activeNames,\n    setActiveNames,\n  }\n}\n\nexport const useCollapseDOM = () => {\n  const ns = useNamespace('collapse')\n\n  const rootKls = computed(() => ns.b())\n  return {\n    rootKls,\n  }\n}\n"],"names":["ensureArray"],"mappings":";;;;;;AAKY,MAAC,WAAW,GAAG,CAAC,KAAK,EAAE,IAAI,KAAK;AAC5C,EAAE,MAAM,WAAW,GAAG,GAAG,CAACA,SAAW,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AACzD,EAAE,MAAM,cAAc,GAAG,CAAC,YAAY,KAAK;AAC3C,IAAI,WAAW,CAAC,KAAK,GAAG,YAAY,CAAC;AACrC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC;AAC7E,IAAI,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;AACpC,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;AAC9B,GAAG,CAAC;AACJ,EAAE,MAAM,eAAe,GAAG,CAAC,IAAI,KAAK;AACpC,IAAI,IAAI,KAAK,CAAC,SAAS,EAAE;AACzB,MAAM,cAAc,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;AAClE,KAAK,MAAM;AACX,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAClD,MAAM,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/C,MAAM,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;AACtB,QAAQ,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AACtC,OAAO,MAAM;AACb,QAAQ,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,OAAO;AACP,MAAM,cAAc,CAAC,YAAY,CAAC,CAAC;AACnC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,UAAU,EAAE,MAAM,WAAW,CAAC,KAAK,GAAGA,SAAW,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;AACzG,EAAE,OAAO,CAAC,kBAAkB,EAAE;AAC9B,IAAI,WAAW;AACf,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,GAAG,CAAC;AACJ,EAAE;AACU,MAAC,cAAc,GAAG,MAAM;AACpC,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;AACtC,EAAE,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,EAAE,OAAO;AACT,IAAI,OAAO;AACX,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"use-collapse.mjs","sources":["../../../../../../packages/components/collapse/src/use-collapse.ts"],"sourcesContent":["import { computed, provide, ref } from 'vue'\nimport { ensureArray } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { collapseContextKey } from './constants'\n\nimport type { SetupContext } from 'vue'\nimport type {\n  CollapseActiveName,\n  CollapseEmits,\n  CollapseProps,\n} from './collapse'\n\nexport const useCollapse = (\n  props: CollapseProps,\n  emit: SetupContext<CollapseEmits>['emit']\n) => {\n  const activeNames = ref<CollapseActiveName[]>([])\n\n  const computedActiveNames = computed(() => {\n    const activeKeys = props.modelValue ?? activeNames.value\n    return ensureArray(activeKeys)\n  })\n\n  const setActiveNames = (_activeNames: CollapseActiveName[]) => {\n    activeNames.value = _activeNames\n    const value = props.accordion ? activeNames.value[0] : activeNames.value\n    emit(UPDATE_MODEL_EVENT, value)\n    emit(CHANGE_EVENT, value)\n  }\n\n  const handleItemClick = (name: CollapseActiveName) => {\n    if (props.accordion) {\n      setActiveNames([computedActiveNames.value[0] === name ? '' : name])\n    } else {\n      const _activeNames = [...computedActiveNames.value]\n      const index = _activeNames.indexOf(name)\n\n      if (index > -1) {\n        _activeNames.splice(index, 1)\n      } else {\n        _activeNames.push(name)\n      }\n      setActiveNames(_activeNames)\n    }\n  }\n\n  provide(collapseContextKey, {\n    activeNames: computedActiveNames,\n    handleItemClick,\n  })\n  return {\n    activeNames: computedActiveNames,\n    setActiveNames,\n  }\n}\n\nexport const useCollapseDOM = () => {\n  const ns = useNamespace('collapse')\n\n  const rootKls = computed(() => ns.b())\n  return {\n    rootKls,\n  }\n}\n"],"names":["ensureArray"],"mappings":";;;;;;AAKY,MAAC,WAAW,GAAG,CAAC,KAAK,EAAE,IAAI,KAAK;AAC5C,EAAE,MAAM,WAAW,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;AAC9B,EAAE,MAAM,mBAAmB,GAAG,QAAQ,CAAC,MAAM;AAC7C,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,MAAM,UAAU,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,UAAU,KAAK,IAAI,GAAG,EAAE,GAAG,WAAW,CAAC,KAAK,CAAC;AAChF,IAAI,OAAOA,SAAW,CAAC,UAAU,CAAC,CAAC;AACnC,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,cAAc,GAAG,CAAC,YAAY,KAAK;AAC3C,IAAI,WAAW,CAAC,KAAK,GAAG,YAAY,CAAC;AACrC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC;AAC7E,IAAI,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;AACpC,IAAI,IAAI,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;AAC9B,GAAG,CAAC;AACJ,EAAE,MAAM,eAAe,GAAG,CAAC,IAAI,KAAK;AACpC,IAAI,IAAI,KAAK,CAAC,SAAS,EAAE;AACzB,MAAM,cAAc,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;AAC1E,KAAK,MAAM;AACX,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;AAC1D,MAAM,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC/C,MAAM,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;AACtB,QAAQ,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;AACtC,OAAO,MAAM;AACb,QAAQ,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,OAAO;AACP,MAAM,cAAc,CAAC,YAAY,CAAC,CAAC;AACnC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO,CAAC,kBAAkB,EAAE;AAC9B,IAAI,WAAW,EAAE,mBAAmB;AACpC,IAAI,eAAe;AACnB,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,WAAW,EAAE,mBAAmB;AACpC,IAAI,cAAc;AAClB,GAAG,CAAC;AACJ,EAAE;AACU,MAAC,cAAc,GAAG,MAAM;AACpC,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;AACtC,EAAE,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,EAAE,OAAO;AACT,IAAI,OAAO;AACX,GAAG,CAAC;AACJ;;;;"}

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

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

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

@@ -1,44 +1,406 @@
-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 { useAriaProps } from '../../../hooks/use-aria/index.mjs';
+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 { useFocusController } from '../../../hooks/use-focus-controller/index.mjs';
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../../../constants/event.mjs';
-import { isString } from '@vue/shared';
+import { debugWarn } from '../../../utils/error.mjs';
+import { EVENT_CODE } from '../../../constants/aria.mjs';
 
-const colorPickerProps = buildProps({
-  modelValue: String,
-  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
-  },
-  ...useAriaProps(["ariaLabel"])
+const __default__ = defineComponent({
+  name: "ElColorPicker"
 });
-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");
+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 { 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, {
+      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 = 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) {
+      if (!(color2 instanceof Color)) {
+        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 = 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 handleConfirm() {
+      color.fromString(customInput.value);
+    }
+    function confirmValue() {
+      const 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, null);
+      emit(CHANGE_EVENT, null);
+      if (props.modelValue !== null && 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",
+                  onKeyup: withKeys(handleConfirm, ["enter"]),
+                  onBlur: handleConfirm
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "onKeyup"])
+              ], 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)
+          }), [
+            unref(colorDisabled) ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(unref(ns).be("picker", "mask"))
+            }, null, 2)) : createCommentVNode("v-if", true),
+            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"]]);
 
-export { colorPickerContextKey, colorPickerEmits, colorPickerProps };
+export { ColorPicker as default };
 //# sourceMappingURL=color-picker.mjs.map