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

package/components/wd-table-column/wd-table-column.vue

@@ -0,0 +1,198 @@
+<template>
+  <view class="wd-table-column">
+    <view v-for="config in cellConfigs" :key="config.rowIndex" :class="config.class" :style="config.style" @click="handleRowClick(config.rowIndex)">
+      <template v-if="config.visible">
+        <slot name="value" v-if="$slots.value" :row="getScope(config.rowIndex)" :index="config.rowIndex"></slot>
+        <text :class="['wd-table__value', { 'is-ellipsis': ellipsis }]" v-else>{{ config.value }}</text>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-table-column',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { type CSSProperties, computed, ref } from 'vue'
+import { isDef, objToStyle, isOdd, isFunction } from '../../common/util'
+import { tableColumnProps, type SortDirection } from './types'
+import { useParent } from '../../composables/useParent'
+import { TABLE_KEY } from '../wd-table/types'
+import type { SpanMethodResult } from '../wd-table/types'
+
+const props = defineProps(tableColumnProps)
+
+const { parent: table, index: columnIndex } = useParent(TABLE_KEY)
+
+/** 当前列的排序方向 */
+const sortDirection = ref<SortDirection>(0)
+
+/** 是否开启斑马纹（从父级 table 继承） */
+const stripe = computed(() => {
+  return isDef(table.value) ? table.value.props.stripe : false
+})
+
+/** 是否显示边框（从父级 table 继承） */
+const border = computed(() => {
+  return isDef(table.value) ? table.value.props.border : false
+})
+
+/** 是否超出省略（从父级 table 继承） */
+const ellipsis = computed(() => {
+  return isDef(table.value) ? table.value.props.ellipsis : false
+})
+
+/** 当前列是否为最后一个固定列（用于显示右侧阴影） */
+const isLastFixed = computed(() => {
+  if (props.fixed && isDef(table.value)) {
+    return table.value.getIsLastFixed(props)
+  }
+  return false
+})
+
+/**
+ * 当前列的数据数组，从父级 table 的 data 中按 prop 提取
+ * @returns 当前列 prop 对应的数据值数组
+ */
+const column = computed(() => {
+  if (!isDef(table.value) || !isDef(table.value.props.data) || !Array.isArray(table.value.props.data)) {
+    return []
+  }
+  return table.value.props.data.map((item) => item[props.prop])
+})
+
+/**
+ * 固定列的 left 偏移值（缓存，避免每个单元格重复调用 getFixedLeft）
+ * @returns CSS left 值字符串，非固定列返回空字符串
+ */
+const fixedLeft = computed(() => {
+  if (props.fixed && isDef(table.value) && isFunction(table.value.getFixedLeft)) {
+    return table.value.getFixedLeft(columnIndex.value)
+  }
+  return ''
+})
+
+/**
+ * 是否为最后一列（用于去除外边框）
+ */
+const isLastColumn = computed(() => {
+  return isDef(table.value) ? columnIndex.value === table.value.children.length - 1 : false
+})
+
+/**
+ * 预计算可视区域单元格的 class、style、visible 配置
+ * 虚拟滚动时只生成 visibleRange 范围内的单元格
+ * @returns 每行单元格的渲染配置数组
+ */
+const cellConfigs = computed(() => {
+  const configs: Array<{ rowIndex: number; value: any; class: any; style: string; visible: boolean }> = []
+  const data = isDef(table.value) && Array.isArray(table.value.props.data) ? table.value.props.data : []
+  if (data.length === 0) return configs
+
+  const range = isDef(table.value) ? table.value.visibleRange.value : { start: 0, end: data.length - 1 }
+  const colIdx = columnIndex.value
+  const colStart = colIdx + 1
+  const hasScrollLeft = isDef(table.value) && table.value.state.scrollLeft
+  const isFixed = props.fixed
+  const isLast = isLastFixed.value
+  const isLastCol = isLastColumn.value
+  const left = fixedLeft.value
+  const align = props.align
+  const stripeVal = stripe.value
+  const borderVal = border.value
+  const propKey = props.prop
+
+  for (let rowIndex = range.start; rowIndex <= range.end; rowIndex++) {
+    const span = getSpanResult(rowIndex)
+    const hidden = span.rowspan === 0 || span.colspan === 0
+
+    const cls = [
+      'wd-table__cell',
+      {
+        'is-stripe': stripeVal && isOdd(rowIndex),
+        'is-border': borderVal,
+        'is-fixed': isFixed,
+        'is-shadow': isLast && hasScrollLeft,
+        'is-hidden': hidden,
+        'is-last': isLastCol
+      },
+      `is-${align}`
+    ]
+
+    const style: CSSProperties = {}
+    if (hidden) {
+      style['display'] = 'none'
+    } else {
+      if (span.colspan > 1) {
+        style['grid-column'] = `${colStart} / span ${span.colspan}`
+      } else {
+        style['grid-column'] = `${colStart}`
+      }
+      const rowStart = rowIndex + 1
+      if (span.rowspan > 1) {
+        style['grid-row'] = `${rowStart} / span ${span.rowspan}`
+      } else {
+        style['grid-row'] = `${rowStart}`
+      }
+    }
+    if (isFixed && left) {
+      style['left'] = left
+    }
+
+    configs.push({
+      rowIndex,
+      value: data[rowIndex]?.[propKey],
+      class: cls,
+      style: objToStyle(style),
+      visible: !hidden
+    })
+  }
+  return configs
+})
+
+/**
+ * 获取指定行的单元格合并信息
+ * @param rowIndex - 行索引
+ * @returns 合并配置 { rowspan, colspan }
+ */
+function getSpanResult(rowIndex: number): SpanMethodResult {
+  if (!isDef(table.value) || !isFunction(table.value.getSpan)) {
+    return { rowspan: 1, colspan: 1 }
+  }
+  return table.value.getSpan(rowIndex, columnIndex.value)
+}
+
+/**
+ * 处理单元格点击事件，转发给父级 table 的 rowClick
+ * @param index - 被点击行的索引
+ */
+function handleRowClick(index: number) {
+  if (!isDef(table.value)) return
+  isFunction(table.value.rowClick) && table.value.rowClick(index)
+}
+
+/**
+ * 获取指定行的完整数据对象，用于 #value 插槽的 row 参数
+ * @param index - 行索引
+ * @returns 该行的数据对象
+ */
+function getScope(index: number) {
+  if (!isDef(table.value) || !isDef(table.value.props.data) || !Array.isArray(table.value.props.data)) {
+    return {}
+  }
+  return table.value.props.data[index] || {}
+}
+
+defineExpose({ sortDirection })
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-tabs/index.scss

