sard-uniapp 1.19.5 → 1.20.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [1.20.0](https://github.com/sutras/sard-uniapp/compare/v1.19.5...v1.20.0) (2025-07-01)
+
+
+### Features
+
+* card 组件新增边框相关css变量 ([b838d88](https://github.com/sutras/sard-uniapp/commit/b838d88930f8200a5ed832e888a11cc8f5942233))
+* checkbox-popout 新增搜索和全选功能 ([9457fdd](https://github.com/sutras/sard-uniapp/commit/9457fdd7476f5a6f82a43239c55f8d968ebfd4c9))
+* radio-popout 组件新增搜索功能 ([fade336](https://github.com/sutras/sard-uniapp/commit/fade336615fe9402dd4ff81bff8900ef915cb314))
+* upload h5 显示真实文件名 ([635805f](https://github.com/sutras/sard-uniapp/commit/635805fec8df90411f190c6a1345f59c47af16e9))
+* upload 组件新增 item-click 事件 ([cc01b3f](https://github.com/sutras/sard-uniapp/commit/cc01b3f9283dadae8def7b14d0d65cad40ebc3c9))
+* 修复slider在支付宝端点击问题 ([76e9fd4](https://github.com/sutras/sard-uniapp/commit/76e9fd4fe75515b2ec3cf4ceed08fec87ff1388b))
+* 扩大 DatetimeRangePickerPopout 绑定值的适应性范围,允许绑定空数组 ([087aa7f](https://github.com/sutras/sard-uniapp/commit/087aa7f3fe2a07cba8333a96ef5842426f26e81b))
+* 新增 case 相关工具函数 ([1c3acaa](https://github.com/sutras/sard-uniapp/commit/1c3acaac5a0a95eb57dd7632055843cd9fe6401c))
+* 新增 read-more 组件 ([12637b8](https://github.com/sutras/sard-uniapp/commit/12637b897649fb641eff6672df7c79db9128ab69))
+* 新增 ResizeSensor 组件 ([7f8697e](https://github.com/sutras/sard-uniapp/commit/7f8697ee1f26dcd5cc55ed3e83c1c40664febc64))
+* 新增 ScrollList 组件 ([dacce49](https://github.com/sutras/sard-uniapp/commit/dacce49043332f3a6c143228c23bb92f2285211a))
+* 新增 sticky 和 sticky-box 组件 ([e99ef87](https://github.com/sutras/sard-uniapp/commit/e99ef87c4918b1f84142755c19c7e306abaccfb6))
+* 新增工程化相关工具 ([09fc190](https://github.com/sutras/sard-uniapp/commit/09fc190a66da6a83cf1b3dd2919ca6132ba6e354))
+* 新增日期相关工具 ([51807f4](https://github.com/sutras/sard-uniapp/commit/51807f4a190b5ee3525146c5d7384cc178109796))
+
+
+
 ## [1.19.5](https://github.com/sutras/sard-uniapp/compare/v1.19.4...v1.19.5) (2025-06-22)
 
 

package/README.md

@@ -25,7 +25,7 @@
 
 ## 特性
 
-- 🧩 90+个高质量组件，覆盖移动端主流场景
+- 🧩 95+个高质量组件，覆盖移动端主流场景
 - 💪 支持一套代码同时开发 H5 / 小程序 / App
 - 🌿 支持按需引入和 `Tree Shaking`
 - 📖 详尽的文档和案例展示

package/components/calendar/README.md

@@ -31,26 +31,26 @@ import Calendar from 'sard-uniapp/components/calendar/calendar.vue'
 
 ### CalendarProps
 
-| 属性                               | 描述                                                                 | 类型                                                  | 默认值                                          |
-| ---------------------------------- | -------------------------------------------------------------------- | ----------------------------------------------------- | ----------------------------------------------- |
-| root-class                         | 组件根元素类名                                                       | string                                                | -                                               |
-| root-style                         | 组件根元素样式                                                       | StyleValue                                            | -                                               |
-| type                               | 日历类型                                                             | CalendarType                                          | 'single'                                        |
-| model-value                        | 选中的日期，单选时为当个日期，多选时为日期数组，范围时为两个日期数组 | Date \| Date[] \| string \| string[]                  | -                                               |
-| min                                | 可选择的最小日期                                                     | Date                                                  | 前十年，或者当前月（设置了 `several-months`）   |
-| max                                | 可选择的最大日期                                                     | Date                                                  | 后十年，或者三个月后（设置了 `several-months`） |
-| current-date                       | 当前展示月份的日期                                                   | Date                                                  | -                                               |
-| disabled-date                      | 指定禁选日期，返回 `true` 表示禁选                                   | (date: Date) => boolean                               | -                                               |
-| max-days                           | 最多可选天数，用于多选和范围                                         | number                                                | Number.MAX_SAFE_INTEGER                         |
-| over-max-days                      | 超出最多可选天数时触发                                               | () => void                                            | -                                               |
-| week-starts-on                     | 指定一周以周几开始，`0` 表示周日，`1-6` 分别表示周一至周六           | number                                                | 0                                               |
-| formatter                          | 通过修改 `CalendarDay` 对象属性值，来自定义日期的文案和样式          | (day: CalendarDay) => void                            | -                                               |
-| allow-same-day                     | 范围选择中，是否允许起始和结束为同一天                               | boolean                                               | false                                           |
-| several-months                     | 是否显示多个月                                                       | boolean                                               | false                                           |
-| value-format <sup>1.10+</sup>      | 绑定值的格式，不指定则绑定值为 Date 对象                             | string [详见特殊符号](../guide/date#日期格式特殊符号) | -                                               |
-| start-date-text <sup>1.19.4+</sup> | 开始日期文字                                                         | string                                                | '开始'                                          |
-| end-date-text <sup>1.19.4+</sup>   | 结束日期文字                                                         | string                                                | '结束'                                          |
-| same-date-text <sup>1.19.4+</sup>  | 选择同一天日期文字                                                   | string                                                | '开始/结束'                                     |
+| 属性                               | 描述                                                                 | 类型                                                      | 默认值                                          |
+| ---------------------------------- | -------------------------------------------------------------------- | --------------------------------------------------------- | ----------------------------------------------- |
+| root-class                         | 组件根元素类名                                                       | string                                                    | -                                               |
+| root-style                         | 组件根元素样式                                                       | StyleValue                                                | -                                               |
+| type                               | 日历类型                                                             | CalendarType                                              | 'single'                                        |
+| model-value                        | 选中的日期，单选时为当个日期，多选时为日期数组，范围时为两个日期数组 | Date \| Date[] \| string \| string[]                      | -                                               |
+| min                                | 可选择的最小日期                                                     | Date                                                      | 前十年，或者当前月（设置了 `several-months`）   |
+| max                                | 可选择的最大日期                                                     | Date                                                      | 后十年，或者三个月后（设置了 `several-months`） |
+| current-date                       | 当前展示月份的日期                                                   | Date                                                      | -                                               |
+| disabled-date                      | 指定禁选日期，返回 `true` 表示禁选                                   | (date: Date) => boolean                                   | -                                               |
+| max-days                           | 最多可选天数，用于多选和范围                                         | number                                                    | Number.MAX_SAFE_INTEGER                         |
+| over-max-days                      | 超出最多可选天数时触发                                               | () => void                                                | -                                               |
+| week-starts-on                     | 指定一周以周几开始，`0` 表示周日，`1-6` 分别表示周一至周六           | number                                                    | 0                                               |
+| formatter                          | 通过修改 `CalendarDay` 对象属性值，来自定义日期的文案和样式          | (day: CalendarDay) => void                                | -                                               |
+| allow-same-day                     | 范围选择中，是否允许起始和结束为同一天                               | boolean                                                   | false                                           |
+| several-months                     | 是否显示多个月                                                       | boolean                                                   | false                                           |
+| value-format <sup>1.10+</sup>      | 绑定值的格式，不指定则绑定值为 Date 对象                             | string [详见特殊符号](../utilities/date#日期格式特殊符号) | -                                               |
+| start-date-text <sup>1.19.4+</sup> | 开始日期文字                                                         | string                                                    | '开始'                                          |
+| end-date-text <sup>1.19.4+</sup>   | 结束日期文字                                                         | string                                                    | '结束'                                          |
+| same-date-text <sup>1.19.4+</sup>  | 选择同一天日期文字                                                   | string                                                    | '开始/结束'                                     |
 
 ### CalendarEmits
 

package/components/calendar/calendar.vue

@@ -146,7 +146,7 @@ import SarDatetimePicker from "../datetime-picker/datetime-picker.vue";
  * @property {(day: CalendarDay) => void} formatter 通过修改 `CalendarDay` 对象属性值，来自定义日期的文案和样式，默认值：-。
  * @property {boolean} allowSameDay 范围选择中，是否允许起始和结束为同一天，默认值：false。
  * @property {boolean} severalMonths 是否显示多个月，默认值：false。
- * @property {string [详见特殊符号](../guide/date#日期格式特殊符号)} valueFormat 绑定值的格式，不指定则绑定值为 Date 对象，默认值：-。
+ * @property {string [详见特殊符号](../utilities/date#日期格式特殊符号)} valueFormat 绑定值的格式，不指定则绑定值为 Date 对象，默认值：-。
  * @property {string} startDateText 开始日期文字，默认值：'开始'。
  * @property {string} endDateText 结束日期文字，默认值：'结束'。
  * @property {string} sameDateText 选择同一天日期文字，默认值：'开始/结束'。

package/components/calendar-input/README.md

@@ -49,16 +49,16 @@ import CalendarInput from 'sard-uniapp/components/calendar-input/calendar-input.
 
 继承 [`CalendarPopoutProps`](./calendar-popout#CalendarPopoutProps) 并有以下额外属性：
 
-| 属性                              | 描述                   | 类型                                                  | 默认值          |
-| --------------------------------- | ---------------------- | ----------------------------------------------------- | --------------- |
-| root-class                        | 弹出式输入框根元素类名 | string                                                | -               |
-| root-style                        | 弹出式输入框根元素样式 | StyleValue                                            | -               |
-| disabled                          | 禁用状态               | boolean                                               | false           |
-| readonly                          | 只读状态               | boolean                                               | false           |
-| clearable                         | 是否显示清空按钮       | boolean                                               | false           |
-| placeholder                       | 输入框占位符内容       | string                                                | -               |
-| outlet-format <sup>1.10+</sup>    | 输出到输入框的日期格式 | string [详见特殊符号](../guide/date#日期格式特殊符号) | 'YYYY-MM-DD'    |
-| value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值 | () => any                                             | () => undefined |
+| 属性                              | 描述                   | 类型                                                      | 默认值          |
+| --------------------------------- | ---------------------- | --------------------------------------------------------- | --------------- |
+| root-class                        | 弹出式输入框根元素类名 | string                                                    | -               |
+| root-style                        | 弹出式输入框根元素样式 | StyleValue                                                | -               |
+| disabled                          | 禁用状态               | boolean                                                   | false           |
+| readonly                          | 只读状态               | boolean                                                   | false           |
+| clearable                         | 是否显示清空按钮       | boolean                                                   | false           |
+| placeholder                       | 输入框占位符内容       | string                                                    | -               |
+| outlet-format <sup>1.10+</sup>    | 输出到输入框的日期格式 | string [详见特殊符号](../utilities/date#日期格式特殊符号) | 'YYYY-MM-DD'    |
+| value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值 | () => any                                                 | () => undefined |
 
 ### CalendarInputEmits
 

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

@@ -64,7 +64,7 @@ import {
  * @property {(day: CalendarDay) => void} formatter 通过修改 `CalendarDay` 对象属性值，来自定义日期的文案和样式，默认值：-。
  * @property {boolean} allowSameDay 范围选择中，是否允许起始和结束为同一天，默认值：false。
  * @property {boolean} severalMonths 是否显示多个月，默认值：false。
- * @property {string [详见特殊符号](../guide/date#日期格式特殊符号)} valueFormat 绑定值的格式，不指定则绑定值为 Date 对象，默认值：-。
+ * @property {string [详见特殊符号](../utilities/date#日期格式特殊符号)} valueFormat 绑定值的格式，不指定则绑定值为 Date 对象，默认值：-。
  * @property {string} startDateText 开始日期文字，默认值：'开始'。
  * @property {string} endDateText 结束日期文字，默认值：'结束'。
  * @property {string} sameDateText 选择同一天日期文字，默认值：'开始/结束'。
@@ -78,7 +78,7 @@ import {
  * @property {boolean} readonly 只读状态，默认值：false。
  * @property {boolean} clearable 是否显示清空按钮，默认值：false。
  * @property {string} placeholder 输入框占位符内容，默认值：-。
- * @property {string [详见特殊符号](../guide/date#日期格式特殊符号)} outletFormat 输出到输入框的日期格式，默认值：'YYYY-MM-DD'。
+ * @property {string [详见特殊符号](../utilities/date#日期格式特殊符号)} outletFormat 输出到输入框的日期格式，默认值：'YYYY-MM-DD'。
  * @property {() => any} valueOnClear 设置点击清除按钮后的值，默认值：() => undefined。
  * @event {(visible: boolean) => void} update 弹出框显隐时触发
  * @event {(value: Date | Date[] | string | string[] | undefined) => void} change 日历组件值改变时触发

package/components/calendar-month/calendar-month.vue

@@ -34,11 +34,10 @@
 import { defineComponent as _defineComponent } from "vue";
 import { computed } from "vue";
 import {
-  getMonthDays,
-  getOffsetDaysFromMonthStart,
-  getWeekOfMonthStart,
-  getPadStartDays,
-  getPadEndDays,
+  getDaysInMonth,
+  getDaysBeforeFirstDay,
+  getPrevMonthTailDays,
+  getNextMonthHeadDays,
   toDateNumber,
   stringifyStyle,
   classNames
@@ -75,33 +74,30 @@ export default  _defineComponent({
     const props = __props;
     const emit = __emit;
     const days = computed(() => {
-      return getMonthDays(props.year, props.month + 1);
+      return getDaysInMonth(props.year, props.month);
     });
-    const offsetDays = computed(() => {
-      return getOffsetDaysFromMonthStart(
-        getWeekOfMonthStart(props.year, props.month + 1),
-        props.weekStartsOn
-      );
+    const daysBefore = computed(() => {
+      return getDaysBeforeFirstDay(props.year, props.month, props.weekStartsOn);
     });
     const allDays = computed(() => {
       const currentDays = Array(days.value).fill(0).map((_, i) => new Date(props.year, props.month, i + 1));
       if (props.severalMonths) {
         return currentDays;
       }
-      const padStartDays = getPadStartDays(
+      const prevMonthTailDays = getPrevMonthTailDays(
         props.year,
-        props.month + 1,
-        offsetDays.value
+        props.month,
+        props.weekStartsOn
       );
-      const padEndDays = getPadEndDays(
+      const nextMonthHeadDays = getNextMonthHeadDays(
         props.year,
-        props.month + 1,
-        42 - offsetDays.value - days.value
+        props.month,
+        props.weekStartsOn
       );
-      return [...padStartDays, ...currentDays, ...padEndDays];
+      return [...prevMonthTailDays, ...currentDays, ...nextMonthHeadDays];
     });
     function withinMonth(i) {
-      return props.severalMonths ? true : i >= offsetDays.value && i < offsetDays.value + days.value;
+      return props.severalMonths ? true : i >= daysBefore.value && i < daysBefore.value + days.value;
     }
     const types = {
       same: "same",
@@ -145,7 +141,7 @@ export default  _defineComponent({
         return {
           day,
           style: stringifyStyle(day.style, {
-            marginLeft: props.severalMonths && i === 0 ? offsetDays.value / 7 * 100 + "%" : null
+            marginLeft: props.severalMonths && i === 0 ? daysBefore.value / 7 * 100 + "%" : null
           }),
           className: classNames(
             props.bem.e("day"),
@@ -163,7 +159,7 @@ export default  _defineComponent({
         emit("day-click", day.date);
       }
     };
-    const __returned__ = { props, emit, days, offsetDays, allDays, withinMonth, types, daysInfo, onDayClick };
+    const __returned__ = { props, emit, days, daysBefore, allDays, withinMonth, types, daysInfo, onDayClick };
     return __returned__;
   }
 });

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

@@ -63,7 +63,7 @@ import { useFormPopout } from "../../use";
  * @property {(day: CalendarDay) => void} formatter 通过修改 `CalendarDay` 对象属性值，来自定义日期的文案和样式，默认值：-。
  * @property {boolean} allowSameDay 范围选择中，是否允许起始和结束为同一天，默认值：false。
  * @property {boolean} severalMonths 是否显示多个月，默认值：false。
- * @property {string [详见特殊符号](../guide/date#日期格式特殊符号)} valueFormat 绑定值的格式，不指定则绑定值为 Date 对象，默认值：-。
+ * @property {string [详见特殊符号](../utilities/date#日期格式特殊符号)} valueFormat 绑定值的格式，不指定则绑定值为 Date 对象，默认值：-。
  * @property {string} startDateText 开始日期文字，默认值：'开始'。
  * @property {string} endDateText 结束日期文字，默认值：'结束'。
  * @property {string} sameDateText 选择同一天日期文字，默认值：'开始/结束'。

package/components/card/README.md

@@ -47,18 +47,26 @@ import Card from 'sard-uniapp/components/card/card.vue'
 
 @code('${DEMO_PATH}/card/demo/Hover.vue')
 
+### 自定义样式
+
+可以通过 css 变量自定义卡片样式。
+
+@code('${DEMO_PATH}/card/demo/Style.vue')
+
 ## API
 
 ### CardProps
 
-| 属性                     | 描述             | 类型       | 默认值 |
-| ------------------------ | ---------------- | ---------- | ------ |
-| root-class               | 组件根元素类名   | string     | -      |
-| root-style               | 组件根元素样式   | StyleValue | -      |
-| title                    | 头部左边内容     | string     | -      |
-| extra                    | 头部右边内容     | string     | -      |
-| footer                   | 底部内容         | string     | -      |
-| hover <sup>1.12.3+</sup> | 是否开启点击反馈 | boolean    | false  |
+| 属性                                | 描述             | 类型       | 默认值 |
+| ----------------------------------- | ---------------- | ---------- | ------ |
+| root-class                          | 组件根元素类名   | string     | -      |
+| root-style                          | 组件根元素样式   | StyleValue | -      |
+| title                               | 头部左边内容     | string     | -      |
+| extra                               | 头部右边内容     | string     | -      |
+| footer                              | 底部内容         | string     | -      |
+| hover <sup>1.12.3+</sup>            | 是否开启点击反馈 | boolean    | false  |
+| hide-header-border <sup>1.20+</sup> | 是否隐藏头部边框 | boolean    | false  |
+| hide-footer-border <sup>1.20+</sup> | 是否隐藏底部边框 | boolean    | false  |
 
 ### CardSlots
 

package/components/card/card.vue

@@ -33,6 +33,8 @@ import {
  * @property {string} extra 头部右边内容，默认值：-。
  * @property {string} footer 底部内容，默认值：-。
  * @property {boolean} hover 是否开启点击反馈，默认值：false。
+ * @property {boolean} hideHeaderBorder 是否隐藏头部边框，默认值：false。
+ * @property {boolean} hideFooterBorder 是否隐藏底部边框，默认值：false。
  * @event {(event: any) => void} click 点击卡片时触发
  */
 export default  _defineComponent({
@@ -49,7 +51,9 @@ export default  _defineComponent({
     title: { type: String, required: false },
     extra: { type: String, required: false },
     footer: { type: String, required: false },
-    hover: { type: Boolean, required: false }
+    hover: { type: Boolean, required: false },
+    hideHeaderBorder: { type: Boolean, required: false },
+    hideFooterBorder: { type: Boolean, required: false }
   },
   emits: ["click"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -73,6 +77,8 @@ export default  _defineComponent({
         bem.m("hover", props.hover),
         bem.m("headless", headless.value),
         bem.m("footless", footless.value),
+        bem.m("head-borderless", props.hideHeaderBorder),
+        bem.m("foot-borderless", props.hideFooterBorder),
         props.rootClass
       );
     });

package/components/card/common.d.ts

@@ -6,6 +6,8 @@ export interface CardProps {
     extra?: string;
     footer?: string;
     hover?: boolean;
+    hideHeaderBorder?: boolean;
+    hideFooterBorder?: boolean;
 }
 export interface CardSlots {
     default?(props: Record<string, never>): any;

package/components/card/index.scss

@@ -23,7 +23,13 @@
     padding: var(--sar-card-header-padding-y) var(--sar-card-header-padding-x);
 
     &::after {
-      @include border-bottom(var(--sar-card-border-color));
+      @include border-bottom(
+        var(--sar-card-header-border-color, var(--sar-card-border-color)),
+        var(--sar-card-header-border-style, var(--sar-card-border-style)),
+        var(--sar-card-header-border-width, var(--sar-card-border-width))
+      );
+      left: var(--sar-card-border-left);
+      right: var(--sar-card-border-right);
     }
   }
 
@@ -46,7 +52,29 @@
     @include universal;
     padding: var(--sar-card-footer-padding-y) var(--sar-card-footer-padding-x);
     &::before {
-      @include border-top(var(--sar-card-border-color));
+      @include border-top(
+        var(--sar-card-footer-border-color, var(--sar-card-border-color)),
+        var(--sar-card-footer-border-style, var(--sar-card-border-style)),
+        var(--sar-card-footer-border-width, var(--sar-card-border-width))
+      );
+      left: var(--sar-card-border-left);
+      right: var(--sar-card-border-right);
+    }
+  }
+
+  @include m(head-borderless) {
+    @include e(header) {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  @include m(foot-borderless) {
+    @include e(footer) {
+      &::before {
+        display: none;
+      }
     }
   }
 }

package/components/card/variables.scss

@@ -2,7 +2,6 @@
 page,
 .sar-portal {
   --sar-card-border-radius: var(--sar-rounded-lg);
-  --sar-card-border-color: var(--sar-border-color);
   --sar-card-bg: var(--sar-emphasis-bg);
   --sar-card-active-bg: var(--sar-active-bg);
 
@@ -17,5 +16,21 @@ page,
 
   --sar-card-footer-padding-y: 20rpx;
   --sar-card-footer-padding-x: 32rpx;
+
+  --sar-card-border-color: var(--sar-border-color);
+
+  // 1.20+
+  --sar-card-border-style: var(--sar-border-style);
+  --sar-card-border-width: var(--sar-border-width);
+  --sar-card-border-left: 0px;
+  --sar-card-border-right: 0px;
+
+  // 可覆盖 1.20+
+  // --sar-card-header-border-color: var(--sar-card-border-color);
+  // --sar-card-header-border-style: var(--sar-card-border-style);
+  // --sar-card-header-border-width: var(--sar-card-border-width);
+  // --sar-card-footer-border-color: var(--sar-card-border-color);
+  // --sar-card-footer-border-style: var(--sar-card-border-style);
+  // --sar-card-footer-border-width: var(--sar-card-border-width);
 }
 // #endvariables

package/components/checkbox/common.d.ts

@@ -31,6 +31,7 @@ export interface CheckboxEmits {
 export declare const defaultOptionKeys: {
     label: string;
     value: string;
+    disabled: string;
 };
 export type CheckboxGroupOption = {
     [key: PropertyKey]: any;

package/components/checkbox/common.js

@@ -3,6 +3,7 @@ export const defaultCheckboxProps = defaultConfig.checkbox;
 export const defaultOptionKeys = {
     label: 'label',
     value: 'value',
+    disabled: 'disabled',
 };
 export const defaultCheckboxGroupProps = defaultConfig.checkboxGroup;
 export const checkboxContextSymbol = Symbol('checkbox-context');

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

@@ -24,6 +24,9 @@
       :options="options"
       :option-keys="optionKeys"
       :validate-event="validateEvent"
+      :show-check-all="showCheckAll"
+      :searchable="searchable"
+      :filter-placeholder="filterPlaceholder"
       @change="onChange"
     />
   </sar-popout-input>
@@ -58,6 +61,9 @@ import { usePopoutInput } from "../../use";
  * @property {StyleValue} popoutStyle 弹窗框根元素样式，默认值：-。
  * @property {boolean} visible 是否显示弹出框，默认值：-。
  * @property {string} title 弹出框标题，默认值：-。
+ * @property {boolean} showCheckAll 是否显示全选，默认值：false。
+ * @property {boolean} searchable 是否可搜索，默认值：false。
+ * @property {string} filterPlaceholder 搜索输入框占位符内容，默认值：-。
  * @property {boolean} clearable 是否显示清空按钮，默认值：false。
  * @property {string} placeholder 输入框占位符内容，默认值：-。
  * @property {() => any} valueOnClear 设置点击清除按钮后的值，默认值：() => undefined。
@@ -82,6 +88,9 @@ export default  _defineComponent({
     title: { type: String, required: false },
     popoutClass: { type: String, required: false },
     popoutStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+    showCheckAll: { type: Boolean, required: false },
+    searchable: { type: Boolean, required: false },
+    filterPlaceholder: { type: String, required: false },
     rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
     rootClass: { type: String, required: false },
     modelValue: { type: Array, required: false },

package/components/checkbox-popout/README.md

@@ -24,18 +24,39 @@ import CheckboxPopout from 'sard-uniapp/components/checkbox-popout/checkbox-popo
 
 @code('${DEMO_PATH}/checkbox-popout/demo/Basic.vue')
 
+### 全选 <sup>1.20+</sup>
+
+使用 `show-check-all` 显示全选框，可用于快速选择所有或取消选择。
+
+@code('${DEMO_PATH}/checkbox-popout/demo/CheckAll.vue')
+
+### 禁用选项 <sup>1.20+</sup>
+
+设置了 `disabled` 的选项可禁止选择。
+
+@code('${DEMO_PATH}/checkbox-popout/demo/Disabled.vue')
+
+### 可搜索的 <sup>1.20+</sup>
+
+使用 `searchable` 显示搜索框，可用于过滤选项列表。
+
+@code('${DEMO_PATH}/checkbox-popout/demo/Search.vue')
+
 ## API
 
 ### CheckboxPopoutProps
 
 继承 [`CheckboxGroupProps`](./checkbox#CheckboxGroupProps) 并有以下额外属性：
 
-| 属性              | 描述             | 类型       | 默认值 |
-| ----------------- | ---------------- | ---------- | ------ |
-| popout-class      | 弹窗框根元素类名 | string     | -      |
-| popout-style      | 弹窗框根元素样式 | StyleValue | -      |
-| visible (v-model) | 是否显示弹出框   | boolean    | -      |
-| title             | 弹出框标题       | string     | -      |
+| 属性                                | 描述                 | 类型       | 默认值 |
+| ----------------------------------- | -------------------- | ---------- | ------ |
+| popout-class                        | 弹窗框根元素类名     | string     | -      |
+| popout-style                        | 弹窗框根元素样式     | StyleValue | -      |
+| visible (v-model)                   | 是否显示弹出框       | boolean    | -      |
+| title                               | 弹出框标题           | string     | -      |
+| show-check-all <sup>1.20+</sup>     | 是否显示全选         | boolean    | false  |
+| searchable <sup>1.20+</sup>         | 是否可搜索           | boolean    | false  |
+| filter-placeholder <sup>1.20+</sup> | 搜索输入框占位符内容 | string     | -      |
 
 ### CheckboxPopoutEmits