Merge pull request #1473 from TaleLin/develop

chore: 升级版本 0.9.7

.gitignore

@@ -19,5 +19,6 @@ yarn-error.log
 .vscode
 package-lock.json
 examples/project.config.json
+examples/project.private.config.json
 /.run
 yarn.lock

commitlint.config.js

@@ -75,7 +75,8 @@ module.exports = {
         'TabBar',
         'DynamicBuild',
         'Calendar',
-        'Script'
+        'Script',
+        'Switch'
       ]
     ]
   }

dist/switch/index.json

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

dist/switch/index.wxml

@@ -0,0 +1,3 @@
+<view class="switch {{disabled ? 'switch-disabled l-disabled-class' : 'l-class'}} {{ checked === activeValue ? 'switch-on' : '' }}" style="background-color:{{checked === activeValue ? selectColor : color}};font-size:{{size}};" bind:tap="onClick">
+  <view class="switch-node"></view>
+</view>

dist/switch/index.wxss

@@ -0,0 +1 @@
+.switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;height:1em;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:1em;transition:background-color .3s}.switch-node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;width:1em;height:1em;background-color:#fff;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:.3s cubic-bezier(.3,1.05,.4,1.05)}.switch-on .switch-node{transform:translateX(calc(1em))}.switch-disabled{opacity:.5}

examples/app.json

