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

package/components/wd-loading/index.scss

@@ -0,0 +1,353 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 主色模式颜色
+$loading-color-main: var(--wot-loading-color-main, $primary-6) !default;
+// 常规模式颜色
+$loading-color-normal: var(--wot-loading-color-normal, $icon-secondary) !default;
+// 白色模式颜色
+$loading-color-white: var(--wot-loading-color-white, $icon-white) !default;
+// 文本颜色
+$loading-color-text: var(--wot-loading-color-text, $text-main) !default;
+// 组件基准尺寸
+$loading-size: var(--wot-loading-size, $n-28) !default;
+// 容器宽度
+$loading-size-width: var(--wot-loading-size-width, 1em) !default;
+// 容器高度
+$loading-size-height: var(--wot-loading-size-height, 1em) !default;
+// 圆形加载器描边宽度
+$loading-spinner-circle-stroke-width: var(--wot-loading-spinner-circle-stroke-width, 15%) !default;
+// 圆形加载器圆角
+$loading-spinner-circle-radius: var(--wot-loading-spinner-circle-radius, $radius-full) !default;
+// 旋转动画时长
+$loading-spinner-animation-duration: var(--wot-loading-spinner-animation-duration, 0.8s) !default;
+// 条状点宽度
+$loading-spinner-dot-width: var(--wot-loading-spinner-dot-width, 10%) !default;
+// 条状点高度
+$loading-spinner-dot-height: var(--wot-loading-spinner-dot-height, 25%) !default;
+// 条状点圆角
+$loading-spinner-dot-radius: var(--wot-loading-spinner-dot-radius, $radius-full) !default;
+// 点状加载器单点尺寸
+$loading-spinner-dots-dot-size: var(--wot-loading-spinner-dots-dot-size, 20%) !default;
+// 点状加载器单点圆角
+$loading-spinner-dots-dot-radius: var(--wot-loading-spinner-dots-dot-radius, $radius-full) !default;
+// 波形加载器间距
+$loading-wave-gap: var(--wot-loading-wave-gap, 6.25%) !default;
+// 波形加载器单柱宽度
+$loading-wave-bar-width: var(--wot-loading-wave-bar-width, 12.5%) !default;
+// 波形加载器单柱高度
+$loading-wave-bar-height: var(--wot-loading-wave-bar-height, 83.333333%) !default;
+// 波形加载器单柱圆角
+$loading-wave-bar-radius: var(--wot-loading-wave-bar-radius, $radius-full) !default;
+// 波形加载器动画时长
+$loading-wave-animation-duration: var(--wot-loading-wave-animation-duration, 834ms) !default;
+// 加载器内边距
+$loading-spinner-padding: var(--wot-loading-spinner-padding, $padding-ultra-tight) !default;
+// 文本与加载器间距
+$loading-text-spacing: var(--wot-loading-text-spacing, $spacing-extra-tight) !default;
+// 文本字号
+$loading-text-font-size: var(--wot-loading-text-font-size, $typography-body-size-main) !default;
+// 文本行高
+$loading-text-line-height: var(--wot-loading-text-line-height, $typography-body-line-height-size-main) !default;
+
+
+@mixin generate($n, $i: 1) {
+  @if $i <=$n {
+    &:nth-of-type(#{$i}) {
+      transform: rotate(90deg - $i * 30deg);
+      opacity: 1 - calc(0.75 / 12) * ($i - 1);
+    }
+
+    @include generate($n, $i + 1);
+  }
+}
+
+@mixin dot-delay($n, $duration) {
+  @for $i from 1 through $n {
+    &:nth-of-type(#{$i}) {
+      animation-delay: calc(#{$duration} * #{($i - 1)} / 3);
+      animation-duration: $duration;
+    }
+  }
+}
+
+@include b(loading) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: $loading-color-main;
+  font-size: $loading-size;
+
+  @include m(horizontal) {
+    flex-direction: row;
+
+    @include me(text){
+      margin-left: $loading-text-spacing;
+      
+    }
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+
+    @include me(text){
+      margin-top: $loading-text-spacing;
+    }
+  }
+
+  @include e(spinner) {
+    flex: none;
+    position: relative;
+    font-size: inherit;
+    width: $loading-size-width;
+    height: $loading-size-height;
+    animation: wd-rotate $loading-spinner-animation-duration linear infinite;
+    padding: $loading-spinner-padding;
+    box-sizing: border-box;
+
+    @include m(circular) {
+      @include me(spinner-wraper) {
+        border-radius: $loading-spinner-circle-radius;
+        border: none;
+        mask: radial-gradient(closest-side,
+            transparent calc(100% - $loading-spinner-circle-stroke-width),
+            $base-white calc(100% - $loading-spinner-circle-stroke-width),
+            $base-white 100%);
+        background: conic-gradient(from 0deg at 50% 50%, $base-transparent 0deg, $base-transparent 90deg, currentColor 330deg, currentColor 360deg);
+      }
+    }
+
+    @include m(spinner) {
+      animation-timing-function: steps(12);
+    }
+
+    @include m(dots) {
+      animation: none;
+
+      @include me(spinner-wraper) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      @include me(spinner-dot) {
+        position: static;
+        width: $loading-spinner-dots-dot-size;
+        height: $loading-spinner-dots-dot-size;
+        border-radius: $loading-spinner-dots-dot-radius;
+        background-color: currentColor;
+        animation-name: wd-dotting;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+        animation-fill-mode: both;
+
+        &::before {
+          content: none;
+        }
+
+        @include dot-delay(3, $loading-spinner-animation-duration);
+      }
+    }
+
+    @include m(wave) {
+      animation: none;
+
+      @include me(spinner-wraper) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
+      }
+
+      @include me(spinner-wave-bar) {
+        display: flex;
+        align-items: center;
+        animation-duration: $loading-wave-animation-duration;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+
+        &:nth-of-type(n + 2) {
+          margin-left: $loading-wave-gap;
+        }
+      }
+    }
+  }
+
+  @include e(spinner-dot) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    @include generate(12);
+
+    &::before {
+      display: block;
+      width: $loading-spinner-dot-width;
+      height: $loading-spinner-dot-height;
+      margin: 0 auto;
+      background-color: currentColor;
+      border-radius: $loading-spinner-dot-radius;
+      content: ' ';
+    }
+  }
+
+  @include e(spinner-wraper) {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(spinner-wave-bar) {
+    flex: none;
+    width: $loading-wave-bar-width;
+    height: $loading-wave-bar-height;
+
+    &:nth-of-type(1) {
+      .wd-loading__spinner-wave-bar-inner {
+        animation-name: wd-wave-bar-1;
+      }
+    }
+
+    &:nth-of-type(2) {
+      .wd-loading__spinner-wave-bar-inner {
+        animation-name: wd-wave-bar-2;
+      }
+    }
+
+    &:nth-of-type(3) {
+      .wd-loading__spinner-wave-bar-inner {
+        animation-name: wd-wave-bar-3;
+      }
+    }
+
+    &:nth-of-type(4) {
+      .wd-loading__spinner-wave-bar-inner {
+        animation-name: wd-wave-bar-4;
+      }
+    }
+  }
+
+  @include e(spinner-wave-bar-inner) {
+    width: 100%;
+    height: 100%;
+    border-radius: $loading-wave-bar-radius;
+    background-color: currentColor;
+    animation-duration: $loading-wave-animation-duration;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    will-change: height;
+  }
+
+  @include e(text) {
+    font-size: $loading-text-font-size;
+    line-height: $loading-text-line-height;
+    color: currentColor;
+  }
+}
+
+@keyframes wd-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes wd-dotting {
+  0% {
+    opacity: 0.15;
+  }
+
+  1% {
+    opacity: 0.8;
+  }
+
+  33% {
+    opacity: 0.8;
+  }
+
+  34% {
+    opacity: 0.15;
+  }
+
+  100% {
+    opacity: 0.15;
+  }
+}
+
+@keyframes wd-wave-bar-1 {
+  0%,100% {
+    height: 20%;
+  }
+
+  25.779376%,
+  87.889688% {
+    height: 40%;
+  }
+
+  37.889688%,
+  75.779376% {
+    height: 70%;
+  }
+
+  50% {
+    height: 100%;
+  }
+}
+
+@keyframes wd-wave-bar-2 {
+  0%,100% {
+    height: 40%;
+  }
+
+  25.779376%,
+  87.889688%,
+  50% {
+    height: 70%;
+  }
+
+  37.889688%,
+  75.779376% {
+    height: 100%;
+  }
+}
+
+@keyframes wd-wave-bar-3 {
+  0%,100%,
+  37.889688%,
+  75.779376% {
+    height: 70%;
+  }
+
+  25.779376%, 
+  87.889688% {
+    height: 100%;
+  }
+
+  50% {
+    height: 40%;
+  }
+}
+
+@keyframes wd-wave-bar-4 {
+  0%,100%{
+    height: 100%;
+  }
+
+  25.779376%,
+  87.889688% {
+    height: 70%;
+  }
+
+  37.889688%,
+  75.779376% {
+    height: 40%;
+  }
+
+  50% {
+    height: 20%;
+  }
+}

