@touchvue/ui 1.0.0-beta.6 → 1.0.0-beta.60

package/lib/packages/components/cascader/src/cascader.vue2.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var index = require('../../icon/index.js');
-var index$1 = require('../../float/index.js');
-var cascaderItem_vue_vue_type_script_setup_true_lang = require('./cascader-item.vue2.js');
-var index$2 = require('../../../locale/index.js');
+var index$1 = require('../../icon/index.js');
+var index$2 = require('../../float/index.js');
+var cascaderItem = require('./cascader-item.vue.js');
+var index = require('../../../locale/index.js');
+var useSetClass = require('../../../hooks/useSetClass.js');
 var util = require('../../../utils/util.js');
 
 const __default__ = vue.defineComponent({
@@ -25,14 +26,20 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     labelText: { default: "label" },
     valueText: { default: "value" },
     childrenText: { default: "children" },
-    placeholder: { default: "\u8BF7\u9009\u62E9" },
-    optionWidth: { default: "16em" },
-    optionCol: { default: "" },
+    placeholder: { default: "" },
+    optionWidth: { default: "" },
     data: { default: () => [] },
-    comparable: { type: Boolean, default: false }
+    comparable: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    desc: { default: "" },
+    prefix: { default: "" },
+    showAllLevels: { type: Boolean, default: true },
+    checkedDatas: { default: () => [] },
+    flex: { type: Boolean, default: false }
   },
-  emits: ["change", "update:modelValue"],
+  emits: ["change", "update:modelValue", "update:checkedDatas"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const ToFormItem = vue.inject("ToFormItem", {});
     const props = __props;
     const ToForm = vue.inject("ToForm", {});
     const iconValue = vue.ref("unfold");
@@ -43,8 +50,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const $el = vue.ref(null);
     const currentLevel = vue.ref(0);
     const checkedData = vue.ref([]);
+    const optionLevels = vue.ref([data_.value]);
     const valueStore = vue.ref([]);
     const disabled = vue.ref(props.disabled);
+    const errorTip = vue.ref("");
+    const errorType = vue.ref("rule");
     const floatWidth = vue.computed(() => {
       let unit = "em";
       let sArr = [];
@@ -62,22 +72,33 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         } else {
           omit = Number(props.optionWidth);
         }
+        return `${(currentLevel.value + 1) * omit}${unit}`;
+      } else {
+        return "";
       }
-      return `${(currentLevel.value + 1) * omit}${unit}`;
     });
     const setClass = vue.computed(() => {
-      const arr = ["to-form-readonly"];
-      if (props.mode) {
-        arr.push(`mode-${props.mode}`);
-      }
-      if (ToForm && (ToForm == null ? void 0 : ToForm.comparable) || props.comparable) {
-        arr.push("to-compare");
-      }
-      if (changed.value) {
-        arr.push("to-cascader-changed");
-      }
-      if (disabled.value || props.disabled) {
-        arr.push("is-disabled");
+      const arr = ["to-disable-target"];
+      if (errorTip.value) {
+        arr.push("to-cascader-mode-line");
+        arr.push("to-cascader-color-danger");
+        arr.push("to-cascader-tip-show");
+      } else {
+        if (props.mode) {
+          arr.push(...useSetClass.getModeClasses(props.mode));
+        }
+        if (ToForm && (ToForm == null ? void 0 : ToForm.comparable) || props.comparable) {
+          arr.push("to-compare");
+        }
+        if (changed.value) {
+          arr.push("to-cascader-changed");
+        }
+        if (disabled.value || props.disabled) {
+          arr.push("is-disabled");
+        }
+        if (!value_.value) {
+          arr.push("is-placeholder");
+        }
       }
       return arr;
     });
@@ -99,19 +120,32 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return false;
       }
     });
