nuance-ui 0.2.5 → 0.2.6

package/dist/runtime/components/roving-focus/roving-focus-item.vue

@@ -15,18 +15,18 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<Renderless
-		v-bind='attrs'
-		ref='item'
-		:tabindex='-1'
-		@keydown.up.prevent='isVertical && focus?.("prev", $event.currentTarget)'
-		@keydown.down.prevent='isVertical && focus?.("next", $event.currentTarget)'
-		@keydown.left.prevent='isHorizontal && focus?.("prev", $event.currentTarget)'
-		@keydown.right.prevent='isHorizontal && focus?.("next", $event.currentTarget)'
-		@keydown.home.prevent='focus?.("first")'
-		@keydown.end.prevent='focus?.("last")'
-		@click.prevent='focusElement?.($event.currentTarget)'
-	>
-		<slot />
-	</Renderless>
+	<Renderless
+		v-bind='attrs'
+		ref='item'
+		:tabindex='-1'
+		@keydown.up.prevent='isVertical && focus?.("prev", $event.currentTarget)'
+		@keydown.down.prevent='isVertical && focus?.("next", $event.currentTarget)'
+		@keydown.left.prevent='isHorizontal && focus?.("prev", $event.currentTarget)'
+		@keydown.right.prevent='isHorizontal && focus?.("next", $event.currentTarget)'
+		@keydown.home.prevent='focus?.("first")'
+		@keydown.end.prevent='focus?.("last")'
+		@click.prevent='focusElement?.($event.currentTarget)'
+	>
+		<slot />
+	</Renderless>
 </template>

package/dist/runtime/components/roving-focus/roving-focus.vue

@@ -17,7 +17,7 @@ onMounted(() => nextTick(() => init()));
 </script>
 
 <template>
-	<Renderless ref='list'>
-		<slot />
-	</Renderless>
+	<Renderless ref='list'>
+		<slot />
+	</Renderless>
 </template>

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

@@ -1,9 +1,11 @@
-import type { ComboboxData, ComboboxItem, ComboboxItemExt } from '../combobox/index.js';
+import type { ComboboxData, ComboboxItemExt } from '../combobox/index.js';
 import type { TextInputProps } from '../input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
-    data: ComboboxData<Value, Ext>;
+    options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
+    /** If set, multiple options can be selected @default `false` */
+    multiple?: boolean;
     /** If set, the check icon is displayed near the selected option label @default `true` */
     withCheckIcon?: boolean;
     /** Position of the check icon relative to the option label @default `'left'` */
@@ -12,23 +14,29 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     nothingFoundMessage?: string;
     /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */
     allowDeselect?: boolean;
+    /** If set, the dropdown will close after an option is selected @default `!multiple` */
+    closeOnSelect?: boolean;
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    /** Icon displayed in the left section by default */
+    icon?: string;
     limit?: number;
