mini-form-render 0.0.3

package/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  extends: ['@mpxjs'],
+  rules: {
+    // .mpx文件规则 https://mpx-ecology.github.io/eslint-plugin-mpx/rules/
+    'mpx/valid-wx-model': 0
+  },
+  overrides: [
+    {
+      files: ['**/*.js'],
+      rules: {
+        // .js文件规则 https://eslint.bootcss.com/docs/rules/
+      }
+    }
+  ]
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Huanyu Li
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# mini-form
+form component for mini-program

package/babel.config.json

@@ -0,0 +1,34 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "shippedProposals": true
+      }
+    ]
+  ],
+  "plugins": [
+    [
+      "@babel/transform-runtime",
+      {
+        "corejs": 3,
+        "version": "^7.10.4"
+      }
+    ],
+    "@mpxjs/babel-plugin-inject-page-events"
+  ],
+  "sourceType": "unambiguous",
+  "env": {
+    "test": {
+      "presets": [
+        [
+          "@babel/env",
+          {
+            "shippedProposals": true
+          }
+        ]
+      ]
+    }
+  }
+}

package/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "mini-form-render",
+  "version": "0.0.3",
+  "private": false,
+  "scripts": {
+    "serve": "mpx-cli-service serve:mp",
+    "build": "mpx-cli-service build:mp",
+    "lint": "eslint --ext .js,.ts,.mpx src/"
+  },
+  "dependencies": {
+    "@mpxjs/api-proxy": "^2.8.0",
+    "@mpxjs/core": "^2.8.0",
+    "@mpxjs/fetch": "^2.8.0",
+    "@mpxjs/pinia": "^2.8.0",
+    "@mpxjs/store": "^2.8.0",
+    "@mpxjs/utils": "^2.8.0",
+    "pinia": "^2.0.14",
+    "vue": "^2.6.14"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-transform-runtime": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/runtime-corejs3": "^7.10.4",
+    "@mpxjs/babel-plugin-inject-page-events": "^2.8.0",
+    "@mpxjs/eslint-config": "^1.0.5",
+    "@mpxjs/mpx-cli-service": "^1.0.0",
+    "@mpxjs/size-report": "^2.8.0",
+    "@mpxjs/vue-cli-plugin-mpx": "^1.0.0",
+    "@mpxjs/vue-cli-plugin-mpx-eslint": "^1.0.0",
+    "@mpxjs/vue-cli-plugin-mpx-mp": "^1.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "autoprefixer": "*",
+    "eslint": "^7.0.0",
+    "stylus": "^0.55.0",
+    "stylus-loader": "^6.1.0",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "browserslist": "ios >= 9, chrome >= 47"
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')({ remove: false })
+  ]
+}

package/src/app.mpx

@@ -0,0 +1,26 @@
+<script>
+import mpx, { createApp } from '@mpxjs/core'
+import apiProxy from '@mpxjs/api-proxy'
+
+mpx.use(apiProxy, { usePromise: true })
+
+createApp({
+  onLaunch() {
+    //
+  }
+})
+</script>
+
+<style>
+  /*此处编写全局样式*/
+</style>
+
+<script type="application/json">
+  {
+    "pages": [
+      "./pages/index",
+      "./pages/form-render",
+      "./pages/server-scheme"
+    ]
+  }
+</script>

package/src/components/basic-input.mpx

