stellar-ui-plus 1.18.0 → 1.18.2

package/components/ste-badge/README.md

@@ -1,12 +1,12 @@
 # Badge 徽标
 
-在右上角展示徽标数字或小红点。
+在右上角展示徽标数字或小红点
 
 ---$
 
 ### 代码演示
 
--   以下代码公共样式
+- 以下代码公共样式
 
 ```css
 .avator {
@@ -37,7 +37,7 @@
 
 通过`background`属性，设置徽标内容的背景
 
--   支持纯色、渐变色、背景图
+- 支持纯色、渐变色、背景图
 
 ```html
 <ste-badge content="1" background="rgb(19, 183, 22)">

package/components/ste-barcode/encode.ts

@@ -172,7 +172,7 @@ export function stringToCode128(text: string) {
 
     codes = codes.concat(codesForChar(b1, b2, barc.currcs))
     // code C takes 2 chars each time
-    if (barc.currcs === CODESET.C)
+    if (barc.currcs === CODESET.C)
       i++
   }
 
@@ -203,7 +203,7 @@ export function stringToCode128(text: string) {
   function perhapsCodeC(bytes: number[], codeset: number) {
     for (let i = 0; i < bytes.length; i++) {
       const b = bytes[i]
-      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
+      if ((b < 48 || b > 57) && b !== CHAR_TILDE)
         return codeset
     }
     return CODESET.C
@@ -221,13 +221,13 @@ export function stringToCode128(text: string) {
         if (chr2 === -1) {
           shifter === SET_CODEB
           currcs = CODESET.B
-        }
+        }
         else if (chr2 !== -1 && !charCompatible(chr2, currcs)) {
           // need to check ahead as well
           if (charCompatible(chr2, CODESET.A)) {
             shifter = SET_CODEA
             currcs = CODESET.A
-          }
+          }
           else {
             shifter = SET_CODEB
             currcs = CODESET.B
@@ -235,7 +235,7 @@ export function stringToCode128(text: string) {
         }
       }
       /* eslint-enable no-unused-expressions */
-    }
+    }
     else {
       // if there is a next char AND that next char is also not compatible
 
@@ -251,11 +251,11 @@ export function stringToCode128(text: string) {
             currcs = CODESET.A
             break
         }
-      }
+      }
       else {
         // no need to shift code sets, a temporary SHIFT will suffice
         shifter = SET_SHIFT
-      }
+      }
     }
 
     // ok some type of shift is nessecary
@@ -263,12 +263,12 @@ export function stringToCode128(text: string) {
       result.push(shifter)
       // result.push(codeValue(chr2));-----------------------------------
       result.push(codeValue(chr1))
-    }
+    }
     else {
       if (currcs === CODESET.C) {
         // include next as well
         result.push(codeValue(chr1, chr2))
-      }
+      }
       else {
         result.push(codeValue(chr1))
       }
@@ -284,19 +284,19 @@ function codeValue(chr1: number, chr2: any = undefined) {
   if (typeof chr2 === 'undefined')
     return chr1 >= 32 ? chr1 - 32 : chr1 + 64
   else
-    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
+    return Number.parseInt(String.fromCharCode(chr1) + String.fromCharCode(chr2))
 }
 
 function charCompatible(chr: number, codeset: number) {
   const csa = codeSetAllowedFor(chr)
-  if (csa === CODESET.ANY)
+  if (csa === CODESET.ANY)
     return true
     // if we need to change from current
-  if (csa === CODESET.AB)
+  if (csa === CODESET.AB)
     return true
-  if (csa === CODESET.A && codeset === CODESET.A)
+  if (csa === CODESET.A && codeset === CODESET.A)
     return true
-  if (csa === CODESET.B && codeset === CODESET.B)
+  if (csa === CODESET.B && codeset === CODESET.B)
     return true
   return false
 }
