sard-uniapp 1.24.1 → 1.24.2

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## [1.24.2](https://github.com/sutras/sard-uniapp/compare/v1.24.1...v1.24.2) (2025-09-06)
+
+
+### Bug Fixes
+
+* **count-down:** 修复行内嵌套块的问题 ([fd8112c](https://github.com/sutras/sard-uniapp/commit/fd8112c3885c0069b34f6709c7190a298d680726))
+* **popout:** 修正按钮插槽内容 ([7f29d80](https://github.com/sutras/sard-uniapp/commit/7f29d8059ac1dd342f85a5de54f42e867879ecfc))
+* **tag:** 阻止点击关闭时的事件冒泡 ([4220f31](https://github.com/sutras/sard-uniapp/commit/4220f311f0c5564ae095db6863f415f483f7f22e))
+
+
+### Features
+
+* **fab:** 添加拖拽功能 ([4d24318](https://github.com/sutras/sard-uniapp/commit/4d243186b4ba22ebe50722c67466eb702c88cbf5))
+
+
+
 ## [1.24.1](https://github.com/sutras/sard-uniapp/compare/v1.24.0...v1.24.1) (2025-08-31)
 
 

package/components/config/index.d.ts

@@ -13,6 +13,7 @@ import { type DatetimeRangePickerInputProps } from '../datetime-range-picker-inp
 import { type DialogProps } from '../dialog';
 import { type DividerProps } from '../divider';
 import { type DropdownProps } from '../dropdown';
+import { type FabProps } from '../fab';
 import { type FloatingBubbleProps } from '../floating-bubble';
 import { type FormProps } from '../form';
 import { type GridProps } from '../grid';
@@ -202,8 +203,13 @@ export declare const defaultConfig: {
         overlayClosable: boolean;
         hideName: boolean;
         duration: number;
+        draggable: boolean;
+        axis: FabProps["axis"];
+        gapX: number;
+        gapY: number;
     };
     floatingBubble: {
+        draggable: boolean;
         axis: FloatingBubbleProps["axis"];
         gapX: number;
         gapY: number;

package/components/config/index.js

@@ -152,8 +152,13 @@ export const defaultConfig = {
         overlayClosable: false,
         hideName: false,
         duration: 150,
+        draggable: false,
+        axis: 'y',
+        gapX: 24,
+        gapY: 24,
     },
     floatingBubble: {
+        draggable: true,
         axis: 'y',
         gapX: 24,
         gapY: 24,

package/components/count-down/README.md

@@ -57,12 +57,14 @@ import CountDown from 'sard-uniapp/components/count-down/count-down.vue'
 
 ### CountDownProps
 
-| 属性        | 描述                   | 类型    | 默认值     |
-| ----------- | ---------------------- | ------- | ---------- |
-| time        | 倒计时总时长，单位毫秒 | number  | 0          |
-| auto-start  | 是否自动开始倒计时     | boolean | true       |
-| format      | 时间格式               | string  | 'HH:mm:ss' |
-| millisecond | 是否开启毫秒级别渲染   | boolean | false      |
+| 属性                          | 描述                   | 类型       | 默认值     |
+| ----------------------------- | ---------------------- | ---------- | ---------- |
+| root-class <sup>1.24.2+</sup> | 组件根元素类名         | string     | -          |
+| root-style <sup>1.24.2+</sup> | 组件根元素样式         | StyleValue | -          |
+| time                          | 倒计时总时长，单位毫秒 | number     | 0          |
+| auto-start                    | 是否自动开始倒计时     | boolean    | true       |
+| format                        | 时间格式               | string     | 'HH:mm:ss' |
+| millisecond                   | 是否开启毫秒级别渲染   | boolean    | false      |
 
 ### CountDownSlots
 

package/components/count-down/common.d.ts

@@ -1,4 +1,7 @@
+import { type StyleValue } from 'vue';
 export interface CountDownProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
     time?: number;
     autoStart?: boolean;
     format?: string;

package/components/count-down/count-down.vue

@@ -1,9 +1,9 @@
 <template>
-  <text>
+  <view :class="countDownClass" :style="countDownStyle">
     <slot :time="currentTime">
       {{ formatTime(format, currentTime) }}
     </slot>
-  </text>
+  </view>
 </template>
 
 <script>
@@ -14,7 +14,10 @@ import {
   formatTime,
   defaultCountDownProps
 } from "./common";
+import { classNames, stringifyStyle, createBem } from "../../utils";
 /**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
  * @property {number} time 倒计时总时长，单位毫秒，默认值：0。
  * @property {boolean} autoStart 是否自动开始倒计时，默认值：true。
  * @property {string} format 时间格式，默认值：'HH:mm:ss'。
@@ -31,6 +34,8 @@ export default  _defineComponent({
   },
   __name: "count-down",
   props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
     time: { type: Number, required: false },
     autoStart: { type: Boolean, required: false },
     format: { type: String, required: false },
@@ -40,6 +45,7 @@ export default  _defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const bem = createBem("count-down");
     const remainTime = ref(props.time);
     let endTime = 0;
     let timer = null;
@@ -102,7 +108,13 @@ export default  _defineComponent({
     onBeforeUnmount(() => {
       pause();
     });
-    const __returned__ = { props, emit, remainTime, get endTime() {
+    const countDownClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const countDownStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, remainTime, get endTime() {
       return endTime;
     }, set endTime(v) {
       endTime = v;
@@ -114,10 +126,14 @@ export default  _defineComponent({
       return paused;
     }, set paused(v) {
       paused = v;
-    }, tick, start, pause, reset, precisionTime, currentTime, get formatTime() {
+    }, tick, start, pause, reset, precisionTime, currentTime, countDownClass, countDownStyle, get formatTime() {
       return formatTime;
     } };
     return __returned__;
   }
 });
 </script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/count-down/index.scss

@@ -0,0 +1,10 @@
+@use '../style/base' as *;
+
+@include bem(count-down) {
+  @include b() {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+}

package/components/fab/README.md

@@ -70,22 +70,28 @@ import Fab from 'sard-uniapp/components/fab/fab.vue'
 
 ### FabProps
 
-| 属性             | 描述                                         | 类型       | 默认值 |
-| ---------------- | -------------------------------------------- | ---------- | ------ |
-| root-class       | 组件根元素类名                               | string     | -      |
-| root-style       | 组件根元素样式                               | StyleValue | -      |
-| top              | 设置距离窗口顶部的距离，优先级比 `bottom` 高 | string     | -      |
-| right            | 设置距离窗口右边的距离                       | string     | -      |
-| bottom           | 设置距离窗口底部的距离                       | string     | -      |
-| left             | 设置距离窗口左边的距离，优先级比 `right` 高  | string     | -      |
-| color            | 设置按钮图标的颜色                           | string     | -      |
-| background       | 设置按钮的背景色                             | string     | -      |
-| icon             | 设置入口按钮的图标                           | string     | -      |
-| icon-family      | 设置入口按钮的图标族                         | string     | -      |
-| item-list        | 设置扩展按钮                                 | FabItem[]  | []     |
-| hide-name        | 是否隐藏按钮名称                             | boolean    | false  |
-| overlay-closable | 点击遮罩是否隐藏扩展按钮                     | boolean    | false  |
-| duration         | 扩展按钮显隐动画时长，单位 ms                | number     | 150    |
+| 属性                                | 描述                                         | 类型                           | 默认值 |
+| ----------------------------------- | -------------------------------------------- | ------------------------------ | ------ |
+| root-class                          | 组件根元素类名                               | string                         | -      |
+| root-style                          | 组件根元素样式                               | StyleValue                     | -      |
+| top                                 | 设置距离窗口顶部的距离，优先级比 `bottom` 高 | string                         | -      |
+| right                               | 设置距离窗口右边的距离                       | string                         | -      |
+| bottom                              | 设置距离窗口底部的距离                       | string                         | -      |
+| left                                | 设置距离窗口左边的距离，优先级比 `right` 高  | string                         | -      |
+| color                               | 设置按钮图标的颜色                           | string                         | -      |
+| background                          | 设置按钮的背景色                             | string                         | -      |
+| icon                                | 设置入口按钮的图标                           | string                         | -      |
+| icon-family                         | 设置入口按钮的图标族                         | string                         | -      |
+| item-list                           | 设置扩展按钮                                 | FabItem[]                      | []     |
+| hide-name                           | 是否隐藏按钮名称                             | boolean                        | false  |
+| overlay-closable                    | 点击遮罩是否隐藏扩展按钮                     | boolean                        | false  |
+| duration                            | 扩展按钮显隐动画时长，单位 ms                | number                         | 150    |
+| draggable <sup>1.24.2+</sup>        | 是否可拖拽                                   | boolean                        | false  |
+| axis <sup>1.24.2+</sup>             | 允许拖拽的方向轴                             | 'x' \| 'y' \| 'both' \| 'none' | 'y'    |
+| magnet <sup>1.24.2+</sup>           | 吸附到指定轴最近的一边                       | 'x' \| 'y'                     | -      |
+| gap-x <sup>1.24.2+</sup>            | 悬浮按钮与窗口左右两边的最小间距，单位为 px  | number                         | 24     |
+| gap-y <sup>1.24.2+</sup>            | 悬浮按钮与窗口上下两边的最小间距，单位为 px  | number                         | 24     |
+| offset (v-model) <sup>1.24.2+</sup> | 控制悬浮按钮的位置                           | { x: number; y: number }       | -      |
 
 ### FabSlots
 
@@ -95,10 +101,11 @@ import Fab from 'sard-uniapp/components/fab/fab.vue'
 
 ### FabEmits
 
-| 事件   | 描述               | 类型                                   |
-| ------ | ------------------ | -------------------------------------- |
-| click  | 点击入口按钮时触发 | (event: any) => void                   |
-| select | 点击扩展按钮时触发 | (item: FabItem, index: number) => void |
+| 事件                             | 描述                         | 类型                                       |
+| -------------------------------- | ---------------------------- | ------------------------------------------ |
+| click                            | 点击入口按钮时触发           | (event: any) => void                       |
+| select                           | 点击扩展按钮时触发           | (item: FabItem, index: number) => void     |
+| update:offset <sup>1.24.2+</sup> | 因用户拖拽导致位置改变时触发 | (offset: { x: number; y: number }) => void |
 
 ### FabItem
 

package/components/fab/common.d.ts

@@ -14,16 +14,33 @@ export interface FabProps {
     hideName?: boolean;
     overlayClosable?: boolean;
     duration?: number;
+    draggable?: boolean;
+    axis?: 'x' | 'y' | 'both' | 'none';
+    magnet?: 'x' | 'y';
+    gapX?: number;
+    gapY?: number;
+    offset?: {
+        x: number;
+        y: number;
+    };
 }
 export declare const defaultFabProps: () => {
     itemList: () => never[];
     overlayClosable: boolean;
     hideName: boolean;
     duration: number;
+    draggable: boolean;
+    axis: FabProps["axis"];
+    gapX: number;
+    gapY: number;
 };
 export interface FabEmits {
     (e: 'click', event: any): void;
     (e: 'select', item: FabItem, index: number): void;
+    (e: 'update:offset', offset: {
+        x: number;
+        y: number;
+    }): void;
 }
 export interface FabItem {
     name?: string;

package/components/fab/fab.d.ts

@@ -2,13 +2,25 @@ import { type FabProps, FabItem } from './common';
 declare const _default: import("vue").DefineComponent<FabProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: any) => any;
     select: (item: FabItem, index: number) => any;
+    "update:offset": (offset: {
+        x: number;
+        y: number;
+    }) => any;
 }, string, import("vue").PublicProps, Readonly<FabProps> & Readonly<{
     onClick?: ((event: any) => any) | undefined;
     onSelect?: ((item: FabItem, index: number) => any) | undefined;
+    "onUpdate:offset"?: ((offset: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
 }>, {
+    axis: "x" | "y" | "both" | "none";
     duration: number;
     overlayClosable: boolean;
+    draggable: boolean;
     itemList: FabItem[];
     hideName: boolean;
+    gapX: number;
+    gapY: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/components/fab/fab.vue

@@ -6,7 +6,21 @@
     @click="onOverlayClick"
   />
 
-  <view :class="fabClass" :style="fabStyle">
+  <view
+    :class="fabClass"
+    :style="fabStyle"
+    @touchstart="onTouchStart"
+    @touchmove.stop.prevent="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+    @mousedown="onMouseDown"
+  >
+    <view :class="itemEntryClass" @click="onItemEntryClick">
+      <view :class="bem.e('item-btn')" :style="itemEntryBtnStyle">
+        <sar-icon :family="iconFamily || 'sari'" :name="icon || 'plus'" />
+      </view>
+    </view>
+
     <view
       :class="contentClass"
       :style="contentStyle"
@@ -31,11 +45,6 @@
         </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>
-    </view>
   </view>
 </template>
 
@@ -49,6 +58,7 @@ import {
 import { useTransition, useZIndex } from "../../use";
 import SarIcon from "../icon/icon.vue";
 import SarOverlay from "../overlay/overlay.vue";
+import { useFloatingBubble } from "../floating-bubble/useFloatingBubble";
 /**
  * @property {string} rootClass 组件根元素类名，默认值：-。
  * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
@@ -64,8 +74,15 @@ import SarOverlay from "../overlay/overlay.vue";
  * @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 控制悬浮按钮的位置，默认值：-。
  * @event {(event: any) => void} click 点击入口按钮时触发
  * @event {(item: FabItem, index: number) => void} select 点击扩展按钮时触发
+ * @event {(offset: { x: number; y: number }) => void} update 因用户拖拽导致位置改变时触发
  */
 export default  _defineComponent({
   components: {
@@ -93,9 +110,15 @@ export default  _defineComponent({
     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 }
   }, defaultFabProps()),
-  emits: ["click", "select"],
+  emits: ["click", "select", "update:offset"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
@@ -111,6 +134,7 @@ export default  _defineComponent({
       })
     );
     const onItemEntryClick = (event) => {
+      if (stopBubbling.value) return;
       if (props.itemList && props.itemList.length > 0) {
         visible.value = !visible.value;
         if (visible.value) {
@@ -120,6 +144,7 @@ export default  _defineComponent({
       emit("click", event);
     };
     const onItemClick = (item, index) => {
+      if (stopBubbling.value) return;
       visible.value = false;
       emit("select", item, index);
     };
@@ -128,32 +153,51 @@ export default  _defineComponent({
         visible.value = false;
       }
     };
+    const {
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onMouseDown,
+      position,
+      initialized,
+      animated,
+      bubbleId,
+      stopBubbling,
+      windowWidth,
+      windowHeight
+    } = 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);
+    });
     const fabClass = computed(() => {
       return classNames(
         bem.b(),
-        bem.m(isNullish(props.top) ? "bottom" : "top"),
-        bem.m(isNullish(props.left) ? "right" : "left"),
+        bem.m(isTop.value ? "top" : "bottom"),
+        bem.m(isLeft.value ? "left" : "right"),
         bem.m("visible", visible.value),
-        props.rootClass
+        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
-      });
-    });
-    const contentClass = computed(() => {
-      return classNames(bem.e("content"), transitionClass.value);
-    });
-    const contentStyle = computed(() => {
-      return stringifyStyle({
-        display: realVisible.value ? "flex" : "none",
-        transitionDuration: props.duration + "ms",
-        transformOrigin: `${isNullish(props.top) ? "bottom" : "top"} ${isNullish(props.left) ? "right" : "left"}`
+        ...props.draggable ? {
+          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 itemEntryClass = computed(() => {
@@ -165,10 +209,20 @@ export default  _defineComponent({
         background: props.background
       });
     });
+    const contentClass = computed(() => {
+      return classNames(bem.e("content"), transitionClass.value);
+    });
+    const contentStyle = computed(() => {
+      return stringifyStyle({
+        display: realVisible.value ? "flex" : "none",
+        transitionDuration: props.duration + "ms",
+        transformOrigin: `${isTop.value ? "top" : "bottom"} ${isLeft.value ? "left" : "right"}`
+      });
+    });
     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() {
+    const __returned__ = { props, emit, bem, visible, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, onItemEntryClick, onItemClick, onOverlayClick, onTouchStart, onTouchMove, onTouchEnd, onMouseDown, position, initialized, animated, bubbleId, stopBubbling, windowWidth, windowHeight, isTop, isLeft, fabClass, fabStyle, itemEntryClass, itemEntryBtnStyle, contentClass, contentStyle, itemClass, get stringifyStyle() {
       return stringifyStyle;
     }, SarIcon, SarOverlay };
     return __returned__;

package/components/fab/index.scss

@@ -7,14 +7,21 @@
     right: var(--sar-fab-right);
     bottom: var(--sar-fab-bottom);
     z-index: var(--sar-fab-z-index);
-    gap: var(--sar-fab-item-gap);
   }
 
   @include e(content) {
     @include universal;
+    position: absolute;
     gap: var(--sar-fab-item-gap);
   }
 
+  @include m(draggable) {
+    top: 0;
+    left: 0;
+    right: auto;
+    bottom: auto;
+  }
+
   @include m(zoom-enter-from, zoom-leave-to) {
     opacity: 0;
     transform: scale(0.4);
@@ -26,7 +33,8 @@
   }
 
   @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;
   }
 
@@ -52,10 +60,12 @@
     @include universal;
     font-size: var(--sar-fab-item-name-font-size);
     color: var(--sar-fab-item-name-color);
+    white-space: nowrap;
   }
 
   @include e(item-btn) {
     @include universal;
+    flex: none;
     justify-content: center;
     align-items: center;
     width: var(--sar-fab-item-btn-size);
@@ -68,11 +78,21 @@
   }
 
   @include m(top) {
-    flex-direction: column-reverse;
+    @include e(content) {
+      top: calc(100% + var(--sar-fab-item-gap));
+    }
+  }
+
+  @include m(bottom) {
+    @include e(content) {
+      bottom: calc(100% + var(--sar-fab-item-gap));
+    }
   }
 
   @include m(left) {
-    align-items: flex-start;
+    @include e(content) {
+      left: 0;
+    }
 
     @include e(item) {
       flex-direction: row-reverse;
@@ -80,7 +100,9 @@
   }
 
   @include m(right) {
-    align-items: flex-end;
+    @include e(content) {
+      right: 0;
+    }
   }
 
   @include m(visible) {
@@ -92,4 +114,12 @@
       }
     }
   }
+
+  @include m(initialized) {
+    opacity: 1;
+  }
+
+  @include m(animated) {
+    transition: transform var(--sar-fab-duration);
+  }
 }

package/components/floating-bubble/README.md

@@ -40,15 +40,16 @@ 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   |
 
 ### 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;
@@ -12,6 +13,7 @@ export interface FloatingBubbleProps {
     };
 }
 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>;

package/components/floating-bubble/floating-bubble.vue

@@ -15,20 +15,12 @@
 
 <script>
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
-import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
-import {
-  classNames,
-  stringifyStyle,
-  createBem,
-  getBoundingClientRect,
-  uniqid,
-  getWindowInfo,
-  clamp
-} from "../../utils";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
 import {
   defaultFloatingBubbleProps
 } from "./common";
-import { useMouseDown, useTimeout } from "../../use";
+import { useFloatingBubble } from "./useFloatingBubble";
 /**
  * @property {string} rootClass 组件根元素类名，默认值：-。
  * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
@@ -37,6 +29,7 @@ import { useMouseDown, useTimeout } from "../../use";
  * @property {number} gapX 气泡与窗口左右两边的最小间距，单位为 px，默认值：24。
  * @property {number} gapY 气泡与窗口上下两边的最小间距，单位为 px，默认值：24。
  * @property {{ x: number; y: number }} offset 控制气泡的位置，默认值：-。
+ * @property {boolean} draggable 是否可拖拽，默认值：true。
  * @event {(event: any) => void} click 点击时触发
  * @event {(offset: { x: number; y: number }) => void} update 因用户拖拽导致位置改变时触发
  */
@@ -51,6 +44,7 @@ export default  _defineComponent({
   props:  _mergeDefaults({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
+    draggable: { type: Boolean, required: false },
     axis: { type: String, required: false },
     magnet: { type: String, required: false },
     gapX: { type: Number, required: false },
@@ -63,112 +57,16 @@ export default  _defineComponent({
     const props = __props;
     const emit = __emit;
     const bem = createBem("floating-bubble");
-    const instance = getCurrentInstance();
-    const bubbleId = uniqid();
-    let bubbleRect;
-    const { windowWidth, windowHeight } = getWindowInfo();
-    let downCoord = {
-      x: 0,
-      y: 0
-    };
-    const initialized = ref(false);
-    const position = ref({
-      x: 0,
-      y: 0
-    });
-    watch(
-      () => props.offset,
-      () => {
-        if (props.offset) {
-          position.value = props.offset;
-        }
-      }
-    );
-    const animated = ref(false);
-    const { start: nonAnimatedLater, stop: cancelNonAnimated } = useTimeout(() => {
-      animated.value = false;
-    }, 500);
-    function getMinX() {
-      return props.gapX;
-    }
-    function getMaxX() {
-      return windowWidth - props.gapX - bubbleRect.width;
-    }
-    function getMinY() {
-      return props.gapY + 44 + 25;
-    }
-    function getMaxY() {
-      return windowHeight - props.gapY - bubbleRect.height;
-    }
-    onMounted(async () => {
-      bubbleRect = await getBoundingClientRect(`.${bubbleId}`, instance);
-      position.value = props.offset ?? {
-        x: getMaxX(),
-        y: getMaxY()
-      };
-      bubbleRect = void 0;
-      initialized.value = true;
-    });
-    const onTouchStart = async (event) => {
-      cancelNonAnimated();
-      animated.value = false;
-      downCoord = {
-        x: event.touches[0].clientX,
-        y: event.touches[0].clientY
-      };
-      bubbleRect = await getBoundingClientRect(`.${bubbleId}`, instance);
-    };
-    const onTouchMove = (event) => {
-      if (!bubbleRect) {
-        return;
-      }
-      let x = 0;
-      let y = 0;
-      if (props.axis === "none") {
-        x = getMaxX();
-        y = getMaxY();
-      } else {
-        const deltaX = event.touches[0].clientX - downCoord.x;
-        const deltaY = event.touches[0].clientY - downCoord.y;
-        x = bubbleRect.left + deltaX;
-        y = bubbleRect.top + deltaY;
-        x = clamp(x, getMinX(), getMaxX());
-        y = clamp(y, getMinY(), getMaxY());
-        if (props.axis === "y") {
-          x = getMaxX();
-        } else if (props.axis === "x") {
-          y = getMaxY();
-        }
-      }
-      const offset = {
-        x,
-        y
-      };
-      position.value = offset;
-      emit("update:offset", offset);
-    };
-    const onTouchEnd = () => {
-      if (bubbleRect) {
-        if (props.magnet) {
-          let { x, y } = position.value;
-          if (props.magnet === "x") {
-            x = x < (windowWidth - bubbleRect.width) / 2 ? getMinX() : getMaxX();
-          } else if (props.magnet === "y") {
-            y = y < (windowHeight - bubbleRect.height) / 2 ? getMinY() : getMaxY();
-          }
-          const offset = {
-            x,
-            y
-          };
-          position.value = offset;
-          emit("update:offset", offset);
-        }
-      }
-      animated.value = true;
-      nonAnimatedLater();
-      bubbleRect = void 0;
-    };
-    const onMouseDown = useMouseDown(onTouchStart, onTouchMove, onTouchEnd);
+    const {
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onMouseDown,
+      position,
+      initialized,
+      animated,
+      bubbleId
+    } = useFloatingBubble(props, emit);
     const onClick = (event) => {
       emit("click", event);
     };
@@ -182,19 +80,12 @@ export default  _defineComponent({
       );
     });
     const floatingBubbleStyle = computed(() => {
+      const { x, y } = position.value;
       return stringifyStyle(props.rootStyle, {
-        transform: `translate3d(${position.value.x}px, ${position.value.y}px, 0)`
+        transform: `translate3d(${x}px, ${y}px, 0)`
       });
     });
-    const __returned__ = { props, emit, bem, instance, bubbleId, get bubbleRect() {
-      return bubbleRect;
-    }, set bubbleRect(v) {
-      bubbleRect = v;
-    }, windowWidth, windowHeight, get downCoord() {
-      return downCoord;
-    }, set downCoord(v) {
-      downCoord = v;
-    }, initialized, position, animated, nonAnimatedLater, cancelNonAnimated, getMinX, getMaxX, getMinY, getMaxY, onTouchStart, onTouchMove, onTouchEnd, onMouseDown, onClick, floatingBubbleClass, floatingBubbleStyle };
+    const __returned__ = { props, emit, bem, onTouchStart, onTouchMove, onTouchEnd, onMouseDown, position, initialized, animated, bubbleId, onClick, floatingBubbleClass, floatingBubbleStyle };
     return __returned__;
   }
 });

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

@@ -0,0 +1,43 @@
+import { MaybeRef } from 'vue';
+export interface UseFloatingBubbleProps {
+    draggable?: boolean;
+    gapX: number;
+    gapY: number;
+    axis: 'x' | 'y' | 'none' | 'both';
+    magnet?: 'x' | 'y';
+    offset?: {
+        x: number;
+        y: number;
+    };
+}
+export interface UseFloatingBubbleEmits {
+    (e: 'update:offset', offset: {
+        x: number;
+        y: number;
+    }): void;
+}
+export interface UseFloatingBubbleOptions {
+    disabled?: MaybeRef<boolean>;
+}
+export declare function useFloatingBubble(props: UseFloatingBubbleProps, emit: UseFloatingBubbleEmits, options?: UseFloatingBubbleOptions): {
+    onTouchStart: (event: TouchEvent) => Promise<void>;
+    onTouchMove: (event: TouchEvent) => void;
+    onTouchEnd: () => void;
+    onMouseDown: (event: MouseEvent) => void;
+    position: import("vue").Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    initialized: import("vue").Ref<boolean, boolean>;
+    animated: import("vue").Ref<boolean, boolean>;
+    bubbleId: string;
+    stopBubbling: import("vue").Ref<boolean, boolean>;
+    windowWidth: number;
+    windowHeight: number;
+};

package/components/floating-bubble/useFloatingBubble.js

@@ -0,0 +1,137 @@
+import { computed, getCurrentInstance, onMounted, ref, unref, watch, } from 'vue';
+import { useMouseDown, useTimeout } from '../../use';
+import { clamp, getBoundingClientRect, getWindowInfo, uniqid, } from '../../utils';
+export function useFloatingBubble(props, emit, options = {}) {
+    const disabled = computed(() => !props.draggable || unref(options.disabled));
+    const instance = getCurrentInstance();
+    const bubbleId = uniqid();
+    const initialized = ref(false);
+    let bubbleRect;
+    const { windowWidth, windowHeight } = getWindowInfo();
+    let downCoord = {
+        x: 0,
+        y: 0,
+    };
+    const position = ref({
+        x: 0,
+        y: 0,
+    });
+    const animated = ref(false);
+    const stopBubbling = ref(false);
+    const { start: nonAnimatedLater, stop: cancelNonAnimated } = useTimeout(() => {
+        animated.value = false;
+    }, 500);
+    function getMinX() {
+        return props.gapX;
+    }
+    function getMaxX() {
+        return windowWidth - props.gapX - bubbleRect.width;
+    }
+    function getMinY() {
+        return props.gapY + 44 + 25;
+    }
+    function getMaxY() {
+        return windowHeight - props.gapY - bubbleRect.height;
+    }
+    const onTouchStart = async (event) => {
+        stopBubbling.value = false;
+        if (disabled.value)
+            return;
+        cancelNonAnimated();
+        animated.value = false;
+        downCoord = {
+            x: event.touches[0].clientX,
+            y: event.touches[0].clientY,
+        };
+        bubbleRect = await getBoundingClientRect(`.${bubbleId}`, instance);
+    };
+    const onTouchMove = (event) => {
+        if (disabled.value)
+            return;
+        if (!bubbleRect) {
+            return;
+        }
+        let x = 0;
+        let y = 0;
+        if (props.axis === 'none') {
+            x = getMaxX();
+            y = getMaxY();
+        }
+        else {
+            const deltaX = event.touches[0].clientX - downCoord.x;
+            const deltaY = event.touches[0].clientY - downCoord.y;
+            const deviation = 10;
+            if (Math.abs(deltaX) > deviation || Math.abs(deltaY) > deviation) {
+                stopBubbling.value = true;
+            }
+            x = bubbleRect.left + deltaX;
+            y = bubbleRect.top + deltaY;
+            x = clamp(x, getMinX(), getMaxX());
+            y = clamp(y, getMinY(), getMaxY());
+            if (props.axis === 'y') {
+                x = getMaxX();
+            }
+            else if (props.axis === 'x') {
+                y = getMaxY();
+            }
+        }
+        const offset = {
+            x,
+            y,
+        };
+        position.value = offset;
+        emit('update:offset', offset);
+    };
+    const onTouchEnd = () => {
+        if (disabled.value)
+            return;
+        if (bubbleRect) {
+            if (props.magnet) {
+                let { x, y } = position.value;
+                if (props.magnet === 'x') {
+                    x = x < (windowWidth - bubbleRect.width) / 2 ? getMinX() : getMaxX();
+                }
+                else if (props.magnet === 'y') {
+                    y = y < (windowHeight - bubbleRect.height) / 2 ? getMinY() : getMaxY();
+                }
+                const offset = {
+                    x,
+                    y,
+                };
+                position.value = offset;
+                emit('update:offset', offset);
+            }
+        }
+        animated.value = true;
+        nonAnimatedLater();
+        bubbleRect = undefined;
+    };
+    const onMouseDown = useMouseDown(onTouchStart, onTouchMove, onTouchEnd);
+    onMounted(async () => {
+        bubbleRect = await getBoundingClientRect(`.${bubbleId}`, instance);
+        position.value = props.offset ?? {
+            x: getMaxX(),
+            y: getMaxY(),
+        };
+        bubbleRect = undefined;
+        initialized.value = true;
+    });
+    watch(() => props.offset, () => {
+        if (props.offset) {
+            position.value = props.offset;
+        }
+    });
+    return {
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        onMouseDown,
+        position,
+        initialized,
+        animated,
+        bubbleId,
+        stopBubbling,
+        windowWidth,
+        windowHeight,
+    };
+}

package/components/popout/README.md

@@ -77,14 +77,14 @@ type PopoutBeforeClose = (
 
 ### PopoutSlots
 
-| 插槽                             | 描述                                                                                                                                                       | 属性                                 |
-| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
-| default                          | 自定义主体内容                                                                                                                                             | -                                    |
-| title                            | 自定义标题                                                                                                                                                 | -                                    |
-| title-prepend <sup>1.19.2+</sup> | 自定义标题前面内容                                                                                                                                         | -                                    |
-| cancel                           | 自定义确定按钮内容                                                                                                                                         | -                                    |
-| confirm                          | 自定义取消按钮内容                                                                                                                                         | -                                    |
-| visible                          | 同默认插槽，额外接收一些判断弹出框显示状态的属性，用于小程序端多节点渲染的性能问题；`whole` 当开始显示到完全隐藏时为真，`already` 当开始显示时到以后都为真 | { whole: boolean, already: boolean } |
+| 插槽                             | 描述                                                                                                                                                       | 属性                                                                                           |
+| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| default                          | 自定义主体内容                                                                                                                                             | -                                                                                              |
+| title                            | 自定义标题                                                                                                                                                 | -                                                                                              |
+| title-prepend <sup>1.19.2+</sup> | 自定义标题前面内容                                                                                                                                         | -                                                                                              |
+| cancel <sup>1.24.2+</sup>        | 自定义取消按钮内容                                                                                                                                         | { onClick: () => void; loading: boolean; visible?: boolean; text: string }                     |
+| confirm <sup>1.24.2+</sup>       | 自定义确定按钮内容                                                                                                                                         | { onClick: () => void; loading: boolean; visible?: boolean; text: string; disabled?: boolean } |
+| visible                          | 同默认插槽，额外接收一些判断弹出框显示状态的属性，用于小程序端多节点渲染的性能问题；`whole` 当开始显示到完全隐藏时为真，`already` 当开始显示时到以后都为真 | { whole: boolean, already: boolean }                                                           |
 
 ### PopoutEmits
 

package/components/popout/common.d.ts

@@ -34,8 +34,19 @@ export declare const defaultPopoutProps: {
 export interface PopoutSlots {
     default?(props: Record<string, never>): any;
     title?(props: Record<string, never>): any;
-    cancel?(props: Record<string, never>): any;
-    confirm?(props: Record<string, never>): any;
+    cancel?(props: {
+        onClick: () => void;
+        loading: boolean;
+        visible?: boolean;
+        text: string;
+    }): any;
+    confirm?(props: {
+        onClick: () => void;
+        loading: boolean;
+        visible?: boolean;
+        text: string;
+        disabled?: boolean;
+    }): any;
     visible?(props: {
         whole: boolean;
         already: boolean;

package/components/popout/popout.vue

@@ -12,18 +12,23 @@
     <view :class="popoutClass" :style="popoutStyle" @transitionend.stop>
       <view :class="classNames(bem.e('header'), bem.em('header', props.type))">
         <view v-if="type === 'compact'" :class="bem.e('button-wrap')">
-          <sar-button
-            type="pale-text"
-            theme="neutral"
-            :root-class="classNames(bem.e('header-cancel'))"
+          <slot
+            name="cancel"
+            :on-click="onCancel"
             :loading="loading.cancel"
-            block
-            @click="onCancel"
+            :text="mergedCancelText"
           >
-            <template v-if="cancelText">{{ cancelText }}</template>
-            <slot v-else-if="$slots.cancel" name="cancel"></slot>
-            <template v-else>{{ t('cancel') }}</template>
-          </sar-button>
+            <sar-button
+              type="pale-text"
+              theme="neutral"
+              :root-class="classNames(bem.e('header-cancel'))"
+              :loading="loading.cancel"
+              block
+              @click="onCancel"
+            >
+              {{ mergedCancelText }}
+            </sar-button>
+          </slot>
         </view>
         <slot name="title-prepend"></slot>
         <view :class="bem.e('title')">
@@ -33,19 +38,25 @@
           <slot v-else-if="$slots.title" name="title"></slot>
         </view>
         <view v-if="type === 'compact'" :class="bem.e('button-wrap')">
-          <sar-button
-            type="pale-text"
-            theme="primary"
-            :root-class="classNames(bem.e('header-confirm'))"
-            :loading="loading.confirm"
+          <slot
+            name="confirm"
+            :on-click="onConfirm"
             :disabled="confirmDisabled"
-            block
-            @click="onConfirm"
+            :loading="loading.confirm"
+            :text="mergedConfirmText"
           >
-            <template v-if="confirmText">{{ confirmText }}</template>
-            <slot v-else-if="$slots.confirm" name="confirm"></slot>
-            <template v-else>{{ t('confirm') }}</template>
-          </sar-button>
+            <sar-button
+              type="pale-text"
+              theme="primary"
+              :root-class="classNames(bem.e('header-confirm'))"
+              :loading="loading.confirm"
+              :disabled="confirmDisabled"
+              block
+              @click="onConfirm"
+            >
+              {{ mergedConfirmText }}
+            </sar-button>
+          </slot>
         </view>
         <view
           v-if="type === 'loose' && showClose"
@@ -60,33 +71,46 @@
       <slot></slot>
       <slot name="visible" :whole="wholeVisible" :already="already"></slot>
       <view v-if="showFooter && type === 'loose'" :class="bem.e('footer')">
-        <sar-button
-          v-if="showCancel"
-          type="pale"
-          theme="primary"
-          round
+        <slot
+          name="cancel"
+          :on-click="onCancel"
+          :visible="showCancel"
           :loading="loading.cancel"
-          block
-          @click="onCancel"
+          :text="mergedCancelText"
         >
-          <template v-if="cancelText">{{ cancelText }}</template>
-          <slot v-else-if="$slots.cancel" name="cancel"></slot>
-          <template v-else>{{ t('cancel') }}</template>
-        </sar-button>
-        <sar-button
-          v-if="showConfirm"
-          type="default"
-          theme="primary"
-          round
-          :loading="loading.confirm"
+          <sar-button
+            v-if="showCancel"
+            type="pale"
+            theme="primary"
+            round
+            :loading="loading.cancel"
+            block
+            @click="onCancel"
+          >
+            {{ mergedCancelText }}
+          </sar-button>
+        </slot>
+        <slot
+          name="confirm"
+          :visible="showConfirm"
+          :on-click="onConfirm"
           :disabled="confirmDisabled"
-          block
-          @click="onConfirm"
+          :loading="loading.confirm"
+          :text="mergedConfirmText"
         >
-          <template v-if="confirmText">{{ confirmText }}</template>
-          <slot v-else-if="$slots.confirm" name="confirm"></slot>
-          <template v-else>{{ t('confirm') }}</template>
-        </sar-button>
+          <sar-button
+            v-if="showConfirm"
+            type="default"
+            theme="primary"
+            round
+            :loading="loading.confirm"
+            :disabled="confirmDisabled"
+            block
+            @click="onConfirm"
+          >
+            {{ mergedConfirmText }}
+          </sar-button>
+        </slot>
       </view>
     </view>
   </sar-popup>
@@ -269,13 +293,19 @@ export default  _defineComponent({
     const onCancel = () => {
       perhapsClose("cancel");
     };
+    const mergedConfirmText = computed(() => {
+      return props.confirmText || t("confirm");
+    });
+    const mergedCancelText = computed(() => {
+      return props.cancelText || t("cancel");
+    });
     const popoutClass = computed(() => {
       return classNames(bem.b(), props.rootClass);
     });
     const popoutStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, t, innerVisible, already, wholeVisible, onBeforeEnter, onAfterLeave, callVisibleHook, onVisibleHook, loading, readonlyLoading, asyncSet, perhapsClose, onOverlayClick, onCloseClick, onConfirm, onCancel, popoutClass, popoutStyle, get classNames() {
+    const __returned__ = { props, emit, bem, t, innerVisible, already, wholeVisible, onBeforeEnter, onAfterLeave, callVisibleHook, onVisibleHook, loading, readonlyLoading, asyncSet, perhapsClose, onOverlayClick, onCloseClick, onConfirm, onCancel, mergedConfirmText, mergedCancelText, popoutClass, popoutStyle, get classNames() {
       return classNames;
     }, SarPopup, SarButton, SarIcon };
     return __returned__;

package/components/tag/tag.vue

@@ -1,7 +1,11 @@
 <template>
   <view :class="tagClass" :style="tagStyle" @click="$emit('click', $event)">
     <slot></slot>
-    <view v-if="closable" :class="iconClass" @click="$emit('close', $event)">
+    <view
+      v-if="closable"
+      :class="iconClass"
+      @click.stop="$emit('close', $event)"
+    >
       <sar-icon family="sari" name="close" />
     </view>
   </view>

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.24.1",
+  "version": "1.24.2",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {