快速创建一个表单

[594mantou]

最近优化 DuoyunUI 时写了一些“模式”，就是一些我经常遇到的需求进行了一些抽象实现，比如创建一个表单(复制到控制台试试)：

import("https://esm.sh/duoyun-ui/patterns/form?bundle").then(({ createForm }) => {
  createForm({
    type: "modal",
    data: { firstName: "First Name", lastName: "Last Name", github: "https://github.com/mantou132" },
    header: `Create User`,
    formItems: [
      [{
        type: "text",
        field: "firstName",
        label: "First Name",
      },{
        type: "text",
        field: "lastName",
        label: "Last Name",
      }],{
        type: "text",
        field: "github",
        label: "Github",
      }
    ],
  });
});

返回一个 Promise ，对应提交和取消，参数可以添加 prepareOk/prepareClose 来打断关闭表单。

字段支持的 type: text password date date-time date-range number checkbox checkbox-group picker radio-group select textarea slot

其中 slot 是用来自定义的，比如：

{
  type: "slot",
  slot: new HTMLInputElement(),
  field: "github",
  label: "Github",
}

模式可以直接创建一个 CRUD 应用： https://duoyun-ui.gemjs.org/zh/blog/crud

忘记了，`HTMLInputElement` 是不可构造的，可以构造自定义函数比如: `new DuoyunColorPickerElement`