scinote-web/app/javascript/vue/shared/dropdown_selector.vue

<template>
  <div class="dropdown-selector">
    <select :id="this.selectorId"
            :data-select-by-group="groupSelector"
            :data-combine-tags="dataCombineTags"
            :data-select-multiple-all-selected="dataSelectMultipleAllSelected"
            :data-select-multiple-name="dataSelectMultipleName"
            :data-placeholder="placeholder"
            :data-view-mode="viewMode"
    >
      <template v-if="groupSelector">
        <optgroup v-for="group in this.options" :label="group.label" :key="group.label">
          <option v-for="option in group.options"
            :key="option.label"
            :value="option.value"
            :selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
            :data-selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
            :data-params="JSON.stringify(option.params)"
            :data-group="group.label">
            {{ option.label }}
          </option>
        </optgroup>
      </template>
      <template v-else>
        <option
          v-for="option in this.options"
          :key="option.label"
          :value="option.value"
          :selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
          :data-selected="option.value == selectedValue || (Array.isArray(selectedValue) && selectedValue.some(e => e == option.value))"
          :data-params="JSON.stringify(option.params)">
          {{ option.label }}
        </option>
      </template>
    </select>
  </div>
</template>

<script>
  export default {
    name: 'DropdownSelector',
    props: {
      options: Array,
      selectorId: String,
      groupSelector: {
        type: Boolean,
        default: false
      },
      noEmptyOption: {
        type: Boolean,
        default: true
      },
      placeholder: {
        type: String,
        default: ''
      },
      selectedValue: {
        type: [String, Number, Boolean, Array],
        default: null
      },
      singleSelect: {
        type: Boolean,
        default: true
      },
      closeOnSelect: {
        type: Boolean,
        default: true
      },
      selectAppearance: {
        type: String,
        default: 'simple'
      },
      disableSearch: {
        type: Boolean,
        default: false
      },
      optionClass: {
        type: String,
        default: ''
      },
      dataCombineTags: {
        type: Boolean,
        default: false
      },
      dataSelectMultipleAllSelected: {
        type: String,
        default: ''
      },
      dataSelectMultipleName: {
        type: String,
        default: ''
      },
      optionLabel: {
        type: Function
      },
      inputTagMode: {
        type: Boolean,
        default: false
      },
      viewMode: {
        type: Boolean,
        default: false
      },
      onChange: Function

    },
    mounted: function() {
      dropdownSelector.init(`#${this.selectorId}`, {
        inputTagMode: this.inputTagMode,
        optionClass: this.optionClass,
        optionLabel: this.optionLabel,
        noEmptyOption: this.noEmptyOption,
        singleSelect: this.singleSelect,
        closeOnSelect: this.closeOnSelect,
        selectAppearance: this.selectAppearance,
        disableSearch: this.disableSearch,
        onChange: () => {
          if (this.onChange) this.onChange();
          this.selectChanged(dropdownSelector.getValues(`#${this.selectorId}`))
        }
      });
    },
    methods: {
      selectChanged(value) {
        this.$emit(
          'dropdown:changed',
          value
        );
      }
    }
  }
</script>