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

package/changelog.md

@@ -1,5 +1,11 @@
-## 1.1.0-alpha.2 (2024-04-03)
+## 1.1.0-rc.1 (2024-04-08)
 
+
+
+
+## 1.1.0-beta.1 (2024-04-06)
+
+* feat: 新增pull-down-refresh组件, slider组件新增时间, 重构loading组件, 其他优化 ([802816a](https://github.com/sutras/sard-uniapp/commit/802816a))
 * 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/_template/{index.vue → _template.vue}

@@ -17,7 +17,7 @@ const __default__ = {
 };
 export default /* @__PURE__ */ _defineComponent({
   ...__default__,
-  __name: "index",
+  __name: "_template",
   props: _templateProps,
   emits: ["click"],
   setup(__props, { expose: __expose }) {

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/config/index.d.ts

@@ -173,6 +173,12 @@ export declare const defaultConfig: {
         percent: number;
         thickness: number;
     };
+    pullDownRefresh: {
+        threshold: number;
+        headerHeight: number;
+        transitionDuration: number;
+        doneDuration: number;
+    };
     radioGroup: {
         direction: string;
         validateEvent: boolean;
@@ -212,6 +218,7 @@ export declare const defaultConfig: {
         pressTime: number;
         interval: number;
         validateEvent: boolean;
+        size: string;
     };
     steps: {
         current: number;
@@ -478,6 +485,12 @@ export declare function useConfigContext(): DeepPartial<{
         percent: number;
         thickness: number;
     };
+    pullDownRefresh: {
+        threshold: number;
+        headerHeight: number;
+        transitionDuration: number;
+        doneDuration: number;
+    };
     radioGroup: {
         direction: string;
         validateEvent: boolean;
@@ -517,6 +530,7 @@ export declare function useConfigContext(): DeepPartial<{
         pressTime: number;
         interval: number;
         validateEvent: boolean;
+        size: string;
     };
     steps: {
         current: number;

package/components/config/index.js

@@ -174,6 +174,12 @@ export const defaultConfig = {
         percent: 0,
         thickness: 4,
     },
+    pullDownRefresh: {
+        threshold: 50,
+        headerHeight: 50,
+        transitionDuration: 300,
+        doneDuration: 0,
+    },
     radioGroup: {
         direction: 'vertical',
         validateEvent: true,
@@ -213,6 +219,7 @@ export const defaultConfig = {
         pressTime: 350,
         interval: 150,
         validateEvent: true,
+        size: 'medium',
     },
     steps: {
         current: 0,

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/load-more/common.d.ts

@@ -0,0 +1,33 @@
+import { type PropType, type StyleValue } from 'vue';
+export type LoadMoreStatus = 'incomplete' | 'loading' | 'complete' | 'error';
+export interface LoadMoreProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    status?: LoadMoreStatus;
+    incompleteText?: string;
+    loadingText?: string;
+    completeText?: string;
+    errorText?: string;
+}
+export declare const loadMoreProps: {
+    rootStyle: PropType<StyleValue>;
+    rootClass: StringConstructor;
+    status: {
+        type: PropType<LoadMoreStatus>;
+        default: string;
+    };
+    incompleteText: StringConstructor;
+    loadingText: StringConstructor;
+    completeText: StringConstructor;
+    errorText: StringConstructor;
+};
+export interface LoadMoreSlots {
+    incomplete(props: Record<string, never>): any;
+    loading(props: Record<string, never>): any;
+    complete(props: Record<string, never>): any;
+    error(props: Record<string, never>): any;
+}
+export interface LoadMoreEmits {
+    (e: 'load-more'): void;
+    (e: 'reload'): void;
+}

package/components/load-more/common.js

@@ -0,0 +1,12 @@
+export const loadMoreProps = {
+    rootStyle: [String, Object, Array],
+    rootClass: String,
+    status: {
+        type: String,
+        default: 'incomplete',
+    },
+    incompleteText: String,
+    loadingText: String,
+    completeText: String,
+    errorText: String,
+};

package/components/load-more/index.d.ts

@@ -0,0 +1 @@
+export type { LoadMoreStatus, LoadMoreProps, LoadMoreSlots, LoadMoreEmits, } from './common';

package/components/load-more/index.js

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

package/components/load-more/index.scss

@@ -0,0 +1,17 @@
+@use '../style/base' as *;
+
+@include bem(load-more) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    height: var(--sar-load-more-height);
+    font-size: var(--sar-load-more-font-size);
+    color: var(--sar-load-more-color);
+
+    @include m(incomplete, error) {
+      cursor: pointer;
+    }
+  }
+}

package/components/load-more/load-more.vue

@@ -0,0 +1,65 @@
+<template>
+  <view :class="loadMoreClass" :style="loadMoreStyle" @click="onClick">
+    <slot v-if="status === 'incomplete'" name="incomplete">
+      {{ incompleteText || t('incompleteText') }}
+    </slot>
+    <slot v-else-if="status === 'loading'" name="loading">
+      <sar-loading>
+        {{ loadingText || t('loadingText') }}
+      </sar-loading>
+    </slot>
+    <slot v-else-if="status === 'complete'" name="complete">
+      {{ completeText || t('completeText') }}
+    </slot>
+    <slot v-else-if="status === 'error'" name="error">
+      {{ errorText || t('errorText') }}
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+import { defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import { loadMoreProps } from "./common";
+import { useTranslate } from "../locale";
+import SarLoading from "../loading/loading.vue";
+const __default__ = {
+  options: {
+    virtualHost: true,
+    styleIsolation: "shared"
+  }
+};
+export default /* @__PURE__ */ _defineComponent({
+  ...__default__,
+  __name: "load-more",
+  props: loadMoreProps,
+  emits: ["load-more", "reload"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("load-more");
+    const { t } = useTranslate("loadMore");
+    const onClick = () => {
+      if (props.status === "incomplete") {
+        emit("load-more");
+      } else if (props.status === "error") {
+        emit("reload");
+      }
+    };
+    const loadMoreClass = computed(() => {
+      return classNames(bem.b(), bem.m(props.status), props.rootClass);
+    });
+    const loadMoreStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, t, onClick, loadMoreClass, loadMoreStyle, SarLoading };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/load-more/variables.scss

@@ -0,0 +1,7 @@
+// #variables
+page {
+  --sar-load-more-height: 100rpx;
+  --sar-load-more-font-size: var(--sar-text-sm);
+  --sar-load-more-color: var(--sar-tertiary-color);
+}
+// #endvariables

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/locale/lang/zh-CN.d.ts

@@ -82,6 +82,12 @@ declare const _default: {
             };
         };
     };
+    loadMore: {
+        incompleteText: string;
+        loadingText: string;
+        completeText: string;
+        errorText: string;
+    };
     pagination: {
         previous: string;
         next: string;

package/components/locale/lang/zh-CN.js

@@ -83,6 +83,12 @@ export default {
             },
         },
     },
+    loadMore: {
+        incompleteText: '加载更多',
+        loadingText: '加载中...',
+        completeText: '没有更多了',
+        errorText: '请求失败，点击重新加载',
+    },
     pagination: {
         previous: '上一页',
         next: '下一页',

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,55 @@
+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;
+    disabled?: 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;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+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;
+}