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

package/components/wd-skeleton/index.scss

@@ -0,0 +1,112 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 行间距
+$skeleton-row-margin-bottom: var(--wot-skeleton-row-margin-bottom, $spacing-loose) !default;
+// 占位块背景色
+$skeleton-col-bg: var(--wot-skeleton-col-bg, $filled-strong) !default;
+// 文本占位高度
+$skeleton-text-height: var(--wot-skeleton-text-height, $n-16) !default;
+// 矩形占位高度
+$skeleton-rect-height: var(--wot-skeleton-rect-height, $n-16) !default;
+// 圆形占位尺寸
+$skeleton-circle-height: var(--wot-skeleton-circle-height, $n-48) !default;
+// 文本占位圆角
+$skeleton-text-border-radius: var(--wot-skeleton-text-border-radius, $radius-small) !default;
+// 矩形占位圆角
+$skeleton-rect-border-radius: var(--wot-skeleton-rect-border-radius, $radius-main) !default;
+// 圆形占位圆角
+$skeleton-circle-border-radius: var(--wot-skeleton-circle-border-radius, $radius-radius-full) !default;
+// 渐变动画高亮色
+$skeleton-animation-gradient: var(--wot-skeleton-animation-gradient, $filled-bottom) !default;
+// 闪烁动画高亮色
+$skeleton-animation-flashed: var(--wot-skeleton-animation-flashed, $filled-bottom) !default;
+// 闪烁动画透明度
+$skeleton-animation-flashed-opacity: var(--wot-skeleton-animation-flashed-opacity, $opacity-backdrop) !default;
+
+@include b(skeleton) {
+  box-sizing: border-box;
+
+  @include e(row) {
+    justify-content: space-between;
+    margin-bottom: $skeleton-row-margin-bottom;
+    display: flex;
+    align-items: center;
+
+    &:only-child,
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  @include e(col) {
+    border-radius: $skeleton-text-border-radius;
+    background-color: $skeleton-col-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:first-child:last-child,
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  @include m(type) {
+    &-text {
+      width: 100%;
+      height: $skeleton-text-height;
+      border-radius: $skeleton-text-border-radius;
+    }
+
+    &-rect {
+      width: 100%;
+      height: $skeleton-rect-height;
+      border-radius: $skeleton-rect-border-radius;
+    }
+
+    &-circle {
+      flex-shrink: 0;
+      width: $skeleton-circle-height;
+      height: $skeleton-circle-height;
+      border-radius: $skeleton-circle-border-radius;
+    }
+  }
+  @include m(animation) {
+    &-gradient {
+      position: relative;
+      overflow-x: hidden;
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        animation: wd-skeleton-gradient 1.5s linear 2s infinite;
+        background: linear-gradient(90deg, transparent, $skeleton-animation-gradient, transparent);
+        inset: 0;
+      }
+    }
+
+    &-flashed {
+      animation: wd-skeleton-flashed 2s linear 2s infinite;
+    }
+  }
+
+  @keyframes wd-skeleton-gradient {
+    0% {
+      transform: translateX(-100%) skewX(-15deg);
+    }
+    100% {
+      transform: translateX(100%) skewX(-15deg);
+    }
+  }
+  @keyframes wd-skeleton-flashed {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: $skeleton-animation-flashed-opacity;
+      background: $skeleton-animation-flashed;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

package/components/wd-skeleton/types.ts

@@ -0,0 +1,124 @@
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'
+import { makeArrayProp, makeBooleanProp, makeStringProp } from '../../common/props'
+
+/**
+ * 骨架图主题样式
+ * @type {'text' | 'avatar' | 'paragraph' | 'image'}
+ */
+export type SkeletonTheme = 'text' | 'avatar' | 'paragraph' | 'image'
+
+/**
+ * 骨架图加载动画类型
+ * @type {'gradient' | 'flashed'}
+ */
+export type SkeletonAnimation = 'gradient' | 'flashed'
+
+/**
+ * 骨架图行列配置对象
+ */
+export type SkeletonRowColObj = {
+  /** 占位符类型 */
+  type?: 'rect' | 'circle' | 'text'
+  /** 占位符宽高（正方形） */
+  size?: string | number
+  /** 占位符宽度 */
+  width?: string | number
+  /** 占位符高度 */
+  height?: string | number
+  /** 占位符外边距（简写） */
+  margin?: string | number
+  /** 占位符背景色 */
+  background?: string
+  /** 占位符左外边距 */
+  marginLeft?: string | number
+  /** 占位符右外边距 */
+  marginRight?: string | number
+  /** 占位符圆角半径 */
+  borderRadius?: string | number
+  /** 占位符背景色（等同于 background） */
+  backgroundColor?: string
+  /** 其他自定义属性 */
+  [key: string]: any
+}
+
+/**
+ * 骨架图行列配置类型
+ * 支持：数字、配置对象、配置对象数组
+ * @example
+ * ```
+ * // 示例1: [1, 1, 2] 表示三行，分别为1列、1列、2列
+ * // 示例2: [1, { width: '100px' }] 表示两行，第二行自定义宽度
+ * // 示例3: [1, [{ width: '50%' }, { width: '50%' }]] 表示两行，第二行两列
+ * ```
+ */
+export type SkeletonRowCol = number | SkeletonRowColObj | Array<SkeletonRowColObj>
+
+export const skeletonProps = {
+  /**
+   * 骨架图风格
+   * 可选值: 'text' | 'avatar' | 'paragraph' | 'image'
+   * 默认值: 'text'
+   */
+  theme: makeStringProp<SkeletonTheme>('text'),
+
+  /**
+   * 行列配置，用于自定义骨架图的行列数量及各项样式
+   * 类型: Array<number | SkeletonRowColObj | Array<SkeletonRowColObj>>
+   * 默认值: []
+   * @example
+   * ```
+   * // 三行，分别显示为一列、一列、两列的占位符
+   * [1, 1, 2]
+   *
+   * // 三行，第三行自定义宽度
+   * [1, 1, { width: '100px' }]
+   *
+   * // 第三行包含两列，分别设置宽度和右外边距
+   * [1, 1, [{ width: '50%' }, { width: '50%', marginRight: '10px' }]]
+   * ```
+   */
+  rowCol: makeArrayProp<SkeletonRowCol>(),
+
+  /**
+   * 是否显示骨架图（加载中）
+   * 默认值: true
+   */
+  loading: makeBooleanProp(true),
+
+  /**
+   * 加载动画类型
+   * 可选值: 'gradient' | 'flashed' | ''
+   * 默认值: ''（无动画）
+   */
+  animation: {
+    type: String as PropType<SkeletonAnimation>,
+    default: ''
+  },
+
+  /**
+   * 自定义样式类名
+   * 类型: string | string[] | Record<string, boolean>
+   * 默认值: ''
+   */
+  customClass: {
+    type: [String, Array, Object],
+    default: ''
+  },
+
+  /**
+   * 自定义内联样式
+   * 类型: CSSProperties
+   * 默认值: {}
+   */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default() {
+      return {}
+    }
+  }
+}
+
+/**
+ * 骨架图组件 Props 类型
+ */
+export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>

package/components/wd-skeleton/wd-skeleton.vue

@@ -0,0 +1,110 @@
+<template>
+  <view :class="`wd-skeleton ${customClass}`" :style="customStyle">
+    <view class="wd-skeleton__content" v-if="show">
+      <view class="wd-skeleton__row" v-for="(row, index) of parsedRowCols" :key="`row-${index}`">
+        <view v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style" />
+      </view>
+    </view>
+    <view v-else>
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-skeleton',
+  // #ifndef MP-TOUTIAO
+  options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' }
+  // #endif
+}
+</script>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import { ref, computed, watch } from 'vue'
+import type { SkeletonRowCol, SkeletonRowColObj } from './types'
+import { skeletonProps } from './types'
+import { isNumber, addUnit } from '../../common/util'
+
+const themeMap = {
+  avatar: [{ type: 'circle', height: '64px', width: '64px' }],
+  image: [{ type: 'rect', height: '64px', width: '64px' }],
+  text: [
+    1,
+    [
+      { width: '24%', height: '16px', marginRight: '16px' },
+      { width: '76%', height: '16px' }
+    ]
+  ],
+  paragraph: [1, 1, 1, { width: '55%' }]
+}
+const props = defineProps(skeletonProps)
+const rowCols = ref<SkeletonRowCol[]>([])
+
+const parsedRowCols = computed(() => {
+  return rowCols.value.map((item) => {
+    if (isNumber(item)) {
+      return [
+        {
+          class: getColItemClass({ type: 'text' }),
+          style: {}
+        }
+      ]
+    }
+    if (Array.isArray(item)) {
+      return item.map((col) => {
+        return {
+          ...col,
+          class: getColItemClass(col),
+          style: getColItemStyle(col)
+        }
+      })
+    }
+    const nItem = item as SkeletonRowColObj
+
+    return [
+      {
+        ...nItem,
+        class: getColItemClass(nItem),
+        style: getColItemStyle(nItem)
+      }
+    ]
+  })
+})
+
+function getColItemClass(rowCol: SkeletonRowColObj) {
+  return ['wd-skeleton__col', `wd-skeleton--type-${rowCol.type || 'text'}`, { [`wd-skeleton--animation-${props.animation}`]: props.animation }]
+}
+function getColItemStyle(rowCol: SkeletonRowColObj) {
+  const style: CSSProperties = {}
+  const styleName = ['size', 'width', 'height', 'margin', 'background', 'marginLeft', 'marginRight', 'borderRadius', 'backgroundColor']
+
+  for (const name of styleName) {
+    if (Object.prototype.hasOwnProperty.call(rowCol, name)) {
+      const px = addUnit(rowCol[name])
+
+      if (name === 'size') {
+        style.width = px
+        style.height = px
+      } else {
+        ;(style as any)[name] = px
+      }
+    }
+  }
+  return style
+}
+
+watch(
+  () => props.rowCol,
+  (rowCol) => {
+    rowCols.value = [...(Array.isArray(rowCol) && rowCol.length ? props.rowCol : themeMap[props.theme])]
+  },
+  { immediate: true }
+)
+
+const show = computed(() => props.loading == undefined || props.loading === true)
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-slide-verify/index.scss

@@ -0,0 +1,112 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 组件高度
+$slide-verify-height: var(--wot-slide-verify-height, $n-40) !default;
+// 组件宽度
+$slide-verify-width: var(--wot-slide-verify-width, 100%) !default;
+// 组件背景色
+$slide-verify-bg: var(--wot-slide-verify-bg, $filled-bottom) !default;
+// 圆角
+$slide-verify-radius: var(--wot-slide-verify-radius, $radius-large) !default;
+// 成功态track背景色
+$slide-verify-track-bg: var(--wot-slide-verify-track-bg, $success-main) !default;
+// 禁用态透明度
+$slide-verify-disabled-opacity: var(--wot-slide-verify-disabled-opacity, $opacity-disabled) !default;
+// 提示文字颜色
+$slide-verify-text-color: var(--wot-slide-verify-text-color, $text-main) !default;
+// 提示文字字号
+$slide-verify-text-font-size: var(--wot-slide-verify-text-font-size, $typography-label-size-main) !default;
+// 提示文字行高
+$slide-verify-text-line-height: var(--wot-slide-verify-text-line-height, $typography-label-line--height-size-main) !default;
+// 成功态文字颜色
+$slide-verify-success-text-color: var(--wot-slide-verify-success-text-color, $text-white) !default;
+// 滑块背景色
+$slide-verify-button-bg: var(--wot-slide-verify-button-bg, $filled-oppo) !default;
+// 滑块阴影色
+$slide-verify-button-shadow: var(--wot-slide-verify-button-shadow, $n-0 $n-2 $n-8 $opac-4_15) !default;
+// 滑块图标颜色
+$slide-verify-button-color: var(--wot-slide-verify-button-color, $icon-secondary) !default;
+// 滑块图标成功态颜色
+$slide-verify-button-success-color: var(--wot-slide-verify-button-success-color, $success-main) !default;
+// 滑块尺寸
+$slide-verify-button-size: var(--wot-slide-verify-button-size, $slide-verify-height) !default;
+// 滑块边框颜色
+$slide-verify-button-border-color: var(--wot-slide-verify-button-border-color, $border-light) !default;
+// 滑块图标尺寸
+$slide-verify-success-icon-size: var(--wot-slide-verify-success-icon-size, $n-20) !default;
+
+@include b(slide-verify) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  user-select: none;
+  width: $slide-verify-width;
+  height: $slide-verify-height;
+  background: $slide-verify-bg;
+  border-radius: $slide-verify-radius;
+
+  @include when(disabled) {
+    cursor: not-allowed;
+    opacity: $slide-verify-disabled-opacity;
+  }
+
+  @include e(text-inner) {
+    color: $slide-verify-text-color;
+    font-size: $slide-verify-text-font-size;
+    line-height: $slide-verify-text-line-height;
+    transition: color 0.3s ease;
+  }
+
+  @include e(track) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background: $slide-verify-track-bg;
+    border-radius: $slide-verify-radius;
+    overflow: hidden;
+  }
+
+  @include e(track-text) {
+    position: absolute;
+    color: $slide-verify-success-text-color;
+    left: 0;
+    height: 100%;
+    min-width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+    pointer-events: none;
+    word-break: keep-all;
+  }
+
+  @include e(button) {
+    @include pixelBorderSurround($slide-verify-button-border-color);
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: $slide-verify-button-size;
+    height: $slide-verify-button-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: $slide-verify-button-bg;
+    box-shadow: $slide-verify-button-shadow;
+    color: $slide-verify-button-color;
+    border-radius: $slide-verify-radius;
+    cursor: grab;
+  }
+
+  // 按钮图标
+  @include edeep(button-icon) {
+    font-size: $slide-verify-success-icon-size;
+    @include m(success) {
+      color: $slide-verify-button-success-color;
+    }
+  }
+}

