@element-plus/nightly 0.0.20241024 → 0.0.20241026

package/lib/components/collection/src/collection.js

@@ -3,68 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var collection = require('./collection2.js');
-var collectionItem = require('./collection-item.js');
+var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 
-const COLLECTION_ITEM_SIGN = `data-el-collection-item`;
-const createCollectionWithScope = (name) => {
-  const COLLECTION_NAME = `El${name}Collection`;
-  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`;
-  const COLLECTION_INJECTION_KEY = Symbol(COLLECTION_NAME);
-  const COLLECTION_ITEM_INJECTION_KEY = Symbol(COLLECTION_ITEM_NAME);
-  const ElCollection = {
-    ...collection["default"],
-    name: COLLECTION_NAME,
-    setup() {
-      const collectionRef = vue.ref(null);
-      const itemMap = /* @__PURE__ */ new Map();
-      const getItems = () => {
-        const collectionEl = vue.unref(collectionRef);
-        if (!collectionEl)
-          return [];
-        const orderedNodes = Array.from(collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`));
-        const items = [...itemMap.values()];
-        return items.sort((a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref));
-      };
-      vue.provide(COLLECTION_INJECTION_KEY, {
-        itemMap,
-        getItems,
-        collectionRef
-      });
-    }
-  };
-  const ElCollectionItem = {
-    ...collectionItem["default"],
-    name: COLLECTION_ITEM_NAME,
-    setup(_, { attrs }) {
-      const collectionItemRef = vue.ref(null);
-      const collectionInjection = vue.inject(COLLECTION_INJECTION_KEY, void 0);
-      vue.provide(COLLECTION_ITEM_INJECTION_KEY, {
-        collectionItemRef
-      });
-      vue.onMounted(() => {
-        const collectionItemEl = vue.unref(collectionItemRef);
-        if (collectionItemEl) {
-          collectionInjection.itemMap.set(collectionItemEl, {
-            ref: collectionItemEl,
-            ...attrs
-          });
-        }
-      });
-      vue.onBeforeUnmount(() => {
-        const collectionItemEl = vue.unref(collectionItemRef);
-        collectionInjection.itemMap.delete(collectionItemEl);
-      });
-    }
-  };
-  return {
-    COLLECTION_INJECTION_KEY,
-    COLLECTION_ITEM_INJECTION_KEY,
-    ElCollection,
-    ElCollectionItem
-  };
-};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  inheritAttrs: false
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.renderSlot(_ctx.$slots, "default");
+}
+var Collection = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "collection.vue"]]);
 
-exports.COLLECTION_ITEM_SIGN = COLLECTION_ITEM_SIGN;
-exports.createCollectionWithScope = createCollectionWithScope;
+exports["default"] = Collection;
 //# sourceMappingURL=collection.js.map

