vue-devui/drawer/index.umd.js

DevUI components based on Vite and Vue3

var M=Object.defineProperty;var k=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,F=Object.prototype.propertyIsEnumerable;var E=(l,e,a)=>e in l?M(l,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):l[e]=a,h=(l,e)=>{for(var a in e||(e={}))R.call(e,a)&&E(l,a,e[a]);if(k)for(var a of k(e))F.call(e,a)&&E(l,a,e[a]);return l};(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue,l.core))})(this,function(l,e,a){"use strict";const g={modelValue:{type:Boolean,default:!1},zIndex:{type:Number,default:1040},showOverlay:{type:Boolean,default:!0},escKeyCloseable:{type:Boolean,default:!0},position:{type:String,default:"right"},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function}},D={visible:{type:Boolean,default:!1},onClick:{type:Function}};function m(t,n,o){let r=t;return n&&(r+=`__${n}`),o&&(r+=`--${o}`),r}function p(t,n=!1){const o=n?`.devui-${t}`:`devui-${t}`;return{b:()=>m(o),e:c=>c?m(o,c):"",m:c=>c?m(o,"",c):"",em:(c,d)=>c&&d?m(o,c,d):""}}var K="",S=e.defineComponent({name:"DDrawerOverlay",props:D,emits:["click"],setup(t,n){const o=p("drawer"),r=s=>{n.emit("click",s)};return()=>e.createVNode(e.Transition,{name:"drawer-overlay-fade"},{default:()=>[t.visible&&e.createVNode("div",{class:o.e("overlay"),onClick:r},null)]})}});function N(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop,n=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${t}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{n?document.documentElement.setAttribute("style",n):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=t}}}function x(t,n){const o=p("drawer"),r=p("modal",!0),s=e.ref(),u=e.ref(),y=e.computed(()=>({[o.b()]:!0,[o.m(t.position)]:!0})),c=()=>{n("update:modelValue",!1),n("close")};let d;const w=()=>{t.beforeClose?t.beforeClose(c):c()},I=()=>{t.closeOnClickOverlay&&w()},b=i=>{i.code==="Escape"&&w()},$=i=>{const V=i.composedPath(),z=document.querySelectorAll(r.e("overlay")),j=document.querySelectorAll(r.b()),_=Array.from(z).filter(C=>V.includes(C)),q=Array.from(j).filter(C=>V.includes(C));_.length||q.length||w()};setTimeout(()=>{a.onClickOutside(s,$,{capture:!1,ignore:[u]})});const O=()=>{d==null||d(),document.removeEventListener("keyup",b)};return e.watch(()=>t.modelValue,i=>{i?(n("open"),t.lockScroll&&(d=N()),t.escKeyCloseable&&document.addEventListener("keyup",b)):O()}),e.onUnmounted(O),{overlayRef:u,drawerRef:s,drawerClasses:y,handleOverlayClick:I}}var U="",f=e.defineComponent({name:"DDrawer",inheritAttrs:!1,props:g,emits:["close","update:modelValue","open"],setup(t,{emit:n,slots:o,attrs:r}){const{overlayRef:s,drawerRef:u,drawerClasses:y,handleOverlayClick:c}=x(t,n);return()=>e.createVNode(e.Teleport,{to:"body"},{default:()=>[t.showOverlay&&e.createVNode(S,{ref:s,visible:t.modelValue,style:{zIndex:t.zIndex-1},onClick:c},null),e.createVNode(e.Transition,{name:`drawer-fly-${t.position}`},{default:()=>{var d;return[t.modelValue&&e.createVNode("div",e.mergeProps({ref:u,class:y.value,style:{zIndex:t.zIndex}},r),[(d=o.default)==null?void 0:d.call(o)])]}})]})}});function A(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const T={modelValue:!1,content:"",zIndex:1e3,showOverlay:!0,escKeyCloseable:!0,position:"right",lockScroll:!0,closeOnClickOverlay:!0};function B(t){const n=document.createElement("div"),o=t.content;delete t.content;const r=e.createApp({setup(){const s=()=>{t.modelValue=!1};return e.onUnmounted(()=>{document.body.removeChild(n)}),()=>e.createVNode(f,e.mergeProps(t,{"onUpdate:modelValue":s}),A(o)?o:{default:()=>[o]})}});return document.body.appendChild(n),r.mount(n),r}class v{open(n){const o=e.reactive(h(h({},T),n)),r=B(o);return o.modelValue=!0,{close:()=>{o.modelValue=!1,r.unmount()}}}}var P={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"75%",install(t){t.component(f.name,f),t.config.globalProperties.$drawerService=new v}};l.Drawer=f,l.DrawerService=v,l.default=P,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});