@element-plus/nightly 0.0.20260412 → 0.0.20260413

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

@@ -1,4 +1,5 @@
 import { ColProps, ColSize } from "./col.js";
+import "../../../index.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/col/src/col.vue.d.ts
@@ -7,10 +8,10 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: vue.DefineComponent<ColProps, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ColProps> & Readonly<{}>, {
-  offset: number;
   push: number;
-  tag: string;
+  offset: number;
   span: number;
+  tag: string;
   pull: number;
   xs: ColSize;
   sm: ColSize;

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

@@ -19,8 +19,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: vue.DefineComponent<CollapseItemProps, {
   /** @description current collapse-item whether active */isActive: vue.ComputedRef<boolean | undefined>;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<CollapseItemProps> & Readonly<{}>, {
-  title: string;
   icon: IconPropType;
+  title: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -33,7 +33,7 @@ interface CollapseProps {
 declare const collapseProps: {
   readonly accordion: BooleanConstructor;
   readonly modelValue: EpPropFinalized<(new (...args: any[]) => string | number | CollapseActiveName[]) | (() => CollapseModelValue) | (((new (...args: any[]) => string | number | CollapseActiveName[]) | (() => CollapseModelValue)) | null)[], unknown, unknown, () => [], boolean>;
-  readonly expandIconPosition: EpPropFinalized<(new (...args: any[]) => "left" | "right") | (() => CollapseIconPositionType) | (((new (...args: any[]) => "left" | "right") | (() => CollapseIconPositionType)) | null)[], unknown, unknown, "right", boolean>;
+  readonly expandIconPosition: EpPropFinalized<(new (...args: any[]) => "right" | "left") | (() => CollapseIconPositionType) | (((new (...args: any[]) => "right" | "left") | (() => CollapseIconPositionType)) | null)[], unknown, unknown, "right", boolean>;
   readonly beforeCollapse: {
     readonly type: vue.PropType<(name: CollapseActiveName) => Awaitable<boolean>>;
     readonly required: false;

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

@@ -1,4 +1,5 @@
 import { CollapseActiveName, CollapseIconPositionType, CollapseModelValue, CollapseProps } from "./collapse.js";
+import "../../../index.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/collapse/src/collapse.vue.d.ts
@@ -10,11 +11,11 @@ declare const __VLS_base: vue.DefineComponent<CollapseProps, {
   /** @description active names */activeNames: vue.Ref<(string | number)[], (string | number)[]>; /** @description set active names */
   setActiveNames: (_activeNames: CollapseActiveName[]) => void;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  change: (value: CollapseModelValue) => void;
   "update:modelValue": (value: CollapseModelValue) => void;
+  change: (value: CollapseModelValue) => void;
 }, string, vue.PublicProps, Readonly<CollapseProps> & Readonly<{
-  onChange?: ((value: CollapseModelValue) => any) | undefined;
   "onUpdate:modelValue"?: ((value: CollapseModelValue) => any) | undefined;
+  onChange?: ((value: CollapseModelValue) => any) | undefined;
 }>, {
   modelValue: CollapseModelValue;
   expandIconPosition: CollapseIconPositionType;

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

@@ -94,7 +94,7 @@ declare const colorPickerProps: {
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
   readonly clearable: EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -124,7 +124,7 @@ declare const colorPickerProps: {
       [x: string]: boolean;
     } | (string | {
       [x: string]: boolean;
-    } | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
+    } | /*elided*/any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
       [x: string]: boolean;
     } | (string | {
       [x: string]: boolean;
@@ -148,7 +148,7 @@ declare const colorPickerProps: {
       [x: string]: boolean;
     } | (string | {
       [x: string]: boolean;
-    } | any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
+    } | /*elided*/any)[])[])[])[])[])[])[])[])[])[])[]) | (((new (...args: any[]) => string | {
       [x: string]: boolean;
     } | (string | {
       [x: string]: boolean;
@@ -172,7 +172,7 @@ declare const colorPickerProps: {
       [x: string]: boolean;
     } | (string | {
       [x: string]: boolean;
-    } | any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
+    } | /*elided*/any)[])[])[])[])[])[])[])[])[])[])[]) | (() => string | {
       [x: string]: boolean;
     } | (string | {
       [x: string]: boolean;
@@ -196,7 +196,7 @@ declare const colorPickerProps: {
       [x: string]: boolean;
     } | (string | {
       [x: string]: boolean;
-    } | any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
+    } | /*elided*/any)[])[])[])[])[])[])[])[])[])[])[])) | null)[], unknown, unknown>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

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

@@ -29,29 +29,29 @@ declare const __VLS_export: vue.DefineComponent<ColorPickerProps, {
    */
   blur: typeof blur;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  blur: (evt: FocusEvent) => void;
-  focus: (evt: FocusEvent) => void;
-  change: (val: string | null) => void;
   "update:modelValue": (val: string | null) => void;
+  change: (val: string | null) => void;
+  focus: (evt: FocusEvent) => void;
+  blur: (evt: FocusEvent) => void;
   clear: () => void;
   activeChange: (val: string | null) => void;
 }, string, vue.PublicProps, Readonly<ColorPickerProps> & Readonly<{
-  onBlur?: ((evt: FocusEvent) => any) | undefined;
+  "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
   onChange?: ((val: string | null) => any) | undefined;
   onFocus?: ((evt: FocusEvent) => any) | undefined;
-  "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
+  onBlur?: ((evt: FocusEvent) => any) | undefined;
   onClear?: (() => any) | undefined;
   onActiveChange?: ((val: string | null) => any) | undefined;
 }>, {
-  teleported: boolean;
   disabled: boolean;
-  modelValue: string | null;
   clearable: boolean;
-  tabindex: string | number;
-  validateEvent: boolean;
   popperStyle: string | false | vue.CSSProperties | vue.StyleValue[] | null;
+  teleported: boolean;
+  validateEvent: boolean;
   persistent: boolean;
+  modelValue: string | null;
   valueOnClear: string | number | boolean | Function | null;
+  tabindex: string | number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 //#endregion

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

@@ -1,7 +1,7 @@
 import { EVENT_CODE } from "../../../constants/aria.mjs";
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
 import { getEventCode } from "../../../utils/dom/event.mjs";
-import { debugWarn } from "../../../utils/error.mjs";
+import { NOOP } from "../../../utils/functions.mjs";
 import { useLocale } from "../../../hooks/use-locale/index.mjs";
 import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { useFocusController } from "../../../hooks/use-focus-controller/index.mjs";
@@ -61,7 +61,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			afterBlur() {
 				setShowPicker(false);
 				resetColor();
-				if (props.validateEvent) formItem?.validate?.("blur").catch((err) => debugWarn(err));
+				if (props.validateEvent) formItem?.validate?.("blur").catch(NOOP);
 			}
 		});
 		const color = reactiveComputed(() => pickerPanelRef.value?.color ?? commonColor.color);
@@ -123,7 +123,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			const value = isEmptyValue(color.value) ? valueOnClear.value : color.value;
 			emit(UPDATE_MODEL_EVENT, value);
 			emit(CHANGE_EVENT, value);
