refactor(Overlay): 重构flexible-overlay

packages/devui-vue/devui-cli/commands/build.js

@@ -16,7 +16,7 @@ const baseConfig = defineConfig({
 });
 
 const rollupOptions = {
-  external: ['vue', 'vue-router', '@vueuse/core'],
+  external: ['vue', 'vue-router', '@vueuse/core', '@floating-ui/dom'],
   output: {
     globals: {
       vue: 'Vue',

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

@@ -1,17 +1,14 @@
-import type { App } from 'vue'
-import Badge from './src/badge'
+import type { App } from 'vue';
+import Badge from './src/badge';
+export * from './src/badge-types';
 
-Badge.install = function (app: App) {
-  app.component(Badge.name, Badge)
-}
-
-export { Badge }
+export { Badge };
 
 export default {
   title: 'Badge 徽标',
   category: '数据展示',
   status: '100%',
   install(app: App): void {
-    app.use(Badge as any)
-  }
-}
+    app.component(Badge.name, Badge);
+  },
+};

packages/devui-vue/devui/badge/src/badge-types.ts

@@ -1,41 +1,41 @@
-import type { PropType, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes } from 'vue';
 
-type BadgeStatusType = PropType<'danger' | 'warning' | 'waiting' | 'success' | 'info'>
-type BadgePositionType = PropType<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>
+export type BadgeStatusType = 'danger' | 'warning' | 'waiting' | 'success' | 'info';
+export type BadgePositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
-const badgeStatusType = ['danger', 'warning', 'waiting', 'success', 'info']
-const badgePositionType = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
+const badgeStatusType = ['danger', 'warning', 'waiting', 'success', 'info'];
+const badgePositionType = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 
 export const badgeProps = {
   count: {
-    type: [Number, String]
+    type: [Number, String],
   },
   maxCount: {
     type: Number,
-    default: 99
+    default: 99,
   },
   showDot: {
     type: Boolean,
-    default: false
+    default: false,
   },
   status: {
-    type: String as BadgeStatusType,
-    validator: (val: string) => badgeStatusType.includes(val)
+    type: String as PropType<BadgeStatusType>,
+    validator: (val: string): boolean => badgeStatusType.includes(val),
   },
-  badgePos: {
-    type: String as BadgePositionType,
+  position: {
+    type: String as PropType<BadgePositionType>,
     default: 'top-right',
-    validator: (val: string) => badgePositionType.includes(val)
+    validator: (val: string): boolean => badgePositionType.includes(val),
   },
-  offsetXY: {
-    type: Array
+  offset: {
+    type: Array as PropType<Array<number>>,
   },
   bgColor: {
-    type: String
+    type: String,
   },
   textColor: {
-    type: String
-  }
-}
+    type: String,
+  },
+};
 
-export type BadgeProps = ExtractPropTypes<typeof badgeProps>
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>;

packages/devui-vue/devui/badge/src/badge.tsx

@@ -1,65 +1,60 @@
-import './badge.scss'
-
-import { defineComponent, computed } from 'vue'
-import { badgeProps, BadgeProps } from './badge-types'
+import { defineComponent, computed } from 'vue';
+import { badgeProps, BadgeProps } from './badge-types';
+import './badge.scss';
 
 export default defineComponent({
   name: 'DBadge',
   props: badgeProps,
-  emits: [],
   setup(props: BadgeProps, ctx) {
     const className = computed(() => {
-      const base = 'devui-badge-content'
+      const base = 'devui-badge-content';
       return [
         base,
         props.showDot ? `${base}-dot` : `${base}-count`,
         props.status && `${base}-${props.status}`,
-        ctx.slots.default && props.badgePos && `${base}-${props.badgePos}`,
-        ctx.slots.default && `${base}-fixed`
-      ].join(' ')
-    })
+        ctx.slots.default && props.position && `${base}-${props.position}`,
+        ctx.slots.default && `${base}-fixed`,
+      ].join(' ');
+    });
 
     const style = computed(() => {
       const styleMap = {
         bgColor: 'background',
-        textColor: 'color'
-      }
-      const ret = Object.keys(styleMap).reduce((ret, key) => {
-        if (props[key]) {
-          ret[styleMap[key]] = props[key]
-        }
-        return ret
-      }, {})
-      // 偏移量
-      if (ctx.slots.default && props.offsetXY) {
-        const [x, y]: Array<number> = props.offsetXY as Array<number>
-        const [yName, xName] = (props.badgePos as string).split('-')
-        ret[yName] = y + 'px'
-        ret[xName] = x + 'px'
+        textColor: 'color',
+      };
+      const ret = Object.keys(styleMap).reduce((result, key) => {
+        props[key] && (result[styleMap[key]] = props[key]);
+        return result;
+      }, {});
+      if (ctx.slots.default && props.offset) {
+        const [x, y]: Array<number> = props.offset;
+        const [yName, xName] = props.position.split('-');
+        ret[yName] = y + 'px';
+        ret[xName] = x + 'px';
       }
 
-      return ret
-    })
+      return ret;
+    });
 
     const text = computed(() => {
       if (props.showDot) {
-        return
+        return;
       }
       if (typeof props.count === 'number' && typeof props.maxCount === 'number') {
-        return props.count > props.maxCount ? `${props.maxCount}+` : props.count
+        return props.count > props.maxCount ? `${props.maxCount}+` : props.count;
       }
-      return props.count
-    })
+      return props.count;
+    });
 
     return () => {
       return (
-        <div class="devui-badge">
+        <div class='devui-badge'>
           {ctx.slots.default?.()}
           <div class={className.value} style={style.value}>
             {text.value}
           </div>
         </div>
-      )
-    }
-  }
-})
+      );
+    };
+  },
+});

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

