stellar-ui-v2 1.35.3

package/components/ste-date-picker/ste-date-picker.vue

@@ -0,0 +1,407 @@
+<template>
+	<view class="ste-date-picker-root">
+		<ste-picker
+			:columns="columns"
+			:title="title"
+			:showToolbar="showToolbar"
+			:cancelText="cancelText"
+			:cancelColor="cancelColor"
+			:confirmText="confirmText"
+			:confirmColor="cmpConfirmColor"
+			:visibleItemCount="visibleItemCount"
+			:defaultIndex="innerDefaultIndex"
+			:itemHeight="itemHeight"
+			@change="change"
+			@cancel="cancel"
+			@confirm="confirm"
+			rootClass="ste-date-picker-view"
+		></ste-picker>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import dayjs from '../../utils/dayjs.min.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+/**
+ * ste-date-picker 时间日期选择器
+ * @description 此选择器用于时间日期
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-date-picker
+ * @property {String | Number}	value				绑定值
+ * @property {Boolean}			showToolbar			是否显示顶部的操作栏  ( 默认 true )
+ * @property {String}			title				顶部标题
+ * @property {String}			mode				展示格式 (默认 all)
+ * @value all 年月日时分秒 {{String}}
+ * @value datetime 年月日时分 {{String}}
+ * @value date 年月日 {{String}}
+ * @value year-month 年月 {{String}}
+ * @value month-day 月日 {{String}}
+ * @value time 时分秒 {{String}}
+ * @value hour-minute 时分 {{String}}
+ * @value minute-second 分秒 {{String}}
+ * @property {Number}			maxDate				可选的最大时间  默认值为后10年
+ * @property {Number}			minDate				可选的最小时间  默认值为前10年
+ * @property {Function}			filter				选项过滤函数
+ * @property {Function}			formatter			选项格式化函数
+ * @property {String | Number}	itemHeight			各列中，单个选项的高度   ( 默认 36 )
+ * @property {String}			cancelText			取消按钮的文字  ( 默认 '取消' )
+ * @property {String}			confirmText			确认按钮的文字  ( 默认 '确认' )
+ * @property {String}			cancelColor			取消按钮的颜色  ( 默认 '#909193' )
+ * @property {String}			confirmColor		确认按钮的颜色  ( 默认 '#3c9cff' )
+ * @property {String | Number}	visibleItemCount	每列中可见选项的数量  ( 默认 5 )
+ * @event {Function} confirm 点击确定按钮，返回当前选择的值
+ * @event {Function} change 当选择值变化时触发
+ * @event {Function} cancel 点击取消按钮
+ */
+
+const DEFAULT_DATE = dayjs(new Date(1970, 1, 1, 0, 0, 0));
+
+const padZero = (value) => {
+	return `00${value}`.slice(-2);
+};
+const times = (n, iteratee) => {
+	let index = -1;
+	const result = Array(n < 0 ? 0 : n);
+	while (++index < n) {
+		result[index] = iteratee(index);
+	}
+	return result;
+};
+
+export default {
+	group: '表单组件',
+	title: 'DatePicker 时间选择器',
+	name: 'ste-date-picker',
+	props: {
+		// 是否展示顶部的操作栏
+		showToolbar: {
+			type: [Boolean, null],
+			default: true,
+		},
+		// 绑定值
+		value: {
+			type: [String, Number, null],
+			default: '',
+		},
+		// 顶部标题
+		title: {
+			type: [String, null],
+			default: '',
+		},
+		/**
+		 * 年月日时分秒(all)，年月日时分(datetime)，年月日(date)，年月(year-month)，月日(month-day)，时分秒(time)，时分(hour-minute)，分秒(minute-second)，
+		 */
+		mode: {
+			type: [String, null],
+			default: 'all',
+		},
+		// 可选的最大时间
+		maxDate: {
+			type: [Number, String, null],
+			// 最大默认值为后10年
+			default: new Date(new Date().getFullYear() + 10, 11, 31, 23, 59, 59).getTime(),
+		},
+		// 可选的最小时间
+		minDate: {
+			type: [Number, String, Object, null],
+			// 最小默认值为前10年
+			default: new Date(new Date().getFullYear() - 10, 0, 1).getTime(),
+		},
+		// 选项过滤函数
+		filter: {
+			type: [Function, null],
+			default: null,
+		},
+		// 选项格式化函数
+		formatter: {
+			type: [Function, null],
+			default: null,
+		},
+		// 各列中，单个选项的高度
+		itemHeight: {
+			type: [String, Number, null],
+			default: 43,
+		},
+		// 取消按钮的文字
+		cancelText: {
+			type: [String, null],
+			default: '取消',
+		},
+		// 确认按钮的文字
+		confirmText: {
+			type: [String, null],
+			default: '确认',
+		},
+		// 取消按钮的颜色
+		cancelColor: {
+			type: [String, null],
+			default: '#969799',
+		},
+		// 确认按钮的颜色
+		confirmColor: {
+			type: [String, null],
+			default: '',
+		},
+		// 每列中可见选项的数量
+		visibleItemCount: {
+			type: [String, Number, null],
+			default: 5,
+		},
+	},
+
+	data() {
+		return {
+			columns: [],
+			innerValue: '',
+			innerDefaultIndex: [],
+			innerFormatter: (type, value) => value,
+		};
+	},
+	computed: {
+		cmpConfirmColor() {
+			return this.confirmColor ? this.confirmColor : color.getColor().steThemeColor;
+		},
+	},
+	created() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.innerValue = this.correctValue(this.value);
+			this.updateColumnValue(this.innerValue);
+		},
+		updateColumnValue(value) {
+			this.innerValue = value;
+			this.updateColumns();
+			this.updateIndexs();
+		},
+		updateColumns() {
+			const formatter = this.formatter || this.innerFormatter;
+			const result = this.getOriginColumns().map((column) =>
+				column.values.map((value) => formatter(column.type, value))
+			);
+			this.columns = result;
+		},
+		// 更新索引
+		updateIndexs() {
+			let value = this.innerValue;
+			let values = [];
+			const formatter = this.formatter || this.innerFormatter;
+			values.push(
+				formatter('year', `${dayjs(value).year()}`),
+				formatter('month', padZero(dayjs(value).month() + 1)),
+				formatter('day', padZero(dayjs(value).date())),
+				formatter('hour', padZero(dayjs(value).hour())),
+				formatter('minute', padZero(dayjs(value).minute())),
+				formatter('second', padZero(dayjs(value).second()))
+			);
+
+			// 不同mode下的时间是连续值，需要计算不同mode下对应完整时间的初始替换下标即可
+			let startFlag = 0;
+			switch (this.mode) {
+				case 'month-day':
+					startFlag = 1;
+					break;
+				case 'time':
+				case 'hour-minute':
+					startFlag = 3;
+					break;
+				case 'minute-second':
+					startFlag = 4;
+			}
+
+			// 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
+			const indexs = this.columns.map((column, index) => {
+				// 通过取大值，可以保证不会出现找不到索引的-1情况
+				return Math.max(
+					0,
+					column.findIndex((item) => item === values[index + startFlag])
+				);
+			});
+
+			this.innerDefaultIndex = indexs;
+		},
+		getOriginColumns() {
+			// 生成各列的值
+			const results = this.getRanges().map(({ type, range }) => {
+				let values = times(range[1] - range[0] + 1, (index) => {
+					let value = range[0] + index;
+					value = type === 'year' ? `${value}` : padZero(value);
+					return value;
+				});
+				// 进行过滤
+				if (this.filter) {
+					values = this.filter(type, values);
+				}
+				return { type, values };
+			});
+			return results;
+		},
+		// 获取每列的最大和最小值
+		getRanges() {
+			const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSecond } = this.getBoundary(
+				'max',
+				this.innerValue
+			);
+			const { minYear, minDate, minMonth, minHour, minMinute, minSecond } = this.getBoundary(
+				'min',
+				this.innerValue
+			);
+
+			const result = [
+				{
+					type: 'year',
+					range: [minYear, maxYear],
+				},
+				{
+					type: 'month',
+					range: [minMonth, maxMonth],
+				},
+				{
+					type: 'day',
+					range: [minDate, maxDate],
+				},
+				{
+					type: 'hour',
+					range: [minHour, maxHour],
+				},
+				{
+					type: 'minute',
+					range: [minMinute, maxMinute],
+				},
+				{
+					type: 'second',
+					range: [minSecond, maxSecond],
+				},
+			];
+			let temp = result;
+			if (this.mode === 'datetime') temp = result.splice(0, 5);
+			if (this.mode === 'date') temp = result.splice(0, 3);
+			if (this.mode === 'year-month') temp = result.splice(0, 2);
+			if (this.mode === 'month-day') temp = result.splice(1, 2);
+			if (this.mode === 'time') temp = result.splice(3, 3);
+			if (this.mode === 'hour-minute') temp = result.splice(3, 2);
+			if (this.mode === 'minute-second') temp = result.splice(4, 2);
+			return temp;
+		},
+		// 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
+		getBoundary(type, innerValue) {
+			const value = dayjs(innerValue);
+			const boundary = dayjs(this[`${type}Date`]);
+			const year = boundary.year();
+			let month = 1;
+			let date = 1;
+			let hour = 0;
+			let minute = 0;
+
+			if (type === 'max') {
+				month = 12;
+				date = dayjs(value).daysInMonth();
+				hour = 23;
+				minute = 59;
+			}
+
+			// 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
+			let second = minute;
+			if (value.year() === year) {
+				month = boundary.month() + 1;
+				if (value.month() + 1 === month) {
+					date = boundary.date();
+					if (value.date() === date) {
+						hour = boundary.hour();
+						if (value.hour() === hour) {
+							minute = boundary.minute();
+							if (value.minute() === minute) second = boundary.second();
+						}
+					}
+				}
+			}
+
+			return {
+				[`${type}Year`]: year,
+				[`${type}Month`]: month,
+				[`${type}Date`]: date,
+				[`${type}Hour`]: hour,
+				[`${type}Minute`]: minute,
+				[`${type}Second`]: second,
+			};
+		},
+		// 得出合法的时间
+		correctValue(value) {
+			let date = dayjs(value);
+			if (date.isValid()) {
+				if (date.isBefore(dayjs(this.minDate))) {
+					date = this.minDate;
+				} else if (date.isAfter(dayjs(this.maxDate))) {
+					date = this.maxDate;
+				}
+			} else {
+				date = dayjs();
+			}
+
+			return date.valueOf();
+		},
+		change(e) {
+			const { indexs, values } = e;
+			let selectValue = '';
+
+			// 取默认时间中的值，然后再通过mode和变化值来替换默认值
+			let dateArr = [
+				DEFAULT_DATE.year(),
+				DEFAULT_DATE.month() + 1,
+				DEFAULT_DATE.day(),
+				DEFAULT_DATE.hour(),
+				DEFAULT_DATE.minute(),
+				DEFAULT_DATE.second(),
+			];
+			// 不同mode下的时间是连续值，需要计算不同mode下对应完整时间的初始替换下标即可
+			let startFlag = 0;
+			switch (this.mode) {
+				case 'month-day':
+					startFlag = 1;
+					break;
+				case 'time':
+				case 'hour-minute':
+					startFlag = 3;
+					break;
+				case 'minute-second':
+					startFlag = 4;
+			}
+			indexs.forEach((e, i) => {
+				let v = parseInt(values[i][e]);
+				dateArr[startFlag + i] = v;
+			});
+
+			// 此月份的最大天数
+			const maxDay = dayjs(`${dateArr[0]}-${dateArr[1]}`).daysInMonth();
+			dateArr[2] = Math.min(maxDay, dateArr[2]) || 1;
+
+			selectValue = Number(new Date(dateArr[0], dateArr[1] - 1, dateArr[2], dateArr[3], dateArr[4], dateArr[5]));
+			selectValue = this.correctValue(selectValue);
+			this.innerValue = selectValue;
+			this.updateColumnValue(selectValue);
+
+			// 发出change事件，value为当前选中的时间戳
+			this.$emit('change', {
+				value: selectValue,
+				mode: this.mode,
+			});
+		},
+		cancel() {
+			this.$emit('cancel');
+		},
+		confirm() {
+			this.$emit('confirm', this.innerValue);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-date-picker-root {
+	// /deep/ view {
+	// 	padding: 0 42rpx;
+	// }
+}
+</style>

package/components/ste-drag/README.md

@@ -0,0 +1,103 @@
+# Drag 拖拽
+用于拖拽的容器
+
+---$
+
+
+### 代码演示
+####  自由拖拽
+```html
+<ste-drag>
+	<ste-button>拖拽按钮</ste-button>
+</ste-drag>
+```
+
+#### 固定方向
+```html
+<ste-drag direction="x">
+	<ste-button>横向固定</ste-button>
+</ste-drag>
+
+<ste-drag direction="y">
+	<ste-button>竖向固定</ste-button>
+</ste-drag>
+```
+
+#### 贴边
+会根据元素移动结束时到左右边界距离来进行贴边
+```html
+<ste-drag attract>
+	<ste-button>贴边</ste-button>
+</ste-drag>
+```
+
+#### 边界
+- 数据结构是 `{top: 0, right: 0, bottom: 0, left: 0}`，分别代表距离屏幕上、右、下、左的距离(单位px)
+- 可按照样例中的做法，根据屏幕大小动态边界值
+
+```html
+<template>
+<view style="width: 300px; height: 150px; border: solid 1px red" class="boundary-box">
+	<ste-drag :boundary="boundary">
+		<ste-button>边界</ste-button>
+	</ste-drag>
+</view>
+</template>
+<script>
+import utils from '@/common/utils.js';
+export default {
+	data() {
+		return {
+			boundary: null,
+		}
+	},
+	mounted() {
+		const boundary = { left: 22, top: 354 };
+		const systemInfo = utils.getWindowInfo();
+		boundary.right = systemInfo.windowWidth - 22 - 300;
+		boundary.bottom = systemInfo.windowHeight - 354 - 150;
+		this.boundary = boundary;
+	}
+}
+</script>
+<style>
+.boundary-box {
+	width: 300px;
+	height: 150px;
+	border: solid 1px red;
+	
+	position: fixed;
+	left: 22px;
+	top: 354px;
+}
+</style>
+
+```
+
+---$
+### API
+#### Props
+
+| 参数			| 说明											| 类型		| 默认值										| 可选值													| 支持版本	|
+| ---			| ---											| ---		| ---										| ---													| ---		|
+| `attract`		| 是否开启自动吸边（根据 screenWidth 进行吸边）	| `Boolean`	| `false`									|														|			|
+| `direction`	| 拖拽元素的拖拽方向限制							| `String`	| `all`										| `all`：不限制方向<br/>`x`：横向拖拽<br/>`y`：竖向拖拽	|			|
+| `boundary`	| 拖拽元素的拖拽边界 默认屏幕为边界				| `Object`	| `{top: 0, right: 0, bottom: 0, left: 0}`	|														|			|
+
+
+#### Events
+
+| 事件名	| 说明		| 事件参数	| 支持版本	|
+| ---		| ---		| ---		| ---		|
+| `start`	| 拖拽开始	| -			| -			|
+| `end`		| 拖拽结束	| -			| -			|
+
+
+#### Slots
+
+|插槽名		|说明		|插槽参数	|支持版本	|
+| ---		| ---		| ---		| ---		|
+| `default`	| 拖拽内容	|-			| -			|
+
+---$
+{{fuyuwei}}

package/components/ste-drag/ste-drag.vue

@@ -0,0 +1,203 @@
+<template>
+	<view
+		class="ste-drag-root"
+		:id="cmpRootId"
+		@touchstart="touchStart"
+		@touchmove.stop.prevent="touchMove"
+		@touchend="touchEnd"
+		@mousedown="mouseDown"
+		:style="{
+			translate: translate.x + 'px ' + translate.y + 'px',
+			transition: attractTransition ? 'all ease 0.3s' : 'none',
+		}"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+const SCREEN_WIDTH = utils.System.getWindowWidth();
+const SCREEN_HEIGHT = utils.System.getWindowHeight();
+const DEFAULT_BOUNDARY = { top: 0, left: 0, right: 0, bottom: 0 };
+/**
+ * ste-drag 拖拽
+ * @description 拖拽
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-drag
+ * @property {String} attract 是否开启自动吸边（根据 screenWidth 进行吸边）默认 false
+ * @property {String} direction 拖拽元素的拖拽方向限制 默认 all
+ * @value all 不限制方向 {String}
+ * @value x 横向拖拽 {String}
+ * @value y 竖向多拽 {String}
+ * @property {Object} boundary 拖拽元素的拖拽边界 默认屏幕为边界
+ * @event {Function} start 开始拖动时触发
+ * @event {Function} end 结束拖动时触发
+ **/
+export default {
+	group: '基础组件',
+	title: 'Drag 拖拽',
+	name: 'ste-drag',
+	props: {
+		attract: {
+			type: [Boolean, null],
+			default: false,
+		},
+		direction: {
+			type: [String, null],
+			default: 'all',
+		},
+		boundary: {
+			type: [Object, null],
+			default: () => DEFAULT_BOUNDARY,
+		},
+	},
+	data() {
+		return {
+			// 触摸开始位置
+			start: {
+				x: 0,
+				y: 0,
+			},
+			translate: { x: 0, y: 0 },
+			preTranslate: { x: 0, y: 0 },
+			attractTransition: false, // 标识是否贴边动画
+			initTop: 0,
+			initLeft: 0,
+			elWidth: 0,
+			elHeight: 0,
+			isMove: false,
+			boundaryData: this.boundary,
+		};
+	},
+	computed: {
+		cmpRootId() {
+			return `ste-drag-${utils.guid()}`;
+		},
+	},
+	mounted() {
+		utils.querySelector('#' + this.cmpRootId, this).then((rec) => {
+			this.elWidth = rec.width;
+			this.elHeight = rec.height;
+			this.initTop = rec.top;
+			this.initLeft = rec.left;
+
+			setTimeout(() => {
+				this.touchEnd();
+			}, 200);
+		});
+	},
+	watch: {
+		boundary: {
+			handler(val) {
+				this.boundaryData = { ...DEFAULT_BOUNDARY, ...val };
+			},
+			immediate: true,
+		},
+	},
+	methods: {
+		// #ifdef WEB
+		mouseDown(e) {
+			this.touchStart(e);
+			window.addEventListener('mousemove', this.touchMove);
+			window.addEventListener('mouseup', this.touchEnd);
+		},
+		removeListenner() {
+			window.removeEventListener('mousemove', this.touchMove);
+			window.removeEventListener('mouseup', this.touchEnd);
+		},
+		// #endif
+		touchStart(e) {
+			this.isMove = true;
+			this.$emit('start');
+			const touch = this.getMoveObj(e);
+			this.start = { x: touch.pageX, y: touch.pageY };
+			this.preTranslate = this.translate;
+		},
+		touchMove(e) {
+			e.preventDefault();
+
+			const touch = this.getMoveObj(e);
+			let x = this.preTranslate.x + (touch.pageX - this.start.x);
+			let xLeft = x + this.initLeft;
+			let y = this.preTranslate.y + (touch.pageY - this.start.y);
+			let yTop = y + this.initTop;
+
+			if (xLeft <= this.boundaryData.left) {
+				x = this.boundaryData.left - this.initLeft;
+			}
+
+			if (xLeft >= SCREEN_WIDTH - (this.boundaryData.right + this.elWidth)) {
+				x = SCREEN_WIDTH - (this.boundaryData.right + this.elWidth) - this.initLeft;
+			}
+
+			if (yTop <= this.boundaryData.top) {
+				y = this.boundaryData.top - this.initTop;
+			}
+
+			if (yTop >= SCREEN_HEIGHT - (this.boundaryData.bottom + this.elHeight)) {
+				y = SCREEN_HEIGHT - (this.boundaryData.bottom + this.elHeight) - this.initTop;
+			}
+
+			this.translate = {
+				x: this.direction == 'all' || this.direction == 'x' ? x : this.preTranslate.x,
+				y: this.direction == 'all' || this.direction == 'y' ? y : this.preTranslate.y,
+			};
+		},
+		touchEnd(e) {
+			this.removeListenner && this.removeListenner();
+			if (this.isMove) {
+				this.$emit('end');
+				this.isMove = false;
+			}
+			// 是否执行贴边
+			if (!this.attract) {
+				return;
+			}
+
+			let { x: moveLeft, y: moveTop } = this.translate;
+			const screenCenterX = (SCREEN_WIDTH - this.boundaryData.right - this.boundaryData.left) / 2;
+			const centerX = screenCenterX - this.initLeft - this.elWidth / 2;
+			if (moveLeft < centerX) {
+				moveLeft = this.boundaryData.left - this.initLeft;
+			} else {
+				moveLeft = SCREEN_WIDTH - this.elWidth - this.boundaryData.right - this.initLeft;
+			}
+			this.translate = { ...this.translate, x: moveLeft };
+
+			// 竖向吸边
+			// if (this.attractDirection == 'y') {
+			// 	const screenCenterY = (SCREEN_HEIGHT - this.boundaryData.top - this.boundaryData.bottom) / 2;
+			// 	const centerY = screenCenterY - this.initTop - this.elHeight / 2;
+			// 	if (moveTop < centerY) {
+			// 		moveTop = this.boundaryData.top - this.initTop;
+			// 	} else {
+			// 		moveTop = SCREEN_HEIGHT - this.elHeight - this.boundaryData.bottom - this.initTop;
+			// 	}
+			// 	this.translate = { ...this.translate, y: moveTop };
+			// } else {
+
+			// }
+
+			this.attractTransition = true;
+			setTimeout(() => {
+				this.attractTransition = false;
+			}, 400);
+		},
+		getMoveObj(e) {
+			if (e.touches?.length > 0) {
+				// 移动端touch事件
+				return { pageX: e.touches[0].pageX, pageY: e.touches[0].pageY };
+			} else {
+				// web端鼠标移动事件
+				return { pageX: e.pageX, pageY: e.pageY };
+			}
+		},
+	},
+};
+</script>
+
+<style>
+.ste-drag-root {
+	display: inline-flex;
+}
+</style>