nuance-ui 0.1.26 → 0.1.28

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

@@ -0,0 +1,48 @@
+import type { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowPinningState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
+import type { TableData, TableProps, TableSlots } from './model.js';
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(TableProps<T> & {
+        globalFilter?: string;
+        columnFilters?: ColumnFiltersState;
+        columnOrder?: ColumnOrderState;
+        columnVisibility?: VisibilityState;
+        columnPinning?: ColumnPinningState;
+        columnSizing?: ColumnSizingState;
+        columnSizingInfo?: ColumnSizingInfoState;
+        rowSelection?: RowSelectionState;
+        rowPinning?: RowPinningState;
+        sorting?: SortingState;
+        grouping?: GroupingState;
+        expanded?: ExpandedState;
+        pagination?: PaginationState;
+    }) & {
+        "onUpdate:globalFilter"?: ((value: string | undefined) => any) | undefined;
+        "onUpdate:columnFilters"?: ((value: ColumnFiltersState | undefined) => any) | undefined;
+        "onUpdate:columnOrder"?: ((value: ColumnOrderState | undefined) => any) | undefined;
+        "onUpdate:columnVisibility"?: ((value: VisibilityState | undefined) => any) | undefined;
+        "onUpdate:columnPinning"?: ((value: ColumnPinningState | undefined) => any) | undefined;
+        "onUpdate:columnSizing"?: ((value: ColumnSizingState | undefined) => any) | undefined;
+        "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState | undefined) => any) | undefined;
+        "onUpdate:rowSelection"?: ((value: RowSelectionState | undefined) => any) | undefined;
+        "onUpdate:rowPinning"?: ((value: RowPinningState | undefined) => any) | undefined;
+        "onUpdate:sorting"?: ((value: SortingState | undefined) => any) | undefined;
+        "onUpdate:grouping"?: ((value: GroupingState | undefined) => any) | undefined;
+        "onUpdate:expanded"?: ((value: ExpandedState | undefined) => any) | undefined;
+        "onUpdate:pagination"?: ((value: PaginationState | undefined) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+        tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
+        table: import("@tanstack/table-core").Table<T>;
+    }>) => void;
+    attrs: any;
+    slots: TableSlots<T>;
+    emit: ((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/table/table.vue

@@ -0,0 +1,535 @@
+<script setup>
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  useVueTable
+} from "@tanstack/vue-table";
+import { useVirtualizer } from "@tanstack/vue-virtual";
+import { reactivePick, unrefElement } from "@vueuse/core";
+import { useStyleResolver } from "#imports";
+import defu from "defu";
+import { computed, ref, toRef, useTemplateRef, watch } from "vue";
+import { getThemeColor } from "../../utils";
+import Box from "../box.vue";
+import TableRow from "./_ui/table-row.vue";
+import { processColumns, resolveValue, valueUpdater } from "./lib";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  data: { type: Array, required: false },
+  columns: { type: Array, required: false },
+  caption: { type: String, required: false },
+  meta: { type: Object, required: false },
+  virtualize: { type: [Boolean, Object], required: false },
+  empty: { type: String, required: false },
+  sticky: { type: [Boolean, String], required: false },
+  loading: { type: Boolean, required: false },
+  loadingColor: { type: null, required: false },
+  verticalAlign: { type: null, required: false },
+  onSelect: { type: Function, required: false },
+  onHover: { type: Function, required: false },
+  onContextmenu: { type: [Function, Array], required: false },
+  classes: { type: Object, required: false },
+  watchOptions: { type: Object, required: false },
+  globalFilterOptions: { type: Object, required: false },
+  columnFiltersOptions: { type: Object, required: false },
+  columnPinningOptions: { type: Object, required: false },
+  columnSizingOptions: { type: Object, required: false },
+  visibilityOptions: { type: Object, required: false },
+  sortingOptions: { type: Object, required: false },
+  groupingOptions: { type: Object, required: false },
+  expandedOptions: { type: Object, required: false },
+  rowSelectionOptions: { type: Object, required: false },
+  rowPinningOptions: { type: Object, required: false },
+  paginationOptions: { type: Object, required: false },
+  facetedOptions: { type: Object, required: false },
+  state: { type: Object, required: false },
+  onStateChange: { type: Function, required: false },
+  renderFallbackValue: { type: null, required: false },
+  _features: { type: Array, required: false },
+  autoResetAll: { type: Boolean, required: false },
+  debugAll: { type: Boolean, required: false },
+  debugCells: { type: Boolean, required: false },
+  debugColumns: { type: Boolean, required: false },
+  debugHeaders: { type: Boolean, required: false },
+  debugRows: { type: Boolean, required: false },
+  debugTable: { type: Boolean, required: false },
+  defaultColumn: { type: Object, required: false },
+  getRowId: { type: Function, required: false },
+  getSubRows: { type: Function, required: false },
+  initialState: { type: Object, required: false },
+  mergeOptions: { type: Function, required: false }
+});
+defineSlots();
+const data = ref(props.data ?? []);
+const meta = computed(() => props?.meta ?? {});
+const columns = computed(() => processColumns(props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey) => ({ accessorKey, header: accessorKey }))));
+const hasFooter = computed(() => {
+  function hasFooterRecursive(columns2) {
+    for (const column of columns2) {
+      if ("footer" in column)
+        return true;
+      if ("columns" in column && hasFooterRecursive(column.columns))
+        return true;
+    }
+    return false;
+  }
+  return hasFooterRecursive(columns.value);
+});
+const globalFilterState = defineModel("globalFilter", { type: String });
+const columnFiltersState = defineModel("columnFilters", { type: Array });
+const columnOrderState = defineModel("columnOrder", { type: Array });
+const columnVisibilityState = defineModel("columnVisibility", { type: Object });
+const columnPinningState = defineModel("columnPinning", { type: Object });
+const columnSizingState = defineModel("columnSizing", { type: Object });
+const columnSizingInfoState = defineModel("columnSizingInfo", { type: Object });
+const rowSelectionState = defineModel("rowSelection", { type: Object });
+const rowPinningState = defineModel("rowPinning", { type: Object });
+const sortingState = defineModel("sorting", { type: Array });
+const groupingState = defineModel("grouping", { type: Array });
+const expandedState = defineModel("expanded", { type: [Boolean, Object] });
+const paginationState = defineModel("pagination", { type: Object });
+const tableProps = reactivePick(props, "_features", "autoResetAll", "debugAll", "debugCells", "debugColumns", "debugHeaders", "debugRows", "debugTable", "defaultColumn", "getRowId", "getSubRows", "initialState", "mergeOptions", "renderFallbackValue");
+const rootRef = useTemplateRef("rootRef");
+const tableRef = useTemplateRef("tableRef");
+const table = useVueTable({
+  ...tableProps,
+  get data() {
+    return data.value;
+  },
+  get columns() {
+    return columns.value;
+  },
+  meta: meta.value,
+  getCoreRowModel: getCoreRowModel(),
+  ...props.globalFilterOptions || {},
+  ...globalFilterState.value !== void 0 && {
+    onGlobalFilterChange: (updaterOrValue) => valueUpdater(updaterOrValue, globalFilterState)
+  },
+  ...props.columnFiltersOptions || {},
+  getFilteredRowModel: getFilteredRowModel(),
+  ...columnFiltersState.value !== void 0 && {
+    onColumnFiltersChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnFiltersState)
+  },
+  ...columnOrderState.value !== void 0 && {
+    onColumnOrderChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnOrderState)
+  },
+  ...props.visibilityOptions || {},
+  ...columnVisibilityState.value !== void 0 && {
+    onColumnVisibilityChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnVisibilityState)
+  },
+  ...props.columnPinningOptions || {},
+  ...columnPinningState.value !== void 0 && {
+    onColumnPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnPinningState)
+  },
+  ...props.columnSizingOptions || {},
+  ...columnSizingState.value !== void 0 && {
+    onColumnSizingChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingState)
+  },
+  ...columnSizingInfoState.value !== void 0 && {
+    onColumnSizingInfoChange: (updaterOrValue) => valueUpdater(updaterOrValue, columnSizingInfoState)
+  },
+  ...props.rowSelectionOptions || {},
+  ...rowSelectionState.value !== void 0 && {
+    onRowSelectionChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowSelectionState)
+  },
+  ...props.rowPinningOptions || {},
+  ...rowPinningState.value !== void 0 && {
+    onRowPinningChange: (updaterOrValue) => valueUpdater(updaterOrValue, rowPinningState)
+  },
+  ...props.sortingOptions || {},
+  getSortedRowModel: getSortedRowModel(),
+  ...sortingState.value !== void 0 && {
+    onSortingChange: (updaterOrValue) => valueUpdater(updaterOrValue, sortingState)
+  },
+  ...props.groupingOptions || {},
+  ...groupingState.value !== void 0 && {
+    onGroupingChange: (updaterOrValue) => valueUpdater(updaterOrValue, groupingState)
+  },
+  ...props.expandedOptions || {},
+  getExpandedRowModel: getExpandedRowModel(),
+  ...expandedState.value !== void 0 && {
+    onExpandedChange: (updaterOrValue) => valueUpdater(updaterOrValue, expandedState)
+  },
+  ...props.paginationOptions || {},
+  ...paginationState.value !== void 0 && {
+    onPaginationChange: (updaterOrValue) => valueUpdater(updaterOrValue, paginationState)
+  },
+  ...props.facetedOptions || {},
+  state: {
+    get globalFilter() {
+      return globalFilterState.value;
+    },
+    get columnFilters() {
+      return columnFiltersState.value;
+    },
+    get columnOrder() {
+      return columnOrderState.value;
+    },
+    get columnVisibility() {
+      return columnVisibilityState.value;
+    },
+    get columnPinning() {
+      return columnPinningState.value;
+    },
+    get expanded() {
+      return expandedState.value;
+    },
+    get rowSelection() {
+      return rowSelectionState.value;
+    },
+    get sorting() {
+      return sortingState.value;
+    },
+    get grouping() {
+      return groupingState.value;
+    },
+    get rowPinning() {
+      return rowPinningState.value;
+    },
+    get columnSizing() {
+      return columnSizingState.value;
+    },
+    get columnSizingInfo() {
+      return columnSizingInfoState.value;
+    },
+    get pagination() {
+      return paginationState.value;
+    }
+  }
+});
+const rows = computed(() => table.getRowModel().rows);
+watch(() => props.data, () => {
+  data.value = props.data ? [...props.data] : [];
+}, props.watchOptions);
+const virtualizerProps = toRef(() => defu(typeof props.virtualize === "boolean" ? {} : props.virtualize, {
+  estimateSize: 65,
+  overscan: 12
+}));
+const virtualizer = !!props.virtualize && useVirtualizer({
+  ...virtualizerProps.value,
+  get count() {
+    return rows.value.length;
+  },
+  getScrollElement: () => unrefElement(rootRef),
+  estimateSize: (index) => {
+    const estimate = virtualizerProps.value.estimateSize;
+    return typeof estimate === "function" ? estimate(index) : estimate;
+  }
+});
+const renderedSize = computed(() => {
+  if (!virtualizer)
+    return 0;
+  const virtualItems = virtualizer.value.getVirtualItems();
+  if (!virtualItems?.length)
+    return 0;
+  return virtualItems.reduce((sum, item) => sum + item.size, 0);
+});
+const style = computed(() => useStyleResolver((theme) => ({
+  "--table-loader-color": props.loadingColor ? getThemeColor(props.loadingColor, theme) : void 0,
+  "--vertical-align": props.verticalAlign
+})));
+defineExpose({
+  get $el() {
+    return unrefElement(rootRef);
+  },
+  tableRef,
+  table
+});
+</script>
+
+<template>
+	<Box
+		ref='rootRef'
+		:class='[$style.root, props.classes?.root]'
+		:style='[
+  virtualizer ? { height: `${virtualizer.getTotalSize()}px` } : void 0,
+  style
+]'
+		:mod='{ virtualize: !!virtualizer }'
+	>
+		<table ref='tableRef' :class='[$style.table, props.classes?.table]'>
+			<caption v-if='caption || $slots.caption' :class='props.classes?.caption'>
+				<slot name='caption'>
+					{{ props.caption }}
+				</slot>
+			</caption>
+
+			<Box
+				is='thead'
+				:class='$style.thead'
+				:mod='{
+  sticky: props.sticky === "header" || props.sticky === true,
+  loading: props.loading
+}'
+			>
+				<tr v-for='headerGroup in table.getHeaderGroups()' :key='headerGroup.id' :class='$style.tr'>
+					<Box
+						is='th'
+						v-for='header in headerGroup.headers'
+						:key='header.id'
+						:mod='{ pinned: header.column.getIsPinned() }'
+						:scope="header.colSpan > 1 ? 'colgroup' : 'col'"
+						:colspan='header.colSpan > 1 ? header.colSpan : void 0'
+						:rowspan='header.rowSpan > 1 ? header.rowSpan : void 0'
+						:class='[$style.th, props.classes?.th, resolveValue(header.column.columnDef.meta?.class?.th, header)]'
+						:style='resolveValue(header.column.columnDef.meta?.style?.th, header)'
+					>
+						<slot :name='`${header.id}-header`' v-bind='header.getContext()'>
+							<FlexRender
+								v-if='!header.isPlaceholder'
+								:render='header.column.columnDef.header'
+								:props='header.getContext()'
+							/>
+						</slot>
+					</Box>
+				</tr>
+
+				<tr :class='[$style.separator, props.classes?.separator]' />
+			</Box>
+
+			<tbody :class='[$style.tbody, props.classes?.tbody]'>
+				<slot name='body-top' />
+
+				<template v-if='rows.length'>
+					<template v-if='virtualizer'>
+						<template v-for='(virtualRow, index) in virtualizer.getVirtualItems()' :key='rows[virtualRow.index]?.id'>
+							<TableRow
+								:row='rows[virtualRow.index]'
+								:class='[$style.tr, props.classes?.tr, resolveValue(table.options.meta?.class?.tr, virtualRow)]'
+								:style='[
+  {
+    height: `${virtualRow.size}px`,
+    transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`
+  },
+  resolveValue(table.options.meta?.style?.tr, virtualRow)
+]'
+								:on-select='props?.onSelect'
+								:on-hover='props?.onHover'
+								:on-contextmenu='props?.onContextmenu'
+							/>
+						</template>
+					</template>
+
+					<template v-else>
+						<TableRow
+							v-for='row in rows'
+							:key='row.id'
+							:row='row'
+							:class='[$style.tr, props.classes?.tr, resolveValue(table.options.meta?.class?.tr, row)]'
+							:style='resolveValue(table.options.meta?.style?.tr, row)'
+							:on-select='props?.onSelect'
+							:on-hover='props?.onHover'
+							:on-contextmenu='props?.onContextmenu'
+						/>
+					</template>
+				</template>
+
+				<tr v-else-if='loading && !!$slots.loading'>
+					<td :colspan='table.getAllLeafColumns().length' :class='[$style.loading, props.classes?.loading]'>
+						<slot name='loading' />
+					</td>
+				</tr>
+
+				<tr v-else>
+					<td :colspan='table.getAllLeafColumns().length' :class='[$style.empty, props.classes?.empty]'>
+						<slot name='empty'>
+							{{ empty || "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }}
+						</slot>
+					</td>
+				</tr>
+
+				<slot name='body-bottom' />
+			</tbody>
+
+			<Box
+				is='tfoot'
+				v-if='hasFooter'
+				:class='[$style.tfoot, props.classes?.tfoot]'
+				:style='virtualizer ? { transform: `translateY(${virtualizer.getTotalSize() - renderedSize}px)` } : void 0'
+				:mod='{ sticky: props.sticky === "footer" || props.sticky === true }'
+			>
+				<tr :class='[$style.separator, props.classes?.separator]' />
+
+				<tr v-for='footerGroup in table.getFooterGroups()' :key='footerGroup.id' :class='[$style.tr, props.classes?.tr]'>
+					<Box
+						is='th'
+						v-for='header in footerGroup.headers'
+						:key='header.id'
+						:mod='{ pinned: header.column.getIsPinned() }'
+						:colspan='header.colSpan > 1 ? header.colSpan : void 0'
+						:rowspan='header.rowSpan > 1 ? header.rowSpan : void 0'
+						:class='[$style.th, props.classes?.th, resolveValue(header.column.columnDef.meta?.class?.th, header)]'
+						:style='resolveValue(header.column.columnDef.meta?.style?.th, header)'
+					>
+						<slot :name='`${header.id}-footer`' v-bind='header.getContext()'>
+							<FlexRender
+								v-if='!header.isPlaceholder'
+								:render='header.column.columnDef.footer'
+								:props='header.getContext()'
+							/>
+						</slot>
+					</Box>
+				</tr>
+			</Box>
+		</table>
+	</Box>
+</template>
+
+<style lang="postcss" module>
+.root {
+	--table-color: var(--color-primary-4);
+	--table-loader-color: var(--table-color);
+	--table-loader-animation: carousel 2s ease-in-out infinite;
+	--table-padding-x: .5rem;
+	--table-padding-y: .5rem;
+	--vertical-align: baseline;
+
+	@mixin where-light {
+		--table-active-bg: alpha(var(--color-slate-1), .5);
+		--table-c: var(--color-slate-7);
+		--table-bd-color: var(--color-slate-3);
+	}
+
+	@mixin where-dark {
+		--table-active-bg: alpha(var(--color-slate-7), .5);
+		--table-c: var(--color-slate-4);
+		--table-bd-color: var(--color-slate-7);
+	}
+
+	position: relative;
+	overflow: auto;
+
+	&:not([data-virtualize]) {
+		.table {
+			overflow: clip;
+		}
+
+		.tbody > tr:not(:last-of-type) {
+			border-bottom: 1px solid var(--table-bd-color);
+		}
+	}
+}
+
+.table {
+	min-width: 100%;
+	border-collapse: collapse;
+}
+
+.thead {
+	position: relative;
+
+	&[data-loading]::after {
+		content: '';
+		position: absolute;
+		z-index: 1;
+		height: 1px;
+		background-color: alpha(var(--table-loader-color), .75);
+		animation: var(--table-loader-animation);
+	}
+
+	&[data-sticky] {
+		position: sticky;
+		top: 0;
+		inset-inline: 0rem;
+		z-index: 1;
+
+		background-color: alpha(var(--color-body), .75);
+		backdrop-filter: blur(8px);
+	}
+}
+
+.th {
+	font-weight: 600;
+	padding-block: var(--table-padding-y);
+	padding-inline: var(--table-padding-x);
+	text-align: left;
+	color: var(--table-c);
+	vertical-align: var(--vertical-align);
+
+	&:has([role='checkbox']) {
+		padding-inline-end: 0;
+	}
+}
+
+.th[data-pinned],
+.tr td[data-pinned] {
+	position: sticky;
+	z-index: 1;
+	background-color: alpha(var(--color-body), .75);
+}
+
+.tbody {
+	isolation: isolate;
+}
+
+.tfoot {
+	position: relative;
+
+	&[data-sticky] {
+		position: sticky;
+		bottom: 0;
+		inset-inline: 0rem;
+		z-index: 1;
+
+		background-color: var(--color-body);
+		backdrop-filter: blur(8px);
+	}
+}
+
+.tr {
+	&[data-selectable] {
+		&:hover {
+			background-color: var(--table-active-bg);
+		}
+		&:focus-visible {
+			outline: 1px solid var(--table-color);
+		}
+	}
+
+	&[data-selected] {
+		background-color: var(--table-active-bg);
+	}
+
+	td {
+		white-space: nowrap;
+		padding-block: var(--table-padding-y);
+		padding-inline: var(--table-padding-x);
+		color: var(--table-c);
+		vertical-align: var(--vertical-align);
+
+		&:has([role='checkbox']) {
+			padding-inline-end: 0;
+		}
+	}
+}
+
+.separator {
+	position: absolute;
+	z-index: 1;
+	left: 0;
+	width: 100%;
+	height: 1px;
+	background-color: var(--table-bd-color);
+}
+
+.loading,
+.empty {
+	padding-inline: 1.5rem;
+	text-align: center;
+}
+
+@keyframes carousel {
+	0%, to{
+		width:50%
+	}
+	0%{
+		transform:translate(-100%)
+	}
+	to{
+		transform:translate(200%)
+	}
+}
+</style>

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

@@ -0,0 +1,48 @@
+import type { ColumnFiltersState, ColumnOrderState, ColumnPinningState, ColumnSizingInfoState, ColumnSizingState, ExpandedState, GroupingState, PaginationState, RowPinningState, RowSelectionState, SortingState, VisibilityState } from '@tanstack/vue-table';
+import type { TableData, TableProps, TableSlots } from './model.js';
+declare const __VLS_export: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(TableProps<T> & {
+        globalFilter?: string;
+        columnFilters?: ColumnFiltersState;
+        columnOrder?: ColumnOrderState;
+        columnVisibility?: VisibilityState;
+        columnPinning?: ColumnPinningState;
+        columnSizing?: ColumnSizingState;
+        columnSizingInfo?: ColumnSizingInfoState;
+        rowSelection?: RowSelectionState;
+        rowPinning?: RowPinningState;
+        sorting?: SortingState;
+        grouping?: GroupingState;
+        expanded?: ExpandedState;
+        pagination?: PaginationState;
+    }) & {
+        "onUpdate:globalFilter"?: ((value: string | undefined) => any) | undefined;
+        "onUpdate:columnFilters"?: ((value: ColumnFiltersState | undefined) => any) | undefined;
+        "onUpdate:columnOrder"?: ((value: ColumnOrderState | undefined) => any) | undefined;
+        "onUpdate:columnVisibility"?: ((value: VisibilityState | undefined) => any) | undefined;
+        "onUpdate:columnPinning"?: ((value: ColumnPinningState | undefined) => any) | undefined;
+        "onUpdate:columnSizing"?: ((value: ColumnSizingState | undefined) => any) | undefined;
+        "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState | undefined) => any) | undefined;
+        "onUpdate:rowSelection"?: ((value: RowSelectionState | undefined) => any) | undefined;
+        "onUpdate:rowPinning"?: ((value: RowPinningState | undefined) => any) | undefined;
+        "onUpdate:sorting"?: ((value: SortingState | undefined) => any) | undefined;
+        "onUpdate:grouping"?: ((value: GroupingState | undefined) => any) | undefined;
+        "onUpdate:expanded"?: ((value: ExpandedState | undefined) => any) | undefined;
+        "onUpdate:pagination"?: ((value: PaginationState | undefined) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        readonly $el: HTMLElement;
+        tableRef: Readonly<import("vue").ShallowRef<HTMLTableElement | null>>;
+        table: import("@tanstack/table-core").Table<T>;
+    }>) => void;
+    attrs: any;
+    slots: TableSlots<T>;
+    emit: ((evt: "update:globalFilter", value: string | undefined) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState | undefined) => void) & ((evt: "update:columnOrder", value: ColumnOrderState | undefined) => void) & ((evt: "update:columnVisibility", value: VisibilityState | undefined) => void) & ((evt: "update:columnPinning", value: ColumnPinningState | undefined) => void) & ((evt: "update:columnSizing", value: ColumnSizingState | undefined) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState | undefined) => void) & ((evt: "update:rowSelection", value: RowSelectionState | undefined) => void) & ((evt: "update:rowPinning", value: RowPinningState | undefined) => void) & ((evt: "update:sorting", value: SortingState | undefined) => void) & ((evt: "update:grouping", value: GroupingState | undefined) => void) & ((evt: "update:expanded", value: ExpandedState | undefined) => void) & ((evt: "update:pagination", value: PaginationState | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -23,14 +23,14 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (path: string[]) => any;
+    "update:expanded": (value: string[]) => any;
     "update:active": (value: string | null) => any;
     "update:selected": (value: string[]) => any;
-    "update:expanded": (value: string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onDelete?: ((path: string[]) => any) | undefined;
+    "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
     "onUpdate:active"?: ((value: string | null) => any) | undefined;
     "onUpdate:selected"?: ((value: string[]) => any) | undefined;
-    "onUpdate:expanded"?: ((value: string[]) => 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/tree/_ui/tree-root.vue.d.ts

@@ -23,14 +23,14 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     delete: (path: string[]) => any;
+    "update:expanded": (value: string[]) => any;
     "update:active": (value: string | null) => any;
     "update:selected": (value: string[]) => any;
-    "update:expanded": (value: string[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onDelete?: ((path: string[]) => any) | undefined;
+    "onUpdate:expanded"?: ((value: string[]) => any) | undefined;
     "onUpdate:active"?: ((value: string | null) => any) | undefined;
     "onUpdate:selected"?: ((value: string[]) => any) | undefined;
-    "onUpdate:expanded"?: ((value: string[]) => 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/tree/lib/item-handlers.js

@@ -21,7 +21,7 @@ export function useTreeItemHandlers(path, isFolder, expanded) {
         if (isFolder.value && expanded.value)
           return ctx.off("expand", path);
         else
-          return focus("prev", event.currentTarget);
+          return focus?.("prev", event.currentTarget);
       }
       // Arrow Right - открыть папку или перейти к первому ребенку
       case "ArrowRight": {
@@ -29,7 +29,7 @@ export function useTreeItemHandlers(path, isFolder, expanded) {
         if (isFolder.value && !expanded.value)
           return ctx.on("expand", path);
         else if (expanded.value)
-          return focus("next", event.currentTarget);
+          return focus?.("next", event.currentTarget);
         break;
       }
       // Enter/Space - выбор элемента