hy-app 0.2.6 → 0.2.7

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

@@ -4,7 +4,7 @@
     class="hy-transition"
     ref="u-transition"
     @tap.stop="clickHandler"
-    :class="classes"
+    :class="[classes, customClass]"
     :style="[mergeStyle]"
   >
     <slot />
@@ -12,92 +12,85 @@
 </template>
 
 <script setup lang="ts">
-import {
-  computed,
-  type CSSProperties,
-  ref,
-  watch,
-  nextTick,
-  toRefs,
-} from "vue";
-import { sleep } from "../../utils";
-import defaultProps from "./props";
-import type IProps from "./typing";
+import { computed, type CSSProperties, ref, watch, nextTick, toRefs } from 'vue'
+import { sleep } from '../../utils'
+import defaultProps from './props'
+import type IProps from './typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
-const { show, mode, duration } = toRefs(props);
+const props = withDefaults(defineProps<IProps>(), defaultProps)
+const { show, mode, duration, customStyle, timingFunction } = toRefs(props)
 const emit = defineEmits([
-  "click",
-  "beforeEnter",
-  "enter",
-  "afterEnter",
-  "beforeLeave",
-  "leave",
-  "afterLeave",
-]);
+  '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>(""); // 应用的类名
+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(mode.value)
   // 定义状态和发出动画进入前事件
-  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(mode.value)
   // 标记离开状态和发出事件
-  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(), duration.value)
+    classes.value = classNames['leave-to']
   }
