blob: 9fd359be8a356f12a69ecc47e731ce1194ded9d0 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<script setup>
import {$gettext} from '@/assets/javascripts/lib/gettext';
import StudipSelect from '@/vue/components/StudipSelect.vue';
const selectedTopics = defineModel();
</script>
<template>
<StudipSelect
:placeholder="$gettext('Thema')"
label="name"
v-model="selectedTopics"
:reduce="topic => {
if(topic.name) {
return topic;
}
return { name: topic };
}"
v-bind="$attrs"
>
<template #search="{attributes, events}">
<input
class="vs__search"
:required="!selectedTopics && $attrs.required"
v-bind="attributes"
v-on="events"
/>
</template>
<template #selected-option="{name, color}">
<div class="flex items-center">
<span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}" aria-hidden="true"></span>
<span class="line-clamp-1 flex-1">{{ name }}</span>
</div>
</template>
<template #option="{name, color}">
<div :style="{ display: 'flex', alignItems: 'center' }">
<span v-if="color" :style="{ backgroundColor: color, height: '14px', width: '14px', marginRight: '8px'}" aria-hidden="true"></span>
<span :style="{ flex: '1'}" class="line-clamp-1">{{ name }}</span>
</div>
</template>
<template #no-options>
<div>
{{ $gettext('Es gibt keine Themen.') }}
</div>
</template>
</StudipSelect>
</template>
|
