stellar-ui-v2 1.35.3

package/components/ste-radio/ste-radio.vue

@@ -0,0 +1,293 @@
+<template>
+	<view class="ste-radio-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-radio 单选框
+ * @description 单选框组件,在一组备选项中进行单选。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-radio
+ * @property {String} value 当前选中值（支持v-model双向绑定
+ * @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 选中状态的图标颜色 默认 #0090FF0
+ * @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: 'Radio 单选框',
+	name: 'ste-radio',
+	props: {
+		value: {
+			type: [Number, String, null],
+			default: '',
+		},
+		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: {
+		radioGroup: {
+			default: '',
+		},
+	},
+	data() {
+		return {
+			clickTask: null, // click完成任务和allowStopStatus搭配使用
+			allowStopStatus: false, // 允许阻止后续的事件触发
+		};
+	},
+	computed: {
+		cmpDisabled() {
+			return this.getDefaultData('disabled', false);
+		},
+		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';
+			}
+
+			// 在没有使用插槽内容时去掉边距
+			if (!this.$slots.default) {
+				style['columnGap'] = 0;
+			}
+
+			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';
+			}
+			return style;
+		},
+		// 选中状态
+		cmpChecked() {
+			return this.cmpGroup ? this.radioGroup.value == this.name : this.value == this.name;
+		},
+		cmpGroup() {
+			return !!this.radioGroup;
+		},
+	},
+	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;
+				}
+				if (!this.cmpChecked) {
+					let value = this.name;
+					if (this.cmpGroup) {
+						this.radioGroup.$emit('input', value);
+						this.radioGroup.$emit('change', value);
+					} else {
+						this.$emit('input', value);
+					}
+					this.$emit('change', value);
+				}
+			}
+		},
+		// 允许阻止后续操作
+		allowStop() {
+			this.allowStopStatus = true;
+		},
+		getDefaultData(key, value) {
+			return this[key] != null ? this[key] : this.radioGroup[key] ? this.radioGroup[key] : value;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-radio-root {
+	width: auto;
+	height: 100%;
+	display: flex;
+	column-gap: 16rpx;
+	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>

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

@@ -0,0 +1,128 @@
+<template>
+	<view class="ste-radio-group-root" :style="[cmpStyle]">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+/**
+ * ste-radio-group 单选框组
+ * @description 单选框组组件,内部由多个radio组成。
+ * @tutorial https://stellar-ui.intecloud.com.cn/pc/index/index?name=ste-radio
+ * @property {String} 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 选中状态的图标颜色 默认 #0090FF0
+ * @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} change 当绑定值变化时触发的事件
+ */
+export default {
+	name: 'ste-radio-group',
+	props: {
+		value: {
+			type: [Number, String, 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: '#0090FF',
+		},
+		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,
+		},
+		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 {
+			radioGroup: this,
+		};
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		cmpStyle() {
+			let style = {};
+			style['flexDirection'] = this.direction;
+			return style;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.ste-radio-group-root {
+	display: flex;
+	column-gap: 16rpx;
+	row-gap: 16rpx;
+}
+</style>

package/components/ste-rate/README.md

@@ -0,0 +1,115 @@
+# Rate 徽标
+
+用于对事物进行评级操作。
+
+---$
+
+### 代码演示
+JavaScript后面的演示代码中涉及到的变量和方法都使用本javasaript代码
+```javascript
+export default {
+	data() {
+		return {
+			value: 2,
+			value1: 2,
+			value2: 3,
+			value3: 2.6,
+			value4: 2.5,
+		};
+	},
+	created() {},
+	methods: {
+		change(value) {
+			console.log('value', value);
+		},
+	},
+};
+```
+#### 基础用法
+通过`value`属性，双向绑定，设置评分的值
+```
+<ste-rate v-model="value"></ste-rate>
+```
+#### 自定义图标
+- 通过`inactiveCode`属性，设置未选中的图标code，默认`&#xe681;`。  
+- 通过`activeCode`属性，设置选中的图标code，默认`&#xe684;`。  
+- 使用自定义code时，图标内容应该撑满盒子，避免内容距盒子距离太大，导致选中的颜色计算有偏差。
+```
+<!--选中和未选中 图标一样-->
+<ste-rate v-model="value1" inactiveCode="&#xe685;" activeCode="&#xe685;"></ste-rate>
+<!--选中和未选中 图标不一样-->
+<ste-rate v-model="value1" inactiveCode="&#xe685;" activeCode="&#xe687;"></ste-rate>
+```
+
+#### 自定义样式
+- 通过`inactiveColor`属性，设置未选中的颜色，默认`#dddddd`。  
+- 通过`activeColor`属性，设置选中的颜色，默认`#0090FF`。
+- 通过`size`属性，设置评分图标的大小，单位`rpx`，默认`44`。
+- 通过`gutter`属性，设置每个图标之间的距离，单位`rpx`，默认`10`。
+
+```
+<ste-rate v-model="value2" inactiveColor="#F8D5D5" activeColor="#d276a3" size="80" :gutter="20"></ste-rate>
+```
+
+#### 只读  
+通过`readonly `属性，设置只读，不可切换评分，样式不置灰，可部分星， 默认`false`。 
+```
+<ste-rate v-model="value3" readonly></ste-rate>
+```
+#### 禁用  
+通过`disabled`属性，设置禁用，不可切换评分，样式置灰，可部分星，默认`false`。 
+```
+<ste-rate v-model="value3" disabled></ste-rate>
+```
+
+#### 自定义数量和自定义分值  
+- 通过`count`属性，设置图标总数，默认`5`。   
+- 通过`score`属性，设置每颗图标代表的分数，默认`1`。 
+```
+<!--星星数量为1，分值为5, 分数为2.5-->
+<ste-rate v-model="value4" :count="1" :score="5"></ste-rate>
+```
+
+#### 自定义分值图标
+- 需要传入图标code对应的数组, 此时`inactiveColor`和`activeColor`将失效
+- 会根据当前评分数对应的图标数量来取`iconData`中的值为当前图标的`code`
+```
+<ste-rate v-model="value5" :iconData="iconData"></ste-rate>
+<script>
+export default {
+	data() {
+		return {
+			iconData: ['&#xe686;', '', '&#xe671;', '&#xe66a;', '&#xe66b;']
+		}
+	}
+}
+</script>
+```
+
+---$
+### API
+#### 组件属性(Props)
+
+| 参数				| 说明							| 类型				| 默认值		| 可选值	| 支持版本	|
+| ---				| ---							| ---				| ---		| ---	| ---		|
+| `value`			| 当前评分数(支持v-model双向绑定)	| `Number`			| `0`		| -		| -			|
+| `count`			| 图标总数						| `Number`			| `5`		| -		| -			|
+| `score`			| 每颗星星代表的分数				| `Number`			| `1`		| -		| -			|
+| `disabled`		| 禁用							| `Boolean`			| `false`	| -		| -			|
+| `readonly `		| 只读（不置灰）					| `Boolean`			| `false`	| -		| -			|
+| `size`			| 评分图标的大小，单位`rpx`		| `Number/String`	| `44`		| -		| -			|
+| `inactiveColor`	| 未选中的颜色					| `String`			| `#dddddd`	| -		| -			|
+| `activeColor`		| 选中的颜色						| `String`			| `#0090FF`	| -		| -			|
+| `inactiveCode`	| 未选中的图标`code`				| `String`			| `&#xe681;`| -		| -			|
+| `activeCode`		| 选中的图标`code`				| `String`			| `&#xe684;`| -		| -			|
+| `gutter`			| 每个图标之间的距离，单位`rpx`	| `Number/String`	| `10`		| -		| -			|
+| `iconData`		| 每个分值对应的图标code			| `Array`			| -			| -		| -			|
+
+
+#### Events
+|事件名		|说明					|事件参数				|支持版本	|
+|---		|---					|---					|---		|
+| `change`	|当前分值变化时触发的事件	| `value`:改变后的分值	| -			|
+
+---$
+{{qinpengfei}}