nuance-ui 0.2.6 → 0.2.7

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,122 +21,124 @@ 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'>
-			<slot />
-
-			<div :class='$style.wrapper'>
-				<Box is='label' v-if='label || $slots.label' :class='$style.label' :for='id' :mod='{ disabled }'>
-					<slot name='label'>
-						{{ label }}
-					</slot>
-				</Box>
-
-				<Box is='p' v-if='error' :class='$style.error' :mod='{ disabled }'>
-					<slot name='error'>
-						{{ error }}
-					</slot>
-				</Box>
-
-				<Box is='p' v-else-if='description || $slots.description' :class='$style.description' :mod='{ disabled }'>
-					<slot name='description'>
-						{{ description }}
-					</slot>
-				</Box>
-			</div>
-		</div>
-	</Box>
+	<Box :style :class='$style.root' :mod='[{ "label-position": labelPosition }, mod]'>
+		<Box :is='bodyElement' :for='bodyElement === "label" ? id : void 0' :class='$style.body'>
+			<slot />
+
+			<div :class='$style.wrapper'>
+				<Box :is='labelElement' v-if='label || $slots.label' :class='$style.label' :for='labelElement === "label" ? id : void 0' :mod='{ disabled }'>
+					<slot name='label'>
+						{{ label }}
+					</slot>
+				</Box>
+
+				<Box is='p' v-if='error' :class='$style.error' :mod='{ disabled }'>
+					<slot name='error'>
+						{{ error }}
+					</slot>
+				</Box>
+
+				<Box is='p' v-else-if='description || $slots.description' :class='$style.description' :mod='{ disabled }'>
+					<slot name='description'>
+						{{ description }}
+					</slot>
+				</Box>
+			</div>
+		</Box>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--label-lh-xs: rem(16px);
-	--label-lh-sm: rem(20px);
-	--label-lh-md: rem(24px);
-	--label-lh-lg: rem(30px);
-	--label-lh-xl: rem(36px);
-	--label-lh: var(--label-lh-sm);
-
-	--label-fz: var(--font-size-sm);
-
-	&[data-label-position='left'] {
-		--label-order: 0;
-	}
-
-	&[data-label-position='right'] {
-		--label-order: 1;
-	}
-}
-
-.body {
-	display: flex;
-	gap: var(--spacing-sm);
-}
-
-.wrapper {
-	--label-cursor: default;
-
-	cursor: var(--label-cursor);
-
-	display: inline-flex;
-	flex-direction: column;
-	gap: .25rem;
-	order: var(--label-order);
-
-	font-size: var(--label-fz);
-	line-height: var(--label-lh);
-
-	-webkit-tap-highlight-color: transparent;
-
-	fieldset:disabled &,
-	&[data-disabled] {
-		--label-cursor: not-allowed;
-	}
-
-	&:empty {
-		display: none;
-	}
-}
-
-.label {
-	cursor: var(--label-cursor);
-
-	color: inherit;
-
-	fieldset:disabled &,
-	&:where([data-disabled]) {
-		color: var(--color-gray-5);
-	}
-}
-
-.error,
-.description {
-	display: block;
-
-	margin: 0;
-	padding: 0;
-
-	line-height: 1.2;
-	overflow-wrap: break-word;
-}
-
-.description {
-	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
-	color: var(--color-dimmed);
-}
-
-.error {
-	font-size: var(--input-error-size);
-	color: var(--color-error);
-}
+.root {
+	--label-lh-xs: rem(16px);
+	--label-lh-sm: rem(20px);
+	--label-lh-md: rem(24px);
+	--label-lh-lg: rem(30px);
+	--label-lh-xl: rem(36px);
+	--label-lh: var(--label-lh-sm);
+
+	--label-fz: var(--font-size-sm);
+
+	&[data-label-position='left'] {
+		--label-order: 0;
+	}
+
+	&[data-label-position='right'] {
+		--label-order: 1;
+	}
+}
+
+.body {
+	display: flex;
+	gap: var(--spacing-sm);
+}
+
+.wrapper {
+	--label-cursor: default;
+
+	cursor: var(--label-cursor);
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: .25rem;
+	order: var(--label-order);
+
+	font-size: var(--label-fz);
+	line-height: var(--label-lh);
+
+	-webkit-tap-highlight-color: transparent;
+
+	fieldset:disabled &,
+	&[data-disabled] {
+		--label-cursor: not-allowed;
+	}
+
+	&:empty {
+		display: none;
+	}
+}
+
+.label {
+	cursor: var(--label-cursor);
+
+	color: inherit;
+
+	fieldset:disabled &,
+	&:where([data-disabled]) {
+		color: var(--color-gray-5);
+	}
+}
+
+.error,
+.description {
+	display: block;
+
+	margin: 0;
+	padding: 0;
+
+	line-height: 1.2;
+	overflow-wrap: break-word;
+}
+
+.description {
+	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
+	color: var(--color-dimmed);
+}
+
+.error {
+	font-size: var(--input-error-size);
+	color: var(--color-error);
+}
 </style>

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

@@ -12,10 +12,10 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<label :style :class='$style.root'>
-		<slot />
-		<span v-if='required' :class='$style.required'> *</span>
-	</label>
+	<label :style :class='$style.root'>
+		<slot />
+		<span v-if='required' :class='$style.required'> *</span>
+	</label>
 </template>
 
 <style module>

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

