@element-plus/nightly 0.0.20211231 → 0.0.20220104

package/es/hooks/index.mjs

@@ -2,12 +2,11 @@ export { useAttrs } from './use-attrs/index.mjs';
 export { useDisabled, useSize, useSizeProp } from './use-common-props/index.mjs';
 export { useFocus } from './use-focus/index.mjs';
 export { useFormItem } from './use-form-item/index.mjs';
-export { useGlobalConfig } from './use-global-config/index.mjs';
+export { provideGlobalConfig, 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 { createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps } from './use-model-toggle/index.mjs';
 export { usePreventGlobal } from './use-prevent-global/index.mjs';
 export { useProp } from './use-prop/index.mjs';
 export { useRestoreActive } from './use-restore-active/index.mjs';
@@ -15,4 +14,11 @@ export { useSameTarget } from './use-same-target/index.mjs';
 export { useTeleport } from './use-teleport/index.mjs';
 export { useThrottleRender } from './use-throttle-render/index.mjs';
 export { useTimeout } from './use-timeout/index.mjs';
+export { useTransitionFallthrough, useTransitionFallthroughEmits } from './use-transition-fallthrough/index.mjs';
+export { ID_INJECTION_KEY, useId } from './use-id/index.mjs';
+export { useEscapeKeydown } from './use-escape-keydown/index.mjs';
+export { POPPER_CONTAINER_ID, POPPER_CONTAINER_SELECTOR, usePopperContainer } from './use-popper-container/index.mjs';
+export { useDelayedRender } from './use-intermediate-render/index.mjs';
+export { useDelayedToggle, useDelayedToggleProps } from './use-delayed-toggle/index.mjs';
+export { FORWARD_REF_INJECTION_KEY, useForwardRef, useForwardRefDirective } from './use-forward-ref/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-delayed-toggle/index.d.ts

@@ -0,0 +1,13 @@
+import type { ToRefs, ExtractPropTypes } from 'vue';
+export declare const useDelayedToggleProps: {
+    showAfter: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, number, unknown, unknown, unknown>;
+    hideAfter: import("element-plus/es/utils/props").BuildPropReturn<NumberConstructor, number, unknown, unknown, unknown>;
+};
+export declare type UseDelayedToggleProps = {
+    open: () => void;
+    close: () => void;
+} & ToRefs<ExtractPropTypes<typeof useDelayedToggleProps>>;
+export declare const useDelayedToggle: ({ showAfter, hideAfter, open, close, }: UseDelayedToggleProps) => {
+    onOpen: () => void;
+    onClose: () => void;
+};

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

@@ -0,0 +1,39 @@
+import { unref } from 'vue';
+import { buildProps } from '../../utils/props.mjs';
+import { useTimeout } from '../use-timeout/index.mjs';
+
+const useDelayedToggleProps = buildProps({
+  showAfter: {
+    type: Number,
+    default: 0
+  },
+  hideAfter: {
+    type: Number,
+    default: 200
+  }
+});
+const useDelayedToggle = ({
+  showAfter,
+  hideAfter,
+  open,
+  close
+}) => {
+  const { registerTimeout } = useTimeout();
+  const onOpen = () => {
+    registerTimeout(() => {
+      open();
+    }, unref(showAfter));
+  };
+  const onClose = () => {
+    registerTimeout(() => {
+      close();
+    }, unref(hideAfter));
+  };
+  return {
+    onOpen,
+    onClose
+  };
+};
+
+export { useDelayedToggle, useDelayedToggleProps };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-delayed-toggle/index.ts"],"sourcesContent":["import { unref } from 'vue'\nimport { buildProps } from '@element-plus/utils/props'\nimport { useTimeout } from '../use-timeout'\n\nimport type { ToRefs, ExtractPropTypes } from 'vue'\n\nexport const useDelayedToggleProps = buildProps({\n  showAfter: {\n    type: Number,\n    default: 0,\n  },\n  hideAfter: {\n    type: Number,\n    default: 200,\n  },\n})\n\nexport type UseDelayedToggleProps = {\n  open: () => void\n  close: () => void\n} & ToRefs<ExtractPropTypes<typeof useDelayedToggleProps>>\n\nexport const useDelayedToggle = ({\n  showAfter,\n  hideAfter,\n  open,\n  close,\n}: UseDelayedToggleProps) => {\n  const { registerTimeout } = useTimeout()\n\n  const onOpen = () => {\n    registerTimeout(() => {\n      open()\n    }, unref(showAfter))\n  }\n\n  const onClose = () => {\n    registerTimeout(() => {\n      close()\n    }, unref(hideAfter))\n  }\n\n  return {\n    onOpen,\n    onClose,\n  }\n}\n"],"names":[],"mappings":";;;;AAGY,MAAC,qBAAqB,GAAG,UAAU,CAAC;AAChD,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG,CAAC;AACjC,EAAE,SAAS;AACX,EAAE,SAAS;AACX,EAAE,IAAI;AACN,EAAE,KAAK;AACP,CAAC,KAAK;AACN,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,UAAU,EAAE,CAAC;AAC3C,EAAE,MAAM,MAAM,GAAG,MAAM;AACvB,IAAI,eAAe,CAAC,MAAM;AAC1B,MAAM,IAAI,EAAE,CAAC;AACb,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;AACzB,GAAG,CAAC;AACJ,EAAE,MAAM,OAAO,GAAG,MAAM;AACxB,IAAI,eAAe,CAAC,MAAM;AAC1B,MAAM,KAAK,EAAE,CAAC;AACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;AACzB,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,MAAM;AACV,IAAI,OAAO;AACX,GAAG,CAAC;AACJ;;;;"}

package/es/hooks/use-escape-keydown/index.d.ts

@@ -0,0 +1 @@
+export declare const useEscapeKeydown: (handler?: ((e: KeyboardEvent) => void) | undefined) => void;

package/es/hooks/use-escape-keydown/index.mjs

@@ -0,0 +1,21 @@
+import { onMounted, onBeforeUnmount } from 'vue';
+import { on, off } from '../../utils/dom.mjs';
+import { EVENT_CODE } from '../../utils/aria.mjs';
+
+const useEscapeKeydown = (handler) => {
+  const cachedHandler = (e) => {
+    const event = e;
+    if (event.key === EVENT_CODE.esc) {
+      handler == null ? void 0 : handler(event);
+    }
+  };
+  onMounted(() => {
+    on(document, "keydown", cachedHandler);
+  });
+  onBeforeUnmount(() => {
+    off(document, "keydown", cachedHandler);
+  });
+};
+
+export { useEscapeKeydown };
+//# sourceMappingURL=index.mjs.map

package/es/hooks/use-escape-keydown/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-escape-keydown/index.ts"],"sourcesContent":["import { onMounted, onBeforeUnmount } from 'vue'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\n\nexport const useEscapeKeydown = (handler?: (e: KeyboardEvent) => void) => {\n  const cachedHandler = (e: Event) => {\n    const event = e as KeyboardEvent\n    if (event.key === EVENT_CODE.esc) {\n      handler?.(event)\n    }\n  }\n  onMounted(() => {\n    on(document, 'keydown', cachedHandler)\n  })\n\n  onBeforeUnmount(() => {\n    off(document, 'keydown', cachedHandler)\n  })\n}\n"],"names":[],"mappings":";;;;AAGY,MAAC,gBAAgB,GAAG,CAAC,OAAO,KAAK;AAC7C,EAAE,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK;AAC/B,IAAI,MAAM,KAAK,GAAG,CAAC,CAAC;AACpB,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,GAAG,EAAE;AACtC,MAAM,OAAO,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;AAChD,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AAC3C,GAAG,CAAC,CAAC;AACL,EAAE,eAAe,CAAC,MAAM;AACxB,IAAI,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AAC5C,GAAG,CAAC,CAAC;AACL;;;;"}

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

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

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 const useFocus = (el: Ref<HTMLElement>) => {\n  return {\n    focus: () => {\n      el.value?.focus?.()\n    },\n  }\n}\n"],"names":[],"mappings":"AAAY,MAAC,QAAQ,GAAG,CAAC,EAAE,KAAK;AAChC,EAAE,OAAO;AACT,IAAI,KAAK,EAAE,MAAM;AACjB,MAAM,IAAI,EAAE,EAAE,EAAE,CAAC;AACjB,MAAM,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxF,KAAK;AACL,GAAG,CAAC;AACJ;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-focus/index.ts"],"sourcesContent":["import type { Ref } from 'vue'\n\nexport const useFocus = (\n  el: Ref<{\n    focus: () => void\n  } | null>\n) => {\n  return {\n    focus: () => {\n      el.value?.focus?.()\n    },\n  }\n}\n"],"names":[],"mappings":"AAAY,MAAC,QAAQ,GAAG,CAAC,EAAE,KAAK;AAChC,EAAE,OAAO;AACT,IAAI,KAAK,EAAE,MAAM;AACjB,MAAM,IAAI,EAAE,EAAE,EAAE,CAAC;AACjB,MAAM,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxF,KAAK;AACL,GAAG,CAAC;AACJ;;;;"}

package/es/hooks/use-forward-ref/index.d.ts

@@ -0,0 +1,13 @@
+import type { InjectionKey, Ref } from 'vue';
+declare type ForwardRefSetter = <T>(el: T) => void;
+export declare type ForwardRefInjectionContext = {
+    setForwardRef: ForwardRefSetter;
+};
+export declare const FORWARD_REF_INJECTION_KEY: InjectionKey<ForwardRefInjectionContext>;
+export declare const useForwardRef: <T>(forwardRef: Ref<T | null>) => void;
+export declare const useForwardRefDirective: (setForwardRef: ForwardRefSetter) => {
+    mounted(el: any): void;
+    updated(el: any): void;
+    unmounted(): void;
+};
+export {};

package/es/hooks/use-forward-ref/index.mjs

@@ -0,0 +1,27 @@
+import { provide } from 'vue';
+
+const FORWARD_REF_INJECTION_KEY = Symbol("elForwardRef");
+const useForwardRef = (forwardRef) => {
+  const setForwardRef = (el) => {
+    forwardRef.value = el;
+  };
+  provide(FORWARD_REF_INJECTION_KEY, {
+    setForwardRef
+  });
+};
+const useForwardRefDirective = (setForwardRef) => {
+  return {
+    mounted(el) {
+      setForwardRef(el);
+    },
+    updated(el) {
+      setForwardRef(el);
+    },
+    unmounted() {
+      setForwardRef(null);
+    }
+  };
+};
+
+export { FORWARD_REF_INJECTION_KEY, useForwardRef, useForwardRefDirective };
+//# sourceMappingURL=index.mjs.map

package/es/hooks/use-forward-ref/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-forward-ref/index.ts"],"sourcesContent":["import { provide } from 'vue'\n\nimport type { InjectionKey, Ref } from 'vue'\n\ntype ForwardRefSetter = <T>(el: T) => void\n\nexport type ForwardRefInjectionContext = {\n  setForwardRef: ForwardRefSetter\n}\n\nexport const FORWARD_REF_INJECTION_KEY: InjectionKey<ForwardRefInjectionContext> =\n  Symbol('elForwardRef')\n\nexport const useForwardRef = <T>(forwardRef: Ref<T | null>) => {\n  const setForwardRef = (el: T) => {\n    forwardRef.value = el\n  }\n\n  provide(FORWARD_REF_INJECTION_KEY, {\n    setForwardRef,\n  })\n}\n\nexport const useForwardRefDirective = (setForwardRef: ForwardRefSetter) => {\n  return {\n    mounted(el) {\n      setForwardRef(el)\n    },\n    updated(el) {\n      setForwardRef(el)\n    },\n    unmounted() {\n      setForwardRef(null)\n    },\n  }\n}\n"],"names":[],"mappings":";;AACY,MAAC,yBAAyB,GAAG,MAAM,CAAC,cAAc,EAAE;AACpD,MAAC,aAAa,GAAG,CAAC,UAAU,KAAK;AAC7C,EAAE,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK;AAChC,IAAI,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC;AAC1B,GAAG,CAAC;AACJ,EAAE,OAAO,CAAC,yBAAyB,EAAE;AACrC,IAAI,aAAa;AACjB,GAAG,CAAC,CAAC;AACL,EAAE;AACU,MAAC,sBAAsB,GAAG,CAAC,aAAa,KAAK;AACzD,EAAE,OAAO;AACT,IAAI,OAAO,CAAC,EAAE,EAAE;AAChB,MAAM,aAAa,CAAC,EAAE,CAAC,CAAC;AACxB,KAAK;AACL,IAAI,OAAO,CAAC,EAAE,EAAE;AAChB,MAAM,aAAa,CAAC,EAAE,CAAC,CAAC;AACxB,KAAK;AACL,IAAI,SAAS,GAAG;AAChB,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;AAC1B,KAAK;AACL,GAAG,CAAC;AACJ;;;;"}

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

@@ -1,4 +1,16 @@
-import type { Ref } from 'vue';
+import type { MaybeRef } from '@vueuse/core';
+import type { Ref, App } from 'vue';
 import type { ConfigProviderContext } from 'element-plus/es/tokens';
 export declare function useGlobalConfig<K extends keyof ConfigProviderContext>(key: K): Ref<ConfigProviderContext[K]>;
-export declare function useGlobalConfig(): ConfigProviderContext;
+export declare function useGlobalConfig(): Ref<ConfigProviderContext>;
+export declare const provideGlobalConfig: (config: MaybeRef<ConfigProviderContext>, app?: App<any> | undefined) => import("vue").ComputedRef<{
+    readonly size?: unknown;
+    readonly button?: unknown;
+    readonly zIndex?: unknown;
+    readonly locale?: unknown;
+} & {} & {
+    button?: import("../..").ButtonConfigContext | undefined;
+    size?: import("../../utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown> | undefined;
+    locale?: import("../../locale").Language | undefined;
+    zIndex?: number | undefined;
+}> | undefined;

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

@@ -1,17 +1,37 @@
-import { inject, toRef, ref } from 'vue';
+import { ref, inject, computed, getCurrentInstance, provide, unref } from 'vue';
 import '../../tokens/index.mjs';
-import '../../utils/util.mjs';
+import { merge } from '../../utils/util.mjs';
+import { debugWarn } from '../../utils/error.mjs';
 import { configProviderContextKey } from '../../tokens/config-provider.mjs';
 import { isObject, hasOwn } from '@vue/shared';
 
+const fallback = ref({});
 function useGlobalConfig(key) {
-  const config = inject(configProviderContextKey, {});
+  const config = inject(configProviderContextKey, fallback);
   if (key) {
-    return isObject(config) && hasOwn(config, key) ? toRef(config, key) : ref(void 0);
+    return isObject(config.value) && hasOwn(config.value, key) ? computed(() => config.value[key]) : ref(void 0);
   } else {
     return config;
   }
 }
+const provideGlobalConfig = (config, app) => {
+  var _a;
+  const inSetup = !!getCurrentInstance();
+  const oldConfig = inSetup ? useGlobalConfig() : void 0;
+  const provideFn = (_a = app == null ? void 0 : app.provide) != null ? _a : inSetup ? provide : void 0;
+  if (!provideFn) {
+    debugWarn("provideGlobalConfig", "provideGlobalConfig() can only be used inside setup().");
+    return;
+  }
+  const context = computed(() => {
+    const cfg = unref(config);
+    if (!oldConfig)
+      return cfg;
+    return merge(oldConfig.value, cfg);
+  });
+  provideFn(configProviderContextKey, context);
+  return context;
+};
 
-export { useGlobalConfig };
+export { provideGlobalConfig, 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, ref, toRef } from 'vue'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport { hasOwn, isObject } from '@element-plus/utils/util'\nimport type { Ref } from 'vue'\nimport type { ConfigProviderContext } from '@element-plus/tokens'\n\nexport function useGlobalConfig<K extends keyof ConfigProviderContext>(\n  key: K\n): Ref<ConfigProviderContext[K]>\nexport function useGlobalConfig(): ConfigProviderContext\nexport function useGlobalConfig(key?: keyof ConfigProviderContext) {\n  const config = inject(configProviderContextKey, {})\n  if (key) {\n    return isObject(config) && hasOwn(config, key)\n      ? toRef(config, key)\n      : ref(undefined)\n  } else {\n    return config\n  }\n}\n"],"names":[],"mappings":";;;;;;AAGO,SAAS,eAAe,CAAC,GAAG,EAAE;AACrC,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC,wBAAwB,EAAE,EAAE,CAAC,CAAC;AACtD,EAAE,IAAI,GAAG,EAAE;AACX,IAAI,OAAO,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;AACtF,GAAG,MAAM;AACT,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG;AACH;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-global-config/index.ts"],"sourcesContent":["import { inject, ref, computed, unref, provide, getCurrentInstance } from 'vue'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport { hasOwn, isObject, merge } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport type { MaybeRef } from '@vueuse/core'\nimport type { Ref, App } from 'vue'\nimport type { ConfigProviderContext } from '@element-plus/tokens'\n\nconst fallback = ref<ConfigProviderContext>({})\n\nexport function useGlobalConfig<K extends keyof ConfigProviderContext>(\n  key: K\n): Ref<ConfigProviderContext[K]>\nexport function useGlobalConfig(): Ref<ConfigProviderContext>\nexport function useGlobalConfig(key?: keyof ConfigProviderContext) {\n  const config = inject(configProviderContextKey, fallback)\n  if (key) {\n    return isObject(config.value) && hasOwn(config.value, key)\n      ? computed(() => config.value[key])\n      : ref(undefined)\n  } else {\n    return config\n  }\n}\n\nexport const provideGlobalConfig = (\n  config: MaybeRef<ConfigProviderContext>,\n  app?: App\n) => {\n  const inSetup = !!getCurrentInstance()\n  const oldConfig = inSetup ? useGlobalConfig() : undefined\n\n  const provideFn = app?.provide ?? (inSetup ? provide : undefined)\n  if (!provideFn) {\n    debugWarn(\n      'provideGlobalConfig',\n      'provideGlobalConfig() can only be used inside setup().'\n    )\n    return\n  }\n\n  const context = computed(() => {\n    const cfg = unref(config)\n    if (!oldConfig) return cfg\n    return merge(oldConfig.value, cfg)\n  })\n  provideFn(configProviderContextKey, context)\n  return context\n}\n"],"names":[],"mappings":";;;;;;;AAIA,MAAM,QAAQ,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;AAClB,SAAS,eAAe,CAAC,GAAG,EAAE;AACrC,EAAE,MAAM,MAAM,GAAG,MAAM,CAAC,wBAAwB,EAAE,QAAQ,CAAC,CAAC;AAC5D,EAAE,IAAI,GAAG,EAAE;AACX,IAAI,OAAO,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC;AACjH,GAAG,MAAM;AACT,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG;AACH,CAAC;AACW,MAAC,mBAAmB,GAAG,CAAC,MAAM,EAAE,GAAG,KAAK;AACpD,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,OAAO,GAAG,CAAC,CAAC,kBAAkB,EAAE,CAAC;AACzC,EAAE,MAAM,SAAS,GAAG,OAAO,GAAG,eAAe,EAAE,GAAG,KAAK,CAAC,CAAC;AACzD,EAAE,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,EAAE,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC,CAAC;AACxG,EAAE,IAAI,CAAC,SAAS,EAAE;AAClB,IAAI,SAAS,CAAC,qBAAqB,EAAE,wDAAwD,CAAC,CAAC;AAC/F,IAAI,OAAO;AACX,GAAG;AACH,EAAE,MAAM,OAAO,GAAG,QAAQ,CAAC,MAAM;AACjC,IAAI,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AAC9B,IAAI,IAAI,CAAC,SAAS;AAClB,MAAM,OAAO,GAAG,CAAC;AACjB,IAAI,OAAO,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AACvC,GAAG,CAAC,CAAC;AACL,EAAE,SAAS,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC;AAC/C,EAAE,OAAO,OAAO,CAAC;AACjB;;;;"}

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

@@ -0,0 +1,8 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { MaybeRef } from '@vueuse/core';
+export declare type ElIdInjectionContext = {
+    prefix: number;
+    current: number;
+};
+export declare const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext>;
+export declare const useId: (deterministicId?: MaybeRef<string> | undefined) => Ref<string>;

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

@@ -0,0 +1,24 @@
+import { inject, computed, unref } from 'vue';
+import isServer from '../../utils/isServer.mjs';
+import { debugWarn } from '../../utils/error.mjs';
+
+const defaultIdInjection = {
+  prefix: Math.floor(Math.random() * 1e4),
+  current: 0
+};
+const ID_INJECTION_KEY = Symbol("elIdInjection");
+const useId = (deterministicId) => {
+  const idInjection = inject(ID_INJECTION_KEY, defaultIdInjection);
+  if (isServer && idInjection === defaultIdInjection) {
+    debugWarn("IdInjection", `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
+usage: app.provide(ID_INJECTION_KEY, {
+  prefix: number,
+  current: number,
+})`);
+  }
+  const idRef = computed(() => unref(deterministicId) || `el-id-${idInjection.prefix}-${idInjection.current++}`);
+  return idRef;
+};
+
+export { ID_INJECTION_KEY, useId };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-id/index.ts"],"sourcesContent":["import { computed, inject, unref } from 'vue'\nimport isServer from '@element-plus/utils/isServer'\nimport { debugWarn } from '@element-plus/utils/error'\n\nimport type { InjectionKey, Ref } from 'vue'\nimport type { MaybeRef } from '@vueuse/core'\n\nexport type ElIdInjectionContext = {\n  prefix: number\n  current: number\n}\n\nconst defaultIdInjection = {\n  prefix: Math.floor(Math.random() * 10000),\n  current: 0,\n}\n\nexport const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext> =\n  Symbol('elIdInjection')\n\nexport const useId = (deterministicId?: MaybeRef<string>): Ref<string> => {\n  const idInjection = inject(ID_INJECTION_KEY, defaultIdInjection)\n\n  if (isServer && idInjection === defaultIdInjection) {\n    debugWarn(\n      'IdInjection',\n      `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed\nusage: app.provide(ID_INJECTION_KEY, {\n  prefix: number,\n  current: number,\n})`\n    )\n  }\n\n  const idRef = computed(\n    () =>\n      unref(deterministicId) ||\n      `el-id-${idInjection.prefix}-${idInjection.current++}`\n  )\n\n  return idRef\n}\n"],"names":[],"mappings":";;;;AAGA,MAAM,kBAAkB,GAAG;AAC3B,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC;AACzC,EAAE,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AACU,MAAC,gBAAgB,GAAG,MAAM,CAAC,eAAe,EAAE;AAC5C,MAAC,KAAK,GAAG,CAAC,eAAe,KAAK;AAC1C,EAAE,MAAM,WAAW,GAAG,MAAM,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;AACnE,EAAE,IAAI,QAAQ,IAAI,WAAW,KAAK,kBAAkB,EAAE;AACtD,IAAI,SAAS,CAAC,aAAa,EAAE,CAAC;AAC9B;AACA;AACA;AACA,EAAE,CAAC,CAAC,CAAC;AACL,GAAG;AACH,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;AACjH,EAAE,OAAO,KAAK,CAAC;AACf;;;;"}

package/es/hooks/use-intermediate-render/index.d.ts

@@ -0,0 +1,11 @@
+import type { Ref } from 'vue';
+export declare type UseDelayedRenderProps = {
+    indicator: Ref<boolean>;
+    intermediateIndicator: Ref<boolean>;
+    shouldSetIntermediate?: (step: 'show' | 'hide') => boolean;
+    beforeShow?: () => void;
+    beforeHide?: () => void;
+    afterShow?: () => void;
+    afterHide?: () => void;
+};
+export declare const useDelayedRender: ({ indicator, intermediateIndicator, shouldSetIntermediate, beforeShow, afterShow, afterHide, beforeHide, }: UseDelayedRenderProps) => void;

package/es/hooks/use-intermediate-render/index.mjs

@@ -0,0 +1,43 @@
+import { watch, unref, nextTick } from 'vue';
+
+const useDelayedRender = ({
+  indicator,
+  intermediateIndicator,
+  shouldSetIntermediate = () => true,
+  beforeShow,
+  afterShow,
+  afterHide,
+  beforeHide
+}) => {
+  watch(() => unref(indicator), (val) => {
+    if (val) {
+      beforeShow == null ? void 0 : beforeShow();
+      nextTick(() => {
+        if (!unref(indicator))
+          return;
+        if (shouldSetIntermediate("show")) {
+          intermediateIndicator.value = true;
+        }
+      });
+    } else {
+      beforeHide == null ? void 0 : beforeHide();
+      nextTick(() => {
+        if (unref(indicator))
+          return;
+        if (shouldSetIntermediate("hide")) {
+          intermediateIndicator.value = false;
+        }
+      });
+    }
+  });
+  watch(() => intermediateIndicator.value, (val) => {
+    if (val) {
+      afterShow == null ? void 0 : afterShow();
+    } else {
+      afterHide == null ? void 0 : afterHide();
+    }
+  });
+};
+
+export { useDelayedRender };
+//# sourceMappingURL=index.mjs.map

package/es/hooks/use-intermediate-render/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-intermediate-render/index.ts"],"sourcesContent":["import { nextTick, watch, unref } from 'vue'\n\nimport type { Ref } from 'vue'\n\nexport type UseDelayedRenderProps = {\n  indicator: Ref<boolean>\n  intermediateIndicator: Ref<boolean>\n  shouldSetIntermediate?: (step: 'show' | 'hide') => boolean\n  beforeShow?: () => void\n  beforeHide?: () => void\n  afterShow?: () => void\n  afterHide?: () => void\n}\n\nexport const useDelayedRender = ({\n  indicator,\n  intermediateIndicator,\n  shouldSetIntermediate = () => true,\n  beforeShow,\n  afterShow,\n  afterHide,\n  beforeHide,\n}: UseDelayedRenderProps) => {\n  watch(\n    () => unref(indicator),\n    (val) => {\n      if (val) {\n        beforeShow?.()\n        nextTick(() => {\n          if (!unref(indicator)) return\n          if (shouldSetIntermediate('show')) {\n            intermediateIndicator.value = true\n          }\n        })\n      } else {\n        beforeHide?.()\n        nextTick(() => {\n          if (unref(indicator)) return\n\n          if (shouldSetIntermediate('hide')) {\n            intermediateIndicator.value = false\n          }\n        })\n      }\n    }\n  )\n\n  // because we don't always set the value ourselves, so that we\n  // simply watch the value's state, then invoke the corresponding hook.\n  watch(\n    () => intermediateIndicator.value,\n    (val) => {\n      if (val) {\n        afterShow?.()\n      } else {\n        afterHide?.()\n      }\n    }\n  )\n}\n"],"names":[],"mappings":";;AACY,MAAC,gBAAgB,GAAG,CAAC;AACjC,EAAE,SAAS;AACX,EAAE,qBAAqB;AACvB,EAAE,qBAAqB,GAAG,MAAM,IAAI;AACpC,EAAE,UAAU;AACZ,EAAE,SAAS;AACX,EAAE,SAAS;AACX,EAAE,UAAU;AACZ,CAAC,KAAK;AACN,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,KAAK;AACzC,IAAI,IAAI,GAAG,EAAE;AACb,MAAM,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;AACjD,MAAM,QAAQ,CAAC,MAAM;AACrB,QAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;AAC7B,UAAU,OAAO;AACjB,QAAQ,IAAI,qBAAqB,CAAC,MAAM,CAAC,EAAE;AAC3C,UAAU,qBAAqB,CAAC,KAAK,GAAG,IAAI,CAAC;AAC7C,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK,MAAM;AACX,MAAM,UAAU,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;AACjD,MAAM,QAAQ,CAAC,MAAM;AACrB,QAAQ,IAAI,KAAK,CAAC,SAAS,CAAC;AAC5B,UAAU,OAAO;AACjB,QAAQ,IAAI,qBAAqB,CAAC,MAAM,CAAC,EAAE;AAC3C,UAAU,qBAAqB,CAAC,KAAK,GAAG,KAAK,CAAC;AAC9C,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,KAAK,CAAC,MAAM,qBAAqB,CAAC,KAAK,EAAE,CAAC,GAAG,KAAK;AACpD,IAAI,IAAI,GAAG,EAAE;AACb,MAAM,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,SAAS,EAAE,CAAC;AAC/C,KAAK,MAAM;AACX,MAAM,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,SAAS,EAAE,CAAC;AAC/C,KAAK;AACL,GAAG,CAAC,CAAC;AACL;;;;"}

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

@@ -1,10 +1,24 @@
 import type { Ref, ExtractPropTypes } from 'vue';
-export declare const useModelToggleProps: {
-    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 const createModelToggleComposable: (name: string) => {
+    useModelToggle: ({ indicator, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }: ModelToggleParams) => {
+        hide: () => void;
+        show: () => void;
+        toggle: () => void;
+    };
+    useModelToggleProps: {
+        [x: string]: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<boolean | null>, null, false, never, never> | import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<(val: boolean) => void>, never, false, never, never>;
+    };
+    useModelToggleEmits: string[];
 };
+declare const useModelToggle: ({ indicator, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }: ModelToggleParams) => {
+    hide: () => void;
+    show: () => void;
+    toggle: () => void;
+}, useModelToggleProps: {
+    [x: string]: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<boolean | null>, null, false, never, never> | import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<(val: boolean) => void>, never, false, never, never>;
+}, useModelToggleEmits: string[];
+export { useModelToggle, useModelToggleEmits, useModelToggleProps };
 export declare type UseModelToggleProps = ExtractPropTypes<typeof useModelToggleProps>;
-export declare const useModelToggleEmits: string[];
 export declare type ModelToggleParams = {
     indicator: Ref<boolean>;
     shouldHideWhenRouteChanges?: Ref<boolean>;
@@ -12,8 +26,3 @@ export declare type ModelToggleParams = {
     onShow?: () => void;
     onHide?: () => void;
 };
-export declare const useModelToggle: ({ indicator, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide, }: ModelToggleParams) => {
-    hide: () => void;
-    show: () => void;
-    toggle: () => void;
-};

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

@@ -2,110 +2,120 @@ import { getCurrentInstance, computed, watch, onMounted } from 'vue';
 import { isFunction } from '@vue/shared';
 import { isClient } from '@vueuse/core';
 import { isBool } from '../../utils/util.mjs';
-import { UPDATE_MODEL_EVENT } from '../../utils/constants.mjs';
-import { buildProps, definePropType } from '../../utils/props.mjs';
+import { buildProp, definePropType } from '../../utils/props.mjs';
 
-const useModelToggleProps = buildProps({
-  modelValue: {
-    type: definePropType(Boolean),
-    default: null
-  },
-  "onUpdate:modelValue": Function
-});
-const useModelToggleEmits = [UPDATE_MODEL_EVENT];
-const useModelToggle = ({
-  indicator,
-  shouldHideWhenRouteChanges,
-  shouldProceed,
-  onShow,
-  onHide
-}) => {
-  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 = () => {
-    if (indicator.value === true) {
-      return;
-    }
-    indicator.value = true;
-    if (isFunction(onShow)) {
-      onShow();
-    }
+const createModelToggleComposable = (name) => {
+  const useModelToggleProps2 = {
+    [name]: buildProp({
+      type: definePropType(Boolean),
+      default: null
+    }),
+    [`onUpdate:${name}`]: buildProp({
+      type: definePropType(Function)
+    })
   };
-  const doHide = () => {
-    if (indicator.value === false) {
-      return;
-    }
-    indicator.value = false;
-    if (isFunction(onHide)) {
-      onHide();
-    }
-  };
-  const show = () => {
-    if (props.disabled === true || isFunction(shouldProceed) && !shouldProceed())
-      return;
-    const shouldEmit = hasUpdateHandler.value && isClient;
-    if (shouldEmit) {
-      emit(UPDATE_MODEL_EVENT, true);
-    }
-    if (isModelBindingAbsent.value || !shouldEmit) {
-      doShow();
-    }
-  };
-  const hide = () => {
-    if (props.disabled === true || !isClient)
-      return;
-    const shouldEmit = hasUpdateHandler.value && isClient;
-    if (shouldEmit) {
-      emit(UPDATE_MODEL_EVENT, false);
-    }
-    if (isModelBindingAbsent.value || !shouldEmit) {
-      doHide();
-    }
-  };
-  const onChange = (val) => {
-    if (!isBool(val))
-      return;
-    if (props.disabled && val) {
-      if (hasUpdateHandler.value) {
-        emit(UPDATE_MODEL_EVENT, false);
+  const useModelToggleEmits2 = [`update:${name}`];
+  const useModelToggle2 = ({
+    indicator,
+    shouldHideWhenRouteChanges,
+    shouldProceed,
+    onShow,
+    onHide
+  }) => {
+    const instance = getCurrentInstance();
+    const props = instance.props;
+    const { emit } = instance;
+    const updateEventKey = `update:${name}`;
+    const hasUpdateHandler = computed(() => isFunction(props[`onUpdate:${name}`]));
+    const isModelBindingAbsent = computed(() => props[name] === null);
+    const doShow = () => {
+      if (indicator.value === true) {
+        return;
+      }
+      indicator.value = true;
+      if (isFunction(onShow)) {
+        onShow();
+      }
+    };
+    const doHide = () => {
+      if (indicator.value === false) {
+        return;
       }
-    } else if (indicator.value !== val) {
-      if (val) {
+      indicator.value = false;
+      if (isFunction(onHide)) {
+        onHide();
+      }
+    };
+    const show = () => {
+      if (props.disabled === true || isFunction(shouldProceed) && !shouldProceed())
+        return;
+      const shouldEmit = hasUpdateHandler.value && isClient;
+      if (shouldEmit) {
+        emit(updateEventKey, true);
+      }
+      if (isModelBindingAbsent.value || !shouldEmit) {
         doShow();
-      } else {
+      }
+    };
+    const hide = () => {
+      if (props.disabled === true || !isClient)
+        return;
+      const shouldEmit = hasUpdateHandler.value && isClient;
+      if (shouldEmit) {
+        emit(updateEventKey, false);
+      }
+      if (isModelBindingAbsent.value || !shouldEmit) {
         doHide();
       }
-    }
-  };
-  const toggle = () => {
-    if (indicator.value) {
-      hide();
-    } else {
-      show();
-    }
-  };
-  watch(() => props.modelValue, onChange);
-  if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
-    watch(() => ({
-      ...instance.proxy.$route
-    }), () => {
-      if (shouldHideWhenRouteChanges.value && indicator.value) {
+    };
+    const onChange = (val) => {
+      if (!isBool(val))
+        return;
+      if (props.disabled && val) {
+        if (hasUpdateHandler.value) {
+          emit(updateEventKey, false);
+        }
+      } else if (indicator.value !== val) {
+        if (val) {
+          doShow();
+        } else {
+          doHide();
+        }
+      }
+    };
+    const toggle = () => {
+      if (indicator.value) {
         hide();
+      } else {
+        show();
       }
+    };
+    watch(() => props[name], onChange);
+    if (shouldHideWhenRouteChanges && instance.appContext.config.globalProperties.$route !== void 0) {
+      watch(() => ({
+        ...instance.proxy.$route
+      }), () => {
+        if (shouldHideWhenRouteChanges.value && indicator.value) {
+          hide();
+        }
+      });
+    }
+    onMounted(() => {
+      onChange(props[name]);
     });
-  }
-  onMounted(() => {
-    onChange(props.modelValue);
-  });
+    return {
+      hide,
+      show,
+      toggle
+    };
+  };
   return {
-    hide,
-    show,
-    toggle
+    useModelToggle: useModelToggle2,
+    useModelToggleProps: useModelToggleProps2,
+    useModelToggleEmits: useModelToggleEmits2
   };
 };
+const { useModelToggle, useModelToggleProps, useModelToggleEmits } = createModelToggleComposable("modelValue");
 
-export { useModelToggle, useModelToggleEmits, useModelToggleProps };
+export { createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps };
 //# sourceMappingURL=index.mjs.map