el-form-renderer-vue3 1.0.0 → 1.0.1

package/src/view/HomeView.vue

@@ -1,134 +0,0 @@
-<template>
-  <el-form-renderer label-width="100px" :content="content" ref="ruleForm">
-    <el-form-item>
-      <el-button type="primary" @click="submitForm">submit</el-button>
-      <el-button @click="resetForm">reset</el-button>
-    </el-form-item>
-  </el-form-renderer>
-</template>
-
-<script setup>
-import { reactive, ref } from "vue";
-import elFormRenderer from "../components/femessage/el-form-renderer.vue";
-const content = reactive([
-  {
-    type: "input",
-    id: "name",
-    label: "name",
-    attrs: { "data-name": "form1" },
-    el: {
-      size: "default",
-      placeholder: "test placeholder",
-    },
-    rules: [
-      { required: true, message: "miss name", trigger: "blur" },
-      { min: 3, max: 5, message: "length between 3 to 5", trigger: "blur" },
-    ],
-  },
-  {
-    type: "select",
-    id: "region",
-    label: "area",
-    el: {
-      valueKey: "id",
-    },
-    options: [
-      {
-        label: "area1",
-        value: {
-          id: "shanghai",
-          name: "shanghai",
-        },
-      },
-      {
-        label: "area2",
-        value: {
-          id: "beijing",
-          name: "beijing",
-        },
-      },
-    ],
-    rules: [{ required: true, message: "miss area", trigger: "change" }],
-  },
-  {
-    type: "date-picker",
-    id: "date",
-    label: "date",
-    el: {
-      type: "datetime",
-      placeholder: "select date",
-      teleported: false,
-    },
-
-    rules: [{ type: "date", required: true, message: "miss date", trigger: "change" }],
-  },
-  {
-    type: "switch",
-    id: "delivery",
-    label: "delivery",
-  },
-  {
-    type: "checkbox-group",
-    id: "type",
-    label: "type",
-    default: [],
-    options: [
-      {
-        label: "typeA",
-        value: "A",
-      },
-      {
-        label: "typeB",
-        value: "B",
-      },
-      {
-        label: "typeC",
-        value: "C",
-      },
-    ],
-    rules: [{ type: "array", required: true, message: "miss type", trigger: "change" }],
-  },
-  {
-    type: "radio-group",
-    id: "resource",
-    label: "resource",
-    options: [
-      {
-        label: "resourceA",
-      },
-      {
-        label: "resourceB",
-      },
-    ],
-    rules: [{ required: true, message: "miss resource", trigger: "change" }],
-  },
-  {
-    type: "input",
-    id: "desc",
-    label: "desc",
-    el: {
-      type: "textarea",
-    },
-    rules: [{ required: true, message: "miss desc", trigger: "blur" }],
-  },
-]);
-const ruleForm = ref();
-
-const submitForm = () => {
-  try {
-    ruleForm.value.methods.validate((valid) => {
-      if (valid) {
-        console.log("OK");
-      } else {
-        console.log("error submit!!");
-        return false;
-      }
-    });
-  } catch (error) {
-    console.log(error);
-  }
-};
-const resetForm = () => {
-  ruleForm.value.methods.resetFields();
-};
-</script>

package/src/view/MyInput.vue

@@ -1,46 +0,0 @@
-<template>
-  <el-form-renderer :content="content" />
-</template>
-<script setup>
-import { reactive, markRaw } from "vue";
-import elFormRenderer from "../components/femessage/el-form-renderer.vue";
-
-import MyInput from "../your-component.vue";
-const content = reactive([
-  {
-    component: markRaw(MyInput),
-    id: "myInput",
-    label: "label",
-    // 传入组件属性
-    el: {
-      placeholder: "请输入一个 title",
-      type: "input", // submit button
-      title: "这是一个标题", // custom defined props
-    },
-    // 可以通过 overrideRules: true 来覆盖自定义组件内置的校验规则
-    overrideRules: true,
-    rules: [
-      {
-        required: true,
-        trigger: "blur",
-        message: "不能为空！",
-      },
-    ],
-    // 传入组件事件
-    on: {
-      focus: ([event], updateForm) => {
-        console.log(event.target.value); // output: input value
-      },
-      customEvent: ([value, msg], updateForm) => {
-        console.log(value, msg); // output: 'message'
-      },
-    },
-  },
-]);
-</script>
-<style scoped>
-.box {
-  margin: 20px 0;
-  font-size: 20px;
-}
-</style>

