vue-form-craft 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-form-craft",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "type": "module",
   "scripts": {
@@ -34,14 +34,7 @@
     "scp2": "^0.5.0"
   },
   "files": [
-    "dist"
+    "src/components/FormPlus"
   ],
-  "main": "./dist/vue-form-craft.umd.js",
-  "module": "./dist/vue-form-craft.es.js",
-  "exports": {
-    ".": {
-      "import": "./dist/vue-form-craft.es.js",
-      "require": "./dist/vue-form-craft.umd.js"
-    }
-  }
+  "main": "./src/components/FormPlus/index.js"
 }

package/src/components/FormPlus/FormDesign/Actions.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="formDesign-actions">
+    <el-button @click="handlePreviewExec">预览脚本</el-button>
+    <el-button @click="handlePreviewForm">预览表单</el-button>
+
+    <el-dialog
+      v-model="execVisible"
+      title="预览脚本"
+      width="70%"
+      class="dialog"
+      center
+      destroy-on-close
+    >
+      <json-editor-vue
+        class="editor"
+        v-model="json"
+        currentMode="code"
+        :modeList="['text', 'view', 'tree', 'code', 'form']"
+        :options="{ search: true, history: true }"
+        language="zh"
+        @blur="onBlur"
+      />
+    </el-dialog>
+
+    <el-dialog
+      v-model="formVisible"
+      title="预览表单"
+      width="70%"
+      class="dialog"
+      destroy-on-close
+      center
+    >
+      <schema-form v-model="form" :schema="schema" ref="formRef" />
+      <div>
+        <el-button @click="handlePush">模拟提交</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref, computed, inject } from 'vue'
+import JsonEditorVue from 'json-editor-vue3'
+import { ElMessageBox } from 'element-plus'
+import { SchemaForm } from '../components'
+import { changeItems } from '../utils'
+
+const schema = inject('$schema')
+
+const json = computed({
+  get() {
+    return schema
+  },
+  set(value) {
+    Object.assign(schema, value)
+  }
+})
+
+const formRef = ref(null)
+
+const form = ref({})
+
+const execVisible = ref(false)
+
+const formVisible = ref(false)
+
+const handlePreviewExec = () => {
+  execVisible.value = true
+}
+
+const handlePreviewForm = () => {
+  form.value = {}
+  formVisible.value = true
+}
+
+const onBlur = async (editor) => {
+  const res = await editor.validate()
+  if (res.length) {
+    let parse = editor.getText()
+    parse = new Function('return ' + parse)()
+    parse.items = changeItems(parse.items)
+    json.value = parse
+  }
+}
+
+const handlePush = async () => {
+  await formRef.value.submit()
+  ElMessageBox.alert(JSON.stringify(form.value), '模拟提交')
+}
+</script>
+
+<style>
+.formDesign-actions {
+  padding: 10px;
+  text-align: right;
+}
+</style>

package/src/components/FormPlus/FormDesign/Canvas/CanvasGroup.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="CanvasGroup">
+    <el-card v-if="component === 'card'" :header="label">
+      <draggable
+        :list="children"
+        group="form"
+        itemKey="name"
+        chosenClass="active"
+        ghost-class="ghost"
+        class="childContainer"
+        @add="handleAdd"
+      >
+        <template #item="{ element: child, index }">
+          <CanvasRender :element="child" :index="index" />
+        </template>
+      </draggable>
+    </el-card>
+
+    <div v-if="['formList', 'itemGroup'].includes(component)" class="default">
+      <div class="title">
+        【{{ componentNames[component] }}】 {{ label }} {{ name }}
+      </div>
+      <draggable
+        :list="children"
+        group="form"
+        itemKey="name"
+        chosenClass="active"
+        ghost-class="ghost"
+        class="childContainer"
+        @add="handleAdd"
+      >
+        <template #item="{ element: child, index }">
+          <CanvasRender :element="child" :index="index" />
+        </template>
+      </draggable>
+    </div>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { defineProps, inject } from "vue";
+import draggable from "vuedraggable";
+import CanvasRender from "./CanvasRender.vue";
+import { componentNames } from "../../utils";
+
+defineProps({
+  label: String,
+  name: String,
+  component: String,
+  required: Boolean,
+  modelValue: null,
+  initialValue: null,
+  children: Array,
+  componentName: String,
+});
+
+const handleAdd = inject("handleAdd");
+</script>
+
+<style lang="less">
+.childContainer {
+  min-height: 150px;
+}
+.CanvasGroup {
+  margin-bottom: 10px;
+  .default {
+    border: 2px dashed var(--el-color-primary);
+    margin: 10px;
+    position: relative;
+    .title {
+      position: absolute;
+      left: 0;
+      top: -20px;
+      padding: 1px 5px;
+      background-color: var(--el-color-primary);
+      font-size: 12px;
+      color: #fff;
+    }
+  }
+}
+</style>

