vue-devui 1.0.0-beta.1 → 1.0.0-beta.10

package/dropdown/index.es.js

@@ -0,0 +1,527 @@
+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 { ref, watch, defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, withDirectives, vShow, reactive, toRef, isRef, toRefs, Fragment } from "vue";
+const dropdownProps = {
+  origin: {
+    type: Object
+  },
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  trigger: {
+    type: String,
+    default: "click"
+  },
+  closeScope: {
+    type: String,
+    default: "all"
+  },
+  closeOnMouseLeaveMenu: {
+    type: Boolean,
+    default: false
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  }
+};
+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;
+}
+function subscribeEvent(dom, type, callback) {
+  dom == null ? void 0 : dom.addEventListener(type, callback);
+  return () => {
+    dom == null ? void 0 : dom.removeEventListener(type, callback);
+  };
+}
+const useDropdown = ({
+  visible,
+  trigger,
+  origin,
+  closeScope,
+  closeOnMouseLeaveMenu
+}) => {
+  const dropdownElRef = ref();
+  const closeByScope = () => {
+    if (closeScope.value === "none") {
+      return;
+    }
+    visible.value = false;
+  };
+  watch([trigger, origin, dropdownElRef], ([trigger2, origin2, dropdownEl], ov, onInvalidate) => {
+    const originEl = getElement(origin2);
+    if (!originEl || !dropdownEl) {
+      return;
+    }
+    const subscriptions = [
+      subscribeEvent(dropdownEl, "click", () => {
+        if (closeScope.value === "all") {
+          visible.value = false;
+        }
+      })
+    ];
+    if (trigger2 === "click") {
+      subscriptions.push(subscribeEvent(originEl, "click", () => visible.value = !visible.value), subscribeEvent(document, "click", (e) => {
+        if (!visible.value) {
+          return;
+        }
+        const target = e.target;
+        const isContain = originEl.contains(target) || dropdownEl.contains(target);
+        if (isContain) {
+          return;
+        }
+        closeByScope();
+      }), subscribeEvent(dropdownEl, "mouseleave", () => {
+        if (closeOnMouseLeaveMenu.value) {
+          visible.value = false;
+        }
+      }));
+    } else if (trigger2 === "hover") {
+      let overlayEnter = false;
+      let originEnter = false;
+      const handleLeave = async (elementType) => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        if (elementType === "origin" && overlayEnter || elementType === "dropdown" && originEnter) {
+          return;
+        }
+        closeByScope();
+      };
+      subscriptions.push(subscribeEvent(originEl, "mouseenter", () => {
+        originEnter = true;
+        visible.value = true;
+      }), subscribeEvent(originEl, "mouseleave", () => {
+        originEnter = false;
+        if (!closeOnMouseLeaveMenu.value) {
+          handleLeave("origin");
+        }
+      }), subscribeEvent(dropdownEl, "mouseenter", () => {
+        overlayEnter = true;
+        visible.value = true;
+      }), subscribeEvent(dropdownEl, "mouseleave", () => {
+        overlayEnter = false;
+        handleLeave("dropdown");
+      }));
+    }
+    onInvalidate(() => subscriptions.forEach((v) => v()));
+  });
+  return { dropdownEl: dropdownElRef };
+};
+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]])]
+    });
+  }
+});
+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 () => {
+  };
+}
+FlexibleOverlay.install = function(app) {
+  app.component(FlexibleOverlay.name, FlexibleOverlay);
+};
+FixedOverlay.install = function(app) {
+  app.component(FixedOverlay.name, FixedOverlay);
+};
+var dropdown = "";
+var Dropdown = defineComponent({
+  name: "DDropdown",
+  props: dropdownProps,
+  emits: [],
+  setup(props, ctx) {
+    const {
+      isOpen,
+      origin,
+      trigger,
+      closeScope,
+      closeOnMouseLeaveMenu
+    } = toRefs(props);
+    const visible = ref(false);
+    watch(isOpen, (value) => {
+      visible.value = value;
+    }, {
+      immediate: true
+    });
+    const position = {
+      originX: "center",
+      originY: "bottom",
+      overlayX: "center",
+      overlayY: "top"
+    };
+    const {
+      dropdownEl
+    } = useDropdown({
+      visible,
+      origin,
+      trigger,
+      closeScope,
+      closeOnMouseLeaveMenu
+    });
+    const animatedVisible = computed(() => {
+      return props.showAnimation ? visible.value : true;
+    });
+    return () => {
+      return createVNode(Fragment, null, [createVNode(FlexibleOverlay, {
+        "origin": props.origin,
+        "visible": visible.value,
+        "onUpdate:visible": ($event) => visible.value = $event,
+        "position": position,
+        "hasBackdrop": false
+      }, {
+        default: () => [createVNode(Transition, {
+          "name": "devui-dropdown-fade"
+        }, {
+          default: () => {
+            var _a, _b;
+            return [withDirectives(createVNode("div", {
+              "ref": dropdownEl,
+              "style": "min-width:102px"
+            }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, animatedVisible.value]])];
+          }
+        })]
+      })]);
+    };
+  }
+});
+Dropdown.install = function(app) {
+  app.component(Dropdown.name, Dropdown);
+};
+var index = {
+  title: "Dropdown \u4E0B\u62C9\u83DC\u5355",
+  category: "\u5BFC\u822A",
+  status: "10%",
+  install(app) {
+    app.use(Dropdown);
+  }
+};
+export { Dropdown, index as default };

