@element-plus/nightly 0.0.20260118 → 0.0.20260119

package/es/components/avatar/src/avatar.vue2.mjs

@@ -1,6 +1,6 @@
 import { defineComponent, inject, ref, computed, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, createBlock, renderSlot, unref, withCtx, resolveDynamicComponent } from 'vue';
 import { ElIcon } from '../../icon/index.mjs';
-import { avatarEmits, avatarProps } from './avatar.mjs';
+import { avatarEmits } from './avatar.mjs';
 import { avatarGroupContextKey } from './constants.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { isString } from '@vue/shared';
@@ -13,7 +13,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     name: "ElAvatar"
   },
   __name: "avatar",
-  props: avatarProps,
+  props: {
+    size: { type: null, required: false },
+    shape: { type: String, required: false },
+    icon: { type: null, required: false },
+    src: { type: String, required: false, default: "" },
+    alt: { type: String, required: false },
+    srcSet: { type: String, required: false },
+    fit: { type: null, required: false, default: "cover" }
+  },
   emits: avatarEmits,
   setup(__props, { emit: __emit }) {
     const props = __props;
@@ -63,16 +71,16 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           style: normalizeStyle(sizeStyle.value)
         },
         [
-          (_ctx.src || _ctx.srcSet) && !hasLoadError.value ? (openBlock(), createElementBlock("img", {
+          (__props.src || __props.srcSet) && !hasLoadError.value ? (openBlock(), createElementBlock("img", {
             key: 0,
-            src: _ctx.src,
-            alt: _ctx.alt,
-            srcset: _ctx.srcSet,
+            src: __props.src,
+            alt: __props.alt,
+            srcset: __props.srcSet,
             style: normalizeStyle(fitStyle.value),
             onError: handleError
-          }, null, 44, _hoisted_1)) : _ctx.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
+          }, null, 44, _hoisted_1)) : __props.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
             default: withCtx(() => [
-              (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
+              (openBlock(), createBlock(resolveDynamicComponent(__props.icon)))
             ]),
             _: 1
             /* STABLE */

package/es/components/avatar/src/avatar.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.vue2.mjs","sources":["../../../../../../packages/components/avatar/src/avatar.vue"],"sourcesContent":["<template>\n  <span :class=\"avatarClass\" :style=\"sizeStyle\">\n    <img\n      v-if=\"(src || srcSet) && !hasLoadError\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :srcset=\"srcSet\"\n      :style=\"fitStyle\"\n      @error=\"handleError\"\n    />\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <slot v-else />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, watch } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { addUnit, isNumber, isString } from '@element-plus/utils'\nimport { avatarEmits, avatarProps } from './avatar'\nimport { avatarGroupContextKey } from './constants'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElAvatar',\n})\n\nconst props = defineProps(avatarProps)\nconst emit = defineEmits(avatarEmits)\n\nconst avatarGroupContext = inject(avatarGroupContextKey, undefined)\n\nconst ns = useNamespace('avatar')\n\nconst hasLoadError = ref(false)\n\nconst size = computed(() => props.size ?? avatarGroupContext?.size)\nconst shape = computed(\n  () => props.shape ?? avatarGroupContext?.shape ?? 'circle'\n)\n\nconst avatarClass = computed(() => {\n  const { icon } = props\n  const classList = [ns.b()]\n  if (isString(size.value)) classList.push(ns.m(size.value))\n  if (icon) classList.push(ns.m('icon'))\n  if (shape.value) classList.push(ns.m(shape.value))\n  return classList\n})\n\nconst sizeStyle = computed(() => {\n  return isNumber(size.value)\n    ? (ns.cssVarBlock({\n        size: addUnit(size.value)!,\n      }) as CSSProperties)\n    : undefined\n})\n\nconst fitStyle = computed<CSSProperties>(() => ({\n  objectFit: props.fit,\n}))\n\n// need reset hasLoadError to false if src changed\nwatch(\n  () => [props.src, props.srcSet],\n  () => (hasLoadError.value = false)\n)\n\nfunction handleError(e: Event) {\n  hasLoadError.value = true\n  emit('error', e)\n}\n</script>\n"],"names":["_createElementBlock","src","srcSet","alt","icon","_createBlock","_unref","_openBlock","_resolveDynamicComponent","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"avatar.vue2.mjs","sources":["../../../../../../packages/components/avatar/src/avatar.vue"],"sourcesContent":["<template>\n  <span :class=\"avatarClass\" :style=\"sizeStyle\">\n    <img\n      v-if=\"(src || srcSet) && !hasLoadError\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :srcset=\"srcSet\"\n      :style=\"fitStyle\"\n      @error=\"handleError\"\n    />\n    <el-icon v-else-if=\"icon\">\n      <component :is=\"icon\" />\n    </el-icon>\n    <slot v-else />\n  </span>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, watch } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { addUnit, isNumber, isString } from '@element-plus/utils'\nimport { avatarEmits } from './avatar'\nimport { avatarGroupContextKey } from './constants'\n\nimport type { AvatarProps } from './avatar'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElAvatar',\n})\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  src: '',\n  fit: 'cover',\n})\n\nconst emit = defineEmits(avatarEmits)\n\nconst avatarGroupContext = inject(avatarGroupContextKey, undefined)\n\nconst ns = useNamespace('avatar')\n\nconst hasLoadError = ref(false)\n\nconst size = computed(() => props.size ?? avatarGroupContext?.size)\nconst shape = computed(\n  () => props.shape ?? avatarGroupContext?.shape ?? 'circle'\n)\n\nconst avatarClass = computed(() => {\n  const { icon } = props\n  const classList = [ns.b()]\n  if (isString(size.value)) classList.push(ns.m(size.value))\n  if (icon) classList.push(ns.m('icon'))\n  if (shape.value) classList.push(ns.m(shape.value))\n  return classList\n})\n\nconst sizeStyle = computed(() => {\n  return isNumber(size.value)\n    ? (ns.cssVarBlock({\n        size: addUnit(size.value)!,\n      }) as CSSProperties)\n    : undefined\n})\n\nconst fitStyle = computed<CSSProperties>(() => ({\n  objectFit: props.fit,\n}))\n\n// need reset hasLoadError to false if src changed\nwatch(\n  () => [props.src, props.srcSet],\n  () => (hasLoadError.value = false)\n)\n\nfunction handleError(e: Event) {\n  hasLoadError.value = true\n  emit('error', e)\n}\n</script>\n"],"names":["_createElementBlock","_createBlock","_unref","_openBlock","_resolveDynamicComponent","_renderSlot"],"mappings":"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"}

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

