sard-uniapp 1.12.4 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [1.13.0](https://github.com/sutras/sard-uniapp/compare/v1.12.5...v1.13.0) (2025-04-29)
+
+
+### Features
+
+* button 组件新增 icon 功能 ([53a54f5](https://github.com/sutras/sard-uniapp/commit/53a54f5e55d698d10f5a5e8009b3cc4d1d4529ea))
+* 新增 divider 组件 ([261b234](https://github.com/sutras/sard-uniapp/commit/261b234e0a963da6d3ff2dd85028df0d31ee812d))
+* 新增 FloatingPanel 组件 ([f879433](https://github.com/sutras/sard-uniapp/commit/f879433a93afd93df58baeed227ddbb9da6b1730))
+
+
+
+## [1.12.5](https://github.com/sutras/sard-uniapp/compare/v1.12.4...v1.12.5) (2025-04-21)
+
+
+### Bug Fixes
+
+* 修复 table 组件 sass 导入问题 ([2975683](https://github.com/sutras/sard-uniapp/commit/2975683448aa78612f1f40a7d25a0da41df091bf))
+
+
+
 ## [1.12.4](https://github.com/sutras/sard-uniapp/compare/v1.12.3...v1.12.4) (2025-04-14)
 
 

package/components/button/button.d.ts

@@ -10,6 +10,7 @@ declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}
     size: "mini" | "small" | "medium" | "large";
     type: "default" | "pale" | "mild" | "outline" | "text" | "pale-text";
     theme: "primary" | "secondary" | "success" | "info" | "warning" | "danger" | "neutral";
+    loadingType: "clock" | "circular";
     block: boolean;
     hoverStopPropagation: boolean;
     lang: string;

package/components/button/button.vue

@@ -33,15 +33,18 @@
     @login="onLogin"
   >
     <view
-      v-if="loading"
+      v-if="loading || icon"
       :class="
-        classNames(
-          bem.e('loading'),
-          bem.em('loading', 'with-slot', !!$slots.default),
-        )
+        classNames(bem.e('icon'), bem.em('icon', 'with-slot', !!$slots.default))
       "
     >
-      <sar-loading :type="loadingType" />
+      <sar-loading v-if="loading" :type="loadingType" />
+      <sar-icon
+        v-else-if="icon"
+        :name="icon"
+        :family="iconFamily"
+        :size="iconSize"
+      />
     </view>
     <slot></slot>
   </button>
@@ -52,6 +55,7 @@ import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent }
 import { computed } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
 import SarLoading from "../loading/loading.vue";
+import SarIcon from "../icon/icon.vue";
 import { useFormContext } from "../form/common";
 import {
   defaultButtonProps
@@ -59,6 +63,7 @@ import {
 export default  _defineComponent({
   components: {
     SarLoading,
+    SarIcon,
   },
   ...{
     options: {
@@ -81,6 +86,9 @@ export default  _defineComponent({
     background: { type: String, required: false },
     block: { type: Boolean, required: false },
     inline: { type: Boolean, required: false },
+    icon: { type: String, required: false },
+    iconFamily: { type: String, required: false },
+    iconSize: { type: String, required: false },
     formType: { type: String, required: false },
     openType: { type: String, required: false },
     appParameter: { type: String, required: false },
@@ -156,7 +164,8 @@ export default  _defineComponent({
         bem.m("round", props.round),
         bem.m("disabled", isDisabled.value),
         bem.m("loading", props.loading),
-        bem.m("block", props.inline ? false : props.block),
+        bem.m("block", props.icon || props.inline ? false : props.block),
+        bem.m("iconic", !!props.icon || props.loading),
         props.rootClass
       );
     });
@@ -171,7 +180,7 @@ export default  _defineComponent({
     });
     const __returned__ = { props, emit, bem, formContext, isDisabled, onClick, onGetphonenumber, onGetuserinfo, onError, onOpensetting, onLaunchapp, onContact, onChooseavatar, onAgreeprivacyauthorization, onAddgroupapp, onChooseaddress, onChooseinvoicetitle, onSubscribe, onLogin, buttonClass, buttonStyle, get classNames() {
       return classNames;
-    }, SarLoading };
+    }, SarLoading, SarIcon };
     return __returned__;
   }
 });

package/components/button/common.d.ts

@@ -13,6 +13,9 @@ export interface ButtonProps {
     background?: string;
     block?: boolean;
     inline?: boolean;
+    icon?: string;
+    iconFamily?: string;
+    iconSize?: string;
     formType?: string;
     openType?: string;
     appParameter?: string;
@@ -35,6 +38,7 @@ export declare const defaultButtonProps: {
     lang: string;
     showMessageCard: boolean;
     block: boolean;
+    loadingType: import("../loading").LoadingProps["type"];
 };
 export interface ButtonSlots {
     default?(props: Record<string, never>): any;

package/components/button/index.scss

@@ -56,6 +56,14 @@
       var(--sar-button-border-radius-mini),
       var(--sar-button-font-size-mini)
     );
+
+    @include e(icon) {
+      font-size: var(--sar-button-icon-size-mini);
+    }
+  }
+
+  @include m-intersect(mini, iconic) {
+    min-width: var(--sar-button-height-mini);
   }
 
   @include m(small) {
@@ -66,6 +74,14 @@
       var(--sar-button-border-radius-sm),
       var(--sar-button-font-size-sm)
     );
+
+    @include e(icon) {
+      font-size: var(--sar-button-icon-size-sm);
+    }
+  }
+
+  @include m-intersect(small, iconic) {
+    min-width: var(--sar-button-height-sm);
   }
 
   @include m(medium) {
@@ -76,6 +92,14 @@
       var(--sar-button-border-radius),
       var(--sar-button-font-size)
     );
+
+    @include e(icon) {
+      font-size: var(--sar-button-icon-size);
+    }
+  }
+
+  @include m-intersect(medium, iconic) {
+    min-width: var(--sar-button-height);
   }
 
   @include m(large) {
@@ -86,6 +110,14 @@
       var(--sar-button-border-radius-lg),
       var(--sar-button-font-size-lg)
     );
+
+    @include e(icon) {
+      font-size: var(--sar-button-icon-size-lg);
+    }
+  }
+
+  @include m-intersect(large, iconic) {
+    min-width: var(--sar-button-height-lg);
   }
 
   // ## 显示边框
@@ -186,11 +218,12 @@
     cursor: var(--sar-button-loading-cursor);
   }
 
-  @include e(loading) {
-    display: flex;
+  // # 图标
+  @include e(icon) {
+    display: inline-flex;
 
     @include m(with-slot) {
-      margin-right: var(--sar-button-loading-margin-right);
+      margin-right: var(--sar-button-icon-margin-right);
     }
   }
 }

package/components/button/variables.scss

@@ -5,24 +5,28 @@ page {
   --sar-button-padding-x-mini: 12rpx;
   --sar-button-border-radius-mini: var(--sar-rounded-sm);
   --sar-button-font-size-mini: var(--sar-text-sm);
+  --sar-button-icon-size-mini: var(--sar-text-sm);
 
   --sar-button-height-sm: 64rpx;
   --sar-button-padding-y-sm: 0;
-  --sar-button-padding-x-sm: 24rpx;
+  --sar-button-padding-x-sm: 18rpx;
   --sar-button-border-radius-sm: var(--sar-rounded-sm);
   --sar-button-font-size-sm: var(--sar-text-sm);
+  --sar-button-icon-size-sm: var(--sar-text-base);
 
   --sar-button-height: 80rpx;
   --sar-button-padding-y: 0;
-  --sar-button-padding-x: 32rpx;
+  --sar-button-padding-x: 22rpx;
   --sar-button-border-radius: var(--sar-rounded);
   --sar-button-font-size: var(--sar-text-base);
+  --sar-button-icon-size: 36rpx;
 
   --sar-button-height-lg: 96rpx;
   --sar-button-padding-y-lg: 0;
-  --sar-button-padding-x-lg: 40rpx;
-  --sar-button-border-radius-lg: var(--sar-rounded-lg);
+  --sar-button-padding-x-lg: 28rpx;
+  --sar-button-border-radius-lg: var(--sar-rounded);
   --sar-button-font-size-lg: var(--sar-text-lg);
+  --sar-button-icon-size-lg: 40rpx;
 
   --sar-button-line-height: var(--sar-leading-normal);
 
@@ -33,6 +37,6 @@ page {
 
   --sar-button-loading-opacity: var(--sar-loading-opacity);
   --sar-button-loading-cursor: var(--sar-loading-cursor);
-  --sar-button-loading-margin-right: 0.5em;
+  --sar-button-icon-margin-right: 0.5em;
 }
 // #endvariables

package/components/config/index.d.ts

@@ -34,6 +34,7 @@ import { type TagProps } from '../tag';
 import { type ToastProps } from '../toast';
 import { type TreeProps } from '../tree';
 import { type UploadPreviewProps, type UploadProps } from '../upload';
+import { type DividerProps } from '../divider';
 type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Record<any, any> ? DeepPartial<T[P]> : T[P];
 };
@@ -64,6 +65,7 @@ export declare const defaultConfig: {
         lang: string;
         showMessageCard: boolean;
         block: boolean;
+        loadingType: LoadingProps["type"];
     };
     calendar: {
         type: CalendarProps["type"];
@@ -132,6 +134,11 @@ export declare const defaultConfig: {
     dialogAgent: {
         id: string;
     };
+    divider: {
+        type: DividerProps["type"];
+        hairline: boolean;
+        position: DividerProps["position"];
+    };
     dropdown: {
         direction: DropdownProps["direction"];
         disabled: boolean;
@@ -152,6 +159,11 @@ export declare const defaultConfig: {
         gapX: number;
         gapY: number;
     };
+    floatingPanel: {
+        duration: number;
+        contentDraggable: boolean;
+        safeAreaInsetBottom: boolean;
+    };
     form: {
         validateTrigger: FormProps["validateTrigger"];
         validateOnRuleChange: boolean;

package/components/config/index.js

@@ -27,6 +27,7 @@ export const defaultConfig = {
         lang: 'en',
         showMessageCard: false,
         block: true,
+        loadingType: undefined,
     },
     calendar: {
         type: 'single',
@@ -95,6 +96,11 @@ export const defaultConfig = {
     dialogAgent: {
         id: 'dialog',
     },
+    divider: {
+        type: 'solid',
+        hairline: true,
+        position: 'center',
+    },
     dropdown: {
         direction: 'down',
         disabled: false,
@@ -115,6 +121,11 @@ export const defaultConfig = {
         gapX: 24,
         gapY: 24,
     },
+    floatingPanel: {
+        duration: 300,
+        contentDraggable: true,
+        safeAreaInsetBottom: true,
+    },
     form: {
         validateTrigger: 'change',
         validateOnRuleChange: true,

package/components/divider/common.d.ts

@@ -0,0 +1,22 @@
+import { type StyleValue } from 'vue';
+export interface DividerProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    type?: 'solid' | 'dashed' | 'dotted';
+    hairline?: boolean;
+    position?: 'left' | 'right' | 'center';
+    vertical?: boolean;
+}
+export declare const defaultDividerProps: {
+    type: DividerProps["type"];
+    hairline: boolean;
+    position: DividerProps["position"];
+};
+export interface DividerSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface DividerEmits {
+    (e: 'click', event: any): void;
+}
+export interface DividerExpose {
+}

package/components/divider/common.js

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

package/components/divider/divider.d.ts

@@ -0,0 +1,18 @@
+import { type DividerProps, type DividerSlots } from './common';
+declare function __VLS_template(): Readonly<DividerSlots> & DividerSlots;
+declare const __VLS_component: import("vue").DefineComponent<DividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: any) => any;
+}, string, import("vue").PublicProps, Readonly<DividerProps> & Readonly<{
+    onClick?: ((event: any) => any) | undefined;
+}>, {
+    type: "solid" | "dashed" | "dotted";
+    position: "left" | "right" | "center";
+    hairline: boolean;
+}, {}, {}, {}, 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/divider/divider.vue

@@ -0,0 +1,62 @@
+<template>
+  <view :class="dividerClass" :style="dividerStyle">
+    <slot></slot>
+  </view>
+</template>
+
+<script>
+import { useSlots as _useSlots, mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed } from "vue";
+import { classNames, stringifyStyle, createBem } from "../../utils";
+import {
+  defaultDividerProps
+} from "./common";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "divider",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    type: { type: String, required: false },
+    hairline: { type: Boolean, required: false },
+    position: { type: String, required: false },
+    vertical: { type: Boolean, required: false }
+  }, defaultDividerProps),
+  emits: ["click"],
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const slots = _useSlots();
+    const bem = createBem("divider");
+    __expose({});
+    const dividerClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m(props.position),
+        bem.m("vertical", props.vertical),
+        bem.m("hairline", props.hairline),
+        bem.m("only-line", !slots.default),
+        props.rootClass
+      );
+    });
+    const dividerStyle = computed(() => {
+      return stringifyStyle(
+        {
+          borderStyle: props.type
+        },
+        props.rootStyle
+      );
+    });
+    const __returned__ = { props, slots, bem, dividerClass, dividerStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/divider/index.d.ts

@@ -0,0 +1 @@
+export type { DividerProps, DividerSlots, DividerEmits, DividerExpose, } from './common';

package/components/divider/index.js

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

package/components/divider/index.scss

@@ -0,0 +1,70 @@
+@use '../style/base' as *;
+
+@include bem(divider) {
+  @include b() {
+    @include universal;
+    flex-direction: row;
+    align-items: center;
+    margin: var(--sar-divider-margin-y) 0;
+    gap: var(--sar-divider-gap);
+    border-width: 0;
+    border-color: var(--sar-divider-border-color);
+    color: var(--sar-divider-color);
+
+    &::before,
+    &::after {
+      @include universal;
+      flex: 1;
+      border-color: inherit;
+      border-style: inherit;
+      border-width: 1px 0 0;
+      content: '';
+    }
+  }
+
+  @include m(only-line) {
+    &::after {
+      display: none;
+    }
+  }
+
+  @include m(left) {
+    &::before {
+      max-width: var(--sar-divider-left-width);
+    }
+  }
+
+  @include m(right) {
+    &::after {
+      max-width: var(--sar-divider-right-width);
+    }
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    height: var(--sar-divider-vertical-height);
+    margin: 0 var(--sar-divider-margin-x);
+    vertical-align: middle;
+
+    &::before {
+      height: 100%;
+      border-width: 0 0 0 1px;
+    }
+    &::after {
+      display: none;
+    }
+  }
+
+  @include m(hairline) {
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  @include m-intersect(vertical, hairline) {
+    &::before {
+      transform: scaleX(0.5);
+    }
+  }
+}

package/components/divider/variables.scss

@@ -0,0 +1,14 @@
+// #variables
+page {
+  --sar-divider-margin-y: 32rpx;
+  --sar-divider-margin-x: 16rpx;
+  --sar-divider-gap: 32rpx;
+
+  --sar-divider-color: var(--sar-tertiary-color);
+  --sar-divider-border-color: var(--sar-border-color);
+  --sar-divider-left-width: 10%;
+  --sar-divider-right-width: 10%;
+
+  --sar-divider-vertical-height: 1em;
+}
+// #endvariables

package/components/floating-panel/common.d.ts

@@ -0,0 +1,24 @@
+import { type StyleValue } from 'vue';
+export interface FloatingPanelProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    height?: number;
+    anchors?: number[];
+    duration?: number;
+    contentDraggable?: boolean;
+    safeAreaInsetBottom?: boolean;
+}
+export declare const defaultFloatingPanelProps: {
+    duration: number;
+    contentDraggable: boolean;
+    safeAreaInsetBottom: boolean;
+};
+export interface FloatingPanelSlots {
+    default?(props: Record<string, never>): any;
+}
+export interface FloatingPanelEmits {
+    (e: 'update:height', value: number): void;
+    (e: 'height-change', value: number): void;
+}
+export interface FloatingPanelExpose {
+}

package/components/floating-panel/common.js

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

package/components/floating-panel/floating-panel.d.ts

@@ -0,0 +1,20 @@
+import { type FloatingPanelProps, type FloatingPanelSlots } from './common';
+declare function __VLS_template(): Readonly<FloatingPanelSlots> & FloatingPanelSlots;
+declare const __VLS_component: import("vue").DefineComponent<FloatingPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:height": (value: number) => any;
+    "height-change": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<FloatingPanelProps> & Readonly<{
+    "onUpdate:height"?: ((value: number) => any) | undefined;
+    "onHeight-change"?: ((value: number) => any) | undefined;
+}>, {
+    duration: number;
+    contentDraggable: boolean;
+    safeAreaInsetBottom: boolean;
+}, {}, {}, {}, 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/floating-panel/floating-panel.vue

@@ -0,0 +1,243 @@
+<template>
+  <view
+    :class="floatingPanelClass"
+    :style="floatingPanelStyle"
+    @touchstart.passive="onTouchStart"
+    @touchmove.passive="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+    @mousedown="onMouseDown"
+  >
+    <view :class="bem.e('header')">
+      <view :class="bem.e('header-bar')"></view>
+    </view>
+    <view :class="bem.e('body')">
+      <scroll-view
+        :scroll-y="canScroll"
+        style="height: 100%"
+        data-target="scroll-view"
+        @touchmove.stop.prevent="onTouchMove"
+        @scroll="onScroll"
+      >
+        <slot></slot>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
+import { computed, ref, watch } from "vue";
+import {
+  classNames,
+  stringifyStyle,
+  createBem,
+  getWindowInfo,
+  isAlipay
+} from "../../utils";
+import {
+  defaultFloatingPanelProps
+} from "./common";
+import { useMouseDown } from "../../use";
+import { useInitialVelocity } from "../../use/useInitialVelocity";
+export default  _defineComponent({
+  ...{
+    options: {
+      virtualHost: true,
+      styleIsolation: "shared"
+    }
+  },
+  __name: "floating-panel",
+  props:  _mergeDefaults({
+    rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    rootClass: { type: String, required: false },
+    height: { type: Number, required: false },
+    anchors: { type: Array, required: false },
+    duration: { type: Number, required: false },
+    contentDraggable: { type: Boolean, required: false },
+    safeAreaInsetBottom: { type: Boolean, required: false }
+  }, defaultFloatingPanelProps),
+  emits: ["update:height", "height-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const bem = createBem("floating-panel");
+    const mergedAnchors = computed(() => {
+      const { windowHeight } = getWindowInfo();
+      return props.anchors || [100, ~~(windowHeight * 0.6)];
+    });
+    let prevY = 0;
+    let offsetY = ref(0);
+    const isDown = ref(false);
+    let target = "scroll";
+    watch(
+      mergedAnchors,
+      () => {
+        offsetY.value = mergedAnchors.value[0];
+      },
+      {
+        immediate: true
+      }
+    );
+    watch(
+      () => props.height,
+      () => {
+        if (props.height) {
+          offsetY.value = props.height;
+        }
+      },
+      {
+        immediate: true
+      }
+    );
+    const triggerChange = (value, touchEnd) => {
+      if (offsetY.value !== value) {
+        offsetY.value = value;
+        emit("update:height", offsetY.value);
+        if (touchEnd) {
+          emit("height-change", offsetY.value);
+        }
+      }
+    };
+    const canScroll = ref(false);
+    let scrollTop = 0;
+    let prevScrollTop = 0;
+    let targetLocked = false;
+    const onScroll = (event) => {
+      scrollTop = event.detail.scrollTop;
+    };
+    const initVelocity = useInitialVelocity();
+    const onTouchStart = (event) => {
+      isDown.value = true;
+      prevY = event.touches[0].clientY;
+      prevScrollTop = scrollTop;
+      canScroll.value = offsetY.value > mergedAnchors.value[0];
+      initVelocity.onStart({
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      });
+    };
+    const onTouchMove = (event) => {
+      const currentTarget = event.currentTarget;
+      if (currentTarget.dataset?.target === "scroll-view") {
+        if (!props.contentDraggable || isAlipay) {
+          return;
+        }
+      }
+      const currentY = event.touches[0].clientY;
+      let deltaY = prevY - currentY;
+      prevY = currentY;
+      if (!targetLocked) {
+        targetLocked = true;
+        if (prevScrollTop === scrollTop) {
+          target = "panel";
+          canScroll.value = false;
+        } else {
+          target = "scroll";
+          canScroll.value = true;
+        }
+        prevScrollTop = scrollTop;
+      }
+      if (target === "panel") {
+        const anchors = mergedAnchors.value;
+        if (offsetY.value > anchors[anchors.length - 1] || offsetY.value < anchors[0]) {
+          deltaY /= 4;
+        }
+        triggerChange(offsetY.value + deltaY);
+      }
+      initVelocity.onMove({
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      });
+    };
+    function getCorrectOffset(direction) {
+      const anchors = mergedAnchors.value;
+      const min = anchors[0];
+      const max = anchors[anchors.length - 1];
+      const current = offsetY.value;
+      if (current <= min) {
+        return min;
+      } else if (current >= max) {
+        return max;
+      }
+      for (let i = 1; i < anchors.length; i++) {
+        const below = anchors[i - 1];
+        const above = anchors[i];
+        if (current >= below && current <= above) {
+          if (direction) {
+            return direction === "up" ? above : below;
+          } else {
+            return above - current < current - below ? above : below;
+          }
+        }
+      }
+      return 0;
+    }
+    const onTouchEnd = () => {
+      if (target === "panel") {
+        const velocity = initVelocity.onEnd();
+        let value = 0;
+        if (Math.abs(velocity.y) > 0.4) {
+          value = getCorrectOffset(velocity.y > 0 ? "down" : "up");
+        } else {
+          value = getCorrectOffset();
+        }
+        triggerChange(value, true);
+      }
+      target = "scroll";
+      canScroll.value = true;
+      targetLocked = false;
+      isDown.value = false;
+    };
+    const onMouseDown = useMouseDown(onTouchStart, onTouchMove, onTouchEnd);
+    const floatingPanelClass = computed(() => {
+      return classNames(
+        bem.b(),
+        bem.m("safe", props.safeAreaInsetBottom),
+        props.rootClass
+      );
+    });
+    const floatingPanelStyle = computed(() => {
+      return stringifyStyle(
+        {
+          transform: `translate3d(0, calc(100% - ${offsetY.value}px), 0)`,
+          height: `${mergedAnchors.value[mergedAnchors.value.length - 1]}px`,
+          transition: isDown.value ? "none" : `transform ${props.duration}ms cubic-bezier(0.18, 0.89, 0.32, 1.28)`
+        },
+        props.rootStyle
+      );
+    });
+    __expose({});
+    const __returned__ = { props, emit, bem, mergedAnchors, get prevY() {
+      return prevY;
+    }, set prevY(v) {
+      prevY = v;
+    }, get offsetY() {
+      return offsetY;
+    }, set offsetY(v) {
+      offsetY = v;
+    }, isDown, get target() {
+      return target;
+    }, set target(v) {
+      target = v;
+    }, triggerChange, canScroll, get scrollTop() {
+      return scrollTop;
+    }, set scrollTop(v) {
+      scrollTop = v;
+    }, get prevScrollTop() {
+      return prevScrollTop;
+    }, set prevScrollTop(v) {
+      prevScrollTop = v;
+    }, get targetLocked() {
+      return targetLocked;
+    }, set targetLocked(v) {
+      targetLocked = v;
+    }, onScroll, initVelocity, onTouchStart, onTouchMove, getCorrectOffset, onTouchEnd, onMouseDown, floatingPanelClass, floatingPanelStyle };
+    return __returned__;
+  }
+});
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/components/floating-panel/index.d.ts

@@ -0,0 +1 @@
+export type { FloatingPanelProps, FloatingPanelSlots, FloatingPanelEmits, FloatingPanelExpose, } from './common';

package/components/floating-panel/index.js

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

package/components/floating-panel/index.scss

@@ -0,0 +1,55 @@
+@use '../style/base' as *;
+
+@include bem(floating-panel) {
+  @include b() {
+    @include universal;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: var(--sar-floating-panel-z-index);
+    width: 100vw;
+    border-top-left-radius: var(--sar-floating-panel-border-radius);
+    border-top-right-radius: var(--sar-floating-panel-border-radius);
+    background: var(--sar-floating-panel-bg);
+    will-change: transform;
+    touch-action: none;
+    transition-property: transform;
+
+    &::after {
+      position: absolute;
+      bottom: -100vh;
+      width: 100vw;
+      height: 100vh;
+      content: '';
+      background-color: inherit;
+    }
+
+    @include m(safe) {
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+  }
+
+  @include e(header) {
+    @include universal;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    height: var(--sar-floating-panel-header-height);
+    user-select: none;
+    cursor: grab;
+  }
+
+  @include e(header-bar) {
+    @include universal;
+    width: var(--sar-floating-panel-bar-width);
+    height: var(--sar-floating-panel-bar-height);
+    background: var(--sar-floating-panel-bar-color);
+    border-radius: var(--sar-rounded-full);
+  }
+
+  @include e(body) {
+    @include universal;
+    flex: 1;
+    overflow: hidden;
+  }
+}

package/components/floating-panel/variables.scss

@@ -0,0 +1,12 @@
+// #variables
+page {
+  --sar-floating-panel-z-index: 1000;
+  --sar-floating-panel-bg: var(--sar-emphasis-bg);
+  --sar-floating-panel-border-radius: var(--sar-rounded-xl);
+
+  --sar-floating-panel-header-height: 64rpx;
+  --sar-floating-panel-bar-width: 40rpx;
+  --sar-floating-panel-bar-height: 6rpx;
+  --sar-floating-panel-bar-color: var(--sar-tertiary-bg);
+}
+// #endvariables

package/components/loading/index.scss

@@ -25,8 +25,6 @@ $sar-loading-scale-number: 12;
       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) {

package/components/loading/variables.scss

@@ -1,7 +1,5 @@
 // #variables
 page {
-  --sar-loading-icon-min-width: 32rpx;
-  --sar-loading-icon-min-height: 32rpx;
   --sar-loading-icon-animation-duration: 0.8s;
 
   --sar-loading-scale-width: 9.38%;

package/components/table/table.vue

@@ -97,5 +97,5 @@ export default  _defineComponent({
 </script>
 
 <style lang="scss">
-@use './index.scss';
+@import './index.scss';
 </style>

package/global.d.ts

@@ -28,11 +28,13 @@ declare module 'vue' {
     SarDatetimeRangePickerInput: typeof import('./components/datetime-range-picker-input/datetime-range-picker-input').default
     SarDialog: typeof import('./components/dialog/dialog').default
     SarDialogAgent: typeof import('./components/dialog-agent/dialog-agent').default
+    SarDivider: typeof import('./components/divider/divider').default
     SarDropdown: typeof import('./components/dropdown/dropdown').default
     SarDropdownItem: typeof import('./components/dropdown-item/dropdown-item').default
     SarEmpty: typeof import('./components/empty/empty').default
     SarFab: typeof import('./components/fab/fab').default
     SarFloatingBubble: typeof import('./components/floating-bubble/floating-bubble').default
+    SarFloatingPanel: typeof import('./components/floating-panel/floating-panel').default
     SarForm: typeof import('./components/form/form').default
     SarFormItem: typeof import('./components/form-item/form-item').default
     SarGrid: typeof import('./components/grid/grid').default

package/index.d.ts

@@ -24,10 +24,12 @@ export * from './components/datetime-range-picker';
 export * from './components/datetime-range-picker-input';
 export * from './components/dialog';
 export * from './components/dialog-agent';
+export * from './components/divider';
 export * from './components/dropdown';
 export * from './components/empty';
 export * from './components/fab';
 export * from './components/floating-bubble';
+export * from './components/floating-panel';
 export * from './components/form';
 export * from './components/grid';
 export * from './components/icon';

package/index.js

@@ -24,10 +24,12 @@ export * from './components/datetime-range-picker';
 export * from './components/datetime-range-picker-input';
 export * from './components/dialog';
 export * from './components/dialog-agent';
+export * from './components/divider';
 export * from './components/dropdown';
 export * from './components/empty';
 export * from './components/fab';
 export * from './components/floating-bubble';
+export * from './components/floating-panel';
 export * from './components/form';
 export * from './components/grid';
 export * from './components/icon';

package/index.scss

@@ -15,10 +15,12 @@
 @use './components/collapse/variables.scss' as *;
 @use './components/datetime-range-picker/variables.scss' as *;
 @use './components/dialog/variables.scss' as *;
+@use './components/divider/variables.scss' as *;
 @use './components/dropdown/variables.scss' as *;
 @use './components/empty/variables.scss' as *;
 @use './components/fab/variables.scss' as *;
 @use './components/floating-bubble/variables.scss' as *;
+@use './components/floating-panel/variables.scss' as *;
 @use './components/form/variables.scss' as *;
 @use './components/grid/variables.scss' as *;
 @use './components/icon/variables.scss' as *;

package/package.json

@@ -2,7 +2,7 @@
   "id": "sard-uniapp",
   "name": "sard-uniapp",
   "displayName": "sard-uniapp",
-  "version": "1.12.4",
+  "version": "1.13.0",
   "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
   "main": "index.js",
   "scripts": {