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

package/components/wd-step/wd-step.vue

@@ -0,0 +1,181 @@
+<template>
+  <view
+    v-if="currentStatus"
+    :class="`wd-step wd-step--${currentStatus} ${customClass} ${canAlignCenter ? 'is-center' : ''}  ${vertical ? 'is-vertical' : ''}`"
+    :style="rootStyle"
+  >
+    <view :class="`wd-step__header ${dot ? 'is-dot' : ''}`">
+      <view :class="`wd-step__indicator  ${dot ? 'is-dot' : !!icon || $slots.icon ? 'is-icon' : 'is-text'}`">
+        <view v-if="dot" class="wd-step__dot"></view>
+        <slot v-else-if="$slots.icon || icon" name="icon">
+          <wd-icon v-if="icon" custom-class="wd-step__icon" :name="icon" />
+        </slot>
+        <view v-else class="wd-step__circle">
+          <wd-icon custom-class="wd-step__finished-icon" v-if="currentStatus === 'finished'" name="check" />
+          <wd-icon custom-class="wd-step__error-icon" v-else-if="currentStatus === 'error'" name="close" />
+          <text class="wd-step__circle-text" v-else>{{ index + 1 }}</text>
+        </view>
+      </view>
+      <view v-if="index < childrenLength - 1" class="wd-step__line"></view>
+    </view>
+    <view class="wd-step__content" v-if="$slots.title || currentTitle || $slots.description || description">
+      <slot name="title" v-if="$slots.title || currentTitle">
+        <text class="wd-step__title">{{ currentTitle }}</text>
+      </slot>
+      <slot name="description" v-if="$slots.description || description">
+        <text class="wd-step__description">{{ description }}</text>
+      </slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-step',
+  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 } from 'vue'
+import { useParent } from '../../composables/useParent'
+import { STEPS_KEY } from '../wd-steps/types'
+import { isDef, objToStyle } from '../../common/util'
+import { useTranslate } from '../../composables/useTranslate'
+import { stepProps, type StepStatus } from './types'
+import type { CSSProperties } from 'vue'
+
+const props = defineProps(stepProps)
+
+const { parent: steps, index } = useParent(STEPS_KEY)
+
+const { translate } = useTranslate('steps')
+
+/**
+ * 获取当前步骤的状态
+ */
+const currentStatus = computed<StepStatus | ''>(() => {
+  return getCurrentStatus(index.value)
+})
+
+/**
+ * 获取当前步骤的标题
+ */
+const currentTitle = computed<string>(() => {
+  return getCurrentTitle(currentStatus.value)
+})
+
+/**
+ * 根节点样式
+ */
+const rootStyle = computed<string>(() => {
+  const style: CSSProperties = {}
+  if (steps.value) {
+    const { vertical, space } = steps.value.props
+    if (vertical) {
+      if (space && space !== '') {
+        style['height'] = space
+      }
+    } else {
+      style['width'] = space && space !== '' ? space : 100 / steps.value.children.length + '%'
+    }
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+/**
+ * 是否居中对齐
+ */
+const canAlignCenter = computed<boolean>(() => {
+  if (isDef(steps.value)) {
+    const { vertical, alignCenter } = steps.value.props
+    return Boolean(!vertical && alignCenter)
+  } else {
+    return false
+  }
+})
+
+/**
+ * 是否垂直布局
+ */
+const vertical = computed<boolean>(() => {
+  if (isDef(steps.value)) {
+    return Boolean(steps.value.props.vertical)
+  } else {
+    return false
+  }
+})
+
+/**
+ * 是否使用点状指示器
+ */
+const dot = computed<boolean>(() => {
+  if (isDef(steps.value)) {
+    return Boolean(steps.value.props.dot)
+  } else {
+    return false
+  }
+})
+
+/**
+ * 步骤总数量
+ */
+const childrenLength = computed<number>(() => {
+  if (isDef(steps.value)) {
+    return Number(steps.value.children.length)
+  } else {
+    return 0
+  }
+})
+
+/**
+ * 获取状态
+ * @param index 索引
+ */
+function getCurrentStatus(index: number): StepStatus | '' {
+  if (props.status) {
+    return props.status
+  }
+
+  if (steps.value) {
+    const { active } = steps.value.props
+    if (Number(active) > index) {
+      return 'finished'
+    } else if (Number(active) === index) {
+      return 'process'
+    } else {
+      return 'wait'
+    }
+  } else {
+    return 'wait' // 默认如果不在Steps中，直接渲染等待
+  }
+}
+
+/**
+ * 获取默认标题
+ * @param currentStatus 当前状态
+ */
+function getCurrentTitle(currentStatus: string): string {
+  if (props.title) return props.title
+
+  switch (currentStatus) {
+    case 'finished':
+      return translate('finished')
+    case 'error':
+      return translate('failed')
+    case 'process':
+      return translate('process')
+    case 'wait':
+    default:
+      return translate('wait')
+  }
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-steps/index.scss

@@ -0,0 +1,7 @@
+@use '../../styles/mixin/mixin.scss' as *;
+
+@include b(steps) {
+  @include when(vertical) {
+    display: block;
+  }
+}

package/components/wd-steps/types.ts

@@ -0,0 +1,50 @@
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+export const stepsProps = {
+  ...baseProps,
+
+  /**
+   * 当前激活的步骤进度，以数字表示。
+   * 类型: number
+   * 默认值: 0
+   */
+  active: makeNumberProp(0),
+
+  /**
+   * 是否为垂直方向的步骤条。
+   * 类型: boolean
+   * 默认值: false
+   */
+  vertical: makeBooleanProp(false),
+
+  /**
+   * 是否为点状步骤条样式。
+   * 类型: boolean
+   * 默认值: false
+   */
+  dot: makeBooleanProp(false),
+
+  /**
+   * 步骤条之间的间距，默认为自动计算。
+   * 如果指定，则使用此值作为间距。
+   * 类型: string
+   * 默认值: ''
+   */
+  space: makeStringProp(''),
+
+  /**
+   * 是否将步骤条水平居中显示，只对横向步骤条有效。
+   * 类型: boolean
+   * 默认值: false
+   */
+  alignCenter: makeBooleanProp(false)
+}
+
+export type StepsProps = ExtractPropTypes<typeof stepsProps>
+
+export type StepsProvide = {
+  props: Partial<StepsProps>
+}
+
+export const STEPS_KEY: InjectionKey<StepsProvide> = Symbol('wd-steps')

package/components/wd-steps/wd-steps.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2026-01-09 16:05:24
+ * @LastEditTime: 2026-02-26 14:41:35
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-steps/wd-steps.vue
+ * 记得注释
+-->
+<template>
+  <view :class="`wd-steps ${customClass} ${vertical ? 'is-vertical' : ''}`" :style="customStyle">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-steps',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { useChildren } from '../../composables/useChildren'
+import { STEPS_KEY, stepsProps } from './types'
+
+const props = defineProps(stepsProps)
+
+const { linkChildren } = useChildren(STEPS_KEY)
+
+linkChildren({ props })
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-sticky/index.scss

@@ -0,0 +1,9 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+@include b(sticky) {
+  display: inline-block;
+  @include e(container) {
+    display: inline-block;
+  }
+}

package/components/wd-sticky/types.ts

@@ -0,0 +1,13 @@
+import { baseProps, makeNumberProp } from '../../common/props'
+
+export const stickyProps = {
+  ...baseProps,
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(1),
+  /**
+   * 吸顶距离
+   */
+  offsetTop: makeNumberProp(0)
+}

package/components/wd-sticky/wd-sticky.vue

@@ -0,0 +1,192 @@
+<template>
+  <view :style="`${rootStyle};display: inline-block;`">
+    <view :class="`wd-sticky ${customClass}`" :style="stickyStyle" :id="styckyId">
+      <view class="wd-sticky__container" :style="containerStyle">
+        <wd-resize @resize="handleResize" custom-style="display: inline-block;">
+          <slot />
+        </wd-resize>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sticky',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdResize from '../wd-resize/wd-resize.vue'
+import { computed, getCurrentInstance, reactive, ref, type CSSProperties } from 'vue'
+import { addUnit, getRect, objToStyle, pause, uuid } from '../../common/util'
+import { stickyProps } from './types'
+import { useParent } from '../../composables/useParent'
+import { STICKY_BOX_KEY } from '../wd-sticky-box/types'
+
+const props = defineProps(stickyProps)
+const styckyId = ref<string>(`wd-sticky${uuid()}`)
+const observerList = ref<UniApp.IntersectionObserver[]>([])
+
+const stickyState = reactive({
+  position: 'absolute',
+  boxLeaved: false,
+  top: 0,
+  height: 0,
+  width: 0,
+  state: ''
+})
+
+const { parent: stickyBox } = useParent(STICKY_BOX_KEY)
+
+const { proxy } = getCurrentInstance() as any
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': props.zIndex,
+    height: addUnit(stickyState.height),
+    width: addUnit(stickyState.width)
+  }
+  if (!stickyState.boxLeaved) {
+    style['position'] = 'relative'
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const stickyStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': props.zIndex,
+    height: addUnit(stickyState.height),
+    width: addUnit(stickyState.width)
+  }
+  if (!stickyState.boxLeaved) {
+    style['position'] = 'relative'
+  }
+  return `${objToStyle(style)}`
+})
+
+const containerStyle = computed(() => {
+  const style: CSSProperties = {
+    position: stickyState.position as 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed',
+    top: addUnit(stickyState.top)
+  }
+  return objToStyle(style)
+})
+
+const innerOffsetTop = computed(() => {
+  let top: number = 0
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  top = 44
+  // #endif
+
+  return top + props.offsetTop
+})
+
+/**
+ * 清除对当前组件的监听
+ */
+function clearObserver() {
+  while (observerList.value.length !== 0) {
+    observerList.value.pop()!.disconnect()
+  }
+}
+/**
+ * 添加对当前组件的监听
+ */
+function createObserver() {
+  const observer = uni.createIntersectionObserver(proxy, { thresholds: [0, 0.5] })
+  observerList.value.push(observer)
+  return observer
+}
+/**
+ *  当前内容高度发生变化时重置监听
+ */
+async function handleResize(detail: any) {
+  stickyState.width = detail.width
+  stickyState.height = detail.height
+  await pause()
+  observerContentScroll()
+  if (!stickyBox.value || !stickyBox.value.observerForChild) return
+  stickyBox.value.observerForChild(proxy)
+}
+/**
+ *  监听吸顶元素滚动事件
+ */
+function observerContentScroll() {
+  if (stickyState.height === 0 && stickyState.width === 0) return
+  const offset = innerOffsetTop.value + stickyState.height
+  clearObserver()
+  createObserver()
+    .relativeToViewport({
+      top: -offset
+    })
+    .observe(`#${styckyId.value}`, (result) => {
+      handleRelativeTo(result)
+    })
+  getRect(`#${styckyId.value}`, false, proxy).then((res) => {
+    // #ifdef H5
+    // H5端，查询节点信息未计算导航栏高度
+    res.bottom = Number(res.bottom) + 44
+    // #endif
+    if (Number(res.bottom) <= offset) handleRelativeTo({ boundingClientRect: res })
+  })
+}
+/**
+ * @description 根据位置进行吸顶
+ */
+function handleRelativeTo({ boundingClientRect }: any) {
+  // sticky 高度大于或等于 wd-sticky-box，使用 wd-sticky-box 无任何意义
+  if (stickyBox.value && stickyBox.value.boxStyle && stickyState.height >= stickyBox.value.boxStyle.height) {
+    stickyState.position = 'absolute'
+    stickyState.top = 0
+    return
+  }
+
+  let isStycky = boundingClientRect.top <= innerOffsetTop.value
+  // #ifdef H5 || APP-PLUS
+  isStycky = boundingClientRect.top < innerOffsetTop.value
+  // #endif
+
+  if (isStycky) {
+    stickyState.state = 'sticky'
+    stickyState.boxLeaved = false
+    stickyState.position = 'fixed'
+    stickyState.top = innerOffsetTop.value
+  } else {
+    stickyState.state = 'normal'
+    stickyState.boxLeaved = false
+    stickyState.position = 'absolute'
+    stickyState.top = 0
+  }
+}
+
+/**
+ * 设置位置
+ * @param setboxLeaved
+ * @param setPosition
+ * @param setTop
+ */
+function setPosition(boxLeaved: boolean, position: string, top: number) {
+  stickyState.boxLeaved = boxLeaved
+  stickyState.position = position
+  stickyState.top = top
+}
+
+defineExpose({
+  setPosition,
+  stickyState,
+  offsetTop: props.offsetTop
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-sticky-box/index.scss

@@ -0,0 +1,6 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+@include b(sticky-box) {
+  position: relative;
+}

package/components/wd-sticky-box/types.ts

@@ -0,0 +1,20 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-04-08 22:34:01
+ * @LastEditTime: 2024-06-01 16:04:56
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-sticky-box/types.ts
+ * 记得注释
+ */
+import type { ComponentInternalInstance, InjectionKey } from 'vue'
+
+export type stickyBoxProvide = {
+  boxStyle: {
+    height: number // 高度
+    width: number // 宽度
+  }
+  observerForChild: (child: ComponentInternalInstance) => void // 监听子组件
+}
+
+export const STICKY_BOX_KEY: InjectionKey<stickyBoxProvide> = Symbol('wd-sticky-box')

package/components/wd-sticky-box/wd-sticky-box.vue

@@ -0,0 +1,157 @@
+<template>
+  <view style="position: relative">
+    <view :class="`wd-sticky-box ${props.customClass}`" :style="customStyle" :id="styckyBoxId">
+      <wd-resize @resize="handleResize">
+        <slot />
+      </wd-resize>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sticky-box',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    // virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdResize from '../wd-resize/wd-resize.vue'
+import { getCurrentInstance, onBeforeMount, reactive, ref } from 'vue'
+import { getRect, uuid } from '../../common/util'
+import { baseProps } from '../../common/props'
+import { STICKY_BOX_KEY } from './types'
+import { useChildren } from '../../composables/useChildren'
+
+const props = defineProps(baseProps)
+
+const styckyBoxId = ref<string>(`wd-sticky-box${uuid()}`)
+
+const observerMap = ref<Map<any, any>>(new Map())
+
+const boxStyle = reactive({
+  height: 0,
+  width: 0
+})
+
+const { proxy } = getCurrentInstance() as any
+
+const { children: stickyList, linkChildren } = useChildren(STICKY_BOX_KEY)
+linkChildren({
+  boxStyle: boxStyle,
+  observerForChild
+})
+
+onBeforeMount(() => {
+  observerMap.value = new Map()
+})
+
+/**
+ * 容器大小变化后重新监听sticky组件与box组件的交叉状态
+ * @param detail
+ */
+function handleResize(detail: any) {
+  // 相对的容器大小改变后，同步设置 wd-sticky-box 的大小
+  boxStyle.width = detail.width
+  boxStyle.height = detail.height
+  // wd-sticky-box 大小变化时，重新监听所有吸顶元素
+  const temp = observerMap.value
+  observerMap.value = new Map()
+  for (const [uid] of temp) {
+    const child = stickyList.find((sticky) => {
+      return sticky.$.uid === uid
+    })
+    observerForChild(child)
+  }
+  temp.forEach((observer) => {
+    observer.disconnect()
+  })
+  temp.clear()
+}
+/**
+ * 删除对指定sticky的监听
+ * @param child 指定的子组件
+ */
+function deleteObserver(child: any) {
+  const observer = observerMap.value.get(child.$.uid)
+  if (!observer) return
+  observer.disconnect()
+  observerMap.value.delete(child.$.uid)
+}
+/**
+ * 针对指定sticky添加监听
+ * @param child 指定的子组件
+ */
+function createObserver(child: any) {
+  const observer = uni.createIntersectionObserver(proxy, { thresholds: [0, 0.5] })
+  observerMap.value.set(child.$.uid, observer)
+  return observer
+}
+/**
+ * 监听子组件
+ * @param child 子组件
+ */
+function observerForChild(child: any) {
+  deleteObserver(child)
+  const observer = createObserver(child)
+  const exposed = child.$.exposed
+  let offset = exposed.stickyState.height + exposed.offsetTop
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  offset = offset + 44
+  // #endif
+
+  if (boxStyle.height <= exposed.stickyState.height) {
+    exposed.setPosition(false, 'absolute', 0)
+  }
+  observer.relativeToViewport({ top: -offset }).observe(`#${styckyBoxId.value}`, (result) => {
+    handleRelativeTo(exposed, result)
+  })
+  // 当子组件默认处于边界外且永远不会进入边界内时，需要手动调用一次
+  getRect(`#${styckyBoxId.value}`, false, proxy)
+    .then((res) => {
+      // #ifdef H5
+      // H5端，查询节点信息未计算导航栏高度
+      res.bottom = Number(res.bottom) + 44
+      // #endif
+      if (Number(res.bottom) <= offset) handleRelativeTo(exposed, { boundingClientRect: res })
+    })
+    .catch((res) => {
+      console.log(res)
+    })
+}
+/**
+ *  监听容器组件
+ * @param {Object} exposed wd-sticky实例暴露出的事件
+ * @param {Object} boundingClientRect 边界信息
+ */
+function handleRelativeTo(exposed: any, { boundingClientRect }: any) {
+  let childOffsetTop = exposed.offsetTop
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  childOffsetTop = childOffsetTop + 44
+  // #endif
+  const offset = exposed.stickyState.height + childOffsetTop
+  let isAbsolute = boundingClientRect.bottom <= offset
+  // #ifdef H5 || APP-PLUS
+  isAbsolute = boundingClientRect.bottom < offset
+  // #endif
+  if (isAbsolute) {
+    exposed.setPosition(true, 'absolute', boundingClientRect.height - exposed.stickyState.height)
+  } else if (boundingClientRect.top <= offset && !isAbsolute) {
+    if (exposed.stickyState.state === 'normal') return
+    exposed.setPosition(false, 'fixed', childOffsetTop)
+  }
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-swipe-action/index.scss

@@ -0,0 +1,22 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+@include b(swipe-action) {
+  position: relative;
+  overflow: hidden;
+  @include e(left) {
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  @include e(right) {
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.wd-swipe-action__left,
+.wd-swipe-action__right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}