vue-form-craft 3.0.11 → 4.0.2

package/README.md

@@ -1,40 +1,34 @@
 # vue-form-craft
 
-基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element) 实现的表单设计器 + 渲染器
+基于 [vue](https://github.com/vuejs/vue) 和 [element-plus](https://github.com/ElemeFE/element) 实现的表单设计器 + 渲染器
 
 使用了最新的前端技术栈，可以让你免去vue项目中表单的烦恼。
 
-
-* [在线预览](https://hyl999.co:86/formDesign)
-* [官方文档](https://hyl999.co:86/)
-* 作者：Elin
-* 联系方式：17803000829
+- [在线预览](https://xinnian999.github.io/vue-form-craft/form-design)
+- [官方文档](https://xinnian999.github.io/vue-form-craft/)
+- 作者：Elin
+- 联系方式：17803000829
 
 ![ui](./src/assets/ui.png)
 
-
-
 ## 特性
 
-* 可视化设计表单
-* 支持三十多种的表单组件(el所有表单组件、内置组件)
-* 支持收集Array数据（自增组件）
-* 用法简单，又非常高效的表单联动
-* 可预览生成的json配置
-* 可预览生成的VUE组件
-* 高扩展性、支持自定义组件、支持各种ui组件库来替换ui
-* 支持表单填写校验
-* 组件无限深层嵌套，深层校验
-* 支持远程获取表单的schema，后台存储表单，前端在线修改
+- 可视化设计表单
+- 支持三十多种的表单组件(el所有表单组件、内置组件)
+- 支持收集Array数据（自增组件）
+- 用法简单，又非常灵活高效的表单联动
+- 可预览生成的json配置
+- 可预览生成的VUE组件
+- 高扩展性、支持自定义组件、支持各种ui组件库来替换ui
+- 支持表单填写校验
+- 组件无限深层嵌套，深层校验
 
 ## 第三方插件
 
-* vuedraggable
-* element-ui
-* json-editor-vue3
-* codemirror
-* lodash
-* md-editor-v3
+- vuedraggable
+- element-plus
+- json-editor-vue3
+- lodash
 
 ## 使用
 
@@ -56,13 +50,16 @@ pnpm i vue-form-craft
 
 ```js
 import { createApp } from 'vue'
-import App from './App.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')
-
 ```
 
 ### 使用
@@ -71,59 +68,57 @@ app.mount('#app')
 
 ```vue
 <template>
-  <form-design @onSave="onSave" />
+  <div style="width:100vw;height:100vh">
+    <FormDesign />
+  </div>
 </template>
-
-<script setup>
-
-const onSave = (schema) => {
-  console.log(schema)
-}
-
-</script>
 ```
 
 > 使用表单渲染器
 
 ```vue
 <template>
-    <schema-form :schema="schema" footer  @onFinish="onFinish" />
+  <FormRender v-model="formValues" :schema="schema" ref="formRef" />
+  <el-button @click="handleSubmit">提交</el-button>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FormSchema,FormRenderInstance } from 'vue-form-craft'
 
-const onFinish = (values) => {
-  alert(JSON.stringify(values))
-}
+const formRef = ref<FormRenderInstance>()
+
+const formValues = ref({})
 
-const schema = {
-  "labelWidth": 150,
-  "labelAlign": "right",
-  "size": "default",
-  "items": [
+const schema: FormSchema = {
+  labelWidth: 150,
+  labelAlign: 'right',
+  size: 'default',
+  items: [
     {
-      "label": "用户名",
-      "component": "Input",
-      "props": {
-        "placeholder": "请输入用户名"
-      },
-      "designKey": "form-eNR0",
-      "name": "username",
-      "required": true
+      label: '用户名',
+      component: 'Input',
+      name: 'username',
+      required: true,
+      props: {
+        placeholder: '请输入用户名'
+      }
     },
     {
-      "label": "密码",
-      "component": "Password",
-      "props": {
-        "placeholder": "请输入密码"
-      },
-      "designKey": "form-D1x7",
-      "name": "password",
-      "required": true
+      label: '密码',
+      component: 'Password',
+      name: 'password',
+      required: true,
+      props: {
+        placeholder: '请输入密码'
+      }
     }
   ]
 }
+
+const handleSubmit = async () => {
+  await formRef.value?.validate()
+  alert(JSON.stringify(formValues.value,null,2))
+}
 </script>
 ```
-
-

package/dist/index.d.ts

@@ -0,0 +1,168 @@
+import { App } from 'vue';
+import { AxiosInstance } from 'axios';
+import { AxiosStatic } from 'axios';
+import { Component } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { FormValidationResult } from 'element-plus';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+import { VNode } from 'vue';
+
+export declare type $Global = {
+    request: AxiosStatic | AxiosInstance;
+    elements: {
+        [key: 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;
+    };
+};
+
+declare const _default: {
+    install: (app: App<Element>, options?: {
+        request?: Function | AxiosStatic | AxiosInstance | undefined;
+        extendElements?: Record<string, FormElement> | undefined;
+        lang?: "zh" | "en" | undefined;
+    } | undefined) => void;
+};
+export default _default;
+
+declare type FormChange = {
+    target: string;
+    value?: any;
+    condition?: any;
+};
+
+export declare const FormDesign: DefineComponent<ExtractPropTypes<    {
+modelValue: PropType<FormSchema>;
+schemaContext: {
+type: PropType<Record<string, any>>;
+};
+templates: {
+type: PropType<TemplateData>;
+};
+omitMenus: {
+type: PropType<string[]>;
+};
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+onSave: () => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<    {
+modelValue: PropType<FormSchema>;
+schemaContext: {
+type: PropType<Record<string, any>>;
+};
+templates: {
+type: PropType<TemplateData>;
+};
+omitMenus: {
+type: PropType<string[]>;
+};
+}>> & Readonly<{
+onOnSave?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare type FormElement = {
+    name: string;
+    component: VNode | Component;
+    icon: string | VNode | Component;
+    type: 'assist' | 'layout' | 'basic';
+    order: number;
+    initialValues: Omit<FormItemType, 'name'>;
+    modelName?: string;
+    attrSchema: FormSchema;
+};
+
+export declare interface FormItemType {
+    label?: string;
+    name: string;
+    component: string;
+    required?: boolean;
+    props?: Record<string, any>;
+    initialValue?: any;
+    help?: string;
+    children?: FormItemType[];
+    hidden?: boolean | string;
+    hideLabel?: boolean;
+    designKey?: string;
+    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;
+}>>>, {
+validate: () => FormValidationResult | undefined;
+context: ComputedRef<    {
+$values: {};
+$selectData: Record<string, Record<string, any>>;
+$initialValues: Record<string, any>;
+}>;
+resetFields: (names?: string[] | undefined) => void;
+}, {}, {}, {}, 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;
+}>>>> & Readonly<{
+"onUpdate:modelValue"?: ((values: Record<string, any>) => any) | undefined;
+onOnFinish?: ((values: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+
+export declare type FormRenderInstance = InstanceType<typeof FormRender>;
+
+declare type FormRule = {
+    type: 'email' | 'url' | 'custom' | string;
+    customReg?: string;
+    message?: string;
+    trigger: 'blur' | 'change';
+};
+
+export declare type FormSchema = {
+    labelWidth?: number;
+    labelAlign?: 'top' | 'left' | 'right';
+    size?: 'default' | 'small' | 'large';
+    disabled?: boolean;
+    hideRequiredAsterisk?: boolean;
+    labelBold?: boolean;
+    items: FormItemType[];
+};
+
+export declare type TemplateData = {
+    name: string;
+    schema: FormSchema;
+    id?: string;
+}[];
+
+export { }