npm - element-plus - Versions diffs - 2.13.6 → 2.13.7 - Mend

element-plus 2.13.6 → 2.13.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (870) hide show

package/es/components/autocomplete/src/autocomplete.vue.d.ts CHANGED Viewed

@@ -1,91 +1,66 @@
-import { IconPropType } from "../../../utils/vue/icon.js";
-import "../../../utils/index.js";
-import { InputModelModifiers, InputType } from "../../input/src/input.js";
 import { InputInstance } from "../../input/src/instance.js";
 import "../../input/index.js";
 import { TooltipInstance } from "../../tooltip/src/tooltip.js";
 import "../../tooltip/index.js";
-import { AutocompleteData, AutocompleteFetchSuggestions, AutocompletePlacement, AutocompleteProps } from "./autocomplete.js";
+import { AutocompleteData, AutocompleteDataItem, AutocompleteProps } from "./autocomplete.js";
 import * as vue from "vue";
-import { StyleValue } from "vue";
+import { Ref } from "vue";
 //#region ../../packages/components/autocomplete/src/autocomplete.vue.d.ts
-declare var __VLS_29: {}, __VLS_32: {}, __VLS_35: {}, __VLS_38: {}, __VLS_41: {}, __VLS_49: {}, __VLS_62: {
-    item: Record<string, any>;
-  }, __VLS_64: {};
-type __VLS_Slots = {} & {
-  prepend?: (props: typeof __VLS_29) => any;
-} & {
-  append?: (props: typeof __VLS_32) => any;
-} & {
-  prefix?: (props: typeof __VLS_35) => any;
-} & {
-  suffix?: (props: typeof __VLS_38) => any;
-} & {
-  header?: (props: typeof __VLS_41) => any;
-} & {
-  loading?: (props: typeof __VLS_49) => any;
-} & {
-  default?: (props: typeof __VLS_62) => any;
-} & {
-  footer?: (props: typeof __VLS_64) => any;
-};
-declare const __VLS_base: vue.DefineComponent<AutocompleteProps, {
-  /** @description the index of the currently highlighted item */highlightedIndex: vue.Ref<number, number>; /** @description autocomplete whether activated */
-  activated: vue.Ref<boolean, boolean>; /** @description remote search loading status */
-  loading: vue.Ref<boolean, boolean>; /** @description el-input component instance */
-  inputRef: vue.Ref<InputInstance | undefined, InputInstance | undefined>; /** @description el-tooltip component instance */
-  popperRef: vue.Ref<TooltipInstance | undefined, TooltipInstance | undefined>; /** @description fetch suggestions result */
-  suggestions: vue.Ref<Record<string, any>[], Record<string, any>[] | AutocompleteData>; /** @description triggers when a suggestion is clicked */
-  handleSelect: (item: any) => Promise<void>; /** @description handle keyboard enter event */
-  handleKeyEnter: () => Promise<void>; /** @description focus the input element */
-  focus: () => void; /** @description blur the input element */
-  blur: () => void; /** @description close suggestion */
-  close: () => void; /** @description highlight an item in a suggestion */
-  highlight: (index: number) => void; /** @description loading suggestion list */
-  getData: (queryString: string) => Promise<void>;
-}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
-  blur: (evt: FocusEvent) => void;
-  focus: (evt: FocusEvent) => void;
-  select: (item: Record<string, any>) => void;
-  clear: () => void;
-  "update:modelValue": (value: string | number) => void;
-  change: (value: string | number) => void;
-  input: (value: string | number) => void;
-}, string, vue.PublicProps, Readonly<AutocompleteProps> & Readonly<{
-  onBlur?: ((evt: FocusEvent) => any) | undefined;
-  onChange?: ((value: string | number) => any) | undefined;
-  onFocus?: ((evt: FocusEvent) => any) | undefined;
-  onInput?: ((value: string | number) => any) | undefined;
-  onSelect?: ((item: Record<string, any>) => any) | undefined;
-  onClear?: (() => any) | undefined;
-  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
-}>, {
-  type: InputType;
-  disabled: boolean;
-  clearIcon: IconPropType;
-  debounce: number;
-  placement: AutocompletePlacement;
-  teleported: boolean;
-  validateEvent: boolean;
-  modelValue: string | number;
-  modelModifiers: InputModelModifiers;
-  autocomplete: string;
-  wordLimitPosition: "inside" | "outside";
-  tabindex: string | number;
-  inputStyle: string | false | vue.CSSProperties | StyleValue[] | null;
-  rows: number;
-  valueKey: string;
-  fetchSuggestions: AutocompleteFetchSuggestions;
-  triggerOnFocus: boolean;
-  loopNavigation: boolean;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
-declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
+declare const __VLS_export: <T extends AutocompleteDataItem = AutocompleteDataItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: vue.PublicProps & __VLS_PrettifyLocal<AutocompleteProps<T> & {
+    onBlur?: ((evt: FocusEvent) => any) | undefined;
+    onChange?: ((value: string | number) => any) | undefined;
+    onFocus?: ((evt: FocusEvent) => any) | undefined;
+    onInput?: ((value: string | number) => any) | undefined;
+    onSelect?: ((item: Record<string, any>) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    onClear?: (() => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: vue.ShallowUnwrapRef<{
+    /** @description the index of the currently highlighted item */highlightedIndex: Ref<number, number>; /** @description autocomplete whether activated */
+    activated: Ref<boolean, boolean>; /** @description remote search loading status */
+    loading: Ref<boolean, boolean>; /** @description el-input component instance */
+    inputRef: Ref<InputInstance | undefined, InputInstance | undefined>; /** @description el-tooltip component instance */
+    popperRef: Ref<TooltipInstance | undefined, TooltipInstance | undefined>; /** @description fetch suggestions result */
+    suggestions: Ref<AutocompleteData<T>, AutocompleteData<T>>; /** @description triggers when a suggestion is clicked */
+    handleSelect: (item: T) => Promise<void>; /** @description handle keyboard enter event */
+    handleKeyEnter: () => Promise<void>; /** @description focus the input element */
+    focus: () => void; /** @description blur the input element */
+    blur: () => void; /** @description close suggestion */
+    close: () => void; /** @description highlight an item in a suggestion */
+    highlight: (index: number) => void; /** @description loading suggestion list */
+    getData: (queryString: string) => Promise<void>;
+  }>) => void;
+  attrs: any;
+  slots: {
+    prepend?: (props: {}) => any;
+  } & {
+    append?: (props: {}) => any;
+  } & {
+    prefix?: (props: {}) => any;
+  } & {
+    suffix?: (props: {}) => any;
+  } & {
+    header?: (props: {}) => any;
+  } & {
+    loading?: (props: {}) => any;
+  } & {
+    default?: (props: {
+      item: T;
+    }) => any;
+  } & {
+    footer?: (props: {}) => any;
   };
+  emit: ((event: "blur", evt: FocusEvent) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "select", item: Record<string, any>) => void) & ((event: "change", value: string | number) => void) & ((event: "update:modelValue", value: string | number) => void) & ((event: "input", value: string | number) => void) & ((event: "clear") => void);
+}>) => vue.VNode<vue.RendererNode, vue.RendererElement, {
+  [key: string]: any;
+}> & {
+  __ctx?: Awaited<typeof __VLS_setup>;
 };
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
 //#endregion
 export { _default };

package/es/components/autocomplete/src/autocomplete.vue_vue_type_script_setup_true_lang.mjs CHANGED Viewed

@@ -8,7 +8,6 @@ import { useId } from "../../../hooks/use-id/index.mjs";
 import { ElIcon } from "../../icon/index.mjs";
 import { useFormDisabled } from "../../form/src/hooks/use-form-common-props.mjs";
 import { ElTooltip } from "../../tooltip/index.mjs";
-import { inputProps } from "../../input/src/input.mjs";
 import { ElInput } from "../../input/index.mjs";
 import { autocompleteEmits, autocompleteProps } from "./autocomplete.mjs";
 import { ElScrollbar } from "../../scrollbar/index.mjs";
@@ -35,7 +34,10 @@ var autocomplete_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const passInputProps = computed(() => pick(props, Object.keys(inputProps)));
+		const passInputProps = computed(() => {
+			const inputProps = ElInput.props ?? [];
+			return pick(props, isArray(inputProps) ? inputProps : Object.keys(inputProps));
+		});
 		const rawAttrs = useAttrs();
 		const disabled = useFormDisabled();
 		const ns = useNamespace("autocomplete");

