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

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

@@ -0,0 +1,28 @@
+<div class="progress">
+  <div
+    if="{{showInfo && type == 'horizontal'}}"
+    class="progress-horizontal-showInfo"
+    style="min-height: {{fontSize}}px;"
+  >
+    <progress
+      style="color: {{progressColor}};background-color:{{progressBgColor}};stroke-width:{{strokeWidth}}"
+      type="{{type}}"
+      percent="{{percent}}"
+      secondarypercent="{{secondarypercent}}"
+      clockwise="{{clockwise}}"
+    >
+    </progress>
+    <text
+      style="font-size: {{fontSize}};width: 80px; text-align: center;"
+    >{{percent}}%</text>
+  </div>
+  <progress
+    else
+    style="color: {{progressColor}};background-color:{{progressBgColor}};stroke-width:{{strokeWidth}}"
+    type="{{type}}"
+    percent="{{percent}}"
+    secondarypercent="{{secondarypercent}}"
+    clockwise="{{clockwise}}"
+  >
+  </progress>
+</div>

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

@@ -0,0 +1,23 @@
+import { covertHex3ToHex6 } from '../utils'
+
+export default {
+  props: [
+    'type',
+    'percent',
+    'secondarypercent',
+    'clockwise',
+    'showInfo',
+    'fontSize',
+    'strokeWidth',
+    'activeColor',
+    'backgroundColor'
+  ],
+  computed: {
+    progressColor () {
+      return covertHex3ToHex6(this.activeColor)
+    },
+    progressBgColor () {
+      return covertHex3ToHex6(this.backgroundColor)
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+<input
+  id="{{ id }}"
+  value="{{ value }}"
+  type="radio"
+  name="{{ nameValue }}"
+  disabled="{{disabled}}"
+  checked="{{ checked }}"
+  @change="onChange"
+  >
+</input>
+

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

@@ -0,0 +1,41 @@
+export default {
+  props: [
+    'id',
+    'name',
+    'groupId',
+    'value',
+    'checked',
+    'disabled'
+  ],
+
+  computed: {
+    nameValue () {
+      let name = this.name
+      if (this.groupId) {
+        name = this.groupId
+      }
+      return name
+    }
+  },
+
+  onChange (e) {
+    if (e.checked) {
+      const radioGroup = this.findRadioGroup()
+      if (radioGroup && radioGroup.onChange) {
+        radioGroup.onChange({ id: this.id, value: e.value })
+      }
+    }
+  },
+
+  findRadioGroup () {
+    let parent = this.$parent()
+    while (parent) {
+      if (!parent.$child) break
+      const radioGroup = parent.$child(this.groupId)
+      if (radioGroup) {
+        return radioGroup
+      }
+      parent = parent.$parent()
+    }
+  }
+}

package/dist/components-harmony/radio-group/index.hml

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

package/dist/components-harmony/radio-group/index.js

@@ -0,0 +1,11 @@
+import { createOption } from '../utils'
+
+export default createOption({
+  props: [
+    'id'
+  ],
+
+  onChange (e) {
+    this.$trigger('change', { value: e.value })
+  }
+})

package/dist/components-harmony/rich-text/index.hml

@@ -0,0 +1,5 @@
+<richtext
+        id="{{ id }}"
+        class="{{ cls }}">
+    {{ nodeData }}
+</richtext>

package/dist/components-harmony/rich-text/index.js

@@ -0,0 +1,16 @@
+export default {
+  props: {
+    id: String,
+    cls: String,
+    nodes: String || Array
+  },
+  computed: {
+    nodeData () {
+      if (this.nodes && Array.isArray(this.nodes)) {
+        console.error('暂不支持节点列表参数')
+        return ''
+      }
+      return this.nodes
+    }
+  }
+}

package/dist/components-harmony/scroll-view/index.css

@@ -0,0 +1,5 @@
+.container {
+  width: 100%;
+  overflow: scroll;
+  align-items: center;
+}

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

@@ -0,0 +1,12 @@
+<div
+  id="{{id}}"
+  class="container"
+  style="flex-direction: {{flexDirection}};"
+  ref="el"
+  onreachstart="{{onReachStart}}"
+  onreachend="{{onReachEnd}}"
+  onreachtop="{{onReachTop}}"
+  onreachbottom="{{onReachBottom}}"
+>
+  <slot></slot>
+</div>

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

@@ -0,0 +1,65 @@
+import { createOption } from '../utils'
+
+export default createOption({
+  props: {
+    id: String,
+    scrollX: {
+      default: false
+    },
+    scrollY: {
+      default: false
+    },
+    scrollTop: Number,
+    scrollLeft: Number,
+    scrollWithAnimation: {
+      default: false
+    }
+  },
+  computed: {
+    flexDirection () {
+      return this.scrollX ? 'row' : (this.scrollY && 'column')
+    }
+  },
+  onInit () {
+    this.$watch('scrollTop', 'onScrollTopChange')
+    this.$watch('scrollLeft', 'onScrollLeftChange')
+  },
+  onScrollTopChange (newVal) {
+    this.scrollTo('y', newVal)
+  },
+  onScrollLeftChange (newVal) {
+    this.scrollTo('x', newVal)
+  },
+  scrollTo (direction, offset) {
+    const el = this.$refs.el
+    const options = {
+      smooth: this.scrollWithAnimation
+    }
+    options['d' + direction] = offset - el.getScrollOffset()[direction]
+    el.scrollBy(options)
+  },
+  onReachStart () {
+    this.triggerScrollToUpper('left')
+  },
+  onReachEnd () {
+    this.triggerScrollToLower('right')
+  },
+  onReachTop () {
+    this.triggerScrollToUpper('top')
+  },
+  onReachBottom () {
+    this.triggerScrollToLower('bottom')
+  },
+  triggerScrollToUpper (direction) {
+    this.$trigger('scrolltoupper', {
+      type: 'scrolltoupper',
+      detail: { direction }
+    })
+  },
+  triggerScrollToLower (direction) {
+    this.$trigger('scrolltolower', {
+      type: 'scrolltolower',
+      detail: { direction }
+    })
+  }
+})

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

@@ -0,0 +1,16 @@
+<div>
+  <slider
+    id="{{id}}"
+    style="color: {{color}};selected-color: {{selectedColor}};block-color: {{sliderBlockColor}}"
+    min="{{min}}"
+    max="{{max}}"
+    step="{{step}}"
+    disabled="{{disabled}}"
+    value="{{value}}"
+    showsteps="{{showsteps}}"
+    showtips="{{showtips}}"
+    onchange="onChange"
+  ></slider>
+  <text if="{{showValue}}" style="width: {{valueWidth}}; font-size: 14vp; color: gray">{{currentValue}}</text>
+</div>
+

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

@@ -0,0 +1,53 @@
+import { covertHex3ToHex6, createOption } from '../utils'
+
+export default createOption({
+  props: [
+    'id',
+    'min',
+    'max',
+    'step',
+    'disabled',
+    'value',
+    'backgroundcolor',
+    'activecolor',
+    'blockColor',
+    'showValue',
+    'showsteps',
+    'showtips'
+    // 命名规则不一致因为 internalComponents 中有些使用驼峰，有些是短线，和其保持一致
+  ],
+  computed: {
+    color () {
+      return covertHex3ToHex6(this.backgroundcolor)
+    },
+    selectedColor () {
+      return covertHex3ToHex6(this.activecolor)
+    },
+    sliderBlockColor () {
+      return covertHex3ToHex6(this.blockColor)
+    },
+    valueWidth () {
+      if (!this.showValue) {
+        return '0px'
+      }
+      let baseWidth = 28
+      const maxLen = Math.max(this.min.toString()?.length, this.max.toString()?.length, this.step.toString()?.length)
+      if (maxLen > 3) {
+        baseWidth = baseWidth + (maxLen - 3) * 15
+      }
+      return baseWidth + 'vp'
+    }
+  },
+  data () {
+    return {
+      currentValue: this.value || 0
+    }
+  },
+  onChange (e) {
+    if (e.isEnd === 'true') {
+      this.$trigger('change', { progress: e.progress, isEnd: e.isEnd, value: e.value })
+    }
+    this.$trigger('changing', { progress: e.progress, isEnd: e.isEnd, value: e.value })
+    this.currentValue = e.value
+  }
+})

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

@@ -0,0 +1,3 @@
+swiper {
+  height: 150vp;
+}

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

@@ -0,0 +1,14 @@
+<swiper
+  style="indicator-color: {{indicatorColor}};indicator-selected-color: {{indicatorActiveColor}}"
+  id="{{id}}"
+  index="{{current}}"
+  autoplay="{{autoplay}}"
+  interval="{{interval}}"
+  indicator="{{indicatorDots}}"
+  duration="{{duration}}"
+  loop="{{circular}}"
+  vertical="{{vertical}}"
+  @change="onChange"
+>
+  <slot></slot>
+</swiper>

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

@@ -0,0 +1,19 @@
+import { createOption } from '../utils'
+
+export default createOption({
+  props: [
+    'id',
+    'indicatorDots',
+    'indicatorColor',
+    'indicatorActiveColor',
+    'autoplay',
+    'current',
+    'interval',
+    'duration',
+    'circular',
+    'vertical'
+  ],
+  onChange (e) {
+    this.$trigger('change', { current: e.index })
+  }
+})

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

@@ -0,0 +1,7 @@
+<div class="switch">
+  <input if="{{type === 'checkbox'}}" id="{{id}}" type="checkbox" checked="{{checked}}"
+    disabled="{{disabled}}" @change="onChange"></input>
+  <switch else id="{{id}}" checked="{{checked}}" disabled="{{disabled}}" showtext="{{showtext}}"
+    texton="{{texton}}" textoff="{{textoff}}" @change="onChange">
+  </switch>
+</div>

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

@@ -0,0 +1,16 @@
+import { createOption } from '../utils'
+
+export default createOption({
+  props: [
+    'id',
+    'type',
+    'checked',
+    'disabled',
+    'showtext',
+    'texton',
+    'textoff'
+  ],
+  onChange (e) {
+    this.$trigger('change', { value: e.checked })
+  }
+})

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

@@ -0,0 +1,7 @@
+toolbar {
+  position: fixed;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  border-top: 1px solid;
+}

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

@@ -0,0 +1,26 @@
+<toolbar style="border-color: {{borderStyle}};background-color: {{backgroundColor}};">
+  <block
+    for="{{tabbarData.list}}"
+    tid="pagePath"
+  >
+    <!--
+      选用 if else 这种冗余的写法是因为这种写法：
+      color: {{$idx == selected ? selectedColor: color}}; 在 props 更新时不能正确触发 computed
+      待框架修复这个问题或能兼容 Hex3 后，可以进行合并。
+    -->
+    <toolbar-item if="{{$idx != selected}}"
+      icon="{{$item.iconPath}}"
+      value="{{$item.text}}"
+      style="color: {{color}};background-color: transparent;"
+      onclick="jump($item.pagePath)"
+    >
+    </toolbar-item>
+    <toolbar-item else
+      icon="{{$item.selectedIconPath}}"
+      value="{{$item.text}}"
+      style="color: {{selectedColor}};background-color: transparent;"
+      onclick="jump($item.pagePath)"
+    >
+    </toolbar-item>
+  </block>
+</toolbar>

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

@@ -0,0 +1,42 @@
+import router from '@system.router'
+
+import { covertHex3ToHex6 } from '../utils'
+
+export default {
+  props: {
+    tabbarData: {
+      default: {}
+    },
+    selected: Number
+  },
+  computed: {
+    borderStyle () {
+      return this.tabbarData.borderStyle || 'black'
+    },
+    color () {
+      return covertHex3ToHex6(this.tabbarData.color)
+    },
+    selectedColor () {
+      return covertHex3ToHex6(this.tabbarData.selectedColor)
+    },
+    backgroundColor () {
+      return covertHex3ToHex6(this.tabbarData.backgroundColor)
+    }
+  },
+  jump (pagePath) {
+    // TODO 如果跳的 tabbar 页已打开过，优先复用
+    const app = getApp()
+    const pages = app.pageStack
+
+    for (let i = 0; i < pages.length; i++) {
+      const item = pages[i]
+      if (item === pagePath) {
+        return router.back({
+          uri: item
+        })
+      }
+    }
+
+    router.push({ uri: pagePath })
+  }
+}

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

@@ -0,0 +1,24 @@
+<textarea 
+  id={{id}}
+  value="{{value}}"
+  placeholder="{{placeholder}}"
+  maxlength="{{maxlength}}"
+  disabled="{{disabled}}"
+  headericon="{{headericon}}"
+  extend="{{autoHeight}}"
+  showcounter="{{showcounter}}"
+  menuoptions="{{menuoptions}}"
+  autofocus="{{autoFocus}}"
+  selectedstart="{{selectionStart}}"
+  selectedend="{{selectionEnd}}"
+  softkeyboardenabled="{{softkeyboardenabled}}"
+  @change="onInput"
+  @focus="onFocus"
+  @blur="onBlur"
+  @translate="onTranslate"
+  @share="onShare"
+  @search="onSearch"
+  @optionselect="onOptionSelect"
+  @selectchange="onSelectChange"
+>
+</textarea>

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

@@ -0,0 +1,92 @@
+import window from '@ohos.window'
+
+import { createOption } from '../utils'
+
+export default createOption({
+  data () {
+    return {
+      textareaValue: this.value || '',
+      height: 0
+    }
+  },
+
+  props: [
+    'id',
+    'value',
+    'disabled',
+    'placeholder',
+    'maxlength',
+    'autoFocus',
+    'autoHeight',
+    'selectionStart',
+    'selectionEnd',
+    'headericon',
+    'showcounter',
+    'menuoptions',
+    'softkeyboardenabled'
+  ],
+
+  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
+        }
+      })
+    })
+    this.$watch('value', 'onPropertyChange')
+  },
+
+  onPropertyChange (newV) {
+    this.textareaValue = newV
+  },
+
+  onInput (e) {
+    this.textareaValue = e.value
+    this.$trigger('input', {
+      value: e.text, cursor: e.text.length, keyCode: null
+    })
+  },
+
+  onFocus () {
+    this.$trigger('focus', {
+      value: this.textareaValue, height: this.height
+    })
+  },
+
+  onBlur () {
+    this.$trigger('blur', {
+      value: this.textareaValue, height: this.height
+    })
+  },
+
+  onTranslate (e) {
+    this.$trigger('translate', e)
+  },
+
+  onShare (e) {
+    this.$trigger('share', e)
+  },
+
+  onSearch (e) {
+    this.$trigger('search', e)
+  },
+
+  onOptionSelect (e) {
+    this.$trigger('optionselect', e)
+  },
+
+  onSelectChange (e) {
+    this.$trigger('selectchange', e)
+  },
+
+  onKeyboardHeightChange (height) {
+    this.$trigger('keyboardheightchange', {
+      height, duration: 0
+    })
+  }
+})

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

