stellar-ui-v2 1.35.3

package/components/ste-sticky/ste-sticky.vue

@@ -0,0 +1,127 @@
+<template>
+	<view class="ste-sticky" :id="elId" :style="[cmpRootStyle]">
+		<slot />
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils';
+/**
+ * sticky 吸顶
+ * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-sticky
+ * @property {String ｜ Number}	offsetTop		吸顶时与顶部的距离，单位rpx（默认 0 ）
+ * @property {String ｜ Number}	customNavHeight	航栏的高度（没有导航栏时，请设置为0）
+ * @property {Boolean}		disabled		是否开启吸顶功能 （默认 false ）
+ * @property {String}			background	组件背景，默认#fff
+ * @property {String ｜ Number}	zIndex			吸顶时的z-index值
+ * @event {Function} fixed		组件吸顶时触发
+ * @event {Function} unfixed	组件取消吸顶时触发
+ * @example <ste-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></ste-sticky>
+ */
+export default {
+	name: 'ste-sticky',
+	group: '基础组件',
+	title: 'Sticky 吸顶',
+	props: {
+		// 吸顶容器到顶部某个距离的时候，进行吸顶
+		offsetTop: {
+			type: [String, Number, null],
+			default: 0,
+		},
+		// 导航栏的高度(如果没有导航栏请设置为0)
+		customNavHeight: {
+			type: [String, Number, null],
+			default: () => null,
+		},
+		// 是否禁用吸顶功能
+		disabled: {
+			type: [Boolean, null],
+			default: () => false,
+		},
+		// 吸顶区域的背景
+		background: {
+			type: [String, null],
+			default: () => '#fff',
+		},
+		// z-index值
+		zIndex: {
+			type: [String, Number, null],
+			default: () => 98,
+		},
+	},
+	data() {
+		return {
+			elId: utils.guid(),
+		};
+	},
+	computed: {
+		cmpRootStyle() {
+			const style = {
+				...utils.bg2style(this.background),
+			};
+			if (!this.disabled) {
+				style.position = 'sticky';
+				style.zIndex = this.zIndex;
+				style.top = utils.formatPx(this.offsetTop);
+			}
+			return style;
+		},
+		relativeToViewportTop() {
+			let customNavHeight = 0;
+			if (this.customNavHeight === null) {
+				// #ifdef H5
+				customNavHeight = 44;
+				// #endif
+				// #ifndef H5
+				customNavHeight = utils.System.getNavbarBottom();
+				// #endif
+			} else {
+				customNavHeight = utils.formatPx(this.customNavHeight, 'num');
+			}
+			return customNavHeight + utils.formatPx(this.offsetTop, 'num');
+		},
+	},
+	mounted() {
+		if (this.disabled) return;
+		setTimeout(() => {
+			this.observeContent();
+		}, 20);
+	},
+	methods: {
+		observeContent() {
+			// 先断掉之前的观察
+			this.disconnectObserver('contentObserver');
+			const contentObserver = uni.createIntersectionObserver(this, {
+				thresholds: [0.8, 1],
+			});
+			// 到屏幕顶部的高度时触发
+			contentObserver.relativeToViewport({ top: -(this.relativeToViewportTop + 1) });
+			// 绑定观察的元素
+			contentObserver.observe(`#${this.elId}`, (res) => {
+				this.setFixed(res.boundingClientRect.top);
+			});
+			this.contentObserver = contentObserver;
+		},
+		setFixed(top) {
+			const bool = top <= this.relativeToViewportTop;
+			// 判断是否处于吸顶条件范围
+			if (bool) this.$emit('fixed');
+			else this.$emit('unfixed');
+		},
+		disconnectObserver(observerName) {
+			const observer = this[observerName];
+			observer && observer.disconnect();
+		},
+	},
+	destroyed() {
+		this.disconnectObserver();
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-sticky {
+	width: 100%;
+}
+</style>

package/components/ste-swipe-action/README.md

@@ -0,0 +1,197 @@
+# SwipeAction 滑动单元格
+- 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作。
+- 如果把该组件通过v-for用于左滑删除的列表，请保证循环的:key是一个唯一值，可以用数据的id或者title替代。 不能是数组循环的index，否则删除的时候，可能会出现数据错乱
+
+---$
+
+### 代码演示
+- 演示代码中公用css样式
+```css
+.content-view {
+	height: 90rpx;
+	border-bottom: 1px solid #fff;
+	background-color: #f5f5f5;
+}
+.test-btn {
+	background-color: #dd524d;
+	color: #fff;
+	line-height: 90rpx;
+	text-align: center;
+	width: 100rpx;
+	height: 100%;
+}
+```
+
+#### 基础用法
+- 插槽`default`为单元格内容区域
+- 插槽`right`为单元格右侧内容区域
+```html
+<ste-swipe-action>
+	<view class="content-view">内容区域</view>
+	<template v-slot:right>
+		<div class="test-btn">删除</div>
+	</template>
+</ste-swipe-action>
+```
+#### 调用方法打开或关闭
+- 方法`open`可打开单元格
+	- 参数为需要打开的方向（默认同mode）
+- 方法`close`可关闭单元格
+```html
+<ste-swipe-action ref="swipe">
+	<view class="content-view">内容区域</view>
+	<template v-slot:right>
+		<div class="test-btn">删除</div>
+	</template>
+</ste-swipe-action>
+<ste-button mode="200" @click="openSwipe">打开</ste-button>
+<ste-button mode="200" @click="closeSwipe">关闭</ste-button>
+<script>
+	export default {
+		methods:{
+			openSwipe() {
+				this.$refs.swipe.open();
+			},
+			closeSwipe() {
+				this.$refs.swipe.close();
+			},
+		}		
+	}
+</script>
+```
+#### 滑动方向、开关按钮
+- 属性`mode`可以设置滑动方向，默认为`right`，可选值为`left`、`all`
+- 属性`leftIcon`和`rightIcon`可以设置是否显示开关按钮
+- 事件`open`可以监听单元格的打开
+	- 参数为打开的方向
+- 事件`close`可以监听单元格的关闭
+
+```html
+<ste-swipe-action mode="all" @open="onOpen" @close="onClose" leftIcon rightIcon>
+	<template v-slot:left>
+		<div class="test-btn">收藏</div>
+	</template>
+	<view class="content-view">内容区域</view>
+	<template v-slot:right>
+		<div class="test-btn">删除</div>
+	</template>
+</ste-swipe-action>
+<script>
+export default{
+	methods:{
+		onOpen(direction) {
+			this.showToast({
+				title: `打开方向：${direction}`,
+				icon: 'none',
+			});
+		},
+		onClose() {
+			this.showToast({
+				title: '关闭',
+				icon: 'none',
+			});
+		},
+	}
+}
+</script>
+```
+#### 单元格组
+- 标签`ste-swipe-action-group`用于包裹多个单元格
+- 事件`open`监听组内单元格的开启
+	- 第一个参数为打开的方向
+	- 第二个参数为打开的单元格索引
+- 事件`close`监听组内单元格的关闭
+	- 参数为关闭的单元格索引
+- 方法`open`可以用于打开指定单元格
+	- 参数1为需要打开的方向（默认同mode）
+	- 参数2为需要打开的单元格索引
+- 方法`close`可以用于关闭指定单元格
+	- 参数为需要关闭的单元格索引
+```html
+<ste-swipe-action-group @open="onOpen" @close="onClose" ref="swipeGroup">
+	<ste-swipe-action>
+		<view class="content-view">11111</view>
+		<template v-slot:right>
+			<div class="test-btn">删除</div>
+		</template>
+	</ste-swipe-action>
+	<ste-swipe-action>
+		<view class="content-view">22222</view>
+		<template v-slot:right>
+			<div class="test-btn">删除</div>
+		</template>
+	</ste-swipe-action>
+</ste-swipe-action-group>
+<view style="margin-top: 12rpx">
+	<ste-button mode="200" @click="openSwipeGroup(0)">打开第1行</ste-button>
+	<ste-button mode="200" @click="closeSwipeGroup(0)">关闭第1行</ste-button>
+	<ste-button mode="200" @click="openSwipeGroup(1)">打开第2行</ste-button>
+	<ste-button mode="200" @click="closeSwipeGroup(1)">关闭第2行</ste-button>
+</view>
+
+<script>
+	export default {
+		methods:{
+			openSwipeGroup(index) {
+				this.$refs.swipeGroup.open('right', index);
+			},
+			closeSwipeGroup(index) {
+				this.$refs.swipeGroup.close(index);
+			},
+		}		
+	}
+</script>
+```
+
+---$
+### API
+#### SwipeAction Props
+
+| 属性名					| 说明																				| 类型								| 默认值		| 可选值																											| 支持版本	|
+| -----						| -----																			| -----							| -----		| -----																											| -----		|
+| `mode`					| 模式																				| `String`					| `right`	| `right`：右侧滑动<br/>`left`：左侧滑动<br/>`all`：左右滑动	| -				|
+| `disabled`			| 禁用																				| `Boolean`					| `false`	| -																													| -				|
+| `swipeThreshold`| 灵敏度（0-1之间的小数，数值越小灵敏度越高）	| `Number`					| `0.35`	| -																													| -				|
+| `duration`			| 动画时长，单位ms														| `Number`,`String`	| `300`		| -																													| -				|
+| `leftIcon`			| 是否显示左侧图标														| `Boolean`					| `false`	| -																													| -				|
+| `rightIcon`			| 是否显示右侧图标														| `Boolean`					| `false`	| -																													| -				|
+
+#### SwipeAction Method
+|方法名		|说明									|方法参数																			|支持版本	|
+| ---			| ---									| ---																					| ---			|
+| `open`	| 打开滑块，参数为方向	| `left`/`right`：需要打开的方向，默认同`mode`	| -				|
+| `close`	| 关闭滑块							| -																						| -				|
+
+#### SwipeAction Events
+|事件名		|说明												|事件参数										|支持版本	|
+| ---			| ---												| ---												| ---			|
+| `open`	| 打开滑块时触发，参数为方向	| `left`/`right`：打开的方向	| -				|
+| `close`	| 关闭滑块时触发							| -													| -				|
+
+#### SwipeActionGroup Props
+
+| 属性名					| 说明																				| 类型								| 默认值		| 可选值																											| 支持版本	|
+| -----						| -----																			| -----							| -----		| -----																											| -----		|
+| `mode`					| 模式																				| `String`					| `right`	| `right`：右侧滑动<br/>`left`：左侧滑动<br/>`all`：左右滑动	| -				|
+| `autoClose`			| 是否自动关闭其他swipe											| `Boolean`					| `true`	| -																													| -				|
+| `disabled`			| 禁用																				| `Boolean`					| `false`	| -																													| -				|
+| `swipeThreshold`| 灵敏度（0-1之间的小数，数值越小灵敏度越高）	| `Number`					| `0.35`	| -																													| -				|
+| `duration`			| 动画时长，单位ms														| `Number`,`String`	| `300`		| -																													| -				|
+| `leftIcon`			| 是否显示左侧图标														| `Boolean`					| `false`	| -																													| -				|
+| `rightIcon`			| 是否显示右侧图标														| `Boolean`					| `false`	| -																													| -				|
+
+#### SwipeActionGroup Method
+| 方法名	| 说明			| 方法参数																																| 支持版本	|
+| ---			| ---			| ---																																		| ---			|
+| `open`	| 打开滑块	| `left`/`right`:需要打开的方向，默认同`mode`,<br/>`index`:需要打开的下标	| -				|
+| `close`	| 关闭滑块	| `index`																																| -				|
+
+#### SwipeActionGroup Events
+| 事件名	| 说明						| 事件参数																				| 支持版本	|
+| ---			| ---						| ---																						| ---			|
+| `open`	| 打开滑块时触发	| `left`/`right`：打开的方向,`index`：打开的下标	| -				|
+| `close`	| 关闭滑块时触发	| -																							| -				|
+
+
+---$
+{{xuyajun}}

package/components/ste-swipe-action/ste-swipe-action.vue

@@ -0,0 +1,303 @@
+<template>
+	<view class="ste-swipe-action-root">
+		<view class="swipe-action-view" :style="[cmpTransform]">
+			<view class="swipe-action-left-icon" v-if="cmpLeftIcon" @click="iconOpen('left')">
+				<view class="swipe-icon" :class="{ active: dataTranslateX > 0 }">
+					<ste-icon code="&#xe674;" size="30rpx" />
+				</view>
+			</view>
+			<view class="swipe-action-right-icon" v-if="cmpRightIcon" @click="iconOpen('right')">
+				<view class="swipe-icon" :class="{ active: dataTranslateX < 0 }">
+					<ste-icon code="&#xe673;" size="30rpx" />
+				</view>
+			</view>
+			<view
+				@mousedown="onTouchstart"
+				@mousemove="onTouchmove"
+				@mouseup="onTouchend"
+				@mouseleave="onTouchend"
+				@touchstart="onTouchstart"
+				@touchmove="onTouchmove"
+				@touchend="onTouchend"
+				@touchcancel="onTouchend"
+			>
+				<view class="swipe-action-left">
+					<slot name="left"></slot>
+				</view>
+				<view class="swipe-action-content">
+					<slot></slot>
+				</view>
+				<view class="swipe-action-right">
+					<slot name="right"></slot>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import { childMixin } from '../../utils/mixin.js';
+import TouchEvent from '../ste-touch-swipe/TouchEvent.js';
+/**
+ * SwipeAction 滑动单元格
+ * @description 滑动单元格
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-swipe-action
+ * @property {String}	mode 模式
+ * @value right 右侧滑动
+ * @value left 左侧滑动
+ * @value all 左右滑动
+ * @property {Boolean}		disabled		禁用
+ * @property {String ｜ Number}	swipeThreshold	灵敏度（0-1之间的小数，数值越小灵敏度越高）
+ * @property {String ｜ Number}	duration	动画时长，单位ms（默认300）
+ * @property {Boolean}	leftIcon	是否显示左侧图标（默认false）
+ * @property {Boolean}	rightIcon	是否显示右侧图标（默认false）
+ * @event {Function} open	打开滑块时触发，参数为方向('left'|'right')
+ * @event {Function} close 关闭滑块时触发
+ */
+export default {
+	group: '展示组件',
+	title: 'SwipeAction 滑动单元格',
+	name: 'ste-swipe-action',
+	mixins: [childMixin('ste-swipe-action-group')],
+	props: {
+		mode: {
+			type: [String, null],
+			default: () => null,
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: () => null,
+		},
+		swipeThreshold: {
+			type: [Number, String, null],
+			default: () => null,
+		},
+		duration: {
+			type: [Number, String, null],
+			default: () => null,
+		},
+		leftIcon: {
+			type: [Boolean, null],
+			default: () => null,
+		},
+		rightIcon: {
+			type: [Boolean, null],
+			default: () => null,
+		},
+	},
+	data() {
+		return {
+			touch: new TouchEvent(),
+			moveing: false,
+			translateX: 0,
+			dataTranslateX: 0,
+			leftWidth: 0,
+			rightWidth: 0,
+			changeCallback: null,
+		};
+	},
+	computed: {
+		cmpMode() {
+			return this.mode || this.parent?.mode || 'right';
+		},
+		cmpLeft() {
+			return ['all', 'left'].indexOf(this.cmpMode) !== -1;
+		},
+		cmpRight() {
+			return ['all', 'right'].indexOf(this.cmpMode) !== -1;
+		},
+		cmpDisabled() {
+			return this.disabled !== null ? this.disabled : this.parent?.disabled;
+		},
+		cmpSwipeThreshold() {
+			return this.swipeThreshold || this.parent?.swipeThreshold || 0.35;
+		},
+		cmpDuration() {
+			return this.duration || this.parent?.duration || 300;
+		},
+		cmpLeftIcon() {
+			return this.leftIcon !== null ? this.leftIcon : this.parent?.leftIcon;
+		},
+		cmpRightIcon() {
+			return this.rightIcon !== null ? this.rightIcon : this.parent?.rightIcon;
+		},
+		cmpTransform() {
+			return {
+				transform: `translateX(${this.translateX}px)`,
+				transitionDuration: this.moveing ? 0 : `${this.cmpDuration}ms`,
+			};
+		},
+	},
+	mounted() {},
+	methods: {
+		/**
+		 * 打开侧滑
+		 * @param {'right'|'left'} 打开哪一端，默认同mode属性
+		 */
+		open(direction = this.cmpMode) {
+			setTimeout(async () => {
+				if (direction === 'left') {
+					const l = await utils.querySelector('.swipe-action-left', this);
+					if (!l) return;
+					this.setTransform(l.width);
+				} else {
+					const r = await utils.querySelector('.swipe-action-right', this);
+					if (!r) return;
+					this.setTransform(-r.width);
+				}
+			}, 30);
+		},
+		close() {
+			this.setTransform(0);
+		},
+		iconOpen(direction) {
+			if (this.cmpDisabled) return;
+			if (this.dataTranslateX) this.close();
+			else this.open(direction);
+		},
+		setTransform(moveX) {
+			this.translateX = moveX;
+			if (this.dataTranslateX === moveX) return;
+			this.dataTranslateX = moveX;
+			if (this.changeCallback) this.changeCallback(moveX);
+			if (moveX === 0) this.$emit('close');
+			else this.$emit('open', moveX > 0 ? 'left' : 'right');
+		},
+		async onTouchstart(e) {
+			if (this.cmpDisabled) return;
+			this.moveing = true;
+			this.touch.touchStart(e);
+			if (this.cmpLeft) {
+				const l = await utils.querySelector('.swipe-action-left', this);
+				if (l?.width) this.leftWidth = l.width;
+			} else {
+				this.leftWidth = 0;
+			}
+			if (this.cmpRight) {
+				const r = await utils.querySelector('.swipe-action-right', this);
+				if (r?.width) this.rightWidth = r.width;
+			} else {
+				this.rightWidth = 0;
+			}
+		},
+		onTouchmove(e) {
+			if (this.cmpDisabled) return;
+			const d = this.touch.touchMove(e);
+			if (!d) return;
+			let x = this.dataTranslateX + d.moveX;
+			if (this.dataTranslateX > 0 && x < 0) {
+				// 左侧按钮显示的时候，不能直接滑动到右侧按钮
+				x = 0;
+			} else if (this.dataTranslateX < 0 && x > 0) {
+				// 右侧按钮显示的时候，不能直接滑动到左侧按钮
+				x = 0;
+			} else if (!this.cmpLeft && x > 0) {
+				// 没有左侧按钮时，不能滑动到左侧
+				x = 0;
+			} else if (this.cmpLeft && x > this.leftWidth) {
+				// 左侧按钮显示时，左侧滑动距离不能超过按钮宽度
+				x = this.leftWidth;
+			} else if (!this.cmpRight && x < 0) {
+				// 没有右侧按钮时，不能滑动到右侧
+				x = 0;
+			} else if (this.cmpRight && x < -this.rightWidth) {
+				// 右侧按钮显示时，右侧滑动距离不能超过按钮宽度
+				x = -this.rightWidth;
+			}
+			this.translateX = x;
+		},
+		onTouchend(e) {
+			this.moveing = false;
+			if (this.cmpDisabled) return;
+			const { moveX } = this.touch.touchEnd(e);
+			let x = this.dataTranslateX;
+			if (x === 0) {
+				if (moveX > 0 && this.cmpLeft && moveX > this.leftWidth * this.cmpSwipeThreshold) {
+					x = this.leftWidth;
+				} else if (moveX < 0 && this.cmpRight && Math.abs(moveX) > this.rightWidth * this.cmpSwipeThreshold) {
+					x = -this.rightWidth;
+				}
+			} else if (x > 0 && moveX < 0 && Math.abs(moveX) > this.leftWidth * this.cmpSwipeThreshold) {
+				x = 0;
+			} else if (x < 0 && moveX > 0 && moveX > this.rightWidth * this.cmpSwipeThreshold) {
+				x = 0;
+			}
+			setTimeout(() => {
+				this.setTransform(x);
+			}, 10);
+		},
+		onchange(callback) {
+			this.changeCallback = callback;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-swipe-action-root {
+	width: 100%;
+	position: relative;
+	overflow: hidden;
+
+	.swipe-action-left-icon,
+	.swipe-action-right-icon {
+		width: 30rpx;
+		height: 60rpx;
+		position: absolute;
+		top: 50%;
+		z-index: 10;
+		transform: translateY(-50%);
+		overflow: hidden;
+		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
+		background-color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.swipe-icon {
+			width: 30rpx;
+			height: 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: 300ms;
+			&.active {
+				transform: rotate(180deg);
+			}
+		}
+	}
+	.swipe-action-left-icon {
+		left: 0;
+		border-radius: 0 30rpx 30rpx 0;
+	}
+	.swipe-action-right-icon {
+		right: 0;
+		border-radius: 30rpx 0 0 30rpx;
+	}
+	.swipe-action-view {
+		width: 100%;
+		position: relative;
+		.swipe-action-left {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 2;
+			transform: translateX(-100%);
+		}
+		.swipe-action-content {
+			position: relative;
+			width: 100%;
+			z-index: 5;
+		}
+		.swipe-action-right {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			right: 0;
+			z-index: 2;
+			transform: translateX(100%);
+		}
+	}
+}
+</style>