45 lines
1.8 KiB
Vue
45 lines
1.8 KiB
Vue
<template>
|
|
<div class="space-y-1">
|
|
<span class="text-xs font-semibold text-gray-400">Optionen</span>
|
|
<div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
|
|
<f-text
|
|
:id="`options-${index}`"
|
|
size="sm"
|
|
class="grow"
|
|
:model-value="option"
|
|
@update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
|
|
></f-text>
|
|
<ui-action-button
|
|
tooltip="Löschen"
|
|
icon="trash"
|
|
class="btn-danger"
|
|
@click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
|
|
></ui-action-button>
|
|
</div>
|
|
<ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
|
|
<f-text id="min" type="number" size="sm" label="Minimale Anzahl Elemente" :model-value="modelValue.min" @update:model-value="$emit('update:modelValue', {...modelValue, min: $event})"></f-text>
|
|
<f-text
|
|
id="max"
|
|
type="number"
|
|
size="sm"
|
|
name="max"
|
|
label="Maximale Anzahl Elemente"
|
|
:model-value="modelValue.max"
|
|
@update:model-value="$emit('update:modelValue', {...modelValue, max: $event})"
|
|
></f-text>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="js" setup>
|
|
import useElements from './useElements.js';
|
|
const { addOption, setOption, removeOption } = useElements();
|
|
|
|
const props = defineProps({
|
|
modelValue: {},
|
|
meta: {},
|
|
payload: {},
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
</script>
|