element-plus 1.2.0-beta.4 → 1.2.0-beta.5

package/es/hooks/index.d.ts

@@ -1,18 +1,15 @@
-export { default as useAttrs } from './use-attrs';
-export { default as useEvents } from './use-events';
-export { default as useLockScreen } from './use-lockscreen';
-export { default as useRestoreActive } from './use-restore-active';
-export { default as useModal } from './use-modal';
-export { default as useMigrating } from './use-migrating';
-export { default as useFocus } from './use-focus';
-export { default as useThrottleRender } from './use-throttle-render';
-export { default as usePreventGlobal } from './use-prevent-global';
-export { default as useTeleport } from './use-teleport';
-export { default as useTimeout } from './use-timeout';
+export * from './use-attrs';
+export * from './use-focus';
+export * from './use-form-item';
+export * from './use-global-config';
+export * from './use-locale';
+export * from './use-lockscreen';
+export * from './use-modal';
 export * from './use-model-toggle';
 export * from './use-popper';
-export * from './use-css-var';
-export * from './use-locale';
-export * from './use-form-item';
+export * from './use-prevent-global';
+export * from './use-restore-active';
 export * from './use-same-target';
-export * from './use-global-config';
+export * from './use-teleport';
+export * from './use-throttle-render';
+export * from './use-timeout';

package/es/hooks/index.mjs

@@ -1,19 +1,16 @@
-export { default as useAttrs } from './use-attrs/index.mjs';
-export { default as useEvents } from './use-events/index.mjs';
-export { default as useLockScreen } from './use-lockscreen/index.mjs';
-export { default as useRestoreActive } from './use-restore-active/index.mjs';
-export { default as useModal } from './use-modal/index.mjs';
-export { default as useMigrating } from './use-migrating/index.mjs';
-export { default as useFocus } from './use-focus/index.mjs';
-export { default as useThrottleRender } from './use-throttle-render/index.mjs';
-export { default as usePreventGlobal } from './use-prevent-global/index.mjs';
-export { default as useTeleport } from './use-teleport/index.mjs';
-export { default as useTimeout } from './use-timeout/index.mjs';
+export { useAttrs } from './use-attrs/index.mjs';
+export { useFocus } from './use-focus/index.mjs';
+export { useFormItem, useFormItemProps } from './use-form-item/index.mjs';
+export { useGlobalConfig } from './use-global-config/index.mjs';
+export { buildTranslator, localeContextKey, localeProviderMaker, provideLocale, translate, useLocale, useLocaleProps } from './use-locale/index.mjs';
+export { useLockscreen } from './use-lockscreen/index.mjs';
+export { useModal } from './use-modal/index.mjs';
 export { useModelToggle, useModelToggleEmits, useModelToggleProps } from './use-model-toggle/index.mjs';
 export { DARK_EFFECT, LIGHT_EFFECT, usePopperControlProps, usePopperHook, usePopperProps } from './use-popper/index.mjs';
-export { themeVarsKey, useCssVar, useThemeVars } from './use-css-var/index.mjs';
-export { LocaleInjectionKey, localeProviderMaker, useLocale, useLocaleInject, useLocaleProps } from './use-locale/index.mjs';
-export { useFormItem, useFormItemProps } from './use-form-item/index.mjs';
+export { usePreventGlobal } from './use-prevent-global/index.mjs';
+export { useRestoreActive } from './use-restore-active/index.mjs';
 export { useSameTarget } from './use-same-target/index.mjs';
-export { useGlobalConfig } from './use-global-config/index.mjs';
+export { useTeleport } from './use-teleport/index.mjs';
+export { useThrottleRender } from './use-throttle-render/index.mjs';
+export { useTimeout } from './use-timeout/index.mjs';
 //# sourceMappingURL=index.mjs.map

package/es/hooks/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/es/hooks/use-attrs/index.d.ts

@@ -3,5 +3,5 @@ interface Params {
     excludeListeners?: boolean;
     excludeKeys?: string[];
 }
-declare const _default: (params?: Params) => ComputedRef<Record<string, unknown>>;
-export default _default;
+export declare const useAttrs: (params?: Params) => ComputedRef<Record<string, unknown>>;
+export {};

package/es/hooks/use-attrs/index.mjs

@@ -4,7 +4,7 @@ import { debugWarn } from '../../utils/error.mjs';
 
 const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
 const LISTENER_PREFIX = /^on[A-Z]/;
-var useAttrs = (params = {}) => {
+const useAttrs = (params = {}) => {
   const { excludeListeners = false, excludeKeys = [] } = params;
   const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS);
   const instance = getCurrentInstance();
@@ -18,5 +18,5 @@ var useAttrs = (params = {}) => {
   });
 };
 
-export { useAttrs as default };
+export { useAttrs };
 //# sourceMappingURL=index.mjs.map

package/es/hooks/use-attrs/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-attrs/index.ts"],"sourcesContent":["import { getCurrentInstance, computed } from 'vue'\nimport fromPairs from 'lodash/fromPairs'\nimport { debugWarn } from '@element-plus/utils/error'\n\nimport type { ComputedRef } from 'vue'\n\ninterface Params {\n  excludeListeners?: boolean\n  excludeKeys?: string[]\n}\n\nconst DEFAULT_EXCLUDE_KEYS = ['class', 'style']\nconst LISTENER_PREFIX = /^on[A-Z]/\n\nexport default (params: Params = {}): ComputedRef<Record<string, unknown>> => {\n  const { excludeListeners = false, excludeKeys = [] } = params\n  const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS)\n\n  const instance = getCurrentInstance()\n  if (!instance) {\n    debugWarn(\n      'use-attrs',\n      'getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function'\n    )\n    return computed(() => ({}))\n  }\n\n  return computed(() =>\n    fromPairs(\n      Object.entries(instance.proxy?.$attrs!).filter(\n        ([key]) =>\n          !allExcludeKeys.includes(key) &&\n          !(excludeListeners && LISTENER_PREFIX.test(key))\n      )\n    )\n  )\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,uBAAuB,CAAC,SAAS;AACvC,MAAM,kBAAkB;AAExB,eAAe,CAAC,SAAiB,OAA6C;AAC5E,QAAM,EAAE,mBAAmB,OAAO,cAAc,OAAO;AACvD,QAAM,iBAAiB,YAAY,OAAO;AAE1C,QAAM,WAAW;AACjB,MAAI,CAAC,UAAU;AACb,cACE,aACA;AAEF,WAAO,SAAS;AAAO;AAGzB,SAAO,SAAS,MAAG;AA3BrB;AA4BI,qBACE,OAAO,QAAQ,eAAS,UAAT,mBAAgB,QAAS,OACtC,CAAC,CAAC,SACA,CAAC,eAAe,SAAS,QACzB,sBAAsB,gBAAgB,KAAK;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-attrs/index.ts"],"sourcesContent":["import { getCurrentInstance, computed } from 'vue'\nimport fromPairs from 'lodash/fromPairs'\nimport { debugWarn } from '@element-plus/utils/error'\n\nimport type { ComputedRef } from 'vue'\n\ninterface Params {\n  excludeListeners?: boolean\n  excludeKeys?: string[]\n}\n\nconst DEFAULT_EXCLUDE_KEYS = ['class', 'style']\nconst LISTENER_PREFIX = /^on[A-Z]/\n\nexport const useAttrs = (\n  params: Params = {}\n): ComputedRef<Record<string, unknown>> => {\n  const { excludeListeners = false, excludeKeys = [] } = params\n  const allExcludeKeys = excludeKeys.concat(DEFAULT_EXCLUDE_KEYS)\n\n  const instance = getCurrentInstance()\n  if (!instance) {\n    debugWarn(\n      'use-attrs',\n      'getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function'\n    )\n    return computed(() => ({}))\n  }\n\n  return computed(() =>\n    fromPairs(\n      Object.entries(instance.proxy?.$attrs!).filter(\n        ([key]) =>\n          !allExcludeKeys.includes(key) &&\n          !(excludeListeners && LISTENER_PREFIX.test(key))\n      )\n    )\n  )\n}\n"],"names":[],"mappings":";;;;AAWA,MAAM,uBAAuB,CAAC,SAAS;AACvC,MAAM,kBAAkB;MAEX,WAAW,CACtB,SAAiB,OACwB;AACzC,QAAM,EAAE,mBAAmB,OAAO,cAAc,OAAO;AACvD,QAAM,iBAAiB,YAAY,OAAO;AAE1C,QAAM,WAAW;AACjB,MAAI,CAAC,UAAU;AACb,cACE,aACA;AAEF,WAAO,SAAS;AAAO;AAGzB,SAAO,SAAS,MAAG;AA7BrB;AA8BI,qBACE,OAAO,QAAQ,eAAS,UAAT,mBAAgB,QAAS,OACtC,CAAC,CAAC,SACA,CAAC,eAAe,SAAS,QACzB,sBAAsB,gBAAgB,KAAK;AAAA;AAAA;;;;"}

