nuance-ui 0.2.5 → 0.2.7

package/dist/runtime/components/tree/_ui/tree-item.vue

@@ -1,12 +1,12 @@
 <script setup>
-import { useTheme } from "@nui/composals";
+import { useTheme } from "@nui/composables";
 import { getThemeColor } from "@nui/utils";
 import { computed, watch } from "vue";
 import ActionIcon from "../../action-icon/action-icon.vue";
 import Button from "../../button/button.vue";
 import Loader from "../../loader/loader.vue";
 import RovingFocusItem from "../../roving-focus/roving-focus-item.vue";
-import UTransition from "../../transition/transition.vue";
+import UTransition from "../../transition.vue";
 import { useTreeState } from "../lib/context";
 import { filterTreeItems } from "../lib/filter-tree-items";
 import { useTreeItemHandlers } from "../lib/item-handlers";
@@ -51,135 +51,136 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 </script>
 
 <template>
-	<li :class='$style.item' role='presentation'>
-		<RovingFocusItem>
-			<Button
-				:size='ctx.size'
-				:color='ctx.color'
-				:variant='ctx.variant'
-				:disabled
-				role='treeitem'
-				:classes='$style'
-				:aria-level='level'
-				:aria-selected='selected'
-				:mod='{ active, selected, "tree-item": path }'
-				right-section-p-e='all'
-				@click.prevent='handleClick'
-				@keydown.prevent='handleKeyDown'
-			>
-				<template #leftSection>
-					<template v-if='pending'>
-						<Loader :class='$style.icon' />
-					</template>
-
-					<template v-else-if='isFolder'>
-						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
-						<Icon v-else :class='$style.icon' :name='icon' />
-					</template>
-
-					<template v-else>
-						<Icon
-							:class='$style.icon'
-							:name='fileIcon'
-							:style='{ color: color && getThemeColor(color, theme) }'
-						/>
-					</template>
-				</template>
-
-				{{ name ?? path }}
-
-				<template v-if='isFolder' #rightSection>
-					<ActionIcon
-						icon='gravity-ui:chevron-down'
-						size='sm'
-						:color='ctx.color'
-						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
-						:mod='{ expanded }'
-						variant='subtle'
-						@click.stop='ctx.toggle("expand", path)'
-					/>
-				</template>
-			</Button>
-		</RovingFocusItem>
-
-		<UTransition name='scale-y'>
-			<ul
-				v-if='expanded && data && data.length > 0'
-				:class='$style.list'
-				role='group'
-			>
-				<TreeItem
-					v-for='child in data'
-					:key='child.path'
-					v-bind='child'
-					:path='child.path'
-					:level='level + 1'
-				/>
-			</ul>
-		</UTransition>
-	</li>
+	<li :class='$style.item' role='presentation'>
+		<RovingFocusItem>
+			<Button
+				:size='ctx.size'
+				:color='ctx.color'
+				:variant='ctx.variant'
+				:disabled
+				role='treeitem'
+				:classes='$style'
+				:aria-level='level'
+				:aria-selected='selected'
+				:mod='{ active, selected, "tree-item": path }'
+				right-section-p-e='all'
+				@click.prevent='handleClick'
+				@keydown.prevent='handleKeyDown'
+			>
+				<template #leftSection>
+					<template v-if='pending'>
+						<Loader :class='$style.icon' />
+					</template>
+
+					<template v-else-if='isFolder'>
+						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
+						<Icon v-else :class='$style.icon' :name='icon' />
+					</template>
+
+					<template v-else>
+						<Icon
+							:class='$style.icon'
+							:name='fileIcon'
+							:style='{ color: color && getThemeColor(color, theme) }'
+						/>
+					</template>
+				</template>
+
+				{{ name ?? path }}
+
+				<template v-if='isFolder' #rightSection>
+					<ActionIcon
+						icon='gravity-ui:chevron-down'
+						size='sm'
+						:color='ctx.color'
+						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
+						:mod='{ expanded }'
+						variant='subtle'
+						@click.stop='ctx.toggle("expand", path)'
+					/>
+				</template>
+			</Button>
+		</RovingFocusItem>
+
+		<UTransition name='scale-y'>
+			<ul
+				v-if='expanded && data && data.length > 0'
+				:class='$style.list'
+				role='group'
+			>
+				<TreeItem
+					v-for='child in data'
+					:key='child.path'
+					v-bind='child'
+					:path='child.path'
+					:level='level + 1'
+				/>
+			</ul>
+		</UTransition>
+	</li>
 </template>
 
 <style module lang="postcss">
