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

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

@@ -0,0 +1,270 @@
+<template>
+  <view v-if="show" :class="`wd-notice-bar ${customClass} ${noticeBarClass}`" :style="rootStyle">
+    <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">
+        <template v-if="isVertical">
+          <view v-for="item in textArray" :key="item">{{ item }}</view>
+          <view v-if="textArray.length > 1">{{ textArray[0] }}</view>
+        </template>
+        <slot v-else>{{ currentText }}</slot>
+      </view>
+    </view>
+    <slot name="suffix">
+      <wd-icon v-if="closable" custom-class="wd-notice-bar__suffix" name="close" @click="handleClose"></wd-icon>
+    </slot>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-notice-bar',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+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 { type NoticeBarExpose, noticeBarProps } from './types'
+import { onHide, onShow } from '@dcloudio/uni-app'
+const $wrap = '.wd-notice-bar__wrap'
+const $content = '.wd-notice-bar__content'
+
+const props = defineProps(noticeBarProps)
+const emit = defineEmits(['close', 'next', 'click'])
+
+const wrapWidth = ref<number>(0)
+const show = ref<boolean>(true)
+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<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)) {
+    style.color = props.color
+  }
+
+  if (isDef(props.backgroundColor)) {
+    style.background = props.backgroundColor
+  }
+
+  return `${objToStyle(style)}${props.customStyle}`
+})
+const noticeBarClass = computed(() => {
+  const { type, wrapable, scrollable } = props
+
+  let noticeBarClasses: string[] = []
+  type && noticeBarClasses.push(`is-${type}`)
+
+  if (isHorizontal.value) {
+    !wrapable && !scrollable && noticeBarClasses.push('wd-notice-bar--ellipse')
+  } else {
+    noticeBarClasses.push('wd-notice-bar--ellipse')
+  }
+
+  wrapable && !scrollable && noticeBarClasses.push('wd-notice-bar--wrap')
+  return noticeBarClasses.join(' ')
+})
+
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.text,
+  () => {
+    reset()
+  },
+  { 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
+})
+
+onShow(() => {
+  startTransition()
+})
+
+onHide(() => {
+  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 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() {
+  return Promise.all([getRect($wrap, false, proxy), getRect($content, false, proxy)])
+}
+
+async function verticalAnimate(height: number) {
+  const translate = -(height / (textArray.value.length + 1)) * (currentIndex.value + 1)
+  setTransition({
+    duration: height / (textArray.value.length + 1) / props.speed,
+    delay: props.delay,
+    translate
+  })
+}
+
+async function scroll() {
+  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) {
+      setTransition({
+        duration: cRect.width / props.speed,
+        delay: props.delay,
+        translate: -cRect.width
+      })
+    }
+  } else {
+    if (textArray.value.length > 1) {
+      verticalAnimate(cRect.height)
+    }
+  }
+}
+
+function next() {
+  if (currentIndex.value >= textArray.value.length - 1) {
+    currentIndex.value = 0
+  } else {
+    currentIndex.value++
+  }
+  emit('next', currentIndex.value)
+}
+
+function animationEnd() {
+  if (isHorizontal.value) {
+    setTransition({
+      duration: 0,
+      delay: 0,
+      translate: wrapWidth.value + 1
+    })
+  } else {
+    if (++verticalIndex.value >= textArray.value.length) {
+      verticalIndex.value = 0
+      setTransition({
+        duration: 0,
+        delay: 0,
+        translate: 0
+      })
+    }
+  }
+
+  const timer = setTimeout(() => {
+    next() // 更换下一条文本
+
+    nextTick(async () => {
+      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) {
+        setTransition({
+          duration: (wrapWidth.value + contentRect.value.width) / props.speed,
+          delay: props.delay,
+          translate: -contentRect.value.width
+        })
+      } else {
+        verticalAnimate(contentRect.value.height)
+      }
+    })
+
+    clearTimeout(timer)
+  }, 20)
+}
+
+function handleClick() {
+  const result = isArray(props.text)
+    ? {
+        index: currentIndex.value,
+        text: props.text[currentIndex.value]
+      }
+    : {
+        index: 0,
+        text: props.text
+      }
+  emit('click', result)
+}
+
+defineExpose<NoticeBarExpose>({ reset })
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-notify/index.scss

