sard-uniapp 1.18.0 → 1.19.1

package/components/swipe-action/index.scss

@@ -0,0 +1,53 @@
+@use '../style/base' as *;
+
+@include bem(swipe-action) {
+  @include b() {
+    @include universal;
+    overflow: hidden;
+  }
+
+  @include e(content) {
+    @include universal;
+    cursor: grab;
+  }
+
+  @include e(actions) {
+    @include universal;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  @include e(actions-wrapper) {
+    @include universal;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  @include e(left, right) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    pointer-events: auto;
+  }
+
+  @include e(left) {
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  @include e(right) {
+    right: 0;
+    transform: translateX(100%);
+  }
+}

package/components/swipe-action/swipe-action.d.ts

@@ -0,0 +1,16 @@
+import { type SwipeActionProps, type SwipeActionSlots, type SwipeActionVisible } from './common';
+declare function __VLS_template(): Readonly<SwipeActionSlots> & SwipeActionSlots;
+declare const __VLS_component: import("vue").DefineComponent<SwipeActionProps, {
+    hide: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:visible": (value: SwipeActionVisible) => any;
+}, string, import("vue").PublicProps, Readonly<SwipeActionProps> & Readonly<{
+    "onUpdate:visible"?: ((value: SwipeActionVisible) => 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/swipe-action/swipe-action.vue

@@ -0,0 +1,275 @@
+<template>
+  <view
+    :class="swipeActionClass"
+    :style="swipeActionStyle"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+    @mousedown="onMouseDown"
+  >
+    <view
+      :id="contentId"
+      :class="bem.e('content')"
+      :style="translateStyle"
+      @click="onContentClick"
+      @mousedown="onContentMouseDown"
+      @mousemove="onMouseMove"
+      @mouseup="onMouseUp"
+    >
+      <slot></slot>
+      <view v-if="$slots.left" :id="leftId" :class="bem.e('left')" @click.stop>
+        <slot name="left" :hide="hide"></slot>
+      </view>
+      <view
+        v-if="$slots.right"
+        :id="rightId"
+        :class="bem.e('right')"
+        @click.stop
+      >
+        <slot name="right" :hide="hide"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { useSlots as _useSlots, defineComponent as _defineComponent } from "vue";
+import { computed, getCurrentInstance, onMounted, ref, watch } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  getBoundingClientRect
+} from "../../utils";
+import { useMouseDown, useInitialVelocity, useStopMovedClick } from "../../use";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "swipe-action",
+  props: {
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    disabled: { type: Boolean, required: false },
+    visible: { type: [String, Boolean], required: false }
+  },
+  emits: ["update:visible"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const slots = _useSlots();
+    const emit = __emit;
+    const bem = createBem("swipe-action");
+    const innerVisible = ref(props.visible || false);
+    watch(
+      () => props.visible,
+      () => {
+        if (props.visible !== innerVisible.value) {
+          innerVisible.value = props.visible || false;
+          setTranslateXByVisible(innerVisible.value);
+        }
+      }
+    );
+    const triggerVisible = (visible) => {
+      if (innerVisible.value !== visible) {
+        innerVisible.value = visible;
+        emit("update:visible", visible);
+      }
+    };
+    const hide = () => {
+      triggerVisible(false);
+      setTranslateXByVisible(false);
+    };
+    const onContentClick = () => {
+      if (!props.disabled && !isStoppedClick.value) {
+        hide();
+      }
+    };
+    const {
+      isStoppedClick,
+      onMouseDown: onContentMouseDown,
+      onMouseMove,
+      onMouseUp
+    } = useStopMovedClick();
+    const contentId = uniqid();
+    const leftId = uniqid();
+    const rightId = uniqid();
+    const instance = getCurrentInstance();
+    let contentWidth = null;
+    let leftWidth = null;
+    let rightWidth = null;
+    const translateX = ref(0);
+    const movable = ref(false);
+    let startX = 0;
+    let startY = 0;
+    let downTranslateX = 0;
+    let lockDirection = "";
+    let canResolveVisible = false;
+    const initVelocity = useInitialVelocity();
+    const getWidth = async () => {
+      return Promise.all([
+        getBoundingClientRect(`#${contentId}`, instance).then((rect) => {
+          contentWidth = rect.width;
+        }),
+        slots.left && getBoundingClientRect(`#${leftId}`, instance).then((rect) => {
+          leftWidth = rect.width;
+        }),
+        slots.right && getBoundingClientRect(`#${rightId}`, instance).then((rect) => {
+          rightWidth = rect.width;
+        })
+      ]);
+    };
+    const setTranslateXByVisible = (visible) => {
+      translateX.value = visible === "left" ? leftWidth || 0 : visible === "right" ? -(rightWidth || 0) : 0;
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        if (innerVisible.value) {
+          getWidth().then(() => {
+            setTranslateXByVisible(innerVisible.value);
+          });
+        } else {
+          getWidth();
+        }
+      });
+    });
+    const onTouchStart = async (event) => {
+      if (props.disabled || !slots.left && !slots.right) {
+        return;
+      }
+      startX = event.touches[0].clientX;
+      startY = event.touches[0].clientY;
+      initVelocity.onStart({
+        x: startX,
+        y: startY
+      });
+      downTranslateX = translateX.value;
+      movable.value = true;
+      getWidth();
+    };
+    const onTouchMove = (event) => {
+      if (!movable.value || lockDirection && lockDirection !== "x") {
+        return;
+      }
+      const clientX = event.touches[0].clientX;
+      const clientY = event.touches[0].clientY;
+      const deltaX = clientX - startX;
+      const deltaY = clientY - startY;
+      initVelocity.onMove({
+        x: clientX,
+        y: clientY
+      });
+      if (!lockDirection) {
+        const isHorizontal = Math.abs(deltaX) >= Math.abs(deltaY);
+        lockDirection = isHorizontal ? "x" : "y";
+      }
+      if (lockDirection === "x") {
+        if (contentWidth !== null && (!slots.left || leftWidth !== null) && (!slots.right || rightWidth !== null)) {
+          event.preventDefault();
+          if (event.stopImmediatePropagation) {
+            event.stopImmediatePropagation();
+          } else if (event.stopPropagation) {
+            event.stopPropagation();
+          }
+          let nextTranslateX = downTranslateX + deltaX;
+          const leftEdge = leftWidth !== null ? leftWidth : 0;
+          const rightEdge = rightWidth !== null ? -rightWidth : 0;
+          if (nextTranslateX > leftEdge) {
+            nextTranslateX = leftEdge;
+          }
+          if (nextTranslateX < rightEdge) {
+            nextTranslateX = rightEdge;
+          }
+          translateX.value = nextTranslateX;
+          canResolveVisible = true;
+        }
+      }
+    };
+    const onTouchEnd = () => {
+      if (canResolveVisible) {
+        const velocity = initVelocity.onEnd();
+        const dependsOnSpeed = Math.abs(velocity.x) > 0.2;
+        const x = translateX.value;
+        let nextVisible = false;
+        if (x < 0) {
+          if (dependsOnSpeed && velocity.x < 0 || !dependsOnSpeed && Math.abs(x) >= rightWidth / 2) {
+            nextVisible = "right";
+            translateX.value = -rightWidth;
+          } else {
+            translateX.value = 0;
+          }
+        } else if (x > 0) {
+          if (dependsOnSpeed && velocity.x > 0 || !dependsOnSpeed && Math.abs(x) >= leftWidth / 2) {
+            nextVisible = "left";
+            translateX.value = leftWidth;
+          } else {
+            translateX.value = 0;
+          }
+        }
+        triggerVisible(nextVisible);
+      }
+      movable.value = false;
+      lockDirection = "";
+      canResolveVisible = false;
+    };
+    const onMouseDown = useMouseDown(onTouchStart, onTouchMove, onTouchEnd);
+    __expose({
+      hide
+    });
+    const swipeActionClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const swipeActionStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const translateStyle = computed(() => {
+      return stringifyStyle({
+        transform: `translate3d(${translateX.value}px,0,0)`,
+        transition: movable.value ? "none" : `transform 300ms`
+      });
+    });
+    const __returned__ = { props, slots, emit, bem, innerVisible, triggerVisible, hide, onContentClick, isStoppedClick, onContentMouseDown, onMouseMove, onMouseUp, contentId, leftId, rightId, instance, get contentWidth() {
+      return contentWidth;
+    }, set contentWidth(v) {
+      contentWidth = v;
+    }, get leftWidth() {
+      return leftWidth;
+    }, set leftWidth(v) {
+      leftWidth = v;
+    }, get rightWidth() {
+      return rightWidth;
+    }, set rightWidth(v) {
+      rightWidth = v;
+    }, translateX, movable, get startX() {
+      return startX;
+    }, set startX(v) {
+      startX = v;
+    }, get startY() {
+      return startY;
+    }, set startY(v) {
+      startY = v;
+    }, get downTranslateX() {
+      return downTranslateX;
+    }, set downTranslateX(v) {
+      downTranslateX = v;
+    }, get lockDirection() {
+      return lockDirection;
+    }, set lockDirection(v) {
+      lockDirection = v;
+    }, get canResolveVisible() {
+      return canResolveVisible;
+    }, set canResolveVisible(v) {
+      canResolveVisible = v;
+    }, initVelocity, getWidth, setTranslateXByVisible, onTouchStart, onTouchMove, onTouchEnd, onMouseDown, swipeActionClass, swipeActionStyle, translateStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/swipe-action/variables.scss

@@ -0,0 +1,3 @@
+// #variables
+
+// #endvariables

package/components/toast/toast.vue

@@ -24,7 +24,7 @@ import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarPopup from "../popup/popup.vue";
 import SarLoading from "../loading/loading.vue";
 import SarIcon from "../icon/icon.vue";
-import { useSetTimeout } from "../../use";
+import { useTimeout } from "../../use";
 import {
   defaultToastProps
 } from "./common";
@@ -61,15 +61,18 @@ export default  _defineComponent({
     const emit = __emit;
     const bem = createBem("toast");
     const innerVisible = ref(props.visible);
-    const [hideLater, cancelHide] = useSetTimeout(() => {
-      innerVisible.value = false;
-      emit("update:visible", false);
-    });
+    const { start: hideLater, stop: cancelHide } = useTimeout(
+      () => {
+        innerVisible.value = false;
+        emit("update:visible", false);
+      },
+      () => props.timeout
+    );
     const reHideLater = () => {
       cancelHide();
       nextTick(() => {
         if (props.type !== "loading" && props.timeout > 0) {
-          hideLater(props.timeout);
+          hideLater();
         }
       });
     };
@@ -79,7 +82,7 @@ export default  _defineComponent({
         innerVisible.value = props.visible;
         if (props.visible) {
           if (props.type !== "loading" && props.timeout > 0) {
-            hideLater(props.timeout);
+            hideLater();
           }
         }
       }

package/global.d.ts

@@ -102,6 +102,7 @@ declare module 'vue' {
     SarStep: typeof import('./components/step/step').default
     SarStepper: typeof import('./components/stepper/stepper').default
     SarSteps: typeof import('./components/steps/steps').default
+    SarSwipeAction: typeof import('./components/swipe-action/swipe-action').default
     SarSwiperDot: typeof import('./components/swiper-dot/swiper-dot').default
     SarSwitch: typeof import('./components/switch/switch').default
     SarTab: typeof import('./components/tab/tab').default

package/index.d.ts

@@ -88,6 +88,7 @@ export * from './components/status-bar';
 export * from './components/step';
 export * from './components/stepper';
 export * from './components/steps';
+export * from './components/swipe-action';
 export * from './components/swiper-dot';
 export * from './components/switch';
 export * from './components/tabbar';

package/index.js

@@ -88,6 +88,7 @@ export * from './components/status-bar';
 export * from './components/step';
 export * from './components/stepper';
 export * from './components/steps';
+export * from './components/swipe-action';
 export * from './components/swiper-dot';
 export * from './components/switch';
 export * from './components/tabbar';

package/index.scss

@@ -62,6 +62,7 @@
 @use './components/stepper/variables.scss' as *;
 @use './components/steps/variables.scss' as *;
 @use './components/style/variables.scss' as *;
+@use './components/swipe-action/variables.scss' as *;
 @use './components/swiper-dot/variables.scss' as *;
 @use './components/switch/variables.scss' as *;
 @use './components/tabbar/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.18.0",
+  "version": "1.19.1",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {
@@ -122,7 +122,7 @@
     "lodash-es": "^4.17.21",
     "prettier": "^3.5.3",
     "region-data": "^1.2.3",
-    "sard-cli": "^1.2.0",
+    "sard-cli": "^1.2.4",
     "sass": "^1.69.7",
     "tel-area-code": "^1.1.0",
     "ts-custom-error": "^3.3.1",
@@ -223,10 +223,5 @@
   },
   "engines": {
     "HBuilderX": "^3.6.0"
-  },
-  "pnpm": {
-    "overrides": {
-      "sard-cli": "link:../sard-cli"
-    }
   }
 }

package/use/index.d.ts

@@ -1,5 +1,5 @@
 export * from './useTransition';
-export * from './useSetTimeout';
+export * from './useTimeout';
 export * from './useZIndex';
 export * from './useImperative';
 export * from './useLuckyGrid';
@@ -16,3 +16,5 @@ export * from './useTimeoutLoading';
 export * from './useTwoWayVisible';
 export * from './usePopoutInput';
 export * from './useFormPopout';
+export * from './useInitialVelocity';
+export * from './useStopMovedClick';

package/use/index.js

@@ -1,5 +1,5 @@
 export * from './useTransition';
-export * from './useSetTimeout';
+export * from './useTimeout';
 export * from './useZIndex';
 export * from './useImperative';
 export * from './useLuckyGrid';
@@ -16,3 +16,5 @@ export * from './useTimeoutLoading';
 export * from './useTwoWayVisible';
 export * from './usePopoutInput';
 export * from './useFormPopout';
+export * from './useInitialVelocity';
+export * from './useStopMovedClick';

package/use/useScrollSpy.js

@@ -1,5 +1,5 @@
 import { computed, ref, shallowRef } from 'vue';
-import { useSetTimeout } from './useSetTimeout';
+import { useTimeout } from './useTimeout';
 import { isNullish, matchScrollVisible } from '../utils';
 export function useScrollSpy(options) {
     const { defaultCurrent, initialScroll, onChange, getSpiedRect } = options;
@@ -10,9 +10,9 @@ export function useScrollSpy(options) {
     const anchorRectList = shallowRef([]);
     const anchorMap = new Map();
     let lockScroll = false;
-    const [unLockScrollLater] = useSetTimeout(() => {
+    const { start: unLockScrollLater } = useTimeout(() => {
         lockScroll = false;
-    });
+    }, 150);
     const register = (name, getRect) => {
         anchorMap.set(name, getRect);
     };
@@ -44,7 +44,7 @@ export function useScrollSpy(options) {
                 const offset = item[1].top;
                 scrollTop.value = offset - startOffset.value;
                 lockScroll = true;
-                unLockScrollLater(150);
+                unLockScrollLater();
             }
         }
     };

package/use/useSimulatedClick.js

@@ -1,17 +1,17 @@
 import { getDistanceBetweenTwoPoints } from '../utils';
-import { useSetTimeout } from './useSetTimeout';
+import { useTimeout } from './useTimeout';
 export function useSimulatedClick(click, duration = 10000) {
     let timeout = false;
     let downCoord = { x: 0, y: 0 };
-    const [timeoutLater, cancelTimeout] = useSetTimeout(() => {
+    const { start: timeoutLater, stop: cancelTimeout } = useTimeout(() => {
         timeout = true;
-    });
+    }, duration);
     const onTouchStart = (event) => {
         downCoord = {
             x: event.touches[0].clientX,
             y: event.touches[0].clientY,
         };
-        timeoutLater(duration);
+        timeoutLater();
     };
     const onTouchEnd = (event) => {
         cancelTimeout();

package/use/useSimulatedPress.js

@@ -1,19 +1,19 @@
 import { getDistanceBetweenTwoPoints } from '../utils';
-import { useSetTimeout } from './useSetTimeout';
+import { useTimeout } from './useTimeout';
 export function useSimulatedPress(options = {}) {
     const { start, move, end, duration = 500 } = options;
     let downCoord = { x: 0, y: 0 };
     let isPressing = false;
-    const [triggerPressLater, cancelTriggerPress, isWaitingToTriggerPress] = useSetTimeout(() => {
+    const { start: triggerPressLater, stop: cancelTriggerPress, isPending: isWaitingToTriggerPress, } = useTimeout(() => {
         isPressing = true;
         start?.();
-    });
+    }, duration);
     const onTouchStart = (event) => {
         downCoord = {
             x: event.touches[0].clientX,
             y: event.touches[0].clientY,
         };
-        triggerPressLater(duration);
+        triggerPressLater();
     };
     const onTouchMove = (event) => {
         const moveCoord = {
@@ -28,7 +28,7 @@ export function useSimulatedPress(options = {}) {
                 },
             });
         }
-        else if (isWaitingToTriggerPress()) {
+        else if (isWaitingToTriggerPress.value) {
             const distance = getDistanceBetweenTwoPoints(downCoord, moveCoord);
             if (distance > 10) {
                 cancelTriggerPress();

package/use/useStopMovedClick.d.ts

@@ -0,0 +1,6 @@
+export declare function useStopMovedClick(): {
+    onMouseDown: () => void;
+    onMouseMove: () => void;
+    onMouseUp: () => void;
+    isStoppedClick: import("vue").Ref<boolean, boolean>;
+};

package/use/useStopMovedClick.js

@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+export function useStopMovedClick() {
+    let isDown = false;
+    let moved = false;
+    const isStoppedClick = ref(false);
+    const onMouseDown = () => {
+        isDown = true;
+        moved = false;
+        isStoppedClick.value = false;
+    };
+    const onMouseMove = () => {
+        moved = true;
+    };
+    const onMouseUp = () => {
+        if (isDown && moved) {
+            isStoppedClick.value = true;
+        }
+        isDown = false;
+    };
+    return {
+        onMouseDown,
+        onMouseMove,
+        onMouseUp,
+        isStoppedClick,
+    };
+}

package/use/useTimeout.d.ts

@@ -0,0 +1,11 @@
+import { MaybeRefOrGetter } from 'vue';
+export interface UseTimeoutFnOptions {
+    immediate?: boolean;
+    immediateCallback?: boolean;
+}
+export declare function useTimeout<CallbackFn extends (...args: any[]) => any>(cb: CallbackFn, interval: MaybeRefOrGetter<number>, options?: UseTimeoutFnOptions): {
+    isPending: Readonly<import("vue").ShallowRef<boolean, boolean>>;
+    start: (...args: Parameters<CallbackFn> | []) => void;
+    stop: () => void;
+};
+export declare const useSetTimeout: typeof useTimeout;

package/use/useTimeout.js

@@ -0,0 +1,39 @@
+import { onUnmounted, shallowReadonly, shallowRef, toValue, } from 'vue';
+export function useTimeout(cb, interval, options = {}) {
+    const { immediate = false, immediateCallback = false } = options;
+    const isPending = shallowRef(false);
+    let timer = null;
+    function clear() {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    }
+    function stop() {
+        isPending.value = false;
+        clear();
+    }
+    function start(...args) {
+        if (immediateCallback)
+            cb();
+        clear();
+        isPending.value = true;
+        timer = setTimeout(() => {
+            isPending.value = false;
+            timer = null;
+            cb(...args);
+        }, toValue(interval));
+    }
+    if (immediate) {
+        start();
+    }
+    onUnmounted(() => {
+        stop();
+    });
+    return {
+        isPending: shallowReadonly(isPending),
+        start,
+        stop,
+    };
+}
+export const useSetTimeout = useTimeout;