stellar-ui-v2 1.35.3

package/components/ste-checkbox/README.md

@@ -0,0 +1,297 @@
+# Checkbox 复选框
+
+在一组备选项中进行多选。
+
+---$
+
+### 代码演示
+JavaScript后面的演示代码中涉及到的变量和方法都使用本javasaript代码
+```javascript
+export default {
+	data() {
+		return {
+			value1: false,
+			value2: true,
+			value3: false,
+			value4: true,
+			value5: false,
+			value6: true,
+			value7: true,
+			value8: false,
+			value9: false,
+			value10: false,
+			value11: true,
+			value12: true,
+			value13: false,
+			value14: false,
+			value15: false,
+			value16: false,
+			value17: false,
+			value18: [],
+			value19: [],
+			value20: [],
+			value21: [],
+			value22: [],
+		};
+	},
+	created() {},
+	methods: {
+		click1(value) {
+			this.showToast({
+				icon: 'none',
+				title: `点击：${value} 复选框的值`,
+			});
+		},
+		click2(value, allowStop, resolve) {
+			this.showToast({
+				icon: 'none',
+				title: `点击：${value} 复选框的值`,
+			});
+			// 阻止change事件
+			allowStop();
+		},
+		change(value) {
+			setTimeout(() => {
+				this.showToast({
+					icon: 'none',
+					title: `改变：${value} 复选框的值`,
+				});
+			}, 1000);
+		},
+	},
+};
+```
+
+#### 基础用法
+通过`value`属性，双向绑定复选框的勾选状态，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true
+```
+<ste-checkbox v-model="value">复选框</ste-checkbox>
+```
+
+### 横向排列
+将 `direction` 属性设置为 `row` 后，复选框组会变成横向排列。
+```
+<ste-checkbox-group v-model="value20" direction="row">
+	<ste-checkbox name="a">复选框a</ste-checkbox>
+	<ste-checkbox name="b">复选框b</ste-checkbox>
+	<ste-checkbox name="c">复选框c</ste-checkbox>
+</ste-checkbox-group>
+```
+
+#### 禁用  
+通过设置 `disabled` 属性可以禁用复选框， 默认`false`。 
+```
+<ste-checkbox v-model="value2" disabled>复选框1</ste-checkbox>
+<ste-checkbox v-model="value3" disabled>复选框2</ste-checkbox>
+```
+
+#### 只读  
+通过设置 `readonly` 属性可以禁用复选框，样式不置灰， 默认`false`。 
+```
+<ste-checkbox v-model="value4" readonly>复选框1</ste-checkbox>
+<ste-checkbox v-model="value5" readonly>复选框2</ste-checkbox>
+```
+
+#### 自定义形状  
+通过设置`shape`为`square`或者`circle`，将复选框设置为方形或者圆形，默认`circle`。
+```
+<ste-checkbox v-model="value6">圆形</ste-checkbox>
+<ste-checkbox v-model="value7" shape="square">方形</ste-checkbox>
+```
+
+#### 自定义图标大小  
+通过设置 `iconSize` 属性可以自定义图标的大小，单位`rpx`，默认`36`。 
+```
+<ste-checkbox v-model="value11" iconSize="60">60rpx</ste-checkbox>
+```
+
+#### 自定义图标颜色  
+通过设置 `checkedColor` 属性可以自定义图标的颜色（填充色和边框色），默认`#0090FF`。 
+```
+<ste-checkbox v-model="value12" checkedColor="#ee0a24">红色</ste-checkbox>
+```
+#### 自定义图标  
+通过 `icon` 插槽自定义图标，可以通过 `slotProps`下`checked`判断是否为选中状态，`disabled`判断是否为禁止状态，`readonly`判断是否为只读状态。
+```
+<ste-checkbox-group v-model="value13">
+	<ste-checkbox name="a">
+		<template #icon="{ slotProps }">
+			<ste-icon
+				code="&#xe677;"
+				size="50"
+				:color="slotProps.checked ? '#ee0a24' : '#000000'"
+			></ste-icon>
+		</template>
+		<template #default="{ slotProps }">
+			{{ slotProps.checked ? '已选中' : '未选中' }}
+		</template>
+	</ste-checkbox>
+	<ste-checkbox name="b">
+		<template #icon="{ slotProps }">
+			<ste-icon
+				code="&#xe677;"
+				size="50"
+				:color="slotProps.checked ? '#ee0a24' : '#000000'"
+			></ste-icon>
+		</template>
+		<template #default="{ slotProps }">
+			{{ slotProps.checked ? '已选中' : '未选中' }}
+		</template>
+	</ste-checkbox>
+	<ste-checkbox name="c" disabled>
+		<template #icon="{ slotProps }">
+			<ste-icon
+				code="&#xe677;"
+				size="50"
+				:color="slotProps.disabled ? '#eeeeee' : '#000000'"
+			></ste-icon>
+		</template>
+		<template #default="{ slotProps }">
+			{{ slotProps.disabled ? '禁止' : '未禁止' }}
+		</template>
+	</ste-checkbox>
+	<ste-checkbox name="d" readonly>
+		<template #icon="{ slotProps }">
+			<ste-icon
+				code="&#xe677;"
+				size="50"
+				:color="slotProps.readonly ? 'green' : '#000000'"
+			></ste-icon>
+		</template>
+		<template #default="{ slotProps }">
+			{{ slotProps.readonly ? '只读' : '未只读' }}
+		</template>
+	</ste-checkbox>
+```
+
+#### 左侧文本  
+将 `textPosition` 属性设置为 `left`，可以将文本位置调整到复选框左侧。
+```
+<ste-checkbox v-model="value6">右边</ste-checkbox>
+<ste-checkbox v-model="value7" textPosition="left">左边</ste-checkbox>
+```
+
+#### 自定义文本  
+- 通过设置 `textSize` 属性可以自定义文本的大小，单位`rpx`，默认`28`。
+- 通过设置 `textInactiveColor` 属性可以自定义文本未选中颜色，默认`#000000`。
+- 通过设置 `textActiveColor` 属性可以自定义文本选中颜色，默认`#000000`。
+```
+<ste-checkbox v-model="value14" textSize="50" textInactiveColor="green" textActiveColor="#d276a3">
+	复选框
+</ste-checkbox>
+```
+
+#### 回调事件  
+-  `click`  点击复选框时触发的事件（可拦截change事件），`value`：改变后的分值,`allowStop`：允许阻止后续的事件触发,：`resolve`：后续的事件执行。
+-  `change` 当绑定值变化时触发的事件，`value`:改变后的分值。
+```
+<ste-checkbox v-model="value16" @click="click1" @change="change">复选框</ste-checkbox>
+<text>在click事件后，执行change事件</text>
+<ste-checkbox v-model="value17" @click="click2" @change="change">复选框</ste-checkbox>
+<text>在click事件后，阻止change事件</text>
+```
+
+### 复选框组
+需要与`ste-checkbox-group`一起使用，选中值是一个数组，通过`value`绑定在`ste-checkbox-group`上，数组中的项即为选中的`ste-checkbox`的`name`属性设置的值。
+```
+<ste-checkbox-group v-model="value18">
+	<ste-checkbox name="a">复选框a</ste-checkbox>
+	<ste-checkbox name="b">复选框b</ste-checkbox>
+	<ste-checkbox name="c">复选框c</ste-checkbox>
+</ste-checkbox-group>
+```
+
+### 复选框组属性和复选框属性
+属性优先级：`ste-checkbox`组件上配置的属性 > `ste-checkbox-group`组件上配置的属性 > `ste-checkbox`组件默认属性
+```
+<ste-checkbox-group v-model="value19" shape="square" textPosition="left">
+	<ste-checkbox name="a">复选框a</ste-checkbox>
+	<ste-checkbox name="b" disabled>复选框b</ste-checkbox>
+	<ste-checkbox name="c" shape="circle">复选框c</ste-checkbox>
+</ste-checkbox-group>
+```
+### 水平排列
+将 `direction` 属性设置为 `row` 后，复选框组会变成水平排列。
+```
+<ste-checkbox-group v-model="value20" direction="row">
+	<ste-checkbox name="a">复选框a</ste-checkbox>
+	<ste-checkbox name="b">复选框b</ste-checkbox>
+	<ste-checkbox name="c">复选框c</ste-checkbox>
+</ste-checkbox-group>
+```
+
+### 限制最大可选数
+通过 `max` 属性可以限制复选框组的最大可选数,为`0`则不限制,默认0。
+```
+<ste-checkbox-group v-model="value21" :max="2">
+	<ste-checkbox name="a">复选框a</ste-checkbox>
+	<ste-checkbox name="b">复选框b</ste-checkbox>
+	<ste-checkbox name="c">复选框c</ste-checkbox>
+</ste-checkbox-group>
+```
+
+---$
+### API
+#### Checkbox组件属性(Props)
+
+| 参数					| 说明							| 类型				| 默认值		| 可选值								| 支持版本	|
+| ---					| ---							| ---				| ---		| ---								| ---		|
+| `value`				| 当前选中值（支持v-model双向绑定）	| `Boolean`			| `false`	| -									| -			|
+| `name`				| 选项的值						| `Number/String`	| -			| -									| -			|
+| `disabled`			| 是否禁用						| `Boolean`			| `false`	| -									| -			|
+| `readonly`			| 只读 (不置灰)					| `Boolean`			| `false`	| -									| -			|
+| `shape`				| 形状							| `String`			| `circle`	| `circle`：圆形 <br/>`squar`：方形	| -			|
+| `iconSize`			| 图标大小，单位rpx				| `Number/String`	| `36`		| -									| -			|
+| `checkedColor`		| 选中状态的图标颜色				| `String`			| `#0090FF`	| -									| -			|
+| `textPosition`		| 文本的位置						| `String`			| `right`	| `right`：右 <br/>`left`：左		| -			|
+| `textSize`			| 文本字体大小，单位rpx			| `Number/String`	| `25`		| -									| -			|
+| `textlnactiveColor`	| 未选中文本颜色					| `String`			| `#000000`	| -									| -			|
+| `textActiveColor`		| 选中文本颜色					| `String`			| `#000000`	| -									| -			|
+| `textDisabled`		| 禁用文本点击					| `Boolean`			| `false`	| -									| -			|
+| `marginLeft`			| 左边距,单位rpx					| `Number/String`	| `0`		| -									| `v1.10.0`	|
+| `marginRight`			| 右边距,单位rpx					| `Number/String`	| `0`		| -									| `v1.10.0`	|
+| `columnGap`			| 复选框和文本间距，单位rpx		| `Number/String`	| `16`		| -									| `v1.10.0`	|
+
+
+
+#### CheckboxGroup 组件属性(Props)
+
+| 参数					| 说明							| 类型				| 默认值		| 可选值								| 支持版本	|
+| ---					| ---							| ---				| ---		| ---								| ---		|
+| `value`				|当前选中值（支持v-model双向绑定）	| `Array`			| -			| -									| -			|
+| `direction`			| 排列方式						| `String`			| `row`		|  `column`：横向 <br/>`row`：纵向	| -			|
+| `disabled`			| 是否禁用						| `Boolean`			| `false`	| -									| -			|
+| `readonly`			| 只读 (不置灰)					| `Boolean`			| `false`	| -									| -			|
+| `shape`				| 形状							| `String`			| `circle`	| `circle`：圆形 <br/>`squar`：方形	| -			|
+| `iconSize`			| 图标大小，单位rpx				| `Number/String`	| `36`		| -									| -			|
+| `checkedColor`		| 选中状态的图标颜色				| `String`			| `#0090FF`	| -									| -			|
+| `textPosition`		| 文本的位置						| `String`			| `right`	| `right`：右 <br/>`left`：左		| -			|
+| `textSize`			| 文本字体大小，单位rpx			| `Number/String`	| `25`		| -									| -			|
+| `textlnactiveColor`	| 未选中文本颜色					| `String`			| `#000000`	| -									| -			|
+| `textActiveColor`		| 选中文本颜色					| `String`			| `#000000`	| -									| -			|
+| `textDisabled`		| 禁用文本点击					| `Boolean`			| `false`	| -									| -			|
+| `max`					| 最大可选数，0 为无限制			| `Number`			| `0`		| -									| -			|
+| `marginLeft`			| 左边距,单位rpx					| `Number/String`	| `0`		| -									| `v1.10.0`	|
+| `marginRight`			| 右边距,单位rpx					| `Number/String`	| `0`		| -									| `v1.10.0`	|
+| `columnGap`			| 复选框和文本间距，单位rpx		| `Number/String`	| `16`		| -									| `v1.10.0`	|
+
+#### Checkbox Events
+|事件名		|说明									|事件参数																		|支持版本	|
+|---		|---									|---																			|---		|
+| `click`	|点击复选框时触发的事件（可拦截change事件）	|`value`：当前的绑定值,`allowStop`：允许阻止后续的事件触发,：`resolve`：后续的事件执行	| -			|
+| `change`	|当绑定值变化时触发的事件					|`value`：改变后的绑定值															| -			|
+
+#### CheckboxGroup Events
+|事件名		|说明					|事件参数				|支持版本	|
+|---		|---					|---					|---		|
+| `change`	|当绑定值变化时触发的事件	|`value`：改变后的绑定值	| -			|
+
+
+#### Checkbox Slots
+|插槽名		|说明			|插槽参数									|支持版本	|
+| ---		| ---			| ---										| ---		|
+| `default`	| 复选框文本内容	|`{ checked: boolean, disabled: boolean, readonly: boolean }`	| -			|
+| `icon`	| 复选框图标		|`{ checked: boolean, disabled: boolean, readonly: boolean }`	| -			|
+
+---$
+{{qinpengfei}}

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

