hy-app 0.1.1 → 0.1.3

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

@@ -1,13 +1,13 @@
 <template>
-  <view class="u-tooltip" :style="customStyle">
+  <view class="hy-tooltip" :style="customStyle">
     <HyOverlay
       :show="showTooltip && tooltipTop !== -10000 && overlay"
       :customStyle="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
       @click="overlayClickHandler"
     ></HyOverlay>
-    <view class="u-tooltip__wrapper">
+    <view class="hy-tooltip__wrapper">
       <text
-        class="u-tooltip__wrapper__text"
+        class="hy-tooltip__wrapper__text"
         :id="textId"
         :ref="textId"
         :userSelect="false"
@@ -18,7 +18,7 @@
           backgroundColor:
             bgColor && showTooltip && tooltipTop !== -10000
               ? bgColor
-              : 'transparent'
+              : 'transparent',
         }"
         >{{ text }}</text
       >
@@ -30,36 +30,36 @@
           position: 'absolute',
           top: addUnit(tooltipTop),
           zIndex: zIndex,
-          ...tooltipStyle
+          ...tooltipStyle,
         }"
       >
         <view
-          class="u-tooltip__wrapper__popup"
+          class="hy-tooltip__wrapper__popup"
           :id="tooltipId"
           :ref="tooltipId"
         >
           <view
             v-if="showCopy || buttons.length"
-            class="u-tooltip__wrapper__popup__indicator"
-            hover-class="u-tooltip__wrapper__popup__indicator--hover"
+            class="hy-tooltip__wrapper__popup__indicator"
+            hover-class="hy-tooltip__wrapper__popup__indicator--hover"
             :style="[
               indicatorStyle,
               {
                 width: addUnit(indicatorWidth),
-                height: addUnit(indicatorWidth)
-              }
+                height: addUnit(indicatorWidth),
+              },
             ]"
           >
             <!-- 由于nvue不支持三角形绘制，这里就做一个四方形，再旋转45deg，得到露出的一个三角 -->
           </view>
-          <view class="u-tooltip__wrapper__popup__list">
+          <view class="hy-tooltip__wrapper__popup__list">
             <view
               v-if="showCopy"
-              class="u-tooltip__wrapper__popup__list__btn"
-              hover-class="u-tooltip__wrapper__popup__list__btn--hover"
+              class="hy-tooltip__wrapper__popup__list__btn"
+              hover-class="hy-tooltip__wrapper__popup__list__btn--hover"
               @tap="setClipboardData"
             >
-              <text class="u-tooltip__wrapper__popup__list__btn__text"
+              <text class="hy-tooltip__wrapper__popup__list__btn__text"
                 >复制</text
               >
             </view>
@@ -71,11 +71,11 @@
             ></HyLine>
             <block v-for="(item, index) in buttons" :key="index">
               <view
-                class="u-tooltip__wrapper__popup__list__btn"
-                hover-class="u-tooltip__wrapper__popup__list__btn--hover"
+                class="hy-tooltip__wrapper__popup__list__btn"
+                hover-class="hy-tooltip__wrapper__popup__list__btn--hover"
               >
                 <text
-                  class="u-tooltip__wrapper__popup__list__btn__text"
+                  class="hy-tooltip__wrapper__popup__list__btn__text"
                   @tap="btnClickHandler(index)"
                   >{{ item }}</text
                 >
@@ -95,9 +95,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, toRefs, ref, reactive, onMounted } from "vue";
+import {
+  computed,
+  type CSSProperties,
+  toRefs,
+  ref,
+  onMounted, getCurrentInstance,
+} from "vue";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 import { addUnit, getRect, guid, sleep } from "../../utils";
 
 // 组件
@@ -110,6 +116,7 @@ const { showToast, copyText, text, showCopy, buttons, direction } =
   toRefs(props);
 const emit = defineEmits(["click"]);
 
+const instance = getCurrentInstance();
 const showTooltip = ref<boolean>(true);
 const textId = ref(guid());
 const tooltipId = ref(guid());