package/lib/components/collection/src/collection.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection.js","sources":["../../../../../../packages/components/collection/src/collection.ts"],"sourcesContent":["import { inject, onBeforeUnmount, onMounted, provide, ref, unref } from 'vue'\nimport Collection from './collection.vue'\nimport CollectionItem from './collection-item.vue'\n\nimport type { InjectionKey } from 'vue'\nimport type { SetupContext } from '@vue/runtime-core'\nimport type {\n  ElCollectionInjectionContext,\n  ElCollectionItemInjectionContext,\n} from './tokens'\n\nexport const COLLECTION_ITEM_SIGN = `data-el-collection-item`\n\n// Make sure the first letter of name is capitalized\nexport const createCollectionWithScope = (name: string) => {\n  const COLLECTION_NAME = `El${name}Collection`\n  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`\n  const COLLECTION_INJECTION_KEY: InjectionKey<ElCollectionInjectionContext> =\n    Symbol(COLLECTION_NAME)\n  const COLLECTION_ITEM_INJECTION_KEY: InjectionKey<ElCollectionItemInjectionContext> =\n    Symbol(COLLECTION_ITEM_NAME)\n\n  const ElCollection = {\n    ...Collection,\n    name: COLLECTION_NAME,\n    setup() {\n      const collectionRef = ref<HTMLElement | null>(null)\n      const itemMap: ElCollectionInjectionContext['itemMap'] = new Map()\n      const getItems = () => {\n        const collectionEl = unref(collectionRef)\n\n        if (!collectionEl) return []\n        const orderedNodes = Array.from(\n          collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`)\n        )\n\n        const items = [...itemMap.values()]\n\n        return items.sort(\n          (a, b) => orderedNodes.indexOf(a.ref!) - orderedNodes.indexOf(b.ref!)\n        )\n      }\n\n      provide(COLLECTION_INJECTION_KEY, {\n        itemMap,\n        getItems,\n        collectionRef,\n      })\n    },\n  }\n\n  const ElCollectionItem = {\n    ...CollectionItem,\n    name: COLLECTION_ITEM_NAME,\n    setup(_: unknown, { attrs }: SetupContext) {\n      const collectionItemRef = ref<HTMLElement | null>(null)\n      const collectionInjection = inject(COLLECTION_INJECTION_KEY, undefined)!\n\n      provide(COLLECTION_ITEM_INJECTION_KEY, {\n        collectionItemRef,\n      })\n\n      onMounted(() => {\n        const collectionItemEl = unref(collectionItemRef)\n        if (collectionItemEl) {\n          collectionInjection.itemMap.set(collectionItemEl, {\n            ref: collectionItemEl,\n            ...attrs,\n          })\n        }\n      })\n\n      onBeforeUnmount(() => {\n        const collectionItemEl = unref(collectionItemRef)!\n        collectionInjection.itemMap.delete(collectionItemEl)\n      })\n    },\n  }\n\n  return {\n    COLLECTION_INJECTION_KEY,\n    COLLECTION_ITEM_INJECTION_KEY,\n    ElCollection,\n    ElCollectionItem,\n  }\n}\n"],"names":["Collection","ref","unref","provide","CollectionItem","inject","onMounted","onBeforeUnmount"],"mappings":"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"}
+{"version":3,"file":"collection.js","sources":["../../../../../../packages/components/collection/src/collection.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({\n  inheritAttrs: false,\n})\n</script>\n"],"names":["DO_defineComponent","_renderSlot"],"mappings":";;;;;;;kCAKcA,mBAAA,CAAA;AAAA,EACZ,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;SANEC,cAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA,CAAA;;;;;;"}

package/lib/components/collection/src/collection2.js

@@ -3,15 +3,68 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var collection = require('./collection.js');
+var collectionItem = require('./collection-item.js');
 
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  inheritAttrs: false
-});
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return vue.renderSlot(_ctx.$slots, "default");
-}
-var Collection = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "collection.vue"]]);
+const COLLECTION_ITEM_SIGN = `data-el-collection-item`;
+const createCollectionWithScope = (name) => {
+  const COLLECTION_NAME = `El${name}Collection`;
+  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`;
+  const COLLECTION_INJECTION_KEY = Symbol(COLLECTION_NAME);
+  const COLLECTION_ITEM_INJECTION_KEY = Symbol(COLLECTION_ITEM_NAME);
+  const ElCollection = {
+    ...collection["default"],
+    name: COLLECTION_NAME,
+    setup() {
+      const collectionRef = vue.ref(null);
+      const itemMap = /* @__PURE__ */ new Map();
+      const getItems = () => {
+        const collectionEl = vue.unref(collectionRef);
+        if (!collectionEl)
+          return [];
+        const orderedNodes = Array.from(collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`));
+        const items = [...itemMap.values()];
+        return items.sort((a, b) => orderedNodes.indexOf(a.ref) - orderedNodes.indexOf(b.ref));
+      };
+      vue.provide(COLLECTION_INJECTION_KEY, {
+        itemMap,
+        getItems,
+        collectionRef
+      });
+    }
+  };
+  const ElCollectionItem = {
+    ...collectionItem["default"],
+    name: COLLECTION_ITEM_NAME,
+    setup(_, { attrs }) {
+      const collectionItemRef = vue.ref(null);
+      const collectionInjection = vue.inject(COLLECTION_INJECTION_KEY, void 0);
+      vue.provide(COLLECTION_ITEM_INJECTION_KEY, {
+        collectionItemRef
+      });
+      vue.onMounted(() => {
+        const collectionItemEl = vue.unref(collectionItemRef);
+        if (collectionItemEl) {
+          collectionInjection.itemMap.set(collectionItemEl, {
+            ref: collectionItemEl,
+            ...attrs
+          });
+        }
+      });
+      vue.onBeforeUnmount(() => {
+        const collectionItemEl = vue.unref(collectionItemRef);
+        collectionInjection.itemMap.delete(collectionItemEl);
+      });
+    }
+  };
+  return {
+    COLLECTION_INJECTION_KEY,
+    COLLECTION_ITEM_INJECTION_KEY,
+    ElCollection,
+    ElCollectionItem
+  };
+};
 
