@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/toggle.js

@@ -1,18 +1,21 @@
-import { defineComponent as T, toRefs as I, ref as A, computed as u, watch as L, resolveComponent as f, openBlock as n, createElementBlock as y, normalizeClass as D, withDirectives as F, createElementVNode as c, vModelCheckbox as R, createBlock as g, createCommentVNode as s, withCtx as h, renderSlot as k } from "vue";
-import { C as $ } from "./chunks/checkmark-small.3e93a119.js";
-import { B as O, a as w, b as N } from "./chunks/index.222d29b0.js";
-import { g as P } from "./chunks/unique-id.a2a2b458.js";
-import { u as U } from "./chunks/aria-label.ac9651a5.js";
-import { u as Y } from "./chunks/use-has-slot.068222e6.js";
-import { u as j } from "./chunks/use-default-slot-validator.83d977a1.js";
-import { g as z } from "./chunks/get-slot-text.2db867f8.js";
-import { _ as H } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index36.css";
-var _ = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(_ || {}), i = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(i || {});
-const M = T({
+import { defineComponent as $, ref as y, computed as p, toRefs as V, watch as D, resolveComponent as _, openBlock as n, createElementBlock as h, normalizeClass as T, withDirectives as w, createElementVNode as b, vModelCheckbox as O, createBlock as g, createCommentVNode as i, withCtx as k, renderSlot as v } from "vue";
+import { C as N } from "./chunks/checkmark-small.3e93a119.js";
+import { B as U } from "./chunks/index.89b00b94.js";
+import { g as j } from "./chunks/unique-id.a2a2b458.js";
+import { u as z } from "./chunks/use-has-slot.9fac7123.js";
+import { u as H } from "./chunks/use-default-slot-validator.1169c221.js";
+import { g as m } from "./chunks/get-slot-text.bead058f.js";
+import { u as M } from "./chunks/aria-label.ac9651a5.js";
+import { _ as P } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import "./assets/index42.css";
+var C = /* @__PURE__ */ ((e) => (e.LABEL_FIRST = "label-first", e))(C || {}), d = /* @__PURE__ */ ((e) => (e.BEFORE = "before", e.AFTER = "after", e))(d || {});
+const q = $({
   name: "bento-toggle",
-  components: { BentoTypography: O, CheckmarkSmall: $ },
+  components: { BentoTypography: U, CheckmarkSmall: N },
   props: {
+    /**
+     * @deprecated from version 2.0.0. Use the aria-label attribute instead.
+     */
     /**
      * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label
      */
@@ -33,8 +36,8 @@ const M = T({
      */
     labelPosition: {
       type: String,
-      default: i.BEFORE,
-      validator: (e) => Object.values(i).includes(e)
+      default: d.BEFORE,
+      validator: (e) => Object.values(d).includes(e)
     },
     /**
      * Setting this property to true will set the toggle to read only state.
@@ -52,61 +55,60 @@ const M = T({
     }
   },
   emits: ["input"],
-  setup(e, { slots: t, emit: m }) {
-    const d = Y(t), { ariaLabel: b } = I(e), p = A(e.value), r = P("toggle-description"), o = d("default"), a = d("description");
-    j("bento-toggle", o, a);
-    const v = u(() => t.default ? z(t)("default") : null), B = U({
-      ariaLabel: b,
-      label: v,
-      defaultFallback: "toggle"
-    }), S = u(() => r ?? null), C = u(() => ({
-      [`b-toggle--${_.LABEL_FIRST}`]: e.labelPosition === i.BEFORE,
+  setup(e, { attrs: t, slots: a, emit: f }) {
+    const c = z(a), u = y(e.value), r = j("toggle-description"), s = m(a)("default"), o = m(a)("description");
+    H("bento-toggle", a.default, a.description);
+    const S = p(() => c("default") ? m(a)("default") : null), B = y(t["aria-label"]), { ariaLabel: E } = V(e), L = M({
+      ariaLabel: B.value,
+      // TODO: take this line away when the aria-label props is removed
+      label: E,
+      defaultFallback: S
+    }), I = p(() => r ?? null), A = p(() => ({
+      [`b-toggle--${C.LABEL_FIRST}`]: e.labelPosition === d.BEFORE,
       "b-toggle--disabled": e.disabled,
       "b-toggle--readonly": e.readonly
-    })), E = (l) => {
-      m("input", l.target.checked);
-    }, V = (l) => {
+    })), F = (l) => {
+      f("input", l.target.checked);
+    }, R = (l) => {
       e.readonly && l.preventDefault();
     };
-    return L(
+    return D(
       () => e.value,
       (l) => {
-        p.value = l;
+        u.value = l;
       }
     ), {
       // Refs
-      toggleInput: p,
-      // Types
-      BentoTypographyElement: w,
-      BentoTypographyVariant: N,
+      toggleInput: u,
       // Values
-      computedAriaLabel: B,
-      computedDescription: S,
-      defaultSlotValue: o,
-      descriptionSlotValue: a,
-      conditionalClasses: C,
+      computedAriaLabel: L,
+      computedDescription: I,
+      defaultSlotValue: s,
+      descriptionSlotValue: o,
+      conditionalClasses: A,
       descriptionId: r,
-      // Events
-      onChange: E,
-      onClick: V
+      // Method
+      hasSlot: c,
+      onChange: F,
+      onClick: R
     };
   }
 });
-const q = ["aria-label", "aria-describedby", "disabled", "aria-readonly"], G = {
+const G = ["aria-label", "aria-describedby", "disabled", "aria-readonly"], J = {
   class: "b-toggle__track",
   "aria-hidden": "true"
-}, J = { class: "b-toggle__handle" }, K = {
+}, K = { class: "b-toggle__handle" }, Q = {
   key: 0,
   class: "b-toggle__label-container"
 };
-function Q(e, t, m, d, b, p) {
-  const r = f("checkmark-small"), o = f("bento-typography");
-  return n(), y("label", {
-    class: D(["b-toggle", e.conditionalClasses]),
+function W(e, t, a, f, c, u) {
+  const r = _("checkmark-small"), s = _("bento-typography");
+  return n(), h("label", {
+    class: T(["b-toggle", e.conditionalClasses]),
     "data-testid": "label"
   }, [
-    F(c("input", {
-      "onUpdate:modelValue": t[0] || (t[0] = (a) => e.toggleInput = a),
+    w(b("input", {
+      "onUpdate:modelValue": t[0] || (t[0] = (o) => e.toggleInput = o),
       "aria-label": e.computedAriaLabel,
       "aria-describedby": e.computedDescription,
       disabled: e.disabled,
@@ -114,47 +116,47 @@ function Q(e, t, m, d, b, p) {
       role: "switch",
       class: "b-toggle__input",
       type: "checkbox",
-      onChange: t[1] || (t[1] = (a) => e.onChange(a)),
-      onClick: t[2] || (t[2] = (...a) => e.onClick && e.onClick(...a))
-    }, null, 40, q), [
-      [R, e.toggleInput]
+      onChange: t[1] || (t[1] = (o) => e.onChange(o)),
+      onClick: t[2] || (t[2] = (...o) => e.onClick && e.onClick(...o))
+    }, null, 40, G), [
+      [O, e.toggleInput]
     ]),
-    c("span", G, [
-      c("span", J, [
-        e.toggleInput ? (n(), g(r, { key: 0 })) : s("", !0)
+    b("span", J, [
+      b("span", K, [
+        e.toggleInput ? (n(), g(r, { key: 0 })) : i("", !0)
       ])
     ]),
-    e.defaultSlotValue ? (n(), y("span", K, [
-      e.defaultSlotValue ? (n(), g(o, {
+    e.hasSlot("default") ? (n(), h("span", Q, [
+      e.hasSlot("default") ? (n(), g(s, {
         key: 0,
-        el: e.BentoTypographyElement.SPAN,
-        variant: e.BentoTypographyVariant.BODY,
+        el: "span",
+        variant: "body",
         "data-testid": "inner-label"
       }, {
-        default: h(() => [
-          k(e.$slots, "default", {}, void 0, !0)
+        default: k(() => [
+          v(e.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["el", "variant"])) : s("", !0),
-      e.defaultSlotValue && e.descriptionSlotValue ? (n(), g(o, {
+      })) : i("", !0),
+      e.hasSlot("default") && e.hasSlot("description") ? (n(), g(s, {
         key: 1,
         id: e.descriptionId,
-        el: e.BentoTypographyElement.SPAN,
-        variant: e.BentoTypographyVariant.BODY,
+        el: "span",
+        variant: "body",
         class: "b-toggle__description"
       }, {
-        default: h(() => [
-          k(e.$slots, "description", {}, void 0, !0)
+        default: k(() => [
+          v(e.$slots, "description", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["id", "el", "variant"])) : s("", !0)
-    ])) : s("", !0)
+      }, 8, ["id"])) : i("", !0)
+    ])) : i("", !0)
   ], 2);
 }
-const ne = /* @__PURE__ */ H(M, [["render", Q], ["__scopeId", "data-v-9c055dc4"]]);
+const ne = /* @__PURE__ */ P(q, [["render", W], ["__scopeId", "data-v-878ec27c"]]);
 export {
   ne as BentoToggle,
-  i as BentoToggleLabelPosition,
-  _ as BentoTogglePropClass
+  d as BentoToggleLabelPosition,
+  C as BentoTogglePropClass
 };
 //# sourceMappingURL=toggle.js.map

package/dist/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../vue2/src/components/toggle/toggle.types.ts","../../vue2/src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n\nexport enum BentoToggleLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\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 { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\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<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n                default: BentoToggleLabelPosition.BEFORE,\n                validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).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}`]:\n                    props.labelPosition === BentoToggleLabelPosition.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":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_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","_hoisted_1","openBlock","createElementBlock","normalizeClass","_ctx","_cache","$event","vModelCheckbox","createElementVNode","_hoisted_3","createBlock","_component_checkmark_small","createCommentVNode","_hoisted_4","_component_bento_typography"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../vue2/src/components/toggle/toggle.types.ts","../../vue2/src/components/toggle/toggle.vue"],"sourcesContent":["export enum BentoTogglePropClass {\n    LABEL_FIRST = 'label-first',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoToggleLabelPosition {\n    BEFORE = 'before',\n    AFTER = 'after',\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=\"hasSlot('default')\" class=\"b-toggle__label-container\">\n            <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" data-testid=\"inner-label\">\n                <slot></slot>\n            </bento-typography>\n            <bento-typography\n                v-if=\"hasSlot('default') && hasSlot('description')\"\n                :id=\"descriptionId\"\n                el=\"span\"\n                variant=\"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 { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types';\n    import { BentoTypography } from '@/components/typography';\n    import { generateUid } from '@/utils/ts/unique-id';\n    import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n    import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\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             * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n             */\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<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>,\n                default: BentoToggleLabelPosition.BEFORE,\n                validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).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, { attrs, slots, emit }) {\n            const hasSlot = useHasSlot(slots);\n\n            const toggleInput = ref(props.value);\n            const descriptionId: string = generateUid('toggle-description');\n\n            const defaultSlotValue = getSlotText(slots)('default');\n            const descriptionSlotValue = getSlotText(slots)('description');\n\n            useDefaultSlotValidator('bento-toggle', slots.default, slots.description);\n\n            const labelSlot = computed((): string => (hasSlot('default') ? getSlotText(slots)('default') : null));\n\n            const ariaLabelAttribute = ref(attrs['aria-label']);\n            const { ariaLabel } = toRefs(props);\n            const computedAriaLabel = useAriaLabel({\n                ariaLabel: ariaLabelAttribute.value as string,\n                // TODO: take this line away when the aria-label props is removed\n                label: ariaLabel,\n                defaultFallback: labelSlot,\n            });\n\n            const computedDescription = computed((): string | null => descriptionId ?? null);\n\n            const conditionalClasses = computed((): { [key: string]: boolean } => ({\n                [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]:\n                    props.labelPosition === BentoToggleLabelPosition.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                // Values\n                computedAriaLabel,\n                computedDescription,\n                defaultSlotValue,\n                descriptionSlotValue,\n                conditionalClasses,\n                descriptionId,\n\n                // Method\n                hasSlot,\n                onChange,\n                onClick,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./toggle.scss\" />\n"],"names":["BentoTogglePropClass","BentoTogglePropClass2","BentoToggleLabelPosition","BentoToggleLabelPosition2","_sfc_main","defineComponent","BentoTypography","CheckmarkSmall","value","props","attrs","slots","emit","hasSlot","useHasSlot","toggleInput","ref","descriptionId","generateUid","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","labelSlot","computed","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","computedDescription","conditionalClasses","onChange","event","onClick","watch","newValue","_hoisted_1","openBlock","createElementBlock","normalizeClass","_ctx","_cache","$event","vModelCheckbox","createElementVNode","_hoisted_3","createBlock","_component_checkmark_small","createCommentVNode","_hoisted_4","_component_bento_typography"],"mappings":"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"}

package/dist/typography.js

@@ -1,4 +1,4 @@
-import { B as p, a as e, c as r, b as y } from "./chunks/index.222d29b0.js";
+import { B as p, c as e, b as r, a as y } from "./chunks/index.89b00b94.js";
 export {
   p as BentoTypography,
   e as BentoTypographyElement,

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue3",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adyen/bento-vue3",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "description": "Adyen Bento Vue 3 components",
     "main": "dist/index.js",
     "module": "dist/index.js",
@@ -28,6 +28,8 @@
         "build:prod": "npm run clean:build && vite --config vite.production.config.ts build && npm run build:types && npm run build:webtypes",
         "build:types": "vue-tsc -p ./tsconfig.d.json && npm run copy-components-defs",
         "test": "TZ='Europe/Paris' vitest run",
+        "test:coverage": "npm run test -- --coverage",
+        "test:watch": "TZ='Europe/Paris' vitest watch",
         "copy-components-defs": "cp ../vue2/src/components.d.ts dist/@types",
         "build:webtypes": "vue-docgen-web-types --outFile=./dist/web-types.json",
         "component:create": "bento-cli component create",
@@ -50,7 +52,7 @@
         "url": "git@github.com:Adyen/bento.git"
     },
     "dependencies": {
-        "@adyen/bento-design-tokens": "1.3.0",
+        "@adyen/bento-design-tokens": "1.4.0",
         "@adyen/ui-assets-icons-16": "3.1.0",
         "@adyen/ui-assets-payment-method-icons": "5.2.0",
         "@codemirror/commands": "6.3.3",
@@ -70,17 +72,16 @@
     },
     "overrides": {
         "@codemirror/state": "6.4.0",
-        "@playwright/experimental-ct-vue": "1.30.0",
         "react": "16.14.0"
     },
     "devDependencies": {
-        "@playwright/experimental-ct-vue": "1.30.0",
-        "@storybook/addon-a11y": "7.0.4",
-        "@storybook/addon-essentials": "7.0.4",
-        "@storybook/addon-storysource": "7.0.4",
-        "@storybook/theming": "7.0.4",
-        "@storybook/vue3": "7.0.20",
-        "@storybook/vue3-vite": "7.0.20",
+        "@storybook/addon-a11y": "7.6.17",
+        "@storybook/addon-essentials": "7.6.17",
+        "@storybook/addon-storysource": "7.6.17",
+        "@storybook/core-common": "7.6.17",
+        "@storybook/core-server": "7.6.17",
+        "@storybook/theming": "7.6.17",
+        "@storybook/vue3": "7.6.17",
         "@testing-library/jest-dom": "5.16.5",
         "@testing-library/user-event": "14.4.3",
         "@testing-library/vue": "8.0.2",

package/dist/@types/packages/vue2/src/components/data-grid/composables/useCalculateBodyFitContentDynamicStyles/useCalculateBodyFitContentDynamicStyles.d.ts

@@ -1,2 +0,0 @@
-import { UseCalculateBodyFitContentDynamicStyles } from './useCalculateBodyFitContentDynamicStyles.types';
-export declare const useCalculateBodyFitContentDynamicStyles: UseCalculateBodyFitContentDynamicStyles;

package/dist/@types/packages/vue2/src/components/data-grid/composables/useCalculateBodyFitContentDynamicStyles/useCalculateBodyFitContentDynamicStyles.types.d.ts

@@ -1,8 +0,0 @@
-import { Ref } from "../../../../../../vue3/node_modules/vue";
-export interface UseCalculateBodyFitContentDynamicStylesOptions {
-    paginationRef: Ref<HTMLDivElement>;
-    fitContent: Ref<boolean>;
-}
-export type UseCalculateBodyFitContentDynamicStyles = (options: UseCalculateBodyFitContentDynamicStylesOptions) => {
-    height: Ref<string>;
-};

package/dist/@types/packages/vue2/src/components/filter-bar/components/base-filter/components/filter-bar-filter-button/filter-bar-filter-button.vue.d.ts

@@ -1,58 +0,0 @@
-declare const _default: import("../../../../../../../../vue3/node_modules/vue").DefineComponent<{
-    label: {
-        type: StringConstructor;
-        required: true;
-    };
-    appliedFiltersCount: {
-        type: NumberConstructor;
-        default: any;
-    };
-    hasChevron: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isFilterOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    conditionalClasses: import("../../../../../../../../vue3/node_modules/vue").ComputedRef<{
-        "b-filter-bar-filter-button--with-counter": number;
-        "b-filter-bar-filter-button--filter-open": boolean;
-    }>;
-    filterBarButtonRef: any;
-    onClick: () => void;
-}, unknown, {}, {}, import("../../../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, import("../../../../../../../../vue3/node_modules/vue").ComponentOptionsMixin, "click"[], "click", import("../../../../../../../../vue3/node_modules/vue").VNodeProps & import("../../../../../../../../vue3/node_modules/vue").AllowedComponentProps & import("../../../../../../../../vue3/node_modules/vue").ComponentCustomProps, Readonly<import("../../../../../../../../vue3/node_modules/vue").ExtractPropTypes<{
-    label: {
-        type: StringConstructor;
-        required: true;
-    };
-    appliedFiltersCount: {
-        type: NumberConstructor;
-        default: any;
-    };
-    hasChevron: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    isFilterOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & {
-    onClick?: (...args: any[]) => any;
-}, {
-    disabled: boolean;
-    isFilterOpen: boolean;
-    hasChevron: boolean;
-    appliedFiltersCount: number;
-}>;
-export default _default;

package/dist/@types/packages/vue2/src/components/filter-bar/components/base-filter/components/index.d.ts

@@ -1 +0,0 @@
-export { default as FilterBarFilterButton } from './filter-bar-filter-button/filter-bar-filter-button.vue';

package/dist/assets/button-actions.css

@@ -1 +0,0 @@
-.b-button-actions[data-v-18f16af9]{container-type:inline-size;flex-grow:1}.b-button-actions__container-wrapper[data-v-18f16af9]{display:flex;flex-direction:column;gap:var(--b-button-actions-vertical-stack-row-gap)}.b-button-actions__button-wrapper>*[data-v-18f16af9]{width:100%}@container (min-width: 250px){.b-button-actions--buttons-start[data-v-18f16af9]{flex-direction:row;justify-content:start}.b-button-actions--buttons-end[data-v-18f16af9]{column-gap:var(--b-button-actions-buttons-end-column-gap);flex-direction:row;justify-content:end}.b-button-actions--fill-container[data-v-18f16af9]{column-gap:var(--b-button-actions-fill-container-column-gap);display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column}.b-button-actions--space-between[data-v-18f16af9]{flex-direction:unset;justify-content:space-between}}

package/dist/assets/chevron-down.css

@@ -1 +0,0 @@
-svg[data-v-32f5f438]{display:inline-flex;flex-shrink:0}svg[data-v-32f5f438],svg *[data-v-32f5f438]{fill:currentcolor}svg[data-v-58c18347]{display:inline-flex;flex-shrink:0}svg[data-v-58c18347],svg *[data-v-58c18347]{fill:currentcolor}

package/dist/chunks/base-button.20be08da.js

@@ -1,111 +0,0 @@
-import { defineComponent as _, computed as y, ref as C, resolveComponent as m, openBlock as n, createElementBlock as i, normalizeClass as h, renderSlot as r, createCommentVNode as l, createBlock as g, withCtx as S } from "vue";
-import { B, a as k, b as L } from "./index.222d29b0.js";
-import { u as O } from "./use-has-slot.068222e6.js";
-import { _ as T } from "./_plugin-vue_export-helper.dad06003.js";
-import "../assets/base-button.css";
-var d = /* @__PURE__ */ ((t) => (t.DESTRUCTIVE = "critical", t.ICON_ONLY = "icon-only", t))(d || {}), e = /* @__PURE__ */ ((t) => (t.BLUR = "blur", t.CLICK = "click", t.FOCUS = "focus", t.KEYDOWN_ESC = "keydown.esc", t))(e || {});
-const $ = _({
-  name: "base-button",
-  components: { BentoTypography: B },
-  props: {
-    /**
-     * Disables button functionality
-     */
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Displays button as critical
-     */
-    critical: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The default behavior of the button.
-     * Possible values are: 'button', 'reset', 'submit'
-     */
-    type: {
-      type: String,
-      default: "button"
-    }
-  },
-  emits: [
-    e.CLICK,
-    e.FOCUS,
-    e.BLUR,
-    e.KEYDOWN_ESC
-  ],
-  setup(t, { slots: o, emit: p, attrs: u }) {
-    const c = y(() => {
-      var a;
-      return {
-        "aria-expanded": (a = u["aria-expanded"]) == null ? void 0 : a.toString()
-      };
-    }), b = C(null), s = y(() => ({
-      [`b-base-button--${d.DESTRUCTIVE}`]: t.critical,
-      [`b-base-button--${d.ICON_ONLY}`]: !o.default
-    }));
-    return {
-      // Enums
-      BentoTypographyElement: k,
-      BentoTypographyVariant: L,
-      // Values
-      ariaAttributes: c,
-      conditionalClasses: s,
-      // Methods
-      onClickButton: (a) => {
-        t.disabled || p(e.CLICK, a);
-      },
-      hasSlot: O(o),
-      // Refs
-      bentoBaseButtonRef: b
-    };
-  }
-});
-const E = ["disabled", "type", "aria-expanded"], I = {
-  key: 0,
-  class: "b-base-button__icon-left",
-  "data-testid": "icon-button-left"
-}, N = {
-  key: 2,
-  class: "b-base-button__icon-right",
-  "data-testid": "icon-button-right"
-};
-function R(t, o, p, u, c, b) {
-  const s = m("bento-typography");
-  return n(), i("button", {
-    ref: "bentoBaseButtonRef",
-    class: h(["b-base-button", t.conditionalClasses]),
-    disabled: t.disabled,
-    type: t.type,
-    "aria-expanded": t.ariaAttributes["aria-expanded"],
-    onClick: o[0] || (o[0] = (...f) => t.onClickButton && t.onClickButton(...f))
-  }, [
-    t.hasSlot("iconLeft") ? (n(), i("span", I, [
-      r(t.$slots, "iconLeft", {}, void 0, !0)
-    ])) : l("", !0),
-    t.hasSlot("default") ? (n(), g(s, {
-      key: 1,
-      el: t.BentoTypographyElement.SPAN,
-      variant: t.BentoTypographyVariant.BODY,
-      stronger: "",
-      class: "b-base-button__label"
-    }, {
-      default: S(() => [
-        r(t.$slots, "default", {}, void 0, !0)
-      ]),
-      _: 3
-    }, 8, ["el", "variant"])) : l("", !0),
-    t.hasSlot("iconRight") ? (n(), i("span", N, [
-      r(t.$slots, "iconRight", {}, void 0, !0)
-    ])) : l("", !0)
-  ], 10, E);
-}
-const V = /* @__PURE__ */ T($, [["render", R], ["__scopeId", "data-v-7a3f6d20"]]);
-export {
-  V as B,
-  e as a
-};
-//# sourceMappingURL=base-button.20be08da.js.map

package/dist/chunks/base-button.20be08da.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-button.20be08da.js","sources":["../../../vue2/src/components/internal/base-button/base-button.types.ts","../../../vue2/src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n    DESTRUCTIVE = 'critical',\n    ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n    BLUR = 'blur',\n    CLICK = 'click',\n    FOCUS = 'focus',\n    KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n    BUTTON = 'button',\n    RESET = 'reset',\n    SUBMIT = 'submit',\n}\n","<template>\n    <button\n        ref=\"bentoBaseButtonRef\"\n        class=\"b-base-button\"\n        :class=\"conditionalClasses\"\n        :disabled=\"disabled\"\n        :type=\"type\"\n        :aria-expanded=\"ariaAttributes['aria-expanded']\"\n        @click=\"onClickButton\"\n    >\n        <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography\n            v-if=\"hasSlot('default')\"\n            :el=\"BentoTypographyElement.SPAN\"\n            :variant=\"BentoTypographyVariant.BODY\"\n            stronger\n            class=\"b-base-button__label\"\n        >\n            <slot />\n        </bento-typography>\n        <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n            <slot name=\"iconRight\" />\n        </span>\n    </button>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n    import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n    import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { Booleanish } from '@/types';\n\n    /**\n     * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n     *\n     * * @example\n     * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n     * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n     *\n     * export default {\n     *      components: { BaseButton, YourImportedIcon },\n     *      props: {\n     *         text:\n     *      },\n     *      template: `\n     *          <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n     *             <template #iconLeft><your-imported-icon></template>\n     *             Button text\n     *             <template #iconRight><your-imported-icon></template>\n     *          </base-button>\n     *      `,\n     *      emits: [BentoButtonEvent.CLICK],\n     *      setup: (prps, { emit }) => {\n     *          const onClick = value => emit(BaseButtonEvent.CLICK, value);\n     *\n     *          return {\n     *              onClick,\n     *          };\n     *      }\n     * }\n     */\n    export default defineComponent({\n        name: 'base-button',\n        components: { BentoTypography },\n        props: {\n            /**\n             * Disables button functionality\n             */\n            disabled: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays button as critical\n             */\n            critical: {\n                type: Boolean,\n                default: false,\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        emits: [\n            BentoBaseButtonEvent.CLICK,\n            BentoBaseButtonEvent.FOCUS,\n            BentoBaseButtonEvent.BLUR,\n            BentoBaseButtonEvent.KEYDOWN_ESC,\n        ],\n        setup(props, { slots, emit, attrs }) {\n            const ariaAttributes = computed(() => ({\n                'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n            }));\n\n            const bentoBaseButtonRef = ref(null);\n\n            const conditionalClasses = computed(() => ({\n                [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n                [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n            }));\n\n            const onClickButton = (e: MouseEvent) => {\n                if (!props.disabled) {\n                    emit(BentoBaseButtonEvent.CLICK, e);\n                }\n            };\n\n            return {\n                // Enums\n                BentoTypographyElement,\n                BentoTypographyVariant,\n\n                // Values\n                ariaAttributes,\n                conditionalClasses,\n\n                // Methods\n                onClickButton,\n                hasSlot: useHasSlot(slots),\n\n                // Refs\n                bentoBaseButtonRef,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","useHasSlot","openBlock","createElementBlock","normalizeClass","_ctx","createCommentVNode","createBlock","_component_bento_typography","_hoisted_3"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;AC4DR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MAIU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAKM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,OAAA;AAAA,IACOJ,EAAA;AAAA,IACkBA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACzB,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACe;AAAA,KAAA,GAGtDC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MAC2B,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACD,EAAA;AASrE,WAAA;AAAA;AAAA,MAAO,wBAAAS;AAAA,MAEH,wBAAAC;AAAA;AAAA,MACA,gBAAAP;AAAA,MAGA,oBAAAK;AAAA;AAAA,MACA,eAbJ,CAAAG,MAAA;AACI,QAAAZ,EAAA,YACIE,EAAAP,EAAA,OAAAiB,CAAA;AAAA,MACJ;AAAA,MAaA,SAAAC,EAAAZ,CAAA;AAAA;AAAA,MACyB,oBAAAM;AAAA,IAGzB;AAAA,EACJ;AAER,CAAA;;EA3H2C,KAAA;AAAA,EAA2B,OAAA;AAAA;;EAY1B,KAAA;AAAA,EAA4B,OAAA;AAAA;;;;AAnB/D,SAAAO,EAAA,GAAAC,EAAA,UAAA;AAAA,IACG,KAAA;AAAA,IACP,OAAAC,EAAA,CAAA,iBAAAC,EAAA,kBAAA,CAAA;AAAA,IACU,UAAAA,EAAA;AAAA,IACG,MAAAA,EAAA;AAAA,IACR,iBAAAA,EAAA,eAAA,eAAA;AAAA;EAEa,GAAA;AAAA;;IAIT,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAOSD,EAAA,QAAA,SAAA,KAAAH,EAAA,GAAAK,EAAAC,GAAA;AAAA,MANiB,KAAA;AAAA,MAC/B,IAAAH,EAAA,uBAAA;AAAA,MACO,SAAAA,EAAA,uBAAA;AAAA,MACoB,UAAA;AAAA;;;;;;IAIpB,GAAA,GAAA,CAAA,MAAA,SAAA,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAAZD,EAAA,QAAA,WAAA,KAAAH,EAAA,GAAAC,EAAA,QAAAM,GAAA;AAAA;;;;;"}