package/src/components/FormPlus/FormDesign/Canvas/CanvasRender.vue

@@ -0,0 +1,101 @@
+<template>
+  <div
+    :class="canvasItemClass"
+    @click.stop="handleSelect(element)"
+    @mousemove.stop="handleHoverEnter"
+    @mouseleave.stop="handleHoverLeave"
+  >
+    <div class="actions-left-top" v-if="element.onlyId === current.onlyId">
+      <el-button class="canvas-move" :icon="Pointer" size="small" type="primary"></el-button>
+    </div>
+    <div class="actions-right-bottom" v-if="element.onlyId === current.onlyId">
+      <el-button
+        :icon="Delete"
+        size="small"
+        type="primary"
+        @click.stop="handleDelete(element)"
+      ></el-button>
+    </div>
+
+    <canvas-group v-if="element.children" v-bind="element" :hidden="false" />
+
+    <form-item v-else v-bind="element" :props="checkProps(element.props)" class="form-item-btn" />
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { defineProps, inject, computed } from 'vue'
+import { omit } from 'lodash'
+import { Delete, Pointer } from '@element-plus/icons-vue'
+import CanvasGroup from './CanvasGroup.vue'
+import { FormItem } from '../../components'
+
+const props = defineProps({
+  element: Object
+})
+
+const current = inject('$current')
+
+const handleSelect = inject('handleSelect')
+
+const handleDelete = inject('handleDelete')
+
+const hoverId = inject('hoverId')
+
+const canvasItemClass = computed(() => ({
+  'canvas-item': true,
+  active: props.element.onlyId === current.value.onlyId,
+  hover: props.element.onlyId === hoverId.value
+}))
+
+const handleHoverEnter = () => {
+  hoverId.value = props.element.onlyId
+}
+
+const handleHoverLeave = () => {
+  hoverId.value = ''
+}
+
+const checkProps = (props) => {
+  return omit(props, ['multiple', 'autoSelectedFirst'])
+}
+</script>
+
+<style lang="less">
+.canvas-item {
+  border: 2px solid transparent;
+  margin-bottom: 5px;
+  padding: 10px;
+  position: relative;
+
+  #form-item {
+    margin-bottom: 0;
+  }
+
+  .actions-left-top {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 20;
+    background-color: var(--el-color-primary);
+  }
+  .actions-right-bottom {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    background-color: var(--el-color-primary);
+  }
+}
+
+.hover {
+  border: 2px solid var(--el-color-primary-light-5);
+}
+
+.active {
+  border: 2px solid var(--el-color-primary) !important;
+  &:hover {
+    border: 2px solid var(--el-color-primary) !important;
+  }
+}
+</style>

