npm - @element-plus/nightly - Versions diffs - 0.0.20220110 → 0.0.20220111 - Mend

@element-plus/nightly 0.0.20220110 → 0.0.20220111

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

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

@@ -85,8 +85,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "el-date-editor--" + _ctx.type,
           _ctx.pickerSize ? `el-range-editor--${_ctx.pickerSize}` : "",
           _ctx.pickerDisabled ? "is-disabled" : "",
-          _ctx.pickerVisible ? "is-active" : ""
+          _ctx.pickerVisible ? "is-active" : "",
+          _ctx.$attrs.class || void 0
         ]]),
+        style: vue.normalizeStyle(_ctx.$attrs.style || void 0),
         onClick: _cache[7] || (_cache[7] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
         onMouseenter: _cache[8] || (_cache[8] = (...args) => _ctx.onMouseEnter && _ctx.onMouseEnter(...args)),
         onMouseleave: _cache[9] || (_cache[9] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args)),
@@ -143,7 +145,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ]),
           _: 1
         }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
-      ], 34))
+      ], 38))
     ]),
     content: vue.withCtx(() => [
       vue.renderSlot(_ctx.$slots, "default", {

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 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;;;;;;"}
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 $attrs.class \|\| undefined,\n ]\"\n :style=\"$attrs.style \|\| undefined\"\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":["_normalizeStyle"],"mappings":";;;;;;;;0BAmGqB;;;;;;;;wBAlGnB;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;;;;;;;;;;eAMjBA;iBACE;;;;;;;iBAQC;mBACA;;;0EAGI;;aAGF;;;kBACN,OAAM;;;;;;;;;;;;uBAQC,aAAQ;mDACe;;;cAG7B,WAAW;;cAEX,OAAK;;qBAEA;;;;;;kBAMD,WAAM;;;;;;;mBAON;;;yEAGI;;aAGH;;;;;;;;;;;;;;;;;;;QAcP;;QAEA;;;;;;"}

package/lib/components/tooltip/index.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     };
     virtualRef: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("..").Measurable>, unknown, unknown, unknown, unknown>;
     virtualTriggering: import("../../utils/props").BuildPropReturn<BooleanConstructor, unknown, unknown, unknown, unknown>;
+    appendTo: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | HTMLElement>, string | (() => string) | undefined, unknown, unknown, unknown>;
     content: import("../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     rawContent: import("../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => true) | (() => false) | undefined, unknown, unknown, unknown>;
     persistent: BooleanConstructor;
@@ -187,6 +188,7 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     trigger?: unknown;
     virtualRef?: unknown;
     virtualTriggering?: unknown;
+    appendTo?: unknown;
     content?: unknown;
     rawContent?: unknown;
     persistent?: unknown;
@@ -245,6 +247,7 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     } | any)[])[])[])[])[])[])[])[])[])[])[];
     disabled: boolean;
     effect: string;
+    appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
     showAfter: number;
     hideAfter: number;
     placement: import("../../utils/props").BuildPropType<(new (...args: any[]) => import("../../utils/props").BuildPropType<StringConstructor, import("@popperjs/core").Placement, unknown> & {}) | (() => import("../../utils/props").BuildPropType<StringConstructor, import("@popperjs/core").Placement, unknown>) | ((new (...args: any[]) => import("../../utils/props").BuildPropType<StringConstructor, import("@popperjs/core").Placement, unknown> & {}) | (() => import("../../utils/props").BuildPropType<StringConstructor, import("@popperjs/core").Placement, unknown>))[], unknown, unknown>;
@@ -331,6 +334,7 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     } | any)[])[])[])[])[])[])[])[])[])[])[];
     disabled: boolean;
     effect: string;
+    appendTo: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
     showAfter: number;
     hideAfter: number;
     placement: import("../../utils/props").BuildPropType<(new (...args: any[]) => import("../../utils/props").BuildPropType<StringConstructor, import("@popperjs/core").Placement, unknown> & {}) | (() => import("../../utils/props").BuildPropType<StringConstructor, import("@popperjs/core").Placement, unknown>) | ((new (...args: any[]) => import("../../utils/props").BuildPropType<StringConstructor, import("@popperjs/core").Placement, unknown> & {}) | (() => import("../../utils/props").BuildPropType<StringConstructor, import("@popperjs/core").Placement, unknown>))[], unknown, unknown>;
@@ -381,4 +385,5 @@ export declare const ElTooltip: import("../../utils/types").SFCWithInstall<impor
     trigger: "click" | "contextmenu" | "focus" | "hover" | ("click" | "contextmenu" | "focus" | "hover")[];
 }>> & Record<string, any>;
 export * from './src/tooltip';
+export * from './src/tokens';
 export default ElTooltip;

package/lib/components/tooltip/index.js CHANGED Viewed

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var withInstall = require('../../utils/with-install.js');
 require('./src/tooltip2.js');
 var tooltip = require('./src/tooltip.js');
+var tokens = require('./src/tokens.js');
 var tooltip_vue_vue_type_script_lang = require('./src/tooltip.vue_vue_type_script_lang.js');
 const ElTooltip = withInstall.withInstall(tooltip_vue_vue_type_script_lang["default"]);
