@tplc/wot 1.0.7 → 1.0.9

package/components/wd-tooltip/index.scss

@@ -1,15 +1,19 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
+
   @include b(tooltip) {
+
     @include e(pos) {
-      color: $-tooltip-color;
       background: $-dark-background4;
+      color: $-tooltip-color;
     }
 
     @include triangleArrow($-tooltip-arrow-size, $-dark-background4);
+
   }
+
 }
 
 @include b(tooltip) {
@@ -18,44 +22,45 @@
 
   @include edeep(pos) {
     position: absolute;
-    z-index: $-tooltip-z-index;
-    box-sizing: border-box;
     min-width: 138px;
     min-height: 36px;
     font-size: $-tooltip-fs;
-    color: $-tooltip-color;
-    text-align: center;
-    background: $-tooltip-bg;
-    background-clip: padding-box;
     backdrop-filter: blur($-tooltip-blur);
+    background-clip: padding-box;
     border-radius: $-tooltip-radius;
+    background: $-tooltip-bg;
+    color: $-tooltip-color;
+    text-align: center;
+    box-sizing: border-box;
+    z-index: $-tooltip-z-index;
   }
 
+
   @include e(hidden) {
-    bottom: -100vh;
     left: -100vw;
+    bottom: -100vh;
     visibility: hidden;
   }
 
   @include e(container) {
-    font-size: $-tooltip-fs;
     line-height: $-tooltip-line-height;
+    font-size: $-tooltip-fs;
   }
 
   @include e(inner) {
     padding: $-tooltip-padding;
-    line-height: $-tooltip-line-height;
     white-space: nowrap;
+    line-height: $-tooltip-line-height;
   }
 
   @include edeep(close-icon) {
+    font-size: 12px;
     position: absolute;
-    top: -10px;
     right: -8px;
-    padding: 10px;
-    font-size: 12px;
+    top: -10px;
     transform: scale(0.5);
+    padding: 10px;
   }
 
   @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
-}
+}

package/components/wd-tooltip/types.ts

@@ -43,7 +43,7 @@ export const tooltipProps = {
    * 默认值：无（根据传入值而定）
    */
   content: {
-    type: [String, Array] as PropType<string | Array<Record<string, any>>>,
+    type: [String, Array] as PropType<string | Array<Record<string, any>>>
   },
 
   /**
@@ -59,7 +59,12 @@ export const tooltipProps = {
    * 类型：number
    * 默认值：0
    */
-  offset: makeNumberProp(0),
+  // offset: makeNumberProp(0),
+  offset: {
+    // 需要支持数字、数组、对象类型
+    type: [Number, Array, Object] as PropType<number | Array<number> | Record<'x' | 'y', number>>,
+    default: 0
+  },
 
   /**
    * 是否使用slot来传入content内容
@@ -87,7 +92,7 @@ export const tooltipProps = {
    * 类型：boolean
    * 默认值：false
    */
-  modelValue: makeBooleanProp(false),
+  modelValue: makeBooleanProp(false)
 }
 
 export type TooltipProps = ExtractPropTypes<typeof tooltipProps>

package/components/wd-tooltip/wd-tooltip.vue

@@ -1,40 +1,20 @@
 <template>
-  <view
-    :class="`wd-tooltip ${customClass}`"
-    :style="customStyle"
-    id="tooltip"
-    @click.stop="popover.noop"
-  >
+  <view :class="`wd-tooltip ${customClass}`" :style="customStyle" id="tooltip" @click.stop="popover.noop">
     <!-- 用于为渲染获取宽高的元素 -->
     <view class="wd-tooltip__pos wd-tooltip__hidden" id="pos">
       <view class="wd-tooltip__container custom-pop">
         <view v-if="!useContentSlot" class="wd-tooltip__inner">{{ content }}</view>
       </view>
     </view>
-    <wd-transition
-      custom-class="wd-tooltip__pos"
-      :custom-style="popover.popStyle.value"
-      :show="showTooltip"
-      name="fade"
-      :duration="200"
-    >
+    <wd-transition custom-class="wd-tooltip__pos" :custom-style="popover.popStyle.value" :show="showTooltip" name="fade" :duration="200">
       <view class="wd-tooltip__container custom-pop">
