Vue-text-styler NPM

vue-text-styler

📦 Install

npm i vue-text-styler

yarn add vue-text-styler

pnpm i vue-text-styler

// main.ts
import TextStyler from 'vue-text-styler'

// for global registration
app.component(TextStyler)

🧰 Props

Name	Type	Default	Description
`text`	`string`		A string representing the text to be displayed in the component.
`special`	`Record<string, string \\| string[]>`		An object that contains key-value pairs. The keys represent the classes that will be applied to the text that matches the value. The value can be a string or an array of strings representing the text that will be matched.
`line?`	`'single' \\| 'multiple'`	`'multiple'`	By default, the component acts like a textarea (though you have to use Shift+Enter). Set this prop to `'single'` to force it to display the text in a single line. You propably also want to add `@keydown.enter.prevent` or `e.preventDefault()`.
`track?`	`string \\| string[]`		A string or an array of strings from the values of `special` that will be tracked. If set, the component will emit the strings that were matched.
`readonly?`	`boolean`	`false`	A boolean value indicating whether the component is read-only or not. If set to `true`, the component will be read-only.

📜 Events

Name	Type	Description
`update:text`	`string`	Emitted when the text changes.
`tracked`	`string[]`	Emitted when the text matches any of the values of `track`.

🚀 Usage

Simple example:

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('text1 and text2 are here')

const special = {
  'text-red-600 font-bold': ['text1', 'text2'],
  'underline': 'here',
}
</script>

<template>
  <TextStyler
    v-model:text="text"
    :special="special"
    p-3 bg-gray-100 rounded-xl
  />
</template>

A bit more complex example, where your text is an external object:

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

const text = ref('I\'m a large red circle.')

const object = reactive({
  color: 'red',
  shape: 'circle',
  size: 'large',
})

const special = computed(() => {
  return {
    'text-red-5 font-bold': object.color,
    'text-blue-5 font-bold': object.shape,
    'text-green-5 font-bold': object.size,
  }
})
</script>

<template>
  <TextStyler
    v-model:text="text"
    :special="special"
    p-3 bg-gray-100 rounded-xl
  />
</template>

A ridiculously complex example, where your text is an external array of objects for some unbeknownst reason:

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'

const text = ref('I\'m John and I\'m 20 years old.\nAnd I\'m Jane and I\'m 21 years old.')

const object = reactive([
  {
    name: 'Jane',
    age: 21,
  },
  {
    name: 'John',
    age: 20,
  },
],
)

const keyNames = {
  name: 'text-green-5 font-bold',
  age: 'text-blue-5 font-bold',
}

const special = computed(() => {
  return {
    ...object.reduce((acc, prop) => {
      // loop over the properties of prop
      for (const key in prop) {
        // use the property value as the key name
        const value = prop[key as keyof typeof prop]
        // use the key name from the keyNames object
        const keyName = keyNames[key as keyof typeof keyNames]
        // check if the key name already exists in the accumulator object
        if (acc[keyName]) {
          // append the new value to the existing array
          acc[keyName].push(value.toString())
        }
        else {
          // create a new array with the first value
          acc[keyName] = [value.toString()]
        }
      }
      return acc
    }, {} as Record<string, string[]>),
  }
})
</script>

<template>
  <TextStyler
    v-model:text="text"
    :special="special"
    p-3 bg-gray-100 rounded-xl
  />
</template>