element-plus 2.2.12 → 2.2.13

package/es/components/popconfirm/src/popconfirm2.mjs

@@ -1,12 +1,14 @@
-import { defineComponent, ref, computed, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, normalizeStyle, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, renderSlot } from 'vue';
+import { defineComponent, ref, computed, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, normalizeClass, normalizeStyle, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, renderSlot } from 'vue';
 import { ElButton } from '../../button/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
 import { ElTooltip } from '../../tooltip/index.mjs';
 import '../../../hooks/index.mjs';
+import '../../../utils/index.mjs';
 import { popconfirmProps } from './popconfirm.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { addUnit } from '../../../utils/dom/style.mjs';
 
 const __default__ = {
   name: "ElPopconfirm"
@@ -23,6 +25,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       var _a, _b;
       (_b = (_a = tooltipRef.value) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a);
     };
+    const style = computed(() => {
+      return {
+        width: addUnit(props.width)
+      };
+    });
     const confirm = (e) => {
       var _a;
       (_a = props.onConfirm) == null ? void 0 : _a.call(props, e);
@@ -36,17 +43,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const finalConfirmButtonText = computed(() => props.confirmButtonText || t("el.popconfirm.confirmButtonText"));
     const finalCancelButtonText = computed(() => props.cancelButtonText || t("el.popconfirm.cancelButtonText"));
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ElTooltip), {
+      return openBlock(), createBlock(unref(ElTooltip), mergeProps({
         ref_key: "tooltipRef",
         ref: tooltipRef,
         trigger: "click",
-        effect: "light",
+        effect: "light"
+      }, _ctx.$attrs, {
         "popper-class": `${unref(ns).namespace.value}-popover`,
+        "popper-style": unref(style),
         teleported: _ctx.teleported,
         "fallback-placements": ["bottom", "top", "right", "left"],
         "hide-after": _ctx.hideAfter,
         persistent: _ctx.persistent
-      }, {
+      }), {
         content: withCtx(() => [
           createElementVNode("div", {
             class: normalizeClass(unref(ns).b())
@@ -98,7 +107,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : createCommentVNode("v-if", true)
         ]),
         _: 3
-      }, 8, ["popper-class", "teleported", "hide-after", "persistent"]);
+      }, 16, ["popper-class", "popper-style", "teleported", "hide-after", "persistent"]);
     };
   }
 });

