vue-form-craft 4.2.2 → 4.3.0

package/README.md

@@ -1,133 +1,133 @@
-# vue-form-craft
-
-基于 [vue](https://github.com/vuejs/vue) 和 [element-plus](https://github.com/ElemeFE/element) 实现的表单设计器 + 渲染器
-
-使用了最新的前端技术栈，可以让你免去vue项目中表单的烦恼。
-
-- [在线预览](https://xinnian999.github.io/vue-form-craft/zh/form-design)
-- [官方文档](https://xinnian999.github.io/vue-form-craft/zh/)
-- 作者：Elin
-- 联系方式：17803000829
-
-![ui](./src/assets/ui.png)
-
-## 特性
-
-- 可视化设计表单
-- 支持三十多种的表单组件(el所有表单组件、内置组件)
-- 支持收集Array数据（自增组件）
-- 用法简单，又非常灵活高效的表单联动
-- 可预览生成的json配置
-- 可预览生成的VUE组件
-- 高扩展性、支持自定义组件、支持各种ui组件库来替换ui
-- 支持表单填写校验
-- 组件无限深层嵌套，深层校验
-
-## 第三方插件
-
-- vuedraggable
-- element-plus
-- vue-form-craft
-- lodash
-
-## 使用
-
-### 版本要求
-
-vue@3.x
-
-### 安装
-
-```js
-npm i vue-form-craft
-//或
-yarn add vue-form-craft
-//或
-pnpm i vue-form-craft
-```
-
-### 全局注册
-
-```js
-import { createApp } from 'vue'
-import VueFormCraft from 'vue-form-craft'
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
-import App from './App.vue'
-
-const app = createApp(App)
-
-app.use(ElementPlus)
-app.use(VueFormCraft)
-app.mount('#app')
-```
-
-### 使用
-
-> 使用表单设计器
-
-```vue
-<template>
-  <div style="width:100vw;height:100vh">
-    <FormDesign />
-  </div>
-</template>
-```
-
-> 使用表单渲染器
-
-```vue
-<template>
-  <FormRender v-model="formValues" :schema="schema" ref="formRef" />
-  <el-button @click="handleSubmit">提交</el-button>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { FormSchema,FormRenderInstance } from 'vue-form-craft'
-
-const formRef = ref<FormRenderInstance>()
-
-const formValues = ref({})
-
-const schema: FormSchema = {
-  labelWidth: 150,
-  labelAlign: 'right',
-  size: 'default',
-  items: [
-    {
-      label: '用户名',
-      component: 'Input',
-      name: 'username',
-      required: true,
-      props: {
-        placeholder: '请输入用户名'
-      }
-    },
-    {
-      label: '密码',
-      component: 'Password',
-      name: 'password',
-      required: true,
-      props: {
-        placeholder: '请输入密码'
-      }
-    }
-  ]
-}
-
-const handleSubmit = async () => {
-  await formRef.value?.validate()
-  alert(JSON.stringify(formValues.value,null,2))
-}
-</script>
-```
-
-## 捐赠 vue-form-craft 的开发
-
-`vue-form-craft` 的文档和代码完全开源，如果该项目有帮助到你的开发工作，你可以捐赠`vue-form-craft`的研发工作，捐赠无门槛，哪怕是一杯可乐也好。
-
-<div style="display:flex;gap:15px">
-<img src="./docs/assets/wechat.png" style="height:400px" />
-<img src="./docs/assets/zhifubao.png" style="height:400px" />
-</div>
+# vue-form-craft
+
+基于 [vue](https://github.com/vuejs/vue) 和 [element-plus](https://github.com/ElemeFE/element) 实现的表单设计器 + 渲染器
+
+使用了最新的前端技术栈，可以让你免去vue项目中表单的烦恼。
+
+- [在线预览](https://xinnian999.github.io/vue-form-craft/zh/form-design)
+- [官方文档](https://xinnian999.github.io/vue-form-craft/zh/)
+- 作者：Elin
+- 联系方式：17803000829
+
+![ui](./src/assets/ui.png)
+
+## 特性
+
+- 可视化设计表单
+- 支持三十多种的表单组件(el所有表单组件、内置组件)
+- 支持收集Array数据（自增组件）
+- 用法简单，又非常灵活高效的表单联动
+- 可预览生成的json配置
+- 可预览生成的VUE组件
+- 高扩展性、支持自定义组件、支持各种ui组件库来替换ui
+- 支持表单填写校验
+- 组件无限深层嵌套，深层校验
+
+## 第三方插件
+
+- vuedraggable
+- element-plus
+- vue-form-craft
+- lodash
+
+## 使用
+
+### 版本要求
+
+vue@3.x
+
+### 安装
+
+```js
+npm i vue-form-craft
+//或
+yarn add vue-form-craft
+//或
+pnpm i vue-form-craft
+```
+
+### 全局注册
+
+```js
+import { createApp } from 'vue'
+import VueFormCraft from 'vue-form-craft'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(ElementPlus)
+app.use(VueFormCraft)
+app.mount('#app')
+```
+
+### 使用
+
+> 使用表单设计器
+
+```vue
+<template>
+  <div style="width:100vw;height:100vh">
+    <FormDesign />
+  </div>
+</template>
+```
+
+> 使用表单渲染器
+
+```vue
+<template>
+  <FormRender v-model="formValues" :schema="schema" ref="formRef" />
+  <el-button @click="handleSubmit">提交</el-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FormSchema,FormInstance } from 'vue-form-craft'
+
+const formRef = ref<FormInstance>()
+
+const formValues = ref({})
+
+const schema: FormSchema = {
+  labelWidth: 150,
+  labelAlign: 'right',
+  size: 'default',
+  items: [
+    {
+      label: '用户名',
+      component: 'Input',
+      name: 'username',
+      required: true,
+      props: {
+        placeholder: '请输入用户名'
+      }
+    },
+    {
+      label: '密码',
+      component: 'Password',
+      name: 'password',
+      required: true,
+      props: {
+        placeholder: '请输入密码'
+      }
+    }
+  ]
+}
+
+const handleSubmit = async () => {
+  await formRef.value?.validate()
+  alert(JSON.stringify(formValues.value,null,2))
+}
+</script>
+```
+
+## 捐赠 vue-form-craft 的开发
+
+`vue-form-craft` 的文档和代码完全开源，如果该项目有帮助到你的开发工作，你可以捐赠`vue-form-craft`的研发工作，捐赠无门槛，哪怕是一杯可乐也好。
+
+<div style="display:flex;gap:15px">
+<img src="./docs/assets/wechat.png" style="height:400px" />
+<img src="./docs/assets/zhifubao.png" style="height:400px" />
+</div>

package/dist/index.d.ts

@@ -2,12 +2,15 @@ import { App } from 'vue';
 import { Component } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
-import { ComputedRef } from 'vue';
+import { DeepReadonly } from 'vue';
 import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { FormValidationResult } from 'element-plus';
 import { PropType } from 'vue';
 import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { ToRefs } from 'vue';
+import { UnwrapNestedRefs } from 'vue';
 import { VNode } from 'vue';
 
 export declare type $Global = {
@@ -15,17 +18,6 @@ export declare type $Global = {
     elements: Record<string, FormElement>;
 };
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -36,7 +28,7 @@ declare const _default: {
     install: (app: App<Element>, options?: {
         request?: ((options: Record<string, any>) => Promise<Record<string, any>>) | undefined;
         extendElements?: Record<string, FormElement> | undefined;
-        lang?: "zh" | "en" | undefined;
+        lang?: "en" | "zh" | undefined;
     } | undefined) => void;
 };
 export default _default;
@@ -94,6 +86,21 @@ export declare type FormElement = {
     attrSchema: FormSchema;
 };
 
+export declare type FormInstance = DeepReadonly<UnwrapNestedRefs<FormInstanceSource>>;
+
+declare interface FormInstanceSource extends ToRefs<FormRenderProps> {
+    formValues: Ref<Record<string, any>>;
+    selectData: Record<string, Record<string, any>>;
+    initialValues: Record<string, Record<string, any>>;
+    context: Ref<Record<string, any>>;
+    updateFormValues: (values: Record<string, any>) => void;
+    updateSelectData: (key: string, value: Record<string, any>) => void;
+    updateInitialValues: (values: Record<string, any>) => void;
+    validate: () => FormValidationResult | undefined;
+    resetFields: (names?: string[]) => void;
+    submit: () => Promise<void>;
+}
+
 export declare interface FormItemType {
     label?: string;
     name: string;
@@ -109,45 +116,167 @@ export declare interface FormItemType {
     rules?: FormRule[];
     class?: any;
     style?: any;
-    design?: boolean;
     change?: FormChange[];
     dialog?: boolean;
 }
 
-export declare const FormRender: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Readonly<{
-modelValue?: Record<string, any> | undefined;
-schema: FormSchema;
-schemaContext?: Record<string, any> | undefined;
-design?: boolean | undefined;
-footer?: boolean | undefined;
-read?: boolean | undefined;
-}>>>, {
+export declare const FormRender: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<    {
+modelValue: PropType<Record<string, any>>;
+schema: {
+type: PropType<FormSchema>;
+required: true;
+};
+schemaContext: {
+type: PropType<Record<string, any>>;
+};
+design: {
+type: PropType<boolean>;
+};
+footer: {
+type: PropType<boolean>;
+};
+read: {
+type: PropType<boolean>;
+};
+}>, {
+formValues: {
+readonly [x: string]: any;
+};
+selectData: {
+readonly [x: string]: {
+readonly [x: string]: any;
+};
+};
+initialValues: {
+readonly [x: string]: any;
+};
+context: {
+readonly $values: {
+readonly [x: string]: any;
+};
+readonly $selectData: {
+readonly [x: string]: {
+readonly [x: string]: any;
+};
+};
+readonly $locale: {
+readonly menus: {
+readonly basicTitle: string;
+readonly highBasicTitle: string;
+readonly layoutTitle: string;
+readonly assistTitle: string;
+readonly useTemplateBtn: string;
+};
+readonly actions: {
+readonly previewJson: string;
+readonly previewVueCode: string;
+readonly previewForm: string;
+readonly clear: string;
+readonly save: string;
+};
+readonly canvas: {
+readonly emptyTip: string;
+readonly wrapperEmptyTip: string;
+};
+readonly attr: {
+readonly tab1: {
+readonly title: string;
+readonly emptyTip: string;
+readonly linkage: {
+readonly text: string;
+readonly action1: string;
+readonly action2: string;
+};
+};
+readonly tab2: {
+readonly title: string;
+};
+};
+};
+};
+updateFormValues: (values: Record<string, any>) => void;
+updateSelectData: (key: string, value: Record<string, any>) => void;
+updateInitialValues: (values: Record<string, any>) => void;
 validate: () => FormValidationResult | undefined;
-context: ComputedRef<    {
-$values: {};
-$selectData: Record<string, Record<string, any>>;
-$initialValues: Record<string, any>;
-$locale: Locale;
-}>;
 resetFields: (names?: string[] | undefined) => void;
+submit: () => Promise<void>;
+schema: {
+readonly labelWidth?: number | undefined;
+readonly labelAlign?: "top" | "left" | "right" | undefined;
+readonly labelSuffix?: string | undefined;
+readonly size?: "default" | "small" | "large" | undefined;
+readonly disabled?: boolean | undefined;
+readonly hideRequiredAsterisk?: boolean | undefined;
+readonly labelBold?: boolean | undefined;
+readonly items: readonly {
+readonly label?: string | undefined;
+readonly name: string;
+readonly component: string;
+readonly required?: boolean | undefined;
+readonly props?: {
+readonly [x: string]: any;
+} | undefined;
+readonly initialValue?: any;
+readonly help?: string | undefined;
+readonly children?: readonly any[] | undefined;
+readonly hidden?: string | boolean | undefined;
+readonly hideLabel?: boolean | undefined;
+readonly designKey?: string | undefined;
+readonly rules?: readonly {
+readonly type: string;
+readonly customReg?: string | undefined;
+readonly message?: string | undefined;
+readonly trigger: "blur" | "change";
+}[] | undefined;
+readonly class?: any;
+readonly style?: any;
+readonly change?: readonly {
+readonly target: string;
+readonly value?: any;
+readonly condition?: any;
+}[] | undefined;
+readonly dialog?: boolean | undefined;
+}[];
+};
+schemaContext: {
+readonly [x: string]: any;
+} | undefined;
+design: boolean;
+footer: boolean;
+read: boolean;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:modelValue": (values: Record<string, any>) => void;
 onFinish: (values: Record<string, any>) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Readonly<{
-modelValue?: Record<string, any> | undefined;
-schema: FormSchema;
-schemaContext?: Record<string, any> | undefined;
-design?: boolean | undefined;
-footer?: boolean | undefined;
-read?: boolean | undefined;
-}>>>> & Readonly<{
-"onUpdate:modelValue"?: ((values: Record<string, any>) => any) | undefined;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+modelValue: PropType<Record<string, any>>;
+schema: {
+type: PropType<FormSchema>;
+required: true;
+};
+schemaContext: {
+type: PropType<Record<string, any>>;
+};
+design: {
+type: PropType<boolean>;
+};
+footer: {
+type: PropType<boolean>;
+};
+read: {
+type: PropType<boolean>;
+};
+}>> & Readonly<{
 onOnFinish?: ((values: Record<string, any>) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 
-export declare type FormRenderInstance = InstanceType<typeof FormRender>;
+declare interface FormRenderProps {
+    schema: FormSchema;
+    schemaContext?: Record<string, any>;
+    design?: boolean;
+    footer?: boolean;
+    read?: boolean;
+}
 
 declare type FormRule = {
     type: 'email' | 'url' | 'custom' | string;
@@ -167,45 +296,12 @@ export declare type FormSchema = {
     items: FormItemType[];
 };
 
-declare type Locale = {
-    menus: {
-        basicTitle: string;
-        highBasicTitle: string;
-        layoutTitle: string;
-        assistTitle: string;
-        useTemplateBtn: string;
-    };
-    actions: {
-        previewJson: string;
-        previewVueCode: string;
-        previewForm: string;
-        clear: string;
-        save: string;
-    };
-    canvas: {
-        emptyTip: string;
-        wrapperEmptyTip: string;
-    };
-    attr: {
-        tab1: {
-            title: string;
-            emptyTip: string;
-            linkage: {
-                text: string;
-                action1: string;
-                action2: string;
-            };
-        };
-        tab2: {
-            title: string;
-        };
-    };
-};
-
 export declare type TemplateData = {
     name: string;
     schema: FormSchema;
     id?: string;
 }[];
 
+export declare const useFormInstance: () => FormInstance;
+
 export { }