package/es/components/autocomplete/src/autocomplete.vue_vue_type_script_setup_true_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"autocomplete.vue_vue_type_script_setup_true_lang.mjs","names":["$slots","$attrs"],"sources":["../../../../../../packages/components/autocomplete/src/autocomplete.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popperRef\"\n :visible=\"suggestionVisible\"\n :placement=\"placement\"\n :fallback-placements=\"['bottom-start', 'top-start']\"\n :popper-class=\"[ns.e('popper'), popperClass!]\"\n :popper-style=\"popperStyle\"\n :teleported=\"teleported\"\n :append-to=\"appendTo\"\n :gpu-acceleration=\"false\"\n pure\n manual-mode\n effect=\"light\"\n trigger=\"click\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n persistent\n role=\"listbox\"\n @before-show=\"onSuggestionShow\"\n @hide=\"onHide\"\n >\n <div\n ref=\"listboxRef\"\n :class=\"[ns.b(), $attrs.class]\"\n :style=\"styles\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n :aria-expanded=\"suggestionVisible\"\n :aria-owns=\"listboxId\"\n >\n <el-input\n ref=\"inputRef\"\n v-bind=\"mergeProps(passInputProps, $attrs)\"\n :model-value=\"modelValue\"\n :disabled=\"disabled\"\n @input=\"handleInput\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @clear=\"handleClear\"\n @keydown=\"handleKeydown\"\n @mousedown=\"handleMouseDown\"\n >\n <template v-if=\"$slots.prepend\" #prepend>\n <slot name=\"prepend\" />\n </template>\n <template v-if=\"$slots.append\" #append>\n <slot name=\"append\" />\n </template>\n <template v-if=\"$slots.prefix\" #prefix>\n <slot name=\"prefix\" />\n </template>\n <template v-if=\"$slots.suffix\" #suffix>\n <slot name=\"suffix\" />\n </template>\n </el-input>\n </div>\n <template #content>\n <div\n ref=\"regionRef\"\n :class=\"[ns.b('suggestion'), ns.is('loading', suggestionLoading)]\"\n :style=\"{\n [fitInputWidth ? 'width' : 'minWidth']: dropdownWidth,\n outline: 'none',\n }\"\n role=\"region\"\n >\n <div\n v-if=\"$slots.header\"\n :class=\"ns.be('suggestion', 'header')\"\n @click.stop\n >\n <slot name=\"header\" />\n </div>\n <el-scrollbar\n :id=\"listboxId\"\n tag=\"ul\"\n :wrap-class=\"ns.be('suggestion', 'wrap')\"\n :view-class=\"ns.be('suggestion', 'list')\"\n role=\"listbox\"\n >\n <li v-if=\"suggestionLoading\">\n <slot name=\"loading\">\n <el-icon :class=\"ns.is('loading')\">\n <Loading />\n </el-icon>\n </slot>\n </li>\n <template v-else>\n <li\n v-for=\"(item, index) in suggestions\"\n :id=\"`${listboxId}-item-${index}`\"\n :key=\"index\"\n :class=\"{ highlighted: highlightedIndex === index }\"\n role=\"option\"\n :aria-selected=\"highlightedIndex === index\"\n @click=\"handleSelect(item)\"\n >\n <slot :item=\"item\">{{ item[valueKey] }}</slot>\n </li>\n </template>\n </el-scrollbar>\n <div\n v-if=\"$slots.footer\"\n :class=\"ns.be('suggestion', 'footer')\"\n @click.stop\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n mergeProps,\n onBeforeUnmount,\n onMounted,\n ref,\n useAttrs as useRawAttrs,\n} from 'vue'\nimport { pick } from 'lodash-unified'\nimport { onClickOutside, useDebounceFn } from '@vueuse/core'\nimport { Loading } from '@element-plus/icons-vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { NOOP, getEventCode, isArray, throwError } from '@element-plus/utils'\nimport {\n CHANGE_EVENT,\n EVENT_CODE,\n INPUT_EVENT,\n UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport ElInput, {\n inputProps,\n inputPropsDefaults,\n} from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { autocompleteEmits } from './autocomplete'\n\nimport type { AutocompleteData, AutocompleteProps } from './autocomplete'\nimport type { StyleValue } from 'vue'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { InputInstance } from '@element-plus/components/input'\n\nconst COMPONENT_NAME = 'ElAutocomplete'\ndefineOptions({\n name: COMPONENT_NAME,\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AutocompleteProps>(), {\n ...inputPropsDefaults,\n valueKey: 'value',\n modelValue: '',\n debounce: 300,\n placement: 'bottom-start',\n fetchSuggestions: NOOP,\n triggerOnFocus: true,\n loopNavigation: true,\n teleported: true,\n})\nconst emit = defineEmits(autocompleteEmits)\n\nconst passInputProps = computed(() => pick(props, Object.keys(inputProps)))\n\nconst rawAttrs = useRawAttrs()\nconst disabled = useFormDisabled()\nconst ns = useNamespace('autocomplete')\n\nconst inputRef = ref<InputInstance>()\nconst regionRef = ref<HTMLElement>()\nconst popperRef = ref<TooltipInstance>()\nconst listboxRef = ref<HTMLElement>()\n\nlet readonly = false\nlet ignoreFocusEvent = false\nconst suggestions = ref<AutocompleteData>([])\nconst highlightedIndex = ref(-1)\nconst dropdownWidth = ref('')\nconst activated = ref(false)\nconst suggestionDisabled = ref(false)\nconst loading = ref(false)\n\nconst listboxId = useId()\nconst styles = computed(() => rawAttrs.style as StyleValue)\n\nconst suggestionVisible = computed(() => {\n const isValidData = suggestions.value.length > 0\n return (isValidData \|\| loading.value) && activated.value\n})\n\nconst suggestionLoading = computed(() => !props.hideLoading && loading.value)\n\nconst refInput = computed<HTMLInputElement[]>(() => {\n if (inputRef.value) {\n return Array.from<HTMLInputElement>(\n inputRef.value.$el.querySelectorAll('input')\n )\n }\n return []\n})\n\nconst onSuggestionShow = () => {\n if (suggestionVisible.value) {\n dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n }\n}\n\nconst onHide = () => {\n highlightedIndex.value = -1\n}\n\nconst getData = async (queryString: string) => {\n if (suggestionDisabled.value) return\n\n const cb = (suggestionList: AutocompleteData) => {\n loading.value = false\n if (suggestionDisabled.value) return\n\n if (isArray(suggestionList)) {\n suggestions.value = suggestionList\n highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n } else {\n throwError(COMPONENT_NAME, 'autocomplete suggestions must be an array')\n }\n }\n\n loading.value = true\n if (isArray(props.fetchSuggestions)) {\n cb(props.fetchSuggestions)\n } else {\n const result = await props.fetchSuggestions(queryString, cb)\n if (isArray(result)) cb(result)\n }\n}\n\nconst debounce = computed(() => props.debounce)\nconst debouncedGetData = useDebounceFn(getData, debounce)\n\nconst handleInput = (value: string) => {\n const valuePresented = !!value\n\n emit(INPUT_EVENT, value)\n emit(UPDATE_MODEL_EVENT, value)\n\n suggestionDisabled.value = false\n activated.value \|\|= valuePresented\n\n if (!props.triggerOnFocus && !value) {\n suggestionDisabled.value = true\n suggestions.value = []\n return\n }\n\n debouncedGetData(value)\n}\n\nconst handleMouseDown = (event: MouseEvent) => {\n if (disabled.value) return\n if (\n (event.target as HTMLElement)?.tagName !== 'INPUT' \|\|\n refInput.value.includes(document.activeElement as HTMLInputElement)\n ) {\n activated.value = true\n }\n}\n\nconst handleChange = (value: string \| number) => {\n emit(CHANGE_EVENT, value)\n}\n\nconst handleFocus = (evt: FocusEvent) => {\n if (!ignoreFocusEvent) {\n activated.value = true\n emit('focus', evt)\n const queryString = props.modelValue ?? ''\n if (props.triggerOnFocus && !readonly) {\n debouncedGetData(String(queryString))\n }\n } else {\n ignoreFocusEvent = false\n }\n}\n\nconst handleBlur = (evt: FocusEvent) => {\n setTimeout(() => {\n // validate current focus event is inside el-tooltip-content\n // if so, ignore the blur event and the next focus event\n if (popperRef.value?.isFocusInsideContent()) {\n ignoreFocusEvent = true\n return\n }\n activated.value && close()\n emit('blur', evt)\n })\n}\n\nconst handleClear = () => {\n activated.value = false\n emit(UPDATE_MODEL_EVENT, '')\n emit('clear')\n}\n\nconst handleKeyEnter = async () => {\n if (inputRef.value?.isComposing) {\n return\n }\n\n if (\n suggestionVisible.value &&\n highlightedIndex.value >= 0 &&\n highlightedIndex.value < suggestions.value.length\n ) {\n handleSelect(suggestions.value[highlightedIndex.value])\n } else {\n if (props.selectWhenUnmatched) {\n emit('select', { value: props.modelValue })\n suggestions.value = []\n highlightedIndex.value = -1\n }\n activated.value = true\n debouncedGetData(String(props.modelValue))\n }\n}\n\nconst handleKeyEscape = (evt: Event) => {\n if (suggestionVisible.value) {\n evt.preventDefault()\n evt.stopPropagation()\n close()\n }\n}\n\nconst close = () => {\n activated.value = false\n}\n\nconst focus = () => {\n inputRef.value?.focus()\n}\n\nconst blur = () => {\n inputRef.value?.blur()\n}\n\nconst handleSelect = async (item: any) => {\n emit(INPUT_EVENT, item[props.valueKey])\n emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n emit('select', item)\n suggestions.value = []\n highlightedIndex.value = -1\n}\n\nconst highlight = (index: number) => {\n if (!suggestionVisible.value \|\| loading.value) return\n\n if (index < 0) {\n if (!props.loopNavigation) {\n highlightedIndex.value = -1\n return\n }\n index = suggestions.value.length - 1\n }\n\n if (index >= suggestions.value.length) {\n index = props.loopNavigation ? 0 : suggestions.value.length - 1\n }\n const [suggestion, suggestionList] = getSuggestionContext()\n const highlightItem = suggestionList[index]\n const scrollTop = suggestion.scrollTop\n const { offsetTop, scrollHeight } = highlightItem\n\n if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n suggestion.scrollTop = offsetTop + scrollHeight - suggestion.clientHeight\n }\n if (offsetTop < scrollTop) {\n suggestion.scrollTop = offsetTop\n }\n highlightedIndex.value = index\n inputRef.value?.ref?.setAttribute(\n 'aria-activedescendant',\n `${listboxId.value}-item-${highlightedIndex.value}`\n )\n}\nconst getSuggestionContext = () => {\n const suggestion = regionRef.value!.querySelector(\n `.${ns.be('suggestion', 'wrap')}`\n )!\n const suggestionList = suggestion.querySelectorAll<HTMLElement>(\n `.${ns.be('suggestion', 'list')} li`\n )\n return [suggestion, suggestionList] as const\n}\n\nconst stopHandle = onClickOutside(listboxRef, (event: FocusEvent) => {\n // Prevent closing if focus is inside popper content\n if (popperRef.value?.isFocusInsideContent()) return\n const hadIgnoredFocus = ignoreFocusEvent\n ignoreFocusEvent = false\n if (!suggestionVisible.value) return\n if (hadIgnoredFocus) {\n handleBlur(new FocusEvent('blur', event))\n } else {\n close()\n }\n})\n\nconst handleKeydown = (e: KeyboardEvent \| Event) => {\n const code = getEventCode(e as KeyboardEvent)\n switch (code) {\n case EVENT_CODE.up:\n e.preventDefault()\n highlight(highlightedIndex.value - 1)\n break\n case EVENT_CODE.down:\n e.preventDefault()\n highlight(highlightedIndex.value + 1)\n break\n case EVENT_CODE.enter:\n case EVENT_CODE.numpadEnter:\n e.preventDefault()\n handleKeyEnter()\n break\n case EVENT_CODE.tab:\n close()\n break\n case EVENT_CODE.esc:\n handleKeyEscape(e)\n break\n case EVENT_CODE.home:\n e.preventDefault()\n highlight(0)\n break\n case EVENT_CODE.end:\n e.preventDefault()\n highlight(suggestions.value.length - 1)\n break\n case EVENT_CODE.pageUp:\n e.preventDefault()\n highlight(Math.max(0, highlightedIndex.value - 10))\n break\n case EVENT_CODE.pageDown:\n e.preventDefault()\n highlight(\n Math.min(suggestions.value.length - 1, highlightedIndex.value + 10)\n )\n break\n }\n}\n\nonBeforeUnmount(() => {\n stopHandle?.()\n})\n\nonMounted(() => {\n const inputElement = inputRef.value?.ref\n if (!inputElement) return\n ;[\n { key: 'role', value: 'textbox' },\n { key: 'aria-autocomplete', value: 'list' },\n { key: 'aria-controls', value: listboxId.value },\n {\n key: 'aria-activedescendant',\n value: `${listboxId.value}-item-${highlightedIndex.value}`,\n },\n ].forEach(({ key, value }) => inputElement.setAttribute(key, value))\n // get readonly attr\n readonly = inputElement.hasAttribute('readonly')\n})\n\ndefineExpose({\n /** @description the index of the currently highlighted item /\n highlightedIndex,\n /* @description autocomplete whether activated /\n activated,\n /* @description remote search loading status /\n loading,\n /* @description el-input component instance /\n inputRef,\n /* @description el-tooltip component instance /\n popperRef,\n /* @description fetch suggestions result /\n suggestions,\n /* @description triggers when a suggestion is clicked /\n handleSelect,\n /* @description handle keyboard enter event /\n handleKeyEnter,\n /* @description focus the input element /\n focus,\n /* @description blur the input element /\n blur,\n /* @description close suggestion /\n close,\n /* @description highlight an item in a suggestion /\n highlight,\n /* @description loading suggestion list */\n getData,\n})\n</script>\n"],"mappings":"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"}
1	+ {"version":3,"file":"autocomplete.vue_vue_type_script_setup_true_lang.mjs","names":["$slots","$attrs"],"sources":["../../../../../../packages/components/autocomplete/src/autocomplete.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popperRef\"\n :visible=\"suggestionVisible\"\n :placement=\"placement\"\n :fallback-placements=\"['bottom-start', 'top-start']\"\n :popper-class=\"[ns.e('popper'), popperClass!]\"\n :popper-style=\"popperStyle\"\n :teleported=\"teleported\"\n :append-to=\"appendTo\"\n :gpu-acceleration=\"false\"\n pure\n manual-mode\n effect=\"light\"\n trigger=\"click\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n persistent\n role=\"listbox\"\n @before-show=\"onSuggestionShow\"\n @hide=\"onHide\"\n >\n <div\n ref=\"listboxRef\"\n :class=\"[ns.b(), $attrs.class]\"\n :style=\"styles\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n :aria-expanded=\"suggestionVisible\"\n :aria-owns=\"listboxId\"\n >\n <el-input\n ref=\"inputRef\"\n v-bind=\"mergeProps(passInputProps, $attrs)\"\n :model-value=\"modelValue\"\n :disabled=\"disabled\"\n @input=\"handleInput\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @clear=\"handleClear\"\n @keydown=\"handleKeydown\"\n @mousedown=\"handleMouseDown\"\n >\n <template v-if=\"$slots.prepend\" #prepend>\n <slot name=\"prepend\" />\n </template>\n <template v-if=\"$slots.append\" #append>\n <slot name=\"append\" />\n </template>\n <template v-if=\"$slots.prefix\" #prefix>\n <slot name=\"prefix\" />\n </template>\n <template v-if=\"$slots.suffix\" #suffix>\n <slot name=\"suffix\" />\n </template>\n </el-input>\n </div>\n <template #content>\n <div\n ref=\"regionRef\"\n :class=\"[ns.b('suggestion'), ns.is('loading', suggestionLoading)]\"\n :style=\"{\n [fitInputWidth ? 'width' : 'minWidth']: dropdownWidth,\n outline: 'none',\n }\"\n role=\"region\"\n >\n <div\n v-if=\"$slots.header\"\n :class=\"ns.be('suggestion', 'header')\"\n @click.stop\n >\n <slot name=\"header\" />\n </div>\n <el-scrollbar\n :id=\"listboxId\"\n tag=\"ul\"\n :wrap-class=\"ns.be('suggestion', 'wrap')\"\n :view-class=\"ns.be('suggestion', 'list')\"\n role=\"listbox\"\n >\n <li v-if=\"suggestionLoading\">\n <slot name=\"loading\">\n <el-icon :class=\"ns.is('loading')\">\n <Loading />\n </el-icon>\n </slot>\n </li>\n <template v-else>\n <li\n v-for=\"(item, index) in suggestions\"\n :id=\"`${listboxId}-item-${index}`\"\n :key=\"index\"\n :class=\"{ highlighted: highlightedIndex === index }\"\n role=\"option\"\n :aria-selected=\"highlightedIndex === index\"\n @click=\"handleSelect(item)\"\n >\n <slot :item=\"item\">{{ item[valueKey] }}</slot>\n </li>\n </template>\n </el-scrollbar>\n <div\n v-if=\"$slots.footer\"\n :class=\"ns.be('suggestion', 'footer')\"\n @click.stop\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script\n lang=\"ts\"\n setup\n generic=\"T extends AutocompleteDataItem = AutocompleteDataItem\"\n>\nimport {\n computed,\n mergeProps,\n onBeforeUnmount,\n onMounted,\n ref,\n useAttrs as useRawAttrs,\n} from 'vue'\nimport { pick } from 'lodash-unified'\nimport { onClickOutside, useDebounceFn } from '@vueuse/core'\nimport { Loading } from '@element-plus/icons-vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { NOOP, getEventCode, isArray, throwError } from '@element-plus/utils'\nimport {\n CHANGE_EVENT,\n EVENT_CODE,\n INPUT_EVENT,\n UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport ElInput, { inputPropsDefaults } from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { autocompleteEmits } from './autocomplete'\n\nimport type {\n AutocompleteData,\n AutocompleteDataItem,\n AutocompleteProps,\n} from './autocomplete'\nimport type { Ref, StyleValue } from 'vue'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { InputInstance } from '@element-plus/components/input'\n\nconst COMPONENT_NAME = 'ElAutocomplete'\ndefineOptions({\n name: COMPONENT_NAME,\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AutocompleteProps<T>>(), {\n ...inputPropsDefaults,\n valueKey: 'value',\n modelValue: '',\n debounce: 300,\n placement: 'bottom-start',\n fetchSuggestions: NOOP,\n triggerOnFocus: true,\n loopNavigation: true,\n teleported: true,\n})\nconst emit = defineEmits(autocompleteEmits)\nconst passInputProps = computed(() => {\n const inputProps = ElInput.props ?? []\n const keys = isArray(inputProps) ? inputProps : Object.keys(inputProps)\n return pick(props, keys)\n})\n\nconst rawAttrs = useRawAttrs()\nconst disabled = useFormDisabled()\nconst ns = useNamespace('autocomplete')\n\nconst inputRef = ref<InputInstance>()\nconst regionRef = ref<HTMLElement>()\nconst popperRef = ref<TooltipInstance>()\nconst listboxRef = ref<HTMLElement>()\n\nlet readonly = false\nlet ignoreFocusEvent = false\nconst suggestions = ref([]) as Ref<AutocompleteData<T>>\nconst highlightedIndex = ref(-1)\nconst dropdownWidth = ref('')\nconst activated = ref(false)\nconst suggestionDisabled = ref(false)\nconst loading = ref(false)\n\nconst listboxId = useId()\nconst styles = computed(() => rawAttrs.style as StyleValue)\n\nconst suggestionVisible = computed(() => {\n const isValidData = suggestions.value.length > 0\n return (isValidData \|\| loading.value) && activated.value\n})\n\nconst suggestionLoading = computed(() => !props.hideLoading && loading.value)\n\nconst refInput = computed<HTMLInputElement[]>(() => {\n if (inputRef.value) {\n return Array.from<HTMLInputElement>(\n inputRef.value.$el.querySelectorAll('input')\n )\n }\n return []\n})\n\nconst onSuggestionShow = () => {\n if (suggestionVisible.value) {\n dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n }\n}\n\nconst onHide = () => {\n highlightedIndex.value = -1\n}\n\nconst getData = async (queryString: string) => {\n if (suggestionDisabled.value) return\n\n const cb = (suggestionList: AutocompleteData<T>) => {\n loading.value = false\n if (suggestionDisabled.value) return\n\n if (isArray(suggestionList)) {\n suggestions.value = suggestionList\n highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n } else {\n throwError(COMPONENT_NAME, 'autocomplete suggestions must be an array')\n }\n }\n\n loading.value = true\n if (isArray(props.fetchSuggestions)) {\n cb(props.fetchSuggestions)\n } else {\n const result = await props.fetchSuggestions(queryString, cb)\n if (isArray(result)) cb(result)\n }\n}\n\nconst debounce = computed(() => props.debounce)\nconst debouncedGetData = useDebounceFn(getData, debounce)\n\nconst handleInput = (value: string) => {\n const valuePresented = !!value\n\n emit(INPUT_EVENT, value)\n emit(UPDATE_MODEL_EVENT, value)\n\n suggestionDisabled.value = false\n activated.value \|\|= valuePresented\n\n if (!props.triggerOnFocus && !value) {\n suggestionDisabled.value = true\n suggestions.value = []\n return\n }\n\n debouncedGetData(value)\n}\n\nconst handleMouseDown = (event: MouseEvent) => {\n if (disabled.value) return\n if (\n (event.target as HTMLElement)?.tagName !== 'INPUT' \|\|\n refInput.value.includes(document.activeElement as HTMLInputElement)\n ) {\n activated.value = true\n }\n}\n\nconst handleChange = (value: string \| number) => {\n emit(CHANGE_EVENT, value)\n}\n\nconst handleFocus = (evt: FocusEvent) => {\n if (!ignoreFocusEvent) {\n activated.value = true\n emit('focus', evt)\n const queryString = props.modelValue ?? ''\n if (props.triggerOnFocus && !readonly) {\n debouncedGetData(String(queryString))\n }\n } else {\n ignoreFocusEvent = false\n }\n}\n\nconst handleBlur = (evt: FocusEvent) => {\n setTimeout(() => {\n // validate current focus event is inside el-tooltip-content\n // if so, ignore the blur event and the next focus event\n if (popperRef.value?.isFocusInsideContent()) {\n ignoreFocusEvent = true\n return\n }\n activated.value && close()\n emit('blur', evt)\n })\n}\n\nconst handleClear = () => {\n activated.value = false\n emit(UPDATE_MODEL_EVENT, '')\n emit('clear')\n}\n\nconst handleKeyEnter = async () => {\n if (inputRef.value?.isComposing) {\n return\n }\n\n if (\n suggestionVisible.value &&\n highlightedIndex.value >= 0 &&\n highlightedIndex.value < suggestions.value.length\n ) {\n handleSelect(suggestions.value[highlightedIndex.value])\n } else {\n if (props.selectWhenUnmatched) {\n emit('select', { value: props.modelValue })\n suggestions.value = []\n highlightedIndex.value = -1\n }\n activated.value = true\n debouncedGetData(String(props.modelValue))\n }\n}\n\nconst handleKeyEscape = (evt: Event) => {\n if (suggestionVisible.value) {\n evt.preventDefault()\n evt.stopPropagation()\n close()\n }\n}\n\nconst close = () => {\n activated.value = false\n}\n\nconst focus = () => {\n inputRef.value?.focus()\n}\n\nconst blur = () => {\n inputRef.value?.blur()\n}\n\nconst handleSelect = async (item: T) => {\n emit(INPUT_EVENT, item[props.valueKey])\n emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n emit('select', item)\n suggestions.value = []\n highlightedIndex.value = -1\n}\n\nconst highlight = (index: number) => {\n if (!suggestionVisible.value \|\| loading.value) return\n\n if (index < 0) {\n if (!props.loopNavigation) {\n highlightedIndex.value = -1\n return\n }\n index = suggestions.value.length - 1\n }\n\n if (index >= suggestions.value.length) {\n index = props.loopNavigation ? 0 : suggestions.value.length - 1\n }\n const [suggestion, suggestionList] = getSuggestionContext()\n const highlightItem = suggestionList[index]\n const scrollTop = suggestion.scrollTop\n const { offsetTop, scrollHeight } = highlightItem\n\n if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n suggestion.scrollTop = offsetTop + scrollHeight - suggestion.clientHeight\n }\n if (offsetTop < scrollTop) {\n suggestion.scrollTop = offsetTop\n }\n highlightedIndex.value = index\n inputRef.value?.ref?.setAttribute(\n 'aria-activedescendant',\n `${listboxId.value}-item-${highlightedIndex.value}`\n )\n}\nconst getSuggestionContext = () => {\n const suggestion = regionRef.value!.querySelector(\n `.${ns.be('suggestion', 'wrap')}`\n )!\n const suggestionList = suggestion.querySelectorAll<HTMLElement>(\n `.${ns.be('suggestion', 'list')} li`\n )\n return [suggestion, suggestionList] as const\n}\n\nconst stopHandle = onClickOutside(listboxRef, (event: FocusEvent) => {\n // Prevent closing if focus is inside popper content\n if (popperRef.value?.isFocusInsideContent()) return\n const hadIgnoredFocus = ignoreFocusEvent\n ignoreFocusEvent = false\n if (!suggestionVisible.value) return\n if (hadIgnoredFocus) {\n handleBlur(new FocusEvent('blur', event))\n } else {\n close()\n }\n})\n\nconst handleKeydown = (e: KeyboardEvent \| Event) => {\n const code = getEventCode(e as KeyboardEvent)\n switch (code) {\n case EVENT_CODE.up:\n e.preventDefault()\n highlight(highlightedIndex.value - 1)\n break\n case EVENT_CODE.down:\n e.preventDefault()\n highlight(highlightedIndex.value + 1)\n break\n case EVENT_CODE.enter:\n case EVENT_CODE.numpadEnter:\n e.preventDefault()\n handleKeyEnter()\n break\n case EVENT_CODE.tab:\n close()\n break\n case EVENT_CODE.esc:\n handleKeyEscape(e)\n break\n case EVENT_CODE.home:\n e.preventDefault()\n highlight(0)\n break\n case EVENT_CODE.end:\n e.preventDefault()\n highlight(suggestions.value.length - 1)\n break\n case EVENT_CODE.pageUp:\n e.preventDefault()\n highlight(Math.max(0, highlightedIndex.value - 10))\n break\n case EVENT_CODE.pageDown:\n e.preventDefault()\n highlight(\n Math.min(suggestions.value.length - 1, highlightedIndex.value + 10)\n )\n break\n }\n}\n\nonBeforeUnmount(() => {\n stopHandle?.()\n})\n\nonMounted(() => {\n const inputElement = inputRef.value?.ref\n if (!inputElement) return\n ;[\n { key: 'role', value: 'textbox' },\n { key: 'aria-autocomplete', value: 'list' },\n { key: 'aria-controls', value: listboxId.value },\n {\n key: 'aria-activedescendant',\n value: `${listboxId.value}-item-${highlightedIndex.value}`,\n },\n ].forEach(({ key, value }) => inputElement.setAttribute(key, value))\n // get readonly attr\n readonly = inputElement.hasAttribute('readonly')\n})\n\ndefineExpose({\n /** @description the index of the currently highlighted item /\n highlightedIndex,\n /* @description autocomplete whether activated /\n activated,\n /* @description remote search loading status /\n loading,\n /* @description el-input component instance /\n inputRef,\n /* @description el-tooltip component instance /\n popperRef,\n /* @description fetch suggestions result /\n suggestions,\n /* @description triggers when a suggestion is clicked /\n handleSelect,\n /* @description handle keyboard enter event /\n handleKeyEnter,\n /* @description focus the input element /\n focus,\n /* @description blur the input element /\n blur,\n /* @description close suggestion /\n close,\n /* @description highlight an item in a suggestion /\n highlight,\n /* @description loading suggestion list */\n getData,\n})\n</script>\n"],"mappings":"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"}