@@ -12,6 +13,7 @@ const ElTooltip = withInstall.withInstall(tooltip_vue_vue_type_script_lang["defa
 exports.useTooltipContentProps = tooltip.useTooltipContentProps;
 exports.useTooltipProps = tooltip.useTooltipProps;
 exports.useTooltipTriggerProps = tooltip.useTooltipTriggerProps;
+exports.TOOLTIP_INJECTION_KEY = tokens.TOOLTIP_INJECTION_KEY;
 exports.ElTooltip = ElTooltip;
 exports["default"] = ElTooltip;
 //# sourceMappingURL=index.js.map

package/lib/components/tooltip/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../packages/components/tooltip/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\nimport Tooltip from './src/tooltip.vue'\n\nexport const ElTooltip = withInstall(Tooltip)\nexport * from './src/tooltip'\nexport default ElTooltip\n"],"names":["withInstall","Tooltip"],"mappings":"~~;;;;;;;;;~~AAEY,MAAC,SAAS,GAAGA,uBAAW,CAACC,2CAAO~~;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../packages/components/tooltip/index.ts"],"sourcesContent":["import { withInstall } from '@element-plus/utils/with-install'\nimport Tooltip from './src/tooltip.vue'\n\nexport const ElTooltip = withInstall(Tooltip)\nexport * from './src/tooltip'\nexport * from './src/tokens'\nexport default ElTooltip\n"],"names":["withInstall","Tooltip"],"mappings":";;;;;;;;;;AAEY,MAAC,SAAS,GAAGA,uBAAW,CAACC,2CAAO;;;;;;;;;"}

package/lib/components/tooltip/src/content.vue.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import { nextTick } from 'vue';
 declare const _default: import("vue").DefineComponent<{
+    appendTo: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | HTMLElement>, string | (() => string) | undefined, unknown, unknown, unknown>;
     content: import("../../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     rawContent: import("../../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => true) | (() => false) | undefined, unknown, unknown, unknown>;
     persistent: BooleanConstructor;
@@ -7,6 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     visible: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<boolean | null>, (() => null) | null | undefined, unknown, unknown, unknown>;
     transition: import("../../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     teleported: import("../../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => true) | (() => false) | undefined, unknown, unknown, unknown>;
+    disabled: import("../../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => true) | (() => false) | undefined, unknown, unknown, unknown>;
     style: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<import("vue").StyleValue>, string | import("vue").CSSProperties | (() => string) | (() => import("vue").CSSProperties) | (() => import("vue").StyleValue[]) | undefined, unknown, unknown, unknown>;
     className: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | {
         [x: string]: any;
@@ -500,7 +501,7 @@ declare const _default: import("vue").DefineComponent<{
             errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
-        $nextTick: typeof nextTick;
+        $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<{
         style?: unknown;
@@ -621,15 +622,16 @@ declare const _default: import("vue").DefineComponent<{
         } | any)[])[])[])[])[])[])[])[])[])[])[])[]>;
         updatePopper: () => void;
     }> & {} & {} & import("vue").ComponentCustomProperties) | null>;
-    shouldRenderTeleport: import("vue").ComputedRef<boolean>;
-    shouldRenderPopperContent: import("vue").ComputedRef<boolean>;
-    shouldShowPopperContent: import("vue").ComputedRef<boolean>;
+    shouldRender: import("vue").ComputedRef<boolean>;
+    shouldShow: import("vue").ComputedRef<boolean>;
     open: import("vue").Ref<boolean>;
-    POPPER_CONTAINER_SELECTOR: string;
+    onAfterShow: () => void;
+    onBeforeEnter: () => void;
     onContentEnter: (event: unknown) => void;
     onContentLeave: (event: unknown) => void;
     onTransitionLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    appendTo?: unknown;
     content?: unknown;
     rawContent?: unknown;
     persistent?: unknown;
@@ -637,6 +639,7 @@ declare const _default: import("vue").DefineComponent<{
     visible?: unknown;
     transition?: unknown;
     teleported?: unknown;
+    disabled?: unknown;
     style?: unknown;
     className?: unknown;
     effect?: unknown;
@@ -687,7 +690,9 @@ declare const _default: import("vue").DefineComponent<{
     } | (string | {
         [x: string]: any;
     } | any)[])[])[])[])[])[])[])[])[])[])[];
+    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     effect: string;
+    appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
     showAfter: number;
     hideAfter: number;
     placement: import("../../../utils/props").BuildPropType<(new (...args: any[]) => import("../../../utils/props").BuildPropType<StringConstructor, import("@element-plus/components/popper").Placement, unknown> & {}) | (() => import("../../../utils/props").BuildPropType<StringConstructor, import("@element-plus/components/popper").Placement, unknown>) | ((new (...args: any[]) => import("../../../utils/props").BuildPropType<StringConstructor, import("@element-plus/components/popper").Placement, unknown> & {}) | (() => import("../../../utils/props").BuildPropType<StringConstructor, import("@element-plus/components/popper").Placement, unknown>))[], unknown, unknown>;
