niuma-ui 2.0.3 → 2.0.9

package/dist/components/tree/src/tree-utils.d.ts

@@ -29,6 +29,10 @@ export interface RsTreeFlatNode {
     hasChildren: boolean;
     isLast: boolean;
     parentKey: string | null;
+    /** 同一父节点下的兄弟个数，对应 aria-setsize */
+    setSize: number;
+    /** 在兄弟中的位置，从 1 起算，对应 aria-posinset */
+    posInSet: number;
     /**
      * showLine 用：下标对应祖先深度 `0..depth-1`。
      * `true` 表示该祖先不是同级最后一项，竖线需贯穿当前行；`false` 则留空缺口。
@@ -46,6 +50,22 @@ export type RsTreeDropPosition = 'before' | 'inside' | 'after';
 /** handle=显示拖拽手柄；row=整行拖拽且不显示手柄 */
 export type RsTreeDragTrigger = 'handle' | 'row';
 export type RsTreeSize = RsComponentSize;
+export interface RsTreeExpose {
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandNode: (key: string) => void;
+    collapseNode: (key: string) => void;
+    focusNode: (key: string) => void;
+    focus: () => void;
+    scrollToKey: (key: string) => void;
+    getSelectedKeys: () => string[];
+    getCheckedKeys: () => string[];
+    getExpandedKeys: () => string[];
+    getHalfCheckedKeys: () => string[];
+}
+export type RsTreeInstance = RsTreeExpose & {
+    $el: HTMLElement;
+};
 export declare const DEFAULT_TREE_FIELD_NAMES: Required<RsTreeFieldNames>;
 /**
  * 各尺寸档行高 / 缩进。
@@ -98,6 +118,8 @@ export declare function resolveTreeCheckState(key: string, checkedKeys: Readonly
 export declare function toggleTreeCheck(key: string, checkedKeys: ReadonlySet<string>, index: ReadonlyMap<string, RsTreeNodeIndex>, checkStrictly: boolean, onlyCheckLeaf?: boolean): string[];
 export declare function resolveAccordionExpandedKeys(key: string, expandedKeys: readonly string[], index: ReadonlyMap<string, RsTreeNodeIndex>, rootKeys: readonly string[]): string[];
 export declare function resolveTreeFocusKey(flatNodes: readonly RsTreeFlatNode[], currentKey: string | null, move: RsTreeFocusMove, index: ReadonlyMap<string, RsTreeNodeIndex>): string | null;
+/** 从当前项之后找标签前缀匹配的可见节点；一圈后仍无匹配返回 null。 */
+export declare function resolveTreeTypeaheadKey(flatNodes: readonly RsTreeFlatNode[], currentKey: string | null, query: string, fields?: Required<RsTreeFieldNames>): string | null;
 export declare function resolveTreeVirtualEnabled(options: {
     virtual?: boolean;
     flatCount: number;

package/dist/components/tree/src/tree-utils.js

@@ -164,6 +164,8 @@ function flattenVisibleTreeNodes(nodes, expandedKeys, fields = DEFAULT_TREE_FIEL
 				hasChildren,
 				isLast,
 				parentKey: currentParentKey,
+				setSize: items.length,
+				posInSet: index + 1,
 				levelLines
 			});
 			if (hasChildren && expandedKeys.has(key)) walk(getTreeChildren(node, fields), currentDepth + 1, key, [...ancestors, isLast]);
@@ -173,7 +175,7 @@ function flattenVisibleTreeNodes(nodes, expandedKeys, fields = DEFAULT_TREE_FIEL
 	return result;
 }
 function defaultTreeFilterNode(node, keyword, fields = DEFAULT_TREE_FIELD_NAMES) {
-	return getTreeLabel(node, fields).toLowerCase().includes(keyword.trim().toLowerCase());
+	return getTreeLabel(node, fields).toLocaleLowerCase().includes(keyword.trim().toLocaleLowerCase());
 }
 function filterTreeNodes(nodes, keyword, options = {}) {
 	const fields = resolveTreeFieldNames(options.fieldNames);
@@ -201,8 +203,8 @@ function splitTreeLabelHighlight(label, keyword) {
 		text: label,
 		highlight: false
 	}];
-	const lowerLabel = label.toLowerCase();
-	const lowerQuery = query.toLowerCase();
+	const lowerLabel = label.toLocaleLowerCase();
+	const lowerQuery = query.toLocaleLowerCase();
 	const index = lowerLabel.indexOf(lowerQuery);
 	if (index < 0) return [{
 		text: label,
@@ -283,6 +285,18 @@ function resolveTreeFocusKey(flatNodes, currentKey, move, index) {
 		default: return currentKey;
 	}
 }
+/** 从当前项之后找标签前缀匹配的可见节点；一圈后仍无匹配返回 null。 */
+function resolveTreeTypeaheadKey(flatNodes, currentKey, query, fields = DEFAULT_TREE_FIELD_NAMES) {
+	const needle = query.trim().toLocaleLowerCase();
+	if (!needle || flatNodes.length === 0) return null;
+	const start = Math.max(0, flatNodes.findIndex((item) => item.key === currentKey));
+	for (let step = 1; step <= flatNodes.length; step += 1) {
+		const item = flatNodes[(start + step) % flatNodes.length];
+		if (!item || isTreeNodeDisabled(item.node, fields)) continue;
+		if (getTreeLabel(item.node, fields).toLocaleLowerCase().startsWith(needle)) return item.key;
+	}
+	return null;
+}
 function resolveTreeVirtualEnabled(options) {
 	if (options.virtual) return true;
 	return options.flatCount > (options.virtualThreshold ?? 100);
@@ -307,4 +321,4 @@ function sliceVirtualTreeNodes(nodes, scrollTop, viewportHeight, itemHeight, ove
 	};
 }
 //#endregion
-export { DEFAULT_TREE_FIELD_NAMES, TREE_INDENT_BY_SIZE, TREE_ROW_HEIGHT, buildTreeNodeIndex, collectDescendantKeys, collectExpandableKeys, collectHalfCheckedKeys, defaultTreeFilterNode, filterTreeNodes, flattenTreeNodeIds, flattenVisibleTreeNodes, getTreeChildren, getTreeIsLeaf, getTreeKey, getTreeLabel, hasTreeChildren, isTreeAncestorKey, isTreeCheckboxDisabled, isTreeNodeDisabled, isTreeNodeLoading, resolveAccordionExpandedKeys, resolveTreeCheckState, resolveTreeFieldNames, resolveTreeFocusKey, resolveTreeIndent, resolveTreeRowHeight, resolveTreeVirtualEnabled, shouldShowTreeCheckbox, sliceVirtualTreeNodes, splitTreeLabelHighlight, toggleTreeCheck };
+export { DEFAULT_TREE_FIELD_NAMES, TREE_INDENT_BY_SIZE, TREE_ROW_HEIGHT, buildTreeNodeIndex, collectDescendantKeys, collectExpandableKeys, collectHalfCheckedKeys, defaultTreeFilterNode, filterTreeNodes, flattenTreeNodeIds, flattenVisibleTreeNodes, getTreeChildren, getTreeIsLeaf, getTreeKey, getTreeLabel, hasTreeChildren, isTreeAncestorKey, isTreeCheckboxDisabled, isTreeNodeDisabled, isTreeNodeLoading, resolveAccordionExpandedKeys, resolveTreeCheckState, resolveTreeFieldNames, resolveTreeFocusKey, resolveTreeIndent, resolveTreeRowHeight, resolveTreeTypeaheadKey, resolveTreeVirtualEnabled, shouldShowTreeCheckbox, sliceVirtualTreeNodes, splitTreeLabelHighlight, toggleTreeCheck };

package/dist/components/tree-select/index.d.ts

@@ -1 +1,3 @@
 export { default as RsTreeSelect } from './src/RsTreeSelect.js';
+export type { RsTreeSelectExpose, RsTreeSelectInstance } from './src/RsTreeSelect.js';
+export type { RsTreeSelectGetPopupContainer, RsTreeSelectModelValue, RsTreeSelectShowCheckedStrategy, } from './src/tree-select-utils';

package/dist/components/tree-select/src/RsTreeSelect.css

@@ -1,60 +1,135 @@
 
-.rs-tree-select[data-v-47b84d55] {
+.rs-tree-select-wrap[data-v-d5518d1b] {
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  color-scheme: inherit;
+  vertical-align: middle;
+}
+.rs-tree-select-wrap--clearable .rs-tree-select[data-v-d5518d1b] {
+  padding-inline-end: calc(var(--rs-space-md) + 1.25rem);
+}
+.rs-tree-select[data-v-d5518d1b] {
   display: inline-flex;
   align-items: center;
   gap: var(--rs-space-sm);
   box-sizing: border-box;
   width: 100%;
-  min-width: 12rem;
   height: var(--rs-control-height-md);
-  padding: 0 var(--rs-space-md);
+  min-height: var(--rs-control-height-md);
+  padding-block: 0;
+  padding-inline: var(--rs-space-md);
   border: 1px solid var(--rs-input-border, var(--rs-border));
-  border-radius: var(--rs-radius-sm);
+  border-radius: var(--rs-tree-select-radius, var(--rs-radius-sm));
   background: var(--rs-input-bg);
   color: var(--rs-text);
   font-size: var(--rs-font-size-sm);
+  line-height: var(--rs-line-height-tight);
+  text-align: start;
   cursor: pointer;
+  outline: none;
+  box-shadow: var(--rs-input-shadow, none);
+  transition:
+    border-color var(--rs-transition-fast),
+    box-shadow var(--rs-transition-fast),
+    background var(--rs-transition-fast);
+}
+.rs-tree-select--ssm[data-v-d5518d1b] {
+  height: var(--rs-control-height-ssm);
+  min-height: var(--rs-control-height-ssm);
+  padding-inline: var(--rs-space-xs);
+  font-size: var(--rs-font-size-xs);
 }
-.rs-tree-select--sm[data-v-47b84d55] {
+.rs-tree-select--sm[data-v-d5518d1b] {
   height: var(--rs-control-height-sm);
+  min-height: var(--rs-control-height-sm);
+  padding-inline: var(--rs-space-sm);
+  font-size: var(--rs-font-size-xs);
+}
+.rs-tree-select--md[data-v-d5518d1b] {
+  height: var(--rs-control-height-md);
+  min-height: var(--rs-control-height-md);
 }
-.rs-tree-select--lg[data-v-47b84d55] {
+.rs-tree-select--lg[data-v-d5518d1b] {
   height: var(--rs-control-height-lg);
+  min-height: var(--rs-control-height-lg);
+  padding-inline: var(--rs-space-lg);
+  font-size: var(--rs-font-size-base);
 }
-.rs-tree-select--disabled[data-v-47b84d55] {
-  opacity: 0.38;
+.rs-tree-select[data-v-d5518d1b]:hover:not(:disabled) {
+  border-color: var(--rs-input-border-hover, var(--rs-border));
+}
+.rs-tree-select[data-v-d5518d1b]:focus-visible {
+  outline: none;
+  border-color: var(--rs-focus-border, var(--rs-primary));
+  background: var(--rs-input-bg);
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-tree-select--disabled[data-v-d5518d1b],
+.rs-tree-select[data-v-d5518d1b]:disabled {
+  color: var(--rs-text-disabled);
   cursor: not-allowed;
+  background: var(--rs-surface-hover);
+  opacity: 0.38;
 }
-.rs-tree-select__placeholder[data-v-47b84d55] {
-  flex: 1;
+.rs-tree-select__prefix[data-v-d5518d1b],
+.rs-tree-select__icon[data-v-d5518d1b] {
+  display: inline-flex;
+  flex-shrink: 0;
   color: var(--rs-muted);
+}
+.rs-tree-select--open .rs-tree-select__icon[data-v-d5518d1b] {
+  transform: rotate(180deg);
+  transition: transform var(--rs-transition-fast);
+}
+.rs-tree-select__placeholder[data-v-d5518d1b] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--rs-placeholder);
   text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.rs-tree-select__value[data-v-47b84d55] {
+.rs-tree-select__value[data-v-d5518d1b] {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-tree-select__clear[data-v-47b84d55] {
+.rs-tree-select__clear[data-v-d5518d1b] {
+  position: absolute;
+  inset-inline-end: var(--rs-space-sm);
+  inset-block-start: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
   border: 0;
+  border-radius: var(--rs-radius-xs);
   background: transparent;
   color: var(--rs-muted);
+  transform: translateY(-50%);
   cursor: pointer;
 }
-.rs-tree-select__panel[data-v-47b84d55] {
-  max-height: 18rem;
-  padding: var(--rs-space-xs);
-  overflow: auto;
-}
-.rs-tree-select__search[data-v-47b84d55] {
-  box-sizing: border-box;
-  width: 100%;
-  margin-bottom: var(--rs-space-xs);
-  padding: var(--rs-space-xs) var(--rs-space-sm);
-  border: 1px solid var(--rs-input-border, var(--rs-border));
-  border-radius: var(--rs-radius-xs);
-  background: var(--rs-input-bg);
+.rs-tree-select__clear[data-v-d5518d1b]:hover {
   color: var(--rs-text);
+  background: var(--rs-item-hover);
+}
+@media (prefers-reduced-motion: reduce) {
+.rs-tree-select[data-v-d5518d1b],
+  .rs-tree-select__clear[data-v-d5518d1b],
+  .rs-tree-select--open .rs-tree-select__icon[data-v-d5518d1b] {
+    transition: none;
+    transform: none;
+}
 }

package/dist/components/tree-select/src/RsTreeSelect.d.ts

@@ -1,5 +1,13 @@
-import type { RsComponentSize } from '../../../theme/types';
-import { type RsTreeFieldNames, type RsTreeNode } from '../../tree/src/tree-utils';
+import { type RsComponentSize, type RsRadius } from '../../../theme/types';
+import type { RsTreeFieldNames, RsTreeNode } from '../../tree/src/tree-utils';
+import { type RsTreeSelectGetPopupContainer, type RsTreeSelectModelValue, type RsTreeSelectShowCheckedStrategy } from './tree-select-utils';
+export interface RsTreeSelectExpose {
+    focus: () => void;
+    blur: () => void;
+}
+export type RsTreeSelectInstance = RsTreeSelectExpose & {
+    $el: HTMLElement;
+};
 type __VLS_Props = {
     treeData: RsTreeNode[];
     fieldNames?: RsTreeFieldNames;
@@ -10,24 +18,100 @@ type __VLS_Props = {
     checkable?: boolean;
     searchable?: boolean;
     size?: RsComponentSize;
+    radius?: RsRadius;
+    checkStrictly?: boolean;
+    onlyCheckLeaf?: boolean;
+    checkOnClickNode?: boolean;
+    defaultExpandAll?: boolean;
+    showLine?: boolean;
+    filterNode?: (node: RsTreeNode, keyword: string) => boolean;
+    highlight?: boolean;
+    lazy?: boolean;
+    loadData?: (node: RsTreeNode, key: string) => void | Promise<void>;
+    virtual?: boolean;
+    virtualThreshold?: number;
+    listHeight?: number;
+    showCheckedStrategy?: RsTreeSelectShowCheckedStrategy;
+    maxTagCount?: number;
+    getPopupContainer?: RsTreeSelectGetPopupContainer;
+    matchTriggerWidth?: boolean;
+    name?: string;
+    id?: string;
+    ariaLabel?: string;
+    searchPlaceholder?: string;
 };
 type __VLS_ModelProps = {
-    modelValue?: string | string[];
+    modelValue?: RsTreeSelectModelValue;
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | string[]) => any;
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_23: {}, __VLS_40: {
+    node: RsTreeNode;
+    key: string;
+    label: string;
+    expanded: boolean;
+    selected: boolean;
+    checkState: import("../../tree").RsTreeCheckState;
+    depth: number;
+    focused: boolean;
+}, __VLS_42: {};
+type __VLS_Slots = {} & {
+    prefix?: (props: typeof __VLS_1) => any;
+} & {
+    suffixIcon?: (props: typeof __VLS_3) => any;
+} & {
+    clearIcon?: (props: typeof __VLS_10) => any;
+} & {
+    header?: (props: typeof __VLS_23) => any;
+} & {
+    title?: (props: typeof __VLS_40) => any;
+} & {
+    footer?: (props: typeof __VLS_42) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsTreeSelectExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: RsTreeSelectModelValue) => any;
+    search: (query: string) => any;
+    select: (key: string, node?: RsTreeNode | undefined) => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+    clear: () => any;
+    "update:modelValue": (value: RsTreeSelectModelValue) => any;
     "update:open": (value: boolean) => any;
+    dropdownVisibleChange: (open: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+    onChange?: ((value: RsTreeSelectModelValue) => any) | undefined;
+    onSearch?: ((query: string) => any) | undefined;
+    onSelect?: ((key: string, node?: RsTreeNode | undefined) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: RsTreeSelectModelValue) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onDropdownVisibleChange?: ((open: boolean) => any) | undefined;
 }>, {
     disabled: boolean;
+    allowClear: boolean;
+    highlight: boolean;
     multiple: boolean;
     searchable: boolean;
-    allowClear: boolean;
+    virtual: boolean;
+    virtualThreshold: number;
+    matchTriggerWidth: boolean;
+    listHeight: number;
     checkable: boolean;
+    checkStrictly: boolean;
+    onlyCheckLeaf: boolean;
+    checkOnClickNode: boolean;
+    defaultExpandAll: boolean;
+    showLine: boolean;
+    lazy: boolean;
+    showCheckedStrategy: RsTreeSelectShowCheckedStrategy;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};