@@ -93,6 +93,7 @@
     {
       "root": "pages/components/form",
       "pages": [
+        "pages/switch/index",
         "pages/input/index",
         "pages/radio/index",
         "pages/checkbox/index",

examples/dist/switch/index.js

@@ -0,0 +1,67 @@
+import eventBus from '../core/utils/event-bus';
+
+Component({
+  externalClasses: ['l-class', 'l-disabled-class'],
+  properties: {
+    checked: {
+      type: null,
+      optionalTypes: [Boolean, String, Number],
+      value: false
+    },
+    size: {
+      type: String,
+      value: '38rpx'
+    },
+    color: {
+      type: String,
+      value: '#fff'
+    },
+    //  选中后的颜色
+    selectColor: {
+      type: String,
+      value: '#3963BC'
+    },
+    activeValue: {
+      type: null,
+      value: true,
+    },
+    inactiveValue: {
+      type: null,
+      value: false,
+    },
+    // 不可选状态
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+  },
+  methods: {
+    onClick() {
+      const { activeValue, inactiveValue, disabled } = this.data;
+
+      if (disabled) {
+        return;
+      }
+
+      const checked = this.data.checked === activeValue;
+      const value = checked ? inactiveValue : activeValue;
+
+      this.setData({
+        checked: value
+      });
+
+      this.triggerEvent('linchange', { checked: value });
+      eventBus.emit(`lin-form-change-${this.id}`, this.id);
+    },
+
+    getValues() {
+      return this.data.checked;
+    },
+
+    reset() {
+      this.setData({
+        checked: this.data.inactiveValue
+      });
+    }
+  }
+});

examples/dist/switch/index.json

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

examples/dist/switch/index.wxml

@@ -0,0 +1,6 @@
+<view 
+  class="switch {{disabled ? 'switch-disabled l-disabled-class' : 'l-class'}} {{ checked === activeValue ? 'switch-on' : '' }}"
+  style="background-color:{{checked === activeValue ? selectColor : color}};font-size:{{size}};"
+  bind:tap="onClick">
+  <view class="switch-node"></view>
+</view>

examples/dist/switch/index.wxss

@@ -0,0 +1 @@
+.switch{position:relative;display:inline-block;box-sizing:content-box;width:2em;height:1em;background-color:#fff;border:1px solid rgba(0,0,0,.1);border-radius:1em;transition:background-color .3s}.switch-node{position:absolute;top:0;left:0;border-radius:100%;z-index:1;width:1em;height:1em;background-color:#fff;box-shadow:0 3px 1px 0 rgba(0,0,0,.05),0 2px 2px 0 rgba(0,0,0,.1),0 3px 3px 0 rgba(0,0,0,.05);transition:.3s cubic-bezier(.3,1.05,.4,1.05)}.switch-on .switch-node{transform:translateX(calc(1em))}.switch-disabled{opacity:.5}

examples/pages/components/form/pages/form/index.js

@@ -37,7 +37,8 @@ Page({
       music: '',
       sex: '',
       desc: '',
-      score: ''
+      score: '',
+      status: false
     },
     items: [
       {
@@ -95,6 +96,19 @@ Page({
         trigger: 'change'
       }
     ],
+    statusRules: [
+      {
+        validator(rule, value, callback) {
+          if (value !== true) {
+            callback(false);
+          } else {
+            callback();
+          }
+        },
+        message: '必须启用',
+        trigger: 'change'
+      }
+    ],
     register: {
       loginId: '',
       password: '',

examples/pages/components/form/pages/form/index.json

@@ -13,6 +13,7 @@
     "l-radio-group": "/dist/radio-group/index",
     "l-radio": "/dist/radio/index",
     "l-rate": "/dist/rate/index",
+    "l-switch": "/dist/switch/index",
     "l-button": "/dist/button/index"
   }
 }

examples/pages/components/form/pages/form/index.wxml

@@ -166,6 +166,9 @@
                     <l-form-item tip-type="{{tipType}}" align-items="{{alignType}}" rules="{{descRules}}" label="性格描述:" name="ruleDesc">
                         <l-textarea l-class="l-input-container-class" border="{{false}}" id="ruleDesc" value="{{ruleForm.desc}}" />
                     </l-form-item>
+                    <l-form-item tip-type="{{tipType}}" align-items="{{alignType}}" rules="{{statusRules}}" label="是否启用:" name="ruleStatus">
+                        <l-switch id="ruleStatus" value="{{ruleForm.status}}" />
+                    </l-form-item>
 
                     <view slot="submit">
                         <l-button>提交验证</l-button>

examples/pages/components/form/pages/switch/index.js

@@ -0,0 +1,15 @@
+// pages/components/form/pages/switch/index.js
+Page({
+  /**
+  * 页面的初始数据
+  */
+  data: {
+    customValue: 0
+  },
+
+  onChange(e) {
+    this.setData({
+      customValue: e.detail.checked
+    });
+  }
+});

examples/pages/components/form/pages/switch/index.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "content-title": "/components/content-title/index",
+    "content-card": "/components/content-card/index",
+    "l-switch": "/dist/switch/index"
+  }
+}

examples/pages/components/form/pages/switch/index.wxml

@@ -0,0 +1,42 @@
+<!--pages/components/form/pages/switch/index.wxml-->
+<view class='container'>
+  <content-title name="Switch" describe="开关">
+    <content-card
+      class="content"
+      name="基本案例"
+    >
+      <l-switch />
+
+    </content-card>
+
+    <!-- 设置禁用 -->
+    <content-card
+      class="content"
+      name="设置禁用"
+    >
+      <l-switch disabled />
+    </content-card>
+
+    <content-card
+      class="content"
+      name="自定义大小"
+    >
+      <l-switch size="50rpx" />
+    </content-card>
+
+    <content-card
+      class="content"
+      name="自定义颜色"
+    >
+      <l-switch color="#ccc" select-color="#34BFA3"/>
+    </content-card>
+
+    <content-card
+      class="content"
+      name="自定义打开或关闭的值"
+    >
+      <l-switch checked="{{ customValue }}" active-value="{{ 1 }}" inactive-value="{{ 0 }}" bind:linchange="onChange"/>
+      <view>当前选中的值：{{ customValue }}</view>
+    </content-card>
+  </content-title>
+</view>

examples/pages/components/form/pages/switch/index.wxss

@@ -0,0 +1 @@
+/* pages/components/form/pages/switch/index.wxss */

examples/pages/navigator/content/config/form-navi.js

@@ -47,6 +47,12 @@ const formNaviConfigs = [
     desc: '日历',
     componentsPath: '/pages/components/form/pages/calendar/index'
   },
+  {
+    icon: '/images/component/switch.png',
+    title: 'Switch',
+    desc: '开关',
+    componentsPath: '/pages/components/form/pages/switch/index'
+  },
   {
     icon: '/images/component/rules.png',
     title: 'Rules',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lin-ui",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "A high quality UI components library with MiniProgram",
   "main": "app.js",
   "directories": {

src/switch/index.js

@@ -0,0 +1,67 @@
+import eventBus from '../core/utils/event-bus';
+
+Component({
+  externalClasses: ['l-class', 'l-disabled-class'],
+  properties: {
+    checked: {
+      type: null,
+      optionalTypes: [Boolean, String, Number],
+      value: false
+    },
+    size: {
+      type: String,
+      value: '38rpx'
+    },
+    color: {
+      type: String,
+      value: '#fff'
+    },
+    //  选中后的颜色
+    selectColor: {
+      type: String,
+      value: '#3963BC'
+    },
+    activeValue: {
+      type: null,
+      value: true,
+    },
+    inactiveValue: {
+      type: null,
+      value: false,
+    },
+    // 不可选状态
+    disabled: {
+      type: Boolean,
+      value: false
+    },
+  },
+  methods: {
+    onClick() {
+      const { activeValue, inactiveValue, disabled } = this.data;
+
+      if (disabled) {
+        return;
+      }
+
+      const checked = this.data.checked === activeValue;
+      const value = checked ? inactiveValue : activeValue;
+
+      this.setData({
+        checked: value
+      });
+
+      this.triggerEvent('linchange', { checked: value });
+      eventBus.emit(`lin-form-change-${this.id}`, this.id);
+    },
+
+    getValues() {
+      return this.data.checked;
+    },
+
+    reset() {
+      this.setData({
+        checked: this.data.inactiveValue
+      });
+    }
+  }
+});

src/switch/index.json

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

src/switch/index.less

@@ -0,0 +1,35 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  box-sizing: content-box;
+  width: 2em;
+  height: 1em;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 1em;
+  transition: background-color 0.3s;
+
+  &-node {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 100%;
+    z-index: 1;
+    width: 1em;
+    height: 1em;
+    background-color: #fff;
+    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05),
+      0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+    transition: 0.3s cubic-bezier(0.3, 1.05, 0.4, 1.05);
+  }
+
+  &-on {
+    .switch-node {
+      transform: translateX(calc(1em));
+    }
+  }
+
+  &-disabled {
+    opacity: 0.5;
+  }
+}

src/switch/index.wxml

@@ -0,0 +1,6 @@
+<view 
+  class="switch {{disabled ? 'switch-disabled l-disabled-class' : 'l-class'}} {{ checked === activeValue ? 'switch-on' : '' }}"
+  style="background-color:{{checked === activeValue ? selectColor : color}};font-size:{{size}};"
+  bind:tap="onClick">
+  <view class="switch-node"></view>
+</view>