@@ -763,7 +768,9 @@ declare const _default: import("vue").DefineComponent<{
     } | (string | {
         [x: string]: any;
     } | any)[])[])[])[])[])[])[])[])[])[])[];
+    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     effect: string;
+    appendTo: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement>, unknown, unknown>;
     showAfter: number;
     hideAfter: number;
     placement: import("../../../utils/props").BuildPropType<(new (...args: any[]) => import("../../../utils/props").BuildPropType<StringConstructor, import("@element-plus/components/popper").Placement, unknown> & {}) | (() => import("../../../utils/props").BuildPropType<StringConstructor, import("@element-plus/components/popper").Placement, unknown>) | ((new (...args: any[]) => import("../../../utils/props").BuildPropType<StringConstructor, import("@element-plus/components/popper").Placement, unknown> & {}) | (() => import("../../../utils/props").BuildPropType<StringConstructor, import("@element-plus/components/popper").Placement, unknown>))[], unknown, unknown>;

package/lib/components/tooltip/src/content.vue_vue_type_script_lang.js CHANGED Viewed

@@ -3,23 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var vue = require('vue');
+var core = require('@vueuse/core');
 require('../../popper/index.js');
 require('../../visual-hidden/index.js');
-var index = require('../../teleport/index.js');
 var dom = require('../../../utils/dom.js');
 require('../../../hooks/index.js');
 var tooltip = require('./tooltip.js');
 var tokens = require('./tokens.js');
 var content_vue_vue_type_script_lang = require('../../popper/src/content.vue_vue_type_script_lang.js');
 var visualHidden_vue_vue_type_script_lang = require('../../visual-hidden/src/visual-hidden.vue_vue_type_script_lang.js');
