Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/ts.corals.io/frontend/components/CoralsForm/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>

  <b-form-group :invalid-feedback="form.error(field)" :label="labelValue"
                :label-for="idValue" :label-class="{'required-field':required}" :description="fieldDescription"
                :state="form.state(field)">

    <v-select :id="idValue" v-bind="$attrs" v-model="form[field]" :options="getOptions"
              :reduce="obj => obj.value"
              @input="$emit('input',$event)"
              :placeholder="`Select ${labelValue}`"
              :selectable="option => !option.hasOwnProperty('notSelectable')">
      <template #selected-option="{label,group_label}">
        <div class="selected-option">
          <div class="selected-option-group">
            <span class="selected-group" :class="isMultiple?'multi':''" v-if="group_label">
              {{ group_label }}
            </span>
            <span :class="{'has-group':group_label}">
              {{ label }}
            </span>
          </div>
        </div>
      </template>
      <template #option="{ group, label,is_group_empty,notSelectable,empty_group_message }">
        <div :class="{'font-weight-bold text-dark':notSelectable}">
          {{ label }}
        </div>
        <div v-if="is_group_empty">
          {{ empty_group_message }}
        </div>
      </template>
    </v-select>

  </b-form-group>

</template>

<script>
export default {
  name: "CoralsSelect",
  props: {
    form: {
      type: Object,
      required: true
    },
    label: {
      type: [String, Boolean],
      default: '',
      required: false,
    },
    type: {
      type: String,
      default: 'text',
    },
    field: {
      type: String,
      required: true,
    },
    options: {
      required: true,
    },
    required: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    getOptions() {
      let options = [];

      for (let optionKey in this.options) {

        if (typeof this.options[optionKey] == 'object' && this.options[optionKey].hasOwnProperty('label')) {
          options.push(this.options[optionKey]);
        } else if (Array.isArray(this.options)) {
          options.push(this.options[optionKey]);
        } else {
          options.push({value: optionKey, label: this.options[optionKey]});
        }
      }

      return options;
    },
    labelValue() {
      if (this.label === false) {
        return '';
      }

      if (this.label) {
        return this.label;
      }

      let label = this.field.replace('_', ' ');
      return label.charAt(0).toUpperCase() + label.slice(1);
    },
    idValue() {
      if (this.$attrs.id) {
        return this.$attrs.id;
      }

      return this.field;
    },
    fieldDescription() {
      return this.$attrs.description || '';
    },
    isMultiple() {
      return !!this.$attrs.multiple;
    }
  }
}
</script>

<style>
.vs__dropdown-option {
  padding: 3px 2px 3px 10px;
}

.vs__dropdown-option:not(.vs__dropdown-option--disabled) {
  padding-left: 20px !important;
}

.vs__search {
  color: lightgray !important
}

.selected-group {
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px !important;
  position: absolute;
  top: -9px;
  left: -5px;
  color: gray;
}

.selected-group.multi {
  background-color: var(--vs-selected-bg);
  font-size: 9px !important;
  top: -7px;
  left: -5px;
}

.selected-option-group {
  position: relative;
}

.selected-option .has-group {
  top: 12px
}
</style>