@cicctencent/formily 0.0.0-stage → 0.0.1

package/docs/demos/x-data/send-message.vue

@@ -0,0 +1,33 @@
+<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: '<strong>目前可传递的信息有四个，分别为componentId（组件id）、componentName（组件名称）、formData（表单数据）、component（组件对象）</strong>'
+                },
+                'x-data': {
+                    extend: {
+                        compoentId: '$componentId',//组件id
+                        componentName: '$componentName',//组件名称
+                        formData:'$formData',//表单数据
+                        component:'$component',//组件对象
+                    },
+                },
+            },
+        }
+    })
+
+</script>
+<style scoped>
+</style>

package/docs/demos/x-reactions/any-of.vue

@@ -0,0 +1,40 @@
+<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:{
+        userinfo:{
+            title: '是否渲染',
+            'x-component-props': {
+                type: 'switch',
+                required: false
+            },
+            'x-decorator-props': {
+                labelWrap: true,
+            },
+            anyOf:[{
+                title: '是',
+                properties:{
+                    demo2:{
+                        type: 'string'
+                    }
+                }
+            },{
+                title: '否',
+                properties:{}
+            }]
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+
+</style>

package/docs/demos/x-reactions/x-reactions.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:{
+        isRender:{
+            type: 'boolean',
+            title: '是否渲染'
+        },
+        userinfo:{
+            'x-reactions':{
+                dependencies:['.isRender'],
+                fulfill:{
+                    schema:{
+                        "x-visible": "{{$deps[0] === true}}" //任意层次属性都支持表达式
+                    }
+                }
+            },
+            type:'object',
+            properties:{
+                demo2:{
+                    type: 'string'
+                }
+            }
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+
+</style>

package/docs/guide/component-extend.md

@@ -0,0 +1,23 @@
+---
+title: 组件扩展
+lang: zh-cn
+---
+# 组件扩展
+
+> @jv/formily 除了提供基础的表单组件外, 还提供了扩展自定义组件的能力来满足特殊场景的需求
+
+``` ts
+import { createApp } from 'vue';
+
+import App from './App.vue';
+
+import JvFormily from '@jv/formily'
+
+import { JButton } from '../components/Button'
+
+// 扩展Button 自定义组件
+createApp(App).use(JvFormily, { expandComponents: { JButton }});
+```
+::: danger
+扩展的自定义组件必须是以@formily/vue协议包裹的组件,详情请看 [@formily/vue](https://vue.formilyjs.org/api/shared/connect.html)
+:::

package/docs/guide/extra-bury-report.md

@@ -0,0 +1,64 @@
+---
+title: extra-bury-report 埋点拓展
+lang: zh-cn
+---
+# extra-bury-report 埋点拓展
+
+在用户输入的埋点名称基础上，统一添加前缀或者后缀，使用时直接获取埋点，进行录入或者上报即可
+
+### 示例
+
+```
+{
+    type: 'object',
+    properties:{
+        buryReportName: {
+            type: 'string',
+            default: '',
+            title: '埋点名称',
+            'err:required': '请输入埋点名称',
+            required: true,
+            description: '输入埋点名，系统将补全埋点信息: 例 运营.可视化创造.输入的埋点名.点击',
+        },
+        _extraBuryReport: {
+            type: 'object',
+            description: '埋点名前缀,设置前缀会额外上报该前缀的埋点',
+            'x-hidden': true,
+            default: {
+                tjw: {
+                    code: 'tjw-$0',
+                    codeDes: '推荐位-$0',
+                    actions: ['brow', 'click', 'long_tap'],
+                },
+            },
+        },
+    }
+}
+```
+
+### 使用方法
+- 在properties中使用**buryReportName**和 **_extraBuryReport**属性，两者需要配合使用
+
+| 属性   | 说明     | 类型    | 可选值 | 默认值 |
+| ------ | -------- | ------- | ------ | ------ |
+| buryReportName | 埋点名称 | string | —      | —      |
+| _extraBuryReport | 埋点名拼接前后缀之后的对象信息 | string | —      | —      |
+
+- _extraBuryReport对象中的default属性值说明
+
+default属性内需要嵌套一个对象，该对象是包含了埋点名拼接前后缀之后的埋点相关信息，下面说明一下该对象属性
+| 属性   | 说明     | 类型    | 例子 | 默认值 |
+| ------ | -------- | ------- | ------ | ------ |
+| code | 埋点元素代码 | string | xxx-$0 (其中'xxx-'为添加的前缀，'$0'是固定写法，会被替换成转码后buryReportName的值)    | —      |
+| codeDes | 埋点元素 | string |推荐-$0   (其中'推荐-'为添加的前缀，'$0'是固定写法，会被替换成buryReportName的值)    | —      |
+| actions | 埋点动作代码 | array | ['brow', 'click', 'long_tap'] | ['click'] |
+
+
+以上示例，当buryReportName的值为“长封闭期”时，会新增导出以下埋点
+
+| 事件代码	| 事件代码描述 |
+| ------ | -------- |
+| activity.lego.tjw-5fc15d7f-1c2ff04585-9681_brow	| 运营.可视化创造.推荐位-长封闭期-公募运营页-视频_曝光 |
+| activity.lego.tjw-5fc15d7f-1c2ff04585-9681_click	| 运营.可视化创造.推荐位-长封闭期-公募运营页-视频_点击 |
+| activity.lego.tjw-5fc15d7f-1c2ff04585-9681_long_tap	| 运营.可视化创造.推荐位-长封闭期-公募运营页-视频_长按 |
+

package/docs/guide/schema.md

@@ -0,0 +1,22 @@
+---
+title: Schema配置
+lang: zh-cn
+---
+
+# Schema配置
+参考 [https://vue.formilyjs.org/api/shared/schema.html](https://vue.formilyjs.org/api/shared/schema.html)
+
+## 扩展
+
+### 类型判断
+在不写 x-component 的情况下，我们会根据类型、或者某个属性去断言出该渲染的组件名
+
+它们的优先级是  x-component -> ui:widget -> enum -> format -> type ->anyOf
+::: warning
+ui:widget、format、anyOf 是VJSF兼容的产物，不推荐在新的需求下使用
+:::
+
+### 属性扩展
+| 属性   | 说明     | 类型    | 可选值 | 默认值 |
+| ------ | -------- | ------- | ------ | ------ |
+| unique | 全局唯一 （全局校验会用到） | boolean | —      | —      |

package/docs/guide/x-data.md

@@ -0,0 +1,41 @@
+---
+title: x-data 扩展属性
+lang: zh-cn
+---
+# x-data 扩展属性
+
+主要用于扩展功能，如修改原有formily按钮文案或者传递一些信息
+## 拓展功能1:修改原有按钮文案
+### 示例
+<code-preview  demoPath="x-data/add-button-title" :collapsed="false"/>
+
+### 使用方法
+在x-data中使用**addButtonTitle**属性，并写上更改的按钮文案即可
+| 属性   | 说明     | 类型    | 可选值 | 默认值 |
+| ------ | -------- | ------- | ------ | ------ |
+| addButtonTitle | 按钮文案 | string | —      | —      |
+
+### 适用范围
+只适用于type为array类型
+
+## 拓展功能2:传递信息
+目前可传递的信息有四个，分别为componentId（组件id）、componentName（组件名称）、formData（表单数据）、component（组件对象）
+### 示例
+<code-preview  demoPath="x-data/send-message" :collapsed="false"/>
+
+### 使用方法
+在x-data中使用**extend**属性
+- extend为对象类型，在该对象内写上传递信息的key和value
+- key的值：由使用方和获取方进行约定
+- value的值：目前只能有`$componentId`,`$componentName`,`$formData`,`$component`这四个值，编辑器对这四个值做了对应的处理，会将其替换为实际数据，分别是组件id、组件名称、表单数据、组件对象的实际数据
+
+| 属性   | 说明     | 类型    | 可选值 | 默认值 |
+| ------ | -------- | ------- | ------ | ------ |
+| extend | 拓展对象 | object | —      | —      |
+
+### 适用范围
+无特殊限定，都可以使用
+
+
+更多查看 [https://vue.formilyjs.org/api/shared/schema.html#%E6%8F%8F%E8%BF%B0](https://vue.formilyjs.org/api/shared/schema.html#%E6%8F%8F%E8%BF%B0)
+

package/docs/guide/x-reactions.md

@@ -0,0 +1,20 @@
+---
+title: x-reactions联动
+lang: zh-cn
+---
+# x-reactions联动
+<!-- ## anyof示例
+<code-preview  demoPath="x-reactions/any-of" :collapsed="false"/> -->
+
+## 示例
+<code-preview  demoPath="x-reactions/x-reactions" :collapsed="false"/>
+
+<!-- ::: danger
+ anyof 设计之初是把title作为唯一key，如果将来title变了, 会造成数据的不稳定性, 现在已经停止对anyof的维护,请使用 x-reactions 的方案
+::: -->
+::: warning
+如果用到formily全局校验, x-reactions 必须使用被动联动的方式
+:::
+
+更多查看 [https://vue.formilyjs.org/api/shared/schema.html#schemareactions](https://vue.formilyjs.org/api/shared/schema.html#schemareactions)
+

package/example/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

package/example/.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off'
+  },
+};

package/example/README.md

@@ -0,0 +1,24 @@
+# demo-vue3
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/example/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

package/example/jest.config.js

@@ -0,0 +1,26 @@
+/* eslint-disable prettier/prettier */
+const path = require('path');
+
+module.exports = {
+  rootDir: path.resolve(__dirname),
+  clearMocks: true,
+  coverageDirectory: 'coverage',
+  coverageProvider: 'v8',
+  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/src/__tests__/**/*.spec.(ts|tsx|js)'],
+  testPathIgnorePatterns: ['/node_modules/'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.(ts|tsx|js|jsx)$': [
+      'babel-jest', {
+        presets: [
+          ['@babel/preset-env', { targets: { node: 'current' } }],
+          ['@babel/preset-typescript']
+        ],
+        plugins: ['@vue/babel-plugin-jsx']
+      }
+    ]
+  }
+}

package/example/package.json

@@ -0,0 +1,50 @@
+{
+    "name": "@jt/formily-demo",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "konva": "^8.3.9",
+        "vue": "^3.2.13",
+        "vue-konva": "^3.0.0",
+        "vue-router": "^4.0.3",
+        "vuex": "^4.0.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.18.2",
+        "@babel/preset-env": "^7.18.2",
+        "@babel/preset-typescript": "^7.17.12",
+        "@jt/jtui": "^2.2.11-beta.2",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@types/jest": "^28.1.0",
+        "@typescript-eslint/eslint-plugin": "^5.4.0",
+        "@typescript-eslint/parser": "^5.4.0",
+        "@vitejs/plugin-vue": "^4.2.3",
+        "@vue/babel-plugin-jsx": "^1.1.1",
+        "@vue/cli-plugin-eslint": "~5.0.0",
+        "@vue/cli-plugin-router": "~5.0.0",
+        "@vue/cli-plugin-typescript": "~5.0.0",
+        "@vue/cli-plugin-vuex": "~5.0.0",
+        "@vue/cli-service": "~5.0.0",
+        "@vue/eslint-config-typescript": "^9.1.0",
+        "@vue/test-utils": "^2.0.0-rc.18",
+        "babel-jest": "^26.0.0",
+        "eslint": "^7.32.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-vue": "^8.0.3",
+        "jest": "^26.0.0",
+        "prettier": "^2.4.1",
+        "raw-loader": "^4.0.2",
+        "sass": "^1.32.7",
+        "sass-loader": "^12.0.0",
+        "ts-jest": "^26.4.4",
+        "typescript": "~4.5.5",
+        "vite": "^4.3.9",
+        "vue-jest": "^5.0.0-alpha.10"
+    }
+}

package/example/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/example/src/App.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="app-wrap">
+        <router-view />
+    </div>
+</template>
+
+<style lang="scss">
+.app-wrap {
+    display: flex;
+}
+.router-link-box {
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+    align-items: center;
+    border: 1px dashed rgba(0, 0, 0, 0.3);
+    a {
+        margin-top: 24px;
+        font-size: 24px;
+    }
+}
+.router-view-box {
+    flex: 1;
+}
+</style>

package/example/src/components/HelloWorld.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class="hello">
+        <h1>{{ msg }}</h1>
+        <p>
+            For a guide and recipes on how to configure / customize this
+            project,<br />
+            check out the
+            <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+                >vue-cli documentation</a
+            >.
+        </p>
+        <h3>Installed CLI Plugins</h3>
+        <ul>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+                    target="_blank"
+                    rel="noopener"
+                    >router</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+                    target="_blank"
+                    rel="noopener"
+                    >vuex</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+                    target="_blank"
+                    rel="noopener"
+                    >eslint</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
+                    target="_blank"
+                    rel="noopener"
+                    >typescript</a
+                >
+            </li>
+        </ul>
+        <h3>Essential Links</h3>
+        <ul>
+            <li>
+                <a href="https://vuejs.org" target="_blank" rel="noopener"
+                    >Core Docs</a
+                >
+            </li>
+            <li>
+                <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+                    >Forum</a
+                >
+            </li>
+            <li>
+                <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+                    >Community Chat</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://twitter.com/vuejs"
+                    target="_blank"
+                    rel="noopener"
+                    >Twitter</a
+                >
+            </li>
+            <li>
+                <a href="https://news.vuejs.org" target="_blank" rel="noopener"
+                    >News</a
+                >
+            </li>
+        </ul>
+        <h3>Ecosystem</h3>
+        <ul>
+            <li>
+                <a
+                    href="https://router.vuejs.org"
+                    target="_blank"
+                    rel="noopener"
+                    >vue-router</a
+                >
+            </li>
+            <li>
+                <a href="https://vuex.vuejs.org" target="_blank" rel="noopener"
+                    >vuex</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/vue-devtools#vue-devtools"
+                    target="_blank"
+                    rel="noopener"
+                    >vue-devtools</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://vue-loader.vuejs.org"
+                    target="_blank"
+                    rel="noopener"
+                    >vue-loader</a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/vuejs/awesome-vue"
+                    target="_blank"
+                    rel="noopener"
+                    >awesome-vue</a
+                >
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: 'HelloWorld',
+    props: {
+        msg: String,
+    },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+    margin: 40px 0 0;
+}
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+li {
+    display: inline-block;
+    margin: 0 10px;
+}
+a {
+    color: #42b983;
+}
+</style>

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

@@ -0,0 +1,16 @@
+<template>
+    <div class="group-wrap">
+        <slot></slot>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.group-wrap {
+    display: block;
+    box-sizing: border-box;
+    background-color: rgba(216, 220, 230, 0.2);
+    padding: 16px 16px 20px 16px;
+}
+</style>