nuance-ui 0.2.6 → 0.2.7

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";
@@ -56,8 +56,8 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :style :class='[$style.root, $attrs?.style]'>
-		<input
+	<Box :style :class='[$style.root, $attrs?.style]'>
+		<input
 			v-bind='{
   ...$attrs,
   class: $style.input,
@@ -66,205 +66,205 @@ const style = computed(() => useStyleResolver((theme) => {
   type,
   disabled,
   id
-}'
-			@click='onUpdate()'
-		>
-		<Box is='label' :for='id' :class='$style.label' :mod='{ variant }'>
-			<span v-if='hideIcon && checked' :class='$style.iconWrapper'>
-				<Icon :name='icon' :class='$style.icon' />
-			</span>
-
-			<span><slot /></span>
-		</Box>
-	</Box>
+}'
+			@click='onUpdate()'
+		>
+		<Box is='label' :for='id' :class='$style.label' :mod='{ variant }'>
+			<span v-if='hideIcon && checked' :class='$style.iconWrapper'>
+				<Icon :name='icon' :class='$style.icon' />
+			</span>
+
+			<span><slot /></span>
+		</Box>
+	</Box>
 </template>
 
 <style lang="postcss" module>
-.root {
-	--chip-size-xs: rem(23px);
-	--chip-size-sm: rem(28px);
-	--chip-size-md: rem(32px);
-	--chip-size-lg: rem(36px);
-	--chip-size-xl: rem(40px);
-
-	--chip-icon-size-xs: rem(12px);
-	--chip-icon-size-sm: rem(14px);
-	--chip-icon-size-md: rem(16px);
-	--chip-icon-size-lg: rem(18px);
-	--chip-icon-size-xl: rem(20px);
-
-	--chip-padding-xs: rem(16px);
-	--chip-padding-sm: rem(20px);
-	--chip-padding-md: rem(24px);
-	--chip-padding-lg: rem(28px);
-	--chip-padding-xl: rem(32px);
-
-	--chip-checked-padding-xs: rem(7.5px);
-	--chip-checked-padding-sm: rem(10px);
-	--chip-checked-padding-md: rem(11.7px);
-	--chip-checked-padding-lg: rem(13.5px);
-	--chip-checked-padding-xl: rem(15.7px);
-
-	--chip-spacing-xs: rem(10px);
-	--chip-spacing-sm: rem(12px);
-	--chip-spacing-md: rem(16px);
-	--chip-spacing-lg: rem(20px);
-	--chip-spacing-xl: rem(22px);
-
-	--chip-size: var(--chip-size-sm);
-	--chip-icon-size: var(--chip-icon-size-sm);
-	--chip-padding: var(--chip-padding-sm);
-	--chip-spacing: var(--chip-spacing-sm);
-	--chip-checked-padding: var(--chip-checked-padding-sm);
-	--chip-bg: var(--color-primary-filled);
-	--chip-hover: var(--color-primary-filled-hover);
-	--chip-color: var(--color-white);
-	--chip-bd: 1px solid transparent;
-
-	--chip-fz: var(--font-size-sm);
-	--chip-radius: var(--radius-xl);
-}
-
-.label {
-	cursor: pointer;
-	user-select: none;
-
-	display: inline-flex;
-	align-items: center;
-
-	height: var(--chip-size);
-	padding-inline: var(--chip-padding);
-
-	border: 1px solid transparent;
-	border-radius: var(--chip-radius);
-
-	font-size: var(--chip-fz);
-	line-height: calc(var(--chip-size) - rem(2px));
-	color: var(--color-text);
-	white-space: nowrap;
-	-webkit-tap-highlight-color: transparent;
-}
-
-.iconWrapper {
-	overflow: hidden;
-	display: flex;
-	align-items: center;
-
-	width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
-	max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
-	height: var(--chip-icon-size);
-}
-
-.icon {
-	display: block;
-
-	width: var(--chip-icon-size);
-	height: var(--chip-icon-size);
-
-	color: var(--chip-icon-color, inherit);
-}
-
-.input {
-	width: 0;
-	height: 0;
-	margin: 0;
-	padding: 0;
-
-	opacity: 0;
-
-	&:focus-visible + .label {
-		outline: 2px solid var(--color-primary-filled);
-		outline-offset: 2px;
-	}
-}
-
-.input:disabled {
-	& + .label {
-		cursor: not-allowed;
-
-		color: var(--color-disabled-text);
-
-		background-color: var(--color-disabled);
-	}
-}
-
-.input:not(:disabled) {
-	& + .label[data-variant='outline'] {
-		@mixin where-light {
-			border: 1px solid var(--color-gray-3);
-
-			background-color: var(--color-white);
-		}
-
-		@mixin where-dark {
-			border: 1px solid var(--color-dark-4);
-
-			background-color: var(--color-dark-6);
-		}
-
-		@mixin hover {
-			@mixin where-light {
-				background-color: var(--color-gray-0);
-			}
-
-			@mixin where-dark {
-				background-color: var(--color-dark-5);
-			}
-		}
-	}
-
-	& + .label[data-variant='filled'],
-	& + .label[data-variant='light'] {
-		border: 1px solid transparent;
-
-		color: var(--color-text);
-
-		@mixin where-light {
-			background-color: var(--color-gray-1);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-5);
-		}
-
-		@mixin hover {
-			@mixin where-light {
-				background-color: var(--color-gray-2);
-			}
-
-			@mixin where-dark {
-				background-color: var(--color-dark-4);
-			}
-		}
-	}
-}
-
-.input:not(:disabled):checked {
-	& + .label {
-		padding: var(--chip-checked-padding);
-	}
-
-	& + .label[data-variant='outline'] {
-		--chip-icon-color: var(--chip-color);
-
-		border: var(--chip-bd);
-
-		@mixin hover {
-			background-color: var(--chip-hover);
-		}
-	}
-
-	& + .label[data-variant='filled'],
-	& + .label[data-variant='light'] {
-		--chip-icon-color: var(--chip-color);
-
-		color: var(--chip-color);
-
-		background-color: var(--chip-bg);
-
-		@mixin hover {
-			background-color: var(--chip-hover);
-		}
-	}
-}
+.root {
+	--chip-size-xs: rem(23px);
+	--chip-size-sm: rem(28px);
+	--chip-size-md: rem(32px);
+	--chip-size-lg: rem(36px);
+	--chip-size-xl: rem(40px);
+
+	--chip-icon-size-xs: rem(12px);
+	--chip-icon-size-sm: rem(14px);
+	--chip-icon-size-md: rem(16px);
+	--chip-icon-size-lg: rem(18px);
+	--chip-icon-size-xl: rem(20px);
+
+	--chip-padding-xs: rem(16px);
+	--chip-padding-sm: rem(20px);
+	--chip-padding-md: rem(24px);
+	--chip-padding-lg: rem(28px);
+	--chip-padding-xl: rem(32px);
+
+	--chip-checked-padding-xs: rem(7.5px);
+	--chip-checked-padding-sm: rem(10px);
+	--chip-checked-padding-md: rem(11.7px);
+	--chip-checked-padding-lg: rem(13.5px);
+	--chip-checked-padding-xl: rem(15.7px);
+
+	--chip-spacing-xs: rem(10px);
+	--chip-spacing-sm: rem(12px);
+	--chip-spacing-md: rem(16px);
+	--chip-spacing-lg: rem(20px);
+	--chip-spacing-xl: rem(22px);
+
+	--chip-size: var(--chip-size-sm);
+	--chip-icon-size: var(--chip-icon-size-sm);
+	--chip-padding: var(--chip-padding-sm);
+	--chip-spacing: var(--chip-spacing-sm);
+	--chip-checked-padding: var(--chip-checked-padding-sm);
+	--chip-bg: var(--color-primary-filled);
+	--chip-hover: var(--color-primary-filled-hover);
+	--chip-color: var(--color-white);
+	--chip-bd: 1px solid transparent;
+
+	--chip-fz: var(--font-size-sm);
+	--chip-radius: var(--radius-xl);
+}
+
+.label {
+	cursor: pointer;
+	user-select: none;
+
+	display: inline-flex;
+	align-items: center;
+
+	height: var(--chip-size);
+	padding-inline: var(--chip-padding);
+
+	border: 1px solid transparent;
+	border-radius: var(--chip-radius);
+
+	font-size: var(--chip-fz);
+	line-height: calc(var(--chip-size) - rem(2px));
+	color: var(--color-text);
+	white-space: nowrap;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.iconWrapper {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+
+	width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
+	max-width: calc(var(--chip-icon-size) + (var(--chip-spacing) / 1.5));
+	height: var(--chip-icon-size);
+}
+
+.icon {
+	display: block;
+
+	width: var(--chip-icon-size);
+	height: var(--chip-icon-size);
+
+	color: var(--chip-icon-color, inherit);
+}
+
+.input {
+	width: 0;
+	height: 0;
+	margin: 0;
+	padding: 0;
+
+	opacity: 0;
+
+	&:focus-visible+.label {
+		outline: 2px solid var(--color-primary-filled);
+		outline-offset: 2px;
+	}
+}
+
+.input:disabled {
+	&+.label {
+		cursor: not-allowed;
+
+		color: var(--color-disabled-text);
+
+		background-color: var(--color-disabled);
+	}
+}
+
+.input:not(:disabled) {
+	&+.label[data-variant='outline'] {
+		@mixin where-light {
+			border: 1px solid var(--color-gray-3);
+
+			background-color: var(--color-white);
+		}
+
+		@mixin where-dark {
+			border: 1px solid var(--color-dark-4);
+
+			background-color: var(--color-dark-6);
+		}
+
+		@mixin hover {
+			@mixin where-light {
+				background-color: var(--color-gray-0);
+			}
+
+			@mixin where-dark {
+				background-color: var(--color-dark-5);
+			}
+		}
+	}
+
+	&+.label[data-variant='filled'],
+	&+.label[data-variant='light'] {
+		border: 1px solid transparent;
+
+		color: var(--color-text);
+
+		@mixin where-light {
+			background-color: var(--color-gray-1);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-5);
+		}
+
+		@mixin hover {
+			@mixin where-light {
+				background-color: var(--color-gray-2);
+			}
+
+			@mixin where-dark {
+				background-color: var(--color-dark-4);
+			}
+		}
+	}
+}
+
+.input:not(:disabled):checked {
+	&+.label {
+		padding: var(--chip-checked-padding);
+	}
+
+	&+.label[data-variant='outline'] {
+		--chip-icon-color: var(--chip-color);
+
+		border: var(--chip-bd);
+
+		@mixin hover {
+			background-color: var(--chip-hover);
+		}
+	}
+
+	&+.label[data-variant='filled'],
+	&+.label[data-variant='light'] {
+		--chip-icon-color: var(--chip-color);
+
+		color: var(--chip-color);
+
+		background-color: var(--chip-bg);
+
+		@mixin hover {
+			background-color: var(--chip-hover);
+		}
+	}
+}
 </style>

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

