fine-true/lib/drawer/index.js

A small and beautiful Vue3 version of the UI Library

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("./../utils/withInstall"));else if("function"==typeof define&&define.amd)define(["vue","./../utils/withInstall"],t);else{var o="object"==typeof exports?t(require("vue"),require("./../utils/withInstall")):t(e.vue,e["./../utils/withInstall"]);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t)=>(()=>{"use strict";var o={1677:e=>{e.exports=t},748:t=>{t.exports=e}},r={};function a(e){var t=r[e];if(void 0!==t)return t.exports;var l=r[e]={exports:{}};return o[e](l,l.exports,a),l.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var o in t)a.o(t,o)&&!a.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};return(()=>{a.r(l),a.d(l,{default:()=>r});var e=a(748);const t=(0,e.defineComponent)({name:"fine-drawer",emits:["update:modelValue"],props:{modelValue:{type:Boolean,default:!1},title:{type:String},width:{type:String,default:"30%"},appendToBody:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!0},direction:{type:String,default:"rtl",validator:e=>["rtl","ltr","ttb","btt"].includes(e)},beforeClose:{type:Function,default:null}},setup(t,o){var{emit:r,expose:a,slots:l}=o,d=()=>{t.beforeClose?t.beforeClose((()=>{r("update:modelValue",!1)})):r("update:modelValue",!1)},n=()=>{t.closeOnClickModal&&d()},i=(0,e.computed)((()=>{var{direction:e,width:o}=t;return["rtl","ltr"].includes(e)?{width:o}:["ttb","btt"].includes(e)?{height:o}:{}}));return a({close:d,open:()=>{r("update:modelValue",!0)}}),()=>{var{modelValue:o,direction:r,appendToBody:a,title:s}=t;return(0,e.createVNode)(e.Fragment,null,[(0,e.createVNode)(e.Teleport,{to:"body"},{default:()=>[(0,e.createVNode)(e.Transition,{name:"fine-fade"},{default:()=>[o&&(0,e.createVNode)("div",{class:"fine-mask",onClick:n},null)]})]}),(0,e.createVNode)(e.Teleport,{to:"body",disabled:!a},{default:()=>[(0,e.createVNode)("div",{class:"fine-drawer"},[(0,e.createVNode)(e.Transition,{name:"fine-drawer-fade-".concat(r)},{default:()=>[o&&(0,e.createVNode)("div",{style:i.value,class:"fine-drawer-content fine-drawer-".concat(r)},[(0,e.createVNode)("div",{class:"fine-drawer-head"},[(0,e.createVNode)("span",{class:"fine-drawer-title"},[l.header&&l.header()||s]),(0,e.createVNode)("span",{class:"fine-drawer-close",onClick:d},[(0,e.createVNode)("i",{class:"fine-icon icon-close"},null)])]),(0,e.createVNode)("section",{class:"fine-drawer-body"},[l.default&&l.default()])])]})])]})])}}});var o=a(1677);a.n(o)()(t);const r=t})(),l})()));