@tplc/wot 0.0.1

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

@@ -0,0 +1,142 @@
+<template>
+  <view :style="{ height: addUnit(height) }">
+    <view
+      :class="`wd-navbar ${customClass} ${fixed ? 'is-fixed' : ''} ${bordered ? 'is-border' : ''}`"
+      :style="rootStyle"
+    >
+      <view class="wd-navbar__content">
+        <view class="wd-navbar__capsule" v-if="$slots.capsule">
+          <slot name="capsule" />
+        </view>
+
+        <view
+          :class="`wd-navbar__left ${leftDisabled ? 'is-disabled' : ''}`"
+          :hover-class="leftDisabled || $slots.left ? '' : 'wd-navbar__left--hover'"
+          hover-stay-time="70"
+          @click="handleClickLeft"
+          v-else-if="!$slots.left"
+        >
+          <wd-icon v-if="leftArrow" name="arrow-left" custom-class="wd-navbar__arrow" />
+          <view v-if="leftText" class="wd-navbar__text">{{ leftText }}</view>
+        </view>
+
+        <view
+          v-else
+          :class="`wd-navbar__left ${leftDisabled ? 'is-disabled' : ''}`"
+          @click="handleClickLeft"
+        >
+          <slot name="left" />
+        </view>
+
+        <view class="wd-navbar__title">
+          <slot name="title" />
+          <block v-if="!$slots.title && title">{{ title }}</block>
+        </view>
+        <view
+          :class="`wd-navbar__right ${rightDisabled ? 'is-disabled' : ''}`"
+          @click="handleClickRight"
+          v-if="$slots.right || rightText"
+          :hover-class="rightDisabled ? '' : 'wd-navbar__right--hover'"
+          hover-stay-time="70"
+        >
+          <slot name="right" />
+
+          <view
+            v-if="!$slots.right && rightText"
+            class="wd-navbar__text"
+            hover-class="wd-navbar__text--hover"
+            hover-stay-time="70"
+          >
+            {{ rightText }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-navbar',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import {
+  type CSSProperties,
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+} from 'vue'
+import { getRect, addUnit, isDef, objToStyle } from '../common/util'
+import { navbarProps } from './types'
+
+const props = defineProps(navbarProps)
+const emit = defineEmits(['click-left', 'click-right'])
+
+const height = ref<number | ''>('') // 占位高度
+
+const { statusBarHeight } = uni.getSystemInfoSync()
+
+watch(
+  [() => props.fixed, () => props.placeholder],
+  () => {
+    setPlaceholderHeight()
+  },
+  { deep: true, immediate: false },
+)
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.fixed && isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  if (props.safeAreaInsetTop) {
+    style['padding-top'] = addUnit(statusBarHeight || 0)
+  }
+  return `${objToStyle(style)};${props.customStyle}`
+})
+
+onMounted(() => {
+  if (props.fixed && props.placeholder) {
+    nextTick(() => {
+      setPlaceholderHeight()
+    })
+  }
+})
+
+function handleClickLeft() {
+  if (!props.leftDisabled) {
+    emit('click-left')
+  }
+}
+
+function handleClickRight() {
+  if (!props.rightDisabled) {
+    emit('click-right')
+  }
+}
+
+const { proxy } = getCurrentInstance() as any
+
+function setPlaceholderHeight() {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.wd-navbar', false, proxy).then((res) => {
+    height.value = res.height as number
+  })
+}
+</script>
+
+<style lang="scss">
+@import './index';
+</style>

package/components/wd-navbar-capsule/index.scss

