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

package/components/wd-slide-verify/wd-slide-verify.vue

@@ -0,0 +1,222 @@
+<template>
+  <view :class="rootClass" :id="slideVerifyId" :style="rootStyle">
+    <!-- 背景提示文字 -->
+    <view class="wd-slide-verify__text">
+      <slot name="text">
+        <text class="wd-slide-verify__text-inner">
+          {{ slideVerifyText }}
+        </text>
+      </slot>
+    </view>
+    <!-- 滑过区域，包含滑块 -->
+    <view class="wd-slide-verify__track" :style="trackStyle">
+      <view class="wd-slide-verify__track-text">
+        <slot name="success-text">
+          {{ slideVerifySuccessText }}
+        </slot>
+      </view>
+      <!-- 滑块 -->
+      <view class="wd-slide-verify__button" @touchstart.prevent="onTouchStart" @touchmove.prevent="onTouchMove" @touchend="onTouchEnd">
+        <slot v-if="isPass" name="success-icon">
+          <wd-icon custom-class="wd-slide-verify__button-icon wd-slide-verify__button-icon--success" :name="successIcon" :size="successIconSize" />
+        </slot>
+
+        <slot v-else name="icon">
+          <wd-icon custom-class="wd-slide-verify__button-icon" :name="icon" :size="iconSize" />
+        </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-slide-verify',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted, onBeforeUnmount, getCurrentInstance, type CSSProperties } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { slideVerifyProps, type SlideVerifyEmits, type SlideVerifyExpose } from './types'
+import { useTouch } from '../../composables/useTouch'
+import { useTranslate } from '../../composables/useTranslate'
+import { objToStyle, isDef, getRect, uuid } from '../../common/util'
+
+const props = defineProps(slideVerifyProps)
+const emit = defineEmits<SlideVerifyEmits>()
+
+const slideVerifyId = ref<string>(`wd-slide-verify-${uuid()}`)
+
+const { proxy } = getCurrentInstance()!
+
+const touch = useTouch()
+const { translate } = useTranslate('slideVerify')
+
+const slideVerifyText = computed(() => {
+  return isDef(props.text) && props.text !== '' ? props.text : translate('text')
+})
+
+const slideVerifySuccessText = computed(() => {
+  return isDef(props.successText) && props.successText !== '' ? props.successText : translate('successText')
+})
+
+const rootClass = computed(() => {
+  return [
+    'wd-slide-verify',
+    {
+      'is-disabled': props.disabled,
+      'is-success': isPass.value,
+      'is-dragging': isDragging.value
+    },
+    props.customClass
+  ]
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.backgroundColor)) {
+    style.background = props.backgroundColor
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const trackStyle = computed(() => {
+  const style: CSSProperties = {
+    width: `${currentPosition.value + containerHeight.value}px`,
+    transition: isResetting.value ? 'all 0.3s ease' : 'none'
+  }
+  if (isDef(props.activeBackgroundColor)) {
+    style.background = props.activeBackgroundColor
+  }
+  if (currentPosition.value === 0) {
+    style.background = 'transparent'
+  }
+  return objToStyle(style)
+})
+
+const containerWidth = ref<number>(0)
+const containerHeight = ref<number>(0)
+
+const init = async () => {
+  try {
+    const rect = await getRect(`#${slideVerifyId.value}`, false, proxy)
+    containerWidth.value = rect.width || 0
+    containerHeight.value = rect.height || 0
+  } catch (e) {
+    containerWidth.value = 0
+    containerHeight.value = 0
+  }
+}
+
+onMounted(async () => {
+  await init()
+})
+
+// 最大位置，基于实测容器宽高计算
+const maxPosition = computed(() => {
+  const { value: w } = containerWidth
+  const { value: h } = containerHeight
+  if (w <= 0 || h <= 0) return 0
+  return Math.max(0, w - h)
+})
+
+// 完成状态判断
+const isComplete = computed(() => {
+  const distance = Math.abs(maxPosition.value - currentPosition.value)
+  return distance <= props.tolerance // 容差范围内完成
+})
+
+// 位置状态
+const currentPosition = ref<number>(0)
+const startPosition = ref<number>(0)
+// 成功状态
+const isPass = ref<boolean>(false)
+// 拖动状态
+const isDragging = ref<boolean>(false)
+// 回弹
+const isResetting = ref(false)
+
+const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max))
+const updatePosition = (position: number) => {
+  // 限制位置在允许范围内
+  currentPosition.value = clamp(position, 0, maxPosition.value)
+}
+
+const isDisabled = computed(() => props.disabled || isPass.value)
+const onTouchStart = (event: TouchEvent): void => {
+  if (isDisabled.value || isDragging.value) return
+
+  touch.touchStart(event)
+  startPosition.value = currentPosition.value
+  isDragging.value = true
+}
+
+const onTouchMove = (event: TouchEvent): void => {
+  if (isDisabled.value || !isDragging.value) return
+
+  touch.touchMove(event)
+  updatePosition(startPosition.value + touch.deltaX.value)
+}
+// 控制回弹
+const timer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+const onTouchEnd = (): void => {
+  if (isDisabled.value || !isDragging.value) return
+  isDragging.value = false
+
+  if (isComplete.value) {
+    // 完成
+    updatePosition(maxPosition.value)
+    isPass.value = true
+    emit('success')
+  } else {
+    isResetting.value = true
+    // 失败回到起点
+    updatePosition(0)
+    emit('fail')
+
+    timer.value = setTimeout(() => {
+      isResetting.value = false
+    }, 300)
+  }
+}
+
+onBeforeUnmount(() => {
+  if (timer.value !== null) {
+    clearTimeout(timer.value)
+    timer.value = null
+  }
+})
+
+/**
+ * 重置验证组件到初始状态
+ */
+const reset = () => {
+  if (timer.value !== null) {
+    clearTimeout(timer.value)
+    timer.value = null
+  }
+  isResetting.value = true
+  currentPosition.value = 0
+  startPosition.value = 0
+  isPass.value = false
+  isDragging.value = false
+  timer.value = setTimeout(() => {
+    isResetting.value = false
+  }, 300)
+}
+
+defineExpose<SlideVerifyExpose>({ reset, init })
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-slider/index.scss

