hy-app 0.3.0 → 0.3.2

package/components/hy-tooltip/hy-tooltip.vue

@@ -16,7 +16,9 @@
         :style="{
           color: color,
           backgroundColor:
-            bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent',
+            bgColor && showTooltip && tooltipTop !== -10000
+              ? bgColor
+              : 'transparent',
         }"
       >
         {{ text }}
@@ -32,7 +34,11 @@
           ...tooltipStyle,
         }"
       >
-        <view class="hy-tooltip__wrapper__popup" :id="tooltipId" :ref="tooltipId">
+        <view
+          class="hy-tooltip__wrapper__popup"
+          :id="tooltipId"
+          :ref="tooltipId"
+        >
           <view
             v-if="showCopy || buttons.length"
             class="hy-tooltip__wrapper__popup__indicator"
@@ -54,7 +60,9 @@
               hover-class="hy-tooltip__wrapper__popup__list__btn--hover"
               @tap="setClipboardData"
             >
-              <text class="hy-tooltip__wrapper__popup__list__btn__text">复制</text>
+              <text class="hy-tooltip__wrapper__popup__list__btn__text"
+                >复制</text
+              >
             </view>
             <HyLine
               direction="column"
@@ -62,7 +70,7 @@
               v-if="showCopy && buttons.length > 0"
               length="18"
             ></HyLine>
-            <block v-for="(item, index) in buttons" :key="index">
+            <template v-for="(item, index) in buttons" :key="index">
               <view
                 class="hy-tooltip__wrapper__popup__list__btn"
                 hover-class="hy-tooltip__wrapper__popup__list__btn--hover"
@@ -80,7 +88,7 @@
                 v-if="index < buttons.length - 1"
                 length="18"
               ></HyLine>
-            </block>
+            </template>
           </view>
         </view>
       </HyTransition>
@@ -90,38 +98,44 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-tooltip',
+  name: "hy-tooltip",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, toRefs, ref, onMounted, getCurrentInstance } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { ITooltipEmits } from './typing'
-import { addUnit, getRect, guid, sleep } from '../../utils'
+import { computed, ref, onMounted, getCurrentInstance } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { ITooltipEmits } from "./typing";
+import { addUnit, getRect, guid, sleep } from "../../utils";
 
 // 组件
-import HyOverlay from '../hy-overlay/hy-overlay.vue'
-import HyTransition from '../hy-transition/hy-transition.vue'
-import HyLine from '../hy-line/hy-line.vue'
+import HyOverlay from "../hy-overlay/hy-overlay.vue";
+import HyTransition from "../hy-transition/hy-transition.vue";
+import HyLine from "../hy-line/hy-line.vue";
 
 /**
  * Tooltip组件主要用于长按操作，类似微信的长按气泡
  * @displayName hy-tooltip
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps);
 const props = defineProps({
   /** 需要显示的提示文字 */
-  text: String,
+  text: {
+    type: String,
+    default: "",
+  },
   /** 点击复制按钮时，复制的文本，为空则使用text值 */
