nuance-ui 0.2.5 → 0.2.7

package/dist/runtime/components/tabs/tabs-list.vue

@@ -14,20 +14,20 @@ const style = computed(() => ({ "--tabs-justify": justify }));
 </script>
 
 <template>
-	<Box
-		:is
-		:style
-		:class='css.list'
-		role='tablist'
+	<Box
+		:is
+		:style
+		:class='css.list'
+		role='tablist'
 		:mod='[mod, {
   variant: ctx?.variant,
   grow,
   orientation: ctx?.orientation,
   placement: ctx?.orientation === "vertical" && ctx.placement,
   inverted: ctx?.inverted
-}]'
-		:aria-orientation='ctx?.orientation'
-	>
-		<slot />
-	</Box>
+}]'
+		:aria-orientation='ctx?.orientation'
+	>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/tabs/tabs-panel.vue

@@ -11,15 +11,15 @@ const ctx = useTabsState();
 </script>
 
 <template>
-	<Box
-		:is
-		:id='ctx?.getPanelId(value)'
-		:mod='[mod, { orientation: ctx?.orientation }]'
-		:data-active='ctx?.active.value === value'
-		:class='css.panel'
-		role='tabpanel'
-		:aria-labelledby='ctx?.getTabId(value)'
-	>
-		<slot />
-	</Box>
+	<Box
+		:is
+		:id='ctx?.getPanelId(value)'
+		:mod='[mod, { orientation: ctx?.orientation }]'
+		:data-active='ctx?.active.value === value'
+		:class='css.panel'
+		role='tabpanel'
+		:aria-labelledby='ctx?.getTabId(value)'
+	>
+		<slot />
+	</Box>
 </template>

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

@@ -1,8 +1,9 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
-import { getRadius, getSafeId, getThemeColor } from "@nui/utils";
+import { useStyleResolver } from "@nui/composables";
+import { getRadius, getThemeColor } from "@nui/utils";
+import { computed, onMounted, useId } from "vue";
 import Box from "../box.vue";
-import { useProvideTabsContext } from "../tabs/lib";
+import { getSafeId, useProvideTabsContext } from "./lib";
 import css from "./tabs.module.css";
 const {
   is,
@@ -57,17 +58,17 @@ useProvideTabsContext({
 </script>
 
 <template>
-	<Box
-		:is
-		:style
+	<Box
+		:is
+		:style
 		:mod='[mod, {
   orientation,
   inverted: orientation === "horizontal" && inverted,
   placement: orientation === "vertical" && placement,
   variant
-}]'
-		:class='css.root'
-	>
-		<slot />
-	</Box>
+}]'
+		:class='css.root'
+	>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/tabs/tabs-tab.vue

@@ -12,30 +12,30 @@ const active = computed(() => value === ctx?.active.value);
 </script>
 
 <template>
-	<UnstyledButton
-		:id='ctx?.getTabId(value)'
+	<UnstyledButton
+		:id='ctx?.getTabId(value)'
 		:mod='[mod, {
   variant: ctx?.variant,
   active,
   orientation: ctx?.orientation,
   inverted: ctx?.inverted,
   placement: ctx?.orientation === "vertical" && ctx.placement
