vue-devui 1.0.0-alpha.1 → 1.0.0-alpha.12

package/nuxt/components/inputProps.js

@@ -0,0 +1,3 @@
+import '../../input/style.css' 
+
+export  { inputProps as default } from '../../input/index.es.js'

package/nuxt/components/loadingProps.js

@@ -0,0 +1,3 @@
+import '../../loading/style.css' 
+
+export  { loadingProps as default } from '../../loading/index.es.js'

package/nuxt/components/messageProps.js

@@ -0,0 +1,3 @@
+import '../../message/style.css' 
+
+export  { messageProps as default } from '../../message/index.es.js'

package/nuxt/components/modalProps.js

@@ -0,0 +1,3 @@
+import '../../modal/style.css' 
+
+export  { modalProps as default } from '../../modal/index.es.js'

package/nuxt/components/notificationProps.js

@@ -0,0 +1,3 @@
+import '../../notification/style.css' 
+
+export  { notificationProps as default } from '../../notification/index.es.js'

package/nuxt/components/paginationProps.js

@@ -0,0 +1,3 @@
+import '../../pagination/style.css' 
+
+export  { paginationProps as default } from '../../pagination/index.es.js'

package/nuxt/components/panelProps.js

@@ -0,0 +1,3 @@
+import '../../panel/style.css' 
+
+export  { panelProps as default } from '../../panel/index.es.js'

package/nuxt/components/popoverProps.js

@@ -0,0 +1,3 @@
+import '../../popover/style.css' 
+
+export  { popoverProps as default } from '../../popover/index.es.js'

package/nuxt/components/progressProps.js

@@ -0,0 +1,3 @@
+import '../../progress/style.css' 
+
+export  { progressProps as default } from '../../progress/index.es.js'

package/nuxt/components/rateProps.js

@@ -0,0 +1,3 @@
+import '../../rate/style.css' 
+
+export  { rateProps as default } from '../../rate/index.es.js'

package/nuxt/components/resultProps.js

@@ -0,0 +1,3 @@
+import '../../result/style.css' 
+
+export  { resultProps as default } from '../../result/index.es.js'

package/nuxt/components/roundInjectionKey.js

@@ -0,0 +1,3 @@
+import '../../skeleton/style.css' 
+
+export  { roundInjectionKey as default } from '../../skeleton/index.es.js'

package/nuxt/components/rowProps.js

@@ -0,0 +1,3 @@
+import '../../grid/style.css' 
+
+export  { rowProps as default } from '../../grid/index.es.js'

package/nuxt/components/screenSizes.js

@@ -0,0 +1,3 @@
+import '../../grid/style.css' 
+
+export  { screenSizes as default } from '../../grid/index.es.js'

package/nuxt/components/searchProps.js

@@ -0,0 +1,3 @@
+import '../../search/style.css' 
+
+export  { searchProps as default } from '../../search/index.es.js'

package/nuxt/components/skeletonItemProps.js

@@ -0,0 +1,3 @@
+import '../../skeleton/style.css' 
+
+export  { skeletonItemProps as default } from '../../skeleton/index.es.js'

package/nuxt/components/skeletonProps.js

@@ -0,0 +1,3 @@
+import '../../skeleton/style.css' 
+
+export  { skeletonProps as default } from '../../skeleton/index.es.js'

package/nuxt/components/sliderProps.js

@@ -0,0 +1,3 @@
+import '../../slider/style.css' 
+
+export  { sliderProps as default } from '../../slider/index.es.js'

package/nuxt/components/splitterProps.js

@@ -0,0 +1,3 @@
+import '../../splitter/style.css' 
+
+export  { splitterProps as default } from '../../splitter/index.es.js'

package/nuxt/components/statisticProps.js

@@ -0,0 +1,3 @@
+import '../../statistic/style.css' 
+
+export  { statisticProps as default } from '../../statistic/index.es.js'

package/nuxt/components/stepProps.js

