feat:更新版本v0.5.10=>v0.5.11

.eslintrc.js

@@ -3,7 +3,8 @@ module.exports = {
         "browser": true,
         "commonjs": true,
         "es6": true,
-        "node": true
+        "node": true,
+        "jest": true
     },
     "extends": "eslint:recommended",
     "parserOptions": {

README.md

@@ -17,7 +17,7 @@
 <div align="center">
 
 ![](https://img.shields.io/badge/build-passing-00d508.svg)
-![](https://img.shields.io/badge/version-0.5.9-3963bc.svg)
+![](https://img.shields.io/badge/version-0.5.11-3963bc.svg)
 ![](https://img.shields.io/badge/license-MIT-3963bc.svg)
 
 </div>
@@ -39,7 +39,7 @@ Lin UI 是基于 **微信小程序原生语法** 实现的组件库。遵循简
 
 ## 最新版本
 
-核心库：0.5.9
+核心库：0.5.11
 
 示例工程：0.0.1-alpha.2
 

build/build-prod.js

@@ -4,18 +4,19 @@ const cssmin = require('gulp-clean-css');
 const rename = require('gulp-rename');
 const componentData = require('./build-tool');
 const result = `{common,behaviors,${componentData()}}`;
+const isCustom = result == `{common,behaviors}`;
 
 // js => js
 gulp.task('dispose-js', () => {
-  const path = result ? `../src/${result}/*.js` : '../src/**/*.js';
+  const path = isCustom ? `../src/${result}/*.js` : '../src/**/*.js';
   return gulp.src(path)
     .pipe(gulp.dest('../dist/'));
 });
 
 
 gulp.task('dispose-wxss', () => {
-  const path = result ? `../src/${result}/*.less` : '../src/**/*.less',
-    remainPath = result ? `!../src/${result}/_*.less` : '!../src/**/_*.less';
+  const path = isCustom ? `../src/${result}/*.less` : '../src/**/*.less',
+    remainPath = isCustom ? `!../src/${result}/_*.less` : '!../src/**/_*.less';
   return gulp.src([path, remainPath])
     .pipe(less())
     .pipe(cssmin())
@@ -27,28 +28,28 @@ gulp.task('dispose-wxss', () => {
 
 // wxs => wxs
 gulp.task('dispose-wxs', () => {
-  const path = result ? `../src/${result}/*.wxs` : '../src/**/*.wxs';
+  const path = isCustom ? `../src/${result}/*.wxs` : '../src/**/*.wxs';
   return gulp.src(path)
     .pipe(gulp.dest('../dist/'));
 });
 
 // json => json
 gulp.task('dispose-json', () => {
-  const path = result ? `../src/${result}/*.json` : '../src/**/*.json';
+  const path = isCustom ? `../src/${result}/*.json` : '../src/**/*.json';
   return gulp.src(path)
     .pipe(gulp.dest('../dist/'));
 });
 
 // wxml => wxml
 gulp.task('dispose-wxml', () => {
-  const path = result ? `../src/${result}/*.wxml` : '../src/**/*.wxml';
+  const path = isCustom ? `../src/${result}/*.wxml` : '../src/**/*.wxml';
   return gulp.src(path)
     .pipe(gulp.dest('../dist/'));
 });
 
 // copy
 gulp.task('dispose-copy', () => {
-  const path = result ? `../src/${result}/image/**` : '../src/**/image/**';
+  const path = isCustom ? `../src/${result}/image/**` : '../src/**/image/**';
   return gulp.src(path)
     .pipe(gulp.dest('../dist/'));
 });

dist/action-sheet/index.js

@@ -0,0 +1,125 @@
+Component({
+  externalClasses: ['l-class-title', 'l-class-item', 'l-class-cancel'],
+  properties: {
+    locked: Boolean,
+    showCancel: Boolean,
+    show: Boolean,
+    itemList: Array,
+    cancelText: {
+      type: String,
+      value: '取消'
+    },
+    title: String,
+    openApi: {
+      type: Boolean,
+      value: true,
+    }
+  },
+  data: {
+    success: '',
+    fail: '',
+    isIphoneX: false
+  },
+  attached() {
+    if (this.data.openApi) {
+      this.initActionSheet();
+    }
+    this.initUIAdapter();
+  },
+
+  lifetimes: {
+    show() {
+      if (this.data.openApi) {
+        this.initActionSheet();
+      }
+
+    },
+  },
+  methods: {
+    /**
+   * 区分UI尺寸
+   */
+    initUIAdapter() {
+      wx.getSystemInfo({
+        success: (res) => {
+          this.setData({
+            isIphoneX: res.model == 'iPhone X' ? true : false,
+          });
+        }
+      });
+    },
+    initActionSheet() {
+      const config = {
+        itemList: [],
+        success: null,
+        fail: null,
+        title: '',
+        locked: false,
+        cancelText: '取消',
+        showCancel: false
+      };
+      wx.lin = wx.lin || {};
+      wx.lin.showActionSheet = (options={}) => {
+        const {
+          itemList = config.itemList,
+          success = config.success,
+          fail = config.fail,
+          title = config.title,
+          locked = config.locked,
+          cancelText = config.cancelText,
+          showCancel = config.showCancel,
+        } = options;
+        this.setData({
+          itemList: itemList.slice(0, 10),
+          success,
+          fail,
+          title,
+          locked,
+          cancelText,
+          showCancel,
+          show: true,
+        });
+        return this;
+      };
+    },
+    handleClickItem(e) {
+      const {
+        success
+      } = this.data;
+      success && success({ ...e.currentTarget.dataset });
+      this.triggerEvent('linitemtap', { ...e.currentTarget.dataset });
+      this._hideActionSheet();
+    },
+
+    _showActionSheet() {
+      this.setData({
+        show: true
+      });
+    },
+
+    _hideActionSheet() {
+      this.setData({
+        show: false
+      });
+    },
+
+    handleClickCancel() {
+      const {
+        fail
+      } = this.data;
+      fail && fail({
+        errMsg: 'showactionsheet:fail cancel'
+      });
+      this.triggerEvent('lincancel', {
+        errMsg: 'showactionsheet:fail cancel'
+      });
+      this._hideActionSheet();
+    },
+
+    handleClickPopUp() {
+      if (!this.data.locked) {
+        this.handleClickCancel();
+      }
+    },
+  }
+});

dist/action-sheet/index.json

@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "usingComponents": {
+        "l-icon":"../icon/index",
+        "l-popup":"../popup/index",
+        "l-button":"../button/index"
+    }
+  }

dist/action-sheet/index.wxml

@@ -0,0 +1,25 @@
+<l-popup show="{{show}}" showMask="{{true}}" contentAlign="bottom" locked="{{locked}}" bind:lintap="handleClickPopUp">
+    <view class='l-action-sheet'>
+        <view  class="l-item-button l-class-title" wx:if="{{title}}">
+            {{ title }}
+        </view>
+        <view class="" wx:for="{{ itemList }}" wx:key="{{ item.name }}">
+            <l-button bind:lintap="handleClickItem" data-index="{{ index }}" data-item="{{ item }}" open-type="{{ item.openType }}" icon="{{ item.icon }}" type="ghost" size="large" special="{{true}}" long>
+                <view style="{{ item.color ? 'color: ' + item.color : '' }}" class="l-item-button l-class-item {{item.image || item.icon ? 'l-image-button':''}}">
+                    <image wx:if="{{item.image}}" class="l-button-image" src="{{item.image}}" style="{{item.imageStyle}}"/>
+                    <l-icon 
+                        wx:elif="{{ item.icon }}" 
+                        name="{{ item.icon }}" 
+                        l-class="l-item-button"
+                        color="{{item.color}}"></l-icon>  
+                    <text class="l-button-text">{{ item.name }}</text>
+                </view>
+            </l-button>
+        </view>
+        <view class="l-cancel l-class-cancel {{isIphoneX ? 'l-cancel-x':''}}" wx:if="{{ showCancel }}">
+            <l-button type="ghost" size="large" long="true" bind:lintap="handleClickCancel" special="{{true}}">
+                <view class="l-item-button l-cancel-button">{{ cancelText }}</view>
+            </l-button>
+        </view>
+    </view>
+</l-popup>

dist/action-sheet/index.wxss

@@ -0,0 +1 @@
+.l-action-sheet{background:#f7f7f7}.l-item-button{height:88rpx;line-height:88rpx;text-align:center;background:#fff;border-bottom:2rpx solid #f3f3f3;font-size:28rpx;color:#45526b;display:flex;align-items:center;justify-content:center;width:100%}.l-cancel{margin-top:12rpx}.l-cancel-x .l-item-button{padding-bottom:44rpx}.l-image-button>text{margin-left:20rpx}

dist/avatar/index.js

@@ -0,0 +1,86 @@
+Component({
+  externalClasses: ['l-class', 'l-class-text'],
+  properties: {
+    icon: String,
+    text: String,
+    iconStyle: {
+      type: String,
+      observer: '_parseCSSText'
+    },
+    src: String,
+    openData: {
+      type: Array,
+      observer: '_initOpenData'
+    },
+    shape: {
+      type: String,
+      value: 'circle'
+    },
+    mode: {
+      type: String,
+      value: 'scaleToFill'
+    },
+    size: {
+      type: Number,
+      value: 120,
+    },
+    placement: {
+      type: String,
+      value: 'right'
+    },
+  },
+  data: {
+    _isHaveUserNickName: false,
+    _isHaveUserAvatarUrl: false,
+    _iconSize: '',
+    _iconColor: '#ffffff'
+  },
+  methods: {
+    _initOpenData: function (openData) {
+      this._isHaveUserAvatarUrl(openData);
+      this._isHaveUserNickName(openData);
+    },
+    _parseCSSText: function parseCSSText(cssText) {
+      var cssTxt = cssText.replace('/\/\*(.|\s)*?\*\//g', ' ').replace('/\s+/g', ' ');
+      var style = {};
+      var properties = cssTxt.split(';').map(function (o) {
+        return o.split(':').map(function (x) {
+          return x && x.trim();
+        });
+      });
+      properties.forEach(function (property) {
+        var key = property[0];
+        var value = property[1];
+        style[key] = value;
+      });
+
+      this.setData({
+        _iconSize: style.size || this.data.size * 0.6,
+        _iconColor: style.color || '#ffffff',
+      });
+    },
+    _isHaveUserAvatarUrl: function (openData) {
+      this.setData({
+        _isHaveUserAvatarUrl: openData.indexOf('userAvatarUrl') !== -1
+      });
+    },
+
+    _isHaveUserNickName: function (openData) {
+      this.setData({
+        _isHaveUserNickName: openData.indexOf('userNickName') !== -1
+      });
+    },
+    tapAvatar: function (e) {
+      this.triggerEvent('lintap', {
+        e
+      }, {
+        bubbles: false
+      });
+      this.triggerEvent('lintapcatch', {
+        e
+      }, {
+        bubbles: true
+      });
+    },
+  }
+});

dist/avatar/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "l-icon":"../icon/index"
+    }
+  }

dist/avatar/index.wxml

@@ -0,0 +1,12 @@
+
+<view class="l-avatar {{text||_isHaveUserNickName?'l-placement-'+placement:''}}" bindtap="tapAvatar">
+    <view class="l-avatar-image {{shape?'l-'+shape:''}} l-class" wx:if="{{_isHaveUserAvatarUrl||icon||src}}" style="width:{{size}}rpx;height:{{size}}rpx">
+        <open-data wx:if="{{_isHaveUserAvatarUrl}}" type="userAvatarUrl" />
+        <l-icon wx:elif="{{icon}}" size="{{_iconSize || size*0.6}}" color="{{_iconColor||'#ffffff'}}" name="{{icon}}" />
+        <image wx:elif="{{src}}" src="{{src}}" mode="{{mode}}" style="width:{{size}}rpx;height:{{size}}rpx" />
+    </view>
+    <view class="l-avatar-text l-class-text" wx:if="{{text||_isHaveUserNickName}}">
+        <open-data wx:if="{{_isHaveUserNickName}}" type="userNickName" />
+        <text wx:elif="{{text}}">{{text}}</text>
+    </view>
+</view>

dist/avatar/index.wxss

@@ -0,0 +1 @@
+.l-avatar{display:inline-flex;justify-content:center;align-items:center}.l-avatar-image{flex:1;display:inline-flex;justify-content:center;align-items:center;background:#ccc;overflow:hidden}.l-avatar-text{display:inline-block;height:max-content;width:max-content;font-size:28rpx;color:#45526b;line-height:40px}open-data{width:100%;height:100%}.l-avatar-text open-data,.l-avatar-text text{font-size:inherit;color:inherit;line-height:inherit}.l-square{border-radius:8rpx}.l-circle{border-radius:50%}.l-placement-left,.l-placement-right{align-items:center;justify-content:center}.l-placement-left{margin-right:24rpx;flex-direction:row-reverse}.l-placement-left .l-avatar-text{margin-right:24rpx}.l-placement-right{flex-direction:row}.l-placement-right .l-avatar-text{margin-left:24rpx}.l-placement-top{flex-direction:column-reverse}.l-placement-top .l-avatar-text{margin-bottom:12rpx}.l-placement-bottom{flex-direction:column}.l-placement-bottom .l-avatar-text{margin-top:12rpx}