nuance-ui 0.2.7 → 0.2.8

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.7",
+  "version": "0.2.8",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/action-icon/action-icon.d.vue.ts

@@ -18,7 +18,7 @@ export interface ActionIconProps {
     radius?: NuanceRadius;
     /** Styles API */
     classes?: Classes<'root' | 'icon'>;
-    /** Modifiers passed through to the underlying `Box` */
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: BoxProps['mod'];
     /** Icon name rendered inside the button when no default slot is provided */
     icon?: string;

package/dist/runtime/components/action-icon/action-icon.vue

@@ -47,27 +47,27 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		is='button'
-		type='button'
-		:mod='[{ loading }, mod]'
-		:style
-		:class='[css.root, classes?.root]'
-		:disabled='(!disabled ? loading : disabled) || void 0'
-	>
-		<Transition name='slide-down'>
-			<Loader
-				v-if='loading'
-				color='var(--ai-color)'
-				size='calc(var(--ai-size) * .55)'
-				:class='css.loader'
-			/>
-		</Transition>
-
-		<span :class='[css.icon, classes?.icon]'>
-			<slot>
-				<Icon v-if='icon' :name='icon' :class='css["icon-element"]' />
-			</slot>
-		</span>
-	</Box>
+	<Box
+		is='button'
+		type='button'
+		:mod='[{ loading }, mod]'
+		:style
+		:class='[css.root, classes?.root]'
+		:disabled='(!disabled ? loading : disabled) || void 0'
+	>
+		<Transition name='slide-down'>
+			<Loader
+				v-if='loading'
+				color='var(--ai-color)'
+				size='calc(var(--ai-size) * .55)'
+				:class='css.loader'
+			/>
+		</Transition>
+
+		<span :class='[css.icon, classes?.icon]'>
+			<slot>
+				<Icon v-if='icon' :name='icon' :class='css["icon-element"]' />
+			</slot>
+		</span>
+	</Box>
 </template>

package/dist/runtime/components/action-icon/action-icon.vue.d.ts

@@ -18,7 +18,7 @@ export interface ActionIconProps {
     radius?: NuanceRadius;
     /** Styles API */
     classes?: Classes<'root' | 'icon'>;
-    /** Modifiers passed through to the underlying `Box` */
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     mod?: BoxProps['mod'];
     /** Icon name rendered inside the button when no default slot is provided */
     icon?: string;

package/dist/runtime/components/box.vue

@@ -16,7 +16,7 @@ const _mod = computed(() => {
 </script>
 
 <template>
-	<component :is v-bind='_mod'>
-		<slot />
-	</component>
+	<component :is v-bind='_mod'>
+		<slot />
+	</component>
 </template>

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

@@ -28,6 +28,8 @@ export interface ButtonProps extends BoxProps {
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
     /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
+    /** Icon displayed before the label */
+    icon?: string;
     /**
      * `pointer-events` value for the right section
      * @default `'all'`
@@ -36,13 +38,13 @@ export interface ButtonProps extends BoxProps {
     /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
 }
-declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
+declare var __VLS_19: {}, __VLS_26: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_21) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    rightSection?: (props: typeof __VLS_23) => any;
+    rightSection?: (props: typeof __VLS_28) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -13,6 +13,7 @@ const {
   gradient,
   loading,
   classes,
+  icon,
   leftSectionPE = "none",
   leftSectionProps,
   rightSectionPE = "all",
@@ -31,6 +32,7 @@ const {
   classes: { type: Object, required: false },
   leftSectionPE: { type: null, required: false },
   leftSectionProps: { type: Object, required: false },
+  icon: { type: String, required: false },
   rightSectionPE: { type: null, required: false },
   rightSectionProps: { type: Object, required: false },
   is: { type: null, required: false },
@@ -67,48 +69,50 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		:is
-		type='button'
+	<Box
+		:is
+		type='button'
 		:mod='[
   {
-    "with-left-section": !!$slots?.leftSection,
+    "with-left-section": !!$slots?.leftSection || !!icon,
     "with-right-section": !!$slots?.rightSection
   },
   mod
-]'
-		:style='style.root'
-		:class='[css.root, classes?.root]'
-		:disabled='loading'
-	>
-		<Transition name='fade-down'>
-			<Loader v-show='loading' :class='css.loader' :color :size />
-		</Transition>
-
-		<span :class='[css.inner, classes?.inner]'>
-			<span
-				v-if='$slots.leftSection'
-				:class='[css.section, classes?.section]'
-				data-position='left'
-				v-bind='leftSectionProps'
-				:style='style.leftSection'
-			>
-				<slot name='leftSection' />
-			</span>
-
-			<span :class='[css.label, classes?.label]'>
-				<slot />
-			</span>
-
-			<span
-				v-if='$slots.rightSection'
-				data-position='right'
-				:class='[css.section, classes?.section]'
-				v-bind='rightSectionProps'
-				:style='style.rightSection'
-			>
-				<slot name='rightSection' />
-			</span>
-		</span>
-	</Box>
+]'
+		:style='style.root'
+		:class='[css.root, classes?.root]'
+		:disabled='loading'
+	>
+		<Transition name='fade-down'>
+			<Loader v-show='loading' :class='css.loader' :color :size />
+		</Transition>
+
+		<span :class='[css.inner, classes?.inner]'>
+			<span
+				v-if='$slots.leftSection || icon'
+				:class='[css.section, classes?.section]'
+				data-position='left'
+				v-bind='leftSectionProps'
+				:style='style.leftSection'
+			>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
+			</span>
+
+			<span :class='[css.label, classes?.label]'>
+				<slot />
+			</span>
+
+			<span
+				v-if='$slots.rightSection'
+				data-position='right'
+				:class='[css.section, classes?.section]'
+				v-bind='rightSectionProps'
+				:style='style.rightSection'
+			>
+				<slot name='rightSection' />
+			</span>
+		</span>
+	</Box>
 </template>

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

@@ -28,6 +28,8 @@ export interface ButtonProps extends BoxProps {
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
     /** Extra attributes forwarded to the left section element */
     leftSectionProps?: HTMLAttributes;
+    /** Icon displayed before the label */
+    icon?: string;
     /**
      * `pointer-events` value for the right section
      * @default `'all'`
@@ -36,13 +38,13 @@ export interface ButtonProps extends BoxProps {
     /** Extra attributes forwarded to the right section element */
     rightSectionProps?: HTMLAttributes;
 }
-declare var __VLS_19: {}, __VLS_21: {}, __VLS_23: {};
+declare var __VLS_19: {}, __VLS_26: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_19) => any;
 } & {
-    default?: (props: typeof __VLS_21) => any;
+    default?: (props: typeof __VLS_26) => any;
 } & {
-    rightSection?: (props: typeof __VLS_23) => any;
+    rightSection?: (props: typeof __VLS_28) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -3,7 +3,7 @@ import type { NuanceSize } from '@nui/types';
 import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;

package/dist/runtime/components/calendar/calendar.vue

@@ -42,86 +42,86 @@ const [calendars, nav] = useCalendarNavigation({
 </script>
 
 <template>
-	<CalendarRoot
-		v-slot='{ config }'
-		v-model:date='date'
-		v-model:select='select'
-		v-bind='props'
-		:class='$style.content'
-		@select='(select) => $emit("select", select)'
-	>
-		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
-			<CalendarHeader
-				:with-prev='ix === 0'
-				:with-next='ix === calendars.length - 1'
-				:prev-disabled='nav.isPrevDisabled'
-				:next-disabled='nav.isNextDisabled'
+	<CalendarRoot
+		v-slot='{ config }'
+		v-model:date='date'
+		v-model:select='select'
+		v-bind='props'
+		:class='$style.content'
+		@select='(select) => $emit("select", select)'
+	>
+		<section v-for='(calendar, ix) in calendars' :key='`calendar-${ix}`'>
+			<CalendarHeader
+				:with-prev='ix === 0'
+				:with-next='ix === calendars.length - 1'
+				:prev-disabled='nav.isPrevDisabled'
+				:next-disabled='nav.isNextDisabled'
 				@prev='() => {
   nav.move(-1);
   $emit("prev");
-}'
+}'
 				@next='() => {
   nav.move(1);
   $emit("next");
-}'
+}'
 				@level='() => {
   level = nav.nextLevel();
   $emit("level");
-}'
-			>
-				<slot name='level' :config>
-					{{ nav.getLevelLabel(calendar, config) }}
-				</slot>
-			</CalendarHeader>
-
-			<CalendarMonth
-				v-if='level === "month"'
-				:month='calendar'
-				:with-week-numbers='props.withWeekNumbers'
-				:with-cell-spacing='props.withCellSpacing'
-				:size
-			>
-				<template v-if='!!$slots.weekday' #weekday>
-					<slot name='weekday' />
-				</template>
-
-				<slot name='day' />
-			</CalendarMonth>
-			<CalendarYear
-				v-if='level === "year"'
-				:year='calendar'
-				:size
-				:selectable='props.minLevel === "year"'
+}'
+			>
+				<slot name='level' :config>
+					{{ nav.getLevelLabel(calendar, config) }}
+				</slot>
+			</CalendarHeader>
+
+			<CalendarMonth
+				v-if='level === "month"'
+				:month='calendar'
+				:with-week-numbers='props.withWeekNumbers'
+				:with-cell-spacing='props.withCellSpacing'
+				:size
+			>
+				<template v-if='!!$slots.weekday' #weekday>
+					<slot name='weekday' />
+				</template>
+
+				<slot name='day' />
+			</CalendarMonth>
+			<CalendarYear
+				v-if='level === "year"'
+				:year='calendar'
+				:size
+				:selectable='props.minLevel === "year"'
 				@select='(month) => {
   if (props.minLevel !== "year") {
     level = nav.prevLevel();
     date = month;
   }
