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

package/dropdown/index.es.js

@@ -0,0 +1,535 @@
+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 } 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
+  },
+  width: {
+    type: [Number, String],
+    default: "102px"
+  }
+};
+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, ctx);
+    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;
+    });
+    const wrapStyle = computed(() => typeof props.width === "string" ? {
+      width: props.width
+    } : {
+      width: `${props.width}px`
+    });
+    return () => 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,
+            "class": "devui-dropdown-menu-wrap",
+            "style": wrapStyle.value
+          }, [(_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=(i,t,v)=>t in i?Q(i,t,{enumerable:!0,configurable:!0,writable:!0,value:v}):i[t]=v,R=(i,t)=>{for(var v in t||(t={}))ee.call(t,v)&&X(i,v,t[v]);if(j)for(var v of j(t))te.call(t,v)&&X(i,v,t[v]);return i},Y=(i,t)=>W(i,Z(t));(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,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},width:{type:[Number,String],default:"102px"}};function _(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 w(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const F=({visible:e,trigger:o,origin:n,closeScope:r,closeOnMouseLeaveMenu:s})=>{const u=t.ref(),l=()=>{r.value!=="none"&&(e.value=!1)};return t.watch([o,n,u],([c,b,f],m,h)=>{const a=S(b);if(!a||!f)return;const y=[w(f,"click",()=>{r.value==="all"&&(e.value=!1)})];if(c==="click")y.push(w(a,"click",()=>e.value=!e.value),w(document,"click",d=>{if(!e.value)return;const p=d.target;a.contains(p)||f.contains(p)||l()}),w(f,"mouseleave",()=>{s.value&&(e.value=!1)}));else if(c==="hover"){let d=!1,p=!1;const O=async g=>{await new Promise(k=>setTimeout(k,50)),!(g==="origin"&&d||g==="dropdown"&&p)&&l()};y.push(w(a,"mouseenter",()=>{p=!0,e.value=!0}),w(a,"mouseleave",()=>{p=!1,s.value||O("origin")}),w(f,"mouseenter",()=>{d=!0,e.value=!0}),w(f,"mouseleave",()=>{d=!1,O("dropdown")}))}h(()=>y.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 V=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(R({},D),{overlayStyle:{type:[String,Object],default:void 0}}),$=R({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"),s=l=>{var c;l.preventDefault(),(c=e.onBackdropClick)==null||c.call(e),e.backdropClose&&o.emit("update:visible",!1)},u=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,c=l.style.overflow,b=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([f,m])=>{if(m){const h=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${h}px`):(l.style.overflowY=c,l.style.position=b,l.style.top="",window.scrollTo(0,-h))}}),t.onUnmounted(()=>{document.body.style.overflow=c})}),{backgroundClass:n,overlayClass:r,handleBackdropClick:s,handleOverlayBubbleCancel:u}}const E=t.defineComponent({name:"DFixedOverlay",props:T,emits:N,setup(e,o){const{backgroundClass:n,overlayClass:r,handleBackdropClick:s,handleOverlayBubbleCancel:u}=L(e,o);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:n.value,style:e.backgroundStyle,onClick:s},[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:$,emits:N,setup(e,o){const n=t.ref(null),r=t.reactive({position:"absolute"});t.onMounted(async()=>{const b=(a,y,d)=>{const p=P(a,y,d);r.left=`${p.x}px`,r.top=`${p.y}px`},f=t.computed(()=>{const a=n.value,y=z(e.origin);if(!(!a||!y))return{origin:y,overlay:a}}),m=t.toRef(e,"visible"),h=t.toRef(e,"position");t.watch([f,m,h],async([a,y,d],p,O)=>{if(!y||!a)return;const{origin:g,overlay:k}=a;b(d,k.getBoundingClientRect(),g);const K=[G(()=>b(d,k.getBoundingClientRect(),g)),H(k,x=>b(d,x[0].contentRect,g)),I(g,()=>b(d,k.getBoundingClientRect(),g))];O(()=>{K.forEach(x=>x())})})});const{backgroundClass:s,overlayClass:u,handleBackdropClick:l,handleOverlayBubbleCancel:c}=L(e,o);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:s.value,onClick:l},[t.createVNode("div",{ref:n,class:u.value,style:r,onClick:c},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}});function z(e){return e instanceof Element?e:t.isRef(e)?S(e.value):_(e)?S(e):e}function P(e,o,n){const r=A(n),s=U(r,e);return q(s,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:s,height:u}=o;n.overlayX=="center"?r=e.x-s/2:r=n.overlayX=="left"?e.x:e.x-s;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 s=e.left,u=e.right;n=o.originX=="left"?s: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:s,closeScope:u,closeOnMouseLeaveMenu:l}=t.toRefs(e),c=t.ref(!1);t.watch(n,a=>{c.value=a},{immediate:!0});const b={originX:"center",originY:"bottom",overlayX:"center",overlayY:"top"},{dropdownEl:f}=F({visible:c,origin:r,trigger:s,closeScope:u,closeOnMouseLeaveMenu:l}),m=t.computed(()=>e.showAnimation?c.value:!0),h=t.computed(()=>typeof e.width=="string"?{width:e.width}:{width:`${e.width}px`});return()=>t.createVNode(B,{origin:e.origin,visible:c.value,"onUpdate:visible":a=>c.value=a,position:b,hasBackdrop:!1},{default:()=>[t.createVNode(t.Transition,{name:"devui-dropdown-fade"},{default:()=>{var a,y;return[t.withDirectives(t.createVNode("div",{ref:f,class:"devui-dropdown-menu-wrap",style:h.value},[(y=(a=o.slots).default)==null?void 0:y.call(a)]),[[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)}};i.Dropdown=C,i.default=J,Object.defineProperty(i,"__esModule",{value:!0}),i[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-menu-wrap .devui-dropdown-menu{width:100%}.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;