nuance-ui 0.1.62 → 0.2.0

package/dist/runtime/components/tree/_ui/tree-item.vue

@@ -51,135 +51,136 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 </script>
 
 <template>
-	<li :class='$style.item' role='presentation'>
-		<RovingFocusItem>
-			<Button
-				:size='ctx.size'
-				:color='ctx.color'
-				:variant='ctx.variant'
-				:disabled
-				role='treeitem'
-				:classes='$style'
-				:aria-level='level'
-				:aria-selected='selected'
-				:mod='{ active, selected, "tree-item": path }'
-				right-section-p-e='all'
-				@click.prevent='handleClick'
-				@keydown.prevent='handleKeyDown'
-			>
-				<template #leftSection>
-					<template v-if='pending'>
-						<Loader :class='$style.icon' />
-					</template>
-
-					<template v-else-if='isFolder'>
-						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
-						<Icon v-else :class='$style.icon' :name='icon' />
-					</template>
-
-					<template v-else>
-						<Icon
-							:class='$style.icon'
-							:name='fileIcon'
-							:style='{ color: color && getThemeColor(color, theme) }'
-						/>
-					</template>
-				</template>
-
-				{{ name ?? path }}
-
-				<template v-if='isFolder' #rightSection>
-					<ActionIcon
-						icon='gravity-ui:chevron-down'
-						size='sm'
-						:color='ctx.color'
-						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
-						:mod='{ expanded }'
-						variant='subtle'
-						@click.stop='ctx.toggle("expand", path)'
-					/>
-				</template>
-			</Button>
-		</RovingFocusItem>
-
-		<UTransition name='scale-y'>
-			<ul
-				v-if='expanded && data && data.length > 0'
-				:class='$style.list'
-				role='group'
-			>
-				<TreeItem
-					v-for='child in data'
-					:key='child.path'
-					v-bind='child'
-					:path='child.path'
-					:level='level + 1'
-				/>
-			</ul>
-		</UTransition>
-	</li>
+	<li :class='$style.item' role='presentation'>
+		<RovingFocusItem>
+			<Button
+				:size='ctx.size'
+				:color='ctx.color'
+				:variant='ctx.variant'
+				:disabled
+				role='treeitem'
+				:classes='$style'
+				:aria-level='level'
+				:aria-selected='selected'
+				:mod='{ active, selected, "tree-item": path }'
+				right-section-p-e='all'
+				@click.prevent='handleClick'
+				@keydown.prevent='handleKeyDown'
+			>
+				<template #leftSection>
+					<template v-if='pending'>
+						<Loader :class='$style.icon' />
+					</template>
+
+					<template v-else-if='isFolder'>
+						<Icon v-if='expanded' :class='$style.icon' :name='trailingIcon' />
+						<Icon v-else :class='$style.icon' :name='icon' />
+					</template>
+
+					<template v-else>
+						<Icon
+							:class='$style.icon'
+							:name='fileIcon'
+							:style='{ color: color && getThemeColor(color, theme) }'
+						/>
+					</template>
+				</template>
+
+				{{ name ?? path }}
+
+				<template v-if='isFolder' #rightSection>
+					<ActionIcon
+						icon='gravity-ui:chevron-down'
+						size='sm'
+						:color='ctx.color'
+						:classes='{ root: $style.chevron, icon: $style["chevron-icon"] }'
+						:mod='{ expanded }'
+						variant='subtle'
+						@click.stop='ctx.toggle("expand", path)'
+					/>
+				</template>
+			</Button>
+		</RovingFocusItem>
+
+		<UTransition name='scale-y'>
+			<ul
+				v-if='expanded && data && data.length > 0'
+				:class='$style.list'
+				role='group'
+			>
+				<TreeItem
+					v-for='child in data'
+					:key='child.path'
+					v-bind='child'
+					:path='child.path'
+					:level='level + 1'
+				/>
+			</ul>
+		</UTransition>
+	</li>
 </template>
 
 <style module lang="postcss">
