vue-devui/drawer/index.umd.js

DevUI components based on Vite and Vue3

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