-exports["default"] = Collection;
+exports.COLLECTION_ITEM_SIGN = COLLECTION_ITEM_SIGN;
+exports.createCollectionWithScope = createCollectionWithScope;
 //# sourceMappingURL=collection2.js.map

package/lib/components/collection/src/collection2.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection2.js","sources":["../../../../../../packages/components/collection/src/collection.vue"],"sourcesContent":["<template>\n  <slot />\n</template>\n\n<script lang=\"ts\" setup>\ndefineOptions({\n  inheritAttrs: false,\n})\n</script>\n"],"names":["DO_defineComponent","_renderSlot"],"mappings":";;;;;;;kCAKcA,mBAAA,CAAA;AAAA,EACZ,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;SANEC,cAAQ,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA,CAAA;;;;;;"}
+{"version":3,"file":"collection2.js","sources":["../../../../../../packages/components/collection/src/collection.ts"],"sourcesContent":["import { inject, onBeforeUnmount, onMounted, provide, ref, unref } from 'vue'\nimport Collection from './collection.vue'\nimport CollectionItem from './collection-item.vue'\n\nimport type { InjectionKey } from 'vue'\nimport type { SetupContext } from '@vue/runtime-core'\nimport type {\n  ElCollectionInjectionContext,\n  ElCollectionItemInjectionContext,\n} from './tokens'\n\nexport const COLLECTION_ITEM_SIGN = `data-el-collection-item`\n\n// Make sure the first letter of name is capitalized\nexport const createCollectionWithScope = (name: string) => {\n  const COLLECTION_NAME = `El${name}Collection`\n  const COLLECTION_ITEM_NAME = `${COLLECTION_NAME}Item`\n  const COLLECTION_INJECTION_KEY: InjectionKey<ElCollectionInjectionContext> =\n    Symbol(COLLECTION_NAME)\n  const COLLECTION_ITEM_INJECTION_KEY: InjectionKey<ElCollectionItemInjectionContext> =\n    Symbol(COLLECTION_ITEM_NAME)\n\n  const ElCollection = {\n    ...Collection,\n    name: COLLECTION_NAME,\n    setup() {\n      const collectionRef = ref<HTMLElement | null>(null)\n      const itemMap: ElCollectionInjectionContext['itemMap'] = new Map()\n      const getItems = () => {\n        const collectionEl = unref(collectionRef)\n\n        if (!collectionEl) return []\n        const orderedNodes = Array.from(\n          collectionEl.querySelectorAll(`[${COLLECTION_ITEM_SIGN}]`)\n        )\n\n        const items = [...itemMap.values()]\n\n        return items.sort(\n          (a, b) => orderedNodes.indexOf(a.ref!) - orderedNodes.indexOf(b.ref!)\n        )\n      }\n\n      provide(COLLECTION_INJECTION_KEY, {\n        itemMap,\n        getItems,\n        collectionRef,\n      })\n    },\n  }\n\n  const ElCollectionItem = {\n    ...CollectionItem,\n    name: COLLECTION_ITEM_NAME,\n    setup(_: unknown, { attrs }: SetupContext) {\n      const collectionItemRef = ref<HTMLElement | null>(null)\n      const collectionInjection = inject(COLLECTION_INJECTION_KEY, undefined)!\n\n      provide(COLLECTION_ITEM_INJECTION_KEY, {\n        collectionItemRef,\n      })\n\n      onMounted(() => {\n        const collectionItemEl = unref(collectionItemRef)\n        if (collectionItemEl) {\n          collectionInjection.itemMap.set(collectionItemEl, {\n            ref: collectionItemEl,\n            ...attrs,\n          })\n        }\n      })\n\n      onBeforeUnmount(() => {\n        const collectionItemEl = unref(collectionItemRef)!\n        collectionInjection.itemMap.delete(collectionItemEl)\n      })\n    },\n  }\n\n  return {\n    COLLECTION_INJECTION_KEY,\n    COLLECTION_ITEM_INJECTION_KEY,\n    ElCollection,\n    ElCollectionItem,\n  }\n}\n"],"names":["Collection","ref","unref","provide","CollectionItem","inject","onMounted","onBeforeUnmount"],"mappings":"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"}

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('../../utils/index.js');
-var colorPicker$1 = require('./src/color-picker.js');
-var colorPicker = require('./src/color-picker2.js');
+var colorPicker$1 = require('./src/color-picker2.js');
+var colorPicker = require('./src/color-picker.js');
 var install = require('../../utils/vue/install.js');
 
 const ElColorPicker = install.withInstall(colorPicker$1["default"]);

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

