element-plus 1.3.0-beta.7 → 2.0.1

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

@@ -1,51 +1,56 @@
 import '../../button/index.mjs';
 import { QuestionFilled } from '@element-plus/icons-vue';
 import { buildProps, definePropType } from '../../../utils/props.mjs';
+import '../../tooltip/index.mjs';
 import { buttonType } from '../../button/src/button.mjs';
+import { useTooltipContentProps } from '../../tooltip/src/tooltip.mjs';
 
-const popconfirmProps = buildProps({
-  title: {
-    type: String
-  },
-  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 popconfirmProps = {
+  ...buildProps({
+    title: {
+      type: String
+    },
+    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)
+    }
+  }),
+  teleported: useTooltipContentProps.teleported
+};
 
 export { popconfirmProps };
 //# 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.ts"],"sourcesContent":["import { buttonType } from '@element-plus/components/button'\nimport { QuestionFilled } from '@element-plus/icons-vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { useTooltipContentProps } from '@element-plus/components/tooltip'\n\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const popconfirmProps = {\n  ...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),\n  teleported: useTooltipContentProps.teleported,\n}\nexport type PopconfirmProps = ExtractPropTypes<typeof popconfirmProps>\n"],"names":[],"mappings":";;;;;;;AAIY,MAAC,eAAe,GAAG;AAC/B,EAAE,GAAG,UAAU,CAAC;AAChB,IAAI,KAAK,EAAE;AACX,MAAM,IAAI,EAAE,MAAM;AAClB,KAAK;AACL,IAAI,iBAAiB,EAAE;AACvB,MAAM,IAAI,EAAE,MAAM;AAClB,KAAK;AACL,IAAI,gBAAgB,EAAE;AACtB,MAAM,IAAI,EAAE,MAAM;AAClB,KAAK;AACL,IAAI,iBAAiB,EAAE;AACvB,MAAM,IAAI,EAAE,MAAM;AAClB,MAAM,MAAM,EAAE,UAAU;AACxB,MAAM,OAAO,EAAE,SAAS;AACxB,KAAK;AACL,IAAI,gBAAgB,EAAE;AACtB,MAAM,IAAI,EAAE,MAAM;AAClB,MAAM,MAAM,EAAE,UAAU;AACxB,MAAM,OAAO,EAAE,MAAM;AACrB,KAAK;AACL,IAAI,IAAI,EAAE;AACV,MAAM,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC5C,MAAM,OAAO,EAAE,cAAc;AAC7B,KAAK;AACL,IAAI,SAAS,EAAE;AACf,MAAM,IAAI,EAAE,MAAM;AAClB,MAAM,OAAO,EAAE,MAAM;AACrB,KAAK;AACL,IAAI,QAAQ,EAAE;AACd,MAAM,IAAI,EAAE,OAAO;AACnB,MAAM,OAAO,EAAE,KAAK;AACpB,KAAK;AACL,IAAI,SAAS,EAAE;AACf,MAAM,IAAI,EAAE,MAAM;AAClB,MAAM,OAAO,EAAE,GAAG;AAClB,KAAK;AACL,IAAI,SAAS,EAAE;AACf,MAAM,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AACpC,KAAK;AACL,IAAI,QAAQ,EAAE;AACd,MAAM,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AACpC,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,UAAU,EAAE,sBAAsB,CAAC,UAAU;AAC/C;;;;"}

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

