@element-plus/nightly 0.0.20220122 → 0.0.20220123

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

@@ -1,110 +1,51 @@
-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 './popconfirm.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
+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';
 
-const _sfc_main = defineComponent({
-  name: "ElPopconfirm",
-  components: {
-    ElButton,
-    ElTooltip,
-    ElIcon
+const popconfirmProps = buildProps({
+  title: {
+    type: String
   },
-  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
-    };
+  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)
   }
 });
-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 { Popconfirm as default };
+export { popconfirmProps };
 //# sourceMappingURL=popconfirm2.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"popconfirm2.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;;;;;;;;;"}
+{"version":3,"file":"popconfirm2.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;;;;"}

package/es/index.mjs

@@ -78,7 +78,7 @@ export { pageHeaderEmits, pageHeaderProps } from './components/page-header/src/p
 export { ElPageHeader } from './components/page-header/index.mjs';
 export { paginationEmits, paginationProps } from './components/pagination/src/pagination.mjs';
 export { ElPagination } from './components/pagination/index.mjs';
-export { popconfirmProps } from './components/popconfirm/src/popconfirm.mjs';
+export { popconfirmProps } from './components/popconfirm/src/popconfirm2.mjs';
 export { ElPopconfirm } from './components/popconfirm/index.mjs';
 export { default as ElPopperArrow } from './components/popper/src/arrow.mjs';
 export { default as ElPopperTrigger } from './components/popper/src/trigger.mjs';

package/es/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.0.20220122";
+export declare const version = "0.0.20220123";

package/es/version.mjs

@@ -1,4 +1,4 @@
-const version = "0.0.20220122";
+const version = "0.0.20220123";
 
 export { version };
 //# sourceMappingURL=version.mjs.map

package/es/version.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20220122'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}
+{"version":3,"file":"version.mjs","sources":["../../../packages/element-plus/version.ts"],"sourcesContent":["export const version = '0.0.20220123'\n"],"names":[],"mappings":"AAAY,MAAC,OAAO,GAAG;;;;"}

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

@@ -75,6 +75,17 @@ declare const _Autocomplete: SFCWithInstall<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;
@@ -219,6 +230,17 @@ export declare const ElAutocomplete: SFCWithInstall<import("vue").DefineComponen
     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/lib/components/autocomplete/src/index.js

@@ -17,7 +17,8 @@ var index$3 = require('../../icon/index.js');
 var iconsVue = require('@element-plus/icons-vue');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
 var index$4 = require('../../../directives/click-outside/index.js');
