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

package/components/wd-popup/index.scss

@@ -0,0 +1,89 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 弹窗背景色
+$popup-bg: var(--wot-popup-bg, $filled-oppo) !default;
+// 关闭图标颜色
+$popup-close-color: var(--wot-popup-close-color, $icon-auxiliary) !default;
+// 关闭图标尺寸
+$popup-close-size: var(--wot-popup-close-size, $n-24) !default;
+// 关闭图标外边距
+$popup-close-margin: var(--wot-popup-close-margin, $spacing-loose) !default;
+// 弹窗圆角：根据弹出位置自动适配
+$popup-radius: var(--wot-popup-radius, $radius-large) !default;
+
+@include b(popup) {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background: $popup-bg;
+
+  @include edeep(close) {
+    position: absolute;
+    top: $popup-close-margin;
+    right: $popup-close-margin;
+    color: $popup-close-color;
+    font-size: $popup-close-size;
+  }
+
+  @include mdeep(center) {
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    transform-origin: 0% 0%;
+
+    @include when(round) {
+      border-radius: $popup-radius;
+    }
+
+    &.wd-transition--zoom-in-enter,
+    &.wd-transition--zoom-in-leave-to {
+      transform: scale(0.8) translate3d(-50%, -50%, 0) !important;
+    }
+
+    @include when(deep) {
+
+      &.wd-transition--zoom-in-enter,
+      &.wd-transition--zoom-in-leave-to {
+        transform: scale(0.1) translate3d(-50%, -50%, 0) !important;
+      }
+    }
+
+  }
+
+  @include mdeep(left) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    @include when(round) {
+      border-radius: 0 $popup-radius $popup-radius 0;
+    }
+  }
+
+  @include mdeep(right) {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    @include when(round) {
+      border-radius: $popup-radius 0 0 $popup-radius;
+    }
+  }
+
+  @include mdeep(top) {
+    top: 0;
+    left: 0;
+    right: 0;
+    @include when(round) {
+      border-radius: 0 0 $popup-radius $popup-radius;
+    }
+  }
+
+  @include mdeep(bottom) {
+    right: 0;
+    bottom: 0;
+    left: 0;
+    @include when(round) {
+      border-radius: $popup-radius $popup-radius 0 0 ;
+    }
+  }
+}

package/components/wd-popup/types.ts

@@ -0,0 +1,110 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-18 11:22:03
+ * @LastEditTime: 2026-03-30 15:40:29
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-popup/types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+import type { TransitionName } from '../wd-transition/types'
+
+export type PopupType = 'center' | 'top' | 'right' | 'bottom' | 'left'
+
+export const popupProps = {
+  ...baseProps,
+  /**
+   * 动画类型，参见 wd-transition 组件的name
+   * 类型: TransitionName
+   * 可选值: 'fade' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'zoom-in'
+   */
+  transition: String as PropType<TransitionName>,
+  /**
+   * 关闭按钮
+   * 类型: boolean
+   * 默认值: false
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 弹出框的位置
+   * 类型: PopupType
+   * 可选值: 'center' | 'top' | 'right' | 'bottom' | 'left'
+   * 默认值: 'center'
+   */
+  position: makeStringProp<PopupType>('center'),
+  /**
+   * 点击遮罩是否关闭
+   * 类型：boolean
+   * 默认值：true
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 动画持续时间
+   * 类型：number | boolean
+   * 默认值：300
+   */
+  duration: {
+    type: [Number, Boolean],
+    default: 300
+  },
+  /**
+   * 是否显示遮罩
+   * 类型：boolean
+   * 默认值：true
+   */
+  modal: makeBooleanProp(true),
+  /**
+   * 设置层级
+   * 类型：number
+   * 默认值：10
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 是否当关闭时将弹出层隐藏（display: none)
+   * 类型：boolean
+   * 默认值：true
+   */
+  hideWhenClose: makeBooleanProp(true),
+  /**
+   * 遮罩样式
+   * 类型：string
+   * 默认值：''
+   */
+  modalStyle: makeStringProp(''),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 类型：boolean
+   * 默认值：false
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 弹出层是否显示
+   * 类型: boolean
+   * 默认值: false
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   * 类型：boolean
+   * 默认值：true
+   */
+  lazyRender: makeBooleanProp(true),
+  /**
+   * 是否锁定滚动
+   * 类型：boolean
+   * 默认值：true
+   */
+  lockScroll: makeBooleanProp(true),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   * 类型：boolean
+   * 默认值：false
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 是否开启圆角,开启后根据弹出位置自动适配（底部弹出→上圆角，顶部弹出→下圆角，居中→四圆角）
+   */
+  round: makeBooleanProp(false)
+}

