74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<VueSelect
|
|
v-model="selectedLabels"
|
|
:multiple="true"
|
|
:clearable="true"
|
|
label="label"
|
|
:options="labels"
|
|
>
|
|
<template #option="{ label, color }: { label: string, color: string }">
|
|
<span
|
|
class="py-1 px-2"
|
|
:style="`background-color: ${color};color: ${invertColor(color, true)};`"
|
|
>
|
|
{{ String(label) }}
|
|
</span>
|
|
</template>
|
|
<template #no-options>
|
|
{{ __("Pus de label disponibles") }}
|
|
</template>
|
|
</VueSelect>
|
|
<input
|
|
v-for="label of selectedLabels"
|
|
type="hidden"
|
|
:key="label.value"
|
|
:value="label.value"
|
|
:name="`${name}[]`"
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import VueSelect from "vue-select";
|
|
import trans from "../modules/trans";
|
|
import colors from "../modules/colors";
|
|
|
|
export default defineComponent({
|
|
mixins: [trans, colors],
|
|
components: {
|
|
VueSelect,
|
|
},
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "{}"),
|
|
data = JSON.parse(json);
|
|
this.name = data.name;
|
|
for (const label of data.value ?? []) {
|
|
this.selectedLabels.push({
|
|
label: label.name,
|
|
value: label.id,
|
|
color: label.color,
|
|
});
|
|
}
|
|
for (const label of data.labels) {
|
|
this.labels.push({
|
|
label: label.name,
|
|
value: label.id,
|
|
color: label.color,
|
|
});
|
|
}
|
|
},
|
|
data(): {
|
|
name: string;
|
|
selectedLabels: SelectModel[];
|
|
labels: SelectModel[];
|
|
} {
|
|
return {
|
|
name: "",
|
|
selectedLabels: [],
|
|
labels: [],
|
|
};
|
|
},
|
|
});
|
|
</script>
|