90 lines
1.7 KiB
Vue
90 lines
1.7 KiB
Vue
<template>
|
|
<div class="registration-event-selector">
|
|
<p v-if="label" class="t-form__label" :class="{required: requiredMark}" v-text="label" />
|
|
<t-checkbox-group v-model="modelValue" class="group">
|
|
<t-checkbox
|
|
v-for="item in registrationEventList"
|
|
:key="item.id"
|
|
:value="item.id"
|
|
class="item"
|
|
borderless
|
|
>
|
|
<span v-text="item.name" />
|
|
</t-checkbox>
|
|
</t-checkbox-group>
|
|
<div v-if="!registrationEventList.length" class="empty-block">暂无可用登记事件</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RegistrationEvent } from "@/types/RegistrationEvent";
|
|
|
|
interface Props {
|
|
registrationEventList: RegistrationEvent[];
|
|
label?: string;
|
|
requiredMark?: boolean;
|
|
}
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
label: "登记事件",
|
|
requiredMark: false
|
|
});
|
|
|
|
const modelValue = defineModel<string[]>({ required: true });
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.registration-event-selector {
|
|
width: 100%;
|
|
display: grid;
|
|
gap: .5rem;
|
|
|
|
.t-form__label {
|
|
margin: 0;
|
|
|
|
&.required::before {
|
|
color: #e34d59;
|
|
content: "*";
|
|
margin-right: .25rem;
|
|
}
|
|
}
|
|
|
|
.group {
|
|
width: 100%;
|
|
gap: .75rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
:deep(.item) {
|
|
margin: 0;
|
|
padding: .875rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: #f8fbff;
|
|
border: 1px solid rgba(148, 163, 184, .28);
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.empty-block {
|
|
color: #52607a;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
:global(html.theme-dark) {
|
|
.registration-event-selector {
|
|
.label {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.empty-block,
|
|
:deep(.item) {
|
|
color: #e2e8f0;
|
|
background: rgba(15, 23, 42, .72);
|
|
border-color: rgba(148, 163, 184, .16);
|
|
}
|
|
}
|
|
}
|
|
</style>
|