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

package/components/wd-radio-group/types.ts

@@ -0,0 +1,70 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-05-08 22:54:27
+ * @LastEditTime: 2026-03-25 16:22:03
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-radio-group/types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import type { RadioDirection, RadioPlacement, RadioType } from '../wd-radio/types'
+import { baseProps, makeBooleanProp, makeStringProp } from '../../common/props'
+
+export const radioGroupProps = {
+  ...baseProps,
+  /**
+   * 会自动选中value对应的单选框
+   */
+  modelValue: [String, Number, Boolean],
+  /**
+   * 单选框类型
+   * 可选值: dot | circle | square | button
+   * 默认值: circle
+   */
+  type: makeStringProp<RadioType>('circle'),
+  /**
+   * 选中的颜色
+   */
+  checkedColor: String,
+  /**
+   * 未选中状态的颜色
+   */
+  uncheckedColor: String,
+  /**
+   * 是否禁用
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否只读
+   * 默认值: false
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 图标位置
+   * 可选值: 'left' | 'right'
+   * 默认值: left
+   */
+  placement: makeStringProp<RadioPlacement>('left'),
+  /**
+   * 布局方向
+   * 可选值: 'horizontal' | 'vertical'
+   * 默认值: vertical
+   */
+  direction: makeStringProp<RadioDirection>('vertical'),
+  /**
+   * 是否允许取消选中
+   * 默认值: false
+   */
+  allowUncheck: makeBooleanProp(false)
+}
+
+export type RadioProps = ExtractPropTypes<typeof radioGroupProps>
+
+export type RadioGroupProvide = {
+  props: Partial<RadioProps>
+  updateValue: (value: string | number | boolean | null) => void
+}
+
+export const RADIO_GROUP_KEY: InjectionKey<RadioGroupProvide> = Symbol('wd-radio-group')

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

@@ -0,0 +1,53 @@
+<template>
+  <view :class="`wd-radio-group  ${customClass}`" :style="customStyle">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-radio-group',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { useChildren } from '../../composables/useChildren'
+import { RADIO_GROUP_KEY, radioGroupProps } from './types'
+
+const props = defineProps(radioGroupProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren } = useChildren(RADIO_GROUP_KEY)
+
+linkChildren({ props, updateValue })
+
+watch(
+  () => props.type,
+  (newValue) => {
+    // type: 'dot', 'button', 'circle', 'square'
+    const type = ['circle', 'dot', 'button', 'square']
+    if (type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
+  },
+  { deep: true, immediate: true }
+)
+
+/**
+ * @description 处理radio子节点通知
+ */
+function updateValue(value: string | number | boolean | null) {
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-rate/index.scss

@@ -0,0 +1,57 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 未激活图标颜色
+$rate-color: var(--wot-rate-color, $filled-extra-strong) !default;
+// 激活图标颜色
+$rate-active-color: var(--wot-rate-active-color, $classifyapplication-yellow-content) !default;
+// 图标尺寸
+$rate-size: var(--wot-rate-size, $n-24) !default;
+// 禁用态透明度
+$rate-disabled-opacity: var(--wot-rate-disabled-opacity, $opacity-disabled) !default;
+// 图标间距
+$rate-item-space: var(--wot-rate-item-space, $spacing-extra-tight) !default;
+
+@include b(rate) {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+
+  @include e(item) {
+    position: relative;
+    display: inline-block;
+    touch-action: none; // 禁用默认触摸行为
+
+    &:not(:last-child) {
+      margin-right: $rate-item-space;
+    }
+  }
+
+  @include edeep(item-star) {
+    -webkit-background-clip: text !important;
+    color: transparent;
+    background: $rate-color;
+    font-size: $rate-size;
+
+    @include m(active) {
+      background: $rate-active-color;
+    }
+  }
+
+  @include e(item-half) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    width: 50%;
+  }
+
+  @include when(disabled) {
+    cursor: not-allowed;
+    opacity: $rate-disabled-opacity;
+  }
+
+  @include when(block) {
+    display: block;
+  }
+}

package/components/wd-rate/types.ts

@@ -0,0 +1,86 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp, numericProp } from '../../common/props'
+
+export const rateProps = {
+  ...baseProps,
+  /**
+   * 评分最大值
+   * 类型: number
+   * 默认值: 5
+   */
+  num: makeNumberProp(5),
+  /**
+   * 当前分数，使用v-model进行双向绑定
+   * 类型: string | number | null
+   * 默认值: null
+   */
+  modelValue: {
+    type: [String, Number, null] as PropType<string | number | null>,
+    default: null
+  },
+  /**
+   * 是否只读
+   * 类型: boolean
+   * 默认值: false
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 图标大小
+   * 类型: string
+   */
+  size: String,
+  /**
+   * 图标间距
+   * 类型: string
+   */
+  space: numericProp,
+  /**
+   * 未选中的图标颜色
+   * 类型: string
+   */
+  color: String,
+  /**
+   * 选中的图标颜色，支持传颜色数组（用于分段颜色）
+   * 类型: string | Array<string>
+   * 默认值: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)'
+   */
+  activeColor: {
+    type: [String, Array] as PropType<string | Array<string>>
+  },
+  /**
+   * 未选中的图标类名
+   * 类型: string
+   * 默认值: 'star'
+   */
+  icon: makeStringProp('star-fill'),
+  /**
+   * 选中的图标类名
+   * 类型: string
+   * 默认值: 'star-on'
+   */
+  activeIcon: makeStringProp('star-fill'),
+  /**
+   * 是否禁用
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否允许半选
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowHalf: makeBooleanProp(false),
+  /**
+   * 当 clearable 属性设置为 true，再次点击相同的值时，可以将值重置为 0。
+   * 类型: boolean
+   * 默认值: false
+   */
+  clearable: makeBooleanProp(false),
+  /**
+   * 是否为块级元素
+   * 类型: boolean
+   * 默认值: false
+   */
+  block: makeBooleanProp(false)
+}