package/components/wd-slide-verify/types.ts

@@ -0,0 +1,98 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../../common/props'
+
+export const slideVerifyProps = {
+  ...baseProps,
+  /**
+   * 容错范围（单位：px），距离终点多少距离内视为验证通过
+   * 类型: number
+   * 默认值: 10
+   */
+  tolerance: {
+    type: Number,
+    default: 10
+  },
+
+  /**
+   * 提示文字
+   * 类型: string
+   * 默认值: ''
+   */
+  text: makeStringProp(''),
+
+  /**
+   * 验证成功提示文字
+   * 类型: string
+   * 默认值: ''
+   */
+  successText: makeStringProp(''),
+
+  /**
+   * 是否禁用
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 背景颜色
+   * 类型: string
+   */
+  backgroundColor: String,
+
+  /**
+   * 激活时的背景颜色
+   * 类型: string
+   */
+  activeBackgroundColor: String,
+
+  /**
+   * 滑块图标名称
+   * 类型: string
+   * 默认值: 'double-right'
+   */
+  icon: makeStringProp('double-right'),
+
+  /**
+   * 成功图标名称
+   * 类型: string
+   * 默认值: 'check-circle-fill'
+   */
+  successIcon: makeStringProp('check-circle-fill'),
+
+  /**
+   * 图标大小（单位：px）
+   * 类型: string | number
+   * 默认值: 20
+   */
+  iconSize: numericProp,
+
+  /**
+   * 成功图标大小（单位：px）
+   * 类型: string | number
+   * 默认值: 12
+   */
+  successIconSize: numericProp
+}
+
+export type SlideVerifyProps = ExtractPropTypes<typeof slideVerifyProps>
+
+export type SlideVerifyExpose = {
+  /**
+   * 初始化尺寸信息
+   */
+  init: () => Promise<void>
+  /**
+   * 重置验证组件到初始状态
+   */
+  reset: () => void
+}
+
+export type SlideVerifyEmits = {
+  /** 验证成功事件 */
+  success: []
+  /** 验证失败事件 */
+  fail: []
+}
+
+export type SlideVerifyInstance = ComponentPublicInstance<SlideVerifyProps, SlideVerifyExpose>