@@ -0,0 +1,41 @@
+export function covertHex3ToHex6 (color) {
+  return color && color.replace(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i, '#$1$1$2$2$3$3')
+}
+
+export function createOption (option) {
+  option.$trigger = function (event, params) {
+    this.$emit(event, { id: this.id, ...params })
+  }
+  return option
+}
+
+export function queryToJson (str) {
+  const dec = decodeURIComponent
+  const qp = str.split('&')
+  const ret = {}
+  let name
+  let val
+  for (let i = 0, l = qp.length, item; i < l; ++i) {
+    item = qp[i]
+    if (item.length) {
+      const s = item.indexOf('=')
+      if (s < 0) {
+        name = dec(item)
+        val = ''
+      } else {
+        name = dec(item.slice(0, s))
+        val = dec(item.slice(s + 1))
+      }
+      if (typeof ret[name] === 'string') {
+        ret[name] = [ret[name]]
+      }
+
+      if (Array.isArray(ret[name])) {
+        ret[name].push(val)
+      } else {
+        ret[name] = val
+      }
+    }
+  }
+  return ret
+}

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

@@ -0,0 +1,7 @@
+<div>
+  <video id="{{id}}" style="object-fit:{{objectFit}};" src="{{src}}" muted="{{muted}}"
+    autoplay="{{autoplay}}" poster="{{poster}}" controls="{{controls}}" direction="{{videoDirection}}" loop="{{loop}}" starttime="{{initialTime}}"
+    speed="{{speed}}" @prepared="preparedCallback" @start="startCallback" @pause="pauseCallback"
+    @finish="finishCallback" @stop="stopCallback" @error="errorCallback" @seeked="seekedCallback"
+    @timeupdate="timeupdateCallback" @fullscreenchange="fullscreenChangeCallback" @click="clickCallback"></video>
+</div>