@wot-ui/ui 1.0.0 → 2.0.0-alpha.3

package/components/wd-progress/wd-progress.vue

@@ -0,0 +1,249 @@
+<template>
+  <view
+    :class="`wd-progress ${percentPosition.type === 'inner' ? 'wd-progress--inner' : ''} ${status ? 'wd-progress--' + status : ''} ${
+      percentage === 0 ? 'is-zero' : ''
+    } ${customClass}`"
+    :style="customStyle"
+  >
+    <view class="wd-progress__outer">
+      <view class="wd-progress__inner" :style="rootStyle">
+        <!-- inner 渲染到 progress__inner 内部 -->
+        <template v-if="percentPosition.type === 'inner'">
+          <view v-if="!hideText" :class="['wd-progress__label', percentPosition.align ? `is-align-${percentPosition.align}` : '']">
+            {{ percentage }}%
+          </view>
+          <wd-icon
+            v-else-if="status"
+            :custom-class="`wd-progress__label wd-progress__icon ${hideText ? 'is-hide-text' : ''} ${
+              percentPosition.align ? `is-align-${percentPosition.align}` : ''
+            }`"
+            :name="iconName"
+            :color="isString(color) ? color : ''"
+          ></wd-icon>
+        </template>
+      </view>
+    </view>
+    <!-- outer 渲染到外侧 -->
+    <template v-if="percentPosition.type === 'outer'">
+      <view v-if="!hideText" class="wd-progress__label">{{ percentage }}%</view>
+      <wd-icon
+        v-else-if="status"
+        :custom-class="`wd-progress__label wd-progress__icon ${hideText ? 'is-hide-text' : ''}`"
+        :name="iconName"
+        :color="isString(color) ? color : ''"
+      ></wd-icon>
+    </template>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-progress',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, ref, watch } from 'vue'
+import { isArray, isDef, isObj, isString, objToStyle, pause } from '../../common/util'
+import { progressProps, type ProgressColor } from './types'
+
+const props = defineProps(progressProps)
+// 进度条渲染颜色
+const displayColor = ref<string>('')
+
+// 进度条渲染进度比例
+const displayPercentage = ref<number>(0)
+
+// 百分比变更差值
+const percentageDiff = ref<number>(0)
+
+// 进度条延迟定时器
+let animationTimer: ReturnType<typeof setTimeout> | null = null
+
+/**
+ * 根节点样式，控制进度条底色、宽度及过渡动画
+ */
+const rootStyle = computed(() => {
+  return objToStyle({
+    background: displayColor.value,
+    width: `${displayPercentage.value}%`,
+    'transition-duration': `${percentageDiff.value * props.duration * 0.001}s`
+  })
+})
+
+/**
+ * 内置或外置图标的名称，根据状态不同返回对应图标
+ */
+const iconName = computed(() => {
+  let icon: string = ''
+  switch (props.status) {
+    case 'danger':
+      icon = 'close-circle-fill'
+      break
+    case 'success':
+      icon = 'check-circle-fill'
+      break
+    case 'warning':
+      icon = 'exclamation-circle-fill'
+      break
+    default:
+      break
+  }
+  return icon
+})
+
+watch(
+  () => [props.percentage, props.color, props.duration],
+  () => {
+    validatePercentage(props.percentage)
+    updateProgress()
+  },
+  { immediate: true }
+)
+
+/**
+ * 校验 percentage 是否合法
+ * @param {number} value 百分比值
+ */
+function validatePercentage(value: number) {
+  if (Number.isNaN(value) || value < 0 || value > 100) {
+    console.error('The value of percentage must be between 0 and 100')
+  }
+}
+
+/**
+ * 进度条前进算法
+ * @param {ProgressColor[]} partList 颜色及对应进度断点数组
+ * @param {number} percentage 目标进度值
+ * @returns {boolean}
+ */
+function updateProgressForward(partList: ProgressColor[], percentage: number) {
+  return partList.some((part, index) => {
+    if (displayPercentage.value < part.percentage && part.percentage <= percentage) {
+      renderProgressStep(part.percentage, part.color)
+      return true
+    } else if (index === partList.length - 1) {
+      renderProgressStep(percentage, part.color)
+    }
+  })
+}
+
+/**
+ * 进度条后退算法
+ * @param {ProgressColor[]} partList 颜色及对应进度断点数组
+ * @param {number} percentage 目标进度值
+ * @returns {boolean}
+ */
+function updateProgressBackward(partList: ProgressColor[], percentage: number) {
+  return partList.some((part) => {
+    if (percentage <= part.percentage) {
+      renderProgressStep(percentage, part.color)
+      return true
+    }
+  })
+}
+
+/**
+ * 更新进度条的显示逻辑主入口
+ * @returns {Promise<void>}
+ */
+async function updateProgress() {
+  const { percentage, color } = props
+  if (!isDef(color) || (isArray(color) && color.length === 0)) {
+    percentageDiff.value = Math.abs(percentage - displayPercentage.value)
+    await pause()
+    displayPercentage.value = percentage
+    return
+  }
+  if (displayPercentage.value === percentage) return
+
+  const colorArray = isArray(color) ? color : [color]
+  validateColorArray(colorArray)
+  const partList = createPartList(colorArray)
+  displayPercentage.value > percentage ? updateProgressBackward(partList, percentage) : updateProgressForward(partList, percentage)
+}
+
+/**
+ * 判断是否是复合类型的颜色及进度数组
+ * @param {string[] | ProgressColor[]} array 要判断的数组
+ * @returns {array is ProgressColor[]} 判定依据
+ */
+function isProgressColorArray(array: string[] | ProgressColor[]): array is ProgressColor[] {
+  return array.every(
+    (color) => isObj(color) && Object.prototype.hasOwnProperty.call(color, 'color') && Object.prototype.hasOwnProperty.call(color, 'percentage')
+  )
+}
+
+/**
+ * 判断是否是纯字符串形式的颜色数组
+ * @param {string[] | ProgressColor[]} array 要判断的数组
+ * @returns {array is string[]} 判定依据
+ */
+function isStringArray(array: string[] | ProgressColor[]): array is string[] {
+  return array.every((item) => typeof item === 'string')
+}
+
+/**
+ * 校验颜色数组结构安全性
+ * @param {string[] | ProgressColor[]} colorArray 颜色数组
+ * @throws {Error} 未遵循 ProgressColor | String 的数组格式将引发错误
+ */
+function validateColorArray(colorArray: string[] | ProgressColor[]) {
+  const isStrArray = isStringArray(colorArray)
+  const isObjArray = isProgressColorArray(colorArray)
+  if (!isStrArray && !isObjArray) {
+    throw Error('Color must be String or Object with color and percentage')
+  }
+  if (isObjArray && colorArray.some(({ percentage }) => Number.isNaN(percentage))) {
+    throw Error('All the percentage must can be formatted to Number')
+  }
+}
+
+/**
+ * 创建基于刻度的颜色渲染流
+ * @param {string[] | ProgressColor[]} colorArray 颜色数组
+ * @returns {ProgressColor[]} 对齐进度标识后的颜色数组
+ */
+function createPartList(colorArray: string[] | ProgressColor[]) {
+  const partNum = 100 / colorArray.length
+  return isProgressColorArray(colorArray)
+    ? colorArray.sort((a, b) => a.percentage - b.percentage)
+    : colorArray.map((item, index) => ({
+        color: item,
+        percentage: (index + 1) * partNum
+      }))
+}
+
+/**
+ * 内部驱动方法更新渲染视图及进度
+ * @param {number} targetPercent 阶段目标进度
+ * @param {string} color 颜色描述
+ * @returns {void}
+ */
+function renderProgressStep(targetPercent: number, color: string) {
+  if (animationTimer) return
+  const { duration } = props
+  percentageDiff.value = Math.abs(targetPercent - displayPercentage.value)
+  setTimeout(() => {
+    displayPercentage.value = targetPercent
+    displayColor.value = color
+    animationTimer = setTimeout(() => {
+      animationTimer && clearTimeout(animationTimer)
+      animationTimer = null
+      updateProgress()
+    }, percentageDiff.value * duration)
+  }, 50)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-radio/index.scss

@@ -0,0 +1,189 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 文案与图标间距
+$radio-label-margin: var(--wot-radio-label-margin, $spacing-tight) !default;
+// 选中颜色
+$radio-checked-color: var(--wot-radio-checked-color, $primary-6) !default;
+// 图标尺寸
+$radio-icon-size: var(--wot-radio-icon-size, $n-22) !default;
+// 未选中图标颜色
+$radio-unchecked-color: var(--wot-radio-unchecked-color, $coolgrey-3) !default;
+// 文案字号
+$radio-label-font-size: var(--wot-radio-label-font-size, $typography-body-size-main) !default;
+// 文案颜色
+$radio-label-color: var(--wot-radio-label-color, $text-main) !default;
+// 文案行高
+$radio-label-line-height: var(--wot-radio-label-line-height, $typography-body-line--height-size-main) !default;
+// 禁用态透明度
+$radio-disabled: var(--wot-radio-disabled, $opacity-disabled) !default;
+// 水平模式间距
+$radio-horizontal-margin: var(--wot-radio-horizontal-margin, $spacing-zero $spacing-extra-loose $spacing-zero $spacing-zero) !default;
+// 按钮模式项间距
+$radio-button-margin: var(--wot-radio-button-margin, $spacing-zero $spacing-extra-loose $spacing-extra-loose $spacing-zero) !default;
+// 按钮模式边框宽度
+$radio-button-border-width: var(--wot-radio-button-border-width, $n-1) !default;
+// 按钮模式标记圆角
+$radio-button-shape-border-radius: var(--wot-radio-button-shape-border-radius, $radius-radius-full) !default;
+// 按钮模式标记尺寸
+$radio-button-shape-size: var(--wot-radio-button-shape-size, $n-26) !default;
+// 按钮模式字号
+$radio-button-font-size: var(--wot-radio-button-font-size, $typography-body-size-main) !default;
+// 按钮模式行高
+$radio-button-line-height: var(--wot-radio-button-line-height, $typography-body-line--height-size-main) !default;
+// 按钮模式背景色
+$radio-button-bg: var(--wot-radio-button-bg, $filled-bottom) !default;
+// 按钮模式选中背景色
+$radio-button-checked-bg: var(--wot-radio-button-checked-bg, $filled-oppo) !default;
+// 按钮模式图标尺寸
+$radio-button-icon-size: var(--wot-radio-button-icon-size, $n-10) !default;
+// 按钮模式最小宽度
+$radio-button-min-width: var(--wot-radio-button-min-width, 74px) !default;
+// 按钮模式最大宽度
+$radio-button-max-width: var(--wot-radio-button-max-width, 148px) !default;
+// 按钮模式圆角
+$radio-button-border-radius: var(--wot-radio-button-border-radius, $radius-main) !default;
+// 按钮模式内边距
+$radio-button-padding: var(--wot-radio-button-padding, $padding-extra-tight $padding-extra-loose) !default;
+// 按钮模式图标颜色
+$radio-button-icon-color: var(--wot-radio-button-icon-color, $icon-white) !default;
+// 按钮模式标记顶部偏移
+$radio-button-shape-top: var(--wot-radio-button-shape-top, calc(-1 * #{$n-11})) !default;
+// 按钮模式标记左侧偏移
+$radio-button-shape-left: var(--wot-radio-button-shape-left, calc(-1 * #{$n-9})) !default;
+// 按钮模式标记右侧偏移
+$radio-button-shape-right: var(--wot-radio-button-shape-right, calc(-1 * #{$n-9})) !default;
+// 按钮模式图标顶部偏移
+$radio-button-icon-top: var(--wot-radio-button-icon-top, calc(13 * #{$n-1})) !default;
+// 按钮模式图标右侧偏移
+$radio-button-icon-right: var(--wot-radio-button-icon-right, $n-4) !default;
+// 按钮模式图标左侧偏移
+$radio-button-icon-left: var(--wot-radio-button-icon-left, $n-4) !default;
+
+@include b(radio) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  overflow: hidden;
+
+  @include m(horizontal) {
+    display: inline-flex;
+    justify-content: flex-start;
+    vertical-align: middle;
+
+    &:not(:last-child) {
+      margin: $radio-horizontal-margin;
+    }
+  }
+
+  @include m(right) {
+    .wd-radio__label {
+      margin-right: $radio-label-margin;
+    }
+  }
+
+  @include m(left) {
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+
+    .wd-radio__label {
+      margin-left: $radio-label-margin;
+    }
+  }
+
+  @include edeep(icon) {
+    font-size: $radio-icon-size;
+    height: $radio-icon-size;
+    line-height: $radio-icon-size;
+    color: $radio-unchecked-color;
+    transition: all 0.2s;
+  }
+
+  @include e(label) {
+    font-size: $radio-label-font-size;
+    color: $radio-label-color;
+    line-height: $radio-label-line-height;
+    text-align: center;
+    word-break: break-all;
+  }
+
+  @include e(shape) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include when(checked) {
+    :deep(.wd-radio__icon) {
+      color: $radio-checked-color;
+    }
+  }
+
+  @include when(button) {
+    display: inline-block;
+    min-width: $radio-button-min-width;
+    max-width: $radio-button-max-width;
+    margin: $radio-button-margin;
+    border-radius: $radio-button-border-radius;
+    background: $radio-button-bg;
+    font-size: $radio-button-font-size;
+    box-sizing: border-box;
+    border: $radio-button-border-width solid $radio-button-bg;
+
+    .wd-radio__label {
+      position: relative;
+      padding: $radio-button-padding;
+      margin: auto;
+      @include lineEllipsis;
+    }
+
+    .wd-radio__shape {
+      position: absolute;
+      top: $radio-button-shape-top;
+      left: $radio-button-shape-left;
+      width: $radio-button-shape-size;
+      height: $radio-button-shape-size;
+      border-radius: $radio-button-shape-border-radius;
+      background: transparent;
+    }
+
+    :deep(.wd-radio__icon) {
+      position: absolute;
+      top: $radio-button-icon-top;
+      right: $radio-button-icon-right;
+      font-size: $radio-button-icon-size;
+      line-height: $radio-button-icon-size;
+      height: $radio-button-icon-size;
+      color: $radio-button-icon-color;
+    }
+
+    &.wd-radio--right {
+      .wd-radio__shape {
+        left: auto;
+        right: $radio-button-shape-right;
+      }
+
+      :deep(.wd-radio__icon) {
+        right: auto;
+        left: $radio-button-icon-left;
+      }
+    }
+
+    @include when(checked) {
+      color: $radio-checked-color;
+      border-color: currentColor;
+      background: $radio-button-checked-bg;
+
+      .wd-radio__shape {
+        color: $radio-checked-color;
+        background: currentColor;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    opacity: $radio-disabled;
+  }
+}

package/components/wd-radio/types.ts

@@ -0,0 +1,64 @@
+import type { PropType } from 'vue'
+import { baseProps, makeRequiredProp } from '../../common/props'
+
+export type RadioType = 'dot' | 'circle' | 'square' | 'button'
+
+export type RadioPlacement = 'left' | 'right'
+
+export type RadioDirection = 'horizontal' | 'vertical'
+
+export const radioProps = {
+  ...baseProps,
+  /**
+   * 选中时的值
+   */
+  value: makeRequiredProp([String, Number, Boolean]),
+  /**
+   * 单选框类型
+   * 可选值: dot | circle | square | button
+   * 默认值: 继承自 radio-group
+   */
+  type: String as PropType<RadioType>,
+  /**
+   * 选中的颜色
+   * 默认值: 继承自 radio-group
+   */
+  checkedColor: String,
+  /**
+   * 未选中状态的颜色
+   * 默认值: 继承自 radio-group
+   */
+  uncheckedColor: String,
+  /**
+   * 是否禁用
+   * 默认值: 继承自 radio-group
+   */
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * 是否只读
+   * 默认值: 继承自 radio-group
+   */
+  readonly: {
+    type: Boolean,
+    default: void 0
+  },
+  /**
+   * 布局方向
+   * 可选值: 'horizontal' | 'vertical'
+   * 默认值: 继承自 radio-group
+   */
+  direction: String as PropType<RadioDirection>,
+  /**
+   * 图标位置
+   * 可选值: 'left' | 'right'
+   * 默认值: 继承自 radio-group
+   */
+  placement: String as PropType<RadioPlacement>,
+  /**
+   * 自定义label文本类名
+   */
+  customLabelClass: String
+}

package/components/wd-radio/wd-radio.vue

@@ -0,0 +1,164 @@
+<template>
+  <view
+    :class="`wd-radio wd-radio--${placementValue}  ${isButton ? 'is-button' : 'wd-radio--' + directionValue} ${isChecked ? 'is-checked' : ''} ${
+      disabledValue ? 'is-disabled' : ''
+    } ${customClass}`"
+    :style="customStyle"
+    @click="handleClick"
+  >
+    <view :class="`wd-radio__label ${customLabelClass || ''}`" v-if="$slots.default">
+      <slot></slot>
+    </view>
+
+    <template v-if="isButton">
+      <slot name="icon" :is-checked="isChecked">
+        <view v-if="isChecked" class="wd-radio__shape">
+          <wd-icon custom-class="wd-radio__icon" :custom-style="iconStyle" :name="iconValue"></wd-icon>
+        </view>
+      </slot>
+    </template>
+    <view v-else class="wd-radio__shape">
+      <slot name="icon" :is-checked="isChecked">
+        <wd-icon custom-class="wd-radio__icon" :custom-style="iconStyle" :name="iconValue"></wd-icon>
+      </slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-radio',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, watch } from 'vue'
+import { useParent } from '../../composables/useParent'
+import { RADIO_GROUP_KEY } from '../wd-radio-group/types'
+import { type RadioDirection, type RadioPlacement, radioProps, type RadioType } from './types'
+import { getPropByPath, isDef } from '../../common/util'
+
+const props = defineProps(radioProps)
+
+const { parent: radioGroup } = useParent(RADIO_GROUP_KEY)
+
+const isChecked = computed(() => {
+  if (radioGroup.value) {
+    return props.value === radioGroup.value.props.modelValue
+  } else {
+    return false
+  }
+})
+
+const typeValue = computed(() => {
+  return props.type || (getPropByPath(radioGroup.value, 'props.type') as RadioType)
+})
+
+const iconValue = computed(() => {
+  let icon = ''
+  switch (typeValue.value) {
+    case 'circle':
+      icon = isChecked.value ? 'check-circle-fill' : 'uncheck-circle'
+      break
+    case 'square':
+      icon = isChecked.value ? 'check-square-fill' : 'uncheck-square'
+      break
+    case 'dot':
+      icon = isChecked.value ? 'check-circle-radio-fill' : 'uncheck-circle'
+      break
+    case 'button':
+      icon = isChecked.value ? 'check' : ''
+      break
+    default:
+      break
+  }
+  return icon
+})
+
+const checkedColorValue = computed(() => {
+  return props.checkedColor || getPropByPath(radioGroup.value, 'props.checkedColor')
+})
+
+const uncheckedColorValue = computed(() => {
+  return props.uncheckedColor || getPropByPath(radioGroup.value, 'props.uncheckedColor')
+})
+
+const readonlyValue = computed(() => {
+  if (isDef(props.readonly)) {
+    return props.readonly
+  } else {
+    return getPropByPath(radioGroup.value, 'props.readonly')
+  }
+})
+
+const iconStyle = computed(() => {
+  if (isButton.value) return ''
+  if (isChecked.value && checkedColorValue.value) {
+    return `color: ${checkedColorValue.value}`
+  }
+  if (!isChecked.value && uncheckedColorValue.value) {
+    return `color: ${uncheckedColorValue.value}`
+  }
+  return ''
+})
+
+const isButton = computed(() => {
+  return typeValue.value === 'button'
+})
+
+const disabledValue = computed(() => {
+  if (isDef(props.disabled)) {
+    return props.disabled
+  } else {
+    return getPropByPath(radioGroup.value, 'props.disabled')
+  }
+})
+
+const directionValue = computed(() => {
+  if (isDef(props.direction)) {
+    return props.direction
+  } else {
+    return getPropByPath(radioGroup.value, 'props.direction') as RadioDirection
+  }
+})
+
+const placementValue = computed<RadioPlacement>(() => {
+  if (isDef(props.placement)) {
+    return props.placement
+  } else {
+    return getPropByPath(radioGroup.value, 'props.placement')
+  }
+})
+
+watch(
+  () => props.type,
+  (newValue) => {
+    const type = ['check', 'dot', 'button', 'square']
+    if (!newValue || type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
+  }
+)
+
+/**
+ * 点击子元素，通知父元素触发change事件
+ */
+function handleClick() {
+  const { value } = props
+  if (!disabledValue.value && !readonlyValue.value && radioGroup.value && isDef(value)) {
+    const allowUncheck = radioGroup.value.props.allowUncheck
+    if (allowUncheck && isChecked.value) {
+      radioGroup.value.updateValue(null)
+    } else {
+      radioGroup.value.updateValue(value)
+    }
+  }
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-radio-group/index.scss

@@ -0,0 +1,5 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+@include b(radio-group) {
+}