element-plus 1.2.0-beta.5 → 1.2.0-beta.6

package/lib/components/input-number/src/input-number.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-number.vue_vue_type_script_lang.js","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      :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 { useFormItem } 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'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n  currentValue: number\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 { size: inputNumberSize, disabled: inputNumberDisabled } =\n      useFormItem({})\n\n    const displayValue = computed(() => {\n      if (data.userInput !== null) {\n        return data.userInput\n      }\n      let currentValue: number | string = 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 (newVal !== undefined) {\n          if (isNaN(newVal)) return\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 !== undefined && newVal >= props.max) {\n          newVal = props.max\n          emit('update:modelValue', newVal)\n        }\n        if (newVal !== undefined && newVal <= props.min) {\n          newVal = props.min\n          emit('update:modelValue', newVal)\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":["defineComponent","ElInput","ElIcon","ArrowUp","ArrowDown","Plus","Minus","RepeatClick","inputNumberProps","inputNumberEmits","ref","reactive","computed","useFormItem","isNumber"],"mappings":"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"}
+{"version":3,"file":"input-number.vue_vue_type_script_lang.js","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\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 = 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 (newVal !== undefined) {\n          if (isNaN(newVal)) return\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 !== undefined && newVal > props.max) {\n          newVal = props.max\n          emit('update:modelValue', newVal)\n        }\n        if (newVal !== undefined && newVal < props.min) {\n          newVal = props.min\n          emit('update:modelValue', newVal)\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":["defineComponent","ElInput","ElIcon","ArrowUp","ArrowDown","Plus","Minus","RepeatClick","inputNumberProps","inputNumberEmits","ref","reactive","computed","useSize","useDisabled","isNumber"],"mappings":"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"}

package/lib/components/input-number/src/input-number.vue_vue_type_template_id_dec60af6_lang.js

@@ -56,6 +56,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     vue.createVNode(_component_el_input, {
       ref: "input",
       type: "number",
+      step: _ctx.step,
       "model-value": _ctx.displayValue,
       placeholder: _ctx.placeholder,
       disabled: _ctx.inputNumberDisabled,
@@ -72,7 +73,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       onFocus: _cache[3] || (_cache[3] = (event) => _ctx.$emit("focus", event)),
       onInput: _ctx.handleInput,
       onChange: _ctx.handleInputChange
-    }, null, 8, ["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", "onInput", "onChange"])
   ], 34);
 }
 

package/lib/components/input-number/src/input-number.vue_vue_type_template_id_dec60af6_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-number.vue_vue_type_template_id_dec60af6_lang.js","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      :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 { useFormItem } 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'\nimport { inputNumberProps, inputNumberEmits } from './input-number'\n\nimport type { ComponentPublicInstance } from 'vue'\n\ninterface IData {\n  currentValue: number\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 { size: inputNumberSize, disabled: inputNumberDisabled } =\n      useFormItem({})\n\n    const displayValue = computed(() => {\n      if (data.userInput !== null) {\n        return data.userInput\n      }\n      let currentValue: number | string = 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 (newVal !== undefined) {\n          if (isNaN(newVal)) return\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 !== undefined && newVal >= props.max) {\n          newVal = props.max\n          emit('update:modelValue', newVal)\n        }\n        if (newVal !== undefined && newVal <= props.min) {\n          newVal = props.min\n          emit('update:modelValue', newVal)\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":["_createElementBlock","_createVNode","_createBlock"],"mappings":";;;;;;;;;;;;;;0BACEA;IACG;;;;;;;IAOA,yDAAD;;;IAGQ,qDADRA;;MAGE,2BAAM,8CAEmB;MADzB,MAAK;AAAA,MAEJ,+DAAe;;MAEhBC;6BACE;UAAkB,yCAAlBC,wEACAA;;;;;gCARc;;IAYV,qDADRF;;MAGE,2BAAM,8CAEmB;MADzB,MAAK;AAAA,MAEJ,+DAAe;;MAEhBC;6BACE;UAAgB,yCAAhBC,sEACAA;;;;;gCARc;;IAWlBD;MACE,KAAI;AAAA,MACJ,MAAK;AAAA,MACJ,eAAa;MACb,aAAa;MACb,UAAU;MACV,MAAM;MACN,KAAK;MACL,KAAK;MACL,MAAM;MACN,OAAO;MACP;uCAAoB;uCACE;;MACtB,mCAAO,UAAU,mBAAc;AAAA,MAC/B,oCAAQ,UAAU,oBAAe;AAAA,MACjC,SAAO;MACP,UAAQ;;;;;;;"}
+{"version":3,"file":"input-number.vue_vue_type_template_id_dec60af6_lang.js","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\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 = 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 (newVal !== undefined) {\n          if (isNaN(newVal)) return\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 !== undefined && newVal > props.max) {\n          newVal = props.max\n          emit('update:modelValue', newVal)\n        }\n        if (newVal !== undefined && newVal < props.min) {\n          newVal = props.min\n          emit('update:modelValue', newVal)\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":["_createElementBlock","_createVNode","_createBlock"],"mappings":";;;;;;;;;;;;;;0BACEA;IACG;;;;;;;IAOA,yDAAD;;;IAGQ,qDADRA;;MAGE,2BAAM,8CAEmB;MADzB,MAAK;AAAA,MAEJ,+DAAe;;MAEhBC;6BACE;UAAkB,yCAAlBC,wEACAA;;;;;gCARc;;IAYV,qDADRF;;MAGE,2BAAM,8CAEmB;MADzB,MAAK;AAAA,MAEJ,+DAAe;;MAEhBC;6BACE;UAAgB,yCAAhBC,sEACAA;;;;;gCARc;;IAWlBD;MACE,KAAI;AAAA,MACJ,MAAK;AAAA,MACJ,MAAM;MACN,eAAa;MACb,aAAa;MACb,UAAU;MACV,MAAM;MACN,KAAK;MACL,KAAK;MACL,MAAM;MACN,OAAO;MACP;uCAAoB;uCACE;;MACtB,mCAAO,UAAU,mBAAc;AAAA,MAC/B,oCAAQ,UAAU,oBAAe;AAAA,MACjC,SAAO;MACP,UAAQ;;;;;;;"}

