@cicctencent/formily 0.0.0-stage → 0.0.1

package/docs/demos/index.vue

@@ -0,0 +1,36 @@
+
+<template>
+    <div>
+        <VueForm :schema="schema"></VueForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const schema = ref({
+    type: 'object',
+    properties:{
+        phone:{
+            title: '手机号',
+            type: 'string',
+            'x-component-props':{
+                maxlength: 11
+            },
+            required: true
+        },
+        test2:{
+            title: '密码',
+            type: 'string',
+            'x-component-props':{
+                type:'password'
+            },
+            required: true
+        },
+    }
+});
+</script>
+
+<style scoped>
+
+</style>

package/docs/demos/input/index.vue

@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema  = ref({
+        type: 'object',
+        properties:{
+            demo1:{
+                type: 'string',
+                title: '隐示转换',
+            },
+            demo2:{
+                type: 'string',
+                title: '指定组件渲染',
+                'x-component': 'Input'
+            },
+            demo4:{
+                type: 'string',
+                title: '颜色输入框2',
+                'x-component': 'Input',
+                'x-component-props':{
+                    inputType: 'color'
+                }
+            },
+            demo5:{
+                type: 'string',
+                title: '必填参数',
+                required: true
+            },
+            demo6:{
+                type: 'string',
+                title: 'tips提示',
+                description: '这是tips提示'
+            },
+        }
+    })
+</script>
+
+<style scoped>
+
+</style>

package/docs/demos/layout-group/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema = ref({
+        type: 'object',
+        properties:{
+        _group1:{
+            type: 'void',
+            'x-decorator': 'LayoutGroup',
+            'x-decorator-props': { title: '页面信息',style:{background:'#86909c'},borderBottom:true },
+            properties:{
+                demo1:{
+                    type: 'string',
+                    title: '隐示转换',
+                },
+                demo2:{
+                    type: 'string',
+                    title: '指定组件渲染',
+                    'x-component': 'Input'
+                },
+                demo4:{
+                    type: 'string',
+                    title: '颜色输入框2',
+                    'x-component': 'Input',
+                    'x-component-props':{
+                        inputType: 'color'
+                    }
+                },
+                demo5:{
+                    type: 'string',
+                    title: '必填参数',
+                    required: true
+                },
+                demo6:{
+                    type: 'string',
+                    title: 'tips提示',
+                    description: '这是tips提示'
+                },
+            }
+        }
+        }
+    })
+</script>
+<style scoped>
+</style>

package/docs/demos/link/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema  = ref({
+        type: 'object',
+        properties:{
+            demo1:{
+                type: 'void',
+                title: '超链接',
+                'x-component': 'Link',
+                'x-component-props':{
+                    type: 'danger',
+                    links: [{
+                        label: '金腾官网',
+                        href: 'https://www.jintengtech.com/'
+                    },{
+                        label: 'github',
+                        href: 'http://git.jintengoa.com/jvfe/base/ark/-/tree/master/packages/jt-formily'
+                    }]
+                }
+            },
+        }
+    })
+</script>
+<style scoped>
+</style>

package/docs/demos/radio/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const formData = ref({});
+const schema = {
+    type: 'object',
+    properties: {
+        radio: {
+            type: 'boolean',
+            title: '单选',
+            enum: [
+                {
+                    label: '选项1',
+                    value: 1,
+                },
+                {
+                    label: '选项2',
+                    value: 2,
+                },
+            ],
+            'x-decorator': 'FormItem',
+            'x-component': 'Radio.Group',
+            'x-component-props': {
+                optionType: 'button',
+            },
+        },
+    },
+};
+</script>
+<style scoped>
+</style>

package/docs/demos/rich-editor/index.vue

@@ -0,0 +1,22 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema  = ref({
+        type: 'object',
+        properties:{
+            demo1:{
+                type: 'string',
+                title: '富文本编辑',
+                required: true,
+                'x-component': 'RichEditor'
+            },
+        }
+    })
+</script>
+<style scoped>
+</style>

package/docs/demos/select/index.vue

