hy-app 0.1.1

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

@@ -0,0 +1,27 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  modelValue: string;
+  placeholder?: string;
+  placeholderClass?: string;
+  placeholderStyle?: CSSProperties;
+  height?: number;
+  confirmType?: "done" | "send" | "search" | "next" | "go";
+  disabled?: boolean;
+  count?: boolean;
+  focus?: boolean;
+  autoHeight?: boolean;
+  fixed?: boolean;
+  cursorSpacing?: number;
+  cursor?: string;
+  showConfirmBar?: boolean;
+  selectionStart?: number;
+  selectionEnd?: number;
+  adjustPosition?: boolean;
+  disableDefaultPadding?: boolean;
+  holdKeyboard?: boolean;
+  maxlength?: number;
+  border?: HyApp.BorderType;
+  formatter?: ((value: string) => string) | null;
+  customStyle?: CSSProperties;
+}

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

@@ -0,0 +1,332 @@
+<template>
+  <view class="u-tooltip" :style="customStyle">
+    <HyOverlay
+      :show="showTooltip && tooltipTop !== -10000 && overlay"
+      :customStyle="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
+      @click="overlayClickHandler"
+    ></HyOverlay>
+    <view class="u-tooltip__wrapper">
+      <text
+        class="u-tooltip__wrapper__text"
+        :id="textId"
+        :ref="textId"
+        :userSelect="false"
+        :selectable="false"
+        @longpress.stop="longPressHandler"
+        :style="{
+          color: color,
+          backgroundColor:
+            bgColor && showTooltip && tooltipTop !== -10000
+              ? bgColor
+              : 'transparent'
+        }"
+        >{{ text }}</text
+      >
+      <HyTransition
+        mode="fade"
+        :show="showTooltip"
+        :duration="300"
+        :customStyle="{
+          position: 'absolute',
+          top: addUnit(tooltipTop),
+          zIndex: zIndex,
+          ...tooltipStyle
+        }"
+      >
+        <view
+          class="u-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"
+            :style="[
+              indicatorStyle,
+              {
+                width: addUnit(indicatorWidth),
+                height: addUnit(indicatorWidth)
+              }
+            ]"
+          >
+            <!-- 由于nvue不支持三角形绘制，这里就做一个四方形，再旋转45deg，得到露出的一个三角 -->
+          </view>
+          <view class="u-tooltip__wrapper__popup__list">
+            <view
+              v-if="showCopy"
+              class="u-tooltip__wrapper__popup__list__btn"
+              hover-class="u-tooltip__wrapper__popup__list__btn--hover"
+              @tap="setClipboardData"
+            >
+              <text class="u-tooltip__wrapper__popup__list__btn__text"
+                >复制</text
+              >
+            </view>
+            <HyLine
+              direction="column"
+              color="#8d8e90"
+              v-if="showCopy && buttons.length > 0"
+              length="18"
+            ></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"
+              >
+                <text
+                  class="u-tooltip__wrapper__popup__list__btn__text"
+                  @tap="btnClickHandler(index)"
+                  >{{ item }}</text
+                >
+              </view>
+              <HyLine
+                direction="column"
+                color="#8d8e90"
+                v-if="index < buttons.length - 1"
+                length="18"
+              ></HyLine>
+            </block>
+          </view>
+        </view>
+      </HyTransition>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, toRefs, ref, reactive, onMounted } from "vue";
+import defaultProps from "./props";
+import IProps 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";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { showToast, copyText, text, showCopy, buttons, direction } =
+  toRefs(props);
+const emit = defineEmits(["click"]);
+
+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 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%"})`
+    },
+    // #ifdef APP || H5 || MP-WEIXIN
+    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.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
+  ) {
+    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
+    );
+  } 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 = {};
+  }
+  if (direction.value === "top") {
+    style.marginTop = "-10px";
+    indicatorStyle.value.bottom = "-4px";
+  } else {
+    style.marginBottom = "-10px";
+    indicatorStyle.value.top = "-4px";
+  }
+  return style;
+});
+
+onMounted(() => {
+  getElRect();
+});
+
+/**
+ * @description 长按触发事件
+ * */
+const longPressHandler = () => {
+  tooltipTop.value = 0;
+  showTooltip.value = true;
+};
+
+/**
+ * @description 点击透明遮罩
+ * */
+const overlayClickHandler = () => {
+  showTooltip.value = false;
+};
+
+/**
+ * @description 点击弹出按钮
+ * */
+const btnClickHandler = (index: number) => {
+  showTooltip.value = false;
+  // 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
+  emit("click", showCopy.value ? index + 1 : index);
+};
+
+/**
+ * @description 元素尺寸
+ * */
+const getElRect = () => {
+  // 调用之前，先将指示器调整到屏幕外，方便获取尺寸
+  showTooltip.value = true;
+  tooltipTop.value = -10000;
+  sleep(500).then(() => {
+    getRect(`#${tooltipId.value}`).then((size) => {
+      tooltipInfo.value = size as UniApp.NodeInfo;
+      // 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
+      showTooltip.value = false;
+    });
+    getRect(`#${textId.value}`).then((size) => {
+      textInfo.value = size as UniApp.NodeInfo;
+    });
+  });
+};
+/**
+ * @description 复制文本到粘贴板
+ * */
+const setClipboardData = () => {
+  // 关闭组件
+  showTooltip.value = false;
+  emit("click", 0);
+  uni.setClipboardData({
+    // 优先使用copyText字段，如果没有，则默认使用text字段当做复制的内容
+    data: copyText.value || text.value,
+    success: () => {
+      showToast.value &&
+        uni.showToast({
+          title: "复制成功"
+        });
+    },
+    fail: () => {
+      showToast.value &&
+        uni.showToast({
+          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;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/hy-tooltip/props.ts

@@ -0,0 +1,17 @@
+import IProps from "./typing";
+
+const defaultProps: IProps = {
+  text: "",
+  copyText: "",
+  size: 14,
+  color: "#606266",
+  bgColor: "transparent",
+  direction: "top",
+  zIndex: 10071,
+  showCopy: true,
+  buttons: [],
+  overlay: true,
+  showToast: true
+};
+
+export default defaultProps;

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

@@ -0,0 +1,52 @@
+import { CSSProperties } from "vue";
+
+export default interface IProps {
+  /**
+   * @description 需要显示的提示文字
+   * */
+  text: string;
+  /**
+   * @description 点击复制按钮时，复制的文本，为空则使用text值
+   * */
+  copyText?: string;
+  /**
+   * @description 文本大小（默认 14 ）
+   * */
+  size?: number | string;
+  /**
+   * @description 字体颜色（默认 '#606266' ）
+   * */
+  color?: string;
+  /**
+   * @description 弹出提示框时，文本的背景色（默认 'transparent' ）
+   * */
+  bgColor?: string;
+  /**
+   * @description 弹出提示的方向，top-上方，bottom-下方（默认 'top' ）
+   * */
+  direction?: HyApp.TopBottomType;
+  /**
+   * @description 弹出提示的z-index，nvue无效（默认 10071 ）
+   * */
+  zIndex?: number;
+  /**
+   * @description 是否显示复制按钮（默认 true ）
+   * */
+  showCopy?: boolean;
+  /**
+   * @description 扩展的按钮组
+   * */
+  buttons?: string[];
+  /**
+   * @description 是否显示透明遮罩以防止触摸穿透（默认 true ）
+   * */
+  overlay?: boolean;
+  /**
+   * @description 是否显示遮罩
+   * */
+  showToast?: boolean;
+  /**
+   * @description 定义需要用到的外部样式
+   * */
+  customStyle?: CSSProperties;
+}

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

@@ -0,0 +1,150 @@
+<template>
+  <view
+    v-if="hasInit"
+    class="hy-transition"
+    ref="u-transition"
+    @tap="clickHandler"
+    :class="classes"
+    :style="[mergeStyle]"
+  >
+    <slot />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, CSSProperties, ref, watch, nextTick, toRefs } from "vue";
+import { sleep } from "../../utils";
+import defaultProps from "./props";
+import IProps from "./typing";
+
+const props = withDefaults(defineProps<IProps>(), defaultProps);
+const { show, mode, duration } = toRefs(props);
+const emit = defineEmits([
+  "click",
+  "beforeEnter",
+  "enter",
+  "afterEnter",
+  "beforeLeave",
+  "leave",
+  "afterLeave"
+]);
+
+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`
+});
+// #endif
+
+// #ifndef APP-NVUE
+// vue版本的组件进场处理
+const vueEnter = async () => {
+  // 动画进入时的类名
+  const classNames = getClassNames(mode.value);
+  // 定义状态和发出动画进入前事件
+  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(mode.value);
+  // 标记离开状态和发出事件
+  status.value = "leave";
+  emit("beforeLeave");
+  // 获得类名
+  classes.value = classNames.leave;
+
+  await nextTick();
+  {
+    // 动画正在离场的状态
+    transitionEnded.value = false;
+    emit("leave");
+    // 组件执行动画，到了执行的执行时间后，执行一些额外处理
+    setTimeout(() => onTransitionEnd(), duration.value);
+    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 }
+);
+
+const mergeStyle = computed(() => {
+  const { duration, customStyle, timingFunction } = props;
+  return {
+    // #ifndef APP-NVUE
+    transitionDuration: `${duration}ms`,
+    // display: `${this.display ? '' : 'none'}`,
+    transitionTimingFunction: timingFunction,
+    // #endif
+    // 避免自定义样式影响到动画属性，所以写在viewStyle前面
+    ...customStyle,
+    ...viewStyle
+  };
+});
+
+// 组件被点击发出事件
+const clickHandler = () => {
+  emit("click");
+};
+
+const onTransitionEnd = () => {
+  // 如果已经是结束的状态，无需再处理
+  if (transitionEnded.value) return;
+  transitionEnded.value = true;
+  // 发出组件动画执行后的事件
+  emit(status.value === "leave" ? "afterLeave" : "afterEnter");
+  if (!show.value && display.value) {
+    display.value = false;
+    hasInit.value = false;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+/* #ifndef APP-NVUE */
+// vue版本动画相关的样式抽离在外部文件
+@import "./index.scss";
+/* #endif */
+
+.hy-transition {
+}
+</style>

package/components/hy-transition/index.scss

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

package/components/hy-transition/props.ts

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