@ftjs/tdesign 0.5.3

package/dist/index.js

@@ -0,0 +1,457 @@
+import { computed, toValue, createVNode, mergeProps, defineComponent, createBlock, openBlock, resolveDynamicComponent, unref, createElementBlock, Fragment, renderList, ref, useId, withCtx, renderSlot, createCommentVNode, createTextVNode, createElementVNode } from "vue";
+import { getField, set, useFormItem, unrefs, useFormInject, useForm } from "@ftjs/core";
+import { FormItem, AutoComplete as AutoComplete$1, Cascader as Cascader$1, Form, Button, Dialog, Tree } from "tdesign-vue-next";
+import { MoveIcon, SettingIcon } from "tdesign-icons-vue-next";
+const useFormItemProps = (column) => {
+  return computed(() => {
+    const name = getField(column);
+    const label = toValue(column.title) ?? "";
+    return {
+      name,
+      label
+    };
+  });
+};
+const useRules = (props) => {
+  const rules = computed(() => {
+    const rulesObj = {};
+    for (const column of props.columns) {
+      if (column.rules) {
+        const field = getField(column);
+        set(rulesObj, field, toValue(column.rules));
+      }
+    }
+    return rulesObj;
+  });
+  return { rules };
+};
+const AutoComplete = defineFormItem((props) => {
+  const {
+    valueComputed
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = unrefs(props.column.props);
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value || "-"]) : createVNode(AutoComplete$1, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event,
+        "placeholder": `请输入${formItemProps.value.label}`
+      }, _props), null)]
+    });
+  };
+});
+const Cascader = defineFormItem((props) => {
+  const {
+    valueComputed
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = unrefs(props.column.props);
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value || "-"]) : (
+        // @ts-expect-error Type 'TdSelectInputProps | SelectInputValue | undefined' is not assignable to type 'TdSelectInputProps | undefined'.
+        createVNode(Cascader$1, mergeProps({
+          "value": valueComputed.value,
+          "onUpdate:value": ($event) => valueComputed.value = $event,
+          "placeholder": `请输入${formItemProps.value.label}`
+        }, _props), null)
+      )]
+    });
+  };
+});
+function defineFormItem(setup) {
+  return /* @__PURE__ */ defineComponent(setup, {
+    props: {
+      column: Object,
+      isView: Boolean
+    }
+  });
+}
+const formRenderMap = /* @__PURE__ */ new Map([["auto-complete", AutoComplete], ["cascader", Cascader]]);
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "FtTdFormContentItem",
+    inheritAttrs: false
+  },
+  __name: "form-content-item",
+  props: {
+    column: {},
+    isView: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const { form } = useFormInject();
+    const isView = computed(() => {
+      return toValue(props.column.isView) ?? props.isView;
+    });
+    return (_ctx, _cache) => {
+      return isView.value && _ctx.column.viewRender ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.column.viewRender), {
+        key: 0,
+        formData: unref(form)
+      }, null, 8, ["formData"])) : !isView.value && _ctx.column.editRender ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.column.editRender), {
+        key: 1,
+        formData: unref(form)
+      }, null, 8, ["formData"])) : (openBlock(), createBlock(resolveDynamicComponent(unref(formRenderMap).get(_ctx.column.type)), {
+        key: 2,
+        column: _ctx.column,
+        "is-view": isView.value
+      }, null, 8, ["column", "is-view"]));
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "FtTdFormContent",
+    inheritAttrs: false
+  },
+  __name: "form-content",
+  props: {
+    columns: {},
+    isView: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column) => {
+        return openBlock(), createBlock(_sfc_main$3, {
+          key: unref(getField)(column),
+          column,
+          "is-view": _ctx.isView
+        }, null, 8, ["column", "is-view"]);
+      }), 128);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "FtTdForm",
+    inheritAttrs: false
+  },
+  __name: "ft-td-form",
+  props: {
+    width: {},
+    hideFooter: { type: Boolean },
+    hideConfirm: { type: Boolean },
+    hideReset: { type: Boolean },
+    columns: {},
+    internalFormProps: {},
+    formData: {},
+    "onUpdate:formData": { type: Function },
+    onSubmit: { type: Function },
+    isView: { type: Boolean },
+    cache: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const { getFormData, visibleColumns, form, resetToDefault, setAsDefault } = useForm(props);
+    const formRef = ref();
+    const { rules } = useRules(props);
+    const formProps = computed(() => {
+      return {
+        data: form.value,
+        onSubmit: async (context) => {
+          var _a;
+          if (context.firstError) return;
+          const formData = getFormData();
+          (_a = props.onSubmit) == null ? void 0 : _a.call(props, formData);
+        },
+        ...props.internalFormProps
+      };
+    });
+    const id = useId();
+    __expose({
+      formInstance: formRef,
+      resetToDefault,
+      getFormData,
+      setAsDefault
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Form), mergeProps({
+        ref_key: "formRef",
+        ref: formRef,
+        name: unref(id),
+        style: { width: _ctx.width },
+        rules: unref(rules)
+      }, { ..._ctx.$attrs, ...formProps.value }), {
+        default: withCtx(() => [
+          createVNode(_sfc_main$2, {
+            columns: unref(visibleColumns),
+            "is-view": _ctx.isView
+          }, null, 8, ["columns", "is-view"]),
+          renderSlot(_ctx.$slots, "footer"),
+          !_ctx.hideFooter && !_ctx.$slots.footer && !_ctx.isView ? (openBlock(), createBlock(unref(FormItem), {
+            key: 0,
+            label: " ",
+            colon: false
+          }, {
+            default: withCtx(() => [
+              !_ctx.hideConfirm ? (openBlock(), createBlock(unref(Button), {
+                key: 0,
+                theme: "primary",
+                type: "submit"
+              }, {
+                default: withCtx(() => _cache[1] || (_cache[1] = [
+                  createTextVNode(" 提交 ")
+                ])),
+                _: 1
+              })) : createCommentVNode("", true),
+              !_ctx.hideReset ? (openBlock(), createBlock(unref(Button), {
+                key: 1,
+                style: { "margin-left": "10px" },
+                theme: "danger",
+                onClick: _cache[0] || (_cache[0] = () => unref(resetToDefault)())
+              }, {
+                default: withCtx(() => _cache[2] || (_cache[2] = [
+                  createTextVNode(" 重置 ")
+                ])),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["name", "style", "rules"]);
+    };
+  }
+});
+const _hoisted_1 = { style: { "text-align": "center" } };
+const _hoisted_2 = { style: { "display": "flex", "gap": "10px" } };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "FtTdFormSearch",
+    inheritAttrs: false
+  },
+  __name: "ft-td-form-search",
+  props: {
+    columns: {},
+    internalFormProps: {},
+    formData: {},
+    "onUpdate:formData": { type: Function },
+    onSubmit: { type: Function },
+    isView: { type: Boolean },
+    cache: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const {
+      visibleColumns,
+      form,
+      resetToDefault,
+      getFormData,
+      columnsSort,
+      columnsChecked,
+      resetColumnsChecked,
+      resetColumnsSort,
+      setAsDefault
+    } = useForm(props);
+    const formRef = ref();
+    const { rules } = useRules(props);
+    const formProps = computed(() => {
+      return {
+        layout: "inline",
+        ...props.internalFormProps,
+        data: form.value,
+        onSubmit: async (context) => {
+          var _a;
+          if (context.firstError) return;
+          const formData = getFormData();
+          (_a = props.onSubmit) == null ? void 0 : _a.call(props, formData);
+        }
+      };
+    });
+    const settingModal = ref(false);
+    let oldSortList = [];
+    const createColumnsTree = () => {
+      const treeData = [
+        { label: "全选", value: "__all", draggable: false, children: [] }
+      ];
+      const children = [];
+      for (const column of props.columns) {
+        const key = getField(column);
+        children.push({
+          label: toValue(column.title),
+          value: key
+        });
+      }
+      children.sort((a, b) => {
+        const aSort = columnsSort.value[a.value];
+        const bSort = columnsSort.value[b.value];
+        return aSort - bSort;
+      });
+      oldSortList = [...children];
+      treeData[0].children = children;
+      return { treeData };
+    };
+    const columnsTree = ref([]);
+    const columnsCheckedTree = ref([]);
+    const setting = () => {
+      const { treeData } = createColumnsTree();
+      columnsTree.value = treeData;
+      columnsCheckedTree.value = JSON.parse(JSON.stringify(columnsChecked.value));
+      settingModal.value = true;
+    };
+    const onSettingOk = () => {
+      settingModal.value = false;
+      columnsChecked.value = columnsCheckedTree.value;
+      const list = columnsTree.value[0].children;
+      const oldColumnsSort = {
+        ...columnsSort.value
+      };
+      const newColumnsSort = {};
+      list.forEach((e, idx) => {
+        const oldNode = oldSortList[idx];
+        const oldField = oldNode.value;
+        const oldSort = oldColumnsSort[oldField];
+        const curField = e.value;
+        newColumnsSort[curField] = oldSort;
+      });
+      columnsSort.value = newColumnsSort;
+    };
+    const onReset = () => {
+      resetColumnsChecked();
+      resetColumnsSort();
+      settingModal.value = false;
+    };
+    const allowDrop = ({ dropNode, dropPosition }) => {
+      if (dropNode.value === "__all") return false;
+      if (dropPosition === 0) return false;
+      return true;
+    };
+    const onDrop = ({ dragNode, dropPosition, dropNode }) => {
+      const list = columnsTree.value[0].children;
+      const fromIndex = list.findIndex((e) => e.value === dragNode.value);
+      list.splice(fromIndex, 1);
+      const toIndex = list.findIndex((e) => e.value === dropNode.value) + dropPosition;
+      list.splice(toIndex, 0, dragNode);
+    };
+    __expose({
+      formInstance: formRef,
+      formData: form,
+      resetToDefault,
+      getFormData,
+      setAsDefault
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(unref(Dialog), {
+          visible: settingModal.value,
+          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => settingModal.value = $event),
+          mode: "modeless",
+          width: 260,
+          destroyOnClose: ""
+        }, {
+          header: withCtx(() => _cache[3] || (_cache[3] = [
+            createElementVNode("span", null, [
+              createTextVNode(" 配置筛选项 "),
+              createElementVNode("span", { style: { "font-size": "12px", "color": "gray" } }, " (可拖动排序) ")
+            ], -1)
+          ])),
+          footer: withCtx(() => [
+            createElementVNode("div", _hoisted_1, [
+              createVNode(unref(Button), {
+                theme: "danger",
+                onClick: onReset
+              }, {
+                default: withCtx(() => _cache[4] || (_cache[4] = [
+                  createTextVNode(" 重置 ")
+                ])),
+                _: 1
+              }),
+              createVNode(unref(Button), {
+                theme: "primary",
+                onClick: onSettingOk
+              }, {
+                default: withCtx(() => _cache[5] || (_cache[5] = [
+                  createTextVNode(" 保存 ")
+                ])),
+                _: 1
+              })
+            ])
+          ]),
+          default: withCtx(() => [
+            createVNode(unref(Tree), {
+              data: columnsTree.value,
+              modelValue: columnsCheckedTree.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => columnsCheckedTree.value = $event),
+              expanded: ["__all"],
+              checkable: "",
+              draggable: "",
+              line: "",
+              style: { "--td-brand-color-light": "none" },
+              allowDrop,
+              onDrop
+            }, {
+              operations: withCtx(({ node }) => [
+                node.value !== "__all" ? (openBlock(), createBlock(unref(MoveIcon), { key: 0 })) : createCommentVNode("", true)
+              ]),
+              _: 1
+            }, 8, ["data", "modelValue"])
+          ]),
+          _: 1
+        }, 8, ["visible"]),
+        createVNode(unref(Form), mergeProps({
+          ref_key: "formRef",
+          ref: formRef,
+          style: { "gap": "10px" },
+          rules: unref(rules)
+        }, { ..._ctx.$attrs, ...formProps.value }), {
+          default: withCtx(() => [
+            createVNode(_sfc_main$2, {
+              columns: unref(visibleColumns),
+              "is-view": _ctx.isView
+            }, null, 8, ["columns", "is-view"]),
+            createVNode(unref(FormItem), { style: { "--ft-form-control-width": "220px" } }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_2, [
+                  _ctx.cache ? (openBlock(), createBlock(unref(Button), {
+                    key: 0,
+                    theme: "primary",
+                    ghost: "",
+                    onClick: setting
+                  }, {
+                    icon: withCtx(() => [
+                      createVNode(unref(SettingIcon))
+                    ]),
+                    default: withCtx(() => [
+                      _cache[6] || (_cache[6] = createTextVNode(" 配置 "))
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true),
+                  createVNode(unref(Button), {
+                    theme: "primary",
+                    type: "submit"
+                  }, {
+                    default: withCtx(() => _cache[7] || (_cache[7] = [
+                      createTextVNode(" 查询 ")
+                    ])),
+                    _: 1
+                  }),
+                  createVNode(unref(Button), {
+                    theme: "danger",
+                    onClick: _cache[2] || (_cache[2] = () => unref(resetToDefault)())
+                  }, {
+                    default: withCtx(() => _cache[8] || (_cache[8] = [
+                      createTextVNode(" 重置 ")
+                    ])),
+                    _: 1
+                  })
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 16, ["rules"])
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main$1 as FtTdForm,
+  _sfc_main as FtTdFormSearch
+};

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@ftjs/tdesign",
+  "version": "0.5.3",
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "dayjs": "^1.11.13",
+    "tdesign-vue-next": "^1.11.5",
+    "tdesign-icons-vue-next": "^0.3.5",
+    "vue": "^3.5.13",
+    "vue-component-type-helpers": "^2.2.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vue-tsc": "2.2.0",
+    "@ftjs/core": "0.5.3"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0",
+    "@ftjs/core": ">=0.0.1",
+    "dayjs": ">=1.0.0",
+    "tdesign-vue-next": ">=1.11.5"
+  },
+  "scripts": {
+    "build": "vite build",
+    "minify": "pnpm dlx esbuild ./dist/index.js --minify --outfile=./dist/index.min.js",
+    "pub": "tsx ../../scripts/publish.ts"
+  }
+}