el-form-renderer-vue3 1.0.0

package/src/components/femessage/util/transform-content.js

@@ -0,0 +1,48 @@
+import _kebabcase from "lodash.kebabcase";
+export default function transformContent(content) {
+  return content.map(({ ...item }) => {
+    if (item.type === "group") {
+      item.items = transformContent(item.items);
+    } else {
+      removeDollarInKey(item);
+      setItemId(item);
+      extractRulesFromComponent(item);
+      // 有些旧写法是 checkboxGroup & radioGroup
+      // 转换字符串string为kebab case.（foo-bar）
+      item.type = _kebabcase(item.type);
+    }
+
+    return item;
+  });
+}
+// 兼容旧写法：$id、$name
+function removeDollarInKey(item) {
+  Object.keys(item)
+    //   首先检查属性名是否以"$"开头,然后检查去掉"$"后的属性名是否不在对象item中。
+    .filter((k) => k.startsWith("$") && !(k.slice(1) in item))
+    //   将对象item中的k属性的值赋给item[k.slice(1)]，然后删除原来的k属性，以实现将"$"去除的操作。
+    .forEach((k) => ((item[k.slice(1)] = item[k]), delete item[k]));
+}
+
+// 为一个对象 item 设置一个 id 属性，但只有在 item 的 id 属性不存在时才会执行。
+function setItemId(item) {
+  if (item.id) return;
+  // name 是符合表单项直觉的命名； prop 是为了与 element 的 table 的 columns 匹配
+  item.id = item.name || item.prop;
+}
+
+// 其作用是从给定的 item 参数中提取规则并将其添加到 item.rules 属性中
+export function extractRulesFromComponent(item) {
+  // 是否覆盖自定义组件内置的校验规则;(overrideRules:true不校验组件内规则)
+  if (item.overrideRules) return;
+  const { component } = item;
+
+  // 使用全局注册的组件暂时无法处理(处理自定义组件内的rules)
+  if (!component || typeof component === "string") return;
+  console.log(component);
+  const { rules = [] } = component;
+  item.rules = [
+    ...(item.rules || []),
+    ...(typeof rules === "function" ? rules(item) : rules),
+  ];
+}

package/src/components/femessage/util/utils.js