-.item {
-	display: grid;
-	gap: .25rem;
-}
-
-.icon {
-	--loader-size: var(--tree-icon-size);
-
-	width: var(--tree-icon-size);
-	height: var(--tree-icon-size);
-}
-
-.chevron {
-	color: var(--color-dimmed);
-
-	transition: transform .3s ease-in-out;
-
-	&:hover {
-		color: var(--color-dimmed);
-
-		background-color: transparent;
-	}
-
-	&[data-expanded] .chevron-icon {
-		transform: rotate(-180deg);
-	}
-}
-
-.list {
-	display: grid;
-	gap: .25rem;
-
-	margin-inline-start: 1rem;
-
-	padding-inline-start: .75rem;
-	border-left: 1px solid var(--color-gray-4);
-}
-
-.root {
-	.inner {
-		display: grid;
-		grid-template-columns: auto 1fr auto;
-
-		color: var(--color-text);
-
-		.label {
-			font-weight: 500;
-		}
-	}
-
-	&[data-active],
-	&[data-selected] {
-		.inner {
-			color: var(--button-color);
-		}
-	}
-
-	&[data-selected] {
-		background: alpha(var(--button-color), .1);
-	}
-}
+.item {
+	display: grid;
+	gap: .25rem;
+}
+
+.icon {
+	--loader-size: var(--tree-icon-size);
+
+	width: var(--tree-icon-size);
+	height: var(--tree-icon-size);
+}
+
+.chevron {
+	color: var(--color-dimmed);
+
+	transition: transform .3s ease-in-out;
+
+	&:hover {
+		color: var(--color-dimmed);
+
+		background-color: transparent;
+	}
+
+	&[data-expanded] .chevron-icon {
+		transform: rotate(-180deg);
+	}
+}
+
+
+.list {
+	display: grid;
+	gap: .25rem;
+
+	margin-inline-start: 1rem;
+
+	padding-inline-start: .75rem;
+	border-left: 1px solid var(--color-gray-4);
+}
+
+.root {
+	.inner {
+		display: grid;
+		grid-template-columns: auto 1fr auto;
+
+		color: var(--color-text);
+
+		.label {
+			font-weight: 500;
+		}
+	}
+
+	&[data-active],
+	&[data-selected] {
+		.inner {
+			color: var(--button-color);
+		}
+	}
+
+	&[data-selected] {
+		background: alpha(var(--button-color), .1);
+	}
+}
 </style>

package/dist/runtime/components/tree/_ui/tree-root.vue