-.item {
-	display: grid;
-	gap: .25rem;
-}
-
-.icon {
-	--loader-size: var(--tree-icon-size);
-
-	width: var(--tree-icon-size);
-	height: var(--tree-icon-size);
-}
-
-.chevron {
-	color: var(--color-dimmed);
-
-	transition: transform .3s ease-in-out;
-
-	&:hover {
-		color: var(--color-dimmed);
-
-		background-color: transparent;
-	}
-
-	&[data-expanded] .chevron-icon {
-		transform: rotate(-180deg);
-	}
-}
-
-.list {
-	display: grid;
-	gap: .25rem;
-
-	margin-inline-start: 1rem;
-
-	padding-inline-start: .75rem;
-	border-left: 1px solid var(--color-gray-4);
-}
-
-.root {
-	.inner {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-
-		color: var(--color-text);
-
-		.label {
-			font-weight: 500;
-		}
-	}
-
-	&[data-active],
-	&[data-selected] {
-		.inner {
-			color: var(--button-color);
-		}
-	}
-
-	&[data-selected] {
-		background: alpha(var(--button-color), .1);
-	}
-}
+.item {
+	display: grid;
+	gap: .25rem;
+}
+
+.icon {
+	--loader-size: var(--tree-icon-size);
+
+	width: var(--tree-icon-size);
+	height: var(--tree-icon-size);
+}
+
+.chevron {
+	color: var(--color-dimmed);
+
+	transition: transform .3s ease-in-out;
+
+	&:hover {
+		color: var(--color-dimmed);
+
+		background-color: transparent;
+	}
+
+	&[data-expanded] .chevron-icon {
+		transform: rotate(-180deg);
+	}
+}
+
+
+.list {
+	display: grid;
+	gap: .25rem;
+
+	margin-inline-start: 1rem;
+
+	padding-inline-start: .75rem;
+	border-left: 1px solid var(--color-gray-4);
+}
+
+.root {
+	.inner {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+
+		color: var(--color-text);
+
+		.label {
+			font-weight: 500;
+		}
+	}
+
+	&[data-active],
+	&[data-selected] {
+		.inner {
+			color: var(--button-color);
+		}
+	}
+
+	&[data-selected] {
+		background: alpha(var(--button-color), .1);
+	}
+}
 </style>

package/dist/runtime/components/tree/_ui/tree-item.vue.d.ts

@@ -1,4 +1,4 @@
-import type { TreeItem } from '../model.js';
+import type { TreeItem } from '../types.js';
 export interface TreeItemProps extends TreeItem {
     level: number;
 }

package/dist/runtime/components/tree/_ui/tree-root.d.vue.ts

@@ -1,6 +1,6 @@
 import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
