use event-selector

src/components/EventRecordCalendar.vue

@@ -89,17 +89,11 @@
 					</t-button>
 				</div>
 				<div class="popup-body">
-					<t-checkbox-group v-model="selectedEventIdListProxy" class="items">
-						<t-checkbox
-							class="item"
-							v-for="item in eventList"
-							:key="item.id"
-							:value="item.id"
-							:label="item.name"
-							block
-							borderless
-						/>
-					</t-checkbox-group>
+					<event-selector
+						v-model="selectedEventIdListProxy"
+						:event-list="eventList"
+						label=""
+					/>
 				</div>
 			</div>
 		</t-popup>
@@ -108,6 +102,7 @@
 
 <script setup lang="ts">
 import StoreAPI from "@/api/StoreAPI";
+import EventSelector from "@/components/EventSelector.vue";
 import type {EventItem} from "@/types/EventItem";
 import type {EventRecord} from "@/types/EventRecord";
 import type {StoreBusinessDay} from "@/types/Store";
@@ -499,16 +494,6 @@ function toDateValue(date: Date): number {
 	.popup-body {
 		padding: 0;
 	}
-
-	.items {
-		gap: .5rem;
-		display: grid;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-
-		.item {
-			border-radius: .5rem;
-		}
-	}
 }
 
 :global(html.theme-dark) {