v0.2版本更新: 1. fix bug 2. 【增强】 增加组件 form-page 表单页 3. 【增强】 增加组件 actionsh…

…eet 模拟原生actionsheet 4. 【优化】 优化 slideview 右滑操作UI

src/actionsheet/actionsheet.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/actionsheet/actionsheet.less

@@ -0,0 +1,13 @@
+@import "../weui-wxss/src/style/widget/weui-tips/weui-mask.wxss";
+@import "../weui-wxss/src/style/widget/weui-tips/weui-actionsheet.wxss";
+
+.weui-mask.weui-mask_hidden {
+  opacity: 0;
+  transform: scale3d(1, 1, 0)
+}
+.weui-mask{
+  opacity: 1;
+  transform: scale3d(1, 1, 1);
+  transition: all 0.3s;
+}
+

src/actionsheet/actionsheet.ts

@@ -0,0 +1,71 @@
+Component({
+  options: {
+    multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+    addGlobalClass: true
+  },
+  properties: {
+    title: { // 标题
+      type: String,
+      value: ''
+    },
+    showCancel: {  // 是否显示取消按钮
+      type: Boolean,
+      value: true
+    },
+    cancelText: { // 取消按钮文案
+      type: String,
+      value: '取消'
+    },
+    maskClass: { // 遮罩层class
+      type: String,
+      value: ''
+    },
+    extClass: { // 弹出窗 class
+      type: String,
+      value: ''
+    },
+    maskClosable: { // 点击遮罩 关闭 actionsheet
+      type: Boolean,
+      value: true,
+    },
+    mask: { // 是否需要 遮罩层
+      type: Boolean,
+      value: true
+    },
+    show: { // 是否开启 actionsheet
+      type: Boolean,
+      value: false
+    },
+    actions: { // actions 列表
+      type: Array,
+      value: [], // {text, extClass}
+      observer: '_groupChange'
+    }
+  },
+
+  methods: {
+    _groupChange(e) {
+      // 支持 一维数组 写法
+      if(e.length > 0 && typeof e[0] !== 'string' && !(e[0] instanceof Array)) {
+        this.setData({
+          actions: [this.data.actions]
+        })
+      }
+    },
+    buttonTap(e) {
+      const { value, groupindex, index } = e.currentTarget.dataset
+      this.triggerEvent('actiontap', { value, groupindex, index })
+    },
+    closeActionSheet(e) {
+      const { type } = e.currentTarget.dataset
+      if(this.data.maskClosable || type) {
+        // 点击 action 里面的 取消
+        this.setData({
+          show: false
+        })
+        // 关闭回调事件
+        this.triggerEvent('close')
+      }
+    }
+  }
+})

src/actionsheet/actionsheet.wxml

@@ -0,0 +1,50 @@
+<wxs module="utils">
+    var join = function(a,b) {
+        return a+b
+    };
+    var isNotSlot = function(v) {
+        return typeof v !== 'string'
+    }
+    module.exports = {
+        join: join,
+        isNotSlot: isNotSlot
+    }
+</wxs>
+
+<view wx:if="{{mask}}" class="weui-mask {{show ? '' : 'weui-mask_hidden'}} {{maskClass}}" bindtap="closeActionSheet"></view>
+<view class="weui-actionsheet {{show ? 'weui-actionsheet_toggle' : ''}} {{extClass}}">
+    <!-- 标题 -->
+    <block  wx:if="{{title}}"> 
+        <view class="weui-actionsheet__title">
+            <view class="weui-actionsheet__title-text">{{title}}</view>
+        </view>
+    </block>
+    <slot name="title" wx:else></slot>
+    <view 
+        class="{{ !showCancel && index === actions.length-1 ? 'weui-actionsheet__action' : 'weui-actionsheet__menu' }}"
+        wx:key="{{index}}" 
+        wx:for-item="actionItem" 
+        wx:for-index="index"
+        wx:for="{{actions}}"
+    >
+        <block wx:if="{{utils.isNotSlot(actionItem)}}">
+            <view
+                class="weui-actionsheet__cell {{item.type === 'warn' ? 'weui-actionsheet__cell_warn' : '' }}" 
+                wx:key="{{item.text}}" 
+                wx:for="{{actionItem}}"
+                wx:for-index="actionIndex"
+                data-groupindex="{{index}}"
+                data-index="{{actionIndex}}" 
+                data-value="{{item.value}}"
+                bindtap="buttonTap"
+            >
+                {{item.text}}
+            </view>  
+        </block>
+        <slot name="{{actionItem}}" wx:else></slot>
+    </view>
+    <!-- 取消按钮 -->
+    <view class="weui-actionsheet__action" wx:if="{{showCancel}}">
+        <view class="weui-actionsheet__cell" data-type="close" id="iosActionsheetCancel" bindtap="closeActionSheet">{{cancelText}}</view>
+    </view>
+</view>

