Merge branch 'dev'

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## 0.6.8
+- [+] [wxc-tab-page](https://alibaba.github.io/weex-ui/#/packages/wxc-tab-page/) supports more settings about tab-item, More can see [here]((https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-page/))
+- [+] [wxc-lightbox](https://alibaba.github.io/weex-ui/#/packages/wxc-tab-page/) add params about `index` and `interval`
+- [!] [wxc-rich-text](https://alibaba.github.io/weex-ui/#/packages/wxc-rich-text/) remove the old hack about wxc-special-rich-text
+
 ## 0.6.7
 - [!] Modifying the location attribute of loading [pull/323](https://github.com/alibaba/weex-ui/pull/323)
 - [!] English document grammar correction [pull/329](https://github.com/alibaba/weex-ui/pull/329)、[pull/330](https://github.com/alibaba/weex-ui/pull/330)

CHANGELOG_cn.md

@@ -1,5 +1,11 @@
 # 升级日志
 
+## 0.6.8
+- [+] [wxc-tab-page](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-page/) 支持 tab-item 更多的参数设置，详细可见[文档]((https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-page/))
+- [+] [wxc-lightbox](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-page/) 支持设置 index 和 interval
+- [!] [wxc-rich-text](https://alibaba.github.io/weex-ui/#/cn/packages/wxc-rich-text/) 中 wxc-special-rich-text 移除之前兼容 ios 的老逻辑
+
+
 ## 0.6.7
 - [!] Loading 位置属性修改，防止多个时候的重叠 [pull/323](https://github.com/alibaba/weex-ui/pull/323)
 - [!] 文档英语语法修正 [pull/329](https://github.com/alibaba/weex-ui/pull/329)、[pull/330](https://github.com/alibaba/weex-ui/pull/330)

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.7</span>
+# <span style="font-weight:400;">Weex Ui</span> <span style="font-size:14px">0.6.8</span>
 
 > <span style="line-height:1.8rem;font-weight:400;font-size:1.3rem">A rich interaction, lightweight, high performance UI library.<span>
 

example/lightbox/index.vue

@@ -22,6 +22,7 @@
  <wxc-lightbox
  ref="wxc-lightbox"
  height="800"
+ :index="1"
  :image-list="imageList"
  @wxcLightboxOverlayClicked="lightboxOverlayClick"
  :show="show">

example/page-calendar/index.vue

@@ -37,8 +37,10 @@
  :selected-date="selectedDate"
  :selected-note="selectedNote"
  :is-range="isRange"
- :needDestroy="false"
+ :need-destroy="false"
  :minibar-cfg="minibarCfg"
+ :selected-cell-style="selectedCellStyle"
+ :selected-text-style="selectedTextStyle"
  :desc-list="descList"
  @wxcPageCalendarBackClicked="wxcPageCalendarBackClicked"
  @wxcPageCalendarDateSelected="wxcPageCalendarDateSelected"
@@ -143,7 +145,13 @@
  { date: '2017-12-28', value: '￥341' },
  { date: '2017-12-29', value: '￥230' },
  { date: '2017-12-06', value: '￥2000', emphasize: true }
- ]
+ ],
+ selectedCellStyle:{
+ backgroundColor:'red'
+ },
+ selectedTextStyle:{
+ color:'#ffffff'
+ }
  }),
  created () {
  setTitle('PageCalendar');

example/tab-page/config.js

@@ -61,7 +61,11 @@ export default {
  activeBottomHeight: 6,
  activeBottomWidth: 120,
  textPaddingLeft: 10,
- textPaddingRight: 10
+ textPaddingRight: 10,
+ normalBottomColor: 'rgba(0,0,0,0.4)',
+ normalBottomHeight: 1,
+ hasRightIcon: true,
+ rightOffset: 100
  },
  // 使用 iconfont 模式的tab title配置
  tabIconFontTitles: [

example/tab-page/index.vue

@@ -9,8 +9,10 @@
  :needSlider="needSlider"
  :is-tab-view="isTabView"
  :tab-page-height="tabPageHeight"
- :spm-c="4307989"
  @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
+
+ <text slot="rightIcon" class="other">其他</text>
+
  <list v-for="(v,index) in tabList"
  :key="index"
  class="item-container"
@@ -56,10 +58,13 @@
  .cell {
  background-color: #ffffff;
  }
+
+ .other {
+ height: 120px;
+ line-height: 120px;
+ }
 </style>
 <script>
- const dom = weex.requireModule('dom');
-
  import { WxcTabPage, WxcPanItem, Utils, BindEnv } from '../../index';
  import WxcItem from './wxc-item.vue';
 

package.json

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

packages/wxc-lightbox/README.md

@@ -67,6 +67,8 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 | width | `Number` |`Y`| `750` | light box width |
 | show-indicator | `Bool` |`N`| `true` |whether to show indicator|
 | indicator-color | `Object` |`N`| `{}` | indicator style（*1）|
+| index | `Number` |`N`| `0` | the index of current shown slider|
+| interval | `Number` |`N`| `3000` | time interval for each page displayed in slider|
 
 *1 default style: 
 ```

packages/wxc-lightbox/README_cn.md

@@ -69,6 +69,8 @@
 | width | `Number` |`Y`| `750` | 全屏显示图片宽度 |
 | show-indicator | `Bool` |`N`| `true` |全屏后是否显示索引...|
 | indicator-color | `Object` |`N`| `{}` |索引样式配置（注 1）|
+| index | `Number` |`N`| `0` | 当前初始打开选择哪一页 |
+| interval | `Number` |`N`| `3000` | 设置自动播放时候的间隔时间 |
 
 注 1 中样式：
 ```

packages/wxc-lightbox/index.vue

@@ -12,6 +12,8 @@
  @wxcMaskSetHidden="maskOverlayClick">
  <slider auto-play="false"
  v-if="show"
+ :index="index"
+ :interval="interval"
  :style="{ height: height + 'px'}">
  <div v-for="(v,index) in imageList"
  :style="{ height: height + 'px'}"
@@ -65,6 +67,14 @@
  'item-selected-color': '#ffc300',
  'item-size': '20px'
  })
+ },
+ index: {
+ type: [Number, String],
+ default: 0
+ },
+ interval:{
+ type: [Number, String],
+ default: 3000
  }
  },
  computed: {

packages/wxc-page-calendar/README.md

@@ -101,7 +101,9 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 | desc-list | `Array` |`N`| `[{}]` | desc info |
 | show-header | `Boolean` |`N`| `false` | whether show minibar in native |
 | minibar-cfg | `Object` |`N`| `{}` | [minibar config](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-page-calendar/index.vue#L65)|
-| animationType | `String` | `N` | `push` | Support model or push type|
+| animation-type | `String` | `N` | `push` | Support model or push type|
+| selected-cell-style | `Object` | `N` | `{}` |Cover the selected cell style|
+| selected-text-style | `Object` | `N` | `{}` |Cover the selected text style|
 ### Event
 
 ```

packages/wxc-page-calendar/README_cn.md

@@ -102,7 +102,9 @@
 | desc-list | `Array` |`N`| `[{}]` | 附加信息 |
 | show-header | `Boolean` |`N`| `false` | 是否在 Native 下显示导航栏 |
 | minibar-cfg | `Object` |`N`| `{}` | 导航栏 [配置](https://github.com/alibaba/weex-ui/blob/master/packages/wxc-page-calendar/index.vue#L65)，降级版本默认显示 |
-| animationType | `String` | `N` | `push` | 自定义转场动画类型目前支持model和push|
+| animation-type | `String` | `N` | `push` | 自定义转场动画类型目前支持model和push|
+| selected-cell-style | `Object` | `N` | `{}` |覆盖选中日期的 cell 样式|
+| selected-text-style | `Object` | `N` | `{}` |覆盖选中日期的 text 样式|
 ### 事件回调
 
 ```

packages/wxc-page-calendar/format.js

@@ -188,9 +188,10 @@ export function getWeekRows (y, m, today, dateRange, departDate, arriveDate, sel
  const global = _fixNum(m) + '-' + _fixNum(d);
  let note = '';
  let ext = '';
+ let isSelected = false;
 
  if (descList && descList.length > 0) {
- const nowDesc = descList.filter(item => item.date == date);
+ const nowDesc = descList.filter(item => item.date === date);
  if (nowDesc && nowDesc.length > 0) {
  ext = nowDesc[0].value;
  if (nowDesc[0].emphasize) {
@@ -254,6 +255,7 @@ export function getWeekRows (y, m, today, dateRange, departDate, arriveDate, sel
  if (departDate === arriveDate && selectedNote.length >= 3) {
  note = selectedNote[2];
  }
+ isSelected = true;
  cls.push('item-text-selected');
  cellClass.push('item-row-selected');
  }
@@ -263,6 +265,7 @@ export function getWeekRows (y, m, today, dateRange, departDate, arriveDate, sel
  }
 
  cell = {
+ isSelected,
  isEmpty: false,
  ref,
  cls: _unique(cls).join(' '),

packages/wxc-page-calendar/index.vue

@@ -26,12 +26,16 @@
  :key="`${index}-${rowIndex}`"
  :ref="cell.ref"
  :class="['row-item', cell.cellClass]"
+ :style="cell.isSelected ? selectedCellStyle:{}"
  :accessible="true"
  :aria-label="`${cell.text?cell.text:''},${cell.note?cell.note:''},${cell.ext?cell.ext:''}`"
  @click="onClickDate(cell)">
- <text :class="['calendar-note', cell.cls]">{{cell.note}}</text>
- <text :class="['calendar-day', cell.cls]">{{cell.text}}</text>
- <text :class="['calendar-ext', cell.cls]">{{cell.ext}}</text>
+ <text :class="['calendar-note', cell.cls]"
+ :style="cell.isSelected ? selectedTextStyle:{}">{{cell.note}}</text>
+ <text :class="['calendar-day', cell.cls]"
+ :style="cell.isSelected ? selectedTextStyle:{}">{{cell.text}}</text>
+ <text :class="['calendar-ext', cell.cls]"
+ :style="cell.isSelected ? selectedTextStyle:{}">{{cell.ext}}</text>
  </div>
  </cell>
  <cell class="iphone-x" v-if="isIPhoneX"></cell>
@@ -89,7 +93,15 @@
  descList: {
  type: Array,
  default: () => ([])
- }
+ },
+ selectedCellStyle: {
+ type: Object,
+ default: () => ({})
+ },
+ selectedTextStyle: {
+ type: Object,
+ default: () => ({})
+ },
  },
  data: () => ({
  isShow: false,
@@ -199,10 +211,10 @@
  },
  _animate (status, callback = null) {
  var ref = this.$refs.pageCalendar
- if(this.animationType==='push') {
- Utils.animation.pageTransitionAnimation(ref,`translateX(${status ? -750 : 750}px)`,status,callback)
- } else if (this.animationType==='model') {
- Utils.animation.pageTransitionAnimation(ref,`translateY(${status ? -Utils.env.getScreenHeight() : Utils.env.getScreenHeight()}px)`,status,callback)
+ if (this.animationType === 'push') {
+ Utils.animation.pageTransitionAnimation(ref, `translateX(${status ? -750 : 750}px)`, status, callback)
+ } else if (this.animationType === 'model') {
+ Utils.animation.pageTransitionAnimation(ref, `translateY(${status ? -Utils.env.getScreenHeight() : Utils.env.getScreenHeight()}px)`, status, callback)
  }
  },
  show () {

packages/wxc-special-rich-text/index.vue

@@ -176,9 +176,6 @@
  const iconMoreBlank = num > 2 ? (needHack ? ' ' : ' ') : ' ';
  if (r1.type === 'tag') {
  blank = new Array(num).join(' ') + tagMoreBlank;
- if (!isPad && num > 6 && !needHack) {
- blank = blank.substring(parseInt(num / 2));
- }
  } else if (r1.type === 'icon') {
  blank = new Array(num).join(' ') + iconMoreBlank;
  }

packages/wxc-tab-page/README.md

@@ -126,7 +126,7 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 |-------------|------------|--------|-----|-----|
 | tab-titles | `Array` |`Y`| `[]` | Tab list [config](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js#L7)|
 | title-type | `String` |`N`| `icon` | title type `icon`/`text`/`iconFont`(*1)|
-| tab-styles | `Array` |`N`| `[]` | [style config](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)|
+| tab-styles | `Object` |`N`| `{}` | [style config](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)|
 | tab-page-height | `Number` |`N`| `1334` | Tab page height |
 | is-tab-view | `Boolean` |`N`| `true` |if set `false`,add tab-titles config with `url` can be jumped out|
 | pan-dist | `Number` |`N`| `200` | how many scrolls to switch to the next screen|
@@ -135,6 +135,9 @@ More details can be found in [here](https://github.com/alibaba/weex-ui/blob/mast
 | title-use-slot | `Boolean` |`N`| `false` | configure title using `slot` (*2)|
 | wrap-bg-color | `String` |`N`| `#F2F3F4` |page background color|
 | need-slider | `Boolean` |`N`| `true` |whether to slide with gestures|
+| click-animation | `Boolean` |`N`| `{}` |have to use animation when you click the tab bar|
+| right-icon-style | `Object` |`N`| `{}` | right icon styles |
+
 
 ### *1: Using iconFont
 - After Weex Ui version about `0.3.8`, we can use `iconFont` to represent our title image, you can use like this:

packages/wxc-tab-page/README_cn.md

@@ -126,7 +126,7 @@
 |-------------|------------|--------|-----|-----|
 | tab-titles | `Array` |`Y`| `[]` | 顶部 [显示配置](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js#L7)|
 | title-type | `String` |`N`| `icon` | 顶部类型 `icon`/`text`/`iconFont` (注1)|
-| tab-styles | `Array` |`N`| `[]` | 顶部 [样式配置](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)|
+| tab-styles | `Object` |`N`| `{}` | 顶部 [样式配置](https://github.com/alibaba/weex-ui/blob/master/example/tab-page/config.js)|
 | tab-page-height | `Number` |`N`| `1334` | Tab page 页面的高度 |
 | is-tab-view | `Boolean` |`N`| `true` |当设置为`false`，同时 tab 配置 url 参数即可跳出|
 | pan-dist | `Number` |`N`| `200` | 滚动多少切换上下一屏幕|
@@ -135,6 +135,9 @@
 | title-use-slot | `Boolean` |`N`| `false` | 使用 slot 配置头部导航 (注2)|
 | wrap-bg-color | `String` |`N`| `#F2F3F4` |页面背景颜色|
 | need-slider | `Boolean` |`N`| `true` |设置是否可以手势滑动|
+| click-animation | `Boolean` |`N`| `true` | 点击tab的时候是否使用动画 |
+| right-icon-style | `Object` |`N`| `{}` | rightIcon的样式 |
+
 
 ### 注1：使用 iconFont