package/src/view/checkboxGroup.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="box">checkboxGroup</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([
-  {
-    id: "city",
-    type: "checkbox-group",
-    /**
-     * sytle 属性是为了满足 el-checkbox-button属性而设置,如果不需要使用el-radio-button这可不设置
-     */
-    style: "button",
-    label: "city",
-    default: ["new york"],
-    options: [{ label: "new york" }, { label: "guangzhou" }, { label: "tokyo" }],
-  },
-]);
-</script>
-<style scoped>
-.box {
-  margin: 20px 0;
-  font-size: 20px;
-}
-</style>

package/src/view/content.vue

@@ -1,176 +0,0 @@
-<template>
-  <el-form-renderer
-    label-width="100px"
-    :content="content"
-    v-model:FormData="FormData"
-    ref="form"
-  >
-    <template #id:region>
-      <div>requestRemoteCount: {{ requestRemoteCount }}</div>
-    </template>
-    <el-form-item>
-      <el-button @click="resetForm">resetForm</el-button>
-      <el-button @click="disableName"
-        >{{ content[0].disabled ? "启" : "禁" }}用第一项</el-button
-      >
-      <el-button @click="setOptions">更新 region 的 options</el-button>
-      <el-button @click="addFormItem">随机插入表单项</el-button>
-      <el-button @click="removeFormItem">随机移除表单项</el-button>
-    </el-form-item>
-    <pre>{{ FormData }}</pre>
-  </el-form-renderer>
-</template>
-
-<script setup>
-import { reactive, ref } from "vue";
-import elFormRenderer from "../components/femessage/el-form-renderer.vue";
-let requestRemoteCount = ref(0);
-const form = ref();
-let id = ref(0);
-let FormData = reactive({
-  name: "1111",
-  region: [],
-  type: [],
-  startDate: "2019-01-01",
-  endDate: "2019-01-02",
-});
-const content = reactive([
-  {
-    type: "input",
-    id: "name",
-    label: "name",
-    attrs: { "data-name": "form1" },
-    el: {
-      size: "default",
-      placeholder: "test placeholder",
-    },
-    rules: [
-      { required: true, message: "miss name", trigger: "blur" },
-      { min: 3, max: 5, message: "length between 3 to 5", trigger: "blur" },
-    ],
-  },
-  {
-    type: "select",
-    id: "region",
-    label: "region",
-    remote: {
-      // url: 'https://mockapi.eolinker.com/IeZWjzy87c204a1f7030b2a17b00f3776ce0a07a5030a1b/el-form-renderer?q=remote',
-      request: () => {
-        const data = [
-          {
-            label: "shanghai",
-            value: "shanghai",
-          },
-          {
-            label: "beijing",
-            value: "beijing",
-          },
-          {
-            label: "guangzhou",
-            value: "guangzhou",
-          },
-        ];
-        requestRemoteCount.value++;
-        return new Promise((r) => setTimeout(() => r(data), 2000));
-      },
-    },
-    el: { filterable: true, multiple: true, multipleLimit: 2 },
-    rules: [{ required: true, message: "miss area", trigger: "change" }],
-  },
-  {
-    type: "date-picker",
-    id: "date",
-    label: "date",
-    el: {
-      type: "daterange",
-      valueFormat: "yyyy-MM-dd",
-    },
-    rules: [{ required: true, message: "miss date", trigger: "change" }],
-    inputFormat: (row) => {
-      if (row.startDate && row.endDate) {
-        return [row.startDate, row.endDate];
-      }
-    },
-    outputFormat: (val) => {
-      if (!val) {
-        return { startDate: "", endDate: "" };
-      }
-      return {
-        startDate: val[0],
-        endDate: val[1],
-      };
-    },
-  },
-  {
-    type: "switch",
-    id: "delivery",
-    label: "delivery",
-  },
-  {
-    type: "checkbox-group",
-    id: "type",
-    label: "type",
-    default: [],
-    options: [
-      {
-        label: "typeA",
-      },
-      {
-        label: "typeB",
-      },
-      {
-        label: "typeC",
-      },
-    ],
-    rules: [{ type: "array", required: true, message: "miss type", trigger: "change" }],
-  },
-  {
-    type: "radio-group",
-    id: "resource",
-    label: "resource",
-    options: [
-      {
-        label: "resourceA",
-      },
-      {
-        label: "resourceB",
-      },
-    ],
-    rules: [{ required: true, message: "miss resource", trigger: "change" }],
-  },
-  {
-    type: "input",
-    id: "desc",
-    label: "desc",
-    el: {
-      type: "textarea",
-    },
-    rules: [{ required: true, message: "miss desc", trigger: "blur" }],
-  },
-]);
-const resetForm = () => {
-  form.value.methods.resetFields();
-};
-const disableName = () => {
-  content[0].disabled = !content[0].disabled;
-};
-const setOptions = () => {
-  const region = content.find((item) => item.id === "region");
-  if (!region) return;
-  region.options = [{ label: "广州", value: "广州" }];
-};
-const addFormItem = () => {
-  const i = Math.floor(Math.random() * (content.length + 1));
-  id.value++;
-  content.splice(i, 0, {
-    id: `name${id.value}`,
-    label: `表单项${id.value}`,
-    type: "input",
-  });
-};
-const removeFormItem = () => {
-  if (content.length <= 1) return;
-  const i = Math.floor(Math.random() * content.length);
-  content.splice(i, 1);
-};
-</script>

