vue-devui 1.0.0-alpha.4 → 1.0.0-beta.10

package/overlay/index.es.js

@@ -1 +1,368 @@
-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 u,Transition as d,renderSlot as y,isVNode as v,computed as p,watch as f,onUnmounted as b,withDirectives as g,vShow as m,ref as k,reactive as w,getCurrentInstance as h,onMounted as C,nextTick as O,toRef as x,onBeforeUnmount as B,isRef as E}from"vue";const j=s({setup:(e,t)=>()=>{let e;return c(u,{to:"#d-overlay-anchor"},{default:()=>{return[c(d,{name:"devui-overlay-fade"},(n=e=y(t.slots,"default"),"function"==typeof n||"[object Object]"===Object.prototype.toString.call(n)&&!v(n)?e:{default:()=>[e]}))];var n}})}}),S={visible:{type:Boolean},"onUpdate:visible":{type:Function},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},backdropClick:{type:Function},backdropClose:{type:Boolean,default:!0}};function Y(e){const t=p((()=>["devui-overlay-background","devui-overlay-background__color",e.backgroundClass])),n=p((()=>"devui-overlay")),o=document.body,l=o.style.overflow,r=o.style.position;return f([()=>e.visible,()=>e.backgroundBlock],(([e,t])=>{if(t){const t=o.getBoundingClientRect().y;e?(o.style.overflowY="scroll",o.style.position=e?"fixed":"",o.style.top=`${t}px`):(o.style.overflowY=l,o.style.position=r,o.style.top="",window.scrollTo(0,-t))}})),b((()=>{o.style.overflow=l})),{backgroundClass:t,overlayClass: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))},handleOverlayBubbleCancel:e=>e.cancelBubble=!0}}const L=s({name:"DFixedOverlay",props:(R=a({},S),X={overlayStyle:{type:Object,default:void 0}},t(R,n(X))),setup(e,t){const{backgroundClass:n,overlayClass:o,handleBackdropClick:l,handleOverlayBubbleCancel:r}=Y(e);return()=>c(j,null,{default:()=>[g(c("div",{class:n.value,style:e.backgroundStyle,onClick:l},[c("div",{class:o.value,style:e.overlayStyle,onClick:r},[y(t.slots,"default")])]),[[m,e.visible]])]})}});var R,X;const F=s({name:"DFlexibleOverlay",props:a({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},S),emits:["onUpdate:visible"],setup(e,t){const n=k(null),o=w({position:"absolute"}),l=h();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());f(x(e,"visible"),((e,t,n)=>{var o;e?(o=a,window.addEventListener("scroll",o,!0),window.addEventListener("resize",o),window.addEventListener("orientationchange",o)):P(a),n((()=>{P(a)}))})),f(x(e,"position"),(()=>{a()}));const s=new ResizeObserver((e=>{i(e[0].contentRect)}));if(s.observe(t),B((()=>{s.disconnect()}),l),r instanceof Element){const e=new MutationObserver(a);e.observe(r,{attributeFilter:["style"]}),B((()=>{e.disconnect()}),l)}}),l);const{backgroundClass:r,overlayClass:i,handleBackdropClick:a,handleOverlayBubbleCancel:s}=Y(e);return()=>c(j,null,{default:()=>[g(c("div",{class:r.value,onClick:a},[c("div",{ref:n,class:i.value,style:o,onClick:s},[y(t.slots,"default")])]),[[m,e.visible]])]})}});function P(e){window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}F.install=function(e){e.component(F.name,F)},L.install=function(e){e.component(L.name,L)};var $={title:"Overlay 遮罩层",category:"通用",install(e){if(e.use(L),e.use(F),!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{L as FixedOverlay,F as FlexibleOverlay,$ as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, withDirectives, vShow, ref, reactive, toRef, isRef } from "vue";
+var overlay = "";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const CommonOverlay = defineComponent({
+  setup(props, ctx) {
+    return () => {
+      let _slot;
+      return createVNode(Teleport, {
+        "to": "#d-overlay-anchor"
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-overlay-fade"
+        }, _isSlot(_slot = renderSlot(ctx.slots, "default")) ? _slot : {
+          default: () => [_slot]
+        })]
+      });
+    };
+  }
+});
+const overlayProps = {
+  visible: {
+    type: Boolean
+  },
+  backgroundBlock: {
+    type: Boolean,
+    default: false
+  },
+  backgroundClass: {
+    type: String,
+    default: ""
+  },
+  backgroundStyle: {
+    type: [String, Object]
+  },
+  onBackdropClick: {
+    type: Function
+  },
+  backdropClose: {
+    type: Boolean,
+    default: true
+  },
+  hasBackdrop: {
+    type: Boolean,
+    default: true
+  }
+};
+const overlayEmits = ["update:visible", "backdropClick"];
+const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
+  overlayStyle: {
+    type: [String, Object],
+    default: void 0
+  }
+});
+const flexibleOverlayProps = __spreadValues({
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Object,
+    default: () => ({
+      originX: "left",
+      originY: "top",
+      overlayX: "left",
+      overlayY: "top"
+    })
+  }
+}, overlayProps);
+function useOverlayLogic(props, ctx) {
+  const backgroundClass = computed(() => {
+    return [
+      "devui-overlay-background",
+      props.backgroundClass,
+      !props.hasBackdrop ? "devui-overlay-background__disabled" : "devui-overlay-background__color"
+    ];
+  });
+  const overlayClass = computed(() => {
+    return "devui-overlay";
+  });
+  const handleBackdropClick = (event) => {
+    var _a;
+    event.preventDefault();
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
+    if (props.backdropClose) {
+      ctx.emit("update:visible", false);
+    }
+  };
+  const handleOverlayBubbleCancel = (event) => event.cancelBubble = true;
+  onMounted(() => {
+    const body = document.body;
+    const originOverflow = body.style.overflow;
+    const originPosition = body.style.position;
+    watch([() => props.visible, () => props.backgroundBlock], ([visible, backgroundBlock]) => {
+      if (backgroundBlock) {
+        const top = body.getBoundingClientRect().y;
+        if (visible) {
+          body.style.overflowY = "scroll";
+          body.style.position = visible ? "fixed" : "";
+          body.style.top = `${top}px`;
+        } else {
+          body.style.overflowY = originOverflow;
+          body.style.position = originPosition;
+          body.style.top = "";
+          window.scrollTo(0, -top);
+        }
+      }
+    });
+    onUnmounted(() => {
+      document.body.style.overflow = originOverflow;
+    });
+  });
+  return {
+    backgroundClass,
+    overlayClass,
+    handleBackdropClick,
+    handleOverlayBubbleCancel
+  };
+}
+const FixedOverlay = defineComponent({
+  name: "DFixedOverlay",
+  props: fixedOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props, ctx);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [withDirectives(createVNode("div", {
+        "class": backgroundClass.value,
+        "style": props.backgroundStyle,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "class": overlayClass.value,
+        "style": props.overlayStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
+    });
+  }
+});
+function isComponent(target) {
+  return !!(target == null ? void 0 : target.$el);
+}
+function getElement(element) {
+  if (element instanceof Element) {
+    return element;
+  }
+  if (element && typeof element === "object" && element.$el instanceof Element) {
+    return element.$el;
+  }
+  return null;
+}
+const FlexibleOverlay = defineComponent({
+  name: "DFlexibleOverlay",
+  props: flexibleOverlayProps,
+  emits: overlayEmits,
+  setup(props, ctx) {
+    const overlayRef = ref(null);
+    const positionedStyle = reactive({
+      position: "absolute"
+    });
+    onMounted(async () => {
+      const handleRectChange = (position, rect, origin) => {
+        const point = calculatePosition(position, rect, origin);
+        positionedStyle.left = `${point.x}px`;
+        positionedStyle.top = `${point.y}px`;
+      };
+      const locationElements = computed(() => {
+        const overlay2 = overlayRef.value;
+        const origin = getOrigin(props.origin);
+        if (!overlay2 || !origin) {
+          return;
+        }
+        return {
+          origin,
+          overlay: overlay2
+        };
+      });
+      const visibleRef = toRef(props, "visible");
+      const positionRef = toRef(props, "position");
+      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
+        if (!visible || !locationElements2) {
+          return;
+        }
+        const {
+          origin,
+          overlay: overlay2
+        } = locationElements2;
+        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
+        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
+        onInvalidate(() => {
+          unsubscriptions.forEach((fn) => fn());
+        });
+      });
+    });
+    const {
+      backgroundClass,
+      overlayClass,
+      handleBackdropClick,
+      handleOverlayBubbleCancel
+    } = useOverlayLogic(props);
+    return () => createVNode(CommonOverlay, null, {
+      default: () => [withDirectives(createVNode("div", {
+        "style": props.backgroundStyle,
+        "class": backgroundClass.value,
+        "onClick": handleBackdropClick
+      }, [createVNode("div", {
+        "ref": overlayRef,
+        "class": overlayClass.value,
+        "style": positionedStyle,
+        "onClick": handleOverlayBubbleCancel
+      }, [renderSlot(ctx.slots, "default")])]), [[vShow, props.visible]])]
+    });
+  }
+});
+function getOrigin(origin) {
+  if (origin instanceof Element) {
+    return origin;
+  }
+  if (isRef(origin)) {
+    return getElement(origin.value);
+  }
+  if (isComponent(origin)) {
+    return getElement(origin);
+  }
+  return origin;
+}
+function calculatePosition(position, rect, origin) {
+  const originRect = getOriginRect(origin);
+  const originPoint = getOriginRelativePoint(originRect, position);
+  return getOverlayPoint(originPoint, rect, position);
+}
+function getOriginRect(origin) {
+  if (origin instanceof Element) {
+    return origin.getBoundingClientRect();
+  }
+  const width = origin.width || 0;
+  const height = origin.height || 0;
+  return {
+    top: origin.y,
+    bottom: origin.y + height,
+    left: origin.x,
+    right: origin.x + width,
+    height,
+    width
+  };
+}
+function getOverlayPoint(originPoint, rect, position) {
+  let x;
+  const {
+    width,
+    height
+  } = rect;
+  if (position.overlayX == "center") {
+    x = originPoint.x - width / 2;
+  } else {
+    x = position.overlayX == "left" ? originPoint.x : originPoint.x - width;
+  }
+  let y;
+  if (position.overlayY == "center") {
+    y = originPoint.y - height / 2;
+  } else {
+    y = position.overlayY == "top" ? originPoint.y : originPoint.y - height;
+  }
+  return {
+    x,
+    y
+  };
+}
+function getOriginRelativePoint(originRect, position) {
+  let x;
+  if (position.originX == "center") {
+    x = originRect.left + originRect.width / 2;
+  } else {
+    const startX = originRect.left;
+    const endX = originRect.right;
+    x = position.originX == "left" ? startX : endX;
+  }
+  let y;
+  if (position.originY == "center") {
+    y = originRect.top + originRect.height / 2;
+  } else {
+    y = position.originY == "top" ? originRect.top : originRect.bottom;
+  }
+  return {
+    x,
+    y
+  };
+}
+function subscribeLayoutEvent(event) {
+  window.addEventListener("scroll", event, true);
+  window.addEventListener("resize", event);
+  window.addEventListener("orientationchange", event);
+  return () => {
+    window.removeEventListener("scroll", event, true);
+    window.removeEventListener("resize", event);
+    window.removeEventListener("orientationchange", event);
+  };
+}
+function subscribeOverlayResize(overlay2, callback) {
+  if (overlay2 instanceof Element) {
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(overlay2);
+    return () => resizeObserver.disconnect();
+  }
+  return () => {
+  };
+}
+function subscribeOriginResize(origin, callback) {
+  if (origin instanceof Element) {
+    const observer = new MutationObserver(callback);
+    observer.observe(origin, {
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }
+  return () => {
+  };
+}
+const inBrowser = typeof window !== "undefined";
+FlexibleOverlay.install = function(app) {
+  app.component(FlexibleOverlay.name, FlexibleOverlay);
+};
+FixedOverlay.install = function(app) {
+  app.component(FixedOverlay.name, FixedOverlay);
+};
+var index = {
+  title: "Overlay \u906E\u7F69\u5C42",
+  category: "\u901A\u7528",
+  status: "100%",
+  install(app) {
+    app.use(FixedOverlay);
+    app.use(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 };

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:"devui-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:""},backgroundStyle:{type:[String,Object]},backdropClick:{type:Function},backdropClose:{type:Boolean,default:!0}};function r(e){const o=t.computed((()=>["devui-overlay-background","devui-overlay-background__color",e.backgroundClass])),n=t.computed((()=>"devui-overlay")),r=document.body,l=r.style.overflow,i=r.style.position;return t.watch([()=>e.visible,()=>e.backgroundBlock],(([e,t])=>{if(t){const t=r.getBoundingClientRect().y;e?(r.style.overflowY="scroll",r.style.position=e?"fixed":"",r.style.top=`${t}px`):(r.style.overflowY=l,r.style.position=i,r.style.top="",window.scrollTo(0,-t))}})),t.onUnmounted((()=>{r.style.overflow=l})),{backgroundClass:o,overlayClass: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))},handleOverlayBubbleCancel:e=>e.cancelBubble=!0}}const l=t.defineComponent({name:"DFixedOverlay",props:__spreadProps(__spreadValues({},n),{overlayStyle:{type:Object,default:void 0}}),setup(e,n){const{backgroundClass:l,overlayClass:i,handleBackdropClick:a,handleOverlayBubbleCancel:s}=r(e);return()=>t.createVNode(o,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:l.value,style:e.backgroundStyle,onClick:a},[t.createVNode("div",{class:i.value,style:e.overlayStyle,onClick:s},[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{backgroundClass:c,overlayClass:d,handleBackdropClick:u,handleOverlayBubbleCancel:p}=r(e);return()=>t.createVNode(o,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:c.value,onClick:u},[t.createVNode("div",{ref:l,class:d.value,style:i,onClick:p},[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"}));
+var J=Object.defineProperty,K=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var V=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,Z=Object.prototype.propertyIsEnumerable;var F=(l,t,a)=>t in l?J(l,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[t]=a,B=(l,t)=>{for(var a in t||(t={}))W.call(t,a)&&F(l,a,t[a]);if(V)for(var a of V(t))Z.call(t,a)&&F(l,a,t[a]);return l},N=(l,t)=>K(l,Q(t));(function(l,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(l=typeof globalThis!="undefined"?globalThis:l||self,t(l.index={},l.Vue))})(this,function(l,t){"use strict";var a="";function L(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const x=t.defineComponent({setup(e,n){return()=>{let o;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},L(o=t.renderSlot(n.slots,"default"))?o:{default:()=>[o]})]})}}}),E={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},S=["update:visible","backdropClick"],X=N(B({},E),{overlayStyle:{type:[String,Object],default:void 0}}),Y=B({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},E);function R(e,n){const o=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),i=t.computed(()=>"devui-overlay"),c=r=>{var d;r.preventDefault(),(d=e.onBackdropClick)==null||d.call(e),e.backdropClose&&n.emit("update:visible",!1)},s=r=>r.cancelBubble=!0;return t.onMounted(()=>{const r=document.body,d=r.style.overflow,f=r.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([p,w])=>{if(w){const C=r.getBoundingClientRect().y;p?(r.style.overflowY="scroll",r.style.position=p?"fixed":"",r.style.top=`${C}px`):(r.style.overflowY=d,r.style.position=f,r.style.top="",window.scrollTo(0,-C))}}),t.onUnmounted(()=>{document.body.style.overflow=d})}),{backgroundClass:o,overlayClass:i,handleBackdropClick:c,handleOverlayBubbleCancel:s}}const v=t.defineComponent({name:"DFixedOverlay",props:X,emits:S,setup(e,n){const{backgroundClass:o,overlayClass:i,handleBackdropClick:c,handleOverlayBubbleCancel:s}=R(e,n);return()=>t.createVNode(x,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:o.value,style:e.backgroundStyle,onClick:c},[t.createVNode("div",{class:i.value,style:e.overlayStyle,onClick:s},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function _(e){return!!(e==null?void 0:e.$el)}function j(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}const h=t.defineComponent({name:"DFlexibleOverlay",props:Y,emits:S,setup(e,n){const o=t.ref(null),i=t.reactive({position:"absolute"});t.onMounted(async()=>{const f=(u,y,b)=>{const g=T(u,y,b);i.left=`${g.x}px`,i.top=`${g.y}px`},p=t.computed(()=>{const u=o.value,y=z(e.origin);if(!(!u||!y))return{origin:y,overlay:u}}),w=t.toRef(e,"visible"),C=t.toRef(e,"position");t.watch([p,w,C],async([u,y,b],g,G)=>{if(!y||!u)return;const{origin:m,overlay:k}=u;f(b,k.getBoundingClientRect(),m);const H=[P(()=>f(b,k.getBoundingClientRect(),m)),A(k,O=>f(b,O[0].contentRect,m)),q(m,()=>f(b,k.getBoundingClientRect(),m))];G(()=>{H.forEach(O=>O())})})});const{backgroundClass:c,overlayClass:s,handleBackdropClick:r,handleOverlayBubbleCancel:d}=R(e);return()=>t.createVNode(x,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:c.value,onClick:r},[t.createVNode("div",{ref:o,class:s.value,style:i,onClick:d},[t.renderSlot(n.slots,"default")])]),[[t.vShow,e.visible]])]})}});function z(e){return e instanceof Element?e:t.isRef(e)?j(e.value):_(e)?j(e):e}function T(e,n,o){const i=$(o),c=M(i,e);return D(c,n,e)}function $(e){if(e instanceof Element)return e.getBoundingClientRect();const n=e.width||0,o=e.height||0;return{top:e.y,bottom:e.y+o,left:e.x,right:e.x+n,height:o,width:n}}function D(e,n,o){let i;const{width:c,height:s}=n;o.overlayX=="center"?i=e.x-c/2:i=o.overlayX=="left"?e.x:e.x-c;let r;return o.overlayY=="center"?r=e.y-s/2:r=o.overlayY=="top"?e.y:e.y-s,{x:i,y:r}}function M(e,n){let o;if(n.originX=="center")o=e.left+e.width/2;else{const c=e.left,s=e.right;o=n.originX=="left"?c:s}let i;return n.originY=="center"?i=e.top+e.height/2:i=n.originY=="top"?e.top:e.bottom,{x:o,y:i}}function P(e){return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}function A(e,n){if(e instanceof Element){const o=new ResizeObserver(n);return o.observe(e),()=>o.disconnect()}return()=>{}}function q(e,n){if(e instanceof Element){const o=new MutationObserver(n);return o.observe(e,{attributeFilter:["style"]}),()=>o.disconnect()}return()=>{}}const I=typeof window!="undefined";h.install=function(e){e.component(h.name,h)},v.install=function(e){e.component(v.name,v)};var U={title:"Overlay \u906E\u7F69\u5C42",category:"\u901A\u7528",status:"100%",install(e){if(e.use(v),e.use(h),I&&!document.getElementById("d-overlay-anchor")){const n=document.createElement("div");n.setAttribute("id","d-overlay-anchor"),n.style.position="fixed",n.style.left="0",n.style.top="0",n.style.zIndex="1000",document.body.appendChild(n)}}};l.FixedOverlay=v,l.FlexibleOverlay=h,l.default=U,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/overlay/style.css