package/components/wd-loading/types.ts

@@ -0,0 +1,61 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2026-01-23 14:59:32
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-loading/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeStringProp, numericProp } from '../../common/props'
+
+export type LoadingType = 'circular' | 'spinner' | 'dots' | 'wave' // 提示信息加载状态类型
+
+export type LoadingDirection = 'horizontal' | 'vertical' // 加载指示器方向，可选值：'horizontal' | 'vertical'，默认值：'vertical'
+
+export const loadingProps = {
+  ...baseProps,
+  /**
+   * 自定义加载指示器样式类
+   * 类型: string
+   */
+  customSpinnerClass: makeStringProp(''),
+  /**
+   * 加载指示器类型
+   * 类型: LoadingType
+   * 可选值: 'circular' | 'spinner' | 'dots' | 'wave'
+   * 默认值: 'circular'
+   */
+  type: makeStringProp<LoadingType>('circular'),
+  /**
+   * 设置加载指示器颜色
+   * 类型: string
+   */
+  color: String,
+  /**
+   * 设置加载指示器大小
+   * 类型: string | number
+   */
+  size: numericProp,
+  /**
+   * 加载指示器方向
+   * 类型: LoadingDirection
+   * 可选值: 'horizontal' | 'vertical'
+   * 默认值: 'vertical'
+   */
+  direction: makeStringProp<LoadingDirection>('vertical'),
+  /**
+   * 加载指示器文字
+   * 类型: string
+   */
+  text: String,
+  /**
+   * 是否继承父元素颜色
+   * 类型: boolean
+   * 默认值: false
+   */
+  inheritColor: Boolean
+}
+
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>