-    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     /** Input autocomplete attribute */
     autoComplete?: string;
 }
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__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<Value, Ext> & {
+        /** Dropdown opened state */
         open?: boolean;
-        modelValue?: ComboboxItem<Value, Ext> | null;
+        /** Value handler */
+        modelValue?: string | string[] | null;
+        /** Search handler */
         search?: string;
     }) & {
         onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
         onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
-        onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
+        onSubmit?: ((args_0: string, args_1: import("..").ComboboxItem) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
         onOpen?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
         "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
@@ -38,6 +46,11 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        selection?: (props: {
+            value: string | string[] | null;
+            display: string;
+        }) => any;
+    } & {
         label?: (props: {}) => any;
     } & {
         description?: (props: {}) => any;
@@ -48,7 +61,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: import("..").ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/select/select.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { useCombobox, useComboboxData } from "../combobox";
 import ComboboxOptionsDropdown from "../combobox/combobox-options-dropdown.vue";
 import ComboboxRoot from "../combobox/combobox-root.vue";
@@ -7,25 +7,31 @@ import ComboboxTarget from "../combobox/combobox-target.vue";
 import TextInput from "../input/text-input.vue";
 import ButtonInput from "../input/ui/button-input.vue";
 const {
-  data,
+  options: data,
   disabled,
   searchable = false,
+  multiple = false,
   rightSectionPE = "none",
   readonly = false,
   allowDeselect = false,
+  closeOnSelect,
   autoComplete = "off",
+  icon,
   limit,
   iconPosition,
   nothingFoundMessage,
-  withCheckIcon,
+  withCheckIcon = true,
   ...rest
 } = defineProps({
-  data: { type: Array, required: true },
+  options: { type: Array, required: true },
   searchable: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
   withCheckIcon: { type: Boolean, required: false },
   iconPosition: { type: String, required: false },
   nothingFoundMessage: { type: String, required: false },
   allowDeselect: { type: Boolean, required: false },
+  closeOnSelect: { type: Boolean, required: false },
+  icon: { type: String, required: false },
   limit: { type: Number, required: false },
   autoComplete: { type: String, required: false },
   withAria: { type: Boolean, required: false },
@@ -44,7 +50,8 @@ const {
 });
 const emit = defineEmits(["clear", "select", "open", "close", "submit"]);
 const opened = defineModel("open", { type: Boolean, ...{ default: false } });
-const value = defineModel({ type: [Object, null], ...{ default: null } });
+const value = defineModel({ type: [String, Array, null], ...{ default: null } });
+const search = defineModel("search", { type: String, ...{ default: "" } });
 const { parsed, options } = useComboboxData(data);
 const store = useCombobox({
   opened,
@@ -54,6 +61,8 @@ const store = useCombobox({
   onClear: () => emit("clear"),
   onOpenDropdown: (source) => {
     emit("open", source);
+    if (searchable)
+      search.value = "";
     store.updateSelectedOptionIx("active", { scrollIntoView: true });
   },
   onCloseDropdown: (source) => {
@@ -61,8 +70,36 @@ const store = useCombobox({
     nextTick(() => store.resetSelectedOption());
   }
 });
-const search = defineModel("search", { type: String, ...{ default: "" } });
 watch(search, () => nextTick(() => store.resetSelectedOption()));
+const display = computed(() => {
+  const v = value.value;
+  if (multiple && Array.isArray(v))
+    return v.map((val) => options.value[val]?.label ?? val).join(", ");
+  if (v && typeof v === "string")
+    return options.value[v]?.label ?? v;
+  return "";
+});
+const focused = ref(false);
+const inputValue = computed({
+  get: () => searchable && focused.value ? search.value : display.value,
+  set: (val) => {
+    search.value = val;
+  }
+});
+function onSubmit(val) {
+  const shouldClose = closeOnSelect ?? !multiple;
+  if (multiple) {
+    const current = Array.isArray(value.value) ? value.value : [];
+    value.value = current.includes(val) ? current.filter((v) => v !== val) : [...current, val];
+    search.value = "";
+  } else {
+    const nextValue = allowDeselect && value.value === val ? null : val;
+    value.value = options.value[val] ? nextValue : null;
+    search.value = "";
+  }
+  if (shouldClose)
+    store.closeDropdown();
+}
 </script>
 
 <template>
@@ -72,11 +109,7 @@ watch(search, () => nextTick(() => store.resetSelectedOption()));
 		:store
 		@submit='(val, option) => {
   $emit("submit", val, option);
-  const optionsLockup = allowDeselect ? options[val]?.value === value?.value ? null : options[val] : options[val];
-  const nextValue = optionsLockup ? optionsLockup : null;
-  value = nextValue;
-  search = nextValue?.label ?? "";
-  store.closeDropdown();
+  onSubmit(val);
 }'
 	>
 		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
@@ -84,18 +117,18 @@ watch(search, () => nextTick(() => store.resetSelectedOption()));
 				:is='searchable ? TextInput : ButtonInput'
 				:id='store.listId'
 				v-bind='{ ...rest, ...$attrs }'
-				v-model='search'
+				v-model='inputValue'
 				:disabled
 				:right-section-p-e
 				:readonly='readonly || !searchable'
 				:class='$style.input'
-				@blur='() => {
-  searchable && store.closeDropdown();
-  search = value?.label ?? "";
-}'
+				@focus='focused = true'
+				@blur='focused = false'
 				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
 			>
-				{{ value?.label ?? value?.value ?? null }}
+				<slot v-if='display' name='selection' :value='value' :display='display'>
+					{{ display }}
+				</slot>
 
 				<template v-if='$slots?.label' #label>
 					<slot name='label' />
@@ -107,9 +140,9 @@ watch(search, () => nextTick(() => store.resetSelectedOption()));
 					<slot name='error' />
 				</template>
 
-				<template v-if='$slots.leftSection || value?.icon' #leftSection>
+				<template v-if='$slots.leftSection || icon' #leftSection>
 					<slot name='leftSection'>
-						<Icon v-if='value?.icon' :name='value?.icon' />
+						<Icon v-if='icon' :name='icon' />
 					</slot>
 				</template>
 				<template #rightSection>
@@ -121,6 +154,7 @@ watch(search, () => nextTick(() => store.resetSelectedOption()));
 		</ComboboxTarget>
 		<ComboboxOptionsDropdown
 			v-model='value'
+			v-model:search='search'
 			:data='parsed'
 			:limit
 			:with-check-icon

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

@@ -1,9 +1,11 @@
-import type { ComboboxData, ComboboxItem, ComboboxItemExt } from '../combobox/index.js';
+import type { ComboboxData, ComboboxItemExt } from '../combobox/index.js';
 import type { TextInputProps } from '../input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
-    data: ComboboxData<Value, Ext>;
+    options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
+    /** If set, multiple options can be selected @default `false` */
+    multiple?: boolean;
     /** If set, the check icon is displayed near the selected option label @default `true` */
     withCheckIcon?: boolean;
     /** Position of the check icon relative to the option label @default `'left'` */
@@ -12,23 +14,29 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     nothingFoundMessage?: string;
     /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */
     allowDeselect?: boolean;
+    /** If set, the dropdown will close after an option is selected @default `!multiple` */
+    closeOnSelect?: boolean;
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    /** Icon displayed in the left section by default */
+    icon?: string;
     limit?: number;
-    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     /** Input autocomplete attribute */
     autoComplete?: string;
 }
 declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__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<Value, Ext> & {
+        /** Dropdown opened state */
         open?: boolean;
-        modelValue?: ComboboxItem<Value, Ext> | null;
+        /** Value handler */
+        modelValue?: string | string[] | null;
+        /** Search handler */
         search?: string;
     }) & {
         onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
         onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
-        onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
+        onSubmit?: ((args_0: string, args_1: import("..").ComboboxItem) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
         onOpen?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
         "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
@@ -38,6 +46,11 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        selection?: (props: {
+            value: string | string[] | null;
+            display: string;
+        }) => any;
+    } & {
         label?: (props: {}) => any;
     } & {
         description?: (props: {}) => any;
@@ -48,7 +61,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: import("..").ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,30 +1,30 @@
-import type { Cell, Header, RowData } from '@tanstack/vue-table'
-
-
-declare module '@tanstack/table-core' {
-	interface ColumnMeta<TData extends RowData, TValue> {
-		class?: {
-			th?: string | ((cell: Header<TData, TValue>) => string)
-			td?: string | ((cell: Cell<TData, TValue>) => string)
-		}
-		style?: {
-			th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
-			td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
-		}
-		colspan?: {
-			td?: string | ((cell: Cell<TData, TValue>) => string)
-		}
-		rowspan?: {
-			td?: string | ((cell: Cell<TData, TValue>) => string)
-		}
-	}
-
-	interface TableMeta<TData> {
-		class?: {
-			tr?: string | ((row: Row<TData>) => string)
-		}
-		style?: {
-			tr?: string | Record<string, string> | ((row: Row<TData>) => string | Record<string, string>)
-		}
-	}
-}
+import type { Cell, Header, RowData } from '@tanstack/vue-table'
+
+
+declare module '@tanstack/table-core' {
+	interface ColumnMeta<TData extends RowData, TValue> {
+		class?: {
+			th?: string | ((cell: Header<TData, TValue>) => string)
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+		style?: {
+			th?: string | Record<string, string> | ((cell: Header<TData, TValue>) => string | Record<string, string>)
+			td?: string | Record<string, string> | ((cell: Cell<TData, TValue>) => string | Record<string, string>)
+		}
+		colspan?: {
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+		rowspan?: {
+			td?: string | ((cell: Cell<TData, TValue>) => string)
+		}
+	}
+
+	interface TableMeta<TData> {
+		class?: {
+			tr?: string | ((row: Row<TData>) => string)
+		}
+		style?: {
+			tr?: string | Record<string, string> | ((row: Row<TData>) => string | Record<string, string>)
+		}
+	}
+}

package/dist/runtime/components/table/ui/table-sort-icon.vue

@@ -14,5 +14,5 @@ const name = computed(() => column.getIsSorted() ? column.getIsSorted() === "asc
 </script>
 
 <template>
-	<Icon :name />
+	<Icon :name />
 </template>

package/dist/runtime/components/table/ui/table-sortable-header.vue

@@ -30,15 +30,15 @@ const {
 </script>
 
 <template>
-	<Button :size :variant :color v-bind='rest'>
-		<template #leftSection>
-			<TableSortIcon :column :icons />
-		</template>
-		<slot>
-			<FlexRender :render='column.columnDef.header' />
-		</slot>
-		<template v-if='!!$slots.rightSection' #rightSection>
-			<slot name='rightSection' />
-		</template>
-	</Button>
+	<Button :size :variant :color v-bind='rest'>
+		<template #leftSection>
+			<TableSortIcon :column :icons />
+		</template>
+		<slot>
+			<FlexRender :render='column.columnDef.header' />
+		</slot>
+		<template v-if='!!$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</template>
+	</Button>
 </template>