-}]'
-		:class='css.tab'
-		role='tab'
-		:aria-selected='active'
-		:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
-		:aria-controls='ctx?.getPanelId(value)'
-		@click='ctx?.onUpdate(value)'
-	>
-		<span v-if='$slots.leftSection' :class='css.tabSection' data-position='left'>
-			<slot name='leftSection' />
-		</span>
-		<span v-if='$slots.default' :class='css.tabLabel'>
-			<slot />
-		</span>
-		<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
-			<slot name='rightSection' />
-		</span>
-	</UnstyledButton>
+}]'
+		:class='css.tab'
+		role='tab'
+		:aria-selected='active'
+		:tabindex='$attrs?.tabIndex !== void 0 ? $attrs?.tabIndex : active || ctx?.active.value === null ? 0 : -1'
+		:aria-controls='ctx?.getPanelId(value)'
+		@click='ctx?.onUpdate(value)'
+	>
+		<span v-if='$slots.leftSection' :class='css.tabSection' data-position='left'>
+			<slot name='leftSection' />
+		</span>
+		<span v-if='$slots.default' :class='css.tabLabel'>
+			<slot />
+		</span>
+		<span v-if='$slots.rightSection' :class='css.tabSection' data-position='right'>
+			<slot name='rightSection' />
+		</span>
+	</UnstyledButton>
 </template>

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";
@@ -51,74 +51,74 @@ const style = computed(() => useStyleResolver((theme) => ({
 </script>
 
 <template>
-	<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
-		<slot />
-	</Box>
+	<Box :is v-bind='rest' :mod='_mod' :class='$style.root' :style>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--text-fz: var(--font-size-sm);
-	--text-lh: var(--line-height-sm);
-	--text-color: inherit;
-	--text-fw: normal;
-	--text-gradient: none;
-	--text-line-clamp: none;
-
-	margin: 0;
-	padding: 0;
-
-	font-size: var(--text-fz);
-	font-weight: var(--text-fw);
-	line-height: var(--text-lh);
-	color: var(--text-color);
-	text-decoration: none;
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-truncate]) {
-		overflow: hidden;
-
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	&:where([data-truncate='start']) {
-		direction: rtl;
-
-		text-align: right;
-
-		@mixin where-rtl {
-			direction: ltr;
-
-			text-align: left;
-		}
-	}
-
-	&:where([data-variant='gradient']) {
-		background-image: var(--text-gradient);
-		-webkit-background-clip: text;
-		background-clip: text;
-		-webkit-text-fill-color: transparent;
-	}
-
-	&:where([data-line-clamp]) {
-		overflow: hidden;
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: var(--text-line-clamp);
-
-		text-overflow: ellipsis;
-	}
-
-	&:where([data-inherit]) {
-		font-size: inherit;
-		font-weight: inherit;
-		line-height: inherit;
-		color: inherit;
-	}
-
-	&:where([data-inline]) {
-		line-height: 1;
-	}
-}
+.root {
+	--text-fz: var(--font-size-sm);
+	--text-lh: var(--line-height-sm);
+	--text-color: inherit;
+	--text-fw: normal;
+	--text-gradient: none;
+	--text-line-clamp: none;
+
+	margin: 0;
+	padding: 0;
+
+	font-size: var(--text-fz);
+	font-weight: var(--text-fw);
+	line-height: var(--text-lh);
+	color: var(--text-color);
+	text-decoration: none;
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-truncate]) {
+		overflow: hidden;
+
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&:where([data-truncate='start']) {
+		direction: rtl;
+
+		text-align: right;
+
+		@mixin where-rtl {
+			direction: ltr;
+
+			text-align: left;
+		}
+	}
+
+	&:where([data-variant='gradient']) {
+		background-image: var(--text-gradient);
+		-webkit-background-clip: text;
+		background-clip: text;
+		-webkit-text-fill-color: transparent;
+	}
+
+	&:where([data-line-clamp]) {
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: var(--text-line-clamp);
+
+		text-overflow: ellipsis;
+	}
+
+	&:where([data-inherit]) {
+		font-size: inherit;
+		font-weight: inherit;
+		line-height: inherit;
+		color: inherit;
+	}
+
+	&:where([data-inline]) {
+		line-height: 1;
+	}
+}
 </style>

package/dist/runtime/components/textarea.vue

@@ -32,40 +32,40 @@ defineExpose({
 </script>
 
 <template>
-	<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
-		<InputBase>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<template #default='{ id, css }'>
-				<textarea
-					v-bind='{ ...$attrs, class: void 0 }'
-					:id
-					ref='input'
-					v-model='model'
-					:class='[css, $style.textarea]'
-					:required='props.required'
-					:disabled='props.required'
-					:readonly='props.readonly'
-				/>
-			</template>
-
-			<template v-if='!!$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</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>
+	<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
+		<InputBase>
+			<template v-if='!!$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<template #default='{ id, css }'>
+				<textarea
+					v-bind='{ ...$attrs, class: void 0 }'
+					:id
+					ref='input'
+					v-model='model'
+					:class='[css, $style.textarea]'
+					:required='props.required'
+					:disabled='props.required'
+					:readonly='props.readonly'
+				/>
+			</template>
+
+			<template v-if='!!$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</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 module>

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.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/title.vue

@@ -26,21 +26,21 @@ const style = computed(() => ({ "--title-text-wrap": textWrap }));
 </script>
 
 <template>
-	<Text
-		:is='`h${order}`'
-		v-bind='rest'
-		:size='size || `h${order}`'
-		:class='$style.root'
-		:style
-	>
-		<slot />
-	</Text>
+	<Text
+		:is='`h${order}`'
+		v-bind='rest'
+		:size='size || `h${order}`'
+		:class='$style.root'
+		:style
+	>
+		<slot />
+	</Text>
 </template>
 
 <style module lang="postcss">
-.root {
-	--title-text-wrap: pretty;
-
-	text-wrap: var(--title-text-wrap);
-}
+.root {
+	--title-text-wrap: pretty;
+
+	text-wrap: var(--title-text-wrap);
+}
 </style>

package/dist/runtime/components/{transition/transition.vue → transition.vue}

@@ -17,9 +17,9 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Transition :class='$style.root' :style :name @after-leave='() => emit("afterLeave")'>
-		<slot />
-	</Transition>
+	<Transition :class='$style.root' :style :name @after-leave='() => emit("afterLeave")'>
+		<slot />
+	</Transition>
 </template>
 
 <style module>

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;
 }