@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
72 lines (71 loc) • 2.25 kB
JavaScript
import { defineComponent as v, computed as r, createVNode as l, renderSlot as h, h as z } from "vue";
import { useProps as g, useNameHelper as $ } from "@vexip-ui/config";
import { toNumber as d } from "@vexip-ui/utils";
import { iconProps as y } from "./props.mjs";
const N = Object.freeze(["spin-in", "spin-out", "pulse-in", "pulse-out"]), S = /(^\s*[+-]?\d*\.?\d+\s*)(deg|grad|turn|rad)?\s*/i, P = /* @__PURE__ */ v({
name: "Icon",
props: y,
setup(p, {
attrs: u,
slots: i
}) {
const e = g("icon", p, {
icon: {
isFunc: !0,
default: null,
static: !0
},
scale: 1,
title: null,
label: null,
flip: {
default: null,
validator: (t) => ["horizontal", "vertical", "both"].includes(t)
},
effect: null,
size: null,
color: null,
rotate: null,
renderer: {
default: null,
isFunc: !0
}
}), n = $("icon"), m = r(() => {
let t = "";
return e.effect && (t = N.includes(e.effect) ? n.bm(e.effect) : e.effect), {
[n.b()]: !0,
[n.bm(`flip-${e.flip}`)]: e.flip,
[t]: t
};
}), c = r(() => d(e.scale) || 1), a = r(() => {
var s;
if (typeof e.rotate == "number")
return `${e.rotate % 4 / 4}turn`;
const t = (s = e.rotate) == null ? void 0 : s.match(S);
if (!t) return null;
const o = d(t[1]);
return t[2] ? o ? `${o}${t[2]}` : null : `${o % 4 / 4}turn`;
}), b = r(() => {
const t = {
color: e.color
};
return e.size ? t.fontSize = e.size : c.value !== 1 && (t.fontSize = `${c.value}em`), a.value && (t[n.cv("rotate")] = a.value), t;
});
function f() {
const t = {
class: m.value,
style: b.value,
title: e.title,
role: u.role || (e.label || e.title ? "img" : void 0),
"aria-label": e.label,
"aria-hidden": !(e.label || e.title)
};
return i.default ? l("i", t, [l("g", null, [h(i, "default")])]) : e.icon ? l("i", t, [l("g", null, [z(e.icon)])]) : l("i", t, null);
}
return () => typeof e.renderer == "function" ? e.renderer(e, u, f) : f();
}
});
export {
P as default
};
//# sourceMappingURL=icon.mjs.map