stellar-ui-plus 1.18.1 → 1.18.3

package/components/ste-animate/README.md

@@ -9,30 +9,32 @@
 #### 基础使用
 
 ```html
-<ste-animate type="shakeX" loop>
-    <ste-button>shakeX-横向</ste-button>
-</ste-animate>
-<ste-animate type="shakeY" loop>
-    <ste-button>shakeY-竖向</ste-button>
-</ste-animate>
-<ste-animate type="ripple" loop>
-    <ste-button>ripple-心跳</ste-button>
-</ste-animate>
-<ste-animate type="breath" loop>
-    <ste-button>breath-呼吸灯</ste-button>
-</ste-animate>
-<ste-animate type="twinkle" loop>
-    <ste-button>twinkle-水波</ste-button>
-</ste-animate>
-<ste-animate type="flicker" loop>
-    <ste-button>flicker-擦亮</ste-button>
-</ste-animate>
-<ste-animate type="jump" loop>
-    <ste-button>jump-跳跃</ste-button>
-</ste-animate>
-<ste-animate type="float" loop>
-    <ste-button>float-漂浮</ste-button>
-</ste-animate>
+<template>
+    <ste-animate type="shakeX" loop>
+        <ste-button>shakeX-横向</ste-button>
+    </ste-animate>
+    <ste-animate type="shakeY" loop>
+        <ste-button>shakeY-竖向</ste-button>
+    </ste-animate>
+    <ste-animate type="ripple" loop>
+        <ste-button>ripple-心跳</ste-button>
+    </ste-animate>
+    <ste-animate type="breath" loop>
+        <ste-button>breath-呼吸灯</ste-button>
+    </ste-animate>
+    <ste-animate type="twinkle" loop>
+        <ste-button>twinkle-水波</ste-button>
+    </ste-animate>
+    <ste-animate type="flicker" loop>
+        <ste-button>flicker-擦亮</ste-button>
+    </ste-animate>
+    <ste-animate type="jump" loop>
+        <ste-button>jump-跳跃</ste-button>
+    </ste-animate>
+    <ste-animate type="float" loop>
+        <ste-button>float-漂浮</ste-button>
+    </ste-animate>
+</template>
 ```
 
 #### 点击触发
@@ -40,18 +42,20 @@
 设置`action`为`click`
 
 ```html
-<ste-animate type="slide-right" action="click">
-    <ste-button :stopPropagation="false">由右向左划入</ste-button>
-</ste-animate>
-<ste-animate type="slide-left" action="click">
-    <ste-button :stopPropagation="false">由左向右划入</ste-button>
-</ste-animate>
-<ste-animate type="slide-top" action="click">
-    <ste-button :stopPropagation="false">由上向下划入</ste-button>
-</ste-animate>
-<ste-animate type="slide-bottom" action="click">
-    <ste-button :stopPropagation="false">由下向上划入</ste-button>
-</ste-animate>
+<template>
+    <ste-animate type="slide-right" action="click">
+        <ste-button :stopPropagation="false">由右向左划入</ste-button>
+    </ste-animate>
+    <ste-animate type="slide-left" action="click">
+        <ste-button :stopPropagation="false">由左向右划入</ste-button>
+    </ste-animate>
+    <ste-animate type="slide-top" action="click">
+        <ste-button :stopPropagation="false">由上向下划入</ste-button>
+    </ste-animate>
+    <ste-animate type="slide-bottom" action="click">
+        <ste-button :stopPropagation="false">由下向上划入</ste-button>
+    </ste-animate>
+</template>
 ```
 
 #### 属性触发

package/components/ste-animate/ste-animate.vue

