feat(design, element-plus-adapter, tdesign-vue-next-adapter): 新增popconfirm组件

packages/design/src/Popconfirm.vue

@@ -0,0 +1,42 @@
+<template>
+  <component
+    class="tmagic-design-popconfirm"
+    :is="uiComponent"
+    v-bind="uiProps"
+    @confirm="confirmHandler"
+    @cancel="cancelHandler"
+  >
+    <template #reference>
+      <slot name="reference"></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getDesignConfig } from './config';
+import type { PopconfirmProps } from './types';
+
+defineOptions({
+  name: 'TMPopconfirm',
+});
+
+const emit = defineEmits(['confirm', 'cancel']);
+
+const props = defineProps<PopconfirmProps>();
+
+const ui = getDesignConfig('components')?.popconfirm;
+
+const uiComponent = ui?.component || 'el-popconfirm';
+
+const uiProps = computed<PopconfirmProps>(() => ui?.props(props) || props);
+
+const confirmHandler = (...args: any[]) => {
+  emit('confirm', ...args);
+};
+
+const cancelHandler = (...args: any[]) => {
+  emit('cancel', ...args);
+};
+</script>

packages/design/src/index.ts

@@ -52,6 +52,7 @@ export { default as TMagicTag } from './Tag.vue';
 export { default as TMagicTimePicker } from './TimePicker.vue';
 export { default as TMagicTooltip } from './Tooltip.vue';
 export { default as TMagicUpload } from './Upload.vue';
+export { default as TMagicPopconfirm } from './Popconfirm.vue';
 
 export const tMagicMessage = {
   error: (msg: string) => {

packages/design/src/types.ts

@@ -227,6 +227,23 @@ export interface PaginationProps {
   total?: number;
 }
 
+export interface PopconfirmProps {
+  title?: string;
+  placement?:
+    | 'top'
+    | 'left'
+    | 'right'
+    | 'bottom'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+    | 'left-top'
+    | 'left-bottom'
+    | 'right-top'
+    | 'right-bottom';
+}
+
 export interface PopoverProps {
   placement?: Placement;
   width?: string | number;
@@ -677,6 +694,11 @@ export interface Components {
       | string;
     props: (props: UploadProps) => UploadProps;
   };
+
+  popconfirm: {
+    component: DefineComponent<PopconfirmProps, {}, any> | string;
+    props: (props: PopconfirmProps) => PopconfirmProps;
+  };
 }
 
 export interface DesignPluginOptions {

packages/element-plus-adapter/src/index.ts

@@ -27,6 +27,7 @@ import {
   ElOption,
   ElOptionGroup,
   ElPagination,
+  ElPopconfirm,
   ElRadio,
   ElRadioButton,
   ElRadioGroup,
@@ -72,6 +73,7 @@ import type {
   OptionGroupProps,
   OptionProps,
   PaginationProps,
+  PopconfirmProps,
   RadioButtonProps,
   RadioGroupProps,
   RadioProps,
@@ -305,6 +307,11 @@ const adapter: DesignPluginOptions = {
       component: ElUpload as any,
       props: (props: UploadProps) => props,
     },
+
+    popconfirm: {
+      component: ElPopconfirm as any,
+      props: (props: PopconfirmProps) => props,
+    },
   },
   loading: ElLoading.directive,
 };

packages/tdesign-vue-next-adapter/src/Popconfirm.vue

@@ -0,0 +1,29 @@
+<template>
+  <TPopconfirm :content="title" :placement="placement" @confirm="confirmHandler" @cancel="cancelHandler">
+    <template #default>
+      <slot name="reference"></slot>
+    </template>
+  </TPopconfirm>
+</template>
+
+<script setup lang="ts">
+import { Popconfirm as TPopconfirm } from 'tdesign-vue-next';
+
+import type { PopconfirmProps } from '@tmagic/design';
+
+defineOptions({
+  name: 'TTDesignAdapterPopconfirm',
+});
+
+defineProps<PopconfirmProps>();
+
+const emit = defineEmits(['confirm', 'cancel']);
+
+const confirmHandler = (...args: any[]) => {
+  emit('confirm', ...args);
+};
+
+const cancelHandler = (...args: any[]) => {
+  emit('cancel', ...args);
+};
+</script>