nuance-ui 0.2.5 → 0.2.7

package/dist/runtime/components/combobox/lib/use-combobox/index.js

@@ -1 +1,104 @@
-export { useCombobox } from "./use-combobox.js";
+import { unrefElement } from "@vueuse/core";
+import { nextTick, shallowRef, useId } from "vue";
+import { COMBOBOX_ATTRS } from "../const.js";
+import {
+  clearSelected,
+  selectActiveOption,
+  selectFirstOption,
+  selectNextOption,
+  selectOption,
+  selectPrevOption,
+  updateSelectedOptionIx
+} from "./handlers.js";
+export function useCombobox({
+  onSelect,
+  onClear,
+  onCloseDropdown,
+  onOpenDropdown,
+  opened,
+  ..._options
+}) {
+  const listId = useId();
+  const targetRef = shallowRef(null);
+  const searchRef = shallowRef(null);
+  const openDropdown = (eventSource = "unknown") => {
+    if (!opened.value) {
+      opened.value = true;
+      onOpenDropdown?.(eventSource);
+    }
+  };
+  const closeDropdown = (eventSource = "unknown") => {
+    if (opened.value) {
+      opened.value = false;
+      onCloseDropdown?.(eventSource);
+    }
+  };
+  const toggleDropdown = (eventSource = "unknown") => {
+    if (opened.value)
+      closeDropdown(eventSource);
+    else
+      openDropdown(eventSource);
+  };
+  const options = {
+    attrs: _options?.attrs ?? COMBOBOX_ATTRS,
+    scrollBehavior: _options?.scrollBehavior ?? "instant",
+    loop: _options?.loop ?? true,
+    listId,
+    selectFn: (ix) => ix ? `${ix}` : null
+  };
+  let selectedOptionIx = -1;
+  const getSelectedIx = () => selectedOptionIx;
+  const clear = () => {
+    clearSelected(options);
+    onClear?.();
+  };
+  const select = (ix) => {
+    const res = selectOption(ix, { ...options, clearFn: clear });
+    if (res) {
+      selectedOptionIx = res.ix;
+      onSelect?.(res.ix);
+      return res.value;
+    }
+    return null;
+  };
+  options.selectFn = select;
+  const selectActive = () => selectActiveOption(options);
+  const selectNext = () => selectNextOption(getSelectedIx(), options);
+  const selectPrev = () => selectPrevOption(getSelectedIx(), options);
+  const selectFirst = () => selectFirstOption(options);
+  const updateSelectedIx = (target) => updateSelectedOptionIx(target, options);
+  const resetSelectedOption = () => {
+    selectedOptionIx = -1;
+    clear();
+  };
+  const clickSelectedOption = () => {
+    const items = document.querySelectorAll(`#${options.listId} [${options.attrs.option}]`);
+    const item = items?.[selectedOptionIx];
+    item?.click();
+  };
+  const focusSearch = () => {
+    nextTick(() => unrefElement(searchRef)?.focus());
+  };
+  const focusTarget = () => {
+    nextTick(() => unrefElement(targetRef)?.focus());
+  };
+  return {
+    listId,
+    openDropdown,
+    closeDropdown,
+    toggleDropdown,
+    selectOption: select,
+    selectActiveOption: selectActive,
+    selectNextOption: selectNext,
+    selectPrevOption: selectPrev,
+    selectFirstOption: selectFirst,
+    resetSelectedOption,
+    clickSelectedOption,
+    getSelectedOptionIx: getSelectedIx,
+    targetRef,
+    focusTarget,
+    searchRef,
+    focusSearch,
+    updateSelectedOptionIx: updateSelectedIx
+  };
+}

package/dist/runtime/components/combobox/lib/use-combobox-data/get-parsed-combobox-data.d.ts

@@ -1,2 +1,2 @@
-import type { ComboboxData, ComboboxItemExt, ComboboxParsedItem } from '../../types/index.js';
-export declare function getParsedComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext> | undefined): ComboboxParsedItem<Value, Ext>[];
+import type { ComboboxData, ComboboxItemExt, ComboboxOption } from '../../types.js';
+export declare function getParsedComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext> | undefined): ComboboxOption<Value, Ext>[];