package/src/view/deprecated.vue

@@ -1,37 +0,0 @@
-<template>
-    <div class="box">deprecated</div>
-    <div>这里是些过时的写法，但仍要保留兼容性</div>
-    <el-form-renderer ref="form" label-width="100px" :content="content">
-        <el-button @click="getFormValue">getFormValue</el-button>
-    </el-form-renderer>
-</template>
-
-<script setup>
-import { reactive, ref } from "vue";
-import elFormRenderer from "../components/femessage/el-form-renderer.vue";
-
-const form = ref();
-
-
-const content = reactive(
-    [
-        {
-            type: 'radioGroup', // 推荐写作 radio-group
-            $id: 'resource', // 推荐不加 $
-            label: 'resource',
-            options: [{
-                label: 'resourceA'
-            }, {
-                label: 'resourceB'
-            }],
-            rules: [
-                { required: true, message: 'miss resource', trigger: 'change' }
-            ]
-        }
-    ]);
-const getFormValue = () => {
-    let v = form.value.getFormValue();
-    console.log(v);
-};
-
-</script>

package/src/view/disabled.vue

@@ -1,104 +0,0 @@
-<template>
-    <div class="box">disabled</div>
-    <ul>
-        <li>作为 el-form-renderer 的 prop 传入，禁用整个表单项，优先级最高 </li>
-        <li> 作为 el 的属性传入，作用于单个表单项组件</li>
-        <li> 与 el 平级传入，效果和 2 相同（因历史原因存在）</li>
-    </ul>
-    <el-form-renderer label-width="140px" ref="form" :content="content" :disabled="disabledAll">
-        <el-checkbox v-model="disabledAll">禁用全部</el-checkbox>
-        <el-checkbox v-model="disabledArea">禁用 area</el-checkbox>
-    </el-form-renderer>
-    <div style="margin-top: 16px;">
-        <el-button type="primary" @click="submit">提交，在控制台查看表单数据</el-button>
-    </div>
-</template>
-<script setup>
-import { reactive, ref, watch } from "vue";
-import elFormRenderer from "../components/femessage/el-form-renderer.vue";
-let disabledAll = ref(false)
-let disabledArea = ref(false)
-let form = ref()
-const content = reactive([
-    {
-        type: 'input',
-        id: 'name',
-        label: 'name',
-        attrs: { 'data-name': 'form1' },
-        el: {
-            size: 'default',
-            placeholder: 'test placeholder'
-        },
-        rules: [
-            { required: true, message: 'miss name', trigger: 'blur' },
-            { min: 3, max: 5, message: 'length between 3 to 5', trigger: 'blur' }
-        ]
-    }, {
-        type: 'select',
-        id: 'region',
-        label: 'area',
-        disabled: false,
-        options: [{
-            label: 'area1',
-            value: 'shanghai'
-        }, {
-            label: 'area2',
-            value: 'beijing'
-        }],
-        rules: [
-            { required: true, message: 'miss area', trigger: 'change' }
-        ]
-    },
-    {
-        type: 'switch',
-        id: 'delivery',
-        label: '禁用开关',
-        default: true,
-    }, {
-        type: 'checkbox-group',
-        id: 'type',
-        label: '根据开关值禁用',
-        disabled: form => form.delivery,
-        options: [{
-            label: 'typeA'
-        }, {
-            label: 'typeB'
-        }, {
-            label: 'typeC'
-        }],
-        rules: [
-            { type: 'array', required: true, message: 'miss type', trigger: 'change' }
-        ]
-    },
-    {
-        type: 'input',
-        id: 'desc',
-        label: 'desc',
-        default: '使用el禁用',
-        el: {
-            disabled: true,
-            type: 'textarea',
-        },
-        rules: [
-            { required: true, message: 'miss desc', trigger: 'blur' }
-        ]
-    }
-]);
-watch(
-    disabledArea,
-    (val) => {
-        content[1].disabled = val
-    },
-);
-const submit = () => {
-    form.value.methods.validate(valid => {
-        if (valid) console.log(form.value.getFormValue())
-    })
-}
-</script>
-<style scoped>
-.box {
-    margin: 20px 0;
-    font-size: 20px;
-}
-</style>

