@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
84 lines (83 loc) • 2.5 kB
JavaScript
import { defineComponent as d, computed as r } from "vue";
import { NeonSize as l } from "../../../common/enums/NeonSize.es.js";
import { NeonFunctionalColor as e } from "../../../common/enums/NeonFunctionalColor.es.js";
import c from "../icon/NeonIcon.vue.es.js";
import { NeonJazziconUtils as g } from "../../../common/utils/NeonJazziconUtils.es.js";
import { NeonColorUtils as f } from "../../../common/utils/NeonColorUtils.es.js";
const b = d({
name: "NeonBadge",
components: {
NeonIcon: c
},
props: {
/**
* The two character <em>initials</em> to display on the badge.
*/
label: { type: String, default: null },
/**
* URL of the image to display on the badge.
*/
image: { type: String, default: null },
/**
* An icon to display on the badge.
*/
icon: { type: String, default: null },
/**
* If true, render the badge as a circle, instead of a square.
*/
circular: { type: Boolean, default: !1 },
/**
* The size of the badge - Small, Medium or Large.
*/
size: { type: String, default: l.Medium },
/**
* The color of the badge. This is one of the provided NeonFunctionalColors.
*/
color: { type: String, default: e.LowContrast },
/**
* Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.
*/
alternateColor: { type: String, default: null },
/**
* Display the badge in the disable style
*/
disabled: { type: Boolean, default: !1 },
/**
* Apply the generated Jazzicon style based on the unique identified provided (e.g. a wallet address, name, etc)
*/
jazziconId: { type: String, default: null },
/**
* Badge image alt text.
*/
imageAlt: { type: String, default: "Badge" }
},
setup(o) {
const t = (i) => {
let n = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${i}-l1`);
n.length === 0 && (n = "0, 0, 0");
const u = n.trim().split(", ").map((m) => +m);
return f.rgbToHex(u);
}, a = r(() => [
"#000000",
t(e.Brand),
t(e.Primary),
t(e.Info),
t(e.Success),
t(e.Warn),
t(e.Error)
]);
return {
svg: r(
() => o.jazziconId ? g.genSvg(
a.value,
o.jazziconId,
o.size === l.Small ? 32 : o.size === l.Medium ? 40 : 48
) : null
)
};
}
});
export {
b as default
};
//# sourceMappingURL=NeonBadge.es.js.map