@@ -1,25 +1,18 @@
-import type { App } from 'vue'
-import {FixedOverlay} from './src/fixed-overlay';
-import {FlexibleOverlay } from './src/flexible-overlay';
-import {inBrowser} from '../shared/util/common-var';
+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';
 
-FlexibleOverlay.install = function(app: App) {
-  app.component(FlexibleOverlay.name, FlexibleOverlay);
-}
-
-FixedOverlay.install = function(app: App) {
-  app.component(FixedOverlay.name, FixedOverlay);
-}
-
-export { FlexibleOverlay, FixedOverlay }
+export { FlexibleOverlay, FixedOverlay };
 
 export default {
   title: 'Overlay 遮罩层',
   category: '通用',
   status: '100%',
   install(app: App): void {
-    app.use(FixedOverlay as any);
-    app.use(FlexibleOverlay as any);
+    app.component(FixedOverlay.name, FixedOverlay);
+    app.component(FlexibleOverlay.name, FlexibleOverlay);
 
     if (inBrowser && !document.getElementById('d-overlay-anchor')) {
       const overlayAnchor = document.createElement('div');
@@ -28,7 +21,7 @@ export default {
       overlayAnchor.style.left = '0';
       overlayAnchor.style.top = '0';
       overlayAnchor.style.zIndex = '1000';
-      document.body.appendChild(overlayAnchor);  
+      document.body.appendChild(overlayAnchor);
     }
-  }
-}
+  },
+};

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

@@ -9,29 +9,17 @@ export const FixedOverlay = defineComponent({
   props: fixedOverlayProps,
   emits: overlayEmits,
   setup(props: FixedOverlayProps, ctx) {
-    const {
-      backgroundClass,
-      overlayClass,
-      handleBackdropClick,
-      handleOverlayBubbleCancel
-    } = useOverlayLogic(props, ctx);
+    const { backgroundClass, overlayClass, handleBackdropClick, handleOverlayBubbleCancel } = useOverlayLogic(props, ctx);
 
     return () => (
       <CommonOverlay>
-        <div
-          v-show={props.visible}
-          class={backgroundClass.value}
-          style={props.backgroundStyle}
-          onClick={handleBackdropClick}
-        >
-          <div
-            class={overlayClass.value}
-            style={props.overlayStyle}
-            onClick={handleOverlayBubbleCancel}
-          >
-            {renderSlot(ctx.slots, 'default')}
+        {props.visible && (
+          <div class={backgroundClass.value} style={props.backgroundStyle} onClick={handleBackdropClick}>
+            <div class={overlayClass.value} style={props.overlayStyle} onClick={handleOverlayBubbleCancel}>
+              {renderSlot(ctx.slots, 'default')}
+            </div>
           </div>
-        </div>
+        )}
       </CommonOverlay>
     );
   },

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

@@ -0,0 +1,17 @@
+@import '../../styles-var/devui-var.scss';
+
+.devui-flexible-overlay {
+  position: fixed;
+  border-radius: $devui-border-radius;
+  background-color: $devui-connected-overlay-bg;
+  box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
+  z-index: 1000;
+
+  &-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    transform: rotate(45deg);
+    background-color: inherit;
+  }
+}