npm - @element-plus/nightly - Versions diffs - 0.0.20220104 → 0.0.20220108 - Mend

@element-plus/nightly 0.0.20220104 → 0.0.20220108

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

package/es/components/input-number/src/input-number.vue_vue_type_script_lang.mjs CHANGED Viewed

@@ -8,6 +8,7 @@ import { debugWarn } from '../../../utils/error.mjs';
 import { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue';
 import { inputNumberProps, inputNumberEmits } from './input-number.mjs';
 import RepeatClick from '../../../directives/repeat-click/index.mjs';
+import { useFormItem } from '../../../hooks/use-form-item/index.mjs';
 import { useSize, useDisabled } from '../../../hooks/use-common-props/index.mjs';
 var script = defineComponent({
@@ -31,6 +32,7 @@ var script = defineComponent({
       currentValue: props.modelValue,
       userInput: null
     });
+    const { formItem } = useFormItem();
     const minDisabled = computed(() => _decrease(props.modelValue) < props.min);
     const maxDisabled = computed(() => _increase(props.modelValue) > props.max);
     const numPrecision = computed(() => {
@@ -108,6 +110,7 @@ var script = defineComponent({
       setCurrentValue(newVal);
     };
     const setCurrentValue = (newVal) => {
+      var _a;
       const oldVal = data.currentValue;
       if (typeof newVal === "number" && props.precision !== void 0) {
         newVal = toPrecision(newVal, props.precision);
@@ -125,6 +128,7 @@ var script = defineComponent({
       emit("update:modelValue", newVal);
       emit("input", newVal);
       emit("change", newVal, oldVal);
+      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "change");
       data.currentValue = newVal;
     };
     const handleInput = (value) => {
@@ -145,6 +149,14 @@ var script = defineComponent({
       var _a, _b;
       (_b = (_a = input.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
     };
+    const handleFocus = (event) => {
+      emit("focus", event);
+    };
+    const handleBlur = (event) => {
+      var _a;
+      emit("blur", event);
+      (_a = formItem == null ? void 0 : formItem.validate) == null ? void 0 : _a.call(formItem, "blur");
+    };
     watch(() => props.modelValue, (value) => {
       let newVal = Number(value);
       if (!isNaN(newVal)) {
@@ -198,7 +210,9 @@ var script = defineComponent({
       maxDisabled,
       minDisabled,
       focus,
-      blur
+      blur,
+      handleFocus,
+      handleBlur
     };
   }
 });

package/es/components/input-number/src/input-number.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-number.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/input-number/src/input-number.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'el-input-number',\n inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n { 'is-disabled': inputNumberDisabled },\n { 'is-without-controls': !controls },\n { 'is-controls-right': controlsAtRight },\n ]\"\n @dragstart.prevent\n >\n <span\n v-if=\"controls\"\n v-repeat-click=\"decrease\"\n class=\"el-input-number__decrease\"\n role=\"button\"\n :class=\"{ 'is-disabled': minDisabled }\"\n @keydown.enter=\"decrease\"\n >\n <el-icon>\n <arrow-down v-if=\"controlsAtRight\" />\n <minus v-else />\n </el-icon>\n </span>\n <span\n v-if=\"controls\"\n v-repeat-click=\"increase\"\n class=\"el-input-number__increase\"\n role=\"button\"\n :class=\"{ 'is-disabled': maxDisabled }\"\n @keydown.enter=\"increase\"\n >\n <el-icon>\n <arrow-up v-if=\"controlsAtRight\" />\n <plus v-else />\n </el-icon>\n </span>\n <el-input\n ref=\"input\"\n type=\"number\"\n :step=\"step\"\n :model-value=\"displayValue\"\n :placeholder=\"placeholder\"\n :disabled=\"inputNumberDisabled\"\n :size=\"inputNumberSize\"\n :max=\"max\"\n :min=\"min\"\n :name=\"name\"\n :label=\"label\"\n @keydown.up.prevent=\"increase\"\n @keydown.down.prevent=\"decrease\"\n @blur=\"(event) => $emit('blur', event)\"\n @focus=\"(event) => $emit('focus', event)\"\n @input=\"handleInput\"\n @change=\"handleInputChange\"\n />\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n reactive,\n ref,\n watch,\n onMounted,\n onUpdated,\n} from 'vue'\n\nimport { ElIcon } from '@element-plus/components/icon'\nimport { RepeatClick } from '@element-plus/directives'\nimport { useDisabled, useSize } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n currentValue: number \| undefined\n userInput: null \| number \| string\n}\n\nexport default defineComponent({\n name: 'ElInputNumber',\n components: {\n ElInput,\n ElIcon,\n ArrowUp,\n ArrowDown,\n Plus,\n Minus,\n },\n directives: {\n RepeatClick,\n },\n props: inputNumberProps,\n emits: inputNumberEmits,\n setup(props, { emit }) {\n const input = ref<ComponentPublicInstance<typeof ElInput>>()\n const data = reactive<IData>({\n currentValue: props.modelValue,\n userInput: null,\n })\n\n const minDisabled = computed(() => _decrease(props.modelValue) < props.min)\n const maxDisabled = computed(() => _increase(props.modelValue) > props.max)\n\n const numPrecision = computed(() => {\n const stepPrecision = getPrecision(props.step)\n if (props.precision !== undefined) {\n if (stepPrecision > props.precision) {\n debugWarn(\n 'InputNumber',\n 'precision should not be less than the decimal places of step'\n )\n }\n return props.precision\n } else {\n return Math.max(getPrecision(props.modelValue), stepPrecision)\n }\n })\n const controlsAtRight = computed(() => {\n return props.controls && props.controlsPosition === 'right'\n })\n\n const inputNumberSize = useSize()\n const inputNumberDisabled = useDisabled()\n\n const displayValue = computed(() => {\n if (data.userInput !== null) {\n return data.userInput\n }\n let currentValue: number \| string \| undefined = data.currentValue\n if (isNumber(currentValue)) {\n if (Number.isNaN(currentValue)) return ''\n if (props.precision !== undefined) {\n currentValue = currentValue.toFixed(props.precision)\n }\n }\n return currentValue\n })\n const toPrecision = (num: number, pre?: number) => {\n if (pre === undefined) pre = numPrecision.value\n return parseFloat(\n `${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`\n )\n }\n const getPrecision = (value: number \| undefined) => {\n if (value === undefined) return 0\n const valueString = value.toString()\n const dotPosition = valueString.indexOf('.')\n let precision = 0\n if (dotPosition !== -1) {\n precision = valueString.length - dotPosition - 1\n }\n return precision\n }\n const _increase = (val: number) => {\n if (!isNumber(val)) return data.currentValue\n const precisionFactor = Math.pow(10, numPrecision.value)\n // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n val = isNumber(val) ? val : NaN\n return toPrecision(\n (precisionFactor * val + precisionFactor * props.step) / precisionFactor\n )\n }\n const _decrease = (val: number) => {\n if (!isNumber(val)) return data.currentValue\n const precisionFactor = Math.pow(10, numPrecision.value)\n // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n val = isNumber(val) ? val : NaN\n return toPrecision(\n (precisionFactor * val - precisionFactor * props.step) / precisionFactor\n )\n }\n const increase = () => {\n if (inputNumberDisabled.value \|\| maxDisabled.value) return\n const value = props.modelValue \|\| 0\n const newVal = _increase(value)\n setCurrentValue(newVal)\n }\n const decrease = () => {\n if (inputNumberDisabled.value \|\| minDisabled.value) return\n const value = props.modelValue \|\| 0\n const newVal = _decrease(value)\n setCurrentValue(newVal)\n }\n const setCurrentValue = (newVal: number) => {\n const oldVal = data.currentValue\n if (typeof newVal === 'number' && props.precision !== undefined) {\n newVal = toPrecision(newVal, props.precision)\n }\n if (newVal !== undefined && newVal >= props.max) newVal = props.max\n if (newVal !== undefined && newVal <= props.min) newVal = props.min\n if (oldVal === newVal) return\n if (!isNumber(newVal)) {\n newVal = NaN\n }\n data.userInput = null\n emit('update:modelValue', newVal)\n emit('input', newVal)\n emit('change', newVal, oldVal)\n data.currentValue = newVal\n }\n const handleInput = (value: string) => {\n return (data.userInput = value)\n }\n const handleInputChange = (value: string) => {\n const newVal = Number(value)\n if ((isNumber(newVal) && !Number.isNaN(newVal)) \|\| value === '') {\n setCurrentValue(newVal)\n }\n data.userInput = null\n }\n\n const focus = () => {\n input.value?.focus?.()\n }\n\n const blur = () => {\n input.value?.blur?.()\n }\n\n watch(\n () => props.modelValue,\n (value) => {\n let newVal = Number(value)\n if (!isNaN(newVal)) {\n if (props.stepStrictly) {\n const stepPrecision = getPrecision(props.step)\n const precisionFactor = Math.pow(10, stepPrecision)\n newVal =\n (Math.round(newVal / props.step) * precisionFactor * props.step) /\n precisionFactor\n }\n if (props.precision !== undefined) {\n newVal = toPrecision(newVal, props.precision)\n }\n\n if (newVal > props.max) {\n newVal = props.max\n emit('update:modelValue', newVal)\n }\n if (newVal < props.min) {\n newVal = props.min\n emit('update:modelValue', newVal)\n }\n }\n data.currentValue = newVal\n data.userInput = null\n },\n { immediate: true }\n )\n onMounted(() => {\n const innerInput = input.value?.input as HTMLInputElement\n innerInput.setAttribute('role', 'spinbutton')\n innerInput.setAttribute('aria-valuemax', String(props.max))\n innerInput.setAttribute('aria-valuemin', String(props.min))\n innerInput.setAttribute('aria-valuenow', String(data.currentValue))\n innerInput.setAttribute(\n 'aria-disabled',\n String(inputNumberDisabled.value)\n )\n if (!isNumber(props.modelValue)) {\n emit('update:modelValue', Number(props.modelValue))\n }\n })\n onUpdated(() => {\n const innerInput = input.value?.input\n innerInput.setAttribute('aria-valuenow', data.currentValue)\n })\n return {\n input,\n displayValue,\n handleInput,\n handleInputChange,\n controlsAtRight,\n decrease,\n increase,\n inputNumberSize,\n inputNumberDisabled,\n maxDisabled,\n minDisabled,\n focus,\n blur,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"input-number.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/input-number/src/input-number.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'el-input-number',\n inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n { 'is-disabled': inputNumberDisabled },\n { 'is-without-controls': !controls },\n { 'is-controls-right': controlsAtRight },\n ]\"\n @dragstart.prevent\n >\n <span\n v-if=\"controls\"\n v-repeat-click=\"decrease\"\n class=\"el-input-number__decrease\"\n role=\"button\"\n :class=\"{ 'is-disabled': minDisabled }\"\n @keydown.enter=\"decrease\"\n >\n <el-icon>\n <arrow-down v-if=\"controlsAtRight\" />\n <minus v-else />\n </el-icon>\n </span>\n <span\n v-if=\"controls\"\n v-repeat-click=\"increase\"\n class=\"el-input-number__increase\"\n role=\"button\"\n :class=\"{ 'is-disabled': maxDisabled }\"\n @keydown.enter=\"increase\"\n >\n <el-icon>\n <arrow-up v-if=\"controlsAtRight\" />\n <plus v-else />\n </el-icon>\n </span>\n <el-input\n ref=\"input\"\n type=\"number\"\n :step=\"step\"\n :model-value=\"displayValue\"\n :placeholder=\"placeholder\"\n :disabled=\"inputNumberDisabled\"\n :size=\"inputNumberSize\"\n :max=\"max\"\n :min=\"min\"\n :name=\"name\"\n :label=\"label\"\n :validate-event=\"false\"\n @keydown.up.prevent=\"increase\"\n @keydown.down.prevent=\"decrease\"\n @blur=\"handleBlur\"\n @focus=\"handleFocus\"\n @input=\"handleInput\"\n @change=\"handleInputChange\"\n />\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n reactive,\n ref,\n watch,\n onMounted,\n onUpdated,\n} from 'vue'\n\nimport { ElIcon } from '@element-plus/components/icon'\nimport { RepeatClick } from '@element-plus/directives'\nimport { useDisabled, useFormItem, useSize } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n currentValue: number \| undefined\n userInput: null \| number \| string\n}\n\nexport default defineComponent({\n name: 'ElInputNumber',\n components: {\n ElInput,\n ElIcon,\n ArrowUp,\n ArrowDown,\n Plus,\n Minus,\n },\n directives: {\n RepeatClick,\n },\n props: inputNumberProps,\n emits: inputNumberEmits,\n setup(props, { emit }) {\n const input = ref<ComponentPublicInstance<typeof ElInput>>()\n const data = reactive<IData>({\n currentValue: props.modelValue,\n userInput: null,\n })\n const { formItem } = useFormItem()\n\n const minDisabled = computed(() => _decrease(props.modelValue) < props.min)\n const maxDisabled = computed(() => _increase(props.modelValue) > props.max)\n\n const numPrecision = computed(() => {\n const stepPrecision = getPrecision(props.step)\n if (props.precision !== undefined) {\n if (stepPrecision > props.precision) {\n debugWarn(\n 'InputNumber',\n 'precision should not be less than the decimal places of step'\n )\n }\n return props.precision\n } else {\n return Math.max(getPrecision(props.modelValue), stepPrecision)\n }\n })\n const controlsAtRight = computed(() => {\n return props.controls && props.controlsPosition === 'right'\n })\n\n const inputNumberSize = useSize()\n const inputNumberDisabled = useDisabled()\n\n const displayValue = computed(() => {\n if (data.userInput !== null) {\n return data.userInput\n }\n let currentValue: number \| string \| undefined = data.currentValue\n if (isNumber(currentValue)) {\n if (Number.isNaN(currentValue)) return ''\n if (props.precision !== undefined) {\n currentValue = currentValue.toFixed(props.precision)\n }\n }\n return currentValue\n })\n const toPrecision = (num: number, pre?: number) => {\n if (pre === undefined) pre = numPrecision.value\n return parseFloat(\n `${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`\n )\n }\n const getPrecision = (value: number \| undefined) => {\n if (value === undefined) return 0\n const valueString = value.toString()\n const dotPosition = valueString.indexOf('.')\n let precision = 0\n if (dotPosition !== -1) {\n precision = valueString.length - dotPosition - 1\n }\n return precision\n }\n const _increase = (val: number) => {\n if (!isNumber(val)) return data.currentValue\n const precisionFactor = Math.pow(10, numPrecision.value)\n // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n val = isNumber(val) ? val : NaN\n return toPrecision(\n (precisionFactor * val + precisionFactor * props.step) / precisionFactor\n )\n }\n const _decrease = (val: number) => {\n if (!isNumber(val)) return data.currentValue\n const precisionFactor = Math.pow(10, numPrecision.value)\n // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n val = isNumber(val) ? val : NaN\n return toPrecision(\n (precisionFactor * val - precisionFactor * props.step) / precisionFactor\n )\n }\n const increase = () => {\n if (inputNumberDisabled.value \|\| maxDisabled.value) return\n const value = props.modelValue \|\| 0\n const newVal = _increase(value)\n setCurrentValue(newVal)\n }\n const decrease = () => {\n if (inputNumberDisabled.value \|\| minDisabled.value) return\n const value = props.modelValue \|\| 0\n const newVal = _decrease(value)\n setCurrentValue(newVal)\n }\n const setCurrentValue = (newVal: number) => {\n const oldVal = data.currentValue\n if (typeof newVal === 'number' && props.precision !== undefined) {\n newVal = toPrecision(newVal, props.precision)\n }\n if (newVal !== undefined && newVal >= props.max) newVal = props.max\n if (newVal !== undefined && newVal <= props.min) newVal = props.min\n if (oldVal === newVal) return\n if (!isNumber(newVal)) {\n newVal = NaN\n }\n data.userInput = null\n emit('update:modelValue', newVal)\n emit('input', newVal)\n emit('change', newVal, oldVal)\n formItem?.validate?.('change')\n data.currentValue = newVal\n }\n const handleInput = (value: string) => {\n return (data.userInput = value)\n }\n const handleInputChange = (value: string) => {\n const newVal = Number(value)\n if ((isNumber(newVal) && !Number.isNaN(newVal)) \|\| value === '') {\n setCurrentValue(newVal)\n }\n data.userInput = null\n }\n\n const focus = () => {\n input.value?.focus?.()\n }\n\n const blur = () => {\n input.value?.blur?.()\n }\n\n const handleFocus = (event: MouseEvent) => {\n emit('focus', event)\n }\n\n const handleBlur = (event: MouseEvent) => {\n emit('blur', event)\n formItem?.validate?.('blur')\n }\n\n watch(\n () => props.modelValue,\n (value) => {\n let newVal = Number(value)\n if (!isNaN(newVal)) {\n if (props.stepStrictly) {\n const stepPrecision = getPrecision(props.step)\n const precisionFactor = Math.pow(10, stepPrecision)\n newVal =\n (Math.round(newVal / props.step) * precisionFactor * props.step) /\n precisionFactor\n }\n if (props.precision !== undefined) {\n newVal = toPrecision(newVal, props.precision)\n }\n\n if (newVal > props.max) {\n newVal = props.max\n emit('update:modelValue', newVal)\n }\n if (newVal < props.min) {\n newVal = props.min\n emit('update:modelValue', newVal)\n }\n }\n data.currentValue = newVal\n data.userInput = null\n },\n { immediate: true }\n )\n onMounted(() => {\n const innerInput = input.value?.input as HTMLInputElement\n innerInput.setAttribute('role', 'spinbutton')\n innerInput.setAttribute('aria-valuemax', String(props.max))\n innerInput.setAttribute('aria-valuemin', String(props.min))\n innerInput.setAttribute('aria-valuenow', String(data.currentValue))\n innerInput.setAttribute(\n 'aria-disabled',\n String(inputNumberDisabled.value)\n )\n if (!isNumber(props.modelValue)) {\n emit('update:modelValue', Number(props.modelValue))\n }\n })\n onUpdated(() => {\n const innerInput = input.value?.input\n innerInput.setAttribute('aria-valuenow', data.currentValue)\n })\n return {\n input,\n displayValue,\n handleInput,\n handleInputChange,\n controlsAtRight,\n decrease,\n increase,\n inputNumberSize,\n inputNumberDisabled,\n maxDisabled,\n minDisabled,\n focus,\n blur,\n handleFocus,\n handleBlur,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/input-number/src/input-number.vue_vue_type_template_id_dec60af6_lang.mjs CHANGED Viewed

@@ -16,7 +16,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       { "is-without-controls": !_ctx.controls },
       { "is-controls-right": _ctx.controlsAtRight }
     ]),
-    onDragstart: _cache[4] || (_cache[4] = withModifiers(() => {
+    onDragstart: _cache[2] || (_cache[2] = withModifiers(() => {
     }, ["prevent"]))
   }, [
     _ctx.controls ? withDirectives((openBlock(), createElementBlock("span", {
@@ -61,15 +61,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       min: _ctx.min,
       name: _ctx.name,
       label: _ctx.label,
+      "validate-event": false,
       onKeydown: [
         withKeys(withModifiers(_ctx.increase, ["prevent"]), ["up"]),
         withKeys(withModifiers(_ctx.decrease, ["prevent"]), ["down"])
       ],
-      onBlur: _cache[2] || (_cache[2] = (event) => _ctx.$emit("blur", event)),
-      onFocus: _cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event)),
+      onBlur: _ctx.handleBlur,
+      onFocus: _ctx.handleFocus,
       onInput: _ctx.handleInput,
       onChange: _ctx.handleInputChange
-    }, null, 8, ["step", "model-value", "placeholder", "disabled", "size", "max", "min", "name", "label", "onKeydown", "onInput", "onChange"])
+    }, null, 8, ["step", "model-value", "placeholder", "disabled", "size", "max", "min", "name", "label", "onKeydown", "onBlur", "onFocus", "onInput", "onChange"])
   ], 34);
 }

package/es/components/input-number/src/input-number.vue_vue_type_template_id_dec60af6_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-number.vue_vue_type_template_id_dec60af6_lang.mjs","sources":["../../../../../../packages/components/input-number/src/input-number.vue?vue&type=template&id=dec60af6&lang.js"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'el-input-number',\n inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n { 'is-disabled': inputNumberDisabled },\n { 'is-without-controls': !controls },\n { 'is-controls-right': controlsAtRight },\n ]\"\n @dragstart.prevent\n >\n <span\n v-if=\"controls\"\n v-repeat-click=\"decrease\"\n class=\"el-input-number__decrease\"\n role=\"button\"\n :class=\"{ 'is-disabled': minDisabled }\"\n @keydown.enter=\"decrease\"\n >\n <el-icon>\n <arrow-down v-if=\"controlsAtRight\" />\n <minus v-else />\n </el-icon>\n </span>\n <span\n v-if=\"controls\"\n v-repeat-click=\"increase\"\n class=\"el-input-number__increase\"\n role=\"button\"\n :class=\"{ 'is-disabled': maxDisabled }\"\n @keydown.enter=\"increase\"\n >\n <el-icon>\n <arrow-up v-if=\"controlsAtRight\" />\n <plus v-else />\n </el-icon>\n </span>\n <el-input\n ref=\"input\"\n type=\"number\"\n :step=\"step\"\n :model-value=\"displayValue\"\n :placeholder=\"placeholder\"\n :disabled=\"inputNumberDisabled\"\n :size=\"inputNumberSize\"\n :max=\"max\"\n :min=\"min\"\n :name=\"name\"\n :label=\"label\"\n @keydown.up.prevent=\"increase\"\n @keydown.down.prevent=\"decrease\"\n @blur=\"~~(event) => $emit('blur', event)~~\"\n @focus=\"~~(event) => $emit('focus', event)~~\"\n @input=\"handleInput\"\n @change=\"handleInputChange\"\n />\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n reactive,\n ref,\n watch,\n onMounted,\n onUpdated,\n} from 'vue'\n\nimport { ElIcon } from '@element-plus/components/icon'\nimport { RepeatClick } from '@element-plus/directives'\nimport { useDisabled, useSize } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n currentValue: number \| undefined\n userInput: null \| number \| string\n}\n\nexport default defineComponent({\n name: 'ElInputNumber',\n components: {\n ElInput,\n ElIcon,\n ArrowUp,\n ArrowDown,\n Plus,\n Minus,\n },\n directives: {\n RepeatClick,\n },\n props: inputNumberProps,\n emits: inputNumberEmits,\n setup(props, { emit }) {\n const input = ref<ComponentPublicInstance<typeof ElInput>>()\n const data = reactive<IData>({\n currentValue: props.modelValue,\n userInput: null,\n })\n\n const minDisabled = computed(() => _decrease(props.modelValue) < props.min)\n const maxDisabled = computed(() => _increase(props.modelValue) > props.max)\n\n const numPrecision = computed(() => {\n const stepPrecision = getPrecision(props.step)\n if (props.precision !== undefined) {\n if (stepPrecision > props.precision) {\n debugWarn(\n 'InputNumber',\n 'precision should not be less than the decimal places of step'\n )\n }\n return props.precision\n } else {\n return Math.max(getPrecision(props.modelValue), stepPrecision)\n }\n })\n const controlsAtRight = computed(() => {\n return props.controls && props.controlsPosition === 'right'\n })\n\n const inputNumberSize = useSize()\n const inputNumberDisabled = useDisabled()\n\n const displayValue = computed(() => {\n if (data.userInput !== null) {\n return data.userInput\n }\n let currentValue: number \| string \| undefined = data.currentValue\n if (isNumber(currentValue)) {\n if (Number.isNaN(currentValue)) return ''\n if (props.precision !== undefined) {\n currentValue = currentValue.toFixed(props.precision)\n }\n }\n return currentValue\n })\n const toPrecision = (num: number, pre?: number) => {\n if (pre === undefined) pre = numPrecision.value\n return parseFloat(\n `${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`\n )\n }\n const getPrecision = (value: number \| undefined) => {\n if (value === undefined) return 0\n const valueString = value.toString()\n const dotPosition = valueString.indexOf('.')\n let precision = 0\n if (dotPosition !== -1) {\n precision = valueString.length - dotPosition - 1\n }\n return precision\n }\n const _increase = (val: number) => {\n if (!isNumber(val)) return data.currentValue\n const precisionFactor = Math.pow(10, numPrecision.value)\n // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n val = isNumber(val) ? val : NaN\n return toPrecision(\n (precisionFactor * val + precisionFactor * props.step) / precisionFactor\n )\n }\n const _decrease = (val: number) => {\n if (!isNumber(val)) return data.currentValue\n const precisionFactor = Math.pow(10, numPrecision.value)\n // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n val = isNumber(val) ? val : NaN\n return toPrecision(\n (precisionFactor * val - precisionFactor * props.step) / precisionFactor\n )\n }\n const increase = () => {\n if (inputNumberDisabled.value \|\| maxDisabled.value) return\n const value = props.modelValue \|\| 0\n const newVal = _increase(value)\n setCurrentValue(newVal)\n }\n const decrease = () => {\n if (inputNumberDisabled.value \|\| minDisabled.value) return\n const value = props.modelValue \|\| 0\n const newVal = _decrease(value)\n setCurrentValue(newVal)\n }\n const setCurrentValue = (newVal: number) => {\n const oldVal = data.currentValue\n if (typeof newVal === 'number' && props.precision !== undefined) {\n newVal = toPrecision(newVal, props.precision)\n }\n if (newVal !== undefined && newVal >= props.max) newVal = props.max\n if (newVal !== undefined && newVal <= props.min) newVal = props.min\n if (oldVal === newVal) return\n if (!isNumber(newVal)) {\n newVal = NaN\n }\n data.userInput = null\n emit('update:modelValue', newVal)\n emit('input', newVal)\n emit('change', newVal, oldVal)\n data.currentValue = newVal\n }\n const handleInput = (value: string) => {\n return (data.userInput = value)\n }\n const handleInputChange = (value: string) => {\n const newVal = Number(value)\n if ((isNumber(newVal) && !Number.isNaN(newVal)) \|\| value === '') {\n setCurrentValue(newVal)\n }\n data.userInput = null\n }\n\n const focus = () => {\n input.value?.focus?.()\n }\n\n const blur = () => {\n input.value?.blur?.()\n }\n\n watch(\n () => props.modelValue,\n (value) => {\n let newVal = Number(value)\n if (!isNaN(newVal)) {\n if (props.stepStrictly) {\n const stepPrecision = getPrecision(props.step)\n const precisionFactor = Math.pow(10, stepPrecision)\n newVal =\n (Math.round(newVal / props.step) * precisionFactor * props.step) /\n precisionFactor\n }\n if (props.precision !== undefined) {\n newVal = toPrecision(newVal, props.precision)\n }\n\n if (newVal > props.max) {\n newVal = props.max\n emit('update:modelValue', newVal)\n }\n if (newVal < props.min) {\n newVal = props.min\n emit('update:modelValue', newVal)\n }\n }\n data.currentValue = newVal\n data.userInput = null\n },\n { immediate: true }\n )\n onMounted(() => {\n const innerInput = input.value?.input as HTMLInputElement\n innerInput.setAttribute('role', 'spinbutton')\n innerInput.setAttribute('aria-valuemax', String(props.max))\n innerInput.setAttribute('aria-valuemin', String(props.min))\n innerInput.setAttribute('aria-valuenow', String(data.currentValue))\n innerInput.setAttribute(\n 'aria-disabled',\n String(inputNumberDisabled.value)\n )\n if (!isNumber(props.modelValue)) {\n emit('update:modelValue', Number(props.modelValue))\n }\n })\n onUpdated(() => {\n const innerInput = input.value?.input\n innerInput.setAttribute('aria-valuenow', data.currentValue)\n })\n return {\n input,\n displayValue,\n handleInput,\n handleInputChange,\n controlsAtRight,\n decrease,\n increase,\n inputNumberSize,\n inputNumberDisabled,\n maxDisabled,\n minDisabled,\n focus,\n blur,\n }\n },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;eAcW;;kBAGG;;UAER;;;;;;;;;;;;KAMM;sCADR;;UAGE,KAAK,mBAACA,4CAEmB;UADzB;;;UAIA;8BACE;kCAA+B;;;;;;;;;;;MAKjC;MACA;MACC;~~oCACyB~~;~~gBACd;;MAEX~~,~~MAAM~~;~~MACN;MACA~~,aAAQ;MACR~~,eAAU~~;~~WACL,EAAE,UAAK;;;;;;~~"}
1	+ {"version":3,"file":"input-number.vue_vue_type_template_id_dec60af6_lang.mjs","sources":["../../../../../../packages/components/input-number/src/input-number.vue?vue&type=template&id=dec60af6&lang.js"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'el-input-number',\n inputNumberSize ? 'el-input-number--' + inputNumberSize : '',\n { 'is-disabled': inputNumberDisabled },\n { 'is-without-controls': !controls },\n { 'is-controls-right': controlsAtRight },\n ]\"\n @dragstart.prevent\n >\n <span\n v-if=\"controls\"\n v-repeat-click=\"decrease\"\n class=\"el-input-number__decrease\"\n role=\"button\"\n :class=\"{ 'is-disabled': minDisabled }\"\n @keydown.enter=\"decrease\"\n >\n <el-icon>\n <arrow-down v-if=\"controlsAtRight\" />\n <minus v-else />\n </el-icon>\n </span>\n <span\n v-if=\"controls\"\n v-repeat-click=\"increase\"\n class=\"el-input-number__increase\"\n role=\"button\"\n :class=\"{ 'is-disabled': maxDisabled }\"\n @keydown.enter=\"increase\"\n >\n <el-icon>\n <arrow-up v-if=\"controlsAtRight\" />\n <plus v-else />\n </el-icon>\n </span>\n <el-input\n ref=\"input\"\n type=\"number\"\n :step=\"step\"\n :model-value=\"displayValue\"\n :placeholder=\"placeholder\"\n :disabled=\"inputNumberDisabled\"\n :size=\"inputNumberSize\"\n :max=\"max\"\n :min=\"min\"\n :name=\"name\"\n :label=\"label\"\n :validate-event=\"false\"\n @keydown.up.prevent=\"increase\"\n @keydown.down.prevent=\"decrease\"\n @blur=\"handleBlur\"\n @focus=\"handleFocus\"\n @input=\"handleInput\"\n @change=\"handleInputChange\"\n />\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n reactive,\n ref,\n watch,\n onMounted,\n onUpdated,\n} from 'vue'\n\nimport { ElIcon } from '@element-plus/components/icon'\nimport { RepeatClick } from '@element-plus/directives'\nimport { useDisabled, useFormItem, useSize } from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { isNumber } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { ArrowUp, ArrowDown, Plus, Minus } from '@element-plus/icons-vue'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n currentValue: number \| undefined\n userInput: null \| number \| string\n}\n\nexport default defineComponent({\n name: 'ElInputNumber',\n components: {\n ElInput,\n ElIcon,\n ArrowUp,\n ArrowDown,\n Plus,\n Minus,\n },\n directives: {\n RepeatClick,\n },\n props: inputNumberProps,\n emits: inputNumberEmits,\n setup(props, { emit }) {\n const input = ref<ComponentPublicInstance<typeof ElInput>>()\n const data = reactive<IData>({\n currentValue: props.modelValue,\n userInput: null,\n })\n const { formItem } = useFormItem()\n\n const minDisabled = computed(() => _decrease(props.modelValue) < props.min)\n const maxDisabled = computed(() => _increase(props.modelValue) > props.max)\n\n const numPrecision = computed(() => {\n const stepPrecision = getPrecision(props.step)\n if (props.precision !== undefined) {\n if (stepPrecision > props.precision) {\n debugWarn(\n 'InputNumber',\n 'precision should not be less than the decimal places of step'\n )\n }\n return props.precision\n } else {\n return Math.max(getPrecision(props.modelValue), stepPrecision)\n }\n })\n const controlsAtRight = computed(() => {\n return props.controls && props.controlsPosition === 'right'\n })\n\n const inputNumberSize = useSize()\n const inputNumberDisabled = useDisabled()\n\n const displayValue = computed(() => {\n if (data.userInput !== null) {\n return data.userInput\n }\n let currentValue: number \| string \| undefined = data.currentValue\n if (isNumber(currentValue)) {\n if (Number.isNaN(currentValue)) return ''\n if (props.precision !== undefined) {\n currentValue = currentValue.toFixed(props.precision)\n }\n }\n return currentValue\n })\n const toPrecision = (num: number, pre?: number) => {\n if (pre === undefined) pre = numPrecision.value\n return parseFloat(\n `${Math.round(num * Math.pow(10, pre)) / Math.pow(10, pre)}`\n )\n }\n const getPrecision = (value: number \| undefined) => {\n if (value === undefined) return 0\n const valueString = value.toString()\n const dotPosition = valueString.indexOf('.')\n let precision = 0\n if (dotPosition !== -1) {\n precision = valueString.length - dotPosition - 1\n }\n return precision\n }\n const _increase = (val: number) => {\n if (!isNumber(val)) return data.currentValue\n const precisionFactor = Math.pow(10, numPrecision.value)\n // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n val = isNumber(val) ? val : NaN\n return toPrecision(\n (precisionFactor * val + precisionFactor * props.step) / precisionFactor\n )\n }\n const _decrease = (val: number) => {\n if (!isNumber(val)) return data.currentValue\n const precisionFactor = Math.pow(10, numPrecision.value)\n // Solve the accuracy problem of JS decimal calculation by converting the value to integer.\n val = isNumber(val) ? val : NaN\n return toPrecision(\n (precisionFactor * val - precisionFactor * props.step) / precisionFactor\n )\n }\n const increase = () => {\n if (inputNumberDisabled.value \|\| maxDisabled.value) return\n const value = props.modelValue \|\| 0\n const newVal = _increase(value)\n setCurrentValue(newVal)\n }\n const decrease = () => {\n if (inputNumberDisabled.value \|\| minDisabled.value) return\n const value = props.modelValue \|\| 0\n const newVal = _decrease(value)\n setCurrentValue(newVal)\n }\n const setCurrentValue = (newVal: number) => {\n const oldVal = data.currentValue\n if (typeof newVal === 'number' && props.precision !== undefined) {\n newVal = toPrecision(newVal, props.precision)\n }\n if (newVal !== undefined && newVal >= props.max) newVal = props.max\n if (newVal !== undefined && newVal <= props.min) newVal = props.min\n if (oldVal === newVal) return\n if (!isNumber(newVal)) {\n newVal = NaN\n }\n data.userInput = null\n emit('update:modelValue', newVal)\n emit('input', newVal)\n emit('change', newVal, oldVal)\n formItem?.validate?.('change')\n data.currentValue = newVal\n }\n const handleInput = (value: string) => {\n return (data.userInput = value)\n }\n const handleInputChange = (value: string) => {\n const newVal = Number(value)\n if ((isNumber(newVal) && !Number.isNaN(newVal)) \|\| value === '') {\n setCurrentValue(newVal)\n }\n data.userInput = null\n }\n\n const focus = () => {\n input.value?.focus?.()\n }\n\n const blur = () => {\n input.value?.blur?.()\n }\n\n const handleFocus = (event: MouseEvent) => {\n emit('focus', event)\n }\n\n const handleBlur = (event: MouseEvent) => {\n emit('blur', event)\n formItem?.validate?.('blur')\n }\n\n watch(\n () => props.modelValue,\n (value) => {\n let newVal = Number(value)\n if (!isNaN(newVal)) {\n if (props.stepStrictly) {\n const stepPrecision = getPrecision(props.step)\n const precisionFactor = Math.pow(10, stepPrecision)\n newVal =\n (Math.round(newVal / props.step) * precisionFactor * props.step) /\n precisionFactor\n }\n if (props.precision !== undefined) {\n newVal = toPrecision(newVal, props.precision)\n }\n\n if (newVal > props.max) {\n newVal = props.max\n emit('update:modelValue', newVal)\n }\n if (newVal < props.min) {\n newVal = props.min\n emit('update:modelValue', newVal)\n }\n }\n data.currentValue = newVal\n data.userInput = null\n },\n { immediate: true }\n )\n onMounted(() => {\n const innerInput = input.value?.input as HTMLInputElement\n innerInput.setAttribute('role', 'spinbutton')\n innerInput.setAttribute('aria-valuemax', String(props.max))\n innerInput.setAttribute('aria-valuemin', String(props.min))\n innerInput.setAttribute('aria-valuenow', String(data.currentValue))\n innerInput.setAttribute(\n 'aria-disabled',\n String(inputNumberDisabled.value)\n )\n if (!isNumber(props.modelValue)) {\n emit('update:modelValue', Number(props.modelValue))\n }\n })\n onUpdated(() => {\n const innerInput = input.value?.input\n innerInput.setAttribute('aria-valuenow', data.currentValue)\n })\n return {\n input,\n displayValue,\n handleInput,\n handleInputChange,\n controlsAtRight,\n decrease,\n increase,\n inputNumberSize,\n inputNumberDisabled,\n maxDisabled,\n minDisabled,\n focus,\n blur,\n handleFocus,\n handleBlur,\n }\n },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;eAcW;;kBAGG;;UAER;;;;;;;;;;;;KAMM;sCADR;;UAGE,KAAK,mBAACA,4CAEmB;UADzB;;;UAIA;8BACE;kCAA+B;;;;;;;;;;;MAKjC;MACA;MACC;MACA;gBACW;;;MAGX,aAAQ;MACR,aAAQ;MACR;MACA;;;;;;;"}

package/es/components/message/src/message-method.mjs CHANGED Viewed

@@ -1,8 +1,9 @@
 import { isVNode, createVNode, render } from 'vue';
 import { isClient } from '@vueuse/core';
-import '../../../utils/util.mjs';
+import { isNumber } from '../../../utils/util.mjs';
 import { PopupManager } from '../../../utils/popup-manager.mjs';
 import { debugWarn } from '../../../utils/error.mjs';
+import { messageConfig } from '../../config-provider/src/config-provider.mjs';
 import './message2.mjs';
 import { messageTypes } from './message.mjs';
 import script from './message.vue_vue_type_script_lang.mjs';
@@ -12,6 +13,9 @@ let seed = 1;
 const message = function(options = {}) {
   if (!isClient)
     return { close: () => void 0 };
+  if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {
+    return { close: () => void 0 };
+  }
   if (!isVNode(options) && typeof options === "object" && options.grouping && !isVNode(options.message) && instances.length) {
     const tempVm = instances.find((item) => {
       var _a, _b, _c;

package/es/components/message/src/message-method.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message-method.mjs","sources":["../../../../../../packages/components/message/src/message-method.ts"],"sourcesContent":["import { createVNode, render } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { isVNode } from '@element-plus/utils/util'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { debugWarn } from '@element-plus/utils/error'\nimport MessageConstructor from './message.vue'\nimport { messageTypes } from './message'\n\nimport type { Message, MessageFn, MessageQueue, MessageProps } from './message'\nimport type { ComponentPublicInstance, VNode } from 'vue'\n\nconst instances: MessageQueue = []\nlet seed = 1\n\n// TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.\n\nconst message: MessageFn & Partial<Message> = function (options = {}) {\n if (!isClient) return { close: () => undefined }\n\n if (\n !isVNode(options) &&\n typeof options === 'object' &&\n options.grouping &&\n !isVNode(options.message) &&\n instances.length\n ) {\n const tempVm: any = instances.find(\n (item) =>\n `${item.vm.props?.message ?? ''}` ===\n `${(options as any).message ?? ''}`\n )\n if (tempVm) {\n tempVm.vm.component!.props.repeatNum += 1\n tempVm.vm.component!.props.type = options?.type\n return {\n close: () =>\n ((\n vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n ).visible = false),\n }\n }\n }\n\n if (typeof options === 'string' \|\| isVNode(options)) {\n options = { message: options }\n }\n\n let verticalOffset = options.offset \|\| 20\n instances.forEach(({ vm }) => {\n verticalOffset += (vm.el?.offsetHeight \|\| 0) + 16\n })\n verticalOffset += 16\n\n const id = `message_${seed++}`\n const userOnClose = options.onClose\n const props: Partial<MessageProps> = {\n zIndex: PopupManager.nextZIndex(),\n offset: verticalOffset,\n ...options,\n id,\n onClose: () => {\n close(id, userOnClose)\n },\n }\n\n let appendTo: HTMLElement \| null = document.body\n if (options.appendTo instanceof HTMLElement) {\n appendTo = options.appendTo\n } else if (typeof options.appendTo === 'string') {\n appendTo = document.querySelector(options.appendTo)\n }\n // should fallback to default value with a warning\n if (!(appendTo instanceof HTMLElement)) {\n debugWarn(\n 'ElMessage',\n 'the appendTo option is not an HTMLElement. Falling back to document.body.'\n )\n appendTo = document.body\n }\n\n const container = document.createElement('div')\n\n container.className = `container_${id}`\n\n const message = props.message\n const vm = createVNode(\n MessageConstructor,\n props,\n isVNode(props.message) ? { default: () => message } : null\n )\n\n // clean message element preventing mem leak\n vm.props!.onDestroy = () => {\n render(null, container)\n // since the element is destroy, then the VNode should be collected by GC as well\n // we do not want cause any mem leak because we have returned vm as a reference to users\n // so that we manually set it to false.\n }\n\n render(vm, container)\n // instances will remove this item when close function gets called. So we do not need to worry about it.\n instances.push({ vm })\n appendTo.appendChild(container.firstElementChild!)\n\n return {\n // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n // for out component, so that all closing steps will not be skipped.\n close: () =>\n ((\n vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n ).visible = false),\n }\n}\n\nmessageTypes.forEach((type) => {\n message[type] = (options = {}) => {\n if (typeof options === 'string' \|\| isVNode(options)) {\n options = {\n message: options,\n }\n }\n return message({\n ...options,\n type,\n })\n }\n})\n\nexport function close(id: string, userOnClose?: (vm: VNode) => void): void {\n const idx = instances.findIndex(({ vm }) => id === vm.component!.props.id)\n if (idx === -1) return\n\n const { vm } = instances[idx]\n if (!vm) return\n userOnClose?.(vm)\n\n const removedHeight = vm.el!.offsetHeight\n instances.splice(idx, 1)\n\n // adjust other instances vertical offset\n const len = instances.length\n if (len < 1) return\n for (let i = idx; i < len; i++) {\n const pos =\n parseInt(instances[i].vm.el!.style['top'], 10) - removedHeight - 16\n\n instances[i].vm.component!.props.offset = pos\n }\n}\n\nexport function closeAll(): void {\n for (let i = instances.length - 1; i >= 0; i--) {\n const instance = instances[i].vm.component\n ;(instance?.proxy as any)?.close()\n }\n}\n\nmessage.closeAll = closeAll\n\nexport default message as Message\n"],"names":["MessageConstructor"],"mappings":"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"}
1	+ {"version":3,"file":"message-method.mjs","sources":["../../../../../../packages/components/message/src/message-method.ts"],"sourcesContent":["import { createVNode, render } from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { isVNode, isNumber } from '@element-plus/utils/util'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { debugWarn } from '@element-plus/utils/error'\nimport { messageConfig } from '@element-plus/components/config-provider/src/config-provider'\nimport MessageConstructor from './message.vue'\nimport { messageTypes } from './message'\n\nimport type { Message, MessageFn, MessageQueue, MessageProps } from './message'\nimport type { ComponentPublicInstance, VNode } from 'vue'\n\nconst instances: MessageQueue = []\nlet seed = 1\n\n// TODO: Since Notify.ts is basically the same like this file. So we could do some encapsulation against them to reduce code duplication.\n\nconst message: MessageFn & Partial<Message> = function (options = {}) {\n if (!isClient) return { close: () => undefined }\n if (isNumber(messageConfig.max) && instances.length >= messageConfig.max) {\n return { close: () => undefined }\n }\n\n if (\n !isVNode(options) &&\n typeof options === 'object' &&\n options.grouping &&\n !isVNode(options.message) &&\n instances.length\n ) {\n const tempVm: any = instances.find(\n (item) =>\n `${item.vm.props?.message ?? ''}` ===\n `${(options as any).message ?? ''}`\n )\n if (tempVm) {\n tempVm.vm.component!.props.repeatNum += 1\n tempVm.vm.component!.props.type = options?.type\n return {\n close: () =>\n ((\n vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n ).visible = false),\n }\n }\n }\n\n if (typeof options === 'string' \|\| isVNode(options)) {\n options = { message: options }\n }\n\n let verticalOffset = options.offset \|\| 20\n instances.forEach(({ vm }) => {\n verticalOffset += (vm.el?.offsetHeight \|\| 0) + 16\n })\n verticalOffset += 16\n\n const id = `message_${seed++}`\n const userOnClose = options.onClose\n const props: Partial<MessageProps> = {\n zIndex: PopupManager.nextZIndex(),\n offset: verticalOffset,\n ...options,\n id,\n onClose: () => {\n close(id, userOnClose)\n },\n }\n\n let appendTo: HTMLElement \| null = document.body\n if (options.appendTo instanceof HTMLElement) {\n appendTo = options.appendTo\n } else if (typeof options.appendTo === 'string') {\n appendTo = document.querySelector(options.appendTo)\n }\n // should fallback to default value with a warning\n if (!(appendTo instanceof HTMLElement)) {\n debugWarn(\n 'ElMessage',\n 'the appendTo option is not an HTMLElement. Falling back to document.body.'\n )\n appendTo = document.body\n }\n\n const container = document.createElement('div')\n\n container.className = `container_${id}`\n\n const message = props.message\n const vm = createVNode(\n MessageConstructor,\n props,\n isVNode(props.message) ? { default: () => message } : null\n )\n\n // clean message element preventing mem leak\n vm.props!.onDestroy = () => {\n render(null, container)\n // since the element is destroy, then the VNode should be collected by GC as well\n // we do not want cause any mem leak because we have returned vm as a reference to users\n // so that we manually set it to false.\n }\n\n render(vm, container)\n // instances will remove this item when close function gets called. So we do not need to worry about it.\n instances.push({ vm })\n appendTo.appendChild(container.firstElementChild!)\n\n return {\n // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n // for out component, so that all closing steps will not be skipped.\n close: () =>\n ((\n vm.component!.proxy as ComponentPublicInstance<{ visible: boolean }>\n ).visible = false),\n }\n}\n\nmessageTypes.forEach((type) => {\n message[type] = (options = {}) => {\n if (typeof options === 'string' \|\| isVNode(options)) {\n options = {\n message: options,\n }\n }\n return message({\n ...options,\n type,\n })\n }\n})\n\nexport function close(id: string, userOnClose?: (vm: VNode) => void): void {\n const idx = instances.findIndex(({ vm }) => id === vm.component!.props.id)\n if (idx === -1) return\n\n const { vm } = instances[idx]\n if (!vm) return\n userOnClose?.(vm)\n\n const removedHeight = vm.el!.offsetHeight\n instances.splice(idx, 1)\n\n // adjust other instances vertical offset\n const len = instances.length\n if (len < 1) return\n for (let i = idx; i < len; i++) {\n const pos =\n parseInt(instances[i].vm.el!.style['top'], 10) - removedHeight - 16\n\n instances[i].vm.component!.props.offset = pos\n }\n}\n\nexport function closeAll(): void {\n for (let i = instances.length - 1; i >= 0; i--) {\n const instance = instances[i].vm.component\n ;(instance?.proxy as any)?.close()\n }\n}\n\nmessage.closeAll = closeAll\n\nexport default message as Message\n"],"names":["MessageConstructor"],"mappings":"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"}

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

@@ -1,5 +1,8 @@
 import type { VNode, ExtractPropTypes, Component } from 'vue';
 export declare const messageTypes: readonly ["success", "info", "warning", "error"];
+export interface MessageConfigContext {
+    max?: number;
+}
 export declare const messageProps: {
     readonly customClass: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
     readonly center: import("element-plus/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;

package/es/components/message/src/message.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message.mjs","sources":["../../../../../../packages/components/message/src/message.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\n\nimport type { VNode, ExtractPropTypes, Component } from 'vue'\n\nexport const messageTypes = ['success', 'info', 'warning', 'error'] as const\n\nexport const messageProps = buildProps({\n customClass: {\n type: String,\n default: '',\n },\n center: {\n type: Boolean,\n default: false,\n },\n dangerouslyUseHTMLString: {\n type: Boolean,\n default: false,\n },\n duration: {\n type: Number,\n default: 3000,\n },\n icon: {\n type: definePropType<string \| Component>([String, Object]),\n default: '',\n },\n id: {\n type: String,\n default: '',\n },\n message: {\n type: definePropType<string \| VNode>([String, Object]),\n default: '',\n },\n onClose: {\n type: definePropType<() => void>(Function),\n required: false,\n },\n showClose: {\n type: Boolean,\n default: false,\n },\n type: {\n type: String,\n values: messageTypes,\n default: 'info',\n },\n offset: {\n type: Number,\n default: 20,\n },\n zIndex: {\n type: Number,\n default: 0,\n },\n grouping: {\n type: Boolean,\n default: false,\n },\n repeatNum: {\n type: Number,\n default: 1,\n },\n} as const)\nexport type MessageProps = ExtractPropTypes<typeof messageProps>\n\nexport const messageEmits = {\n destroy: () => true,\n}\nexport type MessageEmits = typeof messageEmits\n\nexport type MessageOptions = Omit<MessageProps, 'id'> & {\n appendTo?: HTMLElement \| string\n}\nexport type MessageOptionsTyped = Omit<MessageOptions, 'type'>\n\nexport interface MessageHandle {\n close: () => void\n}\n\nexport type MessageParams = Partial<MessageOptions> \| string \| VNode\nexport type MessageParamsTyped = Partial<MessageOptionsTyped> \| string \| VNode\n\nexport type MessageFn = ((options?: MessageParams) => MessageHandle) & {\n closeAll(): void\n}\nexport type MessageTypedFn = (options?: MessageParamsTyped) => MessageHandle\n\nexport interface Message extends MessageFn {\n success: MessageTypedFn\n warning: MessageTypedFn\n info: MessageTypedFn\n error: MessageTypedFn\n}\n\ntype MessageQueueItem = {\n vm: VNode\n}\n\nexport type MessageQueue = MessageQueueItem[]\n"],"names":[],"mappings":";;AACY,MAAC,YAAY,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE;AACxD,MAAC,YAAY,GAAG,UAAU,CAAC;AACvC,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,wBAAwB,EAAE;AAC5B,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,IAAI,QAAQ,EAAE,KAAK;AACnB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,YAAY;AACxB,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,CAAC,EAAE;AACS,MAAC,YAAY,GAAG;AAC5B,EAAE,OAAO,EAAE,MAAM,IAAI;AACrB;;;;"}
1	+ {"version":3,"file":"message.mjs","sources":["../../../../../../packages/components/message/src/message.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-plus/utils/props'\n\nimport type { VNode, ExtractPropTypes, Component } from 'vue'\n\nexport const messageTypes = ['success', 'info', 'warning', 'error'] as const\n\nexport interface MessageConfigContext {\n max?: number\n}\n\nexport const messageProps = buildProps({\n customClass: {\n type: String,\n default: '',\n },\n center: {\n type: Boolean,\n default: false,\n },\n dangerouslyUseHTMLString: {\n type: Boolean,\n default: false,\n },\n duration: {\n type: Number,\n default: 3000,\n },\n icon: {\n type: definePropType<string \| Component>([String, Object]),\n default: '',\n },\n id: {\n type: String,\n default: '',\n },\n message: {\n type: definePropType<string \| VNode>([String, Object]),\n default: '',\n },\n onClose: {\n type: definePropType<() => void>(Function),\n required: false,\n },\n showClose: {\n type: Boolean,\n default: false,\n },\n type: {\n type: String,\n values: messageTypes,\n default: 'info',\n },\n offset: {\n type: Number,\n default: 20,\n },\n zIndex: {\n type: Number,\n default: 0,\n },\n grouping: {\n type: Boolean,\n default: false,\n },\n repeatNum: {\n type: Number,\n default: 1,\n },\n} as const)\nexport type MessageProps = ExtractPropTypes<typeof messageProps>\n\nexport const messageEmits = {\n destroy: () => true,\n}\nexport type MessageEmits = typeof messageEmits\n\nexport type MessageOptions = Omit<MessageProps, 'id'> & {\n appendTo?: HTMLElement \| string\n}\nexport type MessageOptionsTyped = Omit<MessageOptions, 'type'>\n\nexport interface MessageHandle {\n close: () => void\n}\n\nexport type MessageParams = Partial<MessageOptions> \| string \| VNode\nexport type MessageParamsTyped = Partial<MessageOptionsTyped> \| string \| VNode\n\nexport type MessageFn = ((options?: MessageParams) => MessageHandle) & {\n closeAll(): void\n}\nexport type MessageTypedFn = (options?: MessageParamsTyped) => MessageHandle\n\nexport interface Message extends MessageFn {\n success: MessageTypedFn\n warning: MessageTypedFn\n info: MessageTypedFn\n error: MessageTypedFn\n}\n\ntype MessageQueueItem = {\n vm: VNode\n}\n\nexport type MessageQueue = MessageQueueItem[]\n"],"names":[],"mappings":";;AACY,MAAC,YAAY,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE;AACxD,MAAC,YAAY,GAAG,UAAU,CAAC;AACvC,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,wBAAwB,EAAE;AAC5B,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,EAAE,EAAE;AACN,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,IAAI,QAAQ,EAAE,KAAK;AACnB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,YAAY;AACxB,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,CAAC,EAAE;AACS,MAAC,YAAY,GAAG;AAC5B,EAAE,OAAO,EAAE,MAAM,IAAI;AACrB;;;;"}

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

@@ -45,10 +45,10 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "info" | "error", unknown>;
     icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
-    zIndex: number;
     message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>>, unknown, unknown>;
+    zIndex: number;
     offset: number;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     id: string;
@@ -65,10 +65,10 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "success" | "warning" | "info" | "error", unknown>;
     icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
-    zIndex: number;
     message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>>, unknown, unknown>;
+    zIndex: number;
     offset: number;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     onClose: () => void;

package/es/components/message-box/src/index.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue"],"sourcesContent":["<template>\n <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n <el-overlay\n v-show=\"visible\"\n :z-index=\"zIndex\"\n :overlay-class=\"['is-message-box', modalClass]\"\n :mask=\"modal\"\n @click.self=\"handleWrapperClick\"\n >\n <div\n ref=\"root\"\n v-trap-focus\n :aria-label=\"title \|\| 'dialog'\"\n aria-modal=\"true\"\n :class=\"[\n 'el-message-box',\n customClass,\n { 'el-message-box--center': center },\n ]\"\n :style=\"customStyle\"\n >\n <div\n v-if=\"title !== null && title !== undefined\"\n class=\"el-message-box__header\"\n >\n <div class=\"el-message-box__title\">\n <el-icon\n v-if=\"iconComponent && center\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <span>{{ title }}</span>\n </div>\n <button\n v-if=\"showClose\"\n type=\"button\"\n class=\"el-message-box__headerbtn\"\n aria-label=\"Close\"\n @click=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n @keydown.prevent.enter=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n >\n <el-icon class=\"el-message-box__close\"><close /></el-icon>\n </button>\n </div>\n <div class=\"el-message-box__content\">\n <div class=\"el-message-box__container\">\n <el-icon\n v-if=\"iconComponent && !center && hasMessage\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n <slot>\n <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n <p v-else v-html=\"message\"></p>\n </slot>\n </div>\n </div>\n <div v-show=\"showInput\" class=\"el-message-box__input\">\n <el-input\n ref=\"inputRef\"\n v-model=\"inputValue\"\n :type=\"inputType\"\n :placeholder=\"inputPlaceholder\"\n :class=\"{ invalid: validateError }\"\n @keydown.prevent.enter=\"handleInputEnter\"\n />\n <div\n class=\"el-message-box__errormsg\"\n :style=\"{\n visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n }\"\n >\n {{ editorErrorMessage }}\n </div>\n </div>\n </div>\n <div class=\"el-message-box__btns\">\n <el-button\n v-if=\"showCancelButton\"\n :loading=\"cancelButtonLoading\"\n :class=\"[cancelButtonClass]\"\n :round=\"roundButton\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('cancel')\"\n @keydown.prevent.enter=\"handleAction('cancel')\"\n >\n {{ cancelButtonText \|\| t('el.messagebox.cancel') }}\n </el-button>\n <el-button\n v-show=\"showConfirmButton\"\n ref=\"confirmRef\"\n type=\"primary\"\n :loading=\"confirmButtonLoading\"\n :class=\"[confirmButtonClasses]\"\n :round=\"roundButton\"\n :disabled=\"confirmButtonDisabled\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('confirm')\"\n @keydown.prevent.enter=\"handleAction('confirm')\"\n >\n {{ confirmButtonText \|\| t('el.messagebox.confirm') }}\n </el-button>\n </div>\n </div>\n </el-overlay>\n </transition>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n nextTick,\n onMounted,\n onBeforeUnmount,\n computed,\n watch,\n reactive,\n ref,\n toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n useModal,\n useLockscreen,\n useLocale,\n useRestoreActive,\n usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n Action,\n MessageBoxState,\n MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n name: 'ElMessageBox',\n directives: {\n TrapFocus,\n },\n components: {\n ElButton,\n ElInput,\n ElOverlay,\n ElIcon,\n ...TypeComponents,\n },\n inheritAttrs: false,\n props: {\n buttonSize: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n modal: {\n type: Boolean,\n default: true,\n },\n lockScroll: {\n type: Boolean,\n default: true,\n },\n showClose: {\n type: Boolean,\n default: true,\n },\n closeOnClickModal: {\n type: Boolean,\n default: true,\n },\n closeOnPressEscape: {\n type: Boolean,\n default: true,\n },\n closeOnHashChange: {\n type: Boolean,\n default: true,\n },\n center: Boolean,\n roundButton: {\n default: false,\n type: Boolean,\n },\n container: {\n type: String, // default append to body\n default: 'body',\n },\n boxType: {\n type: String as PropType<MessageBoxType>,\n default: '',\n },\n },\n emits: ['vanish', 'action'],\n setup(props, { emit }) {\n // const popup = usePopup(props, doClose)\n const { t } = useLocale()\n const visible = ref(false)\n // s represents state\n const state = reactive<MessageBoxState>({\n beforeClose: null,\n callback: null,\n cancelButtonText: '',\n cancelButtonClass: '',\n confirmButtonText: '',\n confirmButtonClass: '',\n customClass: '',\n customStyle: {},\n dangerouslyUseHTMLString: false,\n distinguishCancelAndClose: false,\n icon: '',\n inputPattern: null,\n inputPlaceholder: '',\n inputType: 'text',\n inputValue: null,\n inputValidator: null,\n inputErrorMessage: '',\n message: null,\n modalFade: true,\n modalClass: '',\n showCancelButton: false,\n showConfirmButton: true,\n type: '',\n title: undefined,\n showInput: false,\n action: '' as Action,\n confirmButtonLoading: false,\n cancelButtonLoading: false,\n confirmButtonDisabled: false,\n editorErrorMessage: '',\n // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n // seemed ok for now without this state.\n // isOnComposition: false, // temporary remove\n validateError: false,\n zIndex: PopupManager.nextZIndex(),\n })\n\n const typeClass = computed(() => {\n const type = state.type\n return type && TypeComponentsMap[type]\n ? `el-message-box-icon--${type}`\n : ''\n })\n\n const iconComponent = computed(\n () => state.icon \|\| TypeComponentsMap[state.type] \|\| ''\n )\n const hasMessage = computed(() => !!state.message)\n const inputRef = ref<ComponentPublicInstance>(null)\n const confirmRef = ref<ComponentPublicInstance>(null)\n\n const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n watch(\n () => state.inputValue,\n async (val) => {\n await nextTick()\n if (props.boxType === 'prompt' && val !== null) {\n validate()\n }\n },\n { immediate: true }\n )\n\n watch(\n () => visible.value,\n (val) => {\n if (val) {\n if (props.boxType === 'alert' \|\| props.boxType === 'confirm') {\n nextTick().then(() => {\n confirmRef.value?.$el?.focus?.()\n })\n }\n state.zIndex = PopupManager.nextZIndex()\n }\n if (props.boxType !== 'prompt') return\n if (val) {\n nextTick().then(() => {\n if (inputRef.value && inputRef.value.$el) {\n getInputElement().focus()\n }\n })\n } else {\n state.editorErrorMessage = ''\n state.validateError = false\n }\n }\n )\n\n onMounted(async () => {\n await nextTick()\n if (props.closeOnHashChange) {\n on(window, 'hashchange', doClose)\n }\n })\n\n onBeforeUnmount(() => {\n if (props.closeOnHashChange) {\n off(window, 'hashchange', doClose)\n }\n })\n\n function doClose() {\n if (!visible.value) return\n visible.value = false\n nextTick(() => {\n if (state.action) emit('action', state.action)\n })\n }\n\n const handleWrapperClick = () => {\n if (props.closeOnClickModal) {\n handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n }\n }\n\n const handleInputEnter = () => {\n if (state.inputType !== 'textarea') {\n return handleAction('confirm')\n }\n }\n\n const handleAction = (action: Action) => {\n if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n return\n }\n\n state.action = action\n\n if (state.beforeClose) {\n state.beforeClose?.(action, state, doClose)\n } else {\n doClose()\n }\n }\n\n const validate = () => {\n if (props.boxType === 'prompt') {\n const inputPattern = state.inputPattern\n if (inputPattern && !inputPattern.test(state.inputValue \|\| '')) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n const inputValidator = state.inputValidator\n if (typeof inputValidator === 'function') {\n const validateResult = inputValidator(state.inputValue)\n if (validateResult === false) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n if (typeof validateResult === 'string') {\n state.editorErrorMessage = validateResult\n state.validateError = true\n return false\n }\n }\n }\n state.editorErrorMessage = ''\n state.validateError = false\n return true\n }\n\n const getInputElement = () => {\n const inputRefs = inputRef.value.$refs\n return (inputRefs.input \|\| inputRefs.textarea) as HTMLElement\n }\n\n const handleClose = () => {\n handleAction('close')\n }\n\n // when close on press escape is disabled, pressing esc should not callout\n // any other message box and close any other dialog-ish elements\n // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n // props.beforeClose method to make a intermediate state by callout a message box\n // for some verification or alerting. then if we allow global event liek this\n // to dispatch, it could callout another message box.\n if (props.closeOnPressEscape) {\n useModal(\n {\n handleClose,\n },\n visible\n )\n } else {\n usePreventGlobal(\n visible,\n 'keydown',\n (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n )\n }\n\n // locks the screen to prevent scroll\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n // restore to prev active element.\n useRestoreActive(visible)\n\n return {\n ...toRefs(state),\n visible,\n hasMessage,\n typeClass,\n iconComponent,\n confirmButtonClasses,\n inputRef,\n confirmRef,\n doClose, // for outside usage\n handleClose, // for out side usage\n handleWrapperClick,\n handleInputEnter,\n handleAction,\n t,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue"],"sourcesContent":["<template>\n <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n <el-overlay\n v-show=\"visible\"\n :z-index=\"zIndex\"\n :overlay-class=\"['is-message-box', modalClass]\"\n :mask=\"modal\"\n @click.self=\"handleWrapperClick\"\n >\n <div\n ref=\"root\"\n v-trap-focus\n role=\"dialog\"\n :aria-label=\"title \|\| 'dialog'\"\n aria-modal=\"true\"\n :class=\"[\n 'el-message-box',\n customClass,\n { 'el-message-box--center': center },\n ]\"\n :style=\"customStyle\"\n >\n <div\n v-if=\"title !== null && title !== undefined\"\n class=\"el-message-box__header\"\n >\n <div class=\"el-message-box__title\">\n <el-icon\n v-if=\"iconComponent && center\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <span>{{ title }}</span>\n </div>\n <button\n v-if=\"showClose\"\n type=\"button\"\n class=\"el-message-box__headerbtn\"\n aria-label=\"Close\"\n @click=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n @keydown.prevent.enter=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n >\n <el-icon class=\"el-message-box__close\"><close /></el-icon>\n </button>\n </div>\n <div class=\"el-message-box__content\">\n <div class=\"el-message-box__container\">\n <el-icon\n v-if=\"iconComponent && !center && hasMessage\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n <slot>\n <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n <p v-else v-html=\"message\"></p>\n </slot>\n </div>\n </div>\n <div v-show=\"showInput\" class=\"el-message-box__input\">\n <el-input\n ref=\"inputRef\"\n v-model=\"inputValue\"\n :type=\"inputType\"\n :placeholder=\"inputPlaceholder\"\n :class=\"{ invalid: validateError }\"\n @keydown.prevent.enter=\"handleInputEnter\"\n />\n <div\n class=\"el-message-box__errormsg\"\n :style=\"{\n visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n }\"\n >\n {{ editorErrorMessage }}\n </div>\n </div>\n </div>\n <div class=\"el-message-box__btns\">\n <el-button\n v-if=\"showCancelButton\"\n :loading=\"cancelButtonLoading\"\n :class=\"[cancelButtonClass]\"\n :round=\"roundButton\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('cancel')\"\n @keydown.prevent.enter=\"handleAction('cancel')\"\n >\n {{ cancelButtonText \|\| t('el.messagebox.cancel') }}\n </el-button>\n <el-button\n v-show=\"showConfirmButton\"\n ref=\"confirmRef\"\n type=\"primary\"\n :loading=\"confirmButtonLoading\"\n :class=\"[confirmButtonClasses]\"\n :round=\"roundButton\"\n :disabled=\"confirmButtonDisabled\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('confirm')\"\n @keydown.prevent.enter=\"handleAction('confirm')\"\n >\n {{ confirmButtonText \|\| t('el.messagebox.confirm') }}\n </el-button>\n </div>\n </div>\n </el-overlay>\n </transition>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n nextTick,\n onMounted,\n onBeforeUnmount,\n computed,\n watch,\n reactive,\n ref,\n toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n useModal,\n useLockscreen,\n useLocale,\n useRestoreActive,\n usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n Action,\n MessageBoxState,\n MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n name: 'ElMessageBox',\n directives: {\n TrapFocus,\n },\n components: {\n ElButton,\n ElInput,\n ElOverlay,\n ElIcon,\n ...TypeComponents,\n },\n inheritAttrs: false,\n props: {\n buttonSize: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n modal: {\n type: Boolean,\n default: true,\n },\n lockScroll: {\n type: Boolean,\n default: true,\n },\n showClose: {\n type: Boolean,\n default: true,\n },\n closeOnClickModal: {\n type: Boolean,\n default: true,\n },\n closeOnPressEscape: {\n type: Boolean,\n default: true,\n },\n closeOnHashChange: {\n type: Boolean,\n default: true,\n },\n center: Boolean,\n roundButton: {\n default: false,\n type: Boolean,\n },\n container: {\n type: String, // default append to body\n default: 'body',\n },\n boxType: {\n type: String as PropType<MessageBoxType>,\n default: '',\n },\n },\n emits: ['vanish', 'action'],\n setup(props, { emit }) {\n // const popup = usePopup(props, doClose)\n const { t } = useLocale()\n const visible = ref(false)\n // s represents state\n const state = reactive<MessageBoxState>({\n beforeClose: null,\n callback: null,\n cancelButtonText: '',\n cancelButtonClass: '',\n confirmButtonText: '',\n confirmButtonClass: '',\n customClass: '',\n customStyle: {},\n dangerouslyUseHTMLString: false,\n distinguishCancelAndClose: false,\n icon: '',\n inputPattern: null,\n inputPlaceholder: '',\n inputType: 'text',\n inputValue: null,\n inputValidator: null,\n inputErrorMessage: '',\n message: null,\n modalFade: true,\n modalClass: '',\n showCancelButton: false,\n showConfirmButton: true,\n type: '',\n title: undefined,\n showInput: false,\n action: '' as Action,\n confirmButtonLoading: false,\n cancelButtonLoading: false,\n confirmButtonDisabled: false,\n editorErrorMessage: '',\n // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n // seemed ok for now without this state.\n // isOnComposition: false, // temporary remove\n validateError: false,\n zIndex: PopupManager.nextZIndex(),\n })\n\n const typeClass = computed(() => {\n const type = state.type\n return type && TypeComponentsMap[type]\n ? `el-message-box-icon--${type}`\n : ''\n })\n\n const iconComponent = computed(\n () => state.icon \|\| TypeComponentsMap[state.type] \|\| ''\n )\n const hasMessage = computed(() => !!state.message)\n const inputRef = ref<ComponentPublicInstance>(null)\n const confirmRef = ref<ComponentPublicInstance>(null)\n\n const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n watch(\n () => state.inputValue,\n async (val) => {\n await nextTick()\n if (props.boxType === 'prompt' && val !== null) {\n validate()\n }\n },\n { immediate: true }\n )\n\n watch(\n () => visible.value,\n (val) => {\n if (val) {\n if (props.boxType === 'alert' \|\| props.boxType === 'confirm') {\n nextTick().then(() => {\n confirmRef.value?.$el?.focus?.()\n })\n }\n state.zIndex = PopupManager.nextZIndex()\n }\n if (props.boxType !== 'prompt') return\n if (val) {\n nextTick().then(() => {\n if (inputRef.value && inputRef.value.$el) {\n getInputElement().focus()\n }\n })\n } else {\n state.editorErrorMessage = ''\n state.validateError = false\n }\n }\n )\n\n onMounted(async () => {\n await nextTick()\n if (props.closeOnHashChange) {\n on(window, 'hashchange', doClose)\n }\n })\n\n onBeforeUnmount(() => {\n if (props.closeOnHashChange) {\n off(window, 'hashchange', doClose)\n }\n })\n\n function doClose() {\n if (!visible.value) return\n visible.value = false\n nextTick(() => {\n if (state.action) emit('action', state.action)\n })\n }\n\n const handleWrapperClick = () => {\n if (props.closeOnClickModal) {\n handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n }\n }\n\n const handleInputEnter = () => {\n if (state.inputType !== 'textarea') {\n return handleAction('confirm')\n }\n }\n\n const handleAction = (action: Action) => {\n if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n return\n }\n\n state.action = action\n\n if (state.beforeClose) {\n state.beforeClose?.(action, state, doClose)\n } else {\n doClose()\n }\n }\n\n const validate = () => {\n if (props.boxType === 'prompt') {\n const inputPattern = state.inputPattern\n if (inputPattern && !inputPattern.test(state.inputValue \|\| '')) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n const inputValidator = state.inputValidator\n if (typeof inputValidator === 'function') {\n const validateResult = inputValidator(state.inputValue)\n if (validateResult === false) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n if (typeof validateResult === 'string') {\n state.editorErrorMessage = validateResult\n state.validateError = true\n return false\n }\n }\n }\n state.editorErrorMessage = ''\n state.validateError = false\n return true\n }\n\n const getInputElement = () => {\n const inputRefs = inputRef.value.$refs\n return (inputRefs.input \|\| inputRefs.textarea) as HTMLElement\n }\n\n const handleClose = () => {\n handleAction('close')\n }\n\n // when close on press escape is disabled, pressing esc should not callout\n // any other message box and close any other dialog-ish elements\n // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n // props.beforeClose method to make a intermediate state by callout a message box\n // for some verification or alerting. then if we allow global event liek this\n // to dispatch, it could callout another message box.\n if (props.closeOnPressEscape) {\n useModal(\n {\n handleClose,\n },\n visible\n )\n } else {\n usePreventGlobal(\n visible,\n 'keydown',\n (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n )\n }\n\n // locks the screen to prevent scroll\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n // restore to prev active element.\n useRestoreActive(visible)\n\n return {\n ...toRefs(state),\n visible,\n hasMessage,\n typeClass,\n iconComponent,\n confirmButtonClasses,\n inputRef,\n confirmRef,\n doClose, // for outside usage\n handleClose, // for out side usage\n handleWrapperClick,\n handleInputEnter,\n handleAction,\n t,\n }\n },\n})\n</script>\n"],"names":[],"mappings":"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"}

package/es/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.mjs CHANGED Viewed

@@ -37,6 +37,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         default: withCtx(() => [
           withDirectives((openBlock(), createElementBlock("div", {
             ref: "root",
+            role: "dialog",
             "aria-label": _ctx.title || "dialog",
             "aria-modal": "true",
             class: normalizeClass([

package/es/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue_vue_type_template_id_7035e868_lang.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue?vue&type=template&id=7035e868&lang.js"],"sourcesContent":["<template>\n <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n <el-overlay\n v-show=\"visible\"\n :z-index=\"zIndex\"\n :overlay-class=\"['is-message-box', modalClass]\"\n :mask=\"modal\"\n @click.self=\"handleWrapperClick\"\n >\n <div\n ref=\"root\"\n v-trap-focus\n :aria-label=\"title \|\| 'dialog'\"\n aria-modal=\"true\"\n :class=\"[\n 'el-message-box',\n customClass,\n { 'el-message-box--center': center },\n ]\"\n :style=\"customStyle\"\n >\n <div\n v-if=\"title !== null && title !== undefined\"\n class=\"el-message-box__header\"\n >\n <div class=\"el-message-box__title\">\n <el-icon\n v-if=\"iconComponent && center\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <span>{{ title }}</span>\n </div>\n <button\n v-if=\"showClose\"\n type=\"button\"\n class=\"el-message-box__headerbtn\"\n aria-label=\"Close\"\n @click=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n @keydown.prevent.enter=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n >\n <el-icon class=\"el-message-box__close\"><close /></el-icon>\n </button>\n </div>\n <div class=\"el-message-box__content\">\n <div class=\"el-message-box__container\">\n <el-icon\n v-if=\"iconComponent && !center && hasMessage\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n <slot>\n <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n <p v-else v-html=\"message\"></p>\n </slot>\n </div>\n </div>\n <div v-show=\"showInput\" class=\"el-message-box__input\">\n <el-input\n ref=\"inputRef\"\n v-model=\"inputValue\"\n :type=\"inputType\"\n :placeholder=\"inputPlaceholder\"\n :class=\"{ invalid: validateError }\"\n @keydown.prevent.enter=\"handleInputEnter\"\n />\n <div\n class=\"el-message-box__errormsg\"\n :style=\"{\n visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n }\"\n >\n {{ editorErrorMessage }}\n </div>\n </div>\n </div>\n <div class=\"el-message-box__btns\">\n <el-button\n v-if=\"showCancelButton\"\n :loading=\"cancelButtonLoading\"\n :class=\"[cancelButtonClass]\"\n :round=\"roundButton\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('cancel')\"\n @keydown.prevent.enter=\"handleAction('cancel')\"\n >\n {{ cancelButtonText \|\| t('el.messagebox.cancel') }}\n </el-button>\n <el-button\n v-show=\"showConfirmButton\"\n ref=\"confirmRef\"\n type=\"primary\"\n :loading=\"confirmButtonLoading\"\n :class=\"[confirmButtonClasses]\"\n :round=\"roundButton\"\n :disabled=\"confirmButtonDisabled\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('confirm')\"\n @keydown.prevent.enter=\"handleAction('confirm')\"\n >\n {{ confirmButtonText \|\| t('el.messagebox.confirm') }}\n </el-button>\n </div>\n </div>\n </el-overlay>\n </transition>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n nextTick,\n onMounted,\n onBeforeUnmount,\n computed,\n watch,\n reactive,\n ref,\n toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n useModal,\n useLockscreen,\n useLocale,\n useRestoreActive,\n usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n Action,\n MessageBoxState,\n MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n name: 'ElMessageBox',\n directives: {\n TrapFocus,\n },\n components: {\n ElButton,\n ElInput,\n ElOverlay,\n ElIcon,\n ...TypeComponents,\n },\n inheritAttrs: false,\n props: {\n buttonSize: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n modal: {\n type: Boolean,\n default: true,\n },\n lockScroll: {\n type: Boolean,\n default: true,\n },\n showClose: {\n type: Boolean,\n default: true,\n },\n closeOnClickModal: {\n type: Boolean,\n default: true,\n },\n closeOnPressEscape: {\n type: Boolean,\n default: true,\n },\n closeOnHashChange: {\n type: Boolean,\n default: true,\n },\n center: Boolean,\n roundButton: {\n default: false,\n type: Boolean,\n },\n container: {\n type: String, // default append to body\n default: 'body',\n },\n boxType: {\n type: String as PropType<MessageBoxType>,\n default: '',\n },\n },\n emits: ['vanish', 'action'],\n setup(props, { emit }) {\n // const popup = usePopup(props, doClose)\n const { t } = useLocale()\n const visible = ref(false)\n // s represents state\n const state = reactive<MessageBoxState>({\n beforeClose: null,\n callback: null,\n cancelButtonText: '',\n cancelButtonClass: '',\n confirmButtonText: '',\n confirmButtonClass: '',\n customClass: '',\n customStyle: {},\n dangerouslyUseHTMLString: false,\n distinguishCancelAndClose: false,\n icon: '',\n inputPattern: null,\n inputPlaceholder: '',\n inputType: 'text',\n inputValue: null,\n inputValidator: null,\n inputErrorMessage: '',\n message: null,\n modalFade: true,\n modalClass: '',\n showCancelButton: false,\n showConfirmButton: true,\n type: '',\n title: undefined,\n showInput: false,\n action: '' as Action,\n confirmButtonLoading: false,\n cancelButtonLoading: false,\n confirmButtonDisabled: false,\n editorErrorMessage: '',\n // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n // seemed ok for now without this state.\n // isOnComposition: false, // temporary remove\n validateError: false,\n zIndex: PopupManager.nextZIndex(),\n })\n\n const typeClass = computed(() => {\n const type = state.type\n return type && TypeComponentsMap[type]\n ? `el-message-box-icon--${type}`\n : ''\n })\n\n const iconComponent = computed(\n () => state.icon \|\| TypeComponentsMap[state.type] \|\| ''\n )\n const hasMessage = computed(() => !!state.message)\n const inputRef = ref<ComponentPublicInstance>(null)\n const confirmRef = ref<ComponentPublicInstance>(null)\n\n const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n watch(\n () => state.inputValue,\n async (val) => {\n await nextTick()\n if (props.boxType === 'prompt' && val !== null) {\n validate()\n }\n },\n { immediate: true }\n )\n\n watch(\n () => visible.value,\n (val) => {\n if (val) {\n if (props.boxType === 'alert' \|\| props.boxType === 'confirm') {\n nextTick().then(() => {\n confirmRef.value?.$el?.focus?.()\n })\n }\n state.zIndex = PopupManager.nextZIndex()\n }\n if (props.boxType !== 'prompt') return\n if (val) {\n nextTick().then(() => {\n if (inputRef.value && inputRef.value.$el) {\n getInputElement().focus()\n }\n })\n } else {\n state.editorErrorMessage = ''\n state.validateError = false\n }\n }\n )\n\n onMounted(async () => {\n await nextTick()\n if (props.closeOnHashChange) {\n on(window, 'hashchange', doClose)\n }\n })\n\n onBeforeUnmount(() => {\n if (props.closeOnHashChange) {\n off(window, 'hashchange', doClose)\n }\n })\n\n function doClose() {\n if (!visible.value) return\n visible.value = false\n nextTick(() => {\n if (state.action) emit('action', state.action)\n })\n }\n\n const handleWrapperClick = () => {\n if (props.closeOnClickModal) {\n handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n }\n }\n\n const handleInputEnter = () => {\n if (state.inputType !== 'textarea') {\n return handleAction('confirm')\n }\n }\n\n const handleAction = (action: Action) => {\n if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n return\n }\n\n state.action = action\n\n if (state.beforeClose) {\n state.beforeClose?.(action, state, doClose)\n } else {\n doClose()\n }\n }\n\n const validate = () => {\n if (props.boxType === 'prompt') {\n const inputPattern = state.inputPattern\n if (inputPattern && !inputPattern.test(state.inputValue \|\| '')) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n const inputValidator = state.inputValidator\n if (typeof inputValidator === 'function') {\n const validateResult = inputValidator(state.inputValue)\n if (validateResult === false) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n if (typeof validateResult === 'string') {\n state.editorErrorMessage = validateResult\n state.validateError = true\n return false\n }\n }\n }\n state.editorErrorMessage = ''\n state.validateError = false\n return true\n }\n\n const getInputElement = () => {\n const inputRefs = inputRef.value.$refs\n return (inputRefs.input \|\| inputRefs.textarea) as HTMLElement\n }\n\n const handleClose = () => {\n handleAction('close')\n }\n\n // when close on press escape is disabled, pressing esc should not callout\n // any other message box and close any other dialog-ish elements\n // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n // props.beforeClose method to make a intermediate state by callout a message box\n // for some verification or alerting. then if we allow global event liek this\n // to dispatch, it could callout another message box.\n if (props.closeOnPressEscape) {\n useModal(\n {\n handleClose,\n },\n visible\n )\n } else {\n usePreventGlobal(\n visible,\n 'keydown',\n (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n )\n }\n\n // locks the screen to prevent scroll\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n // restore to prev active element.\n useRestoreActive(visible)\n\n return {\n ...toRefs(state),\n visible,\n hasMessage,\n typeClass,\n iconComponent,\n confirmButtonClasses,\n inputRef,\n confirmRef,\n doClose, // for outside usage\n handleClose, // for out side usage\n handleWrapperClick,\n handleInputEnter,\n handleAction,\n t,\n }\n },\n})\n</script>\n"],"names":["_withModifiers","_createCommentVNode","_withCtx","_createTextVNode"],"mappings":";;;;;;EAuBU;;qBAEK,KAAK,EAAC;qBAyBR,KAAK,EAAC;;;;EASgB;;;;mDAO4B;eAmBlD,KAAK,EAAC,sBAAsB;;;;;;;;;;;IApF3B;;;;;QAGP,SAAOA;;QAEP;;;0BAGD;;YACE,KAAI;;;;;;;;kDASe;;;;;;;;;;2CAYb;;;;;;;;iCAKa;;;;;;;;;;;;;wBAWf;;;;;;;;;;;;;;;sBAOEC;;;;;;;;;;;0BAOY;0CAAV;;;8BACU,SAAgB;;;;;;;;kBAM5B;;;qCAEgB;;;;;;uBAMX,EAACC;kBACLC;;;;;;;;sCAQP;;;;;yBAIU;;;iFAGc;;;;;;;;;;;;;oBAUd;;;;;;;;;"}
1	+ {"version":3,"file":"index.vue_vue_type_template_id_7035e868_lang.mjs","sources":["../../../../../../packages/components/message-box/src/index.vue?vue&type=template&id=7035e868&lang.js"],"sourcesContent":["<template>\n <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n <el-overlay\n v-show=\"visible\"\n :z-index=\"zIndex\"\n :overlay-class=\"['is-message-box', modalClass]\"\n :mask=\"modal\"\n @click.self=\"handleWrapperClick\"\n >\n <div\n ref=\"root\"\n v-trap-focus\n role=\"dialog\"\n :aria-label=\"title \|\| 'dialog'\"\n aria-modal=\"true\"\n :class=\"[\n 'el-message-box',\n customClass,\n { 'el-message-box--center': center },\n ]\"\n :style=\"customStyle\"\n >\n <div\n v-if=\"title !== null && title !== undefined\"\n class=\"el-message-box__header\"\n >\n <div class=\"el-message-box__title\">\n <el-icon\n v-if=\"iconComponent && center\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <span>{{ title }}</span>\n </div>\n <button\n v-if=\"showClose\"\n type=\"button\"\n class=\"el-message-box__headerbtn\"\n aria-label=\"Close\"\n @click=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n @keydown.prevent.enter=\"\n handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n \"\n >\n <el-icon class=\"el-message-box__close\"><close /></el-icon>\n </button>\n </div>\n <div class=\"el-message-box__content\">\n <div class=\"el-message-box__container\">\n <el-icon\n v-if=\"iconComponent && !center && hasMessage\"\n class=\"el-message-box__status\"\n :class=\"typeClass\"\n >\n <component :is=\"iconComponent\" />\n </el-icon>\n <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n <slot>\n <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n <p v-else v-html=\"message\"></p>\n </slot>\n </div>\n </div>\n <div v-show=\"showInput\" class=\"el-message-box__input\">\n <el-input\n ref=\"inputRef\"\n v-model=\"inputValue\"\n :type=\"inputType\"\n :placeholder=\"inputPlaceholder\"\n :class=\"{ invalid: validateError }\"\n @keydown.prevent.enter=\"handleInputEnter\"\n />\n <div\n class=\"el-message-box__errormsg\"\n :style=\"{\n visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n }\"\n >\n {{ editorErrorMessage }}\n </div>\n </div>\n </div>\n <div class=\"el-message-box__btns\">\n <el-button\n v-if=\"showCancelButton\"\n :loading=\"cancelButtonLoading\"\n :class=\"[cancelButtonClass]\"\n :round=\"roundButton\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('cancel')\"\n @keydown.prevent.enter=\"handleAction('cancel')\"\n >\n {{ cancelButtonText \|\| t('el.messagebox.cancel') }}\n </el-button>\n <el-button\n v-show=\"showConfirmButton\"\n ref=\"confirmRef\"\n type=\"primary\"\n :loading=\"confirmButtonLoading\"\n :class=\"[confirmButtonClasses]\"\n :round=\"roundButton\"\n :disabled=\"confirmButtonDisabled\"\n :size=\"buttonSize \|\| ''\"\n @click=\"handleAction('confirm')\"\n @keydown.prevent.enter=\"handleAction('confirm')\"\n >\n {{ confirmButtonText \|\| t('el.messagebox.confirm') }}\n </el-button>\n </div>\n </div>\n </el-overlay>\n </transition>\n</template>\n<script lang=\"ts\">\nimport {\n defineComponent,\n nextTick,\n onMounted,\n onBeforeUnmount,\n computed,\n watch,\n reactive,\n ref,\n toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n useModal,\n useLockscreen,\n useLocale,\n useRestoreActive,\n usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n Action,\n MessageBoxState,\n MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n name: 'ElMessageBox',\n directives: {\n TrapFocus,\n },\n components: {\n ElButton,\n ElInput,\n ElOverlay,\n ElIcon,\n ...TypeComponents,\n },\n inheritAttrs: false,\n props: {\n buttonSize: {\n type: String as PropType<ComponentSize>,\n validator: isValidComponentSize,\n },\n modal: {\n type: Boolean,\n default: true,\n },\n lockScroll: {\n type: Boolean,\n default: true,\n },\n showClose: {\n type: Boolean,\n default: true,\n },\n closeOnClickModal: {\n type: Boolean,\n default: true,\n },\n closeOnPressEscape: {\n type: Boolean,\n default: true,\n },\n closeOnHashChange: {\n type: Boolean,\n default: true,\n },\n center: Boolean,\n roundButton: {\n default: false,\n type: Boolean,\n },\n container: {\n type: String, // default append to body\n default: 'body',\n },\n boxType: {\n type: String as PropType<MessageBoxType>,\n default: '',\n },\n },\n emits: ['vanish', 'action'],\n setup(props, { emit }) {\n // const popup = usePopup(props, doClose)\n const { t } = useLocale()\n const visible = ref(false)\n // s represents state\n const state = reactive<MessageBoxState>({\n beforeClose: null,\n callback: null,\n cancelButtonText: '',\n cancelButtonClass: '',\n confirmButtonText: '',\n confirmButtonClass: '',\n customClass: '',\n customStyle: {},\n dangerouslyUseHTMLString: false,\n distinguishCancelAndClose: false,\n icon: '',\n inputPattern: null,\n inputPlaceholder: '',\n inputType: 'text',\n inputValue: null,\n inputValidator: null,\n inputErrorMessage: '',\n message: null,\n modalFade: true,\n modalClass: '',\n showCancelButton: false,\n showConfirmButton: true,\n type: '',\n title: undefined,\n showInput: false,\n action: '' as Action,\n confirmButtonLoading: false,\n cancelButtonLoading: false,\n confirmButtonDisabled: false,\n editorErrorMessage: '',\n // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n // seemed ok for now without this state.\n // isOnComposition: false, // temporary remove\n validateError: false,\n zIndex: PopupManager.nextZIndex(),\n })\n\n const typeClass = computed(() => {\n const type = state.type\n return type && TypeComponentsMap[type]\n ? `el-message-box-icon--${type}`\n : ''\n })\n\n const iconComponent = computed(\n () => state.icon \|\| TypeComponentsMap[state.type] \|\| ''\n )\n const hasMessage = computed(() => !!state.message)\n const inputRef = ref<ComponentPublicInstance>(null)\n const confirmRef = ref<ComponentPublicInstance>(null)\n\n const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n watch(\n () => state.inputValue,\n async (val) => {\n await nextTick()\n if (props.boxType === 'prompt' && val !== null) {\n validate()\n }\n },\n { immediate: true }\n )\n\n watch(\n () => visible.value,\n (val) => {\n if (val) {\n if (props.boxType === 'alert' \|\| props.boxType === 'confirm') {\n nextTick().then(() => {\n confirmRef.value?.$el?.focus?.()\n })\n }\n state.zIndex = PopupManager.nextZIndex()\n }\n if (props.boxType !== 'prompt') return\n if (val) {\n nextTick().then(() => {\n if (inputRef.value && inputRef.value.$el) {\n getInputElement().focus()\n }\n })\n } else {\n state.editorErrorMessage = ''\n state.validateError = false\n }\n }\n )\n\n onMounted(async () => {\n await nextTick()\n if (props.closeOnHashChange) {\n on(window, 'hashchange', doClose)\n }\n })\n\n onBeforeUnmount(() => {\n if (props.closeOnHashChange) {\n off(window, 'hashchange', doClose)\n }\n })\n\n function doClose() {\n if (!visible.value) return\n visible.value = false\n nextTick(() => {\n if (state.action) emit('action', state.action)\n })\n }\n\n const handleWrapperClick = () => {\n if (props.closeOnClickModal) {\n handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n }\n }\n\n const handleInputEnter = () => {\n if (state.inputType !== 'textarea') {\n return handleAction('confirm')\n }\n }\n\n const handleAction = (action: Action) => {\n if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n return\n }\n\n state.action = action\n\n if (state.beforeClose) {\n state.beforeClose?.(action, state, doClose)\n } else {\n doClose()\n }\n }\n\n const validate = () => {\n if (props.boxType === 'prompt') {\n const inputPattern = state.inputPattern\n if (inputPattern && !inputPattern.test(state.inputValue \|\| '')) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n const inputValidator = state.inputValidator\n if (typeof inputValidator === 'function') {\n const validateResult = inputValidator(state.inputValue)\n if (validateResult === false) {\n state.editorErrorMessage =\n state.inputErrorMessage \|\| t('el.messagebox.error')\n state.validateError = true\n return false\n }\n if (typeof validateResult === 'string') {\n state.editorErrorMessage = validateResult\n state.validateError = true\n return false\n }\n }\n }\n state.editorErrorMessage = ''\n state.validateError = false\n return true\n }\n\n const getInputElement = () => {\n const inputRefs = inputRef.value.$refs\n return (inputRefs.input \|\| inputRefs.textarea) as HTMLElement\n }\n\n const handleClose = () => {\n handleAction('close')\n }\n\n // when close on press escape is disabled, pressing esc should not callout\n // any other message box and close any other dialog-ish elements\n // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n // props.beforeClose method to make a intermediate state by callout a message box\n // for some verification or alerting. then if we allow global event liek this\n // to dispatch, it could callout another message box.\n if (props.closeOnPressEscape) {\n useModal(\n {\n handleClose,\n },\n visible\n )\n } else {\n usePreventGlobal(\n visible,\n 'keydown',\n (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n )\n }\n\n // locks the screen to prevent scroll\n if (props.lockScroll) {\n useLockscreen(visible)\n }\n\n // restore to prev active element.\n useRestoreActive(visible)\n\n return {\n ...toRefs(state),\n visible,\n hasMessage,\n typeClass,\n iconComponent,\n confirmButtonClasses,\n inputRef,\n confirmRef,\n doClose, // for outside usage\n handleClose, // for out side usage\n handleWrapperClick,\n handleInputEnter,\n handleAction,\n t,\n }\n },\n})\n</script>\n"],"names":["_withModifiers","_createCommentVNode","_withCtx","_createTextVNode"],"mappings":";;;;;;EAwBU;;qBAEK,KAAK,EAAC;qBAyBR,KAAK,EAAC;;;;EASgB;;;;mDAO4B;eAmBlD,KAAK,EAAC,sBAAsB;;;;;;;;;;;IArF3B;;;;;QAGP,SAAOA;;QAEP;;;0BAGD;;YACE;YAEA;;;;;;;;kDAQmB;;;;;;;;;;2CAYb;;;;;;;;iCAKa;;;;;;;;;;;;;wBAWf;;;;;;;;;;;;;;;sBAOEC;;;;;;;;;;;0BAOY;0CAAV;;;8BACU,SAAgB;;;;;;;;kBAM5B;;;qCAEgB;;;;;;uBAMX,EAACC;kBACLC;;;;;;;;sCAQP;;;;;yBAIU;;;iFAGc;;;;;;;;;;;;;oBAUd;;;;;;;;;"}

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

@@ -45,11 +45,11 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "success" | "warning" | "info" | "error", unknown>;
     icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | Comment>, unknown, unknown>;
-    zIndex: number;
-    title: string;
     message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>>, unknown, unknown>;
+    zIndex: number;
+    title: string;
     offset: number;
     position: import("../../../utils/props").BuildPropType<StringConstructor, "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown>;
     onClose: () => void;
@@ -65,11 +65,11 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "" | "success" | "warning" | "info" | "error", unknown>;
     icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | Comment>, unknown, unknown>;
-    zIndex: number;
-    title: string;
     message: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>>, unknown, unknown>;
+    zIndex: number;
+    title: string;
     offset: number;
     position: import("../../../utils/props").BuildPropType<StringConstructor, "top-right" | "top-left" | "bottom-right" | "bottom-left", unknown>;
     id: string;

package/es/components/popper/src/content.vue_vue_type_script_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"content.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/popper/src/content.vue"],"sourcesContent":["<template>\n <div\n ref=\"popperContentRef\"\n :style=\"contentStyle\"\n :class=\"contentClass\"\n @mouseenter=\"(e) => $emit('mouseenter', e)\"\n @mouseleave=\"(e) => $emit('mouseleave', e)\"\n >\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n ref,\n inject,\n provide,\n unref,\n onMounted,\n watch,\n} from 'vue'\nimport { createPopper } from '@popperjs/core'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { POPPER_INJECTION_KEY, POPPER_CONTENT_INJECTION_KEY } from './tokens'\nimport { usePopperContentProps } from './popper'\nimport { buildPopperOptions, unwrapMeasurableEl } from './utils'\n\nexport default defineComponent({\n name: 'ElPopperContent',\n props: usePopperContentProps,\n emits: ['mouseenter', 'mouseleave'],\n setup(props) {\n const { triggerRef, popperInstanceRef, contentRef } = inject(\n POPPER_INJECTION_KEY,\n undefined\n )!\n const popperContentRef = ref<HTMLElement \| null>(null)\n const arrowRef = ref<HTMLElement \| null>(null)\n const arrowOffset = ref<number>()\n provide(POPPER_CONTENT_INJECTION_KEY, {\n arrowRef,\n arrowOffset,\n })\n const contentZIndex = computed(\n () => props.zIndex \|\| PopupManager.nextZIndex()\n )\n\n const contentStyle = computed(\n () => [{ zIndex: unref(contentZIndex) }, props.popperStyle] as any\n )\n\n const contentClass = computed(() => [\n {\n 'el-popper': true,\n 'is-pure': props.pure,\n [`is-${props.effect}`]: !!props.effect,\n },\n props.popperClass,\n ])\n\n const createPopperInstance = ({\n referenceEl,\n popperContentEl,\n arrowEl,\n }) => {\n const options = buildPopperOptions(props, {\n arrowEl,\n arrowOffset: unref(arrowOffset),\n })\n\n return createPopper(referenceEl, popperContentEl, options)\n }\n\n const updatePopper = () => {\n unref(popperInstanceRef)?.update()\n }\n\n onMounted(() => {\n let updateHandle: ReturnType<typeof watch>\n watch(\n () => unwrapMeasurableEl(props.referenceEl) \|\| unref(triggerRef),\n (val) => {\n updateHandle?.()\n if (val) {\n popperInstanceRef.value?.destroy()\n const popperContentEl = unref(popperContentRef)!\n contentRef.value = popperContentEl\n const arrowEl = unref(arrowRef)\n\n const newInstance = createPopperInstance({\n referenceEl: val,\n popperContentEl: unref(popperContentRef)!,\n arrowEl,\n })\n popperInstanceRef.value = newInstance\n\n updateHandle = watch(\n () => val!.getBoundingClientRect(),\n () => {\n updatePopper()\n },\n {\n immediate: true,\n }\n )\n } else {\n popperInstanceRef.value = null\n }\n },\n {\n immediate: true,\n }\n )\n })\n\n return {\n popperContentRef,\n popperInstanceRef,\n contentStyle,\n contentClass,\n updatePopper,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;~~AA2BA~~,aAAe,eAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE,qBAAqB;EAC5B,OAAO,CAAC,YAAY,EAAE;EACtB,KAAK,MAAM,EAAE;IACX,MAAM,EAAE,UAAU,EAAE;IACpB,MAAM;IACN,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;UACrB,WAAW,GAAG;WACb,CAAC;;MAEN,WAAW;KACZ,CAAC,CAAC;IACH,MAAM,gBAAgB,QAAQ,CAAC;IAC/B,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM;UAC9B;MACJ;;QAEE,SAAS,EAAE,KAAK,KAAK;SACpB,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM;;;KAGzC,CAAC,CAAC;UACG,oBAAoB,GAAG,CAAC;;;MAG5B,OAAO;;YAED,OAAO,GAAG;QACd,OAAO;QACP,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC;OAChC;MACD,OAAO;KACR;;MAEC,IAAI,EAAE,CAAC;MACP,CAAC,EAAE,GAAG,KAAK;MACX;aACO;UACH;MACJ,MAAM,MAAM,kBAAkB,CAAC,KAAK,CAAC;QACnC,IAAI,EAAE,CAAC;QACP,gBAAgB,IAAI,GAAG,KAAK,CAAC;;;UAG3B,MAAM,eAAe,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;;;UAGhD,MAAM;YACJ,WAAW,EAAE,GAAG;;;WAGjB,CAAC,CAAC;UACH,iBAAiB,CAAC,KAAK,GAAG,WAAW;UACrC;YACE,YAAY,EAAE,CAAC;WAChB;YACC,SAAS,EAAE;WACZ,EAAE;eACE;2BACY,CAAC,QAAQ,IAAI,CAAC;;;;;;;;;kBASvB;;kBAEA;;;;;;;"}
1	+ {"version":3,"file":"content.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/popper/src/content.vue"],"sourcesContent":["<template>\n <div\n ref=\"popperContentRef\"\n :style=\"contentStyle\"\n :class=\"contentClass\"\n role=\"tooltip\"\n @mouseenter=\"(e) => $emit('mouseenter', e)\"\n @mouseleave=\"(e) => $emit('mouseleave', e)\"\n >\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n ref,\n inject,\n provide,\n unref,\n onMounted,\n watch,\n} from 'vue'\nimport { createPopper } from '@popperjs/core'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { POPPER_INJECTION_KEY, POPPER_CONTENT_INJECTION_KEY } from './tokens'\nimport { usePopperContentProps } from './popper'\nimport { buildPopperOptions, unwrapMeasurableEl } from './utils'\n\nexport default defineComponent({\n name: 'ElPopperContent',\n props: usePopperContentProps,\n emits: ['mouseenter', 'mouseleave'],\n setup(props) {\n const { triggerRef, popperInstanceRef, contentRef } = inject(\n POPPER_INJECTION_KEY,\n undefined\n )!\n const popperContentRef = ref<HTMLElement \| null>(null)\n const arrowRef = ref<HTMLElement \| null>(null)\n const arrowOffset = ref<number>()\n provide(POPPER_CONTENT_INJECTION_KEY, {\n arrowRef,\n arrowOffset,\n })\n const contentZIndex = computed(\n () => props.zIndex \|\| PopupManager.nextZIndex()\n )\n\n const contentStyle = computed(\n () => [{ zIndex: unref(contentZIndex) }, props.popperStyle] as any\n )\n\n const contentClass = computed(() => [\n {\n 'el-popper': true,\n 'is-pure': props.pure,\n [`is-${props.effect}`]: !!props.effect,\n },\n props.popperClass,\n ])\n\n const createPopperInstance = ({\n referenceEl,\n popperContentEl,\n arrowEl,\n }) => {\n const options = buildPopperOptions(props, {\n arrowEl,\n arrowOffset: unref(arrowOffset),\n })\n\n return createPopper(referenceEl, popperContentEl, options)\n }\n\n const updatePopper = () => {\n unref(popperInstanceRef)?.update()\n }\n\n onMounted(() => {\n let updateHandle: ReturnType<typeof watch>\n watch(\n () => unwrapMeasurableEl(props.referenceEl) \|\| unref(triggerRef),\n (val) => {\n updateHandle?.()\n if (val) {\n popperInstanceRef.value?.destroy()\n const popperContentEl = unref(popperContentRef)!\n contentRef.value = popperContentEl\n const arrowEl = unref(arrowRef)\n\n const newInstance = createPopperInstance({\n referenceEl: val,\n popperContentEl: unref(popperContentRef)!,\n arrowEl,\n })\n popperInstanceRef.value = newInstance\n\n updateHandle = watch(\n () => val!.getBoundingClientRect(),\n () => {\n updatePopper()\n },\n {\n immediate: true,\n }\n )\n } else {\n popperInstanceRef.value = null\n }\n },\n {\n immediate: true,\n }\n )\n })\n\n return {\n popperContentRef,\n popperInstanceRef,\n contentStyle,\n contentClass,\n updatePopper,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;AA4BA,aAAe,eAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE,qBAAqB;EAC5B,OAAO,CAAC,YAAY,EAAE;EACtB,KAAK,MAAM,EAAE;IACX,MAAM,EAAE,UAAU,EAAE;IACpB,MAAM;IACN,MAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;UACrB,WAAW,GAAG;WACb,CAAC;;MAEN,WAAW;KACZ,CAAC,CAAC;IACH,MAAM,gBAAgB,QAAQ,CAAC;IAC/B,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM;UAC9B;MACJ;;QAEE,SAAS,EAAE,KAAK,KAAK;SACpB,CAAC,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,MAAM;;;KAGzC,CAAC,CAAC;UACG,oBAAoB,GAAG,CAAC;;;MAG5B,OAAO;;YAED,OAAO,GAAG;QACd,OAAO;QACP,WAAW,EAAE,KAAK,CAAC,WAAW,CAAC;OAChC;MACD,OAAO;KACR;;MAEC,IAAI,EAAE,CAAC;MACP,CAAC,EAAE,GAAG,KAAK;MACX;aACO;UACH;MACJ,MAAM,MAAM,kBAAkB,CAAC,KAAK,CAAC;QACnC,IAAI,EAAE,CAAC;QACP,gBAAgB,IAAI,GAAG,KAAK,CAAC;;;UAG3B,MAAM,eAAe,GAAG,KAAK,CAAC,gBAAgB,CAAC,CAAC;;;UAGhD,MAAM;YACJ,WAAW,EAAE,GAAG;;;WAGjB,CAAC,CAAC;UACH,iBAAiB,CAAC,KAAK,GAAG,WAAW;UACrC;YACE,YAAY,EAAE,CAAC;WAChB;YACC,SAAS,EAAE;WACZ,EAAE;eACE;2BACY,CAAC,QAAQ,IAAI,CAAC;;;;;;;;;kBASvB;;kBAEA;;;;;;;"}

package/es/components/popper/src/content.vue_vue_type_template_id_611b76f0_lang.mjs CHANGED Viewed

@@ -5,6 +5,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "popperContentRef",
     style: normalizeStyle(_ctx.contentStyle),
     class: normalizeClass(_ctx.contentClass),
+    role: "tooltip",
     onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
     onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
   }, [

package/es/components/popper/src/content.vue_vue_type_template_id_611b76f0_lang.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"content.vue_vue_type_template_id_611b76f0_lang.mjs","sources":["../../../../../../packages/components/popper/src/content.vue?vue&type=template&id=611b76f0&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"popperContentRef\"\n :style=\"contentStyle\"\n :class=\"contentClass\"\n @mouseenter=\"(e) => $emit('mouseenter', e)\"\n @mouseleave=\"(e) => $emit('mouseleave', e)\"\n >\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n ref,\n inject,\n provide,\n unref,\n onMounted,\n watch,\n} from 'vue'\nimport { createPopper } from '@popperjs/core'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { POPPER_INJECTION_KEY, POPPER_CONTENT_INJECTION_KEY } from './tokens'\nimport { usePopperContentProps } from './popper'\nimport { buildPopperOptions, unwrapMeasurableEl } from './utils'\n\nexport default defineComponent({\n name: 'ElPopperContent',\n props: usePopperContentProps,\n emits: ['mouseenter', 'mouseleave'],\n setup(props) {\n const { triggerRef, popperInstanceRef, contentRef } = inject(\n POPPER_INJECTION_KEY,\n undefined\n )!\n const popperContentRef = ref<HTMLElement \| null>(null)\n const arrowRef = ref<HTMLElement \| null>(null)\n const arrowOffset = ref<number>()\n provide(POPPER_CONTENT_INJECTION_KEY, {\n arrowRef,\n arrowOffset,\n })\n const contentZIndex = computed(\n () => props.zIndex \|\| PopupManager.nextZIndex()\n )\n\n const contentStyle = computed(\n () => [{ zIndex: unref(contentZIndex) }, props.popperStyle] as any\n )\n\n const contentClass = computed(() => [\n {\n 'el-popper': true,\n 'is-pure': props.pure,\n [`is-${props.effect}`]: !!props.effect,\n },\n props.popperClass,\n ])\n\n const createPopperInstance = ({\n referenceEl,\n popperContentEl,\n arrowEl,\n }) => {\n const options = buildPopperOptions(props, {\n arrowEl,\n arrowOffset: unref(arrowOffset),\n })\n\n return createPopper(referenceEl, popperContentEl, options)\n }\n\n const updatePopper = () => {\n unref(popperInstanceRef)?.update()\n }\n\n onMounted(() => {\n let updateHandle: ReturnType<typeof watch>\n watch(\n () => unwrapMeasurableEl(props.referenceEl) \|\| unref(triggerRef),\n (val) => {\n updateHandle?.()\n if (val) {\n popperInstanceRef.value?.destroy()\n const popperContentEl = unref(popperContentRef)!\n contentRef.value = popperContentEl\n const arrowEl = unref(arrowRef)\n\n const newInstance = createPopperInstance({\n referenceEl: val,\n popperContentEl: unref(popperContentRef)!,\n arrowEl,\n })\n popperInstanceRef.value = newInstance\n\n updateHandle = watch(\n () => val!.getBoundingClientRect(),\n () => {\n updatePopper()\n },\n {\n immediate: true,\n }\n )\n } else {\n popperInstanceRef.value = null\n }\n },\n {\n immediate: true,\n }\n )\n })\n\n return {\n popperContentRef,\n popperInstanceRef,\n contentStyle,\n contentClass,\n updatePopper,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;IAEI,KAAI;IACH,KAAK,iBAAE,iBAAY;IACnB~~,uBAAO,iBAAY~~;~~IACnB~~,YAAU,6BAAG,CAAC,KAAK,UAAK,eAAe,CAAC;;;;;;;;"}
1	+ {"version":3,"file":"content.vue_vue_type_template_id_611b76f0_lang.mjs","sources":["../../../../../../packages/components/popper/src/content.vue?vue&type=template&id=611b76f0&lang.js"],"sourcesContent":["<template>\n <div\n ref=\"popperContentRef\"\n :style=\"contentStyle\"\n :class=\"contentClass\"\n role=\"tooltip\"\n @mouseenter=\"(e) => $emit('mouseenter', e)\"\n @mouseleave=\"(e) => $emit('mouseleave', e)\"\n >\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n ref,\n inject,\n provide,\n unref,\n onMounted,\n watch,\n} from 'vue'\nimport { createPopper } from '@popperjs/core'\nimport { PopupManager } from '@element-plus/utils/popup-manager'\nimport { POPPER_INJECTION_KEY, POPPER_CONTENT_INJECTION_KEY } from './tokens'\nimport { usePopperContentProps } from './popper'\nimport { buildPopperOptions, unwrapMeasurableEl } from './utils'\n\nexport default defineComponent({\n name: 'ElPopperContent',\n props: usePopperContentProps,\n emits: ['mouseenter', 'mouseleave'],\n setup(props) {\n const { triggerRef, popperInstanceRef, contentRef } = inject(\n POPPER_INJECTION_KEY,\n undefined\n )!\n const popperContentRef = ref<HTMLElement \| null>(null)\n const arrowRef = ref<HTMLElement \| null>(null)\n const arrowOffset = ref<number>()\n provide(POPPER_CONTENT_INJECTION_KEY, {\n arrowRef,\n arrowOffset,\n })\n const contentZIndex = computed(\n () => props.zIndex \|\| PopupManager.nextZIndex()\n )\n\n const contentStyle = computed(\n () => [{ zIndex: unref(contentZIndex) }, props.popperStyle] as any\n )\n\n const contentClass = computed(() => [\n {\n 'el-popper': true,\n 'is-pure': props.pure,\n [`is-${props.effect}`]: !!props.effect,\n },\n props.popperClass,\n ])\n\n const createPopperInstance = ({\n referenceEl,\n popperContentEl,\n arrowEl,\n }) => {\n const options = buildPopperOptions(props, {\n arrowEl,\n arrowOffset: unref(arrowOffset),\n })\n\n return createPopper(referenceEl, popperContentEl, options)\n }\n\n const updatePopper = () => {\n unref(popperInstanceRef)?.update()\n }\n\n onMounted(() => {\n let updateHandle: ReturnType<typeof watch>\n watch(\n () => unwrapMeasurableEl(props.referenceEl) \|\| unref(triggerRef),\n (val) => {\n updateHandle?.()\n if (val) {\n popperInstanceRef.value?.destroy()\n const popperContentEl = unref(popperContentRef)!\n contentRef.value = popperContentEl\n const arrowEl = unref(arrowRef)\n\n const newInstance = createPopperInstance({\n referenceEl: val,\n popperContentEl: unref(popperContentRef)!,\n arrowEl,\n })\n popperInstanceRef.value = newInstance\n\n updateHandle = watch(\n () => val!.getBoundingClientRect(),\n () => {\n updatePopper()\n },\n {\n immediate: true,\n }\n )\n } else {\n popperInstanceRef.value = null\n }\n },\n {\n immediate: true,\n }\n )\n })\n\n return {\n popperContentRef,\n popperInstanceRef,\n contentStyle,\n contentClass,\n updatePopper,\n }\n },\n})\n</script>\n"],"names":[],"mappings":";;;;;IAEI,KAAI;IACH,KAAK,iBAAE,iBAAY;IACnB;IACD;IACC,YAAU,6BAAG,CAAC,KAAK,UAAK,eAAe,CAAC;;;;;;;;"}