@tplc/wot 1.0.7 → 1.0.8

package/components/wd-count-down/index.scss

@@ -7,8 +7,9 @@
   }
 }
 
+
 @include b(count-down) {
+  color: $-count-down-text-color;
   font-size: $-count-down-font-size;
   line-height: $-count-down-line-height;
-  color: $-count-down-text-color;
-}
+}

package/components/wd-count-down/types.ts

@@ -18,7 +18,7 @@ export const countDownProps = {
   /**
    * 是否自动开始
    */
-  autoStart: makeBooleanProp(true),
+  autoStart: makeBooleanProp(true)
 }
 
 export type CountDownProps = ExtractPropTypes<typeof countDownProps>

package/components/wd-count-down/wd-count-down.vue

@@ -11,8 +11,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -30,7 +30,7 @@ const { start, pause, reset, current } = useCountDown({
   time: props.time,
   millisecond: props.millisecond,
   onChange: (current) => emit('change', current),
-  onFinish: () => emit('finish'),
+  onFinish: () => emit('finish')
 })
 
 const timeText = computed(() => parseFormat(props.format, current.value))
@@ -51,10 +51,10 @@ onMounted(() => {
 defineExpose<CountDownExpose>({
   start,
   pause,
-  reset: resetTime,
+  reset: resetTime
 })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-count-to/index.scss

@@ -1,6 +1,7 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
-.wd-count-to {
+
+.wd-count-to{
   vertical-align: bottom;
 }

package/components/wd-count-to/types.ts

@@ -1,5 +1,6 @@
 import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { TextType } from '../wd-text/types'
 
 export const countToProps = {
   ...baseProps,
@@ -9,7 +10,13 @@ export const countToProps = {
 
   // 文本颜色
   color: makeStringProp(''),
-
+  /**
+   * 主题类型
+   * 类型：string
+   * 可选值：'default' /'primary' / 'error' / 'warning' / 'success'
+   * 默认值：'default'
+   */
+  type: makeStringProp<TextType>('default'),
   /**
    * 起始值
    * 类型：number
@@ -48,7 +55,7 @@ export const countToProps = {
     default: 0,
     validator(value: number) {
       return value >= 0
-    },
+    }
   },
 
   // 小数点
@@ -87,7 +94,7 @@ export const countToProps = {
   /**
    * 自定义根节点样式类
    */
-  customClass: makeStringProp(''),
+  customClass: makeStringProp('')
 }
 
 export type CountDownProps = ExtractPropTypes<typeof countToProps>

package/components/wd-count-to/wd-count-to.vue

@@ -2,23 +2,15 @@
   <view :class="rootClass">
     <!-- 前缀插槽 -->
     <slot name="prefix">
-      <wd-text
-        :color="props.color"
-        :size="`${props.fontSize * 0.7}px`"
-        :text="props.prefix"
-      ></wd-text>
+      <wd-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.prefix"></wd-text>
     </slot>
     <!-- 默认文本插槽 -->
     <slot>
-      <wd-text :color="props.color" :size="`${props.fontSize}px`" :text="timeText"></wd-text>
+      <wd-text :type="props.type" :color="props.color" :size="`${props.fontSize}px`" :text="timeText"></wd-text>
     </slot>
     <!-- 后缀插槽 -->
     <slot name="suffix">
-      <wd-text
-        :color="props.color"
-        :size="`${props.fontSize * 0.7}px`"
-        :text="props.suffix"
-      ></wd-text>
+      <wd-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.suffix"></wd-text>
     </slot>
   </view>
 </template>
@@ -29,12 +21,13 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdText from '../wd-text/wd-text.vue'
 import { computed, watch, onMounted } from 'vue'
 import { countToProps } from './types'
 import { easingFn, isNumber } from '../common/util'
@@ -47,7 +40,7 @@ const emit = defineEmits(['mounted', 'finish'])
 const { start, pause, reset, current } = useCountDown({
   time: props.duration,
   millisecond: true,
-  onFinish: () => emit('finish'),
+  onFinish: () => emit('finish')
 })
 
 // 计算根元素的类名
@@ -59,9 +52,7 @@ const timeText = computed(() => {
   return parseFormat(current.value.total)
 })
 
-watch([() => props.startVal, () => props.endVal, () => props.duration], resetTime, {
-  immediate: false,
-})
+watch([() => props.startVal, () => props.endVal, () => props.duration], resetTime, { immediate: false })
 
 onMounted(() => {
   resetTime()
@@ -130,5 +121,5 @@ defineExpose<CountDownExpose>({ start, reset: resetTime, pause })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-curtain/index.scss

@@ -1,14 +1,19 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
-:deep(.wd-curtain) {
-  display: inline-block;
-  overflow-y: visible;
-  font-size: 0;
-  background: transparent;
-  border-radius: $-curtain-content-radius;
+@include b(curtain-wrapper){
+  :deep(.wd-curtain){
+    display: inline-block;
+    border-radius: $-curtain-content-radius;
+    overflow-y: visible !important;
+    background: transparent;
+    font-size: 0;
+  }
 }
+
+
 @include b(curtain) {
+
   @include e(content) {
     position: relative;
     display: inline-block;
@@ -27,54 +32,54 @@
   }
   @include edeep(content-close) {
     position: absolute;
+    margin: 0;
+    padding: 6px;
     top: 10px;
     right: 10px;
-    padding: 6px;
-    margin: 0;
-    font-size: $-curtain-content-close-fs;
     color: $-curtain-content-close-color;
+    font-size: $-curtain-content-close-fs;
     -webkit-tap-highlight-color: transparent;
     &.top {
+      margin: 0 0 0 -18px;
       top: -62px;
       right: unset;
-      bottom: unset;
       left: 50%;
-      margin: 0 0 0 -18px;
+      bottom: unset;
     }
     &.top-left {
+      margin: 0;
       top: -62px;
       right: unset;
-      bottom: unset;
       left: -6px;
-      margin: 0;
+      bottom: unset;
     }
     &.top-right {
+      margin: 0;
       top: -62px;
       right: -6px;
-      bottom: unset;
       left: unset;
-      margin: 0;
+      bottom: unset;
     }
     &.bottom {
+      margin: 0 0 0 -18px;
       top: unset;
       right: unset;
-      bottom: -62px;
       left: 50%;
-      margin: 0 0 0 -18px;
+      bottom: -62px;
     }
     &.bottom-left {
+      margin: 0;
       top: unset;
       right: unset;
-      bottom: -62px;
       left: -6px;
-      margin: 0;
+      bottom: -62px;
     }
     &.bottom-right {
+      margin: 0;
       top: unset;
       right: -6px;
-      bottom: -62px;
       left: unset;
-      margin: 0;
+      bottom: -62px;
     }
   }
 }

package/components/wd-curtain/types.ts

@@ -1,21 +1,28 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-01-25 23:46:29
+ * @LastEditTime: 2025-09-09 10:00:00
+ * @LastEditors: rusheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-curtain/types.ts
+ * 记得注释
+ */
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
-export type ClosePosition =
-  | 'inset'
-  | 'top'
-  | 'bottom'
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
+export type ClosePosition = 'inset' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
 
 export const curtainProps = {
   ...baseProps,
   /**
    * 绑定值，展示/关闭幕帘
+   * @deprecated 请使用 modelValue
    */
   value: makeBooleanProp(false),
+  /**
+   * 绑定值，展示/关闭幕帘
+   */
+  modelValue: makeBooleanProp(false),
   /**
    * 关闭按钮位置，可选值：inset / top / bottom / top-left / top-right / bottom-left / bottom-right
    */
@@ -40,6 +47,36 @@ export const curtainProps = {
    * 是否当关闭时将弹出层隐藏（display: none)
    */
   hideWhenClose: makeBooleanProp(true),
+  /**
+   * 设置层级
+   * 类型：number
+   * 默认值：10
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 自定义关闭按钮的类名
+   * 类型：string
+   * 默认值：''
+   */
+  customCloseClass: makeStringProp(''),
+  /**
+   * 自定义关闭按钮的样式
+   * 类型：string
+   * 默认值：''
+   */
+  customCloseStyle: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 开启长按图片显示识别小程序码菜单，仅在微信小程序平台有效
+   */
+  showMenuByLongpress: makeBooleanProp(false),
+  /**
+   * 点击图片是否关闭幕帘，默认为 true
+   */
+  closeOnClick: makeBooleanProp(true)
 }
 
 export type CurtainProps = ExtractPropTypes<typeof curtainProps>

package/components/wd-curtain/wd-curtain.vue

@@ -1,11 +1,13 @@
 <template>
-  <view>
+  <view class="wd-curtain-wrapper">
     <wd-popup
-      v-model="show"
+      v-model="modelValue"
       transition="zoom-in"
       position="center"
       :close-on-click-modal="closeOnClickModal"
       :hide-when-close="hideWhenClose"
+      :z-index="zIndex"
+      :root-portal="rootPortal"
       @before-enter="beforeenter"
       @enter="enter"
       @after-enter="afterenter"
@@ -22,15 +24,19 @@
           :src="src"
           class="wd-curtain__content-img"
           :style="imgStyle"
+          :show-menu-by-longpress="showMenuByLongpress"
           @click="clickImage"
           @error="imgErr"
           @load="imgLoad"
         ></image>
-        <wd-icon
-          name="close-outline"
-          :custom-class="`wd-curtain__content-close ${closePosition}`"
-          @click="close"
-        />
+        <slot name="close">
+          <wd-icon
+            name="close-outline"
+            :custom-class="`wd-curtain__content-close ${closePosition} ${customCloseClass}`"
+            :custom-style="customCloseStyle"
+            @click="close"
+          />
+        </slot>
       </view>
     </wd-popup>
   </view>
@@ -42,17 +48,18 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import { computed, ref, watch } from 'vue'
 import { curtainProps } from './types'
 
 const props = defineProps(curtainProps)
-
 const emit = defineEmits([
   'beforeenter',
   'enter',
@@ -66,52 +73,43 @@ const emit = defineEmits([
   'load',
   'error',
   'click',
+  'update:modelValue'
 ])
 
-const show = ref<boolean>(false)
-const imgSucc = ref<boolean>(true)
-const imgStyle = ref<string>('')
-const imgScale = ref<number>(1)
+const modelValue = ref(props.modelValue || props.value)
 
 watch(
-  () => props.value,
-  () => {
-    computedShowImg()
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
+  () => props.modelValue,
+  (newVal) => {
+    modelValue.value = newVal
+  }
 )
 
 watch(
-  () => props.width,
-  () => {
-    computeImgStyle()
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
+  () => props.value,
+  (newVal) => {
+    modelValue.value = newVal
+  }
 )
 
-function computedShowImg() {
-  if (props.value && imgSucc.value) {
-    show.value = true
-  } else {
-    show.value = false
-    close()
+watch(modelValue, (newVal) => {
+  emit('update:modelValue', newVal)
+  if (!newVal) {
+    emit('close')
   }
-}
+})
+
+const imgSucc = ref<boolean>(true)
+const imgScale = ref<number>(1)
 
-function computeImgStyle() {
+const imgStyle = computed(() => {
   let style = ''
   if (props.width) {
     style += `width: ${props.width}px ;`
     style += `height: ${props.width / imgScale.value}px`
   }
-  imgStyle.value = style
-}
+  return style
+})
 
 function beforeenter() {
   emit('beforeenter')
@@ -138,8 +136,7 @@ function afterleave() {
 }
 
 function close() {
-  show.value = false
-  emit('close')
+  modelValue.value = false
 }
 
 function clickModal() {
@@ -150,7 +147,6 @@ function imgLoad(event: any) {
   const { height, width } = event.detail
   imgScale.value = width / height
   imgSucc.value = true
-  computeImgStyle()
   emit('load')
 }
 function imgErr() {
@@ -161,14 +157,16 @@ function imgErr() {
 function clickImage() {
   if (props.to) {
     uni.navigateTo({
-      url: props.to,
+      url: props.to
     })
   }
   emit('click')
-  close()
+  if (props.closeOnClick) {
+    close()
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>