refactor(Form): 表单目录调整

packages/dl-common/src/form/form-item.vue → packages/dl-common/src/form/components/form-item.vue

@@ -36,11 +36,11 @@
 
 <script lang="ts">
 import { computed, defineComponent, inject, PropType } from 'vue'
-import { createNamespace } from '../utils'
-import DCell from '../cell'
-import { createFormBEM } from './constants'
-import { FORM_CONTEXT_KEY, IFormContext } from './context'
-import { IFormModelItem } from './types'
+import { createNamespace } from '../../utils'
+import DCell from '../../cell'
+import { createFormBEM } from '../constants'
+import { FORM_CONTEXT_KEY, IFormContext } from '../context'
+import { IFormModelItem } from '../types'
 
 const [name] = createNamespace('form-item')
 

packages/dl-common/src/form/demo/model.ts

@@ -3,51 +3,6 @@ import CustomInput from './custom-input.vue'
 import { IFormModelItem } from '../types'
 
 const FORM_MODEL: Partial<IFormModelItem>[] = [
-  {
-    id: 'gridLayout',
-    component: 'DGridLayout',
-    layout: {
-      parent: 'root',
-      columns: 3,
-      children: ['gridItem1', 'gridItem2', 'gridItem3']
-    }
-  },
-  {
-    id: 'gridItem1',
-    dataKey: 'gridItemKey',
-    component: 'DInput',
-    label: 'item1',
-    value: '',
-    required: true,
-    layout: {
-      parent: 'gridLayout'
-    },
-    otherProps: {
-      placeholder: '请输入文字'
-    }
-  },
-  {
-    id: 'gridItem2',
-    dataKey: 'gridItem2',
-    component: 'DRate',
-    label: 'item2',
-    value: 1,
-    required: true,
-    layout: {
-      parent: 'gridLayout'
-    }
-  },
-  {
-    id: 'gridItem3',
-    dataKey: 'gridItem3',
-    component: 'DTextarea',
-    label: 'item3',
-    value: '',
-    required: true,
-    layout: {
-      parent: 'gridLayout'
-    }
-  },
   {
     id: 'basicGroup',
     label: '内置组件',

packages/dl-common/src/form/form.vue

@@ -1,6 +1,6 @@
 <template>
   <form :class="formClassName" @submit.prevent>
-    <button type="submit" style="display: none" />
+    <button type="submit" class="d-hide" />
     <form-render :data="store.getFormModels()" />
   </form>
 </template>

packages/dl-common/src/form/index.ts

@@ -1,11 +1,13 @@
 import { withInstall } from '../utils'
 import Form from './form.vue'
-import FormCellGroup from './components/form-cell-group/index.vue'
-import GridLayout from './components/grid-layout/index.vue'
+import FormItem from './components/form-item.vue'
+import FormCellGroup from './layout/form-cell-group/index.vue'
+import GridLayout from './layout/grid-layout/index.vue'
 
 export const DForm = withInstall(Form)
 export const DFormCellGroup = withInstall(FormCellGroup)
 export const DGridLayout = withInstall(GridLayout)
+export const DFormItem = FormItem
 
 export type { FormProps } from './props'
 
@@ -18,5 +20,6 @@ export default DForm
 declare module 'vue' {
   export interface GlobalComponents {
     DForm: typeof Form
+    DFormItem: typeof FormItem
   }
 }

packages/dl-common/src/form/components/form-cell-group/index.vue → packages/dl-common/src/form/layout/form-cell-group/index.vue

@@ -1,6 +1,6 @@
 <template>
   <d-cell-group :title="model.label">
-    <form-item v-for="item in children" :key="item.dataKey" :model="item" />
+    <d-form-item v-for="item in children" :key="item.dataKey" :model="item" />
   </d-cell-group>
 </template>
 
@@ -9,7 +9,7 @@ import { createNamespace } from '../../../utils'
 import { computed, defineComponent, inject, PropType } from 'vue'
 import { IFormModelItem, IRenderModel } from '../../types'
 import { DCellGroup } from '../../../cell-group'
-import FormItem from '../../form-item.vue'
+import DFormItem from '../../components/form-item.vue'
 import { FORM_CONTEXT_KEY, IFormContext } from '../../context'
 
 const [name] = createNamespace('form-cell-group')
@@ -18,7 +18,7 @@ export default defineComponent({
   name,
   components: {
     DCellGroup,
-    FormItem
+    DFormItem
   },
   props: {
     model: {

packages/dl-common/src/form/components/grid-layout/index.vue → packages/dl-common/src/form/layout/grid-layout/index.vue

@@ -13,7 +13,7 @@
       :column="item.layout.column"
       :height="item.layout.height"
     >
-      <form-item :model="item" />
+      <d-form-item :model="item" />
     </d-grid-item>
   </d-grid>
 </template>
@@ -23,8 +23,8 @@ import { computed, defineComponent, inject, PropType } from 'vue'
 import { createNamespace } from '../../../utils'
 import { DGrid, DGridItem, GridProps } from '../../../grid'
 import { IFormModelItem, IRenderModel } from '../../types'
-import FormItem from '../../form-item.vue'
 import { FORM_CONTEXT_KEY, IFormContext } from '../../context'
+import DFormItem from '../../components/form-item.vue'
 
 const [name] = createNamespace('grid-layout')
 
@@ -33,7 +33,7 @@ export default defineComponent({
   components: {
     DGrid,
     DGridItem,
-    FormItem
+    DFormItem
   },
   props: {
     model: {

packages/dl-common/src/form/render.vue

@@ -2,25 +2,25 @@
   <div :class="wrapperClassName">
     <div v-for="item in data" :key="item.id" :class="itemClassName">
       <template v-if="item.layout.parent === 'root'">
-        <form-item v-if="item.dataKey" :model="item" />
+        <d-form-item v-if="item.dataKey" :model="item" />
         <component :is="item.component" v-else :model="item" />
       </template>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { createNamespace } from '../utils'
 import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils'
+import DFormItem from './components/form-item.vue'
 import { IFormModelItem } from './types'
-import FormItem from './form-item.vue'
 
 const [name, bem] = createNamespace('render')
 
 export default defineComponent({
   name,
   components: {
-    FormItem
+    DFormItem
   },
   props: {
     data: {

packages/dl-common/src/style/common.scss

@@ -3,3 +3,7 @@
 .#{$prefix}-overflow-hidden {
   overflow: hidden !important;
 }
+
+.#{$prefix}-hide {
+  display: none !important;
+}