-}'
-			/>
-			<CalendarDecade
-				v-if='level === "decade"'
-				:date='calendar'
-				:size
-				:selectable='props.minLevel === "decade"'
+}'
+			/>
+			<CalendarDecade
+				v-if='level === "decade"'
+				:date='calendar'
+				:size
+				:selectable='props.minLevel === "decade"'
 				@select='(year) => {
   if (props.minLevel !== "decade") {
     level = nav.prevLevel();
     date = year;
   }
-}'
-			/>
-		</section>
-	</CalendarRoot>
+}'
+			/>
+		</section>
+	</CalendarRoot>
 </template>
 
 <style lang="postcss" module>
-.content {
-	--calendar-cell-spacing: rem(1px);
-
-	display: flex;
-	gap: var(--spacing-sm);
-
-	width: fit-content;
-}
+.content {
+	--calendar-cell-spacing: rem(1px);
+
+	display: flex;
+	gap: var(--spacing-sm);
+
+	width: fit-content;
+}
 </style>

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

@@ -3,7 +3,7 @@ import type { NuanceSize } from '@nui/types';
 import type { CalendarLevel, DateSelection, SelectionMode } from './types.js';
 import type { CalendarRootProps } from './ui/core/index.js';
 export interface CalendarProps<T extends SelectionMode = 'single'> extends CalendarRootProps<T> {
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;

package/dist/runtime/components/calendar/types.d.ts

@@ -1,13 +1,14 @@
 import type { FormatOptions } from '@formkit/tempo';
 import type { CalendarHeaderEmits } from './ui/core/index.js';
-/**
- *  `@formkit/tempo` config
- */
+/** `@formkit/tempo` format options without the `date` field */
 export type CalendarSettings = Omit<FormatOptions, 'date'>;
+/** Calendar drill-down level */
 export type CalendarLevel = 'month' | 'year' | 'decade';
+/** Date selection mode */
 export type SelectionMode = 'single' | 'range' | 'week' | 'multiple';
 /** ISO string value */
 export type Selection = string | null;
+/** Selected value shape based on the selection mode */
 export type DateSelection<T extends SelectionMode = 'single'> = T extends 'single' ? Selection : T extends 'range' ? [Selection, Selection] : T extends 'week' ? [Selection, Selection] : T extends 'multiple' ? Selection[] : never;
 export interface CalendarEmits<T extends SelectionMode = 'single'> extends CalendarHeaderEmits {
     select: [date: DateSelection<T>];

package/dist/runtime/components/calendar/ui/core/calendar-header.d.vue.ts

@@ -1,12 +1,18 @@
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarHeaderProps extends BoxProps {
+    /** Icon for the previous navigation button */
     prevIcon?: string;
+    /** Icon for the next navigation button */
     nextIcon?: string;
+    /** Whether the previous button is rendered */
     withPrev?: boolean;
+    /** Whether the next button is rendered */
     withNext?: boolean;
+    /** Returns true when the next button should be disabled */
     nextDisabled?: () => boolean;
+    /** Returns true when the previous button should be disabled */
     prevDisabled?: () => boolean;
-    /** Label disabled state  */
+    /** Disables the level label button */
     disabled?: boolean;
 }
 export interface CalendarHeaderEmits {

package/dist/runtime/components/calendar/ui/core/calendar-header.vue.d.ts

@@ -1,12 +1,18 @@
 import type { BoxProps } from '../../../box.vue.js';
 export interface CalendarHeaderProps extends BoxProps {
+    /** Icon for the previous navigation button */
     prevIcon?: string;
+    /** Icon for the next navigation button */
     nextIcon?: string;
+    /** Whether the previous button is rendered */
     withPrev?: boolean;
+    /** Whether the next button is rendered */
     withNext?: boolean;
+    /** Returns true when the next button should be disabled */
     nextDisabled?: () => boolean;
+    /** Returns true when the previous button should be disabled */
     prevDisabled?: () => boolean;
-    /** Label disabled state  */
+    /** Disables the level label button */
     disabled?: boolean;
 }
 export interface CalendarHeaderEmits {

package/dist/runtime/components/calendar/ui/levels/calendar-decade.d.vue.ts

@@ -2,9 +2,11 @@ import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
 import type { CalendarCellProps } from '../core/index.js';
 export interface CalendarDecadeProps extends CalendarCellProps {
+    /** Start date of the decade */
     date: DateInput;
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
+    /** Allows selecting a year as the final value without drilling down */
     selectable?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<CalendarDecadeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/calendar/ui/levels/calendar-decade.vue.d.ts

@@ -2,9 +2,11 @@ import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
 import type { CalendarCellProps } from '../core/index.js';
 export interface CalendarDecadeProps extends CalendarCellProps {
+    /** Start date of the decade */
     date: DateInput;
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
+    /** Allows selecting a year as the final value without drilling down */
     selectable?: boolean;
 }
 declare const __VLS_export: import("vue").DefineComponent<CalendarDecadeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

package/dist/runtime/components/calendar/ui/levels/calendar-month.d.vue.ts

@@ -1,10 +1,11 @@
 import type { DateInput } from '@formkit/tempo';
 import type { NuanceSize } from '@nui/types';
 export interface CalendarMonthProps {
+    /** ISO string of the month to render */
     month: string;
     /** Detects the presence of spaces between cells. @default `true` */
     withCellSpacing?: boolean;
-    /** Controls size */
+    /** Component size */
     size?: NuanceSize | string;
     /** Determines whether week numbers should be displayed @default `false` */
     withWeekNumbers?: boolean;