github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/ColorField.vue (about)

     1  <template>
     2    <v-text-field
     3      :label="label"
     4      :value="color"
     5      hide-details
     6      class="ma-0 pa-0"
     7      readonly
     8    >
     9      <template v-slot:append-outer>
    10        <v-menu
    11          top
    12          nudge-bottom="105"
    13          nudge-left="16"
    14          :close-on-content-click="swatchMode"
    15        >
    16          <template v-slot:activator="{ on }">
    17            <div
    18              class="color-preview"
    19              :style="{
    20                backgroundColor: color,
    21                height: '30px',
    22                width: '60px',
    23                cursor: 'pointer',
    24                borderRadius: '5px',
    25                border: '1px solid black'
    26              }"
    27              v-on="on"
    28            />
    29          </template>
    30          <v-card>
    31            <v-card-text class="pa-0">
    32              <v-color-picker
    33                :value="color ? color : '#000000FF'"
    34                @update:color="onInput"
    35                flat
    36                :swatches="swatches"
    37                :show-swatches="swatchMode"
    38                :hide-canvas="swatchMode"
    39                hide-inputs
    40                hide-mode-switch
    41                mode="hexa"
    42              />
    43            </v-card-text>
    44          </v-card>
    45        </v-menu>
    46      </template>
    47    </v-text-field>
    48  </template>
    49  
    50  <script lang="ts">
    51  import Vue from "vue";
    52  import Component from "vue-class-component";
    53  
    54  const ColorFieldProps = Vue.extend({
    55    props: {
    56      color: String,
    57      swatches: Array as () => string[],
    58      label: String
    59    },
    60    model: {
    61      prop: "color",
    62      event: "change"
    63    }
    64  });
    65  
    66  interface Color {
    67    hexa: string;
    68  }
    69  
    70  @Component({})
    71  export default class ColorField extends ColorFieldProps {
    72    onInput(color: Color) {
    73      this.$emit("change", color.hexa.substr(0, 7));
    74    }
    75  
    76    get swatchMode() {
    77      return !!this.swatches && this.swatches.length > 0;
    78    }
    79  }
    80  </script>
    81  
    82  <style scoped></style>