@tplc/wot 0.0.1

package/components/wd-transition/types.ts

@@ -0,0 +1,89 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type TransitionName =
+  | 'fade'
+  | 'fade-down'
+  | 'fade-left'
+  | 'fade-right'
+  | 'fade-up'
+  | 'slide-down'
+  | 'slide-left'
+  | 'slide-right'
+  | 'slide-up'
+  | 'zoom-in'
+  | 'zoom-out'
+
+export const transitionProps = {
+  ...baseProps,
+
+  /**
+   * 是否展示组件
+   * 类型：boolean
+   * 默认值：false
+   */
+  show: makeBooleanProp(false),
+
+  /**
+   * 动画执行时间
+   * 类型：number | boolean | Record<string, number>
+   * 默认值：300 (毫秒)
+   */
+  duration: {
+    type: [Object, Number, Boolean] as PropType<Record<string, number> | number | boolean>,
+    default: 300,
+  },
+
+  /**
+   * 动画类型
+   * 类型：string
+   * 可选值：fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in
+   * 默认值：'fade'
+   */
+  name: makeStringProp<TransitionName | ''>('fade'),
+
+  /**
+   * 是否延迟渲染子组件
+   * 类型：boolean
+   * 默认值：true
+   */
+  lazyRender: makeBooleanProp(true),
+
+  /**
+   * 进入过渡的开始状态
+   * 类型：string
+   */
+  enterClass: makeStringProp(''),
+
+  /**
+   * 进入过渡的激活状态
+   * 类型：string
+   */
+  enterActiveClass: makeStringProp(''),
+
+  /**
+   * 进入过渡的结束状态
+   * 类型：string
+   */
+  enterToClass: makeStringProp(''),
+
+  /**
+   * 离开过渡的开始状态
+   * 类型：string
+   */
+  leaveClass: makeStringProp(''),
+
+  /**
+   * 离开过渡的激活状态
+   * 类型：string
+   */
+  leaveActiveClass: makeStringProp(''),
+
+  /**
+   * 离开过渡的结束状态
+   * 类型：string
+   */
+  leaveToClass: makeStringProp(''),
+}
+
+export type TransitionProps = ExtractPropTypes<typeof transitionProps>

package/components/wd-transition/wd-transition.vue

