@cicctencent/formily 0.0.0-stage → 0.0.1

package/docs/demos/array-table/index.vue

@@ -0,0 +1,115 @@
+<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: {
+    array: {
+      type: 'array',
+      'x-decorator': 'FormItem',
+      'x-component': 'ArrayTable',
+      items: {
+        type: 'object',
+        properties: {
+          column1: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': {
+              width: 80,
+              title: 'Index',
+              align: 'center',
+            },
+            properties: {
+              index: {
+                type: 'void',
+                'x-component': 'ArrayTable.Index',
+              },
+            },
+          },
+          column2: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': { width: 200, title: 'A1' },
+            properties: {
+              a1: {
+                type: 'string',
+                'x-decorator': 'Editable',
+                'x-component': 'Input',
+              },
+            },
+          },
+          column3: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': { width: 200, title: 'A2' },
+            properties: {
+              a2: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+              },
+            },
+          },
+          column4: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': { title: 'A3' },
+            properties: {
+              a3: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+              },
+            },
+          },
+          column5: {
+            type: 'void',
+            'x-component': 'ArrayTable.Column',
+            'x-component-props': {
+              title: 'Operations',
+              prop: 'operations',
+              width: 200,
+              fixed: 'right',
+            },
+            properties: {
+              item: {
+                type: 'void',
+                'x-component': 'FormItem',
+                properties: {
+                  remove: {
+                    type: 'void',
+                    'x-component': 'ArrayTable.Remove',
+                  },
+                  moveDown: {
+                    type: 'void',
+                    'x-component': 'ArrayTable.MoveDown',
+                  },
+                  moveUp: {
+                    type: 'void',
+                    'x-component': 'ArrayTable.MoveUp',
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      properties: {
+        add: {
+          type: 'void',
+          'x-component': 'ArrayTable.Addition',
+          title: '添加条目',
+        },
+      },
+    },
+  },
+}
+</script>
+<style scoped>
+</style>

package/docs/demos/array-tabs/index.vue

@@ -0,0 +1,56 @@
+<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: {
+        string_array: {
+            type: 'array',
+            title: '字符串数组',
+            'x-decorator': 'FormItem',
+            maxItems: 3,
+            'x-component': 'ArrayTabs',
+            items: {
+                type: 'string',
+                'x-decorator': 'FormItem',
+                required: true,
+                'x-component': 'Input',
+            },
+        },
+        array: {
+            type: 'array',
+            title: '对象数组',
+            'x-decorator': 'FormItem',
+            maxItems: 3,
+            'x-component': 'ArrayTabs',
+            items: {
+                type: 'object',
+                properties: {
+                    aaa: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        title: 'AAA',
+                        required: true,
+                        'x-component': 'Input',
+                    },
+                    bbb: {
+                        type: 'string',
+                        'x-decorator': 'FormItem',
+                        title: 'BBB',
+                        required: true,
+                        'x-component': 'Input',
+                    },
+                },
+            },
+        },
+    },
+};
+</script>
+<style scoped>
+</style>

package/docs/demos/cascader/index.vue

