ldc-supportweb/resources/ts/bo/components/LabelSelectComponent.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>
        {{ __("Plus 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 colors from "../../modules/colors";
import trans from "../../modules/trans";

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>

<style lang="scss">
@import "vue-select/dist/vue-select.css";
</style>