@@ -0,0 +1,3 @@
+import '../../steps/style.css' 
+
+export  { stepProps as default } from '../../steps/index.es.js'

package/nuxt/components/stepsProps.js

@@ -0,0 +1,3 @@
+import '../../steps/style.css' 
+
+export  { stepsProps as default } from '../../steps/index.es.js'

package/nuxt/components/svgIconProps.js

@@ -0,0 +1,3 @@
+import '../../icon/style.css' 
+
+export  { svgIconProps as default } from '../../icon/index.es.js'

package/nuxt/components/switchProps.js

@@ -0,0 +1,3 @@
+import '../../switch/style.css' 
+
+export  { switchProps as default } from '../../switch/index.es.js'

package/nuxt/components/tableProps.js

@@ -0,0 +1,3 @@
+import '../../table/style.css' 
+
+export  { tableProps as default } from '../../table/index.es.js'

package/nuxt/components/tabsProps.js

@@ -0,0 +1,3 @@
+import '../../tabs/style.css' 
+
+export  { tabsProps as default } from '../../tabs/index.es.js'

package/nuxt/components/tagProps.js

@@ -0,0 +1,3 @@
+import '../../tag/style.css' 
+
+export  { tagProps as default } from '../../tag/index.es.js'

package/nuxt/components/textareaProps.js

@@ -0,0 +1,3 @@
+import '../../textarea/style.css' 
+
+export  { textareaProps as default } from '../../textarea/index.es.js'

package/nuxt/components/timeAxisProps.js

@@ -0,0 +1,3 @@
+import '../../timeline/style.css' 
+
+export  { timeAxisProps as default } from '../../timeline/index.es.js'

package/nuxt/components/timerPickerPanelProps.js

@@ -0,0 +1,3 @@
+import '../../date-picker-pro/style.css' 
+
+export  { timerPickerPanelProps as default } from '../../date-picker-pro/index.es.js'

package/nuxt/components/tooltipProps.js

@@ -0,0 +1,3 @@
+import '../../tooltip/style.css' 
+
+export  { tooltipProps as default } from '../../tooltip/index.es.js'

package/nuxt/components/treeProps.js

@@ -0,0 +1,3 @@
+import '../../tree/style.css' 
+
+export  { treeProps as default } from '../../tree/index.es.js'

package/nuxt/components/uploadProps.js

@@ -0,0 +1,3 @@
+import '../../upload/style.css' 
+
+export  { uploadProps as default } from '../../upload/index.es.js'

package/nuxt/index.js

@@ -0,0 +1,13 @@
+import { join } from 'pathe'
+  import { defineNuxtModule } from '@nuxt/kit'
+  
+  export default defineNuxtModule({
+    hooks: {
+      'components:dirs'(dirs) {
+        dirs.push({
+          path: join(__dirname,'./components'),
+          prefix:'D'
+        })
+      }
+    }
+  })

package/overlay/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/overlay/index.es.js