-var index$5 = require('../../../hooks/use-attrs/index.js');
+var index$5 = require('../../../hooks/use-namespace/index.js');
+var index$6 = require('../../../hooks/use-attrs/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -102,7 +103,8 @@ const _sfc_main = vue.defineComponent({
     "select"
   ],
   setup(props, ctx) {
-    const attrs = index$5.useAttrs();
+    const ns = index$5.useNamespace("autocomplete");
+    const attrs = index$6.useAttrs();
     const suggestions = vue.ref([]);
     const highlightedIndex = vue.ref(-1);
     const dropdownWidth = vue.ref("");
@@ -113,7 +115,7 @@ const _sfc_main = vue.defineComponent({
     const regionRef = vue.ref(null);
     const popper = vue.ref(null);
     const id = vue.computed(() => {
-      return `el-autocomplete-${util.generateId()}`;
+      return ns.b(String(util.generateId()));
     });
     const suggestionVisible = vue.computed(() => {
       const isValidData = shared.isArray(suggestions.value) && suggestions.value.length > 0;
@@ -220,8 +222,8 @@ const _sfc_main = vue.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;
@@ -259,7 +261,8 @@ const _sfc_main = vue.defineComponent({
       focus,
       select,
       highlight,
-      onSuggestionShow
+      onSuggestionShow,
+      ns
     };
   }
 });
@@ -279,32 +282,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: vue.withCtx(() => [
       vue.createElementVNode("div", {
         ref: "regionRef",
-        class: vue.normalizeClass([
-          "el-autocomplete-suggestion",
-          _ctx.suggestionLoading && "is-loading"
-        ]),
+        class: vue.normalizeClass([_ctx.ns.b("suggestion"), _ctx.ns.is("loading", _ctx.suggestionLoading)]),
         style: vue.normalizeStyle({ minWidth: _ctx.dropdownWidth, outline: "none" }),
         role: "region"
       }, [
         vue.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: vue.withCtx(() => [
@@ -331,12 +331,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             }), 128))
           ]),
           _: 3
-        }, 8, ["id"])
+        }, 8, ["id", "wrap-class", "view-class"])
       ], 6)
     ]),
     default: vue.withCtx(() => [
       vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["el-autocomplete", _ctx.$attrs.class]),
+        class: vue.normalizeClass([_ctx.ns.b(), _ctx.$attrs.class]),
         style: vue.normalizeStyle(_ctx.$attrs.style),
         role: "combobox",
         "aria-haspopup": "listbox",
@@ -387,7 +387,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__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.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","ElInput","ElScrollbar","ElIcon","Loading","ClickOutside","NOOP","UPDATE_MODEL_EVENT","useAttrs","ref","computed","generateId","isArray","debounce","_openBlock","_createBlock","_withCtx","_normalizeStyle","_createElementBlock","_Fragment","_normalizeClass","_mergeProps","_withModifiers","_createSlots"],"mappings":"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"}
+{"version":3,"file":"index.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=\"`${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":["defineComponent","ElTooltip","ElInput","ElScrollbar","ElIcon","Loading","ClickOutside","NOOP","UPDATE_MODEL_EVENT","useNamespace","useAttrs","ref","computed","generateId","isArray","debounce","_openBlock","_createBlock","_withCtx","_normalizeClass","_normalizeStyle","_createElementBlock","_Fragment","_mergeProps","_withModifiers","_createSlots"],"mappings":"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"}

package/lib/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/lib/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/lib/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/lib/components/backtop/src/backtop2.js

@@ -8,8 +8,10 @@ var index = require('../../icon/index.js');
 var animation = require('../../../utils/animation.js');
 var error = require('../../../utils/error.js');
 var iconsVue = require('@element-plus/icons-vue');
+require('../../../hooks/index.js');
 var backtop = require('./backtop.js');
 var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
 
 const COMPONENT_NAME = "ElBacktop";
 const _sfc_main = vue.defineComponent({
@@ -21,6 +23,7 @@ const _sfc_main = vue.defineComponent({
   props: backtop.backtopProps,
   emits: backtop.backtopEmits,
   setup(props, { emit }) {
+    const ns = index$1.useNamespace("backtop");
     const el = vue.shallowRef(document.documentElement);
     const container = vue.shallowRef(document);
     const visible = vue.ref(false);
@@ -67,14 +70,17 @@ const _sfc_main = vue.defineComponent({
       visible,
       styleBottom,
       styleRight,
-      handleClick
+      handleClick,
+      ns
     };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_caret_top = vue.resolveComponent("caret-top");
   const _component_el_icon = vue.resolveComponent("el-icon");
-  return vue.openBlock(), vue.createBlock(vue.Transition, { name: "el-fade-in" }, {
+  return vue.openBlock(), vue.createBlock(vue.Transition, {
+    name: `${_ctx.ns.namespace.value}-fade-in`
+  }, {
     default: vue.withCtx(() => [
       _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
@@ -82,21 +88,23 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           right: _ctx.styleRight,
           bottom: _ctx.styleBottom
         }),
-        class: "el-backtop",
+        class: vue.normalizeClass(_ctx.ns.b()),
         onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"]))
       }, [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
-          vue.createVNode(_component_el_icon, { class: "el-backtop__icon" }, {
+          vue.createVNode(_component_el_icon, {
+            class: vue.normalizeClass(_ctx.ns.e("icon"))
+          }, {
             default: vue.withCtx(() => [
               vue.createVNode(_component_caret_top)
             ]),
             _: 1
-          })
+          }, 8, ["class"])
         ])
-      ], 4)) : vue.createCommentVNode("v-if", true)
+      ], 6)) : vue.createCommentVNode("v-if", true)
     ]),
     _: 3
-  });
+  }, 8, ["name"]);
 }
 var Backtop = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 

package/lib/components/backtop/src/backtop2.js.map