@@ -1,39 +1,43 @@
 declare const _default: import("vue").DefineComponent<{
-    readonly title: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
-    readonly confirmButtonText: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
-    readonly cancelButtonText: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
-    readonly confirmButtonType: import("../../../utils/props").BuildPropReturn<StringConstructor, "primary", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    readonly cancelButtonType: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    readonly icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, any, unknown, unknown, unknown>;
-    readonly iconColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "#f90", unknown, unknown, unknown>;
-    readonly hideIcon: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly hideAfter: import("../../../utils/props").BuildPropReturn<NumberConstructor, 200, unknown, unknown, unknown>;
-    readonly onConfirm: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: Event) => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
-    readonly onCancel: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: Event) => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
+    teleported: import("../../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
+    title: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    confirmButtonText: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    cancelButtonText: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    confirmButtonType: import("../../../utils/props").BuildPropReturn<StringConstructor, "primary", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
+    cancelButtonType: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
+    icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, any, unknown, unknown, unknown>;
+    iconColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "#f90", unknown, unknown, unknown>;
+    hideIcon: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    hideAfter: import("../../../utils/props").BuildPropReturn<NumberConstructor, 200, unknown, unknown, unknown>;
+    onConfirm: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: Event) => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
+    onCancel: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: Event) => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
 }, {
     finalConfirmButtonText: import("vue").ComputedRef<string>;
     finalCancelButtonText: import("vue").ComputedRef<string>;
     tooltipRef: import("vue").Ref<{
         onClose: () => void;
     } | undefined>;
+    compatTeleported: import("vue").ComputedRef<boolean>;
     confirm: (e: Event) => void;
     cancel: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly title: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
-    readonly confirmButtonText: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
-    readonly cancelButtonText: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
-    readonly confirmButtonType: import("../../../utils/props").BuildPropReturn<StringConstructor, "primary", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    readonly cancelButtonType: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
-    readonly icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, any, unknown, unknown, unknown>;
-    readonly iconColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "#f90", unknown, unknown, unknown>;
-    readonly hideIcon: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
-    readonly hideAfter: import("../../../utils/props").BuildPropReturn<NumberConstructor, 200, unknown, unknown, unknown>;
-    readonly onConfirm: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: Event) => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
-    readonly onCancel: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: Event) => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
+    teleported: import("../../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
+    title: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    confirmButtonText: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    cancelButtonText: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+    confirmButtonType: import("../../../utils/props").BuildPropReturn<StringConstructor, "primary", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
+    cancelButtonType: import("../../../utils/props").BuildPropReturn<StringConstructor, "text", unknown, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;
+    icon: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, any, unknown, unknown, unknown>;
+    iconColor: import("../../../utils/props").BuildPropReturn<StringConstructor, "#f90", unknown, unknown, unknown>;
+    hideIcon: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    hideAfter: import("../../../utils/props").BuildPropReturn<NumberConstructor, 200, unknown, unknown, unknown>;
+    onConfirm: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: Event) => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
+    onCancel: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<(e: Event) => boolean | Promise<boolean>>, unknown, unknown, unknown, unknown>;
 }>>, {
     icon: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>, unknown, unknown>;
     title: string;
     hideAfter: number;
+    teleported: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     confirmButtonText: string;
     cancelButtonText: string;
     confirmButtonType: import("../../../utils/props").BuildPropType<StringConstructor, "" | "default" | "primary" | "success" | "warning" | "info" | "danger" | "text", unknown>;

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

@@ -2,13 +2,16 @@ import { defineComponent, ref, unref, computed, resolveComponent, openBlock, cre
 import { ElButton } from '../../button/index.mjs';
 import { ElIcon } from '../../icon/index.mjs';
 import { ElTooltip } from '../../tooltip/index.mjs';
+import '../../popper/index.mjs';
 import '../../../hooks/index.mjs';
 import { popconfirmProps } from './popconfirm.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useDeprecateAppendToBody } from '../../popper/src/deprecation.mjs';
 import { useLocale } from '../../../hooks/use-locale/index.mjs';
 
+const COMPONENT_NAME = "ElPopconfirm";
 const _sfc_main = defineComponent({
-  name: "ElPopconfirm",
+  name: COMPONENT_NAME,
   components: {
     ElButton,
     ElTooltip,
@@ -16,20 +19,24 @@ const _sfc_main = defineComponent({
   },
   props: popconfirmProps,
   setup(props) {
+    const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME, "appendToBody");
     const { t } = useLocale();
     const tooltipRef = ref();
     const hidePopper = () => {
-      unref(tooltipRef)?.onClose?.();
+      var _a, _b;
+      (_b = (_a = unref(tooltipRef)) == null ? void 0 : _a.onClose) == null ? void 0 : _b.call(_a);
     };
     const handleCallback = () => {
       hidePopper();
     };
     const confirm = (e) => {
-      props.onConfirm?.(e);
+      var _a;
+      (_a = props.onConfirm) == null ? void 0 : _a.call(props, e);
       handleCallback();
     };
     const cancel = (e) => {
-      props.onCancel?.(e);
+      var _a;
+      (_a = props.onCancel) == null ? void 0 : _a.call(props, e);
       handleCallback();
     };
     const finalConfirmButtonText = computed(() => props.confirmButtonText || t("el.popconfirm.confirmButtonText"));
@@ -38,6 +45,7 @@ const _sfc_main = defineComponent({
       finalConfirmButtonText,
       finalCancelButtonText,
       tooltipRef,
+      compatTeleported,
       confirm,
       cancel
     };
@@ -54,7 +62,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     trigger: "click",
     effect: "light",
     "popper-class": "el-popover",
-    "append-to-body": "",
+    teleported: _ctx.compatTeleported,
     "fallback-placements": ["bottom", "top", "right", "left"],
     "hide-after": _ctx.hideAfter,
     persistent: ""
@@ -102,7 +110,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : createCommentVNode("v-if", true)
     ]),
     _: 3
-  }, 16, ["hide-after"]);
+  }, 16, ["teleported", "hide-after"]);
 }
 var Popconfirm = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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.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    :teleported=\"compatTeleported\"\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 { useDeprecateAppendToBody } from '@element-plus/components/popper'\nimport { useLocale } from '@element-plus/hooks'\nimport { popconfirmProps } from './popconfirm'\n\nconst COMPONENT_NAME = 'ElPopconfirm'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n\n  components: {\n    ElButton,\n    ElTooltip,\n    ElIcon,\n  },\n\n  props: popconfirmProps,\n\n  setup(props) {\n    const { compatTeleported } = useDeprecateAppendToBody(\n      COMPONENT_NAME,\n      'appendToBody'\n    )\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      // Deprecation in 2.1.0\n      compatTeleported,\n\n      confirm,\n      cancel,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;AAiDA,MAAM,iBAAiB;AACvB,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,qBAAqB,yBAC3B,gBACA;AAEF,UAAM,EAAE,MAAM;AACd,UAAM,aAAa;AAEnB,UAAM,aAAa,MAAM;AACvB,YAAM;AAAa;AAGrB;AACE;AAAA;AAGF;AACE;AACA;AAAA;AAEF,oBAAgB;AACd;AACA;AAAA;AAGF,mCAA+B,SAC7B,MAAM;AAER;AAIA;AAAO;AACL;AACA;AACA,MAGA;AAAA,MAEA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;;AAlGa;AACR;AACP;AACa,IACZ;AAAA,IACA;AAAqB,IACtB,cAAU;AAAA;;AAEC;AAoBH;AATE;AAPqB,2BADzB;;AAEO;AACC;;;AAEN;;;;AAEF;;;AAKY;AAFW;AAAQ;AAA0B;;;;;;;AAK7C;AAFW,YAAE;AAAM,uBAA2B;AAAA;;;;;;;;;;;AAMhC;;;;;;;;;;;;"}

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

