sard-uniapp 1.25.3 → 1.25.5

package/components/cascader/index.scss

@@ -62,6 +62,33 @@
     }
   }
 
+  @include e(selection) {
+    @include universal;
+    justify-content: center;
+    margin: calc(var(--sar-cascader-option-padding-y) * -1) 0
+      calc(var(--sar-cascader-option-padding-y) * -1)
+      calc(var(--sar-cascader-selection-padding-x) * -1);
+    padding: var(--sar-cascader-option-padding-y)
+      var(--sar-cascader-selection-padding-x);
+    font-weight: normal;
+    cursor: pointer;
+
+    @include m(disabled) {
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(option-loading) {
+    display: none;
+    margin-right: var(--sar-cascader-option-loading-margin-right);
+    font-size: var(--sar-cascader-option-loading-size);
+    color: var(--sar-cascader-option-loading-color);
+
+    @include m(show) {
+      display: inline-flex;
+    }
+  }
+
   @include e(option-label) {
     font-size: var(--sar-cascader-option-font-size);
     line-height: var(--sar-cascader-option-line-height);
@@ -74,27 +101,36 @@
     margin-left: auto;
   }
 
-  @include e(loading-wrapper) {
+  @include e(load-status-wrapper) {
     @include universal;
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 2;
+    z-index: 1;
     width: 100%;
     height: 100%;
     justify-content: center;
     align-items: center;
     opacity: 0;
-    transition: opacity var(--sar-cascader-loading-wrapper-duration);
+    transition: opacity var(--sar-cascader-load-status-wrapper-duration);
     pointer-events: none;
 
     @include m(show) {
       opacity: 1;
+      pointer-events: auto;
     }
   }
 
+  @include e(load-status) {
+    font-size: var(--sar-cascader-load-status-size);
+    color: var(--sar-cascader-load-status-color);
+  }
+
+  @include e(error, empty) {
+    cursor: pointer;
+  }
+
   @include e(loading) {
     font-size: var(--sar-cascader-loading-size);
-    color: var(--sar-cascader-loading-color);
   }
 }

package/components/cascader/useCascaderTabs.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+import { type CascaderPanel, type CascaderProps, type CascaderStateNode } from './common';
+export declare function useCascaderTabs(props: CascaderProps, config: {
+    treeData: Ref<CascaderStateNode[]>;
+}): {
+    panels: import("vue").ComputedRef<CascaderPanel[]>;
+    renderedPane: Ref<boolean, boolean>;
+    currentTab: Ref<number, number>;
+    tabList: import("vue").ComputedRef<{
+        title: string;
+    }[]>;
+};

package/components/cascader/useCascaderTabs.js

@@ -0,0 +1,59 @@
+import { computed, ref, watch } from 'vue';
+import { useTranslate } from '../locale';
+export function useCascaderTabs(props, config) {
+    const { treeData } = config;
+    const currentTab = ref(0);
+    const renderedPane = ref(false);
+    const panels = computed(() => {
+        let currentPanels = {
+            nodes: treeData.value,
+            selected: null,
+        };
+        const panels = [currentPanels];
+        while (currentPanels) {
+            const node = currentPanels.nodes.find((node) => node.selected);
+            if (node) {
+                currentPanels.selected = node;
+            }
+            if (node && node.children && node.children.length) {
+                panels.push((currentPanels = {
+                    nodes: node.children,
+                    selected: null,
+                }));
+            }
+            else {
+                break;
+            }
+        }
+        return panels;
+    });
+    watch(panels, () => {
+        if (!renderedPane.value) {
+            setTimeout(() => {
+                renderedPane.value = true;
+                // 确保小程序端已渲染完毕
+            }, 30);
+        }
+    }, {
+        immediate: true,
+    });
+    const { t } = useTranslate('cascader');
+    const innerPaceholder = computed(() => {
+        return props.hintText || t('pleaseSelect');
+    });
+    const tabList = computed(() => {
+        return panels.value.map((panel) => {
+            const { selected } = panel;
+            const label = selected ? selected.label : innerPaceholder.value;
+            return {
+                title: label,
+            };
+        });
+    });
+    return {
+        panels,
+        renderedPane,
+        currentTab,
+        tabList,
+    };
+}

package/components/cascader/useCascaderTree.d.ts

@@ -0,0 +1,66 @@
+import { type ComputedRef, type Ref } from 'vue';
+import { type CascaderValue, type CascaderFieldKeys, type CascaderOption, type CascaderProps, type CascaderStateNode } from './common';
+export declare function useCascaderTree(props: CascaderProps, config: {
+    fieldKeys: ComputedRef<Required<CascaderFieldKeys>>;
+    innerValue: Ref<CascaderValue | undefined>;
+}): {
+    treeData: Ref<{
+        label: string;
+        value: string | number;
+        key: string | number;
+        disabled: boolean;
+        children?: any[] | undefined;
+        parent: any | null;
+        isLeaf: boolean;
+        loadStatus: "idle" | "loading" | "loaded";
+        depth: number;
+        indeterminate: boolean;
+        checked: boolean;
+        selected: boolean;
+        option: {
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+            label?: string | undefined;
+            value?: (string | number) | undefined;
+            disabled?: boolean | undefined;
+            children?: any[] | undefined;
+            isLeaf?: boolean | undefined;
+        };
+    }[], CascaderStateNode[] | {
+        label: string;
+        value: string | number;
+        key: string | number;
+        disabled: boolean;
+        children?: any[] | undefined;
+        parent: any | null;
+        isLeaf: boolean;
+        loadStatus: "idle" | "loading" | "loaded";
+        depth: number;
+        indeterminate: boolean;
+        checked: boolean;
+        selected: boolean;
+        option: {
+            [x: string]: any;
+            [x: number]: any;
+            [x: symbol]: any;
+            label?: string | undefined;
+            value?: (string | number) | undefined;
+            disabled?: boolean | undefined;
+            children?: any[] | undefined;
+            isLeaf?: boolean | undefined;
+        };
+    }[]>;
+    originalTreeData: import("vue").ShallowRef<CascaderOption[], CascaderOption[]>;
+    loadStatus: Ref<"idle" | "error" | "loading" | "loaded", "idle" | "error" | "loading" | "loaded">;
+    legacyLoadChildren: Ref<boolean, boolean>;
+    toStateNodes: (options: CascaderOption[], parent: CascaderStateNode | null) => CascaderStateNode[];
+    setSelectedByNode: (node: CascaderStateNode) => void;
+    updateChecked: (value?: CascaderValue) => void;
+    setCheckedByNode: (node: CascaderStateNode, checked: boolean) => void;
+    isLeaf: (node: CascaderStateNode) => boolean;
+    getCheckedLeaves: () => CascaderStateNode[];
+    getCheckedNodes: () => CascaderStateNode[];
+    getAncestors: (node: CascaderStateNode) => CascaderStateNode[];
+    initialize: () => Promise<void>;
+};

package/components/cascader/useCascaderTree.js

@@ -0,0 +1,194 @@
+import { computed, inject, reactive, ref, shallowRef, watch, } from 'vue';
+import { cascaderOptionsContextSymbol, } from './common';
+import { isNumber, isString, setCheckedRecursively, walkAncestor, walkNodes, } from '../../utils';
+export function useCascaderTree(props, config) {
+    const { fieldKeys, innerValue } = config;
+    const options = computed(() => props.options || []);
+    const legacyLoadChildren = ref(false);
+    const treeData = ref([]);
+    const originalTreeData = shallowRef([]);
+    const loadStatus = ref('loaded');
+    const toStateNodes = (options, parent) => {
+        const keys = fieldKeys.value;
+        return options.map((option) => {
+            const key = option[keys.value];
+            const stateNode = reactive({
+                label: option[keys.label],
+                value: option[keys.value],
+                key,
+                disabled: !!option[keys.disabled],
+                parent,
+                isLeaf: !!option[keys.isLeaf],
+                depth: parent ? parent.depth + 1 : 0,
+                indeterminate: false,
+                checked: false,
+                selected: false,
+                loadStatus: 'idle',
+                option,
+            });
+            const children = option[keys.children];
+            if (children) {
+                stateNode.children = toStateNodes(children, stateNode);
+            }
+            treeMap.value[key] = stateNode;
+            return stateNode;
+        });
+    };
+    const isLeaf = (node) => {
+        return node.isLeaf || !Array.isArray(node.children);
+    };
+    const clearSelected = () => {
+        walkNodes(treeData.value, (node) => {
+            node.selected = false;
+        });
+    };
+    const setAncestorSelected = (node) => {
+        walkAncestor(node, (node) => {
+            node.selected = true;
+        });
+    };
+    const setSelectedByNode = (node) => {
+        clearSelected();
+        setAncestorSelected(node);
+    };
+    const clearChecked = () => {
+        walkNodes(treeData.value, (node) => {
+            node.checked = false;
+            node.indeterminate = false;
+        });
+    };
+    const setCheckedByNode = (node, checked) => {
+        setCheckedRecursively(node, checked, props.checkStrictly);
+    };
+    const getCheckedLeaves = () => {
+        const nodes = [];
+        walkNodes(treeData.value, (node) => {
+            if (node.checked && isLeaf(node)) {
+                nodes.push(node);
+            }
+        });
+        return nodes;
+    };
+    const getCheckedNodes = () => {
+        const nodes = [];
+        walkNodes(treeData.value, (node) => {
+            if (node.checked) {
+                nodes.push(node);
+            }
+        });
+        return nodes;
+    };
+    const getAncestors = (node) => {
+        const nodes = [];
+        walkAncestor(node, (node) => {
+            nodes.unshift(node);
+        });
+        return nodes;
+    };
+    const updateChecked = (value) => {
+        clearSelected();
+        // 多选
+        if (props.multiple) {
+            clearChecked();
+            if (Array.isArray(value)) {
+                let lastNode;
+                const maySetChecked = (value) => {
+                    if (isString(value) || isNumber(value)) {
+                        const node = treeMap.value[value];
+                        if (node) {
+                            lastNode = node;
+                            setCheckedByNode(node, true);
+                        }
+                    }
+                };
+                // 全路径
+                if (props.allLevels) {
+                    value.forEach((item) => {
+                        if (Array.isArray(item)) {
+                            maySetChecked(item[item.length - 1]);
+                        }
+                    });
+                }
+                // 最后一级
+                else {
+                    value.forEach(maySetChecked);
+                }
+                if (lastNode) {
+                    setAncestorSelected(lastNode);
+                }
+            }
+        }
+        // 单选
+        else {
+            const maySetSelected = (value) => {
+                if (isString(value) || isNumber(value)) {
+                    const node = treeMap.value[value];
+                    if (node) {
+                        setAncestorSelected(node);
+                    }
+                }
+            };
+            // 全路径
+            if (props.allLevels) {
+                if (Array.isArray(value)) {
+                    maySetSelected(value[value.length - 1]);
+                }
+            }
+            // 最后一级
+            else {
+                maySetSelected(value);
+            }
+        }
+    };
+    const initialize = async () => {
+        if (props.lazy && props.load) {
+            try {
+                loadStatus.value = 'loading';
+                const data = await props.load();
+                loadStatus.value = 'loaded';
+                initializeTree(data);
+            }
+            catch {
+                loadStatus.value = 'error';
+            }
+        }
+        else {
+            initializeTree(options.value);
+        }
+    };
+    const treeMap = shallowRef({});
+    const initializeTree = (data) => {
+        if (legacyLoadChildren.value) {
+            legacyLoadChildren.value = false;
+            return;
+        }
+        treeMap.value = {};
+        treeData.value = toStateNodes(data, null);
+        updateChecked(innerValue.value);
+        originalTreeData.value = data;
+    };
+    watch(options, () => {
+        initializeTree(options.value);
+    });
+    const optionsContext = inject(cascaderOptionsContextSymbol, null);
+    watch(originalTreeData, () => {
+        if (optionsContext) {
+            optionsContext.set(originalTreeData.value);
+        }
+    });
+    return {
+        treeData,
+        originalTreeData,
+        loadStatus,
+        legacyLoadChildren,
+        toStateNodes,
+        setSelectedByNode,
+        updateChecked,
+        setCheckedByNode,
+        isLeaf,
+        getCheckedLeaves,
+        getCheckedNodes,
+        getAncestors,
+        initialize,
+    };
+}

package/components/cascader/variables.scss

@@ -2,10 +2,12 @@
 page,
 .sar-portal {
   --sar-cascader-wrapper-duration: var(--sar-duration);
-  --sar-cascader-loading-wrapper-duration: var(--sar-duration);
+  --sar-cascader-load-status-wrapper-duration: var(--sar-duration);
 
   --sar-cascader-selected-color: var(--sar-primary);
 
+  --sar-cascader-selection-padding-x: 24rpx;
+
   --sar-cascader-options-height: 640rpx;
 
   --sar-cascader-option-padding-y: 16rpx;
@@ -14,7 +16,12 @@ page,
   --sar-cascader-option-line-height: 48rpx;
   --sar-cascader-option-active-bg: var(--sar-active-bg);
 
+  --sar-cascader-option-loading-size: var(--sar-text-base);
+  --sar-cascader-option-loading-color: var(--sar-fourth-color);
+  --sar-cascader-option-loading-margin-right: 16rpx;
+
+  --sar-cascader-load-status-size: var(--sar-text-base);
+  --sar-cascader-load-status-color: var(--sar-fourth-color);
   --sar-cascader-loading-size: var(--sar-text-xl);
-  --sar-cascader-loading-color: var(--sar-tertiary-color);
 }
 // #endvariables

package/components/cascader-input/README.md

@@ -25,33 +25,42 @@ import CascaderInput from 'sard-uniapp/components/cascader-input/cascader-input.
 
 @code('${DEMO_PATH}/cascader-input/demo/Basic.vue')
 
+### 多选
+
+设置 `multiple` 可进行多选，设置 `max-rows` 可限制输入框展示的行数。
+
+@code('${DEMO_PATH}/cascader-input/demo/Multiple.vue')
+
+### 懒加载 <sup>1.25.5+</sup>
+
+没有加载到数据时，输入框会暂时展示值，而不是标签文本，当加载完数据时，才替换为标签文本。
+
+@code('${DEMO_PATH}/cascader-input/demo/Lazy.vue')
+
 ## API
 
 ### CascaderInputProps
 
 继承 [`CascaderPopoutProps`](./cascader-popout#CascaderPopoutProps) 并有以下额外属性：
 
-| 属性                              | 描述                   | 类型       | 默认值          |
-| --------------------------------- | ---------------------- | ---------- | --------------- |
-| root-class                        | 弹出式输入框根元素类名 | string     | -               |
-| root-style                        | 弹出式输入框根元素样式 | StyleValue | -               |
-| disabled                          | 禁用状态               | boolean    | false           |
-| readonly                          | 只读状态               | boolean    | false           |
-| loading                           | 加载状态               | boolean    | false           |
-| clearable                         | 是否显示清空按钮       | boolean    | false           |
-| placeholder                       | 输入框占位符内容       | string     | -               |
-| value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值 | () => any  | () => undefined |
-| arrow <sup>1.22+</sup>            | 自定义箭头图标名       | string     | 'caret-right'   |
-| arrow-family <sup>1.22+</sup>     | 自定义箭头图标字体     | string     | 'sari'          |
-| input-props <sup>1.22+</sup>      | 自定义输入框组件属性   | InputProps | -               |
+| 属性                              | 描述                                           | 类型       | 默认值          |
+| --------------------------------- | ---------------------------------------------- | ---------- | --------------- |
+| root-class                        | 弹出式输入框根元素类名                         | string     | -               |
+| root-style                        | 弹出式输入框根元素样式                         | StyleValue | -               |
+| disabled                          | 禁用状态                                       | boolean    | false           |
+| readonly                          | 只读状态                                       | boolean    | false           |
+| loading                           | 加载状态                                       | boolean    | false           |
+| clearable                         | 是否显示清空按钮                               | boolean    | false           |
+| placeholder                       | 输入框占位符内容                               | string     | -               |
+| value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值                         | () => any  | () => undefined |
+| arrow <sup>1.22+</sup>            | 自定义箭头图标名                               | string     | 'caret-right'   |
+| arrow-family <sup>1.22+</sup>     | 自定义箭头图标字体                             | string     | 'sari'          |
+| input-props <sup>1.22+</sup>      | 自定义输入框组件属性                           | InputProps | -               |
+| max-rows <sup>1.25.5+</sup>       | 多选时，输入框最大展示行数，设为 -1 表示不限制 | number     | 3               |
 
 ### CascaderInputSlots
 
-继承 [`CascaderPopoutSlots`](./cascader-popout#CascaderPopoutSlots)，并有以下额外插槽：
-
-| 插槽                   | 描述       | 属性       |
-| ---------------------- | ---------- | ---------- |
-| arrow <sup>1.22+</sup> | 自定义箭头 | () => void |
+继承 [`CascaderPopoutSlots`](./cascader-popout#CascaderPopoutSlots)和[`PopoutInputSlots`](./popout-input#PopoutInputSlots)
 
 ### CascaderInputEmits
 

package/components/cascader-input/cascader-input.d.ts

@@ -1,4 +1,4 @@
-import { type CascaderFieldKeys, type CascaderOption } from '../cascader/common';
+import { type CascaderFieldKeys, type CascaderOption, type CascaderValue } from '../cascader/common';
 import { type CascaderInputProps, type CascaderInputSlots } from './common';
 declare function __VLS_template(): Readonly<CascaderInputSlots> & CascaderInputSlots;
 declare const __VLS_component: import("vue").DefineComponent<CascaderInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -8,10 +8,13 @@ declare const __VLS_component: import("vue").DefineComponent<CascaderInputProps,
 }, string, import("vue").PublicProps, Readonly<CascaderInputProps> & Readonly<{
     [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
+    multiple: boolean;
+    lazy: boolean;
+    load: (node?: import("../cascader/common").CascaderStateNode) => Promise<CascaderOption[]> | CascaderOption[];
     options: CascaderOption[];
     rootStyle: string | false | import("vue").CSSProperties | import("vue").StyleValue[] | null;
     rootClass: string;
-    modelValue: string | number | (string | number)[];
+    modelValue: CascaderValue;
     title: string;
     visible: boolean;
     valueOnClear: () => any;
@@ -25,9 +28,11 @@ declare const __VLS_component: import("vue").DefineComponent<CascaderInputProps,
     resettable: boolean;
     placeholder: string;
     clearable: boolean;
+    internalPrepend: number;
     multiline: boolean;
     arrow: string;
     arrowFamily: string;
+    internalAppend: number;
     internalArrow: number;
     inputProps: import("../input/common.js").InputProps;
     fieldKeys: CascaderFieldKeys;
@@ -35,6 +40,8 @@ declare const __VLS_component: import("vue").DefineComponent<CascaderInputProps,
     labelRender: (option: CascaderOption) => string;
     changeOnSelect: boolean;
     allLevels: boolean;
+    checkStrictly: boolean;
+    maxRows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;