package/es/components/autocomplete/src/autocomplete2.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"autocomplete2.mjs","names":[],"sources":["../../../../../../packages/components/autocomplete/src/autocomplete.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popperRef\"\n :visible=\"suggestionVisible\"\n :placement=\"placement\"\n :fallback-placements=\"['bottom-start', 'top-start']\"\n :popper-class=\"[ns.e('popper'), popperClass!]\"\n :popper-style=\"popperStyle\"\n :teleported=\"teleported\"\n :append-to=\"appendTo\"\n :gpu-acceleration=\"false\"\n pure\n manual-mode\n effect=\"light\"\n trigger=\"click\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n persistent\n role=\"listbox\"\n @before-show=\"onSuggestionShow\"\n @hide=\"onHide\"\n >\n <div\n ref=\"listboxRef\"\n :class=\"[ns.b(), $attrs.class]\"\n :style=\"styles\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n :aria-expanded=\"suggestionVisible\"\n :aria-owns=\"listboxId\"\n >\n <el-input\n ref=\"inputRef\"\n v-bind=\"mergeProps(passInputProps, $attrs)\"\n :model-value=\"modelValue\"\n :disabled=\"disabled\"\n @input=\"handleInput\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @clear=\"handleClear\"\n @keydown=\"handleKeydown\"\n @mousedown=\"handleMouseDown\"\n >\n <template v-if=\"$slots.prepend\" #prepend>\n <slot name=\"prepend\" />\n </template>\n <template v-if=\"$slots.append\" #append>\n <slot name=\"append\" />\n </template>\n <template v-if=\"$slots.prefix\" #prefix>\n <slot name=\"prefix\" />\n </template>\n <template v-if=\"$slots.suffix\" #suffix>\n <slot name=\"suffix\" />\n </template>\n </el-input>\n </div>\n <template #content>\n <div\n ref=\"regionRef\"\n :class=\"[ns.b('suggestion'), ns.is('loading', suggestionLoading)]\"\n :style=\"{\n [fitInputWidth ? 'width' : 'minWidth']: dropdownWidth,\n outline: 'none',\n }\"\n role=\"region\"\n >\n <div\n v-if=\"$slots.header\"\n :class=\"ns.be('suggestion', 'header')\"\n @click.stop\n >\n <slot name=\"header\" />\n </div>\n <el-scrollbar\n :id=\"listboxId\"\n tag=\"ul\"\n :wrap-class=\"ns.be('suggestion', 'wrap')\"\n :view-class=\"ns.be('suggestion', 'list')\"\n role=\"listbox\"\n >\n <li v-if=\"suggestionLoading\">\n <slot name=\"loading\">\n <el-icon :class=\"ns.is('loading')\">\n <Loading />\n </el-icon>\n </slot>\n </li>\n <template v-else>\n <li\n v-for=\"(item, index) in suggestions\"\n :id=\"`${listboxId}-item-${index}`\"\n :key=\"index\"\n :class=\"{ highlighted: highlightedIndex === index }\"\n role=\"option\"\n :aria-selected=\"highlightedIndex === index\"\n @click=\"handleSelect(item)\"\n >\n <slot :item=\"item\">{{ item[valueKey] }}</slot>\n </li>\n </template>\n </el-scrollbar>\n <div\n v-if=\"$slots.footer\"\n :class=\"ns.be('suggestion', 'footer')\"\n @click.stop\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n mergeProps,\n onBeforeUnmount,\n onMounted,\n ref,\n useAttrs as useRawAttrs,\n} from 'vue'\nimport { pick } from 'lodash-unified'\nimport { onClickOutside, useDebounceFn } from '@vueuse/core'\nimport { Loading } from '@element-plus/icons-vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { NOOP, getEventCode, isArray, throwError } from '@element-plus/utils'\nimport {\n CHANGE_EVENT,\n EVENT_CODE,\n INPUT_EVENT,\n UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport ElInput, {\n inputProps,\n inputPropsDefaults,\n} from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { autocompleteEmits } from './autocomplete'\n\nimport type { AutocompleteData, AutocompleteProps } from './autocomplete'\nimport type { StyleValue } from 'vue'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { InputInstance } from '@element-plus/components/input'\n\nconst COMPONENT_NAME = 'ElAutocomplete'\ndefineOptions({\n name: COMPONENT_NAME,\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AutocompleteProps>(), {\n ...inputPropsDefaults,\n valueKey: 'value',\n modelValue: '',\n debounce: 300,\n placement: 'bottom-start',\n fetchSuggestions: NOOP,\n triggerOnFocus: true,\n loopNavigation: true,\n teleported: true,\n})\nconst emit = defineEmits(autocompleteEmits)\n\nconst passInputProps = computed(() => pick(props, Object.keys(inputProps)))\n\nconst rawAttrs = useRawAttrs()\nconst disabled = useFormDisabled()\nconst ns = useNamespace('autocomplete')\n\nconst inputRef = ref<InputInstance>()\nconst regionRef = ref<HTMLElement>()\nconst popperRef = ref<TooltipInstance>()\nconst listboxRef = ref<HTMLElement>()\n\nlet readonly = false\nlet ignoreFocusEvent = false\nconst suggestions = ref<AutocompleteData>([])\nconst highlightedIndex = ref(-1)\nconst dropdownWidth = ref('')\nconst activated = ref(false)\nconst suggestionDisabled = ref(false)\nconst loading = ref(false)\n\nconst listboxId = useId()\nconst styles = computed(() => rawAttrs.style as StyleValue)\n\nconst suggestionVisible = computed(() => {\n const isValidData = suggestions.value.length > 0\n return (isValidData \|\| loading.value) && activated.value\n})\n\nconst suggestionLoading = computed(() => !props.hideLoading && loading.value)\n\nconst refInput = computed<HTMLInputElement[]>(() => {\n if (inputRef.value) {\n return Array.from<HTMLInputElement>(\n inputRef.value.$el.querySelectorAll('input')\n )\n }\n return []\n})\n\nconst onSuggestionShow = () => {\n if (suggestionVisible.value) {\n dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n }\n}\n\nconst onHide = () => {\n highlightedIndex.value = -1\n}\n\nconst getData = async (queryString: string) => {\n if (suggestionDisabled.value) return\n\n const cb = (suggestionList: AutocompleteData) => {\n loading.value = false\n if (suggestionDisabled.value) return\n\n if (isArray(suggestionList)) {\n suggestions.value = suggestionList\n highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n } else {\n throwError(COMPONENT_NAME, 'autocomplete suggestions must be an array')\n }\n }\n\n loading.value = true\n if (isArray(props.fetchSuggestions)) {\n cb(props.fetchSuggestions)\n } else {\n const result = await props.fetchSuggestions(queryString, cb)\n if (isArray(result)) cb(result)\n }\n}\n\nconst debounce = computed(() => props.debounce)\nconst debouncedGetData = useDebounceFn(getData, debounce)\n\nconst handleInput = (value: string) => {\n const valuePresented = !!value\n\n emit(INPUT_EVENT, value)\n emit(UPDATE_MODEL_EVENT, value)\n\n suggestionDisabled.value = false\n activated.value \|\|= valuePresented\n\n if (!props.triggerOnFocus && !value) {\n suggestionDisabled.value = true\n suggestions.value = []\n return\n }\n\n debouncedGetData(value)\n}\n\nconst handleMouseDown = (event: MouseEvent) => {\n if (disabled.value) return\n if (\n (event.target as HTMLElement)?.tagName !== 'INPUT' \|\|\n refInput.value.includes(document.activeElement as HTMLInputElement)\n ) {\n activated.value = true\n }\n}\n\nconst handleChange = (value: string \| number) => {\n emit(CHANGE_EVENT, value)\n}\n\nconst handleFocus = (evt: FocusEvent) => {\n if (!ignoreFocusEvent) {\n activated.value = true\n emit('focus', evt)\n const queryString = props.modelValue ?? ''\n if (props.triggerOnFocus && !readonly) {\n debouncedGetData(String(queryString))\n }\n } else {\n ignoreFocusEvent = false\n }\n}\n\nconst handleBlur = (evt: FocusEvent) => {\n setTimeout(() => {\n // validate current focus event is inside el-tooltip-content\n // if so, ignore the blur event and the next focus event\n if (popperRef.value?.isFocusInsideContent()) {\n ignoreFocusEvent = true\n return\n }\n activated.value && close()\n emit('blur', evt)\n })\n}\n\nconst handleClear = () => {\n activated.value = false\n emit(UPDATE_MODEL_EVENT, '')\n emit('clear')\n}\n\nconst handleKeyEnter = async () => {\n if (inputRef.value?.isComposing) {\n return\n }\n\n if (\n suggestionVisible.value &&\n highlightedIndex.value >= 0 &&\n highlightedIndex.value < suggestions.value.length\n ) {\n handleSelect(suggestions.value[highlightedIndex.value])\n } else {\n if (props.selectWhenUnmatched) {\n emit('select', { value: props.modelValue })\n suggestions.value = []\n highlightedIndex.value = -1\n }\n activated.value = true\n debouncedGetData(String(props.modelValue))\n }\n}\n\nconst handleKeyEscape = (evt: Event) => {\n if (suggestionVisible.value) {\n evt.preventDefault()\n evt.stopPropagation()\n close()\n }\n}\n\nconst close = () => {\n activated.value = false\n}\n\nconst focus = () => {\n inputRef.value?.focus()\n}\n\nconst blur = () => {\n inputRef.value?.blur()\n}\n\nconst handleSelect = async (item: any) => {\n emit(INPUT_EVENT, item[props.valueKey])\n emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n emit('select', item)\n suggestions.value = []\n highlightedIndex.value = -1\n}\n\nconst highlight = (index: number) => {\n if (!suggestionVisible.value \|\| loading.value) return\n\n if (index < 0) {\n if (!props.loopNavigation) {\n highlightedIndex.value = -1\n return\n }\n index = suggestions.value.length - 1\n }\n\n if (index >= suggestions.value.length) {\n index = props.loopNavigation ? 0 : suggestions.value.length - 1\n }\n const [suggestion, suggestionList] = getSuggestionContext()\n const highlightItem = suggestionList[index]\n const scrollTop = suggestion.scrollTop\n const { offsetTop, scrollHeight } = highlightItem\n\n if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n suggestion.scrollTop = offsetTop + scrollHeight - suggestion.clientHeight\n }\n if (offsetTop < scrollTop) {\n suggestion.scrollTop = offsetTop\n }\n highlightedIndex.value = index\n inputRef.value?.ref?.setAttribute(\n 'aria-activedescendant',\n `${listboxId.value}-item-${highlightedIndex.value}`\n )\n}\nconst getSuggestionContext = () => {\n const suggestion = regionRef.value!.querySelector(\n `.${ns.be('suggestion', 'wrap')}`\n )!\n const suggestionList = suggestion.querySelectorAll<HTMLElement>(\n `.${ns.be('suggestion', 'list')} li`\n )\n return [suggestion, suggestionList] as const\n}\n\nconst stopHandle = onClickOutside(listboxRef, (event: FocusEvent) => {\n // Prevent closing if focus is inside popper content\n if (popperRef.value?.isFocusInsideContent()) return\n const hadIgnoredFocus = ignoreFocusEvent\n ignoreFocusEvent = false\n if (!suggestionVisible.value) return\n if (hadIgnoredFocus) {\n handleBlur(new FocusEvent('blur', event))\n } else {\n close()\n }\n})\n\nconst handleKeydown = (e: KeyboardEvent \| Event) => {\n const code = getEventCode(e as KeyboardEvent)\n switch (code) {\n case EVENT_CODE.up:\n e.preventDefault()\n highlight(highlightedIndex.value - 1)\n break\n case EVENT_CODE.down:\n e.preventDefault()\n highlight(highlightedIndex.value + 1)\n break\n case EVENT_CODE.enter:\n case EVENT_CODE.numpadEnter:\n e.preventDefault()\n handleKeyEnter()\n break\n case EVENT_CODE.tab:\n close()\n break\n case EVENT_CODE.esc:\n handleKeyEscape(e)\n break\n case EVENT_CODE.home:\n e.preventDefault()\n highlight(0)\n break\n case EVENT_CODE.end:\n e.preventDefault()\n highlight(suggestions.value.length - 1)\n break\n case EVENT_CODE.pageUp:\n e.preventDefault()\n highlight(Math.max(0, highlightedIndex.value - 10))\n break\n case EVENT_CODE.pageDown:\n e.preventDefault()\n highlight(\n Math.min(suggestions.value.length - 1, highlightedIndex.value + 10)\n )\n break\n }\n}\n\nonBeforeUnmount(() => {\n stopHandle?.()\n})\n\nonMounted(() => {\n const inputElement = inputRef.value?.ref\n if (!inputElement) return\n ;[\n { key: 'role', value: 'textbox' },\n { key: 'aria-autocomplete', value: 'list' },\n { key: 'aria-controls', value: listboxId.value },\n {\n key: 'aria-activedescendant',\n value: `${listboxId.value}-item-${highlightedIndex.value}`,\n },\n ].forEach(({ key, value }) => inputElement.setAttribute(key, value))\n // get readonly attr\n readonly = inputElement.hasAttribute('readonly')\n})\n\ndefineExpose({\n /** @description the index of the currently highlighted item /\n highlightedIndex,\n /* @description autocomplete whether activated /\n activated,\n /* @description remote search loading status /\n loading,\n /* @description el-input component instance /\n inputRef,\n /* @description el-tooltip component instance /\n popperRef,\n /* @description fetch suggestions result /\n suggestions,\n /* @description triggers when a suggestion is clicked /\n handleSelect,\n /* @description handle keyboard enter event /\n handleKeyEnter,\n /* @description focus the input element /\n focus,\n /* @description blur the input element /\n blur,\n /* @description close suggestion /\n close,\n /* @description highlight an item in a suggestion /\n highlight,\n /* @description loading suggestion list */\n getData,\n})\n</script>\n"],"mappings":""}
1	+ {"version":3,"file":"autocomplete2.mjs","names":[],"sources":["../../../../../../packages/components/autocomplete/src/autocomplete.vue"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"popperRef\"\n :visible=\"suggestionVisible\"\n :placement=\"placement\"\n :fallback-placements=\"['bottom-start', 'top-start']\"\n :popper-class=\"[ns.e('popper'), popperClass!]\"\n :popper-style=\"popperStyle\"\n :teleported=\"teleported\"\n :append-to=\"appendTo\"\n :gpu-acceleration=\"false\"\n pure\n manual-mode\n effect=\"light\"\n trigger=\"click\"\n :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n persistent\n role=\"listbox\"\n @before-show=\"onSuggestionShow\"\n @hide=\"onHide\"\n >\n <div\n ref=\"listboxRef\"\n :class=\"[ns.b(), $attrs.class]\"\n :style=\"styles\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n :aria-expanded=\"suggestionVisible\"\n :aria-owns=\"listboxId\"\n >\n <el-input\n ref=\"inputRef\"\n v-bind=\"mergeProps(passInputProps, $attrs)\"\n :model-value=\"modelValue\"\n :disabled=\"disabled\"\n @input=\"handleInput\"\n @change=\"handleChange\"\n @focus=\"handleFocus\"\n @blur=\"handleBlur\"\n @clear=\"handleClear\"\n @keydown=\"handleKeydown\"\n @mousedown=\"handleMouseDown\"\n >\n <template v-if=\"$slots.prepend\" #prepend>\n <slot name=\"prepend\" />\n </template>\n <template v-if=\"$slots.append\" #append>\n <slot name=\"append\" />\n </template>\n <template v-if=\"$slots.prefix\" #prefix>\n <slot name=\"prefix\" />\n </template>\n <template v-if=\"$slots.suffix\" #suffix>\n <slot name=\"suffix\" />\n </template>\n </el-input>\n </div>\n <template #content>\n <div\n ref=\"regionRef\"\n :class=\"[ns.b('suggestion'), ns.is('loading', suggestionLoading)]\"\n :style=\"{\n [fitInputWidth ? 'width' : 'minWidth']: dropdownWidth,\n outline: 'none',\n }\"\n role=\"region\"\n >\n <div\n v-if=\"$slots.header\"\n :class=\"ns.be('suggestion', 'header')\"\n @click.stop\n >\n <slot name=\"header\" />\n </div>\n <el-scrollbar\n :id=\"listboxId\"\n tag=\"ul\"\n :wrap-class=\"ns.be('suggestion', 'wrap')\"\n :view-class=\"ns.be('suggestion', 'list')\"\n role=\"listbox\"\n >\n <li v-if=\"suggestionLoading\">\n <slot name=\"loading\">\n <el-icon :class=\"ns.is('loading')\">\n <Loading />\n </el-icon>\n </slot>\n </li>\n <template v-else>\n <li\n v-for=\"(item, index) in suggestions\"\n :id=\"`${listboxId}-item-${index}`\"\n :key=\"index\"\n :class=\"{ highlighted: highlightedIndex === index }\"\n role=\"option\"\n :aria-selected=\"highlightedIndex === index\"\n @click=\"handleSelect(item)\"\n >\n <slot :item=\"item\">{{ item[valueKey] }}</slot>\n </li>\n </template>\n </el-scrollbar>\n <div\n v-if=\"$slots.footer\"\n :class=\"ns.be('suggestion', 'footer')\"\n @click.stop\n >\n <slot name=\"footer\" />\n </div>\n </div>\n </template>\n </el-tooltip>\n</template>\n\n<script\n lang=\"ts\"\n setup\n generic=\"T extends AutocompleteDataItem = AutocompleteDataItem\"\n>\nimport {\n computed,\n mergeProps,\n onBeforeUnmount,\n onMounted,\n ref,\n useAttrs as useRawAttrs,\n} from 'vue'\nimport { pick } from 'lodash-unified'\nimport { onClickOutside, useDebounceFn } from '@vueuse/core'\nimport { Loading } from '@element-plus/icons-vue'\nimport { useId, useNamespace } from '@element-plus/hooks'\nimport { NOOP, getEventCode, isArray, throwError } from '@element-plus/utils'\nimport {\n CHANGE_EVENT,\n EVENT_CODE,\n INPUT_EVENT,\n UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport ElInput, { inputPropsDefaults } from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { autocompleteEmits } from './autocomplete'\n\nimport type {\n AutocompleteData,\n AutocompleteDataItem,\n AutocompleteProps,\n} from './autocomplete'\nimport type { Ref, StyleValue } from 'vue'\nimport type { TooltipInstance } from '@element-plus/components/tooltip'\nimport type { InputInstance } from '@element-plus/components/input'\n\nconst COMPONENT_NAME = 'ElAutocomplete'\ndefineOptions({\n name: COMPONENT_NAME,\n inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<AutocompleteProps<T>>(), {\n ...inputPropsDefaults,\n valueKey: 'value',\n modelValue: '',\n debounce: 300,\n placement: 'bottom-start',\n fetchSuggestions: NOOP,\n triggerOnFocus: true,\n loopNavigation: true,\n teleported: true,\n})\nconst emit = defineEmits(autocompleteEmits)\nconst passInputProps = computed(() => {\n const inputProps = ElInput.props ?? []\n const keys = isArray(inputProps) ? inputProps : Object.keys(inputProps)\n return pick(props, keys)\n})\n\nconst rawAttrs = useRawAttrs()\nconst disabled = useFormDisabled()\nconst ns = useNamespace('autocomplete')\n\nconst inputRef = ref<InputInstance>()\nconst regionRef = ref<HTMLElement>()\nconst popperRef = ref<TooltipInstance>()\nconst listboxRef = ref<HTMLElement>()\n\nlet readonly = false\nlet ignoreFocusEvent = false\nconst suggestions = ref([]) as Ref<AutocompleteData<T>>\nconst highlightedIndex = ref(-1)\nconst dropdownWidth = ref('')\nconst activated = ref(false)\nconst suggestionDisabled = ref(false)\nconst loading = ref(false)\n\nconst listboxId = useId()\nconst styles = computed(() => rawAttrs.style as StyleValue)\n\nconst suggestionVisible = computed(() => {\n const isValidData = suggestions.value.length > 0\n return (isValidData \|\| loading.value) && activated.value\n})\n\nconst suggestionLoading = computed(() => !props.hideLoading && loading.value)\n\nconst refInput = computed<HTMLInputElement[]>(() => {\n if (inputRef.value) {\n return Array.from<HTMLInputElement>(\n inputRef.value.$el.querySelectorAll('input')\n )\n }\n return []\n})\n\nconst onSuggestionShow = () => {\n if (suggestionVisible.value) {\n dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n }\n}\n\nconst onHide = () => {\n highlightedIndex.value = -1\n}\n\nconst getData = async (queryString: string) => {\n if (suggestionDisabled.value) return\n\n const cb = (suggestionList: AutocompleteData<T>) => {\n loading.value = false\n if (suggestionDisabled.value) return\n\n if (isArray(suggestionList)) {\n suggestions.value = suggestionList\n highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n } else {\n throwError(COMPONENT_NAME, 'autocomplete suggestions must be an array')\n }\n }\n\n loading.value = true\n if (isArray(props.fetchSuggestions)) {\n cb(props.fetchSuggestions)\n } else {\n const result = await props.fetchSuggestions(queryString, cb)\n if (isArray(result)) cb(result)\n }\n}\n\nconst debounce = computed(() => props.debounce)\nconst debouncedGetData = useDebounceFn(getData, debounce)\n\nconst handleInput = (value: string) => {\n const valuePresented = !!value\n\n emit(INPUT_EVENT, value)\n emit(UPDATE_MODEL_EVENT, value)\n\n suggestionDisabled.value = false\n activated.value \|\|= valuePresented\n\n if (!props.triggerOnFocus && !value) {\n suggestionDisabled.value = true\n suggestions.value = []\n return\n }\n\n debouncedGetData(value)\n}\n\nconst handleMouseDown = (event: MouseEvent) => {\n if (disabled.value) return\n if (\n (event.target as HTMLElement)?.tagName !== 'INPUT' \|\|\n refInput.value.includes(document.activeElement as HTMLInputElement)\n ) {\n activated.value = true\n }\n}\n\nconst handleChange = (value: string \| number) => {\n emit(CHANGE_EVENT, value)\n}\n\nconst handleFocus = (evt: FocusEvent) => {\n if (!ignoreFocusEvent) {\n activated.value = true\n emit('focus', evt)\n const queryString = props.modelValue ?? ''\n if (props.triggerOnFocus && !readonly) {\n debouncedGetData(String(queryString))\n }\n } else {\n ignoreFocusEvent = false\n }\n}\n\nconst handleBlur = (evt: FocusEvent) => {\n setTimeout(() => {\n // validate current focus event is inside el-tooltip-content\n // if so, ignore the blur event and the next focus event\n if (popperRef.value?.isFocusInsideContent()) {\n ignoreFocusEvent = true\n return\n }\n activated.value && close()\n emit('blur', evt)\n })\n}\n\nconst handleClear = () => {\n activated.value = false\n emit(UPDATE_MODEL_EVENT, '')\n emit('clear')\n}\n\nconst handleKeyEnter = async () => {\n if (inputRef.value?.isComposing) {\n return\n }\n\n if (\n suggestionVisible.value &&\n highlightedIndex.value >= 0 &&\n highlightedIndex.value < suggestions.value.length\n ) {\n handleSelect(suggestions.value[highlightedIndex.value])\n } else {\n if (props.selectWhenUnmatched) {\n emit('select', { value: props.modelValue })\n suggestions.value = []\n highlightedIndex.value = -1\n }\n activated.value = true\n debouncedGetData(String(props.modelValue))\n }\n}\n\nconst handleKeyEscape = (evt: Event) => {\n if (suggestionVisible.value) {\n evt.preventDefault()\n evt.stopPropagation()\n close()\n }\n}\n\nconst close = () => {\n activated.value = false\n}\n\nconst focus = () => {\n inputRef.value?.focus()\n}\n\nconst blur = () => {\n inputRef.value?.blur()\n}\n\nconst handleSelect = async (item: T) => {\n emit(INPUT_EVENT, item[props.valueKey])\n emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n emit('select', item)\n suggestions.value = []\n highlightedIndex.value = -1\n}\n\nconst highlight = (index: number) => {\n if (!suggestionVisible.value \|\| loading.value) return\n\n if (index < 0) {\n if (!props.loopNavigation) {\n highlightedIndex.value = -1\n return\n }\n index = suggestions.value.length - 1\n }\n\n if (index >= suggestions.value.length) {\n index = props.loopNavigation ? 0 : suggestions.value.length - 1\n }\n const [suggestion, suggestionList] = getSuggestionContext()\n const highlightItem = suggestionList[index]\n const scrollTop = suggestion.scrollTop\n const { offsetTop, scrollHeight } = highlightItem\n\n if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n suggestion.scrollTop = offsetTop + scrollHeight - suggestion.clientHeight\n }\n if (offsetTop < scrollTop) {\n suggestion.scrollTop = offsetTop\n }\n highlightedIndex.value = index\n inputRef.value?.ref?.setAttribute(\n 'aria-activedescendant',\n `${listboxId.value}-item-${highlightedIndex.value}`\n )\n}\nconst getSuggestionContext = () => {\n const suggestion = regionRef.value!.querySelector(\n `.${ns.be('suggestion', 'wrap')}`\n )!\n const suggestionList = suggestion.querySelectorAll<HTMLElement>(\n `.${ns.be('suggestion', 'list')} li`\n )\n return [suggestion, suggestionList] as const\n}\n\nconst stopHandle = onClickOutside(listboxRef, (event: FocusEvent) => {\n // Prevent closing if focus is inside popper content\n if (popperRef.value?.isFocusInsideContent()) return\n const hadIgnoredFocus = ignoreFocusEvent\n ignoreFocusEvent = false\n if (!suggestionVisible.value) return\n if (hadIgnoredFocus) {\n handleBlur(new FocusEvent('blur', event))\n } else {\n close()\n }\n})\n\nconst handleKeydown = (e: KeyboardEvent \| Event) => {\n const code = getEventCode(e as KeyboardEvent)\n switch (code) {\n case EVENT_CODE.up:\n e.preventDefault()\n highlight(highlightedIndex.value - 1)\n break\n case EVENT_CODE.down:\n e.preventDefault()\n highlight(highlightedIndex.value + 1)\n break\n case EVENT_CODE.enter:\n case EVENT_CODE.numpadEnter:\n e.preventDefault()\n handleKeyEnter()\n break\n case EVENT_CODE.tab:\n close()\n break\n case EVENT_CODE.esc:\n handleKeyEscape(e)\n break\n case EVENT_CODE.home:\n e.preventDefault()\n highlight(0)\n break\n case EVENT_CODE.end:\n e.preventDefault()\n highlight(suggestions.value.length - 1)\n break\n case EVENT_CODE.pageUp:\n e.preventDefault()\n highlight(Math.max(0, highlightedIndex.value - 10))\n break\n case EVENT_CODE.pageDown:\n e.preventDefault()\n highlight(\n Math.min(suggestions.value.length - 1, highlightedIndex.value + 10)\n )\n break\n }\n}\n\nonBeforeUnmount(() => {\n stopHandle?.()\n})\n\nonMounted(() => {\n const inputElement = inputRef.value?.ref\n if (!inputElement) return\n ;[\n { key: 'role', value: 'textbox' },\n { key: 'aria-autocomplete', value: 'list' },\n { key: 'aria-controls', value: listboxId.value },\n {\n key: 'aria-activedescendant',\n value: `${listboxId.value}-item-${highlightedIndex.value}`,\n },\n ].forEach(({ key, value }) => inputElement.setAttribute(key, value))\n // get readonly attr\n readonly = inputElement.hasAttribute('readonly')\n})\n\ndefineExpose({\n /** @description the index of the currently highlighted item /\n highlightedIndex,\n /* @description autocomplete whether activated /\n activated,\n /* @description remote search loading status /\n loading,\n /* @description el-input component instance /\n inputRef,\n /* @description el-tooltip component instance /\n popperRef,\n /* @description fetch suggestions result /\n suggestions,\n /* @description triggers when a suggestion is clicked /\n handleSelect,\n /* @description handle keyboard enter event /\n handleKeyEnter,\n /* @description focus the input element /\n focus,\n /* @description blur the input element /\n blur,\n /* @description close suggestion /\n close,\n /* @description highlight an item in a suggestion /\n highlight,\n /* @description loading suggestion list */\n getData,\n})\n</script>\n"],"mappings":""}

