myprojplanet_vite/src/components/CMySelect/CMySelect.vue

<template>
  <div class="text-center">
    <div v-if="multiselect_by_server">
      <q-select
        ref="selectMultiServer"
        :model-value="myarrvalue"
        @update:model-value="changeval"
        v-bind="$attrs"
        label-color="primary"
        :label="addstrrequired + label"
        @filter="filterFn"
        @filter-abort="abortFilterFn"
        input-debounce="600"
        rounded
        outlined
        multiple
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        options-dense
        map-options
        :stack-label="label ? true : false"
        emit-value
        :readonly="sola_lettura"
        :use-input="useinput"
        :dense="dense"
        :input-class="myclass"
        :options="valori"
        :option-value="optval"
        :class="myclass ? myclass : 'combowidth'"
        style="min-width: 250px !important"
      >
        <template
          v-if="getIcon() && !sola_lettura"
          v-slot:prepend
        >
          <q-icon :name="getIcon()" />
        </template>

        <template v-slot:no-option>
          <q-item v-if="mystr">
            <q-item-section class="text-grey">
              <span
                v-if="Number.isInteger(parseInt(mystr)) && tools.isGruppoMacro()"
                @click="searchOnGM(mystr)"
                class="clickable-text"
              >
                Clicca qui per cercarlo su GM
              </span>
              <span v-else>
                Testo non trovato: '{{ mystr }}'
              </span>
            </q-item-section>
          </q-item>
          <q-item v-else>
            <q-item-section class="text-grey"> Digita il testo da cercare </q-item-section>
          </q-item>
        </template>

        <template v-slot:selected-item="scope">
          <div v-if="scope.opt[fieldsTable.getLabelByTable(tablesel)]">
            <q-chip
              :removable="!sola_lettura"
              dense
              @remove="scope.removeAtIndex(scope.index)"
              v-if="checkIfShowRec(scope.opt)"
              :color="$q.dark.isActive ? `black` : `white`"
              :text-color="$q.dark.isActive ? `white` : `black`"
              class="q-my-none q-ml-xs q-mr-none"
            >
              <q-avatar
                color="primary"
                text-color="white"
                icon=""
                size="12px"
              />
              {{ scope.opt[fieldsTable.getLabelByTable(tablesel)] }}
            </q-chip>
          </div>
        </template>

        <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
          <q-item v-bind="itemProps">
            <q-item-section>
              <q-item-label>{{ opt[fieldsTable.getLabelByTable(tablesel)] }}</q-item-label>
            </q-item-section>
            <q-item-section side>
              <q-toggle
                :model-value="selected"
                @update:model-value="toggleOption(opt)"
              />
            </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
    <div v-else-if="pickup">
      <q-select
        ref="selectPickup"
        v-if="pickup"
        :model-value="myvalue"
        @update:model-value="changeval"
        rounded
        outlined
        :dense="dense"
        options-dense
        use-input
        :label="addstrrequired + label"
        input-debounce="300"
        :input-class="myclass"
        :options="valori"
        :option-value="optval"
        :option-label="(opt) => getOptionLabel(opt)"
        :use-chips="tools.isValueNotEmpty(myvalue)"
        stack-label
        clearable
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        @filter="filterFn"
        @clear="clear"
        v-bind="$attrs"
      >
        <template
          v-if="getIcon()"
          v-slot:prepend
        >
          <q-icon
            size="xs"
            :name="getIcon()"
          />
        </template>
        <template v-slot:no-option>
          <q-item v-if="mystr">
            <q-item-section class="text-grey">
              <span
                v-if="Number.isInteger(parseInt(mystr)) && tools.isGruppoMacro()"
                @click="searchOnGM(mystr)"
                class="clickable-text text-blue"
              >
                Clicca qui per cercarlo su GM
              </span>
              <span v-else>
                Testo non trovato: '{{ mystr }}'
              </span>
            </q-item-section>
          </q-item>
          <q-item v-else>
            <q-item-section class="text-grey"> Digita il testo da cercare </q-item-section>
          </q-item>
        </template>
        <template v-slot:option="scope">
          <q-item v-bind="scope.itemProps">
            <q-item-section :class="applyLabelColorBasedOnProductStatus(scope.opt)">
              <q-item-label >

                {{ tools.getValueByFunzOrVal(scope.opt, optlab) }}
              </q-item-label>
            </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
    <div v-else-if="multiple">
      <q-select
        ref="selectMultiple"
        :multiple="true"
        :model-value="myarrvalue"
        label-color="primary"
        :label="addstrrequired + label"
        @update:model-value="changeval"
        rounded
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        outlined
        @filter="filterFn"
        v-bind="$attrs"
        :input-class="myclass"
        :use-input="useinput"
        input-debounce="0"
        @new-value="newvaluefuncfirst"
        map-options
        emit-value
        stack-label
        :options="valori"
        :option-value="optval"
        :option-label="optlab"
        :dense="dense"
      >
        <!--options-selected-class="text-deep-blue"-->

        <template
          v-if="getIcon()"
          v-slot:prepend
        >
          <q-icon :name="getIcon()" />
        </template>
        <template v-slot:selected-item="scope">
          <div v-if="tools.getValueByFunzOrVal(scope.opt, optlab)">
            <q-chip
              removable
              dense
              @remove="scope.removeAtIndex(scope.index)"
              v-if="checkIfShowRec(scope.opt)"
              :color="$q.dark.isActive ? `black` : `white`"
              class="q-my-none q-ml-xs q-mr-none"
            >
              <q-avatar
                color="primary"
                text-color="white"
                :icon="scope.opt.icon ? scope.opt.icon : ''"
                size="12px"
              />
              {{ tools.getValueByFunzOrVal(scope.opt, optlab) }}
            </q-chip>
          </div>
        </template>
        <template
          v-if="withToggle"
          v-slot:option="{ itemProps, opt, selected, toggleOption }"
        >
          <q-item v-bind="itemProps">
            <q-item-section>
              <q-item-label>{{ tools.getValueByFunzOrVal(opt, optlab) }}</q-item-label>
              <q-item-label
                v-if="'hint' in opt"
                class="hint"
                >{{ opt['hint'] }}</q-item-label
              >
            </q-item-section>
            <q-item-section side>
              <q-toggle
                :model-value="selected"
                @update:model-value="toggleOption(opt)"
              />
            </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
    <div v-else>
      <q-select
        ref="selectGeneric"
        :multiple="false"
        rounded
        outlined
        :dense="dense"
        :input-class="myclass"
        :model-value="myvalue"
        :options="valori"
        :option-value="optval"
        :option-label="optlab"
        @update:model-value="changeval"
        @filter="filterFn"
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        :label="label ? addstrrequired + label : undefined"
        :use-input="useinput"
        @new-value="newvaluefuncfirst"
        emit-value
        input-debounce="0"
        map-options
        v-bind="$attrs"
        :class="myclass ? myclass : 'combowidth'"
      >
        <template
          v-if="getIcon()"
          v-slot:prepend
        >
          <q-icon :name="getIcon()" />
        </template>
        <template v-slot:option="scope">
          <q-item v-bind="scope.itemProps">
            <q-item-section avatar>
              <q-icon :name="scope.opt.icon ? scope.opt.icon : ''" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ tools.getValueByFunzOrVal(scope.opt, optlab) }}</q-item-label>
              <q-item-label
                v-if="'hint' in scope.opt"
                class="hint"
                >{{ scope.opt['hint'] }}</q-item-label
              >
            </q-item-section>
          </q-item>
        </template>
      </q-select>
    </div>
  </div>
</template>

<script lang="ts" src="./CMySelect.ts"></script>

<style lang="scss" scoped>
@import './CMySelect.scss';
</style>