-  copyText: String,
+  copyText: {
+    type: String,
+    default: "",
+  },
   /** 文本大小 */
   size: {
     type: [String, Number],
@@ -132,7 +146,7 @@ const props = defineProps({
   /** 弹出提示框时，文本的背景色 */
   bgColor: {
     type: String,
-    default: 'transparent',
+    default: "transparent",
   },
   /**
    * 弹出提示的方向
@@ -140,7 +154,7 @@ const props = defineProps({
    * */
   direction: {
     type: String,
-    default: 'top',
+    default: "top",
   },
   /** 弹出提示的z-index，nvue无效 */
   zIndex: {
@@ -156,7 +170,7 @@ const props = defineProps({
   buttons: {
     type: Array,
     default() {
-      return []
+      return [];
     },
   },
   /** 是否显示透明遮罩以防止触摸穿透 */
@@ -173,156 +187,160 @@ const props = defineProps({
   customStyle: Object as PropType<CSSProperties>,
   /** 自定义外部类名 */
   customClass: String,
-})
-const { showToast, copyText, text, showCopy, buttons, direction } = toRefs(props)
-const emit = defineEmits<ITooltipEmits>()
+});
+const emit = defineEmits<ITooltipEmits>();
 
-const instance = getCurrentInstance()
-const showTooltip = ref<boolean>(true)
-const textId = ref(guid())
-const tooltipId = ref(guid())
-const tooltipTop = ref<number>(-10000)
+const instance = getCurrentInstance();
+const showTooltip = ref<boolean>(true);
+const textId = ref(guid());
+const tooltipId = ref(guid());
+const tooltipTop = ref<number>(-10000);
 // 气泡的位置信息
 const tooltipInfo = ref<UniApp.NodeInfo>({
   width: 0,
   left: 0,
-})
+});
 const textInfo = ref<UniApp.NodeInfo>({
   width: 0,
   left: 0,
   right: 0,
-})
+});
 // 三角形指示器的样式
 const indicatorStyle = ref<CSSProperties>({
   left: 0,
   right: 0,
-})
+});
 // 气泡在可能超出屏幕边沿范围时，重新定位后，距离屏幕边沿的距离
-const screenGap = ref(12)
+const screenGap = ref(12);
 // 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
-const indicatorWidth = ref(14)
+const indicatorWidth = ref(14);
 
-// 特别处理H5的复制，因为H5浏览器是自带系统复制功能的，在H5环境
-// 当一些依赖参数变化时，需要重新计算气泡和指示器的位置信息
-const propsChange = computed(() => {
-  return [text.value, buttons.value]
-})
 // 计算气泡和指示器的位置信息
 const tooltipStyle = computed(() => {
   const style: CSSProperties = {
-      transform: `translateY(${direction.value === 'top' ? '-100%' : '100%'})`,
+      transform: `translateY(${props.direction === "top" ? "-100%" : "100%"})`,
     },
     // #ifdef APP || H5 || MP-WEIXIN
-    sysInfo = uni.getWindowInfo()
+    sysInfo = uni.getWindowInfo();
   // #endif
   if (
     tooltipInfo.value.width! / 2 >
     textInfo.value.left! + textInfo.value.width! / 2 - screenGap.value
   ) {
-    indicatorStyle.value = {}
-    style.left = `-${addUnit(textInfo.value.left! - screenGap.value)}`
+    indicatorStyle.value = {};
+    style.left = `-${addUnit(textInfo.value.left! - screenGap.value)}`;
     indicatorStyle.value.left = addUnit(
       textInfo.value.width! / 2 - Number(style.left) - indicatorWidth.value / 2,
-    )
+    );
   } else if (
     tooltipInfo.value.width! / 2 >
-    sysInfo.windowWidth - textInfo.value.right! + textInfo.value.width! / 2 - screenGap.value
+    sysInfo.windowWidth -
+      textInfo.value.right! +
+      textInfo.value.width! / 2 -
+      screenGap.value
   ) {
-    indicatorStyle.value = {}
-    style.right = `-${addUnit(sysInfo.windowWidth - textInfo.value.right! - screenGap.value)}`
+    indicatorStyle.value = {};
+    style.right = `-${addUnit(sysInfo.windowWidth - textInfo.value.right! - screenGap.value)}`;
     indicatorStyle.value.right = addUnit(
-      textInfo.value.width! / 2 - Number(style.right) - indicatorWidth.value / 2,
-    )
+      textInfo.value.width! / 2 -
+        Number(style.right) -
+        indicatorWidth.value / 2,
+    );
   } else {
-    const left = Math.abs(textInfo.value.width! / 2 - tooltipInfo.value.width! / 2)
-    style.left = textInfo.value.width! > tooltipInfo.value.width! ? addUnit(left) : -addUnit(left)
-    indicatorStyle.value = {}
+    const left = Math.abs(
+      textInfo.value.width! / 2 - tooltipInfo.value.width! / 2,
+    );
+    style.left =
+      textInfo.value.width! > tooltipInfo.value.width!
+        ? addUnit(left)
+        : -addUnit(left);
+    indicatorStyle.value = {};
   }
