sard-uniapp 1.22.0 → 1.22.2

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [1.22.2](https://github.com/sutras/sard-uniapp/compare/v1.22.1...v1.22.2) (2025-07-24)
+
+
+### Bug Fixes
+
+* 优化支付宝端拖拽体验 ([351db34](https://github.com/sutras/sard-uniapp/commit/351db340ec343c95cb37015e03375113b43a6840))
+* 修复支付宝端获取元素尺寸可能存在失败的问题 ([12c2dfb](https://github.com/sutras/sard-uniapp/commit/12c2dfb59e17a9811600b11d23c093d6c0c56bf6))
+* 隐藏 list-item 单独使用时的上下文警告 ([18fe6bb](https://github.com/sutras/sard-uniapp/commit/18fe6bb645c383282723ad29c4636ac775cbadf2))
+
+
+### Features
+
+* upload 新增默认插槽 ([73f3658](https://github.com/sutras/sard-uniapp/commit/73f3658c94cc7b04c036a577a959c1385665e6f7))
+
+
+
+## [1.22.1](https://github.com/sutras/sard-uniapp/compare/v1.22.0...v1.22.1) (2025-07-19)
+
+
+### Features
+
+* 基于 popout 组件的带有确定按钮的组件添加 confirm 事件 ([d88f36f](https://github.com/sutras/sard-uniapp/commit/d88f36fd2f23a33eb56b2c7fd1f3919558a4f857))
+* 所有基于 Popup 和 Popout 组件的组件都添加入场/退场相关事件 ([5178b00](https://github.com/sutras/sard-uniapp/commit/5178b00e0e4b092304013b5639a7f85c52ba65b3))
+
+
+
 # [1.22.0](https://github.com/sutras/sard-uniapp/compare/v1.21.1...v1.22.0) (2025-07-15)
 
 

package/README.md

@@ -34,7 +34,7 @@
 - 🌍 国际化支持
 - 🌙 支持暗黑模式
 - 🧪 单元测试覆盖率超过 80%，保障稳定性
-- ⭐️ 零外部依赖，不依赖三方 `npm` 包
+- ⭐️ 零外部依赖，不依赖三方 npm 包
 
 ## 开源协议
 

package/components/action-sheet/README.md

@@ -71,12 +71,21 @@ import ActionSheet from 'sard-uniapp/components/action-sheet/action-sheet.vue'
 
 ### ActionSheetEmits
 
-| 事件           | 描述               | 类型                                           |
-| -------------- | ------------------ | ---------------------------------------------- |
-| update:visible | 动作面板显隐时触发 | (visible: boolean) => void                     |
-| close          | 点击遮罩时触发     | () => void                                     |
-| cancel         | 点击取消按钮时触发 | () => void                                     |
-| select         | 点击动作按钮时触发 | (item: ActionSheetItem, index: number) => void |
+| 事件                               | 描述                        | 类型                                           |
+| ---------------------------------- | --------------------------- | ---------------------------------------------- |
+| update:visible                     | 动作面板显隐时触发          | (visible: boolean) => void                     |
+| close                              | 点击遮罩时触发              | () => void                                     |
+| cancel                             | 点击取消按钮时触发          | () => void                                     |
+| select                             | 点击动作按钮时触发          | (item: ActionSheetItem, index: number) => void |
+| visible-hook <sup>1.22.1+</sup>    | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void             |
+| before-enter <sup>1.22.1+</sup>    | 入场动画开始前触发          | () => void                                     |
+| enter <sup>1.22.1+</sup>           | 入场动画开始时触发          | () => void                                     |
+| after-enter <sup>1.22.1+</sup>     | 入场动画结束时触发          | () => void                                     |
+| enter-cancelled <sup>1.22.1+</sup> | 入场动画取消时触发          | () => void                                     |
+| before-leave <sup>1.22.1+</sup>    | 退场动画开始前触发          | () => void                                     |
+| leave <sup>1.22.1+</sup>           | 退场动画开始时触发          | () => void                                     |
+| after-leave <sup>1.22.1+</sup>     | 退场动画结束时触发          | () => void                                     |
+| leave-cancelled <sup>1.22.1+</sup> | 退场动画取消时触发          | () => void                                     |
 
 ## 主题定制
 

package/components/action-sheet/action-sheet.d.ts

@@ -1,14 +1,10 @@
-import { type ActionSheetItem, type ActionSheetProps } from './common';
-declare const _default: import("vue").DefineComponent<ActionSheetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    cancel: () => any;
-    close: () => any;
-    select: (item: ActionSheetItem, index: number) => any;
-    "update:visible": (visible: boolean) => any;
+import { type ActionSheetProps } from './common';
+declare const _default: import("vue").DefineComponent<ActionSheetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<ActionSheetProps> & Readonly<{
-    onCancel?: (() => any) | undefined;
-    onClose?: (() => any) | undefined;
-    onSelect?: ((item: ActionSheetItem, index: number) => any) | undefined;
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     duration: number;
     overlayClosable: boolean;

package/components/action-sheet/action-sheet.vue

@@ -4,6 +4,7 @@
     :visible="innerVisible"
     :duration="duration"
     @overlay-click="onOverlayClick"
+    @visible-hook="onVisibleHook"
   >
     <view :class="actionSheetClass" :style="actionSheetStyle">
       <view v-if="description" :class="bem.e('description')">
@@ -76,6 +77,15 @@ import {
  * @event {() => void} close 点击遮罩时触发
  * @event {() => void} cancel 点击取消按钮时触发
  * @event {(item: ActionSheetItem, index: number) => void} select 点击动作按钮时触发
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
+ * @event {() => void} before-enter 入场动画开始前触发
+ * @event {() => void} enter 入场动画开始时触发
+ * @event {() => void} after-enter 入场动画结束时触发
+ * @event {() => void} enter-cancelled 入场动画取消时触发
+ * @event {() => void} before-leave 退场动画开始前触发
+ * @event {() => void} leave 退场动画开始时触发
+ * @event {() => void} after-leave 退场动画结束时触发
+ * @event {() => void} leave-cancelled 退场动画取消时触发
  */
 export default  _defineComponent({
   components: {
@@ -100,7 +110,7 @@ export default  _defineComponent({
     beforeClose: { type: Function, required: false },
     duration: { type: Number, required: false }
   }, defaultActionSheetProps),
-  emits: ["update:visible", "close", "cancel", "select"],
+  emits: ["update:visible", "close", "cancel", "select", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
@@ -144,6 +154,10 @@ export default  _defineComponent({
       emit("cancel");
       perhapsClose("cancel");
     };
+    const onVisibleHook = (name) => {
+      emit("visible-hook", name);
+      emit(name);
+    };
     const actionSheetClass = computed(() => {
       return classNames(
         bem.b(),
@@ -154,7 +168,7 @@ export default  _defineComponent({
     const actionSheetStyle = computed(() => {
       return stringifyStyle(props.rootStyle);
     });
-    const __returned__ = { props, emit, bem, innerVisible, perhapsClose, onOverlayClick, onSelect, onCancel, actionSheetClass, actionSheetStyle, get classNames() {
+    const __returned__ = { props, emit, bem, innerVisible, perhapsClose, onOverlayClick, onSelect, onCancel, onVisibleHook, actionSheetClass, actionSheetStyle, get classNames() {
       return classNames;
     }, get stringifyStyle() {
       return stringifyStyle;

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

@@ -1,4 +1,5 @@
 import { type StyleValue } from 'vue';
+import { type TransitionHookEmits } from '../popup/common';
 export interface ActionSheetProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -14,7 +15,7 @@ export declare const defaultActionSheetProps: {
     overlayClosable: boolean;
     duration: number;
 };
-export interface ActionSheetEmits {
+export interface ActionSheetEmits extends TransitionHookEmits {
     (e: 'update:visible', visible: boolean): void;
     (e: 'close'): void;
     (e: 'cancel'): void;

package/components/calendar-input/calendar-input.d.ts

@@ -1,14 +1,12 @@
 import { type CalendarType } from '../calendar/common';
 import { type CalendarInputProps, type CalendarInputSlots } from './common';
 declare function __VLS_template(): Readonly<CalendarInputSlots> & CalendarInputSlots;
-declare const __VLS_component: import("vue").DefineComponent<CalendarInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: string | string[] | Date | Date[] | undefined) => any;
-    change: (value: string | string[] | Date | Date[] | undefined) => any;
-    "update:visible": (visible: boolean) => any;
+declare const __VLS_component: import("vue").DefineComponent<CalendarInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<CalendarInputProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: string | string[] | Date | Date[] | undefined) => any) | undefined;
-    onChange?: ((value: string | string[] | Date | Date[] | undefined) => any) | undefined;
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     type: CalendarType;
     valueOnClear: () => any;

package/components/calendar-input/calendar-input.vue

@@ -39,6 +39,8 @@
       :value-format="valueFormat"
       :validate-event="validateEvent"
       @change="onChange"
+      @visible-hook="onVisibleHook"
+      @confirm="onConfirm"
     />
   </sar-popout-input>
 </template>
@@ -90,6 +92,16 @@ import {
  * @property {InputProps} inputProps 自定义输入框组件属性，默认值：-。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: Date | Date[] | string | string[] | undefined) => void} change 日历组件值改变时触发
+ * @event {() => void} confirm 点击确定按钮时触发
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
+ * @event {() => void} before-enter 入场动画开始前触发
+ * @event {() => void} enter 入场动画开始时触发
+ * @event {() => void} after-enter 入场动画结束时触发
+ * @event {() => void} enter-cancelled 入场动画取消时触发
+ * @event {() => void} before-leave 退场动画开始前触发
+ * @event {() => void} leave 退场动画开始时触发
+ * @event {() => void} after-leave 退场动画结束时触发
+ * @event {() => void} leave-cancelled 退场动画取消时触发
  */
 export default  _defineComponent({
   components: {
@@ -140,12 +152,20 @@ export default  _defineComponent({
     internalArrow: { type: Number, required: false },
     inputProps: { type: Object, required: false }
   }, defaultCalendarInputProps()),
-  emits: ["update:visible", "update:model-value", "change"],
+  emits: ["update:visible", "update:model-value", "change", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
     const emit = __emit;
-    const { innerVisible, innerValue, inputValue, show, onChange, onClear } = usePopoutInput(props, emit);
+    const {
+      innerVisible,
+      innerValue,
+      inputValue,
+      show,
+      onChange,
+      onClear,
+      onVisibleHook
+    } = usePopoutInput(props, emit);
     const { t } = useTranslate("calendar");
     function getOutletTextMayByStr(date) {
       if (isString(date) && props.valueFormat) {
@@ -188,7 +208,10 @@ export default  _defineComponent({
         immediate: true
       }
     );
-    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, t, getOutletTextMayByStr, getOutletText, getInputValue, SarPopoutInput, SarCalendarPopout };
+    const onConfirm = () => {
+      emit("confirm");
+    };
+    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook, t, getOutletTextMayByStr, getOutletText, getInputValue, onConfirm, SarPopoutInput, SarCalendarPopout };
     return __returned__;
   }
 });

package/components/calendar-popout/README.md

@@ -93,8 +93,18 @@ import CalendarPopout from 'sard-uniapp/components/calendar-popout/calendar-popo
 
 ### CalendarPopoutEmits
 
-| 事件               | 描述                 | 类型                                                               |
-| ------------------ | -------------------- | ------------------------------------------------------------------ |
-| update:model-value | 日历组件值改变时触发 | (value: Date \| Date[] \| string \| string[] \| undefined) => void |
-| change             | 日历组件值改变时触发 | (value: Date \| Date[] \| string \| string[] \| undefined) => void |
-| update:visible     | 弹出框显隐时触发     | (visible: boolean) => void                                         |
+| 事件                               | 描述                        | 类型                                                               |
+| ---------------------------------- | --------------------------- | ------------------------------------------------------------------ |
+| update:model-value                 | 日历组件值改变时触发        | (value: Date \| Date[] \| string \| string[] \| undefined) => void |
+| change                             | 日历组件值改变时触发        | (value: Date \| Date[] \| string \| string[] \| undefined) => void |
+| update:visible                     | 弹出框显隐时触发            | (visible: boolean) => void                                         |
+| confirm <sup>1.22.1+</sup>         | 点击确定按钮时触发          | () => void                                                         |
+| visible-hook <sup>1.22.1+</sup>    | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void                                 |
+| before-enter <sup>1.22.1+</sup>    | 入场动画开始前触发          | () => void                                                         |
+| enter <sup>1.22.1+</sup>           | 入场动画开始时触发          | () => void                                                         |
+| after-enter <sup>1.22.1+</sup>     | 入场动画结束时触发          | () => void                                                         |
+| enter-cancelled <sup>1.22.1+</sup> | 入场动画取消时触发          | () => void                                                         |
+| before-leave <sup>1.22.1+</sup>    | 退场动画开始前触发          | () => void                                                         |
+| leave <sup>1.22.1+</sup>           | 退场动画开始时触发          | () => void                                                         |
+| after-leave <sup>1.22.1+</sup>     | 退场动画结束时触发          | () => void                                                         |
+| leave-cancelled <sup>1.22.1+</sup> | 退场动画取消时触发          | () => void                                                         |

package/components/calendar-popout/calendar-popout.d.ts

@@ -3,14 +3,12 @@ declare function __VLS_template(): {
     "title-prepend"?(_: {}): any;
     title?(_: {}): any;
 };
-declare const __VLS_component: import("vue").DefineComponent<CalendarPopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: string | string[] | Date | Date[] | undefined) => any;
-    change: (value: string | string[] | Date | Date[] | undefined) => any;
-    "update:visible": (visible: boolean) => any;
+declare const __VLS_component: import("vue").DefineComponent<CalendarPopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<CalendarPopoutProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: string | string[] | Date | Date[] | undefined) => any) | undefined;
-    onChange?: ((value: string | string[] | Date | Date[] | undefined) => any) | undefined;
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     type: import("../calendar/common.js").CalendarType;
     showConfirm: boolean;

package/components/calendar-popout/calendar-popout.vue

@@ -7,6 +7,7 @@
     :root-class="popoutClass"
     :root-style="popoutStyle"
     @confirm="onConfirm"
+    @visible-hook="onVisibleHook"
   >
     <template #title-prepend>
       <slot name="title-prepend"></slot>
@@ -75,6 +76,16 @@ import { useFormPopout } from "../../use";
  * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: Date | Date[] | string | string[] | undefined) => void} change 日历组件值改变时触发
+ * @event {() => void} confirm 点击确定按钮时触发
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
+ * @event {() => void} before-enter 入场动画开始前触发
+ * @event {() => void} enter 入场动画开始时触发
+ * @event {() => void} after-enter 入场动画结束时触发
+ * @event {() => void} enter-cancelled 入场动画取消时触发
+ * @event {() => void} before-leave 退场动画开始前触发
+ * @event {() => void} leave 退场动画开始时触发
+ * @event {() => void} after-leave 退场动画结束时触发
+ * @event {() => void} leave-cancelled 退场动画取消时触发
  */
 export default  _defineComponent({
   components: {
@@ -114,28 +125,24 @@ export default  _defineComponent({
     endDateText: { type: String, required: false },
     sameDateText: { type: String, required: false }
   }, defaultCalendarPopoutProps()),
-  emits: ["update:visible", "update:model-value", "change"],
+  emits: ["update:visible", "update:model-value", "change", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
     const emit = __emit;
-    const { innerVisible, popoutValue, onChange, onConfirm } = useFormPopout(
-      props,
-      emit,
-      {
-        onChange() {
-          if (!props.showConfirm && !confirmDisabled.value) {
-            onConfirm();
-            innerVisible.value = false;
-          }
+    const { innerVisible, popoutValue, onChange, onConfirm, onVisibleHook } = useFormPopout(props, emit, {
+      onChange() {
+        if (!props.showConfirm && !confirmDisabled.value) {
+          onConfirm(false);
+          innerVisible.value = false;
         }
       }
-    );
+    });
     const confirmDisabled = computed(() => {
       const value = popoutValue.value;
       return !value || Array.isArray(value) && value.length === 0;
     });
-    const __returned__ = { props, emit, innerVisible, popoutValue, onChange, onConfirm, confirmDisabled, SarPopout, SarCalendar };
+    const __returned__ = { props, emit, innerVisible, popoutValue, onChange, onConfirm, onVisibleHook, confirmDisabled, SarPopout, SarCalendar };
     return __returned__;
   }
 });

package/components/calendar-popout/common.d.ts

@@ -1,5 +1,6 @@
 import { type StyleValue } from 'vue';
 import { type CalendarProps } from '../calendar/common';
+import { type TransitionHookEmits } from '../popup/common';
 export interface CalendarPopoutProps extends CalendarProps {
     visible?: boolean;
     title?: string;
@@ -20,10 +21,11 @@ export interface CalendarPopoutSlots {
     title?(props: Record<string, never>): any;
     'title-prepend'?(props: Record<string, never>): any;
 }
-export interface CalendarPopoutEmits {
+export interface CalendarPopoutEmits extends TransitionHookEmits {
     (e: 'update:visible', visible: boolean): void;
     (e: 'update:model-value', value: Date | Date[] | string | string[] | undefined): void;
     (e: 'change', value: Date | Date[] | string | string[] | undefined): void;
+    (e: 'confirm'): void;
 }
 export interface CalendarPopoutExpose {
 }

package/components/cascader-input/cascader-input.d.ts

@@ -1,16 +1,11 @@
-import { type CascaderOption } from '../cascader/common';
 import { type CascaderInputProps, type CascaderInputSlots } from './common';
 declare function __VLS_template(): Readonly<CascaderInputSlots> & CascaderInputSlots;
-declare const __VLS_component: import("vue").DefineComponent<CascaderInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: any, selectedOptions: CascaderOption[]) => any;
-    change: (value: any, selectedOptions: CascaderOption[]) => any;
-    select: (option: CascaderOption, tabIndex: number) => any;
-    "update:visible": (visible: boolean) => any;
+declare const __VLS_component: import("vue").DefineComponent<CascaderInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<CascaderInputProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: any, selectedOptions: CascaderOption[]) => any) | undefined;
-    onChange?: ((value: any, selectedOptions: CascaderOption[]) => any) | undefined;
-    onSelect?: ((option: CascaderOption, tabIndex: number) => any) | undefined;
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     valueOnClear: () => any;
     showConfirm: boolean;

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

@@ -31,6 +31,8 @@
       :validate-event="validateEvent"
       @select="(option, tabIndex) => $emit('select', option, tabIndex)"
       @change="onChange"
+      @visible-hook="onVisibleHook"
+      @confirm="onConfirm"
     >
       <template #top="{ tabIndex }">
         <slot name="top" :tab-index="tabIndex"></slot>
@@ -80,6 +82,16 @@ import {
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: string | number, selectedOptions: CascaderOption[]) => void} change 级联输入组件值改变时触发
  * @event {(option: CascaderOption, tabIndex: number) => void} select 选择级联选择某一项时触发
+ * @event {() => void} confirm 点击确定按钮时触发
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
+ * @event {() => void} before-enter 入场动画开始前触发
+ * @event {() => void} enter 入场动画开始时触发
+ * @event {() => void} after-enter 入场动画结束时触发
+ * @event {() => void} enter-cancelled 入场动画取消时触发
+ * @event {() => void} before-leave 退场动画开始前触发
+ * @event {() => void} leave 退场动画开始时触发
+ * @event {() => void} after-leave 退场动画结束时触发
+ * @event {() => void} leave-cancelled 退场动画取消时触发
  */
 export default  _defineComponent({
   components: {
@@ -120,12 +132,20 @@ export default  _defineComponent({
     internalArrow: { type: Number, required: false },
     inputProps: { type: Object, required: false }
   }, defaultCascaderInputProps()),
-  emits: ["update:visible", "update:model-value", "change", "select"],
+  emits: ["update:visible", "update:model-value", "change", "select", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
     const emit = __emit;
-    const { innerVisible, innerValue, inputValue, show, onChange, onClear } = usePopoutInput(props, emit, {
+    const {
+      innerVisible,
+      innerValue,
+      inputValue,
+      show,
+      onChange,
+      onClear,
+      onVisibleHook
+    } = usePopoutInput(props, emit, {
       onClear(value) {
         emit("update:model-value", value, []);
         emit("change", value, []);
@@ -161,7 +181,10 @@ export default  _defineComponent({
         immediate: true
       }
     );
-    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, fieldkeys, getOutletText, getInputValue, SarPopoutInput, SarCascaderPopout };
+    const onConfirm = () => {
+      emit("confirm");
+    };
+    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook, fieldkeys, getOutletText, getInputValue, onConfirm, SarPopoutInput, SarCascaderPopout };
     return __returned__;
   }
 });

package/components/cascader-popout/README.md

@@ -45,9 +45,19 @@ import CascaderPopout from 'sard-uniapp/components/cascader-popout/cascader-popo
 
 ### CascaderPopoutEmits
 
-| 事件               | 描述                     | 类型                                                                 |
-| ------------------ | ------------------------ | -------------------------------------------------------------------- |
-| update:model-value | 级联输入组件值改变时触发 | (value: string \| number, selectedOptions: CascaderOption[]) => void |
-| change             | 级联输入组件值改变时触发 | (value: string \| number, selectedOptions: CascaderOption[]) => void |
-| select             | 选择级联选择某一项时触发 | (option: CascaderOption, tabIndex: number) => void                   |
-| update:visible     | 弹出框显隐时触发         | (visible: boolean) => void                                           |
+| 事件                               | 描述                        | 类型                                                                 |
+| ---------------------------------- | --------------------------- | -------------------------------------------------------------------- |
+| update:model-value                 | 级联输入组件值改变时触发    | (value: string \| number, selectedOptions: CascaderOption[]) => void |
+| change                             | 级联输入组件值改变时触发    | (value: string \| number, selectedOptions: CascaderOption[]) => void |
+| select                             | 选择级联选择某一项时触发    | (option: CascaderOption, tabIndex: number) => void                   |
+| update:visible                     | 弹出框显隐时触发            | (visible: boolean) => void                                           |
+| confirm <sup>1.22.1+</sup>         | 点击确定按钮时触发          | () => void                                                           |
+| visible-hook <sup>1.22.1+</sup>    | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void                                   |
+| before-enter <sup>1.22.1+</sup>    | 入场动画开始前触发          | () => void                                                           |
+| enter <sup>1.22.1+</sup>           | 入场动画开始时触发          | () => void                                                           |
+| after-enter <sup>1.22.1+</sup>     | 入场动画结束时触发          | () => void                                                           |
+| enter-cancelled <sup>1.22.1+</sup> | 入场动画取消时触发          | () => void                                                           |
+| before-leave <sup>1.22.1+</sup>    | 退场动画开始前触发          | () => void                                                           |
+| leave <sup>1.22.1+</sup>           | 退场动画开始时触发          | () => void                                                           |
+| after-leave <sup>1.22.1+</sup>     | 退场动画结束时触发          | () => void                                                           |
+| leave-cancelled <sup>1.22.1+</sup> | 退场动画取消时触发          | () => void                                                           |

package/components/cascader-popout/cascader-popout.d.ts

@@ -1,15 +1,11 @@
 import { type CascaderPopoutProps, type CascaderPopoutSlots } from './common';
 declare function __VLS_template(): Readonly<CascaderPopoutSlots> & CascaderPopoutSlots;
-declare const __VLS_component: import("vue").DefineComponent<CascaderPopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: any, selectedOptions: import("../cascader/common.js").CascaderOption[]) => any;
-    change: (value: any, selectedOptions: import("../cascader/common.js").CascaderOption[]) => any;
-    select: (option: import("../cascader/common.js").CascaderOption, tabIndex: number) => any;
-    "update:visible": (visible: boolean) => any;
+declare const __VLS_component: import("vue").DefineComponent<CascaderPopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<CascaderPopoutProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: any, selectedOptions: import("../cascader/common.js").CascaderOption[]) => any) | undefined;
-    onChange?: ((value: any, selectedOptions: import("../cascader/common.js").CascaderOption[]) => any) | undefined;
-    onSelect?: ((option: import("../cascader/common.js").CascaderOption, tabIndex: number) => any) | undefined;
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     showConfirm: boolean;
     validateEvent: boolean;

package/components/cascader-popout/cascader-popout.vue

@@ -6,6 +6,7 @@
     :root-class="popoutClass"
     :root-style="popoutStyle"
     @confirm="onConfirm"
+    @visible-hook="onVisibleHook"
   >
     <template #visible="{ already }">
       <sar-cascader
@@ -54,6 +55,16 @@ import { useFormPopout } from "../../use";
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: string | number, selectedOptions: CascaderOption[]) => void} change 级联输入组件值改变时触发
  * @event {(option: CascaderOption, tabIndex: number) => void} select 选择级联选择某一项时触发
+ * @event {() => void} confirm 点击确定按钮时触发
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
+ * @event {() => void} before-enter 入场动画开始前触发
+ * @event {() => void} enter 入场动画开始时触发
+ * @event {() => void} after-enter 入场动画结束时触发
+ * @event {() => void} enter-cancelled 入场动画取消时触发
+ * @event {() => void} before-leave 退场动画开始前触发
+ * @event {() => void} leave 退场动画开始时触发
+ * @event {() => void} after-leave 退场动画结束时触发
+ * @event {() => void} leave-cancelled 退场动画取消时触发
  */
 export default  _defineComponent({
   components: {
@@ -83,24 +94,20 @@ export default  _defineComponent({
     labelRender: { type: Function, required: false },
     changeOnSelect: { type: Boolean, required: false }
   }, defaultCascaderPopoutProps),
-  emits: ["update:visible", "update:model-value", "change", "select"],
+  emits: ["update:visible", "update:model-value", "change", "select", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
     __expose();
     const props = __props;
     const emit = __emit;
-    const { innerVisible, popoutValue, onChange, onConfirm } = useFormPopout(
-      props,
-      emit,
-      {
-        onChange() {
-          if (!props.showConfirm && !isEmptyBinding(popoutValue.value)) {
-            onConfirm();
-            innerVisible.value = false;
-          }
+    const { innerVisible, popoutValue, onChange, onConfirm, onVisibleHook } = useFormPopout(props, emit, {
+      onChange() {
+        if (!props.showConfirm && !isEmptyBinding(popoutValue.value)) {
+          onConfirm(false);
+          innerVisible.value = false;
         }
       }
-    );
-    const __returned__ = { props, emit, innerVisible, popoutValue, onChange, onConfirm, SarPopout, SarCascader };
+    });
+    const __returned__ = { props, emit, innerVisible, popoutValue, onChange, onConfirm, onVisibleHook, SarPopout, SarCascader };
     return __returned__;
   }
 });

package/components/cascader-popout/common.d.ts

@@ -1,5 +1,6 @@
 import { type StyleValue } from 'vue';
 import { type CascaderOption, type CascaderProps } from '../cascader/common';
+import { type TransitionHookEmits } from '../popup/common';
 export interface CascaderPopoutProps extends CascaderProps {
     visible?: boolean;
     title?: string;
@@ -17,11 +18,12 @@ export interface CascaderPopoutSlots {
         tabIndex: number;
     }): any;
 }
-export interface CascaderPopoutEmits {
+export interface CascaderPopoutEmits extends TransitionHookEmits {
     (e: 'update:visible', visible: boolean): void;
     (e: 'update:model-value', value: any, selectedOptions: CascaderOption[]): void;
     (e: 'change', value: any, selectedOptions: CascaderOption[]): void;
     (e: 'select', option: CascaderOption, tabIndex: number): void;
+    (e: 'confirm'): void;
 }
 export interface CascaderPopoutExpose {
 }

package/components/checkbox-input/checkbox-input.d.ts

@@ -1,13 +1,11 @@
 import { type CheckboxInputProps, type CheckboxInputSlots } from './common';
 declare function __VLS_template(): Readonly<CheckboxInputSlots> & CheckboxInputSlots;
-declare const __VLS_component: import("vue").DefineComponent<CheckboxInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:model-value": (value: any) => any;
-    change: (value: any) => any;
-    "update:visible": (visible: boolean) => any;
+declare const __VLS_component: import("vue").DefineComponent<CheckboxInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<CheckboxInputProps> & Readonly<{
-    "onUpdate:model-value"?: ((value: any) => any) | undefined;
-    onChange?: ((value: any) => any) | undefined;
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     options: import("../checkbox/common").CheckboxGroupOption[];
     valueOnClear: () => any;