@@ -52,61 +52,61 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<div :style :class='$style.wrapper'>
-		<InputLabel
-			:data-v-hidden='!label && !$slots.label || null'
-			:for='uid'
-			:class='$style.label'
-			:size
-			:required
-		>
-			<slot name='label'>
-				{{ label }}
-			</slot>
-		</InputLabel>
-
-		<slot />
-
-		<p v-if='error' :class='$style.error'>
-			<slot name='error'>
-				{{ error }}
-			</slot>
-		</p>
-
-		<p v-else-if='description || $slots.description' :class='$style.description'>
-			<slot name='description'>
-				{{ description }}
-			</slot>
-		</p>
-	</div>
+	<div :style :class='$style.wrapper'>
+		<InputLabel
+			:data-v-hidden='!label && !$slots.label || null'
+			:for='uid'
+			:class='$style.label'
+			:size
+			:required
+		>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</InputLabel>
+
+		<slot />
+
+		<p v-if='error' :class='$style.error'>
+			<slot name='error'>
+				{{ error }}
+			</slot>
+		</p>
+
+		<p v-else-if='description || $slots.description' :class='$style.description'>
+			<slot name='description'>
+				{{ description }}
+			</slot>
+		</p>
+	</div>
 </template>
 
 <style lang="postcss" module>
-.wrapper {
-	--input-error-size: calc(var(--font-size-sm) - rem(2px));
-	--input-description-size: calc(var(--font-size-sm) - rem(2px));
-
-	line-height: var(--line-height);
-}
-
-.error,
-.description {
-	display: block;
-
-	margin: 0;
-	padding: 0;
-
-	line-height: 1.2;
-	overflow-wrap: break-word;
-}
-
-.error {
-	font-size: var(--input-error-size);
-	color: var(--color-error);
-}
-
-.description {
-	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
-	color: var(--color-dimmed);
-}
+.wrapper {
+	--input-error-size: calc(var(--font-size-sm) - rem(2px));
+	--input-description-size: calc(var(--font-size-sm) - rem(2px));
+
+	line-height: var(--line-height);
+}
+
+.error,
+.description {
+	display: block;
+
+	margin: 0;
+	padding: 0;
+
+	line-height: 1.2;
+	overflow-wrap: break-word;
+}
+
+.error {
+	font-size: var(--input-error-size);
+	color: var(--color-error);
+}
+
+.description {
+	font-size: var(--input-description-size, calc(var(--font-size-sm) - rem(2px)));
+	color: var(--color-dimmed);
+}
 </style>

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/input/ui/spin-input.vue

@@ -87,76 +87,76 @@ function handleKeyDown(event) {
 </script>
 
 <template>
-	<input
-		v-model='value'
-		type='text'
-		role='spinbutton'
-		:aria-valuemin='min'
-		:aria-valuemax='max'
-		:aria-valuenow='value === null ? 0 : value'
-		:data-empty='value === null || void 0'
-		inputMode='numeric'
-		:placeholder
-		:readonly
-		:disabled
-		:class='$style.field'
-		@keydown='handleKeyDown'
-		@focus='!readonly && !disabled && ($event?.target).select()'
-		@click.stop='!readonly && !disabled && ($event?.target).select()'
-	>
+	<input
+		v-model='value'
+		type='text'
+		role='spinbutton'
+		:aria-valuemin='min'
+		:aria-valuemax='max'
+		:aria-valuenow='value === null ? 0 : value'
+		:data-empty='value === null || void 0'
+		inputMode='numeric'
+		:placeholder
+		:readonly
+		:disabled
+		:class='$style.field'
+		@keydown='handleKeyDown'
+		@focus='!readonly && !disabled && ($event?.target).select()'
+		@click.stop='!readonly && !disabled && ($event?.target).select()'
+	>
 </template>
 
 <style lang="postcss" module>
-.field {
-	position: relative;
-
-	width: calc(2ch + 0.3em);
-	height: 100%;
-	padding-inline: 0.15em;
-	border: 0;
-	border-radius: 2px;
-
-	font-variant-numeric: tabular-nums;
-	line-height: 1;
-	color: var(--input-color);
-	text-align: center;
-	text-align-last: center;
-
-	appearance: none;
-	background-color: transparent;
-	caret-color: transparent;
-
-	&:where([data-am-pm]) {
-		width: auto;
-	}
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-	}
-
-	&::selection {
-		background-color: transparent;
-	}
-
-	&::placeholder {
-		color: inherit;
-
-		opacity: 1;
-	}
-
-	&:not(:read-only):focus {
-		color: var(--color-white);
-
-		background-color: var(--color-primary-filled);
-		outline: 0;
-
-		&::placeholder {
-			color: var(--color-white);
-		}
-	}
-
-	&:read-only:focus {
-		outline: 0;
-	}
-}
+.field {
+	position: relative;
+
+	width: calc(2ch + 0.3em);
+	height: 100%;
+	padding-inline: 0.15em;
+	border: 0;
+	border-radius: 2px;
+
+	font-variant-numeric: tabular-nums;
+	line-height: 1;
+	color: var(--input-color);
+	text-align: center;
+	text-align-last: center;
+
+	appearance: none;
+	background-color: transparent;
+	caret-color: transparent;
+
+	&:where([data-am-pm]) {
+		width: auto;
+	}
+
+	&:where(:disabled) {
+		cursor: not-allowed;
+	}
+
+	&::selection {
+		background-color: transparent;
+	}
+
+	&::placeholder {
+		color: inherit;
+
+		opacity: 1;
+	}
+
+	&:not(:read-only):focus {
+		color: var(--color-white);
+
+		background-color: var(--color-primary-filled);
+		outline: 0;
+
+		&::placeholder {
+			color: var(--color-white);
+		}
+	}
+
+	&:read-only:focus {
+		outline: 0;
+	}
+}
 </style>

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.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/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";
@@ -25,7 +25,7 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<component :is='loaders[type]' :class='$style.root' :style />
+	<component :is='loaders[type]' :class='$style.root' :style />
 </template>
 
 <style module>

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