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

package/dropdown/index.umd.js

@@ -0,0 +1 @@
+(function(E,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("@floating-ui/dom"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@floating-ui/dom","@vueuse/core"],t):(E=typeof globalThis!="undefined"?globalThis:E||self,t(E.index={},E.Vue,E.dom,E.core))})(this,function(E,t,N,F){"use strict";const H={visible:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},position:{type:Array,default:["bottom"]},align:{type:String,default:null},offset:{type:[Number,Object],default:4},shiftOffset:{type:Number},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""},destroyOnHide:{type:Boolean,default:!0}},M=Symbol("popper-trigger");function _(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}const C=new Map;function x(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const q=({id:e,isOpen:o,origin:n,dropdownRef:r,props:l,emit:a})=>{let s=!1,i=!1;const{trigger:u,closeScope:c,closeOnMouseLeaveMenu:m}=t.toRefs(l),d=p=>{o.value=p,a("toggle",o.value)},y=async(p,h)=>{await new Promise(f=>setTimeout(f,50)),!(p==="origin"&&s||p==="dropdown"&&i)&&(h&&[...C.values()].reverse().forEach(f=>{setTimeout(()=>{var b;(b=f.toggle)==null||b.call(f)},0)}),d(!1))};t.watch([u,n,r],([p,h,f],b,g)=>{const w=_(h),O=[];setTimeout(()=>{O.push(x(document,"click",v=>{const P=[...C.values()];!o.value||c.value==="none"||(f==null?void 0:f.contains(v.target))&&c.value==="blank"||P.some(A=>{var T;return(T=A.toggleEl)==null?void 0:T.contains(v.target)})&&P.some(A=>{var T;return(T=A.menuEl)==null?void 0:T.contains(v.target)})||([...C.values()].reverse().forEach(A=>{setTimeout(()=>{var T,V;(T=A.toggleEl)!=null&&T.contains(v.target)||(V=A.toggle)==null||V.call(A)},0)}),s=!1)}))},0),p==="click"?O.push(x(w,"click",()=>d(!o.value)),x(f,"mouseleave",v=>{var P;m.value&&!((P=C.get(e).child)!=null&&P.contains(v.relatedTarget))&&y("dropdown",!0)})):p==="hover"&&O.push(x(w,"mouseenter",()=>{i=!0,d(!0)}),x(w,"mouseleave",()=>{i=!1,y("origin")}),x(f,"mouseenter",()=>{s=!0,o.value=!0}),x(f,"mouseleave",v=>{var P;s=!1,!(v.relatedTarget&&((w==null?void 0:w.contains(v.relatedTarget))||((P=C.get(e).child)==null?void 0:P.contains(v.relatedTarget))))&&y("dropdown",!0)})),g(()=>O.forEach(v=>v()))})};function U(e,o,n,r,l,a,s){const i=u=>{const c=u.offsetHeight;window.innerHeight-r.value.getBoundingClientRect().bottom>=c?a.value="bottom":a.value="top"};t.watch(o,(u,c)=>{c!==void 0&&(n.value=u,s("toggle",n.value))},{immediate:!0}),t.watch([n,l],([u,c])=>{var m;if(u){C.set(e,{...C.get(e),menuEl:c,toggle:()=>{n.value=!1,s("toggle",n.value)}});for(const d of C.values())(m=d.menuEl)!=null&&m.contains(r.value)&&(d.child=c)}c&&i(c)}),t.onMounted(()=>{C.set(e,{toggleEl:r.value})}),t.onUnmounted(()=>{C.delete(e)})}function Y(e,o,n){const{showAnimation:r,overlayClass:l,destroyOnHide:a}=t.toRefs(e),s=t.ref(!1),i=t.ref(!1),u=t.computed(()=>({transformOrigin:o.value==="top"?"0% 100%":"0% 0%"})),c=t.computed(()=>({"fade-in-bottom":r.value&&n.value&&o.value==="bottom","fade-in-top":r.value&&n.value&&o.value==="top",[`${l.value}`]:!0})),m=d=>{o.value=d.includes("top")||d.includes("end")?"top":"bottom"};return t.watch(n,d=>{s.value=a.value?d:!0,i.value=d}),{overlayModelValue:s,overlayShowValue:i,styles:u,classes:c,handlePositionChange:m}}const z={modelValue:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0}};function X(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const e=document.documentElement.scrollTop,o=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",()=>{o?document.documentElement.setAttribute("style",o):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=e}}}function G(e,o){let n;const r=a=>{a.preventDefault(),o.emit("click",a),e.closeOnClickOverlay&&o.emit("update:modelValue",!1)},l=()=>{n==null||n()};return t.watch(()=>e.modelValue,a=>{a?e.lockScroll&&(n=X()):l()}),t.onUnmounted(l),{onClick:r}}function S(e,o,n){let r=e;return o&&(r+=`__${o}`),n&&(r+=`--${n}`),r}function D(e,o=!1){const n=o?`.devui-${e}`:`devui-${e}`;return{b:()=>S(n),e:i=>i?S(n,i):"",m:i=>i?S(n,"",i):"",em:(i,u)=>i&&u?S(n,i,u):""}}var ne="";t.defineComponent({name:"DFixedOverlay",inheritAttrs:!1,props:z,emits:["update:modelValue","click"],setup(e,o){const{modelValue:n}=t.toRefs(e),r=D("fixed-overlay"),{onClick:l}=G(e,o);return()=>t.createVNode(t.Transition,{name:r.m("fade")},{default:()=>{var a,s;return[n.value&&t.createVNode("div",t.mergeProps({class:r.b()},o.attrs,{onClick:l}),[(s=(a=o.slots).default)==null?void 0:s.call(a)])]}})}});const I={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 K(e){const o=/(auto|scroll|hidden)/;for(let n=e;n=n.parentElement;n.parentElement!==document.body){const r=window.getComputedStyle(n);if(o.test(r.overflow+r.overflowX+r.overflowY))return n}return window}function J(e,o,n,r){let{x:l,y:a}=o;if(!e){const{width:s,height:i}=r;l&&n.includes("start")&&(l=12),l&&n.includes("end")&&(l=Math.round(s-24)),a&&n.includes("start")&&(a=10),a&&n.includes("end")&&(a=i-14)}return{x:l,y:a}}function Q(e,o){const n=t.ref(),r=t.ref();let l=null;const a=(i,u,c,m)=>{const{x:d,y}=J(e.isArrowCenter,c,u,m.getBoundingClientRect()),p={top:"bottom",right:"left",bottom:"top",left:"right"}[u.split("-")[0]];Object.assign(i.style,{left:d?`${d}px`:"",top:y?`${y}px`:"",right:"",bottom:"",[p]:"-4px"})},s=async()=>{const i=e.origin,u=t.unref(n.value),c=t.unref(r.value),m=[N.offset(e.offset),N.autoPlacement({alignment:e.align,allowedPlacements:e.position})];e.showArrow&&m.push(N.arrow({element:c})),e.shiftOffset!==void 0&&m.push(N.shift());const{x:d,y,placement:p,middlewareData:h}=await N.computePosition(i,u,{strategy:"fixed",middleware:m});let f=d,b=y;if(e.shiftOffset!==void 0){const{x:g,y:w}=h.shift;g<0&&(f-=e.shiftOffset),g>0&&(f+=e.shiftOffset),w<0&&(b-=e.shiftOffset),w>0&&(b+=e.shiftOffset)}o("positionChange",p),Object.assign(u.style,{top:`${b}px`,left:`${f}px`}),e.showArrow&&a(c,p,h.arrow,u)};return t.watch(()=>e.modelValue,()=>{e.modelValue&&e.origin?(l=K(e.origin),t.nextTick(s),l==null||l.addEventListener("scroll",s),l!==window&&window.addEventListener("scroll",s),window.addEventListener("resize",s)):(l==null||l.removeEventListener("scroll",s),l!==window&&window.removeEventListener("scroll",s),window.removeEventListener("resize",s))}),t.onUnmounted(()=>{l==null||l.removeEventListener("scroll",s),l!==window&&window.removeEventListener("scroll",s),window.removeEventListener("resize",s)}),{arrowRef:r,overlayRef:n,updatePosition:s}}var le="";const k=t.defineComponent({name:"DFlexibleOverlay",inheritAttrs:!1,props:I,emits:["update:modelValue","positionChange"],setup(e,{slots:o,attrs:n,emit:r,expose:l}){const a=D("flexible-overlay"),{arrowRef:s,overlayRef:i,updatePosition:u}=Q(e,r);return l({updatePosition:u}),()=>{var c;return e.modelValue&&t.createVNode("div",t.mergeProps({ref:i,class:a.b()},n),[(c=o.default)==null?void 0:c.call(o),e.showArrow&&t.createVNode("div",{ref:s,class:a.e("arrow")},null)])}}}),W=e=>e!==null&&typeof e=="object",Z=D("popper-trigger");function $(e){return t.h("span",{class:Z.b()},e)}function j(e){for(const o of e){if(W(o)){if(o.type===t.Comment)continue;return o.type==="svg"||o.type===t.Text?$(o):o.type===t.Fragment?j(o.children):o}return $(o)}return null}var ee=t.defineComponent({name:"DPopperTrigger",setup(e,o){const{slots:n,attrs:r}=o;return()=>{var i;const l=(i=n.default)==null?void 0:i.call(n,r),a=t.inject(M);if(!l)return null;const s=j(l);return s?t.withDirectives(t.cloneVNode(s,r),[[{mounted(u){a.value=u},updated(u){a.value=u},unmounted(){a.value=null}}]]):null}}}),ae="";let te=1;var B=t.defineComponent({name:"DDropdown",inheritAttrs:!1,props:H,emits:["toggle"],setup(e,{slots:o,attrs:n,emit:r,expose:l}){const{visible:a,position:s,align:i,offset:u,destroyOnHide:c,shiftOffset:m,showAnimation:d}=t.toRefs(e),y=t.ref(),p=t.ref(),h=t.ref(),f=`dropdown_${te++}`,b=t.ref(!1),g=t.ref("bottom"),w=D("dropdown");t.provide(M,y),q({id:f,isOpen:b,origin:y,dropdownRef:p,props:e,emit:r}),U(f,a,b,y,p,g,r);const{overlayModelValue:O,overlayShowValue:v,styles:P,classes:A,handlePositionChange:T}=Y(e,g,b);return t.watch(v,V=>{t.nextTick(()=>{!c.value&&V&&h.value.updatePosition()})}),l({updatePosition:()=>h.value.updatePosition()}),()=>t.createVNode(t.Fragment,null,[t.createVNode(ee,null,{default:()=>{var V;return[(V=o.default)==null?void 0:V.call(o)]}}),t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode(t.Transition,{name:d.value?w.m(`fade-${g.value}`):""},{default:()=>[t.withDirectives(t.createVNode(k,{modelValue:O.value,"onUpdate:modelValue":V=>O.value=V,ref:h,origin:y.value,position:s.value,align:i.value,offset:u.value,shiftOffset:m==null?void 0:m.value,onPositionChange:T,class:A.value,style:P.value},{default:()=>{var V;return[t.createVNode("div",t.mergeProps({ref:p,class:w.e("menu-wrap")},n),[(V=o.menu)==null?void 0:V.call(o)])]}}),[[t.vShow,v.value]])]})]})])}});const L={modelValue:{type:Boolean,default:!1},origin:{type:Object,require:!0},position:{type:Array,default:["bottom"]},align:{type:String,default:null},offset:{type:[Number,Object],default:4},clickOutside:{type:Function,default:()=>!0},showAnimation:{type:Boolean,default:!0},overlayClass:{type:String,default:""}};var R=t.defineComponent({name:"DDropdownMenu",inheritAttrs:!1,props:L,emits:["update:modelValue"],setup(e,{slots:o,attrs:n,emit:r}){const{modelValue:l,origin:a,position:s,align:i,offset:u,clickOutside:c,showAnimation:m,overlayClass:d}=t.toRefs(e),y=t.ref(null),p=D("dropdown");F.onClickOutside(y,g=>{var w,O;((w=c.value)==null?void 0:w.call(c))&&!((O=a==null?void 0:a.value)!=null&&O.contains(g.target))&&r("update:modelValue",!1)});const h=t.ref("bottom"),f=g=>{h.value=g.split("-")[0]==="top"?"top":"bottom"},b=t.computed(()=>({transformOrigin:h.value==="top"?"0% 100%":"0% 0%"}));return()=>t.createVNode(t.Teleport,{to:"body"},{default:()=>[t.createVNode(t.Transition,{name:m.value?p.m(`fade-${h.value}`):""},{default:()=>[t.createVNode(k,{modelValue:l.value,"onUpdate:modelValue":g=>l.value=g,origin:a==null?void 0:a.value,position:s.value,align:i.value,offset:u.value,onPositionChange:f,class:d.value,style:b.value},{default:()=>{var g;return[t.createVNode("div",t.mergeProps({ref:y,class:p.e("menu-wrap")},n),[(g=o.default)==null?void 0:g.call(o)])]}})]})]})}}),oe={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"50%",install(e){e.component(B.name,B),e.component(R.name,R)}};E.Dropdown=B,E.DropdownMenu=R,E.default=oe,E.dropdownMenuProps=L,Object.defineProperties(E,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"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-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}.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)}.fade-in-top{animation:fadeInTop .2s cubic-bezier(.16,.75,.5,1)}.fade-in-bottom{animation:fadeInBottom .2s cubic-bezier(.16,.75,.5,1)}@keyframes fadeInTop{0%{opacity:.8;transform:scaleY(.8) translateY(4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}@keyframes fadeInBottom{0%{opacity:.8;transform:scaleY(.8) translateY(-4px)}to{opacity:1;transform:scaleY(.9999) translateY(0)}}.devui-dropdown--fade-bottom-enter-from,.devui-dropdown--fade-bottom-leave-to{opacity:.8;transform:scaleY(.8) translateY(-4px)}.devui-dropdown--fade-bottom-enter-to,.devui-dropdown--fade-bottom-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-bottom-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-bottom-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}.devui-dropdown--fade-top-enter-from,.devui-dropdown--fade-top-leave-to{opacity:.8;transform:scaleY(.8) translateY(4px)}.devui-dropdown--fade-top-enter-to,.devui-dropdown--fade-top-leave-from{opacity:1;transform:scaleY(.9999) translateY(0)}.devui-dropdown--fade-top-enter-active{transition:transform .2s cubic-bezier(.16,.75,.5,1),opacity .2s cubic-bezier(.16,.75,.5,1)}.devui-dropdown--fade-top-leave-active{transition:transform .2s cubic-bezier(.5,0,.84,.25),opacity .2s cubic-bezier(.5,0,.84,.25)}

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;