@@ -0,0 +1,65 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(navbar-capsule) {
+    &::before {
+      border: 2rpx solid $-dark-border-color;
+    }
+
+    &::after {
+      background: $-dark-border-color;
+    }
+
+    :deep(.wd-navbar-capsule__icon) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(navbar-capsule) {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $-navbar-capsule-width;
+  height: $-navbar-capsule-height;
+
+  &::before {
+    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;
+  }
+
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 1px;
+    height: 36rpx;
+    content: '';
+    background: $-navbar-capsule-border-color;
+    transform: translateY(-50%);
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  @include edeep(icon) {
+    position: relative;
+    flex: 1;
+    font-size: $-navbar-capsule-icon-size;
+    color: $-navbar-desc-font-color;
+  }
+}

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

@@ -0,0 +1,31 @@
+<template>
+  <view class="wd-navbar-capsule">
+    <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>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-navbar-capsule',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+const emit = defineEmits(['back', 'back-home'])
+
+function handleBack() {
+  emit('back')
+}
+function handleBackHome() {
+  emit('back-home')
+}
+</script>
+
+<style lang="scss">
+@import './index';
+</style>

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

@@ -0,0 +1,86 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(notice-bar) {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: $-notice-bar-padding;
+  font-size: $-notice-bar-fs;
+  border-radius: $-notice-bar-border-radius;
+  @include when(warning) {
+    color: $-notice-bar-warning-color;
+    background: $-notice-bar-warning-bg;
+  }
+  @include when(info) {
+    color: $-notice-bar-info-color;
+    background: $-notice-bar-info-bg;
+  }
+  @include when(danger) {
+    color: $-notice-bar-danger-color;
+    background: $-notice-bar-danger-bg;
+  }
+  @include edeep(prefix) {
+    padding-right: 4px;
+    font-size: $-notice-bar-prefix-size;
+  }
+
+  @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;
+    background-color: $-notice-bar-close-bg;
+    border-radius: 0px 8px 0px 4px;
+  }
+  @include e(wrap) {
+    position: relative;
+    flex: 1;
+    height: $-notice-bar-line-height;
+    overflow: hidden;
+    line-height: $-notice-bar-line-height;
+  }
+  @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 {
+      position: static;
+      @include lineEllipsis;
+    }
+  }
+  @include m(wrap) {
+    .wd-notice-bar__wrap {
+      height: auto;
+    }
+    .wd-notice-bar__content {
+      position: static;
+      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

@@ -0,0 +1,56 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type NoticeBarType = 'warning' | 'info' | 'danger' | ''
+export type NoticeBarScrollDirection = 'horizontal' | 'vertical'
+
+export const noticeBarProps = {
+  ...baseProps,
+  /**
+   * 设置通知栏文案
+   */
+  text: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '',
+  },
+  /**
+   * 设置通知栏类型，可选值为：'warning' | 'info' | 'danger'
+   */
+  type: makeStringProp<NoticeBarType>('warning'),
+  /**
+   * 是否可滚动
+   */
+  scrollable: makeBooleanProp(true),
+  /**
+   * 滚动延迟时间（秒）
+   */
+  delay: makeNumberProp(1),
+  /**
+   * 滚动速度（px/s）
+   */
+  speed: makeNumberProp(50),
+  /**
+   * 是否可关闭
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 是否换行显示
+   */
+  wrapable: makeBooleanProp(false),
+  /**
+   * 设置左侧图标，使用 icon 章节中的图标名
+   */
+  prefix: String,
+  /**
+   * 文字、图标颜色
+   */
+  color: String,
+  /**
+   * 背景颜色
+   */
+  backgroundColor: String,
+  /**
+   * 滚动方向
+   */
+  direction: makeStringProp<NoticeBarScrollDirection>('horizontal'),
+}

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

@@ -0,0 +1,223 @@
+<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>
+    <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>
+<script lang="ts">
+export default {
+  name: 'wd-notice-bar',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, watch, nextTick, computed, getCurrentInstance, type CSSProperties } from 'vue'
+import { getRect, isArray, isDef, objToStyle } from '../common/util'
+import { noticeBarProps } from './types'
+
+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 animation = ref<string>('')
+const currentIndex = ref(0)
+const textArray = computed(() => (Array.isArray(props.text) ? props.text : [props.text]))
+const currentText = computed(() => textArray.value[currentIndex.value])
+const verticalIndex = ref(0)
+const isHorizontal = computed(() => props.direction === 'horizontal')
+const isVertical = computed(() => props.direction === 'vertical')
+
+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
+
+  const 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],
+  () => {
+    nextTick(() => scroll())
+  },
+  { deep: true, immediate: true },
+)
+
+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 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)
+  animation.value = initAnimation({
+    duration: height / (textArray.value.length + 1) / props.speed,
+    delay: props.delay,
+    translate,
+  })
+}
+
+async function scroll() {
+  const [wrapRect, contentRect] = await queryRect()
+  if (!wrapRect.width || !contentRect.width || !contentRect.height) return
+
+  wrapWidth.value = wrapRect.width
+
+  if (isHorizontal.value) {
+    if (props.scrollable) {
+      animation.value = initAnimation({
+        duration: contentRect.width / props.speed,
+        delay: props.delay,
+        translate: -contentRect.width,
+      })
+    }
+  } else {
+    if (textArray.value.length > 1) {
+      verticalAnimate(contentRect.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) {
+    animation.value = initAnimation({
+      duration: 0,
+      delay: 0,
+      translate: wrapWidth.value + 1, // +1容错空间，防止露出来一丢丢
+    })
+  } else {
+    if (++verticalIndex.value >= textArray.value.length) {
+      verticalIndex.value = 0
+      animation.value = initAnimation({
+        duration: 0,
+        delay: 0,
+        translate: 0,
+      })
+    }
+  }
+
+  const timer = setTimeout(() => {
+    next() // 更换下一条文本
+
+    nextTick(async () => {
+      // 因为文本会发生变化，所以每一次都需要查询
+      const [_, contentRect] = await queryRect()
+      if (!contentRect.width || !contentRect.height) return
+
+      if (isHorizontal.value) {
+        animation.value = initAnimation({
+          duration: (wrapWidth.value + contentRect.width) / props.speed,
+          delay: props.delay,
+          translate: -contentRect.width,
+        })
+      } else {
+        verticalAnimate(contentRect.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)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/wd-notify/index.scss

@@ -0,0 +1,34 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(notify) {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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;
+
+  @include m(primary) {
+    background: $-notify-primary-background;
+  }
+
+  @include m(success) {
+    background: $-notify-success-background;
+  }
+
+  @include m(danger) {
+    background: $-notify-danger-background;
+  }
+
+  @include m(warning) {
+    background: $-notify-warning-background;
+  }
+}

package/components/wd-notify/index.ts

@@ -0,0 +1,59 @@
+import { provide, reactive } 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__'
+export const setNotifyDefaultOptions = (options: NotifyProps) => {
+  currentOptions = deepMerge(currentOptions, options) as NotifyProps
+}
+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
+
+    Object.assign(notifyOption, options, { visible: true })
+    if (notifyOption.duration && notifyOption.duration > 0) {
+      timer && clearTimeout(timer)
+      timer = setTimeout(() => closeNotify(), options.duration)
+    }
+  }
+  const closeNotify = () => {
+    timer && clearTimeout(timer)
+    notifyOption.visible = false
+  }
+
+  // provide
+  provide(getNotifyOptionKey(selector), notifyOption)
+
+  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,
+  }
+}