@@ -0,0 +1,332 @@
+@use '../../styles/variable.scss'as *;
+@use '../../styles/mixin/mixin.scss'as *;
+
+// 导航背景色
+$tabs-nav-bg: var(--wot-tabs-nav-bg, $filled-oppo) !default;
+// 导航吸顶宽度
+$tabs-nav-sticky-width: var(--wot-tabs-nav-sticky-width, 100vw) !default;
+// 导航文字颜色
+$tabs-nav-color: var(--wot-tabs-nav-color, $text-secondary) !default;
+// 导航激活文字颜色
+$tabs-nav-color-active: var(--wot-tabs-nav-color-active, $primary-6) !default;
+// 导航激活文字字重
+$tabs-nav-font-weight-active: var(--wot-tabs-nav-font-weight-active, $font-weight-medium) !default;
+// 导航项字号
+$tabs-nav-item-font-size: var(--wot-tabs-nav-item-font-size, $typography-body-size-extra-large) !default;
+// 导航项行高
+$tabs-nav-item-line-height: var(--wot-tabs-nav-item-line-height, $typography-body-line--height-size-extra-large) !default;
+// 导航项内边距
+$tabs-nav-item-padding: var(--wot-tabs-nav-item-padding, $padding-main $padding-extra-loose) !default;
+// 导航禁用文字颜色
+$tabs-nav-color-disabled: var(--wot-tabs-nav-color-disabled, $text-disabled) !default;
+// 导航线背景色
+$tabs-nav-line-bg: var(--wot-tabs-nav-line-bg, $primary-6) !default;
+// 导航线高度
+$tabs-nav-line-height: var(--wot-tabs-nav-line-height, $n-4) !default;
+// 导航线宽度
+$tabs-nav-line-width: var(--wot-tabs-nav-line-width, $n-24) !default;
+// 导航线底部偏移
+$tabs-nav-line-bottom: var(--wot-tabs-nav-line-bottom, $n-2) !default;
+// 过渡时长
+$tabs-duration: var(--wot-tabs-duration, 0.3s) !default;
+// 地图模式遮罩背景
+$tabs-map-modal-bg: var(--wot-tabs-map-modal-bg, $opac-7_55) !default;
+// 地图模式箭头尺寸
+$tabs-map-arrow-size: var(--wot-tabs-map-arrow-size, $n-16) !default;
+// 地图模式箭头颜色
+$tabs-map-arrow-color: var(--wot-tabs-map-arrow-color, $icon-secondary) !default;
+// 地图模式按钮宽度
+$tabs-map-btn-width: var(--wot-tabs-map-btn-width, $n-44) !default;
+// 地图模式按钮高度
+$tabs-map-btn-height: var(--wot-tabs-map-btn-height, $n-44) !default;
+// 地图模式按钮前景渐变背景
+$tabs-map-btn-before-bg: var(--wot-tabs-map-btn-before-bg, linear-gradient(270deg, $filled-oppo 0%, $base-transparent 100%)) !default;
+// 地图模式通用文字颜色
+$tabs-map-color: var(--wot-tabs-map-color, $text-main) !default;
+// 地图模式头部字号
+$tabs-map-header-font-size: var(--wot-tabs-map-header-font-size, $typography-body-size-extra-large) !default;
+// 地图模式头部行高
+$tabs-map-header-line-height: var(--wot-tabs-map-header-line-height, $typography-body-line--height-size-extra-large) !default;
+// 地图模式头部内边距
+$tabs-map-header-padding: var(--wot-tabs-map-header-padding, $padding-main $padding-extra-loose) !default;
+// 地图模式导航按钮间距
+$tabs-map-nav-btn-gap: var(--wot-tabs-map-nav-btn-gap, $spacing-main) !default;
+// 地图模式导航按钮禁用透明度
+$tabs-map-nav-btn-disabled-opacity: var(--wot-tabs-map-nav-btn-disabled-opacity, $opacity-disabled) !default;
+// 地图模式导航按钮背景
+$tabs-map-nav-btn-bg: var(--wot-tabs-map-nav-btn-bg, $filled-bottom) !default;
+// 地图模式导航按钮文字颜色
+$tabs-map-nav-btn-color: var(--wot-tabs-map-nav-btn-color, $text-main) !default;
+// 地图模式导航按钮圆角
+$tabs-map-nav-btn-radius: var(--wot-tabs-map-nav-btn-radius, $radius-main) !default;
+// 地图模式导航按钮字号
+$tabs-map-nav-btn-font-size: var(--wot-tabs-map-nav-btn-font-size, $typography-body-size-ultra-large) !default;
+// 地图模式导航按钮行高
+$tabs-map-nav-btn-line-height: var(--wot-tabs-map-nav-btn-line-height, $typography-body-line--height-size-ultra-large) !default;
+// 地图模式导航按钮内边距
+$tabs-map-nav-btn-padding: var(--wot-tabs-map-nav-btn-padding, $padding-tight $padding-extra-loose) !default;
+// 地图模式内容内边距
+$tabs-map-body-padding: var(--wot-tabs-map-body-padding, $padding-loose $padding-extra-loose) !default;
+// 地图模式内容背景色
+$tabs-map-body-bg: var(--wot-tabs-map-body-bg, $filled-oppo) !default;
+
+
+@include b(tabs) {
+  position: relative;
+  background: $tabs-nav-bg;
+  width: 100%;
+
+  @include when(hide-scrollbar) {
+    ::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      -webkit-appearance: none;
+    }
+  }
+
+  @include e(nav) {
+    position: relative;
+    left: 0;
+    right: 0;
+    width: 100%;
+    background: $tabs-nav-bg;
+
+    @include m(wrap) {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    @include m(sticky) {
+      width: $tabs-nav-sticky-width;
+    }
+  }
+
+  @include e(nav-container) {
+    position: relative;
+    display: flex;
+    user-select: none;
+  }
+
+  @include e(nav-item) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-width: 0;
+    font-size: $tabs-nav-item-font-size;
+    line-height: $tabs-nav-item-line-height;
+    padding: $tabs-nav-item-padding;
+    color: $tabs-nav-color;
+    transition: color $tabs-duration;
+
+    @include when(active) {
+      font-weight: $tabs-nav-font-weight-active;
+      color: $tabs-nav-color-active;
+    }
+
+    @include when(disabled) {
+      color: $tabs-nav-color-disabled;
+    }
+  }
+
+  @include e(nav-item-text) {
+    @include lineEllipsis();
+  }
+
+  @include edeep(nav-item-badge) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  @include e(line) {
+    position: absolute;
+    bottom: $tabs-nav-line-bottom;
+    left: 0;
+    z-index: 1;
+    height: $tabs-nav-line-height;
+    background: $tabs-nav-line-bg;
+    border-radius: calc($tabs-nav-line-height / 2);
+
+    @include m(inner) {
+      left: 50%;
+      transform: translateX(-50%)
+    }
+
+    @include when(normal) {
+      width: $tabs-nav-line-width;
+    }
+
+    @include when(underline) {
+      bottom: 0;
+      height: $n-2;
+      border-radius: $radius-zero;
+    }
+
+    @include when(dot) {
+      bottom: 0;
+      width: $n-6;
+      height: $n-6;
+      border-radius: $radius-radius-full;
+    }
+  }
+
+  @include e(container) {
+    overflow: hidden;
+  }
+
+  @include e(body) {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    @include when(animated) {
+      display: flex;
+      transition-property: left;
+    }
+  }
+
+  @include e(map) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+
+  @include e(map-header) {
+    position: relative;
+    font-size: $tabs-map-header-font-size;
+    line-height: $tabs-map-header-line-height;
+    padding: $tabs-map-header-padding;
+    color: $tabs-map-color;
+    transition: opacity $tabs-duration;
+    background: $tabs-nav-bg;
+    opacity: 0;
+
+    &::after {
+      z-index: 3;
+    }
+  }
+
+  @include e(map-body) {
+    display: flex;
+    flex-wrap: wrap;
+    padding: $tabs-map-body-padding;
+    background: $tabs-map-body-bg;
+    transition: transform $tabs-duration;
+    transform: scaleY(0);
+    transform-origin: center top;
+
+    @include when(open) {
+      transform: scaleY(1);
+    }
+  }
+
+  @include e(map-btn) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    background: $tabs-nav-bg;
+    -webkit-tap-highlight-color: transparent;
+    width: $tabs-map-btn-width;
+    height: $tabs-map-btn-height;
+
+    &::before {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      width: $n-24;
+      transform: translateX(-100%);
+      height: 100%;
+      background: $tabs-map-btn-before-bg;
+    }
+  }
+
+  @include e(map-arrow) {
+    display: block;
+    transition: transform $tabs-duration;
+
+    @include when(open) {
+      transform: rotate(180deg);
+    }
+  }
+
+  @include edeep(map-arrow-icon) {
+    font-size: $tabs-map-arrow-size;
+    color: $tabs-map-arrow-color;
+  }
+
+
+  @include e(map-nav-item) {
+    flex-basis: calc((100% - 2 * $tabs-map-nav-btn-gap) / 3);
+    box-sizing: border-box;
+    margin-right: $tabs-map-nav-btn-gap;
+    margin-bottom: $tabs-map-nav-btn-gap;
+
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+
+    &:nth-last-child(-n + 3) {
+      margin-bottom: 0;
+    }
+  }
+
+  @include e(map-nav-btn) {
+    @include buttonClear;
+    @include lineEllipsis;
+    box-sizing: border-box;
+    background: $tabs-map-nav-btn-bg;
+    width: 100%;
+    border: $n-1 solid transparent;
+    font-size: $tabs-map-nav-btn-font-size;
+    line-height: $tabs-map-nav-btn-line-height;
+    border-radius: $tabs-map-nav-btn-radius;
+    color: $tabs-map-nav-btn-color;
+    padding: $tabs-map-nav-btn-padding;
+    text-align: center;
+    transition: color $tabs-duration, border-color $tabs-duration;
+
+    @include when(active) {
+      color: $tabs-nav-color-active;
+      border-color: $tabs-nav-color-active;
+      background: $tabs-nav-bg
+    }
+
+    @include when(disabled) {
+      opacity: $tabs-map-nav-btn-disabled-opacity;
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: calc(2 * $padding-main + $tabs-map-header-line-height);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: $tabs-map-modal-bg;
+    opacity: 0;
+    transition: opacity $tabs-duration;
+  }
+
+  @include when(slide) {
+    .wd-tabs__nav-item {
+      flex: 0 0 auto;
+    }
+  }
+
+  @include when(map) {
+    .wd-tabs__nav--wrap {
+      padding-right: $tabs-map-btn-width;
+    }
+  }
+}

