nuance-ui 0.2.5 → 0.2.7

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

@@ -1,17 +1,17 @@
 export * from './action-icon/index.js';
 export * from './app-shell/index.js';
 export * from './avatar/index.js';
-export * from './background-image.vue.js';
-export * from './badge.vue.js';
-export * from './box.vue.js';
-export type { BreadcrumbsItem, BreadcrumbsProps } from './breadcrumbs.vue.js';
+export type * from './background-image.vue';
+export type * from './badge.vue';
+export type * from './box.vue';
+export type * from './breadcrumbs.vue';
 export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
 export * from './combobox/index.js';
-export * from './container.vue.js';
+export type * from './container.vue';
 export type * from './date-time-picker.vue';
 export * from './dialog/index.js';
 export * from './drawer/index.js';
@@ -21,17 +21,18 @@ export * from './link/index.js';
 export * from './loader/index.js';
 export * from './modal/index.js';
 export * from './nav-link/index.js';
-export * from './paper.vue.js';
+export type * from './paper.vue';
 export * from './popover/index.js';
 export * from './progress/index.js';
 export * from './roving-focus/index.js';
-export * from './select/index.js';
+export type * from './select.vue';
+export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
-export * from './text.vue.js';
-export * from './textarea.vue.js';
+export type * from './text.vue';
+export type * from './textarea.vue';
 export * from './time-picker/index.js';
-export * from './title.vue.js';
-export * from './transition/index.js';
+export type * from './title.vue';
+export type * from './transition.vue';
 export * from './tree/index.js';
 export * from './visually-hidden/index.js';

package/dist/runtime/components/index.js

@@ -1,16 +1,12 @@
 export * from "./action-icon/index.js";
 export * from "./app-shell/index.js";
 export * from "./avatar/index.js";
-export * from "./background-image.vue";
-export * from "./badge.vue";
-export * from "./box.vue";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
 export * from "./checkbox/index.js";
 export * from "./chip/index.js";
 export * from "./combobox/index.js";
-export * from "./container.vue";
 export * from "./dialog/index.js";
 export * from "./drawer/index.js";
 export * from "./files/index.js";
@@ -19,17 +15,12 @@ export * from "./link/index.js";
 export * from "./loader/index.js";
 export * from "./modal/index.js";
 export * from "./nav-link/index.js";
-export * from "./paper.vue";
 export * from "./popover/index.js";
 export * from "./progress/index.js";
 export * from "./roving-focus/index.js";
-export * from "./select/index.js";
+export * from "./switch/index.js";
 export * from "./table/index.js";
 export * from "./tabs/index.js";
-export * from "./text.vue";
-export * from "./textarea.vue";
 export * from "./time-picker/index.js";
-export * from "./title.vue";
-export * from "./transition/index.js";
 export * from "./tree/index.js";
 export * from "./visually-hidden/index.js";

