feat: initial commit - Phase 1 & 2 core features

This commit is contained in:
hiderfong
2026-04-22 17:07:33 +08:00
commit 1773bda06b
25005 changed files with 6252106 additions and 0 deletions
+34
View File
@@ -0,0 +1,34 @@
import { useAttrs } from "./use-attrs/index.js";
import { useCalcInputWidth } from "./use-calc-input-width/index.js";
import { useDeprecated } from "./use-deprecated/index.js";
import { useDraggable } from "./use-draggable/index.js";
import { useFocus } from "./use-focus/index.js";
import { LocaleContext, LocaleKeys, Translator, TranslatorOption, buildLocaleContext, buildTranslator, localeContextKey, translate, useLocale } from "./use-locale/index.js";
import { UseNamespaceReturn, defaultNamespace, namespaceContextKey, useGetDerivedNamespace, useNamespace } from "./use-namespace/index.js";
import { UseLockScreenOptions, useLockscreen } from "./use-lockscreen/index.js";
import { useModal } from "./use-modal/index.js";
import { ModelToggleParams, UseModelToggleProps, UseModelTogglePropsGeneric, UseModelTogglePropsPublic, UseModelTogglePropsRaw, createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps } from "./use-model-toggle/index.js";
import { usePreventGlobal } from "./use-prevent-global/index.js";
import { useProp } from "./use-prop/index.js";
import { PartialOptions, UsePopperReturn, usePopper } from "./use-popper/index.js";
import { useSameTarget } from "./use-same-target/index.js";
import { useTeleport } from "./use-teleport/index.js";
import { ThrottleType, useThrottleRender } from "./use-throttle-render/index.js";
import { useTimeout } from "./use-timeout/index.js";
import { useTransitionFallthrough, useTransitionFallthroughEmits } from "./use-transition-fallthrough/index.js";
import { ElIdInjectionContext, ID_INJECTION_KEY, useId, useIdInjection } from "./use-id/index.js";
import { useEscapeKeydown } from "./use-escape-keydown/index.js";
import { usePopperContainer, usePopperContainerId } from "./use-popper-container/index.js";
import { UseDelayedRenderProps, useDelayedRender } from "./use-intermediate-render/index.js";
import { DelayedToggle, UseDelayedToggleProps, useDelayedToggle, useDelayedToggleProps, useDelayedTogglePropsDefaults } from "./use-delayed-toggle/index.js";
import { FORWARD_REF_INJECTION_KEY, ForwardRefInjectionContext, useForwardRef, useForwardRefDirective } from "./use-forward-ref/index.js";
import { ElZIndexInjectionContext, UseZIndexReturn, ZINDEX_INJECTION_KEY, defaultInitialZIndex, useZIndex, zIndexContextKey } from "./use-z-index/index.js";
import { ArrowMiddlewareProps, UseFloatingProps, arrowMiddleware, getPositionDataWithUnit, useFloating, useFloatingProps } from "./use-floating/index.js";
import { useCursor } from "./use-cursor/index.js";
import { useOrderedChildren } from "./use-ordered-children/index.js";
import { SIZE_INJECTION_KEY, SizeContext, useGlobalSize, useSizeProp, useSizeProps } from "./use-size/index.js";
import { useFocusController } from "./use-focus-controller/index.js";
import { useComposition } from "./use-composition/index.js";
import { DEFAULT_EMPTY_VALUES, DEFAULT_VALUE_ON_CLEAR, SCOPE, UseEmptyValuesProps, emptyValuesContextKey, useEmptyValues, useEmptyValuesProps } from "./use-empty-values/index.js";
import { AriaProps, ariaProps, useAriaProps } from "./use-aria/index.js";
export { AriaProps, ArrowMiddlewareProps, DEFAULT_EMPTY_VALUES, DEFAULT_VALUE_ON_CLEAR, DelayedToggle, ElIdInjectionContext, ElZIndexInjectionContext, FORWARD_REF_INJECTION_KEY, ForwardRefInjectionContext, ID_INJECTION_KEY, LocaleContext, LocaleKeys, ModelToggleParams, PartialOptions, SCOPE, SIZE_INJECTION_KEY, SizeContext, ThrottleType, Translator, TranslatorOption, UseDelayedRenderProps, UseDelayedToggleProps, UseEmptyValuesProps, UseFloatingProps, UseLockScreenOptions, UseModelToggleProps, UseModelTogglePropsGeneric, UseModelTogglePropsPublic, UseModelTogglePropsRaw, UseNamespaceReturn, UsePopperReturn, UseZIndexReturn, ZINDEX_INJECTION_KEY, ariaProps, arrowMiddleware, buildLocaleContext, buildTranslator, createModelToggleComposable, defaultInitialZIndex, defaultNamespace, emptyValuesContextKey, getPositionDataWithUnit, localeContextKey, namespaceContextKey, translate, useAriaProps, useAttrs, useCalcInputWidth, useComposition, useCursor, useDelayedRender, useDelayedToggle, useDelayedToggleProps, useDelayedTogglePropsDefaults, useDeprecated, useDraggable, useEmptyValues, useEmptyValuesProps, useEscapeKeydown, useFloating, useFloatingProps, useFocus, useFocusController, useForwardRef, useForwardRefDirective, useGetDerivedNamespace, useGlobalSize, useId, useIdInjection, useLocale, useLockscreen, useModal, useModelToggle, useModelToggleEmits, useModelToggleProps, useNamespace, useOrderedChildren, usePopper, usePopperContainer, usePopperContainerId, usePreventGlobal, useProp, useSameTarget, useSizeProp, useSizeProps, useTeleport, useThrottleRender, useTimeout, useTransitionFallthrough, useTransitionFallthroughEmits, useZIndex, zIndexContextKey };
+35
View File
@@ -0,0 +1,35 @@
import { useAttrs } from "./use-attrs/index.mjs";
import { useCalcInputWidth } from "./use-calc-input-width/index.mjs";
import { useDeprecated } from "./use-deprecated/index.mjs";
import { useDraggable } from "./use-draggable/index.mjs";
import { useFocus } from "./use-focus/index.mjs";
import { buildLocaleContext, buildTranslator, localeContextKey, translate, useLocale } from "./use-locale/index.mjs";
import { defaultNamespace, namespaceContextKey, useGetDerivedNamespace, useNamespace } from "./use-namespace/index.mjs";
import { useLockscreen } from "./use-lockscreen/index.mjs";
import { useModal } from "./use-modal/index.mjs";
import { createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps } from "./use-model-toggle/index.mjs";
import { usePreventGlobal } from "./use-prevent-global/index.mjs";
import { useProp } from "./use-prop/index.mjs";
import { usePopper } from "./use-popper/index.mjs";
import { useSameTarget } from "./use-same-target/index.mjs";
import { useTeleport } from "./use-teleport/index.mjs";
import { useThrottleRender } from "./use-throttle-render/index.mjs";
import { useTimeout } from "./use-timeout/index.mjs";
import { useTransitionFallthrough, useTransitionFallthroughEmits } from "./use-transition-fallthrough/index.mjs";
import { ID_INJECTION_KEY, useId, useIdInjection } from "./use-id/index.mjs";
import { useEscapeKeydown } from "./use-escape-keydown/index.mjs";
import { usePopperContainer, usePopperContainerId } from "./use-popper-container/index.mjs";
import { useDelayedRender } from "./use-intermediate-render/index.mjs";
import { useDelayedToggle, useDelayedToggleProps, useDelayedTogglePropsDefaults } from "./use-delayed-toggle/index.mjs";
import { FORWARD_REF_INJECTION_KEY, useForwardRef, useForwardRefDirective } from "./use-forward-ref/index.mjs";
import { ZINDEX_INJECTION_KEY, defaultInitialZIndex, useZIndex, zIndexContextKey } from "./use-z-index/index.mjs";
import { arrowMiddleware, getPositionDataWithUnit, useFloating, useFloatingProps } from "./use-floating/index.mjs";
import { useCursor } from "./use-cursor/index.mjs";
import { useOrderedChildren } from "./use-ordered-children/index.mjs";
import { SIZE_INJECTION_KEY, useGlobalSize, useSizeProp, useSizeProps } from "./use-size/index.mjs";
import { useFocusController } from "./use-focus-controller/index.mjs";
import { useComposition } from "./use-composition/index.mjs";
import { DEFAULT_EMPTY_VALUES, DEFAULT_VALUE_ON_CLEAR, SCOPE, emptyValuesContextKey, useEmptyValues, useEmptyValuesProps } from "./use-empty-values/index.mjs";
import { ariaProps, useAriaProps } from "./use-aria/index.mjs";
export { DEFAULT_EMPTY_VALUES, DEFAULT_VALUE_ON_CLEAR, FORWARD_REF_INJECTION_KEY, ID_INJECTION_KEY, SCOPE, SIZE_INJECTION_KEY, ZINDEX_INJECTION_KEY, ariaProps, arrowMiddleware, buildLocaleContext, buildTranslator, createModelToggleComposable, defaultInitialZIndex, defaultNamespace, emptyValuesContextKey, getPositionDataWithUnit, localeContextKey, namespaceContextKey, translate, useAriaProps, useAttrs, useCalcInputWidth, useComposition, useCursor, useDelayedRender, useDelayedToggle, useDelayedToggleProps, useDelayedTogglePropsDefaults, useDeprecated, useDraggable, useEmptyValues, useEmptyValuesProps, useEscapeKeydown, useFloating, useFloatingProps, useFocus, useFocusController, useForwardRef, useForwardRefDirective, useGetDerivedNamespace, useGlobalSize, useId, useIdInjection, useLocale, useLockscreen, useModal, useModelToggle, useModelToggleEmits, useModelToggleProps, useNamespace, useOrderedChildren, usePopper, usePopperContainer, usePopperContainerId, usePreventGlobal, useProp, useSameTarget, useSizeProp, useSizeProps, useTeleport, useThrottleRender, useTimeout, useTransitionFallthrough, useTransitionFallthroughEmits, useZIndex, zIndexContextKey };
+42
View File
@@ -0,0 +1,42 @@
import * as vue from "vue";
//#region ../../packages/hooks/use-aria/index.d.ts
interface AriaProps {
/**
* @description native `aria-label` attribute
*/
ariaLabel?: string;
/**
* @description native `aria-orientation` attribute
*/
ariaOrientation?: 'horizontal' | 'vertical' | 'undefined';
/**
* @description native `aria-controls` attribute
*/
ariaControls?: string;
}
/**
* @deprecated Removed after 3.0.0, Use `AriaProps` instead.
*/
declare const ariaProps: {
ariaLabel: StringConstructor;
ariaOrientation: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
ariaControls: StringConstructor;
};
declare const useAriaProps: <T extends keyof typeof ariaProps>(arias: Array<T>) => Pick<{
ariaLabel: StringConstructor;
ariaOrientation: {
readonly type: vue.PropType<string>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
ariaControls: StringConstructor;
}, T>;
//#endregion
export { AriaProps, ariaProps, useAriaProps };
+26
View File
@@ -0,0 +1,26 @@
import { buildProps } from "../../utils/vue/props/runtime.mjs";
import { pick } from "lodash-unified";
//#region ../../packages/hooks/use-aria/index.ts
/**
* @deprecated Removed after 3.0.0, Use `AriaProps` instead.
*/
const ariaProps = buildProps({
ariaLabel: String,
ariaOrientation: {
type: String,
values: [
"horizontal",
"vertical",
"undefined"
]
},
ariaControls: String
});
const useAriaProps = (arias) => {
return pick(ariaProps, arias);
};
//#endregion
export { ariaProps, useAriaProps };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-aria/index.ts"],"sourcesContent":["import { pick } from 'lodash-unified'\nimport { buildProps } from '@element-plus/utils'\n\nexport interface AriaProps {\n /**\n * @description native `aria-label` attribute\n */\n ariaLabel?: string\n /**\n * @description native `aria-orientation` attribute\n */\n ariaOrientation?: 'horizontal' | 'vertical' | 'undefined'\n /**\n * @description native `aria-controls` attribute\n */\n ariaControls?: string\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `AriaProps` instead.\n */\nexport const ariaProps = buildProps({\n /**\n * @description native `aria-label` attribute\n */\n ariaLabel: String,\n /**\n * @description native `aria-orientation` attribute\n */\n ariaOrientation: {\n type: String,\n values: ['horizontal', 'vertical', 'undefined'],\n },\n /**\n * @description native `aria-controls` attribute\n */\n ariaControls: String,\n})\n\nexport const useAriaProps = <T extends keyof typeof ariaProps>(\n arias: Array<T>\n) => {\n return pick<typeof ariaProps, T>(ariaProps, arias)\n}\n"],"mappings":";;;;;;;AAqBA,MAAa,YAAY,WAAW;CAIlC,WAAW;CAIX,iBAAiB;EACf,MAAM;EACN,QAAQ;GAAC;GAAc;GAAY;GAAY;EAChD;CAID,cAAc;CACf,CAAC;AAEF,MAAa,gBACX,UACG;AACH,QAAO,KAA0B,WAAW,MAAM"}
+10
View File
@@ -0,0 +1,10 @@
import { ComputedRef } from "vue";
//#region ../../packages/hooks/use-attrs/index.d.ts
interface Params {
excludeListeners?: boolean;
excludeKeys?: ComputedRef<string[]>;
}
declare const useAttrs: (params?: Params) => ComputedRef<Record<string, unknown>>;
//#endregion
export { useAttrs };
+23
View File
@@ -0,0 +1,23 @@
import { debugWarn } from "../../utils/error.mjs";
import { fromPairs } from "lodash-unified";
import { computed, getCurrentInstance } from "vue";
//#region ../../packages/hooks/use-attrs/index.ts
const DEFAULT_EXCLUDE_KEYS = ["class", "style"];
const LISTENER_PREFIX = /^on[A-Z]/;
const useAttrs = (params = {}) => {
const { excludeListeners = false, excludeKeys } = params;
const allExcludeKeys = computed(() => {
return (excludeKeys?.value || []).concat(DEFAULT_EXCLUDE_KEYS);
});
const instance = getCurrentInstance();
if (!instance) {
debugWarn("use-attrs", "getCurrentInstance() returned null. useAttrs() must be called at the top of a setup function");
return computed(() => ({}));
}
return computed(() => fromPairs(Object.entries(instance.proxy?.$attrs).filter(([key]) => !allExcludeKeys.value.includes(key) && !(excludeListeners && LISTENER_PREFIX.test(key)))));
};
//#endregion
export { useAttrs };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-attrs/index.ts"],"sourcesContent":["import { computed, getCurrentInstance } from 'vue'\nimport { fromPairs } from 'lodash-unified'\nimport { debugWarn } from '@element-plus/utils'\n\nimport type { ComputedRef } from 'vue'\n\ninterface Params {\n excludeListeners?: boolean\n excludeKeys?: ComputedRef<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 = computed<string[]>(() => {\n return (excludeKeys?.value || []).concat(DEFAULT_EXCLUDE_KEYS)\n })\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.value.includes(key) &&\n !(excludeListeners && LISTENER_PREFIX.test(key))\n )\n )\n )\n}\n"],"mappings":";;;;;AAWA,MAAM,uBAAuB,CAAC,SAAS,QAAQ;AAC/C,MAAM,kBAAkB;AAExB,MAAa,YACX,SAAiB,EAAE,KACsB;CACzC,MAAM,EAAE,mBAAmB,OAAO,gBAAgB;CAClD,MAAM,iBAAiB,eAAyB;AAC9C,UAAQ,aAAa,SAAS,EAAE,EAAE,OAAO,qBAAqB;GAC9D;CAEF,MAAM,WAAW,oBAAoB;AACrC,KAAI,CAAC,UAAU;AACb,YACE,aACA,+FACD;AACD,SAAO,gBAAgB,EAAE,EAAE;;AAG7B,QAAO,eACL,UACE,OAAO,QAAQ,SAAS,OAAO,OAAQ,CAAC,QACrC,CAAC,SACA,CAAC,eAAe,MAAM,SAAS,IAAI,IACnC,EAAE,oBAAoB,gBAAgB,KAAK,IAAI,EAClD,CACF,CACF"}
@@ -0,0 +1,12 @@
import * as vue from "vue";
//#region ../../packages/hooks/use-calc-input-width/index.d.ts
declare function useCalcInputWidth(): {
calculatorRef: vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
calculatorWidth: vue.Ref<number, number>;
inputStyle: vue.ComputedRef<{
minWidth: string;
}>;
};
//#endregion
export { useCalcInputWidth };
@@ -0,0 +1,23 @@
import { MINIMUM_INPUT_WIDTH } from "../../constants/form.mjs";
import { useResizeObserver } from "@vueuse/core";
import { computed, ref, shallowRef } from "vue";
//#region ../../packages/hooks/use-calc-input-width/index.ts
function useCalcInputWidth() {
const calculatorRef = shallowRef();
const calculatorWidth = ref(0);
const inputStyle = computed(() => ({ minWidth: `${Math.max(calculatorWidth.value, MINIMUM_INPUT_WIDTH)}px` }));
const resetCalculatorWidth = () => {
calculatorWidth.value = calculatorRef.value?.getBoundingClientRect().width ?? 0;
};
useResizeObserver(calculatorRef, resetCalculatorWidth);
return {
calculatorRef,
calculatorWidth,
inputStyle
};
}
//#endregion
export { useCalcInputWidth };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-calc-input-width/index.ts"],"sourcesContent":["import { computed, ref, shallowRef } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { MINIMUM_INPUT_WIDTH } from '@element-plus/constants'\n\nexport function useCalcInputWidth() {\n const calculatorRef = shallowRef<HTMLElement>()\n const calculatorWidth = ref(0)\n\n const inputStyle = computed(() => ({\n minWidth: `${Math.max(calculatorWidth.value, MINIMUM_INPUT_WIDTH)}px`,\n }))\n\n const resetCalculatorWidth = () => {\n calculatorWidth.value =\n calculatorRef.value?.getBoundingClientRect().width ?? 0\n }\n\n useResizeObserver(calculatorRef, resetCalculatorWidth)\n\n return {\n calculatorRef,\n calculatorWidth,\n inputStyle,\n }\n}\n"],"mappings":";;;;;AAIA,SAAgB,oBAAoB;CAClC,MAAM,gBAAgB,YAAyB;CAC/C,MAAM,kBAAkB,IAAI,EAAE;CAE9B,MAAM,aAAa,gBAAgB,EACjC,UAAU,GAAG,KAAK,IAAI,gBAAgB,OAAO,oBAAoB,CAAC,KACnE,EAAE;CAEH,MAAM,6BAA6B;AACjC,kBAAgB,QACd,cAAc,OAAO,uBAAuB,CAAC,SAAS;;AAG1D,mBAAkB,eAAe,qBAAqB;AAEtD,QAAO;EACL;EACA;EACA;EACD"}
+19
View File
@@ -0,0 +1,19 @@
import * as vue from "vue";
//#region ../../packages/hooks/use-composition/index.d.ts
interface UseCompositionOptions {
afterComposition: (event: CompositionEvent) => void;
emit?: ((event: 'compositionstart', evt: CompositionEvent) => void) & ((event: 'compositionupdate', evt: CompositionEvent) => void) & ((event: 'compositionend', evt: CompositionEvent) => void);
}
declare function useComposition({
afterComposition,
emit
}: UseCompositionOptions): {
isComposing: vue.Ref<boolean, boolean>;
handleComposition: (event: CompositionEvent) => void;
handleCompositionStart: (event: CompositionEvent) => void;
handleCompositionUpdate: (event: CompositionEvent) => void;
handleCompositionEnd: (event: CompositionEvent) => void;
};
//#endregion
export { useComposition };
+35
View File
@@ -0,0 +1,35 @@
import { nextTick, ref } from "vue";
//#region ../../packages/hooks/use-composition/index.ts
function useComposition({ afterComposition, emit }) {
const isComposing = ref(false);
const handleCompositionStart = (event) => {
emit?.("compositionstart", event);
isComposing.value = true;
};
const handleCompositionUpdate = (event) => {
emit?.("compositionupdate", event);
isComposing.value = true;
};
const handleCompositionEnd = (event) => {
emit?.("compositionend", event);
if (isComposing.value) {
isComposing.value = false;
nextTick(() => afterComposition(event));
}
};
const handleComposition = (event) => {
event.type === "compositionend" ? handleCompositionEnd(event) : handleCompositionUpdate(event);
};
return {
isComposing,
handleComposition,
handleCompositionStart,
handleCompositionUpdate,
handleCompositionEnd
};
}
//#endregion
export { useComposition };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-composition/index.ts"],"sourcesContent":["import { nextTick, ref } from 'vue'\n\ninterface UseCompositionOptions {\n afterComposition: (event: CompositionEvent) => void\n emit?: ((event: 'compositionstart', evt: CompositionEvent) => void) &\n ((event: 'compositionupdate', evt: CompositionEvent) => void) &\n ((event: 'compositionend', evt: CompositionEvent) => void)\n}\n\nexport function useComposition({\n afterComposition,\n emit,\n}: UseCompositionOptions) {\n const isComposing = ref(false)\n\n const handleCompositionStart = (event: CompositionEvent) => {\n emit?.('compositionstart', event)\n isComposing.value = true\n }\n\n const handleCompositionUpdate = (event: CompositionEvent) => {\n emit?.('compositionupdate', event)\n isComposing.value = true\n }\n\n const handleCompositionEnd = (event: CompositionEvent) => {\n emit?.('compositionend', event)\n if (isComposing.value) {\n isComposing.value = false\n nextTick(() => afterComposition(event))\n }\n }\n\n const handleComposition = (event: CompositionEvent) => {\n event.type === 'compositionend'\n ? handleCompositionEnd(event)\n : handleCompositionUpdate(event)\n }\n\n return {\n isComposing,\n handleComposition,\n handleCompositionStart,\n handleCompositionUpdate,\n handleCompositionEnd,\n }\n}\n"],"mappings":";;;AASA,SAAgB,eAAe,EAC7B,kBACA,QACwB;CACxB,MAAM,cAAc,IAAI,MAAM;CAE9B,MAAM,0BAA0B,UAA4B;AAC1D,SAAO,oBAAoB,MAAM;AACjC,cAAY,QAAQ;;CAGtB,MAAM,2BAA2B,UAA4B;AAC3D,SAAO,qBAAqB,MAAM;AAClC,cAAY,QAAQ;;CAGtB,MAAM,wBAAwB,UAA4B;AACxD,SAAO,kBAAkB,MAAM;AAC/B,MAAI,YAAY,OAAO;AACrB,eAAY,QAAQ;AACpB,kBAAe,iBAAiB,MAAM,CAAC;;;CAI3C,MAAM,qBAAqB,UAA4B;AACrD,QAAM,SAAS,mBACX,qBAAqB,MAAM,GAC3B,wBAAwB,MAAM;;AAGpC,QAAO;EACL;EACA;EACA;EACA;EACA;EACD"}
+6
View File
@@ -0,0 +1,6 @@
import { ShallowRef } from "vue";
//#region ../../packages/hooks/use-cursor/index.d.ts
declare function useCursor(input: ShallowRef<HTMLInputElement | undefined>): [() => void, () => void];
//#endregion
export { useCursor };
+36
View File
@@ -0,0 +1,36 @@
//#region ../../packages/hooks/use-cursor/index.ts
function useCursor(input) {
let selectionInfo;
function recordCursor() {
if (input.value == void 0) return;
const { selectionStart, selectionEnd, value } = input.value;
if (selectionStart == null || selectionEnd == null) return;
selectionInfo = {
selectionStart,
selectionEnd,
value,
beforeTxt: value.slice(0, Math.max(0, selectionStart)),
afterTxt: value.slice(Math.max(0, selectionEnd))
};
}
function setCursor() {
if (input.value == void 0 || selectionInfo == void 0) return;
const { value } = input.value;
const { beforeTxt, afterTxt, selectionStart } = selectionInfo;
if (beforeTxt == void 0 || afterTxt == void 0 || selectionStart == void 0) return;
let startPos = value.length;
if (value.endsWith(afterTxt)) startPos = value.length - afterTxt.length;
else if (value.startsWith(beforeTxt)) startPos = beforeTxt.length;
else {
const beforeLastChar = beforeTxt[selectionStart - 1];
const newIndex = value.indexOf(beforeLastChar, selectionStart - 1);
if (newIndex !== -1) startPos = newIndex + 1;
}
input.value.setSelectionRange(startPos, startPos);
}
return [recordCursor, setCursor];
}
//#endregion
export { useCursor };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-cursor/index.ts"],"sourcesContent":["import type { ShallowRef } from 'vue'\n\ninterface SelectionInfo {\n selectionStart?: number\n selectionEnd?: number\n value?: string\n beforeTxt?: string\n afterTxt?: string\n}\n\n// Keep input cursor in the correct position when we use formatter.\nexport function useCursor(\n input: ShallowRef<HTMLInputElement | undefined>\n): [() => void, () => void] {\n let selectionInfo: SelectionInfo\n function recordCursor() {\n if (input.value == undefined) return\n\n const { selectionStart, selectionEnd, value } = input.value\n\n if (selectionStart == null || selectionEnd == null) return\n\n const beforeTxt = value.slice(0, Math.max(0, selectionStart))\n const afterTxt = value.slice(Math.max(0, selectionEnd))\n\n selectionInfo = {\n selectionStart,\n selectionEnd,\n value,\n beforeTxt,\n afterTxt,\n }\n }\n function setCursor() {\n if (input.value == undefined || selectionInfo == undefined) return\n\n const { value } = input.value\n const { beforeTxt, afterTxt, selectionStart } = selectionInfo\n\n if (\n beforeTxt == undefined ||\n afterTxt == undefined ||\n selectionStart == undefined\n )\n return\n\n let startPos = value.length\n\n if (value.endsWith(afterTxt)) {\n startPos = value.length - afterTxt.length\n } else if (value.startsWith(beforeTxt)) {\n startPos = beforeTxt.length\n } else {\n const beforeLastChar = beforeTxt[selectionStart - 1]\n const newIndex = value.indexOf(beforeLastChar, selectionStart - 1)\n if (newIndex !== -1) {\n startPos = newIndex + 1\n }\n }\n\n input.value.setSelectionRange(startPos, startPos)\n }\n\n return [recordCursor, setCursor]\n}\n"],"mappings":";AAWA,SAAgB,UACd,OAC0B;CAC1B,IAAI;CACJ,SAAS,eAAe;AACtB,MAAI,MAAM,SAAS,OAAW;EAE9B,MAAM,EAAE,gBAAgB,cAAc,UAAU,MAAM;AAEtD,MAAI,kBAAkB,QAAQ,gBAAgB,KAAM;AAKpD,kBAAgB;GACd;GACA;GACA;GACA,WAPgB,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,eAAe,CAAC;GAQ3D,UAPe,MAAM,MAAM,KAAK,IAAI,GAAG,aAAa,CAAC;GAQtD;;CAEH,SAAS,YAAY;AACnB,MAAI,MAAM,SAAS,UAAa,iBAAiB,OAAW;EAE5D,MAAM,EAAE,UAAU,MAAM;EACxB,MAAM,EAAE,WAAW,UAAU,mBAAmB;AAEhD,MACE,aAAa,UACb,YAAY,UACZ,kBAAkB,OAElB;EAEF,IAAI,WAAW,MAAM;AAErB,MAAI,MAAM,SAAS,SAAS,CAC1B,YAAW,MAAM,SAAS,SAAS;WAC1B,MAAM,WAAW,UAAU,CACpC,YAAW,UAAU;OAChB;GACL,MAAM,iBAAiB,UAAU,iBAAiB;GAClD,MAAM,WAAW,MAAM,QAAQ,gBAAgB,iBAAiB,EAAE;AAClE,OAAI,aAAa,GACf,YAAW,WAAW;;AAI1B,QAAM,MAAM,kBAAkB,UAAU,SAAS;;AAGnD,QAAO,CAAC,cAAc,UAAU"}
@@ -0,0 +1,48 @@
import { EpPropFinalized } from "../../utils/vue/props/types.js";
import "../../utils/index.js";
import { ToRefs } from "vue";
//#region ../../packages/hooks/use-delayed-toggle/index.d.ts
interface UseDelayedToggleProps {
/**
* @description delay of appearance, in millisecond, not valid in controlled mode
*/
showAfter?: number;
/**
* @description delay of disappear, in millisecond, not valid in controlled mode
*/
hideAfter?: number;
/**
* @description disappear automatically, in millisecond, not valid in controlled mode
*/
autoClose?: number;
}
/**
* @deprecated Removed after 3.0.0, Use `UseDelayedToggleProps` instead.
*/
declare const useDelayedToggleProps: {
readonly showAfter: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
readonly hideAfter: EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
readonly autoClose: EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
};
type DelayedToggle = {
open: (event?: Event) => void;
close: (event?: Event) => void;
} & ToRefs<Required<UseDelayedToggleProps>>;
declare const useDelayedTogglePropsDefaults: {
readonly showAfter: 0;
readonly hideAfter: 200;
readonly autoClose: 0;
};
declare const useDelayedToggle: ({
showAfter,
hideAfter,
autoClose,
open,
close
}: DelayedToggle) => {
onOpen: (event?: Event, delay?: number) => void;
onClose: (event?: Event, delay?: number) => void;
};
//#endregion
export { DelayedToggle, UseDelayedToggleProps, useDelayedToggle, useDelayedToggleProps, useDelayedTogglePropsDefaults };
@@ -0,0 +1,55 @@
import { isNumber } from "../../utils/types.mjs";
import { buildProps } from "../../utils/vue/props/runtime.mjs";
import { useTimeout } from "../use-timeout/index.mjs";
import { unref } from "vue";
//#region ../../packages/hooks/use-delayed-toggle/index.ts
/**
* @deprecated Removed after 3.0.0, Use `UseDelayedToggleProps` instead.
*/
const useDelayedToggleProps = buildProps({
showAfter: {
type: Number,
default: 0
},
hideAfter: {
type: Number,
default: 200
},
autoClose: {
type: Number,
default: 0
}
});
const useDelayedTogglePropsDefaults = {
showAfter: 0,
hideAfter: 200,
autoClose: 0
};
const useDelayedToggle = ({ showAfter, hideAfter, autoClose, open, close }) => {
const { registerTimeout } = useTimeout();
const { registerTimeout: registerTimeoutForAutoClose, cancelTimeout: cancelTimeoutForAutoClose } = useTimeout();
const onOpen = (event, delay = unref(showAfter)) => {
registerTimeout(() => {
open(event);
const _autoClose = unref(autoClose);
if (isNumber(_autoClose) && _autoClose > 0) registerTimeoutForAutoClose(() => {
close(event);
}, _autoClose);
}, delay);
};
const onClose = (event, delay = unref(hideAfter)) => {
cancelTimeoutForAutoClose();
registerTimeout(() => {
close(event);
}, delay);
};
return {
onOpen,
onClose
};
};
//#endregion
export { useDelayedToggle, useDelayedToggleProps, useDelayedTogglePropsDefaults };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-delayed-toggle/index.ts"],"sourcesContent":["import { unref } from 'vue'\nimport { buildProps, isNumber } from '@element-plus/utils'\nimport { useTimeout } from '../use-timeout'\n\nimport type { ToRefs } from 'vue'\n\nexport interface UseDelayedToggleProps {\n /**\n * @description delay of appearance, in millisecond, not valid in controlled mode\n */\n showAfter?: number\n /**\n * @description delay of disappear, in millisecond, not valid in controlled mode\n */\n hideAfter?: number\n /**\n * @description disappear automatically, in millisecond, not valid in controlled mode\n */\n autoClose?: number\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `UseDelayedToggleProps` instead.\n */\nexport const useDelayedToggleProps = buildProps({\n /**\n * @description delay of appearance, in millisecond, not valid in controlled mode\n */\n showAfter: {\n type: Number,\n default: 0,\n },\n /**\n * @description delay of disappear, in millisecond, not valid in controlled mode\n */\n hideAfter: {\n type: Number,\n default: 200,\n },\n /**\n * @description disappear automatically, in millisecond, not valid in controlled mode\n */\n autoClose: {\n type: Number,\n default: 0,\n },\n} as const)\n\nexport type DelayedToggle = {\n open: (event?: Event) => void\n close: (event?: Event) => void\n} & ToRefs<Required<UseDelayedToggleProps>>\n\nexport const useDelayedTogglePropsDefaults = {\n showAfter: 0,\n hideAfter: 200,\n autoClose: 0,\n} as const\n\nexport const useDelayedToggle = ({\n showAfter,\n hideAfter,\n autoClose,\n open,\n close,\n}: DelayedToggle) => {\n const { registerTimeout } = useTimeout()\n const {\n registerTimeout: registerTimeoutForAutoClose,\n cancelTimeout: cancelTimeoutForAutoClose,\n } = useTimeout()\n\n const onOpen = (event?: Event, delay = unref(showAfter)) => {\n registerTimeout(() => {\n open(event)\n\n const _autoClose = unref(autoClose)\n if (isNumber(_autoClose) && _autoClose > 0) {\n registerTimeoutForAutoClose(() => {\n close(event)\n }, _autoClose)\n }\n }, delay)\n }\n\n const onClose = (event?: Event, delay = unref(hideAfter)) => {\n cancelTimeoutForAutoClose()\n registerTimeout(() => {\n close(event)\n }, delay)\n }\n\n return {\n onOpen,\n onClose,\n }\n}\n"],"mappings":";;;;;;;;;AAwBA,MAAa,wBAAwB,WAAW;CAI9C,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;CACF,CAAU;AAOX,MAAa,gCAAgC;CAC3C,WAAW;CACX,WAAW;CACX,WAAW;CACZ;AAED,MAAa,oBAAoB,EAC/B,WACA,WACA,WACA,MACA,YACmB;CACnB,MAAM,EAAE,oBAAoB,YAAY;CACxC,MAAM,EACJ,iBAAiB,6BACjB,eAAe,8BACb,YAAY;CAEhB,MAAM,UAAU,OAAe,QAAQ,MAAM,UAAU,KAAK;AAC1D,wBAAsB;AACpB,QAAK,MAAM;GAEX,MAAM,aAAa,MAAM,UAAU;AACnC,OAAI,SAAS,WAAW,IAAI,aAAa,EACvC,mCAAkC;AAChC,UAAM,MAAM;MACX,WAAW;KAEf,MAAM;;CAGX,MAAM,WAAW,OAAe,QAAQ,MAAM,UAAU,KAAK;AAC3D,6BAA2B;AAC3B,wBAAsB;AACpB,SAAM,MAAM;KACX,MAAM;;AAGX,QAAO;EACL;EACA;EACD"}
+21
View File
@@ -0,0 +1,21 @@
import { MaybeRef } from "@vueuse/core";
//#region ../../packages/hooks/use-deprecated/index.d.ts
type DeprecationParam = {
from: string;
replacement: string;
scope: string;
version: string;
ref: string;
type?: 'API' | 'Attribute' | 'Event' | 'Slot';
};
declare const useDeprecated: ({
from,
replacement,
scope,
version,
ref,
type
}: DeprecationParam, condition: MaybeRef<boolean>) => void;
//#endregion
export { useDeprecated };
+15
View File
@@ -0,0 +1,15 @@
import { debugWarn } from "../../utils/error.mjs";
import { unref, watch } from "vue";
//#region ../../packages/hooks/use-deprecated/index.ts
const useDeprecated = ({ from, replacement, scope, version, ref, type = "API" }, condition) => {
watch(() => unref(condition), (val) => {
if (val) debugWarn(scope, `[${type}] ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.
For more detail, please visit: ${ref}
`);
}, { immediate: true });
};
//#endregion
export { useDeprecated };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-deprecated/index.ts"],"sourcesContent":["import { unref, watch } from 'vue'\nimport { debugWarn } from '@element-plus/utils'\n\nimport type { MaybeRef } from '@vueuse/core'\n\ntype DeprecationParam = {\n from: string\n replacement: string\n scope: string\n version: string\n ref: string\n type?: 'API' | 'Attribute' | 'Event' | 'Slot'\n}\n\nexport const useDeprecated = (\n { from, replacement, scope, version, ref, type = 'API' }: DeprecationParam,\n condition: MaybeRef<boolean>\n) => {\n watch(\n () => unref(condition),\n (val) => {\n if (val) {\n debugWarn(\n scope,\n `[${type}] ${from} is about to be deprecated in version ${version}, please use ${replacement} instead.\nFor more detail, please visit: ${ref}\n`\n )\n }\n },\n {\n immediate: true,\n }\n )\n}\n"],"mappings":";;;;AAcA,MAAa,iBACX,EAAE,MAAM,aAAa,OAAO,SAAS,KAAK,OAAO,SACjD,cACG;AACH,aACQ,MAAM,UAAU,GACrB,QAAQ;AACP,MAAI,IACF,WACE,OACA,IAAI,KAAK,IAAI,KAAK,wCAAwC,QAAQ,eAAe,YAAY;iCACtE,IAAI;EAE5B;IAGL,EACE,WAAW,MACZ,CACF"}
+10
View File
@@ -0,0 +1,10 @@
import { ComputedRef, Ref } from "vue";
//#region ../../packages/hooks/use-draggable/index.d.ts
declare const useDraggable: (targetRef: Ref<HTMLElement | undefined>, dragRef: Ref<HTMLElement | undefined>, draggable: ComputedRef<boolean>, overflow?: ComputedRef<boolean>) => {
isDragging: Ref<boolean, boolean>;
resetPosition: () => void;
updatePosition: () => void;
};
//#endregion
export { useDraggable };
+89
View File
@@ -0,0 +1,89 @@
import { addUnit } from "../../utils/dom/style.mjs";
import { onBeforeUnmount, onMounted, ref, watchEffect } from "vue";
//#region ../../packages/hooks/use-draggable/index.ts
const useDraggable = (targetRef, dragRef, draggable, overflow) => {
const transform = {
offsetX: 0,
offsetY: 0
};
const isDragging = ref(false);
const adjustPosition = (moveX, moveY) => {
if (targetRef.value) {
const { offsetX, offsetY } = transform;
const targetRect = targetRef.value.getBoundingClientRect();
const targetLeft = targetRect.left;
const targetTop = targetRect.top;
const targetWidth = targetRect.width;
const targetHeight = targetRect.height;
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;
const minLeft = -targetLeft + offsetX;
const minTop = -targetTop + offsetY;
const maxLeft = clientWidth - targetLeft - targetWidth + offsetX;
const maxTop = clientHeight - targetTop - (targetHeight < clientHeight ? targetHeight : 0) + offsetY;
if (!overflow?.value) {
moveX = Math.min(Math.max(moveX, minLeft), maxLeft);
moveY = Math.min(Math.max(moveY, minTop), maxTop);
}
transform.offsetX = moveX;
transform.offsetY = moveY;
targetRef.value.style.transform = `translate(${addUnit(moveX)}, ${addUnit(moveY)})`;
}
};
const onMousedown = (e) => {
const downX = e.clientX;
const downY = e.clientY;
const { offsetX, offsetY } = transform;
const onMousemove = (e) => {
if (!isDragging.value) isDragging.value = true;
adjustPosition(offsetX + e.clientX - downX, offsetY + e.clientY - downY);
};
const onMouseup = () => {
isDragging.value = false;
document.removeEventListener("mousemove", onMousemove);
document.removeEventListener("mouseup", onMouseup);
};
document.addEventListener("mousemove", onMousemove);
document.addEventListener("mouseup", onMouseup);
};
const onDraggable = () => {
if (dragRef.value && targetRef.value) {
dragRef.value.addEventListener("mousedown", onMousedown);
window.addEventListener("resize", updatePosition);
}
};
const offDraggable = () => {
if (dragRef.value && targetRef.value) {
dragRef.value.removeEventListener("mousedown", onMousedown);
window.removeEventListener("resize", updatePosition);
}
};
const resetPosition = () => {
transform.offsetX = 0;
transform.offsetY = 0;
if (targetRef.value) targetRef.value.style.transform = "";
};
const updatePosition = () => {
const { offsetX, offsetY } = transform;
adjustPosition(offsetX, offsetY);
};
onMounted(() => {
watchEffect(() => {
if (draggable.value) onDraggable();
else offDraggable();
});
});
onBeforeUnmount(() => {
offDraggable();
});
return {
isDragging,
resetPosition,
updatePosition
};
};
//#endregion
export { useDraggable };
//# sourceMappingURL=index.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,35 @@
import { EpPropFinalized } from "../../utils/vue/props/types.js";
import "../../utils/index.js";
import * as vue from "vue";
import { InjectionKey, Ref } from "vue";
//#region ../../packages/hooks/use-empty-values/index.d.ts
type ValueOnClear = string | number | boolean | Function | null;
interface UseEmptyValuesProps {
/**
* @description empty values supported by the component
*/
emptyValues?: unknown[];
/**
* @description return value when cleared, if you want to set `undefined`, use `() => undefined`
*/
valueOnClear?: ValueOnClear;
}
declare const emptyValuesContextKey: InjectionKey<Ref<UseEmptyValuesProps>>;
declare const SCOPE = "use-empty-values";
declare const DEFAULT_EMPTY_VALUES: (string | null | undefined)[];
declare const DEFAULT_VALUE_ON_CLEAR: undefined;
/**
* @deprecated Removed after 3.0.0, Use `UseEmptyValuesProps` instead.
*/
declare const useEmptyValuesProps: {
readonly emptyValues: ArrayConstructor;
readonly valueOnClear: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown, undefined, boolean>;
};
declare const useEmptyValues: (props: UseEmptyValuesProps, defaultValue?: null | undefined) => {
emptyValues: vue.ComputedRef<unknown[]>;
valueOnClear: vue.ComputedRef<any>;
isEmptyValue: (value: unknown) => boolean;
};
//#endregion
export { DEFAULT_EMPTY_VALUES, DEFAULT_VALUE_ON_CLEAR, SCOPE, UseEmptyValuesProps, emptyValuesContextKey, useEmptyValues, useEmptyValuesProps };
+64
View File
@@ -0,0 +1,64 @@
import { isArray, isFunction } from "../../utils/types.mjs";
import { debugWarn } from "../../utils/error.mjs";
import { buildProps, definePropType } from "../../utils/vue/props/runtime.mjs";
import { isEqual } from "lodash-unified";
import { computed, getCurrentInstance, inject, ref } from "vue";
//#region ../../packages/hooks/use-empty-values/index.ts
const emptyValuesContextKey = Symbol("emptyValuesContextKey");
const SCOPE = "use-empty-values";
const DEFAULT_EMPTY_VALUES = [
"",
void 0,
null
];
const DEFAULT_VALUE_ON_CLEAR = void 0;
/**
* @deprecated Removed after 3.0.0, Use `UseEmptyValuesProps` instead.
*/
const useEmptyValuesProps = buildProps({
emptyValues: Array,
valueOnClear: {
type: definePropType([
String,
Number,
Boolean,
Function
]),
default: void 0,
validator: (val) => {
val = isFunction(val) ? val() : val;
if (isArray(val)) return val.every((item) => !item);
return !val;
}
}
});
const useEmptyValues = (props, defaultValue) => {
const config = getCurrentInstance() ? inject(emptyValuesContextKey, ref({})) : ref({});
const emptyValues = computed(() => props.emptyValues || config.value.emptyValues || DEFAULT_EMPTY_VALUES);
const valueOnClear = computed(() => {
if (isFunction(props.valueOnClear)) return props.valueOnClear();
else if (props.valueOnClear !== void 0) return props.valueOnClear;
else if (isFunction(config.value.valueOnClear)) return config.value.valueOnClear();
else if (config.value.valueOnClear !== void 0) return config.value.valueOnClear;
return defaultValue !== void 0 ? defaultValue : DEFAULT_VALUE_ON_CLEAR;
});
const isEmptyValue = (value) => {
let result = true;
if (isArray(value)) result = emptyValues.value.some((emptyValue) => {
return isEqual(value, emptyValue);
});
else result = emptyValues.value.includes(value);
return result;
};
if (!isEmptyValue(valueOnClear.value)) debugWarn(SCOPE, "value-on-clear should be a value of empty-values");
return {
emptyValues,
valueOnClear,
isEmptyValue
};
};
//#endregion
export { DEFAULT_EMPTY_VALUES, DEFAULT_VALUE_ON_CLEAR, SCOPE, emptyValuesContextKey, useEmptyValues, useEmptyValuesProps };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-empty-values/index.ts"],"sourcesContent":["import { computed, getCurrentInstance, inject, ref } from 'vue'\nimport {\n buildProps,\n debugWarn,\n definePropType,\n isArray,\n isFunction,\n} from '@element-plus/utils'\nimport { isEqual } from 'lodash-unified'\n\nimport type { InjectionKey, Ref } from 'vue'\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type\ntype ValueOnClear = string | number | boolean | Function | null\n\nexport interface UseEmptyValuesProps {\n /**\n * @description empty values supported by the component\n */\n emptyValues?: unknown[]\n /**\n * @description return value when cleared, if you want to set `undefined`, use `() => undefined`\n */\n valueOnClear?: ValueOnClear\n}\n\nexport const emptyValuesContextKey: InjectionKey<Ref<UseEmptyValuesProps>> =\n Symbol('emptyValuesContextKey')\nexport const SCOPE = 'use-empty-values'\nexport const DEFAULT_EMPTY_VALUES = ['', undefined, null]\nexport const DEFAULT_VALUE_ON_CLEAR = undefined\n\n/**\n * @deprecated Removed after 3.0.0, Use `UseEmptyValuesProps` instead.\n */\nexport const useEmptyValuesProps = buildProps({\n /**\n * @description empty values supported by the component\n */\n emptyValues: Array,\n /**\n * @description return value when cleared, if you want to set `undefined`, use `() => undefined`\n */\n valueOnClear: {\n /* eslint-disable-next-line @typescript-eslint/no-unsafe-function-type */\n type: definePropType<string | number | boolean | Function | null>([\n String,\n Number,\n Boolean,\n Function,\n ]),\n default: undefined,\n validator: (val: unknown) => {\n val = isFunction(val) ? val() : val\n if (isArray(val)) {\n return val.every((item) => !item)\n }\n return !val\n },\n },\n} as const)\n\nexport const useEmptyValues = (\n props: UseEmptyValuesProps,\n defaultValue?: null | undefined\n) => {\n const config = getCurrentInstance()\n ? inject(emptyValuesContextKey, ref<UseEmptyValuesProps>({}))\n : ref<UseEmptyValuesProps>({})\n\n const emptyValues = computed(\n () => props.emptyValues || config.value.emptyValues || DEFAULT_EMPTY_VALUES\n )\n\n const valueOnClear = computed(() => {\n // function is used for undefined cause undefined can't be a value of prop\n if (isFunction(props.valueOnClear)) {\n return props.valueOnClear()\n } else if (props.valueOnClear !== undefined) {\n return props.valueOnClear\n } else if (isFunction(config.value.valueOnClear)) {\n return config.value.valueOnClear()\n } else if (config.value.valueOnClear !== undefined) {\n return config.value.valueOnClear\n }\n return defaultValue !== undefined ? defaultValue : DEFAULT_VALUE_ON_CLEAR\n })\n\n const isEmptyValue = (value: unknown) => {\n let result = true\n if (isArray(value)) {\n result = emptyValues.value.some((emptyValue) => {\n return isEqual(value, emptyValue)\n })\n } else {\n result = emptyValues.value.includes(value)\n }\n return result\n }\n\n if (!isEmptyValue(valueOnClear.value)) {\n debugWarn(SCOPE, 'value-on-clear should be a value of empty-values')\n }\n\n return {\n emptyValues,\n valueOnClear,\n isEmptyValue,\n }\n}\n"],"mappings":";;;;;;;AA0BA,MAAa,wBACX,OAAO,wBAAwB;AACjC,MAAa,QAAQ;AACrB,MAAa,uBAAuB;CAAC;CAAI;CAAW;CAAK;AACzD,MAAa,yBAAyB;;;;AAKtC,MAAa,sBAAsB,WAAW;CAI5C,aAAa;CAIb,cAAc;EAEZ,MAAM,eAA4D;GAChE;GACA;GACA;GACA;GACD,CAAC;EACF,SAAS;EACT,YAAY,QAAiB;AAC3B,SAAM,WAAW,IAAI,GAAG,KAAK,GAAG;AAChC,OAAI,QAAQ,IAAI,CACd,QAAO,IAAI,OAAO,SAAS,CAAC,KAAK;AAEnC,UAAO,CAAC;;EAEX;CACF,CAAU;AAEX,MAAa,kBACX,OACA,iBACG;CACH,MAAM,SAAS,oBAAoB,GAC/B,OAAO,uBAAuB,IAAyB,EAAE,CAAC,CAAC,GAC3D,IAAyB,EAAE,CAAC;CAEhC,MAAM,cAAc,eACZ,MAAM,eAAe,OAAO,MAAM,eAAe,qBACxD;CAED,MAAM,eAAe,eAAe;AAElC,MAAI,WAAW,MAAM,aAAa,CAChC,QAAO,MAAM,cAAc;WAClB,MAAM,iBAAiB,OAChC,QAAO,MAAM;WACJ,WAAW,OAAO,MAAM,aAAa,CAC9C,QAAO,OAAO,MAAM,cAAc;WACzB,OAAO,MAAM,iBAAiB,OACvC,QAAO,OAAO,MAAM;AAEtB,SAAO,iBAAiB,SAAY,eAAe;GACnD;CAEF,MAAM,gBAAgB,UAAmB;EACvC,IAAI,SAAS;AACb,MAAI,QAAQ,MAAM,CAChB,UAAS,YAAY,MAAM,MAAM,eAAe;AAC9C,UAAO,QAAQ,OAAO,WAAW;IACjC;MAEF,UAAS,YAAY,MAAM,SAAS,MAAM;AAE5C,SAAO;;AAGT,KAAI,CAAC,aAAa,aAAa,MAAM,CACnC,WAAU,OAAO,mDAAmD;AAGtE,QAAO;EACL;EACA;EACA;EACD"}
@@ -0,0 +1,4 @@
//#region ../../packages/hooks/use-escape-keydown/index.d.ts
declare const useEscapeKeydown: (handler: (e: KeyboardEvent) => void) => void;
//#endregion
export { useEscapeKeydown };
@@ -0,0 +1,26 @@
import { EVENT_CODE } from "../../constants/aria.mjs";
import { isClient } from "../../utils/browser.mjs";
import { getEventCode } from "../../utils/dom/event.mjs";
import { onBeforeUnmount, onMounted } from "vue";
//#region ../../packages/hooks/use-escape-keydown/index.ts
let registeredEscapeHandlers = [];
const cachedHandler = (event) => {
if (getEventCode(event) === EVENT_CODE.esc) registeredEscapeHandlers.forEach((registeredHandler) => registeredHandler(event));
};
const useEscapeKeydown = (handler) => {
onMounted(() => {
if (registeredEscapeHandlers.length === 0) document.addEventListener("keydown", cachedHandler);
if (isClient) registeredEscapeHandlers.push(handler);
});
onBeforeUnmount(() => {
registeredEscapeHandlers = registeredEscapeHandlers.filter((registeredHandler) => registeredHandler !== handler);
if (registeredEscapeHandlers.length === 0) {
if (isClient) document.removeEventListener("keydown", cachedHandler);
}
});
};
//#endregion
export { useEscapeKeydown };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-escape-keydown/index.ts"],"sourcesContent":["import { onBeforeUnmount, onMounted } from 'vue'\nimport { getEventCode, isClient } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\n\nlet registeredEscapeHandlers: ((e: KeyboardEvent) => void)[] = []\n\nconst cachedHandler = (event: KeyboardEvent) => {\n const code = getEventCode(event)\n if (code === EVENT_CODE.esc) {\n registeredEscapeHandlers.forEach((registeredHandler) =>\n registeredHandler(event)\n )\n }\n}\n\nexport const useEscapeKeydown = (handler: (e: KeyboardEvent) => void) => {\n onMounted(() => {\n if (registeredEscapeHandlers.length === 0) {\n document.addEventListener('keydown', cachedHandler)\n }\n if (isClient) registeredEscapeHandlers.push(handler)\n })\n\n onBeforeUnmount(() => {\n registeredEscapeHandlers = registeredEscapeHandlers.filter(\n (registeredHandler) => registeredHandler !== handler\n )\n if (registeredEscapeHandlers.length === 0) {\n if (isClient) document.removeEventListener('keydown', cachedHandler)\n }\n })\n}\n"],"mappings":";;;;;;AAIA,IAAI,2BAA2D,EAAE;AAEjE,MAAM,iBAAiB,UAAyB;AAE9C,KADa,aAAa,MAAM,KACnB,WAAW,IACtB,0BAAyB,SAAS,sBAChC,kBAAkB,MAAM,CACzB;;AAIL,MAAa,oBAAoB,YAAwC;AACvE,iBAAgB;AACd,MAAI,yBAAyB,WAAW,EACtC,UAAS,iBAAiB,WAAW,cAAc;AAErD,MAAI,SAAU,0BAAyB,KAAK,QAAQ;GACpD;AAEF,uBAAsB;AACpB,6BAA2B,yBAAyB,QACjD,sBAAsB,sBAAsB,QAC9C;AACD,MAAI,yBAAyB,WAAW,GACtC;OAAI,SAAU,UAAS,oBAAoB,WAAW,cAAc;;GAEtE"}
+138
View File
@@ -0,0 +1,138 @@
import { Ref, ToRefs } from "vue";
import * as _floating_ui_dom0 from "@floating-ui/dom";
import { Middleware, Placement, SideObject, Strategy, VirtualElement } from "@floating-ui/dom";
//#region ../../packages/hooks/use-floating/index.d.ts
declare const useFloatingProps: {};
type UseFloatingProps = ToRefs<{
middleware: Array<Middleware>;
placement: Placement;
strategy: Strategy;
}>;
declare const getPositionDataWithUnit: <T extends Record<string, number>>(record: T | undefined, key: keyof T) => string;
declare const useFloating: ({
middleware,
placement,
strategy
}: UseFloatingProps) => {
update: () => Promise<void>;
referenceRef: Ref<HTMLElement | VirtualElement | undefined, HTMLElement | VirtualElement | undefined>;
contentRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
x: Ref<number | undefined, number | undefined>;
y: Ref<number | undefined, number | undefined>;
placement: Ref<Placement, Placement>;
strategy: Ref<Strategy, Strategy>;
middlewareData: Ref<{
[x: string]: any;
arrow?: {
x?: number | undefined;
y?: number | undefined;
centerOffset: number;
alignmentOffset?: number | undefined;
} | undefined;
autoPlacement?: {
index?: number | undefined;
overflows: {
placement: Placement;
overflows: Array<number>;
}[];
} | undefined;
flip?: {
index?: number | undefined;
overflows: {
placement: Placement;
overflows: Array<number>;
}[];
} | undefined;
hide?: {
referenceHidden?: boolean | undefined;
escaped?: boolean | undefined;
referenceHiddenOffsets?: {
top: number;
bottom: number;
left: number;
right: number;
} | undefined;
escapedOffsets?: {
top: number;
bottom: number;
left: number;
right: number;
} | undefined;
} | undefined;
offset?: {
x: number;
y: number;
placement: Placement;
} | undefined;
shift?: {
x: number;
y: number;
enabled: {
x: boolean;
y: boolean;
};
} | undefined;
}, _floating_ui_dom0.MiddlewareData | {
[x: string]: any;
arrow?: {
x?: number | undefined;
y?: number | undefined;
centerOffset: number;
alignmentOffset?: number | undefined;
} | undefined;
autoPlacement?: {
index?: number | undefined;
overflows: {
placement: Placement;
overflows: Array<number>;
}[];
} | undefined;
flip?: {
index?: number | undefined;
overflows: {
placement: Placement;
overflows: Array<number>;
}[];
} | undefined;
hide?: {
referenceHidden?: boolean | undefined;
escaped?: boolean | undefined;
referenceHiddenOffsets?: {
top: number;
bottom: number;
left: number;
right: number;
} | undefined;
escapedOffsets?: {
top: number;
bottom: number;
left: number;
right: number;
} | undefined;
} | undefined;
offset?: {
x: number;
y: number;
placement: Placement;
} | undefined;
shift?: {
x: number;
y: number;
enabled: {
x: boolean;
y: boolean;
};
} | undefined;
}>;
};
type ArrowMiddlewareProps = {
arrowRef: Ref<HTMLElement | null | undefined>;
padding?: number | SideObject;
};
declare const arrowMiddleware: ({
arrowRef,
padding
}: ArrowMiddlewareProps) => Middleware;
//#endregion
export { ArrowMiddlewareProps, UseFloatingProps, arrowMiddleware, getPositionDataWithUnit, useFloating, useFloatingProps };
+78
View File
@@ -0,0 +1,78 @@
import { isClient as isClient$1 } from "../../utils/browser.mjs";
import { keysOf } from "../../utils/objects.mjs";
import { buildProps } from "../../utils/vue/props/runtime.mjs";
import { unrefElement } from "@vueuse/core";
import { isNil } from "lodash-unified";
import { isRef, onMounted, ref, unref, watchEffect } from "vue";
import { arrow, computePosition } from "@floating-ui/dom";
//#region ../../packages/hooks/use-floating/index.ts
const useFloatingProps = buildProps({});
const unrefReference = (elRef) => {
if (!isClient$1) return;
if (!elRef) return elRef;
const unrefEl = unrefElement(elRef);
if (unrefEl) return unrefEl;
return isRef(elRef) ? unrefEl : elRef;
};
const getPositionDataWithUnit = (record, key) => {
const value = record?.[key];
return isNil(value) ? "" : `${value}px`;
};
const useFloating = ({ middleware, placement, strategy }) => {
const referenceRef = ref();
const contentRef = ref();
const states = {
x: ref(),
y: ref(),
placement,
strategy,
middlewareData: ref({})
};
const update = async () => {
if (!isClient$1) return;
const referenceEl = unrefReference(referenceRef);
const contentEl = unrefElement(contentRef);
if (!referenceEl || !contentEl) return;
const data = await computePosition(referenceEl, contentEl, {
placement: unref(placement),
strategy: unref(strategy),
middleware: unref(middleware)
});
keysOf(states).forEach((key) => {
states[key].value = data[key];
});
};
onMounted(() => {
watchEffect(() => {
update();
});
});
return {
...states,
update,
referenceRef,
contentRef
};
};
const arrowMiddleware = ({ arrowRef, padding }) => {
return {
name: "arrow",
options: {
element: arrowRef,
padding
},
fn(args) {
const arrowEl = unref(arrowRef);
if (!arrowEl) return {};
return arrow({
element: arrowEl,
padding
}).fn(args);
}
};
};
//#endregion
export { arrowMiddleware, getPositionDataWithUnit, useFloating, useFloatingProps };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["isClient","arrowCore"],"sources":["../../../../../packages/hooks/use-floating/index.ts"],"sourcesContent":["import { isRef, onMounted, ref, unref, watchEffect } from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { isNil } from 'lodash-unified'\nimport { arrow as arrowCore, computePosition } from '@floating-ui/dom'\nimport { buildProps, isClient, keysOf } from '@element-plus/utils'\n\nimport type { Ref, ToRefs } from 'vue'\nimport type {\n ComputePositionReturn,\n Middleware,\n Placement,\n SideObject,\n Strategy,\n VirtualElement,\n} from '@floating-ui/dom'\n\nexport const useFloatingProps = buildProps({} as const)\n\nexport type UseFloatingProps = ToRefs<{\n middleware: Array<Middleware>\n placement: Placement\n strategy: Strategy\n}>\n\ntype ElementRef = Parameters<typeof unrefElement>['0']\n\nconst unrefReference = (\n elRef: ElementRef | Ref<VirtualElement | undefined>\n) => {\n if (!isClient) return\n if (!elRef) return elRef\n const unrefEl = unrefElement(elRef as ElementRef)\n if (unrefEl) return unrefEl\n return isRef(elRef) ? unrefEl : (elRef as VirtualElement)\n}\n\nexport const getPositionDataWithUnit = <T extends Record<string, number>>(\n record: T | undefined,\n key: keyof T\n) => {\n const value = record?.[key]\n return isNil(value) ? '' : `${value}px`\n}\n\nexport const useFloating = ({\n middleware,\n placement,\n strategy,\n}: UseFloatingProps) => {\n const referenceRef = ref<HTMLElement | VirtualElement>()\n const contentRef = ref<HTMLElement>()\n const x = ref<number>()\n const y = ref<number>()\n const middlewareData = ref<ComputePositionReturn['middlewareData']>({})\n\n const states = {\n x,\n y,\n placement,\n strategy,\n middlewareData,\n } as const\n\n const update = async () => {\n if (!isClient) return\n\n const referenceEl = unrefReference(referenceRef)\n const contentEl = unrefElement(contentRef)\n if (!referenceEl || !contentEl) return\n\n const data = await computePosition(referenceEl, contentEl, {\n placement: unref(placement),\n strategy: unref(strategy),\n middleware: unref(middleware),\n })\n\n keysOf(states).forEach((key) => {\n states[key].value = data[key]\n })\n }\n\n onMounted(() => {\n watchEffect(() => {\n update()\n })\n })\n\n return {\n ...states,\n update,\n referenceRef,\n contentRef,\n }\n}\n\nexport type ArrowMiddlewareProps = {\n arrowRef: Ref<HTMLElement | null | undefined>\n padding?: number | SideObject\n}\n\nexport const arrowMiddleware = ({\n arrowRef,\n padding,\n}: ArrowMiddlewareProps): Middleware => {\n return {\n name: 'arrow',\n options: {\n element: arrowRef,\n padding,\n },\n\n fn(args) {\n const arrowEl = unref(arrowRef)\n if (!arrowEl) return {}\n\n return arrowCore({\n element: arrowEl,\n padding,\n }).fn(args)\n },\n }\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,mBAAmB,WAAW,EAAE,CAAU;AAUvD,MAAM,kBACJ,UACG;AACH,KAAI,CAACA,WAAU;AACf,KAAI,CAAC,MAAO,QAAO;CACnB,MAAM,UAAU,aAAa,MAAoB;AACjD,KAAI,QAAS,QAAO;AACpB,QAAO,MAAM,MAAM,GAAG,UAAW;;AAGnC,MAAa,2BACX,QACA,QACG;CACH,MAAM,QAAQ,SAAS;AACvB,QAAO,MAAM,MAAM,GAAG,KAAK,GAAG,MAAM;;AAGtC,MAAa,eAAe,EAC1B,YACA,WACA,eACsB;CACtB,MAAM,eAAe,KAAmC;CACxD,MAAM,aAAa,KAAkB;CAKrC,MAAM,SAAS;EACb,GALQ,KAAa;EAMrB,GALQ,KAAa;EAMrB;EACA;EACA,gBAPqB,IAA6C,EAAE,CAAC;EAQtE;CAED,MAAM,SAAS,YAAY;AACzB,MAAI,CAACA,WAAU;EAEf,MAAM,cAAc,eAAe,aAAa;EAChD,MAAM,YAAY,aAAa,WAAW;AAC1C,MAAI,CAAC,eAAe,CAAC,UAAW;EAEhC,MAAM,OAAO,MAAM,gBAAgB,aAAa,WAAW;GACzD,WAAW,MAAM,UAAU;GAC3B,UAAU,MAAM,SAAS;GACzB,YAAY,MAAM,WAAW;GAC9B,CAAC;AAEF,SAAO,OAAO,CAAC,SAAS,QAAQ;AAC9B,UAAO,KAAK,QAAQ,KAAK;IACzB;;AAGJ,iBAAgB;AACd,oBAAkB;AAChB,WAAQ;IACR;GACF;AAEF,QAAO;EACL,GAAG;EACH;EACA;EACA;EACD;;AAQH,MAAa,mBAAmB,EAC9B,UACA,cACsC;AACtC,QAAO;EACL,MAAM;EACN,SAAS;GACP,SAAS;GACT;GACD;EAED,GAAG,MAAM;GACP,MAAM,UAAU,MAAM,SAAS;AAC/B,OAAI,CAAC,QAAS,QAAO,EAAE;AAEvB,UAAOC,MAAU;IACf,SAAS;IACT;IACD,CAAC,CAAC,GAAG,KAAK;;EAEd"}
@@ -0,0 +1,36 @@
import * as vue from "vue";
import { ShallowRef } from "vue";
import { MaybeRef } from "@vueuse/core";
//#region ../../packages/hooks/use-focus-controller/index.d.ts
interface UseFocusControllerOptions {
disabled?: MaybeRef<boolean>;
/**
* return true to cancel focus
* @param event FocusEvent
*/
beforeFocus?: (event: FocusEvent) => boolean | undefined;
afterFocus?: () => void;
/**
* return true to cancel blur
* @param event FocusEvent
*/
beforeBlur?: (event: FocusEvent) => boolean | undefined;
afterBlur?: () => void;
}
declare function useFocusController<T extends {
focus: () => void;
}>(target: ShallowRef<T | undefined>, {
disabled,
beforeFocus,
afterFocus,
beforeBlur,
afterBlur
}?: UseFocusControllerOptions): {
isFocused: vue.Ref<boolean, boolean>; /** Avoid using wrapperRef and handleFocus/handleBlur together */
wrapperRef: ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
handleFocus: (event: FocusEvent) => void;
handleBlur: (event: FocusEvent) => void;
};
//#endregion
export { useFocusController };
@@ -0,0 +1,47 @@
import { isFocusable } from "../../utils/dom/aria.mjs";
import { isFunction } from "../../utils/types.mjs";
import { useEventListener } from "@vueuse/core";
import { getCurrentInstance, onMounted, ref, shallowRef, unref, watch } from "vue";
//#region ../../packages/hooks/use-focus-controller/index.ts
function useFocusController(target, { disabled, beforeFocus, afterFocus, beforeBlur, afterBlur } = {}) {
const { emit } = getCurrentInstance();
const wrapperRef = shallowRef();
const isFocused = ref(false);
const handleFocus = (event) => {
const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false;
if (unref(disabled) || isFocused.value || cancelFocus) return;
isFocused.value = true;
emit("focus", event);
afterFocus?.();
};
const handleBlur = (event) => {
const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false;
if (unref(disabled) || event.relatedTarget && wrapperRef.value?.contains(event.relatedTarget) || cancelBlur) return;
isFocused.value = false;
emit("blur", event);
afterBlur?.();
};
const handleClick = (event) => {
if (unref(disabled) || isFocusable(event.target) || wrapperRef.value?.contains(document.activeElement) && wrapperRef.value !== document.activeElement) return;
target.value?.focus();
};
watch([wrapperRef, () => unref(disabled)], ([el, disabled]) => {
if (!el) return;
if (disabled) el.removeAttribute("tabindex");
else el.setAttribute("tabindex", "-1");
});
useEventListener(wrapperRef, "focus", handleFocus, true);
useEventListener(wrapperRef, "blur", handleBlur, true);
useEventListener(wrapperRef, "click", handleClick, true);
return {
isFocused,
wrapperRef,
handleFocus,
handleBlur
};
}
//#endregion
export { useFocusController };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-focus-controller/index.ts"],"sourcesContent":["import {\n getCurrentInstance,\n onMounted,\n ref,\n shallowRef,\n unref,\n watch,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isElement, isFocusable, isFunction } from '@element-plus/utils'\n\nimport type { ShallowRef } from 'vue'\nimport type { MaybeRef } from '@vueuse/core'\n\ninterface UseFocusControllerOptions {\n disabled?: MaybeRef<boolean>\n /**\n * return true to cancel focus\n * @param event FocusEvent\n */\n beforeFocus?: (event: FocusEvent) => boolean | undefined\n afterFocus?: () => void\n /**\n * return true to cancel blur\n * @param event FocusEvent\n */\n beforeBlur?: (event: FocusEvent) => boolean | undefined\n afterBlur?: () => void\n}\n\nexport function useFocusController<T extends { focus: () => void }>(\n target: ShallowRef<T | undefined>,\n {\n disabled,\n beforeFocus,\n afterFocus,\n beforeBlur,\n afterBlur,\n }: UseFocusControllerOptions = {}\n) {\n const instance = getCurrentInstance()!\n const { emit } = instance\n const wrapperRef = shallowRef<HTMLElement>()\n const isFocused = ref(false)\n\n const handleFocus = (event: FocusEvent) => {\n const cancelFocus = isFunction(beforeFocus) ? beforeFocus(event) : false\n if (unref(disabled) || isFocused.value || cancelFocus) return\n\n isFocused.value = true\n emit('focus', event)\n afterFocus?.()\n }\n\n const handleBlur = (event: FocusEvent) => {\n const cancelBlur = isFunction(beforeBlur) ? beforeBlur(event) : false\n if (\n unref(disabled) ||\n (event.relatedTarget &&\n wrapperRef.value?.contains(event.relatedTarget as Node)) ||\n cancelBlur\n )\n return\n\n isFocused.value = false\n emit('blur', event)\n afterBlur?.()\n }\n\n const handleClick = (event: Event) => {\n if (\n unref(disabled) ||\n isFocusable(event.target as HTMLElement) ||\n (wrapperRef.value?.contains(document.activeElement) &&\n wrapperRef.value !== document.activeElement)\n )\n return\n\n target.value?.focus()\n }\n\n watch([wrapperRef, () => unref(disabled)], ([el, disabled]) => {\n if (!el) return\n if (disabled) {\n el.removeAttribute('tabindex')\n } else {\n el.setAttribute('tabindex', '-1')\n }\n })\n\n useEventListener(wrapperRef, 'focus', handleFocus, true)\n useEventListener(wrapperRef, 'blur', handleBlur, true)\n useEventListener(wrapperRef, 'click', handleClick, true)\n\n // only for test\n if (process.env.NODE_ENV === 'test') {\n onMounted(() => {\n const targetEl = isElement(target.value)\n ? target.value\n : document.querySelector('input,textarea')\n\n if (targetEl) {\n useEventListener(targetEl, 'focus', handleFocus, true)\n useEventListener(targetEl, 'blur', handleBlur, true)\n }\n })\n }\n\n return {\n isFocused,\n /** Avoid using wrapperRef and handleFocus/handleBlur together */\n wrapperRef,\n handleFocus,\n handleBlur,\n }\n}\n"],"mappings":";;;;;;AA8BA,SAAgB,mBACd,QACA,EACE,UACA,aACA,YACA,YACA,cAC6B,EAAE,EACjC;CAEA,MAAM,EAAE,SADS,oBAAoB;CAErC,MAAM,aAAa,YAAyB;CAC5C,MAAM,YAAY,IAAI,MAAM;CAE5B,MAAM,eAAe,UAAsB;EACzC,MAAM,cAAc,WAAW,YAAY,GAAG,YAAY,MAAM,GAAG;AACnE,MAAI,MAAM,SAAS,IAAI,UAAU,SAAS,YAAa;AAEvD,YAAU,QAAQ;AAClB,OAAK,SAAS,MAAM;AACpB,gBAAc;;CAGhB,MAAM,cAAc,UAAsB;EACxC,MAAM,aAAa,WAAW,WAAW,GAAG,WAAW,MAAM,GAAG;AAChE,MACE,MAAM,SAAS,IACd,MAAM,iBACL,WAAW,OAAO,SAAS,MAAM,cAAsB,IACzD,WAEA;AAEF,YAAU,QAAQ;AAClB,OAAK,QAAQ,MAAM;AACnB,eAAa;;CAGf,MAAM,eAAe,UAAiB;AACpC,MACE,MAAM,SAAS,IACf,YAAY,MAAM,OAAsB,IACvC,WAAW,OAAO,SAAS,SAAS,cAAc,IACjD,WAAW,UAAU,SAAS,cAEhC;AAEF,SAAO,OAAO,OAAO;;AAGvB,OAAM,CAAC,kBAAkB,MAAM,SAAS,CAAC,GAAG,CAAC,IAAI,cAAc;AAC7D,MAAI,CAAC,GAAI;AACT,MAAI,SACF,IAAG,gBAAgB,WAAW;MAE9B,IAAG,aAAa,YAAY,KAAK;GAEnC;AAEF,kBAAiB,YAAY,SAAS,aAAa,KAAK;AACxD,kBAAiB,YAAY,QAAQ,YAAY,KAAK;AACtD,kBAAiB,YAAY,SAAS,aAAa,KAAK;AAgBxD,QAAO;EACL;EAEA;EACA;EACA;EACD"}
+10
View File
@@ -0,0 +1,10 @@
import { Ref } from "vue";
//#region ../../packages/hooks/use-focus/index.d.ts
declare const useFocus: (el: Ref<{
focus: () => void;
} | null>) => {
focus: () => void;
};
//#endregion
export { useFocus };
+10
View File
@@ -0,0 +1,10 @@
//#region ../../packages/hooks/use-focus/index.ts
const useFocus = (el) => {
return { focus: () => {
el.value?.focus?.();
} };
};
//#endregion
export { useFocus };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"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"],"mappings":";AAEA,MAAa,YACX,OAGG;AACH,QAAO,EACL,aAAa;AACX,KAAG,OAAO,SAAS;IAEtB"}
+12
View File
@@ -0,0 +1,12 @@
import { InjectionKey, ObjectDirective, Ref } from "vue";
//#region ../../packages/hooks/use-forward-ref/index.d.ts
type ForwardRefSetter = <T>(el: T) => void;
type ForwardRefInjectionContext = {
setForwardRef: ForwardRefSetter;
};
declare const FORWARD_REF_INJECTION_KEY: InjectionKey<ForwardRefInjectionContext>;
declare const useForwardRef: <T>(forwardRef: Ref<T | null>) => void;
declare const useForwardRefDirective: (setForwardRef: ForwardRefSetter) => ObjectDirective;
//#endregion
export { FORWARD_REF_INJECTION_KEY, ForwardRefInjectionContext, useForwardRef, useForwardRefDirective };
+27
View File
@@ -0,0 +1,27 @@
import { provide } from "vue";
//#region ../../packages/hooks/use-forward-ref/index.ts
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);
}
};
};
//#endregion
export { FORWARD_REF_INJECTION_KEY, useForwardRef, useForwardRefDirective };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-forward-ref/index.ts"],"sourcesContent":["import { provide } from 'vue'\n\nimport type { InjectionKey, ObjectDirective, 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 }) as ForwardRefSetter\n\n provide(FORWARD_REF_INJECTION_KEY, {\n setForwardRef,\n })\n}\n\nexport const useForwardRefDirective = (\n setForwardRef: ForwardRefSetter\n): ObjectDirective => {\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"],"mappings":";;;AAUA,MAAa,4BACX,OAAO,eAAe;AAExB,MAAa,iBAAoB,eAA8B;CAC7D,MAAM,kBAAkB,OAAU;AAChC,aAAW,QAAQ;;AAGrB,SAAQ,2BAA2B,EACjC,eACD,CAAC;;AAGJ,MAAa,0BACX,kBACoB;AACpB,QAAO;EACL,QAAQ,IAAI;AACV,iBAAc,GAAG;;EAEnB,QAAQ,IAAI;AACV,iBAAc,GAAG;;EAEnB,YAAY;AACV,iBAAc,KAAK;;EAEtB"}
+13
View File
@@ -0,0 +1,13 @@
import { InjectionKey, Ref } from "vue";
import { MaybeRef } from "@vueuse/core";
//#region ../../packages/hooks/use-id/index.d.ts
type ElIdInjectionContext = {
prefix: number;
current: number;
};
declare const ID_INJECTION_KEY: InjectionKey<ElIdInjectionContext>;
declare const useIdInjection: () => ElIdInjectionContext;
declare const useId: (deterministicId?: MaybeRef<string>) => Ref<string>;
//#endregion
export { ElIdInjectionContext, ID_INJECTION_KEY, useId, useIdInjection };
+29
View File
@@ -0,0 +1,29 @@
import { isClient as isClient$1 } from "../../utils/browser.mjs";
import { debugWarn } from "../../utils/error.mjs";
import { useGetDerivedNamespace } from "../use-namespace/index.mjs";
import { computedEager } from "@vueuse/core";
import { getCurrentInstance, inject, unref } from "vue";
//#region ../../packages/hooks/use-id/index.ts
const defaultIdInjection = {
prefix: Math.floor(Math.random() * 1e4),
current: 0
};
const ID_INJECTION_KEY = Symbol("elIdInjection");
const useIdInjection = () => {
return getCurrentInstance() ? inject(ID_INJECTION_KEY, defaultIdInjection) : defaultIdInjection;
};
const useId = (deterministicId) => {
const idInjection = useIdInjection();
if (!isClient$1 && 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 namespace = useGetDerivedNamespace();
return computedEager(() => unref(deterministicId) || `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`);
};
//#endregion
export { ID_INJECTION_KEY, useId, useIdInjection };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["isClient"],"sources":["../../../../../packages/hooks/use-id/index.ts"],"sourcesContent":["import { getCurrentInstance, inject, unref } from 'vue'\nimport { computedEager } from '@vueuse/core'\nimport { debugWarn, isClient } from '@element-plus/utils'\nimport { useGetDerivedNamespace } from '../use-namespace'\n\nimport type { MaybeRef } from '@vueuse/core'\nimport type { InjectionKey, Ref } from 'vue'\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 useIdInjection = (): ElIdInjectionContext => {\n return getCurrentInstance()\n ? inject(ID_INJECTION_KEY, defaultIdInjection)\n : defaultIdInjection\n}\n\nexport const useId = (deterministicId?: MaybeRef<string>): Ref<string> => {\n const idInjection = useIdInjection()\n if (!isClient && 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 namespace = useGetDerivedNamespace()\n\n // NOTE: Here we use `computedEager` to calculate the id value immediately, avoiding inconsistent id generation due to the lazy feature of `computed` when server rendering.\n const idRef = computedEager(\n () =>\n unref(deterministicId) ||\n `${namespace.value}-id-${idInjection.prefix}-${idInjection.current++}`\n )\n\n return idRef\n}\n"],"mappings":";;;;;;;AAaA,MAAM,qBAAqB;CACzB,QAAQ,KAAK,MAAM,KAAK,QAAQ,GAAG,IAAM;CACzC,SAAS;CACV;AAED,MAAa,mBACX,OAAO,gBAAgB;AAEzB,MAAa,uBAA6C;AACxD,QAAO,oBAAoB,GACvB,OAAO,kBAAkB,mBAAmB,GAC5C;;AAGN,MAAa,SAAS,oBAAoD;CACxE,MAAM,cAAc,gBAAgB;AACpC,KAAI,CAACA,cAAY,gBAAgB,mBAC/B,WACE,eACA;;;;IAKD;CAGH,MAAM,YAAY,wBAAwB;AAS1C,QANc,oBAEV,MAAM,gBAAgB,IACtB,GAAG,UAAU,MAAM,MAAM,YAAY,OAAO,GAAG,YAAY,YAC9D"}
@@ -0,0 +1,23 @@
import { Ref } from "vue";
//#region ../../packages/hooks/use-intermediate-render/index.d.ts
type UseDelayedRenderProps = {
indicator: Ref<boolean>;
intermediateIndicator: Ref<boolean>;
shouldSetIntermediate?: (step: 'show' | 'hide') => boolean;
beforeShow?: () => void;
beforeHide?: () => void;
afterShow?: () => void;
afterHide?: () => void;
};
declare const useDelayedRender: ({
indicator,
intermediateIndicator,
shouldSetIntermediate,
beforeShow,
afterShow,
afterHide,
beforeHide
}: UseDelayedRenderProps) => void;
//#endregion
export { UseDelayedRenderProps, useDelayedRender };
@@ -0,0 +1,28 @@
import { nextTick, unref, watch } from "vue";
//#region ../../packages/hooks/use-intermediate-render/index.ts
const useDelayedRender = ({ indicator, intermediateIndicator, shouldSetIntermediate = () => true, beforeShow, afterShow, afterHide, beforeHide }) => {
watch(() => unref(indicator), (val) => {
if (val) {
beforeShow?.();
nextTick(() => {
if (!unref(indicator)) return;
if (shouldSetIntermediate("show")) intermediateIndicator.value = true;
});
} else {
beforeHide?.();
nextTick(() => {
if (unref(indicator)) return;
if (shouldSetIntermediate("hide")) intermediateIndicator.value = false;
});
}
});
watch(() => intermediateIndicator.value, (val) => {
if (val) afterShow?.();
else afterHide?.();
});
};
//#endregion
export { useDelayedRender };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-intermediate-render/index.ts"],"sourcesContent":["import { nextTick, unref, watch } 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"],"mappings":";;;AAcA,MAAa,oBAAoB,EAC/B,WACA,uBACA,8BAA8B,MAC9B,YACA,WACA,WACA,iBAC2B;AAC3B,aACQ,MAAM,UAAU,GACrB,QAAQ;AACP,MAAI,KAAK;AACP,iBAAc;AACd,kBAAe;AACb,QAAI,CAAC,MAAM,UAAU,CAAE;AACvB,QAAI,sBAAsB,OAAO,CAC/B,uBAAsB,QAAQ;KAEhC;SACG;AACL,iBAAc;AACd,kBAAe;AACb,QAAI,MAAM,UAAU,CAAE;AAEtB,QAAI,sBAAsB,OAAO,CAC/B,uBAAsB,QAAQ;KAEhC;;GAGP;AAID,aACQ,sBAAsB,QAC3B,QAAQ;AACP,MAAI,IACF,cAAa;MAEb,cAAa;GAGlB"}
+23
View File
@@ -0,0 +1,23 @@
import { FieldPath } from "../../utils/typescript.js";
import "../../utils/index.js";
import _default from "../../locale/lang/en.js";
import { Language } from "../../locale/index.js";
import { InjectionKey, Ref } from "vue";
import { MaybeRef } from "@vueuse/core";
//#region ../../packages/hooks/use-locale/index.d.ts
type LocaleKeys = Exclude<FieldPath<typeof _default>, 'name' | 'el'> | (string & NonNullable<unknown>);
type TranslatorOption = Record<string, string | number>;
type Translator = (path: LocaleKeys, option?: TranslatorOption) => string;
type LocaleContext = {
locale: Ref<Language>;
lang: Ref<string>;
t: Translator;
};
declare const buildTranslator: (locale: MaybeRef<Language>) => Translator;
declare const translate: (path: LocaleKeys, option: undefined | TranslatorOption, locale: Language) => string;
declare const buildLocaleContext: (locale: MaybeRef<Language>) => LocaleContext;
declare const localeContextKey: InjectionKey<Ref<Language | undefined>>;
declare const useLocale: (localeOverrides?: Ref<Language | undefined>) => LocaleContext;
//#endregion
export { LocaleContext, LocaleKeys, Translator, TranslatorOption, buildLocaleContext, buildTranslator, localeContextKey, translate, useLocale };
+23
View File
@@ -0,0 +1,23 @@
import en_default from "../../locale/lang/en.mjs";
import { get } from "lodash-unified";
import { computed, inject, isRef, ref, unref } from "vue";
//#region ../../packages/hooks/use-locale/index.ts
const buildTranslator = (locale) => (path, option) => translate(path, option, unref(locale));
const translate = (path, option, locale) => get(locale, path, path).replace(/\{(\w+)\}/g, (_, key) => `${option?.[key] ?? `{${key}}`}`);
const buildLocaleContext = (locale) => {
return {
lang: computed(() => unref(locale).name),
locale: isRef(locale) ? locale : ref(locale),
t: buildTranslator(locale)
};
};
const localeContextKey = Symbol("localeContextKey");
const useLocale = (localeOverrides) => {
const locale = localeOverrides || inject(localeContextKey, ref());
return buildLocaleContext(computed(() => locale.value || en_default));
};
//#endregion
export { buildLocaleContext, buildTranslator, localeContextKey, translate, useLocale };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":["English"],"sources":["../../../../../packages/hooks/use-locale/index.ts"],"sourcesContent":["import { computed, inject, isRef, ref, unref } from 'vue'\nimport { get } from 'lodash-unified'\nimport English from '@element-plus/locale/lang/en'\n\nimport type { MaybeRef } from '@vueuse/core'\nimport type { InjectionKey, Ref } from 'vue'\nimport type { FieldPath } from '@element-plus/utils'\nimport type { Language } from '@element-plus/locale'\n\nexport type LocaleKeys =\n | Exclude<FieldPath<typeof English>, 'name' | 'el'>\n | (string & NonNullable<unknown>)\n\nexport type TranslatorOption = Record<string, string | number>\nexport type Translator = (path: LocaleKeys, option?: TranslatorOption) => string\nexport type LocaleContext = {\n locale: Ref<Language>\n lang: Ref<string>\n t: Translator\n}\n\nexport const buildTranslator =\n (locale: MaybeRef<Language>): Translator =>\n (path, option) =>\n translate(path, option, unref(locale))\n\nexport const translate = (\n path: LocaleKeys,\n option: undefined | TranslatorOption,\n locale: Language\n): string =>\n (get(locale, path, path) as string).replace(\n /\\{(\\w+)\\}/g,\n (_, key) => `${option?.[key] ?? `{${key}}`}`\n )\n\nexport const buildLocaleContext = (\n locale: MaybeRef<Language>\n): LocaleContext => {\n const lang = computed(() => unref(locale).name)\n const localeRef = isRef(locale) ? locale : ref(locale)\n return {\n lang,\n locale: localeRef,\n t: buildTranslator(locale),\n }\n}\n\nexport const localeContextKey: InjectionKey<Ref<Language | undefined>> =\n Symbol('localeContextKey')\n\nexport const useLocale = (localeOverrides?: Ref<Language | undefined>) => {\n const locale = localeOverrides || inject(localeContextKey, ref())!\n return buildLocaleContext(computed(() => locale.value || English))\n}\n"],"mappings":";;;;;AAqBA,MAAa,mBACV,YACA,MAAM,WACL,UAAU,MAAM,QAAQ,MAAM,OAAO,CAAC;AAE1C,MAAa,aACX,MACA,QACA,WAEC,IAAI,QAAQ,MAAM,KAAK,CAAY,QAClC,eACC,GAAG,QAAQ,GAAG,SAAS,QAAQ,IAAI,IAAI,KACzC;AAEH,MAAa,sBACX,WACkB;AAGlB,QAAO;EACL,MAHW,eAAe,MAAM,OAAO,CAAC,KAAK;EAI7C,QAHgB,MAAM,OAAO,GAAG,SAAS,IAAI,OAAO;EAIpD,GAAG,gBAAgB,OAAO;EAC3B;;AAGH,MAAa,mBACX,OAAO,mBAAmB;AAE5B,MAAa,aAAa,oBAAgD;CACxE,MAAM,SAAS,mBAAmB,OAAO,kBAAkB,KAAK,CAAC;AACjE,QAAO,mBAAmB,eAAe,OAAO,SAASA,WAAQ,CAAC"}
+15
View File
@@ -0,0 +1,15 @@
import { UseNamespaceReturn } from "../use-namespace/index.js";
import { Ref } from "vue";
//#region ../../packages/hooks/use-lockscreen/index.d.ts
type UseLockScreenOptions = {
ns?: UseNamespaceReturn;
};
/**
* 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>}
*/
declare const useLockscreen: (trigger: Ref<boolean>, options?: UseLockScreenOptions) => void;
//#endregion
export { UseLockScreenOptions, useLockscreen };
+53
View File
@@ -0,0 +1,53 @@
import { throwError } from "../../utils/error.mjs";
import { addClass, getStyle, hasClass, removeClass } from "../../utils/dom/style.mjs";
import { getScrollBarWidth } from "../../utils/dom/scroll.mjs";
import { useNamespace } from "../use-namespace/index.mjs";
import { computed, isRef, onScopeDispose, watch } from "vue";
//#region ../../packages/hooks/use-lockscreen/index.ts
/**
* 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>}
*/
const useLockscreen = (trigger, options = {}) => {
if (!isRef(trigger)) throwError("[useLockscreen]", "You need to pass a ref param to this function");
const ns = options.ns || useNamespace("popup");
const hiddenCls = computed(() => ns.bm("parent", "hidden"));
let scrollBarWidth = 0;
let withoutHiddenClass = false;
let bodyWidth = "0";
let cleaned = false;
const cleanup = () => {
if (cleaned) return;
cleaned = true;
setTimeout(() => {
if (typeof document === "undefined") return;
if (withoutHiddenClass && document) {
document.body.style.width = bodyWidth;
removeClass(document.body, hiddenCls.value);
}
}, 200);
};
watch(trigger, (val) => {
if (!val) {
cleanup();
return;
}
cleaned = false;
withoutHiddenClass = !hasClass(document.body, hiddenCls.value);
if (withoutHiddenClass) {
bodyWidth = document.body.style.width;
addClass(document.body, hiddenCls.value);
}
scrollBarWidth = getScrollBarWidth(ns.namespace.value);
const bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
const bodyOverflowY = getStyle(document.body, "overflowY");
if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === "scroll") && withoutHiddenClass) document.body.style.width = `calc(100% - ${scrollBarWidth}px)`;
});
onScopeDispose(() => cleanup());
};
//#endregion
export { useLockscreen };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-lockscreen/index.ts"],"sourcesContent":["import { computed, isRef, onScopeDispose, watch } from 'vue'\nimport {\n addClass,\n getScrollBarWidth,\n getStyle,\n hasClass,\n removeClass,\n throwError,\n} from '@element-plus/utils'\nimport { useNamespace } from '../use-namespace'\n\nimport type { Ref } from 'vue'\nimport type { UseNamespaceReturn } from '../use-namespace'\n\nexport type UseLockScreenOptions = {\n ns?: UseNamespaceReturn\n // shouldLock?: MaybeRef<boolean>\n}\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 = (\n trigger: Ref<boolean>,\n options: UseLockScreenOptions = {}\n) => {\n if (!isRef(trigger)) {\n throwError(\n '[useLockscreen]',\n 'You need to pass a ref param to this function'\n )\n }\n\n const ns = options.ns || useNamespace('popup')\n\n const hiddenCls = computed(() => ns.bm('parent', 'hidden'))\n\n let scrollBarWidth = 0\n let withoutHiddenClass = false\n let bodyWidth = '0'\n let cleaned = false\n\n const cleanup = () => {\n if (cleaned) return\n\n cleaned = true\n setTimeout(() => {\n // When the test case is running, the context environment simulated by jsdom may have been destroyed,\n // and the document does not exist at this time.\n if (typeof document === 'undefined') return\n if (withoutHiddenClass && document) {\n document.body.style.width = bodyWidth\n removeClass(document.body, hiddenCls.value)\n }\n }, 200)\n }\n watch(trigger, (val) => {\n if (!val) {\n cleanup()\n return\n }\n\n cleaned = false\n withoutHiddenClass = !hasClass(document.body, hiddenCls.value)\n if (withoutHiddenClass) {\n bodyWidth = document.body.style.width\n addClass(document.body, hiddenCls.value)\n }\n scrollBarWidth = getScrollBarWidth(ns.namespace.value)\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.width = `calc(100% - ${scrollBarWidth}px)`\n }\n })\n onScopeDispose(() => cleanup())\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAa,iBACX,SACA,UAAgC,EAAE,KAC/B;AACH,KAAI,CAAC,MAAM,QAAQ,CACjB,YACE,mBACA,gDACD;CAGH,MAAM,KAAK,QAAQ,MAAM,aAAa,QAAQ;CAE9C,MAAM,YAAY,eAAe,GAAG,GAAG,UAAU,SAAS,CAAC;CAE3D,IAAI,iBAAiB;CACrB,IAAI,qBAAqB;CACzB,IAAI,YAAY;CAChB,IAAI,UAAU;CAEd,MAAM,gBAAgB;AACpB,MAAI,QAAS;AAEb,YAAU;AACV,mBAAiB;AAGf,OAAI,OAAO,aAAa,YAAa;AACrC,OAAI,sBAAsB,UAAU;AAClC,aAAS,KAAK,MAAM,QAAQ;AAC5B,gBAAY,SAAS,MAAM,UAAU,MAAM;;KAE5C,IAAI;;AAET,OAAM,UAAU,QAAQ;AACtB,MAAI,CAAC,KAAK;AACR,YAAS;AACT;;AAGF,YAAU;AACV,uBAAqB,CAAC,SAAS,SAAS,MAAM,UAAU,MAAM;AAC9D,MAAI,oBAAoB;AACtB,eAAY,SAAS,KAAK,MAAM;AAChC,YAAS,SAAS,MAAM,UAAU,MAAM;;AAE1C,mBAAiB,kBAAkB,GAAG,UAAU,MAAM;EACtD,MAAM,kBACJ,SAAS,gBAAgB,eAAe,SAAS,KAAK;EACxD,MAAM,gBAAgB,SAAS,SAAS,MAAM,YAAY;AAC1D,MACE,iBAAiB,MAChB,mBAAmB,kBAAkB,aACtC,mBAEA,UAAS,KAAK,MAAM,QAAQ,eAAe,eAAe;GAE5D;AACF,sBAAqB,SAAS,CAAC"}
+9
View File
@@ -0,0 +1,9 @@
import { Ref } from "vue";
//#region ../../packages/hooks/use-modal/index.d.ts
type ModalInstance = {
handleClose: () => void;
};
declare const useModal: (instance: ModalInstance, visibleRef: Ref<boolean>) => void;
//#endregion
export { useModal };
+25
View File
@@ -0,0 +1,25 @@
import { EVENT_CODE } from "../../constants/aria.mjs";
import { getEventCode } from "../../utils/dom/event.mjs";
import { isClient, useEventListener } from "@vueuse/core";
import { watch } from "vue";
//#region ../../packages/hooks/use-modal/index.ts
const modalStack = [];
const closeModal = (e) => {
if (modalStack.length === 0) return;
if (getEventCode(e) === EVENT_CODE.esc) {
e.stopPropagation();
modalStack[modalStack.length - 1].handleClose();
}
};
const useModal = (instance, visibleRef) => {
watch(visibleRef, (val) => {
if (val) modalStack.push(instance);
else modalStack.splice(modalStack.indexOf(instance), 1);
});
};
if (isClient) useEventListener(document, "keydown", closeModal);
//#endregion
export { useModal };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-modal/index.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { isClient, useEventListener } from '@vueuse/core'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { getEventCode } from '@element-plus/utils'\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 const code = getEventCode(e)\n if (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(modalStack.indexOf(instance), 1)\n }\n })\n}\n\nif (isClient) useEventListener(document, 'keydown', closeModal)\n"],"mappings":";;;;;;AAWA,MAAM,aAA8B,EAAE;AAEtC,MAAM,cAAc,MAAqB;AACvC,KAAI,WAAW,WAAW,EAAG;AAE7B,KADa,aAAa,EAAE,KACf,WAAW,KAAK;AAC3B,IAAE,iBAAiB;AAEnB,EADiB,WAAW,WAAW,SAAS,GACvC,aAAa;;;AAI1B,MAAa,YAAY,UAAyB,eAA6B;AAC7E,OAAM,aAAa,QAAQ;AACzB,MAAI,IACF,YAAW,KAAK,SAAS;MAEzB,YAAW,OAAO,WAAW,QAAQ,SAAS,EAAE,EAAE;GAEpD;;AAGJ,IAAI,SAAU,kBAAiB,UAAU,WAAW,WAAW"}
@@ -0,0 +1,57 @@
import { EpPropFinalized, ExtractPropType } from "../../utils/vue/props/types.js";
import "../../utils/index.js";
import * as vue from "vue";
import { ExtractPropTypes, ExtractPublicPropTypes, Ref } from "vue";
//#region ../../packages/hooks/use-model-toggle/index.d.ts
declare const _prop: EpPropFinalized<(new (...args: any[]) => boolean) | (() => boolean | null) | (((new (...args: any[]) => boolean) | (() => boolean | null)) | null)[], never, never, null, false>;
declare const _event: {
readonly type: vue.PropType<(val: boolean) => void>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
type UseModelTogglePropsRaw<T extends string> = { [K in T]: typeof _prop } & { [K in `onUpdate:${T}`]: typeof _event };
type UseModelTogglePropsGeneric<T extends string> = { [K in T]: ExtractPropType<typeof _prop> } & { [K in `onUpdate:${T}`]: ExtractPropType<typeof _event> };
declare const createModelToggleComposable: <T extends string>(name: T) => {
useModelToggle: ({
indicator,
toggleReason,
shouldHideWhenRouteChanges,
shouldProceed,
onShow,
onHide
}: ModelToggleParams) => {
hide: (event?: Event) => void;
show: (event?: Event) => void;
toggle: () => void;
hasUpdateHandler: vue.ComputedRef<boolean>;
};
useModelToggleProps: UseModelTogglePropsRaw<T>;
useModelToggleEmits: `update:${T}`[];
};
declare const useModelToggle: ({
indicator,
toggleReason,
shouldHideWhenRouteChanges,
shouldProceed,
onShow,
onHide
}: ModelToggleParams) => {
hide: (event?: Event) => void;
show: (event?: Event) => void;
toggle: () => void;
hasUpdateHandler: vue.ComputedRef<boolean>;
}, useModelToggleProps: UseModelTogglePropsRaw<"modelValue">, useModelToggleEmits: "update:modelValue"[];
type UseModelToggleProps = ExtractPropTypes<typeof useModelToggleProps>;
type UseModelTogglePropsPublic = ExtractPublicPropTypes<typeof useModelToggleProps>;
type ModelToggleParams = {
indicator: Ref<boolean>;
toggleReason?: Ref<Event | undefined>;
shouldHideWhenRouteChanges?: Ref<boolean>;
shouldProceed?: () => boolean;
onShow?: (event?: Event) => void;
onHide?: (event?: Event) => void;
};
//#endregion
export { ModelToggleParams, UseModelToggleProps, UseModelTogglePropsGeneric, UseModelTogglePropsPublic, UseModelTogglePropsRaw, createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps };
+85
View File
@@ -0,0 +1,85 @@
import { isClient } from "../../utils/browser.mjs";
import { isBoolean, isFunction } from "../../utils/types.mjs";
import { buildProp, definePropType } from "../../utils/vue/props/runtime.mjs";
import { computed, getCurrentInstance, onMounted, watch } from "vue";
//#region ../../packages/hooks/use-model-toggle/index.ts
const _prop = buildProp({
type: definePropType(Boolean),
default: null
});
const _event = buildProp({ type: definePropType(Function) });
const createModelToggleComposable = (name) => {
const updateEventKey = `update:${name}`;
const updateEventKeyRaw = `onUpdate:${name}`;
const useModelToggleEmits = [updateEventKey];
const useModelToggleProps = {
[name]: _prop,
[updateEventKeyRaw]: _event
};
const useModelToggle = ({ indicator, toggleReason, shouldHideWhenRouteChanges, shouldProceed, onShow, onHide }) => {
const instance = getCurrentInstance();
const { emit } = instance;
const props = instance.props;
const hasUpdateHandler = computed(() => isFunction(props[updateEventKeyRaw]));
const isModelBindingAbsent = computed(() => props[name] === null);
const doShow = (event) => {
if (indicator.value === true) return;
indicator.value = true;
if (toggleReason) toggleReason.value = event;
if (isFunction(onShow)) onShow(event);
};
const doHide = (event) => {
if (indicator.value === false) return;
indicator.value = false;
if (toggleReason) toggleReason.value = event;
if (isFunction(onHide)) onHide(event);
};
const show = (event) => {
if (props.disabled === true || isFunction(shouldProceed) && !shouldProceed()) return;
const shouldEmit = hasUpdateHandler.value && isClient;
if (shouldEmit) emit(updateEventKey, true);
if (isModelBindingAbsent.value || !shouldEmit) doShow(event);
};
const hide = (event) => {
if (props.disabled === true || !isClient) return;
const shouldEmit = hasUpdateHandler.value && isClient;
if (shouldEmit) emit(updateEventKey, false);
if (isModelBindingAbsent.value || !shouldEmit) doHide(event);
};
const onChange = (val) => {
if (!isBoolean(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]);
});
return {
hide,
show,
toggle,
hasUpdateHandler
};
};
return {
useModelToggle,
useModelToggleProps,
useModelToggleEmits
};
};
const { useModelToggle, useModelToggleProps, useModelToggleEmits } = createModelToggleComposable("modelValue");
//#endregion
export { createModelToggleComposable, useModelToggle, useModelToggleEmits, useModelToggleProps };
//# sourceMappingURL=index.mjs.map
File diff suppressed because one or more lines are too long
+28
View File
@@ -0,0 +1,28 @@
import * as vue from "vue";
import { InjectionKey, Ref } from "vue";
//#region ../../packages/hooks/use-namespace/index.d.ts
declare const defaultNamespace = "el";
declare const namespaceContextKey: InjectionKey<Ref<string | undefined>>;
declare const useGetDerivedNamespace: (namespaceOverrides?: Ref<string | undefined>) => vue.ComputedRef<string>;
declare const useNamespace: (block: string, namespaceOverrides?: Ref<string | undefined>) => {
namespace: vue.ComputedRef<string>;
b: (blockSuffix?: string) => string;
e: (element?: string) => string;
m: (modifier?: string) => string;
be: (blockSuffix?: string, element?: string) => string;
em: (element?: string, modifier?: string) => string;
bm: (blockSuffix?: string, modifier?: string) => string;
bem: (blockSuffix?: string, element?: string, modifier?: string) => string;
is: {
(name: string, state: boolean | undefined): string;
(name: string): string;
};
cssVar: (object: Record<string, string>) => Record<string, string>;
cssVarName: (name: string) => string;
cssVarBlock: (object: Record<string, string>) => Record<string, string>;
cssVarBlockName: (name: string) => string;
};
type UseNamespaceReturn = ReturnType<typeof useNamespace>;
//#endregion
export { UseNamespaceReturn, defaultNamespace, namespaceContextKey, useGetDerivedNamespace, useNamespace };
+64
View File
@@ -0,0 +1,64 @@
import { computed, getCurrentInstance, inject, ref, unref } from "vue";
//#region ../../packages/hooks/use-namespace/index.ts
const defaultNamespace = "el";
const statePrefix = "is-";
const _bem = (namespace, block, blockSuffix, element, modifier) => {
let cls = `${namespace}-${block}`;
if (blockSuffix) cls += `-${blockSuffix}`;
if (element) cls += `__${element}`;
if (modifier) cls += `--${modifier}`;
return cls;
};
const namespaceContextKey = Symbol("namespaceContextKey");
const useGetDerivedNamespace = (namespaceOverrides) => {
const derivedNamespace = namespaceOverrides || (getCurrentInstance() ? inject(namespaceContextKey, ref(defaultNamespace)) : ref(defaultNamespace));
return computed(() => {
return unref(derivedNamespace) || defaultNamespace;
});
};
const useNamespace = (block, namespaceOverrides) => {
const namespace = useGetDerivedNamespace(namespaceOverrides);
const b = (blockSuffix = "") => _bem(namespace.value, block, blockSuffix, "", "");
const e = (element) => element ? _bem(namespace.value, block, "", element, "") : "";
const m = (modifier) => modifier ? _bem(namespace.value, block, "", "", modifier) : "";
const be = (blockSuffix, element) => blockSuffix && element ? _bem(namespace.value, block, blockSuffix, element, "") : "";
const em = (element, modifier) => element && modifier ? _bem(namespace.value, block, "", element, modifier) : "";
const bm = (blockSuffix, modifier) => blockSuffix && modifier ? _bem(namespace.value, block, blockSuffix, "", modifier) : "";
const bem = (blockSuffix, element, modifier) => blockSuffix && element && modifier ? _bem(namespace.value, block, blockSuffix, element, modifier) : "";
const is = (name, ...args) => {
const state = args.length >= 1 ? args[0] : true;
return name && state ? `${statePrefix}${name}` : "";
};
const cssVar = (object) => {
const styles = {};
for (const key in object) if (object[key]) styles[`--${namespace.value}-${key}`] = object[key];
return styles;
};
const cssVarBlock = (object) => {
const styles = {};
for (const key in object) if (object[key]) styles[`--${namespace.value}-${block}-${key}`] = object[key];
return styles;
};
const cssVarName = (name) => `--${namespace.value}-${name}`;
const cssVarBlockName = (name) => `--${namespace.value}-${block}-${name}`;
return {
namespace,
b,
e,
m,
be,
em,
bm,
bem,
is,
cssVar,
cssVarName,
cssVarBlock,
cssVarBlockName
};
};
//#endregion
export { defaultNamespace, namespaceContextKey, useGetDerivedNamespace, useNamespace };
//# sourceMappingURL=index.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,18 @@
import * as vue from "vue";
import { ComponentInternalInstance, VNode } from "vue";
//#region ../../packages/hooks/use-ordered-children/index.d.ts
type ChildEssential = {
uid: number;
getVnode: () => VNode;
};
declare const useOrderedChildren: <T extends ChildEssential>(vm: ComponentInternalInstance, childComponentName: string) => {
children: vue.ShallowRef<T[], T[]>;
addChild: (child: T) => void;
removeChild: (child: T) => void;
ChildrenSorter: vue.DefineComponent<{}, () => VNode<vue.RendererNode, vue.RendererElement, {
[key: string]: any;
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
};
//#endregion
export { useOrderedChildren };
@@ -0,0 +1,59 @@
import { flattedChildren } from "../../utils/vue/vnode.mjs";
import { defineComponent, h, isVNode, onMounted, shallowRef, triggerRef } from "vue";
//#region ../../packages/hooks/use-ordered-children/index.ts
const getOrderedChildren = (vm, childComponentName, children) => {
return flattedChildren(vm.subTree).filter((n) => isVNode(n) && n.type?.name === childComponentName && !!n.component).map((n) => n.component.uid).map((uid) => children[uid]).filter((p) => !!p);
};
const useOrderedChildren = (vm, childComponentName) => {
const children = shallowRef({});
const orderedChildren = shallowRef([]);
const nodesMap = /* @__PURE__ */ new WeakMap();
const addChild = (child) => {
children.value[child.uid] = child;
triggerRef(children);
onMounted(() => {
const childNode = child.getVnode().el;
const parentNode = childNode.parentNode;
if (!nodesMap.has(parentNode)) {
nodesMap.set(parentNode, []);
const originalFn = parentNode.insertBefore.bind(parentNode);
parentNode.insertBefore = (node, anchor) => {
if (nodesMap.get(parentNode).some((el) => node === el || anchor === el)) triggerRef(children);
return originalFn(node, anchor);
};
}
nodesMap.get(parentNode).push(childNode);
});
};
const removeChild = (child) => {
delete children.value[child.uid];
triggerRef(children);
const childNode = child.getVnode().el;
const parentNode = childNode.parentNode;
const childNodes = nodesMap.get(parentNode);
const index = childNodes.indexOf(childNode);
childNodes.splice(index, 1);
};
const sortChildren = () => {
orderedChildren.value = getOrderedChildren(vm, childComponentName, children.value);
};
const IsolatedRenderer = (props) => {
return props.render();
};
return {
children: orderedChildren,
addChild,
removeChild,
ChildrenSorter: defineComponent({ setup(_, { slots }) {
return () => {
sortChildren();
return slots.default ? h(IsolatedRenderer, { render: slots.default }) : null;
};
} })
};
};
//#endregion
export { useOrderedChildren };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-ordered-children/index.ts"],"sourcesContent":["import {\n defineComponent,\n h,\n isVNode,\n onMounted,\n shallowRef,\n triggerRef,\n} from 'vue'\nimport { flattedChildren } from '@element-plus/utils'\n\nimport type { Component, ComponentInternalInstance, VNode } from 'vue'\n\ntype ChildEssential = {\n uid: number\n getVnode: () => VNode\n}\n\nconst getOrderedChildren = <T>(\n vm: ComponentInternalInstance,\n childComponentName: string,\n children: Record<number, T>\n): T[] => {\n const nodes = flattedChildren(vm.subTree).filter(\n (n): n is VNode =>\n isVNode(n) &&\n (n.type as Component)?.name === childComponentName &&\n !!n.component\n )\n const uids = nodes.map((n) => n.component!.uid)\n return uids.map((uid) => children[uid]).filter((p) => !!p)\n}\n\nexport const useOrderedChildren = <T extends ChildEssential>(\n vm: ComponentInternalInstance,\n childComponentName: string\n) => {\n const children = shallowRef<Record<number, T>>({})\n const orderedChildren = shallowRef<T[]>([])\n const nodesMap = new WeakMap<ParentNode, Node[]>()\n\n const addChild = (child: T) => {\n children.value[child.uid] = child\n triggerRef(children)\n\n onMounted(() => {\n const childNode = child.getVnode().el! as Node\n const parentNode = childNode.parentNode!\n\n if (!nodesMap.has(parentNode)) {\n nodesMap.set(parentNode, [])\n\n const originalFn = parentNode.insertBefore.bind(parentNode)\n parentNode.insertBefore = <T extends Node>(\n node: T,\n anchor: Node | null\n ) => {\n // Schedule a job to update `orderedChildren` if the root element of child components is moved\n const shouldSortChildren = nodesMap\n .get(parentNode)!\n .some((el) => node === el || anchor === el)\n if (shouldSortChildren) triggerRef(children)\n\n return originalFn(node, anchor)\n }\n }\n\n nodesMap.get(parentNode)!.push(childNode)\n })\n }\n\n const removeChild = (child: T) => {\n delete children.value[child.uid]\n triggerRef(children)\n\n const childNode = child.getVnode().el! as Node\n const parentNode = childNode.parentNode!\n const childNodes = nodesMap.get(parentNode)!\n const index = childNodes.indexOf(childNode)\n childNodes.splice(index, 1)\n }\n\n const sortChildren = () => {\n orderedChildren.value = getOrderedChildren(\n vm,\n childComponentName,\n children.value\n )\n }\n\n const IsolatedRenderer = (props: { render: () => VNode[] }) => {\n return props.render()\n }\n\n // TODO: Refactor `el-description` before converting this to a functional component\n const ChildrenSorter = defineComponent({\n setup(_, { slots }) {\n return () => {\n sortChildren()\n\n return slots.default\n ? // Create a new `ReactiveEffect` to ensure `ChildrenSorter` doesn't track any extra dependencies\n // @ts-ignore TODO: Remove this after Vue is upgraded\n h(IsolatedRenderer, {\n render: slots.default,\n })\n : null\n }\n },\n })\n\n return {\n children: orderedChildren,\n addChild,\n removeChild,\n ChildrenSorter,\n }\n}\n"],"mappings":";;;;AAiBA,MAAM,sBACJ,IACA,oBACA,aACQ;AAQR,QAPc,gBAAgB,GAAG,QAAQ,CAAC,QACvC,MACC,QAAQ,EAAE,IACT,EAAE,MAAoB,SAAS,sBAChC,CAAC,CAAC,EAAE,UACP,CACkB,KAAK,MAAM,EAAE,UAAW,IAAI,CACnC,KAAK,QAAQ,SAAS,KAAK,CAAC,QAAQ,MAAM,CAAC,CAAC,EAAE;;AAG5D,MAAa,sBACX,IACA,uBACG;CACH,MAAM,WAAW,WAA8B,EAAE,CAAC;CAClD,MAAM,kBAAkB,WAAgB,EAAE,CAAC;CAC3C,MAAM,2BAAW,IAAI,SAA6B;CAElD,MAAM,YAAY,UAAa;AAC7B,WAAS,MAAM,MAAM,OAAO;AAC5B,aAAW,SAAS;AAEpB,kBAAgB;GACd,MAAM,YAAY,MAAM,UAAU,CAAC;GACnC,MAAM,aAAa,UAAU;AAE7B,OAAI,CAAC,SAAS,IAAI,WAAW,EAAE;AAC7B,aAAS,IAAI,YAAY,EAAE,CAAC;IAE5B,MAAM,aAAa,WAAW,aAAa,KAAK,WAAW;AAC3D,eAAW,gBACT,MACA,WACG;AAKH,SAH2B,SACxB,IAAI,WAAW,CACf,MAAM,OAAO,SAAS,MAAM,WAAW,GAAG,CACrB,YAAW,SAAS;AAE5C,YAAO,WAAW,MAAM,OAAO;;;AAInC,YAAS,IAAI,WAAW,CAAE,KAAK,UAAU;IACzC;;CAGJ,MAAM,eAAe,UAAa;AAChC,SAAO,SAAS,MAAM,MAAM;AAC5B,aAAW,SAAS;EAEpB,MAAM,YAAY,MAAM,UAAU,CAAC;EACnC,MAAM,aAAa,UAAU;EAC7B,MAAM,aAAa,SAAS,IAAI,WAAW;EAC3C,MAAM,QAAQ,WAAW,QAAQ,UAAU;AAC3C,aAAW,OAAO,OAAO,EAAE;;CAG7B,MAAM,qBAAqB;AACzB,kBAAgB,QAAQ,mBACtB,IACA,oBACA,SAAS,MACV;;CAGH,MAAM,oBAAoB,UAAqC;AAC7D,SAAO,MAAM,QAAQ;;AAoBvB,QAAO;EACL,UAAU;EACV;EACA;EACA,gBApBqB,gBAAgB,EACrC,MAAM,GAAG,EAAE,SAAS;AAClB,gBAAa;AACX,kBAAc;AAEd,WAAO,MAAM,UAGT,EAAE,kBAAkB,EAClB,QAAQ,MAAM,SACf,CAAC,GACF;;KAGT,CAAC;EAOD"}
@@ -0,0 +1,13 @@
import * as vue from "vue";
//#region ../../packages/hooks/use-popper-container/index.d.ts
declare const usePopperContainerId: () => {
id: vue.ComputedRef<string>;
selector: vue.ComputedRef<string>;
};
declare const usePopperContainer: () => {
id: vue.ComputedRef<string>;
selector: vue.ComputedRef<string>;
};
//#endregion
export { usePopperContainer, usePopperContainerId };
@@ -0,0 +1,38 @@
import { isClient } from "../../utils/browser.mjs";
import { useGetDerivedNamespace } from "../use-namespace/index.mjs";
import { useIdInjection } from "../use-id/index.mjs";
import { computed, onBeforeMount } from "vue";
//#region ../../packages/hooks/use-popper-container/index.ts
const usePopperContainerId = () => {
const namespace = useGetDerivedNamespace();
const idInjection = useIdInjection();
const id = computed(() => {
return `${namespace.value}-popper-container-${idInjection.prefix}`;
});
return {
id,
selector: computed(() => `#${id.value}`)
};
};
const createContainer = (id) => {
const container = document.createElement("div");
container.id = id;
document.body.appendChild(container);
return container;
};
const usePopperContainer = () => {
const { id, selector } = usePopperContainerId();
onBeforeMount(() => {
if (!isClient) return;
if (!document.body.querySelector(selector.value)) createContainer(id.value);
});
return {
id,
selector
};
};
//#endregion
export { usePopperContainer, usePopperContainerId };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-popper-container/index.ts"],"sourcesContent":["import { computed, onBeforeMount } from 'vue'\nimport { isClient } from '@element-plus/utils'\nimport { useGetDerivedNamespace } from '../use-namespace'\nimport { useIdInjection } from '../use-id'\n\nexport const usePopperContainerId = () => {\n const namespace = useGetDerivedNamespace()\n const idInjection = useIdInjection()\n\n const id = computed(() => {\n return `${namespace.value}-popper-container-${idInjection.prefix}`\n })\n const selector = computed(() => `#${id.value}`)\n\n return {\n id,\n selector,\n }\n}\n\nconst createContainer = (id: string) => {\n const container = document.createElement('div')\n container.id = id\n document.body.appendChild(container)\n return container\n}\n\nexport const usePopperContainer = () => {\n const { id, selector } = usePopperContainerId()\n onBeforeMount(() => {\n if (!isClient) return\n\n // This is for bypassing the error that when under testing env, we often encounter\n // document.body.innerHTML = '' situation\n // for this we need to disable the caching since it's not really needed\n if (\n process.env.NODE_ENV === 'test' ||\n !document.body.querySelector(selector.value)\n ) {\n createContainer(id.value)\n }\n })\n\n return {\n id,\n selector,\n }\n}\n"],"mappings":";;;;;;AAKA,MAAa,6BAA6B;CACxC,MAAM,YAAY,wBAAwB;CAC1C,MAAM,cAAc,gBAAgB;CAEpC,MAAM,KAAK,eAAe;AACxB,SAAO,GAAG,UAAU,MAAM,oBAAoB,YAAY;GAC1D;AAGF,QAAO;EACL;EACA,UAJe,eAAe,IAAI,GAAG,QAAQ;EAK9C;;AAGH,MAAM,mBAAmB,OAAe;CACtC,MAAM,YAAY,SAAS,cAAc,MAAM;AAC/C,WAAU,KAAK;AACf,UAAS,KAAK,YAAY,UAAU;AACpC,QAAO;;AAGT,MAAa,2BAA2B;CACtC,MAAM,EAAE,IAAI,aAAa,sBAAsB;AAC/C,qBAAoB;AAClB,MAAI,CAAC,SAAU;AAKf,MAEE,CAAC,SAAS,KAAK,cAAc,SAAS,MAAM,CAE5C,iBAAgB,GAAG,MAAM;GAE3B;AAEF,QAAO;EACL;EACA;EACD"}
+83
View File
@@ -0,0 +1,83 @@
import * as vue from "vue";
import { Ref } from "vue";
import * as _popperjs_core0 from "@popperjs/core";
import { Instance, Modifier, Options, State, VirtualElement } from "@popperjs/core";
//#region ../../packages/hooks/use-popper/index.d.ts
type ElementType = HTMLElement | undefined;
type ReferenceElement = ElementType | VirtualElement;
type PartialOptions = Partial<Options>;
declare const usePopper: (referenceElementRef: Ref<ReferenceElement>, popperElementRef: Ref<ElementType>, opts?: Ref<PartialOptions> | PartialOptions) => {
state: vue.ComputedRef<{
elements?: {
reference: Element | VirtualElement;
popper: HTMLElement;
arrow?: HTMLElement;
} | undefined;
options?: _popperjs_core0.OptionsGeneric<any> | undefined;
placement?: _popperjs_core0.Placement | undefined;
strategy?: _popperjs_core0.PositioningStrategy | undefined;
orderedModifiers?: Modifier<any, any>[] | undefined;
rects?: _popperjs_core0.StateRects | undefined;
scrollParents?: {
reference: Array<Element | _popperjs_core0.Window | _popperjs_core0.VisualViewport>;
popper: Array<Element | _popperjs_core0.Window | _popperjs_core0.VisualViewport>;
} | undefined;
styles?: {
[key: string]: Partial<CSSStyleDeclaration>;
} | undefined;
attributes?: {
[key: string]: {
[key: string]: string | boolean;
};
} | undefined;
modifiersData?: {
[key: string]: any;
arrow?: {
x?: number;
y?: number;
centerOffset: number;
};
hide?: {
isReferenceHidden: boolean;
hasPopperEscaped: boolean;
referenceClippingOffsets: _popperjs_core0.SideObject;
popperEscapeOffsets: _popperjs_core0.SideObject;
};
offset?: {
top?: _popperjs_core0.Offsets | undefined;
auto?: _popperjs_core0.Offsets | undefined;
bottom?: _popperjs_core0.Offsets | undefined;
left?: _popperjs_core0.Offsets | undefined;
right?: _popperjs_core0.Offsets | undefined;
"auto-start"?: _popperjs_core0.Offsets | undefined;
"auto-end"?: _popperjs_core0.Offsets | undefined;
"top-start"?: _popperjs_core0.Offsets | undefined;
"top-end"?: _popperjs_core0.Offsets | undefined;
"bottom-start"?: _popperjs_core0.Offsets | undefined;
"bottom-end"?: _popperjs_core0.Offsets | undefined;
"right-start"?: _popperjs_core0.Offsets | undefined;
"right-end"?: _popperjs_core0.Offsets | undefined;
"left-start"?: _popperjs_core0.Offsets | undefined;
"left-end"?: _popperjs_core0.Offsets | undefined;
};
preventOverflow?: _popperjs_core0.Offsets;
popperOffsets?: _popperjs_core0.Offsets;
} | undefined;
reset?: boolean | undefined;
}>;
styles: vue.ComputedRef<{
[key: string]: Partial<CSSStyleDeclaration>;
}>;
attributes: vue.ComputedRef<{
[key: string]: {
[key: string]: string | boolean;
};
}>;
update: () => Promise<Partial<State>> | undefined;
forceUpdate: () => void | undefined;
instanceRef: vue.ComputedRef<Instance | undefined>;
};
type UsePopperReturn = ReturnType<typeof usePopper>;
//#endregion
export { PartialOptions, UsePopperReturn, usePopper };
+81
View File
@@ -0,0 +1,81 @@
import { fromPairs } from "lodash-unified";
import { computed, onBeforeUnmount, ref, shallowRef, unref, watch } from "vue";
import { createPopper } from "@popperjs/core";
//#region ../../packages/hooks/use-popper/index.ts
const usePopper = (referenceElementRef, popperElementRef, opts = {}) => {
const stateUpdater = {
name: "updateState",
enabled: true,
phase: "write",
fn: ({ state }) => {
const derivedState = deriveState(state);
Object.assign(states.value, derivedState);
},
requires: ["computeStyles"]
};
const options = computed(() => {
const { onFirstUpdate, placement, strategy, modifiers } = unref(opts);
return {
onFirstUpdate,
placement: placement || "bottom",
strategy: strategy || "absolute",
modifiers: [
...modifiers || [],
stateUpdater,
{
name: "applyStyles",
enabled: false
}
]
};
});
const instanceRef = shallowRef();
const states = ref({
styles: {
popper: {
position: unref(options).strategy,
left: "0",
top: "0"
},
arrow: { position: "absolute" }
},
attributes: {}
});
const destroy = () => {
if (!instanceRef.value) return;
instanceRef.value.destroy();
instanceRef.value = void 0;
};
watch(options, (newOptions) => {
const instance = unref(instanceRef);
if (instance) instance.setOptions(newOptions);
}, { deep: true });
watch([referenceElementRef, popperElementRef], ([referenceElement, popperElement]) => {
destroy();
if (!referenceElement || !popperElement) return;
instanceRef.value = createPopper(referenceElement, popperElement, unref(options));
});
onBeforeUnmount(() => {
destroy();
});
return {
state: computed(() => ({ ...unref(instanceRef)?.state || {} })),
styles: computed(() => unref(states).styles),
attributes: computed(() => unref(states).attributes),
update: () => unref(instanceRef)?.update(),
forceUpdate: () => unref(instanceRef)?.forceUpdate(),
instanceRef: computed(() => unref(instanceRef))
};
};
function deriveState(state) {
const elements = Object.keys(state.elements);
return {
styles: fromPairs(elements.map((element) => [element, state.styles[element] || {}])),
attributes: fromPairs(elements.map((element) => [element, state.attributes[element]]))
};
}
//#endregion
export { usePopper };
//# sourceMappingURL=index.mjs.map
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
import { Ref } from "vue";
//#region ../../packages/hooks/use-prevent-global/index.d.ts
declare const usePreventGlobal: <E extends keyof DocumentEventMap>(indicator: Ref<boolean>, evt: E, cb: (e: DocumentEventMap[E]) => boolean) => void;
//#endregion
export { usePreventGlobal };
@@ -0,0 +1,18 @@
import { useEventListener } from "@vueuse/core";
import { watch } from "vue";
//#region ../../packages/hooks/use-prevent-global/index.ts
const usePreventGlobal = (indicator, evt, cb) => {
const prevent = (e) => {
if (cb(e)) e.stopImmediatePropagation();
};
let stop = void 0;
watch(() => indicator.value, (val) => {
if (val) stop = useEventListener(document, evt, prevent, true);
else stop?.();
}, { immediate: true });
};
//#endregion
export { usePreventGlobal };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-prevent-global/index.ts"],"sourcesContent":["import { watch } from 'vue'\nimport { useEventListener } from '@vueuse/core'\n\nimport type { Ref } from 'vue'\n\nexport const usePreventGlobal = <E extends keyof DocumentEventMap>(\n indicator: Ref<boolean>,\n evt: E,\n cb: (e: DocumentEventMap[E]) => boolean\n) => {\n const prevent = (e: DocumentEventMap[E]) => {\n if (cb(e)) e.stopImmediatePropagation()\n }\n let stop: (() => void) | undefined = undefined\n watch(\n () => indicator.value,\n (val) => {\n if (val) {\n stop = useEventListener(document, evt, prevent, true)\n } else {\n stop?.()\n }\n },\n { immediate: true }\n )\n}\n"],"mappings":";;;;AAKA,MAAa,oBACX,WACA,KACA,OACG;CACH,MAAM,WAAW,MAA2B;AAC1C,MAAI,GAAG,EAAE,CAAE,GAAE,0BAA0B;;CAEzC,IAAI,OAAiC;AACrC,aACQ,UAAU,QACf,QAAQ;AACP,MAAI,IACF,QAAO,iBAAiB,UAAU,KAAK,SAAS,KAAK;MAErD,SAAQ;IAGZ,EAAE,WAAW,MAAM,CACpB"}
+6
View File
@@ -0,0 +1,6 @@
import { ComputedRef } from "vue";
//#region ../../packages/hooks/use-prop/index.d.ts
declare const useProp: <T>(name: string) => ComputedRef<T | undefined>;
//#endregion
export { useProp };
+11
View File
@@ -0,0 +1,11 @@
import { computed, getCurrentInstance } from "vue";
//#region ../../packages/hooks/use-prop/index.ts
const useProp = (name) => {
const vm = getCurrentInstance();
return computed(() => (vm?.proxy?.$props)?.[name]);
};
//#endregion
export { useProp };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-prop/index.ts"],"sourcesContent":["import { computed, getCurrentInstance } from 'vue'\n\nimport type { ComputedRef } from 'vue'\n\nexport const useProp = <T>(name: string): ComputedRef<T | undefined> => {\n const vm = getCurrentInstance()\n return computed(() => (vm?.proxy?.$props as any)?.[name])\n}\n"],"mappings":";;;AAIA,MAAa,WAAc,SAA6C;CACtE,MAAM,KAAK,oBAAoB;AAC/B,QAAO,gBAAgB,IAAI,OAAO,UAAiB,MAAM"}
@@ -0,0 +1,8 @@
//#region ../../packages/hooks/use-same-target/index.d.ts
declare const useSameTarget: (handleClick?: (e: MouseEvent) => void) => {
onClick: (e: MouseEvent) => void;
onMousedown: (e: MouseEvent) => void;
onMouseup: (e: MouseEvent) => void;
};
//#endregion
export { useSameTarget };
+31
View File
@@ -0,0 +1,31 @@
import { NOOP } from "../../utils/functions.mjs";
//#region ../../packages/hooks/use-same-target/index.ts
const useSameTarget = (handleClick) => {
if (!handleClick) return {
onClick: NOOP,
onMousedown: NOOP,
onMouseup: NOOP
};
let mousedownTarget = false;
let mouseupTarget = false;
const onClick = (e) => {
if (mousedownTarget && mouseupTarget) handleClick(e);
mousedownTarget = mouseupTarget = false;
};
const onMousedown = (e) => {
mousedownTarget = e.target === e.currentTarget;
};
const onMouseup = (e) => {
mouseupTarget = e.target === e.currentTarget;
};
return {
onClick,
onMousedown,
onMouseup
};
};
//#endregion
export { useSameTarget };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-same-target/index.ts"],"sourcesContent":["import { NOOP } from '@element-plus/utils'\n\nexport const useSameTarget = (handleClick?: (e: MouseEvent) => void) => {\n if (!handleClick) {\n return { onClick: NOOP, onMousedown: NOOP, onMouseup: NOOP }\n }\n\n let mousedownTarget = false\n let mouseupTarget = false\n // refer to this https://javascript.info/mouse-events-basics\n // events fired in the order: mousedown -> mouseup -> click\n // we need to set the mousedown handle to false after click fired.\n const onClick = (e: MouseEvent) => {\n // if and only if\n if (mousedownTarget && mouseupTarget) {\n handleClick(e)\n }\n mousedownTarget = mouseupTarget = false\n }\n\n const onMousedown = (e: MouseEvent) => {\n // marking current mousedown target.\n mousedownTarget = e.target === e.currentTarget\n }\n const onMouseup = (e: MouseEvent) => {\n // marking current mouseup target.\n mouseupTarget = e.target === e.currentTarget\n }\n\n return { onClick, onMousedown, onMouseup }\n}\n"],"mappings":";;;AAEA,MAAa,iBAAiB,gBAA0C;AACtE,KAAI,CAAC,YACH,QAAO;EAAE,SAAS;EAAM,aAAa;EAAM,WAAW;EAAM;CAG9D,IAAI,kBAAkB;CACtB,IAAI,gBAAgB;CAIpB,MAAM,WAAW,MAAkB;AAEjC,MAAI,mBAAmB,cACrB,aAAY,EAAE;AAEhB,oBAAkB,gBAAgB;;CAGpC,MAAM,eAAe,MAAkB;AAErC,oBAAkB,EAAE,WAAW,EAAE;;CAEnC,MAAM,aAAa,MAAkB;AAEnC,kBAAgB,EAAE,WAAW,EAAE;;AAGjC,QAAO;EAAE;EAAS;EAAa;EAAW"}
+28
View File
@@ -0,0 +1,28 @@
import { EpPropMergeType } from "../../utils/vue/props/types.js";
import { ComponentSize } from "../../constants/size.js";
import "../../utils/index.js";
import * as vue from "vue";
import { InjectionKey, Ref } from "vue";
//#region ../../packages/hooks/use-size/index.d.ts
declare const useSizeProp: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
declare const useSizeProps: {
size: {
readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
readonly required: false;
readonly validator: ((val: unknown) => boolean) | undefined;
__epPropKey: true;
};
};
interface SizeContext {
size: Ref<ComponentSize>;
}
declare const SIZE_INJECTION_KEY: InjectionKey<SizeContext>;
declare const useGlobalSize: () => vue.ComputedRef<"" | "default" | "small" | "large">;
//#endregion
export { SIZE_INJECTION_KEY, SizeContext, useGlobalSize, useSizeProp, useSizeProps };
+22
View File
@@ -0,0 +1,22 @@
import { componentSizes } from "../../constants/size.mjs";
import { buildProp } from "../../utils/vue/props/runtime.mjs";
import { computed, inject, unref } from "vue";
//#region ../../packages/hooks/use-size/index.ts
const useSizeProp = buildProp({
type: String,
values: componentSizes,
required: false
});
const useSizeProps = { size: useSizeProp };
const SIZE_INJECTION_KEY = Symbol("size");
const useGlobalSize = () => {
const injectedSize = inject(SIZE_INJECTION_KEY, {});
return computed(() => {
return unref(injectedSize.size) || "";
});
};
//#endregion
export { SIZE_INJECTION_KEY, useGlobalSize, useSizeProp, useSizeProps };
//# sourceMappingURL=index.mjs.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-size/index.ts"],"sourcesContent":["import { computed, inject, unref } from 'vue'\nimport { buildProp } from '@element-plus/utils'\nimport { componentSizes } from '@element-plus/constants'\n\nimport type { InjectionKey, Ref } from 'vue'\nimport type { ComponentSize } from '@element-plus/constants'\n\nexport const useSizeProp = buildProp({\n type: String,\n values: componentSizes,\n required: false,\n} as const)\n\nexport const useSizeProps = {\n size: useSizeProp,\n}\n\nexport interface SizeContext {\n size: Ref<ComponentSize>\n}\n\nexport const SIZE_INJECTION_KEY: InjectionKey<SizeContext> = Symbol('size')\n\nexport const useGlobalSize = () => {\n const injectedSize = inject(SIZE_INJECTION_KEY, {} as SizeContext)\n\n return computed<ComponentSize>(() => {\n return unref(injectedSize.size) || ''\n })\n}\n"],"mappings":";;;;;AAOA,MAAa,cAAc,UAAU;CACnC,MAAM;CACN,QAAQ;CACR,UAAU;CACX,CAAU;AAEX,MAAa,eAAe,EAC1B,MAAM,aACP;AAMD,MAAa,qBAAgD,OAAO,OAAO;AAE3E,MAAa,sBAAsB;CACjC,MAAM,eAAe,OAAO,oBAAoB,EAAE,CAAgB;AAElE,QAAO,eAA8B;AACnC,SAAO,MAAM,aAAa,KAAK,IAAI;GACnC"}
+11
View File
@@ -0,0 +1,11 @@
import { Ref, VNode } from "vue";
//#region ../../packages/hooks/use-teleport/index.d.ts
declare const useTeleport: (contentRenderer: () => VNode, appendToBody: Ref<boolean>) => {
isTeleportVisible: Ref<boolean, boolean>;
showTeleport: () => void;
hideTeleport: () => void;
renderTeleport: () => void;
};
//#endregion
export { useTeleport };
+42
View File
@@ -0,0 +1,42 @@
import { isClient } from "../../utils/browser.mjs";
import { createGlobalNode, removeGlobalNode } from "../../utils/vue/global-node.mjs";
import { NOOP } from "../../utils/functions.mjs";
import { Teleport, h, onUnmounted, ref } from "vue";
//#region ../../packages/hooks/use-teleport/index.ts
const useTeleport = (contentRenderer, appendToBody) => {
const isTeleportVisible = ref(false);
if (!isClient) return {
isTeleportVisible,
showTeleport: NOOP,
hideTeleport: NOOP,
renderTeleport: NOOP
};
let $el = null;
const showTeleport = () => {
isTeleportVisible.value = true;
if ($el !== null) return;
$el = createGlobalNode();
};
const hideTeleport = () => {
isTeleportVisible.value = false;
if ($el !== null) {
removeGlobalNode($el);
$el = null;
}
};
const renderTeleport = () => {
return appendToBody.value !== true ? contentRenderer() : isTeleportVisible.value ? [h(Teleport, { to: $el }, contentRenderer())] : void 0;
};
onUnmounted(hideTeleport);
return {
isTeleportVisible,
showTeleport,
hideTeleport,
renderTeleport
};
};
//#endregion
export { useTeleport };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-teleport/index.ts"],"sourcesContent":["import { Teleport, h, onUnmounted, ref } from 'vue'\nimport {\n NOOP,\n createGlobalNode,\n isClient,\n removeGlobalNode,\n} from '@element-plus/utils'\n\nimport type { Ref, VNode } from 'vue'\n\nexport const useTeleport = (\n contentRenderer: () => VNode,\n appendToBody: Ref<boolean>\n) => {\n const isTeleportVisible = ref(false)\n\n if (!isClient) {\n return {\n isTeleportVisible,\n showTeleport: NOOP,\n hideTeleport: NOOP,\n renderTeleport: NOOP,\n }\n }\n\n let $el: HTMLElement | null = null\n\n const showTeleport = () => {\n isTeleportVisible.value = true\n // this allows the delayed showing strategy since the the content itself could be enterable\n // e.g. el-popper\n if ($el !== null) return\n\n $el = createGlobalNode()\n }\n\n const hideTeleport = () => {\n isTeleportVisible.value = false\n if ($el !== null) {\n removeGlobalNode($el)\n $el = null\n }\n }\n\n const renderTeleport = () => {\n return appendToBody.value !== true\n ? contentRenderer()\n : isTeleportVisible.value\n ? [h(Teleport, { to: $el }, contentRenderer())]\n : undefined\n }\n\n onUnmounted(hideTeleport)\n\n return {\n isTeleportVisible,\n showTeleport,\n hideTeleport,\n renderTeleport,\n }\n}\n"],"mappings":";;;;;;AAUA,MAAa,eACX,iBACA,iBACG;CACH,MAAM,oBAAoB,IAAI,MAAM;AAEpC,KAAI,CAAC,SACH,QAAO;EACL;EACA,cAAc;EACd,cAAc;EACd,gBAAgB;EACjB;CAGH,IAAI,MAA0B;CAE9B,MAAM,qBAAqB;AACzB,oBAAkB,QAAQ;AAG1B,MAAI,QAAQ,KAAM;AAElB,QAAM,kBAAkB;;CAG1B,MAAM,qBAAqB;AACzB,oBAAkB,QAAQ;AAC1B,MAAI,QAAQ,MAAM;AAChB,oBAAiB,IAAI;AACrB,SAAM;;;CAIV,MAAM,uBAAuB;AAC3B,SAAO,aAAa,UAAU,OAC1B,iBAAiB,GACjB,kBAAkB,QAChB,CAAC,EAAE,UAAU,EAAE,IAAI,KAAK,EAAE,iBAAiB,CAAC,CAAC,GAC7C;;AAGR,aAAY,aAAa;AAEzB,QAAO;EACL;EACA;EACA;EACA;EACD"}
@@ -0,0 +1,11 @@
import { Ref } from "vue";
//#region ../../packages/hooks/use-throttle-render/index.d.ts
type ThrottleType = {
leading?: number;
trailing?: number;
initVal?: boolean;
} | number;
declare const useThrottleRender: (loading: Ref<boolean>, throttle?: ThrottleType) => Ref<boolean, boolean>;
//#endregion
export { ThrottleType, useThrottleRender };
@@ -0,0 +1,34 @@
import { isNumber, isObject, isUndefined } from "../../utils/types.mjs";
import { onMounted, ref, watch } from "vue";
//#region ../../packages/hooks/use-throttle-render/index.ts
const useThrottleRender = (loading, throttle = 0) => {
if (throttle === 0) return loading;
const throttled = ref(isObject(throttle) && Boolean(throttle.initVal));
let timeoutHandle = null;
const dispatchThrottling = (timer) => {
if (isUndefined(timer)) {
throttled.value = loading.value;
return;
}
if (timeoutHandle) clearTimeout(timeoutHandle);
timeoutHandle = setTimeout(() => {
throttled.value = loading.value;
}, timer);
};
const dispatcher = (type) => {
if (type === "leading") if (isNumber(throttle)) dispatchThrottling(throttle);
else dispatchThrottling(throttle.leading);
else if (isObject(throttle)) dispatchThrottling(throttle.trailing);
else throttled.value = false;
};
onMounted(() => dispatcher("leading"));
watch(() => loading.value, (val) => {
dispatcher(val ? "leading" : "trailing");
});
return throttled;
};
//#endregion
export { useThrottleRender };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-throttle-render/index.ts"],"sourcesContent":["import { onMounted, ref, watch } from 'vue'\nimport { isNumber, isObject, isUndefined } from '@element-plus/utils'\n\nimport type { Ref } from 'vue'\n\nexport type ThrottleType =\n | { leading?: number; trailing?: number; initVal?: boolean }\n | number\n\nexport const useThrottleRender = (\n loading: Ref<boolean>,\n throttle: ThrottleType = 0\n) => {\n if (throttle === 0) return loading\n const initVal = isObject(throttle) && Boolean(throttle.initVal)\n const throttled = ref(initVal)\n let timeoutHandle: ReturnType<typeof setTimeout> | null = null\n\n const dispatchThrottling = (timer: number | undefined) => {\n if (isUndefined(timer)) {\n throttled.value = loading.value\n return\n }\n if (timeoutHandle) {\n clearTimeout(timeoutHandle)\n }\n timeoutHandle = setTimeout(() => {\n throttled.value = loading.value\n }, timer)\n }\n\n const dispatcher = (type: 'leading' | 'trailing') => {\n if (type === 'leading') {\n if (isNumber(throttle)) {\n dispatchThrottling(throttle)\n } else {\n dispatchThrottling(throttle.leading)\n }\n } else {\n if (isObject(throttle)) {\n dispatchThrottling(throttle.trailing)\n } else {\n throttled.value = false\n }\n }\n }\n\n onMounted(() => dispatcher('leading'))\n\n watch(\n () => loading.value,\n (val) => {\n dispatcher(val ? 'leading' : 'trailing')\n }\n )\n\n return throttled\n}\n"],"mappings":";;;;AASA,MAAa,qBACX,SACA,WAAyB,MACtB;AACH,KAAI,aAAa,EAAG,QAAO;CAE3B,MAAM,YAAY,IADF,SAAS,SAAS,IAAI,QAAQ,SAAS,QAAQ,CACjC;CAC9B,IAAI,gBAAsD;CAE1D,MAAM,sBAAsB,UAA8B;AACxD,MAAI,YAAY,MAAM,EAAE;AACtB,aAAU,QAAQ,QAAQ;AAC1B;;AAEF,MAAI,cACF,cAAa,cAAc;AAE7B,kBAAgB,iBAAiB;AAC/B,aAAU,QAAQ,QAAQ;KACzB,MAAM;;CAGX,MAAM,cAAc,SAAiC;AACnD,MAAI,SAAS,UACX,KAAI,SAAS,SAAS,CACpB,oBAAmB,SAAS;MAE5B,oBAAmB,SAAS,QAAQ;WAGlC,SAAS,SAAS,CACpB,oBAAmB,SAAS,SAAS;MAErC,WAAU,QAAQ;;AAKxB,iBAAgB,WAAW,UAAU,CAAC;AAEtC,aACQ,QAAQ,QACb,QAAQ;AACP,aAAW,MAAM,YAAY,WAAW;GAE3C;AAED,QAAO"}
+7
View File
@@ -0,0 +1,7 @@
//#region ../../packages/hooks/use-timeout/index.d.ts
declare function useTimeout(): {
registerTimeout: (fn: (...args: any[]) => any, delay: number) => void;
cancelTimeout: () => void;
};
//#endregion
export { useTimeout };
+24
View File
@@ -0,0 +1,24 @@
import { tryOnScopeDispose } from "@vueuse/core";
//#region ../../packages/hooks/use-timeout/index.ts
function useTimeout() {
let timeoutHandle;
const registerTimeout = (fn, delay) => {
cancelTimeout();
timeoutHandle = globalThis.setTimeout(fn, delay);
};
const cancelTimeout = () => {
if (timeoutHandle === void 0) return;
globalThis.clearTimeout(timeoutHandle);
timeoutHandle = void 0;
};
tryOnScopeDispose(() => cancelTimeout());
return {
registerTimeout,
cancelTimeout
};
}
//#endregion
export { useTimeout };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-timeout/index.ts"],"sourcesContent":["import { tryOnScopeDispose } from '@vueuse/core'\n\nexport function useTimeout() {\n let timeoutHandle: number | undefined\n\n const registerTimeout = (fn: (...args: any[]) => any, delay: number) => {\n cancelTimeout()\n timeoutHandle = globalThis.setTimeout(fn, delay)\n }\n const cancelTimeout = () => {\n if (timeoutHandle === undefined) return\n\n globalThis.clearTimeout(timeoutHandle)\n timeoutHandle = undefined\n }\n\n tryOnScopeDispose(() => cancelTimeout())\n\n return {\n registerTimeout,\n cancelTimeout,\n }\n}\n"],"mappings":";;;AAEA,SAAgB,aAAa;CAC3B,IAAI;CAEJ,MAAM,mBAAmB,IAA6B,UAAkB;AACtE,iBAAe;AACf,kBAAgB,WAAW,WAAW,IAAI,MAAM;;CAElD,MAAM,sBAAsB;AAC1B,MAAI,kBAAkB,OAAW;AAEjC,aAAW,aAAa,cAAc;AACtC,kBAAgB;;AAGlB,yBAAwB,eAAe,CAAC;AAExC,QAAO;EACL;EACA;EACD"}
@@ -0,0 +1,40 @@
//#region ../../packages/hooks/use-transition-fallthrough/index.d.ts
declare const useTransitionFallthroughEmits: readonly ["after-appear", "after-enter", "after-leave", "appear", "appear-cancelled", "before-enter", "before-leave", "enter", "enter-cancelled", "leave", "leave-cancelled"];
/**
* NOTE:
* This is only a delegator for delegating transition callbacks.
* Use this at your need.
*/
/**
* Simple usage
*
* In your setups:
*
* setup() {
* const fallthroughMethods = useTransitionFallthrough()
* return fallthrough
* }
*
* In your template:
*
* <template>
* <transition name="whatever" v-bind="fallthrough">
* <slot />
* </transition>
* </template>
*
*/
declare const useTransitionFallthrough: () => {
onAfterAppear: () => void;
onAfterEnter: () => void;
onAfterLeave: () => void;
onAppearCancelled: () => void;
onBeforeEnter: () => void;
onBeforeLeave: () => void;
onEnter: () => void;
onEnterCancelled: () => void;
onLeave: () => void;
onLeaveCancelled: () => void;
};
//#endregion
export { useTransitionFallthrough, useTransitionFallthroughEmits };
@@ -0,0 +1,91 @@
import { getCurrentInstance } from "vue";
//#region ../../packages/hooks/use-transition-fallthrough/index.ts
/* istanbul ignore file */
const AFTER_APPEAR = "after-appear";
const AFTER_ENTER = "after-enter";
const AFTER_LEAVE = "after-leave";
const APPEAR = "appear";
const APPEAR_CANCELLED = "appear-cancelled";
const BEFORE_ENTER = "before-enter";
const BEFORE_LEAVE = "before-leave";
const ENTER = "enter";
const ENTER_CANCELLED = "enter-cancelled";
const LEAVE = "leave";
const LEAVE_CANCELLED = "leave-cancelled";
const useTransitionFallthroughEmits = [
AFTER_APPEAR,
AFTER_ENTER,
AFTER_LEAVE,
APPEAR,
APPEAR_CANCELLED,
BEFORE_ENTER,
BEFORE_LEAVE,
ENTER,
ENTER_CANCELLED,
LEAVE,
LEAVE_CANCELLED
];
/**
* NOTE:
* This is only a delegator for delegating transition callbacks.
* Use this at your need.
*/
/**
* Simple usage
*
* In your setups:
*
* setup() {
* const fallthroughMethods = useTransitionFallthrough()
* return fallthrough
* }
*
* In your template:
*
* <template>
* <transition name="whatever" v-bind="fallthrough">
* <slot />
* </transition>
* </template>
*
*/
const useTransitionFallthrough = () => {
const { emit } = getCurrentInstance();
return {
onAfterAppear: () => {
emit(AFTER_APPEAR);
},
onAfterEnter: () => {
emit(AFTER_ENTER);
},
onAfterLeave: () => {
emit(AFTER_LEAVE);
},
onAppearCancelled: () => {
emit(APPEAR_CANCELLED);
},
onBeforeEnter: () => {
emit(BEFORE_ENTER);
},
onBeforeLeave: () => {
emit(BEFORE_LEAVE);
},
onEnter: () => {
emit(ENTER);
},
onEnterCancelled: () => {
emit(ENTER_CANCELLED);
},
onLeave: () => {
emit(LEAVE);
},
onLeaveCancelled: () => {
emit(LEAVE_CANCELLED);
}
};
};
//#endregion
export { useTransitionFallthrough, useTransitionFallthroughEmits };
//# sourceMappingURL=index.mjs.map
@@ -0,0 +1 @@
{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../packages/hooks/use-transition-fallthrough/index.ts"],"sourcesContent":["/* istanbul ignore file */\nimport { getCurrentInstance } from 'vue'\n\nconst AFTER_APPEAR = 'after-appear'\nconst AFTER_ENTER = 'after-enter'\nconst AFTER_LEAVE = 'after-leave'\nconst APPEAR = 'appear'\nconst APPEAR_CANCELLED = 'appear-cancelled'\nconst BEFORE_ENTER = 'before-enter'\nconst BEFORE_LEAVE = 'before-leave'\nconst ENTER = 'enter'\nconst ENTER_CANCELLED = 'enter-cancelled'\nconst LEAVE = 'leave'\nconst LEAVE_CANCELLED = 'leave-cancelled'\n\nexport const useTransitionFallthroughEmits = [\n AFTER_APPEAR,\n AFTER_ENTER,\n AFTER_LEAVE,\n APPEAR,\n APPEAR_CANCELLED,\n BEFORE_ENTER,\n BEFORE_LEAVE,\n ENTER,\n ENTER_CANCELLED,\n LEAVE,\n LEAVE_CANCELLED,\n] as const\n\n// Sometimes we want to delegate the transition emitted event\n// we have to right the function locally, which is not a good\n// approach to this, so we created this hook for the event\n// fallthrough\n\n/**\n * NOTE:\n * This is only a delegator for delegating transition callbacks.\n * Use this at your need.\n */\n\n/**\n * Simple usage\n *\n * In your setups:\n *\n * setup() {\n * const fallthroughMethods = useTransitionFallthrough()\n * return fallthrough\n * }\n *\n * In your template:\n *\n * <template>\n * <transition name=\"whatever\" v-bind=\"fallthrough\">\n * <slot />\n * </transition>\n * </template>\n *\n */\n\nexport const useTransitionFallthrough = () => {\n const { emit } = getCurrentInstance()!\n\n return {\n onAfterAppear: () => {\n emit(AFTER_APPEAR)\n },\n onAfterEnter: () => {\n emit(AFTER_ENTER)\n },\n onAfterLeave: () => {\n emit(AFTER_LEAVE)\n },\n onAppearCancelled: () => {\n emit(APPEAR_CANCELLED)\n },\n onBeforeEnter: () => {\n emit(BEFORE_ENTER)\n },\n onBeforeLeave: () => {\n emit(BEFORE_LEAVE)\n },\n onEnter: () => {\n emit(ENTER)\n },\n onEnterCancelled: () => {\n emit(ENTER_CANCELLED)\n },\n onLeave: () => {\n emit(LEAVE)\n },\n onLeaveCancelled: () => {\n emit(LEAVE_CANCELLED)\n },\n }\n}\n"],"mappings":";;;;AAGA,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,SAAS;AACf,MAAM,mBAAmB;AACzB,MAAM,eAAe;AACrB,MAAM,eAAe;AACrB,MAAM,QAAQ;AACd,MAAM,kBAAkB;AACxB,MAAM,QAAQ;AACd,MAAM,kBAAkB;AAExB,MAAa,gCAAgC;CAC3C;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;;;;;;;;;;;;;;;;AAiCD,MAAa,iCAAiC;CAC5C,MAAM,EAAE,SAAS,oBAAoB;AAErC,QAAO;EACL,qBAAqB;AACnB,QAAK,aAAa;;EAEpB,oBAAoB;AAClB,QAAK,YAAY;;EAEnB,oBAAoB;AAClB,QAAK,YAAY;;EAEnB,yBAAyB;AACvB,QAAK,iBAAiB;;EAExB,qBAAqB;AACnB,QAAK,aAAa;;EAEpB,qBAAqB;AACnB,QAAK,aAAa;;EAEpB,eAAe;AACb,QAAK,MAAM;;EAEb,wBAAwB;AACtB,QAAK,gBAAgB;;EAEvB,eAAe;AACb,QAAK,MAAM;;EAEb,wBAAwB;AACtB,QAAK,gBAAgB;;EAExB"}
+18
View File
@@ -0,0 +1,18 @@
import * as vue from "vue";
import { InjectionKey, Ref } from "vue";
//#region ../../packages/hooks/use-z-index/index.d.ts
interface ElZIndexInjectionContext {
current: number;
}
declare const defaultInitialZIndex = 2000;
declare const ZINDEX_INJECTION_KEY: InjectionKey<ElZIndexInjectionContext>;
declare const zIndexContextKey: InjectionKey<Ref<number | undefined>>;
declare const useZIndex: (zIndexOverrides?: Ref<number>) => {
initialZIndex: vue.ComputedRef<number>;
currentZIndex: vue.ComputedRef<number>;
nextZIndex: () => number;
};
type UseZIndexReturn = ReturnType<typeof useZIndex>;
//#endregion
export { ElZIndexInjectionContext, UseZIndexReturn, ZINDEX_INJECTION_KEY, defaultInitialZIndex, useZIndex, zIndexContextKey };
+36
View File
@@ -0,0 +1,36 @@
import { isClient } from "../../utils/browser.mjs";
import { isNumber } from "../../utils/types.mjs";
import { debugWarn } from "../../utils/error.mjs";
import { computed, getCurrentInstance, inject, ref, unref } from "vue";
//#region ../../packages/hooks/use-z-index/index.ts
const initial = { current: 0 };
const zIndex = ref(0);
const defaultInitialZIndex = 2e3;
const ZINDEX_INJECTION_KEY = Symbol("elZIndexContextKey");
const zIndexContextKey = Symbol("zIndexContextKey");
const useZIndex = (zIndexOverrides) => {
const increasingInjection = getCurrentInstance() ? inject(ZINDEX_INJECTION_KEY, initial) : initial;
const zIndexInjection = zIndexOverrides || (getCurrentInstance() ? inject(zIndexContextKey, void 0) : void 0);
const initialZIndex = computed(() => {
const zIndexFromInjection = unref(zIndexInjection);
return isNumber(zIndexFromInjection) ? zIndexFromInjection : defaultInitialZIndex;
});
const currentZIndex = computed(() => initialZIndex.value + zIndex.value);
const nextZIndex = () => {
increasingInjection.current++;
zIndex.value = increasingInjection.current;
return currentZIndex.value;
};
if (!isClient && !inject(ZINDEX_INJECTION_KEY)) debugWarn("ZIndexInjection", `Looks like you are using server rendering, you must provide a z-index provider to ensure the hydration process to be succeed
usage: app.provide(ZINDEX_INJECTION_KEY, { current: 0 })`);
return {
initialZIndex,
currentZIndex,
nextZIndex
};
};
//#endregion
export { ZINDEX_INJECTION_KEY, defaultInitialZIndex, useZIndex, zIndexContextKey };
//# sourceMappingURL=index.mjs.map

Some files were not shown because too many files have changed in this diff Show More