@element-plus/nightly 0.0.20220122 → 0.0.20220123

package/es/components/autocomplete/src/index.mjs

@@ -13,6 +13,7 @@ import { ElIcon } from '../../icon/index.mjs';
 import { Loading } from '@element-plus/icons-vue';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import ClickOutside from '../../../directives/click-outside/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 import { useAttrs } from '../../../hooks/use-attrs/index.mjs';
 
 const _sfc_main = defineComponent({
@@ -94,6 +95,7 @@ const _sfc_main = defineComponent({
     "select"
   ],
   setup(props, ctx) {
+    const ns = useNamespace("autocomplete");
     const attrs = useAttrs();
     const suggestions = ref([]);
     const highlightedIndex = ref(-1);
@@ -105,7 +107,7 @@ const _sfc_main = defineComponent({
     const regionRef = ref(null);
     const popper = ref(null);
     const id = computed(() => {
-      return `el-autocomplete-${generateId()}`;
+      return ns.b(String(generateId()));
     });
     const suggestionVisible = computed(() => {
       const isValidData = isArray(suggestions.value) && suggestions.value.length > 0;
@@ -212,8 +214,8 @@ const _sfc_main = defineComponent({
       if (index >= suggestions.value.length) {
         index = suggestions.value.length - 1;
       }
-      const suggestion = regionRef.value.querySelector(".el-autocomplete-suggestion__wrap");
-      const suggestionList = suggestion.querySelectorAll(".el-autocomplete-suggestion__list li");
+      const suggestion = regionRef.value.querySelector(`.${ns.be("suggestion", "wrap")}`);
+      const suggestionList = suggestion.querySelectorAll(`.${ns.be("suggestion", "list")} li`);
       const highlightItem = suggestionList[index];
       const scrollTop = suggestion.scrollTop;
       const { offsetTop, scrollHeight } = highlightItem;
@@ -251,7 +253,8 @@ const _sfc_main = defineComponent({
       focus,
       select,
       highlight,
-      onSuggestionShow
+      onSuggestionShow,
+      ns
     };
   }
 });
@@ -271,32 +274,29 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => _ctx.suggestionVisible = $event),
     placement: _ctx.placement,
     "fallback-placements": ["bottom-start", "top-start"],
-    "popper-class": `el-autocomplete__popper ${_ctx.popperClass}`,
+    "popper-class": `${_ctx.ns.e("popper")} ${_ctx.popperClass}`,
     "append-to-body": _ctx.popperAppendToBody,
     "gpu-acceleration": false,
     pure: "",
     "manual-mode": "",
     effect: "light",
     trigger: "click",
-    transition: "el-zoom-in-top",
+    transition: `${_ctx.ns.namespace.value}-zoom-in-top`,
     persistent: "",
     onShow: _ctx.onSuggestionShow
   }, {
     content: withCtx(() => [
       createElementVNode("div", {
         ref: "regionRef",
-        class: normalizeClass([
-          "el-autocomplete-suggestion",
-          _ctx.suggestionLoading && "is-loading"
-        ]),
+        class: normalizeClass([_ctx.ns.b("suggestion"), _ctx.ns.is("loading", _ctx.suggestionLoading)]),
         style: normalizeStyle({ minWidth: _ctx.dropdownWidth, outline: "none" }),
         role: "region"
       }, [
         createVNode(_component_el_scrollbar, {
           id: _ctx.id,
           tag: "ul",
-          "wrap-class": "el-autocomplete-suggestion__wrap",
-          "view-class": "el-autocomplete-suggestion__list",
+          "wrap-class": _ctx.ns.be("suggestion", "wrap"),
+          "view-class": _ctx.ns.be("suggestion", "list"),
           role: "listbox"
         }, {
           default: withCtx(() => [
@@ -323,12 +323,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }), 128))
           ]),
           _: 3
-        }, 8, ["id"])
+        }, 8, ["id", "wrap-class", "view-class"])
       ], 6)
     ]),
     default: withCtx(() => [
       withDirectives((openBlock(), createElementBlock("div", {
-        class: normalizeClass(["el-autocomplete", _ctx.$attrs.class]),
+        class: normalizeClass([_ctx.ns.b(), _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
         role: "combobox",
         "aria-haspopup": "listbox",
@@ -379,7 +379,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     _: 3
-  }, 8, ["visible", "placement", "popper-class", "append-to-body", "onShow"]);
+  }, 8, ["visible", "placement", "popper-class", "append-to-body", "transition", "onShow"]);
 }
 var Autocomplete = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/es/components/autocomplete/src/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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":["_openBlock","_createBlock","_withCtx","_normalizeStyle","_createElementBlock","_Fragment","_normalizeClass","_mergeProps","_withModifiers","_createSlots"],"mappings":"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"}
+{"version":3,"file":"index.mjs","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=\"`${ns.e('popper')} ${popperClass}`\"\n    :append-to-body=\"popperAppendToBody\"\n    :gpu-acceleration=\"false\"\n    pure\n    manual-mode\n    effect=\"light\"\n    trigger=\"click\"\n    :transition=\"`${ns.namespace.value}-zoom-in-top`\"\n    persistent\n    @show=\"onSuggestionShow\"\n  >\n    <div\n      v-clickoutside=\"close\"\n      :class=\"[ns.b(), $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=\"[ns.b('suggestion'), ns.is('loading', suggestionLoading)]\"\n        :style=\"{ minWidth: dropdownWidth, outline: 'none' }\"\n        role=\"region\"\n      >\n        <el-scrollbar\n          :id=\"id\"\n          tag=\"ul\"\n          :wrap-class=\"ns.be('suggestion', 'wrap')\"\n          :view-class=\"ns.be('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, useNamespace } 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 ns = useNamespace('autocomplete')\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 ns.b(String(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        `.${ns.be('suggestion', 'wrap')}`\n      )!\n      const suggestionList = suggestion.querySelectorAll(\n        `.${ns.be('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      ns,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_withCtx","_normalizeClass","_normalizeStyle","_createElementBlock","_Fragment","_mergeProps","_withModifiers","_createSlots"],"mappings":";;;;;;;;;;;;;;;;;;AA4GA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,YAAY;AAAA,IACV,cAAc;AAAA;AAAA,EAEhB,cAAc;AAAA,EACd,OAAO;AAAA,IACL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS;AAAA;AAAA,IAEX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,WAAW,CAAC,QAAyB;AACnC,eAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA;AAAA,MAEb,SAAS;AAAA;AAAA,IAEX,kBAAkB;AAAA,MAChB,MAAM;AAAA,MAGN,SAAS;AAAA;AAAA,IAEX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAEF,MAAM,OAAO,KAAK;AAChB,UAAM,KAAK,aAAa;AACxB,UAAM,QAAQ;AACd,UAAM,cAAc,IAAW;AAC/B,UAAM,mBAAmB,IAAI;AAC7B,UAAM,gBAAgB,IAAI;AAC1B,UAAM,YAAY,IAAI;AACtB,UAAM,qBAAqB,IAAI;AAC/B,UAAM,UAAU,IAAI;AACpB,UAAM,WAAW,IAIP;AACV,UAAM,YAAY,IAAwB;AAC1C,UAAM,SAAS,IAAI;AAEnB,UAAM,KAAK,SAAS,MAAM;AACxB,aAAO,GAAG,EAAE,OAAO;AAAA;AAErB,UAAM,oBAAoB,SAAS,MAAM;AACvC,YAAM,cACJ,QAAQ,YAAY,UAAU,YAAY,MAAM,SAAS;AAC3D,aAAQ,gBAAe,QAAQ,UAAU,UAAU;AAAA;AAErD,UAAM,oBAAoB,SAAS,MAAM;AACvC,aAAO,CAAC,MAAM,eAAe,QAAQ;AAAA;AAGvC,UAAM,mBAAmB,MAAM;AAC7B,eAAS,MAAM;AACb,YAAI,kBAAkB,OAAO;AAC3B,wBAAc,QAAQ,GAAG,SAAS,MAAO,IAAI;AAAA;AAAA;AAAA;AAKnD,cAAU,MAAM;AACd,eAAS,MAAO,gBAAgB,aAAa,QAAQ;AACrD,eAAS,MAAO,gBAAgB,aAAa,qBAAqB;AAClE,eAAS,MAAO,gBAAgB,aAAa,iBAAiB;AAC9D,eAAS,MAAO,gBAAgB,aAC9B,yBACA,GAAG,GAAG,cAAc,iBAAiB;AAAA;AAIzC,UAAM,UAAU,CAAC,gBAAwB;AACvC,UAAI,mBAAmB,OAAO;AAC5B;AAAA;AAEF,cAAQ,QAAQ;AAChB,YAAM,iBAAiB,aAAa,CAAC,mBAAmB;AACtD,gBAAQ,QAAQ;AAChB,YAAI,mBAAmB,OAAO;AAC5B;AAAA;AAEF,YAAI,QAAQ,iBAAiB;AAC3B,sBAAY,QAAQ;AACpB,2BAAiB,QAAQ,MAAM,qBAAqB,IAAI;AAAA,eACnD;AACL,qBACE,kBACA;AAAA;AAAA;AAAA;AAKR,UAAM,mBAAmB,SAAS,SAAS,MAAM;AACjD,UAAM,cAAc,CAAC,UAAkB;AACrC,UAAI,KAAK,SAAS;AAClB,UAAI,KAAK,oBAAoB;AAC7B,yBAAmB,QAAQ;AAC3B,UAAI,CAAC,MAAM,kBAAkB,CAAC,OAAO;AACnC,2BAAmB,QAAQ;AAC3B,oBAAY,QAAQ;AACpB;AAAA;AAEF,uBAAiB;AAAA;AAEnB,UAAM,eAAe,CAAC,UAAU;AAC9B,UAAI,KAAK,UAAU;AAAA;AAErB,UAAM,cAAc,CAAC,MAAM;AACzB,gBAAU,QAAQ;AAClB,UAAI,KAAK,SAAS;AAClB,UAAI,MAAM,gBAAgB;AACxB,yBAAiB,OAAO,MAAM;AAAA;AAAA;AAGlC,UAAM,aAAa,CAAC,MAAM;AACxB,UAAI,KAAK,QAAQ;AAAA;AAEnB,UAAM,cAAc,MAAM;AACxB,gBAAU,QAAQ;AAClB,UAAI,KAAK,oBAAoB;AAC7B,UAAI,KAAK;AAAA;AAEX,UAAM,iBAAiB,MAAM;AAC3B,UACE,kBAAkB,SAClB,iBAAiB,SAAS,KAC1B,iBAAiB,QAAQ,YAAY,MAAM,QAC3C;AACA,eAAO,YAAY,MAAM,iBAAiB;AAAA,iBACjC,MAAM,qBAAqB;AACpC,YAAI,KAAK,UAAU,EAAE,OAAO,MAAM;AAClC,iBAAS,MAAM;AACb,sBAAY,QAAQ;AACpB,2BAAiB,QAAQ;AAAA;AAAA;AAAA;AAI/B,UAAM,QAAQ,MAAM;AAClB,gBAAU,QAAQ;AAAA;AAEpB,UAAM,QAAQ,MAAM;AAClB,eAAS,OAAO;AAAA;AAElB,UAAM,SAAS,CAAC,SAAS;AACvB,UAAI,KAAK,SAAS,KAAK,MAAM;AAC7B,UAAI,KAAK,oBAAoB,KAAK,MAAM;AACxC,UAAI,KAAK,UAAU;AACnB,eAAS,MAAM;AACb,oBAAY,QAAQ;AACpB,yBAAiB,QAAQ;AAAA;AAAA;AAG7B,UAAM,YAAY,CAAC,UAAkB;AACnC,UAAI,CAAC,kBAAkB,SAAS,QAAQ,OAAO;AAC7C;AAAA;AAEF,UAAI,QAAQ,GAAG;AACb,yBAAiB,QAAQ;AACzB;AAAA;AAEF,UAAI,SAAS,YAAY,MAAM,QAAQ;AACrC,gBAAQ,YAAY,MAAM,SAAS;AAAA;AAErC,YAAM,aAAa,UAAU,MAAO,cAClC,IAAI,GAAG,GAAG,cAAc;AAE1B,YAAM,iBAAiB,WAAW,iBAChC,IAAI,GAAG,GAAG,cAAc;AAE1B,YAAM,gBAAgB,eAAe;AACrC,YAAM,YAAY,WAAW;AAC7B,YAAM,EAAE,WAAW,iBAAiB;AAEpC,UAAI,YAAY,eAAe,YAAY,WAAW,cAAc;AAClE,mBAAW,aAAa;AAAA;AAE1B,UAAI,YAAY,WAAW;AACzB,mBAAW,aAAa;AAAA;AAE1B,uBAAiB,QAAQ;AACzB,eAAS,MAAO,gBAAgB,aAC9B,yBACA,GAAG,GAAG,cAAc,iBAAiB;AAAA;AAIzC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;;;SAxXEA,aAAQC;AAAA,IACJ;AAAA;IACP,oBAAW,OAAS;AAAA,IACpB;AAAA,IACA,uBAAiB,iBAAI;AAAA,IACrB,gBAAc,GAAE,uBAAkB;AAAA,IAClC,kBAAgB,KAAE;AAAA,IACnB,oBAAI;AAAA,IACJ;AAAA,IACA,eAAc;AAAA,IACd,QAAO;AAAA,IACN;AAAA,IACD,eAAU;AAAA,IACT,YAAM;AAAA;KAuCI;AAAA,aACTC,cA8BM;AAAA,yBA7BW;AAAA,QACd,KAAK;AAAA,QACL,OAAKC,yCAAc,KAAa;AAAA,QACjC,OAAKC,eAAQ;AAAA;SAEb;AAAA,oBACS;AAAA,UACP,IAAG,KAAK;AAAA,UACP;AAAA,UACA,cAAY,QAAG,GAAE;AAAA,UAClB,cAAK,KAAS;AAAA;;mBAEJF;AAAA,mDACyCG,yBAAxC,YAAM;AAAA,8CAAwB;AAAA,yBAAXH,QAAW;AAAA;;;;uDAGvCI,UAUK;qBARAN,aAAOK,mBAAc;AAAA,gBACvB,IAAG,GAAE,KAAK;AAAA,gBACV,KAAK;AAAA,gBACN,OAAKF,eAAQ;AAAA,gBACZ;AAAA,gBACA,iBAAK,KAAE,qBAAW;AAAA;iBAEnB;AAAA,mDAAsB,UAAK,MAAQ;AAAA;;;;;;;;;;mCA9DlCE,mBAAe,OAAK;AAAA,QAC5B,OAAKF,eAAE,cAAO,KAAK;AAAA,QACpB,OAAKC,eAAU;AAAA,QACf;AAAA,QACC,iBAAe;AAAA,QACf,iBAAW,KAAE;AAAA;SAEd;AAAA,oBAGG,qBAAuBG;AAAA,UACvB,eAAO;AAAA,UACP,SAAM,KAAE;AAAA,UACR,UAAO;AAAA,UACP,SAAM;AAAA,UACN,QAAK,KAAE;AAAA,UACP,SAAO;AAAA;yEACe,eAAU,wBAAgB;AAAA,+CACnBC;AAAA,qBAChB,qBAAK;AAAA;;YAEHC,YAAO,KAAO;AAAA;;gBAC5BP,cAA4B;AAAA;;cAEd;AAAA;;gBACdA,cAA2B;AAAA;;cAEb;AAAA;;gBACdA,cAA2B;AAAA;;cAEb;AAAA;;gBACdA,cAA2B;AAAA;;;;aAhCf,cAAK;AAAA;;;;;;;;;;"}

package/es/components/autocomplete/src/index.vue.d.ts

@@ -76,6 +76,17 @@ declare const _default: import("vue").DefineComponent<{
     select: (item: any) => void;
     highlight: (index: number) => void;
     onSuggestionShow: () => void;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear")[], "input" | "select" | "update:modelValue" | "change" | "blur" | "focus" | "clear", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     valueKey: {
         type: StringConstructor;

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

@@ -20,6 +20,17 @@ export declare const ElBacktop: import("../../utils/types").SFCWithInstall<impor
     styleBottom: import("vue").ComputedRef<string>;
     styleRight: import("vue").ComputedRef<string>;
     handleClick: (event: MouseEvent) => void;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (evt: MouseEvent) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -20,6 +20,17 @@ declare const _default: import("vue").DefineComponent<{
     styleBottom: import("vue").ComputedRef<string>;
     styleRight: import("vue").ComputedRef<string>;
     handleClick: (event: MouseEvent) => void;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (evt: MouseEvent) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/es/components/backtop/src/backtop2.mjs

@@ -1,11 +1,13 @@
-import { defineComponent, shallowRef, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeStyle, withModifiers, renderSlot, createVNode, createCommentVNode } from 'vue';
+import { defineComponent, shallowRef, ref, computed, onMounted, resolveComponent, openBlock, createBlock, Transition, withCtx, createElementBlock, normalizeStyle, normalizeClass, withModifiers, renderSlot, createVNode, createCommentVNode } from 'vue';
 import { useThrottleFn, useEventListener } from '@vueuse/core';
 import { ElIcon } from '../../icon/index.mjs';
 import { easeInOutCubic } from '../../../utils/animation.mjs';
 import { throwError } from '../../../utils/error.mjs';
 import { CaretTop } from '@element-plus/icons-vue';
+import '../../../hooks/index.mjs';
 import { backtopProps, backtopEmits } from './backtop.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const COMPONENT_NAME = "ElBacktop";
 const _sfc_main = defineComponent({
@@ -17,6 +19,7 @@ const _sfc_main = defineComponent({
   props: backtopProps,
   emits: backtopEmits,
   setup(props, { emit }) {
+    const ns = useNamespace("backtop");
     const el = shallowRef(document.documentElement);
     const container = shallowRef(document);
     const visible = ref(false);
@@ -63,14 +66,17 @@ const _sfc_main = defineComponent({
       visible,
       styleBottom,
       styleRight,
-      handleClick
+      handleClick,
+      ns
     };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_caret_top = resolveComponent("caret-top");
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createBlock(Transition, { name: "el-fade-in" }, {
+  return openBlock(), createBlock(Transition, {
+    name: `${_ctx.ns.namespace.value}-fade-in`
+  }, {
     default: withCtx(() => [
       _ctx.visible ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -78,21 +84,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           right: _ctx.styleRight,
           bottom: _ctx.styleBottom
         }),
-        class: "el-backtop",
+        class: normalizeClass(_ctx.ns.b()),
         onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"]))
       }, [
         renderSlot(_ctx.$slots, "default", {}, () => [
-          createVNode(_component_el_icon, { class: "el-backtop__icon" }, {
+          createVNode(_component_el_icon, {
+            class: normalizeClass(_ctx.ns.e("icon"))
+          }, {
             default: withCtx(() => [
               createVNode(_component_caret_top)
             ]),
             _: 1
-          })
+          }, 8, ["class"])
         ])
-      ], 4)) : createCommentVNode("v-if", true)
+      ], 6)) : createCommentVNode("v-if", true)
     ]),
     _: 3
-  });
+  }, 8, ["name"]);
 }
 var Backtop = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

package/es/components/backtop/src/backtop2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"backtop2.mjs","sources":["../../../../../../packages/components/backtop/src/backtop.vue"],"sourcesContent":["<template>\n  <transition name=\"el-fade-in\">\n    <div\n      v-if=\"visible\"\n      :style=\"{\n        right: styleRight,\n        bottom: styleBottom,\n      }\"\n      class=\"el-backtop\"\n      @click.stop=\"handleClick\"\n    >\n      <slot>\n        <el-icon class=\"el-backtop__icon\"><caret-top /></el-icon>\n      </slot>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, shallowRef } from 'vue'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { easeInOutCubic } from '@element-plus/utils/animation'\nimport { throwError } from '@element-plus/utils/error'\nimport { CaretTop } from '@element-plus/icons-vue'\n\nimport { backtopEmits, backtopProps } from './backtop'\n\nconst COMPONENT_NAME = 'ElBacktop'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElIcon,\n    CaretTop,\n  },\n  props: backtopProps,\n  emits: backtopEmits,\n\n  setup(props, { emit }) {\n    const el = shallowRef<HTMLElement | undefined>(document.documentElement)\n    const container = shallowRef<Document | HTMLElement>(document)\n    const visible = ref(false)\n    const styleBottom = computed(() => `${props.bottom}px`)\n    const styleRight = computed(() => `${props.right}px`)\n\n    const scrollToTop = () => {\n      if (!el.value) return\n      const beginTime = Date.now()\n      const beginValue = el.value.scrollTop\n      const frameFunc = () => {\n        if (!el.value) return\n        const progress = (Date.now() - beginTime) / 500\n        if (progress < 1) {\n          el.value.scrollTop = beginValue * (1 - easeInOutCubic(progress))\n          requestAnimationFrame(frameFunc)\n        } else {\n          el.value.scrollTop = 0\n        }\n      }\n      requestAnimationFrame(frameFunc)\n    }\n    const handleScroll = () => {\n      if (el.value) visible.value = el.value.scrollTop >= props.visibilityHeight\n    }\n    const handleClick = (event: MouseEvent) => {\n      scrollToTop()\n      emit('click', event)\n    }\n\n    const handleScrollThrottled = useThrottleFn(handleScroll, 300)\n\n    onMounted(() => {\n      if (props.target) {\n        el.value =\n          document.querySelector<HTMLElement>(props.target) ?? undefined\n        if (!el.value) {\n          throwError(COMPONENT_NAME, `target is not existed: ${props.target}`)\n        }\n        container.value = el.value\n      }\n\n      useEventListener(container, 'scroll', handleScrollThrottled)\n    })\n\n    return {\n      visible,\n      styleBottom,\n      styleRight,\n      handleClick,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_withCtx","_normalizeStyle"],"mappings":";;;;;;;;;AA4BA,MAAM,iBAAiB;AAEvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,WAAoC,SAAS;AACxD,UAAM,YAAY,WAAmC;AACrD,UAAM,UAAU,IAAI;AACpB,UAAM,cAAc,SAAS,MAAM,GAAG,MAAM;AAC5C,UAAM,aAAa,SAAS,MAAM,GAAG,MAAM;AAE3C,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,GAAG;AAAO;AACf,YAAM,YAAY,KAAK;AACvB,YAAM,aAAa,GAAG,MAAM;AAC5B,YAAM,YAAY,MAAM;AACtB,YAAI,CAAC,GAAG;AAAO;AACf,cAAM,WAAY,MAAK,QAAQ,aAAa;AAC5C,YAAI,WAAW,GAAG;AAChB,aAAG,MAAM,YAAY,kBAAkB,eAAe;AACtD,gCAAsB;AAAA,eACjB;AACL,aAAG,MAAM,YAAY;AAAA;AAAA;AAGzB,4BAAsB;AAAA;AAExB,UAAM,eAAe,MAAM;AACzB,UAAI,GAAG;AAAO,gBAAQ,QAAQ,GAAG,MAAM,aAAa,MAAM;AAAA;AAE5D,UAAM,cAAc,CAAC,UAAsB;AACzC;AACA,WAAK,SAAS;AAAA;AAGhB,UAAM,wBAAwB,cAAc,cAAc;AAE1D,cAAU,MAAM;AACd,UAAI,MAAM,QAAQ;AAChB,WAAG,QACD,SAAS,cAA2B,MAAM,WAAW;AACvD,YAAI,CAAC,GAAG,OAAO;AACb,qBAAW,gBAAgB,0BAA0B,MAAM;AAAA;AAE7D,kBAAU,QAAQ,GAAG;AAAA;AAGvB,uBAAiB,WAAW,UAAU;AAAA;AAGxC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;sBA3EIA;AAAA,aAXEC,QAAO;AAAA;QACZ,KAAK;AAAA,eAAmBC,eAAU;AAAA,sBAAkB;AAAA;;QAKpD,OAAK;AAAA;SAEN;AAAA,mBACE,KAAyD,uBAAhD,MAAM;AAAA,0CAAgC;AAAA,qBAAbD,QAAa;AAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"backtop2.mjs","sources":["../../../../../../packages/components/backtop/src/backtop.vue"],"sourcesContent":["<template>\n  <transition :name=\"`${ns.namespace.value}-fade-in`\">\n    <div\n      v-if=\"visible\"\n      :style=\"{\n        right: styleRight,\n        bottom: styleBottom,\n      }\"\n      :class=\"ns.b()\"\n      @click.stop=\"handleClick\"\n    >\n      <slot>\n        <el-icon :class=\"ns.e('icon')\"><caret-top /></el-icon>\n      </slot>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, onMounted, shallowRef } from 'vue'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { easeInOutCubic } from '@element-plus/utils/animation'\nimport { throwError } from '@element-plus/utils/error'\nimport { CaretTop } from '@element-plus/icons-vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport { backtopEmits, backtopProps } from './backtop'\n\nconst COMPONENT_NAME = 'ElBacktop'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElIcon,\n    CaretTop,\n  },\n  props: backtopProps,\n  emits: backtopEmits,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('backtop')\n    const el = shallowRef<HTMLElement | undefined>(document.documentElement)\n    const container = shallowRef<Document | HTMLElement>(document)\n    const visible = ref(false)\n    const styleBottom = computed(() => `${props.bottom}px`)\n    const styleRight = computed(() => `${props.right}px`)\n\n    const scrollToTop = () => {\n      if (!el.value) return\n      const beginTime = Date.now()\n      const beginValue = el.value.scrollTop\n      const frameFunc = () => {\n        if (!el.value) return\n        const progress = (Date.now() - beginTime) / 500\n        if (progress < 1) {\n          el.value.scrollTop = beginValue * (1 - easeInOutCubic(progress))\n          requestAnimationFrame(frameFunc)\n        } else {\n          el.value.scrollTop = 0\n        }\n      }\n      requestAnimationFrame(frameFunc)\n    }\n    const handleScroll = () => {\n      if (el.value) visible.value = el.value.scrollTop >= props.visibilityHeight\n    }\n    const handleClick = (event: MouseEvent) => {\n      scrollToTop()\n      emit('click', event)\n    }\n\n    const handleScrollThrottled = useThrottleFn(handleScroll, 300)\n\n    onMounted(() => {\n      if (props.target) {\n        el.value =\n          document.querySelector<HTMLElement>(props.target) ?? undefined\n        if (!el.value) {\n          throwError(COMPONENT_NAME, `target is not existed: ${props.target}`)\n        }\n        container.value = el.value\n      }\n\n      useEventListener(container, 'scroll', handleScrollThrottled)\n    })\n\n    return {\n      visible,\n      styleBottom,\n      styleRight,\n      handleClick,\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_withCtx","_normalizeStyle","_normalizeClass"],"mappings":";;;;;;;;;;;AA6BA,MAAM,iBAAiB;AAEvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,aAAa;AACxB,UAAM,KAAK,WAAoC,SAAS;AACxD,UAAM,YAAY,WAAmC;AACrD,UAAM,UAAU,IAAI;AACpB,UAAM,cAAc,SAAS,MAAM,GAAG,MAAM;AAC5C,UAAM,aAAa,SAAS,MAAM,GAAG,MAAM;AAE3C,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,GAAG;AAAO;AACf,YAAM,YAAY,KAAK;AACvB,YAAM,aAAa,GAAG,MAAM;AAC5B,YAAM,YAAY,MAAM;AACtB,YAAI,CAAC,GAAG;AAAO;AACf,cAAM,WAAY,MAAK,QAAQ,aAAa;AAC5C,YAAI,WAAW,GAAG;AAChB,aAAG,MAAM,YAAY,kBAAkB,eAAe;AACtD,gCAAsB;AAAA,eACjB;AACL,aAAG,MAAM,YAAY;AAAA;AAAA;AAGzB,4BAAsB;AAAA;AAExB,UAAM,eAAe,MAAM;AACzB,UAAI,GAAG;AAAO,gBAAQ,QAAQ,GAAG,MAAM,aAAa,MAAM;AAAA;AAE5D,UAAM,cAAc,CAAC,UAAsB;AACzC;AACA,WAAK,SAAS;AAAA;AAGhB,UAAM,wBAAwB,cAAc,cAAc;AAE1D,cAAU,MAAM;AACd,UAAI,MAAM,QAAQ;AAChB,WAAG,QACD,SAAS,cAA2B,MAAM,WAAW;AACvD,YAAI,CAAC,GAAG,OAAO;AACb,qBAAW,gBAAgB,0BAA0B,MAAM;AAAA;AAE7D,kBAAU,QAAQ,GAAG;AAAA;AAGvB,uBAAiB,WAAW,UAAU;AAAA;AAGxC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;SA3FaA,aAAQC,YAAeC;AAAA;;aAE9BC,QAAO;AAAA;QACZ,KAAK;AAAA,eAAmBC,eAAU;AAAA,sBAAkB;AAAA;;QAKpD,OAAKC;AAAA;SAEN;AAAA,mBACE,KAAsD;AAAA,sBAAvC,oBAAK;AAAA;;qBAAWF,QAAa;AAAA;;;;;;;;;;;;;;"}