@@ -2,8 +2,11 @@ import type { SFCWithInstall } from 'element-plus/es/utils/types';
 declare const _PopoverDirective: SFCWithInstall<import("vue").ObjectDirective<any, any>>;
 declare const _Popover: SFCWithInstall<import("vue").DefineComponent<{
     title: StringConstructor;
-    hideAfter: import("../../utils/props").BuildPropReturn<NumberConstructor, number, unknown, unknown, unknown>;
     width: import("../../utils/props").BuildPropReturn<(StringConstructor | NumberConstructor)[], number, unknown, unknown, unknown>;
+    appendToBody: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     content: import("../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     popperStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("vue").StyleValue>, string | import("vue").CSSProperties | (() => string) | (() => import("vue").CSSProperties) | (() => import("vue").StyleValue[]) | undefined, unknown, unknown, unknown>;
     popperClass: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | {
@@ -69,7 +72,9 @@ declare const _Popover: SFCWithInstall<import("vue").DefineComponent<{
         validator: ((val: unknown) => boolean) | undefined;
         __elPropsReservedKey: true;
     };
+    teleported: import("../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
 }, {
+    compatTeleported: import("vue").ComputedRef<boolean>;
     kls: import("vue").ComputedRef<(string | {
         [x: string]: any;
     } | (string | {
@@ -840,10 +845,15 @@ declare const _Popover: SFCWithInstall<import("vue").DefineComponent<{
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<import("..").ElPopperInjectionContext> & {} & {} & import("vue").ComponentCustomProperties) | null | undefined>;
     hide: () => void;
+    afterEnter: () => void;
+    afterLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
-    hideAfter: import("../../utils/props").BuildPropReturn<NumberConstructor, number, unknown, unknown, unknown>;
     width: import("../../utils/props").BuildPropReturn<(StringConstructor | NumberConstructor)[], number, unknown, unknown, unknown>;
+    appendToBody: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     content: import("../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     popperStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("vue").StyleValue>, string | import("vue").CSSProperties | (() => string) | (() => import("vue").CSSProperties) | (() => import("vue").StyleValue[]) | undefined, unknown, unknown, unknown>;
     popperClass: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | {
@@ -909,6 +919,7 @@ declare const _Popover: SFCWithInstall<import("vue").DefineComponent<{
         validator: ((val: unknown) => boolean) | undefined;
         __elPropsReservedKey: true;
     };
+    teleported: import("../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
 }>> & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -942,15 +953,19 @@ declare const _Popover: SFCWithInstall<import("vue").DefineComponent<{
     } | any)[])[])[])[])[])[])[])[])[])[])[];
     popperStyle: import("vue").StyleValue;
     content: string;