package/components/wd-popup/wd-popup.vue

@@ -0,0 +1,174 @@
+<template>
+  <wd-root-portal v-if="rootPortal">
+    <view class="wd-popup-wrapper">
+      <wd-overlay
+        v-if="modal"
+        :show="modelValue"
+        :z-index="zIndex"
+        :lock-scroll="lockScroll"
+        :duration="duration"
+        :custom-style="modalStyle"
+        @click="handleClickModal"
+        @touchmove="noop"
+      />
+      <wd-transition
+        :lazy-render="lazyRender"
+        :custom-class="rootClass"
+        :custom-style="style"
+        :duration="duration"
+        :show="modelValue"
+        :name="transitionName"
+        :destroy="hideWhenClose"
+        @before-enter="emit('before-enter')"
+        @enter="emit('enter')"
+        @after-enter="emit('after-enter')"
+        @before-leave="emit('before-leave')"
+        @leave="emit('leave')"
+        @after-leave="emit('after-leave')"
+      >
+        <slot />
+        <wd-icon v-if="closable" custom-class="wd-popup__close" name="close" @click="close" />
+      </wd-transition>
+    </view>
+  </wd-root-portal>
+
+  <!-- 非传送模式 -->
+  <view v-else class="wd-popup-wrapper">
+    <wd-overlay
+      v-if="modal"
+      :show="modelValue"
+      :z-index="zIndex"
+      :lock-scroll="lockScroll"
+      :duration="duration"
+      :custom-style="modalStyle"
+      @click="handleClickModal"
+      @touchmove="noop"
+    />
+    <wd-transition
+      :lazy-render="lazyRender"
+      :custom-class="rootClass"
+      :custom-style="style"
+      :duration="duration"
+      :show="modelValue"
+      :name="transitionName"
+      :destroy="hideWhenClose"
+      @before-enter="emit('before-enter')"
+      @enter="emit('enter')"
+      @after-enter="emit('after-enter')"
+      @before-leave="emit('before-leave')"
+      @leave="emit('leave')"
+      @after-leave="emit('after-leave')"
+    >
+      <slot />
+      <wd-icon v-if="closable" custom-class="wd-popup__close" name="close" @click="close" />
+    </wd-transition>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-popup',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import wdRootPortal from '../wd-root-portal/wd-root-portal.vue'
+import { popupProps } from './types'
+import type { TransitionName } from '../wd-transition/types'
+import { getSystemInfo } from '../../common/util'
+
+const props = defineProps(popupProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'before-enter',
+  'enter',
+  'before-leave',
+  'leave',
+  'after-leave',
+  'after-enter',
+  'click-modal',
+  'close'
+])
+
+/**
+ * 弹出位置
+ */
+const transitionName = computed<TransitionName | TransitionName[]>(() => {
+  if (props.transition) {
+    return props.transition
+  }
+  if (props.position === 'center') {
+    return ['zoom-in', 'fade']
+  }
+  if (props.position === 'left') {
+    return 'slide-left'
+  }
+  if (props.position === 'right') {
+    return 'slide-right'
+  }
+  if (props.position === 'bottom') {
+    return 'slide-up'
+  }
+  if (props.position === 'top') {
+    return 'slide-down'
+  }
+  return 'slide-up'
+})
+
+const safeBottom = ref<number>(0)
+
+const style = computed(() => {
+  return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `wd-popup wd-popup--${props.position} ${!props.transition && props.position === 'center' ? 'is-deep' : ''} ${
+    props.round ? 'is-round' : ''
+  } ${props.customClass || ''}`
+})
+
+onBeforeMount(() => {
+  if (props.safeAreaInsetBottom) {
+    const { safeArea, screenHeight, safeAreaInsets } = getSystemInfo()
+
+    if (safeArea) {
+      // #ifdef MP-WEIXIN
+      safeBottom.value = screenHeight - (safeArea!.bottom || 0)
+      // #endif
+      // #ifndef MP-WEIXIN
+      safeBottom.value = safeAreaInsets ? safeAreaInsets.bottom : 0
+      // #endif
+    } else {
+      safeBottom.value = 0
+    }
+  }
+})
+
+function handleClickModal() {
+  emit('click-modal')
+  if (props.closeOnClickModal) {
+    close()
+  }
+}
+
+function close() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+function noop() {}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-progress/index.scss

