@tplc/wot 0.0.1

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

@@ -0,0 +1,212 @@
+<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"
+      />
+      <view
+        class="wd-toast__iconWrap wd-toast__icon"
+        v-else-if="
+          iconName === 'success' ||
+          iconName === 'warning' ||
+          iconName === 'info' ||
+          iconName === 'error'
+        "
+      >
+        <view class="wd-toast__iconBox">
+          <view class="wd-toast__iconSvg" :style="svgStyle"></view>
+        </view>
+      </view>
+      <wd-icon
+        v-else-if="iconClass"
+        custom-class="wd-toast__icon"
+        :size="iconSize"
+        :class-prefix="classPrefix"
+        :name="iconClass"
+      ></wd-icon>
+      <!--文本-->
+      <view v-if="msg" class="wd-toast__msg">{{ msg }}</view>
+    </view>
+  </wd-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-toast',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import base64 from '../common/base64'
+import { defaultOptions, toastDefaultOptionKey, toastIcon } from '../wd-toast'
+import { toastProps, type ToastLoadingType, type ToastOptions } 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>('outline')
+const loadingColor = ref<string>('#4D80F0')
+const iconSize = ref<string>() // 图标大小
+const loadingSize = ref<string>() // loading大小
+const svgStr = ref<string>('') // 图标
+const cover = ref<boolean>(false) // 是否存在遮罩层
+const classPrefix = ref<string>('wd-icon') // 图标前缀
+const iconClass = ref<string>('') // 图标类名
+
+let opened: (() => void) | null = null
+
+let closed: (() => void) | null = null
+
+const toastOptionKey = props.selector
+  ? toastDefaultOptionKey + props.selector
+  : toastDefaultOptionKey
+const toastOption = inject(toastOptionKey, ref<ToastOptions>(defaultOptions)) // toast选项
+
+// 监听options变化展示
+watch(
+  () => toastOption.value,
+  (newVal: ToastOptions) => {
+    reset(newVal)
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+)
+
+// 监听options变化展示
+watch(
+  () => iconName.value,
+  () => {
+    buildSvg()
+  },
+  {
+    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',
+  }
+  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' : ''}`
+})
+
+const svgStyle = computed(() => {
+  const style: CSSProperties = {
+    backgroundImage: `url(${svgStr.value})`,
+  }
+  if (isDef(iconSize.value)) {
+    style.width = iconSize.value
+    style.height = iconSize.value
+  }
+  return objToStyle(style)
+})
+
+onBeforeMount(() => {
+  buildSvg()
+})
+
+function handleAfterEnter() {
+  if (isFunction(opened)) {
+    opened()
+  }
+}
+
+function handleAfterLeave() {
+  if (isFunction(closed)) {
+    closed()
+  }
+}
+
+function buildSvg() {
+  if (
+    iconName.value !== 'success' &&
+    iconName.value !== 'warning' &&
+    iconName.value !== 'info' &&
+    iconName.value !== 'error'
+  )
+    return
+  const iconSvg = toastIcon[iconName.value]()
+  const iconSvgStr = `"data:image/svg+xml;base64,${base64(iconSvg)}"`
+  svgStr.value = iconSvgStr
+}
+
+/**
+ * 重置toast选项值
+ * @param option toast选项值
+ */
+function reset(option: ToastOptions) {
+  if (option) {
+    show.value = isDef(option.show) ? option.show : false
+
+    if (show.value) {
+      iconName.value = isDef(option.iconName!) ? option.iconName! : ''
+      iconClass.value = isDef(option.iconClass!) ? option.iconClass! : ''
+      msg.value = isDef(option.msg!) ? option.msg! : ''
+      position.value = isDef(option.position!) ? option.position! : 'middle'
+      zIndex.value = isDef(option.zIndex!) ? option.zIndex! : 100
+      loadingType.value = isDef(option.loadingType!) ? option.loadingType! : 'outline'
+      loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : '#4D80F0'
+      iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : option.iconSize
+      loadingSize.value = isDef(option.loadingSize)
+        ? addUnit(option.loadingSize)
+        : option.loadingSize
+      cover.value = isDef(option.cover!) ? option.cover! : false
+      classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : 'wd-icon'
+      closed = isFunction(option.closed) ? option.closed : null
+      opened = isFunction(option.opened) ? option.opened : null
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-tooltip/index.scss

@@ -0,0 +1,61 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(tooltip) {
+    @include e(pos) {
+      color: $-tooltip-color;
+      background: $-dark-background4;
+    }
+
+    @include triangleArrow($-tooltip-arrow-size, $-dark-background4);
+  }
+}
+
+@include b(tooltip) {
+  position: relative;
+  display: inline-block;
+
+  @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);
+    border-radius: $-tooltip-radius;
+  }
+
+  @include e(hidden) {
+    bottom: -100vh;
+    left: -100vw;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    font-size: $-tooltip-fs;
+    line-height: $-tooltip-line-height;
+  }
+
+  @include e(inner) {
+    padding: $-tooltip-padding;
+    line-height: $-tooltip-line-height;
+    white-space: nowrap;
+  }
+
+  @include edeep(close-icon) {
+    position: absolute;
+    top: -10px;
+    right: -8px;
+    padding: 10px;
+    font-size: 12px;
+    transform: scale(0.5);
+  }
+
+  @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
+}