-    hideAfter: number;
+    teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: boolean;
 }>> & {
     directive: typeof _PopoverDirective;
 };
 export default _Popover;
 export declare const ElPopover: SFCWithInstall<import("vue").DefineComponent<{
     title: StringConstructor;
-    hideAfter: import("../../utils/props").BuildPropReturn<NumberConstructor, number, unknown, unknown, unknown>;
     width: import("../../utils/props").BuildPropReturn<(StringConstructor | NumberConstructor)[], number, unknown, unknown, unknown>;
+    appendToBody: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     content: import("../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     popperStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("vue").StyleValue>, string | import("vue").CSSProperties | (() => string) | (() => import("vue").CSSProperties) | (() => import("vue").StyleValue[]) | undefined, unknown, unknown, unknown>;
     popperClass: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | {
@@ -1016,7 +1031,9 @@ export declare const ElPopover: SFCWithInstall<import("vue").DefineComponent<{
         validator: ((val: unknown) => boolean) | undefined;
         __elPropsReservedKey: true;
     };
+    teleported: import("../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
 }, {
+    compatTeleported: import("vue").ComputedRef<boolean>;
     kls: import("vue").ComputedRef<(string | {
         [x: string]: any;
     } | (string | {
@@ -1787,10 +1804,15 @@ export declare const ElPopover: SFCWithInstall<import("vue").DefineComponent<{
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{}>> & import("vue").ShallowUnwrapRef<import("..").ElPopperInjectionContext> & {} & {} & import("vue").ComponentCustomProperties) | null | undefined>;
     hide: () => void;
+    afterEnter: () => void;
+    afterLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
-    hideAfter: import("../../utils/props").BuildPropReturn<NumberConstructor, number, unknown, unknown, unknown>;
     width: import("../../utils/props").BuildPropReturn<(StringConstructor | NumberConstructor)[], number, unknown, unknown, unknown>;
+    appendToBody: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     content: import("../../utils/props").BuildPropReturn<StringConstructor, string | (() => string) | undefined, unknown, unknown, unknown>;
     popperStyle: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<import("vue").StyleValue>, string | import("vue").CSSProperties | (() => string) | (() => import("vue").CSSProperties) | (() => import("vue").StyleValue[]) | undefined, unknown, unknown, unknown>;
     popperClass: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | {
@@ -1856,6 +1878,7 @@ export declare const ElPopover: SFCWithInstall<import("vue").DefineComponent<{
         validator: ((val: unknown) => boolean) | undefined;
         __elPropsReservedKey: true;
     };
+    teleported: import("../../utils/props").BuildPropReturn<BooleanConstructor, boolean | (() => false) | (() => true) | undefined, unknown, unknown, unknown>;
 }>> & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -1889,7 +1912,8 @@ export declare const ElPopover: SFCWithInstall<import("vue").DefineComponent<{
     } | any)[])[])[])[])[])[])[])[])[])[])[];
     popperStyle: import("vue").StyleValue;
     content: string;
