stellar-ui-v2 1.36.1 → 1.37.0

package/README.md

@@ -1,28 +1,28 @@
-<p align="center">
-    <img alt="logo" src="https://image.whzb.com/chain/StellarUI/logo.png" width="200">
-</p>
-<h1 align="center">StellarUI</h1>
-
-<p align="center">📱 一个基于vue2构建，打造的uni-app组件库</p>
-
-<p align="center">
-  🚀 <a href="https://stellar-ui.intecloud.com.cn/pc/index/index">文档网站</a>&nbsp;
-
-## ✨ 特性
-
+<p align="center">
+    <img alt="logo" src="https://image.whzb.com/chain/StellarUI/logo.png" width="200">
+</p>
+<h1 align="center">StellarUI</h1>
+
+<p align="center">📱 一个基于vue2构建，打造的uni-app组件库</p>
+
+<p align="center">
+  🚀 <a href="https://stellar-ui.intecloud.com.cn/pc/index/index">文档网站</a>&nbsp;
+
+## ✨ 特性
+
 - 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、H5.
 - 🚀 40+ 个高质量组件，覆盖移动端主流场景.
 - 📖 提供丰富的文档和组件示例.
-- 🎨 支持修改 CSS 变量实现主题定制.
-
-## 📱 预览
-
-扫描二维码访问演示，注意：因微信审核机制限制，当前的微信小程序示例可能不是最新版本，可以 clone 代码到本地预览。
-
-<p style="display:flex;gap:24px">
-<img src="https://image.whzb.com/chain/StellarUI/%E5%BE%AE%E4%BF%A1.jpg" width="200" height="200"/>
-<img src="https://image.whzb.com/chain/StellarUI/%E6%94%AF%E4%BB%98%E5%AE%9D.png" width="200" height="200" />
-</p>
+- 🎨 支持修改 CSS 变量实现主题定制.
+
+## 📱 预览
+
+扫描二维码访问演示，注意：因微信审核机制限制，当前的微信小程序示例可能不是最新版本，可以 clone 代码到本地预览。
+
+<p style="display:flex;gap:24px">
+<img src="https://image.whzb.com/chain/StellarUI/%E5%BE%AE%E4%BF%A1.jpg" width="200" height="200"/>
+<img src="https://image.whzb.com/chain/StellarUI/%E6%94%AF%E4%BB%98%E5%AE%9D.png" width="200" height="200" />
+</p>
 
 ## 平台支持
 
@@ -30,22 +30,22 @@
 |:-:|:-:	|:-:		|:-:		|:-:		|:-:		|:-:		|
 |x	|√		|√			|√			|×			|×			|×			|
 
