<commit_before><template>

  <ui-textbox
    ref="textbox"
    v-model.trim="currentText"
    :label="label"
    :disabled="disabled"
    :invalid="invalid"
    :error="invalidText"
    :autofocus="autofocus"
    :maxlength="maxlength"
    :autocomplete="autocomplete"
    :type="type"
    :enforceMaxlength="true"
    :floatingLabel="true"
    @input="updateText"
    @keydown="emitKeydown"
    @focus="$emit('focus')"
    @blur="$emit('blur')"
  />

</template>


<script>

  import uiTextbox from 'keen-ui/src/UiTextbox';

  /**
   * Handles user input.
   */
  export default {
    name: 'k-textbox',
    components: { uiTextbox },
    props: {
      /**
       * v-model
       */
      value: {
        type: [String, Number],
      },
      /**
       * Label
       */
      label: {
        type: String,
        required: true,
      },
      /**
       * Whether or not disabled
       */
      disabled: {
        type: Boolean,
        default: false,
      },
      /**
       * Whether or not input is invalid
       */
      invalid: {
        type: Boolean,
        default: false,
      },
      /**
       * Text displayed if input is invalid
       */
      invalidText: {
        type: String,
        required: false,
      },
      /**
       * Whether or not to autofocus
       */
      autofocus: {
        type: Boolean,
        default: false,
      },
      /**
       * Max allowed length of input
       */
      maxlength: {
        type: Number,
        required: false,
      },
      /**
       * HTML5 autocomplete attribute (off, on, name, username, current-password, etc.)
       */
      autocomplete: {
        type: String,
        required: false,
      },
      /**
       * HTML5 type of input (text, password, number, etc.)
       */
      type: {
        type: String,
        default: 'text',
      },
    },
    data() {
      return { currentText: this.value };
    },
    watch: {
      value(val) {
        this.currentText = val;
      },
    },
    methods: {
      updateText() {
        // v-model is just a :value + @input
        /**
         * Emits input event with new value
         */
        this.$emit('input', this.currentText);
      },
      reset() {
        this.$refs.textbox.reset();
      },
      emitKeydown(e) {
        /**
         * Emits keydown event
         */
        this.$emit('keydown', e);
      },
      /**
       * @public
       * Focuses on the textbox
       */
      focus() {
        this.$refs.textbox.$el.querySelector('input').focus();
      },
    },
  };

</script>


<style lang="stylus"></style><commit_msg>Give textbox a max-width according to spec<commit_after><template>

  <ui-textbox
    ref="textbox"
    class="textbox"
    v-model.trim="currentText"
    :label="label"
    :disabled="disabled"
    :invalid="invalid"
    :error="invalidText"
    :autofocus="autofocus"
    :maxlength="maxlength"
    :autocomplete="autocomplete"
    :type="type"
    :enforceMaxlength="true"
    :floatingLabel="true"
    @input="updateText"
    @keydown="emitKeydown"
    @focus="$emit('focus')"
    @blur="$emit('blur')"
  />

</template>


<script>

  import uiTextbox from 'keen-ui/src/UiTextbox';

  /**
   * Handles user input.
   */
  export default {
    name: 'k-textbox',
    components: { uiTextbox },
    props: {
      /**
       * v-model
       */
      value: {
        type: [String, Number],
      },
      /**
       * Label
       */
      label: {
        type: String,
        required: true,
      },
      /**
       * Whether or not disabled
       */
      disabled: {
        type: Boolean,
        default: false,
      },
      /**
       * Whether or not input is invalid
       */
      invalid: {
        type: Boolean,
        default: false,
      },
      /**
       * Text displayed if input is invalid
       */
      invalidText: {
        type: String,
        required: false,
      },
      /**
       * Whether or not to autofocus
       */
      autofocus: {
        type: Boolean,
        default: false,
      },
      /**
       * Max allowed length of input
       */
      maxlength: {
        type: Number,
        required: false,
      },
      /**
       * HTML5 autocomplete attribute (off, on, name, username, current-password, etc.)
       */
      autocomplete: {
        type: String,
        required: false,
      },
      /**
       * HTML5 type of input (text, password, number, etc.)
       */
      type: {
        type: String,
        default: 'text',
      },
    },
    data() {
      return { currentText: this.value };
    },
    watch: {
      value(val) {
        this.currentText = val;
      },
    },
    methods: {
      updateText() {
        // v-model is just a :value + @input
        /**
         * Emits input event with new value
         */
        this.$emit('input', this.currentText);
      },
      reset() {
        this.$refs.textbox.reset();
      },
      emitKeydown(e) {
        /**
         * Emits keydown event
         */
        this.$emit('keydown', e);
      },
      /**
       * @public
       * Focuses on the textbox
       */
      focus() {
        this.$refs.textbox.$el.querySelector('input').focus();
      },
    },
  };

</script>


<style lang="stylus">

  .textbox
    max-width: 400px

</style>
{'fraction_non_alphanumeric': 0.1458490566037736, 'fraction_numerical': 0.0013207547169811322, 'mean_word_length': 1.4782608695652173, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, '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': '2267846', 'n_tokens_mistral': 1649, 'n_tokens_neox': 1617, 'n_words': 340}