@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
74 lines (73 loc) • 2.63 kB
JavaScript
import { defineComponent as C, inject as T, ref as s, watchEffect as H, computed as L, normalizeStyle as h, unref as i, openBlock as x, createElementBlock as k, mergeProps as M, normalizeClass as O } from "vue";
import { useCommon as y } from "../../composables/useCommon.js";
import { injectIconsKey as g } from "../../composables/keys.js";
import { useTheme as z } from "../../composables/useTheme.js";
const E = ["innerHTML"], V = ["stroke-linejoin", "stroke-linecap", "stroke", "fill", "viewBox", "innerHTML"], G = {
...y.props(),
icon: {
type: String,
required: !0
},
filled: Boolean,
viewBox: {
type: String,
default: "0 0 24 24"
}
}, P = {
name: "XIcon",
validators: {
...y.validators()
}
}, N = /* @__PURE__ */ C({
...P,
props: G,
setup(_) {
const o = _, a = T(g, {}), r = s(!1), t = s(""), n = s(o.filled), u = s(o.viewBox), f = s({});
H(() => {
const e = a && o.icon && a[o.icon];
if (r.value = !1, t.value = e, e)
if (typeof e == "string")
if (e.startsWith("<svg")) {
r.value = !0;
const { content: c, attributes: l } = B(e);
f.value = l, t.value = c;
} else
r.value = !1, t.value = e;
else
typeof e == "object" && (t.value = e.icon, n.value = e.filled || o.filled, u.value = e.viewBox || o.viewBox);
else
t.value = o.icon || "";
});
function B(e) {
e = e.trim();
const c = e.substring(e.indexOf(">") + 1, e.lastIndexOf("</svg>")), l = e.substring(e.indexOf("<svg") + 4, e.indexOf(">")).trim().match(/[\w-]+="[^"]*"/g), m = {};
return l == null || l.forEach((j) => {
const [w, I] = j.split("=");
["height", "width", "class"].includes(w) || (m[w] = I.replace(/(^"|"$)/g, ""));
}), {
attributes: m,
content: c
};
}
const { styles: b, classes: p, className: v } = z("Icon", {}, o), d = L(() => h(i(b)));
return (e, c) => r.value ? (x(), k("svg", M({
key: 0,
style: d.value,
class: ["shrink-0", i(v), i(p).wrapper]
}, f.value, { innerHTML: t.value }), null, 16, E)) : (x(), k("svg", {
key: 1,
style: h(d.value),
xmlns: "http://www.w3.org/2000/svg",
class: O(["shrink-0", i(v), i(p).wrapper, { "stroke-2": !n.value }]),
"stroke-linejoin": n.value ? void 0 : "round",
"stroke-linecap": n.value ? void 0 : "round",
stroke: n.value ? void 0 : "currentColor",
fill: n.value ? "currentColor" : "none",
viewBox: u.value,
innerHTML: t.value
}, null, 14, V));
}
});
export {
N as default
};