@@ -1 +1,293 @@
-var e=Object.defineProperty,t=Object.defineProperties,n=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,i=(t,n,o)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[n]=o,a=(e,t)=>{for(var n in t||(t={}))l.call(t,n)&&i(e,n,t[n]);if(o)for(var n of o(t))r.call(t,n)&&i(e,n,t[n]);return e};"undefined"!=typeof require&&require;import{defineComponent as s,createVNode as c,Teleport as d,Transition as u,renderSlot as p,isVNode as f,computed as v,watch as y,onUnmounted as b,ref as g,withDirectives as h,vShow as m,reactive as w,getCurrentInstance as k,onMounted as C,nextTick as O,toRef as B,onBeforeUnmount as x,isRef as E}from"vue";const j=s({setup:(e,t)=>()=>{let e;return c(d,{to:"#d-overlay-anchor"},{default:()=>{return[c(u,{name:"d-overlay-fade"},(n=e=p(t.slots,"default"),"function"==typeof n||"[object Object]"===Object.prototype.toString.call(n)&&!f(n)?e:{default:()=>[e]}))];var n}})}}),L={visible:{type:Boolean},"onUpdate:visible":{type:Function},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},hasBackdrop:{type:Boolean,default:!0},backdropClick:{type:Function},backdropClose:{type:Boolean,default:!0}};function X(e){const t=v((()=>e.hasBackdrop?["d-overlay-container",e.backgroundClass]:["d-overlay-container","d-overlay-container__disabled"])),n=v((()=>e.hasBackdrop?["d-overlay-panel"]:["d-overlay-panel","d-overlay-container__disabled"])),o=document.body,l=o.style.overflow;return y([()=>e.visible,()=>e.backgroundBlock],(([e,t])=>{t&&(o.style.overflow=e?"hidden":l)})),b((()=>{o.style.overflow=l})),{containerClass:t,panelClass:n,handleBackdropClick:t=>{var n,o;t.preventDefault(),null==(n=e.backdropClick)||n.call(e),e.backdropClose&&(null==(o=e["onUpdate:visible"])||o.call(e,!1))}}}const Y=s({name:"DFixedOverlay",props:(F=a({},L),P={overlayStyle:{type:Object,default:void 0}},t(F,n(P))),setup(e,t){const{containerClass:n,panelClass:o,handleBackdropClick:l}=X(e),r=g(null),i=e=>e.cancelBubble=!0;return()=>c(j,null,{default:()=>[h(c("div",{class:n.value,onClick:l},[c("div",{class:o.value},[c("div",{ref:r,class:"d-overlay",style:e.overlayStyle,onClick:i},[p(t.slots,"default")])])]),[[m,e.visible]])]})}});var F,P;const R=s({name:"DFlexibleOverlay",props:a({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},L),emits:["onUpdate:visible"],setup(e,t){const n=g(null),o=w({position:"absolute"}),l=k();C((async()=>{await O();const t=n.value;if(!t)return;const r=function(e){if(e instanceof Element)return e;if(E(e))return function(e){if(e instanceof Element)return e;if(e&&"object"==typeof e&&e.$el instanceof Element)return e.$el;return null}(e.value);return e}(e.origin);if(!r)return;const i=t=>{const n=function(e,t,n){const o=function(e,t){let n,o;if("center"==t.originX)n=e.left+e.width/2;else{const o=e.left,l=e.right;n="left"==t.originX?o:l}o="center"==t.originY?e.top+e.height/2:"top"==t.originY?e.top:e.bottom;return{x:n,y:o}}(function(e){if(e instanceof Element)return e.getBoundingClientRect();const t=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+t,height:n,width:t}}(n),e);let l;l=t instanceof HTMLElement?t.getBoundingClientRect():t;return function(e,t,n){let o;const{width:l,height:r}=t;o="center"==n.overlayX?e.x-l/2:"left"==n.overlayX?e.x:e.x-l;let i;i="center"==n.overlayY?e.y-r/2:"top"==n.overlayY?e.y:e.y-r;return{x:o,y:i}}(o,l,e)}(e.position,t,r);o.left=`${n.x}px`,o.top=`${n.y}px`},a=()=>i(t.getBoundingClientRect());y(B(e,"visible"),((e,t,n)=>{var o;e?(o=a,window.addEventListener("scroll",o,!0),window.addEventListener("resize",o),window.addEventListener("orientationchange",o)):S(a),n((()=>{S(a)}))})),y(B(e,"position"),(()=>{a()}));const s=new ResizeObserver((e=>{i(e[0].contentRect)}));if(s.observe(t),x((()=>{s.disconnect()}),l),r instanceof Element){const e=new MutationObserver(a);e.observe(r,{attributeFilter:["style"]}),x((()=>{e.disconnect()}),l)}}),l);const{containerClass:r,panelClass:i,handleBackdropClick:a}=X(e);return()=>c(j,null,{default:()=>[h(c("div",{class:r},[c("div",{class:i,style:{position:"fixed",top:"0",left:"0",width:"100vw",height:"100vh",display:"flex"},onClick:a},[c("div",{ref:n,class:"d-overlay",style:o,onClick:e=>e.cancelBubble=!0},[p(t.slots,"default")])])]),[[m,e.visible]])]})}});function S(e){window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}R.install=function(e){e.component(R.name,R)},Y.install=function(e){e.component(Y.name,Y)};var z={title:"Overlay 遮罩层",category:"通用",install(e){if(e.use(Y),e.use(R),!document.getElementById("d-overlay-anchor")){const e=document.createElement("div");e.setAttribute("id","d-overlay-anchor"),e.style.position="fixed",e.style.left="0",e.style.top="0",e.style.zIndex="1000",document.body.appendChild(e)}}};export{Y as FixedOverlay,R as FlexibleOverlay,z as default};
+import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, nextTick, unref } from "vue";
+import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
+const fixedOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  }
+};
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
+    };
+  }
+  return;
+}
+function useFixedOverlay(props, ctx) {
+  let lockScrollCb;
+  const onClick = (event) => {
+    event.preventDefault();
+    ctx.emit("click", event);
+    if (props.closeOnClickOverlay) {
+      ctx.emit("update:modelValue", false);
+    }
+  };
+  const removeBodyAdditions = () => {
+    lockScrollCb == null ? void 0 : lockScrollCb();
+  };
+  watch(() => props.modelValue, (val) => {
+    if (val) {
+      props.lockScroll && (lockScrollCb = lockScroll());
+    } else {
+      removeBodyAdditions();
+    }
+  });
+  onUnmounted(removeBodyAdditions);
+  return { onClick };
+}
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var fixedOverlay = "";
+const FixedOverlay = defineComponent({
+  name: "DFixedOverlay",
+  inheritAttrs: false,
+  props: fixedOverlayProps,
+  emits: ["update:modelValue", "click"],
+  setup(props, ctx) {
+    const {
+      modelValue
+    } = toRefs(props);
+    const ns = useNamespace("fixed-overlay");
+    const {
+      onClick
+    } = useFixedOverlay(props, ctx);
+    return () => createVNode(Transition, {
+      "name": ns.m("fade")
+    }, {
+      default: () => {
+        var _a, _b;
+        return [modelValue.value && createVNode("div", mergeProps({
+          "class": ns.b()
+        }, ctx.attrs, {
+          "onClick": onClick
+        }), [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])];
+      }
+    });
+  }
+});
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  shiftOffset: {
+    type: Number
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
+  }
+};
+function getScrollParent(element) {
+  const overflowRegex = /(auto|scroll|hidden)/;
+  for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
+    const style = window.getComputedStyle(parent);
+    if (overflowRegex.test(style.overflow + style.overflowX + style.overflowY)) {
+      return parent;
+    }
+  }
+  return window;
+}
+function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
+  let { x, y } = point;
+  if (!isArrowCenter) {
+    const { width, height } = originRect;
+    if (x && placement.includes("start")) {
+      x = 12;
+    }
+    if (x && placement.includes("end")) {
+      x = Math.round(width - 24);
+    }
+    if (y && placement.includes("start")) {
+      y = 10;
+    }
+    if (y && placement.includes("end")) {
+      y = height - 14;
+    }
+  }
+  return { x, y };
+}
+function useOverlay(props, emit) {
+  const overlayRef = ref();
+  const arrowRef = ref();
+  let originParent = null;
+  const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
+    const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
+    const staticSide = {
+      top: "bottom",
+      right: "left",
+      bottom: "top",
+      left: "right"
+    }[placement.split("-")[0]];
+    Object.assign(arrowEl.style, {
+      left: x ? `${x}px` : "",
+      top: y ? `${y}px` : "",
+      right: "",
+      bottom: "",
+      [staticSide]: "-4px"
+    });
+  };
+  const updatePosition = async () => {
+    const hostEl = props.origin;
+    const overlayEl = unref(overlayRef.value);
+    const arrowEl = unref(arrowRef.value);
+    const middleware = [
+      offset(props.offset),
+      autoPlacement({
+        alignment: props.align,
+        allowedPlacements: props.position
+      })
+    ];
+    props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
+    const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
+      strategy: "fixed",
+      middleware
+    });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
+    }
+    emit("positionChange", placement);
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
+    props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
+  };
+  watch(() => props.modelValue, () => {
+    if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
+      nextTick(updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
+      originParent !== window && window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+    } else {
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+      originParent !== window && window.removeEventListener("scroll", updatePosition);
+      window.removeEventListener("resize", updatePosition);
+    }
+  });
+  onUnmounted(() => {
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
+    originParent !== window && window.removeEventListener("scroll", updatePosition);
+    window.removeEventListener("resize", updatePosition);
+  });
+  return { arrowRef, overlayRef, updatePosition };
+}
+var flexibleOverlay = "";
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  inheritAttrs: false,
+  props: flexibleOverlayProps,
+  emits: ["update:modelValue", "positionChange"],
+  setup(props, {
+    slots,
+    attrs,
+    emit,
+    expose
+  }) {
+    const ns = useNamespace("flexible-overlay");
+    const {
+      arrowRef,
+      overlayRef,
+      updatePosition
+    } = useOverlay(props, emit);
+    expose({
+      updatePosition
+    });
+    return () => {
+      var _a;
+      return props.modelValue && createVNode("div", mergeProps({
+        "ref": overlayRef,
+        "class": ns.b()
+      }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots), props.showArrow && createVNode("div", {
+        "ref": arrowRef,
+        "class": ns.e("arrow")
+      }, null)]);
+    };
+  }
+});
+const inBrowser = typeof window !== "undefined";
+var index = {
+  title: "Overlay \u906E\u7F69\u5C42",
+  category: "\u901A\u7528",
+  status: "100%",
+  install(app) {
+    app.component(FixedOverlay.name, FixedOverlay);
+    app.component(FlexibleOverlay.name, FlexibleOverlay);
+    if (inBrowser && !document.getElementById("d-overlay-anchor")) {
+      const overlayAnchor = document.createElement("div");
+      overlayAnchor.setAttribute("id", "d-overlay-anchor");
+      overlayAnchor.style.position = "fixed";
+      overlayAnchor.style.left = "0";
+      overlayAnchor.style.top = "0";
+      overlayAnchor.style.zIndex = "1000";
+      document.body.appendChild(overlayAnchor);
+    }
+  }
+};
+export { FixedOverlay, FlexibleOverlay, index as default, fixedOverlayProps, flexibleOverlayProps };

