@dialpad/dialtone/dist/vue3/lib/resizable/resizable-panel.cjs

Dialpad's Dialtone design system monorepo

Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../resizable_utils-DhuzXRdP.cjs`);let t=require(`vue`);var n=[`id`,`data-panel-id`],r={__name:`resizable_panel`,props:{id:{type:String,required:!0},initialSize:{type:String,default:void 0},userMinSize:{type:String,default:void 0},userMaxSize:{type:String,default:void 0},systemMinSize:{type:String,default:void 0},systemMaxSize:{type:String,default:void 0},collapseSize:{type:String,default:void 0},resizable:{type:Boolean,default:!0},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},class:{type:[String,Object,Array],default:``}},setup(r){let i=r,a=[`initialSize`,`userMinSize`,`userMaxSize`,`systemMinSize`,`systemMaxSize`,`collapseSize`];(0,t.watch)(()=>a.map(e=>i[e]),t=>t.forEach((t,n)=>{t!==void 0&&!e.a(t)&&console.error(`[DtResizablePanel] Invalid ${a[n]}: "${t}".`)}),{immediate:!0});let o=(0,t.inject)(e.d,null),s=o?.layout??(0,t.computed)(()=>({panels:new Map,handles:[]})),c=o?.isResizing??(0,t.computed)(()=>!1),l=o?.offsetContentStyles??(0,t.computed)(()=>({})),u=o?.registerPanel??null,d=o?.unregisterPanel??null,f=(0,t.computed)(()=>({id:i.id,initialSize:i.initialSize,userMinSize:i.userMinSize,userMaxSize:i.userMaxSize,systemMinSize:i.systemMinSize,systemMaxSize:i.systemMaxSize,collapseSize:i.collapseSize,resizable:i.resizable??!0,collapsible:i.collapsible??!1,collapsed:i.collapsed??!1}));(0,t.onMounted)(()=>{u&&u(f.value)}),(0,t.onUnmounted)(()=>{d&&d(i.id)}),(0,t.watch)(f,()=>{u&&u(f.value)},{deep:!0});let p=o?.collapsePanel??null,m=o?.isInitializing??(0,t.computed)(()=>!1);(0,t.watch)(()=>i.collapsed,e=>{m.value||p&&e!==void 0&&p(i.id,e)},{immediate:!0});let h=o?.panelMap??(0,t.computed)(()=>new Map),g=(0,t.computed)(()=>h.value.get(i.id)),_=(0,t.computed)(()=>{let e=s.value.panels.get(i.id);return e?e.collapsed?{insetInlineStart:`${e.left}px`,inlineSize:`0px`,overflow:`hidden`,pointerEvents:`none`}:{insetInlineStart:`${e.left}px`,insetInlineEnd:`${e.right}px`}:{insetInlineStart:`0px`,inlineSize:`0px`,pointerEvents:`none`}});return(e,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{id:`dt-resizable-panel-${i.id}`,class:(0,t.normalizeClass)([`d-resizable-panel`,[i.class,{"d-resizable-panel--collapsed":g.value&&g.value.collapsed===!0,"d-resizable-panel--fixed":g.value&&g.value.resizable===!1}]]),style:(0,t.normalizeStyle)(_.value),"data-panel-id":i.id,"data-qa":`d-resizable-panel`},[(0,t.createElementVNode)(`div`,{class:`d-resizable-panel__content`,style:(0,t.normalizeStyle)((0,t.unref)(l))},[(0,t.renderSlot)(e.$slots,`default`,{panel:g.value,isCollapsed:g.value?.collapsed,isResizing:(0,t.unref)(c)})],4)],14,n))}};exports.default=r;
//# sourceMappingURL=resizable-panel.cjs.map