From f2e63c9404d440707a346d647b0973ef60d138d0 Mon Sep 17 00:00:00 2001
From: heart <7362469@qq.com>
Date: Sun, 14 Jan 2024 23:49:01 +0800
Subject: [PATCH] feat: add FormSchema component and related files
---
.../.vitepress/theme/override-ui.css | 4 +
.../components/form-schema/form-schema.vue | 104 ++++++++++++++++++
.../src/components/form-schema/helper.ts | 35 ++++++
.../src/components/form-schema/index.ts | 7 ++
.../utils/create-set-fields-factory.ts | 32 ++++++
.../utils/define-form-schema-props.ts | 5 +
.../ant-design-vue/src/components/index.ts | 1 +
.../ant-design-vue/src/docs/form-schema.md | 35 ++++++
scripts/cli/bin/index.js | 1 -
9 files changed, 223 insertions(+), 1 deletion(-)
create mode 100644 packages/ant-design-vue/src/components/form-schema/form-schema.vue
create mode 100644 packages/ant-design-vue/src/components/form-schema/helper.ts
create mode 100644 packages/ant-design-vue/src/components/form-schema/index.ts
create mode 100644 packages/ant-design-vue/src/components/form-schema/utils/create-set-fields-factory.ts
create mode 100644 packages/ant-design-vue/src/components/form-schema/utils/define-form-schema-props.ts
create mode 100644 packages/ant-design-vue/src/docs/form-schema.md
diff --git a/packages/ant-design-vue/.vitepress/theme/override-ui.css b/packages/ant-design-vue/.vitepress/theme/override-ui.css
index 732dbe6..7f43abd 100644
--- a/packages/ant-design-vue/.vitepress/theme/override-ui.css
+++ b/packages/ant-design-vue/.vitepress/theme/override-ui.css
@@ -12,3 +12,7 @@
.vp-doc .ant-pagination li + li {
margin-top: 0;
}
+
+p {
+ margin: 0;
+}
diff --git a/packages/ant-design-vue/src/components/form-schema/form-schema.vue b/packages/ant-design-vue/src/components/form-schema/form-schema.vue
new file mode 100644
index 0000000..0ae91f4
--- /dev/null
+++ b/packages/ant-design-vue/src/components/form-schema/form-schema.vue
@@ -0,0 +1,104 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ l.label }}
+
+
+
+
+
+
+
+
+
diff --git a/packages/ant-design-vue/src/components/form-schema/helper.ts b/packages/ant-design-vue/src/components/form-schema/helper.ts
new file mode 100644
index 0000000..0c02238
--- /dev/null
+++ b/packages/ant-design-vue/src/components/form-schema/helper.ts
@@ -0,0 +1,35 @@
+interface Options {
+ label: string
+ value: any
+}
+
+export interface FormSchema {
+ label: string
+ type: string
+ name: string
+ width?: number
+ fixed?: 'left' | 'right'
+ slot?: { name: string; [props: string]: any }
+ extra?: { [props: string]: any }
+ options?: Options[]
+ span?: number
+}
+
+export interface FormProps {
+ name?: string
+ labelCol?: { span: number }
+ schema?: FormSchema[]
+ defaultValue?: Record
+ span?: number
+ gutter?: number
+}
+
+export interface FormExpose {
+ validate: () => Promise<[boolean, Record]>
+ getFieldsValue: >() => T
+ setFieldValue: (key: PropertyKey, value: any) => void
+ setFieldsValue: (target: Record) => void
+ resetFields: () => void
+}
+
+export const VERSION = '0.0.1'
diff --git a/packages/ant-design-vue/src/components/form-schema/index.ts b/packages/ant-design-vue/src/components/form-schema/index.ts
new file mode 100644
index 0000000..71c23c9
--- /dev/null
+++ b/packages/ant-design-vue/src/components/form-schema/index.ts
@@ -0,0 +1,7 @@
+import FormSchema from './form-schema.vue'
+import { withInstall } from '@packages/vue-utils'
+import { VERSION } from './helper.js'
+
+withInstall(FormSchema, VERSION)
+
+export { FormSchema }
diff --git a/packages/ant-design-vue/src/components/form-schema/utils/create-set-fields-factory.ts b/packages/ant-design-vue/src/components/form-schema/utils/create-set-fields-factory.ts
new file mode 100644
index 0000000..ab01404
--- /dev/null
+++ b/packages/ant-design-vue/src/components/form-schema/utils/create-set-fields-factory.ts
@@ -0,0 +1,32 @@
+import { Ref, watch } from 'vue'
+import { FormExpose } from '../helper'
+import { fn } from '@cc-heart/utils/helper'
+
+export function createSetFieldsFactory(ins: Ref) {
+ const taskList: Array = []
+ let isIns = false
+ const flush = () => {
+ const task = taskList.slice()
+ task.forEach((fn) => {
+ fn instanceof Function && fn()
+ })
+ }
+ return async function (target: Record) {
+ watch(
+ () => ins.value,
+ (val) => {
+ if (val && !isIns) {
+ isIns = true
+ flush()
+ }
+ },
+ { immediate: true }
+ )
+
+ if (!ins.value) {
+ taskList.push(() => ins.value?.setFieldsValue(target))
+ } else {
+ ins.value.setFieldsValue(target)
+ }
+ }
+}
diff --git a/packages/ant-design-vue/src/components/form-schema/utils/define-form-schema-props.ts b/packages/ant-design-vue/src/components/form-schema/utils/define-form-schema-props.ts
new file mode 100644
index 0000000..27fe975
--- /dev/null
+++ b/packages/ant-design-vue/src/components/form-schema/utils/define-form-schema-props.ts
@@ -0,0 +1,5 @@
+import type { FormProps } from '../helper'
+
+export function defineFormSchemaProps(formProps: Partial) {
+ return formProps
+}
diff --git a/packages/ant-design-vue/src/components/index.ts b/packages/ant-design-vue/src/components/index.ts
index 699b77a..64f9716 100644
--- a/packages/ant-design-vue/src/components/index.ts
+++ b/packages/ant-design-vue/src/components/index.ts
@@ -1 +1,2 @@
export * from './table-pro'
+export * from './form-schema'
diff --git a/packages/ant-design-vue/src/docs/form-schema.md b/packages/ant-design-vue/src/docs/form-schema.md
new file mode 100644
index 0000000..353b27d
--- /dev/null
+++ b/packages/ant-design-vue/src/docs/form-schema.md
@@ -0,0 +1,35 @@
+# FormSchema
+
+`FormSchema` 组件基于 `Form` 组件进行封装,使用 JSON Schema 描述表单的结构和验证规则,然后生成对应的表单。
+
+## 基本使用
+
+:::demo
+
+```vue
+
+
+ 提交
+
+
+```
+
+:::
diff --git a/scripts/cli/bin/index.js b/scripts/cli/bin/index.js
index 25dbb69..0eef894 100644
--- a/scripts/cli/bin/index.js
+++ b/scripts/cli/bin/index.js
@@ -46177,7 +46177,6 @@ models.forEach(function (fromModel) {
var colorConvert = convert
ansiStyles.exports
-
;(function (module) {
const colorConvert$1 = colorConvert