@@ -305,11 +305,11 @@ function codeSetAllowedFor(chr: number) {
   if (chr >= 48 && chr <= 57) {
     // 0-9
     return CODESET.ANY
-  }
+  }
   else if (chr >= 32 && chr <= 95) {
     // 0-9 A-Z
     return CODESET.AB
-  }
+  }
   else {
     // if non printable
     return chr < 32 ? CODESET.A : CODESET.B

package/components/ste-calendar/README.md

@@ -1,15 +1,15 @@
 # Calendar 日历
 
-日历组件
+此组件用于单个选择日期，范围选择日期等
 
 ---$
 
 ### 基础用法
 
--   属性`height`用于设置日历的高度，单位为`rpx`，默认`100%`
--   属性`showTitle`用于设置是否显示日历的标题，默认`true`
--   属性`title`用户设置日历的标题，默认`日期选择`
--   事件`confirm`用于监听用户点击确定按钮事件，参数为选中的日期数组
+- 属性`height`用于设置日历的高度，单位为`rpx`，默认`100%`
+- 属性`showTitle`用于设置是否显示日历的标题，默认`true`
+- 属性`title`用户设置日历的标题，默认`日期选择`
+- 事件`confirm`用于监听用户点击确定按钮事件，参数为选中的日期数组
 
 ```html
 <script setup lang="ts">
@@ -63,8 +63,8 @@
 
 #### 多个日期
 
--   属性`mode`用于设置日历的模式，可选值`single`、`multiple`、`range`，默认`single`
-    -   设置为`multiple`可以选择多个日期
+- 属性`mode`用于设置日历的模式，可选值`single`、`multiple`、`range`，默认`single`
+    - 设置为`multiple`可以选择多个日期
 
 ```html
 <ste-button @click="show2 = true">多个日期</ste-button>
@@ -77,8 +77,8 @@
 
 #### 日期范围
 
--   属性`mode`用于设置日历的模式，可选值`single`、`multiple`、`range`，默认`single`
-    -   设置为`single`可以选择日期范围
+- 属性`mode`用于设置日历的模式，可选值`single`、`multiple`、`range`，默认`single`
+    - 设置为`single`可以选择日期范围
 
 ```html
 <ste-button @click="show3 = true">日期范围</ste-button>
@@ -91,7 +91,7 @@
 
 #### 自定义主题色
 
--   属性`color`可以设置日历的主题色，包括周末日期颜色、日期选中颜色、日期范围选中颜色、确定按钮颜色
+- 属性`color`可以设置日历的主题色，包括周末日期颜色、日期选中颜色、日期范围选中颜色、确定按钮颜色
 
 ```html
 <ste-button @click="show4 = true">自定义主题色</ste-button>
@@ -104,9 +104,9 @@
 
 #### 自定义文案
 
--   属性`title`可以设置标题文案
--   属性`startText`可以设置开始日期的文案，`mode`值为`range`时生效
--   属性`endText`可以设置结束日期的文案，`mode`值为`range`时生效
+- 属性`title`可以设置标题文案
+- 属性`startText`可以设置开始日期的文案，`mode`值为`range`时生效
+- 属性`endText`可以设置结束日期的文案，`mode`值为`range`时生效
 
 ```html
 <ste-button @click="show5 = true">自定义文案</ste-button>
@@ -119,8 +119,8 @@
 
 #### 日期最大范围
 
--   属性`minDate`可以设置日期的最小可选范围
--   属性`maxDate`可以设置日期的最大可选范围
+- 属性`minDate`可以设置日期的最小可选范围
+- 属性`maxDate`可以设置日期的最大可选范围
 
 ```html
 <ste-button @click="show6 = true">日期最大范围</ste-button>
@@ -133,7 +133,7 @@
 
 #### 多选数量限制
 
--   属性`maxCount`用于设置多选模式下最多可选的日期数量
+- 属性`maxCount`用于设置多选模式下最多可选的日期数量
 
 ```html
 <ste-button @click="show7 = true">多选数量限制</ste-button>
@@ -146,9 +146,9 @@
 
 #### 多选数量限制
 
--   属性`maxRange`用于设置范围模式下最多可选的日期数量
--   属性`showRangePrompt`用于设置范围模式下是否显示超出数量时的提示文案
--   属性`rangePrompt`用于设置范围模式下超出数量时的提示文案
+- 属性`maxRange`用于设置范围模式下最多可选的日期数量
+- 属性`showRangePrompt`用于设置范围模式下是否显示超出数量时的提示文案
+- 属性`rangePrompt`用于设置范围模式下超出数量时的提示文案
 
 ```html
 <ste-button @click="show8 = true">范围数量限制</ste-button>
@@ -161,7 +161,7 @@
 
 #### 默认选择日期
 
--   属性`list`用于设置默认选择的日期
+- 属性`list`用于设置默认选择的日期
 
 ```html
 <ste-button @click="show9 = true">默认选择日期</ste-button>
@@ -174,7 +174,7 @@
 
 #### 默认展示月份
 
--   属性`defaultMonth`用于设置默认展示的月份，因为弹窗中的日历不在文档流，无法设置滚动距离，所以需要在弹窗动画结束之后手动设置默认展示的月份
+- 属性`defaultMonth`用于设置默认展示的月份，因为弹窗中的日历不在文档流，无法设置滚动距离，所以需要在弹窗动画结束之后手动设置默认展示的月份
 
 ```html
 <ste-button @click="show10 = true">默认展示月份</ste-button>
@@ -187,8 +187,8 @@
 
 #### 隐藏确定按钮
 
--   属性`showConfirm`用于设置是否显示确定按钮
--   事件`select`用于监听选择日期的事件
+- 属性`showConfirm`用于设置是否显示确定按钮
+- 事件`select`用于监听选择日期的事件
 
 ```html
 <ste-button @click="show11 = true">隐藏确定按钮</ste-button>
@@ -201,7 +201,7 @@
 
 #### 只读
 
--   属性`readonly`用于设置是否只读
+- 属性`readonly`用于设置是否只读
 
 ```html
 <ste-button @click="show12 = true">只读</ste-button>
@@ -214,7 +214,7 @@
 
 #### 隐藏背景月份
 
--   属性`showMark`用于设置是否显示背景月份
+- 属性`showMark`用于设置是否显示背景月份
 
 ```html
 <ste-button @click="show13 = true">隐藏背景月份</ste-button>
@@ -224,6 +224,7 @@
     </div>
 </ste-popup>
 ```
+
 #### 自定义组件
 
 - 属性`weekendColor`用于设置周末日期颜色
@@ -232,33 +233,32 @@
 
 ```html
 <script setup>
-import { ref, reactive } from 'vue';
-import type { SignType } from '@/uni_modules/stellar-ui-plus/components/ste-calendar/date';
-import utils from '@/uni_modules/stellar-ui-plus/utils/utils';
-const defaultDate = ref(utils.dayjs().format('YYYY-MM'));
-const signs = reactive<{ [key: string]: SignType }>({
-    // 标记今天
-    [utils.dayjs().format('YYYY-MM-DD')]: [
-        { content: 'XXXXX', className: 'test-signs' },
-        { content: 'XXXXX', className: 'test-signs' },
-        { content: 'XXXXX', className: 'test-signs' },
-    ],
-    // 标记明天
-    [utils.dayjs(Date.now() + 1000 * 60 * 60 * 24).format('YYYY-MM-DD')]: [
-        { content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
-        { content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
-    ],
-});
+    import { ref, reactive } from 'vue';
+    import type { SignType } from '@/uni_modules/stellar-ui-plus/components/ste-calendar/date';
+    import utils from '@/uni_modules/stellar-ui-plus/utils/utils';
+    const defaultDate = ref(utils.dayjs().format('YYYY-MM'));
+    const signs = reactive<{ [key: string]: SignType }>({
+        // 标记今天
+        [utils.dayjs().format('YYYY-MM-DD')]: [
+            { content: 'XXXXX', className: 'test-signs' },
+            { content: 'XXXXX', className: 'test-signs' },
+            { content: 'XXXXX', className: 'test-signs' },
+        ],
+        // 标记明天
+        [utils.dayjs(Date.now() + 1000 * 60 * 60 * 24).format('YYYY-MM-DD')]: [
+            { content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
+            { content: 'XXXXX', style: { color: '#666', background: '#f5f5f5' } },
+        ],
+    });
 </script>
 <template>
     <ste-select mode="month" v-model="defaultDate" width="200" options-width="420" border-color="transparency">
         <template v-slot:icon>
             <ste-icon code="&#xe699;"></ste-icon>
-    </template>
-</ste-select>
+        </template>
+    </ste-select>
 
-<ste-calendar @select="handleConfirm" weekendColor="#999" color="#09f" :signs="signs" :defaultDate="defaultDate"
-    :monthCount="1" :showConfirm="false" :showTitle="false" />
+    <ste-calendar @select="handleConfirm" weekendColor="#999" color="#09f" :signs="signs" :defaultDate="defaultDate" :monthCount="1" :showConfirm="false" :showTitle="false" />
 </template>
 ```
 

package/components/ste-checkbox/README.md

@@ -1,6 +1,6 @@
 # Checkbox 复选框
 
-在一组备选项中进行多选。
+在一组备选项中进行多选
 
 ---$
 
@@ -187,9 +187,9 @@
 
 #### 自定义文本
 
--   通过设置 `textSize` 属性可以自定义文本的大小，单位`rpx`，默认`28`。
--   通过设置 `textInactiveColor` 属性可以自定义文本未选中颜色，默认`#000000`。
--   通过设置 `textActiveColor` 属性可以自定义文本选中颜色，默认`#000000`。
+- 通过设置 `textSize` 属性可以自定义文本的大小，单位`rpx`，默认`28`。
+- 通过设置 `textInactiveColor` 属性可以自定义文本未选中颜色，默认`#000000`。
+- 通过设置 `textActiveColor` 属性可以自定义文本选中颜色，默认`#000000`。
 
 ```
 <ste-checkbox v-model="val.value14" textSize="50" textInactiveColor="green" textActiveColor="#d276a3">
@@ -199,8 +199,8 @@
 
 #### 回调事件
 
--   `click` 点击复选框时触发的事件（可拦截change事件），`value`：改变后的分值,`allowStop`：允许阻止后续的事件触发,：`resolve`：后续的事件执行。
--   `change` 当绑定值变化时触发的事件，`value`:改变后的分值。
+- `click` 点击复选框时触发的事件（可拦截change事件），`value`：改变后的分值,`allowStop`：允许阻止后续的事件触发,：`resolve`：后续的事件执行。
+- `change` 当绑定值变化时触发的事件，`value`:改变后的分值。
 
 ```
 <ste-checkbox v-model="val.value16" @click="click1" @change="change">复选框</ste-checkbox>

package/components/ste-dropdown-menu/README.md

@@ -1,12 +1,14 @@
 # DropdownMenu 下拉菜单
 
+该组件一般用于向下展开菜单，同时可切换多个选项卡的场景
+
 ---$
 
 ### 代码演示
 
 #### 基础使用
 
--   可以通过`v-model`绑定选中值
+- 可以通过`v-model`绑定选中值
 
 ```html
 <view>
@@ -27,8 +29,8 @@
 
 #### 按钮类型
 
--   默认是列表形式展示选项
--   当`type`值为`round`时选项为按钮形式
+- 默认是列表形式展示选项
+- 当`type`值为`round`时选项为按钮形式
     > > > 推荐选项名称字数小于6个字时使用按钮类型，过长的字会导致截断
 
 ```html

package/components/ste-icon/ste-icon.vue

@@ -50,7 +50,7 @@ function handleClick(event: any) {
 </script>
 
 <template>
-    <view class="ste-icon-root" :style="[cmpCssVar]" @click="handleClick">{{ cmpCode }}</view>
+    <view class="ste-icon-root" :style="[cmpCssVar]" @click="handleClick" data-test="icon">{{ cmpCode }}</view>
 </template>
 
 <style lang="scss" scoped>

package/components/ste-image/README.md

@@ -1,6 +1,6 @@
 # Image 图片
 
-图片组件，对原生`image`组件进行了扩展。
+图片组件，对原生`image`组件进行了扩展
 
 ---$
 
@@ -8,10 +8,10 @@
 
 #### 基础用法
 
--   通过`src`属性设置图片地址
--   通过`width`属性设置图片宽度
--   通过`height`属性设置图片高度
--   通过`mode`属性设置图片的裁剪和拉伸
+- 通过`src`属性设置图片地址
+- 通过`width`属性设置图片宽度
+- 通过`height`属性设置图片高度
+- 通过`mode`属性设置图片的裁剪和拉伸
 
 ```html
 <ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" width="200" height="200" />
@@ -23,7 +23,7 @@
 
 #### 圆角
 
--   通过`radius`属性设置图片圆角属性
+- 通过`radius`属性设置图片圆角属性
 
 ```html
 <ste-image src="https://image.whzb.com/chain/StellarUI/图片.jpg" radius="50%" width="200" height="200" />
@@ -31,7 +31,7 @@
 
 #### 加载效果
 
--   通过`hiddenLoading`关闭图片加载中占位标识
+- 通过`hiddenLoading`关闭图片加载中占位标识
 
 ```html
 <script setup lang="ts">
@@ -61,7 +61,7 @@
 
 #### 加载失败
 
--   通过`hiddenError`隐藏图片加载失败提示
+- 通过`hiddenError`隐藏图片加载失败提示
 
 ```html
 <script setup lang="ts">
@@ -91,8 +91,8 @@
 
 #### 具名插槽
 
--   通过`loading`具名插槽可以自定义加载中内容
--   通过`error`具名插槽可以自定义加载失败内容
+- 通过`loading`具名插槽可以自定义加载中内容
+- 通过`error`具名插槽可以自定义加载失败内容
 
 ```html
 <ste-image :src="errorUrl" width="200" height="200">

package/components/ste-index-list/README.md

@@ -1,6 +1,6 @@
 # IndexList 索引列表
 
-通过折叠面板收纳内容区域。
+通过折叠面板收纳内容区域
 
 ---$
 
@@ -44,11 +44,11 @@
 
 #### 基础用法
 
--   标签`ste-index-list`为外层盒子
-    -   事件`clickItem`监听点击索引分组事件
--   标签`ste-index-item`为索引分组
-    -   属性`title`为当前索引分组标题
-    -   属性`list`为当前索引分组内容列表
+- 标签`ste-index-list`为外层盒子
+    - 事件`clickItem`监听点击索引分组事件
+- 标签`ste-index-item`为索引分组
+    - 属性`title`为当前索引分组标题
+    - 属性`list`为当前索引分组内容列表
 
 ```html
 <ste-index-list @clickItem="onClickItem">
@@ -63,12 +63,12 @@
 
 #### 自定义颜色/标题/内容
 
--   标签`ste-index-list`为外层盒子
-    -   属性`inactiveColor`为索引分组标题未选中颜色
-    -   属性`activeColor`为索引分组标题选中颜色
--   标签`ste-index-item`为索引分组
-    -   插槽`title`为当前索引分组标题
-    -   插槽`default`为当前索引分组内容列表
+- 标签`ste-index-list`为外层盒子
+    - 属性`inactiveColor`为索引分组标题未选中颜色
+    - 属性`activeColor`为索引分组标题选中颜色
+- 标签`ste-index-item`为索引分组
+    - 插槽`title`为当前索引分组标题
+    - 插槽`default`为当前索引分组内容列表
 
 ```html
 <ste-index-list inactiveColor="#0f0" activeColor="#f0f">

package/components/ste-input/README.md

@@ -1,5 +1,6 @@
 # Input 输入框
 
+用于承载用户信息录入的文本框，常用于表单、对话框等场景，对不同内容的信息录入，可拓展形成多种信息录入形式
 ---$
 
 ### 代码演示

package/components/ste-loading/README.md

@@ -1,6 +1,6 @@
 # Loading 加载动画
 
-加载动画，用于表示加载中的过渡状态。
+加载动画，用于表示加载中的过渡状态
 
 ---$
 
@@ -10,8 +10,8 @@
 
 通过 `type`设置加载动画类型，默认为类型`1`
 
--   `1`：逐渐减淡的颜色为主色的透明度变化 透明度以10%的差距逐渐递减
--   `2`：动态转圈展示
+- `1`：逐渐减淡的颜色为主色的透明度变化 透明度以10%的差距逐渐递减
+- `2`：动态转圈展示
 
 ```html
 <ste-loading></ste-loading>
@@ -56,8 +56,8 @@
 
 ### 自定义文本样式
 
--   通过 `textSize`设置文本大小，单位rpx，默认为`28`
--   通过 `textColor`设置文本颜色，默认和图标颜色同步
+- 通过 `textSize`设置文本大小，单位rpx，默认为`28`
+- 通过 `textColor`设置文本颜色，默认和图标颜色同步
 
 ```html
 <ste-loading :textSize="50" textColor="#0090FF">加载中...</ste-loading>

package/components/ste-loading/ste-loading.vue

@@ -46,7 +46,7 @@ const cmpText = computed(() => {
 </script>
 
 <template>
-    <view class="ste-loading-root" :style="[cmpStyle]">
+    <view class="ste-loading-root" :style="[cmpStyle]" data-test="loading">
         <view :class="'loading ' + 'loading-type-' + type" :style="[cmpLoadinStyle]">
             <block v-if="type == 1">
                 <i v-for="(item, index) in cmpCount" :key="index" class="i" :style="{ transform: `rotate(${item * 40 + 80}deg)`, opacity: item == 0 ? 1 : (item + 1) / 10 }"></i>

package/components/ste-message-box/README.md

@@ -1,6 +1,6 @@
 # MessageBox 弹框
 
-模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
+模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容
 
 ---$
 
@@ -88,8 +88,8 @@ function click() {
 
 #### 带图标
 
--   内置三种图标类型：`info`、`success`、`error`
--   当显示图标时，内容(`content`)会失效，只显示标题(`title`)
+- 内置三种图标类型：`info`、`success`、`error`
+- 当显示图标时，内容(`content`)会失效，只显示标题(`title`)
 
 ```javascript
 function msgBoxIcon1() {

package/components/ste-notice-bar/README.md

@@ -1,6 +1,6 @@
 # NoticeBar 公告栏
 
-用于循环播放展示一组消息通知。
+用于循环播放展示一组消息通知
 
 ---$
 
@@ -25,9 +25,9 @@ let list2 = ref(['第一条:111', '第二条:222', '第三条:333', '第四条:4
 
 #### 自定义样式
 
--   通过 `color` 属性设置文字颜色，默认为 `#000000`。
--   通过 `background` 属性设置背景，默认为 `#ffffff`。
--   通过 `width` 属性设置宽度，默认为 `100%`，继承父属性。
+- 通过 `color` 属性设置文字颜色，默认为 `#000000`。
+- 通过 `background` 属性设置背景，默认为 `#ffffff`。
+- 通过 `width` 属性设置宽度，默认为 `100%`，继承父属性。
 
 ```
 <ste-notice-bar :list="list" background="#FBF8DC" color="red" :width="400"></ste-notice-bar>

package/components/ste-popup/README.md

@@ -1,5 +1,7 @@
 # Popup 弹出层
 
+弹出层容器，用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义
+
 ---$
 
 ### 代码演示
@@ -37,8 +39,8 @@
 
 #### 大小
 
--   默认弹出层的内容区域是没有高度的，如果不设置宽高则会由内容撑开
--   支持具体数值(单位为rpx)、百分比
+- 默认弹出层的内容区域是没有高度的，如果不设置宽高则会由内容撑开
+- 支持具体数值(单位为rpx)、百分比
 
 ```html
 <ste-popup v-model:show="sizeShow1" width="300" height="500">
@@ -70,7 +72,7 @@
 
 #### 圆角
 
--   若组件圆角不满足需求，可以不设置圆角，在插槽内容中自己设置圆角
+- 若组件圆角不满足需求，可以不设置圆角，在插槽内容中自己设置圆角
 
 ```html
 <ste-popup v-model:show="roundShow" width="300" height="300" round>

package/components/ste-progress/README.md

@@ -1,6 +1,6 @@
 # Progress 进度条
 
-进度条组件
+用于展示操作进度，告知用户当前状态和预期
 
 ---$