nuance-ui 0.2.5 → 0.2.7

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

@@ -26,102 +26,102 @@ defineEmits(["prev", "level", "next"]);
 </script>
 
 <template>
-	<Box :is v-bind='props' :class='$style.header'>
-		<UnstyledButton
-			v-if='withPrev'
-			aria-label='Previous page'
-			:disabled='prevDisabled?.()'
-			:class='$style.control'
-			@click='$emit("prev")'
-		>
-			<Icon :name='prevIcon' :class='$style.icon' />
-		</UnstyledButton>
-
-		<UnstyledButton
-			:disabled
-			:class='$style.level'
-			@click='$emit("level")'
-		>
-			<slot />
-		</UnstyledButton>
-
-		<UnstyledButton
-			v-if='withNext'
-			aria-label='Next page'
-			:disabled='nextDisabled?.()'
-			:class='$style.control'
-			@click='$emit("next")'
-		>
-			<Icon :name='nextIcon' :class='$style.icon' />
-		</UnstyledButton>
-	</Box>
+	<Box :is v-bind='props' :class='$style.header'>
+		<UnstyledButton
+			v-if='withPrev'
+			aria-label='Previous page'
+			:disabled='prevDisabled?.()'
+			:class='$style.control'
+			@click='$emit("prev")'
+		>
+			<Icon :name='prevIcon' :class='$style.icon' />
+		</UnstyledButton>
+
+		<UnstyledButton
+			:disabled
+			:class='$style.level'
+			@click='$emit("level")'
+		>
+			<slot />
+		</UnstyledButton>
+
+		<UnstyledButton
+			v-if='withNext'
+			aria-label='Next page'
+			:disabled='nextDisabled?.()'
+			:class='$style.control'
+			@click='$emit("next")'
+		>
+			<Icon :name='nextIcon' :class='$style.icon' />
+		</UnstyledButton>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.header {
-	--dch-control-size-xs: rem(30px);
-	--dch-control-size-sm: rem(36px);
-	--dch-control-size-md: rem(42px);
-	--dch-control-size-lg: rem(48px);
-	--dch-control-size-xl: rem(54px);
-	--dch-control-size: var(--dch-control-size-sm);
-
-	--dch-control-radius: var(--radius-default);
-
-	display: flex;
-}
-
-.level,
-.control {
-	cursor: pointer;
-	user-select: none;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	height: var(--dch-control-size);
-	border-radius: var(--dch-control-radius);
-
-	opacity: 1;
-
-	&:where([data-static]) {
-		cursor: default;
-	}
-
-	&:hover {
-		&:where(:not([data-static], :disabled)) {
-			@mixin light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	&:where(:disabled) {
-		cursor: not-allowed;
-
-		opacity: 0.2;
-	}
-}
-
-.level {
-	flex: 1;
-
-	font-size: var(--dch-fz, var(--font-size-sm));
-	font-weight: 500;
-	text-transform: capitalize;
-}
-
-.control {
-	width: var(--dch-control-size);
-}
-
-.icon {
-	width: 60%;
-	height: 60%;
-}
+.header {
+	--dch-control-size-xs: rem(30px);
+	--dch-control-size-sm: rem(36px);
+	--dch-control-size-md: rem(42px);
+	--dch-control-size-lg: rem(48px);
+	--dch-control-size-xl: rem(54px);
+	--dch-control-size: var(--dch-control-size-sm);
+
+	--dch-control-radius: var(--radius-default);
+
+	display: flex;
+}
+
+.level,
+.control {
+	cursor: pointer;
+	user-select: none;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: var(--dch-control-size);
+	border-radius: var(--dch-control-radius);
+
+	opacity: 1;
+
+	&:where([data-static]) {
+		cursor: default;
+	}
+
+	&:hover {
+		&:where(:not([data-static], :disabled)) {
+			@mixin light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	&:where(:disabled) {
+		cursor: not-allowed;
+
+		opacity: 0.2;
+	}
+}
+
+.level {
+	flex: 1;
+
+	font-size: var(--dch-fz, var(--font-size-sm));
+	font-weight: 500;
+	text-transform: capitalize;
+}
+
+.control {
+	width: var(--dch-control-size);
+}
+
+.icon {
+	width: 60%;
+	height: 60%;
+}
 </style>

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

@@ -1,7 +1,7 @@
 import type { DateInput, FormatToken } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
-import type { DateSelection, SelectionMode } from '../../model.js';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
+import type { DateSelection, SelectionMode } from '../../types.js';
 export interface CalendarRootProps<T extends SelectionMode> {
     /** Selection mode @default 'single' */
     mode?: T;

package/dist/runtime/components/calendar/ui/core/calendar-root.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { range } from "@formkit/tempo";
-import { useDatesConfig } from "@nui/composals";
+import { useDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import Box from "../../../box.vue";
 import { useProvideCalendarState } from "../../lib/context";
@@ -73,7 +73,7 @@ useCalendarSelection({
 </script>
 
 <template>
-	<Box>
-		<slot :config />
-	</Box>
+	<Box>
+		<slot :config />
+	</Box>
 </template>

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

@@ -1,7 +1,7 @@
 import type { DateInput, FormatToken } from '@formkit/tempo';
-import type { DateConfig } from '@nui/composals';
-import type { DateMatcher } from '@nui/helpers/date';
-import type { DateSelection, SelectionMode } from '../../model.js';
+import type { DateConfig } from '@nui/composables';
+import type { DateMatcher } from '@nui/utils';
+import type { DateSelection, SelectionMode } from '../../types.js';
 export interface CalendarRootProps<T extends SelectionMode> {
     /** Selection mode @default 'single' */
     mode?: T;

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

@@ -53,53 +53,53 @@ function handleSelect(year) {
 </script>
 
 <template>
-	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
-		<tbody>
-			<tr v-for='(years, yearsIx) in yearList' :key='`decade-${yearsIx}`'>
-				<td v-for='year in years' :key='year'>
-					<CalendarCell
-						:class='$style.year'
+	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
+		<tbody>
+			<tr v-for='(years, yearsIx) in yearList' :key='`decade-${yearsIx}`'>
+				<td v-for='year in years' :key='year'>
+					<CalendarCell
+						:class='$style.year'
 						:mod='{
   "today": isToday(year),
   "selected": isSelected(year),
   "in-range": isInRange(year),
   "first-in-range": isFirstInRange(year),
   "last-in-range": isLastInRange(year)
-}'
-						:disabled='isDisabled(year)'
-						:size
-						@click='handleSelect(year)'
-					>
-						{{ year }}
-					</CalendarCell>
-				</td>
-			</tr>
-		</tbody>
-	</Box>
+}'
+						:disabled='isDisabled(year)'
+						:size
+						@click='handleSelect(year)'
+					>
+						{{ year }}
+					</CalendarCell>
+				</td>
+			</tr>
+		</tbody>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.table {
-	table-layout: fixed;
-}
-
-.year {
-	--day-size-xs: 1.875rem;
-	--day-size-sm: 2.25rem;
-	--day-size-md: 2.625rem;
-	--day-size-lg: 3rem;
-	--day-size-xl: 3.375rem;
-
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: calc((var(--day-size) * 7) / 3 + .09375rem);
-
-	height: var(--day-size);
-
-	text-transform: capitalize;
-}
+.table {
+	table-layout: fixed;
+}
+
+.year {
+	--day-size-xs: 1.875rem;
+	--day-size-sm: 2.25rem;
+	--day-size-md: 2.625rem;
+	--day-size-lg: 3rem;
+	--day-size-xl: 3.375rem;
+
+	cursor: pointer;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: calc((var(--day-size) * 7) / 3 + .09375rem);
+
+	height: var(--day-size);
+
+	text-transform: capitalize;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { isAfter, isBefore, sameDay } from "@formkit/tempo";
-import { createMonth, getWeekNumber, isSameMonth, isWeekend as isWeekendDay } from "@nui/helpers/date";
+import { createMonth, getWeekNumber, isSameMonth, isWeekend as isWeekendDay } from "@nui/utils";
 import { shallowRef, watch } from "vue";
 import Box from "../../../box.vue";
 import { useCalendarState } from "../../lib/context";

package/dist/runtime/components/calendar/ui/levels/calendar-year.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { date, isAfter, isBefore, range } from "@formkit/tempo";
-import { isSameMonth } from "@nui/helpers/date";
+import { isSameMonth } from "@nui/utils";
 import { chunk } from "es-toolkit";
 import { computed } from "vue";
 import Box from "../../../box.vue";
@@ -48,53 +48,53 @@ function handleSelect(month) {
 </script>
 
 <template>
-	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
-		<tbody>
-			<tr v-for='(months, seasonIx) in monthList' :key='`${year}-${seasonIx}`'>
-				<td v-for='month in months' :key='`${year}-${month.ix}`'>
-					<CalendarCell
-						:class='$style.year'
+	<Box is='table' role='grid' tabindex='-1' :class='$style.table'>
+		<tbody>
+			<tr v-for='(months, seasonIx) in monthList' :key='`${year}-${seasonIx}`'>
+				<td v-for='month in months' :key='`${year}-${month.ix}`'>
+					<CalendarCell
+						:class='$style.year'
 						:mod='{
   "today": isToday(month.ix),
   "selected": isSelected(month.ix),
   "in-range": isInRange(month.ix),
   "first-in-range": isFirstInRange(month.ix),
   "last-in-range": isLastInRange(month.ix)
-}'
-						:disabled='isDisabled(month.ix)'
-						:size
-						@click='handleSelect(month.ix)'
-					>
-						{{ month.label }}
-					</CalendarCell>
-				</td>
-			</tr>
-		</tbody>
-	</Box>
+}'
+						:disabled='isDisabled(month.ix)'
+						:size
+						@click='handleSelect(month.ix)'
+					>
+						{{ month.label }}
+					</CalendarCell>
+				</td>
+			</tr>
+		</tbody>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.table {
-	table-layout: fixed;
-}
-
-.year {
-	--day-size-xs: 1.875rem;
-	--day-size-sm: 2.25rem;
-	--day-size-md: 2.625rem;
-	--day-size-lg: 3rem;
-	--day-size-xl: 3.375rem;
-
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: calc((var(--day-size) * 7) / 3 + .09375rem);
-
-	height: var(--day-size);
-
-	text-transform: capitalize;
-}
+.table {
+	table-layout: fixed;
+}
+
+.year {
+	--day-size-xs: 1.875rem;
+	--day-size-sm: 2.25rem;
+	--day-size-md: 2.625rem;
+	--day-size-lg: 3rem;
+	--day-size-xl: 3.375rem;
+
+	cursor: pointer;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: calc((var(--day-size) * 7) / 3 + .09375rem);
+
+	height: var(--day-size);
+
+	text-transform: capitalize;
+}
 </style>

package/dist/runtime/components/card/card-section.vue

@@ -10,7 +10,7 @@ const { is = "section", mod, inheritPadding, withBorder } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='css.section' :mod='[mod, { "with-border": withBorder, "inherit-padding": inheritPadding }]'>
-		<slot />
-	</Box>
+	<Box :is :class='css.section' :mod='[mod, { "with-border": withBorder, "inherit-padding": inheritPadding }]'>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/card/card.vue

@@ -17,7 +17,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Paper :is :style :class='css.root' v-bind='rest'>
-		<slot />
-	</Paper>
+	<Paper :is :style :class='css.root' v-bind='rest'>
+		<slot />
+	</Paper>
 </template>

package/dist/runtime/components/checkbox/checkbox-card.d.vue.ts

@@ -3,7 +3,10 @@ import type { Mod } from '@nui/utils';
 export interface CheckboxCardProps {
     mod?: Mod | Mod[];
     withBorder?: boolean;
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Disabled input prop */
+    disabled?: boolean | undefined;
     value?: string;
 }
 type __VLS_Props = CheckboxCardProps;

package/dist/runtime/components/checkbox/checkbox-card.vue

@@ -6,28 +6,42 @@ import { useProvideCheckboxCard } from "./lib/card.context";
 import { useCheckboxGroupState } from "./lib/group.context";
 const {
   withBorder,
-  value: _value,
+  value,
   mod,
-  radius
+  radius,
+  disabled: _disabled
 } = defineProps({
   mod: { type: [Object, Array], required: false },
   withBorder: { type: Boolean, required: false },
   radius: { type: [String, Number], required: false },
+  disabled: { type: Boolean, required: false, skipCheck: true },
   value: { type: String, required: false }
 });
 const ctx = useCheckboxGroupState();
 const modelValue = defineModel({ type: Boolean, ...{ default: false } });
-const checked = computed(() => {
-  if (ctx?.value && _value)
-    return ctx?.value.value.includes(_value);
-  return modelValue.value;
+const checked = computed({
+  get: () => {
+    if (ctx && value !== void 0)
+      return ctx.isSelected(value);
+    return modelValue.value;
+  },
+  set: (check) => {
+    if (ctx && value !== void 0)
+      return ctx.update(value);
+    modelValue.value = check;
+  }
+});
+const disabled = computed(() => {
+  if (_disabled)
+    return true;
+  if (ctx && value !== void 0)
+    return ctx.isDisabled(value);
+  return false;
+});
+useProvideCheckboxCard({
+  value: checked,
+  onUpdate: () => checked.value = !checked.value
 });
-function onUpdate() {
-  if (_value && ctx?.onUpdate)
-    return ctx.onUpdate(_value);
-  return modelValue.value = !modelValue.value;
-}
-useProvideCheckboxCard({ value: checked, onUpdate });
 const style = computed(() => ({
   "--card-radius": getRadius(radius)
 }));
@@ -36,10 +50,11 @@ const style = computed(() => ({
 <template>
 	<UnstyledButton
 		:mod='[{ checked, "with-border": withBorder }, mod]'
-		:value='_value'
+		:value='checked'
 		:class='$style.root'
 		:style
-		@click='onUpdate()'
+		:disabled
+		@click='checked = !checked'
 	>
 		<slot />
 	</UnstyledButton>

package/dist/runtime/components/checkbox/checkbox-card.vue.d.ts

@@ -3,7 +3,10 @@ import type { Mod } from '@nui/utils';
 export interface CheckboxCardProps {
     mod?: Mod | Mod[];
     withBorder?: boolean;
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Disabled input prop */
+    disabled?: boolean | undefined;
     value?: string;
 }
 type __VLS_Props = CheckboxCardProps;

package/dist/runtime/components/checkbox/checkbox-group.d.vue.ts

@@ -1,8 +1,19 @@
 import type { NuanceSize } from '@nui/types';
 import type { InputWrapperProps } from '../input/index.js';
 export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'resize' | 'multiline' | 'id' | 'size'> {
-    name: string;
+    /** Input name */
+    name?: string;
+    /** Component size */
     size?: NuanceSize;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * Maximum number of checkboxes that can be selected.
+     * Unselected switches are disabled once the limit is reached
+     */
+    maxSelectedValues?: number;
 }
 type __VLS_Props = CheckboxGroupProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/checkbox/checkbox-group.vue

@@ -3,9 +3,19 @@ import { useId } from "vue";
 import InputWrapper from "../input/ui/input-wrapper.vue";
 import VisuallyHiddenInput from "../visually-hidden/visually-hidden-input.vue";
 import { useProvideCheckboxGroup } from "./lib/group.context";
-const { size, name, ...rest } = defineProps({
-  name: { type: String, required: true },
+const {
+  size,
+  name,
+  maxSelectedValues,
+  disabled,
+  readOnly,
+  ...rest
+} = defineProps({
+  name: { type: String, required: false },
   size: { type: String, required: false },
+  readOnly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  maxSelectedValues: { type: Number, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -17,21 +27,21 @@ const { size, name, ...rest } = defineProps({
 });
 const value = defineModel({ type: Array, ...{ default: [] } });
 const id = useId();
-useProvideCheckboxGroup({ value, size });
+useProvideCheckboxGroup({ value, size, maxSelectedValues, disabled, readOnly });
 </script>
 
 <template>
 	<InputWrapper :id v-bind='rest'>
-		<template #label>
+		<template v-if='!!$slots.label' #label>
 			<slot name='label' />
 		</template>
 
 		<slot />
 
-		<template #description>
+		<template v-if='!!$slots.description' #description>
 			<slot name='description' />
 		</template>
-		<template #error>
+		<template v-if='!!$slots.error' #error>
 			<slot name='error' />
 		</template>
 

package/dist/runtime/components/checkbox/checkbox-group.vue.d.ts

@@ -1,8 +1,19 @@
 import type { NuanceSize } from '@nui/types';
 import type { InputWrapperProps } from '../input/index.js';
 export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'resize' | 'multiline' | 'id' | 'size'> {
-    name: string;
+    /** Input name */
+    name?: string;
+    /** Component size */
     size?: NuanceSize;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * Maximum number of checkboxes that can be selected.
+     * Unselected switches are disabled once the limit is reached
+     */
+    maxSelectedValues?: number;
 }
 type __VLS_Props = CheckboxGroupProps;
 type __VLS_ModelProps = {