@tplc/wot 1.0.7 → 1.0.9

package/components/wd-navbar-capsule/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(navbar-capsule) {
@@ -17,39 +17,40 @@
   }
 }
 
+
 @include b(navbar-capsule) {
   position: relative;
   box-sizing: border-box;
+  width: $-navbar-capsule-width;
+  height: $-navbar-capsule-height;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: $-navbar-capsule-width;
-  height: $-navbar-capsule-height;
 
   &::before {
+    content: '';
     position: absolute;
     top: 0;
     left: 0;
-    box-sizing: border-box;
     width: 200%;
     height: 200%;
-    content: '';
-    border: 2rpx solid $-navbar-capsule-border-color;
-    border-radius: calc($-navbar-capsule-border-radius * 2);
     transform: scale(0.5);
     transform-origin: 0 0;
+    box-sizing: border-box;
+    border-radius: calc($-navbar-capsule-border-radius * 2);
+    border: 2rpx solid $-navbar-capsule-border-color;
   }
 
   &::after {
+    content: '';
+    display: block;
     position: absolute;
-    top: 50%;
     left: 50%;
-    display: block;
+    top: 50%;
+    transform: translateY(-50%);
     width: 1px;
     height: 36rpx;
-    content: '';
     background: $-navbar-capsule-border-color;
-    transform: translateY(-50%);
   }
 
   &:empty {
@@ -57,9 +58,9 @@
   }
 
   @include edeep(icon) {
-    position: relative;
     flex: 1;
-    font-size: $-navbar-capsule-icon-size;
+    position: relative;
     color: $-navbar-desc-font-color;
+    font-size: $-navbar-capsule-icon-size;
   }
-}
+}

package/components/wd-navbar-capsule/types.ts

@@ -0,0 +1,8 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps } from '../common/props'
+
+export const navbarCapsuleProps = {
+  ...baseProps
+}
+
+export type NavbarCapsuleProps = ExtractPropTypes<typeof navbarCapsuleProps>

package/components/wd-navbar-capsule/wd-navbar-capsule.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="wd-navbar-capsule">
+  <view :class="`wd-navbar-capsule ${customClass}`" :style="customStyle">
     <wd-icon @click="handleBack" name="chevron-left" custom-class="wd-navbar-capsule__icon" />
     <wd-icon @click="handleBackHome" name="home" custom-class="wd-navbar-capsule__icon" />
   </view>
@@ -10,13 +10,17 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { navbarCapsuleProps } from './types'
+
 const emit = defineEmits(['back', 'back-home'])
