sard-uniapp 1.19.1 → 1.19.3

package/components/icon/common.d.ts

@@ -6,8 +6,10 @@ export interface IconProps {
     family?: string;
     size?: string;
     color?: string;
+    separate?: boolean;
 }
 export declare const defaultIconProps: {
     name: string;
     family: string;
+    separate: IconProps["separate"];
 };

package/components/icon/icon.d.ts

@@ -1,5 +1,6 @@
 import { type IconProps } from './common';
 declare const _default: import("vue").DefineComponent<IconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IconProps> & Readonly<{}>, {
+    separate: boolean;
     name: string;
     family: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/components/icon/icon.vue

@@ -9,6 +9,15 @@ import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent }
 import { computed } from "vue";
 import { classNames, stringifyStyle, isFileUrl, createBem } from "../../utils";
 import { defaultIconProps } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string} name 图标名称或图片链接，如果名称带有`/`，会被认为是图片图标，默认值：''。
+ * @property {string} family 字体名称，默认值：'sari'。
+ * @property {string} size 图标大小，默认值：-。
+ * @property {string} color 图标颜色，默认值：-。
+ * @property {boolean} separate 是否分开字体和字体名称，而不进行拼接，默认值：false。
+ */
 export default  _defineComponent({
   ...{
     options: {
@@ -23,7 +32,8 @@ export default  _defineComponent({
     name: { type: String, required: false },
     family: { type: String, required: false },
     size: { type: String, required: false },
-    color: { type: String, required: false }
+    color: { type: String, required: false },
+    separate: { type: Boolean, required: false }
   }, defaultIconProps),
   setup(__props, { expose: __expose }) {
     __expose();
@@ -38,12 +48,17 @@ export default  _defineComponent({
       }
       if (props.name.includes(":")) {
         const [family, name] = props.name.split(":");
-        return classNames(bem.b(), family, `${family}-${name}`, props.rootClass);
+        return classNames(
+          bem.b(),
+          family,
+          props.separate && family !== "sari" ? name : `${family}-${name}`,
+          props.rootClass
+        );
       }
       return classNames(
         bem.b(),
         props.family,
-        `${props.family}-${props.name}`,
+        props.separate && props.family !== "sari" ? props.name : `${props.family}-${props.name}`,
         props.rootClass
       );
     });

package/components/indexes/README.md

@@ -0,0 +1,83 @@
+---
+nav: 组件
+title: Indexes
+subtitle: 索引
+group: 导航组件
+---
+
+## 介绍
+
+用于页面中信息快速检索，可以根据目录中的页码快速找到所需的内容。
+
+## 引入
+
+```ts
+import Indexes from 'sard-uniapp/components/indexes/indexes.vue'
+import IndexesAnchor from 'sard-uniapp/components/indexes-anchor/indexes-anchor.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+`Indexes` 里面的 `IndexesAnchor` 组件会被收集起来，用于放置锚点和自动生成右侧的导航。导航和锚点会有一个联动效果。
+
+@code('${DEMO_PATH}/indexes/demo/Basic.vue')
+
+`AreaCode.vue`
+
+@code('${DEMO_PATH}/indexes/demo/AreaCode.vue')
+
+`AreaCodeSearch.vue`
+
+@code('${DEMO_PATH}/indexes/demo/AreaCodeSearch.vue')
+
+## API
+
+### IndexesProps
+
+| 属性       | 描述               | 类型             | 默认值 |
+| ---------- | ------------------ | ---------------- | ------ |
+| root-class | 组件根元素类名     | string           | -      |
+| root-style | 组件根元素样式     | StyleValue       | -      |
+| current    | 设置当前活动的锚点 | number \| string | -      |
+
+### IndexesSlots
+
+| 插槽    | 描述           | 属性 |
+| ------- | -------------- | ---- |
+| default | 自定义默认内容 | -    |
+
+### IndexesEmits
+
+| 事件                            | 描述               | 类型                             |
+| ------------------------------- | ------------------ | -------------------------------- |
+| update:current <sup>1.12+</sup> | 索引发生变更时触发 | (name: number \| string) => void |
+| change                          | 索引发生变更时触发 | (name: number \| string) => void |
+
+### IndexesExpose
+
+| 属性     | 描述           | 类型                             |
+| -------- | -------------- | -------------------------------- |
+| scrollTo | 滚动到指定锚点 | (name: string \| number) => void |
+| update   | 更新锚点位置   | () => void                       |
+
+### IndexesAnchorProps
+
+| 属性       | 描述           | 类型             | 默认值 |
+| ---------- | -------------- | ---------------- | ------ |
+| root-class | 组件根元素类名 | string           | -      |
+| root-style | 组件根元素样式 | StyleValue       | -      |
+| name       | 索引锚点名称   | number \| string | -      |
+
+### IndexesAnchorSlots
+
+| 插槽    | 描述                               | 属性 |
+| ------- | ---------------------------------- | ---- |
+| default | 自定义锚点内容，会覆盖 `name` 属性 | -    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/indexes/indexes.vue

@@ -42,6 +42,13 @@ import {
 } from "./common";
 import { useScrollSpy } from "../../use";
 import SarIndexesNav from "../indexes-nav/indexes-nav.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number | string} current 设置当前活动的锚点，默认值：-。
+ * @event {(name: number | string) => void} update 索引发生变更时触发
+ * @event {(name: number | string) => void} change 索引发生变更时触发
+ */
 export default  _defineComponent({
   components: {
     SarIndexesNav,

package/components/indexes-anchor/indexes-anchor.vue

@@ -20,6 +20,11 @@ import {
 import {
   indexesContextSymbol
 } from "../indexes/common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {number | string} name 索引锚点名称，默认值：-。
+ */
 export default  _defineComponent({
   ...{
     options: {

package/components/input/README.md

@@ -0,0 +1,170 @@
+---
+nav: 组件
+title: Input
+subtitle: 输入框
+group: 表单组件
+---
+
+## 介绍
+
+接收用户输入的文本信息。
+
+## 引入
+
+```ts
+import Input from 'sard-uniapp/components/input/input.vue'
+```
+
+## 代码演示
+
+### 基础使用
+
+可以通过 `v-model` 绑定输入框的值，通过 `placeholder` 设置占位提示文字。
+
+@code('${DEMO_PATH}/input/demo/Basic.vue')
+
+### 自定义样式
+
+可以对其尺寸、颜色、背景色、边框等样式进行设置。
+
+@code('${DEMO_PATH}/input/demo/Style.vue')
+
+### 类型
+
+据 `type` 属性定义不同类型的输入框，默认值为 `text。`
+
+@code('${DEMO_PATH}/input/demo/Type.vue')
+
+### 可清除的
+
+设置了 `clearable` 属性后，在输入框有值时会显示清除按钮。
+
+@code('${DEMO_PATH}/input/demo/Clearable.vue')
+
+### 聚焦时显示清除按钮
+
+只在输入框获取焦点时显示清除按钮。
+
+@code('${DEMO_PATH}/input/demo/ShowClearOnlyFocus.vue')
+
+### 只读和禁用
+
+只读或禁用时无法输入。
+
+@code('${DEMO_PATH}/input/demo/DisabledReadOnly.vue')
+
+### 插槽
+
+可以通过前置或后置插槽添加额外的内容。
+
+@code('${DEMO_PATH}/input/demo/Slot.vue')
+
+### 去除边框
+
+清除边框后页面看起来会很清爽。
+
+@code('${DEMO_PATH}/input/demo/Borderless.vue')
+
+### 嵌入的
+
+`inlaid` 用于清除边框和内边距，以便可以嵌入到其他组件内。
+
+@code('${DEMO_PATH}/input/demo/Inlaid.vue')
+
+### 多行文本
+
+设置 `type="textarea"` 可以换行输入。
+
+@code('${DEMO_PATH}/input/demo/Multiple.vue')
+
+### 自动高度
+
+设置自动高度可以让文本域随输入内容变多而增高。
+另外可以设置 `minHeight` 设置文本域的最小高度。
+
+@code('${DEMO_PATH}/input/demo/AutoHeight.vue')
+
+### 字数提示
+
+设置 `showCount` 属性可以显示当前输入的字数和总字数；
+设置 `maxlength` 可以限制输入的最大字数。
+
+@code('${DEMO_PATH}/input/demo/ShowCount.vue')
+
+## API
+
+### InputProps
+
+| 属性                      | 描述                                                                                 | 类型                                                                                                           | 默认值 |
+| ------------------------- | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ------ |
+| root-class                | 组件根元素类名                                                                       | string                                                                                                         | -      |
+| root-style                | 组件根元素样式                                                                       | StyleValue                                                                                                     | -      |
+| model-value (v-model)     | 输入框值                                                                             | string \| number                                                                                               | -      |
+| clearable                 | 是否显示清空按钮                                                                     | boolean                                                                                                        | false  |
+| show-clear-only-focus     | 是否只在聚焦时显示清空按钮                                                           | boolean                                                                                                        | false  |
+| show-count                | 是否展示字数                                                                         | boolean                                                                                                        | false  |
+| inlaid                    | 嵌入式状态                                                                           | boolean                                                                                                        | false  |
+| borderless                | 是否隐藏边框                                                                         | boolean                                                                                                        | false  |
+| readonly                  | 只读状态                                                                             | boolean                                                                                                        | false  |
+| focused                   | 是否显示获焦样式，用于结合自定义键盘使用时显示高亮效果                               | boolean                                                                                                        | false  |
+| min-height                | 输入框最小高度                                                                       | string                                                                                                         | -      |
+| placeholder               | 输入框占位符内容                                                                     | string                                                                                                         | -      |
+| placeholder-style         | 输入框占位符样式                                                                     | string                                                                                                         | -      |
+| placeholder-class         | 输入框占位符类名                                                                     | string                                                                                                         | -      |
+| disabled                  | 禁用状态                                                                             | boolean                                                                                                        | false  |
+| maxlength                 | 最大输入长度，设置为 -1 的时候不限制最大长度                                         | number                                                                                                         | 140    |
+| focus                     | 获取焦点                                                                             | boolean                                                                                                        | -      |
+| cursor-spacing            | 指定光标与键盘的距离                                                                 | number                                                                                                         | 30     |
+| cursor                    | 指定 focus 时的光标位置                                                              | number                                                                                                         | -1     |
+| confirm-type              | 设置键盘右下角按钮的文字                                                             | "send" \| "search" \| "next" \| "go" \| "done"                                                                 | 'done' |
+| confirm-hold              | 点击键盘右下角按钮时是否保持键盘不收起                                               | boolean                                                                                                        | false  |
+| selection-start           | 光标起始位置                                                                         | number                                                                                                         | -1     |
+| selection-end             | 光标结束位置                                                                         | number                                                                                                         | -1     |
+| adjust-position           | 键盘弹起时，是否自动上推页面                                                         | boolean                                                                                                        | true   |
+| hold-keyboard             | focus 时，点击页面的时候不收起键盘                                                   | boolean                                                                                                        | false  |
+| auto-blur                 | 键盘收起时，是否自动失去焦点                                                         | boolean                                                                                                        | false  |
+| ignore-composition-event  | 是否忽略组件内对文本合成系统事件的处理                                               | boolean                                                                                                        | true   |
+| inputmode                 | 用户在编辑元素或其内容时可能输入的数据类型的提示                                     | 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'                            | 'text' |
+| auto-height               | 文本域自动高度                                                                       | boolean                                                                                                        | false  |
+| fixed                     | 如果 `textarea` 是在一个 `position:fixed` 的区域，需要显示指定属性 `fixed` 为 `true` | boolean                                                                                                        | false  |
+| show-confirm-bar          | 是否显示键盘上方带有”完成“按钮那一栏                                                 | boolean                                                                                                        | true   |
+| disable-default-padding   | 是否去掉 iOS 下的默认内边距                                                          | boolean                                                                                                        | false  |
+| type                      | 输入框类型                                                                           | 'text' \| 'password' \| 'textarea' \| 'number' \|'idcard' \| 'digit' \| 'tel' \| 'safe-password' \| 'nickname' | 'text' |
+| always-embed              | 强制 input 处于同层状态                                                              | boolean                                                                                                        | -      |
+| safe-password-cert-path   | 安全键盘加密公钥的路径，只支持包内路径                                               | string                                                                                                         | -      |
+| safe-password-length      | 安全键盘输入密码长度                                                                 | number                                                                                                         | -      |
+| safe-password-time-stamp  | 安全键盘加密时间戳                                                                   | number                                                                                                         | -      |
+| safe-password-nonce       | 安全键盘加密盐值                                                                     | string                                                                                                         | -      |
+| safe-password-salt        | 安全键盘计算 `hash` 盐值，若指定 `custom-hash` 则无效                                | string                                                                                                         | -      |
+| safe-password-custom-hash | 安全键盘计算 `hash` 的算法表达式                                                     | string                                                                                                         | -      |
+| random-number             | 当 `type` 为 `number, digit, idcard` 数字键盘是否随机排列                            | boolean                                                                                                        | false  |
+| controlled                | 是否为受控组件。为 `true` 时，value 内容会完全受 `setData` 控制                      | boolean                                                                                                        | false  |
+| always-system             | 是否强制使用系统键盘和 `Web-view `创建的 `input` 元素                                | boolean                                                                                                        | false  |
+| validate-event            | 是否触发表单验证                                                                     | boolean                                                                                                        | true   |
+
+### InputSlots
+
+| 插槽    | 描述                 | 属性 |
+| ------- | -------------------- | ---- |
+| prepend | 自定义输入框前面内容 | -    |
+| append  | 自定义输入框后面内容 | -    |
+
+### InputEmits
+
+| 事件                     | 描述                           | 类型                    |
+| ------------------------ | ------------------------------ | ----------------------- |
+| update:model-value       | 输入框值改变时触发             | (value: string) => void |
+| input <sup>1.9.2+</sup>  | 输入框值改变时触发             | (value: string) => void |
+| change <sup>1.9.2+</sup> | 键盘非聚焦状态且内容改变时触发 | (value: string) => void |
+| clear                    | 点击清除按钮时触发             | () => void              |
+| focus                    | 聚焦时触发                     | (event: any) => void    |
+| blur                     | 失焦时触发                     | (event: any) => void    |
+| linechange               | 输入框行数变化时触发           | (event: any) => void    |
+| confirm                  | 点击完成时触发                 | (event: any) => void    |
+| keyboardheightchange     | 键盘高度发生变化的时候触发     | (event: any) => void    |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')

package/components/input/common.d.ts

@@ -45,6 +45,7 @@ export interface InputProps {
     focused?: boolean;
     minHeight?: string;
     validateEvent?: boolean;
+    internalPrepend?: number;
 }
 export declare const defaultInputProps: {
     maxlength: number;

package/components/input/index.scss

@@ -67,26 +67,6 @@
     }
   }
 
-  @include e(placeholder) {
-    color: var(--sar-input-placeholder-color);
-    font-size: var(--sar-input-control-font-size);
-    line-height: var(--sar-input-control-line-height);
-
-    @include m(textarea) {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      overflow: hidden;
-      pointer-events: none;
-    }
-
-    @include m(input-min-height) {
-      line-height: var(--sar-input-control-input-height);
-    }
-  }
-
   @include e(prepend, append) {
     @include universal;
     align-items: center;

package/components/input/input.vue

@@ -1,22 +1,11 @@
 <template>
   <view :class="inputClass" :style="inputStyle" @click="onClick">
     <view :class="bem.e('content')">
-      <view v-if="$slots.prepend" :class="bem.e('prepend')">
-        <slot name="prepend"></slot>
-      </view>
       <view
-        v-if="type === 'textarea' && innerValue === '' && placeholder"
-        :class="
-          classNames(
-            bem.e('placeholder'),
-            bem.em('placeholder', 'textarea'),
-            bem.em('placeholder', 'input-min-height', inputMinHeight),
-            placeholderClass,
-          )
-        "
-        :style="mergedPlaceholderStyle"
+        v-if="internalPrepend !== 0 && $slots.prepend"
+        :class="bem.e('prepend')"
       >
-        {{ placeholder }}
+        <slot name="prepend"></slot>
       </view>
       <textarea
         v-if="type === 'textarea'"
@@ -27,6 +16,9 @@
             bem.em('control', 'input-min-height', inputMinHeight),
           )
         "
+        :placeholder="placeholder"
+        :placeholder-style="mergedPlaceholderStyle"
+        :placeholder-class="placeholderClass"
         :value="innerValue"
         :disabled="isDisabled || isReadonly"
         :maxlength="maxlength"
@@ -62,7 +54,7 @@
         :value="innerValue"
         :placeholder="placeholder"
         :placeholder-style="mergedPlaceholderStyle"
-        :placeholder-class="classNames(bem.e('placeholder'), placeholderClass)"
+        :placeholder-class="placeholderClass"
         :disabled="isDisabled || isReadonly"
         :maxlength="maxlength"
         :focus="focus"
@@ -127,6 +119,61 @@ import { useFormContext, useFormItemContext } from "../form/common";
 import {
   defaultInputProps
 } from "./common";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {string | number} modelValue 输入框值，默认值：-。
+ * @property {boolean} clearable 是否显示清空按钮，默认值：false。
+ * @property {boolean} showClearOnlyFocus 是否只在聚焦时显示清空按钮，默认值：false。
+ * @property {boolean} showCount 是否展示字数，默认值：false。
+ * @property {boolean} inlaid 嵌入式状态，默认值：false。
+ * @property {boolean} borderless 是否隐藏边框，默认值：false。
+ * @property {boolean} readonly 只读状态，默认值：false。
+ * @property {boolean} focused 是否显示获焦样式，用于结合自定义键盘使用时显示高亮效果，默认值：false。
+ * @property {string} minHeight 输入框最小高度，默认值：-。
+ * @property {string} placeholder 输入框占位符内容，默认值：-。
+ * @property {string} placeholderStyle 输入框占位符样式，默认值：-。
+ * @property {string} placeholderClass 输入框占位符类名，默认值：-。
+ * @property {boolean} disabled 禁用状态，默认值：false。
+ * @property {number} maxlength 最大输入长度，设置为 -1 的时候不限制最大长度，默认值：140。
+ * @property {boolean} focus 获取焦点，默认值：-。
+ * @property {number} cursorSpacing 指定光标与键盘的距离，默认值：30。
+ * @property {number} cursor 指定 focus 时的光标位置，默认值：-1。
+ * @property {"send" | "search" | "next" | "go" | "done"} confirmType 设置键盘右下角按钮的文字，默认值：'done'。
+ * @property {boolean} confirmHold 点击键盘右下角按钮时是否保持键盘不收起，默认值：false。
+ * @property {number} selectionStart 光标起始位置，默认值：-1。
+ * @property {number} selectionEnd 光标结束位置，默认值：-1。
+ * @property {boolean} adjustPosition 键盘弹起时，是否自动上推页面，默认值：true。
+ * @property {boolean} holdKeyboard focus 时，点击页面的时候不收起键盘，默认值：false。
+ * @property {boolean} autoBlur 键盘收起时，是否自动失去焦点，默认值：false。
+ * @property {boolean} ignoreCompositionEvent 是否忽略组件内对文本合成系统事件的处理，默认值：true。
+ * @property {'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'} inputmode 用户在编辑元素或其内容时可能输入的数据类型的提示，默认值：'text'。
+ * @property {boolean} autoHeight 文本域自动高度，默认值：false。
+ * @property {boolean} fixed 如果 `textarea` 是在一个 `position:fixed` 的区域，需要显示指定属性 `fixed` 为 `true`，默认值：false。
+ * @property {boolean} showConfirmBar 是否显示键盘上方带有”完成“按钮那一栏，默认值：true。
+ * @property {boolean} disableDefaultPadding 是否去掉 iOS 下的默认内边距，默认值：false。
+ * @property {'text' | 'password' | 'textarea' | 'number' |'idcard' | 'digit' | 'tel' | 'safe-password' | 'nickname'} type 输入框类型，默认值：'text'。
+ * @property {boolean} alwaysEmbed 强制 input 处于同层状态，默认值：-。
+ * @property {string} safePasswordCertPath 安全键盘加密公钥的路径，只支持包内路径，默认值：-。
+ * @property {number} safePasswordLength 安全键盘输入密码长度，默认值：-。
+ * @property {number} safePasswordTimeStamp 安全键盘加密时间戳，默认值：-。
+ * @property {string} safePasswordNonce 安全键盘加密盐值，默认值：-。
+ * @property {string} safePasswordSalt 安全键盘计算 `hash` 盐值，若指定 `custom-hash` 则无效，默认值：-。
+ * @property {string} safePasswordCustomHash 安全键盘计算 `hash` 的算法表达式，默认值：-。
+ * @property {boolean} randomNumber 当 `type` 为 `number, digit, idcard` 数字键盘是否随机排列，默认值：false。
+ * @property {boolean} controlled 是否为受控组件。为 `true` 时，value 内容会完全受 `setData` 控制，默认值：false。
+ * @property {boolean} alwaysSystem 是否强制使用系统键盘和 `Web-view `创建的 `input` 元素，默认值：false。
+ * @property {boolean} validateEvent 是否触发表单验证，默认值：true。
+ * @event {(value: string) => void} update 输入框值改变时触发
+ * @event {(value: string) => void} input 输入框值改变时触发
+ * @event {(value: string) => void} change 键盘非聚焦状态且内容改变时触发
+ * @event {() => void} clear 点击清除按钮时触发
+ * @event {(event: any) => void} focus 聚焦时触发
+ * @event {(event: any) => void} blur 失焦时触发
+ * @event {(event: any) => void} linechange 输入框行数变化时触发
+ * @event {(event: any) => void} confirm 点击完成时触发
+ * @event {(event: any) => void} keyboardheightchange 键盘高度发生变化的时候触发
+ */
 export default  _defineComponent({
   components: {
     SarIcon,
@@ -183,7 +230,8 @@ export default  _defineComponent({
     readonly: { type: Boolean, required: false },
     focused: { type: Boolean, required: false },
     minHeight: { type: String, required: false },
-    validateEvent: { type: Boolean, required: false }
+    validateEvent: { type: Boolean, required: false },
+    internalPrepend: { type: Number, required: false }
   }, defaultInputProps),
   emits: ["update:model-value", "change", "input", "clear", "focus", "blur", "linechange", "confirm", "keyboardheightchange", "click"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -302,8 +350,14 @@ export default  _defineComponent({
     const mergedPlaceholderStyle = computed(() => {
       return stringifyStyle(
         {
-          color: "var(--sar-input-placeholder-color)"
+          color: "var(--sar-input-placeholder-color)",
+          fontSize: "var(--sar-input-control-font-size)",
+          lineHeight: "var(--sar-input-control-line-height)"
         },
+        props.inputMinHeight ? {
+          minHeight: "var(--sar-input-control-input-height)",
+          lineHeight: "var(--sar-input-control-input-height)"
+        } : null,
         props.placeholderStyle
       );
     });

package/components/input/variables.scss

@@ -15,7 +15,7 @@ page,
   --sar-input-control-line-height: var(--sar-leading-normal);
   --sar-input-control-textarea-height: 168rpx;
 
-  --sar-input-placeholder-color: var(--sar-quaternary-color);
+  --sar-input-placeholder-color: var(--sar-fourth-color);
 
   --sar-input-prepend-margin-right: 16rpx;
   --sar-input-append-margin-left: 16rpx;
@@ -23,7 +23,7 @@ page,
   --sar-input-clear-margin-right: calc(var(--sar-input-padding-x) * -1);
   --sar-input-clear-padding-x: 16rpx;
   --sar-input-clear-font-size: 32rpx;
-  --sar-input-clear-color: var(--sar-quaternary-color);
+  --sar-input-clear-color: var(--sar-fourth-color);
 
   --sar-input-count-font-size: var(--sar-text-sm);
   --sar-input-count-line-height: var(--sar-leading-tight);

package/components/keyboard/README.md

@@ -0,0 +1,82 @@
+---
+nav: 组件
+title: Keyboard
+subtitle: 键盘
+group: 表单组件
+---
+
+## 介绍
+
+虚拟键盘，用于输入支付密码、验证码、车牌号等场景。
+
+## 引入
+
+```ts
+import Keyboard from 'sard-uniapp/components/keyboard/keyboard.vue'
+```
+
+## 代码演示
+
+### 数字键盘
+
+展示 0-9 的数字按键和删除按键。
+
+@code('${DEMO_PATH}/keyboard/demo/Number.vue')
+
+### 带小数点的数字键盘
+
+允许输入小数。
+
+@code('${DEMO_PATH}/keyboard/demo/Digit.vue')
+
+### 身份证键盘
+
+由 0-9 和 X 组成。
+
+@code('${DEMO_PATH}/keyboard/demo/Idcard.vue')
+
+### 随机数字键盘
+
+展示乱序的数字按键。
+
+@code('${DEMO_PATH}/keyboard/demo/Random.vue')
+
+### 车牌号键盘
+
+用于输入车牌号。
+
+@code('${DEMO_PATH}/keyboard/demo/Plate.vue')
+
+## API
+
+### KeyboardProps
+
+| 属性       | 描述           | 类型                                                   | 默认值   |
+| ---------- | -------------- | ------------------------------------------------------ | -------- |
+| root-class | 组件根元素类名 | string                                                 | -        |
+| root-style | 组件根元素样式 | StyleValue                                             | -        |
+| type       | 键盘类型       | 'number' \| 'digit' \| 'idcard' \| 'random' \| 'plate' | 'number' |
+
+### KeyboardEmits
+
+| 事件   | 描述                 | 类型                  |
+| ------ | -------------------- | --------------------- |
+| input  | 可输入按键点击时触发 | (key: string) => void |
+| delete | 点击删除按钮时触发   | () => void            |
+
+### KeyBoardExpose
+
+| 属性    | 描述                   | 类型       |
+| ------- | ---------------------- | ---------- |
+| shuffle | 重新打乱随机键盘按键   | () => void |
+| toggle  | 切换车牌号的中英文按键 | () => void |
+
+## 主题定制
+
+### CSS 变量
+
+@code('./variables.scss#variables')
+
+### CSS 变量 - 暗黑模式
+
+@code('./variables-dark.scss#variables')

package/components/keyboard/keyboard.vue

@@ -117,6 +117,13 @@ import {
   defaultKeyboardProps
 } from "./common";
 import SarIcon from "../icon/icon.vue";
+/**
+ * @property {string} rootClass 组件根元素类名，默认值：-。
+ * @property {StyleValue} rootStyle 组件根元素样式，默认值：-。
+ * @property {'number' | 'digit' | 'idcard' | 'random' | 'plate'} type 键盘类型，默认值：'number'。
+ * @event {(key: string) => void} input 可输入按键点击时触发
+ * @event {() => void} delete 点击删除按钮时触发
+ */
 export default  _defineComponent({
   components: {
     SarIcon,