el-form-renderer-vue3 1.1.2 → 2.0.2

package/femessage/el-form-renderer.vue

@@ -1,313 +0,0 @@
-<template>
-  <el-form
-    ref="myelForm"
-    v-bind="$attrs"
-    :model="value"
-    class="el-form-renderer"
-  >
-    <template v-for="item in innerContent" :key="item.id">
-      <slot :name="`id:${item.id}`" />
-      <slot :name="`$id:${item.id}`" />
-
-      <component
-        :is="item.type === GROUP ? RenderFormGroup : RenderFormItem"
-        :ref="
-          (el) => {
-            customComponent[item.id] = el;
-          }
-        "
-        :data="item"
-        :value="value"
-        :item-value="value[item.id]"
-        :disabled="
-          disabled ||
-          (typeof item.disabled === 'function'
-            ? item.disabled(value)
-            : item.disabled)
-        "
-        :readonly="readonly || item.readonly"
-        :options="options[item.id]"
-        @updateValue="updateValue"
-      />
-    </template>
-    <slot />
-  </el-form>
-</template>
-
-<script setup>
-// passive 是用于控制浏览器是否可以在滚动时取消事件的默认行为。当 passive 设置为 true 时，表示事件处理函数不会调用 preventDefault() 来阻止默认的滚动行为。
-//在一些滚动事件处理中，如果事件处理函数中调用了 preventDefault()，浏览器会等待该函数执行完毕后再进行滚动，这可能导致滚动的延迟。通过将 passive 设置为 true，可以告诉浏览器事件处理函数不会调用 preventDefault()，从而使滚动更加流畅。
-import "./util/ployfill";
-import RenderFormGroup from "./components/render-form-group.vue";
-import RenderFormItem from "./components/render-form-item.vue";
-import {
-  reactive,
-  computed,
-  ref,
-  watch,
-  onMounted,
-  nextTick,
-  provide,
-  getCurrentInstance,
-} from "vue";
-import transformContent from "./util/transform-content";
-import _set from "lodash.set";
-import _isequal from "lodash.isequal";
-import _clonedeep from "lodash.clonedeep";
-
-import {
-  methodsSymbol,
-  updateFormsSymbol,
-  setOptionsSymbol,
-} from "./util/keys";
-import {
-  collect,
-  mergeValue,
-  transformOutputValue,
-  transformInputValue,
-  correctValue,
-} from "./util/utils";
-let GROUP = "group";
-/**
- * inputFormat 让整个输入机制复杂了很多。value 有以下输入路径:
- * 1. 传入的 form => inputFormat 处理
- * 2. updateForm => inputFormat 处理
- * 3. 但 content 中的 default 没法经过 inputFormat 处理，因为 inputFormat 要接受整个 value 作为参数
- * 4. 组件内部更新 value，不需要走 inputFormat
- */
-let value = reactive({}); // 表单数据对象
-let options = reactive({});
-let initValue = reactive({});
-let myelForm = ref();
-let methods = {};
-const customComponent = ref([]);
-let emit = defineEmits(["update:FormData"]);
-// 注入 element ui form 方法
-/**
- * 与 element 相同，在 mounted 阶段存储 initValue
- * @see https://github.com/ElemeFE/element/blob/6ec5f8e900ff698cf30e9479d692784af836a108/packages/form/src/form-item.vue#L304
- */
-onMounted(async () => {
-  initValue = _clonedeep(value);
-  await nextTick();
-  // 检查 myelForm 是否已经初始化
-  if (myelForm && myelForm.value) {
-    Object.keys(myelForm.value).forEach((item) => {
-      // 检查属性是否存在于 methods 对象中
-      if (myelForm.value[item] && !(item in methods)) {
-        methods[item] = myelForm.value[item];
-      }
-    });
-  }
-  /**
-   * 有些组件会 created 阶段更新初始值为合法值，这会触发 validate。目前已知的情况有：
-   * - el-select 开启 multiple 时，会更新初始值 undefined 为 []
-   * @hack
-   */
-  methods.clearValidate();
-});
-
-let props = defineProps({
-  //表单项
-  content: {
-    type: Array,
-    required: true,
-  },
-  // 禁用
-  disabled: {
-    type: [Boolean, Function],
-    default: false,
-  },
-  //只读
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * v-model 的值。传入后会优先使用
-   */
-  FormData: {
-    type: Object,
-    default: undefined,
-  },
-});
-//兼容处理
-let innerContent = computed(() => transformContent(props.content));
-// 初始化默认值
-let setValueFromModel = () => {
-  if (innerContent.length) return;
-  /**
-   * 没使用 v-model 时才从 default 采集数据
-   * default 值没法考虑 inputFormat
-   * 参考 value-format.md 的案例。那种情况下，default 该传什么？
-   */
-  let newValue = props.FormData
-    ? transformInputValue(props.FormData, innerContent.value)
-    : collect(innerContent.value, "default");
-  correctValue(newValue, innerContent.value);
-  if (!_isequal(value, newValue)) value = Object.assign(value, newValue);
-};
-// v-model初始化默认数据
-watch(
-  () => props.FormData,
-  (newForm) => {
-    if (!newForm) return;
-    setValueFromModel();
-  },
-  { immediate: true, deep: true }
-);
-// 初始化默认数据
-watch(
-  innerContent,
-  (newContent) => {
-    try {
-      if (!newContent) return;
-
-      // 如果 content 没有变动 remote 的部分，这里需要保留之前 remote 注入的 options
-      Object.assign(options, collect(newContent, "options"));
-      setValueFromModel();
-    } catch (error) {
-      console.log(error);
-    }
-  },
-  { immediate: true }
-);
-
-// v-model 传递值
-watch(value, (newValue, oldValue) => {
-  try {
-    if (!newValue) return;
-    if (props.FormData) {
-      let data = Object.assign(
-        props.FormData,
-        transformOutputValue(newValue, innerContent)
-      );
-      emit("update:FormData", data);
-    }
-  } catch (error) {
-    console.log(error, "-----");
-  }
-  // deep: true, // updateValue 是全量更新，所以不用
-});
-
-/**
- * 更新表单数据
- * @param  {String} options.id 表单ID
- * @param  {All} options.value 表单数据
- */
-let updateValue = ({ id, value: v }) => {
-  value[id] = v;
-};
-/**
- * 重置表单为初始值
- *
- * @public
- */
-let resetFields =  () => {
-  /**
-   * 之所以不用 el-form 的 resetFields 机制，有以下原因：
-   * - el-form 的 resetFields 无视 el-form-renderer 的自定义组件
-   * - el-form 的 resetFields 不会触发 input & change 事件，无法监听
-   * - bug1: https://github.com/FEMessage/el-data-table/issues/176#issuecomment-587280825
-   * - bug2:
-   *   0. 建议先在监听器 watch.value 里 console.log(v.name, oldV.name)
-   *   1. 打开 basic 示例
-   *   2. 在 label 为 name 的输入框里输入 1，此时 log：'1' ''
-   *   3. 点击 reset 按钮，此时 log 两条数据： '1' '1', '' ''
-   *   4. 因为 _isequal(v, oldV)，所以没有触发 v-model 更新
-   */
-
-  // value = _clonedeep(initValue); //不能直接修改，会改变引用地址
-  // 遍历value中的每个字段
-  for (let key in value) {
-    // 检查该字段是否在initValue中存在
-    if (initValue.hasOwnProperty(key)) {
-      // 如果存在，重置为初始值
-      value[key] =_clonedeep(initValue[key]);
-    } else {
-      // 如果不存在，删除该字段
-      value[key]=undefined
-    }
-  }
-
-
-  methods.clearValidate();
-};
-/**
- * 当 strict 为 true 时，只返回设置的表单项的值, 过滤掉冗余字段, 更多请看 update-form 示例
- * @param {{strict: Boolean}} 默认 false
- * @return {object} key is item's id, value is item's value
- * @public
- */
-let getFormValue = ({ strict = false } = {}) => {
-  return transformOutputValue(value, innerContent, { strict });
-};
-/**
- * update form values
- * @param {object} newValue - key is item's id, value is the new value
- * @public
- */
-let updateForm = (newValue) => {
-  newValue = transformInputValue(newValue, innerContent);
-  mergeValue(value, newValue, innerContent);
-};
-/**
- * update select options
- * @param {string} id<br>
- * @param {array} options
- * @public
- */
-let setOptions = (id, O) => {
-  _set(options, id, O);
-  options = Object.assign(options); // 设置之前不存在的 options 时需要重新设置响应式更新
-};
-
-/**
- * get custom component
- * @param {string} id<br>
- * @public
- */
-const getComponentById = (id) => {
-  let content = [];
-  props.content.forEach((item) => {
-    if (item.type === GROUP) {
-      const items = item.items.map((formItem) => {
-        formItem.groupId = item.id;
-        return formItem;
-      });
-      content.push(...items);
-    } else {
-      content.push(item);
-    }
-  });
-  const itemContent = content.find((item) => item.id === id);
-  if (!itemContent) {
-    return undefined;
-  }
-  if (!itemContent.groupId) {
-    return customComponent.value[id].customComponent;
-  } else {
-    const componentRef =
-      customComponent.value[itemContent.groupId].customComponent;
-    return componentRef[`formItem-${id}`].customComponent;
-  }
-};
-provide(methodsSymbol, methods);
-provide(updateFormsSymbol, updateForm);
-provide(setOptionsSymbol, setOptions);
-defineExpose({
-  ...methods,
-  updateValue,
-  resetFields,
-  getFormValue,
-  updateForm,
-  setOptions,
-  methods,
-  getComponentById,
-});
-</script>
-<script>
-export default {
-  name: "ElFormRenderer",
-};
-</script>

