sard-uniapp 1.18.0 → 1.19.1

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.19.1](https://github.com/sutras/sard-uniapp/compare/v1.19.0...v1.19.1) (2025-06-11)
+
+
+### Features
+
+* dropdown 新增 before-close 属性 ([fca24ac](https://github.com/sutras/sard-uniapp/commit/fca24ac536bc3840fbc9562fde4992f864968080))
+
+
+
+# [1.19.0](https://github.com/sutras/sard-uniapp/compare/v1.18.0...v1.19.0) (2025-06-10)
+
+
+### Bug Fixes
+
+* 修复 dialog 命令式回调选项参数问题 ([5af4fd8](https://github.com/sutras/sard-uniapp/commit/5af4fd81b6528501f2103b8db1b40a14f6186926))
+* 修复 form fields 错乱删除问题 ([8250da9](https://github.com/sutras/sard-uniapp/commit/8250da9770152a4f6a93e873c70c01e13c91ce56))
+* 修复cascader组件因值不存在时不显示列表的问题 ([4bae371](https://github.com/sutras/sard-uniapp/commit/4bae37167ccd88db3286d3bc233dfa250cfad4f9))
+* 修复picker最后一列在安卓偏移问题 ([a041836](https://github.com/sutras/sard-uniapp/commit/a04183687b4291c04a0c5381dbc8fbf0b0f5afba))
+
+
+### Features
+
+* button 新增 square 属性 ([41db4ac](https://github.com/sutras/sard-uniapp/commit/41db4acd6804f52e02cff5eeb3eaaf005dfc7f5e))
+* dropdown 新增 before-close 属性 ([3407a6b](https://github.com/sutras/sard-uniapp/commit/3407a6b5a9cb4038c7d63de9bfdb81498e6afd76))
+* 新增 swipe-action 组件 ([9a390c6](https://github.com/sutras/sard-uniapp/commit/9a390c61d036a016d2ee8d706130589e3ca4009c))
+
+
+
 # [1.18.0](https://github.com/sutras/sard-uniapp/compare/v1.17.1...v1.18.0) (2025-06-06)
 
 

package/README.md

@@ -25,7 +25,7 @@
 
 ## 特性
 
-- 🧩 80+个高质量组件，覆盖移动端主流场景
+- 🧩 90+个高质量组件，覆盖移动端主流场景
 - 💪 支持一套代码同时开发 H5 / 小程序 / App
 - 🌿 支持按需引入和 `Tree Shaking`
 - 📖 详尽的文档和案例展示
@@ -46,6 +46,11 @@
 
 ## 如何维护
 
+### 前提条件
+
+- 确保 node >= 20
+- 建议使用 pnpm
+
 ### 克隆仓库到本地
 
 ```bash

package/components/button/button.vue

@@ -79,6 +79,7 @@ export default  _defineComponent({
     theme: { type: String, required: false },
     size: { type: String, required: false },
     round: { type: Boolean, required: false },
+    square: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
     loading: { type: Boolean, required: false },
     loadingType: { type: String, required: false },
@@ -162,6 +163,7 @@ export default  _defineComponent({
         bem.m(props.type),
         bem.m(`${props.type}-${props.theme}`),
         bem.m("round", props.round),
+        bem.m("square", props.square),
         bem.m("disabled", isDisabled.value),
         bem.m("loading", props.loading),
         bem.m("block", props.icon || props.inline ? false : props.block),

package/components/button/common.d.ts

@@ -6,6 +6,7 @@ export interface ButtonProps {
     theme?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'neutral';
     size?: 'mini' | 'small' | 'medium' | 'large';
     round?: boolean;
+    square?: boolean;
     disabled?: boolean;
     loading?: boolean;
     loadingType?: 'clock' | 'circular';

package/components/button/index.scss

@@ -190,6 +190,15 @@
     }
   }
 
+  // # 方形按钮
+  @include m(square) {
+    border-radius: 0;
+
+    &::after {
+      border-radius: 0;
+    }
+  }
+
   // # active 状态
   @include m(default, pale, mild, outline, text) {
     &:not(#{bem($b: button, $m: disabled)}):not(

package/components/cascader/cascader.vue

@@ -153,6 +153,13 @@ export default  _defineComponent({
               selected: null
             });
           }
+        } else {
+          nextTabs = [
+            {
+              options: props.options || [],
+              selected: null
+            }
+          ];
         }
       }
       if (nextTabs) {

package/components/cascader-input/cascader-input.vue

@@ -103,7 +103,7 @@ export default  _defineComponent({
     function getOutletText(options, value, fieldKeys) {
       const selectedOptions = getSelectedOptionsByValue(options, value, fieldKeys);
       if (!selectedOptions) {
-        return "";
+        return isNullish(value) ? "" : String(value);
       }
       const labels = selectedOptions.map((option) => option[fieldKeys.label]);
       return labels.join("/");

package/components/crop-image/crop-image.vue

@@ -109,7 +109,7 @@ import {
 import {
   defaultCropImageProps
 } from "./common";
-import { useDragPinch, useSetTimeout } from "../../use";
+import { useDragPinch, useTimeout } from "../../use";
 import { useTranslate } from "../locale";
 import SarPopup from "../popup/popup.vue";
 import SarIcon from "../icon/icon.vue";
@@ -186,23 +186,23 @@ export default  _defineComponent({
     });
     const rotate = ref(0);
     const actualRotate = ref(0);
-    const [onRotateEnd] = useSetTimeout(() => {
+    const { start: onRotateEnd } = useTimeout(() => {
       actualRotate.value = rotate.value;
-    });
+    }, 150 + 100);
     watch(rotate, () => {
-      onRotateEnd(150 + 100);
+      onRotateEnd();
     });
     const isRotating = computed(() => rotate.value !== actualRotate.value);
     const isStillRotating = ref(false);
-    const [stopRotateLater, cancelStopRotate] = useSetTimeout(() => {
+    const { start: stopRotateLater, stop: cancelStopRotate } = useTimeout(() => {
       isStillRotating.value = false;
-    });
+    }, 150);
     watch(isRotating, () => {
       cancelStopRotate();
       if (isRotating.value) {
         isStillRotating.value = true;
       } else {
-        stopRotateLater(150);
+        stopRotateLater();
       }
     });
     const maskStyle = computed(() => {

package/components/dialog-agent/common.d.ts

@@ -1,6 +1,9 @@
 import { type DialogProps } from '../dialog/common';
 export interface DialogAgentProps extends DialogProps {
     id?: string;
+    onClose?: () => void;
+    onCancel?: () => void;
+    onConfirm?: () => void;
 }
 export declare const defaultDialogAgentProps: () => {
     id: string;

package/components/dialog-agent/dialog-agent.vue

@@ -1,5 +1,11 @@
 <template>
-  <sar-dialog v-bind="innerProps" v-model:visible="innerProps.visible" />
+  <sar-dialog
+    v-bind="innerProps"
+    v-model:visible="innerProps.visible"
+    @confirm="innerProps.onConfirm"
+    @close="innerProps.onClose"
+    @cancel="innerProps.onCancel"
+  />
 </template>
 
 <script>
@@ -24,6 +30,9 @@ export default  _defineComponent({
   __name: "dialog-agent",
   props:  _mergeDefaults({
     id: { type: String, required: false },
+    onClose: { type: Function, required: false },
+    onCancel: { type: Function, required: false },
+    onConfirm: { type: Function, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     popupStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },

package/components/dropdown/common.d.ts

@@ -23,6 +23,9 @@ export interface DropdownOption {
     label?: string;
     value?: any;
 }
+export type DropdownCloseType = 'overlay' | 'away' | 'other-button' | 'option' | 'button';
+export type DropdownBeforeClose = (type: DropdownCloseType) => any;
+export type DropdownBeforeOpen = () => any;
 export interface DropdownItemProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -34,6 +37,8 @@ export interface DropdownItemProps {
     visible?: boolean;
     separator?: string;
     placeholder?: string;
+    beforeClose?: DropdownBeforeClose;
+    beforeOpen?: DropdownBeforeOpen;
 }
 export declare const defaultDropdownItemProps: {
     options: () => never[];

package/components/dropdown/index.d.ts

@@ -1 +1 @@
-export type { DropdownProps, DropdownSlots, DropdownItemProps, DropdownItemSlots, DropdownItemEmits, } from './common';
+export type { DropdownProps, DropdownSlots, DropdownItemProps, DropdownItemSlots, DropdownItemEmits, DropdownCloseType, DropdownBeforeClose, } from './common';

package/components/dropdown-item/dropdown-item.vue

@@ -47,17 +47,17 @@
       <slot>
         <sar-list inlaid>
           <sar-list-item
-            v-for="(item, i) in options"
+            v-for="(option, i) in options"
             :key="i"
-            :title="item.label"
+            :title="option.label"
             hover
             :root-class="
               classNames(
                 bem.e('option'),
-                bem.em('option', 'active', item.value === innerValue),
+                bem.em('option', 'active', option.value === innerValue),
               )
             "
-            @click="onOptionClick(item)"
+            @click="onOptionClick(option)"
           >
             <template #arrow>
               <view :class="bem.e('option-icon')">
@@ -91,7 +91,10 @@ import {
   uniqid,
   getBoundingClientRect,
   getWindowInfo,
-  isNullish
+  isNullish,
+  isFunction,
+  isObject,
+  noop
 } from "../../utils";
 import SarList from "../list/list.vue";
 import SarListItem from "../list-item/list-item.vue";
@@ -126,7 +129,9 @@ export default  _defineComponent({
     modelValue: { type: null, required: false },
     visible: { type: Boolean, required: false },
     separator: { type: String, required: false },
-    placeholder: { type: String, required: false }
+    placeholder: { type: String, required: false },
+    beforeClose: { type: Function, required: false },
+    beforeOpen: { type: Function, required: false }
   }, defaultDropdownItemProps),
   emits: ["update:model-value", "change", "update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -206,34 +211,73 @@ export default  _defineComponent({
         emit("update:visible", visible);
       }
     };
+    let isClosing = false;
+    const perhapsClose = (type) => {
+      if (isClosing) {
+        return;
+      }
+      if (isFunction(props.beforeClose)) {
+        const result = props.beforeClose(type);
+        if (isObject(result) && isFunction(result.then)) {
+          isClosing = true;
+          return result.then(() => {
+            setInnerVisible(false);
+          }).catch(noop);
+        } else if (result === false) {
+          return;
+        }
+      }
+      setInnerVisible(false);
+    };
+    let isOpening = false;
+    const perhapsOpen = () => {
+      if (isOpening) {
+        return;
+      }
+      if (isFunction(props.beforeOpen)) {
+        const result = props.beforeOpen();
+        if (isObject(result) && isFunction(result.then)) {
+          isOpening = true;
+          return result.then(() => {
+            setInnerVisible(true);
+          }).catch(noop);
+        } else if (result === false) {
+          return;
+        }
+      }
+      setInnerVisible(true);
+    };
     const onItemClick = () => {
       if (!context.disabled && !props.disabled) {
-        setInnerVisible(!innerVisible.value);
+        if (innerVisible.value) {
+          perhapsClose("button");
+        } else {
+          perhapsOpen();
+        }
       }
     };
-    const onOptionClick = (item) => {
-      if (item.value !== innerValue.value) {
-        innerValue.value = item.value;
-        emit("update:model-value", item.value);
-        emit("change", item.value);
+    const onOptionClick = (option) => {
+      if (option.value !== innerValue.value) {
+        innerValue.value = option.value;
+        emit("update:model-value", option.value);
+        emit("change", option.value);
       }
-      setInnerVisible(false);
+      perhapsClose("option");
     };
     const onOverlayClick = () => {
       if (context.overlayClosable) {
-        setInnerVisible(false);
+        perhapsClose("overlay");
       }
     };
     const onAwayClick = () => {
       if (context.awayClosable) {
-        setInnerVisible(false);
+        perhapsClose("away");
       }
     };
-    const onAfterLeave = () => {
-      wholeVisible.value = false;
-    };
     const hide = () => {
-      setInnerVisible(false);
+      if (innerVisible.value) {
+        perhapsClose("other-button");
+      }
     };
     onMounted(() => {
       context.register(instance, {
@@ -250,9 +294,13 @@ export default  _defineComponent({
         onVisibleHook: (name) => {
           if (name === "before-enter") {
             increaseZIndex();
+            isOpening = false;
           }
           if (name === "after-leave") {
-            onAfterLeave();
+            wholeVisible.value = false;
+          }
+          if (name === "leave-cancelled" || name === "after-leave") {
+            isClosing = false;
           }
           emit("visible-hook", name);
           emit(name);
@@ -298,7 +346,15 @@ export default  _defineComponent({
     const dropdownItemStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, context, itemId, instance, innerValue, innerVisible, wholeVisible, popupVisible, popupInset, awayInset, setPosition, setInnerVisible, onItemClick, onOptionClick, onOverlayClick, onAwayClick, onAfterLeave, hide, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, popupClass, popupStyle, currentLabel, currentArrow, popupEffect, dropdownItemClass, dropdownItemStyle, get classNames() {
+    const __returned__ = { props, emit, bem, context, itemId, instance, innerValue, innerVisible, wholeVisible, popupVisible, popupInset, awayInset, setPosition, setInnerVisible, get isClosing() {
+      return isClosing;
+    }, set isClosing(v) {
+      isClosing = v;
+    }, perhapsClose, get isOpening() {
+      return isOpening;
+    }, set isOpening(v) {
+      isOpening = v;
+    }, perhapsOpen, onItemClick, onOptionClick, onOverlayClick, onAwayClick, hide, zIndex, increaseZIndex, realVisible, transitionClass, onTransitionEnd, popupClass, popupStyle, currentLabel, currentArrow, popupEffect, dropdownItemClass, dropdownItemStyle, get classNames() {
       return classNames;
     }, get isNullish() {
       return isNullish;

package/components/floating-bubble/floating-bubble.vue

@@ -28,7 +28,7 @@ import {
 import {
   defaultFloatingBubbleProps
 } from "./common";
-import { useMouseDown, useSetTimeout } from "../../use";
+import { useMouseDown, useTimeout } from "../../use";
 export default  _defineComponent({
   ...{
     options: {
@@ -74,9 +74,9 @@ export default  _defineComponent({
       }
     );
     const animated = ref(false);
-    const [nonAnimatedLater, cancelNonAnimated] = useSetTimeout(() => {
+    const { start: nonAnimatedLater, stop: cancelNonAnimated } = useTimeout(() => {
       animated.value = false;
-    });
+    }, 500);
     function getMinX() {
       return props.gapX;
     }
@@ -154,7 +154,7 @@ export default  _defineComponent({
         }
       }
       animated.value = true;
-      nonAnimatedLater(500);
+      nonAnimatedLater();
       bubbleRect = void 0;
     };
     const onMouseDown = useMouseDown(onTouchStart, onTouchMove, onTouchEnd);

package/components/form/form.vue

@@ -116,7 +116,10 @@ export default  _defineComponent({
       fields.push(formItemContext);
     };
     const removeField = (formItemContext) => {
-      fields.splice(fields.indexOf(formItemContext), 1);
+      const index = fields.indexOf(formItemContext);
+      if (index !== -1) {
+        fields.splice(index, 1);
+      }
     };
     const validator = markRaw(new Validator());
     const { select } = useTranslate("form.defaultValidateMessages");

package/components/form-item/index.scss

@@ -6,6 +6,16 @@
     flex-direction: row;
     padding: var(--sar-form-item-padding-y) var(--sar-form-item-padding-x);
 
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+
     &:not(:first-child) {
       &::before {
         @include border-top(var(--sar-form-item-border-color));

package/components/marquee/marquee.vue

@@ -19,7 +19,7 @@ import {
 import {
   defaultMarqueeProps
 } from "./common";
-import { useSetTimeout } from "../../use";
+import { useTimeout } from "../../use";
 export default  _defineComponent({
   ...{
     options: {
@@ -49,11 +49,14 @@ export default  _defineComponent({
       const size = props.direction === "vertical" ? height : width;
       duration.value = size / props.speed * 1e3;
     };
-    const [updateLater] = useSetTimeout(() => {
-      update();
-    });
+    const { start: updateLater } = useTimeout(
+      () => {
+        update();
+      },
+      () => props.delay
+    );
     onMounted(() => {
-      updateLater(props.delay);
+      updateLater();
     });
     __expose({
       update

package/components/notice-bar/notice-bar.vue

@@ -44,7 +44,7 @@ import SarIcon from "../icon/icon.vue";
 import {
   defaultNoticeBarProps
 } from "./common";
-import { useSetTimeout } from "../../use";
+import { useTimeout } from "../../use";
 export default  _defineComponent({
   components: {
     SarIcon,
@@ -120,12 +120,15 @@ export default  _defineComponent({
         emit("close");
       }
     };
-    const [updateLater] = useSetTimeout(() => {
-      update();
-    });
+    const { start: updateLater } = useTimeout(
+      () => {
+        update();
+      },
+      () => props.delay
+    );
     onMounted(() => {
       if (props.scrollable) {
-        updateLater(props.delay);
+        updateLater();
       }
     });
     const onClick = (event) => {

package/components/notify/notify.vue

@@ -16,7 +16,7 @@
 import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
 import { computed, ref, watch, nextTick } from "vue";
 import { classNames, stringifyStyle, createBem } from "../../utils";
-import { useSetTimeout } from "../../use";
+import { useTimeout } from "../../use";
 import {
   defaultNotifyProps
 } from "./common";
@@ -59,15 +59,18 @@ export default  _defineComponent({
       }[props.position];
     });
     const innerVisible = ref(props.visible);
-    const [hideLater, cancelHide] = useSetTimeout(() => {
-      innerVisible.value = false;
-      emit("update:visible", false);
-    });
+    const { start: hideLater, stop: cancelHide } = useTimeout(
+      () => {
+        innerVisible.value = false;
+        emit("update:visible", false);
+      },
+      () => props.timeout
+    );
     const reHideLater = () => {
       cancelHide();
       nextTick(() => {
         if (props.timeout > 0) {
-          hideLater(props.timeout);
+          hideLater();
         }
       });
     };
@@ -77,7 +80,7 @@ export default  _defineComponent({
         innerVisible.value = props.visible;
         if (props.visible) {
           if (props.timeout > 0) {
-            hideLater(props.timeout);
+            hideLater();
           }
         }
       }

package/components/picker-item/index.scss

@@ -2,7 +2,6 @@
 
 @include bem(picker) {
   @include e(item) {
-    height: var(--sar-picker-item-height);
     line-height: var(--sar-picker-item-height);
     font-size: var(--sar-picker-item-font-size);
     text-align: center;

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

@@ -79,7 +79,7 @@ import { classNames, stringifyStyle, createBem } from "../../utils";
 import {
   defaultPullDownRefreshProps
 } from "./common";
-import { useMouseDown, useSetTimeout } from "../../use";
+import { useMouseDown, useTimeout } from "../../use";
 import SarLoading from "../loading/loading.vue";
 export default  _defineComponent({
   components: {
@@ -113,12 +113,18 @@ export default  _defineComponent({
     const progress = computed(() => {
       return Math.min(translateY.value / props.threshold, 1);
     });
-    const [toInitialLater, cancelToInitial] = useSetTimeout(() => {
-      status.value = "initial";
-    });
-    const [toRecoveringLater, cancelToRecovering] = useSetTimeout(() => {
-      toRecovering();
-    });
+    const { start: toInitialLater, stop: cancelToInitial } = useTimeout(
+      () => {
+        status.value = "initial";
+      },
+      () => props.transitionDuration
+    );
+    const { start: toRecoveringLater, stop: cancelToRecovering } = useTimeout(
+      () => {
+        toRecovering();
+      },
+      () => props.doneDuration
+    );
     const toLoading = () => {
       cancelToRecovering();
       cancelToInitial();
@@ -128,11 +134,11 @@ export default  _defineComponent({
     const toRecovering = () => {
       status.value = "recovering";
       translateY.value = 0;
-      toInitialLater(props.transitionDuration);
+      toInitialLater();
     };
     const toDone = () => {
       status.value = "done";
-      toRecoveringLater(props.doneDuration);
+      toRecoveringLater();
     };
     watch(
       () => props.loading,

package/components/swipe-action/common.d.ts

@@ -0,0 +1,23 @@
+import { type StyleValue } from 'vue';
+export type SwipeActionVisible = 'left' | 'right' | false;
+export interface SwipeActionProps {
+    rootStyle?: StyleValue;
+    rootClass?: string;
+    disabled?: boolean;
+    visible?: SwipeActionVisible;
+}
+export interface SwipeActionSlots {
+    default?(props: Record<string, never>): any;
+    left?(props: {
+        hide: () => void;
+    }): any;
+    right?(props: {
+        hide: () => void;
+    }): any;
+}
+export interface SwipeActionEmits {
+    (e: 'update:visible', value: SwipeActionVisible): void;
+}
+export interface SwipeActionExpose {
+    hide: () => void;
+}

package/components/swipe-action/common.js

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

package/components/swipe-action/index.d.ts

@@ -0,0 +1 @@
+export type { SwipeActionProps, SwipeActionSlots, SwipeActionEmits, SwipeActionExpose, SwipeActionVisible, } from './common';

package/components/swipe-action/index.js

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