package/overlay/index.umd.js

@@ -1 +1 @@
-var __defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,o)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,__spreadValues=(e,t)=>{for(var o in t||(t={}))__hasOwnProp.call(t,o)&&__defNormalProp(e,o,t[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(t))__propIsEnum.call(t,o)&&__defNormalProp(e,o,t[o]);return e},__spreadProps=(e,t)=>__defProps(e,__getOwnPropDescs(t)),__require="undefined"!=typeof require?require:e=>{throw new Error('Dynamic require of "'+e+'" is not supported')};!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,t){"use strict";const o=t.defineComponent({setup:(e,o)=>()=>{let e;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>{return[t.createVNode(t.Transition,{name:"d-overlay-fade"},(n=e=t.renderSlot(o.slots,"default"),"function"==typeof n||"[object Object]"===Object.prototype.toString.call(n)&&!t.isVNode(n)?e:{default:()=>[e]}))];var n}})}}),n={visible:{type:Boolean},"onUpdate:visible":{type:Function},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},hasBackdrop:{type:Boolean,default:!0},backdropClick:{type:Function},backdropClose:{type:Boolean,default:!0}};function r(e){const o=t.computed((()=>e.hasBackdrop?["d-overlay-container",e.backgroundClass]:["d-overlay-container","d-overlay-container__disabled"])),n=t.computed((()=>e.hasBackdrop?["d-overlay-panel"]:["d-overlay-panel","d-overlay-container__disabled"])),r=document.body,l=r.style.overflow;return t.watch([()=>e.visible,()=>e.backgroundBlock],(([e,t])=>{t&&(r.style.overflow=e?"hidden":l)})),t.onUnmounted((()=>{r.style.overflow=l})),{containerClass:o,panelClass:n,handleBackdropClick:t=>{var o,n;t.preventDefault(),null==(o=e.backdropClick)||o.call(e),e.backdropClose&&(null==(n=e["onUpdate:visible"])||n.call(e,!1))}}}const l=t.defineComponent({name:"DFixedOverlay",props:__spreadProps(__spreadValues({},n),{overlayStyle:{type:Object,default:void 0}}),setup(e,n){const{containerClass:l,panelClass:i,handleBackdropClick:a}=r(e),s=t.ref(null),c=e=>e.cancelBubble=!0;return()=>t.createVNode(o,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:l.value,onClick:a},[t.createVNode("div",{class:i.value},[t.createVNode("div",{ref:s,class:"d-overlay",style:e.overlayStyle,onClick:c},[t.renderSlot(n.slots,"default")])])]),[[t.vShow,e.visible]])]})}}),i=t.defineComponent({name:"DFlexibleOverlay",props:__spreadValues({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},n),emits:["onUpdate:visible"],setup(e,n){const l=t.ref(null),i=t.reactive({position:"absolute"}),s=t.getCurrentInstance();t.onMounted((async()=>{await t.nextTick();const o=l.value;if(!o)return;const n=function(e){if(e instanceof Element)return e;if(t.isRef(e))return function(e){if(e instanceof Element)return e;if(e&&"object"==typeof e&&e.$el instanceof Element)return e.$el;return null}(e.value);return e}(e.origin);if(!n)return;const r=t=>{const o=function(e,t,o){const n=function(e,t){let o,n;if("center"==t.originX)o=e.left+e.width/2;else{const n=e.left,r=e.right;o="left"==t.originX?n:r}n="center"==t.originY?e.top+e.height/2:"top"==t.originY?e.top:e.bottom;return{x:o,y:n}}(function(e){if(e instanceof Element)return e.getBoundingClientRect();const t=e.width||0,o=e.height||0;return{top:e.y,bottom:e.y+o,left:e.x,right:e.x+t,height:o,width:t}}(o),e);let r;r=t instanceof HTMLElement?t.getBoundingClientRect():t;return function(e,t,o){let n;const{width:r,height:l}=t;n="center"==o.overlayX?e.x-r/2:"left"==o.overlayX?e.x:e.x-r;let i;i="center"==o.overlayY?e.y-l/2:"top"==o.overlayY?e.y:e.y-l;return{x:n,y:i}}(n,r,e)}(e.position,t,n);i.left=`${o.x}px`,i.top=`${o.y}px`},c=()=>r(o.getBoundingClientRect());t.watch(t.toRef(e,"visible"),((e,t,o)=>{var n;e?(n=c,window.addEventListener("scroll",n,!0),window.addEventListener("resize",n),window.addEventListener("orientationchange",n)):a(c),o((()=>{a(c)}))})),t.watch(t.toRef(e,"position"),(()=>{c()}));const d=new ResizeObserver((e=>{r(e[0].contentRect)}));if(d.observe(o),t.onBeforeUnmount((()=>{d.disconnect()}),s),n instanceof Element){const e=new MutationObserver(c);e.observe(n,{attributeFilter:["style"]}),t.onBeforeUnmount((()=>{e.disconnect()}),s)}}),s);const{containerClass:c,panelClass:d,handleBackdropClick:p}=r(e);return()=>t.createVNode(o,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:c},[t.createVNode("div",{class:d,style:{position:"fixed",top:"0",left:"0",width:"100vw",height:"100vh",display:"flex"},onClick:p},[t.createVNode("div",{ref:l,class:"d-overlay",style:i,onClick:e=>e.cancelBubble=!0},[t.renderSlot(n.slots,"default")])])]),[[t.vShow,e.visible]])]})}});function a(e){window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}i.install=function(e){e.component(i.name,i)},l.install=function(e){e.component(l.name,l)};var s={title:"Overlay 遮罩层",category:"通用",install(e){if(e.use(l),e.use(i),!document.getElementById("d-overlay-anchor")){const e=document.createElement("div");e.setAttribute("id","d-overlay-anchor"),e.style.position="fixed",e.style.left="0",e.style.top="0",e.style.zIndex="1000",document.body.appendChild(e)}}};e.FixedOverlay=l,e.FlexibleOverlay=i,e.default=s,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+(function(a,l){typeof exports=="object"&&typeof module!="undefined"?l(exports,require("vue"),require("@floating-ui/dom")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom"],l):(a=typeof globalThis!="undefined"?globalThis:a||self,l(a.index={},a.Vue,a.dom))})(this,function(a,l,f){"use strict";const b={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function P(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const e=document.documentElement.scrollTop,t=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${e}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{t?document.documentElement.setAttribute("style",t):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=e}}}function k(e,t){let o;const i=s=>{s.preventDefault(),t.emit("click",s),e.closeOnClickOverlay&&t.emit("update:modelValue",!1)},n=()=>{o==null||o()};return l.watch(()=>e.modelValue,s=>{s?e.lockScroll&&(o=P()):n()}),l.onUnmounted(n),{onClick:i}}function y(e,t,o){let i=e;return t&&(i+=`__${t}`),o&&(i+=`--${o}`),i}function g(e,t=!1){const o=t?`.devui-${e}`:`devui-${e}`;return{b:()=>y(o),e:d=>d?y(o,d):"",m:d=>d?y(o,"",d):"",em:(d,c)=>d&&c?y(o,d,c):""}}var j="";const O=l.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:b,emits:["update:modelValue","click"],setup(e,t){const{modelValue:o}=l.toRefs(e),i=g("fixed-overlay"),{onClick:n}=k(e,t);return()=>l.createVNode(l.Transition,{name:i.m("fade")},{default:()=>{var s,r;return[o.value&&l.createVNode("div",l.mergeProps({class:i.b()},t.attrs,{onClick:n}),[(r=(s=t.slots).default)==null?void 0:r.call(s)])]}})}}),A={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},offset:{type:[Number,Object],default:8},shiftOffset:{type:Number},align:{type:String,default:null},showArrow:{type:Boolean,default:!1},isArrowCenter:{type:Boolean,default:!0}};function L(e){const t=/(auto|scroll|hidden)/;for(let o=e;o=o.parentElement;o.parentElement!==document.body){const i=window.getComputedStyle(o);if(t.test(i.overflow+i.overflowX+i.overflowY))return o}return window}function $(e,t,o,i){let{x:n,y:s}=t;if(!e){const{width:r,height:d}=i;n&&o.includes("start")&&(n=12),n&&o.includes("end")&&(n=Math.round(r-24)),s&&o.includes("start")&&(s=10),s&&o.includes("end")&&(s=d-14)}return{x:n,y:s}}function F(e,t){const o=l.ref(),i=l.ref();let n=null;const s=(d,c,u,m)=>{const{x:w,y:v}=$(e.isArrowCenter,u,c,m.getBoundingClientRect()),h={top:"bottom",right:"left",bottom:"top",left:"right"}[c.split("-")[0]];Object.assign(d.style,{left:w?`${w}px`:"",top:v?`${v}px`:"",right:"",bottom:"",[h]:"-4px"})},r=async()=>{const d=e.origin,c=l.unref(o.value),u=l.unref(i.value),m=[f.offset(e.offset),f.autoPlacement({alignment:e.align,allowedPlacements:e.position})];e.showArrow&&m.push(f.arrow({element:u})),e.shiftOffset!==void 0&&m.push(f.shift());const{x:w,y:v,placement:h,middlewareData:V}=await f.computePosition(d,c,{strategy:"fixed",middleware:m});let p=w,x=v;if(e.shiftOffset!==void 0){const{x:C,y:B}=V.shift;C<0&&(p-=e.shiftOffset),C>0&&(p+=e.shiftOffset),B<0&&(x-=e.shiftOffset),B>0&&(x+=e.shiftOffset)}t("positionChange",h),Object.assign(c.style,{top:`${x}px`,left:`${p}px`}),e.showArrow&&s(u,h,V.arrow,c)};return l.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(n=L(e.origin),l.nextTick(r),n==null||n.addEventListener("scroll",r),n!==window&&window.addEventListener("scroll",r),window.addEventListener("resize",r)):(n==null||n.removeEventListener("scroll",r),n!==window&&window.removeEventListener("scroll",r),window.removeEventListener("resize",r))}),l.onUnmounted(()=>{n==null||n.removeEventListener("scroll",r),n!==window&&window.removeEventListener("scroll",r),window.removeEventListener("resize",r)}),{arrowRef:i,overlayRef:o,updatePosition:r}}var N="";const E=l.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:A,emits:["update:modelValue","positionChange"],setup(e,{slots:t,attrs:o,emit:i,expose:n}){const s=g("flexible-overlay"),{arrowRef:r,overlayRef:d,updatePosition:c}=F(e,i);return n({updatePosition:c}),()=>{var u;return e.modelValue&&l.createVNode("div",l.mergeProps({ref:d,class:s.b()},o),[(u=t.default)==null?void 0:u.call(t),e.showArrow&&l.createVNode("div",{ref:r,class:s.e("arrow")},null)])}}}),S=typeof window!="undefined";var T={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.component(O.name,O),e.component(E.name,E),S&&!document.getElementById("d-overlay-anchor")){const t=document.createElement("div");t.setAttribute("id","d-overlay-anchor"),t.style.position="fixed",t.style.left="0",t.style.top="0",t.style.zIndex="1000",document.body.appendChild(t)}}};a.FixedOverlay=O,a.FlexibleOverlay=E,a.default=T,a.fixedOverlayProps=b,a.flexibleOverlayProps=A,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/overlay/style.css

@@ -1 +1 @@
-.d-overlay-container{position:fixed;top:0;left:0;height:100%;width:100%;display:flex}.d-overlay-container__disabled{pointer-events:none}.d-overlay-container__background{background:rgba(0,0,0,.4)}.d-overlay-container .d-overlay-panel{position:relative;z-index:1000}.d-overlay-container .d-overlay{pointer-events:auto}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.d-overlay-fade-enter{opacity:0}.d-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.d-overlay-fade-leave{opacity:1}.d-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}
+.devui-fixed-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1050}.devui-fixed-overlay--fade-enter-active,.devui-fixed-overlay--fade-leave-active{transition:opacity .1s cubic-bezier(0,0,1,1)}.devui-fixed-overlay--fade-enter-from,.devui-fixed-overlay--fade-leave-to{opacity:0}.devui-flexible-overlay{position:fixed;border-radius:var(--devui-border-radius, 4px);background-color:var(--devui-connected-overlay-bg, #ffffff);box-shadow:var(--devui-shadow-length-connected-overlay, 0 4px 8px 0) var(--devui-shadow, rgba(37, 43, 58, .2));z-index:1000}.devui-flexible-overlay__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background-color:inherit}