nuance-ui 0.2.5 → 0.2.7

package/dist/runtime/components/input/password-input.vue

@@ -24,32 +24,32 @@ const password = ref(true);
 </script>
 
 <template>
-	<TextInput
-		v-bind='props'
-		:type='password ? "password" : "text"'
-		right-section-p-e='all'
-	>
-		<template #rightSection>
-			<slot name='rightSection'>
-				<ActionIcon variant='subtle' @click='password = !password'>
-					<Icon v-if='password' name='gravity-ui:eye' />
-					<Icon v-else name='gravity-ui:eye-slash' />
-				</ActionIcon>
-			</slot>
-		</template>
-
-		<template v-if='!!$slots.leftSection' #leftSection>
-			<slot name='leftSection' />
-		</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>
-	</TextInput>
+	<TextInput
+		v-bind='props'
+		:type='password ? "password" : "text"'
+		right-section-p-e='all'
+	>
+		<template #rightSection>
+			<slot name='rightSection'>
+				<ActionIcon variant='subtle' @click='password = !password'>
+					<Icon v-if='password' name='gravity-ui:eye' />
+					<Icon v-else name='gravity-ui:eye-slash' />
+				</ActionIcon>
+			</slot>
+		</template>
+
+		<template v-if='!!$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
+		</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>
+	</TextInput>
 </template>

package/dist/runtime/components/input/text-input.d.vue.ts

@@ -1,11 +1,12 @@
 import type { Classes } from '@nui/types';
-import type { InputBaseProps } from './types/index.js';
+import type { InputBaseProps } from './types.js';
 import type { InputWrapperProps } from './ui/input-wrapper.vue.js';
 export interface TextInputProps extends InputWrapperProps, InputBaseProps {
     /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
     multiline?: boolean;
     /** If set, `aria-` and other accessibility attributes are added to the input @default `true` */
     withAria?: boolean;
+    /** Styles API */
     classes?: Classes<'wrapper' | 'input'>;
 }
 type __VLS_Props = TextInputProps;

package/dist/runtime/components/input/text-input.vue.d.ts

@@ -1,11 +1,12 @@
 import type { Classes } from '@nui/types';
-import type { InputBaseProps } from './types/index.js';
+import type { InputBaseProps } from './types.js';
 import type { InputWrapperProps } from './ui/input-wrapper.vue.js';
 export interface TextInputProps extends InputWrapperProps, InputBaseProps {
     /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
     multiline?: boolean;
     /** If set, `aria-` and other accessibility attributes are added to the input @default `true` */
     withAria?: boolean;
+    /** Styles API */
     classes?: Classes<'wrapper' | 'input'>;
 }
 type __VLS_Props = TextInputProps;

package/dist/runtime/components/input/ui/button-input.d.vue.ts

@@ -1,11 +1,16 @@
 import type { Classes } from '@nui/types';
-import type { InputBaseProps } from '../types/index.js';
+import type { InputBaseProps } from '../types.js';
 import type { BaseInputProps } from './input-base.vue.js';
 import type { InputWrapperProps } from './input-wrapper.vue.js';
 export interface ButtonInputProps extends InputWrapperProps, BaseInputProps, InputBaseProps {
-    /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
+    /**
+     * If set, the input can have multiple lines, for example when `component="textarea"`
+     *  @default `false`
+     */
     multiline?: boolean;
+    /** Input name */
     name?: string;
+    /** Styles API */
     classes?: Classes<'root' | 'section' | 'input'>;
 }
 type __VLS_Props = ButtonInputProps;

package/dist/runtime/components/input/ui/button-input.vue.d.ts

@@ -1,11 +1,16 @@
 import type { Classes } from '@nui/types';
-import type { InputBaseProps } from '../types/index.js';
+import type { InputBaseProps } from '../types.js';
 import type { BaseInputProps } from './input-base.vue.js';
 import type { InputWrapperProps } from './input-wrapper.vue.js';
 export interface ButtonInputProps extends InputWrapperProps, BaseInputProps, InputBaseProps {
-    /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
+    /**
+     * If set, the input can have multiple lines, for example when `component="textarea"`
+     *  @default `false`
+     */
     multiline?: boolean;
+    /** Input name */
     name?: string;
+    /** Styles API */
     classes?: Classes<'root' | 'section' | 'input'>;
 }
 type __VLS_Props = ButtonInputProps;

package/dist/runtime/components/input/ui/input-base.d.vue.ts