@@ -0,0 +1,76 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData" @getData="getData"></VueForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const formData = ref({})
+    const schema  = ref({
+        type: 'object',
+        properties:{
+            demo1:{
+                type: 'number',
+                enum:[{ label: '选项1', value: 1},{ label: '选项2', value: 2}],
+                title: '普通下拉框',
+            },
+            demo2:{
+                type: 'number',
+                enum:[{ label: '选项1', value: {name: 'Jerry'}},{ label: '选项2', value: {name: 'Tom'}}],
+                title: '对象类型下拉框',
+                'x-component-props':{
+                    valueKey: 'name'
+                }
+            },
+            demo3:{
+                type: 'number',
+                enum:[],
+                title: '远程数据加载(5秒)',
+                'x-component-props':{
+                    cmdname: 'userList'
+                }
+            },
+            demo4:{
+                type: 'number',
+                enum:[{ label: '选项1', value: 1},{ label: '选项2', value: 2}],
+                title: '只读',
+                readOnly: true
+            },
+            demo5:{
+                type: 'number',
+                enum:[{label: '喜羊羊', value: 1}, {label: '美羊羊', value: 2},{label: '懒羊羊', value: 3},{label: '沸羊羊', value: 4}],
+                title: '带有前缀',
+                'x-component-props':{
+                    prefix: '青青草原羊村'
+                }
+            },
+            demo6:{
+                type: 'number',
+                title: 'options传值',
+                'x-component':'Select',
+                'x-component-props':{
+                    options: [{label: '熊大', value: 1}, {label: '熊二', value: 2}]
+                }
+            },
+            demo7:{
+                type: 'number',
+                title: '默认值',
+                'x-component':'Select',
+                default: 1,
+                'x-component-props':{
+                    options: [{label: '熊大', value: 1}, {label: '熊二', value: 2}]
+                }
+            },
+        }
+    })
+function getData(cmdname:string, done:any, params: any){
+        setTimeout(()=>{
+            done([{label: '喜羊羊', value: 1}, {label: '美羊羊', value: 2},{label: '懒羊羊', value: 3},{label: '沸羊羊', value: 4}])
+        },5000)
+}
+</script>
+
+<style scoped>
+
+</style>

package/docs/demos/space/index.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const formData = ref({});
+const schema = {
+    type: 'object',
+    properties: {
+        name: {
+            type: 'void',
+            title: '姓名',
+            'x-decorator': 'FormItem',
+            'x-decorator-props': {
+                asterisk: true,
+                feedbackLayout: 'none',
+            },
+            'x-component': 'Space',
+            properties: {
+                firstName: {
+                    type: 'string',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input',
+                    required: true,
+                },
+                lastName: {
+                    type: 'string',
+                    'x-decorator': 'FormItem',
+                    'x-component': 'Input',
+                    required: true,
+                },
+            },
+        },
+        texts: {
+            type: 'void',
+            title: '文本串联',
+            'x-decorator': 'FormItem',
+            'x-decorator-props': {
+                asterisk: true,
+                feedbackLayout: 'none',
+            },
+            'x-component': 'Space',
+            properties: {
+                aa: {
+                    type: 'string',
+                    'x-decorator': 'FormItem',
+                    'x-decorator-props': {
+                        addonAfter: '单位',
+                    },
+                    'x-component': 'Input',
+                    required: true,
+                },
+                bb: {
+                    type: 'string',
+                    'x-decorator': 'FormItem',
+                    'x-decorator-props': {
+                        addonAfter: '单位',
+                    },
+                    'x-component': 'Input',
+                    required: true,
+                },
+                cc: {
+                    type: 'string',
+                    'x-decorator': 'FormItem',
+                    'x-decorator-props': {
+                        addonAfter: '单位',
+                    },
+                    'x-component': 'Input',
+                    required: true,
+                },
+            },
+        },
+
+        textarea: {
+            type: 'string',
+            title: '文本框',
+            'x-decorator': 'FormItem',
+            'x-component': 'Input.TextArea',
+            'x-component-props': {
+                style: {
+                    width: 400,
+                },
+            },
+            required: true,
+        },
+    },
+};
+</script>
+<style scoped>
+</style>

package/docs/demos/switch/index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema  = ref({
+        type: 'object',
+        properties:{
+            demo1:{
+                type: 'boolean',
+                title: '自动转换',
+            },
+            demo2:{
+                type: 'boolean',
+                title: '显示',
+                'x-component': 'Switch'
+            },
+            demo3:{
+                type: 'boolean',
+                title: 'tips',
+                'x-component': 'Switch',
+                description: '这是tips提示'
+            },
+        }
+    })
+</script>
+<style scoped>
+</style>