+    const validateRequired = vue.computed(() => {
+      if (props.required) {
+        return "true";
+      } else if (ToFormItem && ToFormItem.required) {
+        return "true";
+      } else {
+        return "false";
+      }
+    });
+    const validateDesc = vue.computed(() => {
+      if (props.desc) {
+        return props.desc;
+      } else if (ToFormItem && ToFormItem.label) {
+        return ToFormItem.label;
+      } else {
+        return "";
+      }
+    });
     vue.provide("pProps", {
-      props,
-      setLevel,
-      close,
-      setParentCheckedByValue,
-      store: data_.value,
-      setViewData
+      props
     });
     vue.watch(
       () => props.modelValue,
       (val) => {
         value_.value = val;
-        if (props.data && props.data.length) {
+        if (props.data) {
           vue.nextTick(() => {
             setLabel();
           });
@@ -119,6 +153,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       },
       { immediate: true }
     );
+    vue.watch(
+      () => props.data,
+      (val) => {
+        data_.value = initData(val);
+        checkedData.value = [];
+        optionLevels.value = [data_.value];
+        setLabel();
+      },
+      { deep: true }
+    );
     const emit = __emit;
     function initData(data, levels = 0) {
       let arr = util.deepClone(data);
@@ -140,7 +184,11 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return tem;
     }
     function handleClick() {
+      errorTip.value = "";
       if (!(props.disabled || disabled.value)) {
+        if (iconValue.value === "unfold") {
+          setOptionLevelsByCheckedData();
+        }
         cascaderFloat.value.toggle($el.value);
         iconValue.value = iconValue.value === "unfold" ? "fold" : "unfold";
       }
@@ -150,6 +198,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         valueLabel.value = "";
         resetCheckedData(data_.value);
         checkedData.value = [];
+        optionLevels.value = [data_.value];
         value_.value = "";
         change("");
       }
@@ -157,7 +206,47 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     function setLevel(idx) {
       currentLevel.value = idx;
     }
-    function setParentCheckedByValue(arr, value, level) {
+    function setParentCheckedByValue(value, level) {
+      fixStore(data_.value, value, level);
+    }
+    function getChildren(item) {
+      const children = item[props.childrenText];
+      return Array.isArray(children) ? children : [];
+    }
+    function setOptionLevelsByCheckedData() {
+      const levels = [data_.value];
+      let currentData = data_.value;
+      for (const item of checkedData.value) {
+        const current = currentData.find((k) => k[props.valueText] === item[props.valueText]);
+        if (!current)
+          break;
+        const children = getChildren(current);
+        if (!children.length)
+          break;
+        levels.push(children);
+        currentData = children;
+      }
+      optionLevels.value = levels;
+      setLevel(levels.length - 1);
+    }
+    function handleItemSelect(item) {
+      const level = item.level || 0;
+      const children = getChildren(item);
+      optionLevels.value = optionLevels.value.slice(0, level + 1);
+      setParentCheckedByValue(item[props.valueText], level);
+      if (children.length) {
+        optionLevels.value = [...optionLevels.value, children];
+        setLevel(level + 1);
+        if (props.any) {
+          setViewData();
+        }
+      } else {
+        setLevel(level);
+        setViewData();
+        close();
+      }
+    }
+    function fixStore(arr, value, level) {
       arr.forEach((item) => {
         if (item.level === level) {
           if (item[props.valueText] === value) {
@@ -168,7 +257,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
           }
         } else {
           if (item[props.childrenText] && item[props.childrenText].length) {
-            setParentCheckedByValue(item[props.childrenText], value, level);
+            fixStore(item[props.childrenText], value, level);
           }
         }
       });
@@ -204,7 +293,16 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     }
     function setViewData() {
       let labelArr = checkedData.value.map((item) => item[props.labelText]);
-      valueLabel.value = labelArr.join(" / ");
+      let leafArr = checkedData.value.map((item) => item.isLeaf);
+      if (props.showAllLevels) {
+        valueLabel.value = labelArr.join(" / ");
+      } else {
+        if (leafArr[leafArr.length - 1]) {
+          valueLabel.value = labelArr[labelArr.length - 1];
+        } else {
+          valueLabel.value = "";
+        }
+      }
       let leafItem = [];
       if (!props.any) {
         leafItem = checkedData.value.filter((item) => item.isLeaf);
@@ -217,29 +315,49 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     }
     function close() {
-      cascaderFloat.value.toggle($el.value);
+      cascaderFloat.value.close();
     }
     function afterClose() {
       setLevel(0);
+      iconValue.value = "unfold";
     }
     function change(v) {
-      emit("change", v, checkedData.value);
       emit("update:modelValue", v);
+      emit("change", v, checkedData.value);
     }
     const setLabel = () => {
+      resetCheckedData(data_.value);
       if (value_.value) {
-        valueLabel.value = getLabelPath(value_.value, data_.value);
+        valueLabel.value = getLabelPath(value_.value, data_.value) || value_.value;
+        checkedData.value.forEach((item) => {
+          item.isSelect = true;
+        });
       } else {
+        checkedData.value = [];
         valueLabel.value = props.placeholder;
       }
+      setOptionLevelsByCheckedData();
     };
-    function getLabelPath(value, data, path = []) {
+    function getLabelPath(value, data, path = [], pData = [], syncCheckedData = true) {
       for (const item of data) {
         if (item[props.valueText] === value) {
-          return [...path, item[props.labelText]].join(" / ");
+          let tem = [];
+          if (syncCheckedData) {
+            checkedData.value = [...pData, item];
+          }
+          if (props.showAllLevels) {
+            tem = [...path, item[props.labelText]].join(" / ");
+          } else {
+            if (item.isLeaf) {
+              tem = item[props.labelText];
+            } else {
+              tem = "";
+            }
+          }
+          return tem;
         }
         if (item[props.childrenText] && item[props.childrenText].length) {
-          const result = getLabelPath(value, item[props.childrenText], [...path, item[props.labelText]]);
+          const result = getLabelPath(value, item[props.childrenText], [...path, item[props.labelText]], [...pData, item], syncCheckedData);
           if (result) {
             return result;
           }
@@ -257,65 +375,211 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const setDisabled = (f) => {
       disabled.value = f;
     };
+    const getCheckData = () => {
+      return checkedData.value;
+    };
+    vue.watch(
+      () => checkedData.value,
+      (val) => {
+        emit("update:checkedDatas", val);
+      }
+    );
     __expose({
       compare,
       restore,
       changed,
-      setDisabled
+      setDisabled,
+      errorTip,
+      errorType,
+      getCheckData
     });
     return (_ctx, _cache) => {
       const _component_to_scroll = vue.resolveComponent("to-scroll");
       const _directive_tip = vue.resolveDirective("tip");
+      const _directive_color = vue.resolveDirective("color");
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "$el",
         ref: $el,
+        key: vue.unref(index.langKey),
+        flex: _ctx.flex ? _ctx.flex : null,
         class: vue.normalizeClass(["to-cascader", setClass.value]),
         style: vue.normalizeStyle(setStyle.value),
+        role: "button",
         onClick: handleClick
       }, [
+        validateRequired.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+          key: 0,
+          class: "to-validate",
+          req: validateRequired.value,
+          desc: validateDesc.value,
+          value: value_.value ? "true" : ""
+        }, null, 8, ["req", "desc", "value"])), [
+          [vue.vShow, false]
+        ]) : vue.createCommentVNode("v-if", true),
+        _ctx.$slots.prefix ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 1,
+          class: "to-cascader-prefix"
+        }, [
+          vue.renderSlot(_ctx.$slots, "prefix")
+        ])) : vue.createCommentVNode("v-if", true),
+        props.prefix ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 2,
+          class: "to-cascader-prefix-text"
+        }, [
+          vue.createElementVNode(
+            "span",
+            null,
+            vue.toDisplayString(props.prefix),
+            1
+            /* TEXT */
+          )
+        ])) : vue.createCommentVNode("v-if", true),
         vue.createElementVNode("span", { class: "to-cascader-content" }, [
           vue.createElementVNode("span", { class: "to-cascader-value" }, [
-            value_.value ? (vue.openBlock(), vue.createElementBlock("span", { key: 0 }, vue.toDisplayString(valueLabel.value), 1)) : (vue.openBlock(), vue.createElementBlock("span", {
-              key: 1,
-              class: "to-cascader-placeholder"
-            }, vue.toDisplayString(_ctx.placeholder), 1))
+            value_.value ? (vue.openBlock(), vue.createElementBlock(
+              "span",
+              { key: 0 },
+              vue.toDisplayString(valueLabel.value),
+              1
+              /* TEXT */
+            )) : (vue.openBlock(), vue.createElementBlock(
+              "span",
+              {
+                key: 1,
+                class: "to-cascader-placeholder"
+              },
+              vue.toDisplayString(_ctx.placeholder || vue.unref(index.t)("to.cascader.placeholder")),
+              1
+              /* TEXT */
+            ))
           ])
         ]),
         _ctx.clearable && value_.value ? (vue.openBlock(), vue.createElementBlock("span", {
-          key: 0,
+          key: 3,
           class: "to-cascader-clear"
         }, [
-          vue.createVNode(vue.unref(index.ToIcon), {
+          vue.createVNode(vue.unref(index$1.ToIcon), {
             value: "close",
             onClick: vue.withModifiers(handleClear, ["stop"])
           })
-        ])) : vue.createCommentVNode("", true),
+        ])) : vue.createCommentVNode("v-if", true),
         vue.createElementVNode("span", { class: "to-cascader-arrow" }, [
-          vue.createCommentVNode("", true)
+          vue.createCommentVNode("v-if", true)
         ]),
