<template>
  <q-select
    :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
    rounded
    outlined
    v-model="color"
    @update:model-value="updateValue"
    :options="tools.SelectListColors"
    dense
    :label="title"
    emit-value
    map-options
  >
    <template v-slot:selected>
      <q-chip dense square color="white" class="q-my-none q-ml-xs q-mr-none">
        <span :style="`background-color: ${color}; color: white;`">{{ color }}</span>
      </q-chip>
    </template>
    <template v-slot:option="scope">
      <q-item v-bind="scope.itemProps">
        <q-item-section>
          <q-item-label :style="`background-color: ${scope.opt.label}; color: white;`">{{
            scope.opt.label
          }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
  </q-select>
</template>

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

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