package/dist/runtime/components/combobox/lib/use-combobox-data/get-parsed-combobox-data.js

@@ -1,6 +1,7 @@
+import { isNumber } from "es-toolkit";
 import { isOptionsGroup } from "../utils/index.js";
 function parseItem(item) {
-  if (typeof item === "number")
+  if (isNumber(item))
     return { value: item.toString(), label: item.toString() };
   if (isOptionsGroup(item)) {
     return {

package/dist/runtime/components/combobox/lib/use-combobox-data/index.d.ts

@@ -1 +1,7 @@
-export { useComboboxData } from './use-combobox-data.js';
+import type { ComboboxData, ComboboxItem, ComboboxItemExt, ComboboxOption } from '../../types.js';
+export declare function getOptionsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxOption<Value, Ext>[]): Record<string, ComboboxItem<Value, Ext>>;
+export declare function getLabelsLockup<Value extends string = string, Ext extends ComboboxItemExt = object>(options: ComboboxOption<Value, Ext>[]): Record<string, ComboboxOption<Value, Ext>>;
+export declare function useComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object>(data: ComboboxData<Value, Ext>): {
+    parsed: import("vue").ComputedRef<ComboboxOption<Value, Ext>[]>;
+    options: import("vue").ComputedRef<Record<string, ComboboxItem<Value, Ext>>>;
+};

package/dist/runtime/components/combobox/lib/use-combobox-data/index.js

@@ -1 +1,24 @@
-export { useComboboxData } from "./use-combobox-data.js";
+import { computed } from "vue";
+import { isOptionsGroup } from "../utils/index.js";
+import { getParsedComboboxData } from "./get-parsed-combobox-data.js";
+export function getOptionsLockup(options) {
+  return options.reduce((acc, item) => {
+    if (isOptionsGroup(item))
+      return { ...acc, ...getOptionsLockup(item.items) };
+    acc[item.value] = item;
+    return acc;
+  }, {});
+}
+export function getLabelsLockup(options) {
+  return options.reduce((acc, item) => {
+    if (isOptionsGroup(item))
+      return { ...acc, ...getLabelsLockup(item.items) };
+    acc[item.label] = item;
+    return acc;
+  }, {});
+}
+export function useComboboxData(data) {
+  const parsed = computed(() => getParsedComboboxData(data));
+  const options = computed(() => getOptionsLockup(parsed.value));
+  return { parsed, options };
+}

package/dist/runtime/components/combobox/lib/utils/default-option-filter.d.ts

@@ -1,7 +1,7 @@
-import type { ComboboxItemExt, ComboboxParsedItem } from '../../types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from '../../types.js';
 export interface FilterOptionsInput<Value extends string = string, Ext extends ComboboxItemExt = object> {
-    options: ComboboxParsedItem<Value, Ext>[];
+    options: ComboboxOption<Value, Ext>[];
     search: string;
     limit: number;
 }
-export declare function defaultOptionsFilter<Value extends string = string, Ext extends ComboboxItemExt = object>({ options, search, limit, }: FilterOptionsInput<Value, Ext>): ComboboxParsedItem<Value, Ext>[];
+export declare function defaultOptionsFilter<Value extends string = string, Ext extends ComboboxItemExt = object>({ options, search, limit, }: FilterOptionsInput<Value, Ext>): ComboboxOption<Value, Ext>[];

package/dist/runtime/components/combobox/lib/utils/default-option-filter.js

@@ -1,4 +1,4 @@
-import { isOptionsGroup } from "./is-options-group.js";
+import { isOptionsGroup } from "./is-guards.js";
 export function defaultOptionsFilter({
   options,
   search,

package/dist/runtime/components/combobox/lib/utils/index.d.ts

@@ -1,5 +1,4 @@
-import type { ComboboxItem, ComboboxItemExt } from '../../types/index.js';
 export * from './default-option-filter.js';
 export { isEmptyComboboxData } from './is-empty-combobox-data.js';
-export { isOptionsGroup } from './is-options-group.js';
-export declare function isValueChecked<Value extends string = string, Ext extends ComboboxItemExt = object>(value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | undefined | null, optionValue: ComboboxItem<Value, Ext>): boolean;
+export { isOptionsGroup } from './is-guards.js';
+export declare function isValueChecked(value: string | string[] | null | undefined, optionValue: string): boolean;

package/dist/runtime/components/combobox/lib/utils/index.js

@@ -1,6 +1,6 @@
 export * from "./default-option-filter.js";
 export { isEmptyComboboxData } from "./is-empty-combobox-data.js";
-export { isOptionsGroup } from "./is-options-group.js";
+export { isOptionsGroup } from "./is-guards.js";
 export function isValueChecked(value, optionValue) {
-  return Array.isArray(value) ? value.some(({ value: value2 }) => value2 === optionValue.value) : value?.value === optionValue.value;
+  return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
 }

package/dist/runtime/components/combobox/lib/utils/is-empty-combobox-data.d.ts

@@ -1,2 +1,2 @@
-import type { ComboboxParsedItem } from '../../types/index.js';
-export declare function isEmptyComboboxData(data: ComboboxParsedItem[]): boolean;
+import type { ComboboxOption } from '../../types.js';
+export declare function isEmptyComboboxData(data: ComboboxOption[]): boolean;

package/dist/runtime/components/combobox/lib/utils/is-guards.d.ts

@@ -0,0 +1,2 @@
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxOption } from '../../types.js';
+export declare function isOptionsGroup<Value extends string = string, Ext extends ComboboxItemExt = object>(item: ComboboxOption<Value, Ext>): item is ComboboxItemGroup<Value, Ext>;

package/dist/runtime/components/combobox/types.d.ts

@@ -0,0 +1,34 @@
+interface BaseComboboxFields {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export type ComboboxItemExt = Omit<object, keyof BaseComboboxFields>;
+export type ComboboxItem<Value extends string = string, Ext extends ComboboxItemExt = object> = BaseComboboxFields & {
+    value: Value;
+} & Ext;
+export interface ComboboxItemGroup<_Value extends string = string, Ext extends ComboboxItemExt = object> {
+    group: string;
+    icon?: string;
+    items: ComboboxItem<any, Ext>[];
+}
+export type ComboboxOption<Value extends string = string, Ext extends ComboboxItemExt = object> = ComboboxItem<Value, Ext> | ComboboxItemGroup<Value, Ext>;
+export type ComboboxData<Value extends string = string, Ext extends ComboboxItemExt = object> = ComboboxOption<Value, Ext>[];
+export type ComboboxDropdownEventSource = 'keyboard' | 'mouse' | 'unknown';
+export interface ComboboxRootEmits {
+    clear: [];
+    select: [number];
+    /** Called when dropdown opens with event source: keyboard, mouse or unknown */
+    open: [ComboboxDropdownEventSource];
+    /** Called when dropdown closes with event source: keyboard, mouse or unknown */
+    close: [ComboboxDropdownEventSource];
+    /** Called when item is selected with the `Enter` key or by clicking it */
+    submit: [string, ComboboxItem];
+}
+export interface ComboboxItemProps {
+    withCheckIcon?: boolean;
+    checkIcon?: string;
+    iconPosition?: 'left' | 'right';
+}
+export {};

package/dist/runtime/components/container.vue

@@ -20,14 +20,14 @@ const _mod = computed(() => [{ fluid }, mod]);
 </script>
 
 <template>
-	<Box
-		:is
-		:style
-		:mod='_mod'
-		:class='$style.root'
-	>
-		<slot />
-	</Box>
+	<Box
+		:is
+		:style
+		:mod='_mod'
+		:class='$style.root'
+	>
+		<slot />
+	</Box>
 </template>
 
 <style module>

package/dist/runtime/components/date-time-picker.d.vue.ts

@@ -10,8 +10,11 @@ import type { TimePickerProps } from './time-picker/time-picker.vue.js';
 export interface DatePickerProps extends ButtonInputProps, Pick<TimePickerProps, 'withSeconds'> {
     /** Tempo format for date value @default `DD.MM.YYYY HH:mm` */
     format?: Format;
+    /** Props forwarded to the inner `Calendar` */
     calendarProps?: Partial<Omit<CalendarProps, 'numberOfMonths' | 'mode'>>;
+    /** Props forwarded to the inner `TimePicker` */
     timePickerProps?: Omit<Partial<TimePickerProps>, 'withSeconds' | 'name'>;
+    /** Shows a button to clear the value @default `false` */
     clearable?: boolean;
 }
 type __VLS_Props = DatePickerProps;

package/dist/runtime/components/date-time-picker.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { format } from "@formkit/tempo";
-import { useDatesConfig } from "@nui/composals";
+import { useDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import ActionIcon from "./action-icon/action-icon.vue";
 import Calendar from "./calendar/calendar.vue";
@@ -90,72 +90,72 @@ const isClearable = computed(() => clearable && !props.disabled && !props.readon
 </script>
 
 <template>
-	<Popover :disabled @open='$emit("open")' @close='$emit("close")'>
-		<PopoverTarget>
-			<ButtonInput v-bind='props' :right-section-p-e>
-				<template #leftSection>
-					<slot name='leftSection'>
-						<Icon name='gravity-ui:calendar' />
-					</slot>
-				</template>
-
-				<template
-					v-if='!$slots.rightSection && isClearable || !!$slots.rightSection'
-					#rightSection
-				>
-					<slot name='rightSection'>
-						<ActionIcon
-							icon='gravity-ui:xmark'
-							variant='subtle'
-							color='gray'
-							size='sm'
-							@click.stop='model = ""'
-						/>
-					</slot>
-				</template>
-
-				<template #default>
-					{{ visible }}
-				</template>
-
-				<template v-if='!!$slots.label' #label>
-					<slot name='label' />
-				</template>
-				<template v-if='!!$slots.error' #error>
-					<slot name='error' />
-				</template>
-				<template v-if='!!$slots.description' #description>
-					<slot name='description' />
-				</template>
-			</ButtonInput>
-		</PopoverTarget>
-		<PopoverDropdown>
-			<Calendar
-				v-model:value='date'
-				v-bind='calendarProps'
-				:disabled='props.disabled'
-				:readonly='props.readonly'
-				@next='$emit("next")'
-				@prev='$emit("prev")'
-				@level='$emit("level")'
-				@select='(d) => $emit("select", d)'
-			/>
-			<TimePicker
-				v-model='time'
-				v-bind='timePickerProps'
-				:disabled='props.disabled'
-				:readonly='props.readonly'
-				:with-seconds
-				:clearable
-			/>
-		</PopoverDropdown>
-	</Popover>
+	<Popover :disabled @open='$emit("open")' @close='$emit("close")'>
+		<PopoverTarget>
+			<ButtonInput v-bind='props' :right-section-p-e>
+				<template #leftSection>
+					<slot name='leftSection'>
+						<Icon name='gravity-ui:calendar' />
+					</slot>
+				</template>
+
+				<template
+					v-if='!$slots.rightSection && isClearable || !!$slots.rightSection'
+					#rightSection
+				>
+					<slot name='rightSection'>
+						<ActionIcon
+							icon='gravity-ui:xmark'
+							variant='subtle'
+							color='gray'
+							size='sm'
+							@click.stop='model = ""'
+						/>
+					</slot>
+				</template>
+
+				<template #default>
+					{{ visible }}
+				</template>
+
+				<template v-if='!!$slots.label' #label>
+					<slot name='label' />
+				</template>
+				<template v-if='!!$slots.error' #error>
+					<slot name='error' />
+				</template>
+				<template v-if='!!$slots.description' #description>
+					<slot name='description' />
+				</template>
+			</ButtonInput>
+		</PopoverTarget>
+		<PopoverDropdown>
+			<Calendar
+				v-model:value='date'
+				v-bind='calendarProps'
+				:disabled='props.disabled'
+				:readonly='props.readonly'
+				@next='$emit("next")'
+				@prev='$emit("prev")'
+				@level='$emit("level")'
+				@select='(d) => $emit("select", d)'
+			/>
+			<TimePicker
+				v-model='time'
+				v-bind='timePickerProps'
+				:disabled='props.disabled'
+				:readonly='props.readonly'
+				:with-seconds
+				:clearable
+			/>
+		</PopoverDropdown>
+	</Popover>
 </template>
 
 <style lang="postcss" module>
-.list {
-	display: flex;
-	flex-wrap: wrap;
-	gap: .25rem;
-}
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: .25rem;
+}
 </style>

package/dist/runtime/components/date-time-picker.vue.d.ts

@@ -10,8 +10,11 @@ import type { TimePickerProps } from './time-picker/time-picker.vue.js';
 export interface DatePickerProps extends ButtonInputProps, Pick<TimePickerProps, 'withSeconds'> {
     /** Tempo format for date value @default `DD.MM.YYYY HH:mm` */
     format?: Format;
+    /** Props forwarded to the inner `Calendar` */
     calendarProps?: Partial<Omit<CalendarProps, 'numberOfMonths' | 'mode'>>;
+    /** Props forwarded to the inner `TimePicker` */
     timePickerProps?: Omit<Partial<TimePickerProps>, 'withSeconds' | 'name'>;
+    /** Shows a button to clear the value @default `false` */
     clearable?: boolean;
 }
 type __VLS_Props = DatePickerProps;

package/dist/runtime/components/dialog/index.d.ts

@@ -1,5 +1,5 @@
 export { useDialogState } from './lib.js';
-export type * from './model';
+export type * from './types';
 export type * from './ui/dialog-header.vue';
 export type * from './ui/dialog-root.vue';
 export type * from './ui/dialog-title.vue';

package/dist/runtime/components/dialog/lib.js

@@ -1,4 +1,4 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createStrictInjection } from "@nui/composables";
 const injectionKey = Symbol("DrawerState");
 const [useProvide, useState] = createStrictInjection((close) => close, {
   injectionKey,

package/dist/runtime/components/dialog/ui/dialog-close-button.vue

@@ -17,15 +17,15 @@ const close = useDialogState();
 </script>
 
 <template>
-	<ClientOnly>
-		<ActionIcon
-			:icon
-			:variant
-			tabindex='0'
-			v-bind='props'
-			@click='close'
-		>
-			<slot />
-		</ActionIcon>
-	</ClientOnly>
+	<ClientOnly>
+		<ActionIcon
+			:icon
+			:variant
+			tabindex='0'
+			v-bind='props'
+			@click='close'
+		>
+			<slot />
+		</ActionIcon>
+	</ClientOnly>
 </template>

package/dist/runtime/components/dialog/ui/dialog-header.vue

@@ -8,9 +8,9 @@ const { is = "header", mod } = defineProps({
 </script>
 
 <template>
-	<ClientOnly>
-		<Box :is :mod :class='css.header'>
-			<slot />
-		</Box>
-	</ClientOnly>
+	<ClientOnly>
+		<Box :is :mod :class='css.header'>
+			<slot />
+		</Box>
+	</ClientOnly>
 </template>

package/dist/runtime/components/dialog/ui/dialog-root.d.vue.ts

@@ -1,8 +1,8 @@
 import type { NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
 import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
-import type { TransitionName } from '../../transition/index.js';
-import type { DialogModel } from '../model.js';
+import type { TransitionName } from '../../transition.vue.js';
+import type { DialogModel } from '../types.js';
 export interface DialogRootProps extends BoxProps {
     /** If set, the dialog is closed when user clicks on the overlay @default `true` */
     closeOnClickOutside?: boolean;
@@ -24,6 +24,7 @@ export interface DialogRootProps extends BoxProps {
     padding?: NuanceSpacing;
     /** Passes a class to root element */
     rootClass?: string;
+    /** Animation on hide/show */
     transition?: TransitionName;
     /** Portal target to render element @default 'body' */
     portalTarget?: string | RendererElement | null;

package/dist/runtime/components/dialog/ui/dialog-root.vue

@@ -3,7 +3,7 @@ import { getRadius, getShadow, getSize, getSpacing, rem } from "@nui/utils";
 import { onClickOutside, unrefElement } from "@vueuse/core";
 import { computed, shallowRef, watch } from "vue";
 import Box from "../../box.vue";
-import NTransition from "../../transition/transition.vue";
+import NTransition from "../../transition.vue";
 import { useProvideDialogState } from "../lib";
 import css from "./dialog.module.css";
 defineOptions({ inheritAttrs: false });

package/dist/runtime/components/dialog/ui/dialog-root.vue.d.ts

@@ -1,8 +1,8 @@
 import type { NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
 import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
-import type { TransitionName } from '../../transition/index.js';
-import type { DialogModel } from '../model.js';
+import type { TransitionName } from '../../transition.vue.js';
+import type { DialogModel } from '../types.js';
 export interface DialogRootProps extends BoxProps {
     /** If set, the dialog is closed when user clicks on the overlay @default `true` */
     closeOnClickOutside?: boolean;
@@ -24,6 +24,7 @@ export interface DialogRootProps extends BoxProps {
     padding?: NuanceSpacing;
     /** Passes a class to root element */
     rootClass?: string;
+    /** Animation on hide/show */
     transition?: TransitionName;
     /** Portal target to render element @default 'body' */
     portalTarget?: string | RendererElement | null;

package/dist/runtime/components/dialog/ui/dialog-title.vue

@@ -20,9 +20,9 @@ const { size = "md", lh = "1", ...props } = defineProps({
 </script>
 
 <template>
-	<ClientOnly>
-		<Title :class='css.title' :lh :size v-bind='props'>
-			<slot />
-		</Title>
-	</ClientOnly>
+	<ClientOnly>
+		<Title :class='css.title' :lh :size v-bind='props'>
+			<slot />
+		</Title>
+	</ClientOnly>
 </template>

package/dist/runtime/components/drawer/drawer-close-button.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogCloseButton v-bind='props'>
-		<slot />
-	</DialogCloseButton>
+	<DialogCloseButton v-bind='props'>
+		<slot />
+	</DialogCloseButton>
 </template>

package/dist/runtime/components/drawer/drawer-header.vue

@@ -7,7 +7,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogHeader v-bind='props'>
-		<slot />
-	</DialogHeader>
+	<DialogHeader v-bind='props'>
+		<slot />
+	</DialogHeader>
 </template>

package/dist/runtime/components/drawer/drawer-root.vue

@@ -41,19 +41,19 @@ const transition = computed(() => {
 </script>
 
 <template>
-	<DialogRoot
-		v-model:open='opened'
-		:mod='[{ position }, mod]'
-		:root-class='css.root'
-		:class='css.content'
-		:within-portal
-		:without-overlay
-		:close-on-click-outside
-		:transition
-		v-bind='rest'
-		@open='$emit("open")'
-		@close='$emit("close")'
-	>
-		<slot />
-	</DialogRoot>
+	<DialogRoot
+		v-model:open='opened'
+		:mod='[{ position }, mod]'
+		:root-class='css.root'
+		:class='css.content'
+		:within-portal
+		:without-overlay
+		:close-on-click-outside
+		:transition
+		v-bind='rest'
+		@open='$emit("open")'
+		@close='$emit("close")'
+	>
+		<slot />
+	</DialogRoot>
 </template>

package/dist/runtime/components/drawer/drawer-title.vue

@@ -19,7 +19,7 @@ const props = defineProps({
 </script>
 
 <template>
-	<DialogTitle v-bind='props'>
-		<slot />
-	</DialogTitle>
+	<DialogTitle v-bind='props'>
+		<slot />
+	</DialogTitle>
 </template>