@adyen/bento-vue3 1.99.0 → 1.100.0

package/dist/chunks/button.C6-bXf1h.js

@@ -0,0 +1,130 @@
+import { defineComponent as C, useAttrs as N, useSlots as T, computed as o, openBlock as d, createBlock as v, resolveDynamicComponent as A, mergeProps as O, withCtx as m, unref as i, createElementBlock as y, renderSlot as u, createCommentVNode as c } from "vue";
+import { B as $ } from "./typography.B3J6_tYk.js";
+import { u as L } from "./use-has-slot.CyMiImRQ.js";
+import { B as Y, a as B } from "./link.D6D6YGsN.js";
+import { _ as U } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/button.css";
+var b = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.TERTIARY = "tertiary", t.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", t))(b || {}), s = /* @__PURE__ */ ((t) => (t.CONDENSED = "condensed", t.DESTRUCTIVE = "critical", t.DISABLED = "disabled", t.ICON_ONLY = "icon-only", t.INVERSE = "inverse", t))(s || {});
+const w = ["aria-hidden"], x = ["aria-hidden"], V = {
+  name: "bento-button"
+}, j = /* @__PURE__ */ C({
+  ...V,
+  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: b.PRIMARY,
+      validator: (t) => Object.values(b).includes(t)
+    }
+  },
+  emits: ["blur", "click", "focus", "keydown.esc"],
+  setup(t, { emit: _ }) {
+    const e = t, E = _, r = N(), k = T(), n = L(k), p = o(
+      () => r["aria-disabled"] === "true" || r["aria-disabled"] === "" || r["aria-disabled"] === !0
+    ), l = o(() => e.disabled || p.value), f = o(() => e?.link !== void 0 ? l.value ? "span" : Y : "button"), D = o(() => ({
+      "aria-controls": r["aria-controls"]?.toString(),
+      "aria-expanded": r["aria-expanded"]?.toString()
+    })), S = o(
+      () => f.value === "button" ? {
+        ...D.value,
+        ...p.value ? { "aria-disabled": "true" } : { disabled: e.disabled },
+        type: e.type
+      } : {
+        ...e.link,
+        disableTypography: !0,
+        variant: B.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": l.value ? "true" : void 0,
+        role: l.value ? "link" : void 0
+      }
+    ), h = o(() => ({
+      [`b-button--${e.variant}${e.critical ? `-${s.DESTRUCTIVE}` : ""}`]: !0
+    })), R = o(() => ({
+      ...h.value,
+      [`b-button--${s.CONDENSED}`]: e.condensed,
+      [`b-button--${s.DISABLED}`]: l.value,
+      [`b-button--${s.INVERSE}`]: e.inverse
+    })), g = () => ({
+      [`b-button--${s.ICON_ONLY}`]: !n("default")
+    }), I = (a) => {
+      l.value ? (a.preventDefault(), a.stopPropagation()) : E("click", a);
+    };
+    return (a, H) => (d(), v(A(f.value), O(S.value, {
+      class: ["b-button", { ...R.value, ...g() }],
+      onClickCapture: I
+    }), {
+      default: m(() => [
+        i(n)("iconLeft") ? (d(), y("span", {
+          key: 0,
+          class: "b-button__icon-left",
+          "data-testid": "icon-button-left",
+          "aria-hidden": i(n)("default") ? "true" : null
+        }, [
+          u(a.$slots, "iconLeft", {}, void 0, !0)
+        ], 8, w)) : c("", !0),
+        i(n)("default") ? (d(), v(i($), {
+          key: 1,
+          el: "span",
+          variant: "body",
+          stronger: "",
+          class: "b-button__label"
+        }, {
+          default: m(() => [
+            u(a.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        })) : c("", !0),
+        i(n)("iconRight") ? (d(), y("span", {
+          key: 2,
+          class: "b-button__icon-right",
+          "data-testid": "icon-button-right",
+          "aria-hidden": i(n)("default") ? "true" : null
+        }, [
+          u(a.$slots, "iconRight", {}, void 0, !0)
+        ], 8, x)) : c("", !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), W = /* @__PURE__ */ U(j, [["__scopeId", "data-v-6c748a79"]]);
+export {
+  W as B,
+  s as a,
+  b
+};
+//# sourceMappingURL=button.C6-bXf1h.js.map

package/dist/chunks/button.C6-bXf1h.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.C6-bXf1h.js","sources":["../../../vue2/src/components/button/button.types.ts","../../../vue2/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<{\n        /**\n         * Emitted when the element has lost focus\n         */\n        (e: 'blur');\n\n        /**\n         * Emitted when the button is clicked\n         */\n        (e: 'click', event: MouseEvent);\n\n        /**\n         * Emitted when the element has received focus\n         */\n        (e: 'focus');\n\n        /**\n         * Emitted when the \"ESC\" key is pressed\n         */\n        (e: 'keydown.esc');\n    }>();\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__","props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","isAriaDisabled","computed","isDisabled","componentType","BentoLink","ariaAttributes","componentProps","BentoLinkVariant","variantClass","conditionalClasses","getIconOnlyClass","onClickButton","e"],"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;gDCiNRE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA1KA,UAAAC,IAAAC,GA8CAC,IAAAC,GAsBAC,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,MAAAX,EAAA,YAAAU,EAAA,KAAA,GAEAG,IAAAF,EAAA,MACIX,GAAA,SAAA,SAMIY,EAAA,QAAA,SAAAE,IAEJ,QAAO,GAEXC,IAAAJ,EAAA,OAAA;AAAA,MAAuC,iBAAAP,EAAA,eAAA,GAAA,SAAA;AAAA,MACe,iBAAAA,EAAA,eAAA,GAAA,SAAA;AAAA,IACA,EAAA,GAGtDY,IAAAL;AAAA,MAAuB,MAAAE,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAE,EAAA;AAAA,QACsB,GAAAL,EAAA,QAAA,EAAA,iBAAA,OAAA,IAAA,EAAA,UAAAV,EAAA,SAAA;AAAA,QACkE,MAAAA,EAAA;AAAA,MACxE,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAiB,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAL,EAAA,QAAA,SAAA;AAAA,QAMmC,MAAAA,EAAA,QAAA,SAAA;AAAA,MACX;AAAA,IACtC,GAGVM,IAAAP,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAX,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAH,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGsB,IAAAR,EAAA,OAAA;AAAA,MAA2C,GAAAO,EAAA;AAAA,MACvB,CAAA,aAAArB,EAAA,SAAA,EAAA,GAAAG,EAAA;AAAA,MACuC,CAAA,aAAAH,EAAA,QAAA,EAAA,GAAAe,EAAA;AAAA,MACI,CAAA,aAAAf,EAAA,OAAA,EAAA,GAAAG,EAAA;AAAA,IACN,EAAA,GAGzDoB,IAAA,OAAA;AAAA,MAAgC,CAAA,aAAAvB,EAAA,SAAA,EAAA,GAAA,CAAAW,EAAA,SAAA;AAAA,IACuC,IAGvEa,IAAA,CAAAC,MAAA;AACI,MAAAV,EAAA,SACIU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAEApB,EAAA,SAAAoB,CAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{calendar.B0XfOj2I.js → calendar.xS1f71Tj.js}

@@ -1,5 +1,5 @@
 import { defineComponent as ue, provide as Ce, computed as O, openBlock as _, createBlock as H, unref as M, resolveComponent as vt, createElementBlock as Y, withKeys as te, normalizeClass as Be, createElementVNode as T, createVNode as C, withCtx as z, toDisplayString as Me, ref as J, watch as re, nextTick as yt, toRef as x, withDirectives as Ve, mergeProps as ze, toHandlers as Je, createCommentVNode as ne, createTextVNode as Ge, Fragment as X, renderList as Z, reactive as Xe, resolveDynamicComponent as ht } from "vue";
-import { B as Ie } from "./button.DWF7FSIw.js";
+import { B as Ie } from "./button.C6-bXf1h.js";
 import { B as Ye } from "./typography.B3J6_tYk.js";
 import { u as we } from "./index.B875RXHM.js";
 import { g as Ze } from "./generate-uid.DBWe4g6T.js";
@@ -9,7 +9,7 @@ import { t as w, c as se, n as fe, k as Ue, w as pt, g as tt } from "./en-US.BR6
 import { d as je, a as Ne, b as Mt } from "./differenceInMonths.yz4Dfe-b.js";
 import { s as Ee } from "./startOfWeek.muMEhS7U.js";
 import { C as nt, a as at } from "./chevron-left.C_vPW7OR.js";
-import { h as Nt, i as Et, B as bt } from "./dropdown.DpqCHfi-.js";
+import { h as Nt, i as Et, B as bt } from "./dropdown.DemBTBTo.js";
 import { _ as De } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { B as St, a as _t } from "./date.BFhwd9CA.js";
 import "../assets/calendar.css";
@@ -1270,4 +1270,4 @@ export {
   Yt as y,
   It as z
 };
-//# sourceMappingURL=calendar.B0XfOj2I.js.map
+//# sourceMappingURL=calendar.xS1f71Tj.js.map