sard-uniapp 1.19.1 → 1.19.3

package/components/overlay/overlay.vue

@@ -19,6 +19,16 @@ import { useTransition } from "../../use";
 import {
   defaultOverlayProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {boolean} visible 控制显隐，默认值：-。
+ * @property {number | string} zIndex 设置层级，默认值：-。
+ * @property {number} duration 透明度过渡持续时间，默认值：300。
+ * @property {string} background 自定义遮罩层的背景色，默认值：-。
+ * @property {boolean} transparent 透明遮罩，默认值：false。
+ * @event {(event: any) => void} click 点击遮罩时触发
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/pagination/README.md

@@ -0,0 +1,80 @@
+---
+nav: 组件
+title: Pagination
+subtitle: 分页
+group: 导航组件
+---
+
+## 介绍
+
+用于分割长列表，每次加载一页数据。
+
+## 引入
+
+```ts
+import Pagination from 'sard-uniapp/components/pagination/pagination.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+设置 `total` 属性后便会渲染出页码。
+
+@code('${DEMO_PATH}/pagination/demo/Basic.vue')
+
+### 显示省略号
+
+设置 `ellipsis` 会显示省略号，默认点击省略号会向前或向后 5 页。
+
+@code('${DEMO_PATH}/pagination/demo/Ellipsis.vue')
+
+### 简单分页
+
+设置 `type="simple"` 属性可以隐藏具体的页码。
+
+@code('${DEMO_PATH}/pagination/demo/Simple.vue')
+
+### 自定义
+
+自定义前后按钮内容。
+
+@code('${DEMO_PATH}/pagination/demo/Custom.vue')
+
+## API
+
+### PaginationProps
+
+| 属性                | 描述                   | 类型                | 默认值  |
+| ------------------- | ---------------------- | ------------------- | ------- |
+| root-class          | 组件根元素类名         | string              | -       |
+| root-style          | 组件根元素样式         | StyleValue          | -       |
+| total               | 总记录数               | number              | 0       |
+| page-size           | 每页记录数             | number              | 10      |
+| current (v-model)   | 当前页码               | number              | -       |
+| page-count          | 总页数，默认自动计算   | number              | -       |
+| page-button-count   | 显示的页码按钮个数     | number              | 5       |
+| hide-on-single-page | 只有一页时是否隐藏分页 | boolean             | false   |
+| type                | 分页类型               | 'simple' \| 'multi' | 'multi' |
+| ellipsis            | 是否显示省略号         | boolean             | false   |
+| multi-count         | 点击省略号跳转的页数   | number              | 5       |
+
+### PaginationSlots
+
+| 插槽 | 描述                 | 属性 |
+| ---- | -------------------- | ---- |
+| prev | 自定义上一页按钮内容 | -    |
+| next | 自定义下一页按钮内容 | -    |
+
+### PaginationEmits
+
+| 事件                      | 描述           | 类型                   |
+| ------------------------- | -------------- | ---------------------- |
+| update:current            | 页码改变时触发 | (page: number) => void |
+| change <sup>1.12.2+</sup> | 页码改变时触发 | (page: number) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/pagination/pagination.vue

@@ -55,6 +55,21 @@ import {
   getPageRange,
   defaultPaginationProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number} total 总记录数，默认值：0。
+ * @property {number} pageSize 每页记录数，默认值：10。
+ * @property {number} current 当前页码，默认值：-。
+ * @property {number} pageCount 总页数，默认自动计算，默认值：-。
+ * @property {number} pageButtonCount 显示的页码按钮个数，默认值：5。
+ * @property {boolean} hideOnSinglePage 只有一页时是否隐藏分页，默认值：false。
+ * @property {'simple' | 'multi'} type 分页类型，默认值：'multi'。
+ * @property {boolean} ellipsis 是否显示省略号，默认值：false。
+ * @property {number} multiCount 点击省略号跳转的页数，默认值：5。
+ * @event {(page: number) => void} update 页码改变时触发
+ * @event {(page: number) => void} change 页码改变时触发
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/password-input/README.md

@@ -0,0 +1,87 @@
+---
+nav: 组件
+title: PasswordInput
+subtitle: 密码输入框
+group: 表单组件
+---
+
+## 介绍
+
+用于输入密码、验证码等场景可结合数字键盘组件或原生键盘使用。
+
+## 引入
+
+```ts
+import PasswordInput from 'sard-uniapp/components/password-input/password-input.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+默认可以输入 6 个字符。
+
+@code('${DEMO_PATH}/password-input/demo/Basic.vue')
+
+### 下划线类型
+
+`type` 属性可以设置为 `underline` 显示为下划线类型。
+
+@code('${DEMO_PATH}/password-input/demo/Underline.vue')
+
+### 间距
+
+通过 `gap` 属性来设置格子之间的间距。
+
+@code('${DEMO_PATH}/password-input/demo/Gap.vue')
+
+### 明文显示
+
+设置 `plainText` 属性可以明文展示输入的内容，适用于短信验证码等场景。
+
+@code('${DEMO_PATH}/password-input/demo/PlainText.vue')
+
+### 只读和禁用
+
+只读和禁用后不可以操作。
+
+@code('${DEMO_PATH}/password-input/demo/DisabledReadOnly.vue')
+
+### 使用自定义键盘
+
+设置 `customKeyboard` 属性可以使用自定义键盘输入，如果 `focused` 属性为真则会显示聚焦状态。
+
+@code('${DEMO_PATH}/password-input/demo/CustomKeyboard.vue')
+
+## API
+
+### PasswordInputProps
+
+| 属性                  | 描述               | 类型                    | 默认值   |
+| --------------------- | ------------------ | ----------------------- | -------- |
+| root-class            | 组件根元素类名     | string                  | -        |
+| root-style            | 组件根元素样式     | StyleValue              | -        |
+| model-value (v-model) | 密码输入框值       | string                  | -        |
+| length                | 密码长度           | number                  | 6        |
+| type                  | 密码输入框类型     | 'border' \| 'underline' | 'border' |
+| gap                   | 密码输入框项间距   | number \| string        | -        |
+| plain-text            | 是否明文显示       | boolean                 | false    |
+| focused (v-model)     | 是否获取焦点       | boolean                 | false    |
+| custom-keyboard       | 是否使用自定义键盘 | boolean                 | false    |
+| disabled              | 禁用状态           | boolean                 | false    |
+| readonly              | 只读状态           | boolean                 | false    |
+| validate-event        | 是否触发表单验证   | boolean                 | true     |
+
+### PasswordInputEmits
+
+| 事件                     | 描述                  | 类型                       |
+| ------------------------ | --------------------- | -------------------------- |
+| update:model-value       | 输入框值改变时触发    | (value: string) => void    |
+| change <sup>1.9.2+</sup> | 输入框值改变时触发    | (value: string) => void    |
+| updat:focused            | 输入框聚焦/失焦时触发 | (focused: boolean) => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/password-input/password-input.vue

@@ -40,6 +40,23 @@ import { useFormContext, useFormItemContext } from "../form/common";
 import {
   defaultPasswordInputProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} modelValue 密码输入框值，默认值：-。
+ * @property {number} length 密码长度，默认值：6。
+ * @property {'border' | 'underline'} type 密码输入框类型，默认值：'border'。
+ * @property {number | string} gap 密码输入框项间距，默认值：-。
+ * @property {boolean} plainText 是否明文显示，默认值：false。
+ * @property {boolean} focused 是否获取焦点，默认值：false。
+ * @property {boolean} customKeyboard 是否使用自定义键盘，默认值：false。
+ * @property {boolean} disabled 禁用状态，默认值：false。
+ * @property {boolean} readonly 只读状态，默认值：false。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @event {(value: string) => void} update 输入框值改变时触发
+ * @event {(value: string) => void} change 输入框值改变时触发
+ * @event {(focused: boolean) => void} updat 输入框聚焦/失焦时触发
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/picker/README.md

@@ -0,0 +1,115 @@
+---
+nav: 组件
+title: Picker
+subtitle: 选择器
+group: 表单组件
+---
+
+## 介绍
+
+一个或多个可滚动列表选择器。
+
+## 引入
+
+```ts
+import Picker from 'sard-uniapp/components/picker/picker.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+通过 `v-model` 绑定当前值，通过 `columns` 配置选项数据。
+
+@code('${DEMO_PATH}/picker/demo/Basic.vue')
+
+### 对象类型
+
+列的每一项可以为一个对象，使用 `optionKeys` 属性可以指定对象中哪个属性值为选中的值，哪个属性值为要显示的标签。
+
+@code('${DEMO_PATH}/picker/demo/ObjectOption.vue')
+
+### 多列
+
+当 `columns` 属性值为一个二维数组时会显示为多列。
+
+@code('${DEMO_PATH}/picker/demo/Multiple.vue')
+
+### 对象类型多列
+
+`columns` 属性值为对象类型的二维数组。
+
+@code('${DEMO_PATH}/picker/demo/ObjectMultiple.vue')
+
+### 级联选择
+
+当 `columns` 第一个元素为对象且其 `children` 属性值为数组时会被当作级联选择。
+
+@code('${DEMO_PATH}/picker/demo/Cascaded.vue')
+
+### 插槽
+
+可通过 `custom` 插槽自定义每一个选项的内容。
+
+@info
+
+因小程序不支持循环中的插槽，因此循环逻辑要自行实现；
+
+因 `picker-view-column` 要为 `picker-view` 的直接子元素，因此要把 `picker-view` 提取出来，要自行绑定属性和事件。
+
+@endinfo
+
+@code('${DEMO_PATH}/picker/demo/Slot.vue')
+
+## API
+
+### PickerProps
+
+| 属性             | 描述                                               | 类型                               | 默认值                                                 |
+| ---------------- | -------------------------------------------------- | ---------------------------------- | ------------------------------------------------------ |
+| root-class       | 组件根元素类名                                     | string                             | -                                                      |
+| root-style       | 组件根元素样式                                     | StyleValue                         | -                                                      |
+| columns          | 配置每一列的数据                                   | PickerOption[] \| PickerOption[][] | []                                                     |
+| option-keys      | 自定义 `columns` 结构中的字段                      | PickerOptionKeys                   | {label: 'label', value: 'value', children: 'children'} |
+| model-value      | 选中项的值                                         | any                                | -                                                      |
+| immediate-change | 是否在手指松开时立即触发 `update:model-value` 事件 | boolean                            | false                                                  |
+
+### PickerSlots
+
+| 插槽                    | 描述             | 属性                                                                                                                                      |
+| ----------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| custom <sup>1.17+</sup> | 自定义选项的内容 | { columns: any[][]; value: number[]; pickerViewClass: string; maskClass: string; indicatorClass: string; onChange: (event: any) => void;} |
+
+### PickerEmits
+
+| 事件                     | 描述                 | 类型                                                                     |
+| ------------------------ | -------------------- | ------------------------------------------------------------------------ |
+| update:model-value       | 选中的选项改变时触发 | (value: any, selectedOptions: PickerOption[], indexes: number[]) => void |
+| change <sup>1.9.2+</sup> | 选中的选项改变时触发 | (value: any, selectedOptions: PickerOption[], indexes: number[]) => void |
+
+### PickerOption
+
+```tsx
+type PickerOption =
+  | {
+      [key: PropertyKey]: any
+    }
+  | number
+  | string
+```
+
+### PickerOptionKeys
+
+```tsx
+interface PickerOptionKeys {
+  label?: string
+  value?: string
+  children?: string
+}
+```
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/picker/common.d.ts

@@ -47,4 +47,4 @@ export declare function getOptionsByIndexes(indexes: number[], columns: PickerOp
 export declare function getCascaderValidIndexes(indexes: number[], columns: PickerOption[] | PickerOption[][], optionKeys: Required<PickerOptionKeys>): number[];
 export declare function getMaySingleValueByOptions(options: PickerOption[], optionKeys: Required<PickerOptionKeys>, columns: PickerOption[] | PickerOption[][]): string | number | (string | number)[];
 export declare function getIndexesByValue(value: any[], columns: PickerOption[] | PickerOption[][], optionKeys: Required<PickerOptionKeys>): number[];
-export declare function getInitialValue(columns: PickerOption[] | PickerOption[][], optionKeys: Required<PickerOptionKeys>): string | number | (string | number)[];
+export declare function getInitialValue(columns: PickerOption[] | PickerOption[][], optionKeys: Required<PickerOptionKeys>): (string | number | (PickerOption | PickerOption[])[])[];

package/components/picker/common.js

@@ -91,20 +91,32 @@ export function getIndexesByValue(value, columns, optionKeys) {
     });
 }
 export function getInitialValue(columns, optionKeys) {
-    function recurse(columns) {
+    function recurse(columns, options) {
         const option = columns[0];
+        options.push(option);
         const nextColumn = option?.[optionKeys.children];
         if (Array.isArray(nextColumn) && nextColumn.length > 0) {
-            return recurse(nextColumn);
+            return recurse(nextColumn, options);
         }
         return option;
     }
     switch (getColumnsType(columns, optionKeys)) {
         case 'single':
-            return getValueOrLabelByOption(columns[0], optionKeys.value);
+            return [
+                getValueOrLabelByOption(columns[0], optionKeys.value),
+                [columns[0]],
+            ];
         case 'multi':
-            return columns.map((column) => getValueOrLabelByOption(column[0], optionKeys.value));
-        case 'cascader':
-            return getValueOrLabelByOption(recurse(columns), optionKeys.value);
+            return [
+                columns.map((column) => getValueOrLabelByOption(column[0], optionKeys.value)),
+                columns.map((column) => column[0]),
+            ];
+        case 'cascader': {
+            const options = [];
+            return [
+                getValueOrLabelByOption(recurse(columns, options), optionKeys.value),
+                options,
+            ];
+        }
     }
 }

package/components/picker/picker.vue

@@ -38,8 +38,8 @@ import {
   nestedToMulti,
   toArray,
   arrayEqual,
-  isNullish,
-  isNumber
+  isNumber,
+  isEmptyBinding
 } from "../../utils";
 import {
   defaultOptionKeys,
@@ -52,6 +52,16 @@ import {
   defaultPickerProps
 } from "./common";
 import SarPickerItem from "../picker-item/picker-item.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {PickerOption[] | PickerOption[][]} columns 配置每一列的数据，默认值：[]。
+ * @property {PickerOptionKeys} optionKeys 自定义 `columns` 结构中的字段，默认值：{label: 'label', value: 'value', children: 'children'}。
+ * @property {any} modelValue 选中项的值，默认值：-。
+ * @property {boolean} immediateChange 是否在手指松开时立即触发 `update:model-value` 事件，默认值：false。
+ * @event {(value: any, selectedOptions: PickerOption[], indexes: number[]) => void} update 选中的选项改变时触发
+ * @event {(value: any, selectedOptions: PickerOption[], indexes: number[]) => void} change 选中的选项改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarPickerItem,
@@ -92,18 +102,21 @@ export default  _defineComponent({
       }
     );
     const columnIndexes = ref([]);
+    const updateColumnIndexes = () => {
+      const indexes = getIndexesByValue(
+        toArray(innerValue.value),
+        props.columns,
+        fieldKeys.value
+      );
+      if (!arrayEqual(indexes, columnIndexes.value)) {
+        columnIndexes.value = indexes;
+      }
+    };
     watch(
       [innerValue, () => props.columns, fieldKeys],
       () => {
-        if (!isNullish(innerValue.value) && innerValue.value !== "") {
-          const indexes = getIndexesByValue(
-            toArray(innerValue.value),
-            props.columns,
-            fieldKeys.value
-          );
-          if (!arrayEqual(indexes, columnIndexes.value)) {
-            columnIndexes.value = indexes;
-          }
+        if (!isEmptyBinding(innerValue.value)) {
+          updateColumnIndexes();
         }
       },
       {
@@ -114,7 +127,7 @@ export default  _defineComponent({
       let indexes = event.detail.value;
       if (indexes.some((index) => index === Infinity)) {
         nextTick(() => {
-          columnIndexes.value = isNullish(innerValue.value) || innerValue.value === "" ? columnIndexes.value.map(() => 0) : [...columnIndexes.value];
+          columnIndexes.value = isEmptyBinding(innerValue.value) ? columnIndexes.value.map(() => 0) : [...columnIndexes.value];
         });
         return;
       }
@@ -173,11 +186,23 @@ export default  _defineComponent({
       }
     };
     const renderedColumns = ref(getRenderedColumns());
+    const updateRenderedColumns = () => {
+      renderedColumns.value = getRenderedColumns();
+    };
     watch(
       [() => props.columns, innerValue],
       ([newColumns, newValue], [oldColumns, oldValue]) => {
-        if (newColumns !== oldColumns || newValue !== oldValue && columnsType.value === "cascader" && !isNullish(newValue) && newValue !== "" && (!Array.isArray(newValue) || newValue.length > 0)) {
-          renderedColumns.value = getRenderedColumns();
+        if (newColumns !== oldColumns || newValue !== oldValue && columnsType.value === "cascader" && !isEmptyBinding(newValue) && (!Array.isArray(newValue) || newValue.length > 0)) {
+          updateRenderedColumns();
+        }
+      }
+    );
+    watch(
+      () => props.modelValue,
+      () => {
+        if (isEmptyBinding(props.modelValue)) {
+          updateColumnIndexes();
+          updateRenderedColumns();
         }
       }
     );
@@ -193,7 +218,7 @@ export default  _defineComponent({
     const pickerViewClass = bem.e("picker-view");
     const indicatorClass = bem.e("indicator");
     const maskClass = bem.e("mask");
-    const __returned__ = { props, emit, bem, fieldKeys, columnsType, innerValue, columnIndexes, onChange, getRenderedColumns, renderedColumns, getLabelByOption, pickerClass, pickerStyle, pickerViewClass, indicatorClass, maskClass, get isNumber() {
+    const __returned__ = { props, emit, bem, fieldKeys, columnsType, innerValue, columnIndexes, updateColumnIndexes, onChange, getRenderedColumns, renderedColumns, updateRenderedColumns, getLabelByOption, pickerClass, pickerStyle, pickerViewClass, indicatorClass, maskClass, get isNumber() {
       return isNumber;
     }, SarPickerItem };
     return __returned__;

package/components/picker-input/README.md

@@ -0,0 +1,51 @@
+---
+nav: 组件
+title: PickerInput
+subtitle: 选择器输入框
+group: 表单组件
+---
+
+## 介绍
+
+组合了选择器弹出框、输入框组件，实现了便捷快速的选择功能。
+
+## 引入
+
+```ts
+import PickerInput from 'sard-uniapp/components/picker-input/picker-input.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+使用 `v-model` 绑定当前值，通过 `title` 和 `placeholder` 属性设置弹出框标题和输入框占位文本。
+
+在点击输入框后会显示包裹选择器的弹出框。
+
+@code('${DEMO_PATH}/picker-input/demo/Basic.vue')
+
+## API
+
+### PickerInputProps
+
+继承 [`PickerPopoutProps`](./picker-popout#PickerPopoutProps) 并有以下额外属性：
+
+| 属性                              | 描述                   | 类型       | 默认值          |
+| --------------------------------- | ---------------------- | ---------- | --------------- |
+| root-class                        | 弹出式输入框根元素类名 | string     | -               |
+| root-style                        | 弹出式输入框根元素样式 | StyleValue | -               |
+| disabled                          | 禁用状态               | boolean    | false           |
+| readonly                          | 只读状态               | boolean    | false           |
+| loading                           | 加载状态               | boolean    | false           |
+| clearable                         | 是否显示清空按钮       | boolean    | false           |
+| placeholder                       | 输入框占位符内容       | string     | -               |
+| value-on-clear <sup>1.19.2+</sup> | 设置点击清除按钮后的值 | () => any  | () => undefined |
+
+### PickerSlots
+
+继承 [`PickerPopoutSlots`](./picker-popout#PickerPopoutSlots)
+
+### PickerInputEmits
+
+继承 [`PickerPopoutEmits`](./picker-popout#PickerPopoutEmits) 并有以下额外属性：

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

@@ -1,8 +1,10 @@
 import { type PopoutInputProps } from '../popout-input/common';
 import { type PickerPopoutSlots, type PickerPopoutEmits, type PickerPopoutProps } from '../picker-popout/common';
 export interface PickerInputProps extends PickerPopoutProps, Omit<PopoutInputProps, 'modelValue'> {
+    valueOnClear?: () => any;
 }
 export declare const defaultPickerInputProps: () => {
+    valueOnClear: PickerInputProps["valueOnClear"];
     validateEvent: boolean;
     columns: () => never[];
     immediateChange: boolean;

package/components/picker-input/common.js

@@ -1,4 +1,6 @@
 import { defaultPickerPopoutProps, } from '../picker-popout/common';
+import { defaultConfig } from '../config';
 export const defaultPickerInputProps = () => ({
     ...defaultPickerPopoutProps(),
+    ...defaultConfig.pickerInput,
 });

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

@@ -10,8 +10,9 @@ declare const __VLS_component: import("vue").DefineComponent<PickerInputProps, {
     onChange?: ((value: any) => any) | undefined;
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }>, {
-    columns: PickerOption[] | PickerOption[][];
+    valueOnClear: () => any;
     validateEvent: boolean;
+    columns: PickerOption[] | PickerOption[][];
     immediateChange: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -60,11 +60,32 @@ import {
   getOptionsByIndexes,
   getValueOrLabelByOption
 } from "../picker/common";
-import { isNullish, toArray } from "../../utils";
+import { isEmptyBinding, toArray } from "../../utils";
 import { usePopoutInput } from "../../use";
 import {
   defaultPickerInputProps
 } from "./common";
+/**
+ * @property {string} rootClass 弹出式输入框根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 弹出式输入框根元素样式，默认值：-。
+ * @property {PickerOption[] | PickerOption[][]} columns 配置每一列的数据，默认值：[]。
+ * @property {PickerOptionKeys} optionKeys 自定义 `columns` 结构中的字段，默认值：{label: 'label', value: 'value', children: 'children'}。
+ * @property {any} modelValue 选中项的值，默认值：-。
+ * @property {boolean} immediateChange 是否在手指松开时立即触发 `update:model-value` 事件，默认值：false。
+ * @property {string} popoutClass 弹窗框根元素类名，默认值：-。
+ * @property {StyleValue} popoutStyle 弹窗框根元素样式，默认值：-。
+ * @property {boolean} visible 是否显示弹出框，默认值：-。
+ * @property {string} title 弹出框标题，默认值：-。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @property {boolean} disabled 禁用状态，默认值：false。
+ * @property {boolean} readonly 只读状态，默认值：false。
+ * @property {boolean} loading 加载状态，默认值：false。
+ * @property {boolean} clearable 是否显示清空按钮，默认值：false。
+ * @property {string} placeholder 输入框占位符内容，默认值：-。
+ * @property {() => any} valueOnClear 设置点击清除按钮后的值，默认值：() => undefined。
+ * @event {(visible: boolean) => void} update 弹出框显隐时触发
+ * @event {(value: any) => void} change 选择器输入组件值改变时触发
+ */
 export default  _defineComponent({
   components: {
     SarPopoutInput,
@@ -78,6 +99,7 @@ export default  _defineComponent({
   },
   __name: "picker-input",
   props:  _mergeDefaults({
+    valueOnClear: { type: Function, required: false },
     visible: { type: Boolean, required: false },
     title: { type: String, required: false },
     validateEvent: { type: Boolean, required: false },
@@ -115,7 +137,7 @@ export default  _defineComponent({
       return labels.join("/");
     }
     function getInputValue() {
-      if (isNullish(innerValue.value) || innerValue.value === "") {
+      if (isEmptyBinding(innerValue.value)) {
         return "";
       }
       return getOutletText(props.columns, fieldKeys.value, innerValue.value);