@@ -0,0 +1,127 @@
+import _isplainobject from "lodash.isplainobject";
+// var pairs = [
+//   ["a", 1],
+//   ["b", 2],
+//   ["c", 3],
+// ];==》{ 'a': 1, 'b': 2, 'c': 3 }
+import _frompairs from "lodash.frompairs";
+// collect 函数接受两个参数，content 和 key，其中 content 是一个包含嵌套数据的数组，key 是要收集的键的名称。（key：options| defult）
+export function collect(content, key) {
+  return _frompairs(
+    content
+
+      // 使用 map 函数对 content 数组进行映射操作。对每个数组中的元素（item）进行处理，创建一个新的对象，该对象包含三个属性：
+      .map((item) => ({
+        id: item.id,
+        type: item.type,
+        value: item.type === "group" ? collect(item.items, key) : item[key],
+      }))
+      //  函数对上一步生成的对象数组进行过滤。只保留那些满足以下条件的对象：（带有optios数据的）
+      .filter(
+        ({ type, value }) =>
+          value !== undefined || (type === "group" && Object.keys(value).length)
+      )
+      // 返回 [select（id），optons]
+      .map(({ id, value }) => [id, value])
+  );
+}
+/**
+ * 根据 content 中的 outputFormat 来处理 value；
+ * 如果 outputFormat 处理后的值是对象类型，会覆盖（Object.assign）到 value 上
+ */
+
+// value 是待处理的值，content 是一个数组，strict 是一个可选的参数，默认为 false。（当 strict 为 true 时，只返回设置的表单项的值, 过滤掉冗余字段, ）
+export function transformOutputValue(value, content, { strict = false } = {}) {
+  // 参数的值创建一个新的对象 newVal，如果 strict 为 true，则创建一个空对象，否则创建一个与输入 value 一样的对象的副本。
+  const newVal = strict ? {} : { ...value };
+
+  Object.keys(value).forEach((id) => {
+    // 找出表单项
+    const item = content.value.find((item) => item.id === id);
+    if (!item) return;
+    // 除去多选
+    if (item.type !== "group") {
+      // 用于处理输出值，参数为对应组件返回值
+      // 如果处理后的值是对象类型，会覆盖（Object.assign）到整个表单的值上
+      if (item.outputFormat) {
+        const v = item.outputFormat(value[id]);
+        // REVIEW: 仅根据 format 后的类型来判断赋值形式，有些隐晦
+        //   (boolean): 如果 value 为一个普通对象，那么返回 true，否则返回 false(({ 'x': 0, 'y': 0 }); (Object.create(null));)
+        if (_isplainobject(v)) Object.assign(newVal, v);
+        else newVal[id] = v;
+      } else {
+        // 如果 item 没有 outputFormat 属性，直接将 value[id] 赋值给 newVal[id]。
+        newVal[id] = value[id];
+      }
+    } else {
+      // 多选递归处理
+      newVal[id] = transformOutputValue(value[id], item.items, { strict });
+    }
+  });
+
+  return newVal;
+}
+
+/**
+ * 根据 content 中的 inputFormat 来处理 value
+ * inputFormat 接受的是当前层级的 value
+ * 复杂点在于，不管传入的 value 是否包含某表单项的 key，所有使用了 inputFormat 的项都有可能在这次 update 中被更新
+ */
+export function transformInputValue(value, content) {
+  // 首先，创建了一个名为 newVal 的新对象，它是 value 的副本，以便在不修改原始数据的情况下进行操作。
+  const newVal = { ...value };
+  const processItem = (item) => {
+    const { id } = item;
+    if (item.inputFormat) {
+      // 对于每个 item，它检查是否存在 inputFormat 属性。如果存在，它将调用 item.inputFormat(value) 来处理 value，
+      // 然后将处理后的结果赋值给 newVal 的相应属性（根据 id 来确定属性名），但仅在处理后的值不为 undefined 时才会进行赋值。
+      const v = item.inputFormat(value);
+      if (v !== undefined) newVal[id] = v;
+    } else if (id in value) {
+      // 如果 item 没有 inputFormat 属性，它会检查是否 value 中存在与 item 的 id 相匹配的属性。如果存在，它会将该属性的值赋值给 newVal 的相应属性。
+      if (item.type !== "group") {
+        newVal[id] = value[id];
+      } else {
+        // 如果 item 的类型是 "group"，则会递归调用 transformInputValue 函数来处理嵌套的对象。
+        newVal[id] = tran;
+        transformInputValue(value[id], item.items);
+      }
+    }
+  };
+  //  判断响应式数据的类型
+  const itemsToProcess = content.value || content;
+  itemsToProcess.forEach(processItem);
+  return newVal;
+}
+
+// 对 group checkbox-group初始化值修正默认为空数组
+export function correctValue(value, content) {
+  content.forEach(({ type, id, items }) => {
+    switch (type) {
+      case "group":
+        if (!(id in value)) value[id] = {};
+        correctValue(value[id], items);
+        break;
+      case "checkbox-group":
+        if (!(id in value)) value[id] = [];
+        break;
+    }
+  });
+}
+/**
+ * 递归合并 oldV & newV，策略如下：
+ * 1. 如果该项的 type 不是 GROUP，直接覆盖合并到 oldV
+ * 2. 如果是，则递归执行步骤 1
+ */
+export function mergeValue(oldV, newV, content) {
+  // 遍历 newV 对象的所有属性
+  Object.keys(newV).forEach((k) => {
+    // 对于每个属性 k，首先尝试在 content 数组中查找具有相同 id 值的项，如果找不到则使用一个空对象。
+    const item = content.value.find((item) => item.id === k) || {};
+    // 如果不是 "group" 类型, 就直接将 newV 中的属性值覆盖到 oldV 中的对应属性上，实现合并。
+    if (item.type !== "group") oldV[k] = newV[k];
+    // 如果项的类型是 "group"，则递归调用这个函数 mergeValue，以进一步合并 oldV[k] 和 newV[k]，并传入该项的子项数组 item.items 作为 content 参数。
+    else mergeValue(oldV[k], newV[k], item.items);
+  });
+}
+export function noop() {}

