myprojplanet_vite/src/components/CMySelect/CMySelect.vue

<template>
  <div class="text-center">
    <div v-if="multiselect_by_server">
      <q-select
        :model-value="myarrvalue"
        @update:model-value="changeval"
        v-bind="$attrs"
        label-color="primary"
        :label="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>
            <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
        v-if="pickup"
        :model-value="myvalue"
        @update:model-value="changeval"
        rounded
        outlined
        :dense="dense"
        options-dense
        use-input
        :label="label"
        input-debounce="300"
        :input-class="myclass"
        :options="valori"
        :option-value="optval"
        :option-label="optlab"
        map-options
        :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
        @filter="filterFn"
        v-bind="$attrs"
      >
        <template v-slot:append>
          <q-icon
            v-if="myvalue !== ''"
            class="cursor-pointer"
            name="clear"
            @click.stop.prevent="myvalue = ''"
          />
        </template>
        <template v-if="getIcon()" v-slot:prepend>
          <q-icon size="xs" :name="getIcon()" />
        </template>
        <template v-slot:no-option>
          <q-item>
            <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>
              <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
        :multiple="true"
        :model-value="myarrvalue"
        label-color="primary"
        :label="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
        :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"
        :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>