Vue vue-text-highlight

by kabanoki

HTML

<div id="app">
  <input type="text" v-model="queries">
  <p>
    <text-highlight :queries="queries">{{ description }}</text-highlight>
  </p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<!-- vue-text-highlight.min.js -->
<script>
var VueTextHighlight = function(t) {
    "use strict";
    var e = /^(attrs|props|on|nativeOn|class|style|hook)$/;
    function n(t, e) {
        return function() {
            t && t.apply(this, arguments),
            e && e.apply(this, arguments)
        }
    }
    function r(t) {
        return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t
    }
    function i(t, e) {
        return t(e = {
            exports: {}
        }, e.exports),
        e.exports
    }
    var o = function(t, e) {
        return {
            value: e,
            done: !!t
        }
    }
      , u = {}
      , a = {}.toString
      , s = function(t) {
        return a.call(t).slice(8, -1)
    }
      , c = Object("z").propertyIsEnumerable(0) ? Object : function(t) {
        return "String" == s(t) ? t.split("") : Object(t)
    }
      , f = function(t) {
        if (void 0 == t)
            throw TypeError("Can't call method on  " + t);
        return t
    }
      , l = function(t) {
        return c(f(t))
    }
      , h = i(function(t) {
        var e = t.exports = "undefined" != typeof window && window.Math == Math ? window : "undefined" != typeof self && self.Math == Math ? self : Function("return this")();
        "number" == typeof __g && (__g = e)
    })
      , p = i(function(t) {
        var e = t.exports = {
            version: "2.6.2"
        };
        "number" == typeof __e && (__e = e)
    })
      , d = (p.version,
    function(t, e, n) {
        if (function(t) {
            if ("function" != typeof t)
                throw TypeError(t + " is not a function!")
        }(t),
        void 0 === e)
            return t;
        switch (n) {
       ...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

input {
  margin-bottom: 10px;
}

p {
  padding: 20px;
}

Vue

Vue.component('text-highlight', window.VueTextHighlight.default);
new Vue({
  el: "#app",
  data: {
    queries: 'birds',
    description: 'Tropical birds scattered as Drake veered the Jeep Tropical birds scattered as Drake veered the Jeep Tropical birds scattered as Drake veered the Jeep'
  }
})