element-plus 1.3.0-beta.2 → 1.3.0-beta.3

package/lib/components/alert/src/alert2.js

@@ -2,11 +2,43 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var alert_vue_vue_type_script_lang = require('./alert.vue_vue_type_script_lang.js');
-var alert_vue_vue_type_template_id_1755b449_lang = require('./alert.vue_vue_type_template_id_1755b449_lang.js');
+var icon = require('../../../utils/icon.js');
+var props = require('../../../utils/props.js');
 
-alert_vue_vue_type_script_lang["default"].render = alert_vue_vue_type_template_id_1755b449_lang.render;
-alert_vue_vue_type_script_lang["default"].__file = "packages/components/alert/src/alert.vue";
+const alertProps = props.buildProps({
+  title: {
+    type: String,
+    default: ""
+  },
+  description: {
+    type: String,
+    default: ""
+  },
+  type: {
+    type: String,
+    values: props.keyOf(icon.TypeComponentsMap),
+    default: "info"
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  closeText: {
+    type: String,
+    default: ""
+  },
+  showIcon: Boolean,
+  center: Boolean,
+  effect: {
+    type: String,
+    values: ["light", "dark"],
+    default: "light"
+  }
+});
+const alertEmits = {
+  close: (evt) => evt instanceof MouseEvent
+};
 
-exports["default"] = alert_vue_vue_type_script_lang["default"];
+exports.alertEmits = alertEmits;
+exports.alertProps = alertProps;
 //# sourceMappingURL=alert2.js.map

package/lib/components/alert/src/alert2.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"alert2.js","sources":["../../../../../../packages/components/alert/src/alert.ts"],"sourcesContent":["import { TypeComponentsMap } from '@element-plus/utils/icon'\nimport { buildProps, keyOf } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport type AlertEffect = 'light' | 'dark'\n\nexport const alertProps = buildProps({\n  title: {\n    type: String,\n    default: '',\n  },\n  description: {\n    type: String,\n    default: '',\n  },\n  type: {\n    type: String,\n    values: keyOf(TypeComponentsMap),\n    default: 'info',\n  },\n  closable: {\n    type: Boolean,\n    default: true,\n  },\n  closeText: {\n    type: String,\n    default: '',\n  },\n  showIcon: Boolean,\n  center: Boolean,\n  effect: {\n    type: String,\n    values: ['light', 'dark'],\n    default: 'light',\n  },\n} as const)\nexport type AlertProps = ExtractPropTypes<typeof alertProps>\n\nexport const alertEmits = {\n  close: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\nexport type AlertEmits = typeof alertEmits\n"],"names":["buildProps","keyOf","TypeComponentsMap"],"mappings":";;;;;;;AAEY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAEC,WAAK,CAACC,sBAAiB,CAAC;AACpC,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;AAC7B,IAAI,OAAO,EAAE,OAAO;AACpB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,UAAU;AAC3C;;;;;"}