package/es/components/avatar/src/avatar-group-props.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ declare const avatarGroupProps: {
    * @description control the size of avatars in this avatar-group
    */
   readonly size: {
-    readonly type: vue.PropType<number | "" | "default" | "large" | "small" | undefined>;
+    readonly type: vue.PropType<number | "" | "default" | "small" | "large" | undefined>;
     readonly values: readonly ["", "default", "small", "large"];
     readonly validator: (val: unknown) => val is number;
   };

package/es/components/avatar/src/avatar-group.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ import * as vue_jsx_runtime0 from "vue/jsx-runtime";
 //#region ../../packages/components/avatar/src/avatar-group.d.ts
 declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   readonly size: {
-    readonly type: vue.PropType<number | "" | "default" | "large" | "small" | undefined>;
+    readonly type: vue.PropType<number | "" | "default" | "small" | "large" | undefined>;
     readonly values: readonly ["", "default", "small", "large"];
     readonly validator: (val: unknown) => val is number;
   };
@@ -146,7 +146,7 @@ declare const _default: vue.DefineComponent<vue.ExtractPropTypes<{
   };
 }>, () => vue_jsx_runtime0.JSX.Element, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
   readonly size: {
-    readonly type: vue.PropType<number | "" | "default" | "large" | "small" | undefined>;
+    readonly type: vue.PropType<number | "" | "default" | "small" | "large" | undefined>;
     readonly values: readonly ["", "default", "small", "large"];
     readonly validator: (val: unknown) => val is number;
   };

