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

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

@@ -0,0 +1,238 @@
+<template>
+  <view
+    :class="rootClass"
+    :style="style"
+    @transitionend="onTransitionEnd"
+    @click="handleClick"
+    @touchmove.stop.prevent="noop"
+    v-if="isShow && disableTouchMove"
+  >
+    <slot />
+  </view>
+  <view :class="rootClass" :style="style" @transitionend="onTransitionEnd" @click="handleClick" v-else-if="isShow && !disableTouchMove">
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-transition',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import { isObj, isPromise, pause } from '../../common/util'
+import { transitionProps, type TransitionName } from './types'
+import { AbortablePromise } from '../../common/AbortablePromise'
+
+const getClassNames = (name?: TransitionName | TransitionName[]) => {
+  const transitionClass = (transitionName: string, phase: string) => {
+    return `wd-transition--${transitionName}-${phase}`
+  }
+
+  let enter: string = `${props.enterClass} ${props.enterActiveClass}`
+  let enterTo: string = `${props.enterToClass} ${props.enterActiveClass}`
+  let leave: string = `${props.leaveClass} ${props.leaveActiveClass}`
+  let leaveTo: string = `${props.leaveToClass} ${props.leaveActiveClass}`
+
+  if (Array.isArray(name)) {
+    for (let index = 0; index < name.length; index++) {
+      enter = `${transitionClass(name[index], 'enter')} ${transitionClass(name[index], 'enter-active')} ${enter}`
+      enterTo = `${transitionClass(name[index], 'enter-to')} ${transitionClass(name[index], 'enter-active')} ${enterTo}`
+      leave = `${transitionClass(name[index], 'leave')} ${transitionClass(name[index], 'leave-active')} ${leave}`
+      leaveTo = `${transitionClass(name[index], 'leave-to')} ${transitionClass(name[index], 'leave-active')} ${leaveTo}`
+    }
+  } else if (name) {
+    enter = `${transitionClass(name, 'enter')} ${transitionClass(name, 'enter-active')} ${enter}`
+    enterTo = `${transitionClass(name, 'enter-to')} ${transitionClass(name, 'enter-active')} ${enterTo}`
+    leave = `${transitionClass(name, 'leave')} ${transitionClass(name, 'leave-active')} ${leave}`
+    leaveTo = `${transitionClass(name, 'leave-to')} ${transitionClass(name, 'leave-active')} ${leaveTo}`
+  }
+  return {
+    enter: enter,
+    'enter-to': enterTo,
+    leave: leave,
+    'leave-to': leaveTo
+  }
+}
+
+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 || !props.destroy ? '' : 'display: none;'
+  }${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `wd-transition ${props.customClass}  ${classes.value}`
+})
+
+const isShow = computed(() => {
+  return !props.lazyRender || inited.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 = pause()
+      await enterLifeCyclePromises.value
+      emit('enter')
+      classes.value = classNames.enter
+      currentDuration.value = duration
+      enterLifeCyclePromises.value = pause()
+      await enterLifeCyclePromises.value
+      inited.value = true
+      display.value = true
+      enterLifeCyclePromises.value = pause()
+      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 = pause()
+    await leaveLifeCyclePromises.value
+    emit('leave')
+    classes.value = classNames.leave
+    leaveLifeCyclePromises.value = pause()
+    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
+  }
+}
+
+function noop() {}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-upload/index.scss

