sard-uniapp 1.21.2 → 1.22.1

package/CHANGELOG.md

@@ -1,9 +1,34 @@
-## [1.21.2](https://github.com/sutras/sard-uniapp/compare/v1.21.1...v1.21.2) (2025-07-07)
+## [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)
+
+
+### Bug Fixes
+
+* 使popup组件在app端能传送到根节点 ([5008ce7](https://github.com/sutras/sard-uniapp/commit/5008ce7d72f2167b2c8c40b7b9cef16c4420ad69))
+
+
+### Features
+
+* *-input 类组件新增 inputProps 属性 ([837ed51](https://github.com/sutras/sard-uniapp/commit/837ed514a684c8547e0a23b410912eda6fd8435b))
+* *-input 类组件新增arrow插槽和arrow, arrow-family属性 ([6555241](https://github.com/sutras/sard-uniapp/commit/655524171dd619461f4acfccbc3b7f753fc6e1d5))
+* accordion 组件新增 hide-border 属性 ([ae3a093](https://github.com/sutras/sard-uniapp/commit/ae3a093df01ab788dee6e51cac551d7d352974dd))
+* form-item 新增 error 插槽 ([b377e8e](https://github.com/sutras/sard-uniapp/commit/b377e8e082fcab3e03006a999bed2c2015910f67))
 * input 组件新增 show-eye 属性 ([351a56e](https://github.com/sutras/sard-uniapp/commit/351a56ec77fabc44edb788b2e9e06ffdfb5a7cef))
+* picker-input 新增 arrow 属性和 arrow 插槽 ([f9fc77f](https://github.com/sutras/sard-uniapp/commit/f9fc77f31fe58f879d97d9fd8c16efced2f4626e))
+* popout-input 新增 arrow-family 属性 ([a97f280](https://github.com/sutras/sard-uniapp/commit/a97f28082ab6811dcc1731a01b13446880b3e8e1))
+* popup-input 新增 arrow 属性和 arrow 插槽 ([4756536](https://github.com/sutras/sard-uniapp/commit/475653631e0142f9d9779908b5f2919e997abb22))
+* **Popup:** 增加 close-on-click-overlay，支持点击遮罩关闭弹出层；visible 支持 v-model ([28e7d27](https://github.com/sutras/sard-uniapp/commit/28e7d2748b02679ca2a744522237fd69f6dedd38))
+* 新增 dnd 组件 ([f9629a1](https://github.com/sutras/sard-uniapp/commit/f9629a10baa9b536f5d2ad07f0ef2b8b520d350a))
+* 新增overlayClosable属性 ([d615537](https://github.com/sutras/sard-uniapp/commit/d61553721d0e3321ffc6ff8ec53e238c7b88117c))
 
 
 

package/README.md

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

package/components/accordion/README.md

@@ -38,16 +38,23 @@ import AccordionItem from 'sard-uniapp/components/accordion-item/accordion-item.
 
 @code('${DEMO_PATH}/accordion/demo/Disabled.vue')
 
+### 隐藏边框 <sup>1.22+</sup>
+
+可以使用 `hide-border` 属性隐藏边框。
+
+@code('${DEMO_PATH}/accordion/demo/HideBorder.vue')
+
 ## API
 
 ### AccordionProps
 
-| 属性        | 描述                   | 类型                                     | 默认值 |
-| ----------- | ---------------------- | ---------------------------------------- | ------ |
-| root-class  | 组件根元素类名         | string                                   | -      |
-| root-style  | 组件根元素样式         | StyleValue                               | -      |
-| model-value | 当前展开面板的 `name`  | string \| number \| (string \| number)[] | -      |
-| multiple    | 是否可同时展开多个面板 | boolean                                  | false  |
+| 属性                         | 描述                   | 类型                                     | 默认值 |
+| ---------------------------- | ---------------------- | ---------------------------------------- | ------ |
+| root-class                   | 组件根元素类名         | string                                   | -      |
+| root-style                   | 组件根元素样式         | StyleValue                               | -      |
+| model-value                  | 当前展开面板的 `name`  | string \| number \| (string \| number)[] | -      |
+| multiple                     | 是否可同时展开多个面板 | boolean                                  | false  |
+| hide-border <sup>1.22+</sup> | 是否隐藏边框           | boolean                                  | false  |
 
 ### AccordionSlots
 

package/components/accordion/accordion.vue

@@ -16,6 +16,7 @@ import {
  * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
  * @property {string | number | (string | number)[]} modelValue 当前展开面板的 `name`，默认值：-。
  * @property {boolean} multiple 是否可同时展开多个面板，默认值：false。
+ * @property {boolean} hideBorder 是否隐藏边框，默认值：false。
  * @event {(value: string | number | (string | number)[]) => void} update 切换面板时触发
  */
 export default  _defineComponent({
@@ -30,7 +31,8 @@ export default  _defineComponent({
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     modelValue: { type: [Array, String, Number], required: false },
-    multiple: { type: Boolean, required: false }
+    multiple: { type: Boolean, required: false },
+    hideBorder: { type: Boolean, required: false }
   },
   emits: ["update:model-value"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -69,11 +71,16 @@ export default  _defineComponent({
       reactive({
         value: innerValue,
         multiple: toRef(() => props.multiple),
-        toggle
+        toggle,
+        hideBorder: toRef(() => props.hideBorder)
       })
     );
     const accordionClass = computed(() => {
-      return classNames(bem.b(), props.rootClass);
+      return classNames(
+        bem.b(),
+        bem.m("borderless", props.hideBorder),
+        props.rootClass
+      );
     });
     const accordionStyle = computed(() => {
       return stringifyStyle(props.rootStyle);

package/components/accordion/common.d.ts

@@ -4,6 +4,7 @@ export interface AccordionProps {
     rootClass?: string;
     modelValue?: (string | number)[] | string | number;
     multiple?: boolean;
+    hideBorder?: boolean;
 }
 export interface AccordionEmits {
     (e: 'update:model-value', event: any): void;
@@ -15,6 +16,7 @@ export interface AccoridonContext {
     value: any;
     multiple: AccordionProps['multiple'];
     toggle: (name: string | number) => void;
+    hideBorder?: boolean;
 }
 export declare const accoridonContextSymbol: unique symbol;
 export interface AccordionItemProps {

package/components/accordion/index.scss

@@ -6,4 +6,10 @@
   &::before {
     @include border-vertical(var(--sar-accordion-border-color));
   }
+
+  @include m(borderless) {
+    &::before {
+      display: none;
+    }
+  }
 }

package/components/accordion-item/accordion-item.vue

@@ -78,7 +78,12 @@ export default  _defineComponent({
       return visible.value ? "up" : "down";
     });
     const accordionItemClass = computed(() => {
-      return classNames(bem.b(), bem.m("disabled", props.disabled), props.rootClass);
+      return classNames(
+        bem.b(),
+        bem.m("disabled", props.disabled),
+        bem.m("borderless", context.hideBorder),
+        props.rootClass
+      );
     });
     const accordionItemStyle = computed(() => {
       return stringifyStyle(props.rootStyle);

package/components/accordion-item/index.scss

@@ -68,4 +68,16 @@
       }
     }
   }
+
+  @include m(borderless) {
+    &::before {
+      display: none;
+    }
+
+    @include e(body) {
+      &::before {
+        display: none;
+      }
+    }
+  }
 }

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/README.md

@@ -59,6 +59,15 @@ import CalendarInput from 'sard-uniapp/components/calendar-input/calendar-input.
 | placeholder                       | 输入框占位符内容       | string                                                    | -               |
 | outlet-format <sup>1.10+</sup>    | 输出到输入框的日期格式 | string [详见特殊符号](../utilities/date#日期格式特殊符号) | 'YYYY-MM-DD'    |
 | value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值 | () => any                                                 | () => undefined |
+| arrow <sup>1.22+</sup>            | 自定义箭头图标名       | string                                                    | 'caret-right'   |
+| arrow-family <sup>1.22+</sup>     | 自定义箭头图标字体     | string                                                    | 'sari'          |
+| input-props <sup>1.22+</sup>      | 自定义输入框组件属性   | InputProps                                                | -               |
+
+### CalendarInputSlots
+
+| 插槽                   | 描述       | 属性       |
+| ---------------------- | ---------- | ---------- |
+| arrow <sup>1.22+</sup> | 自定义箭头 | () => void |
 
 ### CalendarInputEmits
 

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

@@ -1,13 +1,12 @@
 import { type CalendarType } from '../calendar/common';
-import { type CalendarInputProps } from './common';
-declare const _default: 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;
+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, {
+    [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;
@@ -17,4 +16,10 @@ declare const _default: import("vue").DefineComponent<CalendarInputProps, {}, {}
     weekStartsOn: number;
     maxDays: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -7,9 +7,14 @@
     :clearable="clearable"
     :root-class="rootClass"
     :root-style="rootStyle"
+    :internal-arrow="$slots.arrow ? 1 : 0"
+    :input-props="inputProps"
     @clear="onClear"
     @click="show"
   >
+    <template v-if="$slots.arrow" #arrow>
+      <slot name="arrow"></slot>
+    </template>
     <sar-calendar-popout
       v-model:visible="innerVisible"
       v-model="innerValue"
@@ -34,6 +39,8 @@
       :value-format="valueFormat"
       :validate-event="validateEvent"
       @change="onChange"
+      @visible-hook="onVisibleHook"
+      @confirm="onConfirm"
     />
   </sar-popout-input>
 </template>
@@ -80,8 +87,21 @@ import {
  * @property {string} placeholder 输入框占位符内容，默认值：-。
  * @property {string [详见特殊符号](../utilities/date#日期格式特殊符号)} outletFormat 输出到输入框的日期格式，默认值：'YYYY-MM-DD'。
  * @property {() => any} valueOnClear 设置点击清除按钮后的值，默认值：() => undefined。
+ * @property {string} arrow 自定义箭头图标名，默认值：'caret-right'。
+ * @property {string} arrowFamily 自定义箭头图标字体，默认值：'sari'。
+ * @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: {
@@ -126,14 +146,26 @@ export default  _defineComponent({
     readonly: { type: Boolean, required: false },
     disabled: { type: Boolean, required: false },
     clearable: { type: Boolean, required: false },
-    multiline: { type: Boolean, required: false }
+    multiline: { type: Boolean, required: false },
+    arrow: { type: String, required: false },
+    arrowFamily: { type: String, required: false },
+    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) {
@@ -176,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-input/common.d.ts

@@ -1,5 +1,5 @@
 import { type CalendarPopoutEmits, type CalendarPopoutProps } from '../calendar-popout/common';
-import { type PopoutInputProps } from '../popout-input/common';
+import { type PopoutInputSlots, type PopoutInputProps } from '../popout-input/common';
 export interface CalendarInputProps extends CalendarPopoutProps, Omit<PopoutInputProps, 'modelValue' | 'loading'> {
     outletFormat?: string;
     valueOnClear?: () => any;
@@ -13,5 +13,7 @@ export declare const defaultCalendarInputProps: () => {
     maxDays: number;
     weekStartsOn: number;
 };
+export interface CalendarInputSlots extends PopoutInputSlots {
+}
 export interface CalendarInputEmits extends CalendarPopoutEmits {
 }

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/README.md

@@ -41,10 +41,17 @@ import CascaderInput from 'sard-uniapp/components/cascader-input/cascader-input.
 | clearable                         | 是否显示清空按钮       | boolean    | false           |
 | placeholder                       | 输入框占位符内容       | string     | -               |
 | value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值 | () => any  | () => undefined |
+| arrow <sup>1.22+</sup>            | 自定义箭头图标名       | string     | 'caret-right'   |
+| arrow-family <sup>1.22+</sup>     | 自定义箭头图标字体     | string     | 'sari'          |
+| input-props <sup>1.22+</sup>      | 自定义输入框组件属性   | InputProps | -               |
 
 ### CascaderInputSlots
 
-继承 [`CascaderPopoutSlots`](./cascader-popout#CascaderPopoutSlots)
+继承 [`CascaderPopoutSlots`](./cascader-popout#CascaderPopoutSlots)，并有以下额外插槽：
+
+| 插槽                   | 描述       | 属性       |
+| ---------------------- | ---------- | ---------- |
+| arrow <sup>1.22+</sup> | 自定义箭头 | () => void |
 
 ### CascaderInputEmits
 

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;