package/lib/components/autocomplete/src/index.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/autocomplete/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"suggestionVisible\"\n    :placement=\"placement\"\n    :fallback-placements=\"['bottom-start', 'top-start']\"\n    :popper-class=\"`el-autocomplete__popper ${popperClass}`\"\n    :append-to-body=\"popperAppendToBody\"\n    :gpu-acceleration=\"false\"\n    pure\n    manual-mode\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    @show=\"onSuggestionShow\"\n  >\n    <div\n      v-clickoutside=\"close\"\n      :class=\"['el-autocomplete', $attrs.class]\"\n      :style=\"$attrs.style\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"suggestionVisible\"\n      :aria-owns=\"id\"\n    >\n      <el-input\n        ref=\"inputRef\"\n        v-bind=\"attrs\"\n        :model-value=\"modelValue\"\n        @input=\"handleInput\"\n        @change=\"handleChange\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @clear=\"handleClear\"\n        @keydown.up.prevent=\"highlight(highlightedIndex - 1)\"\n        @keydown.down.prevent=\"highlight(highlightedIndex + 1)\"\n        @keydown.enter=\"handleKeyEnter\"\n        @keydown.tab=\"close\"\n      >\n        <template v-if=\"$slots.prepend\" #prepend>\n          <slot name=\"prepend\"></slot>\n        </template>\n        <template v-if=\"$slots.append\" #append>\n          <slot name=\"append\"></slot>\n        </template>\n        <template v-if=\"$slots.prefix\" #prefix>\n          <slot name=\"prefix\"></slot>\n        </template>\n        <template v-if=\"$slots.suffix\" #suffix>\n          <slot name=\"suffix\"></slot>\n        </template>\n      </el-input>\n    </div>\n    <template #content>\n      <div\n        ref=\"regionRef\"\n        :class=\"[\n          'el-autocomplete-suggestion',\n          suggestionLoading && 'is-loading',\n        ]\"\n        :style=\"{ minWidth: dropdownWidth, outline: 'none' }\"\n        role=\"region\"\n      >\n        <el-scrollbar\n          :id=\"id\"\n          tag=\"ul\"\n          wrap-class=\"el-autocomplete-suggestion__wrap\"\n          view-class=\"el-autocomplete-suggestion__list\"\n          role=\"listbox\"\n        >\n          <li v-if=\"suggestionLoading\">\n            <el-icon class=\"is-loading\"><loading /></el-icon>\n          </li>\n          <template v-else>\n            <li\n              v-for=\"(item, index) in suggestions\"\n              :id=\"`${id}-item-${index}`\"\n              :key=\"index\"\n              :class=\"{ highlighted: highlightedIndex === index }\"\n              role=\"option\"\n              :aria-selected=\"highlightedIndex === index\"\n              @click=\"select(item)\"\n            >\n              <slot :item=\"item\">{{ item[valueKey] }}</slot>\n            </li>\n          </template>\n        </el-scrollbar>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, nextTick } from 'vue'\nimport { NOOP } from '@vue/shared'\nimport debounce from 'lodash/debounce'\nimport { useAttrs } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { generateId, isArray } from '@element-plus/utils/util'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { throwError } from '@element-plus/utils/error'\nimport ElInput from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAutocomplete',\n  components: {\n    ElTooltip,\n    ElInput,\n    ElScrollbar,\n    ElIcon,\n    Loading,\n  },\n  directives: {\n    clickoutside: ClickOutside,\n  },\n  inheritAttrs: false,\n  props: {\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      validator: (val: string): boolean => {\n        return [\n          'top',\n          'top-start',\n          'top-end',\n          'bottom',\n          'bottom-start',\n          'bottom-end',\n        ].includes(val)\n      },\n      default: 'bottom-start',\n    },\n    fetchSuggestions: {\n      type: Function as PropType<\n        (queryString: string, cb: (data: any[]) => void) => void\n      >,\n      default: NOOP,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    triggerOnFocus: {\n      type: Boolean,\n      default: true,\n    },\n    selectWhenUnmatched: {\n      type: Boolean,\n      default: false,\n    },\n    hideLoading: {\n      type: Boolean,\n      default: false,\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n    highlightFirstItem: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: [\n    UPDATE_MODEL_EVENT,\n    'input',\n    'change',\n    'focus',\n    'blur',\n    'clear',\n    'select',\n  ],\n  setup(props, ctx) {\n    const attrs = useAttrs()\n    const suggestions = ref<any[]>([])\n    const highlightedIndex = ref(-1)\n    const dropdownWidth = ref('')\n    const activated = ref(false)\n    const suggestionDisabled = ref(false)\n    const loading = ref(false)\n    const inputRef = ref<{\n      inputOrTextarea: HTMLInputElement | HTMLTextAreaElement\n      focus: () => void\n      $el: HTMLElement\n    } | null>(null)\n    const regionRef = ref<HTMLElement | null>(null)\n    const popper = ref(null)\n\n    const id = computed(() => {\n      return `el-autocomplete-${generateId()}`\n    })\n    const suggestionVisible = computed(() => {\n      const isValidData =\n        isArray(suggestions.value) && suggestions.value.length > 0\n      return (isValidData || loading.value) && activated.value\n    })\n    const suggestionLoading = computed(() => {\n      return !props.hideLoading && loading.value\n    })\n\n    const onSuggestionShow = () => {\n      nextTick(() => {\n        if (suggestionVisible.value) {\n          dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n        }\n      })\n    }\n\n    onMounted(() => {\n      inputRef.value!.inputOrTextarea.setAttribute('role', 'textbox')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-autocomplete', 'list')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-controls', 'id')\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    })\n\n    const getData = (queryString: string) => {\n      if (suggestionDisabled.value) {\n        return\n      }\n      loading.value = true\n      props.fetchSuggestions(queryString, (suggestionsArg) => {\n        loading.value = false\n        if (suggestionDisabled.value) {\n          return\n        }\n        if (isArray(suggestionsArg)) {\n          suggestions.value = suggestionsArg\n          highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n        } else {\n          throwError(\n            'ElAutocomplete',\n            'autocomplete suggestions must be an array'\n          )\n        }\n      })\n    }\n    const debouncedGetData = debounce(getData, props.debounce)\n    const handleInput = (value: string) => {\n      ctx.emit('input', value)\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      suggestionDisabled.value = false\n      if (!props.triggerOnFocus && !value) {\n        suggestionDisabled.value = true\n        suggestions.value = []\n        return\n      }\n      debouncedGetData(value)\n    }\n    const handleChange = (value) => {\n      ctx.emit('change', value)\n    }\n    const handleFocus = (e) => {\n      activated.value = true\n      ctx.emit('focus', e)\n      if (props.triggerOnFocus) {\n        debouncedGetData(String(props.modelValue))\n      }\n    }\n    const handleBlur = (e) => {\n      ctx.emit('blur', e)\n    }\n    const handleClear = () => {\n      activated.value = false\n      ctx.emit(UPDATE_MODEL_EVENT, '')\n      ctx.emit('clear')\n    }\n    const handleKeyEnter = () => {\n      if (\n        suggestionVisible.value &&\n        highlightedIndex.value >= 0 &&\n        highlightedIndex.value < suggestions.value.length\n      ) {\n        select(suggestions.value[highlightedIndex.value])\n      } else if (props.selectWhenUnmatched) {\n        ctx.emit('select', { value: props.modelValue })\n        nextTick(() => {\n          suggestions.value = []\n          highlightedIndex.value = -1\n        })\n      }\n    }\n    const close = () => {\n      activated.value = false\n    }\n    const focus = () => {\n      inputRef.value?.focus()\n    }\n    const select = (item) => {\n      ctx.emit('input', item[props.valueKey])\n      ctx.emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n      ctx.emit('select', item)\n      nextTick(() => {\n        suggestions.value = []\n        highlightedIndex.value = -1\n      })\n    }\n    const highlight = (index: number) => {\n      if (!suggestionVisible.value || loading.value) {\n        return\n      }\n      if (index < 0) {\n        highlightedIndex.value = -1\n        return\n      }\n      if (index >= suggestions.value.length) {\n        index = suggestions.value.length - 1\n      }\n      const suggestion = regionRef.value!.querySelector(\n        '.el-autocomplete-suggestion__wrap'\n      )!\n      const suggestionList = suggestion.querySelectorAll(\n        '.el-autocomplete-suggestion__list li'\n      )!\n      const highlightItem = suggestionList[index]\n      const scrollTop = suggestion.scrollTop\n      const { offsetTop, scrollHeight } = highlightItem as HTMLElement\n\n      if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n        suggestion.scrollTop += scrollHeight\n      }\n      if (offsetTop < scrollTop) {\n        suggestion.scrollTop -= scrollHeight\n      }\n      highlightedIndex.value = index\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    }\n\n    return {\n      attrs,\n      suggestions,\n      highlightedIndex,\n      dropdownWidth,\n      activated,\n      suggestionDisabled,\n      loading,\n      inputRef,\n      regionRef,\n      popper,\n\n      id,\n      suggestionVisible,\n      suggestionLoading,\n\n      getData,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleClear,\n      handleKeyEnter,\n      close,\n      focus,\n      select,\n      highlight,\n      onSuggestionShow,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElTooltip","ElScrollbar","ElIcon","Loading","UPDATE_MODEL_EVENT","ref","computed","isArray","throwError","nextTick"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/autocomplete/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"suggestionVisible\"\n    :placement=\"placement\"\n    :fallback-placements=\"['bottom-start', 'top-start']\"\n    :popper-class=\"`el-autocomplete__popper ${popperClass}`\"\n    :append-to-body=\"popperAppendToBody\"\n    :gpu-acceleration=\"false\"\n    pure\n    manual-mode\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n    @show=\"onSuggestionShow\"\n  >\n    <div\n      v-clickoutside=\"close\"\n      :class=\"['el-autocomplete', $attrs.class]\"\n      :style=\"$attrs.style\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"suggestionVisible\"\n      :aria-owns=\"id\"\n    >\n      <el-input\n        ref=\"inputRef\"\n        v-bind=\"attrs\"\n        :model-value=\"modelValue\"\n        @input=\"handleInput\"\n        @change=\"handleChange\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @clear=\"handleClear\"\n        @keydown.up.prevent=\"highlight(highlightedIndex - 1)\"\n        @keydown.down.prevent=\"highlight(highlightedIndex + 1)\"\n        @keydown.enter=\"handleKeyEnter\"\n        @keydown.tab=\"close\"\n      >\n        <template v-if=\"$slots.prepend\" #prepend>\n          <slot name=\"prepend\"></slot>\n        </template>\n        <template v-if=\"$slots.append\" #append>\n          <slot name=\"append\"></slot>\n        </template>\n        <template v-if=\"$slots.prefix\" #prefix>\n          <slot name=\"prefix\"></slot>\n        </template>\n        <template v-if=\"$slots.suffix\" #suffix>\n          <slot name=\"suffix\"></slot>\n        </template>\n      </el-input>\n    </div>\n    <template #content>\n      <div\n        ref=\"regionRef\"\n        :class=\"[\n          'el-autocomplete-suggestion',\n          suggestionLoading && 'is-loading',\n        ]\"\n        :style=\"{ minWidth: dropdownWidth, outline: 'none' }\"\n        role=\"region\"\n      >\n        <el-scrollbar\n          :id=\"id\"\n          tag=\"ul\"\n          wrap-class=\"el-autocomplete-suggestion__wrap\"\n          view-class=\"el-autocomplete-suggestion__list\"\n          role=\"listbox\"\n        >\n          <li v-if=\"suggestionLoading\">\n            <el-icon class=\"is-loading\"><loading /></el-icon>\n          </li>\n          <template v-else>\n            <li\n              v-for=\"(item, index) in suggestions\"\n              :id=\"`${id}-item-${index}`\"\n              :key=\"index\"\n              :class=\"{ highlighted: highlightedIndex === index }\"\n              role=\"option\"\n              :aria-selected=\"highlightedIndex === index\"\n              @click=\"select(item)\"\n            >\n              <slot :item=\"item\">{{ item[valueKey] }}</slot>\n            </li>\n          </template>\n        </el-scrollbar>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, nextTick } from 'vue'\nimport { NOOP } from '@vue/shared'\nimport debounce from 'lodash/debounce'\nimport { useAttrs } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { generateId, isArray } from '@element-plus/utils/util'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { throwError } from '@element-plus/utils/error'\nimport ElInput from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAutocomplete',\n  components: {\n    ElTooltip,\n    ElInput,\n    ElScrollbar,\n    ElIcon,\n    Loading,\n  },\n  directives: {\n    clickoutside: ClickOutside,\n  },\n  inheritAttrs: false,\n  props: {\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      validator: (val: string): boolean => {\n        return [\n          'top',\n          'top-start',\n          'top-end',\n          'bottom',\n          'bottom-start',\n          'bottom-end',\n        ].includes(val)\n      },\n      default: 'bottom-start',\n    },\n    fetchSuggestions: {\n      type: Function as PropType<\n        (queryString: string, cb: (data: any[]) => void) => void\n      >,\n      default: NOOP,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    triggerOnFocus: {\n      type: Boolean,\n      default: true,\n    },\n    selectWhenUnmatched: {\n      type: Boolean,\n      default: false,\n    },\n    hideLoading: {\n      type: Boolean,\n      default: false,\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n    highlightFirstItem: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: [\n    UPDATE_MODEL_EVENT,\n    'input',\n    'change',\n    'focus',\n    'blur',\n    'clear',\n    'select',\n  ],\n  setup(props, ctx) {\n    const attrs = useAttrs()\n    const suggestions = ref<any[]>([])\n    const highlightedIndex = ref(-1)\n    const dropdownWidth = ref('')\n    const activated = ref(false)\n    const suggestionDisabled = ref(false)\n    const loading = ref(false)\n    const inputRef = ref<{\n      inputOrTextarea: HTMLInputElement | HTMLTextAreaElement\n      focus: () => void\n      $el: HTMLElement\n    } | null>(null)\n    const regionRef = ref<HTMLElement | null>(null)\n    const popper = ref(null)\n\n    const id = computed(() => {\n      return `el-autocomplete-${generateId()}`\n    })\n    const suggestionVisible = computed(() => {\n      const isValidData =\n        isArray(suggestions.value) && suggestions.value.length > 0\n      return (isValidData || loading.value) && activated.value\n    })\n    const suggestionLoading = computed(() => {\n      return !props.hideLoading && loading.value\n    })\n\n    const onSuggestionShow = () => {\n      nextTick(() => {\n        if (suggestionVisible.value) {\n          dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n        }\n      })\n    }\n\n    onMounted(() => {\n      inputRef.value!.inputOrTextarea.setAttribute('role', 'textbox')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-autocomplete', 'list')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-controls', 'id')\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    })\n\n    const getData = (queryString: string) => {\n      if (suggestionDisabled.value) {\n        return\n      }\n      loading.value = true\n      props.fetchSuggestions(queryString, (suggestionsArg) => {\n        loading.value = false\n        if (suggestionDisabled.value) {\n          return\n        }\n        if (isArray(suggestionsArg)) {\n          suggestions.value = suggestionsArg\n          highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n        } else {\n          throwError(\n            'ElAutocomplete',\n            'autocomplete suggestions must be an array'\n          )\n        }\n      })\n    }\n    const debouncedGetData = debounce(getData, props.debounce)\n    const handleInput = (value: string) => {\n      ctx.emit('input', value)\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      suggestionDisabled.value = false\n      if (!props.triggerOnFocus && !value) {\n        suggestionDisabled.value = true\n        suggestions.value = []\n        return\n      }\n      debouncedGetData(value)\n    }\n    const handleChange = (value) => {\n      ctx.emit('change', value)\n    }\n    const handleFocus = (e) => {\n      activated.value = true\n      ctx.emit('focus', e)\n      if (props.triggerOnFocus) {\n        debouncedGetData(String(props.modelValue))\n      }\n    }\n    const handleBlur = (e) => {\n      ctx.emit('blur', e)\n    }\n    const handleClear = () => {\n      activated.value = false\n      ctx.emit(UPDATE_MODEL_EVENT, '')\n      ctx.emit('clear')\n    }\n    const handleKeyEnter = () => {\n      if (\n        suggestionVisible.value &&\n        highlightedIndex.value >= 0 &&\n        highlightedIndex.value < suggestions.value.length\n      ) {\n        select(suggestions.value[highlightedIndex.value])\n      } else if (props.selectWhenUnmatched) {\n        ctx.emit('select', { value: props.modelValue })\n        nextTick(() => {\n          suggestions.value = []\n          highlightedIndex.value = -1\n        })\n      }\n    }\n    const close = () => {\n      activated.value = false\n    }\n    const focus = () => {\n      inputRef.value?.focus()\n    }\n    const select = (item) => {\n      ctx.emit('input', item[props.valueKey])\n      ctx.emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n      ctx.emit('select', item)\n      nextTick(() => {\n        suggestions.value = []\n        highlightedIndex.value = -1\n      })\n    }\n    const highlight = (index: number) => {\n      if (!suggestionVisible.value || loading.value) {\n        return\n      }\n      if (index < 0) {\n        highlightedIndex.value = -1\n        return\n      }\n      if (index >= suggestions.value.length) {\n        index = suggestions.value.length - 1\n      }\n      const suggestion = regionRef.value!.querySelector(\n        '.el-autocomplete-suggestion__wrap'\n      )!\n      const suggestionList = suggestion.querySelectorAll(\n        '.el-autocomplete-suggestion__list li'\n      )!\n      const highlightItem = suggestionList[index]\n      const scrollTop = suggestion.scrollTop\n      const { offsetTop, scrollHeight } = highlightItem as HTMLElement\n\n      if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n        suggestion.scrollTop += scrollHeight\n      }\n      if (offsetTop < scrollTop) {\n        suggestion.scrollTop -= scrollHeight\n      }\n      highlightedIndex.value = index\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    }\n\n    return {\n      attrs,\n      suggestions,\n      highlightedIndex,\n      dropdownWidth,\n      activated,\n      suggestionDisabled,\n      loading,\n      inputRef,\n      regionRef,\n      popper,\n\n      id,\n      suggestionVisible,\n      suggestionLoading,\n\n      getData,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleClear,\n      handleKeyEnter,\n      close,\n      focus,\n      select,\n      highlight,\n      onSuggestionShow,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElTooltip","ElScrollbar","ElIcon","Loading","UPDATE_MODEL_EVENT","ref","computed","isArray","throwError","nextTick"],"mappings":"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"}

