nuance-ui 0.2.6 → 0.2.7

package/dist/runtime/components/text.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getFontSize, getGradient, getLineHeight, getThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import Box from "./box.vue";

package/dist/runtime/components/time-picker/index.d.ts

@@ -2,5 +2,5 @@ export * from './lib/clamp-time.js';
 export * from './lib/get-time-string.js';
 export * from './lib/pad-time.js';
 export * from './lib/split-time-string.js';
-export * from './model.js';
 export type * from './time-picker.vue';
+export * from './types.js';

package/dist/runtime/components/time-picker/index.js

@@ -2,4 +2,4 @@ export * from "./lib/clamp-time.js";
 export * from "./lib/get-time-string.js";
 export * from "./lib/pad-time.js";
 export * from "./lib/split-time-string.js";
-export * from "./model.js";
+export * from "./types.js";

package/dist/runtime/components/time-picker/lib/get-parsed-time.d.ts

@@ -1,4 +1,4 @@
-import type { TimePickerAmPmLabels, TimePickerFormat } from '../model.js';
+import type { TimePickerAmPmLabels, TimePickerFormat } from '../types.js';
 export declare function getParsedTime({ time, format, amPmLabels }: {
     time: string;
     format: TimePickerFormat;

package/dist/runtime/components/time-picker/lib/get-time-string.d.ts

@@ -1,4 +1,4 @@
-import type { TimePickerAmPmLabels, TimePickerFormat } from '../model.js';
+import type { TimePickerAmPmLabels, TimePickerFormat } from '../types.js';
 export declare function getTimeString({ hours, minutes, seconds, format, withSeconds, amPm, amPmLabels, }: {
     hours: number | null;
     minutes: number | null;

package/dist/runtime/components/time-picker/lib/use-time-picker.d.ts

@@ -1,5 +1,5 @@
 import type { ModelRef } from 'vue';
-import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from '../model.js';
+import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from '../types.js';
 type TimeField = 'hours' | 'minutes' | 'seconds' | 'amPm';
 export declare function useTimePicker({ model, format, amPmLabels, withSeconds, min, max, pasteSplit, }: {
     model: ModelRef<string | undefined>;

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

@@ -1,7 +1,7 @@
 import type { Classes } from '@nui/types';
 import type { InputBaseProps } from '../input/index.js';
 import type { InputWrapperProps } from '../input/ui/input-wrapper.vue.js';
-import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from './model.js';
+import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from './types.js';
 /**
  * - presets
  * - dropdown select
@@ -18,23 +18,23 @@ interface FieldStep {
     seconds?: number;
 }
 interface FieldPlaceholder {
-    /** Hours input placeholder, @default `--` */
+    /** Hours input placeholder @default `--` */
     hours?: string;
-    /** Minutes input placeholder, @default `--` */
+    /** Minutes input placeholder @default `--` */
     minutes?: string;
-    /** Seconds input placeholder, @default `--` */
+    /** Seconds input placeholder @default `--` */
     seconds?: string;
 }
 export interface TimePickerProps extends InputWrapperProps, InputBaseProps {
     /** Determines whether the clear button should be displayed @default `false` */
     clearable?: boolean;
-    /** `name` prop passed down to the hidden input */
+    /** Input name */
     name?: string;
     /** Min possible time value in `hh:mm:ss` format @default `00:00:00` */
     min?: string;
     /** Max possible time value in `hh:mm:ss` format @default `23:59:59` */
     max?: string;
-    /** Time format, @default `24h` */
+    /** Time format @default `24h` */
     format?: TimePickerFormat;
     /** Number by which fields are incremented/decremented @default `1` */
     step?: number | FieldStep;
@@ -52,8 +52,9 @@ export interface TimePickerProps extends InputWrapperProps, InputBaseProps {
     amPmInputLabel?: string;
     /** Labels used for am/pm values @default `{ am: 'AM', pm: 'PM' }` @todo @deprecated */
     amPmLabels?: TimePickerAmPmLabels;
-    /** A function to transform pasted values, by default time in 24h format can be parsed on paste for example `23:34:22` */
+    /** Transform pasted values; by default parses 24h format like `23:34:22` */
     pasteSplit?: TimePickerPasteSplit;
+    /** Styles API */
     classes?: Classes<'root' | 'input' | 'section' | 'field'>;
 }
 type __VLS_Props = TimePickerProps;

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

@@ -80,240 +80,240 @@ const isClearable = computed(() => clearable && !readonly && !disabled && (hours
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :right-section-p-e :class='classes?.root'>
-		<InputBase
+	<InputWrapper v-bind='props' :right-section-p-e :class='classes?.root'>
+		<InputBase
 			:classes='{
   root: classes?.input,
   section: classes?.section
-}'
-			@click='!disabled && !readonly && focus("hours")'
-		>
-			<template #default='{ id, css }'>
-				<div :class='css'>
-					<div :class='$style.root' dir='ltr'>
-						<div :class='$style.group'>
-							<!-- Hours -->
-							<SpinInput
-								ref='hoursRef'
-								v-model='hours'
-								:min='0'
-								:max='23'
-								:step='typeof step === "object" ? step?.hours ?? 1 : step'
-								:placeholder='typeof placeholder === "object" ? placeholder?.hours : placeholder'
-								:class='classes?.field'
-								:aria-label='hoursInputLabel'
-								:readonly
-								:disabled
-								@next='focus("minutes")'
-							/>
-							<span>:</span>
-							<!-- Minutes -->
-							<SpinInput
-								ref='minutesRef'
-								v-model='minutes'
-								:min='0'
-								:max='59'
-								:step='typeof step === "object" ? step?.minutes ?? 1 : step'
-								:placeholder='typeof placeholder === "object" ? placeholder?.minutes : placeholder'
-								:class='classes?.field'
-								:aria-label='minutesInputLabel'
-								:readonly
-								:disabled
-								@next='focus("seconds")'
-								@prev='focus("hours")'
-							/>
-							<template v-if='withSeconds'>
-								<span>:</span>
-								<!-- Seconds -->
-								<SpinInput
-									v-if='withSeconds'
-									ref='secondsRef'
-									v-model='seconds'
-									:min='0'
-									:max='59'
-									:step='typeof step === "object" ? step?.seconds ?? 1 : step'
-									:placeholder='typeof placeholder === "object" ? placeholder?.seconds : placeholder'
-									:aria-label='secondsInputLabel'
-									:class='classes?.field'
-									:readonly
-									:disabled
-									@prev='focus("minutes")'
-								/>
-							</template>
-						</div>
-					</div>
-				</div>
-				<input
-					:id
-					v-model='model'
-					:name
-					type='hidden'
-					:required
-					:disabled
-					:readonly
-				>
-			</template>
-
-			<template #leftSection>
-				<slot name='leftSection'>
-					<Icon name='gravity-ui:clock' />
-				</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='clear'
-					/>
-				</slot>
-			</template>
-		</InputBase>
-
-		<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>
-	</InputWrapper>
+}'
+			@click='!disabled && !readonly && focus("hours")'
+		>
+			<template #default='{ id, css }'>
+				<div :class='css'>
+					<div :class='$style.root' dir='ltr'>
+						<div :class='$style.group'>
+							<!-- Hours -->
+							<SpinInput
+								ref='hoursRef'
+								v-model='hours'
+								:min='0'
+								:max='23'
+								:step='typeof step === "object" ? step?.hours ?? 1 : step'
+								:placeholder='typeof placeholder === "object" ? placeholder?.hours : placeholder'
+								:class='classes?.field'
+								:aria-label='hoursInputLabel'
+								:readonly
+								:disabled
+								@next='focus("minutes")'
+							/>
+							<span>:</span>
+							<!-- Minutes -->
+							<SpinInput
+								ref='minutesRef'
+								v-model='minutes'
+								:min='0'
+								:max='59'
+								:step='typeof step === "object" ? step?.minutes ?? 1 : step'
+								:placeholder='typeof placeholder === "object" ? placeholder?.minutes : placeholder'
+								:class='classes?.field'
+								:aria-label='minutesInputLabel'
+								:readonly
+								:disabled
+								@next='focus("seconds")'
+								@prev='focus("hours")'
+							/>
+							<template v-if='withSeconds'>
+								<span>:</span>
+								<!-- Seconds -->
+								<SpinInput
+									v-if='withSeconds'
+									ref='secondsRef'
+									v-model='seconds'
+									:min='0'
+									:max='59'
+									:step='typeof step === "object" ? step?.seconds ?? 1 : step'
+									:placeholder='typeof placeholder === "object" ? placeholder?.seconds : placeholder'
+									:aria-label='secondsInputLabel'
+									:class='classes?.field'
+									:readonly
+									:disabled
+									@prev='focus("minutes")'
+								/>
+							</template>
+						</div>
+					</div>
+				</div>
+				<input
+					:id
+					v-model='model'
+					:name
+					type='hidden'
+					:required
+					:disabled
+					:readonly
+				>
+			</template>
+
+			<template #leftSection>
+				<slot name='leftSection'>
+					<Icon name='gravity-ui:clock' />
+				</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='clear'
+					/>
+				</slot>
+			</template>
+		</InputBase>
+
+		<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>
+	</InputWrapper>
 </template>
 
 <style lang="postcss" module>
-.root {
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-
-	height: 100%;
-
-	@mixin where-rtl {
-		flex-direction: row-reverse;
-	}
-}
-
-.group {
-	display: flex;
-	align-items: center;
-
-	height: calc(var(--input-height) - rem(15px));
-}
-
-.controls {
-	display: flex;
-	flex-direction: column;
-}
-
-.controlsGroup {
-	display: flex;
-	gap: .25rem;
-}
-
-.dropdown {
-	padding: .25rem;
-}
-
-.control {
-	width: max-content;
-	min-width: 2.5em;
-	height: 2em;
-	border-radius: var(--radius-default);
-
-	font-size: var(--control-font-size, var(--font-size-sm));
-	text-align: center;
-
-	&:where([data-active]) {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-	}
-
-	@mixin hover {
-		&:where(:not([data-active])) {
-			color: var(--color-bright);
-
-			@mixin where-dark {
-				background-color: var(--color-dark-5);
-			}
-
-			@mixin where-light {
-				background-color: var(--color-gray-1);
-			}
-		}
-	}
-}
-
-.presetControl {
-	height: 2em;
-	padding-inline: 0.5em;
-	border-radius: var(--radius-default);
-
-	font-size: var(--control-font-size, var(--font-size-sm));
-	text-align: center;
-
-	&:where([data-active]) {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-	}
-
-	@mixin hover {
-		&:where(:not([data-active])) {
-			color: var(--color-bright);
-
-			@mixin where-dark {
-				background-color: var(--color-dark-5);
-			}
-
-			@mixin where-light {
-				background-color: var(--color-gray-1);
-			}
-		}
-	}
-}
-
-.presetsGroup {
-	&+& {
-		margin-top: var(--spacing-sm);
-	}
-}
-
-.presetsGroupLabel {
-	display: flex;
-	align-items: center;
-
-	margin-bottom: .25rem;
-	padding-inline-start: 7px;
-
-	font-size: calc(var(--control-font-size, var(--font-size-sm)) - 2px);
-	font-weight: 500;
-	color: var(--color-dimmed);
-
-	&::after {
-		content: '';
-
-		flex: 1;
-
-		width: 100%;
-		height: 1px;
-		margin-inline-start: var(--spacing-xs);
-
-		@mixin where-light {
-			background-color: var(--color-gray-2);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-4);
-		}
-	}
-}
+.root {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+
+	height: 100%;
+
+	@mixin where-rtl {
+		flex-direction: row-reverse;
+	}
+}
+
+.group {
+	display: flex;
+	align-items: center;
+
+	height: calc(var(--input-height) - rem(15px));
+}
+
+.controls {
+	display: flex;
+	flex-direction: column;
+}
+
+.controlsGroup {
+	display: flex;
+	gap: .25rem;
+}
+
+.dropdown {
+	padding: .25rem;
+}
+
+.control {
+	width: max-content;
+	min-width: 2.5em;
+	height: 2em;
+	border-radius: var(--radius-default);
+
+	font-size: var(--control-font-size, var(--font-size-sm));
+	text-align: center;
+
+	&:where([data-active]) {
+		color: var(--color-white);
+
+		background-color: var(--color-primary-filled);
+	}
+
+	@mixin hover {
+		&:where(:not([data-active])) {
+			color: var(--color-bright);
+
+			@mixin where-dark {
+				background-color: var(--color-dark-5);
+			}
+
+			@mixin where-light {
+				background-color: var(--color-gray-1);
+			}
+		}
+	}
+}
+
+.presetControl {
+	height: 2em;
+	padding-inline: 0.5em;
+	border-radius: var(--radius-default);
+
+	font-size: var(--control-font-size, var(--font-size-sm));
+	text-align: center;
+
+	&:where([data-active]) {
+		color: var(--color-white);
+
+		background-color: var(--color-primary-filled);
+	}
+
+	@mixin hover {
+		&:where(:not([data-active])) {
+			color: var(--color-bright);
+
+			@mixin where-dark {
+				background-color: var(--color-dark-5);
+			}
+
+			@mixin where-light {
+				background-color: var(--color-gray-1);
+			}
+		}
+	}
+}
+
+.presetsGroup {
+	&+& {
+		margin-top: var(--spacing-sm);
+	}
+}
+
+.presetsGroupLabel {
+	display: flex;
+	align-items: center;
+
+	margin-bottom: .25rem;
+	padding-inline-start: 7px;
+
+	font-size: calc(var(--control-font-size, var(--font-size-sm)) - 2px);
+	font-weight: 500;
+	color: var(--color-dimmed);
+
+	&::after {
+		content: '';
+
+		flex: 1;
+
+		width: 100%;
+		height: 1px;
+		margin-inline-start: var(--spacing-xs);
+
+		@mixin where-light {
+			background-color: var(--color-gray-2);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-4);
+		}
+	}
+}
 </style>

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

@@ -1,7 +1,7 @@
 import type { Classes } from '@nui/types';
 import type { InputBaseProps } from '../input/index.js';
 import type { InputWrapperProps } from '../input/ui/input-wrapper.vue.js';
-import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from './model.js';
+import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from './types.js';
 /**
  * - presets
  * - dropdown select
@@ -18,23 +18,23 @@ interface FieldStep {
     seconds?: number;
 }
 interface FieldPlaceholder {
-    /** Hours input placeholder, @default `--` */
+    /** Hours input placeholder @default `--` */
     hours?: string;
-    /** Minutes input placeholder, @default `--` */
+    /** Minutes input placeholder @default `--` */
     minutes?: string;
-    /** Seconds input placeholder, @default `--` */
+    /** Seconds input placeholder @default `--` */
     seconds?: string;
 }
 export interface TimePickerProps extends InputWrapperProps, InputBaseProps {
     /** Determines whether the clear button should be displayed @default `false` */
     clearable?: boolean;
-    /** `name` prop passed down to the hidden input */
+    /** Input name */
     name?: string;
     /** Min possible time value in `hh:mm:ss` format @default `00:00:00` */
     min?: string;
     /** Max possible time value in `hh:mm:ss` format @default `23:59:59` */
     max?: string;
-    /** Time format, @default `24h` */
+    /** Time format @default `24h` */
     format?: TimePickerFormat;
     /** Number by which fields are incremented/decremented @default `1` */
     step?: number | FieldStep;
@@ -52,8 +52,9 @@ export interface TimePickerProps extends InputWrapperProps, InputBaseProps {
     amPmInputLabel?: string;
     /** Labels used for am/pm values @default `{ am: 'AM', pm: 'PM' }` @todo @deprecated */
     amPmLabels?: TimePickerAmPmLabels;
-    /** A function to transform pasted values, by default time in 24h format can be parsed on paste for example `23:34:22` */
+    /** Transform pasted values; by default parses 24h format like `23:34:22` */
     pasteSplit?: TimePickerPasteSplit;
+    /** Styles API */
     classes?: Classes<'root' | 'input' | 'section' | 'field'>;
 }
 type __VLS_Props = TimePickerProps;

package/dist/runtime/components/time-picker/{model.d.ts → types.d.ts}

@@ -1,17 +1,30 @@
+/** Time format */
 export type TimePickerFormat = '12h' | '24h';
+/** Labels for am/pm values */
 export interface TimePickerAmPmLabels {
+    /** Label for AM */
     am: string;
+    /** Label for PM */
     pm: string;
 }
+/** Input passed to `pasteSplit` */
 export interface TimePickerPasteSplitInput {
+    /** Pasted time string */
     time: string;
+    /** Active time format */
     format: TimePickerFormat;
+    /** Active am/pm labels */
     amPmLabels: TimePickerAmPmLabels;
 }
+/** Parsed time values returned from `pasteSplit` */
 export interface TimePickerPasteSplitReturnType {
+    /** Parsed hours */
     hours: number | null;
+    /** Parsed minutes */
     minutes: number | null;
+    /** Parsed seconds */
     seconds: number | null;
+    /** Parsed am/pm value */
     amPm: string | null;
 }
 export type TimePickerPasteSplit = (input: TimePickerPasteSplitInput) => TimePickerPasteSplitReturnType;

package/dist/runtime/components/tree/_ui/tree-item.d.vue.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-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";