sard-uniapp 1.22.0 → 1.22.2

package/components/checkbox-input/checkbox-input.vue

@@ -33,6 +33,8 @@
       :searchable="searchable"
       :filter-placeholder="filterPlaceholder"
       @change="onChange"
+      @visible-hook="onVisibleHook"
+      @confirm="onConfirm"
     />
   </sar-popout-input>
 </template>
@@ -77,6 +79,16 @@ import { usePopoutInput } from "../../use";
  * @property {InputProps} inputProps 自定义输入框组件属性，默认值：-。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: any[] | 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: {
@@ -120,12 +132,20 @@ export default  _defineComponent({
     internalArrow: { type: Number, required: false },
     inputProps: { type: Object, required: false }
   }, defaultCheckboxInputProps()),
-  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 fieldKeys = computed(() => {
       return Object.assign({}, defaultOptionKeys, props.optionKeys);
     });
@@ -149,7 +169,10 @@ export default  _defineComponent({
         immediate: true
       }
     );
-    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, fieldKeys, getOutletText, getInputValue, SarPopoutInput, SarCheckboxPopout };
+    const onConfirm = () => {
+      emit("confirm");
+    };
+    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook, fieldKeys, getOutletText, getInputValue, onConfirm, SarPopoutInput, SarCheckboxPopout };
     return __returned__;
   }
 });

package/components/checkbox-popout/README.md

@@ -60,11 +60,21 @@ import CheckboxPopout from 'sard-uniapp/components/checkbox-popout/checkbox-popo
 
 ### CheckboxPopoutEmits
 
-| 事件                     | 描述                     | 类型                                |
-| ------------------------ | ------------------------ | ----------------------------------- |
-| update:model-value       | 复选输入组件值改变时触发 | (value: any[] \| undefined) => void |
-| change <sup>1.9.2+</sup> | 复选输入组件值改变时触发 | (value: any[] \| undefined) => void |
-| update:visible           | 弹出框显隐时触发         | (visible: boolean) => void          |
+| 事件                               | 描述                        | 类型                                |
+| ---------------------------------- | --------------------------- | ----------------------------------- |
+| update:model-value                 | 复选输入组件值改变时触发    | (value: any[] \| undefined) => void |
+| change <sup>1.9.2+</sup>           | 复选输入组件值改变时触发    | (value: any[] \| 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/checkbox-popout/checkbox-popout.d.ts

@@ -1,13 +1,11 @@
 import { type CheckboxPopoutProps, type CheckboxPopoutSlots } from './common';
 declare function __VLS_template(): Readonly<CheckboxPopoutSlots> & CheckboxPopoutSlots;
-declare const __VLS_component: import("vue").DefineComponent<CheckboxPopoutProps, {}, {}, {}, {}, 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<CheckboxPopoutProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<CheckboxPopoutProps> & 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[];
     validateEvent: boolean;

package/components/checkbox-popout/checkbox-popout.vue

@@ -5,6 +5,7 @@
     :root-class="popoutClass"
     :root-style="popoutStyle"
     @confirm="onConfirm"
+    @visible-hook="onVisibleHook"
   >
     <template v-if="showCheckAll" #title-prepend>
       <view :class="bem.e('check-all')">
@@ -116,6 +117,16 @@ import { defaultOptionKeys } from "../checkbox/common";
  * @property {string} filterPlaceholder 搜索输入框占位符内容，默认值：-。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: any[] | 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: {
@@ -155,16 +166,13 @@ export default  _defineComponent({
     options: { type: Array, required: false },
     optionKeys: { type: Object, required: false }
   }, defaultCheckboxPopoutProps()),
-  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 bem = createBem("checkbox-popout");
-    const { innerVisible, popoutValue, onChange, onConfirm } = useFormPopout(
-      props,
-      emit
-    );
+    const { innerVisible, popoutValue, onChange, onConfirm, onVisibleHook } = useFormPopout(props, emit);
     const fieldKeys = computed(() => {
       return Object.assign({}, defaultOptionKeys, props.optionKeys);
     });
@@ -210,7 +218,7 @@ export default  _defineComponent({
         bem.em("scroll", "searchable", props.searchable)
       );
     });
-    const __returned__ = { props, emit, bem, innerVisible, popoutValue, onChange, onConfirm, fieldKeys, objectOptions, select, allChecked, isIndeterminate, onAllChange, searchValue, filteredOptions, count, scrollSide, onScroll, onScrolltoupper, onScrolltolower, containerClass, scrollClass, SarPopout, SarCheckboxGroup, SarCheckbox, SarList, SarListItem, SarInput, SarIcon };
+    const __returned__ = { props, emit, bem, innerVisible, popoutValue, onChange, onConfirm, onVisibleHook, fieldKeys, objectOptions, select, allChecked, isIndeterminate, onAllChange, searchValue, filteredOptions, count, scrollSide, onScroll, onScrolltoupper, onScrolltolower, containerClass, scrollClass, SarPopout, SarCheckboxGroup, SarCheckbox, SarList, SarListItem, SarInput, SarIcon };
     return __returned__;
   }
 });

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

