papayaui 0.2.12 → 0.2.13

package/components/button/button.vue

@@ -12,7 +12,6 @@
     :style="customStyle"
     :hover-class="ns.m('hover')"
     :disabled="disabled"
-    :plain="plain"
     :open-type="openType"
     @getphonenumber="emit('getphonenumber', $event)"
     @getuserinfo="emit('getuserinfo', $event)"

package/components/menu-item/menu-item.vue

@@ -112,7 +112,7 @@ const toggle = (show = !visible.value) => {
     visibleEnded.value = false
   } else {
     // 关闭弹窗的时候如果有展开的节点立即关闭，没有的话等待动画完毕再关闭
-    if (menuProvide.isMenuItemShow && !visible.value) {
+    if (menuProvide.isMenuItemShow.value && !visible.value) {
       visibleEnded.value = true
     }
   }

package/components/transition/props.ts

@@ -28,26 +28,45 @@ export type TransitionMode =
   | 'slide-right'
 
 export const transitionProps = {
-  /** 是否展示组件 */
+  /**
+   * 是否展示组件
+   */
   show: Boolean,
-  /** 使用的动画模式 */
+  /**
+   * 使用的动画模式
+   */
   mode: {
     type: String as PropType<TransitionMode>,
     default: 'fade',
   },
-  /** 动画的执行时间，单位ms */
+  /**
+   * 动画的执行时间，单位ms
+   */
   duration: {
     type: [String, Number],
     default: 300,
   },
-  /** 使用的动画过渡函数 */
+  /**
+   * 使用的动画过渡函数
+   */
   timingFunction: {
     type: String as PropType<CSSProperties['transitionTimingFunction']>,
     default: 'ease-out',
   },
-  /** 自定义class */
+  /**
+   * 关闭是否销毁内部元素
+   */
+  destroyOnClose: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 自定义class
+   */
   customClass: String,
-  /** 自定义样式 */
+  /**
+   * 自定义样式
+   */
   customStyle: Object as PropType<CSSProperties>,
 }
 

package/components/transition/transition.scss

@@ -0,0 +1,108 @@
+@import '../../styles/vars.scss';
+
+$transform-zoom-scale: scale(0.95);
+
+.#{$prefix} {
+  &-transition {
+    &-hide {
+      display: none !important;
+    }
+  }
+
+  &-fade-enter-active,
+  &-fade-leave-active {
+    transition-property: opacity;
+  }
+
+  &-fade-enter,
+  &-fade-leave-to {
+    opacity: 0;
+  }
+
+  &-fade-zoom-enter,
+  &-fade-zoom-leave-to {
+    transform: $transform-zoom-scale;
+    opacity: 0;
+  }
+
+  &-fade-zoom-enter-active,
+  &-fade-zoom-leave-active {
+    transition-property: transform, opacity;
+  }
+
+  &-fade-down-enter-active,
+  &-fade-down-leave-active,
+  &-fade-left-enter-active,
+  &-fade-left-leave-active,
+  &-fade-right-enter-active,
+  &-fade-right-leave-active,
+  &-fade-up-enter-active,
+  &-fade-up-leave-active {
+    transition-property: opacity, transform;
+  }
+
+  &-fade-up-enter,
+  &-fade-up-leave-to {
+    transform: translate3d(0, 100%, 0);
+    opacity: 0;
+  }
+
+  &-fade-down-enter,
+  &-fade-down-leave-to {
+    transform: translate3d(0, -100%, 0);
+    opacity: 0;
+  }
+
+  &-fade-left-enter,
+  &-fade-left-leave-to {
+    transform: translate3d(-100%, 0, 0);
+    opacity: 0;
+  }
+
+  &-fade-right-enter,
+  &-fade-right-leave-to {
+    transform: translate3d(100%, 0, 0);
+    opacity: 0;
+  }
+
+  &-slide-down-enter-active,
+  &-slide-down-leave-active,
+  &-slide-left-enter-active,
+  &-slide-left-leave-active,
+  &-slide-right-enter-active,
+  &-slide-right-leave-active,
+  &-slide-up-enter-active,
+  &-slide-up-leave-active {
+    transition-property: transform;
+  }
+
+  &-slide-up-enter,
+  &-slide-up-leave-to {
+    transform: translate3d(0, 100%, 0);
+  }
+
+  &-slide-down-enter,
+  &-slide-down-leave-to {
+    transform: translate3d(0, -100%, 0);
+  }
+
+  &-slide-left-enter,
+  &-slide-left-leave-to {
+    transform: translate3d(-100%, 0, 0);
+  }
+
+  &-slide-right-enter,
+  &-slide-right-leave-to {
+    transform: translate3d(100%, 0, 0);
+  }
+
+  &-zoom-enter-active,
+  &-zoom-leave-active {
+    transition-property: transform;
+  }
+
+  &-zoom-enter,
+  &-zoom-leave-to {
+    transform: $transform-zoom-scale;
+  }
+}

