vue-devui/panel/index.umd.js

DevUI components based on Vite and Vue3

(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue))})(this,function(l,e){"use strict";const y={type:{type:String,default:"default"},cssClass:{type:String,default:""},isCollapsed:{type:Boolean,default:!1},beforeToggle:{type:Function,default:null},showAnimation:{type:Boolean,default:!0},hasLeftPadding:{type:Boolean,default:!0}},v=e.reactive({});class f{static getByKey(n){return v[n]}static state(){return v}static setData(n,c){v[n]=e.ref(c)}}var T="",h=e.defineComponent({name:"DPanel",props:y,emits:["toggle"],setup(a,n){e.provide("beforeToggle",a.beforeToggle),e.provide("showAnimation",e.computed(()=>a.showAnimation)),e.provide("hasLeftPadding",e.computed(()=>a.hasLeftPadding));const c=e.ref(a.isCollapsed),g=e.computed(()=>a.type),u=e.computed(()=>a.cssClass),t=new Date().getTime().toString()+Math.random(),d=()=>{n.emit("toggle",f.getByKey(`isCollapsed[${t}]`))};return f.setData(`isCollapsed[${t}]`,c.value),()=>{var p,o;return e.createVNode("div",{onClick:d,class:`devui-panel devui-panel-${g.value} ${u.value}`},[(o=(p=n.slots).default)==null?void 0:o.call(p)])}}}),P=e.defineComponent({name:"DPanelHeader",props:y,emits:["toggle"],setup(a,n){const c=e.inject("beforeToggle"),u=Object.keys(f.state()).pop(),t=e.ref(f.state()[u]),d=e.ref();let p=null;const o=e.ref(t.value);let m=!0;const r=()=>{if(o.value=!o.value,!d.value){o.value&&(f.setData(`${u}`,o.value),t.value=o.value,n.emit("toggle",o.value));return}o.value!==void 0&&(f.setData(`${u}`,o.value),t.value=o.value,n.emit("toggle",o.value))},s=async()=>{if(c){const i=c(t,r);typeof i!="undefined"?i instanceof Promise?m=await i:m=i:m=!0}return m};s().then(i=>d.value=i);const $=()=>{s().then(i=>{if(d.value=i,!i){t.value||(f.setData(`${u}`,!t.value),t.value=!t.value,n.emit("toggle",t.value));return}t.value!==void 0&&(f.setData(`${u}`,!t.value),t.value=!t.value,n.emit("toggle",t.value))})};return()=>{var i,b;return n.slots.default&&(p=e.createVNode("div",{class:"devui-panel-heading",onClick:$,style:{cursor:d.value?"pointer":"auto"}},[(b=(i=n.slots).default)==null?void 0:b.call(i)])),p}}}),C=e.defineComponent({name:"DPanelBody",props:y,setup(a,n){const c=e.inject("showAnimation"),g=e.inject("hasLeftPadding"),t=Object.keys(f.state()).pop(),d=f.state(),p=e.ref();e.onMounted(()=>{if(p.value){const r=p.value;d[t]&&(r.style.height=`${r.offsetHeight}px`)}});const o=r=>{const s=r;s.style.height="";const $=s.offsetHeight;s.style.height="0px",s.offsetHeight,s.style.height=`${$}px`},m=r=>{const s=r;s.style.height="0px"};return()=>e.createVNode("div",{class:`devui-panel devui-panel-${a.type} ${a.cssClass}`},[e.createVNode(e.Transition,{name:c.value?"devui-panel":"",onEnter:o,onLeave:m},{default:()=>{var r,s;return[d[t]===void 0||d[t]?e.createVNode("div",{ref:p,class:`devui-panel-body ${d[t]!==void 0?"devui-panel-body-collapse":""} ${g.value?"":"no-left-padding"}`},[e.createVNode("div",{class:"devui-panel-content"},[(s=(r=n.slots).default)==null?void 0:s.call(r)])]):null]}})])}}),F=e.defineComponent({name:"DPanelFooter",setup(a,n){return()=>{var g,u;return n.slots.default?e.createVNode("div",{class:"devui-panel-footer"},[(u=(g=n.slots).default)==null?void 0:u.call(g)]):null}}}),D={title:"Panel \u9762\u677F",category:"\u901A\u7528",status:"100%",deprecated:{value:!0,reason:"Panel \u662F\u6298\u53E0\u9762\u677F\u7684\u4E00\u79CD\u7279\u6B8A\u5F62\u6001\uFF0C\u5E94\u8BE5\u4F7F\u7528\u66F4\u901A\u7528\u7684 Collapse \u66FF\u4EE3\u3002"},install(a){a.component(h.name,h),a.component(P.name,P),a.component(C.name,C),a.component(F.name,F)}};l.Panel=h,l.PanelBody=C,l.PanelFooter=F,l.PanelHeader=P,l.default=D,l.panelProps=y,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});