nuance-ui 0.2.5 → 0.2.7

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";
@@ -39,123 +39,124 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :style :class='$style.indicator' :mod='{ checked }'>
-		<slot :indeterminate='indeterminate' :class='$style.icon' :mod='{ checked }'>
-			<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' :mod='{ checked }' />
-			<Icon v-else :class='$style.icon' name='gravity-ui:minus' :mod='{ checked }' />
-		</slot>
-	</Box>
+	<Box :style :class='$style.indicator' :mod='{ checked }'>
+		<slot :indeterminate='indeterminate' :class='$style.icon' :mod='{ checked }'>
+			<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' :mod='{ checked }' />
+			<Icon v-else :class='$style.icon' name='gravity-ui:minus' :mod='{ checked }' />
+		</slot>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.indicator {
-	--checkbox-size-xs: rem(16px);
-	--checkbox-size-sm: rem(20px);
-	--checkbox-size-md: rem(24px);
-	--checkbox-size-lg: rem(30px);
-	--checkbox-size-xl: rem(36px);
-
-	--checkbox-size: var(--checkbox-size-sm);
-	--checkbox-color: var(--color-primary-filled);
-	--checkbox-icon-color: var(--color-white);
-
-	--checkbox-radius: var(--radius-default);
-
-	position: relative;
-
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	width: var(--checkbox-size);
-	min-width: var(--checkbox-size);
-	height: var(--checkbox-size);
-	min-height: var(--checkbox-size);
-
-	border: 1px solid transparent;
-	border-radius: var(--checkbox-radius);
-
-	transition: border-color 100ms ease,
-	background-color 100ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	&[data-indeterminate],
-	&[data-checked] {
-		border-color: var(--checkbox-color);
-
-		background-color: var(--checkbox-color);
-
-		& > .icon {
-			transform: none;
-
-			color: var(--checkbox-icon-color);
-
-			opacity: 1;
-		}
-	}
-
-	&[data-disabled] {
-		cursor: not-allowed;
-
-		border-color: var(--color-disabled-border);
-
-		background-color: var(--color-disabled);
-
-		&[data-checked] > .icon {
-			@mixin light {
-				color: var(--color-gray-5);
-			}
-
-			@mixin dark {
-				color: var(--color-dark-3);
-			}
-		}
-	}
-
-	@mixin where-light {
-		border-color: var(--color-gray-4);
-
-		background-color: var(--color-white);
-	}
-
-	@mixin where-dark {
-		border-color: var(--color-dark-4);
-
-		background-color: var(--color-dark-6);
-	}
-}
-
-.indicator[data-variant='outline'] {
-	&[data-indeterminate]:not([data-disabled]),
-	&[data-checked]:not([data-disabled]) {
-		border-color: var(--checkbox-color);
-
-		background-color: transparent;
-
-		& > .icon {
-			transform: none;
-
-			color: var(--checkbox-color);
-
-			opacity: 1;
-		}
-	}
-}
-
-.icon {
-	pointer-events: none;
-
-	transform: translateY(.25rem) scale(0.5);
-
-	display: block;
-
-	width: 80%;
-
-	color: transparent;
-
-	opacity: 1;
-
-	transition: transform 100ms ease,
-	opacity 100ms ease;
-}
+.indicator {
+	--checkbox-size-xs: rem(16px);
+	--checkbox-size-sm: rem(20px);
+	--checkbox-size-md: rem(24px);
+	--checkbox-size-lg: rem(30px);
+	--checkbox-size-xl: rem(36px);
+
+	--checkbox-size: var(--checkbox-size-sm);
+	--checkbox-color: var(--color-primary-filled);
+	--checkbox-icon-color: var(--color-white);
+
+	--checkbox-radius: var(--radius-default);
+
+	position: relative;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	width: var(--checkbox-size);
+	min-width: var(--checkbox-size);
+	height: var(--checkbox-size);
+	min-height: var(--checkbox-size);
+
+	border: 1px solid transparent;
+	border-radius: var(--checkbox-radius);
+
+	transition: border-color 100ms ease,
+		background-color 100ms ease;
+	-webkit-tap-highlight-color: transparent;
+
+	&[data-indeterminate],
+	&[data-checked] {
+		border-color: var(--checkbox-color);
+
+		background-color: var(--checkbox-color);
+
+		&>.icon {
+			transform: none;
+
+			color: var(--checkbox-icon-color);
+
+			opacity: 1;
+		}
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		border-color: var(--color-disabled-border);
+
+		background-color: var(--color-disabled);
+
+		&[data-checked]>.icon {
+			@mixin light {
+				color: var(--color-gray-5);
+			}
+
+			@mixin dark {
+				color: var(--color-dark-3);
+			}
+		}
+	}
+
+	@mixin where-light {
+		border-color: var(--color-gray-4);
+
+		background-color: var(--color-white);
+	}
+
+	@mixin where-dark {
+		border-color: var(--color-dark-4);
+
+		background-color: var(--color-dark-6);
+	}
+}
+
+.indicator[data-variant='outline'] {
+
+	&[data-indeterminate]:not([data-disabled]),
+	&[data-checked]:not([data-disabled]) {
+		border-color: var(--checkbox-color);
+
+		background-color: transparent;
+
+		&>.icon {
+			transform: none;
+
+			color: var(--checkbox-color);
+
+			opacity: 1;
+		}
+	}
+}
+
+.icon {
+	pointer-events: none;
+
+	transform: translateY(.25rem) scale(0.5);
+
+	display: block;
+
+	width: 80%;
+
+	color: transparent;
+
+	opacity: 1;
+
+	transition: transform 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;

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

@@ -1,19 +1,22 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
 import { computed, useId } from "vue";
 import Box from "../box.vue";
 import InputInline from "../input/ui/input-inline.vue";
 import { useCheckboxGroupState } from "./lib/group.context";
 const {
+  id,
   size: _size = "sm",
   radius,
   variant = "filled",
   color,
   iconColor,
   value,
+  disabled: _disabled,
   ...rest
 } = defineProps({
+  id: { type: String, required: false },
   color: { type: null, required: false },
   iconColor: { type: null, required: false },
   variant: { type: String, required: false },
@@ -25,19 +28,34 @@ const {
   error: { type: String, required: false },
   disabled: { type: Boolean, required: false, skipCheck: true },
   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 id = useId();
-const modelValue = defineModel({ type: [Boolean, String] });
+const modelValue = defineModel({ type: [Boolean, String], ...{ default: false } });
 const ctx = useCheckboxGroupState();
-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 size = ctx?.size ?? _size;
-const toggle = () => modelValue.value = !modelValue.value;
+const disabled = computed(() => {
+  if (_disabled)
+    return true;
+  if (ctx && value !== void 0)
+    return ctx.isDisabled(value);
+  return false;
+});
+const uuid = computed(() => id ?? useId());
+const size = computed(() => _size ?? ctx?.size);
 const style = computed(() => useStyleResolver((theme) => {
   const parsed = parseThemeColor({ color, theme });
   const outlineColor = parsed.isThemeColor && parsed.shade === void 0 ? `var(--color-${parsed.color}-outline)` : parsed.color;
@@ -51,15 +69,14 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<InputInline v-bind='rest' :id :class='$style.root' :style :size>
+	<InputInline v-bind='rest' :id='uuid' :class='$style.root' :style :size>
 		<Box :class='$style.inner' :mod='{ "label-position": rest?.labelPosition }'>
 			<input
 				:id
-				:checked
+				v-model='checked'
 				type='checkbox'
 				:class='$style.input'
-				:disabled='rest.disabled'
-				@change='() => value && ctx ? ctx.onUpdate(value) : toggle()'
+				:disabled
 			>
 
 			<slot name='icon' :indeterminate='modelValue === "indeterminate"' :class='$style.icon'>
@@ -111,7 +128,7 @@ const style = computed(() => useStyleResolver((theme) => {
 	appearance: none;
 
 	transition: border-color 100ms ease,
-	background-color 100ms ease;
+		background-color 100ms ease;
 	-webkit-tap-highlight-color: transparent;
 
 	&:where([data-error]) {
@@ -124,7 +141,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: var(--checkbox-color);
 
-		& + .icon {
+		&+.icon {
 			transform: none;
 
 			opacity: 1;
@@ -138,7 +155,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: var(--color-disabled);
 
-		& + .icon {
+		&+.icon {
 			color: var(--color-disabled);
 		}
 	}
@@ -157,7 +174,7 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .input[data-variant='outline'] {
-	& + .icon {
+	&+.icon {
 		color: var(--checkbox-color);
 	}
 
@@ -167,7 +184,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: transparent;
 
-		& + .icon {
+		&+.icon {
 			transform: none;
 
 			color: var(--checkbox-color);
@@ -192,6 +209,6 @@ const style = computed(() => useStyleResolver((theme) => {
 	opacity: 0;
 
 	transition: transform 100ms ease,
-	opacity 100ms ease;
+		opacity 100ms ease;
 }
 </style>

package/dist/runtime/components/checkbox/checkbox.vue.d.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;

package/dist/runtime/components/checkbox/lib/group.context.d.ts

@@ -1,16 +1,28 @@
 import type { NuanceSize } from '@nui/types';
 import type { ModelRef } from 'vue';
 export interface CheckboxGroupState {
+    /** Selected values */
     value: ModelRef<string[]>;
+    /** Component size */
     size?: NuanceSize;
+    /** Disables the component */
+    disabled?: boolean;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /** Maximum number of switches that can be selected */
+    maxSelectedValues?: number;
 }
-export declare const useProvideCheckboxGroup: (args_0: CheckboxGroupState) => {
+export declare const useProvideCheckboxGroup: (state: CheckboxGroupState) => {
     value: ModelRef<string[]>;
     size: NuanceSize | undefined;
-    onUpdate: (newValue: string) => number | string[];
+    update: (value: string) => void;
+    isDisabled: (value: string) => boolean;
+    isSelected: (value: string) => boolean;
 };
 export declare const useCheckboxGroupState: () => {
     value: ModelRef<string[]>;
     size: NuanceSize | undefined;
-    onUpdate: (newValue: string) => number | string[];
+    update: (value: string) => void;
+    isDisabled: (value: string) => boolean;
+    isSelected: (value: string) => boolean;
 } | undefined;

package/dist/runtime/components/checkbox/lib/group.context.js

@@ -1,12 +1,14 @@
+import { useSelectableGroup } from "@nui/composables";
 import { createInjectionState } from "@vueuse/core";
 const injectionKey = Symbol("CheckboxGroup");
-const [useProvide, useState] = createInjectionState(({ value, size }) => {
-  const onUpdate = (newValue) => {
-    if (value.value.includes(newValue))
-      return value.value = value.value.filter((i) => i !== newValue);
-    return value.value.push(newValue);
-  };
-  return { value, size, onUpdate };
+const [useProvide, useState] = createInjectionState((state) => {
+  const { value, size, disabled, readOnly, maxSelectedValues } = state;
+  const { update, isSelected, isDisabled } = useSelectableGroup(value, {
+    disabled,
+    readOnly,
+    maxSelectedValues
+  });
+  return { value, size, update, isDisabled, isSelected };
 }, {
   injectionKey
 });

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

@@ -15,6 +15,6 @@ useProvideChipGroupState({ multiple, value, disabled });
 </script>
 
 <template>
-	<slot />
-	<VisuallyHiddenInput v-model='value' :name />
+	<slot />
+	<VisuallyHiddenInput v-model='value' :name />
 </template>

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

@@ -4,6 +4,7 @@ export interface ChipProps {
     size?: NuanceSize;
     type?: 'radio' | 'checkbox';
     color?: NuanceColor;
+    /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
     variant?: 'filled' | 'outline' | 'light';
     value?: string;

package/dist/runtime/components/chip/chip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getFontSize, getRadius, getSize } from "@nui/utils";
 import { computed, useId } from "vue";
 import Box from "../box.vue";
@@ -172,14 +172,14 @@ const style = computed(() => useStyleResolver((theme) => {
 
 	opacity: 0;
 
-	&:focus-visible + .label {
+	&:focus-visible+.label {
 		outline: 2px solid var(--color-primary-filled);
 		outline-offset: 2px;
 	}
 }
 
 .input:disabled {
-	& + .label {
+	&+.label {
 		cursor: not-allowed;
 
 		color: var(--color-disabled-text);
@@ -189,7 +189,7 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .input:not(:disabled) {
-	& + .label[data-variant='outline'] {
+	&+.label[data-variant='outline'] {
 		@mixin where-light {
 			border: 1px solid var(--color-gray-3);
 
@@ -213,8 +213,8 @@ const style = computed(() => useStyleResolver((theme) => {
 		}
 	}
 
-	& + .label[data-variant='filled'],
-	& + .label[data-variant='light'] {
+	&+.label[data-variant='filled'],
+	&+.label[data-variant='light'] {
 		border: 1px solid transparent;
 
 		color: var(--color-text);
@@ -240,11 +240,11 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .input:not(:disabled):checked {
-	& + .label {
+	&+.label {
 		padding: var(--chip-checked-padding);
 	}
 
-	& + .label[data-variant='outline'] {
+	&+.label[data-variant='outline'] {
 		--chip-icon-color: var(--chip-color);
 
 		border: var(--chip-bd);
@@ -254,8 +254,8 @@ const style = computed(() => useStyleResolver((theme) => {
 		}
 	}
 
-	& + .label[data-variant='filled'],
-	& + .label[data-variant='light'] {
+	&+.label[data-variant='filled'],
+	&+.label[data-variant='light'] {
 		--chip-icon-color: var(--chip-color);
 
 		color: var(--chip-color);

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

@@ -4,6 +4,7 @@ export interface ChipProps {
     size?: NuanceSize;
     type?: 'radio' | 'checkbox';
     color?: NuanceColor;
+    /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
     variant?: 'filled' | 'outline' | 'light';
     value?: string;

package/dist/runtime/components/chip/lib.js

@@ -1,4 +1,4 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createStrictInjection } from "@nui/composables";
 import { computed } from "vue";
 const injectionKey = Symbol("chip-group");
 const [useProvide, useState] = createStrictInjection((props) => props, {

package/dist/runtime/components/combobox/combobox-dropdown.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { getSize } from "@nui/utils";
 import { computed } from "vue";
+import { getSize } from "../../utils";
 import Box from "../box.vue";
 import PopoverDropdown from "../popover/popover-dropdown.vue";
 import css from "./combobox.module.css";
@@ -13,21 +13,21 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<PopoverDropdown :class='$style.dropdown'>
-		<Box
-			:id='store.listId'
-			role='presentation'
-			:class='css.dropdown'
-			:style
-			v-bind='$attrs'
-		>
-			<slot />
-		</Box>
-	</PopoverDropdown>
+	<PopoverDropdown :class='$style.dropdown'>
+		<Box
+			:id='store.listId'
+			role='presentation'
+			:class='css.dropdown'
+			:style
+			v-bind='$attrs'
+		>
+			<slot />
+		</Box>
+	</PopoverDropdown>
 </template>
 
 <style module lang="postcss">
-.dropdown {
-	padding: 0;
-}
+.dropdown {
+	padding: 0;
+}
 </style>

package/dist/runtime/components/combobox/combobox-empty.vue

@@ -8,7 +8,7 @@ const { is, mod } = defineProps({
 </script>
 
 <template>
-	<Box :is :mod :class='css.empty'>
-		<slot />
-	</Box>
+	<Box :is :mod :class='css.empty'>
+		<slot />
+	</Box>
 </template>