<commit_before><!--
Displays a field as a date picker (can be used with v-model)
-->

<template>
  <div class="e-form-container">
    <v-menu
      ref="menu"
      v-model="showPicker"
      :disabled="disabled || readonly"
      :close-on-content-click="false"
      transition="scale-transition"
      offset-y
      offset-overflow
      min-width="290px"
      max-width="290px">
      <template v-slot:activator="{on}">
        <e-text-field
          v-model="stringValue"
          v-bind="$attrs"
          :error-messages="combinedErrorMessages"
          :filled="filled"
          :disabled="disabled"
          @focus="textFieldIsActive = true"
          @blur="textFieldIsActive = false">
          <template v-if="icon" v-slot:prepend>
            <v-icon :color="iconColor" @click="on.click">
              {{ icon }}
            </v-icon>
          </template>

          <!-- passing the append slot through -->
          <template v-slot:append>
            <slot name="append" />
          </template>
        </e-text-field>
      </template>
      <slot :value="pickerValue"
            :showPicker="showPicker"
            :on="eventHandlers" />
    </v-menu>
  </div>
</template>

<script>

export default {
  name: 'BasePicker',
  inheritAttr: false,
  props: {
    value: { type: [Number, String], required: true },
    icon: { type: String, required: false, default: null },
    iconColor: { type: String, required: false, default: null },
    readonly: { type: Boolean, required: false, default: false },
    disabled: { type: Boolean, required: false, default: false },
    filled: { type: Boolean, required: false, default: true },
    format: { type: Function, required: false, default: null },
    formatPicker: { type: Function, required: false, default: null },
    parse: { type: Function, required: false, default: null },
    parsePicker: { type: Function, required: false, default: null },
    errorMessages: { type: Array, required: false, default: () => [] }
  },
  data () {
    return {
      localValue: this.value,
      localPickerValue: this.value,
      stringValue: '',
      showPicker: false,
      textFieldIsActive: false,
      parseError: null,
      eventHandlers: {
        save: this.savePicker,
        close: this.closePicker,
        input: this.inputPicker
      }
    }
  },
  computed: {
    fieldValue () {
      if (this.format != null) {
        return this.format(this.localValue)
      } else {
        return this.localValue
      }
    },
    pickerValue () {
      if (this.formatPicker != null) {<commit_msg>Add documenting comments to BasePicker props<commit_after><!--
Displays a field as a date picker (can be used with v-model)
-->

<template>
  <div class="e-form-container">
    <v-menu
      ref="menu"
      v-model="showPicker"
      :disabled="disabled || readonly"
      :close-on-content-click="false"
      transition="scale-transition"
      offset-y
      offset-overflow
      min-width="290px"
      max-width="290px">
      <template v-slot:activator="{on}">
        <e-text-field
          v-model="stringValue"
          v-bind="$attrs"
          :error-messages="combinedErrorMessages"
          :filled="filled"
          :disabled="disabled"
          @focus="textFieldIsActive = true"
          @blur="textFieldIsActive = false">
          <template v-if="icon" v-slot:prepend>
            <v-icon :color="iconColor" @click="on.click">
              {{ icon }}
            </v-icon>
          </template>

          <!-- passing the append slot through -->
          <template v-slot:append>
            <slot name="append" />
          </template>
        </e-text-field>
      </template>
      <slot :value="pickerValue"
            :showPicker="showPicker"
            :on="eventHandlers" />
    </v-menu>
  </div>
</template>

<script>

export default {
  name: 'BasePicker',
  inheritAttr: false,
  props: {
    value: { type: [Number, String], required: true },
    icon: { type: String, required: false, default: null },
    iconColor: { type: String, required: false, default: null },
    readonly: { type: Boolean, required: false, default: false },
    disabled: { type: Boolean, required: false, default: false },
    filled: { type: Boolean, required: false, default: true },
    errorMessages: { type: Array, required: false, default: () => [] },

    /**
     * Format internal value for display in the UI
     */
    format: { type: Function, required: false, default: null },

    /**
     * Format internal value for the popup component. If omitted, uses format instead.
     */
    formatPicker: { type: Function, required: false, default: null },

    /**
     * Parse a user-supplied value into the internal format
     */
    parse: { type: Function, required: false, default: null },

    /**
     * Parse the value from the popup component into the internal format. If omitted, uses parse instead.
     */
    parsePicker: { type: Function, required: false, default: null }
  },
  data () {
    return {
      localValue: this.value,
      localPickerValue: this.value,
      stringValue: '',
      showPicker: false,
      textFieldIsActive: false,
      parseError: null,
      eventHandlers: {
        save: this.savePicker,
        close: this.closePicker,
        input: this.inputPicker
      }
    }
  },
  computed: {
    fieldValue () {
      if (this.format != null) {
        return this.format(this.localValue)
      } else {
        return this.localValue
      }
    },
    pickerValue () {
      if (this.formatPicker != null) {
{'fraction_non_alphanumeric': 0.13859428365989573, 'fraction_numerical': 0.0021571094733057704, 'mean_word_length': 2.259519625073228, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 47, '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': '5209798', 'n_tokens_mistral': 1631, 'n_tokens_neox': 1605, 'n_words': 417}