package/docs/demos/text/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema  = ref({
+        type: 'object',
+        properties:{
+            demo1:{
+                type: 'void',
+                'x-component':'Text',
+                'x-component-props':{
+                    text: '<h1>这是一个标签</h1>'
+                }
+            },
+            demo2:{
+                type: 'void',
+                'x-component':'Text',
+                'x-component-props':{
+                    text: '纯文字'
+                }
+            },
+            demo3:{
+                type: 'void',
+                'x-component':'Text',
+                'x-component-props':{
+                    text: '带颜色的文字',
+                    color: '#fa5'
+                }
+            },
+        }
+    })
+</script>
+<style scoped>
+</style>

package/docs/demos/time-picker/index.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema = {
+  type: 'object',
+  properties: {
+    time: {
+      type: 'string',
+      title: '时间',
+      'x-decorator': 'FormItem',
+      'x-component': 'TimePicker',
+      'x-component-props': {
+        style: {
+          width: '240px',
+        },
+      },
+    },
+    '[startTime,endTime]': {
+      title: '时间范围',
+      'x-decorator': 'FormItem',
+      'x-component': 'TimePicker',
+      'x-component-props': {
+        isRange: true,
+        style: {
+          width: '240px',
+        },
+      },
+      type: 'string',
+    },
+  },
+}
+</script>
+<style scoped>
+</style>

package/docs/demos/transfer/index.vue

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema = {
+  type: 'object',
+  properties: {
+    transfer: {
+      type: 'array',
+      title: '穿梭框',
+      enum: [
+        { label: '选项1', key: 1 },
+        { label: '选项2', key: 2 },
+      ],
+      'x-decorator': 'FormItem',
+      'x-component': 'Transfer',
+    },
+  },
+}
+</script>
+<style scoped>
+</style>

package/docs/demos/upload-button/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData" @fileUpload="handleFileUpload"></VueForm>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const schema  = ref({
+        type: 'object',
+        properties:{
+            demo1:{
+                type: 'string',
+                'x-component':'UploadButton',
+            },
+        }
+    })
+
+function handleFileUpload(file,done){
+    console.log(file);
+    setTimeout(()=>{
+        done('https://jtcospublic.ciccten.com/low-code/files/c3c3pg/logo%20%281%291660803134226.png')
+    },5000)
+}
+</script>
+<style scoped>
+</style>

package/docs/demos/x-data/add-button-title.vue

@@ -0,0 +1,101 @@
+<template>
+    <div>
+        <VueForm :schema="schema" v-model="formData"></VueForm>
+        <VueForm :schema="schema1" v-model="formData1"></VueForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import { ref } from 'vue'
+    const formData = ref({});
+    const formData1 = ref({});
+    const schema = {
+  type: 'object',
+  properties: {
+    string_array: {
+      type: 'array',
+      'x-component': 'ArrayCards',
+      maxItems: 3,
+      'x-decorator': 'FormItem',
+      'x-component-props': {
+      },
+      title:'默认的按钮文案为：添加条目',
+      items: {
+        type: 'void',
+        properties: {
+          index: {
+            type: 'void',
+            'x-component': 'ArrayCards.Index',
+          },
+          input: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            title: 'Input',
+            required: true,
+            'x-component': 'Input',
+          },
+          remove: {
+            type: 'void',
+            'x-component': 'ArrayCards.Remove',
+          },
+          moveUp: {
+            type: 'void',
+            'x-component': 'ArrayCards.MoveUp',
+          },
+          moveDown: {
+            type: 'void',
+            'x-component': 'ArrayCards.MoveDown',
+          },
+        },
+      },
+    },
+  },
+};
+    const schema1 = {
+  type: 'object',
+  properties: {
+    string_array: {
+      type: 'array',
+      'x-component': 'ArrayCards',
+      maxItems: 3,
+      'x-decorator': 'FormItem',
+      'x-component-props': {
+      },
+      title:'成功更改按钮文案：添加Item',
+      items: {
+        type: 'void',
+        properties: {
+          index: {
+            type: 'void',
+            'x-component': 'ArrayCards.Index',
+          },
+          input: {
+            type: 'string',
+            'x-decorator': 'FormItem',
+            title: 'Input',
+            required: true,
+            'x-component': 'Input',
+          },
+          remove: {
+            type: 'void',
+            'x-component': 'ArrayCards.Remove',
+          },
+          moveUp: {
+            type: 'void',
+            'x-component': 'ArrayCards.MoveUp',
+          },
+          moveDown: {
+            type: 'void',
+            'x-component': 'ArrayCards.MoveDown',
+          },
+        },
+        'x-data':{
+            addButtonTitle:'添加Item',
+        }
+      },
+    },
+  },
+};
+</script>
+<style scoped>
+</style>