package/src/components/FormPlus/FormDesign/Canvas/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-form
+    class="canvas"
+    :style="`max-width: ${schema.formWidth}`"
+    :label-position="schema.labelAlign"
+    :size="schema.size"
+  >
+    <div class="tip" v-if="!list.length">
+      <div class="ico">
+        <el-icon>
+          <Plus />
+        </el-icon>
+      </div>
+      <div class="text">请从左侧拖拽字段来组成表单</div>
+    </div>
+
+    <draggable
+      style="height: 100%"
+      :list="list"
+      :group="{ name: 'form', pull: true, put: true }"
+      itemKey="name"
+      chooseClass="choose"
+      ghost-class="ghost"
+      @add="handleAdd"
+      drag-class="drag"
+      fallback-class="fallback"
+      handle=".canvas-move"
+    >
+      <template #item="{ element }">
+        <CanvasRender :element="element" />
+      </template>
+    </draggable>
+  </el-form>
+</template>
+
+<script setup lang="jsx">
+import { computed, provide, inject, ref } from 'vue'
+import draggable from 'vuedraggable'
+import { Plus } from '@element-plus/icons-vue'
+import { changeItems } from '../../utils'
+import CanvasRender from './CanvasRender.vue'
+
+const schema = inject('$schema')
+
+const current = inject('$current')
+
+const hoverId = ref('')
+
+provide('hoverId', hoverId)
+
+const list = computed({
+  get() {
+    return schema.items
+  },
+  set(value) {
+    Object.assign(schema, { items: value })
+  }
+})
+
+const handleAdd = () => {
+  list.value = changeItems(list.value)
+}
+
+const filterId = (items, elementId) => {
+  const data = items.filter((item) => {
+    return item.onlyId !== elementId
+  })
+
+  return data.map((item) => {
+    if (item.children) {
+      return {
+        ...item,
+        children: filterId(item.children, elementId)
+      }
+    }
+    return item
+  })
+}
+
+const handleDelete = (element) => {
+  list.value = filterId(list.value, element.onlyId)
+}
+
+const handleSelect = (element) => {
+  current.value = element
+}
+
+provide('handleAdd', handleAdd)
+provide('handleSelect', handleSelect)
+provide('handleDelete', handleDelete)
+</script>
+
+<style lang="less">
+.canvas {
+  flex: 1;
+  padding: 20px;
+  border: 1px dashed #999;
+  position: relative;
+  .tip {
+    color: #999;
+    font-size: 18px;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    top: 40%;
+    transform: translateY(-50%);
+    .ico {
+      font-size: 30px;
+      margin-bottom: 15px;
+    }
+  }
+
+  .ghost {
+    border-top: 2px solid var(--el-color-primary);
+    list-style: none;
+  }
+}
+</style>

package/src/components/FormPlus/FormDesign/Current/AttrEdit.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="attrForm">
+    <schema-form v-model="current" :schema="attrs[current.component]"></schema-form>
+
+    <div>
+      <el-button @click="handleEdit">编辑配置文本</el-button>
+    </div>
+
+    <el-drawer destroy-on-close v-model="editVisible">
+      <json-editor-vue
+        class="editor"
+        v-model="current"
+        currentMode="code"
+        :modeList="['text', 'view', 'tree', 'code', 'form']"
+        :options="{ search: true, history: true }"
+        language="zh"
+      />
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { inject, ref } from 'vue'
+import JsonEditorVue from 'json-editor-vue3'
+import * as attrs from '../Menus/attrs'
+import { SchemaForm } from '../../components'
+
+const current = inject('$current')
+
+const editVisible = ref(false)
+
+const handleEdit = () => {
+  editVisible.value = true
+}
+</script>
+
+<style scoped lang="less">
+.attrForm {
+  h3 {
+    margin-bottom: 10px;
+  }
+}
+</style>
+../Menus/attrs

package/src/components/FormPlus/FormDesign/Current/FormEdit.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="attrForm">
+    <schema-form v-model="form" :schema="formOptions"></schema-form>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { computed, inject } from 'vue'
+import { SchemaForm } from '../../components'
+import formOptions from './formOptions'
+
+const schema = inject('$schema')
+
+//修改schema除了items的其他属性
+const form = computed({
+  get() {
+    return schema
+  },
+  set(value) {
+    Object.assign(schema, value)
+  }
+})
+</script>
+
+<style scoped lang="less">
+.attrForm {
+  height: 100%;
+  overflow: auto;
+  h3 {
+    margin-bottom: 10px;
+  }
+}
+</style>

package/src/components/FormPlus/FormDesign/Current/formOptions.js

@@ -0,0 +1,43 @@
+export default {
+  items: [
+    {
+      label: "label宽度",
+      component: "inputNumber",
+      name: "labelWidth",
+      props: {
+        min: 60,
+        unit: "px",
+        step: 10,
+      },
+      initialValue: 150,
+    },
+    {
+      label: "label对齐方式",
+      component: "radio",
+      name: "labelAlign",
+      props: {
+        mode: "static",
+        options: [
+          { label: "左对齐", value: "left" },
+          { label: "居上", value: "top" },
+          { label: "右对齐", value: "right" },
+        ],
+      },
+      initialValue: "right",
+    },
+    {
+      label: "表单组件尺寸",
+      component: "radio",
+      name: "size",
+      props: {
+        mode: "static",
+        options: [
+          { label: "默认", value: "default" },
+          { label: "较小", value: "small" },
+          { label: "较大", value: "large" },
+        ],
+      },
+      initialValue: "default",
+    },
+  ],
+};