package/es/components/popconfirm/src/popconfirm2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popconfirm2.mjs","sources":["../../../../../../packages/components/popconfirm/src/popconfirm.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    trigger=\"click\"\n    effect=\"light\"\n    :popper-class=\"`${ns.namespace.value}-popover`\"\n    :teleported=\"teleported\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :hide-after=\"hideAfter\"\n    :persistent=\"persistent\"\n  >\n    <template #content>\n      <div :class=\"ns.b()\">\n        <div :class=\"ns.e('main')\">\n          <el-icon\n            v-if=\"!hideIcon && icon\"\n            :class=\"ns.e('icon')\"\n            :style=\"{ color: iconColor }\"\n          >\n            <component :is=\"icon\" />\n          </el-icon>\n          {{ title }}\n        </div>\n        <div :class=\"ns.e('action')\">\n          <el-button\n            size=\"small\"\n            :type=\"cancelButtonType === 'text' ? '' : cancelButtonType\"\n            :text=\"cancelButtonType === 'text'\"\n            @click=\"cancel\"\n          >\n            {{ finalCancelButtonText }}\n          </el-button>\n          <el-button\n            size=\"small\"\n            :type=\"confirmButtonType === 'text' ? '' : confirmButtonType\"\n            :text=\"confirmButtonType === 'text'\"\n            @click=\"confirm\"\n          >\n            {{ finalConfirmButtonText }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"$slots.reference\">\n      <slot name=\"reference\" />\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { popconfirmProps } from './popconfirm'\n\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n  name: 'ElPopconfirm',\n})\n\nconst props = defineProps(popconfirmProps)\n\nconst { t } = useLocale()\nconst ns = useNamespace('popconfirm')\nconst tooltipRef = ref<TooltipInstance>()\n\nconst hidePopper = () => {\n  tooltipRef.value?.onClose?.()\n}\n\nconst confirm = (e: Event) => {\n  props.onConfirm?.(e)\n  hidePopper()\n}\nconst cancel = (e: Event) => {\n  props.onCancel?.(e)\n  hidePopper()\n}\n\nconst finalConfirmButtonText = computed(\n  () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')\n)\nconst finalCancelButtonText = computed(\n  () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')\n)\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAiEA,IAAA,MAAA,EAAA,MAAA,SAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAA,aAAA,YAAA,CAAA,CAAA;AACA,IAAA,MAAA,aAAA,GAAA,EAAA,CAAA;AAEA,IAAA,MAAA,aAAA,MAAA;AACA,MAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAAA,MACA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA;AAEA,KAAA,CAAA;AACA,IAAA,MAAA,iBAAA;AACA,MAAA,IAAA,EAAA,CAAA;AAAA,MACA,CAAA,EAAA,GAAA,KAAA,CAAA,SAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA;AACA,MAAA,UAAA,EAAA,CAAA;AACA,KAAA,CAAA;AACA,IAAA,MAAA,MAAA,GAAA,CAAA,CAAA,KAAA;AAAA,MACA,IAAA,EAAA,CAAA;AAEA,MAAA,CAAA,EAAA,0BAAA,GACA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAEA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"popconfirm2.mjs","sources":["../../../../../../packages/components/popconfirm/src/popconfirm.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    trigger=\"click\"\n    effect=\"light\"\n    v-bind=\"$attrs\"\n    :popper-class=\"`${ns.namespace.value}-popover`\"\n    :popper-style=\"style\"\n    :teleported=\"teleported\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :hide-after=\"hideAfter\"\n    :persistent=\"persistent\"\n  >\n    <template #content>\n      <div :class=\"ns.b()\">\n        <div :class=\"ns.e('main')\">\n          <el-icon\n            v-if=\"!hideIcon && icon\"\n            :class=\"ns.e('icon')\"\n            :style=\"{ color: iconColor }\"\n          >\n            <component :is=\"icon\" />\n          </el-icon>\n          {{ title }}\n        </div>\n        <div :class=\"ns.e('action')\">\n          <el-button\n            size=\"small\"\n            :type=\"cancelButtonType === 'text' ? '' : cancelButtonType\"\n            :text=\"cancelButtonType === 'text'\"\n            @click=\"cancel\"\n          >\n            {{ finalCancelButtonText }}\n          </el-button>\n          <el-button\n            size=\"small\"\n            :type=\"confirmButtonType === 'text' ? '' : confirmButtonType\"\n            :text=\"confirmButtonType === 'text'\"\n            @click=\"confirm\"\n          >\n            {{ finalConfirmButtonText }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"$slots.reference\">\n      <slot name=\"reference\" />\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref } from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { addUnit } from '@element-plus/utils'\nimport { popconfirmProps } from './popconfirm'\n\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\n\ndefineOptions({\n  name: 'ElPopconfirm',\n})\n\nconst props = defineProps(popconfirmProps)\n\nconst { t } = useLocale()\nconst ns = useNamespace('popconfirm')\nconst tooltipRef = ref<TooltipInstance>()\n\nconst hidePopper = () => {\n  tooltipRef.value?.onClose?.()\n}\n\nconst style = computed(() => {\n  return {\n    width: addUnit(props.width),\n  }\n})\n\nconst confirm = (e: Event) => {\n  props.onConfirm?.(e)\n  hidePopper()\n}\nconst cancel = (e: Event) => {\n  props.onCancel?.(e)\n  hidePopper()\n}\n\nconst finalConfirmButtonText = computed(\n  () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')\n)\nconst finalCancelButtonText = computed(\n  () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')\n)\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAoEA,IAAA,MAAA,EAAA,MAAA,SAAA,EAAA,CAAA;AACA,IAAA,MAAA,EAAA,GAAA,aAAA,YAAA,CAAA,CAAA;AACA,IAAA,MAAA,aAAA,GAAA,EAAA,CAAA;AAEA,IAAA,MAAA,aAAA,MAAA;AACA,MAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAAA,MACA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,UAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,OAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,CAAA;AAEA,KAAA,CAAA;AACA,IAAA,MAAA,KAAA,GAAA,QAAA,CAAA,MAAA;AAAA,MACA,OAAA;AAAA,QACA,KAAA,EAAA,OAAA,CAAA,KAAA,CAAA,KAAA,CAAA;AAAA,OACA,CAAA;AAEA,KAAA,CAAA,CAAA;AACA,IAAA,MAAA,iBAAA;AACA,MAAA,IAAA,EAAA,CAAA;AAAA,MACA,CAAA,EAAA,GAAA,KAAA,CAAA,SAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA;AACA,MAAA,UAAA,EAAA,CAAA;AACA,KAAA,CAAA;AACA,IAAA,MAAA,MAAA,GAAA,CAAA,CAAA,KAAA;AAAA,MACA,IAAA,EAAA,CAAA;AAEA,MAAA,CAAA,EAAA,0BAAA,GACA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAA,EAAA,CAAA,CAAA,CAAA;AAEA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/components/select/src/useSelect.d.ts

