@sewadah/selaras 0.3.1 → 0.3.2

package/dist/runtime/components/Select.d.vue.ts

@@ -1,8 +1,10 @@
-import type { SelectIdentity, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
+import type { SelectEntry, SelectEntryItem, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
 export type { SelectEmits, SelectProps, SelectSlots } from '../utils/select-contracts.js';
-declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false>(__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<{
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<SelectProps<Entry, Key, Multiple> & {
-        "onUpdate:modelValue"?: ((value: SelectModel<SelectIdentity<Entry, Key>, Multiple>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: SelectModel<SelectEntryItem<Entry> extends infer T ? T extends SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -11,7 +13,9 @@ declare const __VLS_export: <Entry extends object, Key extends string = "value",
     expose: (exposed: {}) => void;
     attrs: any;
     slots: SelectSlots<Entry, Key>;
-    emit: ((evt: "update:modelValue", value: SelectModel<SelectIdentity<Entry, Key>, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
+    emit: ((evt: "update:modelValue", value: SelectModel<SelectEntryItem<Entry> extends infer T ? T extends SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+        value: infer Value;
+    } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/runtime/components/Select.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   name: { type: String, required: false },
   form: { type: String, required: false },
   items: { type: Array, required: true },
-  valueKey: { type: String, required: false },
+  valueKey: { type: void 0, required: false },
   labelKey: { type: String, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },

package/dist/runtime/components/Select.vue.d.ts

@@ -1,8 +1,10 @@
-import type { SelectIdentity, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
+import type { SelectEntry, SelectEntryItem, SelectModel, SelectProps, SelectSlots } from '../utils/select-contracts.js';
 export type { SelectEmits, SelectProps, SelectSlots } from '../utils/select-contracts.js';
-declare const __VLS_export: <Entry extends object, Key extends string = "value", Multiple extends boolean = false>(__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<{
+declare const __VLS_export: <Entry extends SelectEntry, Key extends string = "value", Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<SelectProps<Entry, Key, Multiple> & {
-        "onUpdate:modelValue"?: ((value: SelectModel<SelectIdentity<Entry, Key>, Multiple>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: SelectModel<SelectEntryItem<Entry> extends infer T ? T extends SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+            value: infer Value;
+        } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
         "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -11,7 +13,9 @@ declare const __VLS_export: <Entry extends object, Key extends string = "value",
     expose: (exposed: {}) => void;
     attrs: any;
     slots: SelectSlots<Entry, Key>;
-    emit: ((evt: "update:modelValue", value: SelectModel<SelectIdentity<Entry, Key>, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
+    emit: ((evt: "update:modelValue", value: SelectModel<SelectEntryItem<Entry> extends infer T ? T extends SelectEntryItem<Entry> ? T extends import("../utils/select-contracts.js").SelectValue ? T : Key extends "value" ? T extends object ? "value" extends keyof T ? T extends infer T_1 ? T_1 extends T ? T_1 extends {
+        value: infer Value;
+    } ? Value : T_1 | NonNullable<T_1[keyof T_1 & "value"]> : never : never : T : never : Key extends keyof T ? T[Key] : never : never : never, Multiple>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "update:searchTerm", value: string) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/runtime/components/Slideover.vue

@@ -4,9 +4,10 @@ import { computed, getCurrentInstance, ref, useSlots, watch, watchEffect } from
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { slideoverTheme } from "../theme/slideover";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useRootProps, useThemeBindings } from "../utils/ui";
 import Button from "./Button.vue";
 import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   open: { type: Boolean, required: false, default: void 0 },
   defaultOpen: { type: Boolean, required: false },
@@ -70,8 +71,8 @@ const messages = useMessages();
 const theme = useComponentTheme("slideover", slideoverTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value({ side: props.side, inset: props.inset, transition: props.transition }));
+const contentProps = useRootProps(() => ui.value.content, () => props.ui?.content);
 const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
 const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
 const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
 const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));

package/dist/runtime/components/Tooltip.vue

@@ -4,7 +4,8 @@ import { computed } from "vue";
 import { tooltipTheme } from "../theme/tooltip";
 import { arrowContentProps, arrowElementProps } from "../utils/arrow";
 import { overlayPortalProps } from "../utils/overlay";
-import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+import { resolveSlot, useComponentTheme, useFallthroughProps, useThemeBindings } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   text: { type: String, required: false },
   side: { type: String, required: false, default: "top" },
@@ -19,6 +20,7 @@ const props = defineProps({
 const theme = useComponentTheme("tooltip", tooltipTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
+const triggerProps = useFallthroughProps();
 const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...arrowContentProps(props.arrow), ...props.positioning }));
 const portalProps = computed(() => overlayPortalProps(props.portal));
 const arrowProps = computed(() => ({ ...resolveSlot(ui.value.arrow, props.ui?.arrow), ...arrowElementProps(props.arrow) }));
@@ -28,7 +30,7 @@ const kbdProps = computed(() => resolveSlot(ui.value.kbd, props.ui?.kbd));
 
 <template>
   <TooltipRoot :delay-duration="delayDuration" :disabled="disabled">
-    <TooltipTrigger as-child>
+    <TooltipTrigger as-child v-bind="triggerProps">
       <slot />
     </TooltipTrigger>
     <TooltipPortal v-bind="portalProps">

package/dist/runtime/composables/use-confirm.d.ts

@@ -0,0 +1,14 @@
+import type { ColorRole } from '../utils/color-registry.js';
+export interface UseConfirmOptions {
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: ColorRole;
+    icon?: string;
+}
+export interface UseConfirmReturn {
+    /** Resolves true only for an explicit confirmation; cancel, Escape, and dismissal resolve false. */
+    confirm: (options?: UseConfirmOptions) => Promise<boolean>;
+}
+export declare function useConfirm(): UseConfirmReturn;

package/dist/runtime/composables/use-confirm.js

@@ -0,0 +1,28 @@
+import { useConfirmService } from "../internal/programmatic-services.js";
+import { useProgrammaticThemeSnapshot } from "../utils/programmatic-theme.js";
+import { useMessages } from "./use-messages.js";
+export function useConfirm() {
+  const service = useConfirmService();
+  const messages = useMessages();
+  const snapshotTheme = useProgrammaticThemeSnapshot();
+  function confirm(options = {}) {
+    if (import.meta.server)
+      return Promise.reject(new Error("[useConfirm] confirm() is client-only. Render SAlertDialog declaratively during SSR."));
+    return new Promise((resolve) => {
+      service.instances.value.push({
+        id: service.nextId(),
+        isOpen: true,
+        _settled: false,
+        resolve: (value) => resolve(value === true),
+        title: options.title ?? messages.value.confirmation,
+        description: options.description,
+        confirmLabel: options.confirmLabel,
+        cancelLabel: options.cancelLabel,
+        confirmColor: options.confirmColor,
+        icon: options.icon,
+        _theme: snapshotTheme()
+      });
+    });
+  }
+  return { confirm };
+}

package/dist/runtime/internal/ComboboxSelectBase.d.vue.ts

@@ -3,6 +3,7 @@ import type { SelectThemeSlots } from '../theme/select.js';
 import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
 import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { UiProp } from '../utils/ui.js';
 import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
@@ -18,9 +19,9 @@ export interface ComboboxSelectBaseProps {
     open?: boolean;
     /** Initial uncontrolled open state. */
     defaultOpen?: boolean;
-    modelValue?: string | number | (string | number)[];
+    modelValue?: SelectModelValue | SelectModelValue[];
     /** Initial uncontrolled selection and native form reset target. */
-    defaultValue?: string | number | (string | number)[];
+    defaultValue?: SelectModelValue | SelectModelValue[];
     multiple?: boolean;
     searchable?: boolean;
     virtualize?: boolean | {
@@ -54,23 +55,23 @@ export interface ComboboxSelectBaseProps {
 }
 export interface ComboboxSelectBaseEmits {
     'update:open': [value: boolean];
-    'update:modelValue': [value: string | number | (string | number)[] | undefined];
+    'update:modelValue': [value: SelectModelValue | SelectModelValue[] | undefined];
     'update:searchTerm': [value: string];
 }
 declare var __VLS_43: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_164: {
     selected: import("./combobox-select.js").ResolvedOption | undefined;
 }, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_234: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 }, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_280: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 };
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_273>]?: (props: typeof __VLS_274) => any;
@@ -112,11 +113,11 @@ type __VLS_Slots = {} & {
     group?: (props: typeof __VLS_280) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
+    "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBaseProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SelectModelValue | SelectModelValue[] | undefined) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/internal/ComboboxSelectBase.vue

@@ -44,8 +44,8 @@ const props = defineProps({
   labelKey: { type: String, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Array], required: false },
-  defaultValue: { type: [String, Number, Array], required: false },
+  modelValue: { type: [String, Number, Object, Array], required: false },
+  defaultValue: { type: [String, Number, Object, Array], required: false },
   multiple: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   virtualize: { type: [Boolean, Object], required: false },
@@ -507,6 +507,15 @@ function onModalSelection(value) {
   if (!props.multiple)
     updateOpen(false);
 }
+function serializeFormValue(value) {
+  if (typeof value !== "object")
+    return String(value);
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return String(value);
+  }
+}
 const adaptiveUi = computed(() => ({
   content: {
     class: "rounded-[var(--selaras-resolved-radius-md)]",
@@ -608,7 +617,7 @@ const bodyProps = computed(() => ({
           -->
           <TagsInputItem
             v-for="option in visibleOptions"
-            :key="option.value"
+            :key="option.key"
             :value="option.value"
             as-child
           >
@@ -620,7 +629,7 @@ const bodyProps = computed(() => ({
               :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--_selaras-color-fill)]' }"
             >
               <TagsInputItemText as="span">
-                <slot v-if="option.raw" name="item" :item="option.raw">
+                <slot v-if="option.raw !== void 0" name="item" :item="option.raw">
                   {{ option.label }}
                 </slot>
                 <template v-else>
@@ -736,7 +745,7 @@ const bodyProps = computed(() => ({
           <div v-if="displayMode === 'chip'" class="flex flex-1 flex-wrap items-center gap-1.5">
             <Chip
               v-for="option in visibleOptions"
-              :key="option.value"
+              :key="option.key"
               size="sm"
               color="primary"
               variant="soft"
@@ -745,7 +754,7 @@ const bodyProps = computed(() => ({
               :aria-current="option.value === selectedChipValue || void 0"
               :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--_selaras-color-fill)]' }"
             >
-              <slot v-if="option.raw" name="item" :item="option.raw">
+              <slot v-if="option.raw !== void 0" name="item" :item="option.raw">
                 {{ option.label }}
               </slot>
               <template v-else>
@@ -913,7 +922,7 @@ const bodyProps = computed(() => ({
       type="hidden"
       :name="name ?? field?.name"
       :form="form"
-      :value="String(value)"
+      :value="serializeFormValue(value)"
       :disabled="disabled"
       :required="required && !disabled && index === 0"
     >

package/dist/runtime/internal/ComboboxSelectBase.vue.d.ts

@@ -3,6 +3,7 @@ import type { SelectThemeSlots } from '../theme/select.js';
 import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
 import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { UiProp } from '../utils/ui.js';
 import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
@@ -18,9 +19,9 @@ export interface ComboboxSelectBaseProps {
     open?: boolean;
     /** Initial uncontrolled open state. */
     defaultOpen?: boolean;
-    modelValue?: string | number | (string | number)[];
+    modelValue?: SelectModelValue | SelectModelValue[];
     /** Initial uncontrolled selection and native form reset target. */
-    defaultValue?: string | number | (string | number)[];
+    defaultValue?: SelectModelValue | SelectModelValue[];
     multiple?: boolean;
     searchable?: boolean;
     virtualize?: boolean | {
@@ -54,23 +55,23 @@ export interface ComboboxSelectBaseProps {
 }
 export interface ComboboxSelectBaseEmits {
     'update:open': [value: boolean];
-    'update:modelValue': [value: string | number | (string | number)[] | undefined];
+    'update:modelValue': [value: SelectModelValue | SelectModelValue[] | undefined];
     'update:searchTerm': [value: string];
 }
 declare var __VLS_43: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_164: {
     selected: import("./combobox-select.js").ResolvedOption | undefined;
 }, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_234: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 }, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_280: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 };
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_273>]?: (props: typeof __VLS_274) => any;
@@ -112,11 +113,11 @@ type __VLS_Slots = {} & {
     group?: (props: typeof __VLS_280) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
+    "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBaseProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SelectModelValue | SelectModelValue[] | undefined) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/internal/ComboboxSelectBody.d.vue.ts

@@ -1,3 +1,4 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { ResolvedItemOption, SelectItems, SelectOption } from './combobox-select.js';
 export interface ComboboxSelectBodyProps {
     listbox?: boolean;
@@ -5,7 +6,7 @@ export interface ComboboxSelectBodyProps {
     creatable?: boolean;
     multiple?: boolean;
     forceSelection?: boolean;
-    selectedValues?: (string | number)[];
+    selectedValues?: SelectModelValue[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -15,9 +16,9 @@ export interface ComboboxSelectBodyProps {
         overscan: number;
     } | null;
     virtualizedOptions: ResolvedItemOption[];
-    toOption: (entry: SelectOption) => ResolvedItemOption;
+    toOption: (entry: SelectOption | SelectModelValue) => ResolvedItemOption;
     groupOptions: (group: {
-        items: readonly SelectOption[];
+        items: readonly (SelectOption | SelectModelValue)[];
     }) => ResolvedItemOption[];
     onSearchKeydown: (event: KeyboardEvent) => void;
     onSearchBlur: () => void;
@@ -34,13 +35,13 @@ export interface ComboboxSelectBodyEmits {
 }
 declare function focusSearch(): boolean;
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_92: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 }, __VLS_102: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_123: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;

package/dist/runtime/internal/ComboboxSelectBody.vue

@@ -71,7 +71,7 @@ const createText = computed(() => {
 });
 const virtualOptions = computed(() => {
   const options = props.listbox ? visibleOptions.value : props.virtualizedOptions;
-  return createText.value ? [{ value: createText.value, label: messages.value.createOption(createText.value), disabled: false, raw: void 0 }, ...options] : options;
+  return createText.value ? [{ value: createText.value, key: `create:${createText.value}`, label: messages.value.createOption(createText.value), disabled: false, raw: void 0 }, ...options] : options;
 });
 function onItemSelect(event, value) {
   if (!props.creatable || !props.multiple || !props.selectedValues?.includes(value))
@@ -148,12 +148,12 @@ defineExpose({ focusSearch });
           :key="String(virtualItem.key)"
           :value="option.value"
           :disabled="option.disabled"
-          :data-selaras-create-option="!option.raw || void 0"
+          :data-selaras-create-option="option.raw === void 0 || void 0"
           :style="{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${virtualItem.start}px)`, height: `${virtualItem.size}px` }"
           v-bind="itemProps"
           @select="onItemSelect($event, option.value)"
         >
-          <template v-if="!option.raw">
+          <template v-if="option.raw === void 0">
             {{ option.label }}
           </template>
           <template v-else>
@@ -182,7 +182,7 @@ defineExpose({ focusSearch });
           <component
             :is="primitives.item"
             v-for="option in groupOptions(entry).filter(matches)"
-            :key="option.value"
+            :key="option.key"
             :value="option.value"
             :disabled="option.disabled"
             v-bind="itemProps"

package/dist/runtime/internal/ComboboxSelectBody.vue.d.ts

@@ -1,3 +1,4 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { ResolvedItemOption, SelectItems, SelectOption } from './combobox-select.js';
 export interface ComboboxSelectBodyProps {
     listbox?: boolean;
@@ -5,7 +6,7 @@ export interface ComboboxSelectBodyProps {
     creatable?: boolean;
     multiple?: boolean;
     forceSelection?: boolean;
-    selectedValues?: (string | number)[];
+    selectedValues?: SelectModelValue[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -15,9 +16,9 @@ export interface ComboboxSelectBodyProps {
         overscan: number;
     } | null;
     virtualizedOptions: ResolvedItemOption[];
-    toOption: (entry: SelectOption) => ResolvedItemOption;
+    toOption: (entry: SelectOption | SelectModelValue) => ResolvedItemOption;
     groupOptions: (group: {
-        items: readonly SelectOption[];
+        items: readonly (SelectOption | SelectModelValue)[];
     }) => ResolvedItemOption[];
     onSearchKeydown: (event: KeyboardEvent) => void;
     onSearchBlur: () => void;
@@ -34,13 +35,13 @@ export interface ComboboxSelectBodyEmits {
 }
 declare function focusSearch(): boolean;
 declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_92: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 }, __VLS_102: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_123: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
+    item: SelectModelValue | SelectOption<SelectModelValue>;
 }, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;

package/dist/runtime/internal/combobox-select.d.ts

@@ -1,51 +1,52 @@
 import type { ComputedRef } from 'vue';
-import type { SelectValue } from '../utils/select-contracts.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
 /** Erased runtime records for the shared implementation, not authoring types. */
-export interface SelectOption<Value extends SelectValue = SelectValue> {
+export interface SelectOption<Value extends SelectModelValue = SelectModelValue> {
     [key: string]: unknown;
-    /** The default option key. Custom `valueKey` fields use the same primitive contract. */
+    /** The default option key. Custom `valueKey` fields use the same identity contract. */
     value?: Value;
     disabled?: boolean;
 }
-export interface SelectOptionGroup<Value extends SelectValue = SelectValue> {
+export interface SelectOptionGroup<Value extends SelectModelValue = SelectModelValue> {
     label: string;
-    items: readonly SelectOption<Value>[];
+    items: readonly (Value | SelectOption<Value>)[];
 }
-export type SelectItems<Value extends SelectValue = SelectValue> = readonly (SelectOption<Value> | SelectOptionGroup<Value>)[];
-export declare function isOptionGroup<Value extends SelectValue = SelectValue>(entry: SelectOption<Value> | SelectOptionGroup<Value>): entry is SelectOptionGroup<Value>;
+export type SelectItems<Value extends SelectModelValue = SelectModelValue> = readonly (Value | SelectOption<Value> | SelectOptionGroup<Value>)[];
+export declare function isOptionGroup(entry: unknown): entry is SelectOptionGroup;
 /** Flattens groups into a plain option list - groups lose their header when virtualized. */
-export declare function flattenItems<Value extends SelectValue = SelectValue>(items: SelectItems<Value>): SelectOption<Value>[];
+export declare function flattenItems(items: SelectItems): (SelectModelValue | SelectOption)[];
 interface SelectLikeProps {
     items: SelectItems;
     valueKey?: string;
     labelKey?: string;
-    modelValue?: SelectValue | SelectValue[];
+    modelValue?: SelectModelValue | SelectModelValue[];
     multiple?: boolean;
     displayMode?: 'comma' | 'chip';
     maxChips?: number;
 }
 export interface ResolvedOption {
-    value: SelectValue;
+    value: SelectModelValue;
+    key: string | number;
     label: string;
     disabled: boolean;
-    raw: SelectOption | undefined;
+    raw: SelectOption | SelectModelValue | undefined;
 }
 export interface ResolvedItemOption extends ResolvedOption {
-    raw: SelectOption;
+    raw: SelectOption | SelectModelValue;
 }
-export declare function useComboboxSelect(props: SelectLikeProps, emit: (event: 'update:modelValue', value: SelectValue | SelectValue[] | undefined) => void, { creatable }?: {
+export declare function useComboboxSelect(props: SelectLikeProps, emit: (event: 'update:modelValue', value: SelectModelValue | SelectModelValue[] | undefined) => void, { creatable }?: {
     creatable?: boolean;
 }): {
     flatOptions: ComputedRef<ResolvedItemOption[]>;
-    selectedValues: ComputedRef<SelectValue[]>;
+    selectedValues: ComputedRef<SelectModelValue[]>;
     selectedOptions: ComputedRef<ResolvedOption[]>;
     visibleOptions: ComputedRef<ResolvedOption[]>;
     overflowOptions: ComputedRef<ResolvedOption[]>;
     commaText: ComputedRef<string>;
-    resolveOption: (value: SelectValue) => ResolvedOption;
-    toOption: (raw: SelectOption) => ResolvedItemOption;
-    setValue: (value: SelectValue | SelectValue[] | undefined) => void;
-    removeValue: (value: SelectValue) => void;
+    resolveOption: (value: SelectModelValue) => ResolvedOption;
+    toOption: (raw: SelectOption | SelectModelValue) => ResolvedItemOption;
+    setValue: (value: SelectModelValue | SelectModelValue[] | undefined) => void;
+    removeValue: (value: SelectModelValue) => void;
     hasMatchingOption: (text: string) => boolean;
     commitCreatableText: (rawText: string) => boolean;
 };