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/vreg/components/Forms/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

<template>
  <ValidationProvider v-slot="{errors}" rules="required" :name=" vName || field">
    <input class="vehicle-type-input hidden-input" type="hidden" v-model="fieldValue">

    <div class="vehicle-type-wrapper medium-height" :class="{'opened mh-50':headerOpened}" :id="vName">

      <div class="vehicle-type-wrapper-menu">
        <div class="vehicle-type-header" @click.prevent="selectHeaderClicked"
             :class="{'open':headerOpened,'selected':!!selectedValue}">
          <p class="vehicle-type-title" :class="{'required':required}" v-html="headerText"></p>
          <h5 class="vehicle-type-name" v-html="displayableName"></h5>
          <svg class="arrow" width="10" height="7" viewBox="0 0 10 7" fill="none"
               xmlns="http://www.w3.org/2000/svg">
            <path
              d="M6.20003 6.56466C5.80005 7.04961 5.0571 7.04961 4.65712 6.56466L1.21085 2.38628C0.672897 1.73404 1.13684 0.749999 1.98231 0.749999L8.87484 0.75C9.72031 0.75 10.1843 1.73404 9.6463 2.38628L6.20003 6.56466Z"
              fill="#182D40"></path>
          </svg>
        </div>

        <div class="vehicle-type-options" :class="headerOpened ? 'd-block':'d-none'">

          <div class="vehicle-type-row"
               @click.prevent="optionClicked(option)"
               v-for="(option,index) in options"
               :key="`${option[usedValueKey]}_${index}`">
            <h6>{{ option.label }}</h6>

            <p class="small-text" v-if="option.tooltip" v-html="option.tooltip"></p>

          </div>

        </div>
      </div>

      <slot name="extra-field">

      </slot>
    </div>

    <span class="validation-err-msg"
          v-for="err in $getFormInputErrors(errors,field,form)"
          v-html="err">
    </span>

  </ValidationProvider>
</template>

<script>
export default {
  name: "VregSelect",
  props: {
    vName: {
      required: false
    },
    required: {
      type: Boolean,
      default: false
    },
    fieldValue: {
      required: false
    },
    options: {
      required: true
    },
    headerText: {
      required: false,
      default: 'Select'
    },
    field: {},
    form: {
      default: () => {
        return {}
      }
    },
    usedValueKey: {
      required: false,
      default: 'value'
    }
  },
  data() {
    return {
      headerOpened: false,
      selectedValue: '',
      displayableName: ''
    }
  },
  mounted() {
    this.setSelectedValue();
  },
  methods: {
    setSelectedValue() {

      this.selectedValue = this.fieldValue || '';
      if (this.selectedValue) {
        this.setSelectedOption();
      }

    },
    setSelectedOption() {
      let option = this.options
        .find(option => option[this.usedValueKey].toLowerCase() === this.selectedValue.toLowerCase());

      if (option) {
        this.setSelectedValueAndDisplayableName(option);
      }

    },
    selectHeaderClicked() {
      this.headerOpened = !this.headerOpened;
    },
    optionClicked(option) {
      this.setSelectedValueAndDisplayableName(option);
      this.headerOpened = false;
    },

    setSelectedValueAndDisplayableName(option) {
      this.selectedValue = option[this.usedValueKey];
      this.displayableName = option.label;
    }
  },

  watch: {
    fieldValue() {
      if (this.fieldValue) {
        this.setSelectedValue();
      }
    },
    selectedValue: {
      handler() {

        this.$emit('value-selected', this.selectedValue);
      },
      immediate: true
    }
  }
}
</script>

<style scoped>

</style>