@@ -1 +1 @@
-{"version":3,"file":"backtop2.js","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":["defineComponent","ElIcon","CaretTop","backtopProps","backtopEmits","shallowRef","ref","computed","easeInOutCubic","useThrottleFn","_createBlock","_withCtx","_normalizeStyle"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,iBAAiB;AAEvB,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA,cACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAKC,eAAoC,SAAS;AACxD,UAAM,YAAYA,eAAmC;AACrD,UAAM,UAAUC,QAAI;AACpB,UAAM,cAAcC,aAAS,MAAM,GAAG,MAAM;AAC5C,UAAM,aAAaA,aAAS,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,kBAAkBC,yBAAe;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,wBAAwBC,mBAAc,cAAc;AAE1D,kBAAU,MAAM;AACd,UAAI,MAAM,QAAQ;AAChB,WAAG,QACD,SAAS,cAA2B,MAAM,WAAW;AACvD,YAAI,CAAC,GAAG,OAAO;AACb,2BAAW,gBAAgB,0BAA0B,MAAM;AAAA;AAE7D,kBAAU,QAAQ,GAAG;AAAA;AAGvB,4BAAiB,WAAW,UAAU;AAAA;AAGxC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;0BA3EIC;AAAA,aAXEC,YAAO;AAAA;QACZ,KAAK;AAAA,eAAmBC,mBAAU;AAAA,sBAAkB;AAAA;;QAKpD,OAAK;AAAA;SAEN;AAAA,uBACE,KAAyD,uBAAhD,MAAM;AAAA,8CAAgC;AAAA,qBAAbD,YAAa;AAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"backtop2.js","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":["defineComponent","ElIcon","CaretTop","backtopProps","backtopEmits","useNamespace","shallowRef","ref","computed","easeInOutCubic","useThrottleFn","_openBlock","_createBlock","_Transition","_withCtx","_normalizeStyle","_normalizeClass"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,iBAAiB;AAEvB,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA,cACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAKC,qBAAa;AACxB,UAAM,KAAKC,eAAoC,SAAS;AACxD,UAAM,YAAYA,eAAmC;AACrD,UAAM,UAAUC,QAAI;AACpB,UAAM,cAAcC,aAAS,MAAM,GAAG,MAAM;AAC5C,UAAM,aAAaA,aAAS,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,kBAAkBC,yBAAe;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,wBAAwBC,mBAAc,cAAc;AAE1D,kBAAU,MAAM;AACd,UAAI,MAAM,QAAQ;AAChB,WAAG,QACD,SAAS,cAA2B,MAAM,WAAW;AACvD,YAAI,CAAC,GAAG,OAAO;AACb,2BAAW,gBAAgB,0BAA0B,MAAM;AAAA;AAE7D,kBAAU,QAAQ,GAAG;AAAA;AAGvB,4BAAiB,WAAW,UAAU;AAAA;AAGxC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;SA3FaC,iBAAQC,gBAAeC;AAAA;;aAE9BC,YAAO;AAAA;QACZ,KAAK;AAAA,eAAmBC,mBAAU;AAAA,sBAAkB;AAAA;;QAKpD,OAAKC;AAAA;SAEN;AAAA,uBACE,KAAsD;AAAA,0BAAvC,oBAAK;AAAA;;qBAAWF,YAAa;AAAA;;;;;;;;;;;;;;"}

package/lib/components/index.js

@@ -107,7 +107,7 @@ var subMenu = require('./menu/src/sub-menu.js');
 var overlay = require('./overlay/src/overlay.js');
 var pageHeader = require('./page-header/src/page-header.js');
 var pagination = require('./pagination/src/pagination.js');
-var popconfirm = require('./popconfirm/src/popconfirm.js');
+var popconfirm = require('./popconfirm/src/popconfirm2.js');
 var arrow = require('./popper/src/arrow.js');
 var trigger = require('./popper/src/trigger.js');
 var content = require('./popper/src/content.js');

package/lib/components/popconfirm/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('../../utils/with-install.js');
-var popconfirm$1 = require('./src/popconfirm2.js');
-var popconfirm = require('./src/popconfirm.js');
+var popconfirm$1 = require('./src/popconfirm.js');
+var popconfirm = require('./src/popconfirm2.js');
 
 const ElPopconfirm = withInstall.withInstall(popconfirm$1["default"]);