hy-app 0.4.15 → 0.5.0

package/components/hy-tooltip/props.ts

@@ -1,17 +1,81 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
+import type { IPlacementVo } from '@/package/components/hy-popover/typing'
 
-const defaultProps: IProps = {
-  text: "",
-  copyText: "",
-  size: 14,
-  color: "",
-  bgColor: "transparent",
-  direction: "top",
-  zIndex: 10071,
-  showCopy: true,
-  buttons: [],
-  overlay: true,
-  showToast: true,
-};
+const tooltipProps = {
+    /** 需要显示的提示文字 */
+    text: {
+        type: String,
+        default: ''
+    },
+    /** 点击复制按钮时，复制的文本，为空则使用text值 */
+    copyText: {
+        type: String,
+        default: ''
+    },
+    /**
+     * 触发模式
+     * @values longpress,click
+     * */
+    triggerMode: {
+        type: String as PropType<'longpress' | 'click'>,
+        default: 'longpress'
+    },
+    /**
+     * 指定 popover 的放置位置
+     * @values top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end
+     * */
+    placement: {
+        type: String as PropType<IPlacementVo>,
+        default: 'bottom'
+    },
+    /** 文本大小 */
+    size: {
+        type: [String, Number],
+        default: 14
+    },
+    /** 字体颜色 */
+    color: String,
+    /** 字体粗细 */
+    bold: {
+        type: Boolean,
+        default: false
+    },
+    /** 弹出提示框时，文本的背景色 */
+    bgColor: {
+        type: String,
+        default: 'transparent'
+    },
+    /** 弹出提示的z-index，nvue无效 */
+    zIndex: {
+        type: Number,
+        default: 10071
+    },
+    /** 是否显示复制按钮 */
+    showCopy: {
+        type: Boolean,
+        default: true
+    },
+    /** 扩展的按钮组 */
+    buttons: {
+        type: Array,
+        default() {
+            return []
+        }
+    },
+    /** 是否显示透明遮罩以防止触摸穿透 */
+    overlay: {
+        type: Boolean,
+        default: true
+    },
+    /** 是否显示提示 */
+    showToast: {
+        type: Boolean,
+        default: true
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default tooltipProps

package/components/hy-transition/hy-transition.vue

@@ -1,184 +1,157 @@
 <template>
-  <view
-    v-if="hasInit"
-    class="hy-transition"
-    ref="u-transition"
-    @tap.stop="clickHandler"
-    :class="[classes, customClass]"
-    :style="[mergeStyle]"
-  >
-    <slot />
-  </view>
+    <view
+        v-if="hasInit"
+        class="hy-transition"
+        ref="u-transition"
+        @tap.stop="clickHandler"
+        :class="[classes, customClass]"
+        :style="[mergeStyle]"
+    >
+        <slot />
+    </view>
 </template>
 
 <script lang="ts">
 export default {
-  name: "hy-transition",
-  options: {
-    addGlobalClass: true,
-    virtualHost: true,
-    styleIsolation: "shared",
-  },
-};
+    name: 'hy-transition',
+    options: {
+        addGlobalClass: true,
+        virtualHost: true,
+        styleIsolation: 'shared'
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, nextTick } from "vue";
-import type { CSSProperties, PropType } from "vue";
-import { sleep } from "../../libs";
-import type { ITransitionEmits } from "./typing";
+import { computed, ref, watch, nextTick } from 'vue'
+import type { CSSProperties } from 'vue'
+import { sleep } from '../../libs'
+import type { ITransitionEmits } from './typing'
+import transitionProps from './props'
 
 /**
  * 该组件用于组件的动画过渡效果。
  * @displayName hy-transition
  */
-defineOptions({});
+defineOptions({})
 
-// const props = withDefaults(defineProps<IProps>(), defaultProps)
-const props = defineProps({
-  /** 是否展示组件 */
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  /** 使用的动画模式 */
-  mode: {
-    type: String,
-    default: "fade",
-  },
-  /** 动画的执行时间，单位ms */
-  duration: {
-    type: Number,
-    default: 300,
-  },
-  /** 使用的动画过渡函数 */
-  timingFunction: {
-    type: String,
-    default: "ease-out",
-  },
-  /** 定义需要用到的外部样式 */
-  customStyle: {
-    type: Object as PropType<CSSProperties>,
-  },
-  /** 自定义外部类名 */
-  customClass: String,
-});
-const emit = defineEmits<ITransitionEmits>();
+const props = defineProps(transitionProps)
+const emit = defineEmits<ITransitionEmits>()
 
-const hasInit = ref<boolean>(false); // 是否显示/隐藏组件
-const viewStyle = ref<CSSProperties>({}); // 组件内部的样式
-const status = ref<string>(""); // 记录组件动画的状态
-const transitionEnded = ref<boolean>(false); // 组件是否结束的标记
-const display = ref<boolean>(false); // 组件是否展示
-const classes = ref<string>(""); // 应用的类名
+const hasInit = ref<boolean>(false) // 是否显示/隐藏组件
+const viewStyle = ref<CSSProperties>({}) // 组件内部的样式
+const status = ref<string>('') // 记录组件动画的状态
+const transitionEnded = ref<boolean>(false) // 组件是否结束的标记
+const display = ref<boolean>(false) // 组件是否展示
+const classes = ref<string>('') // 应用的类名
 
 // #ifndef APP-NVUE
 // 定义类名，通过给元素动态切换类名，赋予元素一定的css动画样式
 const getClassNames = (name: string) => ({
-  enter: `u-${name}-enter u-${name}-enter-active`,
-  "enter-to": `u-${name}-enter-to u-${name}-enter-active`,
-  leave: `u-${name}-leave u-${name}-leave-active`,
-  "leave-to": `u-${name}-leave-to u-${name}-leave-active`,
-});
+    enter: `u-${name}-enter u-${name}-enter-active`,
+    'enter-to': `u-${name}-enter-to u-${name}-enter-active`,
+    leave: `u-${name}-leave u-${name}-leave-active`,
+    'leave-to': `u-${name}-leave-to u-${name}-leave-active`
+})
 // #endif
 
 // #ifndef APP-NVUE
 // vue版本的组件进场处理
 const vueEnter = async () => {
-  // 动画进入时的类名
-  const classNames = getClassNames(props.mode);
-  // 定义状态和发出动画进入前事件
-  status.value = "enter";
-  emit("beforeEnter");
-  hasInit.value = true;
-  display.value = true;
-  classes.value = classNames.enter;
-  await nextTick();
-  {
-    // https://github.com/umicro/uView2.0/issues/545
-    await sleep(20);
-    // 标识动画尚未结束
-    emit("enter");
-    transitionEnded.value = false;
-    // 组件动画进入后触发的事件
-    emit("afterEnter");
-    // 赋予组件enter-to类名
-    classes.value = classNames["enter-to"];
-  }
-};
+    // 动画进入时的类名
+    const classNames = getClassNames(props.mode)
+    // 定义状态和发出动画进入前事件
+    status.value = 'enter'
+    emit('beforeEnter')
+    hasInit.value = true
+    display.value = true
+    classes.value = classNames.enter
+    await nextTick()
+    {
+        // https://github.com/umicro/uView2.0/issues/545
+        await sleep(20)
+        // 标识动画尚未结束
+        emit('enter')
+        transitionEnded.value = false
+        // 组件动画进入后触发的事件
+        emit('afterEnter')
+        // 赋予组件enter-to类名
+        classes.value = classNames['enter-to']
+    }
+}
 // 动画离场处理
 const vueLeave = async () => {
-  // 如果不是展示状态，无需执行逻辑
-  if (!display.value) return;
-  const classNames = getClassNames(props.mode);
-  // 标记离开状态和发出事件
-  status.value = "leave";
-  emit("beforeLeave");
-  // 获得类名
-  classes.value = classNames.leave;
+    // 如果不是展示状态，无需执行逻辑
+    if (!display.value) return
+    const classNames = getClassNames(props.mode)
+    // 标记离开状态和发出事件
+    status.value = 'leave'
+    emit('beforeLeave')
+    // 获得类名
+    classes.value = classNames.leave
 
-  await nextTick();
-  {
-    // 动画正在离场的状态
-    transitionEnded.value = false;
-    emit("leave");
-    // 组件执行动画，到了执行的执行时间后，执行一些额外处理
-    setTimeout(() => onTransitionEnd(), props.duration);
-    classes.value = classNames["leave-to"];
-  }
-};
+    await nextTick()
+    {
+        // 动画正在离场的状态
+        transitionEnded.value = false
+        emit('leave')
+        // 组件执行动画，到了执行的执行时间后，执行一些额外处理
+        setTimeout(() => onTransitionEnd(), props.duration)
+        classes.value = classNames['leave-to']
+    }
+}
 // #endif
 
 watch(
-  () => props.show,
-  (newVal) => {
-    // vue和nvue分别执行不同的方法
-    // #ifdef APP-NVUE
-    // newVal ? nvueEnter() : nvueLeave()
-    // #endif
-    // #ifndef APP-NVUE
-    newVal ? vueEnter() : vueLeave();
-    // #endif
-  },
-  { immediate: true },
-);
+    () => props.show,
+    (newVal) => {
+        // vue和nvue分别执行不同的方法
+        // #ifdef APP-NVUE
+        // newVal ? nvueEnter() : nvueLeave()
+        // #endif
+        // #ifndef APP-NVUE
+        newVal ? vueEnter() : vueLeave()
+        // #endif
+    },
+    { immediate: true }
+)
 
 const mergeStyle = computed(() => {
-  return {
-    // #ifndef APP-NVUE
-    transitionDuration: `${props.duration}ms`,
-    // display: `${this.display ? '' : 'none'}`,
-    transitionTimingFunction: props.timingFunction,
-    // #endif
-    // 避免自定义样式影响到动画属性，所以写在viewStyle前面
-    ...props.customStyle,
-    ...viewStyle,
-  };
-});
+    return {
+        // #ifndef APP-NVUE
+        transitionDuration: `${props.duration}ms`,
+        // display: `${this.display ? '' : 'none'}`,
+        transitionTimingFunction: props.timingFunction,
+        // #endif
+        // 避免自定义样式影响到动画属性，所以写在viewStyle前面
+        ...props.customStyle,
+        ...viewStyle
+    }
+})
 
 /**
  * @description 组件被点击发出事件
  * */
 const clickHandler = () => {
-  emit("click");
-};
+    emit('click')
+}
 
 const onTransitionEnd = () => {
-  // 如果已经是结束的状态，无需再处理
-  if (transitionEnded.value) return;
-  transitionEnded.value = true;
-  // 发出组件动画执行后的事件
-  status.value === "leave" ? emit("afterLeave") : emit("afterEnter");
-  if (!props.show && display.value) {
-    display.value = false;
-    hasInit.value = false;
-  }
-};
+    // 如果已经是结束的状态，无需再处理
+    if (transitionEnded.value) return
+    transitionEnded.value = true
+    // 发出组件动画执行后的事件
+    status.value === 'leave' ? emit('afterLeave') : emit('afterEnter')
+    if (!props.show && display.value) {
+        display.value = false
+        hasInit.value = false
+    }
+}
 </script>
 
 <style lang="scss" scoped>
 /* #ifndef APP-NVUE */
 // vue版本动画相关的样式抽离在外部文件
-@import "./index.scss";
+@import './index.scss';
 /* #endif */
 </style>

package/components/hy-transition/props.ts

@@ -1,10 +1,32 @@
-import type IProps from "./typing";
+import type { CSSProperties, PropType } from 'vue'
 
-const defaultProps: IProps = {
-  show: false,
-  mode: "fade",
-  duration: 300,
-  timingFunction: "ease-out",
-};
+const transitionProps = {
+    /** 是否展示组件 */
+    show: {
+        type: Boolean,
+        default: false
+    },
+    /** 使用的动画模式 */
+    mode: {
+        type: String,
+        default: 'fade'
+    },
+    /** 动画的执行时间，单位ms */
+    duration: {
+        type: Number,
+        default: 300
+    },
+    /** 使用的动画过渡函数 */
+    timingFunction: {
+        type: String,
+        default: 'ease-out'
+    },
+    /** 定义需要用到的外部样式 */
+    customStyle: {
+        type: Object as PropType<CSSProperties>
+    },
+    /** 自定义外部类名 */
+    customClass: String
+}
 
-export default defaultProps;
+export default transitionProps