nuance-ui 0.2.6 → 0.2.7

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,147 +69,146 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<InputInline v-bind='rest' :id :class='$style.root' :style :size>
-		<Box :class='$style.inner' :mod='{ "label-position": rest?.labelPosition }'>
-			<input
-				:id
-				:checked
-				type='checkbox'
-				:class='$style.input'
-				:disabled='rest.disabled'
-				@change='() => value && ctx ? ctx.onUpdate(value) : toggle()'
-			>
-
-			<slot name='icon' :indeterminate='modelValue === "indeterminate"' :class='$style.icon'>
-				<Icon v-if='modelValue !== "indeterminate"' name='gravity-ui:check' :class='$style.icon' />
-				<Icon v-else name='gravity-ui:minus' :class='$style.icon' />
-			</slot>
-		</Box>
-	</InputInline>
+	<InputInline v-bind='rest' :id='uuid' :class='$style.root' :style :size>
+		<Box :class='$style.inner' :mod='{ "label-position": rest?.labelPosition }'>
+			<input
+				:id
+				v-model='checked'
+				type='checkbox'
+				:class='$style.input'
+				:disabled
+			>
+
+			<slot name='icon' :indeterminate='modelValue === "indeterminate"' :class='$style.icon'>
+				<Icon v-if='modelValue !== "indeterminate"' name='gravity-ui:check' :class='$style.icon' />
+				<Icon v-else name='gravity-ui:minus' :class='$style.icon' />
+			</slot>
+		</Box>
+	</InputInline>
 </template>
 
 <style module lang="postcss">
-.root {
-	--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);
-}
-
-.inner {
-	position: relative;
-
-	order: 1;
-
-	width: var(--checkbox-size);
-	height: var(--checkbox-size);
-
-	&:where([data-label-position='right']) {
-		order: 2;
-	}
-}
-
-.input {
-	cursor: pointer;
-
-	display: block;
-
-	width: var(--checkbox-size);
-	height: var(--checkbox-size);
-	margin: 0;
-	padding: 0;
-	border: 1px solid transparent;
-	border-radius: var(--checkbox-radius, var(--radius-default));
-
-	appearance: none;
-
-	transition: border-color 100ms ease,
-	background-color 100ms ease;
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-error]) {
-		border-color: var(--color-error);
-	}
-
-	&[data-indeterminate],
-	&:checked {
-		border-color: var(--checkbox-color);
-
-		background-color: var(--checkbox-color);
-
-		& + .icon {
-			transform: none;
-
-			opacity: 1;
-		}
-	}
-
-	&:disabled {
-		cursor: not-allowed;
-
-		border-color: var(--color-disabled-border);
-
-		background-color: var(--color-disabled);
-
-		& + .icon {
-			color: var(--color-disabled);
-		}
-	}
-
-	@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);
-	}
-}
-
-.input[data-variant='outline'] {
-	& + .icon {
-		color: var(--checkbox-color);
-	}
-
-	&[data-indeterminate]:not(:disabled),
-	&:checked:not(:disabled) {
-		border-color: var(--checkbox-color);
-
-		background-color: transparent;
-
-		& + .icon {
-			transform: none;
-
-			color: var(--checkbox-color);
-
-			opacity: 1;
-		}
-	}
-}
-
-.icon {
-	pointer-events: none;
-
-	position: absolute;
-	inset: 0;
-	transform: translateY(.25rem) scale(0.5);
-
-	width: 80%;
-	margin: auto;
-
-	color: var(--checkbox-icon-color);
-
-	opacity: 0;
-
-	transition: transform 100ms ease,
-	opacity 100ms ease;
-}
+.root {
+	--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);
+}
+
+.inner {
+	position: relative;
+
+	order: 1;
+
+	width: var(--checkbox-size);
+	height: var(--checkbox-size);
+
+	&:where([data-label-position='right']) {
+		order: 2;
+	}
+}
+
+.input {
+	cursor: pointer;
+
+	display: block;
+
+	width: var(--checkbox-size);
+	height: var(--checkbox-size);
+	margin: 0;
+	padding: 0;
+	border: 1px solid transparent;
+	border-radius: var(--checkbox-radius, var(--radius-default));
+
+	appearance: none;
+
+	transition: border-color 100ms ease,
+		background-color 100ms ease;
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-error]) {
+		border-color: var(--color-error);
+	}
+
+	&[data-indeterminate],
+	&:checked {
+		border-color: var(--checkbox-color);
+
+		background-color: var(--checkbox-color);
+
+		&+.icon {
+			transform: none;
+
+			opacity: 1;
+		}
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+
+		border-color: var(--color-disabled-border);
+
+		background-color: var(--color-disabled);
+
+		&+.icon {
+			color: var(--color-disabled);
+		}
+	}
+
+	@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);
+	}
+}
+
+.input[data-variant='outline'] {
+	&+.icon {
+		color: var(--checkbox-color);
+	}
+
+	&[data-indeterminate]:not(:disabled),
+	&:checked:not(:disabled) {
+		border-color: var(--checkbox-color);
+
+		background-color: transparent;
+
+		&+.icon {
+			transform: none;
+
+			color: var(--checkbox-color);
+
+			opacity: 1;
+		}
+	}
+}
+
+.icon {
+	pointer-events: none;
+
+	position: absolute;
+	inset: 0;
+	transform: translateY(.25rem) scale(0.5);
+
+	width: 80%;
+	margin: auto;
+
+	color: var(--checkbox-icon-color);
+
+	opacity: 0;
+
+	transition: transform 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.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;