<commit_before><template>
  <div class="demo-container">
    <div class="demo-container__item">
      <label class="control-label" for="palette">Palette mode</label>
      <vuestic-color-picker-input v-model="value" mode="palette" id="palette">
        <color-dot :color="value"/>
      </vuestic-color-picker-input>
      {{ value }}
    </div>
    <div class="demo-container__item">
      <label class="control-label" for="slider">Slider mode</label>
      <vuestic-color-picker-input v-model="value" mode="slider" id="slider">
        <vuestic-color-square :color="value"/>
      </vuestic-color-picker-input>
      {{ value }}
    </div>
    <div class="demo-container__item">
      <label class="control-label" for="advanced">Advanced mode</label>
      <vuestic-color-picker-input v-model="value" mode="advanced" id="advanced">
        <vuestic-color-input :value="value"/>
      </vuestic-color-picker-input>
    </div>
  </div>
</template>

<script>
import VuesticColorPickerInput from './VuesticColorPickerInput'
import ColorDot from './ColorDot'
import VuesticColorSquare from './VuesticColorSquare'
import VuesticColorInput from './VuesticColorInput'
export default {
  components: {
    VuesticColorPickerInput,
    ColorDot,
    VuesticColorSquare,<commit_msg>minor<commit_after><template>
  <div class="demo-container">
    <div class="demo-container__item">
      <label class="control-label" for="palette">Palette mode</label>
      <vuestic-color-picker-input v-model="value" mode="palette" id="palette">
        <color-dot :color="value"/>
      </vuestic-color-picker-input>
      {{ value }}
    </div>
    <div class="demo-container__item">
      <label class="control-label" for="slider">Slider mode</label>
      <vuestic-color-picker-input v-model="value" mode="slider" id="slider">
        <vuestic-color-square :color="value"/>
      </vuestic-color-picker-input>
      {{ value }}
    </div>
    <div class="demo-container__item">
      <label class="control-label" for="advanced">Advanced mode</label>
      <vuestic-color-picker-input v-model="value" mode="advanced" id="advanced">
        <vuestic-color-input v-model="value"/>
      </vuestic-color-picker-input>
    </div>
  </div>
</template>

<script>
import VuesticColorPickerInput from './VuesticColorPickerInput'
import ColorDot from './ColorDot'
import VuesticColorSquare from './VuesticColorSquare'
import VuesticColorInput from './VuesticColorInput'
export default {
  components: {
    VuesticColorPickerInput,
    ColorDot,
    VuesticColorSquare,
{'fraction_non_alphanumeric': 0.15833005120126034, 'fraction_numerical': 0.0, 'mean_word_length': 3.774436090225564, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2774660', 'n_tokens_mistral': 819, 'n_tokens_neox': 789, 'n_words': 143}