@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
109 lines (108 loc) • 3.45 kB
JavaScript
import { defineComponent as f, computed as a } from "vue";
import { NeonFunctionalColor as e } from "../../../model/common/color/NeonFunctionalColor.es.js";
import c from "../../user-input/file/NeonFile.vue.es.js";
import p from "../icon/NeonIcon.vue.es.js";
import { NeonJazziconUtils as s } from "../../../utils/presentation/badge/NeonJazziconUtils.es.js";
import { NeonColorUtils as y } from "../../../utils/common/color/NeonColorUtils.es.js";
import { NeonBadgeSize as n } from "../../../model/presentation/badge/NeonBadgeSize.es.js";
const j = f({
name: "NeonBadge",
components: {
NeonFile: c,
NeonIcon: p
},
emits: [
/**
* emitted when the user selects or clears their image in edit mode.
* NOTE: This emit event DOES NOT set the badge image, it is the responsibility of the parent component to pass an
* image URL back into the component's image property to set it, e.g. a data URI.
* @type {File}
*/
"change-image"
],
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 - s, m, l, xl, xxl.
*/
size: { type: String, default: n.Medium },
/**
* The color of the badge. This is one of the provided NeonFunctionalColors.
*/
color: { type: String, default: e.Primary },
/**
* Alternate color for creating gradient badges. NOTE: can also be the same color as 'color'.
*/
alternateColor: { type: String, default: null },
/**
* Allow editing of the image. This will place an image file lookup button on top of the image allowing the user to
* choose a new image to upload.
*/
editable: { type: Boolean, default: !1 },
/**
* Accept string for the filetype to support selecting.
*/
accept: { type: String, default: "image/*" },
/**
* 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" },
/**
* Title for the file upload button in edit mode.
*/
editButtonTitle: { type: String, default: "Edit" }
},
setup(o, { emit: r }) {
const t = (u) => {
let l = getComputedStyle(document.documentElement).getPropertyValue(`--neon-rgb-${u}-l1`);
l.length === 0 && (l = "0, 0, 0");
const d = l.trim().split(", ").map((g) => +g);
return y.rgbToHex(d);
}, i = a(() => [
"#000000",
t(e.Brand),
t(e.Primary),
t(e.Info),
t(e.Success),
t(e.Warn),
t(e.Error)
]), m = a(
() => o.jazziconId ? s.genSvg(
i.value,
o.jazziconId,
o.size === n.Small ? 32 : o.size === n.Medium ? 40 : 48
) : null
);
return {
emit: r,
svg: m
};
}
});
export {
j as default
};
//# sourceMappingURL=NeonBadge.es.js.map