@@ -0,0 +1,114 @@
+@use "sass:map";
+@use '../../styles/variable.scss'as *;
+@use '../../styles/mixin/mixin.scss'as *;
+
+// 通知文字颜色
+$notify-text-color: var(--wot-notify-text-color, $text-white) !default;
+// 通知内边距
+$notify-padding: var(--wot-notify-padding, $padding-tight $padding-loose) !default;
+// 通知文字字号
+$notify-font-size: var(--wot-notify-font-size, $typography-body-size-large) !default;
+// 通知文字行高
+$notify-line-height: var(--wot-notify-line-height, $typography-body-line--height-size-large) !default;
+// 主色态背景色
+$notify-primary-bg: var(--wot-notify-primary-bg, $primary-1) !default;
+// 主色态文字颜色
+$notify-primary-color: var(--wot-notify-primary-color, $primary-6) !default;
+// 成功态背景色
+$notify-success-bg: var(--wot-notify-success-bg, $success-surface) !default;
+// 成功态文字颜色
+$notify-success-color: var(--wot-notify-success-color, $success-main) !default;
+// 危险态背景色
+$notify-danger-bg: var(--wot-notify-danger-bg, $danger-surface) !default;
+// 危险态文字颜色
+$notify-danger-color: var(--wot-notify-danger-color, $danger-main) !default;
+// 警告态背景色
+$notify-warning-bg: var(--wot-notify-warning-bg, $warning-surface) !default;
+// 警告态文字颜色
+$notify-warning-color: var(--wot-notify-warning-color, $warning-main) !default;
+// 图标尺寸
+$notify-icon-size: var(--wot-notify-icon-size, $n-18) !default;
+// 图标间距
+$notify-icon-spacing: var(--wot-notify-icon-spacing, $spacing-tight) !default;
+// floating 变体背景色
+$notify-floating-bg: var(--wot-notify-floating-bg, $base-white) !default;
+// floating 变体文字颜色
+$notify-floating-color: var(--wot-notify-floating-color, $text-main) !default;
+// floating 变体圆角
+$notify-floating-radius: var(--wot-notify-floating-radius, $radius-large) !default;
+// floating 变体左右间距
+$notify-floating-margin-horizontal: var(--wot-notify-floating-margin-horizontal, $spacing-loose) !default;
+// floating 变体上下间距
+$notify-floating-margin-vertical: var(--wot-notify-floating-margin-vertical, $spacing-loose) !default;
+// floating 变体阴影
+$notify-floating-shadow: var(--wot-notify-floating-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;
+
+// 通知类型配置映射
+$notify-types: ("primary": ("bg": $notify-primary-bg,
+    "color": $notify-primary-color),
+  "success": ("bg": $notify-success-bg,
+    "color": $notify-success-color),
+  "danger": ("bg": $notify-danger-bg,
+    "color": $notify-danger-color),
+  "warning": ("bg": $notify-warning-bg,
+    "color": $notify-warning-color));
+
+@include b(notify) {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: $notify-padding;
+  font-size: $notify-font-size;
+  line-height: $notify-line-height;
+  color: $notify-text-color;
+
+  @each $type,
+  $conf in $notify-types {
+    @include m($type) {
+      background: map.get($conf, "bg");
+      color: map.get($conf, "color");
+
+      &.wd-notify--floating {
+        :deep() {
+          .wd-notify__prefix {
+            color: map.get($conf, "color");
+          }
+        }
+      }
+    }
+  }
+
+  @include m(floating) {
+    background: $notify-floating-bg;
+    color: $notify-floating-color;
+    border-radius: $notify-floating-radius;
+    box-shadow: $notify-floating-shadow;
+
+    &.wd-notify--top {
+      margin-top: $notify-floating-margin-vertical;
+    }
+
+    &.wd-notify--bottom {
+      margin-bottom: $notify-floating-margin-vertical;
+    }
+  }
+
+  @include e(prefix) {
+    font-size: $notify-icon-size;
+    margin-right: $notify-icon-spacing;
+    flex: 0 0 auto;
+  }
+
+  @include e(close) {
+    font-size: $notify-icon-size;
+    margin-left: $notify-icon-spacing;
+    flex: 0 0 auto;
+    cursor: pointer;
+  }
+
+  @include e(content) {
+    flex: 1 1 auto;
+    @include lineEllipsis;
+  }
+}

package/components/wd-notify/index.ts

@@ -0,0 +1,63 @@
+import { inject, provide, 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
+}
+export const resetNotifyDefaultOptions = () => {
+  currentOptions = getDefaultOptions()
+}
+export const useNotify = (selector: string = '') => {
+  const notifyOptionKey = getNotifyOptionKey(selector)
+
+  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)
+    if (notifyOption.value !== None) {
+      notifyOption.value.visible = false
+    }
+  }
+
+  return {
+    showNotify,
+    closeNotify
+  }
+}
+export const getNotifyOptionKey = (selector: string) => {
+  return selector ? `${notifyDefaultOptionKey}${selector}` : notifyDefaultOptionKey
+}
+
+function getDefaultOptions(): NotifyProps {
+  return {
+    type: 'danger',
+    color: undefined,
+    zIndex: 99,
+    message: '',
+    duration: 3000,
+    position: 'top',
+    safeHeight: undefined,
+    background: undefined,
+    onClick: undefined,
+    onClosed: undefined,
+    onOpened: undefined,
+    closable: false,
+    variant: 'filled'
+  }
+}