@@ -1,6 +1,39 @@
-import type { ComputedRef, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey } from 'vue';
+import type { ComputedRef, ExtractPublicPropTypes, InjectionKey } from 'vue';
 import type ColorPickerPanel from './color-picker-panel.vue';
 import type Color from './utils/color';
+export interface ColorPickerPanelProps {
+    /**
+     * @description binding value
+     */
+    modelValue?: string | null;
+    /**
+     * @description whether the color picker is bordered
+     */
+    border?: boolean;
+    /**
+     * @description whether to display the alpha slider
+     */
+    showAlpha?: boolean;
+    /**
+     * @description color format of v-model
+     */
+    colorFormat?: string;
+    /**
+     * @description whether to disable the color picker
+     */
+    disabled?: boolean;
+    /**
+     * @description predefined color options
+     */
+    predefine?: string[];
+    /**
+     * @description whether to trigger form validation
+     */
+    validateEvent?: boolean;
+}
+/**
+ * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.
+ */
 export declare const colorPickerPanelProps: {
     readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => string | null) | ((new (...args: any[]) => string) | (() => string | null))[], unknown, unknown, undefined, boolean>;
     readonly border: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
@@ -18,7 +51,9 @@ export declare const colorPickerPanelProps: {
 export declare const colorPickerPanelEmits: {
     "update:modelValue": (val: string | null) => boolean;
 };
-export type ColorPickerPanelProps = ExtractPropTypes<typeof colorPickerPanelProps>;
+/**
+ * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.
+ */
 export type ColorPickerPanelPropsPublic = ExtractPublicPropTypes<typeof colorPickerPanelProps>;
 export type ColorPickerPanelEmits = typeof colorPickerPanelEmits;
 export type ColorPickerPanelInstance = InstanceType<typeof ColorPickerPanel> & unknown;

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel.mjs","sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type {\n  ComputedRef,\n  ExtractPropTypes,\n  ExtractPublicPropTypes,\n  InjectionKey,\n} from 'vue'\nimport type ColorPickerPanel from './color-picker-panel.vue'\nimport type Color from './utils/color'\n\nexport const colorPickerPanelProps = buildProps({\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description whether the color picker is bordered\n   */\n  border: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha: Boolean,\n  /**\n   * @description color format of v-model\n   */\n  colorFormat: String,\n  /**\n   * @description whether to disable the color picker\n   */\n  disabled: Boolean,\n  /**\n   * @description predefined color options\n   */\n  predefine: {\n    type: definePropType<string[]>(Array),\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport const colorPickerPanelEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n}\n\nexport type ColorPickerPanelProps = ExtractPropTypes<\n  typeof colorPickerPanelProps\n>\nexport type ColorPickerPanelPropsPublic = ExtractPublicPropTypes<\n  typeof colorPickerPanelProps\n>\nexport type ColorPickerPanelEmits = typeof colorPickerPanelEmits\nexport type ColorPickerPanelInstance = InstanceType<typeof ColorPickerPanel> &\n  unknown\n\nexport interface ColorPickerPanelContext {\n  currentColor: ComputedRef<string>\n}\n\nexport interface CommonColorContext {\n  color: Color\n}\n\nexport const ROOT_COMMON_COLOR_INJECTION_KEY: InjectionKey<CommonColorContext> =\n  Symbol('colorCommonPickerKey')\nexport const colorPickerPanelContextKey: InjectionKey<ColorPickerPanelContext> =\n  Symbol('colorPickerPanelContextKey')\n"],"names":[],"mappings":";;;;;AAaO,MAAM,wBAAwB,UAAA,CAAW;AAAA;AAAA;AAAA;AAAA,EAI9C,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAA8B,MAAM,CAAA;AAAA,IAC1C,OAAA,EAAS;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,SAAA,EAAW,OAAA;AAAA;AAAA;AAAA;AAAA,EAIX,WAAA,EAAa,MAAA;AAAA;AAAA;AAAA;AAAA,EAIb,QAAA,EAAU,OAAA;AAAA;AAAA;AAAA;AAAA,EAIV,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,eAAyB,KAAK;AAAA,GACtC;AAAA;AAAA;AAAA;AAAA,EAIA,aAAA,EAAe;AAAA,IACb,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAU;AACH,MAAM,qBAAA,GAAwB;AAAA,EACnC,CAAC,kBAAkB,GAAG,CAAC,QAAuB,QAAA,CAAS,GAAG,CAAA,IAAK,KAAA,CAAM,GAAG;AAC1E;AAoBO,MAAM,+BAAA,0BACJ,sBAAsB;AACxB,MAAM,0BAAA,0BACJ,4BAA4B;;;;"}
+{"version":3,"file":"color-picker-panel.mjs","sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type { ComputedRef, ExtractPublicPropTypes, InjectionKey } from 'vue'\nimport type ColorPickerPanel from './color-picker-panel.vue'\nimport type Color from './utils/color'\n\nexport interface ColorPickerPanelProps {\n  /**\n   * @description binding value\n   */\n  modelValue?: string | null\n  /**\n   * @description whether the color picker is bordered\n   */\n  border?: boolean\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha?: boolean\n  /**\n   * @description color format of v-model\n   */\n  colorFormat?: string\n  /**\n   * @description whether to disable the color picker\n   */\n  disabled?: boolean\n  /**\n   * @description predefined color options\n   */\n  predefine?: string[]\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.\n */\nexport const colorPickerPanelProps = buildProps({\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description whether the color picker is bordered\n   */\n  border: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha: Boolean,\n  /**\n   * @description color format of v-model\n   */\n  colorFormat: String,\n  /**\n   * @description whether to disable the color picker\n   */\n  disabled: Boolean,\n  /**\n   * @description predefined color options\n   */\n  predefine: {\n    type: definePropType<string[]>(Array),\n  },\n  /**\n   * @description whether to trigger form validation\n   */\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport const colorPickerPanelEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `ColorPickerPanelProps` instead.\n */\nexport type ColorPickerPanelPropsPublic = ExtractPublicPropTypes<\n  typeof colorPickerPanelProps\n>\nexport type ColorPickerPanelEmits = typeof colorPickerPanelEmits\nexport type ColorPickerPanelInstance = InstanceType<typeof ColorPickerPanel> &\n  unknown\n\nexport interface ColorPickerPanelContext {\n  currentColor: ComputedRef<string>\n}\n\nexport interface CommonColorContext {\n  color: Color\n}\n\nexport const ROOT_COMMON_COLOR_INJECTION_KEY: InjectionKey<CommonColorContext> =\n  Symbol('colorCommonPickerKey')\nexport const colorPickerPanelContextKey: InjectionKey<ColorPickerPanelContext> =\n  Symbol('colorPickerPanelContextKey')\n"],"names":[],"mappings":";;;;;AA0CO,MAAM,wBAAwB,UAAA,CAAW;AAAA;AAAA;AAAA;AAAA,EAI9C,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAA8B,MAAM,CAAA;AAAA,IAC1C,OAAA,EAAS;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,SAAA,EAAW,OAAA;AAAA;AAAA;AAAA;AAAA,EAIX,WAAA,EAAa,MAAA;AAAA;AAAA;AAAA;AAAA,EAIb,QAAA,EAAU,OAAA;AAAA;AAAA;AAAA;AAAA,EAIV,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,eAAyB,KAAK;AAAA,GACtC;AAAA;AAAA;AAAA;AAAA,EAIA,aAAA,EAAe;AAAA,IACb,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAU;AACH,MAAM,qBAAA,GAAwB;AAAA,EACnC,CAAC,kBAAkB,GAAG,CAAC,QAAuB,QAAA,CAAS,GAAG,CAAA,IAAK,KAAA,CAAM,GAAG;AAC1E;AAoBO,MAAM,+BAAA,0BACJ,sBAAsB;AACxB,MAAM,0BAAA,0BACJ,4BAA4B;;;;"}

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

@@ -1,23 +1,15 @@
+import type { ColorPickerPanelProps } from './color-picker-panel';
 import type { InputInstance } from '@element-plus/nightly/es/components/input';
 declare function update(): void;
 declare var __VLS_35: {};
 type __VLS_Slots = {} & {
     footer?: (props: typeof __VLS_35) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<{
-    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => string | null) | ((new (...args: any[]) => string) | (() => string | null))[], unknown, unknown, undefined, boolean>;
-    readonly border: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    readonly showAlpha: BooleanConstructor;
-    readonly colorFormat: StringConstructor;
-    readonly disabled: BooleanConstructor;
-    readonly predefine: {
-        readonly type: import("vue").PropType<string[]>;
-        readonly required: false;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly validateEvent: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-}, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_WithDefaultsLocal<__VLS_TypePropsToOption<ColorPickerPanelProps>, {
+    modelValue: undefined;
+    border: boolean;
+    validateEvent: boolean;
+}>, {
     /**
      * @description current color object
      */
@@ -32,33 +24,38 @@ declare const __VLS_base: import("vue").DefineComponent<{
     update: typeof update;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (val: string | null) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropFinalized<(new (...args: any[]) => string) | (() => string | null) | ((new (...args: any[]) => string) | (() => string | null))[], unknown, unknown, undefined, boolean>;
-    readonly border: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    readonly showAlpha: BooleanConstructor;
-    readonly colorFormat: StringConstructor;
-    readonly disabled: BooleanConstructor;
-    readonly predefine: {
-        readonly type: import("vue").PropType<string[]>;
-        readonly required: false;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly validateEvent: import("@element-plus/nightly/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-}>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaultsLocal<__VLS_TypePropsToOption<ColorPickerPanelProps>, {
+    modelValue: undefined;
+    border: boolean;
+    validateEvent: boolean;
+}>>> & {
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }, {
-    readonly disabled: boolean;
-    readonly border: import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    readonly modelValue: import("@element-plus/nightly/es/utils").EpPropMergeType<(new (...args: any[]) => string) | (() => string | null) | ((new (...args: any[]) => string) | (() => string | null))[], unknown, unknown>;
-    readonly validateEvent: import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    readonly showAlpha: boolean;
+    border: boolean;
+    modelValue: string | null;
+    validateEvent: boolean;
 }, {}>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<Required<T>[K]>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaultsLocal<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -4,7 +4,7 @@ import _sfc_main$3 from './components/alpha-slider.vue2.mjs';
 import _sfc_main$1 from './components/hue-slider.vue2.mjs';
 import _sfc_main$4 from './components/predefine.vue2.mjs';
 import _sfc_main$2 from './components/sv-panel.vue2.mjs';
-import { colorPickerPanelEmits, colorPickerPanelProps, ROOT_COMMON_COLOR_INJECTION_KEY, colorPickerPanelContextKey } from './color-picker-panel.mjs';
+import { colorPickerPanelEmits, ROOT_COMMON_COLOR_INJECTION_KEY, colorPickerPanelContextKey } from './color-picker-panel.mjs';
 import { useCommonColor } from './composables/use-common-color.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { useFormItem } from '../../form/src/hooks/use-form-item.mjs';
@@ -17,7 +17,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     name: "ElColorPickerPanel"
   },
   __name: "color-picker-panel",
-  props: colorPickerPanelProps,
+  props: {
+    modelValue: { type: [String, null], required: false, default: void 0 },
+    border: { type: Boolean, required: false, default: true },
+    showAlpha: { type: Boolean, required: false },
+    colorFormat: { type: String, required: false },
+    disabled: { type: Boolean, required: false },
+    predefine: { type: Array, required: false },
+    validateEvent: { type: Boolean, required: false, default: true }
+  },
   emits: colorPickerPanelEmits,
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
@@ -98,7 +106,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(
         "div",
         {
-          class: normalizeClass([unref(ns).b(), unref(ns).is("disabled", unref(disabled)), unref(ns).is("border", _ctx.border)]),
+          class: normalizeClass([unref(ns).b(), unref(ns).is("disabled", unref(disabled)), unref(ns).is("border", __props.border)]),
           onFocusout: handleFocusout
         },
         [
@@ -126,19 +134,19 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             2
             /* CLASS */
           ),
-          _ctx.showAlpha ? (openBlock(), createBlock(_sfc_main$3, {
+          __props.showAlpha ? (openBlock(), createBlock(_sfc_main$3, {
             key: 0,
             ref_key: "alphaRef",
             ref: alphaRef,
             color: unref(color),
             disabled: unref(disabled)
           }, null, 8, ["color", "disabled"])) : createCommentVNode("v-if", true),
-          _ctx.predefine ? (openBlock(), createBlock(_sfc_main$4, {
+          __props.predefine ? (openBlock(), createBlock(_sfc_main$4, {
             key: 1,
             ref: "predefine",
-            "enable-alpha": _ctx.showAlpha,
+            "enable-alpha": __props.showAlpha,
             color: unref(color),
-            colors: _ctx.predefine,
+            colors: __props.predefine,
             disabled: unref(disabled)
           }, null, 8, ["enable-alpha", "color", "colors", "disabled"])) : createCommentVNode("v-if", true),
           createElementVNode(

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

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel.vue2.mjs","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        class=\"hue-slider\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\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  colorPickerPanelProps,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = defineProps(colorPickerPanelProps)\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"],"names":["_createElementBlock","_normalizeClass","_unref","border","_createElementVNode","_createVNode","HueSlider","SvPanel","showAlpha","_createBlock","AlphaSlider","predefine","Predefine","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"color-picker-panel.vue2.mjs","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        class=\"hue-slider\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\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})\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"],"names":["_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode","HueSlider","SvPanel","_createBlock","AlphaSlider","Predefine","_renderSlot"],"mappings":"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"}

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

@@ -1,13 +1,4 @@
-declare const __VLS_export: import("vue").DefineComponent<{
-    readonly color: {
-        readonly type: import("vue").PropType<import("../utils/color").default>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly vertical: BooleanConstructor;
-    readonly disabled: BooleanConstructor;
-}, {
+declare const __VLS_export: import("vue").DefineComponent<{}, {
     /**
      * @description update alpha slider manually
      * @type {Function}
@@ -23,18 +14,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @type {HTMLElement}
      */
     thumb: import("vue").ShallowRef<HTMLElement | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly color: {
-        readonly type: import("vue").PropType<import("../utils/color").default>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly vertical: BooleanConstructor;
-    readonly disabled: BooleanConstructor;
-}>>, {
-    readonly disabled: boolean;
-    readonly vertical: boolean;
-}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/es/components/color-picker-panel/src/components/alpha-slider.vue2.mjs

@@ -1,5 +1,4 @@
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, normalizeStyle } from 'vue';
-import { alphaSliderProps } from '../props/slider.mjs';
 import { useSlider, useSliderDOM } from '../composables/use-slider.mjs';
 import { useLocale } from '../../../../hooks/use-locale/index.mjs';
 
@@ -11,7 +10,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     name: "ElColorAlphaSlider"
   },
   __name: "alpha-slider",
-  props: alphaSliderProps,
+  props: {
+    color: { type: Object, required: true },
+    vertical: { type: Boolean, required: false },
+    disabled: { type: Boolean, required: false }
+  },
   setup(__props, { expose: __expose }) {
     const props = __props;
     const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } = useSlider(props, { key: "alpha", minValue, maxValue });
@@ -85,12 +88,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             "aria-label": ariaLabel.value,
             "aria-valuenow": unref(currentValue),
             "aria-valuetext": ariaValuetext.value,
-            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
+            "aria-orientation": __props.vertical ? "vertical" : "horizontal",
             "aria-valuemin": minValue,
             "aria-valuemax": maxValue,
             role: "slider",
-            tabindex: _ctx.disabled ? void 0 : 0,
-            "aria-disabled": _ctx.disabled,
+            tabindex: __props.disabled ? void 0 : 0,
+            "aria-disabled": __props.disabled,
             onKeydown: _cache[1] || (_cache[1] = //@ts-ignore
             (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
           }, null, 46, _hoisted_1)

package/es/components/color-picker-panel/src/components/alpha-slider.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"alpha-slider.vue2.mjs","sources":["../../../../../../../packages/components/color-picker-panel/src/components/alpha-slider.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <div ref=\"bar\" :class=\"barKls\" :style=\"barStyle\" @click=\"handleClick\" />\n    <div\n      ref=\"thumb\"\n      :class=\"thumbKls\"\n      :style=\"thumbStyle\"\n      :aria-label=\"ariaLabel\"\n      :aria-valuenow=\"currentValue\"\n      :aria-valuetext=\"ariaValuetext\"\n      :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n      :aria-valuemin=\"minValue\"\n      :aria-valuemax=\"maxValue\"\n      role=\"slider\"\n      :tabindex=\"disabled ? undefined : 0\"\n      :aria-disabled=\"disabled\"\n      @keydown=\"handleKeydown\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { alphaSliderProps } from '../props/slider'\nimport { useSlider, useSliderDOM } from '../composables/use-slider'\n\ndefineOptions({\n  name: 'ElColorAlphaSlider',\n})\n\nconst props = defineProps(alphaSliderProps)\nconst minValue = 0\nconst maxValue = 100\n\nconst { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } =\n  useSlider(props, { key: 'alpha', minValue, maxValue })\n\nconst { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } =\n  useSliderDOM(props, {\n    namespace: 'color-alpha-slider',\n    maxValue,\n    currentValue,\n    bar,\n    thumb,\n    handleDrag,\n    getBackground,\n  })\n\nconst { t } = useLocale()\n\nconst ariaLabel = computed(() => t('el.colorpicker.alphaLabel'))\nconst ariaValuetext = computed(() => {\n  return t('el.colorpicker.alphaDescription', {\n    alpha: currentValue.value,\n    color: props.color.value,\n  })\n})\n\nfunction getBackground() {\n  if (props.color && props.color.value) {\n    const { r, g, b } = props.color.toRgb()\n    return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`\n  }\n  return ''\n}\n\ndefineExpose({\n  /**\n   * @description update alpha slider manually\n   * @type {Function}\n   */\n  update,\n  /**\n   * @description bar element ref\n   * @type {HTMLElement}\n   */\n  bar,\n  /**\n   * @description thumb element ref\n   * @type {HTMLElement}\n   */\n  thumb,\n})\n</script>\n"],"names":["_createElementBlock","_unref","_createElementVNode","vertical","disabled"],"mappings":";;;;;;AAgCA,MAAM,QAAA,GAAW,CAAA;AACjB,MAAM,QAAA,GAAW,GAAA;;;;;;;;AAFjB,IAAA,MAAM,KAAA,GAAQ,OAAA;AAId,IAAA,MAAM,EAAE,YAAA,EAAc,GAAA,EAAK,KAAA,EAAO,YAAY,WAAA,EAAa,aAAA,EAAc,GACvE,SAAA,CAAU,OAAO,EAAE,GAAA,EAAK,OAAA,EAAS,QAAA,EAAU,UAAU,CAAA;AAEvD,IAAA,MAAM,EAAE,SAAS,MAAA,EAAQ,QAAA,EAAU,UAAU,UAAA,EAAY,MAAA,EAAO,GAC9D,YAAA,CAAa,KAAA,EAAO;AAAA,MAClB,SAAA,EAAW,oBAAA;AAAA,MACX,QAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,MAAM,EAAE,CAAA,EAAE,GAAI,SAAA,EAAU;AAExB,IAAA,MAAM,SAAA,GAAY,QAAA,CAAS,MAAM,CAAA,CAAE,2BAA2B,CAAC,CAAA;AAC/D,IAAA,MAAM,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,OAAO,EAAE,iCAAA,EAAmC;AAAA,QAC1C,OAAO,YAAA,CAAa,KAAA;AAAA,QACpB,KAAA,EAAO,MAAM,KAAA,CAAM;AAAA,OACpB,CAAA;AAAA,IACH,CAAC,CAAA;AAED,IAAA,SAAS,aAAA,GAAgB;AACvB,MAAA,IAAI,KAAA,CAAM,KAAA,IAAS,KAAA,CAAM,KAAA,CAAM,KAAA,EAAO;AACpC,QAAA,MAAM,EAAE,CAAA,EAAG,CAAA,EAAG,GAAE,GAAI,KAAA,CAAM,MAAM,KAAA,EAAM;AACtC,QAAA,OAAO,CAAA,+BAAA,EAAkC,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,cAAA,EAAiB,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,EAAA,EAAK,CAAC,CAAA,UAAA,CAAA;AAAA,MACtF;AACA,MAAA,OAAO,EAAA;AAAA,IACT;AAEA,IAAA,QAAA,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA,MAKX,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA;AAAA,KACD,CAAA;;0BAlFCA,kBAAA;AAAA,QAiBM,KAAA;AAAA,QAAA;AAAA,UAjBA,KAAA,iBAAOC,KAAA,CAAA,OAAA,CAAO;AAAA;;UAClBC,kBAAA;AAAA,YAAwE,KAAA;AAAA,YAAA;AAAA,uBAA/D,KAAA;AAAA,cAAJ,GAAA,EAAI,GAAA;AAAA,cAAO,KAAA,iBAAOD,KAAA,CAAA,MAAA,CAAM,CAAA;AAAA,cAAG,KAAA,iBAAOA,KAAA,CAAA,QAAA,CAAQ,CAAA;AAAA,cAAG,OAAA,EAAK,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA;AAAA,2BAAEA,KAAA,CAAA,WAAA,KAAAA,KAAA,CAAA,WAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA;;;;;UACzDC,mBAcE,KAAA,EAAA;AAAA,qBAbI,OAAA;AAAA,YAAJ,GAAA,EAAI,KAAA;AAAA,YACH,KAAA,iBAAOD,KAAA,CAAA,QAAA,CAAQ,CAAA;AAAA,YACf,KAAA,iBAAOA,KAAA,CAAA,UAAA,CAAU,CAAA;AAAA,YACjB,cAAY,SAAA,CAAA,KAAA;AAAA,YACZ,eAAA,EAAeA,MAAA,YAAA,CAAA;AAAA,YACf,kBAAgB,aAAA,CAAA,KAAA;AAAA,YAChB,kBAAA,EAAkBE,IAAAA,CAAAA,QAAAA,GAAQ,UAAA,GAAA,YAAA;AAAA,YAC1B,eAAA,EAAe,QAAA;AAAA,YACf,eAAA,EAAe,QAAA;AAAA,YAChB,IAAA,EAAK,QAAA;AAAA,YACJ,QAAA,EAAUC,IAAAA,CAAAA,QAAAA,GAAW,MAAA,GAAS,CAAA;AAAA,YAC9B,iBAAeA,IAAAA,CAAAA,QAAAA;AAAAA,YACf,SAAA,EAAO,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA;AAAA,yBAAEH,KAAA,CAAA,aAAA,KAAAA,KAAA,CAAA,aAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"alpha-slider.vue2.mjs","sources":["../../../../../../../packages/components/color-picker-panel/src/components/alpha-slider.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <div ref=\"bar\" :class=\"barKls\" :style=\"barStyle\" @click=\"handleClick\" />\n    <div\n      ref=\"thumb\"\n      :class=\"thumbKls\"\n      :style=\"thumbStyle\"\n      :aria-label=\"ariaLabel\"\n      :aria-valuenow=\"currentValue\"\n      :aria-valuetext=\"ariaValuetext\"\n      :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n      :aria-valuemin=\"minValue\"\n      :aria-valuemax=\"maxValue\"\n      role=\"slider\"\n      :tabindex=\"disabled ? undefined : 0\"\n      :aria-disabled=\"disabled\"\n      @keydown=\"handleKeydown\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { useSlider, useSliderDOM } from '../composables/use-slider'\n\nimport type { AlphaSliderProps } from '../props/slider'\n\ndefineOptions({\n  name: 'ElColorAlphaSlider',\n})\n\nconst props = defineProps<AlphaSliderProps>()\nconst minValue = 0\nconst maxValue = 100\n\nconst { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } =\n  useSlider(props, { key: 'alpha', minValue, maxValue })\n\nconst { rootKls, barKls, barStyle, thumbKls, thumbStyle, update } =\n  useSliderDOM(props, {\n    namespace: 'color-alpha-slider',\n    maxValue,\n    currentValue,\n    bar,\n    thumb,\n    handleDrag,\n    getBackground,\n  })\n\nconst { t } = useLocale()\n\nconst ariaLabel = computed(() => t('el.colorpicker.alphaLabel'))\nconst ariaValuetext = computed(() => {\n  return t('el.colorpicker.alphaDescription', {\n    alpha: currentValue.value,\n    color: props.color.value,\n  })\n})\n\nfunction getBackground() {\n  if (props.color && props.color.value) {\n    const { r, g, b } = props.color.toRgb()\n    return `linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgba(${r}, ${g}, ${b}, 1) 100%)`\n  }\n  return ''\n}\n\ndefineExpose({\n  /**\n   * @description update alpha slider manually\n   * @type {Function}\n   */\n  update,\n  /**\n   * @description bar element ref\n   * @type {HTMLElement}\n   */\n  bar,\n  /**\n   * @description thumb element ref\n   * @type {HTMLElement}\n   */\n  thumb,\n})\n</script>\n"],"names":["_createElementBlock","_unref","_createElementVNode"],"mappings":"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"}

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

@@ -1,13 +1,4 @@
-declare const __VLS_export: import("vue").DefineComponent<{
-    readonly color: {
-        readonly type: import("vue").PropType<import("../utils/color").default>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly vertical: BooleanConstructor;
-    readonly disabled: BooleanConstructor;
-}, {
+declare const __VLS_export: import("vue").DefineComponent<{}, {
     /**
      * @description bar element ref
      */
@@ -24,18 +15,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
      * @description update hue slider manually
      */
     update: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly color: {
-        readonly type: import("vue").PropType<import("../utils/color").default>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly vertical: BooleanConstructor;
-    readonly disabled: BooleanConstructor;
-}>>, {
-    readonly disabled: boolean;
-    readonly vertical: boolean;
-}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/es/components/color-picker-panel/src/components/hue-slider.vue2.mjs

@@ -1,5 +1,4 @@
 import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, normalizeStyle } from 'vue';
-import { hueSliderProps } from '../props/slider.mjs';
 import { useSlider, useSliderDOM } from '../composables/use-slider.mjs';
 import { useLocale } from '../../../../hooks/use-locale/index.mjs';
 
@@ -11,7 +10,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     name: "ElColorHueSlider"
   },
   __name: "hue-slider",
-  props: hueSliderProps,
+  props: {
+    color: { type: Object, required: true },
+    vertical: { type: Boolean, required: false },
+    disabled: { type: Boolean, required: false }
+  },
   setup(__props, { expose: __expose }) {
     const props = __props;
     const { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } = useSlider(props, { key: "hue", minValue, maxValue });
@@ -77,12 +80,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             "aria-label": ariaLabel.value,
             "aria-valuenow": unref(currentValue),
             "aria-valuetext": ariaValuetext.value,
-            "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
+            "aria-orientation": __props.vertical ? "vertical" : "horizontal",
             "aria-valuemin": minValue,
             "aria-valuemax": maxValue,
             role: "slider",
-            tabindex: _ctx.disabled ? void 0 : 0,
-            "aria-disabled": _ctx.disabled,
+            tabindex: __props.disabled ? void 0 : 0,
+            "aria-disabled": __props.disabled,
             onKeydown: _cache[1] || (_cache[1] = //@ts-ignore
             (...args) => unref(handleKeydown) && unref(handleKeydown)(...args))
           }, null, 46, _hoisted_1)

package/es/components/color-picker-panel/src/components/hue-slider.vue2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"hue-slider.vue2.mjs","sources":["../../../../../../../packages/components/color-picker-panel/src/components/hue-slider.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <div ref=\"bar\" :class=\"barKls\" @click=\"handleClick\" />\n    <div\n      ref=\"thumb\"\n      :class=\"thumbKls\"\n      :style=\"thumbStyle\"\n      :aria-label=\"ariaLabel\"\n      :aria-valuenow=\"currentValue\"\n      :aria-valuetext=\"ariaValuetext\"\n      :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n      :aria-valuemin=\"minValue\"\n      :aria-valuemax=\"maxValue\"\n      role=\"slider\"\n      :tabindex=\"disabled ? undefined : 0\"\n      :aria-disabled=\"disabled\"\n      @keydown=\"handleKeydown\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { hueSliderProps } from '../props/slider'\nimport { useSlider, useSliderDOM } from '../composables/use-slider'\n\ndefineOptions({\n  name: 'ElColorHueSlider',\n})\n\nconst props = defineProps(hueSliderProps)\nconst minValue = 0\nconst maxValue = 360\n\nconst { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } =\n  useSlider(props, { key: 'hue', minValue, maxValue })\n\nconst { rootKls, barKls, thumbKls, thumbStyle, thumbTop, update } =\n  useSliderDOM(props, {\n    namespace: 'color-hue-slider',\n    maxValue,\n    currentValue,\n    bar,\n    thumb,\n    handleDrag,\n  })\n\nconst { t } = useLocale()\n\nconst ariaLabel = computed(() => t('el.colorpicker.hueLabel'))\nconst ariaValuetext = computed(() => {\n  return t('el.colorpicker.hueDescription', {\n    hue: currentValue.value,\n    color: props.color.value,\n  })\n})\n\ndefineExpose({\n  /**\n   * @description bar element ref\n   */\n  bar,\n  /**\n   * @description thumb element ref\n   */\n  thumb,\n  /**\n   * @description thumb top position, only for vertical slider\n   */\n  thumbTop,\n  /**\n   * @description update hue slider manually\n   */\n  update,\n})\n</script>\n"],"names":["_createElementBlock","_unref","_createElementVNode","vertical","disabled"],"mappings":";;;;;;AAgCA,MAAM,QAAA,GAAW,CAAA;AACjB,MAAM,QAAA,GAAW,GAAA;;;;;;;;AAFjB,IAAA,MAAM,KAAA,GAAQ,OAAA;AAId,IAAA,MAAM,EAAE,YAAA,EAAc,GAAA,EAAK,KAAA,EAAO,YAAY,WAAA,EAAa,aAAA,EAAc,GACvE,SAAA,CAAU,OAAO,EAAE,GAAA,EAAK,KAAA,EAAO,QAAA,EAAU,UAAU,CAAA;AAErD,IAAA,MAAM,EAAE,SAAS,MAAA,EAAQ,QAAA,EAAU,YAAY,QAAA,EAAU,MAAA,EAAO,GAC9D,YAAA,CAAa,KAAA,EAAO;AAAA,MAClB,SAAA,EAAW,kBAAA;AAAA,MACX,QAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,MAAM,EAAE,CAAA,EAAE,GAAI,SAAA,EAAU;AAExB,IAAA,MAAM,SAAA,GAAY,QAAA,CAAS,MAAM,CAAA,CAAE,yBAAyB,CAAC,CAAA;AAC7D,IAAA,MAAM,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,OAAO,EAAE,+BAAA,EAAiC;AAAA,QACxC,KAAK,YAAA,CAAa,KAAA;AAAA,QAClB,KAAA,EAAO,MAAM,KAAA,CAAM;AAAA,OACpB,CAAA;AAAA,IACH,CAAC,CAAA;AAED,IAAA,QAAA,CAAa;AAAA;AAAA;AAAA;AAAA,MAIX,GAAA;AAAA;AAAA;AAAA;AAAA,MAIA,KAAA;AAAA;AAAA;AAAA;AAAA,MAIA,QAAA;AAAA;AAAA;AAAA;AAAA,MAIA;AAAA,KACD,CAAA;;0BA1ECA,kBAAA;AAAA,QAiBM,KAAA;AAAA,QAAA;AAAA,UAjBA,KAAA,iBAAOC,KAAA,CAAA,OAAA,CAAO;AAAA;;UAClBC,kBAAA;AAAA,YAAsD,KAAA;AAAA,YAAA;AAAA,uBAA7C,KAAA;AAAA,cAAJ,GAAA,EAAI,GAAA;AAAA,cAAO,KAAA,iBAAOD,KAAA,CAAA,MAAA,CAAM,CAAA;AAAA,cAAG,OAAA,EAAK,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA;AAAA,2BAAEA,KAAA,CAAA,WAAA,KAAAA,KAAA,CAAA,WAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA;;;;;UACvCC,mBAcE,KAAA,EAAA;AAAA,qBAbI,OAAA;AAAA,YAAJ,GAAA,EAAI,KAAA;AAAA,YACH,KAAA,iBAAOD,KAAA,CAAA,QAAA,CAAQ,CAAA;AAAA,YACf,KAAA,iBAAOA,KAAA,CAAA,UAAA,CAAU,CAAA;AAAA,YACjB,cAAY,SAAA,CAAA,KAAA;AAAA,YACZ,eAAA,EAAeA,MAAA,YAAA,CAAA;AAAA,YACf,kBAAgB,aAAA,CAAA,KAAA;AAAA,YAChB,kBAAA,EAAkBE,IAAAA,CAAAA,QAAAA,GAAQ,UAAA,GAAA,YAAA;AAAA,YAC1B,eAAA,EAAe,QAAA;AAAA,YACf,eAAA,EAAe,QAAA;AAAA,YAChB,IAAA,EAAK,QAAA;AAAA,YACJ,QAAA,EAAUC,IAAAA,CAAAA,QAAAA,GAAW,MAAA,GAAS,CAAA;AAAA,YAC9B,iBAAeA,IAAAA,CAAAA,QAAAA;AAAAA,YACf,SAAA,EAAO,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA;AAAA,yBAAEH,KAAA,CAAA,aAAA,KAAAA,KAAA,CAAA,aAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA;;;;;;;;;;;"}
+{"version":3,"file":"hue-slider.vue2.mjs","sources":["../../../../../../../packages/components/color-picker-panel/src/components/hue-slider.vue"],"sourcesContent":["<template>\n  <div :class=\"rootKls\">\n    <div ref=\"bar\" :class=\"barKls\" @click=\"handleClick\" />\n    <div\n      ref=\"thumb\"\n      :class=\"thumbKls\"\n      :style=\"thumbStyle\"\n      :aria-label=\"ariaLabel\"\n      :aria-valuenow=\"currentValue\"\n      :aria-valuetext=\"ariaValuetext\"\n      :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n      :aria-valuemin=\"minValue\"\n      :aria-valuemax=\"maxValue\"\n      role=\"slider\"\n      :tabindex=\"disabled ? undefined : 0\"\n      :aria-disabled=\"disabled\"\n      @keydown=\"handleKeydown\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { useSlider, useSliderDOM } from '../composables/use-slider'\n\nimport type { HueSliderProps } from '../props/slider'\n\ndefineOptions({\n  name: 'ElColorHueSlider',\n})\n\nconst props = defineProps<HueSliderProps>()\nconst minValue = 0\nconst maxValue = 360\n\nconst { currentValue, bar, thumb, handleDrag, handleClick, handleKeydown } =\n  useSlider(props, { key: 'hue', minValue, maxValue })\n\nconst { rootKls, barKls, thumbKls, thumbStyle, thumbTop, update } =\n  useSliderDOM(props, {\n    namespace: 'color-hue-slider',\n    maxValue,\n    currentValue,\n    bar,\n    thumb,\n    handleDrag,\n  })\n\nconst { t } = useLocale()\n\nconst ariaLabel = computed(() => t('el.colorpicker.hueLabel'))\nconst ariaValuetext = computed(() => {\n  return t('el.colorpicker.hueDescription', {\n    hue: currentValue.value,\n    color: props.color.value,\n  })\n})\n\ndefineExpose({\n  /**\n   * @description bar element ref\n   */\n  bar,\n  /**\n   * @description thumb element ref\n   */\n  thumb,\n  /**\n   * @description thumb top position, only for vertical slider\n   */\n  thumbTop,\n  /**\n   * @description update hue slider manually\n   */\n  update,\n})\n</script>\n"],"names":["_createElementBlock","_unref","_createElementVNode"],"mappings":";;;;;AAiCA,MAAM,QAAA,GAAW,CAAA;AACjB,MAAM,QAAA,GAAW,GAAA;;;;;;;;;;;;AAFjB,IAAA,MAAM,KAAA,GAAQ,OAAA;AAId,IAAA,MAAM,EAAE,YAAA,EAAc,GAAA,EAAK,KAAA,EAAO,YAAY,WAAA,EAAa,aAAA,EAAc,GACvE,SAAA,CAAU,OAAO,EAAE,GAAA,EAAK,KAAA,EAAO,QAAA,EAAU,UAAU,CAAA;AAErD,IAAA,MAAM,EAAE,SAAS,MAAA,EAAQ,QAAA,EAAU,YAAY,QAAA,EAAU,MAAA,EAAO,GAC9D,YAAA,CAAa,KAAA,EAAO;AAAA,MAClB,SAAA,EAAW,kBAAA;AAAA,MACX,QAAA;AAAA,MACA,YAAA;AAAA,MACA,GAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IAAA,MAAM,EAAE,CAAA,EAAE,GAAI,SAAA,EAAU;AAExB,IAAA,MAAM,SAAA,GAAY,QAAA,CAAS,MAAM,CAAA,CAAE,yBAAyB,CAAC,CAAA;AAC7D,IAAA,MAAM,aAAA,GAAgB,SAAS,MAAM;AACnC,MAAA,OAAO,EAAE,+BAAA,EAAiC;AAAA,QACxC,KAAK,YAAA,CAAa,KAAA;AAAA,QAClB,KAAA,EAAO,MAAM,KAAA,CAAM;AAAA,OACpB,CAAA;AAAA,IACH,CAAC,CAAA;AAED,IAAA,QAAA,CAAa;AAAA;AAAA;AAAA;AAAA,MAIX,GAAA;AAAA;AAAA;AAAA;AAAA,MAIA,KAAA;AAAA;AAAA;AAAA;AAAA,MAIA,QAAA;AAAA;AAAA;AAAA;AAAA,MAIA;AAAA,KACD,CAAA;;0BA3ECA,kBAAA;AAAA,QAiBM,KAAA;AAAA,QAAA;AAAA,UAjBA,KAAA,iBAAOC,KAAA,CAAA,OAAA,CAAO;AAAA;;UAClBC,kBAAA;AAAA,YAAsD,KAAA;AAAA,YAAA;AAAA,uBAA7C,KAAA;AAAA,cAAJ,GAAA,EAAI,GAAA;AAAA,cAAO,KAAA,iBAAOD,KAAA,CAAA,MAAA,CAAM,CAAA;AAAA,cAAG,OAAA,EAAK,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA;AAAA,2BAAEA,KAAA,CAAA,WAAA,KAAAA,KAAA,CAAA,WAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA;;;;;UACvCC,mBAcE,KAAA,EAAA;AAAA,qBAbI,OAAA;AAAA,YAAJ,GAAA,EAAI,KAAA;AAAA,YACH,KAAA,iBAAOD,KAAA,CAAA,QAAA,CAAQ,CAAA;AAAA,YACf,KAAA,iBAAOA,KAAA,CAAA,UAAA,CAAU,CAAA;AAAA,YACjB,cAAY,SAAA,CAAA,KAAA;AAAA,YACZ,eAAA,EAAeA,MAAA,YAAA,CAAA;AAAA,YACf,kBAAgB,aAAA,CAAA,KAAA;AAAA,YAChB,kBAAA,EAAkB,OAAA,CAAA,QAAA,GAAQ,UAAA,GAAA,YAAA;AAAA,YAC1B,eAAA,EAAe,QAAA;AAAA,YACf,eAAA,EAAe,QAAA;AAAA,YAChB,IAAA,EAAK,QAAA;AAAA,YACJ,QAAA,EAAU,OAAA,CAAA,QAAA,GAAW,MAAA,GAAS,CAAA;AAAA,YAC9B,iBAAe,OAAA,CAAA,QAAA;AAAA,YACf,SAAA,EAAO,MAAA,CAAA,CAAA,CAAA,KAAA,OAAA,CAAA,CAAA;AAAA,yBAAEA,KAAA,CAAA,aAAA,KAAAA,KAAA,CAAA,aAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA;;;;;;;;;;;"}

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

@@ -1,45 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{
-    readonly colors: {
-        readonly type: import("vue").PropType<string[]>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly color: {
-        readonly type: import("vue").PropType<import("../utils/color").default>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly enableAlpha: {
-        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly disabled: BooleanConstructor;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly colors: {
-        readonly type: import("vue").PropType<string[]>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly color: {
-        readonly type: import("vue").PropType<import("../utils/color").default>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly enableAlpha: {
-        readonly type: import("vue").PropType<import("@element-plus/nightly/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
-        readonly required: true;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    readonly disabled: BooleanConstructor;
-}>>, {
-    readonly disabled: boolean;
-}, {}>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/es/components/color-picker-panel/src/components/predefine.vue2.mjs

@@ -1,5 +1,4 @@
 import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, Fragment, renderList, normalizeStyle } from 'vue';
-import { predefineProps } from '../props/predefine.mjs';
 import { usePredefine, usePredefineDOM } from '../composables/use-predefine.mjs';
 import { useLocale } from '../../../../hooks/use-locale/index.mjs';
 
@@ -9,7 +8,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     name: "ElColorPredefine"
   },
   __name: "predefine",
-  props: predefineProps,
+  props: {
+    colors: { type: Array, required: true },
+    color: { type: Object, required: true },
+    enableAlpha: { type: Boolean, required: true },
+    disabled: { type: Boolean, required: false }
+  },
   setup(__props) {
     const props = __props;
     const { rgbaColors, handleSelect } = usePredefine(props);
@@ -36,9 +40,9 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
                 null,
                 renderList(unref(rgbaColors), (item, index) => {
                   return openBlock(), createElementBlock("button", {
-                    key: _ctx.colors[index],
+                    key: __props.colors[index],
                     type: "button",
-                    disabled: _ctx.disabled,
+                    disabled: __props.disabled,
                     "aria-label": ariaLabel(item.value),
                     class: normalizeClass(unref(colorSelectorKls)(item)),
                     onClick: ($event) => unref(handleSelect)(index)