sard-uniapp 1.1.0-alpha.2 → 1.1.0-beta.1

package/changelog.md

@@ -1,4 +1,4 @@
-## 1.1.0-alpha.2 (2024-04-03)
+## 1.1.0-beta.1 (2024-04-06)
 
 * docs: update quickstart.md ([fa280f6](https://github.com/sutras/sard-uniapp/commit/fa280f6))
 * build: 新增changelog构建流程 ([e1e862d](https://github.com/sutras/sard-uniapp/commit/e1e862d))

package/components/button/button.vue

@@ -15,7 +15,7 @@
         )
       "
     >
-      <sar-loading size="inherit" color="inherit" :type="loadingType" />
+      <sar-loading :type="loadingType" />
     </view>
     <slot></slot>
   </button>

package/components/calendar/calendar.vue

@@ -56,7 +56,7 @@
         :several-months="severalMonths"
         :t="t"
         :bem="bem"
-        @day-click="handleDayClick"
+        @day-click="onDayClick"
       />
     </scroll-view>
   </view>
@@ -97,6 +97,7 @@ import {
   sortDates,
   weeksIndex
 } from "./common";
+import { useInPopup } from "../popup/common";
 import SarButton from "../button/button.vue";
 import SarIcon from "../icon/icon.vue";
 import { useTranslate } from "../locale";
@@ -220,7 +221,7 @@ export default /* @__PURE__ */ _defineComponent({
       }
       return dates;
     });
-    const handleDayClick = (date) => {
+    const onDayClick = (date) => {
       let nextValue;
       if (props.type === "single") {
         nextValue = date;
@@ -267,17 +268,22 @@ export default /* @__PURE__ */ _defineComponent({
         emit("update:model-value", nextValue);
       }
     };
+    const inPopup = useInPopup();
+    const preventPageScroll = computed(() => {
+      return inPopup && !props.severalMonths;
+    });
     const calendarClass = computed(() => {
       return classNames(
         bem.b(),
         bem.m("several", props.severalMonths),
+        bem.m("no-scroll", preventPageScroll.value),
         props.rootClass
       );
     });
     const calendarStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, t, minDate, maxDate, innerValue, getInitialCurrentDate, innerCurrentDate, startDate, onPrevMonthClick, onNextMonthClick, pickerVisible, pickerValue, onMonthClick, onPickerConfirm, weeks, months, todayNumber, currentDates, handleDayClick, calendarClass, calendarStyle, get toMonthNumber() {
+    const __returned__ = { props, emit, bem, t, minDate, maxDate, innerValue, getInitialCurrentDate, innerCurrentDate, startDate, onPrevMonthClick, onNextMonthClick, pickerVisible, pickerValue, onMonthClick, onPickerConfirm, weeks, months, todayNumber, currentDates, onDayClick, inPopup, preventPageScroll, calendarClass, calendarStyle, get toMonthNumber() {
       return toMonthNumber;
     }, SarButton, SarIcon, SarCalendarMonth, SarPopout, SarDatetimePicker };
     return __returned__;

package/components/calendar/index.scss

@@ -4,7 +4,10 @@
   @include b() {
     @include universal;
     overflow: hidden;
-    // touch-action: none;
+
+    @include m(no-scroll) {
+      touch-action: pan-x;
+    }
   }
 
   @include e(header) {

package/components/indexes-nav/indexes-nav.vue

@@ -129,6 +129,7 @@ export default /* @__PURE__ */ _defineComponent({
       currentItemIndex = null;
     };
     const onMouseDown = (event) => {
+      // #ifdef H5
       const info = uni.getSystemInfoSync();
       onTouchStart(toTouchEvent(event, info.windowTop));
       const moveHandler = (event2) => {
@@ -142,6 +143,7 @@ export default /* @__PURE__ */ _defineComponent({
       };
       document.addEventListener("mousemove", moveHandler);
       document.addEventListener("mouseup", upHandler);
+      // #endif
     };
     const navClass = computed(() => {
       return classNames(bem.e("nav"));

package/components/input/input.vue

@@ -185,12 +185,14 @@ export default /* @__PURE__ */ _defineComponent({
       holdupClear.value = false;
     };
     const onClearMouseDown = () => {
+      // #ifdef H5
       onClearTouchStart();
       const upHandler = () => {
         onClearTouchEnd();
         document.removeEventListener("mouseup", upHandler);
       };
       document.addEventListener("mouseup", upHandler);
+      // #endif
     };
     const onClearClick = () => {
       setInnerValue("");

package/components/loading/common.d.ts

@@ -9,6 +9,8 @@ export interface LoadingProps {
     textColor?: string;
     textSize?: string;
     vertical?: boolean;
+    animated?: boolean;
+    progress?: number;
 }
 export declare const loadingProps: {
     rootStyle: PropType<StyleValue>;
@@ -23,7 +25,16 @@ export declare const loadingProps: {
     textColor: StringConstructor;
     textSize: StringConstructor;
     vertical: BooleanConstructor;
+    animated: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    progress: {
+        type: NumberConstructor;
+        default: number;
+    };
 };
 export interface LoadingSlots {
     default(props: Record<string, never>): any;
+    circular(props: Record<string, never>): any;
 }

package/components/loading/common.js

@@ -1,6 +1,8 @@
 import { defaultConfig } from '../config';
 // const props = withDefaults(defineProps<LoadingProps>(), {
 //   type: 'circular',
+//   animated: true,
+//   progress: 1,
 // })
 export const loadingProps = {
     rootStyle: [String, Object, Array],
@@ -15,4 +17,12 @@ export const loadingProps = {
     textColor: String,
     textSize: String,
     vertical: Boolean,
+    animated: {
+        type: Boolean,
+        default: true,
+    },
+    progress: {
+        type: Number,
+        default: 1,
+    },
 };

package/components/loading/index.scss

@@ -19,21 +19,23 @@ $sar-loading-scale-number: 12;
 
   @include e(icon) {
     @include universal;
-    width: 1em;
-    height: 1em;
-    min-width: var(--sar-loading-icon-min-width);
-    min-height: var(--sar-loading-icon-min-height);
 
-    @include m(circular) {
-      border: 4rpx solid transparent;
-      border-radius: 100%;
-      border-top-color: initial;
+    @include m(circular, clock) {
+      align-items: center;
+      justify-content: center;
+      width: 1em;
+      height: 1em;
+      min-width: var(--sar-loading-icon-min-width);
+      min-height: var(--sar-loading-icon-min-height);
+    }
+
+    @include m-intersect(circular, animated) {
       animation: #{bem-ns(loading-rotate)} var(
           --sar-loading-icon-animation-duration
         ) linear infinite;
     }
 
-    @include m(clock) {
+    @include m-intersect(clock, animated) {
       animation: #{bem-ns(loading-rotate)} var(
           --sar-loading-icon-animation-duration
         ) steps(#{$sar-loading-scale-number}) infinite;
@@ -49,6 +51,19 @@ $sar-loading-scale-number: 12;
     }
   }
 
+  @include e(spinner) {
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    background: conic-gradient(
+      rgba(255, 255, 255, 0) 0deg,
+      rgba(255, 255, 255, 0) 60deg,
+      currentColor 330deg,
+      rgba(255, 255, 255, 0) 360deg
+    );
+    -webkit-mask: radial-gradient(transparent calc(55% - 1px), #fff 55%);
+  }
+
   @include e(scale) {
     position: absolute;
     top: 0;
@@ -60,6 +75,7 @@ $sar-loading-scale-number: 12;
       display: flex;
       width: var(--sar-loading-scale-width);
       min-width: var(--sar-loading-scale-min-width);
+      transform: scaleX(var(--sar-loading-scale-scale-x));
       height: var(--sar-loading-scale-height);
       margin: 0 auto;
       border-radius: var(--sar-loading-scale-border-radius);
@@ -68,14 +84,15 @@ $sar-loading-scale-number: 12;
     }
 
     @for $i from 1 through $sar-loading-scale-number {
-      &:nth-child(#{$i}) {
-        opacity: tofixed(
-          1 - math.div(1, $sar-loading-scale-number) * ($i - 1),
-          6
-        );
+      @include m(#{$i}) {
+        opacity: tofixed(math.div(1, $sar-loading-scale-number) * $i, 4);
         transform: rotate(#{math.div(360, $sar-loading-scale-number) * $i}deg);
       }
     }
+
+    @include m(hidden) {
+      opacity: 0;
+    }
   }
 
   @include e(text) {

package/components/loading/loading.vue

@@ -1,8 +1,25 @@
 <template>
   <view :class="loadingClass">
     <view :class="iconClass" :style="iconStyle">
-      <template v-if="type === 'clock'">
-        <view v-for="i in 12" :key="i" :class="bem.e('scale')"></view>
+      <slot v-if="type === 'circular'" name="circular">
+        <view :class="bem.e('spinner')"></view>
+      </slot>
+      <template v-else-if="type === 'clock'">
+        <view
+          v-for="i in 12"
+          :key="i"
+          :class="
+            classNames(
+              bem.e('scale'),
+              bem.em('scale', i),
+              !props.animated
+                ? {
+                    [bem.em('scale', 'hidden')]: i > scaleShowNum,
+                  }
+                : null,
+            )
+          "
+        ></view>
       </template>
     </view>
 
@@ -42,11 +59,18 @@ export default /* @__PURE__ */ _defineComponent({
     __expose();
     const props = __props;
     const bem = createBem("loading");
+    const scaleShowNum = computed(() => {
+      return Math.max(Math.floor(props.progress * 12), 1);
+    });
     const loadingClass = computed(() => {
       return classNames(bem.b(), bem.m("vertical", props.vertical));
     });
     const iconClass = computed(() => {
-      return classNames(bem.e("icon"), bem.em("icon", props.type));
+      return classNames(
+        bem.e("icon"),
+        bem.em("icon", props.type),
+        bem.em("icon", "animated", props.animated)
+      );
     });
     const iconStyle = computed(() => {
       return stringifyStyle(
@@ -54,6 +78,9 @@ export default /* @__PURE__ */ _defineComponent({
           color: props.color,
           fontSize: props.size
         },
+        props.type === "circular" && !props.animated ? {
+          transform: `rotate(${props.progress * 360}deg)`
+        } : null,
         props.rootClass
       );
     });
@@ -63,7 +90,9 @@ export default /* @__PURE__ */ _defineComponent({
         props.rootStyle
       );
     });
-    const __returned__ = { props, bem, loadingClass, iconClass, iconStyle, loadingTextStyle, get isRenderVisible() {
+    const __returned__ = { props, bem, scaleShowNum, loadingClass, iconClass, iconStyle, loadingTextStyle, get classNames() {
+      return classNames;
+    }, get isRenderVisible() {
       return isRenderVisible;
     } };
     return __returned__;

package/components/loading/variables.scss

@@ -4,8 +4,9 @@ page {
   --sar-loading-icon-min-height: 32rpx;
   --sar-loading-icon-animation-duration: 0.8s;
 
-  --sar-loading-scale-width: 8%;
-  --sar-loading-scale-min-width: 3rpx;
+  --sar-loading-scale-width: 9.38%;
+  --sar-loading-scale-min-width: 2px;
+  --sar-loading-scale-scale-x: 0.75;
   --sar-loading-scale-height: 28%;
   --sar-loading-scale-border-radius: 40%;
 

package/components/popout-input/popout-input.vue

@@ -100,12 +100,14 @@ export default /* @__PURE__ */ _defineComponent({
       }
     };
     const onSealMouseDown = () => {
+      // #ifdef H5
       onSealTouchStart();
       const upHandler = () => {
         onSealTouchEnd();
         document.removeEventListener("mouseup", upHandler);
       };
       document.addEventListener("mouseup", upHandler);
+      // #endif
     };
     const onClick = (event) => {
       if (interoperable.value) {

package/components/popup/common.d.ts

@@ -54,3 +54,4 @@ export interface PopupContext {
 export declare const popupContextSymbol: unique symbol;
 export declare function usePopupVisibleHookProvide(): (name: TransitionHookName) => void;
 export declare function usePopupEnter(callback: () => void): void;
+export declare function useInPopup(): boolean;

package/components/popup/common.js

@@ -47,3 +47,6 @@ export function usePopupEnter(callback) {
         });
     }
 }
+export function useInPopup() {
+    return !!inject(popupContextSymbol, null);
+}

package/components/popup/index.d.ts

@@ -1 +1 @@
-export type { PopupProps, PopupSlots, PopupEmits } from './common';
+export { type PopupProps, type PopupSlots, type PopupEmits, type PopupContext, usePopupVisibleHookProvide, usePopupEnter, useInPopup, } from './common';

package/components/popup/index.js

@@ -1 +1 @@
-export {};
+export { usePopupVisibleHookProvide, usePopupEnter, useInPopup, } from './common';

package/components/pull-down-refresh/common.d.ts

@@ -0,0 +1,50 @@
+import { type PropType, type StyleValue } from 'vue';
+export type PullDownRefreshStatus = 'initial' | 'unready' | 'ready' | 'loading' | 'done' | 'recovering';
+export interface PullDownRefreshProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    threshold?: number;
+    headerHeight?: number;
+    loading?: boolean;
+    transitionDuration?: number;
+    doneDuration?: number;
+}
+export declare const pullDownRefreshProps: {
+    rootStyle: PropType<StyleValue>;
+    rootClass: StringConstructor;
+    threshold: {
+        type: NumberConstructor;
+        default: number;
+    };
+    headerHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    transitionDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
+    doneDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+export interface PullDownRefreshSlots {
+    default(props: Record<string, never>): any;
+    unready(props: {
+        progress: number;
+    }): any;
+    ready(props: Record<string, never>): any;
+    loading(props: Record<string, never>): any;
+    done(props: Record<string, never>): any;
+}
+export interface PullDownRefreshEmits {
+    (e: 'refresh'): void;
+}
+export interface PullDownRefreshExpose {
+    setScrollTop: (scrollTop: number) => void;
+}

package/components/pull-down-refresh/common.js

@@ -0,0 +1,31 @@
+// const props = withDefaults(defineProps<PullDownRefreshProps>(), {
+//   threshold: 50,
+//   headerHeight: 50,
+//   loading: false,
+//   transitionDuration: 300,
+//   doneDuration: 0,
+// })
+export const pullDownRefreshProps = {
+    rootStyle: [String, Object, Array],
+    rootClass: String,
+    threshold: {
+        type: Number,
+        default: 50,
+    },
+    headerHeight: {
+        type: Number,
+        default: 50,
+    },
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+    transitionDuration: {
+        type: Number,
+        default: 300,
+    },
+    doneDuration: {
+        type: Number,
+        default: 0,
+    },
+};

package/components/pull-down-refresh/index.d.ts

@@ -0,0 +1 @@
+export type { PullDownRefreshStatus, PullDownRefreshProps, PullDownRefreshSlots, PullDownRefreshEmits, PullDownRefreshExpose, } from './common';

package/components/pull-down-refresh/index.js

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

package/components/pull-down-refresh/index.scss

@@ -0,0 +1,26 @@
+@use '../style/base' as *;
+
+@include bem(pull-down-refresh) {
+  @include b() {
+    @include universal;
+    transition-property: transform;
+  }
+
+  @include e(header) {
+    @include universal;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transform: translateY(-100%);
+    font-size: var(--sar-pull-down-refresh-header-font-size);
+    color: var(--sar-pull-down-refresh-header-color);
+  }
+
+  @include e(loading) {
+    font-size: var(--sar-pull-down-refresh-loading-font-size);
+  }
+}

package/components/pull-down-refresh/pull-down-refresh.vue

@@ -0,0 +1,261 @@
+<template>
+  <!-- #ifndef MP-WEIXIN -->
+  <view
+    :class="pullDownRefreshClass"
+    :style="pullDownRefreshStyle"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+    @mousedown="onMouseDown"
+  >
+    <view :class="bem.e('header')" :style="headerStyle">
+      <slot v-if="status === 'unready'" name="unready" :progress="progress">
+        <sar-loading
+          type="clock"
+          :class="loadingClass"
+          :animated="false"
+          :progress="progress"
+        />
+      </slot>
+      <slot v-else-if="status === 'ready'" name="ready">
+        <sar-loading type="clock" :class="loadingClass" :animated="false" />
+      </slot>
+      <slot v-else-if="status === 'loading'" name="loading">
+        <sar-loading type="clock" :class="loadingClass" />
+      </slot>
+      <slot v-else-if="status === 'done'" name="done"></slot>
+    </view>
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+  <!-- #ifdef MP-WEIXIN -->
+  <view
+    :class="pullDownRefreshClass"
+    :style="pullDownRefreshStyle"
+    :prop="status"
+    :change:prop="wxsswipe.statusYWatch"
+    :data-status="status"
+    :data-scrolltop="scrollTop"
+    :data-threshold="threshold"
+    :data-headerheight="headerHeight"
+    :data-duration="transitionDuration"
+    @touchstart="wxsswipe.onTouchStart"
+    @touchmove="wxsswipe.onTouchMove"
+    @touchend="wxsswipe.onTouchEnd"
+    @touchcancel="wxsswipe.onTouchEnd"
+  >
+    <view :class="bem.e('header')" :style="headerStyle">
+      <slot v-if="status === 'unready'" name="unready" :progress="progress">
+        <sar-loading
+          type="clock"
+          :class="loadingClass"
+          :animated="false"
+          :progress="progress"
+        />
+      </slot>
+      <slot v-else-if="status === 'ready'" name="ready">
+        <sar-loading type="clock" :class="loadingClass" :animated="false" />
+      </slot>
+      <slot v-else-if="status === 'loading'" name="loading">
+        <sar-loading type="clock" :class="loadingClass" />
+      </slot>
+      <slot v-else-if="status === 'done'" name="done"></slot>
+    </view>
+    <slot></slot>
+  </view>
+  <!-- #endif -->
+</template>
+
+<!-- #ifdef MP-WEIXIN -->
+<script src="./wx.wxs" module="wxsswipe" lang="wxs"></script>
+<!-- #endif -->
+
+<script lang="ts">
+import { computed, onMounted, ref, watch } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  toTouchEvent
+} from "../../utils";
+import {
+  pullDownRefreshProps
+} from "./common";
+import { useSetTimeout } from "../../use";
+import SarLoading from "../loading/loading.vue";
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  },
+  components: {
+    SarLoading
+  },
+  props: pullDownRefreshProps,
+  emit: ["refresh"],
+  setup(props, { emit, expose }) {
+    const bem = createBem("pull-down-refresh");
+    const status = ref("initial");
+    const translateY = ref(0);
+    const progress = computed(() => {
+      return Math.min(translateY.value / props.threshold, 1);
+    });
+    const [toInitialLater, cancelToInitial] = useSetTimeout(() => {
+      status.value = "initial";
+    });
+    const [toRecoveringLater, cancelToRecovering] = useSetTimeout(() => {
+      toRecovering();
+    });
+    const toLoading = () => {
+      cancelToRecovering();
+      cancelToInitial();
+      status.value = "loading";
+      translateY.value = props.headerHeight;
+    };
+    const toRecovering = () => {
+      status.value = "recovering";
+      translateY.value = 0;
+      toInitialLater(props.transitionDuration);
+    };
+    const toDone = () => {
+      status.value = "done";
+      toRecoveringLater(props.doneDuration);
+    };
+    watch(
+      () => props.loading,
+      () => {
+        if (props.loading) {
+          toLoading();
+        } else {
+          toDone();
+        }
+      }
+    );
+    onMounted(() => {
+      if (props.loading) {
+        toLoading();
+      }
+    });
+    let startX = 0;
+    let startY = 0;
+    let movable = false;
+    let lockDirection = "";
+    const isDragging = ref(false);
+    const onTouchStart = (event) => {
+      if (status.value !== "initial" || scrollTop.value !== 0) {
+        return;
+      }
+      startX = event.touches[0].clientX;
+      startY = event.touches[0].clientY;
+      movable = true;
+    };
+    const onTouchMove = (event) => {
+      if (!movable || lockDirection && lockDirection !== "down") {
+        return;
+      }
+      const deltaX = event.touches[0].clientX - startX;
+      const deltaY = event.touches[0].clientY - startY;
+      if (!lockDirection) {
+        const isVertical = Math.abs(deltaY) >= Math.abs(deltaX);
+        lockDirection = isVertical && deltaY > 0 ? "down" : "others";
+      }
+      if (lockDirection === "down") {
+        const offsetY = Math.max(deltaY, 0) / 2;
+        status.value = offsetY >= props.threshold ? "ready" : "unready";
+        translateY.value = offsetY;
+        isDragging.value = true;
+        event.preventDefault();
+        if (event.stopImmediatePropagation) {
+          event.stopImmediatePropagation();
+        } else if (event.stopPropagation) {
+          event.stopPropagation();
+        }
+      }
+    };
+    const onTouchEnd = () => {
+      movable = false;
+      lockDirection = "";
+      isDragging.value = false;
+      switch (status.value) {
+        case "unready":
+          toRecovering();
+          return;
+        case "ready":
+          toLoading();
+          emit("refresh");
+          return;
+      }
+    };
+    const onMouseDown = (event) => {
+      // #ifdef H5
+      const info = uni.getSystemInfoSync();
+      onTouchStart(toTouchEvent(event, info.windowTop));
+      const moveHandler = (event2) => {
+        onTouchMove(toTouchEvent(event2, info.windowTop));
+      };
+      const upHandler = () => {
+        onTouchEnd();
+        document.removeEventListener("mouseup", upHandler);
+        document.removeEventListener("mousemove", moveHandler);
+      };
+      document.addEventListener("mousemove", moveHandler);
+      document.addEventListener("mouseup", upHandler);
+      // #endif
+    };
+    const scrollTop = ref(0);
+    const setScrollTop = (sTop) => {
+      scrollTop.value = sTop;
+    };
+    expose({
+      setScrollTop,
+      _setStatus: (newStatus) => {
+        status.value = newStatus;
+      },
+      _emit(event) {
+        emit(event.name, event.payload);
+      },
+      _toRecovering: toRecovering,
+      _toLoading: toLoading,
+      _setTranslateY: (y) => {
+        translateY.value = y;
+      }
+    });
+    const pullDownRefreshClass = computed(() => {
+      return classNames(bem.b(), props.rootClass);
+    });
+    const pullDownRefreshStyle = computed(() => {
+      return stringifyStyle(props.rootStyle, {
+        transform: `translate3d(0,${translateY.value}px,0)`,
+        transitionDuration: (isDragging.value ? 0 : props.transitionDuration) + "ms"
+      });
+    });
+    const headerStyle = computed(() => {
+      return stringifyStyle({
+        height: props.headerHeight + "px"
+      });
+    });
+    const loadingClass = computed(() => {
+      return classNames(bem.e("loading"));
+    });
+    return {
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onMouseDown,
+      status,
+      progress,
+      bem,
+      pullDownRefreshClass,
+      pullDownRefreshStyle,
+      headerStyle,
+      loadingClass,
+      scrollTop
+    };
+  }
+};
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/pull-down-refresh/variables.scss

@@ -0,0 +1,8 @@
+// #variables
+page {
+  --sar-pull-down-refresh-header-font-size: var(--sar-text-sm);
+  --sar-pull-down-refresh-header-color: var(--sar-tertiary-color);
+
+  --sar-pull-down-refresh-loading-font-size: 36rpx;
+}
+// #endvariables

package/components/pull-down-refresh/wx.wxs

@@ -0,0 +1,80 @@
+var startX = 0
+var startY = 0
+var movable = false
+var lockDirection = ''
+
+function setStyle(instance, offsetY, duration) {
+  instance.setStyle({
+    transform: 'translate3d(0,' + offsetY + 'px,0)',
+    'transition-duration': duration + 'ms',
+  })
+}
+
+function onTouchStart(event) {
+  var dataset = event.instance.getDataset()
+  if (dataset.status !== 'initial' || dataset.scrolltop !== 0) {
+    return
+  }
+  startX = event.touches[0].clientX
+  startY = event.touches[0].clientY
+  movable = true
+}
+
+function onTouchMove(event, ownerIns) {
+  if (!movable || (lockDirection && lockDirection !== 'down')) {
+    return
+  }
+
+  var deltaX = event.touches[0].clientX - startX
+  var deltaY = event.touches[0].clientY - startY
+
+  if (!lockDirection) {
+    var isVertical = Math.abs(deltaY) >= Math.abs(deltaX)
+    lockDirection = isVertical && deltaY > 0 ? 'down' : 'others'
+  }
+
+  if (lockDirection === 'down') {
+    var offsetY = Math.max(deltaY, 0) / 2
+    var dataset = event.instance.getDataset()
+    var status = offsetY >= dataset.threshold ? 'ready' : 'unready'
+    ownerIns.callMethod('_setStatus', status)
+    setStyle(event.instance, offsetY, 0)
+    ownerIns.callMethod('_setTranslateY', offsetY)
+
+    return false
+  }
+}
+
+function onTouchEnd(event, ownerIns) {
+  var dataset = event.instance.getDataset()
+
+  movable = false
+  lockDirection = ''
+
+  switch (dataset.status) {
+    case 'unready':
+      ownerIns.callMethod('_toRecovering')
+      return
+    case 'ready':
+      ownerIns.callMethod('_toLoading')
+      ownerIns.callMethod('_emit', {
+        name: 'refresh',
+      })
+      return
+  }
+}
+
+module.exports = {
+  onTouchStart: onTouchStart,
+  onTouchMove: onTouchMove,
+  onTouchEnd: onTouchEnd,
+  statusYWatch: function (newValue, oldValue, ownerInstance, instance) {
+    var dataset = instance.getDataset()
+    if (newValue === 'loading') {
+      setStyle(instance, dataset.headerheight, dataset.duration)
+    }
+    if (newValue === 'recovering') {
+      setStyle(instance, 0, dataset.duration)
+    }
+  },
+}

package/components/rate/rate.vue

@@ -60,7 +60,8 @@ import {
   stringifyStyle,
   createBem,
   uniqid,
-  getBoundingClientRect
+  getBoundingClientRect,
+  toTouchEvent
 } from "../../utils";
 import SarIcon from "../icon/icon.vue";
 import { useFormContext, useFormItemContext } from "../form/common";
@@ -159,7 +160,6 @@ export default /* @__PURE__ */ _defineComponent({
       if (isReadonly.value || isDisabled.value) {
         return;
       }
-      event.preventDefault();
       if (!rateRect.value || !firstStarRect.value) {
         return;
       }
@@ -187,15 +187,12 @@ export default /* @__PURE__ */ _defineComponent({
       }
     };
     const onMouseDown = () => {
+      // #ifdef H5
       onTouchStart();
       const moveHandler = (event) => {
         event.preventDefault();
-        onTouchMove({
-          touches: [event],
-          preventDefault: () => {
-            event.preventDefault();
-          }
-        });
+        event.stopPropagation();
+        onTouchMove(toTouchEvent(event));
       };
       const upHandler = () => {
         document.removeEventListener("mouseup", upHandler);
@@ -203,6 +200,7 @@ export default /* @__PURE__ */ _defineComponent({
       };
       document.addEventListener("mousemove", moveHandler);
       document.addEventListener("mouseup", upHandler);
+      // #endif
     };
     const rateClass = computed(() => {
       return classNames(

package/components/slider/slider.vue

@@ -252,17 +252,13 @@ export default /* @__PURE__ */ _defineComponent({
       emit("drag-end", event);
     };
     const onMouseDown = (event, index) => {
+      // #ifdef H5
       const info = uni.getSystemInfoSync();
-      onTouchStart(
-        toTouchEvent(event, info.windowTop),
-        index
-      );
+      onTouchStart(toTouchEvent(event, info.windowTop), index);
       const moveHandler = (event2) => {
         event2.preventDefault();
-        onTouchMove(
-          toTouchEvent(event2, info.windowTop),
-          index
-        );
+        event2.stopPropagation();
+        onTouchMove(toTouchEvent(event2, info.windowTop), index);
       };
       const upHandler = () => {
         onTouchEnd(event);
@@ -271,6 +267,7 @@ export default /* @__PURE__ */ _defineComponent({
       };
       document.addEventListener("mousemove", moveHandler);
       document.addEventListener("mouseup", upHandler);
+      // #endif
     };
     const rangeValue = computed(() => {
       let startValue;

package/components/stepper/stepper.vue

@@ -180,12 +180,14 @@ export default /* @__PURE__ */ _defineComponent({
       isPressing = false;
     };
     const onMouseDown = (delta) => {
+      // #ifdef H5
       onTouchStart(delta);
       const upHandler = () => {
         onTouchEnd();
         document.removeEventListener("mouseup", upHandler);
       };
       document.addEventListener("mouseup", upHandler);
+      // #endif
     };
     const stepperClass = computed(() => {
       return classNames(

package/global.d.ts

@@ -53,6 +53,7 @@ import SarPopoverReference from './components/popover-reference/popover-referenc
 import SarPopup from './components/popup/popup.vue'
 import SarProgressBar from './components/progress-bar/progress-bar.vue'
 import SarProgressCircle from './components/progress-circle/progress-circle.vue'
+import SarPullDownRefresh from './components/pull-down-refresh/pull-down-refresh.vue'
 import SarRadio from './components/radio/radio.vue'
 import SarRadioGroup from './components/radio-group/radio-group.vue'
 import SarRate from './components/rate/rate.vue'
@@ -135,6 +136,7 @@ declare module '@vue/runtime-core' {
     SarPopup: typeof SarPopup
     SarProgressBar: typeof SarProgressBar
     SarProgressCircle: typeof SarProgressCircle
+    SarPullDownRefresh: typeof SarPullDownRefresh
     SarRadio: typeof SarRadio
     SarRadioGroup: typeof SarRadioGroup
     SarRate: typeof SarRate

package/index.d.ts

@@ -45,6 +45,7 @@ export * from './components/popover-reference';
 export * from './components/popup';
 export * from './components/progress-bar';
 export * from './components/progress-circle';
+export * from './components/pull-down-refresh';
 export * from './components/radio';
 export * from './components/rate';
 export * from './components/result';

package/index.js

@@ -45,6 +45,7 @@ export * from './components/popover-reference';
 export * from './components/popup';
 export * from './components/progress-bar';
 export * from './components/progress-circle';
+export * from './components/pull-down-refresh';
 export * from './components/radio';
 export * from './components/rate';
 export * from './components/result';

package/index.scss

@@ -34,6 +34,7 @@
 @use './components/popup/variables.scss' as *;
 @use './components/progress-bar/variables.scss' as *;
 @use './components/progress-circle/variables.scss' as *;
+@use './components/pull-down-refresh/variables.scss' as *;
 @use './components/rate/variables.scss' as *;
 @use './components/radio/variables.scss' as *;
 @use './components/result/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.1.0-alpha.2",
+  "version": "1.1.0-beta.1",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "keywords": [
     "uniapp",

package/utils/dom.d.ts

@@ -81,57 +81,5 @@ interface MatchScrollVisibleOptions {
  * @description: 匹配元素列表中第一个位于滚动盒子可视区域的元素
  */
 export declare function matchScrollVisible(rects: NodeRect[], callback: (index: number) => unknown, options?: MatchScrollVisibleOptions): Promise<unknown>;
-export declare function toTouchEvent(event: MouseEvent | TouchEvent, windowTop: number): TouchEvent | {
-    touches: {
-        clientX: number;
-        clientY: number;
-    }[];
-    altKey: boolean;
-    button: number;
-    buttons: number;
-    clientX: number;
-    clientY: number;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    movementX: number;
-    movementY: number;
-    offsetX: number;
-    offsetY: number;
-    pageX: number;
-    pageY: number;
-    relatedTarget: EventTarget | null;
-    screenX: number;
-    screenY: number;
-    shiftKey: boolean;
-    x: number;
-    y: number;
-    getModifierState(keyArg: string): boolean;
-    initMouseEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, viewArg: Window, detailArg: number, screenXArg: number, screenYArg: number, clientXArg: number, clientYArg: number, ctrlKeyArg: boolean, altKeyArg: boolean, shiftKeyArg: boolean, metaKeyArg: boolean, buttonArg: number, relatedTargetArg: EventTarget | null): void;
-    detail: number;
-    view: Window | null;
-    which: number;
-    initUIEvent(typeArg: string, bubblesArg?: boolean | undefined, cancelableArg?: boolean | undefined, viewArg?: Window | null | undefined, detailArg?: number | undefined): void;
-    bubbles: boolean;
-    cancelBubble: boolean;
-    cancelable: boolean;
-    composed: boolean;
-    currentTarget: EventTarget | null;
-    defaultPrevented: boolean;
-    eventPhase: number;
-    isTrusted: boolean;
-    returnValue: boolean;
-    srcElement: EventTarget | null;
-    target: EventTarget | null;
-    timeStamp: number;
-    type: string;
-    composedPath(): EventTarget[];
-    initEvent(type: string, bubbles?: boolean | undefined, cancelable?: boolean | undefined): void;
-    preventDefault(): void;
-    stopImmediatePropagation(): void;
-    stopPropagation(): void;
-    NONE: 0;
-    CAPTURING_PHASE: 1;
-    AT_TARGET: 2;
-    BUBBLING_PHASE: 3;
-};
+export declare function toTouchEvent(event: MouseEvent | TouchEvent, windowTop?: number): TouchEvent;
 export {};

package/utils/dom.js

@@ -139,16 +139,15 @@ export async function matchScrollVisible(rects, callback, options = {}) {
         }
     }
 }
-export function toTouchEvent(event, windowTop) {
-    return 'touches' in event
-        ? event
-        : {
-            ...event,
-            touches: [
-                {
-                    clientX: event.clientX,
-                    clientY: event.clientY - windowTop,
-                },
-            ],
-        };
+export function toTouchEvent(event, windowTop = 0) {
+    if (!('touches' in event)) {
+        ;
+        event.touches = [
+            {
+                clientX: event.clientX,
+                clientY: event.clientY - windowTop,
+            },
+        ];
+    }
+    return event;
 }