sard-uniapp 1.25.4 → 1.25.5

package/components/cascader/cascader.vue

@@ -5,15 +5,7 @@
     <slot name="top" :tab-index="currentTab"></slot>
 
     <view :class="bem.e('container')">
-      <view
-        :class="bem.e('wrapper')"
-        :style="
-          stringifyStyle({
-            transform: `translateX(${-Number(currentTab) * 100}%)`,
-            transitionDuration: renderedPane ? null : '0s',
-          })
-        "
-      >
+      <view :class="bem.e('wrapper')" :style="wrapperStyle">
         <view
           v-for="(panel, panelIndex) in panels"
           :key="panelIndex"
@@ -22,54 +14,78 @@
           <view :class="bem.e('options')">
             <scroll-view scroll-y trap-scroll :class="bem.e('scroll')">
               <view
-                v-for="(option, optionIndex) in panel.options"
+                v-for="(node, optionIndex) in panel.nodes"
                 :key="optionIndex"
                 :class="
                   classNames(
                     bem.e('option'),
-                    bem.em(
-                      'option',
-                      'selected',
-                      panel.selected &&
-                        panel.selected[mergedFieldKeys.value] ===
-                          option[mergedFieldKeys.value],
-                    ),
-                    bem.em(
-                      'option',
-                      'disabled',
-                      option[mergedFieldKeys.disabled],
-                    ),
+                    bem.em('option', 'selected', node.selected),
+                    bem.em('option', 'checked', node.checked),
+                    bem.em('option', 'disabled', node.disabled),
                   )
                 "
-                @click="onOptionClick(option, panelIndex)"
+                @click="onNodeClick(node, panelIndex)"
               >
+                <view
+                  v-if="multiple"
+                  :class="bem.e('selection')"
+                  @click.stop="onCheckClick(node)"
+                >
+                  <sar-checkbox
+                    readonly
+                    :checked="node.checked"
+                    :indeterminate="node.indeterminate"
+                    :disabled="node.disabled"
+                  />
+                </view>
+                <view
+                  :class="
+                    classNames(
+                      bem.e('option-loading'),
+                      bem.em(
+                        'option-loading',
+                        'show',
+                        node.loadStatus === 'loading',
+                      ),
+                    )
+                  "
+                >
+                  <sar-loading />
+                </view>
                 <view :class="bem.e('option-label')">
-                  {{
-                    labelRender
-                      ? labelRender(option)
-                      : option[mergedFieldKeys.label]
-                  }}
+                  {{ node.label }}
                 </view>
-                <view :class="bem.e('option-icon')">
+                <view v-if="!multiple" :class="bem.e('option-icon')">
                   <sar-icon family="sari" name="success" />
                 </view>
               </view>
             </scroll-view>
-            <view
-              :class="
-                classNames(
-                  bem.e('loading-wrapper'),
-                  bem.em('loading-wrapper', 'show', panel.options.length === 0),
-                )
-              "
-            >
-              <view :class="bem.e('loading')">
-                <sar-loading />
-              </view>
-            </view>
           </view>
         </view>
       </view>
+
+      <view v-if="lazy && !!load" :class="loadStatusWrapperClass">
+        <view :class="bem.e('load-status')">
+          <sar-loading
+            v-if="loadStatus === 'loading'"
+            :class="bem.e('loading')"
+          />
+          <text
+            v-else-if="loadStatus === 'error'"
+            :class="bem.e('error')"
+            @click="initialize"
+          >
+            {{ t('error') }}
+          </text>
+          <text
+            v-else-if="loadStatus === 'loaded' && treeData.length === 0"
+            :class="bem.e('empty')"
+            @click="initialize"
+          >
+            {{ t('noData') }}
+          </text>
+        </view>
+      </view>
     </view>
   </view>
 </template>