-  if (direction.value === 'top') {
-    style.marginTop = '-10px'
-    indicatorStyle.value.bottom = '-4px'
+  if (props.direction === "top") {
+    style.marginTop = "-10px";
+    indicatorStyle.value.bottom = "-4px";
   } else {
-    style.marginBottom = '-10px'
-    indicatorStyle.value.top = '-4px'
+    style.marginBottom = "-10px";
+    indicatorStyle.value.top = "-4px";
   }
-  return style
-})
+  return style;
+});
 
 onMounted(() => {
-  getElRect()
-})
+  getElRect();
+});
 
 /**
  * @description 长按触发事件
  * */
 const longPressHandler = () => {
-  tooltipTop.value = 0
-  showTooltip.value = true
-}
+  tooltipTop.value = 0;
+  showTooltip.value = true;
+};
 
 /**
  * @description 点击透明遮罩
  * */
 const overlayClickHandler = () => {
-  showTooltip.value = false
-}
+  showTooltip.value = false;
+};
 
 /**
  * @description 点击弹出按钮
  * */
 const btnClickHandler = (index: number) => {
-  showTooltip.value = false
+  showTooltip.value = false;
   // 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
-  emit('click', showCopy.value ? index + 1 : index)
-}
+  emit("click", props.showCopy ? index + 1 : index);
+};
 
 /**
  * @description 元素尺寸
  * */
 const getElRect = () => {
   // 调用之前，先将指示器调整到屏幕外，方便获取尺寸
-  showTooltip.value = true
-  tooltipTop.value = -10000
+  showTooltip.value = true;
+  tooltipTop.value = -10000;
   sleep(500).then(() => {
     getRect(`#${tooltipId.value}`, false, instance).then((size) => {
-      tooltipInfo.value = size as UniApp.NodeInfo
+      tooltipInfo.value = size as UniApp.NodeInfo;
       // 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
-      showTooltip.value = false
-    })
+      showTooltip.value = false;
+    });
     getRect(`#${textId.value}`, false, instance).then((size) => {
-      textInfo.value = size as UniApp.NodeInfo
-    })
-  })
-}
+      textInfo.value = size as UniApp.NodeInfo;
+    });
+  });
+};
 /**
  * @description 复制文本到粘贴板
  * */
 const setClipboardData = () => {
   // 关闭组件
-  showTooltip.value = false
-  emit('click', 0)
+  showTooltip.value = false;
+  emit("click", 0);
   uni.setClipboardData({
     // 优先使用copyText字段，如果没有，则默认使用text字段当做复制的内容
-    data: copyText.value || text.value,
+    data: props.copyText || props.text,
     success: () => {
-      showToast.value &&
+      props.showToast &&
         uni.showToast({
-          title: '复制成功',
-        })
+          title: "复制成功",
+        });
     },
     fail: () => {
-      showToast.value &&
+      props.showToast &&
         uni.showToast({
-          title: '复制失败',
-        })
+          title: "复制失败",
+        });
     },
     complete: () => {
-      showTooltip.value = false
+      showTooltip.value = false;
     },
-  })
-}
+  });
+};
 </script>
 
 <style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
 </style>

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

