sard-uniapp 1.19.4 → 1.20.0

package/components/resize-sensor/common.d.ts

@@ -0,0 +1,19 @@
+import { type NodeRect } from '../../utils';
+import { type StyleValue } from 'vue';
+export interface ResizeSensorProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    initial?: boolean;
+    threshold?: number;
+}
+export declare const defaultResizeSensorProps: {
+    threshold: number;
+};
+export interface ResizeSensorSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface ResizeSensorEmits {
+    (e: 'resize', value: NodeRect): void;
+}
+export interface ResizeSensorExpose {
+}

package/components/resize-sensor/common.js

@@ -0,0 +1,2 @@
+import { defaultConfig } from '../config';
+export const defaultResizeSensorProps = defaultConfig.resizeSensor;

package/components/resize-sensor/index.d.ts

@@ -0,0 +1 @@
+export type { ResizeSensorProps, ResizeSensorSlots, ResizeSensorEmits, ResizeSensorExpose, } from './common';

package/components/resize-sensor/index.js

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

package/components/resize-sensor/index.scss

@@ -0,0 +1,33 @@
+@use '../style/base' as *;
+
+@include bem(resize-sensor) {
+  @include b() {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -9999;
+    overflow: hidden;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  @include e(scroll-view) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  @include e(increase) {
+    width: 100000px;
+    height: 100000px;
+  }
+
+  @include e(decrease) {
+    width: 200%;
+    height: 200%;
+  }
+}

package/components/resize-sensor/resize-sensor.d.ts

@@ -0,0 +1,16 @@
+import { type ResizeSensorProps, type ResizeSensorSlots } from './common';
+declare function __VLS_template(): Readonly<ResizeSensorSlots> & ResizeSensorSlots;
+declare const __VLS_component: import("vue").DefineComponent<ResizeSensorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    resize: (value: import("../../utils").NodeRect) => any;
+}, string, import("vue").PublicProps, Readonly<ResizeSensorProps> & Readonly<{
+    onResize?: ((value: import("../../utils").NodeRect) => any) | undefined;
+}>, {
+    threshold: number;
+}, {}, {}, {}, 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/resize-sensor/resize-sensor.vue