@@ -0,0 +1,35 @@
+<template>
+  <view class="basic-input">
+    <view class="^form-item-title">{{item.title}}</view>
+    <input type="text" wx:model="{{inputData}}" />
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  props: {
+    item: Object
+  },
+  data: {
+    inputData: ''
+  },
+  watch: {
+    inputData(val) {
+      this.triggerEvent('input', { value: val })
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+.basic-input
+  display flex
+</style>
+
+<script type="application/json">
+  {
+    "component": true
+  }
+</script>

package/src/components/basic-picker.mpx

@@ -0,0 +1,75 @@
+<template>
+  <view class="basic-picker">
+    <view class="^form-item-title">{{item.title}}</view>
+    <picker wx:model="{{resultIndex}}" wx:model-event="change" range="{{item.customData.pickerArr}}">
+      <view class="picker-box">
+        <view class="picker-show-title">
+          {{item.customData.pickerArr[resultIndex]}}
+        </view>
+        <image class="picker-title-arrow" src="../image/caret-right.svg" mode="widthFix"></image>
+      </view>
+    </picker>
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  props: {
+    item: Object
+  },
+  data: {
+    resultIndex: null,
+    resultValue: ''
+  },
+  created() {
+    this.resultIndex = this.item.defaultValue || 0
+  },
+  watch: {
+    resultIndex(val) {
+      if (val !== null) {
+        this.resultValue = this.item.customData.pickerArr[val]
+      }
+    },
+    item(val) {
+      const value = val.customData.pickerArr[this.resultIndex]
+      if (!value) {
+        this.resultIndex = 0
+      }
+      if (value !== this.resultValue) {
+        this.resultValue = value
+      }
+    },
+    resultValue(value) {
+      this.triggerEvent('input', { value })
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+.basic-picker
+  display flex
+  justify-content space-between
+
+  .picker-box
+    display flex
+    align-items center
+    .picker-show-title
+      font-size 30rpx
+      padding-left 300rpx
+      color #666
+
+.picker-title-arrow
+  display inline-block
+  width 28rpx
+  height 28rpx
+  margin-left 20rpx
+</style>
+
+<script type="application/json">
+  {
+    "component": true
+  }
+</script>

package/src/components/form.mpx

@@ -0,0 +1,135 @@
+<template>
+  <view class="mini-form-container">
+    <view wx:for="{{scheme.properties}}">
+      <view class="mini-form-item {{index !== scheme.properties.length - 1 ? 'retina-border-bottom' : ''}}">
+        <basic-picker wx:if="{{item.widget === 'picker'}}" item="{{item}}" wx:model="{{formRes[item.key]}}"/>
+        <basic-input wx:else item="{{item}}" wx:model="{{formRes[item.key]}}"/>
+      </view>
+    </view>
+    <!--<button bindtap="handleTap">提交</button>-->
+  </view>
+</template>
+
+<script>
+import { toPureObject, createComponent } from '@mpxjs/core'
+
+createComponent({
+  props: {
+    scheme: {
+      type: Object
+    }
+  },
+  data: {
+    formRes: {}
+  },
+  methods: {
+    parseScheme(scheme) {
+      this.formRes = {}
+      const properties = scheme.properties || []
+      properties.forEach(item => {
+        const key = item.key
+        this.$set(this.formRes, key)
+      })
+    }
+    // handleTap() {
+    //   console.log('formRes', this.formRes)
+    // }
+  },
+  watch: {
+    scheme: {
+      handler(scheme) {
+        this.parseScheme(scheme)
+      },
+      immediate: true
+    },
+    formRes: {
+      handler(newVal) {
+        const formResult = toPureObject(newVal)
+        // console.log('trigger form change event:', formResult)
+        this.triggerEvent('formchange', formResult)
+      },
+      deep: true
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+.mini-form-container
+  .mini-form-item
+    padding 24rpx 0
+
+  .form-item-title
+    font-size 30rpx
+    width 200rpx
+    color #333
+
+// 边框默认颜色
+$defaultBorderColor = rgba(0, 0, 0, 0.18)
+
+// retina 边框函数基础声明，不包含 border 部分，主要用于在 retina-border 函数里继承
+.retina-border-basic
+  position: relative
+  &::before
+    content: ''
+    position: absolute
+    width: 100%
+    height: 100%
+    top: 0
+    left:0
+    transform-origin: left top
+    box-sizing: border-box
+    pointer-events: none
+  @media
+  (-webkit-min-device-pixel-ratio 2),
+  (min-resolution 2dppx)
+    &::before
+      width: 200%
+      height: 200%
+      transform: scale(.5)
+  @media
+  (-webkit-min-device-pixel-ratio 3),
+  (min-resolution 3dppx)
+    &::before
+      width: 300%
+      height: 300%
+      transform: scale(1 / 3)
+
+// 设置圆角（如果圆角大于0，则添加圆角的代码）
+retina-border-radius(borderRadius)
+  if unit(borderRadius, px) > 0
+    border-radius: borderRadius
+    @media
+    (-webkit-min-device-pixel-ratio 2),
+    (min-resolution 2dppx)
+      &::before
+        border-radius: unit(borderRadius, px) * 2
+    @media
+    (-webkit-min-device-pixel-ratio 3),
+    (min-resolution 3dppx)
+      &::before
+        border-radius: unit(borderRadius, px) * 3
+
+// retina 边框函数声明
+retina-border(borderWidth = 1px, borderStyle = solid, borderColor = $defaultBorderColor, borderRadius = 0)
+  @extends .retina-border-basic
+  retina-border-radius(borderRadius)
+  &::before
+    border-width: borderWidth
+    border-style: borderStyle
+    border-color: borderColor
+
+// 下边框
+.retina-border-bottom
+  retina-border(0 0 1px)
+</style>
+
+<script type="application/json">
+{
+  "component": true,
+  "usingComponents": {
+    "basic-input": "./basic-input",
+    "basic-picker": "./basic-picker"
+  }
+}
+</script>

package/src/components/list.mpx

@@ -0,0 +1,23 @@
+<template>
+  <view class="">
+
+  </view>
+</template>
+
+<script>
+import { createComponent } from '@mpxjs/core'
+
+createComponent({
+  data: {}
+})
+</script>
+
+<style lang="stylus">
+
+</style>
+
+<script type="application/json">
+  {
+    "component": true
+  }
+</script>

package/src/image/caret-right.svg

@@ -0,0 +1,3 @@
+<svg class="w-6 h-6" fill="[object Object]" id="Flat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/>
+</svg>

package/src/pages/form-render.mpx

@@ -0,0 +1,47 @@
+<template>
+  <view class="form-demo-page">
+    <view style="content: ''; overflow: hidden;"></view>
+
+    <view class="form-demo-container">
+      <view class="form-title">本地scheme渲染表单测试</view>
+      <form-render class="form-render-container" scheme="{{formScheme}}" />
+    </view>
+  </view>
+</template>
+
+<script>
+import { createPage } from '@mpxjs/core'
+import formScheme from '../test/scheme1'
+
+createPage({
+  data: {
+    formScheme
+  },
+  onLoad() {
+    console.log('onLoad')
+  }
+})
+</script>
+
+<style lang="stylus">
+page
+  background-color #f5f5f5
+
+.form-demo-container
+  background #fff
+  margin 24rpx
+  border-radius 16rpx
+  padding 24rpx
+
+.form-render-container {
+  margin-top 24rpx
+}
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "form-render": "../components/form"
+    }
+  }
+</script>

package/src/pages/index.mpx

@@ -0,0 +1,48 @@
+<template>
+  <view class="form-demo-index">
+    <view style="content: ''; overflow: hidden;"></view>
+
+    <view class="demo-index">
+      <view bindtap="handleJump('render')">跳转去本地表单渲染测试页</view>
+      <view bindtap="handleJump('server')">跳转去服务端协议渲染测试</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import mpx, { createPage } from '@mpxjs/core'
+
+createPage({
+  onLoad() {
+    console.log('onLoad')
+  },
+  methods: {
+    handleJump(action) {
+      if (action === 'render') {
+        mpx.navigateTo({ url: '/pages/form-render' })
+      } else if (action === 'server') {
+        mpx.navigateTo({ url: '/pages/server-scheme' })
+      }
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+page {
+  background-color: #f5f5f5;
+}
+
+.form-container {
+  background: #fff;
+  margin: 24rpx;
+  border-radius: 16rpx;
+  padding: 24rpx;
+}
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {}
+  }
+</script>

package/src/pages/server-scheme.mpx

@@ -0,0 +1,75 @@
+<template>
+  <view class="form-demo-page">
+    <view style="content: ''; overflow: hidden;"></view>
+
+    <view class="form-demo-container">
+      <view class="form-title">服务端联动表单渲染测试</view>
+      <form-render class="form-render-container" scheme="{{formScheme}}" bindformchange="handleFormChange"/>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createPage } from '@mpxjs/core'
+import serverScheme from '../test/server-relation-scheme'
+
+createPage({
+  data: {
+    formScheme: [],
+    formResult: null
+  },
+  onLoad() {
+    console.log('onLoad, server scheme is:', serverScheme)
+    // this.formScheme = scheme1
+    this.initFormScheme()
+  },
+  watch: {
+    formResult() {
+      this.initFormScheme()
+    }
+  },
+  methods: {
+    initFormScheme() {
+      const formProperties = []
+      serverScheme.properties.forEach(item => {
+        if (item.condition) {
+          const condition = item.condition
+          if (this.formResult && this.formResult[condition.key] === condition.value) {
+            formProperties.push(item)
+          }
+        } else {
+          formProperties.push(item)
+        }
+      })
+      this.formScheme = { properties: formProperties }
+    },
+    handleFormChange(e) {
+      console.log('form change handler: ', e.detail)
+      this.formResult = e.detail
+    }
+  }
+})
+</script>
+
+<style lang="stylus">
+page
+  background-color #f5f5f5
+
+.form-demo-container
+  background #fff
+  margin 24rpx
+  border-radius 16rpx
+  padding 24rpx
+
+.form-render-container {
+  margin-top 24rpx
+}
+</style>
+
+<script type="application/json">
+  {
+    "usingComponents": {
+      "form-render": "../components/form"
+    }
+  }
+</script>

package/src/test/scheme1.js

@@ -0,0 +1,22 @@
+export default {
+  properties: [
+    {
+      key: 'model',
+      type: 'string',
+      title: '模型选择',
+      widget: 'picker',
+      customData: {
+        pickerArr: ['绘梦', '二次元', '真人']
+      }
+    },
+    {
+      key: 'template',
+      type: 'string',
+      title: '模板选择',
+      widget: 'picker',
+      customData: {
+        pickerArr: ['油画', '水彩', '风景']
+      }
+    }
+  ]
+}

package/src/test/server-relation-scheme.js

@@ -0,0 +1,33 @@
+// 服务端下发且需要联动的scheme，前端整理后进行渲染
+export default {
+  properties: [
+    {
+      key: 'model',
+      title: '模型选择',
+      widget: 'picker',
+      customData: {
+        pickerArr: ['绘梦', '二次元', '真人']
+      },
+      children: [
+        {
+          key: 'template',
+          title: '模板选择',
+          widget: 'picker',
+          condition: '绘梦',
+          customData: {
+            pickerArr: ['油画', '水彩', '风景']
+          }
+        },
+        {
+          key: 'template',
+          title: '模板选择',
+          widget: 'picker',
+          condition: '二次元',
+          customData: {
+            pickerArr: ['测试1', '测试2', '测试3']
+          }
+        }
+      ]
+    }
+  ]
+}

package/static/ali/mini.project.json

@@ -0,0 +1,4 @@
+{
+  "enableAppxNg": true,
+  "component2": true
+}

package/static/dd/project.config.json

@@ -0,0 +1,15 @@
+{
+  "setting": {
+    "newFeature": true,
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false,
+    "checkSiteMap": false,
+    "autoAudits": false
+  },
+  "appid": "touristappid",
+  "projectname": "mpxdemo",
+  "description": "A mpx project",
+  "condition": {}
+}

package/static/swan/project.swan.json

@@ -0,0 +1,14 @@
+{
+  "compilation-args": {
+    "common": {
+      "ignoreTransJs": true,
+      "ignoreUglify": true
+    },
+    "options": [],
+    "selected": -3
+  },
+  "projectname": "mpxdemo",
+  "setting": {
+    "urlCheck": true
+  }
+}

package/static/tt/project.config.json

@@ -0,0 +1,11 @@
+{
+  "setting": {
+    "urlCheck": true,
+    "es6": false,
+    "postcss": false,
+    "minified": false,
+    "newFeature": true
+  },
+  "appid": "testAppId",
+  "projectname": "mpxdemo"
+}

package/static/wx/project.config.json

@@ -0,0 +1,62 @@
+{
+  "setting": {
+    "newFeature": true,
+    "urlCheck": true,
+    "es6": false,
+    "postcss": true,
+    "minified": false,
+    "checkSiteMap": false,
+    "autoAudits": false,
+    "coverView": true,
+    "lazyloadPlaceholderEnable": false,
+    "preloadBackgroundData": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "enhance": false,
+    "useMultiFrameRuntime": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "useStaticServer": true,
+    "showES6CompileOption": false,
+    "checkInvalidKey": true,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "disableUseStrict": false,
+    "useCompilerPlugins": false,
+    "minifyWXML": true,
+    "compileHotReLoad": true,
+    "ignoreUploadUnusedFiles": false,
+    "condition": false
+  },
+  "appid": "wx74053e55da62dcd3",
+  "projectname": "mpxdemo",
+  "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "服务端下发",
+          "pathName": "pages/server-scheme",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  },
+  "compileType": "miniprogram",
+  "libVersion": "2.28.0",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  }
+}

package/vue.config.js

@@ -0,0 +1,16 @@
+const { defineConfig } = require('@vue/cli-service')
+const path = require('path')
+module.exports = defineConfig({
+  pluginOptions: {
+    mpx: {
+      srcMode: 'wx',
+      plugin: {
+        customOutputPath(type, name, hash, ext) {
+          // console.log(1111, path.join(type + 's', name, 'index' + ext))
+          return path.join(type + 's', name, 'index' + ext)
+        }
+      },
+      loader: {}
+    }
+  }
+})