package/lib/components/link/index.d.ts

@@ -16,16 +16,16 @@ export declare const ElLink: import("../../utils/types").SFCWithInstall<import("
     readonly icon?: unknown;
 } & {
     type: import("../../utils/props").BuildPropType<StringConstructor, "default" | "primary" | "success" | "warning" | "info" | "danger", unknown>;
-    disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, 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>;
+    disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     underline: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     href: string;
 } & {}> & {
     onClick?: ((evt: MouseEvent) => any) | undefined;
 }, {
     type: import("../../utils/props").BuildPropType<StringConstructor, "default" | "primary" | "success" | "warning" | "info" | "danger", unknown>;
-    disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, 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>;
+    disabled: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     underline: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     href: string;
 }>> & Record<string, any>;

package/lib/components/link/src/link.vue.d.ts

@@ -16,16 +16,16 @@ declare const _default: import("vue").DefineComponent<{
     readonly icon?: unknown;
 } & {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "default" | "primary" | "success" | "warning" | "info" | "danger", unknown>;
-    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, 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>;
+    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     underline: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     href: string;
 } & {}> & {
     onClick?: ((evt: MouseEvent) => any) | undefined;
 }, {
     type: import("../../../utils/props").BuildPropType<StringConstructor, "default" | "primary" | "success" | "warning" | "info" | "danger", unknown>;
-    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, 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>;
+    disabled: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     underline: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     href: string;
 }>;

package/lib/components/loading/index.d.ts

@@ -1,19 +1,58 @@
 import type { App } from 'vue';