@@ -1,6 +1,7 @@
 import type { Classes } from '@nui/types';
 import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface BaseInputProps extends Omit<WrapperContext, 'id'> {
+    /** Styles API */
     classes?: Classes<'root' | 'section'>;
 }
 type __VLS_Slots = {

package/dist/runtime/components/input/ui/input-base.vue.d.ts

@@ -1,6 +1,7 @@
 import type { Classes } from '@nui/types';
 import type { WrapperContext } from '../lib/input-wrapper.context.js';
 export interface BaseInputProps extends Omit<WrapperContext, 'id'> {
+    /** Styles API */
     classes?: Classes<'root' | 'section'>;
 }
 type __VLS_Slots = {

package/dist/runtime/components/input/ui/input-inline.d.vue.ts

@@ -1,23 +1,30 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../box.vue.js';
 export interface InlineInputProps extends BoxProps {
+    /** Input id */
     id: string;
     label?: string;
     description?: string;
     error?: string;
+    /** Disabled input prop */
     disabled?: boolean | undefined;
+    /** Component size */
     size?: NuanceSize | string;
     labelPosition?: 'left' | 'right';
+    /** Body html element */
+    bodyElement?: keyof HTMLElementTagNameMap;
+    /** Label html element */
+    labelElement?: keyof HTMLElementTagNameMap;
 }
-declare var __VLS_8: {}, __VLS_16: {}, __VLS_24: {}, __VLS_32: {};
+declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
-    label?: (props: typeof __VLS_16) => any;
+    label?: (props: typeof __VLS_22) => any;
 } & {
-    error?: (props: typeof __VLS_24) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    description?: (props: typeof __VLS_32) => any;
+    description?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<InlineInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InlineInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/ui/input-inline.vue

@@ -10,7 +10,9 @@ const {
   description,
   error,
   label,
-  mod
+  mod,
+  bodyElement = "div",
+  labelElement = "label"
 } = defineProps({
   id: { type: String, required: true },
   label: { type: String, required: false },
@@ -19,22 +21,24 @@ const {
   disabled: { type: Boolean, required: false, skipCheck: true },
   size: { type: String, required: false },
   labelPosition: { type: String, required: false },
+  bodyElement: { type: null, required: false },
+  labelElement: { type: null, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
 const style = computed(() => ({
   "--label-fz": getFontSize(size),
-  "--label-lh": getSize(size)
+  "--label-lh": getSize(size, "label-lh")
 }));
 </script>
 
 <template>
 	<Box :style :class='$style.root' :mod='[{ "label-position": labelPosition }, mod]'>
-		<div :class='$style.body'>
+		<Box :is='bodyElement' :for='bodyElement === "label" ? id : void 0' :class='$style.body'>
 			<slot />
 
 			<div :class='$style.wrapper'>
-				<Box is='label' v-if='label || $slots.label' :class='$style.label' :for='id' :mod='{ disabled }'>
+				<Box :is='labelElement' v-if='label || $slots.label' :class='$style.label' :for='labelElement === "label" ? id : void 0' :mod='{ disabled }'>
 					<slot name='label'>
 						{{ label }}
 					</slot>
@@ -52,7 +56,7 @@ const style = computed(() => ({
 					</slot>
 				</Box>
 			</div>
-		</div>
+		</Box>
 	</Box>
 </template>
 

package/dist/runtime/components/input/ui/input-inline.vue.d.ts

@@ -1,23 +1,30 @@
 import type { NuanceSize } from '@nui/types';
 import type { BoxProps } from '../../box.vue.js';
 export interface InlineInputProps extends BoxProps {
+    /** Input id */
     id: string;
     label?: string;
     description?: string;
     error?: string;
+    /** Disabled input prop */
     disabled?: boolean | undefined;
+    /** Component size */
     size?: NuanceSize | string;
     labelPosition?: 'left' | 'right';
+    /** Body html element */
+    bodyElement?: keyof HTMLElementTagNameMap;
+    /** Label html element */
+    labelElement?: keyof HTMLElementTagNameMap;
 }
-declare var __VLS_8: {}, __VLS_16: {}, __VLS_24: {}, __VLS_32: {};
+declare var __VLS_14: {}, __VLS_22: {}, __VLS_30: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
-    label?: (props: typeof __VLS_16) => any;
+    label?: (props: typeof __VLS_22) => any;
 } & {
-    error?: (props: typeof __VLS_24) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    description?: (props: typeof __VLS_32) => any;
+    description?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<InlineInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InlineInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/ui/input-label.d.vue.ts

@@ -1,6 +1,8 @@
 import type { NuanceSize } from '@nui/types';
 export interface InputLabelProps {
+    /** Required input prop @default false */
     required?: boolean;
+    /** Component size @default 'sm' */
     size?: NuanceSize | string;
 }
 declare var __VLS_1: {};

package/dist/runtime/components/input/ui/input-label.vue.d.ts

@@ -1,6 +1,8 @@
 import type { NuanceSize } from '@nui/types';
 export interface InputLabelProps {
+    /** Required input prop @default false */
     required?: boolean;
+    /** Component size @default 'sm' */
     size?: NuanceSize | string;
 }
 declare var __VLS_1: {};

package/dist/runtime/components/input/ui/input-wrapper.d.vue.ts

@@ -3,6 +3,7 @@ export interface InputWrapperProps extends WrapperContext {
     error?: string;
     description?: string;
     label?: string;
+    /** Required input prop @default false */
     required?: boolean;
 }
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};

package/dist/runtime/components/input/ui/input-wrapper.vue.d.ts

@@ -3,6 +3,7 @@ export interface InputWrapperProps extends WrapperContext {
     error?: string;
     description?: string;
     label?: string;
+    /** Required input prop @default false */
     required?: boolean;
 }
 declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {};

package/dist/runtime/components/link/link-button.vue

@@ -36,26 +36,26 @@ const { link, rest } = pickLinkProps(props);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
-		<Button
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
+		<Button
 			v-bind='{
   ...rest,
   is: rest?.is || "a",
   href,
   rel: "rel" in linkProps ? linkProps.rel : void 0,
   target: "target" in linkProps ? linkProps.target : void 0
-}'
-			@click='navigate'
-		>
-			<template v-if='$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<slot />
-
-			<template v-if='$slots.rightSection' #rightSection>
-				<slot name='rightSection' />
-			</template>
-		</Button>
-	</NuxtLink>
+}'
+			@click='navigate'
+		>
+			<template v-if='$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<slot />
+
+			<template v-if='$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</Button>
+	</NuxtLink>
 </template>

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

@@ -1,6 +1,7 @@
 import type { NuxtLinkProps } from '#app';
 import type { TextProps } from '../text.vue.js';
 export interface LinkProps extends Omit<NuxtLinkProps, 'href' | 'custom'>, Omit<TextProps, 'is'> {
+    /** Underline the link text */
     underline?: boolean;
 }
 declare var __VLS_16: {};

package/dist/runtime/components/link/link.vue

@@ -37,22 +37,22 @@ const { link, rest: { underline, ...rest } } = pickLinkProps(props);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
-		<Text
-			is='a'
-			:class='[$style.root, { [$style.underline]: underline }]'
+	<NuxtLink v-slot='{ href, navigate, ...linkProps }' v-bind='link' custom>
+		<Text
+			is='a'
+			:class='[$style.root, { [$style.underline]: underline }]'
 			v-bind='{
   ...rest,
   ...$attrs,
   href,
   rel: "rel" in linkProps ? linkProps.rel : void 0,
   target: "target" in linkProps ? linkProps.target : void 0
-}'
-			@click='navigate'
-		>
-			<slot />
-		</Text>
-	</NuxtLink>
+}'
+			@click='navigate'
+		>
+			<slot />
+		</Text>
+	</NuxtLink>
 </template>
 
 <style module>

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

@@ -1,6 +1,7 @@
 import type { NuxtLinkProps } from '#app';
 import type { TextProps } from '../text.vue.js';
 export interface LinkProps extends Omit<NuxtLinkProps, 'href' | 'custom'>, Omit<TextProps, 'is'> {
+    /** Underline the link text */
     underline?: boolean;
 }
 declare var __VLS_16: {};

package/dist/runtime/components/loader/_loaders/bars-loader.vue

@@ -1,9 +1,9 @@
 <template>
-	<span :class='$style.root'>
-		<span :class='$style.bar' />
-		<span :class='$style.bar' />
-		<span :class='$style.bar' />
-	</span>
+	<span :class='$style.root'>
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+		<span :class='$style.bar' />
+	</span>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/dots-loader.vue

@@ -1,9 +1,9 @@
 <template>
-	<span :class='$style.root'>
-		<span :class='$style.dot' />
-		<span :class='$style.dot' />
-		<span :class='$style.dot' />
-	</span>
+	<span :class='$style.root'>
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+		<span :class='$style.dot' />
+	</span>
 </template>
 
 <style module>

package/dist/runtime/components/loader/_loaders/oval-loader.vue

@@ -1,5 +1,5 @@
 <template>
-	<span :class='$style.root' />
+	<span :class='$style.root' />
 </template>
 
 <style module>

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

@@ -1,8 +1,14 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export type LoaderType = 'bars' | 'dots' | 'oval';
 export interface LoaderProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}` | string;
+    /** Color from theme */
     color?: NuanceColor | string;
+    /**
+     * Loader animation type
+     * @default `'oval'`
+     */
     type?: LoaderType;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/loader/loader.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getSize, parseThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import BarsLoader from "./_loaders/bars-loader.vue";

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

@@ -1,8 +1,14 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export type LoaderType = 'bars' | 'dots' | 'oval';
 export interface LoaderProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}` | string;
+    /** Color from theme */
     color?: NuanceColor | string;
+    /**
+     * Loader animation type
+     * @default `'oval'`
+     */
     type?: LoaderType;
 }
 declare const __VLS_export: import("vue").DefineComponent<LoaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LoaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/modal/modal-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/modal/modal-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/modal/modal-root.vue

@@ -31,17 +31,17 @@ const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 </script>
 
 <template>
-	<DialogRoot
-		v-model:open='opened'
-		:mod='[{ centered, "full-screen": fullScreen }, mod]'
-		:root-class='css.root'
-		:within-portal
-		:close-on-click-outside
-		:without-overlay
-		v-bind='rest'
-		@open='$emit("open")'
-		@close='$emit("close")'
-	>
-		<slot />
-	</DialogRoot>
+	<DialogRoot
+		v-model:open='opened'
+		:mod='[{ centered, "full-screen": fullScreen }, mod]'
+		:root-class='css.root'
+		:within-portal
+		:close-on-click-outside
+		:without-overlay
+		v-bind='rest'
+		@open='$emit("open")'
+		@close='$emit("close")'
+	>
+		<slot />
+	</DialogRoot>
 </template>

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

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

package/dist/runtime/components/nav-link/nav-icon-link.d.vue.ts

@@ -2,14 +2,21 @@ import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+    /** Link target */
     to: NuxtLinkProps['to'];
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Shorthand for passing icon */
+    /** Icon name shorthand */
     icon?: string;
-    /** Variant for active state @default `filled` */
+    /**
+     * Variant applied in active state
+     * @default `'filled'`
+     */
     active?: ActionIconProps['variant'];
-    /** Variant for not active state @default `filled` */
+    /**
+     * Variant applied in inactive state
+     * @default `'default'`
+     */
     notActive?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};

package/dist/runtime/components/nav-link/nav-icon-link.vue

@@ -40,19 +40,19 @@ const { link, rest } = pickLinkProps(etc);
 </script>
 
 <template>
-	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
-		<ActionIcon
-			is='a'
-			v-bind='{ ...rest, ...$attrs }'
-			:href
-			:variant='isActive ? active : notActive'
-			:mod='[{ active: isActive }, mod]'
-			:aria-current="isActive ? 'page' : void 0"
-			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
-			:target='"target" in linkProps ? linkProps?.target : void 0'
-			@click='navigate'
-		>
-			<slot />
-		</ActionIcon>
-	</NuxtLink>
+	<NuxtLink v-slot='{ href, navigate, isActive, ...linkProps }' v-bind='link' custom>
+		<ActionIcon
+			is='a'
+			v-bind='{ ...rest, ...$attrs }'
+			:href
+			:variant='isActive ? active : notActive'
+			:mod='[{ active: isActive }, mod]'
+			:aria-current="isActive ? 'page' : void 0"
+			:rel='"rel" in linkProps ? linkProps?.rel : void 0'
+			:target='"target" in linkProps ? linkProps?.target : void 0'
+			@click='navigate'
+		>
+			<slot />
+		</ActionIcon>
+	</NuxtLink>
 </template>

package/dist/runtime/components/nav-link/nav-icon-link.vue.d.ts

@@ -2,14 +2,21 @@ import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+    /** Link target */
     to: NuxtLinkProps['to'];
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Shorthand for passing icon */
+    /** Icon name shorthand */
     icon?: string;
-    /** Variant for active state @default `filled` */
+    /**
+     * Variant applied in active state
+     * @default `'filled'`
+     */
     active?: ActionIconProps['variant'];
-    /** Variant for not active state @default `filled` */
+    /**
+     * Variant applied in inactive state
+     * @default `'default'`
+     */
     notActive?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};