Vue Input Highlighter

Component that allows content highlighting within an input field based on specified regular expressions (regexes).

It enhances user experience by providing visual feedback about specified patterns recognized and improves the interaction the user have with the input.

Table of contents

• Installation

• Imports

• Usage example

• How it works

• Use Cases

• Props

• Events

• Contribution

• Acknowledgments

Installation

Using npm :

$ npm i @leyton-techlab/vue-input-highlighter

Using yarn :

$ yarn add @leyton-techlab/vue-input-highlighter

Imports

Register the component globally :

inside main.(js/ts)

    import InputHighlighter from '@leyton-techlab/vue-input-highlighter';
    import '@leyton-techlab/vue-input-highlighter/style.css';

    const app = createApp(App)

    app.component("InputHighlighter", InputHighlighter);

    app.mount('#app')

Import within the scope of a component

Script Setup

  <script setup>

    import InputHighlighter from '@leyton-techlab/vue-input-highlighter';
    import '@leyton-techlab/vue-input-highlighter/style.css';

    import { ref } from 'vue';

    const inputValue = ref('');
  
  </script>

  <template>

      <input-highlighter
          v-model="inputValue"
      />
  
  </template>

Option Api

  <script>
      import InputHighlighter from 'vue-input-highlighter';
      import 'vue-input-highlighter/style.css';

      export default {
          data() {
              return {
                  inputValue: ''
          },
          components: {
              InputHighlighter
          }
      }
  </script>

  <template>

      <input-highlighter
          v-model="inputValue"
      />

  </template>

Usage example

Please refer to the following link content as usage example : codesandbox

How it works

The component is based on a 'content editable' div that replicates the behavior of an input tag.

As the user inputs content, the component evaluates the div's text and analyzes it using regular expressions (regex).

Any fragment that matches the regex is encapsulated within an HTML tag, with the default being <strong> (or as specified) for which the relevant styles are then applied.

Use Cases

Use cases example :

• Highlight search operators (example : and, or, not, ") inside a search bar

• Highlight id like entries (ex: company number, salesforce id, random code)

• Highlight business specific keyword

  • Protocols : http/https

  • Language syntax : select, from, where

  • Auth methods : Basic, Bearer

Props

List of component props :

| Props | Description | |-------------|-----------------------------------------------------------------------------| | modelValue | allow v-model behavior for the component | | rules | array of rules as composed object defined in more details in the next table | | placeholder | string value displayed when input is empty as a placeholder for explanation |

List of component "rules" props sub-elements :

| Sub-element | Description | |-------------|---------------------------------------------------------------------------------| | regex | pattern to be matched | | style | string value to be mapped inside the style attribute of the matched element tag | | class | string value to be mapped inside the class attribute of the matched element tag | | tag | tag used when wrapping the matched element |

Events

List of component custom events

| Events | Description | |------------|-------------------------------------------------------------------------------------------| | highlight | fires whenever one or multiple highlights are matched. return list of newly matched text. | | highlights | fires at each input. return list of all matched text by the input. |

Contribution

Every improvement of the package is welcome, just fork the project make the necessary changes and create a pull request.

If you want to contact me (@GAliNor) here is a link to my linkedin profile

Acknowledgments

Many thanks to :

• @karimerrahli
• @afaddoul
• @AdnaneAm
• @akiyamaSM

for the reviews and advice