hy-app 0.3.0 → 0.3.2

package/components/hy-float-button/hy-float-button.vue

@@ -26,7 +26,9 @@
           :color="iconColor"
           :size="iconSize ? iconSize : addUnit(getPx(getFloatBtnSize) * 0.7)"
         />
-        <text v-if="text" :style="{ color: textColor, fontSize: fontSize }">{{ text }}</text>
+        <text v-if="text" :style="{ color: textColor, fontSize: fontSize }">{{
+          text
+        }}</text>
       </slot>
     </view>
 
@@ -45,7 +47,7 @@
           }"
           @click="handleMenuItemClick(item, i)"
         >
-          {{ typeof item === 'string' ? item : item.label }}
+          {{ typeof item === "string" ? item : item.label }}
         </view>
         <HyLine
           v-if="i !== menus.length - 1"
@@ -62,32 +64,38 @@
 
 <script lang="ts">
 export default {
-  name: 'hy-float-button',
+  name: "hy-float-button",
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
+    styleIsolation: "shared",
   },
-}
+};
 </script>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, onMounted, ref, toRefs } from 'vue'
-import type { CSSProperties, PropType } from 'vue'
-import type { IFloatButtonEmits, IGap } from './typing'
-import type { MenusType } from './typing'
-import { addUnit, getPx, getRect, guid, isH5 } from '../../utils'
-import { HyApp } from '../../typing/modules/common'
-import { IconConfig } from '../../config'
+import {
+  computed,
+  getCurrentInstance,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+} from "vue";
+import type { CSSProperties, PropType } from "vue";
+import type { IFloatButtonEmits, IGap } from "./typing";
+import type { MenusType } from "./typing";
+import { addUnit, getPx, getRect, guid, isH5 } from "../../utils";
+import { IconConfig } from "../../config";
 // 组件
-import HyIcon from '../hy-icon/hy-icon.vue'
-import HyLine from '../hy-line/hy-line.vue'
+import HyIcon from "../hy-icon/hy-icon.vue";
+import HyLine from "../hy-line/hy-line.vue";
 
 /**
  * 悬浮动作按钮组件，按下可显示一组动作按钮。
  * @displayName hy-float-button
  */
