nuance-ui 0.1.23 → 0.1.25

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.23",
+  "version": "0.1.25",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -10,11 +10,14 @@ export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
     slot?: string;
 }
 export interface BreadcrumbsProps extends BoxProps {
+    /** Manual items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
     /** Separator icon between items @default `'gravity-ui:chevron-right'` */
     separator?: string;
     /** Controls spacing between separator and breadcrumb @default `'xs'` */
     spacing?: NuanceSpacing;
+    /** Function to determine if an item is active */
+    activeItem?: (item: BreadcrumbsItem) => boolean;
     color?: NuanceColor;
     size?: TextProps['fz'];
 }

package/dist/runtime/components/breadcrumbs.vue

@@ -11,11 +11,13 @@ const {
   spacing,
   separator = "gravity-ui:chevron-right",
   color = "primary",
-  size
+  size,
+  items
 } = defineProps({
   items: { type: null, required: false },
   separator: { type: String, required: false },
   spacing: { type: [String, Number], required: false },
+  activeItem: { type: Function, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },
   is: { type: null, required: false },
@@ -27,7 +29,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :is :mod :style :class='$style.root' aria-label='breadcrumb'>
+	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
 		<template v-for='(item, ix) in unref(items)' :key='ix'>
 			<Text
 				is='li'
@@ -38,8 +40,18 @@ const style = computed(() => ({
 				aria-hidden='true'
 			>
 				<NuxtLink v-slot='{ isActive }' v-bind='pickLinkProps(item).link' custom>
-					<slot :name='item.slot ?? "item"' :item='item' :ix='ix' :active='isActive'>
-						<Link v-bind='pickLinkProps(item).link' inherit :class='$style.item' :mod='{ active: isActive }'>
+					<slot
+						:name='item.slot ?? "item"'
+						:item='item'
+						:ix='ix'
+						:active='activeItem ? activeItem(item) : isActive'
+					>
+						<Link
+							v-bind='pickLinkProps(item).link'
+							inherit
+							:class='$style.item'
+							:mod='{ active: activeItem ? activeItem(item) : isActive }'
+						>
 							<Icon v-if='item?.icon' :name='item.icon' :class='$style.icon' />
 							<Text is='span' inherit truncate>
 								{{ item.label }}
@@ -65,8 +77,6 @@ const style = computed(() => ({
 	flex-wrap: wrap;
 	gap: var(--bc-spacing);
 	align-items: center;
-
-	list-style: none;
 }
 
 .breadcrumb {
@@ -82,6 +92,7 @@ const style = computed(() => ({
 	display: flex;
 	gap: .25rem;
 	align-items: center;
+	text-transform: capitalize;
 
 	font-weight: 600;
 

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

@@ -10,11 +10,14 @@ export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
     slot?: string;
 }
 export interface BreadcrumbsProps extends BoxProps {
+    /** Manual items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
     /** Separator icon between items @default `'gravity-ui:chevron-right'` */
     separator?: string;
     /** Controls spacing between separator and breadcrumb @default `'xs'` */
     spacing?: NuanceSpacing;
+    /** Function to determine if an item is active */
+    activeItem?: (item: BreadcrumbsItem) => boolean;
     color?: NuanceColor;
     size?: TextProps['fz'];
 }

package/dist/runtime/components/link/lib.d.ts

@@ -1,21 +1,21 @@
 import type { NuxtLinkProps } from '#app';
 export declare function pickLinkProps<T extends NuxtLinkProps>(props: T): {
     link: {
-        prefetch: NonNullable<import("vue").UnwrapRef<T["prefetch"]>> | undefined;
-        noPrefetch: NonNullable<import("vue").UnwrapRef<T["noPrefetch"]>> | undefined;
-        to?: import("vue").UnwrapRef<T["to"]> | undefined;
-        target?: import("vue").UnwrapRef<T["target"]> | undefined;
-        external?: import("vue").UnwrapRef<T["external"]> | undefined;
-        rel?: import("vue").UnwrapRef<T["rel"]> | undefined;
-        noRel?: import("vue").UnwrapRef<T["noRel"]> | undefined;
-        replace?: import("vue").UnwrapRef<T["replace"]> | undefined;
-        prefetchOn?: import("vue").UnwrapRef<T["prefetchOn"]> | undefined;
-        trailingSlash?: import("vue").UnwrapRef<T["trailingSlash"]> | undefined;
-        activeClass?: import("vue").UnwrapRef<T["activeClass"]> | undefined;
-        ariaCurrentValue?: import("vue").UnwrapRef<T["ariaCurrentValue"]> | undefined;
-        exactActiveClass?: import("vue").UnwrapRef<T["exactActiveClass"]> | undefined;
-        prefetchedClass?: import("vue").UnwrapRef<T["prefetchedClass"]> | undefined;
-        viewTransition?: import("vue").UnwrapRef<T["viewTransition"]> | undefined;
+        prefetch: NonNullable<T["prefetch"]> | undefined;
+        noPrefetch: NonNullable<T["noPrefetch"]> | undefined;
+        to?: T["to"] | undefined;
+        target?: T["target"] | undefined;
+        external?: T["external"] | undefined;
+        rel?: T["rel"] | undefined;
+        noRel?: T["noRel"] | undefined;
+        replace?: T["replace"] | undefined;
+        prefetchOn?: T["prefetchOn"] | undefined;
+        trailingSlash?: T["trailingSlash"] | undefined;
+        activeClass?: T["activeClass"] | undefined;
+        ariaCurrentValue?: T["ariaCurrentValue"] | undefined;
+        exactActiveClass?: T["exactActiveClass"] | undefined;
+        prefetchedClass?: T["prefetchedClass"] | undefined;
+        viewTransition?: T["viewTransition"] | undefined;
     };
-    rest: Omit<T, Extract<"to", keyof T> | Extract<"target", keyof T> | Extract<"external", keyof T> | Extract<"rel", keyof T> | Extract<"noRel", keyof T> | Extract<"prefetch", keyof T> | Extract<"noPrefetch", keyof T> | Extract<"replace", keyof T> | Extract<"prefetchOn", keyof T> | Extract<"trailingSlash", keyof T> | Extract<"activeClass", keyof T> | Extract<"ariaCurrentValue", keyof T> | Extract<"exactActiveClass", keyof T> | Extract<"prefetchedClass", keyof T> | Extract<"viewTransition", keyof T>>;
+    rest: Omit<T, "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "replace" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
 };

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

@@ -1,4 +1,3 @@
-import { reactiveOmit, reactivePick } from "@vueuse/core";
 const linkProps = [
   "to",
   "target",
@@ -17,13 +16,20 @@ const linkProps = [
   "viewTransition"
 ];
 export function pickLinkProps(props) {
-  const link = reactivePick(props, ...linkProps);
-  const rest = reactiveOmit(props, ...linkProps);
+  const link = {};
+  const rest = {};
+  for (const key in props) {
+    if (linkProps.includes(key)) {
+      link[key] = props[key];
+    } else {
+      rest[key] = props[key];
+    }
+  }
   return {
     link: {
       ...link,
-      prefetch: link?.prefetch || void 0,
-      noPrefetch: link?.noPrefetch || void 0
+      prefetch: link?.prefetch ?? void 0,
+      noPrefetch: link?.noPrefetch ?? void 0
     },
     rest
   };

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

@@ -155,8 +155,6 @@ const { handleClick, handleKeyDown } = useTreeItemHandlers(path, isFolder, expan
 
 	padding-inline-start: .75rem;
 	border-left: 1px solid var(--color-gray-4);
-
-	list-style: none;
 }
 
 .root {

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

@@ -84,7 +84,5 @@ if (removable) {
 	gap: .25rem;
 
 	padding-inline-start: 0;
-
-	list-style: none;
 }
 </style>

package/dist/runtime/components/tree/lib/item-handlers.d.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue';
 export declare function useTreeItemHandlers(path: string, isFolder: Ref<boolean>, expanded: Ref<boolean>): {
     handleClick: (event: MouseEvent) => void;
-    handleKeyDown: (event: KeyboardEvent) => any;
+    handleKeyDown: (event: KeyboardEvent) => void;
 };

package/dist/runtime/components/tree/lib/item-handlers.js

@@ -2,7 +2,7 @@ import { useRovingFocus } from "@nui/components";
 import { useTreeState } from "./context.js";
 export function useTreeItemHandlers(path, isFolder, expanded) {
   const ctx = useTreeState();
-  const { focus } = useRovingFocus();
+  const { focus } = useRovingFocus() ?? {};
   function handleClick(event) {
     if (event.shiftKey)
       ctx.toggle("select", path, "range");

package/dist/runtime/styles/baseline.css

@@ -1 +1 @@
-*,:after,:before{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{background-color:var(--color-body);color:var(--color-text);font-family:var(--font-family),sans-serif;font-size:var(--font-size-md);line-height:var(--line-height);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (max-device-width:em(500px)){body{-webkit-text-size-adjust:100%}}body:has(dialog[data-modal][open]){overflow:hidden}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}button{border:0}button,select{text-transform:none}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}
+*,:after,:before{box-sizing:border-box}*{margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{background-color:var(--color-body);color:var(--color-text);font-family:var(--font-family),sans-serif;font-size:var(--font-size-md);line-height:var(--line-height);margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media screen and (max-device-width:em(500px)){body{-webkit-text-size-adjust:100%}}body:has(dialog[data-modal][open]){overflow:hidden}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}button{border:0}button,select{text-transform:none}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}ol,ul{list-style:none;margin:0;padding:0}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.23",
+	"version": "0.1.25",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",