feat: dialogCard

src/dialog/__tests__/index.test.jsx

@@ -1,18 +1,37 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Dialog from '@/src/dialog/index.ts';
 
 // every component needs four parts: props/events/slots/functions.
 describe('Dialog', () => {
   // test props api
   describe(':props', () => {
-    it('modeless', () => {
+    it('mode:modeless', () => {
       const wrapper = mount(Dialog, {
         propsData: { mode: 'modeless' },
       });
       expect(wrapper.find('.t-dialog__mask').exists()).toBe(false);
     });
 
+    it('mode:normal', async () => {
+      const wrapper = mount(Dialog, {
+        propsData: { mode: 'normal' },
+      });
+      const ctx = wrapper.find('.t-dialog__ctx');
+      await nextTick();
+      expect(ctx.find('.t-dialog__position').exists()).toBeFalsy();
+    });
+
+    it('mode:full-screen', async () => {
+      const wrapper = mount(Dialog, {
+        propsData: { mode: 'full-screen' },
+      });
+      const ctx = wrapper.find('.t-dialog__ctx');
+      await nextTick();
+      expect(ctx.find('.t-dialog__position_fullscreen').exists()).toBeTruthy();
+    });
+
     it('placement', () => {
       const dialog = mount(Dialog).find('.t-dialog__position');
       const centerDialog = mount(Dialog, {
@@ -98,10 +117,160 @@ describe('Dialog', () => {
       await wrapper.setProps({ visible: false });
       expect(wrapper.exists()).toBe(true);
     });
+
+    it('showOverlay', async () => {
+      const wrapper = mount(Dialog);
+      const ctx = wrapper.find('.t-dialog__ctx');
+      await nextTick();
+      expect(ctx.find('.t-dialog__mask').exists()).toBeTruthy();
+    });
+
+    it('theme', async () => {
+      const themeList = ['default', 'success', 'info', 'warning', 'danger'];
+      themeList.forEach(async (theme) => {
+        const wrapper = mount(Dialog, {
+          propsData: {
+            theme,
+          },
+        });
+        const dialog = wrapper.find('.t-dialog');
+        await nextTick();
+        expect(dialog.classes()).toContain(`t-dialog__modal-${theme}`);
+      });
+    });
+
+    it('width', async () => {
+      const wrapper = mount(Dialog, {
+        propsData: {
+          width: '80%',
+        },
+      });
+      const dialog = wrapper.find('.t-dialog');
+      await nextTick();
+      expect(getComputedStyle(dialog.element, null).width).toBe('80%');
+    });
+
+    it('draggable', async () => {
+      const wrapper = mount(Dialog, {
+        propsData: {
+          mode: 'modeless',
+          draggable: true,
+        },
+      });
+      const dialog = wrapper.find('.t-dialog');
+      await nextTick();
+      expect(dialog.classes()).toContain('t-dialog--draggable');
+    });
+
+    it('dialogClassName', async () => {
+      const wrapper = mount(Dialog, {
+        propsData: {
+          dialogClassName: 'custom-class',
+          mode: 'modeless',
+        },
+      });
+      const dialog = wrapper.find('.t-dialog');
+      await nextTick();
+      expect(dialog.classes()).toContain('custom-class');
+    });
+
+    it('dialogStyle', async () => {
+      const wrapper = mount(Dialog, {
+        propsData: {
+          dialogStyle: { padding: '99px' },
+          mode: 'modeless',
+        },
+      });
+      const dialog = wrapper.find('.t-dialog');
+      await nextTick();
+      expect(getComputedStyle(dialog.element, null).padding).toBe('99px');
+    });
+
+    it('update dialog confirmBtnLoading', async () => {
+      const wrapper = mount({
+        data() {
+          return {
+            loading: false,
+          };
+        },
+        render() {
+          return (
+            <Dialog
+              mode="modal"
+              confirmBtn={{
+                content: 'Saving',
+                theme: 'primary',
+                loading: this.loading,
+              }}
+              body="this is content"
+            ></Dialog>
+          );
+        },
+      });
+      const dialog = wrapper.find('.t-dialog');
+      await nextTick();
+      expect(dialog.find('.t-button--theme-primary.t-is-loading.t-dialog__confirm').exists()).toBeFalsy();
+      await wrapper.setData({ loading: true });
+      await nextTick();
+      const updateDialog = wrapper.find('.t-dialog');
+      expect(updateDialog.find('.t-button--theme-primary.t-is-loading.t-dialog__confirm').exists()).toBeTruthy();
+    });
   });
 
   // test events
-  // describe('@event', () => {});
+  describe(':events', () => {
+    it(':onCancel', async () => {
+      const fn = vi.fn();
+      const wrapper = mount(Dialog, {
+        propsData: {
+          onCancel: fn,
+        },
+      });
+      const btn = wrapper.find('.t-dialog__footer .t-dialog__cancel');
+      await nextTick();
+      await btn.trigger('click');
+      expect(fn).toBeCalled();
+    });
+
+    it(':onConfirm', async () => {
+      const fn = vi.fn();
+      const wrapper = mount(Dialog, {
+        propsData: {
+          onConfirm: fn,
+        },
+      });
+      const btn = wrapper.find('.t-dialog__footer .t-dialog__confirm');
+      await nextTick();
+      await btn.trigger('click');
+      expect(fn).toBeCalled();
+    });
+
+    it(':onClose', async () => {
+      const fn = vi.fn();
+      const wrapper = mount(Dialog, {
+        propsData: {
+          onClose: fn,
+        },
+      });
+      const btn = wrapper.find('.t-dialog__close');
+      await nextTick();
+      await btn.trigger('click');
+      expect(fn).toBeCalled();
+    });
+
+    it(':onCloseBtnClick', async () => {
+      const fn = vi.fn();
+      const wrapper = mount(Dialog, {
+        propsData: {
+          onCloseBtnClick: fn,
+        },
+      });
+      const btn = wrapper.find('.t-dialog__close');
+      await nextTick();
+      await btn.trigger('click');
+      expect(fn).toBeCalled();
+    });
+  });
 
   // // test slots
   // describe('<slot>', () => {

src/dialog/dialog-card-props.ts

@@ -0,0 +1,57 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDialogCardProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 对话框内容 */
+  body: {
+    type: [String, Function] as PropType<TdDialogCardProps['body']>,
+  },
+  /** 取消按钮，可自定义。值为 null 则不显示取消按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制取消事件 */
+  cancelBtn: {
+    type: [String, Object, Function] as PropType<TdDialogCardProps['cancelBtn']>,
+  },
+  /** 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。值类型为 TNode，则表示呈现自定义按钮示例 */
+  closeBtn: {
+    type: [String, Boolean, Function] as PropType<TdDialogCardProps['closeBtn']>,
+    default: true as TdDialogCardProps['closeBtn'],
+  },
+  /** 确认按钮。值为 null 则不显示确认按钮。值类型为字符串，则表示自定义按钮文本，值类型为 Object 则表示透传 Button 组件属性。使用 TNode 自定义按钮时，需自行控制确认事件 */
+  confirmBtn: {
+    type: [String, Object, Function] as PropType<TdDialogCardProps['confirmBtn']>,
+  },
+  /** 确认按钮加载状态 */
+  confirmLoading: {
+    type: Boolean,
+    default: undefined,
+  },
+  /** 底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 不显示任何内容，值类型为 Function 表示自定义底部内容 */
+  footer: {
+    type: [Boolean, Function] as PropType<TdDialogCardProps['footer']>,
+  },
+  /** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 string 则直接显示值，值类型为 Function 表示自定义头部内容 */
+  header: {
+    type: [String, Boolean, Function] as PropType<TdDialogCardProps['header']>,
+    default: true as TdDialogCardProps['header'],
+  },
+  /** 对话框风格 */
+  theme: {
+    type: String as PropType<TdDialogCardProps['theme']>,
+    default: 'default' as TdDialogCardProps['theme'],
+    validator(val: TdDialogCardProps['theme']): boolean {
+      if (!val) return true;
+      return ['default', 'info', 'warning', 'danger', 'success'].includes(val);
+    },
+  },
+  /** 如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 */
+  onCancel: Function as PropType<TdDialogCardProps['onCancel']>,
+  /** 点击右上角关闭按钮时触发 */
+  onCloseBtnClick: Function as PropType<TdDialogCardProps['onCloseBtnClick']>,
+  /** 如果“确认”按钮存在，则点击“确认”按钮时触发，或者键盘按下回车键时触发 */
+  onConfirm: Function as PropType<TdDialogCardProps['onConfirm']>,
+};