stellar-ui-v2 1.39.0 → 1.40.0

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

@@ -1,200 +1,206 @@
-<template>
-	<view class="ste-animate-root ste-animate" :class="[cmpRootClass]" :style="[cmpRootStyle]" @click="handleClick">
-		<slot></slot>
-	</view>
-</template>
-
-<script>
-export default {
-	group: '展示组件',
-	title: 'Animate 动画',
-	name: 'ste-animate',
-	options: {
-		virtualHost: true,
-	},
-	props: {
-		show: {
-			type: [Boolean, null],
-			default: false,
-		},
-		type: {
-			type: [String, null],
-			default: '',
-		},
-		loop: {
-			type: [Boolean, null],
-			default: false,
-		},
-		duration: {
-			type: [Number, null],
-			default: 300,
-		},
-		action: {
-			type: [String, null],
-			default: '',
-		},
-	},
-	data() {
-		return {
-			animationFlag: false, // 通过此标识控制动画执行
-		};
-	},
-	computed: {
-		cmpRootClass() {
-			let classArr = [];
-			if (this.type && (this.action === 'initial' || this.animationFlag || this.loop)) {
-				classArr.push(`ste-animate-${this.type}`);
-			}
-			if (this.loop) {
-				classArr.push('loop');
-			}
-			return classArr.join(' ');
-		},
-		cmpRootStyle() {
-			let style = {};
-			if (this.duration) {
-				style.animationDuration = this.duration;
-			}
-			return style;
-		},
-	},
-	watch: {
-		show: {
-			handler(val) {
-				if (val) {
-					this.animated();
-				}
-			},
-		},
-	},
-	methods: {
-		handleClick() {
-			if (this.action === 'click') {
-				this.animated();
-			}
-		},
-		animated() {
-			this.animationFlag = false;
-			setTimeout(() => {
-				this.animationFlag = true;
-			}, 10);
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-@import './animate.scss'; // 所有动画
-.ste-animate-root {
-	display: inline-block;
-
-	&.ste-animate {
-		animation-duration: 0.5s;
-		animation-timing-function: ease-out;
-		animation-fill-mode: both;
-	}
-
-	// 循环
-	&.loop {
-		animation-iteration-count: infinite !important;
-	}
-
-	// 横向抖动
-	&.ste-animate-shakeX {
-		animation-name: shakeX;
-	}
-
-	// 竖向抖动
-	&.ste-animate-shakeY {
-		animation-name: shakeY;
-	}
-
-	// 心跳
-	&.ste-animate-ripple {
-		animation-name: ripple;
-	}
-
-	// 漂浮
-	&.ste-animate-float {
-		position: relative;
-		animation-name: floatPop;
-	}
-
-	// 呼吸灯
-	&.ste-animate-breath {
-		animation-name: breath;
-		animation-duration: 2700ms;
-		animation-timing-function: ease-in-out;
-		animation-direction: alternate;
-	}
-
-	// 右侧向左侧划入
-	&.ste-animate-slide-right {
-		animation-name: slide-right;
-	}
-
-	// 右侧向左侧划入
-	&.ste-animate-slide-left {
-		animation-name: slide-left;
-	}
-
-	// 上面向下面划入
-	&.ste-animate-slide-top {
-		animation-name: slide-top;
-	}
-
-	// 下面向上面划入
-	&.ste-animate-slide-bottom {
-		animation-name: slide-bottom;
-	}
-
-	&.ste-animate-jump {
-		transform-origin: center center;
-		animation: jump 0.7s linear;
-	}
-
-	&.ste-animate-twinkle {
-		position: relative;
-
-		&::after,
-		&::before {
-			position: absolute;
-			right: 50%;
-			z-index: 1;
-			box-sizing: border-box;
-			width: 60px;
-			height: 60px;
-			margin-top: -15px;
-			margin-right: -30px;
-			content: '';
-			border: 4rpx solid rgba(255, 255, 255, 0.6);
-			border-radius: 30px;
-			transform: scale(0);
-			animation: twinkle 2s ease-out infinite;
-		}
-
-		&::after {
-			animation-delay: 0.4s;
-		}
-	}
-
-	&.ste-animate-flicker {
-		position: relative;
-		overflow: hidden;
-
-		&::after {
-			position: absolute;
-			top: -2rpx;
-			left: 0;
-			width: 200rpx;
-			height: 102%;
-			content: '';
-			background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);
-			filter: blur(6rpx);
-			opacity: 0.73;
-			transform: skew(-20deg);
-			animation: flicker 1.5s linear infinite;
-		}
-	}
-}
-</style>
+<template>
+	<view class="ste-animate-root ste-animate" :class="[cmpRootClass]" :style="[cmpRootStyle]" @click="handleClick">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	/**
+	 * ste-animate 动画
+	 * @description 动画组件
+	 * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-animate
+	 */
+	export default {
+		group: '展示组件',
+		title: 'Animate 动画',
+		name: 'ste-animate',
+		options: {
+			virtualHost: true,
+		},
+		props: {
+			show: {
+				type: [Boolean, null],
+				default: false,
+			},
+			type: {
+				type: [String, null],
+				default: '',
+			},
+			loop: {
+				type: [Boolean, null],
+				default: false,
+			},
+			duration: {
+				type: [Number, null],
+				default: 300,
+			},
+			action: {
+				type: [String, null],
+				default: '',
+			},
+		},
+		data() {
+			return {
+				animationFlag: false, // 通过此标识控制动画执行
+			};
+		},
+		computed: {
+			cmpRootClass() {
+				let classArr = [];
+				if (this.type && (this.action === 'initial' || this.animationFlag || this.loop)) {
+					classArr.push(`ste-animate-${this.type}`);
+				}
+				if (this.loop) {
+					classArr.push('loop');
+				}
+				return classArr.join(' ');
+			},
+			cmpRootStyle() {
+				let style = {};
+				if (this.duration) {
+					style.animationDuration = this.duration;
+				}
+				return style;
+			},
+		},
+		watch: {
+			show: {
+				handler(val) {
+					if (val) {
+						this.animated();
+					}
+				},
+			},
+		},
+		methods: {
+			handleClick() {
+				if (this.action === 'click') {
+					this.animated();
+				}
+			},
+			animated() {
+				this.animationFlag = false;
+				setTimeout(() => {
+					this.animationFlag = true;
+				}, 10);
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import './animate.scss'; // 所有动画
+
+	.ste-animate-root {
+		display: inline-block;
+
+		&.ste-animate {
+			animation-duration: 0.5s;
+			animation-timing-function: ease-out;
+			animation-fill-mode: both;
+		}
+
+		// 循环
+		&.loop {
+			animation-iteration-count: infinite !important;
+		}
+
+		// 横向抖动
+		&.ste-animate-shakeX {
+			animation-name: shakeX;
+		}
+
+		// 竖向抖动
+		&.ste-animate-shakeY {
+			animation-name: shakeY;
+		}
+
+		// 心跳
+		&.ste-animate-ripple {
+			animation-name: ripple;
+		}
+
+		// 漂浮
+		&.ste-animate-float {
+			position: relative;
+			animation-name: floatPop;
+		}
+
+		// 呼吸灯
+		&.ste-animate-breath {
+			animation-name: breath;
+			animation-duration: 2700ms;
+			animation-timing-function: ease-in-out;
+			animation-direction: alternate;
+		}
+
+		// 右侧向左侧划入
+		&.ste-animate-slide-right {
+			animation-name: slide-right;
+		}
+
+		// 右侧向左侧划入
+		&.ste-animate-slide-left {
+			animation-name: slide-left;
+		}
+
+		// 上面向下面划入
+		&.ste-animate-slide-top {
+			animation-name: slide-top;
+		}
+
+		// 下面向上面划入
+		&.ste-animate-slide-bottom {
+			animation-name: slide-bottom;
+		}
+
+		&.ste-animate-jump {
+			transform-origin: center center;
+			animation: jump 0.7s linear;
+		}
+
+		&.ste-animate-twinkle {
+			position: relative;
+
+			&::after,
+			&::before {
+				position: absolute;
+				right: 50%;
+				z-index: 1;
+				box-sizing: border-box;
+				width: 60px;
+				height: 60px;
+				margin-top: -15px;
+				margin-right: -30px;
+				content: '';
+				border: 4rpx solid rgba(255, 255, 255, 0.6);
+				border-radius: 30px;
+				transform: scale(0);
+				animation: twinkle 2s ease-out infinite;
+			}
+
+			&::after {
+				animation-delay: 0.4s;
+			}
+		}
+
+		&.ste-animate-flicker {
+			position: relative;
+			overflow: hidden;
+
+			&::after {
+				position: absolute;
+				top: -2rpx;
+				left: 0;
+				width: 200rpx;
+				height: 102%;
+				content: '';
+				background-image: linear-gradient(106deg, rgba(232, 224, 255, 0) 24%, #e8e0ff 91%);
+				filter: blur(6rpx);
+				opacity: 0.73;
+				transform: skew(-20deg);
+				animation: flicker 1.5s linear infinite;
+			}
+		}
+	}
+</style>

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

@@ -26,7 +26,7 @@ import utils from '../../utils/utils.js';
 /**
  * ste-badge 徽标
  * @description 徽标组件
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-badge
+ * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-badge
  * @property {Number|String} content 徽标内容
  * @property {String} background 背景 默认 #ee0a24
  * @property {Boolean} showDot 是否展示为小红点 默认 false
@@ -117,20 +117,20 @@ export default {
 
 				switch (this.position) {
 					case 'topLeft':
-						style.left = utils.addUnit(this.offsetX);
-						style.top = utils.addUnit(this.offsetY);
+						style.left = utils.formatPx(this.offsetX);
+						style.top = utils.formatPx(this.offsetY);
 						break;
 					case 'bottomLeft':
-						style.left = utils.addUnit(this.offsetX);
-						style.bottom = utils.addUnit(this.offsetY);
+						style.left = utils.formatPx(this.offsetX);
+						style.bottom = utils.formatPx(this.offsetY);
 						break;
 					case 'bottomRight':
-						style.right = utils.addUnit(this.offsetX);
-						style.bottom = utils.addUnit(this.offsetY);
+						style.right = utils.formatPx(this.offsetX);
+						style.bottom = utils.formatPx(this.offsetY);
 						break;
 					default:
-						style.right = utils.addUnit(this.offsetX);
-						style.top = utils.addUnit(this.offsetY);
+						style.right = utils.formatPx(this.offsetX);
+						style.top = utils.formatPx(this.offsetY);
 						break;
 				}
 			}

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

@@ -14,7 +14,7 @@
 /**
  * ste-barcode 条形码
  * @description 条形码组件
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-barcode
+ * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-barcode
  * @property {String} content 条形码内容(仅支持数字和字母)
  * @property {Number} width 条形码宽度，单位`px`
  * @property {Number} height 条形码高度，单位`px`

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

@@ -65,7 +65,7 @@ let color = useColor();
 /**
  * ste-button 按钮
  * @description 按钮组件
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-button
+ * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-button
  * @property {Number} mode 尺寸 默认值 200
  * @value 100 小 {Number}
  * @value 200 中 {Number}

package/components/ste-calendar/ste-calendar.vue

@@ -68,7 +68,7 @@ let color = useColor();
 /**
  * ste-calendar 日历
  * @description 日历组件
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-calendar
+ * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-calendar
  * @property {String} title 标题
  * @property {Boolean} showTitle 是否显示标题
  * @property {Array} list 默认选中的日期

package/components/ste-checkbox/ste-checkbox.vue

@@ -21,7 +21,7 @@ let color = useColor();
 /**
  * ste-checkbox 复选框
  * @description 复选框组件,在一组备选项中进行多选。
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-checkbox
+ * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-checkbox
  * @property {Boolean} value 当前选中值（支持v-model双向绑定） 默认 false
  * @property {Number|String} name 选项的值
  * @property {Boolean} disabled 禁用 默认 false

package/components/ste-checkbox-group/ste-checkbox-group.vue

@@ -8,7 +8,7 @@
 /**
  * ste-checkbox-group 复选框组
  * @description 复选框组组件,内部由多个checkbox组成。
- * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-checkbox
+ * @tutorial https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui&menu=%E7%BB%84%E4%BB%B6&active=ste-checkbox
  * @property {Array} value 当前选中值（支持v-model双向绑定）
  * @property {String} direction 排列方式 默认 column
  * @value row 横向 默认 {{String}}