package/components/wd-loading/wd-loading.vue

@@ -0,0 +1,77 @@
+<template>
+  <view :class="`wd-loading wd-loading--${direction} ${customClass}`" :style="rootStyle">
+    <view :class="`wd-loading__spinner wd-loading__spinner--${type} ${customSpinnerClass}`" :style="spinnerStyle">
+      <template v-if="type === 'circular'">
+        <view class="wd-loading__spinner-wraper"></view>
+      </template>
+      <template v-if="type === 'spinner'">
+        <view class="wd-loading__spinner-wraper">
+          <view class="wd-loading__spinner-dot" v-for="i in dots" :key="i"></view>
+        </view>
+      </template>
+      <template v-else-if="type === 'dots'">
+        <view class="wd-loading__spinner-wraper">
+          <view class="wd-loading__spinner-dot" v-for="i in 3" :key="i"></view>
+        </view>
+      </template>
+      <template v-else-if="type === 'wave'">
+        <view class="wd-loading__spinner-wraper">
+          <view class="wd-loading__spinner-wave-bar" v-for="i in 4" :key="i">
+            <view class="wd-loading__spinner-wave-bar-inner"></view>
+          </view>
+        </view>
+      </template>
+    </view>
+    <view class="wd-loading__text" v-if="$slots.default || text">
+      <slot>{{ text }}</slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-loading',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+
+import { objToStyle, addUnit, isDef } from '../../common/util'
+import { loadingProps } from './types'
+
+const props = defineProps(loadingProps)
+
+// 长度为 12 的数组
+const dots = Array.from({ length: 12 }, (_, i) => i)
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.color)) {
+    style.color = props.color
+  }
+  if (props.inheritColor) {
+    style.color = 'inherit'
+  }
+  return `${objToStyle(style)} ${props.customStyle}`
+})
+
+const spinnerStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.size)) {
+    style.height = addUnit(props.size)
+    style.width = addUnit(props.size)
+  }
+  return objToStyle(style)
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-loadmore/index.scss