@@ -1,6 +1,5 @@
 import { nextTick } from 'vue';
 import type { ComponentPublicInstance } from 'vue';
-import type { FormItemContext } from 'element-plus/es/tokens';
 import type { QueryChangeCtx, SelectOptionProxy } from './token';
 export declare function useSelectStates(props: any): {
     options: Map<any, any>;
@@ -129,7 +128,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             trigger: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => ("focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) & {}) | (() => "focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) | ((new (...args: any[]) => ("focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) & {}) | (() => "focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]))[], unknown, unknown, "hover", boolean>;
             triggerKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => string[], boolean>;
             virtualRef: {
-                readonly type: import("vue").PropType<import("element-plus/es/tokens").Measurable>;
+                readonly type: import("vue").PropType<import("../../..").Measurable>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -439,7 +438,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             trigger: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => ("focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) & {}) | (() => "focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) | ((new (...args: any[]) => ("focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) & {}) | (() => "focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]))[], unknown, unknown, "hover", boolean>;
             triggerKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => string[], boolean>;
             virtualRef: {
-                readonly type: import("vue").PropType<import("element-plus/es/tokens").Measurable>;
+                readonly type: import("vue").PropType<import("../../..").Measurable>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
@@ -757,7 +756,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                     contentRef: import("vue").Ref<HTMLElement | undefined>;
                     referenceRef: import("vue").Ref<HTMLElement | undefined>;
                     role: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") | ((new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree"))[], unknown, unknown>>;
-                    popperProvides: import("element-plus/es/tokens").ElPopperInjectionContext;
+                    popperProvides: import("../../..").ElPopperInjectionContext;
                 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
                     readonly role: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") | ((new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree"))[], unknown, unknown>;
                 }> & {
@@ -793,7 +792,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                 contentRef: import("vue").Ref<HTMLElement | undefined>;
                 referenceRef: import("vue").Ref<HTMLElement | undefined>;
                 role: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") | ((new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree"))[], unknown, unknown>>;