package/components/wd-tabs/types.ts

@@ -0,0 +1,155 @@
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp, numericProp } from '../../common/props'
+
+export type TabsProvide = {
+  state: {
+    /** 当前激活的 tab 索引 */
+    activeIndex: number
+    /** 激活项边框线样式 */
+    lineStyle: string
+    /** 组件是否已初始化 */
+    inited: boolean
+    /** 是否正在进行切换动画 */
+    animating: boolean
+    /** 导航地图是否显示 */
+    mapShow: boolean
+    /** 滚动条位置 */
+    scrollLeft: number
+  }
+  props: Partial<TabsProps>
+}
+
+export type TabsSlidable = 'auto' | 'always'
+
+/**
+ * 底部条位置样式
+ * normal: 默认宽度，不设置 lineWidth 时 宽度为 24px
+ * text: 宽度跟随文字，不设置 lineWidth 时 宽度等于文字宽度
+ * underline: 下划线，宽度等于 tab 宽度
+ * dot: 点状，宽度等于 6px
+ */
+export type TabsLineTheme = 'normal' | 'text' | 'underline' | 'dot'
+
+export const TABS_KEY: InjectionKey<TabsProvide> = Symbol('wd-tabs')
+
+export const tabsProps = {
+  ...baseProps,
+  /**
+   * 绑定值，选中选项卡的 name
+   * 类型: number | string
+   * 默认值: 0
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 标签数超过阈值可滑动
+   * 类型: number
+   * 默认值: 6
+   */
+  slidableNum: makeNumberProp(6),
+  /**
+   * 标签数超过阈值显示导航地图
+   * 类型: number
+   * 默认值: 10
+   */
+  mapNum: makeNumberProp(10),
+  /**
+   * 导航地图的标题
+   * 类型: string
+   */
+  mapTitle: String,
+  /**
+   * 粘性布局
+   * 类型: boolean
+   * 默认值: false
+   */
+  sticky: makeBooleanProp(false),
+  /**
+   * 粘性布局吸顶位置
+   * 类型: number
+   * 默认值: 0
+   */
+  offsetTop: makeNumberProp(0),
+  /**
+   * 开启手势滑动
+   * 类型: boolean
+   * 默认值: false
+   */
+  swipeable: makeBooleanProp(false),
+  /**
+   * 底部条位置样式
+   * 类型: string
+   * 可选值: 'normal' | 'text' | 'underline' | 'dot'
+   * 默认值: 'normal'
+   */
+  lineTheme: makeStringProp<TabsLineTheme>('normal'),
+  /**
+   * 底部条宽度，单位像素
+   * 类型: number | string
+   */
+  lineWidth: numericProp,
+  /**
+   * 底部条高度，单位像素
+   * 类型: number | string
+   */
+  lineHeight: numericProp,
+  /**
+   * 颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  color: makeStringProp(''),
+  /**
+   * 非活动状态颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  inactiveColor: makeStringProp(''),
+  /**
+   * 是否开启切换标签内容时的过渡动画
+   * 类型: boolean
+   * 默认值: false
+   */
+  animated: makeBooleanProp(false),
+  /**
+   * 切换动画过渡时间，单位毫秒
+   * 类型: number
+   * 默认值: 300
+   */
+  duration: makeNumberProp(300),
+  /**
+   * 是否开启滚动导航
+   * 类型: string
+   * 可选值：'auto' | 'always'
+   * 默认值: 'auto'
+   */
+  slidable: makeStringProp<TabsSlidable>('auto'),
+  /**
+   * 标签可滑动时是否显示滚动条
+   * 类型: boolean
+   * 默认值: false
+   */
+  showScrollbar: makeBooleanProp(false)
+}
+
+export type TabsExpose = {
+  /**
+   * 设置激活项
+   * @param {number | string} value 激活值
+   * @param {boolean} init 是否已初始化
+   * @param {boolean} setScroll 是否设置scroll-view滚动
+   */
+  setActive: (value: number | string, init: boolean, setScroll: boolean) => void
+  /**
+   * 使选中项滚动到可视区域
+   */
+  scrollIntoView: () => void
+  /**
+   * 更新激活项边框线样式
+   * @param {boolean} animation 是否开启动画，默认开启
+   */
+  updateLineStyle: (animation?: boolean) => void
+}
+
+export type TabsProps = ExtractPropTypes<typeof tabsProps>
+
+export type TabsInstance = ComponentPublicInstance<TabsProps, TabsExpose>