stellar-ui-v2 1.35.3

package/components/ste-stepper/ste-stepper.vue

@@ -0,0 +1,373 @@
+<template>
+	<view class="ste-stepper-root" :style="[cmpStyle]">
+		<ste-button v-if="theme != 'add'" :rootStyle="cmpLeftButtonStyle" @click="minus" :disabled="cmpDisableMinus">
+			<view class="button-icon">
+				<ste-icon
+					code="&#xe67c;"
+					:size="(theme == 'card' ? cmpBtnSize : cmpBtnSize * 0.8) * 0.65"
+					:color="cmpDisableMinus ? '#cccccc' : theme == 'line' ? '#000000' : cmpMainColor"
+					:inlineBlock="false"
+				></ste-icon>
+			</view>
+		</ste-button>
+		<view v-if="theme != 'add'" class="input" :style="[cmpInputStyle]">
+			<input
+				class="input-el"
+				:type="precision ? 'digit' : 'number'"
+				:value="value"
+				@blur="blur"
+				@focus="focus"
+				:disabled="disabled || disableInput"
+			/>
+		</view>
+		<ste-button v-if="theme != 'add'" :rootStyle="cmpRightButtonStyle" @click="plus" :disabled="cmpDisablePlus">
+			<view class="button-icon">
+				<ste-icon
+					code="&#xe67e;"
+					:size="(theme == 'card' ? cmpBtnSize : cmpBtnSize * 0.8) * 0.65"
+					:color="theme != 'line' ? '#ffffff' : theme == 'line' && cmpDisablePlus ? '#cccccc' : '#000000'"
+					:inlineBlock="false"
+				></ste-icon>
+			</view>
+		</ste-button>
+		<ste-badge
+			v-else
+			:content="value"
+			:background="background"
+			:showDot="showDot"
+			:position="position"
+			:offsetX="offsetX"
+			:offsetY="offsetY"
+			:showZero="showZero"
+			:max="badgeMax"
+		>
+			<ste-button :rootStyle="cmpRightButtonStyle" @click="plus" :disabled="cmpDisablePlus">
+				<view class="button-icon">
+					<ste-icon
+						code="&#xe67e;"
+						:size="(theme == 'card' ? cmpBtnSize : cmpBtnSize * 0.8) * 0.65"
+						:color="theme != 'line' ? '#ffffff' : theme == 'line' && cmpDisablePlus ? '#cccccc' : '#000000'"
+						:inlineBlock="false"
+					></ste-icon>
+				</view>
+			</ste-button>
+		</ste-badge>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+/**
+ * ste-stepper 步进器
+ * @description 步进器组件,步进器由增加按钮、减少按钮和输入框组成，用于在一定范围内输入、调整数字。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-stepper
+ * @property {Number} value 当前输入的值，支持双向绑定 默认 1
+ * @property {Number} min 最小值 默认 0
+ * @property {Number} max 最大值 默认 Infinity
+ * @property {Number} step 步长，每次加或减的值 默认 1
+ * @property {Number|String} inputWidth 输入框宽度，默认单位为rpx 默认 64
+ * @property {Number|String} btnSize 按钮大小以及输入框高度，默认单位为rpx 默认 48
+ * @property {Number} precision 数值精度 默认 0
+ * @property {String} theme 样式风格 默认 card
+ * @value card 面型 {String}
+ * @value line 线型 {String}
+ * @value add 纯加购按钮 {String}
+ * @property {String} mainColor 主色 默认 #0090FF
+ * @property {Boolean} disabled 是否禁用步进器 默认 false
+ * @property {Boolean} disablePlus 是否禁用增加按钮 默认 false
+ * @property {Boolean} disableMinus 是否禁用减少按钮 默认 false
+ * @property {Boolean} disableInput 是否禁用输入框 默认 false
+ * @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} badgeMax 徽标最大显示值 默认 99
+ * @event {Function} change 当绑定值变化时触发的事件 `value`:改变后的绑定值
+ * @event {Function} plus 点击增加按钮时触发（可拦截change事件）`value`：改变后的绑定值,`allowStop`：允许阻止后续的事件触发,：`resolve`：后续的事件执行
+ * @event {Function} minus 点击减少按钮时触发（可拦截change事件）`value`：改变后的绑定值,`allowStop`：允许阻止后续的事件触发,：`resolve`：后续的事件执行
+ * @event {Function} focus 输入框聚焦时触发
+ * @event {Function} blur 输入框失焦时触发
+ */
+
+export default {
+	group: '表单组件',
+	title: 'Stepper 步进器',
+	name: 'ste-stepper',
+	props: {
+		value: {
+			type: [Number, null],
+			default: 1,
+		},
+		min: {
+			type: [Number, null],
+			default: 0,
+		},
+		max: {
+			type: [Number, null],
+			default: Infinity,
+		},
+		step: {
+			type: [Number, null],
+			default: 1,
+		},
+		inputWidth: {
+			type: [Number, String, null],
+			default: 64,
+		},
+		btnSize: {
+			type: [Number, String, null],
+			default: null,
+		},
+		precision: {
+			type: [Number, null],
+			default: 0,
+		},
+		theme: {
+			type: [String, null],
+			default: 'card',
+		},
+		mainColor: {
+			type: [String, null],
+			default: '',
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		disablePlus: {
+			type: [Boolean, null],
+			default: false,
+		},
+		disableMinus: {
+			type: [Boolean, null],
+			default: false,
+		},
+		disableInput: {
+			type: [Boolean, null],
+			default: false,
+		},
+		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',
+		},
+		badgeMax: {
+			type: [Number, null],
+			default: 99,
+		},
+	},
+	model: {
+		prop: 'value',
+		// 派发事件名，更新父组件数据
+		event: 'input',
+	},
+	data() {
+		return {
+			clickTask: null, // click完成任务和allowStopStatus搭配使用
+			allowStopStatus: false, // 允许阻止后续的事件触发
+		};
+	},
+	created() {},
+	computed: {
+		cmpButtonStyle() {
+			let style = {};
+			style['width'] = utils.formatPx(this.cmpBtnSize);
+			style['height'] = utils.formatPx(this.theme == 'card' ? this.cmpBtnSize : this.cmpBtnSize * 0.8);
+			style['padding'] = '0';
+			// #ifdef H5
+			style['cursor'] = this.disabled || this.cmpDisablePlus ? 'not-allowed' : 'pointer';
+			// #endif
+			style['borderRadius'] = utils.formatPx(16);
+			style['border'] = 'none';
+			if (this.theme == 'line') {
+				style['borderRadius'] = '0';
+			}
+			return style;
+		},
+		cmpLeftButtonStyle() {
+			let style = {};
+			if (this.theme == 'card') {
+				style['border'] = `${utils.formatPx('2')} solid ${
+					(this.cmpDisableMinus ? '#cccccc' : this.cmpMainColor) + '80'
+				}`;
+			}
+			if (this.theme == 'line') {
+				style['border'] = `none`;
+			}
+			style['background'] = '#ffffff';
+			style['backgroundColor'] = '#ffffff';
+			// #ifdef H5
+			style['cursor'] = this.cmpDisableMinus ? 'not-allowed' : 'pointer';
+			// #endif
+			return utils.deepMerge(utils.deepClone(this.cmpButtonStyle), style);
+		},
+		cmpRightButtonStyle() {
+			let style = {};
+			style['background'] = this.cmpDisablePlus ? '#cccccc' : this.cmpMainColor;
+			style['backgroundColor'] = this.cmpDisablePlus ? '#cccccc' : this.cmpMainColor;
+			if (this.theme == 'line') {
+				style['background'] = '#ffffff';
+				style['backgroundColor'] = '#ffffff';
+			}
+			return utils.deepMerge(utils.deepClone(this.cmpButtonStyle), style);
+		},
+		cmpInputStyle() {
+			let style = {};
+			style['width'] = utils.formatPx(this.inputWidth);
+			style['height'] = utils.formatPx(this.theme == 'card' ? this.cmpBtnSize : this.cmpBtnSize * 0.8);
+			style['margin'] = `0 ${utils.formatPx(4)}`;
+			style['color'] = this.disabled || this.disableInput ? '#cccccc' : '#000000';
+			// #ifdef H5
+			style['cursor'] = this.disabled || this.cmpDisablePlus ? 'not-allowed' : 'pointer';
+			// #endif
+			if (this.theme == 'line') {
+				style['borderLeft'] = `${utils.formatPx('2')} solid #EEEEEE`;
+				style['borderRight'] = `${utils.formatPx('2')} solid #EEEEEE`;
+				style['margin'] = `0`;
+				style['padding'] = `0 ${utils.formatPx(8)}`;
+				style['width'] = utils.formatPx(this.inputWidth + 16);
+			}
+			return style;
+		},
+		cmpDisablePlus() {
+			if (this.disabled || this.disablePlus) {
+				return true;
+			} else {
+				return this.value >= this.max;
+			}
+		},
+		cmpDisableMinus() {
+			if (this.disabled || this.disableMinus) {
+				return true;
+			} else {
+				return this.value <= this.min;
+			}
+		},
+		cmpStyle() {
+			let style = {};
+			if (this.theme == 'line') {
+				style['border'] = `${utils.formatPx('0.6')} solid #EEEEEE`;
+				style['height'] = utils.formatPx(this.theme == 'card' ? this.cmpBtnSize : this.cmpBtnSize * 0.8);
+				style['borderRadius'] = utils.formatPx(24);
+				style['overflow'] = 'hidden';
+			}
+			return style;
+		},
+		cmpBtnSize() {
+			return this.btnSize ? this.btnSize : this.theme == 'card' ? 48 : 60;
+		},
+		cmpMainColor() {
+			return this.mainColor ? this.mainColor : color.getColor().steThemeColor;
+		},
+	},
+	methods: {
+		handleValue(value) {
+			// 处理最大和最小值
+			if (value <= this.min) {
+				value = this.min;
+			}
+			if (value >= this.max) {
+				value = this.max;
+			}
+			return Number(Number(value).toFixed(this.precision));
+		},
+		blur(event) {
+			let { value } = event.detail ?? 0;
+			// 解决实际值没有变化 显示值不刷新的问题
+			this.$emit('input', value);
+			value = this.handleValue(value);
+			this.$nextTick(() => {
+				this.$emit('input', value);
+				event.detail.value = value;
+				this.$emit('blur', event);
+			});
+		},
+		focus(event) {
+			this.$emit('focus', event);
+		},
+		async plus() {
+			if (!this.disabled && !this.cmpDisablePlus) {
+				this.allowStopStatus = false;
+				this.clickTask = null;
+				this.clickTask = new Promise((resolve) => {
+					this.$emit('plus', this.value, this.allowStop, resolve);
+				});
+				if (this.allowStopStatus) {
+					await this.clickTask;
+				}
+				let value = this.handleValue(this.value + this.step);
+				this.$emit('input', value);
+				this.$emit('change', value);
+			}
+		},
+		async minus() {
+			if (!this.disabled && !this.cmpDisableMinus) {
+				this.allowStopStatus = false;
+				this.clickTask = null;
+				this.clickTask = new Promise((resolve) => {
+					this.$emit('minus', this.value, this.allowStop, resolve);
+				});
+				if (this.allowStopStatus) {
+					await this.clickTask;
+				}
+				let value = this.handleValue(this.value - this.step);
+				this.$emit('input', value);
+				this.$emit('change', value);
+			}
+		},
+		// 允许阻止后续操作
+		allowStop() {
+			this.allowStopStatus = true;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-stepper-root {
+	display: flex;
+
+	.input {
+		font-weight: bold;
+		color: #000000;
+		text-align: center;
+		.input-el {
+			height: 100%;
+			font-size: 28rpx;
+		}
+	}
+
+	.button-icon {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}
+</style>

package/components/ste-steps/README.md

@@ -0,0 +1,132 @@
+# Steps 步骤条
+
+步骤条组件,拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。
+
+---$
+
+### 代码演示
+JavaScript后面的演示代码中涉及到的变量和方法都使用本javasaript代码
+```
+export default {
+	data() {
+		return {
+			active: 0,
+		};
+	},
+	methods: {
+		goToNext() {
+			this.active++;
+		},
+		toToast(index) {
+			this.showToast({
+				title: `进度：${index}`,
+			});
+		},
+	},
+};
+```
+
+### 基础用法
+`active` 为步骤进度，为 `Number` 类型，步骤的下标。
+```
+<ste-steps :active="active"  @clickStep="toToast">
+	<ste-step></ste-step>
+	<ste-step></ste-step>
+	<ste-step></ste-step>
+</ste-steps>
+```
+### 设置标题和描述信息
+可以通过 `title` 和 `description` 设置步骤的标题和描述信息。如果不设置标题，则会使用默认的文案。
+```
+<ste-steps :active="active">
+	<ste-step title="步骤1" description="注册1个账号"></ste-step>
+	<ste-step title="步骤2" description="登录账号并绑定手机"></ste-step>
+	<ste-step title="步骤3" description="完善个人信息"></ste-step>
+</ste-steps>
+```
+
+### 修改图标
+- 可以通过 `icon` 属性设置步骤的图标，传入图标的名称，也可以通过 `icon` 的 slot 插槽自定义图标
+- 优先级：插槽 > 点状 > icon属性 > 默认图标
+```
+<ste-steps :active="active">
+	<ste-step></ste-step>
+	<ste-step icon="&#xe6a2;"></ste-step>
+	<ste-step>
+		<template v-slot:icon>
+			<ste-icon class="ste-step-icon-inner" code="&#xe688;" :size="40" color="red"></ste-icon>
+		</template>
+	</ste-step>
+</ste-steps>
+```
+
+### 竖向步骤条
+可以通过 `direction` 属性设置步骤条方向，`row`：横向，`column`：竖向，默认为`row`
+```
+<view class="item-block" style="height: 600rpx; padding: 30rpx 60rpx">
+	<ste-steps :active="active" direction="column">
+		<ste-step description="注册1个账号"></ste-step>
+		<ste-step description="登录账号并绑定手机"></ste-step>
+		<ste-step description="完善个人信息"></ste-step>
+	</ste-steps>
+</view>
+```
+
+### 点状步骤和垂直方向
+可以通过 `dot` 属性设置点状步骤条
+```
+<view class="item-block" style="height: 600rpx; padding: 30rpx 60rpx">
+	<ste-steps :active="active" dot direction="column">
+		<ste-step></ste-step>
+		<ste-step></ste-step>
+		<ste-step></ste-step>
+	</ste-steps>
+</view>
+```
+
+### 修改状态
+设置 `status`，支持 `finished`（完成）、`process`（进行中）、`error`（失败） 三种状态。
+```
+<ste-steps :active="active">
+	<ste-step title="绑定手机" status="error"></ste-step>
+	<ste-step title="重新绑定手机"></ste-step>
+	<ste-step title="步骤3"></ste-step>
+</ste-steps>
+```
+
+---$
+### API
+#### Steps组件属性(Props)
+
+| 参数			| 说明		| 类型		| 默认值		| 可选值							| 支持版本	|
+| ---			| ---		| ---		| ---		| ---							| ---		|
+| `active`		| 步骤进度	| `Number`	| `0`		| -								| -			|
+| `direction`	| 步骤条方向	| `String`	| `row`		| `row`：横向 <br/>`column`：竖向	| -			|
+| `dot`			| 点状步骤条	| `Boolean`	| `false`	| -								| -			|
+
+
+#### Steps Events
+
+|事件名			|说明					|事件参数				|支持版本	|
+|---			|---					|---					|---		|
+| `clickStep`	|点击步骤的标题或图标时触发	| `index`: 点击的步骤序号	| -			|
+
+#### Step组件属性(Props)
+
+| 参数			| 说明								| 类型		| 默认值	| 可选值	| 支持版本	|
+| ---			| ---								| ---		| ---	| ---	| ---		|
+| `title`		| 流程步骤的标题						| `String`	| -		| -		| -			|
+| `description`	| 流程步骤的描述性文字(支持 html 结构)	| `String`	| -		| -		| -			|
+| `icon`		| 图标								| `String`	| -		| -		| -			|
+| `status`		| 步骤状态							| `String`	| -		| -		| -			|
+
+#### Step Slots
+
+|插槽名		|说明		|插槽参数	|支持版本	|
+|---		|---		|---		|---		|
+|`title`	|步骤标题	|-			|-			|
+|`content`	|步骤内容	|-			|-			|
+|`icon`		|步骤图标	|-			|-			|
+
+---$
+{{qinpengfei}}

package/components/ste-steps/ste-steps.vue

@@ -0,0 +1,65 @@
+<template>
+	<view class="ste-steps-root" :class="[`ste-steps-${direction}`]">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-steps 步骤条
+ * @description 步骤条组件,拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-steps
+ * @property {Number} active 步骤进度默认 0
+ * @property {Boolean} direction 步骤条方向 默认 row
+ * @value  row  横向 {{String}}
+ * @value  column 竖向 {{String}}
+ * @property {Boolean} dot 点状步骤条 默认 false
+ * @event {Function} clickStep 点击步骤的标题或图标时触发
+ */
+
+export default {
+	group: '展示组件',
+	title: 'Steps 步骤条',
+	name: 'steps',
+	options: {
+		virtualHost: true,
+	},
+	props: {
+		active: {
+			type: [Number, null],
+			default: 0,
+		},
+		direction: {
+			type: [String, null],
+			default: 'row',
+		},
+		dot: {
+			type: [Boolean, null],
+			default: false,
+		},
+	},
+	provide() {
+		return {
+			steps: this,
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-steps-root {
+	display: flex;
+	width: 100%;
+	flex: 1;
+}
+.ste-steps-column {
+	flex-flow: column;
+	height: 100%;
+}
+
+.ste-steps-row {
+	flex-direction: row;
+	flex: 1;
+}
+</style>

package/components/ste-sticky/README.md

@@ -0,0 +1,52 @@
+# Sticky 吸顶
+- 吸顶组件
+
+---$
+
+### 代码演示
+
+#### 基础用法
+- 事件`fixed`监听组件进入粘性布局时触发
+- 事件`unfixed`监听组件取消粘性布局时触发
+```html
+<ste-sticky @fixed="onFixed" @unfixed="onUnfixed">
+	<ste-button :round="false">粘性布局的按钮</ste-button>
+</ste-sticky>
+
+<script>
+export default{
+	methods: {
+		onFixed() {
+			console.log('吸顶状态时触发');
+		},
+		onUnfixed() {
+			console.log('非吸顶状态时触发');
+		},
+	},
+}
+</script>
+```
+
+
+
+---$
+### API
+#### Swiper Props
+
+| 属性名						| 说明																					| 类型								| 默认值																			| 可选值	| 支持版本	|
+| -----							| -----																				| -----							| -----																			| -----	| -----		|
+| `offsetTop`				| 吸顶时与顶部的距离，单位rpx（默认 0 ）				| `Number`,`String`	| `0`																				| -			| -				|
+| `customNavHeight`	| 航栏的高度，单位rpx（没有导航栏时，请设置为0）	| `Number`,`String`	| H5时为`44`<br/>小程序时根据胶囊位置自动计算	| -			| -				|
+| `disabled`				| 是否禁用																			| `Boolean`					| `false`																		| -			| -				|
+| `background`			| 组件背景，默认																| `String`					| `#FFF`																		| -			| -				|
+| `zIndex`					| 吸顶时的z-index值														| `Number`					| `98`																			| -			| -				|
+
+#### Swiper Events
+|事件名			|说明							|事件参数	|支持版本	|
+| ---				| ---							| ---			| ---			|
+| `fixed`		| 吸顶状态时触发				| -				| -				|
+| `unfixed`	| 非吸顶状态时触发	| -				| -				|
+
+
+---$
+{{xuyajun}}