@tplc/wot 1.0.7 → 1.0.9

package/components/wd-popup/index.scss

@@ -1,112 +1,84 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
-@import '../wd-overlay/index';
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
 
 .wot-theme-dark {
-  @include b(popup) {
-    background: $-dark-background2;
+  @include b(popup-wrapper) {
+    :deep() {
+      .wd-popup {
+        background: $-dark-background2;
+      }
+
+      .wd-popup__close {
+        color: $-dark-color;
+      }
+    }
+  }
+}
 
-    @include e(close) {
-      color: $-dark-color;
+@include b(popup-wrapper) {
+  :deep() {
+    .wd-popup {
+      position: fixed;
+      max-height: 100%;
+      overflow-y: auto;
+      background: #fff;
     }
   }
 }
 
-@include b(popup) {
-  position: fixed;
-  max-height: 100%;
-  overflow-y: auto;
-  background: #fff;
 
+@include b(popup) {
   @include edeep(close) {
     position: absolute;
     top: 10px;
     right: 10px;
-    font-size: $-popup-close-size;
     color: $-popup-close-color;
-    // transform: rotate(-45deg);
+    font-size: $-popup-close-size;
+    transform: rotate(-45deg);
   }
 
-  @include m(center) {
-    top: 50%;
+  @include mdeep(center) {
     left: 50%;
+    top: 50%;
     transform: translate3d(-50%, -50%, 0);
+    transform-origin: 0% 0%;
+
+    &.wd-zoom-in-enter,
+    &.wd-zoom-in-leave-to {
+      transform: scale(0.8) translate3d(-50%, -50%, 0) !important;
+    }
+
+    @include when(deep) {
+
+      &.wd-zoom-in-enter,
+      &.wd-zoom-in-leave-to {
+        transform: scale(0.1) translate3d(-50%, -50%, 0) !important;
+      }
+    }
+
   }
 
-  @include m(left) {
+  @include mdeep(left) {
     top: 0;
     bottom: 0;
     left: 0;
   }
 
-  @include m(right) {
+  @include mdeep(right) {
     top: 0;
     right: 0;
     bottom: 0;
   }
 
-  @include m(top) {
+  @include mdeep(top) {
     top: 0;
-    right: 0;
     left: 0;
+    right: 0;
   }
 
-  @include m(bottom) {
+  @include mdeep(bottom) {
     right: 0;
     bottom: 0;
     left: 0;
   }
-}
-
-.wd-center-enter-active,
-.wd-center-leave-active {
-  transition-property: opacity;
-}
-
-.wd-center-enter,
-.wd-center-leave-to {
-  opacity: 0;
-}
-
-.wd-top-enter-active,
-.wd-top-leave-active,
-.wd-bottom-enter-active,
-.wd-bottom-leave-active,
-.wd-left-enter-active,
-.wd-left-leave-active,
-.wd-right-enter-active,
-.wd-right-enter-active {
-  transition-property: transform;
-}
-
-.wd-top-enter,
-.wd-top-leave-to {
-  transform: translate3d(0, -100%, 0);
-}
-
-.wd-bottom-enter,
-.wd-bottom-leave-to {
-  transform: translate3d(0, 100%, 0);
-}
-
-.wd-left-enter,
-.wd-left-leave-to {
-  transform: translate3d(-100%, 0, 0);
-}
-
-.wd-right-enter,
-.wd-right-leave-to {
-  transform: translate3d(100%, 0, 0);
-}
-
-.wd-zoom-in-enter-active,
-.wd-zoom-in-leave-active {
-  transition-property: opacity, transform;
-  transform-origin: center center;
-}
-
-.wd-zoom-in-enter,
-.wd-zoom-in-leave-to {
-  opacity: 0;
-  transform: translate3d(-50%, -50%, 0) scale(0.7);
-}
+}

package/components/wd-popup/types.ts

@@ -1,56 +1,82 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-18 11:22:03
- * @LastEditTime: 2024-03-18 15:29:43
+ * @LastEditTime: 2025-07-06 21:00:04
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-popup\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/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,
-  transition: String,
+  /**
+   * 动画类型，参见 wd-transition 组件的name
+   * 类型：string
+   * 可选值：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),
   /**
    * 弹出框的位置
+   * 类型：string
+   * 默认值：center
+   * 可选值：center / top / right / bottom / left
    */
   position: makeStringProp<PopupType>('center'),
   /**
    * 点击遮罩是否关闭
+   * 类型：boolean
+   * 默认值：true
    */
   closeOnClickModal: makeBooleanProp(true),
   /**
    * 动画持续时间
+   * 类型：number | boolean
+   * 默认值：300
    */
   duration: {
     type: [Number, Boolean],
-    default: 300,
+    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),
   /**
@@ -59,10 +85,20 @@ export const popupProps = {
   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)
 }

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

@@ -1,22 +1,67 @@
 <template>
-  <wd-overlay
-    v-if="modal"
-    :show="modelValue"
-    :z-index="zIndex"
-    :lock-scroll="lockScroll"
-    :duration="duration"
-    :custom-style="modalStyle"
-    @click="handleClickModal"
-    @touchmove="noop"
-  />
-  <view
-    v-if="!lazyRender || inited"
-    :class="rootClass"
-    :style="style"
-    @transitionend="onTransitionEnd"
-  >
-    <slot />
-    <wd-icon v-if="closable" custom-class="wd-popup__close" name="close-circle" @click="close" />
+  <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="add" @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="add" @click="close" />
+    </wd-transition>
   </view>
 </template>
 
@@ -26,15 +71,20 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, watch } from 'vue'
-import { isObj, requestAnimationFrame } from '../common/util'
+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([
@@ -46,58 +96,47 @@ const emit = defineEmits([
   'after-leave',
   'after-enter',
   'click-modal',
-  'close',
+  'close'
 ])
 
-const getClassNames = (name?: string) => {
-  if (!name) {
-    return {
-      enter: 'enter-class enter-active-class',
-      'enter-to': 'enter-to-class enter-active-class',
-      leave: 'leave-class leave-active-class',
-      'leave-to': 'leave-to-class leave-active-class',
-    }
+/**
+ * 弹出位置
+ */
+const transitionName = computed<TransitionName | TransitionName[]>(() => {
+  if (props.transition) {
+    return props.transition
   }
-
-  return {
-    enter: `wd-${name}-enter wd-${name}-enter-active`,
-    'enter-to': `wd-${name}-enter-to wd-${name}-enter-active`,
-    leave: `wd-${name}-leave wd-${name}-leave-active`,
-    'leave-to': `wd-${name}-leave-to wd-${name}-leave-active`,
+  if (props.position === 'center') {
+    return ['zoom-in', 'fade']
   }
-}
-
-// 初始化是否完成
-const inited = ref<boolean>(false)
-// 是否显示
-const display = ref<boolean>(false)
-// 当前动画状态
-const status = ref<string>('')
-// 动画是否结束
-const transitionEnded = ref<boolean>(false)
-// 动画持续时间
-const currentDuration = ref<number>(300)
-// 类名
-const classes = ref<string>('')
+  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 name = ref<string>('') // 动画名
-
 const style = computed(() => {
-  return `z-index: ${props.zIndex}; padding-bottom: ${safeBottom.value}px; -webkit-transition-duration: ${
-    currentDuration.value
-  }ms; transition-duration: ${currentDuration.value}ms; ${display.value || !props.hideWhenClose ? '' : 'display: none;'} ${props.customStyle}`
+  return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}`
 })
 
 const rootClass = computed(() => {
-  return `wd-popup wd-popup--${props.position} ${props.customClass || ''} ${classes.value || ''}`
+  return `wd-popup wd-popup--${props.position} ${!props.transition && props.position === 'center' ? 'is-deep' : ''} ${props.customClass || ''}`
 })
 
 onBeforeMount(() => {
-  observerTransition()
   if (props.safeAreaInsetBottom) {
-    const { safeArea, screenHeight, safeAreaInsets } = uni.getWindowInfo()
+    const { safeArea, screenHeight, safeAreaInsets } = getSystemInfo()
 
     if (safeArea) {
       // #ifdef MP-WEIXIN
@@ -110,105 +149,8 @@ onBeforeMount(() => {
       safeBottom.value = 0
     }
   }
-  if (props.modelValue) {
-    enter()
-  }
 })
 
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    observermodelValue(newVal)
-  },
-  { deep: true, immediate: true },
-)
-
-watch(
-  [() => props.position, () => props.transition],
-  () => {
-    observerTransition()
-  },
-  { deep: true, immediate: true },
-)
-
-function observermodelValue(value: boolean) {
-  value ? enter() : leave()
-}
-
-function enter() {
-  const classNames = getClassNames(props.transition || props.position)
-  const duration =
-    props.transition === 'none'
-      ? 0
-      : isObj(props.duration)
-        ? (props.duration as any).enter
-        : props.duration
-  status.value = 'enter'
-  emit('before-enter')
-
-  requestAnimationFrame(() => {
-    emit('enter')
-    classes.value = classNames.enter
-    currentDuration.value = duration
-    requestAnimationFrame(() => {
-      inited.value = true
-      display.value = true
-      requestAnimationFrame(() => {
-        transitionEnded.value = false
-        classes.value = classNames['enter-to']
-      })
-    })
-  })
-}
-function leave() {
-  if (!display.value) return
-  const classNames = getClassNames(props.transition || props.position)
-  const duration =
-    props.transition === 'none'
-      ? 0
-      : isObj(props.duration)
-        ? (props.duration as any).leave
-        : props.duration
-  status.value = 'leave'
-  emit('before-leave')
-
-  requestAnimationFrame(() => {
-    emit('leave')
-    classes.value = classNames.leave
-    currentDuration.value = duration
-
-    requestAnimationFrame(() => {
-      transitionEnded.value = false
-      const timer = setTimeout(() => {
-        onTransitionEnd()
-        clearTimeout(timer)
-      }, currentDuration.value)
-      classes.value = classNames['leave-to']
-    })
-  })
-}
-
-function onTransitionEnd() {
-  if (transitionEnded.value) return
-
-  transitionEnded.value = true
-  if (status.value === 'leave') {
-    // 离开后触发
-    emit('after-leave')
-  } else if (status.value === 'enter') {
-    // 进入后触发
-    emit('after-enter')
-  }
-  if (!props.modelValue && display.value) {
-    display.value = false
-  }
-}
-
-function observerTransition() {
-  const { transition, position } = props
-  name.value = transition || position
-}
-
 function handleClickModal() {
   emit('click-modal')
   if (props.closeOnClickModal) {
@@ -222,6 +164,7 @@ function close() {
 }
 function noop() {}
 </script>
+
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-progress/index.scss

@@ -1,5 +1,5 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(progress) {
@@ -10,44 +10,47 @@
 }
 
 @include b(progress) {
-  display: flex;
-  align-items: center;
   width: 100%;
   height: $-progress-height;
+  display: flex;
+  align-items: center;
   padding: $-progress-padding;
 
   @include e(outer) {
-    position: relative;
     display: block;
+    position: relative;
     flex: 1;
     height: $-progress-height;
-    background: $-progress-bg;
     border-radius: calc($-progress-height / 2);
+    background: $-progress-bg;
   }
   @include e(inner) {
+    display: block;
     position: absolute;
     top: 0;
     left: 0;
-    display: block;
     height: 100%;
-    font-size: $-progress-icon-fs;
-    background: $-progress-color;
     border-radius: calc($-progress-height / 2);
-    transition-timing-function: linear;
+    background: $-progress-color;
     transition-property: width;
+    transition-timing-function: linear;
+    font-size: $-progress-icon-fs;
 
     @include when(danger) {
-      background: $-progress-linear-danger-color;
+      background: $-progress-danger-color;
     }
     @include when(success) {
-      background: $-progress-linear-success-color;
+      background: $-progress-success-color;
+    }
+    @include when(warning) {
+      background: $-progress-warning-color;
     }
   }
   @include edeep(label) {
     width: 30px;
     margin-left: 9px;
-    font-size: $-progress-label-fs;
     color: $-progress-label-color;
+    font-size: $-progress-label-fs;
   }
   @include edeep(icon) {
     font-size: $-progress-icon-fs;
@@ -58,5 +61,8 @@
     @include when(success) {
       color: $-progress-success-color;
     }
+    @include when(warning) {
+      color: $-progress-warning-color;
+    }
   }
-}
+}

package/components/wd-progress/types.ts

@@ -1,16 +1,21 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 20:40:34
- * @LastEditTime: 2024-03-18 15:32:11
+ * @LastEditTime: 2024-11-30 00:01:23
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-progress\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-progress/types.ts
  * 记得注释
  */
 import type { PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
 
-export type ProgressStatus = 'success' | 'danger' // 状态类型
+export type ProgressStatus = 'success' | 'danger' | 'warning' // 状态类型
+
+export type ProgressColor = {
+  color: string // 颜色
+  percentage: number // 百分比
+}
 
 export const progressProps = {
   ...baseProps,
@@ -26,8 +31,7 @@ export const progressProps = {
    * 进度条颜色
    */
   color: {
-    type: [String, Array, Object] as PropType<string | string[] | Record<string, any>[]>,
-    default: 'linear-gradient(315deg, rgba(81,124,240,1) 0%,rgba(118,158,245,1) 100%)',
+    type: [String, Array] as PropType<string | string[] | ProgressColor[]>
   },
   /**
    * 进度增加1%所需毫秒数
@@ -36,5 +40,5 @@ export const progressProps = {
   /**
    * 进度条状态
    */
-  status: String as PropType<ProgressStatus>,
+  status: String as PropType<ProgressStatus>
 }