-var index$1 = require('../../../hooks/use-escape-keydown/index.js');
-var index$2 = require('../../../hooks/use-intermediate-render/index.js');
-var index$3 = require('../../../hooks/use-popper-container/index.js');
+var index = require('../../../hooks/use-escape-keydown/index.js');
 var script = vue.defineComponent({
   name: "ElTooltipContent",
   components: {
-    ElTeleport: index.ElTeleport,
     ElPopperContent: content_vue_vue_type_script_lang["default"],
     ElVisuallyHidden: visualHidden_vue_vue_type_script_lang["default"]
   },
@@ -37,76 +34,27 @@ var script = vue.defineComponent({
       }
       return props.persistent;
     });
+    const shouldRender = vue.computed(() => {
+      return vue.unref(persistentRef) ? true : vue.unref(open);
+    });
+    const shouldShow = vue.computed(() => {
+      return props.disabled ? false : vue.unref(open);
+    });
     const contentStyle = vue.computed(() => {
       var _a;
       return (_a = props.style) != null ? _a : {};
     });
-    const shouldRenderTeleport = vue.computed(() => {
-      if (vue.unref(persistentRef))
-        return true;
-      return vue.unref(vue.unref(entering) ? open : intermediateOpen);
-    });
-    const shouldRenderPopperContent = vue.computed(() => {
-      if (vue.unref(persistentRef))
-        return true;
-      return vue.unref(vue.unref(leaving) ? open : intermediateOpen);
-    });
-    const shouldShowPopperContent = vue.computed(() => {
-      if (vue.unref(persistentRef)) {
-        return vue.unref(vue.unref(leaving) ? open : intermediateOpen);
-      }
-      return true;
-    });
-    const ariaHidden = vue.computed(() => !(vue.unref(shouldRenderPopperContent) && vue.unref(shouldShowPopperContent)));
-    index$1.useEscapeKeydown(onClose);
-    index$2.useDelayedRender({
-      indicator: open,
-      intermediateIndicator: intermediateOpen,
-      shouldSetIntermediate: (step) => {
-        return step === "hide" ? false : true;
-      },
-      beforeShow: () => {
-        if (vue.unref(leaving)) {
-          leaving.value = false;
-          intermediateOpen.value = false;
-        }
-        entering.value = true;
-      },
-      beforeHide: () => {
-        if (vue.unref(entering)) {
-          entering.value = false;
-          return;
-        }
-        leaving.value = true;
-      },
-      afterShow: () => {
-        if (!vue.unref(open))
-          return;
-        entering.value = false;
-        onShow();
-        vue.nextTick(() => {
-          var _a;
-          (_a = vue.unref(contentRef)) == null ? void 0 : _a.updatePopper();
-        });
-      },
-      afterHide: () => {
-        if (vue.unref(open))
-          return;
-        onHide();
-      }
-    });
+    const ariaHidden = vue.computed(() => !vue.unref(open));
+    index.useEscapeKeydown(onClose);
     const onTransitionLeave = () => {
-      if (vue.unref(open))
-        return;
-      leaving.value = false;
-      intermediateOpen.value = false;
+      onHide();
     };
     const stopWhenControlled = () => {
       if (vue.unref(controlled))
         return true;
     };
     const onContentEnter = dom.composeEventHandlers(stopWhenControlled, () => {
-      if (props.enterable) {
+      if (props.enterable && vue.unref(trigger) === "hover") {
         onOpen();
       }
     });
@@ -115,6 +63,33 @@ var script = vue.defineComponent({
         onClose();
       }
     });
+    const onBeforeEnter = () => {
+      var _a, _b;
+      (_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
+    };
+    const onAfterShow = () => {
+      onShow();
+    };
+    let stopHandle;
+    vue.watch(() => vue.unref(open), (val) => {
+      if (val) {
+        stopHandle = core.onClickOutside(vue.computed(() => {
+          var _a;
+          return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
+        }), () => {
+          if (vue.unref(controlled))
+            return;
+          const $trigger = vue.unref(trigger);
+          if ($trigger !== "hover") {
+            onClose();
+          }
+        });
+      } else {
+        stopHandle == null ? void 0 : stopHandle();
+      }
+    }, {
+      flush: "post"
+    });
     return {
       ariaHidden,
       entering,
@@ -123,11 +98,11 @@ var script = vue.defineComponent({
       intermediateOpen,
       contentStyle,
       contentRef,
-      shouldRenderTeleport,
-      shouldRenderPopperContent,
-      shouldShowPopperContent,
+      shouldRender,
+      shouldShow,
       open,
-      POPPER_CONTAINER_SELECTOR: index$3.POPPER_CONTAINER_SELECTOR,
+      onAfterShow,
+      onBeforeEnter,
       onContentEnter,
       onContentLeave,
       onTransitionLeave

package/lib/components/tooltip/src/content.vue_vue_type_script_lang.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"content.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/tooltip/src/content.vue"],"sourcesContent":["<template>\n <~~el-~~teleport~~\n v-if=\"shouldRenderTeleport\"\n~~ :disabled=\"!teleported\"\n :~~container~~=\"~~POPPER_CONTAINER_SELECTOR~~\"\n >\n <transition :name=\"transition\" @after-leave=\"onTransitionLeave\">\n <el-popper-content\n v-if=\"~~shouldRenderPopperContent~~\"\n v-show=\"~~shouldShowPopperContent~~\"\n ref=\"contentRef\"\n v-bind=\"$attrs\"\n :aria-hidden=\"ariaHidden\"\n :boundaries-padding=\"boundariesPadding\"\n :fallback-placements=\"fallbackPlacements\"\n :gpu-acceleration=\"gpuAcceleration\"\n :offset=\"offset\"\n :placement=\"placement\"\n :popper-options=\"popperOptions\"\n :strategy=\"strategy\"\n :effect=\"effect\"\n :enterable=\"enterable\"\n :pure=\"pure\"\n :popper-class=\"popperClass\"\n :popper-style=\"[popperStyle, contentStyle]\"\n :reference-el=\"referenceEl\"\n :z-index=\"zIndex\"\n @mouseenter=\"onContentEnter\"\n @mouseleave=\"onContentLeave\"\n >\n <slot />\n <el-visually-hidden :id=\"id\" role=\"tooltip\">\n {{ ariaLabel }}\n </el-visually-hidden>\n </el-popper-content>\n </transition>\n </~~el-~~teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ~~nextTick,~~ ref, unref } from 'vue'\nimport { ~~ElPopperContent~~ } from '@~~element-plus~~/~~components/popper~~'\nimport { ~~ElVisuallyHidden~~ } from '@element-plus/components/~~visual-hidden~~'\nimport { ~~ElTeleport~~ } from '@element-plus/components/~~teleport~~'\nimport { composeEventHandlers } from '@element-plus/utils/dom'\nimport {\n useEscapeKeydown~~,\n POPPER_CONTAINER_SELECTOR,\n useDelayedRender,\n~~} from '@element-plus/hooks'\n\nimport { useTooltipContentProps } from './tooltip'\nimport { TOOLTIP_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n name: 'ElTooltipContent',\n components: {\n ~~ElTeleport,\n~~ ElPopperContent,\n ElVisuallyHidden,\n },\n inheritAttrs: false,\n props: useTooltipContentProps,\n setup(props) {\n const contentRef = ref<InstanceType<typeof ElPopperContent> \| null>(null)\n const intermediateOpen = ref(false)\n const entering = ref(false)\n const leaving = ref(false)\n const { controlled, id, open, trigger, onClose, onOpen, onShow, onHide } =\n inject(TOOLTIP_INJECTION_KEY, undefined)!\n const persistentRef = computed(() => {\n // For testing, we would always want the content to be rendered\n // to the DOM, so we need to return true here.\n if (process.env.NODE_ENV === 'test') {\n return true\n }\n return props.persistent\n })\n\n const ~~contentStyle~~ = computed(() => ~~(props.style ??~~ {~~}) as any)~~\n ~~const shouldRenderTeleport = computed(() => {\n~~ if (unref(persistentRef)) ~~return~~ true~~\n return~~ unref(~~unref(entering) ?~~ open ~~: intermediateOpen~~)\n })\n\n const ~~shouldRenderPopperContent~~ = computed(() => {\n ~~if (unref(persistentRef))~~ return ~~true\n return~~ ~~unref(unref(leaving)~~ ? ~~open~~ : ~~intermediateOpen~~)\n })\n\n const ~~shouldShowPopperContent~~ = computed(() => ~~{\n //~~ ~~This~~ ~~is for control persistent mode transition\n // When persistent this element will always be rendered, we simply use v-show to control the transition\n if (unref(persistentRef))~~ {~~\n return unref(unref(leaving~~) ? ~~open : intermediateOpen~~)\n }\n ~~return true\n~~ ~~})\n\n~~ const ariaHidden = computed(\n () ~~=>\n~~ !(unref(~~shouldRenderPopperContent~~) ~~&& unref(shouldShowPopperContent~~))\n )\n\n useEscapeKeydown(onClose)\n\n ~~useDelayedRender({\n indicator:~~ ~~open,\n intermediateIndicator:~~ ~~intermediateOpen,\n shouldSetIntermediate:~~ (~~step~~) => {\n // we don't want to set the intermediateOpen because we want the transition to finish.\n // After transition finishes, with the hook after-leave we can call intermediate.value = false\n return step === 'hide' ? false : true\n ~~},\n beforeShow:~~ () ~~=> {~~\n ~~// indicates interruption of hide transition~~\n ~~if (unref(leaving)) {~~\n ~~leaving.value~~ = ~~false\n intermediateOpen.value~~ = ~~false\n }\n entering.value = true\n },\n beforeHide:~~ () => {\n ~~// indicates interruption of show transition\n~~ if (unref(~~entering~~)) ~~{\n entering.value~~ ~~= false~~\n ~~return~~\n }\n ~~leaving.value~~ = ~~true\n },\n afterShow:~~ () => {\n if (!unref(~~open~~)) ~~return\n entering.value~~ = ~~false~~\n ~~onShow~~()\n ~~nextTick(() => {~~\n ~~unref(contentRef~~)~~?.updatePopper()~~\n })\n ~~},\n afterHide:~~ () => {\n if (unref(~~open~~)) ~~return\n //~~ ~~prevent the content from hiding if it~~'s ~~still open~~\n ~~onHide~~()\n },\n })\n\n const ~~onTransitionLeave~~ = () => {\n if (~~unref(open~~)~~) return~~\n ~~leaving.value = false\n intermediateOpen.value = false\n~~ }\n\n const ~~stopWhenControlled~~ = () => {\n if (~~unref(controlled~~)~~) return true~~\n }\n\n ~~const~~ ~~onContentEnter~~ = ~~composeEventHandlers~~(~~stopWhenControlled,~~ () => {\n if (~~props.enterable~~) {\n ~~onOpen~~()\n }\n })\n\n const ~~onContentLeave~~ = ~~composeEventHandlers~~(~~stopWhenControlled, (~~) ~~=> {~~\n if (~~unref(~~trigger) ~~===~~ 'hover') {\n onClose()\n }\n })\n\n return {\n ariaHidden,\n entering,\n leaving,\n id,\n intermediateOpen,\n contentStyle,\n contentRef,\n ~~shouldRenderTeleport~~,\n ~~shouldRenderPopperContent~~,\n ~~shouldShowPopperContent~~,\n ~~open~~,\n ~~POPPER_CONTAINER_SELECTOR~~,\n onContentEnter,\n onContentLeave,\n onTransitionLeave,\n }\n },\n})\n</script>\n"],"names":["defineComponent","~~ElTeleport","~~ElPopperContent","ElVisuallyHidden","useTooltipContentProps","ref","computed","unref","~~nextTick~~","composeEventHandlers"~~,"POPPER_CONTAINER_SELECTOR"~~],"mappings":"~~;;;;;;;;;;;;;;;;;;AAmDA~~,aAAeA,mBAAe;AAC9B,EAAE,wBAAwB;;AAE1B,~~gBAAIC;qBACAC~~,2CAAe;sBACfC~~;;cAEU~~,EAAE;OACT,EAAEC;EACP;IACE,MAAM,UAAU;IAChB,MAAM,gBAAgB,GAAGC;IACzB,MAAM;IACN,MAAM,OAAO,UAAM,CAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;IAC9B,MAAM,aAAa,GAAGC;MACpB,IAAI,QAAQ,GAAG,CAAC;QACd,OAAO,IAAI,CAAC;OACb;MACD,OAAO,KAAK,CAAC,UAAU,CAAC;MACxB,CAAC;UACG,YAAY,GAAGA,YAAQ,OAAO;MAClC,~~IAAI,EAAE,CAAC;aACA,GAAG;MACV;UACI;;;MAGJ,~~OAAOC,SAAK,~~CAACA~~,~~UAAM~~,~~QAAQ,~~CAAC,GAAG,IAAI,~~GAAG~~,~~gBAAgB~~,~~CAAC;KACxD~~,CAAC,~~CAAC~~;~~UACG~~,~~yBAAyB;MAC7B~~,~~IAAIA~~,~~SAAK,~~CAAC~~,aAAa,CAAC;;;KAGzB,CAAC,CAAC~~;~~UACG~~,~~uBAAuB~~,~~GAAGD;MAC9B,IAAIC,SAAK,~~CAAC,~~aAAa,CAAC,~~EAAE~~;;;MAG1B~~,~~OAAO~~,~~IAAI~~,CAAC~~;MACZ~~,~~CAAC;UACG~~,~~UAAU~~,~~GAAGD~~,~~YAAQ~~,~~CAAC~~,~~MAAM,EAAEC,SAAK,~~CAAC~~,yBAAyB,cAAU,CAAC,uBAAuB,CAAC,CAAC,CAAC~~;~~4BACxF~~,~~CAAC~~,OAAO,CAAC,CAAC;~~4BACV~~,~~CAAC;MACf;MACA~~;;;~~OAGC;MACD;QACE~~,~~IAAIA~~,~~SAAK~~,~~CAAC~~,OAAO,~~CAAC,EAAE;;;SAGnB~~;;~~OAEF;MACD~~,~~YAAY;QACV~~,~~IAAIA~~,~~SAAK~~,~~CAAC~~,~~QAAQ~~,CAAC~~,EAAE~~;~~UACnB~~,~~QAAQ~~,~~CAAC~~,~~KAAK,GAAG,KAAK,~~CAAC~~;iBAChB;SACR;QACD~~,OAAO,CAAC,KAAK~~,GAAG,IAAI,CAAC~~;~~OACtB;MACD~~,~~SAAS;QACP~~,~~IAAI,CAACA,SAAK,~~CAAC,~~IAAI~~,~~CAAC;iBACP;gBACD~~,~~CAAC,KAAK,QAAQ~~;~~cAChB~~,~~EAAE,CAAC;QACTC;UACE,~~IAAI,EAAE,~~CAAC;;SAER~~,~~CAAC~~,CAAC~~;;eAEI,EAAE,MAAM~~;~~YACXD~~,~~SAAK~~,CAAC,~~IAAI,CAAC~~;~~UACb~~;~~QACF~~;;~~MAEF~~,CAAC;~~UACG;mBACK~~,CAAC,~~IAAI,~~CAAC~~;QACb~~,~~OAAO~~;~~aACF,CAAC;uBACS~~;;;~~MAGjB;QACE~~,OAAO,~~KAAK;;wBAEI~~,~~GAAGE~~,~~wBAAoB,~~CAAC~~;UACtC~~,~~KAAK;;;;IAIX~~,MAAM,~~cAAc;MAClB~~,~~IAAIF~~,~~SAAK~~,CAAC,~~OAAO,~~CAAC;~~QAChB,OAAO,EAAE,CAAC~~;~~OACX;;;MAGD,UAAU~~;~~MACV~~,~~QAAQ~~;;;~~MAGR,gBAAgB~~;~~MAChB,YAAY~~;;~~MAEZ~~;;;~~MAGA,IAAI~~;~~iCACJG,iCAAyB;;MAEzB;;;;;;;;~~"}
1	+ {"version":3,"file":"content.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/tooltip/src/content.vue"],"sourcesContent":["<template>\n <teleport :disabled=\"!teleported\" :to=\"appendTo\">\n <transition\n :name=\"transition\"\n @after-leave=\"onTransitionLeave\"\n @before-enter=\"onBeforeEnter\"\n @after-enter=\"onAfterShow\"\n >\n <el-popper-content\n v-if=\"shouldRender\"\n v-show=\"shouldShow\"\n ref=\"contentRef\"\n v-bind=\"$attrs\"\n :aria-hidden=\"ariaHidden\"\n :boundaries-padding=\"boundariesPadding\"\n :fallback-placements=\"fallbackPlacements\"\n :gpu-acceleration=\"gpuAcceleration\"\n :offset=\"offset\"\n :placement=\"placement\"\n :popper-options=\"popperOptions\"\n :strategy=\"strategy\"\n :effect=\"effect\"\n :enterable=\"enterable\"\n :pure=\"pure\"\n :popper-class=\"popperClass\"\n :popper-style=\"[popperStyle, contentStyle]\"\n :reference-el=\"referenceEl\"\n :z-index=\"zIndex\"\n @mouseenter=\"onContentEnter\"\n @mouseleave=\"onContentLeave\"\n >\n <slot />\n <el-visually-hidden :id=\"id\" role=\"tooltip\">\n {{ ariaLabel }}\n </el-visually-hidden>\n </el-popper-content>\n </transition>\n </teleport>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, inject, ref, unref, watch } from 'vue'\nimport { onClickOutside } from '@vueuse/core'\nimport { ElPopperContent } from '@element-plus/components/popper'\nimport { ElVisuallyHidden } from '@element-plus/components/visual-hidden'\nimport { composeEventHandlers } from '@element-plus/utils/dom'\nimport { useEscapeKeydown } from '@element-plus/hooks'\n\nimport { useTooltipContentProps } from './tooltip'\nimport { TOOLTIP_INJECTION_KEY } from './tokens'\n\nexport default defineComponent({\n name: 'ElTooltipContent',\n components: {\n ElPopperContent,\n ElVisuallyHidden,\n },\n inheritAttrs: false,\n props: useTooltipContentProps,\n setup(props) {\n const contentRef = ref<InstanceType<typeof ElPopperContent> \| null>(null)\n const intermediateOpen = ref(false)\n const entering = ref(false)\n const leaving = ref(false)\n const { controlled, id, open, trigger, onClose, onOpen, onShow, onHide } =\n inject(TOOLTIP_INJECTION_KEY, undefined)!\n const persistentRef = computed(() => {\n // For testing, we would always want the content to be rendered\n // to the DOM, so we need to return true here.\n if (process.env.NODE_ENV === 'test') {\n return true\n }\n return props.persistent\n })\n\n const shouldRender = computed(() => {\n return unref(persistentRef) ? true : unref(open)\n })\n\n const shouldShow = computed(() => {\n return props.disabled ? false : unref(open)\n })\n\n const contentStyle = computed(() => (props.style ?? {}) as any)\n\n const ariaHidden = computed(() => !unref(open))\n\n useEscapeKeydown(onClose)\n\n const onTransitionLeave = () => {\n onHide()\n }\n\n const stopWhenControlled = () => {\n if (unref(controlled)) return true\n }\n\n const onContentEnter = composeEventHandlers(stopWhenControlled, () => {\n if (props.enterable && unref(trigger) === 'hover') {\n onOpen()\n }\n })\n\n const onContentLeave = composeEventHandlers(stopWhenControlled, () => {\n if (unref(trigger) === 'hover') {\n onClose()\n }\n })\n\n const onBeforeEnter = () => {\n contentRef.value?.updatePopper?.()\n }\n\n const onAfterShow = () => {\n onShow()\n }\n\n let stopHandle: ReturnType<typeof onClickOutside>\n\n watch(\n () => unref(open),\n (val) => {\n if (val) {\n stopHandle = onClickOutside(\n computed(() => {\n return contentRef.value?.popperContentRef\n }),\n () => {\n if (unref(controlled)) return\n const $trigger = unref(trigger)\n if ($trigger !== 'hover') {\n onClose()\n }\n }\n )\n } else {\n stopHandle?.()\n }\n },\n {\n flush: 'post',\n }\n )\n\n return {\n ariaHidden,\n entering,\n leaving,\n id,\n intermediateOpen,\n contentStyle,\n contentRef,\n shouldRender,\n shouldShow,\n open,\n onAfterShow,\n onBeforeEnter,\n onContentEnter,\n onContentLeave,\n onTransitionLeave,\n }\n },\n})\n</script>\n"],"names":["defineComponent","ElPopperContent","ElVisuallyHidden","useTooltipContentProps","ref","computed","unref","useEscapeKeydown","composeEventHandlers"],"mappings":";;;;;;;;;;;;;;;;AAgDA,aAAeA,mBAAe;AAC9B,EAAE,wBAAwB;;AAE1B,qBAAIC,2CAAe;sBACfC,gDAAgB;GACjB;cACW,EAAE;OACT,EAAEC;EACP;IACE,MAAM,UAAU;IAChB,MAAM,gBAAgB,GAAGC;IACzB,MAAM;IACN,MAAM,OAAO,UAAM,CAAC,KAAK,CAAC,CAAC;IAC3B,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;IAC9B,MAAM,aAAa,GAAGC;MACpB,IAAI,QAAQ,GAAG,CAAC;QACd,OAAO,IAAI,CAAC;OACb;MACD,OAAO,KAAK,CAAC,UAAU,CAAC;MACxB,CAAC;UACG,YAAY,GAAGA,YAAQ,OAAO;MAClC,OAAOC,SAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA;;;MAGrC,OAAO,KAAK,CAAC,QAAQ;KACtB;;MAEC,IAAI,EAAE,CAAC;MACP,OAAO,CAAC,EAAE,GAAG,KAAK,CAAC,KAAK,SAAS,KAAK,GAAG,EAAE,CAAC;KAC7C;;IAEDC,uBAAiB,OAAO,CAAC,CAAC;UACpB,oBAAoB,MAAM;;;IAGhC,MAAM,kBAAkB,GAAG,MAAM;;QAE7B,OAAO,IAAI;;IAEf,MAAM,cAAc,GAAGC;;QAEnB,MAAM,EAAE,CAAC;OACV;;;MAGD,IAAIF,SAAK,CAAC,OAAO,CAAC,KAAK;eACd,EAAE,CAAC;;;IAGd,MAAM,aAAa,SAAS;MAC1B,IAAI,EAAE,EAAE,EAAE,CAAC;SACR,GAAG,CAAC,EAAE;MACT;IACF;;KAEC,CAAC;kBACY,CAAC;aACV,CAAC,MAAMA;MACV;;;UAGI,OAAO,CAAC,EAAE;SACX,CAAC,EAAE,MAAM;;;UAGR,MAAM,QAAQ,GAAGA;UACjB;;;SAGD,CAAC,CAAC;;QAEH;OACD;OACA;WACI,EAAE;;;gBAGG;cACF;aACD;;sBAES;kBACJ;gBACF;;;UAGN;;mBAES;;MAEb;MACA;;;;;;;"}

package/lib/components/tooltip/src/content.vue_vue_type_template_id_20254f8d_lang.js CHANGED Viewed

@@ -7,62 +7,59 @@ var vue = require('vue');
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_visually_hidden = vue.resolveComponent("el-visually-hidden");
   const _component_el_popper_content = vue.resolveComponent("el-popper-content");
-  const _component_el_teleport = vue.resolveComponent("el-teleport");
-  return _ctx.shouldRenderTeleport ? (vue.openBlock(), vue.createBlock(_component_el_teleport, {
-    key: 0,
+  return vue.openBlock(), vue.createBlock(vue.Teleport, {
     disabled: !_ctx.teleported,
-    container: _ctx.POPPER_CONTAINER_SELECTOR
-  }, {
-    default: vue.withCtx(() => [
-      vue.createVNode(vue.Transition, {
-        name: _ctx.transition,
-        onAfterLeave: _ctx.onTransitionLeave
-      }, {
-        default: vue.withCtx(() => [
-          _ctx.shouldRenderPopperContent ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_popper_content, vue.mergeProps({
-            key: 0,
-            ref: "contentRef"
-          }, _ctx.$attrs, {
-            "aria-hidden": _ctx.ariaHidden,
-            "boundaries-padding": _ctx.boundariesPadding,
-            "fallback-placements": _ctx.fallbackPlacements,
-            "gpu-acceleration": _ctx.gpuAcceleration,
-            offset: _ctx.offset,
-            placement: _ctx.placement,
-            "popper-options": _ctx.popperOptions,
-            strategy: _ctx.strategy,
-            effect: _ctx.effect,
-            enterable: _ctx.enterable,
-            pure: _ctx.pure,
-            "popper-class": _ctx.popperClass,
-            "popper-style": [_ctx.popperStyle, _ctx.contentStyle],
-            "reference-el": _ctx.referenceEl,
-            "z-index": _ctx.zIndex,
-            onMouseenter: _ctx.onContentEnter,
-            onMouseleave: _ctx.onContentLeave
-          }), {
-            default: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "default"),
-              vue.createVNode(_component_el_visually_hidden, {
-                id: _ctx.id,
-                role: "tooltip"
-              }, {
-                default: vue.withCtx(() => [
-                  vue.createTextVNode(vue.toDisplayString(_ctx.ariaLabel), 1)
-                ]),
-                _: 1
-              }, 8, ["id"])
-            ]),
-            _: 3
-          }, 16, ["aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "z-index", "onMouseenter", "onMouseleave"])), [
-            [vue.vShow, _ctx.shouldShowPopperContent]
-          ]) : vue.createCommentVNode("v-if", true)
-        ]),
-        _: 3
-      }, 8, ["name", "onAfterLeave"])
-    ]),
-    _: 3
-  }, 8, ["disabled", "container"])) : vue.createCommentVNode("v-if", true);
+    to: _ctx.appendTo
+  }, [
+    vue.createVNode(vue.Transition, {
+      name: _ctx.transition,
+      onAfterLeave: _ctx.onTransitionLeave,
+      onBeforeEnter: _ctx.onBeforeEnter,
+      onAfterEnter: _ctx.onAfterShow
+    }, {
+      default: vue.withCtx(() => [
+        _ctx.shouldRender ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_popper_content, vue.mergeProps({
+          key: 0,
+          ref: "contentRef"
+        }, _ctx.$attrs, {
+          "aria-hidden": _ctx.ariaHidden,
+          "boundaries-padding": _ctx.boundariesPadding,
+          "fallback-placements": _ctx.fallbackPlacements,
+          "gpu-acceleration": _ctx.gpuAcceleration,
+          offset: _ctx.offset,
+          placement: _ctx.placement,
+          "popper-options": _ctx.popperOptions,
+          strategy: _ctx.strategy,
+          effect: _ctx.effect,
+          enterable: _ctx.enterable,
+          pure: _ctx.pure,
+          "popper-class": _ctx.popperClass,
+          "popper-style": [_ctx.popperStyle, _ctx.contentStyle],
+          "reference-el": _ctx.referenceEl,
+          "z-index": _ctx.zIndex,
+          onMouseenter: _ctx.onContentEnter,
+          onMouseleave: _ctx.onContentLeave
+        }), {
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "default"),
+            vue.createVNode(_component_el_visually_hidden, {
+              id: _ctx.id,
+              role: "tooltip"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createTextVNode(vue.toDisplayString(_ctx.ariaLabel), 1)
+              ]),
+              _: 1
+            }, 8, ["id"])
+          ]),
+          _: 3
+        }, 16, ["aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "z-index", "onMouseenter", "onMouseleave"])), [
+          [vue.vShow, _ctx.shouldShow]
+        ]) : vue.createCommentVNode("v-if", true)
+      ]),
+      _: 3
+    }, 8, ["name", "onAfterLeave", "onBeforeEnter", "onAfterEnter"])
+  ], 8, ["disabled", "to"]);
 }
 exports.render = render;