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

package/es/packages/components/transfer/src/transfer.vue2.mjs

@@ -1,4 +1,12 @@
-import { defineComponent, ref, watch, computed, onMounted, resolveComponent, resolveDirective, openBlock, createBlock, normalizeClass, withCtx, createVNode, createElementVNode, createCommentVNode, createElementBlock, Fragment, renderList, withDirectives, vShow, createTextVNode, nextTick } from 'vue';
+import { defineComponent, ref, computed, watch, onMounted, resolveDirective, openBlock, createElementBlock, unref, normalizeClass, createElementVNode, createVNode, createBlock, withCtx, createCommentVNode, Fragment, renderList, withDirectives, vShow, createTextVNode, toDisplayString, nextTick } from 'vue';
+import { ToButton } from '../../button/index.mjs';
+import { ToGap } from '../../gap/index.mjs';
+import { ToInput } from '../../input/index.mjs';
+import { ToPadding } from '../../padding/index.mjs';
+import { ToCheckbox } from '../../checkbox/index.mjs';
+import { ToScroll } from '../../scroll/index.mjs';
+import { langKey, t } from '../../../locale/index.mjs';
+import { getModeClasses } from '../../../hooks/useSetClass.mjs';
 
 const __default__ = defineComponent({
   name: "ToTransfer",
@@ -7,17 +15,18 @@ const __default__ = defineComponent({
 var _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
+    flex: { type: Boolean, default: false },
     mode: { default: "default" },
-    data: { default: () => "\u9009\u98791,\u9009\u98792,\u9009\u98793" },
-    leftTitle: { default: "\u5F85\u9009" },
-    rightTitle: { default: "\u5DF2\u9009" },
+    data: { default: () => "" },
+    leftTitle: { default: "" },
+    rightTitle: { default: "" },
     modelValue: { default: "" },
     labelText: { default: "label" },
     valueText: { default: "value" },
     height: { default: 16 },
     order: { default: "push" },
     filterable: { type: Boolean, default: true },
-    fillet: { default: "normal" }
+    showDisabled: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { emit: __emit }) {
@@ -26,21 +35,24 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const iData = ref([]);
     const dataGlobal = ref(false);
     const dataMap = ref([]);
-    const dataChecked = ref("");
+    const dataChecked = computed(() => {
+      let length = 0;
+      if (props.showDisabled) {
+        length = dataMap.value.filter((item) => item.checked && !item.disabled).length;
+      } else {
+        length = dataMap.value.filter((item) => item.checked).length;
+      }
+      return length;
+    });
     const dataFilterKey = ref("");
-    const iValue = ref("");
+    const iValue = ref(props.modelValue);
     const valueGlobal = ref(false);
     const valueMap = ref([]);
-    const valueChecked = ref("");
+    const valueChecked = computed(() => {
+      return valueMap.value.filter((item) => item.checked).length;
+    });
     const valueFilterKey = ref("");
-    const dataGroup = ref(null);
-    const valueGroup = ref(null);
-    watch(
-      () => dataChecked.value,
-      () => {
-        console.log(dataChecked.value, "=== dataChecked.value ===");
-      }
-    );
+    const stopChange = ref(false);
     watch(
       () => props.data,
       () => {
@@ -53,24 +65,22 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       () => props.modelValue,
       (val) => {
         iValue.value = val || "";
-      },
-      { immediate: true }
+        if (stopChange.value) {
+          return false;
+        }
+        setData();
+      }
     );
-    watch(iValue, (val) => {
-      emit("update:modelValue", val);
-      emit("change", val);
+    onMounted(() => {
+      transData();
       setData();
     });
     const setClass = computed(() => {
       const classes = [];
       if (props.mode)
-        classes.push(`to-transfer-mode-${props.mode}`);
+        classes.push(...getModeClasses(props.mode));
       return classes;
     });
-    onMounted(() => {
-      transData();
-      setData();
-    });
     const transData = () => {
       if (typeof props.data === "string") {
         if (props.data) {
@@ -78,7 +88,8 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           props.data.split(",").map((item) => {
             arr.push({
               [props.labelText]: item,
-              [props.valueText]: item
+              [props.valueText]: item,
+              checked: false
             });
           });
           iData.value = arr;
@@ -86,7 +97,10 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
           iData.value = [];
         }
       } else {
-        iData.value = JSON.parse(JSON.stringify(props.data));
+        let arr = props.data.map((item) => {
+          return { ...item, checked: item.checked || false };
+        });
+        iData.value = JSON.parse(JSON.stringify(arr));
       }
     };
     const setData = () => {
@@ -96,7 +110,12 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       iData.value.map((item) => {
         if (!valueArr.includes(item[props.valueText])) {
           dataMapArr.push(item);
-        } else if (props.order === "original") {
+        } else {
+          if (props.showDisabled) {
+            dataMapArr.push({ ...item, checked: true, disabled: true });
+          }
+        }
+        if (valueArr.includes(item[props.valueText]) && props.order === "original") {
           valueMapArr.push(item);
         }
       });
@@ -109,13 +128,15 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
             valueMapArr.unshift({
               [props.labelText]: iData.value.find((item2) => item2[props.valueText] === item)[props.labelText],
               [props.valueText]: item,
-              disabled: !!iData.value.find((item2) => item2[props.valueText] === item).disabled
+              disabled: !!iData.value.find((item2) => item2[props.valueText] === item).disabled,
+              checked: iData.value.find((item2) => item2[props.valueText] === item).checked
             });
           } else {
             valueMapArr.push({
               [props.labelText]: iData.value.find((item2) => item2[props.valueText] === item)[props.labelText],
               [props.valueText]: item,
-              disabled: !!iData.value.find((item2) => item2[props.valueText] === item).disabled
+              disabled: !!iData.value.find((item2) => item2[props.valueText] === item).disabled,
+              checked: iData.value.find((item2) => item2[props.valueText] === item).checked
             });
           }
         });
@@ -146,36 +167,89 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const add = () => {
-      const valueArr = iValue.value ? iValue.value.split(",") : [];
-      const checkedArr = dataChecked.value.split(",");
-      const arr = [...valueArr, ...checkedArr];
-      clearCheck();
+      if (props.showDisabled) {
+        let arr = dataMap.value.filter((el) => el.checked && !el.disabled).map((item) => {
+          return {
+            ...item,
+            checked: false
+          };
+        });
+        valueMap.value = [...valueMap.value, ...arr];
+        dataMap.value.forEach((item) => {
+          if (item.checked) {
+            item.disabled = true;
+          }
+        });
+      } else {
+        let arr = dataMap.value.filter((el) => el.checked).map((item) => {
+          return {
+            ...item,
+            checked: false
+          };
+        });
+        valueMap.value = [...valueMap.value, ...arr];
+        arr.forEach((el) => {
+          let idx = dataMap.value.findIndex((el2) => el2[props.valueText] === el[props.valueText]);
+          dataMap.value.splice(idx, 1);
+        });
+      }
+      stopChange.value = true;
+      setTimeout(() => {
+        stopChange.value = false;
+      }, 10);
       nextTick(() => {
-        iValue.value = arr.join(",");
+        let val = valueMap.value.map((item) => item[props.valueText]).join(",");
+        emit("update:modelValue", val);
+        emit("change", val);
       });
     };
     const remove = () => {
-      const valueArr = iValue.value.split(",");
-      const checkedArr = valueChecked.value.split(",");
-      const arr = valueArr.filter((item) => !checkedArr.includes(item));
-      clearCheck();
+      let arr = valueMap.value.filter((el) => el.checked).map((item) => {
+        return {
+          ...item,
+          checked: false
+        };
+      });
+      if (props.showDisabled) {
+        arr.forEach((item) => {
+          dataMap.value.forEach((el) => {
+            if (el[props.valueText] === item[props.valueText]) {
+              el.disabled = false;
+              el.checked = false;
+            }
+          });
+        });
+      } else {
+        dataMap.value = [...dataMap.value, ...arr];
+      }
+      arr.forEach((el) => {
+        let idx = valueMap.value.findIndex((el2) => el2[props.valueText] === el[props.valueText]);
+        valueMap.value.splice(idx, 1);
+      });
+      stopChange.value = true;
+      setTimeout(() => {
+        stopChange.value = false;
+      }, 10);
       nextTick(() => {
-        iValue.value = arr.join(",");
+        let val = valueMap.value.map((item) => item[props.valueText]).join(",");
+        emit("update:modelValue", val);
+        emit("change", val);
       });
     };
-    const clearCheck = () => {
-      dataChecked.value = "";
-      valueChecked.value = "";
-      dataGlobal.value = false;
-      valueGlobal.value = false;
-    };
     const selectDataMap = (val, group) => {
-      var _a, _b;
-      const targetGroup = group === "dataGroup" ? dataGroup : valueGroup;
+      const targetGroup = group === "dataGroup" ? dataMap.value : valueMap.value;
       if (val) {
-        (_a = targetGroup.value) == null ? void 0 : _a.all();
+        targetGroup.forEach((item) => {
+          if (!item.disabled) {
+            item.checked = true;
+          }
+        });
       } else {
-        (_b = targetGroup.value) == null ? void 0 : _b.clear();
+        targetGroup.forEach((item) => {
+          if (!item.disabled) {
+            item.checked = false;
+          }
+        });
       }
     };
     const setDataReadonly = (item) => {
@@ -201,203 +275,194 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      const _component_to_checkbox = resolveComponent("to-checkbox");
-      const _component_to_input = resolveComponent("to-input");
-      const _component_to_padding = resolveComponent("to-padding");
-      const _component_to_line = resolveComponent("to-line");
-      const _component_to_gap = resolveComponent("to-gap");
-      const _component_to_checkboxes = resolveComponent("to-checkboxes");
-      const _component_to_scroll = resolveComponent("to-scroll");
-      const _component_to_box = resolveComponent("to-box");
-      const _component_to_button = resolveComponent("to-button");
-      const _component_to_grid = resolveComponent("to-grid");
       const _directive_align = resolveDirective("align");
       const _directive_color = resolveDirective("color");
       const _directive_dis = resolveDirective("dis");
-      return openBlock(), createBlock(_component_to_grid, {
-        class: normalizeClass(setClass.value)
-      }, {
-        default: withCtx(() => [
-          createVNode(_component_to_box, {
-            fillet: _ctx.fillet,
-            mode: "line",
-            padding: "0"
+      return openBlock(), createElementBlock("div", {
+        key: unref(langKey),
+        flex: _ctx.flex ? _ctx.flex : null,
+        class: normalizeClass(["to-transfer", setClass.value])
+      }, [
+        createElementVNode("div", { class: "to-transfer-panel" }, [
+          createElementVNode("span", { class: "to-strong" }, [
+            createVNode(unref(ToCheckbox), {
+              modelValue: dataGlobal.value,
+              "onUpdate:modelValue": ($event) => dataGlobal.value = $event,
+              label: _ctx.leftTitle || unref(t)("to.transfer.pending"),
+              width: "full",
+              onChange: (val) => {
+                selectDataMap(val, "dataGroup");
+              }
+            }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "onChange"])
+          ]),
+          _ctx.filterable ? (openBlock(), createBlock(unref(ToPadding), {
+            key: 0,
+            position: "u"
           }, {
             default: withCtx(() => [
-              createElementVNode("span", { class: "to-strong" }, [
-                createVNode(_component_to_checkbox, {
-                  modelValue: dataGlobal.value,
-                  "onUpdate:modelValue": ($event) => dataGlobal.value = $event,
-                  label: _ctx.leftTitle,
-                  width: "full",
-                  onChange: (val) => {
-                    selectDataMap(val, "dataGroup");
-                  }
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "onChange"])
-              ]),
-              _ctx.filterable ? (openBlock(), createBlock(_component_to_padding, {
-                key: 0,
-                position: "u"
+              createVNode(unref(ToInput), {
+                modelValue: dataFilterKey.value,
+                "onUpdate:modelValue": ($event) => dataFilterKey.value = $event,
+                clearable: "",
+                width: "full",
+                placeholder: unref(t)("to.transfer.placeholder")
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+            ]),
+            _: 1
+            /* STABLE */
+          })) : createCommentVNode("v-if", true),
+          createVNode(unref(ToScroll), { height: _ctx.height }, {
+            default: withCtx(() => [
+              createVNode(unref(ToGap), { value: 0.5 }),
+              dataMap.value && dataMap.value.length > 0 ? (openBlock(), createElementBlock("div", { key: 0 }, [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(dataMap.value, (item, index) => {
+                    return withDirectives((openBlock(), createBlock(unref(ToCheckbox), {
+                      key: index,
+                      modelValue: item.checked,
+                      "onUpdate:modelValue": ($event) => item.checked = $event,
+                      disabled: setDataReadonly(item),
+                      width: "full",
+                      label: item[_ctx.labelText]
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "label"])), [
+                      [vShow, showData(item)]
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])) : withDirectives((openBlock(), createBlock(unref(ToPadding), {
+                key: 1,
+                value: "1.5"
               }, {
                 default: withCtx(() => [
-                  createVNode(_component_to_input, {
-                    modelValue: dataFilterKey.value,
-                    "onUpdate:modelValue": ($event) => dataFilterKey.value = $event,
-                    clearable: "",
-                    width: "full",
-                    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
-                    fillet: _ctx.fillet
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "fillet"])
-                ]),
-                _: 1
-              })) : createCommentVNode("", true),
-              createVNode(_component_to_line, { color: "lightGray" }),
-              createVNode(_component_to_scroll, { height: _ctx.height }, {
-                default: withCtx(() => [
-                  createVNode(_component_to_gap, { value: 0.5 }),
-                  dataMap.value && dataMap.value.length > 0 ? (openBlock(), createBlock(_component_to_checkboxes, {
-                    key: 0,
-                    id: "dataGroupCheckboxes",
-                    ref_key: "dataGroup",
-                    ref: dataGroup,
-                    modelValue: dataChecked.value,
-                    "onUpdate:modelValue": ($event) => dataChecked.value = $event
-                  }, {
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(dataMap.value, (item, index) => {
-                        return withDirectives((openBlock(), createBlock(_component_to_checkbox, {
-                          key: index,
-                          disabled: setDataReadonly(item),
-                          width: "full",
-                          value: item[_ctx.valueText],
-                          label: item[_ctx.labelText]
-                        }, null, 8, ["disabled", "value", "label"])), [
-                          [vShow, showData(item)]
-                        ]);
-                      }), 128))
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue", "onUpdate:modelValue"])) : withDirectives((openBlock(), createBlock(_component_to_padding, {
-                    key: 1,
-                    value: "1.5"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode("\u65E0\u6570\u636E")
-                    ]),
-                    _: 1
-                  })), [
-                    [_directive_align, "center"],
-                    [_directive_color, "info"]
-                  ]),
-                  createVNode(_component_to_gap, { value: 0.5 })
+                  createTextVNode(
+                    toDisplayString(unref(t)("to.transfer.noData")),
+                    1
+                    /* TEXT */
+                  )
                 ]),
                 _: 1
-              }, 8, ["height"])
+                /* STABLE */
+              })), [
+                [_directive_align, "center"],
+                [_directive_color, "info"]
+              ]),
+              createVNode(unref(ToGap), { value: 0.5 })
             ]),
             _: 1
-          }, 8, ["fillet"]),
-          createElementVNode("div", null, [
-            withDirectives(createVNode(_component_to_button, {
+            /* STABLE */
+          }, 8, ["height"])
+        ]),
+        createVNode(unref(ToGap), { inline: "" }),
+        createElementVNode("div", { class: "to-transfer-btns" }, [
+          withDirectives(createVNode(
+            unref(ToButton),
+            {
               icon: "right",
               mode: "none",
               color: "primary",
-              fillet: "pill",
               onClick: add
-            }, null, 512), [
-              [_directive_dis, !dataChecked.value]
-            ]),
-            createVNode(_component_to_gap, { value: 0.5 }),
-            withDirectives(createVNode(_component_to_button, {
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          ), [
+            [_directive_dis, dataChecked.value < 1]
+          ]),
+          createVNode(unref(ToGap), { value: 0.5 }),
+          withDirectives(createVNode(
+            unref(ToButton),
+            {
               icon: "left",
               mode: "none",
               color: "primary",
-              fillet: "pill",
               onClick: remove
-            }, null, 512), [
-              [_directive_dis, !valueChecked.value]
-            ])
+            },
+            null,
+            512
+            /* NEED_PATCH */
+          ), [
+            [_directive_dis, valueChecked.value < 1]
+          ])
+        ]),
+        createVNode(unref(ToGap), { inline: "" }),
+        createElementVNode("div", { class: "to-transfer-panel" }, [
+          createElementVNode("span", { class: "to-strong" }, [
+            createVNode(unref(ToCheckbox), {
+              modelValue: valueGlobal.value,
+              "onUpdate:modelValue": ($event) => valueGlobal.value = $event,
+              label: _ctx.rightTitle || unref(t)("to.transfer.selected"),
+              width: "full",
+              onChange: (val) => {
+                selectDataMap(val, "valueGroup");
+              }
+            }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "onChange"])
           ]),
-          createVNode(_component_to_box, {
-            fillet: _ctx.fillet,
-            mode: "line",
-            padding: "0"
+          _ctx.filterable ? (openBlock(), createBlock(unref(ToPadding), {
+            key: 0,
+            position: "u"
           }, {
             default: withCtx(() => [
-              createElementVNode("span", { class: "to-strong" }, [
-                createVNode(_component_to_checkbox, {
-                  modelValue: valueGlobal.value,
-                  "onUpdate:modelValue": ($event) => valueGlobal.value = $event,
-                  label: _ctx.rightTitle,
-                  width: "full",
-                  onChange: (val) => {
-                    selectDataMap(val, "valueGroup");
-                  }
-                }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "onChange"])
-              ]),
-              _ctx.filterable ? (openBlock(), createBlock(_component_to_padding, {
-                key: 0,
-                position: "u"
+              createVNode(unref(ToInput), {
+                modelValue: valueFilterKey.value,
+                "onUpdate:modelValue": ($event) => valueFilterKey.value = $event,
+                clearable: "",
+                width: "full",
+                placeholder: unref(t)("to.transfer.placeholder")
+              }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+            ]),
+            _: 1
+            /* STABLE */
+          })) : createCommentVNode("v-if", true),
+          createVNode(unref(ToScroll), { height: _ctx.height }, {
+            default: withCtx(() => [
+              createVNode(unref(ToGap), { value: 0.5 }),
+              valueMap.value && valueMap.value.length > 0 ? (openBlock(), createElementBlock("div", { key: 0 }, [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(valueMap.value, (item, index) => {
+                    return withDirectives((openBlock(), createBlock(unref(ToCheckbox), {
+                      key: index,
+                      modelValue: item.checked,
+                      "onUpdate:modelValue": ($event) => item.checked = $event,
+                      disabled: setValueReadonly(item),
+                      width: "full",
+                      label: item[_ctx.labelText]
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled", "label"])), [
+                      [vShow, showValue(item)]
+                    ]);
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])) : withDirectives((openBlock(), createBlock(unref(ToPadding), {
+                key: 1,
+                value: "1.5"
               }, {
                 default: withCtx(() => [
-                  createVNode(_component_to_input, {
-                    modelValue: valueFilterKey.value,
-                    "onUpdate:modelValue": ($event) => valueFilterKey.value = $event,
-                    clearable: "",
-                    width: "full",
-                    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57",
-                    fillet: _ctx.fillet
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "fillet"])
-                ]),
-                _: 1
-              })) : createCommentVNode("", true),
-              createVNode(_component_to_line, { color: "lightGray" }),
-              createVNode(_component_to_scroll, { height: _ctx.height }, {
-                default: withCtx(() => [
-                  createVNode(_component_to_gap, { value: 0.5 }),
-                  valueMap.value && valueMap.value.length > 0 ? (openBlock(), createBlock(_component_to_checkboxes, {
-                    key: 0,
-                    id: "valueGroupCheckboxes",
-                    ref_key: "valueGroup",
-                    ref: valueGroup,
-                    modelValue: valueChecked.value,
-                    "onUpdate:modelValue": ($event) => valueChecked.value = $event
-                  }, {
-                    default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(valueMap.value, (item, index) => {
-                        return withDirectives((openBlock(), createBlock(_component_to_checkbox, {
-                          key: index,
-                          disabled: setValueReadonly(item),
-                          width: "full",
-                          value: item[_ctx.valueText],
-                          label: item[_ctx.labelText]
-                        }, null, 8, ["disabled", "value", "label"])), [
-                          [vShow, showValue(item)]
-                        ]);
-                      }), 128))
-                    ]),
-                    _: 1
-                  }, 8, ["modelValue", "onUpdate:modelValue"])) : withDirectives((openBlock(), createBlock(_component_to_padding, {
-                    key: 1,
-                    value: "1.5"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode("\u65E0\u6570\u636E")
-                    ]),
-                    _: 1
-                  })), [
-                    [_directive_align, "center"],
-                    [_directive_color, "info"]
-                  ]),
-                  createVNode(_component_to_gap, { value: 0.5 })
+                  createTextVNode(
+                    toDisplayString(unref(t)("to.transfer.noData")),
+                    1
+                    /* TEXT */
+                  )
                 ]),
                 _: 1
-              }, 8, ["height"])
+                /* STABLE */
+              })), [
+                [_directive_align, "center"],
+                [_directive_color, "info"]
+              ]),
+              createVNode(unref(ToGap), { value: 0.5 })
             ]),
             _: 1
-          }, 8, ["fillet"])
-        ]),
-        _: 1
-      }, 8, ["class"]);
+            /* STABLE */
+          }, 8, ["height"])
+        ])
+      ], 10, ["flex"]);
     };
   }
 });