@adyen/bento-vue2 1.0.0 → 1.1.1

package/dist/chunks/index.f55a6913.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.f55a6913.js","sources":["../../src/types/label-position.ts","../../src/components/toggle/toggle.types.ts","../../src/components/toggle/toggle.vue"],"sourcesContent":["export enum AdlLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\n}\n","export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n","<template>\n    <label class=\"b-toggle\" :class=\"conditionalClasses\" data-testid=\"label\">\n        <input\n            v-model=\"toggleInput\"\n            :aria-label=\"computedAriaLabel\"\n            :aria-describedby=\"computedDescription\"\n            :disabled=\"disabled\"\n            :aria-readonly=\"readonly\"\n            role=\"switch\"\n            class=\"b-toggle__input\"\n            type=\"checkbox\"\n            @change=\"$event => onChange($event)\"\n            @click=\"onClick\"\n        />\n        <span class=\"b-toggle__track\" aria-hidden=\"true\">\n            <span class=\"b-toggle__handle\">\n                <checkmark-small v-if=\"toggleInput\" />\n            </span>\n        </span>\n        <span v-if=\"defaultSlotValue\" class=\"b-toggle__label-container\">\n            <bento-typography\n                v-if=\"defaultSlotValue\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                data-testid=\"inner-label\"\n            >\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"defaultSlotValue && descriptionSlotValue\"\n                :id=\"descriptionId\"\n                :el=\"BentoTypographyElement.SPAN\"\n                :variant=\"BentoTypographyVariant.BODY\"\n                class=\"b-toggle__description\"\n            >\n                <slot name=\"description\" />\n            </bento-typography>\n        </span>\n    </label>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';\n    import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small';\n    import { BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { AdlLabelPosition } from '@/types';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n\n    /**\n     * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle\n     *\n     * @usage\n     * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2';\n     *\n     * export default {\n     *     components: { BentoToggle },\n     *     template: `\n     *         <bento-toggle\n     *              :value=\"toggleValue\"`\n     *              label-position=\"LabelPosition.BEFORE\"\n     *              @input=\"optionalHandler($event)\"\n     *          >\n     *          Label Text\n     *          </bento-toggle>\n     *     `,\n     * }\n     */\n    export default defineComponent({\n        name: 'bento-toggle',\n        components: { BentoTypography, CheckmarkSmall },\n        props: {\n            /**\n             * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label\n             */\n            ariaLabel: {\n                type: String,\n                default: undefined,\n            },\n            /**\n             * Disable the toggle (optional)\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Position of the label relative to the toggle (optional)\n             * @values before, after\n             */\n            labelPosition: {\n                type: String as PropType<AdlLabelPosition>,\n                default: AdlLabelPosition.BEFORE,\n                validator: (value: AdlLabelPosition) => Object.values(AdlLabelPosition).includes(value),\n            },\n            /**\n             * Setting this property to true will set the toggle to read only state.\n             */\n            readonly: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Indicates if the switch is \"on\" or \"off\"\n             */\n            value: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: ['input'],\n        setup(props, { slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n            const { ariaLabel } = toRefs(props);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = hasSlot('default');\n            const descriptionSlotValue = hasSlot('description');\n\n            useDefaultSlotValidator('bento-toggle', defaultSlotValue, descriptionSlotValue);\n\n            const labelSlot = computed((): string => (slots.default ? getSlotText(slots)('default') : null));\n\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel,\n                label: labelSlot,\n                defaultFallback: 'toggle',\n            });\n\n            const computedDescription = computed((): string | null => descriptionId ?? null);\n\n            const conditionalClasses = computed((): { [key: string]: boolean } => ({\n                [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]: props.labelPosition === AdlLabelPosition.BEFORE,\n                'b-toggle--disabled': props.disabled,\n                'b-toggle--readonly': props.readonly,\n            }));\n\n            const onChange = (event: Event) => {\n                emit('input', (event.target as HTMLInputElement).checked);\n            };\n\n            // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead\n            const onClick = (event: Event) => {\n                if (props.readonly) {\n                    event.preventDefault();\n                }\n            };\n\n            watch(\n                () => props.value,\n                newValue => {\n                    toggleInput.value = newValue;\n                }\n            );\n\n            return {\n                // Refs\n                toggleInput,\n\n                // Types\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Events\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["AdlLabelPosition","AdlLabelPosition2","BentoTogglePropClass","BentoTogglePropClass2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","value","props","slots","emit","hasSlot","useHasSlot","ariaLabel","toRefs","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","getSlotText","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue","BentoTypographyElement","BentoTypographyVariant"],"mappings":";;;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,SAAA,UACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA,GCAAE,IAAA,kBAAAC,OACRA,EAAA,cAAA,eADQA,IAAAD,KAAA,CAAA,CAAA;ACuEZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,GAAA,gBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAP,EAAA;AAAA,MACA,WAAA,CAAAQ,MAAA,OAAA,OAAAR,CAAA,EAAA,SAAAQ,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA,CAAA,OAAA;AAAA,EACA,MAAAC,GAAA,EAAA,OAAAC,GAAA,MAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAAH,CAAA,GACA,EAAA,WAAAI,EAAA,IAAAC,EAAAN,CAAA,GAEAO,IAAAC,EAAAR,EAAA,KAAA,GACAS,IAAAC,EAAA,oBAAA,GAEAC,IAAAR,EAAA,SAAA,GACAS,IAAAT,EAAA,aAAA;AAEA,IAAAU,EAAA,gBAAAF,GAAAC,CAAA;AAEA,UAAAE,IAAAC,EAAA,MAAAd,EAAA,UAAAe,EAAAf,CAAA,EAAA,SAAA,IAAA,IAAA,GAEAgB,IAAAC,EAAA;AAAA,MAAA,WAAAb;AAAA,MACA,OAAAS;AAAA,MACA,iBAAA;AAAA,IACA,CAAA,GAGAK,IAAAJ,EAAA,MAAAN,KAAA,IAAA,GAEAW,IAAAL,EAAA,OAAA;AAAA,MAAA,CAAA,aAAAtB,EAAA,aAAA,GAAAO,EAAA,kBAAAT,EAAA;AAAA,MACA,sBAAAS,EAAA;AAAA,MACA,sBAAAA,EAAA;AAAA,IACA,EAAA,GAGAqB,IAAA,CAAAC,MAAA;AACA,MAAApB,EAAA,SAAAoB,EAAA,OAAA,OAAA;AAAA,IAAA,GAIAC,IAAA,CAAAD,MAAA;AACA,MAAAtB,EAAA,YACAsB,EAAA,eAAA;AAAA,IACA;AAGA,WAAAE;AAAA,MAAA,MAAAxB,EAAA;AAAA,MACA,CAAAyB,MAAA;AAEA,QAAAlB,EAAA,QAAAkB;AAAA,MAAA;AAAA,IACA,GAGA;AAAA;AAAA,MAAA,aAAAlB;AAAA;AAAA,MAEA,wBAAAmB;AAAA,MAGA,wBAAAC;AAAA;AAAA,MACA,mBAAAV;AAAA,MAGA,qBAAAE;AAAA,MACA,kBAAAR;AAAA,MACA,sBAAAC;AAAA,MACA,oBAAAQ;AAAA,MACA,eAAAX;AAAA;AAAA,MACA,UAAAY;AAAA,MAGA,SAAAE;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{listbox-option-tag.c03eab04.js → listbox-option-tag.ac8eae9a.js}