@@ -0,0 +1,221 @@
+<template>
+  <view
+    v-if="inited"
+    :class="rootClass"
+    :style="style"
+    @transitionend="onTransitionEnd"
+    @click="handleClick"
+  >
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-transition',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import { isObj, isPromise, requestAnimationFrame } from '../common/util'
+import { transitionProps } from './types'
+import { AbortablePromise } from '../common/AbortablePromise'
+
+const getClassNames = (name?: string) => {
+  if (!name) {
+    return {
+      enter: `${props.enterClass} ${props.enterActiveClass}`,
+      'enter-to': `${props.enterToClass} ${props.enterActiveClass}`,
+      leave: `${props.leaveClass} ${props.leaveActiveClass}`,
+      'leave-to': `${props.leaveToClass} ${props.leaveActiveClass}`,
+    }
+  }
+
+  return {
+    enter: `wd-${name}-enter wd-${name}-enter-active`,
+    'enter-to': `wd-${name}-enter-to wd-${name}-enter-active`,
+    leave: `wd-${name}-leave wd-${name}-leave-active`,
+    'leave-to': `wd-${name}-leave-to wd-${name}-leave-active`,
+  }
+}
+
+const props = defineProps(transitionProps)
+const emit = defineEmits([
+  'click',
+  'before-enter',
+  'enter',
+  'before-leave',
+  'leave',
+  'after-leave',
+  'after-enter',
+])
+
+// 初始化是否完成
+const inited = ref<boolean>(false)
+// 是否显示
+const display = ref<boolean>(false)
+// 当前动画状态
+const status = ref<string>('')
+// 动画是否结束
+const transitionEnded = ref<boolean>(false)
+// 动画持续时间
+const currentDuration = ref<number>(300)
+// 类名
+const classes = ref<string>('')
+// 用于控制enter和leave的顺序执行
+const enterPromise = ref<AbortablePromise<void> | null>(null)
+
+// 动画进入的生命周期
+const enterLifeCyclePromises = ref<AbortablePromise<unknown> | null>(null)
+
+// 动画离开的生命周期
+const leaveLifeCyclePromises = ref<AbortablePromise<unknown> | null>(null)
+
+const style = computed(() => {
+  return `-webkit-transition-duration:${currentDuration.value}ms;transition-duration:${currentDuration.value}ms;${
+    display.value ? '' : 'display: none;'
+  }${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `wd-transition ${props.customClass}  ${classes.value}`
+})
+
+onBeforeMount(() => {
+  if (props.show) {
+    enter()
+  }
+})
+
+watch(
+  () => props.show,
+  (newVal) => {
+    handleShow(newVal)
+  },
+  { deep: true },
+)
+
+function handleClick() {
+  emit('click')
+}
+
+function handleShow(value: boolean) {
+  if (value) {
+    handleAbortPromise()
+    enter()
+  } else {
+    leave()
+  }
+}
+/**
+ * 取消所有的promise
+ */
+function handleAbortPromise() {
+  isPromise(enterPromise.value) && enterPromise.value.abort()
+  isPromise(enterLifeCyclePromises.value) && enterLifeCyclePromises.value.abort()
+  isPromise(leaveLifeCyclePromises.value) && leaveLifeCyclePromises.value.abort()
+  enterPromise.value = null
+  enterLifeCyclePromises.value = null
+  leaveLifeCyclePromises.value = null
+}
+
+function enter() {
+  enterPromise.value = new AbortablePromise(async (resolve) => {
+    try {
+      const classNames = getClassNames(props.name)
+      const duration = isObj(props.duration) ? (props.duration as any).enter : props.duration
+      status.value = 'enter'
+      emit('before-enter')
+      enterLifeCyclePromises.value = requestAnimationFrame()
+      await enterLifeCyclePromises.value
+      emit('enter')
+      classes.value = classNames.enter
+      currentDuration.value = duration
+      enterLifeCyclePromises.value = requestAnimationFrame()
+      await enterLifeCyclePromises.value
+      inited.value = true
+      display.value = true
+      enterLifeCyclePromises.value = requestAnimationFrame()
+      await enterLifeCyclePromises.value
+      enterLifeCyclePromises.value = null
+      transitionEnded.value = false
+      classes.value = classNames['enter-to']
+      resolve()
+    } catch (error) {
+      /**
+       *
+       */
+    }
+  })
+}
+async function leave() {
+  if (!enterPromise.value) {
+    transitionEnded.value = false
+    return onTransitionEnd()
+  }
+  try {
+    await enterPromise.value
+    if (!display.value) return
+    const classNames = getClassNames(props.name)
+    const duration = isObj(props.duration) ? (props.duration as any).leave : props.duration
+    status.value = 'leave'
+    emit('before-leave')
+    currentDuration.value = duration
+    leaveLifeCyclePromises.value = requestAnimationFrame()
+    await leaveLifeCyclePromises.value
+    emit('leave')
+    classes.value = classNames.leave
+    leaveLifeCyclePromises.value = requestAnimationFrame()
+    await leaveLifeCyclePromises.value
+    transitionEnded.value = false
+    classes.value = classNames['leave-to']
+    leaveLifeCyclePromises.value = setPromise(currentDuration.value)
+    await leaveLifeCyclePromises.value
+    leaveLifeCyclePromises.value = null
+    onTransitionEnd()
+    enterPromise.value = null
+  } catch (error) {
+    /**
+     *
+     */
+  }
+}
+
+/**
+ * 定时器promise化
+ * @param duration 持续时间ms
+ */
+function setPromise(duration: number) {
+  return new AbortablePromise<void>((resolve) => {
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      resolve()
+    }, duration)
+  })
+}
+function onTransitionEnd() {
+  if (transitionEnded.value) return
+
+  transitionEnded.value = true
+  if (status.value === 'leave') {
+    // 离开后触发
+    emit('after-leave')
+  } else if (status.value === 'enter') {
+    // 进入后触发
+    emit('after-enter')
+  }
+
+  if (!props.show && display.value) {
+    display.value = false
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-upload/index.scss

@@ -0,0 +1,173 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/_mixin';
+
+.wot-theme-dark {
+  @include b(upload) {
+    @include e(evoke) {
+      color: $-dark-color3;
+      background-color: $-dark-background4;
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(file) {
+      background-color: $-dark-background4;
+    }
+
+    @include e(file-name) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(upload) {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  @include e(evoke) {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: $-upload-size;
+    height: $-upload-size;
+    margin-bottom: 12px;
+    font-size: $-upload-evoke-icon-size;
+    color: $-upload-evoke-color;
+    background-color: $-upload-evoke-bg;
+
+    @include when(disabled) {
+      color: $-upload-evoke-disabled-color;
+    }
+  }
+
+  @include e(evoke-num) {
+    margin-top: 8px;
+    font-size: 14px;
+    line-height: 14px;
+  }
+
+  @include edeep(evoke-icon) {
+    width: 32px;
+    height: 32px;
+  }
+
+  @include e(input) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    opacity: 0;
+  }
+
+  @include e(preview) {
+    position: relative;
+    width: $-upload-size;
+    height: $-upload-size;
+    margin: 0 12px 12px 0;
+  }
+
+  @include e(preview-list) {
+    display: flex;
+  }
+
+  @include e(picture, file, video) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(file, video) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: $-upload-evoke-bg;
+  }
+
+  @include e(video-icon, file-icon) {
+    font-size: $-upload-cover-icon-size;
+  }
+
+  @include e(file-name, video-name) {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 4px;
+    margin-top: 8px;
+    font-size: $-upload-file-fs;
+    color: $-upload-file-color;
+    text-align: center;
+    @include lineEllipsis();
+  }
+
+  @include edeep(video-paly) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-size: 24px;
+    color: $-color-white;
+    transform: translate(-50%, -50%);
+
+    &::before {
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+    }
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: calc($-upload-close-icon-size / 2 * -1);
+    right: calc($-upload-close-icon-size / 2 * -1);
+    z-index: 1;
+    width: $-upload-close-icon-size;
+    height: $-upload-close-icon-size;
+    font-size: $-upload-close-icon-size;
+    color: $-upload-close-icon-color;
+
+    &::after {
+      position: absolute;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      content: '';
+      background-color: $-color-white;
+      border-radius: 50%;
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: $-upload-preview-name-bg;
+  }
+
+  @include e(progress-txt) {
+    margin-top: 9px;
+    font-size: $-upload-progress-fs;
+    line-height: $-upload-progress-fs;
+    color: $-color-white;
+  }
+
+  @include edeep(icon) {
+    font-size: $-upload-preview-icon-size;
+    color: $-color-white;
+  }
+
+  @include e(status-content) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+}