package/components/transition/transition.vue

@@ -1,136 +1,120 @@
 <template>
   <view
-    v-if="state.inited"
-    :class="[ns.b(), state.classes, customClass]"
+    v-if="inited"
+    :class="[ns.b(), customClass]"
     :style="mergeStyle"
-    @tap="clickHandler"
+    :options="options"
+    :show="show"
+    :change:options="wxs.onOptionsChange"
+    :change:show="wxs.onShowChange"
+    @tap="onClick"
     @touchmove="noop"
   >
     <slot />
   </view>
 </template>
 
-<script lang="ts" setup>
-import { computed, nextTick, reactive, watch } from 'vue'
+<script lang="ts">
+import { computed, defineComponent, reactive, toRefs, watch } from 'vue'
 import useNamespace, { defaultNamespace } from '../../core/useNamespace'
 import { noop } from '../../utils'
 import { transitionEmits, transitionProps } from './props'
 
-const ns = useNamespace('transition')
-
-const props = defineProps(transitionProps)
-const emit = defineEmits(transitionEmits)
-
-const state = reactive<{
-  inited: boolean // 是否显示/隐藏组件
-  status: '' | 'enter' | 'leave' // 记录组件动画的状态
-  transitionEnded: boolean // 组件是否结束的标记
-  display: boolean // 组件是否展示
-  classes: string // 应用的类名
-}>({
-  inited: false,
-  status: '',
-  transitionEnded: false,
-  display: false,
-  classes: '',
-})
+export default defineComponent({
+  props: transitionProps,
+  emits: transitionEmits,
+  setup(props, { emit }) {
+    const ns = useNamespace('transition')
 
-const mergeStyle = computed(() => {
-  return {
-    transitionDuration: `${props.duration}ms`,
-    transitionTimingFunction: props.timingFunction,
-    ...props.customStyle,
-  }
-})
+    const state = reactive<{
+      inited: boolean // 是否显示/隐藏组件
+    }>({
+      inited: false,
+    })
 
-// 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
-const getClassNames = (name: string) => {
-  const classPrefix = `${defaultNamespace}-${name}`
-  return {
-    enter: `${classPrefix}-enter ${classPrefix}-enter-active`,
-    'enter-to': `${classPrefix}-enter-to ${classPrefix}-enter-active`,
-    leave: `${classPrefix}-leave ${classPrefix}-leave-active`,
-    'leave-to': `${classPrefix}-leave-to ${classPrefix}-leave-active`,
-  }
-}
-
-const onEnter = async () => {
-  // 动画进入时的类名
-  const classNames = getClassNames(props.mode)
-  // 定义状态和发出动画进入前事件
-  state.status = 'enter'
-  emit('beforeEnter')
-  state.inited = true
-  state.display = true
-  state.classes = classNames.enter
-  await nextTick()
-  await new Promise<void>((resolve) => {
-    return setTimeout(() => {
-      resolve()
-    }, 1000 / 30)
-  })
-  // 标识动画尚未结束
-  emit('enter')
-  state.transitionEnded = false
-  // 组件动画进入后触发的事件
-  emit('afterEnter')
-  // 赋予组件enter-to类名
-  state.classes = classNames['enter-to']
-}
-
-// 动画离场处理
-const onLeave = () => {
-  // 如果不是展示状态，无需执行逻辑
-  if (!state.display) return
-  const classNames = getClassNames(props.mode)
-  // 标记离开状态和发出事件
-  state.status = 'leave'
-  emit('beforeLeave')
-  // 获得类名
-  state.classes = classNames.leave
-
-  nextTick(() => {
-    // 动画正在离场的状态
-    state.transitionEnded = false
-    emit('leave')
-    // 组件执行动画，到了执行的执行时间后，执行一些额外处理
-    setTimeout(onTransitionEnd, +props.duration)
-    state.classes = classNames['leave-to']
-  })
-}
-
-// 完成过渡后触发
-const onTransitionEnd = () => {
-  // 如果已经是结束的状态，无需再处理
-  if (state.transitionEnded) return
-  state.transitionEnded = true
-  // 发出组件动画执行后的事件
-  if (state.status === 'leave') {
-    emit('afterLeave')
-  } else {
-    emit('afterEnter')
-  }
-  if (!props.show && state.display) {
-    state.display = false
-    state.inited = false
-  }
-}
-
-watch(
-  () => props.show,
-  (newVal) => {
-    newVal ? onEnter() : onLeave()
-  },
-  {
-    immediate: true,
-  },
-)
+    const options = computed(() => {
+      return {
+        mainClass: ns.b(),
+        prefix: defaultNamespace,
+        mode: props.mode,
+        duration: +props.duration,
+      }
+    })
+
+    const mergeStyle = computed(() => {
+      return {
+        transitionTimingFunction: props.timingFunction,
+        ...props.customStyle,
+      }
+    })
+
+    const onInit = async () => {
+      state.inited = true
+    }
+
+    const beforeEnter = () => {
+      emit('beforeEnter')
+    }
+
+    const enter = () => {
+      emit('enter')
+    }
 
-const clickHandler = () => {
-  emit('click')
-}
+    const afterEnter = () => {
+      emit('afterEnter')
+    }
+
+    const beforeLeave = () => {
+      emit('beforeLeave')
+    }
+
+    const leave = () => {
+      emit('leave')
+    }
+
+    const afterLeave = () => {
+      emit('afterLeave')
+      if (props.destroyOnClose) {
+        state.inited = false
+      }
+    }
+
+    watch(
+      () => props.show,
+      (newVal) => {
+        if (newVal) {
+          onInit()
+        }
+      },
+      {
+        immediate: true,
+      },
+    )
+
+    const onClick = () => {
+      emit('click')
+    }
+
+    return {
+      wxs: {} as any,
+      ns,
+      ...toRefs(state),
+      options,
+      mergeStyle,
+      noop,
+      onClick,
+      beforeEnter,
+      enter,
+      afterEnter,
+      beforeLeave,
+      leave,
+      afterLeave,
+    }
+  },
+})
 </script>
