feat style config

xinnian999 · Dec 3, 2024 · feb2905 · feb2905
1 parent be2ee83
commit feb2905
Show file tree

Hide file tree

Showing 8 changed files with 597 additions and 230 deletions.
diff --git a/packages/form-design/Left/index.vue b/packages/form-design/Left/index.vue
@@ -88,9 +88,9 @@ const onClone = (source: FormElement) => {
     name: `form-${getRandomId(4)}`
   }
 
-  if (source.type === 'layout' || source.attrSchema.initialValues?.children) {
-    parse.children = []
-  }
+  // if (source.type === 'layout' || source.attrSchema.initialValues?.children) {
+  //   parse.children = []
+  // }
 
   return parse
 }

diff --git a/packages/form-design/Right/AttrEdit/StyleConfig.vue b/packages/form-design/Right/AttrEdit/StyleConfig.vue
diff --git a/packages/form-design/Right/AttrEdit/StyleConfig/basicSchema.ts b/packages/form-design/Right/AttrEdit/StyleConfig/basicSchema.ts
@@ -0,0 +1,82 @@
+import type { FormSchema } from "@vue-form-craft/types"
+
+const schema: FormSchema = {
+    labelWidth: 60,
+    labelAlign: 'right',
+    size: 'small',
+    items: [
+      {
+        label: 'class',
+        component: 'Input',
+        props: {
+          placeholder: ''
+        },
+        designKey: 'design-KUlI',
+        name: 'class'
+      },
+      {
+        label: '宽度',
+        component: 'SelectInput',
+        props: {
+          selectPosition: 'append',
+          selectWidth: 50,
+          selectInitialValue: '%',
+          placeholder: '100',
+          options: [
+            {
+              label: '%',
+              value: '%'
+            },
+            {
+              label: 'px',
+              value: 'px'
+            },
+            {
+              label: 'vw',
+              value: 'vw'
+            },
+            {
+              label: 'rem',
+              value: 'rem'
+            }
+          ],
+          clearable: true
+        },
+        designKey: 'design-Bvi4',
+        name: 'style.width'
+      },
+      {
+        label: '高度',
+        component: 'SelectInput',
+        props: {
+          selectPosition: 'append',
+          selectWidth: 50,
+          selectInitialValue: 'px',
+          placeholder: 'auto',
+          options: [
+            {
+              label: '%',
+              value: '%'
+            },
+            {
+              label: 'px',
+              value: 'px'
+            },
+            {
+              label: 'vh',
+              value: 'vh'
+            },
+            {
+              label: 'rem',
+              value: 'rem'
+            }
+          ],
+          clearable: true
+        },
+        designKey: 'design-Bvi44',
+        name: 'style.height'
+      }
+    ]
+  }
+
+export default schema
diff --git a/packages/form-design/Right/AttrEdit/StyleConfig/index.vue b/packages/form-design/Right/AttrEdit/StyleConfig/index.vue
@@ -0,0 +1,27 @@
+<template>
+  <div :class="ns('style-config')">
+    <el-divider>组件样式</el-divider>
+    <FormRender v-model="currentProps" :schema="basicSchema" ref="formRef" />
+    <div class="more">
+      <el-button type="primary" plain size="small" @click="visible = true"
+        >自定义更多样式</el-button
+      >
+    </div>
+
+    <el-drawer v-model="visible" title="组件样式">
+      <FormRender v-model="currentProps" :schema="schema" ref="formRef" />
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import FormRender from '@vue-form-craft/form-render'
+import { ns } from '@vue-form-craft/utils'
+import basicSchema from './basicSchema'
+import schema from './schema'
+
+const currentProps = defineModel<Record<string, any>>()
+
+const visible = ref(false)
+</script>