@@ -13,26 +13,26 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-transition',
+  name: "hy-transition",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch, nextTick, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import { sleep } from '../../utils'
-import type { ITransitionEmits } from './typing'
+import { computed, ref, watch, nextTick } from "vue";
+import type { CSSProperties, PropType } from "vue";
+import { sleep } from "../../utils";
+import type { ITransitionEmits } from "./typing";
 
 /**
  * 该组件用于组件的动画过渡效果。
  * @displayName hy-transition
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -44,7 +44,7 @@ const props = defineProps({
   /** 使用的动画模式 */
   mode: {
     type: String,
-    default: 'fade',
+    default: "fade",
   },
   /** 动画的执行时间，单位ms */
   duration: {
@@ -54,7 +54,7 @@ const props = defineProps({
   /** 使用的动画过渡函数 */
   timingFunction: {
     type: String,
-    default: 'ease-out',
+    default: "ease-out",
   },
   /** 定义需要用到的外部样式 */
   customStyle: {
@@ -62,72 +62,71 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const { show, mode, duration, customStyle, timingFunction } = toRefs(props)
-const emit = defineEmits<ITransitionEmits>()
+});
+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`,
+  "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`,
-})
+  "leave-to": `u-${name}-leave-to u-${name}-leave-active`,
+});
 // #endif
 
 // #ifndef APP-NVUE
 // vue版本的组件进场处理
 const vueEnter = async () => {
   // 动画进入时的类名
-  const classNames = getClassNames(mode.value)
+  const classNames = getClassNames(props.mode);
   // 定义状态和发出动画进入前事件
-  status.value = 'enter'
-  emit('beforeEnter')
-  hasInit.value = true
-  display.value = true
-  classes.value = classNames.enter
-  await nextTick()
+  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)
+    await sleep(20);
     // 标识动画尚未结束
-    emit('enter')
-    transitionEnded.value = false
+    emit("enter");
+    transitionEnded.value = false;
     // 组件动画进入后触发的事件
-    emit('afterEnter')
+    emit("afterEnter");
     // 赋予组件enter-to类名
-    classes.value = classNames['enter-to']
+    classes.value = classNames["enter-to"];
   }
-}
+};
 // 动画离场处理
 const vueLeave = async () => {
   // 如果不是展示状态，无需执行逻辑
-  if (!display.value) return
-  const classNames = getClassNames(mode.value)
+  if (!display.value) return;
+  const classNames = getClassNames(props.mode);
   // 标记离开状态和发出事件
-  status.value = 'leave'
-  emit('beforeLeave')
+  status.value = "leave";
+  emit("beforeLeave");
   // 获得类名
-  classes.value = classNames.leave
+  classes.value = classNames.leave;
 
-  await nextTick()
+  await nextTick();
   {
     // 动画正在离场的状态
-    transitionEnded.value = false
-    emit('leave')
+    transitionEnded.value = false;
+    emit("leave");
     // 组件执行动画，到了执行的执行时间后，执行一些额外处理
-    setTimeout(() => onTransitionEnd(), duration.value)
-    classes.value = classNames['leave-to']
+    setTimeout(() => onTransitionEnd(), props.duration);
+    classes.value = classNames["leave-to"];
   }
-}
+};
 // #endif
 
 watch(
@@ -138,51 +137,48 @@ watch(
     // newVal ? nvueEnter() : nvueLeave()
     // #endif
     // #ifndef APP-NVUE
-    newVal ? vueEnter() : vueLeave()
+    newVal ? vueEnter() : vueLeave();
     // #endif
   },
   { immediate: true },
-)
+);
 
 const mergeStyle = computed(() => {
   return {
     // #ifndef APP-NVUE
-    transitionDuration: `${duration.value}ms`,
+    transitionDuration: `${props.duration}ms`,
     // display: `${this.display ? '' : 'none'}`,
-    transitionTimingFunction: timingFunction.value,
+    transitionTimingFunction: props.timingFunction,
     // #endif
     // 避免自定义样式影响到动画属性，所以写在viewStyle前面
-    ...customStyle.value,
+    ...props.customStyle,
     ...viewStyle,
-  }
-})
+  };
+});
 
 /**
  * @description 组件被点击发出事件
  * */
 const clickHandler = () => {
-  emit('click')
-}
+  emit("click");
+};
 
 const onTransitionEnd = () => {
   // 如果已经是结束的状态，无需再处理
-  if (transitionEnded.value) return
-  transitionEnded.value = true
+  if (transitionEnded.value) return;
+  transitionEnded.value = true;
   // 发出组件动画执行后的事件
-  emit(status.value === 'leave' ? 'afterLeave' : 'afterEnter')
-  if (!show.value && display.value) {
-    display.value = false
-    hasInit.value = false
+  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 */
-
-.hy-transition {
-}
 </style>