src/badge/badge.json

@@ -1,3 +1,4 @@
 {
+    "component": true,
     "usingComponents": {}
 }

src/cell/cell.ts

@@ -20,6 +20,10 @@ Component({
             type: String,
             value: ''
         },
+        bodyClass: {
+            type: String,
+            value: ''
+        },
         icon: {
             type: String,
             value: '',
@@ -55,6 +59,18 @@ Component({
         inline: { // 左右布局样式还是上下布局
             type: Boolean,
             value: true
+        },
+        hasHeader: {
+            type: Boolean,
+            value: true
+        },
+        hasFooter: {
+            type: Boolean,
+            value: true
+        },
+        hasBody: {
+            type: Boolean,
+            value: true
         }
     },
     relations: {

src/cell/cell.wxml

@@ -1,6 +1,6 @@
 <block wx:if="{{link}}">
     <view bindtap="navigateTo" class="weui-cell weui-cell_access {{extClass}} {{outerClass}}{{inForm ? ' weui-cell-inform' : ''}}{{inline ? '' : ' .weui-cell_label-block'}}" hover-class="{{hover ? 'weui-cell_active' : ''}}">
-        <view class="weui-cell__hd {{iconClass}}">
+        <view wx:if="{{hasHeader}}" class="weui-cell__hd {{iconClass}}">
             <block wx:if="{{icon}}">
                 <image src="{{icon}}" class="weui-cell__icon" mode="aspectFit"></image>
             </block>
@@ -20,13 +20,13 @@
                 </block>
             </block>
         </view>
-        <view class="weui-cell__bd">
+        <view wx:if="{{hasBody}}" class="weui-cell__bd">
             <block wx:if="{{value}}">{{value}}</block>
             <block wx:else>
                 <slot></slot>
             </block>
         </view>
-        <view class="weui-cell__ft weui-cell__ft_in-access {{footerClass}}">
+        <view wx:if="{{hasFooter}}" class="weui-cell__ft weui-cell__ft_in-access {{footerClass}}">
             <block wx:if="{{footer}}">{{footer}}</block>
             <block wx:else>
                 <slot name="footer"></slot>
@@ -36,7 +36,7 @@
 </block>
 <block wx:else>
     <view bindtap="navigateTo" class="weui-cell {{showError && error ? 'weui-cell_warn' : ''}} {{inForm ? 'weui-cell-inform' : ''}} {{extClass}} {{outerClass}}" hover-class="{{hover ? 'weui-cell_active' : ''}}">
-        <view class="weui-cell__hd {{iconClass}}">
+        <view wx:if="{{hasHeader}}" class="weui-cell__hd {{iconClass}}">
             <block wx:if="{{icon}}">
                 <image src="{{icon}}" class="weui-cell__icon" mode="aspectFit"></image>
             </block>
@@ -56,13 +56,13 @@
                 </block>
             </block>
         </view>
-        <view class="weui-cell__bd">
+        <view wx:if="{{hasBody}}" class="weui-cell__bd {{bodyClass}}">
             <block wx:if="{{value}}">{{value}}</block>
             <block wx:else>
                 <slot></slot>
             </block>
         </view>
-        <view class="weui-cell__ft {{footerClass}}">
+        <view wx:if="{{hasFooter}}" class="weui-cell__ft {{footerClass}}">
             <block wx:if="{{footer}}">{{footer}}</block>
             <block wx:else>
                 <slot name="footer"></slot>

src/cells/cells.ts

@@ -20,7 +20,9 @@ Component({
     data: {
         firstItem: null,
         checkboxCount: 0,
-        checkboxIsMulti: false
+        checkboxIsMulti: false,
+        outerClass: '',
+        childClass: '',
     },
     relations: {
         '../cell/cell': {
@@ -34,6 +36,9 @@ Component({
                 }
             },
         },
+        '../form-page/form-page': {
+            type: 'ancestor',
+        },
         '../checkbox-group/checkbox-group': {
             type: 'descendant',
             linked(target) {
@@ -55,6 +60,16 @@ Component({
             this.setData({
                 checkboxIsMulti: multi
             })
-        }
+        },
+        setCellsClass(className) {
+            this.setData({
+                childClass: className
+            })
+        },
+        setOuterClass(className) {
+            this.setData({
+                outerClass: className
+            })
+        },
     }
 })

src/cells/cells.wxml

@@ -1,8 +1,8 @@
-<view class="{{extClass}}">
+<view class="{{extClass}} weui-cells__group {{outerClass}} {{childClass}}">
     <view wx:if="{{title}}" class="weui-cells__title">{{title}}</view>
-    <view class="weui-cells weui-cells_after-title {{checkboxCount > 0 && checkboxIsMulti ? 'weui-cells_checkbox' : ''}}">
+    <view class="weui-cells weui-cells_after-title weui-cells_form {{checkboxCount > 0 && checkboxIsMulti ? 'weui-cells_checkbox' : ''}}">
         <slot></slot>
     </view>
-    <view v-if="{{footer}}" class="weui-cells__tips">{{footer}}</view>
-    <template v-else><slot name="footer"></slot></template>
+    <view wx:if="{{footer}}" class="weui-cells__tips">{{footer}}</view>
+    <slot name="footer" wx:else></slot>
 </view>

src/checkbox-group/checkbox-group.ts

@@ -54,6 +54,7 @@ Component({
                 if (!this.data.parentCell) {
                     this.data.parentCell = target
                 }
+                this.setParentCellsClass()
             },
             unlinked(target) {
                 this.data.parentCell = null; // 方便内存回收
@@ -85,6 +86,12 @@ Component({
                 this.triggerEvent('change', {value: val}, {})
             }
         },
+        setParentCellsClass() {
+            const className = this.data.multi ? 'weui-cells_checkbox' : ''
+            if (this.data.parentCell) {
+                this.data.parentCell.setCellsClass(className)
+            }
+        },
         _multiChange(multi) {
             this.data.targetList.forEach(target => {
                 target.setMulti(multi)

src/checkbox/checkbox.wxml

@@ -1,4 +1,4 @@
-<mp-cell bindtap="checkedChange" footer-class="{{!multi ? 'weui-check__ft_in-radio' : ''}}" icon-class="{{multi ? 'weui-check__hd_in-checkbox' : ''}}" ext-class="weui-check__label {{outerClass}} {{extClass}}">
+<mp-cell has-footer="{{!multi}}" has-header="{{multi}}" bindtap="checkedChange" footer-class="{{!multi ? 'weui-check__ft_in-radio' : ''}}" icon-class="{{multi ? 'weui-check__hd_in-checkbox' : ''}}" ext-class="weui-check__label {{outerClass}} {{extClass}} {{!multi ? 'weui-cell_radio' : 'weui-cell_checkbox'}}">
 
   <view slot="icon" wx:if="{{multi}}">
     <checkbox value="{{value}}" checked="{{checked}}" disabled="{{disabled}}" color="{{color}}" class="weui-check"></checkbox>

src/form-page/form-page.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

src/form-page/form-page.less

@@ -0,0 +1,3 @@
+@import "../weui-wxss/src/style/widget/weui-page/weui-form.wxss";
+
+

src/form-page/form-page.ts

@@ -0,0 +1,32 @@
+Component({
+  options: {
+    addGlobalClass: true,
+    multipleSlots: true,
+  },
+  properties: {
+    title: { // Msg 标题
+      type: String,
+      value: '',
+    },
+    subtitle: { // icon 的 type
+      type: String,
+      value: ''
+    },
+  },
+  relations: {
+    '../cells/cells': {
+      type: 'descendant',
+      linked(target) {
+          if (!this.data.firstItem) {
+              this.data.firstItem = target
+          }
+          if (target !== this.data.firstItem) {
+              target.setOuterClass('weui-cells__group_wxss')
+          }
+      },
+  },
+  },
+  data: {
+    firstItem: null
+  },
+})

src/form-page/form-page.wxml

@@ -0,0 +1,33 @@
+<view class="weui-form">
+    <block wx:if="{{title || subtitle}}">
+      <view class="weui-form__text-area">
+          <view class="weui-form__title">{{title}}</view>
+          <view class="weui-form__desc">{{subtitle}}</view>
+      </view>
+    </block>
+    <block wx:else>
+      <view class="weui-form__text-area">
+        <slot name="title"></slot>
+      </view>
+    </block>
+  <view class="weui-form__control-area">
+    <view class="weui-cells__group weui-cells__group_form">
+        <slot></slot>
+    </view>
+  </view>
+  <view class="weui-form__tips-area">
+    <slot name="tips"></slot>
+  </view>
+  <view class="weui-form__opr-area">
+    <slot name="button"></slot>
+  </view>
+  <view class="weui-form__tips-area">
+    <slot name="suffixtips"></slot>
+  </view>
+  <view class="weui-form__extra-area">
+    <view class="weui-footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</view>
+

src/form/form-validator.ts

@@ -5,7 +5,7 @@ const toString = Object.prototype.toString
 const validateSingleRule = (rule: any, value:any, param:any = null, models = null) => {
     let message = ''
     for (const ruleKey in rule) {
-        if (ruleKey === 'validator' || ruleKey === 'name' || ruleKey === 'message') continue
+        if (ruleKey === 'name' || ruleKey === 'message') continue
         const validateMethod = typeof rule.validator !== 'undefined' ? rule.validator : Validator[ruleKey]
         if (typeof validateMethod === 'function') {
             message = validateMethod(rule, value, param, models)