@@ -1 +1 @@
-.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}
+.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devui",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-beta.10",
   "license": "MIT",
   "description": "DevUI components based on Vite and Vue3",
   "keywords": [
@@ -18,33 +18,12 @@
   "main": "vue-devui.umd.js",
   "module": "vue-devui.es.js",
   "style": "style.css",
-  "bin": {
-    "devui-cli": "./devui-cli/index.js"
-  },
-  "scripts": {
-    "dev": "vitepress dev docs",
-    "build": "vitepress build docs",
-    "serve": "vitepress serve docs",
-    "app:dev": "vite",
-    "app:build": "vite build",
-    "build:lib": "yarn predev && yarn build:components && yarn generate:theme && yarn copy",
-    "test": "jest --config jest.config.js",
-    "ls-lint": "ls-lint",
-    "lint": "eslint \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
-    "lint:fix": "eslint --fix \"{src,devui}/**/*.{vue,js,ts,jsx,tsx}\"",
-    "stylelint": "stylelint --fix \"{devui,src}/**/*.{scss,css}\"",
-    "build:components": "node ./devui-cli/index.js build",
-    "generate:theme": "node ./devui-cli/index.js generate:theme",
-    "copy": "cp package.json build && cp README.md build && cp devui/theme/theme.scss build/theme",
-    "clean:cli": "npm uninstall -g devui-cli & npm uninstall -g vue-devui",
-    "cli:create": "node ./devui-cli/index.js create -t component",
-    "predev": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error",
-    "prebuild": "node ./devui-cli/index.js create -t vue-devui --ignore-parse-error"
-  },
   "dependencies": {
     "@devui-design/icons": "^1.3.0",
     "@types/lodash-es": "^4.17.4",
+    "async-validator": "^4.0.2",
     "lodash-es": "^4.17.20",
+    "mitt": "^3.0.0",
     "vue": "^3.1.1",
     "vue-router": "^4.0.3"
   },
@@ -74,12 +53,14 @@
     "commander": "^8.1.0",
     "esbuild-register": "^2.6.0",
     "eslint": "^7.28.0",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-vue": "^7.11.1",
-    "husky": "^4.3.7",
+    "husky": "^7.0.4",
     "inquirer": "^8.1.2",
     "jest": "^27.0.4",
     "lint-staged": "^11.0.0",
     "ora": "^5.4.1",
+    "patch-vue-directive-ssr": "^0.0.1",
     "sass": "^1.32.2",
     "shelljs": "^0.8.4",
     "stylelint": "^13.13.1",
@@ -90,17 +71,11 @@
     "vite": "^2.4.4",
     "vite-plugin-md": "^0.6.0",
     "vite-svg-loader": "^2.2.0",
-    "vitepress": "^0.15.6",
-    "vitepress-theme-demoblock": "1.0.7",
+    "vitepress": "0.20.1",
+    "vitepress-theme-demoblock": "1.3.2",
     "vue-tsc": "^0.2.2",
     "yarn": "^1.22.11"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "ls-lint && lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
   "lint-staged": {
     "{src,devui}/**/*.{js,ts,jsx,tsx,vue}": "eslint --fix",
     "{src,devui}/**/*.{scss,css}": "stylelint --fix"

package/pagination/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;