@soybeanjs/headless 0.15.5 → 0.17.0

package/dist/components/color-area/types.d.ts

@@ -5,27 +5,87 @@ import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } fr
 import { CSSProperties, ComputedRef, HTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/color-area/types.d.ts
+/**
+ * Type information for the color area axis channel component.
+ */
 type ColorAreaAxisChannel = Extract<ColorChannel, 'hue' | 'saturation' | 'lightness' | 'brightness' | 'chroma'>;
+/**
+ * Props for the color area root component.
+ */
 interface ColorAreaRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+  /**
+   * Current model value.
+   */
   modelValue?: string | ColorValue;
+  /**
+   * Default value.
+   */
   defaultValue?: string | ColorValue;
+  /**
+   * Color space.
+   */
   colorSpace?: ColorSpace;
+  /**
+   * Format.
+   */
   format?: ColorFormat;
+  /**
+   * X channel.
+   */
   xChannel?: ColorAreaAxisChannel;
+  /**
+   * Y channel.
+   */
   yChannel?: ColorAreaAxisChannel;
+  /**
+   * Whether the component is disabled.
+   */
   disabled?: boolean;
+  /**
+   * X name.
+   */
   xName?: string;
+  /**
+   * Y name.
+   */
   yName?: string;
 }
+/**
+ * Emits for the color area root component.
+ */
 type ColorAreaRootEmits = {
+  /**
+   * Emitted when the model value changes.
+   */
   'update:modelValue': [value: string];
+  /**
+   * Emitted when the color value changes.
+   */
   'update:color': [value: NormalizedColor];
+  /**
+   * Emitted when change occurs.
+   */
   change: [value: string];
+  /**
+   * Emitted when change end occurs.
+   */
   changeEnd: [value: string];
 };
+/**
+ * Props for the color area area component.
+ */
 interface ColorAreaAreaProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+/**
+ * Props for the color area thumb component.
+ */
 interface ColorAreaThumbProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+/**
+ * Available UI slots for the color area component.
+ */
 type ColorAreaUiSlot = 'root' | 'area' | 'thumb';
+/**
+ * UI class overrides for the color area component.
+ */
 type ColorAreaUi = UiClass<ColorAreaUiSlot>;
 //#endregion
 export { ColorAreaAreaProps, ColorAreaAxisChannel, ColorAreaRootEmits, ColorAreaRootProps, ColorAreaThumbProps, ColorAreaUi, ColorAreaUiSlot };

package/dist/components/color-field/color-field-root.vue.d.ts

@@ -17,12 +17,12 @@ declare const __VLS_base: _$vue.DefineComponent<ColorFieldRootProps, {}, {}, {},
 }>, {
   disabled: boolean;
   format: ColorFormat;
+  as: AsTag | _$vue.Component;
   step: number;
-  defaultValue: string | ColorValue;
   modelValue: string | ColorValue;
-  as: AsTag | _$vue.Component;
-  readonly: boolean;
+  defaultValue: string | ColorValue;
   colorSpace: ColorSpace;
+  readonly: boolean;
   disableWheelChange: boolean;
 }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/color-field/types.d.ts

@@ -5,24 +5,75 @@ import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } fr
 import { HTMLAttributes, InputHTMLAttributes, ShallowRef } from "vue";
 
 //#region src/components/color-field/types.d.ts
+/**
+ * Props for the color field root component.
+ */
 interface ColorFieldRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+  /**
+   * Current model value.
+   */
   modelValue?: string | ColorValue;
+  /**
+   * Default value.
+   */
   defaultValue?: string | ColorValue;
+  /**
+   * Color space.
+   */
   colorSpace?: ColorSpace;
+  /**
+   * Channel.
+   */
   channel?: ColorChannel;
+  /**
+   * Format.
+   */
   format?: ColorFormat;
+  /**
+   * Placeholder.
+   */
   placeholder?: string;
+  /**
+   * Whether the component is disabled.
+   */
   disabled?: boolean;
+  /**
+   * Whether the component is readonly.
+   */
   readonly?: boolean;
+  /**
+   * Whether to disable wheel change.
+   */
   disableWheelChange?: boolean;
+  /**
+   * Step.
+   */
   step?: number;
 }
+/**
+ * Emits for the color field root component.
+ */
 type ColorFieldRootEmits = {
+  /**
+   * Emitted when the model value changes.
+   */
   'update:modelValue': [value: string];
+  /**
+   * Emitted when the color value changes.
+   */
   'update:color': [value: NormalizedColor];
 };
+/**
+ * Props for the color field input component.
+ */
 interface ColorFieldInputProps extends /** @vue-ignore */InputHTMLAttributes {}
+/**
+ * Available UI slots for the color field component.
+ */
 type ColorFieldUiSlot = 'root' | 'input';
+/**
+ * UI class overrides for the color field component.
+ */
 type ColorFieldUi = UiClass<ColorFieldUiSlot>;
 //#endregion
 export { ColorFieldInputProps, ColorFieldRootEmits, ColorFieldRootProps, ColorFieldUi, ColorFieldUiSlot };

package/dist/components/color-picker/color-picker-root.vue.d.ts

@@ -15,19 +15,19 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ColorPickerRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  "update:modelValue": (value: string) => any;
   change: (value: string) => any;
+  "update:modelValue": (value: string) => any;
   "update:color": (value: NormalizedColor) => any;
 }, string, _$vue.PublicProps, Readonly<ColorPickerRootProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   "onUpdate:color"?: ((value: NormalizedColor) => any) | undefined;
 }>, {
   disabled: boolean;
   format: ColorFormat;
-  defaultValue: string | ColorValue;
-  modelValue: string | ColorValue;
   as: AsTag | _$vue.Component;
+  modelValue: string | ColorValue;
+  defaultValue: string | ColorValue;
 }, {}, {}, {}, 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/color-picker/types.d.ts

@@ -4,20 +4,59 @@ import { ColorFormat, ColorValue, NormalizedColor } from "../../shared/color.js"
 import { ComputedRef, HTMLAttributes } from "vue";
 
 //#region src/components/color-picker/types.d.ts
+/**
+ * Props for the color picker root component.
+ */
 interface ColorPickerRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+  /**
+   * Current model value.
+   */
   modelValue?: string | ColorValue;
+  /**
+   * Default value.
+   */
   defaultValue?: string | ColorValue;
+  /**
+   * Format.
+   */
   format?: ColorFormat;
+  /**
+   * Whether the component is disabled.
+   */
   disabled?: boolean;
 }
+/**
+ * Emits for the color picker root component.
+ */
 type ColorPickerRootEmits = {
+  /**
+   * Emitted when the model value changes.
+   */
   'update:modelValue': [value: string];
+  /**
+   * Emitted when the color value changes.
+   */
   'update:color': [value: NormalizedColor];
+  /**
+   * Emitted when change occurs.
+   */
   change: [value: string];
 };