package/src/components/FormPlus/FormDesign/Current/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-tabs>
+    <el-tab-pane label="字段配置">
+      <AttrEdit />
+    </el-tab-pane>
+    <el-tab-pane label="表单配置">
+      <FormEdit />
+    </el-tab-pane>
+  </el-tabs>
+</template>
+
+<script setup>
+import AttrEdit from "./AttrEdit.vue";
+import FormEdit from "./FormEdit.vue";
+</script>
+
+<style></style>

package/src/components/FormPlus/FormDesign/Menus/IconRender.vue

@@ -0,0 +1,28 @@
+<template>
+  <component class="svg-icon" :is="icon" />
+</template>
+
+<script setup lang="jsx">
+import { defineProps, ref } from 'vue'
+
+const props = defineProps({
+  name: String
+})
+
+const icon = ref(null)
+
+import(`./icons/${props.name}.vue`).then((module) => {
+  icon.value = module.default
+})
+</script>
+
+<style>
+.svg-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  vertical-align: -0.15em;
+  fill: currentColor;
+}
+</style>

package/src/components/FormPlus/FormDesign/Menus/attrs/card.js

@@ -0,0 +1,6 @@
+export default {
+  items: [
+    { label: '卡片标题', component: 'input', name: 'label' },
+    { label: '字段标识', component: 'input', name: 'name' }
+  ]
+}

package/src/components/FormPlus/FormDesign/Menus/attrs/formList.js

@@ -0,0 +1,28 @@
+export default {
+  items: [
+    { label: '字段label', component: 'input', name: 'label' },
+    { label: '字段标识', component: 'input', name: 'name' },
+    { label: '是否必填', component: 'switch', name: 'required' },
+    {
+      label: 'props',
+      component: 'itemGroup',
+      name: 'props',
+      children: [
+        {
+          label: '显示模式',
+          component: 'radio',
+          name: 'mode',
+          props: {
+            mode: 'static',
+            options: [
+              { label: '表格', value: 'table' },
+              { label: '卡片', value: 'card' },
+              { label: '行内', value: 'inline' }
+            ]
+          },
+          initialValue: 'table'
+        }
+      ]
+    }
+  ]
+}

package/src/components/FormPlus/FormDesign/Menus/attrs/index.js

@@ -0,0 +1,10 @@
+export { default as input } from './input'
+export { default as select } from './select'
+export { default as radio } from './radio'
+export { default as card } from './card'
+export { default as inputNumber } from './inputNumber'
+export { default as switch } from './switch'
+export { default as formList } from './formList'
+export { default as itemGroup } from './itemGroup'
+export { default as password } from './password'
+export { default as textarea } from './textarea'

package/src/components/FormPlus/FormDesign/Menus/attrs/input.js

@@ -0,0 +1,47 @@
+export default {
+  items: [
+    { label: '字段label', component: 'input', name: 'label' },
+    { label: '字段标识', component: 'input', name: 'name' },
+    { label: '字段说明', component: 'textarea', name: 'help' },
+    { label: '初始值', component: 'input', name: 'initialValue' },
+    { label: '是否必填', component: 'switch', name: 'required' },
+    {
+      label: 'props',
+      component: 'itemGroup',
+      name: 'props',
+      children: [
+        { label: '是否禁用', component: 'switch', name: 'disabled' },
+        {
+          label: '占位提示',
+          component: 'input',
+          name: 'placeholder',
+          initialValue: '请输入...'
+        }
+      ]
+    },
+
+    { label: '隐藏条件', component: 'input', name: 'hidden' },
+    {
+      label: '联动值',
+      name: 'linkage',
+      component: 'formList',
+      children: [
+        {
+          label: '联动字段',
+          name: 'target',
+          component: 'input',
+          props: {}
+        },
+        {
+          label: '值',
+          name: 'value',
+          component: 'input',
+          props: {}
+        }
+      ],
+      props: {
+        mode: 'card'
+      }
+    }
+  ]
+}