vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
2 lines (1 loc) • 6.33 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("../scrollbar/index.cjs"),S=require("../utils/index.cjs"),k={class:"drawer-content"},N={key:0,class:"drawer-body-wrapper"},V={class:"header-title"},B={key:1,class:"header-title"},E={key:0,class:"header-extra"},b={key:1,class:"drawer-body-wrapper"},g={class:"header-title"},z={key:1,class:"header-title"},$={key:0,class:"header-extra"},D=e.defineComponent({__name:"Drawer",props:{width:{default:378},height:{default:378},title:{default:void 0},closable:{type:Boolean,default:!0},placement:{default:"right"},headerClass:{default:void 0},headerStyle:{default:()=>({})},bodyClass:{default:void 0},bodyStyle:{default:()=>({})},scrollbarProps:{default:()=>({})},extra:{default:void 0},footer:{default:void 0},footerClass:{default:void 0},footerStyle:{default:()=>({})},destroyOnClose:{type:Boolean,default:!1},zIndex:{default:1e3},open:{type:Boolean,default:!1}},emits:["update:open","close"],setup(h,{emit:y}){const o=h,n=e.ref(),l=e.ref(),r=S.useSlotsExist(["title","extra","footer"]),a=y,v=e.computed(()=>typeof o.width=="number"?`${o.width}px`:o.width),p=e.computed(()=>typeof o.height=="number"?`${o.height}px`:o.height),w=e.computed(()=>["top","bottom"].includes(o.placement)?{zIndex:o.zIndex,height:p.value}:{zIndex:o.zIndex,width:v.value}),i=e.computed(()=>r.title||r.extra||o.title||o.extra||o.closable),c=e.computed(()=>r.title||o.title),u=e.computed(()=>r.extra||o.extra),m=e.computed(()=>r.footer||o.footer);e.watch(l,t=>{t?(n.value.focus(),document.documentElement.style.overflowY="hidden",document.body.style.overflowY="hidden"):(document.documentElement.style.removeProperty("overflow-y"),document.body.style.removeProperty("overflow-y"))},{immediate:!0}),e.watchEffect(()=>{l.value=o.open});function C(t){l.value=!1,a("update:open",!1),a("close",t)}function d(t){l.value=!1,a("update:open",!1),a("close",t)}return(t,s)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"drawerRef",ref:n,tabindex:"-1",class:"drawer-wrap",onKeydown:e.withKeys(d,["esc"])},[e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:"drawer-mask",onClick:e.withModifiers(C,["self"])},null,512),[[e.vShow,l.value]])]),_:1}),e.createVNode(e.Transition,{name:`motion-${t.placement}`},{default:e.withCtx(()=>[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["drawer-container",`drawer-${t.placement}`]),style:e.normalizeStyle(w.value)},[e.createElementVNode("div",k,[t.destroyOnClose?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",N,[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["drawer-header",t.headerClass]),style:e.normalizeStyle(t.headerStyle)},[e.createElementVNode("div",V,[t.closable?(e.openBlock(),e.createElementBlock("svg",{key:0,focusable:"false",class:"svg-close","data-icon":"close",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896",onClick:d},[...s[0]||(s[0]=[e.createElementVNode("path",{d:"M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"},null,-1)])])):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("div",B,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)],!0)])):e.createCommentVNode("",!0)]),u.value?(e.openBlock(),e.createElementBlock("div",E,[e.renderSlot(t.$slots,"extra",{},()=>[e.createTextVNode(e.toDisplayString(t.extra),1)],!0)])):e.createCommentVNode("",!0)],6),[[e.vShow,i.value]]),e.createVNode(e.unref(f.default),e.normalizeProps(e.guardReactiveProps(t.scrollbarProps)),{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["drawer-body",t.bodyClass]),style:e.normalizeStyle(t.bodyStyle)},[e.renderSlot(t.$slots,"default",{},void 0,!0)],6)]),_:3},16),m.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["drawer-footer",t.footerClass]),style:e.normalizeStyle(t.footerStyle)},[e.renderSlot(t.$slots,"footer",{},()=>[e.createTextVNode(e.toDisplayString(t.footer),1)],!0)],6)):e.createCommentVNode("",!0)])),t.destroyOnClose&&l.value?(e.openBlock(),e.createElementBlock("div",b,[e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["drawer-header",t.headerClass]),style:e.normalizeStyle(t.headerStyle)},[e.createElementVNode("div",g,[t.closable?(e.openBlock(),e.createElementBlock("svg",{key:0,focusable:"false",class:"svg-close","data-icon":"close",width:"1em",height:"1em",fill:"currentColor","aria-hidden":"true",viewBox:"64 64 896 896",onClick:d},[...s[1]||(s[1]=[e.createElementVNode("path",{d:"M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"},null,-1)])])):e.createCommentVNode("",!0),c.value?(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(t.$slots,"title",{},()=>[e.createTextVNode(e.toDisplayString(t.title),1)],!0)])):e.createCommentVNode("",!0)]),u.value?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(t.$slots,"extra",{},()=>[e.createTextVNode(e.toDisplayString(t.extra),1)],!0)])):e.createCommentVNode("",!0)],6),[[e.vShow,i.value]]),e.createVNode(e.unref(f.default),e.normalizeProps(e.guardReactiveProps(t.scrollbarProps)),{default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["drawer-body",t.bodyClass]),style:e.normalizeStyle(t.bodyStyle)},[e.renderSlot(t.$slots,"default",{},void 0,!0)],6)]),_:3},16),m.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["drawer-footer",t.footerClass]),style:e.normalizeStyle(t.footerStyle)},[e.renderSlot(t.$slots,"footer",{},()=>[e.createTextVNode(e.toDisplayString(t.footer),1)],!0)],6)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)])],6),[[e.vShow,l.value]])]),_:3},8,["name"])],544))}});exports.default=D;