package/components/wd-rate/wd-rate.vue

@@ -0,0 +1,168 @@
+<template>
+  <view :class="`wd-rate ${disabled ? 'is-disabled' : ''} ${block ? 'is-block' : ''} ${customClass}`" :style="customStyle" @touchmove="onTouchMove">
+    <view
+      v-for="(rate, index) in rateList"
+      :key="index"
+      :data-index="index"
+      class="wd-rate__item"
+      :style="`${isDef(space) ? `margin-right: ${index == rateList.length - 1 ? 0 : addUnit(space)}` : ''}`"
+    >
+      <wd-icon
+        :custom-class="`wd-rate__item-star ${rate === '100%' ? 'wd-rate__item-star--active' : ''}`"
+        :name="isActive(rate) ? activeIcon : icon"
+        :custom-style="`${rate === '100%' ? iconActiveStyle : iconStyle} ${iconSize}`"
+        @click="handleClick(index, false)"
+      />
+      <view v-if="props.allowHalf" class="wd-rate__item-half" @click.stop="handleClick(index, true)">
+        <wd-icon
+          :custom-class="`wd-rate__item-star ${rate !== '0' ? 'wd-rate__item-star--active' : ''}`"
+          :name="isActive(rate) ? activeIcon : icon"
+          :custom-style="`${rate !== '0' ? iconActiveStyle : iconStyle} ${iconSize}`"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-rate',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, getCurrentInstance, ref, watch } from 'vue'
+import { rateProps } from './types'
+import { addUnit, getRect, isDef } from '../../common/util'
+const { proxy } = getCurrentInstance() as any
+
+const props = defineProps(rateProps)
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const rateList = ref<Array<string>>([])
+const iconStyle = computed(() => {
+  if (!props.color) return ''
+  return `background:${props.color};`
+})
+
+const iconSize = computed(() => {
+  if (isDef(props.size)) {
+    return `font-size:${addUnit(props.size)};`
+  }
+  return ''
+})
+
+const iconActiveStyle = computed(() => {
+  const { activeColor, modelValue, num } = props
+  let color = ''
+  if (Array.isArray(activeColor)) {
+    if (activeColor.length === 0) {
+      console.error('activeColor cannot be an empty array')
+    } else {
+      color = Number(modelValue) <= num * 0.6 || !activeColor[1] ? activeColor[0] : activeColor[1]
+    }
+  } else {
+    color = activeColor as string
+  }
+  return `background:${color};`
+})
+
+watch(
+  [() => props.num, () => props.modelValue],
+  () => {
+    computeRateList()
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 当前选项是否为激活状态
+const isActive = (rate: string) => {
+  return rate !== '0'
+}
+
+/**
+ * @description 计算当前应当展示的rate数量
+ */
+function computeRateList() {
+  const { modelValue, num, allowHalf } = props
+  // value和num都准备好才能计算
+  if (modelValue === null || !num) return
+  if (typeof modelValue !== 'number') {
+    console.error('[wot ui] error(wd-rate): the value of wd-rate should be a number')
+    return
+  }
+  const tempRateList: string[] = []
+  const fullLength = Math.floor(modelValue)
+  for (let i = 0; i < num; i++) {
+    if (i < fullLength) {
+      tempRateList.push('100%')
+    } else if (i === fullLength && allowHalf && modelValue % 1 !== 0) {
+      tempRateList.push('50%')
+    } else {
+      tempRateList.push('0')
+    }
+  }
+  rateList.value = tempRateList
+}
+
+/**
+ * @description 处理点击事件
+ * @param index 点击的索引
+ * @param isHalf 是否为半星
+ */
+function handleClick(index: number, isHalf: boolean) {
+  const { readonly, disabled, clearable, allowHalf, modelValue } = props
+  if (readonly || disabled) return
+  let value = isHalf ? index + 0.5 : index + 1
+  // 点击清空逻辑：当点击的值与当前modelValue相等且等于最小值时允许清空
+  if (clearable) {
+    const minValue = allowHalf ? 0.5 : 1
+    if (value === modelValue && value === minValue) {
+      value = 0
+    }
+  }
+  updateValue(value)
+}
+
+/**
+ * @description 设置评分值并触发事件
+ */
+function updateValue(value: number) {
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+
+async function onTouchMove(event: TouchEvent) {
+  if (props.readonly || props.disabled) return
+  const { clientX } = event.touches[0]
+  const rateItems = await getRect('.wd-rate__item', true, proxy)
+  const targetIndex = Array.from(rateItems).findIndex((rect) => {
+    return clientX >= rect.left! && clientX <= rect.right!
+  })
+  if (targetIndex !== -1) {
+    const target = rateItems[targetIndex]
+    const itemWidth = target.width!
+    const isHalf = props.allowHalf && clientX - target.left! < itemWidth / 2
+    const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
+    if (value >= 0.5) {
+      const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
+      updateValue(value)
+    }
+  }
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-resize/index.scss

@@ -0,0 +1,31 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 组件级 CSS 变量定义
+$resize-container-min-size: var(--wot-resize-container-min-size, $n-1) !default; // 容器最小宽高
+$resize-wrapper-z-index: var(--wot-resize-wrapper-z-index, -9999) !default; // wrapper 层级
+
+@include b(resize) {
+
+  @include e(container) {
+    position: absolute;
+    min-width: $resize-container-min-size;
+    min-height: $resize-container-min-size;
+  }
+
+  @include e(wrapper) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: $resize-wrapper-z-index;
+    overflow: hidden;
+    visibility: hidden;
+
+    @include m(placeholder) {
+      transition: 0s;
+      animation: none;
+    }
+  }
+}

package/components/wd-resize/types.ts

@@ -0,0 +1,14 @@
+import { baseProps, makeStringProp } from '../../common/props'
+
+/**
+ * Resize 组件 Props 定义
+ */
+export const resizeProps = {
+  ...baseProps,
+  /**
+   * 自定义容器类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customContainerClass: makeStringProp('')
+}

package/components/wd-resize/wd-resize.vue

@@ -0,0 +1,157 @@
+<template>
+  <view :class="`wd-resize ${customClass}`" :style="rootStyle">
+    <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
+    <view :id="resizeId" :class="`wd-resize__container ${customContainerClass}`">
+      <!--被监听的插槽-->
+      <slot />
+      <!--监听插槽变大-->
+      <scroll-view
+        class="wd-resize__wrapper"
+        :scroll-y="true"
+        :scroll-top="expandScrollTop"
+        :scroll-x="true"
+        :scroll-left="expandScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view class="wd-resize__wrapper--placeholder" style="height: 100000px; width: 100000px"></view>
+      </scroll-view>
+      <!--监听插槽变小-->
+      <scroll-view
+        class="wd-resize__wrapper"
+        :scroll-y="true"
+        :scroll-top="shrinkScrollTop"
+        :scroll-x="true"
+        :scroll-left="shrinkScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view class="wd-resize__wrapper--placeholder" style="height: 250%; width: 250%"></view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-resize',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+import { addUnit, objToStyle, uuid } from '../../common/util'
+import { resizeProps } from './types'
+
+const props = defineProps(resizeProps)
+/**
+ * resize 事件，容器尺寸变化时触发
+ * 事件参数: { top, bottom, left, right, height, width }
+ */
+const emit = defineEmits(['resize'])
+
+const expandScrollTop = ref<number>(0) // 监听容器变大时的纵向滚动距离
+const shrinkScrollTop = ref<number>(0) // 监听容器变小时的纵向滚动距离
+const expandScrollLeft = ref<number>(0) // 监听容器变大时的横向滚动距离
+const shrinkScrollLeft = ref<number>(0) // 监听容器变小时的横向滚动距离
+const height = ref<number>(0) // 容器当前高度
+const width = ref<number>(0) // 容器当前宽度
+const scrollEventCount = ref<number>(0) // 滚动事件计数
+
+const rootStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    width: addUnit(width.value),
+    height: addUnit(height.value)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+let onScrollHandler = () => {} // 滚动事件处理函数，动态定义用于闭包记录容器尺寸
+const { proxy } = getCurrentInstance() as any
+
+const resizeId = ref<string>(`resize${uuid()}`) // 容器唯一标识符
+
+onMounted(() => {
+  // 初始化数据获取，获取容器的初始尺寸
+  const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
+  query.exec(([res]) => {
+    // 闭包记录容器高度和宽度，用于监听容器尺寸变化
+    let lastHeight = res.height
+    let lastWidth = res.width
+    // 立即填充父容器高宽
+    height.value = lastHeight
+    width.value = lastWidth
+    // 监听滚动事件，当容器尺寸变化时，scroll-view 会触发滚动事件
+    onScrollHandler = () => {
+      const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
+      query.exec(([res]) => {
+        // 前两次滚动事件被触发，说明初始化修改已渲染，通知用户代码当前容器大小
+        if (scrollEventCount.value++ === 0) {
+          const result: Record<string, string | number> = {}
+          ;['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+            result[propName] = res[propName]
+          })
+          emit('resize', result)
+        }
+        // 滚动条拉到底部会触发多余的事件，前 3 次事件需要屏蔽掉初始化事件
+        if (scrollEventCount.value < 3) return
+        // 手动设置父容器高宽，防止父容器坍塌
+        // 滚动完，重新获取容器新的高度和宽度
+        const newHeight = res.height
+        const newWidth = res.width
+        // 立即填充父容器高宽
+        height.value = newHeight
+        width.value = newWidth
+        // 宽高都改变时，只需要触发一次 resize 事件
+        const emitStack: number[] = []
+        if (newHeight !== lastHeight) {
+          lastHeight = newHeight
+          emitStack.push(1)
+        }
+        if (newWidth !== lastWidth) {
+          lastWidth = newWidth
+          emitStack.push(1)
+        }
+        if (emitStack.length !== 0) {
+          const result: Record<string, any> = {}
+          ;['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+            result[propName] = res[propName]
+          })
+          emit('resize', result)
+        }
+        // 滚动条拉到底部进行新一轮的尺寸监听（如果使用 nextTick 效果更佳）
+        scrollToBottom({
+          lastWidth: lastWidth,
+          lastHeight: lastHeight
+        })
+      })
+    }
+    // 滚动条拉到底部进行初始化的尺寸监听（如果使用 nextTick 效果更佳）
+    scrollToBottom({
+      lastWidth: lastWidth,
+      lastHeight: lastHeight
+    })
+  })
+})
+
+/**
+ * 滚动条拉到底部，重置两个 scroll-view 的滚动位置
+ * 用于检测容器尺寸变化
+ * @param {Object} params 参数对象
+ * @param {number} params.lastWidth 上一次记录的宽度
+ * @param {number} params.lastHeight 上一次记录的高度
+ */
+function scrollToBottom({ lastWidth, lastHeight }: { lastWidth: number; lastHeight: number }) {
+  expandScrollTop.value = 100000 + lastHeight
+  shrinkScrollTop.value = 3 * height.value + lastHeight
+  expandScrollLeft.value = 100000 + lastWidth
+  shrinkScrollLeft.value = 3 * width.value + lastWidth
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>