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

package/components/wd-sort-button/index.scss

@@ -0,0 +1,126 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 组件高度
+$sort-button-height: var(--wot-sort-button-height, $n-48) !default;
+// 文字字号
+$sort-button-text-font-size: var(--wot-sort-button-text-font-size, $typography-body-size-main) !default;
+// 文字行高
+$sort-button-text-line-height: var(--wot-sort-button-text-line-height, $typography-body-line--height-size-main) !default;
+// 箭头图标尺寸
+$sort-button-arrow-icon-size: var(--wot-sort-button-arrow-icon-size, $n-24) !default;
+// 右侧区域尺寸
+$sort-button-right-size: var(--wot-sort-button-right-size, $n-16) !default;
+// 图标颜色
+$sort-button-icon-color: var(--wot-sort-button-icon-color, $icon-auxiliary) !default;
+// 图标激活颜色
+$sort-button-icon-color-active: var(--wot-sort-button-icon-color-active, $primary-6) !default;
+// 文字颜色
+$sort-button-color: var(--wot-sort-button-color, $text-secondary) !default;
+// 文字激活颜色
+$sort-button-color-active: var(--wot-sort-button-color-active, $text-main) !default;
+// 文字激活字重
+$sort-button-font-weight-active: var(--wot-sort-button-font-weight-active, $font-weight-medium) !default;
+// 下划线宽度
+$sort-button-line-width: var(--wot-sort-button-line-width, $n-24) !default;
+// 下划线高度
+$sort-button-line-height: var(--wot-sort-button-line-height, $n-4) !default;
+// 下划线颜色
+$sort-button-line-color: var(--wot-sort-button-line-color, $primary-6) !default;
+// 下划线底部距离
+$sort-button-line-bottom: var(--wot-sort-button-line-bottom, $spacing-ultra-tight) !default;
+// 右侧区域左间距
+$sort-button-right-spacing-left: var(--wot-sort-button-right-spacing-left, $spacing-extra-tight) !default;
+// 排序图标纵向间距
+$sort-button-sort-spacing: var(--wot-sort-button-sort-spacing, $spacing-ultra-tight) !default;
+
+@include b(sort-button) {
+  display: inline-flex;
+  height: $sort-button-height;
+  align-items: center;
+
+  @include m(line) {
+    @include me(left) {
+      &::after {
+        position: absolute;
+        content: '';
+        width: $sort-button-line-width;
+        height: $sort-button-line-height;
+        bottom: $sort-button-line-bottom;
+        left: 50%;
+        transform: translate(-50%, 0);
+        background: $sort-button-line-color;
+        border-radius: calc($sort-button-line-height / 2);
+        transition: opacity .15s;
+        opacity: 0;
+      }
+
+      &.is-active::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  @include e(wrapper) {
+    font-size: $sort-button-text-font-size;
+    line-height: $sort-button-text-line-height;
+    color: $sort-button-color;
+    word-break: break-all;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  @include e(left) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+
+    @include when(active) {
+      font-weight: $sort-button-font-weight-active;
+      color: $sort-button-color-active;
+    }
+  }
+
+  @include e(right) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: $sort-button-right-size;
+    height: $sort-button-right-size;
+    margin-left: $sort-button-right-spacing-left;
+    justify-content: center;
+    align-items: center;
+  }
+
+  @include edeep(icon-up, icon-down) {
+    font-size: $sort-button-arrow-icon-size;
+    color: $sort-button-icon-color;
+    transition: color .15s;
+  }
+
+  @include edeep(icon-up) {
+    position: absolute;
+    top: 0;
+    transform: scale(0.5) translateY(calc(-1 * $sort-button-sort-spacing));
+    transform-origin: top;
+
+    @include m(active){
+      color: $sort-button-icon-color-active;
+    }
+  }
+  
+  @include edeep(icon-down) {
+    position: absolute;
+    bottom: 0;
+    transform: scale(0.5) translateY($sort-button-sort-spacing);
+    transform-origin: bottom;
+
+    @include m(active){
+      color: $sort-button-icon-color-active;
+    }
+  }
+
+}

package/components/wd-sort-button/types.ts

@@ -0,0 +1,68 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+/**
+ * 排序按钮的排序方向值
+ * 可选值: -1 | 0 | 1
+ */
+export type SortButtonValue = -1 | 0 | 1
+
+export const sortButtonProps = {
+  ...baseProps,
+  /**
+   * 选中的箭头方向，1 表示升序，0 表示重置状态，-1 表示降序
+   * 类型: SortButtonValue
+   * 可选值: -1 | 0 | 1
+   * 默认值: 0
+   */
+  modelValue: makeNumberProp<SortButtonValue>(0),
+
+  /**
+   * 排序按钮展示的文案
+   * 类型: string
+   * 默认值: ''
+   */
+  title: makeStringProp(''),
+
+  /**
+   * 当展示双箭头时，是否允许手动重置按钮
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowReset: makeBooleanProp(false),
+
+  /**
+   * 是否优先切换为降序，如果不开启则默认优先切换为升序
+   * 类型: boolean
+   * 默认值: false
+   */
+  descFirst: makeBooleanProp(false),
+
+  /**
+   * 是否展示下划线，当只有一个排序按钮时，通常不展示下划线
+   * 类型: boolean
+   * 默认值: false
+   */
+  line: makeBooleanProp(false)
+}
+
+export type SortButtonProps = ExtractPropTypes<typeof sortButtonProps>
+
+/** 排序按钮 change 事件参数 */
+export type SortButtonChangeDetail = {
+  /** 当前排序方向值 */
+  value: SortButtonValue
+}
+
+export type SortButtonEmits = {
+  /**
+   * 更新 modelValue 事件，切换排序方向时触发
+   * @param value 排序方向值
+   */
+  'update:modelValue': [value: SortButtonValue]
+  /**
+   * 排序方向变化事件
+   * @param detail 变化事件参数
+   */
+  change: [detail: SortButtonChangeDetail]
+}

package/components/wd-sort-button/wd-sort-button.vue

@@ -0,0 +1,67 @@
+<template>
+  <view :class="`wd-sort-button ${line ? 'wd-sort-button--line' : ''} ${customClass}`" :style="customStyle" @click="handleClick">
+    <view class="wd-sort-button__wrapper">
+      <view :class="`wd-sort-button__left ${modelValue !== 0 ? 'is-active' : ''}`">
+        {{ title }}
+      </view>
+      <view class="wd-sort-button__right">
+        <wd-icon name="caret-up" :custom-class="`wd-sort-button__icon-up ${modelValue === -1 ? 'wd-sort-button__icon-up--active' : ''}`" />
+        <wd-icon name="caret-down" :custom-class="`wd-sort-button__icon-down  ${modelValue === 1 ? 'wd-sort-button__icon-down--active' : ''}`" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sort-button',
+  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 { sortButtonProps, type SortButtonEmits, type SortButtonValue } from './types'
+
+const props = defineProps(sortButtonProps)
+
+const emit = defineEmits<SortButtonEmits>()
+
+/**
+ * 处理点击事件，按排序循环切换排序方向
+ * descFirst 开启时循环：0 → -1 → 1 → (0 或 -1)
+ * descFirst 关闭时循环：0 → 1 → -1 → (0 或 1)
+ */
+function handleClick() {
+  let { modelValue: value, allowReset, descFirst } = props
+  let next: SortButtonValue
+  if (descFirst) {
+    if (value === 0) {
+      next = -1
+    } else if (value === -1) {
+      next = 1
+    } else {
+      next = allowReset ? 0 : -1
+    }
+  } else {
+    if (value === 0) {
+      next = 1
+    } else if (value === 1) {
+      next = -1
+    } else {
+      next = allowReset ? 0 : 1
+    }
+  }
+  emit('update:modelValue', next)
+  emit('change', { value: next })
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-step/index.scss

@@ -0,0 +1,366 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 组件级 CSS 变量定义
+
+// 基础容器与布局 (Base & Layout)
+// 内容区距头部的顶部外边距
+$step-content-margin-top: var(--wot-step-content-margin-top, $spacing-super-tight) !default;
+// 垂直布局时内容区的左外边距
+$step-vertical-content-margin-left: var(--wot-step-vertical-content-margin-left, $n-32) !default;
+// 垂直布局时内容区的底部内边距
+$step-vertical-content-padding-bottom: var(--wot-step-vertical-content-padding-bottom, $n-20) !default;
+// 垂直布局且为点状指示器时，头部的顶部绝对定位距离
+$step-vertical-header-dot-top: var(--wot-step-vertical-header-dot-top, $n-6) !default;
+
+// 步骤指示器（圆形/背景） (Indicator Circle)
+// 圆形指示器的宽高尺寸
+$step-indicator-size: var(--wot-step-indicator-size, $n-18) !default;
+// 圆形指示器的圆角大小
+$step-circle-border-radius: var(--wot-step-circle-border-radius, $radius-radius-full) !default;
+// 等待 (wait) 状态下圆形指示器的背景色
+$step-circle-bg: var(--wot-step-circle-bg, $filled-strong) !default;
+// 进行中 (process) 状态下圆形指示器的背景色
+$step-process-bg: var(--wot-step-process-bg, $primary-6) !default;
+// 已完成 (finished) 状态下圆形指示器的背景色
+$step-finished-bg: var(--wot-step-finished-bg, $primary-1) !default;
+// 错误 (error) 状态下圆形指示器的背景色
+$step-error-bg: var(--wot-step-error-bg, $danger-main) !default;
+
+// 指示器文本（数字/对齐） (Indicator Text)
+// 圆形指示器内部文本的字号
+$step-circle-text-font-size: var(--wot-step-circle-text-font-size, $typography-label-size-main) !default;
+// 圆形指示器内部文本的行高
+$step-circle-text-line-height: var(--wot-step-circle-text-line-height, $typography-label-line--height-size-main) !default;
+// 圆形指示器内部文本的字重
+$step-circle-text-font-weight: var(--wot-step-circle-text-font-weight, $font-weight-medium) !default;
+// 等待状态或默认状态下圆形指示器内文本颜色
+$step-circle-text-color: var(--wot-step-circle-text-color, $text-secondary) !default;
+// 进行中状态下圆形指示器内文本颜色
+$step-circle-text-process-color: var(--wot-step-circle-text-process-color, $text-white) !default;
+// 已完成状态下圆形指示器内文本颜色
+$step-circle-text-finished-color: var(--wot-step-circle-text-finished-color, $primary-6) !default;
+
+// 指示器图标 (Indicator Icon)
+// 圆形指示器内置状态图标 (如完成时的对号或错误时的叉号) 的字号大小
+$step-circle-icon-size: var(--wot-step-circle-icon-size, $n-12) !default;
+// 外部自定义传入的图标 (通过 icon 属性) 的字号大小
+$step-icon-size: var(--wot-step-icon-size, $n-18) !default;
+// 等待或默认状态下图标的颜色
+$step-icon-color: var(--wot-step-icon-color, $icon-auxiliary) !default;
+// 激活 (如 process 或 finished) 状态下图标的颜色
+$step-icon-color-active: var(--wot-step-icon-color-active, $primary-6) !default;
+// 错误 (error) 状态下图标的颜色
+$step-icon-error-color: var(--wot-step-icon-error-color, $danger-main) !default;
+// 未激活部分的占位文本颜色
+$step-inactive-color: var(--wot-step-inactive-color, $text-placeholder) !default;
+// 错误状态整体的主色调（纯白文本场景下等使用）
+$step-error-color: var(--wot-step-error-color, $text-white) !default;
+
+// 连接线 (Line)
+// 连接线与两侧指示器之间的间距
+$step-line-spacing: var(--wot-step-line-spacing, $spacing-tight) !default;
+// 连接线的默认底色 (对应未激活的线段)
+$step-line-color: var(--wot-step-line-color, $border-main) !default;
+// 激活 (完成状态) 下连接线的颜色
+$step-line-active-color: var(--wot-step-line-active-color, $primary-6) !default;
+
+// 点状指示器 (Dot Indicator)
+// 点状指示器的宽高尺寸
+$step-dot-size: var(--wot-step-dot-size, $n-10) !default;
+// 等待 (wait) 状态下点状指示器的背景色
+$step-dot-wait-bg: var(--wot-step-dot-wait-bg, $filled-strong) !default;
+// 进行中 (process) 状态下点状指示器的背景色
+$step-dot-process-bg: var(--wot-step-dot-process-bg, $primary-6) !default;
+// 进行中 (process) 状态下点状指示器的描边颜色
+$step-dot-process-border-color: var(--wot-step-dot-process-border-color, $primary-3) !default;
+// 已完成 (finished) 状态下点状指示器的背景色
+$step-dot-finished-bg: var(--wot-step-dot-finished-bg, $primary-3) !default;
+// 已完成 (finished) 状态下点状指示器的描边颜色
+$step-dot-finished-border-color: var(--wot-step-dot-finished-border-color, $primary-6) !default;
+// 错误 (error) 状态下点状指示器的背景色
+$step-dot-error-bg: var(--wot-step-dot-error-bg, $danger-main) !default;
+
+// 标题文本 (Title Text)
+// 标题文本字号大小
+$step-title-font-size: var(--wot-step-title-font-size, $typography-body-size-main) !default;
+// 标题文本行高
+$step-title-line-height: var(--wot-step-title-line-height, $typography-body-line--height-size-main) !default;
+// 标题文本字重
+$step-title-font-weight: var(--wot-step-title-font-weight, $font-weight-regular) !default;
+// 等待与完成状态下标题的颜色
+$step-title-color: var(--wot-step-title-color, $text-secondary) !default;
+// 进行中状态下标题的激活颜色
+$step-title-color-active: var(--wot-step-title-color-active, $primary-6) !default;
+// 错误状态下标题的颜色
+$step-title-error-color: var(--wot-step-title-error-color, $danger-main) !default;
+
+// 描述文本 (Description Text)
+// 描述文本字号大小
+$step-description-font-size: var(--wot-step-description-font-size, $typography-label-size-main) !default;
+// 描述文本行高
+$step-description-line-height: var(--wot-step-description-line-height, $typography-label-line--height-size-main) !default;
+// 描述文本字重
+$step-description-font-weight: var(--wot-step-description-font-weight, $font-weight-regular) !default;
+// 描述文本颜色
+$step-description-color: var(--wot-step-description-color, $text-secondary) !default;
+// 描述文本距标题的距离
+$step-description-margin-top: var(--wot-step-description-margin-top, $spacing-super-tight) !default;
+// 描述文本的内边距
+$step-description-padding: var(--wot-step-description-padding, $padding-zero $padding-ultra-tight) !default;
+
+@include b(step) {
+  position: relative;
+  display: inline-block;
+
+  @include e(header) {
+    position: relative;
+    font-size: 0;
+
+    &.is-dot {
+      .wd-step__line {
+        width: calc(100% - 2 * $step-line-spacing - $step-dot-size);
+        left: calc($step-line-spacing + $step-dot-size);
+      }
+    }
+  }
+
+  @include e(indicator) {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+  }
+
+  @include e(circle) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: $step-indicator-size;
+    height: $step-indicator-size;
+    border-radius: $step-circle-border-radius;
+  }
+
+  // 状态提升至组件层，使用 @include me 控制内部所有元素的样式
+  @each $status in (finished, process, error, wait) {
+    @include m($status) {
+      @include me(circle) {
+        @if $status==finished {
+          background: $step-finished-bg;
+          color: $step-circle-text-finished-color;
+          @include pixelBorderSurround($step-circle-text-finished-color);
+          :deep(.wd-step__finished-icon) {
+            color: $step-circle-text-finished-color;
+          }
+        }
+
+        @else if $status==process {
+          background: $step-process-bg;
+          color: $step-circle-text-process-color;
+        }
+
+        @else if $status==error {
+          background: $step-error-bg;
+          color: $step-error-color;
+        }
+
+        @else if $status==wait {
+          background: $step-circle-bg;
+          color: $step-circle-text-color;
+        }
+
+        @else {
+          background: $step-circle-bg;
+          color: $step-circle-text-color;
+        }
+      }
+
+      @include me(dot) {
+        @if $status==finished {
+          background: $step-dot-finished-bg;
+          @include pixelBorderSurround($step-dot-finished-border-color);
+        }
+
+        @else if $status==process {
+          background: $step-dot-process-bg;
+          @include pixelBorderSurround($step-dot-process-border-color);
+        }
+
+        @else if $status==error {
+          background: $step-dot-error-bg;
+        }
+
+        @else if $status==wait {
+          background: $step-dot-wait-bg;
+        }
+
+        @else {
+          background: $step-dot-wait-bg;
+        }
+      }
+
+      @include me(line){
+        @if $status==finished {
+          background: $step-line-active-color;
+        }
+      }
+
+      :deep(.wd-step__icon) {
+        @if $status==finished {
+          color: $step-icon-color-active;
+        }
+        @else if $status==process {
+          color: $step-icon-color-active;
+        }
+        @else if $status==error {
+          color: $step-icon-error-color;
+        }
+        @else if $status==wait {
+          color: $step-icon-color;
+        }
+        @else {
+          color: $step-icon-color;
+        }
+      }
+
+      @include me(title){
+        @if $status==finished {
+          color: $step-title-color;
+        }
+        @else if $status==process {
+          color: $step-title-color-active;
+        }
+        @else if $status==error {
+          color: $step-title-error-color;
+        }
+        @else if $status==wait {
+          color: $step-title-color;
+        }
+        @else {
+          color: $step-title-color;
+        }
+      }
+    }
+  }
+
+  @include edeep(finished-icon,error-icon) {
+    font-size: $step-circle-icon-size;
+  }
+
+  @include edeep(icon) {
+    font-size: $step-icon-size;
+  }
+
+  @include e(circle-text) {
+    font-size: $step-circle-text-font-size;
+    line-height: $step-circle-text-line-height;
+    font-weight: $step-circle-text-font-weight;
+  }
+
+  @include e(line) {
+    position: absolute;
+    width: calc(100% - 2 * $step-line-spacing - $step-indicator-size);
+    height: $stroke-main;
+    background: $step-line-color;
+    // transform: scaleY(0.5);
+    top: 50%;
+    left: calc($step-line-spacing + $step-indicator-size);
+  }
+
+  @include e(dot) {
+    position: relative;
+    display: block;
+    width: $step-dot-size;
+    height: $step-dot-size;
+    border-radius: 50%;
+    background: $step-line-color;
+    box-sizing: border-box;
+  }
+
+  @include e(content) {
+    margin-top: $step-content-margin-top;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include e(title) {
+    color: $step-title-color;
+    font-weight: $step-title-font-weight;
+    font-size: $step-title-font-size;
+    line-height: $step-title-line-height;
+  }
+
+  @include e(description) {
+    margin-top: $step-description-margin-top;
+    padding: $step-description-padding;
+    color: $step-description-color;
+    font-weight: $step-description-font-weight;
+    font-size: $step-description-font-size;
+    line-height: $step-description-line-height;
+  }
+
+  @include when(center) {
+    text-align: center;
+    .wd-step__line {
+      left: calc(50% + $step-line-spacing + $step-indicator-size / 2);
+    }
+    
+    .wd-step__header.is-dot {
+      .wd-step__line {
+        left: calc(50% + $step-line-spacing + $step-dot-size / 2);
+      }
+    }
+  }
+
+  @include when(vertical) {
+    display: block;
+
+    .wd-step__header {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+
+      &.is-dot {
+        top: $step-vertical-header-dot-top;
+
+        .wd-step__line {
+          left: 50%;
+          margin-left: 0;
+          margin-top: 0;
+        }
+        .wd-step__indicator {
+          width: $step-indicator-size; // Use same container size so text/dots align nicely along left edge automatically
+        }
+      }
+    }
+
+    .wd-step__content {
+      margin-left: $step-vertical-content-margin-left;
+      margin-top: 0;
+      padding-bottom: $step-vertical-content-padding-bottom;
+      min-height: $step-indicator-size;
+    }
+
+    .wd-step__line {
+      top: calc($step-indicator-size + $step-line-spacing);
+      left: 50%;
+      width: $stroke-main;
+      height: calc(100% - $step-indicator-size - 2 * $step-line-spacing);
+      transform: scaleX(0.5);
+    }
+
+    .wd-step__header.is-dot {
+      .wd-step__line {
+        top: calc($step-dot-size + $step-line-spacing);
+        height: calc(100% - $step-dot-size - 2 * $step-line-spacing);
+      }
+    }
+
+    .wd-step__icon.is-dot {
+      margin-left: 0;
+      margin-top: -$n-1;
+    }
+  }
+}

package/components/wd-step/types.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps } from '../../common/props'
+
+/**
+ * 步骤状态类型
+ * 可选值: 'finished' | 'process' | 'error' | 'wait'
+ */
+export type StepStatus = 'finished' | 'process' | 'error' | 'wait'
+
+export const stepProps = {
+  ...baseProps,
+  /**
+   * 步骤标题，如果没有则使用默认文案。
+   * 当只有标题而没有描述时，标题的字号会小2号。
+   * 类型: string
+   * 默认值: ''
+   */
+  title: String,
+
+  /**
+   * 步骤描述。
+   * 类型: string
+   * 默认值: ''
+   */
+  description: String,
+
+  /**
+   * 步骤图标。
+   * 类型: string
+   * 默认值: ''
+   */
+  icon: String,
+
+  /**
+   * 步骤状态
+   * 类型: StepStatus
+   * 可选值: 'finished' | 'process' | 'error' | 'wait'
+   * 默认值: 'wait'
+   */
+  status: String as PropType<StepStatus>
+}
+
+export type StepProps = ExtractPropTypes<typeof stepProps>