npm - @element-plus/nightly - Versions diffs - 0.0.20220105 → 0.0.20220109 - Mend

@element-plus/nightly 0.0.20220105 → 0.0.20220109

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 (380) hide show

package/lib/components/time-picker/src/common/picker.vue_vue_type_template_id_1d54be91_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"picker.vue_vue_type_template_id_1d54be91_lang.js","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue?vue&type=template&id=1d54be91&lang.js"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"refPopper\"\n v-model:visible=\"pickerVisible\"\n effect=\"light\"\n pure\n trigger=\"click\"\n v-bind=\"$attrs\"\n append-to-body\n transition=\"el-zoom-in-top\"\n :popper-class=\"`el-picker__popper ${popperClass}`\"\n :popper-options=\"elPopperOptions\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :gpu-acceleration=\"false\"\n :stop-popper-mouse-event=\"false\"\n :hide-after=\"0\"\n @show=\"pickerActualVisible = true\"\n @hide=\"pickerActualVisible = false\"\n >\n <template #default>\n <el-input\n v-if=\"!isRangeInput\"\n :id=\"id\"\n ref=\"inputRef\"\n :model-value=\"displayValue\"\n :name=\"name\"\n :size=\"pickerSize\"\n :disabled=\"pickerDisabled\"\n :placeholder=\"placeholder\"\n class=\"el-date-editor\"\n :class=\"['el-date-editor--' + type, $attrs.class \|\| undefined]\"\n :style=\"$attrs.style \|\| undefined\"\n :readonly=\"!editable \|\| readonly \|\| isDatesPicker \|\| type === 'week'\"\n @input=\"onUserInput\"\n @focus=\"handleFocus\"\n @keydown=\"handleKeydown\"\n @change=\"handleChange\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n @click.stop\n >\n <template #prefix>\n <el-icon\n v-if=\"triggerIcon\"\n class=\"el-input__icon\"\n @click=\"handleFocus\"\n >\n <component :is=\"triggerIcon\"></component>\n </el-icon>\n </template>\n <template #suffix>\n <el-icon\n v-if=\"showClose && clearIcon\"\n class=\"el-input__icon clear-icon\"\n @click=\"onClearIconClick\"\n >\n <component :is=\"clearIcon\" />\n </el-icon>\n </template>\n </el-input>\n <div\n v-else\n ref=\"inputRef\"\n class=\"el-date-editor el-range-editor el-input__inner\"\n :class=\"[\n 'el-date-editor--' + type,\n pickerSize ? `el-range-editor--${pickerSize}` : '',\n pickerDisabled ? 'is-disabled' : '',\n pickerVisible ? 'is-active' : '',\n ]\"\n @click=\"handleFocus\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n @keydown=\"handleKeydown\"\n >\n <el-icon\n v-if=\"triggerIcon\"\n class=\"el-input__icon el-range__icon\"\n @click=\"handleFocus\"\n >\n <component :is=\"triggerIcon\"></component>\n </el-icon>\n <input\n :id=\"id && id[0]\"\n autocomplete=\"off\"\n :name=\"name && name[0]\"\n :placeholder=\"startPlaceholder\"\n :value=\"displayValue && displayValue[0]\"\n :disabled=\"pickerDisabled\"\n :readonly=\"!editable \|\| readonly\"\n class=\"el-range-input\"\n @input=\"handleStartInput\"\n @change=\"handleStartChange\"\n @focus=\"handleFocus\"\n />\n <slot name=\"range-separator\">\n <span class=\"el-range-separator\">{{ rangeSeparator }}</span>\n </slot>\n <input\n :id=\"id && id[1]\"\n autocomplete=\"off\"\n :name=\"name && name[1]\"\n :placeholder=\"endPlaceholder\"\n :value=\"displayValue && displayValue[1]\"\n :disabled=\"pickerDisabled\"\n :readonly=\"!editable \|\| readonly\"\n class=\"el-range-input\"\n @focus=\"handleFocus\"\n @input=\"handleEndInput\"\n @change=\"handleEndChange\"\n />\n <el-icon\n v-if=\"clearIcon\"\n class=\"el-input__icon el-range__close-icon\"\n :class=\"{\n 'el-range__close-icon--hidden': !showClose,\n }\"\n @click=\"onClearIconClick\"\n >\n <component :is=\"clearIcon\" />\n </el-icon>\n </div>\n </template>\n <template #content>\n <slot\n :visible=\"pickerVisible\"\n :actual-visible=\"pickerActualVisible\"\n :parsed-value=\"parsedValue\"\n :format=\"format\"\n :unlink-panels=\"unlinkPanels\"\n :type=\"type\"\n :default-value=\"defaultValue\"\n @pick=\"onPick\"\n @select-range=\"setSelectionRange\"\n @set-picker-option=\"onSetPickerOption\"\n @calendar-change=\"onCalendarChange\"\n @mousedown.stop\n ></slot>\n </template>\n </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n ref,\n computed,\n nextTick,\n inject,\n watch,\n provide,\n unref,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { onClickOutside } from '@vueuse/core'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isEmpty } from '@element-plus/utils/util'\nimport { Clock, Calendar } from '@element-plus/icons-vue'\nimport { timePickerDefaultProps } from './props'\n\nimport type { Dayjs } from 'dayjs'\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { Options } from '@popperjs/core'\n\ninterface PickerOptions {\n isValidValue: (date: Dayjs) => boolean\n handleKeydown: (event: KeyboardEvent) => void\n parseUserInput: (value: Dayjs) => dayjs.Dayjs\n formatToString: (value: Dayjs) => string \| string[]\n getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs\n getDefaultValue: () => Dayjs\n panelReady: boolean\n handleClear: () => void\n}\n\n// Date object and string\nconst dateEquals = function (a: Date \| any, b: Date \| any) {\n const aIsDate = a instanceof Date\n const bIsDate = b instanceof Date\n if (aIsDate && bIsDate) {\n return a.getTime() === b.getTime()\n }\n if (!aIsDate && !bIsDate) {\n return a === b\n }\n return false\n}\n\nconst valueEquals = function (a: Array<Date> \| any, b: Array<Date> \| any) {\n const aIsArray = a instanceof Array\n const bIsArray = b instanceof Array\n if (aIsArray && bIsArray) {\n if (a.length !== b.length) {\n return false\n }\n return (a as Array<Date>).every((item, index) => dateEquals(item, b[index]))\n }\n if (!aIsArray && !bIsArray) {\n return dateEquals(a, b)\n }\n return false\n}\n\nconst parser = function (\n date: Date \| string,\n format: string,\n lang: string\n): Dayjs {\n const day = isEmpty(format)\n ? dayjs(date).locale(lang)\n : dayjs(date, format).locale(lang)\n return day.isValid() ? day : undefined\n}\n\nconst formatter = function (date: number \| Date, format: string, lang: string) {\n return isEmpty(format) ? date : dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n name: 'Picker',\n components: {\n ElInput,\n ElTooltip,\n ElIcon,\n },\n props: timePickerDefaultProps,\n emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'],\n setup(props, ctx) {\n const { lang } = useLocale()\n\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n const elPopperOptions = inject('ElPopperOptions', {} as Options)\n\n const refPopper = ref<InstanceType<typeof ElTooltip>>()\n const inputRef = ref<HTMLElement \| ComponentPublicInstance>()\n const pickerVisible = ref(false)\n const pickerActualVisible = ref(false)\n const valueOnOpen = ref(null)\n\n watch(pickerVisible, (val) => {\n if (!val) {\n userInput.value = null\n nextTick(() => {\n emitChange(props.modelValue)\n })\n ctx.emit('blur')\n blurInput()\n props.validateEvent && elFormItem.validate?.('blur')\n } else {\n valueOnOpen.value = props.modelValue\n }\n })\n const emitChange = (val, isClear?: boolean) => {\n // determine user real change only\n if (isClear \|\| !valueEquals(val, valueOnOpen.value)) {\n ctx.emit('change', val)\n props.validateEvent && elFormItem.validate?.('change')\n }\n }\n const emitInput = (val) => {\n if (!valueEquals(props.modelValue, val)) {\n let formatValue\n if (Array.isArray(val)) {\n formatValue = val.map((_) =>\n formatter(_, props.valueFormat, lang.value)\n )\n } else if (val) {\n formatValue = formatter(val, props.valueFormat, lang.value)\n }\n ctx.emit('update:modelValue', val ? formatValue : val, lang.value)\n }\n }\n const refInput = computed<HTMLInputElement[]>(() => {\n if (inputRef.value) {\n const _r = isRangeInput.value\n ? inputRef.value\n : (inputRef.value as any as ComponentPublicInstance).$el\n return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))\n }\n return []\n })\n const refStartInput = computed(() => {\n return refInput?.value[0]\n })\n const refEndInput = computed(() => {\n return refInput?.value[1]\n })\n const setSelectionRange = (start, end, pos) => {\n const _inputs = refInput.value\n if (!_inputs.length) return\n if (!pos \|\| pos === 'min') {\n _inputs[0].setSelectionRange(start, end)\n _inputs[0].focus()\n } else if (pos === 'max') {\n _inputs[1].setSelectionRange(start, end)\n _inputs[1].focus()\n }\n }\n const onPick = (date: any = '', visible = false) => {\n pickerVisible.value = visible\n let result\n if (Array.isArray(date)) {\n result = date.map((_) => _.toDate())\n } else {\n // clear btn emit null\n result = date ? date.toDate() : date\n }\n userInput.value = null\n emitInput(result)\n }\n\n const focus = (focusStartInput = true) => {\n let input = refStartInput.value\n if (!focusStartInput && isRangeInput.value) {\n input = refEndInput.value\n }\n if (input) {\n input.focus()\n }\n }\n\n const handleFocus = (e) => {\n if (props.readonly \|\| pickerDisabled.value \|\| pickerVisible.value) return\n pickerVisible.value = true\n ctx.emit('focus', e)\n }\n\n const handleBlur = () => {\n refPopper.value?.onClose()\n blurInput()\n }\n\n const pickerDisabled = computed(() => {\n return props.disabled \|\| elForm.disabled\n })\n\n const parsedValue = computed(() => {\n let result\n if (valueIsEmpty.value) {\n if (pickerOptions.value.getDefaultValue) {\n result = pickerOptions.value.getDefaultValue()\n }\n } else {\n if (Array.isArray(props.modelValue)) {\n result = props.modelValue.map((_) =>\n parser(_, props.valueFormat, lang.value)\n )\n } else {\n result = parser(props.modelValue, props.valueFormat, lang.value)\n }\n }\n\n if (pickerOptions.value.getRangeAvailableTime) {\n const availableResult =\n pickerOptions.value.getRangeAvailableTime(result)\n if (!isEqual(availableResult, result)) {\n result = availableResult\n emitInput(\n Array.isArray(result)\n ? result.map((_) => _.toDate())\n : result.toDate()\n )\n }\n }\n if (Array.isArray(result) && result.some((_) => !_)) {\n result = []\n }\n return result\n })\n\n const displayValue = computed(() => {\n if (!pickerOptions.value.panelReady) return\n const formattedValue = formatDayjsToString(parsedValue.value)\n if (Array.isArray(userInput.value)) {\n return [\n userInput.value[0] \|\| (formattedValue && formattedValue[0]) \|\| '',\n userInput.value[1] \|\| (formattedValue && formattedValue[1]) \|\| '',\n ]\n } else if (userInput.value !== null) {\n return userInput.value\n }\n if (!isTimePicker.value && valueIsEmpty.value) return\n if (!pickerVisible.value && valueIsEmpty.value) return\n if (formattedValue) {\n return isDatesPicker.value\n ? (formattedValue as Array<string>).join(', ')\n : formattedValue\n }\n return ''\n })\n\n const isTimeLikePicker = computed(() => props.type.includes('time'))\n\n const isTimePicker = computed(() => props.type.startsWith('time'))\n\n const isDatesPicker = computed(() => props.type === 'dates')\n\n const triggerIcon = computed(\n () => props.prefixIcon \|\| (isTimeLikePicker.value ? Clock : Calendar)\n )\n\n const showClose = ref(false)\n\n const onClearIconClick = (event) => {\n if (props.readonly \|\| pickerDisabled.value) return\n if (showClose.value) {\n event.stopPropagation()\n emitInput(null)\n emitChange(null, true)\n showClose.value = false\n pickerVisible.value = false\n pickerOptions.value.handleClear && pickerOptions.value.handleClear()\n }\n }\n const valueIsEmpty = computed(() => {\n return (\n !props.modelValue \|\|\n (Array.isArray(props.modelValue) && !props.modelValue.length)\n )\n })\n const onMouseEnter = () => {\n if (props.readonly \|\| pickerDisabled.value) return\n if (!valueIsEmpty.value && props.clearable) {\n showClose.value = true\n }\n }\n const onMouseLeave = () => {\n showClose.value = false\n }\n const isRangeInput = computed(() => {\n return props.type.indexOf('range') > -1\n })\n\n const pickerSize = useSize()\n\n const popperPaneRef = computed(() => {\n return refPopper.value?.popperRef?.contentRef\n })\n\n const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n const actualInputRef = computed(() => {\n if (unref(isRangeInput)) {\n return unref(inputRef)\n }\n\n return (unref(inputRef) as ComponentPublicInstance)?.$el\n })\n\n onClickOutside(actualInputRef, (e: PointerEvent) => {\n const unrefedPopperEl = unref(popperEl)\n const inputEl = unref(actualInputRef)\n if (\n (unrefedPopperEl &&\n (e.target === unrefedPopperEl \|\|\n e.composedPath().includes(unrefedPopperEl))) \|\|\n e.target === inputEl \|\|\n e.composedPath().includes(inputEl)\n )\n return\n pickerVisible.value = false\n })\n\n const userInput = ref(null)\n\n const handleChange = () => {\n if (userInput.value) {\n const value = parseUserInputToDayjs(displayValue.value)\n if (value) {\n if (isValidValue(value)) {\n emitInput(\n Array.isArray(value)\n ? value.map((_) => _.toDate())\n : value.toDate()\n )\n userInput.value = null\n }\n }\n }\n if (userInput.value === '') {\n emitInput(null)\n emitChange(null)\n userInput.value = null\n }\n }\n\n const blurInput = () => {\n refInput.value.forEach((input) => input.blur())\n }\n\n const parseUserInputToDayjs = (value) => {\n if (!value) return null\n return pickerOptions.value.parseUserInput(value)\n }\n\n const formatDayjsToString = (value) => {\n if (!value) return null\n return pickerOptions.value.formatToString(value)\n }\n\n const isValidValue = (value) => {\n return pickerOptions.value.isValidValue(value)\n }\n\n const handleKeydown = (event) => {\n const code = event.code\n\n if (code === EVENT_CODE.esc) {\n pickerVisible.value = false\n event.stopPropagation()\n return\n }\n\n if (code === EVENT_CODE.tab) {\n if (!isRangeInput.value) {\n handleChange()\n pickerVisible.value = false\n event.stopPropagation()\n } else {\n // user may change focus between two input\n setTimeout(() => {\n if (refInput.value.indexOf(document.activeElement) === -1) {\n pickerVisible.value = false\n blurInput()\n }\n }, 0)\n }\n return\n }\n\n if (code === EVENT_CODE.enter \|\| code === EVENT_CODE.numpadEnter) {\n if (\n userInput.value === null \|\|\n userInput.value === '' \|\|\n isValidValue(parseUserInputToDayjs(displayValue.value))\n ) {\n handleChange()\n pickerVisible.value = false\n }\n event.stopPropagation()\n return\n }\n\n // if user is typing, do not let picker handle key input\n if (userInput.value) {\n event.stopPropagation()\n return\n }\n\n if (pickerOptions.value.handleKeydown) {\n pickerOptions.value.handleKeydown(event)\n }\n }\n const onUserInput = (e) => {\n userInput.value = e\n }\n\n const handleStartInput = (event) => {\n if (userInput.value) {\n userInput.value = [event.target.value, userInput.value[1]]\n } else {\n userInput.value = [event.target.value, null]\n }\n }\n\n const handleEndInput = (event) => {\n if (userInput.value) {\n userInput.value = [userInput.value[0], event.target.value]\n } else {\n userInput.value = [null, event.target.value]\n }\n }\n\n const handleStartChange = () => {\n const value = parseUserInputToDayjs(userInput.value && userInput.value[0])\n if (value && value.isValid()) {\n userInput.value = [formatDayjsToString(value), displayValue.value[1]]\n const newValue = [value, parsedValue.value && parsedValue.value[1]]\n if (isValidValue(newValue)) {\n emitInput(newValue)\n userInput.value = null\n }\n }\n }\n\n const handleEndChange = () => {\n const value = parseUserInputToDayjs(userInput.value && userInput.value[1])\n if (value && value.isValid()) {\n userInput.value = [displayValue.value[0], formatDayjsToString(value)]\n const newValue = [parsedValue.value && parsedValue.value[0], value]\n if (isValidValue(newValue)) {\n emitInput(newValue)\n userInput.value = null\n }\n }\n }\n\n const pickerOptions = ref<Partial<PickerOptions>>({})\n const onSetPickerOption = <T extends keyof PickerOptions>(\n e: [T, PickerOptions[T]]\n ) => {\n pickerOptions.value[e[0]] = e[1]\n pickerOptions.value.panelReady = true\n }\n\n const onCalendarChange = (e) => {\n ctx.emit('calendar-change', e)\n }\n\n provide('EP_PICKER_BASE', {\n props,\n })\n\n return {\n // injected popper options\n elPopperOptions,\n\n isDatesPicker,\n handleEndChange,\n handleStartChange,\n handleStartInput,\n handleEndInput,\n onUserInput,\n handleChange,\n handleKeydown,\n popperPaneRef,\n onClickOutside,\n pickerSize,\n isRangeInput,\n onMouseLeave,\n onMouseEnter,\n onClearIconClick,\n showClose,\n triggerIcon,\n onPick,\n handleFocus,\n handleBlur,\n pickerVisible,\n pickerActualVisible,\n displayValue,\n parsedValue,\n setSelectionRange,\n refPopper,\n inputRef,\n pickerDisabled,\n onSetPickerOption,\n onCalendarChange,\n focus,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;0BAgGqB;;;;;;;;wBA/FnB;IACE;IACQ;;UACF;IACN;IACA;;IAEA,kBAAA;IACA;IACC;IACA;IACA;IACA,kBAAgB;IAChB,gCAA8B;IAC9B;IACA;;;;QAKU;;;YACN,EAAE;;yBAES;;;yCAGa;;iBAEpB;iBAEC;uBACM;;;uBAGF;YACT,QAAM;;2BAEI;;;YAGA;;;;4BAGF,EAAC;;;;;;;;;;;;;;;2BAUA;;;2EAEU;;;;;;;;;;;oCAOd;;;;;;mBAOA;;;0EAGI;;aAGF;;;kBACN,OAAM;;;;;;;;;;;;uBAQC,aAAQ;mDACe;;;cAG7B,WAAW;;cAEX,OAAK;;qBAEA;;;;;;kBAMD,WAAM;;;;;;;mBAON;;;yEAGI;;aAGH;;;;;;;;;;;;;;;;;;;QAcP;;QAEA;;;;;;"}
1	+ {"version":3,"file":"picker.vue_vue_type_template_id_1d54be91_lang.js","sources":["../../../../../../../packages/components/time-picker/src/common/picker.vue?vue&type=template&id=1d54be91&lang.js"],"sourcesContent":["<template>\n <el-tooltip\n ref=\"refPopper\"\n v-model:visible=\"pickerVisible\"\n effect=\"light\"\n pure\n trigger=\"click\"\n v-bind=\"$attrs\"\n append-to-body\n transition=\"el-zoom-in-top\"\n :popper-class=\"`el-picker__popper ${popperClass}`\"\n :popper-options=\"elPopperOptions\"\n :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n :gpu-acceleration=\"false\"\n :stop-popper-mouse-event=\"false\"\n :hide-after=\"0\"\n persistent\n @show=\"pickerActualVisible = true\"\n @hide=\"pickerActualVisible = false\"\n >\n <template #default>\n <el-input\n v-if=\"!isRangeInput\"\n :id=\"id\"\n ref=\"inputRef\"\n :model-value=\"displayValue\"\n :name=\"name\"\n :size=\"pickerSize\"\n :disabled=\"pickerDisabled\"\n :placeholder=\"placeholder\"\n class=\"el-date-editor\"\n :class=\"['el-date-editor--' + type, $attrs.class \|\| undefined]\"\n :style=\"$attrs.style \|\| undefined\"\n :readonly=\"!editable \|\| readonly \|\| isDatesPicker \|\| type === 'week'\"\n @input=\"onUserInput\"\n @focus=\"handleFocus\"\n @keydown=\"handleKeydown\"\n @change=\"handleChange\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n @click.stop\n >\n <template #prefix>\n <el-icon\n v-if=\"triggerIcon\"\n class=\"el-input__icon\"\n @click=\"handleFocus\"\n >\n <component :is=\"triggerIcon\"></component>\n </el-icon>\n </template>\n <template #suffix>\n <el-icon\n v-if=\"showClose && clearIcon\"\n class=\"el-input__icon clear-icon\"\n @click=\"onClearIconClick\"\n >\n <component :is=\"clearIcon\" />\n </el-icon>\n </template>\n </el-input>\n <div\n v-else\n ref=\"inputRef\"\n class=\"el-date-editor el-range-editor el-input__inner\"\n :class=\"[\n 'el-date-editor--' + type,\n pickerSize ? `el-range-editor--${pickerSize}` : '',\n pickerDisabled ? 'is-disabled' : '',\n pickerVisible ? 'is-active' : '',\n ]\"\n @click=\"handleFocus\"\n @mouseenter=\"onMouseEnter\"\n @mouseleave=\"onMouseLeave\"\n @keydown=\"handleKeydown\"\n >\n <el-icon\n v-if=\"triggerIcon\"\n class=\"el-input__icon el-range__icon\"\n @click=\"handleFocus\"\n >\n <component :is=\"triggerIcon\"></component>\n </el-icon>\n <input\n :id=\"id && id[0]\"\n autocomplete=\"off\"\n :name=\"name && name[0]\"\n :placeholder=\"startPlaceholder\"\n :value=\"displayValue && displayValue[0]\"\n :disabled=\"pickerDisabled\"\n :readonly=\"!editable \|\| readonly\"\n class=\"el-range-input\"\n @input=\"handleStartInput\"\n @change=\"handleStartChange\"\n @focus=\"handleFocus\"\n />\n <slot name=\"range-separator\">\n <span class=\"el-range-separator\">{{ rangeSeparator }}</span>\n </slot>\n <input\n :id=\"id && id[1]\"\n autocomplete=\"off\"\n :name=\"name && name[1]\"\n :placeholder=\"endPlaceholder\"\n :value=\"displayValue && displayValue[1]\"\n :disabled=\"pickerDisabled\"\n :readonly=\"!editable \|\| readonly\"\n class=\"el-range-input\"\n @focus=\"handleFocus\"\n @input=\"handleEndInput\"\n @change=\"handleEndChange\"\n />\n <el-icon\n v-if=\"clearIcon\"\n class=\"el-input__icon el-range__close-icon\"\n :class=\"{\n 'el-range__close-icon--hidden': !showClose,\n }\"\n @click=\"onClearIconClick\"\n >\n <component :is=\"clearIcon\" />\n </el-icon>\n </div>\n </template>\n <template #content>\n <slot\n :visible=\"pickerVisible\"\n :actual-visible=\"pickerActualVisible\"\n :parsed-value=\"parsedValue\"\n :format=\"format\"\n :unlink-panels=\"unlinkPanels\"\n :type=\"type\"\n :default-value=\"defaultValue\"\n @pick=\"onPick\"\n @select-range=\"setSelectionRange\"\n @set-picker-option=\"onSetPickerOption\"\n @calendar-change=\"onCalendarChange\"\n @mousedown.stop\n ></slot>\n </template>\n </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n ref,\n computed,\n nextTick,\n inject,\n watch,\n provide,\n unref,\n} from 'vue'\nimport dayjs from 'dayjs'\nimport isEqual from 'lodash/isEqual'\nimport { onClickOutside } from '@vueuse/core'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport ElInput from '@element-plus/components/input'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isEmpty } from '@element-plus/utils/util'\nimport { Clock, Calendar } from '@element-plus/icons-vue'\nimport { timePickerDefaultProps } from './props'\n\nimport type { Dayjs } from 'dayjs'\nimport type { ComponentPublicInstance } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { Options } from '@popperjs/core'\n\ninterface PickerOptions {\n isValidValue: (date: Dayjs) => boolean\n handleKeydown: (event: KeyboardEvent) => void\n parseUserInput: (value: Dayjs) => dayjs.Dayjs\n formatToString: (value: Dayjs) => string \| string[]\n getRangeAvailableTime: (date: Dayjs) => dayjs.Dayjs\n getDefaultValue: () => Dayjs\n panelReady: boolean\n handleClear: () => void\n}\n\n// Date object and string\nconst dateEquals = function (a: Date \| any, b: Date \| any) {\n const aIsDate = a instanceof Date\n const bIsDate = b instanceof Date\n if (aIsDate && bIsDate) {\n return a.getTime() === b.getTime()\n }\n if (!aIsDate && !bIsDate) {\n return a === b\n }\n return false\n}\n\nconst valueEquals = function (a: Array<Date> \| any, b: Array<Date> \| any) {\n const aIsArray = a instanceof Array\n const bIsArray = b instanceof Array\n if (aIsArray && bIsArray) {\n if (a.length !== b.length) {\n return false\n }\n return (a as Array<Date>).every((item, index) => dateEquals(item, b[index]))\n }\n if (!aIsArray && !bIsArray) {\n return dateEquals(a, b)\n }\n return false\n}\n\nconst parser = function (\n date: Date \| string,\n format: string,\n lang: string\n): Dayjs {\n const day =\n isEmpty(format) \|\| format === 'x'\n ? dayjs(date).locale(lang)\n : dayjs(date, format).locale(lang)\n return day.isValid() ? day : undefined\n}\n\nconst formatter = function (date: number \| Date, format: string, lang: string) {\n if (isEmpty(format)) return date\n if (format === 'x') return +date\n return dayjs(date).locale(lang).format(format)\n}\n\nexport default defineComponent({\n name: 'Picker',\n components: {\n ElInput,\n ElTooltip,\n ElIcon,\n },\n props: timePickerDefaultProps,\n emits: ['update:modelValue', 'change', 'focus', 'blur', 'calendar-change'],\n setup(props, ctx) {\n const { lang } = useLocale()\n\n const elForm = inject(elFormKey, {} as ElFormContext)\n const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n const elPopperOptions = inject('ElPopperOptions', {} as Options)\n\n const refPopper = ref<InstanceType<typeof ElTooltip>>()\n const inputRef = ref<HTMLElement \| ComponentPublicInstance>()\n const pickerVisible = ref(false)\n const pickerActualVisible = ref(false)\n const valueOnOpen = ref(null)\n\n watch(pickerVisible, (val) => {\n if (!val) {\n userInput.value = null\n nextTick(() => {\n emitChange(props.modelValue)\n })\n ctx.emit('blur')\n blurInput()\n props.validateEvent && elFormItem.validate?.('blur')\n } else {\n valueOnOpen.value = props.modelValue\n }\n })\n const emitChange = (val, isClear?: boolean) => {\n // determine user real change only\n if (isClear \|\| !valueEquals(val, valueOnOpen.value)) {\n ctx.emit('change', val)\n props.validateEvent && elFormItem.validate?.('change')\n }\n }\n const emitInput = (val) => {\n if (!valueEquals(props.modelValue, val)) {\n let formatValue\n if (Array.isArray(val)) {\n formatValue = val.map((_) =>\n formatter(_, props.valueFormat, lang.value)\n )\n } else if (val) {\n formatValue = formatter(val, props.valueFormat, lang.value)\n }\n ctx.emit('update:modelValue', val ? formatValue : val, lang.value)\n }\n }\n const refInput = computed<HTMLInputElement[]>(() => {\n if (inputRef.value) {\n const _r = isRangeInput.value\n ? inputRef.value\n : (inputRef.value as any as ComponentPublicInstance).$el\n return Array.from<HTMLInputElement>(_r.querySelectorAll('input'))\n }\n return []\n })\n const refStartInput = computed(() => {\n return refInput?.value[0]\n })\n const refEndInput = computed(() => {\n return refInput?.value[1]\n })\n const setSelectionRange = (start, end, pos) => {\n const _inputs = refInput.value\n if (!_inputs.length) return\n if (!pos \|\| pos === 'min') {\n _inputs[0].setSelectionRange(start, end)\n _inputs[0].focus()\n } else if (pos === 'max') {\n _inputs[1].setSelectionRange(start, end)\n _inputs[1].focus()\n }\n }\n const onPick = (date: any = '', visible = false) => {\n pickerVisible.value = visible\n let result\n if (Array.isArray(date)) {\n result = date.map((_) => _.toDate())\n } else {\n // clear btn emit null\n result = date ? date.toDate() : date\n }\n userInput.value = null\n emitInput(result)\n }\n\n const focus = (focusStartInput = true) => {\n let input = refStartInput.value\n if (!focusStartInput && isRangeInput.value) {\n input = refEndInput.value\n }\n if (input) {\n input.focus()\n }\n }\n\n const handleFocus = (e) => {\n if (props.readonly \|\| pickerDisabled.value \|\| pickerVisible.value) return\n pickerVisible.value = true\n ctx.emit('focus', e)\n }\n\n const handleBlur = () => {\n refPopper.value?.onClose()\n blurInput()\n }\n\n const pickerDisabled = computed(() => {\n return props.disabled \|\| elForm.disabled\n })\n\n const parsedValue = computed(() => {\n let result\n if (valueIsEmpty.value) {\n if (pickerOptions.value.getDefaultValue) {\n result = pickerOptions.value.getDefaultValue()\n }\n } else {\n if (Array.isArray(props.modelValue)) {\n result = props.modelValue.map((_) =>\n parser(_, props.valueFormat, lang.value)\n )\n } else {\n result = parser(props.modelValue, props.valueFormat, lang.value)\n }\n }\n\n if (pickerOptions.value.getRangeAvailableTime) {\n const availableResult =\n pickerOptions.value.getRangeAvailableTime(result)\n if (!isEqual(availableResult, result)) {\n result = availableResult\n emitInput(\n Array.isArray(result)\n ? result.map((_) => _.toDate())\n : result.toDate()\n )\n }\n }\n if (Array.isArray(result) && result.some((_) => !_)) {\n result = []\n }\n return result\n })\n\n const displayValue = computed(() => {\n if (!pickerOptions.value.panelReady) return\n const formattedValue = formatDayjsToString(parsedValue.value)\n if (Array.isArray(userInput.value)) {\n return [\n userInput.value[0] \|\| (formattedValue && formattedValue[0]) \|\| '',\n userInput.value[1] \|\| (formattedValue && formattedValue[1]) \|\| '',\n ]\n } else if (userInput.value !== null) {\n return userInput.value\n }\n if (!isTimePicker.value && valueIsEmpty.value) return\n if (!pickerVisible.value && valueIsEmpty.value) return\n if (formattedValue) {\n return isDatesPicker.value\n ? (formattedValue as Array<string>).join(', ')\n : formattedValue\n }\n return ''\n })\n\n const isTimeLikePicker = computed(() => props.type.includes('time'))\n\n const isTimePicker = computed(() => props.type.startsWith('time'))\n\n const isDatesPicker = computed(() => props.type === 'dates')\n\n const triggerIcon = computed(\n () => props.prefixIcon \|\| (isTimeLikePicker.value ? Clock : Calendar)\n )\n\n const showClose = ref(false)\n\n const onClearIconClick = (event) => {\n if (props.readonly \|\| pickerDisabled.value) return\n if (showClose.value) {\n event.stopPropagation()\n emitInput(null)\n emitChange(null, true)\n showClose.value = false\n pickerVisible.value = false\n pickerOptions.value.handleClear && pickerOptions.value.handleClear()\n }\n }\n const valueIsEmpty = computed(() => {\n return (\n !props.modelValue \|\|\n (Array.isArray(props.modelValue) && !props.modelValue.length)\n )\n })\n const onMouseEnter = () => {\n if (props.readonly \|\| pickerDisabled.value) return\n if (!valueIsEmpty.value && props.clearable) {\n showClose.value = true\n }\n }\n const onMouseLeave = () => {\n showClose.value = false\n }\n const isRangeInput = computed(() => {\n return props.type.indexOf('range') > -1\n })\n\n const pickerSize = useSize()\n\n const popperPaneRef = computed(() => {\n return refPopper.value?.popperRef?.contentRef\n })\n\n const popperEl = computed(() => unref(refPopper)?.popperRef?.contentRef)\n const actualInputRef = computed(() => {\n if (unref(isRangeInput)) {\n return unref(inputRef)\n }\n\n return (unref(inputRef) as ComponentPublicInstance)?.$el\n })\n\n onClickOutside(actualInputRef, (e: PointerEvent) => {\n const unrefedPopperEl = unref(popperEl)\n const inputEl = unref(actualInputRef)\n if (\n (unrefedPopperEl &&\n (e.target === unrefedPopperEl \|\|\n e.composedPath().includes(unrefedPopperEl))) \|\|\n e.target === inputEl \|\|\n e.composedPath().includes(inputEl)\n )\n return\n pickerVisible.value = false\n })\n\n const userInput = ref(null)\n\n const handleChange = () => {\n if (userInput.value) {\n const value = parseUserInputToDayjs(displayValue.value)\n if (value) {\n if (isValidValue(value)) {\n emitInput(\n Array.isArray(value)\n ? value.map((_) => _.toDate())\n : value.toDate()\n )\n userInput.value = null\n }\n }\n }\n if (userInput.value === '') {\n emitInput(null)\n emitChange(null)\n userInput.value = null\n }\n }\n\n const blurInput = () => {\n refInput.value.forEach((input) => input.blur())\n }\n\n const parseUserInputToDayjs = (value) => {\n if (!value) return null\n return pickerOptions.value.parseUserInput(value)\n }\n\n const formatDayjsToString = (value) => {\n if (!value) return null\n return pickerOptions.value.formatToString(value)\n }\n\n const isValidValue = (value) => {\n return pickerOptions.value.isValidValue(value)\n }\n\n const handleKeydown = (event) => {\n const code = event.code\n\n if (code === EVENT_CODE.esc) {\n pickerVisible.value = false\n event.stopPropagation()\n return\n }\n\n if (code === EVENT_CODE.tab) {\n if (!isRangeInput.value) {\n handleChange()\n pickerVisible.value = false\n event.stopPropagation()\n } else {\n // user may change focus between two input\n setTimeout(() => {\n if (refInput.value.indexOf(document.activeElement) === -1) {\n pickerVisible.value = false\n blurInput()\n }\n }, 0)\n }\n return\n }\n\n if (code === EVENT_CODE.enter \|\| code === EVENT_CODE.numpadEnter) {\n if (\n userInput.value === null \|\|\n userInput.value === '' \|\|\n isValidValue(parseUserInputToDayjs(displayValue.value))\n ) {\n handleChange()\n pickerVisible.value = false\n }\n event.stopPropagation()\n return\n }\n\n // if user is typing, do not let picker handle key input\n if (userInput.value) {\n event.stopPropagation()\n return\n }\n\n if (pickerOptions.value.handleKeydown) {\n pickerOptions.value.handleKeydown(event)\n }\n }\n const onUserInput = (e) => {\n userInput.value = e\n }\n\n const handleStartInput = (event) => {\n if (userInput.value) {\n userInput.value = [event.target.value, userInput.value[1]]\n } else {\n userInput.value = [event.target.value, null]\n }\n }\n\n const handleEndInput = (event) => {\n if (userInput.value) {\n userInput.value = [userInput.value[0], event.target.value]\n } else {\n userInput.value = [null, event.target.value]\n }\n }\n\n const handleStartChange = () => {\n const value = parseUserInputToDayjs(userInput.value && userInput.value[0])\n if (value && value.isValid()) {\n userInput.value = [formatDayjsToString(value), displayValue.value[1]]\n const newValue = [value, parsedValue.value && parsedValue.value[1]]\n if (isValidValue(newValue)) {\n emitInput(newValue)\n userInput.value = null\n }\n }\n }\n\n const handleEndChange = () => {\n const value = parseUserInputToDayjs(userInput.value && userInput.value[1])\n if (value && value.isValid()) {\n userInput.value = [displayValue.value[0], formatDayjsToString(value)]\n const newValue = [parsedValue.value && parsedValue.value[0], value]\n if (isValidValue(newValue)) {\n emitInput(newValue)\n userInput.value = null\n }\n }\n }\n\n const pickerOptions = ref<Partial<PickerOptions>>({})\n const onSetPickerOption = <T extends keyof PickerOptions>(\n e: [T, PickerOptions[T]]\n ) => {\n pickerOptions.value[e[0]] = e[1]\n pickerOptions.value.panelReady = true\n }\n\n const onCalendarChange = (e) => {\n ctx.emit('calendar-change', e)\n }\n\n provide('EP_PICKER_BASE', {\n props,\n })\n\n return {\n // injected popper options\n elPopperOptions,\n\n isDatesPicker,\n handleEndChange,\n handleStartChange,\n handleStartInput,\n handleEndInput,\n onUserInput,\n handleChange,\n handleKeydown,\n popperPaneRef,\n onClickOutside,\n pickerSize,\n isRangeInput,\n onMouseLeave,\n onMouseEnter,\n onClearIconClick,\n showClose,\n triggerIcon,\n onPick,\n handleFocus,\n handleBlur,\n pickerVisible,\n pickerActualVisible,\n displayValue,\n parsedValue,\n setSelectionRange,\n refPopper,\n inputRef,\n pickerDisabled,\n onSetPickerOption,\n onCalendarChange,\n focus,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;0BAiGqB;;;;;;;;wBAhGnB;IACE;IACQ;;UACF;IACN;IACA;;IAEA,kBAAA;IACA;IACC;IACA;IACA;IACA;IACA,gCAA8B;IAC9B,cAAY,CAAC;IACd;IACC;;;;QAKU;;;YACN,EAAE;;yBAES;;;yCAGa;;iBAEpB;iBAEC;uBACM;;;uBAGF;YACT,QAAM;;2BAEI;;;YAGA;;;;4BAGF,EAAC;;;;;;;;;;;;;;;2BAUA;;;2EAEU;;;;;;;;;;;oCAOd;;;;;;mBAOA;;;0EAGI;;aAGF;;;kBACN,OAAM;;;;;;;;;;;;uBAQC,aAAQ;mDACe;;;cAG7B,WAAW;;cAEX,OAAK;;qBAEA;;;;;;kBAMD,WAAM;;;;;;;mBAON;;;yEAGI;;aAGH;;;;;;;;;;;;;;;;;;;QAcP;;QAEA;;;;;;"}

package/lib/components/time-picker/src/time-picker.d.ts CHANGED Viewed

@@ -141,8 +141,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: string;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;
@@ -176,8 +176,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: string;
     disabled: boolean;
-    name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
+    name: string | unknown[];
     editable: boolean;
     popperOptions: Partial<import("@popperjs/core").Options>;
     popperClass: string;

package/lib/components/transfer/src/transfer-panel.vue.d.ts CHANGED Viewed

@@ -25,9 +25,8 @@ declare const _default: import("vue").DefineComponent<{
     inputHover: import("vue").Ref<boolean>;
     checkChangeByUser: import("vue").Ref<boolean>;
     hasNoMatch: import("vue").ComputedRef<boolean>;
-    inputIcon: import("vue").ComputedRef<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>>;
+    SearchIcon: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{}>, {}>;
     hasFooter: import("vue").ComputedRef<boolean>;
-    clearQuery: () => void;
     t: import("element-plus/es/hooks").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "checked-change"[], "checked-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     data?: unknown;

package/lib/components/transfer/src/transfer-panel.vue_vue_type_script_lang.js CHANGED Viewed

@@ -5,11 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
 require('../../../hooks/index.js');
 var index = require('../../checkbox/index.js');
-var index$2 = require('../../icon/index.js');
 var index$1 = require('../../input/index.js');
 var iconsVue = require('@element-plus/icons-vue');
 var useCheck = require('./useCheck.js');
-var index$3 = require('../../../hooks/use-locale/index.js');
+var index$2 = require('../../../hooks/use-locale/index.js');
 var script = vue.defineComponent({
   name: "ElTransferPanel",
@@ -17,13 +16,12 @@ var script = vue.defineComponent({
     ElCheckboxGroup: index.ElCheckboxGroup,
     ElCheckbox: index.ElCheckbox,
     ElInput: index$1.ElInput,
-    ElIcon: index$2.ElIcon,
     OptionContent: ({ option }) => option
   },
   props: useCheck.useCheckProps,
   emits: [useCheck.CHECKED_CHANGE_EVENT],
   setup(props, { slots }) {
-    const { t } = index$3.useLocale();
+    const { t } = index$2.useLocale();
     const panelState = vue.reactive({
       checked: [],
       allChecked: false,
@@ -43,15 +41,7 @@ var script = vue.defineComponent({
     const hasNoMatch = vue.computed(() => {
       return panelState.query.length > 0 && filteredData.value.length === 0;
     });
-    const inputIcon = vue.computed(() => {
-      return panelState.query.length > 0 && panelState.inputHover ? iconsVue.CircleClose : iconsVue.Search;
-    });
     const hasFooter = vue.computed(() => !!slots.default()[0].children.length);
-    const clearQuery = () => {
-      if (inputIcon.value === iconsVue.CircleClose) {
-        panelState.query = "";
-      }
-    };
     const { checked, allChecked, query, inputHover, checkChangeByUser } = vue.toRefs(panelState);
     return {
       labelProp,
@@ -67,9 +57,8 @@ var script = vue.defineComponent({
       inputHover,
       checkChangeByUser,
       hasNoMatch,
-      inputIcon,
+      SearchIcon: iconsVue.Search,
       hasFooter,
-      clearQuery,
       t
     };
   }

package/lib/components/transfer/src/transfer-panel.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"transfer-panel.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n <div class=\"el-transfer-panel\">\n <p class=\"el-transfer-panel__header\">\n <el-checkbox\n v-model=\"allChecked\"\n :indeterminate=\"isIndeterminate\"\n @change=\"handleAllCheckedChange\"\n >\n {{ title }}\n <span>{{ checkedSummary }}</span>\n </el-checkbox>\n </p>\n\n <div\n :class=\"['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']\"\n >\n <el-input\n v-if=\"filterable\"\n v-model=\"query\"\n class=\"el-transfer-panel__filter\"\n size=\"~~small~~\"\n :placeholder=\"placeholder\"\n @mouseenter=\"inputHover = true\"\n @mouseleave=\"inputHover = false\"\n >\n ~~<template #prefix>\n <el-icon v-if=\"inputIcon\" class=\"el-input__icon\" @click=\"clearQuery\">\n <component :is=\"inputIcon\" />\n </el-icon>\n </template>\n~~ </el-input>\n <el-checkbox-group\n v-show=\"!hasNoMatch && data.length > 0\"\n v-model=\"checked\"\n :class=\"{ 'is-filterable': filterable }\"\n class=\"el-transfer-panel__list\"\n >\n <el-checkbox\n v-for=\"item in filteredData\"\n :key=\"item[keyProp]\"\n class=\"el-transfer-panel__item\"\n :label=\"item[keyProp]\"\n :disabled=\"item[disabledProp]\"\n >\n <option-content :option=\"optionRender(item)\" />\n </el-checkbox>\n </el-checkbox-group>\n <p\n v-show=\"hasNoMatch \|\| data.length === 0\"\n class=\"el-transfer-panel__empty\"\n >\n {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n </p>\n </div>\n <p v-if=\"hasFooter\" class=\"el-transfer-panel__footer\">\n <slot></slot>\n </p>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, reactive, toRefs } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport ~~ElIcon from '@element-plus/components/icon'\nimport~~ ElInput from '@element-plus/components/input'\nimport { ~~CircleClose,~~ Search } from '@element-plus/icons-vue'\nimport { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'\n\nexport default defineComponent({\n name: 'ElTransferPanel',\n\n components: {\n ElCheckboxGroup,\n ElCheckbox,\n ElInput,\n ~~ElIcon,\n~~ OptionContent: ({ option }) => option,\n },\n\n props: useCheckProps,\n\n emits: [CHECKED_CHANGE_EVENT],\n\n setup(props, { slots }) {\n const { t } = useLocale()\n\n const panelState = reactive({\n checked: [],\n allChecked: false,\n query: '',\n inputHover: false,\n checkChangeByUser: true,\n })\n\n const {\n labelProp,\n keyProp,\n disabledProp,\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n } = useCheck(props, panelState)\n\n const hasNoMatch = computed(() => {\n return panelState.query.length > 0 && filteredData.value.length === 0\n })\n\n const ~~inputIcon = computed(() => {\n return panelState.query.length > 0 && panelState.inputHover\n ? CircleClose\n : Search\n })\n\n const~~ hasFooter = computed(() => !!slots.default()[0].children.length)\n\n const ~~clearQuery = () =>~~ {~~\n if~~ ~~(inputIcon.value === CircleClose) {\n panelState.query = ''\n }\n }\n\n const {~~ checked, allChecked, query, inputHover, checkChangeByUser } =\n toRefs(panelState)\n\n return {\n labelProp,\n keyProp,\n disabledProp,\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n\n checked,\n allChecked,\n query,\n inputHover,\n checkChangeByUser,\n\n hasNoMatch,\n ~~inputIcon~~,\n hasFooter,\n ~~clearQuery,\n~~\n t,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ElCheckboxGroup","ElInput","~~ElIcon","~~useCheckProps","CHECKED_CHANGE_EVENT","useCheck"~~,"computed"~~],"mappings":"~~;;;;;;;;;;;;;AAmEA~~,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,UAAU;qBACRC,qBAAe;;aAEfC,eAAO;~~YACPC~~,~~cAAM;IACN~~;;~~OAEG~~,EAAEC;OACF,EAAE,CAACC,6BAAoB;EAC5B;;IAEE,MAAM,UAAU;;MAEd,UAAU,EAAE,KAAK;;MAEjB,YAAY,KAAK;MACjB,iBAAiB,EAAE;;IAErB,MAAM;MACJ,SAAS;MACT,OAAO;MACP;MACA,YAAY;MACZ,cAAc;;;KAGf,GAAGC;UACE;MACJ,OAAO;MACP,CAAC;UACG;~~MACJ~~,OAAO;~~MACP,CAAC~~;~~UACG~~,SAAS~~,GAAGC~~;~~IAClB~~,~~MAAM,UAAU,SAAS~~;;~~QAErB~~,~~UAAU~~,~~CAAC~~,~~KAAK,GAAG,EAAE,CAAC;OACvB;KACF;;IAED,~~OAAO~~;MACL,SAAS;aACF;;;;MAIP~~;;~~MAEA,OAAO~~;~~MACP~~,UAAU;~~WACL~~;~~MACL;;;MAGA,SAAS~~;~~MACT~~,~~SAAS;;MAET,~~CAAC;MACD;;;;;;"}
1	+ {"version":3,"file":"transfer-panel.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue"],"sourcesContent":["<template>\n <div class=\"el-transfer-panel\">\n <p class=\"el-transfer-panel__header\">\n <el-checkbox\n v-model=\"allChecked\"\n :indeterminate=\"isIndeterminate\"\n @change=\"handleAllCheckedChange\"\n >\n {{ title }}\n <span>{{ checkedSummary }}</span>\n </el-checkbox>\n </p>\n\n <div\n :class=\"['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']\"\n >\n <el-input\n v-if=\"filterable\"\n v-model=\"query\"\n class=\"el-transfer-panel__filter\"\n size=\"default\"\n :placeholder=\"placeholder\"\n :prefix-icon=\"SearchIcon\"\n clearable\n @mouseenter=\"inputHover = true\"\n @mouseleave=\"inputHover = false\"\n >\n </el-input>\n <el-checkbox-group\n v-show=\"!hasNoMatch && data.length > 0\"\n v-model=\"checked\"\n :class=\"{ 'is-filterable': filterable }\"\n class=\"el-transfer-panel__list\"\n >\n <el-checkbox\n v-for=\"item in filteredData\"\n :key=\"item[keyProp]\"\n class=\"el-transfer-panel__item\"\n :label=\"item[keyProp]\"\n :disabled=\"item[disabledProp]\"\n >\n <option-content :option=\"optionRender(item)\" />\n </el-checkbox>\n </el-checkbox-group>\n <p\n v-show=\"hasNoMatch \|\| data.length === 0\"\n class=\"el-transfer-panel__empty\"\n >\n {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n </p>\n </div>\n <p v-if=\"hasFooter\" class=\"el-transfer-panel__footer\">\n <slot></slot>\n </p>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, reactive, toRefs } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport ElInput from '@element-plus/components/input'\nimport { Search } from '@element-plus/icons-vue'\nimport { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'\n\nexport default defineComponent({\n name: 'ElTransferPanel',\n\n components: {\n ElCheckboxGroup,\n ElCheckbox,\n ElInput,\n OptionContent: ({ option }) => option,\n },\n\n props: useCheckProps,\n\n emits: [CHECKED_CHANGE_EVENT],\n\n setup(props, { slots }) {\n const { t } = useLocale()\n\n const panelState = reactive({\n checked: [],\n allChecked: false,\n query: '',\n inputHover: false,\n checkChangeByUser: true,\n })\n\n const {\n labelProp,\n keyProp,\n disabledProp,\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n } = useCheck(props, panelState)\n\n const hasNoMatch = computed(() => {\n return panelState.query.length > 0 && filteredData.value.length === 0\n })\n\n const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n const { checked, allChecked, query, inputHover, checkChangeByUser } =\n toRefs(panelState)\n\n return {\n labelProp,\n keyProp,\n disabledProp,\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n\n checked,\n allChecked,\n query,\n inputHover,\n checkChangeByUser,\n\n hasNoMatch,\n SearchIcon: Search,\n hasFooter,\n\n t,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ElCheckboxGroup","ElInput","useCheckProps","CHECKED_CHANGE_EVENT","useCheck"],"mappings":";;;;;;;;;;;;AA+DA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,UAAU;qBACRC,qBAAe;;aAEfC,eAAO;IACP,aAAa,EAAE;;OAEZ,EAAEC;OACF,EAAE,CAACC,6BAAoB;EAC5B;;IAEE,MAAM,UAAU;;MAEd,UAAU,EAAE,KAAK;;MAEjB,YAAY,KAAK;MACjB,iBAAiB,EAAE;;IAErB,MAAM;MACJ,SAAS;MACT,OAAO;MACP;MACA,YAAY;MACZ,cAAc;;;KAGf,GAAGC;UACE;MACJ,OAAO;MACP,CAAC;UACG;UACA,EAAE,OAAO;WACR;MACL,SAAS;MACT,OAAO;;MAEP,YAAY;MACZ,cAAc;;;MAGd,OAAO;;MAEP;MACA,UAAU;;MAEV;MACA;MACA;MACA,CAAC;MACD;;;;;;"}

package/lib/components/transfer/src/transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.js CHANGED Viewed

@@ -12,7 +12,6 @@ const _hoisted_3 = {
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_checkbox = vue.resolveComponent("el-checkbox");
-  const _component_el_icon = vue.resolveComponent("el-icon");
   const _component_el_input = vue.resolveComponent("el-input");
   const _component_option_content = vue.resolveComponent("option-content");
   const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
@@ -39,25 +38,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         modelValue: _ctx.query,
         "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.query = $event),
         class: "el-transfer-panel__filter",
-        size: "small",
+        size: "default",
         placeholder: _ctx.placeholder,
+        "prefix-icon": _ctx.SearchIcon,
+        clearable: "",
         onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.inputHover = true),
         onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.inputHover = false)
-      }, {
-        prefix: vue.withCtx(() => [
-          _ctx.inputIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-            key: 0,
-            class: "el-input__icon",
-            onClick: _ctx.clearQuery
-          }, {
-            default: vue.withCtx(() => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.inputIcon)))
-            ]),
-            _: 1
-          }, 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
-        ]),
-        _: 1
-      }, 8, ["modelValue", "placeholder"])) : vue.createCommentVNode("v-if", true),
+      }, null, 8, ["modelValue", "placeholder", "prefix-icon"])) : vue.createCommentVNode("v-if", true),
       vue.withDirectives(vue.createVNode(_component_el_checkbox_group, {
         modelValue: _ctx.checked,
         "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.checked = $event),

package/lib/components/transfer/src/transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.js","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue?vue&type=template&id=1a7d1f9c&lang.js"],"sourcesContent":["<template>\n <div class=\"el-transfer-panel\">\n <p class=\"el-transfer-panel__header\">\n <el-checkbox\n v-model=\"allChecked\"\n :indeterminate=\"isIndeterminate\"\n @change=\"handleAllCheckedChange\"\n >\n {{ title }}\n <span>{{ checkedSummary }}</span>\n </el-checkbox>\n </p>\n\n <div\n :class=\"['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']\"\n >\n <el-input\n v-if=\"filterable\"\n v-model=\"query\"\n class=\"el-transfer-panel__filter\"\n size=\"~~small~~\"\n :placeholder=\"placeholder\"\n @mouseenter=\"inputHover = true\"\n @mouseleave=\"inputHover = false\"\n >\n ~~<template #prefix>\n <el-icon v-if=\"inputIcon\" class=\"el-input__icon\" @click=\"clearQuery\">\n <component :is=\"inputIcon\" />\n </el-icon>\n </template>\n~~ </el-input>\n <el-checkbox-group\n v-show=\"!hasNoMatch && data.length > 0\"\n v-model=\"checked\"\n :class=\"{ 'is-filterable': filterable }\"\n class=\"el-transfer-panel__list\"\n >\n <el-checkbox\n v-for=\"item in filteredData\"\n :key=\"item[keyProp]\"\n class=\"el-transfer-panel__item\"\n :label=\"item[keyProp]\"\n :disabled=\"item[disabledProp]\"\n >\n <option-content :option=\"optionRender(item)\" />\n </el-checkbox>\n </el-checkbox-group>\n <p\n v-show=\"hasNoMatch \|\| data.length === 0\"\n class=\"el-transfer-panel__empty\"\n >\n {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n </p>\n </div>\n <p v-if=\"hasFooter\" class=\"el-transfer-panel__footer\">\n <slot></slot>\n </p>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, reactive, toRefs } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport ~~ElIcon from '@element-plus/components/icon'\nimport~~ ElInput from '@element-plus/components/input'\nimport { ~~CircleClose,~~ Search } from '@element-plus/icons-vue'\nimport { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'\n\nexport default defineComponent({\n name: 'ElTransferPanel',\n\n components: {\n ElCheckboxGroup,\n ElCheckbox,\n ElInput,\n ~~ElIcon,\n~~ OptionContent: ({ option }) => option,\n },\n\n props: useCheckProps,\n\n emits: [CHECKED_CHANGE_EVENT],\n\n setup(props, { slots }) {\n const { t } = useLocale()\n\n const panelState = reactive({\n checked: [],\n allChecked: false,\n query: '',\n inputHover: false,\n checkChangeByUser: true,\n })\n\n const {\n labelProp,\n keyProp,\n disabledProp,\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n } = useCheck(props, panelState)\n\n const hasNoMatch = computed(() => {\n return panelState.query.length > 0 && filteredData.value.length === 0\n })\n\n const ~~inputIcon = computed(() => {\n return panelState.query.length > 0 && panelState.inputHover\n ? CircleClose\n : Search\n })\n\n const~~ hasFooter = computed(() => !!slots.default()[0].children.length)\n\n const ~~clearQuery = () =>~~ {~~\n if~~ ~~(inputIcon.value === CircleClose) {\n panelState.query = ''\n }\n }\n\n const {~~ checked, allChecked, query, inputHover, checkChangeByUser } =\n toRefs(panelState)\n\n return {\n labelProp,\n keyProp,\n disabledProp,\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n\n checked,\n allChecked,\n query,\n inputHover,\n checkChangeByUser,\n\n hasNoMatch,\n ~~inputIcon~~,\n hasFooter,\n ~~clearQuery,\n~~\n t,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;qBACO,KAAK,EAAC;;;;~~EAqDW;;;;;;;;;;wBArDtB~~;6BACE;;;;QAGK;;;;;UAID;;;;;;WAKI~~;;;;;;mFAIU;;;4BAGA~~;~~wBACH;YACV~~;;~~YAEU;;;;;;;;;;;;;;;;;;;;;;;;;wBAcE~~;~~mBACN;;cAEJ;;;;;;;;;;;;;qBAVM;;;;;;;~~"}
1	+ {"version":3,"file":"transfer-panel.vue_vue_type_template_id_1a7d1f9c_lang.js","sources":["../../../../../../packages/components/transfer/src/transfer-panel.vue?vue&type=template&id=1a7d1f9c&lang.js"],"sourcesContent":["<template>\n <div class=\"el-transfer-panel\">\n <p class=\"el-transfer-panel__header\">\n <el-checkbox\n v-model=\"allChecked\"\n :indeterminate=\"isIndeterminate\"\n @change=\"handleAllCheckedChange\"\n >\n {{ title }}\n <span>{{ checkedSummary }}</span>\n </el-checkbox>\n </p>\n\n <div\n :class=\"['el-transfer-panel__body', hasFooter ? 'is-with-footer' : '']\"\n >\n <el-input\n v-if=\"filterable\"\n v-model=\"query\"\n class=\"el-transfer-panel__filter\"\n size=\"default\"\n :placeholder=\"placeholder\"\n :prefix-icon=\"SearchIcon\"\n clearable\n @mouseenter=\"inputHover = true\"\n @mouseleave=\"inputHover = false\"\n >\n </el-input>\n <el-checkbox-group\n v-show=\"!hasNoMatch && data.length > 0\"\n v-model=\"checked\"\n :class=\"{ 'is-filterable': filterable }\"\n class=\"el-transfer-panel__list\"\n >\n <el-checkbox\n v-for=\"item in filteredData\"\n :key=\"item[keyProp]\"\n class=\"el-transfer-panel__item\"\n :label=\"item[keyProp]\"\n :disabled=\"item[disabledProp]\"\n >\n <option-content :option=\"optionRender(item)\" />\n </el-checkbox>\n </el-checkbox-group>\n <p\n v-show=\"hasNoMatch \|\| data.length === 0\"\n class=\"el-transfer-panel__empty\"\n >\n {{ hasNoMatch ? t('el.transfer.noMatch') : t('el.transfer.noData') }}\n </p>\n </div>\n <p v-if=\"hasFooter\" class=\"el-transfer-panel__footer\">\n <slot></slot>\n </p>\n </div>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, reactive, toRefs } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\nimport { ElCheckbox, ElCheckboxGroup } from '@element-plus/components/checkbox'\nimport ElInput from '@element-plus/components/input'\nimport { Search } from '@element-plus/icons-vue'\nimport { useCheck, useCheckProps, CHECKED_CHANGE_EVENT } from './useCheck'\n\nexport default defineComponent({\n name: 'ElTransferPanel',\n\n components: {\n ElCheckboxGroup,\n ElCheckbox,\n ElInput,\n OptionContent: ({ option }) => option,\n },\n\n props: useCheckProps,\n\n emits: [CHECKED_CHANGE_EVENT],\n\n setup(props, { slots }) {\n const { t } = useLocale()\n\n const panelState = reactive({\n checked: [],\n allChecked: false,\n query: '',\n inputHover: false,\n checkChangeByUser: true,\n })\n\n const {\n labelProp,\n keyProp,\n disabledProp,\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n } = useCheck(props, panelState)\n\n const hasNoMatch = computed(() => {\n return panelState.query.length > 0 && filteredData.value.length === 0\n })\n\n const hasFooter = computed(() => !!slots.default()[0].children.length)\n\n const { checked, allChecked, query, inputHover, checkChangeByUser } =\n toRefs(panelState)\n\n return {\n labelProp,\n keyProp,\n disabledProp,\n filteredData,\n checkedSummary,\n isIndeterminate,\n handleAllCheckedChange,\n\n checked,\n allChecked,\n query,\n inputHover,\n checkChangeByUser,\n\n hasNoMatch,\n SearchIcon: Search,\n hasFooter,\n\n t,\n }\n },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;;;qBACO,KAAK,EAAC;;;;EAkDW;;;;;;;;;wBAlDtB;6BACE;;;;QAGK;;;;;UAID;;;;;;WAKI;;;;;;;iBAKC,EAAC;;;;;wBAKK;;;;;;;;;0BAWT;6BADF;;cAEG,SAASA;;0BAEG;4BACE,CAAC;;;;kBAEC;;;;;;;;;;;yBAGrB;uCACwB;;;;;;"}

package/lib/defaults.d.ts CHANGED Viewed

@@ -1,14 +1,16 @@
 declare const _default: {
     version: string;
     install: (app: import("vue").App<any>, options?: {
+        readonly locale?: unknown;
         readonly size?: unknown;
         readonly button?: unknown;
+        readonly message?: unknown;
         readonly zIndex?: unknown;
-        readonly locale?: unknown;
     } & {} & {
         button?: import("./components").ButtonConfigContext | undefined;
         size?: import("./utils/props").BuildPropType<StringConstructor, "small" | "default" | "large", unknown> | undefined;
         locale?: import("./locale").Language | undefined;
+        message?: import("./components").MessageConfigContext | undefined;
         zIndex?: number | undefined;
     }) => void;
 };

package/lib/hooks/index.js CHANGED Viewed

@@ -36,13 +36,10 @@ exports.useFocus = index$2.useFocus;
 exports.useFormItem = index$3.useFormItem;
 exports.provideGlobalConfig = index$4.provideGlobalConfig;
 exports.useGlobalConfig = index$4.useGlobalConfig;
+exports.buildLocaleContext = index$5.buildLocaleContext;
 exports.buildTranslator = index$5.buildTranslator;
-exports.localeContextKey = index$5.localeContextKey;
-exports.localeProviderMaker = index$5.localeProviderMaker;
-exports.provideLocale = index$5.provideLocale;
 exports.translate = index$5.translate;
 exports.useLocale = index$5.useLocale;
-exports.useLocaleProps = index$5.useLocaleProps;
 exports.useLockscreen = index$6.useLockscreen;
 exports.useModal = index$7.useModal;
 exports.createModelToggleComposable = index$8.createModelToggleComposable;

package/lib/hooks/index.js.map CHANGED Viewed

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

package/lib/hooks/use-global-config/index.d.ts CHANGED Viewed

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

package/lib/hooks/use-global-config/index.js CHANGED Viewed

@@ -9,9 +9,9 @@ var error = require('../../utils/error.js');
 var configProvider = require('../../tokens/config-provider.js');
 var shared = require('@vue/shared');
-const fallback = vue.ref({});
+const cache = vue.ref({});
 function useGlobalConfig(key) {
-  const config = vue.inject(configProvider.configProviderContextKey, fallback);
+  const config = vue.inject(configProvider.configProviderContextKey, cache);
   if (key) {
     return shared.isObject(config.value) && shared.hasOwn(config.value, key) ? vue.computed(() => config.value[key]) : vue.ref(void 0);
   } else {
@@ -34,6 +34,7 @@ const provideGlobalConfig = (config, app) => {
     return util.merge(oldConfig.value, cfg);
   });
   provideFn(configProvider.configProviderContextKey, context);
+  cache.value = context.value;
   return context;
 };

package/lib/hooks/use-global-config/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-global-config/index.ts"],"sourcesContent":["import { inject, ref, computed, unref, provide, getCurrentInstance } from 'vue'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport { hasOwn, isObject, merge } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport type { MaybeRef } from '@vueuse/core'\nimport type { Ref, App } from 'vue'\nimport type { ConfigProviderContext } from '@element-plus/tokens'\n\nconst ~~fallback~~ = ref<ConfigProviderContext>({})\n\nexport function useGlobalConfig<K extends keyof ConfigProviderContext>(\n key: K\n): Ref<ConfigProviderContext[K]>\nexport function useGlobalConfig(): Ref<ConfigProviderContext>\nexport function useGlobalConfig(key?: keyof ConfigProviderContext) {\n const config = inject(configProviderContextKey, ~~fallback~~)\n if (key) {\n return isObject(config.value) && hasOwn(config.value, key)\n ? computed(() => config.value[key])\n : ref(undefined)\n } else {\n return config\n }\n}\n\nexport const provideGlobalConfig = (\n config: MaybeRef<ConfigProviderContext>,\n app?: App\n) => {\n const inSetup = !!getCurrentInstance()\n const oldConfig = inSetup ? useGlobalConfig() : undefined\n\n const provideFn = app?.provide ?? (inSetup ? provide : undefined)\n if (!provideFn) {\n debugWarn(\n 'provideGlobalConfig',\n 'provideGlobalConfig() can only be used inside setup().'\n )\n return\n }\n\n const context = computed(() => {\n const cfg = unref(config)\n if (!oldConfig) return cfg\n return merge(oldConfig.value, cfg)\n })\n provideFn(configProviderContextKey, context)\n return context\n}\n"],"names":["ref","inject","configProviderContextKey","isObject","hasOwn","computed","getCurrentInstance","provide","debugWarn","unref","merge"],"mappings":";;;;;;;;;;;AAIA,MAAM,~~QAAQ~~,GAAGA,OAAG,CAAC,EAAE,CAAC,CAAC;~~AAClB~~,SAAS,eAAe,CAAC,GAAG,EAAE;AACrC,EAAE,MAAM,MAAM,GAAGC,UAAM,CAACC,uCAAwB,EAAE,~~QAAQ~~,CAAC,CAAC;~~AAC5D~~,EAAE,IAAI,GAAG,EAAE;AACX,IAAI,OAAOC,eAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAIC,aAAM,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAGC,YAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAGL,OAAG,CAAC,KAAK,CAAC,CAAC,CAAC;AACjH,GAAG,MAAM;AACT,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG;AACH,CAAC;AACW,MAAC,mBAAmB,GAAG,CAAC,MAAM,EAAE,GAAG,KAAK;AACpD,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,OAAO,GAAG,CAAC,CAACM,sBAAkB,EAAE,CAAC;AACzC,EAAE,MAAM,SAAS,GAAG,OAAO,GAAG,eAAe,EAAE,GAAG,KAAK,CAAC,CAAC;AACzD,EAAE,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,EAAE,GAAG,OAAO,GAAGC,WAAO,GAAG,KAAK,CAAC,CAAC;AACxG,EAAE,IAAI,CAAC,SAAS,EAAE;AAClB,IAAIC,eAAS,CAAC,qBAAqB,EAAE,wDAAwD,CAAC,CAAC;AAC/F,IAAI,OAAO;AACX,GAAG;AACH,EAAE,MAAM,OAAO,GAAGH,YAAQ,CAAC,MAAM;AACjC,IAAI,MAAM,GAAG,GAAGI,SAAK,CAAC,MAAM,CAAC,CAAC;AAC9B,IAAI,IAAI,CAAC,SAAS;AAClB,MAAM,OAAO,GAAG,CAAC;AACjB,IAAI,OAAOC,UAAK,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AACvC,GAAG,CAAC,CAAC;AACL,EAAE,SAAS,CAACR,uCAAwB,EAAE,OAAO,CAAC,CAAC;AAC/C,EAAE,OAAO,OAAO,CAAC;AACjB;;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-global-config/index.ts"],"sourcesContent":["import { inject, ref, computed, unref, provide, getCurrentInstance } from 'vue'\nimport { configProviderContextKey } from '@element-plus/tokens'\nimport { hasOwn, isObject, merge } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport type { MaybeRef } from '@vueuse/core'\nimport type { Ref, App } from 'vue'\nimport type { ConfigProviderContext } from '@element-plus/tokens'\n\n// this is meant to fix global methods like `ElMessage(opts)`, this way we can inject current locale\n// into the component as default injection value.\n// refer to: https://github.com/element-plus/element-plus/issues/2610#issuecomment-887965266\nconst cache = ref<ConfigProviderContext>({})\n\nexport function useGlobalConfig<K extends keyof ConfigProviderContext>(\n key: K\n): Ref<ConfigProviderContext[K]>\nexport function useGlobalConfig(): Ref<ConfigProviderContext>\nexport function useGlobalConfig(key?: keyof ConfigProviderContext) {\n const config = inject(configProviderContextKey, cache)\n if (key) {\n return isObject(config.value) && hasOwn(config.value, key)\n ? computed(() => config.value[key])\n : ref(undefined)\n } else {\n return config\n }\n}\n\nexport const provideGlobalConfig = (\n config: MaybeRef<ConfigProviderContext>,\n app?: App\n) => {\n const inSetup = !!getCurrentInstance()\n const oldConfig = inSetup ? useGlobalConfig() : undefined\n\n const provideFn = app?.provide ?? (inSetup ? provide : undefined)\n if (!provideFn) {\n debugWarn(\n 'provideGlobalConfig',\n 'provideGlobalConfig() can only be used inside setup().'\n )\n return\n }\n\n const context = computed(() => {\n const cfg = unref(config)\n if (!oldConfig) return cfg\n return merge(oldConfig.value, cfg)\n })\n provideFn(configProviderContextKey, context)\n cache.value = context.value\n return context\n}\n"],"names":["ref","inject","configProviderContextKey","isObject","hasOwn","computed","getCurrentInstance","provide","debugWarn","unref","merge"],"mappings":";;;;;;;;;;;AAIA,MAAM,KAAK,GAAGA,OAAG,CAAC,EAAE,CAAC,CAAC;AACf,SAAS,eAAe,CAAC,GAAG,EAAE;AACrC,EAAE,MAAM,MAAM,GAAGC,UAAM,CAACC,uCAAwB,EAAE,KAAK,CAAC,CAAC;AACzD,EAAE,IAAI,GAAG,EAAE;AACX,IAAI,OAAOC,eAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAIC,aAAM,CAAC,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAGC,YAAQ,CAAC,MAAM,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAGL,OAAG,CAAC,KAAK,CAAC,CAAC,CAAC;AACjH,GAAG,MAAM;AACT,IAAI,OAAO,MAAM,CAAC;AAClB,GAAG;AACH,CAAC;AACW,MAAC,mBAAmB,GAAG,CAAC,MAAM,EAAE,GAAG,KAAK;AACpD,EAAE,IAAI,EAAE,CAAC;AACT,EAAE,MAAM,OAAO,GAAG,CAAC,CAACM,sBAAkB,EAAE,CAAC;AACzC,EAAE,MAAM,SAAS,GAAG,OAAO,GAAG,eAAe,EAAE,GAAG,KAAK,CAAC,CAAC;AACzD,EAAE,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,OAAO,KAAK,IAAI,GAAG,EAAE,GAAG,OAAO,GAAGC,WAAO,GAAG,KAAK,CAAC,CAAC;AACxG,EAAE,IAAI,CAAC,SAAS,EAAE;AAClB,IAAIC,eAAS,CAAC,qBAAqB,EAAE,wDAAwD,CAAC,CAAC;AAC/F,IAAI,OAAO;AACX,GAAG;AACH,EAAE,MAAM,OAAO,GAAGH,YAAQ,CAAC,MAAM;AACjC,IAAI,MAAM,GAAG,GAAGI,SAAK,CAAC,MAAM,CAAC,CAAC;AAC9B,IAAI,IAAI,CAAC,SAAS;AAClB,MAAM,OAAO,GAAG,CAAC;AACjB,IAAI,OAAOC,UAAK,CAAC,SAAS,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AACvC,GAAG,CAAC,CAAC;AACL,EAAE,SAAS,CAACR,uCAAwB,EAAE,OAAO,CAAC,CAAC;AAC/C,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;AAC9B,EAAE,OAAO,OAAO,CAAC;AACjB;;;;;"}

package/lib/hooks/use-id/index.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
-var isServer = require('../../utils/isServer.js');
+var core = require('@vueuse/core');
 var error = require('../../utils/error.js');
 const defaultIdInjection = {
@@ -13,7 +13,7 @@ const defaultIdInjection = {
 const ID_INJECTION_KEY = Symbol("elIdInjection");
 const useId = (deterministicId) => {
   const idInjection = vue.inject(ID_INJECTION_KEY, defaultIdInjection);
-  if (isServer["default"] && idInjection === defaultIdInjection) {
+  if (!core.isClient && idInjection === defaultIdInjection) {
     error.debugWarn("IdInjection", `Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
 usage: app.provide(ID_INJECTION_KEY, {
   prefix: number,

package/lib/hooks/use-id/index.js.map CHANGED Viewed

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