package/src/el-form-renderer.md

@@ -0,0 +1,220 @@
+## 遗留问题 :带解决
+
+select 为 multiple 多选时 必须初始化空数组（在 elementplus v-model 初始化 updateValue 时 为空数组会触发校验）
+
+## Props
+
+```ts
+export default {
+  // ...
+  props: {
+    /**
+     * support all el-form's props
+     * @see: https://element.eleme.io/#/zh-CN/component/form#form-attributes
+     */
+
+    /**
+     * 表单项的配置数组，每个表单项代表一个原子表单项
+     * the form config's array, each item represents a form-item
+     */
+    content: {
+      type: Array, // type：Content[], check Content's definition below
+      required: true
+    },
+
+    /**
+     * disable all form-items
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+
+/**
+ * 表单项的typescript定义
+ * 支持所有el-form-item's props。表单项组件本身的props定义在el上
+ * definition of form-item written in typescript.
+ * support all el-form-item's props. The component's props need to be set at prop el
+ */
+interface Content {
+  // 每一个原子都存在 id，用于存储该原子的值，不能重复
+  // key of form-item value in form value. Must be unique
+  id: string
+
+  /**
+   * 可以是element提供的所有表单组件类型，如传入'input'，则渲染出'el-input'
+   * 当type="group"时，可以创造复杂对象类型的表单数据，配合items使用。此时getFormValue()返回的是对象类型的数据，对象的每个属性对应items里的每一项
+   * support all element's form component, e.g., type 'input' will render as 'el-input'.
+   * you can create nested form value with type 'group' and use items to define that form value's shape. The type of this form value will be 'object'
+   */
+  type: string
+
+  /**
+   * 当type="group"时使用
+   * items内依然遵循同一层级的id不重复的原则
+   * using with type 'group'
+   * the `id` in each item of items must be unique
+   */
+  items: Content[]
+
+  /**
+   * 默认值
+   * FIXME: 别用关键字做 key
+   */
+  default?: any
+
+  /**
+   * 当 type === 'input' 时展示文本值
+   * 当 type === 'select' 时展示对应 label
+   * 对于其他组件等同于 disabled = true
+   */
+  readonly = false
+
+  /**
+   * @deprecated
+   */
+  enableWhen?: object | string
+
+  /**
+   * 传入一个方法，并返回 boolean，返回 true 时则隐藏该表单项
+   * formValue 为当前 form 的值，item 为当前表单项的定义
+   * hide the form-item when return true
+   * formValue is same as what getFormValue returns, and item is the config of this form-item
+   */
+  hidden?: (formValue: Object, item: Content) => boolean
+
+  /**
+   * 具有选择功能的原子表单可用此定义可选项
+   * use with type: select, radio-group, radio-button, checkbox-group, checkbox-button
+   */
+  options?: {label: string; value?: any}[]
+
+  /**
+   * 配置remote.url，即可远程配置组件的某个prop！
+   * remote接受以下属性：
+   * url: 远程接口的地址
+   * prop: 要注入的 prop 的名称，默认为 options
+   * request: 可选，请求方法
+   * dataPath: 可选，data在响应体中的路径
+   * onResponse: 可选，处理请求回来的数据
+   * onError: 可选，处理请求出错的情况
+   * 另外，针对 select、radio-group、checkbox-group，远程数据能自动映射成 el-option 选项！以下属性仅在此情况使用
+   * label: 可选，可直接配置远程数据中用作 label 的key
+   * value: 可选，可直接配置远程数据中用作 value 的key
+   * @see https://zhuanlan.zhihu.com/p/97827063
+   *
+   * use remote to set one prop! remote accept following props:
+   * url: remote api address
+   * prop: prop name that data inject
+   * request: optional, customize how to get your options
+   * dataPath: optional, data's path in response
+   * onResponse: optional, deal with your response
+   * onError: optional, deal with request error
+   * and, we treat select、radio-group、checkbox-group specially and the resp will be map as an el-option's group! following props only suitable for this case
+   * label: optional, label key in resp
+   * value: optional, value key in resp
+   */
+  remote?: {
+    url: string
+    request = () => this.$axios.get(url).then(resp => resp.data)
+    prop = 'options'
+    dataPath = ''
+    onResponse = resp => {
+      if (dataPath) resp = _get(resp, dataPath)
+      switch (this.data.type) {
+        case 'select':
+        case 'checkbox-group':
+        case 'radio-group':
+          return resp.map(item => ({
+            label: item[label],
+            value: item[value]
+          }))
+        default:
+          return resp
+      }
+    }
+    onError = error => console.error(error.message)
+    label = 'label'
+    value = 'value'
+  }
+
+  attrs?: object // html attributes
+  /**
+   * 用于定义具体原子表单（如el-input）的属性，比如定义el-input的placeholder
+   * use to define props of the actual component of this form-item, such as placeholder of el-input
+   */
+  el?: object
+
+  /**
+   * 使用自定义组件
+   * component适用于渲染局部注册组件和自定义组件，而type适用于带el-前缀的全局组件
+   * custom component
+   * use it when element's form components are not enough
+   */
+  component?: Vue
+
+  /**
+   * 是否覆盖自定义组件内置的校验规则
+   * `true` 为覆盖， 默认为 `false`
+   * whether to override the validation rules written in custom components
+   * `true` to override, default `false`
+   */
+  overrideRules: boolean
+
+  label?: string //set el-form-item's label
+  trim = true // trim value at change event
+
+  // 用于处理输入值，输入的值包括：1. default；2. v-model；3. updateForm。参数为整个表单的值对象或 updateForm 传入的对象
+  // 如果 inputFormat 返回 undefined，则不会更新此表单项
+  // obj is param you passed to updateForm. You can use this function to hijack this process and customize the form value
+  inputFormat?: (obj: any) => any
+
+  // 用于处理输出值，参数为对应组件返回值
+  // 如果处理后的值是对象类型，会覆盖（Object.assign）到整个表单的值上
+  // used to hijack the getFormValue's process and customize the return value
+  outputFormat?: (val: any) => any
+
+  // set el-form-item's rules
+  rules?: object
+
+  // @deprecated
+  atChange?: (id: string, value: any) => void
+
+  /**
+   * 监听表单项发出的事件
+   * listen to any events emitted by component of form item
+   * @param {any[]} args - what that event emits
+   * @param {function} updateForm - same as methods.updateForm
+   */
+  on?: {
+    [eventName: string]: (args: any[], updateForm: function) => void
+  }
+}
+
+/**
+ * a tour of typescript
+ */
+interface obj {
+  a: string // type string
+  b?: string // type string, optional
+  c = true // type boolean, optional, default true
+  d: string[] // type array, each item must be string
+  e: any // could be any valid js type
+  f: (a: number) => void // type function, which receives a param 'a' as number and return nothing
+  h: Vue // instance of Vue
+  i: {[a: string]: number} // type object, whose key is type string, and value is type number
+}
+```
+
+## Methods
+
+support all [el-form's methods](https://element.eleme.io/#/zh-CN/component/form#form-methods)
+
+## Slots
+
+| Slot     | Description                                 |
+| -------- | ------------------------------------------- |
+| default  | insert at bottom                            |
+| id:hello | insert before form-item whose id is 'hello' |

package/src/main.js

@@ -0,0 +1,15 @@
+// main
+import { createApp } from "vue";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import App from "./App.vue";
+import router from "./router/index";
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+const app = createApp(App);
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
+app.use(router);
+app.use(ElementPlus);
+app.mount("#app");

package/src/router/index.js

@@ -0,0 +1,160 @@
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../view/HomeView.vue";
+import AboutView from "../view/AboutView.vue";
+import checkboxGroup from "../view/checkboxGroup.vue";
+import content from "../view/content.vue";
+import setoptios from "../view/setoptios.vue";
+import picker from "../view/picker.vue";
+import format from "../view/format.vue";
+import update from "../view/update.vue";
+import slot from "../view/slot.vue";
+import hidden from "../view/hidden.vue";
+import disabled from "../view/disabled.vue";
+import vmodel from "../view/vmodel.vue";
+import rules from "../view/rules.vue";
+import next from "../view/next.vue";
+import readonly from "../view/readonly.vue";
+import label from "../view/label.vue";
+import getform from "../view/getform.vue";
+import getcomponent from "../view/getcomponent.vue";
+import deprecated from "../view/deprecated.vue";
+import el from "../view/el.vue";
+import radioGroup from "../view/radioGroup.vue";
+import remote from "../view/remote.vue";
+import rulesPlus from "../view/rulesPlus.vue";
+import MyInput from "../view/MyInput.vue";
+import testAttrs from "../view/testAttrs.vue";
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: HomeView,
+  },
+  {
+    path: "/about",
+    name: "about",
+    component: AboutView,
+  },
+  {
+    path: "/checkboxGroup",
+    name: "checkboxGroup",
+    component: checkboxGroup,
+  },
+  {
+    path: "/content",
+    name: "content",
+    component: content,
+  },
+  {
+    path: "/setoptios",
+    name: "setoptios",
+    component: setoptios,
+  },
+  {
+    path: "/picker",
+    name: "picker",
+    component: picker,
+  },
+  {
+    path: "/format",
+    name: "format",
+    component: format,
+  },
+  {
+    path: "/update",
+    name: "update",
+    component: update,
+  },
+  {
+    path: "/slot",
+    name: "slot",
+    component: slot,
+  },
+  {
+    path: "/hidden",
+    name: "hidden",
+    component: hidden,
+  },
+  {
+    path: "/disabled",
+    name: "disabled",
+    component: disabled,
+  },
+  {
+    path: "/vmodel",
+    name: "vmodel",
+    component: vmodel,
+  },
+  {
+    path: "/rules",
+    name: "rules",
+    component: rules,
+  },
+  {
+    path: "/next",
+    name: "next",
+    component: next,
+  },
+  {
+    path: "/readonly",
+    name: "readonly",
+    component: readonly,
+  },
+  {
+    path: "/label",
+    name: "label",
+    component: label,
+  },
+  {
+    path: "/getform",
+    name: "getform",
+    component: getform,
+  },
+  {
+    path: "/getcomponent",
+    name: "getcomponent",
+    component: getcomponent,
+  },
+  {
+    path: "/deprecated",
+    name: "deprecated",
+    component: deprecated,
+  },
+  {
+    path: "/el",
+    name: "el",
+    component: el,
+  },
+  {
+    path: "/radioGroup",
+    name: "radioGroup",
+    component: radioGroup,
+  },
+  {
+    path: "/remote",
+    name: "remote",
+    component: remote,
+  },
+  {
+    path: "/rulesPlus",
+    name: "rulesPlus",
+    component: rulesPlus,
+  },
+  {
+    path: "/MyInput",
+    name: "MyInput",
+    component: MyInput,
+  },
+  {
+    path: "/testAttrs",
+    name: "testAttrs",
+    component: testAttrs,
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

package/src/style.css

@@ -0,0 +1,89 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/view/AboutView.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="box">监听组件发出的任何事件</div>
+
+  <el-form-renderer label-width="100px" :content="content" ref="ruleForm">
+  </el-form-renderer>
+</template>
+<script setup>
+import { reactive } from "vue";
+import elFormRenderer from "../components/femessage/el-form-renderer.vue";
+const content = reactive([
+  {
+    label: "fullName",
+    type: "input",
+    id: "fullName",
+    on: {
+      blur: ([event], updateForm) => {
+        updateForm({ display: "blur: " + event });
+      },
+      focus: ([event], updateForm) => {
+        updateForm({ display: "focus: " + event });
+      },
+      input: ([value], updateForm) => {
+        updateForm({ display: "input: " + value });
+      },
+    },
+  },
+  {
+    label: "display",
+    type: "input",
+    id: "display",
+    el: { readonly: true },
+  },
+]);
+</script>
+<style scoped>
+.box {
+  margin: 20px 0;
+  font-size: 20px;
+}
+</style>