@element-plus/nightly 0.0.20220101 → 0.0.20220105

package/es/components/color-picker/src/index.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                class=\"el-color-picker__icon is-icon-arrow-down\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                class=\"el-color-picker__empty is-icon-close\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElPopper,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      Effect,\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["ElPopper","SvPanel","HueSlider","AlphaSlider","Predefine"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n  >\n    <template #content>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #default>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                class=\"el-color-picker__icon is-icon-arrow-down\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                class=\"el-color-picker__empty is-icon-close\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElTooltip,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["SvPanel","HueSlider","AlphaSlider","Predefine"],"mappings":"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"}

package/es/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.mjs

@@ -17,24 +17,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_arrow_down = resolveComponent("arrow-down");
   const _component_el_icon = resolveComponent("el-icon");
   const _component_close = resolveComponent("close");
-  const _component_el_popper = resolveComponent("el-popper");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
   const _directive_click_outside = resolveDirective("click-outside");
-  return openBlock(), createBlock(_component_el_popper, {
+  return openBlock(), createBlock(_component_el_tooltip, {
     ref: "popper",
     visible: _ctx.showPicker,
     "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => _ctx.showPicker = $event),
-    effect: _ctx.Effect.LIGHT,
-    "manual-mode": "",
-    trigger: "click",
     "show-arrow": false,
     "fallback-placements": ["bottom", "top", "right", "left"],
     offset: 0,
-    transition: "el-zoom-in-top",
     "gpu-acceleration": false,
     "popper-class": `el-color-picker__panel el-color-dropdown ${_ctx.popperClass}`,
-    "stop-popper-mouse-event": false
+    "stop-popper-mouse-event": false,
+    effect: "light",
+    trigger: "click",
+    transition: "el-zoom-in-top"
   }, {
-    default: withCtx(() => [
+    content: withCtx(() => [
       withDirectives((openBlock(), createElementBlock("div", null, [
         createElementVNode("div", _hoisted_1, [
           createVNode(_component_hue_slider, {
@@ -97,7 +96,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         [_directive_click_outside, _ctx.hide]
       ])
     ]),
-    trigger: withCtx(() => [
+    default: withCtx(() => [
       createElementVNode("div", {
         class: normalizeClass([
           "el-color-picker",
@@ -142,7 +141,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2)
     ]),
     _: 1
-  }, 8, ["visible", "effect", "popper-class"]);
+  }, 8, ["visible", "popper-class"]);
 }
 
 export { render };

package/es/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue?vue&type=template&id=46a474d5&lang.js"],"sourcesContent":["<template>\n  <el-popper\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :effect=\"Effect.LIGHT\"\n    manual-mode\n    trigger=\"click\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    transition=\"el-zoom-in-top\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n  >\n    <template #default>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #trigger>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                class=\"el-color-picker__icon is-icon-arrow-down\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                class=\"el-color-picker__empty is-icon-close\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-popper>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElPopper, { Effect } from '@element-plus/components/popper'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElPopper,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      Effect,\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;qBAiBa,KAAK,EAAC;qBAWN,KAAK,EAAC;;;;EAqCe;;;;;;;;;;;;;;;;wBAhEhC;IACE;IACQ;;IACP,mBAAc;IACf;IACA,SAAQ;IACP,YAAU;IACV;IACA;IACD;;IAEC;;;qBAIC;;;;YAEgB;iBAAe,EAAC;;YAA4B;;;;YAC/B;;;;;;;;;;SAInB;0BADR;;;cAGG,iBAAY;cACZ;;;;;;;;;kBAOO;;;;;;;YAON,IAAI;iBACC;;;;;;;;;;YAOL,IAAI;iBACC;;;;;;;;;;4CAjCe;;;;;QA2CvBA;;;;;;;;;;;;;;;;;mBAaU;;;;;;;;;;;;;gBAYI;;;;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.mjs","sources":["../../../../../../packages/components/color-picker/src/index.vue?vue&type=template&id=46a474d5&lang.js"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"showPicker\"\n    :show-arrow=\"false\"\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :offset=\"0\"\n    :gpu-acceleration=\"false\"\n    :popper-class=\"`el-color-picker__panel el-color-dropdown ${popperClass}`\"\n    :stop-popper-mouse-event=\"false\"\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n  >\n    <template #content>\n      <div v-click-outside=\"hide\">\n        <div class=\"el-color-dropdown__main-wrapper\">\n          <hue-slider ref=\"hue\" class=\"hue-slider\" :color=\"color\" vertical />\n          <sv-panel ref=\"svPanel\" :color=\"color\" />\n        </div>\n        <alpha-slider v-if=\"showAlpha\" ref=\"alpha\" :color=\"color\" />\n        <predefine\n          v-if=\"predefine\"\n          ref=\"predefine\"\n          :color=\"color\"\n          :colors=\"predefine\"\n        />\n        <div class=\"el-color-dropdown__btns\">\n          <span class=\"el-color-dropdown__value\">\n            <el-input\n              v-model=\"customInput\"\n              :validate-event=\"false\"\n              size=\"small\"\n              @keyup.enter=\"handleConfirm\"\n              @blur=\"handleConfirm\"\n            />\n          </span>\n          <el-button\n            size=\"small\"\n            type=\"text\"\n            class=\"el-color-dropdown__link-btn\"\n            @click=\"clear\"\n          >\n            {{ t('el.colorpicker.clear') }}\n          </el-button>\n          <el-button\n            plain\n            size=\"small\"\n            class=\"el-color-dropdown__btn\"\n            @click=\"confirmValue\"\n          >\n            {{ t('el.colorpicker.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template #default>\n      <div\n        :class=\"[\n          'el-color-picker',\n          colorDisabled ? 'is-disabled' : '',\n          colorSize ? `el-color-picker--${colorSize}` : '',\n        ]\"\n      >\n        <div v-if=\"colorDisabled\" class=\"el-color-picker__mask\"></div>\n        <div class=\"el-color-picker__trigger\" @click=\"handleTrigger\">\n          <span\n            class=\"el-color-picker__color\"\n            :class=\"{ 'is-alpha': showAlpha }\"\n          >\n            <span\n              class=\"el-color-picker__color-inner\"\n              :style=\"{\n                backgroundColor: displayedColor,\n              }\"\n            >\n              <el-icon\n                v-show=\"modelValue || showPanelColor\"\n                class=\"el-color-picker__icon is-icon-arrow-down\"\n              >\n                <arrow-down />\n              </el-icon>\n              <el-icon\n                v-if=\"!modelValue && !showPanelColor\"\n                class=\"el-color-picker__empty is-icon-close\"\n              >\n                <close />\n              </el-icon>\n            </span>\n          </span>\n        </div>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  inject,\n  nextTick,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  watch,\n} from 'vue'\nimport debounce from 'lodash/debounce'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport { ClickOutside } from '@element-plus/directives'\nimport { elFormItemKey, elFormKey } from '@element-plus/tokens'\nimport { useLocale, useSize } from '@element-plus/hooks'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElInput from '@element-plus/components/input'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { Close, ArrowDown } from '@element-plus/icons-vue'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport Color from './color'\nimport { OPTIONS_KEY } from './useOption'\n\nimport type { PropType } from 'vue'\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type { IUseOptions } from './useOption'\n\nexport default defineComponent({\n  name: 'ElColorPicker',\n  components: {\n    ElButton,\n    ElTooltip,\n    ElInput,\n    ElIcon,\n    Close,\n    ArrowDown,\n    SvPanel,\n    HueSlider,\n    AlphaSlider,\n    Predefine,\n  },\n  directives: {\n    ClickOutside,\n  },\n  props: {\n    modelValue: String,\n    showAlpha: Boolean,\n    colorFormat: String,\n    disabled: Boolean,\n    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    popperClass: String,\n    predefine: Array,\n  },\n  emits: ['change', 'active-change', UPDATE_MODEL_EVENT],\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const elForm = inject(elFormKey, {} as ElFormContext)\n    const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n    const hue = ref(null)\n    const svPanel = ref(null)\n    const alpha = ref(null)\n    const popper = ref(null)\n    // data\n    const color = reactive(\n      new Color({\n        enableAlpha: props.showAlpha,\n        format: props.colorFormat,\n      })\n    )\n    const showPicker = ref(false)\n    const showPanelColor = ref(false)\n    const customInput = ref('')\n    // computed\n    const displayedColor = computed(() => {\n      if (!props.modelValue && !showPanelColor.value) {\n        return 'transparent'\n      }\n      return displayedRgb(color, props.showAlpha)\n    })\n    const colorSize = useSize()\n    const colorDisabled = computed(() => {\n      return props.disabled || elForm.disabled\n    })\n\n    const currentColor = computed(() => {\n      return !props.modelValue && !showPanelColor.value ? '' : color.value\n    })\n    // watch\n    watch(\n      () => props.modelValue,\n      (newVal) => {\n        if (!newVal) {\n          showPanelColor.value = false\n        } else if (newVal && newVal !== color.value) {\n          color.fromString(newVal)\n        }\n      }\n    )\n    watch(\n      () => currentColor.value,\n      (val) => {\n        customInput.value = val\n        emit('active-change', val)\n        // showPanelColor.value = true\n      }\n    )\n\n    watch(\n      () => color.value,\n      () => {\n        if (!props.modelValue && !showPanelColor.value) {\n          showPanelColor.value = true\n        }\n      }\n    )\n\n    // methods\n    function displayedRgb(color, showAlpha) {\n      if (!(color instanceof Color)) {\n        throw Error('color should be instance of _color Class')\n      }\n\n      const { r, g, b } = color.toRgb()\n      return showAlpha\n        ? `rgba(${r}, ${g}, ${b}, ${color.get('alpha') / 100})`\n        : `rgb(${r}, ${g}, ${b})`\n    }\n\n    function setShowPicker(value) {\n      showPicker.value = value\n    }\n\n    const debounceSetShowPicker = debounce(setShowPicker, 100)\n\n    function hide() {\n      debounceSetShowPicker(false)\n      resetColor()\n    }\n\n    function resetColor() {\n      nextTick(() => {\n        if (props.modelValue) {\n          color.fromString(props.modelValue)\n        } else {\n          showPanelColor.value = false\n        }\n      })\n    }\n\n    function handleTrigger() {\n      if (colorDisabled.value) return\n      debounceSetShowPicker(!showPicker.value)\n    }\n\n    function handleConfirm() {\n      color.fromString(customInput.value)\n    }\n\n    function confirmValue() {\n      const value = color.value\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('change', value)\n      elFormItem.validate?.('change')\n      debounceSetShowPicker(false)\n      // check if modelValue change, if not change, then reset color.\n      nextTick(() => {\n        const newColor = new Color({\n          enableAlpha: props.showAlpha,\n          format: props.colorFormat,\n        })\n        newColor.fromString(props.modelValue)\n        if (!color.compare(newColor)) {\n          resetColor()\n        }\n      })\n    }\n\n    function clear() {\n      debounceSetShowPicker(false)\n      emit(UPDATE_MODEL_EVENT, null)\n      emit('change', null)\n      if (props.modelValue !== null) {\n        elFormItem.validate?.('change')\n      }\n      resetColor()\n    }\n\n    onMounted(() => {\n      if (props.modelValue) {\n        color.fromString(props.modelValue)\n        customInput.value = currentColor.value\n      }\n    })\n    watch(\n      () => showPicker.value,\n      () => {\n        nextTick(() => {\n          hue.value?.update()\n          svPanel.value?.update()\n          alpha.value?.update()\n        })\n      }\n    )\n\n    provide<IUseOptions>(OPTIONS_KEY, {\n      currentColor,\n    })\n\n    return {\n      color: color as Color,\n      colorDisabled,\n      colorSize,\n      displayedColor,\n      showPanelColor,\n      showPicker,\n      customInput,\n      handleConfirm,\n      hide,\n      handleTrigger,\n      clear,\n      confirmValue,\n      t,\n      hue,\n      svPanel,\n      alpha,\n      popper,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx","_createElementVNode"],"mappings":";;;qBAgBa,KAAK,EAAC;qBAWN,KAAK,EAAC;;;;EAqCe;;;;;;;;;;;;;;;;wBA/DhC;IACE;IACQ,wBAAmB;;IAC1B;IACA;IACA;IACA;IACA;IACA;;IAED,OAAO,EAACA;;;qBAIN;;;;YAEgB;iBAAe,EAAC;;YAA4B;;;;YAC/B;;;;;;;;;;SAInB;0BADR;;;cAGG,iBAAY;cACZ;;;;;;;;;kBAOO;;;;;;;YAON,IAAI;iBACC;;;;;;;;;;YAOL,IAAI;iBACC;;;;;;;;;;4CAjCe;;;;;QA2CvBC;;;;;;;;;;;;;;;;;mBAaU;;;;;;;;;;;;;gBAYI;;;;;;;;;;;"}

package/es/components/date-picker/index.d.ts

@@ -145,8 +145,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
     name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
-    popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     placeholder: string;
     readonly: boolean;
     clearable: boolean;
@@ -180,8 +180,8 @@ declare const _DatePicker: SFCWithInstall<import("vue").DefineComponent<{
     name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
-    popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     placeholder: string;
     readonly: boolean;
     clearable: boolean;
@@ -341,8 +341,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
     name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
-    popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     placeholder: string;
     readonly: boolean;
     clearable: boolean;
@@ -376,8 +376,8 @@ export declare const ElDatePicker: SFCWithInstall<import("vue").DefineComponent<
     name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
-    popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     placeholder: string;
     readonly: boolean;
     clearable: boolean;

package/es/components/date-picker/src/date-picker.d.ts

@@ -146,8 +146,8 @@ declare const _default: import("vue").DefineComponent<{
     name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
-    popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     placeholder: string;
     readonly: boolean;
     clearable: boolean;
@@ -181,8 +181,8 @@ declare const _default: import("vue").DefineComponent<{
     name: string | unknown[];
     modelValue: string | number | Date | (string | number | Date)[];
     editable: boolean;
-    popperClass: string;
     popperOptions: Partial<import("@popperjs/core").Options>;
+    popperClass: string;
     placeholder: string;
     readonly: boolean;
     clearable: boolean;

package/es/components/descriptions/index.d.ts

@@ -96,8 +96,8 @@ export declare const ElDescriptions: import("../../utils/types").SFCWithInstall<
         width: string | number;
         align: string;
         minWidth: string | number;
-        labelAlign: string;
         className: string;
+        labelAlign: string;
         labelClassName: string;
     } & {}>, {
         label: string;
@@ -105,8 +105,8 @@ export declare const ElDescriptions: import("../../utils/types").SFCWithInstall<
         width: string | number;
         align: string;
         minWidth: string | number;
-        labelAlign: string;
         className: string;
+        labelAlign: string;
         labelClassName: string;
     }>;
 };
@@ -159,8 +159,8 @@ export declare const ElDescriptionsItem: import("../../utils/types").SFCWithInst
     width: string | number;
     align: string;
     minWidth: string | number;
-    labelAlign: string;
     className: string;
+    labelAlign: string;
     labelClassName: string;
 } & {}>, {
     label: string;
@@ -168,7 +168,7 @@ export declare const ElDescriptionsItem: import("../../utils/types").SFCWithInst
     width: string | number;
     align: string;
     minWidth: string | number;
-    labelAlign: string;
     className: string;
+    labelAlign: string;
     labelClassName: string;
 }>>;

package/es/components/descriptions/src/description-item.d.ts

@@ -46,8 +46,8 @@ declare const _default: import("vue").DefineComponent<{
     width: string | number;
     align: string;
     minWidth: string | number;
-    labelAlign: string;
     className: string;
+    labelAlign: string;
     labelClassName: string;
 } & {}>, {
     label: string;
@@ -55,8 +55,8 @@ declare const _default: import("vue").DefineComponent<{
     width: string | number;
     align: string;
     minWidth: string | number;
-    labelAlign: string;
     className: string;
+    labelAlign: string;
     labelClassName: string;
 }>;
 export default _default;

package/es/components/dialog/index.d.ts

@@ -69,8 +69,9 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     modelValue: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     title: string;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    openDelay: number;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     destroyOnClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     closeIcon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
@@ -79,7 +80,6 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     fullscreen: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    openDelay: number;
     closeDelay: number;
 } & {
     zIndex?: number | undefined;
@@ -89,8 +89,8 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     modalClass?: string | undefined;
 }> & {
     onClose?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
 }, {
@@ -99,8 +99,9 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     title: string;
     width: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    openDelay: number;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     beforeClose: (...args: any[]) => void;
     destroyOnClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
@@ -110,7 +111,6 @@ export declare const ElDialog: import("../../utils/types").SFCWithInstall<import
     fullscreen: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    openDelay: number;
     closeDelay: number;
 }>> & Record<string, any>;
 export default ElDialog;

package/es/components/dialog/src/dialog.vue.d.ts

@@ -69,8 +69,9 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     title: string;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    openDelay: number;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     destroyOnClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     closeIcon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
@@ -79,7 +80,6 @@ declare const _default: import("vue").DefineComponent<{
     fullscreen: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    openDelay: number;
     closeDelay: number;
 } & {
     zIndex?: number | undefined;
@@ -89,8 +89,8 @@ declare const _default: import("vue").DefineComponent<{
     modalClass?: string | undefined;
 }> & {
     onClose?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
 }, {
@@ -99,8 +99,9 @@ declare const _default: import("vue").DefineComponent<{
     title: string;
     width: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    openDelay: number;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     beforeClose: (...args: any[]) => void;
     destroyOnClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
@@ -110,7 +111,6 @@ declare const _default: import("vue").DefineComponent<{
     fullscreen: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    openDelay: number;
     closeDelay: number;
 }>;
 export default _default;

package/es/components/drawer/index.d.ts

@@ -75,9 +75,10 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     modelValue: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     title: string;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     direction: import("../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
+    openDelay: number;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     destroyOnClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     closeIcon: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
@@ -86,7 +87,6 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     fullscreen: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    openDelay: number;
     closeDelay: number;
     withHeader: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modalFade: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -98,8 +98,8 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     modalClass?: string | undefined;
 }> & {
     onClose?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
 }, {
@@ -109,9 +109,10 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     title: string;
     width: import("../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     direction: import("../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
+    openDelay: number;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     beforeClose: (...args: any[]) => void;
     destroyOnClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
@@ -121,7 +122,6 @@ export declare const ElDrawer: import("../../utils/types").SFCWithInstall<import
     fullscreen: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    openDelay: number;
     closeDelay: number;
     withHeader: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modalFade: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

package/es/components/drawer/src/drawer.vue.d.ts

@@ -75,9 +75,10 @@ declare const _default: import("vue").DefineComponent<{
     modelValue: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     title: string;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     direction: import("../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
+    openDelay: number;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     destroyOnClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
     closeIcon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
@@ -86,7 +87,6 @@ declare const _default: import("vue").DefineComponent<{
     fullscreen: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    openDelay: number;
     closeDelay: number;
     withHeader: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modalFade: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -98,8 +98,8 @@ declare const _default: import("vue").DefineComponent<{
     modalClass?: string | undefined;
 }> & {
     onClose?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpen?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
 }, {
@@ -109,9 +109,10 @@ declare const _default: import("vue").DefineComponent<{
     title: string;
     width: import("../../../utils/props").BuildPropType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     direction: import("../../../utils/props").BuildPropType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
+    openDelay: number;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     beforeClose: (...args: any[]) => void;
     destroyOnClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
@@ -121,7 +122,6 @@ declare const _default: import("vue").DefineComponent<{
     fullscreen: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     lockScroll: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modal: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    openDelay: number;
     closeDelay: number;
     withHeader: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     modalFade: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;