package/components/wd-notify/types.ts

@@ -0,0 +1,130 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+/**
+ * notify 通知类型
+ */
+export type NotifyType = 'primary' | 'success' | 'danger' | 'warning'
+/**
+ * notify 弹出位置
+ */
+export type NotifyPosition = 'top' | 'bottom'
+/**
+ * notify 展示形态
+ */
+export type NotifyVariant = 'filled' | 'floating'
+/**
+ * notify 属性定义
+ */
+export type NotifyProps = Omit<Partial<ExtractPropTypes<typeof notifyProps>>, 'selector'> & {
+  /**
+   * 点击时的回调函数
+   * @param {MouseEvent} event 鼠标事件
+   */
+  onClick?: (event: MouseEvent) => void
+  /**
+   * 关闭时的回调函数
+   */
+  onClosed?: () => void
+  /**
+   * 打开时的回调函数
+   */
+  onOpened?: () => void
+}
+/**
+ * notify 主题变量
+ */
+export type NotifyThemeVars = {
+  notifyPadding?: string
+  notifyFontSize?: string
+  notifyTextColor?: string
+  notifyLineHeight?: number | string
+  notifyDangerBackground?: string
+  notifyPrimaryBackground?: string
+  notifySuccessBackground?: string
+  notifyWarningBackground?: string
+}
+export const notifyProps = {
+  ...baseProps,
+  /**
+   * 类型
+   * 类型: string
+   * 可选值: 'primary' | 'success' | 'danger' | 'warning'
+   * 默认值: 'danger'
+   */
+  type: makeStringProp<NotifyType>('danger'),
+  /**
+   * 字体颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  color: makeStringProp(''),
+  /**
+   * 将组件的 z-index 层级设置为一个固定值
+   * 类型: number
+   * 默认值: 99
+   */
+  zIndex: makeNumberProp(99),
+  /**
+   * 显示状态
+   * 类型: boolean
+   * 默认值: false
+   */
+  visible: makeBooleanProp(false),
+  /**
+   * 展示文案，支持通过\n换行
+   * 类型: string | number
+   * 默认值: ''
+   */
+  message: makeNumericProp(''),
+  /**
+   * 指定唯一标识
+   * 类型: string
+   * 默认值: ''
+   */
+  selector: makeStringProp(''),
+  /**
+   * 展示时长(ms)，值为 0 时，notify 不会消失
+   * 类型: number
+   * 默认值: 3000
+   */
+  duration: makeNumberProp(3000),
+  /**
+   * 弹出位置
+   * 类型: string
+   * 可选值: 'top' | 'bottom'
+   * 默认值: 'top'
+   */
+  position: makeStringProp<NotifyPosition>('top'),
+  /**
+   * 顶部安全高度
+   * 类型: number
+   * 默认值: -
+   */
+  safeHeight: Number,
+  /**
+   * 背景颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  background: makeStringProp(''),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   * 类型: boolean
+   * 默认值: false
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 是否显示关闭按钮
+   * 类型: boolean
+   * 默认值: false
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 展示形态
+   * 类型: string
+   * 可选值: 'filled' | 'floating'
+   * 默认值: 'filled'
+   */
+  variant: makeStringProp<NotifyVariant>('filled')
+}