nuance-ui 0.2.6 → 0.2.7

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-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";
@@ -46,41 +46,41 @@ function handleSelect(event) {
 </script>
 
 <template>
-	<table :class='$style.table' role='grid' tabindex='-1'>
-		<thead>
-			<tr>
-				<th v-if='withWeekNumbers' :class='$style.weekday'>
-					#
-				</th>
-				<th v-for='day in ctx.weekdays.value' :key='day' :class='$style.weekday'>
-					<slot name='weekday' :day='day'>
-						{{ day }}
-					</slot>
-				</th>
-			</tr>
-		</thead>
-
-		<tbody @click='handleSelect'>
-			<Box
-				is='tr'
-				v-for='(week, weekIx) in weeks'
-				:key='`week-${weekIx}`'
-				:class='$style.row'
-				:mod='{ selectable: selection.mode === "week" }'
-			>
-				<td v-if='withWeekNumbers' :class='$style.weeknumber'>
-					{{ getWeekNumber(week[0], 1) }}
-				</td>
-				<Box
-					is='td'
-					v-for='(day, dayIx) in week'
-					:key='`day-${dayIx}`'
-					:class='$style.cell'
-					role='gridcell'
-					:mod='{ "with-spacing": withCellSpacing }'
-				>
-					<CalendarCell
-						:size
+	<table :class='$style.table' role='grid' tabindex='-1'>
+		<thead>
+			<tr>
+				<th v-if='withWeekNumbers' :class='$style.weekday'>
+					#
+				</th>
+				<th v-for='day in ctx.weekdays.value' :key='day' :class='$style.weekday'>
+					<slot name='weekday' :day='day'>
+						{{ day }}
+					</slot>
+				</th>
+			</tr>
+		</thead>
+
+		<tbody @click='handleSelect'>
+			<Box
+				is='tr'
+				v-for='(week, weekIx) in weeks'
+				:key='`week-${weekIx}`'
+				:class='$style.row'
+				:mod='{ selectable: selection.mode === "week" }'
+			>
+				<td v-if='withWeekNumbers' :class='$style.weeknumber'>
+					{{ getWeekNumber(week[0], 1) }}
+				</td>
+				<Box
+					is='td'
+					v-for='(day, dayIx) in week'
+					:key='`day-${dayIx}`'
+					:class='$style.cell'
+					role='gridcell'
+					:mod='{ "with-spacing": withCellSpacing }'
+				>
+					<CalendarCell
+						:size
 						:mod='{
   "value": day,
   "today": isToday(day),
@@ -91,49 +91,49 @@ function handleSelect(event) {
   "in-range": selection.isInRange(day),
   "first-in-range": selection.isFirstInRange(day),
   "last-in-range": selection.isLastInRange(day)
-}'
-						:disabled='isDisabled(day)'
-					>
-						<slot>
-							{{ new Date(day).getDate() }}
-						</slot>
-					</CalendarCell>
-				</Box>
-			</Box>
-		</tbody>
-	</table>
+}'
+						:disabled='isDisabled(day)'
+					>
+						<slot>
+							{{ new Date(day).getDate() }}
+						</slot>
+					</CalendarCell>
+				</Box>
+			</Box>
+		</tbody>
+	</table>
 </template>
 
 <style lang="postcss" module>
-.table {
-	table-layout: fixed;
-	border-collapse: collapse;
-}
-
-.row:where([data-selectable]):hover {
-	@mixin light {
-		background-color: var(--color-gray-0);
-	}
-
-	@mixin dark {
-		background-color: var(--color-dark-5);
-	}
-}
-
-.cell {
-	padding: 0;
-
-	&:where(&[data-with-spacing]) {
-		padding: var(--calendar-cell-spacing);
-	}
-}
-
-.weekday {
-	padding-bottom: calc(var(--wr-spacing, var(--spacing-sm)) / 2);
-
-	font-size: var(--wr-fz, var(--font-size-sm));
-	font-weight: normal;
-	color: var(--color-dimmed);
-	text-transform: capitalize;
-}
+.table {
+	table-layout: fixed;
+	border-collapse: collapse;
+}
+
+.row:where([data-selectable]):hover {
+	@mixin light {
+		background-color: var(--color-gray-0);
+	}
+
+	@mixin dark {
+		background-color: var(--color-dark-5);
+	}
+}
+
+.cell {
+	padding: 0;
+
+	&:where(&[data-with-spacing]) {
+		padding: var(--calendar-cell-spacing);
+	}
+}
+
+.weekday {
+	padding-bottom: calc(var(--wr-spacing, var(--spacing-sm)) / 2);
+
+	font-size: var(--wr-fz, var(--font-size-sm));
+	font-weight: normal;
+	color: var(--color-dimmed);
+	text-transform: capitalize;
+}
 </style>

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

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,71 +6,86 @@ 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)
 }));
 </script>
 
 <template>
