stellar-ui-v2 1.35.3

package/components/ste-popup/README.md

@@ -0,0 +1,148 @@
+# Popup 弹出层
+
+---$
+
+### 代码演示
+#### 基础使用
+- 通过属性`show`来控制弹出层的显隐，使用`sync`修饰符来双向绑定
+- 弹出位置支持上(`top`)、下(`bottom`)、左(`left`)、右(`right`)、中(`center`)，默认弹出位置为中(`center`)
+```
+<ste-popup :show.sync="show" width="300" height="300">
+	<view class="popup-content"></view>
+</ste-popup>
+<ste-popup :show.sync="showTop" height="300" width="100vw" position="top">
+	<view class="popup-content">上</view>
+</ste-popup>
+<ste-popup :show.sync="showBottom" height="300" width="100vw" position="bottom">
+	<view class="popup-content">下</view>
+</ste-popup>
+<ste-popup :show.sync="showLeft" width="300" height="100vh" position="left">
+	<view class="popup-content">左</view>
+</ste-popup>
+<ste-popup :show.sync="showRight" width="300" height="100vh" position="right">
+	<view class="popup-content">右</view>
+</ste-popup>
+```
+
+#### 背景色
+```
+<ste-popup :show.sync="bgShow" width="300" height="300" backgroundColor="#eff3dd">
+	<view class="popup-content">背景色</view>
+</ste-popup>
+```
+
+#### 大小
+- 默认弹出层的内容区域是没有高度的，如果不设置宽高则会由内容撑开
+- 支持具体数值(单位为rpx)、百分比
+```
+<ste-popup :show.sync="sizeShow1" width="300" height="500">
+	<view class="popup-content">300*500</view>
+</ste-popup>
+<ste-popup :show.sync="sizeShow2" width="100vw" height="300">
+	<view class="popup-content">100vw*300</view>
+</ste-popup>
+```
+
+
+#### 圆角
+- 若组件圆角不满足需求，可以不设置圆角，在插槽内容中自己设置圆角
+```
+<ste-popup :show.sync="roundShow" width="300" height="300" round>
+	<view class="popup-content">圆角</view>
+</ste-popup>
+```
+
+#### 偏移
+```
+<ste-popup :show.sync="offsetShow" width="300" height="300" offsetX="50" offsetY="-50">
+	<view class="popup-content">偏移</view>
+</ste-popup>
+```
+
+
+#### 是否遮罩关闭
+默认可点击遮罩关闭弹窗
+```
+<ste-popup :show.sync="maskShow1" width="300" height="300">
+	<view class="popup-content">遮罩可关闭</view>
+</ste-popup>
+<ste-popup :show.sync="maskShow2" width="300" height="300" :isMaskClick="false">
+	<view class="popup-content">遮罩不可关闭</view>
+</ste-popup>
+```
+
+
+
+#### 动画执行时间
+```
+<ste-popup :show.sync="durationShow" width="300" height="300" :duration="800">
+	<view class="popup-content">动画执行时间</view>
+</ste-popup>
+```
+
+#### 异步关闭
+监听关闭事件，通过执行事件抛出的`allowStop`方法阻止关闭，等待异步操作完成后，当可关闭时再执行`resolve`方法
+```
+<template>
+	<ste-popup :show.sync="syncShow" width="100vw" height="300" @close="syncClose" position="bottom">
+		<view class="popup-content">异步关闭</view>
+	</ste-popup>
+</template>
+<script>
+export default {
+	methods: {
+		syncClose(allowStop, resolve) {
+			allowStop();
+			this.showToast({
+				title: '加载中...',
+				icon: 'loading',
+				duration: 2500,
+			});
+			setTimeout(() => {
+				this.hideToast();
+				resolve();
+			}, 2000);
+		},
+	}
+}
+</script>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 属性名		| 说明										| 类型				| 默认值		| 可选值							| 支持版本	|
+| ---			| ---										| ---				| ---		| ---							| ---		|
+| `show`		| 是否显示弹出层,使用`sync`修饰符来双向绑定	| `Boolean`			| `false`	| -								| -			|
+| `backGround`	| 内容容器的背景色							| `String`			| `#ffffff`	| -								| -			|
+| `showMask`	| 是否显示遮罩								| `Boolean`			| `true`	| -								| -			|
+| `isMaskClick`	| 是否可以点击遮罩层关闭						| `Boolean`			| `true`	| -								| -			|
+| `width`		| 内容区宽度									| `Number/String`	| `auto`	| -								| -			|
+| `height`		| 内容区高度									| `Number/String`	| `auto`	| -								| -			|
+| `position`	| 弹出位置									| `String`			| `center`	| `top` `bottom` `left` `right`	| -			|
+| `round`		| 是否圆角									| `Boolean`			| `false`	| -								| -			|
+| `showClose`	| 是否右上角显示关闭图标						| `Boolean`			| `true`	| -								| -			|
+| `offsetX`		| 根据弹出位置，设置X轴偏移量，单位px			| `Number/String`	| `0`		| -								| -			|
+| `offsetY`		| 根据弹出位置，设置Y轴偏移量，单位px			| `Number/String`	| `0`		| -								| -			|
+| `duration`	| 动画持续时间								| `Number`			| `200`		| -								| -			|
+| `zIndex`		| 弹窗层级z-index							| `Number`			| `1000`	| -								| -			|
+| `keepContent`	| 隐藏后是否不销毁弹窗内容元素				| `Boolean`			| `true`	| -								| `v1.10.1`	|
+
+#### 组件事件(Events)
+
+| 事件名		| 说明						| 事件参数																		|支持版本	|
+|---			|---						|---																			|---		|
+| `close`		| 关闭弹框时触发(可拦截关闭)	| `value`:当前的绑定值,`alowStop`:允许阻止后续的事件触发,`resolve`:后续的事件执行	|-			|
+| `open-after`	| 打开弹框动画结束后触发		| -																				| `v1.10.1`	|
+| `clickMask`	| 点击遮罩时触发				| -																				|-			|
+
+
+#### 组件插槽(Slots)
+
+|插槽名		|说明			|插槽参数	|支持版本	|
+|---		|---			|---		|---		|
+| default	| 内容部分插槽	|-			|-			|
+
+---$
+{{fuyuwei}}

