refactor(overlay): 重构Overlay组件使其目录结构更清晰

packages/devui-vue/devui/fullscreen/index.ts

@@ -1,9 +1,7 @@
 import type { App } from 'vue';
 import Fullscreen from './src/fullscreen';
 
-Fullscreen.install = function(app: App): void {
-  app.component(Fullscreen.name, Fullscreen);
-};
+export * from './src/fullscreen-types';
 
 export { Fullscreen };
 
@@ -12,6 +10,6 @@ export default {
   category: '通用',
   status: '100%',
   install(app: App): void {
-    app.use(Fullscreen as any);
+    app.component(Fullscreen.name, Fullscreen);
   }
 };

packages/devui-vue/devui/icon/index.ts

@@ -1,6 +1,8 @@
 import type { App } from 'vue';
 import Icon from './src/icon';
 
+export * from './src/icon-types';
+
 export { Icon };
 
 export default {

packages/devui-vue/devui/overlay/__tests__/overlay.spec.ts

@@ -1,8 +1,27 @@
 import { mount } from '@vue/test-utils';
+import { ComponentPublicInstance, nextTick, Ref } from 'vue';
 import { FixedOverlay } from '../src/fixed-overlay';
-import { nextTick } from 'vue';
 import { FlexibleOverlay } from '../src/flexible-overlay';
-import { OriginOrDomRef, Rect, ConnectionPosition } from '../src/overlay-types';
+
+interface Rect {
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+}
+
+type HorizontalConnectionPos = 'left' | 'center' | 'right';
+type VerticalConnectionPos = 'top' | 'center' | 'bottom';
+
+interface ConnectionPosition {
+  originX: HorizontalConnectionPos;
+  originY: VerticalConnectionPos;
+  overlayX: HorizontalConnectionPos;
+  overlayY: VerticalConnectionPos;
+}
+
+type OriginOrDomRef = Element | ComponentPublicInstance | Ref<ComponentPublicInstance | Element | undefined | null> | Rect | null;
+
 
 let overlayContianerElement: HTMLElement;
 let origin: OriginOrDomRef;
@@ -16,30 +35,29 @@ describe('overlay', () => {
   });
 
   describe('fixed overlay', () => {
-
-    it('should be create', async() => {
+    it('should be create', async () => {
       const wrapper = mount(FixedOverlay, {
         props: {
-          visible: true
-        }
+          visible: true,
+        },
       });
       await nextTick();
       let bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       expect(bgElement.getAttribute('style')).toBeNull();
-      await wrapper.setProps({visible: false});
+      await wrapper.setProps({ visible: false });
       await nextTick();
       bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       expect(bgElement.style.display).toBe('none');
       wrapper.unmount();
     });
-    it('test backgroundClass, backgroundStyle, overlayStyle', async() => {
+    it('test backgroundClass, backgroundStyle, overlayStyle', async () => {
       const wrapper = mount(FixedOverlay, {
         props: {
           visible: true,
           backgroundClass: 'bgColor',
           backgroundStyle: 'width: 100px',
-          overlayStyle: 'width: 100%'
-        }
+          overlayStyle: 'width: 100%',
+        },
       });
       await nextTick();
       const bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
@@ -48,32 +66,32 @@ describe('overlay', () => {
       expect((overlayContianerElement.querySelector('.devui-overlay') as HTMLElement).style.width).toBe('100%');
       wrapper.unmount();
     });
-    it('test hasBackdrop', async() => {
+    it('test hasBackdrop', async () => {
       const wrapper = mount(FixedOverlay, {
         props: {
           visible: true,
-          hasBackdrop: false
-        }
+          hasBackdrop: false,
+        },
       });
       await nextTick();
       let bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       expect(bgElement.classList).toContain('devui-overlay-background__disabled');
-      await wrapper.setProps({hasBackdrop: true});
+      await wrapper.setProps({ hasBackdrop: true });
       await nextTick();
       bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       expect(bgElement.classList).toContain('devui-overlay-background__color');
       wrapper.unmount();
     });
-    it('test emit update:visible and onBackdropClick', async() => {
+    it('test emit update:visible and onBackdropClick', async () => {
       const wrapper = mount(FixedOverlay, {
         props: {
-          visible: true
-        }
+          visible: true,
+        },
       });
       await nextTick();
       const bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       const fn = jest.fn();
-      await wrapper.setProps({onBackdropClick: fn});
+      await wrapper.setProps({ onBackdropClick: fn });
       bgElement.click();
       expect(wrapper.emitted('update:visible').length).toBe(1);
       expect(fn).toHaveBeenCalled();
@@ -83,21 +101,23 @@ describe('overlay', () => {
 
   describe('flexible overlay', () => {
     beforeEach(() => {
-      origin = {x:100, y: 100, width: 100, height: 100} as Rect;
+      origin = { x: 100, y: 100, width: 100, height: 100 } as Rect;
       // 解决 ResizeObserver is not defined
-      global.ResizeObserver = window.ResizeObserver || jest.fn().mockImplementation(() => ({
-        disconnect: jest.fn(),
-        observe: jest.fn(),
-        unobserve: jest.fn(),
-      }));
+      global.ResizeObserver =
+        window.ResizeObserver ||
+        jest.fn().mockImplementation(() => ({
+          disconnect: jest.fn(),
+          observe: jest.fn(),
+          unobserve: jest.fn(),
+        }));
     });
 
-    it('should be creat', async() => {
+    it('should be creat', async () => {
       const wrapper = mount(FlexibleOverlay, {
         props: {
           origin: origin,
-          visible: true
-        }
+          visible: true,
+        },
       });
       await nextTick();
       let bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
@@ -108,85 +128,85 @@ describe('overlay', () => {
       expect(bgElement.style.display).toBe('none');
       wrapper.unmount();
     });
-    it('test backgroundClass, backgroundStyle', async() => {
+    it('test backgroundClass, backgroundStyle', async () => {
       const wrapper = mount(FlexibleOverlay, {
         props: {
           origin: origin,
           visible: true,
           backgroundClass: 'bgColor',
-          backgroundStyle: 'width: 100px'
-        }
+          backgroundStyle: 'width: 100px',
+        },
       });
       await nextTick();
       const bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       expect(bgElement.classList).toContain('bgColor');
       expect(bgElement.style.width).toBe('100px');
       wrapper.unmount();
     });
-    it('test hasBackdrop', async() => {
+    it('test hasBackdrop', async () => {
       const wrapper = mount(FlexibleOverlay, {
         props: {
           origin: origin,
           visible: true,
-          hasBackdrop: false
-        }
+          hasBackdrop: false,
+        },
       });
       await nextTick();
       let bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       expect(bgElement.classList).toContain('devui-overlay-background__disabled');
-      await wrapper.setProps({hasBackdrop: true});
+      await wrapper.setProps({ hasBackdrop: true });
       await nextTick();
       bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       expect(bgElement.classList).toContain('devui-overlay-background__color');
       wrapper.unmount();
     });
-    it('test emit update:visible and onBackdropClick', async() => {
+    it('test emit update:visible and onBackdropClick', async () => {
       const wrapper = mount(FlexibleOverlay, {
         props: {
           origin: origin,
-          visible: true
-        }
+          visible: true,
+        },
       });
       await nextTick();
       const bgElement = overlayContianerElement.querySelector('.devui-overlay-background') as HTMLElement;
       const fn = jest.fn();
-      await wrapper.setProps({onBackdropClick: fn});
+      await wrapper.setProps({ onBackdropClick: fn });
       bgElement.click();
       expect(wrapper.emitted('update:visible').length).toBe(1);
       expect(fn).toHaveBeenCalled();
       wrapper.unmount();
     });
-    it('test position', async() => {
+    it('test position', async () => {
       const position = {
         originX: 'left',
         originY: 'top',
         overlayX: 'left',
-        overlayY: 'top'
+        overlayY: 'top',
       } as ConnectionPosition;
       const wrapper = mount(FlexibleOverlay, {
         props: {
           origin: origin,
           visible: true,
         },
         slots: {
-          default: '<div style="width:100px; height: 100px;"></div>'
-        }
+          default: '<div style="width:100px; height: 100px;"></div>',
+        },
       });
-      await wrapper.setProps({position: position});
+      await wrapper.setProps({ position: position });
       await nextTick();
       let overlayElement = overlayContianerElement.querySelector('.devui-overlay') as HTMLElement;
       expect(overlayElement.style.left).toBe('100px');
       expect(overlayElement.style.top).toBe('100px');
       position.originX = 'center';
       position.originY = 'center';
-      await wrapper.setProps({position: Object.assign({}, position)});
+      await wrapper.setProps({ position: Object.assign({}, position) });
       await nextTick();
       overlayElement = overlayContianerElement.querySelector('.devui-overlay') as HTMLElement;
       expect(overlayElement.style.left).toBe('150px');
       expect(overlayElement.style.top).toBe('150px');
       position.originX = 'right';
       position.originY = 'bottom';
-      await wrapper.setProps({position: Object.assign({}, position)});
+      await wrapper.setProps({ position: Object.assign({}, position) });
       await nextTick();
       overlayElement = overlayContianerElement.querySelector('.devui-overlay') as HTMLElement;
       expect(overlayElement.style.left).toBe('200px');
@@ -195,4 +215,3 @@ describe('overlay', () => {
     });
   });
 });
-

packages/devui-vue/devui/overlay/index.ts

@@ -2,7 +2,9 @@ import type { App } from 'vue';
 import { FixedOverlay } from './src/fixed-overlay';
 import { FlexibleOverlay } from './src/flexible-overlay';
 import { inBrowser } from '../shared/util/common-var';
-export * from './src/overlay-types';
+
+export * from './src/fixed-overlay/fixed-overlay-types';
+export * from './src/flexible-overlay/flexible-overlay-types';
 
 export { FlexibleOverlay, FixedOverlay };
 

packages/devui-vue/devui/overlay/src/overlay.scss → packages/devui-vue/devui/overlay/src/base-overlay.scss

@@ -1,26 +1,3 @@
-.devui-overlay-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-
-  &__color {
-    background: rgba(0, 0, 0, 0.4);
-  }
-
-  .devui-overlay {
-    position: relative;
-    z-index: 1000;
-    pointer-events: auto;
-  }
-
-  &__disabled {
-    pointer-events: none;
-  }
-}
-
 .devui-overlay-fade {
   @mixin d-overlay-fade-animation {
     animation-name: d-overlay-fade;

packages/devui-vue/devui/overlay/src/common-overlay.tsx → packages/devui-vue/devui/overlay/src/base-overlay.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, renderSlot, Teleport, Transition } from 'vue';
-import './overlay.scss';
+import './base-overlay.scss';
 
 export const CommonOverlay = defineComponent({
   setup(props, ctx) {

packages/devui-vue/devui/overlay/src/fixed-overlay/fixed-overlay-types.ts

@@ -0,0 +1,44 @@
+import type { ExtractPropTypes, PropType, StyleValue } from 'vue';
+
+export const overlayProps = {
+  visible: {
+    type: Boolean,
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false,
+  },
+  backgroundClass: {
+    type: String,
+    default: '',
+  },
+  backgroundStyle: {
+    type: [String, Object] as PropType<StyleValue>,
+  },
+  onBackdropClick: {
+    type: Function,
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true,
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true,
+  },
+} as const;
+
+export type OverlayProps = ExtractPropTypes<typeof overlayProps>;
+
+export const fixedOverlayProps = {
+  ...overlayProps,
+  overlayStyle: {
+    type: [String, Object] as PropType<StyleValue>,
+    default: undefined,
+  },
+};
+
+export type FixedOverlayProps = ExtractPropTypes<typeof fixedOverlayProps>;
+
+export const overlayEmits = ['update:visible', 'backdropClick'] as ['update:visible', 'backdropClick'];
+

packages/devui-vue/devui/overlay/src/fixed-overlay/fixed-overlay.scss

@@ -0,0 +1,22 @@
+.devui-overlay-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+
+  &__color {
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  .devui-overlay {
+    position: relative;
+    z-index: 1000;
+    pointer-events: auto;
+  }
+
+  &__disabled {
+    pointer-events: none;
+  }
+}