<commit_before><template>
  <div
    class="quasar-chips group"
    @click="focus"
    :class="{active: active, disabled: disable}"
  >
    <span
      class="chip label bg-light text-grey-9"
      v-for="(label, index) in model"
      :key="index"
    >
      {{ label }}
      <i class="on-right" @click="remove(index)">close</i>
    </span>
    <div class="quasar-chips-input chip label text-grey-9">
      <input
        type="text"
        class="no-style"
        ref="input"
        :value="value"
        @input="__onInput"
        @keyup.enter="add()"
        @focus="active = true"
        @blur="active = false"
        v-attr="attrib"
        :placeholder="placeholder"
      >
      <button class="small" @click="add()" :class="{invisible: !input.length}">
        <i>send</i>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      required: true
    },
    disable: {
      type: Boolean,
      default: false,
      coerce: Boolean
    },
    placeholder: String
  },
  data () {
    return {
      active: false,
      input: ''
    }
  },
  computed: {
    attrib () {
      return this.disable ? 'disabled' : []
    }
  },
  methods: {
    __onInput (event) {
      this.$emit('input', event.target.value)
    },
    add () {
      if (!this.disable && this.input) {
        this.model.push(this.input)
        this.input = ''
      }
    },
    remove (index) {
      if (!this.disable && index >= 0 && index < this.model.length) {
        this.model.splice(index, 1)
      }
    },
    focus () {
      this.$refs.input.focus()
    }
  }
}
</script>
<commit_msg>refactor: [vue2] Chips<commit_after><template>
  <div
    class="quasar-chips group"
    @click="focus"
    :class="{active: active, disabled: disable}"
  >
    <span
      class="chip label bg-light text-grey-9"
      v-for="(label, index) in value"
      :key="index"
    >
      {{ label }}
      <i class="on-right" @click="remove(index)">close</i>
    </span>
    <div class="quasar-chips-input chip label text-grey-9">
      <input
        type="text"
        class="no-style"
        ref="input"
        v-model="input"
        @keyup.enter="add()"
        @focus="active = true"
        @blur="active = false"
        :disabled="disable"
        :placeholder="placeholder"
      >
      <button class="small" @click="add()" :class="{invisible: !input.length}">
        <i>send</i>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Array,
      required: true
    },
    disable: {
      type: Boolean,
      default: false
    },
    placeholder: String
  },
  data () {
    return {
      active: false,
      input: ''
    }
  },
  methods: {
    add (value = this.input) {
      if (!this.disable && value) {
        this.$emit('input', this.value.concat([value]))
        this.input = ''
      }
    },
    remove (index) {
      if (!this.disable && index >= 0 && index < this.value.length) {
        let value = this.value.slice(0)
        value.splice(index, 1)
        this.$emit('input', value)
      }
    },
    focus () {
      this.$refs.input.focus()
    }
  }
}
</script>

{'fraction_non_alphanumeric': 0.17461802307452448, 'fraction_numerical': 0.0031181789834736516, 'mean_word_length': 1.927007299270073, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, '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': '6065705', 'n_tokens_mistral': 1101, 'n_tokens_neox': 1078, 'n_words': 206}