stellar-ui-v2 1.35.3

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

@@ -0,0 +1,133 @@
+<template>
+	<view class="ste-checkbox-group-root" :style="[cmpStyle]">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+/**
+ * ste-checkbox-group 复选框组
+ * @description 复选框组组件,内部由多个checkbox组成。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-checkbox
+ * @property {Array} value 当前选中值（支持v-model双向绑定）
+ * @property {String} direction 排列方式 默认 column
+ * @value row 横向 默认 {{String}}
+ * @value  column 纵向 {{String}}
+ * @property {Boolean} disabled 禁用 默认 false
+ * @property {Boolean} readonly 只读（不置灰） 默认 false
+ * @property {String} shape 形状 默认 circle
+ * @value circle 圆形 默认 {{String}}
+ * @value square 方形 {{String}}
+ * @property {Number|String} iconSize 图标大小，单位rpx 默认 36
+ * @property {String} checkedColor 选中状态的图标颜色 默认 #0090FF
+ * @property {String} textPosition 文本的位置 默认 right
+ * @value right 右 默认 {{String}}
+ * @value left 左 {{String}}
+ * @property {Number|String} textSize 文本字体大小，单位rpx 默认 28
+ * @property {String} textInactiveColor 未选中的文本颜色 默认 #000000
+ * @property {String} textActiveColor 选中的文本颜色 默认 #000000
+ * @property {Boolean} textDisabled 禁用文本点击 默认 false
+ * @property {Boolean} max 最大可选数，0为无限制 默认 0
+ * @property {Number|String} marginLeft 左边距，单位rpx 默认 0
+ * @property {Number|String} marginRight 右边距，单位rpx 默认 0
+ * @property {Number|String} columnGap 复选框和文本间距，单位rpx 默认 16
+ * @event {Function} change 当绑定值变化时触发的事件
+ */
+export default {
+	name: 'ste-checkbox-group',
+	props: {
+		value: {
+			type: [Array, null],
+			default: [],
+		},
+		direction: {
+			type: [String, null],
+			default: 'column',
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		readonly: {
+			type: [Boolean, null],
+			default: false,
+		},
+		shape: {
+			type: [String, null],
+			default: 'circle',
+		},
+		iconSize: {
+			type: [Number, String, null],
+			default: 36,
+		},
+		checkedColor: {
+			type: [String, null],
+			default: '',
+		},
+		textPosition: {
+			type: [String, null],
+			default: 'right',
+		},
+		textSize: {
+			type: [Number, String, null],
+			default: 28,
+		},
+		textInactiveColor: {
+			type: [String, null],
+			default: '#000000',
+		},
+		textActiveColor: {
+			type: [String, null],
+			default: '#000000',
+		},
+		textDisabled: {
+			type: [Boolean, null],
+			default: false,
+		},
+		max: {
+			type: [Number, null],
+			default: 0,
+		},
+		marginLeft: {
+			type: [Number, String, null],
+			default: null,
+		},
+		marginRight: {
+			type: [Number, String, null],
+			default: null,
+		},
+		columnGap: {
+			type: [Number, String, null],
+			default: null,
+		},
+	},
+	model: {
+		prop: 'value',
+		// 派发事件名，更新父组件数据
+		event: 'input',
+	},
+	provide() {
+		return {
+			checkboxGroup: this,
+		};
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		cmpStyle() {
+			let style = {};
+			style['flexDirection'] = this.direction;
+			return style;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-checkbox-group-root {
+	display: flex;
+	column-gap: 16rpx;
+	row-gap: 16rpx;
+}
+</style>

package/components/ste-code-input/README.md

@@ -0,0 +1,67 @@
+# CodeInput 验证码输入
+用于验证码输入或短密码输入
+
+---$
+
+### 代码演示
+#### 基础使用
+```html
+<ste-code-input :maxlength="4"></ste-code-input>
+<ste-code-input :maxlength="4" borderColor="rgba(0, 0, 0,0)"></ste-code-input>
+```
+
+#### 横线模式
+```html
+<ste-code-input mode="line" :maxlength="4"></ste-code-input>
+```
+
+#### 设置长度
+```html
+<ste-code-input :maxlength="5"></ste-code-input>
+```
+
+#### 设置间距
+```html
+<ste-code-input  :space="0" :maxlength="4"></ste-code-input>
+```
+
+#### 调整颜色
+```html
+<ste-code-input  :maxlength="4" fontColor="#f56c6c" borderColor="#f56c6c"></ste-code-input>
+
+<ste-code-input mode="line" :maxlength="4" fontColor="#0090FF" borderColor="#0090FF"></ste-code-input>
+```
+
+#### 自定义显示
+```html
+<ste-code-input formatter="·" fontSize="100" :maxlength="4" value="1"></ste-code-input>
+<ste-code-input mode="line" formatter="*" :space="0" :maxlength="4" value="12"></ste-code-input>
+```
+
+
+---$
+### API
+#### Props
+| 参数			| 说明					| 类型				| 默认值		| 可选值										| 支持版本	|
+| ---			| ---					| ---				| ---		| ---										| ---		|
+| `value`		| 初始内容，支持双向绑定	| `Number/String`	| -			| -											| -			|
+| `mode`		| 输入框类型				| `String`			| `box`		| `box`：盒子模式<br/>`line`：底部横线模式	| -			|
+| `maxlength`	| 最大长度				| `Number`			| `6`		| -											| -			|
+| `space`		| 字符间的距离			| `Number/String`	| `16`		| -											| -			|
+| `fontColor`	| 字体颜色				| `String`			| `#000000`	| -											| -			|
+| `borderColor`	| 边框和线条颜色			| `String`			| `#DDDDDD`	| -											| -			|
+| `fontSize`	| 字体大小				| `Number/String`	| `28`		| -											| -			|
+| `size`		| 输入框的大小，宽等于高	| `Number/String`	| `64`		| -											| -			|
+| `formatter`	| 替换输入值				| `String`			| -			| -											| -			|
+| `focus`		| 是否自动获取焦点		| `Boolean`			| `false`	| -											| -			|
+| `disabledDot`	| 是否禁止输入"."符号	| `Boolean`			| `true`	| -											| -			|
+| `readOnly`	| 是否只读				| `Boolean`			| `false`	| -											| `v1.14.12`|
+
+#### Events
+|事件名		|说明								|事件参数				|支持版本	|
+| ---		| ---								| ---					|---		|
+| `change`	| `输入内容发生改变时触发`			| `value`：当前输入的值	|-			|
+| `finish`	| `输入字符个数达maxlength值时触发`	| `value`：当前输入的值	|-			|
+
+---$
+{{fuyuwei}}

package/components/ste-code-input/ste-code-input.vue

@@ -0,0 +1,302 @@
+<template>
+	<view class="ste-code-input-root" :style="[cmpRootStyle]">
+		<view
+			class="ste-code-input-item"
+			:style="[getItemStyle(index)]"
+			v-for="(item, index) in cmpCodeLengthArray"
+			:key="index"
+		>
+			<text class="ste-code-input-item-dot" v-if="formatter && cmpCodeArray.length > index">
+				{{ formatter }}
+			</text>
+			<text class="ste-code-input-item-text" v-else>
+				{{ cmpCodeArray[index] || '' }}
+			</text>
+			<view class="ste-code-input-item-line" v-if="mode === 'line'"></view>
+			<view
+				v-if="isFocus && cmpCodeArray.length === index"
+				:style="{ backgroundColor: fontColor }"
+				class="ste-code-input-item-cursor"
+			></view>
+		</view>
+		<input
+			v-if="!readOnly"
+			type="number"
+			:focus="focus"
+			:value="inputValue"
+			:maxlength="maxlength"
+			adjustPosition
+			class="ste-code-input-input"
+			cursor-spacing="30"
+			@input="inputHandler"
+			:style="{
+				height: size + 'rpx',
+			}"
+			@focus="isFocus = true"
+			@blur="isFocus = false"
+		/>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+/**
+ * ste-code-input 验证码输入
+ * @description 验证码输入组件
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-code-input
+ * @property {Number|String} value 初始内容，支持双向绑定
+ * @property {String} mode 输入框类型
+ * @value box 盒子模式 {String}
+ * @value line 底部横线模式 {String}
+ * @property {Number} maxlength 最大长度
+ * @property {Number|String} space 字符间的距离
+ * @property {String} fontColor 字体颜色
+ * @property {String} borderColor 边框和线条颜色
+ * @property {Number|String} fontSize 字体大小
+ * @property {Number|String} size 输入框的大小，宽等于高
+ * @property {Number|String} formatter 替换输入值
+ * @property {Boolean} focus 是否自动获取焦点
+ * @property {Boolean} disabledDot 是否禁止输入"."符号 默认 true
+ * @property {Boolean} readOnly 是否只读 默认 false
+ * @event {Function} change 输入内容发生改变时触发
+ * @event {Function} finish 输入字符个数达maxlength值时触发
+ */
+export default {
+	group: '表单组件',
+	title: 'CodeInput 验证码输入组件',
+	name: 'ste-code-input',
+	props: {
+		value: {
+			type: [String, Number, null],
+			default: '',
+		},
+		// 显示模式，box-盒子模式，line-底部横线模式
+		mode: {
+			type: [String, null],
+			default: 'box',
+		},
+		// 最大输入长度
+		maxlength: {
+			type: [String, Number, null],
+			default: 6,
+		},
+		// 字符间的距离
+		space: {
+			type: [String, Number, null],
+			default: 16,
+		},
+		// 字体颜色
+		fontColor: {
+			type: [String, null],
+			default: '#000000',
+		},
+		// 边框和线条颜色
+		borderColor: {
+			type: [String, null],
+			default: '#DDDDDD',
+		},
+		// 字体大小
+		fontSize: {
+			type: [String, Number, null],
+			default: 28,
+		},
+		// 输入框的大小，宽等于高
+		size: {
+			type: [String, Number, null],
+			default: 64,
+		},
+		// 替换输入值
+		formatter: {
+			type: [String, Number, null],
+			default: '',
+		},
+		// 是否自动获取焦点
+		focus: {
+			type: [Boolean, null],
+			default: false,
+		},
+		// 是否禁止输入"."符号
+		disabledDot: {
+			type: [Boolean, null],
+			default: true,
+		},
+		readOnly: {
+			type: [Boolean, null],
+			default: false,
+		},
+	},
+	data() {
+		return {
+			inputValue: '',
+			isFocus: this.focus,
+		};
+	},
+	watch: {
+		value: {
+			immediate: true,
+			handler(val) {
+				// 转为字符串，超出部分截掉
+				this.inputValue = String(val).substring(0, this.maxlength);
+			},
+		},
+	},
+	computed: {
+		// 根据长度，循环输入框的个数
+		cmpCodeLengthArray() {
+			return new Array(Number(this.maxlength));
+		},
+		// 将输入的值，转为数组，给item历遍时，根据当前的索引显示数组的元素
+		cmpCodeArray() {
+			return String(this.inputValue).split('');
+		},
+		cmpRootStyle() {
+			const style = {
+				'--font-size': utils.addUnit(this.fontSize),
+				'--font-color': this.fontColor,
+				'--line-width': utils.addUnit(this.size),
+				'--line-background-color': this.borderColor,
+			};
+			return style;
+		},
+	},
+	methods: {
+		addUnit: utils.addUnit,
+		// 监听输入框的值发生变化
+		getItemStyle(index) {
+			const style = {
+				width: utils.addUnit(this.size),
+				height: utils.addUnit(this.size),
+			};
+			// 盒子模式下，需要额外进行处理
+			if (this.mode === 'box') {
+				style.border = `2rpx solid ${this.borderColor}`;
+				style.backgroundColor = '#F5F5F5';
+				// 如果盒子间距为0的话
+				if (this.space === 0) {
+					// 给第一和最后一个盒子设置圆角
+					if (index === 0) {
+						style.borderTopLeftRadius = '3px';
+						style.borderBottomLeftRadius = '3px';
+					}
+					if (index === this.maxlength - 1) {
+						style.borderTopRightRadius = '3px';
+						style.borderBottomRightRadius = '3px';
+					}
+					// 最后一个盒子的右边框需要保留
+					if (index !== this.maxlength - 1) {
+						style.borderRight = 'none';
+					}
+				} else {
+					style.borderRadius = '10rpx';
+				}
+			}
+			if (index !== this.maxlength - 1) {
+				// 设置验证码字符之间的距离，通过margin-right设置，最后一个字符，无需右边框
+				style.marginRight = utils.addUnit(this.space);
+			} else {
+				// 最后一个盒子的有边框需要保留
+				style.marginRight = 0;
+			}
+
+			return style;
+		},
+		inputHandler(e) {
+			const value = e.detail.value;
+			this.inputValue = value;
+			// 是否允许输入“.”符号
+			if (this.disabledDot) {
+				this.$nextTick(() => {
+					this.inputValue = value.replace('.', '');
+				});
+			}
+			// 未达到maxlength之前，发送change事件，达到后发送finish事件
+			this.$emit('change', value);
+			// 修改通过v-model双向绑定的值
+			this.$emit('input', value);
+			// 达到用户指定输入长度时，发出完成事件
+			if (String(value).length >= Number(this.maxlength)) {
+				this.$emit('finish', value);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-code-input {
+	&-root {
+		display: inline-flex;
+		flex-direction: row;
+		position: relative;
+		overflow: hidden;
+	}
+	&-item {
+		// display: flex;
+		// justify-content: center;
+		// align-items: center;
+		// position: relative;
+		position: relative;
+		&-text {
+			font-size: var(--font-size);
+			color: var(--font-color);
+
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+
+		&-dot {
+			display: inline-flex;
+			line-height: 1;
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+
+			font-size: var(--font-size);
+			color: var(--font-color);
+		}
+
+		&-line {
+			position: absolute;
+			bottom: 0;
+			height: 4rpx;
+			border-radius: 40rpx;
+			width: var(--line-width);
+			background-color: var(--line-background-color);
+		}
+		&-cursor {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			width: 2rpx;
+			height: 55%;
+			animation: 0.8s code-input-cursor-flicker infinite;
+		}
+	}
+
+	&-input {
+		position: absolute;
+		left: -100vw;
+		width: 200vw;
+		top: 0;
+		opacity: 0;
+		background-color: transparent;
+		text-align: left;
+	}
+
+	@keyframes code-input-cursor-flicker {
+		0% {
+			opacity: 0;
+		}
+		50% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+}
+</style>

package/components/ste-date-picker/README.md

@@ -0,0 +1,135 @@
+# DatePicker 时间选择器
+年月日时分秒选择器
+
+---$
+
+### 代码演示
+#### 基础使用
+- 通过`value`属性可设置默认选中的时间(支持时间戳、字符串格式)
+- 切换后的返回值为时间戳
+- 没有值或值非法时显示当前时间
+```
+<ste-date-picker :value="datetime" ></ste-date-picker>
+```
+
+#### 不显示操作栏
+```
+<ste-date-picker :showToolbar="false" mode="date" ></ste-date-picker>
+```
+
+#### 时间类型
+- 默认显示年、月、日、时、分、秒(`all`)
+- 年月日时分(`datetime`)，年月日(`date`)，年月(`year-month`)，月日(`month-day`)，时分秒(`time`)，时分(`hour-minute`)，分秒(`minute-second`)
+```
+<ste-date-picker mode="datetime" ></ste-date-picker>
+<ste-date-picker mode="date" ></ste-date-picker>
+<ste-date-picker mode="year-month" ></ste-date-picker>
+<ste-date-picker mode="month-day" ></ste-date-picker>
+<ste-date-picker mode="time" ></ste-date-picker>
+<ste-date-picker mode="hour-minute" ></ste-date-picker>
+<ste-date-picker mode="minute-second" ></ste-date-picker>
+```
+
+#### 最大值 & 最小值
+- 通过最大值最小值可设置选择的边界（支持时间戳、字符串格式）
+- 可精确到秒
+```
+<ste-date-picker :minDate="new Date(2000, 11, 1, 1, 0, 30, 0).getTime()" :maxDate="new Date(2030, 11, 1, 1, 23, 59, 30).getTime()" ></ste-date-picker>
+<ste-date-picker maxDate="2030-01-01 00:00:00" minDate="2022-01-01 00:00:00"></ste-date-picker>
+```
+
+#### 过滤
+- 可通过`filter`属性传递一个函数来对数据进行过滤
+```
+<template>
+	<ste-date-picker :filter="filter" mode="date" title="过滤" ></ste-date-picker>
+</template>
+<script>
+export default {
+	methods: {
+		filter(mode, options) {
+			if (mode === 'year') {
+				return options.filter((option) => option % 5 === 0);
+			}
+			if (mode === 'month') {
+				return options.filter((option) => option % 4 === 0);
+			}
+			if (mode === 'day') {
+				return options.filter((option) => option % 2 === 0);
+			}
+
+			return options;
+		},
+	}
+}
+</script>
+```
+
+#### 格式化
+```
+<template>
+	<ste-date-picker :formatter="formatter" mode="date" title="格式化"></ste-date-picker>
+</template>
+<script>
+export default {
+	methods: {
+		formatter(type, value) {
+			if (type === 'year') {
+				return `${value}年`;
+			}
+			if (type === 'month') {
+				return `${value}月`;
+			}
+			if (type === 'day') {
+				return `${value}日`;
+			}
+			return value;
+		},
+	}
+}
+</script>
+```
+
+#### 选项高度
+```
+<ste-date-picker mode="date" itemHeight="50" ></ste-date-picker>
+```
+
+#### 每列可见数量
+```
+<ste-date-picker mode="date" :visibleItemCount="10" ></ste-date-picker>
+```
+
+---$
+### API
+#### Props
+| 参数				| 说明																			| 类型				| 默认值		| 可选值																																													| 支持版本	|
+| ---				| ---																			| ---				| ---		| ---																																													| ---		|
+| `value`			| 绑定值(支持时间戳、字符串格式)，若是时间戳必须是`Number`格式，支持v-model双向绑定	| `Number/String`	| -			| -																																														| -			|
+| `showToolbar`		| 是否显示顶部操作栏																| `Boolean`			| `true`	| -																																														| -			|
+| `title`			| 顶部标题																		| `String`			| -			| -																																														| -			|
+| `mode`			| 展示格式																		| `String`			| `all`		| `all`：年月日时分秒 <br/>`datetime`：年月日时分<br/>`date`：年月日<br/>`year-month`：年月<br/>`month-day`：月日<br/>`datetime`：时分秒<br/>`hour-minute`：时分<br/>`minute-second`：分秒	| -			|
+| `maxDate`			| 可选的最大时间	（支持时间戳、字符串格式），默认为当前时间后十年					| `Number/String`	| -			| -																																														| -			|
+| `minDate`			| 可选的最小时间	（支持时间戳、字符串格式），默认为当前时间前十年					| `Number/String`	| -			| -																																														| -			|
+| `filter`			| 选项过滤函数																	| `Function`		| -			| -																																														| -			|
+| `formatter`		| 选项格式化函数																	| `Function`		| -			| -																																														| -			|
+| `itemHeight`		| 各列中，单个选项的高度（单位px）												| `Number`			| `36`		| -																																														| -			|
+| `cancelText`		| 取消按钮的文字																	| `String`			| `"取消"`	| -																																														| -			|
+| `confirmText`		| 确认按钮的文字																	| `String`			| `"确认"`	| -																																														| -			|
+| `cancelColor`		| 取消按钮的颜色																	| `String`			| `#909193`	| -																																														| -			|
+| `confirmColor`	| 确认按钮的颜色																	| `String`			| `#3c9cff`	| -																																														| -			|
+| `visibleItemCount`| 各每列中可见选项的数量															| `Number`			| `5`		| -																																														| -			|
+
+
+#### Events
+|事件名		|说明				|事件参数							|支持版本	|
+| ---		| ---				| ---								|---		|
+| `change`	| 当选择值变化时触发	| `value`: 当前时间的时间戳值(毫秒)	|-			|
+| `confirm`	| 点击确定按钮		| `value`: 当前时间的时间戳值(毫秒)	|-			|
+| `cancel`	| 点击取消按钮		| -									|-			|
+
+
+
+
+---$
+{{fuyuwei}}