@cicctencent/formily 0.0.0-stage → 0.0.1

package/example/src/components/uploadBtn/index.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="upload-btn">
+        <i class="upload-icon"></i>
+        点击上传
+    </div>
+</template>
+
+<script setup lang="ts">
+const handleClick = () => {
+    console.log('???');
+};
+</script>
+
+<style scoped>
+.upload-btn {
+    background: #ffffff;
+    border: 1px dashed #d8dce6;
+    border-radius: 4px;
+    color: rgba(75, 81, 94, 0.6);
+    width: 163px;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    padding-left: 35px;
+    box-sizing: border-box;
+}
+.upload-btn:hover {
+    background-color: rgba(237, 190, 167, 0.3);
+    border-color: rgba(237, 190, 167, 0.5);
+}
+
+.upload-icon {
+    width: 19px;
+    height: 19px;
+    background-image: url('./upload-icon.svg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-right: 10px;
+}
+</style>

package/example/src/components/uploadBtn/upload-icon.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 15.9725C17.25 15.7238 19 13.8163 19 11.5C19 9.43553 17.6098 7.69576 15.7145 7.16579C14.9394 4.74921 12.674 3 10 3C7.32602 3 5.06059 4.74921 4.28554 7.16579C2.39021 7.69576 1 9.43553 1 11.5C1 13.8163 2.75002 15.7238 5 15.9725V16H5.5H14.5H15V15.9725Z" fill="#FAF3EE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 3.5C7.54984 3.5 5.47268 5.10249 4.76212 7.31834L4.6799 7.57472L4.4206 7.6472C2.73541 8.11822 1.5 9.66548 1.5 11.5C1.5 13.7091 3.29086 15.5 5.5 15.5V16.5C2.73858 16.5 0.5 14.2614 0.5 11.5C0.5 9.29916 1.92155 7.43153 3.8957 6.76308C4.80732 4.27553 7.19571 2.5 10 2.5C12.8043 2.5 15.1927 4.27556 16.1045 6.76263C18.0784 7.43153 19.5 9.29911 19.5 11.5C19.5 14.2614 17.2614 16.5 14.5 16.5V15.5C16.7091 15.5 18.5 13.7091 18.5 11.5C18.5 9.66549 17.2646 8.11815 15.5795 7.64665L15.3204 7.57413L15.2382 7.31789C14.5274 5.10251 12.4502 3.5 10 3.5Z" fill="#C79156"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7426 8.70733L13.5711 11.5358L12.8639 12.2429L10.0355 9.41443L7.2071 12.2429L6.49999 11.5358L9.32842 8.70733L9.68197 8.35377C9.87723 8.15851 10.1938 8.15851 10.3891 8.35377L10.7426 8.70733Z" fill="#C79156"/>
+<rect x="9.5" y="9" width="1" height="8" fill="#C79156"/>
+</svg>

package/example/src/layout/component/Aside.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <el-menu router>
+            <el-menu-item index="/color-group"
+                >ColorGroup [颜色组]</el-menu-item
+            >
+            <el-menu-item index="/any-of">Any Of [Any Of]</el-menu-item>
+            <el-menu-item index="/one-of">One Of [One Of]</el-menu-item>
+            <el-menu-item index="/event">Event [事件]</el-menu-item>
+            <el-menu-item index="/hot-area">HotArea [热区]</el-menu-item>
+            <el-menu-item index="/link">Link [链接]</el-menu-item>
+            <el-menu-item index="/input">Input [输入框]</el-menu-item>
+            <el-menu-item index="/rich-editor"
+                >RichEditor [富文本]</el-menu-item
+            >
+            <el-menu-item index="/select">Select [选择器]</el-menu-item>
+            <el-menu-item index="/array-cards"
+                >ArrayCards [卡片数组]</el-menu-item
+            >
+            <el-menu-item index="/upload-button"
+                >UploadButton [上传按钮]</el-menu-item
+            >
+            <el-menu-item index="/array-items">arrayItems [数组]</el-menu-item>
+            <el-menu-item index="/date-time">DataTime [日期时间]</el-menu-item>
+            <el-menu-item index="/color-picker"
+                >ColorPicker [拾色器]</el-menu-item
+            >
+            <el-menu-item>
+                <a href="https://element.formilyjs.org/" target="_blank">
+                    formily ElementPlus
+                </a>
+            </el-menu-item>
+        </el-menu>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/example/src/layout/component/Main.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <router-view />
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/example/src/layout/index.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="common-layout">
+        <el-container>
+            <Aside></Aside>
+            <Main></Main>
+        </el-container>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Aside from './component/Aside.vue';
+import Main from './component/Main.vue';
+</script>
+
+<style scoped></style>

package/example/src/main.ts

@@ -0,0 +1,17 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+import ElementPlus from '@jt/jtui';
+import '@jt/jtui/dist/index.css';
+import VueKonva from 'vue-konva';
+import JtFormily from '@jt/formily/src';
+// import '@jt/formily/dist/schema-field/index.css';
+// import '@jt/formily/dist/index.css';
+createApp(App)
+    .use(store)
+    .use(router)
+    .use(VueKonva)
+    .use(JtFormily, {})
+    .use(ElementPlus)
+    .mount('#app');

package/example/src/router/index.ts

@@ -0,0 +1,99 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
+import Layout from '../layout/index.vue';
+const routes: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        component: Layout,
+        redirect: '/color-group',
+        children: [
+            {
+                path: '/color-group',
+                name: 'ColorGroup',
+                component: () => import('@/views/demo/color-group/index.vue'),
+            },
+            {
+                path: '/any-of',
+                name: 'AnyOf',
+                component: () => import('@/views/demo/any-of/index.vue'),
+            },
+            {
+                path: '/one-of',
+                name: 'OneOf',
+                component: () => import('@/views/demo/one-of/index.vue'),
+            },
+            {
+                path: '/event',
+                name: 'Event',
+                component: () => import('@/views/demo/event/index.vue'),
+            },
+            {
+                path: '/hot-area',
+                name: 'HotArea',
+                component: () => import('@/views/demo/hot-area/index.vue'),
+            },
+            {
+                path: '/link',
+                name: 'Link',
+                component: () => import('@/views/demo/link/index.vue'),
+            },
+            {
+                path: '/input',
+                name: 'Input',
+                component: () => import('@/views/demo/input/index.vue'),
+            },
+            {
+                path: '/rich-editor',
+                name: 'RichEditor',
+                component: () => import('@/views/demo/rich-editor/index.vue'),
+            },
+            {
+                path: '/select',
+                name: 'Select',
+                component: () => import('@/views/demo/select/index.vue'),
+            },
+            {
+                path: '/array-cards',
+                name: 'ArrayCards',
+                component: () => import('@/views/demo/array-cards/index.vue'),
+            },
+            {
+                path: '/color-picker',
+                name: 'ColorPicker',
+                component: () => import('@/views/demo/color-picker/index.vue'),
+            },
+            {
+                path: '/upload-button',
+                name: 'UploadButton',
+                component: () => import('@/views/demo/upload-button/index.vue'),
+            },
+            {
+                path: '/array-items',
+                name: 'ArrayItems',
+                component: () => import('@/views/demo/array-items/index.vue'),
+            },
+            {
+                path: '/date-time',
+                name: 'DateTime',
+                component: () => import('@/views/demo/datatime/index.vue'),
+            },
+            {
+                path: '/cloud-button',
+                name: 'CloudButton',
+                component: () => import('@/views/demo/cloud-button/index.vue'),
+            },
+        ],
+    },
+];
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+});
+
+router.beforeEach((to, from, next) => {
+    const { title } = to.meta || {};
+    document.title = `Vue3: ${title || document.title}`;
+    next();
+});
+
+export default router;