package/lib/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.js

@@ -28,6 +28,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     effect: "light",
     trigger: "click",
     transition: "el-zoom-in-top",
+    persistent: "",
     onShow: _ctx.onSuggestionShow
   }, {
     content: vue.withCtx(() => [

package/lib/components/autocomplete/src/index.vue_vue_type_template_id_2f09f285_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_2f09f285_lang.js","sources":["../../../../../../packages/components/autocomplete/src/index.vue?vue&type=template&id=2f09f285&lang.js"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"suggestionVisible\"\n    :placement=\"placement\"\n    :fallback-placements=\"['bottom-start', 'top-start']\"\n    :popper-class=\"`el-autocomplete__popper ${popperClass}`\"\n    :append-to-body=\"popperAppendToBody\"\n    :gpu-acceleration=\"false\"\n    pure\n    manual-mode\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    @show=\"onSuggestionShow\"\n  >\n    <div\n      v-clickoutside=\"close\"\n      :class=\"['el-autocomplete', $attrs.class]\"\n      :style=\"$attrs.style\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"suggestionVisible\"\n      :aria-owns=\"id\"\n    >\n      <el-input\n        ref=\"inputRef\"\n        v-bind=\"attrs\"\n        :model-value=\"modelValue\"\n        @input=\"handleInput\"\n        @change=\"handleChange\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @clear=\"handleClear\"\n        @keydown.up.prevent=\"highlight(highlightedIndex - 1)\"\n        @keydown.down.prevent=\"highlight(highlightedIndex + 1)\"\n        @keydown.enter=\"handleKeyEnter\"\n        @keydown.tab=\"close\"\n      >\n        <template v-if=\"$slots.prepend\" #prepend>\n          <slot name=\"prepend\"></slot>\n        </template>\n        <template v-if=\"$slots.append\" #append>\n          <slot name=\"append\"></slot>\n        </template>\n        <template v-if=\"$slots.prefix\" #prefix>\n          <slot name=\"prefix\"></slot>\n        </template>\n        <template v-if=\"$slots.suffix\" #suffix>\n          <slot name=\"suffix\"></slot>\n        </template>\n      </el-input>\n    </div>\n    <template #content>\n      <div\n        ref=\"regionRef\"\n        :class=\"[\n          'el-autocomplete-suggestion',\n          suggestionLoading && 'is-loading',\n        ]\"\n        :style=\"{ minWidth: dropdownWidth, outline: 'none' }\"\n        role=\"region\"\n      >\n        <el-scrollbar\n          :id=\"id\"\n          tag=\"ul\"\n          wrap-class=\"el-autocomplete-suggestion__wrap\"\n          view-class=\"el-autocomplete-suggestion__list\"\n          role=\"listbox\"\n        >\n          <li v-if=\"suggestionLoading\">\n            <el-icon class=\"is-loading\"><loading /></el-icon>\n          </li>\n          <template v-else>\n            <li\n              v-for=\"(item, index) in suggestions\"\n              :id=\"`${id}-item-${index}`\"\n              :key=\"index\"\n              :class=\"{ highlighted: highlightedIndex === index }\"\n              role=\"option\"\n              :aria-selected=\"highlightedIndex === index\"\n              @click=\"select(item)\"\n            >\n              <slot :item=\"item\">{{ item[valueKey] }}</slot>\n            </li>\n          </template>\n        </el-scrollbar>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, nextTick } from 'vue'\nimport { NOOP } from '@vue/shared'\nimport debounce from 'lodash/debounce'\nimport { useAttrs } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { generateId, isArray } from '@element-plus/utils/util'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { throwError } from '@element-plus/utils/error'\nimport ElInput from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAutocomplete',\n  components: {\n    ElTooltip,\n    ElInput,\n    ElScrollbar,\n    ElIcon,\n    Loading,\n  },\n  directives: {\n    clickoutside: ClickOutside,\n  },\n  inheritAttrs: false,\n  props: {\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      validator: (val: string): boolean => {\n        return [\n          'top',\n          'top-start',\n          'top-end',\n          'bottom',\n          'bottom-start',\n          'bottom-end',\n        ].includes(val)\n      },\n      default: 'bottom-start',\n    },\n    fetchSuggestions: {\n      type: Function as PropType<\n        (queryString: string, cb: (data: any[]) => void) => void\n      >,\n      default: NOOP,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    triggerOnFocus: {\n      type: Boolean,\n      default: true,\n    },\n    selectWhenUnmatched: {\n      type: Boolean,\n      default: false,\n    },\n    hideLoading: {\n      type: Boolean,\n      default: false,\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n    highlightFirstItem: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: [\n    UPDATE_MODEL_EVENT,\n    'input',\n    'change',\n    'focus',\n    'blur',\n    'clear',\n    'select',\n  ],\n  setup(props, ctx) {\n    const attrs = useAttrs()\n    const suggestions = ref<any[]>([])\n    const highlightedIndex = ref(-1)\n    const dropdownWidth = ref('')\n    const activated = ref(false)\n    const suggestionDisabled = ref(false)\n    const loading = ref(false)\n    const inputRef = ref<{\n      inputOrTextarea: HTMLInputElement | HTMLTextAreaElement\n      focus: () => void\n      $el: HTMLElement\n    } | null>(null)\n    const regionRef = ref<HTMLElement | null>(null)\n    const popper = ref(null)\n\n    const id = computed(() => {\n      return `el-autocomplete-${generateId()}`\n    })\n    const suggestionVisible = computed(() => {\n      const isValidData =\n        isArray(suggestions.value) && suggestions.value.length > 0\n      return (isValidData || loading.value) && activated.value\n    })\n    const suggestionLoading = computed(() => {\n      return !props.hideLoading && loading.value\n    })\n\n    const onSuggestionShow = () => {\n      nextTick(() => {\n        if (suggestionVisible.value) {\n          dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n        }\n      })\n    }\n\n    onMounted(() => {\n      inputRef.value!.inputOrTextarea.setAttribute('role', 'textbox')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-autocomplete', 'list')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-controls', 'id')\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    })\n\n    const getData = (queryString: string) => {\n      if (suggestionDisabled.value) {\n        return\n      }\n      loading.value = true\n      props.fetchSuggestions(queryString, (suggestionsArg) => {\n        loading.value = false\n        if (suggestionDisabled.value) {\n          return\n        }\n        if (isArray(suggestionsArg)) {\n          suggestions.value = suggestionsArg\n          highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n        } else {\n          throwError(\n            'ElAutocomplete',\n            'autocomplete suggestions must be an array'\n          )\n        }\n      })\n    }\n    const debouncedGetData = debounce(getData, props.debounce)\n    const handleInput = (value: string) => {\n      ctx.emit('input', value)\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      suggestionDisabled.value = false\n      if (!props.triggerOnFocus && !value) {\n        suggestionDisabled.value = true\n        suggestions.value = []\n        return\n      }\n      debouncedGetData(value)\n    }\n    const handleChange = (value) => {\n      ctx.emit('change', value)\n    }\n    const handleFocus = (e) => {\n      activated.value = true\n      ctx.emit('focus', e)\n      if (props.triggerOnFocus) {\n        debouncedGetData(String(props.modelValue))\n      }\n    }\n    const handleBlur = (e) => {\n      ctx.emit('blur', e)\n    }\n    const handleClear = () => {\n      activated.value = false\n      ctx.emit(UPDATE_MODEL_EVENT, '')\n      ctx.emit('clear')\n    }\n    const handleKeyEnter = () => {\n      if (\n        suggestionVisible.value &&\n        highlightedIndex.value >= 0 &&\n        highlightedIndex.value < suggestions.value.length\n      ) {\n        select(suggestions.value[highlightedIndex.value])\n      } else if (props.selectWhenUnmatched) {\n        ctx.emit('select', { value: props.modelValue })\n        nextTick(() => {\n          suggestions.value = []\n          highlightedIndex.value = -1\n        })\n      }\n    }\n    const close = () => {\n      activated.value = false\n    }\n    const focus = () => {\n      inputRef.value?.focus()\n    }\n    const select = (item) => {\n      ctx.emit('input', item[props.valueKey])\n      ctx.emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n      ctx.emit('select', item)\n      nextTick(() => {\n        suggestions.value = []\n        highlightedIndex.value = -1\n      })\n    }\n    const highlight = (index: number) => {\n      if (!suggestionVisible.value || loading.value) {\n        return\n      }\n      if (index < 0) {\n        highlightedIndex.value = -1\n        return\n      }\n      if (index >= suggestions.value.length) {\n        index = suggestions.value.length - 1\n      }\n      const suggestion = regionRef.value!.querySelector(\n        '.el-autocomplete-suggestion__wrap'\n      )!\n      const suggestionList = suggestion.querySelectorAll(\n        '.el-autocomplete-suggestion__list li'\n      )!\n      const highlightItem = suggestionList[index]\n      const scrollTop = suggestion.scrollTop\n      const { offsetTop, scrollHeight } = highlightItem as HTMLElement\n\n      if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n        suggestion.scrollTop += scrollHeight\n      }\n      if (offsetTop < scrollTop) {\n        suggestion.scrollTop -= scrollHeight\n      }\n      highlightedIndex.value = index\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    }\n\n    return {\n      attrs,\n      suggestions,\n      highlightedIndex,\n      dropdownWidth,\n      activated,\n      suggestionDisabled,\n      loading,\n      inputRef,\n      regionRef,\n      popper,\n\n      id,\n      suggestionVisible,\n      suggestionLoading,\n\n      getData,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleClear,\n      handleKeyEnter,\n      close,\n      focus,\n      select,\n      highlight,\n      onSuggestionShow,\n    }\n  },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;wBACE;IACE;IACQ;;IACP;IACA;IACA;IACA;IACA;IACD;IACA;IACA,MAAM,EAAC;;IAEP;oCACuB;;;;;;;;;QA8ClBA;YACG,EAAC;;;UAGF;UACD;;UAEA;gBACK;;;;;;;sCAGoC;;;;;;;gDAKb;;6DAED;;;;;;;;;;;;;;;;;QA5D9B;;QAEDA;uBACa,EAAC;uBACA;;;;UAMX,aAAW;UACX,SAAO;kBACD,EAAE;mBACD,gBAAW;;sCAEA;;;;;;;;WAMH;;;;;;;;;;iCAGsB;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_2f09f285_lang.js","sources":["../../../../../../packages/components/autocomplete/src/index.vue?vue&type=template&id=2f09f285&lang.js"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"popper\"\n    v-model:visible=\"suggestionVisible\"\n    :placement=\"placement\"\n    :fallback-placements=\"['bottom-start', 'top-start']\"\n    :popper-class=\"`el-autocomplete__popper ${popperClass}`\"\n    :append-to-body=\"popperAppendToBody\"\n    :gpu-acceleration=\"false\"\n    pure\n    manual-mode\n    effect=\"light\"\n    trigger=\"click\"\n    transition=\"el-zoom-in-top\"\n    persistent\n    @show=\"onSuggestionShow\"\n  >\n    <div\n      v-clickoutside=\"close\"\n      :class=\"['el-autocomplete', $attrs.class]\"\n      :style=\"$attrs.style\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"suggestionVisible\"\n      :aria-owns=\"id\"\n    >\n      <el-input\n        ref=\"inputRef\"\n        v-bind=\"attrs\"\n        :model-value=\"modelValue\"\n        @input=\"handleInput\"\n        @change=\"handleChange\"\n        @focus=\"handleFocus\"\n        @blur=\"handleBlur\"\n        @clear=\"handleClear\"\n        @keydown.up.prevent=\"highlight(highlightedIndex - 1)\"\n        @keydown.down.prevent=\"highlight(highlightedIndex + 1)\"\n        @keydown.enter=\"handleKeyEnter\"\n        @keydown.tab=\"close\"\n      >\n        <template v-if=\"$slots.prepend\" #prepend>\n          <slot name=\"prepend\"></slot>\n        </template>\n        <template v-if=\"$slots.append\" #append>\n          <slot name=\"append\"></slot>\n        </template>\n        <template v-if=\"$slots.prefix\" #prefix>\n          <slot name=\"prefix\"></slot>\n        </template>\n        <template v-if=\"$slots.suffix\" #suffix>\n          <slot name=\"suffix\"></slot>\n        </template>\n      </el-input>\n    </div>\n    <template #content>\n      <div\n        ref=\"regionRef\"\n        :class=\"[\n          'el-autocomplete-suggestion',\n          suggestionLoading && 'is-loading',\n        ]\"\n        :style=\"{ minWidth: dropdownWidth, outline: 'none' }\"\n        role=\"region\"\n      >\n        <el-scrollbar\n          :id=\"id\"\n          tag=\"ul\"\n          wrap-class=\"el-autocomplete-suggestion__wrap\"\n          view-class=\"el-autocomplete-suggestion__list\"\n          role=\"listbox\"\n        >\n          <li v-if=\"suggestionLoading\">\n            <el-icon class=\"is-loading\"><loading /></el-icon>\n          </li>\n          <template v-else>\n            <li\n              v-for=\"(item, index) in suggestions\"\n              :id=\"`${id}-item-${index}`\"\n              :key=\"index\"\n              :class=\"{ highlighted: highlightedIndex === index }\"\n              role=\"option\"\n              :aria-selected=\"highlightedIndex === index\"\n              @click=\"select(item)\"\n            >\n              <slot :item=\"item\">{{ item[valueKey] }}</slot>\n            </li>\n          </template>\n        </el-scrollbar>\n      </div>\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, nextTick } from 'vue'\nimport { NOOP } from '@vue/shared'\nimport debounce from 'lodash/debounce'\nimport { useAttrs } from '@element-plus/hooks'\nimport { ClickOutside } from '@element-plus/directives'\nimport { generateId, isArray } from '@element-plus/utils/util'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { throwError } from '@element-plus/utils/error'\nimport ElInput from '@element-plus/components/input'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElIcon from '@element-plus/components/icon'\nimport { Loading } from '@element-plus/icons-vue'\n\nimport type { Placement } from '@element-plus/components/popper'\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAutocomplete',\n  components: {\n    ElTooltip,\n    ElInput,\n    ElScrollbar,\n    ElIcon,\n    Loading,\n  },\n  directives: {\n    clickoutside: ClickOutside,\n  },\n  inheritAttrs: false,\n  props: {\n    valueKey: {\n      type: String,\n      default: 'value',\n    },\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    placement: {\n      type: String as PropType<Placement>,\n      validator: (val: string): boolean => {\n        return [\n          'top',\n          'top-start',\n          'top-end',\n          'bottom',\n          'bottom-start',\n          'bottom-end',\n        ].includes(val)\n      },\n      default: 'bottom-start',\n    },\n    fetchSuggestions: {\n      type: Function as PropType<\n        (queryString: string, cb: (data: any[]) => void) => void\n      >,\n      default: NOOP,\n    },\n    popperClass: {\n      type: String,\n      default: '',\n    },\n    triggerOnFocus: {\n      type: Boolean,\n      default: true,\n    },\n    selectWhenUnmatched: {\n      type: Boolean,\n      default: false,\n    },\n    hideLoading: {\n      type: Boolean,\n      default: false,\n    },\n    popperAppendToBody: {\n      type: Boolean,\n      default: true,\n    },\n    highlightFirstItem: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  emits: [\n    UPDATE_MODEL_EVENT,\n    'input',\n    'change',\n    'focus',\n    'blur',\n    'clear',\n    'select',\n  ],\n  setup(props, ctx) {\n    const attrs = useAttrs()\n    const suggestions = ref<any[]>([])\n    const highlightedIndex = ref(-1)\n    const dropdownWidth = ref('')\n    const activated = ref(false)\n    const suggestionDisabled = ref(false)\n    const loading = ref(false)\n    const inputRef = ref<{\n      inputOrTextarea: HTMLInputElement | HTMLTextAreaElement\n      focus: () => void\n      $el: HTMLElement\n    } | null>(null)\n    const regionRef = ref<HTMLElement | null>(null)\n    const popper = ref(null)\n\n    const id = computed(() => {\n      return `el-autocomplete-${generateId()}`\n    })\n    const suggestionVisible = computed(() => {\n      const isValidData =\n        isArray(suggestions.value) && suggestions.value.length > 0\n      return (isValidData || loading.value) && activated.value\n    })\n    const suggestionLoading = computed(() => {\n      return !props.hideLoading && loading.value\n    })\n\n    const onSuggestionShow = () => {\n      nextTick(() => {\n        if (suggestionVisible.value) {\n          dropdownWidth.value = `${inputRef.value!.$el.offsetWidth}px`\n        }\n      })\n    }\n\n    onMounted(() => {\n      inputRef.value!.inputOrTextarea.setAttribute('role', 'textbox')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-autocomplete', 'list')\n      inputRef.value!.inputOrTextarea.setAttribute('aria-controls', 'id')\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    })\n\n    const getData = (queryString: string) => {\n      if (suggestionDisabled.value) {\n        return\n      }\n      loading.value = true\n      props.fetchSuggestions(queryString, (suggestionsArg) => {\n        loading.value = false\n        if (suggestionDisabled.value) {\n          return\n        }\n        if (isArray(suggestionsArg)) {\n          suggestions.value = suggestionsArg\n          highlightedIndex.value = props.highlightFirstItem ? 0 : -1\n        } else {\n          throwError(\n            'ElAutocomplete',\n            'autocomplete suggestions must be an array'\n          )\n        }\n      })\n    }\n    const debouncedGetData = debounce(getData, props.debounce)\n    const handleInput = (value: string) => {\n      ctx.emit('input', value)\n      ctx.emit(UPDATE_MODEL_EVENT, value)\n      suggestionDisabled.value = false\n      if (!props.triggerOnFocus && !value) {\n        suggestionDisabled.value = true\n        suggestions.value = []\n        return\n      }\n      debouncedGetData(value)\n    }\n    const handleChange = (value) => {\n      ctx.emit('change', value)\n    }\n    const handleFocus = (e) => {\n      activated.value = true\n      ctx.emit('focus', e)\n      if (props.triggerOnFocus) {\n        debouncedGetData(String(props.modelValue))\n      }\n    }\n    const handleBlur = (e) => {\n      ctx.emit('blur', e)\n    }\n    const handleClear = () => {\n      activated.value = false\n      ctx.emit(UPDATE_MODEL_EVENT, '')\n      ctx.emit('clear')\n    }\n    const handleKeyEnter = () => {\n      if (\n        suggestionVisible.value &&\n        highlightedIndex.value >= 0 &&\n        highlightedIndex.value < suggestions.value.length\n      ) {\n        select(suggestions.value[highlightedIndex.value])\n      } else if (props.selectWhenUnmatched) {\n        ctx.emit('select', { value: props.modelValue })\n        nextTick(() => {\n          suggestions.value = []\n          highlightedIndex.value = -1\n        })\n      }\n    }\n    const close = () => {\n      activated.value = false\n    }\n    const focus = () => {\n      inputRef.value?.focus()\n    }\n    const select = (item) => {\n      ctx.emit('input', item[props.valueKey])\n      ctx.emit(UPDATE_MODEL_EVENT, item[props.valueKey])\n      ctx.emit('select', item)\n      nextTick(() => {\n        suggestions.value = []\n        highlightedIndex.value = -1\n      })\n    }\n    const highlight = (index: number) => {\n      if (!suggestionVisible.value || loading.value) {\n        return\n      }\n      if (index < 0) {\n        highlightedIndex.value = -1\n        return\n      }\n      if (index >= suggestions.value.length) {\n        index = suggestions.value.length - 1\n      }\n      const suggestion = regionRef.value!.querySelector(\n        '.el-autocomplete-suggestion__wrap'\n      )!\n      const suggestionList = suggestion.querySelectorAll(\n        '.el-autocomplete-suggestion__list li'\n      )!\n      const highlightItem = suggestionList[index]\n      const scrollTop = suggestion.scrollTop\n      const { offsetTop, scrollHeight } = highlightItem as HTMLElement\n\n      if (offsetTop + scrollHeight > scrollTop + suggestion.clientHeight) {\n        suggestion.scrollTop += scrollHeight\n      }\n      if (offsetTop < scrollTop) {\n        suggestion.scrollTop -= scrollHeight\n      }\n      highlightedIndex.value = index\n      inputRef.value!.inputOrTextarea.setAttribute(\n        'aria-activedescendant',\n        `${id.value}-item-${highlightedIndex.value}`\n      )\n    }\n\n    return {\n      attrs,\n      suggestions,\n      highlightedIndex,\n      dropdownWidth,\n      activated,\n      suggestionDisabled,\n      loading,\n      inputRef,\n      regionRef,\n      popper,\n\n      id,\n      suggestionVisible,\n      suggestionLoading,\n\n      getData,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleClear,\n      handleKeyEnter,\n      close,\n      focus,\n      select,\n      highlight,\n      onSuggestionShow,\n    }\n  },\n})\n</script>\n"],"names":["_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;wBACE;IACE;IACQ;;IACP;IACA;IACA;IACA;IACA;IACD;IACA;IACA;IACA;;IAEA;oCACuB;;;;;;;;;QA8ClBA;YACG,EAAC;;;UAGF;UACD;;UAEA;gBACK;;;;;;;sCAGoC;;;;;;;gDAKb;;6DAED;;;;;;;;;;;;;;;;;QA5D9B;;QAEDA;uBACa,EAAC;uBACA;;;;UAMX,aAAW;UACX,SAAO;kBACD,EAAE;mBACD,gBAAW;;sCAEA;;;;;;;;WAMH;;;;;;;;;;iCAGsB;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/badge/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('../../utils/with-install.js');
-require('./src/badge2.js');
-var badge = require('./src/badge.js');
+require('./src/badge.js');
+var badge = require('./src/badge2.js');
 var badge_vue_vue_type_script_lang = require('./src/badge.vue_vue_type_script_lang.js');
 
 const ElBadge = withInstall.withInstall(badge_vue_vue_type_script_lang["default"]);

package/lib/components/badge/src/badge.js

@@ -2,25 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var props = require('../../../utils/props.js');
+var badge_vue_vue_type_script_lang = require('./badge.vue_vue_type_script_lang.js');
+var badge_vue_vue_type_template_id_020a5517_lang = require('./badge.vue_vue_type_template_id_020a5517_lang.js');
 
-const badgeProps = props.buildProps({
-  value: {
-    type: [String, Number],
-    default: ""
-  },
-  max: {
-    type: Number,
-    default: 99
-  },
-  isDot: Boolean,
-  hidden: Boolean,
-  type: {
-    type: String,
-    values: ["primary", "success", "warning", "info", "danger"],
-    default: "danger"
-  }
-});
+badge_vue_vue_type_script_lang["default"].render = badge_vue_vue_type_template_id_020a5517_lang.render;
+badge_vue_vue_type_script_lang["default"].__file = "packages/components/badge/src/badge.vue";
 
-exports.badgeProps = badgeProps;
+exports["default"] = badge_vue_vue_type_script_lang["default"];
 //# sourceMappingURL=badge.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sources":["../../../../../../packages/components/badge/src/badge.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\n\nimport type { ExtractPropTypes } from 'vue'\n\nexport const badgeProps = buildProps({\n  value: {\n    type: [String, Number],\n    default: '',\n  },\n  max: {\n    type: Number,\n    default: 99,\n  },\n  isDot: Boolean,\n  hidden: Boolean,\n  type: {\n    type: String,\n    values: ['primary', 'success', 'warning', 'info', 'danger'],\n    default: 'danger',\n  },\n} as const)\nexport type BadgeProps = ExtractPropTypes<typeof badgeProps>\n"],"names":["buildProps"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC;AAC/D,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"badge.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/components/badge/src/badge.vue_vue_type_script_lang.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var badge = require('./badge.js');
+var badge = require('./badge2.js');
 
 var script = vue.defineComponent({
   name: "ElBadge",

package/lib/components/badge/src/badge2.js

@@ -2,11 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var badge_vue_vue_type_script_lang = require('./badge.vue_vue_type_script_lang.js');
-var badge_vue_vue_type_template_id_020a5517_lang = require('./badge.vue_vue_type_template_id_020a5517_lang.js');
+var props = require('../../../utils/props.js');
 
-badge_vue_vue_type_script_lang["default"].render = badge_vue_vue_type_template_id_020a5517_lang.render;
-badge_vue_vue_type_script_lang["default"].__file = "packages/components/badge/src/badge.vue";
+const badgeProps = props.buildProps({
+  value: {
+    type: [String, Number],
+    default: ""
+  },
+  max: {
+    type: Number,
+    default: 99
+  },
+  isDot: Boolean,
+  hidden: Boolean,
+  type: {
+    type: String,
+    values: ["primary", "success", "warning", "info", "danger"],
+    default: "danger"
+  }
+});
 
-exports["default"] = badge_vue_vue_type_script_lang["default"];
+exports.badgeProps = badgeProps;
 //# sourceMappingURL=badge2.js.map

package/lib/components/badge/src/badge2.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"badge2.js","sources":["../../../../../../packages/components/badge/src/badge.ts"],"sourcesContent":["import { buildProps } from '@element-plus/utils/props'\n\nimport type { ExtractPropTypes } from 'vue'\n\nexport const badgeProps = buildProps({\n  value: {\n    type: [String, Number],\n    default: '',\n  },\n  max: {\n    type: Number,\n    default: 99,\n  },\n  isDot: Boolean,\n  hidden: Boolean,\n  type: {\n    type: String,\n    values: ['primary', 'success', 'warning', 'info', 'danger'],\n    default: 'danger',\n  },\n} as const)\nexport type BadgeProps = ExtractPropTypes<typeof badgeProps>\n"],"names":["buildProps"],"mappings":";;;;;;AACY,MAAC,UAAU,GAAGA,gBAAU,CAAC;AACrC,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,KAAK,EAAE,OAAO;AAChB,EAAE,MAAM,EAAE,OAAO;AACjB,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC;AAC/D,IAAI,OAAO,EAAE,QAAQ;AACrB,GAAG;AACH,CAAC;;;;"}

package/lib/components/color-picker/src/index.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","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":["defineComponent","ElButton","ElTooltip","ElInput","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","useLocale","inject","ref","color","reactive","computed","UPDATE_MODEL_EVENT","nextTick","watch","OPTIONS_KEY"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","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    persistent\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":["defineComponent","ElButton","ElTooltip","ElInput","Close","ArrowDown","SvPanel","HueSlider","AlphaSlider","Predefine","ClickOutside","useLocale","inject","ref","color","reactive","computed","UPDATE_MODEL_EVENT","nextTick","watch","OPTIONS_KEY"],"mappings":"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"}

package/lib/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.js

@@ -35,7 +35,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "stop-popper-mouse-event": false,
     effect: "light",
     trigger: "click",
-    transition: "el-zoom-in-top"
+    transition: "el-zoom-in-top",
+    persistent: ""
   }, {
     content: vue.withCtx(() => [
       vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", null, [

package/lib/components/color-picker/src/index.vue_vue_type_template_id_46a474d5_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.js","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;;;yBAIN;;;;YAEgB;iBAAe,EAAC;;YAA4B;;;;YAC/B;;;;;;;;;;SAInB;8BADR;;;cAGG,iBAAY;cACZ;;;;;;;;;kBAOO;;;;;;;YAON,IAAI;iBACC;;;;;;;;;;YAOL,IAAI;iBACC;;;;;;;;;;4CAjCe;;;;;QA2CvBC;;;;;;;;;;;;;;;;;mBAaU;;;;;;;;;;;;;gBAYI;;;;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_46a474d5_lang.js","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    persistent\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":["_createElementVNode"],"mappings":";;;;;;;qBAiBa,KAAK,EAAC;qBAWN,KAAK,EAAC;;;;EAqCe;;;;;;;;;;;;;;;;wBAhEhC;IACE;IACQ,wBAAmB;;IAC1B;IACA;IACA;IACA;IACA;IACA;IACD;;IAEA;;;yBAIE;;;;YAEgB;iBAAe,EAAC;;YAA4B;;;;YAC/B;;;;;;;;;;SAInB;8BADR;;;cAGG,iBAAY;cACZ;;;;;;;;;kBAOO;;;;;;;YAON,IAAI;iBACC;;;;;;;;;;YAOL,IAAI;iBACC;;;;;;;;;;4CAjCe;;;;;QA2CvBA;;;;;;;;;;;;;;;;;mBAaU;;;;;;;;;;;;;gBAYI;;;;;;;;;;;"}

package/lib/components/dropdown/src/dropdown.js

@@ -6,7 +6,7 @@ var aria = require('../../../utils/aria.js');
 var props = require('../../../utils/props.js');
 require('../../collection/index.js');
 require('../../tooltip/index.js');
-var tooltip = require('../../tooltip/src/tooltip.js');
+var tooltip = require('../../tooltip/src/tooltip2.js');
 var collection = require('../../collection/src/collection.js');
 
 const dropdownProps = {

package/lib/components/dropdown/src/dropdown.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElButton","ElScrollbar","ElDropdownCollection","ElTooltip","ElRovingFocusGroup","ElIcon","ArrowDown","dropdownProps","ref","computed","addUnit","useSize","toRef"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6FA,mBAAmB,EAAE,aAAa,EAAE,GAAGA,cAAQ,CAAC;;AAEhD,EAAE,MAAM,YAAY;;AAEpB,cAAIA,cAAQ;;AAEZ,IAAI,aAAa;iBACbC,mBAAW;0BACXC;eACAC;wBACAC;YACAC,cAAM;eACNC,kBAAS;;OAEN,EAAEC;OACF,EAAE,CAAC;OACH,CAAC;IACJ,MAAM;;IAEN,MAAM;IACN,MAAM,SAAS,GAAGC,OAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAGA;IACnB,MAAM,OAAO,GAAGA,OAAG,CAAC,KAAK,CAAC,CAAC;;IAE3B,MAAM,YAAY,GAAGA,OAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,eAAe,GAAGA,QAAI;IAC5B,MAAM,YAAYC,YAAQ,CAAC,OAAO;MAChC,SAAS,EAAEC,YAAO,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC,CAAC,CAAC;IACJ,MAAM,kBAAkB;MACtB,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,aAAa,EAAE;KACvC,CAAC,CAAC;;MAED,IAAI,EAAE,CAAC;MACP,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG;KAClC;IACD,MAAM,YAAY,GAAGC,eAAO,EAAE,CAAC;aACtB,eAAe,GAAG,IAAI,EAAE;;;IAGjC,SAAS,WAAW,GAAG;;IAEvB;;MAEE,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC;;KAE3B;aACQ;;;IAGT,SAAS;MACP,IAAI,CAAC;;;OAGJ;;;MAGD,UAAU;MACV,eAAe;;;KAGhB,CAAC,CAAC;eACI,CAAC;;;MAGN,OAAO;MACP,WAAW;oBACG;aACP,EAAEC,SAAK,CAAC,KAAK,EAAE;MACtB;;;MAGA,IAAI,EAAE,EAAE,EAAE,CAAC;MACX,CAAC,CAAC;MACF,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG;QACV;OACD,CAAC,CAAC;KACJ;;MAEC,IAAI,CAAC,OAAO,EAAE,MAAM;MACpB;WACK;MACL,OAAO;MACP,SAAS;MACT,SAAS;MACT,kBAAkB;MAClB;;;MAGA,sBAAsB;MACtB,gBAAgB;MAChB,cAAc;eACL;MACT;;;;;;;;"}
+{"version":3,"file":"dropdown.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      persistent\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["ElButton","ElScrollbar","ElDropdownCollection","ElTooltip","ElRovingFocusGroup","ElIcon","ArrowDown","dropdownProps","ref","computed","addUnit","useSize","toRef"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8FA,mBAAmB,EAAE,aAAa,EAAE,GAAGA,cAAQ,CAAC;;AAEhD,EAAE,MAAM,YAAY;;AAEpB,cAAIA,cAAQ;;AAEZ,IAAI,aAAa;iBACbC,mBAAW;0BACXC;eACAC;wBACAC;YACAC,cAAM;eACNC,kBAAS;;OAEN,EAAEC;OACF,EAAE,CAAC;OACH,CAAC;IACJ,MAAM;;IAEN,MAAM;IACN,MAAM,SAAS,GAAGC,OAAG,CAAC,IAAI,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAGA;IACnB,MAAM,OAAO,GAAGA,OAAG,CAAC,KAAK,CAAC,CAAC;;IAE3B,MAAM,YAAY,GAAGA,OAAG,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,eAAe,GAAGA,QAAI;IAC5B,MAAM,YAAYC,YAAQ,CAAC,OAAO;MAChC,SAAS,EAAEC,YAAO,CAAC,KAAK,CAAC,UAAU;KACpC,CAAC,CAAC,CAAC;IACJ,MAAM,kBAAkB;MACtB,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,aAAa,EAAE;KACvC,CAAC,CAAC;;MAED,IAAI,EAAE,CAAC;MACP,CAAC,EAAE,GAAG,SAAS,CAAC,KAAK,KAAK,IAAI,GAAG;KAClC;IACD,MAAM,YAAY,GAAGC,eAAO,EAAE,CAAC;aACtB,eAAe,GAAG,IAAI,EAAE;;;IAGjC,SAAS,WAAW,GAAG;;IAEvB;;MAEE,SAAS,IAAI,IAAI,GAAG,KAAK,CAAC;;KAE3B;aACQ;;;IAGT,SAAS;MACP,IAAI,CAAC;;;OAGJ;;;MAGD,UAAU;MACV,eAAe;;;KAGhB,CAAC,CAAC;eACI,CAAC;;;MAGN,OAAO;MACP,WAAW;oBACG;aACP,EAAEC,SAAK,CAAC,KAAK,EAAE;MACtB;;;MAGA,IAAI,EAAE,EAAE,EAAE,CAAC;MACX,CAAC,CAAC;MACF,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG;QACV;OACD,CAAC,CAAC;KACJ;;MAEC,IAAI,CAAC,OAAO,EAAE,MAAM;MACpB;WACK;MACL,OAAO;MACP,SAAS;MACT,SAAS;MACT,kBAAkB;MAClB;;;MAGA,sBAAsB;MACtB,gBAAgB;MAChB,cAAc;eACL;MACT;;;;;;;;"}

package/lib/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.js

@@ -35,6 +35,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "append-to-body": "",
       pure: "",
       transition: "el-zoom-in-top",
+      persistent: "",
       onShow: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("visible-change", true)),
       onHide: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("visible-change", false))
     }, vue.createSlots({

package/lib/components/dropdown/src/dropdown.vue_vue_type_template_id_3ed790a5_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAGM;MACC;MACA;MACA;MACA;MACA;MACA;MACA,cAAY;MACZ,mBAAiB;MACjB;MACA;MACA,2BAAyB;MACzB;MACA;MACD;MACA,MAAA;MACA;;MAEC;;aAEiB;;UAEd,GAAG,EAAC;UACH,YAAU,EAAE;;UAEb;;;;;cAEwB;;;;kBAEnB;kBACA;kBACD;;kBAEC;;;;;;;;;;;;;;;;;;;;;QASQ;;;;;;;gBAEb;;;;;;qBAIqB;;;;iBAGlB,EAACA;wCACe;;cAElB;;;;;;;;iBAKE,EAACA;;cAEH;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dropdown.vue_vue_type_template_id_3ed790a5_lang.js","sources":["../../../../../../packages/components/dropdown/src/dropdown.vue?vue&type=template&id=3ed790a5&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-dropdown\">\n    <el-tooltip\n      ref=\"popperRef\"\n      :effect=\"effect\"\n      :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n      :gpu-acceleration=\"false\"\n      :hide-after=\"hideTimeout\"\n      :manual-mode=\"true\"\n      :placement=\"placement\"\n      :popper-class=\"`el-dropdown__popper ${popperClass}`\"\n      :reference-element=\"referenceElementRef?.$el\"\n      :trigger=\"trigger\"\n      :show-after=\"showTimeout\"\n      :stop-popper-mouse-event=\"false\"\n      :virtual-ref=\"triggeringElementRef\"\n      :virtual-triggering=\"splitButton\"\n      append-to-body\n      pure\n      transition=\"el-zoom-in-top\"\n      persistent\n      @show=\"$emit('visible-change', true)\"\n      @hide=\"$emit('visible-change', false)\"\n    >\n      <template #content>\n        <el-scrollbar\n          ref=\"scrollbar\"\n          :wrap-style=\"wrapStyle\"\n          tag=\"ul\"\n          view-class=\"el-dropdown__list\"\n        >\n          <el-focus-trap trapped @mount-on-focus=\"onMountOnFocus\">\n            <el-roving-focus-group\n              :loop=\"loop\"\n              :current-tab-id=\"currentTabId\"\n              orientation=\"horizontal\"\n              @current-tab-id-change=\"handleCurrentTabIdChange\"\n              @entry-focus=\"handleEntryFocus\"\n            >\n              <el-dropdown-collection>\n                <slot name=\"dropdown\"></slot>\n              </el-dropdown-collection>\n            </el-roving-focus-group>\n          </el-focus-trap>\n        </el-scrollbar>\n      </template>\n      <template v-if=\"!splitButton\" #default>\n        <div :class=\"dropdownTriggerKls\">\n          <slot name=\"default\" />\n        </div>\n      </template>\n    </el-tooltip>\n    <template v-if=\"splitButton\">\n      <el-button-group>\n        <el-button\n          ref=\"referenceElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          @click=\"handlerMainButtonClick\"\n        >\n          <slot name=\"default\" />\n        </el-button>\n        <el-button\n          ref=\"triggeringElementRef\"\n          :size=\"dropdownSize\"\n          :type=\"type\"\n          class=\"el-dropdown__caret-button\"\n        >\n          <el-icon class=\"el-dropdown__icon\"><arrow-down /></el-icon>\n        </el-button>\n      </el-button-group>\n    </template>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  getCurrentInstance,\n  provide,\n  ref,\n  toRef,\n  unref,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport ElScrollbar from '@element-plus/components/scrollbar'\nimport ElIcon from '@element-plus/components/icon'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElRovingFocusGroup from '@element-plus/components/roving-focus-group'\nimport { addUnit } from '@element-plus/utils/util'\nimport { ArrowDown } from '@element-plus/icons-vue'\nimport { useSize } from '@element-plus/hooks'\nimport { ElCollection as ElDropdownCollection, dropdownProps } from './dropdown'\nimport { DROPDOWN_INJECTION_KEY } from './tokens'\n\nimport type { CSSProperties } from 'vue'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\n\nexport default defineComponent({\n  name: 'ElDropdown',\n  components: {\n    ElButton,\n    ElFocusTrap,\n    ElButtonGroup,\n    ElScrollbar,\n    ElDropdownCollection,\n    ElTooltip,\n    ElRovingFocusGroup,\n    ElIcon,\n    ArrowDown,\n  },\n  props: dropdownProps,\n  emits: ['visible-change', 'click', 'command'],\n  setup(props, { emit }) {\n    const _instance = getCurrentInstance()\n\n    const triggeringElementRef = ref()\n    const referenceElementRef = ref()\n    const popperRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const contentRef = ref<HTMLElement | null>(null)\n    const visible = ref(false)\n    const scrollbar = ref(null)\n    const currentTabId = ref<string | null>(null)\n    const isUsingKeyboard = ref(false)\n\n    const wrapStyle = computed<CSSProperties>(() => ({\n      maxHeight: addUnit(props.maxHeight),\n    }))\n    const dropdownTriggerKls = computed(() => [\n      [dropdownSize.value ? `el-dropdown--${dropdownSize.value}` : ''],\n    ])\n\n    function handleClick() {\n      popperRef.value?.onClose()\n    }\n\n    const dropdownSize = useSize()\n\n    function commandHandler(...args: any[]) {\n      emit('command', ...args)\n    }\n\n    function onItemEnter() {\n      // NOOP for now\n    }\n\n    function onItemLeave() {\n      const contentEl = unref(contentRef)\n\n      contentEl?.focus()\n      currentTabId.value = null\n    }\n\n    function handleCurrentTabIdChange(id: string) {\n      currentTabId.value = id\n    }\n\n    function handleEntryFocus(e: Event) {\n      if (!isUsingKeyboard.value) {\n        e.preventDefault()\n        e.stopImmediatePropagation()\n      }\n    }\n\n    provide(DROPDOWN_INJECTION_KEY, {\n      contentRef,\n      isUsingKeyboard,\n      onItemEnter,\n      onItemLeave,\n    })\n\n    provide('elDropdown', {\n      instance: _instance,\n      dropdownSize,\n      visible,\n      handleClick,\n      commandHandler,\n      trigger: toRef(props, 'trigger'),\n      hideOnClick: toRef(props, 'hideOnClick'),\n    })\n\n    const onMountOnFocus = (e: Event) => {\n      e.preventDefault()\n      contentRef.value?.focus?.({\n        preventScroll: true,\n      })\n    }\n\n    const handlerMainButtonClick = (event: MouseEvent) => {\n      emit('click', event)\n    }\n\n    return {\n      visible,\n      scrollbar,\n      wrapStyle,\n      dropdownTriggerKls,\n      dropdownSize,\n      currentTabId,\n      handleCurrentTabIdChange,\n      handlerMainButtonClick,\n      handleEntryFocus,\n      onMountOnFocus,\n      popperRef,\n      triggeringElementRef,\n      referenceElementRef,\n    }\n  },\n})\n</script>\n"],"names":["_withCtx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;MAGM;MACC;MACA;MACA;MACA;MACA;MACA;MACA,cAAY;MACZ,mBAAiB;MACjB;MACA;MACA,2BAAyB;MACzB;MACA;MACD;MACA;MACA;MACA;;MAEC;;aAEiB;;UAEd,GAAG,EAAC;UACH,YAAU,EAAE;;UAEb;;;;;cAEwB;;;;kBAEnB;kBACA;kBACD;;kBAEC;;;;;;;;;;;;;;;;;;;;;QASQ;;;;;;;gBAEb;;;;;;qBAIqB;;;;iBAGlB,EAACA;wCACe;;cAElB;;;;;;;;iBAKE,EAACA;;cAEH;;;;;;;;;;;;;;;;"}

package/lib/components/index.js

@@ -75,10 +75,10 @@ var index$14 = require('./message-box/index.js');
 var index$15 = require('./notification/index.js');
 var index$16 = require('./popover/index.js');
 var affix = require('./affix/src/affix.js');
-var alert = require('./alert/src/alert.js');
+var alert = require('./alert/src/alert2.js');
 var avatar = require('./avatar/src/avatar.js');
 var backtop = require('./backtop/src/backtop.js');
-var badge = require('./badge/src/badge.js');
+var badge = require('./badge/src/badge2.js');
 var breadcrumb = require('./breadcrumb/src/breadcrumb.js');
 var breadcrumbItem = require('./breadcrumb/src/breadcrumb-item.js');
 var button = require('./button/src/button.js');
@@ -117,14 +117,14 @@ var radio = require('./radio/src/radio.js');
 var radioGroup = require('./radio/src/radio-group.js');
 var radioButton = require('./radio/src/radio-button.js');
 var rate = require('./rate/src/rate.js');
-var result = require('./result/src/result.js');
+var result = require('./result/src/result2.js');
 var row = require('./row/src/row.js');
 var util = require('./scrollbar/src/util.js');
 var scrollbar = require('./scrollbar/src/scrollbar.js');
 var bar = require('./scrollbar/src/bar.js');
 var token = require('./select/src/token.js');
 var token$1 = require('./select-v2/src/token.js');
-var skeleton = require('./skeleton/src/skeleton.js');
+var skeleton = require('./skeleton/src/skeleton2.js');
 var skeletonItem = require('./skeleton/src/skeleton-item.js');
 var space = require('./space/src/space.js');
 var useSpace = require('./space/src/use-space.js');
@@ -139,7 +139,7 @@ var constant = require('./time-picker/src/common/constant.js');
 var props = require('./time-picker/src/common/props.js');
 var picker_vue_vue_type_script_lang = require('./time-picker/src/common/picker.vue_vue_type_script_lang.js');
 var panelTimePick_vue_vue_type_script_lang = require('./time-picker/src/time-picker-com/panel-time-pick.vue_vue_type_script_lang.js');
-var tooltip = require('./tooltip/src/tooltip.js');
+var tooltip = require('./tooltip/src/tooltip2.js');
 var constants = require('../utils/constants.js');
 var fixedSizeList = require('./virtual-list/src/components/fixed-size-list.js');
 var dynamicSizeList = require('./virtual-list/src/components/dynamic-size-list.js');