Support dynamic CSS classes (1 per line)

[qoke]

Feature request for supporting the ability to give different CSS classes per text entry item.

Example:

<vue-typer
  :text='["1st text","2nd text","3rd text"]'
  :styles='["first","second","third"]'
></vue-typer>

New style would be applied before typing on a new line begins.

[cngu]

It's not clear whether those "styles" would be applied on the text or caret, and during which phase of typing. I'd prefer to avoid multiple/complex props and keep the styling in CSS,

We could support this without breaking the existing customizable CSS selector structure (but perhaps making it a bit awkward) by adding a `text-${index}` class to vue-typer signifying the current text item index being typed.

Something like: .vue-typer.text-0 > .custom.char > etc.

[jnsprnw]

A bit late but I solved it in a bit hacky way. In my version, the class is the lowercase version of the text.

<vue-typer
  :text="strings"
  :class="klass"
  @erased='onErased' />

function getNextElement (arr, i) {
  if (i === arr.length - 1) {
    return arr[0]
  } else {
    return arr[i + 1]
  }
}

export default {
  data () {
    return {
      strings: ['Foo', 'Bar'],
      klass: 'policy'
    }
  },
  components: {
    VueTyper
  },
  methods: {
    onErased (erasedString) {
      const i = this.strings.indexOf(erasedString)
      this.klass = getNextElement(this.strings, i).toLowerCase()
    }
  }
}

.vue-typer {
  &.foo .custom.char.typed {
    color: red;
  }

  &.bar .custom.char.typed {
    color: blue;
  }
}

Would be much nicer if vue-typer would emit an event beforeType with the upcoming string.

[liuxy0551]

I think this is more better. I packaged the component, then you can define your font color in parent component. Child components will inherit parent component's font color.

<style lang="scss">
  .vue-typer {
    .typed {
      color: inherit;
    }
  }
</style>