@soybeanjs/headless 0.15.0-beta.2 → 0.15.0-beta.3

package/dist/components/select/select-root.js

@@ -1 +1 @@
-import{isNullish as e}from"../../shared/guard.js";import{isFormControl as t,transformPropsToContext as n}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as r}from"../../composables/use-controllable-state.js";import{useSelection as i}from"../../composables/use-selection.js";import"../../composables/index.js";import a from"../popper/popper-root.js";import"../popper/index.js";import{provideCollectionContext as o,provideSelectRootContext as s}from"./context.js";import c from"./select-bubble-select.js";import{Fragment as l,computed as u,createBlock as d,createCommentVNode as f,createElementBlock as p,defineComponent as m,mergeProps as h,openBlock as g,renderList as _,renderSlot as v,unref as y,withCtx as b}from"vue";const x={key:0,value:``},S=m({name:`SelectRoot`,inheritAttrs:!1,__name:`select-root`,props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},dir:{},autocomplete:{},disabled:{type:Boolean},modelValue:{default:void 0},defaultValue:{},multiple:{},singleClearable:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:open`],setup(m,{emit:S}){let C=m,w=S,{modelValue:T,isMultiple:E,onModelValueChange:D,isEmptyModelValue:O}=i(C,e=>{w(`update:modelValue`,e)}),k=r(()=>C.open,e=>{w(`update:open`,e)},C.defaultOpen),{triggerElement:A,options:j,nativeSelectKey:M}=s({...n(C,[`dir`,`autocomplete`,`disabled`,`required`,`singleClearable`]),open:k,modelValue:T,onModelValueChange:D,isMultiple:E,isEmptyModelValue:O});o();let N=u(()=>t(A.value));return(t,n)=>(g(),d(y(a),null,{default:b(()=>[v(t.$slots,`default`,{modelValue:y(T),open:!!y(k)}),N.value?(g(),d(c,{key:y(M),"aria-hidden":`true`,tabindex:`-1`,multiple:m.multiple,required:m.required,name:m.name,autocomplete:m.autocomplete,disabled:m.disabled,value:y(T)},{default:b(()=>[y(e)(y(T))?(g(),p(`option`,x)):f(`v-if`,!0),(g(!0),p(l,null,_(y(j),e=>(g(),p(`option`,h({key:e.value??``},{ref_for:!0},e),null,16))),128))]),_:1},8,[`multiple`,`required`,`name`,`autocomplete`,`disabled`,`value`])):f(`v-if`,!0)]),_:3}))}});export{S as default};
+import{isNullish as e}from"../../shared/guard.js";import{isFormControl as t,transformPropsToContext as n}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as r}from"../../composables/use-controllable-state.js";import{useSelection as i}from"../../composables/use-selection.js";import"../../composables/index.js";import a from"../popper/popper-root.js";import"../popper/index.js";import{provideCollectionContext as o,provideSelectRootContext as s}from"./context.js";import c from"./select-bubble-select.js";import{Fragment as l,computed as u,createBlock as d,createCommentVNode as f,createElementBlock as p,defineComponent as m,mergeProps as h,openBlock as g,renderList as _,renderSlot as v,unref as y,withCtx as b}from"vue";const x={key:0,value:``},S=m({name:`SelectRoot`,inheritAttrs:!1,__name:`select-root`,props:{open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},dir:{},autocomplete:{},disabled:{type:Boolean},modelValue:{default:void 0},defaultValue:{},multiple:{},clearable:{type:Boolean},selectionBehavior:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:open`],setup(m,{emit:S}){let C=m,w=S,{modelValue:T,isMultiple:E,onModelValueChange:D,isEmptyModelValue:O}=i(C,e=>{w(`update:modelValue`,e)}),k=r(()=>C.open,e=>{w(`update:open`,e)},C.defaultOpen),{triggerElement:A,options:j,nativeSelectKey:M}=s({...n(C,[`dir`,`autocomplete`,`disabled`,`required`,`clearable`]),open:k,modelValue:T,onModelValueChange:D,isMultiple:E,isEmptyModelValue:O});o();let N=u(()=>t(A.value));return(t,n)=>(g(),d(y(a),null,{default:b(()=>[v(t.$slots,`default`,{modelValue:y(T),open:!!y(k)}),N.value?(g(),d(c,{key:y(M),"aria-hidden":`true`,tabindex:`-1`,multiple:m.multiple,required:m.required,name:m.name,autocomplete:m.autocomplete,disabled:m.disabled,value:y(T)},{default:b(()=>[y(e)(y(T))?(g(),p(`option`,x)):f(`v-if`,!0),(g(!0),p(l,null,_(y(j),e=>(g(),p(`option`,h({key:e.value??``},{ref_for:!0},e),null,16))),128))]),_:1},8,[`multiple`,`required`,`name`,`autocomplete`,`disabled`,`value`])):f(`v-if`,!0)]),_:3}))}});export{S as default};

package/dist/components/select/select-viewport.js

