@soybeanjs/headless 0.30.0 → 0.40.0-beta.2

package/dist/components/slider/types.d.ts

@@ -1,6 +1,6 @@
 import { DataOrientation, Direction, Side, UiClass } from "../../types/common.js";
 import { FormFieldCommonProps } from "../../types/component.js";
-import { BaseProps, PropsToContext } from "../../types/vue.js";
+import { BaseProps, ToContext } from "../../types/vue.js";
 import "../../types/index.js";
 import { PrimitiveWithBaseProps } from "../primitive/types.js";
 import { ComputedRef, ShallowRef } from "vue";
@@ -8,11 +8,11 @@ import { ComputedRef, ShallowRef } from "vue";
 /**
  * Type information for SliderThumbAlignment.
  */
-type SliderThumbAlignment = 'contain' | 'overflow';
+export type SliderThumbAlignment = 'contain' | 'overflow';
 /**
  * Properties for the SliderRoot component.
  */
-interface SliderRootProps extends FormFieldCommonProps, PrimitiveWithBaseProps {
+export interface SliderRootProps extends FormFieldCommonProps, PrimitiveWithBaseProps {
   /** The controlled value of the slider. Can be bind as `v-model`. */
   modelValue?: number[];
   /** The initial value of the slider when uncontrolled. */
@@ -39,7 +39,7 @@ interface SliderRootProps extends FormFieldCommonProps, PrimitiveWithBaseProps {
 /**
  * Events for the SliderRoot component.
  */
-type SliderRootEmits = {
+export type SliderRootEmits = {
   /** Event handler called when the slider value changes. */
   'update:modelValue': [value: number[]];
   /** Event handler called when a slider interaction is committed. */
@@ -48,22 +48,22 @@ type SliderRootEmits = {
 /**
  * Properties for the SliderTrack component.
  */
-interface SliderTrackProps extends PrimitiveWithBaseProps {}
+export interface SliderTrackProps extends PrimitiveWithBaseProps {}
 /**
  * Properties for the SliderRange component.
  */
-interface SliderRangeProps extends PrimitiveWithBaseProps {}
+export interface SliderRangeProps extends PrimitiveWithBaseProps {}
 /**
  * Properties for the SliderThumb component.
  */
-interface SliderThumbProps extends PrimitiveWithBaseProps {
+export interface SliderThumbProps extends PrimitiveWithBaseProps {
   /** The thumb index in the current slider value array. */
   index: number;
 }
 /**
  * Slot properties for the SliderCompact component.
  */
-interface SliderCompactSlotProps {
+export interface SliderCompactSlotProps {
   /**
    * Current model value.
    */
@@ -80,7 +80,7 @@ interface SliderCompactSlotProps {
 /**
  * Properties for the SliderCompact component.
  */
-interface SliderCompactProps extends SliderRootProps {
+export interface SliderCompactProps extends SliderRootProps {
   /**
    * Properties forwarded to the track element.
    */
@@ -97,11 +97,11 @@ interface SliderCompactProps extends SliderRootProps {
 /**
  * Events for the SliderCompact component.
  */
-type SliderCompactEmits = SliderRootEmits;
+export type SliderCompactEmits = SliderRootEmits;
 /**
  * Slots for the SliderCompact component.
  */
-type SliderCompactSlots = {
+export type SliderCompactSlots = {
   /**
    * Custom content for the default slot.
    */
@@ -110,11 +110,11 @@ type SliderCompactSlots = {
 /**
  * Type information for SliderSlideDirection.
  */
-type SliderSlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top';
+export type SliderSlideDirection = 'from-left' | 'from-right' | 'from-bottom' | 'from-top';
 /**
  * Context for the SliderRoot component.
  */
-interface SliderRootContext extends PropsToContext<SliderRootProps, 'disabled' | 'orientation' | 'dir' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs' | 'thumbAlignment'> {
+export interface SliderRootContext extends ToContext<SliderRootProps, 'disabled' | 'orientation' | 'dir' | 'inverted' | 'min' | 'max' | 'step' | 'minStepsBetweenThumbs' | 'thumbAlignment'> {
   /**
    * Current model value.
    */
@@ -199,10 +199,9 @@ interface SliderRootContext extends PropsToContext<SliderRootProps, 'disabled' |
 /**
  * Available UI slots for the Slider component.
  */
-type SliderUiSlot = 'root' | 'track' | 'range' | 'thumb';
+export type SliderUiSlot = 'root' | 'track' | 'range' | 'thumb';
 /**
  * UI class overrides for the Slider component.
  */
-type SliderUi = UiClass<SliderUiSlot>;
-//#endregion
-export { SliderCompactEmits, SliderCompactProps, SliderCompactSlotProps, SliderCompactSlots, SliderRangeProps, SliderRootContext, SliderRootEmits, SliderRootProps, SliderSlideDirection, SliderThumbAlignment, SliderThumbProps, SliderTrackProps, SliderUi, SliderUiSlot };
+export type SliderUi = UiClass<SliderUiSlot>;
+//#endregion

package/dist/components/slot/slot.d.ts

@@ -1,4 +1,3 @@
 //#region src/components/slot/slot.d.ts
-declare const Slot: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
-//#endregion
-export { Slot };
+export declare const Slot: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+//#endregion

package/dist/components/slot/slot.js

@@ -1 +1 @@
-import{getRawChildren as e}from"../../shared/vue.js";import"../../shared/index.js";import{Comment as t,cloneVNode as n,defineComponent as r}from"vue";const i=r((r,{slots:i,attrs:a})=>()=>{if(!i.default)return null;let r=e(i.default());if(!r?.length)return null;let o=r.find(e=>e.type!==t);return o?n(o,a,!0):null},{name:`Slot`});export{i as Slot};
+import{getRawChildren as e}from"../../shared/vue.js";import{Comment as t,cloneVNode as n,defineComponent as r}from"vue";const i=r((r,{slots:i,attrs:a})=>()=>{if(!i.default)return null;let r=e(i.default());if(!r?.length)return null;let o=r.find(e=>e.type!==t);return o?n(o,a,!0):null},{name:`Slot`});export{i as Slot};

package/dist/components/split-nav/context.d.ts

@@ -0,0 +1,9 @@
+import { UiClass } from "../../types/common.js";
+import { SplitNavUiSlot } from "./types.js";
+import "../../index.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import "../../composables/index.js";
+//#region src/components/split-nav/context.d.ts
+declare const provideSplitNavUi: (ui: import("vue").ComputedRef<Partial<UiClass<SplitNavUiSlot>>>) => import("vue").ComputedRef<Partial<UiClass<SplitNavUiSlot>>>, useSplitNavUi: UseUiConsumer<SplitNavUiSlot>;
+//#endregion
+export { provideSplitNavUi };

package/dist/components/split-nav/context.js

@@ -0,0 +1 @@
+import{useContext as e}from"../../composables/use-context.js";import{useDirection as t}from"../config-provider/context.js";import{useUiContext as n}from"../../composables/use-ui-context.js";import{provideMenuUi as r}from"../menu/context.js";import{provideTreeMenuUi as i}from"../tree-menu/context.js";import{provideTreeNavUi as a}from"../tree-nav/context.js";import{computed as o}from"vue";const[s,c]=e(`SplitNavRoot`,e=>{let n=t(e.dir);return{...e,dir:n}}),[l,u]=n(`SplitNavUi`,e=>(a(o(()=>({}))),r(o(()=>({}))),i(o(()=>({}))),e));export{s as provideSplitNavRootContext,l as provideSplitNavUi,c as useSplitNavRootContext,u as useSplitNavUi};

package/dist/components/split-nav/dual-vertical-pane.js

@@ -0,0 +1 @@
+import{keysOf as e}from"../../shared/guard.js";import{Primitive as t}from"../primitive/primitive.js";import{isPaneBoundaryKey as n,toMountedTarget as r,toTreeMenuOptions as i}from"./shared.js";import{useSplitNavRootContext as a,useSplitNavUi as o}from"./context.js";import s from"../tree-menu/tree-menu-compact.js";import{useSplitNavDerived as c,useSplitNavPaneFallback as l,useSplitNavTreePane as u}from"./hooks.js";import d from"./vertical-first-level-menu.js";import{Teleport as ee,computed as f,createBlock as p,createCommentVNode as m,createElementBlock as h,createSlots as g,createVNode as _,defineComponent as v,guardReactiveProps as y,mergeProps as b,normalizeClass as x,normalizeProps as S,normalizeStyle as C,openBlock as w,renderList as T,renderSlot as E,unref as D,useSlots as O,withCtx as k}from"vue";const A=[`data-state`],j=v({name:`SplitNavDualVerticalPane`,__name:`dual-vertical-pane`,props:{items:{}},setup(v){let j=v,M=O(),N=o(),{dir:P,mode:F,openPath:I,railItemElements:L,rootAttrs:te,verticalMountedId:R}=a(`SplitNavDualVerticalPane`),z=f(()=>F.value===`dual-vertical`),B=f(()=>z.value?{...te.value,"data-soybean-split-nav-root":``,"data-mode":F.value}:{}),{activeItem:V,firstLevelItems:H,childItems:U}=c(()=>j.items),{onPaneKeydown:W}=l(V),{collapsed:G,collapsedWidth:K,modelValue:q,treePaneState:J,treePaneStyle:Y,handleTreeSelect:X,handleCollapsedChange:Z}=u(),Q=f(()=>i(U.value)),$=f(()=>r(R.value)),ne=f(()=>e(M).filter(e=>e===`item`||e===`item-leading`||e===`item-trailing`));function re(e){let t=e.currentTarget;if(!n(e,t,e=>e===`ArrowUp`))return;let r=t.querySelector(`[data-soybean-collection-item]`);if(t.hasAttribute(`data-soybean-split-nav-root`)&&r?.closest(`[data-soybean-split-nav-first-level-item]`))return;let i=r?.getAttribute(`data-value`)===V.value?.value?I.value[0]:V.value?.value;i&&(e.preventDefault(),L.get(i)?.focus())}return(e,n)=>(w(),p(ee,{defer:``,to:$.value,disabled:!$.value},[_(D(t),b(B.value,{class:D(N).verticalPane,dir:D(P),"data-soybean-split-nav-dual-vertical":``,onKeydown:D(W),onKeydownCapture:re}),{default:k(()=>[_(d,{items:D(H)},g({_:2},[M[`first-level-item`]?{name:`first-level-item`,fn:k(t=>[E(e.$slots,`first-level-item`,S(y(t)))]),key:`0`}:void 0]),1032,[`items`]),Q.value.length?(w(),h(`div`,{key:0,"data-soybean-split-nav-sub-vertical":``,class:x(D(N).subVertical),"data-state":D(J),style:C(D(Y))},[_(D(s),{items:Q.value,"model-value":D(q),collapsed:D(G),"collapsed-width":D(K),"expand-strategy":`selected`,"onUpdate:modelValue":D(X),"onUpdate:collapsed":D(Z)},g({_:2},[T(ne.value,t=>({name:t,fn:k(n=>[E(e.$slots,t,S(y(n)))])}))]),1032,[`items`,`model-value`,`collapsed`,`collapsed-width`,`onUpdate:modelValue`,`onUpdate:collapsed`])],14,A)):m(`v-if`,!0)]),_:3},16,[`class`,`dir`,`onKeydown`])],8,[`to`,`disabled`]))}});export{j as default};

package/dist/components/split-nav/first-level-item.js

@@ -0,0 +1 @@
+import{getDisclosureState as e}from"../../shared/value.js";import{useForwardElement as t}from"../../composables/use-forward-element.js";import{useRovingFocusGroupItem as n}from"../../composables/use-roving-focus.js";import r from"../_icon/icon.js";import i from"../button/button.js";import a from"../link/link.js";import{findActivePath as o,focusFirstLevelPaneItem as s,hasVisibleChildren as c,isFirstLevelBackwardExpandKey as l,isFirstLevelExpandKey as u,isFirstLevelForwardExpandKey as d}from"./shared.js";import{useSplitNavRootContext as f,useSplitNavUi as p}from"./context.js";import{computed as m,createBlock as h,createCommentVNode as g,createElementVNode as _,defineComponent as v,mergeProps as y,normalizeClass as b,normalizeProps as x,onBeforeUnmount as S,openBlock as C,renderSlot as w,toDisplayString as T,unref as E,withCtx as D}from"vue";const O=v({name:`SplitNavFirstLevelItem`,__name:`first-level-item`,props:{item:{},orientation:{}},setup(v){let O=v,{dir:k,items:A,mode:j,modelValue:M,openPath:N,railItemElements:P,horizontalMountedId:F,verticalMountedId:I,onItemActivate:L}=f(`SplitNavFirstLevelItem`),R=p(),[,z]=t(e=>{P.set(O.item.value,e)});S(()=>{P.delete(O.item.value)});let B=m(()=>!!(O.item.to||O.item.href)),V=m(()=>c(O.item)),H=m(()=>!V.value&&M.value===O.item.value),U=m(()=>V.value&&N.value.includes(O.item.value)),W=m(()=>!V.value||M.value===O.item.value?!1:o(A.value,M.value).includes(O.item.value)),G=m(()=>e(U.value)),K=m(()=>H.value?`page`:void 0),q=m(()=>V.value?U.value:void 0),{itemProps:J,setItemElement:Y}=n({tabStopId:m(()=>O.item.value),focusable:m(()=>!O.item.disabled),active:m(()=>H.value||U.value)});function X(e){z(e),Y(e)}function Z(e){e&&P.get(e)?.focus()}let Q=m(()=>{if(!B.value)return{};let{disabled:e,to:t,href:n,target:r,external:i}=O.item;return{disabled:e,to:t,href:n,target:r,external:i}});function $(e){O.item.disabled||L(O.item.value,e)}function ee(e){$(e)}function te(e){if(O.item.disabled)return;let t=e.key===`Enter`||e.key===` `,n=V.value&&u(e.key,O.orientation),r=O.orientation===`vertical`&&l(e.key,O.orientation,k.value);if(t||n||r){if(n&&U.value&&d(e.key,O.orientation,k.value)){e.preventDefault(),s({itemElement:e.currentTarget,orientation:O.orientation,mode:j.value,horizontalMountedId:F.value,verticalMountedId:I.value});return}if(r){let t=e.currentTarget.closest(`[data-soybean-split-nav-dual-vertical]`);t&&!t.hasAttribute(`data-soybean-split-nav-root`)&&(e.preventDefault(),Z(N.value[0]));return}(!B.value||e.key===` `||n)&&e.preventDefault(),$(e)}}return(e,t)=>(C(),h(i,y({ref:X},E(J),{"data-soybean-split-nav-first-level-item":``,class:E(R).firstLevelItem,"as-child":B.value,disabled:v.item.disabled,role:`menuitem`,"data-state":G.value,"data-selected":H.value,"data-orientation":v.orientation,"data-disabled":v.item.disabled?``:void 0,"data-value":v.item.value,"data-child-selected":W.value?``:void 0,"aria-current":K.value,"aria-expanded":q.value,onClick:ee,onKeydown:te}),{default:D(()=>[B.value?(C(),h(a,x(y({key:0},Q.value)),{default:D(()=>[w(e.$slots,`default`,{item:v.item,selected:H.value,open:U.value},()=>[v.item.icon?(C(),h(r,{key:0,icon:v.item.icon,class:b(E(R).firstLevelItemIcon),"aria-hidden":!0},null,8,[`icon`,`class`])):g(`v-if`,!0),_(`span`,{class:b(E(R).firstLevelItemLabel)},T(v.item.label),3)])]),_:3},16)):w(e.$slots,`default`,{item:v.item,selected:H.value,open:U.value},()=>[v.item.icon?(C(),h(r,{key:0,icon:v.item.icon,class:b(E(R).firstLevelItemIcon),"aria-hidden":!0},null,8,[`icon`,`class`])):g(`v-if`,!0),_(`span`,{class:b(E(R).firstLevelItemLabel)},T(v.item.label),3)],void 0,1)]),_:3},16,[`class`,`as-child`,`disabled`,`data-state`,`data-selected`,`data-orientation`,`data-disabled`,`data-value`,`data-child-selected`,`aria-current`,`aria-expanded`]))}});export{O as default};

package/dist/components/split-nav/first-level-menu.js

@@ -0,0 +1 @@
+import{useRovingFocusGroup as e}from"../../composables/use-roving-focus.js";import{Primitive as t}from"../primitive/primitive.js";import{flattenFirstLevelItems as n,hasVisibleChildren as r}from"./shared.js";import{useSplitNavRootContext as i,useSplitNavUi as a}from"./context.js";import o from"./first-level-item.js";import{Fragment as s,computed as c,createBlock as l,createCommentVNode as u,createElementBlock as d,defineComponent as f,mergeProps as p,openBlock as m,renderList as h,renderSlot as g,unref as _,useSlots as v,withCtx as y}from"vue";const b=f({name:`SplitNavFirstLevelMenu`,__name:`first-level-menu`,props:{items:{},orientation:{},asChild:{type:Boolean},as:{}},setup(f){let b=f,x=v(),S=a(`firstLevel`),{dir:C,loop:w,modelValue:T,openPath:E}=i(`SplitNavFirstLevelMenu`),D=c(()=>n(b.items)),O=c(()=>!!x[`first-level-item`]),{setContainerElement:k,groupProps:A}=e({orientation:c(()=>b.orientation),dir:C,loop:w,currentTabStopId:c(()=>void 0),defaultCurrentTabStopId:c(()=>void 0),preventScrollOnEntryFocus:c(()=>!1)});function j(e){k(e)}let M=c(()=>b.orientation===`vertical`?{"data-soybean-split-nav-vertical-first-level":``}:{"data-soybean-split-nav-horizontal-first-level":``}),N=c(()=>({...A.value,...M.value}));function P(e){return!r(e)&&T.value===e.value}function F(e){return r(e)&&E.value.includes(e.value)}return(e,n)=>(m(),l(_(t),p(N.value,{ref:j,"data-soybean-split-nav-first-level":``,class:_(S),role:`menubar`,"aria-label":f.orientation===`vertical`?`Vertical navigation`:`Horizontal navigation`,"aria-orientation":f.orientation}),{default:y(()=>[(m(!0),d(s,null,h(D.value,t=>(m(),l(o,{key:t.value,item:t,orientation:f.orientation},{default:y(()=>[O.value?g(e.$slots,`first-level-item`,{item:t,selected:P(t),open:F(t)},void 0,void 0,0):u(`v-if`,!0)]),_:2},1032,[`item`,`orientation`]))),128))]),_:3},16,[`class`,`aria-label`,`aria-orientation`]))}});export{b as default};

package/dist/components/split-nav/hooks.js

@@ -0,0 +1 @@
+import{findActiveInLevel as e,findActivePath as t,flattenFirstLevelItems as n,isFirstLevelBackwardExpandKey as r,isPaneBoundaryKey as i,toVisibleOptions as a}from"./shared.js";import{useSplitNavRootContext as o}from"./context.js";import{computed as s,toValue as c}from"vue";function l(r){let{items:i,modelValue:l,openPath:u}=o(`useSplitNavDerived`),d=s(()=>{let e=c(r);return a(e??i.value)}),f=s(()=>n(d.value)),p=s(()=>t(i.value,l.value)),m=s(()=>e(f.value,u.value)??e(f.value,p.value));return{sourceItems:d,firstLevelItems:f,selectionPath:p,activeItem:m,childItems:s(()=>m.value?.children?.length?a(m.value.children):[])}}function u(){let{collapsed:e,collapsedWidth:t,modelValue:n,onItemActivate:r}=o(`useSplitNavTreePane`),i=s(()=>e.value?`collapsed`:`expanded`),a=s(()=>({"--soybean-split-nav-tree-collapsed-width":`${(t.value??50)/16}rem`}));function c(e){r(e)}function l(t){e.value=t}return{collapsed:e,collapsedWidth:t,modelValue:n,treePaneState:i,treePaneStyle:a,handleTreeSelect:c,handleCollapsedChange:l}}function d(e){let{dir:t,railItemElements:n}=o(`useSplitNavPaneFallback`);function a(t){t.preventDefault();let r=e.value?.value;r&&n.get(r)?.focus()}function s(e){if(e.defaultPrevented||!r(e.key,`vertical`,t.value))return;let n=e.target;n instanceof HTMLElement&&n.closest(`[data-soybean-tree-menu-root]`)&&a(e)}function c(e){let n=e.currentTarget;i(e,n,e=>r(e,`vertical`,t.value))&&a(e)}return{onPaneKeydown:s,onPaneKeydownCapture:c}}export{l as useSplitNavDerived,d as useSplitNavPaneFallback,u as useSplitNavTreePane};

package/dist/components/split-nav/horizontal-dual-vertical-menu.js

@@ -0,0 +1 @@
+import{keysOf as e}from"../../shared/guard.js";import{toMountedTarget as t}from"./shared.js";import{useSplitNavRootContext as n}from"./context.js";import{useSplitNavDerived as r}from"./hooks.js";import i from"./dual-vertical-pane.js";import a from"./horizontal-first-level-menu.js";import{Fragment as o,Teleport as s,computed as c,createBlock as l,createCommentVNode as u,createElementBlock as d,createSlots as f,createVNode as p,defineComponent as m,guardReactiveProps as h,normalizeProps as g,openBlock as _,renderList as v,renderSlot as y,unref as b,useSlots as x,withCtx as S}from"vue";const C=m({name:`SplitNavHorizontalDualVerticalMenu`,__name:`horizontal-dual-vertical-menu`,setup(m){let C=x(),{horizontalMountedId:w}=n(`SplitNavHorizontalDualVerticalMenu`),{firstLevelItems:T,childItems:E}=r(),D=c(()=>t(w.value)),O=c(()=>e(C));return(e,t)=>(_(),d(o,null,[(_(),l(s,{defer:``,to:D.value,disabled:!D.value},[p(a,{items:b(T)},f({_:2},[C[`first-level-item`]?{name:`first-level-item`,fn:S(t=>[y(e.$slots,`first-level-item`,g(h(t)))]),key:`0`}:void 0]),1032,[`items`])],8,[`to`,`disabled`])),b(E).length?(_(),l(i,{key:0,items:b(E)},f({_:2},[v(O.value,t=>({name:t,fn:S(n=>[u(` @vue-expect-error ignore slot type `),y(e.$slots,t,g(h(n)))])}))]),1032,[`items`])):u(`v-if`,!0)],64))}});export{C as default};

package/dist/components/split-nav/horizontal-first-level-menu.js

@@ -0,0 +1 @@
+import e from"./first-level-menu.js";import{createBlock as t,createSlots as n,defineComponent as r,guardReactiveProps as i,normalizeProps as a,openBlock as o,renderSlot as s,useSlots as c,withCtx as l}from"vue";const u=r({name:`SplitNavHorizontalFirstLevelMenu`,__name:`horizontal-first-level-menu`,props:{items:{},asChild:{type:Boolean},as:{}},setup(r){let u=c();return(c,d)=>(o(),t(e,{items:r.items,orientation:`horizontal`},n({_:2},[u[`first-level-item`]?{name:`first-level-item`,fn:l(e=>[s(c.$slots,`first-level-item`,a(i(e)))]),key:`0`}:void 0]),1032,[`items`]))}});export{u as default};

package/dist/components/split-nav/horizontal-vertical-menu.js

@@ -0,0 +1 @@
+import{keysOf as e}from"../../shared/guard.js";import{toMountedTarget as t,toTreeMenuOptions as n}from"./shared.js";import{useSplitNavRootContext as r,useSplitNavUi as i}from"./context.js";import a from"../tree-menu/tree-menu-compact.js";import{useSplitNavDerived as o,useSplitNavPaneFallback as s,useSplitNavTreePane as c}from"./hooks.js";import l from"./horizontal-first-level-menu.js";import{Fragment as u,Teleport as d,computed as f,createBlock as p,createCommentVNode as m,createElementBlock as h,createSlots as g,createVNode as _,defineComponent as v,guardReactiveProps as y,normalizeClass as b,normalizeProps as x,normalizeStyle as S,openBlock as C,renderList as w,renderSlot as T,unref as E,useSlots as D,withCtx as O}from"vue";const k=[`data-state`],A=v({name:`SplitNavHorizontalVerticalMenu`,__name:`horizontal-vertical-menu`,setup(v){let A=D(),j=i(),{verticalMountedId:M,horizontalMountedId:N}=r(`SplitNavHorizontalVerticalMenu`),{activeItem:P,firstLevelItems:F,childItems:I}=o(),{onPaneKeydown:L}=s(P),{collapsed:R,collapsedWidth:z,modelValue:B,treePaneState:V,treePaneStyle:H,handleTreeSelect:U,handleCollapsedChange:W}=c(),G=f(()=>n(I.value)),K=f(()=>t(M.value)),q=f(()=>t(N.value)),J=f(()=>e(A).filter(e=>e===`item`||e===`item-leading`||e===`item-trailing`));return(e,t)=>(C(),h(u,null,[(C(),p(d,{defer:``,to:q.value,disabled:!q.value},[_(l,{items:E(F)},g({_:2},[A[`first-level-item`]?{name:`first-level-item`,fn:O(t=>[T(e.$slots,`first-level-item`,x(y(t)))]),key:`0`}:void 0]),1032,[`items`])],8,[`to`,`disabled`])),(C(),p(d,{defer:``,to:K.value,disabled:!K.value},[G.value.length?(C(),h(`div`,{key:0,"data-soybean-split-nav-sub-vertical":``,class:b(E(j).subVertical),"data-state":E(V),style:S(E(H)),onKeydown:t[0]||=(...e)=>E(L)&&E(L)(...e)},[_(E(a),{items:G.value,"model-value":E(B),collapsed:E(R),"collapsed-width":E(z),"expand-strategy":`selected`,"onUpdate:modelValue":E(U),"onUpdate:collapsed":E(W)},g({_:2},[w(J.value,t=>({name:t,fn:O(n=>[T(e.$slots,t,x(y(n)))])}))]),1032,[`items`,`model-value`,`collapsed`,`collapsed-width`,`onUpdate:modelValue`,`onUpdate:collapsed`])],46,k)):m(`v-if`,!0)],8,[`to`,`disabled`]))],64))}});export{A as default};

package/dist/components/split-nav/index.d.ts

@@ -0,0 +1,4 @@
+import { SplitNavBaseOptionData, SplitNavMode, SplitNavOptionData, SplitNavRootEmits, SplitNavRootProps, SplitNavRootSlots, SplitNavUi, SplitNavUiSlot } from "./types.js";
+import _default from "./split-nav-root.vue.js";
+import { provideSplitNavUi } from "./context.js";
+export { type SplitNavBaseOptionData, type SplitNavMode, type SplitNavOptionData, _default as SplitNavRoot, type SplitNavRootEmits, type SplitNavRootProps, type SplitNavRootSlots, type SplitNavUi, type SplitNavUiSlot, provideSplitNavUi };

package/dist/components/split-nav/index.js

@@ -0,0 +1 @@
+import{provideSplitNavUi as e}from"./context.js";import t from"./split-nav-root.js";export{t as SplitNavRoot,e as provideSplitNavUi};

package/dist/components/split-nav/shared.js

@@ -0,0 +1 @@
+import{COLLECTION_ITEM_ATTRIBUTE as e}from"../../constants/attr.js";function t(e){if(e)return`#${e}`}function n(e){return!!e.children?.some(e=>!e.hidden)}function r(e){return e.filter(e=>!e.hidden).map(e=>{let t=e.children?.length?r(e.children):void 0;return{...e,children:t?.length?t:void 0}})}function i(e){return r(e).flatMap(e=>e.isGroup?e.children?.length?e.children:[]:[e])}function a(e,t,n=[]){if(!t)return[];for(let r of e){let e=[...n,r.value];if(r.value===t)return e;if(r.children?.length){let n=a(r.children,t,e);if(n.length)return n}}return[]}function o(e,t){let r=a(e,t);if(!r.length)return[];let i=g(e,r[r.length-1]);return i&&n(i)?r:r.slice(0,-1)}function s(e,t){return t===`horizontal`?e===`ArrowDown`:e===`ArrowLeft`||e===`ArrowRight`}function c(e,t,n){return t===`horizontal`?e===`ArrowDown`:e===(n===`rtl`?`ArrowLeft`:`ArrowRight`)}const l=`[data-soybean-split-nav-sub-vertical]`,u=`[data-soybean-split-nav-sub-horizontal]`,d={vertical:{"dual-vertical":{mountedIdKey:`verticalMountedId`,paneSelector:l},"vertical-horizontal":{mountedIdKey:`horizontalMountedId`,paneSelector:u},"horizontal-dual-vertical":{mountedIdKey:`verticalMountedId`,paneSelector:l}},horizontal:{"vertical-horizontal":{mountedIdKey:`horizontalMountedId`,paneSelector:u},"horizontal-vertical":{mountedIdKey:`verticalMountedId`,paneSelector:l},"horizontal-dual-vertical":{mountedIdKey:`verticalMountedId`,paneSelector:`[data-soybean-split-nav-vertical-first-level]`}}};function f(e){let{itemElement:t,orientation:n,mode:r,horizontalMountedId:i,verticalMountedId:a}=e,o=r?d[n][r]:void 0;if(!o)return;let s=o.mountedIdKey===`verticalMountedId`?a:i,c=s?document.getElementById(s):null,l=t.closest(`[data-soybean-split-nav-first-level]`);(((c??l?.closest(`[data-soybean-split-nav-dual-vertical]`)??l?.parentElement)?.querySelector(o.paneSelector))?.querySelector(`[data-soybean-roving-focus-item]:not([data-disabled])`))?.focus()}function p(e,t,n){return t===`horizontal`?e===`ArrowUp`:e===(n===`rtl`?`ArrowRight`:`ArrowLeft`)}function m(t,n,r){if(!r(t.key))return!1;let i=(t.target instanceof Element?t.target:null)?.closest(`[${e}]`);if(!i||!n.contains(i))return!1;let a=Array.from(n.querySelectorAll(`[${e}]`)).find(e=>!e.closest(`[data-soybean-tree-menu-collapsible-content]`));return!!a&&a===i}function h(e,t){return e.find(e=>t.includes(e.value))}function g(e,t){for(let n of e){if(n.value===t)return n;if(n.children?.length){let e=g(n.children,t);if(e)return e}}}function _(e){return r(e).map(e=>{let t=e.children?.length?_(e.children):void 0;return{value:e.value,label:e.label,icon:e.icon,disabled:e.disabled,hidden:e.hidden,isGroup:e.isGroup,badge:e.badge,badgeProps:e.badgeProps,tag:e.tag,tagProps:e.tagProps,tooltipProps:e.tooltipProps,dropdownMenuProps:e.dropdownMenuProps,actions:e.actions,actionMenuProps:e.actionMenuProps,onActionSelect:e.onActionSelect,to:e.to,href:e.href,target:e.target,external:e.external,children:t?.length?t:void 0}})}function v(e){return r(e).map(e=>{let t=e.children?.length?v(e.children):void 0;return{value:e.value,label:e.label,icon:e.icon,disabled:e.disabled,hidden:e.hidden,isGroup:e.isGroup,shortcut:e.shortcut,separator:e.separator,to:e.to,href:e.href,target:e.target,external:e.external,children:t?.length?t:void 0}})}export{h as findActiveInLevel,a as findActivePath,g as findNode,i as flattenFirstLevelItems,f as focusFirstLevelPaneItem,n as hasVisibleChildren,p as isFirstLevelBackwardExpandKey,s as isFirstLevelExpandKey,c as isFirstLevelForwardExpandKey,m as isPaneBoundaryKey,t as toMountedTarget,o as toOpenPath,_ as toTreeMenuOptions,v as toTreeNavOptions,r as toVisibleOptions};

package/dist/components/split-nav/split-nav-root.js

@@ -0,0 +1 @@
+import{keysOf as e}from"../../shared/guard.js";import{toContext as t}from"../../shared/vue.js";import{useControllableState as n}from"../../composables/use-controllable-state.js";import{useOmitProps as r}from"../../composables/use-props.js";import{findNode as i,hasVisibleChildren as a,toOpenPath as o}from"./shared.js";import{provideSplitNavRootContext as s}from"./context.js";import c from"./dual-vertical-pane.js";import l from"./horizontal-dual-vertical-menu.js";import u from"./horizontal-vertical-menu.js";import d from"./vertical-horizontal-menu.js";import{computed as f,createBlock as p,createSlots as m,defineComponent as h,guardReactiveProps as g,normalizeProps as _,openBlock as v,renderList as y,renderSlot as b,resolveDynamicComponent as x,shallowRef as S,useAttrs as C,useSlots as w,watch as T,withCtx as E}from"vue";const D=h({name:`SplitNavRoot`,inheritAttrs:!1,__name:`split-nav-root`,props:{dir:{},mode:{default:`dual-vertical`},modelValue:{},defaultValue:{default:``},items:{},horizontalMountedId:{},verticalMountedId:{},loop:{type:Boolean,default:!0},collapsed:{type:Boolean,default:void 0},defaultCollapsed:{type:Boolean,default:!1},collapsedWidth:{default:50},asChild:{type:Boolean},as:{default:`nav`}},emits:[`update:modelValue`,`select`,`open`,`update:collapsed`],setup(h,{emit:D}){let O=h,k=D,A=w(),j=C(),M=r(O,[`mode`,`modelValue`,`defaultValue`,`items`,`horizontalMountedId`,`verticalMountedId`,`dir`,`loop`,`collapsed`,`defaultCollapsed`,`collapsedWidth`],j),N=n(()=>O.modelValue,e=>{k(`update:modelValue`,e)},O.defaultValue),P=n(()=>O.collapsed,e=>{k(`update:collapsed`,e)},O.defaultCollapsed),F=S(o(O.items,N.value)),I=new Map,L={"dual-vertical":c,"vertical-horizontal":d,"horizontal-vertical":u,"horizontal-dual-vertical":l},R=f(()=>L[O.mode]),z=f(()=>e(A));function B(e,t){let n=i(O.items,e);if(!n?.disabled&&(F.value=o(O.items,e),n)){if(a(n)){k(`open`,n,t);return}N.value=e,k(`select`,e,t)}}return s({modelValue:N,collapsed:P,openPath:F,rootAttrs:M,railItemElements:I,onItemActivate:B,...t(O,[`mode`,`items`,`horizontalMountedId`,`verticalMountedId`,`loop`,`dir`,`collapsedWidth`])}),T(N,e=>{F.value=o(O.items,e)}),(e,t)=>(v(),p(x(R.value),null,m({_:2},[y(z.value,t=>({name:t,fn:E(n=>[b(e.$slots,t,_(g(n)))])}))]),1024))}});export{D as default};

package/dist/components/split-nav/split-nav-root.vue.d.ts

@@ -0,0 +1,22 @@
+import { SplitNavBaseOptionData, SplitNavOptionData, SplitNavRootProps, SplitNavRootSlots } from "./types.js";
+//#region src/components/split-nav/split-nav-root.vue.d.ts
+declare const __VLS_export: <T extends SplitNavBaseOptionData = SplitNavBaseOptionData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: import("vue").PublicProps & __VLS_PrettifyLocal<SplitNavRootProps<T> & {
+    onSelect?: ((key: string, event?: Event | undefined) => any) | undefined;
+    onOpen?: ((item: SplitNavOptionData<T>, event?: Event | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: SplitNavRootSlots<T>;
+  emit: ((evt: "select", key: string, event?: Event | undefined) => void) & ((evt: "open", item: SplitNavOptionData<T>, event?: Event | undefined) => void) & ((evt: "update:modelValue", value: string) => void) & ((evt: "update:collapsed", value: boolean) => void);
+}>) => import("vue").VNode & {
+  __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K]; } : { [K in keyof T as K]: T[K]; }) & {};
+//#endregion
+export { _default as default };

package/dist/components/split-nav/types.d.ts

@@ -0,0 +1,187 @@
+import { Direction, UiClass } from "../../types/common.js";
+import "../../types/index.js";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
+import { KbdValue } from "../kbd/types.js";
+import { TreeMenuBaseOptionData } from "../tree-menu/types.js";
+import { ComputedRef, ShallowRef } from "vue";
+//#region src/components/split-nav/types.d.ts
+/**
+ * Available menu shapes for the SplitNav component.
+ *
+ * - `dual-vertical`: level-1 vertical + remaining tree vertical.
+ * - `vertical-horizontal`: level-1 vertical + nested TreeNav.
+ * - `horizontal-vertical`: level-1 horizontal + nested TreeMenu.
+ * - `horizontal-dual-vertical`: level-1 horizontal + nested dual-vertical.
+ */
+export type SplitNavMode = 'dual-vertical' | 'vertical-horizontal' | 'horizontal-vertical' | 'horizontal-dual-vertical';
+/**
+ * Option data for the SplitNav component.
+ *
+ * Extends the vertical `TreeMenuBaseOptionData` so a single tree can feed both
+ * TreeMenu and TreeNav renderers.
+ */
+export interface SplitNavBaseOptionData extends TreeMenuBaseOptionData {
+  /**
+   * The shortcut rendered at the end of a horizontal option.
+   */
+  shortcut?: KbdValue | KbdValue[];
+  /**
+   * Whether to show a separator after a horizontal option.
+   */
+  separator?: boolean;
+}
+/**
+ * Recursive option data for the SplitNav component.
+ */
+export type SplitNavOptionData<T extends SplitNavBaseOptionData = SplitNavBaseOptionData> = Omit<T, 'children'> & {
+  /**
+   * Child options.
+   */
+  children?: SplitNavOptionData<T>[];
+};
+/**
+ * Properties for the SplitNavRoot component.
+ */
+export interface SplitNavRootProps<T extends SplitNavBaseOptionData = SplitNavBaseOptionData> extends Omit<PrimitiveWithBaseProps, 'onSelect'> {
+  /**
+   * The reading direction of the menu when applicable.
+   *
+   * If omitted, inherits globally from `ConfigProvider` or assumes LTR.
+   */
+  dir?: Direction;
+  /**
+   * The menu shape.
+   *
+   * @default 'dual-vertical'
+   */
+  mode?: SplitNavMode;
+  /**
+   * The selected leaf value of the SplitNav component. Can be bound with `v-model`.
+   *
+   * Parent items are not written here; clicking them only opens the nested pane.
+   */
+  modelValue?: string;
+  /**
+   * The selected leaf when initially rendered. Use when you do not need to control the state.
+   */
+  defaultValue?: string;
+  /**
+   * The option data for the SplitNav component.
+   */
+  items: SplitNavOptionData<T>[];
+  /**
+   * The id of the element to mount horizontal menus into (rendered via `Teleport`).
+   *
+   * When unset, the horizontal menus render in place. Pass the element id without `#`.
+   */
+  horizontalMountedId?: string;
+  /**
+   * The id of the element to mount vertical menus into (rendered via `Teleport`).
+   *
+   * When unset, the vertical menus render in place. Pass the element id without `#`.
+   */
+  verticalMountedId?: string;
+  /**
+   * Whether first-level keyboard navigation loops from last item to first and vice versa.
+   *
+   * @default true
+   */
+  loop?: boolean;
+  /**
+   * Whether the nested vertical TreeMenu pane is collapsed.
+   *
+   * Can be bound with `v-model:collapsed`.
+   */
+  collapsed?: boolean;
+  /**
+   * The collapsed state of the nested TreeMenu pane when initially rendered.
+   *
+   * @default false
+   */
+  defaultCollapsed?: boolean;
+  /**
+   * The width of the nested TreeMenu pane when it is collapsed, in pixels.
+   *
+   * @default 50
+   */
+  collapsedWidth?: number;
+}
+/**
+ * Events for the SplitNavRoot component.
+ */
+export type SplitNavRootEmits<T extends SplitNavBaseOptionData = SplitNavBaseOptionData> = {
+  /**
+   * Emitted when the model value changes.
+   */
+  'update:modelValue': [value: string];
+  /**
+   * Emitted when a leaf menu item is chosen.
+   */
+  select: [key: string, event?: Event];
+  /**
+   * Emitted when a menu item with children is activated and its nested pane opens.
+   *
+   * The payload is the complete option data of the activated parent, including
+   * children, so consumers can react to the expansion — for example, activate
+   * the first child at the same time.
+   */
+  open: [item: SplitNavOptionData<T>, event?: Event];
+  /**
+   * Emitted when the nested TreeMenu pane collapsed state changes.
+   */
+  'update:collapsed': [value: boolean];
+};
+/**
+ * Slots for the SplitNavRoot component.
+ */
+export type SplitNavRootSlots<T extends SplitNavBaseOptionData = SplitNavBaseOptionData> = {
+  /**
+   * Custom content for a first-level item.
+   *
+   * `selected` is true for a selected leaf. `open` is true for a parent whose nested pane is showing.
+   */
+  'first-level-item'?: (props: {
+    item: SplitNavOptionData<T>;
+    selected: boolean;
+    open: boolean;
+  }) => any;
+  /**
+   * Custom content for a nested TreeMenu / TreeNav item.
+   */
+  item?: (props: {
+    item: T;
+  }) => any;
+  /**
+   * Custom content for a nested TreeMenu / TreeNav item leading slot.
+   */
+  'item-leading'?: (props: {
+    item: T;
+  }) => any;
+  /**
+   * Custom content for a nested TreeMenu / TreeNav item trailing slot.
+   */
+  'item-trailing'?: (props: {
+    item: T;
+  }) => any;
+  /**
+   * Custom content for a nested TreeNav item trigger icon.
+   */
+  'item-trigger-icon'?: (props: {
+    item: T;
+  }) => any;
+  /**
+   * Custom content for a nested TreeNav item link icon.
+   */
+  'item-link-icon'?: (props: {
+    item: T;
+  }) => any;
+};
+/**
+ * Available UI slots for the SplitNav component.
+ */
+export type SplitNavUiSlot = 'verticalPane' | 'firstLevel' | 'firstLevelItem' | 'firstLevelItemIcon' | 'firstLevelItemLabel' | 'subVertical' | 'subHorizontal';
+/**
+ * UI class overrides for the SplitNav component.
+ */
+export type SplitNavUi = UiClass<SplitNavUiSlot>;
+//#endregion

package/dist/components/split-nav/vertical-first-level-menu.js

@@ -0,0 +1 @@
+import e from"./first-level-menu.js";import{createBlock as t,createSlots as n,defineComponent as r,guardReactiveProps as i,normalizeProps as a,openBlock as o,renderSlot as s,useSlots as c,withCtx as l}from"vue";const u=r({name:`SplitNavVerticalFirstLevelMenu`,__name:`vertical-first-level-menu`,props:{items:{},asChild:{type:Boolean},as:{}},setup(r){let u=c();return(c,d)=>(o(),t(e,{items:r.items,orientation:`vertical`},n({_:2},[u[`first-level-item`]?{name:`first-level-item`,fn:l(e=>[s(c.$slots,`first-level-item`,a(i(e)))]),key:`0`}:void 0]),1032,[`items`]))}});export{u as default};

package/dist/components/split-nav/vertical-horizontal-menu.js

@@ -0,0 +1 @@
+import{keysOf as e}from"../../shared/guard.js";import{toMountedTarget as t,toTreeNavOptions as n}from"./shared.js";import{useSplitNavRootContext as r,useSplitNavUi as i}from"./context.js";import{useSplitNavDerived as a,useSplitNavPaneFallback as o}from"./hooks.js";import s from"./vertical-first-level-menu.js";import c from"../tree-nav/tree-nav-compact.js";import{Fragment as l,Teleport as u,computed as d,createBlock as f,createCommentVNode as p,createElementBlock as m,createSlots as h,createVNode as g,defineComponent as _,guardReactiveProps as v,normalizeClass as y,normalizeProps as b,openBlock as x,renderList as S,renderSlot as C,unref as w,useSlots as T,withCtx as E}from"vue";const D=_({name:`SplitNavVerticalHorizontalMenu`,__name:`vertical-horizontal-menu`,setup(_){let D=T(),O=i(),{dir:k,modelValue:A,verticalMountedId:j,horizontalMountedId:M,onItemActivate:N}=r(`SplitNavVerticalHorizontalMenu`),{activeItem:P,firstLevelItems:F,childItems:I}=a(),{onPaneKeydownCapture:L}=o(P),R=d(()=>n(I.value)),z=d(()=>t(j.value)),B=d(()=>t(M.value)),V=d(()=>e(D).filter(e=>e===`item`||e===`item-leading`||e===`item-trailing`||e===`item-trigger-icon`||e===`item-link-icon`));return(e,t)=>(x(),m(l,null,[(x(),f(u,{defer:``,to:z.value,disabled:!z.value},[g(s,{items:w(F)},h({_:2},[D[`first-level-item`]?{name:`first-level-item`,fn:E(t=>[C(e.$slots,`first-level-item`,b(v(t)))]),key:`0`}:void 0]),1032,[`items`])],8,[`to`,`disabled`])),(x(),f(u,{defer:``,to:B.value,disabled:!B.value},[R.value.length?(x(),m(`div`,{key:0,"data-soybean-split-nav-sub-horizontal":``,class:y(w(O).subHorizontal),onKeydownCapture:t[0]||=(...e)=>w(L)&&w(L)(...e)},[g(w(c),{items:R.value,"model-value":w(A),dir:w(k),"onUpdate:modelValue":w(N)},h({_:2},[S(V.value,t=>({name:t,fn:E(n=>[p(` @vue-expect-error ignore slot type `),C(e.$slots,t,b(v(n)))])}))]),1032,[`items`,`model-value`,`dir`,`onUpdate:modelValue`])],34)):p(`v-if`,!0)],8,[`to`,`disabled`]))],64))}});export{D as default};

package/dist/components/splitter/context.d.ts

@@ -1,8 +1,8 @@
 import { UiClass } from "../../types/common.js";
-import { UseUiConsumer } from "../../composables/use-ui-context.js";
-import "../../composables/index.js";
 import { SplitterUiSlot } from "./types.js";
 import "../../index.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import "../../composables/index.js";
 //#region src/components/splitter/context.d.ts
 declare const provideSplitterUi: (ui: import("vue").ComputedRef<Partial<UiClass<SplitterUiSlot>>>) => import("vue").ComputedRef<Partial<UiClass<SplitterUiSlot>>>, useSplitterUi: UseUiConsumer<SplitterUiSlot>;
 //#endregion

package/dist/components/splitter/context.js

@@ -1 +1 @@
-import{useContext as e}from"../../composables/use-context.js";import{useDirection as t}from"../config-provider/context.js";import{useUiContext as n}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[r,i]=e(`SplitterGroup`,e=>{let n=t(()=>e.dir.value);return{...e,dir:n}}),[a,o]=n(`SplitterUi`);export{r as provideSplitterGroupContext,a as provideSplitterUi,i as useSplitterGroupContext,o as useSplitterUi};
+import{useContext as e}from"../../composables/use-context.js";import{useDirection as t}from"../config-provider/context.js";import{useUiContext as n}from"../../composables/use-ui-context.js";const[r,i]=e(`SplitterGroup`,e=>{let n=t(()=>e.dir.value);return{...e,dir:n}}),[a,o]=n(`SplitterUi`);export{r as provideSplitterGroupContext,a as provideSplitterUi,i as useSplitterGroupContext,o as useSplitterUi};

package/dist/components/splitter/shared.js

@@ -1 +1 @@
-import{clamp as e}from"../../shared/value.js";import"../../shared/index.js";const t=.01;function n(e){return Number(e.toFixed(3))}function r(t){return e(t.minSize.value,0,100)}function i(t){return e(t.collapsedSize.value,0,100)}function a(t,n){return e(t.maxSize.value,n,100)}function o(e){return e.collapsible.value?Math.min(r(e),i(e)):r(e)}function s(o,s){if(!s.collapsible.value)return e(o,r(s),a(s,r(s)));let c=i(s),l=r(s),u=a(s,l),d=e(o,c,u);return d<=c+t?n(c):n(d<l?d<=c+(l-c)/2?c:l:d)}function c(e,i,o){if(Math.abs(o)<=t)return e;let s=[...e],c=o,l=0;for(;Math.abs(c)>t&&l<20;){l+=1;let e=s.map((e,n)=>{let o=i[n];if(!o)return null;let s=r(o),l=a(o,s),u=c>0?l-e:e-s;return u<=t?null:{index:n,room:u}}).filter(Boolean);if(e.length===0)break;for(let t=0;t<e.length;t+=1){let r=e[t];if(!r)continue;let i=e.length-t,a=c/i,o=c>0?Math.min(a,r.room):-Math.min(-a,r.room);s[r.index]=n(s[r.index]+o),c-=o}}if(Math.abs(c)>t){let e=s.findIndex((e,n)=>{let o=i[n];return o?c>0?a(o,r(o))-s[n]>t:s[n]-r(o)>t:!1});e>=0&&(s[e]=n(s[e]+c))}return s}function l(e,i){let o=[...e],s=n(100-o.reduce((e,t)=>e+t,0));if(Math.abs(s)<=t)return o.map(n);let c=o.findIndex((e,n)=>{let o=i[n];if(!o)return!1;let c=r(o),l=a(o,c),u=e+s;return u>=c-t&&u<=l+t});return c>=0&&(o[c]=n(o[c]+s)),o.map(n)}function u(e){return[...e].sort((e,t)=>{let n=e.order.value,r=t.order.value;return n==null&&r==null?e.registrationIndex-t.registrationIndex:n==null?-1:r==null?1:n===r?e.registrationIndex-t.registrationIndex:n-r})}function d(e,n){return e.length===n.length&&e.every((e,r)=>Math.abs(e-(n[r]??0))<=t)}function f(e,r){if(e.length===0)return[];let i=e.map(e=>r?.get(e.id)??e.defaultSize.value),a=i.reduce((e,t)=>e+(t??0),0),o=i.filter(e=>e===void 0).length,s=o>0?Math.max(100-a,0)/o:0,c=i.map(e=>e??s),l=c.reduce((e,t)=>e+t,0);return l<=t?e.map(()=>n(100/e.length)):c.map(e=>n(e/l*100))}function p(t,i){if(i.length===0)return[];let o=t.map((t,o)=>{let s=i[o],c=r(s),l=a(s,c);return n(e(t,c,l))}),s=o.reduce((e,t)=>e+t,0);return o=c(o,i,n(100-s)),l(o,i)}function m(t,i,c,l){let u=i[c],d=i[c+1];if(!u||!d)return t;let f=t[c]+t[c+1],p=o(u),m=o(d),h=Math.min(a(u,r(u)),f-m),g=Math.min(a(d,r(d)),f-p),_=s(t[c]+l,u);_=e(_,p,h);let v=s(f-_,d);v=e(v,m,g),_=e(f-v,p,h),_=s(_,u),v=n(f-_);let y=[...t];return y[c]=n(_),y[c+1]=n(v),y}function h(e,n){if(!(!n.collapsible.value||e===void 0))return e<=i(n)+t?`collapsed`:`expanded`}function g(e,t=100){let i=o(e),s=Math.min(a(e,r(e)),t);return{min:n(i),max:n(s)}}export{d as areLayoutsEqual,f as getDefaultLayout,g as getPanelBounds,h as getPanelState,p as normalizeLayout,m as resizeLayoutPair,u as sortPanels};
+import{clamp as e}from"../../shared/value.js";const t=.01;function n(e){return Number(e.toFixed(3))}function r(t){return e(t.minSize.value,0,100)}function i(t){return e(t.collapsedSize.value,0,100)}function a(t,n){return e(t.maxSize.value,n,100)}function o(e){return e.collapsible.value?Math.min(r(e),i(e)):r(e)}function s(o,s){if(!s.collapsible.value)return e(o,r(s),a(s,r(s)));let c=i(s),l=r(s),u=a(s,l),d=e(o,c,u);return d<=c+t?n(c):n(d<l?d<=c+(l-c)/2?c:l:d)}function c(e,i,o){if(Math.abs(o)<=t)return e;let s=[...e],c=o,l=0;for(;Math.abs(c)>t&&l<20;){l+=1;let e=s.map((e,n)=>{let o=i[n];if(!o)return null;let s=r(o),l=a(o,s),u=c>0?l-e:e-s;return u<=t?null:{index:n,room:u}}).filter(Boolean);if(e.length===0)break;for(let t=0;t<e.length;t+=1){let r=e[t];if(!r)continue;let i=e.length-t,a=c/i,o=c>0?Math.min(a,r.room):-Math.min(-a,r.room);s[r.index]=n(s[r.index]+o),c-=o}}if(Math.abs(c)>t){let e=s.findIndex((e,n)=>{let o=i[n];return o?c>0?a(o,r(o))-s[n]>t:s[n]-r(o)>t:!1});e>=0&&(s[e]=n(s[e]+c))}return s}function l(e,i){let o=[...e],s=n(100-o.reduce((e,t)=>e+t,0));if(Math.abs(s)<=t)return o.map(n);let c=o.findIndex((e,n)=>{let o=i[n];if(!o)return!1;let c=r(o),l=a(o,c),u=e+s;return u>=c-t&&u<=l+t});return c>=0&&(o[c]=n(o[c]+s)),o.map(n)}function u(e){return[...e].sort((e,t)=>{let n=e.order.value,r=t.order.value;return n==null&&r==null?e.registrationIndex-t.registrationIndex:n==null?-1:r==null?1:n===r?e.registrationIndex-t.registrationIndex:n-r})}function d(e,n){return e.length===n.length&&e.every((e,r)=>Math.abs(e-(n[r]??0))<=t)}function f(e,r){if(e.length===0)return[];let i=e.map(e=>r?.get(e.id)??e.defaultSize.value),a=i.reduce((e,t)=>e+(t??0),0),o=i.filter(e=>e===void 0).length,s=o>0?Math.max(100-a,0)/o:0,c=i.map(e=>e??s),l=c.reduce((e,t)=>e+t,0);return l<=t?e.map(()=>n(100/e.length)):c.map(e=>n(e/l*100))}function p(t,i){if(i.length===0)return[];let o=t.map((t,o)=>{let s=i[o],c=r(s),l=a(s,c);return n(e(t,c,l))}),s=o.reduce((e,t)=>e+t,0);return o=c(o,i,n(100-s)),l(o,i)}function m(t,i,c,l){let u=i[c],d=i[c+1];if(!u||!d)return t;let f=t[c]+t[c+1],p=o(u),m=o(d),h=Math.min(a(u,r(u)),f-m),g=Math.min(a(d,r(d)),f-p),_=s(t[c]+l,u);_=e(_,p,h);let v=s(f-_,d);v=e(v,m,g),_=e(f-v,p,h),_=s(_,u),v=n(f-_);let y=[...t];return y[c]=n(_),y[c+1]=n(v),y}function h(e,n){if(n.collapsible.value&&e!==void 0)return e<=i(n)+t?`collapsed`:`expanded`}function g(e,t=100){let i=o(e),s=Math.min(a(e,r(e)),t);return{min:n(i),max:n(s)}}export{d as areLayoutsEqual,f as getDefaultLayout,g as getPanelBounds,h as getPanelState,p as normalizeLayout,m as resizeLayoutPair,u as sortPanels};

package/dist/components/splitter/splitter-group.js

@@ -1 +1 @@
-import{useForwardElement as e}from"../../composables/use-forward-element.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{Primitive as n}from"../primitive/primitive.js";import"../primitive/index.js";import{areLayoutsEqual as r,getDefaultLayout as i,getPanelBounds as a,getPanelState as o,normalizeLayout as s,resizeLayoutPair as c,sortPanels as l}from"./shared.js";import{provideSplitterGroupContext as u,useSplitterUi as d}from"./context.js";import{computed as f,createBlock as p,defineComponent as m,mergeProps as h,openBlock as g,renderSlot as _,shallowRef as v,unref as y,useId as b,withCtx as x}from"vue";const S=m({name:`SplitterGroup`,__name:`splitter-group`,props:{direction:{default:`horizontal`},dir:{default:void 0},defaultLayout:{default:void 0},keyboardResizeBy:{default:10},asChild:{type:Boolean},as:{}},emits:[`layout`],setup(m,{emit:S}){let C=m,w=S,[T,E]=e(),D=d(`root`),O=t(C,[`direction`,`dir`,`defaultLayout`,`keyboardResizeBy`]),k=v([]),A=v([]),j=v({}),M=v({}),N=v({}),P=0,F=f(()=>C.direction===`vertical`?`vertical`:`horizontal`),I=f(()=>C.dir),L=f(()=>Math.max(C.keyboardResizeBy,1)),R=f(()=>l(k.value)),z=`soybean-splitter-group-${b()}`;function B(){return new Map(R.value.map((e,t)=>[e.id,A.value[t]]))}function V(e){let t={...j.value},n={...M.value};R.value.forEach((r,i)=>{let a=e[i],s=j.value[r.id];r.onResize(a,s);let c=o(a,r)===`collapsed`,l=M.value[r.id];c!==l&&(c?r.onCollapse():l!==void 0&&r.onExpand()),c||(N.value={...N.value,[r.id]:a}),t[r.id]=a,n[r.id]=c}),j.value=t,M.value=n}function H(e){r(A.value,e)||(A.value=e,w(`layout`,e),V(e))}function U(){let e=A.value.length===R.value.length?B():void 0,t=C.defaultLayout?.length===R.value.length?C.defaultLayout:i(R.value,e);H(s(t,R.value))}function W(e){return R.value.findIndex(t=>t.id===e)}function G(){let e=T.value?.getBoundingClientRect();return e?F.value===`vertical`?e.height:e.width:0}function K(e,t){H(c(A.value,R.value,e,t))}function q(e){return R.value[e]}function J(e){let t=W(e),n=R.value[t];if(!n)return;let r=t<R.value.length-1?(A.value[t]??0)+(A.value[t+1]??0):t>0?(A.value[t-1]??0)+(A.value[t]??0):100;return a(n,r)}function Y(e,t){let n=W(e);if(!(n<0)){if(n<R.value.length-1){K(n,t-(A.value[n]??0));return}if(n>0){let e=A.value[n]??0,r=A.value[n-1]??0,i=e+r;K(n-1,i-t-r)}}}function X(e){let t=R.value.find(t=>t.id===e);if(!t?.collapsible.value)return;let n=Q(e);n!==void 0&&n>t.collapsedSize.value&&(N.value={...N.value,[e]:n}),Y(e,t.collapsedSize.value)}function Z(e){let t=R.value.find(t=>t.id===e);if(!t)return;let n=N.value[e]??t.defaultSize.value??t.minSize.value;Y(e,Math.max(n,t.minSize.value))}function Q(e){let t=W(e);if(!(t<0))return A.value[t]}function $(e){let t=R.value.find(t=>t.id===e),n=Q(e);return t?o(n,t)===`collapsed`:!1}function ee(e){return{flexBasis:`0px`,flexGrow:Q(e)??0,flexShrink:1,overflow:`hidden`}}function te(e){k.value=[...k.value,{...e,registrationIndex:P}],P+=1,U()}function ne(e){k.value=k.value.filter(t=>t.id!==e),U()}let{dir:re}=u({direction:F,dir:I,keyboardResizeBy:L,groupId:z,layout:A,rootElement:T,registerPanel:te,unregisterPanel:ne,refreshLayout:U,getPanelStyle:ee,getPanelSize:Q,isPanelCollapsed:$,collapsePanel:X,expandPanel:Z,resizePanel:Y,resizePanelPair:K,getPanelRecordByIndex:q,getPanelBounds:J,getGroupSize:G});return U(),(e,t)=>(g(),p(y(n),h(y(O),{ref:y(E),as:m.as,"as-child":m.asChild,"data-soybean-splitter-group":``,class:y(D),dir:y(re),"data-orientation":F.value,"data-panel-group-direction":F.value,"data-splitter-group-id":z}),{default:x(()=>[_(e.$slots,`default`,{layout:A.value})]),_:3},16,[`as`,`as-child`,`class`,`dir`,`data-orientation`,`data-panel-group-direction`]))}});export{S as default};
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import{useOmitProps as t}from"../../composables/use-props.js";import{Primitive as n}from"../primitive/primitive.js";import{areLayoutsEqual as r,getDefaultLayout as i,getPanelBounds as a,getPanelState as o,normalizeLayout as s,resizeLayoutPair as c,sortPanels as l}from"./shared.js";import{provideSplitterGroupContext as u,useSplitterUi as d}from"./context.js";import{computed as f,createBlock as p,defineComponent as m,mergeProps as h,openBlock as g,renderSlot as _,shallowRef as v,unref as y,useId as b,withCtx as x}from"vue";const S=m({name:`SplitterGroup`,__name:`splitter-group`,props:{direction:{default:`horizontal`},dir:{default:void 0},defaultLayout:{default:void 0},keyboardResizeBy:{default:10},asChild:{type:Boolean},as:{}},emits:[`layout`],setup(m,{emit:S}){let C=m,w=S,[T,E]=e(),D=d(`root`),O=t(C,[`direction`,`dir`,`defaultLayout`,`keyboardResizeBy`]),k=v([]),A=v([]),j=v({}),M=v({}),N=v({}),P=0,F=f(()=>C.direction===`vertical`?`vertical`:`horizontal`),I=f(()=>C.dir),L=f(()=>Math.max(C.keyboardResizeBy,1)),R=f(()=>l(k.value)),z=`soybean-splitter-group-${b()}`;function B(){return new Map(R.value.map((e,t)=>[e.id,A.value[t]]))}function V(e){let t={...j.value},n={...M.value};R.value.forEach((r,i)=>{let a=e[i],s=j.value[r.id];r.onResize(a,s);let c=o(a,r)===`collapsed`,l=M.value[r.id];c!==l&&(c?r.onCollapse():l!==void 0&&r.onExpand()),c||(N.value={...N.value,[r.id]:a}),t[r.id]=a,n[r.id]=c}),j.value=t,M.value=n}function H(e){r(A.value,e)||(A.value=e,w(`layout`,e),V(e))}function U(){let e=A.value.length===R.value.length?B():void 0,t=C.defaultLayout?.length===R.value.length?C.defaultLayout:i(R.value,e);H(s(t,R.value))}function W(e){return R.value.findIndex(t=>t.id===e)}function G(){let e=T.value?.getBoundingClientRect();return e?F.value===`vertical`?e.height:e.width:0}function K(e,t){H(c(A.value,R.value,e,t))}function q(e){return R.value[e]}function J(e){let t=W(e),n=R.value[t];if(!n)return;let r=t<R.value.length-1?(A.value[t]??0)+(A.value[t+1]??0):t>0?(A.value[t-1]??0)+(A.value[t]??0):100;return a(n,r)}function Y(e,t){let n=W(e);if(!(n<0)){if(n<R.value.length-1){K(n,t-(A.value[n]??0));return}if(n>0){let e=A.value[n]??0,r=A.value[n-1]??0,i=e+r;K(n-1,i-t-r)}}}function X(e){let t=R.value.find(t=>t.id===e);if(!t?.collapsible.value)return;let n=Q(e);n!==void 0&&n>t.collapsedSize.value&&(N.value={...N.value,[e]:n}),Y(e,t.collapsedSize.value)}function Z(e){let t=R.value.find(t=>t.id===e);if(!t)return;let n=N.value[e]??t.defaultSize.value??t.minSize.value;Y(e,Math.max(n,t.minSize.value))}function Q(e){let t=W(e);if(!(t<0))return A.value[t]}function $(e){let t=R.value.find(t=>t.id===e),n=Q(e);return t?o(n,t)===`collapsed`:!1}function ee(e){return{flexBasis:`0px`,flexGrow:Q(e)??0,flexShrink:1,overflow:`hidden`}}function te(e){k.value=[...k.value,{...e,registrationIndex:P}],P+=1,U()}function ne(e){k.value=k.value.filter(t=>t.id!==e),U()}let{dir:re}=u({direction:F,dir:I,keyboardResizeBy:L,groupId:z,layout:A,rootElement:T,registerPanel:te,unregisterPanel:ne,refreshLayout:U,getPanelStyle:ee,getPanelSize:Q,isPanelCollapsed:$,collapsePanel:X,expandPanel:Z,resizePanel:Y,resizePanelPair:K,getPanelRecordByIndex:q,getPanelBounds:J,getGroupSize:G});return U(),(e,t)=>(g(),p(y(n),h(y(O),{ref:y(E),as:m.as,"as-child":m.asChild,"data-soybean-splitter-group":``,class:y(D),dir:y(re),"data-orientation":F.value,"data-panel-group-direction":F.value,"data-splitter-group-id":z}),{default:x(()=>[_(e.$slots,`default`,{layout:A.value})]),_:3},16,[`as`,`as-child`,`class`,`dir`,`data-orientation`,`data-panel-group-direction`]))}});export{S as default};

package/dist/components/splitter/splitter-panel.js

@@ -1 +1 @@
-import{clamp as e}from"../../shared/value.js";import"../../shared/index.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{Primitive as n}from"../primitive/primitive.js";import"../primitive/index.js";import{useSplitterGroupContext as r,useSplitterUi as i}from"./context.js";import{computed as a,createBlock as o,defineComponent as s,mergeProps as c,onMounted as l,onUnmounted as u,openBlock as d,renderSlot as f,unref as p,useId as m,watch as h,withCtx as g}from"vue";const _=s({name:`SplitterPanel`,__name:`splitter-panel`,props:{defaultSize:{default:void 0},collapsible:{type:Boolean,default:!1},collapsedSize:{default:0},maxSize:{default:100},minSize:{default:10},order:{default:void 0},asChild:{type:Boolean},as:{}},emits:[`collapse`,`expand`,`resize`],setup(s,{expose:_,emit:v}){let y=s,b=v,x=i(`panel`),S=t(y,[`defaultSize`,`collapsible`,`collapsedSize`,`maxSize`,`minSize`,`order`]),C=`soybean-splitter-panel-${m()}`,{groupId:w,registerPanel:T,unregisterPanel:E,refreshLayout:D,getPanelStyle:O,getPanelSize:k,isPanelCollapsed:A,collapsePanel:j,expandPanel:M,resizePanel:N}=r(`SplitterPanel`),P=a(()=>y.defaultSize===void 0?void 0:e(y.defaultSize,0,100)),F=a(()=>e(y.collapsedSize,0,100)),I=a(()=>e(y.minSize,0,100)),L=a(()=>e(y.maxSize,I.value,100)),R=a(()=>y.collapsible),z=a(()=>y.order),B=a(()=>O(C)),V=a(()=>k(C)),H=a(()=>R.value?A(C)?`collapsed`:`expanded`:void 0),U=a(()=>A(C)),W=a(()=>!U.value);h([P,F,I,L,R,z],D),l(()=>{T({id:C,order:z,defaultSize:P,minSize:I,maxSize:L,collapsible:R,collapsedSize:F,onCollapse:()=>b(`collapse`),onExpand:()=>b(`expand`),onResize:(e,t)=>b(`resize`,e,t)})}),u(()=>{E(C)});function G(){j(C)}function K(){M(C)}function q(e){N(C,e)}return _({collapse:G,expand:K,getSize:()=>V.value,resize:q,isCollapsed:U,isExpanded:W}),(e,t)=>(d(),o(p(n),c(p(S),{id:C,as:s.as,"as-child":s.asChild,"data-soybean-splitter-panel":``,class:p(x),style:B.value,"data-panel":``,"data-panel-group-id":p(w),"data-panel-size":V.value,"data-panel-collapsible":R.value||void 0,"data-state":H.value}),{default:g(()=>[f(e.$slots,`default`,{isCollapsed:U.value,isExpanded:W.value,collapse:G,expand:K,resize:q})]),_:3},16,[`as`,`as-child`,`class`,`style`,`data-panel-group-id`,`data-panel-size`,`data-panel-collapsible`,`data-state`]))}});export{_ as default};
+import{clamp as e}from"../../shared/value.js";import{useOmitProps as t}from"../../composables/use-props.js";import{Primitive as n}from"../primitive/primitive.js";import{useSplitterGroupContext as r,useSplitterUi as i}from"./context.js";import{computed as a,createBlock as o,defineComponent as s,mergeProps as c,onMounted as l,onUnmounted as u,openBlock as d,renderSlot as f,unref as p,useId as m,watch as h,withCtx as g}from"vue";const _=s({name:`SplitterPanel`,__name:`splitter-panel`,props:{defaultSize:{default:void 0},collapsible:{type:Boolean,default:!1},collapsedSize:{default:0},maxSize:{default:100},minSize:{default:10},order:{default:void 0},asChild:{type:Boolean},as:{}},emits:[`collapse`,`expand`,`resize`],setup(s,{expose:_,emit:v}){let y=s,b=v,x=i(`panel`),S=t(y,[`defaultSize`,`collapsible`,`collapsedSize`,`maxSize`,`minSize`,`order`]),C=`soybean-splitter-panel-${m()}`,{groupId:w,registerPanel:T,unregisterPanel:E,refreshLayout:D,getPanelStyle:O,getPanelSize:k,isPanelCollapsed:A,collapsePanel:j,expandPanel:M,resizePanel:N}=r(`SplitterPanel`),P=a(()=>y.defaultSize===void 0?void 0:e(y.defaultSize,0,100)),F=a(()=>e(y.collapsedSize,0,100)),I=a(()=>e(y.minSize,0,100)),L=a(()=>e(y.maxSize,I.value,100)),R=a(()=>y.collapsible),z=a(()=>y.order),B=a(()=>O(C)),V=a(()=>k(C)),H=a(()=>R.value?A(C)?`collapsed`:`expanded`:void 0),U=a(()=>A(C)),W=a(()=>!U.value);h([P,F,I,L,R,z],D),l(()=>{T({id:C,order:z,defaultSize:P,minSize:I,maxSize:L,collapsible:R,collapsedSize:F,onCollapse:()=>b(`collapse`),onExpand:()=>b(`expand`),onResize:(e,t)=>b(`resize`,e,t)})}),u(()=>{E(C)});function G(){j(C)}function K(){M(C)}function q(e){N(C,e)}return _({collapse:G,expand:K,getSize:()=>V.value,resize:q,isCollapsed:U,isExpanded:W}),(e,t)=>(d(),o(p(n),c(p(S),{id:C,as:s.as,"as-child":s.asChild,"data-soybean-splitter-panel":``,class:p(x),style:B.value,"data-panel":``,"data-panel-group-id":p(w),"data-panel-size":V.value,"data-panel-collapsible":R.value||void 0,"data-state":H.value}),{default:g(()=>[f(e.$slots,`default`,{isCollapsed:U.value,isExpanded:W.value,collapse:G,expand:K,resize:q})]),_:3},16,[`as`,`as-child`,`class`,`style`,`data-panel-group-id`,`data-panel-size`,`data-panel-collapsible`,`data-state`]))}});export{_ as default};

package/dist/components/splitter/splitter-resize-handle.js

@@ -1 +1 @@
-import{useForwardElement as e}from"../../composables/use-forward-element.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{Primitive as n}from"../primitive/primitive.js";import"../primitive/index.js";import{useSplitterGroupContext as r,useSplitterUi as i}from"./context.js";import{computed as a,createBlock as o,defineComponent as s,mergeProps as c,onBeforeUnmount as l,openBlock as u,renderSlot as d,shallowRef as f,unref as p,withCtx as m}from"vue";const h=s({name:`SplitterResizeHandle`,__name:`splitter-resize-handle`,props:{disabled:{type:Boolean,default:!1},tabindex:{default:0},asChild:{type:Boolean},as:{}},emits:[`dragging`],setup(s,{emit:h}){let g=s,_=h,[v,y]=e(),b=i(`resizeHandle`),x=t(g,[`disabled`,`tabindex`]),{direction:S,dir:C,groupId:w,keyboardResizeBy:T,layout:E,rootElement:D,collapsePanel:O,expandPanel:k,resizePanelPair:A,getPanelRecordByIndex:j,getPanelBounds:M,getGroupSize:N}=r(`SplitterResizeHandle`),P=f(`inactive`),F=f(!1),I=f(null),L=f(0),R=a(()=>!D.value||!v.value?-1:Array.from(D.value.querySelectorAll(`[data-panel-group-id="${w}"][data-splitter-resize-handle]`)).findIndex(e=>e===v.value)),z=a(()=>j(R.value)),B=a(()=>E.value[R.value]),V=a(()=>{let e=z.value;if(e)return M(e.id)}),H=a(()=>{if(B.value!==void 0)return String(Number(B.value.toFixed(1)))}),U=a(()=>{if(V.value)return String(V.value.min)}),W=a(()=>{if(V.value)return String(V.value.max)}),G=a(()=>z.value?.id);function K(e){return S.value===`vertical`?e.clientY:e.clientX}function q(e){let t=K(e),n=t-L.value;L.value=t;let r=N();if(r<=0)return 0;let i=n/r*100;return S.value===`horizontal`&&C.value===`rtl`&&(i*=-1),i}let J=null;function Y(){J?.(),J=null}function X(e){(e===void 0||I.value===e)&&(I.value=null,P.value=`hover`,Y(),_(`dragging`,!1))}function Z(e){if(g.disabled||R.value<0)return;e.preventDefault(),I.value=e.pointerId,L.value=K(e),P.value=`drag`,_(`dragging`,!0);let t=v.value?.ownerDocument;if(!t)return;let n=e=>{I.value===e.pointerId&&A(R.value,q(e))},r=e=>{X(e.pointerId)};t.addEventListener(`pointermove`,n),t.addEventListener(`pointerup`,r),t.addEventListener(`pointercancel`,r),J=()=>{t.removeEventListener(`pointermove`,n),t.removeEventListener(`pointerup`,r),t.removeEventListener(`pointercancel`,r)}}function Q(e){if(g.disabled||R.value<0)return;let t=z.value;if(!t)return;let n=T.value??10,r=0;if(e.key===`Enter`&&t.collapsible.value){e.preventDefault(),B.value!==void 0&&B.value<=t.collapsedSize.value+.1?k(t.id):O(t.id);return}if(e.key===`Home`){e.preventDefault(),A(R.value,(V.value?.min??0)-(B.value??0));return}if(e.key===`End`){e.preventDefault(),A(R.value,(V.value?.max??0)-(B.value??0));return}S.value===`vertical`?(e.key===`ArrowDown`&&(r=n),e.key===`ArrowUp`&&(r=-n)):C.value===`rtl`?(e.key===`ArrowLeft`&&(r=n),e.key===`ArrowRight`&&(r=-n)):(e.key===`ArrowRight`&&(r=n),e.key===`ArrowLeft`&&(r=-n)),r!==0&&(e.preventDefault(),A(R.value,r))}return l(()=>{Y()}),(e,t)=>(u(),o(p(n),c(p(x),{ref:p(y),as:s.as,"as-child":s.asChild,"data-soybean-splitter-resize-handle":``,class:p(b),role:`separator`,"data-splitter-resize-handle":``,tabindex:s.disabled?void 0:s.tabindex,"data-panel-group-id":p(w),"data-state":P.value,"data-disabled":s.disabled?``:void 0,"data-orientation":p(S),"aria-controls":G.value,"aria-disabled":s.disabled?`true`:void 0,"aria-orientation":p(S),"aria-valuenow":H.value,"aria-valuemin":U.value,"aria-valuemax":W.value,onBlur:t[0]||(t[0]=e=>F.value=!1),onFocus:t[1]||(t[1]=e=>F.value=!0),onKeydown:Q,onMouseenter:t[2]||(t[2]=e=>P.value=I.value===null?`hover`:P.value),onMouseleave:t[3]||(t[3]=e=>P.value=I.value===null?`inactive`:P.value),onPointerdown:Z}),{default:m(()=>[d(e.$slots,`default`,{active:P.value===`drag`,focused:F.value})]),_:3},16,[`as`,`as-child`,`class`,`tabindex`,`data-panel-group-id`,`data-state`,`data-disabled`,`data-orientation`,`aria-controls`,`aria-disabled`,`aria-orientation`,`aria-valuenow`,`aria-valuemin`,`aria-valuemax`]))}});export{h as default};
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import{useOmitProps as t}from"../../composables/use-props.js";import{Primitive as n}from"../primitive/primitive.js";import{useSplitterGroupContext as r,useSplitterUi as i}from"./context.js";import{computed as a,createBlock as o,defineComponent as s,mergeProps as c,onBeforeUnmount as l,openBlock as u,renderSlot as d,shallowRef as f,unref as p,withCtx as m}from"vue";const h=s({name:`SplitterResizeHandle`,__name:`splitter-resize-handle`,props:{disabled:{type:Boolean,default:!1},tabindex:{default:0},asChild:{type:Boolean},as:{}},emits:[`dragging`],setup(s,{emit:h}){let g=s,_=h,[v,y]=e(),b=i(`resizeHandle`),x=t(g,[`disabled`,`tabindex`]),{direction:S,dir:C,groupId:w,keyboardResizeBy:T,layout:E,rootElement:D,collapsePanel:O,expandPanel:k,resizePanelPair:A,getPanelRecordByIndex:j,getPanelBounds:M,getGroupSize:N}=r(`SplitterResizeHandle`),P=f(`inactive`),F=f(!1),I=f(null),L=f(0),R=a(()=>!D.value||!v.value?-1:Array.from(D.value.querySelectorAll(`[data-panel-group-id="${w}"][data-splitter-resize-handle]`)).findIndex(e=>e===v.value)),z=a(()=>j(R.value)),B=a(()=>E.value[R.value]),V=a(()=>{let e=z.value;if(e)return M(e.id)}),H=a(()=>{if(B.value!==void 0)return String(Number(B.value.toFixed(1)))}),U=a(()=>{if(V.value)return String(V.value.min)}),W=a(()=>{if(V.value)return String(V.value.max)}),G=a(()=>z.value?.id);function K(e){return S.value===`vertical`?e.clientY:e.clientX}function q(e){let t=K(e),n=t-L.value;L.value=t;let r=N();if(r<=0)return 0;let i=n/r*100;return S.value===`horizontal`&&C.value===`rtl`&&(i*=-1),i}let J=null;function Y(){J?.(),J=null}function X(e){(e===void 0||I.value===e)&&(I.value=null,P.value=`hover`,Y(),_(`dragging`,!1))}function Z(e){if(g.disabled||R.value<0)return;e.preventDefault(),I.value=e.pointerId,L.value=K(e),P.value=`drag`,_(`dragging`,!0);let t=v.value?.ownerDocument;if(!t)return;let n=e=>{I.value===e.pointerId&&A(R.value,q(e))},r=e=>{X(e.pointerId)};t.addEventListener(`pointermove`,n),t.addEventListener(`pointerup`,r),t.addEventListener(`pointercancel`,r),J=()=>{t.removeEventListener(`pointermove`,n),t.removeEventListener(`pointerup`,r),t.removeEventListener(`pointercancel`,r)}}function Q(e){if(g.disabled||R.value<0)return;let t=z.value;if(!t)return;let n=T.value??10,r=0;if(e.key===`Enter`&&t.collapsible.value){e.preventDefault(),B.value!==void 0&&B.value<=t.collapsedSize.value+.1?k(t.id):O(t.id);return}if(e.key===`Home`){e.preventDefault(),A(R.value,(V.value?.min??0)-(B.value??0));return}if(e.key===`End`){e.preventDefault(),A(R.value,(V.value?.max??0)-(B.value??0));return}S.value===`vertical`?(e.key===`ArrowDown`&&(r=n),e.key===`ArrowUp`&&(r=-n)):C.value===`rtl`?(e.key===`ArrowLeft`&&(r=n),e.key===`ArrowRight`&&(r=-n)):(e.key===`ArrowRight`&&(r=n),e.key===`ArrowLeft`&&(r=-n)),r!==0&&(e.preventDefault(),A(R.value,r))}return l(()=>{Y()}),(e,t)=>(u(),o(p(n),c(p(x),{ref:p(y),as:s.as,"as-child":s.asChild,"data-soybean-splitter-resize-handle":``,class:p(b),role:`separator`,"data-splitter-resize-handle":``,tabindex:s.disabled?void 0:s.tabindex,"data-panel-group-id":p(w),"data-state":P.value,"data-disabled":s.disabled?``:void 0,"data-orientation":p(S),"aria-controls":G.value,"aria-disabled":s.disabled?`true`:void 0,"aria-orientation":p(S),"aria-valuenow":H.value,"aria-valuemin":U.value,"aria-valuemax":W.value,onBlur:t[0]||=e=>F.value=!1,onFocus:t[1]||=e=>F.value=!0,onKeydown:Q,onMouseenter:t[2]||=e=>P.value=I.value===null?`hover`:P.value,onMouseleave:t[3]||=e=>P.value=I.value===null?`inactive`:P.value,onPointerdown:Z}),{default:m(()=>[d(e.$slots,`default`,{active:P.value===`drag`,focused:F.value})]),_:3},16,[`as`,`as-child`,`class`,`tabindex`,`data-panel-group-id`,`data-state`,`data-disabled`,`data-orientation`,`aria-controls`,`aria-disabled`,`aria-orientation`,`aria-valuenow`,`aria-valuemin`,`aria-valuemax`]))}});export{h as default};

package/dist/components/splitter/splitter-resize-handle.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_base: import("vue").DefineComponent<SplitterResizeHandleProp
 }, string, import("vue").PublicProps, Readonly<SplitterResizeHandleProps> & Readonly<{
   onDragging?: ((value: boolean) => any) | undefined;
 }>, {
-  disabled: boolean;
   tabindex: number;
+  disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;