-## 安装
-
-```bash [npm]
-npm i stellar-ui-v2 -S
+## 安装
+
+```bash [npm]
+npm i stellar-ui-v2 -S
 ```
-
-## 快速上手
-
-详细说明见 [快速上手](https://stellar-ui.intecloud.com.cn/pc/index/index?name=handbook-%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)。
-
-  
-## 优秀案例
-
-我们非常欢迎大家一起贡献优秀的 Demo 与案例，欢迎在此 [issue](https://github.com/wuhanshuzhiyun/stellar-ui/issues/1) 提交案例。
-
-<table boder="0">
+
+## 快速上手
+
+详细说明见 [快速上手](https://stellar-ui.intecloud.com.cn/pc/index/index?name=handbook-%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B)。
+
+  
+## 优秀案例
+
+我们非常欢迎大家一起贡献优秀的 Demo 与案例，欢迎在此 [issue](https://github.com/wuhanshuzhiyun/StellarUI/issues/1) 提交案例。
+
+<table border="0">
 	<tr>
 		<td>
 			<img width="250" src="https://image.whzb.com/chain/StellarUI/头像/邻里购.png" />
@@ -72,19 +72,19 @@ npm i stellar-ui-v2 -S
 		</td>
 	</tr>
 </table>
-
-## 周边生态
-
-| 项目																					| 描述														|
-| ---																					| ---														|
-|[StellarPlus](https://stellar-ui.intecloud.com.cn/plus/#/)								| 一个基于vue3构建，打造的uni-app组件库							|
-|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)			|常用于小程序需要全局引入组件的场景的包							|
-|[ste-helper](https://marketplace.visualstudio.com/items?itemName=StellarUI.ste-helper)	|旨在帮助开发者更加有效率的使用 StellarPlus来开发项目的vscode插件	|
-
-
+
+## 周边生态
+
+| 项目																							| 描述															|
+| ---																							| ---															|
+|[StellarUI-Plus](https://github.com/wuhanshuzhiyun/stellar-ui-plus)							| 一个基于vue3构建，打造的uni-app组件库								|
+|[ste-vue-inset-loader](https://github.com/wuhanshuzhiyun/ste-vue-inset-loader)					|常用于小程序需要全局引入组件的场景的包								|
+|[ste-helper](https://github.com/wuhanshuzhiyun/stellar-ui-plus/tree/main/plugins/ste-helper)	|旨在帮助开发者更加有效率的使用 StellarUI-Plus来开发项目的vscode插件	|
+|[ste-cli](https://github.com/wuhanshuzhiyun/ste-cli)											|stellar配套的脚手架												|
+
 ## 核心团队
 以下是`StellarUI`的核心贡献者们：
-
+
 <table  border="0">
 <tr>
 	<td>
@@ -158,20 +158,20 @@ npm i stellar-ui-v2 -S
 		</p>
 	</td>
 </tr>
-</table>
+</table>
 
 ### 贡献者们
 
-感谢以下小伙伴们为 `StellarUI` 发展做出的贡献：
-
-<a href="https://github.com/wuhanshuzhiyun/stellar-ui/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=wuhanshuzhiyun/stellar-ui" alt="contributors">
+感谢以下小伙伴们为 `StellarUI` 发展做出的贡献：
+
+<a href="https://github.com/wuhanshuzhiyun/stellar-ui/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=wuhanshuzhiyun/stellar-ui" alt="contributors">
 </a>
-
-## 鸣谢
-- [uni-helper](https://github.com/uni-helper) - 感谢 uni-helper 团队提供的 uni-app 工具库，让 StellarUI 能够更方便地使用。
-
-
-## 开源协议
-
+
+## 鸣谢
+- [uni-helper](https://github.com/uni-helper) - 感谢 uni-helper 团队提供的 uni-app 工具库，让 StellarUI 能够更方便地使用。
+
+
+## 开源协议
+
 本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。

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

@@ -1,238 +1,238 @@
-<template>
-	<view class="ste-badge-root" :style="[rootStyle, { 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 || (content && (content.length == 1 || content < 10)) }"
-			>
-				<slot name="content">
-					<view class="ste-badge-content-text">{{ cmpContent }}</view>
-				</slot>
-			</view>
-		</view>
-		<slot></slot>
-	</view>
-</template>
-
-<script>
-import utils from '../../utils/utils.js';
-/**
- * ste-badge 徽标
- * @description 徽标组件
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-badge
- * @property {Number|String} content 徽标内容
- * @property {String} background 背景 默认 #ee0a24
- * @property {Boolean} showDot 是否展示为小红点 默认 false
- * @property {Number|String} offsetX 根据徽标位置,设置x轴偏移量 默认 auto
- * @property {Number|String} offsetY 根据徽标位置,设置y轴偏移量 默认 auto
- * @property {Boolean} showZero 当 content 为数字 0，是否展示徽标，默认 false
- * @property {String} position 徽标位置 默认 topRight
- * @value topRight 上右 {String}
- * @value topLeft 上左 {String}
- * @value bottomLeft 下左 {String}
- * @value bottomRight 下右 {String}
- * @property {Number} max 徽标最大显示值 默认 99
- * @property {Boolean} showBorder 是否显示边框 默认 false
- * @property {String} borderColor 边框颜色
- * @property {Number} zIndex 层级 默认 2
- * @property {Boolean} isInline display属性是否为inline-block 默认 false
- */
-
-export default {
-	group: '基础组件',
-	title: 'Badge 徽标',
-	name: 'ste-badge',
-	options: {
-		virtualHost: true,
-	},
-	props: {
-		content: {
-			type: [String, Number, Boolean, null],
-			default: '',
-		},
-		background: {
-			type: [String, null],
-			default: '#ee0a24',
-		},
-		showDot: {
-			type: [Boolean, null],
-			default: false,
-		},
-		offsetX: {
-			type: [String, Number, null],
-			default: 'auto',
-		},
-		offsetY: {
-			type: [String, Number, null],
-			default: 'auto',
-		},
-		showZero: {
-			type: [Boolean, null],
-			default: false,
-		},
-		position: {
-			type: [String, null],
-			default: 'topRight',
-		},
-		max: {
-			type: [Number, null],
-			default: 99,
-		},
-		showBorder: {
-			type: [Boolean, null],
-			default: false,
-		},
-		borderColor: {
-			type: [String, null],
-			default: '#fff',
-		},
-		zIndex: {
-			type: [Number, null],
-			default: 2,
-		},
-		isInline: {
-			type: [Boolean, null],
-			default: false,
-		},
-		rootStyle: {
-			type: [Object, null],
-			default: () => ({}),
-		},
-	},
-	computed: {
-		cmpContentStyle() {
-			let style = {};
-			if (this.background) {
-				style = { backgroundColor: 'transparent', ...utils.bg2style(this.background) };
-			}
-			if (this.offsetX != 'auto' || this.offsetY != 'auto' || this.offsetX == 0 || this.offsetY == 0) {
-				style.transform = 'translate(0,0)';
-
-				switch (this.position) {
-					case 'topLeft':
-						style.left = utils.addUnit(this.offsetX);
-						style.top = utils.addUnit(this.offsetY);
-						break;
-					case 'bottomLeft':
-						style.left = utils.addUnit(this.offsetX);
-						style.bottom = utils.addUnit(this.offsetY);
-						break;
-					case 'bottomRight':
-						style.right = utils.addUnit(this.offsetX);
-						style.bottom = utils.addUnit(this.offsetY);
-						break;
-					default:
-						style.right = utils.addUnit(this.offsetX);
-						style.top = utils.addUnit(this.offsetY);
-						break;
-				}
-			}
-			if (this.showBorder) {
-				style.border = 'solid 1px ' + this.borderColor;
-			}
-			style['z-index'] = this.zIndex;
-
-			return style;
-		},
-		cmpShowContent() {
-			return this.showZero ? true : this.content && this.content != '0';
-		},
-		cmpContent() {
-			if (utils.isNumber(this.content) && this.content > this.max) {
-				return `${this.max}+`;
-			} else {
-				return String(this.content);
-			}
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-$default-size: 28rpx;
-.ste-badge-root {
-	position: relative;
-
-	.ste-badge-content {
-		display: inline-block;
-		position: absolute;
-		font-size: 24rpx;
-		color: #ffffff;
-		background-color: #ee0a24;
-		border-radius: 99999rpx;
-		width: fit-content;
-		background-size: cover;
-
-		.content-box {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: $default-size;
-			max-height: $default-size;
-			min-height: $default-size;
-			width: auto;
-			min-width: $default-size;
-			overflow: hidden;
-
-			padding: 0 8rpx;
-			line-height: 0;
-
-			&.no-padding {
-				padding: 0;
-			}
-		}
-
-		.dot-box {
-			height: 12rpx;
-			width: 12rpx;
-		}
-
-		&-text {
-			font-size: 22rpx;
-			color: #ffffff;
-			line-height: $default-size;
-			vertical-align: middle;
-			position: relative;
-			// #ifdef  H5
-			top: -0.5rpx;
-			// #endif
-			// #ifdef  MP-WEIXIN
-			// top: -0.5rpx;
-			// #endif
-			// #ifdef  MP-ALIPAY
-			// top: 0.5rpx;
-			// #endif
-		}
-	}
-
-	.ste-badge- {
-		&topRight {
-			top: 0;
-			right: 0;
-			transform: translate(50%, -50%);
-		}
-		&topLeft {
-			top: 0;
-			left: 0;
-			transform: translate(-50%, -50%);
-		}
-		&bottomLeft {
-			bottom: 0;
-			left: 0;
-			transform: translate(-50%, 50%);
-		}
-		&bottomRight {
-			bottom: 0;
-			right: 0;
-			transform: translate(50%, 50%);
-		}
-	}
-}
-</style>
+<template>
+	<view class="ste-badge-root" :style="[rootStyle, { 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 || (content && (content.length == 1 || content < 10)) }"
+			>
+				<slot name="content">
+					<view class="ste-badge-content-text">{{ cmpContent }}</view>
+				</slot>
+			</view>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-badge 徽标
+ * @description 徽标组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-badge
+ * @property {Number|String} content 徽标内容
+ * @property {String} background 背景 默认 #ee0a24
+ * @property {Boolean} showDot 是否展示为小红点 默认 false
+ * @property {Number|String} offsetX 根据徽标位置,设置x轴偏移量 默认 auto
+ * @property {Number|String} offsetY 根据徽标位置,设置y轴偏移量 默认 auto
+ * @property {Boolean} showZero 当 content 为数字 0，是否展示徽标，默认 false
+ * @property {String} position 徽标位置 默认 topRight
+ * @value topRight 上右 {String}
+ * @value topLeft 上左 {String}
+ * @value bottomLeft 下左 {String}
+ * @value bottomRight 下右 {String}
+ * @property {Number} max 徽标最大显示值 默认 99
+ * @property {Boolean} showBorder 是否显示边框 默认 false
+ * @property {String} borderColor 边框颜色
+ * @property {Number} zIndex 层级 默认 2
+ * @property {Boolean} isInline display属性是否为inline-block 默认 false
+ */
+
+export default {
+	group: '基础组件',
+	title: 'Badge 徽标',
+	name: 'ste-badge',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		content: {
+			type: [String, Number, Boolean, null],
+			default: '',
+		},
+		background: {
+			type: [String, null],
+			default: '#ee0a24',
+		},
+		showDot: {
+			type: [Boolean, null],
+			default: false,
+		},
+		offsetX: {
+			type: [String, Number, null],
+			default: 'auto',
+		},
+		offsetY: {
+			type: [String, Number, null],
+			default: 'auto',
+		},
+		showZero: {
+			type: [Boolean, null],
+			default: false,
+		},
+		position: {
+			type: [String, null],
+			default: 'topRight',
+		},
+		max: {
+			type: [Number, null],
+			default: 99,
+		},
+		showBorder: {
+			type: [Boolean, null],
+			default: false,
+		},
+		borderColor: {
+			type: [String, null],
+			default: '#fff',
+		},
+		zIndex: {
+			type: [Number, null],
+			default: 2,
+		},
+		isInline: {
+			type: [Boolean, null],
+			default: false,
+		},
+		rootStyle: {
+			type: [Object, null],
+			default: () => ({}),
+		},
+	},
+	computed: {
+		cmpContentStyle() {
+			let style = {};
+			if (this.background) {
+				style = { backgroundColor: 'transparent', ...utils.bg2style(this.background) };
+			}
+			if (this.offsetX != 'auto' || this.offsetY != 'auto' || this.offsetX == 0 || this.offsetY == 0) {
+				style.transform = 'translate(0,0)';
+
+				switch (this.position) {
+					case 'topLeft':
+						style.left = utils.addUnit(this.offsetX);
+						style.top = utils.addUnit(this.offsetY);
+						break;
+					case 'bottomLeft':
+						style.left = utils.addUnit(this.offsetX);
+						style.bottom = utils.addUnit(this.offsetY);
+						break;
+					case 'bottomRight':
+						style.right = utils.addUnit(this.offsetX);
+						style.bottom = utils.addUnit(this.offsetY);
+						break;
+					default:
+						style.right = utils.addUnit(this.offsetX);
+						style.top = utils.addUnit(this.offsetY);
+						break;
+				}
+			}
+			if (this.showBorder) {
+				style.border = 'solid 1px ' + this.borderColor;
+			}
+			style['z-index'] = this.zIndex;
+
+			return style;
+		},
+		cmpShowContent() {
+			return this.showZero ? true : this.content && this.content != '0';
+		},
+		cmpContent() {
+			if (utils.isNumber(this.content) && this.content > this.max) {
+				return `${this.max}+`;
+			} else {
+				return String(this.content);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+$default-size: 28rpx;
+.ste-badge-root {
+	position: relative;
+
+	.ste-badge-content {
+		display: inline-block;
+		position: absolute;
+		font-size: 24rpx;
+		color: #ffffff;
+		background-color: #ee0a24;
+		border-radius: 99999rpx;
+		width: fit-content;
+		background-size: cover;
+
+		.content-box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: $default-size;
+			max-height: $default-size;
+			min-height: $default-size;
+			width: auto;
+			min-width: $default-size;
+			overflow: hidden;
+
+			padding: 0 8rpx;
+			line-height: 0;
+
+			&.no-padding {
+				padding: 0;
+			}
+		}
+
+		.dot-box {
+			height: 12rpx;
+			width: 12rpx;
+		}
+
+		&-text {
+			font-size: 22rpx;
+			color: #ffffff;
+			line-height: $default-size;
+			vertical-align: middle;
+			position: relative;
+			// #ifdef  H5
+			top: -0.5rpx;
+			// #endif
+			// #ifdef  MP-WEIXIN
+			// top: -0.5rpx;
+			// #endif
+			// #ifdef  MP-ALIPAY
+			// top: 0.5rpx;
+			// #endif
+		}
+	}
+
+	.ste-badge- {
+		&topRight {
+			top: 0;
+			right: 0;
+			transform: translate(50%, -50%);
+		}
+		&topLeft {
+			top: 0;
+			left: 0;
+			transform: translate(-50%, -50%);
+		}
+		&bottomLeft {
+			bottom: 0;
+			left: 0;
+			transform: translate(-50%, 50%);
+		}
+		&bottomRight {
+			bottom: 0;
+			right: 0;
+			transform: translate(50%, 50%);
+		}
+	}
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
 	<button
 		v-if="stopPropagation"
-		class="ste-button--root"
+		:class="[cmpBtnRootClass]"
 		:disabled="disabled"
 		:hover-class="!loading ? 'ste-button--root-active' : ''"
 		@click.stop="handleClick"
@@ -21,6 +21,7 @@
 		@chooseavatar="chooseavatar"
 		@getAuthorize="getAuthorize"
 		@followLifestyle="followLifestyle"
+		data-test="button"
 	>
 		<view class="btn-box">
 			<text v-if="loading">加载中.......</text>
@@ -156,6 +157,20 @@ export default {
 	},
 	created() {},
 	computed: {
+		cmpBtnRootClass() {
+			let classes = ['ste-button--root'];
+			classes.push(`ste-button--mode-${this.mode}`);
+
+			if (this.round) {
+				classes.push('ste-button--round');
+			}
+
+			if (this.disabled) {
+				classes.push('ste-button--disabled');
+			}
+
+			return classes.join(' ');
+		},
 		cmpBtnStyle() {
 			let style = {};
 			// 为解决支付宝动态类名时不兼容，尽量使用内联样式