@tarojs/plugin-platform-harmony-ets 3.7.0-alpha.27

package/dist/components-harmony/input/index.js

@@ -0,0 +1,98 @@
+import window from '@ohos.window'
+
+import { createOption } from '../utils'
+
+export default createOption({
+  data: {
+    type: 'keyboardHeightChange',
+    windowClass: null,
+    height: 0
+  },
+  props: {
+    id: String,
+    value: String,
+    type: String,
+    name: String,
+    password: Boolean,
+    placeholder: String,
+    placeholderColor: '#99000000',
+    disabled: Boolean,
+    maxlength: {
+      default: 140
+    },
+    focus: Boolean,
+    confirmType: {
+      default: 'done',
+      validator: function (value) {
+        const isValidConfirmType = ['default', 'next', 'go', 'done', 'send', 'search'].indexOf(value) !== -1
+        if (!isValidConfirmType) {
+          console.warn('unsupported props-confirmType:' + value + ', will use default confirmType[done].')
+        }
+        return isValidConfirmType
+      }
+    }
+  },
+
+  computed: {
+    realType () {
+      let temp = this.type
+      if (this.password === true) {
+        temp = 'password'
+      }
+      return temp
+    }
+  },
+
+  onInit () {
+    this.windowClass = window.getTopWindow()
+    this.windowClass.then(win => {
+      win.on('keyboardHeightChange', (err, data) => {
+        if (!err) {
+          if (this.height !== data.height) {
+            this.onKeyboardHeightChange(data.height)
+          }
+          this.height = data.height
+        }
+      })
+    })
+  },
+
+  onInput (e) {
+    this.value = e.value
+    this.$trigger('input', {
+      value: e.value, cursor: this.value.length, keyCode: null
+    })
+  },
+
+  onFocus () {
+    this.$trigger('focus', {
+      value: this.value, height: this.height
+    })
+  },
+
+  onBlur () {
+    this.$trigger('blur', {
+      value: this.value
+    })
+  },
+
+  onEnterKeyClick () {
+    this.$trigger('confirm', {
+      value: this.value
+    })
+  },
+
+  onKeyboardHeightChange (height) {
+    this.$trigger('keyboardheightchange', {
+      height: height, duration: 0
+    })
+  },
+
+  onDestroy () {
+    if (this.windowClass) {
+      this.windowClass.then(win => {
+        win.off('keyboardheightchange')
+      })
+    }
+  }
+})

package/dist/components-harmony/label/index.hml

@@ -0,0 +1,3 @@
+<div id="{{id}}" target="{{target}}">
+  <slot></slot>
+</div>

package/dist/components-harmony/label/index.js

@@ -0,0 +1,6 @@
+export default {
+  props: [
+    'id',
+    'target'
+  ]
+}

package/dist/components-harmony/navbar/index.css

