vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
60 lines (59 loc) • 1.91 kB
JavaScript
import { defineComponent as g, computed as f, h as d, createElementBlock as h, openBlock as n, Fragment as r, renderList as x, createBlock as m, createTextVNode as y, toDisplayString as k, resolveDynamicComponent as _ } from "vue";
const v = { class: "m-highlight" }, S = /* @__PURE__ */ g({
__name: "Highlight",
props: {
text: { default: void 0 },
patterns: { default: () => [] },
autoEscape: { type: Boolean, default: !0 },
caseSensitive: { type: Boolean, default: !1 },
highlightTag: { default: "mark" },
highlightClass: { default: void 0 },
highlightStyle: { default: () => ({}) }
},
setup(c) {
const t = c, o = f(() => {
if (t.patterns.length === 0 || !t.text)
return [t.text];
{
const l = t.patterns.map((e) => t.autoEscape ? p(e) : e).join("|"), s = new RegExp(`(${l})`, t.caseSensitive ? "g" : "gi");
return u(t.text, s).map((e) => e.isMatch ? d(
t.highlightTag,
{
class: ["highlight-mark", t.highlightClass],
style: t.highlightStyle
},
e.text
) : e.text);
}
});
function p(l) {
return l.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}
function u(l, s) {
const a = [];
let e = 0, i;
for (; (i = s.exec(l)) !== null && (i.index > e && a.push({
text: l.slice(e, i.index),
isMatch: !1
}), a.push({
text: i[0],
isMatch: !0
}), e = s.lastIndex, !!s.global); )
;
return e < l.length && a.push({
text: l.slice(e),
isMatch: !1
}), a;
}
return (l, s) => (n(), h("span", v, [
(n(!0), h(r, null, x(o.value, (a, e) => (n(), h(r, { key: e }, [
typeof a == "string" ? (n(), h(r, { key: 0 }, [
y(k(a), 1)
], 64)) : (n(), m(_(a), { key: 1 }))
], 64))), 128))
]));
}
});
export {
S as default
};