@@ -0,0 +1,297 @@
+<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: {
+        cascader: {
+            type: 'string',
+            title: '级联选择',
+            'x-decorator': 'FormItem',
+            'x-component': 'Cascader',
+            'x-component-props': {
+                style: {
+                    width: '240px',
+                },
+                options: [
+                    {
+                        value: 'guide',
+                        label: 'Guide',
+                        children: [
+                            {
+                                value: 'disciplines',
+                                label: 'Disciplines',
+                                children: [
+                                    {
+                                        value: 'consistency',
+                                        label: 'Consistency',
+                                    },
+                                    {
+                                        value: 'feedback',
+                                        label: 'Feedback',
+                                    },
+                                    {
+                                        value: 'efficiency',
+                                        label: 'Efficiency',
+                                    },
+                                    {
+                                        value: 'controllability',
+                                        label: 'Controllability',
+                                    },
+                                ],
+                            },
+                            {
+                                value: 'navigation',
+                                label: 'Navigation',
+                                children: [
+                                    {
+                                        value: 'side nav',
+                                        label: 'Side Navigation',
+                                    },
+                                    {
+                                        value: 'top nav',
+                                        label: 'Top Navigation',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        value: 'component',
+                        label: 'Component',
+                        children: [
+                            {
+                                value: 'basic',
+                                label: 'Basic',
+                                children: [
+                                    {
+                                        value: 'layout',
+                                        label: 'Layout',
+                                    },
+                                    {
+                                        value: 'color',
+                                        label: 'Color',
+                                    },
+                                    {
+                                        value: 'typography',
+                                        label: 'Typography',
+                                    },
+                                    {
+                                        value: 'icon',
+                                        label: 'Icon',
+                                    },
+                                    {
+                                        value: 'button',
+                                        label: 'Button',
+                                    },
+                                ],
+                            },
+                            {
+                                value: 'form',
+                                label: 'Form',
+                                children: [
+                                    {
+                                        value: 'radio',
+                                        label: 'Radio',
+                                    },
+                                    {
+                                        value: 'checkbox',
+                                        label: 'Checkbox',
+                                    },
+                                    {
+                                        value: 'input',
+                                        label: 'Input',
+                                    },
+                                    {
+                                        value: 'input-number',
+                                        label: 'InputNumber',
+                                    },
+                                    {
+                                        value: 'select',
+                                        label: 'Select',
+                                    },
+                                    {
+                                        value: 'cascader',
+                                        label: 'Cascader',
+                                    },
+                                    {
+                                        value: 'switch',
+                                        label: 'Switch',
+                                    },
+                                    {
+                                        value: 'slider',
+                                        label: 'Slider',
+                                    },
+                                    {
+                                        value: 'time-picker',
+                                        label: 'TimePicker',
+                                    },
+                                    {
+                                        value: 'date-picker',
+                                        label: 'DatePicker',
+                                    },
+                                    {
+                                        value: 'datetime-picker',
+                                        label: 'DateTimePicker',
+                                    },
+                                    {
+                                        value: 'upload',
+                                        label: 'Upload',
+                                    },
+                                    {
+                                        value: 'rate',
+                                        label: 'Rate',
+                                    },
+                                    {
+                                        value: 'form',
+                                        label: 'Form',
+                                    },
+                                ],
+                            },
+                            {
+                                value: 'data',
+                                label: 'Data',
+                                children: [
+                                    {
+                                        value: 'table',
+                                        label: 'Table',
+                                    },
+                                    {
+                                        value: 'tag',
+                                        label: 'Tag',
+                                    },
+                                    {
+                                        value: 'progress',
+                                        label: 'Progress',
+                                    },
+                                    {
+                                        value: 'tree',
+                                        label: 'Tree',
+                                    },
+                                    {
+                                        value: 'pagination',
+                                        label: 'Pagination',
+                                    },
+                                    {
+                                        value: 'badge',
+                                        label: 'Badge',
+                                    },
+                                ],
+                            },
+                            {
+                                value: 'notice',
+                                label: 'Notice',
+                                children: [
+                                    {
+                                        value: 'alert',
+                                        label: 'Alert',
+                                    },
+                                    {
+                                        value: 'loading',
+                                        label: 'Loading',
+                                    },
+                                    {
+                                        value: 'message',
+                                        label: 'Message',
+                                    },
+                                    {
+                                        value: 'message-box',
+                                        label: 'MessageBox',
+                                    },
+                                    {
+                                        value: 'notification',
+                                        label: 'Notification',
+                                    },
+                                ],
+                            },
+                            {
+                                value: 'navigation',
+                                label: 'Navigation',
+                                children: [
+                                    {
+                                        value: 'menu',
+                                        label: 'Menu',
+                                    },
+                                    {
+                                        value: 'tabs',
+                                        label: 'Tabs',
+                                    },
+                                    {
+                                        value: 'breadcrumb',
+                                        label: 'Breadcrumb',
+                                    },
+                                    {
+                                        value: 'dropdown',
+                                        label: 'Dropdown',
+                                    },
+                                    {
+                                        value: 'steps',
+                                        label: 'Steps',
+                                    },
+                                ],
+                            },
+                            {
+                                value: 'others',
+                                label: 'Others',
+                                children: [
+                                    {
+                                        value: 'dialog',
+                                        label: 'Dialog',
+                                    },
+                                    {
+                                        value: 'tooltip',
+                                        label: 'Tooltip',
+                                    },
+                                    {
+                                        value: 'popover',
+                                        label: 'Popover',
+                                    },
+                                    {
+                                        value: 'card',
+                                        label: 'Card',
+                                    },
+                                    {
+                                        value: 'carousel',
+                                        label: 'Carousel',
+                                    },
+                                    {
+                                        value: 'collapse',
+                                        label: 'Collapse',
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                    {
+                        value: 'resource',
+                        label: 'Resource',
+                        children: [
+                            {
+                                value: 'axure',
+                                label: 'Axure Components',
+                            },
+                            {
+                                value: 'sketch',
+                                label: 'Sketch Templates',
+                            },
+                            {
+                                value: 'docs',
+                                label: 'Design Documentation',
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+    },
+};
+</script>
+<style scoped>
+</style>

package/docs/demos/checkbox/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: {
+        checkbox: {
+            type: 'number',
+            title: '是否确认',
+            'x-decorator': 'FormItem',
+            'x-component': 'Checkbox',
+        },
+        checkboxGroup: {
+            type: 'array',
+            title: '复选',
+            'x-decorator': 'FormItem',
+            'x-component': 'Checkbox.Group',
+            enum: [
+                {
+                    label: '选项1',
+                    value: 1,
+                },
+                {
+                    label: '选项2',
+                    value: 2,
+                },
+            ],
+        },
+    },
+};
+</script>
+<style scoped>
+</style>