stellar-ui-v2 1.40.33 → 1.40.34

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

@@ -17,6 +17,7 @@
 <script>
 import utils from '../../utils/utils.js';
 import useColor from '../../config/color.js';
+import { configChildMixin } from '../../utils/mixin.js';
 let color = useColor();
 /**
  * ste-checkbox 复选框
@@ -48,6 +49,7 @@ export default {
 	group: '表单组件',
 	title: 'Checkbox 复选框',
 	name: 'ste-checkbox',
+	mixins: [configChildMixin('checkboxGroup')],
 	props: {
 		value: {
 			type: [Boolean, null],
@@ -115,64 +117,57 @@ export default {
 		// 派发事件名，更新父组件数据
 		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);
+			let disabled = this.getParentProp('disabled', false);
 			// 限制最大可选数
-			if (this.cmpGroup && this.checkboxGroup.max) {
-				if (!this.cmpChecked && this.checkboxGroup.value.length >= this.checkboxGroup.max) {
+			if (this.$hasParent && this.parent.max) {
+				if (!this.cmpChecked && this.parent.value.length >= this.parent.max) {
 					disabled = true;
 				}
 			}
 			return disabled;
 		},
 		cmpReadonly() {
-			return this.getDefaultData('readonly', false);
+			return this.getParentProp('readonly', false);
 		},
 		cmpShape() {
-			return this.getDefaultData('shape', 'circle');
+			return this.getParentProp('shape', 'circle');
 		},
 		cmpIconSize() {
-			return this.getDefaultData('iconSize', 36);
+			return this.getParentProp('iconSize', 36);
 		},
 		cmpCheckedColor() {
-			return this.getDefaultData('checkedColor', color.getColor().steThemeColor);
+			return this.getParentProp('checkedColor', color.getColor().steThemeColor);
 		},
 		cmpTextPosition() {
-			return this.getDefaultData('textPosition', 'right');
+			return this.getParentProp('textPosition', 'right');
 		},
 		cmpTextSize() {
-			return this.getDefaultData('textSize', 28);
+			return this.getParentProp('textSize', 28);
 		},
 		cmpTextInactiveColor() {
-			return this.getDefaultData('textInactiveColor', '#000000');
+			return this.getParentProp('textInactiveColor', '#000000');
 		},
 		cmpTextActiveColor() {
-			return this.getDefaultData('textActiveColor', '#000000');
+			return this.getParentProp('textActiveColor', '#000000');
 		},
 		cmpTextDisabled() {
-			return this.getDefaultData('textDisabled', false);
+			return this.getParentProp('textDisabled', false);
 		},
 		cmpMarginLeft() {
-			return this.getDefaultData('marginLeft', '0');
+			return this.getParentProp('marginLeft', '0');
 		},
 		cmpMarginRight() {
-			return this.getDefaultData('marginRight', '0');
+			return this.getParentProp('marginRight', '0');
 		},
 		cmpColumnGap() {
-			return this.getDefaultData('columnGap', '16');
+			return this.getParentProp('columnGap', '16');
 		},
 		cmpSlotProps() {
 			return {
@@ -231,47 +226,54 @@ export default {
 			return style;
 		},
 		// 选中状态
+		// 注意：使用宽松相等比较，避免 value（字符串数组）和 name（数字）类型不一致导致匹配失败
 		cmpChecked() {
-			return this.num && this.cmpGroup ? this.checkboxGroup.value.includes(this.name) : this.value;
-		},
-		cmpGroup() {
-			return !!this.checkboxGroup;
+			if (this.num && this.$hasParent) {
+				return this.parent.value.some((v) => v == this.name);
+			}
+			return this.value;
 		},
 	},
 	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;
+		click() {
+			if (this.cmpDisabled || this.cmpReadonly) {
+				return;
+			}
+
+			// 如果有 click 事件监听器，先触发事件
+			// 使用 $listeners 判断是否有 click 事件回调
+			if (this.$listeners?.click) {
+				let stopped = false;
+				const next = () => {
+					// 不阻止后续操作
+				};
+				const stop = () => {
+					stopped = true;
+				};
+				// 同步触发 click 事件回调
+				this.$emit('click', this.value, next, stop);
+				// 如果用户调用了 stop()，则不执行后续逻辑
+				if (stopped) {
+					return;
 				}
-				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++;
+			}
+
+			let value = null;
+			if (this.$hasParent) {
+				value = this.parent.value;
+				if (this.cmpChecked) {
+					value = value.filter((value) => value != this.name);
 				} else {
-					value = !this.cmpChecked;
-					this.$emit('input', !this.cmpChecked);
+					value.push(this.name);
 				}
-				this.$emit('change', value);
+				this.parent.$emit('input', value);
+				this.parent.$emit('change', value);
+				this.num++;
+			} else {
+				value = !this.cmpChecked;
+				this.$emit('input', !this.cmpChecked);
 			}
-		},
-		// 允许阻止后续操作
-		allowStop() {
-			this.allowStopStatus = true;
-		},
-		getDefaultData(key, value) {
-			return this[key] != null ? this[key] : this.checkboxGroup[key] ? this.checkboxGroup[key] : value;
+			this.$emit('change', value);
 		},
 	},
 };

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

@@ -5,6 +5,25 @@
 </template>
 
 <script>
+import { configParentMixin } from '../../utils/mixin.js';
+
+// 需要透传给子组件的配置项
+const CHECKBOX_PROP_KEYS = [
+	'disabled',
+	'readonly',
+	'shape',
+	'iconSize',
+	'checkedColor',
+	'textPosition',
+	'textSize',
+	'textInactiveColor',
+	'textActiveColor',
+	'textDisabled',
+	'marginLeft',
+	'marginRight',
+	'columnGap',
+];
+
 /**
  * ste-checkbox-group 复选框组
  * @description 复选框组组件,内部由多个checkbox组成。
@@ -35,6 +54,7 @@
  */
 export default {
 	name: 'ste-checkbox-group',
+	mixins: [configParentMixin('checkboxGroup', CHECKBOX_PROP_KEYS)],
 	props: {
 		value: {
 			type: [Array, null],
@@ -62,7 +82,7 @@ export default {
 		},
 		checkedColor: {
 			type: [String, null],
-			default: '',
+			default: null,
 		},
 		textPosition: {
 			type: [String, null],
@@ -106,11 +126,6 @@ export default {
 		// 派发事件名，更新父组件数据
 		event: 'input',
 	},
-	provide() {
-		return {
-			checkboxGroup: this,
-		};
-	},
 	data() {
 		return {};
 	},

package/components/ste-drag-sort/README.md

@@ -0,0 +1,124 @@
+# DragSort 拖拽排序
+用于列表、宫格等场景的拖拽排序组件。
+
+---$
+
+### 代码演示
+
+#### 基础用法
+- 通过 `v-model` 传入待排序列表
+- 通过具名插槽 `item` 自定义每一项的展示内容
+
+```html
+<template>
+    <ste-drag-sort v-model="basicList">
+        <template v-slot:item="{ item, index }">
+            <view class="demo-card-item">{{ index + 1 }}. {{ item.text }}</view>
+        </template>
+    </ste-drag-sort>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            basicList: [{ text: '商品 A' }, { text: '商品 B' }, { text: '商品 C' }],
+        };
+    },
+};
+</script>
+<style>
+.demo-card-item {
+    padding: 24rpx;
+    margin-bottom: 16rpx;
+    border-radius: 16rpx;
+    background: #f5f7fa;
+}
+</style>
+```
+
+#### 网格排序
+- `columns` 大于 `1` 时会按网格布局排序
+- 网格类纯拖拽场景可按需要设置 `:longPress="false"`
+
+```html
+<template>
+    <ste-drag-sort v-model="gridList" :columns="3" :longPress="false">
+        <template v-slot:item="{ item }">
+            <view class="grid-item">{{ item.text }}</view>
+        </template>
+    </ste-drag-sort>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            gridList: [{ text: '1' }, { text: '2' }, { text: '3' }, { text: '4' }, { text: '5' }, { text: '6' }],
+        };
+    },
+};
+</script>
+<style>
+.grid-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 120rpx;
+    margin: 12rpx;
+    border-radius: 16rpx;
+    background: #eef3ff;
+}
+</style>
+```
+
+#### 禁用单项拖拽
+- 列表项数据中可直接写 `disabled: true`
+- 被禁用项会保留展示，但不能被拖拽
+
+```html
+<template>
+    <ste-drag-sort v-model="disabledList">
+        <template v-slot:item="{ item }">
+            <view class="demo-card-item" :style="{ opacity: item.disabled ? 0.5 : 1 }">{{ item.text }}</view>
+        </template>
+    </ste-drag-sort>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            disabledList: [{ text: '固定在这里', disabled: true }, { text: '可拖拽 1' }, { text: '可拖拽 2' }],
+        };
+    },
+};
+</script>
+```
+
+---$
+
+### API
+
+#### Props
+
+| 参数         | 说明                                                                                                   | 类型      | 默认值  | 可选值 | 支持版本 |
+| ---          | ---                                                                                                    | ---       | ---     | ---    | ---      |
+| `value`      | 拖拽数据列表，支持 v-model 双向绑定                                                                    | `Array`   | `[]`    | -      | -        |
+| `disabled`   | 是否禁用拖拽功能                                                                                       | `Boolean` | `false` | -      | -        |
+| `columns`    | 列数，1 为纵向列表，大于 1 为网格排序                                                                  | `Number`  | `1`     | -      | -        |
+| `longPress`  | 拖拽启动方式。true 为长按后开始拖拽，适合列表和可滚动页面；false 为按下立即拖拽，适合网格和纯排序面板 | `Boolean` | `true`  | -      | -        |
+
+#### Events
+
+| 事件名   | 说明                   | 事件参数                    | 支持版本 |
+| ---      | ---                    | ---                         | ---      |
+| `start`  | 开始拖拽时触发         | `index`：当前拖拽项索引     | -        |
+| `change` | 排序结果发生变化时触发 | `list`：最新排序结果        | -        |
+| `end`    | 拖拽结束时触发         | `index`：最终落点索引       | -        |
+
+#### Slots
+
+| 插槽名 | 说明           | 插槽参数                                                                                                                                                  | 支持版本 |
+| ---    | ---            | ---                                                                                                                                                       | ---      |
+| `item` | 单个拖拽项内容 | `item`：当前项数据<br/>`index`：当前项索引<br/>`dragging`：当前是否处于拖拽中<br/>`dragIndex`：当前拖拽项索引<br/>`insertIndex`：当前插入位置索引 | -        |
+
+---$
+{{fuyuwei}}

package/components/ste-drag-sort/config.json

@@ -0,0 +1,5 @@
+{
+    "group": "基础组件",
+    "title": "DragSort 拖拽排序",
+    "icon": "https://image.whzb.com/chain/StellarUI/组件图标/drag.png?1722389562846"
+}