@@ -0,0 +1,56 @@
+.navbar {
+  position: fixed;
+  top: 0px;
+  left: 0;
+  right: 0;
+  height: 44vp;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 44vp;
+  align-items: center;
+}
+.navbar__route {
+  margin-right: 40vp;
+  width: 60vp;
+  height: 100%;
+  background-size: 44px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.navbar__route--show {
+  background-image: url('http://storage.360buyimg.com/cjj-pub-images/icon_left_arrow.png');
+}
+.navbar__title {
+  flex: 1;
+  text-align: center;
+  font-size: 14vp;
+  font-weight: bold;
+}
+.navbar__options {
+  display: flex;
+  align-items: center;
+  margin: 8vp;
+  width: 84vp;
+  border: 1px solid #e8e8ed;
+  border-radius: 17vp;
+}
+.navbar__options--more {
+  flex: 1;
+  height: 100%;
+  background-image: url('http://storage.360buyimg.com/cjj-pub-images/icon-mp-more.png');
+  background-size: 36px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.navbar__options--divider {
+  width: 1px;
+  height: 16vp;
+  background-color: #e8e8ed;
+}
+.navbar__options--close {
+  flex: 1;
+  height: 100%;
+  background-image: url('http://storage.360buyimg.com/cjj-pub-images/icon-mp-close.png');
+  background-size: 36px;
+  background-repeat: no-repeat;
+  background-position: center;
+}

package/dist/components-harmony/navbar/index.hml

@@ -0,0 +1,9 @@
+<div class="navbar" style="background-color: {{bg}}">>
+  <div class="navbar__route {{isShowReturn ? 'navbar__route--show' : ''}}" onclick="goBack"></div>
+  <text class="navbar__title" style="color: {{textStyle}}">{{title}}</text>
+  <div class="navbar__options">
+    <div class="navbar__options--more"></div>
+    <div class="navbar__options--divider"></div>
+    <div class="navbar__options--close"></div>
+  </div>
+</div>

package/dist/components-harmony/navbar/index.js

@@ -0,0 +1,30 @@
+import router from '@system.router'
+
+import { covertHex3ToHex6 } from '../utils'
+
+export default {
+  props: {
+    title: {
+      default: '标题'
+    },
+    background: String,
+    textStyle: String,
+    st: String
+  },
+  data () {
+    const pagesLen = Number(router.getLength())
+    return {
+      isShowReturn: pagesLen > 0
+    }
+  },
+  computed: {
+    bg () {
+      return covertHex3ToHex6(this.background)
+    }
+  },
+  goBack () {
+    if (!this._data.isShowReturn) return
+
+    router.back()
+  }
+}

package/dist/components-harmony/navigator/index.css

@@ -0,0 +1,8 @@
+.navigate {
+  overflow: hidden;
+  transition: all linear 0.2s;
+}
+
+.navigator-hover {
+  background-color: #dedede;
+}

package/dist/components-harmony/navigator/index.hml

@@ -0,0 +1,9 @@
+<div 
+  id="{{id}}"
+  class="{{clsHover}}"
+  @click="onClick"
+  @touchstart="onTouchStart"
+  @touchend="onTouchEnd"
+>
+  <slot></slot>
+</div>

package/dist/components-harmony/navigator/index.js

@@ -0,0 +1,104 @@
+import router from '@system.router'
+
+import { createOption, queryToJson } from '../utils'
+
+export default createOption({
+  props: {
+    id: {
+      default: ''
+    },
+    openType: {
+      default: 'navigate'
+    },
+    url: {
+      default: ''
+    },
+    hoverStartTime: {
+      default: 50
+    },
+    hoverStayTime: {
+      default: 600
+    },
+    hoverClass: {
+      default: 'navigator-hover'
+    }
+  },
+
+  data () {
+    return {
+      targetObj: {
+        navigate: 'push',
+        redirect: 'replace',
+        switchTab: 'push',
+        reLaunch: 'replace',
+        navigateBack: 'back'
+      },
+      hover: false,
+      touch: false
+    }
+  },
+
+  computed: {
+    clsHover () {
+      return this.hover ? this.hoverClass : ''
+    }
+  },
+
+  onClick () {
+    const { openType = 'navigate', url = '' } = this
+    this.getRouterFunc(`${openType}`, url)
+  },
+
+  getRouterFunc (method, url) {
+    const methodName = this.targetObj[method]
+    const [uri, queryString = ''] = url.split('?')
+    const params = queryToJson(queryString)
+
+    const uriObj = url ? { uri: uri.replace(/^\//, '') } : {}
+
+    const paramsObj = queryString ? { params } : {}
+
+    if (method === 'reLaunch') {
+      return router.clear()
+    } else if (method === 'switchTab') {
+      const app = getApp()
+      const pages = app.pageStack
+
+      for (let i = 0; i < pages.length; i++) {
+        const item = pages[i]
+        if (item === uriObj.uri) {
+          return router.back({
+            uri: item
+          })
+        }
+      }
+    }
+
+    router[methodName]({
+      ...uriObj,
+      ...paramsObj
+    })
+  },
+
+  onTouchStart () {
+    this.touch = true
+    if (this.hoverClass) {
+      setTimeout(() => {
+        if (this.touch) {
+          this.hover = true
+        }
+      }, this.hoverStartTime)
+    }
+  },
+
+  onTouchEnd () {
+    this.touch = false
+    if (this.hoverClass) {
+      setTimeout(() => {
+        if (!this.touch) {
+          this.hover = false
+        }
+      }, this.hoverStayTime)
+    }
+  }
+})

package/dist/components-harmony/picker/index.hml

@@ -0,0 +1,25 @@
+<div>
+  <picker if="{{type === 'date'}}" id="{{id}}" style="flex: 1" type="date" value="{{localValue}}" start="{{start}}"
+    end="{{end}}" selected="{{selected}}" disabled="{{disabled}}" lunar="{{lunar}}" lunarswitch="{{lunarswitch}}"
+    vibrate="{{vibrate}}" @change="dateChange" @cancel="cancel">
+  </picker>
+
+  <picker elif="{{type === 'time'}}" id="{{id}}" style="flex: 1" type="time" value="{{localValue}}"
+    selected="{{selected}}" hours="{{hours}}" containsecond="{{containsecond}}" disabled="{{disabled}}" vibrate="{{vibrate}}" @change="timeChange"
+    @cancel="cancel">
+  </picker>
+
+  <picker elif="{{type === 'datetime'}}" id="{{id}}" style="flex: 1" type="datetime" value="{{localValue}}"
+    selected="{{selected}}" hours="{{hours}}" disabled="{{disabled}}" lunar="{{lunar}}" lunarswitch="{{lunarswitch}}"
+    vibrate="{{vibrate}}" @change="datetimeChange" @cancel="cancel">
+  </picker>
+
+  <picker elif="{{type === 'multi-text'}}" id="{{id}}" style="flex: 1" type="multi-text" value="{{localValue}}"
+    columns="{{columns}}" range="{{localRange}}" selected="{{selected}}" disabled="{{disabled}}" vibrate="{{vibrate}}"
+    @change="multiTextChange" @columnchange="multiTextColumnChange" @cancel="cancel">
+  </picker>
+
+  <picker else id="{{id}}" style="flex: 1" type="text" value="{{localValue}}" selected="{{selected}}"
+    range="{{localRange}}" disabled="{{disabled}}" vibrate="{{vibrate}}" @change="textChange" @cancel="cancel">
+  </picker>
+</div>

package/dist/components-harmony/picker/index.js

@@ -0,0 +1,132 @@
+import { createOption } from '../utils'
+
+const DEFAULT_MODE = 'selector'
+const DEFAULT_TYPE = 'text'
+const MODE_TYPE_MAP = {
+  selector: 'text',
+  multiSelector: 'multi-text',
+  time: 'time',
+  date: 'date',
+  datetime: 'datetime'
+}
+
+export default createOption({
+  props: [
+    'id',
+    'disabled',
+    'mode',
+    'range',
+    'value',
+    'rangeKey',
+    'start',
+    'end',
+    'hours',
+    'containsecond',
+    'vibrate',
+    'lunar',
+    'lunarswitch'
+  ],
+
+  data () {
+    const isArray = Array.isArray
+    const range = isArray(this.range) ? this.range : []
+    const type = MODE_TYPE_MAP[this.mode || DEFAULT_MODE] || DEFAULT_TYPE
+
+    if (type === 'text') {
+      let localRange = range; const selected = this.value || 0
+      if (this.rangeKey) {
+        localRange = localRange.map(v => v[this.rangeKey])
+      }
+      // this.value代表的是下标，鸿蒙组件的value代表选择器的值
+      const localValue = localRange[selected]
+      return {
+        type,
+        localRange,
+        localValue,
+        selected
+      }
+    }
+
+    if (type === 'multi-text') {
+      const columns = range.length
+      let localRange = range
+      const selected = isArray(this.value) ? this.value : Array(columns).fill(0)
+      if (this.rangeKey) {
+        localRange = range.map(column => {
+          return (column || []).map(v => v[this.rangeKey])
+        })
+      }
+      const localValue = localRange.map((column, idx) => {
+        return column[selected[idx]]
+      })
+      return {
+        type,
+        localRange,
+        localValue,
+        selected,
+        columns
+      }
+    }
+
+    if (type === 'time') {
+      return {
+        type,
+        localValue: this.value,
+        selected: this.value || ''
+      }
+    }
+
+    if (type === 'date') {
+      return {
+        type,
+        localValue: this.value,
+        selected: this.value || ''
+      }
+    }
+
+    if (type === 'datetime') {
+      return {
+        type,
+        localValue: this.value,
+        selected: this.value || ''
+      }
+    }
+  },
+
+  textChange (e) {
+    const { newValue, newSelected } = e
+    this.localValue = newValue
+    this.$trigger('change', { value: newSelected })
+  },
+  multiTextChange (e) {
+    const { newValue, newSelected } = e
+    this.localValue = newValue
+    this.$trigger('change', { value: newSelected })
+  },
+  multiTextColumnChange (e) {
+    const { column, newSelected } = e
+    this.$trigger('columnchange', { column, value: newSelected })
+  },
+  timeChange (e) {
+    const { hour, minute, second } = e
+    this.localValue = padNumZero(hour) + ':' + padNumZero(minute) + (this.containsecond ? ':' + padNumZero(second) : '')
+    this.$trigger('change', { value: this.localValue, hour, minute, second })
+  },
+  dateChange (e) {
+    const { year, month, day } = e
+    this.localValue = [year, padNumZero(month + 1), padNumZero(day)].join('-')
+    this.$trigger('change', { value: this.localValue, year, month, day })
+  },
+  datetimeChange (e) {
+    const { year, month, day, hour, minute } = e
+    this.localValue = [year, padNumZero(month + 1), padNumZero(day), padNumZero(hour), padNumZero(minute)].join('-')
+    this.$trigger('change', { value: this.localValue, year, month, day, hour, minute })
+  },
+  cancel () {
+    this.$trigger('cancel')
+  }
+})
+
+function padNumZero (num) {
+  return num.toString().padStart(2, '0')
+}

package/dist/components-harmony/picker-view/index.hml

@@ -0,0 +1,23 @@
+<div>
+  <picker-view if="{{type === 'date'}}" id="{{id}}" type="date" start="{{start}}" end="{{end}}" selected="{{selected}}"
+    disabled="{{disabled}}" lunar="{{lunar}}" lunarswitch="{{lunarswitch}}" vibrate="{{vibrate}}" @change="dateChange">
+  </picker-view>
+
+  <picker-view elif="{{type === 'time'}}" id="{{id}}" type="time" selected="{{selected}}" hours="{{hours}}"
+    containsecond="{{containsecond}}" disabled="{{disabled}}" vibrate="{{vibrate}}" @change="timeChange">
+  </picker-view>
+
+  <picker-view elif="{{type === 'datetime'}}" id="{{id}}" type="datetime" selected="{{selected}}" hours="{{hours}}"
+    disabled="{{disabled}}" lunar="{{lunar}}" lunarswitch="{{lunarswitch}}" vibrate="{{vibrate}}"
+    @change="datetimeChange">
+  </picker-view>
+
+  <picker-view elif="{{type === 'multi-text'}}" id="{{id}}" type="multi-text" columns="{{columns}}"
+    range="{{localRange}}" selected="{{selected}}" disabled="{{disabled}}" vibrate="{{vibrate}}"
+    @columnchange="multiTextColumnChange">
+  </picker-view>
+
+  <picker-view else id="{{id}}" type="text" selected="{{selected}}" range="{{localRange}}" disabled="{{disabled}}"
+  indicatorprefix="{{indicatorprefix}}" indicatorsuffix="{{indicatorsuffix}}" vibrate="{{vibrate}}" @change="textChange">
+  </picker-view>
+</div>

package/dist/components-harmony/picker-view/index.js

@@ -0,0 +1,161 @@
+import { createOption } from '../utils'
+
+const MODE_TYPE_MAP = {
+  selector: 'text',
+  multiSelector: 'multi-text',
+  time: 'time',
+  date: 'date',
+  datetime: 'datetime'
+}
+
+export default createOption({
+  props: [
+    'id',
+    'disabled',
+    'mode',
+    'range',
+    'value',
+    'start',
+    'end',
+    'hours',
+    'containsecond',
+    'indicatorprefix',
+    'indicatorsuffix',
+    'vibrate',
+    'lunar',
+    'lunarswitch',
+    'cn'
+  ],
+
+  data () {
+    const isArray = Array.isArray
+    const hasRangeProp = Boolean(this.range)
+    const hasModeProp = Boolean(this.mode)
+    let range = isArray(this.range) ? this.range : []
+    let type = hasModeProp ? MODE_TYPE_MAP[this.mode] || 'text' : null
+    const children = (this.cn || []).filter(child => child.nn === 'picker-view-column')
+
+    // 优先读取range属性，若无则解析子节点
+    if (!hasRangeProp && ['text', 'multi-text', null].includes(type)) {
+      range = recursiveGetCandidates(children)
+    }
+    // 若未指定type，则根据range类型来确定type
+    if (type === null) {
+      if (isMultiRange(range)) {
+        type = range.length === 1 ? 'text' : 'multi-text'
+        range = range.length === 1 ? range[0] : range
+      } else {
+        type = 'text'
+      }
+    }
+
+    if (type === 'text') {
+      const selected = this.value || 0
+      return {
+        type,
+        localRange: range,
+        selected
+      }
+    }
+
+    if (type === 'multi-text') {
+      const columns = range.length
+      const selected = isArray(this.value) ? this.value : Array(columns).fill(0)
+      return {
+        type,
+        localRange: range,
+        selected,
+        curSelected: selected,
+        columns
+      }
+    }
+
+    if (type === 'time') {
+      return {
+        type,
+        selected: this.value || ''
+      }
+    }
+
+    if (type === 'date') {
+      return {
+        type,
+        selected: this.value || ''
+      }
+    }
+
+    if (type === 'datetime') {
+      return {
+        type,
+        selected: this.value || ''
+      }
+    }
+  },
+
+  textChange (e) {
+    const { newSelected } = e
+    this.$trigger('change', { value: newSelected })
+  },
+  multiTextColumnChange (e) {
+    const { column, newSelected } = e
+    this.curSelected[column] = newSelected
+    this.$trigger('columnchange', { column, value: newSelected })
+    this.$trigger('change', { value: this.curSelected })
+  },
+  timeChange (e) {
+    const { hour, minute, second } = e
+    const value = padNumZero(hour) + ':' + padNumZero(minute) + (this.containsecond ? ':' + padNumZero(second) : '')
+    this.$trigger('change', { value, hour, minute, second })
+  },
+  dateChange (e) {
+    const { year, month, day } = e
+    const value = [year, padNumZero(month + 1), padNumZero(day)].join('-')
+    this.$trigger('change', { value, year, month, day })
+  },
+  datetimeChange (e) {
+    const { year, month, day, hour, minute } = e
+    const value = [year, padNumZero(month + 1), padNumZero(day), padNumZero(hour), padNumZero(minute)].join('-')
+    this.$trigger('change', { value, year, month, day, hour, minute })
+  }
+})
+
+function isMultiRange (range = []) {
+  return range.length > 0 && range.every(r => Array.isArray(r))
+}
+
+/**
+ * 对<PickerViewColumn>组件的子节点递归收集候选词
+ */
+function recursiveGetCandidates (children = []) {
+  if (children.length === 0) return []
+  return children.map(child => getCandidatesDFS(child.cn || []))
+}
+/**
+ * 以深度遍历方式收集候选词，最多遍历4层，优先查找左子树，直到读取到“#text”节点为止
+ * eg：
+ * <View>A</View> => A
+ * <View><Text>A</Text><Text>B</Text></View> => A
+ */
+function getCandidatesDFS (children = []) {
+  if (children.length === 0) return []
+
+  const allowDepth = 4 // 最深遍历4层，避免无限制递归
+  const trave = function (node, depth) {
+    if (node.nn === '#text') {
+      return node.v
+    }
+    if (depth > allowDepth) return ''
+    if (node.cn) {
+      return trave(node.cn[0], depth + 1) // 优先查找第一个孩子节点，这就要求开发者将候选词始终放在第一个节点中
+    }
+    return ''
+  }
+
+  return children.map(child => {
+    return trave(child, 1)
+  })
+}
+
+function padNumZero (num) {
+  return num.toString().padStart(2, '0')
+}

package/dist/components-harmony/picker-view-column/index.hml

@@ -0,0 +1,3 @@
+<div id="{{id}}">
+  <slot></slot>
+</div>

package/dist/components-harmony/picker-view-column/index.js

@@ -0,0 +1,3 @@
+export default {
+  props: ['id']
+}

package/dist/components-harmony/progress/index.css

@@ -0,0 +1,4 @@
+.progress-horizontal-showInfo {
+  flex-direction: row;
+  align-items: center;
+}