@@ -117,17 +124,17 @@ const tooltipTop = ref<number>(-10000);
 // 气泡的位置信息
 const tooltipInfo = ref<UniApp.NodeInfo>({
   width: 0,
-  left: 0
+  left: 0,
 });
 const textInfo = ref<UniApp.NodeInfo>({
   width: 0,
   left: 0,
-  right: 0
+  right: 0,
 });
 // 三角形指示器的样式
 const indicatorStyle = ref<CSSProperties>({
   left: 0,
-  right: 0
+  right: 0,
 });
 // 气泡在可能超出屏幕边沿范围时，重新定位后，距离屏幕边沿的距离
 const screenGap = ref(12);
@@ -142,7 +149,7 @@ const propsChange = computed(() => {
 // 计算气泡和指示器的位置信息
 const tooltipStyle = computed(() => {
   const style: CSSProperties = {
-      transform: `translateY(${direction.value === "top" ? "-100%" : "100%"})`
+      transform: `translateY(${direction.value === "top" ? "-100%" : "100%"})`,
     },
     // #ifdef APP || H5 || MP-WEIXIN
     sysInfo = uni.getWindowInfo();
@@ -154,7 +161,7 @@ const tooltipStyle = computed(() => {
     indicatorStyle.value = {};
     style.left = `-${addUnit(textInfo.value.left! - screenGap.value)}`;
     indicatorStyle.value.left = addUnit(
-      textInfo.value.width! / 2 - Number(style.left) - indicatorWidth.value / 2
+      textInfo.value.width! / 2 - Number(style.left) - indicatorWidth.value / 2,
     );
   } else if (
     tooltipInfo.value.width! / 2 >
@@ -165,14 +172,16 @@ const tooltipStyle = computed(() => {
   ) {
     indicatorStyle.value = {};
     style.right = `-${addUnit(
-      sysInfo.windowWidth - textInfo.value.right! - screenGap.value
+      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
+      textInfo.value.width! / 2 - tooltipInfo.value.width! / 2,
     );
     style.left =
       textInfo.value.width! > tooltipInfo.value.width!
@@ -226,12 +235,12 @@ const getElRect = () => {
   showTooltip.value = true;
   tooltipTop.value = -10000;
   sleep(500).then(() => {
-    getRect(`#${tooltipId.value}`).then((size) => {
+    getRect(`#${tooltipId.value}`, false, instance).then((size) => {
       tooltipInfo.value = size as UniApp.NodeInfo;
       // 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
       showTooltip.value = false;
     });
-    getRect(`#${textId.value}`).then((size) => {
+    getRect(`#${textId.value}`, false, instance).then((size) => {
       textInfo.value = size as UniApp.NodeInfo;
     });
   });
@@ -249,84 +258,22 @@ const setClipboardData = () => {
     success: () => {
       showToast.value &&
         uni.showToast({
-          title: "复制成功"
+          title: "复制成功",
         });
     },
     fail: () => {
       showToast.value &&
         uni.showToast({
-          title: "复制失败"
+          title: "复制失败",
         });
     },
     complete: () => {
       showTooltip.value = false;
-    }
+    },
   });
 };
 </script>
 
 <style lang="scss" scoped>
-@import "../../libs/css/mixin.scss";
-
-.u-tooltip {
-  position: relative;
-  @include flex;
-
-  &__wrapper {
-    @include flex;
-    justify-content: center;
-    /* #ifndef APP-NVUE */
-    white-space: nowrap;
-    /* #endif */
-
-    &__text {
-      font-size: 14px;
-    }
-
-    &__popup {
-      @include flex;
-      justify-content: center;
-
-      &__list {
-        background-color: #060607;
-        position: relative;
-        flex: 1;
-        border-radius: 5px;
-        padding: 0px 0;
-        @include flex(row);
-        align-items: center;
-        overflow: hidden;
-
-        &__btn {
-          padding: 11px 13px;
-
-          &--hover {
-            background-color: #58595b;
-          }
-
-          &__text {
-            line-height: 12px;
-            font-size: 13px;
-            color: #ffffff;
-          }
-        }
-      }
-
-      &__indicator {
-        position: absolute;
-        background-color: #060607;
-        width: 14px;
-        height: 14px;
-        bottom: -4px;
-        transform: rotate(45deg);
-        border-radius: 2px;
-        z-index: -1;
-
-        &--hover {
-          background-color: #58595b;
-        }
-      }
-    }
-  }
-}
+@import "./index.scss";
 </style>

package/components/hy-tooltip/index.scss

@@ -0,0 +1,64 @@
+@use "../../theme.scss" as *;
+@use "../../libs/css/mixin.scss" as *;
+
+.hy-tooltip {
+  position: relative;
+  @include flex;
+
+  &__wrapper {
+    @include flex;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    white-space: nowrap;
+    /* #endif */
+
+    &__text {
+      font-size: 14px;
+    }
+
+    &__popup {
+      @include flex;
+      justify-content: center;
+
+      &__list {
+        background-color: #060607;
+        position: relative;
+        flex: 1;
+        border-radius: $hy-border-radius-sm;
+        padding: 0;
+        @include flex(row);
+        align-items: center;
+        overflow: hidden;
+
+        &__btn {
+          padding: $hy-border-margin-padding-base;
+
+          &--hover {
+            background-color: #58595b;
+          }
+
+          &__text {
+            line-height: 12px;
+            font-size: 13px;
+            color: #ffffff;
+          }
+        }
+      }
+
+      &__indicator {
+        position: absolute;
+        background-color: #060607;
+        width: 14px;
+        height: 14px;
+        bottom: -4px;
+        transform: rotate(45deg);
+        border-radius: 2px;
+        z-index: -1;
+
+        &--hover {
+          background-color: #58595b;
+        }
+      }
+    }
+  }
+}

package/components/hy-tooltip/props.ts

@@ -1,4 +1,4 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   text: "",
@@ -11,7 +11,7 @@ const defaultProps: IProps = {
   showCopy: true,
   buttons: [],
   overlay: true,
-  showToast: true
+  showToast: true,
 };
 
 export default defaultProps;

package/components/hy-tooltip/typing.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**

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

@@ -3,7 +3,7 @@
     v-if="hasInit"
     class="hy-transition"
     ref="u-transition"
-    @tap="clickHandler"
+    @tap.stop="clickHandler"
     :class="classes"
     :style="[mergeStyle]"
   >
@@ -12,10 +12,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, CSSProperties, ref, watch, nextTick, toRefs } from "vue";
+import {
+  computed,
+  type CSSProperties,
+  ref,
+  watch,
+  nextTick,
+  toRefs,
+} from "vue";
 import { sleep } from "../../utils";
 import defaultProps from "./props";
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const props = withDefaults(defineProps<IProps>(), defaultProps);
 const { show, mode, duration } = toRefs(props);
@@ -26,7 +33,7 @@ const emit = defineEmits([
   "afterEnter",
   "beforeLeave",
   "leave",
-  "afterLeave"
+  "afterLeave",
 ]);
 
 const hasInit = ref<boolean>(false); // 是否显示/隐藏组件
@@ -42,7 +49,7 @@ 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`
+  "leave-to": `u-${name}-leave-to u-${name}-leave-active`,
 });
 // #endif
 
@@ -104,7 +111,7 @@ watch(
     newVal ? vueEnter() : vueLeave();
     // #endif
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 const mergeStyle = computed(() => {
@@ -117,11 +124,13 @@ const mergeStyle = computed(() => {
     // #endif
     // 避免自定义样式影响到动画属性，所以写在viewStyle前面
     ...customStyle,
-    ...viewStyle
+    ...viewStyle,
   };
 });
 
-// 组件被点击发出事件
+/**
+ * @description 组件被点击发出事件
+ * */
 const clickHandler = () => {
   emit("click");
 };

package/components/hy-transition/props.ts

@@ -1,10 +1,10 @@
-import IProps from "./typing";
+import type IProps from "./typing";
 
 const defaultProps: IProps = {
   show: false,
   mode: "fade",
   duration: 300,
-  timingFunction: "ease-out"
+  timingFunction: "ease-out",
 };
 
 export default defaultProps;

package/components/hy-transition/typing.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "vue";
+import type { CSSProperties } from "vue";
 
 export default interface IProps {
   /**
@@ -8,19 +8,7 @@ export default interface IProps {
   /**
    * @description 使用的动画模式（默认：fade）
    * */
-  mode?:
-    | "fade"
-    | "fade-up"
-    | "fade-down"
-    | "fade-left"
-    | "fade-right"
-    | "fade-zoom"
-    | "slide-up"
-    | "slide-down"
-    | "slide-left"
-    | "slide-right"
-    | "zoom-in"
-    | "zoom-out";
+  mode?: HyApp.TransitionMode;
   /**
    * @description 动画的执行时间，单位ms
    * */