@@ -0,0 +1,305 @@
+<template>
+	<view class="ste-checkbox--root" :style="[cmpStyle]" @click="click">
+		<view class="icon">
+			<slot name="icon" :slotProps="cmpSlotProps">
+				<view class="input-icon" :style="[cmpInputStyle]">
+					<ste-icon
+						v-if="cmpChecked && cmpIconSize"
+						:size="cmpIconSize * 0.8"
+						code="&#xe67a;"
+						:color="cmpDisabled ? '#bbbbbb' : '#fff'"
+						bold
+					></ste-icon>
+				</view>
+			</slot>
+		</view>
+		<view class="text">
+			<slot :slotProps="cmpSlotProps"></slot>
+		</view>
+	</view>
+</template>
+
+<script>
+import utils from '../../utils/utils.js';
+import useColor from '../../config/color.js';
+let color = useColor();
+/**
+ * ste-checkbox 复选框
+ * @description 复选框组件,在一组备选项中进行多选。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-checkbox
+ * @property {Boolean} value 当前选中值（支持v-model双向绑定） 默认 false
+ * @property {Number|String} name 选项的值
+ * @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 {Number|String} marginLeft 左边距，单位rpx 默认 0
+ * @property {Number|String} marginRight 右边距，单位rpx 默认 0
+ * @property {Number|String} columnGap 复选框和文本间距，单位rpx 默认 16
+ * @event {Function} click 点击复选框时触发的事件
+ * @event {Function} change 当绑定值变化时触发的事件
+ */
+export default {
+	group: '表单组件',
+	title: 'Checkbox 复选框',
+	name: 'ste-checkbox',
+	props: {
+		value: {
+			type: [Boolean, null],
+			default: false,
+		},
+		name: {
+			type: [Number, String, null],
+			default: '',
+		},
+		disabled: {
+			type: [Boolean, null],
+			default: null,
+		},
+		readonly: {
+			type: [Boolean, null],
+			default: null,
+		},
+		shape: {
+			type: [String, null],
+			default: null,
+		},
+		iconSize: {
+			type: [Number, String, null],
+			default: null,
+		},
+		checkedColor: {
+			type: [String, null],
+			default: null,
+		},
+		textPosition: {
+			type: [String, null],
+			default: null,
+		},
+		textSize: {
+			type: [Number, String, null],
+			default: null,
+		},
+		textInactiveColor: {
+			type: [String, null],
+			default: null,
+		},
+		textActiveColor: {
+			type: [String, null],
+			default: null,
+		},
+		textDisabled: {
+			type: [Boolean, null],
+			default: null,
+		},
+		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',
+	},
+	inject: {
+		checkboxGroup: {
+			default: '',
+		},
+	},
+	data() {
+		return {
+			clickTask: null, // click完成任务和allowStopStatus搭配使用
+			allowStopStatus: false, // 允许阻止后续的事件触发
+			num: 1, // 解决支付宝小程序checkboxGroup.value更新不触发计算属性的问题
+		};
+	},
+	computed: {
+		cmpDisabled() {
+			let disabled = this.getDefaultData('disabled', false);
+			// 限制最大可选数
+			if (this.cmpGroup && this.checkboxGroup.max) {
+				if (!this.cmpChecked && this.checkboxGroup.value.length >= this.checkboxGroup.max) {
+					disabled = true;
+				}
+			}
+			return disabled;
+		},
+		cmpReadonly() {
+			return this.getDefaultData('readonly', false);
+		},
+		cmpShape() {
+			return this.getDefaultData('shape', 'circle');
+		},
+		cmpIconSize() {
+			return this.getDefaultData('iconSize', 36);
+		},
+		cmpCheckedColor() {
+			return this.getDefaultData('checkedColor', color.getColor().steThemeColor);
+		},
+		cmpTextPosition() {
+			return this.getDefaultData('textPosition', 'right');
+		},
+		cmpTextSize() {
+			return this.getDefaultData('textSize', 28);
+		},
+		cmpTextInactiveColor() {
+			return this.getDefaultData('textInactiveColor', '#000000');
+		},
+		cmpTextActiveColor() {
+			return this.getDefaultData('textActiveColor', '#000000');
+		},
+		cmpTextDisabled() {
+			return this.getDefaultData('textDisabled', false);
+		},
+		cmpMarginLeft() {
+			return this.getDefaultData('marginLeft', '0');
+		},
+		cmpMarginRight() {
+			return this.getDefaultData('marginRight', '0');
+		},
+		cmpColumnGap() {
+			return this.getDefaultData('columnGap', '16');
+		},
+		cmpSlotProps() {
+			return {
+				checked: this.cmpChecked,
+				disabled: this.cmpDisabled,
+				readonly: this.cmpReadonly,
+			};
+		},
+		cmpStyle() {
+			let style = {};
+			style['fontSize'] = utils.formatPx(this.cmpTextSize);
+			style['color'] = this.cmpChecked ? this.cmpTextActiveColor : this.cmpTextInactiveColor;
+			style['flexDirection'] = this.cmpTextPosition == 'right' ? 'row' : 'row-reverse';
+			style['columnGap'] = utils.formatPx(this.cmpColumnGap);
+			style['marginLeft'] = utils.formatPx(this.cmpMarginLeft);
+			style['marginRight'] = utils.formatPx(this.cmpMarginRight);
+			// #ifdef H5
+			if (this.cmpDisabled || this.cmpReadonly) {
+				style['cursor'] = 'not-allowed';
+			} else if (this.cmpTextDisabled) {
+				style['cursor'] = 'default';
+			} else {
+				style['cursor'] = 'pointer';
+			}
+			// #endif
+			if (this.cmpTextDisabled) {
+				style['pointerEvents'] = 'none';
+			}
+			return style;
+		},
+		cmpInputStyle() {
+			let style = {};
+			// 没有icon 则默认样式
+			style['borderRadius'] = this.cmpShape == 'circle' ? '50%' : '0';
+			style['border'] = `${utils.formatPx(2)} solid ${this.cmpChecked ? this.cmpCheckedColor : '#BBBBBB'}`;
+			style['background'] = this.cmpChecked ? this.cmpCheckedColor : '#FFFFFF';
+			style['width'] = utils.formatPx(this.cmpIconSize);
+			style['height'] = utils.formatPx(this.cmpIconSize);
+			style['lineHeight'] = utils.formatPx(this.cmpIconSize);
+			// #ifdef H5
+			if (this.cmpDisabled || this.cmpReadonly) {
+				style['cursor'] = 'not-allowed';
+			} else {
+				style['cursor'] = 'pointer';
+			}
+			// #endif
+			if (this.cmpDisabled) {
+				style['background'] = '#eeeeee';
+				style['borderColor'] = '#bbbbbb';
+			}
+
+			// 在没有使用插槽内容时去掉边距
+			if (!this.$slots.default) {
+				style['columnGap'] = 0;
+			}
+			return style;
+		},
+		// 选中状态
+		cmpChecked() {
+			return this.num && this.cmpGroup ? this.checkboxGroup.value.includes(this.name) : this.value;
+		},
+		cmpGroup() {
+			return !!this.checkboxGroup;
+		},
+	},
+	methods: {
+		async click() {
+			if (!this.cmpDisabled && !this.cmpReadonly) {
+				this.allowStopStatus = false;
+				this.clickTask = new Promise((resolve) => {
+					this.$emit('click', this.value, this.allowStop, resolve);
+				});
+				if (this.allowStopStatus) {
+					await this.clickTask;
+				}
+				let value = null;
+				if (this.cmpGroup) {
+					value = this.checkboxGroup.value;
+					if (this.cmpChecked) {
+						value = value.filter((value) => value != this.name);
+					} else {
+						value.push(this.name);
+					}
+					this.checkboxGroup.$emit('input', value);
+					this.checkboxGroup.$emit('change', value);
+					this.num++;
+				} else {
+					value = !this.cmpChecked;
+					this.$emit('input', !this.cmpChecked);
+				}
+				this.$emit('change', value);
+			}
+		},
+		// 允许阻止后续操作
+		allowStop() {
+			this.allowStopStatus = true;
+		},
+		getDefaultData(key, value) {
+			return this[key] != null ? this[key] : this.checkboxGroup[key] ? this.checkboxGroup[key] : value;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-checkbox--root {
+	width: auto;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	.input-icon {
+		display: flex;
+		justify-content: center;
+		align-items: flex-end;
+	}
+	.icon {
+		pointer-events: all;
+	}
+	.text {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+}
+</style>