package/example/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/example/src/store/index.ts

@@ -0,0 +1,9 @@
+import { createStore } from 'vuex';
+
+export default createStore({
+    state: {},
+    getters: {},
+    mutations: {},
+    actions: {},
+    modules: {},
+});

package/example/src/views/demo/any-of/data.ts

@@ -0,0 +1,38 @@
+export default {
+    type: 'object',
+    properties: {
+        value1: {
+            title: 'anyOf示例',
+            'x-component-props': {
+                        type: 'switch',
+                    },
+                    'x-decorator-props': {
+                        labelWrap: true,
+                    },
+            anyOf: [
+                {
+                    title: '选项1',
+                    properties: {
+                        data1: {
+                            type: 'string',
+                            title: '数据1',
+                        },
+                    },
+                },
+                {
+                    title: '选项2',
+                    properties: {
+                        data2: {
+                            type: 'string',
+                            title: '数据2',
+                        },
+                        data3: {
+                            type: 'string',
+                            title: '数据3',
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};

package/example/src/views/demo/any-of/index.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="demo-wrap">
+        <VueForm
+            @on-change="onChange"
+            :schema="schema"
+            :modelValue="values"
+            @fileUpload="onFileUpload"
+        ></VueForm>
+
+        <div>[value]: {{ values }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VueForm } from '@jt/formily/src/vue-form';
+import { ref } from 'vue';
+import schema from './data';
+
+const values = ref({});
+/**
+ *  file 上传的文件
+ *  done 上传成功回调方法
+ */
+function onFileUpload(file: any, done: any) {
+    done(
+        'https://jt-test-1301270551.cos.ap-guangzhou.myqcloud.com/create-server/test/c3c3bc/6661658229463019.jpg'
+    );
+}
+const activeName = ref('first');
+function onChange(val: any) {
+    console.log('onChange', val);
+    // schemaList.value[activeName.value].data = val;
+    values.value = val;
+}
+</script>

package/example/src/views/demo/array-cards/data.ts

@@ -0,0 +1,65 @@
+export default {
+    type: 'object',
+    properties: {
+        array: {
+            type: 'array',
+            'x-component': 'ArrayItems',
+            'x-decorator': 'FormItem',
+            items: {
+                type: 'object',
+                properties: {
+                    sort: {
+                        type: 'void',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'ArrayItems.SortHandle',
+                    },
+                    date: {
+                        type: 'string',
+                        title: '日期',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'DatePicker',
+                        'x-component-props': {
+                            type: 'daterange',
+                            style: {
+                                width: '250px',
+                            },
+                        },
+                    },
+                    input: {
+                        type: 'string',
+                        title: '输入框',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                    },
+                    select: {
+                        type: 'string',
+                        title: '下拉框',
+                        enum: [
+                            { label: '选项1', value: 1 },
+                            { label: '选项2', value: 2 },
+                        ],
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Select',
+                        'x-component-props': {
+                            style: {
+                                width: '250px',
+                            },
+                        },
+                    },
+                    remove: {
+                        type: 'void',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'ArrayItems.Remove',
+                    },
+                },
+            },
+            properties: {
+                add: {
+                    type: 'void',
+                    title: '添加条目',
+                    'x-component': 'ArrayItems.Addition',
+                },
+            },
+        },
+    },
+};

package/example/src/views/demo/array-cards/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="demo-wrap">
+        <VueForm
+            @on-change="onChange"
+            :schema="schema"
+            :modelValue="values"
+            @fileUpload="onFileUpload"
+        ></VueForm>
+
+        <div>[value]: {{ values }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VueForm } from '@jt/formily/src/vue-form';
+import { ref } from 'vue';
+import schema from './data';
+
+const values = ref({});
+/**
+ *  file 上传的文件
+ *  done 上传成功回调方法
+ */
+function onFileUpload(file: any, done: any) {
+    done(
+        'https://jt-test-1301270551.cos.ap-guangzhou.myqcloud.com/create-server/test/c3c3bc/6661658229463019.jpg'
+    );
+}
+function onChange(val: any) {
+    console.log('onChange', val);
+    values.value = val;
+}
+</script>

package/example/src/views/demo/array-items/data.ts

@@ -0,0 +1,29 @@
+export default {
+    type: 'object',
+    properties: {
+        arr1: {
+            type: 'array',
+            items: {
+                type: 'void',
+                'x-data': { addButtonTitle: '添加选项' },
+                properties: {
+                    remove: {
+                        type: 'void',
+                        'x-component': 'ArrayItems.Remove',
+                    },
+                    sort1: {
+                        type: 'void',
+                        'x-component': 'ArrayItems.MoveUp',
+                    },
+                    sort2: {
+                        type: 'void',
+                        'x-component': 'ArrayItems.MoveDown',
+                    },
+                    input: {
+                        type: 'string',
+                    },
+                },
+            },
+        },
+    },
+};

package/example/src/views/demo/array-items/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="demo-wrap">
+        <VueForm
+            @on-change="onChange"
+            :schema="schema"
+            :modelValue="values"
+            @fileUpload="onFileUpload"
+        ></VueForm>
+
+        <div>[value]: {{ values }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VueForm } from '@jt/formily/src/vue-form';
+import { ref } from 'vue';
+import schema from './data';
+
+const values = ref({});
+/**
+ *  file 上传的文件
+ *  done 上传成功回调方法
+ */
+function onFileUpload(file: any, done: any) {
+    done(
+        'https://jt-test-1301270551.cos.ap-guangzhou.myqcloud.com/create-server/test/c3c3bc/6661658229463019.jpg'
+    );
+}
+function onChange(val: any) {
+    console.log('onChange', val);
+    values.value = val;
+}
+</script>

package/example/src/views/demo/cloud-button/data.ts

@@ -0,0 +1,14 @@
+export default {
+    type: 'object',
+    properties: {
+        test1: {
+            title: '',
+            type: 'string',
+            'x-component': 'CloudButton',
+            'x-component-props': {
+                label: '打开云组件',
+                exportUrl: 'www.xxxxx.com/preview',
+            },
+        },
+    },
+};

package/example/src/views/demo/cloud-button/index.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="demo-wrap">
+        <VueForm
+            @on-change="onChange"
+            :schema="schema"
+            :modelValue="values"
+        ></VueForm>
+        value:{{ values }}
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VueForm } from '@jt/formily/src/vue-form';
+import { ref, reactive } from 'vue';
+import schema from './data';
+const values = ref({});
+
+function onChange(val) {
+    console.log('onChange', val);
+    values.value = val;
+}
+</script>

package/example/src/views/demo/color-group/data.ts

@@ -0,0 +1,15 @@
+export default {
+    type: 'object',
+    properties: {
+        textColor: {
+            title: '文本颜色',
+            type: 'string',
+            'x-component-props': { inputType: 'color' },
+        },
+        background: {
+            title: '背景颜色',
+            'x-component-props': { inputType: 'color' },
+            type: 'string',
+        },
+    },
+};

package/example/src/views/demo/color-group/index.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="demo-wrap">
+        <VueForm
+            @on-change="onChange"
+            :schema="schema"
+            :modelValue="values"
+        ></VueForm>
+        value:{{ values }}
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VueForm } from '@jt/formily/src/vue-form';
+import { ref, reactive } from 'vue';
+import schema from './data';
+const values = ref({});
+
+function onChange(val) {
+    console.log('onChange', val);
+    values.value = val;
+}
+</script>

package/example/src/views/demo/color-picker/data.ts

@@ -0,0 +1,21 @@
+export default {
+    type: 'object',
+    properties: {
+        cInput: {
+            title: '颜色输入框',
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'ColorPicker',
+        },
+        cInput1: {
+            title: '颜色输入框（只读）',
+            type: 'string',
+            'x-decorator': 'FormItem',
+            'x-component': 'ColorPicker',
+            default: '#fa5',
+            'x-component-props': {
+                readOnly: true,
+            },
+        },
+    },
+};

package/example/src/views/demo/color-picker/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="demo-wrap">
+        <VueForm
+            @on-change="onChange"
+            :schema="schema"
+            :modelValue="values"
+            @fileUpload="onFileUpload"
+        ></VueForm>
+
+        <div>[value]: {{ values }}</div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { VueForm } from '@jt/formily/src/vue-form';
+import { ref } from 'vue';
+import schema from './data';
+
+const values = ref({});
+/**
+ *  file 上传的文件
+ *  done 上传成功回调方法
+ */
+function onFileUpload(file: any, done: any) {
+    done(
+        'https://jt-test-1301270551.cos.ap-guangzhou.myqcloud.com/create-server/test/c3c3bc/6661658229463019.jpg'
+    );
+}
+function onChange(val: any) {
+    console.log('onChange', val);
+    values.value = val;
+}
+</script>