@adyen/bento-vue2 1.51.0 → 1.52.0

package/dist/chunks/button-actions-with-menu.B5gcSgRQ.js

@@ -1,112 +0,0 @@
-import { defineComponent as _, computed as a, toRef as m, ref as c, provide as l } from "vue";
-import { M as f, B as v } from "./menu.CzbkunwY.js";
-import { a as A } from "./popover.3sHql3nd.js";
-import { f as b, B } from "./button-actions.GhdYBSwt.js";
-import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/button-actions-with-menu.css";
-const y = {}, N = /* @__PURE__ */ _({
-  ...y,
-  __name: "button-actions-with-menu",
-  props: {
-    /**
-         * List of actions that will be used to render the buttons.
-         * First element in the list will be rendered as "primary".
-         * All elements after the first will be rendered as "secondary".
-         *
-         * Each object in the list should have a `title`, an `event` and
-         * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.
-         *
-         * `title`: Button's text.
-         *
-         * `event`: Event triggered when clicking the Button.
-         *
-         * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.
-         *
-         * @see BentoButton for a list of all the other props supported by each button action.
-         *
-         * ```
-         * [{
-         *   title: 'Primary',
-         *   event: () => { ... },
-         *   icon: FourPeopleIcon,
-         *   link: {
-                    variant: 'default',
-                    external: true,
-                    to: 'https://www.adyen.com/'
-                },
-         * }, {
-         *   title: 'Secondary',
-         *   event: () => { ... }
-         *   disabled: true,
-         *   variant: 'primary',
-         *   critical: true
-         * }]
-         * ```
-         */
-    actions: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.
-     */
-    disableResponsiveBehavior: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.
-     */
-    displayedActions: {
-      type: Number,
-      default: void 0
-    },
-    /**
-     * Set inverse color scheme to buttons and menu
-     */
-    inverse: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The position of where the menu should open.
-     */
-    menuPosition: {
-      type: String,
-      default: "bottom-start",
-      validator: (s) => Object.values(A).includes(s)
-    }
-  },
-  setup(s) {
-    const t = s, n = a(() => t.actions.slice(0, t.displayedActions)), e = m(t, "inverse"), r = c(null), u = c(null), i = c(!1);
-    l(f, e), t.disableResponsiveBehavior || l(b, { buttonActionsWithMenu: r, menu: u, stackButtons: i });
-    const p = a(() => ({
-      "b-button-actions-with-menu__container-wrapper--stacked-buttons": i.value
-    })), d = a(
-      () => t.displayedActions !== void 0 && t.displayedActions < t.actions.length ? t.actions.slice(t.displayedActions, t.actions.length).map((o) => ({
-        text: o.title,
-        handler: o.event,
-        icon: o.icon,
-        critical: o.critical,
-        disabled: o.disabled
-      })) : []
-    );
-    return { __sfc: !0, props: t, computedActions: n, inverseRef: e, buttonActionsWithMenu: r, menu: u, stackButtons: i, conditionalClasses: p, computedMenuActions: d, BentoMenu: v, BentoButtonActions: B };
-  }
-});
-var M = function() {
-  var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n("div", { staticClass: "b-button-actions-with-menu" }, [n("div", { ref: "buttonActionsWithMenu", staticClass: "b-button-actions-with-menu__container-wrapper", class: e.conditionalClasses, attrs: { role: "group" } }, [n(e.BentoButtonActions, { attrs: { actions: e.computedActions, inverse: t.inverse } }), e.computedMenuActions.length ? n(e.BentoMenu, { ref: "menu", attrs: { data: e.computedMenuActions, "menu-position": t.menuPosition } }) : t._e()], 1)]);
-}, C = [], E = /* @__PURE__ */ h(
-  N,
-  M,
-  C,
-  !1,
-  null,
-  "439f0892"
-);
-const g = E.exports;
-export {
-  g as B
-};
-//# sourceMappingURL=button-actions-with-menu.B5gcSgRQ.js.map