-        vue.createVNode(vue.unref(index$1.ToFloat), {
-          ref_key: "cascaderFloat",
-          ref: cascaderFloat,
-          class: "to-cascader-layer",
-          width: floatWidth.value,
-          onClosed: afterClose
-        }, {
-          default: vue.withCtx(() => [
-            !data_.value.length ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              style: { "text-align": "center", "color": "#ccc", "padding": "0 0.3em" }
-            }, "\u6682\u65E0\u6570\u636E")) : vue.createCommentVNode("", true),
-            vue.createVNode(_component_to_scroll, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(cascaderItem_vue_vue_type_script_setup_true_lang.default, { data: data_.value }, null, 8, ["data"])
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["width"])
-      ], 6)), [
-        [_directive_tip, changed.value ? vue.unref(index$2.t)("to.common.originalValue", getLabelPath(valueStore.value[0], data_.value)) : ""]
+        (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(["to-cascader", setClass.value])
+            },
+            [
+              vue.createVNode(vue.unref(index$2.ToFloat), {
+                ref_key: "cascaderFloat",
+                ref: cascaderFloat,
+                global: false,
+                class: "to-cascader-layer",
+                width: floatWidth.value,
+                lazy: "",
+                align: "left",
+                onClosed: afterClose
+              }, {
+                default: vue.withCtx(() => [
+                  !data_.value.length ? (vue.openBlock(), vue.createElementBlock(
+                    "div",
+                    {
+                      key: 0,
+                      style: { "text-align": "center", "color": "#ccc", "padding": "3em 0.3em" }
+                    },
+                    vue.toDisplayString(vue.unref(index.t)("to.cascader.noData")),
+                    1
+                    /* TEXT */
+                  )) : vue.createCommentVNode("v-if", true),
+                  vue.createVNode(_component_to_scroll, {
+                    onClick: vue.withModifiers(() => {
+                    }, ["stop"])
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createElementVNode("div", { class: "to-cascader-options" }, [
+                        (vue.openBlock(true), vue.createElementBlock(
+                          vue.Fragment,
+                          null,
+                          vue.renderList(optionLevels.value, (levelData, levelIndex) => {
+                            return vue.openBlock(), vue.createBlock(cascaderItem.default, {
+                              key: levelIndex,
+                              data: levelData,
+                              onSelect: handleItemSelect
+                            }, null, 8, ["data"]);
+                          }),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["onClick"])
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["width"])
+            ],
+            2
+            /* CLASS */
+          )
+        ])),
+        errorTip.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("span", {
+          key: 4,
+          class: "to-box-tip"
+        }, [
+          errorType.value === "rule" ? (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 0 },
+            [
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(index.t)("to.cascader.inputError")) + " ",
+                1
+                /* TEXT */
+              ),
+              vue.withDirectives(vue.createVNode(
+                vue.unref(index$1.ToIcon),
+                {
+                  style: { "height": "auto" },
+                  value: "help",
+                  color: "danger",
+                  mode: "toast"
+                },
+                null,
+                512
+                /* NEED_PATCH */
+              ), [
+                [
+                  _directive_tip,
+                  errorTip.value,
+                  void 0,
+                  { danger: true }
+                ]
+              ])
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : (vue.openBlock(), vue.createElementBlock(
+            vue.Fragment,
+            { key: 1 },
+            [
+              vue.createTextVNode(
+                vue.toDisplayString(vue.unref(index.t)("to.cascader.required")),
+                1
+                /* TEXT */
+              )
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          ))
+        ])), [
+          [_directive_color, "danger"]
+        ]) : vue.createCommentVNode("v-if", true)
+      ], 14, ["flex"])), [
+        [_directive_tip, changed.value ? vue.unref(index.t)("to.common.originalValue", getLabelPath(valueStore.value[0], data_.value, [], [], false)) : ""]
       ]);
     };
   }