niuma-ui 2.0.3 → 2.0.4

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;
     multiple: boolean;
     searchable: boolean;
-    allowClear: boolean;
+    virtual: boolean;
+    virtualThreshold: number;
+    matchTriggerWidth: boolean;
+    listHeight: number;
+    highlight: boolean;
     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;
+    };
+};