@@ -1,5 +1,6 @@
 import { type StyleValue } from 'vue';
 import { type CheckboxGroupProps } from '../checkbox/common';
+import { type TransitionHookEmits } from '../popup/common';
 export interface CheckboxPopoutProps extends CheckboxGroupProps {
     visible?: boolean;
     title?: string;
@@ -16,10 +17,11 @@ export declare const defaultCheckboxPopoutProps: () => {
 export interface CheckboxPopoutSlots {
     default?(props: Record<string, never>): any;
 }
-export interface CheckboxPopoutEmits {
+export interface CheckboxPopoutEmits extends TransitionHookEmits {
     (e: 'update:visible', visible: boolean): void;
     (e: 'update:model-value', value: any): void;
     (e: 'change', value: any): void;
+    (e: 'confirm'): void;
 }
 export interface CheckboxPopoutExpose {
 }

package/components/crop-image/README.md

@@ -67,9 +67,18 @@ import { cropImage } from 'sard-uniapp'
 
 ### CropImageEmits
 
-| 事件           | 描述             | 类型                       |
-| -------------- | ---------------- | -------------------------- |
-| update:visible | 弹出框显隐时触发 | (visible: boolean) => void |
+| 事件                               | 描述                        | 类型                               |
+| ---------------------------------- | --------------------------- | ---------------------------------- |
+| update:visible                     | 弹出框显隐时触发            | (visible: boolean) => 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                         |
 
 ### CropImageAgentProps / CropImageOptions
 

package/components/crop-image/common.d.ts

@@ -1,4 +1,5 @@
 import { type StyleValue } from 'vue';
+import { type TransitionHookEmits } from '../popup/common';
 export interface CropImageProps {
     rootStyle?: StyleValue;
     rootClass?: string;
@@ -25,7 +26,7 @@ export declare const defaultCropImageProps: {
 export interface CropImageSlots {
     default?(props: Record<string, never>): any;
 }
-export interface CropImageEmits {
+export interface CropImageEmits extends TransitionHookEmits {
     (e: 'update:visible', visible: boolean): void;
 }
 export interface CropImageExpose {

package/components/crop-image/crop-image.d.ts

@@ -1,9 +1,11 @@
 import { type CropImageProps, type CropImageSlots } from './common';
 declare function __VLS_template(): Readonly<CropImageSlots> & CropImageSlots;
-declare const __VLS_component: import("vue").DefineComponent<CropImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "update:visible": (visible: boolean) => any;
+declare const __VLS_component: import("vue").DefineComponent<CropImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
 }, string, import("vue").PublicProps, Readonly<CropImageProps> & Readonly<{
-    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
 }>, {
     type: "png" | "jpg";
     duration: number;

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

@@ -5,6 +5,7 @@
     :duration="duration"
     :overlay="false"
     @after-enter="onAfterEnter"
+    @visible-hook="onVisibleHook"
   >
     <view :class="cropImageClass" :style="cropImageStyle">
       <view
@@ -132,6 +133,15 @@ const maxScale = 5;
  * @property {() => void} complete 裁剪成功或失败回调，默认值：-。
  * @property {(width: number, height: number) => number} beforeCrop 裁剪前回调，可以修改裁剪的尺寸；接收宽高，返回缩放比例，默认值：-。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
+ * @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: {
@@ -164,7 +174,7 @@ export default  _defineComponent({
     cancelText: { type: String, required: false },
     confirmText: { type: String, required: false }
   }, defaultCropImageProps),
-  emits: ["update:visible"],
+  emits: ["update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -181,6 +191,10 @@ export default  _defineComponent({
       innerVisible.value = false;
       emit("update:visible", false);
     };
+    const onVisibleHook = (name) => {
+      emit("visible-hook", name);
+      emit(name);
+    };
     const { windowWidth, windowHeight, pixelRatio } = getWindowInfo();
     const aspectRatio = computed(() => {
       const [w, h] = props.cropScale.split(":").map(Number);
@@ -662,7 +676,7 @@ export default  _defineComponent({
       return stringifyStyle(props.rootStyle);
     });
     __expose({});
-    const __returned__ = { props, emit, bem, t, innerVisible, close, windowWidth, windowHeight, pixelRatio, aspectRatio, minGapY, minGapX, focusRect, rotate, actualRotate, onRotateEnd, isRotating, isStillRotating, stopRotateLater, cancelStopRotate, maskStyle, focusStyle, imageOrigSize, imageCoverSize, reversedCoverSize, imgLeft, imgTop, imgWidth, imgHeight, isCaptured, inInertia, puppetStyle, imageStyle, onImageTouchStart, bounceCoeff, maxScale, get stopInertialAnimate() {
+    const __returned__ = { props, emit, bem, t, innerVisible, close, onVisibleHook, windowWidth, windowHeight, pixelRatio, aspectRatio, minGapY, minGapX, focusRect, rotate, actualRotate, onRotateEnd, isRotating, isStillRotating, stopRotateLater, cancelStopRotate, maskStyle, focusStyle, imageOrigSize, imageCoverSize, reversedCoverSize, imgLeft, imgTop, imgWidth, imgHeight, isCaptured, inInertia, puppetStyle, imageStyle, onImageTouchStart, bounceCoeff, maxScale, get stopInertialAnimate() {
       return stopInertialAnimate;
     }, set stopInertialAnimate(v) {
       stopInertialAnimate = v;

package/components/datetime-picker-input/datetime-picker-input.d.ts

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

package/components/datetime-picker-input/datetime-picker-input.vue

@@ -31,6 +31,8 @@
       :validate-event="validateEvent"
       :calendar="calendar"
       @change="onChange"
+      @visible-hook="onVisibleHook"
+      @confirm="onConfirm"
     />
   </sar-popout-input>
 </template>
@@ -73,6 +75,16 @@ import {
  * @property {InputProps} inputProps 自定义输入框组件属性，默认值：-。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: Date |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,12 +126,20 @@ export default  _defineComponent({
     internalArrow: { type: Number, required: false },
     inputProps: { type: Object, required: false }
   }, defaultDatetimePickerInputProps()),
-  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);
     function getOutletText(value) {
       if (isString(value) && props.valueFormat) {
         value = parseDate(value, props.valueFormat);
@@ -147,7 +167,10 @@ export default  _defineComponent({
         immediate: true
       }
     );
-    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, getOutletText, getInputValue, SarPopoutInput, SarDatetimePickerPopout };
+    const onConfirm = () => {
+      emit("confirm");
+    };
+    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook, getOutletText, getInputValue, onConfirm, SarPopoutInput, SarDatetimePickerPopout };
     return __returned__;
   }
 });

package/components/datetime-picker-popout/README.md

@@ -70,8 +70,18 @@ import DatetimePickerPopout from 'sard-uniapp/components/datetime-picker-popout/
 
 ### DatetimePickerPopoutEmits
 
-| 事件               | 描述                         | 类型                                         |
-| ------------------ | ---------------------------- | -------------------------------------------- |
-| update:model-value | 日期时间输入组件值改变时触发 | (value: Date \| string \| undefined) => void |
-| change             | 日期时间输入组件值改变时触发 | (value: Date \|string \| undefined) => void  |
-| update:visible     | 弹出框显隐时触发             | (visible: boolean) => void                   |
+| 事件                               | 描述                         | 类型                                         |
+| ---------------------------------- | ---------------------------- | -------------------------------------------- |
+| update:model-value                 | 日期时间输入组件值改变时触发 | (value: Date \| string \| undefined) => void |
+| change                             | 日期时间输入组件值改变时触发 | (value: Date \|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/datetime-picker-popout/common.d.ts

@@ -1,5 +1,6 @@
 import { type StyleValue } from 'vue';
 import { type DatetimePickerProps, type DatetimePickerSlots } from '../datetime-picker/common';
+import { type TransitionHookEmits } from '../popup/common';
 export interface DatetimePickerPopoutProps extends DatetimePickerProps {
     visible?: boolean;
     title?: string;
@@ -14,10 +15,11 @@ export declare const defaultDatetimePickerPopoutProps: () => {
 };
 export interface DatetimePickerPopoutSlots extends DatetimePickerSlots {
 }
-export interface DatetimePickerPopoutEmits {
+export interface DatetimePickerPopoutEmits extends TransitionHookEmits {
     (e: 'update:visible', visible: boolean): void;
     (e: 'update:model-value', date: Date | string | undefined): void;
     (e: 'change', date: Date | string | undefined): void;
+    (e: 'confirm'): void;
 }
 export interface DatetimePickerPopoutExpose {
 }

package/components/datetime-picker-popout/datetime-picker-popout.d.ts

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

package/components/datetime-picker-popout/datetime-picker-popout.vue

@@ -7,6 +7,7 @@
     :root-style="popoutStyle"
     @confirm="onConfirm"
     @enter="onEnter"
+    @visible-hook="onVisibleHook"
   >
     <template #visible="{ already }">
       <sar-datetime-picker
@@ -58,6 +59,16 @@ import { useFormPopout } from "../../use";
  * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: Date |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: {
@@ -88,7 +99,7 @@ export default  _defineComponent({
     formatter: { type: Function, required: false },
     valueFormat: { type: String, required: false }
   }, defaultDatetimePickerPopoutProps()),
-  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;
@@ -100,7 +111,14 @@ export default  _defineComponent({
       const maxDate2 = toDate(props.max || getMaxDate());
       return maxDate2 < minDate.value ? new Date(minDate.value) : maxDate2;
     });
-    const { innerVisible, innerValue, popoutValue, onChange, onConfirm } = useFormPopout(props, emit, {
+    const {
+      innerVisible,
+      innerValue,
+      popoutValue,
+      onChange,
+      onConfirm,
+      onVisibleHook
+    } = useFormPopout(props, emit, {
       onConfirmBefore() {
         if (!popoutValue.value) {
           const initialValue = getInitialValue(minDate.value, maxDate.value);
@@ -127,7 +145,7 @@ export default  _defineComponent({
         }
       }
     });
-    const __returned__ = { props, emit, minDate, maxDate, innerVisible, innerValue, popoutValue, onChange, onConfirm, onEnter, normalizeValue, SarPopout, SarDatetimePicker };
+    const __returned__ = { props, emit, minDate, maxDate, innerVisible, innerValue, popoutValue, onChange, onConfirm, onVisibleHook, onEnter, normalizeValue, SarPopout, SarDatetimePicker };
     return __returned__;
   }
 });

package/components/datetime-range-picker-input/datetime-range-picker-input.d.ts

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

package/components/datetime-range-picker-input/datetime-range-picker-input.vue

@@ -31,6 +31,8 @@
       :tabs="tabs"
       :validate-event="validateEvent"
       @change="onChange"
+      @visible-hook="onVisibleHook"
+      @confirm="onConfirm"
     />
   </sar-popout-input>
 </template>
@@ -75,6 +77,16 @@ import { useTranslate } from "../locale";
  * @property {InputProps} inputProps 自定义输入框组件属性，默认值：-。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(date: (Date | string)[]) => 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: {
@@ -117,12 +129,20 @@ export default  _defineComponent({
     internalArrow: { type: Number, required: false },
     inputProps: { type: Object, required: false }
   }, defaultDatetimeRangePickerInputProps()),
-  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("datetimeRangePickerInput");
     function getOutletTextMayByStr(date) {
       if (isString(date) && props.valueFormat) {
@@ -157,7 +177,10 @@ export default  _defineComponent({
         immediate: true
       }
     );
-    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, t, getOutletTextMayByStr, getOutletText, getInputValue, SarPopoutInput, SarDatetimeRangePickerPopout };
+    const onConfirm = () => {
+      emit("confirm");
+    };
+    const __returned__ = { props, emit, innerVisible, innerValue, inputValue, show, onChange, onClear, onVisibleHook, t, getOutletTextMayByStr, getOutletText, getInputValue, onConfirm, SarPopoutInput, SarDatetimeRangePickerPopout };
     return __returned__;
   }
 });

package/components/datetime-range-picker-popout/README.md

@@ -40,8 +40,18 @@ import DatetimeRangePickerPopout from 'sard-uniapp/components/datetime-range-pic
 
 ### DatetimeRangePickerPopoutEmits
 
-| 事件               | 描述                         | 类型                               |
-| ------------------ | ---------------------------- | ---------------------------------- |
-| update:model-value | 日期时间输入组件值改变时触发 | (date: (Date \| string)[]) => void |
-| change             | 日期时间输入组件值改变时触发 | (date: (Date \| string)[]) => void |
-| update:visible     | 弹出框显隐时触发             | (visible: boolean) => void         |
+| 事件                               | 描述                         | 类型                               |
+| ---------------------------------- | ---------------------------- | ---------------------------------- |
+| update:model-value                 | 日期时间输入组件值改变时触发 | (date: (Date \| string)[]) => void |
+| change                             | 日期时间输入组件值改变时触发 | (date: (Date \| string)[]) => 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/datetime-range-picker-popout/common.d.ts

@@ -1,5 +1,6 @@
 import { type StyleValue } from 'vue';
 import { type DatetimeRangePickerProps, type DatetimeRangePickerSlots } from '../datetime-range-picker/common';
+import { type TransitionHookEmits } from '../popup/common';
 export interface DatetimeRangePickerPopoutProps extends DatetimeRangePickerProps {
     visible?: boolean;
     title?: string;
@@ -13,10 +14,11 @@ export declare const defaultDatetimeRangePickerInputProps: () => {
 };
 export interface DatetimeRangePickerPopoutSlots extends DatetimeRangePickerSlots {
 }
-export interface DatetimeRangePickerPopoutEmits {
+export interface DatetimeRangePickerPopoutEmits extends TransitionHookEmits {
     (e: 'update:visible', visible: boolean): void;
     (e: 'update:model-value', date: (Date | string)[] | undefined): void;
     (e: 'change', date: (Date | string)[] | undefined): void;
+    (e: 'confirm'): void;
 }
 export interface DatetimeRangePickerPopoutExpose {
 }