sard-uniapp 1.24.1 → 1.24.3

package/components/fab/fab.vue

@@ -6,49 +6,61 @@
     @click="onOverlayClick"
   />
 
-  <view :class="fabClass" :style="fabStyle">
+  <view
+    :class="fabClass"
+    :style="fabStyle"
+    @touchstart="onTouchStart"
+    @touchmove.stop.prevent="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+    @mousedown="onMouseDown"
+  >
+    <sar-fab-item
+      is-entry
+      :color="color"
+      :background="background"
+      @click="onItemEntryClick"
+    >
+      <slot :visible="visible">
+        <sar-icon :family="iconFamily || 'sari'" :name="entryIcon" />
+      </slot>
+    </sar-fab-item>
+
     <view
       :class="contentClass"
       :style="contentStyle"
       @transitionend="onTransitionEnd"
     >
-      <view
-        v-for="(item, index) in itemList"
-        :key="index"
-        :class="itemClass"
-        @click="onItemClick(item, index)"
-      >
-        <view v-if="!hideName" :class="bem.e('item-name')">
-          {{ item.name }}
-        </view>
-        <view
-          :class="bem.e('item-btn')"
-          :style="
-            stringifyStyle({ background: item.background, color: item.color })
-          "
-        >
-          <sar-icon :family="item.iconFamily" :name="item.icon" />
-        </view>
-      </view>
-    </view>
-    <view :class="itemEntryClass" @click="onItemEntryClick">
-      <view :class="bem.e('item-btn')" :style="itemEntryBtnStyle">
-        <sar-icon :family="iconFamily || 'sari'" :name="icon || 'plus'" />
-      </view>
+      <slot name="list" :on-item-click="onItemClick">
+        <sar-fab-item
+          v-for="(item, index) in itemList"
+          :key="index"
+          :index="index"
+          :name="item.name"
+          :color="item.color"
+          :background="item.background"
+          :icon="item.icon"
+          :icon-family="item.iconFamily"
+          :item="item"
+        />
+      </slot>
     </view>
   </view>
 </template>
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed, reactive, ref, toRef } from "vue";
+import { computed, provide, reactive, ref, toRef } from "vue";
 import { classNames, stringifyStyle, createBem, isNullish } from "../../utils";
 import {
-  defaultFabProps
+  defaultFabProps,
+  fabContextSymbol
 } from "./common";
 import { useTransition, useZIndex } from "../../use";
 import SarIcon from "../icon/icon.vue";
 import SarOverlay from "../overlay/overlay.vue";
