@fmdevui/fm-dev 1.0.10 → 1.0.11

package/es/packages/core/ui/components/transfer/index.vue2.mjs

@@ -0,0 +1,370 @@
+import { defineComponent, reactive, computed, watch, resolveComponent, createBlock, openBlock, withCtx, createVNode, createElementVNode, createTextVNode, toDisplayString, withDirectives, createElementBlock, Fragment, renderList, vShow } from 'vue';
+
+const _hoisted_1 = { class: "fm-transfer-panel" };
+const _hoisted_2 = { class: "fm-transfer-panel__header" };
+const _hoisted_3 = { class: "fm-transfer-panel__body" };
+const _hoisted_4 = { class: "fm-transfer-buttons__item" };
+const _hoisted_5 = { class: "fm-transfer-buttons__item" };
+const _hoisted_6 = { class: "fm-transfer-buttons__item" };
+const _hoisted_7 = { class: "fm-transfer-buttons__item" };
+const _hoisted_8 = { class: "fm-transfer-panel" };
+const _hoisted_9 = { class: "fm-transfer-panel__header" };
+const _hoisted_10 = { class: "fm-transfer-panel__body" };
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "FmTransfer"
+  },
+  __name: "index",
+  props: {
+    leftTitle: String,
+    rightTitle: String,
+    options: {
+      type: Object,
+      default: () => ({
+        value: "id",
+        label: "name",
+        disabled: "disabled"
+      })
+    },
+    leftData: { type: Array, default: () => [] },
+    // 左边全部数据
+    rightData: { type: Array, default: () => [] }
+    // 右边全部数据
+  },
+  emits: ["left", "right", "allLeft", "allRight", "update:leftData", "update:rightData"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const state = reactive({
+      leftAllChecked: false,
+      // 左边是否全选
+      leftKeyword: "",
+      // 左边搜索关键词
+      leftChecked: [],
+      // 左边选中数据
+      rightAllChecked: false,
+      // 右边是否全选
+      rightKeyword: "",
+      // 右边搜索关键词
+      rightChecked: []
+      // 右边选中数据
+    });
+    const leftFilterData = computed(() => {
+      let result = props.leftData.filter((e) => e[props.options.label].toLowerCase().includes(state.leftKeyword.toLowerCase()));
+      if (state.leftChecked.length > 0) {
+        for (let i = state.leftChecked.length - 1; i >= 0; i--) {
+          const index = result.findIndex((e) => e[props.options.value] == state.leftChecked[i]);
+          if (index == -1) state.leftChecked.splice(i, 1);
+        }
+      }
+      return result;
+    });
+    const handleLeftAllChecked = (value) => {
+      state.leftChecked = value ? leftFilterData.value.filter((e) => e[props.options.disabled] == false).map((e) => e[props.options.value]) : [];
+    };
+    const leftIndeterminate = computed(() => {
+      const checkedLength = state.leftChecked.length;
+      const result = checkedLength > 0 && checkedLength < leftFilterData.value.filter((e) => e[props.options.disabled] == false).length;
+      return result;
+    });
+    watch(
+      () => state.leftChecked,
+      (val) => {
+        state.leftAllChecked = val.length > 0 && val.length == leftFilterData.value.filter((e) => e[props.options.disabled] == false).length;
+      }
+    );
+    const rightFilterData = computed(() => {
+      let result = props.rightData.filter((e) => e[props.options.label].toLowerCase().includes(state.rightKeyword.toLowerCase()));
+      if (state.rightChecked.length > 0) {
+        for (let i = state.rightChecked.length - 1; i >= 0; i--) {
+          const index = result.findIndex((e) => e[props.options.value] == state.rightChecked[i]);
+          if (index == -1) state.rightChecked.splice(i, 1);
+        }
+      }
+      return result;
+    });
+    const handleRightAllChecked = (value) => {
+      state.rightChecked = value ? rightFilterData.value.filter((e) => e[props.options.disabled] == false).map((e) => e[props.options.value]) : [];
+    };
+    const rightIndeterminate = computed(() => {
+      const checkedLength = state.rightChecked.length;
+      const result = checkedLength > 0 && checkedLength < rightFilterData.value.filter((e) => e[props.options.disabled] == false).length;
+      return result;
+    });
+    watch(
+      () => state.rightChecked,
+      (val) => {
+        state.rightAllChecked = val.length > 0 && val.length == rightFilterData.value.filter((e) => e[props.options.disabled] == false).length;
+      }
+    );
+    const dbClickToRight = (item) => {
+      if (item[props.options.value] && item[props.options.disabled] === false) {
+        let adds = props.leftData.filter((e) => item[props.options.value] == e[props.options.value]);
+        let cuts = props.leftData.filter((e) => item[props.options.value] != e[props.options.value]);
+        emits("update:leftData", cuts);
+        emits("update:rightData", props.rightData.concat(adds));
+        emits("right");
+        state.leftChecked = state.leftChecked.filter((e) => item[props.options.value] != e);
+      }
+    };
+    const toRight = () => {
+      if (state.leftChecked?.length > 0) {
+        let adds = props.leftData.filter((e) => state.leftChecked.some((x) => x == e[props.options.value]));
+        let cuts = props.leftData.filter((e) => state.leftChecked.every((x) => x != e[props.options.value]));
+        emits("update:leftData", cuts);
+        emits("update:rightData", props.rightData.concat(adds));
+        emits("right");
+        state.leftChecked = [];
+      }
+    };
+    const allToRight = () => {
+      if (leftFilterData.value?.length > 0) {
+        let temp = leftFilterData.value.filter((e) => e[props.options.disabled] == false);
+        let adds = props.leftData.filter((e) => temp.some((x) => x[props.options.value] == e[props.options.value]));
+        let cuts = props.leftData.filter((e) => temp.every((x) => x[props.options.value] != e[props.options.value]));
+        emits("update:leftData", cuts);
+        emits("update:rightData", props.rightData.concat(adds));
+        emits("allRight");
+        state.leftChecked = [];
+      }
+    };
+    const dbClickToLeft = (item) => {
+      if (item[props.options.value] && item[props.options.disabled] === false) {
+        let adds = props.rightData.filter((e) => item[props.options.value] == e[props.options.value]);
+        let cuts = props.rightData.filter((e) => item[props.options.value] != e[props.options.value]);
+        emits("update:leftData", props.leftData.concat(adds));
+        emits("update:rightData", cuts);
+        emits("left");
+        state.rightChecked = state.rightChecked.filter((e) => item[props.options.value] != e);
+      }
+    };
+    const toLeft = () => {
+      if (state.rightChecked?.length > 0) {
+        let adds = props.rightData.filter((e) => state.rightChecked.some((x) => x == e[props.options.value]));
+        let cuts = props.rightData.filter((e) => state.rightChecked.every((x) => x != e[props.options.value]));
+        emits("update:leftData", props.leftData.concat(adds));
+        emits("update:rightData", cuts);
+        emits("left");
+        state.rightChecked = [];
+      }
+    };
+    const allToLeft = () => {
+      if (rightFilterData.value?.length > 0) {
+        let temp = rightFilterData.value.filter((e) => e[props.options.disabled] == false);
+        let adds = props.rightData.filter((e) => temp.some((x) => x[props.options.value] == e[props.options.value]));
+        let cuts = props.rightData.filter((e) => temp.every((x) => x[props.options.value] != e[props.options.value]));
+        emits("update:leftData", props.leftData.concat(adds));
+        emits("update:rightData", cuts);
+        emits("allLeft");
+        state.rightChecked = [];
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_el_checkbox = resolveComponent("el-checkbox");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
+      const _component_el_col = resolveComponent("el-col");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_el_row = resolveComponent("el-row");
+      return openBlock(), createBlock(_component_el_row, { gutter: 10 }, {
+        default: withCtx(() => [
+          createVNode(_component_el_col, { span: 10 }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_1, [
+                createElementVNode("p", _hoisted_2, [
+                  createVNode(_component_el_checkbox, {
+                    modelValue: state.leftAllChecked,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.leftAllChecked = $event),
+                    indeterminate: leftIndeterminate.value,
+                    "validate-event": false,
+                    onChange: handleLeftAllChecked
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(
+                        toDisplayString(props.leftTitle),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["modelValue", "indeterminate"]),
+                  createElementVNode(
+                    "span",
+                    null,
+                    toDisplayString(state.leftChecked.length) + "/" + toDisplayString(props.leftData.length),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                createElementVNode("div", _hoisted_3, [
+                  createVNode(_component_el_input, {
+                    class: "transfer-panel__filter",
+                    modelValue: state.leftKeyword,
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.leftKeyword = $event),
+                    placeholder: "\u641C\u7D22",
+                    "prefix-icon": "ele-Search",
+                    clearable: "",
+                    "validate-event": false
+                  }, null, 8, ["modelValue"]),
+                  withDirectives(createVNode(_component_el_checkbox_group, {
+                    modelValue: state.leftChecked,
+                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => state.leftChecked = $event),
+                    "validate-event": false,
+                    class: "fm-transfer-panel__list"
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(leftFilterData.value, (item, index) => {
+                          return openBlock(), createBlock(_component_el_checkbox, {
+                            key: index,
+                            value: item[props.options.value],
+                            label: item[props.options.label],
+                            disabled: item[props.options.disabled],
+                            "validate-event": false,
+                            class: "fm-transfer-panel__item",
+                            onDblclick: ($event) => dbClickToRight(item)
+                          }, null, 8, ["value", "label", "disabled", "onDblclick"]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["modelValue"]), [
+                    [vShow, true]
+                  ])
+                ])
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          }),
+          createVNode(_component_el_col, {
+            span: 4,
+            class: "fm-transfer-buttons"
+          }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_4, [
+                createVNode(_component_el_button, {
+                  type: "primary",
+                  style: {},
+                  icon: "ele-ArrowRight",
+                  onClick: toRight
+                })
+              ]),
+              createElementVNode("div", _hoisted_5, [
+                createVNode(_component_el_button, {
+                  type: "primary",
+                  style: {},
+                  icon: "ele-ArrowLeft",
+                  onClick: toLeft
+                })
+              ]),
+              createElementVNode("div", _hoisted_6, [
+                createVNode(_component_el_button, {
+                  type: "primary",
+                  style: {},
+                  icon: "ele-DArrowRight",
+                  onClick: allToRight
+                })
+              ]),
+              createElementVNode("div", _hoisted_7, [
+                createVNode(_component_el_button, {
+                  type: "primary",
+                  style: {},
+                  icon: "ele-DArrowLeft",
+                  onClick: allToLeft
+                })
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          }),
+          createVNode(_component_el_col, { span: 10 }, {
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_8, [
+                createElementVNode("p", _hoisted_9, [
+                  createVNode(_component_el_checkbox, {
+                    modelValue: state.rightAllChecked,
+                    "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => state.rightAllChecked = $event),
+                    indeterminate: rightIndeterminate.value,
+                    "validate-event": false,
+                    onChange: handleRightAllChecked
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(
+                        toDisplayString(props.rightTitle),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["modelValue", "indeterminate"]),
+                  createElementVNode(
+                    "span",
+                    null,
+                    toDisplayString(state.rightChecked.length) + "/" + toDisplayString(props.rightData.length),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                createElementVNode("div", _hoisted_10, [
+                  createVNode(_component_el_input, {
+                    class: "transfer-panel__filter",
+                    modelValue: state.rightKeyword,
+                    "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => state.rightKeyword = $event),
+                    placeholder: "\u641C\u7D22",
+                    "prefix-icon": "ele-Search",
+                    clearable: "",
+                    "validate-event": false
+                  }, null, 8, ["modelValue"]),
+                  withDirectives(createVNode(_component_el_checkbox_group, {
+                    modelValue: state.rightChecked,
+                    "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => state.rightChecked = $event),
+                    "validate-event": false,
+                    class: "fm-transfer-panel__list"
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(rightFilterData.value, (item, index) => {
+                          return openBlock(), createBlock(_component_el_checkbox, {
+                            key: index,
+                            value: item[props.options.value],
+                            label: item[props.options.label],
+                            disabled: item[props.options.disabled],
+                            "validate-event": false,
+                            class: "fm-transfer-panel__item",
+                            onDblclick: ($event) => dbClickToLeft(item)
+                          }, null, 8, ["value", "label", "disabled", "onDblclick"]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["modelValue"]), [
+                    [vShow, true]
+                  ])
+                ])
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      });
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/packages/core/ui/components/transfer/style/css.mjs

@@ -0,0 +1 @@
+import 'fm-dev/theme-chalk/t-transfer.css';

package/es/packages/core/ui/components/transfer/style/index.mjs

@@ -0,0 +1 @@
+import 'fm-dev/theme-chalk/src/t-transfer.scss';

package/index.css

@@ -0,0 +1 @@
+.fm-transfer-panel{box-sizing:border-box;display:inline-block;max-height:100%;overflow:hidden;position:relative;text-align:left;vertical-align:middle}.fm-transfer-panel,.fm-transfer-panel__header{box-shadow:0 0 0 1px var(--el-border-color,var(--el-border-color)) inset;width:100%}.fm-transfer-panel__header{align-items:center;display:flex;flex-wrap:nowrap;justify-content:space-between;padding:3px 6px}.fm-transfer-panel__body{height:400px}.fm-transfer-panel__body .transfer-panel__filter{padding:6px}.fm-transfer-panel__body .transfer-panel__list{height:calc(100% - 36px);overflow:auto;padding-top:10px}.fm-transfer-panel__body .transfer-panel__list .transfer-panel__item{display:block!important;padding-left:6px}.fm-transfer-buttons{align-items:center;display:flex;flex-direction:column;justify-content:center;text-align:center}.fm-transfer-buttons__item{padding-top:10px;width:100%}.fm-notice-bar{border-radius:4px;padding:0 15px;width:100%}.fm-notice-bar .notice-bar-warp{align-items:center;display:flex;height:inherit;width:100%}.fm-notice-bar .notice-bar-warp .notice-bar-warp-text-box{align-items:center;display:flex;flex:1;height:inherit;margin-right:35px;overflow:hidden;position:relative}.fm-notice-bar .notice-bar-warp .notice-bar-warp-left-icon{font-size:inherit!important;width:24px}.fm-notice-bar .notice-bar-warp .notice-bar-warp-right-icon{font-size:inherit!important;text-align:right;width:24px}.fm-notice-bar .notice-bar-warp .notice-bar-warp-right-icon:hover{cursor:pointer}