@dialpad/dialtone/dist/vue3/resizable_handle-RIKS8frB.cjs

Dialpad's Dialtone design system monorepo

require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./resizable_utils-DhuzXRdP.cjs`),t=require(`./useResizableCalculations-BDITle3Q.cjs`);let n=require(`vue`);var r={resizeAnnouncement:`{beforeId}: {beforePx}px, {afterId}: {afterPx}px`,collapseAnnouncement:`{panelId} collapsed`,expandAnnouncement:`{panelId} expanded`,resetAnnouncement:`{beforeId} and {afterId} reset`,ariaValueText:`{panelId}: {pixels}px`,handleAriaLabel:`Resize handle between {before} and {after} panels`},i={fine:1,normal:8,large:24};function a(a){let{panels:o,direction:s,containerSize:c,beforePanelId:l,afterPanelId:u,handleElement:d,onResize:f,onCollapse:p,onReset:m,onSizeAnnouncement:h,messages:g}=a,_={...r,...g},v=(0,n.ref)(!1),y=t.t(()=>c.value);function b(){return{beforePanel:o.value.find(e=>e.id===l.value),afterPanel:o.value.find(e=>e.id===u.value)}}function x(e){return e.metaKey||e.ctrlKey?i.fine:e.shiftKey?i.large:i.normal}function S(e,t){return t===`row`?{ArrowLeft:`decrease`,ArrowRight:`increase`}[e]||null:{ArrowUp:`decrease`,ArrowDown:`increase`}[e]||null}function C(e,t){let n=Math.round(e.pixelSize),r=Math.round(t.pixelSize);return _.resizeAnnouncement.replace(`{beforeId}`,e.id).replace(`{afterId}`,t.id).replace(`{beforePx}`,String(n)).replace(`{afterPx}`,String(r))}function w(e,t,n,r,i){e.style.insetInlineStart=e.style.insetInlineStart||`0px`,e.style.insetInlineEnd=`${i}px`,e.style.inlineSize=``,t.style.insetInlineStart=`${r}px`,t.style.inlineSize=``,n&&(n.style.insetInlineStart=`${Math.max(0,r-2)}px`)}function T(e,t,n){e.style.insetInlineStart=``,e.style.insetInlineEnd=``,e.style.inlineSize=``,t.style.insetInlineStart=``,t.style.inlineSize=``,n&&(n.style.insetInlineStart=``)}function E(t,n,r,i){let a=Math.round(r),o=Math.round(i),s=r,p=d.value?.closest(`.d-resizable`),m=null,h=null,g=null;if(p&&(m=p.querySelector(`[data-panel-id="${l.value}"]`),h=p.querySelector(`[data-panel-id="${u.value}"]`),g=p.querySelector(`[data-handle-id="${e.f(l.value,u.value)}"]`),m&&h)){let e=c.value-s;w(m,h,g,s,e)}f(l.value,a,u.value,o),m&&h&&T(m,h,g)}function D(t,n,r,i){let a=r===`increase`?i:-i,s=t.pixelSize+a,d=y.processResizeMove(s,t,n,c.value,e.f(l.value,u.value),o.value,0);return d.isValidResize?(E(t,n,d.beforePanelSize,d.afterPanelSize),h&&h(C(t,n)),!0):!1}function O(e){let t=S(e.key,s.value);if(!t)return;e.preventDefault(),e.stopPropagation();let{beforePanel:n,afterPanel:r}=b();!n||!r||D(n,r,t,x(e))}function k(e){let{beforePanel:t}=b();if(!t?.collapsible||!p)return;e.preventDefault();let n=!t.collapsed;p(t.id,n),h&&h((n?_.collapseAnnouncement:_.expandAnnouncement).replace(`{panelId}`,t.id))}function A(e){e.preventDefault();let{beforePanel:t,afterPanel:n}=b();if(!t||!n)return;let r=(t.userMinSizePixels??10)-t.pixelSize;r!==0&&D(t,n,r>0?`increase`:`decrease`,Math.abs(r))}function j(e){e.preventDefault();let{beforePanel:t,afterPanel:n}=b();if(!t||!n)return;let r=n.userMinSizePixels??10,i=t.userMaxSizePixels??c.value-r,a=Math.min(i,c.value-r)-t.pixelSize;a!==0&&D(t,n,a>0?`increase`:`decrease`,Math.abs(a))}function M(e){if(e.ctrlKey||e.metaKey||e.altKey||e.shiftKey)return;e.preventDefault();let{beforePanel:t,afterPanel:n}=b();!t||!n||!m||(m(t.id,n.id),h&&h(_.resetAnnouncement.replace(`{beforeId}`,t.id).replace(`{afterId}`,n.id)))}function N(e){e.preventDefault(),d.value?.blur()}function P(e){if(v.value){switch(e.key){case`Enter`:k(e);return;case`Home`:A(e);return;case`End`:j(e);return;case`r`:case`R`:M(e);return;case`Escape`:N(e);return}O(e)}}function F(){v.value=!0}function I(){v.value=!1}function L(){d.value?.focus()}return{isFocused:v,focusHandle:L,handleKeyDown:P,handleFocus:F,handleBlur:I,KEYBOARD_INCREMENTS:i}}var o=[`data-handle-id`,`tabindex`,`aria-orientation`,`aria-label`,`aria-valuenow`,`aria-valuemin`,`aria-valuemax`,`aria-controls`,`aria-valuetext`,`aria-disabled`],s={__name:`resizable_handle`,props:{beforePanelId:{type:String,default:null},afterPanelId:{type:String,default:null},disabled:{type:Boolean,default:!1},class:{type:[String,Object,Array],default:``},disableResetOnDoubleClick:{type:Boolean,default:!1},resetBehavior:{type:String,default:`both`},ariaLabel:{type:String,default:null}},setup(t){let r=t,i=(0,n.inject)(e.d,null),s=i?.layout??(0,n.computed)(()=>({panels:new Map,handles:[]})),c=i?.panels??(0,n.computed)(()=>[]),l=i?.direction??(0,n.computed)(()=>`row`),u=i?.containerSize??(0,n.computed)(()=>1e3),d=i?.activeHandleId??(0,n.computed)(()=>void 0),f=i?.startResize??(()=>{}),p=i?.resetPanels??(()=>{}),m=i?.registerHandle??(()=>0),h=i?.unregisterHandle??(()=>{}),g=i?.saveToStorage??null,_=i?.collapsePanel??null,v=i?.commitPanelSize??null,y=i?.announce??null,b=i?.panelMap??(0,n.computed)(()=>new Map),x=i?.messages??{},S=(0,n.getCurrentInstance)(),C=(0,n.ref)(0),w=(0,n.computed)(()=>{let t=s.value;if(t.handles.length===0)return null;if(r.beforePanelId&&r.afterPanelId){let n=e.f(r.beforePanelId,r.afterPanelId);return t.handles.find(e=>e.id===n)??null}return t.handles[C.value]??null}),T=(0,n.computed)(()=>w.value?.id??``),E=(0,n.computed)(()=>w.value?.beforePanelId??r.beforePanelId??``),D=(0,n.computed)(()=>w.value?.afterPanelId??r.afterPanelId??``),O=(0,n.computed)(()=>!!(T.value&&d.value===T.value)),k=(0,n.computed)(()=>r.disabled||(w.value?.disabled??!1)),A=l,j=(0,n.computed)(()=>{let e=w.value;return e?{insetInlineStart:`${Math.max(0,e.left)}px`,visibility:``,...z.value}:{visibility:`hidden`}}),M=(0,n.computed)(()=>{if(r.ariaLabel)return r.ariaLabel;let e=E.value||`first`,t=D.value||`second`;return(x.handleAriaLabel??`Resize handle between {before} and {after} panels`).replace(`{before}`,e).replace(`{after}`,t)}),N=(0,n.computed)(()=>{let e=b.value.get(E.value);return e?(x.ariaValueText??`{panelId}: {pixels}px`).replace(`{panelId}`,E.value).replace(`{pixels}`,String(Math.round(e.pixelSize))):``}),P=(0,n.computed)(()=>{let t=b.value.get(E.value),n=u.value;return!t||!n?0:Math.floor(e.s(t.collapsed?0:t.pixelSize||0,n))}),F=(0,n.computed)(()=>{let t=b.value.get(E.value),n=u.value;return!t||!n?0:Math.floor(e.s(t.userMinSizePixels||0,n))}),I=(0,n.computed)(()=>{let t=b.value.get(E.value),n=u.value;return!t||!n?100:Math.floor(e.s(t.userMaxSizePixels||n,n))}),L=(0,n.ref)(null),R=a({panels:c,direction:l,containerSize:u,beforePanelId:E,afterPanelId:D,handleElement:L,onResize(e,t,n,r){v?(v(e,t),v(n,r)):g?.()},onCollapse(e,t){_?.(e,t)},onReset(e,t){p?.(e,t,`both`)},onSizeAnnouncement(e){y?.(e)},messages:x}),z=i?.offsetHandleStyles??(0,n.computed)(()=>({}));(0,n.onMounted)(()=>{m(S);let e=L.value;if(e?.parentElement){let t=Array.from(e.parentElement.querySelectorAll(`.d-resizable-handle`)).indexOf(e);t>=0&&(C.value=t)}}),(0,n.onUnmounted)(()=>{h(S)});function B(e){k.value||(e.preventDefault(),f(T.value))}function V(){if(r.disableResetOnDoubleClick||k.value)return;let e=E.value,t=D.value;!e||!t||p(e,t,r.resetBehavior)}function H(e){R.handleKeyDown(e)}function U(){R.handleFocus()}function W(){R.handleBlur()}return(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`handleElement`,ref:L,class:(0,n.normalizeClass)([`d-resizable-handle`,`d-resizable-handle--${(0,n.unref)(A)}`,r.class,{"d-resizable-handle--active":O.value,"d-resizable-handle--disabled":k.value}]),style:(0,n.normalizeStyle)(j.value),"data-handle-id":T.value,tabindex:k.value?`-1`:`0`,role:`separator`,"aria-orientation":(0,n.unref)(A)===`row`?`vertical`:`horizontal`,"aria-label":M.value,"aria-valuenow":P.value,"aria-valuemin":F.value,"aria-valuemax":I.value,"aria-controls":`dt-resizable-panel-${E.value}`,"aria-valuetext":N.value,"aria-disabled":k.value||void 0,onPointerdown:B,onDblclick:V,onKeydown:H,onFocus:U,onBlur:W},[...t[0]||(t[0]=[(0,n.createElementVNode)(`div`,{class:`d-resizable-handle__indicator`},null,-1)])],46,o))}};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
//# sourceMappingURL=resizable_handle-RIKS8frB.cjs.map