+import { useFloatingBubble } from "../floating-bubble/useFloatingBubble";
+import SarFabItem from "../fab-item/fab-item.vue";
 /**
  * @property {string} rootClass 组件根元素类名，默认值：-。
  * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
@@ -59,18 +71,29 @@ import SarOverlay from "../overlay/overlay.vue";
  * @property {string} color 设置按钮图标的颜色，默认值：-。
  * @property {string} background 设置按钮的背景色，默认值：-。
  * @property {string} icon 设置入口按钮的图标，默认值：-。
+ * @property {string} visibleIcon 设置弹出扩展按钮时的入口按钮的图标，默认值：-。
  * @property {string} iconFamily 设置入口按钮的图标族，默认值：-。
  * @property {FabItem[]} itemList 设置扩展按钮，默认值：[]。
  * @property {boolean} hideName 是否隐藏按钮名称，默认值：false。
  * @property {boolean} overlayClosable 点击遮罩是否隐藏扩展按钮，默认值：false。
  * @property {number} duration 扩展按钮显隐动画时长，单位 ms，默认值：150。
+ * @property {boolean} draggable 是否可拖拽，默认值：false。
+ * @property {'x' | 'y' | 'both' | 'none'} axis 允许拖拽的方向轴，默认值：'y'。
+ * @property {'x' | 'y'} magnet 吸附到指定轴最近的一边，在拖拽时使用，默认值：-。
+ * @property {number} gapX 悬浮按钮与窗口左右两边的最小间距，单位为 px，在拖拽时使用，默认值：24。
+ * @property {number} gapY 悬浮按钮与窗口上下两边的最小间距，单位为 px，在拖拽时使用，默认值：24。
+ * @property {{ x: number; y: number }} offset 控制悬浮按钮的位置，在拖拽时使用，默认值：-。
+ * @property {number} navbarHeight 自定义顶部导航栏的高度，在拖拽时使用，默认值：0。
+ * @property {number} tabbarHeight 自定义底部标签栏的高度，在拖拽时使用，默认值：0。
  * @event {(event: any) => void} click 点击入口按钮时触发
  * @event {(item: FabItem, index: number) => void} select 点击扩展按钮时触发
+ * @event {(offset: { x: number; y: number }) => void} update 因用户拖拽导致位置改变时触发
  */
 export default  _defineComponent({
   components: {
     SarIcon,
     SarOverlay,
+    SarFabItem,
   },
   ...{
     options: {
@@ -89,13 +112,22 @@ export default  _defineComponent({
     color: { type: String, required: false },
     background: { type: String, required: false },
     icon: { type: String, required: false },
+    visibleIcon: { type: String, required: false },
     iconFamily: { type: String, required: false },
     itemList: { type: Array, required: false },
     hideName: { type: Boolean, required: false },
     overlayClosable: { type: Boolean, required: false },
-    duration: { type: Number, required: false }
+    duration: { type: Number, required: false },
+    draggable: { type: Boolean, required: false },
+    axis: { type: String, required: false },
+    magnet: { type: String, required: false },
+    gapX: { type: Number, required: false },
+    gapY: { type: Number, required: false },
+    offset: { type: Object, required: false },
+    navbarHeight: { type: Number, required: false },
+    tabbarHeight: { type: Number, required: false }
   }, defaultFabProps()),
-  emits: ["click", "select"],
+  emits: ["click", "select", "update:offset"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
@@ -110,12 +142,14 @@ export default  _defineComponent({
         prefix: bem.m("zoom-")
       })
     );
+    const entryIcon = computed(() => {
+      return visible.value ? props.visibleIcon || "close" : props.icon || "plus";
+    });
     const onItemEntryClick = (event) => {
-      if (props.itemList && props.itemList.length > 0) {
-        visible.value = !visible.value;
-        if (visible.value) {
-          increaseZIndex();
-        }
+      if (stopBubbling.value) return;
+      visible.value = !visible.value;
+      if (visible.value) {
+        increaseZIndex();
       }
       emit("click", event);
     };
@@ -128,22 +162,61 @@ export default  _defineComponent({
         visible.value = false;
       }
     };
+    const {
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onMouseDown,
+      position,
+      initialized,
+      animated,
+      bubbleId,
+      stopBubbling,
+      windowWidth,
+      windowHeight,
+      windowTop
+    } = useFloatingBubble(props, emit, {
+      disabled: visible
+    });
+    const isTop = computed(() => {
+      return props.draggable ? position.value.y > windowHeight / 2 ? false : true : !isNullish(props.top);
+    });
+    const isLeft = computed(() => {
+      return props.draggable ? position.value.x > windowWidth / 2 ? false : true : !isNullish(props.left);
+    });
+    provide(
+      fabContextSymbol,
+      reactive({
+        hideName: toRef(() => props.hideName),
+        isLeft,
+        visible,
+        onItemClick
+      })
+    );
     const fabClass = computed(() => {
       return classNames(
         bem.b(),
-        bem.m(isNullish(props.top) ? "bottom" : "top"),
-        bem.m(isNullish(props.left) ? "right" : "left"),
-        bem.m("visible", visible.value),
-        props.rootClass
+        bem.m(isTop.value ? "top" : "bottom"),
+        bem.m(isLeft.value ? "left" : "right"),
+        bem.m("animated", animated.value),
+        bem.m("initialized", initialized.value),
+        bem.m("draggable", props.draggable),
+        props.rootClass,
+        bubbleId
       );
     });
     const fabStyle = computed(() => {
       return stringifyStyle(props.rootStyle, {
         zIndex: visible.value ? zIndex.value : null,
-        top: props.top,
-        left: props.left,
-        right: !isNullish(props.left) ? "auto" : props.right,
-        bottom: !isNullish(props.top) ? "auto" : props.bottom
+        ...props.draggable ? {
+          top: `${windowTop}px`,
+          transform: `translate3d(${position.value.x}px, ${position.value.y}px, 0)`
+        } : {
+          top: props.top,
+          left: props.left,
+          right: isLeft.value ? "auto" : props.right,
+          bottom: isTop.value ? "auto" : props.bottom
+        }
       });
     });
     const contentClass = computed(() => {
@@ -153,24 +226,10 @@ export default  _defineComponent({
       return stringifyStyle({
         display: realVisible.value ? "flex" : "none",
         transitionDuration: props.duration + "ms",
-        transformOrigin: `${isNullish(props.top) ? "bottom" : "top"} ${isNullish(props.left) ? "right" : "left"}`
+        transformOrigin: `${isTop.value ? "top" : "bottom"} ${isLeft.value ? "left" : "right"}`
       });
     });
-    const itemEntryClass = computed(() => {
-      return classNames(bem.e("item"), bem.em("item", "entry"));
-    });
-    const itemEntryBtnStyle = computed(() => {
-      return stringifyStyle({
-        color: props.color,
-        background: props.background
-      });
-    });
-    const itemClass = computed(() => {
-      return classNames(bem.e("item"));
-    });
-    const __returned__ = { props, emit, bem, visible, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, onItemEntryClick, onItemClick, onOverlayClick, fabClass, fabStyle, contentClass, contentStyle, itemEntryClass, itemEntryBtnStyle, itemClass, get stringifyStyle() {
-      return stringifyStyle;
-    }, SarIcon, SarOverlay };
+    const __returned__ = { props, emit, bem, visible, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, entryIcon, onItemEntryClick, onItemClick, onOverlayClick, onTouchStart, onTouchMove, onTouchEnd, onMouseDown, position, initialized, animated, bubbleId, stopBubbling, windowWidth, windowHeight, windowTop, isTop, isLeft, fabClass, fabStyle, contentClass, contentStyle, SarIcon, SarOverlay, SarFabItem };
     return __returned__;
   }
 });

package/components/fab/index.d.ts

@@ -1 +1 @@
-export type { FabProps, FabEmits, FabItem } from './common';
+export type { FabProps, FabSlots, FabEmits, FabItem } from './common';

package/components/fab/index.scss

@@ -7,12 +7,19 @@
     right: var(--sar-fab-right);
     bottom: var(--sar-fab-bottom);
     z-index: var(--sar-fab-z-index);
-    gap: var(--sar-fab-item-gap);
+    opacity: 0;
   }
 
   @include e(content) {
     @include universal;
-    gap: var(--sar-fab-item-gap);
+    position: absolute;
+  }
+
+  @include m(draggable) {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
   }
 
   @include m(zoom-enter-from, zoom-leave-to) {
@@ -26,70 +33,40 @@
   }
 
   @include m(zoom-enter-active, zoom-leave-active) {
-    transition: transform var(--sar-fab-duration) ease-out,
+    transition:
+      transform var(--sar-fab-duration) ease-out,
       opacity var(--sar-fab-duration) ease-out;
   }
 
-  @include e(item) {
-    @include universal;
-    flex-direction: row;
-    align-items: center;
-    gap: var(--sar-fab-item-name-gap);
-    cursor: pointer;
-
-    &:active {
-      opacity: var(--sar-fab-item-active-opacity);
-    }
-
-    @include m(entry) {
-      @include e(item-btn) {
-        transition: transform var(--sar-fab-duration);
-      }
+  @include m(top) {
+    @include e(content) {
+      top: calc(100% + var(--sar-fab-item-gap));
     }
   }
 
-  @include e(item-name) {
-    @include universal;
-    font-size: var(--sar-fab-item-name-font-size);
-    color: var(--sar-fab-item-name-color);
-  }
-
-  @include e(item-btn) {
-    @include universal;
-    justify-content: center;
-    align-items: center;
-    width: var(--sar-fab-item-btn-size);
-    height: var(--sar-fab-item-btn-size);
-    border-radius: var(--sar-rounded-full);
-    font-size: var(--sar-fab-item-btn-font-size);
-    color: var(--sar-fab-item-btn-color);
-    background-color: var(--sar-fab-item-btn-bg);
-    box-shadow: var(--sar-fab-item-btn-box-shadow);
-  }
-
-  @include m(top) {
-    flex-direction: column-reverse;
+  @include m(bottom) {
+    @include e(content) {
+      bottom: calc(100% + var(--sar-fab-item-gap));
+    }
   }
 
   @include m(left) {
-    align-items: flex-start;
-
-    @include e(item) {
-      flex-direction: row-reverse;
+    @include e(content) {
+      left: 0;
     }
   }
 
   @include m(right) {
-    align-items: flex-end;
+    @include e(content) {
+      right: 0;
+    }
   }
 
-  @include m(visible) {
-    @include e(item) {
-      @include m(entry) {
-        @include e(item-btn) {
-          transform: rotate(45deg);
-        }
-      }
-    }
+  @include m(initialized) {
+    opacity: 1;
+  }
+
+  @include m(animated) {
+    transition: transform var(--sar-fab-duration);
   }
 }

package/components/fab-item/common.d.ts

@@ -0,0 +1,23 @@
+import { type StyleValue } from 'vue';
+import { type FabItem } from '../fab/common';
+export interface FabItemProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    name?: string;
+    color?: string;
+    background?: string;
+    icon?: string;
+    iconFamily?: string;
+    isEntry?: boolean;
+    index?: number;
+    item?: FabItem;
+}
+export declare const defaultFabItemProps: {};
+export interface FabItemSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface FabItemEmits {
+    (e: 'click', event: any): void;
+}
+export interface FabItemExpose {
+}

package/components/fab-item/common.js

@@ -0,0 +1 @@
+export const defaultFabItemProps = {};

package/components/fab-item/fab-item.d.ts

@@ -0,0 +1,14 @@
+import { type FabItemProps, type FabItemSlots } from './common';
+declare function __VLS_template(): Readonly<FabItemSlots> & FabItemSlots;
+declare const __VLS_component: import("vue").DefineComponent<FabItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<FabItemProps> & Readonly<{
+    onClick?: ((event: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/fab-item/fab-item.vue

@@ -0,0 +1,93 @@
+<template>
+  <view :class="fabItemClass" :style="fabItemStyle" @click="onClick">
+    <view
+      v-if="!isVisibleEmpty(name) && !context.hideName"
+      :class="bem.e('name')"
+    >
+      {{ name }}
+    </view>
+    <view
+      :class="bem.e('btn')"
+      :style="stringifyStyle({ background: background, color: color })"
+    >
+      <slot>
+        <sar-icon :family="iconFamily" :name="icon" />
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, inject } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  isVisibleEmpty
+} from "../../utils";
+import {
+  defaultFabItemProps
+} from "./common";
+import { fabContextSymbol } from "../fab/common";
+import SarIcon from "../icon/icon.vue";
+export default  _defineComponent({
+  components: {
+    SarIcon,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "fab-item",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    name: { type: String, required: false },
+    color: { type: String, required: false },
+    background: { type: String, required: false },
+    icon: { type: String, required: false },
+    iconFamily: { type: String, required: false },
+    isEntry: { type: Boolean, required: false },
+    index: { type: Number, required: false },
+    item: { type: Object, required: false }
+  }, defaultFabItemProps),
+  emits: ["click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("fab-item");
+    const context = inject(fabContextSymbol);
+    const onClick = (event) => {
+      if (!props.isEntry) {
+        context.onItemClick(props.item || {}, props.index || 0);
+      }
+      emit("click", event);
+    };
+    __expose({});
+    const fabItemClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("left", context.isLeft),
+        bem.m("entry", props.isEntry),
+        props.rootClass
+      );
+    });
+    const fabItemStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, context, onClick, fabItemClass, fabItemStyle, get stringifyStyle() {
+      return stringifyStyle;
+    }, get isVisibleEmpty() {
+      return isVisibleEmpty;
+    }, SarIcon };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/fab-item/index.d.ts

@@ -0,0 +1 @@
+export type { FabItemProps, FabItemSlots, FabItemEmits, FabItemExpose, } from './common';

package/components/fab-item/index.js

@@ -0,0 +1 @@
+export {};

package/components/fab-item/index.scss

@@ -0,0 +1,44 @@
+@use '../style/base' as *;
+
+@include bem(fab-item) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--sar-fab-item-name-gap);
+    cursor: pointer;
+
+    &:active {
+      opacity: var(--sar-fab-item-active-opacity);
+    }
+
+    @include m(left) {
+      flex-direction: row-reverse;
+    }
+
+    &:not(:first-child) {
+      margin-top: var(--sar-fab-item-gap);
+    }
+  }
+
+  @include e(name) {
+    @include universal;
+    font-size: var(--sar-fab-item-name-font-size);
+    color: var(--sar-fab-item-name-color);
+    white-space: nowrap;
+  }
+
+  @include e(btn) {
+    @include universal;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    width: var(--sar-fab-item-btn-size);
+    height: var(--sar-fab-item-btn-size);
+    border-radius: var(--sar-rounded-full);
+    font-size: var(--sar-fab-item-btn-font-size);
+    color: var(--sar-fab-item-btn-color);
+    background-color: var(--sar-fab-item-btn-bg);
+    box-shadow: var(--sar-fab-item-btn-box-shadow);
+  }
+}

package/components/floating-bubble/README.md

@@ -40,15 +40,18 @@ import FloatingBubble from 'sard-uniapp/components/floating-bubble/floating-bubb
 
 ### FloatingBubbleProps
 
-| 属性             | 描述                                    | 类型                           | 默认值 |
-| ---------------- | --------------------------------------- | ------------------------------ | ------ |
-| root-class       | 组件根元素类名                          | string                         | -      |
-| root-style       | 组件根元素样式                          | StyleValue                     | -      |
-| axis             | 允许拖拽的方向轴                        | 'x' \| 'y' \| 'both' \| 'none' | 'y'    |
-| magnet           | 吸附到指定轴最近的一边                  | 'x' \| 'y'                     | -      |
-| gap-x            | 气泡与窗口左右两边的最小间距，单位为 px | number                         | 24     |
-| gap-y            | 气泡与窗口上下两边的最小间距，单位为 px | number                         | 24     |
-| offset (v-model) | 控制气泡的位置                          | { x: number; y: number }       | -      |
+| 属性                             | 描述                                    | 类型                           | 默认值 |
+| -------------------------------- | --------------------------------------- | ------------------------------ | ------ |
+| root-class                       | 组件根元素类名                          | string                         | -      |
+| root-style                       | 组件根元素样式                          | StyleValue                     | -      |
+| axis                             | 允许拖拽的方向轴                        | 'x' \| 'y' \| 'both' \| 'none' | 'y'    |
+| magnet                           | 吸附到指定轴最近的一边                  | 'x' \| 'y'                     | -      |
+| gap-x                            | 气泡与窗口左右两边的最小间距，单位为 px | number                         | 24     |
+| gap-y                            | 气泡与窗口上下两边的最小间距，单位为 px | number                         | 24     |
+| offset (v-model)                 | 控制气泡的位置                          | { x: number; y: number }       | -      |
+| draggable <sup>1.24.2+</sup>     | 是否可拖拽                              | boolean                        | true   |
+| navbar-height <sup>1.24.3+</sup> | 自定义顶部导航栏的高度                  | number                         | 0      |
+| tabbar-height <sup>1.24.3+</sup> | 自定义底部标签栏的高度                  | number                         | 0      |
 
 ### FloatingBubbleSlots
 

package/components/floating-bubble/common.d.ts

@@ -2,6 +2,7 @@ import { type StyleValue } from 'vue';
 export interface FloatingBubbleProps {
     rootStyle?: StyleValue;
     rootClass?: string;
+    draggable?: boolean;
     axis?: 'x' | 'y' | 'both' | 'none';
     magnet?: 'x' | 'y';
     gapX?: number;
@@ -10,8 +11,11 @@ export interface FloatingBubbleProps {
         x: number;
         y: number;
     };
+    navbarHeight?: number;
+    tabbarHeight?: number;
 }
 export declare const defaultFloatingBubbleProps: {
+    draggable: boolean;
     axis: FloatingBubbleProps["axis"];
     gapX: number;
     gapY: number;

package/components/floating-bubble/floating-bubble.d.ts

@@ -14,6 +14,7 @@ declare const __VLS_component: import("vue").DefineComponent<FloatingBubbleProps
     }) => any) | undefined;
 }>, {
     axis: "x" | "y" | "both" | "none";
+    draggable: boolean;
     gapX: number;
     gapY: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;