@@ -57,7 +57,7 @@ function animated() {
 </script>
 
 <template>
-    <view class="ste-animate-root" :class="[cmpRootClass]" :style="[cmpRootStyle]" @click="handleClick">
+    <view class="ste-animate-root" :class="[cmpRootClass]" :style="[cmpRootStyle]" @click="handleClick" data-test="animate">
         <slot></slot>
     </view>
 </template>

package/components/ste-badge/README.md

@@ -6,31 +6,30 @@
 
 ### 代码演示
 
-- 以下代码公共样式
-
-```css
-.avator {
-    height: 80rpx;
-    width: 80rpx;
-    border-radius: 8rpx;
-    background-color: #f2f3f5;
-}
-```
-
 #### 徽标内容
 
 通过`content`属性，设置子元素的右上角的徽标
 
 ```html
-<ste-badge content="1">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="99+">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="hot">
-    <view class="avator"></view>
-</ste-badge>
+<template>
+    <ste-badge content="1">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="99+">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="hot">
+        <view class="avator"></view>
+    </ste-badge>
+</template>
+<style>
+    .avator {
+        height: 80rpx;
+        width: 80rpx;
+        border-radius: 8rpx;
+        background-color: #f2f3f5;
+    }
+</style>
 ```
 
 #### 背景
@@ -40,15 +39,25 @@
 - 支持纯色、渐变色、背景图
 
 ```html
-<ste-badge content="1" background="rgb(19, 183, 22)">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="99+" background="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="" showZero background="https://image.whzb.com/chain/StellarUI/image/fire.png">
-    <view class="avator"></view>
-</ste-badge>
+<template>
+    <ste-badge content="1" background="rgb(19, 183, 22)">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="99+" background="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="" showZero background="https://image.whzb.com/chain/StellarUI/image/fire.png">
+        <view class="avator"></view>
+    </ste-badge>
+</template>
+<style>
+    .avator {
+        height: 80rpx;
+        width: 80rpx;
+        border-radius: 8rpx;
+        background-color: #f2f3f5;
+    }
+</style>
 ```
 
 #### 小红点
@@ -56,12 +65,22 @@
 通过`showDot`属性，设置是否显示小红点
 
 ```html
-<ste-badge showDot>
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge showDot background="rgb(19, 183, 22)">
-    <view class="avator"></view>
-</ste-badge>
+<template>
+    <ste-badge showDot>
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge showDot background="rgb(19, 183, 22)">
+        <view class="avator"></view>
+    </ste-badge>
+</template>
+<style>
+    .avator {
+        height: 80rpx;
+        width: 80rpx;
+        border-radius: 8rpx;
+        background-color: #f2f3f5;
+    }
+</style>
 ```
 
 #### 徽标位置
@@ -69,18 +88,28 @@
 通过`position`属性，设置徽标的位置
 
 ```html
-<ste-badge content="1">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="1" position="topLeft">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="1" position="bottomLeft">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="1" position="bottomRight">
-    <view class="avator"></view>
-</ste-badge>
+<template>
+    <ste-badge content="1">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="1" position="topLeft">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="1" position="bottomLeft">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="1" position="bottomRight">
+        <view class="avator"></view>
+    </ste-badge>
+</template>
+<style>
+    .avator {
+        height: 80rpx;
+        width: 80rpx;
+        border-radius: 8rpx;
+        background-color: #f2f3f5;
+    }
+</style>
 ```
 
 #### 偏移
@@ -88,18 +117,28 @@
 当设置了`offsetX`或`offsetY`值时，徽标会基于当前设置徽标位置(`position`)往中心点进行偏移
 
 ```html
-<ste-badge content="1" :offsetX="5" :offsetY="5">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="1" position="topLeft" :offsetX="5" :offsetY="5">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="1" position="bottomLeft" :offsetX="5" :offsetY="5">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge content="1" position="bottomRight" :offsetX="5" :offsetY="5">
-    <view class="avator"></view>
-</ste-badge>
+<template>
+    <ste-badge content="1" :offsetX="5" :offsetY="5">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="1" position="topLeft" :offsetX="5" :offsetY="5">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="1" position="bottomLeft" :offsetX="5" :offsetY="5">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge content="1" position="bottomRight" :offsetX="5" :offsetY="5">
+        <view class="avator"></view>
+    </ste-badge>
+</template>
+<style>
+    .avator {
+        height: 80rpx;
+        width: 80rpx;
+        border-radius: 8rpx;
+        background-color: #f2f3f5;
+    }
+</style>
 ```
 
 #### 为0时是否显示徽标
@@ -107,9 +146,19 @@
 当`content`为`Number`类型时并且值等于`0`时，默认不会显示，如果`showZero`为`true`，则会显示
 
 ```html
-<ste-badge :content="0" showZero>
-    <view class="avator"></view>
-</ste-badge>
+<template>
+    <ste-badge :content="0" showZero>
+        <view class="avator"></view>
+    </ste-badge>
+</template>
+<style>
+    .avator {
+        height: 80rpx;
+        width: 80rpx;
+        border-radius: 8rpx;
+        background-color: #f2f3f5;
+    }
+</style>
 ```
 
 #### 最大值
@@ -117,12 +166,22 @@
 当`content`为`Number`类型时并且值大于`max`时，会显示`{{max}}+`，`max`默认值为`99`
 
 ```html
-<ste-badge :content="100">
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge :content="99">
-    <view class="avator"></view>
-</ste-badge>
+<template>
+    <ste-badge :content="100">
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge :content="99">
+        <view class="avator"></view>
+    </ste-badge>
+</template>
+<style>
+    .avator {
+        height: 80rpx;
+        width: 80rpx;
+        border-radius: 8rpx;
+        background-color: #f2f3f5;
+    }
+</style>
 ```
 
 #### 自定义内容
@@ -130,18 +189,28 @@
 通过`content`插槽，自定义徽标的内容
 
 ```html
-<ste-badge>
-    <template #content>
-        <ste-icon code="&#xe676;" size="18"></ste-icon>
-    </template>
-    <view class="avator"></view>
-</ste-badge>
-<ste-badge>
-    <template #content>
-        <ste-icon code="&#xe67b;" size="12"></ste-icon>
-    </template>
-    <view class="avator"></view>
-</ste-badge>
+<template>
+    <ste-badge>
+        <template #content>
+            <ste-icon code="&#xe676;" size="18"></ste-icon>
+        </template>
+        <view class="avator"></view>
+    </ste-badge>
+    <ste-badge>
+        <template #content>
+            <ste-icon code="&#xe67b;" size="12"></ste-icon>
+        </template>
+        <view class="avator"></view>
+    </ste-badge>
+</template>
+<style>
+    .avator {
+        height: 80rpx;
+        width: 80rpx;
+        border-radius: 8rpx;
+        background-color: #f2f3f5;
+    }
+</style>
 ```
 
 ---$

package/components/ste-badge/ste-badge.vue

@@ -57,7 +57,7 @@ const cmpIsSmall = computed(() => {
 </script>
 
 <template>
-    <view class="ste-badge-root" :style="[rootStyle as any, { display: isInline ? 'inline-block' : 'block' }]">
+    <view class="ste-badge-root" data-test="badge" :style="[rootStyle as any, { display: isInline ? 'inline-block' : 'block' }]">
         <view class="ste-badge-content" :style="[cmpContentStyle]" :class="'ste-badge-' + position" v-if="showDot || cmpShowContent || $slots.content">
             <view v-if="showDot" class="dot-box" />
             <view v-else class="content-box" :class="{ 'no-padding': $slots.content || cmpIsSmall }">

package/components/ste-barcode/README.md

@@ -9,13 +9,17 @@
 #### 基础使用
 
 ```html
-<ste-barcode content="123456abc123" />
+<template>
+    <ste-barcode content="123456abc123" />
+</template>
 ```
 
 #### 自定义颜色
 
 ```html
-<ste-barcode content="123456abc123" foreground="#c11" background="#dad" />
+<template>
+    <ste-barcode content="123456abc123" foreground="#c11" background="#dad" />
+</template>
 ```
 
 ---$

package/components/ste-barcode/ste-barcode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import utils from '../../utils/utils';
-import { ref, onMounted, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
+import { onMounted, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import propsData from './props';
 import { PATTERNS, stringToCode128 } from './encode';
 
@@ -69,6 +69,10 @@ const patternsToBinary = (codes: number[]) => {
 
 // H5环境下的绘制方法
 const drawBarcodeH5 = (context: UniApp.CanvasContext) => {
+    // 测试环境屏蔽uni
+    if (process.env.NODE_ENV == 'test') {
+        return;
+    }
     if (!props.content) return;
     // 生成编码数据
     const codes = stringToCode128(props.content);

package/components/ste-button/README.md

@@ -11,10 +11,12 @@
 通过`mode`设置按钮的大小，默认值是`200`
 
 ```html
-<ste-button :mode="400">超大按钮</ste-button>
-<ste-button :mode="300">大按钮</ste-button>
-<ste-button>中按钮</ste-button>
-<ste-button :mode="100">小按钮</ste-button>
+<template>
+    <ste-button :mode="400">超大按钮</ste-button>
+    <ste-button :mode="300">大按钮</ste-button>
+    <ste-button>中按钮</ste-button>
+    <ste-button :mode="100">小按钮</ste-button>
+</template>
 ```
 
 #### 文本颜色
@@ -22,7 +24,9 @@
 通过`color`设置字体颜色
 
 ```html
-<ste-button :color="'#000000'">文本颜色按钮</ste-button>
+<template>
+    <ste-button :color="'#000000'">文本颜色按钮</ste-button>
+</template>
 ```
 
 #### 背景
@@ -30,9 +34,11 @@
 通过`background`设置背景，支持纯颜色、背景图、渐变色
 
 ```html
-<ste-button background="#ff1e19">按钮</ste-button>
-<ste-button background="https://image.whzb.com/chain/StellarUI/image/精选会员瓷片.png">背景图</ste-button>
-<ste-button background="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">渐变色</ste-button>
+<template>
+    <ste-button background="#ff1e19">按钮</ste-button>
+    <ste-button background="https://image.whzb.com/chain/StellarUI/image/精选会员瓷片.png">背景图</ste-button>
+    <ste-button background="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">渐变色</ste-button>
+</template>
 ```
 
 #### 边框颜色
@@ -40,20 +46,24 @@
 通过`borderColor`设置边框颜色，默认值是`#ffffff`
 
 ```html
-<ste-button borderColor="#ff1e19">文本颜色按钮</ste-button>
+<template>
+    <ste-button borderColor="#ff1e19">文本颜色按钮</ste-button>
+</template>
 ```
 
 #### 宽度
 
 通过`width`设置宽度，默认值是`auto`
 
--   设置值为`100%`，填满父容器
--   设置具体值时，按具体数值的宽度，单位是rpx
+- 设置值为`100%`，填满父容器
+- 设置具体值时，按具体数值的宽度，单位是rpx
 
 ```html
-<ste-button width="100%">宽度填满</ste-button>
-<ste-button width="500">自定义宽度-500rpx</ste-button>
-<ste-button>自适应宽度</ste-button>
+<template>
+    <ste-button width="100%">宽度填满</ste-button>
+    <ste-button width="500">自定义宽度-500rpx</ste-button>
+    <ste-button>自适应宽度</ste-button>
+</template>
 ```
 
 #### 圆角按钮
@@ -61,8 +71,10 @@
 通过`round`设置按钮是否为圆角，默认值是`true`
 
 ```html
-<ste-button>圆角按钮</ste-button>
-<ste-button :round="false">非圆角按钮</ste-button>
+<template>
+    <ste-button>圆角按钮</ste-button>
+    <ste-button :round="false">非圆角按钮</ste-button>
+</template>
 ```
 
 #### 禁止按钮
@@ -70,35 +82,43 @@
 通过`disabled`设置按钮是否禁止，默认值是`false`
 
 ```html
-<ste-button disabled>禁止按钮</ste-button>
+<template>
+    <ste-button disabled>禁止按钮</ste-button>
+</template>
 ```
 
 #### 加载中
 
 通过`loading`设置是否加载中，默认值是`false`
 
--   `loading`值是`true`时不允许点击，且按钮内容会变成`加载中......`
+- `loading`值是`true`时不允许点击，且按钮内容会变成`加载中......`
 
 ```html
-<ste-button loading>按钮</ste-button>
+<template>
+    <ste-button loading>按钮</ste-button>
+</template>
 ```
 
 #### 插槽
 
 ```html
-<ste-button>
-    <text style="display: inline-block">
-        <ste-icon code="&#xe68f;" :size="32" :color="'#ffffff'" :marginRight="8"></ste-icon>
-    </text>
-    <text>购卡</text>
-</ste-button>
-<ste-button>提交订单</ste-button>
+<template>
+    <ste-button>
+        <text style="display: inline-block">
+            <ste-icon code="&#xe68f;" :size="32" :color="'#ffffff'" :marginRight="8"></ste-icon>
+        </text>
+        <text>购卡</text>
+    </ste-button>
+    <ste-button>提交订单</ste-button>
+</template>
 ```
 
 #### 超长文字
 
 ```html
-<ste-button width="100%">提交-按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮</ste-button>
+<template>
+    <ste-button width="100%">提交-按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮</ste-button>
+</template>
 ```
 
 ---$

package/components/ste-button/ste-button.vue

@@ -155,6 +155,7 @@ function handleClick(e: any) {
         @chooseavatar="emits('chooseavatar', $event)"
         @getAuthorize="emits('getAuthorize', $event)"
         @followLifestyle="emits('followLifestyle', $event)"
+        data-test="button"
     >
         <view class="btn-box">
             <text v-if="loading">加载中.......</text>
@@ -181,6 +182,7 @@ function handleClick(e: any) {
         @chooseavatar="emits('chooseavatar', $event)"
         @getAuthorize="emits('getAuthorize', $event)"
         @followLifestyle="emits('followLifestyle', $event)"
+        data-test="button"
     >
         <view class="btn-box">
             <text v-if="loading">加载中.......</text>
@@ -247,29 +249,5 @@ function handleClick(e: any) {
             opacity: 0.15;
         }
     }
-
-    &-100 {
-        padding: 0 30rpx;
-        height: 48rpx;
-        font-size: var(--font-size-24, 24rpx);
-    }
-
-    &-200 {
-        padding: 0 40rpx;
-        height: 68rpx;
-        font-size: var(--font-size-28, 28rpx);
-    }
-
-    &-300 {
-        padding: 0 72rpx;
-        height: 80rpx;
-        font-size: var(--font-size-32, 32rpx);
-    }
-
-    &-400 {
-        padding: 0 72rpx;
-        height: 96rpx;
-        font-size: var(--font-size-36, 36rpx);
-    }
 }
 </style>