@@ -0,0 +1,155 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 进度条底色
+$progress-bg: var(--wot-progress-bg, $filled-content) !default;
+// danger 进度色
+$progress-danger-color: var(--wot-progress-danger-color, $danger-main) !default;
+// success 进度色
+$progress-success-color: var(--wot-progress-success-color, $success-main) !default;
+// warning 进度色
+$progress-warning-color: var(--wot-progress-warning-color, $warning-main) !default;
+// 默认进度色
+$progress-color: var(--wot-progress-color, $primary-6) !default;
+// 外部文案模式进度条高度
+$progress-bar-height: var(--wot-progress-bar-height, $n-8) !default;
+// 内部文案模式组件高度
+$progress-height: var(--wot-progress-height, $n-18) !default;
+// 外部文案颜色
+$progress-label-color: var(--wot-progress-label-color, $text-main) !default;
+// 外部文案宽度
+$progress-label-width: var(--wot-progress-label-width, $n-34) !default;
+// 外部文案左侧间距
+$progress-label-margin-left: var(--wot-progress-label-margin-left, $spacing-tight) !default;
+// 内部文案颜色
+$progress-inner-label-color: var(--wot-progress-inner-label-color, $text-white) !default;
+// 内部 zero 态背景色
+$progress-inner-zero-bg: var(--wot-progress-inner-zero-bg, $primary-2) !default;
+// 内部 zero 态文字颜色
+$progress-inner-zero-color: var(--wot-progress-inner-zero-color, $text-secondary) !default;
+// 内部文案内边距
+$progress-inner-padding: var(--wot-progress-inner-padding, $padding-zero $padding-tight) !default;
+// 文案字号
+$progress-label-font-size: var(--wot-progress-label-font-size, $typography-label-size-large) !default;
+// 文案行高
+$progress-label-line-height: var(--wot-progress-label-line-height, $typography-label-line-height-size-large) !default;
+// 图标字号
+$progress-icon-size: var(--wot-progress-icon-size, $n-18) !default;
+// 进度条圆角
+$progress-radius: var(--wot-progress-radius, $radius-full) !default;
+
+@include b(progress) {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  height: $progress-height;
+
+  @include e(outer) {
+    display: block;
+    position: relative;
+    flex: 1;
+    background: $progress-bg;
+    overflow: hidden;
+    height: $progress-bar-height;
+    border-radius: $progress-radius;
+  }
+
+  @include e(inner) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: inherit;
+    background: $progress-color;
+    transition-property: width;
+    transition-timing-function: linear;
+    font-size: $progress-icon-size;
+    display: flex;
+    align-items: center;
+    min-width: max-content;
+  }
+
+  @include edeep(label) {
+    color: $progress-label-color;
+    font-size: $progress-label-font-size;
+    line-height: $progress-label-line-height;
+    width: $progress-label-width;
+    margin-left: $progress-label-margin-left;
+
+    @include when(hide-text){
+      width: auto;
+    }
+  }
+
+  @include edeep(icon) {
+    font-size: $progress-icon-size;
+  }
+
+  @include m(danger) {
+    @include me(inner) {
+      background: $progress-danger-color;
+    }
+    @include me(icon) {
+      color: $progress-danger-color;
+    }
+  }
+
+  @include m(success) {
+    @include me(inner) {
+      background: $progress-success-color;
+    }
+    @include me(icon) {
+      color: $progress-success-color;
+    }
+  }
+
+  @include m(warning) {
+    @include me(inner) {
+      background: $progress-warning-color;
+    }
+    @include me(icon) {
+      color: $progress-warning-color;
+    }
+  }
+
+  @include m(inner) {
+    @include me(outer) {
+      height: 100%;
+      border-radius: $progress-radius;
+    }
+
+    @include me(label) {
+      width: auto;
+      margin-left: 0;
+      color: $progress-inner-label-color;
+      padding: $progress-inner-padding;
+      white-space: nowrap;
+
+      @include when(align-left) {
+        margin-right: auto;
+      }
+      @include when(align-center) {
+        margin: 0 auto;
+      }
+      @include when(align-right) {
+        margin-left: auto;
+      }
+    }
+
+    @include me(icon) {
+      color: $progress-inner-label-color !important;
+    }
+
+    @include when(zero) {
+      @include me(inner) {
+        background: $progress-inner-zero-bg;
+      }
+      @include me(label) {
+        color: $progress-inner-zero-color !important;
+      }
+      @include me(icon) {
+        color: $progress-inner-zero-color !important;
+      }
+    }
+  }
+}

