@adyen/bento-vue2 1.103.0 → 1.104.0

package/dist/chunks/avatar.D__jLgjI.js

@@ -1,71 +0,0 @@
-import { ref as b, computed as n, defineComponent as _, toRefs as m } from "vue";
-import { B as p } from "./typography.D1OZJbEa.js";
-import "./index.Cl4_42j5.js";
-import { n as v } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/avatar.css";
-const d = (t) => {
-  const a = b(t);
-  return n(() => a.value ? a.value.trim().charAt(0).toUpperCase() : null);
-};
-var o = /* @__PURE__ */ ((t) => (t.LARGE = "large", t.SMALL = "small", t))(o || {}), s = /* @__PURE__ */ ((t) => (t.BLUE = "blue", t.GREEN = "green", t.RED = "red", t.YELLOW = "yellow", t))(s || {});
-const L = {}, y = /* @__PURE__ */ _({
-  ...L,
-  __name: "avatar-image",
-  props: {
-    color: { default: s.YELLOW },
-    src: { default: null },
-    username: { default: null },
-    variant: { default: o.LARGE }
-  },
-  setup(t) {
-    const a = t, { username: r } = m(a), e = d(r), c = n(() => ({
-      [`b-avatar-image--${o.SMALL}`]: a.variant === o.SMALL,
-      [`b-avatar-image--${a.color}`]: a.color
-    }));
-    return { __sfc: !0, props: a, username: r, initials: e, conditionalClasses: c, BentoTypography: p };
-  }
-});
-var g = function() {
-  var a = this, r = a._self._c, e = a._self._setupProxy;
-  return r("div", { staticClass: "b-avatar-image", class: e.conditionalClasses, attrs: { "aria-hidden": "true", "data-testid": "avatar" } }, [a.src ? r("img", { staticClass: "b-avatar-image__image", attrs: { src: a.src, alt: "", "data-testid": "avatar-content" } }) : r("div", { staticClass: "b-avatar-image__default", attrs: { "data-testid": "avatar-content" } }, [r(e.BentoTypography, { attrs: { el: "span", variant: "body", strongest: "" } }, [a._v(" " + a._s(e.initials) + " ")])], 1)]);
-}, C = [], E = /* @__PURE__ */ v(
-  y,
-  g,
-  C,
-  !1,
-  null,
-  "7cac2ac2"
-);
-const h = E.exports, A = {
-  name: "bento-avatar"
-}, O = /* @__PURE__ */ _({
-  ...A,
-  props: {
-    iconOnly: { type: Boolean, default: !1 },
-    src: { default: null },
-    username: null
-  },
-  setup(t) {
-    const a = t, { username: r } = m(a), e = n(() => a.iconOnly ? a.username : null), c = n(() => a.src ? null : a.username), u = d(r), l = n(() => u.value ? u.value.charCodeAt(0) - 65 : null), f = n(() => {
-      const i = 26 / Object.keys(s).length;
-      return l.value <= i ? s.YELLOW : l.value <= i * 2 ? s.BLUE : l.value <= i * 3 ? s.GREEN : s.RED;
-    });
-    return { __sfc: !0, props: a, username: r, computedAriaLabel: e, computedUsername: c, initials: u, charCode: l, avatarColor: f, AvatarImage: h, BentoAvatarImageVariant: o, BentoTypography: p };
-  }
-});
-var R = function() {
-  var a = this, r = a._self._c, e = a._self._setupProxy;
-  return r("div", { staticClass: "b-avatar", attrs: { role: a.iconOnly ? "img" : null, "aria-label": e.computedAriaLabel } }, [r(e.AvatarImage, { attrs: { src: a.src, username: e.computedUsername, variant: e.BentoAvatarImageVariant.SMALL, color: e.avatarColor } }), a.iconOnly ? a._e() : r(e.BentoTypography, { staticClass: "b-avatar__label", attrs: { el: "span", variant: "body" } }, [a._v(" " + a._s(e.username) + " ")])], 1);
-}, $ = [], B = /* @__PURE__ */ v(
-  O,
-  R,
-  $,
-  !1,
-  null,
-  "0b132be2"
-);
-const W = B.exports;
-export {
-  W as B
-};
-//# sourceMappingURL=avatar.D__jLgjI.js.map

