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

package/components/wd-toast/wd-toast.vue

@@ -0,0 +1,158 @@
+<template>
+  <wd-overlay v-if="cover" :z-index="zIndex" lock-scroll :show="show" custom-style="background-color: transparent;pointer-events: auto;"></wd-overlay>
+  <wd-transition name="fade" :show="show" :custom-style="transitionStyle" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
+    <view :class="rootClass">
+      <!--iconName优先级更高-->
+      <wd-loading
+        v-if="iconName === 'loading'"
+        :type="loadingType"
+        :color="loadingColor"
+        :size="loadingSize"
+        :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+      />
+
+      <wd-icon
+        v-else-if="iconName === 'success' || iconName === 'warning' || iconName === 'info' || iconName === 'error'"
+        :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+        :size="iconSize"
+        :class-prefix="classPrefix"
+        :name="toastIcon[iconName]"
+      ></wd-icon>
+      <wd-icon
+        v-else-if="iconClass"
+        :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+        :size="iconSize"
+        :class-prefix="classPrefix"
+        :name="iconClass"
+      ></wd-icon>
+      <!--文本-->
+      <view v-if="msg" :class="`wd-toast__msg ${direction === 'vertical' ? 'is-vertical' : ''}`">{{ msg }}</view>
+    </view>
+  </wd-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-toast',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+
+import { computed, inject, ref, watch, type CSSProperties } from 'vue'
+import { defaultOptions, getToastOptionKey, toastIcon } from '.'
+import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
+import { addUnit, isDef, isFunction, objToStyle } from '../../common/util'
+
+const props = defineProps(toastProps)
+const iconName = ref<string>('') // 图标类型
+const msg = ref<string>('') // 消息内容
+const position = ref<string>('middle')
+const show = ref<boolean>(false)
+const zIndex = ref<number>(100)
+const loadingType = ref<ToastLoadingType>('circular')
+const loadingColor = ref<string>('#fff')
+const iconSize = ref<string>() // 图标大小
+const loadingSize = ref<string>() // loading大小
+const cover = ref<boolean>(false) // 是否存在遮罩层
+const classPrefix = ref<string>('wd-icon') // 图标前缀
+const iconClass = ref<string>('') // 图标类名
+const direction = ref<ToastDirection>('horizontal') // toast布局方向
+
+let opened: (() => void) | null = null
+
+let closed: (() => void) | null = null
+
+const toastOptionKey = getToastOptionKey(props.selector)
+const toastOption = inject(toastOptionKey, ref<ToastOptions>(defaultOptions)) // toast选项
+
+// 监听options变化展示
+watch(
+  () => toastOption.value,
+  (newVal: ToastOptions) => {
+    reset(newVal)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * 动画自定义样式
+ */
+const transitionStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': zIndex.value,
+    position: 'fixed',
+    top: '50%',
+    left: 0,
+    width: '100%',
+    // transform: 'translate(0, -50%)',
+    'text-align': 'center',
+    'pointer-events': 'none'
+  }
+  return objToStyle(style)
+})
+
+const rootClass = computed(() => {
+  return `wd-toast ${props.customClass} wd-toast--${position.value} ${
+    (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'wd-toast--with-icon' : ''
+  } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
+})
+
+function handleAfterEnter() {
+  if (isFunction(opened)) {
+    opened()
+  }
+}
+
+function handleAfterLeave() {
+  if (isFunction(closed)) {
+    closed()
+  }
+}
+
+/**
+ * 重置toast选项值
+ * @param option toast选项值
+ */
+function reset(option: ToastOptions) {
+  show.value = isDef(option.show) ? option.show : false
+
+  if (show.value) {
+    mergeOptionsWithProps(option, props)
+  }
+}
+
+function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
+  iconName.value = isDef(option.iconName!) ? option.iconName! : props.iconName
+  iconClass.value = isDef(option.iconClass!) ? option.iconClass! : props.iconClass
+  msg.value = isDef(option.msg!) ? option.msg! : props.msg
+  position.value = isDef(option.position!) ? option.position! : props.position
+  zIndex.value = isDef(option.zIndex!) ? option.zIndex! : props.zIndex
+  loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType
+  loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor
+  iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined
+  loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined
+  cover.value = isDef(option.cover!) ? option.cover! : props.cover
+  classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix
+  direction.value = isDef(option.direction) ? option.direction : props.direction
+  closed = isFunction(option.closed) ? option.closed : isFunction(props.closed) ? props.closed : null
+  opened = isFunction(option.opened) ? option.opened : isFunction(props.opened) ? props.opened : null
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-tooltip/index.scss

@@ -0,0 +1,77 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 背景色
+$tooltip-bg: var(--wot-tooltip-bg, $filled-oppo) !default;
+// 文字颜色
+$tooltip-color: var(--wot-tooltip-color, $text-secondary) !default;
+// 阴影效果
+$tooltip-box-shadow: var(--wot-tooltip-box-shadow, 0 12px 48px 16px rgba(39, 43, 59, 0.03), 0 9px 28px 8px rgba(39, 43, 59, 0.05), 0 5px 12px 4px rgba(39, 43, 59, 0.06)) !default;
+// 箭头阴影效果
+$tooltip-arrow-box-shadow: var(--wot-tooltip-arrow-box-shadow, 0 12px 48px 16px rgba(39, 43, 59, 0.03), 0 9px 28px 8px rgba(39, 43, 59, 0.05), 0 5px 12px 4px rgba(39, 43, 59, 0.06)) !default;
+// 圆角大小
+$tooltip-radius: var(--wot-tooltip-radius, $radius-main) !default;
+// 箭头大小
+$tooltip-arrow-size: var(--wot-tooltip-arrow-size, $n-8) !default;
+// 字号
+$tooltip-font-size: var(--wot-tooltip-font-size, $typography-body-size-main) !default;
+// 内边距
+$tooltip-padding: var(--wot-tooltip-padding, $padding-loose) !default;
+// 关闭按钮大小
+$tooltip-close-icon-size: var(--wot-tooltip-close-icon-size, $n-12) !default;
+// 关闭按钮颜色
+$tooltip-close-icon-color: var(--wot-tooltip-close-icon-color, $icon-secondary) !default;
+// 关闭按钮内边距
+$tooltip-close-icon-padding: var(--wot-tooltip-close-icon-padding, $padding-super-tight) !default;
+// 层级
+$tooltip-z-index: var(--wot-tooltip-z-index, 500) !default;
+// 行高
+$tooltip-line-height: var(--wot-tooltip-line-height, $typography-body-line--height-size-main) !default;
+
+@include b(tooltip) {
+  position: relative;
+  display: inline-block;
+
+  @include edeep(pos) {
+    position: absolute;
+    box-sizing: border-box;
+    min-width: 138px;
+    background-clip: padding-box;
+    z-index: $tooltip-z-index;
+  }
+
+  @include e(hidden) {
+    left: -100vw;
+    bottom: -100vh;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    position: relative;
+    z-index: $tooltip-z-index;
+    box-shadow: $tooltip-box-shadow;
+    border-radius: $tooltip-radius;
+    background: $tooltip-bg;
+  }
+
+  @include e(inner) {
+    position: relative;
+    padding: $tooltip-padding;
+    white-space: nowrap;
+    line-height: $tooltip-line-height;
+    font-size: $tooltip-font-size;
+    text-align: center;
+    color: $tooltip-color;
+  }
+
+  @include edeep(close-icon) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: $tooltip-close-icon-size;
+    padding: $tooltip-close-icon-padding;
+    color: $tooltip-close-icon-color;
+  }
+
+  @include triangleArrow($tooltip-arrow-size, $tooltip-bg);
+}

package/components/wd-tooltip/types.ts

@@ -0,0 +1,105 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-05-08 22:54:27
+ * @LastEditTime: 2026-03-04 11:02:59
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-tooltip/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../../common/props'
+import type { PlacementType, PopoverOffset } from '../../composables/usePopover'
+
+export type { PlacementType, PopoverOffset }
+
+export const tooltipProps = {
+  ...baseProps,
+
+  /**
+   * 自定义箭头样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customArrow: makeStringProp(''),
+
+  /**
+   * 自定义弹出层样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customPop: makeStringProp(''),
+
+  /**
+   * 是否显示 Tooltip 箭头
+   * 类型: boolean
+   * 默认值: true
+   */
+  visibleArrow: makeBooleanProp(true),
+
+  /**
+   * 显示的内容，也可以通过 slot#content 传入
+   * 类型: string | Array<Record<string, any>>
+   * 默认值: -
+   */
+  content: {
+    type: [String, Array] as PropType<string | Array<Record<string, any>>>
+  },
+
+  /**
+   * Tooltip 的出现位置
+   * 类型: string
+   * 可选值: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
+   * 默认值: 'bottom'
+   */
+  placement: makeStringProp<PlacementType>('bottom'),
+
+  /**
+   * 出现位置的偏移量
+   * 类型: number | number[] | { x: number; y: number }
+   * 默认值: 0
+   */
+  offset: {
+    type: [Number, Array, Object] as PropType<PopoverOffset>,
+    default: 0
+  },
+  /**
+   * Tooltip 是否禁用
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 是否显示关闭按钮
+   * 类型: boolean
+   * 默认值: false
+   */
+  showClose: makeBooleanProp(false),
+
+  /**
+   * Tooltip 的显示状态，通过 v-model 绑定
+   * 类型: boolean
+   * 默认值: false
+   */
+  modelValue: makeBooleanProp(false)
+}
+
+export type TooltipProps = ExtractPropTypes<typeof tooltipProps>
+
+export type TooltipExpose = {
+  /**
+   * 打开 tooltip
+   */
+  open: () => void
+  /**
+   * 关闭 tooltip
+   */
+  close: () => void
+  /**
+   * 重新测量弹出层尺寸并更新定位（用于 content 插槽场景）
+   */
+  updatePosition: () => void
+}
+
+export type TooltipInstance = ComponentPublicInstance<TooltipProps, TooltipExpose>

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

@@ -0,0 +1,169 @@
+<template>
+  <view :class="`wd-tooltip ${customClass}`" :style="customStyle" id="tooltip" @click.stop>
+    <view class="wd-tooltip__pos wd-tooltip__hidden" id="pos">
+      <view :class="`wd-tooltip__container ${customPop}`">
+        <view v-if="!$slots.content" 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"
+      @after-enter="handleAfterEnter"
+    >
+      <view :class="`wd-tooltip__container ${customPop}`" id="content">
+        <view v-if="visibleArrow" :class="`wd-tooltip__arrow ${popover.arrowClass.value} ${customArrow}`" :style="popover.arrowStyle.value"></view>
+        <slot name="content">
+          <view class="wd-tooltip__inner">{{ content }}</view>
+        </slot>
+        <wd-icon v-if="showClose" name="close" custom-class="wd-tooltip__close-icon" @click="toggle"></wd-icon>
+      </view>
+    </wd-transition>
+    <view @click="toggle" class="wd-tooltip__target" id="target">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-tooltip',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+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'
+import { tooltipProps, type TooltipExpose } from './types'
+
+const props = defineProps(tooltipProps)
+const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
+
+const popover = usePopover(props.visibleArrow)
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'tooltip'
+const { proxy } = getCurrentInstance() as any
+const showTooltip = ref<boolean>(false) // 控制tooltip显隐
+
+watch(
+  () => props.content,
+  (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')
+    }
+  }
+)
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(props.placement, props.visibleArrow, selector)
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showTooltip.value = newValue
+  }
+)
+
+watch(
+  () => showTooltip.value,
+  (newValue) => {
+    if (newValue) {
+      popover.control(props.placement, props.offset)
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+    popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
+    emit('change', { show: newValue })
+    emit(`${newValue ? 'open' : 'close'}`)
+  }
+)
+
+onMounted(() => {
+  popover.init(props.placement, props.visibleArrow, selector)
+})
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  popover.showStyle.value = props.modelValue ? 'display: inline-block;' : 'display: none;'
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+/**
+ * 切换 tooltip 的显示状态
+ */
+function toggle() {
+  if (props.disabled) return
+  updateModelValue(!showTooltip.value)
+}
+
+/**
+ * 打开 tooltip
+ */
+function open() {
+  updateModelValue(true)
+}
+
+/**
+ * 关闭 tooltip
+ */
+function close() {
+  updateModelValue(false)
+}
+
+/**
+ * 过渡动画完成后重新测量弹出层尺寸并更新定位
+ */
+function handleAfterEnter() {
+  popover.updatePosition(props.placement, props.offset)
+}
+
+/**
+ * 更新 tooltip 显示状态
+ * @param {boolean} value 显示状态
+ */
+function updateModelValue(value: boolean) {
+  showTooltip.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<TooltipExpose>({
+  open,
+  close,
+  updatePosition: () => popover.updatePosition(props.placement, props.offset)
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-tour/index.scss

@@ -0,0 +1,106 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 层级
+$tour-z-index: var(--wot-tour-z-index, 999) !default;
+// 动画时长
+$tour-animation-duration: var(--wot-tour-animation-duration, 0.3s) !default;
+// 高亮动画时间函数
+$tour-highlight-animation-timing: var(--wot-tour-highlight-animation-timing, ease-in-out) !default;
+// 高亮区域阴影颜色
+$tour-highlight-shadow-color: var(--wot-tour-highlight-shadow-color, $opac-7_55) !default;
+// 弹层层级
+$tour-popover-z-index: var(--wot-tour-popover-z-index, 1000) !default;
+// 弹层最大宽度
+$tour-popover-max-width: var(--wot-tour-popover-max-width, calc($n-1 * 340)) !default;
+// 弹层最小宽度
+$tour-popover-min-width: var(--wot-tour-popover-min-width, calc($n-1 * 200)) !default;
+// 弹层背景色
+$tour-popover-bg: var(--wot-tour-popover-bg, $filled-oppo) !default;
+// 弹层内边距
+$tour-popover-padding: var(--wot-tour-popover-padding, $padding-loose) !default;
+// 弹层圆角
+$tour-popover-radius: var(--wot-tour-popover-radius, $radius-main) !default;
+// 信息框字号
+$tour-info-font-size: var(--wot-tour-info-font-size, $typography-body-size-main) !default;
+// 信息框行高
+$tour-info-line-height: var(--wot-tour-info-line-height, $typography-body-line--height-size-main) !default;
+// 信息框文字颜色
+$tour-info-color: var(--wot-tour-info-color, $text-main) !default;
+// 操作区域上边距
+$tour-buttons-margin-top: var(--wot-tour-buttons-margin-top, $spacing-tight) !default;
+
+@include b(tour) {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: $tour-z-index;
+
+  @include e(mask) {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  @include e(highlight) {
+    position: fixed;
+    background: transparent;
+    box-sizing: content-box;
+    animation: tour-show $tour-animation-duration $tour-highlight-animation-timing;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 0;
+    border-radius: 0;
+    padding: 0;
+
+    @include m(mask) {
+      box-shadow: 0 0 0 100vh $tour-highlight-shadow-color;
+    }
+  }
+
+  @include e(popover) {
+    z-index: $tour-popover-z-index;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: $tour-popover-max-width;
+    text-align: center;
+    transition: $tour-animation-duration all;
+    background-color: $tour-popover-bg;
+    padding: $tour-popover-padding;
+    border-radius: $tour-popover-radius;
+    width: fit-content;
+    min-width: $tour-popover-min-width;
+  }
+
+  @include e(info) {
+    font-size: $tour-info-font-size;
+    line-height: $tour-info-line-height;
+    color: $tour-info-color;
+    width: fit-content;
+    text-align: left;
+    word-break: break-all;
+  }
+
+  @include e(buttons) {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: $tour-buttons-margin-top;
+  }
+}
+
+@keyframes tour-show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}