package/es/components/avatar/src/avatar.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ import { ObjectFit } from "../../../utils/typescript.js";
 import "../../../utils/index.js";
 import * as vue from "vue";
 import { ExtractPublicPropTypes } from "vue";
+import * as csstype from "csstype";
 //#region ../../packages/components/avatar/src/avatar.d.ts
 interface AvatarProps {
@@ -42,7 +43,7 @@ interface AvatarProps {
  */
 declare const avatarProps: {
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "default" | "large" | "small", number>>;
+    readonly type: vue.PropType<EpPropMergeType<readonly [NumberConstructor, StringConstructor], "" | "default" | "small" | "large", number>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -62,7 +63,7 @@ declare const avatarProps: {
   readonly src: EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
   readonly alt: StringConstructor;
   readonly srcSet: StringConstructor;
-  readonly fit: EpPropFinalized<(new (...args: any[]) => "fill" | "contain" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "cover" | "scale-down") | (() => ObjectFit) | (((new (...args: any[]) => "fill" | "contain" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "cover" | "scale-down") | (() => ObjectFit)) | null)[], unknown, unknown, "cover", boolean>;
+  readonly fit: EpPropFinalized<(new (...args: any[]) => "fill" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "contain" | "cover" | "scale-down") | (() => csstype.Property.ObjectFit | undefined) | (((new (...args: any[]) => "fill" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "contain" | "cover" | "scale-down") | (() => csstype.Property.ObjectFit | undefined)) | null)[], unknown, unknown, "cover", boolean>;
 };
 /**
  * @deprecated Removed after 3.0.0, Use `AvatarProps` instead.

package/es/components/avatar/src/avatar.vue.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
-import { ObjectFit } from "../../../utils/typescript.js";
-import "../../../utils/index.js";
 import { AvatarProps } from "./avatar.js";
 import * as vue from "vue";
+import * as csstype from "csstype";
 //#region ../../packages/components/avatar/src/avatar.vue.d.ts
 declare var __VLS_12: {};
@@ -14,7 +13,7 @@ declare const __VLS_base: vue.DefineComponent<AvatarProps, {}, {}, {}, {}, vue.C
   onError?: ((evt: Event) => any) | undefined;
 }>, {
   src: string;
-  fit: ObjectFit;
+  fit: csstype.Property.ObjectFit;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/es/components/backtop/src/backtop.vue.d.ts CHANGED Viewed

@@ -11,9 +11,9 @@ declare const __VLS_base: vue.DefineComponent<BacktopProps, {}, {}, {}, {}, vue.
 }, string, vue.PublicProps, Readonly<BacktopProps> & Readonly<{
   onClick?: ((evt: MouseEvent) => any) | undefined;
 }>, {
+  target: string;
   bottom: number;
   right: number;
-  target: string;
   visibilityHeight: number;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/es/components/badge/src/badge.vue.d.ts CHANGED Viewed

@@ -14,9 +14,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: vue.DefineComponent<BadgeProps, {
   /** @description badge content */content: vue.ComputedRef<string>;
 }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+  offset: [number, number];
   type: "primary" | "success" | "warning" | "info" | "danger";
   value: string | number;
-  offset: [number, number];
   max: number;
   showZero: boolean;
   badgeStyle: string | false | vue.CSSProperties | StyleValue[] | null;

package/es/components/button/src/button-custom.mjs CHANGED Viewed

@@ -35,6 +35,23 @@ function useButtonCustomStyle(props) {
 					styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? darken(color, 50) : color.tint(50).toString();
 					styles[ns.cssVarBlockName("disabled-border-color")] = props.dark ? darken(color, 80) : color.tint(80).toString();
 				}
+			} else if (props.link || props.text) {
+				const hoverColor = props.dark ? darken(color, 30) : color.tint(30).toString();
+				styles = ns.cssVarBlock({
+					"text-color": buttonColor,
+					"hover-text-color": hoverColor,
+					"active-text-color": activeBgColor
+				});
+				if (props.link) {
+					styles[ns.cssVarBlockName("hover-link-text-color")] = hoverColor;
+					styles[ns.cssVarBlockName("active-color")] = activeBgColor;
+				}
+				if (_disabled.value) {
+					const disabledColor = props.dark ? darken(color, 50) : color.tint(50).toString();
+					styles[ns.cssVarBlockName("disabled-bg-color")] = "transparent";
+					styles[ns.cssVarBlockName("disabled-text-color")] = disabledColor;
+					styles[ns.cssVarBlockName("disabled-border-color")] = "transparent";
+				}
 			} else {
 				const hoverBgColor = props.dark ? darken(color, 30) : color.tint(30).toString();
 				const textColor = color.isDark() ? `var(${ns.cssVarName("color-white")})` : `var(${ns.cssVarName("color-black")})`;

package/es/components/button/src/button-custom.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-custom.mjs","names":[],"sources":["../../../../../../packages/components/button/src/button-custom.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { TinyColor } from '@ctrl/tinycolor'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { ButtonProps } from './button'\n\nexport function darken(color: TinyColor, amount = 20) {\n return color.mix('#141414', amount).toString()\n}\n\nexport function useButtonCustomStyle(props: ButtonProps) {\n const _disabled = useFormDisabled()\n const ns = useNamespace('button')\n\n // calculate hover & active color by custom color\n // only work when custom color\n return computed(() => {\n let styles: Record<string, string> = {}\n\n let buttonColor = props.color\n\n if (buttonColor) {\n const match = (buttonColor as string).match(/var\$(.*?)\$/)\n if (match) {\n buttonColor = window\n .getComputedStyle(window.document.documentElement)\n .getPropertyValue(match[1])\n }\n const color = new TinyColor(buttonColor)\n const activeBgColor = props.dark\n ? color.tint(20).toString()\n : darken(color, 20)\n\n if (props.plain) {\n styles = ns.cssVarBlock({\n 'bg-color': props.dark\n ? darken(color, 90)\n : color.tint(90).toString(),\n 'text-color': buttonColor,\n 'border-color': props.dark\n ? darken(color, 50)\n : color.tint(50).toString(),\n 'hover-text-color': `var(${ns.cssVarName('color-white')})`,\n 'hover-bg-color': buttonColor,\n 'hover-border-color': buttonColor,\n 'active-bg-color': activeBgColor,\n 'active-text-color': `var(${ns.cssVarName('color-white')})`,\n 'active-border-color': activeBgColor,\n })\n\n if (_disabled.value) {\n styles[ns.cssVarBlockName('disabled-bg-color')] = props.dark\n ? darken(color, 90)\n : color.tint(90).toString()\n styles[ns.cssVarBlockName('disabled-text-color')] = props.dark\n ? darken(color, 50)\n : color.tint(50).toString()\n styles[ns.cssVarBlockName('disabled-border-color')] = props.dark\n ? darken(color, 80)\n : color.tint(80).toString()\n }\n } else {\n const hoverBgColor = props.dark\n ? darken(color, 30)\n : color.tint(30).toString()\n const textColor = color.isDark()\n ? `var(${ns.cssVarName('color-white')})`\n : `var(${ns.cssVarName('color-black')})`\n styles = ns.cssVarBlock({\n 'bg-color': buttonColor,\n 'text-color': textColor,\n 'border-color': buttonColor,\n 'hover-bg-color': hoverBgColor,\n 'hover-text-color': textColor,\n 'hover-border-color': hoverBgColor,\n 'active-bg-color': activeBgColor,\n 'active-border-color': activeBgColor,\n })\n\n if (_disabled.value) {\n const disabledButtonColor = props.dark\n ? darken(color, 50)\n : color.tint(50).toString()\n styles[ns.cssVarBlockName('disabled-bg-color')] = disabledButtonColor\n styles[ns.cssVarBlockName('disabled-text-color')] = props.dark\n ? 'rgba(255, 255, 255, 0.5)'\n : `var(${ns.cssVarName('color-white')})`\n styles[ns.cssVarBlockName('disabled-border-color')] =\n disabledButtonColor\n }\n }\n }\n\n return styles\n })\n}\n"],"mappings":";;;;;;AAOA,SAAgB,OAAO,OAAkB,SAAS,IAAI;AACpD,QAAO,MAAM,IAAI,WAAW,OAAO,CAAC,UAAU;;AAGhD,SAAgB,qBAAqB,OAAoB;CACvD,MAAM,YAAY,iBAAiB;CACnC,MAAM,KAAK,aAAa,SAAS;AAIjC,QAAO,eAAe;EACpB,IAAI,SAAiC,EAAE;EAEvC,IAAI,cAAc,MAAM;AAExB,MAAI,aAAa;GACf,MAAM,QAAS,YAAuB,MAAM,eAAe;AAC3D,OAAI,MACF,eAAc,OACX,iBAAiB,OAAO,SAAS,gBAAgB,CACjD,iBAAiB,MAAM,GAAG;GAE/B,MAAM,QAAQ,IAAI,UAAU,YAAY;GACxC,MAAM,gBAAgB,MAAM,OACxB,MAAM,KAAK,GAAG,CAAC,UAAU,GACzB,OAAO,OAAO,GAAG;AAErB,OAAI,MAAM,OAAO;AACf,aAAS,GAAG,YAAY;KACtB,YAAY,MAAM,OACd,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;KAC7B,cAAc;KACd,gBAAgB,MAAM,OAClB,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;KAC7B,oBAAoB,OAAO,GAAG,WAAW,cAAc,CAAC;KACxD,kBAAkB;KAClB,sBAAsB;KACtB,mBAAmB;KACnB,qBAAqB,OAAO,GAAG,WAAW,cAAc,CAAC;KACzD,uBAAuB;KACxB,CAAC;AAEF,QAAI,UAAU,OAAO;AACnB,YAAO,GAAG,gBAAgB,oBAAoB,IAAI,MAAM,OACpD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,sBAAsB,IAAI,MAAM,OACtD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,wBAAwB,IAAI,MAAM,OACxD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;;~~UAE1B~~;IACL,MAAM,eAAe,MAAM,OACvB,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;IAC7B,MAAM,YAAY,MAAM,QAAQ,GAC5B,OAAO,GAAG,WAAW,cAAc,CAAC,KACpC,OAAO,GAAG,WAAW,cAAc,CAAC;AACxC,aAAS,GAAG,YAAY;KACtB,YAAY;KACZ,cAAc;KACd,gBAAgB;KAChB,kBAAkB;KAClB,oBAAoB;KACpB,sBAAsB;KACtB,mBAAmB;KACnB,uBAAuB;KACxB,CAAC;AAEF,QAAI,UAAU,OAAO;KACnB,MAAM,sBAAsB,MAAM,OAC9B,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,oBAAoB,IAAI;AAClD,YAAO,GAAG,gBAAgB,sBAAsB,IAAI,MAAM,OACtD,6BACA,OAAO,GAAG,WAAW,cAAc,CAAC;AACxC,YAAO,GAAG,gBAAgB,wBAAwB,IAChD;;;;AAKR,SAAO;GACP"}
1	+ {"version":3,"file":"button-custom.mjs","names":[],"sources":["../../../../../../packages/components/button/src/button-custom.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { TinyColor } from '@ctrl/tinycolor'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormDisabled } from '@element-plus/components/form'\n\nimport type { ButtonProps } from './button'\n\nexport function darken(color: TinyColor, amount = 20) {\n return color.mix('#141414', amount).toString()\n}\n\nexport function useButtonCustomStyle(props: ButtonProps) {\n const _disabled = useFormDisabled()\n const ns = useNamespace('button')\n\n // calculate hover & active color by custom color\n // only work when custom color\n return computed(() => {\n let styles: Record<string, string> = {}\n\n let buttonColor = props.color\n\n if (buttonColor) {\n const match = (buttonColor as string).match(/var\$(.*?)\$/)\n if (match) {\n buttonColor = window\n .getComputedStyle(window.document.documentElement)\n .getPropertyValue(match[1])\n }\n const color = new TinyColor(buttonColor)\n const activeBgColor = props.dark\n ? color.tint(20).toString()\n : darken(color, 20)\n\n if (props.plain) {\n styles = ns.cssVarBlock({\n 'bg-color': props.dark\n ? darken(color, 90)\n : color.tint(90).toString(),\n 'text-color': buttonColor,\n 'border-color': props.dark\n ? darken(color, 50)\n : color.tint(50).toString(),\n 'hover-text-color': `var(${ns.cssVarName('color-white')})`,\n 'hover-bg-color': buttonColor,\n 'hover-border-color': buttonColor,\n 'active-bg-color': activeBgColor,\n 'active-text-color': `var(${ns.cssVarName('color-white')})`,\n 'active-border-color': activeBgColor,\n })\n\n if (_disabled.value) {\n styles[ns.cssVarBlockName('disabled-bg-color')] = props.dark\n ? darken(color, 90)\n : color.tint(90).toString()\n styles[ns.cssVarBlockName('disabled-text-color')] = props.dark\n ? darken(color, 50)\n : color.tint(50).toString()\n styles[ns.cssVarBlockName('disabled-border-color')] = props.dark\n ? darken(color, 80)\n : color.tint(80).toString()\n }\n } else if (props.link \|\| props.text) {\n const hoverColor = props.dark\n ? darken(color, 30)\n : color.tint(30).toString()\n\n styles = ns.cssVarBlock({\n 'text-color': buttonColor,\n 'hover-text-color': hoverColor,\n 'active-text-color': activeBgColor,\n })\n\n if (props.link) {\n styles[ns.cssVarBlockName('hover-link-text-color')] = hoverColor\n styles[ns.cssVarBlockName('active-color')] = activeBgColor\n }\n\n if (_disabled.value) {\n const disabledColor = props.dark\n ? darken(color, 50)\n : color.tint(50).toString()\n styles[ns.cssVarBlockName('disabled-bg-color')] = 'transparent'\n styles[ns.cssVarBlockName('disabled-text-color')] = disabledColor\n styles[ns.cssVarBlockName('disabled-border-color')] = 'transparent'\n }\n } else {\n const hoverBgColor = props.dark\n ? darken(color, 30)\n : color.tint(30).toString()\n const textColor = color.isDark()\n ? `var(${ns.cssVarName('color-white')})`\n : `var(${ns.cssVarName('color-black')})`\n styles = ns.cssVarBlock({\n 'bg-color': buttonColor,\n 'text-color': textColor,\n 'border-color': buttonColor,\n 'hover-bg-color': hoverBgColor,\n 'hover-text-color': textColor,\n 'hover-border-color': hoverBgColor,\n 'active-bg-color': activeBgColor,\n 'active-border-color': activeBgColor,\n })\n\n if (_disabled.value) {\n const disabledButtonColor = props.dark\n ? darken(color, 50)\n : color.tint(50).toString()\n styles[ns.cssVarBlockName('disabled-bg-color')] = disabledButtonColor\n styles[ns.cssVarBlockName('disabled-text-color')] = props.dark\n ? 'rgba(255, 255, 255, 0.5)'\n : `var(${ns.cssVarName('color-white')})`\n styles[ns.cssVarBlockName('disabled-border-color')] =\n disabledButtonColor\n }\n }\n }\n\n return styles\n })\n}\n"],"mappings":";;;;;;AAOA,SAAgB,OAAO,OAAkB,SAAS,IAAI;AACpD,QAAO,MAAM,IAAI,WAAW,OAAO,CAAC,UAAU;;AAGhD,SAAgB,qBAAqB,OAAoB;CACvD,MAAM,YAAY,iBAAiB;CACnC,MAAM,KAAK,aAAa,SAAS;AAIjC,QAAO,eAAe;EACpB,IAAI,SAAiC,EAAE;EAEvC,IAAI,cAAc,MAAM;AAExB,MAAI,aAAa;GACf,MAAM,QAAS,YAAuB,MAAM,eAAe;AAC3D,OAAI,MACF,eAAc,OACX,iBAAiB,OAAO,SAAS,gBAAgB,CACjD,iBAAiB,MAAM,GAAG;GAE/B,MAAM,QAAQ,IAAI,UAAU,YAAY;GACxC,MAAM,gBAAgB,MAAM,OACxB,MAAM,KAAK,GAAG,CAAC,UAAU,GACzB,OAAO,OAAO,GAAG;AAErB,OAAI,MAAM,OAAO;AACf,aAAS,GAAG,YAAY;KACtB,YAAY,MAAM,OACd,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;KAC7B,cAAc;KACd,gBAAgB,MAAM,OAClB,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;KAC7B,oBAAoB,OAAO,GAAG,WAAW,cAAc,CAAC;KACxD,kBAAkB;KAClB,sBAAsB;KACtB,mBAAmB;KACnB,qBAAqB,OAAO,GAAG,WAAW,cAAc,CAAC;KACzD,uBAAuB;KACxB,CAAC;AAEF,QAAI,UAAU,OAAO;AACnB,YAAO,GAAG,gBAAgB,oBAAoB,IAAI,MAAM,OACpD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,sBAAsB,IAAI,MAAM,OACtD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,wBAAwB,IAAI,MAAM,OACxD,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;;cAEtB,MAAM,QAAQ,MAAM,MAAM;IACnC,MAAM,aAAa,MAAM,OACrB,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAE7B,aAAS,GAAG,YAAY;KACtB,cAAc;KACd,oBAAoB;KACpB,qBAAqB;KACtB,CAAC;AAEF,QAAI,MAAM,MAAM;AACd,YAAO,GAAG,gBAAgB,wBAAwB,IAAI;AACtD,YAAO,GAAG,gBAAgB,eAAe,IAAI;;AAG/C,QAAI,UAAU,OAAO;KACnB,MAAM,gBAAgB,MAAM,OACxB,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,oBAAoB,IAAI;AAClD,YAAO,GAAG,gBAAgB,sBAAsB,IAAI;AACpD,YAAO,GAAG,gBAAgB,wBAAwB,IAAI;;UAEnD;IACL,MAAM,eAAe,MAAM,OACvB,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;IAC7B,MAAM,YAAY,MAAM,QAAQ,GAC5B,OAAO,GAAG,WAAW,cAAc,CAAC,KACpC,OAAO,GAAG,WAAW,cAAc,CAAC;AACxC,aAAS,GAAG,YAAY;KACtB,YAAY;KACZ,cAAc;KACd,gBAAgB;KAChB,kBAAkB;KAClB,oBAAoB;KACpB,sBAAsB;KACtB,mBAAmB;KACnB,uBAAuB;KACxB,CAAC;AAEF,QAAI,UAAU,OAAO;KACnB,MAAM,sBAAsB,MAAM,OAC9B,OAAO,OAAO,GAAG,GACjB,MAAM,KAAK,GAAG,CAAC,UAAU;AAC7B,YAAO,GAAG,gBAAgB,oBAAoB,IAAI;AAClD,YAAO,GAAG,gBAAgB,sBAAsB,IAAI,MAAM,OACtD,6BACA,OAAO,GAAG,WAAW,cAAc,CAAC;AACxC,YAAO,GAAG,gBAAgB,wBAAwB,IAChD;;;;AAKR,SAAO;GACP"}

package/es/components/button/src/button.d.ts CHANGED Viewed

@@ -93,7 +93,7 @@ interface ButtonProps {
  */
 declare const buttonProps: {
   readonly size: {
-    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "large" | "small", never>>;
+    readonly type: vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/es/components/button/src/button.vue.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: vue.DefineComponent<ButtonProps, {
   /** @description button html element */ref: vue.Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>; /** @description button size */
-  size: vue.ComputedRef<"" | "default" | "large" | "small">; /** @description button type */
+  size: vue.ComputedRef<"" | "default" | "small" | "large">; /** @description button type */
   type: vue.ComputedRef<"default" | "" | "info" | "primary" | "success" | "warning" | "text" | "danger">; /** @description button disabled */
   disabled: vue.ComputedRef<boolean>; /** @description whether adding space */
   shouldAddSpace: vue.ComputedRef<boolean>;
@@ -24,13 +24,13 @@ declare const __VLS_base: vue.DefineComponent<ButtonProps, {
   onClick?: ((evt: MouseEvent) => any) | undefined;
 }>, {
   type: ButtonType;
-  disabled: boolean;
   text: boolean;
+  disabled: boolean;
   round: boolean;
   dashed: boolean;
-  plain: boolean;
   nativeType: ButtonNativeType;
   loadingIcon: IconPropType;
+  plain: boolean;
   autoInsertSpace: boolean;
   tag: string | vue.Component;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;

package/es/components/calendar/src/use-date-table.mjs CHANGED Viewed

@@ -1,5 +1,6 @@
 import { WEEK_DAYS } from "../../../constants/date.mjs";
 import { useLocale } from "../../../hooks/use-locale/index.mjs";
+import { DEFAULT_FORMATS_DATE } from "../../time-picker/src/constants.mjs";
 import { rangeArr } from "../../time-picker/src/utils.mjs";
 import { getMonthDays, getPrevMonthLastDays, toNestedArr } from "./date-table.mjs";
 import { computed } from "vue";
@@ -67,7 +68,7 @@ const useDateTable = (props, emit) => {
 		return {
 			isSelected: day.isSame(props.selectedDay),
 			type: `${type}-month`,
-			day: day.format("YYYY-MM-DD"),
+			day: day.format(DEFAULT_FORMATS_DATE),
 			date: day.toDate()
 		};
 	};

package/es/components/calendar/src/use-date-table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-date-table.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/use-date-table.ts"],"sourcesContent":["import { computed } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData.js'\nimport { useLocale } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { WEEK_DAYS } from '@element-plus/constants'\nimport { getMonthDays, getPrevMonthLastDays, toNestedArr } from './date-table'\n\nimport type { SetupContext } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type {\n CalendarDateCell,\n CalendarDateCellType,\n DateTableEmits,\n DateTableProps,\n} from './date-table'\n\nexport const useDateTable = (\n props: DateTableProps,\n emit: SetupContext<DateTableEmits>['emit']\n) => {\n dayjs.extend(localeData)\n // https://day.js.org/docs/en/i18n/locale-data\n const firstDayOfWeek: number = dayjs.localeData().firstDayOfWeek()\n\n const { t, lang } = useLocale()\n const now = dayjs().locale(lang.value)\n\n const isInRange = computed(() => !!props.range && !!props.range.length)\n\n const rows = computed(() => {\n let days: CalendarDateCell[] = []\n if (isInRange.value) {\n const [start, end] = props.range!\n const currentMonthRange: CalendarDateCell[] = rangeArr(\n end.date() - start.date() + 1\n ).map((index) => ({\n text: start.date() + index,\n type: 'current',\n }))\n\n let remaining = currentMonthRange.length % 7\n remaining = remaining === 0 ? 0 : 7 - remaining\n const nextMonthRange: CalendarDateCell[] = rangeArr(remaining).map(\n (_, index) => ({\n text: index + 1,\n type: 'next',\n })\n )\n days = currentMonthRange.concat(nextMonthRange)\n } else {\n const firstDay = props.date.startOf('month').day()\n const prevMonthDays: CalendarDateCell[] = getPrevMonthLastDays(\n props.date,\n (firstDay - firstDayOfWeek + 7) % 7\n ).map((day) => ({\n text: day,\n type: 'prev',\n }))\n const currentMonthDays: CalendarDateCell[] = getMonthDays(props.date).map(\n (day) => ({\n text: day,\n type: 'current',\n })\n )\n days = [...prevMonthDays, ...currentMonthDays]\n const remaining = 7 - (days.length % 7 \|\| 7)\n const nextMonthDays: CalendarDateCell[] = rangeArr(remaining).map(\n (_, index) => ({\n text: index + 1,\n type: 'next',\n })\n )\n days = days.concat(nextMonthDays)\n }\n return toNestedArr(days)\n })\n\n const weekDays = computed(() => {\n const start = firstDayOfWeek\n if (start === 0) {\n return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n } else {\n return WEEK_DAYS.slice(start)\n .concat(WEEK_DAYS.slice(0, start))\n .map((_) => t(`el.datepicker.weeks.${_}`))\n }\n })\n\n const getFormattedDate = (day: number, type: CalendarDateCellType): Dayjs => {\n switch (type) {\n case 'prev':\n return props.date.startOf('month').subtract(1, 'month').date(day)\n case 'next':\n return props.date.startOf('month').add(1, 'month').date(day)\n case 'current':\n return props.date.date(day)\n }\n }\n\n const handlePickDay = ({ text, type }: CalendarDateCell) => {\n const date = getFormattedDate(text, type)\n emit('pick', date)\n }\n\n const getSlotData = ({ text, type }: CalendarDateCell) => {\n const day = getFormattedDate(text, type)\n return {\n isSelected: day.isSame(props.selectedDay),\n type: `${type}-month`,\n day: day.format(~~'YYYY-MM-DD'~~),\n date: day.toDate(),\n }\n }\n\n return {\n now,\n isInRange,\n rows,\n weekDays,\n getFormattedDate,\n handlePickDay,\n getSlotData,\n }\n}\n"],"mappings":"~~;;;;;;;;;AAiBA~~,MAAa,gBACX,OACA,SACG;AACH,OAAM,OAAO,WAAW;CAExB,MAAM,iBAAyB,MAAM,YAAY,CAAC,gBAAgB;CAElE,MAAM,EAAE,GAAG,SAAS,WAAW;CAC/B,MAAM,MAAM,OAAO,CAAC,OAAO,KAAK,MAAM;CAEtC,MAAM,YAAY,eAAe,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM,MAAM,OAAO;CAEvE,MAAM,OAAO,eAAe;EAC1B,IAAI,OAA2B,EAAE;AACjC,MAAI,UAAU,OAAO;GACnB,MAAM,CAAC,OAAO,OAAO,MAAM;GAC3B,MAAM,oBAAwC,SAC5C,IAAI,MAAM,GAAG,MAAM,MAAM,GAAG,EAC7B,CAAC,KAAK,WAAW;IAChB,MAAM,MAAM,MAAM,GAAG;IACrB,MAAM;IACP,EAAE;GAEH,IAAI,YAAY,kBAAkB,SAAS;AAC3C,eAAY,cAAc,IAAI,IAAI,IAAI;GACtC,MAAM,iBAAqC,SAAS,UAAU,CAAC,KAC5D,GAAG,WAAW;IACb,MAAM,QAAQ;IACd,MAAM;IACP,EACF;AACD,UAAO,kBAAkB,OAAO,eAAe;SAC1C;GACL,MAAM,WAAW,MAAM,KAAK,QAAQ,QAAQ,CAAC,KAAK;GAClD,MAAM,gBAAoC,qBACxC,MAAM,OACL,WAAW,iBAAiB,KAAK,EACnC,CAAC,KAAK,SAAS;IACd,MAAM;IACN,MAAM;IACP,EAAE;GACH,MAAM,mBAAuC,aAAa,MAAM,KAAK,CAAC,KACnE,SAAS;IACR,MAAM;IACN,MAAM;IACP,EACF;AACD,UAAO,CAAC,GAAG,eAAe,GAAG,iBAAiB;GAE9C,MAAM,gBAAoC,SADxB,KAAK,KAAK,SAAS,KAAK,GACmB,CAAC,KAC3D,GAAG,WAAW;IACb,MAAM,QAAQ;IACd,MAAM;IACP,EACF;AACD,UAAO,KAAK,OAAO,cAAc;;AAEnC,SAAO,YAAY,KAAK;GACxB;CAEF,MAAM,WAAW,eAAe;EAC9B,MAAM,QAAQ;AACd,MAAI,UAAU,EACZ,QAAO,UAAU,KAAK,MAAM,EAAE,uBAAuB,IAAI,CAAC;MAE1D,QAAO,UAAU,MAAM,MAAM,CAC1B,OAAO,UAAU,MAAM,GAAG,MAAM,CAAC,CACjC,KAAK,MAAM,EAAE,uBAAuB,IAAI,CAAC;GAE9C;CAEF,MAAM,oBAAoB,KAAa,SAAsC;AAC3E,UAAQ,MAAR;GACE,KAAK,OACH,QAAO,MAAM,KAAK,QAAQ,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,KAAK,IAAI;GACnE,KAAK,OACH,QAAO,MAAM,KAAK,QAAQ,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,IAAI;GAC9D,KAAK,UACH,QAAO,MAAM,KAAK,KAAK,IAAI;;;CAIjC,MAAM,iBAAiB,EAAE,MAAM,WAA6B;AAE1D,OAAK,QADQ,iBAAiB,MAAM,KAAK,CACvB;;CAGpB,MAAM,eAAe,EAAE,MAAM,WAA6B;EACxD,MAAM,MAAM,iBAAiB,MAAM,KAAK;AACxC,SAAO;GACL,YAAY,IAAI,OAAO,MAAM,YAAY;GACzC,MAAM,GAAG,KAAK;GACd,KAAK,IAAI,OAAO,~~aAAa~~;~~GAC7B~~,MAAM,IAAI,QAAQ;GACnB;;AAGH,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
1	+ {"version":3,"file":"use-date-table.mjs","names":[],"sources":["../../../../../../packages/components/calendar/src/use-date-table.ts"],"sourcesContent":["import { computed } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData.js'\nimport { useLocale } from '@element-plus/hooks'\nimport {\n DEFAULT_FORMATS_DATE,\n rangeArr,\n} from '@element-plus/components/time-picker'\nimport { WEEK_DAYS } from '@element-plus/constants'\nimport { getMonthDays, getPrevMonthLastDays, toNestedArr } from './date-table'\n\nimport type { SetupContext } from 'vue'\nimport type { Dayjs } from 'dayjs'\nimport type {\n CalendarDateCell,\n CalendarDateCellType,\n DateTableEmits,\n DateTableProps,\n} from './date-table'\n\nexport const useDateTable = (\n props: DateTableProps,\n emit: SetupContext<DateTableEmits>['emit']\n) => {\n dayjs.extend(localeData)\n // https://day.js.org/docs/en/i18n/locale-data\n const firstDayOfWeek: number = dayjs.localeData().firstDayOfWeek()\n\n const { t, lang } = useLocale()\n const now = dayjs().locale(lang.value)\n\n const isInRange = computed(() => !!props.range && !!props.range.length)\n\n const rows = computed(() => {\n let days: CalendarDateCell[] = []\n if (isInRange.value) {\n const [start, end] = props.range!\n const currentMonthRange: CalendarDateCell[] = rangeArr(\n end.date() - start.date() + 1\n ).map((index) => ({\n text: start.date() + index,\n type: 'current',\n }))\n\n let remaining = currentMonthRange.length % 7\n remaining = remaining === 0 ? 0 : 7 - remaining\n const nextMonthRange: CalendarDateCell[] = rangeArr(remaining).map(\n (_, index) => ({\n text: index + 1,\n type: 'next',\n })\n )\n days = currentMonthRange.concat(nextMonthRange)\n } else {\n const firstDay = props.date.startOf('month').day()\n const prevMonthDays: CalendarDateCell[] = getPrevMonthLastDays(\n props.date,\n (firstDay - firstDayOfWeek + 7) % 7\n ).map((day) => ({\n text: day,\n type: 'prev',\n }))\n const currentMonthDays: CalendarDateCell[] = getMonthDays(props.date).map(\n (day) => ({\n text: day,\n type: 'current',\n })\n )\n days = [...prevMonthDays, ...currentMonthDays]\n const remaining = 7 - (days.length % 7 \|\| 7)\n const nextMonthDays: CalendarDateCell[] = rangeArr(remaining).map(\n (_, index) => ({\n text: index + 1,\n type: 'next',\n })\n )\n days = days.concat(nextMonthDays)\n }\n return toNestedArr(days)\n })\n\n const weekDays = computed(() => {\n const start = firstDayOfWeek\n if (start === 0) {\n return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n } else {\n return WEEK_DAYS.slice(start)\n .concat(WEEK_DAYS.slice(0, start))\n .map((_) => t(`el.datepicker.weeks.${_}`))\n }\n })\n\n const getFormattedDate = (day: number, type: CalendarDateCellType): Dayjs => {\n switch (type) {\n case 'prev':\n return props.date.startOf('month').subtract(1, 'month').date(day)\n case 'next':\n return props.date.startOf('month').add(1, 'month').date(day)\n case 'current':\n return props.date.date(day)\n }\n }\n\n const handlePickDay = ({ text, type }: CalendarDateCell) => {\n const date = getFormattedDate(text, type)\n emit('pick', date)\n }\n\n const getSlotData = ({ text, type }: CalendarDateCell) => {\n const day = getFormattedDate(text, type)\n return {\n isSelected: day.isSame(props.selectedDay),\n type: `${type}-month`,\n day: day.format(DEFAULT_FORMATS_DATE),\n date: day.toDate(),\n }\n }\n\n return {\n now,\n isInRange,\n rows,\n weekDays,\n getFormattedDate,\n handlePickDay,\n getSlotData,\n }\n}\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,gBACX,OACA,SACG;AACH,OAAM,OAAO,WAAW;CAExB,MAAM,iBAAyB,MAAM,YAAY,CAAC,gBAAgB;CAElE,MAAM,EAAE,GAAG,SAAS,WAAW;CAC/B,MAAM,MAAM,OAAO,CAAC,OAAO,KAAK,MAAM;CAEtC,MAAM,YAAY,eAAe,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM,MAAM,OAAO;CAEvE,MAAM,OAAO,eAAe;EAC1B,IAAI,OAA2B,EAAE;AACjC,MAAI,UAAU,OAAO;GACnB,MAAM,CAAC,OAAO,OAAO,MAAM;GAC3B,MAAM,oBAAwC,SAC5C,IAAI,MAAM,GAAG,MAAM,MAAM,GAAG,EAC7B,CAAC,KAAK,WAAW;IAChB,MAAM,MAAM,MAAM,GAAG;IACrB,MAAM;IACP,EAAE;GAEH,IAAI,YAAY,kBAAkB,SAAS;AAC3C,eAAY,cAAc,IAAI,IAAI,IAAI;GACtC,MAAM,iBAAqC,SAAS,UAAU,CAAC,KAC5D,GAAG,WAAW;IACb,MAAM,QAAQ;IACd,MAAM;IACP,EACF;AACD,UAAO,kBAAkB,OAAO,eAAe;SAC1C;GACL,MAAM,WAAW,MAAM,KAAK,QAAQ,QAAQ,CAAC,KAAK;GAClD,MAAM,gBAAoC,qBACxC,MAAM,OACL,WAAW,iBAAiB,KAAK,EACnC,CAAC,KAAK,SAAS;IACd,MAAM;IACN,MAAM;IACP,EAAE;GACH,MAAM,mBAAuC,aAAa,MAAM,KAAK,CAAC,KACnE,SAAS;IACR,MAAM;IACN,MAAM;IACP,EACF;AACD,UAAO,CAAC,GAAG,eAAe,GAAG,iBAAiB;GAE9C,MAAM,gBAAoC,SADxB,KAAK,KAAK,SAAS,KAAK,GACmB,CAAC,KAC3D,GAAG,WAAW;IACb,MAAM,QAAQ;IACd,MAAM;IACP,EACF;AACD,UAAO,KAAK,OAAO,cAAc;;AAEnC,SAAO,YAAY,KAAK;GACxB;CAEF,MAAM,WAAW,eAAe;EAC9B,MAAM,QAAQ;AACd,MAAI,UAAU,EACZ,QAAO,UAAU,KAAK,MAAM,EAAE,uBAAuB,IAAI,CAAC;MAE1D,QAAO,UAAU,MAAM,MAAM,CAC1B,OAAO,UAAU,MAAM,GAAG,MAAM,CAAC,CACjC,KAAK,MAAM,EAAE,uBAAuB,IAAI,CAAC;GAE9C;CAEF,MAAM,oBAAoB,KAAa,SAAsC;AAC3E,UAAQ,MAAR;GACE,KAAK,OACH,QAAO,MAAM,KAAK,QAAQ,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,KAAK,IAAI;GACnE,KAAK,OACH,QAAO,MAAM,KAAK,QAAQ,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK,IAAI;GAC9D,KAAK,UACH,QAAO,MAAM,KAAK,KAAK,IAAI;;;CAIjC,MAAM,iBAAiB,EAAE,MAAM,WAA6B;AAE1D,OAAK,QADQ,iBAAiB,MAAM,KAAK,CACvB;;CAGpB,MAAM,eAAe,EAAE,MAAM,WAA6B;EACxD,MAAM,MAAM,iBAAiB,MAAM,KAAK;AACxC,SAAO;GACL,YAAY,IAAI,OAAO,MAAM,YAAY;GACzC,MAAM,GAAG,KAAK;GACd,KAAK,IAAI,OAAO,qBAAqB;GACrC,MAAM,IAAI,QAAQ;GACnB;;AAGH,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}