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

package/components/wd-tab/wd-tab.vue

@@ -0,0 +1,99 @@
+<template>
+  <view :class="`wd-tab ${customClass}`" :style="customStyle">
+    <view :class="['wd-tab__body', { 'wd-tab__body--inactive': !active }]" v-if="shouldBeRender" :style="tabBodyStyle">
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tab',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, ref, watch, type CSSProperties } from 'vue'
+import { isDef, isNumber, isString, objToStyle } from '../../common/util'
+import { useParent } from '../../composables/useParent'
+import { TABS_KEY } from '../wd-tabs/types'
+import { computed } from 'vue'
+import { tabProps } from './types'
+
+const props = defineProps(tabProps)
+
+const { proxy } = getCurrentInstance() as any
+const { parent: tabs, index } = useParent(TABS_KEY)
+
+/**
+ * 激活项下标
+ */
+const active = computed(() => {
+  return isDef(tabs.value) ? tabs.value.state.activeIndex === index.value : false
+})
+
+/** 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染 */
+const painted = ref<boolean>(active.value)
+
+/**
+ * tab body 样式
+ */
+const tabBodyStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (!active.value && (!isDef(tabs.value) || !tabs.value.props.animated)) {
+    style.display = 'none'
+  }
+  return objToStyle(style)
+})
+
+/**
+ * 是否应该渲染
+ */
+const shouldBeRender = computed(() => !props.lazy || painted.value || active.value)
+
+watch(active, (val) => {
+  if (val) painted.value = true
+})
+
+watch(
+  () => props.name,
+  (newValue) => {
+    if (isDef(newValue) && !isNumber(newValue) && !isString(newValue)) {
+      console.error('[wot ui] error(wd-tab): the type of name should be number or string')
+      return
+    }
+    if (tabs.value) {
+      checkName(proxy)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * 检测 tab 绑定的 name 是否和其它 tab 的 name 冲突
+ * @param self 自身
+ */
+function checkName(self: any) {
+  const { name: myName } = props
+  if (myName === undefined || myName === null || myName === '') {
+    return
+  }
+  tabs.value &&
+    tabs.value.children.forEach((child: any) => {
+      if (child.$.uid !== self.$.uid && child.name === myName) {
+        console.error(`The tab's bound value: ${myName} has been used`)
+      }
+    })
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-tabbar/index.scss

@@ -0,0 +1,71 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 高度
+$tabbar-height: var(--wot-tabbar-height, $n-50) !default;
+// 背景色
+$tabbar-bg: var(--wot-tabbar-bg, $filled-oppo) !default;
+// 固定定位层级
+$tabbar-z-index: var(--wot-tabbar-z-index, 10) !default;
+// round 变体水平外边距
+$tabbar-round-margin-horizontal: var(--wot-tabbar-round-margin-horizontal, $spacing-extra-loose) !default;
+// round 变体圆角
+$tabbar-round-radius: var(--wot-tabbar-round-radius, $radius-radius-full) !default;
+// round 变体阴影
+$tabbar-round-shadow: var(
+  --wot-tabbar-round-shadow,
+  0 5px 5px -3px $opac-3_08,
+  0 8px 10px 1px $opac-2_04,
+  0 3px 14px 2px $opac-2_04
+) !default;
+
+@include b(tabbar) {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  position: relative;
+  background: $tabbar-bg;
+  height: $tabbar-height;
+
+  @include e(placeholder) {
+    box-sizing: content-box;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  @include m(round) {
+    margin-left: $tabbar-round-margin-horizontal;
+    margin-right: $tabbar-round-margin-horizontal;
+    border-radius: $tabbar-round-radius;
+    box-shadow: $tabbar-round-shadow;
+
+    @include when(fixed) {
+      @include when(safe) {
+        bottom: constant(safe-area-inset-bottom);
+        bottom: env(safe-area-inset-bottom);
+      }
+    }
+  }
+
+  @include m(default) {
+    @include when(fixed) {
+      @include when(safe) {
+        box-sizing: content-box;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+    @include when(border) {
+      @include halfPixelBorder('top');
+    }
+  }
+
+  @include when(fixed) {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: $tabbar-z-index;
+  }
+}

package/components/wd-tabbar/types.ts

@@ -0,0 +1,79 @@
+import { type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../../common/props'
+import type { TabbarItem } from '../wd-tabbar-item/types'
+
+type TabbarShape = 'default' | 'round'
+
+export type TabbarProvide = {
+  props: {
+    // 选中标签的索引值或者名称
+    modelValue?: number | string
+    // 是否固定在底部
+    fixed?: boolean
+    // 是否设置底部安全距离（iphone X 类型的机型）
+    safeAreaInsetBottom?: boolean
+    // 是否显示顶部边框
+    bordered?: boolean
+    // 标签栏的形状。可选项：default/round
+    shape?: TabbarShape
+    // 激活标签的颜色
+    activeColor?: string
+    // 未激活标签的颜色
+    inactiveColor?: string
+    // 固定在底部时，是否在标签位置生成一个等高的占位元素
+    placeholder?: boolean
+    // 自定义组件的层级
+    zIndex?: number
+  }
+  setChange: (child: TabbarItem) => void
+}
+
+export const TABBAR_KEY: InjectionKey<TabbarProvide> = Symbol('wd-tabbar')
+
+export const tabbarProps = {
+  ...baseProps,
+  /**
+   * 选中标签的索引值或者名称
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 是否固定在底部
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 是否显示顶部边框
+   */
+  bordered: makeBooleanProp(false),
+  /**
+   * 是否设置底部安全距离（iPhone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 标签栏的形状。可选项：default/round
+   */
+  shape: makeStringProp<TabbarShape>('default'),
+  /**
+   * 激活标签的颜色
+   */
+  activeColor: String,
+  /**
+   * 未激活标签的颜色
+   */
+  inactiveColor: String,
+  /**
+   * 固定在底部时，是否在标签位置生成一个等高的占位元素
+   */
+  placeholder: makeBooleanProp(false),
+  /**
+   * 自定义组件的层级
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 切换前的回调函数，返回 false 可阻止切换，支持返回 Promise
+   */
+  beforeChange: Function as PropType<TabbarBeforeChange>
+}
+
+export type TabbarBeforeChange = (value: number | string) => boolean | Promise<boolean>
+
+export type TabbarProps = ExtractPropTypes<typeof tabbarProps>

package/components/wd-tabbar/wd-tabbar.vue

@@ -0,0 +1,109 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2025-12-18 14:30:46
+ * @LastEditTime: 2026-03-27 17:16:22
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-ui/components/wd-tabbar/wd-tabbar.vue
+ * 记得注释
+-->
+<template>
+  <view :class="{ 'wd-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
+    <view
+      :class="`wd-tabbar wd-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${
+        bordered ? 'is-border' : ''
+      }`"
+      :style="rootStyle"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tabbar',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, onMounted, ref, watch, nextTick, computed, type CSSProperties } from 'vue'
+import type { TabbarItem } from '../wd-tabbar-item/types'
+import { addUnit, getRect, isDef, objToStyle } from '../../common/util'
+import { useChildren } from '../../composables/useChildren'
+import { TABBAR_KEY, tabbarProps } from './types'
+import { callInterceptor } from '../../common/interceptor'
+
+const props = defineProps(tabbarProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const height = ref<number | string>('') // 占位高度
+const { proxy } = getCurrentInstance() as any
+
+const { linkChildren } = useChildren(TABBAR_KEY)
+
+linkChildren({
+  props,
+  setChange
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+watch(
+  [() => props.fixed, () => props.placeholder],
+  () => {
+    setPlaceholderHeight()
+  },
+  { deep: true, immediate: false }
+)
+
+onMounted(() => {
+  if (props.fixed && props.placeholder) {
+    nextTick(() => {
+      setPlaceholderHeight()
+    })
+  }
+})
+
+/**
+ * 子项状态变更
+ * @param child 子项
+ */
+function setChange(child: TabbarItem) {
+  let active = child.name
+  if (active === props.modelValue) {
+    return
+  }
+  const change = () => {
+    emit('update:modelValue', active)
+    emit('change', {
+      value: active
+    })
+  }
+  callInterceptor(props.beforeChange, { args: [active], done: change })
+}
+
+function setPlaceholderHeight() {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.wd-tabbar', false, proxy).then((res) => {
+    height.value = Number(res.height)
+  })
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-tabbar-item/index.scss

@@ -0,0 +1,50 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+// 激活态颜色（文字和图标）
+$tabbar-item-color-active: var(--wot-tabbar-item-color-active, $primary-6) !default;
+// 非激活态颜色（文字和图标）
+$tabbar-item-color-inactive: var(--wot-tabbar-item-color-inactive, $text-main) !default;
+// 标题文字大小
+$tabbar-item-title-font-size: var(--wot-tabbar-item-title-font-size, $typography-label-size-extra-small) !default;
+// 标题文字行高
+$tabbar-item-title-line-height: var(--wot-tabbar-item-title-line-height, $typography-label-line--height-size-extra-small) !default;
+// 图标大小
+$tabbar-item-icon-size: var(--wot-tabbar-item-icon-size, $n-24) !default;
+
+@include b(tabbar-item) {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include e(body) {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    line-height: 1;
+    padding: 0;
+    position: relative;
+
+    :deep() {
+      @include when(active) {
+        color: $tabbar-item-color-active;
+      }
+
+      @include when(inactive) {
+        color: $tabbar-item-color-inactive;
+      }
+    }
+  }
+
+  @include e(body-title) {
+    font-size: $tabbar-item-title-font-size;
+    line-height: $tabbar-item-title-line-height;
+  }
+
+  @include edeep(body-icon) {
+    font-size: $tabbar-item-icon-size;
+  }
+}

package/components/wd-tabbar-item/types.ts

@@ -0,0 +1,45 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, numericProp } from '../../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+/**
+ * 折叠面板子项
+ */
+export interface TabbarItem {
+  // 唯一标识
+  name: string | number
+}
+
+export const tabbarItemProps = {
+  ...baseProps,
+  /**
+   * 标签页的标题
+   */
+  title: String,
+  /**
+   * 唯一标识符
+   */
+  name: numericProp,
+  /**
+   * 图标
+   */
+  icon: String,
+  /**
+   * 徽标显示值
+   */
+  value: [Number, String] as PropType<number | string>,
+  /**
+   * 是否点状徽标
+   */
+  isDot: Boolean,
+  /**
+   * 徽标最大值
+   */
+  max: Number,
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<BadgeProps>
+}
+
+export type TabbarItemProps = ExtractPropTypes<typeof tabbarItemProps>

package/components/wd-tabbar-item/wd-tabbar-item.vue

@@ -0,0 +1,101 @@
+<template>
+  <view :class="`wd-tabbar-item ${customClass}`" :style="customStyle" @click="handleClick">
+    <slot>
+      <wd-badge v-bind="customBadgeProps">
+        <view class="wd-tabbar-item__body">
+          <slot name="icon" :active="active"></slot>
+          <template v-if="!$slots.icon && icon">
+            <wd-icon
+              :name="icon"
+              :custom-style="textStyle"
+              :custom-class="`wd-tabbar-item__body-icon ${active ? 'is-active' : 'is-inactive'}`"
+            ></wd-icon>
+          </template>
+          <text v-if="title" :style="textStyle" :class="`wd-tabbar-item__body-title ${active ? 'is-active' : 'is-inactive'}`">
+            {{ title }}
+          </text>
+        </view>
+      </wd-badge>
+    </slot>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tabbar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdBadge from '../wd-badge/wd-badge.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { type CSSProperties, computed } from 'vue'
+import { deepAssign, isDef, isUndefined, objToStyle, omitBy } from '../../common/util'
+import { useParent } from '../../composables/useParent'
+import { TABBAR_KEY } from '../wd-tabbar/types'
+import { tabbarItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+
+const props = defineProps(tabbarItemProps)
+
+const { parent: tabbar, index } = useParent(TABBAR_KEY)
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        value: props.value
+      },
+      isUndefined
+    )
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const textStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (tabbar.value) {
+    if (active.value && tabbar.value.props.activeColor) {
+      style['color'] = tabbar.value.props.activeColor
+    }
+    if (!active.value && tabbar.value.props.inactiveColor) {
+      style['color'] = tabbar.value.props.inactiveColor
+    }
+  }
+
+  return `${objToStyle(style)}`
+})
+
+const active = computed(() => {
+  const name = isDef(props.name) ? props.name : index.value
+  if (tabbar.value) {
+    if (tabbar.value.props.modelValue === name) {
+      return true
+    } else {
+      return false
+    }
+  } else {
+    return false
+  }
+})
+
+/**
+ * 点击tabbar选项
+ */
+function handleClick() {
+  const name: string | number = isDef(props.name) ? props.name : index.value
+  tabbar.value && tabbar.value.setChange({ name })
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-table/index.scss

@@ -0,0 +1,128 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 表格背景色
+$table-bg: var(--wot-table-bg, $filled-oppo) !default;
+// 表格文字颜色
+$table-color: var(--wot-table-color, $text-main) !default;
+// 斑马纹背景色
+$table-stripe-bg: var(--wot-table-stripe-bg, $filled-bottom) !default;
+// 边框颜色
+$table-border-color: var(--wot-table-border-color, $border-main) !default;
+// 边框宽度
+$table-border-width: var(--wot-table-border-width, $stroke-main) !default;
+// 单元格字号
+$table-cell-font-size: var(--wot-table-cell-font-size, $typography-body-size-main) !default;
+// 单元格行高
+$table-cell-line-height: var(--wot-table-cell-line-height, $typography-body-line--height-size-main) !default;
+// 单元格内边距
+$table-cell-padding: var(--wot-table-cell-padding, $padding-loose $padding-extra-loose) !default;
+// 固定列阴影渐变背景
+$table-shadow-gradient: var(--wot-table-shadow-gradient, linear-gradient(270deg, $base-transparent 0%, $opac-2_04 100%)) !default;
+// 排序按钮高度
+$table-sort-button-height: var(--wot-table-sort-button-height, $n-20) !default;
+
+@include b(table) {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: $table-bg;
+
+  @include when(border) {
+    border: $table-border-width solid $table-border-color;
+  }
+
+  @include e(header) {
+    width: 100%;
+    background: $table-bg;
+    z-index: 2;
+
+    @include when(sticky) {
+      position: sticky;
+      top: 0;
+    }
+  }
+
+  @include e(body) {
+    width: 100%;
+  }
+
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    background: $table-bg;
+    padding: $table-cell-padding;
+    font-size: $table-cell-font-size;
+    line-height: $table-cell-line-height;
+    color: $table-color;
+    --wot-sort-button-height: #{$table-sort-button-height};
+
+    @include when(border) {
+      &::before {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        border-right: $table-border-width solid $table-border-color;
+        border-bottom: $table-border-width solid $table-border-color;
+        pointer-events: none;
+        box-sizing: border-box;
+      }
+
+      @include when(last) {
+        &::before {
+          border-right: none;
+        }
+      }
+    }
+
+    @include when(stripe) {
+      background: $table-stripe-bg;
+    }
+
+    @include when(fixed) {
+      position: sticky;
+      z-index: 1;
+    }
+
+    @include when(shadow) {
+      &::after {
+        content: ' ';
+        position: absolute;
+        right: -30rpx;
+        top: 0;
+        width: 30rpx;
+        height: 100%;
+        background: $table-shadow-gradient;
+      }
+    }
+
+    @include when(hidden) {
+      display: none;
+    }
+
+    @include when(left) {
+      justify-content: flex-start;
+    }
+
+    @include when(center) {
+      justify-content: center;
+    }
+
+    @include when(right) {
+      justify-content: flex-end;
+    }
+  }
+
+  @include e(value) {
+    white-space: normal;
+    @include when(ellipsis) {
+      word-break: break-all;
+      @include multiEllipsis(2);
+    }
+  }
+}