+<script module="wxs" lang="wxs" src="./transition.wxs"></script>
 
 <style lang="scss">
-@import './animate.scss';
+@import './transition.scss';
 </style>

package/components/transition/transition.wxs

@@ -0,0 +1,106 @@
+function getClassNames(name) {
+  return {
+    enter: name + '-enter ' + name + '-enter-active',
+    'enter-to': name + '-enter-to ' + name + '-enter-active',
+    leave: name + '-leave ' + name + '-leave-active',
+    'leave-to': name + '-leave-to ' + name + '-leave-active',
+  }
+}
+
+function onOptionsChange(newValue, _oldValue, _ownInstance, instance) {
+  if (typeof newValue === 'undefined') return
+  var state = instance.getState()
+  state.mainClass = newValue.mainClass
+  state.prefix = newValue.prefix
+  state.mode = newValue.mode
+  state.duration = newValue.duration
+}
+
+function onShowChange(newValue, _oldValue, ownInstance, instance) {
+  if (typeof newValue === 'undefined') return
+  var state = instance.getState()
+  var classNames = getClassNames(state.prefix + '-' + state.mode)
+  classNames.hide = state.mainClass + '-hide'
+
+  if (newValue) {
+    enter(ownInstance, instance, classNames)
+  } else {
+    leave(ownInstance, instance, classNames)
+  }
+}
+
+function enter(ownInstance, instance, classNames) {
+  var state = instance.getState()
+  var clearClassNames = [classNames.hide, classNames.leave, classNames['leave-to']]
+  clearClassNames.forEach(function (className) {
+    instance.removeClass(className)
+  })
+  // 进入前
+  ownInstance.callMethod('beforeEnter')
+  instance.setStyle({
+    'transition-duration': '0ms',
+  })
+  // 进入动画
+  ownInstance.callMethod('enter')
+  instance.addClass(classNames.enter)
+
+  instance.requestAnimationFrame(function () {
+    instance.removeClass(classNames.enter)
+    instance.setStyle({
+      'transition-duration': state.duration + 'ms',
+    })
+    // 进入动画中
+    instance.addClass(classNames['enter-to'])
+    state.transitionEnded = false
+
+    state._enterTimer = instance.setTimeout(function () {
+      if (state.transitionEnded) return
+      state.transitionEnded = true
+      state._enterTimer = null
+      // 进入动画完成
+      instance.removeClass(classNames['enter-to'])
+      ownInstance.callMethod('afterEnter')
+    }, state.duration)
+  })
+}
+
+function leave(ownInstance, instance, classNames) {
+  var state = instance.getState()
+  var clearClassNames = [classNames.enter, classNames['enter-to']]
+  clearClassNames.forEach(function (className) {
+    instance.removeClass(className)
+  })
+  if (state._enterTimer) {
+    instance.clearTimeout(state._enterTimer)
+    state._enterTimer = null
+  }
+  // 离开前
+  ownInstance.callMethod('beforeLeave')
+
+  instance.requestAnimationFrame(function () {
+    // 离开动画
+    ownInstance.callMethod('leave')
+    instance.addClass(classNames.leave)
+
+    instance.requestAnimationFrame(function () {
+      instance.removeClass(classNames.leave)
+      // 离开动画中
+      instance.addClass(classNames['leave-to'])
+      state.transitionEnded = false
+
+      instance.setTimeout(function () {
+        if (state.transitionEnded) return
+        state.transitionEnded = true
+        // 离开动画完成
+        instance.removeClass(classNames['leave-to'])
+        instance.addClass(classNames.hide)
+        ownInstance.callMethod('afterLeave')
+      }, state.duration)
+    })
+  })
+}
+
+module.exports = {
+  onOptionsChange: onOptionsChange,
+  onShowChange: onShowChange,
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "适用于uniapp的ui扩展库",
   "packageManager": "pnpm@8.6.0",
   "dependencies": {

package/components/transition/animate.scss

@@ -1,123 +0,0 @@
-/**
- * 动画内置的动画模式有如下：
- * fade：淡入
- * zoom：缩放
- * fade-zoom：缩放淡入
- * fade-up：上滑淡入
- * fade-down：下滑淡入
- * fade-left：左滑淡入
- * fade-right：右滑淡入
- * slide-up：上滑进入
- * slide-down：下滑进入
- * slide-left：左滑进入
- * slide-right：右滑进入
- */
-
-@import '../../styles/vars.scss';
-
-$transform-zoom-scale: scale(0.95);
-
-.#{$prefix} {
-  &-fade {
-    &-enter-active,
-    &-leave-active {
-      transition-property: opacity;
-    }
-
-    &-enter,
-    &-leave-to {
-      opacity: 0;
-    }
-
-    &-zoom-enter,
-    &-zoom-leave-to {
-      transform: $transform-zoom-scale;
-      opacity: 0;
-    }
-
-    &-zoom-enter-active,
-    &-zoom-leave-active {
-      transition-property: transform, opacity;
-    }
-
-    &-down-enter-active,
-    &-down-leave-active,
-    &-left-enter-active,
-    &-left-leave-active,
-    &-right-enter-active,
-    &-right-leave-active,
-    &-up-enter-active,
-    &-up-leave-active {
-      transition-property: opacity, transform;
-    }
-
-    &-up-enter,
-    &-up-leave-to {
-      transform: translate3d(0, 100%, 0);
-      opacity: 0;
-    }
-
-    &-down-enter,
-    &-down-leave-to {
-      transform: translate3d(0, -100%, 0);
-      opacity: 0;
-    }
-
-    &-left-enter,
-    &-left-leave-to {
-      transform: translate3d(-100%, 0, 0);
-      opacity: 0;
-    }
-
-    &-right-enter,
-    &-right-leave-to {
-      transform: translate3d(100%, 0, 0);
-      opacity: 0;
-    }
-  }
-
-  &-slide {
-    &-down-enter-active,
-    &-down-leave-active,
-    &-left-enter-active,
-    &-left-leave-active,
-    &-right-enter-active,
-    &-right-leave-active,
-    &-up-enter-active,
-    &-up-leave-active {
-      transition-property: transform;
-    }
-
-    &-up-enter,
-    &-up-leave-to {
-      transform: translate3d(0, 100%, 0);
-    }
-
-    &-down-enter,
-    &-down-leave-to {
-      transform: translate3d(0, -100%, 0);
-    }
-
-    &-left-enter,
-    &-left-leave-to {
-      transform: translate3d(-100%, 0, 0);
-    }
-
-    &-right-enter,
-    &-right-leave-to {
-      transform: translate3d(100%, 0, 0);
-    }
-  }
-
-  &-zoom {
-    &-enter-active,
-    &-leave-active {
-      transition-property: transform;
-    }
-
-    &-enter,
-    &-leave-to {
-      transform: $transform-zoom-scale;
-    }
-  }
-}