package/es/components/index.mjs

@@ -103,7 +103,7 @@ export { subMenuProps } from './menu/src/sub-menu.mjs';
 export { overlayEmits, overlayProps } from './overlay/src/overlay.mjs';
 export { pageHeaderEmits, pageHeaderProps } from './page-header/src/page-header.mjs';
 export { paginationEmits, paginationProps } from './pagination/src/pagination.mjs';
-export { popconfirmProps } from './popconfirm/src/popconfirm.mjs';
+export { popconfirmProps } from './popconfirm/src/popconfirm2.mjs';
 export { default as ElPopperArrow } from './popper/src/arrow.mjs';
 export { default as ElPopperTrigger } from './popper/src/trigger.mjs';
 export { default as ElPopperContent } from './popper/src/content.mjs';

package/es/components/popconfirm/index.mjs

@@ -1,6 +1,6 @@
 import { withInstall } from '../../utils/with-install.mjs';
-import Popconfirm from './src/popconfirm2.mjs';
-export { popconfirmProps } from './src/popconfirm.mjs';
+import Popconfirm from './src/popconfirm.mjs';
+export { popconfirmProps } from './src/popconfirm2.mjs';
 
 const ElPopconfirm = withInstall(Popconfirm);
 

package/es/components/popconfirm/src/popconfirm.mjs

