mini-form-render 0.0.4 → 0.0.6

package/src/components/form.mpx

@@ -1,135 +1,140 @@
-<template>
-  <view class="mini-form-container">
-    <view wx:for="{{scheme.properties}}" wx:key="key">
-      <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>
+<template>
+  <view class="mini-form-container">
+    <view wx:for="{{scheme.properties}}" wx:key="key">
+      <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) {
+      const oldFormRes = this.formRes
+      this.formRes = {}
+      const properties = scheme.properties || []
+      properties.forEach(item => {
+        const key = item.key
+        this.$set(this.formRes, key, oldFormRes[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
+
+@media(prefers-color-scheme: dark)
+  .form-item-title
+    color hsla(0, 0%, 100%, .8)
+
+// 边框默认颜色
+$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/pages/form-render.mpx

@@ -1,47 +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>
+<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

@@ -1,48 +1,51 @@
-<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>
+<template>
+  <view class="form-demo-index">
+    <view style="content: ''; overflow: hidden;"></view>
+
+    <view class="demo-index">
+      <view bindtap="handleJump('render')">跳转去本地表单渲染测试页</view>
+      <view bindtap="handleJump('logic')">跳转去本地逻辑渲染测试页</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 === 'logic') {
+        mpx.navigateTo({ url: '/pages/js-logic-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/js-logic-render.mpx

@@ -0,0 +1,59 @@
+<template>
+  <view class="form-demo-page">
+    <view style="content: ''; overflow: hidden;"></view>
+
+    <view class="form-demo-container">
+      <view class="form-title">JS逻辑控制scheme渲染表单测试</view>
+      <mini-form-render
+        class="form-render-container"
+        scheme="{{formScheme}}"
+        bindformchange="handleFormChange"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import { createPage } from '@mpxjs/core'
+import getFormScheme from '../test/paint-form'
+
+createPage({
+  data: {
+    formScheme: getFormScheme({})
+  },
+  onLoad() {
+    console.log('onLoad')
+  },
+  methods: {
+    handleFormChange(e) {
+      const formResult = e.detail
+      console.log('form changed: ', formResult)
+      this.formScheme = getFormScheme(formResult)
+      this.formResult = formResult
+    }
+  }
+})
+</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": {
+      "mini-form-render": "../components/form"
+    }
+  }
+</script>