73 lines
2.2 KiB
Vue
73 lines
2.2 KiB
Vue
<script setup>
|
|
// Quellenauswahl (Typ-Buttons + Link-Feld/Ordnerwahl), geteilt zwischen dem Anlegen-Panel
|
|
// und dem Bearbeiten-Panel der Sidebar. v-model trägt { type, ort }.
|
|
const props = defineProps({
|
|
modelValue: { type: Object, required: true }, // { type, ort }
|
|
folders: { type: Object, default: () => ({}) }, // { projekt: [...], uni: [...] }
|
|
})
|
|
const emit = defineEmits(['update:modelValue', 'submit'])
|
|
|
|
const TYPES = [
|
|
{ key: 'thema', label: 'Thema' },
|
|
{ key: 'link', label: 'Link' },
|
|
{ key: 'projekt', label: 'Projekt' },
|
|
{ key: 'uni', label: 'Uni' },
|
|
]
|
|
|
|
function setType(key) {
|
|
emit('update:modelValue', { type: key, ort: '' }) // Typwechsel verwirft den alten Ort
|
|
}
|
|
function setOrt(ort) {
|
|
emit('update:modelValue', { ...props.modelValue, ort })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="dlg-sources">
|
|
<button v-for="t in TYPES" :key="t.key" :class="{ active: modelValue.type === t.key }"
|
|
@click="setType(t.key)">{{ t.label }}</button>
|
|
</div>
|
|
<input
|
|
v-if="modelValue.type === 'link'"
|
|
class="dlg-input" :value="modelValue.ort"
|
|
placeholder="https://…"
|
|
@input="setOrt($event.target.value)"
|
|
@keyup.enter="emit('submit')"
|
|
/>
|
|
<select
|
|
v-else-if="modelValue.type === 'projekt' || modelValue.type === 'uni'"
|
|
class="dlg-input" :value="modelValue.ort"
|
|
@change="setOrt($event.target.value)"
|
|
>
|
|
<option value="" disabled>Ordner wählen…</option>
|
|
<option v-for="fo in (folders[modelValue.type] || [])" :key="fo.location" :value="fo.location">{{ fo.name }}</option>
|
|
</select>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dlg-sources { display: flex; gap: 0.3rem; }
|
|
.dlg-sources button {
|
|
flex: 1;
|
|
padding: 0.35rem 0.2rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--panel-soft);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
}
|
|
.dlg-sources button.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
|
|
.dlg-input {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.4rem 0.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
background: var(--panel);
|
|
color: var(--text);
|
|
font: inherit;
|
|
}
|
|
.dlg-input:focus { outline: none; border-color: var(--accent); }
|
|
select.dlg-input { cursor: pointer; }
|
|
</style>
|