package/dropdown/index.umd.js

@@ -0,0 +1 @@
+var Q=Object.defineProperty,W=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var X=(a,t,v)=>t in a?Q(a,t,{enumerable:!0,configurable:!0,writable:!0,value:v}):a[t]=v,V=(a,t)=>{for(var v in t||(t={}))ee.call(t,v)&&X(a,v,t[v]);if(j)for(var v of j(t))te.call(t,v)&&X(a,v,t[v]);return a},Y=(a,t)=>W(a,Z(t));(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const v={origin:{type:Object},isOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0}};function F(e){return!!(e==null?void 0:e.$el)}function S(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}function g(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const _=({visible:e,trigger:o,origin:n,closeScope:r,closeOnMouseLeaveMenu:i})=>{const u=t.ref(),l=()=>{r.value!=="none"&&(e.value=!1)};return t.watch([o,n,u],([s,b,f],m,y)=>{const c=S(b);if(!c||!f)return;const p=[g(f,"click",()=>{r.value==="all"&&(e.value=!1)})];if(s==="click")p.push(g(c,"click",()=>e.value=!e.value),g(document,"click",d=>{if(!e.value)return;const h=d.target;c.contains(h)||f.contains(h)||l()}),g(f,"mouseleave",()=>{i.value&&(e.value=!1)}));else if(s==="hover"){let d=!1,h=!1;const O=async w=>{await new Promise(k=>setTimeout(k,50)),!(w==="origin"&&d||w==="dropdown"&&h)&&l()};p.push(g(c,"mouseenter",()=>{h=!0,e.value=!0}),g(c,"mouseleave",()=>{h=!1,i.value||O("origin")}),g(f,"mouseenter",()=>{d=!0,e.value=!0}),g(f,"mouseleave",()=>{d=!1,O("dropdown")}))}y(()=>p.forEach(d=>d()))}),{dropdownEl:u}};var ne="";function M(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const R=t.defineComponent({setup(e,o){return()=>{let n;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},M(n=t.renderSlot(o.slots,"default"))?n:{default:()=>[n]})]})}}}),D={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}},N=["update:visible","backdropClick"],T=Y(V({},D),{overlayStyle:{type:[String,Object],default:void 0}}),z=V({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},D);function L(e,o){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),r=t.computed(()=>"devui-overlay"),i=l=>{var s;l.preventDefault(),(s=e.onBackdropClick)==null||s.call(e),e.backdropClose&&o.emit("update:visible",!1)},u=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,s=l.style.overflow,b=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([f,m])=>{if(m){const y=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${y}px`):(l.style.overflowY=s,l.style.position=b,l.style.top="",window.scrollTo(0,-y))}}),t.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:n,overlayClass:r,handleBackdropClick:i,handleOverlayBubbleCancel:u}}const E=t.defineComponent({name:"DFixedOverlay",props:T,emits:N,setup(e,o){const{backgroundClass:n,overlayClass:r,handleBackdropClick:i,handleOverlayBubbleCancel:u}=L(e,o);return()=>t.createVNode(R,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:n.value,style:e.backgroundStyle,onClick:i},[t.createVNode("div",{class:r.value,style:e.overlayStyle,onClick:u},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}}),B=t.defineComponent({name:"DFlexibleOverlay",props:z,emits:N,setup(e,o){const n=t.ref(null),r=t.reactive({position:"absolute"});t.onMounted(async()=>{const b=(c,p,d)=>{const h=$(c,p,d);r.left=`${h.x}px`,r.top=`${h.y}px`},f=t.computed(()=>{const c=n.value,p=P(e.origin);if(!(!c||!p))return{origin:p,overlay:c}}),m=t.toRef(e,"visible"),y=t.toRef(e,"position");t.watch([f,m,y],async([c,p,d],h,O)=>{if(!p||!c)return;const{origin:w,overlay:k}=c;b(d,k.getBoundingClientRect(),w);const K=[G(()=>b(d,k.getBoundingClientRect(),w)),H(k,x=>b(d,x[0].contentRect,w)),I(w,()=>b(d,k.getBoundingClientRect(),w))];O(()=>{K.forEach(x=>x())})})});const{backgroundClass:i,overlayClass:u,handleBackdropClick:l,handleOverlayBubbleCancel:s}=L(e);return()=>t.createVNode(R,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:i.value,onClick:l},[t.createVNode("div",{ref:n,class:u.value,style:r,onClick:s},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}});function P(e){return e instanceof Element?e:t.isRef(e)?S(e.value):F(e)?S(e):e}function $(e,o,n){const r=A(n),i=U(r,e);return q(i,o,e)}function A(e){if(e instanceof Element)return e.getBoundingClientRect();const o=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+o,height:n,width:o}}function q(e,o,n){let r;const{width:i,height:u}=o;n.overlayX=="center"?r=e.x-i/2:r=n.overlayX=="left"?e.x:e.x-i;let l;return n.overlayY=="center"?l=e.y-u/2:l=n.overlayY=="top"?e.y:e.y-u,{x:r,y:l}}function U(e,o){let n;if(o.originX=="center")n=e.left+e.width/2;else{const i=e.left,u=e.right;n=o.originX=="left"?i:u}let r;return o.originY=="center"?r=e.top+e.height/2:r=o.originY=="top"?e.top:e.bottom,{x:n,y:r}}function G(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 H(e,o){if(e instanceof Element){const n=new ResizeObserver(o);return n.observe(e),()=>n.disconnect()}return()=>{}}function I(e,o){if(e instanceof Element){const n=new MutationObserver(o);return n.observe(e,{attributeFilter:["style"]}),()=>n.disconnect()}return()=>{}}B.install=function(e){e.component(B.name,B)},E.install=function(e){e.component(E.name,E)};var oe="",C=t.defineComponent({name:"DDropdown",props:v,emits:[],setup(e,o){const{isOpen:n,origin:r,trigger:i,closeScope:u,closeOnMouseLeaveMenu:l}=t.toRefs(e),s=t.ref(!1);t.watch(n,y=>{s.value=y},{immediate:!0});const b={originX:"center",originY:"bottom",overlayX:"center",overlayY:"top"},{dropdownEl:f}=_({visible:s,origin:r,trigger:i,closeScope:u,closeOnMouseLeaveMenu:l}),m=t.computed(()=>e.showAnimation?s.value:!0);return()=>t.createVNode(t.Fragment,null,[t.createVNode(B,{origin:e.origin,visible:s.value,"onUpdate:visible":y=>s.value=y,position:b,hasBackdrop:!1},{default:()=>[t.createVNode(t.Transition,{name:"devui-dropdown-fade"},{default:()=>{var y,c;return[t.withDirectives(t.createVNode("div",{ref:f,style:"min-width:102px"},[(c=(y=o.slots).default)==null?void 0:c.call(y)]),[[t.vShow,m.value]])]}})]})])}});C.install=function(e){e.component(C.name,C)};var J={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"10%",install(e){e.use(C)}};a.Dropdown=C,a.default=J,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/dropdown/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "dropdown",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css"
+}

package/dropdown/style.css

@@ -0,0 +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}.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}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}@keyframes d-dropdown-fade{0%{opacity:0;transform:scaleY(.9999) scaleY(0)}to{opacity:1;transform:scaleY(.8) scaleY(4px)}}.devui-dropdown-fade-enter{opacity:0}.devui-dropdown-fade-enter-active{animation-name:d-dropdown-fade;animation-duration:.3s}.devui-dropdown-fade-leave{opacity:1}.devui-dropdown-fade-leave-active{animation-name:d-dropdown-fade;animation-duration:.3s;animation-direction:reverse}

package/editable-select/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;