-import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../model.js';
+import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../types.js';
 export type TreeRootProps = RovingFocusProps & {
     iconResolver?: TreeIconResolver;
     removable?: boolean;

package/dist/runtime/components/tree/_ui/tree-root.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getSize } from "@nui/utils";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 import { useTemplateRef } from "vue";
@@ -64,28 +64,28 @@ if (removable) {
 </script>
 
 <template>
-	<RovingFocus :attr :loop :orientation>
-		<Box
-			is='ul'
-			ref='parent'
-			role='tree'
-			:style
-			:class='$style.root'
-			@keydown.esc.prevent='selected = []'
-		>
-			<slot />
-		</Box>
-	</RovingFocus>
+	<RovingFocus :attr :loop :orientation>
+		<Box
+			is='ul'
+			ref='parent'
+			role='tree'
+			:style
+			:class='$style.root'
+			@keydown.esc.prevent='selected = []'
+		>
+			<slot />
+		</Box>
+	</RovingFocus>
 </template>
 
 <style module lang="postcss">
-.root {
-	--tree-icon-size: var(--spacing-md);
-
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-
-	padding-inline-start: 0;
-}
+.root {
+	--tree-icon-size: var(--spacing-md);
+
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+
+	padding-inline-start: 0;
+}
 </style>

package/dist/runtime/components/tree/_ui/tree-root.vue.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
-import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../model.js';
+import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../types.js';
 export type TreeRootProps = RovingFocusProps & {
     iconResolver?: TreeIconResolver;
     removable?: boolean;

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

@@ -1 +1 @@
-export * from './model.js';
+export * from './types.js';

package/dist/runtime/components/tree/index.js

@@ -1 +1 @@
-export * from "./model.js";
+export * from "./types.js";

package/dist/runtime/components/tree/lib/context.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonProps } from '@nui/components';
 import type { ModelRef, ShallowRef } from 'vue';
-import type { TreeFilter, TreeIconResolver, TreeLoader } from '../model.js';
+import type { TreeFilter, TreeIconResolver, TreeLoader } from '../types.js';
 type EventType = 'select' | 'expand';
 type SelectMode = 'single' | 'multiple' | 'range';
 export interface TreeContext {

package/dist/runtime/components/tree/lib/context.js

@@ -1,4 +1,4 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createStrictInjection } from "@nui/composables";
 import { unrefElement } from "@vueuse/core";
 const injectionKey = Symbol("nui-tree");
 const [useProvide, useState] = createStrictInjection(({

package/dist/runtime/components/tree/lib/filter-tree-items.d.ts

@@ -1,2 +1,2 @@
-import type { TreeFilter, TreeItem } from '../model.js';
+import type { TreeFilter, TreeItem } from '../types.js';
 export declare function filterTreeItems(items: TreeItem[] | undefined, filter?: TreeFilter): TreeItem[] | undefined;

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

@@ -1,5 +1,5 @@
 import type { TreeRootProps } from './_ui/tree-root.vue.js';
-import type { TreeModels } from './model.js';
+import type { TreeModels } from './types.js';
 export interface TreeProps extends TreeRootProps {
 }
 type __VLS_Props = TreeProps;

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

@@ -1,5 +1,5 @@
 import type { TreeRootProps } from './_ui/tree-root.vue.js';
-import type { TreeModels } from './model.js';
+import type { TreeModels } from './types.js';
 export interface TreeProps extends TreeRootProps {
 }
 type __VLS_Props = TreeProps;

package/dist/runtime/components/visually-hidden/visually-hidden-input.d.vue.ts

@@ -1,6 +1,7 @@
 import type { VisuallyHiddenProps } from './visually-hidden.vue.js';
 export interface VisuallyHiddenInputProps extends VisuallyHiddenProps {
-    name: string;
+    /** Input name */
+    name?: string;
     required?: boolean;
     disabled?: boolean;
 }

package/dist/runtime/components/visually-hidden/visually-hidden-input.vue

@@ -1,7 +1,7 @@
 <script setup>
 import VisuallyHidden from "./visually-hidden.vue";
 const props = defineProps({
-  name: { type: String, required: true },
+  name: { type: String, required: false },
   required: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   feature: { type: String, required: false },

package/dist/runtime/components/visually-hidden/visually-hidden-input.vue.d.ts

@@ -1,6 +1,7 @@
 import type { VisuallyHiddenProps } from './visually-hidden.vue.js';
 export interface VisuallyHiddenInputProps extends VisuallyHiddenProps {
-    name: string;
+    /** Input name */
+    name?: string;
     required?: boolean;
     disabled?: boolean;
 }

package/dist/runtime/components/visually-hidden/visually-hidden.vue

@@ -8,15 +8,15 @@ const { feature, ...rest } = defineProps({
 </script>
 
 <template>
-	<Box
-		:aria-hidden='feature === "focusable" ? "true" : void 0'
-		:data-hidden='feature === "fully-hidden" ? "true" : void 0'
-		:tabindex='feature === "fully-hidden" ? "-1" : void 0'
-		v-bind='rest'
-		class='root'
-	>
-		<slot />
-	</Box>
+	<Box
+		:aria-hidden='feature === "focusable" ? "true" : void 0'
+		:data-hidden='feature === "fully-hidden" ? "true" : void 0'
+		:tabindex='feature === "fully-hidden" ? "-1" : void 0'
+		v-bind='rest'
+		class='root'
+	>
+		<slot />
+	</Box>
 </template>
 
 <style scoped>

package/dist/runtime/composables/create-strict-injection.d.ts

@@ -0,0 +1,42 @@
+import type { InjectionKey } from '@vue/runtime-core';
+import type { CreateInjectionStateOptions } from '@vueuse/core';
+interface StrictInjectionOptions<Return> extends Omit<CreateInjectionStateOptions<Return>, 'injectionKey'> {
+    /** Human-readable context name embedded into the missing-provider error message. */
+    name: string;
+    /** Vue injection key used to store and read the provided state. */
+    injectionKey: InjectionKey<Return>;
+}
+type StrictInjectionReturn<Arguments extends Array<any>, Return> = Readonly<[
+    /**
+     * Provider function to be called in a parent component.
+     * Creates and provides the state to all descendant components.
+     */
+    useProvidingState: (...args: Arguments) => Return,
+    /**
+     * Consumer function to be called in a child component.
+     * Injects the state provided by the nearest parent provider.
+     *
+     * @throws {Error} When called outside of a provider context
+     */
+    useInjectedState: () => Return
+]>;
+/**
+ * Creates a strict provide/inject.
+ *
+ * Unlike Vue's standard `inject`, the returned consumer hook throws a
+ * descriptive error when called outside of a provider, so misuse surfaces
+ * immediately instead of producing silent `undefined` values downstream.
+ *
+ * @example
+ * ```ts
+ * const [useProvideComboboxState, useComboboxState] = createStrictInjection(
+ *   (state: ComboboxState) => ({
+ *     ...state,
+ *     select: (item: string) => { state.selected.value = item },
+ *   }),
+ *   { name: 'ComboboxState', injectionKey: Symbol('combobox-state') },
+ * )
+ * ```
+ */
+export declare function createStrictInjection<Arguments extends Array<any>, Return>(composable: (...args: Arguments) => Return, options: StrictInjectionOptions<Return>): StrictInjectionReturn<Arguments, Return>;
+export {};

package/dist/runtime/{composals → composables}/index.d.ts

@@ -1,4 +1,6 @@
+export * from './create-strict-injection.js';
 export * from './use-active-link.js';
 export * from './use-date-config.js';
+export * from './use-selectable-group.js';
 export * from './use-style-resolver.js';
 export * from './use-theme.js';

package/dist/runtime/{composals → composables}/index.js

@@ -1,4 +1,6 @@
+export * from "./create-strict-injection.js";
 export * from "./use-active-link.js";
 export * from "./use-date-config.js";
+export * from "./use-selectable-group.js";
 export * from "./use-style-resolver.js";
 export * from "./use-theme.js";

package/dist/runtime/composables/use-active-link.d.ts

@@ -0,0 +1,15 @@
+import type { ComputedRef } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+/**
+ * Computes whether a given route target matches the current route.
+ *
+ * By default the link is active when its resolved path equals the current
+ * path or is a prefix of it, so parent routes stay highlighted while
+ * browsing nested children.
+ *
+ * Pass `exact: true` to disable prefix matching.
+ */
+export declare function useActiveLink(href: RouteLocationRaw | undefined, options?: {
+    /** Require a strict path equality instead of prefix matching. */
+    exact?: boolean;
+}): ComputedRef<boolean>;

package/dist/runtime/{composals → composables}/use-date-config.d.ts

@@ -1,5 +1,7 @@
 import type { FormatOptions } from '@formkit/tempo';
+/** Locale configuration for date-aware features. */
 export type DateConfig = Omit<FormatOptions, 'date' | 'format'> & {
+    /** Index of the first day of the week (0 = Sunday, 1 = Monday, ...). */
     firstDayOfWeek: number;
 };
 declare const Inject: () => {
@@ -10,8 +12,11 @@ declare const Inject: () => {
     partFilter?: (part: import("@formkit/tempo").Part) => boolean;
 } | undefined;
 /**
- * Hook to provide the dates configuration in a root or parent component.
- * Necessary for initializing the configuration that will be used by child components.
+ * Provides the shared date configuration to the component subtree.
+ *
+ * Call once in a root or layout component.
+ *
+ * When `firstDayOfWeek` is omitted, it is resolved from the locale.
  */
 export declare const useProvideDatesConfig: (state?: Partial<DateConfig> | undefined) => {
     firstDayOfWeek: number;
@@ -21,10 +26,10 @@ export declare const useProvideDatesConfig: (state?: Partial<DateConfig> | undef
     partFilter?: (part: import("@formkit/tempo").Part) => boolean;
 };
 /**
- * Hook to inject the dates configuration in a component.
- * Used in components that depend on the dates configuration.
+ * Reads the shared date configuration provided by `useProvideDatesConfig`.
  *
- * @param localValue merges new values with ctx with `defu`
+ * A local override can be passed in and will be shallow-merged on top of the
+ * injected config.
  */
 export declare function useDatesConfig(localValue?: ReturnType<typeof Inject>): {
     firstDayOfWeek: number;

package/dist/runtime/composables/use-selectable-group.d.ts

@@ -0,0 +1,23 @@
+import type { ModelRef } from 'vue';
+export interface UseSelectableGroupOptions {
+    /** When `true`, the value cannot be changed. */
+    readOnly?: boolean;
+    /** When `true`, all items in the group are disabled. */
+    disabled?: boolean;
+    /** Maximum number of items that can be selected. When reached, unselected items become disabled. */
+    maxSelectedValues?: number;
+}
+export interface UseSelectableGroupReturn<T> {
+    /** Toggles the given value in the selection array. */
+    update: (value: T) => void;
+    /** Returns `true` when the value is currently selected. */
+    isSelected: (value: T) => boolean;
+    /** Returns `true` when an item with the given value should be disabled. */
+    isDisabled: (value: T) => boolean;
+}
+/**
+ * Shared selection logic for multi-select group components.
+ *
+ * Centralizes the add/remove, max-limit and read-only rules.
+ */
+export declare function useSelectableGroup<T extends string = string>(value: ModelRef<T[]>, options?: UseSelectableGroupOptions): UseSelectableGroupReturn<T>;

package/dist/runtime/composables/use-selectable-group.js

@@ -0,0 +1,20 @@
+export function useSelectableGroup(value, options = {}) {
+  const isSelected = (item) => value.value.includes(item);
+  const update = (item) => {
+    if (options.readOnly)
+      return;
+    const selected = isSelected(item);
+    if (!selected && options.maxSelectedValues !== void 0 && value.value.length >= options.maxSelectedValues) {
+      return;
+    }
+    value.value = selected ? value.value.filter((i) => i !== item) : [...value.value, item];
+  };
+  const isDisabled = (item) => {
+    if (options.disabled)
+      return true;
+    if (options.maxSelectedValues === void 0)
+      return false;
+    return !isSelected(item) && value.value.length >= options.maxSelectedValues;
+  };
+  return { update, isSelected, isDisabled };
+}

package/dist/runtime/{composals → composables}/use-style-resolver.d.ts

@@ -1,3 +1,6 @@
 import type { NuanceTheme } from '@nui/types';
 import type { CSSProperties } from 'vue';
+/**
+ * Builds a style object from a factory that receives the current theme.
+ */
 export declare function useStyleResolver<T extends CSSProperties>(factory: (theme: NuanceTheme) => T): T;

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

@@ -0,0 +1,16 @@
+import type { NuanceTheme } from '@nui/types';
+interface ThemeInstance {
+    /** User-selected theme preference, including `system`. Writable. */
+    preference: NuanceTheme;
+    /** Resolved theme currently applied to the document. */
+    readonly value: NuanceTheme;
+    /** `true` while the theme has not yet been determined on the client. */
+    unknown: boolean;
+    /** `true` when the theme is forced by the application and cannot be changed by the user. */
+    forced: boolean;
+}
+/**
+ * Returns the current Nuance theme instance
+ */
+export declare function useTheme(): ThemeInstance;
+export {};

package/dist/runtime/modals/_confirm-modal/confirm-modal.d.vue.ts

@@ -1,5 +1,5 @@
+import type { MaybePromise } from '@nui/types';
 import type { ButtonProps, ModalRootProps } from '../../components/index.js';
-import type { MaybePromise } from '../../types/index.js';
 type ConfirmLabels = Record<'confirm' | 'cancel', string>;
 export interface ConfirmModalProps extends /* @vue-ignore */ ModalRootProps {
     /** Modal title */