package/dist/chunks/button-actions-with-menu.B5gcSgRQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions-with-menu.B5gcSgRQ.js","sources":["../../src/components/internal/button-actions-with-menu/button-actions-with-menu.vue"],"sourcesContent":["<template>\n    <div class=\"b-button-actions-with-menu\">\n        <div\n            ref=\"buttonActionsWithMenu\"\n            role=\"group\"\n            class=\"b-button-actions-with-menu__container-wrapper\"\n            :class=\"conditionalClasses\"\n        >\n            <bento-button-actions :actions=\"computedActions\" :inverse=\"inverse\" />\n            <bento-menu\n                v-if=\"computedMenuActions.length\"\n                ref=\"menu\"\n                :data=\"computedMenuActions\"\n                :menu-position=\"menuPosition\"\n            />\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, ref, toRef } from 'vue';\n    import BentoMenu from '@/components/menu/menu.vue';\n    import { BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types';\n    import { BentoButtonActions, BentoButtonActionsList } from '@/components/button';\n    import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys';\n    import { BentoPopoverPositions } from '@/components/popover';\n    import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys';\n\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n    const props = defineProps({\n        /**\n             * List of actions that will be used to render the buttons.\n             * First element in the list will be rendered as \"primary\".\n             * All elements after the first will be rendered as \"secondary\".\n             *\n             * Each object in the list should have a `title`, an `event` and\n             * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n             *\n             * `title`: Button's text.\n             *\n             * `event`: Event triggered when clicking the Button.\n             *\n             * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * @see BentoButton for a list of all the other props supported by each button action.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon,\n             *   link: {\n                        variant: 'default',\n                        external: true,\n                        to: 'https://www.adyen.com/'\n                    },\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             *   disabled: true,\n             *   variant: 'primary',\n             *   critical: true\n             * }]\n             * ```\n             */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        disableResponsiveBehavior: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component.\n         */\n        displayedActions: {\n            type: Number,\n            default: undefined,\n        },\n\n        /**\n         * Set inverse color scheme to buttons and menu\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * The position of where the menu should open.\n         */\n        menuPosition: {\n            type: String as PropType<BentoPopoverPositions | `${BentoPopoverPositions}`>,\n            default: 'bottom-start',\n            validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value),\n        },\n    });\n\n    const computedActions = computed(() => props.actions.slice(0, props.displayedActions));\n    const inverseRef = toRef(props, 'inverse');\n    const buttonActionsWithMenu = ref<HTMLDivElement>(null);\n    const menu = ref<HTMLDivElement>(null);\n    const stackButtons = ref(false);\n\n    provide(MENU_INVERSE_INJECTION_KEY, inverseRef);\n\n    if (!props.disableResponsiveBehavior) {\n        provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons });\n    }\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const computedMenuActions = computed(() =>\n        props.displayedActions !== undefined && props.displayedActions < props.actions.length\n            ? (props.actions.slice(props.displayedActions, props.actions.length).map(el => ({\n                  text: el.title,\n                  handler: el.event,\n                  icon: el.icon,\n                  critical: el.critical,\n                  disabled: el.disabled,\n              })) as BentoMenuItem[])\n            : []\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * An internal button actions component with the option to display some of the actions in a menu.\n     *\n     * @example\n     * <button-actions-with-menu\n     *      :actions=\"[\n     *        title: 'Primary',\n     *        event: () => { ... },\n     *        icon: FourPeopleIcon,\n     *        link: {\n     *                   variant: 'default',\n     *                  external: true,\n     *                   to: 'https://www.adyen.com/'\n     *              },\n     * }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: BentoButtonVariant.PRIMARY,\n     *   critical: true\n     * }]\n     *      :displayedActions=\"2\"\n     * />\n     */\n\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions-with-menu.scss\" />\n"],"names":["__default__","computedActions","computed","props","inverseRef","toRef","buttonActionsWithMenu","ref","menu","stackButtons","provide","MENU_INVERSE_INJECTION_KEY","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","conditionalClasses","computedMenuActions","el"],"mappings":";;;;;;AAsLI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAvDAC,IAAAC,EAAA,MAAAC,EAAA,QAAA,MAAA,GAAAA,EAAA,gBAAA,CAAA,GACAC,IAAAC,EAAAF,GAAA,SAAA,GACAG,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AAEA,IAAAG,EAAAC,GAAAP,CAAA,GAEAD,EAAA,6BACIO,EAAAE,GAAA,EAAA,uBAAAN,GAAA,MAAAE,GAAA,cAAAC,EAAA,CAAA;AAGJ,UAAAI,IAAAX,EAAA,OAAA;AAAA,MAA2C,kEAAAO,EAAA;AAAA,IAC0C,EAAA,GAGrFK,IAAAZ;AAAA,MAA4B,MAAAC,EAAA,qBAAA,UAAAA,EAAA,mBAAAA,EAAA,QAAA,SAAAA,EAAA,QAAA,MAAAA,EAAA,kBAAAA,EAAA,QAAA,MAAA,EAAA,IAAA,CAAAY,OAAA;AAAA,QAE4D,MAAAA,EAAA;AAAA,QACjE,SAAAA,EAAA;AAAA,QACG,MAAAA,EAAA;AAAA,QACH,UAAAA,EAAA;AAAA,QACI,UAAAA,EAAA;AAAA,MACA,EAAA,IAAA,CAAA;AAAA,IAEhB;;;;;;;;;;;;;;;;"}