97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<VueSelect
|
|
v-model="selectedLabel"
|
|
:multiple="false"
|
|
:clearable="true"
|
|
label="label"
|
|
:options="allLabels"
|
|
@search="searchForModels"
|
|
>
|
|
<template #option="{ label }: { label: string }">
|
|
<span class="py-1 px-2">
|
|
{{ String(label) }}
|
|
</span>
|
|
</template>
|
|
<template #no-options>
|
|
{{ __("Pus de label disponibles") }}
|
|
</template>
|
|
</VueSelect>
|
|
<input
|
|
type="hidden"
|
|
:key="selectedLabel.value"
|
|
:value="selectedLabel.value"
|
|
:name="`${name}`"
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import VueSelect from "vue-select";
|
|
import trans from "../modules/trans";
|
|
|
|
export default defineComponent({
|
|
name: "LabelSelectOneComponent",
|
|
mixins: [trans],
|
|
components: {
|
|
VueSelect,
|
|
},
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "{}"),
|
|
data = JSON.parse(json);
|
|
this.name = data.name;
|
|
this.labels = data.labels;
|
|
this.selectedLabel =
|
|
this.labels.reduce((previous, current) => {
|
|
return data.value === current.value ? current : previous;
|
|
}) ?? this.customLabel;
|
|
},
|
|
data(): {
|
|
name: string;
|
|
customLabel: VselectOption;
|
|
selectedLabel: VselectOption;
|
|
labels: VselectOption[];
|
|
} {
|
|
return {
|
|
name: "",
|
|
customLabel: {
|
|
label: "",
|
|
value: 0,
|
|
},
|
|
selectedLabel: {
|
|
label: "",
|
|
value: 0,
|
|
},
|
|
labels: [],
|
|
};
|
|
},
|
|
computed: {
|
|
allLabels(): VselectOption[] {
|
|
const labels = Object.assign([], this.labels) as VselectOption[];
|
|
if (this.customLabel.label.length) {
|
|
labels.push(this.customLabel);
|
|
}
|
|
return labels;
|
|
},
|
|
},
|
|
methods: {
|
|
searchForModels(search: string) {
|
|
if (search.length) {
|
|
this.customLabel = {
|
|
label: search,
|
|
value: search,
|
|
};
|
|
}
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "./../../../node_modules/vue-select/dist/vue-select.css";
|
|
|
|
.v-select {
|
|
background-color: #f8fafc;
|
|
}
|
|
</style>
|