new version 0.6.13

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 0.6.13
+- [!] fixed[wxc-overlay](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-dialog/)problem on[wxc-tab-bar](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-bar/)
+- [+] add wxc-swipe-action
+- [!] [!] Fix [wxc-button](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-button/) displaying style problem, add isHighlight attribute to control whether button is highlighted or not.
+
 ## 0.6.12
 - [!] Fixed set transparency issues [wxc-lightbox](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-lightbox/).
 - [!] Fixed set transparency issues [wxc-mask](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-mask/).

CHANGELOG_cn.md

@@ -1,5 +1,10 @@
 # 升级日志
 
+## 0.6.13
+- [!] 修复[wxc-overlay](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-dialog/)在[wxc-tab-bar](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-bar/)上使用问题
+- [+] 添加wxc-swipe-action侧滑组件
+- [!] 修复[wxc-button](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-button/) 设置display样式问题，添加isHighlight属性控制button是否高亮显示
+
 ## 0.6.12
 - [!] 修复 [wxc-lightbox](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-lightbox/) 设置透明度问题
 - [!] 修复 [wxc-mask](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-mask/) 设置透明度问题

docs/_coverpage.md

@@ -1,6 +1,6 @@
 <img src="https://img.alicdn.com/tfs/TB1kCs_er_I8KJjy1XaXXbsxpXa-419-495.png" width="146px">
 
-# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.6.12</span>
+# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.6.13</span>
 
 > <span style="line-height:1.8rem;font-weight:400;font-size:1.3rem">A rich interaction, lightweight, high performance UI library.<span>
 

docs/_sidebar.md

@@ -9,6 +9,7 @@
     - [wxc-popup](packages/wxc-popup/)
     - [wxc-result](packages/wxc-result/)
     - [wxc-slide-nav](packages/wxc-slide-nav/)
+    - [wxc-swipe-action](packages/wxc-swipe-action/)
 
 - Navigator
     - [wxc-minibar](packages/wxc-minibar/)

docs/_sidebar_cn.md

@@ -9,6 +9,8 @@
     - [wxc-popup 弹层](cn/packages/wxc-popup/)
     - [wxc-result 结果页](cn/packages/wxc-result/)
     - [wxc-slide-nav 视窗增大](cn/packages/wxc-slide-nav/)
+    - [wxc-swipe-action 滑动操作 cell](cn/packages/wxc-swipe-action/)
+
 
 - 导航
     - [wxc-minibar 导航栏](cn/packages/wxc-minibar/)

example/swipe-action/index.js

@@ -0,0 +1,4 @@
+import entry from './index.vue'
+
+entry.el = '#root'
+export default new Vue(entry)

example/swipe-action/index.vue