@@ -77,34 +93,34 @@
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch } from "vue";
-import {
-  classNames,
-  stringifyStyle,
-  createBem,
-  isEmptyBinding,
-  isEmptyArray
-} from "../../utils";
-import { useTranslate } from "../locale";
+import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarTabs from "../tabs/tabs.vue";
 import SarIcon from "../icon/icon.vue";
 import SarLoading from "../loading/loading.vue";
+import SarCheckbox from "../checkbox/checkbox.vue";
 import {
   defaultFieldKeys,
-  getSelectedOptionsByValue,
   defaultCascaderProps
 } from "./common";
+import { useCascaderTree } from "./useCascaderTree";
+import { useCascaderTabs } from "./useCascaderTabs";
+import { useTranslate } from "../locale";
 /**
  * @property {string} rootClass 组件根元素类名，默认值：-。
  * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
- * @property {string | number | (string | number)[]} modelValue 选中项的值，默认值：-。
+ * @property {CascaderValue} modelValue 选中项的值，默认值：-。
  * @property {CascaderOption[]} options 可选项数据源，默认值：[]。
  * @property {CascaderFieldKeys} fieldKeys 自定义 `options` 中的字段，默认值：defaultFieldKeys。
  * @property {string} hintText 未选中时的提示文案，默认值：'请选择'。
  * @property {(option: CascaderOption) => string} labelRender 自定义可选项渲染，默认值：-。
  * @property {boolean} changeOnSelect 点击每级选项都会触发变化，默认值：false。
  * @property {boolean} allLevels 是否绑定所有级别的值，而不单单是最后一级，默认值：false。
- * @event {(value: string | number | (string | number)[], selectedOptions: CascaderOption[]) => void} update 全部选项选择完成后触发
- * @event {(value: string | number | (string | number)[], selectedOptions: CascaderOption[]) => void} change 全部选项选择完成后触发
+ * @property {boolean} multiple 是否多选，默认值：false。
+ * @property {boolean} checkStrictly 是否严格的遵守父子节点不互相关联（用于多选），默认值：false。
+ * @property {boolean} lazy 是否懒加载子节点，需与 load 方法结合使用，默认值：false。
+ * @property {(node?: CascaderStateNode) => Promise<CascaderOption[]> | CascaderOption[]} load 加载子节点的方法，仅当 lazy 属性为true 时生效，默认值：-。
+ * @event {(value: CascaderValue, selectedOptions: CascaderOption[]) => void} update 全部选项选择完成后触发
+ * @event {(value: CascaderValue, selectedOptions: CascaderOption[]) => void} change 全部选项选择完成后触发
  * @event {(option: CascaderOption, tabIndex: number) => void} select 选中某一项时触发
  */
 export default  _defineComponent({
@@ -112,6 +128,7 @@ export default  _defineComponent({
     SarTabs,
     SarIcon,
     SarLoading,
+    SarCheckbox,
   },
   ...{
     options: {
@@ -121,7 +138,7 @@ export default  _defineComponent({
   },
   __name: "cascader",
   props:  _mergeDefaults({
-    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootStyle: { type: null, required: false },
     rootClass: { type: String, required: false },
     modelValue: { type: [String, Number, Array], required: false },
     options: { type: Array, required: false },
@@ -129,7 +146,11 @@ export default  _defineComponent({
     hintText: { type: String, required: false },
     labelRender: { type: Function, required: false },
     changeOnSelect: { type: Boolean, required: false },
-    allLevels: { type: Boolean, required: false }
+    allLevels: { type: Boolean, required: false },
+    multiple: { type: Boolean, required: false },
+    checkStrictly: { type: Boolean, required: false },
+    lazy: { type: Boolean, required: false },
+    load: { type: Function, required: false }
   }, defaultCascaderProps),
   emits: ["update:model-value", "change", "select"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -138,92 +159,6 @@ export default  _defineComponent({
     const emit = __emit;
     const bem = createBem("cascader");
     const { t } = useTranslate("cascader");
-    const updatePanels = () => {
-      let nextPanels;
-      if (isEmptyBinding(tempValue) || isEmptyArray(tempValue)) {
-        nextPanels = [
-          {
-            options: props.options || [],
-            selected: null
-          }
-        ];
-      } else {
-        const selectedOptions = getSelectedOptionsByValue(
-          props.options || [],
-          tempValue,
-          mergedFieldKeys.value
-        );
-        if (selectedOptions && selectedOptions.length > 0) {
-          let nextOptions = props.options;
-          nextPanels = selectedOptions.map((option) => {
-            const panel = {
-              options: nextOptions || [],
-              selected: option
-            };
-            nextOptions = option[mergedFieldKeys.value.children];
-            return panel;
-          });
-          if (nextOptions) {
-            nextPanels.push({
-              options: nextOptions,
-              selected: null
-            });
-          }
-        } else {
-          nextPanels = [
-            {
-              options: props.options || [],
-              selected: null
-            }
-          ];
-        }
-      }
-      panels.value = nextPanels;
-      currentTab.value = nextPanels.length - 1;
-      if (!renderedPane.value) {
-        setTimeout(() => {
-          renderedPane.value = true;
-        }, 30);
-      }
-    };
-    const isLastOption = (option) => {
-      return !Array.isArray(option[mergedFieldKeys.value.children]);
-    };
-    const onOptionClick = (option, panelIndex) => {
-      if (option.disabled) {
-        return;
-      }
-      let nextPanels = panels.value.slice();
-      nextPanels[panelIndex].selected = option;
-      const selectBack = panelIndex < nextPanels.length - 1;
-      if (selectBack) {
-        nextPanels = nextPanels.slice(0, panelIndex + 1);
-      }
-      const isLast = isLastOption(option);
-      if (!isLast) {
-        const nextPanel = {
-          options: option[mergedFieldKeys.value.children],
-          selected: null
-        };
-        nextPanels.push(nextPanel);
-      }
-      currentTab.value = isLast ? panelIndex : nextPanels.length - 1;
-      if (props.allLevels) {
-        tempValue = nextPanels.map((panel) => panel.selected).filter(Boolean).map((option2) => option2[mergedFieldKeys.value.value]);
-      } else {
-        tempValue = option[mergedFieldKeys.value.value];
-      }
-      panels.value = nextPanels;
-      emit("select", option, panelIndex);
-      if (isLast || props.changeOnSelect) {
-        const selectedOptions = nextPanels.map((panel) => panel.selected).filter(Boolean);
-        emit("update:model-value", tempValue, selectedOptions);
-        emit("change", tempValue, selectedOptions);
-      }
-    };
-    const innerPaceholder = computed(() => {
-      return props.hintText || t("pleaseSelect");
-    });
     const mergedFieldKeys = computed(() => {
       return Object.assign(
         {},
@@ -231,47 +166,121 @@ export default  _defineComponent({
         props.fieldKeys
       );
     });
-    let tempValue = props.modelValue;
-    const currentTab = ref(0);
-    const renderedPane = ref(false);
-    const panels = ref([]);
-    const tabList = computed(() => {
-      return panels.value.map((panel) => {
-        const { selected } = panel;
-        const label = selected ? selected[mergedFieldKeys.value.label] : innerPaceholder.value;
-        return {
-          title: label
-        };
-      });
+    const innerValue = ref();
+    const {
+      treeData,
+      originalTreeData,
+      loadStatus,
+      legacyLoadChildren,
+      toStateNodes,
+      setSelectedByNode,
+      updateChecked,
+      setCheckedByNode,
+      isLeaf,
+      getCheckedLeaves,
+      getCheckedNodes,
+      getAncestors,
+      initialize
+    } = useCascaderTree(props, {
+      fieldKeys: mergedFieldKeys,
+      innerValue
     });
-    watch(
-      () => props.modelValue,
-      () => {
-        if (Array.isArray(props.modelValue)) {
-          if (props.modelValue.length > 0) {
-            if (props.modelValue.every(
-              (item, index) => panels.value[index].selected?.[mergedFieldKeys.value.value] === item
-            )) {
-              return;
+    initialize();
+    const { renderedPane, panels, currentTab, tabList } = useCascaderTabs(props, {
+      treeData
+    });
+    const triggerMultipleChange = () => {
+      const nodes = props.checkStrictly ? getCheckedNodes() : getCheckedLeaves();
+      const nextValue = props.allLevels ? nodes.map((node) => getAncestors(node).map((node2) => node2.value)) : nodes.map((node) => node.value);
+      innerValue.value = nextValue;
+      const options = nodes.map(
+        (node) => getAncestors(node).map((node2) => node2.option)
+      );
+      emit("update:model-value", nextValue, options);
+      emit("change", nextValue, options);
+    };
+    const triggerSingleChange = (node) => {
+      const nextValue = props.allLevels ? panels.value.map((panel) => panel.selected).filter(Boolean).map((node2) => node2.value) : node.value;
+      innerValue.value = nextValue;
+      const options = panels.value.map((panel) => panel.selected).filter(Boolean).map((node2) => node2.option);
+      emit("update:model-value", nextValue, options);
+      emit("change", nextValue, options);
+    };
+    const onCheckClick = (node) => {
+      if (node.disabled) return;
+      setCheckedByNode(node, !node.checked);
+      triggerMultipleChange();
+    };
+    const onNodeClick = async (node, panelIndex) => {
+      if (node.disabled) return;
+      if (node.loadStatus === "loading") {
+        return;
+      }
+      if (props.lazy && props.load && !node.isLeaf && node.loadStatus === "idle") {
+        try {
+          node.loadStatus = "loading";
+          const treeNodes = await props.load(node) || [];
+          node.loadStatus = "loaded";
+          node.children = toStateNodes(treeNodes, node);
+          updateChecked(innerValue.value);
+          node.option.children = treeNodes;
+          originalTreeData.value = [...originalTreeData.value];
+          if (node.children.length === 0) {
+            node.isLeaf = true;
+          } else {
+            if (node.checked) {
+              setCheckedByNode(node, true);
             }
           }
-        } else {
-          if (!isEmptyBinding(props.modelValue)) {
-            if (panels.value.some(
-              (panel) => panel.selected?.[mergedFieldKeys.value.value] === props.modelValue
-            )) {
-              return;
+        } catch {
+          node.loadStatus = "idle";
+          return;
+        }
+      }
+      setSelectedByNode(node);
+      const isLast = isLeaf(node);
+      if (!isLast) {
+        currentTab.value = panels.value.length - 1;
+      }
+      if (!isLast && node.children && node.children.length === 0) {
+        node.loadStatus = "loading";
+      }
+      const proxyOption = new Proxy(node.option, {
+        set(target, p, newValue) {
+          if (p === mergedFieldKeys.value.children) {
+            legacyLoadChildren.value = true;
+            node.loadStatus = "loaded";
+            node.children = toStateNodes(newValue, node);
+            if (node.children.length === 0) {
+              node.isLeaf = true;
+            }
+            const isLast2 = isLeaf(node);
+            if (!isLast2) {
+              currentTab.value = panels.value.length - 1;
             }
           }
+          return Reflect.set(target, p, newValue);
+        }
+      });
+      emit("select", proxyOption, panelIndex);
+      if (props.multiple) {
+        if (isLast) {
+          setCheckedByNode(node, !node.checked);
+          triggerMultipleChange();
+        }
+      } else {
+        if (isLast || props.changeOnSelect) {
+          triggerSingleChange(node);
         }
-        tempValue = props.modelValue;
-        updatePanels();
       }
-    );
+    };
     watch(
-      () => props.options,
-      () => {
-        updatePanels();
+      () => props.modelValue,
+      (value) => {
+        if (value === innerValue.value) return;
+        innerValue.value = value;
+        updateChecked(value);
+        currentTab.value = panels.value.length - 1;
       },
       {
         immediate: true
@@ -283,15 +292,25 @@ export default  _defineComponent({
     const cascaderStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, t, updatePanels, isLastOption, onOptionClick, innerPaceholder, mergedFieldKeys, get tempValue() {
-      return tempValue;
-    }, set tempValue(v) {
-      tempValue = v;
-    }, currentTab, renderedPane, panels, tabList, cascaderClass, cascaderStyle, get classNames() {
+    const wrapperStyle = computed(() => {
+      return stringifyStyle({
+        transform: `translateX(${-Number(currentTab.value) * 100}%)`,
+        transitionDuration: renderedPane.value ? null : "0s"
+      });
+    });
+    const loadStatusWrapperClass = computed(() => {
+      return classNames(
+        bem.e("load-status-wrapper"),
+        bem.em(
+          "load-status-wrapper",
+          "show",
+          loadStatus.value !== "loaded" || treeData.value.length === 0
+        )
+      );
+    });
+    const __returned__ = { props, emit, bem, t, mergedFieldKeys, innerValue, treeData, originalTreeData, loadStatus, legacyLoadChildren, toStateNodes, setSelectedByNode, updateChecked, setCheckedByNode, isLeaf, getCheckedLeaves, getCheckedNodes, getAncestors, initialize, renderedPane, panels, currentTab, tabList, triggerMultipleChange, triggerSingleChange, onCheckClick, onNodeClick, cascaderClass, cascaderStyle, wrapperStyle, loadStatusWrapperClass, get classNames() {
       return classNames;
-    }, get stringifyStyle() {
-      return stringifyStyle;
-    }, SarTabs, SarIcon, SarLoading };
+    }, SarTabs, SarIcon, SarLoading, SarCheckbox };
     return __returned__;
   }
 });

package/components/cascader/common.d.ts

@@ -1,27 +1,49 @@
-import { type StyleValue } from 'vue';
+import { InjectionKey, type StyleValue } from 'vue';
 export interface CascaderFieldKeys {
     label?: string;
     value?: string;
     disabled?: string;
     children?: string;
+    isLeaf?: string;
 }
 export interface CascaderOption {
     label?: string;
     value?: string | number;
     disabled?: boolean;
     children?: CascaderOption[];
+    isLeaf?: boolean;
     [key: PropertyKey]: any;
 }
+export interface CascaderStateNode {
+    label: string;
+    value: string | number;
+    key: string | number;
+    disabled: boolean;
+    children?: CascaderStateNode[];
+    parent: CascaderStateNode | null;
+    isLeaf: boolean;
+    loadStatus: 'idle' | 'loading' | 'loaded';
+    depth: number;
+    indeterminate: boolean;
+    checked: boolean;
+    selected: boolean;
+    option: CascaderOption;
+}
+export type CascaderValue = string | number | (string | number)[] | (string | number)[][];
 export interface CascaderProps {
     rootStyle?: StyleValue;
     rootClass?: string;
-    modelValue?: string | number | (string | number)[];
+    modelValue?: CascaderValue;
     options?: CascaderOption[];
     fieldKeys?: CascaderFieldKeys;
     hintText?: string;
     labelRender?: (option: CascaderOption) => string;
     changeOnSelect?: boolean;
     allLevels?: boolean;
+    multiple?: boolean;
+    checkStrictly?: boolean;
+    lazy?: boolean;
+    load?: (node?: CascaderStateNode) => Promise<CascaderOption[]> | CascaderOption[];
 }
 export declare const defaultCascaderProps: {
     options: () => never[];
@@ -32,13 +54,16 @@ export interface CascaderSlots {
     }): any;
 }
 export interface CascaderEmits {
-    (e: 'update:model-value', value: string | number | (string | number)[], selectedOptions: any[]): void;
-    (e: 'change', value: string | number | (string | number)[], selectedOptions: any[]): void;
+    (e: 'update:model-value', value: CascaderValue, selectedOptions: any[]): void;
+    (e: 'change', value: CascaderValue, selectedOptions: any[]): void;
     (e: 'select', option: any, tabIndex: number): void;
 }
 export interface CascaderPanel {
-    options: CascaderOption[];
-    selected: CascaderOption | null;
+    nodes: CascaderStateNode[];
+    selected: CascaderStateNode | null;
 }
 export declare const defaultFieldKeys: CascaderFieldKeys;
-export declare function getSelectedOptionsByValue(options: CascaderOption[], value: string | number | (string | number)[], fieldKeys: Required<CascaderFieldKeys>): CascaderOption[] | undefined;
+export declare function getSelectedOptionsByValue(options: CascaderOption[], value: CascaderValue, fieldKeys: Required<CascaderFieldKeys>, multiple?: boolean): CascaderOption[] | CascaderOption[][] | undefined;
+export declare const cascaderOptionsContextSymbol: InjectionKey<{
+    set: (options: CascaderOption[]) => void;
+}>;

package/components/cascader/common.js

@@ -1,3 +1,4 @@
+import { isNullish } from '../../utils';
 export const defaultCascaderProps = {
     options: () => [],
 };
@@ -6,35 +7,50 @@ export const defaultFieldKeys = {
     value: 'value',
     disabled: 'disabled',
     children: 'children',
+    isLeaf: 'isLeaf',
 };
-export function getSelectedOptionsByValue(options, value, fieldKeys) {
-    if (Array.isArray(value)) {
-        const selectedOptions = [];
-        let list = options;
-        for (const item of value) {
-            const option = list.find((option) => option[fieldKeys.value] === item);
-            if (!option)
-                break;
-            selectedOptions.push(option);
-            list = option[fieldKeys.children];
-            if (!Array.isArray(list))
-                break;
+export function getSelectedOptionsByValue(options, value, fieldKeys, multiple) {
+    // 多选
+    if (multiple) {
+        if (Array.isArray(value)) {
+            return value
+                .map((item) => getSelectedOptionsByValue(options, item, fieldKeys))
+                .filter((item) => Array.isArray(item) ? item.length !== 0 : !isNullish(item));
         }
-        return selectedOptions;
     }
+    // 单选
     else {
-        for (const option of options) {
-            // 优先在子结点中查找，找到后再向上回溯路径
-            // 这样可以处理存在重复值场景时候更偏向于更深层次的选项
-            if (Array.isArray(option[fieldKeys.children])) {
-                const selectedOptions = getSelectedOptionsByValue(option[fieldKeys.children], value, fieldKeys);
-                if (selectedOptions) {
-                    return [option, ...selectedOptions];
-                }
+        // 全路径
+        if (Array.isArray(value)) {
+            const selectedOptions = [];
+            let list = options;
+            for (const item of value) {
+                const option = list.find((option) => option[fieldKeys.value] === item);
+                if (!option)
+                    break;
+                selectedOptions.push(option);
+                list = option[fieldKeys.children];
+                if (!Array.isArray(list))
+                    break;
             }
-            if (option[fieldKeys.value] === value) {
-                return [option];
+            return selectedOptions;
+        }
+        // 最后一级
+        else {
+            for (const option of options) {
+                // 优先在子结点中查找，找到后再向上回溯路径
+                // 这样可以处理存在重复值场景时候更偏向于更深层次的选项
+                if (Array.isArray(option[fieldKeys.children])) {
+                    const selectedOptions = getSelectedOptionsByValue(option[fieldKeys.children], value, fieldKeys, multiple);
+                    if (selectedOptions) {
+                        return [option, ...selectedOptions];
+                    }
+                }
+                if (option[fieldKeys.value] === value) {
+                    return [option];
+                }
             }
         }
     }
 }
+export const cascaderOptionsContextSymbol = Symbol('cascader-options');

package/components/cascader/index.d.ts

@@ -1 +1 @@
-export type { CascaderFieldKeys, CascaderOption, CascaderProps, CascaderSlots, CascaderEmits, } from './common';
+export type { CascaderFieldKeys, CascaderOption, CascaderProps, CascaderSlots, CascaderEmits, CascaderValue, CascaderStateNode, } from './common';