@adyen/bento-vue2 1.99.0 → 1.100.0

package/dist/chunks/button.Df_UH5wZ.js

@@ -0,0 +1,112 @@
+import { defineComponent as m, useAttrs as S, useSlots as g, computed as o } from "vue";
+import { B as C } from "./typography.C8lPlsbD.js";
+import { u as E } from "./use-has-slot.C9lQZ6nz.js";
+import { B as h, a as R } from "./link.BpuCRgok.js";
+import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/button.css";
+var u = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e.TERTIARY = "tertiary", e.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", e))(u || {}), l = /* @__PURE__ */ ((e) => (e.CONDENSED = "condensed", e.DESTRUCTIVE = "critical", e.DISABLED = "disabled", e.ICON_ONLY = "icon-only", e.INVERSE = "inverse", e))(l || {});
+const I = {
+  name: "bento-button"
+}, T = /* @__PURE__ */ m({
+  ...I,
+  props: {
+    /**
+     * Reduces sizing of button
+     */
+    condensed: { type: Boolean, default: !1 },
+    /**
+     * Displays button as critical
+     */
+    critical: { type: Boolean, default: !1 },
+    /**
+     * Disables button functionality
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Sets color set to inverse
+     */
+    inverse: { type: Boolean, default: !1 },
+    /**
+     * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.
+     */
+    link: { type: Object, default: void 0 },
+    /**
+     * The default behavior of the button.
+     * Possible values are: 'button', 'reset', 'submit'
+     */
+    type: {
+      type: String,
+      default: "button"
+    },
+    /**
+     * Types of flavour of Button
+     * @values primary, secondary, tertiary, tertiary-with-background
+     */
+    variant: {
+      type: String,
+      default: u.PRIMARY,
+      validator: (e) => Object.values(u).includes(e)
+    }
+  },
+  emits: ["blur", "click", "focus", "keydown.esc"],
+  setup(e, { emit: n }) {
+    const a = e, t = S(), r = g(), d = E(r), c = o(
+      () => t["aria-disabled"] === "true" || t["aria-disabled"] === "" || t["aria-disabled"] === !0
+    ), s = o(() => a.disabled || c.value), p = o(() => (a == null ? void 0 : a.link) !== void 0 ? s.value ? "span" : h : "button"), b = o(() => {
+      var i, _;
+      return {
+        "aria-controls": (i = t["aria-controls"]) == null ? void 0 : i.toString(),
+        "aria-expanded": (_ = t["aria-expanded"]) == null ? void 0 : _.toString()
+      };
+    }), v = o(
+      () => p.value === "button" ? {
+        ...b.value,
+        ...c.value ? { "aria-disabled": "true" } : { disabled: a.disabled },
+        type: a.type
+      } : {
+        ...a.link,
+        disableTypography: !0,
+        variant: R.DEFAULT,
+        isButton: !0,
+        /**
+         * When the button is a disabled link, it's rendered as a `<span>`.
+         * These attributes ensure it's still announced as a disabled link by screen readers.
+         */
+        "aria-disabled": s.value ? "true" : void 0,
+        role: s.value ? "link" : void 0
+      }
+    ), f = o(() => ({
+      [`b-button--${a.variant}${a.critical ? `-${l.DESTRUCTIVE}` : ""}`]: !0
+    })), y = o(() => ({
+      ...f.value,
+      [`b-button--${l.CONDENSED}`]: a.condensed,
+      [`b-button--${l.DISABLED}`]: s.value,
+      [`b-button--${l.INVERSE}`]: a.inverse
+    }));
+    return { __sfc: !0, props: a, emit: n, attrs: t, slots: r, hasSlot: d, isAriaDisabled: c, isDisabled: s, componentType: p, ariaAttributes: b, componentProps: v, variantClass: f, conditionalClasses: y, getIconOnlyClass: () => ({
+      [`b-button--${l.ICON_ONLY}`]: !d("default")
+    }), onClickButton: (i) => {
+      s.value ? (i.preventDefault(), i.stopPropagation()) : n("click", i);
+    }, BentoTypography: C };
+  }
+});
+var k = function() {
+  var n = this, a = n._self._c, t = n._self._setupProxy;
+  return a(t.componentType, n._b({ tag: "component", staticClass: "b-button", class: { ...t.conditionalClasses, ...t.getIconOnlyClass() }, on: { "!click": function(r) {
+    return t.onClickButton.apply(null, arguments);
+  } } }, "component", t.componentProps, !1), [t.hasSlot("iconLeft") ? a("span", { staticClass: "b-button__icon-left", attrs: { "data-testid": "icon-button-left", "aria-hidden": t.hasSlot("default") ? "true" : null } }, [n._t("iconLeft")], 2) : n._e(), t.hasSlot("default") ? a(t.BentoTypography, { staticClass: "b-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [n._t("default")], 2) : n._e(), t.hasSlot("iconRight") ? a("span", { staticClass: "b-button__icon-right", attrs: { "data-testid": "icon-button-right", "aria-hidden": t.hasSlot("default") ? "true" : null } }, [n._t("iconRight")], 2) : n._e()], 1);
+}, O = [], A = /* @__PURE__ */ D(
+  T,
+  k,
+  O,
+  !1,
+  null,
+  "1f8e11d4"
+);
+const j = A.exports;
+export {
+  j as B,
+  l as a,
+  u as b
+};
+//# sourceMappingURL=button.Df_UH5wZ.js.map

package/dist/chunks/button.Df_UH5wZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.Df_UH5wZ.js","sources":["../../src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n    TERTIARY_WITH_BACKGROUND = 'tertiary-with-background',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"{ ...conditionalClasses, ...getIconOnlyClass() }\"\n        @click.capture=\"onClickButton\"\n    >\n        <span\n            v-if=\"hasSlot('iconLeft')\"\n            class=\"b-button__icon-left\"\n            data-testid=\"icon-button-left\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-button__label\">\n            <slot />\n        </bento-typography>\n        <span\n            v-if=\"hasSlot('iconRight')\"\n            class=\"b-button__icon-right\"\n            data-testid=\"icon-button-right\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, type PropType, useAttrs, useSlots } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from './button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { type Booleanish } from '../../types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Displays button as critical\n         */\n        critical: { type: Boolean, default: false },\n\n        /**\n         * Disables button functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: { type: Boolean, default: false },\n\n        /**\n         * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n         */\n        link: { type: Object, default: undefined },\n\n        /**\n         * The default behavior of the button.\n         * Possible values are: 'button', 'reset', 'submit'\n         */\n        type: {\n            type: String as PropType<ButtonHTMLAttributes['type']>,\n            default: 'button',\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary, tertiary-with-background\n         */\n        variant: {\n            type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n            default: BentoButtonVariant.PRIMARY,\n            validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"blur\", \"click\", \"focus\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const isAriaDisabled = computed(\n        () => attrs['aria-disabled'] === 'true' || attrs['aria-disabled'] === '' || attrs['aria-disabled'] === true\n    );\n    const isDisabled = computed(() => props.disabled || isAriaDisabled.value);\n\n    const componentType = computed(() => {\n        if (props?.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return isDisabled.value ? 'span' : BentoLink;\n        }\n        return 'button';\n    });\n    const ariaAttributes = computed(() => ({\n        'aria-controls': attrs['aria-controls']?.toString() as string,\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        componentType.value === 'button'\n            ? {\n                  ...ariaAttributes.value,\n                  ...(isAriaDisabled.value ? { 'aria-disabled': 'true' } : { disabled: props.disabled }),\n                  type: props.type,\n              }\n            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the button is a disabled link, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers.\n                   */\n                  'aria-disabled': isDisabled.value ? 'true' : undefined,\n                  role: isDisabled.value ? 'link' : undefined,\n              }\n    );\n\n    const variantClass = computed(() => ({\n        [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        ...variantClass.value,\n        [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n        [`b-button--${BentoButtonPropClass.DISABLED}`]: isDisabled.value,\n        [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n    }));\n\n    const getIconOnlyClass = () => ({\n        [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !hasSlot('default'),\n    });\n\n    const onClickButton = (e: MouseEvent) => {\n        if (isDisabled.value) {\n            e.preventDefault();\n            e.stopPropagation();\n        } else {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @example\n     * import { BentoButton } from '@adyen/bento-vue2';\n     * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             variant=\"secondary\"\n     *         >\n     *              <template #iconLeft>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *\n     *              Button text\n     *\n     *              <template #iconRight>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","isAriaDisabled","computed","isDisabled","props","componentType","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"mappings":";;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,2BAAA,4BAJQA,IAAAD,KAAA,CAAA,CAAA,GAOLE,IAAA,kBAAAC,OACHA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;AC6LR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtGAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC;AAAA,MAAuB,MAAAP,EAAA,eAAA,MAAA,UAAAA,EAAA,eAAA,MAAA,MAAAA,EAAA,eAAA,MAAA;AAAA,IACoF,GAE3GQ,IAAAD,EAAA,MAAAE,EAAA,YAAAH,EAAA,KAAA,GAEAI,IAAAH,EAAA,OACIE,KAAA,gBAAAA,EAAA,UAAA,SAMID,EAAA,QAAA,SAAAG,IAEJ,QAAO,GAEXC,IAAAL,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAM,IAAAb,EAAA,eAAA,MAAA,gBAAAa,EAAA;AAAA,QACe,kBAAAC,IAAAd,EAAA,eAAA,MAAA,gBAAAc,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAR;AAAA,MAAuB,MAAAG,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAE,EAAA;AAAA,QACsB,GAAAN,EAAA,QAAA,EAAA,iBAAA,OAAA,IAAA,EAAA,UAAAG,EAAA,SAAA;AAAA,QACkE,MAAAA,EAAA;AAAA,MACxE,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAO,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAR,EAAA,QAAA,SAAA;AAAA,QAMmC,MAAAA,EAAA,QAAA,SAAA;AAAA,MACX;AAAA,IACtC,GAGVS,IAAAV,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAE,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAZ,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGqB,IAAAX,EAAA,OAAA;AAAA,MAA2C,GAAAU,EAAA;AAAA,MACvB,CAAA,aAAApB,EAAA,SAAA,EAAA,GAAAY,EAAA;AAAA,MACuC,CAAA,aAAAZ,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACI,CAAA,aAAAX,EAAA,OAAA,EAAA,GAAAY,EAAA;AAAA,IACN,EAAA;+NAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAZ,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAe,MAAA;AACI,MAAAX,EAAA,SACIW,EAAA,eAAA,GACAA,EAAA,gBAAA,KAEAC,EAAA,SAAAD,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{calendar.CmhzIZZM.js → calendar.BKddGc3j.js}

@@ -1,5 +1,5 @@
 import { defineComponent as z, provide as be, computed as E, ref as U, watch as q, nextTick as He, toRef as F, reactive as xe } from "vue";
-import { B as pe } from "./button.DITA6YtS.js";
+import { B as pe } from "./button.Df_UH5wZ.js";
 import { B as Re } from "./typography.C8lPlsbD.js";
 import { u as De } from "./index.B6WW_F-J.js";
 import { g as Le } from "./generate-uid.NJ8tVoha.js";
@@ -9,7 +9,7 @@ import { d as Ee, a as ue, b as Ke } from "./differenceInMonths.CpwVtHZX.js";
 import { s as le } from "./startOfWeek.Br5KM4z_.js";
 import { C as Ce, a as Ae } from "./chevron-left.BS24hEFa.js";
 import { n as J } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { h as Ve, i as ze, B as Je } from "./dropdown.B21PZqp4.js";
+import { h as Ve, i as ze, B as Je } from "./dropdown.CLHXtH0r.js";
 import { a as Be } from "./keyboard-navigation.DWmhelVv.js";
 import { a as Xe, B as Ze } from "./date.C1HnIyOv.js";
 import "../assets/calendar.css";
@@ -1233,4 +1233,4 @@ export {
   st as y,
   et as z
 };
-//# sourceMappingURL=calendar.CmhzIZZM.js.map
+//# sourceMappingURL=calendar.BKddGc3j.js.map