-                popperProvides: import("element-plus/es/tokens").ElPopperInjectionContext;
+                popperProvides: import("../../..").ElPopperInjectionContext;
             }> & {} & import("vue").ComponentCustomProperties) | null>;
             contentRef: import("vue").Ref<({
                 $: import("vue").ComponentInternalInstance;
@@ -2151,9 +2150,9 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                             }>>;
                             popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                             contentRef: import("vue").Ref<HTMLElement | undefined>;
-                            triggerRef: import("vue").Ref<import("element-plus/es/tokens").Measurable | undefined>;
+                            triggerRef: import("vue").Ref<import("../../..").Measurable | undefined>;
                             role: import("vue").ComputedRef<string>;
-                            formItemContext: FormItemContext | undefined;
+                            formItemContext: import("../../..").FormItemContext | undefined;
                             nextZIndex: () => number;
                             ns: {
                                 namespace: import("vue").ComputedRef<string>;
@@ -2180,7 +2179,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                             contentZIndex: import("vue").Ref<number>;
                             trapped: import("vue").Ref<boolean>;
                             triggerTargetAriaStopWatch: undefined;
-                            computedReference: import("vue").ComputedRef<import("element-plus/es/tokens").Measurable | undefined>;
+                            computedReference: import("vue").ComputedRef<import("../../..").Measurable | undefined>;
                             contentStyle: import("vue").ComputedRef<any>;
                             contentClass: import("vue").ComputedRef<((string | {
                                 [x: string]: boolean;
@@ -2790,9 +2789,9 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                         }>>;
                         popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                         contentRef: import("vue").Ref<HTMLElement | undefined>;
-                        triggerRef: import("vue").Ref<import("element-plus/es/tokens").Measurable | undefined>;
+                        triggerRef: import("vue").Ref<import("../../..").Measurable | undefined>;
                         role: import("vue").ComputedRef<string>;
-                        formItemContext: FormItemContext | undefined;
+                        formItemContext: import("../../..").FormItemContext | undefined;
                         nextZIndex: () => number;
                         ns: {
                             namespace: import("vue").ComputedRef<string>;
@@ -2819,7 +2818,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                         contentZIndex: import("vue").Ref<number>;
                         trapped: import("vue").Ref<boolean>;
                         triggerTargetAriaStopWatch: undefined;
-                        computedReference: import("vue").ComputedRef<import("element-plus/es/tokens").Measurable | undefined>;
+                        computedReference: import("vue").ComputedRef<import("../../..").Measurable | undefined>;
                         contentStyle: import("vue").ComputedRef<any>;
                         contentClass: import("vue").ComputedRef<((string | {
                             [x: string]: boolean;
@@ -4000,9 +3999,9 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                         }>>;
                         popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                         contentRef: import("vue").Ref<HTMLElement | undefined>;
-                        triggerRef: import("vue").Ref<import("element-plus/es/tokens").Measurable | undefined>;
+                        triggerRef: import("vue").Ref<import("../../..").Measurable | undefined>;
                         role: import("vue").ComputedRef<string>;
-                        formItemContext: FormItemContext | undefined;
+                        formItemContext: import("../../..").FormItemContext | undefined;
                         nextZIndex: () => number;
                         ns: {
                             namespace: import("vue").ComputedRef<string>;
@@ -4029,7 +4028,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                         contentZIndex: import("vue").Ref<number>;
                         trapped: import("vue").Ref<boolean>;
                         triggerTargetAriaStopWatch: undefined;
-                        computedReference: import("vue").ComputedRef<import("element-plus/es/tokens").Measurable | undefined>;
+                        computedReference: import("vue").ComputedRef<import("../../..").Measurable | undefined>;
                         contentStyle: import("vue").ComputedRef<any>;
                         contentClass: import("vue").ComputedRef<((string | {
                             [x: string]: boolean;
@@ -4639,9 +4638,9 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                     }>>;
                     popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                     contentRef: import("vue").Ref<HTMLElement | undefined>;
-                    triggerRef: import("vue").Ref<import("element-plus/es/tokens").Measurable | undefined>;
+                    triggerRef: import("vue").Ref<import("../../..").Measurable | undefined>;
                     role: import("vue").ComputedRef<string>;
-                    formItemContext: FormItemContext | undefined;
+                    formItemContext: import("../../..").FormItemContext | undefined;
                     nextZIndex: () => number;
                     ns: {
                         namespace: import("vue").ComputedRef<string>;
@@ -4668,7 +4667,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                     contentZIndex: import("vue").Ref<number>;
                     trapped: import("vue").Ref<boolean>;
                     triggerTargetAriaStopWatch: undefined;
-                    computedReference: import("vue").ComputedRef<import("element-plus/es/tokens").Measurable | undefined>;
+                    computedReference: import("vue").ComputedRef<import("../../..").Measurable | undefined>;
                     contentStyle: import("vue").ComputedRef<any>;
                     contentClass: import("vue").ComputedRef<((string | {
                         [x: string]: boolean;
@@ -4825,7 +4824,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
         trigger: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => ("focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) & {}) | (() => "focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) | ((new (...args: any[]) => ("focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]) & {}) | (() => "focus" | "hover" | "click" | "contextmenu" | ("focus" | "hover" | "click" | "contextmenu")[]))[], unknown, unknown, "hover", boolean>;
         triggerKeys: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => string[], boolean>;
         virtualRef: {
-            readonly type: import("vue").PropType<import("element-plus/es/tokens").Measurable>;
+            readonly type: import("vue").PropType<import("../../..").Measurable>;
             readonly required: false;
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
@@ -5143,7 +5142,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                 contentRef: import("vue").Ref<HTMLElement | undefined>;
                 referenceRef: import("vue").Ref<HTMLElement | undefined>;
                 role: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") | ((new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree"))[], unknown, unknown>>;
-                popperProvides: import("element-plus/es/tokens").ElPopperInjectionContext;
+                popperProvides: import("../../..").ElPopperInjectionContext;
             }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
                 readonly role: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") | ((new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree"))[], unknown, unknown>;
             }> & {
@@ -5179,7 +5178,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
             contentRef: import("vue").Ref<HTMLElement | undefined>;
             referenceRef: import("vue").Ref<HTMLElement | undefined>;
             role: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") | ((new (...args: any[]) => ("listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree") & {}) | (() => "listbox" | "grid" | "menu" | "tooltip" | "dialog" | "tree"))[], unknown, unknown>>;
-            popperProvides: import("element-plus/es/tokens").ElPopperInjectionContext;
+            popperProvides: import("../../..").ElPopperInjectionContext;
         }> & {} & import("vue").ComponentCustomProperties) | null>;
         contentRef: import("vue").Ref<({
             $: import("vue").ComponentInternalInstance;
@@ -6537,9 +6536,9 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                         }>>;
                         popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                         contentRef: import("vue").Ref<HTMLElement | undefined>;
-                        triggerRef: import("vue").Ref<import("element-plus/es/tokens").Measurable | undefined>;
+                        triggerRef: import("vue").Ref<import("../../..").Measurable | undefined>;
                         role: import("vue").ComputedRef<string>;
-                        formItemContext: FormItemContext | undefined;
+                        formItemContext: import("../../..").FormItemContext | undefined;
                         nextZIndex: () => number;
                         ns: {
                             namespace: import("vue").ComputedRef<string>;
@@ -6566,7 +6565,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                         contentZIndex: import("vue").Ref<number>;
                         trapped: import("vue").Ref<boolean>;
                         triggerTargetAriaStopWatch: undefined;
-                        computedReference: import("vue").ComputedRef<import("element-plus/es/tokens").Measurable | undefined>;
+                        computedReference: import("vue").ComputedRef<import("../../..").Measurable | undefined>;
                         contentStyle: import("vue").ComputedRef<any>;
                         contentClass: import("vue").ComputedRef<((string | {
                             [x: string]: boolean;
@@ -7176,9 +7175,9 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                     }>>;
                     popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                     contentRef: import("vue").Ref<HTMLElement | undefined>;
-                    triggerRef: import("vue").Ref<import("element-plus/es/tokens").Measurable | undefined>;
+                    triggerRef: import("vue").Ref<import("../../..").Measurable | undefined>;
                     role: import("vue").ComputedRef<string>;
-                    formItemContext: FormItemContext | undefined;
+                    formItemContext: import("../../..").FormItemContext | undefined;
                     nextZIndex: () => number;
                     ns: {
                         namespace: import("vue").ComputedRef<string>;
@@ -7205,7 +7204,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                     contentZIndex: import("vue").Ref<number>;
                     trapped: import("vue").Ref<boolean>;
                     triggerTargetAriaStopWatch: undefined;
-                    computedReference: import("vue").ComputedRef<import("element-plus/es/tokens").Measurable | undefined>;
+                    computedReference: import("vue").ComputedRef<import("../../..").Measurable | undefined>;
                     contentStyle: import("vue").ComputedRef<any>;
                     contentClass: import("vue").ComputedRef<((string | {
                         [x: string]: boolean;
@@ -8386,9 +8385,9 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                     }>>;
                     popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                     contentRef: import("vue").Ref<HTMLElement | undefined>;
-                    triggerRef: import("vue").Ref<import("element-plus/es/tokens").Measurable | undefined>;
+                    triggerRef: import("vue").Ref<import("../../..").Measurable | undefined>;
                     role: import("vue").ComputedRef<string>;
-                    formItemContext: FormItemContext | undefined;
+                    formItemContext: import("../../..").FormItemContext | undefined;
                     nextZIndex: () => number;
                     ns: {
                         namespace: import("vue").ComputedRef<string>;
@@ -8415,7 +8414,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                     contentZIndex: import("vue").Ref<number>;
                     trapped: import("vue").Ref<boolean>;
                     triggerTargetAriaStopWatch: undefined;
-                    computedReference: import("vue").ComputedRef<import("element-plus/es/tokens").Measurable | undefined>;
+                    computedReference: import("vue").ComputedRef<import("../../..").Measurable | undefined>;
                     contentStyle: import("vue").ComputedRef<any>;
                     contentClass: import("vue").ComputedRef<((string | {
                         [x: string]: boolean;
@@ -9025,9 +9024,9 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                 }>>;
                 popperInstanceRef: import("vue").Ref<import("@popperjs/core").Instance | undefined>;
                 contentRef: import("vue").Ref<HTMLElement | undefined>;
-                triggerRef: import("vue").Ref<import("element-plus/es/tokens").Measurable | undefined>;
+                triggerRef: import("vue").Ref<import("../../..").Measurable | undefined>;
                 role: import("vue").ComputedRef<string>;
-                formItemContext: FormItemContext | undefined;
+                formItemContext: import("../../..").FormItemContext | undefined;
                 nextZIndex: () => number;
                 ns: {
                     namespace: import("vue").ComputedRef<string>;
@@ -9054,7 +9053,7 @@ export declare const useSelect: (props: any, states: States, ctx: any) => {
                 contentZIndex: import("vue").Ref<number>;
                 trapped: import("vue").Ref<boolean>;
                 triggerTargetAriaStopWatch: undefined;
-                computedReference: import("vue").ComputedRef<import("element-plus/es/tokens").Measurable | undefined>;
+                computedReference: import("vue").ComputedRef<import("../../..").Measurable | undefined>;
                 contentStyle: import("vue").ComputedRef<any>;
                 contentClass: import("vue").ComputedRef<((string | {
                     [x: string]: boolean;

package/es/components/select/src/useSelect.mjs

@@ -1,14 +1,13 @@
-import { reactive, ref, shallowRef, inject, computed, watch, nextTick, triggerRef } from 'vue';
+import { reactive, ref, shallowRef, computed, watch, nextTick, triggerRef } from 'vue';
 import { toRawType, isObject } from '@vue/shared';
 import { isEqual, get, debounce } from 'lodash-unified';
 import { isClient } from '@vueuse/core';
 import '../../../constants/index.mjs';
 import '../../../utils/index.mjs';
 import '../../../hooks/index.mjs';
-import '../../../tokens/index.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
 import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { formContextKey, formItemContextKey } from '../../../tokens/form.mjs';
+import { useFormItem } from '../../../hooks/use-form-item/index.mjs';
 import { useSize } from '../../../hooks/use-common-props/index.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
 import { getComponentSize } from '../../../utils/vue/size.mjs';
@@ -57,10 +56,9 @@ const useSelect = (props, states, ctx) => {
   const hoverOption = ref(-1);
   const queryChange = shallowRef({ query: "" });
   const groupQueryChange = shallowRef("");
-  const elForm = inject(formContextKey, {});
-  const elFormItem = inject(formItemContextKey, {});
+  const { form, formItem } = useFormItem();
   const readonly = computed(() => !props.filterable || props.multiple || !states.visible);
-  const selectDisabled = computed(() => props.disabled || elForm.disabled);
+  const selectDisabled = computed(() => props.disabled || (form == null ? void 0 : form.disabled));
   const showClose = computed(() => {
     const hasValue = props.multiple ? Array.isArray(props.modelValue) && props.modelValue.length > 0 : props.modelValue !== void 0 && props.modelValue !== null && props.modelValue !== "";
     const criteria = props.clearable && !selectDisabled.value && states.inputHovering && hasValue;
@@ -104,7 +102,7 @@ const useSelect = (props, states, ctx) => {
       states.visible = val;
     }
   });
-  watch([() => selectDisabled.value, () => selectSize.value, () => elForm.size], () => {
+  watch([() => selectDisabled.value, () => selectSize.value, () => form == null ? void 0 : form.size], () => {
     nextTick(() => {
       resetInputHeight();
     });
@@ -113,7 +111,6 @@ const useSelect = (props, states, ctx) => {
     states.cachedPlaceHolder = states.currentPlaceholder = val;
   });
   watch(() => props.modelValue, (val, oldVal) => {
-    var _a;
     if (props.multiple) {
       resetInputHeight();
       if (val && val.length > 0 || input.value && states.query !== "") {
@@ -131,7 +128,7 @@ const useSelect = (props, states, ctx) => {
       states.inputLength = 20;
     }
     if (!isEqual(val, oldVal) && props.validateEvent) {
-      (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn(err));
+      formItem == null ? void 0 : formItem.validate("change").catch((err) => debugWarn(err));
     }
   }, {
     flush: "post",
@@ -224,7 +221,7 @@ const useSelect = (props, states, ctx) => {
         return;
       const input2 = reference.value.$el.querySelector("input");
       const _tags = tags.value;
-      const sizeInMap = getComponentSize(selectSize.value || elForm.size);
+      const sizeInMap = getComponentSize(selectSize.value || (form == null ? void 0 : form.size));
       input2.style.height = `${(states.selected.length === 0 ? sizeInMap : Math.max(_tags ? _tags.clientHeight + (_tags.clientHeight > sizeInMap ? 6 : 0) : 0, sizeInMap)) - 2}px`;
       states.tagInMultiLine = Number.parseFloat(input2.style.height) >= sizeInMap;
       if (states.visible && emptyText.value !== false) {