@@ -1,51 +1,110 @@
-import '../../button/index.mjs';
-import { QuestionFilled } from '@element-plus/icons-vue';
-import { buildProps, definePropType } from '../../../utils/props.mjs';
-import { buttonType } from '../../button/src/button.mjs';
+import { defineComponent, ref, unref, computed, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeStyle, resolveDynamicComponent, createCommentVNode, createTextVNode, toDisplayString, createVNode, renderSlot } from 'vue';
+import { ElButton } from '../../button/index.mjs';
+import { ElIcon } from '../../icon/index.mjs';
+import { ElTooltip } from '../../tooltip/index.mjs';
+import '../../../hooks/index.mjs';
+import { popconfirmProps } from './popconfirm2.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
 
-const popconfirmProps = buildProps({
-  title: {
-    type: String
+const _sfc_main = defineComponent({
+  name: "ElPopconfirm",
+  components: {
+    ElButton,
+    ElTooltip,
+    ElIcon
   },
-  confirmButtonText: {
-    type: String
-  },
-  cancelButtonText: {
-    type: String
-  },
-  confirmButtonType: {
-    type: String,
-    values: buttonType,
-    default: "primary"
-  },
-  cancelButtonType: {
-    type: String,
-    values: buttonType,
-    default: "text"
-  },
-  icon: {
-    type: definePropType([String, Object]),
-    default: QuestionFilled
-  },
-  iconColor: {
-    type: String,
-    default: "#f90"
-  },
-  hideIcon: {
-    type: Boolean,
-    default: false
-  },
-  hideAfter: {
-    type: Number,
-    default: 200
-  },
-  onConfirm: {
-    type: definePropType(Function)
-  },
-  onCancel: {
-    type: definePropType(Function)
+  props: popconfirmProps,
+  setup(props) {
+    const { t } = useLocale();
+    const tooltipRef = ref();
+    const hidePopper = () => {
+      unref(tooltipRef)?.onClose?.();
+    };
+    const handleCallback = () => {
+      hidePopper();
+    };
+    const confirm = (e) => {
+      props.onConfirm?.(e);
+      handleCallback();
+    };
+    const cancel = (e) => {
+      props.onCancel?.(e);
+      handleCallback();
+    };
+    const finalConfirmButtonText = computed(() => props.confirmButtonText || t("el.popconfirm.confirmButtonText"));
+    const finalCancelButtonText = computed(() => props.cancelButtonText || t("el.popconfirm.cancelButtonText"));
+    return {
+      finalConfirmButtonText,
+      finalCancelButtonText,
+      tooltipRef,
+      confirm,
+      cancel
+    };
   }
 });
+const _hoisted_1 = { class: "el-popconfirm" };
+const _hoisted_2 = { class: "el-popconfirm__main" };
+const _hoisted_3 = { class: "el-popconfirm__action" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_el_button = resolveComponent("el-button");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
+  return openBlock(), createBlock(_component_el_tooltip, mergeProps({ ref: "tooltipRef" }, _ctx.$attrs, {
+    trigger: "click",
+    effect: "light",
+    "popper-class": "el-popover",
+    "append-to-body": "",
+    "fallback-placements": ["bottom", "top", "right", "left"],
+    "hide-after": _ctx.hideAfter,
+    persistent: ""
+  }), {
+    content: withCtx(() => [
+      createElementVNode("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          !_ctx.hideIcon && _ctx.icon ? (openBlock(), createBlock(_component_el_icon, {
+            key: 0,
+            class: "el-popconfirm__icon",
+            style: normalizeStyle({ color: _ctx.iconColor })
+          }, {
+            default: withCtx(() => [
+              (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
+            ]),
+            _: 1
+          }, 8, ["style"])) : createCommentVNode("v-if", true),
+          createTextVNode(" " + toDisplayString(_ctx.title), 1)
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(_component_el_button, {
+            size: "small",
+            type: _ctx.cancelButtonType,
+            onClick: _ctx.cancel
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.finalCancelButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["type", "onClick"]),
+          createVNode(_component_el_button, {
+            size: "small",
+            type: _ctx.confirmButtonType,
+            onClick: _ctx.confirm
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(_ctx.finalConfirmButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["type", "onClick"])
+        ])
+      ])
+    ]),
+    default: withCtx(() => [
+      _ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : createCommentVNode("v-if", true)
+    ]),
+    _: 3
+  }, 16, ["hide-after"]);
+}
+var Popconfirm = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-export { popconfirmProps };
+export { Popconfirm as default };
 //# sourceMappingURL=popconfirm.mjs.map

package/es/components/popconfirm/src/popconfirm.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popconfirm.mjs","sources":["../../../../../../packages/components/popconfirm/src/popconfirm.ts"],"sourcesContent":["import { buttonType } from '@element-plus/components/button'\nimport { QuestionFilled } from '@element-plus/icons-vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\n\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const popconfirmProps = buildProps({\n  title: {\n    type: String,\n  },\n  confirmButtonText: {\n    type: String,\n  },\n  cancelButtonText: {\n    type: String,\n  },\n  confirmButtonType: {\n    type: String,\n    values: buttonType,\n    default: 'primary',\n  },\n  cancelButtonType: {\n    type: String,\n    values: buttonType,\n    default: 'text',\n  },\n  icon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: QuestionFilled as any,\n  },\n  iconColor: {\n    type: String,\n    default: '#f90',\n  },\n  hideIcon: {\n    type: Boolean,\n    default: false,\n  },\n  hideAfter: {\n    type: Number,\n    default: 200,\n  },\n  onConfirm: {\n    type: definePropType<(e: Event) => Promise<boolean> | boolean>(Function),\n  },\n  onCancel: {\n    type: definePropType<(e: Event) => Promise<boolean> | boolean>(Function),\n  },\n} as const)\nexport type PopconfirmProps = ExtractPropTypes<typeof popconfirmProps>\n"],"names":[],"mappings":";;;;;AAGY,MAAC,eAAe,GAAG,UAAU,CAAC;AAC1C,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,UAAU;AACtB,IAAI,OAAO,EAAE,SAAS;AACtB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,UAAU;AACtB,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,cAAc;AAC3B,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"popconfirm.mjs","sources":["../../../../../../packages/components/popconfirm/src/popconfirm.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    v-bind=\"$attrs\"\n    trigger=\"click\"\n    effect=\"light\"\n    popper-class=\"el-popover\"\n    append-to-body\n    :fallback-placements=\"['bottom', 'top', 'right', 'left']\"\n    :hide-after=\"hideAfter\"\n    persistent\n  >\n    <template #content>\n      <div class=\"el-popconfirm\">\n        <div class=\"el-popconfirm__main\">\n          <el-icon\n            v-if=\"!hideIcon && icon\"\n            class=\"el-popconfirm__icon\"\n            :style=\"{ color: iconColor }\"\n          >\n            <component :is=\"icon\" />\n          </el-icon>\n          {{ title }}\n        </div>\n        <div class=\"el-popconfirm__action\">\n          <el-button size=\"small\" :type=\"cancelButtonType\" @click=\"cancel\">\n            {{ finalCancelButtonText }}\n          </el-button>\n          <el-button size=\"small\" :type=\"confirmButtonType\" @click=\"confirm\">\n            {{ finalConfirmButtonText }}\n          </el-button>\n        </div>\n      </div>\n    </template>\n    <template v-if=\"$slots.reference\">\n      <slot name=\"reference\" />\n    </template>\n  </el-tooltip>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, unref } from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport ElIcon from '@element-plus/components/icon'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useLocale } from '@element-plus/hooks'\nimport { popconfirmProps } from './popconfirm'\n\nexport default defineComponent({\n  name: 'ElPopconfirm',\n\n  components: {\n    ElButton,\n    ElTooltip,\n    ElIcon,\n  },\n\n  props: popconfirmProps,\n\n  setup(props) {\n    const { t } = useLocale()\n    const tooltipRef = ref<{ onClose: () => void }>()\n\n    const hidePopper = () => {\n      unref(tooltipRef)?.onClose?.()\n    }\n\n    const handleCallback = () => {\n      hidePopper()\n    }\n\n    const confirm = (e: Event) => {\n      props.onConfirm?.(e)\n      handleCallback()\n    }\n    const cancel = (e: Event) => {\n      props.onCancel?.(e)\n      handleCallback()\n    }\n\n    const finalConfirmButtonText = computed(\n      () => props.confirmButtonText || t('el.popconfirm.confirmButtonText')\n    )\n    const finalCancelButtonText = computed(\n      () => props.cancelButtonText || t('el.popconfirm.cancelButtonText')\n    )\n\n    return {\n      finalConfirmButtonText,\n      finalCancelButtonText,\n      tooltipRef,\n\n      confirm,\n      cancel,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_withCtx"],"mappings":";;;;;;;;;AAgDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAAA,EAGF,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,EAAE,MAAM;AACd,UAAM,aAAa;AAEnB,UAAM,aAAa,MAAM;AACvB,YAAM,aAAa;AAAA;AAGrB,UAAM,iBAAiB,MAAM;AAC3B;AAAA;AAGF,UAAM,UAAU,CAAC,MAAa;AAC5B,YAAM,YAAY;AAClB;AAAA;AAEF,UAAM,SAAS,CAAC,MAAa;AAC3B,YAAM,WAAW;AACjB;AAAA;AAGF,UAAM,yBAAyB,SAC7B,MAAM,MAAM,qBAAqB,EAAE;AAErC,UAAM,wBAAwB,SAC5B,MAAM,MAAM,oBAAoB,EAAE;AAGpC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA;AAAA;AAAA;qBA/EO,OAAM;qBAUN,OAAM;;;;;;SApBfA,aAAeC;AAAA,IACf,SAAO;AAAA,IACP;AAAA,IACA,gBAAc;AAAA,IACb;AAAA,IACA,uBAAY,WAAS;AAAA,IACtB,cAAU;AAAA;MAEC;AAAA,aACTC,cAmBM;AAAA,yBAlBJ,OASM;AAAA,2BAPa,OAAI,YAAI;AAAA,4BADzB;YAEE,KAAK;AAAA,YACJ,OAAK;AAAA;;6BAEN;AAAA;;;iDAEF;AAAA;;2BAKY;AAAA,sBAFI,sBAAO;AAAA,YAAE,MAAM;AAAA,YAAmB,WAAO;AAAA;;;;;;aAGzD,GAEY;AAAA,sBAFI,sBAAO;AAAA,YAAE,MAAM;AAAA,YAAoB,WAAO;AAAA;;;;;;;;;;aAMhDA,QAAO,MAAS;AAAA,WAC9B;;;;;;;;;"}