@@ -2,410 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var vue = require('vue');
 var lodashUnified = require('lodash-unified');
-var index$5 = require('../../button/index.js');
-var index$7 = require('../../icon/index.js');
-require('../../../directives/index.js');
-var index$3 = require('../../tooltip/index.js');
-var index$4 = require('../../input/index.js');
-require('../../form/index.js');
+require('../../../utils/index.js');
 require('../../../hooks/index.js');
+require('../../tooltip/index.js');
 require('../../../constants/index.js');
-require('../../../utils/index.js');
-var iconsVue = require('@element-plus/icons-vue');
-var alphaSlider = require('./components/alpha-slider.js');
-var hueSlider = require('./components/hue-slider.js');
-var predefine = require('./components/predefine.js');
-var svPanel = require('./components/sv-panel.js');
-var color = require('./utils/color.js');
-var colorPicker = require('./color-picker2.js');
-var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
-var index = require('../../../hooks/use-locale/index.js');
-var index$1 = require('../../../hooks/use-namespace/index.js');
-var useFormItem = require('../../form/src/hooks/use-form-item.js');
-var useFormCommonProps = require('../../form/src/hooks/use-form-common-props.js');
-var index$2 = require('../../../hooks/use-focus-controller/index.js');
+var runtime = require('../../../utils/vue/props/runtime.js');
+var index = require('../../../hooks/use-size/index.js');
+var content = require('../../tooltip/src/content.js');
+var index$1 = require('../../../hooks/use-aria/index.js');
 var event = require('../../../constants/event.js');
-var error = require('../../../utils/error.js');
-var aria = require('../../../constants/aria.js');
-var index$6 = require('../../../directives/click-outside/index.js');
+var shared = require('@vue/shared');
 