@@ -0,0 +1,485 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+/* ================================ 组件SCSS变量 ================================ */
+
+/* 轨道 (Track) */
+$slider-bar-height: var(--wot-slider-bar-height, $n-2) !default;
+$slider-bar-height-capsule: var(--wot-slider-bar-height-capsule, $n-24) !default;
+$slider-bar-bg: var(--wot-slider-bar-bg, $filled-strong) !default;
+$slider-bar-radius: var(--wot-slider-bar-radius, $radius-radius-full) !default;
+$slider-bar-height-vertical: var(--wot-slider-bar-height-vertical, $n-248) !default;
+
+/* 进度条 (Range) */
+$slider-line-bg: var(--wot-slider-line-bg, $primary-6) !default;
+$slider-line-height: var(--wot-slider-line-height, $n-2) !default;
+$slider-line-height-capsule: var(--wot-slider-line-height-capsule, $n-18) !default;
+
+/* 滑块 (Thumb) */
+$slider-dot-size: var(--wot-slider-dot-size, $n-24) !default;
+$slider-dot-bg: var(--wot-slider-dot-bg, $filled-oppo) !default;
+$slider-dot-shadow: var(--wot-slider-dot-shadow, 0 2px 8px 0 rgba(0, 0, 0, 0.1)) !default;
+
+/* 气泡提示 (Popover) */
+$slider-dot-popover-bg: var(--wot-slider-dot-popover-bg, $opacfilled-tooltip-toast-cover) !default;
+$slider-dot-popover-color: var(--wot-slider-dot-popover-color, $text-white) !default;
+$slider-dot-popover-radius: var(--wot-slider-dot-popover-radius, $radius-main) !default;
+$slider-dot-popover-padding: var(--wot-slider-dot-popover-padding, $padding-extra-tight $padding-loose) !default;
+$slider-dot-popover-font-size: var(--wot-slider-dot-popover-font-size, $typography-body-size-main) !default;
+$slider-dot-popover-line-height: var(--wot-slider-dot-popover-line-height, $typography-body-line--height-size-main) !default;
+$slider-dot-popover-gap: var(--wot-slider-dot-popover-gap, $n-3) !default;
+$slider-dot-popover-arrow-width: var(--wot-slider-dot-popover-arrow-width, $n-12) !default;
+$slider-dot-popover-arrow-height: var(--wot-slider-dot-popover-arrow-height, $n-6) !default;
+$slider-dot-popover-duration-exit: var(--wot-slider-dot-popover-duration-exit, 100ms) !default;
+$slider-dot-popover-easing-exit: var(--wot-slider-dot-popover-easing-exit, cubic-bezier(0.4, 0, 1, 1)) !default;
+$slider-dot-popover-duration-enter: var(--wot-slider-dot-popover-duration-enter, 200ms) !default;
+$slider-dot-popover-easing-enter: var(--wot-slider-dot-popover-easing-enter, cubic-bezier(0.34, 1.56, 0.64, 1)) !default;
+
+/* 刻度 (Scale) */
+$slider-scale-size: var(--wot-slider-scale-size, $n-6) !default;
+$slider-scale-border-radius: var(--wot-slider-scale-border-radius, $radius-radius-full) !default;
+$slider-scale-bg: var(--wot-slider-scale-bg, $filled-strong) !default;
+$slider-scale-bg-active: var(--wot-slider-scale-bg-active, $primary-6) !default;
+$slider-scale-capsule-bg: var(--wot-slider-scale-capsule-bg, $filled-strong) !default;
+$slider-scale-capsule-width: var(--wot-slider-scale-capsule-width, $n-2) !default;
+$slider-scale-capsule-border-radius: var(--wot-slider-scale-capsule-border-radius, $radius-zero) !default;
+$slider-scale-desc-font-size: var(--wot-slider-scale-desc-font-size, $typography-body-size-main) !default;
+$slider-scale-desc-line-height: var(--wot-slider-scale-desc-line-height, $typography-body-line--height-size-main) !default;
+$slider-scale-desc-color: var(--wot-slider-scale-desc-color, $text-main) !default;
+$slider-scale-desc-spacing: var(--wot-slider-scale-desc-spacing, $spacing-tight) !default;
+$slider-marks-desc-spacing: var(--wot-slider-marks-desc-spacing, calc($slider-dot-size / 2 + $spacing-tight)) !default;
+$slider-marks-desc-capsule-spacing: var(--wot-slider-marks-desc-capsule-spacing, calc($slider-dot-size + $spacing-super-tight)) !default;
+$slider-marks-extra-padding: var(--wot-slider-marks-extra-padding, $padding-super-loose) !default;
+$slider-marks-extra-capsule-padding: var(--wot-slider-marks-extra-capsule-padding, $padding-ultra-loose) !default;
+
+/* 布局 (Layout) */
+$slider-capsule-track-inset: var(--wot-slider-capsule-track-inset, $n-3) !default;
+$slider-extreme-spacing: var(--wot-slider-extreme-spacing, $spacing-loose) !default;
+
+/* 极值文字 (Extreme Value) */
+$slider-value-font-size: var(--wot-slider-value-font-size, $typography-body-size-main) !default;
+$slider-value-color: var(--wot-slider-value-color, $text-secondary) !default;
+
+/* 状态 (States) */
+$slider-opacity-disabled: var(--wot-slider-opacity-disabled, $opacity-disabled) !default;
+
+@include b(slider) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  position: relative;
+
+  @include m(with-extreme) {
+    @include me(bar) {
+      margin-left: $slider-extreme-spacing;
+      margin-right: $slider-extreme-spacing;
+    }
+  }
+
+  @include e(bar) {
+    flex: 1;
+    position: relative;
+    cursor: pointer;
+
+    // 默认（线状）样式
+    @include m(default) {
+      height: $slider-bar-height;
+      background: $slider-bar-bg;
+      border-radius: $slider-bar-radius;
+    }
+
+    // 管道（胶囊）样式
+    @include m(capsule) {
+      height: $slider-bar-height-capsule;
+      background: $slider-bar-bg;
+      border-radius: $slider-bar-radius;
+      padding: 0 $slider-capsule-track-inset;
+      display: flex;
+      align-items: center;
+    }
+
+    @include when(disabled) {
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(track) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  @include e(line) {
+    position: relative;
+    height: 100%;
+    background: $slider-line-bg;
+    border-radius: inherit;
+
+    @include m(capsule) {
+      height: $slider-line-height-capsule;
+    }
+
+    @include m(single) {
+      border-radius: inherit;
+    }
+
+    @include when(disabled) {
+      opacity: $slider-opacity-disabled;
+    }
+  }
+
+  @include e(dot) {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  @include e(dot-popover) {
+    position: absolute;
+    bottom: calc(100% + #{$slider-dot-popover-gap});
+    left: 50%;
+    transform: translateX(-50%) scale(0);
+    transform-origin: center bottom;
+    opacity: 0;
+    /* 出场 transition：目标是隐藏态，所以写在这里 */
+    transition: opacity $slider-dot-popover-duration-exit $slider-dot-popover-easing-exit,
+      transform $slider-dot-popover-duration-exit $slider-dot-popover-easing-exit;
+    pointer-events: none;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    @include when(visible) {
+      opacity: 1;
+      transform: translateX(-50%) scale(1);
+      pointer-events: auto;
+      /* 入场 transition：目标是可见态，所以写在这里 */
+      transition: opacity $slider-dot-popover-duration-enter $slider-dot-popover-easing-enter,
+        transform $slider-dot-popover-duration-enter $slider-dot-popover-easing-enter;
+    }
+  }
+
+  @include e(dot-popover-text) {
+    background: $slider-dot-popover-bg;
+    padding: $slider-dot-popover-padding;
+    border-radius: $slider-dot-popover-radius;
+    color: $slider-dot-popover-color;
+    font-size: $slider-dot-popover-font-size;
+    line-height: $slider-dot-popover-line-height;
+    white-space: nowrap;
+  }
+
+  @include e(dot-popover-arrow) {
+    position: relative;
+    border-left: calc(#{$slider-dot-popover-arrow-width} / 2) solid transparent;
+    border-right: calc(#{$slider-dot-popover-arrow-width} / 2) solid transparent;
+    border-top: $slider-dot-popover-arrow-height solid $slider-dot-popover-bg;
+  }
+
+  @include e(dot-slider) {
+    width: $slider-dot-size;
+    height: $slider-dot-size;
+    background: $slider-dot-bg;
+    border-radius: 50%;
+    box-shadow: $slider-dot-shadow;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  @include e(scale-item) {
+    position: absolute;
+
+    @include m(default) {
+      width: $slider-scale-size;
+      height: $slider-scale-size;
+      background: $slider-scale-bg;
+      border-radius: $slider-scale-border-radius;
+    }
+
+    @include when(active) {
+      background: $slider-scale-bg-active;
+    }
+
+    // 管道样式下的刻度变为垂直分割线（间隙）
+    @include m(capsule) {
+      width: $slider-scale-capsule-width;
+      height: 100%;
+      background: $slider-scale-capsule-bg;
+      border-radius: $slider-scale-capsule-border-radius;
+
+      @include when(active) {
+        background: $slider-scale-capsule-bg;
+      }
+      
+      &:first-child,
+      &:last-child {
+        background: transparent;
+      }
+    }
+
+    @include when(disabled) {
+      opacity: $slider-opacity-disabled;
+    }
+  }
+
+  @include e(value) {
+    font-size: $slider-value-font-size;
+    color: $slider-value-color;
+    flex-shrink: 0;
+  }
+
+  @include m(horizontal) {
+    &.wd-slider--marks {
+      padding-bottom: $slider-marks-extra-padding;
+    }
+
+    @include me(scale-desc) {
+      position: absolute;
+      top: $slider-marks-desc-spacing;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: $slider-scale-desc-font-size;
+      line-height: $slider-scale-desc-line-height;
+      color: $slider-scale-desc-color;
+      white-space: nowrap;
+    }
+
+    &.wd-slider--theme-capsule {
+
+      &.wd-slider--marks {
+        padding-bottom: $slider-marks-extra-capsule-padding;
+      }
+
+      .wd-slider__scale-desc {
+        top: $slider-marks-desc-capsule-spacing;
+      }
+    }
+
+    @include me(bar) {
+      @include m(default) {
+        margin-top: calc($slider-dot-size / 2 - $slider-bar-height);
+        margin-bottom: calc($slider-dot-size / 2 - $slider-bar-height);
+      }
+
+      // 管道样式下的特殊处理
+      @include m(capsule) {
+        @include me(track) {
+          left: $slider-capsule-track-inset;
+          right: $slider-capsule-track-inset;
+        }
+
+        @include me(dot-slider) {
+          width: $slider-dot-size;
+          height: $slider-dot-size;
+        }
+      }
+    }
+
+    @include me(dot) {
+      top: 50%;
+      transform: translateY(-50%);
+
+      // 双滑块定位
+      @include m(left) {
+        left: 0;
+        transform: translate(-50%, -50%);
+      }
+
+      @include m(right) {
+        right: 0;
+        transform: translate(50%, -50%);
+      }
+    }
+
+    // 单滑块定位在右端
+    @include me(line) {
+      @include m(single) {
+        @include me(dot) {
+          right: 0;
+          transform: translate(50%, -50%);
+        }
+      }
+    }
+
+    // 刻度在轨道垂直居中
+    @include me(scale-item) {
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      // 管道模式刻度保持贴顶
+      @include m(capsule) {
+        top: 0;
+        transform: translateX(-50%);
+      }
+    }
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+    height: $slider-bar-height-vertical;
+    width: auto;
+    align-items: center;
+
+    &.wd-slider--with-extreme {
+      .wd-slider__bar {
+        margin-top: $slider-extreme-spacing;
+        margin-bottom: $slider-extreme-spacing;
+      }
+    }
+
+    &.wd-slider--marks {
+      padding-left: $slider-marks-extra-padding;
+    }
+
+    @include me(bar) {
+      width: auto;
+      flex: 1;
+
+      @include m(default) {
+        width: $slider-bar-height;
+        height: 100%;
+        margin: unset calc($slider-dot-size / 2);
+      }
+
+      @include m(capsule) {
+        width: $slider-bar-height-capsule;
+        height: 100%;
+        padding: $slider-capsule-track-inset 0;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+
+        @include edeep(track) {
+          top: $slider-capsule-track-inset;
+          bottom: $slider-capsule-track-inset;
+        }
+
+        @include edeep(dot-slider) {
+          width: $slider-dot-size;
+          height: $slider-dot-size;
+          transform: rotate(90deg);
+        }
+      }
+
+      @include m(default) {
+        @include edeep(dot-slider) {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    @include me(line) {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      @include m(capsule) {
+        width: $slider-line-height-capsule;
+      }
+
+      @include me(dot) {
+        left: 50%;
+        transform: translateX(-50%);
+        flex-direction: row;
+      }
+
+      @include m(single) {
+        @include me(dot) {
+          bottom: 0;
+          transform: translate(-50%, 50%);
+        }
+      }
+
+      @include me(dot) {
+        @include m(left) {
+          top: 0;
+          bottom: auto;
+          transform: translate(-50%, -50%);
+        }
+
+        @include m(right) {
+          bottom: 0;
+          top: auto;
+          transform: translate(-50%, 50%);
+        }
+      }
+    }
+
+    @include me(dot-popover) {
+      bottom: auto;
+      top: 50%;
+      left: calc(100% + #{$slider-dot-popover-gap});
+      transform: translateY(-50%) scale(0);
+      transform-origin: left center;
+      flex-direction: row-reverse;
+      align-items: center;
+
+      @include when(visible) {
+        transform: translateY(-50%) scale(1);
+      }
+    }
+
+    @include me(dot-popover-arrow) {
+      border-left: none;
+      border-right: $slider-dot-popover-arrow-height solid $slider-dot-popover-bg;
+      border-top: calc(#{$slider-dot-popover-arrow-width} / 2) solid transparent;
+      border-bottom: calc(#{$slider-dot-popover-arrow-width} / 2) solid transparent;
+    }
+
+    @include me(scale-item) {
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      @include m(capsule) {
+        left: 0;
+        width: 100%;
+        height: 2px;
+        transform: translateY(-50%);
+      }
+    }
+
+    @include me(scale-desc) {
+      position: absolute;
+      top: 50%;
+      left: auto;
+      right: $slider-marks-desc-spacing;
+      font-size: $slider-scale-desc-font-size;
+      line-height: $slider-scale-desc-line-height;
+      color: $slider-scale-desc-color;
+      transform: translateY(-50%);
+      text-align: right;
+    }
+
+    &.wd-slider--theme-capsule {
+
+      &.wd-slider--marks {
+        padding-left: $slider-marks-extra-capsule-padding;
+      }
+
+      .wd-slider__scale-desc {
+        right: $slider-marks-desc-capsule-spacing;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    opacity: $slider-opacity-disabled;
+    pointer-events: none;
+  }
+}