-    hideAfter: number;
+    teleported: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+    appendToBody: boolean;
 }>> & {
     directive: typeof _PopoverDirective;
 };

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

@@ -1,23 +1,26 @@
 import { defineComponent, ref, computed, unref, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementBlock, toDisplayString, createCommentVNode, renderSlot, createTextVNode } from 'vue';
 import { ElTooltip } from '../../tooltip/index.mjs';
+import '../../popper/index.mjs';
 import '../../../utils/util.mjs';
 import { usePopoverProps } from './popover.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
 import { isString } from '@vue/shared';
+import { useDeprecateAppendToBody } from '../../popper/src/deprecation.mjs';
 
 const emits = ["update:visible", "after-enter", "after-leave"];
-const NAME = "ElPopover";
+const COMPONENT_NAME = "ElPopover";
 const _sfc_main = defineComponent({
-  name: NAME,
+  name: COMPONENT_NAME,
   components: {
     ElTooltip
   },
   props: usePopoverProps,
   emits,
-  setup(props) {
+  setup(props, { emit }) {
     const tooltipRef = ref(null);
     const popperRef = computed(() => {
-      return unref(tooltipRef)?.popperRef;
+      var _a;
+      return (_a = unref(tooltipRef)) == null ? void 0 : _a.popperRef;
     });
     const width = computed(() => {
       if (isString(props.width)) {
@@ -40,15 +43,26 @@ const _sfc_main = defineComponent({
         props.popperClass
       ];
     });
+    const { compatTeleported } = useDeprecateAppendToBody(COMPONENT_NAME, "appendToBody");
     const hide = () => {
-      tooltipRef.value?.hide();
+      var _a;
+      (_a = tooltipRef.value) == null ? void 0 : _a.hide();
+    };
+    const afterEnter = () => {
+      emit("after-enter");
+    };
+    const afterLeave = () => {
+      emit("after-leave");
     };
     return {
+      compatTeleported,
       kls,
       style,
       tooltipRef,
       popperRef,
-      hide
+      hide,
+      afterEnter,
+      afterLeave
     };
   }
 });
@@ -65,7 +79,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     enterable: _ctx.enterable,
     "popper-class": _ctx.kls,
     "popper-style": _ctx.style,
-    persistent: ""
+    teleported: _ctx.compatTeleported,
+    persistent: "",
+    onShow: _ctx.afterEnter,
+    onHide: _ctx.afterLeave
   }), {
     content: withCtx(() => [
       _ctx.title ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(_ctx.title), 1)) : createCommentVNode("v-if", true),
@@ -77,7 +94,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.$slots.reference ? renderSlot(_ctx.$slots, "reference", { key: 0 }) : createCommentVNode("v-if", true)
     ]),
     _: 3