+/**
+ * Slot props for the color picker root component.
+ */
 interface ColorPickerRootSlotProps {
+  /**
+   * Theme color of the component.
+   */
   color: ComputedRef<ColorValue>;
+  /**
+   * Formatted value exposed in the slot scope.
+   */
   formattedValue: ComputedRef<string>;
+  /**
+   * Set color exposed in the slot scope.
+   */
   setColor: (color: ColorValue) => void;
 }
 //#endregion

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

@@ -9,13 +9,13 @@ type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: _$vue.DefineComponent<ColorSliderRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
-  "update:modelValue": (value: string) => any;
   change: (value: string) => any;
+  "update:modelValue": (value: string) => any;
   "update:color": (value: NormalizedColor) => any;
   changeEnd: (value: string) => any;
 }, string, _$vue.PublicProps, Readonly<ColorSliderRootProps> & Readonly<{
-  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   onChange?: ((value: string) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string) => any) | undefined;
   "onUpdate:color"?: ((value: NormalizedColor) => any) | undefined;
   onChangeEnd?: ((value: string) => any) | undefined;
 }>, {
@@ -23,10 +23,10 @@ declare const __VLS_base: _$vue.DefineComponent<ColorSliderRootProps, {}, {}, {}
   format: ColorFormat;
   orientation: DataOrientation;
   step: number;
-  defaultValue: string | ColorValue;
   modelValue: string | ColorValue;
-  inverted: boolean;
+  defaultValue: string | ColorValue;
   colorSpace: ColorSpace;
+  inverted: boolean;
 }, {}, {}, {}, 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/color-slider/types.d.ts

@@ -5,27 +5,87 @@ import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } fr
 import { ComputedRef, HTMLAttributes } from "vue";
 
 //#region src/components/color-slider/types.d.ts
+/**
+ * Props for the color slider root component.
+ */
 interface ColorSliderRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+  /**
+   * Current model value.
+   */
   modelValue?: string | ColorValue;
+  /**
+   * Default value.
+   */
   defaultValue?: string | ColorValue;
+  /**
+   * Color space.
+   */
   colorSpace?: ColorSpace;
+  /**
+   * Channel.
+   */
   channel: ColorChannel;
+  /**
+   * Format.
+   */
   format?: ColorFormat;
+  /**
+   * Orientation of the component.
+   */
   orientation?: DataOrientation;
+  /**
+   * Reading direction of the component.
+   */
   dir?: Direction;
+  /**
+   * Whether inverted.
+   */
   inverted?: boolean;
+  /**
+   * Whether the component is disabled.
+   */
   disabled?: boolean;
+  /**
+   * Step.
+   */
   step?: number;
 }
+/**
+ * Emits for the color slider root component.
+ */
 type ColorSliderRootEmits = {
+  /**
+   * Emitted when the model value changes.
+   */
   'update:modelValue': [value: string];
+  /**
+   * Emitted when the color value changes.
+   */
   'update:color': [value: NormalizedColor];
+  /**
+   * Emitted when change occurs.
+   */
   change: [value: string];
+  /**
+   * Emitted when change end occurs.
+   */
   changeEnd: [value: string];
 };
+/**
+ * Props for the color slider track component.
+ */
 interface ColorSliderTrackProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+/**
+ * Props for the color slider thumb component.
+ */
 interface ColorSliderThumbProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+/**
+ * Available UI slots for the color slider component.
+ */
 type ColorSliderUiSlot = 'root' | 'track' | 'thumb';
+/**
+ * UI class overrides for the color slider component.
+ */
 type ColorSliderUi = UiClass<ColorSliderUiSlot>;
 //#endregion
 export { ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi, ColorSliderUiSlot };

package/dist/components/color-swatch/types.d.ts

@@ -3,8 +3,17 @@ import { ColorValue } from "../../shared/color.js";
 import { HTMLAttributes } from "vue";
 
 //#region src/components/color-swatch/types.d.ts
+/**
+ * Props for the color swatch component.
+ */
 interface ColorSwatchProps extends PrimitiveProps, /** @vue-ignore */Omit<HTMLAttributes, 'color'> {
+  /**
+   * Theme color of the component.
+   */
   color?: string | ColorValue;
+  /**
+   * Label text rendered by the component.
+   */
   label?: string;
 }
 //#endregion

package/dist/components/color-swatch-picker/color-swatch-picker-root.vue.d.ts

@@ -7,8 +7,8 @@ import * as _$vue from "vue";
 declare const __VLS_export: <M extends boolean>(__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<ColorSwatchPickerRootProps<M> & {
     "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
-    onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
     onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
+    onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
     onLeave?: ((event: Event) => any) | undefined;
   }> & (typeof globalThis extends {
     __VLS_PROPS_FALLBACK: infer P;
@@ -20,7 +20,7 @@ declare const __VLS_export: <M extends boolean>(__VLS_props: NonNullable<Awaited
       modelValue: ((M extends true ? string[] : string) | undefined) & (M extends true ? string[] | undefined : string | undefined);
     }) => any;
   };
-  emit: ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "leave", event: Event) => void);
+  emit: ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "leave", event: Event) => void);
 }>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/color-swatch-picker/types.d.ts

@@ -4,15 +4,42 @@ import { ListboxItemEmits, ListboxItemIndicatorProps, ListboxItemProps, ListboxR
 import { ComputedRef, HTMLAttributes } from "vue";
 
 //#region src/components/color-swatch-picker/types.d.ts
+/**
+ * Props for the color swatch picker root component.
+ */
 interface ColorSwatchPickerRootProps<M extends boolean = false> extends PrimitiveProps, ListboxRootProps<M> {}
+/**
+ * Emits for the color swatch picker root component.
+ */
 type ColorSwatchPickerRootEmits<M extends boolean = false> = ListboxRootEmits<M>;
+/**
+ * Props for the color swatch picker item component.
+ */
 interface ColorSwatchPickerItemProps extends ListboxItemProps {}
+/**
+ * Emits for the color swatch picker item component.
+ */
 type ColorSwatchPickerItemEmits = ListboxItemEmits;
+/**
+ * Props for the color swatch picker item indicator component.
+ */
 interface ColorSwatchPickerItemIndicatorProps extends ListboxItemIndicatorProps {}
+/**
+ * Props for the color swatch picker item swatch component.
+ */
 interface ColorSwatchPickerItemSwatchProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {
+  /**
+   * Label text rendered by the component.
+   */
   label?: string;
 }
+/**
+ * Available UI slots for the color swatch picker component.
+ */
 type ColorSwatchPickerUiSlot = 'root' | 'item' | 'itemIndicator' | 'swatch';
+/**
+ * UI class overrides for the color swatch picker component.
+ */
 type ColorSwatchPickerUi = UiClass<ColorSwatchPickerUiSlot>;
 //#endregion
 export { ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot };

package/dist/components/combobox/combobox-arrow.js

@@ -1 +1 @@
-import e from"../popper/popper-arrow.js";import"../popper/index.js";import{useComboboxContentContext as t,useComboboxRootContext as n,useComboboxUi as r}from"./context.js";import{computed as i,createBlock as a,createCommentVNode as o,defineComponent as s,normalizeClass as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`ComboboxArrow`,__name:`combobox-arrow`,setup(s){let p=r(`arrow`),{open:m}=n(`ComboboxArrow`),{position:h}=t(`ComboboxArrow`),g=i(()=>m.value&&h.value===`popper`);return(t,n)=>g.value?(l(),a(d(e),{key:0,class:c(d(p)),"data-slot":`arrow`},{default:f(()=>[u(t.$slots,`default`)]),_:3},8,[`class`])):o(`v-if`,!0)}});export{p as default};
+import{useComboboxContentContext as e,useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import r from"../popper/popper-arrow.js";import"../popper/index.js";import{computed as i,createBlock as a,createCommentVNode as o,defineComponent as s,normalizeClass as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`ComboboxArrow`,__name:`combobox-arrow`,setup(s){let p=n(`arrow`),{open:m}=t(`ComboboxArrow`),{position:h}=e(`ComboboxArrow`),g=i(()=>m.value&&h.value===`popper`);return(e,t)=>g.value?(l(),a(d(r),{key:0,class:c(d(p)),"data-slot":`arrow`},{default:f(()=>[u(e.$slots,`default`)]),_:3},8,[`class`])):o(`v-if`,!0)}});export{p as default};

