All files / app/assets/javascripts/vue_shared/components/color_picker color_picker.vue

92.31% Statements 12/13
87.5% Branches 7/8
100% Functions 7/7
92.31% Lines 12/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136                        5x 5x   5x                                                                           13x         13x     9x       9x     9x     9x     13x         8x                   116x                                                                                            
<script>
/**
 * Renders a color picker input with preset colors to choose from
 *
 * @example
 * <color-picker
     :invalid-feedback="__('Please enter a valid hex (#RRGGBB or #RGB) color value')"
     :label="__('Background color')"
     :value="#FF0000"
     state="isValidColor"
   />
 */
import { GlFormGroup, GlFormInput, GlFormInputGroup, GlLink, GlTooltipDirective } from '@gitlab/ui';
import { __ } from '~/locale';
 
const PREVIEW_COLOR_DEFAULT_CLASSES =
  'gl-relative gl-w-7 gl-bg-gray-10 gl-rounded-top-left-base gl-rounded-bottom-left-base';
 
export default {
  name: 'ColorPicker',
  components: {
    GlFormGroup,
    GlFormInput,
    GlFormInputGroup,
    GlLink,
  },
  directives: {
    GlTooltip: GlTooltipDirective,
  },
  props: {
    invalidFeedback: {
      type: String,
      required: false,
      default: __('Please enter a valid hex (#RRGGBB or #RGB) color value'),
    },
    label: {
      type: String,
      required: false,
      default: '',
    },
    value: {
      type: String,
      required: false,
      default: '',
    },
    state: {
      type: Boolean,
      required: false,
      default: null,
    },
  },
  computed: {
    description() {
      return this.hasSuggestedColors
        ? this.$options.i18n.fullDescription
        : this.$options.i18n.shortDescription;
    },
    suggestedColors() {
      return gon.suggested_label_colors;
    },
    previewColor() {
I      if (this.state) {
        return { backgroundColor: this.value };
      }
 
      return {};
    },
    previewColorClasses() {
      const borderStyle =
        this.state === false ? 'gl-inset-border-1-red-500' : 'gl-inset-border-1-gray-400';
 
      return `${PREVIEW_COLOR_DEFAULT_CLASSES} ${borderStyle}`;
    },
    hasSuggestedColors() {
      return Object.keys(this.suggestedColors).length;
    },
  },
  methods: {
    handleColorChange(color) {
      this.$emit('input', color.trim());
    },
  },
  i18n: {
    fullDescription: __('Enter any color or choose one of the suggested colors below.'),
    shortDescription: __('Enter any color.'),
  },
};
</script>
 
<template>
  <div>
    <gl-form-group
      :label="label"
      label-for="color-picker"
      :description="description"
      :invalid-feedback="invalidFeedback"
      :state="state"
      :class="{ 'gl-mb-3!': hasSuggestedColors }"
    >
      <gl-form-input-group
        id="color-picker"
        max-length="7"
        type="text"
        class="gl-align-center gl-rounded-0 gl-rounded-top-right-base gl-rounded-bottom-right-base"
        :value="value"
        :state="state"
        @input="handleColorChange"
      >
        <template #prepend>
          <div :class="previewColorClasses" :style="previewColor" data-testid="color-preview">
            <gl-form-input
              type="color"
              class="gl-absolute gl-top-0 gl-left-0 gl-h-full! gl-p-0! gl-m-0! gl-opacity-0"
              tabindex="-1"
              :value="value"
              @input="handleColorChange"
            />
          </div>
        </template>
      </gl-form-input-group>
    </gl-form-group>
 
    <div v-if="hasSuggestedColors" class="gl-mb-3">
      <gl-link
        v-for="(name, hex) in suggestedColors"
        :key="hex"
        v-gl-tooltip
        :title="name"
        :style="{ backgroundColor: hex }"
        class="gl-rounded-base gl-w-7 gl-h-7 gl-display-inline-block gl-mr-3 gl-mb-3 gl-text-decoration-none"
        @click.prevent="handleColorChange(hex)"
      />
    </div>
  </div>
</template>