nuance-ui 0.1.29 → 0.1.31

package/dist/module.json

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

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

@@ -4,6 +4,7 @@ import type { BoxProps } from './box.vue.js';
 import type { LinkProps } from './link/index.js';
 import type { TextProps } from './text.vue.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    active?: boolean;
     label: string;
     icon?: string;
     class?: string;
@@ -16,15 +17,13 @@ export interface BreadcrumbsProps extends BoxProps {
     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'];
 }
 declare var __VLS_16: string, __VLS_17: {
     item: BreadcrumbsItem;
     ix: number;
-    active: any;
+    active: boolean;
 }, __VLS_32: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;

package/dist/runtime/components/breadcrumbs.vue

@@ -17,7 +17,6 @@ const {
   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 },
@@ -26,11 +25,12 @@ const {
 const style = computed(() => ({
   "--bc-spacing": getSpacing(spacing)
 }));
+const breadcrumbs = computed(() => unref(items) ?? []);
 </script>
 
 <template>
 	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
-		<template v-for='(item, ix) in unref(items)' :key='ix'>
+		<template v-for='(item, ix) in breadcrumbs' :key='ix'>
 			<Text
 				is='li'
 				:c='color'
@@ -39,18 +39,18 @@ const style = computed(() => ({
 				role='presentation'
 				aria-hidden='true'
 			>
-				<NuxtLink v-slot='{ isActive }' v-bind='pickLinkProps(item).link' custom>
+				<NuxtLink v-bind='pickLinkProps(item).link' custom>
 					<slot
 						:name='item.slot ?? "item"'
 						:item='item'
 						:ix='ix'
-						:active='activeItem ? activeItem(item) : isActive'
+						:active='item.active ?? ix === breadcrumbs.length - 1'
 					>
 						<Link
 							v-bind='pickLinkProps(item).link'
 							inherit
 							:class='$style.item'
-							:mod='{ active: activeItem ? activeItem(item) : isActive }'
+							:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
 						>
 							<Icon v-if='item?.icon' :name='item.icon' :class='$style.icon' />
 							<Text is='span' inherit truncate>
@@ -60,7 +60,7 @@ const style = computed(() => ({
 					</slot>
 				</NuxtLink>
 			</Text>
-			<li v-if='ix < unref(items).length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
+			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
 				<slot name='separator'>
 					<Icon :name='separator' />
 				</slot>

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

@@ -4,6 +4,7 @@ import type { BoxProps } from './box.vue.js';
 import type { LinkProps } from './link/index.js';
 import type { TextProps } from './text.vue.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
+    active?: boolean;
     label: string;
     icon?: string;
     class?: string;
@@ -16,15 +17,13 @@ export interface BreadcrumbsProps extends BoxProps {
     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'];
 }
 declare var __VLS_16: string, __VLS_17: {
     item: BreadcrumbsItem;
     ix: number;
-    active: any;
+    active: boolean;
 }, __VLS_32: {};
 type __VLS_Slots = {} & {
     [K in NonNullable<typeof __VLS_16>]?: (props: typeof __VLS_17) => any;

package/dist/runtime/components/input/ui/input-inline.vue

@@ -38,7 +38,7 @@ const mod = computed(() => [
 			<slot />
 
 			<div :class='$style.wrapper'>
-				<Box is='label' :class='$style.label' :for='id' :mod='{ disabled }'>
+				<Box is='label' v-if='label || $slots.label' :class='$style.label' :for='id' :mod='{ disabled }'>
 					<slot name='label'>
 						{{ label }}
 					</slot>
@@ -104,6 +104,10 @@ const mod = computed(() => [
 	&[data-disabled] {
 		--label-cursor: not-allowed;
 	}
+
+	&:empty {
+		display: none;
+	}
 }
 
 .label {

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

@@ -8,6 +8,7 @@ import Loader from "../../loader/loader.vue";
 import RovingFocusItem from "../../roving-focus/roving-focus-item.vue";
 import UTransition from "../../transition/transition.vue";
 import { useTreeState } from "../lib/context";
+import { filterTreeItems } from "../lib/filter-tree-items";
 import { useTreeItemHandlers } from "../lib/item-handlers";
 const {
   type = "file",
@@ -33,7 +34,8 @@ const ctx = useTreeState();
 const selected = computed(() => ctx.selected.value.includes(path));
 const expanded = computed(() => ctx.expanded.value.includes(path));
 const active = computed(() => ctx.active.value === path);
-const { data, pending, execute } = ctx.loadBranch(path);
+const { data: state, pending, execute } = ctx.loadBranch(path);
+const data = computed(() => filterTreeItems(state.value, ctx.filter));
 watch(expanded, (expanded2) => {
   if (expanded2) {
     try {

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

@@ -1,11 +1,12 @@
 import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
-import type { TreeIconResolver, TreeLoader, TreeModels } from '../model.js';
+import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../model.js';
 export type TreeRootProps = RovingFocusProps & {
     iconResolver?: TreeIconResolver;
     removable?: boolean;
     selectable?: boolean;
     loadBranch: TreeLoader;
+    filter?: TreeFilter;
     variant?: ButtonProps['variant'];
     color?: ButtonProps['color'];
     size?: ButtonProps['size'];

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

@@ -16,7 +16,8 @@ const {
   iconResolver = () => ({ icon: "gravity-ui:file" }),
   removable = false,
   selectable = false,
-  loadBranch
+  loadBranch,
+  filter
 } = defineProps({
   loop: { type: Boolean, required: false },
   orientation: { type: String, required: false },
@@ -25,6 +26,7 @@ const {
   removable: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false },
   loadBranch: { type: Function, required: true },
+  filter: { type: [String, null, Function], required: false },
   variant: { type: String, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false }
@@ -48,7 +50,8 @@ useProvideTreeState({
   color,
   variant,
   selectable,
-  loadBranch
+  loadBranch,
+  filter
 });
 if (removable) {
   useEventListener(root, "keydown", (event) => {

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

@@ -1,11 +1,12 @@
 import type { ButtonProps } from '@nui/components';
 import type { RovingFocusProps } from '../../roving-focus/roving-focus.vue.js';
-import type { TreeIconResolver, TreeLoader, TreeModels } from '../model.js';
+import type { TreeFilter, TreeIconResolver, TreeLoader, TreeModels } from '../model.js';
 export type TreeRootProps = RovingFocusProps & {
     iconResolver?: TreeIconResolver;
     removable?: boolean;
     selectable?: boolean;
     loadBranch: TreeLoader;
+    filter?: TreeFilter;
     variant?: ButtonProps['variant'];
     color?: ButtonProps['color'];
     size?: ButtonProps['size'];

package/dist/runtime/components/tree/lib/context.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonProps } from '@nui/components';
 import type { ModelRef, ShallowRef } from 'vue';
-import type { TreeIconResolver, TreeLoader } from '../model.js';
+import type { TreeFilter, TreeIconResolver, TreeLoader } from '../model.js';
 type EventType = 'select' | 'expand';
 type SelectMode = 'single' | 'multiple' | 'range';
 export interface TreeContext {
@@ -10,6 +10,7 @@ export interface TreeContext {
     expanded: ModelRef<string[]>;
     iconResolver: TreeIconResolver;
     loadBranch: TreeLoader;
+    filter?: TreeFilter;
     selectable: boolean;
     variant: ButtonProps['variant'];
     color: ButtonProps['color'];

package/dist/runtime/components/tree/lib/filter-tree-items.d.ts

@@ -0,0 +1,2 @@
+import type { TreeFilter, TreeItem } from '../model.js';
+export declare function filterTreeItems(items: TreeItem[] | undefined, filter?: TreeFilter): TreeItem[] | undefined;

package/dist/runtime/components/tree/lib/filter-tree-items.js

@@ -0,0 +1,7 @@
+export function filterTreeItems(items, filter) {
+  if (!filter || !items)
+    return items;
+  if (typeof filter === "string")
+    return items.filter((i) => i.type === filter);
+  return items.filter(filter);
+}

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

@@ -10,8 +10,6 @@ export function useTreeItemHandlers(path, isFolder, expanded) {
       ctx.toggle("select", path, "multiple");
     else
       ctx.toggle("select", path, "single");
-    if (isFolder.value && !event.ctrlKey && !event.metaKey && !event.shiftKey)
-      ctx.toggle("expand", path);
   }
   function handleKeyDown(event) {
     switch (event.key) {

package/dist/runtime/components/tree/model.d.ts

@@ -38,3 +38,4 @@ export type TreeIconResolver = (type: TreeItemType, name?: string, path?: string
     icon: string;
     color?: NuanceColor;
 };
+export type TreeFilter = 'directory' | null | ((item: TreeItem) => boolean);

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

@@ -1,12 +1,14 @@
 <script setup>
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import UTreeItem from "./_ui/tree-item.vue";
 import TreeRoot from "./_ui/tree-root.vue";
+import { filterTreeItems } from "./lib/filter-tree-items";
 const {
   color,
   variant = "subtle",
   size = "compact-sm",
   loadBranch,
+  filter = "directory",
   ...props
 } = defineProps({
   loop: { type: Boolean, required: false },
@@ -16,6 +18,7 @@ const {
   removable: { type: Boolean, required: false },
   selectable: { type: Boolean, required: false },
   loadBranch: { type: Function, required: true },
+  filter: { type: [String, null, Function], required: false },
   variant: { type: String, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false }
@@ -24,7 +27,8 @@ defineEmits(["delete"]);
 const active = defineModel("active", { type: [String, null], ...{ default: null } });
 const selected = defineModel("selected", { type: Array, ...{ default: [] } });
 const expanded = defineModel("expanded", { type: Array, ...{ default: [] } });
-const { data: root, execute } = loadBranch("/");
+const { data: state, execute } = loadBranch("/");
+const root = computed(() => filterTreeItems(state.value, filter));
 onMounted(execute);
 </script>
 
@@ -38,6 +42,7 @@ onMounted(execute);
 		:size
 		:color
 		:variant
+		:filter
 		@delete='(path) => $emit("delete", path)'
 	>
 		<UTreeItem

package/package.json

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

package/dist/runtime/components/tree/lib/get-default.d.ts

@@ -1,7 +0,0 @@
-import type { TreeItem } from '../model.js';
-/**
- * Получает все элементы дерева с expanded: true
- * @param items - массив элементов дерева
- * @returns массив value элементов с expanded: true
- */
-export declare function getExpandedItems<T extends string = string>(items: TreeItem<T>[]): T[];

package/dist/runtime/components/tree/lib/get-default.js

@@ -1,10 +0,0 @@
-export function getExpandedItems(items) {
-  const result = [];
-  for (const item of items) {
-    if (item.expanded === true)
-      result.push(item.value);
-    if (item.children && item.children.length > 0)
-      result.push(...getExpandedItems(item.children));
-  }
-  return result;
-}