sard-uniapp 1.25.4 → 1.25.5

package/components/cascader-input/cascader-input.vue

@@ -13,6 +13,7 @@
     :internal-prepend="$slots.prepend ? 1 : 0"
     :internal-append="$slots.append ? 1 : 0"
     :input-props="inputProps"
+    :multiline="multiple"
     @clear="onClear"
     @click="show"
   >
@@ -38,6 +39,10 @@
       :change-on-select="changeOnSelect"
       :label-render="labelRender"
       :all-levels="allLevels"
+      :multiple="multiple"
+      :check-strictly="checkStrictly"
+      :lazy="lazy"
+      :load="load"
       :validate-event="validateEvent"
       :resettable="resettable"
       @select="(option, tabIndex) => $emit('select', option, tabIndex)"
@@ -54,14 +59,15 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { watch, computed } from "vue";
+import { watch, computed, shallowRef, provide } from "vue";
 import SarPopoutInput from "../popout-input/popout-input.vue";
 import SarCascaderPopout from "../cascader-popout/cascader-popout.vue";
 import {
+  cascaderOptionsContextSymbol,
   defaultFieldKeys,
   getSelectedOptionsByValue
 } from "../cascader/common";
-import { isEmptyBinding } from "../../utils";
+import { isEmptyArray, isEmptyBinding, isNullish } from "../../utils";
 import { usePopoutInput } from "../../use";
 import {
   defaultCascaderInputProps
@@ -69,13 +75,17 @@ import {
 /**
  * @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。
+ * @property {boolean} multiple 是否多选，默认值：false。
+ * @property {boolean} checkStrictly 是否严格的遵守父子节点不互相关联（用于多选），默认值：false。
+ * @property {boolean} lazy 是否懒加载子节点，需与 load 方法结合使用，默认值：false。
+ * @property {(node?: CascaderStateNode) => Promise<CascaderOption[]> | CascaderOption[]} load 加载子节点的方法，仅当 lazy 属性为true 时生效，默认值：-。
  * @property {string} popoutClass 弹窗框根元素类名，默认值：-。
  * @property {StyleValue} popoutStyle 弹窗框根元素样式，默认值：-。
  * @property {boolean} visible 是否显示弹出框，默认值：-。
@@ -92,6 +102,7 @@ import {
  * @property {string} arrow 自定义箭头图标名，默认值：'caret-right'。
  * @property {string} arrowFamily 自定义箭头图标字体，默认值：'sari'。
  * @property {InputProps} inputProps 自定义输入框组件属性，默认值：-。
+ * @property {number} maxRows 多选时，输入框最大展示行数，设为 -1 表示不限制，默认值：3。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: string | number, selectedOptions: CascaderOption[]) => void} change 级联输入组件值改变时触发
  * @event {(option: CascaderOption, tabIndex: number) => void} select 选择级联选择某一项时触发
@@ -120,14 +131,15 @@ export default  _defineComponent({
   __name: "cascader-input",
   props:  _mergeDefaults({
     valueOnClear: { type: Function, required: false },
+    maxRows: { type: Number, required: false },
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
     showConfirm: { type: Boolean, required: false },
     validateEvent: { type: Boolean, required: false },
     popoutClass: { type: String, required: false },
-    popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    popoutStyle: { type: null, required: false },
     resettable: { type: Boolean, required: false },
-    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 },
@@ -136,6 +148,10 @@ export default  _defineComponent({
     labelRender: { type: Function, required: false },
     changeOnSelect: { 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 },
     placeholder: { type: String, required: false },
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
@@ -175,24 +191,62 @@ export default  _defineComponent({
         props.fieldKeys
       );
     });
+    const lazyOptions = shallowRef([]);
+    provide(cascaderOptionsContextSymbol, {
+      set(options) {
+        lazyOptions.value = options;
+      }
+    });
+    const renderedOptions = computed(() => {
+      return props.lazy && !!props.load ? lazyOptions.value : props.options;
+    });
     function getOutletText(options, value, fieldKeys) {
-      const selectedOptions = getSelectedOptionsByValue(options, value, fieldKeys);
-      if (!selectedOptions) {
-        return isEmptyBinding(value) ? "" : String(value);
+      const selectedOptions = getSelectedOptionsByValue(
+        options,
+        value,
+        fieldKeys,
+        props.multiple
+      );
+      if (!selectedOptions || selectedOptions.length === 0) {
+        return getValueDisplay(value);
       }
-      const labels = selectedOptions.map((option) => option[fieldKeys.label]);
-      return labels.join("/");
+      const labels = selectedOptions.map((option) => {
+        return Array.isArray(option) ? option.map((item) => item[fieldKeys.label]) : option[fieldKeys.label];
+      });
+      return props.multiple ? labels.map((item) => item.join("/")) : labels.join("/");
     }
-    function getInputValue() {
-      if (isEmptyBinding(innerValue.value) || !props.options) {
+    function getValueDisplay(value) {
+      if (Array.isArray(value)) {
+        return value.map(
+          (item) => Array.isArray(item) ? item.join("/") : item
+        );
+      }
+      return isNullish(value) ? "" : String(value);
+    }
+    function getInputValue(options) {
+      if (isEmptyBinding(innerValue.value) || isEmptyArray(innerValue.value)) {
         return "";
       }
-      return getOutletText(props.options, innerValue.value, fieldkeys.value);
+      if (!options || isEmptyArray(options)) {
+        return getValueDisplay(innerValue.value);
+      }
+      return getOutletText(options, innerValue.value, fieldkeys.value);
+    }
+    function getMayMultilineText(value) {
+      if (Array.isArray(value)) {
+        const diff = value.length - (props.maxRows === -1 ? Number.MAX_SAFE_INTEGER : props.maxRows);
+        const rows = value.slice(0, props.maxRows);
+        if (diff > 0) {
+          rows.push(`+${diff}`);
+        }
+        return rows.join("\n");
+      }
+      return value;
     }
     watch(
-      [innerValue, () => props.options],
+      [innerValue, renderedOptions],
       () => {
-        inputValue.value = getInputValue();
+        inputValue.value = getMayMultilineText(getInputValue(renderedOptions.value));
       },
       {
         immediate: true
@@ -201,7 +255,7 @@ export default  _defineComponent({
     const onConfirm = () => {
       emit("confirm");
     };
-    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook, fieldkeys, getOutletText, getInputValue, onConfirm, SarPopoutInput, SarCascaderPopout };
+    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook, fieldkeys, lazyOptions, renderedOptions, getOutletText, getValueDisplay, getInputValue, getMayMultilineText, onConfirm, SarPopoutInput, SarCascaderPopout };
     return __returned__;
   }
 });