package/dist/runtime/components/input/date-picker.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { format } from "@formkit/tempo";
-import { useDatesConfig } from "@nui/composals";
+import { useDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import ActionIcon from "../action-icon/action-icon.vue";
 import Badge from "../badge.vue";
@@ -93,94 +93,94 @@ const visible = computed(() => {
 </script>
 
 <template>
-	<Popover
-		:disabled='props?.disabled || props?.readonly'
-		@open='$emit("open")'
-		@close='$emit("close")'
-	>
-		<PopoverTarget>
-			<ButtonInput
-				v-bind='props'
-				v-model='model'
-				:multiline='mode === "multiple"'
-			>
-				<template #leftSection>
-					<slot name='leftSection'>
-						<Icon name='gravity-ui:calendar' />
-					</slot>
-				</template>
-				<template v-if='!!$slots.rightSection' #rightSection>
-					<slot name='rightSection' />
-				</template>
-
-				<div v-if='mode === "multiple"' :class='$style.list'>
-					<Badge
-						v-for='(date, ix) in visible'
-						:key='date'
-						variant='light'
-						color='gray'
-					>
-						{{ date }}
-
-						<template #rightSection>
-							<ActionIcon
-								icon='gravity-ui:xmark'
-								variant='subtle'
-								color='gray'
-								size='xs'
+	<Popover
+		:disabled='props?.disabled || props?.readonly'
+		@open='$emit("open")'
+		@close='$emit("close")'
+	>
+		<PopoverTarget>
+			<ButtonInput
+				v-bind='props'
+				v-model='model'
+				:multiline='mode === "multiple"'
+			>
+				<template #leftSection>
+					<slot name='leftSection'>
+						<Icon name='gravity-ui:calendar' />
+					</slot>
+				</template>
+				<template v-if='!!$slots.rightSection' #rightSection>
+					<slot name='rightSection' />
+				</template>
+
+				<div v-if='mode === "multiple"' :class='$style.list'>
+					<Badge
+						v-for='(date, ix) in visible'
+						:key='date'
+						variant='light'
+						color='gray'
+					>
+						{{ date }}
+
+						<template #rightSection>
+							<ActionIcon
+								icon='gravity-ui:xmark'
+								variant='subtle'
+								color='gray'
+								size='xs'
 								@click.stop.prevent='() => {
   model = model?.filter((_, _ix) => _ix !== ix);
-}'
-							/>
-						</template>
-					</Badge>
-				</div>
-				<template v-else>
-					{{ visible }}
-				</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>
-			</ButtonInput>
-		</PopoverTarget>
-		<PopoverDropdown>
-			<Calendar
-				v-model:value='model'
-				:mode
-				:fixed-weeks
-				:with-cell-spacing
-				:exclude-date
-				:hide-outside-dates
-				:highlight-today
-				:max-date
-				:min-date
-				:min-level
-				:max-level
-				:number-of-months
-				:prev-disabled
-				:next-disabled
-				:weekday-format
-				:with-week-numbers
-				:config
-				@prev='$emit("prev")'
-				@next='$emit("next")'
-				@select='(d) => $emit("select", d)'
-			/>
-		</PopoverDropdown>
-	</Popover>
+}'
+							/>
+						</template>
+					</Badge>
+				</div>
+				<template v-else>
+					{{ visible }}
+				</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>
+			</ButtonInput>
+		</PopoverTarget>
+		<PopoverDropdown>
+			<Calendar
+				v-model:value='model'
+				:mode
+				:fixed-weeks
+				:with-cell-spacing
+				:exclude-date
+				:hide-outside-dates
+				:highlight-today
+				:max-date
+				:min-date
+				:min-level
+				:max-level
+				:number-of-months
+				:prev-disabled
+				:next-disabled
+				:weekday-format
+				:with-week-numbers
+				:config
+				@prev='$emit("prev")'
+				@next='$emit("next")'
+				@select='(d) => $emit("select", d)'
+			/>
+		</PopoverDropdown>
+	</Popover>
 </template>
 
 <style lang="postcss" module>
-.list {
-	display: flex;
-	flex-wrap: wrap;
-	gap: .25rem;
-}
+.list {
+	display: flex;
+	flex-wrap: wrap;
+	gap: .25rem;
+}
 </style>

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

@@ -21,25 +21,25 @@ const props = defineProps({
 </script>
 
 <template>
-	<TextInput type='email' v-bind='props'>
-		<template #leftSection>
-			<slot name='leftSection'>
-				<Icon name='gravity-ui:at' />
-			</slot>
-		</template>
-
-		<template v-if='!!$slots.rightSection' #rightSection>
-			<slot name='rightSection' />
-		</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 type='email' v-bind='props'>
+		<template #leftSection>
+			<slot name='leftSection'>
+				<Icon name='gravity-ui:at' />
+			</slot>
+		</template>
+
+		<template v-if='!!$slots.rightSection' #rightSection>
+			<slot name='rightSection' />
+		</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/lib/input-wrapper.context.d.ts

@@ -1,7 +1,8 @@
 import type { NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
-import type { InputVariant } from '../types/index.js';
+import type { InputVariant } from '../types.js';
 export interface WrapperContext {
+    /** Id used to bind input and label, auto-generated if not provided */
     id?: string | null;
     required?: boolean;
     radius?: NuanceSize | string;

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

@@ -1,5 +1,5 @@
 import type { InputWrapperProps } from './index.js';
-import type { InputBaseProps } from './types/index.js';
+import type { InputBaseProps } from './types.js';
 export interface NumberInputProps extends InputBaseProps, Omit<InputWrapperProps, 'multiline' | 'resize' | 'id'> {
     /** Minimum possible value */
     min?: number;

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

@@ -47,139 +47,139 @@ function handleBlur() {
 </script>
 
 <template>
-	<InputWrapper v-bind='rest' :class='$style.root' :right-section-p-e>
-		<BaseInput>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
-			</template>
-
-			<template #default='{ id, css }'>
-				<input
-					:id
-					v-model='value'
-					:class='css'
-					:min
-					:max
-					:step
-					type='number'
-					@focus='focused = true'
-					@blur='handleBlur()'
-					@wheel.prevent='handleWheel'
-				>
-			</template>
-
-			<template v-if='!!$slots.rightSection || !hideControls' #rightSection>
-				<slot name='rightSection'>
-					<div :class='$style.controls'>
-						<UnstyledButton
-							:class='$style.control'
-							:disabled='disabled || typeof value === "number" && !Number.isNaN(max) && value >= max'
-							@click='value = clamp(value + step, min, max)'
-						>
-							<Icon name='gravity-ui:chevron-up' />
-						</UnstyledButton>
-						<UnstyledButton
-							:class='$style.control'
-							:disabled='disabled || typeof value === "number" && !Number.isNaN(min) && value <= min'
-							@click='value = clamp(value - step, min, max)'
-						>
-							<Icon name='gravity-ui:chevron-down' />
-						</UnstyledButton>
-					</div>
-				</slot>
-			</template>
-		</BaseInput>
-
-		<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='rest' :class='$style.root' :right-section-p-e>
+		<BaseInput>
+			<template v-if='!!$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<template #default='{ id, css }'>
+				<input
+					:id
+					v-model='value'
+					:class='css'
+					:min
+					:max
+					:step
+					type='number'
+					@focus='focused = true'
+					@blur='handleBlur()'
+					@wheel.prevent='handleWheel'
+				>
+			</template>
+
+			<template v-if='!!$slots.rightSection || !hideControls' #rightSection>
+				<slot name='rightSection'>
+					<div :class='$style.controls'>
+						<UnstyledButton
+							:class='$style.control'
+							:disabled='disabled || typeof value === "number" && !Number.isNaN(max) && value >= max'
+							@click='value = clamp(value + step, min, max)'
+						>
+							<Icon name='gravity-ui:chevron-up' />
+						</UnstyledButton>
+						<UnstyledButton
+							:class='$style.control'
+							:disabled='disabled || typeof value === "number" && !Number.isNaN(min) && value <= min'
+							@click='value = clamp(value - step, min, max)'
+						>
+							<Icon name='gravity-ui:chevron-down' />
+						</UnstyledButton>
+					</div>
+				</slot>
+			</template>
+		</BaseInput>
+
+		<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 lang="postcss">
-.root {
-	--ni-right-section-width-xs: rem(17px);
-	--ni-right-section-width-sm: rem(24px);
-	--ni-right-section-width-md: rem(27px);
-	--ni-right-section-width-lg: rem(31px);
-	--ni-right-section-width-xl: rem(34px);
-}
-
-.controls {
-	--ni-chevron-size-xs: rem(10px);
-	--ni-chevron-size-sm: rem(14px);
-	--ni-chevron-size-md: rem(16px);
-	--ni-chevron-size-lg: rem(18px);
-	--ni-chevron-size-xl: rem(20px);
-	--ni-chevron-size: var(--ni-chevron-size-sm);
-
-	display: flex;
-	flex-direction: column;
-
-	width: 100%;
-	max-width: calc(var(--ni-chevron-size) * 1.7);
-	height: calc(var(--input-height) - rem(2px));
-	margin-inline-start: auto;
-}
-
-.control {
-	--control-border: 1px solid var(--input-bd);
-	--control-radius: calc(var(--input-radius) - rem(1px));
-
-	cursor: pointer;
-
-	display: flex;
-
-	flex: 0 0 50%;
-	align-items: center;
-	justify-content: center;
-
-	width: 100%;
-	height: calc(var(--input-height) / 2 - rem(1px));
-	padding: 0;
-	border-inline-start: var(--control-border);
-
-	color: var(--color-text);
-
-	background-color: transparent;
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-
-		color: var(--color-disabled-text);
-
-		opacity: 0.6;
-		background-color: transparent;
-	}
-
-	.root[data-error] :where(&) {
-		color: var(--color-error);
-	}
-
-	&:where(:first-of-type) {
-		border-radius: 0;
-		border-start-end-radius: var(--control-radius);
-	}
-
-	&:last-of-type {
-		border-radius: 0;
-		border-end-end-radius: var(--control-radius);
-	}
-
-	@mixin hover {
-		@mixin where-light {
-			background-color: var(--color-gray-0);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-4);
-		}
-	}
-}
+.root {
+	--ni-right-section-width-xs: rem(17px);
+	--ni-right-section-width-sm: rem(24px);
+	--ni-right-section-width-md: rem(27px);
+	--ni-right-section-width-lg: rem(31px);
+	--ni-right-section-width-xl: rem(34px);
+}
+
+.controls {
+	--ni-chevron-size-xs: rem(10px);
+	--ni-chevron-size-sm: rem(14px);
+	--ni-chevron-size-md: rem(16px);
+	--ni-chevron-size-lg: rem(18px);
+	--ni-chevron-size-xl: rem(20px);
+	--ni-chevron-size: var(--ni-chevron-size-sm);
+
+	display: flex;
+	flex-direction: column;
+
+	width: 100%;
+	max-width: calc(var(--ni-chevron-size) * 1.7);
+	height: calc(var(--input-height) - rem(2px));
+	margin-inline-start: auto;
+}
+
+.control {
+	--control-border: 1px solid var(--input-bd);
+	--control-radius: calc(var(--input-radius) - rem(1px));
+
+	cursor: pointer;
+
+	display: flex;
+
+	flex: 0 0 50%;
+	align-items: center;
+	justify-content: center;
+
+	width: 100%;
+	height: calc(var(--input-height) / 2 - rem(1px));
+	padding: 0;
+	border-inline-start: var(--control-border);
+
+	color: var(--color-text);
+
+	background-color: transparent;
+
+	&:where(:disabled) {
+		cursor: not-allowed;
+
+		color: var(--color-disabled-text);
+
+		opacity: 0.6;
+		background-color: transparent;
+	}
+
+	.root[data-error] :where(&) {
+		color: var(--color-error);
+	}
+
+	&:where(:first-of-type) {
+		border-radius: 0;
+		border-start-end-radius: var(--control-radius);
+	}
+
+	&:last-of-type {
+		border-radius: 0;
+		border-end-end-radius: var(--control-radius);
+	}
+
+	@mixin hover {
+		@mixin where-light {
+			background-color: var(--color-gray-0);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-4);
+		}
+	}
+}
 </style>

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

@@ -1,5 +1,5 @@
 import type { InputWrapperProps } from './index.js';
-import type { InputBaseProps } from './types/index.js';
+import type { InputBaseProps } from './types.js';
 export interface NumberInputProps extends InputBaseProps, Omit<InputWrapperProps, 'multiline' | 'resize' | 'id'> {
     /** Minimum possible value */
     min?: number;