@@ -1,13 +1,12 @@
-import { defineComponent as c, toRefs as v, computed as r } from "vue";
-import { A as f, u as b, B as n, a as y } from "./index.6bd3da71.js";
-import { B as i, c as _, a as d } from "./index.3aedb3dd.js";
+import { defineComponent as i, toRefs as v, computed as r } from "vue";
+import { A as f, u as b, B as n, a as y } from "./index.36bd0bb1.js";
+import { B as c, a as _, b as d } from "./index.2066e16f.js";
 import { n as p } from "./_plugin-vue2_normalizer.71e2aa87.js";
 import { BentoTag as g } from "../tag.js";
 import "../assets/listbox-option-tag.css";
-const h = c({
+const B = i({
   name: "bento-avatar",
-  components: { AvatarImage: f, BentoTypography: i },
-  inheritAttrs: !1,
+  components: { AvatarImage: f, BentoTypography: c },
   props: {
     /**
      * Displays the user profile without the label.
@@ -52,24 +51,24 @@ const h = c({
     };
   }
 });
-var B = function() {
+var h = function() {
   var t = this, a = t._self._c;
   return t._self._setupProxy, a("div", { staticClass: "b-avatar", attrs: { "aria-label": t.computedAriaLabel } }, [a("avatar-image", { attrs: { src: t.src, username: t.computedUsername, variant: t.BentoAvatarImageVariant.SMALL, color: t.avatarColor } }), t.iconOnly ? t._e() : a("bento-typography", { staticClass: "b-avatar__label", attrs: { el: t.BentoTypographyElement.SPAN, variant: t.BentoTypographyVariant.BODY } }, [t._v(" " + t._s(t.username) + " ")])], 1);
 }, A = [], C = /* @__PURE__ */ p(
-  h,
   B,
+  h,
   A,
   !1,
   null,
-  "c8372cc1",
+  "3412fec3",
   null,
   null
 );
-const N = C.exports, x = c({
+const N = C.exports, x = i({
   name: "listbox-tag-option",
   components: {
     BentoTag: g,
-    BentoTypography: i
+    BentoTypography: c
   },
   props: {
     /**
@@ -108,4 +107,4 @@ export {
   N as B,
   U as L
 };
-//# sourceMappingURL=listbox-option-tag.c03eab04.js.map
+//# sourceMappingURL=listbox-option-tag.ac8eae9a.js.map

package/dist/chunks/listbox-option-tag.ac8eae9a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listbox-option-tag.ac8eae9a.js","sources":["../../src/components/internal/avatar/avatar.vue","../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n    <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n        <avatar-image\n            :src=\"src\"\n            :username=\"computedUsername\"\n            :variant=\"BentoAvatarImageVariant.SMALL\"\n            :color=\"avatarColor\"\n        />\n        <bento-typography\n            v-if=\"!iconOnly\"\n            class=\"b-avatar__label\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n        >\n            {{ username }}\n        </bento-typography>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, toRefs } from 'vue';\n    import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from '@/components/avatar-image';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useInitials } from '@/composables';\n\n    /**\n     * Displays an user profile including an avatar and optionally a label.\n     *\n     * @example\n     * import { BentoUserProfile } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoUserProfile },\n     *     template: `\n     *          <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n     */\n    export default defineComponent({\n        name: 'bento-avatar',\n        components: { AvatarImage, BentoTypography },\n        props: {\n            /**\n             * Displays the user profile without the label.\n             */\n            iconOnly: {\n                type: Boolean,\n                default: false,\n            },\n\n            /**\n             * Name of the user that will be used both in the label and to extract initials to display default value.\n             * John => J\n             * John Smith => JS\n             * John Smith Doe => JD\n             * John Smith Doe Holly => JH\n             */\n            username: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Image src to load the profile picture.\n             */\n            src: {\n                type: String,\n                default: null,\n            },\n        },\n\n        setup(props) {\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\n            return {\n                // Enums\n                BentoAvatarImageVariant,\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                computedAriaLabel,\n                computedUsername,\n                avatarColor,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n","<template>\n    <span class=\"b-listbox-tag-option\">\n        <span aria-hidden=\"true\">\n            <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n        </span>\n        <bento-typography v-if=\"option.label\" :el=\"BentoTypographyElement.SPAN\" class=\"b-listbox-tag-option__label\">\n            {{ option.label }}\n        </bento-typography>\n    </span>\n</template>\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType } from 'vue';\n    import type { BentoListboxOptionItem } from '@/types';\n    import { BentoTag, BentoTagVariant } from '@/components/tag';\n    import { BentoTypography, BentoTypographyElement } from '@/components/typography';\n\n    /**\n     * A Tag Dropdown option item used in the Dropdown and Filter components.\n     */\n    export default defineComponent({\n        name: 'listbox-tag-option',\n        components: {\n            BentoTag,\n            BentoTypography,\n        },\n        props: {\n            /**\n             * The option item that contains all the option item's data.\n             * @type {BentoListboxOptionItem}\n             */\n            option: {\n                type: Object as PropType<BentoListboxOptionItem>,\n                required: true,\n            },\n        },\n        setup(props) {\n            const variant = computed(() => props.option.data as BentoTagVariant);\n\n            return {\n                // Values\n                variant,\n                // Enums\n                BentoTypographyElement,\n            };\n        },\n    });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","BentoTypographyElement","BentoTypographyVariant","_sfc_main","BentoTag"],"mappings":";;;;;;AAoCA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MASA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,KAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGA,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACAC,EAAA,SAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,OAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,QAEAA,EAAA;AAAA,IAAA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,yBAAAC;AAAA,MAEA,wBAAAC;AAAA,MACA,wBAAAC;AAAA;AAAA,MACA,mBAAAX;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;qBC1FAM,IAAAlB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAmB;AAAA,IACA,iBAAAjB;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA;AAAA,MAIA,wBAAAa;AAAA,IAEA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}