-};
+}
 // #endif
 
 watch(
@@ -108,50 +101,49 @@ watch(
     // newVal ? nvueEnter() : nvueLeave()
     // #endif
     // #ifndef APP-NVUE
-    newVal ? vueEnter() : vueLeave();
+    newVal ? vueEnter() : vueLeave()
     // #endif
   },
   { immediate: true },
-);
+)
 
 const mergeStyle = computed(() => {
-  const { duration, customStyle, timingFunction } = props;
   return {
     // #ifndef APP-NVUE
-    transitionDuration: `${duration}ms`,
+    transitionDuration: `${duration.value}ms`,
     // display: `${this.display ? '' : 'none'}`,
-    transitionTimingFunction: timingFunction,
+    transitionTimingFunction: timingFunction.value,
     // #endif
     // 避免自定义样式影响到动画属性，所以写在viewStyle前面
-    ...customStyle,
+    ...customStyle.value,
     ...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");
+  emit(status.value === 'leave' ? 'afterLeave' : 'afterEnter')
   if (!show.value && display.value) {
-    display.value = false;
-    hasInit.value = false;
+    display.value = false
+    hasInit.value = false
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
 /* #ifndef APP-NVUE */
 // vue版本动画相关的样式抽离在外部文件
-@import "./index.scss";
+@import './index.scss';
 /* #endif */
 
 .hy-transition {

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

@@ -1,24 +1,28 @@
-import type { CSSProperties } from "vue";
+import type { CSSProperties } from 'vue'
 
 export default interface HyTransitionProps {
   /**
    * @description 是否展示组件
    * */
-  show: boolean;
+  show: boolean
   /**
    * @description 使用的动画模式（默认：fade）
    * */
-  mode?: HyApp.TransitionMode;
+  mode?: HyApp.TransitionMode
   /**
    * @description 动画的执行时间，单位ms
    * */
-  duration?: number;
+  duration?: number
   /**
    * @description 使用的动画过渡函数（默认：ease-out）
    * */
-  timingFunction?: string;
+  timingFunction?: string
   /**
    * @description 定义需要用到的外部样式
    * */
-  customStyle?: CSSProperties;
+  customStyle?: CSSProperties
+  /**
+   * @description 定义组件的类名
+   * */
+  customClass?: string
 }

package/composables/index.ts

@@ -1,2 +1,4 @@
-export * from "./useShare";
-export * from "./useTouch";
+export * from './useShare'
+export * from './useTouch'
+export * from './usePopover'
+export * from './useQueue'

package/composables/usePopover.ts

@@ -0,0 +1,221 @@
+import { CSSProperties, getCurrentInstance, ref } from 'vue'
+import { getRect, isObject } from '../utils'
+import { IOffset, IPlacementVo } from '@/package/components/hy-popover/typing'
+
+export function usePopover(visibleArrow = true) {
+  const { proxy } = getCurrentInstance() as any
+  const popStyle = ref<CSSProperties>()
+  const arrowStyle = ref<string>('')
+  const showStyle = ref<string>('')
+  const arrowClass = ref<string>('')
+  const popWidth = ref<number>(0)
+  const popHeight = ref<number>(0)
+  const left = ref<number>(0)
+  const bottom = ref<number>(0)
+  const width = ref<number>(0)
+  const height = ref<number>(0)
+  const top = ref<number>(0)
+
+  function noop() {}
+
+  function init(placement: IPlacementVo, visibleArrow: boolean, selector: string) {
+    // 初始化 class
+    if (visibleArrow) {
+      const arrowClassArr = [
+        `hy-${selector}__arrow`,
+        placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end'
+          ? `hy-${selector}__arrow-up`
+          : '',
+        placement === 'left' || placement === 'left-start' || placement === 'left-end'
+          ? `hy-${selector}__arrow-right`
+          : '',
+        placement === 'right' || placement === 'right-start' || placement === 'right-end'
+          ? `hy-${selector}__arrow-left`
+          : '',
+        placement === 'top' || placement === 'top-start' || placement === 'top-end'
+          ? `hy-${selector}__arrow-down`
+          : '',
+      ]
+      arrowClass.value = arrowClassArr.join(' ')
+    }
+
+    // 初始化数据获取
+    getRect('#target', false, proxy).then((rect) => {
+      if (!rect) return
+      left.value = rect.left as number
+      bottom.value = rect.bottom as number
+      width.value = rect.width as number
+      height.value = rect.height as number
+      top.value = rect.top as number
+    })
+    // 用透明度可在初始化时获取到pop尺寸
+    getRect('#pos', false, proxy).then((rect) => {
+      if (!rect) return
+      popWidth.value = rect.width as number
+      popHeight.value = rect.height as number
+    })
+  }
+
+  function control(placement: IPlacementVo, offset: IOffset) {
+    // arrow size
+    const arrowSize = visibleArrow ? 9 : 0
+    // 上下位（纵轴）对应的距离左边的距离
+    const verticalX = width.value / 2
+    // 上下位（纵轴）对应的距离底部的距离
+    const verticalY = arrowSize + height.value + 5
+    // 左右位（横轴）对应的距离左边的距离
+    const horizontalX = width.value + arrowSize + 5
+    // 左右位（横轴）对应的距离底部的距离
+    const horizontalY = height.value / 2
+
+    let offsetX = 0
+    let offsetY = 0
+    if (Array.isArray(offset)) {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset[0]
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + (offset[1] ? offset[1] : offset[0])
+    } else if (isObject(offset)) {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset.x
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset.y
+    } else {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
+    }
+    // const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
+    // const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
+
+    const placements = new Map([
+      // 上
+      [
+        'top',
+        [
+          {
+            left: `${verticalX}px`,
+            bottom: `${verticalY}px`,
+            transform: 'translateX(-50%)',
+          },
+          'left: 50%;',
+        ],
+      ],
+      [
+        'top-start',
+        [
+          {
+            left: `${offsetX}px`,
+            bottom: `${verticalY}px`,
+          },
+          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`,
+        ],
+      ],
+      [
+        'top-end',
+        [
+          {
+            right: `${offsetX}px`,
+            bottom: `${verticalY}px`,
+          },
+          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`,
+        ],
+      ],
+      // 下
+      [
+        'bottom',
+        [
+          {
+            left: verticalX + 'px',
+            top: verticalY + 'px',
+            transform: 'translateX(-50%)',
+          },
+          'left: 50%;',
+        ],
+      ],
+      [
+        'bottom-start',
+        [
+          {
+            left: `${offsetX}px`,
+            top: `${verticalY}px`,
+          },
+          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`,
+        ],
+      ],
+      [
+        'bottom-end',
+        [
+          {
+            right: `${offsetX}px`,
+            top: `${verticalY}px`,
+          },
+          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`,
+        ],
+      ],
+      // 左
+      [
+        'left',
+        [
+          {
+            right: `${horizontalX}px`,
+            top: `${horizontalY}px`,
+            transform: 'translateY(-50%)',
+          },
+          'top: 50%',
+        ],
+      ],
+      [
+        'left-start',
+        [
+          {
+            right: `${horizontalX}px`,
+            top: `${offsetY}px`,
+          },
+          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`,
+        ],
+      ],
+      [
+        'left-end',
+        [
+          {
+            right: `${horizontalX}px`,
+            bottom: `${offsetY}px`,
+          },
+          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`,
+        ],
+      ],
+      // 右
+      [
+        'right',
+        [
+          {
+            left: `${horizontalX}px`,
+            top: `${horizontalY}px`,
+            transform: 'translateY(-50%)',
+          },
+          'top: 50%',
+        ],
+      ],
+      [
+        'right-start',
+        [
+          {
+            left: `${horizontalX}px`,
+            top: `${offsetY}px`,
+          },
+          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`,
+        ],
+      ],
+      [
+        'right-end',
+        [
+          {
+            left: `${horizontalX}px`,
+            bottom: `${offsetY}px`,
+          },
+          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`,
+        ],
+      ],
+    ])
+    popStyle.value = placements.get(placement)![0] as CSSProperties
+    arrowStyle.value = placements.get(placement)![1] as string
+  }
+
+  return { popStyle, arrowStyle, showStyle, arrowClass, init, control, noop }
+}

package/composables/useQueue.ts

@@ -0,0 +1,52 @@
+import { type Ref, provide, ref } from 'vue'
+
+export const queueKey = '__QUEUE_KEY__'
+
+export interface Queue {
+  queue: Ref<any[]>
+  pushToQueue: (comp: any) => void
+  removeFromQueue: (comp: any) => void
+  closeOther: (comp: any) => void
+  closeOutside: () => void
+}
+
+export function useQueue() {
+  const queue = ref<any[]>([])
+
+  function pushToQueue(comp: any) {
+    queue.value.push(comp)
+  }
+
+  function removeFromQueue(comp: any) {
+    queue.value = queue.value.filter((item) => {
+      return item.$.uid !== comp.$.uid
+    })
+  }
+
+  function closeOther(comp: any) {
+    queue.value.forEach((item) => {
+      if (item.$.uid !== comp.$.uid) {
+        item.$.exposed.close()
+      }
+    })
+  }
+
+  function closeOutside() {
+    queue.value.forEach((item) => {
+      item.$.exposed.close()
+    })
+  }
+
+  provide(queueKey, {
+    queue,
+    pushToQueue,
+    removeFromQueue,
+    closeOther,
+    closeOutside
+  })
+
+  return {
+    closeOther,
+    closeOutside
+  }
+}

package/libs/css/mixin.scss

@@ -129,6 +129,10 @@
   }
 }
 
+/**
+  * 圆角形状
+  * @param $shape circle-半圆形，square-方形带圆角
+*/
 @mixin borderRadio($shape) {
   @include m($shape) {
     @if $shape == circle {
@@ -140,6 +144,90 @@
   }
 }
 
+/**
+  * 正方形实现尖角样式，适用于背景不透明情况
+  * @param $size 正方形边长
+  * @param $bg 正方形背景颜色
+  * @param $z-index z-index属性值，不得大于外部包裹器
+  * @param $box-shadow 阴影
+*/
+@mixin squareArrow($size, $bg, $z-index, $box-shadow) {
+  @include e(arrow) {
+    position: absolute;
+    width: $size;
+    height: $size;
+    z-index: $z-index;
+  }
+
+  @include e(arrow-down) {
+    transform: translateX(-50%);
+    bottom: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      bottom: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-up) {
+    transform: translateX(-50%);
+    top: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      top: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-left) {
+    transform: translateY(-50%);
+    left: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-right) {
+    transform: translateY(-50%);
+    right: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      right: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+}
+
 
 /* flex布局 */
 @mixin flex($direction: row) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.2.6",
-  "description": "修改模态框样式、加了摇一摇功能",
+  "version": "0.2.7",
+  "description": "feat: 气泡组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},