@@ -0,0 +1,152 @@
+<template>
+  <view :class="resizeClass" :style="resizeStyle">
+    <scroll-view
+      :class="bem.e('scroll-view')"
+      scroll-x
+      scroll-y
+      :scroll-left="scrollValue"
+      :scroll-top="scrollValue"
+      @scroll="onDebouncedScroll"
+    >
+      <view :class="bem.e('increase')"></view>
+    </scroll-view>
+    <scroll-view
+      :class="bem.e('scroll-view')"
+      scroll-x
+      scroll-y
+      :scroll-left="scrollValue"
+      :scroll-top="scrollValue"
+      @scroll="onDebouncedScroll"
+    >
+      <view :class="bem.e('decrease')"></view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  getBoundingClientRect,
+  debounce
+} from "../../utils";
+import {
+  defaultResizeSensorProps
+} from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} initial 是否在初始化时触发 `resize` 事件，默认值：false。
+ * @property {number} threshold 触发 `resize` 事件的阈值，单位毫秒，默认值：150。
+ * @event {(value: NodeRect) => void} resize 在元素宽或高发生变化时触发
+ */
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "resize-sensor",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    initial: { type: Boolean, required: false },
+    threshold: { type: Number, required: false }
+  }, defaultResizeSensorProps),
+  emits: ["resize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("resize-sensor");
+    const instance = getCurrentInstance();
+    const resizeId = uniqid();
+    const bounding = ref({
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      height: 0,
+      width: 0
+    });
+    let firstTime = true;
+    watch(bounding, () => {
+      if (!firstTime || props.initial) {
+        emit("resize", { ...bounding.value });
+      }
+      firstTime = false;
+    });
+    const scrollValue = ref(0);
+    let count = 0;
+    const reset = () => {
+      scrollValue.value = 1e5 + ++count;
+    };
+    const debouncedUpdate = debounce(
+      async () => {
+        const rect = await getBoundingClientRect(`.${resizeId}`, instance);
+        bounding.value = {
+          top: rect.top,
+          right: rect.right,
+          bottom: rect.bottom,
+          left: rect.left,
+          height: rect.height,
+          width: rect.width
+        };
+      },
+      props.threshold,
+      {
+        maxWait: 0,
+        leading: false,
+        trailing: true
+      }
+    );
+    const onDebouncedScroll = debounce(
+      () => {
+        reset();
+        debouncedUpdate();
+      },
+      15,
+      {
+        maxWait: 0,
+        leading: true,
+        trailing: false
+      }
+    );
+    onMounted(() => {
+      nextTick(reset);
+    });
+    __expose({});
+    const resizeClass = computed(() => {
+      return classNames(bem.b(), resizeId, props.rootClass);
+    });
+    const resizeStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const __returned__ = { props, emit, bem, instance, resizeId, bounding, get firstTime() {
+      return firstTime;
+    }, set firstTime(v) {
+      firstTime = v;
+    }, scrollValue, get count() {
+      return count;
+    }, set count(v) {
+      count = v;
+    }, reset, debouncedUpdate, onDebouncedScroll, resizeClass, resizeStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/scroll-list/README.md

@@ -0,0 +1,79 @@
+---
+nav: 组件
+title: ScrollList
+subtitle: 横向滚动列表
+group: 数据展示
+version: 1.20+
+---
+
+## 介绍
+
+给横向滚动容器添加模拟滚动条，一般用于同时展示多个商品、分类列表的场景。
+
+## 引入
+
+```ts
+import ScrollList from 'sard-uniapp/components/scroll-list/scroll-list.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+在默认插槽里编写任意内容。
+
+@code('${DEMO_PATH}/scroll-list/demo/Basic.vue')
+
+### 滚动条颜色
+
+使用 `scrollbar-bg` 属性设置滚动条背景色，使用 `thumb-bg` 属性设置滑块背景色。
+
+也可以通过 css 变量设置。
+
+@code('${DEMO_PATH}/scroll-list/demo/Color.vue')
+
+### 异步获取数据
+
+组件内部能够通过观察滚动内容宽度变化，动态调整滑块的宽度。
+
+@code('${DEMO_PATH}/scroll-list/demo/Async.vue')
+
+### 隐藏滚动条
+
+如果滚动内容宽度小于滚动容器的宽度，会自动隐藏滚动条。
+
+@code('${DEMO_PATH}/scroll-list/demo/HideThumb.vue')
+
+## API
+
+### ScrollListProps
+
+| 属性            | 描述                                            | 类型       | 默认值 |
+| --------------- | ----------------------------------------------- | ---------- | ------ |
+| root-class      | 组件根元素类名                                  | string     | -      |
+| root-style      | 组件根元素样式                                  | StyleValue | -      |
+| scrollbar-width | 滚动条宽度                                      | string     | -      |
+| scrollbar-bg    | 滚动条的背景色                                  | string     | -      |
+| thumb-bg        | 滑块的的背景色                                  | string     | -      |
+| upper-threshold | 距左边多远时（单位px），触发 scrolltoupper 事件 | number     | 50     |
+| lower-threshold | 距右边多远时（单位px），触发 scrolltolower 事件 | number     | 50     |
+
+### ScrollListSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### ScrollListEmits
+
+| 事件          | 描述             | 类型                  |
+| ------------- | ---------------- | --------------------- |
+| scroll        | 滚动时触发       | ( event: any) => void |
+| scrolltoupper | 滚动到左边时触发 | ( event: any) => void |
+| scrolltolower | 滚动到右边时触发 | ( event: any) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/scroll-list/common.d.ts

@@ -0,0 +1,23 @@
+import { type StyleValue } from 'vue';
+export interface ScrollListProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    scrollbarBg?: string;
+    scrollbarWidth?: number;
+    thumbBg?: string;
+    thumbWidth?: number;
+    upperThreshold?: number;
+    lowerThreshold?: number;
+}
+export declare const defaultScrollListProps: {};
+export interface ScrollListSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface ScrollListEmits {
+    (e: 'scroll', event: any): void;
+    (e: 'scrolltoupper', event: any): void;
+    (e: 'scrolltolower', event: any): void;
+}
+export interface ScrollListExpose {
+    update: () => Promise<void>;
+}

package/components/scroll-list/common.js

@@ -0,0 +1 @@
+export const defaultScrollListProps = {};

package/components/scroll-list/index.d.ts

@@ -0,0 +1 @@
+export type { ScrollListProps, ScrollListSlots, ScrollListEmits, ScrollListExpose, } from './common';

package/components/scroll-list/index.js

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

package/components/scroll-list/index.scss

@@ -0,0 +1,35 @@
+@use '../style/base' as *;
+
+@include bem(scroll-list) {
+  @include b() {
+    @include universal;
+  }
+
+  @include e(content) {
+    @include universal;
+    display: inline-flex;
+    flex-direction: row;
+  }
+
+  @include e(scrollbar) {
+    @include universal;
+    width: var(--sar-scroll-list-scrollbar-width);
+    height: var(--sar-scroll-list-scrollbar-height);
+    margin-top: var(--sar-scroll-list-scrollbar-margin-top);
+    margin-left: auto;
+    margin-right: auto;
+    border-radius: var(--sar-rounded-full);
+    background-color: var(--sar-scroll-list-scrollbar-bg);
+  }
+
+  @include e(scrollbar-thumb) {
+    @include universal;
+    top: 0;
+    left: 0;
+    position: absolute;
+    width: var(--sar-scroll-list-scrollbar-thumb-width);
+    height: 100%;
+    border-radius: var(--sar-rounded-full);
+    background-color: var(--sar-scroll-list-scrollbar-thumb-bg);
+  }
+}

package/components/scroll-list/scroll-list.d.ts

@@ -0,0 +1,20 @@
+import { type ScrollListProps, type ScrollListSlots } from './common';
+declare function __VLS_template(): Readonly<ScrollListSlots> & ScrollListSlots;
+declare const __VLS_component: import("vue").DefineComponent<ScrollListProps, {
+    update: () => Promise<void>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    scroll: (event: any) => any;
+    scrolltoupper: (event: any) => any;
+    scrolltolower: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<ScrollListProps> & Readonly<{
+    onScroll?: ((event: any) => any) | undefined;
+    onScrolltoupper?: ((event: any) => any) | undefined;
+    onScrolltolower?: ((event: any) => 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/scroll-list/scroll-list.vue

@@ -0,0 +1,158 @@
+<template>
+  <view :class="scrollListClass" :style="scrollListStyle">
+    <scroll-view
+      scroll-x
+      :class="bem.e('scroll-view')"
+      :upper-threshold="upperThreshold"
+      :lower-threshold="lowerThreshold"
+      @scroll="onScroll"
+      @scrolltoupper="onScrolltoupper"
+      @scrolltolower="onScrolltolower"
+    >
+      <view :id="contentId" :class="bem.e('content')">
+        <slot></slot>
+        <sar-resize-sensor initial :threshold="0" @resize="onResize" />
+      </view>
+    </scroll-view>
+    <view
+      v-if="!hideScrollbar"
+      :class="bem.e('scrollbar')"
+      :style="scrollbarStyle"
+    >
+      <view :class="bem.e('scrollbar-thumb')" :style="thumbStyle"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, getCurrentInstance, ref } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  uniqid,
+  getBoundingClientRect,
+  debounce
+} from "../../utils";
+import SarResizeSensor from "../resize-sensor/resize-sensor.vue";
+import {
+  defaultScrollListProps
+} from "./common";
+import { useWindowResize } from "../../use";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} scrollbarWidth 滚动条宽度，默认值：-。
+ * @property {string} scrollbarBg 滚动条的背景色，默认值：-。
+ * @property {string} thumbBg 滑块的的背景色，默认值：-。
+ * @property {number} upperThreshold 距左边多远时（单位px），触发 scrolltoupper 事件，默认值：50。
+ * @property {number} lowerThreshold 距右边多远时（单位px），触发 scrolltolower 事件，默认值：50。
+ * @event {( event: any) => void} scroll 滚动时触发
+ * @event {( event: any) => void} scrolltoupper 滚动到左边时触发
+ * @event {( event: any) => void} scrolltolower 滚动到右边时触发
+ */
+export default  _defineComponent({
+  components: {
+    SarResizeSensor,
+  },
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "scroll-list",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    scrollbarBg: { type: String, required: false },
+    scrollbarWidth: { type: Number, required: false },
+    thumbBg: { type: String, required: false },
+    thumbWidth: { type: Number, required: false },
+    upperThreshold: { type: Number, required: false },
+    lowerThreshold: { type: Number, required: false }
+  }, defaultScrollListProps),
+  emits: ["scroll", "scrolltoupper", "scrolltolower"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("scroll-list");
+    const scrollListId = uniqid();
+    const contentId = uniqid();
+    const instance = getCurrentInstance();
+    const scrollLeft = ref(0);
+    const scrollWidth = ref(0);
+    const clientWidth = ref(0);
+    const update = debounce(
+      async () => {
+        const scrollListRect = await getBoundingClientRect(
+          `.${scrollListId}`,
+          instance
+        );
+        clientWidth.value = scrollListRect.width;
+        const contentRect = await getBoundingClientRect(`#${contentId}`, instance);
+        scrollWidth.value = contentRect.width;
+      },
+      50,
+      {
+        leading: false,
+        trailing: true
+      }
+    );
+    useWindowResize(update);
+    const onResize = () => {
+      update();
+    };
+    const onScroll = (event) => {
+      scrollLeft.value = event.detail.scrollLeft;
+      scrollWidth.value = event.detail.scrollWidth;
+      emit("scroll", event);
+    };
+    const onScrolltoupper = (event) => {
+      emit("scrolltoupper", event);
+    };
+    const onScrolltolower = (event) => {
+      emit("scrolltolower", event);
+    };
+    __expose({ update });
+    const scrollListClass = computed(() => {
+      return classNames(bem.b(), scrollListId, props.rootClass);
+    });
+    const scrollListStyle = computed(() => {
+      return stringifyStyle(props.rootStyle);
+    });
+    const scrollbarStyle = computed(() => {
+      return {
+        width: props.scrollbarWidth || "",
+        backgroundColor: props.scrollbarBg
+      };
+    });
+    const thumbWidth = computed(() => {
+      let width = clientWidth.value / scrollWidth.value;
+      if (!Number.isFinite(width)) {
+        width = 0;
+      }
+      return width;
+    });
+    const hideScrollbar = computed(() => thumbWidth.value >= 1);
+    const thumbStyle = computed(() => {
+      let left = scrollLeft.value / scrollWidth.value;
+      if (!Number.isFinite(left)) {
+        left = 0;
+      }
+      return {
+        left: left * 100 + "%",
+        width: thumbWidth.value * 100 + "%",
+        backgroundColor: props.thumbBg
+      };
+    });
+    const __returned__ = { props, emit, bem, scrollListId, contentId, instance, scrollLeft, scrollWidth, clientWidth, update, onResize, onScroll, onScrolltoupper, onScrolltolower, scrollListClass, scrollListStyle, scrollbarStyle, thumbWidth, hideScrollbar, thumbStyle, SarResizeSensor };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/scroll-list/variables.scss