package/dist/components/combobox/combobox-arrow.vue.d.ts

@@ -1,4 +1,4 @@
-import { ComboboxArrowProps } from "./types.js";
+import { PopperArrowProps } from "../popper/types.js";
 import * as _$vue from "vue";
 
 //#region src/components/combobox/combobox-arrow.vue.d.ts
@@ -6,7 +6,7 @@ declare var __VLS_8: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: _$vue.DefineComponent<ComboboxArrowProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ComboboxArrowProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: _$vue.DefineComponent<PopperArrowProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<PopperArrowProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -1 +1 @@
-import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"../_icon/icon.js";import n from"../portal/portal.js";import r from"./combobox-root.js";import i from"./combobox-anchor.js";import a from"./combobox-cancel.js";import o from"./combobox-content.js";import s from"./combobox-empty.js";import c from"./combobox-group.js";import l from"./combobox-group-label.js";import u from"./combobox-input.js";import d from"./combobox-item.js";import f from"./combobox-item-indicator.js";import p from"./combobox-separator.js";import m from"./combobox-trigger.js";import h from"./combobox-viewport.js";import{getDisplayValue as g,getSelectedLabels as _,isGroupOption as v}from"./shared.js";import{Fragment as y,computed as b,createBlock as x,createCommentVNode as S,createElementBlock as C,createTextVNode as w,createVNode as T,defineComponent as E,guardReactiveProps as D,mergeProps as O,normalizeClass as k,normalizeProps as A,openBlock as j,renderList as M,renderSlot as N,toDisplayString as P,unref as F,withCtx as I}from"vue";const L=E({name:`ComboboxCompact`,__name:`combobox-compact`,props:{items:{},placeholder:{},searchPlaceholder:{},clearLabel:{default:`Clear input`},emptyLabel:{default:`No results found.`},anchorProps:{},triggerProps:{},cancelProps:{},portalProps:{},contentProps:{},viewportProps:{},inputProps:{},emptyProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemIndicatorProps:{},separatorProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},resetSearchTermOnBlur:{type:Boolean},resetSearchTermOnSelect:{type:Boolean},openOnFocus:{type:Boolean},openOnClick:{type:Boolean},ignoreFilter:{type:Boolean},resetModelValueOnClear:{type:Boolean},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean,default:!0},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`,`select`],setup(E,{emit:L}){let R=E,z=L,B=e(R,[`items`,`placeholder`,`searchPlaceholder`,`clearLabel`,`emptyLabel`,`anchorProps`,`triggerProps`,`cancelProps`,`portalProps`,`contentProps`,`viewportProps`,`inputProps`,`emptyProps`,`groupProps`,`groupLabelProps`,`itemProps`,`itemIndicatorProps`,`separatorProps`]),V=e=>R.multiple?``:g(e,R.items),H=b(()=>R.inputProps?.controlProps?.[`aria-label`]??R.searchPlaceholder??R.placeholder??`Search`),U=b(()=>({...R.inputProps,displayValue:R.inputProps?.displayValue??V,controlProps:{...R.inputProps?.controlProps,"aria-label":H.value},placeholder:R.searchPlaceholder??R.inputProps?.placeholder,autofocus:R.inputProps?.autofocus??!0})),W=b(()=>({...R.viewportProps,"aria-label":R.viewportProps?.[`aria-label`]??R.placeholder??`Options`})),G=b(()=>({...R.anchorProps,asChild:R.anchorProps?.asChild??!0})),K=(e,t)=>v(e)?`group-${e.label}-${t}`:e.value,q=e=>_(e,R.items),J=e=>{let t=q(e);return t.length?t.join(`, `):R.placeholder},Y=e=>({...R.triggerProps,"aria-label":R.triggerProps?.[`aria-label`]??J(e),"data-placeholder":q(e).length?void 0:``});return(e,g)=>(j(),x(r,O(F(B),{onHighlight:g[7]||(g[7]=e=>z(`highlight`,e)),"onUpdate:modelValue":g[8]||(g[8]=e=>z(`update:modelValue`,e)),"onUpdate:open":g[9]||(g[9]=e=>z(`update:open`,e))}),{default:I(({modelValue:r})=>[T(i,A(D(G.value)),{default:I(()=>[T(m,A(D(Y(r))),{default:I(({triggerIconClass:n})=>[N(e.$slots,`trigger-leading`),N(e.$slots,`trigger-value`,{modelValue:r,selectedLabels:q(r),slotText:J(r)},()=>[w(P(J(r)),1)]),N(e.$slots,`trigger-trailing`),N(e.$slots,`trigger-icon`,{},()=>[T(t,{icon:`lucide:chevrons-up-down`,class:k(n)},null,8,[`class`])])]),_:2},1040)]),_:2},1040),T(n,A(D(E.portalProps)),{default:I(()=>[T(o,O(E.contentProps,{onCloseAutoFocus:g[2]||(g[2]=e=>z(`closeAutoFocus`,e)),onEscapeKeyDown:g[3]||(g[3]=e=>z(`escapeKeyDown`,e)),onPointerDownOutside:g[4]||(g[4]=e=>z(`pointerDownOutside`,e)),onFocusOutside:g[5]||(g[5]=e=>z(`focusOutside`,e)),onInteractOutside:g[6]||(g[6]=e=>z(`interactOutside`,e))}),{default:I(()=>[T(u,A(D(U.value)),{leading:I(n=>[N(e.$slots,`input-leading`,A(D(n)),()=>[T(t,{icon:`lucide:search`})])]),trailing:I(n=>[E.clearable?(j(),x(a,O({key:0},E.cancelProps,{"aria-label":E.clearLabel}),{default:I(()=>[T(t,{icon:`lucide:x`})]),_:1},16,[`aria-label`])):S(`v-if`,!0),N(e.$slots,`input-trailing`,A(D(n)))]),_:3},16),T(s,A(D(E.emptyProps)),{default:I(()=>[N(e.$slots,`empty`,{},()=>[w(P(E.emptyLabel),1)])]),_:3},16),T(h,A(D(W.value)),{default:I(()=>[(j(!0),C(y,null,M(E.items,(n,r)=>(j(),C(y,{key:K(n,r)},[F(v)(n)?(j(),C(y,{key:0},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(c,O({ref_for:!0},E.groupProps),{default:I(()=>[T(l,O({ref_for:!0},E.groupLabelProps),{default:I(()=>[N(e.$slots,`group-label`,{item:n},()=>[w(P(n.label),1)])]),_:2},1040),(j(!0),C(y,null,M(n.items,n=>(j(),C(y,{key:n.value},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(d,O({ref_for:!0},E.itemProps,{value:n.value,"text-value":n.textValue??n.label,disabled:n.disabled,onSelect:g[0]||(g[0]=e=>z(`select`,e))}),{default:I(()=>[N(e.$slots,`item-leading`,{item:n},()=>[n.icon?(j(),x(t,{key:0,icon:n.icon},null,8,[`icon`])):S(`v-if`,!0)]),N(e.$slots,`item-text`,{item:n},()=>[w(P(n.label),1)]),N(e.$slots,`item-trailing`,{item:n}),T(f,O({ref_for:!0},E.itemIndicatorProps),{default:I(()=>[N(e.$slots,`item-indicator`,{item:n},()=>[T(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))),128))]),_:2},1040)],64)):(j(),C(y,{key:1},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(d,O({ref_for:!0},E.itemProps,{value:n.value,"text-value":n.textValue??n.label,disabled:n.disabled,onSelect:g[1]||(g[1]=e=>z(`select`,e))}),{default:I(()=>[N(e.$slots,`item-leading`,{item:n},()=>[n.icon?(j(),x(t,{key:0,icon:n.icon},null,8,[`icon`])):S(`v-if`,!0)]),N(e.$slots,`item-text`,{item:n},()=>[w(P(n.label),1)]),N(e.$slots,`item-trailing`,{item:n}),T(f,O({ref_for:!0},E.itemIndicatorProps),{default:I(()=>[N(e.$slots,`item-indicator`,{item:n},()=>[T(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))],64))),128))]),_:3},16)]),_:3},16)]),_:3},16)]),_:3},16))}});export{L as default};
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"../_icon/icon.js";import n from"../popper/popper-anchor.js";import r from"../portal/portal.js";import i from"../listbox/listbox-group-label.js";import a from"../listbox/listbox-item-indicator.js";import o from"./combobox-cancel.js";import s from"./combobox-content.js";import c from"./combobox-empty.js";import l from"./combobox-group.js";import u from"./combobox-input.js";import d from"./combobox-item.js";import f from"./combobox-root.js";import p from"./combobox-separator.js";import m from"./combobox-trigger.js";import h from"./combobox-viewport.js";import{getDisplayValue as g,getSelectedLabels as _,isGroupOption as v}from"./shared.js";import{Fragment as y,computed as b,createBlock as x,createCommentVNode as S,createElementBlock as C,createTextVNode as w,createVNode as T,defineComponent as E,guardReactiveProps as D,mergeProps as O,normalizeClass as k,normalizeProps as A,openBlock as j,renderList as M,renderSlot as N,toDisplayString as P,unref as F,withCtx as I}from"vue";const L=E({name:`ComboboxCompact`,__name:`combobox-compact`,props:{items:{},placeholder:{},searchPlaceholder:{},clearLabel:{default:`Clear input`},emptyLabel:{default:`No results found.`},anchorProps:{},triggerProps:{},cancelProps:{},portalProps:{},contentProps:{},viewportProps:{},inputProps:{},emptyProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemIndicatorProps:{},separatorProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},resetSearchTermOnBlur:{type:Boolean},resetSearchTermOnSelect:{type:Boolean},openOnFocus:{type:Boolean},openOnClick:{type:Boolean},ignoreFilter:{type:Boolean},resetModelValueOnClear:{type:Boolean},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean,default:!0},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`,`select`],setup(E,{emit:L}){let R=E,z=L,B=e(R,[`items`,`placeholder`,`searchPlaceholder`,`clearLabel`,`emptyLabel`,`anchorProps`,`triggerProps`,`cancelProps`,`portalProps`,`contentProps`,`viewportProps`,`inputProps`,`emptyProps`,`groupProps`,`groupLabelProps`,`itemProps`,`itemIndicatorProps`,`separatorProps`]),V=e=>R.multiple?``:g(e,R.items),H=b(()=>R.inputProps?.controlProps?.[`aria-label`]??R.searchPlaceholder??R.placeholder??`Search`),U=b(()=>({...R.inputProps,displayValue:R.inputProps?.displayValue??V,controlProps:{...R.inputProps?.controlProps,"aria-label":H.value},placeholder:R.searchPlaceholder??R.inputProps?.placeholder,autofocus:R.inputProps?.autofocus??!0})),W=b(()=>({...R.viewportProps,"aria-label":R.viewportProps?.[`aria-label`]??R.placeholder??`Options`})),G=b(()=>({...R.anchorProps,asChild:R.anchorProps?.asChild??!0})),K=(e,t)=>v(e)?`group-${e.label}-${t}`:e.value,q=e=>_(e,R.items),J=e=>{let t=q(e);return t.length?t.join(`, `):R.placeholder},Y=e=>({...R.triggerProps,"aria-label":R.triggerProps?.[`aria-label`]??J(e),"data-placeholder":q(e).length?void 0:``});return(e,g)=>(j(),x(f,O(F(B),{onHighlight:g[7]||(g[7]=e=>z(`highlight`,e)),"onUpdate:modelValue":g[8]||(g[8]=e=>z(`update:modelValue`,e)),"onUpdate:open":g[9]||(g[9]=e=>z(`update:open`,e))}),{default:I(({modelValue:f})=>[T(n,A(D(G.value)),{default:I(()=>[T(m,A(D(Y(f))),{default:I(({triggerIconClass:n})=>[N(e.$slots,`trigger-leading`),N(e.$slots,`trigger-value`,{modelValue:f,selectedLabels:q(f),slotText:J(f)},()=>[w(P(J(f)),1)]),N(e.$slots,`trigger-trailing`),N(e.$slots,`trigger-icon`,{},()=>[T(t,{icon:`lucide:chevrons-up-down`,class:k(n)},null,8,[`class`])])]),_:2},1040)]),_:2},1040),T(r,A(D(E.portalProps)),{default:I(()=>[T(s,O(E.contentProps,{onCloseAutoFocus:g[2]||(g[2]=e=>z(`closeAutoFocus`,e)),onEscapeKeyDown:g[3]||(g[3]=e=>z(`escapeKeyDown`,e)),onPointerDownOutside:g[4]||(g[4]=e=>z(`pointerDownOutside`,e)),onFocusOutside:g[5]||(g[5]=e=>z(`focusOutside`,e)),onInteractOutside:g[6]||(g[6]=e=>z(`interactOutside`,e))}),{default:I(()=>[T(u,A(D(U.value)),{leading:I(n=>[N(e.$slots,`input-leading`,A(D(n)),()=>[T(t,{icon:`lucide:search`})])]),trailing:I(n=>[E.clearable?(j(),x(o,O({key:0},E.cancelProps,{"aria-label":E.clearLabel}),{default:I(()=>[T(t,{icon:`lucide:x`})]),_:1},16,[`aria-label`])):S(`v-if`,!0),N(e.$slots,`input-trailing`,A(D(n)))]),_:3},16),T(c,A(D(E.emptyProps)),{default:I(()=>[N(e.$slots,`empty`,{},()=>[w(P(E.emptyLabel),1)])]),_:3},16),T(h,A(D(W.value)),{default:I(()=>[(j(!0),C(y,null,M(E.items,(n,r)=>(j(),C(y,{key:K(n,r)},[F(v)(n)?(j(),C(y,{key:0},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(l,O({ref_for:!0},E.groupProps),{default:I(()=>[T(i,O({ref_for:!0},E.groupLabelProps),{default:I(()=>[N(e.$slots,`group-label`,{item:n},()=>[w(P(n.label),1)])]),_:2},1040),(j(!0),C(y,null,M(n.items,n=>(j(),C(y,{key:n.value},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(d,O({ref_for:!0},E.itemProps,{value:n.value,"text-value":n.textValue??n.label,disabled:n.disabled,onSelect:g[0]||(g[0]=e=>z(`select`,e))}),{default:I(()=>[N(e.$slots,`item-leading`,{item:n},()=>[n.icon?(j(),x(t,{key:0,icon:n.icon},null,8,[`icon`])):S(`v-if`,!0)]),N(e.$slots,`item-text`,{item:n},()=>[w(P(n.label),1)]),N(e.$slots,`item-trailing`,{item:n}),T(a,O({ref_for:!0},E.itemIndicatorProps),{default:I(()=>[N(e.$slots,`item-indicator`,{item:n},()=>[T(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))),128))]),_:2},1040)],64)):(j(),C(y,{key:1},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(d,O({ref_for:!0},E.itemProps,{value:n.value,"text-value":n.textValue??n.label,disabled:n.disabled,onSelect:g[1]||(g[1]=e=>z(`select`,e))}),{default:I(()=>[N(e.$slots,`item-leading`,{item:n},()=>[n.icon?(j(),x(t,{key:0,icon:n.icon},null,8,[`icon`])):S(`v-if`,!0)]),N(e.$slots,`item-text`,{item:n},()=>[w(P(n.label),1)]),N(e.$slots,`item-trailing`,{item:n}),T(a,O({ref_for:!0},E.itemIndicatorProps),{default:I(()=>[N(e.$slots,`item-indicator`,{item:n},()=>[T(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))],64))),128))]),_:3},16)]),_:3},16)]),_:3},16)]),_:3},16))}});export{L as default};

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

@@ -9,11 +9,11 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
   props: _$vue.PublicProps & __VLS_PrettifyLocal<ComboboxCompactProps<M> & {
     onSelect?: ((event: SelectEvent<string>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
+    onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
     onFocusOutside?: ((event: FocusOutsideEvent) => any) | undefined;
-    onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
     onInteractOutside?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
@@ -24,7 +24,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
   expose: (exposed: {}) => void;
   attrs: any;
   slots: ComboboxCompactSlots<M>;
-  emit: ((evt: "select", event: SelectEvent<string>) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: FocusOutsideEvent) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "interactOutside", event: PointerDownOutsideEvent | FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "placed") => void);
+  emit: ((evt: "select", event: SelectEvent<string>) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: FocusOutsideEvent) => void) & ((evt: "interactOutside", event: PointerDownOutsideEvent | FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "placed") => void);
 }>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/combobox/combobox-content-impl.js

@@ -1 +1 @@
-import{useBodyScrollLock as e}from"../../composables/use-body-scroll-lock.js";import{useDismissableLayer as t}from"../../composables/use-dismissable-layer.js";import{useExposedElement as n}from"../../composables/use-exposed-element.js";import{useFocusGuards as r}from"../../composables/use-focus-guards.js";import{useFocusScope as i}from"../../composables/use-focus-scope.js";import{useHideOthers as a}from"../../composables/use-hide-others.js";import{useOmitProps as o}from"../../composables/use-props.js";import"../../composables/index.js";import{Primitive as s}from"../primitive/primitive.js";import"../primitive/index.js";import{popperCssVars as c}from"../popper/shared.js";import l from"../popper/popper-positioner.js";import u from"../popper/popper-popup.js";import"../popper/index.js";import{provideComboboxContentContext as d,useComboboxRootContext as f}from"./context.js";import{computed as p,createBlock as m,createVNode as h,defineComponent as g,mergeProps as _,onMounted as v,onUnmounted as y,onWatcherCleanup as b,openBlock as x,ref as S,renderSlot as C,unref as w,useAttrs as T,watchEffect as E,withCtx as D}from"vue";const O=g({name:`ComboboxContentImpl`,inheritAttrs:!1,__name:`combobox-content-impl`,props:{position:{default:`popper`},bodyLock:{type:Boolean},hideWhenEmpty:{type:Boolean},popupProps:{},placement:{},side:{},sideOffset:{},sideFlip:{type:Boolean},align:{},alignOffset:{},alignFlip:{type:Boolean},avoidCollisions:{type:Boolean},collisionBoundary:{},collisionPadding:{},arrowPadding:{},hideShiftedArrow:{type:Boolean},sticky:{},hideWhenDetached:{type:Boolean},positionStrategy:{},updatePositionStrategy:{},disableUpdateOnLayoutShift:{type:Boolean},prioritizePosition:{type:Boolean},reference:{},trapFocus:{type:Boolean},disableOutsidePointerEvents:{type:Boolean},forceMount:{type:Boolean}},emits:[`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`],setup(g,{emit:O}){let k=g,A=O,j=T(),{contentId:M,open:N,ignoreFilter:P,allItems:F,filterState:I,inputElement:L,triggerElement:R,onOpenChange:z,onPopupElementChange:B}=f(`ComboboxContentImpl`),[V,H]=n(B),{pointerEvents:U}=t(V,{disableOutsidePointerEvents:()=>k.disableOutsidePointerEvents,onEscapeKeyDown:e=>{A(`escapeKeyDown`,e)},onPointerDownOutside:e=>{A(`pointerDownOutside`,e)},onFocusOutside:e=>{A(`focusOutside`,e)},onInteractOutside:e=>{A(`interactOutside`,e)},onDismiss:()=>{z(!1)}}),{onKeydown:W}=i(V,{trapped:()=>k.trapFocus,loop:!0,onOpenAutoFocus:e=>{A(`openAutoFocus`,e)},onCloseAutoFocus:e=>{A(`closeAutoFocus`,e)}}),G=p(()=>k.position),K=o(k,[`bodyLock`,`disableOutsidePointerEvents`,`forceMount`,`hideWhenEmpty`,`popupProps`,`position`,`trapFocus`]),q=p(()=>({...j,...k.popupProps})),J=p(()=>P.value?F.value.size===0:I.value.count===0),Y=p(()=>({pointerEvents:U.value,display:k.hideWhenEmpty&&J.value?`none`:`flex`,flexDirection:`column`,outline:`none`,...G.value===`popper`?{"--soybean-combobox-content-transform-origin":`var(${c.transformOrigin})`,"--soybean-combobox-content-available-width":`var(${c.availableWidth})`,"--soybean-combobox-content-available-height":`var(${c.availableHeight})`,"--soybean-combobox-trigger-width":`var(${c.anchorWidth})`,"--soybean-combobox-trigger-height":`var(${c.anchorHeight})`,boxSizing:`border-box`}:{}}));d({position:G}),r(),a(V),E(()=>{k.bodyLock&&b(e())});let X=S(!1);return v(()=>{L.value&&V.value&&(X.value=V.value.contains(L.value),X.value&&L.value.focus())}),y(()=>{let e=document.activeElement;X.value&&(!e||e===document.body)&&R.value?.focus()}),(e,t)=>G.value===`popper`?(x(),m(w(l),_({key:0},w(K),{onPlaced:t[0]||(t[0]=e=>A(`placed`))}),{default:D(()=>[h(w(u),_({id:w(M),ref:w(H)},q.value,{"data-slot":`popup`,"data-dismissable-layer":``,"data-state":w(N)?`open`:`closed`,"data-empty":J.value?``:void 0,style:Y.value,onKeydown:w(W)}),{default:D(()=>[C(e.$slots,`default`)]),_:3},16,[`id`,`data-state`,`data-empty`,`style`,`onKeydown`])]),_:3},16)):(x(),m(w(s),_({key:1,id:w(M),ref:w(H)},q.value,{as:`div`,"data-slot":`popup`,"data-dismissable-layer":``,"data-state":w(N)?`open`:`closed`,"data-empty":J.value?``:void 0,style:Y.value,onKeydown:w(W)}),{default:D(()=>[C(e.$slots,`default`)]),_:3},16,[`id`,`data-state`,`data-empty`,`style`,`onKeydown`]))}});export{O as default};
+import{useBodyScrollLock as e}from"../../composables/use-body-scroll-lock.js";import{useDismissableLayer as t}from"../../composables/use-dismissable-layer.js";import{useExposedElement as n}from"../../composables/use-exposed-element.js";import{useFocusGuards as r}from"../../composables/use-focus-guards.js";import{useFocusScope as i}from"../../composables/use-focus-scope.js";import{useHideOthers as a}from"../../composables/use-hide-others.js";import{useOmitProps as o}from"../../composables/use-props.js";import"../../composables/index.js";import{Primitive as s}from"../primitive/primitive.js";import"../primitive/index.js";import{provideComboboxContentContext as c,useComboboxRootContext as l}from"./context.js";import{popperCssVars as u}from"../popper/shared.js";import d from"../popper/popper-positioner.js";import f from"../popper/popper-popup.js";import"../popper/index.js";import{computed as p,createBlock as m,createVNode as h,defineComponent as g,mergeProps as _,onMounted as v,onUnmounted as y,onWatcherCleanup as b,openBlock as x,ref as S,renderSlot as C,unref as w,useAttrs as T,watchEffect as E,withCtx as D}from"vue";const O=g({name:`ComboboxContentImpl`,inheritAttrs:!1,__name:`combobox-content-impl`,props:{position:{default:`popper`},bodyLock:{type:Boolean},hideWhenEmpty:{type:Boolean},popupProps:{},placement:{},side:{},sideOffset:{},sideFlip:{type:Boolean},align:{},alignOffset:{},alignFlip:{type:Boolean},avoidCollisions:{type:Boolean},collisionBoundary:{},collisionPadding:{},arrowPadding:{},hideShiftedArrow:{type:Boolean},sticky:{},hideWhenDetached:{type:Boolean},positionStrategy:{},updatePositionStrategy:{},disableUpdateOnLayoutShift:{type:Boolean},prioritizePosition:{type:Boolean},reference:{},trapFocus:{type:Boolean},disableOutsidePointerEvents:{type:Boolean},forceMount:{type:Boolean}},emits:[`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`],setup(g,{emit:O}){let k=g,A=O,j=T(),{contentId:M,open:N,ignoreFilter:P,allItems:F,filterState:I,parentElement:L,inputElement:R,triggerElement:z,onOpenChange:B,onPopupElementChange:V}=l(`ComboboxContentImpl`),[H,U]=n(V),{pointerEvents:W}=t(H,{disableOutsidePointerEvents:()=>k.disableOutsidePointerEvents,onEscapeKeyDown:e=>{A(`escapeKeyDown`,e)},onPointerDownOutside:e=>{L.value?.contains(e.target)&&e.preventDefault(),A(`pointerDownOutside`,e)},onFocusOutside:e=>{L.value?.contains(e.target)&&e.preventDefault(),A(`focusOutside`,e)},onInteractOutside:e=>{A(`interactOutside`,e)},onDismiss:()=>{B(!1)}}),{onKeydown:G}=i(H,{trapped:()=>k.trapFocus,loop:!0,onOpenAutoFocus:e=>{A(`openAutoFocus`,e),e.preventDefault()},onCloseAutoFocus:e=>{A(`closeAutoFocus`,e),e.preventDefault()}}),K=p(()=>k.position),q=o(k,[`bodyLock`,`disableOutsidePointerEvents`,`forceMount`,`hideWhenEmpty`,`popupProps`,`position`,`trapFocus`]),J=p(()=>({...j,...k.popupProps})),Y=p(()=>P.value?F.value.size===0:I.value.count===0),X=p(()=>({pointerEvents:W.value,display:k.hideWhenEmpty&&Y.value?`none`:`flex`,flexDirection:`column`,outline:`none`,...K.value===`popper`?{"--soybean-combobox-content-transform-origin":`var(${u.transformOrigin})`,"--soybean-combobox-content-available-width":`var(${u.availableWidth})`,"--soybean-combobox-content-available-height":`var(${u.availableHeight})`,"--soybean-combobox-trigger-width":`var(${u.anchorWidth})`,"--soybean-combobox-trigger-height":`var(${u.anchorHeight})`,boxSizing:`border-box`}:{}}));c({position:K}),r(),a(()=>[L.value,H.value],N),E(()=>{k.bodyLock&&b(e())});let Z=S(!1);return v(()=>{R.value&&H.value&&(Z.value=H.value.contains(R.value),Z.value&&R.value.focus())}),y(()=>{let e=document.activeElement;Z.value&&(!e||e===document.body)&&z.value?.focus()}),(e,t)=>K.value===`popper`?(x(),m(w(d),_({key:0},w(q),{onPlaced:t[0]||(t[0]=e=>A(`placed`))}),{default:D(()=>[h(w(f),_({id:w(M),ref:w(U)},J.value,{"data-slot":`popup`,"data-dismissable-layer":``,"data-state":w(N)?`open`:`closed`,"data-empty":Y.value?``:void 0,style:X.value,onKeydown:w(G)}),{default:D(()=>[C(e.$slots,`default`)]),_:3},16,[`id`,`data-state`,`data-empty`,`style`,`onKeydown`])]),_:3},16)):(x(),m(w(s),_({key:1,id:w(M),ref:w(U)},J.value,{as:`div`,"data-slot":`popup`,"data-dismissable-layer":``,"data-state":w(N)?`open`:`closed`,"data-empty":Y.value?``:void 0,style:X.value,onKeydown:w(G)}),{default:D(()=>[C(e.$slots,`default`)]),_:3},16,[`id`,`data-state`,`data-empty`,`style`,`onKeydown`]))}});export{O as default};

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

@@ -1,4 +1,4 @@
-import { ComboboxGroupProps } from "./types.js";
+import { ListboxGroupProps } from "../listbox/types.js";
 import * as _$vue from "vue";
 
 //#region src/components/combobox/combobox-group.vue.d.ts
@@ -6,7 +6,7 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
   default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: _$vue.DefineComponent<ComboboxGroupProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ComboboxGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: _$vue.DefineComponent<ListboxGroupProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ListboxGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/combobox/combobox-input.js

@@ -1 +1 @@
-import{useControllableState as e}from"../../composables/use-controllable-state.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{useListboxRootContext as n}from"../listbox/context.js";import r from"../listbox/listbox-filter.js";import"../listbox/index.js";import{useComboboxRootContext as i}from"./context.js";import{computed as a,createBlock as o,defineComponent as s,guardReactiveProps as c,isRef as l,mergeProps as u,nextTick as d,normalizeProps as f,onMounted as p,openBlock as m,renderSlot as h,unref as g,watch as _,withCtx as v}from"vue";const y=s({name:`ComboboxInput`,__name:`combobox-input`,props:{displayValue:{type:Function},inputRef:{type:Function},controlProps:{},defaultValue:{},modelValue:{},id:{},autofocus:{type:Boolean},disabled:{type:Boolean},maxlength:{},minlength:{},pattern:{},placeholder:{},readonly:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(s,{emit:y}){let b=s,x=y,{modelValue:S,open:C,openOnFocus:w,openOnClick:T,isUserInputted:E,isMultiple:D,resetSearchTermOnSelect:O,contentId:k,triggerElement:A,filterSearch:j,filterState:M,isVirtual:N,onInputElementChange:P,onOpenChange:F,onResetSearchTerm:I}=i(`ComboboxInput`),{highlightFirstItem:L}=n(`ComboboxInput`),R=t(b,[`displayValue`]),z=e(()=>b.modelValue,e=>{x(`update:modelValue`,e??``)},b.defaultValue??``),B=e=>{b.inputRef?.(e),P(e)},V=e=>{![`ArrowDown`,`ArrowUp`].includes(e.key)||C.value||F(!0)},H=e=>{let t=e.target;if(E.value=!0,!C.value){F(!0),d(()=>{t.value&&(j.value=t.value,L())});return}j.value=t.value},U=()=>{w.value&&!C.value&&F(!0)},W=e=>{if(!C.value)return;let t=e.relatedTarget;if(!t)return;let n=A.value?.contains(t),r=document.getElementById(k.value)?.contains(t);!n&&!r&&F(!1)},G=()=>{T.value&&!C.value&&F(!0)},K=()=>{let e=S.value;if(b.displayValue){z.value=b.displayValue(e);return}if(!D.value&&typeof e==`string`){z.value=e;return}z.value=``};I(()=>{K()});let q=a(()=>u({...b.controlProps},{"data-slot":`input-control`,role:`combobox`,"aria-autocomplete":`list`,autocomplete:`off`,"aria-controls":k.value||void 0,"aria-expanded":C.value??!1,onBlur:W,onClick:G,onFocus:U,onInput:H,onKeydown:V}));return _(S,()=>{!E.value&&O.value&&K()},{immediate:!0,deep:!0}),_(M,(e,t)=>{!N.value&&t?.count===0&&L()}),p(()=>{K()}),(e,t)=>(m(),o(g(r),u(g(R),{modelValue:g(z),"onUpdate:modelValue":t[0]||(t[0]=e=>l(z)?z.value=e:null),"data-slot":`input-root`,"control-props":q.value,"input-ref":B}),{leading:v(t=>[h(e.$slots,`leading`,f(c(t)))]),trailing:v(t=>[h(e.$slots,`trailing`,f(c(t)))]),_:3},16,[`modelValue`,`control-props`]))}});export{y as default};
+import{useControllableState as e}from"../../composables/use-controllable-state.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{useListboxRootContext as n}from"../listbox/context.js";import{useComboboxRootContext as r}from"./context.js";import i from"../listbox/listbox-filter.js";import"../listbox/index.js";import{computed as a,createBlock as o,defineComponent as s,guardReactiveProps as c,isRef as l,mergeProps as u,nextTick as d,normalizeProps as f,onMounted as p,openBlock as m,renderSlot as h,unref as g,watch as _,withCtx as v}from"vue";const y=s({name:`ComboboxInput`,__name:`combobox-input`,props:{displayValue:{type:Function},inputRef:{type:Function},controlProps:{},defaultValue:{},modelValue:{},id:{},autofocus:{type:Boolean},disabled:{type:Boolean},maxlength:{},minlength:{},pattern:{},placeholder:{},readonly:{type:Boolean},name:{},required:{type:Boolean}},emits:[`update:modelValue`],setup(s,{emit:y}){let b=s,x=y,{modelValue:S,open:C,openOnFocus:w,openOnClick:T,isUserInputted:E,isMultiple:D,resetSearchTermOnSelect:O,parentElement:k,contentId:A,filterSearch:j,filterState:M,isVirtual:N,onInputElementChange:P,onOpenChange:F,onResetSearchTerm:I}=r(`ComboboxInput`),{highlightFirstItem:L}=n(`ComboboxInput`),R=t(b,[`displayValue`]),z=e(()=>b.modelValue,e=>{x(`update:modelValue`,e??``)},b.defaultValue??``),B=e=>{b.inputRef?.(e),P(e)},V=e=>{![`ArrowDown`,`ArrowUp`].includes(e.key)||C.value||F(!0)},H=e=>{let t=e.target;if(E.value=!0,!C.value){F(!0),d(()=>{t.value&&(j.value=t.value,L())});return}j.value=t.value},U=()=>{w.value&&!C.value&&F(!0)},W=e=>{if(!C.value)return;let t=e.relatedTarget;if(!t)return;let n=k.value?.contains(t),r=document.getElementById(A.value)?.contains(t);!n&&!r&&F(!1)},G=()=>{T.value&&!C.value&&F(!0)},K=()=>{let e=S.value;if(b.displayValue){z.value=b.displayValue(e);return}if(!D.value&&typeof e==`string`){z.value=e;return}z.value=``};I(()=>{K()});let q=a(()=>u({...b.controlProps},{"data-slot":`input-control`,role:`combobox`,"aria-autocomplete":`list`,autocomplete:`off`,"aria-controls":A.value||void 0,"aria-expanded":C.value??!1,onBlur:W,onClick:G,onFocus:U,onInput:H,onKeydown:V}));return _(S,()=>{!E.value&&O.value&&K()},{immediate:!0,deep:!0}),_(M,(e,t)=>{!N.value&&t?.count===0&&L()}),p(()=>{K()}),(e,t)=>(m(),o(g(i),u(g(R),{modelValue:g(z),"onUpdate:modelValue":t[0]||(t[0]=e=>l(z)?z.value=e:null),"data-slot":`input-root`,"control-props":q.value,"input-ref":B}),{leading:v(t=>[h(e.$slots,`leading`,f(c(t)))]),trailing:v(t=>[h(e.$slots,`trailing`,f(c(t)))]),_:3},16,[`modelValue`,`control-props`]))}});export{y as default};

package/dist/components/combobox/combobox-item.js

@@ -1 +1 @@
-import{useExposedElement as e}from"../../composables/use-exposed-element.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{useListboxGroupContext as n,useListboxRootContext as r}from"../listbox/context.js";import i from"../listbox/listbox-item.js";import"../listbox/index.js";import{useComboboxRootContext as a}from"./context.js";import{computed as o,createBlock as s,createCommentVNode as c,defineComponent as l,mergeProps as u,onMounted as d,onUnmounted as f,openBlock as p,renderSlot as m,unref as h,useId as g,withCtx as _}from"vue";const v=l({name:`ComboboxItem`,__name:`combobox-item`,props:{value:{},disabled:{type:Boolean},textValue:{},asChild:{type:Boolean},as:{}},emits:[`select`],setup(l,{emit:v}){let y=l,b=v,x=t(y,[`textValue`]),{isMultiple:S}=r(`ComboboxItem`),{disabled:C,isVirtual:w,ignoreFilter:T,filterSearch:E,filterState:D,allItems:O,allGroups:k,inputElement:A,resetSearchTermOnSelect:j,onOpenChange:M}=a(`ComboboxItem`),N=n(),P=`soybean-combobox-item-${g()}`,[F,I]=e();if(y.value===``)throw Error(`A <ComboboxItem /> must have a value prop that is not an empty string.`);let L=o(()=>y.textValue??F.value?.textContent?.trim()??y.value),R=o(()=>C.value??y.disabled),z=o(()=>{if(w.value||T.value||!E.value)return!0;let e=D.value.items.get(P);return e===void 0?!0:e>0}),B=()=>{let e=N?.id;if(!e)return;let t=k.value.get(e);if(!t)return;let n=new Set(t);n.delete(P);let r=new Map(k.value);n.size?r.set(e,n):r.delete(e),k.value=r},V=e=>{if(b(`select`,e),!e.defaultPrevented){if(j.value&&(E.value=``),S.value){A.value?.focus();return}M(!1)}};return d(()=>{let e=new Map(O.value);e.set(P,L.value),O.value=e;let t=N?.id;if(t){let e=k.value.get(t)??new Set,n=new Set(e),r=new Map(k.value);n.add(P),r.set(t,n),k.value=r}}),f(()=>{let e=new Map(O.value);e.delete(P),O.value=e,B()}),(e,t)=>z.value?(p(),s(h(i),u({key:0},h(x),{ref:h(I),value:l.value,disabled:R.value,"data-slot":`item`,onSelect:V}),{default:_(()=>[m(e.$slots,`default`)]),_:3},16,[`value`,`disabled`])):c(`v-if`,!0)}});export{v as default};
+import{useExposedElement as e}from"../../composables/use-exposed-element.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{useListboxGroupContext as n,useListboxRootContext as r}from"../listbox/context.js";import{useComboboxRootContext as i}from"./context.js";import a from"../listbox/listbox-item.js";import"../listbox/index.js";import{computed as o,createBlock as s,createCommentVNode as c,defineComponent as l,mergeProps as u,onMounted as d,onUnmounted as f,openBlock as p,renderSlot as m,unref as h,useId as g,withCtx as _}from"vue";const v=l({name:`ComboboxItem`,__name:`combobox-item`,props:{textValue:{},value:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`select`],setup(l,{emit:v}){let y=l,b=v,x=t(y,[`textValue`]),{isMultiple:S}=r(`ComboboxItem`),{disabled:C,isVirtual:w,ignoreFilter:T,filterSearch:E,filterState:D,allItems:O,allGroups:k,inputElement:A,resetSearchTermOnSelect:j,onOpenChange:M}=i(`ComboboxItem`),N=n(),P=`soybean-combobox-item-${g()}`,[F,I]=e();if(y.value===``)throw Error(`A <ComboboxItem /> must have a value prop that is not an empty string.`);let L=o(()=>y.textValue??F.value?.textContent?.trim()??y.value),R=o(()=>C.value??y.disabled),z=o(()=>{if(w.value||T.value||!E.value)return!0;let e=D.value.items.get(P);return e===void 0?!0:e>0}),B=()=>{let e=N?.id;if(!e)return;let t=k.value.get(e);if(!t)return;let n=new Set(t);n.delete(P);let r=new Map(k.value);n.size?r.set(e,n):r.delete(e),k.value=r},V=e=>{if(b(`select`,e),!e.defaultPrevented){if(j.value&&(E.value=``),S.value){A.value?.focus();return}M(!1)}};return d(()=>{let e=new Map(O.value);e.set(P,L.value),O.value=e;let t=N?.id;if(t){let e=k.value.get(t)??new Set,n=new Set(e),r=new Map(k.value);n.add(P),r.set(t,n),k.value=r}}),f(()=>{let e=new Map(O.value);e.delete(P),O.value=e,B()}),(e,t)=>z.value?(p(),s(h(a),u({key:0},h(x),{ref:h(I),value:l.value,disabled:R.value,"data-slot":`item`,onSelect:V}),{default:_(()=>[m(e.$slots,`default`)]),_:3},16,[`value`,`disabled`])):c(`v-if`,!0)}});export{v as default};