package/components/ste-popup/ste-popup.vue

@@ -0,0 +1,337 @@
+<template>
+	<view
+		class="ste-popup"
+		:class="position"
+		:style="[cmpPageStyle]"
+		@click.stop="onMaskClick"
+		@touchmove.stop.prevent="touchmove"
+		:animation="overlayAnimationData"
+	>
+		<view class="content" :class="position" :style="[cmpContentStyle]" :animation="animationData" @click.stop>
+			<template v-if="keepContent || showContent">
+				<scroll-view style="width: 100%; height: 100%" v-if="height > 0" :scroll-y="true">
+					<slot name="default"></slot>
+				</scroll-view>
+				<slot v-else name="default"></slot>
+			</template>
+			<view class="close-icon-box" @click="close" v-if="showClose && position != 'center'">
+				<ste-icon code="&#xe6a0;" size="40" color="#666"></ste-icon>
+			</view>
+		</view>
+		<view class="close-icon-box-center" @click="close" v-if="showClose && position == 'center' && showContent">
+			<ste-icon code="&#xe6a0;" size="40" color="#fff"></ste-icon>
+		</view>
+	</view>
+</template>
+<script>
+import utils from '../../utils/utils.js';
+const DEFAULT_BORDER_RADIUS = 32;
+/**
+ * ste-popup 弹出层
+ * @description 弹出层组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-popup
+ * @property {Boolean} show 是否显示弹出层,使用sync修饰符来双向绑定 默认 false
+ * @property {String} backgroundColor 内容容器的背景色 默认 #ffffff
+ * @property {Boolean} isMaskClick 是否可以点击遮罩层关闭 默认 true
+ * @property {Number|String} width 内容区宽度
+ * @property {Number|String} height 内容区高度
+ * @property {String} position 弹出位置 默认 center
+ * @value center 中 {String}
+ * @value top 上 {String}
+ * @value bottom 下 {String}
+ * @value left 左 {String}
+ * @value right 右 {String}
+ * @property {Boolean} round 是否圆角 默认 false
+ * @property {Boolean} showClose 是否右上角显示关闭图标 默认 true
+ * @property {Number|String} offsetX 根据弹出位置，设置X轴偏移量，单位px 默认 0
+ * @property {Number|String} offsetY 根据弹出位置，设置Y轴偏移量，单位px 默认 0
+ * @property {Number} duration 动画持续时间，单位ms
+ * @property {Number} zIndex 弹窗层级z-index
+ * @property {Boolean} keepContent 隐藏后是否不销毁弹窗内容元素 默认 true
+ * @event {Function} close 弹窗关闭动画执行完毕事件
+ * @event {Function} open 弹窗打开动画执行完毕事件
+ * @event {Function} maskClick 遮罩点击事件
+ **/
+export default {
+	group: '基础组件',
+	title: 'Popup 弹出层',
+	name: 'ste-popup',
+	props: {
+		// 打开或者关闭弹窗，必须使用.sync进行双向绑定
+		show: {
+			type: [Boolean, null],
+			default: false,
+		},
+		backgroundColor: {
+			type: [String, null],
+			default: '#ffffff',
+		},
+		// 是否显示遮罩
+		showMask: {
+			type: [Boolean, null],
+			default: true,
+		},
+		// 蒙版点击是否关闭弹窗
+		isMaskClick: {
+			type: [Boolean, null],
+			default: true,
+		},
+		// 弹窗内容层宽度
+		width: {
+			type: [Number, String, null],
+			default: '100vw',
+		},
+		// 弹窗内容层高度
+		height: {
+			type: [Number, String, null],
+			default: 'auto',
+		},
+		// 位置 center top bottom left right
+		position: {
+			type: [String, null],
+			default: 'center',
+		},
+		round: {
+			type: [Boolean, null],
+			default: false,
+		},
+		showClose: {
+			type: [Boolean, null],
+			default: true,
+		},
+		offsetX: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		offsetY: {
+			type: [Number, String, null],
+			default: 0,
+		},
+		// 动画持续时间
+		duration: {
+			type: [Number, null, null],
+			default: 200,
+		},
+		// 弹窗z-index
+		zIndex: {
+			type: [Number, String, null],
+			default: 998,
+		},
+		// 是否在动画完成后渲染或销毁内容元素
+		keepContent: {
+			type: [Boolean, null],
+			default: true,
+		},
+	},
+	data() {
+		return {
+			pageDisplay: 'none',
+			animationData: null,
+			overlayAnimationData: null,
+			animationProp: { duration: this.duration, timingFunction: 'ease-out' },
+			clickTask: null,
+			showContent: false, // 配合keepContent属性来渲染或销毁内容元素
+		};
+	},
+	created() {
+		if (this.show) {
+			this.beginAnimation();
+		}
+	},
+	mounted() {},
+	computed: {
+		cmpPageStyle() {
+			return {
+				zIndex: this.zIndex,
+				display: this.pageDisplay,
+				backgroundColor: this.showMask ? 'rgba(0, 0, 0, 0.6)' : 'transparent',
+				'--content-border-radius': utils.formatPx(this.round ? DEFAULT_BORDER_RADIUS : 0),
+				'--content-height': utils.addUnit(this.height / 2),
+			};
+		},
+		cmpContentStyle() {
+			let style = {
+				width: utils.addUnit(this.width),
+				height: utils.addUnit(this.height),
+				backgroundColor: this.backgroundColor,
+			};
+
+			if (this.position === 'center') {
+				// style.transform = `translate(${utils.addUnit(this.offsetX)}, ${utils.addUnit(this.offsetY)})`;
+			} else if (this.position === 'bottom') {
+			} else if (this.position === 'top') {
+			} else if (this.position === 'left') {
+			} else if (this.position === 'right') {
+			}
+
+			return style;
+		},
+	},
+	watch: {
+		show: {
+			handler(newVal) {
+				if (newVal) {
+					this.beginAnimation();
+				} else {
+					this.endAnimation();
+				}
+			},
+		},
+	},
+	methods: {
+		touchmove(e) {
+			// TODO nvue 取消冒泡
+			e.stopPropagation();
+		},
+		onMaskClick() {
+			this.$emit('clickMask');
+			if (this.isMaskClick) {
+				this.close();
+			}
+		},
+		// 关闭弹窗
+		async close() {
+			if (this.clickTask) {
+				return;
+			}
+			let next = true;
+			this.allowStopStatus = false;
+			this.clickTask = new Promise((resolve, reject) => {
+				this.$emit(
+					'close',
+					() => (next = false),
+					() => resolve(),
+					() => reject()
+				);
+			});
+			if (!next) {
+				await this.clickTask;
+			}
+			this.endAnimation();
+			this.$emit('update:show', false);
+			setTimeout(() => {
+				this.clickTask = null;
+			}, this.duration);
+		},
+		allowStop() {
+			this.allowStopStatus = true;
+		},
+		// 打开弹窗时的动画
+		async beginAnimation() {
+			this.pageDisplay = 'flex';
+			await utils.sleep(50);
+			let animation = uni.createAnimation(this.animationProp);
+			let overlayAnimation = uni.createAnimation(this.animationProp);
+			overlayAnimation.opacity(1).step({
+				duration: this.duration,
+			});
+
+			if (this.position === 'center') {
+				animation.scale(1).translate(utils.formatPx(this.offsetX), utils.formatPx(this.offsetY)).step();
+			} else if (this.position === 'top' || this.position === 'bottom') {
+				animation.translate(utils.formatPx(this.offsetX), utils.formatPx(this.offsetY)).step();
+			} else if (this.position === 'left' || this.position === 'right') {
+				animation.translate(utils.formatPx(this.offsetX), utils.formatPx(this.offsetY)).step();
+			}
+			this.overlayAnimationData = overlayAnimation.export();
+			this.animationData = animation.export();
+
+			setTimeout(() => {
+				this.showContent = true;
+				this.$emit('open-after');
+			}, this.duration);
+		},
+		endAnimation() {
+			let animation = uni.createAnimation(this.animationProp);
+			let overlayAnimation = uni.createAnimation(this.animationProp);
+			overlayAnimation.opacity(0).step();
+
+			if (this.position === 'center') {
+				animation.scale(0).step();
+			} else if (this.position === 'top' || this.position === 'bottom') {
+				animation.translateY(this.position == 'top' ? '-100%' : '100%').step();
+			} else if (this.position === 'left' || this.position === 'right') {
+				animation.translateX(this.position == 'left' ? '-100%' : '100%').step();
+			}
+
+			this.overlayAnimationData = overlayAnimation.export();
+			this.animationData = animation.export();
+
+			setTimeout(() => {
+				this.pageDisplay = 'none';
+				this.showContent = false;
+			}, this.duration);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-popup {
+	height: 100vh;
+	width: 100vw;
+	overflow: hidden;
+	position: fixed;
+	left: 0;
+	top: 0;
+	overflow: hidden;
+	justify-content: center;
+	align-items: center;
+	touch-action: none;
+
+	.close-icon-box-center {
+		position: absolute;
+		color: #fff;
+		top: calc(50% + var(--content-height) + 40rpx);
+		left: 50%;
+		transform: translate(-50%, 0);
+		display: flex;
+	}
+}
+
+.content {
+	display: inline-block;
+	opacity: 1;
+	overflow-y: auto;
+	position: absolute;
+	.close-icon-box {
+		position: absolute;
+		right: 24rpx;
+		top: 24rpx;
+		display: flex;
+	}
+	&.center {
+		// position: relative;
+		transform: scale(0);
+		border-radius: var(--content-border-radius);
+	}
+	&.bottom {
+		transform: translateY(100%);
+		left: 0;
+		bottom: 0;
+		border-top-left-radius: var(--content-border-radius);
+		border-top-right-radius: var(--content-border-radius);
+	}
+	&.top {
+		transform: translateY(-100%);
+		left: 0;
+		top: 0;
+		border-bottom-left-radius: var(--content-border-radius);
+		border-bottom-right-radius: var(--content-border-radius);
+	}
+	&.left {
+		transform: translateX(-100%);
+		left: 0;
+		top: 0;
+		border-top-right-radius: var(--content-border-radius);
+		border-bottom-right-radius: var(--content-border-radius);
+	}
+	&.right {
+		transform: translateX(100%);
+		right: 0;
+		top: 0;
+		border-top-left-radius: var(--content-border-radius);
+		border-bottom-left-radius: var(--content-border-radius);
+	}
+}
+</style>

package/components/ste-price/README.md

@@ -0,0 +1,129 @@
+# Price 价格
+
+用于页面上显示价格的组件
+
+---$
+
+### 代码演示
+#### 金额单位
+- 默认金额单位为分，会将`value`值除以`100`
+- 金额单位为元时，`valueUnit`赋值`yuan`，此时将只显示元的部分
+```html
+<ste-price value="9527" />
+<ste-price value="9527" valueUnit="yuan"/>
+```
+
+#### 隐藏金额符号
+- 使用`showUnit`可以控制金额符号是否显示
+```html
+<ste-price value="9527" :showUnit="false" />
+```
+#### 自定义金额符号
+- 使用`unitSymbol`可以自定义金额符号
+```html
+<ste-price value="9527" unitSymbol="$" />
+```
+#### 自定义精度
+- 使用`digits`可以自定义精度
+```html
+<ste-price value="9520" :digits="1" />
+```
+
+#### 金额文字尺寸
+金额文字尺寸单位为`rpx`
+```html
+<ste-price value="9527" fontSize="50" />
+```
+
+#### 金额文字颜色
+```html
+<ste-price value="9527" color="green" />
+```
+
+#### 划线价 & 划线价颜色
+- 划线价颜色属性只在开启了划线价模式时才生效
+```html
+<ste-price value="9527" isSuggestPrice />
+<ste-price value="9527" isSuggestPrice linePriceColor="#666666" />
+```
+
+#### 金额样式
+- 当`styleType`值为`1`时，数字字号统一，
+	- 当数字字号<=`40rpx`，则价格符号字号为`20rpx`
+	- 当数字字号＞`40rpx`,则价格符号字号为数字字号减`20rpx`
+
+- 当`styleType`值为`2`时
+	- 当小数点前数字字号≤`28rpx` 所有部分展示字号统一
+	- 当`28rpx`＜小数点前数字字号≤`40rpx`则其余部分字号为`20rpx`
+	- 当小数点前数字字号＞`40rpx`则其余部分字号为小数点前数字字号减`20rpx`
+- 当`styleType`值为`3`时，全部字号统一
+
+
+```html
+<ste-price value="9527" :styleType="1" fontSize="20" />
+<ste-price value="9527" :styleType="1" fontSize="40" />
+<ste-price value="9527" :styleType="1" fontSize="60" />
+
+<ste-price value="9527" :styleType="2" fontSize="28" />
+<ste-price value="9527" :styleType="2" fontSize="40" />
+<ste-price value="9527" :styleType="2" fontSize="60" />
+
+<ste-price value="9527" :styleType="3" />
+```
+
+#### 金额字重
+- 当`bold`为`true`时，金额文本为粗体字
+```html
+<ste-price value="9527" bold fontSize="50" />
+```
+
+#### 格式化内容
+```html
+<template>
+	<ste-price value="9527" :formatter="formatter" />
+</template>
+<script>
+export default {
+	data() {
+		return {};
+	},
+	methods: {
+		formatter(price) {
+			// 入参是传入的value值
+			return (price / 100).toFixed(3);
+		},
+	},
+};
+</script>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 属性名			| 说明											| 类型				| 默认值			| 可选值																| 支持版本	|
+| ---				| ---											| ---				| ---			| ---																| ---		|
+| `value`			| 金额											| `Number/String`	| `0`			| -																	| -			|
+| `valueUnit`		| 金额单位 用于判断传入的`value`值是`fen`还是`yuan`	| `String`			| `"fen"`		| -																	| -			|
+| `digits`			| 金额精度										| `Number`			| `-1`			| `-1`不处理（默认值）<br/>`0`取整<br/>`1`保留1位小数<br/>`2`保留2位小数	| `1.1.3`	|
+| `showUnit`		| 是否显示单位符号								| `Boolean`			| `true`		| -																	| `1.1.3`	|
+| `unitSymbol`		| 单位符号										| `String`			| `"¥"`			| -																	| `1.1.3`	|
+| `fontSize`		| 金额文字尺寸									| `Number/String`	| `30`			| -																	| -			|
+| `color`			| 金额文字颜色									| `String`			| `"#ff1e19"`	| -																	| -			|
+| `linePriceColor`	| 划线价颜色										| `String`			| `"#999999"`	| -																	| -			|
+| `lineHeight`		| 行高	：`Number`，单位rpx，`String`，同原生		| `Number/String`	| `"1"`			| -																	| -			|
+| `isSuggestPrice`	| 是否划线价										| `Boolean`			| `false`		| -																	| -			|
+| `marginLeft`		| 左边距											| `Number/String`	| `0`			| -																	| -			|
+| `marginRight`		| 右边距											| `Number/String`	| `0`			| -																	| -			|
+| `marginTop`		| 上边距											| `Number/String`	| `0`			| -																	| -			|
+| `marginBottom`	| 下边距											| `Number/String`	| `0`			| -																	| -			|
+| `styleType`		| 金额样式										| `Number`			| `2`			| `1`元和角分大小相等<br/>`2`角分小于元<br/>`3`价格符号和角，分相等		| -			|
+| `bold`			| 金额是否加粗									| `Boolean`			| `false`		| -																	| `1.1.3`	|
+| `formatter`		| 用来格式化内容									| `Function(value)`	| -				| -																	| -			|
+
+---$
+{{fuyuwei}}
+
+{{xuyajun}}
+
+{{qinpengfei}}