@@ -0,0 +1,11 @@
+// #variables
+page,
+.sar-portal {
+  --sar-scroll-list-scrollbar-width: 100rpx;
+  --sar-scroll-list-scrollbar-height: 8rpx;
+  --sar-scroll-list-scrollbar-margin-top: 32rpx;
+  --sar-scroll-list-scrollbar-bg: var(--sar-tertiary-bg);
+  --sar-scroll-list-scrollbar-thumb-width: 40rpx;
+  --sar-scroll-list-scrollbar-thumb-bg: var(--sar-primary);
+}
+// #endvariables

package/components/sidebar/README.md

@@ -67,14 +67,14 @@ import SidebarItem from 'sard-uniapp/components/sidebar-item/sidebar-item.vue'
 
 ### SidebarProps
 
-| 属性                     | 描述                       | 类型                                                       | 默认值                                              |
-| ------------------------ | -------------------------- | ---------------------------------------------------------- | --------------------------------------------------- |
-| root-class               | 组件根元素类名             | string                                                     | -                                                   |
-| root-style               | 组件根元素样式             | StyleValue                                                 | -                                                   |
-| current                  | 当前绑定导航项的名称       | string \| number                                           | -                                                   |
-| round                    | 当前导航项是否显示为圆角   | boolean                                                    | false                                               |
-| line                     | 当前导航项是否添加左边线条 | boolean                                                    | false                                               |
-| scroll-into-view-options | 自定义滚动配置选项         | [ScrollIntoViewOptions](../guide/scroll-into-view-options) | {position: 'nearest', startOffset: 0, endOffset: 0} |
+| 属性                     | 描述                       | 类型                                                                 | 默认值                                              |
+| ------------------------ | -------------------------- | -------------------------------------------------------------------- | --------------------------------------------------- |
+| root-class               | 组件根元素类名             | string                                                               | -                                                   |
+| root-style               | 组件根元素样式             | StyleValue                                                           | -                                                   |
+| current                  | 当前绑定导航项的名称       | string \| number                                                     | -                                                   |
+| round                    | 当前导航项是否显示为圆角   | boolean                                                              | false                                               |
+| line                     | 当前导航项是否添加左边线条 | boolean                                                              | false                                               |
+| scroll-into-view-options | 自定义滚动配置选项         | [ScrollIntoViewOptions](../utilities/geometry#ScrollIntoViewOptions) | {position: 'nearest', startOffset: 0, endOffset: 0} |
 
 ### SidebarSlots
 

package/components/sidebar/sidebar.vue

@@ -41,7 +41,7 @@ import {
  * @property {string | number} current 当前绑定导航项的名称，默认值：-。
  * @property {boolean} round 当前导航项是否显示为圆角，默认值：false。
  * @property {boolean} line 当前导航项是否添加左边线条，默认值：false。
- * @property {[ScrollIntoViewOptions](../guide/scroll-into-view-options)} scrollIntoViewOptions 自定义滚动配置选项，默认值：{position: 'nearest', startOffset: 0, endOffset: 0}。
+ * @property {[ScrollIntoViewOptions](../utilities/geometry#ScrollIntoViewOptions)} scrollIntoViewOptions 自定义滚动配置选项，默认值：{position: 'nearest', startOffset: 0, endOffset: 0}。
  * @event {(name: string | number) => void} update 当前导航项改变时触发
  * @event {(name: string | number) => void} change 当前导航项改变时触发
  */

package/components/slider/slider.vue

@@ -88,7 +88,7 @@ import {
   createBem,
   uniqid,
   getBoundingClientRect,
-  minmax,
+  clamp,
   mround,
   arrayEqual,
   toArray
@@ -196,7 +196,7 @@ export default  _defineComponent({
       if (isDisabled.value || isReadonly.value) {
         return;
       }
-      const { clientY, clientX } = "touches" in event ? event.touches[0] : event;
+      const { clientY, clientX } = "touches" in event ? event.touches[0] : "detail" in event && "clientX" in event.detail ? event.detail : event;
       trackRect = await getBoundingClientRect(`#${trackId}`, instance);
       const trackSize = props.vertical ? trackRect.height : trackRect.width;
       const tapCoord = props.vertical ? clientY : clientX;
@@ -204,7 +204,7 @@ export default  _defineComponent({
       const offset = tapCoord - startCoord;
       const ratio = offset / trackSize;
       const total = props.max - props.min;
-      const tapValue = minmax(
+      const tapValue = clamp(
         mround(props.min + total * ratio, props.step),
         props.min,
         props.max
@@ -268,7 +268,7 @@ export default  _defineComponent({
       const delta = props.vertical ? deltaY : deltaX;
       const ratio = delta / trackSize + downRatio;
       const total = props.max - props.min;
-      const tapValue = minmax(
+      const tapValue = clamp(
         mround(props.min + total * ratio, props.step),
         props.min,
         props.max

package/components/stepper/stepper.vue

@@ -57,7 +57,7 @@ import {
   stringifyStyle,
   createBem,
   isNullish,
-  minmax
+  clamp
 } from "../../utils";
 import SarIcon from "../icon/icon.vue";
 import { useFormContext, useFormItemContext } from "../form/common";
@@ -155,7 +155,7 @@ export default  _defineComponent({
       inputValue.value = value;
     };
     const normalizedValue = (value) => {
-      value = minmax(value, props.min, props.max);
+      value = clamp(value, props.min, props.max);
       if (props.precision !== void 0) {
         value = +value.toFixed(props.precision);
       }