package/components/wd-progress/types.ts

@@ -0,0 +1,94 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2026-03-04 15:53:53
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-progress/types.ts
+ * 记得注释
+ */
+import type { PropType, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../../common/props'
+
+/**
+ * 进度条状态
+ * 可选值: 'success' | 'danger' | 'warning'
+ */
+export type ProgressStatus = 'success' | 'danger' | 'warning'
+
+/**
+ * 进度条颜色对象
+ */
+export type ProgressColor = {
+  /**
+   * 颜色
+   * 类型: string
+   */
+  color: string
+  /**
+   * 百分比
+   * 类型: number
+   */
+  percentage: number
+}
+
+/**
+ * 百分比显示位置和对齐方式配置
+ */
+export type PercentPosition = {
+  /**
+   * 文本对齐方式
+   * 可选值: 'left' | 'center' | 'right'
+   */
+  align?: 'left' | 'center' | 'right'
+  /**
+   * 文本在进度条内部还是外部
+   * 可选值: 'inner' | 'outer'
+   */
+  type?: 'inner' | 'outer'
+}
+
+export const progressProps = {
+  ...baseProps,
+  /**
+   * 进度条颜色，如果为 string 类型，那么整个进度条都为该颜色；如果为 array 类型，那么进度条随进度变化而改变状态色。
+   * 类型: string | string[] | ProgressColor[]
+   */
+  color: {
+    type: [String, Array] as PropType<string | string[] | ProgressColor[]>
+  },
+  /**
+   * 进度增加1%所需毫秒数
+   * 类型: number
+   * 默认值: 30
+   */
+  duration: makeNumberProp(30),
+  /**
+   * 进度数值，最大值100
+   * 类型: number
+   * 默认值: 0
+   */
+  percentage: makeNumberProp(0),
+  /**
+   * 是否隐藏进度条上的文字
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideText: makeBooleanProp(false),
+  /**
+   * 进度条状态。
+   * 可选值: 'danger' | 'success' | 'warning'
+   */
+  status: String as PropType<ProgressStatus>,
+  /**
+   * 百分比位置配置信息。
+   * 类型: PercentPosition
+   * 默认值: { align: 'right', type: 'outer' }
+   */
+  percentPosition: {
+    type: Object as PropType<PercentPosition>,
+    default: () => ({ align: 'right', type: 'outer' })
+  }
+}
+
+export type ProgressProps = ExtractPropTypes<typeof progressProps>