-        <view
-          v-if="visibleArrow"
-          :class="`wd-tooltip__arrow ${popover.arrowClass.value} ${customArrow}`"
-          :style="popover.arrowStyle.value"
-        ></view>
+        <view v-if="visibleArrow" :class="`wd-tooltip__arrow ${popover.arrowClass.value} ${customArrow}`" :style="popover.arrowStyle.value"></view>
         <!-- 普通模式 -->
         <view v-if="!useContentSlot" class="wd-tooltip__inner">{{ content }}</view>
         <!-- 用户自定义样式 -->
         <slot name="content" v-else />
       </view>
-      <wd-icon
-        v-if="showClose"
-        name="close"
-        custom-class="wd-tooltip__close-icon"
-        @click="toggle"
-      ></wd-icon>
+      <wd-icon v-if="showClose" name="close" custom-class="wd-tooltip__close-icon" @click="toggle"></wd-icon>
     </wd-transition>
     <view @click="toggle" class="wd-tooltip__target" id="target">
       <slot />
@@ -48,21 +28,15 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import {
-  getCurrentInstance,
-  inject,
-  onBeforeMount,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { usePopover } from '../composables/usePopover'
 import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
 import { type Queue, queueKey } from '../composables/useQueue'
@@ -71,7 +45,7 @@ import { tooltipProps, type TooltipExpose } from './types'
 const props = defineProps(tooltipProps)
 const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
 
-const popover = usePopover()
+const popover = usePopover(props.visibleArrow)
 const queue = inject<Queue | null>(queueKey, null)
 const selector: string = 'tooltip'
 const { proxy } = getCurrentInstance() as any
@@ -82,23 +56,23 @@ watch(
   (newVal) => {
     if (newVal === null || newVal === undefined) {
       // eslint-disable-next-line prettier/prettier
-      console.error("[wot-design] warning(wd-tooltip): content can't be null or undefined")
+      console.error('[wot-design] warning(wd-tooltip): content can\'t be null or undefined')
     }
-  },
+  }
 )
 
 watch(
   () => props.placement,
   () => {
     popover.init(props.placement, props.visibleArrow, selector)
-  },
+  }
 )
 
 watch(
   () => props.modelValue,
   (newValue) => {
     showTooltip.value = newValue
-  },
+  }
 )
 
 watch(
@@ -115,7 +89,7 @@ watch(
     popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
     emit('change', { show: newValue })
     emit(`${newValue ? 'open' : 'close'}`)
-  },
+  }
 )
 
 onMounted(() => {
@@ -159,9 +133,9 @@ function updateModelValue(value: boolean) {
 
 defineExpose<TooltipExpose>({
   open,
-  close,
+  close
 })
 </script>
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-tour/index.scss

@@ -0,0 +1,123 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(tour) {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 9999;
+
+  @include e(mask) {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  @include e(highlight) {
+    position: fixed;
+    background-color: transparent;
+    box-sizing: content-box;
+    animation: tour-show 0.3s ease-in-out;
+  }
+
+  @include e(popover) {
+    z-index: 10000;
+    background-color: $-color-white;
+    padding: 10px 12px;
+    border-radius: 8px;
+    width: fit-content;
+    min-width: 200px;
+    animation: tour-show 0.3s ease;
+  }
+
+  @include e(info) {
+    font-size: 12px;
+    background-color: $-color-white;
+    border-radius: 16rpx;
+    border: 1px solid $-color-white;
+    color: $-color-black;
+    width: fit-content;
+    text-align: left;
+  }
+
+  @include e(buttons) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: 5px;
+  }
+
+  @include e(prev) {
+    @include e(default){
+      font-size: 12px;
+      border-radius: 4px;
+      padding: 5px 8px;
+      white-space: nowrap;
+    }
+  }
+
+  @include e(next) {
+    @include e(default) {
+      font-size: 12px;
+      border-radius: 4px;
+      padding: 5px 8px;
+      background-color: $-button-primary-bg-color;
+      color: $-color-white;
+      white-space: nowrap;
+    }
+  }
+
+  @include e(finish) {
+    @include e(default) {
+      font-size: 12px;
+      border-radius: 4px;
+      padding: 5px 8px;
+      background-color: $-button-primary-bg-color;
+      color: $-color-white;
+      white-space: nowrap;
+    }
+  }
+
+  @include e(skip) {
+    
+    @include e(default){
+      background-color: $-color-white;
+      color: $-color-black;
+      font-size: 12px;
+      padding: 5px 8px;
+      white-space: nowrap;
+    }
+  }
+}
+
+@keyframes tour-show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.wot-theme-dark {
+  @include b(tour) {
+    @include e(popover) {
+      background-color: $-dark-background2;
+    }
+    
+    @include e(info) {
+      background-color: $-dark-background2;
+      border-color: $-dark-background2;
+      color: $-dark-color;
+    }
+    
+    @include e(skip) {
+      background-color: $-dark-background2;
+      color: $-dark-color;
+    }
+  }
+}

package/components/wd-tour/types.ts

@@ -0,0 +1,153 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp, makeArrayProp } from '../common/props'
+
+export interface TourStep {
+  /**
+   * 需要高亮的元素选择器
+   */
+  element: string
+  /**
+   * 引导文字内容
+   */
+  content: string
+}
+
+export const tourProps = {
+  ...baseProps,
+
+  /**
+   * 是否显示引导组件，使用 v-model 绑定
+   * 类型：boolean
+   * 默认值：false
+   */
+  modelValue: makeBooleanProp(false),
+
+  /**
+   * 引导步骤列表
+   * 类型：array
+   * 默认值：[]
+   */
+  steps: makeArrayProp<TourStep>(),
+  /**
+   * 引导框的current
+   * 类型：number
+   * 默认值：0
+   */
+  current: makeNumberProp(0),
+
+  /**
+   * 蒙版是否显示
+   * 类型：boolean
+   * 默认值：true
+   */
+  mask: makeBooleanProp(true),
+
+  /**
+   * 蒙版颜色（支持 rgba 格式）
+   * 类型：string
+   * 默认值：'rgba(0, 0, 0, 0.5)'
+   */
+  maskColor: makeStringProp('rgba(0, 0, 0, 0.5)'),
+
+  /**
+   * 引导框与高亮元素之间的间距
+   * 类型：number
+   * 默认值：20
+   */
+  offset: makeNumberProp(20),
+
+  /**
+   * 动画持续时间（毫秒）
+   * 类型：number
+   * 默认值：300
+   */
+  duration: makeNumberProp(300),
+
+  /**
+   * 高亮区域的圆角大小
+   * 类型：number
+   * 默认值：8
+   */
+  borderRadius: makeNumberProp(8),
+
+  /**
+   * 高亮区域的内边距
+   * 类型：number
+   * 默认值：8
+   */
+  padding: makeNumberProp(8),
+
+  /**
+   * 上一步按钮文字
+   */
+  prevText: makeStringProp('上一步'),
+
+  /**
+   * 下一步按钮文字
+   */
+  nextText: makeStringProp('下一步'),
+
+  /**
+   * 跳过按钮文字
+   */
+  skipText: makeStringProp('跳过'),
+
+  /**
+   * 完成按钮文字
+   */
+  finishText: makeStringProp('完成'),
+
+  /**
+   * 安全偏移量，用于滚动计算时确保元素周围有足够的空间
+   * 类型：number
+   * 默认值：100
+   */
+  bottomSafetyOffset: makeNumberProp(100),
+
+  /**
+   * 顶部安全偏移量，用于滚动计算时确保元素周围有足够的空间
+   * 类型：number
+   * 默认值：0
+   */
+  topSafetyOffset: makeNumberProp(0),
+
+  /**
+   * 是否自定义顶部导航栏
+   * 类型：boolean
+   * 默认值：false
+   */
+  customNav: makeBooleanProp(false),
+
+  /**
+   * 点击蒙版是否可以下一步
+   * 类型：boolean
+   * 默认值：false
+   */
+  clickMaskNext: makeBooleanProp(false),
+
+  /**
+   * 高亮区域样式
+   * 类型：object
+   * 默认值：{}
+   */
+  highlightStyle: {
+    type: Object as PropType<Record<string, any>>,
+    default: () => ({})
+  },
+
+  /**
+   * 引导框的层级
+   * 类型：number
+   * 默认值：999998
+   */
+  zIndex: makeNumberProp(999998),
+
+  /**
+   * 是否显示引导按钮
+   * 类型：boolean
+   * 默认值：true
+   */
+  showTourButtons: makeBooleanProp(true)
+}
+
+export type TourProps = typeof tourProps