47 lines
2.2 KiB
Vue
47 lines
2.2 KiB
Vue
<template>
|
|
<section class="feature-grid feature-grid--tasks">
|
|
<article class="feature-panel app-panel">
|
|
<h3>Grouped config</h3>
|
|
<div v-for="group in groups" :key="group.name" class="config-group">
|
|
<h4>{{ group.name }}</h4>
|
|
<div v-for="item in group.items" :key="item.key" class="config-row">
|
|
<label :for="item.key">{{ item.key }}</label>
|
|
<div v-if="item.sensitive && !item.editing" class="row-actions">
|
|
<input :id="item.key" :aria-label="item.key" value="••••••••••••" type="text" readonly />
|
|
<button type="button" @click="$emit('toggle-sensitive-edit', item.key)">Edit {{ item.key }}</button>
|
|
</div>
|
|
<input v-else :id="item.key" :aria-label="item.key" :value="item.value" type="text" @input="$emit('update-config', item.key, ($event.target as HTMLInputElement).value)" />
|
|
<label v-if="item.directoryLike" :for="`${item.key}-suggestion`">Path suggestion for {{ item.key }}</label>
|
|
<input v-if="item.directoryLike" :id="`${item.key}-suggestion`" :aria-label="`Path suggestion for ${item.key}`" :value="suggestionKeyword" type="text" placeholder="Type path prefix" @input="$emit('update:suggestion-keyword', ($event.target as HTMLInputElement).value)" />
|
|
<div v-if="item.directoryLike && item.validationMessage" class="form-error">{{ item.validationMessage }}</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="feature-panel app-panel">
|
|
<h3>Path suggestions</h3>
|
|
<div class="suggestion-list">
|
|
<div v-for="item in suggestions" :key="item" class="row-card">{{ item }}</div>
|
|
</div>
|
|
<button type="button" @click="$emit('save')">Save config</button>
|
|
</article>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { SystemConfigItem } from '../../types/config'
|
|
|
|
defineProps<{
|
|
groups: Array<{ name: string; items: Array<SystemConfigItem & { directoryLike?: boolean }> }>
|
|
suggestions: string[]
|
|
suggestionKeyword: string
|
|
}>()
|
|
|
|
defineEmits<{
|
|
'update:suggestion-keyword': [value: string]
|
|
'update-config': [key: string, value: string]
|
|
'toggle-sensitive-edit': [key: string]
|
|
save: []
|
|
}>()
|
|
</script>
|