-			if (props.validateEvent) formItem?.validate("change").catch((err) => debugWarn(err));
+			if (props.validateEvent) formItem?.validate("change").catch(NOOP);
 			debounceSetShowPicker(false);
 			nextTick(() => {
 				const newColor = new Color({
@@ -138,7 +138,7 @@ var color_picker_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 			debounceSetShowPicker(false);
 			emit(UPDATE_MODEL_EVENT, valueOnClear.value);
 			emit(CHANGE_EVENT, valueOnClear.value);
-			if (props.modelValue !== valueOnClear.value && props.validateEvent) formItem?.validate("change").catch((err) => debugWarn(err));
+			if (props.modelValue !== valueOnClear.value && props.validateEvent) formItem?.validate("change").catch(NOOP);
 			resetColor();
 			emit("clear");
 		}

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker.vue_vue_type_script_setup_true_lang.mjs","names":["$attrs"],"sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    :visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :stop-popper-mouse-event=\"false\"\n    pure\n    loop\n    role=\"dialog\"\n    effect=\"light\"\n    trigger=\"click\"\n    :teleported=\"teleported\"\n    :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n    :persistent=\"persistent\"\n    :append-to=\"appendTo\"\n    @show=\"handleShowTooltip\"\n    @hide=\"setShowPicker(false)\"\n  >\n    <template #content>\n      <el-color-picker-panel\n        ref=\"pickerPanelRef\"\n        v-bind=\"panelProps\"\n        v-click-outside:[triggerRef]=\"handleClickOutside\"\n        :border=\"false\"\n        :validate-event=\"false\"\n        @keydown.esc=\"handleEsc\"\n      >\n        <template #footer>\n          <div>\n            <el-button\n              v-if=\"clearable\"\n              :class=\"ns.be('footer', 'link-btn')\"\n              text\n              size=\"small\"\n              @click=\"clear\"\n            >\n              {{ t('el.colorpicker.clear') }}\n            </el-button>\n            <el-button\n              plain\n              size=\"small\"\n              :class=\"ns.be('footer', 'btn')\"\n              @click=\"confirmValue\"\n            >\n              {{ t('el.colorpicker.confirm') }}\n            </el-button>\n          </div>\n        </template>\n      </el-color-picker-panel>\n    </template>\n    <template #default>\n      <div\n        :id=\"buttonId\"\n        ref=\"triggerRef\"\n        v-bind=\"$attrs\"\n        :class=\"btnKls\"\n        role=\"button\"\n        :aria-label=\"buttonAriaLabel\"\n        :aria-labelledby=\"buttonAriaLabelledby\"\n        :aria-description=\"\n          t('el.colorpicker.description', { color: modelValue || '' })\n        \"\n        :aria-disabled=\"colorDisabled\"\n        :tabindex=\"colorDisabled ? undefined : tabindex\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      >\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-show=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, ref, watch } from 'vue'\nimport { debounce, pick } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { reactiveComputed } from '@vueuse/core'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElButton } from '@element-plus/components/button'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { debugWarn, getEventCode } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\nimport { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'\nimport {\n  ElColorPickerPanel,\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelProps,\n} from '@element-plus/components/color-picker-panel'\nimport Color from '@element-plus/components/color-picker-panel/src/utils/color'\nimport { useCommonColor } from '@element-plus/components/color-picker-panel/src/composables/use-common-color'\n\nimport type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { ColorPickerProps } from './color-picker'\n\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = withDefaults(\n  defineProps<ColorPickerProps>(),\n  colorPickerPropsDefaults\n)\n\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\nconst { valueOnClear, isEmptyValue } = useEmptyValues(props, null)\nconst commonColor = useCommonColor(props, emit)\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst pickerPanelRef = ref<ColorPickerPanelInstance>()\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {\n  disabled: colorDisabled,\n  beforeBlur(event) {\n    return popper.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    setShowPicker(false)\n    resetColor()\n    if (props.validateEvent) {\n      formItem?.validate?.('blur').catch((err) => debugWarn(err))\n    }\n  },\n})\n\nconst color = reactiveComputed(\n  () => pickerPanelRef.value?.color ?? commonColor.color\n) as Color\n\nconst panelProps = computed(() =>\n  pick(props, Object.keys(colorPickerPanelProps))\n)\n\nconst displayedColor = computed(() => {\n  if (!props.modelValue && !showPanelColor.value) {\n    return 'transparent'\n  }\n  return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n  return !isLabeledByFormItem.value\n    ? props.ariaLabel || t('el.colorpicker.defaultLabel')\n    : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n  return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n  return [\n    ns.b('picker'),\n    ns.is('disabled', colorDisabled.value),\n    ns.bm('picker', colorSize.value),\n    ns.is('focused', isFocused.value),\n  ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n  const { r, g, b, a } = color.toRgb()\n  return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n  showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\nfunction show() {\n  if (colorDisabled.value) return\n  setShowPicker(true)\n}\n\nfunction hide() {\n  debounceSetShowPicker(false)\n  resetColor()\n}\n\nfunction resetColor() {\n  nextTick(() => {\n    if (props.modelValue) {\n      color.fromString(props.modelValue)\n    } else {\n      color.value = ''\n      nextTick(() => {\n        showPanelColor.value = false\n      })\n    }\n  })\n}\n\nfunction handleTrigger() {\n  if (colorDisabled.value) return\n  if (showPicker.value) {\n    resetColor()\n  }\n  debounceSetShowPicker(!showPicker.value)\n}\n\nfunction confirmValue() {\n  const value = isEmptyValue(color.value) ? valueOnClear.value : color.value\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  if (props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n  debounceSetShowPicker(false)\n  // check if modelValue change, if not change, then reset color.\n  nextTick(() => {\n    const newColor = new Color({\n      enableAlpha: props.showAlpha,\n      format: props.colorFormat || '',\n      value: props.modelValue,\n    })\n    if (!color.compare(newColor)) {\n      resetColor()\n    }\n  })\n}\n\nfunction clear() {\n  debounceSetShowPicker(false)\n  emit(UPDATE_MODEL_EVENT, valueOnClear.value)\n  emit(CHANGE_EVENT, valueOnClear.value)\n  if (props.modelValue !== valueOnClear.value && props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n  resetColor()\n  emit('clear')\n}\n\nfunction handleShowTooltip() {\n  pickerPanelRef?.value?.inputRef?.focus()\n}\n\nfunction handleClickOutside() {\n  if (!showPicker.value) return\n  hide()\n  isFocused.value && focus()\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  setShowPicker(false)\n  resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n    case EVENT_CODE.space:\n      event.preventDefault()\n      event.stopPropagation()\n      show()\n      break\n    case EVENT_CODE.esc:\n      handleEsc(event)\n      break\n  }\n}\n\nfunction focus() {\n  triggerRef.value.focus()\n}\n\nfunction blur() {\n  triggerRef.value.blur()\n}\n\nwatch(\n  () => currentColor.value,\n  (val) => {\n    shouldActiveChange && emit('activeChange', val)\n    shouldActiveChange = true\n  }\n)\n\nwatch(\n  () => color.value,\n  () => {\n    if (!props.modelValue && !showPanelColor.value) {\n      showPanelColor.value = true\n    }\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      showPanelColor.value = false\n    } else if (newVal && newVal !== color.value) {\n      shouldActiveChange = false\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => showPicker.value,\n  () => {\n    pickerPanelRef.value && nextTick(pickerPanelRef.value.update)\n  }\n)\n\nprovide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor)\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description manually show ColorPicker\n   */\n  show,\n  /**\n   * @description manually hide ColorPicker\n   */\n  hide,\n  /**\n   * @description focus the input element\n   */\n  focus,\n  /**\n   * @description blur the input element\n   */\n  blur,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"color-picker.vue_vue_type_script_setup_true_lang.mjs","names":["$attrs"],"sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    :visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :stop-popper-mouse-event=\"false\"\n    pure\n    loop\n    role=\"dialog\"\n    effect=\"light\"\n    trigger=\"click\"\n    :teleported=\"teleported\"\n    :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n    :persistent=\"persistent\"\n    :append-to=\"appendTo\"\n    @show=\"handleShowTooltip\"\n    @hide=\"setShowPicker(false)\"\n  >\n    <template #content>\n      <el-color-picker-panel\n        ref=\"pickerPanelRef\"\n        v-bind=\"panelProps\"\n        v-click-outside:[triggerRef]=\"handleClickOutside\"\n        :border=\"false\"\n        :validate-event=\"false\"\n        @keydown.esc=\"handleEsc\"\n      >\n        <template #footer>\n          <div>\n            <el-button\n              v-if=\"clearable\"\n              :class=\"ns.be('footer', 'link-btn')\"\n              text\n              size=\"small\"\n              @click=\"clear\"\n            >\n              {{ t('el.colorpicker.clear') }}\n            </el-button>\n            <el-button\n              plain\n              size=\"small\"\n              :class=\"ns.be('footer', 'btn')\"\n              @click=\"confirmValue\"\n            >\n              {{ t('el.colorpicker.confirm') }}\n            </el-button>\n          </div>\n        </template>\n      </el-color-picker-panel>\n    </template>\n    <template #default>\n      <div\n        :id=\"buttonId\"\n        ref=\"triggerRef\"\n        v-bind=\"$attrs\"\n        :class=\"btnKls\"\n        role=\"button\"\n        :aria-label=\"buttonAriaLabel\"\n        :aria-labelledby=\"buttonAriaLabelledby\"\n        :aria-description=\"\n          t('el.colorpicker.description', { color: modelValue || '' })\n        \"\n        :aria-disabled=\"colorDisabled\"\n        :tabindex=\"colorDisabled ? undefined : tabindex\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      >\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-show=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, ref, watch } from 'vue'\nimport { debounce, pick } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { reactiveComputed } from '@vueuse/core'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElButton } from '@element-plus/components/button'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { NOOP, getEventCode } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\nimport { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'\nimport {\n  ElColorPickerPanel,\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelProps,\n} from '@element-plus/components/color-picker-panel'\nimport Color from '@element-plus/components/color-picker-panel/src/utils/color'\nimport { useCommonColor } from '@element-plus/components/color-picker-panel/src/composables/use-common-color'\n\nimport type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { ColorPickerProps } from './color-picker'\n\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = withDefaults(\n  defineProps<ColorPickerProps>(),\n  colorPickerPropsDefaults\n)\n\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\nconst { valueOnClear, isEmptyValue } = useEmptyValues(props, null)\nconst commonColor = useCommonColor(props, emit)\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst pickerPanelRef = ref<ColorPickerPanelInstance>()\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {\n  disabled: colorDisabled,\n  beforeBlur(event) {\n    return popper.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    setShowPicker(false)\n    resetColor()\n    if (props.validateEvent) {\n      formItem?.validate?.('blur').catch(NOOP)\n    }\n  },\n})\n\nconst color = reactiveComputed(\n  () => pickerPanelRef.value?.color ?? commonColor.color\n) as Color\n\nconst panelProps = computed(() =>\n  pick(props, Object.keys(colorPickerPanelProps))\n)\n\nconst displayedColor = computed(() => {\n  if (!props.modelValue && !showPanelColor.value) {\n    return 'transparent'\n  }\n  return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n  return !isLabeledByFormItem.value\n    ? props.ariaLabel || t('el.colorpicker.defaultLabel')\n    : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n  return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n  return [\n    ns.b('picker'),\n    ns.is('disabled', colorDisabled.value),\n    ns.bm('picker', colorSize.value),\n    ns.is('focused', isFocused.value),\n  ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n  const { r, g, b, a } = color.toRgb()\n  return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n  showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\nfunction show() {\n  if (colorDisabled.value) return\n  setShowPicker(true)\n}\n\nfunction hide() {\n  debounceSetShowPicker(false)\n  resetColor()\n}\n\nfunction resetColor() {\n  nextTick(() => {\n    if (props.modelValue) {\n      color.fromString(props.modelValue)\n    } else {\n      color.value = ''\n      nextTick(() => {\n        showPanelColor.value = false\n      })\n    }\n  })\n}\n\nfunction handleTrigger() {\n  if (colorDisabled.value) return\n  if (showPicker.value) {\n    resetColor()\n  }\n  debounceSetShowPicker(!showPicker.value)\n}\n\nfunction confirmValue() {\n  const value = isEmptyValue(color.value) ? valueOnClear.value : color.value\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  if (props.validateEvent) {\n    formItem?.validate('change').catch(NOOP)\n  }\n  debounceSetShowPicker(false)\n  // check if modelValue change, if not change, then reset color.\n  nextTick(() => {\n    const newColor = new Color({\n      enableAlpha: props.showAlpha,\n      format: props.colorFormat || '',\n      value: props.modelValue,\n    })\n    if (!color.compare(newColor)) {\n      resetColor()\n    }\n  })\n}\n\nfunction clear() {\n  debounceSetShowPicker(false)\n  emit(UPDATE_MODEL_EVENT, valueOnClear.value)\n  emit(CHANGE_EVENT, valueOnClear.value)\n  if (props.modelValue !== valueOnClear.value && props.validateEvent) {\n    formItem?.validate('change').catch(NOOP)\n  }\n  resetColor()\n  emit('clear')\n}\n\nfunction handleShowTooltip() {\n  pickerPanelRef?.value?.inputRef?.focus()\n}\n\nfunction handleClickOutside() {\n  if (!showPicker.value) return\n  hide()\n  isFocused.value && focus()\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  setShowPicker(false)\n  resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n    case EVENT_CODE.space:\n      event.preventDefault()\n      event.stopPropagation()\n      show()\n      break\n    case EVENT_CODE.esc:\n      handleEsc(event)\n      break\n  }\n}\n\nfunction focus() {\n  triggerRef.value.focus()\n}\n\nfunction blur() {\n  triggerRef.value.blur()\n}\n\nwatch(\n  () => currentColor.value,\n  (val) => {\n    shouldActiveChange && emit('activeChange', val)\n    shouldActiveChange = true\n  }\n)\n\nwatch(\n  () => color.value,\n  () => {\n    if (!props.modelValue && !showPanelColor.value) {\n      showPanelColor.value = true\n    }\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      showPanelColor.value = false\n    } else if (newVal && newVal !== color.value) {\n      shouldActiveChange = false\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => showPicker.value,\n  () => {\n    pickerPanelRef.value && nextTick(pickerPanelRef.value.update)\n  }\n)\n\nprovide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor)\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description manually show ColorPicker\n   */\n  show,\n  /**\n   * @description manually hide ColorPicker\n   */\n  hide,\n  /**\n   * @description focus the input element\n   */\n  focus,\n  /**\n   * @description blur the input element\n   */\n  blur,\n})\n</script>\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker2.mjs","names":[],"sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    :visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :stop-popper-mouse-event=\"false\"\n    pure\n    loop\n    role=\"dialog\"\n    effect=\"light\"\n    trigger=\"click\"\n    :teleported=\"teleported\"\n    :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n    :persistent=\"persistent\"\n    :append-to=\"appendTo\"\n    @show=\"handleShowTooltip\"\n    @hide=\"setShowPicker(false)\"\n  >\n    <template #content>\n      <el-color-picker-panel\n        ref=\"pickerPanelRef\"\n        v-bind=\"panelProps\"\n        v-click-outside:[triggerRef]=\"handleClickOutside\"\n        :border=\"false\"\n        :validate-event=\"false\"\n        @keydown.esc=\"handleEsc\"\n      >\n        <template #footer>\n          <div>\n            <el-button\n              v-if=\"clearable\"\n              :class=\"ns.be('footer', 'link-btn')\"\n              text\n              size=\"small\"\n              @click=\"clear\"\n            >\n              {{ t('el.colorpicker.clear') }}\n            </el-button>\n            <el-button\n              plain\n              size=\"small\"\n              :class=\"ns.be('footer', 'btn')\"\n              @click=\"confirmValue\"\n            >\n              {{ t('el.colorpicker.confirm') }}\n            </el-button>\n          </div>\n        </template>\n      </el-color-picker-panel>\n    </template>\n    <template #default>\n      <div\n        :id=\"buttonId\"\n        ref=\"triggerRef\"\n        v-bind=\"$attrs\"\n        :class=\"btnKls\"\n        role=\"button\"\n        :aria-label=\"buttonAriaLabel\"\n        :aria-labelledby=\"buttonAriaLabelledby\"\n        :aria-description=\"\n          t('el.colorpicker.description', { color: modelValue || '' })\n        \"\n        :aria-disabled=\"colorDisabled\"\n        :tabindex=\"colorDisabled ? undefined : tabindex\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      >\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-show=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, ref, watch } from 'vue'\nimport { debounce, pick } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { reactiveComputed } from '@vueuse/core'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElButton } from '@element-plus/components/button'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { debugWarn, getEventCode } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\nimport { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'\nimport {\n  ElColorPickerPanel,\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelProps,\n} from '@element-plus/components/color-picker-panel'\nimport Color from '@element-plus/components/color-picker-panel/src/utils/color'\nimport { useCommonColor } from '@element-plus/components/color-picker-panel/src/composables/use-common-color'\n\nimport type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { ColorPickerProps } from './color-picker'\n\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = withDefaults(\n  defineProps<ColorPickerProps>(),\n  colorPickerPropsDefaults\n)\n\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\nconst { valueOnClear, isEmptyValue } = useEmptyValues(props, null)\nconst commonColor = useCommonColor(props, emit)\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst pickerPanelRef = ref<ColorPickerPanelInstance>()\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {\n  disabled: colorDisabled,\n  beforeBlur(event) {\n    return popper.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    setShowPicker(false)\n    resetColor()\n    if (props.validateEvent) {\n      formItem?.validate?.('blur').catch((err) => debugWarn(err))\n    }\n  },\n})\n\nconst color = reactiveComputed(\n  () => pickerPanelRef.value?.color ?? commonColor.color\n) as Color\n\nconst panelProps = computed(() =>\n  pick(props, Object.keys(colorPickerPanelProps))\n)\n\nconst displayedColor = computed(() => {\n  if (!props.modelValue && !showPanelColor.value) {\n    return 'transparent'\n  }\n  return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n  return !isLabeledByFormItem.value\n    ? props.ariaLabel || t('el.colorpicker.defaultLabel')\n    : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n  return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n  return [\n    ns.b('picker'),\n    ns.is('disabled', colorDisabled.value),\n    ns.bm('picker', colorSize.value),\n    ns.is('focused', isFocused.value),\n  ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n  const { r, g, b, a } = color.toRgb()\n  return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n  showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\nfunction show() {\n  if (colorDisabled.value) return\n  setShowPicker(true)\n}\n\nfunction hide() {\n  debounceSetShowPicker(false)\n  resetColor()\n}\n\nfunction resetColor() {\n  nextTick(() => {\n    if (props.modelValue) {\n      color.fromString(props.modelValue)\n    } else {\n      color.value = ''\n      nextTick(() => {\n        showPanelColor.value = false\n      })\n    }\n  })\n}\n\nfunction handleTrigger() {\n  if (colorDisabled.value) return\n  if (showPicker.value) {\n    resetColor()\n  }\n  debounceSetShowPicker(!showPicker.value)\n}\n\nfunction confirmValue() {\n  const value = isEmptyValue(color.value) ? valueOnClear.value : color.value\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  if (props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n  debounceSetShowPicker(false)\n  // check if modelValue change, if not change, then reset color.\n  nextTick(() => {\n    const newColor = new Color({\n      enableAlpha: props.showAlpha,\n      format: props.colorFormat || '',\n      value: props.modelValue,\n    })\n    if (!color.compare(newColor)) {\n      resetColor()\n    }\n  })\n}\n\nfunction clear() {\n  debounceSetShowPicker(false)\n  emit(UPDATE_MODEL_EVENT, valueOnClear.value)\n  emit(CHANGE_EVENT, valueOnClear.value)\n  if (props.modelValue !== valueOnClear.value && props.validateEvent) {\n    formItem?.validate('change').catch((err) => debugWarn(err))\n  }\n  resetColor()\n  emit('clear')\n}\n\nfunction handleShowTooltip() {\n  pickerPanelRef?.value?.inputRef?.focus()\n}\n\nfunction handleClickOutside() {\n  if (!showPicker.value) return\n  hide()\n  isFocused.value && focus()\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  setShowPicker(false)\n  resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n    case EVENT_CODE.space:\n      event.preventDefault()\n      event.stopPropagation()\n      show()\n      break\n    case EVENT_CODE.esc:\n      handleEsc(event)\n      break\n  }\n}\n\nfunction focus() {\n  triggerRef.value.focus()\n}\n\nfunction blur() {\n  triggerRef.value.blur()\n}\n\nwatch(\n  () => currentColor.value,\n  (val) => {\n    shouldActiveChange && emit('activeChange', val)\n    shouldActiveChange = true\n  }\n)\n\nwatch(\n  () => color.value,\n  () => {\n    if (!props.modelValue && !showPanelColor.value) {\n      showPanelColor.value = true\n    }\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      showPanelColor.value = false\n    } else if (newVal && newVal !== color.value) {\n      shouldActiveChange = false\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => showPicker.value,\n  () => {\n    pickerPanelRef.value && nextTick(pickerPanelRef.value.update)\n  }\n)\n\nprovide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor)\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description manually show ColorPicker\n   */\n  show,\n  /**\n   * @description manually hide ColorPicker\n   */\n  hide,\n  /**\n   * @description focus the input element\n   */\n  focus,\n  /**\n   * @description blur the input element\n   */\n  blur,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"color-picker2.mjs","names":[],"sources":["../../../../../../packages/components/color-picker/src/color-picker.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    :visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"[ns.be('picker', 'panel'), popperClass!]\"\n    :popper-style=\"popperStyle\"\n    :stop-popper-mouse-event=\"false\"\n    pure\n    loop\n    role=\"dialog\"\n    effect=\"light\"\n    trigger=\"click\"\n    :teleported=\"teleported\"\n    :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n    :persistent=\"persistent\"\n    :append-to=\"appendTo\"\n    @show=\"handleShowTooltip\"\n    @hide=\"setShowPicker(false)\"\n  >\n    <template #content>\n      <el-color-picker-panel\n        ref=\"pickerPanelRef\"\n        v-bind=\"panelProps\"\n        v-click-outside:[triggerRef]=\"handleClickOutside\"\n        :border=\"false\"\n        :validate-event=\"false\"\n        @keydown.esc=\"handleEsc\"\n      >\n        <template #footer>\n          <div>\n            <el-button\n              v-if=\"clearable\"\n              :class=\"ns.be('footer', 'link-btn')\"\n              text\n              size=\"small\"\n              @click=\"clear\"\n            >\n              {{ t('el.colorpicker.clear') }}\n            </el-button>\n            <el-button\n              plain\n              size=\"small\"\n              :class=\"ns.be('footer', 'btn')\"\n              @click=\"confirmValue\"\n            >\n              {{ t('el.colorpicker.confirm') }}\n            </el-button>\n          </div>\n        </template>\n      </el-color-picker-panel>\n    </template>\n    <template #default>\n      <div\n        :id=\"buttonId\"\n        ref=\"triggerRef\"\n        v-bind=\"$attrs\"\n        :class=\"btnKls\"\n        role=\"button\"\n        :aria-label=\"buttonAriaLabel\"\n        :aria-labelledby=\"buttonAriaLabelledby\"\n        :aria-description=\"\n          t('el.colorpicker.description', { color: modelValue || '' })\n        \"\n        :aria-disabled=\"colorDisabled\"\n        :tabindex=\"colorDisabled ? undefined : tabindex\"\n        @keydown=\"handleKeyDown\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n      >\n        <div :class=\"ns.be('picker', 'trigger')\" @click=\"handleTrigger\">\n          <span :class=\"[ns.be('picker', 'color'), ns.is('alpha', showAlpha)]\">\n            <span\n              :class=\"ns.be('picker', 'color-inner')\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                :class=\"[ns.be('picker', 'icon'), ns.is('icon-arrow-down')]\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-show=\"!modelValue && !showPanelColor\"\n                :class=\"[ns.be('picker', 'empty'), ns.is('icon-close')]\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, nextTick, provide, ref, watch } from 'vue'\nimport { debounce, pick } from 'lodash-unified'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { reactiveComputed } from '@vueuse/core'\nimport { ClickOutside as vClickOutside } from '@element-plus/directives'\nimport { ElTooltip } from '@element-plus/components/tooltip'\nimport { ElButton } from '@element-plus/components/button'\nimport {\n  useFormDisabled,\n  useFormItem,\n  useFormItemInputId,\n  useFormSize,\n} from '@element-plus/components/form'\nimport {\n  useEmptyValues,\n  useFocusController,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { NOOP, getEventCode } from '@element-plus/utils'\nimport { ArrowDown, Close } from '@element-plus/icons-vue'\nimport { colorPickerEmits, colorPickerPropsDefaults } from './color-picker'\nimport {\n  ElColorPickerPanel,\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelProps,\n} from '@element-plus/components/color-picker-panel'\nimport Color from '@element-plus/components/color-picker-panel/src/utils/color'\nimport { useCommonColor } from '@element-plus/components/color-picker-panel/src/composables/use-common-color'\n\nimport type { ColorPickerPanelInstance } from '@element-plus/components/color-picker-panel'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { ColorPickerProps } from './color-picker'\n\ndefineOptions({\n  name: 'ElColorPicker',\n})\nconst props = withDefaults(\n  defineProps<ColorPickerProps>(),\n  colorPickerPropsDefaults\n)\n\nconst emit = defineEmits(colorPickerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('color')\nconst { formItem } = useFormItem()\nconst colorSize = useFormSize()\nconst colorDisabled = useFormDisabled()\nconst { valueOnClear, isEmptyValue } = useEmptyValues(props, null)\nconst commonColor = useCommonColor(props, emit)\nconst { inputId: buttonId, isLabeledByFormItem } = useFormItemInputId(props, {\n  formItemContext: formItem,\n})\n\nconst popper = ref<TooltipInstance>()\nconst triggerRef = ref()\nconst pickerPanelRef = ref<ColorPickerPanelInstance>()\nconst showPicker = ref(false)\nconst showPanelColor = ref(false)\n\n// active-change is used to prevent modelValue changes from triggering.\nlet shouldActiveChange = true\n\nconst { isFocused, handleFocus, handleBlur } = useFocusController(triggerRef, {\n  disabled: colorDisabled,\n  beforeBlur(event) {\n    return popper.value?.isFocusInsideContent(event)\n  },\n  afterBlur() {\n    setShowPicker(false)\n    resetColor()\n    if (props.validateEvent) {\n      formItem?.validate?.('blur').catch(NOOP)\n    }\n  },\n})\n\nconst color = reactiveComputed(\n  () => pickerPanelRef.value?.color ?? commonColor.color\n) as Color\n\nconst panelProps = computed(() =>\n  pick(props, Object.keys(colorPickerPanelProps))\n)\n\nconst displayedColor = computed(() => {\n  if (!props.modelValue && !showPanelColor.value) {\n    return 'transparent'\n  }\n  return displayedRgb(color, props.showAlpha)\n})\n\nconst currentColor = computed(() => {\n  return !props.modelValue && !showPanelColor.value ? '' : color.value\n})\n\nconst buttonAriaLabel = computed<string | undefined>(() => {\n  return !isLabeledByFormItem.value\n    ? props.ariaLabel || t('el.colorpicker.defaultLabel')\n    : undefined\n})\n\nconst buttonAriaLabelledby = computed<string | undefined>(() => {\n  return isLabeledByFormItem.value ? formItem?.labelId : undefined\n})\n\nconst btnKls = computed(() => {\n  return [\n    ns.b('picker'),\n    ns.is('disabled', colorDisabled.value),\n    ns.bm('picker', colorSize.value),\n    ns.is('focused', isFocused.value),\n  ]\n})\n\nfunction displayedRgb(color: Color, showAlpha: boolean) {\n  const { r, g, b, a } = color.toRgb()\n  return showAlpha ? `rgba(${r}, ${g}, ${b}, ${a})` : `rgb(${r}, ${g}, ${b})`\n}\n\nfunction setShowPicker(value: boolean) {\n  showPicker.value = value\n}\n\nconst debounceSetShowPicker = debounce(setShowPicker, 100, { leading: true })\nfunction show() {\n  if (colorDisabled.value) return\n  setShowPicker(true)\n}\n\nfunction hide() {\n  debounceSetShowPicker(false)\n  resetColor()\n}\n\nfunction resetColor() {\n  nextTick(() => {\n    if (props.modelValue) {\n      color.fromString(props.modelValue)\n    } else {\n      color.value = ''\n      nextTick(() => {\n        showPanelColor.value = false\n      })\n    }\n  })\n}\n\nfunction handleTrigger() {\n  if (colorDisabled.value) return\n  if (showPicker.value) {\n    resetColor()\n  }\n  debounceSetShowPicker(!showPicker.value)\n}\n\nfunction confirmValue() {\n  const value = isEmptyValue(color.value) ? valueOnClear.value : color.value\n  emit(UPDATE_MODEL_EVENT, value)\n  emit(CHANGE_EVENT, value)\n  if (props.validateEvent) {\n    formItem?.validate('change').catch(NOOP)\n  }\n  debounceSetShowPicker(false)\n  // check if modelValue change, if not change, then reset color.\n  nextTick(() => {\n    const newColor = new Color({\n      enableAlpha: props.showAlpha,\n      format: props.colorFormat || '',\n      value: props.modelValue,\n    })\n    if (!color.compare(newColor)) {\n      resetColor()\n    }\n  })\n}\n\nfunction clear() {\n  debounceSetShowPicker(false)\n  emit(UPDATE_MODEL_EVENT, valueOnClear.value)\n  emit(CHANGE_EVENT, valueOnClear.value)\n  if (props.modelValue !== valueOnClear.value && props.validateEvent) {\n    formItem?.validate('change').catch(NOOP)\n  }\n  resetColor()\n  emit('clear')\n}\n\nfunction handleShowTooltip() {\n  pickerPanelRef?.value?.inputRef?.focus()\n}\n\nfunction handleClickOutside() {\n  if (!showPicker.value) return\n  hide()\n  isFocused.value && focus()\n}\n\nfunction handleEsc(event: KeyboardEvent) {\n  event.preventDefault()\n  event.stopPropagation()\n  setShowPicker(false)\n  resetColor()\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n    case EVENT_CODE.space:\n      event.preventDefault()\n      event.stopPropagation()\n      show()\n      break\n    case EVENT_CODE.esc:\n      handleEsc(event)\n      break\n  }\n}\n\nfunction focus() {\n  triggerRef.value.focus()\n}\n\nfunction blur() {\n  triggerRef.value.blur()\n}\n\nwatch(\n  () => currentColor.value,\n  (val) => {\n    shouldActiveChange && emit('activeChange', val)\n    shouldActiveChange = true\n  }\n)\n\nwatch(\n  () => color.value,\n  () => {\n    if (!props.modelValue && !showPanelColor.value) {\n      showPanelColor.value = true\n    }\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (!newVal) {\n      showPanelColor.value = false\n    } else if (newVal && newVal !== color.value) {\n      shouldActiveChange = false\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => showPicker.value,\n  () => {\n    pickerPanelRef.value && nextTick(pickerPanelRef.value.update)\n  }\n)\n\nprovide(ROOT_COMMON_COLOR_INJECTION_KEY, commonColor)\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description manually show ColorPicker\n   */\n  show,\n  /**\n   * @description manually hide ColorPicker\n   */\n  hide,\n  /**\n   * @description focus the input element\n   */\n  focus,\n  /**\n   * @description blur the input element\n   */\n  blur,\n})\n</script>\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
-import { InputInstance } from "../../input/src/instance.js";
-import "../../input/index.js";
 import { Color } from "./utils/color.js";
 import { ColorPickerPanelProps } from "./color-picker-panel.js";
+import { InputInstance } from "../../input/src/instance.js";
+import "../../input/index.js";
 import * as vue from "vue";
 
 //#region ../../packages/components/color-picker-panel/src/color-picker-panel.vue.d.ts
@@ -28,8 +28,8 @@ declare const __VLS_base: vue.DefineComponent<ColorPickerPanelProps, {
 }, string, vue.PublicProps, Readonly<ColorPickerPanelProps> & Readonly<{
   "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }>, {
-  modelValue: string | null;
   validateEvent: boolean;
+  modelValue: string | null;
   border: boolean;
   showAlpha: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;

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

@@ -1,5 +1,5 @@
 import { UPDATE_MODEL_EVENT } from "../../../constants/event.mjs";
-import { debugWarn } from "../../../utils/error.mjs";
+import { NOOP } from "../../../utils/functions.mjs";
 import { useNamespace } from "../../../hooks/use-namespace/index.mjs";
 import { useFormDisabled } from "../../form/src/hooks/use-form-common-props.mjs";
 import { useFormItem } from "../../form/src/hooks/use-form-item.mjs";
@@ -35,7 +35,7 @@ var color_picker_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 			if (color.value !== customInput.value) customInput.value = color.value;
 		}
 		function handleFocusout() {
-			if (props.validateEvent) formItem?.validate?.("blur").catch((err) => debugWarn(err));
+			if (props.validateEvent) formItem?.validate?.("blur").catch(NOOP);
 		}
 		function update() {
 			hueRef.value?.update();
@@ -52,7 +52,7 @@ var color_picker_panel_vue_vue_type_script_setup_true_lang_default = /* @__PURE_
 		watch(() => color.value, (val) => {
 			emit(UPDATE_MODEL_EVENT, val);
 			customInput.value = val;
-			if (props.validateEvent) formItem?.validate("change").catch((err) => debugWarn(err));
+			if (props.validateEvent) formItem?.validate("change").catch(NOOP);
 		});
 		provide(colorPickerPanelContextKey, { currentColor: computed(() => color.value) });
 		__expose({

package/es/components/color-picker-panel/src/color-picker-panel.vue_vue_type_script_setup_true_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\"\n    @focusout=\"handleFocusout\"\n  >\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hueRef\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n        :class=\"['hue-slider', hueSliderClass]\"\n        :style=\"hueSliderStyle\"\n      />\n      <sv-panel ref=\"svRef\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alphaRef\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { ColorPickerPanelProps } from './color-picker-panel'\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = withDefaults(defineProps<ColorPickerPanelProps>(), {\n  modelValue: undefined,\n  border: true,\n  validateEvent: true,\n  showAlpha: false,\n})\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled()\nconst hueRef = ref<InstanceType<typeof HueSlider>>()\nconst svRef = ref<InstanceType<typeof SvPanel>>()\nconst alphaRef = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nfunction handleFocusout() {\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch((err) => debugWarn(err))\n  }\n}\n\nfunction update() {\n  hueRef.value?.update()\n  svRef.value?.update()\n  alphaRef.value?.update()\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(update)\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal !== color.value) {\n      newVal ? color.fromString(newVal) : color.clear()\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n    if (props.validateEvent) {\n      formItem?.validate('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n  /**\n   * @description update sub components\n   */\n  update,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,KAAK,aAAa,qBAAoB;EAC5C,MAAM,EAAE,aAAa,aAAY;EACjC,MAAM,WAAW,iBAAgB;EACjC,MAAM,SAAS,KAAoC;EACnD,MAAM,QAAQ,KAAkC;EAChD,MAAM,WAAW,KAAsC;EACvD,MAAM,WAAW,KAAmB;EACpC,MAAM,cAAc,IAAI,GAAE;EAE1B,MAAM,EAAE,UAAU,OAChB,uCACM,eAAe,OAAO,KAAK,EACjC,KACF;EAEA,SAAS,gBAAgB;AACvB,SAAM,WAAW,YAAY,MAAK;AAClC,OAAI,MAAM,UAAU,YAAY,MAC9B,aAAY,QAAQ,MAAM;;EAI9B,SAAS,iBAAiB;AACxB,OAAI,MAAM,cACR,WAAU,WAAW,OAAO,CAAC,OAAO,QAAQ,UAAU,IAAI,CAAA;;EAI9D,SAAS,SAAS;AAChB,UAAO,OAAO,QAAO;AACrB,SAAM,OAAO,QAAO;AACpB,YAAS,OAAO,QAAO;;AAGzB,kBAAgB;AACd,OAAI,MAAM,WACR,aAAY,QAAQ,MAAM;AAE5B,YAAS,OAAM;IAChB;AAED,cACQ,MAAM,aACX,WAAW;AACV,OAAI,WAAW,MAAM,MACnB,UAAS,MAAM,WAAW,OAAO,GAAG,MAAM,OAAM;IAGtD;AAEA,cACQ,MAAM,QACX,QAAQ;AACP,QAAK,oBAAoB,IAAG;AAC5B,eAAY,QAAQ;AACpB,OAAI,MAAM,cACR,WAAU,SAAS,SAAS,CAAC,OAAO,QAAQ,UAAU,IAAI,CAAA;IAGhE;AAEA,UAAQ,4BAA4B,EAClC,cAAc,eAAe,MAAM,MAAM,EAC1C,CAAA;AAED,WAAa;GAIX;GAIA;GAIA;GACD,CAAA;;uBAzJC,mBAwCM,OAAA;IAvCH,OAAK,eAAA;KAAG,MAAA,GAAE,CAAC,GAAC;KAAI,MAAA,GAAE,CAAC,GAAE,YAAa,MAAA,SAAQ,CAAA;KAAG,MAAA,GAAE,CAAC,GAAE,UAAW,QAAA,OAAM;KAAA,CAAA;IACnE,YAAU;;IAEX,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,UAAA,CAAA,KACf,YAOE,oBAAA;cANI;KAAJ,KAAI;KACH,OAAO,MAAA,MAAK;KACb,UAAA;KACC,UAAU,MAAA,SAAQ;KAClB,OAAK,eAAA,CAAA,cAAiB,QAAA,eAAc,CAAA;KACpC,OAAK,eAAE,QAAA,eAAc;;;;;;QAExB,YAA4D,kBAAA;cAA9C;KAAJ,KAAI;KAAS,OAAO,MAAA,MAAK;KAAG,UAAU,MAAA,SAAA;;IAG1C,QAAA,0BADR,YAKE,sBAAA;;cAHI;KAAJ,KAAI;KACH,OAAO,MAAA,MAAK;KACZ,UAAU,MAAA,SAAA;;IAGL,QAAA,0BADR,YAOE,mBAAA;;KALA,KAAI;KACH,gBAAc,QAAA;KACd,OAAO,MAAA,MAAK;KACZ,QAAQ,QAAA;KACR,UAAU,MAAA,SAAA;;;;;;;IAEb,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,SAAA,CAAA,KACf,YAOE,MAAA,QAAA,EAAA;cANI;KAAJ,KAAI;iBACK,YAAA;kEAAA,YAAW,QAAA;KACnB,kBAAgB;KACjB,MAAK;KACJ,UAAU,MAAA,SAAQ;KAClB,UAAQ;6CAEX,WAAsB,KAAA,QAAA,SAAA"}
+{"version":3,"file":"color-picker-panel.vue_vue_type_script_setup_true_lang.mjs","names":[],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\"\n    @focusout=\"handleFocusout\"\n  >\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hueRef\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n        :class=\"['hue-slider', hueSliderClass]\"\n        :style=\"hueSliderStyle\"\n      />\n      <sv-panel ref=\"svRef\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alphaRef\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { NOOP } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { ColorPickerPanelProps } from './color-picker-panel'\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = withDefaults(defineProps<ColorPickerPanelProps>(), {\n  modelValue: undefined,\n  border: true,\n  validateEvent: true,\n  showAlpha: false,\n})\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled()\nconst hueRef = ref<InstanceType<typeof HueSlider>>()\nconst svRef = ref<InstanceType<typeof SvPanel>>()\nconst alphaRef = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nfunction handleFocusout() {\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch(NOOP)\n  }\n}\n\nfunction update() {\n  hueRef.value?.update()\n  svRef.value?.update()\n  alphaRef.value?.update()\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(update)\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal !== color.value) {\n      newVal ? color.fromString(newVal) : color.clear()\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n    if (props.validateEvent) {\n      formItem?.validate('change').catch(NOOP)\n    }\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n  /**\n   * @description update sub components\n   */\n  update,\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,KAAK,aAAa,qBAAoB;EAC5C,MAAM,EAAE,aAAa,aAAY;EACjC,MAAM,WAAW,iBAAgB;EACjC,MAAM,SAAS,KAAoC;EACnD,MAAM,QAAQ,KAAkC;EAChD,MAAM,WAAW,KAAsC;EACvD,MAAM,WAAW,KAAmB;EACpC,MAAM,cAAc,IAAI,GAAE;EAE1B,MAAM,EAAE,UAAU,OAChB,uCACM,eAAe,OAAO,KAAK,EACjC,KACF;EAEA,SAAS,gBAAgB;AACvB,SAAM,WAAW,YAAY,MAAK;AAClC,OAAI,MAAM,UAAU,YAAY,MAC9B,aAAY,QAAQ,MAAM;;EAI9B,SAAS,iBAAiB;AACxB,OAAI,MAAM,cACR,WAAU,WAAW,OAAO,CAAC,MAAM,KAAI;;EAI3C,SAAS,SAAS;AAChB,UAAO,OAAO,QAAO;AACrB,SAAM,OAAO,QAAO;AACpB,YAAS,OAAO,QAAO;;AAGzB,kBAAgB;AACd,OAAI,MAAM,WACR,aAAY,QAAQ,MAAM;AAE5B,YAAS,OAAM;IAChB;AAED,cACQ,MAAM,aACX,WAAW;AACV,OAAI,WAAW,MAAM,MACnB,UAAS,MAAM,WAAW,OAAO,GAAG,MAAM,OAAM;IAGtD;AAEA,cACQ,MAAM,QACX,QAAQ;AACP,QAAK,oBAAoB,IAAG;AAC5B,eAAY,QAAQ;AACpB,OAAI,MAAM,cACR,WAAU,SAAS,SAAS,CAAC,MAAM,KAAI;IAG7C;AAEA,UAAQ,4BAA4B,EAClC,cAAc,eAAe,MAAM,MAAM,EAC1C,CAAA;AAED,WAAa;GAIX;GAIA;GAIA;GACD,CAAA;;uBAzJC,mBAwCM,OAAA;IAvCH,OAAK,eAAA;KAAG,MAAA,GAAE,CAAC,GAAC;KAAI,MAAA,GAAE,CAAC,GAAE,YAAa,MAAA,SAAQ,CAAA;KAAG,MAAA,GAAE,CAAC,GAAE,UAAW,QAAA,OAAM;KAAA,CAAA;IACnE,YAAU;;IAEX,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,UAAA,CAAA,KACf,YAOE,oBAAA;cANI;KAAJ,KAAI;KACH,OAAO,MAAA,MAAK;KACb,UAAA;KACC,UAAU,MAAA,SAAQ;KAClB,OAAK,eAAA,CAAA,cAAiB,QAAA,eAAc,CAAA;KACpC,OAAK,eAAE,QAAA,eAAc;;;;;;QAExB,YAA4D,kBAAA;cAA9C;KAAJ,KAAI;KAAS,OAAO,MAAA,MAAK;KAAG,UAAU,MAAA,SAAA;;IAG1C,QAAA,0BADR,YAKE,sBAAA;;cAHI;KAAJ,KAAI;KACH,OAAO,MAAA,MAAK;KACZ,UAAU,MAAA,SAAA;;IAGL,QAAA,0BADR,YAOE,mBAAA;;KALA,KAAI;KACH,gBAAc,QAAA;KACd,OAAO,MAAA,MAAK;KACZ,QAAQ,QAAA;KACR,UAAU,MAAA,SAAA;;;;;;;IAEb,mBAUM,OAAA,EAVA,OAAK,eAAE,MAAA,GAAE,CAAC,EAAC,SAAA,CAAA,KACf,YAOE,MAAA,QAAA,EAAA;cANI;KAAJ,KAAI;iBACK,YAAA;kEAAA,YAAW,QAAA;KACnB,kBAAgB;KACjB,MAAK;KACJ,UAAU,MAAA,SAAQ;KAClB,UAAQ;6CAEX,WAAsB,KAAA,QAAA,SAAA"}

package/es/components/color-picker-panel/src/color-picker-panel2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel2.mjs","names":[],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\"\n    @focusout=\"handleFocusout\"\n  >\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hueRef\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n        :class=\"['hue-slider', hueSliderClass]\"\n        :style=\"hueSliderStyle\"\n      />\n      <sv-panel ref=\"svRef\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alphaRef\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { ColorPickerPanelProps } from './color-picker-panel'\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = withDefaults(defineProps<ColorPickerPanelProps>(), {\n  modelValue: undefined,\n  border: true,\n  validateEvent: true,\n  showAlpha: false,\n})\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled()\nconst hueRef = ref<InstanceType<typeof HueSlider>>()\nconst svRef = ref<InstanceType<typeof SvPanel>>()\nconst alphaRef = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nfunction handleFocusout() {\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch((err) => debugWarn(err))\n  }\n}\n\nfunction update() {\n  hueRef.value?.update()\n  svRef.value?.update()\n  alphaRef.value?.update()\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(update)\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal !== color.value) {\n      newVal ? color.fromString(newVal) : color.clear()\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n    if (props.validateEvent) {\n      formItem?.validate('change').catch((err) => debugWarn(err))\n    }\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n  /**\n   * @description update sub components\n   */\n  update,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"color-picker-panel2.mjs","names":[],"sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\"\n    @focusout=\"handleFocusout\"\n  >\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hueRef\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n        :class=\"['hue-slider', hueSliderClass]\"\n        :style=\"hueSliderStyle\"\n      />\n      <sv-panel ref=\"svRef\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alphaRef\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { NOOP } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { ColorPickerPanelProps } from './color-picker-panel'\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = withDefaults(defineProps<ColorPickerPanelProps>(), {\n  modelValue: undefined,\n  border: true,\n  validateEvent: true,\n  showAlpha: false,\n})\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst { formItem } = useFormItem()\nconst disabled = useFormDisabled()\nconst hueRef = ref<InstanceType<typeof HueSlider>>()\nconst svRef = ref<InstanceType<typeof SvPanel>>()\nconst alphaRef = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nfunction handleFocusout() {\n  if (props.validateEvent) {\n    formItem?.validate?.('blur').catch(NOOP)\n  }\n}\n\nfunction update() {\n  hueRef.value?.update()\n  svRef.value?.update()\n  alphaRef.value?.update()\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(update)\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal !== color.value) {\n      newVal ? color.fromString(newVal) : color.clear()\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n    if (props.validateEvent) {\n      formItem?.validate('change').catch(NOOP)\n    }\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n  /**\n   * @description update sub components\n   */\n  update,\n})\n</script>\n"],"mappings":""}

package/es/components/config-provider/index.d.ts

@@ -1,7 +1,7 @@
 import { SFCWithInstall } from "../../utils/vue/typescript.js";
 import "../../utils/index.js";
-import { ConfigProviderProps, ConfigProviderPropsPublic, ExperimentalFeatures, configProviderProps } from "./src/config-provider-props.js";
 import { ConfigProvider, ConfigProviderInstance, messageConfig } from "./src/config-provider.js";
+import { ConfigProviderProps, ConfigProviderPropsPublic, ExperimentalFeatures, configProviderProps } from "./src/config-provider-props.js";
 import { ConfigProviderContext, configProviderContextKey } from "./src/constants.js";
 import { provideGlobalConfig, useGlobalComponentSettings, useGlobalConfig } from "./src/hooks/use-global-config.js";
 

package/es/components/config-provider/src/config-provider-props.d.ts

@@ -5,10 +5,10 @@ import "../../button/index.js";
 import { CardConfigContext } from "../../card/src/card.js";
 import "../../card/index.js";
 import { Language } from "../../../locale/index.js";
-import { DialogConfigContext } from "../../dialog/src/dialog.js";
-import "../../dialog/index.js";
 import { MessageConfigContext } from "../../message/src/message.js";
 import "../../message/index.js";
+import { DialogConfigContext } from "../../dialog/src/dialog.js";
+import "../../dialog/index.js";
 import { LinkConfigContext } from "../../link/src/link.js";
 import "../../link/index.js";
 import { TableConfigContext } from "../../table/src/table/defaults.js";
@@ -29,7 +29,7 @@ declare const configProviderProps: {
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/es/components/config-provider/src/config-provider.d.ts

@@ -3,9 +3,9 @@ import "../../../utils/index.js";
 import { ButtonConfigContext } from "../../button/src/button.js";
 import { CardConfigContext } from "../../card/src/card.js";
 import { Language } from "../../../locale/index.js";
-import { DialogConfigContext } from "../../dialog/src/dialog.js";
 import { MessageConfigContext } from "../../message/src/message.js";
 import "../../message/index.js";
+import { DialogConfigContext } from "../../dialog/src/dialog.js";
 import { LinkConfigContext } from "../../link/src/link.js";
 import { TableConfigContext } from "../../table/src/table/defaults.js";
 import { ExperimentalFeatures } from "./config-provider-props.js";
@@ -25,7 +25,7 @@ declare const ConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -88,7 +88,7 @@ declare const ConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -139,10 +139,10 @@ declare const ConfigProvider: vue.DefineComponent<vue.ExtractPropTypes<{
     __epPropKey: true;
   };
 }>> & Readonly<{}>, {
+  readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
   readonly a11y: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly keyboardNavigation: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly namespace: string;
-  readonly valueOnClear: EpPropMergeType<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown>;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 type ConfigProviderInstance = InstanceType<typeof ConfigProvider> & unknown;
 //#endregion

package/es/components/config-provider/src/hooks/use-global-config.d.ts

@@ -1,5 +1,4 @@
 import { LocaleContext } from "../../../../hooks/use-locale/index.js";
-import "../../../../hooks/index.js";
 import { ConfigProviderProps } from "../config-provider-props.js";
 import { ConfigProviderContext } from "../constants.js";
 import "../../../../index.js";
@@ -35,7 +34,7 @@ declare function useGlobalComponentSettings(block: string, sizeFallback?: MaybeR
     currentZIndex: vue.ComputedRef<number>;
     nextZIndex: () => number;
   };
-  size: vue.ComputedRef<"default" | "" | "small" | "large">;
+  size: vue.ComputedRef<"" | "default" | "large" | "small">;
 };
 declare const provideGlobalConfig: (config: MaybeRef<ConfigProviderContext>, app?: App, global?: boolean) => vue.ComputedRef<Partial<ConfigProviderProps>> | undefined;
 //#endregion