-	<UnstyledButton
-		:mod='[{ checked, "with-border": withBorder }, mod]'
-		:value='_value'
-		:class='$style.root'
-		:style
-		@click='onUpdate()'
-	>
-		<slot />
-	</UnstyledButton>
+	<UnstyledButton
+		:mod='[{ checked, "with-border": withBorder }, mod]'
+		:value='checked'
+		:class='$style.root'
+		:style
+		:disabled
+		@click='checked = !checked'
+	>
+		<slot />
+	</UnstyledButton>
 </template>
 
 <style module lang="postcss">
-.root {
-	--card-radius: var(--radius-default);
-
-	cursor: pointer;
-
-	display: block;
-
-	width: 100%;
-
-	border-radius: var(--card-radius);
-
-	& :where(*) {
-		cursor: inherit;
-	}
-
-	&:where([data-with-border]) {
-		border: 1px solid transparent;
-
-		@mixin where-light {
-			border-color: var(--color-gray-3);
-		}
-
-		@mixin where-dark {
-			border-color: var(--color-dark-4);
-		}
-	}
-}
+.root {
+	--card-radius: var(--radius-default);
+
+	cursor: pointer;
+
+	display: block;
+
+	width: 100%;
+
+	border-radius: var(--card-radius);
+
+	& :where(*) {
+		cursor: inherit;
+	}
+
+	&:where([data-with-border]) {
+		border: 1px solid transparent;
+
+		@mixin where-light {
+			border-color: var(--color-gray-3);
+		}
+
+		@mixin where-dark {
+			border-color: var(--color-dark-4);
+		}
+	}
+}
 </style>

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,24 +27,24 @@ 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>
-			<slot name='label' />
-		</template>
-
-		<slot />
-
-		<template #description>
-			<slot name='description' />
-		</template>
-		<template #error>
-			<slot name='error' />
-		</template>
-
-		<VisuallyHiddenInput :id v-model='value' :name />
-	</InputWrapper>
+	<InputWrapper :id v-bind='rest'>
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<slot />
+
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+
+		<VisuallyHiddenInput :id v-model='value' :name />
+	</InputWrapper>
 </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 = {

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -76,7 +76,7 @@ const style = computed(() => useStyleResolver((theme) => {
 	border-radius: var(--checkbox-radius);
 
 	transition: border-color 100ms ease,
-	background-color 100ms ease;
+		background-color 100ms ease;
 	-webkit-tap-highlight-color: transparent;
 
 	&[data-indeterminate],
@@ -85,7 +85,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: var(--checkbox-color);
 
-		& > .icon {
+		&>.icon {
 			transform: none;
 
 			color: var(--checkbox-icon-color);
@@ -101,7 +101,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: var(--color-disabled);
 
-		&[data-checked] > .icon {
+		&[data-checked]>.icon {
 			@mixin light {
 				color: var(--color-gray-5);
 			}
@@ -126,13 +126,14 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .indicator[data-variant='outline'] {
+
 	&[data-indeterminate]:not([data-disabled]),
 	&[data-checked]:not([data-disabled]) {
 		border-color: var(--checkbox-color);
 
 		background-color: transparent;
 
-		& > .icon {
+		&>.icon {
 			transform: none;
 
 			color: var(--checkbox-color);
@@ -156,6 +157,6 @@ const style = computed(() => useStyleResolver((theme) => {
 	opacity: 1;
 
 	transition: transform 100ms ease,
-	opacity 100ms ease;
+		opacity 100ms ease;
 }
 </style>

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

@@ -1,10 +1,14 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 import type { InlineInputProps } from '../input/index.js';
 export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
+    /** Id used to bind input and label, auto-generated if not provided */
+    id?: string;
     color?: NuanceColor;
     iconColor?: NuanceColor;
+    /** Visual variant @default 'filled' */
     variant?: 'filled' | 'outline';
     radius?: NuanceSize;
+    /** Component size @default 'sm' */
     size?: NuanceSize;
     value?: string;
 }
@@ -21,9 +25,9 @@ type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean | "indeterminate" | undefined) => any;
+    "update:modelValue": (value: boolean | "indeterminate") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | "indeterminate" | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;