package/es/hooks/use-focus/index.d.ts

@@ -1,5 +1,4 @@
 import type { Ref } from 'vue';
-declare const _default: (el: Ref<HTMLElement>) => {
+export declare const useFocus: (el: Ref<HTMLElement>) => {
     focus: () => void;
 };
-export default _default;

package/es/hooks/use-focus/index.mjs

@@ -1,4 +1,4 @@
-var useFocus = (el) => {
+const useFocus = (el) => {
   return {
     focus: () => {
       var _a, _b;
@@ -7,5 +7,5 @@ var useFocus = (el) => {
   };
 };
 
-export { useFocus as default };
+export { useFocus };
 //# sourceMappingURL=index.mjs.map

package/es/hooks/use-focus/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-focus/index.ts"],"sourcesContent":["import type { Ref } from 'vue'\n\nexport default (el: Ref<HTMLElement>) => {\n  return {\n    focus: () => {\n      el.value?.focus?.()\n    },\n  }\n}\n"],"names":[],"mappings":"AAEA,eAAe,CAAC,OAAyB;AACvC,SAAO;AAAA,IACL,OAAO,MAAM;AAJjB;AAKM,qBAAG,UAAH,mBAAU,UAAV;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-focus/index.ts"],"sourcesContent":["import type { Ref } from 'vue'\n\nexport const useFocus = (el: Ref<HTMLElement>) => {\n  return {\n    focus: () => {\n      el.value?.focus?.()\n    },\n  }\n}\n"],"names":[],"mappings":"MAEa,WAAW,CAAC,OAAyB;AAChD,SAAO;AAAA,IACL,OAAO,MAAM;AAJjB;AAKM,qBAAG,UAAH,mBAAU,UAAV;AAAA;AAAA;AAAA;;;;"}

package/es/hooks/use-form-item/index.d.ts

@@ -9,7 +9,7 @@ export declare type LocalFallbacks = {
     size?: MaybeRef<UseFormItemProps['size'] | undefined>;
     disabled?: MaybeRef<UseFormItemProps['disabled'] | undefined>;
 };
-export declare const useFormItem: ({ size, disabled }: LocalFallbacks) => {
+export declare const useFormItem: ({ size, disabled }?: LocalFallbacks) => {
     size: import("vue").ComputedRef<any>;
     disabled: import("vue").ComputedRef<boolean>;
     form: import("element-plus/es/tokens").ElFormContext | undefined;

package/es/hooks/use-form-item/index.mjs

@@ -1,10 +1,10 @@
 import { getCurrentInstance, inject, computed, unref } from 'vue';
 import '../../tokens/index.mjs';
-import { buildProps } from '../../utils/props.mjs';
+import { componentSize, buildProps } from '../../utils/props.mjs';
 import { useGlobalConfig } from '../../utils/util.mjs';
 import { elFormKey, elFormItemKey } from '../../tokens/form.mjs';
 
-const sizes = ["", "large", "medium", "small", "mini"];
+const sizes = ["", ...componentSize];
 const useFormItemProps = buildProps({
   size: {
     type: String,
@@ -13,7 +13,7 @@ const useFormItemProps = buildProps({
   },
   disabled: Boolean
 });
-const useFormItem = ({ size, disabled }) => {
+const useFormItem = ({ size, disabled } = {}) => {
   var _a;
   const vm = getCurrentInstance();
   const $ELEMENT = useGlobalConfig();

package/es/hooks/use-form-item/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-form-item/index.ts"],"sourcesContent":["import { inject, computed, getCurrentInstance, unref } from 'vue'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { buildProps } from '@element-plus/utils/props'\nimport { useGlobalConfig } from '@element-plus/utils/util'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { MaybeRef } from '@vueuse/core'\n\nconst sizes = ['', 'large', 'medium', 'small', 'mini'] as const\n\nexport const useFormItemProps = buildProps({\n  size: {\n    type: String,\n    values: sizes,\n    default: '',\n  },\n  disabled: Boolean,\n} as const)\n\nexport type UseFormItemProps = ExtractPropTypes<typeof useFormItemProps>\n\nexport type LocalFallbacks = {\n  size?: MaybeRef<UseFormItemProps['size'] | undefined>\n  disabled?: MaybeRef<UseFormItemProps['disabled'] | undefined>\n}\n\nexport const useFormItem = ({ size, disabled }: LocalFallbacks) => {\n  const vm = getCurrentInstance()!\n  const $ELEMENT = useGlobalConfig()\n\n  // vm.props is not reactive so we use the reactive one here.\n  const props = vm.proxy?.$props as UseFormItemProps\n  const form = inject(elFormKey, undefined)\n  const formItem = inject(elFormItemKey, undefined)\n\n  return {\n    size: computed(() => {\n      // TODO, fallback to default size like 'medium/large' instead of empty string\n      return (\n        props.size ||\n        unref(size) ||\n        formItem?.size ||\n        form?.size ||\n        $ELEMENT.size ||\n        ''\n      )\n    }),\n    disabled: computed(() => {\n      return (\n        props.disabled === true || unref(disabled) || form?.disabled || false\n      )\n    }),\n    form,\n    formItem,\n  }\n}\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,QAAQ,CAAC,IAAI,SAAS,UAAU,SAAS;MAElC,mBAAmB,WAAW;AAAA,EACzC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA;MAUC,cAAc,CAAC,EAAE,MAAM,eAA+B;AA1BnE;AA2BE,QAAM,KAAK;AACX,QAAM,WAAW;AAGjB,QAAM,QAAQ,SAAG,UAAH,mBAAU;AACxB,QAAM,OAAO,OAAO,WAAW;AAC/B,QAAM,WAAW,OAAO,eAAe;AAEvC,SAAO;AAAA,IACL,MAAM,SAAS,MAAM;AAEnB,aACE,MAAM,QACN,MAAM,+CACI,uCACJ,SACN,SAAS,QACT;AAAA;AAAA,IAGJ,UAAU,SAAS,MAAM;AACvB,aACE,MAAM,aAAa,QAAQ,MAAM,2CAAmB,aAAY;AAAA;AAAA,IAGpE;AAAA,IACA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-form-item/index.ts"],"sourcesContent":["import { inject, computed, getCurrentInstance, unref } from 'vue'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport { buildProps, componentSize } from '@element-plus/utils/props'\nimport { useGlobalConfig } from '@element-plus/utils/util'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { MaybeRef } from '@vueuse/core'\n\nconst sizes = ['', ...componentSize] as const\n\nexport const useFormItemProps = buildProps({\n  size: {\n    type: String,\n    values: sizes,\n    default: '',\n  },\n  disabled: Boolean,\n} as const)\nexport type UseFormItemProps = ExtractPropTypes<typeof useFormItemProps>\n\nexport type LocalFallbacks = {\n  size?: MaybeRef<UseFormItemProps['size'] | undefined>\n  disabled?: MaybeRef<UseFormItemProps['disabled'] | undefined>\n}\n\nexport const useFormItem = ({ size, disabled }: LocalFallbacks = {}) => {\n  const vm = getCurrentInstance()!\n  const $ELEMENT = useGlobalConfig()\n\n  const props = vm.proxy?.$props as UseFormItemProps\n  const form = inject(elFormKey, undefined)\n  const formItem = inject(elFormItemKey, undefined)\n\n  return {\n    size: computed(() => {\n      // TODO, fallback to default size like 'medium/large' instead of empty string\n      return (\n        props.size ||\n        unref(size) ||\n        formItem?.size ||\n        form?.size ||\n        $ELEMENT.size ||\n        ''\n      )\n    }),\n    disabled: computed(() => {\n      return (\n        props.disabled === true || unref(disabled) || form?.disabled || false\n      )\n    }),\n    form,\n    formItem,\n  }\n}\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,QAAQ,CAAC,IAAI,GAAG;MAET,mBAAmB,WAAW;AAAA,EACzC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA;MASC,cAAc,CAAC,EAAE,MAAM,aAA6B,OAAO;AAzBxE;AA0BE,QAAM,KAAK;AACX,QAAM,WAAW;AAEjB,QAAM,QAAQ,SAAG,UAAH,mBAAU;AACxB,QAAM,OAAO,OAAO,WAAW;AAC/B,QAAM,WAAW,OAAO,eAAe;AAEvC,SAAO;AAAA,IACL,MAAM,SAAS,MAAM;AAEnB,aACE,MAAM,QACN,MAAM,+CACI,uCACJ,SACN,SAAS,QACT;AAAA;AAAA,IAGJ,UAAU,SAAS,MAAM;AACvB,aACE,MAAM,aAAa,QAAQ,MAAM,2CAAmB,aAAY;AAAA;AAAA,IAGpE;AAAA,IACA;AAAA;AAAA;;;;"}

package/es/hooks/use-global-config/index.d.ts

@@ -1 +1 @@
-export declare const useGlobalConfig: () => any;
+export declare const useGlobalConfig: () => ConfigProvdierContext;

package/es/hooks/use-global-config/index.mjs

@@ -7,9 +7,7 @@ const defaultConfig = {
     autoInsertSpace: false
   }
 };
-const useGlobalConfig = () => {
-  return inject(configProviderContextKey, defaultConfig);
-};
+const useGlobalConfig = () => inject(configProviderContextKey, defaultConfig);
 
 export { useGlobalConfig };
 //# sourceMappingURL=index.mjs.map

package/es/hooks/use-global-config/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-global-config/index.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport type { ConfigProvdierContext } from '@element-plus/tokens'\n\nconst defaultConfig: ConfigProvdierContext = {\n  button: {\n    autoInsertSpace: false,\n  },\n}\n\nexport const useGlobalConfig = () => {\n  return inject(configProviderContextKey, defaultConfig)\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,gBAAuC;AAAA,EAC3C,QAAQ;AAAA,IACN,iBAAiB;AAAA;AAAA;MAIR,kBAAkB,MAAM;AACnC,SAAO,OAAO,0BAA0B;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-global-config/index.ts"],"sourcesContent":["import { inject } from 'vue'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport type { ConfigProvdierContext } from '@element-plus/tokens'\n\nconst defaultConfig: ConfigProvdierContext = {\n  button: {\n    autoInsertSpace: false,\n  },\n}\n\nexport const useGlobalConfig = () =>\n  inject(configProviderContextKey, defaultConfig)\n"],"names":[],"mappings":";;;;AAIA,MAAM,gBAAuC;AAAA,EAC3C,QAAQ;AAAA,IACN,iBAAiB;AAAA;AAAA;MAIR,kBAAkB,MAC7B,OAAO,0BAA0B;;;;"}

package/es/hooks/use-locale/index.d.ts

@@ -1,16 +1,19 @@
+import type { MaybeRef } from '@vueuse/core';
 import type { InjectionKey, Ref } from 'vue';
 import type { Language } from 'element-plus/es/locale';
 export declare const useLocaleProps: {
-    locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<Language>, never, false, never, never>;
+    locale: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<Language>, unknown, unknown, unknown, unknown>;
 };
-declare type Translator = (...args: any[]) => string;
+export declare type Translator = (path: string) => string;
 export declare type LocaleContext = {
     locale: Ref<Language>;
     lang: Ref<string>;
     t: Translator;
 };
-export declare const LocaleInjectionKey: InjectionKey<LocaleContext>;
-export declare const useLocale: () => void;
+export declare const localeContextKey: InjectionKey<LocaleContext>;
+export declare const provideLocale: () => void;
+export declare const buildTranslator: (locale: MaybeRef<Language>) => Translator;
+export declare const translate: (path: string, locale: Language) => string;
 export declare const localeProviderMaker: (locale?: {
     name: string;
     el: {
@@ -256,7 +259,6 @@ export declare const localeProviderMaker: (locale?: {
             };
         };
     }>;
-    t: (...args: any[]) => string | undefined;
+    t: Translator;
 };
-export declare const useLocaleInject: () => LocaleContext;
-export {};
+export declare const useLocale: () => LocaleContext;

package/es/hooks/use-locale/index.mjs

@@ -1,76 +1,43 @@
-import { getCurrentInstance, computed, provide, ref, inject } from 'vue';
+import { getCurrentInstance, computed, provide, unref, ref, inject } from 'vue';
+import get from 'lodash/get';
 import defaultLang from '../../locale/lang/en.mjs';
-import { buildProp, definePropType } from '../../utils/props.mjs';
+import { buildProps, definePropType } from '../../utils/props.mjs';
 
-const useLocaleProps = {
-  locale: buildProp({
+const useLocaleProps = buildProps({
+  locale: {
     type: definePropType(Object)
-  })
-};
-const LocaleInjectionKey = "ElLocaleInjection";
-let localeObjCache;
-function translate(path, option, current) {
-  const paths = path.split(".");
-  let value;
-  for (let i = 0, j = paths.length; i < j; i++) {
-    const property = paths[i];
-    value = current[property];
-    if (i === j - 1)
-      return template(value, option);
-    if (!value)
-      return "";
-    current = value;
   }
-}
-const useLocale = () => {
+});
+const localeContextKey = Symbol("localeContextKey");
+let localeContextCache;
+const provideLocale = () => {
   const vm = getCurrentInstance();
   const props = vm.props;
   const locale = computed(() => props.locale || defaultLang);
   const lang = computed(() => locale.value.name);
-  const _translator = (...args) => {
-    const [path, option] = args;
-    return translate(path, option, locale.value);
-  };
-  const t = (...args) => {
-    return _translator(...args);
-  };
+  const t = buildTranslator(locale);
   const provides = {
     locale,
     lang,
     t
   };
-  localeObjCache = provides;
-  provide(LocaleInjectionKey, provides);
+  localeContextCache = provides;
+  provide(localeContextKey, provides);
 };
-function template(str, option) {
-  if (!str || !option)
-    return str;
-  return str.replace(/\{(\w+)\}/g, (_, key) => {
-    return option[key];
-  });
-}
+const buildTranslator = (locale) => (path) => translate(path, unref(locale));
+const translate = (path, locale) => get(locale, path, "");
 const localeProviderMaker = (locale = defaultLang) => {
   const lang = ref(locale.name);
   const localeRef = ref(locale);
   return {
     lang,
     locale: localeRef,
-    t: (...args) => {
-      const [path, option] = args;
-      return translate(path, option, localeRef.value);
-    }
+    t: buildTranslator(localeRef)
   };
 };
-const useLocaleInject = () => {
-  return inject(LocaleInjectionKey, localeObjCache || {
-    lang: ref(defaultLang.name),
-    locale: ref(defaultLang),
-    t: (...args) => {
-      const [path, option] = args;
-      return translate(path, option, defaultLang);
-    }
-  });
+const useLocale = () => {
+  return inject(localeContextKey, localeContextCache || localeProviderMaker(defaultLang));
 };
 
-export { LocaleInjectionKey, localeProviderMaker, useLocale, useLocaleInject, useLocaleProps };
+export { buildTranslator, localeContextKey, localeProviderMaker, provideLocale, translate, useLocale, useLocaleProps };
 //# sourceMappingURL=index.mjs.map

package/es/hooks/use-locale/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-locale/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, provide, ref } from 'vue'\nimport English from '@element-plus/locale/lang/en'\nimport { buildProp, definePropType } from '@element-plus/utils/props'\nimport type { InjectionKey, Ref } from 'vue'\nimport type { Language } from '@element-plus/locale'\n\nexport const useLocaleProps = {\n  locale: buildProp({\n    type: definePropType<Language>(Object),\n  }),\n}\n\ntype Translator = (...args: any[]) => string\n\nexport type LocaleContext = {\n  locale: Ref<Language>\n  lang: Ref<string>\n  t: Translator\n}\n\nexport const LocaleInjectionKey =\n  'ElLocaleInjection' as unknown as InjectionKey<LocaleContext>\n\n// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale\n// into the component as default injection value.\n// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266\nlet localeObjCache: LocaleContext\n\nfunction translate(path, option, current) {\n  const paths = path.split('.')\n  let value\n  for (let i = 0, j = paths.length; i < j; i++) {\n    const property = paths[i]\n    value = current[property]\n    if (i === j - 1) return template(value, option)\n    if (!value) return ''\n    current = value\n  }\n}\n\nexport const useLocale = () => {\n  const vm = getCurrentInstance()!\n  const props = vm.props as {\n    locale: Language\n  }\n\n  const locale = computed(() => props.locale || English)\n  const lang = computed(() => locale.value.name)\n\n  const _translator = (...args: any[]) => {\n    const [path, option] = args\n    return translate(path, option, locale.value)\n  }\n\n  const t = (...args: any[]) => {\n    return _translator(...args)\n  }\n\n  const provides = {\n    locale,\n    lang,\n    t,\n  } as LocaleContext\n\n  // this could be broken if someone tries to do following:\n\n  /**\n   * <config-provider :locale=\"lang1\">\n   *   <config-provider :locale=\"lang2\">\n   *     Something calls modal component.\n   *   </config-provider>\n   * </config-provider>\n   */\n  localeObjCache = provides\n  provide(LocaleInjectionKey, provides)\n}\n\nfunction template(str: string, option) {\n  if (!str || !option) return str\n  return str.replace(/\\{(\\w+)\\}/g, (_, key) => {\n    return option[key]\n  })\n}\n\nexport const localeProviderMaker = (locale = English) => {\n  const lang = ref(locale.name)\n  const localeRef = ref(locale)\n  return {\n    lang,\n    locale: localeRef,\n    t: (...args: any[]) => {\n      const [path, option] = args\n      return translate(path, option, localeRef.value)\n    },\n  }\n}\n\nexport const useLocaleInject = () => {\n  return inject(\n    LocaleInjectionKey,\n    localeObjCache || {\n      lang: ref(English.name),\n      locale: ref(English),\n      t: (...args) => {\n        const [path, option] = args\n        return translate(path, option, English)\n      },\n    }\n  )\n}\n"],"names":["English"],"mappings":";;;;MAMa,iBAAiB;AAAA,EAC5B,QAAQ,UAAU;AAAA,IAChB,MAAM,eAAyB;AAAA;AAAA;MAYtB,qBACX;AAKF,IAAI;AAEJ,mBAAmB,MAAM,QAAQ,SAAS;AACxC,QAAM,QAAQ,KAAK,MAAM;AACzB,MAAI;AACJ,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,IAAI,GAAG,KAAK;AAC5C,UAAM,WAAW,MAAM;AACvB,YAAQ,QAAQ;AAChB,QAAI,MAAM,IAAI;AAAG,aAAO,SAAS,OAAO;AACxC,QAAI,CAAC;AAAO,aAAO;AACnB,cAAU;AAAA;AAAA;MAID,YAAY,MAAM;AAC7B,QAAM,KAAK;AACX,QAAM,QAAQ,GAAG;AAIjB,QAAM,SAAS,SAAS,MAAM,MAAM,UAAUA;AAC9C,QAAM,OAAO,SAAS,MAAM,OAAO,MAAM;AAEzC,QAAM,cAAc,IAAI,SAAgB;AACtC,UAAM,CAAC,MAAM,UAAU;AACvB,WAAO,UAAU,MAAM,QAAQ,OAAO;AAAA;AAGxC,QAAM,IAAI,IAAI,SAAgB;AAC5B,WAAO,YAAY,GAAG;AAAA;AAGxB,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA;AAYF,mBAAiB;AACjB,UAAQ,oBAAoB;AAAA;AAG9B,kBAAkB,KAAa,QAAQ;AACrC,MAAI,CAAC,OAAO,CAAC;AAAQ,WAAO;AAC5B,SAAO,IAAI,QAAQ,cAAc,CAAC,GAAG,QAAQ;AAC3C,WAAO,OAAO;AAAA;AAAA;MAIL,sBAAsB,CAAC,SAASA,gBAAY;AACvD,QAAM,OAAO,IAAI,OAAO;AACxB,QAAM,YAAY,IAAI;AACtB,SAAO;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,GAAG,IAAI,SAAgB;AACrB,YAAM,CAAC,MAAM,UAAU;AACvB,aAAO,UAAU,MAAM,QAAQ,UAAU;AAAA;AAAA;AAAA;MAKlC,kBAAkB,MAAM;AACnC,SAAO,OACL,oBACA,kBAAkB;AAAA,IAChB,MAAM,IAAIA,YAAQ;AAAA,IAClB,QAAQ,IAAIA;AAAA,IACZ,GAAG,IAAI,SAAS;AACd,YAAM,CAAC,MAAM,UAAU;AACvB,aAAO,UAAU,MAAM,QAAQA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-locale/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, provide, ref, unref } from 'vue'\nimport get from 'lodash/get'\nimport English from '@element-plus/locale/lang/en'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport type { MaybeRef } from '@vueuse/core'\nimport type { InjectionKey, Ref } from 'vue'\nimport type { Language } from '@element-plus/locale'\n\nexport const useLocaleProps = buildProps({\n  locale: {\n    type: definePropType<Language>(Object),\n  },\n})\n\nexport type Translator = (path: string) => string\nexport type LocaleContext = {\n  locale: Ref<Language>\n  lang: Ref<string>\n  t: Translator\n}\n\nexport const localeContextKey: InjectionKey<LocaleContext> =\n  Symbol('localeContextKey')\n\n// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale\n// into the component as default injection value.\n// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266\nlet localeContextCache: LocaleContext\n\nexport const provideLocale = () => {\n  const vm = getCurrentInstance()!\n  const props = vm.props as {\n    locale: Language\n  }\n  const locale = computed(() => props.locale || English)\n  const lang = computed(() => locale.value.name)\n\n  const t = buildTranslator(locale)\n  const provides: LocaleContext = {\n    locale,\n    lang,\n    t,\n  }\n\n  // this could be broken if someone tries to do following:\n\n  /**\n   * <config-provider :locale=\"lang1\">\n   *   <config-provider :locale=\"lang2\">\n   *     Something calls modal component.\n   *   </config-provider>\n   * </config-provider>\n   */\n  localeContextCache = provides\n  provide(localeContextKey, provides)\n}\n\nexport const buildTranslator =\n  (locale: MaybeRef<Language>): Translator =>\n  (path) =>\n    translate(path, unref(locale))\n\nexport const translate = (path: string, locale: Language): string =>\n  get(locale, path, '')\n\nexport const localeProviderMaker = (locale = English) => {\n  const lang = ref(locale.name)\n  const localeRef = ref(locale)\n  return {\n    lang,\n    locale: localeRef,\n    t: buildTranslator(localeRef),\n  }\n}\n\nexport const useLocale = () => {\n  return inject(\n    localeContextKey,\n    localeContextCache || localeProviderMaker(English)\n  )\n}\n"],"names":["English"],"mappings":";;;;;MAQa,iBAAiB,WAAW;AAAA,EACvC,QAAQ;AAAA,IACN,MAAM,eAAyB;AAAA;AAAA;MAWtB,mBACX,OAAO;AAKT,IAAI;MAES,gBAAgB,MAAM;AACjC,QAAM,KAAK;AACX,QAAM,QAAQ,GAAG;AAGjB,QAAM,SAAS,SAAS,MAAM,MAAM,UAAUA;AAC9C,QAAM,OAAO,SAAS,MAAM,OAAO,MAAM;AAEzC,QAAM,IAAI,gBAAgB;AAC1B,QAAM,WAA0B;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA;AAYF,uBAAqB;AACrB,UAAQ,kBAAkB;AAAA;MAGf,kBACX,CAAC,WACD,CAAC,SACC,UAAU,MAAM,MAAM;MAEb,YAAY,CAAC,MAAc,WACtC,IAAI,QAAQ,MAAM;MAEP,sBAAsB,CAAC,SAASA,gBAAY;AACvD,QAAM,OAAO,IAAI,OAAO;AACxB,QAAM,YAAY,IAAI;AACtB,SAAO;AAAA,IACL;AAAA,IACA,QAAQ;AAAA,IACR,GAAG,gBAAgB;AAAA;AAAA;MAIV,YAAY,MAAM;AAC7B,SAAO,OACL,kBACA,sBAAsB,oBAAoBA;AAAA;;;;"}

package/es/hooks/use-lockscreen/index.d.ts

@@ -1,8 +1,7 @@
 import type { Ref } from 'vue';
-declare const _default: (trigger: Ref<boolean>) => void;
 /**
  * Hook that monitoring the ref value to lock or unlock the screen.
  * When the trigger became true, it assumes modal is now opened and vice versa.
  * @param trigger {Ref<boolean>}
  */
-export default _default;
+export declare const useLockscreen: (trigger: Ref<boolean>) => void;

package/es/hooks/use-lockscreen/index.mjs

@@ -1,19 +1,16 @@
-import { isRef, onUnmounted, watch } from 'vue';
+import { isRef, watch, onScopeDispose } from 'vue';
 import scrollbarWidth from '../../utils/scrollbar-width.mjs';
 import { throwError } from '../../utils/error.mjs';
 import { removeClass, hasClass, getStyle, addClass } from '../../utils/dom.mjs';
 
-var useLockScreen = (trigger) => {
+const useLockscreen = (trigger) => {
   if (!isRef(trigger)) {
-    throwError("[useLockScreen]", "You need to pass a ref param to this function");
+    throwError("[useLockscreen]", "You need to pass a ref param to this function");
   }
   let scrollBarWidth = 0;
   let withoutHiddenClass = false;
   let bodyPaddingRight = "0";
   let computedBodyPaddingRight = 0;
-  onUnmounted(() => {
-    cleanup();
-  });
   const cleanup = () => {
     removeClass(document.body, "el-popup-parent--hidden");
     if (withoutHiddenClass) {
@@ -21,24 +18,25 @@ var useLockScreen = (trigger) => {
     }
   };
   watch(trigger, (val) => {
-    if (val) {
-      withoutHiddenClass = !hasClass(document.body, "el-popup-parent--hidden");
-      if (withoutHiddenClass) {
-        bodyPaddingRight = document.body.style.paddingRight;
-        computedBodyPaddingRight = parseInt(getStyle(document.body, "paddingRight"), 10);
-      }
-      scrollBarWidth = scrollbarWidth();
-      const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
-      const bodyOverflowY = getStyle(document.body, "overflowY");
-      if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) {
-        document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarWidth}px`;
-      }
-      addClass(document.body, "el-popup-parent--hidden");
-    } else {
+    if (!val) {
       cleanup();
+      return;
+    }
+    withoutHiddenClass = !hasClass(document.body, "el-popup-parent--hidden");
+    if (withoutHiddenClass) {
+      bodyPaddingRight = document.body.style.paddingRight;
+      computedBodyPaddingRight = parseInt(getStyle(document.body, "paddingRight"), 10);
+    }
+    scrollBarWidth = scrollbarWidth();
+    const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
+    const bodyOverflowY = getStyle(document.body, "overflowY");
+    if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) {
+      document.body.style.paddingRight = `${computedBodyPaddingRight + scrollBarWidth}px`;
     }
+    addClass(document.body, "el-popup-parent--hidden");
   });
+  onScopeDispose(() => cleanup());
 };
 
-export { useLockScreen as default };
+export { useLockscreen };
 //# sourceMappingURL=index.mjs.map

package/es/hooks/use-lockscreen/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-lockscreen/index.ts"],"sourcesContent":["import { watch, isRef, onUnmounted } from 'vue'\n\nimport getScrollBarWidth from '@element-plus/utils/scrollbar-width'\nimport { throwError } from '@element-plus/utils/error'\nimport {\n  addClass,\n  removeClass,\n  hasClass,\n  getStyle,\n} from '@element-plus/utils/dom'\n\nimport type { Ref } from 'vue'\n\n/**\n * Hook that monitoring the ref value to lock or unlock the screen.\n * When the trigger became true, it assumes modal is now opened and vice versa.\n * @param trigger {Ref<boolean>}\n */\nexport default (trigger: Ref<boolean>) => {\n  if (!isRef(trigger)) {\n    throwError(\n      '[useLockScreen]',\n      'You need to pass a ref param to this function'\n    )\n  }\n  let scrollBarWidth = 0\n  let withoutHiddenClass = false\n  let bodyPaddingRight = '0'\n  let computedBodyPaddingRight = 0\n\n  onUnmounted(() => {\n    cleanup()\n  })\n\n  const cleanup = () => {\n    removeClass(document.body, 'el-popup-parent--hidden')\n    if (withoutHiddenClass) {\n      document.body.style.paddingRight = bodyPaddingRight\n    }\n  }\n  watch(trigger, (val) => {\n    if (val) {\n      withoutHiddenClass = !hasClass(document.body, 'el-popup-parent--hidden')\n      if (withoutHiddenClass) {\n        bodyPaddingRight = document.body.style.paddingRight\n        computedBodyPaddingRight = parseInt(\n          getStyle(document.body, 'paddingRight'),\n          10\n        )\n      }\n      scrollBarWidth = getScrollBarWidth()\n      const bodyHasOverflow =\n        document.documentElement.clientHeight < document.body.scrollHeight\n      const bodyOverflowY = getStyle(document.body, 'overflowY')\n      if (\n        scrollBarWidth > 0 &&\n        (bodyHasOverflow || bodyOverflowY === 'scroll') &&\n        withoutHiddenClass\n      ) {\n        document.body.style.paddingRight = `${\n          computedBodyPaddingRight + scrollBarWidth\n        }px`\n      }\n      addClass(document.body, 'el-popup-parent--hidden')\n    } else {\n      cleanup()\n    }\n  })\n}\n"],"names":["getScrollBarWidth"],"mappings":";;;;;AAkBA,oBAAe,CAAC,YAA0B;AACxC,MAAI,CAAC,MAAM,UAAU;AACnB,eACE,mBACA;AAAA;AAGJ,MAAI,iBAAiB;AACrB,MAAI,qBAAqB;AACzB,MAAI,mBAAmB;AACvB,MAAI,2BAA2B;AAE/B,cAAY,MAAM;AAChB;AAAA;AAGF,QAAM,UAAU,MAAM;AACpB,gBAAY,SAAS,MAAM;AAC3B,QAAI,oBAAoB;AACtB,eAAS,KAAK,MAAM,eAAe;AAAA;AAAA;AAGvC,QAAM,SAAS,CAAC,QAAQ;AACtB,QAAI,KAAK;AACP,2BAAqB,CAAC,SAAS,SAAS,MAAM;AAC9C,UAAI,oBAAoB;AACtB,2BAAmB,SAAS,KAAK,MAAM;AACvC,mCAA2B,SACzB,SAAS,SAAS,MAAM,iBACxB;AAAA;AAGJ,uBAAiBA;AACjB,YAAM,kBACJ,SAAS,gBAAgB,eAAe,SAAS,KAAK;AACxD,YAAM,gBAAgB,SAAS,SAAS,MAAM;AAC9C,UACE,iBAAiB,yBACG,kBAAkB,aACtC,oBACA;AACA,iBAAS,KAAK,MAAM,eAAe,GACjC,2BAA2B;AAAA;AAG/B,eAAS,SAAS,MAAM;AAAA,WACnB;AACL;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-lockscreen/index.ts"],"sourcesContent":["import { watch, isRef, onScopeDispose } from 'vue'\n\nimport getScrollBarWidth from '@element-plus/utils/scrollbar-width'\nimport { throwError } from '@element-plus/utils/error'\nimport {\n  addClass,\n  removeClass,\n  hasClass,\n  getStyle,\n} from '@element-plus/utils/dom'\n\nimport type { Ref } from 'vue'\n\n/**\n * Hook that monitoring the ref value to lock or unlock the screen.\n * When the trigger became true, it assumes modal is now opened and vice versa.\n * @param trigger {Ref<boolean>}\n */\nexport const useLockscreen = (trigger: Ref<boolean>) => {\n  if (!isRef(trigger)) {\n    throwError(\n      '[useLockscreen]',\n      'You need to pass a ref param to this function'\n    )\n  }\n  let scrollBarWidth = 0\n  let withoutHiddenClass = false\n  let bodyPaddingRight = '0'\n  let computedBodyPaddingRight = 0\n\n  const cleanup = () => {\n    removeClass(document.body, 'el-popup-parent--hidden')\n    if (withoutHiddenClass) {\n      document.body.style.paddingRight = bodyPaddingRight\n    }\n  }\n  watch(trigger, (val) => {\n    if (!val) {\n      cleanup()\n      return\n    }\n\n    withoutHiddenClass = !hasClass(document.body, 'el-popup-parent--hidden')\n    if (withoutHiddenClass) {\n      bodyPaddingRight = document.body.style.paddingRight\n      computedBodyPaddingRight = parseInt(\n        getStyle(document.body, 'paddingRight'),\n        10\n      )\n    }\n    scrollBarWidth = getScrollBarWidth()\n    const bodyHasOverflow =\n      document.documentElement.clientHeight < document.body.scrollHeight\n    const bodyOverflowY = getStyle(document.body, 'overflowY')\n    if (\n      scrollBarWidth > 0 &&\n      (bodyHasOverflow || bodyOverflowY === 'scroll') &&\n      withoutHiddenClass\n    ) {\n      document.body.style.paddingRight = `${\n        computedBodyPaddingRight + scrollBarWidth\n      }px`\n    }\n    addClass(document.body, 'el-popup-parent--hidden')\n  })\n  onScopeDispose(() => cleanup())\n}\n"],"names":["getScrollBarWidth"],"mappings":";;;;;MAkBa,gBAAgB,CAAC,YAA0B;AACtD,MAAI,CAAC,MAAM,UAAU;AACnB,eACE,mBACA;AAAA;AAGJ,MAAI,iBAAiB;AACrB,MAAI,qBAAqB;AACzB,MAAI,mBAAmB;AACvB,MAAI,2BAA2B;AAE/B,QAAM,UAAU,MAAM;AACpB,gBAAY,SAAS,MAAM;AAC3B,QAAI,oBAAoB;AACtB,eAAS,KAAK,MAAM,eAAe;AAAA;AAAA;AAGvC,QAAM,SAAS,CAAC,QAAQ;AACtB,QAAI,CAAC,KAAK;AACR;AACA;AAAA;AAGF,yBAAqB,CAAC,SAAS,SAAS,MAAM;AAC9C,QAAI,oBAAoB;AACtB,yBAAmB,SAAS,KAAK,MAAM;AACvC,iCAA2B,SACzB,SAAS,SAAS,MAAM,iBACxB;AAAA;AAGJ,qBAAiBA;AACjB,UAAM,kBACJ,SAAS,gBAAgB,eAAe,SAAS,KAAK;AACxD,UAAM,gBAAgB,SAAS,SAAS,MAAM;AAC9C,QACE,iBAAiB,yBACG,kBAAkB,aACtC,oBACA;AACA,eAAS,KAAK,MAAM,eAAe,GACjC,2BAA2B;AAAA;AAG/B,aAAS,SAAS,MAAM;AAAA;AAE1B,iBAAe,MAAM;AAAA;;;;"}

package/es/hooks/use-modal/index.d.ts

@@ -1,6 +1,6 @@
-import type { Ref, ComputedRef } from 'vue';
+import type { Ref } from 'vue';
 declare type ModalInstance = {
     handleClose: () => void;
 };
-declare const _default: (instance: ModalInstance, visibleRef: Ref<boolean> | ComputedRef) => void;
-export default _default;
+export declare const useModal: (instance: ModalInstance, visibleRef: Ref<boolean>) => void;
+export {};

package/es/hooks/use-modal/index.mjs

@@ -1,7 +1,6 @@
 import { watch } from 'vue';
-import { on } from '../../utils/dom.mjs';
+import { isClient, useEventListener } from '@vueuse/core';
 import { EVENT_CODE } from '../../utils/aria.mjs';
-import isServer from '../../utils/isServer.mjs';
 
 const modalStack = [];
 const closeModal = (e) => {
@@ -13,8 +12,8 @@ const closeModal = (e) => {
     topModal.handleClose();
   }
 };
-var useModal = (instance, visibleRef) => {
-  watch(() => visibleRef.value, (val) => {
+const useModal = (instance, visibleRef) => {
+  watch(visibleRef, (val) => {
     if (val) {
       modalStack.push(instance);
     } else {
@@ -22,9 +21,8 @@ var useModal = (instance, visibleRef) => {
     }
   });
 };
-if (!isServer) {
-  on(document, "keydown", closeModal);
-}
+if (isClient)
+  useEventListener(document, "keydown", closeModal);
 
-export { useModal as default };
+export { useModal };
 //# sourceMappingURL=index.mjs.map

package/es/hooks/use-modal/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-modal/index.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { on } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport isServer from '@element-plus/utils/isServer'\n\nimport type { Ref, ComputedRef } from 'vue'\n\ntype ModalInstance = {\n  handleClose: () => void\n}\n\nconst modalStack: ModalInstance[] = []\n\nconst closeModal = (e: KeyboardEvent) => {\n  if (modalStack.length === 0) return\n  if (e.code === EVENT_CODE.esc) {\n    e.stopPropagation()\n    const topModal = modalStack[modalStack.length - 1]\n    topModal.handleClose()\n  }\n}\n\nexport default (\n  instance: ModalInstance,\n  visibleRef: Ref<boolean> | ComputedRef\n) => {\n  watch(\n    () => visibleRef.value,\n    (val) => {\n      if (val) {\n        modalStack.push(instance)\n      } else {\n        modalStack.splice(\n          modalStack.findIndex((modal) => modal === instance),\n          1\n        )\n      }\n    }\n  )\n}\n\nif (!isServer) {\n  on(document, 'keydown', closeModal)\n}\n"],"names":[],"mappings":";;;;;AAWA,MAAM,aAA8B;AAEpC,MAAM,aAAa,CAAC,MAAqB;AACvC,MAAI,WAAW,WAAW;AAAG;AAC7B,MAAI,EAAE,SAAS,WAAW,KAAK;AAC7B,MAAE;AACF,UAAM,WAAW,WAAW,WAAW,SAAS;AAChD,aAAS;AAAA;AAAA;AAIb,eAAe,CACb,UACA,eACG;AACH,QACE,MAAM,WAAW,OACjB,CAAC,QAAQ;AACP,QAAI,KAAK;AACP,iBAAW,KAAK;AAAA,WACX;AACL,iBAAW,OACT,WAAW,UAAU,CAAC,UAAU,UAAU,WAC1C;AAAA;AAAA;AAAA;AAOV,IAAI,CAAC,UAAU;AACb,KAAG,UAAU,WAAW;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-modal/index.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { isClient, useEventListener } from '@vueuse/core'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nimport type { Ref } from 'vue'\n\ntype ModalInstance = {\n  handleClose: () => void\n}\n\nconst modalStack: ModalInstance[] = []\n\nconst closeModal = (e: KeyboardEvent) => {\n  if (modalStack.length === 0) return\n  if (e.code === EVENT_CODE.esc) {\n    e.stopPropagation()\n    const topModal = modalStack[modalStack.length - 1]\n    topModal.handleClose()\n  }\n}\n\nexport const useModal = (instance: ModalInstance, visibleRef: Ref<boolean>) => {\n  watch(visibleRef, (val) => {\n    if (val) {\n      modalStack.push(instance)\n    } else {\n      modalStack.splice(\n        modalStack.findIndex((modal) => modal === instance),\n        1\n      )\n    }\n  })\n}\n\nif (isClient) useEventListener(document, 'keydown', closeModal)\n"],"names":[],"mappings":";;;;AAUA,MAAM,aAA8B;AAEpC,MAAM,aAAa,CAAC,MAAqB;AACvC,MAAI,WAAW,WAAW;AAAG;AAC7B,MAAI,EAAE,SAAS,WAAW,KAAK;AAC7B,MAAE;AACF,UAAM,WAAW,WAAW,WAAW,SAAS;AAChD,aAAS;AAAA;AAAA;MAIA,WAAW,CAAC,UAAyB,eAA6B;AAC7E,QAAM,YAAY,CAAC,QAAQ;AACzB,QAAI,KAAK;AACP,iBAAW,KAAK;AAAA,WACX;AACL,iBAAW,OACT,WAAW,UAAU,CAAC,UAAU,UAAU,WAC1C;AAAA;AAAA;AAAA;AAMR,IAAI;AAAU,mBAAiB,UAAU,WAAW;;;;"}

package/es/hooks/use-model-toggle/index.d.ts

@@ -1,11 +1,9 @@
-import type { Ref } from 'vue';
+import type { Ref, ExtractPropTypes } from 'vue';
 export declare const useModelToggleProps: {
-    modelValue: {
-        type: BooleanConstructor;
-        default: null;
-    };
+    modelValue: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<boolean | null>, null, unknown, unknown, unknown>;
     'onUpdate:modelValue': FunctionConstructor;
 };
+export declare type UseModelToggleProps = ExtractPropTypes<typeof useModelToggleProps>;
 export declare const useModelToggleEmits: string[];
 export declare type ModelToggleParams = {
     indicator: Ref<boolean>;

package/es/hooks/use-model-toggle/index.mjs

@@ -3,14 +3,15 @@ import { isFunction } from '@vue/shared';
 import { isBool } from '../../utils/util.mjs';
 import { UPDATE_MODEL_EVENT } from '../../utils/constants.mjs';
 import isServer from '../../utils/isServer.mjs';
+import { buildProps, definePropType } from '../../utils/props.mjs';
 
-const useModelToggleProps = {
+const useModelToggleProps = buildProps({
   modelValue: {
-    type: Boolean,
+    type: definePropType(Boolean),
     default: null
   },
   "onUpdate:modelValue": Function
-};
+});
 const useModelToggleEmits = [UPDATE_MODEL_EVENT];
 const useModelToggle = ({
   indicator,
@@ -19,7 +20,9 @@ const useModelToggle = ({
   onShow,
   onHide
 }) => {
-  const { appContext, props, proxy, emit } = getCurrentInstance();
+  const instance = getCurrentInstance();
+  const props = instance.props;
+  const { emit } = instance;
   const hasUpdateHandler = computed(() => isFunction(props["onUpdate:modelValue"]));
   const isModelBindingAbsent = computed(() => props.modelValue === null);
   const doShow = () => {
@@ -85,9 +88,9 @@ const useModelToggle = ({
     }
   };
   watch(() => props.modelValue, onChange);
-  if (shouldHideWhenRouteChanges && appContext.config.globalProperties.$route !== void 0) {
+  if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
     watch(() => ({
-      ...proxy.$route
+      ...instance.proxy.$route
     }), () => {
       if (shouldHideWhenRouteChanges.value && indicator.value) {
         hide();

package/es/hooks/use-model-toggle/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-model-toggle/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, watch, onMounted } from 'vue'\nimport { isFunction } from '@vue/shared'\nimport { isBool } from '@element-plus/utils/util'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport isServer from '@element-plus/utils/isServer'\n\nimport type { Ref, ComponentPublicInstance } from 'vue'\n\nexport const useModelToggleProps = {\n  modelValue: {\n    type: Boolean,\n    default: null,\n  },\n\n  'onUpdate:modelValue': Function,\n}\n\nexport const useModelToggleEmits = [UPDATE_MODEL_EVENT]\n\nexport type ModelToggleParams = {\n  indicator: Ref<boolean>\n  shouldHideWhenRouteChanges?: Ref<boolean>\n  shouldProceed?: () => boolean\n  onShow?: () => void\n  onHide?: () => void\n}\n\nexport const useModelToggle = ({\n  indicator,\n  shouldHideWhenRouteChanges,\n  shouldProceed,\n  onShow,\n  onHide,\n}: ModelToggleParams) => {\n  const { appContext, props, proxy, emit } = getCurrentInstance()!\n\n  const hasUpdateHandler = computed(() =>\n    isFunction(props['onUpdate:modelValue'])\n  )\n  // when it matches the default value we say this is absent\n  // though this could be mistakenly passed from the user but we need to rule out that\n  // condition\n  const isModelBindingAbsent = computed(() => props.modelValue === null)\n\n  const doShow = () => {\n    if (indicator.value === true) {\n      return\n    }\n\n    indicator.value = true\n    if (isFunction(onShow)) {\n      onShow()\n    }\n  }\n\n  const doHide = () => {\n    if (indicator.value === false) {\n      return\n    }\n\n    indicator.value = false\n\n    if (isFunction(onHide)) {\n      onHide()\n    }\n  }\n\n  const show = () => {\n    if (\n      props.disabled === true ||\n      (isFunction(shouldProceed) && !shouldProceed())\n    )\n      return\n\n    const shouldEmit = hasUpdateHandler.value && !isServer\n\n    if (shouldEmit) {\n      emit(UPDATE_MODEL_EVENT, true)\n    }\n\n    if (isModelBindingAbsent.value || !shouldEmit) {\n      doShow()\n    }\n  }\n\n  const hide = () => {\n    if (props.disabled === true || isServer) return\n\n    const shouldEmit = hasUpdateHandler.value && !isServer\n\n    if (shouldEmit) {\n      emit(UPDATE_MODEL_EVENT, false)\n    }\n\n    if (isModelBindingAbsent.value || !shouldEmit) {\n      doHide()\n    }\n  }\n\n  const onChange = (val: boolean) => {\n    if (!isBool(val)) return\n    if (props.disabled && val) {\n      if (hasUpdateHandler.value) {\n        emit(UPDATE_MODEL_EVENT, false)\n      }\n    } else if (indicator.value !== val) {\n      if (val) {\n        doShow()\n      } else {\n        doHide()\n      }\n    }\n  }\n\n  const toggle = () => {\n    if (indicator.value) {\n      hide()\n    } else {\n      show()\n    }\n  }\n\n  watch(() => props.modelValue, onChange as any)\n\n  if (\n    shouldHideWhenRouteChanges &&\n    appContext.config.globalProperties.$route !== undefined\n  ) {\n    watch(\n      () => ({\n        ...(\n          proxy as ComponentPublicInstance<{\n            $route: any\n          }>\n        ).$route,\n      }),\n      () => {\n        if (shouldHideWhenRouteChanges.value && indicator.value) {\n          hide()\n        }\n      }\n    )\n  }\n\n  onMounted(() => {\n    onChange(props.modelValue as boolean)\n  })\n\n  return {\n    hide,\n    show,\n    toggle,\n  }\n}\n"],"names":[],"mappings":";;;;;;MAQa,sBAAsB;AAAA,EACjC,YAAY;AAAA,IACV,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAGX,uBAAuB;AAAA;MAGZ,sBAAsB,CAAC;MAUvB,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACuB;AACvB,QAAM,EAAE,YAAY,OAAO,OAAO,SAAS;AAE3C,QAAM,mBAAmB,SAAS,MAChC,WAAW,MAAM;AAKnB,QAAM,uBAAuB,SAAS,MAAM,MAAM,eAAe;AAEjE,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU,UAAU,MAAM;AAC5B;AAAA;AAGF,cAAU,QAAQ;AAClB,QAAI,WAAW,SAAS;AACtB;AAAA;AAAA;AAIJ,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU,UAAU,OAAO;AAC7B;AAAA;AAGF,cAAU,QAAQ;AAElB,QAAI,WAAW,SAAS;AACtB;AAAA;AAAA;AAIJ,QAAM,OAAO,MAAM;AACjB,QACE,MAAM,aAAa,QAClB,WAAW,kBAAkB,CAAC;AAE/B;AAEF,UAAM,aAAa,iBAAiB,SAAS,CAAC;AAE9C,QAAI,YAAY;AACd,WAAK,oBAAoB;AAAA;AAG3B,QAAI,qBAAqB,SAAS,CAAC,YAAY;AAC7C;AAAA;AAAA;AAIJ,QAAM,OAAO,MAAM;AACjB,QAAI,MAAM,aAAa,QAAQ;AAAU;AAEzC,UAAM,aAAa,iBAAiB,SAAS,CAAC;AAE9C,QAAI,YAAY;AACd,WAAK,oBAAoB;AAAA;AAG3B,QAAI,qBAAqB,SAAS,CAAC,YAAY;AAC7C;AAAA;AAAA;AAIJ,QAAM,WAAW,CAAC,QAAiB;AACjC,QAAI,CAAC,OAAO;AAAM;AAClB,QAAI,MAAM,YAAY,KAAK;AACzB,UAAI,iBAAiB,OAAO;AAC1B,aAAK,oBAAoB;AAAA;AAAA,eAElB,UAAU,UAAU,KAAK;AAClC,UAAI,KAAK;AACP;AAAA,aACK;AACL;AAAA;AAAA;AAAA;AAKN,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU,OAAO;AACnB;AAAA,WACK;AACL;AAAA;AAAA;AAIJ,QAAM,MAAM,MAAM,YAAY;AAE9B,MACE,8BACA,WAAW,OAAO,iBAAiB,WAAW,QAC9C;AACA,UACE;AAAO,SAEH,MAGA;AAAA,QAEJ,MAAM;AACJ,UAAI,2BAA2B,SAAS,UAAU,OAAO;AACvD;AAAA;AAAA;AAAA;AAMR,YAAU,MAAM;AACd,aAAS,MAAM;AAAA;AAGjB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-model-toggle/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, watch, onMounted } from 'vue'\nimport { isFunction } from '@vue/shared'\nimport { isBool } from '@element-plus/utils/util'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport isServer from '@element-plus/utils/isServer'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport type { RouteLocationNormalizedLoaded } from 'vue-router'\n\nimport type { Ref, ComponentPublicInstance, ExtractPropTypes } from 'vue'\n\nexport const useModelToggleProps = buildProps({\n  modelValue: {\n    type: definePropType<boolean | null>(Boolean),\n    default: null,\n  },\n  'onUpdate:modelValue': Function,\n})\nexport type UseModelToggleProps = ExtractPropTypes<typeof useModelToggleProps>\n\nexport const useModelToggleEmits = [UPDATE_MODEL_EVENT]\n\nexport type ModelToggleParams = {\n  indicator: Ref<boolean>\n  shouldHideWhenRouteChanges?: Ref<boolean>\n  shouldProceed?: () => boolean\n  onShow?: () => void\n  onHide?: () => void\n}\n\nexport const useModelToggle = ({\n  indicator,\n  shouldHideWhenRouteChanges,\n  shouldProceed,\n  onShow,\n  onHide,\n}: ModelToggleParams) => {\n  const instance = getCurrentInstance()!\n  const props = instance.props as UseModelToggleProps & { disabled: boolean }\n  const { emit } = instance\n\n  const hasUpdateHandler = computed(() =>\n    isFunction(props['onUpdate:modelValue'])\n  )\n  // when it matches the default value we say this is absent\n  // though this could be mistakenly passed from the user but we need to rule out that\n  // condition\n  const isModelBindingAbsent = computed(() => props.modelValue === null)\n\n  const doShow = () => {\n    if (indicator.value === true) {\n      return\n    }\n\n    indicator.value = true\n    if (isFunction(onShow)) {\n      onShow()\n    }\n  }\n\n  const doHide = () => {\n    if (indicator.value === false) {\n      return\n    }\n\n    indicator.value = false\n\n    if (isFunction(onHide)) {\n      onHide()\n    }\n  }\n\n  const show = () => {\n    if (\n      props.disabled === true ||\n      (isFunction(shouldProceed) && !shouldProceed())\n    )\n      return\n\n    const shouldEmit = hasUpdateHandler.value && !isServer\n\n    if (shouldEmit) {\n      emit(UPDATE_MODEL_EVENT, true)\n    }\n\n    if (isModelBindingAbsent.value || !shouldEmit) {\n      doShow()\n    }\n  }\n\n  const hide = () => {\n    if (props.disabled === true || isServer) return\n\n    const shouldEmit = hasUpdateHandler.value && !isServer\n\n    if (shouldEmit) {\n      emit(UPDATE_MODEL_EVENT, false)\n    }\n\n    if (isModelBindingAbsent.value || !shouldEmit) {\n      doHide()\n    }\n  }\n\n  const onChange = (val: boolean) => {\n    if (!isBool(val)) return\n    if (props.disabled && val) {\n      if (hasUpdateHandler.value) {\n        emit(UPDATE_MODEL_EVENT, false)\n      }\n    } else if (indicator.value !== val) {\n      if (val) {\n        doShow()\n      } else {\n        doHide()\n      }\n    }\n  }\n\n  const toggle = () => {\n    if (indicator.value) {\n      hide()\n    } else {\n      show()\n    }\n  }\n\n  watch(() => props.modelValue, onChange as any)\n\n  if (\n    shouldHideWhenRouteChanges &&\n    instance.appContext.config.globalProperties.$route !== undefined\n  ) {\n    watch(\n      () => ({\n        ...(\n          instance.proxy as ComponentPublicInstance<{\n            $route: RouteLocationNormalizedLoaded\n          }>\n        ).$route,\n      }),\n      () => {\n        if (shouldHideWhenRouteChanges.value && indicator.value) {\n          hide()\n        }\n      }\n    )\n  }\n\n  onMounted(() => {\n    onChange(props.modelValue as boolean)\n  })\n\n  return {\n    hide,\n    show,\n    toggle,\n  }\n}\n"],"names":[],"mappings":";;;;;;;MAUa,sBAAsB,WAAW;AAAA,EAC5C,YAAY;AAAA,IACV,MAAM,eAA+B;AAAA,IACrC,SAAS;AAAA;AAAA,EAEX,uBAAuB;AAAA;MAIZ,sBAAsB,CAAC;MAUvB,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACuB;AACvB,QAAM,WAAW;AACjB,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,SAAS;AAEjB,QAAM,mBAAmB,SAAS,MAChC,WAAW,MAAM;AAKnB,QAAM,uBAAuB,SAAS,MAAM,MAAM,eAAe;AAEjE,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU,UAAU,MAAM;AAC5B;AAAA;AAGF,cAAU,QAAQ;AAClB,QAAI,WAAW,SAAS;AACtB;AAAA;AAAA;AAIJ,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU,UAAU,OAAO;AAC7B;AAAA;AAGF,cAAU,QAAQ;AAElB,QAAI,WAAW,SAAS;AACtB;AAAA;AAAA;AAIJ,QAAM,OAAO,MAAM;AACjB,QACE,MAAM,aAAa,QAClB,WAAW,kBAAkB,CAAC;AAE/B;AAEF,UAAM,aAAa,iBAAiB,SAAS,CAAC;AAE9C,QAAI,YAAY;AACd,WAAK,oBAAoB;AAAA;AAG3B,QAAI,qBAAqB,SAAS,CAAC,YAAY;AAC7C;AAAA;AAAA;AAIJ,QAAM,OAAO,MAAM;AACjB,QAAI,MAAM,aAAa,QAAQ;AAAU;AAEzC,UAAM,aAAa,iBAAiB,SAAS,CAAC;AAE9C,QAAI,YAAY;AACd,WAAK,oBAAoB;AAAA;AAG3B,QAAI,qBAAqB,SAAS,CAAC,YAAY;AAC7C;AAAA;AAAA;AAIJ,QAAM,WAAW,CAAC,QAAiB;AACjC,QAAI,CAAC,OAAO;AAAM;AAClB,QAAI,MAAM,YAAY,KAAK;AACzB,UAAI,iBAAiB,OAAO;AAC1B,aAAK,oBAAoB;AAAA;AAAA,eAElB,UAAU,UAAU,KAAK;AAClC,UAAI,KAAK;AACP;AAAA,aACK;AACL;AAAA;AAAA;AAAA;AAKN,QAAM,SAAS,MAAM;AACnB,QAAI,UAAU,OAAO;AACnB;AAAA,WACK;AACL;AAAA;AAAA;AAIJ,QAAM,MAAM,MAAM,YAAY;AAE9B,MACE,8BACA,SAAS,WAAW,OAAO,iBAAiB,WAAW,QACvD;AACA,UACE;AAAO,SAEH,SAAS,MAGT;AAAA,QAEJ,MAAM;AACJ,UAAI,2BAA2B,SAAS,UAAU,OAAO;AACvD;AAAA;AAAA;AAAA;AAMR,YAAU,MAAM;AACd,aAAS,MAAM;AAAA;AAGjB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;"}

package/es/hooks/use-popper/index.mjs

@@ -7,8 +7,8 @@ import { getFirstValidNode } from '../../utils/vnode.mjs';
 import { stop } from '../../utils/dom.mjs';
 import PopupManager from '../../utils/popup-manager.mjs';
 import { throwError } from '../../utils/error.mjs';
-import useTeleport from '../use-teleport/index.mjs';
-import useTimeout from '../use-timeout/index.mjs';
+import { useTeleport } from '../use-teleport/index.mjs';
+import { useTimeout } from '../use-timeout/index.mjs';
 import { useModelToggle } from '../use-model-toggle/index.mjs';
 import { useTransitionFallthrough } from '../use-transition-fallthrough/index.mjs';
 import { defaultPopperOptions, defaultModifiers } from './use-popper-options.mjs';