-declare const ElLoading: {
+export declare const ElLoading: {
     install(app: App): void;
-    directive: {
-        mounted(el: import("./src/directive").ElementLoading, binding: import("vue").DirectiveBinding<any>): void;
-        updated(el: import("./src/directive").ElementLoading, binding: import("vue").DirectiveBinding<any>): void;
-        unmounted(el: import("./src/directive").ElementLoading): void;
+    directive: import("vue").Directive<import("./src/directive").ElementLoading, import("./src/directive").LoadingBinding>;
+    service: (options?: Partial<Omit<import("./src/types").LoadingOptionsResolved, "target" | "parent"> & {
+        target: string | HTMLElement;
+        body: boolean;
+    }>) => {
+        setText: (text: string) => void;
+        close: () => void;
+        handleAfterLeave: () => void;
+        vm: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $el: HTMLElement;
+        originalPosition: import("vue").Ref<string>;
+        originalOverflow: import("vue").Ref<string>;
+        visible: import("vue").Ref<boolean>;
+        parent: import("vue").Ref<import("./src/types").LoadingParentElement>;
+        background: import("vue").Ref<string>;
+        svg: import("vue").Ref<string>;
+        svgViewBox: import("vue").Ref<string>;
+        spinner: import("vue").Ref<string | boolean>;
+        text: import("vue").Ref<string>;
+        fullscreen: import("vue").Ref<boolean>;
+        lock: import("vue").Ref<boolean>;
+        customClass: import("vue").Ref<string>;
+        target: import("vue").Ref<HTMLElement>;
+        beforeClose?: import("vue").Ref<(() => boolean) | undefined> | undefined;
+        closed?: import("vue").Ref<(() => void) | undefined> | undefined;
     };
-    service: (options?: import("./src/loading.type").ILoadingOptions) => import("./src/loading.type").ILoadingInstance;
 };
 export default ElLoading;
-export { ElLoading };
-export declare const ElLoadingDirective: {
-    mounted(el: import("./src/directive").ElementLoading, binding: import("vue").DirectiveBinding<any>): void;
-    updated(el: import("./src/directive").ElementLoading, binding: import("vue").DirectiveBinding<any>): void;
-    unmounted(el: import("./src/directive").ElementLoading): void;
+export declare const ElLoadingDirective: import("vue").Directive<import("./src/directive").ElementLoading, import("./src/directive").LoadingBinding>;
+export declare const ElLoadingService: (options?: Partial<Omit<import("./src/types").LoadingOptionsResolved, "target" | "parent"> & {
+    target: string | HTMLElement;
+    body: boolean;
+}>) => {
+    setText: (text: string) => void;
+    close: () => void;
+    handleAfterLeave: () => void;
+    vm: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+    $el: HTMLElement;
+    originalPosition: import("vue").Ref<string>;
+    originalOverflow: import("vue").Ref<string>;
+    visible: import("vue").Ref<boolean>;
+    parent: import("vue").Ref<import("./src/types").LoadingParentElement>;
+    background: import("vue").Ref<string>;
+    svg: import("vue").Ref<string>;
+    svgViewBox: import("vue").Ref<string>;
+    spinner: import("vue").Ref<string | boolean>;
+    text: import("vue").Ref<string>;
+    fullscreen: import("vue").Ref<boolean>;
+    lock: import("vue").Ref<boolean>;
+    customClass: import("vue").Ref<string>;
+    target: import("vue").Ref<HTMLElement>;
+    beforeClose?: import("vue").Ref<(() => boolean) | undefined> | undefined;
+    closed?: import("vue").Ref<(() => void) | undefined> | undefined;
 };
-export declare const ElLoadingService: (options?: import("./src/loading.type").ILoadingOptions) => import("./src/loading.type").ILoadingInstance;
-export * from './src/loading.type';
+export * from './src/types';

package/lib/components/loading/index.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./src/index.js');
+var service = require('./src/service.js');
 var directive = require('./src/directive.js');
-require('./src/loading.type.js');
+require('./src/types.js');
 
 const ElLoading = {
   install(app) {
-    app.directive("loading", directive["default"]);
-    app.config.globalProperties.$loading = index["default"];
+    app.directive("loading", directive.vLoading);
+    app.config.globalProperties.$loading = service.Loading;
   },
-  directive: directive["default"],
-  service: index["default"]
+  directive: directive.vLoading,
+  service: service.Loading
 };
-const ElLoadingDirective = directive["default"];
-const ElLoadingService = index["default"];
+const ElLoadingDirective = directive.vLoading;
+const ElLoadingService = service.Loading;
 
 exports.ElLoading = ElLoading;
 exports.ElLoadingDirective = ElLoadingDirective;

package/lib/components/loading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/loading/index.ts"],"sourcesContent":["import Loading from './src'\nimport vLoading from './src/directive'\n\nimport type { App } from 'vue'\n\n// installer and everything in all\nconst ElLoading = {\n  install(app: App) {\n    app.directive('loading', vLoading)\n    app.config.globalProperties.$loading = Loading\n  },\n  directive: vLoading,\n  service: Loading,\n}\n\nexport default ElLoading\n\nexport { ElLoading }\n\nexport const ElLoadingDirective = vLoading\nexport const ElLoadingService = Loading\n\nexport * from './src/loading.type'\n"],"names":["vLoading","Loading"],"mappings":";;;;;;;;MAMM,YAAY;AAAA,EAChB,QAAQ,KAAU;AAChB,QAAI,UAAU,WAAWA;AACzB,QAAI,OAAO,iBAAiB,WAAWC;AAAA;AAAA,EAEzC,WAAWD;AAAA,EACX,SAASC;AAAA;MAOE,qBAAqBD;MACrB,mBAAmBC;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/loading/index.ts"],"sourcesContent":["import { Loading } from './src/service'\nimport { vLoading } from './src/directive'\n\nimport type { App } from 'vue'\n\n// installer and everything in all\nexport const ElLoading = {\n  install(app: App) {\n    app.directive('loading', vLoading)\n    app.config.globalProperties.$loading = Loading\n  },\n  directive: vLoading,\n  service: Loading,\n}\n\nexport default ElLoading\n\nexport const ElLoadingDirective = vLoading\nexport const ElLoadingService = Loading\n\nexport * from './src/types'\n"],"names":["vLoading","Loading"],"mappings":";;;;;;;;MAMa,YAAY;AAAA,EACvB,QAAQ,KAAU;AAChB,QAAI,UAAU,WAAWA;AACzB,QAAI,OAAO,iBAAiB,WAAWC;AAAA;AAAA,EAEzC,WAAWD;AAAA,EACX,SAASC;AAAA;MAKE,qBAAqBD;MACrB,mBAAmBC;;;;;;;"}

package/lib/components/loading/src/directive.d.ts

@@ -1,12 +1,13 @@
-import type { DirectiveBinding } from 'vue';
-import type { ILoadingInstance } from './loading.type';
-declare const INSTANCE_NAME = "ElLoading";
+import type { Directive, UnwrapRef } from 'vue';
+import type { LoadingOptions } from './types';
+import type { LoadingInstance } from './loading';
+declare const INSTANCE_KEY: unique symbol;
+export declare type LoadingBinding = boolean | UnwrapRef<LoadingOptions>;
 export interface ElementLoading extends HTMLElement {
-    [INSTANCE_NAME]?: ILoadingInstance;
+    [INSTANCE_KEY]?: {
+        instance: LoadingInstance;
+        options: LoadingOptions;
+    };
 }
-declare const vLoading: {
-    mounted(el: ElementLoading, binding: DirectiveBinding): void;
-    updated(el: ElementLoading, binding: DirectiveBinding): void;
-    unmounted(el: ElementLoading): void;
-};
-export default vLoading;
+export declare const vLoading: Directive<ElementLoading, LoadingBinding>;
+export {};

package/lib/components/loading/src/directive.js

@@ -2,30 +2,46 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index.js');
+var vue = require('vue');
+var shared = require('@vue/shared');
+var service = require('./service.js');
 
-const INSTANCE_NAME = "ElLoading";
+const INSTANCE_KEY = Symbol("ElLoading");
 const createInstance = (el, binding) => {
-  const textExr = el.getAttribute("element-loading-text");
-  const spinnerExr = el.getAttribute("element-loading-spinner");
-  const svgExr = el.getAttribute("element-loading-svg");
-  const svgViewBoxExr = el.getAttribute("element-loading-svg-view-box");
-  const backgroundExr = el.getAttribute("element-loading-background");
-  const customClassExr = el.getAttribute("element-loading-custom-class");
+  var _a, _b, _c, _d;
   const vm = binding.instance;
-  el[INSTANCE_NAME] = index["default"]({
-    text: vm && vm[textExr] || textExr,
-    svg: vm && vm[svgExr] || svgExr,
-    svgViewBox: vm && vm[svgViewBoxExr] || svgViewBoxExr,
-    spinner: vm && vm[spinnerExr] || spinnerExr,
-    background: vm && vm[backgroundExr] || backgroundExr,
-    customClass: vm && vm[customClassExr] || customClassExr,
-    fullscreen: !!binding.modifiers.fullscreen,
-    target: binding.modifiers.fullscreen ? null : el,
-    body: !!binding.modifiers.body,
-    visible: true,
-    lock: !!binding.modifiers.lock
-  });
+  const getBindingProp = (key) => shared.isObject(binding.value) ? binding.value[key] : void 0;
+  const resolveExpression = (key) => {
+    const data = shared.isString(key) && (vm == null ? void 0 : vm[key]) || key;
+    if (data)
+      return vue.ref(data);
+    else
+      return data;
+  };
+  const getProp = (name) => resolveExpression(getBindingProp(name) || el.getAttribute(`element-loading-${shared.hyphenate(name)}`));
+  const fullscreen = (_a = getBindingProp("fullscreen")) != null ? _a : binding.modifiers.fullscreen;
+  const options = {
+    text: getProp("text"),
+    svg: getProp("svg"),
+    svgViewBox: getProp("svgViewBox"),
+    spinner: getProp("spinner"),
+    background: getProp("background"),
+    customClass: getProp("customClass"),
+    fullscreen,
+    target: (_b = getBindingProp("target")) != null ? _b : fullscreen ? void 0 : el,
+    body: (_c = getBindingProp("body")) != null ? _c : binding.modifiers.body,
+    lock: (_d = getBindingProp("lock")) != null ? _d : binding.modifiers.lock
+  };
+  el[INSTANCE_KEY] = {
+    options,
+    instance: service.Loading(options)
+  };
+};
+const updateOptions = (newOptions, originalOptions) => {
+  for (const key of Object.keys(originalOptions)) {
+    if (vue.isRef(originalOptions[key]))
+      originalOptions[key].value = newOptions[key];
+  }
 };
 const vLoading = {
   mounted(el, binding) {
@@ -34,20 +50,23 @@ const vLoading = {
     }
   },
   updated(el, binding) {
-    const instance = el[INSTANCE_NAME];
+    const instance = el[INSTANCE_KEY];
     if (binding.oldValue !== binding.value) {
-      if (binding.value) {
+      if (binding.value && !binding.oldValue) {
         createInstance(el, binding);
+      } else if (binding.value && binding.oldValue) {
+        if (shared.isObject(binding.value))
+          updateOptions(binding.value, instance.options);
       } else {
-        instance == null ? void 0 : instance.close();
+        instance == null ? void 0 : instance.instance.close();
       }
     }
   },
   unmounted(el) {
     var _a;
-    (_a = el[INSTANCE_NAME]) == null ? void 0 : _a.close();
+    (_a = el[INSTANCE_KEY]) == null ? void 0 : _a.instance.close();
   }
 };
 
-exports["default"] = vLoading;
+exports.vLoading = vLoading;
 //# sourceMappingURL=directive.js.map

package/lib/components/loading/src/directive.js.map

@@ -1 +1 @@
-{"version":3,"file":"directive.js","sources":["../../../../../../packages/components/loading/src/directive.ts"],"sourcesContent":["import Loading from './index'\n\nimport type { DirectiveBinding } from 'vue'\nimport type { ILoadingInstance } from './loading.type'\n\nconst INSTANCE_NAME = 'ElLoading'\n\nexport interface ElementLoading extends HTMLElement {\n  [INSTANCE_NAME]?: ILoadingInstance\n}\n\nconst createInstance = (el: ElementLoading, binding: DirectiveBinding) => {\n  const textExr = el.getAttribute('element-loading-text')\n  const spinnerExr = el.getAttribute('element-loading-spinner')\n  const svgExr = el.getAttribute('element-loading-svg')\n  const svgViewBoxExr = el.getAttribute('element-loading-svg-view-box')\n  const backgroundExr = el.getAttribute('element-loading-background')\n  const customClassExr = el.getAttribute('element-loading-custom-class')\n  const vm = binding.instance\n  el[INSTANCE_NAME] = Loading({\n    text: (vm && vm[textExr]) || textExr,\n    svg: (vm && vm[svgExr]) || svgExr,\n    svgViewBox: (vm && vm[svgViewBoxExr]) || svgViewBoxExr,\n    spinner: (vm && vm[spinnerExr]) || spinnerExr,\n    background: (vm && vm[backgroundExr]) || backgroundExr,\n    customClass: (vm && vm[customClassExr]) || customClassExr,\n    fullscreen: !!binding.modifiers.fullscreen,\n    target: binding.modifiers.fullscreen ? null : el,\n    body: !!binding.modifiers.body,\n    visible: true,\n    lock: !!binding.modifiers.lock,\n  })\n}\n\nconst vLoading = {\n  mounted(el: ElementLoading, binding: DirectiveBinding) {\n    if (binding.value) {\n      createInstance(el, binding)\n    }\n  },\n  updated(el: ElementLoading, binding: DirectiveBinding) {\n    const instance = el[INSTANCE_NAME]\n    if (binding.oldValue !== binding.value) {\n      if (binding.value) {\n        createInstance(el, binding)\n      } else {\n        instance?.close()\n      }\n    }\n  },\n  unmounted(el: ElementLoading) {\n    el[INSTANCE_NAME]?.close()\n  },\n}\n\nexport default vLoading\n"],"names":["Loading"],"mappings":";;;;;;AAKA,MAAM,gBAAgB;AAMtB,MAAM,iBAAiB,CAAC,IAAoB,YAA8B;AACxE,QAAM,UAAU,GAAG,aAAa;AAChC,QAAM,aAAa,GAAG,aAAa;AACnC,QAAM,SAAS,GAAG,aAAa;AAC/B,QAAM,gBAAgB,GAAG,aAAa;AACtC,QAAM,gBAAgB,GAAG,aAAa;AACtC,QAAM,iBAAiB,GAAG,aAAa;AACvC,QAAM,KAAK,QAAQ;AACnB,KAAG,iBAAiBA,iBAAQ;AAAA,IAC1B,MAAO,MAAM,GAAG,YAAa;AAAA,IAC7B,KAAM,MAAM,GAAG,WAAY;AAAA,IAC3B,YAAa,MAAM,GAAG,kBAAmB;AAAA,IACzC,SAAU,MAAM,GAAG,eAAgB;AAAA,IACnC,YAAa,MAAM,GAAG,kBAAmB;AAAA,IACzC,aAAc,MAAM,GAAG,mBAAoB;AAAA,IAC3C,YAAY,CAAC,CAAC,QAAQ,UAAU;AAAA,IAChC,QAAQ,QAAQ,UAAU,aAAa,OAAO;AAAA,IAC9C,MAAM,CAAC,CAAC,QAAQ,UAAU;AAAA,IAC1B,SAAS;AAAA,IACT,MAAM,CAAC,CAAC,QAAQ,UAAU;AAAA;AAAA;MAIxB,WAAW;AAAA,EACf,QAAQ,IAAoB,SAA2B;AACrD,QAAI,QAAQ,OAAO;AACjB,qBAAe,IAAI;AAAA;AAAA;AAAA,EAGvB,QAAQ,IAAoB,SAA2B;AACrD,UAAM,WAAW,GAAG;AACpB,QAAI,QAAQ,aAAa,QAAQ,OAAO;AACtC,UAAI,QAAQ,OAAO;AACjB,uBAAe,IAAI;AAAA,aACd;AACL,6CAAU;AAAA;AAAA;AAAA;AAAA,EAIhB,UAAU,IAAoB;AAlDhC;AAmDI,aAAG,mBAAH,mBAAmB;AAAA;AAAA;;;;"}
+{"version":3,"file":"directive.js","sources":["../../../../../../packages/components/loading/src/directive.ts"],"sourcesContent":["import { isRef, ref } from 'vue'\nimport { isObject, isString, hyphenate } from '@vue/shared'\nimport { Loading } from './service'\nimport type { Directive, DirectiveBinding, UnwrapRef } from 'vue'\nimport type { LoadingOptions } from './types'\nimport type { LoadingInstance } from './loading'\n\nconst INSTANCE_KEY = Symbol('ElLoading')\n\nexport type LoadingBinding = boolean | UnwrapRef<LoadingOptions>\nexport interface ElementLoading extends HTMLElement {\n  [INSTANCE_KEY]?: {\n    instance: LoadingInstance\n    options: LoadingOptions\n  }\n}\n\nconst createInstance = (\n  el: ElementLoading,\n  binding: DirectiveBinding<LoadingBinding>\n) => {\n  const vm = binding.instance\n\n  const getBindingProp = <K extends keyof LoadingOptions>(\n    key: K\n  ): LoadingOptions[K] =>\n    isObject(binding.value) ? binding.value[key] : undefined\n\n  const resolveExpression = (key: any) => {\n    const data = (isString(key) && vm?.[key]) || key\n    if (data) return ref(data)\n    else return data\n  }\n\n  const getProp = <K extends keyof LoadingOptions>(name: K) =>\n    resolveExpression(\n      getBindingProp(name) ||\n        el.getAttribute(`element-loading-${hyphenate(name)}`)\n    )\n\n  const fullscreen =\n    getBindingProp('fullscreen') ?? binding.modifiers.fullscreen\n\n  const options: LoadingOptions = {\n    text: getProp('text'),\n    svg: getProp('svg'),\n    svgViewBox: getProp('svgViewBox'),\n    spinner: getProp('spinner'),\n    background: getProp('background'),\n    customClass: getProp('customClass'),\n    fullscreen,\n    target: getBindingProp('target') ?? (fullscreen ? undefined : el),\n    body: getBindingProp('body') ?? binding.modifiers.body,\n    lock: getBindingProp('lock') ?? binding.modifiers.lock,\n  }\n  el[INSTANCE_KEY] = {\n    options,\n    instance: Loading(options),\n  }\n}\n\nconst updateOptions = (\n  newOptions: UnwrapRef<LoadingOptions>,\n  originalOptions: LoadingOptions\n) => {\n  for (const key of Object.keys(originalOptions)) {\n    if (isRef(originalOptions[key]))\n      originalOptions[key].value = newOptions[key]\n  }\n}\n\nexport const vLoading: Directive<ElementLoading, LoadingBinding> = {\n  mounted(el, binding) {\n    if (binding.value) {\n      createInstance(el, binding)\n    }\n  },\n  updated(el, binding) {\n    const instance = el[INSTANCE_KEY]\n    if (binding.oldValue !== binding.value) {\n      if (binding.value && !binding.oldValue) {\n        createInstance(el, binding)\n      } else if (binding.value && binding.oldValue) {\n        if (isObject(binding.value))\n          updateOptions(binding.value, instance!.options)\n      } else {\n        instance?.instance.close()\n      }\n    }\n  },\n  unmounted(el) {\n    el[INSTANCE_KEY]?.instance.close()\n  },\n}\n"],"names":["isObject","isString","ref","hyphenate","Loading","isRef"],"mappings":";;;;;;;;AAOA,MAAM,eAAe,OAAO;AAU5B,MAAM,iBAAiB,CACrB,IACA,YACG;AApBL;AAqBE,QAAM,KAAK,QAAQ;AAEnB,QAAM,iBAAiB,CACrB,QAEAA,gBAAS,QAAQ,SAAS,QAAQ,MAAM,OAAO;AAEjD,QAAM,oBAAoB,CAAC,QAAa;AACtC,UAAM,OAAQC,gBAAS,kCAAa,SAAS;AAC7C,QAAI;AAAM,aAAOC,QAAI;AAAA;AAChB,aAAO;AAAA;AAGd,QAAM,UAAU,CAAiC,SAC/C,kBACE,eAAe,SACb,GAAG,aAAa,mBAAmBC,iBAAU;AAGnD,QAAM,aACJ,qBAAe,kBAAf,YAAgC,QAAQ,UAAU;AAEpD,QAAM,UAA0B;AAAA,IAC9B,MAAM,QAAQ;AAAA,IACd,KAAK,QAAQ;AAAA,IACb,YAAY,QAAQ;AAAA,IACpB,SAAS,QAAQ;AAAA,IACjB,YAAY,QAAQ;AAAA,IACpB,aAAa,QAAQ;AAAA,IACrB;AAAA,IACA,QAAQ,qBAAe,cAAf,YAA6B,aAAa,SAAY;AAAA,IAC9D,MAAM,qBAAe,YAAf,YAA0B,QAAQ,UAAU;AAAA,IAClD,MAAM,qBAAe,YAAf,YAA0B,QAAQ,UAAU;AAAA;AAEpD,KAAG,gBAAgB;AAAA,IACjB;AAAA,IACA,UAAUC,gBAAQ;AAAA;AAAA;AAItB,MAAM,gBAAgB,CACpB,YACA,oBACG;AACH,aAAW,OAAO,OAAO,KAAK,kBAAkB;AAC9C,QAAIC,UAAM,gBAAgB;AACxB,sBAAgB,KAAK,QAAQ,WAAW;AAAA;AAAA;MAIjC,WAAsD;AAAA,EACjE,QAAQ,IAAI,SAAS;AACnB,QAAI,QAAQ,OAAO;AACjB,qBAAe,IAAI;AAAA;AAAA;AAAA,EAGvB,QAAQ,IAAI,SAAS;AACnB,UAAM,WAAW,GAAG;AACpB,QAAI,QAAQ,aAAa,QAAQ,OAAO;AACtC,UAAI,QAAQ,SAAS,CAAC,QAAQ,UAAU;AACtC,uBAAe,IAAI;AAAA,iBACV,QAAQ,SAAS,QAAQ,UAAU;AAC5C,YAAIL,gBAAS,QAAQ;AACnB,wBAAc,QAAQ,OAAO,SAAU;AAAA,aACpC;AACL,6CAAU,SAAS;AAAA;AAAA;AAAA;AAAA,EAIzB,UAAU,IAAI;AA1FhB;AA2FI,aAAG,kBAAH,mBAAkB,SAAS;AAAA;AAAA;;;;"}

package/lib/components/loading/src/loading.d.ts

@@ -0,0 +1,24 @@
+import type { LoadingOptionsResolved } from './types';
+export declare function createLoadingComponent(options: LoadingOptionsResolved): {
+    setText: (text: string) => void;
+    close: () => void;
+    handleAfterLeave: () => void;
+    vm: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+    $el: HTMLElement;
+    originalPosition: import("vue").Ref<string>;
+    originalOverflow: import("vue").Ref<string>;
+    visible: import("vue").Ref<boolean>;
+    parent: import("vue").Ref<import("./types").LoadingParentElement>;
+    background: import("vue").Ref<string>;
+    svg: import("vue").Ref<string>;
+    svgViewBox: import("vue").Ref<string>;
+    spinner: import("vue").Ref<string | boolean>;
+    text: import("vue").Ref<string>;
+    fullscreen: import("vue").Ref<boolean>;
+    lock: import("vue").Ref<boolean>;
+    customClass: import("vue").Ref<string>;
+    target: import("vue").Ref<HTMLElement>;
+    beforeClose?: import("vue").Ref<(() => boolean) | undefined> | undefined;
+    closed?: import("vue").Ref<(() => void) | undefined> | undefined;
+};
+export declare type LoadingInstance = ReturnType<typeof createLoadingComponent>;

package/lib/components/loading/src/loading.js

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var dom = require('../../../utils/dom.js');
+
+function createLoadingComponent(options) {
+  let afterLeaveTimer;
+  const afterLeaveFlag = vue.ref(false);
+  const data = vue.reactive({
+    ...options,
+    originalPosition: "",
+    originalOverflow: "",
+    visible: false
+  });
+  function setText(text) {
+    data.text = text;
+  }
+  function destroySelf() {
+    var _a, _b;
+    const target = data.parent;
+    if (!target.vLoadingAddClassList) {
+      let loadingNumber = target.getAttribute("loading-number");
+      loadingNumber = Number.parseInt(loadingNumber) - 1;
+      if (!loadingNumber) {
+        dom.removeClass(target, "el-loading-parent--relative");
+        target.removeAttribute("loading-number");
+      } else {
+        target.setAttribute("loading-number", loadingNumber.toString());
+      }
+      dom.removeClass(target, "el-loading-parent--hidden");
+    }
+    (_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el);
+  }
+  function close() {
+    var _a;
+    if (options.beforeClose && !options.beforeClose())
+      return;
+    const target = data.parent;
+    target.vLoadingAddClassList = void 0;
+    afterLeaveFlag.value = true;
+    clearTimeout(afterLeaveTimer);
+    afterLeaveTimer = window.setTimeout(() => {
+      if (afterLeaveFlag.value) {
+        afterLeaveFlag.value = false;
+        destroySelf();
+      }
+    }, 400);
+    data.visible = false;
+    (_a = options.closed) == null ? void 0 : _a.call(options);
+  }
+  function handleAfterLeave() {
+    if (!afterLeaveFlag.value)
+      return;
+    afterLeaveFlag.value = false;
+    destroySelf();
+  }
+  const elLoadingComponent = {
+    name: "ElLoading",
+    setup() {
+      return () => {
+        const svg = data.spinner || data.svg;
+        const spinner = vue.h("svg", {
+          class: "circular",
+          viewBox: data.svgViewBox ? data.svgViewBox : "25 25 50 50",
+          ...svg ? { innerHTML: svg } : {}
+        }, [
+          vue.h("circle", {
+            class: "path",
+            cx: "50",
+            cy: "50",
+            r: "20",
+            fill: "none"
+          })
+        ]);
+        const spinnerText = data.text ? vue.h("p", { class: "el-loading-text" }, [data.text]) : void 0;
+        return vue.h(vue.Transition, {
+          name: "el-loading-fade",
+          onAfterLeave: handleAfterLeave
+        }, {
+          default: vue.withCtx(() => [
+            vue.withDirectives(vue.createVNode("div", {
+              style: {
+                backgroundColor: data.background || ""
+              },
+              class: [
+                "el-loading-mask",
+                data.customClass,
+                data.fullscreen ? "is-fullscreen" : ""
+              ]
+            }, [
+              vue.h("div", {
+                class: "el-loading-spinner"
+              }, [spinner, spinnerText])
+            ]), [[vue.vShow, data.visible]])
+          ])
+        });
+      };
+    }
+  };
+  const vm = vue.createApp(elLoadingComponent).mount(document.createElement("div"));
+  return {
+    ...vue.toRefs(data),
+    setText,
+    close,
+    handleAfterLeave,
+    vm,
+    get $el() {
+      return vm.$el;
+    }
+  };
+}
+
+exports.createLoadingComponent = createLoadingComponent;
+//# sourceMappingURL=loading.js.map

package/lib/components/loading/src/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sources":["../../../../../../packages/components/loading/src/loading.ts"],"sourcesContent":["import {\n  createApp,\n  h,\n  reactive,\n  ref,\n  createVNode,\n  toRefs,\n  Transition,\n  vShow,\n  withCtx,\n  withDirectives,\n} from 'vue'\nimport { removeClass } from '@element-plus/utils/dom'\n\nimport type { LoadingOptionsResolved } from './types'\n\nexport function createLoadingComponent(options: LoadingOptionsResolved) {\n  let afterLeaveTimer: number\n\n  const afterLeaveFlag = ref(false)\n  const data = reactive({\n    ...options,\n    originalPosition: '',\n    originalOverflow: '',\n    visible: false,\n  })\n\n  function setText(text: string) {\n    data.text = text\n  }\n\n  function destroySelf() {\n    const target = data.parent\n    if (!target.vLoadingAddClassList) {\n      let loadingNumber: number | string | null =\n        target.getAttribute('loading-number')\n      loadingNumber = Number.parseInt(loadingNumber as any) - 1\n      if (!loadingNumber) {\n        removeClass(target, 'el-loading-parent--relative')\n        target.removeAttribute('loading-number')\n      } else {\n        target.setAttribute('loading-number', loadingNumber.toString())\n      }\n      removeClass(target, 'el-loading-parent--hidden')\n    }\n    vm.$el?.parentNode?.removeChild(vm.$el)\n  }\n\n  function close() {\n    if (options.beforeClose && !options.beforeClose()) return\n\n    const target = data.parent\n    target.vLoadingAddClassList = undefined\n    afterLeaveFlag.value = true\n    clearTimeout(afterLeaveTimer)\n\n    afterLeaveTimer = window.setTimeout(() => {\n      if (afterLeaveFlag.value) {\n        afterLeaveFlag.value = false\n        destroySelf()\n      }\n    }, 400)\n    data.visible = false\n\n    options.closed?.()\n  }\n\n  function handleAfterLeave() {\n    if (!afterLeaveFlag.value) return\n    afterLeaveFlag.value = false\n    destroySelf()\n  }\n\n  const elLoadingComponent = {\n    name: 'ElLoading',\n    setup() {\n      return () => {\n        const svg = data.spinner || data.svg\n        const spinner = h(\n          'svg',\n          {\n            class: 'circular',\n            viewBox: data.svgViewBox ? data.svgViewBox : '25 25 50 50',\n            ...(svg ? { innerHTML: svg } : {}),\n          },\n          [\n            h('circle', {\n              class: 'path',\n              cx: '50',\n              cy: '50',\n              r: '20',\n              fill: 'none',\n            }),\n          ]\n        )\n\n        const spinnerText = data.text\n          ? h('p', { class: 'el-loading-text' }, [data.text])\n          : undefined\n\n        return h(\n          Transition,\n          {\n            name: 'el-loading-fade',\n            onAfterLeave: handleAfterLeave,\n          },\n          {\n            default: withCtx(() => [\n              withDirectives(\n                createVNode(\n                  'div',\n                  {\n                    style: {\n                      backgroundColor: data.background || '',\n                    },\n                    class: [\n                      'el-loading-mask',\n                      data.customClass,\n                      data.fullscreen ? 'is-fullscreen' : '',\n                    ],\n                  },\n                  [\n                    h(\n                      'div',\n                      {\n                        class: 'el-loading-spinner',\n                      },\n                      [spinner, spinnerText]\n                    ),\n                  ]\n                ),\n                [[vShow, data.visible]]\n              ),\n            ]),\n          }\n        )\n      }\n    },\n  }\n\n  const vm = createApp(elLoadingComponent).mount(document.createElement('div'))\n\n  return {\n    ...toRefs(data),\n    setText,\n    close,\n    handleAfterLeave,\n    vm,\n    get $el(): HTMLElement {\n      return vm.$el\n    },\n  }\n}\n\nexport type LoadingInstance = ReturnType<typeof createLoadingComponent>\n"],"names":["ref","reactive","h","Transition","withCtx","withDirectives","createVNode","vShow","createApp","toRefs"],"mappings":";;;;;;;gCAgBuC,SAAiC;AACtE,MAAI;AAEJ,QAAM,iBAAiBA,QAAI;AAC3B,QAAM,OAAOC,aAAS;AAAA,OACjB;AAAA,IACH,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,SAAS;AAAA;AAGX,mBAAiB,MAAc;AAC7B,SAAK,OAAO;AAAA;AAGd,yBAAuB;AA/BzB;AAgCI,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,OAAO,sBAAsB;AAChC,UAAI,gBACF,OAAO,aAAa;AACtB,sBAAgB,OAAO,SAAS,iBAAwB;AACxD,UAAI,CAAC,eAAe;AAClB,wBAAY,QAAQ;AACpB,eAAO,gBAAgB;AAAA,aAClB;AACL,eAAO,aAAa,kBAAkB,cAAc;AAAA;AAEtD,sBAAY,QAAQ;AAAA;AAEtB,mBAAG,QAAH,mBAAQ,eAAR,mBAAoB,YAAY,GAAG;AAAA;AAGrC,mBAAiB;AAhDnB;AAiDI,QAAI,QAAQ,eAAe,CAAC,QAAQ;AAAe;AAEnD,UAAM,SAAS,KAAK;AACpB,WAAO,uBAAuB;AAC9B,mBAAe,QAAQ;AACvB,iBAAa;AAEb,sBAAkB,OAAO,WAAW,MAAM;AACxC,UAAI,eAAe,OAAO;AACxB,uBAAe,QAAQ;AACvB;AAAA;AAAA,OAED;AACH,SAAK,UAAU;AAEf,kBAAQ,WAAR;AAAA;AAGF,8BAA4B;AAC1B,QAAI,CAAC,eAAe;AAAO;AAC3B,mBAAe,QAAQ;AACvB;AAAA;AAGF,QAAM,qBAAqB;AAAA,IACzB,MAAM;AAAA,IACN,QAAQ;AACN,aAAO,MAAM;AACX,cAAM,MAAM,KAAK,WAAW,KAAK;AACjC,cAAM,UAAUC,MACd,OACA;AAAA,UACE,OAAO;AAAA,UACP,SAAS,KAAK,aAAa,KAAK,aAAa;AAAA,aACzC,MAAM,EAAE,WAAW,QAAQ;AAAA,WAEjC;AAAA,UACEA,MAAE,UAAU;AAAA,YACV,OAAO;AAAA,YACP,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,GAAG;AAAA,YACH,MAAM;AAAA;AAAA;AAKZ,cAAM,cAAc,KAAK,OACrBA,MAAE,KAAK,EAAE,OAAO,qBAAqB,CAAC,KAAK,SAC3C;AAEJ,eAAOA,MACLC,gBACA;AAAA,UACE,MAAM;AAAA,UACN,cAAc;AAAA,WAEhB;AAAA,UACE,SAASC,YAAQ,MAAM;AAAA,YACrBC,mBACEC,gBACE,OACA;AAAA,cACE,OAAO;AAAA,gBACL,iBAAiB,KAAK,cAAc;AAAA;AAAA,cAEtC,OAAO;AAAA,gBACL;AAAA,gBACA,KAAK;AAAA,gBACL,KAAK,aAAa,kBAAkB;AAAA;AAAA,eAGxC;AAAA,cACEJ,MACE,OACA;AAAA,gBACE,OAAO;AAAA,iBAET,CAAC,SAAS;AAAA,gBAIhB,CAAC,CAACK,WAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAS5B,QAAM,KAAKC,cAAU,oBAAoB,MAAM,SAAS,cAAc;AAEtE,SAAO;AAAA,OACFC,WAAO;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,QACI,MAAmB;AACrB,aAAO,GAAG;AAAA;AAAA;AAAA;;;;"}

package/lib/components/loading/src/service.d.ts

@@ -0,0 +1,3 @@
+import type { LoadingInstance } from './loading';
+import type { LoadingOptions } from './types';
+export declare const Loading: (options?: LoadingOptions) => LoadingInstance;