@@ -1,4 +1,4 @@
-import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useNonce as n}from"../config-provider/context.js";import{useSelectContentContext as r,useSelectItemAlignedPositionContext as i,useSelectUi as a}from"./context.js";import"./shared.js";import{Fragment as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,mergeProps as f,openBlock as p,renderSlot as m,toDisplayString as h,unref as g,useAttrs as _,withCtx as v}from"vue";const y=d({name:`SelectViewport`,inheritAttrs:!1,__name:`select-viewport`,props:{nonce:{}},setup(d){let y=d,b=_(),{onViewportElementChange:x}=r(`SelectViewport`),[S,C]=e(x),w=i(),T=n(()=>y.nonce),E=a(`viewport`),D=0;function O(e){let t=e.currentTarget,{positionerElement:n,shouldExpandOnScroll:r}=w??{};if(!n?.value||!r?.value){D=t.scrollTop;return}let i=Math.abs(D-t.scrollTop);if(i<=0)return;let a=window.innerHeight-20,o=Number.parseFloat(n.value.style.minHeight),s=Number.parseFloat(n.value.style.height),c=Math.max(o,s);if(c<a){let e=c+i,r=Math.min(a,e),o=e-r;n.value.style.height=`${r}px`,n.value.style.bottom===`0px`&&(t.scrollTop=o>0?o:0,n.value.style.justifyContent=`flex-end`)}D=t.scrollTop}return(e,n)=>(p(),s(o,null,[c(`div`,f(g(b),{ref:g(C),class:g(E),"data-soybean-select-viewport":``,role:`presentation`,style:`position:relative;flex:1;overflow:hidden auto;`,onScroll:O}),[m(e.$slots,`default`)],16),u(g(t),{as:`style`,nonce:g(T)},{default:v(()=>[l(h(`
+import{useForwardElement as e}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{useNonce as t}from"../config-provider/context.js";import{Primitive as n}from"../primitive/primitive.js";import"../primitive/index.js";import{useSelectContentContext as r,useSelectItemAlignedPositionContext as i,useSelectUi as a}from"./context.js";import"./shared.js";import{Fragment as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,mergeProps as f,openBlock as p,renderSlot as m,toDisplayString as h,unref as g,useAttrs as _,withCtx as v}from"vue";const y=d({name:`SelectViewport`,inheritAttrs:!1,__name:`select-viewport`,props:{nonce:{}},setup(d){let y=d,b=_(),{onViewportElementChange:x}=r(`SelectViewport`),[S,C]=e(x),w=i(),T=t(()=>y.nonce),E=a(`viewport`),D=0;function O(e){let t=e.currentTarget,{positionerElement:n,shouldExpandOnScroll:r}=w??{};if(!n?.value||!r?.value){D=t.scrollTop;return}let i=Math.abs(D-t.scrollTop);if(i<=0)return;let a=window.innerHeight-20,o=Number.parseFloat(n.value.style.minHeight),s=Number.parseFloat(n.value.style.height),c=Math.max(o,s);if(c<a){let e=c+i,r=Math.min(a,e),o=e-r;n.value.style.height=`${r}px`,n.value.style.bottom===`0px`&&(t.scrollTop=o>0?o:0,n.value.style.justifyContent=`flex-end`)}D=t.scrollTop}return(e,t)=>(p(),s(o,null,[c(`div`,f(g(b),{ref:g(C),class:g(E),"data-soybean-select-viewport":``,role:`presentation`,style:`position:relative;flex:1;overflow:hidden auto;`,onScroll:O}),[m(e.$slots,`default`)],16),u(g(n),{as:`style`,nonce:g(T)},{default:v(()=>[l(h(`
 [data-soybean-select-viewport] {
   scrollbar-width: none;
   -ms-overflow-style: none;

package/dist/components/select/shared.js

@@ -1 +1 @@
-import{isNullish as e}from"../../shared/guard.js";import"../../shared/index.js";const t={popupTransformOrigin:`--soybean-select-popup-transform-origin`,popupAvailableWidth:`--soybean-select-popup-available-width`,popupAvailableHeight:`--soybean-select-popup-available-height`,triggerWidth:`--soybean-select-trigger-width`,triggerHeight:`--soybean-select-trigger-height`},n=[` `,`Enter`,`ArrowUp`,`ArrowDown`],r=[` `,`Enter`],i=`select.select`;function a(t){return e(t)||t===``||Array.isArray(t)&&t.length===0}export{n as OPEN_KEYS,r as SELECTION_KEYS,i as SELECT_EVENT,t as selectCssVars,a as shouldShowPlaceholder};
+import{isNullish as e}from"../../shared/guard.js";import"../../shared/index.js";const t={popupTransformOrigin:`--soybean-select-popup-transform-origin`,popupAvailableWidth:`--soybean-select-popup-available-width`,popupAvailableHeight:`--soybean-select-popup-available-height`,triggerWidth:`--soybean-select-trigger-width`,triggerHeight:`--soybean-select-trigger-height`},n=[` `,`Enter`,`ArrowUp`,`ArrowDown`],r=[` `,`Enter`],i=`select.select`;function a(t){return e(t)||t===``||Array.isArray(t)&&t.length===0}function o(e){return`items`in e}export{n as OPEN_KEYS,r as SELECTION_KEYS,i as SELECT_EVENT,o as isGroupOption,t as selectCssVars,a as shouldShowPlaceholder};

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

@@ -1,8 +1,10 @@
+import { IconValue } from "../_icon/types.js";
 import { DefinedValue, Direction, SelectionEmits, SelectionProps, UiClass } from "../../types/common.js";
 import { PointerDownOutsideEvent } from "../../types/event.js";
 import { DismissableLayerProps, ForceMountProps, FormFieldCommonProps } from "../../types/component.js";
 import { PrimitiveProps } from "../primitive/types.js";
 import { PopperAnchorProps, PopperArrowProps, PopperPositionerProps } from "../popper/types.js";
+import { PortalProps } from "../portal/types.js";
 import { ButtonHTMLAttributes, ComputedRef, HTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/select/types.d.ts
@@ -83,6 +85,64 @@ type SelectItemEmits<T extends DefinedValue = DefinedValue> = {
 };
 interface SelectItemTextProps extends /** @vue-ignore */HTMLAttributes {}
 interface SelectItemIndicatorProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface SelectSingleOptionData<T extends DefinedValue = DefinedValue> extends Pick<SelectItemProps, 'disabled' | 'textValue'> {
+  value: T;
+  icon?: IconValue;
+  label: string;
+  separator?: boolean;
+}
+interface SelectGroupOptionData<T extends DefinedValue = DefinedValue> extends Pick<SelectSingleOptionData<T>, 'label' | 'separator'> {
+  items: SelectSingleOptionData<T>[];
+}
+type SelectOptionData<T extends DefinedValue = DefinedValue> = SelectSingleOptionData<T> | SelectGroupOptionData<T>;
+interface SelectCompactProps<T extends DefinedValue = DefinedValue, M extends boolean = false> extends SelectRootProps<T, M> {
+  items: SelectOptionData<T>[];
+  showArrow?: boolean;
+  triggerProps?: SelectTriggerProps;
+  triggerIconProps?: SelectTriggerIconProps;
+  placeholder?: string;
+  valueProps?: SelectValueProps;
+  portalProps?: PortalProps;
+  contentProps?: SelectContentProps;
+  placement?: PopperPositionerProps['placement'];
+  popupProps?: SelectPopupProps;
+  viewportProps?: SelectViewportProps;
+  scrollDownButtonProps?: SelectScrollDownButtonProps;
+  scrollUpButtonProps?: SelectScrollUpButtonProps;
+  groupProps?: SelectGroupProps;
+  groupLabelProps?: SelectGroupLabelProps;
+  itemProps?: SelectItemProps;
+  itemTextProps?: SelectItemTextProps;
+  itemIndicatorProps?: SelectItemIndicatorProps;
+  separatorProps?: SelectSeparatorProps;
+  arrowProps?: PopperArrowProps;
+}
+type SelectCompactEmits<T extends DefinedValue = DefinedValue, M extends boolean = false> = SelectRootEmits<T, M> & SelectContentEmits & SelectItemEmits<T>;
+type SelectCompactModelValue<T extends DefinedValue = DefinedValue, M extends boolean = false> = (M extends true ? T[] : T) | undefined;
+interface SelectCompactTriggerValueSlotProps<T extends DefinedValue = DefinedValue, M extends boolean = false> {
+  modelValue: SelectCompactModelValue<T, M>;
+  selectedLabel: string[];
+  slotText: string;
+}
+interface SelectCompactGroupLabelSlotProps<T extends DefinedValue = DefinedValue> {
+  item: SelectGroupOptionData<T>;
+}
+interface SelectCompactItemSlotProps<T extends DefinedValue = DefinedValue> {
+  item: SelectSingleOptionData<T>;
+}
+type SelectCompactSlots<T extends DefinedValue = DefinedValue, M extends boolean = false> = {
+  'trigger-leading'?: () => any;
+  'trigger-value'?: (props: SelectCompactTriggerValueSlotProps<T, M>) => any;
+  'trigger-trailing'?: () => any;
+  'trigger-icon'?: () => any;
+  'scroll-up-button'?: () => any;
+  'scroll-down-button'?: () => any;
+  'group-label'?: (props: SelectCompactGroupLabelSlotProps<T>) => any;
+  'item-text'?: (props: SelectCompactItemSlotProps<T>) => any;
+  'item-leading'?: (props: SelectCompactItemSlotProps<T>) => any;
+  'item-trailing'?: (props: SelectCompactItemSlotProps<T>) => any;
+  'item-indicator'?: (props: SelectCompactItemSlotProps<T>) => any;
+};
 interface SelectValueProps extends /** @vue-ignore */HTMLAttributes {
   /** The content that will be rendered inside the `SelectValue` when no `value` or `defaultValue` is set. */
   placeholder?: string;
@@ -94,4 +154,4 @@ interface SelectScrollUpButtonProps extends SelectScrollButtonImplProps {}
 type SelectUiSlot = 'trigger' | 'triggerIcon' | 'value' | 'positioner' | 'popup' | 'viewport' | 'group' | 'groupLabel' | 'item' | 'itemText' | 'itemIndicator' | 'separator' | 'scrollUpButton' | 'scrollDownButton' | 'arrow';
 type SelectUi = UiClass<SelectUiSlot>;
 //#endregion
-export { SelectContentEmits, SelectContentProps, SelectGroupLabelProps, SelectGroupProps, SelectItemEmits, SelectItemEvent, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectPopupProps, SelectPosition, SelectRootEmits, SelectRootProps, SelectScrollDownButtonProps, SelectScrollUpButtonProps, SelectSeparatorProps, SelectTriggerIconProps, SelectTriggerProps, SelectUi, SelectUiSlot, SelectValueProps, SelectViewportProps };
+export { SelectCompactEmits, SelectCompactProps, SelectCompactSlots, SelectContentEmits, SelectContentProps, SelectGroupLabelProps, SelectGroupOptionData, SelectGroupProps, SelectItemEmits, SelectItemEvent, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectOptionData, SelectPopupProps, SelectPosition, SelectRootEmits, SelectRootProps, SelectScrollDownButtonProps, SelectScrollUpButtonProps, SelectSeparatorProps, SelectSingleOptionData, SelectTriggerIconProps, SelectTriggerProps, SelectUi, SelectUiSlot, SelectValueProps, SelectViewportProps };

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

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { SeparatorUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/separator/context.d.ts
-declare const provideSeparatorUi: (ui: _$vue.ComputedRef<Partial<UiClass<SeparatorUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<SeparatorUiSlot>>>, useSeparatorUi: <S extends SeparatorUiSlot | undefined = undefined>(slot?: S | undefined) => S extends SeparatorUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<SeparatorUiSlot>>>;
+declare const provideSeparatorUi: (ui: _$vue.ComputedRef<Partial<UiClass<SeparatorUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<SeparatorUiSlot>>>, useSeparatorUi: UseUiConsumer<SeparatorUiSlot>;
 //#endregion
 export { provideSeparatorUi };

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

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { SliderUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/slider/context.d.ts
-declare const provideSliderUi: (ui: _$vue.ComputedRef<Partial<UiClass<SliderUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<SliderUiSlot>>>, useSliderUi: <S extends SliderUiSlot | undefined = undefined>(slot?: S | undefined) => S extends SliderUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<SliderUiSlot>>>;
+declare const provideSliderUi: (ui: _$vue.ComputedRef<Partial<UiClass<SliderUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<SliderUiSlot>>>, useSliderUi: UseUiConsumer<SliderUiSlot>;
 //#endregion
 export { provideSliderUi };

package/dist/components/slider/slider-root.js

@@ -1 +1 @@
-import{snapValueToStep as e}from"../../shared/value.js";import{isFormControl as t}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as n}from"../../composables/use-controllable-state.js";import{useForwardElement as r}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as i}from"../primitive/primitive.js";import"../primitive/index.js";import{useDirection as a}from"../config-provider/context.js";import o from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideSliderRootContext as ee,useSliderUi as te}from"./context.js";import{ARROW_KEYS as s,BACK_KEYS as ne,PAGE_KEYS as c,convertValueToPercentage as re,getClosestValueIndex as ie,getNextSortedValues as ae,getSliderSideState as oe,getSliderValueFromPointer as se,getThumbLabel as ce,getValidMinStepsBetweenThumbs as le,getValidSliderMax as ue,getValidSliderMin as de,getValidSliderStep as fe,hasMinStepsBetweenValues as pe,isSliderValuesEqual as l,normalizeSliderValues as me}from"./shared.js";import{computed as u,createBlock as d,createCommentVNode as he,defineComponent as f,nextTick as ge,normalizeClass as _e,onBeforeUnmount as ve,openBlock as p,renderSlot as ye,shallowRef as m,unref as h,watch as g,withCtx as be}from"vue";const _=f({name:`SliderRoot`,__name:`slider-root`,props:{modelValue:{default:void 0},defaultValue:{default:()=>[0]},disabled:{type:Boolean,default:!1},orientation:{default:`horizontal`},dir:{default:void 0},inverted:{type:Boolean,default:!1},min:{default:0},max:{default:100},step:{default:1},minStepsBetweenThumbs:{default:0},thumbAlignment:{default:`contain`},asChild:{type:Boolean},as:{default:`div`},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`valueCommit`],setup(f,{emit:_}){let v=f,y=_,[xe,Se]=r(),Ce=te(`root`),b=n(()=>v.modelValue,e=>{y(`update:modelValue`,e??[])},v.defaultValue),x=a(()=>v.dir),S=u(()=>v.disabled),we=u(()=>S.value?``:void 0),C=u(()=>v.orientation===`vertical`?`vertical`:`horizontal`),w=u(()=>v.inverted),T=u(()=>de(v.min)),E=u(()=>ue(v.max,T.value)),D=u(()=>fe(v.step)),O=u(()=>le(v.minStepsBetweenThumbs)),Te=u(()=>v.thumbAlignment===`overflow`?`overflow`:`contain`),k=u(()=>me(b.value,{defaultValue:v.defaultValue,min:T.value,max:E.value,step:D.value})),A=m(),j=u(()=>A.value??k.value),Ee=u(()=>t(xe.value)),De=u(()=>C.value===`horizontal`),M=u(()=>oe(C.value,x.value,w.value)),N=u(()=>M.value.startEdge),Oe=u(()=>M.value.endEdge),P=u(()=>M.value.slideDirection),F=m(0),I=m(),L=m([]),R=m(0),z=m(null),B=m(j.value);function ke(e){I.value!==e&&(I.value=e)}function Ae(e,t){if(L.value[e]===t)return;let n=[...L.value];n[e]=t,L.value=n}function je(e){return re(e,T.value,E.value)}function V(e){ge(()=>{L.value[e]?.focus()})}function H(e){return ie(j.value,e)}function U(e){return z.value===e}let W=null;function G(){W?.(),W=null}function K(e){G();let t=e=>{X(e)},n=e=>{Z(e.pointerId)};e.addEventListener(`pointermove`,t),e.addEventListener(`pointerup`,n),e.addEventListener(`pointercancel`,n),W=()=>{e.removeEventListener(`pointermove`,t),e.removeEventListener(`pointerup`,n),e.removeEventListener(`pointercancel`,n)}}function q(){let e=A.value??j.value;l(B.value,e)||y(`valueCommit`,[...e])}function J(t,n,r={}){let i=e(t,T.value,E.value,D.value),a=ae(j.value,i,n);if(!pe(a,O.value*D.value))return;let o=a.indexOf(i);if(F.value=o,l(a,j.value)){r.focus&&V(o),r.commit&&q();return}A.value=a,b.value=a,r.focus&&V(o),r.commit&&(y(`valueCommit`,[...a]),B.value=a,A.value=void 0)}function Y(e){return I.value?se(e,I.value.getBoundingClientRect(),{min:T.value,max:E.value,orientation:C.value,startEdge:N.value}):null}function Me(e){let t=Y(e);S.value||t===null||(z.value=e.pointerId,I.value?.ownerDocument&&K(I.value.ownerDocument),B.value=[...j.value],R.value=0,J(t,H(t),{focus:!0}))}function Ne(e,t){if(S.value)return;z.value=t.pointerId,I.value?.ownerDocument&&K(I.value.ownerDocument),B.value=[...j.value],F.value=e,V(e);let n=Y(t);R.value=n===null?0:j.value[e]-n}function X(e){let t=Y(e);S.value||t===null||!U(e.pointerId)||J(t+R.value,F.value)}function Z(e){if(S.value||typeof e==`number`&&!U(e))return;let t=A.value??j.value;z.value=null,G(),R.value=0,q(),B.value=[...t],A.value=void 0}function Q(e,t,n=1){let r=j.value[e];S.value||typeof r!=`number`||J(r+D.value*t*n,e,{commit:!0,focus:!0})}function $(e,t){J(t===`min`?T.value:E.value,e,{commit:!0,focus:!0})}function Pe(e){if(S.value||typeof F.value!=`number`)return;if(e.key===`Home`){e.preventDefault(),$(F.value,`min`);return}if(e.key===`End`){e.preventDefault(),$(F.value,`max`);return}if(!c.concat(s).includes(e.key))return;e.preventDefault();let t=ne[P.value].includes(e.key),n=c.includes(e.key)||e.shiftKey&&s.includes(e.key)?10:1;Q(F.value,t?-1:1,n)}return ee({modelValue:b,currentModelValue:j,disabled:S,orientation:C,dir:x,inverted:w,min:T,max:E,step:D,minStepsBetweenThumbs:O,thumbAlignment:Te,isHorizontal:De,startEdge:N,endEdge:Oe,slideDirection:P,activeThumbIndex:F,trackElement:I,thumbElements:L,setTrackElement:ke,setThumbElement:Ae,getPercentage:je,getClosestValueIndex:H,getThumbLabel:e=>ce(e,j.value.length),beginTrackDrag:Me,beginThumbDrag:Ne,moveDrag:X,endDrag:Z,stepValue:Q,setToLimit:$}),g(k,e=>{l(e,b.value)||(b.value=e),A.value&&l(e,A.value)&&(A.value=void 0)},{immediate:!0}),g(()=>j.value.length,e=>{L.value=L.value.slice(0,e)}),ve(()=>{G()}),(e,t)=>(p(),d(h(i),{ref:h(Se),as:f.as,"as-child":f.asChild,class:_e(h(Ce)),dir:h(x),"data-disabled":we.value,"data-orientation":C.value,onKeydown:Pe},{default:be(()=>[ye(e.$slots,`default`,{modelValue:j.value}),Ee.value&&f.name?(p(),d(h(o),{key:0,type:`number`,name:f.name,value:j.value,disabled:S.value,required:f.required},null,8,[`name`,`value`,`disabled`,`required`])):he(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`class`,`dir`,`data-disabled`,`data-orientation`]))}});export{_ as default};
+import{snapValueToStep as e}from"../../shared/value.js";import{isFormControl as t}from"../../shared/vue.js";import"../../shared/index.js";import{useControllableState as n}from"../../composables/use-controllable-state.js";import{useForwardElement as r}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{useDirection as i}from"../config-provider/context.js";import{Primitive as a}from"../primitive/primitive.js";import"../primitive/index.js";import o from"../visually-hidden/visually-hidden-input.js";import"../visually-hidden/index.js";import{provideSliderRootContext as ee,useSliderUi as te}from"./context.js";import{ARROW_KEYS as s,BACK_KEYS as ne,PAGE_KEYS as c,convertValueToPercentage as re,getClosestValueIndex as ie,getNextSortedValues as ae,getSliderSideState as oe,getSliderValueFromPointer as se,getThumbLabel as ce,getValidMinStepsBetweenThumbs as le,getValidSliderMax as ue,getValidSliderMin as de,getValidSliderStep as fe,hasMinStepsBetweenValues as pe,isSliderValuesEqual as l,normalizeSliderValues as me}from"./shared.js";import{computed as u,createBlock as d,createCommentVNode as he,defineComponent as f,nextTick as ge,normalizeClass as _e,onBeforeUnmount as ve,openBlock as p,renderSlot as ye,shallowRef as m,unref as h,watch as g,withCtx as be}from"vue";const _=f({name:`SliderRoot`,__name:`slider-root`,props:{modelValue:{default:void 0},defaultValue:{default:()=>[0]},disabled:{type:Boolean,default:!1},orientation:{default:`horizontal`},dir:{default:void 0},inverted:{type:Boolean,default:!1},min:{default:0},max:{default:100},step:{default:1},minStepsBetweenThumbs:{default:0},thumbAlignment:{default:`contain`},asChild:{type:Boolean},as:{default:`div`},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`valueCommit`],setup(f,{emit:_}){let v=f,y=_,[xe,Se]=r(),Ce=te(`root`),b=n(()=>v.modelValue,e=>{y(`update:modelValue`,e??[])},v.defaultValue),x=i(()=>v.dir),S=u(()=>v.disabled),we=u(()=>S.value?``:void 0),C=u(()=>v.orientation===`vertical`?`vertical`:`horizontal`),w=u(()=>v.inverted),T=u(()=>de(v.min)),E=u(()=>ue(v.max,T.value)),D=u(()=>fe(v.step)),O=u(()=>le(v.minStepsBetweenThumbs)),Te=u(()=>v.thumbAlignment===`overflow`?`overflow`:`contain`),k=u(()=>me(b.value,{defaultValue:v.defaultValue,min:T.value,max:E.value,step:D.value})),A=m(),j=u(()=>A.value??k.value),Ee=u(()=>t(xe.value)),De=u(()=>C.value===`horizontal`),M=u(()=>oe(C.value,x.value,w.value)),N=u(()=>M.value.startEdge),Oe=u(()=>M.value.endEdge),P=u(()=>M.value.slideDirection),F=m(0),I=m(),L=m([]),R=m(0),z=m(null),B=m(j.value);function ke(e){I.value!==e&&(I.value=e)}function Ae(e,t){if(L.value[e]===t)return;let n=[...L.value];n[e]=t,L.value=n}function je(e){return re(e,T.value,E.value)}function V(e){ge(()=>{L.value[e]?.focus()})}function H(e){return ie(j.value,e)}function U(e){return z.value===e}let W=null;function G(){W?.(),W=null}function K(e){G();let t=e=>{X(e)},n=e=>{Z(e.pointerId)};e.addEventListener(`pointermove`,t),e.addEventListener(`pointerup`,n),e.addEventListener(`pointercancel`,n),W=()=>{e.removeEventListener(`pointermove`,t),e.removeEventListener(`pointerup`,n),e.removeEventListener(`pointercancel`,n)}}function q(){let e=A.value??j.value;l(B.value,e)||y(`valueCommit`,[...e])}function J(t,n,r={}){let i=e(t,T.value,E.value,D.value),a=ae(j.value,i,n);if(!pe(a,O.value*D.value))return;let o=a.indexOf(i);if(F.value=o,l(a,j.value)){r.focus&&V(o),r.commit&&q();return}A.value=a,b.value=a,r.focus&&V(o),r.commit&&(y(`valueCommit`,[...a]),B.value=a,A.value=void 0)}function Y(e){return I.value?se(e,I.value.getBoundingClientRect(),{min:T.value,max:E.value,orientation:C.value,startEdge:N.value}):null}function Me(e){let t=Y(e);S.value||t===null||(z.value=e.pointerId,I.value?.ownerDocument&&K(I.value.ownerDocument),B.value=[...j.value],R.value=0,J(t,H(t),{focus:!0}))}function Ne(e,t){if(S.value)return;z.value=t.pointerId,I.value?.ownerDocument&&K(I.value.ownerDocument),B.value=[...j.value],F.value=e,V(e);let n=Y(t);R.value=n===null?0:j.value[e]-n}function X(e){let t=Y(e);S.value||t===null||!U(e.pointerId)||J(t+R.value,F.value)}function Z(e){if(S.value||typeof e==`number`&&!U(e))return;let t=A.value??j.value;z.value=null,G(),R.value=0,q(),B.value=[...t],A.value=void 0}function Q(e,t,n=1){let r=j.value[e];S.value||typeof r!=`number`||J(r+D.value*t*n,e,{commit:!0,focus:!0})}function $(e,t){J(t===`min`?T.value:E.value,e,{commit:!0,focus:!0})}function Pe(e){if(S.value||typeof F.value!=`number`)return;if(e.key===`Home`){e.preventDefault(),$(F.value,`min`);return}if(e.key===`End`){e.preventDefault(),$(F.value,`max`);return}if(!c.concat(s).includes(e.key))return;e.preventDefault();let t=ne[P.value].includes(e.key),n=c.includes(e.key)||e.shiftKey&&s.includes(e.key)?10:1;Q(F.value,t?-1:1,n)}return ee({modelValue:b,currentModelValue:j,disabled:S,orientation:C,dir:x,inverted:w,min:T,max:E,step:D,minStepsBetweenThumbs:O,thumbAlignment:Te,isHorizontal:De,startEdge:N,endEdge:Oe,slideDirection:P,activeThumbIndex:F,trackElement:I,thumbElements:L,setTrackElement:ke,setThumbElement:Ae,getPercentage:je,getClosestValueIndex:H,getThumbLabel:e=>ce(e,j.value.length),beginTrackDrag:Me,beginThumbDrag:Ne,moveDrag:X,endDrag:Z,stepValue:Q,setToLimit:$}),g(k,e=>{l(e,b.value)||(b.value=e),A.value&&l(e,A.value)&&(A.value=void 0)},{immediate:!0}),g(()=>j.value.length,e=>{L.value=L.value.slice(0,e)}),ve(()=>{G()}),(e,t)=>(p(),d(h(a),{ref:h(Se),as:f.as,"as-child":f.asChild,class:_e(h(Ce)),dir:h(x),"data-disabled":we.value,"data-orientation":C.value,onKeydown:Pe},{default:be(()=>[ye(e.$slots,`default`,{modelValue:j.value}),Ee.value&&f.name?(p(),d(h(o),{key:0,type:`number`,name:f.name,value:j.value,disabled:S.value,required:f.required},null,8,[`name`,`value`,`disabled`,`required`])):he(`v-if`,!0)]),_:3},8,[`as`,`as-child`,`class`,`dir`,`data-disabled`,`data-orientation`]))}});export{_ as default};

package/dist/components/slider/slider-root.vue.d.ts

@@ -18,14 +18,14 @@ declare const __VLS_base: _$vue.DefineComponent<SliderRootProps, {}, {}, {}, {},
   onValueCommit?: ((value: number[]) => any) | undefined;
 }>, {
   dir: Direction;
+  disabled: boolean;
   max: number;
   min: number;
   orientation: DataOrientation;
-  disabled: boolean;
   modelValue: number[];
   defaultValue: number[];
-  as: AsTag | _$vue.Component;
   step: number;
+  as: AsTag | _$vue.Component;
   inverted: boolean;
   minStepsBetweenThumbs: number;
   thumbAlignment: SliderThumbAlignment;

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

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { SplitterUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/splitter/context.d.ts
-declare const provideSplitterUi: (ui: _$vue.ComputedRef<Partial<UiClass<SplitterUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<SplitterUiSlot>>>, useSplitterUi: <S extends SplitterUiSlot | undefined = undefined>(slot?: S | undefined) => S extends SplitterUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<SplitterUiSlot>>>;
+declare const provideSplitterUi: (ui: _$vue.ComputedRef<Partial<UiClass<SplitterUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<SplitterUiSlot>>>, useSplitterUi: UseUiConsumer<SplitterUiSlot>;
 //#endregion
 export { provideSplitterUi };

package/dist/components/splitter/splitter-group.vue.d.ts

@@ -18,8 +18,8 @@ declare const __VLS_base: _$vue.DefineComponent<SplitterGroupProps, {}, {}, {},
   dir: Direction;
   direction: DataOrientation;
   as: AsTag | _$vue.Component;
-  keyboardResizeBy: number;
   defaultLayout: number[];
+  keyboardResizeBy: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/splitter/splitter-panel.vue.d.ts

@@ -25,20 +25,20 @@ declare const __VLS_base: _$vue.DefineComponent<SplitterPanelProps, {
   isExpanded: _$vue.ComputedRef<boolean>;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   resize: (size: number, prevSize: number | undefined) => any;
-  expand: () => any;
   collapse: () => any;
+  expand: () => any;
 }, string, _$vue.PublicProps, Readonly<SplitterPanelProps> & Readonly<{
   onResize?: ((size: number, prevSize: number | undefined) => any) | undefined;
-  onExpand?: (() => any) | undefined;
   onCollapse?: (() => any) | undefined;
+  onExpand?: (() => any) | undefined;
 }>, {
   collapsible: boolean;
   order: number;
   as: AsTag | _$vue.Component;
   defaultSize: number;
-  minSize: number;
-  maxSize: number;
   collapsedSize: number;
+  maxSize: number;
+  minSize: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { StepperUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/stepper/context.d.ts
-declare const provideStepperUi: (ui: _$vue.ComputedRef<Partial<UiClass<StepperUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<StepperUiSlot>>>, useStepperUi: <S extends StepperUiSlot | undefined = undefined>(slot?: S | undefined) => S extends StepperUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<StepperUiSlot>>>;
+declare const provideStepperUi: (ui: _$vue.ComputedRef<Partial<UiClass<StepperUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<StepperUiSlot>>>, useStepperUi: UseUiConsumer<StepperUiSlot>;
 //#endregion
 export { provideStepperUi };

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

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { SwitchUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/switch/context.d.ts
-declare const provideSwitchUi: (ui: _$vue.ComputedRef<Partial<UiClass<SwitchUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<SwitchUiSlot>>>, useSwitchUi: <S extends SwitchUiSlot | undefined = undefined>(slot?: S | undefined) => S extends SwitchUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<SwitchUiSlot>>>;
+declare const provideSwitchUi: (ui: _$vue.ComputedRef<Partial<UiClass<SwitchUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<SwitchUiSlot>>>, useSwitchUi: UseUiConsumer<SwitchUiSlot>;
 //#endregion
 export { provideSwitchUi };

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

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { TableUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/table/context.d.ts
-declare const provideTableUi: (ui: _$vue.ComputedRef<Partial<UiClass<TableUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TableUiSlot>>>, useTableUi: <S extends TableUiSlot | undefined = undefined>(slot?: S | undefined) => S extends TableUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<TableUiSlot>>>;
+declare const provideTableUi: (ui: _$vue.ComputedRef<Partial<UiClass<TableUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TableUiSlot>>>, useTableUi: UseUiConsumer<TableUiSlot>;
 //#endregion
 export { provideTableUi };

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

@@ -1,9 +1,10 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { TabsUiSlot } from "./types.js";
 import * as _$vue from "vue";
 import { MaybeRefOrGetter } from "vue";
 
 //#region src/components/tabs/context.d.ts
-declare const provideTabsUi: (ui: _$vue.ComputedRef<Partial<UiClass<TabsUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TabsUiSlot>>>, useTabsUi: <S extends TabsUiSlot | undefined = undefined>(slot?: S | undefined) => S extends TabsUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<TabsUiSlot>>>;
+declare const provideTabsUi: (ui: _$vue.ComputedRef<Partial<UiClass<TabsUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TabsUiSlot>>>, useTabsUi: UseUiConsumer<TabsUiSlot>;
 //#endregion
 export { provideTabsUi };

package/dist/components/tabs/index.d.ts

@@ -1,8 +1,9 @@
-import { TabsContentProps, TabsIndicatorProps, TabsListProps, TabsRootEmits, TabsRootProps, TabsTriggerProps, TabsUi, TabsUiSlot } from "./types.js";
-import { _default as _default$3 } from "./tabs-root.vue.js";
-import { _default as _default$2 } from "./tabs-list.vue.js";
-import { _default as _default$4 } from "./tabs-trigger.vue.js";
-import { _default } from "./tabs-content.vue.js";
-import { _default as _default$1 } from "./tabs-indicator.vue.js";
+import { TabsCompactEmits, TabsCompactProps, TabsCompactSlots, TabsContentProps, TabsIndicatorProps, TabsListProps, TabsOptionData, TabsRootEmits, TabsRootProps, TabsTriggerProps, TabsUi, TabsUiSlot } from "./types.js";
+import { _default as _default$4 } from "./tabs-root.vue.js";
+import { _default as _default$3 } from "./tabs-list.vue.js";
+import { _default as _default$5 } from "./tabs-trigger.vue.js";
+import { _default as _default$1 } from "./tabs-content.vue.js";
+import { _default as _default$2 } from "./tabs-indicator.vue.js";
+import { _default } from "./tabs-compact.vue.js";
 import { provideTabsUi } from "./context.js";
-export { _default as TabsContent, type TabsContentProps, _default$1 as TabsIndicator, type TabsIndicatorProps, _default$2 as TabsList, type TabsListProps, _default$3 as TabsRoot, type TabsRootEmits, type TabsRootProps, _default$4 as TabsTrigger, type TabsTriggerProps, type TabsUi, type TabsUiSlot, provideTabsUi };
+export { _default as TabsCompact, type TabsCompactEmits, type TabsCompactProps, type TabsCompactSlots, _default$1 as TabsContent, type TabsContentProps, _default$2 as TabsIndicator, type TabsIndicatorProps, _default$3 as TabsList, type TabsListProps, type TabsOptionData, _default$4 as TabsRoot, type TabsRootEmits, type TabsRootProps, _default$5 as TabsTrigger, type TabsTriggerProps, type TabsUi, type TabsUiSlot, provideTabsUi };

package/dist/components/tabs/index.js

@@ -1 +1 @@
-import{provideTabsUi as e}from"./context.js";import t from"./tabs-root.js";import n from"./tabs-list.js";import r from"./tabs-trigger.js";import i from"./tabs-content.js";import a from"./tabs-indicator.js";export{i as TabsContent,a as TabsIndicator,n as TabsList,t as TabsRoot,r as TabsTrigger,e as provideTabsUi};
+import{provideTabsUi as e}from"./context.js";import t from"./tabs-root.js";import n from"./tabs-list.js";import r from"./tabs-trigger.js";import i from"./tabs-content.js";import a from"./tabs-indicator.js";import o from"./tabs-compact.js";export{o as TabsCompact,i as TabsContent,a as TabsIndicator,n as TabsList,t as TabsRoot,r as TabsTrigger,e as provideTabsUi};

package/dist/components/tabs/tabs-compact.js

@@ -0,0 +1 @@
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import{useTabsUi as t}from"./context.js";import n from"./tabs-root.js";import r from"./tabs-list.js";import i from"./tabs-trigger.js";import a from"./tabs-content.js";import o from"./tabs-indicator.js";import{Fragment as s,createBlock as c,createCommentVNode as l,createElementBlock as u,createElementVNode as d,createTextVNode as f,createVNode as p,defineComponent as m,guardReactiveProps as h,mergeProps as g,normalizeClass as _,normalizeProps as v,openBlock as y,renderList as b,renderSlot as x,toDisplayString as S,unref as C,withCtx as w}from"vue";const T=m({name:`TabsCompact`,__name:`tabs-compact`,props:{items:{},enableIndicator:{type:Boolean,default:!0},listProps:{},triggerProps:{},contentProps:{},indicatorProps:{},modelValue:{default:void 0},defaultValue:{},activationMode:{},unmountOnHide:{type:Boolean,default:!0},orientation:{},dir:{},loop:{type:Boolean,default:!0}},emits:[`update:modelValue`],setup(m,{emit:T}){let E=m,D=T,O=e(E,[`items`,`enableIndicator`,`listProps`,`triggerProps`,`contentProps`,`indicatorProps`]),k=t(),A=e=>{D(`update:modelValue`,e)};return(e,t)=>(y(),c(n,g(C(O),{"onUpdate:modelValue":A}),{default:w(()=>[p(r,v(h(m.listProps)),{default:w(()=>[(y(!0),u(s,null,b(m.items,t=>(y(),c(i,g({key:t.value},{ref_for:!0},m.triggerProps,{value:t.value,disabled:t.disabled}),{default:w(n=>[x(e.$slots,`trigger`,g({ref_for:!0},{...t,...n}),()=>[f(S(t.label),1)])]),_:2},1040,[`value`,`disabled`]))),128)),m.enableIndicator?(y(),c(o,v(g({key:0},m.indicatorProps)),{default:w(()=>[x(e.$slots,`indicator`,{},()=>[d(`div`,{class:_(C(k).indicatorContent)},null,2)])]),_:3},16)):l(`v-if`,!0)]),_:3},16),(y(!0),u(s,null,b(m.items,t=>(y(),c(a,g({key:t.value},{ref_for:!0},m.contentProps,{value:t.value}),{default:w(n=>[x(e.$slots,`content`,g({ref_for:!0},{...t,...n}))]),_:2},1040,[`value`]))),128))]),_:3},16))}});export{T as default};

package/dist/components/tabs/tabs-compact.vue.d.ts

@@ -0,0 +1,21 @@
+import { TabsCompactProps, TabsCompactSlots, TabsOptionData } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/tabs/tabs-compact.vue.d.ts
+declare const __VLS_export: <T extends TabsOptionData = TabsOptionData>(__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: _$vue.PublicProps & __VLS_PrettifyLocal<TabsCompactProps<T> & {
+    "onUpdate:modelValue"?: ((payload: T["value"]) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: TabsCompactSlots<T>;
+  emit: (evt: "update:modelValue", payload: T["value"]) => void;
+}>) => _$vue.VNode & {
+  __ctx?: 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 };

package/dist/components/tabs/tabs-root.vue.d.ts

@@ -17,9 +17,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, _$v
 }>, {
   orientation: DataOrientation;
   modelValue: DefinedValue | null;
+  activationMode: TabsActivationMode;
   loop: boolean;
   unmountOnHide: boolean;
-  activationMode: TabsActivationMode;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -42,7 +42,30 @@ interface TabsTriggerProps extends PrimitiveProps, /** @vue-ignore */HTMLAttribu
   disabled?: boolean;
 }
 interface TabsIndicatorProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
-type TabsUiSlot = 'root' | 'list' | 'trigger' | 'content' | 'indicator';
+interface TabsOptionData<T extends DefinedValue = DefinedValue> {
+  value: T;
+  label: string;
+  disabled?: boolean;
+}
+interface TabsCompactProps<T extends TabsOptionData = TabsOptionData> extends TabsRootProps<T['value'] | null> {
+  items: T[];
+  enableIndicator?: boolean;
+  listProps?: TabsListProps;
+  triggerProps?: TabsTriggerProps;
+  contentProps?: TabsContentProps;
+  indicatorProps?: TabsIndicatorProps;
+}
+type TabsCompactEmits<T extends AcceptableValue = AcceptableValue> = TabsRootEmits<T>;
+type TabsCompactSlots<T extends TabsOptionData = TabsOptionData> = {
+  trigger?: (props: T & {
+    active: boolean;
+  }) => any;
+  content?: (props: T & {
+    active: boolean;
+  }) => any;
+  indicator?: () => any;
+};
+type TabsUiSlot = 'root' | 'list' | 'trigger' | 'content' | 'indicator' | 'indicatorContent';
 type TabsUi = UiClass<TabsUiSlot>;
 //#endregion
-export { TabsActivationMode, TabsContentProps, TabsIndicatorProps, TabsListProps, TabsRootEmits, TabsRootProps, TabsTriggerProps, TabsUi, TabsUiSlot };
+export { TabsActivationMode, TabsCompactEmits, TabsCompactProps, TabsCompactSlots, TabsContentProps, TabsIndicatorProps, TabsListProps, TabsOptionData, TabsRootEmits, TabsRootProps, TabsTriggerProps, TabsUi, TabsUiSlot };

package/dist/components/tags-input/context.d.ts

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { TagsInputUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/tags-input/context.d.ts
-declare const provideTagsInputUi: (ui: _$vue.ComputedRef<Partial<UiClass<TagsInputUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TagsInputUiSlot>>>, useTagsInputUi: <S extends TagsInputUiSlot | undefined = undefined>(slot?: S | undefined) => S extends TagsInputUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<TagsInputUiSlot>>>;
+declare const provideTagsInputUi: (ui: _$vue.ComputedRef<Partial<UiClass<TagsInputUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TagsInputUiSlot>>>, useTagsInputUi: UseUiConsumer<TagsInputUiSlot>;
 //#endregion
 export { provideTagsInputUi };

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

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { TextareaUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/textarea/context.d.ts
-declare const provideTextareaUi: (ui: _$vue.ComputedRef<Partial<UiClass<TextareaUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TextareaUiSlot>>>, useTextareaUi: <S extends TextareaUiSlot | undefined = undefined>(slot?: S | undefined) => S extends TextareaUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<TextareaUiSlot>>>;
+declare const provideTextareaUi: (ui: _$vue.ComputedRef<Partial<UiClass<TextareaUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TextareaUiSlot>>>, useTextareaUi: UseUiConsumer<TextareaUiSlot>;
 //#endregion
 export { provideTextareaUi };

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

@@ -1,8 +1,9 @@
-import { ClassValue, UiClass } from "../../types/common.js";
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
 import { ToastUiSlot } from "./types.js";
 import * as _$vue from "vue";
 
 //#region src/components/toast/context.d.ts
-declare const provideToastUi: (ui: _$vue.ComputedRef<Partial<UiClass<ToastUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<ToastUiSlot>>>, useToastUi: <S extends ToastUiSlot | undefined = undefined>(slot?: S | undefined) => S extends ToastUiSlot ? _$vue.ComputedRef<ClassValue> : _$vue.ComputedRef<Partial<UiClass<ToastUiSlot>>>;
+declare const provideToastUi: (ui: _$vue.ComputedRef<Partial<UiClass<ToastUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<ToastUiSlot>>>, useToastUi: UseUiConsumer<ToastUiSlot>;
 //#endregion
 export { provideToastUi };

package/dist/components/toast/shared.js

@@ -1 +1 @@
-import{e}from"../../node_modules/.pnpm/@soybeanjs_utils@0.1.0/node_modules/@soybeanjs/utils/dist/index.js";import{h as t}from"vue";const n={gap:`--gap`,offsetTop:`--offset-top`,offsetRight:`--offset-right`,offsetBottom:`--offset-bottom`,offsetLeft:`--offset-left`,mobileOffsetTop:`--mobile-offset-top`,mobileOffsetRight:`--mobile-offset-right`,mobileOffsetBottom:`--mobile-offset-bottom`,mobileOffsetLeft:`--mobile-offset-left`,frontHeight:`--front-toast-height`},r={index:`--index`,offset:`--offset`,beforeIndex:`--toasts-before`,zIndex:`--z-index`,swipeAmountX:`--swipe-amount-x`,swipeAmountY:`--swipe-amount-y`,swipeDirection:`--swipe-direction`,swipeOut:`--swipe-out`,initialHeight:`--initial-height`},i=`top-right`,a=4e3,o=[`top-right`,`top-center`,`top-left`,`bottom-right`,`bottom-center`,`bottom-left`],s={left:`left`,right:`right`,top:`up`,bottom:`down`};function c(e){let[t,n]=e.split(`-`),r=[];return t&&r.push(s[t]),n&&r.push(s[n]),r}const l=t=>{let r={top:n.offsetTop,right:n.offsetRight,bottom:n.offsetBottom,left:n.offsetLeft},i={top:n.mobileOffsetTop,right:n.mobileOffsetRight,bottom:n.mobileOffsetBottom,left:n.mobileOffsetLeft},a={};return e(r).forEach(e=>{let n=(typeof t==`number`?t:t[e])??24;a[r[e]]=`${n}px`,a[i[e]]=`calc(${n}px * 0.67)`}),a},u=e=>{if(!e)return{x:0,y:0};let t=e.style.getPropertyValue(r.swipeAmountX),n=e.style.getPropertyValue(r.swipeAmountY);return{x:Number(t.replace(`px`,``))||0,y:Number(n.replace(`px`,``))||0}},d=(e,t)=>{e&&(e.style.setProperty(r.swipeAmountX,`${t.x}px`),e.style.setProperty(r.swipeAmountY,`${t.y}px`))},f=e=>{e&&d(e,{x:0,y:0})},p=e=>`dismiss`in e&&e.dismiss===!0,m=e=>[`altKey`,`ctrlKey`,`metaKey`,`shiftKey`].includes(e),h=(e,n)=>{if(e)return typeof e==`string`?n?.(e)??t(`span`,e):e},g=(e,n,r)=>typeof e==`string`?r?.(e,n)??t(`button`,e):e;export{o as ALL_TOAST_POSITIONS,i as DEFAULT_POSITION,a as TOAST_LIFETIME,g as getButtonNode,c as getDefaultSwipeDirections,h as getIconNode,u as getSwipeAmount,m as isModifierHotkey,p as isToastDismiss,f as resetSwipeAmount,l as resolveOffset,d as setSwipeAmount,r as toastCssVars,n as toasterCssVars};
+import{e}from"../../node_modules/.pnpm/@soybeanjs_utils@0.1.0/node_modules/@soybeanjs/utils/dist/index.js";const t={gap:`--gap`,offsetTop:`--offset-top`,offsetRight:`--offset-right`,offsetBottom:`--offset-bottom`,offsetLeft:`--offset-left`,mobileOffsetTop:`--mobile-offset-top`,mobileOffsetRight:`--mobile-offset-right`,mobileOffsetBottom:`--mobile-offset-bottom`,mobileOffsetLeft:`--mobile-offset-left`,frontHeight:`--front-toast-height`},n={index:`--index`,offset:`--offset`,beforeIndex:`--toasts-before`,zIndex:`--z-index`,swipeAmountX:`--swipe-amount-x`,swipeAmountY:`--swipe-amount-y`,swipeDirection:`--swipe-direction`,swipeOut:`--swipe-out`,initialHeight:`--initial-height`},r=`top-right`,i=4e3,a={info:`lucide:info`,success:`lucide:circle-check`,warning:`lucide:circle-alert`,error:`lucide:circle-x`,close:`lucide:x`,loading:`svg-spinners:270-ring`},o=[`top-right`,`top-center`,`top-left`,`bottom-right`,`bottom-center`,`bottom-left`],s={left:`left`,right:`right`,top:`up`,bottom:`down`};function c(e){let[t,n]=e.split(`-`),r=[];return t&&r.push(s[t]),n&&r.push(s[n]),r}const l=n=>{let r={top:t.offsetTop,right:t.offsetRight,bottom:t.offsetBottom,left:t.offsetLeft},i={top:t.mobileOffsetTop,right:t.mobileOffsetRight,bottom:t.mobileOffsetBottom,left:t.mobileOffsetLeft},a={};return e(r).forEach(e=>{let t=(typeof n==`number`?n:n[e])??24;a[r[e]]=`${t}px`,a[i[e]]=`calc(${t}px * 0.67)`}),a},u=e=>{if(!e)return{x:0,y:0};let t=e.style.getPropertyValue(n.swipeAmountX),r=e.style.getPropertyValue(n.swipeAmountY);return{x:Number(t.replace(`px`,``))||0,y:Number(r.replace(`px`,``))||0}},d=(e,t)=>{e&&(e.style.setProperty(n.swipeAmountX,`${t.x}px`),e.style.setProperty(n.swipeAmountY,`${t.y}px`))},f=e=>{e&&d(e,{x:0,y:0})},p=e=>`dismiss`in e&&e.dismiss===!0,m=e=>[`altKey`,`ctrlKey`,`metaKey`,`shiftKey`].includes(e);export{o as ALL_TOAST_POSITIONS,r as DEFAULT_POSITION,a as ICONS,i as TOAST_LIFETIME,c as getDefaultSwipeDirections,u as getSwipeAmount,m as isModifierHotkey,p as isToastDismiss,f as resetSwipeAmount,l as resolveOffset,d as setSwipeAmount,n as toastCssVars,t as toasterCssVars};

package/dist/components/toast/state.js

@@ -1 +1 @@
-import{_defineProperty as e}from"../../_virtual/_@oxc-project_runtime@0.126.0/helpers/defineProperty.js";import{isVNode as t}from"vue";let n=1;const r=new class{constructor(){e(this,`subscribers`,void 0),e(this,`toasts`,void 0),e(this,`dismissed`,void 0),e(this,`subscribe`,e=>(this.subscribers.push(e),()=>{let t=this.subscribers.indexOf(e);t>=0&&this.subscribers.splice(t,1)})),e(this,`publish`,e=>{this.subscribers.forEach(t=>t(e))}),e(this,`resetDismissed`,e=>{this.dismissed.has(e)&&this.dismissed.delete(e)}),e(this,`upsert`,e=>{let t=this.toasts.findIndex(t=>t.id===e.id);if(t<0){this.publish(e),this.toasts=[...this.toasts,e];return}let n={...this.toasts[t],...e};this.publish(n),this.toasts=this.toasts.map((e,r)=>r===t?n:e)}),e(this,`create`,e=>{let{message:t,dismissible:n=!0,...r}=e,i=s(e.id);this.resetDismissed(i);let a={...r,id:i,dismissible:n,title:t};return this.upsert(a),i}),e(this,`dismiss`,e=>{if(e!==void 0)return this.dismissed.add(e),requestAnimationFrame(()=>this.publish({id:e,dismiss:!0})),e;this.toasts.forEach(e=>{this.dismissed.add(e.id),this.publish({id:e.id,dismiss:!0})})}),e(this,`message`,(e,t)=>this.create({...t,message:e,type:`default`})),e(this,`error`,(e,t)=>this.create({...t,message:e,type:`error`})),e(this,`success`,(e,t)=>this.create({...t,message:e,type:`success`})),e(this,`info`,(e,t)=>this.create({...t,message:e,type:`info`})),e(this,`warning`,(e,t)=>this.create({...t,message:e,type:`warning`})),e(this,`loading`,(e,t)=>this.create({...t,message:e,type:`loading`})),e(this,`custom`,(e,t)=>{let n=s(t?.id),r=t?.dismissible??!0;return this.resetDismissed(n),this.upsert({custom:e,dismissible:r,id:n,...t}),n}),e(this,`promise`,(e,n)=>{if(!n)return;let r;n.loading!==void 0&&(r=this.create({...n,promise:e,type:`loading`,message:n.loading,description:typeof n.description==`function`?void 0:n.description}));let i=Promise.resolve(typeof e==`function`?e():e),a=r!==void 0,s,l=async(e,t,n,i)=>{a=!1;let{description:o,settings:s}=await c(t,n,i,r);this.create({id:r,type:e,description:o,...s})},u=i.then(async e=>{if(s=[`resolve`,e],t(e)){a=!1,this.create({id:r,type:`default`,message:e});return}if(o(e)&&!e.ok){await l(`error`,n.error,n.description,`HTTP error! status: ${e.status}`);return}if(e instanceof Error){await l(`error`,n.error,n.description,e);return}n.success!==void 0&&await l(`success`,n.success,n.description,e)}).catch(async e=>{s=[`reject`,e],n.error!==void 0&&await l(`error`,n.error,n.description,e)}).finally(()=>{a&&(this.dismiss(r),r=void 0),n.finally?.()}),d=()=>new Promise((e,t)=>u.then(()=>s[0]===`reject`?t(s[1]):e(s[1])).catch(t));return typeof r!=`string`&&typeof r!=`number`?{unwrap:d}:Object.assign(r,{unwrap:d})}),e(this,`getActives`,()=>this.toasts.filter(e=>!this.dismissed.has(e.id))),this.subscribers=[],this.toasts=[],this.dismissed=new Set}},i=r.message,a=Object.assign(i,{success:r.success,info:r.info,warning:r.warning,error:r.error,custom:r.custom,message:r.message,promise:r.promise,dismiss:r.dismiss,loading:r.loading},{getHistory:()=>r.toasts,getToasts:()=>r.getActives()});function o(e){return typeof e==`object`&&!!e&&`ok`in e&&typeof e.ok==`boolean`&&`status`in e&&typeof e.status==`number`}function s(e){return typeof e==`number`||typeof e==`string`&&e.length>0?e:n++}async function c(e,t,n,r){let[i,a]=await Promise.all([l(e,n),l(t,n)]);return{description:a,settings:d(i,r)}}async function l(e,t){return typeof e==`function`?await e(t):e}function u(e){return typeof e==`object`&&!!e&&`message`in e}function d(e,t){return u(e)?e:{id:t??``,message:e??``}}export{r as ToastState,a as toast};
+import{_defineProperty as e}from"../../_virtual/_@oxc-project_runtime@0.127.0/helpers/defineProperty.js";import{isVNode as t}from"vue";let n=1;const r=new class{constructor(){e(this,`subscribers`,void 0),e(this,`toasts`,void 0),e(this,`dismissed`,void 0),e(this,`subscribe`,e=>(this.subscribers.push(e),()=>{let t=this.subscribers.indexOf(e);t>=0&&this.subscribers.splice(t,1)})),e(this,`publish`,e=>{this.subscribers.forEach(t=>t(e))}),e(this,`resetDismissed`,e=>{this.dismissed.has(e)&&this.dismissed.delete(e)}),e(this,`upsert`,e=>{let t=this.toasts.findIndex(t=>t.id===e.id);if(t<0){this.publish(e),this.toasts=[...this.toasts,e];return}let n={...this.toasts[t],...e};this.publish(n),this.toasts=this.toasts.map((e,r)=>r===t?n:e)}),e(this,`create`,e=>{let{message:t,dismissible:n=!0,...r}=e,i=s(e.id);this.resetDismissed(i);let a={...r,id:i,dismissible:n,title:t};return this.upsert(a),i}),e(this,`dismiss`,e=>{if(e!==void 0)return this.dismissed.add(e),requestAnimationFrame(()=>this.publish({id:e,dismiss:!0})),e;this.toasts.forEach(e=>{this.dismissed.add(e.id),this.publish({id:e.id,dismiss:!0})})}),e(this,`message`,(e,t)=>this.create({...t,message:e,type:`default`})),e(this,`error`,(e,t)=>this.create({...t,message:e,type:`error`})),e(this,`success`,(e,t)=>this.create({...t,message:e,type:`success`})),e(this,`info`,(e,t)=>this.create({...t,message:e,type:`info`})),e(this,`warning`,(e,t)=>this.create({...t,message:e,type:`warning`})),e(this,`loading`,(e,t)=>this.create({...t,message:e,type:`loading`})),e(this,`custom`,(e,t)=>{let n=s(t?.id),r=t?.dismissible??!0;return this.resetDismissed(n),this.upsert({custom:e,dismissible:r,id:n,...t}),n}),e(this,`promise`,(e,n)=>{if(!n)return;let r;n.loading!==void 0&&(r=this.create({...n,promise:e,type:`loading`,message:n.loading,description:typeof n.description==`function`?void 0:n.description}));let i=Promise.resolve(typeof e==`function`?e():e),a=r!==void 0,s,l=async(e,t,n,i)=>{a=!1;let{description:o,settings:s}=await c(t,n,i,r);this.create({id:r,type:e,description:o,...s})},u=i.then(async e=>{if(s=[`resolve`,e],t(e)){a=!1,this.create({id:r,type:`default`,message:e});return}if(o(e)&&!e.ok){await l(`error`,n.error,n.description,`HTTP error! status: ${e.status}`);return}if(e instanceof Error){await l(`error`,n.error,n.description,e);return}n.success!==void 0&&await l(`success`,n.success,n.description,e)}).catch(async e=>{s=[`reject`,e],n.error!==void 0&&await l(`error`,n.error,n.description,e)}).finally(()=>{a&&(this.dismiss(r),r=void 0),n.finally?.()}),d=()=>new Promise((e,t)=>u.then(()=>s[0]===`reject`?t(s[1]):e(s[1])).catch(t));return typeof r!=`string`&&typeof r!=`number`?{unwrap:d}:Object.assign(r,{unwrap:d})}),e(this,`getActives`,()=>this.toasts.filter(e=>!this.dismissed.has(e.id))),this.subscribers=[],this.toasts=[],this.dismissed=new Set}},i=r.message,a=Object.assign(i,{success:r.success,info:r.info,warning:r.warning,error:r.error,custom:r.custom,message:r.message,promise:r.promise,dismiss:r.dismiss,loading:r.loading},{getHistory:()=>r.toasts,getToasts:()=>r.getActives()});function o(e){return typeof e==`object`&&!!e&&`ok`in e&&typeof e.ok==`boolean`&&`status`in e&&typeof e.status==`number`}function s(e){return typeof e==`number`||typeof e==`string`&&e.length>0?e:n++}async function c(e,t,n,r){let[i,a]=await Promise.all([l(e,n),l(t,n)]);return{description:a,settings:d(i,r)}}async function l(e,t){return typeof e==`function`?await e(t):e}function u(e){return typeof e==`object`&&!!e&&`message`in e}function d(e,t){return u(e)?e:{id:t??``,message:e??``}}export{r as ToastState,a as toast};

package/dist/components/toast/toast.js

@@ -1 +1 @@
-import{useToastUi as e,useToasterContext as t}from"./context.js";import{getButtonNode as n,getDefaultSwipeDirections as r,getIconNode as i,getSwipeAmount as a,resetSwipeAmount as o,setSwipeAmount as ee,toastCssVars as s}from"./shared.js";import c from"./toast-render.js";import{Fragment as te,computed as l,createBlock as u,createCommentVNode as d,createElementBlock as f,createElementVNode as p,createVNode as m,defineComponent as h,mergeProps as g,onWatcherCleanup as ne,openBlock as _,resolveDynamicComponent as v,shallowRef as y,unref as b,useTemplateRef as x,watch as S,watchEffect as re}from"vue";import{useDocumentVisibility as ie,useElementSize as ae,useMounted as oe}from"@vueuse/core";const se=[`dir`,`data-rich-color`,`data-inverted`,`data-mounted`,`data-promise`,`data-swiped`,`data-removed`,`data-visible`,`data-y-position`,`data-x-position`,`data-index`,`data-front`,`data-swiping`,`data-dismissible`,`data-type`,`data-swipe-out`,`data-swipe-direction`,`data-expanded`,`data-testid`],C=h({name:`Toast`,__name:`toast`,props:{index:{},toast:{},position:{}},emits:[`update:height`,`remove`],setup(h,{emit:C}){let w=h,T=C,{dir:ce,allToasts:le,allHeights:E,gap:ue,duration:de,visibleCounts:fe,defaultExpanded:pe,swipeDirections:me,interactingPosition:he,expandedPosition:ge,showIcon:_e,showClose:ve,icons:D,iconRender:O,buttonRender:k,toastProps:ye,wrapperProps:be,contentProps:xe,titleProps:Se,descriptionProps:Ce,iconProps:we,footerProps:Te,actionProps:Ee,cancelProps:De,closeProps:Oe}=t(`Toast`),A=e(),j=x(`toast`),ke=x(`wrapper`),M=oe(),{height:Ae}=ae(ke),je=ie(),N=y(null),P=y(null),F=y(!1),I=y(!1),L=y(!1),R=y(!1),z=y(0),B=y(0),V=y(w.toast.duration??de.value),H=y(null),U=y(0),W=y(0),G=y(null),K=l(()=>w.toast.type),q=l(()=>{if(_e.value){if(w.toast.icon)return i(w.toast.icon,O);if(K.value&&K.value!==`default`)return i(D.value?.[K.value],O);if(w.toast.promise)return i(D.value?.loading,O)}}),J=l(()=>i(w.toast.close??D.value?.close,O)),Me=l(()=>w.index===0),Ne=l(()=>w.index+1<=fe.value),Y=l(()=>K.value===`loading`),X=l(()=>w.toast.dismissible!==!1),Z=l(()=>Math.max(E.value[w.position].findIndex(e=>e.toastId===w.toast.id),0)),Pe=l(()=>(w.toast.showClose||ve.value)&&X.value&&K.value!==`loading`),Fe=l(()=>w.toast.duration??de.value),Ie=l(()=>{let[e,t]=w.position.split(`-`);return{x:t,y:e}}),Le=l(()=>E.value[w.position].reduce((e,t,n)=>n>=Z.value?e:e+t.height,0)),Q=l(()=>Z.value*ue.value+Le.value),Re=l(()=>ge.value===w.position||pe.value&&M.value),ze=l(()=>({[s.index]:w.index,[s.beforeIndex]:w.index,[s.zIndex]:le.value[w.position].length-w.index,[s.offset]:`${F.value?z.value:Q.value}px`,[s.initialHeight]:pe.value?`auto`:`${B.value}px`})),Be=l(()=>{if(w.toast.action)return n(w.toast.action,`action`,k)}),Ve=l(()=>{if(w.toast.cancel)return n(w.toast.cancel,`cancel`,k)}),$=()=>{F.value=!0,z.value=Q.value,window.setTimeout(()=>{T(`remove`,w.toast)},200)},He=()=>{Y.value||!X.value||($(),w.toast.onDismiss?.(w.toast))},Ue=e=>{e.button!==2&&(Y.value||!X.value||(H.value=new Date,z.value=Q.value,e.target.setPointerCapture(e.pointerId),e.target.tagName!==`BUTTON`&&(I.value=!0,G.value={x:e.clientX,y:e.clientY})))},We=()=>{if(L.value||!X.value)return;G.value=null;let{x:e,y:t}=a(j.value),n=Date.now()-(H.value?.getTime()??Date.now()),r=N.value===`x`?e:t,i=Math.abs(r)/Math.max(n,1);if(Math.abs(r)>=45||i>.11){z.value=Q.value,w.toast.onDismiss?.(w.toast),N.value===`x`?P.value=e>0?`right`:`left`:P.value=t>0?`down`:`up`,$(),L.value=!0;return}o(j.value),R.value=!1,I.value=!1,N.value=null},Ge=e=>{if(!G.value||!X.value||(typeof window<`u`?window.getSelection()?.toString().length??0:0)>0)return;let t=e.clientY-G.value.y,n=e.clientX-G.value.x,i=me.value??r(w.position);!N.value&&(Math.abs(n)>1||Math.abs(t)>1)&&(N.value=Math.abs(n)>Math.abs(t)?`x`:`y`);let a={x:0,y:0},o=e=>1/(1.5+Math.abs(e)/20);if(N.value===`y`){if(i.includes(`up`)||i.includes(`down`))if(i.includes(`up`)&&t<0||i.includes(`down`)&&t>0)a.y=t;else{let e=t*o(t);a.y=Math.abs(e)<Math.abs(t)?e:t}}else if(N.value===`x`&&(i.includes(`left`)||i.includes(`right`)))if(i.includes(`left`)&&n<0||i.includes(`right`)&&n>0)a.x=n;else{let e=n*o(n);a.x=Math.abs(e)<Math.abs(n)?e:n}(Math.abs(a.x)>0||Math.abs(a.y)>0)&&(R.value=!0),ee(j.value,a)},Ke=()=>{I.value=!1,N.value=null,G.value=null},qe=e=>{w.toast.onAction?.(e),!e.defaultPrevented&&$()},Je=e=>{w.toast.onCancel?.(e),X.value&&$()};function Ye(e){B.value=e,T(`update:height`,{toastId:w.toast.id,height:e,position:w.toast.position??w.position})}function Xe(){let e=j.value;if(!e)return;let t=e.style.height;e.style.height=`auto`;let n=e.getBoundingClientRect().height;e.style.height=t,Ye(n)}return S(Fe,e=>{V.value=e},{immediate:!0}),S(Ae,e=>{M.value&&e&&Xe()},{flush:`post`}),S(()=>w.toast.delete,e=>{e&&($(),w.toast.onDismiss?.(w.toast))}),re(()=>{let e=w.toast;if(e.type===`loading`||e.promise||e.duration===1/0)return;let t;ge.value===w.position||he.value===w.position||je.value===`hidden`?(()=>{if(W.value<U.value){let e=Date.now()-U.value;V.value-=e}W.value=Date.now()})():V.value!==1/0&&(U.value=Date.now(),t=setTimeout(()=>{w.toast.onAutoClose?.(w.toast),$()},V.value)),ne(()=>{t!==void 0&&clearTimeout(t)})}),(e,t)=>(_(),f(`li`,g(b(ye),{ref:`toast`,class:[b(A).toast,h.toast.ui?.toast],dir:b(ce),tabindex:`0`,"data-slot":`toast`,"data-rich-color":h.toast.richColor,"data-inverted":h.toast.inverted,"data-mounted":b(M),"data-promise":!!h.toast.promise,"data-swiped":R.value,"data-removed":F.value,"data-visible":Ne.value,"data-y-position":Ie.value.y,"data-x-position":Ie.value.x,"data-index":h.index,"data-front":Me.value,"data-swiping":I.value,"data-dismissible":X.value,"data-type":K.value,"data-swipe-out":L.value,"data-swipe-direction":P.value,"data-expanded":Re.value,"data-testid":h.toast.testId,style:ze.value,onDragend:Ke,onPointerdown:Ue,onPointerup:We,onPointermove:Ge}),[p(`div`,g({ref:`wrapper`},b(be),{class:[b(A).wrapper,h.toast.ui?.wrapper],"data-slot":`wrapper`}),[h.toast.custom?(_(),u(v(h.toast.custom),{key:0})):(_(),f(te,{key:1},[p(`h3`,g(b(Se),{class:[b(A).title,h.toast.ui?.title],"data-slot":`title`}),[q.value?(_(),u(v(q.value),g({key:0},b(we),{class:[b(A).icon,h.toast.ui?.icon]}),null,16,[`class`])):d(`v-if`,!0),m(c,{is:h.toast.title},null,8,[`is`])],16),h.toast.description?(_(),f(`p`,g({key:0},b(Ce),{class:[b(A).description,h.toast.ui?.description],"data-slot":`description`}),[m(c,{is:h.toast.description},null,8,[`is`])],16)):d(`v-if`,!0),h.toast.content?(_(),u(v(h.toast.content),g({key:1},b(xe),{class:[b(A).content,h.toast.ui?.content],"data-slot":`content`}),null,16,[`class`])):d(`v-if`,!0),h.toast.action||h.toast.cancel?(_(),f(`div`,g({key:2},b(Te),{class:[b(A).footer,h.toast.ui?.footer],"data-slot":`footer`}),[(_(),u(v(Ve.value),g(b(De),{class:[b(A).cancel,h.toast.ui?.cancel],"data-slot":`cancel`,onClick:Je}),null,16,[`class`])),(_(),u(v(Be.value),g(b(Ee),{class:[b(A).action,h.toast.ui?.action],"data-slot":`action`,onClick:qe}),null,16,[`class`]))],16)):d(`v-if`,!0)],64))],16),Pe.value&&J.value?(_(),f(`button`,g({key:0},b(Oe),{class:[b(A).close,h.toast.ui?.close],"data-slot":`close`,onClick:He}),[(_(),u(v(J.value)))],16)):d(`v-if`,!0)],16,se))}});export{C as default};
+import e from"../_icon/icon.js";import t from"../button/button.js";import{useToastUi as n,useToasterContext as r}from"./context.js";import{getDefaultSwipeDirections as i,getSwipeAmount as a,resetSwipeAmount as o,setSwipeAmount as ee,toastCssVars as s}from"./shared.js";import c from"./toast-render.js";import{Fragment as te,computed as l,createBlock as u,createCommentVNode as d,createElementBlock as f,createElementVNode as p,createVNode as m,defineComponent as h,mergeProps as g,onWatcherCleanup as ne,openBlock as _,resolveDynamicComponent as v,shallowRef as y,unref as b,useTemplateRef as x,watch as S,watchEffect as re,withCtx as C}from"vue";import{useDocumentVisibility as ie,useElementSize as ae,useMounted as oe}from"@vueuse/core";const se=[`dir`,`data-rich-color`,`data-inverted`,`data-mounted`,`data-promise`,`data-swiped`,`data-removed`,`data-visible`,`data-y-position`,`data-x-position`,`data-index`,`data-front`,`data-swiping`,`data-dismissible`,`data-type`,`data-swipe-out`,`data-swipe-direction`,`data-expanded`,`data-testid`],w=h({name:`Toast`,__name:`toast`,props:{index:{},toast:{},position:{}},emits:[`update:height`,`remove`],setup(h,{emit:w}){let T=h,E=w,{dir:ce,allToasts:le,allHeights:D,gap:ue,duration:de,visibleCounts:fe,defaultExpanded:O,swipeDirections:pe,interactingPosition:me,expandedPosition:k,showIcon:he,showClose:ge,icons:A,toastProps:_e,wrapperProps:ve,contentProps:ye,titleProps:be,descriptionProps:xe,iconProps:Se,footerProps:Ce,actionProps:we,cancelProps:Te,closeProps:Ee}=r(`Toast`),j=n(),M=x(`toast`),De=x(`wrapper`),N=oe(),{height:Oe}=ae(De),ke=ie(),P=y(null),F=y(null),I=y(!1),L=y(!1),R=y(!1),z=y(!1),B=y(0),V=y(0),H=y(T.toast.duration??de.value),U=y(null),W=y(0),G=y(0),K=y(null),q=l(()=>T.toast.type),J=l(()=>{if(he.value){if(T.toast.icon)return T.toast.icon;if(q.value&&q.value!==`default`)return A.value[q.value];if(T.toast.promise)return A.value.loading}}),Ae=l(()=>T.index===0),je=l(()=>T.index+1<=fe.value),Y=l(()=>q.value===`loading`),X=l(()=>T.toast.dismissible!==!1),Z=l(()=>Math.max(D.value[T.position].findIndex(e=>e.toastId===T.toast.id),0)),Me=l(()=>(T.toast.showClose||ge.value)&&X.value&&q.value!==`loading`),Ne=l(()=>T.toast.duration??de.value),Pe=l(()=>{let[e,t]=T.position.split(`-`);return{x:t,y:e}}),Fe=l(()=>D.value[T.position].reduce((e,t,n)=>n>=Z.value?e:e+t.height,0)),Q=l(()=>Z.value*ue.value+Fe.value),Ie=l(()=>k.value===T.position||O.value&&N.value),Le=l(()=>({[s.index]:T.index,[s.beforeIndex]:T.index,[s.zIndex]:le.value[T.position].length-T.index,[s.offset]:`${I.value?B.value:Q.value}px`,[s.initialHeight]:O.value?`auto`:`${V.value}px`})),$=()=>{I.value=!0,B.value=Q.value,window.setTimeout(()=>{E(`remove`,T.toast)},200)},Re=()=>{Y.value||!X.value||($(),T.toast.onDismiss?.(T.toast))},ze=e=>{e.button!==2&&(Y.value||!X.value||(U.value=new Date,B.value=Q.value,e.target.setPointerCapture(e.pointerId),e.target.tagName!==`BUTTON`&&(L.value=!0,K.value={x:e.clientX,y:e.clientY})))},Be=()=>{if(R.value||!X.value)return;K.value=null;let{x:e,y:t}=a(M.value),n=Date.now()-(U.value?.getTime()??Date.now()),r=P.value===`x`?e:t,i=Math.abs(r)/Math.max(n,1);if(Math.abs(r)>=45||i>.11){B.value=Q.value,T.toast.onDismiss?.(T.toast),P.value===`x`?F.value=e>0?`right`:`left`:F.value=t>0?`down`:`up`,$(),R.value=!0;return}o(M.value),z.value=!1,L.value=!1,P.value=null},Ve=e=>{if(!K.value||!X.value||(typeof window<`u`?window.getSelection()?.toString().length??0:0)>0)return;let t=e.clientY-K.value.y,n=e.clientX-K.value.x,r=pe.value??i(T.position);!P.value&&(Math.abs(n)>1||Math.abs(t)>1)&&(P.value=Math.abs(n)>Math.abs(t)?`x`:`y`);let a={x:0,y:0},o=e=>1/(1.5+Math.abs(e)/20);if(P.value===`y`){if(r.includes(`up`)||r.includes(`down`))if(r.includes(`up`)&&t<0||r.includes(`down`)&&t>0)a.y=t;else{let e=t*o(t);a.y=Math.abs(e)<Math.abs(t)?e:t}}else if(P.value===`x`&&(r.includes(`left`)||r.includes(`right`)))if(r.includes(`left`)&&n<0||r.includes(`right`)&&n>0)a.x=n;else{let e=n*o(n);a.x=Math.abs(e)<Math.abs(n)?e:n}(Math.abs(a.x)>0||Math.abs(a.y)>0)&&(z.value=!0),ee(M.value,a)},He=()=>{L.value=!1,P.value=null,K.value=null},Ue=e=>{T.toast.onAction?.(e),!e.defaultPrevented&&$()},We=e=>{T.toast.onCancel?.(e),X.value&&$()};function Ge(e){V.value=e,E(`update:height`,{toastId:T.toast.id,height:e,position:T.toast.position??T.position})}function Ke(){let e=M.value;if(!e)return;let t=e.style.height;e.style.height=`auto`;let n=e.getBoundingClientRect().height;e.style.height=t,Ge(n)}return S(Ne,e=>{H.value=e},{immediate:!0}),S(Oe,e=>{N.value&&e&&Ke()},{flush:`post`}),S(()=>T.toast.delete,e=>{e&&($(),T.toast.onDismiss?.(T.toast))}),re(()=>{let e=T.toast;if(e.type===`loading`||e.promise||e.duration===1/0)return;let t;k.value===T.position||me.value===T.position||ke.value===`hidden`?(()=>{if(G.value<W.value){let e=Date.now()-W.value;H.value-=e}G.value=Date.now()})():H.value!==1/0&&(W.value=Date.now(),t=setTimeout(()=>{T.toast.onAutoClose?.(T.toast),$()},H.value)),ne(()=>{t!==void 0&&clearTimeout(t)})}),(n,r)=>(_(),f(`li`,g(b(_e),{ref:`toast`,class:[b(j).toast,h.toast.ui?.toast],dir:b(ce),tabindex:`0`,"data-slot":`toast`,"data-rich-color":h.toast.richColor,"data-inverted":h.toast.inverted,"data-mounted":b(N),"data-promise":!!h.toast.promise,"data-swiped":z.value,"data-removed":I.value,"data-visible":je.value,"data-y-position":Pe.value.y,"data-x-position":Pe.value.x,"data-index":h.index,"data-front":Ae.value,"data-swiping":L.value,"data-dismissible":X.value,"data-type":q.value,"data-swipe-out":R.value,"data-swipe-direction":F.value,"data-expanded":Ie.value,"data-testid":h.toast.testId,style:Le.value,onDragend:He,onPointerdown:ze,onPointerup:Be,onPointermove:Ve}),[p(`div`,g({ref:`wrapper`},b(ve),{class:[b(j).wrapper,h.toast.ui?.wrapper],"data-slot":`wrapper`}),[h.toast.custom?(_(),u(v(h.toast.custom),{key:0})):(_(),f(te,{key:1},[p(`h3`,g(b(be),{class:[b(j).title,h.toast.ui?.title],"data-slot":`title`}),[J.value?(_(),u(e,g({key:0},b(Se),{icon:J.value,class:[b(j).icon,h.toast.ui?.icon]}),null,16,[`icon`,`class`])):d(`v-if`,!0),m(c,{is:h.toast.title},null,8,[`is`])],16),h.toast.description?(_(),f(`p`,g({key:0},b(xe),{class:[b(j).description,h.toast.ui?.description],"data-slot":`description`}),[m(c,{is:h.toast.description},null,8,[`is`])],16)):d(`v-if`,!0),h.toast.content?(_(),u(v(h.toast.content),g({key:1},b(ye),{class:[b(j).content,h.toast.ui?.content],"data-slot":`content`}),null,16,[`class`])):d(`v-if`,!0),h.toast.action||h.toast.cancel?(_(),f(`div`,g({key:2},b(Ce),{class:[b(j).footer,h.toast.ui?.footer],"data-slot":`footer`}),[h.toast.cancel?(_(),u(t,g({key:0},b(Te),{class:[b(j).cancel,h.toast.ui?.cancel],"data-slot":`cancel`,onClick:We}),{default:C(()=>[m(c,{is:h.toast.cancel},null,8,[`is`])]),_:1},16,[`class`])):d(`v-if`,!0),h.toast.action?(_(),u(t,g({key:1},b(we),{class:[b(j).action,h.toast.ui?.action],"data-slot":`action`,onClick:Ue}),{default:C(()=>[m(c,{is:h.toast.action},null,8,[`is`])]),_:1},16,[`class`])):d(`v-if`,!0)],16)):d(`v-if`,!0)],64))],16),Me.value&&b(A)?.close?(_(),u(t,g({key:0},b(Ee),{class:[b(j).close,h.toast.ui?.close],"data-slot":`close`,onClick:Re}),{default:C(()=>[m(e,{icon:b(A)?.close},null,8,[`icon`])]),_:1},16,[`class`])):d(`v-if`,!0)],16,se))}});export{w as default};

package/dist/components/toast/toaster.js

@@ -1 +1 @@
-import{getElFromTemplateRef as e,transformPropsToContext as t}from"../../shared/vue.js";import{isClient as n}from"../../shared/env.js";import"../../shared/index.js";import{useDirection as r}from"../config-provider/context.js";import{ToastState as i}from"./state.js";import{provideToasterContext as a,useToastUi as o}from"./context.js";import{ALL_TOAST_POSITIONS as s,DEFAULT_POSITION as c,TOAST_LIFETIME as l,isModifierHotkey as u,isToastDismiss as d,resolveOffset as f,toasterCssVars as p}from"./shared.js";import{useToastState as m}from"./hooks.js";import h from"./toast.js";import{Fragment as g,computed as _,createBlock as v,createElementBlock as y,createElementVNode as b,defineComponent as x,mergeProps as S,nextTick as C,onBeforeUnmount as w,onWatcherCleanup as T,openBlock as E,renderList as D,renderSlot as O,shallowRef as k,unref as A,useAttrs as ee,watch as j,watchEffect as M}from"vue";const N=[`aria-label`],P=[`dir`,`data-y-position`,`data-x-position`,`onBlur`,`onFocus`,`onMouseenter`,`onMousemove`,`onMouseleave`,`onDragend`,`onPointerdown`,`onPointerup`],F=x({name:`Toaster`,inheritAttrs:!1,__name:`toaster`,props:{id:{},dir:{},hotkey:{default:()=>[`altKey`,`KeyT`]},customAriaLabel:{},containerAriaLabel:{default:`Notifications`},position:{default:c},defaultExpanded:{type:Boolean},duration:{default:l},gap:{default:12},offset:{default:24},visibleCounts:{default:3},swipeDirections:{},showIcon:{type:Boolean},showClose:{type:Boolean},icons:{},iconRender:{},buttonRender:{},toastProps:{},wrapperProps:{},contentProps:{},titleProps:{},descriptionProps:{},iconProps:{},footerProps:{},actionProps:{},cancelProps:{},closeProps:{}},setup(c){let l=c,x=ee(),F=o(),I=r(()=>l.dir),L=_(()=>l.hotkey.join(`+`).replace(/Key/g,``).replace(/Digit/g,``)),R=_(()=>l.customAriaLabel??`${l.containerAriaLabel} ${L.value}`),z={},B=(t,n)=>{z[t]=e(n)},{toasts:V,allToasts:H,filtered:U,heights:W,allHeights:G,allPositions:te,positionZIndex:K}=m({id:()=>l.id,position:()=>l.position}),q=k(null),J=k(null),Y=k(null),X=k(null),Z=_(()=>({[p.gap]:`${l.gap}px`,...f(l.offset)})),Q=e=>{q.value===e&&(q.value=null),J.value===e&&(J.value=null),X.value===e&&(X.value=null)},ne=e=>{z[e]?.focus()},re=e=>{if(W.value.findIndex(t=>t.toastId===e.toastId)!==-1){W.value=W.value.map(t=>t.toastId===e.toastId?e:t);return}let t=W.value.findIndex(t=>t.position===e.position);if(t!==-1){W.value=[...W.value.slice(0,t),e,...W.value.slice(t)];return}W.value=[e,...W.value]},ie=e=>{let t=V.value.findIndex(t=>t.id===e.id);if(t!==-1){let n=Object.assign({},V.value[t],e);V.value=[...V.value.slice(0,t),n,...V.value.slice(t+1)];return}V.value=[e,...V.value]},ae=e=>{V.value=V.value.filter(t=>t.id===e.id?(t.delete||i.dismiss(e.id),!1):!0),W.value=W.value.filter(t=>t.toastId!==e.id)},oe=(e,t)=>{let n=t.currentTarget;X.value===e&&n&&!n.contains(t.relatedTarget)&&(X.value=null,q.value===e&&J.value!==e&&(q.value=null),Y.value&&(Y.value.focus({preventScroll:!0}),Y.value=null))},se=(e,t)=>{t.target.dataset.dismissible!==`false`&&X.value!==e&&(X.value=e,Y.value=t.relatedTarget)},$=e=>{q.value=e},ce=e=>{J.value!==e&&X.value!==e&&q.value===e&&(q.value=null)},le=(e,t)=>{t.target.dataset.dismissible!==`false`&&(J.value=e,q.value=e)},ue=e=>{J.value===e&&(J.value=null)};return a({dir:I,allToasts:H,allHeights:G,interactingPosition:J,expandedPosition:q,iconRender:l.iconRender,buttonRender:l.buttonRender,...t(l,[`gap`,`duration`,`visibleCounts`,`defaultExpanded`,`swipeDirections`,`showIcon`,`showClose`,`icons`,`toastProps`,`wrapperProps`,`contentProps`,`titleProps`,`descriptionProps`,`iconProps`,`footerProps`,`actionProps`,`cancelProps`,`closeProps`])}),M(()=>{let e=i.subscribe(e=>{if(d(e)){requestAnimationFrame(()=>{V.value=V.value.map(t=>t.id===e.id?{...t,delete:!0}:t)});return}C(()=>{ie(e)})});T(()=>{e()})},{flush:`post`}),j(()=>V.value.length,e=>{e===0&&(q.value=null,J.value=null,X.value=null)}),j(()=>U.value,e=>{let t=new Set(e.map(e=>e.position??l.position));q.value&&!t.has(q.value)&&(q.value=null),J.value&&!t.has(J.value)&&(J.value=null),X.value&&!t.has(X.value)&&(X.value=null)},{deep:!0}),M(()=>{if(!n)return;let e=e=>{if(l.hotkey.length>0&&l.hotkey.every(t=>u(t)?e[t]:e.code===t)){let e=U.value[0]?.position??l.position??te.value[0];q.value=e,ne(e)}let t=Object.values(z).some(e=>e===document.activeElement||e?.contains(document.activeElement));e.code===`Escape`&&t&&(q.value=null,X.value=null)};document.addEventListener(`keydown`,e),T(()=>{document.removeEventListener(`keydown`,e)})}),w(()=>{Y.value&&(Y.value.focus({preventScroll:!0}),Y.value=null,X.value=null)}),(e,t)=>(E(),y(g,null,[b(`section`,{"aria-label":R.value,tabindex:`-1`,"aria-live":`polite`,"aria-relevant":`additions text`,"aria-atomic":`false`},[(E(!0),y(g,null,D(A(s),e=>(E(),y(`ol`,S({key:e},{ref_for:!0},A(x),{ref_for:!0,ref:t=>B(e,t),class:A(F).toaster,tabindex:`-1`,dir:A(I),"data-slot":`toaster`,"data-y-position":e.split(`-`)[0],"data-x-position":e.split(`-`)[1],style:{"--z-index":A(K)[e],"--front-toast-height":`${A(G)[e][0]?.height??0}px`,...Z.value},onBlur:t=>oe(e,t),onFocus:t=>se(e,t),onMouseenter:t=>$(e),onMousemove:t=>$(e),onMouseleave:t=>ce(e),onDragend:t=>Q(e),onPointerdown:t=>le(e,t),onPointerup:t=>ue(e)}),[(E(!0),y(g,null,D(A(H)[e],(t,n)=>(E(),v(h,{key:t.id,index:n,toast:t,position:e,"onUpdate:height":re,onRemove:ae},null,8,[`index`,`toast`,`position`]))),128))],16,P))),128))],8,N),O(e.$slots,`default`)],64))}});export{F as default};
+import{getElFromTemplateRef as e,transformPropsToContext as t}from"../../shared/vue.js";import{isClient as n}from"../../shared/env.js";import"../../shared/index.js";import{useDirection as r}from"../config-provider/context.js";import{ToastState as i}from"./state.js";import{provideToasterContext as a,useToastUi as o}from"./context.js";import{ALL_TOAST_POSITIONS as s,DEFAULT_POSITION as c,ICONS as l,TOAST_LIFETIME as u,isModifierHotkey as d,isToastDismiss as f,resolveOffset as ee,toasterCssVars as p}from"./shared.js";import{useToastState as m}from"./hooks.js";import h from"./toast.js";import{Fragment as g,computed as _,createBlock as v,createElementBlock as y,createElementVNode as b,defineComponent as x,mergeProps as S,nextTick as te,onBeforeUnmount as C,onWatcherCleanup as w,openBlock as T,renderList as E,renderSlot as ne,shallowRef as D,unref as O,useAttrs as k,watch as A,watchEffect as j}from"vue";const M=[`aria-label`],N=[`dir`,`data-y-position`,`data-x-position`,`onBlur`,`onFocus`,`onMouseenter`,`onMousemove`,`onMouseleave`,`onDragend`,`onPointerdown`,`onPointerup`],P=x({name:`Toaster`,inheritAttrs:!1,__name:`toaster`,props:{id:{},dir:{},hotkey:{default:()=>[`altKey`,`KeyT`]},customAriaLabel:{},containerAriaLabel:{default:`Notifications`},position:{default:c},defaultExpanded:{type:Boolean},duration:{default:u},gap:{default:12},offset:{default:24},visibleCounts:{default:3},swipeDirections:{},showIcon:{type:Boolean},showClose:{type:Boolean},icons:{},toastProps:{},wrapperProps:{},contentProps:{},titleProps:{},descriptionProps:{},iconProps:{},footerProps:{},actionProps:{},cancelProps:{},closeProps:{}},setup(c){let u=c,x=k(),P=o(),F=r(()=>u.dir),I=_(()=>u.hotkey.join(`+`).replace(/Key/g,``).replace(/Digit/g,``)),L=_(()=>u.customAriaLabel??`${u.containerAriaLabel} ${I.value}`),R={},z=(t,n)=>{R[t]=e(n)},{toasts:B,allToasts:V,filtered:H,heights:U,allHeights:W,allPositions:G,positionZIndex:K}=m({id:()=>u.id,position:()=>u.position}),q=_(()=>({...l,...u.icons})),J=D(null),Y=D(null),X=D(null),Z=D(null),re=_(()=>({[p.gap]:`${u.gap}px`,...ee(u.offset)})),ie=e=>{J.value===e&&(J.value=null),Y.value===e&&(Y.value=null),Z.value===e&&(Z.value=null)},ae=e=>{R[e]?.focus()},oe=e=>{if(U.value.findIndex(t=>t.toastId===e.toastId)!==-1){U.value=U.value.map(t=>t.toastId===e.toastId?e:t);return}let t=U.value.findIndex(t=>t.position===e.position);if(t!==-1){U.value=[...U.value.slice(0,t),e,...U.value.slice(t)];return}U.value=[e,...U.value]},se=e=>{let t=B.value.findIndex(t=>t.id===e.id);if(t!==-1){let n=Object.assign({},B.value[t],e);B.value=[...B.value.slice(0,t),n,...B.value.slice(t+1)];return}B.value=[e,...B.value]},Q=e=>{B.value=B.value.filter(t=>t.id===e.id?(t.delete||i.dismiss(e.id),!1):!0),U.value=U.value.filter(t=>t.toastId!==e.id)},ce=(e,t)=>{let n=t.currentTarget;Z.value===e&&n&&!n.contains(t.relatedTarget)&&(Z.value=null,J.value===e&&Y.value!==e&&(J.value=null),X.value&&(X.value.focus({preventScroll:!0}),X.value=null))},le=(e,t)=>{t.target.dataset.dismissible!==`false`&&Z.value!==e&&(Z.value=e,X.value=t.relatedTarget)},$=e=>{J.value=e},ue=e=>{Y.value!==e&&Z.value!==e&&J.value===e&&(J.value=null)},de=(e,t)=>{t.target.dataset.dismissible!==`false`&&(Y.value=e,J.value=e)},fe=e=>{Y.value===e&&(Y.value=null)};return a({dir:F,allToasts:V,allHeights:W,interactingPosition:Y,expandedPosition:J,icons:q,...t(u,[`gap`,`duration`,`visibleCounts`,`defaultExpanded`,`swipeDirections`,`showIcon`,`showClose`,`toastProps`,`wrapperProps`,`contentProps`,`titleProps`,`descriptionProps`,`iconProps`,`footerProps`,`actionProps`,`cancelProps`,`closeProps`])}),j(()=>{let e=i.subscribe(e=>{if(f(e)){requestAnimationFrame(()=>{B.value=B.value.map(t=>t.id===e.id?{...t,delete:!0}:t)});return}te(()=>{se(e)})});w(()=>{e()})},{flush:`post`}),A(()=>B.value.length,e=>{e===0&&(J.value=null,Y.value=null,Z.value=null)}),A(()=>H.value,e=>{let t=new Set(e.map(e=>e.position??u.position));J.value&&!t.has(J.value)&&(J.value=null),Y.value&&!t.has(Y.value)&&(Y.value=null),Z.value&&!t.has(Z.value)&&(Z.value=null)},{deep:!0}),j(()=>{if(!n)return;let e=e=>{if(u.hotkey.length>0&&u.hotkey.every(t=>d(t)?e[t]:e.code===t)){let e=H.value[0]?.position??u.position??G.value[0];J.value=e,ae(e)}let t=Object.values(R).some(e=>e===document.activeElement||e?.contains(document.activeElement));e.code===`Escape`&&t&&(J.value=null,Z.value=null)};document.addEventListener(`keydown`,e),w(()=>{document.removeEventListener(`keydown`,e)})}),C(()=>{X.value&&(X.value.focus({preventScroll:!0}),X.value=null,Z.value=null)}),(e,t)=>(T(),y(g,null,[b(`section`,{"aria-label":L.value,tabindex:`-1`,"aria-live":`polite`,"aria-relevant":`additions text`,"aria-atomic":`false`},[(T(!0),y(g,null,E(O(s),e=>(T(),y(`ol`,S({key:e},{ref_for:!0},O(x),{ref_for:!0,ref:t=>z(e,t),class:O(P).toaster,tabindex:`-1`,dir:O(F),"data-slot":`toaster`,"data-y-position":e.split(`-`)[0],"data-x-position":e.split(`-`)[1],style:{"--z-index":O(K)[e],"--front-toast-height":`${O(W)[e][0]?.height??0}px`,...re.value},onBlur:t=>ce(e,t),onFocus:t=>le(e,t),onMouseenter:t=>$(e),onMousemove:t=>$(e),onMouseleave:t=>ue(e),onDragend:t=>ie(e),onPointerdown:t=>de(e,t),onPointerup:t=>fe(e)}),[(T(!0),y(g,null,E(O(V)[e],(t,n)=>(T(),v(h,{key:t.id,index:n,toast:t,position:e,"onUpdate:height":oe,onRemove:Q},null,8,[`index`,`toast`,`position`]))),128))],16,N))),128))],8,M),ne(e.$slots,`default`)],64))}});export{P as default};

package/dist/components/toast/toaster.vue.d.ts

@@ -8,12 +8,12 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: _$vue.DefineComponent<ToasterProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
   offset: ToastOffset;
-  gap: number;
+  position: ToastPosition;
   duration: number;
-  visibleCounts: number;
+  gap: number;
   hotkey: string[];
   containerAriaLabel: string;
-  position: ToastPosition;
+  visibleCounts: number;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;