+defineProps(navbarCapsuleProps)
 
 function handleBack() {
   emit('back')
@@ -27,5 +31,5 @@ function handleBackHome() {
 </script>
 
 <style lang="scss">
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-notice-bar/index.scss

@@ -2,24 +2,24 @@
 @import '../common/abstracts/mixin';
 
 @include b(notice-bar) {
-  position: relative;
-  box-sizing: border-box;
   display: flex;
-  align-items: center;
   padding: $-notice-bar-padding;
+  align-items: center;
   font-size: $-notice-bar-fs;
   border-radius: $-notice-bar-border-radius;
+  position: relative;
+  box-sizing: border-box;
   @include when(warning) {
-    color: $-notice-bar-warning-color;
     background: $-notice-bar-warning-bg;
+    color: $-notice-bar-warning-color;
   }
   @include when(info) {
-    color: $-notice-bar-info-color;
     background: $-notice-bar-info-bg;
+    color: $-notice-bar-info-color;
   }
   @include when(danger) {
-    color: $-notice-bar-danger-color;
     background: $-notice-bar-danger-bg;
+    color: $-notice-bar-danger-color;
   }
   @include edeep(prefix) {
     padding-right: 4px;
@@ -27,16 +27,16 @@
   }
 
   @include edeep(suffix) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: inline-block;
-    padding: 0;
-    font-size: $-notice-bar-close-size;
-    color: $-notice-bar-close-color;
     text-align: center;
+    font-size: $-notice-bar-close-size;
+    display: inline-block;
     background-color: $-notice-bar-close-bg;
+    color: $-notice-bar-close-color;
+    padding: 0;
     border-radius: 0px 8px 0px 4px;
+    position: absolute;
+    right: 0;
+    top: 0;
   }
   @include e(wrap) {
     position: relative;
@@ -48,13 +48,6 @@
   @include e(content) {
     position: absolute;
     white-space: nowrap;
-
-    @include m(play) {
-      animation: notice-bar-play linear both;
-    }
-    @include m(play-infinite) {
-      animation: notice-bar-play-infinite linear infinite both;
-    }
   }
   @include m(ellipse) {
     .wd-notice-bar__content {
@@ -63,6 +56,7 @@
     }
   }
   @include m(wrap) {
+
     .wd-notice-bar__wrap {
       height: auto;
     }
@@ -71,16 +65,4 @@
       white-space: normal;
     }
   }
-}
-
-@keyframes notice-bar-play {
-  100% {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
-
-@keyframes notice-bar-play-infinite {
-  100% {
-    transform: translate3d(-100%, 0, 0);
-  }
-}
+}

package/components/wd-notice-bar/types.ts

@@ -1,4 +1,4 @@
-import type { PropType } from 'vue'
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
 export type NoticeBarType = 'warning' | 'info' | 'danger' | ''
@@ -11,7 +11,7 @@ export const noticeBarProps = {
    */
   text: {
     type: [String, Array] as PropType<string | string[]>,
-    default: '',
+    default: ''
   },
   /**
    * 设置通知栏类型，可选值为：'warning' | 'info' | 'danger'
@@ -52,5 +52,16 @@ export const noticeBarProps = {
   /**
    * 滚动方向
    */
-  direction: makeStringProp<NoticeBarScrollDirection>('horizontal'),
+  direction: makeStringProp<NoticeBarScrollDirection>('horizontal')
 }
+
+export type NoticeBarProps = ExtractPropTypes<typeof noticeBarProps>
+
+export type NoticeBarExpose = {
+  /**
+   * 重置NoticeBar动画
+   */
+  reset: () => void
+}
+
+export type NoticeBarInstance = ComponentPublicInstance<NoticeBarProps, NoticeBarExpose>

package/components/wd-notice-bar/wd-notice-bar.vue

@@ -3,12 +3,7 @@
     <wd-icon v-if="prefix" custom-class="wd-notice-bar__prefix" :name="prefix"></wd-icon>
     <slot v-else name="prefix"></slot>
     <view class="wd-notice-bar__wrap">
-      <view
-        class="wd-notice-bar__content"
-        :style="animation"
-        @transitionend="animationEnd"
-        @click="handleClick"
-      >
+      <view class="wd-notice-bar__content" :style="animation" @transitionend="animationEnd" @click="handleClick">
         <template v-if="isVertical">
           <view v-for="item in textArray" :key="item">{{ item }}</view>
           <view v-if="textArray.length > 1">{{ textArray[0] }}</view>
@@ -16,12 +11,7 @@
         <slot v-else>{{ currentText }}</slot>
       </view>
     </view>
-    <wd-icon
-      v-if="closable"
-      custom-class="wd-notice-bar__suffix"
-      name="close-bold"
-      @click="handleClose"
-    ></wd-icon>
+    <wd-icon v-if="closable" custom-class="wd-notice-bar__suffix" name="close-bold" @click="handleClose"></wd-icon>
     <slot v-else name="suffix"></slot>
   </view>
 </template>
@@ -31,16 +21,16 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { ref, watch, nextTick, computed, getCurrentInstance, type CSSProperties } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { ref, watch, nextTick, computed, getCurrentInstance, type CSSProperties, onMounted, onActivated, onDeactivated, reactive } from 'vue'
 import { getRect, isArray, isDef, objToStyle } from '../common/util'
-import { noticeBarProps } from './types'
-
+import { type NoticeBarExpose, noticeBarProps } from './types'
 const $wrap = '.wd-notice-bar__wrap'
 const $content = '.wd-notice-bar__content'
 
@@ -49,14 +39,27 @@ const emit = defineEmits(['close', 'next', 'click'])
 
 const wrapWidth = ref<number>(0)
 const show = ref<boolean>(true)
-const animation = ref<string>('')
-const currentIndex = ref(0)
+const currentIndex = ref<number>(0)
 const textArray = computed(() => (Array.isArray(props.text) ? props.text : [props.text]))
 const currentText = computed(() => textArray.value[currentIndex.value])
-const verticalIndex = ref(0)
+const verticalIndex = ref<number>(0)
+const wrapRect = ref<UniApp.NodeInfo | null>(null) // 外层容器节点信息
+const contentRect = ref<UniApp.NodeInfo | null>(null) // 内容节点信息
 const isHorizontal = computed(() => props.direction === 'horizontal')
 const isVertical = computed(() => props.direction === 'vertical')
 
+const transitionState = reactive<CSSProperties>({
+  transitionProperty: 'unset',
+  transitionDelay: 'unset',
+  transitionDuration: 'unset',
+  transform: 'none',
+  transitionTimingFunction: 'linear'
+})
+
+const animation = computed(() => {
+  return objToStyle(transitionState)
+})
+
 const rootStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.color)) {
@@ -67,12 +70,12 @@ const rootStyle = computed(() => {
     style.background = props.backgroundColor
   }
 
-  return `${objToStyle(style)};${props.customStyle}`
+  return `${objToStyle(style)}${props.customStyle}`
 })
 const noticeBarClass = computed(() => {
   const { type, wrapable, scrollable } = props
 
-  const noticeBarClasses: string[] = []
+  let noticeBarClasses: string[] = []
   type && noticeBarClasses.push(`is-${type}`)
 
   if (isHorizontal.value) {
@@ -88,36 +91,66 @@ const noticeBarClass = computed(() => {
 const { proxy } = getCurrentInstance() as any
 
 watch(
-  [() => props.text],
+  () => props.text,
   () => {
-    nextTick(() => scroll())
+    reset()
   },
-  { deep: true, immediate: true },
+  { deep: true }
 )
 
+onMounted(() => {
+  startTransition()
+  // #ifdef APP-PLUS
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  const currentWebview = currentPage.$getAppWebview!()
+  currentWebview.addEventListener('hide', () => {
+    stopTransition()
+  })
+  currentWebview.addEventListener('show', () => {
+    startTransition()
+  })
+  // #endif
+})
+
+onActivated(() => {
+  startTransition()
+})
+
+onDeactivated(() => {
+  stopTransition()
+})
+
+function reset() {
+  stopTransition()
+  startTransition()
+}
+
+function startTransition() {
+  nextTick(() => scroll())
+}
+
+function stopTransition() {
+  transitionState.transitionProperty = 'unset'
+  transitionState.transitionDelay = 'unset'
+  transitionState.transitionDuration = 'unset'
+  transitionState.transform = 'none'
+  transitionState.transitionTimingFunction = 'linear'
+  currentIndex.value = 0
+  verticalIndex.value = 0
+}
+
 function handleClose() {
   show.value = false
   emit('close')
 }
 
-function initAnimation({
-  duration,
-  delay,
-  translate,
-}: {
-  duration: number
-  delay: number
-  translate: number
-}) {
-  const style: CSSProperties = {
-    transitionProperty: 'all',
-    transitionDelay: `${delay}s`,
-    transitionDuration: `${duration}s`,
-    transform: `${props.direction === 'vertical' ? 'translateY' : 'translateX'}(${translate}px)`,
-    transitionTimingFunction: 'linear',
-  }
-
-  return objToStyle(style)
+function setTransition({ duration, delay, translate }: { duration: number; delay: number; translate: number }) {
+  transitionState.transitionProperty = 'all'
+  transitionState.transitionDelay = `${delay}s`
+  transitionState.transitionDuration = `${duration}s`
+  transitionState.transform = `${props.direction === 'vertical' ? 'translateY' : 'translateX'}(${translate}px)`
+  transitionState.transitionTimingFunction = 'linear'
 }
 
 function queryRect() {
@@ -126,30 +159,31 @@ function queryRect() {
 
 async function verticalAnimate(height: number) {
   const translate = -(height / (textArray.value.length + 1)) * (currentIndex.value + 1)
-  animation.value = initAnimation({
+  setTransition({
     duration: height / (textArray.value.length + 1) / props.speed,
     delay: props.delay,
-    translate,
+    translate
   })
 }
 
 async function scroll() {
-  const [wrapRect, contentRect] = await queryRect()
-  if (!wrapRect.width || !contentRect.width || !contentRect.height) return
-
-  wrapWidth.value = wrapRect.width
+  const [wRect, cRect] = await queryRect()
+  if (!wRect.width || !cRect.width || !cRect.height) return
+  wrapRect.value = wRect
+  contentRect.value = cRect
+  wrapWidth.value = wRect.width
 
   if (isHorizontal.value) {
     if (props.scrollable) {
-      animation.value = initAnimation({
-        duration: contentRect.width / props.speed,
+      setTransition({
+        duration: cRect.width / props.speed,
         delay: props.delay,
-        translate: -contentRect.width,
+        translate: -cRect.width
       })
     }
   } else {
     if (textArray.value.length > 1) {
-      verticalAnimate(contentRect.height)
+      verticalAnimate(cRect.height)
     }
   }
 }
@@ -165,18 +199,18 @@ function next() {
 
 function animationEnd() {
   if (isHorizontal.value) {
-    animation.value = initAnimation({
+    setTransition({
       duration: 0,
       delay: 0,
-      translate: wrapWidth.value + 1, // +1容错空间，防止露出来一丢丢
+      translate: wrapWidth.value + 1
     })
   } else {
     if (++verticalIndex.value >= textArray.value.length) {
       verticalIndex.value = 0
-      animation.value = initAnimation({
+      setTransition({
         duration: 0,
         delay: 0,
-        translate: 0,
+        translate: 0
       })
     }
   }
@@ -185,18 +219,25 @@ function animationEnd() {
     next() // 更换下一条文本
 
     nextTick(async () => {
-      // 因为文本会发生变化，所以每一次都需要查询
-      const [_, contentRect] = await queryRect()
-      if (!contentRect.width || !contentRect.height) return
+      try {
+        const [wRect, cRect] = await queryRect()
+        wrapRect.value = wRect
+        contentRect.value = cRect
+        wrapWidth.value = wRect.width || 0
+      } catch (error) {
+        // console.error(error)
+      }
+
+      if (!contentRect.value || !contentRect.value.width || !contentRect.value.height) return
 
       if (isHorizontal.value) {
-        animation.value = initAnimation({
-          duration: (wrapWidth.value + contentRect.width) / props.speed,
+        setTransition({
+          duration: (wrapWidth.value + contentRect.value.width) / props.speed,
           delay: props.delay,
-          translate: -contentRect.width,
+          translate: -contentRect.value.width
         })
       } else {
-        verticalAnimate(contentRect.height)
+        verticalAnimate(contentRect.value.height)
       }
     })
 
@@ -208,14 +249,16 @@ function handleClick() {
   const result = isArray(props.text)
     ? {
         index: currentIndex.value,
-        text: props.text[currentIndex.value],
+        text: props.text[currentIndex.value]
       }
     : {
         index: 0,
-        text: props.text,
+        text: props.text
       }
   emit('click', result)
 }
+
+defineExpose<NoticeBarExpose>({ reset })
 </script>
 
 <style lang="scss" scoped>

package/components/wd-notify/index.scss

@@ -2,19 +2,19 @@
 @import '../common/abstracts/mixin';
 
 @include b(notify) {
-  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-sizing: border-box;
   padding: $-notify-padding;
   font-size: $-notify-font-size;
   line-height: $-notify-line-height;
   color: $-notify-text-color;
-  text-align: center;
-  word-wrap: break-word;
-
+  
   // allow newline character
   white-space: pre-wrap;
+  text-align: center;
+  word-wrap: break-word;
 
   @include m(primary) {
     background: $-notify-primary-background;
@@ -31,4 +31,4 @@
   @include m(warning) {
     background: $-notify-warning-background;
   }
-}
+}

package/components/wd-notify/index.ts

@@ -1,10 +1,11 @@
-import { provide, reactive } from 'vue'
+import { inject, provide, reactive, ref } from 'vue'
 import type { NotifyProps } from './types'
 import { deepMerge, isString } from '../common/util'
 
 let timer: ReturnType<typeof setTimeout>
 let currentOptions = getDefaultOptions()
 const notifyDefaultOptionKey = '__NOTIFY_OPTION__'
+const None = Symbol('None')
 export const setNotifyDefaultOptions = (options: NotifyProps) => {
   currentOptions = deepMerge(currentOptions, options) as NotifyProps
 }
@@ -12,30 +13,31 @@ export const resetNotifyDefaultOptions = () => {
   currentOptions = getDefaultOptions()
 }
 export const useNotify = (selector: string = '') => {
-  const notifyOption = reactive<NotifyProps>(currentOptions)
-  const showNotify = (option: NotifyProps | string) => {
-    const options = deepMerge(
-      currentOptions,
-      isString(option) ? { message: option } : option,
-    ) as NotifyProps
+  const notifyOptionKey = getNotifyOptionKey(selector)
 
-    Object.assign(notifyOption, options, { visible: true })
-    if (notifyOption.duration && notifyOption.duration > 0) {
+  const notifyOption = inject(notifyOptionKey, ref<NotifyProps | typeof None>(None))
+  if (notifyOption.value === None) {
+    notifyOption.value = currentOptions
+    provide(notifyOptionKey, notifyOption)
+  }
+  const showNotify = (option: NotifyProps | string) => {
+    const options = deepMerge(currentOptions, isString(option) ? { message: option } : option) as NotifyProps
+    notifyOption.value = deepMerge(options, { visible: true })
+    if (notifyOption.value.duration && notifyOption.value.duration > 0) {
       timer && clearTimeout(timer)
       timer = setTimeout(() => closeNotify(), options.duration)
     }
   }
   const closeNotify = () => {
     timer && clearTimeout(timer)
-    notifyOption.visible = false
+    if (notifyOption.value !== None) {
+      notifyOption.value.visible = false
+    }
   }
 
-  // provide
-  provide(getNotifyOptionKey(selector), notifyOption)
-
   return {
     showNotify,
-    closeNotify,
+    closeNotify
   }
 }
 export const getNotifyOptionKey = (selector: string) => {
@@ -54,6 +56,6 @@ function getDefaultOptions(): NotifyProps {
     background: undefined,
     onClick: undefined,
     onClosed: undefined,
-    onOpened: undefined,
+    onOpened: undefined
   }
 }

package/components/wd-notify/types.ts

@@ -59,4 +59,8 @@ export const notifyProps = {
    * 背景颜色
    */
   background: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false)
 }