sard-uniapp 1.1.0-beta.1 → 1.1.0-rc.1

package/changelog.md

@@ -1,5 +1,11 @@
+## 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/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/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/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/pull-down-refresh/common.d.ts

@@ -8,6 +8,7 @@ export interface PullDownRefreshProps {
     loading?: boolean;
     transitionDuration?: number;
     doneDuration?: number;
+    disabled?: number;
 }
 export declare const pullDownRefreshProps: {
     rootStyle: PropType<StyleValue>;
@@ -32,6 +33,10 @@ export declare const pullDownRefreshProps: {
         type: NumberConstructor;
         default: number;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
 export interface PullDownRefreshSlots {
     default(props: Record<string, never>): any;

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

@@ -1,20 +1,22 @@
+import { defaultConfig } from '../config';
 // const props = withDefaults(defineProps<PullDownRefreshProps>(), {
 //   threshold: 50,
 //   headerHeight: 50,
 //   loading: false,
 //   transitionDuration: 300,
 //   doneDuration: 0,
+//   disabled: false,
 // })
 export const pullDownRefreshProps = {
     rootStyle: [String, Object, Array],
     rootClass: String,
     threshold: {
         type: Number,
-        default: 50,
+        default: defaultConfig.pullDownRefresh.threshold,
     },
     headerHeight: {
         type: Number,
-        default: 50,
+        default: defaultConfig.pullDownRefresh.headerHeight,
     },
     loading: {
         type: Boolean,
@@ -22,10 +24,14 @@ export const pullDownRefreshProps = {
     },
     transitionDuration: {
         type: Number,
-        default: 300,
+        default: defaultConfig.pullDownRefresh.transitionDuration,
     },
     doneDuration: {
         type: Number,
-        default: 0,
+        default: defaultConfig.pullDownRefresh.doneDuration,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
     },
 };

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

@@ -40,6 +40,7 @@
     :data-threshold="threshold"
     :data-headerheight="headerHeight"
     :data-duration="transitionDuration"
+    :data-disabled="disabled"
     @touchstart="wxsswipe.onTouchStart"
     @touchmove="wxsswipe.onTouchMove"
     @touchend="wxsswipe.onTouchEnd"
@@ -143,7 +144,7 @@ export default {
     let lockDirection = "";
     const isDragging = ref(false);
     const onTouchStart = (event) => {
-      if (status.value !== "initial" || scrollTop.value !== 0) {
+      if (props.disabled || status.value !== "initial" || scrollTop.value !== 0) {
         return;
       }
       startX = event.touches[0].clientX;

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

@@ -12,7 +12,11 @@ function setStyle(instance, offsetY, duration) {
 
 function onTouchStart(event) {
   var dataset = event.instance.getDataset()
-  if (dataset.status !== 'initial' || dataset.scrolltop !== 0) {
+  if (
+    dataset.disabled ||
+    dataset.status !== 'initial' ||
+    dataset.scrolltop !== 0
+  ) {
     return
   }
   startX = event.touches[0].clientX

package/components/stepper/common.d.ts

@@ -17,6 +17,7 @@ export interface StepperProps {
     pressTime?: number;
     interval?: number;
     validateEvent?: boolean;
+    size?: 'small' | 'medium';
 }
 export declare const stepperProps: {
     rootStyle: PropType<StyleValue>;
@@ -60,6 +61,10 @@ export declare const stepperProps: {
         type: BooleanConstructor;
         default: boolean;
     };
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
 };
 export interface StepperEmits {
     (e: 'update:model-value', value: number | string | undefined): void;

package/components/stepper/common.js

@@ -8,6 +8,7 @@ import { defaultConfig } from '../config';
 //   pressTime: 350,
 //   interval: 150,
 //   validateEvent: true,
+//   size: 'medium',
 // })
 export const stepperProps = {
     rootStyle: [String, Object, Array],
@@ -51,4 +52,8 @@ export const stepperProps = {
         type: Boolean,
         default: defaultConfig.stepper.validateEvent,
     },
+    size: {
+        type: String,
+        default: defaultConfig.stepper.size,
+    },
 };

package/components/stepper/index.scss

@@ -15,7 +15,7 @@
     flex: none;
     justify-content: center;
     align-items: center;
-    width: var(--sar-stepper-button-width);
+    width: var(--sar-stepper-height);
     font-size: var(--sar-stepper-button-font-size);
     background-color: var(--sar-stepper-bg);
 
@@ -72,4 +72,18 @@
       color: var(--sar-stepper-input-disabled-color);
     }
   }
+
+  @include m(small) {
+    height: var(--sar-stepper-height-sm);
+
+    @include e(input) {
+      width: var(--sar-stepper-input-width-sm);
+      font-size: var(--sar-stepper-input-font-size-sm);
+    }
+
+    @include e(button) {
+      width: var(--sar-stepper-height-sm);
+      font-size: var(--sar-stepper-button-font-size-sm);
+    }
+  }
 }

package/components/stepper/stepper.vue

@@ -24,7 +24,7 @@
       :placeholder-class="bem.e('placeholder')"
       :value="inputValue"
       :disabled="isDisabled || isReadonly"
-      :stype="inputStyle"
+      :style="inputStyle"
       @input="onInput"
       @blur="onBlur"
       @focus="onFocus"
@@ -192,6 +192,7 @@ export default /* @__PURE__ */ _defineComponent({
     const stepperClass = computed(() => {
       return classNames(
         bem.b(),
+        bem.m(props.size),
         bem.m("disabled", isDisabled.value),
         bem.m("readonly", isReadonly.value),
         props.rootClass

package/components/stepper/variables.scss

@@ -1,18 +1,22 @@
 // #variables
 page {
-  --sar-stepper-height: 72rpx;
+  --sar-stepper-height: 64rpx;
   --sar-stepper-gap: 8rpx;
   --sar-stepper-bg: var(--sar-secondary-bg);
 
-  --sar-stepper-input-width: 100rpx;
+  --sar-stepper-input-width: 80rpx;
   --sar-stepper-input-padding-x: 10rpx;
   --sar-stepper-input-font-size: var(--sar-text-base);
   --sar-stepper-input-disabled-color: var(--sar-disabled-color);
   --sar-stepper-placeholder-color: var(--sar-quaternary-color);
 
-  --sar-stepper-button-width: var(--sar-stepper-height);
-  --sar-stepper-button-font-size: 36rpx;
+  --sar-stepper-button-font-size: var(--sar-text-lg);
   --sar-stepper-button-border-radius: var(--sar-rounded-sm);
   --sar-stepper-button-active-bg: var(--sar-active-deep-bg);
+
+  --sar-stepper-height-sm: 56rpx;
+  --sar-stepper-input-width-sm: 64rpx;
+  --sar-stepper-input-font-size-sm: var(--sar-text-sm);
+  --sar-stepper-button-font-size-sm: var(--sar-text-base);
 }
 // #endvariables

package/global.d.ts

@@ -35,6 +35,7 @@ import SarKeyboard from './components/keyboard/keyboard.vue'
 import SarList from './components/list/list.vue'
 import SarListItem from './components/list-item/list-item.vue'
 import SarLoading from './components/loading/loading.vue'
+import SarLoadMore from './components/load-more/load-more.vue'
 import SarMenu from './components/menu/menu.vue'
 import SarNavbar from './components/navbar/navbar.vue'
 import SarNavbarItem from './components/navbar-item/navbar-item.vue'
@@ -118,6 +119,7 @@ declare module '@vue/runtime-core' {
     SarList: typeof SarList
     SarListItem: typeof SarListItem
     SarLoading: typeof SarLoading
+    SarLoadMore: typeof SarLoadMore
     SarMenu: typeof SarMenu
     SarNavbar: typeof SarNavbar
     SarNavbarItem: typeof SarNavbarItem

package/index.d.ts

@@ -27,6 +27,7 @@ export * from './components/keyboard';
 export * from './components/layout';
 export * from './components/list';
 export * from './components/loading';
+export * from './components/load-more';
 export * from './components/locale';
 export * from './components/menu';
 export * from './components/navbar';

package/index.js

@@ -27,6 +27,7 @@ export * from './components/keyboard';
 export * from './components/layout';
 export * from './components/list';
 export * from './components/loading';
+export * from './components/load-more';
 export * from './components/locale';
 export * from './components/menu';
 export * from './components/navbar';

package/index.scss

@@ -20,6 +20,7 @@
 @use './components/keyboard/variables.scss' as *;
 @use './components/list/variables.scss' as *;
 @use './components/loading/variables.scss' as *;
+@use './components/load-more/variables.scss' as *;
 @use './components/menu/variables.scss' as *;
 @use './components/navbar/variables.scss' as *;
 @use './components/notice-bar/variables.scss' as *;

package/package.json

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