package/components/wd-tooltip/types.ts

@@ -0,0 +1,102 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type PlacementType =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+
+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
+   * 默认值：0
+   */
+  offset: makeNumberProp(0),
+
+  /**
+   * 是否使用slot来传入content内容
+   * 类型：boolean
+   * 默认值：false
+   */
+  useContentSlot: makeBooleanProp(false),
+
+  /**
+   * Tooltip是否可用
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 是否显示Tooltip内部的关闭按钮
+   * 类型：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
+}
+
+export type TooltipInstance = ComponentPublicInstance<TooltipProps, TooltipExpose>

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

@@ -0,0 +1,167 @@
+<template>
+  <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"
+    >
+      <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="!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-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,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+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()
+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 ? 'opacity: 1;' : 'opacity: 0;'
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function toggle() {
+  if (props.disabled) return
+  updateModelValue(!showTooltip.value)
+}
+
+function open() {
+  updateModelValue(true)
+}
+
+function close() {
+  updateModelValue(false)
+}
+
+function updateModelValue(value: boolean) {
+  showTooltip.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<TooltipExpose>({
+  open,
+  close,
+})
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-transition/index.scss

@@ -0,0 +1,91 @@
+.wd-transition {
+  transition-timing-function: ease;
+}
+
+.wd-fade-enter-active,
+.wd-fade-leave-active {
+  transition-property: opacity;
+}
+
+.wd-fade-enter,
+.wd-fade-leave-to {
+  opacity: 0;
+}
+
+.wd-fade-up-enter-active,
+.wd-fade-up-leave-active,
+.wd-fade-down-enter-active,
+.wd-fade-down-leave-active,
+.wd-fade-left-enter-active,
+.wd-fade-left-leave-active,
+.wd-fade-right-enter-active,
+.wd-fade-right-enter-active {
+  transition-property: opacity, transform;
+}
+
+.wd-fade-up-enter,
+.wd-fade-up-leave-to {
+  opacity: 0;
+  transform: translate3d(0, 100%, 0);
+}
+
+.wd-fade-down-enter,
+.wd-fade-down-leave-to {
+  opacity: 0;
+  transform: translate3d(0, -100%, 0);
+}
+
+.wd-fade-left-enter,
+.wd-fade-left-leave-to {
+  opacity: 0;
+  transform: translate3d(-100%, 0, 0);
+}
+
+.wd-fade-right-enter,
+.wd-fade-right-leave-to {
+  opacity: 0;
+  transform: translate3d(100%, 0, 0);
+}
+
+.wd-slide-up-enter-active,
+.wd-slide-up-leave-active,
+.wd-slide-down-enter-active,
+.wd-slide-down-leave-active,
+.wd-slide-left-enter-active,
+.wd-slide-left-leave-active,
+.wd-slide-right-enter-active,
+.wd-slide-right-enter-active {
+  transition-property: transform;
+}
+
+.wd-slide-up-enter,
+.wd-slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.wd-slide-down-enter,
+.wd-slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.wd-slide-left-enter,
+.wd-slide-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.wd-slide-right-enter,
+.wd-slide-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: scale(0.7);
+}