@@ -64,28 +64,28 @@ if (removable) {
 </script>
 
 <template>
-	<RovingFocus :attr :loop :orientation>
-		<Box
-			is='ul'
-			ref='parent'
-			role='tree'
-			:style
-			:class='$style.root'
-			@keydown.esc.prevent='selected = []'
-		>
-			<slot />
-		</Box>
-	</RovingFocus>
+	<RovingFocus :attr :loop :orientation>
+		<Box
+			is='ul'
+			ref='parent'
+			role='tree'
+			:style
+			:class='$style.root'
+			@keydown.esc.prevent='selected = []'
+		>
+			<slot />
+		</Box>
+	</RovingFocus>
 </template>
 
 <style module lang="postcss">
-.root {
-	--tree-icon-size: var(--spacing-md);
-
-	display: flex;
-	flex-direction: column;
-	gap: .25rem;
-
-	padding-inline-start: 0;
-}
+.root {
+	--tree-icon-size: var(--spacing-md);
+
+	display: flex;
+	flex-direction: column;
+	gap: .25rem;
+
+	padding-inline-start: 0;
+}
 </style>

package/dist/runtime/components/tree/tree.vue

@@ -33,24 +33,24 @@ onMounted(execute);
 </script>
 
 <template>
-	<TreeRoot
-		v-bind='props'
-		v-model:active='active'
-		v-model:selected='selected'
-		v-model:expanded='expanded'
-		:load-branch
-		:size
-		:color
-		:variant
-		:filter
-		@delete='(path) => $emit("delete", path)'
-	>
-		<UTreeItem
-			v-for='item in root'
-			:key='item.path'
-			v-bind='item'
-			:path='item.path'
-			:level='1'
-		/>
-	</TreeRoot>
+	<TreeRoot
+		v-bind='props'
+		v-model:active='active'
+		v-model:selected='selected'
+		v-model:expanded='expanded'
+		:load-branch
+		:size
+		:color
+		:variant
+		:filter
+		@delete='(path) => $emit("delete", path)'
+	>
+		<UTreeItem
+			v-for='item in root'
+			:key='item.path'
+			v-bind='item'
+			:path='item.path'
+			:level='1'
+		/>
+	</TreeRoot>
 </template>

package/dist/runtime/components/visually-hidden/visually-hidden-input.vue

@@ -12,5 +12,5 @@ const value = defineModel({ type: null });
 </script>
 
 <template>
-	<VisuallyHidden v-bind='{ ...props, ...$attrs }' is='input' v-model='value' />
+	<VisuallyHidden v-bind='{ ...props, ...$attrs }' is='input' v-model='value' />
 </template>

package/dist/runtime/components/visually-hidden/visually-hidden.vue

@@ -8,15 +8,15 @@ const { feature, ...rest } = defineProps({
 </script>
 
 <template>
-	<Box
-		:aria-hidden='feature === "focusable" ? "true" : void 0'
-		:data-hidden='feature === "fully-hidden" ? "true" : void 0'
-		:tabindex='feature === "fully-hidden" ? "-1" : void 0'
-		v-bind='rest'
-		class='root'
-	>
-		<slot />
-	</Box>
+	<Box
+		:aria-hidden='feature === "focusable" ? "true" : void 0'
+		:data-hidden='feature === "fully-hidden" ? "true" : void 0'
+		:tabindex='feature === "fully-hidden" ? "-1" : void 0'
+		v-bind='rest'
+		class='root'
+	>
+		<slot />
+	</Box>
 </template>
 
 <style scoped>

package/dist/runtime/helpers/date/create-months.js

@@ -1,5 +1,5 @@
 import { addDay, monthEnd, monthStart, weekEnd, weekStart } from "@formkit/tempo";
-import { chunk } from "@nui/utils";
+import { chunk } from "es-toolkit";
 import { getDaysBetween } from "./get-days-between.js";
 export function createMonth(date, config, fixedWeeks) {
   const startOfMonth = monthStart(date);

package/dist/runtime/modals/_confirm-modal/confirm-modal.vue

@@ -45,37 +45,37 @@ async function hanleConfirm() {
 </script>
 
 <template>
-	<ModalRoot v-model:open='opened' v-bind='rest' :close-on-click-outside size='sm'>
-		<ModalHeader>
-			<Title order='4'>
-				{{ title }}
-			</Title>
-			<ModalCloseButton />
-		</ModalHeader>
-
-		<p v-if='body' :class='$style.body'>
-			{{ body }}
-		</p>
-
-		<footer :class='$style.footer'>
-			<Button
-				variant='default'
-				v-bind='cancelProps'
-				@click='handleCancel()'
-			>
-				{{ labels?.cancel ?? "Cancel" }}
-			</Button>
-			<Button
-				variant='filled'
-				v-bind='confirmProps'
-				:color="variant === 'danger' ? 'red' : void 0"
-				:loading
-				@click='hanleConfirm()'
-			>
-				{{ labels?.confirm ?? "Confirm" }}
-			</Button>
-		</footer>
-	</ModalRoot>
+	<ModalRoot v-model:open='opened' v-bind='rest' :close-on-click-outside size='sm'>
+		<ModalHeader>
+			<Title order='4'>
+				{{ title }}
+			</Title>
+			<ModalCloseButton />
+		</ModalHeader>
+
+		<p v-if='body' :class='$style.body'>
+			{{ body }}
+		</p>
+
+		<footer :class='$style.footer'>
+			<Button
+				variant='default'
+				v-bind='cancelProps'
+				@click='handleCancel()'
+			>
+				{{ labels?.cancel ?? "Cancel" }}
+			</Button>
+			<Button
+				variant='filled'
+				v-bind='confirmProps'
+				:color="variant === 'danger' ? 'red' : void 0"
+				:loading
+				@click='hanleConfirm()'
+			>
+				{{ labels?.confirm ?? "Confirm" }}
+			</Button>
+		</footer>
+	</ModalRoot>
 </template>
 
 <style module>

package/dist/runtime/modals/modals-provider.vue

@@ -9,14 +9,14 @@ defineExpose({
 </script>
 
 <template>
-	<ClientOnly>
-		<div id='nui-modals-root'>
-			<component
-				:is='entry.component'
-				v-for='[id, entry] in $props.manager?.modals ?? $modals.modals'
-				:key='id'
-				v-bind='entry.props'
-			/>
-		</div>
-	</ClientOnly>
+	<ClientOnly>
+		<div id='nui-modals-root'>
+			<component
+				:is='entry.component'
+				v-for='[id, entry] in $props.manager?.modals ?? $modals.modals'
+				:key='id'
+				v-bind='entry.props'
+			/>
+		</div>
+	</ClientOnly>
 </template>

package/dist/runtime/utils/color-functions/get-gradient.js

@@ -1,5 +1,5 @@
 import { DEFAULT_GRADIENT } from "../../const/index.js";
-import { parseThemeColor } from "../parse-theme-color/parse-theme-color.js";
+import { parseThemeColor } from "./parse-theme-color.js";
 export function getGradient(gradient, theme) {
   const merged = {
     from: gradient?.from || DEFAULT_GRADIENT.from,

package/dist/runtime/utils/{parse-theme-color → color-functions}/parse-theme-color.js

@@ -1,4 +1,4 @@
-import { getColorVar } from "../get-color-var.js";
+import { getColorVar } from "./get-color-var.js";
 const themeColors = [
   "dark",
   "slate",

package/dist/runtime/utils/{vars-resolver/create-variant-color-resolver.js → create-variant-color-resolver.js}

@@ -1,6 +1,6 @@
-import { DEFAULT_GRADIENT } from "../../const/index.js";
-import { getGradient, getGradientOutline } from "../color-functions/get-gradient.js";
-import { getThemeColor, parseThemeColor } from "../parse-theme-color/parse-theme-color.js";
+import { DEFAULT_GRADIENT } from "../const/index.js";
+import { getGradient, getGradientOutline } from "./color-functions/get-gradient.js";
+import { getThemeColor, parseThemeColor } from "./color-functions/parse-theme-color.js";
 export function createVariantColorResolver({
   color = "primary",
   variant,

package/dist/runtime/utils/{get-size/get-size.js → get-size.js}

@@ -1,5 +1,5 @@
-import { isNumberLike } from "../boolean/is-number-like.js";
-import { rem } from "../converters/rem.js";
+import { isNumberLike } from "./boolean/is-number-like.js";
+import { rem } from "./converters/rem.js";
 export function getSize(size, prefix = "size", convertToRem = true) {
   if (size === void 0) {
     return void 0;

package/dist/runtime/utils/index.d.ts

@@ -1,10 +1,8 @@
 export { isFalsy } from './boolean/is-falsy.js';
-export * from './chunk.js';
 export { getGradient } from './color-functions/get-gradient.js';
+export { getThemeColor, parseThemeColor } from './color-functions/parse-theme-color.js';
 export { em, rem } from './converters/rem.js';
+export { createVariantColorResolver } from './create-variant-color-resolver.js';
 export * from './get-mod.js';
-export { getSafeId } from './get-safe-id.js';
-export * from './get-size/get-size.js';
-export { getThemeColor, parseThemeColor } from './parse-theme-color/parse-theme-color.js';
+export * from './get-size.js';
 export * from './tree.js';
-export { createVariantColorResolver } from './vars-resolver/create-variant-color-resolver.js';

package/dist/runtime/utils/index.js

@@ -1,10 +1,8 @@
 export { isFalsy } from "./boolean/is-falsy.js";
-export * from "./chunk.js";
 export { getGradient } from "./color-functions/get-gradient.js";
+export { getThemeColor, parseThemeColor } from "./color-functions/parse-theme-color.js";
 export { em, rem } from "./converters/rem.js";
+export { createVariantColorResolver } from "./create-variant-color-resolver.js";
 export * from "./get-mod.js";
-export { getSafeId } from "./get-safe-id.js";
-export * from "./get-size/get-size.js";
-export { getThemeColor, parseThemeColor } from "./parse-theme-color/parse-theme-color.js";
+export * from "./get-size.js";
 export * from "./tree.js";
-export { createVariantColorResolver } from "./vars-resolver/create-variant-color-resolver.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.62",
+	"version": "0.2.0",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",
@@ -30,7 +30,7 @@
 		"dev": "npm run dev:prepare && nuxi dev playground",
 		"dev:build": "nuxi build playground",
 		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-		"release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+		"release": "npm run lint && npm run test && npm run prepack && changelogen --release --major && npm publish && git push --follow-tags",
 		"lint": "eslint .",
 		"test": "vitest run",
 		"test:watch": "vitest watch",

package/dist/runtime/server/tsconfig.json

@@ -1,3 +0,0 @@
-{
-	"extends": "../../../.nuxt/tsconfig.server.json"
-}

package/dist/runtime/utils/chunk.d.ts

@@ -1,12 +0,0 @@
-/**
- * Splits an array into chunks of a given size.
- * @param arr The array to split.
- * @param size The size of each chunk.
- * @returns An array of arrays, where each sub-array has `size` elements from the original array.
- * @example ```ts
- * const arr = [1, 2, 3, 4, 5, 6, 7, 8];
- * const chunks = chunk(arr, 3);
- * // chunks = [[1, 2, 3], [4, 5, 6], [7, 8]]
- * ```
- */
-export declare function chunk<T>(arr: T[], size: number): T[][];

package/dist/runtime/utils/chunk.js

@@ -1,6 +0,0 @@
-export function chunk(arr, size) {
-  const result = [];
-  for (let i = 0; i < arr.length; i += size)
-    result.push(arr.slice(i, i + size));
-  return result;
-}

package/dist/runtime/utils/get-safe-id.d.ts

@@ -1 +0,0 @@
-export declare function getSafeId(uid: string, errorMessage: string): (value: string) => string;

package/dist/runtime/utils/get-safe-id.js

@@ -1,8 +0,0 @@
-export function getSafeId(uid, errorMessage) {
-  return (value) => {
-    if (typeof value !== "string" || value.trim().length === 0) {
-      throw new Error(errorMessage);
-    }
-    return `${uid}-${value}`;
-  };
-}