@@ -0,0 +1,62 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 组件最小高度
+$loadmore-height: var(--wot-loadmore-height, $n-48) !default;
+// 组件内边距
+$loadmore-padding: var(--wot-loadmore-padding, $spacing-main $spacing-loose) !default;
+// 默认文字颜色
+$loadmore-color: var(--wot-loadmore-color, $text-secondary) !default;
+// 默认文字字号
+$loadmore-font-size: var(--wot-loadmore-font-size, $typography-body-size-main) !default;
+// 默认文字行高
+$loadmore-line-height: var(--wot-loadmore-line-height, $typography-body-line-height-size-main) !default;
+// 加载图标尺寸
+$loadmore-loading-size: var(--wot-loadmore-loading-size, $n-28) !default;
+// 加载图标与文字间距
+$loadmore-loading-spacing: var(--wot-loadmore-loading-spacing, $spacing-tight) !default;
+// 刷新态文字颜色
+$loadmore-refresh-color: var(--wot-loadmore-refresh-color, $primary-6) !default;
+// 刷新图标字号
+$loadmore-refresh-font-size: var(--wot-loadmore-refresh-font-size, $typography-body-size-extra-large) !default;
+// 刷新图标行高
+$loadmore-refresh-line-height: var(--wot-loadmore-refresh-line-height, $typography-body-line-height-size-extra-large) !default;
+// 重试文案与图标间距
+$loadmore-retry-spacing: var(--wot-loadmore-retry-spacing, 0 $spacing-extra-tight) !default;
+
+@include b(loadmore) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: $loadmore-height;
+  padding: $loadmore-padding;
+  color: $loadmore-color;
+
+  @include edeep(divider) {
+    width: 100%;
+    margin: $spacing-zero;
+  }
+
+  @include edeep(loading) {
+    margin-right: $loadmore-loading-spacing;
+    font-size: $loadmore-loading-size;
+  }
+
+  @include e(text,refresh-text) {
+    font-size: $loadmore-font-size;
+    line-height: $loadmore-line-height;
+  }
+
+  @include e(refresh-text) {
+    margin: $loadmore-retry-spacing;
+    color: $loadmore-refresh-color;
+  }
+
+  @include edeep(refresh) {
+    color: $loadmore-refresh-color;
+    font-size: $loadmore-refresh-font-size;
+    line-height: $loadmore-refresh-line-height;
+  }
+}

package/components/wd-loadmore/types.ts

@@ -0,0 +1,42 @@
+import type { PropType } from 'vue'
+import { baseProps } from '../../common/props'
+import type { LoadingProps } from '../wd-loading/types'
+
+/**
+ * loadmore 组件的加载状态
+ * - loading: 加载中
+ * - error: 加载失败
+ * - finished: 加载完成
+ */
+export type LoadMoreState = 'loading' | 'error' | 'finished'
+
+export const loadmoreProps = {
+  ...baseProps,
+  /**
+   * 加载状态
+   * 可选值: 'loading' | 'error' | 'finished'
+   * 默认值: undefined
+   */
+  state: String as PropType<LoadMoreState>,
+  /**
+   * 加载中的提示文案
+   * 默认值: 国际化文案
+   */
+  loadingText: String,
+  /**
+   * 加载完成的提示文案
+   * 默认值: 国际化文案
+   */
+  finishedText: String,
+  /**
+   * 加载失败的提示文案
+   * 默认值: 国际化文案
+   */
+  errorText: String,
+  /**
+   * Loading 组件配置属性
+   * 类型: Partial<LoadingProps>
+   * 默认值: {}
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>
+}

package/components/wd-loadmore/wd-loadmore.vue

@@ -0,0 +1,68 @@
+<template>
+  <view :class="['wd-loadmore', customClass]" :style="customStyle" @click="reload">
+    <slot v-if="state === 'finished'" name="finished">
+      <wd-divider custom-class="wd-loadmore__divider">{{ finishedText || translate('finished') }}</wd-divider>
+    </slot>
+    <slot v-else-if="state === 'error'" name="error">
+      <text class="wd-loadmore__text">{{ errorText || translate('error') }}</text>
+      <text class="wd-loadmore__refresh-text">{{ translate('retry') }}</text>
+      <wd-icon name="refresh" custom-class="wd-loadmore__refresh" />
+    </slot>
+    <slot v-else-if="state === 'loading'" name="loading">
+      <wd-loading v-bind="customLoadingProps" />
+      <text class="wd-loadmore__text">{{ loadingText || translate('loading') }}</text>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-loadmore',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdDivider from '../wd-divider/wd-divider.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, ref } from 'vue'
+import { useTranslate } from '../../composables/useTranslate'
+import { loadmoreProps, type LoadMoreState } from './types'
+import type { LoadingProps } from '../wd-loading/types'
+import { isDef, isUndefined, omitBy } from '../../common/util'
+
+// 计算 Loading 组件的属性 - 合并用户传入的属性和组件需要的自定义样式
+const customLoadingProps = computed(() => {
+  const loadingProps: Partial<LoadingProps> = isDef(props.loadingProps) ? omitBy(props.loadingProps, isUndefined) : {}
+  loadingProps.customClass = `wd-loadmore__loading ${loadingProps.customClass || ''}`
+  return loadingProps
+})
+
+const props = defineProps(loadmoreProps)
+const emit = defineEmits(['reload'])
+
+const { translate } = useTranslate('loadmore')
+
+/** 当前加载状态 */
+const currentState = ref<LoadMoreState | null>(null)
+
+/**
+ * 处理重新加载操作 - 当加载失败时，点击可触发 reload 事件
+ */
+function reload() {
+  if (props.state !== 'error') return
+  currentState.value = 'loading'
+  emit('reload')
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>