package/src/view/el.vue

@@ -1,24 +0,0 @@
-<template>
-    <div class="box">el</div>
-    <div>可以对表单组件传入 props，使用 el 传入 例如配合 el-input，设置文本框</div>
-    <el-form-renderer :content="content" inline />
-</template>
-
-<script setup>
-import { reactive, } from "vue";
-import elFormRenderer from "../components/femessage/el-form-renderer.vue";
-
-
-
-const content = reactive(
-    [
-        {
-            id: 'document',
-            type: 'input',
-            el: {
-                type: 'textarea'
-            }
-        }
-    ]);
-
-</script>

package/src/view/format.vue

@@ -1,63 +0,0 @@
-<template>
-    <div class="box">value-format</div>
-    <div class="format">
-        <el-form-renderer :content="content" inline ref="formRender">
-            <el-form-item>
-                <el-button @click="setValue">set value</el-button>
-                <el-button type="primary" @click="getValue">log value</el-button>
-            </el-form-item>
-        </el-form-renderer>
-        <div>{{ form }}</div>
-    </div>
-</template>
-<script setup>
-
-import { reactive, ref } from "vue";
-const formRender = ref()
-import elFormRenderer from "../components/femessage/el-form-renderer.vue";
-let form = ref()
-const content = reactive([
-    {
-        el: {
-            type: 'daterange',
-            valueFormat: 'yyyy-MM-dd'
-        },
-        type: 'date-picker',
-        id: 'date',
-        label: 'date',
-        inputFormat: (row) => {
-            if (row.startDate && row.endDate) {
-                return [row.startDate, row.endDate]
-            }
-        },
-        outputFormat: (val) => {
-            if (!val) {
-                return { startDate: '', endDate: '' }
-            }
-            return {
-                startDate: val[0],
-                endDate: val[1]
-            }
-        }
-    }
-]);
-const getValue = () => {
-    const value = formRender.value.getFormValue()
-
-    form.value = JSON.stringify(value)
-
-}
-const setValue = () => {
-    formRender.value.updateForm({
-        startDate: '2019-01-01',
-        endDate: '2019-01-02'
-    })
-}
-
-</script>
-<style scoped>
-.box {
-    margin: 20px 0;
-    font-size: 20px;
-}
-</style>

package/src/view/getcomponent.vue

@@ -1,51 +0,0 @@
-<template>
-    <div>
-        <el-form-renderer inline :content="content" ref="form">
-        </el-form-renderer>
-        <el-button @click="getComponent('id')">获取id input</el-button>
-        <el-button @click="getComponent('first')">获取first name input</el-button>
-    </div>
-</template>
-<script setup>
-import { reactive, ref, } from "vue";
-import elFormRenderer from "../components/femessage/el-form-renderer.vue";
-
-const form = ref()
-const content = reactive([
-    {
-        id: 'id',
-        type: 'input',
-        label: 'id',
-        el: {
-            placeholder: 'id'
-        }
-    },
-    {
-        type: 'group',
-        label: 'name',
-        id: 'name',
-        items: [
-            {
-                id: 'first',
-                label: 'first name',
-                type: 'input'
-            },
-            {
-                id: 'last',
-                label: 'last name',
-                type: 'input'
-            }
-        ]
-    }
-]);
-const getComponent = (id) => {
-    console.log(form.value.getComponentById(id));
-
-}
-</script>
-<style scoped>
-.box {
-    margin: 20px 0;
-    font-size: 20px;
-}
-</style>