@@ -0,0 +1,204 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 组件级 CSS 变量定义
+// 上传项尺寸
+$upload-size: var(--wot-upload-size, $n-88) !default;
+// 上传项圆角
+$upload-radius: var(--wot-upload-radius, var(--wot-upload-border-radius, $radius-main)) !default;
+// 上传项边框颜色
+$upload-border-color: var(--wot-upload-border-color, $border-main) !default;
+// 唤起项的图标大小
+$upload-evoke-icon-size: var(--wot-upload-evoke-icon-size, $n-32) !default;
+// 唤起项背景色
+$upload-evoke-bg: var(--wot-upload-evoke-bg, $filled-bottom) !default;
+// 唤起项文字颜色
+$upload-evoke-color: var(--wot-upload-evoke-color, $text-auxiliary) !default;
+// 唤起项文字大小
+$upload-evoke-font-size: var(--wot-upload-evoke-font-size, $typography-body-size-main) !default;
+// 唤起项文字行高
+$upload-evoke-line-height: var(--wot-upload-evoke-line-height, $typography-body-line--height-size-main) !default;
+// 唤起项禁用文字颜色
+$upload-evoke-color-disabled: var(--wot-upload-evoke-color-disabled, $text-disabled) !default;
+// 唤起项图标颜色
+$upload-evoke-icon-color: var(--wot-upload-evoke-icon-color, $icon-auxiliary) !default;
+// 唤起项禁用图标颜色
+$upload-evoke-icon-color-disabled: var(--wot-upload-evoke-icon-color-disabled, $icon-disabled) !default;
+// 关闭按钮内边距
+$upload-close-padding: var(--wot-upload-close-padding, $padding-ultra-tight) !default;
+// 关闭按钮圆角
+$upload-close-radius: var(--wot-upload-close-radius, var(--wot-upload-close-border-radius, $radius-zero $radius-zero $radius-zero $radius-main)) !default;
+// 关闭按钮背景色
+$upload-close-bg: var(--wot-upload-close-bg, $opacfilled-main-cover) !default;
+// 关闭按钮图标尺寸
+$upload-close-icon-size: var(--wot-upload-close-icon-size, $n-16) !default;
+// 关闭按钮图标颜色
+$upload-close-icon-color: var(--wot-upload-close-icon-color, $icon-white) !default;
+// 进度文字字号
+$upload-progress-font-size: var(--wot-upload-progress-font-size, $typography-body-size-main) !default;
+// 进度文字行高
+$upload-progress-line-height: var(--wot-upload-progress-line-height, $typography-body-line--height-size-main) !default;
+// 进度文字颜色
+$upload-progress-color: var(--wot-upload-progress-color, $text-white) !default;
+// 文件名文字字号
+$upload-file-font-size: var(--wot-upload-file-font-size, $typography-label-size-main) !default;
+// 文件名文字行高
+$upload-file-line-height: var(--wot-upload-file-line-height, $typography-label-line--height-size-main) !default;
+// 文件名文字颜色
+$upload-file-color: var(--wot-upload-file-color, $text-secondary) !default;
+// 文件/视频名称内边距
+$upload-file-padding: var(--wot-upload-file-padding, $padding-zero $padding-tight) !default;
+// 预览态内部图标尺寸
+$upload-preview-icon-size: var(--wot-upload-preview-icon-size, $n-24) !default;
+// 预览态内部图标颜色
+$upload-preview-icon-color: var(--wot-upload-preview-icon-color, $icon-white) !default;
+// 预览项外边距
+$upload-preview-margin: var(--wot-upload-preview-margin, $spacing-zero $spacing-tight $spacing-tight $spacing-zero) !default;
+// 视频/文件图标尺寸
+$upload-cover-icon-size: var(--wot-upload-cover-icon-size, $n-24) !default;
+// 视频图标尺寸
+$upload-video-icon-size: var(--wot-upload-video-icon-size, $n-24) !default;
+// 视频播放图标颜色
+$upload-video-icon-color: var(--wot-upload-video-icon-color, $icon-white) !default;
+// 遮罩层背景色
+$upload-mask-bg: var(--wot-upload-mask-bg, $opacfilled-main-cover) !default;
+// 上传项行间距
+$upload-row-spacing: var(--wot-upload-row-spacing, $spacing-tight) !default;
+
+@include b(upload) {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  @include e(evoke) {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: $upload-size;
+    height: $upload-size;
+    border-radius: $upload-radius;
+    overflow: hidden;
+    background: $upload-evoke-bg;
+    margin-bottom: $upload-row-spacing;
+    @include pixelBorderSurround($upload-border-color, dashed);
+
+
+    @include when(disabled) {
+      color: $upload-evoke-color-disabled;
+
+      :deep(.wd-upload__evoke-icon) {
+        color: $upload-evoke-icon-color-disabled;
+      }
+    }
+  }
+
+  @include e(evoke-num) {
+    color: $upload-evoke-color;
+    font-size: $upload-evoke-font-size;
+    line-height: $upload-evoke-line-height;
+  }
+
+  @include edeep(evoke-icon) {
+    font-size: $upload-evoke-icon-size;
+    color: $upload-evoke-icon-color;
+  }
+
+  @include e(preview) {
+    position: relative;
+    width: $upload-size;
+    height: $upload-size;
+    border-radius: $upload-radius;
+    overflow: hidden;
+    margin: $upload-preview-margin;
+    @include pixelBorderSurround($upload-border-color);
+  }
+
+  @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) {
+    width: 100%;
+    font-size: $upload-file-font-size;
+    line-height: $upload-file-line-height;
+    color: $upload-file-color;
+    box-sizing: border-box;
+    text-align: center;
+    padding: $upload-file-padding;
+    @include lineEllipsis()
+  }
+
+  @include edeep(video-play) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: $upload-video-icon-size;
+    color: $upload-video-icon-color;
+  }
+
+  @include e(close) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: $upload-close-padding;
+    border-radius: $upload-close-radius;
+    background: $upload-close-bg;
+  }
+
+  @include edeep(close-icon) {
+    display: flex;
+    color: $upload-close-icon-color;
+    font-size: $upload-close-icon-size;
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $upload-mask-bg;
+  }
+
+  @include e(progress-txt) {
+    font-size: $upload-progress-font-size;
+    line-height: $upload-progress-line-height;
+    color: $upload-progress-color;
+  }
+
+  @include edeep(icon) {
+    font-size: $upload-preview-icon-size;
+    color: $upload-preview-icon-color;
+  }
+
+  @include e(status-content) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+}