update option style

src/components/EventSelector.vue

@@ -1,21 +1,28 @@
 <template>
 	<div class="registration-event-selector">
-		<p v-if="label" class="t-form__label" :class="{required: requiredMark}" v-text="label" />
+		<p v-if="props.label" class="t-form__label" :class="{required: props.requiredMark}" v-text="props.label" />
-		<t-checkbox-group v-model="modelValue" class="group">
+		<div v-if="props.eventList.length" class="group" role="group">
-			<t-checkbox
+			<button
-				v-for="item in eventList"
+				v-for="item in props.eventList"
-				:key="item.id"
+				:key="item.id || item.name"
-				:value="item.id"
+				type="button"
-				:disabled="disabled"
 				class="item"
-				borderless
+				:class="{selected: isSelected(item.id)}"
+				:title="item.name"
+				:disabled="props.disabled || !item.id"
+				:aria-pressed="isSelected(item.id)"
+				@click="toggleEvent(item.id)"
 			>
-				<t-popover :content="item.name" placement="top">
+				<span
-					<span class="option-text" v-text="item.name" />
+					class="swatch"
-				</t-popover>
+					:style="{background: item.color || defaultColor}"
-			</t-checkbox>
+					aria-hidden="true"
-		</t-checkbox-group>
+				/>
-		<div v-if="!eventList.length" class="empty-block">暂无可用登记事件</div>
+				<span class="clip-text" v-text="item.name" />
+				<span v-if="isSelected(item.id)" class="mark" aria-hidden="true" />
+			</button>
+		</div>
+		<div v-else class="empty-block">暂无可用登记事件</div>
 	</div>
 </template>
 
@@ -29,13 +36,29 @@ interface Props {
 	disabled?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
 	label: "登记事件",
 	requiredMark: false,
 	disabled: false
 });
 
 const modelValue = defineModel<string[]>({ required: true });
+const defaultColor = "#2f88ff";
+
+const isSelected = (eventId?: string) => Boolean(eventId && modelValue.value.includes(eventId));
+
+const toggleEvent = (eventId?: string) => {
+	if (props.disabled || !eventId) {
+		return;
+	}
+
+	if (isSelected(eventId)) {
+		modelValue.value = modelValue.value.filter(id => id !== eventId);
+		return;
+	}
+
+	modelValue.value = [...modelValue.value, eventId];
+};
 </script>
 
 <style scoped lang="less">
@@ -61,50 +84,57 @@ const modelValue = defineModel<string[]>({ required: true });
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 
-  :deep(.item) {
+	.item {
-    width: 100%;
+		gap: .25rem;
-    max-width: 100%;
-    margin: 0;
-    padding: .875rem;
-    display: flex;
-    min-width: 0;
-    overflow: visible;
-    justify-content: center;
-    box-sizing: border-box;
-    background: #f8fbff;
-		border: 1px solid rgba(148, 163, 184, .28);
-		border-radius: 1rem;
-
-	}
-
-	:deep(.item .t-checkbox__content) {
-		width: 0;
-    max-width: 100%;
-    min-width: 0;
-    flex: 1 1 0;
-    overflow: visible;
-  }
-
-  :deep(.item .t-checkbox__title) {
-    display: block;
-    overflow: visible;
-  }
-
-  :deep(.item .t-popover__wrapper) {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-  }
-
-	:deep(.item .option-text) {
-		display: block;
 		width: 100%;
-		max-width: 100%;
+		margin: 0;
-		min-width: 0;
+		border: 1px solid gray;
+		display: flex;
+		padding: .5rem;
+		position: relative;
 		overflow: hidden;
-		white-space: nowrap;
+		background: #F8FBFF;
-		text-overflow: ellipsis;
+		text-align: left;
+		align-items: center;
+		border-radius: .5rem;
+
+		&.selected {
+			background: var(--td-brand-color-1, #f0f7ff);
+			border-color: var(--td-brand-color, #2f88ff);
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+			opacity: .6;
+		}
+
+		.swatch {
+			width: 1.5rem;
+			height: 1.5rem;
+			border-radius: .25rem;
+		}
+
+		.mark {
+			top: -2px;
+			left: -2px;
+			color: #fff;
+			width: 1.5rem;
+			height: 1.5rem;
+			position: absolute;
+			clip-path: polygon(0 0, 100% 0, 0 100%);
+			background: var(--td-brand-color, #2F88FF);
+			pointer-events: none;
+
+			&::after {
+				position: absolute;
+				top: .2rem;
+				left: .3rem;
+				font-size: .75rem;
+				font-weight: 700;
+				line-height: 1;
+				content: "✓";
+			}
+		}
 	}
 
 	.empty-block {
@@ -115,17 +145,21 @@ const modelValue = defineModel<string[]>({ required: true });
 
 :global(html.theme-dark) {
 	.registration-event-selector {
-		.label {
+		.t-form__label {
 			color: #94a3b8;
 		}
 
 		.empty-block,
-		:deep(.item) {
+		.item {
 			color: #e2e8f0;
 			background: rgba(15, 23, 42, .72);
 			border-color: rgba(148, 163, 184, .16);
 		}
+
+		.item.selected {
+			background: rgba(47, 136, 255, .16);
+			border-color: var(--td-brand-color, #2f88ff);
+		}
 	}
 }
 </style>
-