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

package/components/wd-swiper-nav/index.scss

@@ -0,0 +1,179 @@
+@use '../../styles/variable.scss'as *;
+@use '../../styles/mixin/mixin'as *;
+
+// 导航定位间距
+$swiper-nav-spacing: var(--wot-swiper-nav-spacing, $spacing-tight) !default;
+// dot & dots-bar
+// dot 颜色
+$swiper-nav-dot-color: var(--wot-swiper-nav-dot-color, $filled-extra-strong) !default;
+// dot 激活颜色
+$swiper-nav-dot-color-active: var(--wot-swiper-nav-dot-color-active, $icon-white) !default;
+// dot 尺寸
+$swiper-nav-dot-size: var(--wot-swiper-nav-dot-size, $n-6) !default;
+// dot 间距
+$swiper-nav-dot-margin: var(--wot-swiper-nav-dot-margin, $spacing-super-tight) !default;
+// dots-bar 激活宽度
+$swiper-nav-dots-bar-width-active: var(--wot-swiper-nav-dots-bar-width-active, $n-15) !default;
+// dot 圆角
+$swiper-nav-dot-border-radius: var(--wot-swiper-nav-dot-border-radius, $radius-radius-full) !default;
+// fraction
+// 分数模式文字颜色
+$swiper-nav-fraction-color: var(--wot-swiper-nav-fraction-color, $icon-white) !default;
+// 分数模式背景色
+$swiper-nav-fraction-bg: var(--wot-swiper-nav-fraction-bg, $opacfilled-main-cover) !default;
+// 分数模式行高
+$swiper-nav-fraction-line-height: var(--wot-swiper-nav-fraction-line-height, $typography-label-line--height-size-large) !default;
+// 分数模式字号
+$swiper-nav-fraction-font-size: var(--wot-swiper-nav-fraction-font-size, $typography-label-size-large) !default;
+// 分数模式内边距
+$swiper-nav-fraction-padding: var(--wot-swiper-nav-fraction-padding, $padding-ultra-tight $padding-extra-tight) !default;
+// 分数模式圆角
+$swiper-nav-fraction-border-radius: var(--wot-swiper-nav-fraction-border-radius, $radius-main) !default;
+// button
+// 按钮图标颜色
+$swiper-nav-btn-color: var(--wot-swiper-nav-btn-color, $icon-white) !default;
+// 按钮背景色
+$swiper-nav-btn-bg: var(--wot-swiper-nav-btn-bg, $opacfilled-main-cover) !default;
+// 按钮尺寸
+$swiper-nav-btn-size: var(--wot-swiper-nav-btn-size, $n-24) !default;
+// 按钮图标尺寸
+$swiper-nav-btn-icon-size: var(--wot-swiper-nav-btn-icon-size, $n-16) !default;
+// 按钮水平间距
+$swiper-nav-btn-spacing: var(--wot-swiper-nav-btn-spacing, $spacing-loose) !default;
+// 按钮圆角
+$swiper-nav-btn-border-radius: var(--wot-swiper-nav-btn-border-radius, $radius-radius-full) !default;
+
+@include b(swiper-nav) {
+
+  @include e(btn) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $swiper-nav-btn-size;
+    height: $swiper-nav-btn-size;
+    border-radius: $swiper-nav-btn-border-radius;
+    background: $swiper-nav-btn-bg;
+
+    @include m(prev) {
+      left: $swiper-nav-btn-spacing;
+    }
+
+    @include m(next) {
+      right: $swiper-nav-btn-spacing;
+    }
+  }
+
+  @include edeep(btn-icon) {
+    font-size: $swiper-nav-btn-icon-size;
+    line-height: $swiper-nav-btn-icon-size;
+    color: $swiper-nav-btn-color;
+  }
+
+  @include m(dots, dots-bar) {
+    display: flex;
+    flex-direction: row;
+  }
+
+  @include m(fraction) {
+    padding: $swiper-nav-fraction-padding;
+    line-height: $swiper-nav-fraction-line-height;
+    border-radius: $swiper-nav-fraction-border-radius;
+    background: $swiper-nav-fraction-bg;
+    color: $swiper-nav-fraction-color;
+    font-size: $swiper-nav-fraction-font-size;
+  }
+
+  @include e(item) {
+    @include m(dots, dots-bar) {
+      width: $swiper-nav-dot-size;
+      height: $swiper-nav-dot-size;
+      background: $swiper-nav-dot-color;
+      border-radius: $swiper-nav-dot-border-radius;
+      margin: 0 $swiper-nav-dot-margin;
+      transition: all 0.4s ease-in;
+
+      @include when(vertical) {
+        margin: $swiper-nav-dot-margin 0;
+      }
+
+      @include when(active) {
+        background: $swiper-nav-dot-color-active;
+      }
+    }
+
+    @include m(dots-bar) {
+
+      @include when(vertical) {
+        @include when(active) {
+          width: $swiper-nav-dot-size;
+          height: $swiper-nav-dots-bar-width-active;
+        }
+      }
+
+      @include when(active) {
+        width: $swiper-nav-dots-bar-width-active;
+        border-radius: $swiper-nav-dot-border-radius;
+        background: $swiper-nav-dot-color-active;
+      }
+    }
+  }
+
+  @include m(left) {
+    position: absolute;
+    left: $swiper-nav-spacing;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @include m(right) {
+    position: absolute;
+    right: $swiper-nav-spacing;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @include m(top-left) {
+    position: absolute;
+    top: $swiper-nav-spacing;
+    left: $swiper-nav-spacing;
+  }
+
+  @include m(top) {
+    position: absolute;
+    left: 50%;
+    top: $swiper-nav-spacing;
+    transform: translateX(-50%);
+  }
+
+  @include m(top-right) {
+    position: absolute;
+    top: $swiper-nav-spacing;
+    right: $swiper-nav-spacing;
+  }
+
+  @include m(bottom-left) {
+    position: absolute;
+    left: $swiper-nav-spacing;
+    bottom: $swiper-nav-spacing;
+  }
+
+  @include m(bottom) {
+    position: absolute;
+    left: 50%;
+    bottom: $swiper-nav-spacing;
+    transform: translateX(-50%);
+  }
+
+  @include m(bottom-right) {
+    position: absolute;
+    right: $swiper-nav-spacing;
+    bottom: $swiper-nav-spacing;
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+}

package/components/wd-swiper-nav/types.ts

@@ -0,0 +1,42 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+import type { DirectionType, IndicatorPositionType } from '../wd-swiper/types'
+
+/**
+ * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+ */
+export type SwiperIndicatorType = 'dots' | 'dots-bar' | 'fraction'
+
+export const swiperNavprops = {
+  ...baseProps,
+  /**
+   * 当前轮播在哪一项（下标）
+   */
+  current: makeNumberProp(0),
+  /**
+   * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
+   */
+  direction: makeStringProp<DirectionType>('horizontal'),
+  /**
+   * 小于这个数字不会显示导航器
+   */
+  minShowNum: makeNumberProp(2),
+  /**
+   * 指示器位置
+   */
+  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
+  /**
+   * 是否显示两侧的控制按钮
+   */
+  showControls: makeBooleanProp(false),
+  /**
+   * 总共的项数
+   */
+  total: makeNumberProp(0),
+  /**
+   * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+   */
+  type: makeStringProp<SwiperIndicatorType>('dots')
+}
+
+export type SwiperNavProps = ExtractPropTypes<typeof swiperNavprops>

package/components/wd-swiper-nav/wd-swiper-nav.vue

@@ -0,0 +1,42 @@
+<template>
+  <template v-if="showControls">
+    <view class="wd-swiper-nav__btn wd-swiper-nav__btn--prev" @click="handleNav('prev')">
+      <wd-icon name="left" custom-class="wd-swiper-nav__btn-icon"></wd-icon>
+    </view>
+    <view class="wd-swiper-nav__btn wd-swiper-nav__btn--next" @click="handleNav('next')">
+      <wd-icon name="right" custom-class="wd-swiper-nav__btn-icon"></wd-icon>
+    </view>
+  </template>
+  <view
+    v-if="total >= minShowNum"
+    :style="customStyle"
+    :class="`wd-swiper-nav wd-swiper-nav--${direction} wd-swiper-nav--${type} wd-swiper-nav--${indicatorPosition} ${customClass}`"
+  >
+    <block v-if="type === 'dots' || type === 'dots-bar'">
+      <view
+        v-for="(_, index) in total"
+        :key="index"
+        :class="`wd-swiper-nav__item--${type} ${current === index ? 'is-active' : ''} is-${direction}`"
+      ></view>
+    </block>
+    <block v-if="type === 'fraction'">{{ current + 1 }}/{{ total }}</block>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { swiperNavprops } from './types'
+import wdIcon from '../wd-icon/wd-icon.vue'
+
+defineProps(swiperNavprops)
+
+const emit = defineEmits(['change'])
+
+function handleNav(dir: 'prev' | 'next') {
+  const source: string = 'nav'
+  emit('change', { dir, source })
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-switch/index.scss

@@ -0,0 +1,177 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+// 操作块背景色
+$switch-color-action-bg: var(--wot-switch-color-action-bg, $base-white) !default;
+// 操作块图标颜色
+$switch-color-action-icon: var(--wot-switch-color-action-icon, $primary-6) !default;
+// 激活态背景色
+$switch-color-active-bg: var(--wot-switch-color-active-bg, $primary-6) !default;
+// 内部文案激活态颜色
+$switch-color-inner-active-text: var(--wot-switch-color-inner-active-text, $text-white) !default;
+// 内部文案非激活态颜色
+$switch-color-inner-inactive-text: var(--wot-switch-color-inner-inactive-text, $text-auxiliary) !default;
+// 内部图标激活态颜色
+$switch-color-active-icon: var(--wot-switch-color-active-icon, $icon-white) !default;
+// 非激活态背景色
+$switch-color-inactive-bg: var(--wot-switch-color-inactive-bg, $filled-strong) !default;
+// 非激活态图标颜色
+$switch-color-inactive-icon: var(--wot-switch-color-inactive-icon, $icon-auxiliary) !default;
+
+// 水平内边距
+$switch-left-right-padding: var(--wot-switch-left-right-padding, $padding-tight) !default;
+// 垂直内边距
+$switch-top-bottom-padding: var(--wot-switch-top-bottom-padding, $padding-ultra-tight) !default;
+
+// 组件尺寸
+$switch-size: var(--wot-switch-size, $n-26) !default;
+// 内部图标尺寸
+$switch-size-icon: var(--wot-switch-size-icon, 0.5em) !default;
+// 操作块高度
+$switch-size-action-height: var(--wot-switch-size-action-height, 1em) !default;
+// 操作块宽度
+$switch-size-action-width: var(--wot-switch-size-action-width, 1em) !default;
+// 操作块图标尺寸
+$switch-size-action-icon: var(--wot-switch-size-action-icon, 0.5em) !default;
+// 内部容器高度
+$switch-size-inner-height: var(--wot-switch-size-inner-height, calc($switch-size-action-height + $switch-top-bottom-padding * 2)) !default;
+// 内部容器最小宽度
+$switch-size-inner-min-width: var(--wot-switch-size-inner-min-width, calc(1.8em + $switch-top-bottom-padding * 2)) !default;
+
+// 内部文案字号
+$switch-inner-font-size: var(--wot-switch-inner-font-size, $typography-body-size-main) !default;
+
+// 方角模式圆角
+$switch-radius: var(--wot-switch-radius, $radius-main) !default;
+// 圆角模式圆角
+$switch-radius-full: var(--wot-switch-radius-full, $radius-radius-full) !default;
+
+// 方角模式操作块圆角
+$switch-radius-action: var(--wot-switch-radius-action, $radius-small) !default;
+// 圆角模式操作块圆角
+$switch-radius-action-full: var(--wot-switch-radius-action-full, $radius-radius-full) !default;
+
+// 图标与文案间距
+$switch-spacing: var(--wot-switch-spacing, $spacing-super-tight) !default;
+// 过渡时长
+$switch-transition-duration: var(--wot-switch-transition-duration, 0.3s) !default;
+// 禁用态透明度
+$switch-disabled: var(--wot-switch-disabled, $opacity-disabled) !default;
+
+@include b(switch) {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: $switch-size;
+  vertical-align: middle;
+
+  @include when(disabled) {
+    opacity: $switch-disabled;
+  }
+
+  @include when(loading) {
+    opacity: $opacity-oveylay;
+  }
+
+  @include e(inner) {
+    box-sizing: border-box;
+    font-size: inherit;
+    display: flex;
+    align-items: center;
+    min-width: $switch-size-inner-min-width;
+    height: $switch-size-inner-height;
+    transition: all $switch-transition-duration ease;
+    border-radius: $switch-radius-full;
+    padding: $switch-top-bottom-padding $switch-left-right-padding;
+  }
+
+  @include e(action) {
+    position: absolute;
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: inherit;
+    width: $switch-size-action-width;
+    height: $switch-size-action-height;
+    background: $switch-color-action-bg;
+    border-radius: $switch-radius-action-full;
+    transition: all $switch-transition-duration ease;
+    left: $switch-top-bottom-padding;
+  }
+
+  @include m(round) {
+    .wd-switch__inner {
+      border-radius: $switch-radius-full;
+    }
+    .wd-switch__action {
+      border-radius: $switch-radius-action-full;
+    }
+  }
+
+  @include m(square) {
+    .wd-switch__inner {
+      border-radius: $switch-radius;
+    }
+    .wd-switch__action {
+      border-radius: $switch-radius-action;
+    }
+  }
+
+  @include edeep(action-loading) {
+    font-size: $switch-size-action-icon;
+  }
+
+  @include e(action-text) {}
+
+  @include e(inner-text) {
+    font-size: $switch-inner-font-size;
+  }
+
+  @include edeep(inner-icon) {
+    font-size: $switch-size-icon;
+  }
+
+    @include edeep(action-icon) {
+    font-size: $switch-size-action-icon;
+    color: $switch-color-action-icon;
+  }
+
+
+  @include when(active) {
+    .wd-switch__inner {
+      background: $switch-color-active-bg;
+      padding-right: calc($switch-size-action-width + $switch-top-bottom-padding);
+    }
+
+    :deep(.wd-switch__inner-icon) {
+      color: $switch-color-active-icon;
+      margin-right: $switch-spacing;
+    }
+
+    .wd-switch__inner-text {
+      color: $switch-color-inner-active-text;
+      margin-right: $switch-spacing;
+    }
+
+    .wd-switch__action {
+      left: calc(100% - $switch-size-action-width - $switch-top-bottom-padding);
+    }
+  }
+
+  @include when(inactive) {
+    .wd-switch__inner {
+      background: $switch-color-inactive-bg;
+      padding-left: calc($switch-size-action-width + $switch-top-bottom-padding);
+    }
+
+    :deep(.wd-switch__inner-icon) {
+      color: $switch-color-inactive-icon;
+      margin-left: $switch-spacing;
+    }
+
+    .wd-switch__inner-text {
+      color: $switch-color-inner-inactive-text;
+      margin-left: $switch-spacing;
+    }
+  }
+}

package/components/wd-switch/types.ts

@@ -0,0 +1,93 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../../common/props'
+import { type LoadingProps } from '../wd-loading/types'
+
+export type SwitchShape = 'round' | 'square'
+
+export type SwitchBeforeChange = (value: number | string | boolean) => boolean | Promise<boolean>
+
+export const switchProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [Boolean, String, Number] as PropType<boolean | string | number>,
+    default: false
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 非激活状态操作按钮图标
+   */
+  inactiveActionIcon: String,
+  /**
+   * 激活状态操作按钮图标
+   */
+  activeActionIcon: String,
+  /**
+   * 激活状态图标，设置后将忽略 `activeText`
+   */
+  activeIcon: String,
+  /**
+   * 非激活状态图标，设置后将忽略 `inactiveText`
+   */
+  inactiveIcon: String,
+  /**
+   * 激活状态文本
+   */
+  activeText: makeStringProp(''),
+  /**
+   * 非激活状态文本
+   */
+  inactiveText: makeStringProp(''),
+  /**
+   * 激活值
+   */
+  activeValue: {
+    type: [Boolean, String, Number] as PropType<boolean | string | number>,
+    default: true
+  },
+  /**
+   * 非激活值
+   */
+  inactiveValue: {
+    type: [Boolean, String, Number] as PropType<boolean | string | number>,
+    default: false
+  },
+  /**
+   * 激活颜色
+   */
+  activeColor: String,
+  /**
+   * 非激活颜色
+   */
+  inactiveColor: String,
+  /**
+   * 大小
+   */
+  size: numericProp,
+  /**
+   * 形状
+   */
+  shape: makeStringProp<SwitchShape>('round'),
+  /**
+   * 是否显示加载中
+   */
+  loading: Boolean,
+  /**
+   * 加载配置项
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>,
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SwitchBeforeChange>,
+  /**
+   * 自定义类名
+   */
+  classPrefix: makeStringProp('wd-icon')
+}
+export type SwitchProps = ExtractPropTypes<typeof switchProps>

package/components/wd-switch/wd-switch.vue

@@ -0,0 +1,107 @@
+<template>
+  <view :class="rootClass" :style="rootStyle" @click="switchValue">
+    <view class="wd-switch__inner" :style="innerStyle">
+      <wd-icon custom-class="wd-switch__inner-icon" :name="innerIcon" v-if="innerIcon" :class-prefix="classPrefix"></wd-icon>
+      <text v-else class="wd-switch__inner-text">{{ isActive ? activeText : inactiveText }}</text>
+    </view>
+    <view class="wd-switch__action">
+      <wd-loading v-bind="customLoadingProps" v-if="loading"></wd-loading>
+      <wd-icon custom-class="wd-switch__action-icon" :name="actionIcon" v-else-if="actionIcon" :class-prefix="classPrefix"></wd-icon>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-switch',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties, onBeforeMount } from 'vue'
+import { callInterceptor } from '../../common/interceptor'
+import { addUnit, isDef, isUndefined, objToStyle, omitBy } from '../../common/util'
+import { switchProps } from './types'
+import { type LoadingProps } from '../wd-loading/types'
+
+const props = defineProps(switchProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const isActive = computed(() => {
+  return props.modelValue === props.activeValue
+})
+
+const rootClass = computed(() => {
+  return `wd-switch ${props.customClass} ${props.disabled ? 'is-disabled' : ''} ${props.loading ? 'is-loading' : ''} wd-switch--${props.shape} is-${
+    isActive.value ? 'active' : 'inactive'
+  }`
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.size) {
+    style['font-size'] = addUnit(props.size)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const innerStyle = computed(() => {
+  const style: CSSProperties = {
+    background: isActive.value ? props.activeColor : props.inactiveColor
+  }
+  return `${objToStyle(style)}$`
+})
+
+const innerIcon = computed(() => {
+  return isActive.value ? props.activeIcon : props.inactiveIcon
+})
+
+const actionIcon = computed(() => {
+  return isActive.value ? props.activeActionIcon : props.inactiveActionIcon
+})
+
+const customLoadingProps = computed<Partial<LoadingProps>>(() => {
+  const overrides: Partial<LoadingProps> = isDef(props.loadingProps) ? omitBy(props.loadingProps, isUndefined) : {}
+  const customSpinnerClass = [isDef(overrides.customSpinnerClass) ? overrides.customSpinnerClass : '', 'wd-switch__action-loading']
+    .filter(Boolean)
+    .join(' ')
+
+  const type = isDef(overrides.type) ? overrides.type : 'spinner'
+
+  return { ...overrides, customSpinnerClass, type }
+})
+
+function switchValue() {
+  if (props.disabled || props.loading) return
+  const newVal = isActive.value ? props.inactiveValue : props.activeValue
+  const doSwitch = () => {
+    emit('update:modelValue', newVal)
+    emit('change', {
+      value: newVal
+    })
+  }
+
+  callInterceptor(props.beforeChange, {
+    args: [newVal],
+    done: doSwitch
+  })
+}
+
+onBeforeMount(() => {
+  if ([props.activeValue, props.inactiveValue].indexOf(props.modelValue) === -1) {
+    emit('update:modelValue', props.inactiveValue)
+    emit('change', {
+      value: props.inactiveValue
+    })
+  }
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-tab/index.scss

@@ -0,0 +1,16 @@
+@use '../../styles/variable.scss' as *;
+@use '../../styles/mixin/mixin.scss' as *;
+
+
+@include b(tab) {
+  width: 100%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  @include e(body) {
+    @include m(inactive) {
+      height: 0;
+      transition: height 0.3s ease-in-out;
+    }
+  }
+}

package/components/wd-tab/types.ts

@@ -0,0 +1,45 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-05-08 22:54:27
+ * @LastEditTime: 2026-02-09 16:22:40
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-tab/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, numericProp } from '../../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+export const tabProps = {
+  ...baseProps,
+  /**
+   * 唯一标识符，默认为索引
+   * 类型: number | string
+   */
+  name: numericProp,
+  /**
+   * tab 的标题
+   * 类型: string
+   */
+  title: String,
+  /**
+   * 是否禁用，无法点击
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否懒加载，切换到该tab时才加载内容
+   * 类型: boolean
+   * 默认值: true
+   */
+  lazy: makeBooleanProp(true),
+  /**
+   * 徽标属性，透传给 Badge 组件
+   * 类型: object
+   */
+  badgeProps: Object as PropType<Partial<BadgeProps>>
+}
+
+export type TabProps = ExtractPropTypes<typeof tabProps>