@@ -0,0 +1,86 @@
+<!-- CopyRight (C) 2017-2022 Alibaba Group Holding Limited. -->
+<!-- Created by wjun94 on 19/05/14. -->
+
+<template>
+<div>
+  <scroller class="wxc-demo">
+    <title title="wxc-swipe-action"></title>
+    <category title="使用案例"></category>
+    <WxcSwipeAction @onNodeClick='onTest' :data='data'/>
+  </scroller>
+</div>
+</template>
+
+<script>
+import { WxcSwipeAction } from "../../index";
+const modal = weex.requireModule("modal");
+import Title from "../_mods/title.vue";
+import Category from "../_mods/category.vue";
+import { setTitle } from '../_mods/set-nav';
+
+export default {
+  components: {
+    Title,
+    Category,
+    WxcSwipeAction
+  },
+  data() {
+    return {
+      data: [
+        {
+          title: "点击右边按钮隐藏",
+          autoClose: true,
+          right: [
+            {
+              text: "置顶",
+              onPress: function() {
+                modal.toast({
+                  message: "置顶",
+                  duration: 0.3
+                });
+              }
+            },
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        },
+        {
+          title: "默认效果",
+          right: [
+            {
+              text: "删除",
+              onPress: () => {
+                modal.toast({
+                  message: "删除",
+                  duration: 0.3
+                });
+              },
+              style: { backgroundColor: "#F4333C", color: "white" }
+            }
+          ]
+        }
+      ]
+    };
+  },
+  created() {
+    setTitle("SwipeAction");
+  },
+  methods: {
+    onTest(node, i) {
+      modal.toast({
+        message: node.title,
+        duration: 0.3
+      });
+    }
+  }
+};
+</script>
+

index.js

@@ -40,6 +40,7 @@ import WxcSlideNav from './packages/wxc-slide-nav';
 import WxcSliderBar from './packages/wxc-slider-bar';
 import WxcSpecialRichText from './packages/wxc-special-rich-text';
 import WxcStepper from './packages/wxc-stepper';
+import WxcSwipeAction from './packages/wxc-swipe-action';
 import WxcTabBar from './packages/wxc-tab-bar';
 import WxcTabPage from './packages/wxc-tab-page';
 import WxcTag from './packages/wxc-tag';
@@ -82,6 +83,7 @@ export {
   WxcSliderBar,
   WxcSpecialRichText,
   WxcStepper,
+  WxcSwipeAction,
   WxcTabBar,
   WxcTabPage,
   WxcTag

package.json

@@ -1,6 +1,6 @@
 {
   "name": "weex-ui",
-  "version": "0.6.12",
+  "version": "0.6.13",
   "description": "A rich interaction, lightweight, high performance UI library based on Weex",
   "main": "index.js",
   "lib": "vue",

packages/wxc-button/README.md

@@ -39,6 +39,7 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 | **`type`** | `String` | `N` | `red` | can be set to `white`/`red`/`yellow`/`blue`/`green` |
 | **`size`** | `String` | `N` | `full` | can be set to `full`/`big`/`medium`/`small` |
 | **`disabled`** | `Boolean` | `N` | `false` | set disabled（*1） |
+| **`isHighlight`** | `Boolean` | `N` | `false` | Whether to highlight |
 | **`btnStyle`** | `Object` | `N` | `{}` | custom style about button（*2） |
 | **`textStyle`** | `Object` | `N` | `{}` | custom style about text （*3） |
 

packages/wxc-button/README_cn.md

@@ -38,6 +38,7 @@
 | **`type`** | `String` | `N` | `red` | 类型：`white`/`red`/`yellow`/`blue`/`green` |
 | **`size`** | `String` | `N` | `full` | 类型：`full`/`big`/`medium`/`small` |
 | **`disabled`** | `Boolean` | `N` | `false` | 是否 disabled（注1） |
+| **`isHighlight`** | `Boolean` | `N` | `false` | 是否高亮显示 |
 | **`btnStyle`** | `Object` | `N` | `{}` | 按钮的样式对象（注2） |
 | **`textStyle`** | `Object` | `N` | `{}` | 文字的样式对象（注3） |
 

packages/wxc-button/index.vue

@@ -2,7 +2,7 @@
 <!-- Created by Tw93 on 17/07/28. -->
 
 <template>
-  <div class="wxc-btn"
+  <div :class="['wxc-btn', isHighlight && !disabled && 'wxc-btn-highlight']"
        :style="mrBtnStyle"
        @click="onClicked"
        :accessible="true"
@@ -32,6 +32,10 @@
         type: Boolean,
         default: false
       },
+      isHighlight: {
+        type: Boolean,
+        default: false
+      },
       btnStyle: Object,
       textStyle: Object,
       disabledStyle: Object
@@ -81,7 +85,7 @@
     opacity: 1;
   }
 
-  .wxc-btn:active {
+  .wxc-btn-highlight:active {
     opacity: .8;
   }
 

packages/wxc-dialog/README.md

@@ -74,6 +74,7 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 |-------------|------------|--------|-----|-----|
 | title | `String` | `Y` | `-` | title (only transparent) |
 | content | `String` | `N` | `-`| content |
+| left | `Number` |`N`| `0` | move left distance  |
 | top | `Number` | `N` |`400` |  distance from the top of the screen |
 | single | `Boolean` | `N` |`false` |  whether is single button |
 | confirm-text | `String` | `N` |`确定` |  text of the primary button |

packages/wxc-dialog/README_cn.md

@@ -73,6 +73,7 @@
 | Prop | Type | Required | Default | Description |
 |-------------|------------|--------|-----|-----|
 | title | `String` | `Y` | `-` | 标题 |
+| left | `Number` |`N`| `0` | 向左移动距离  |
 | content | `String` | `N` | `-`| 内容说明描述 |
 | top | `Number` | `N` |`400` |  弹层距离顶部的高度 |
 | single | `Boolean` | `N` |`false` |  是否只有一个按钮（显示确认） |

packages/wxc-dialog/index.vue

@@ -4,8 +4,8 @@
 
 <template>
   <div class="container">
-    <wxc-overlay v-if="show" :show="true" :hasAnimation="false"></wxc-overlay>
-    <div class="dialog-box" v-if="show" :style="{top:top+'px'}">
+    <wxc-overlay :left='left' v-if="show" :show="true" :hasAnimation="false"></wxc-overlay>
+    <div class="dialog-box" v-if="show" :style="{top:top+'px', left: ((isWeb ? left : 0) + 96) + 'px'}">
       <div class="dialog-content">
         <slot name="title">
           <text class="content-title">{{title}}</text>
@@ -118,6 +118,7 @@
 <script>
   import WxcOverlay from '../wxc-overlay'
   import { CHECKED, UN_CHECKED } from './type';
+  import Utils from '../utils';
 
   export default {
     components: { WxcOverlay },
@@ -169,11 +170,16 @@
       isChecked: {
         type: Boolean,
         default: false
+      },
+      left: {
+        type: Number,
+        default: 0
       }
     },
     data: () => ({
       noPromptIcon: UN_CHECKED,
-      pageHeight: 1334
+      pageHeight: 1334,
+      isWeb: Utils.env.isWeb()
     }),
     created () {
       const { env: { deviceHeight, deviceWidth } } = weex.config;

packages/wxc-overlay/README.md

@@ -50,6 +50,7 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 |-------------|------------|--------|-----|
 | show | `Boolean` |`Y`| `false` | whether to show  |
 | opacity | `Number` |`N`| `0.6` | opacity `0-1` |
+| left | `Number` |`N`| `0` | move left distance  |
 | has-animation | `Boolean` |`N`| `true` | whether to animate |
 | can-auto-close | `Boolean` |`N`| `true` | whether to can auto close  |
 | duration | `Number` | `300` |`N`| animation duration time |

packages/wxc-overlay/README_cn.md

@@ -48,6 +48,7 @@
 | Prop | Type | Required | Default | Description |
 |-------------|------------|--------|-----|
 | show | `Boolean` |`Y`| `false` | 是否开启  |
+| left | `Number` |`N`| `0` | 向左移动距离  |
 | opacity | `Number` |`N`| `0.6` | 蒙层opacity度数0-1 |
 | has-animation | `Boolean` |`N`| `true` | 是否开启蒙层出现动画  |
 | can-auto-close | `Boolean` |`N`| `true` | 是否可以点击自动关闭  |

packages/wxc-overlay/index.vue

@@ -18,7 +18,6 @@
   .wxc-overlay {
     width: 750px;
     position: fixed;
-    left: 0;
     top: 0;
     bottom: 0;
     right: 0;
@@ -27,12 +26,18 @@
 
 <script>
   const animation = weex.requireModule('animation');
+  import Utils from '../utils';
+
   export default {
     props: {
       show: {
         type: Boolean,
         default: true
       },
+      left: {
+        default: Number,
+        default: 0
+      },
       hasAnimation: {
         type: Boolean,
         default: true
@@ -58,7 +63,8 @@
       overlayStyle () {
         return {
           opacity: this.hasAnimation ? 0 : 1,
-          backgroundColor: `rgba(0, 0, 0,${this.opacity})`
+          backgroundColor: `rgba(0, 0, 0,${this.opacity})`,
+          left: Utils.env.isWeb() ? this.left + 'px' : 0
         }
       },
       shouldShow () {