@@ -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-group.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types.js';
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
@@ -19,7 +19,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         label?: (props: {}) => any;
     } & {
         option?: (props: {
-            data: import("./types/index.js").ComboboxItem<any, Ext>;
+            data: import("./types.js").ComboboxItem<any, Ext>;
             checked: boolean;
             withCheckIcon: boolean;
             iconPosition: "left" | "right";

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

@@ -25,25 +25,25 @@ const value = defineModel("value", { type: [String, Array, null] });
 </script>
 
 <template>
-	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
-		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
-			<slot name='label'>
-				{{ label }}
-			</slot>
-		</div>
-
-		<ComboboxOption
-			v-for='item in data.items'
-			:key='item.value'
-			:data='item'
-			:icon-position
-			:with-check-icon
-			:check-icon
-			:checked='isValueChecked(value, item.value)'
-		>
-			<template v-if='$slots.option' #default='props'>
-				<slot name='option' v-bind='props' />
-			</template>
-		</ComboboxOption>
-	</Box>
+	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
+		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</div>
+
+		<ComboboxOption
+			v-for='item in data.items'
+			:key='item.value'
+			:data='item'
+			:icon-position
+			:with-check-icon
+			:check-icon
+			:checked='isValueChecked(value, item.value)'
+		>
+			<template v-if='$slots.option' #default='props'>
+				<slot name='option' v-bind='props' />
+			</template>
+		</ComboboxOption>
+	</Box>
 </template>

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

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types.js';
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
@@ -19,7 +19,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         label?: (props: {}) => any;
     } & {
         option?: (props: {
-            data: import("./types/index.js").ComboboxItem<any, Ext>;
+            data: import("./types.js").ComboboxItem<any, Ext>;
             checked: boolean;
             withCheckIcon: boolean;
             iconPosition: "left" | "right";

package/dist/runtime/components/combobox/combobox-option.d.vue.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types.js';
 export interface ComboboxOptionProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     data: ComboboxItem<Value, Ext>;
     checked: boolean;

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

@@ -37,26 +37,26 @@ const mod = computed(() => [
 </script>
 
 <template>
-	<Box
-		:class='css.option'
-		data-combobox-option
-		:mod
-		role='option'
-		:aria-selected='checked'
-		@mousedown='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
-	>
-		<slot :with-check-icon :icon-position :data :checked>
-			<Icon
-				v-if='checked && withCheckIcon && iconPosition === "left"'
-				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
-			/>
-			<span>{{ data.label }}</span>
-			<Icon
-				v-if='checked && withCheckIcon && iconPosition === "right"'
-				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
-			/>
-		</slot>
-	</Box>
+	<Box
+		:class='css.option'
+		data-combobox-option
+		:mod
+		role='option'
+		:aria-selected='checked'
+		@mousedown='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
+	>
+		<slot :with-check-icon :icon-position :data :checked>
+			<Icon
+				v-if='checked && withCheckIcon && iconPosition === "left"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+			<span>{{ data.label }}</span>
+			<Icon
+				v-if='checked && withCheckIcon && iconPosition === "right"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+		</slot>
+	</Box>
 </template>

package/dist/runtime/components/combobox/combobox-option.vue.d.ts

@@ -1,5 +1,5 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types.js';
 export interface ComboboxOptionProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     data: ComboboxItem<Value, Ext>;
     checked: boolean;

package/dist/runtime/components/combobox/combobox-options-dropdown.d.vue.ts

@@ -1,5 +1,5 @@
 import type { FilterOptionsInput } from './lib/utils/index.js';
-import type { ComboboxItemExt, ComboboxOption } from './types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from './types.js';
 export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
     data: ComboboxOption<Value, Ext>[];
     filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxOption<Value, Ext>[];

package/dist/runtime/components/combobox/combobox-options-dropdown.vue.d.ts

@@ -1,5 +1,5 @@
 import type { FilterOptionsInput } from './lib/utils/index.js';
-import type { ComboboxItemExt, ComboboxOption } from './types/index.js';
+import type { ComboboxItemExt, ComboboxOption } from './types.js';
 export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
     data: ComboboxOption<Value, Ext>[];
     filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxOption<Value, Ext>[];

package/dist/runtime/components/combobox/combobox-root.d.vue.ts

@@ -25,16 +25,16 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (args_0: number) => any;
     clear: () => any;
-    close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
-    submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
-    open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
+    close: (args_0: import("./types.js").ComboboxDropdownEventSource) => any;
+    submit: (args_0: string, args_1: import("./types.js").ComboboxItem<string, object>) => any;
+    open: (args_0: import("./types.js").ComboboxDropdownEventSource) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((args_0: number) => any) | undefined;
     onClear?: (() => any) | undefined;
-    onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
-    onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
-    onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
+    onClose?: ((args_0: import("./types.js").ComboboxDropdownEventSource) => any) | undefined;
+    onSubmit?: ((args_0: string, args_1: import("./types.js").ComboboxItem<string, object>) => any) | undefined;
+    onOpen?: ((args_0: import("./types.js").ComboboxDropdownEventSource) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;