package/dist/chunks/avatar.D__jLgjI.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.D__jLgjI.js","sources":["../../src/composables/initials.ts","../../src/components/avatar/components/avatar-image/avatar-image.types.ts","../../src/components/avatar/components/avatar-image/avatar-image.vue","../../src/components/avatar/avatar.vue"],"sourcesContent":["import { computed, type ComputedRef, ref } from 'vue';\nimport { type MaybeRef } from '@/types/refs';\n\n/** Extracts the first letter of a username\n * @param username - The name to return the initials of\n * Common patterns:\n * 1. John => J\n * 2. John Smith => J\n * John Smith Doe Holly => J\n */\nexport const useInitials = (username: MaybeRef<string | null>): ComputedRef<string | null> => {\n    const computedUsername = ref(username);\n    return computed(() => (computedUsername.value ? computedUsername.value.trim().charAt(0).toUpperCase() : null));\n};\n","export enum BentoAvatarImageVariant {\n    LARGE = 'large',\n    SMALL = 'small',\n}\n\nexport enum BentoAvatarImageColor {\n    BLUE = 'blue',\n    GREEN = 'green',\n    RED = 'red',\n    YELLOW = 'yellow',\n}\n","<template>\n    <div class=\"b-avatar-image\" :class=\"conditionalClasses\" aria-hidden=\"true\" data-testid=\"avatar\">\n        <img v-if=\"src\" :src=\"src\" class=\"b-avatar-image__image\" alt=\"\" data-testid=\"avatar-content\" />\n        <div v-else class=\"b-avatar-image__default\" data-testid=\"avatar-content\">\n            <bento-typography el=\"span\" variant=\"body\" strongest>\n                {{ initials }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  color: { default: BentoAvatarImageColor.YELLOW },\n  src: { default: null },\n  username: { default: null },\n  variant: { default: BentoAvatarImageVariant.LARGE }\n});\n\n    const { username } = toRefs(props);\n    const initials = useInitials(username);\n\n    const conditionalClasses = computed(() => ({\n        [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL,\n        [`b-avatar-image--${props.color}`]: props.color,\n    }));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Image used as user profile inside bento-avatar.\n     *\n     * @example\n     * import { AvatarImage } from './components/avatar-image';\n     *\n     * export default {\n     *     components: { AvatarImage },\n     *     template: `<avatar-image :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar-image.scss\" />\n","<template>\n    <div class=\"b-avatar\" :role=\"iconOnly ? 'img' : null\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image';\n    import { BentoTypography } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    const props = defineProps({\n  iconOnly: { type: Boolean, default: false },\n  src: { default: null },\n  username: null\n});\n\n    const { username } = toRefs(props);\n\n    const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n    const computedUsername = computed(() => (!props.src ? props.username : null));\n    const initials = useInitials(username);\n\n    // Returns the UTF-16 char code\n    const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n    // Returns a computed color based on the letter passed\n    const avatarColor = computed(() => {\n        const numberOfAlphabetLetters = 26;\n        const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n        const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n        if (charCode.value <= rangeStep) {\n            return BentoAvatarImageColor.YELLOW;\n        }\n        if (charCode.value <= rangeStep * 2) {\n            return BentoAvatarImageColor.BLUE;\n        }\n        if (charCode.value <= rangeStep * 3) {\n            return BentoAvatarImageColor.GREEN;\n        }\n        return BentoAvatarImageColor.RED;\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoAvatar } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoAvatar },\n     *     template: `<bento-avatar :src=\"userAvatarSrc\" username=\"Jane\" />`\n     * }\n     */\n    export default {\n        name: 'bento-avatar',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n"],"names":["useInitials","username","computedUsername","ref","computed","BentoAvatarImageVariant","BentoAvatarImageVariant2","BentoAvatarImageColor","BentoAvatarImageColor2","__default__$1","toRefs","props","initials","conditionalClasses","__default__","computedAriaLabel","charCode","avatarColor","rangeStep"],"mappings":";;;;;AAUO,MAAAA,IAAA,CAAAC,MAAA;AACH,QAAAC,IAAAC,EAAAF,CAAA;AACA,SAAAG,EAAA,MAAAF,EAAA,QAAAA,EAAA,MAAA,KAAA,EAAA,OAAA,CAAA,EAAA,YAAA,IAAA,IAAA;AACJ;ACbO,IAAAG,IAAA,kBAAAC,OACHA,EAAA,QAAA,SACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GAKLE,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,MAAA,OACAA,EAAA,SAAA,UAJQA,IAAAD,KAAA,CAAA,CAAA;ACwCR,MAAAE,IAAA,CAAA;;;;;;;;;;iBArBA,EAAA,UAAAR,EAAA,IAAAS,EAAAC,CAAA,GACAC,IAAAZ,EAAAC,CAAA,GAEAY,IAAAT,EAAA,OAAA;AAAA,MAA2C,CAAA,mBAAAC,EAAA,KAAA,EAAA,GAAAM,EAAA,YAAAN,EAAA;AAAA,MACyD,CAAA,mBAAAM,EAAA,KAAA,EAAA,GAAAA,EAAA;AAAA,IACtD,EAAA;;;;;;;;;;;;;;;qBCqC9CG,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBA1CA,EAAA,UAAAb,EAAA,IAAAS,EAAAC,CAAA,GAEAI,IAAAX,EAAA,MAAAO,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAT,IAAAE,EAAA,MAAAO,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAC,IAAAZ,EAAAC,CAAA,GAGAe,IAAAZ,EAAA,MAAAQ,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAK,IAAAb,EAAA,MAAA;AAGI,YAAAc,IAAA,KADA,OAAA,KAAAX,CAAA,EAAA;AAGA,aAAAS,EAAA,SAAAE,IACIX,EAAA,SAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,OAEJS,EAAA,SAAAE,IAAA,IACIX,EAAA,QAEJA,EAAA;AAAA,IAA6B,CAAA;;;;;;;;;;;;;;;;"}