-const __default__ = vue.defineComponent({
-  name: "ElColorPicker"
-});
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...__default__,
-  props: colorPicker.colorPickerProps,
-  emits: colorPicker.colorPickerEmits,
-  setup(__props, { expose, emit }) {
-    const props = __props;
-    const { t } = index.useLocale();
-    const ns = index$1.useNamespace("color");
-    const { formItem } = useFormItem.useFormItem();
-    const colorSize = useFormCommonProps.useFormSize();
-    const colorDisabled = useFormCommonProps.useFormDisabled();
-    const { inputId: buttonId, isLabeledByFormItem } = useFormItem.useFormItemInputId(props, {
-      formItemContext: formItem
-    });
-    const hue = vue.ref();
-    const sv = vue.ref();
-    const alpha = vue.ref();
-    const popper = vue.ref();
-    const triggerRef = vue.ref();
-    const inputRef = vue.ref();
-    const { isFocused, handleFocus, handleBlur } = index$2.useFocusController(triggerRef, {
-      beforeFocus() {
-        return colorDisabled.value;
-      },
-      beforeBlur(event) {
-        var _a;
-        return (_a = popper.value) == null ? void 0 : _a.isFocusInsideContent(event);
-      },
-      afterBlur() {
-        setShowPicker(false);
-        resetColor();
-      }
-    });
-    let shouldActiveChange = true;
-    const color$1 = vue.reactive(new color["default"]({
-      enableAlpha: props.showAlpha,
-      format: props.colorFormat || "",
-      value: props.modelValue
-    }));
-    const showPicker = vue.ref(false);
-    const showPanelColor = vue.ref(false);
-    const customInput = vue.ref("");
-    const displayedColor = vue.computed(() => {
-      if (!props.modelValue && !showPanelColor.value) {
-        return "transparent";
-      }
-      return displayedRgb(color$1, props.showAlpha);
-    });
-    const currentColor = vue.computed(() => {
-      return !props.modelValue && !showPanelColor.value ? "" : color$1.value;
-    });
-    const buttonAriaLabel = vue.computed(() => {
-      return !isLabeledByFormItem.value ? props.ariaLabel || t("el.colorpicker.defaultLabel") : void 0;
-    });
-    const buttonAriaLabelledby = vue.computed(() => {
-      return isLabeledByFormItem.value ? formItem == null ? void 0 : formItem.labelId : void 0;
-    });
-    const btnKls = vue.computed(() => {
-      return [
-        ns.b("picker"),
-        ns.is("disabled", colorDisabled.value),
-        ns.bm("picker", colorSize.value),
-        ns.is("focused", isFocused.value)
-      ];
-    });
-    function displayedRgb(color2, showAlpha) {
-      if (!(color2 instanceof color["default"])) {
-        throw new TypeError("color should be instance of _color Class");
-      }
-      const { r, g, b } = color2.toRgb();
-      return showAlpha ? `rgba(${r}, ${g}, ${b}, ${color2.get("alpha") / 100})` : `rgb(${r}, ${g}, ${b})`;
-    }
-    function setShowPicker(value) {
-      showPicker.value = value;
-    }
-    const debounceSetShowPicker = lodashUnified.debounce(setShowPicker, 100, { leading: true });
-    function show() {
-      if (colorDisabled.value)
-        return;
-      setShowPicker(true);
-    }
-    function hide() {
-      debounceSetShowPicker(false);
-      resetColor();
-    }
-    function resetColor() {
-      vue.nextTick(() => {
-        if (props.modelValue) {
-          color$1.fromString(props.modelValue);
-        } else {
-          color$1.value = "";
-          vue.nextTick(() => {
-            showPanelColor.value = false;
-          });
-        }
-      });
-    }
-    function handleTrigger() {
-      if (colorDisabled.value)
-        return;
-      debounceSetShowPicker(!showPicker.value);
-    }
-    function handleConfirm() {
-      color$1.fromString(customInput.value);
-    }
-    function confirmValue() {
-      const value = color$1.value;
-      emit(event.UPDATE_MODEL_EVENT, value);
-      emit("change", value);
-      if (props.validateEvent) {
-        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
-      }
-      debounceSetShowPicker(false);
-      vue.nextTick(() => {
-        const newColor = new color["default"]({
-          enableAlpha: props.showAlpha,
-          format: props.colorFormat || "",
-          value: props.modelValue
-        });
-        if (!color$1.compare(newColor)) {
-          resetColor();
-        }
-      });
-    }
-    function clear() {
-      debounceSetShowPicker(false);
-      emit(event.UPDATE_MODEL_EVENT, null);
-      emit("change", null);
-      if (props.modelValue !== null && props.validateEvent) {
-        formItem == null ? void 0 : formItem.validate("change").catch((err) => error.debugWarn(err));
-      }
-      resetColor();
-    }
-    function handleClickOutside() {
-      if (!showPicker.value)
-        return;
-      hide();
-      isFocused.value && focus();
-    }
-    function handleEsc(event) {
-      event.preventDefault();
-      event.stopPropagation();
-      setShowPicker(false);
-      resetColor();
-    }
-    function handleKeyDown(event) {
-      switch (event.code) {
-        case aria.EVENT_CODE.enter:
-        case aria.EVENT_CODE.space:
-          event.preventDefault();
-          event.stopPropagation();
-          show();
-          inputRef.value.focus();
-          break;
-        case aria.EVENT_CODE.esc:
-          handleEsc(event);
-          break;
-      }
-    }
-    function focus() {
-      triggerRef.value.focus();
-    }
-    function blur() {
-      triggerRef.value.blur();
-    }
-    vue.onMounted(() => {
-      if (props.modelValue) {
-        customInput.value = currentColor.value;
-      }
-    });
-    vue.watch(() => props.modelValue, (newVal) => {
-      if (!newVal) {
-        showPanelColor.value = false;
-      } else if (newVal && newVal !== color$1.value) {
-        shouldActiveChange = false;
-        color$1.fromString(newVal);
-      }
-    });
-    vue.watch(() => [props.colorFormat, props.showAlpha], () => {
-      color$1.enableAlpha = props.showAlpha;
-      color$1.format = props.colorFormat || color$1.format;
-      color$1.doOnChange();
-      emit(event.UPDATE_MODEL_EVENT, color$1.value);
-    });
-    vue.watch(() => currentColor.value, (val) => {
-      customInput.value = val;
-      shouldActiveChange && emit("activeChange", val);
-      shouldActiveChange = true;
-    });
-    vue.watch(() => color$1.value, () => {
-      if (!props.modelValue && !showPanelColor.value) {
-        showPanelColor.value = true;
-      }
-    });
-    vue.watch(() => showPicker.value, () => {
-      vue.nextTick(() => {
-        var _a, _b, _c;
-        (_a = hue.value) == null ? void 0 : _a.update();
-        (_b = sv.value) == null ? void 0 : _b.update();
-        (_c = alpha.value) == null ? void 0 : _c.update();
-      });
-    });
-    vue.provide(colorPicker.colorPickerContextKey, {
-      currentColor
-    });
-    expose({
-      color: color$1,
-      show,
-      hide,
-      focus,
-      blur
-    });
-    return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(index$3.ElTooltip), {
-        ref_key: "popper",
-        ref: popper,
-        visible: showPicker.value,
-        "show-arrow": false,
-        "fallback-placements": ["bottom", "top", "right", "left"],
-        offset: 0,
-        "gpu-acceleration": false,
-        "popper-class": [vue.unref(ns).be("picker", "panel"), vue.unref(ns).b("dropdown"), _ctx.popperClass],
-        "stop-popper-mouse-event": false,
-        effect: "light",
-        trigger: "click",
-        teleported: _ctx.teleported,
-        transition: `${vue.unref(ns).namespace.value}-zoom-in-top`,
-        persistent: "",
-        onHide: ($event) => setShowPicker(false)
-      }, {
-        content: vue.withCtx(() => [
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-            onKeydown: vue.withKeys(handleEsc, ["esc"])
-          }, [
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(vue.unref(ns).be("dropdown", "main-wrapper"))
-            }, [
-              vue.createVNode(hueSlider["default"], {
-                ref_key: "hue",
-                ref: hue,
-                class: "hue-slider",
-                color: vue.unref(color$1),
-                vertical: ""
-              }, null, 8, ["color"]),
-              vue.createVNode(svPanel["default"], {
-                ref_key: "sv",
-                ref: sv,
-                color: vue.unref(color$1)
-              }, null, 8, ["color"])
-            ], 2),
-            _ctx.showAlpha ? (vue.openBlock(), vue.createBlock(alphaSlider["default"], {
-              key: 0,
-              ref_key: "alpha",
-              ref: alpha,
-              color: vue.unref(color$1)
-            }, null, 8, ["color"])) : vue.createCommentVNode("v-if", true),
-            _ctx.predefine ? (vue.openBlock(), vue.createBlock(predefine["default"], {
-              key: 1,
-              ref: "predefine",
-              "enable-alpha": _ctx.showAlpha,
-              color: vue.unref(color$1),
-              colors: _ctx.predefine
-            }, null, 8, ["enable-alpha", "color", "colors"])) : vue.createCommentVNode("v-if", true),
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btns"))
-            }, [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass(vue.unref(ns).be("dropdown", "value"))
-              }, [
-                vue.createVNode(vue.unref(index$4.ElInput), {
-                  ref_key: "inputRef",
-                  ref: inputRef,
-                  modelValue: customInput.value,
-                  "onUpdate:modelValue": ($event) => customInput.value = $event,
-                  "validate-event": false,
-                  size: "small",
-                  onKeyup: vue.withKeys(handleConfirm, ["enter"]),
-                  onBlur: handleConfirm
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "onKeyup"])
-              ], 2),
-              vue.createVNode(vue.unref(index$5.ElButton), {
-                class: vue.normalizeClass(vue.unref(ns).be("dropdown", "link-btn")),
-                text: "",
-                size: "small",
-                onClick: clear
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.colorpicker.clear")), 1)
-                ]),
-                _: 1
-              }, 8, ["class"]),
-              vue.createVNode(vue.unref(index$5.ElButton), {
-                plain: "",
-                size: "small",
-                class: vue.normalizeClass(vue.unref(ns).be("dropdown", "btn")),
-                onClick: confirmValue
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(vue.unref(t)("el.colorpicker.confirm")), 1)
-                ]),
-                _: 1
-              }, 8, ["class"])
-            ], 2)
-          ], 40, ["onKeydown"])), [
-            [vue.unref(index$6["default"]), handleClickOutside]
-          ])
-        ]),
-        default: vue.withCtx(() => [
-          vue.createElementVNode("div", vue.mergeProps({
-            id: vue.unref(buttonId),
-            ref_key: "triggerRef",
-            ref: triggerRef
-          }, _ctx.$attrs, {
-            class: vue.unref(btnKls),
-            role: "button",
-            "aria-label": vue.unref(buttonAriaLabel),
-            "aria-labelledby": vue.unref(buttonAriaLabelledby),
-            "aria-description": vue.unref(t)("el.colorpicker.description", { color: _ctx.modelValue || "" }),
-            "aria-disabled": vue.unref(colorDisabled),
-            tabindex: vue.unref(colorDisabled) ? -1 : _ctx.tabindex,
-            onKeydown: handleKeyDown,
-            onFocus: vue.unref(handleFocus),
-            onBlur: vue.unref(handleBlur)
-          }), [
-            vue.unref(colorDisabled) ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: vue.normalizeClass(vue.unref(ns).be("picker", "mask"))
-            }, null, 2)) : vue.createCommentVNode("v-if", true),
-            vue.createElementVNode("div", {
-              class: vue.normalizeClass(vue.unref(ns).be("picker", "trigger")),
-              onClick: handleTrigger
-            }, [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass([vue.unref(ns).be("picker", "color"), vue.unref(ns).is("alpha", _ctx.showAlpha)])
-              }, [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(vue.unref(ns).be("picker", "color-inner")),
-                  style: vue.normalizeStyle({
-                    backgroundColor: vue.unref(displayedColor)
-                  })
-                }, [
-                  vue.withDirectives(vue.createVNode(vue.unref(index$7.ElIcon), {
-                    class: vue.normalizeClass([vue.unref(ns).be("picker", "icon"), vue.unref(ns).is("icon-arrow-down")])
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.ArrowDown))
-                    ]),
-                    _: 1
-                  }, 8, ["class"]), [
-                    [vue.vShow, _ctx.modelValue || showPanelColor.value]
-                  ]),
-                  vue.withDirectives(vue.createVNode(vue.unref(index$7.ElIcon), {
-                    class: vue.normalizeClass([vue.unref(ns).be("picker", "empty"), vue.unref(ns).is("icon-close")])
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createVNode(vue.unref(iconsVue.Close))
-                    ]),
-                    _: 1
-                  }, 8, ["class"]), [
-                    [vue.vShow, !_ctx.modelValue && !showPanelColor.value]
-                  ])
-                ], 6)
-              ], 2)
-            ], 2)
-          ], 16, ["id", "aria-label", "aria-labelledby", "aria-description", "aria-disabled", "tabindex", "onFocus", "onBlur"])
-        ]),
-        _: 1
-      }, 8, ["visible", "popper-class", "teleported", "transition", "onHide"]);
-    };
-  }
+const colorPickerProps = runtime.buildProps({
+  modelValue: String,
+  id: String,
+  showAlpha: Boolean,
+  colorFormat: String,
+  disabled: Boolean,
+  size: index.useSizeProp,
+  popperClass: {
+    type: String,
+    default: ""
+  },
+  tabindex: {
+    type: [String, Number],
+    default: 0
+  },
+  teleported: content.useTooltipContentProps.teleported,
+  predefine: {
+    type: runtime.definePropType(Array)
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  ...index$1.useAriaProps(["ariaLabel"])
 });
-var ColorPicker = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "color-picker.vue"]]);
+const colorPickerEmits = {
+  [event.UPDATE_MODEL_EVENT]: (val) => shared.isString(val) || lodashUnified.isNil(val),
+  [event.CHANGE_EVENT]: (val) => shared.isString(val) || lodashUnified.isNil(val),
+  activeChange: (val) => shared.isString(val) || lodashUnified.isNil(val),
+  focus: (evt) => evt instanceof FocusEvent,
+  blur: (evt) => evt instanceof FocusEvent
+};
+const colorPickerContextKey = Symbol("colorPickerContextKey");
 
-exports["default"] = ColorPicker;
+exports.colorPickerContextKey = colorPickerContextKey;
+exports.colorPickerEmits = colorPickerEmits;
+exports.colorPickerProps = colorPickerProps;
 //# sourceMappingURL=color-picker.js.map