@adyen/bento-vue2 1.99.0 → 1.100.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@adyen/bento-vue2",
-  "version": "1.99.0",
+  "version": "1.100.0",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2109,79 +2109,6 @@
             "symbol": "default"
           }
         },
-        {
-          "name": "bento-range-filter",
-          "description": "Range filter used in the filter-bar component.",
-          "attributes": [
-            {
-              "name": "disabled",
-              "description": "Disables the filter from being interacted with.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "defaultValue",
-              "description": "Default value of the filter to reset to.",
-              "value": {
-                "kind": "expression",
-                "type": "Array<string>"
-              },
-              "default": "null"
-            },
-            {
-              "name": "field",
-              "required": true,
-              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "label",
-              "required": true,
-              "description": "Label text to be displayed",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              }
-            },
-            {
-              "name": "value",
-              "description": "Current value of the filter",
-              "value": {
-                "kind": "expression",
-                "type": "Array<string>"
-              },
-              "default": "() => ['', '']"
-            },
-            {
-              "name": "onlySlot",
-              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "options",
-              "description": "List of options that are needed to setup the filter\nAvailable options:\n  - tooltipPosition: The position of the tooltip attached to the filter button\n  - tooltipText: The content of the tooltip attached to the filter button",
-              "value": {
-                "kind": "expression",
-                "type": "BentoRangeFilterOptions"
-              },
-              "default": "undefined"
-            }
-          ],
-          "source": {
-            "module": "./src/components/filter-bar/components/range-filter/range-filter.vue",
-            "symbol": "default"
-          }
-        },
         {
           "name": "bento-select-avatar-filter",
           "description": "The Select Avatar filter displays a listbox of avatar items\npassed in the \"options.listboxItems\" property.",
@@ -2427,6 +2354,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "button-actions-dom-events-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/button/components/button-actions/__tests__/button-actions-dom-events-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "button-actions-icons-stub",
           "description": "",
@@ -9060,12 +8995,12 @@
             {
               "name": "containerSizeLayout",
               "required": false,
-              "description": "Defines the layout (multi-line or one-line) to be used in the filter bar for different\ncontainer sizes:\n- Large (>=700px): Always multi-line\n- Medium (>=430px & <700px)\n- Small (<430px)",
+              "description": "Defines the layout (multi-line or one-line) to be used in the filter bar for different\ncontainer sizes:\n- Large (>=700px)\n- Medium (>=430px & <700px)\n- Small (<430px)",
               "value": {
                 "kind": "expression",
                 "type": "BentoFilterBarContainerSizeLayout"
               },
-              "default": "() => ({\n    medium: 'one-line',\n    small: 'multi-line',\n})"
+              "default": "null"
             },
             {
               "name": "search",
@@ -9517,6 +9452,14 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "filter-bar-default-example",
+          "description": "",
+          "source": {
+            "module": "./src/components/filter-bar/__tests__/filter-bar-default-example.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "filter-bar-toast-stub",
           "description": "",
@@ -15163,6 +15106,84 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "range-filter",
+          "description": "",
+          "attributes": [
+            {
+              "name": "disabled",
+              "required": false,
+              "description": "Disables the filter from being interacted with.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "defaultValue",
+              "required": false,
+              "description": "Default value of the filter to reset to.",
+              "value": {
+                "kind": "expression",
+                "type": "union"
+              },
+              "default": "null"
+            },
+            {
+              "name": "field",
+              "required": true,
+              "description": "Filter name/key referencing the actual property name in the data set.\nShould be unique per filter bar.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "label",
+              "required": true,
+              "description": "Label text to be displayed",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "value",
+              "required": false,
+              "description": "Current value of the filter",
+              "value": {
+                "kind": "expression",
+                "type": "Array"
+              },
+              "default": "() => ['', '']"
+            },
+            {
+              "name": "onlySlot",
+              "required": false,
+              "description": "Renders the base filter's slot content only - leaving out the button and the popover.\nUsed for the allFiltersModal component.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "options",
+              "required": false,
+              "description": "List of options that are needed to setup the filter",
+              "value": {
+                "kind": "expression",
+                "type": "BentoRangeFilterOptions"
+              },
+              "default": "undefined"
+            }
+          ],
+          "source": {
+            "module": "./src/components/filter-bar/components/range-filter/range-filter.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "reset-stepper-example",
           "description": "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/bento-vue2",
-  "version": "1.99.0",
+  "version": "1.100.0",
   "description": "Adyen Bento Vue2 components",
   "type": "module",
   "main": "dist/index.js",
@@ -51,7 +51,7 @@
     "unified": "11.0.5",
     "uuid": "11.1.1",
     "vue-demi": "0.14.10",
-    "@adyen/bento-design-tokens": "1.99.0"
+    "@adyen/bento-design-tokens": "1.100.0"
   },
   "dependenciesMeta": {
     "@adyen/bento-vue-i18n-demi": {
@@ -135,9 +135,9 @@
     "@adyen/bento-cli": "0.10.5",
     "@adyen/bento-core": "0.0.1",
     "@adyen/bento-vue-i18n-demi": "0.1.0",
-    "@adyen/eslint-plugin-bento": "2.16.0",
+    "@adyen/eslint-plugin-bento": "2.17.0",
     "@adyen/ui-assets-icons-16": "7.9.4",
-    "@adyen/ui-assets-payment-method-icons": "11.0.1"
+    "@adyen/ui-assets-payment-method-icons": "12.0.0"
   },
   "optionalDependencies": {
     "vue-router": "~3.6"

package/dist/chunks/button.DITA6YtS.js

@@ -1,110 +0,0 @@
-import { defineComponent as y, useAttrs as m, useSlots as v, computed as i } from "vue";
-import { B as S } from "./typography.C8lPlsbD.js";
-import { u as g } from "./use-has-slot.C9lQZ6nz.js";
-import { B as C, a as E } from "./link.BpuCRgok.js";
-import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/button.css";
-var r = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e.TERTIARY = "tertiary", e.TERTIARY_WITH_BACKGROUND = "tertiary-with-background", e))(r || {}), s = /* @__PURE__ */ ((e) => (e.CONDENSED = "condensed", e.DESTRUCTIVE = "critical", e.DISABLED = "disabled", e.ICON_ONLY = "icon-only", e.INVERSE = "inverse", e))(s || {});
-const R = {
-  name: "bento-button"
-}, I = /* @__PURE__ */ y({
-  ...R,
-  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: r.PRIMARY,
-      validator: (e) => Object.values(r).includes(e)
-    }
-  },
-  emits: ["blur", "click", "focus", "keydown.esc"],
-  setup(e, { emit: a }) {
-    const t = e, n = m(), l = v(), c = g(l), d = i(() => (t == null ? void 0 : t.link) !== void 0 ? t.disabled ? "span" : C : "button"), u = i(() => {
-      var o, b;
-      return {
-        "aria-controls": (o = n["aria-controls"]) == null ? void 0 : o.toString(),
-        "aria-expanded": (b = n["aria-expanded"]) == null ? void 0 : b.toString()
-      };
-    }), f = i(
-      () => d.value === "button" ? {
-        ...u.value,
-        disabled: t.disabled,
-        type: t.type
-      } : {
-        ...t.link,
-        disableTypography: !0,
-        variant: E.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": t.disabled ? "true" : void 0,
-        role: t.disabled ? "link" : void 0
-      }
-    ), p = i(() => ({
-      [`b-button--${t.variant}${t.critical ? `-${s.DESTRUCTIVE}` : ""}`]: !0
-    })), _ = i(() => ({
-      ...p.value,
-      [`b-button--${s.CONDENSED}`]: t.condensed,
-      [`b-button--${s.DISABLED}`]: t.disabled,
-      [`b-button--${s.INVERSE}`]: t.inverse
-    }));
-    return { __sfc: !0, props: t, emit: a, attrs: n, slots: l, hasSlot: c, componentType: d, ariaAttributes: u, componentProps: f, variantClass: p, conditionalClasses: _, getIconOnlyClass: () => ({
-      [`b-button--${s.ICON_ONLY}`]: !c("default")
-    }), onClickButton: (o) => {
-      t.disabled ? (o.preventDefault(), o.stopPropagation()) : a("click", o);
-    }, BentoTypography: S };
-  }
-});
-var T = function() {
-  var a = this, t = a._self._c, n = a._self._setupProxy;
-  return t(n.componentType, a._b({ tag: "component", staticClass: "b-button", class: { ...n.conditionalClasses, ...n.getIconOnlyClass() }, on: { "!click": function(l) {
-    return n.onClickButton.apply(null, arguments);
-  } } }, "component", n.componentProps, !1), [n.hasSlot("iconLeft") ? t("span", { staticClass: "b-button__icon-left", attrs: { "data-testid": "icon-button-left", "aria-hidden": n.hasSlot("default") ? "true" : null } }, [a._t("iconLeft")], 2) : a._e(), n.hasSlot("default") ? t(n.BentoTypography, { staticClass: "b-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [a._t("default")], 2) : a._e(), n.hasSlot("iconRight") ? t("span", { staticClass: "b-button__icon-right", attrs: { "data-testid": "icon-button-right", "aria-hidden": n.hasSlot("default") ? "true" : null } }, [a._t("iconRight")], 2) : a._e()], 1);
-}, k = [], D = /* @__PURE__ */ h(
-  I,
-  T,
-  k,
-  !1,
-  null,
-  "03ea9e1e"
-);
-const x = D.exports;
-export {
-  x as B,
-  s as a,
-  r as b
-};
-//# sourceMappingURL=button.DITA6YtS.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.DITA6YtS.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 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 props.disabled ? '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                  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': props.disabled ? 'true' : undefined,\n                  role: props.disabled ? '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}`]: props.disabled,\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 (!props.disabled) {\n            emit('click', e);\n        } else {\n            e.preventDefault();\n            e.stopPropagation();\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","componentType","computed","props","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;ACwLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjGAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIC,KAAA,gBAAAA,EAAA,UAAA,SAMIA,EAAA,WAAA,SAAAC,IAEJ,QAAO,GAEXC,IAAAH,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAI,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,QACe,kBAAAC,IAAAZ,EAAA,eAAA,MAAA,gBAAAY,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAN;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAI,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAM,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAN,EAAA,WAAA,SAAA;AAAA,QAMiC,MAAAA,EAAA,WAAA,SAAA;AAAA,MACX;AAAA,IACpC,GAGVO,IAAAR,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAC,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAX,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGmB,IAAAT,EAAA,OAAA;AAAA,MAA2C,GAAAQ,EAAA;AAAA,MACvB,CAAA,aAAAlB,EAAA,SAAA,EAAA,GAAAW,EAAA;AAAA,MACuC,CAAA,aAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACD,CAAA,aAAAX,EAAA,OAAA,EAAA,GAAAW,EAAA;AAAA,IACD,EAAA;6LAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAX,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAa,MAAA;AACI,MAAAT,EAAA,YAGIS,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAC,EAAA,SAAAD,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;"}