-defineOptions({})
+defineOptions({});
 
 // const props = withDefaults(defineProps<IProps>(), defaultProps)
 const props = defineProps({
@@ -102,7 +110,7 @@ const props = defineProps({
    * */
   direction: {
     type: String,
-    default: 'column',
+    default: "column",
   },
   /** 按钮显示的图标 */
   icon: {
@@ -139,8 +147,8 @@ const props = defineProps({
    * @values small,medium,large
    * */
   size: {
-    type: String,
-    default: 'medium',
+    type: [String, Number] as PropType<string | number>,
+    default: "medium",
   },
   /**
    * 按钮的形状
@@ -148,7 +156,7 @@ const props = defineProps({
    * */
   shape: {
     type: String,
-    default: 'circle',
+    default: "circle",
   },
   /** 按钮的透明度 */
   opacity: {
@@ -181,7 +189,7 @@ const props = defineProps({
    * */
   position: {
     type: String,
-    default: 'right-bottom',
+    default: "right-bottom",
   },
   /** 禁用点击打开菜单栏 */
   expandable: {
@@ -194,289 +202,289 @@ const props = defineProps({
   },
   /** 自定义外部类名 */
   customClass: String,
-})
-const {
-  menus,
-  customStyle,
-  gap,
-  zIndex,
-  bgColor,
-  text,
-  textColor,
-  size,
-  fixed,
-  direction,
-  draggable,
-  position,
-  expandable,
-} = toRefs(props)
-const emit = defineEmits<IFloatButtonEmits>()
+});
+const emit = defineEmits<IFloatButtonEmits>();
 
-const instance = getCurrentInstance()
+const instance = getCurrentInstance();
 const btnSize: AnyObject = {
-  small: '50px',
-  medium: '60px',
-  large: '70px',
-}
-const open = ref(false)
-const rotate = computed(() => (open.value && !text.value ? '45deg' : '0deg'))
-const soleId = `hy-float-button__${guid()}`
-const fabSize = reactive({ width: 0, height: 0 }) // 悬浮按钮大小
-const screen = reactive({ width: 0, height: 0 })
+  small: "50px",
+  medium: "60px",
+  large: "70px",
+};
+const open = ref(false);
+const rotate = computed(() => (open.value && !props.text ? "45deg" : "0deg"));
+const soleId = `hy-float-button__${guid()}`;
+const fabSize = reactive({ width: 0, height: 0 }); // 悬浮按钮大小
+const screen = reactive({ width: 0, height: 0 });
 const currentCoordinate = reactive({
   top: 0,
   left: 0,
-})
+});
 // 按下时坐标相对于元素的偏移量
-const touchOffset = reactive({ x: 0, y: 0 })
-const attractTransition = ref<boolean>(false)
-const fabDirection = ref<HyApp.LeftRightType>('left')
-const fabDirection2 = ref<HyApp.TopBottomType>('top')
+const touchOffset = reactive({ x: 0, y: 0 });
+const attractTransition = ref<boolean>(false);
+const fabDirection = ref<HyApp.LeftRightType>("left");
+const fabDirection2 = ref<HyApp.TopBottomType>("top");
 const bounding = reactive({
   minLeft: 10,
   minTop: 10,
   maxLeft: 380,
   maxTop: 680,
-})
+});
 
 onMounted(async () => {
-  await getFatRect()
-  await getBounding()
-  initPosition()
-})
+  await getFatRect();
+  await getBounding();
+  initPosition();
+});
 
 watch(
-  () => position.value,
+  () => props.position,
   () => initPosition(),
-)
+);
 
 /**
  * @description 初始化距离
  * */
 const initPosition = () => {
-  const { minLeft, minTop, maxLeft, maxTop } = bounding
-  const centerY = (maxTop + minTop) / 2
-  const centerX = (maxLeft + minLeft) / 2
+  const { minLeft, minTop, maxLeft, maxTop } = bounding;
+  const centerY = (maxTop + minTop) / 2;
+  const centerX = (maxLeft + minLeft) / 2;
 
-  switch (position.value) {
-    case 'left-top':
-      currentCoordinate.top = minTop
-      currentCoordinate.left = minLeft
-      fabDirection.value = 'left'
-      fabDirection2.value = 'top'
-      break
-    case 'right-top':
-      currentCoordinate.top = minTop
-      currentCoordinate.left = maxLeft
-      fabDirection.value = 'right'
-      fabDirection2.value = 'top'
-      break
-    case 'left-bottom':
-      currentCoordinate.top = maxTop
-      currentCoordinate.left = minLeft
-      fabDirection.value = 'left'
-      fabDirection2.value = 'bottom'
-      break
-    case 'right-bottom':
-      currentCoordinate.top = maxTop
-      currentCoordinate.left = maxLeft
-      fabDirection.value = 'right'
-      fabDirection2.value = 'bottom'
-      break
-    case 'left-center':
-      currentCoordinate.top = centerY
-      currentCoordinate.left = minLeft
-      fabDirection.value = 'left'
-      fabDirection2.value = 'bottom'
-      break
-    case 'right-center':
-      currentCoordinate.top = centerY
-      currentCoordinate.left = maxLeft
-      fabDirection.value = 'right'
-      fabDirection2.value = 'bottom'
-      break
-    case 'top-center':
-      currentCoordinate.top = minTop
-      currentCoordinate.left = centerX
-      fabDirection.value = 'left'
-      fabDirection2.value = 'top'
-      break
-    case 'bottom-center':
-      currentCoordinate.top = maxTop
-      currentCoordinate.left = centerX
-      fabDirection.value = 'left'
-      fabDirection2.value = 'bottom'
-      break
+  switch (props.position) {
+    case "left-top":
+      currentCoordinate.top = minTop;
+      currentCoordinate.left = minLeft;
+      fabDirection.value = "left";
+      fabDirection2.value = "top";
+      break;
+    case "right-top":
+      currentCoordinate.top = minTop;
+      currentCoordinate.left = maxLeft;
+      fabDirection.value = "right";
+      fabDirection2.value = "top";
+      break;
+    case "left-bottom":
+      currentCoordinate.top = maxTop;
+      currentCoordinate.left = minLeft;
+      fabDirection.value = "left";
+      fabDirection2.value = "bottom";
+      break;
+    case "right-bottom":
+      currentCoordinate.top = maxTop;
+      currentCoordinate.left = maxLeft;
+      fabDirection.value = "right";
+      fabDirection2.value = "bottom";
+      break;
+    case "left-center":
+      currentCoordinate.top = centerY;
+      currentCoordinate.left = minLeft;
+      fabDirection.value = "left";
+      fabDirection2.value = "bottom";
+      break;
+    case "right-center":
+      currentCoordinate.top = centerY;
+      currentCoordinate.left = maxLeft;
+      fabDirection.value = "right";
+      fabDirection2.value = "bottom";
+      break;
+    case "top-center":
+      currentCoordinate.top = minTop;
+      currentCoordinate.left = centerX;
+      fabDirection.value = "left";
+      fabDirection2.value = "top";
+      break;
+    case "bottom-center":
+      currentCoordinate.top = maxTop;
+      currentCoordinate.left = centerX;
+      fabDirection.value = "left";
+      fabDirection2.value = "bottom";
+      break;
   }
-}
+};
 
 /**
  * @description 获取组件大小
  * */
 const getFloatBtnSize = computed(() => {
-  if (typeof size.value === 'string' && Object.keys(btnSize).includes(size.value)) {
-    return btnSize[size.value]
+  if (
+    typeof props.size === "string" &&
+    Object.keys(btnSize).includes(props.size)
+  ) {
+    return btnSize[props.size];
   } else {
-    return addUnit(size.value)
+    return addUnit(props.size);
   }
-})
+});
 
 /**
  * @description 悬浮按钮样式
  * */
 const FloatButtonStyle = computed(() => {
   const style: CSSProperties = {
-    top: currentCoordinate.top + 'px',
-    left: currentCoordinate.left + 'px',
-    backgroundColor: bgColor.value,
-    zIndex: zIndex.value,
-    color: textColor.value,
-    transition: 'all ease 0.3s',
-  }
-  if (fixed.value) style.position = 'fixed'
+    top: currentCoordinate.top + "px",
+    left: currentCoordinate.left + "px",
+    backgroundColor: props.bgColor,
+    zIndex: props.zIndex,
+    color: props.textColor,
+    transition: "all ease 0.3s",
+  };
+  if (props.fixed) style.position = "fixed";
 
-  style.height = getFloatBtnSize.value
-  style.width = getFloatBtnSize.value
-  return Object.assign(style, customStyle.value)
-})
+  style.height = getFloatBtnSize.value;
+  style.width = getFloatBtnSize.value;
+  return Object.assign(style, props.customStyle);
+});
 const menusStyle = computed(() => {
   const style: CSSProperties = {
-    backgroundColor: bgColor.value,
-  }
+    backgroundColor: props.bgColor,
+  };
 
   // 判断横向展示还是纵向展示
-  if (direction.value === 'row') {
-    if (fabDirection.value === 'right') {
-      style.transform = 'translateX(-100%)'
-      style.left = '100%'
-      style.paddingRight = getFloatBtnSize.value
-      style.flexDirection = 'row-reverse'
+  if (props.direction === "row") {
+    if (fabDirection.value === "right") {
+      style.transform = "translateX(-100%)";
+      style.left = "100%";
+      style.paddingRight = getFloatBtnSize.value;
+      style.flexDirection = "row-reverse";
     } else {
-      style.paddingLeft = getFloatBtnSize.value
+      style.paddingLeft = getFloatBtnSize.value;
     }
-    style.bottom = 0
-    style.transition = 'width 0.5s ease'
-    style.height = getFloatBtnSize.value
+    style.bottom = 0;
+    style.transition = "width 0.5s ease";
+    style.height = getFloatBtnSize.value;
     style.width = open.value
-      ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
-      : 0
+      ? addUnit(
+          getPx(getFloatBtnSize.value) * props.menus.length +
+            getPx(getFloatBtnSize.value),
+        )
+      : 0;
   } else {
-    if (fabDirection2.value === 'top') {
-      style.transform = 'translateX(-100%)'
-      style.height = '100%'
-      style.left = getFloatBtnSize.value
-      style.top = '0px'
-      style.paddingTop = getFloatBtnSize.value
+    if (fabDirection2.value === "top") {
+      style.transform = "translateX(-100%)";
+      style.height = "100%";
+      style.left = getFloatBtnSize.value;
+      style.top = "0px";
+      style.paddingTop = getFloatBtnSize.value;
     } else {
-      style.paddingBottom = getFloatBtnSize.value
-      style.bottom = 0
+      style.paddingBottom = getFloatBtnSize.value;
+      style.bottom = 0;
     }
-    style.transition = 'height 0.5s ease'
-    style.width = getFloatBtnSize.value
+    style.transition = "height 0.5s ease";
+    style.width = getFloatBtnSize.value;
     style.height = open.value
-      ? addUnit(getPx(getFloatBtnSize.value) * menus.value.length + getPx(getFloatBtnSize.value))
-      : 0
+      ? addUnit(
+          getPx(getFloatBtnSize.value) * props.menus.length +
+            getPx(getFloatBtnSize.value),
+        )
+      : 0;
   }
-  return style
-})
+  return style;
+});
 
 /**
  * @description 获取悬浮按钮大小
  * */
 const getFatRect = () => {
   return new Promise((resolve, reject) => {
-    getRect(`#${soleId}`, false, instance).then((rect) => {
-      const { width, height } = rect as UniApp.NodeInfo
-      fabSize.width = width
-      fabSize.height = height
-      resolve(rect)
-    })
-  })
-}
+    getRect(`#${soleId}`, false, instance)
+      .then((rect) => {
+        const { width, height } = rect as UniApp.NodeInfo;
+        fabSize.width = width as number;
+        fabSize.height = height as number;
+        resolve(rect);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+};
 
 /**
  * @description 点击悬浮按钮
  * */
 const handleClick = () => {
-  emit('click')
-  if (expandable.value) {
-    open.value = !open.value
+  emit("click");
+  if (props.expandable) {
+    open.value = !open.value;
   }
-}
+};
 
 /**
  * @description 点击单条菜单栏
  * */
 const handleMenuItemClick = (temp: MenusType, index: number) => {
-  emit('clickItem', temp, index)
-  open.value = false
-  if (typeof temp !== 'string' && temp?.url) {
+  emit("clickItem", temp, index);
+  open.value = false;
+  if (typeof temp !== "string" && temp?.url) {
     uni.navigateTo({
       url: temp.url,
-    })
+    });
   }
-}
+};
 
 const getBounding = () => {
   return new Promise((resolve) => {
-    const sysInfo = uni.getSystemInfoSync()
+    const sysInfo = uni.getSystemInfoSync();
 
-    const { top = 16, left = 16, right = 16, bottom = 16 } = gap.value
-    screen.width = sysInfo.windowWidth
-    screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
-    bounding.minTop = isH5 ? sysInfo.windowTop + top : top
-    bounding.minLeft = left
-    bounding.maxLeft = screen.width - fabSize.width - right
-    bounding.maxTop = screen.height - fabSize.height - bottom
-    resolve(bounding)
-  })
-}
+    const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap;
+    screen.width = sysInfo.windowWidth;
+    screen.height = isH5
+      ? sysInfo.windowTop + sysInfo.windowHeight
+      : sysInfo.windowHeight;
+    bounding.minTop = isH5 ? sysInfo.windowTop + top : top;
+    bounding.minLeft = left;
+    bounding.maxLeft = screen.width - fabSize.width - right;
+    bounding.maxTop = screen.height - fabSize.height - bottom;
+    resolve(bounding);
+  });
+};
 
 const handleTouchStart = (e: TouchEvent) => {
-  if (!draggable.value) return
+  if (!props.draggable) return;
 
-  const touch = e.touches[0]
-  touchOffset.x = touch.clientX - getPx(currentCoordinate.left)
-  touchOffset.y = touch.clientY - getPx(currentCoordinate.top)
-  attractTransition.value = false
-}
+  const touch = e.touches[0];
+  touchOffset.x = touch.clientX - getPx(currentCoordinate.left);
+  touchOffset.y = touch.clientY - getPx(currentCoordinate.top);
+  attractTransition.value = false;
+};
 
 function handleTouchMove(e: TouchEvent) {
-  if (!draggable.value) return
+  if (!props.draggable) return;
 
-  const touch = e.touches[0]
-  const { minLeft, minTop, maxLeft, maxTop } = bounding
-  let x = touch.clientX - touchOffset.x
-  let y = touch.clientY - touchOffset.y
+  const touch = e.touches[0];
+  const { minLeft, minTop, maxLeft, maxTop } = bounding;
+  let x = touch.clientX - touchOffset.x;
+  let y = touch.clientY - touchOffset.y;
 
-  if (x < minLeft) x = minLeft
-  else if (x > maxLeft) x = maxLeft
+  if (x < minLeft) x = minLeft;
+  else if (x > maxLeft) x = maxLeft;
 
-  if (y < minTop) y = minTop
-  else if (y > maxTop) y = maxTop
+  if (y < minTop) y = minTop;
+  else if (y > maxTop) y = maxTop;
 
-  currentCoordinate.top = y
-  currentCoordinate.left = x
+  currentCoordinate.top = y;
+  currentCoordinate.left = x;
 }
 
 function handleTouchEnd() {
-  if (props.draggable === false) return
+  if (!props.draggable) return;
 
-  const screenCenterX = screen.width / 2
-  const fabCenterX = currentCoordinate.left + fabSize.width / 2
-  attractTransition.value = true
+  const screenCenterX = screen.width / 2;
+  const fabCenterX = currentCoordinate.left + fabSize.width / 2;
+  attractTransition.value = true;
   if (fabCenterX < screenCenterX) {
-    currentCoordinate.left = bounding.minLeft
-    fabDirection.value = 'left'
+    currentCoordinate.left = bounding.minLeft;
+    fabDirection.value = "left";
   } else {
-    currentCoordinate.left = bounding.maxLeft
-    fabDirection.value = 'right'
+    currentCoordinate.left = bounding.maxLeft;
+    fabDirection.value = "right";
   }
 }
 </script>
 
 <style scoped lang="scss">
-@import './index.scss';
+@import "./index.scss";
 .hy-float-button {
   &__container {
     rotate: v-bind(rotate);