Merge pull request #17 from fyl080801/dev

Dev

docs/guide/provider/condition.md

@@ -0,0 +1,89 @@
+# 按条件显示
+
+## 使用转换的结果作为条件
+
+组件定义一个 `condition` 属性，可以写固定值，也可以使用转换来决定值，当这个值为真的时候组件被显示
+
+::: demo
+
+```html
+<template>
+  <div>
+    <vjform v-model="model" :fields="fields" />
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        model: {
+          show: false
+        },
+        fields: [
+          {
+            component: "el-checkbox",
+            model: ["show"],
+            children: [{ component: "span", text: "是否显示" }]
+          },
+          {
+            component: "p",
+            condition: { $type: "bind", $source: "model.show" },
+            text: "显示的内容..."
+          }
+        ]
+      };
+    }
+  };
+</script>
+```
+
+:::
+
+## 使用 json-schema 验证作为条件
+
+定义一个`displayOptions`属性，包含 `model` 和 `schema`
+
+`model` 是组件的 `model` 里的某个属性，支持路径，`schema` 是这个属性 json-schema 验证条件，当指定 `model` 的属性值符合 `schema` 里的验证条件，可显示组件
+
+::: demo
+
+```html
+<template>
+  <div>
+    <vjform v-model="model" :fields="fields" />
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        model: {
+          show: false
+        },
+        fields: [
+          {
+            component: "el-checkbox",
+            model: ["show"],
+            children: [{ component: "span", text: "是否显示" }]
+          },
+          {
+            component: "p",
+            displayOptions: {
+              model: "show",
+              schema: {
+                type: "boolean",
+                const: true
+              }
+            },
+            text: "显示的内容..."
+          }
+        ]
+      };
+    }
+  };
+</script>
+```
+
+:::

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vjform",
   "description": "Vue JSON Form",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0",
   "private": false,
   "author": {
     "name": "fyl080801",
@@ -42,9 +42,10 @@
     ]
   },
   "dependencies": {
-    "ajv": "^6.10.2",
+    "ajv": "^6.12.3",
+    "async-validator": "^3.3.0",
     "axios": "^0.19.1",
-    "core-js": "^3.4.3",
+    "core-js": "^3.6.5",
     "element-ui": "^2.13.2",
     "lodash-es": "^4.17.15",
     "vue": "^2.6.10",
@@ -59,9 +60,9 @@
     "@vue/eslint-config-prettier": "^5.0.0",
     "@vue/test-utils": "^1.0.3",
     "acorn": "^7.3.1",
-    "babel-eslint": "^10.0.3",
-    "babel-jest": "^25.1.0",
-    "babel-loader": "^8.0.6",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.5.1",
+    "babel-loader": "^8.1.0",
     "chalk": "^3.0.0",
     "codecov": "^3.7.0",
     "eslint": "^5.16.0",
@@ -71,12 +72,12 @@
     "lodash-webpack-plugin": "^0.11.5",
     "minimist": "^1.2.5",
     "prettier": "^1.19.1",
-    "vue-jest": "^3.0.5",
+    "vue-jest": "^3.0.6",
     "vue-template-compiler": "^2.6.10",
     "vuepress": "^1.5.2",
     "vuepress-plugin-container": "^2.1.4",
     "vuepress-plugin-demo-block": "^0.7.2",
-    "webpack": "^4.41.5",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.3.12",
     "webpack-merge": "^4.2.2",
     "webpack-node-externals": "^1.7.2"

package/feature/index.js

@@ -11,6 +11,13 @@ const registers = {
   functional
 };
 
-export default type => {
-  return registers[type](getFeature(type));
+export const register = type => {
+  return (registers[type] || function() {})(getFeature(type));
+};
+
+export default {
+  provider: register("provider"),
+  datasource: register("datasource"),
+  transform: register("transform"),
+  functional: register("functional")
 };

package/feature/map.js

@@ -1,9 +1,9 @@
-import { getMapDeault } from "../utils";
+import { getMapDefault } from "../utils/helpers";
 
 const store = new Map();
 
 export const getFeature = type => {
-  return getMapDeault(store, type, new Map());
+  return getMapDefault(store, type, new Map());
 };
 
 export default store;

package/feature/provider.js

@@ -1,12 +1,15 @@
+import { getMapDefault } from "../utils/helpers";
+
 export default store => {
-  return (name, factory) => {
+  return factory => {
+    const providers = getMapDefault(store, "providers", []);
+
     const instance = {
-      name,
       factory,
       index: 0
     };
 
-    store.set(name, instance);
+    providers.push(instance);
 
     return {
       withIndex: index => {

package/feature/transform.js

@@ -1,8 +1,8 @@
-import { getMapDeault } from "../utils";
+import { getMapDefault } from "../utils/helpers";
 
 export default store => {
   return (getter, deal) => {
-    const providers = getMapDeault(store, "providers", []);
+    const providers = getMapDefault(store, "providers", []);
 
     const provider = {
       getter,

package/features/datasource/object.js

@@ -1,22 +1,24 @@
 import feature from "../../feature";
 
-feature("datasource")("object", function(getOptions) {
-  const options = getOptions();
+feature
+  .datasource("object", function(getOptions) {
+    const options = getOptions();
 
-  const instance = {
-    watchs: [],
-    data: options.data // 这里只能关联options的data，因为data的转换表达式最终转换到options的对象里
-  };
+    const instance = {
+      watchs: [],
+      data: options.data // 这里只能关联options的data，因为data的转换表达式最终转换到options的对象里
+    };
 
-  instance.watchs.push(
-    this.$watch(
-      () => options.data,
-      value => {
-        instance.data = value;
-      },
-      { deep: true }
-    )
-  );
+    instance.watchs.push(
+      this.$watch(
+        () => options.data,
+        value => {
+          instance.data = value;
+        },
+        { deep: true }
+      )
+    );
 
-  return instance;
-}).withName("对象");
+    return instance;
+  })
+  .withName("对象");

package/features/datasource/request.js

@@ -3,63 +3,64 @@ import { loadSourceData } from "../../api/vjform";
 
 import feature from "../../feature";
 
-feature("datasource")("request", function(getOptions, context) {
-  const {
-    watchs = [],
-    autoload,
-    dev, // 开发模式
-    dataPath, // 数据路径
-    defaultData, // 默认数据
-    errorData // 异常数据
-  } = getOptions();
+feature
+  .datasource("request", function(getOptions, context) {
+    const {
+      watchs = [],
+      autoload,
+      dev, // 开发模式
+      dataPath, // 数据路径
+      defaultData, // 默认数据
+      errorData // 异常数据
+    } = getOptions();
 
-  const instance = {
-    loading: false,
-    data: null,
-    watchs: []
-  };
+    const instance = {
+      loading: false,
+      data: null,
+      watchs: []
+    };
 
-  const load = async () => {
-    if (dev) {
-      return;
-    }
+    const load = async () => {
+      if (dev) {
+        return;
+      }
 
-    const options = getOptions();
+      const options = getOptions();
 
-    instance.loading = true;
+      instance.loading = true;
 
-    try {
-      const res = await loadSourceData(options);
-      instance.loading = false;
-      instance.data = get(res, dataPath || "data") || defaultData;
-    } catch (e) {
-      instance.loading = false;
-      if (errorData !== undefined) {
-        instance.data = errorData;
+      try {
+        const res = await loadSourceData(options);
+        instance.loading = false;
+        instance.data = get(res, dataPath || "data") || defaultData;
+      } catch (e) {
+        instance.loading = false;
+        if (errorData !== undefined) {
+          instance.data = errorData;
+        }
       }
-    }
-  };
+    };
 
-  this.$nextTick(() => {
-    instance.data = defaultData || null;
+    this.$nextTick(() => {
+      instance.data = defaultData || null;
 
-    watchs.forEach(watch => {
-      instance.watchs.push(
-        this.$watch(
-          () => get(context, watch),
-          () => load()
-        )
-      );
-    });
+      watchs.forEach(watch => {
+        instance.watchs.push(
+          this.$watch(
+            () => get(context, watch),
+            () => load()
+          )
+        );
+      });
 
-    if (autoload) {
-      load();
-    }
-  });
+      if (autoload) {
+        load();
+      }
+    });
 
-  instance.load = load;
+    instance.load = load;
 
-  return instance;
-})
+    return instance;
+  })
   .withName("HTTP请求")
   .withDescription("发起HTTP请求");