@tplc/wot 0.0.1

package/components/wd-popover/wd-popover.vue

@@ -0,0 +1,216 @@
+<template>
+  <view
+    :class="`wd-popover ${customClass}`"
+    :style="customStyle"
+    id="popover"
+    @click.stop="popover.noop"
+  >
+    <!-- 使用插槽时无法获取正确宽高 -->
+    <view class="wd-popover__pos wd-popover__hidden" id="pos">
+      <view :class="`wd-popover__container ${customPop}`">
+        <view v-if="!useContentSlot && mode === 'normal'" class="wd-popover__inner">
+          {{ content }}
+        </view>
+        <view
+          v-if="!useContentSlot && mode === 'menu' && typeof content === 'object'"
+          class="wd-popover__menu"
+        >
+          <view
+            v-for="(item, index) in content"
+            :key="index"
+            class="wd-popover__menu-inner"
+            @click="menuClick(index)"
+          >
+            <wd-icon v-if="item.iconClass" :name="item.iconClass" custom-class="wd-popover__icon" />
+            <text>{{ item.content }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <wd-transition
+      custom-class="wd-popover__pos"
+      :custom-style="popover.popStyle.value"
+      :show="showPopover"
+      name="fade"
+      :duration="200"
+    >
+      <view :class="`wd-popover__container ${customPop}`">
+        <view
+          v-if="props.visibleArrow"
+          :class="`wd-popover__arrow ${popover.arrowClass.value} ${customArrow}`"
+          :style="popover.arrowStyle.value"
+        ></view>
+        <!-- 普通模式 -->
+        <view v-if="!useContentSlot && mode === 'normal'" class="wd-popover__inner">
+          {{ content }}
+        </view>
+        <!-- 列表模式 -->
+        <view v-if="!useContentSlot && mode === 'menu'" class="wd-popover__menu">
+          <view
+            v-for="(item, index) in content"
+            :key="index"
+            class="wd-popover__menu-inner"
+            @click="menuClick(index)"
+            :style="index === 0 ? 'border-top: none' : ''"
+          >
+            <wd-icon
+              v-if="typeof item === 'object' && item.iconClass"
+              :name="item.iconClass"
+              custom-class="wd-popover__icon"
+            />
+            <view style="display: inline-block">
+              {{ typeof item === 'object' && item.content ? item.content : '' }}
+            </view>
+          </view>
+        </view>
+        <!-- 用户自定义样式 -->
+        <slot name="content" v-else />
+      </view>
+      <wd-icon
+        v-if="showClose"
+        name="close"
+        custom-class="wd-popover__close-icon"
+        @click="toggle"
+      ></wd-icon>
+    </wd-transition>
+    <view @click="toggle" class="wd-popover__target" id="target">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-popover',
+  options: {
+    virtualHost: true,
+    addGlobalClass: 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 { popoverProps, type PopoverExpose } from './types'
+import { isArray } from '../common/util'
+
+const props = defineProps(popoverProps)
+const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
+
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'popover'
+const { proxy } = getCurrentInstance() as any
+const popover = usePopover()
+
+const showPopover = ref<boolean>(false) // 控制popover显隐
+
+watch(
+  () => props.content,
+  (newVal) => {
+    const { mode } = props
+    if (mode === 'normal' && typeof newVal !== 'string') {
+      console.error('The value type must be a string type in normal mode')
+    } else if (mode === 'menu' && !isArray(newVal)) {
+      console.error('The value type must be a Array type in menu mode')
+    }
+  },
+)
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(props.placement, props.visibleArrow, selector)
+  },
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopover.value = newValue
+  },
+)
+
+watch(
+  () => showPopover.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 = showPopover.value ? 'opacity: 1;' : 'opacity: 0;'
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function menuClick(index: number) {
+  updateModelValue(false)
+  emit('menuclick', {
+    item: (props.content as Array<Record<string, any>>)[index],
+    index,
+  })
+}
+
+function toggle() {
+  if (props.disabled) return
+  updateModelValue(!showPopover.value)
+}
+
+function open() {
+  updateModelValue(true)
+}
+
+function close() {
+  updateModelValue(false)
+}
+
+function updateModelValue(value: boolean) {
+  showPopover.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<PopoverExpose>({
+  open,
+  close,
+})
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-popup/index.scss

@@ -0,0 +1,112 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+@import '../wd-overlay/index';
+
+.wot-theme-dark {
+  @include b(popup) {
+    background: $-dark-background2;
+
+    @include e(close) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(popup) {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background: #fff;
+
+  @include edeep(close) {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: $-popup-close-size;
+    color: $-popup-close-color;
+    transform: rotate(-45deg);
+  }
+
+  @include m(center) {
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+  }
+
+  @include m(left) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  @include m(right) {
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  @include m(top) {
+    top: 0;
+    right: 0;
+    left: 0;
+  }
+
+  @include m(bottom) {
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.wd-center-enter-active,
+.wd-center-leave-active {
+  transition-property: opacity;
+}
+
+.wd-center-enter,
+.wd-center-leave-to {
+  opacity: 0;
+}
+
+.wd-top-enter-active,
+.wd-top-leave-active,
+.wd-bottom-enter-active,
+.wd-bottom-leave-active,
+.wd-left-enter-active,
+.wd-left-leave-active,
+.wd-right-enter-active,
+.wd-right-enter-active {
+  transition-property: transform;
+}
+
+.wd-top-enter,
+.wd-top-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.wd-bottom-enter,
+.wd-bottom-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.wd-left-enter,
+.wd-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.wd-right-enter,
+.wd-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: translate3d(-50%, -50%, 0) scale(0.7);
+}

package/components/wd-popup/types.ts

@@ -0,0 +1,68 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-18 11:22:03
+ * @LastEditTime: 2024-03-18 15:29:43
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-popup\types.ts
+ * 记得注释
+ */
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type PopupType = 'center' | 'top' | 'right' | 'bottom' | 'left'
+
+export const popupProps = {
+  ...baseProps,
+  transition: String,
+  /**
+   * 关闭按钮
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 弹出框的位置
+   */
+  position: makeStringProp<PopupType>('center'),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 动画持续时间
+   */
+  duration: {
+    type: [Number, Boolean],
+    default: 300,
+  },
+  /**
+   * 是否显示遮罩
+   */
+  modal: makeBooleanProp(true),
+  /**
+   * 设置层级
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 是否当关闭时将弹出层隐藏（display: none)
+   */
+  hideWhenClose: makeBooleanProp(true),
+  /**
+   * 遮罩样式
+   */
+  modalStyle: makeStringProp(''),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 弹出层是否显示
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   */
+  lazyRender: makeBooleanProp(true),
+  /**
+   * 是否锁定滚动
+   */
+  lockScroll: makeBooleanProp(true),
+}

package/components/wd-popup/wd-popup.vue

@@ -0,0 +1,227 @@
+<template>
+  <wd-overlay
+    v-if="modal"
+    :show="modelValue"
+    :z-index="zIndex"
+    :lock-scroll="lockScroll"
+    :duration="duration"
+    :custom-style="modalStyle"
+    @click="handleClickModal"
+    @touchmove="noop"
+  />
+  <view
+    v-if="!lazyRender || inited"
+    :class="rootClass"
+    :style="style"
+    @transitionend="onTransitionEnd"
+  >
+    <slot />
+    <wd-icon v-if="closable" custom-class="wd-popup__close" name="add" @click="close" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-popup',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import { isObj, requestAnimationFrame } from '../common/util'
+import { popupProps } from './types'
+
+const props = defineProps(popupProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'before-enter',
+  'enter',
+  'before-leave',
+  'leave',
+  'after-leave',
+  'after-enter',
+  'click-modal',
+  'close',
+])
+
+const getClassNames = (name?: string) => {
+  if (!name) {
+    return {
+      enter: 'enter-class enter-active-class',
+      'enter-to': 'enter-to-class enter-active-class',
+      leave: 'leave-class leave-active-class',
+      'leave-to': 'leave-to-class leave-active-class',
+    }
+  }
+
+  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 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>('')
+
+const safeBottom = ref<number>(0)
+
+const name = ref<string>('') // 动画名
+
+const style = computed(() => {
+  return `z-index: ${props.zIndex}; padding-bottom: ${safeBottom.value}px; -webkit-transition-duration: ${
+    currentDuration.value
+  }ms; transition-duration: ${currentDuration.value}ms; ${display.value || !props.hideWhenClose ? '' : 'display: none;'} ${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `wd-popup wd-popup--${props.position} ${props.customClass || ''} ${classes.value || ''}`
+})
+
+onBeforeMount(() => {
+  observerTransition()
+  if (props.safeAreaInsetBottom) {
+    const { safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync()
+
+    if (safeArea) {
+      // #ifdef MP-WEIXIN
+      safeBottom.value = screenHeight - (safeArea!.bottom || 0)
+      // #endif
+      // #ifndef MP-WEIXIN
+      safeBottom.value = safeAreaInsets ? safeAreaInsets.bottom : 0
+      // #endif
+    } else {
+      safeBottom.value = 0
+    }
+  }
+  if (props.modelValue) {
+    enter()
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    observermodelValue(newVal)
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  [() => props.position, () => props.transition],
+  () => {
+    observerTransition()
+  },
+  { deep: true, immediate: true },
+)
+
+function observermodelValue(value: boolean) {
+  value ? enter() : leave()
+}
+
+function enter() {
+  const classNames = getClassNames(props.transition || props.position)
+  const duration =
+    props.transition === 'none'
+      ? 0
+      : isObj(props.duration)
+        ? (props.duration as any).enter
+        : props.duration
+  status.value = 'enter'
+  emit('before-enter')
+
+  requestAnimationFrame(() => {
+    emit('enter')
+    classes.value = classNames.enter
+    currentDuration.value = duration
+    requestAnimationFrame(() => {
+      inited.value = true
+      display.value = true
+      requestAnimationFrame(() => {
+        transitionEnded.value = false
+        classes.value = classNames['enter-to']
+      })
+    })
+  })
+}
+function leave() {
+  if (!display.value) return
+  const classNames = getClassNames(props.transition || props.position)
+  const duration =
+    props.transition === 'none'
+      ? 0
+      : isObj(props.duration)
+        ? (props.duration as any).leave
+        : props.duration
+  status.value = 'leave'
+  emit('before-leave')
+
+  requestAnimationFrame(() => {
+    emit('leave')
+    classes.value = classNames.leave
+    currentDuration.value = duration
+
+    requestAnimationFrame(() => {
+      transitionEnded.value = false
+      const timer = setTimeout(() => {
+        onTransitionEnd()
+        clearTimeout(timer)
+      }, currentDuration.value)
+      classes.value = classNames['leave-to']
+    })
+  })
+}
+
+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.modelValue && display.value) {
+    display.value = false
+  }
+}
+
+function observerTransition() {
+  const { transition, position } = props
+  name.value = transition || position
+}
+
+function handleClickModal() {
+  emit('click-modal')
+  if (props.closeOnClickModal) {
+    close()
+  }
+}
+
+function close() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+function noop() {}
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-progress/index.scss

@@ -0,0 +1,62 @@
+@import './../common/abstracts/_mixin';
+@import './../common/abstracts/variable';
+
+.wot-theme-dark {
+  @include b(progress) {
+    @include e(label) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(progress) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: $-progress-height;
+  padding: $-progress-padding;
+
+  @include e(outer) {
+    position: relative;
+    display: block;
+    flex: 1;
+    height: $-progress-height;
+    background: $-progress-bg;
+    border-radius: calc($-progress-height / 2);
+  }
+  @include e(inner) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    height: 100%;
+    font-size: $-progress-icon-fs;
+    background: $-progress-color;
+    border-radius: calc($-progress-height / 2);
+    transition-timing-function: linear;
+    transition-property: width;
+
+    @include when(danger) {
+      background: $-progress-linear-danger-color;
+    }
+    @include when(success) {
+      background: $-progress-linear-success-color;
+    }
+  }
+  @include edeep(label) {
+    width: 30px;
+    margin-left: 9px;
+    font-size: $-progress-label-fs;
+    color: $-progress-label-color;
+  }
+  @include edeep(icon) {
+    font-size: $-progress-icon-fs;
+
+    @include when(danger) {
+      color: $-progress-danger-color;
+    }
+    @include when(success) {
+      color: $-progress-success-color;
+    }
+  }
+}