<commit_before><template>
  <q-input-frame
    class="q-chips-input"

    :prefix="prefix"
    :suffix="suffix"
    :stack-label="stackLabel"
    :float-label="floatLabel"
    :error="error"
    :warning="warning"
    :disable="disable"
    :inverted="inverted"
    :dark="dark"
    :hide-underline="hideUnderline"
    :before="before"
    :after="after"
    :color="inverted ? frameColor || color : color"

    :focused="focused"
    :length="length"
    :additional-length="input.length > 0"

    @click="__onClick"
  >
    <div class="col row items-center group q-input-chips">
      <q-chip
        small
        :closable="editable"
        v-for="(label, index) in model"
        :key="`${label}#${index}`"
        :color="color"
        @blur.native="__onInputBlur"
        @focus="__clearTimer"
        @focus.native="__clearTimer"
        @hide="remove(index)"
        :tabindex="editable && focused ? 0 : -1"
      >
        {{ label }}
      </q-chip>

      <input
        ref="input"
        class="col q-input-target"
        :class="[`text-${align}`]"
        v-model="input"

        :name="name"
        :placeholder="inputPlaceholder"
        :disabled="disable"
        :readonly="readonly"
        :max-length="maxLength"

        @focus="__onFocus"
        @blur="__onInputBlur"
        @keydown="__handleKey"
        @keyup="__onKeyup"
      />
    </div>

    <q-icon
      v-if="editable"
      :name="computedAddIcon"
      slot="after"
      class="q-if-control self-end"
      :class="{invisible: !input.length}"
      @mousedown.native="__clearTimer"
      @touchstart.native="__clearTimer"
      @click.native="add()"
    ></q-icon>
  </q-input-frame>
</template>

<script>
import FrameMixin from '../../mixins/input-frame'
import InputMixin from '../../mixins/input'
import { QInputFrame } from '../input-frame'
import { QChip } from '../chip'

export default {
  name: 'q-chips-input',
  mixins: [FrameMixin, InputMixin],
  components: {
    QInputFrame,
    QChip
  },
  props: {
    value: {
      type: Array,
      required: true
    },
    frameColor: String,
    readonly: Boolean,
    addIcon: String
  },
  data () {
    return {
      input: '',
      model: [...this.value]
    }
  },
  watch: {
    value (v) {
      if (Array.isArray(v)) {
        this.model = [...v]
      }
      else {
        this.model = []
      }
    }
  },
  computed: {
    length () {
      return this.model
        ? this.model.length
        : 0
    },
    computedAddIcon () {
      return this.addIcon || this.$q.icon.chipsInput.add
    }
  },
  methods: {
    add (value = this.input) {
      clearTimeout(this.timer)<commit_msg>fix(QChipsInput): more tweaks on chips color (#1468)<commit_after><template>
  <q-input-frame
    class="q-chips-input"

    :prefix="prefix"
    :suffix="suffix"
    :stack-label="stackLabel"
    :float-label="floatLabel"
    :error="error"
    :warning="warning"
    :disable="disable"
    :inverted="inverted"
    :dark="dark"
    :hide-underline="hideUnderline"
    :before="before"
    :after="after"
    :color="computedColor"

    :focused="focused"
    :length="length"
    :additional-length="input.length > 0"

    @click="__onClick"
  >
    <div class="col row items-center group q-input-chips">
      <q-chip
        small
        :closable="editable"
        v-for="(label, index) in model"
        :key="`${label}#${index}`"
        :color="computedChipColor"
        :text-color="computedChipTextColor"
        @blur.native="__onInputBlur"
        @focus="__clearTimer"
        @focus.native="__clearTimer"
        @hide="remove(index)"
        :tabindex="editable && focused ? 0 : -1"
      >
        {{ label }}
      </q-chip>

      <input
        ref="input"
        class="col q-input-target"
        :class="[`text-${align}`]"
        v-model="input"

        :name="name"
        :placeholder="inputPlaceholder"
        :disabled="disable"
        :readonly="readonly"
        :max-length="maxLength"

        @focus="__onFocus"
        @blur="__onInputBlur"
        @keydown="__handleKey"
        @keyup="__onKeyup"
      />
    </div>

    <q-icon
      v-if="editable"
      :name="computedAddIcon"
      slot="after"
      class="q-if-control self-end"
      :class="{invisible: !input.length}"
      @mousedown.native="__clearTimer"
      @touchstart.native="__clearTimer"
      @click.native="add()"
    ></q-icon>
  </q-input-frame>
</template>

<script>
import FrameMixin from '../../mixins/input-frame'
import InputMixin from '../../mixins/input'
import { QInputFrame } from '../input-frame'
import { QChip } from '../chip'

export default {
  name: 'q-chips-input',
  mixins: [FrameMixin, InputMixin],
  components: {
    QInputFrame,
    QChip
  },
  props: {
    value: {
      type: Array,
      required: true
    },
    frameColor: String,
    readonly: Boolean,
    addIcon: String
  },
  data () {
    return {
      input: '',
      model: [...this.value]
    }
  },
  watch: {
    value (v) {
      if (Array.isArray(v)) {
        this.model = [...v]
      }
      else {
        this.model = []
      }
    }
  },
  computed: {
    length () {
      return this.model
        ? this.model.length
        : 0
    },
    computedAddIcon () {
      return this.addIcon || this.$q.icon.chipsInput.add
    },
    computedColor () {
      return this.inverted ? this.frameColor || this.color : this.color
    },
    computedChipColor () {
      if (this.inverted) {
        if (this.frameColor) {
          return this.color
        }
        return this.dark !== false ? 'white' : null
      }
      return this.color
    },
    computedChipTextColor () {
      if (this.inverted) {
        return this.frameColor || this.color
      }
      return this.dark !== false ? 'white' : null
    }
  },
  methods: {
    add (value = this.input) {
      clearTimeout(this.timer)
{'fraction_non_alphanumeric': 0.1628581173260573, 'fraction_numerical': 0.0020463847203274215, 'mean_word_length': 2.11968085106383, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, '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': '4728452', 'n_tokens_mistral': 2000, 'n_tokens_neox': 1958, 'n_words': 328}