118 lines
2.3 KiB
Vue
118 lines
2.3 KiB
Vue
<template>
|
|
<div class="field">
|
|
<label class="field-label">{{ label }}</label>
|
|
<div
|
|
v-for="(item, i) in modelValue"
|
|
:key="i"
|
|
class="list-item"
|
|
>
|
|
<slot :item="item" :index="i" :update="(val: any) => updateItem(i, val)" />
|
|
<button class="list-remove" @click="removeItem(i)" aria-label="Supprimer">
|
|
<div class="i-lucide-x h-3.5 w-3.5" />
|
|
</button>
|
|
</div>
|
|
<button class="list-add" @click="addItem">
|
|
<div class="i-lucide-plus h-4 w-4" />
|
|
{{ addLabel }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
label: string
|
|
modelValue: any[]
|
|
addLabel?: string
|
|
defaultItem?: () => any
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:modelValue': [value: any[]]
|
|
}>()
|
|
|
|
function updateItem(index: number, value: any) {
|
|
const copy = [...props.modelValue]
|
|
copy[index] = value
|
|
emit('update:modelValue', copy)
|
|
}
|
|
|
|
function removeItem(index: number) {
|
|
const copy = [...props.modelValue]
|
|
copy.splice(index, 1)
|
|
emit('update:modelValue', copy)
|
|
}
|
|
|
|
function addItem() {
|
|
const newItem = props.defaultItem ? props.defaultItem() : {}
|
|
emit('update:modelValue', [...props.modelValue, newItem])
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.field-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: hsl(20 8% 60%);
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
border: 1px solid hsl(20 8% 14%);
|
|
border-radius: 0.5rem;
|
|
background: hsl(20 8% 5%);
|
|
}
|
|
|
|
.list-item > :deep(*:first-child) {
|
|
flex: 1;
|
|
}
|
|
|
|
.list-remove {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 0.375rem;
|
|
border: none;
|
|
background: hsl(0 60% 45% / 0.15);
|
|
color: hsl(0 60% 65%);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
margin-top: 0.125rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.list-remove:hover {
|
|
background: hsl(0 60% 45% / 0.3);
|
|
}
|
|
|
|
.list-add {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px dashed hsl(20 8% 22%);
|
|
background: none;
|
|
color: hsl(20 8% 50%);
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.list-add:hover {
|
|
border-color: hsl(12 76% 48% / 0.4);
|
|
color: hsl(12 76% 68%);
|
|
}
|
|
</style>
|