package/femessage/util/CustomComponent.js

@@ -1,28 +0,0 @@
-import { h, resolveComponent } from "vue";
-
-// Vue3 中函数式组件需要提供一个渲染函数
-const CustomComponent = (props, context) => {
-  let dom =
-    typeof props.component == "string"
-      ? resolveComponent(hyphenToPascal(props.component))
-      : "Input";
-
-  // 返回一个渲染函数，可以使用 h 函数创建虚拟节点
-  return h(dom, props, context.slots);
-};
-
-function hyphenToPascal(str) {
-  let arr = str.split("-");
-
-  let resStr = arr.reduce(function (prev, cur) {
-    let str = prev + cur.slice(0, 1).toUpperCase() + cur.slice(1);
-    return str;
-  });
-
-  // 转小驼峰这一行不需要
-  resStr = resStr.slice(0, 1).toUpperCase() + resStr.slice(1);
-
-  return resStr;
-}
-
-export default CustomComponent;

package/femessage/util/VNode.js

@@ -1,9 +0,0 @@
-
-
-// Vue3 中函数式组件需要提供一个渲染函数
-const VNode = (props, content) => {
-
-    return (props.content)
-};
-
-export default VNode;

package/femessage/util/enable-when.js

@@ -1,26 +0,0 @@
-import _get from "lodash.get";
-import _has from "lodash.has";
-
-/**
- * 处理 enableWhen
- *
- * 与条件: 简单依赖关系存在2种情况：简单对象 || 字符串
- * 或条件: 即使用 [] 包裹所有与条件 enableWhen: [{ a: 1 }, { a: 2 }]
- */
-export default function getEnableWhenStatus(enableWhen, value) {
-  if (!enableWhen) return true;
-  // 处理一个与条件
-  const handleCondition = (condition) => {
-    // 简单字符串(ID), 只要有值即为true
-    if (typeof condition === "string") return _has(value, condition);
-    // 简单对象判断: 是否所有依赖条件都通过
-    return Object.keys(condition).every((path) => {
-      const v = _get(value, path);
-      return v !== undefined && v === condition[path];
-    });
-  };
-
-  return Array.isArray(enableWhen)
-    ? enableWhen.some(handleCondition)
-    : handleCondition(enableWhen);
-}

package/femessage/util/keys.js

@@ -1,3 +0,0 @@
-export const methodsSymbol = Symbol();
-export const updateFormsSymbol = Symbol();
-export const setOptionsSymbol = Symbol();

package/femessage/util/ployfill.js

@@ -1,14 +0,0 @@
-//去除谷歌浏览器的scroll、wheel等事件警告
-(function () {
-  if (typeof EventTarget !== "undefined") {
-    let func = EventTarget.prototype.addEventListener;
-    EventTarget.prototype.addEventListener = function (type, fn, capture) {
-      this.func = func;
-      if (typeof capture !== "boolean") {
-        capture = capture || {};
-        capture.passive = false;
-      }
-      this.func(type, fn, capture);
-    };
-  }
-})();

package/femessage/util/transform-content.js

@@ -1,47 +0,0 @@
-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;
-  const { rules = [] } = component;
-  item.rules = [
-    ...(item.rules || []),
-    ...(typeof rules === "function" ? rules(item) : rules),
-  ];
-}

package/femessage/util/utils.js

@@ -1,126 +0,0 @@
-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] = 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() {}