-  }, 16, ["aria-label", "effect", "enterable", "popper-class", "popper-style"]);
+  }, 16, ["aria-label", "effect", "enterable", "popper-class", "popper-style", "teleported", "onShow", "onHide"]);
 }
 var Popover = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/popover/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    v-bind=\"$attrs\"\n    :aria-label=\"title\"\n    :effect=\"effect\"\n    :enterable=\"enterable\"\n    :popper-class=\"kls\"\n    :popper-style=\"style\"\n    persistent\n  >\n    <template v-if=\"$slots.reference\">\n      <slot name=\"reference\" />\n    </template>\n\n    <template #content>\n      <div v-if=\"title\" class=\"el-popover__title\" role=\"title\">\n        {{ title }}\n      </div>\n      <slot>\n        {{ content }}\n      </slot>\n    </template>\n  </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, unref } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { isString } from '@element-plus/utils/util'\nimport { usePopoverProps } from './popover'\n\nimport type { StyleValue } from 'vue'\n\nconst emits = ['update:visible', 'after-enter', 'after-leave']\n\nconst NAME = 'ElPopover'\n\nexport default defineComponent({\n  name: NAME,\n  components: {\n    ElTooltip,\n  },\n  props: usePopoverProps,\n  emits,\n  setup(props) {\n    const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const popperRef = computed(() => {\n      return unref(tooltipRef)?.popperRef\n    })\n    const width = computed(() => {\n      if (isString(props.width)) {\n        return props.width as string\n      }\n      return `${props.width}px`\n    })\n\n    const style = computed(() => {\n      return [\n        {\n          width: width.value,\n        },\n        props.popperStyle,\n      ] as StyleValue\n    })\n\n    const kls = computed(() => {\n      return [\n        { 'el-popover--plain': !!props.content },\n        'el-popover',\n        props.popperClass,\n      ]\n    })\n\n    const hide = () => {\n      tooltipRef.value?.hide()\n    }\n\n    return {\n      kls,\n      style,\n      tooltipRef,\n      popperRef,\n      hide,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_withCtx","_createCommentVNode"],"mappings":";;;;;;;AAiCA,MAAM,QAAQ,CAAC,kBAAkB,eAAe;AAEhD,MAAM,OAAO;AAEb,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP;AAAA,EACA,MAAM,OAAO;AACX,UAAM,aAAa,IAA2C;AAC9D,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO,MAAM,aAAa;AAAA;AAE5B,UAAM,QAAQ,SAAS,MAAM;AAC3B,UAAI,SAAS,MAAM,QAAQ;AACzB,eAAO,MAAM;AAAA;AAEf,aAAO,GAAG,MAAM;AAAA;AAGlB,UAAM,QAAQ,SAAS,MAAM;AAC3B,aAAO;AAAA,QACL;AAAA,UACE,OAAO,MAAM;AAAA;AAAA,QAEf,MAAM;AAAA;AAAA;AAIV,UAAM,MAAM,SAAS,MAAM;AACzB,aAAO;AAAA,QACL,EAAE,qBAAqB,CAAC,CAAC,MAAM;AAAA,QAC/B;AAAA,QACA,MAAM;AAAA;AAAA;AAIV,UAAM,OAAO,MAAM;AACjB,iBAAW,OAAO;AAAA;AAGpB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;EAlEkB,KAAK;AAAA,EAAqB,OAAK;AAAA;;;;SAZlDA,aAAYC,YAAK;AAAA,IACjB,cAAQ,KAAM;AAAA,IACd,aAAW;AAAA,IACX,gBAAc;AAAA,IACd,gBAAc;AAAA,IACf,gBAAU;AAAA;MAMC;AAAA,aACEC,QAAK;AAAA,0GAGhBC,mBAEO;AAAA,yCADF;AAAA;;;aATSD,QAAO,MAAS;AAAA,WAC9B;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/popover/src/index.vue"],"sourcesContent":["<template>\n  <el-tooltip\n    ref=\"tooltipRef\"\n    v-bind=\"$attrs\"\n    :aria-label=\"title\"\n    :effect=\"effect\"\n    :enterable=\"enterable\"\n    :popper-class=\"kls\"\n    :popper-style=\"style\"\n    :teleported=\"compatTeleported\"\n    persistent\n    @show=\"afterEnter\"\n    @hide=\"afterLeave\"\n  >\n    <template v-if=\"$slots.reference\">\n      <slot name=\"reference\" />\n    </template>\n\n    <template #content>\n      <div v-if=\"title\" class=\"el-popover__title\" role=\"title\">\n        {{ title }}\n      </div>\n      <slot>\n        {{ content }}\n      </slot>\n    </template>\n  </el-tooltip>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, unref } from 'vue'\nimport ElTooltip from '@element-plus/components/tooltip'\nimport { useDeprecateAppendToBody } from '@element-plus/components/popper'\nimport { isString } from '@element-plus/utils/util'\nimport { usePopoverProps } from './popover'\n\nimport type { StyleValue } from 'vue'\n\nconst emits = ['update:visible', 'after-enter', 'after-leave']\n\nconst COMPONENT_NAME = 'ElPopover'\n\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  components: {\n    ElTooltip,\n  },\n  props: usePopoverProps,\n  emits,\n  setup(props, { emit }) {\n    const tooltipRef = ref<InstanceType<typeof ElTooltip> | null>(null)\n    const popperRef = computed(() => {\n      return unref(tooltipRef)?.popperRef\n    })\n    const width = computed(() => {\n      if (isString(props.width)) {\n        return props.width as string\n      }\n      return `${props.width}px`\n    })\n\n    const style = computed(() => {\n      return [\n        {\n          width: width.value,\n        },\n        props.popperStyle,\n      ] as StyleValue\n    })\n\n    const kls = computed(() => {\n      return [\n        { 'el-popover--plain': !!props.content },\n        'el-popover',\n        props.popperClass,\n      ]\n    })\n\n    const { compatTeleported } = useDeprecateAppendToBody(\n      COMPONENT_NAME,\n      'appendToBody'\n    )\n\n    const hide = () => {\n      tooltipRef.value?.hide()\n    }\n\n    const afterEnter = () => {\n      emit('after-enter')\n    }\n\n    const afterLeave = () => {\n      emit('after-leave')\n    }\n\n    return {\n      compatTeleported,\n      kls,\n      style,\n      tooltipRef,\n      popperRef,\n      hide,\n      afterEnter,\n      afterLeave,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;AAqCA,MAAM,QAAQ,CAAC,kBAAkB,eAAe;AAEhD,MAAM,iBAAiB;AAEvB,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,OAAO;AAAA,EACP;AAAA,EACA,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,aAAa,IAA2C;AAC9D,UAAM,YAAY,SAAS,MAAM;AAC/B,aAAO;AAAmB;AAE5B;AACE,UAAI,uBAAuB;AACzB;AAAa;AAEf;AAAgB;AAGlB;AACE;AAAO;AACL;AACe;AAAA;AAET;AAAA;AAIV;AACE,aAAO;AAAA;AAC0B,QAC/B;AAAA,QACA;AAAM;AAAA;AAIV;AAKA,UAAM;AACJ,iBAAW;AAAO;AAGpB,uBAAmB;AACjB;AAAK;AAGP,UAAM;AACJ;AAAK;AAGP,WAAO;AAAA,MACL;AAAA;AACA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;AAnFuB;AAA0B;;;;SAflD;AAAiB;AACH;AACH,IACX;AAAc,IACd;AAAc,IACd,gBAAY;AAAA,IACb;AAAU,IACT;AAAM,IACN;AAAM;;AAMI;AACO;AAKT;AADF;;;;AATyB;;;;;;;;;;;"}