@adyen/bento-vue2 0.0.1

package/README.md

@@ -0,0 +1,115 @@
+# Bento Vue2 component library
+
+Welcome to the Bento Vue2 component library!
+
+The aim of this library is to centralize all general reusable components you will find across the Adyen Front-end
+architecture.
+
+Bento Vue contains foundational Vue 2.x UI components for shipping new features faster.
+
+## Getting started
+
+### Installation
+
+Bento Vue is available as an npm package
+
+```bash
+npm install @adyen/bento-vue2
+```
+
+### Adyen Design System Vue ecosystem
+
+| Project                      | Optional | Description                                                                    |
+| ---------------------------- | -------- | ------------------------------------------------------------------------------ |
+| `@adyen/bento-vue2`          | ❌       | A collection of Vue 2.x UI components                                          |
+| `@adyen/bento-design-tokens` | ✅       | List of Design Tokens used to define styles of the components and their themes |
+
+### Usage
+
+In order to use the compoent via the `BentoVue` plugin, the following steps must be reproduced:
+
+1. Load the plugin globally in **Vue**
+2. Use the library defined components in your application
+
+#### Load plugin and register components
+
+Import the Bento Vue plugin to inject the theme by default to Vue in order to allow the components to use the Design
+Token CSS variables:
+
+```javascript
+import BentoVue from '@adyen/bento-vue2';
+
+Vue.use(BentoVue);
+```
+
+#### Use the components
+
+Inside the `.vue` components of your application, you can simply use the available components:
+
+```javascript
+<template>
+    <b-button @click="onClickHandler">
+        {{ buttonLabel }}
+    </b-button>
+</template>
+
+<script>
+    import { BButton } from '@adyen/bento-vue2'
+
+    export default {
+        components: { BButton },
+        data: () => ({
+            buttonLabel: 'Button text'
+        }),
+        methods: {
+            onClickHandler() {
+                // click event handler logic
+            }
+        }
+    }
+</script>
+```
+
+### Alternate Theme (ADL 1.0)
+
+#### Set **legacy ADL** theme as default
+
+The Design System requires the Design token CSS variables to be set in order to apply the correspoding CSS styles. The
+only alternative style provided for now is the Legacy ADL theme (a.k.a. ADL 1.0). The **legacy ADL** theme variables
+must be present for the whole app.
+
+```javascript
+import BentoVue, { BentoTheme } from '@adyen/bento-vue2';
+
+Vue.use(BentoVue. { theme: BentoTheme.LEGACY });
+```
+
+### Setting themes without the Bento Plugin
+
+Currently supported classes are:
+
+-   Default: _no class needed_
+-   ADL 1.0: `.b-legacy-theme`.
+
+The theme class overrides the default Design Token CSS variables.
+
+To use an alternative theme, set the respective theme class in the main container inside the `App.vue` component.
+
+```javascript
+<template>
+    <transition name="navigation-fading" mode="out-in" appear>
+        <navigation-loading-indicator v-if="initialNavigation" />
+
+        <div v-else class="app b-legacy-theme">
+            <!-- Here goes your App code -->
+        </div>
+    </transition>
+</template>
+```
+
+Notice the class being added to the first `div` inside the `App.vue` component.
+
+## Support
+
+If you have a feature request, or spotted a bug or a technical problem, create a GitHub issue. For other questions,
+contact our [support team](https://www.adyen.help/hc/en-us/requests/new).

package/dist/@types/components/accordion/accordion.keys.d.ts

@@ -0,0 +1 @@
+export declare const ACCORDION_INJECTION_KEY: unique symbol;

package/dist/@types/components/accordion/accordion.types.d.ts

@@ -0,0 +1,24 @@
+export declare enum AdlAccordionVariant {
+    PRIMARY = "primary",
+    GHOST = "ghost"
+}
+export declare enum AdlAccordionPropClass {
+    GROUPED = "grouped",
+    SEPARATE = "separate"
+}
+export declare enum AdlAccordionCaretPosition {
+    LEFT = "left"
+}
+export interface AdlAccordionItem {
+    id: string;
+    opened: boolean;
+}
+export interface AdlAccordion {
+    caretRight: boolean;
+    grouped: boolean;
+    variant: AdlAccordionVariant;
+    registerItem: (opened?: boolean) => AdlAccordionItem;
+    getItem: (itemId: string) => AdlAccordionItem;
+    open: (itemId: string) => void;
+    close: (itemId: string) => void;
+}

package/dist/@types/components/accordion/accordion.vue.d.ts

@@ -0,0 +1,57 @@
+import { PropType } from 'vue';
+import { AdlAccordionVariant } from './accordion.types';
+declare const _default: import("vue").DefineComponent<{
+    simultaneouslyExpandAllTabs: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    grouped: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    caretRight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<AdlAccordionVariant>;
+        default: AdlAccordionVariant;
+        validator: (value: AdlAccordionVariant) => boolean;
+    };
+}, {}, {
+    accordion: {
+        items: any[];
+        simultaneouslyExpandAllTabs: boolean;
+        variant: AdlAccordionVariant;
+        grouped: boolean;
+        caretRight: boolean;
+    };
+}, {
+    conditionalClasses(): {
+        [x: string]: boolean;
+    };
+}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    simultaneouslyExpandAllTabs: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    grouped: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    caretRight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<AdlAccordionVariant>;
+        default: AdlAccordionVariant;
+        validator: (value: AdlAccordionVariant) => boolean;
+    };
+}>>, {
+    variant: AdlAccordionVariant;
+    simultaneouslyExpandAllTabs: boolean;
+    grouped: boolean;
+    caretRight: boolean;
+}>;
+export default _default;

package/dist/@types/components/accordion/components/accordion-item.vue.d.ts

@@ -0,0 +1,35 @@
+import { PropType } from 'vue';
+import { AdlAccordion } from '../accordion.types';
+declare const _default: import("vue").DefineComponent<{
+    accordion: {
+        type: PropType<AdlAccordion>;
+        default: any;
+    };
+}, {}, {
+    item: {
+        id: any;
+        opened: boolean;
+    };
+}, {
+    accordionProvider(): AdlAccordion;
+    showContent(): boolean;
+    conditionalClasses(): {
+        [key: string]: boolean;
+    };
+    shouldShowIcon(): boolean;
+    shouldShowTitle(): boolean;
+    shouldShowSubtitle(): boolean;
+    shouldShowPicture(): boolean;
+}, {
+    toggle(): void;
+    start(el: any): void;
+    end(el: any): void;
+}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    accordion: {
+        type: PropType<AdlAccordion>;
+        default: any;
+    };
+}>>, {
+    accordion: AdlAccordion;
+}>;
+export default _default;

package/dist/@types/components/accordion/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AdlAccordion } from './accordion.vue';
+export { default as AdlAccordionItem } from './components/accordion-item.vue';
+export { AdlAccordionVariant } from './accordion.types';

package/dist/@types/components/alert/alert.types.d.ts

@@ -0,0 +1,6 @@
+export declare enum AdlAlertSeverityOption {
+    WARNING = "warning",
+    ERROR = "error",
+    INFO = "info",
+    SUCCESS = "success"
+}

package/dist/@types/components/alert/alert.vue.d.ts

@@ -0,0 +1,34 @@
+import { PropType } from 'vue';
+import { AdlAlertSeverityOption } from '@/components/alert/alert.types';
+import { BentoButtonVariant } from '@/components/button/button.types';
+declare const _default: import("vue").DefineComponent<{
+    severity: {
+        type: PropType<AdlAlertSeverityOption>;
+        default: AdlAlertSeverityOption;
+    };
+    closeButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    alertConditionalClasses: import("vue").ComputedRef<{
+        [x: string]: AdlAlertSeverityOption;
+    }>;
+    computedRole: import("vue").ComputedRef<"alert" | "status">;
+    onCloseButtonClick: () => void;
+    BentoButtonVariant: typeof BentoButtonVariant;
+    AdlAlertSeverityOption: typeof AdlAlertSeverityOption;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "close-alert"[], string, Readonly<import("vue").ExtractPropTypes<{
+    severity: {
+        type: PropType<AdlAlertSeverityOption>;
+        default: AdlAlertSeverityOption;
+    };
+    closeButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    severity: AdlAlertSeverityOption;
+    closeButton: boolean;
+}>;
+export default _default;

package/dist/@types/components/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AdlAlert } from './alert.vue';
+export * from './alert.types';

package/dist/@types/components/badge/badge.types.d.ts

@@ -0,0 +1,7 @@
+export declare enum AdlBadgeVariant {
+    DEFAULT = "default",
+    ATTENTION = "attention",
+    WARNING = "warning",
+    CRITICAL = "critical",
+    SUCCESS = "success"
+}

package/dist/@types/components/badge/badge.vue.d.ts

@@ -0,0 +1,32 @@
+import { PropType } from 'vue';
+import { AdlBadgeVariant } from './badge.types';
+declare const _default: import("vue").DefineComponent<{
+    variant: {
+        type: PropType<AdlBadgeVariant>;
+        default: AdlBadgeVariant;
+        validator: (value: AdlBadgeVariant) => boolean;
+    };
+    testId: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, {}, {
+    ariaLabel(): string;
+    conditionalClasses(): {
+        [x: string]: boolean;
+    };
+}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    variant: {
+        type: PropType<AdlBadgeVariant>;
+        default: AdlBadgeVariant;
+        validator: (value: AdlBadgeVariant) => boolean;
+    };
+    testId: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    variant: AdlBadgeVariant;
+    testId: string;
+}>;
+export default _default;

package/dist/@types/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AdlBadge } from './badge.vue';
+export * from './badge.types';

package/dist/@types/components/button/button.types.d.ts

@@ -0,0 +1,11 @@
+export declare enum BentoButtonVariant {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary"
+}
+export declare enum BentoButtonPropClass {
+    CONDENSED = "condensed",
+    GROUPED = "grouped",
+    DESTRUCTIVE = "critical",
+    ICON_ONLY = "icon-only"
+}

package/dist/@types/components/button/button.vue.d.ts

@@ -0,0 +1,68 @@
+import { PropType } from 'vue';
+import { BentoButtonVariant } from './button.types';
+import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
+declare const _default: import("vue").DefineComponent<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    critical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<"button" | "reset" | "submit">;
+        default: string;
+    };
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<BentoButtonVariant>;
+        default: BentoButtonVariant;
+        validator: (value: BentoButtonVariant) => boolean;
+    };
+}, {}, {
+    BentoTypographyElement: typeof BentoTypographyElement;
+    BentoTypographyVariant: typeof BentoTypographyVariant;
+}, {
+    ariaLabel(): string | undefined;
+    conditionalClasses(): {
+        [x: string]: boolean;
+    };
+    variantClass(): {
+        [x: string]: boolean;
+    };
+}, {
+    onClickButton(): void;
+}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    critical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    type: {
+        type: PropType<"button" | "reset" | "submit">;
+        default: string;
+    };
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    variant: {
+        type: PropType<BentoButtonVariant>;
+        default: BentoButtonVariant;
+        validator: (value: BentoButtonVariant) => boolean;
+    };
+}>>, {
+    type: "button" | "reset" | "submit";
+    disabled: boolean;
+    condensed: boolean;
+    variant: BentoButtonVariant;
+    critical: boolean;
+}>;
+export default _default;

package/dist/@types/components/button/components/button-actions/button-actions.types.d.ts

@@ -0,0 +1,13 @@
+import { VueNodeElement } from '../../../../types/vue-node-element';
+export interface BentoButtonActionObject {
+    title: string;
+    event: (event: Event) => void;
+    icon?: VueNodeElement;
+}
+export type BentoButtonActionsList = Array<BentoButtonActionObject>;
+export declare enum BentoButtonActionsLayout {
+    BUTTONS_END = "buttons-end",
+    FILL_CONTAINER = "fill-container",
+    SPACE_BETWEEN = "space-between",
+    VERTICAL_STACK = "vertical-stack"
+}

package/dist/@types/components/button/components/button-actions/button-actions.vue.d.ts

@@ -0,0 +1,33 @@
+import { PropType } from 'vue';
+import { BentoButtonVariant } from '@/components/button';
+import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';
+declare const _default: import("vue").DefineComponent<{
+    actions: {
+        type: PropType<BentoButtonActionsList>;
+        required: true;
+    };
+    layout: {
+        type: PropType<BentoButtonActionsLayout>;
+        default: BentoButtonActionsLayout;
+        validator: (layout: BentoButtonActionsLayout) => boolean;
+    };
+}, {
+    conditionalClasses: import("vue").ComputedRef<{
+        [x: string]: boolean;
+    }>;
+    reversedActionsList: import("vue").ComputedRef<import("@/components/button").BentoButtonActionObject[]>;
+    generateButtonVariantByIndex: (actionIndex: any) => BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    actions: {
+        type: PropType<BentoButtonActionsList>;
+        required: true;
+    };
+    layout: {
+        type: PropType<BentoButtonActionsLayout>;
+        default: BentoButtonActionsLayout;
+        validator: (layout: BentoButtonActionsLayout) => boolean;
+    };
+}>>, {
+    layout: BentoButtonActionsLayout;
+}>;
+export default _default;

package/dist/@types/components/button/components/button-actions/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BentoButtonActions } from './button-actions.vue';
+export * from './button-actions.types';

package/dist/@types/components/button/components/button-group.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+    default: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/components/button/components/loading-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BentoLoadingButton } from './loading-button.vue';
+export * from './loading-button.types';

package/dist/@types/components/button/components/loading-button/loading-button.types.d.ts

@@ -0,0 +1,9 @@
+export declare enum BentoLoadingButtonState {
+    START = "start",
+    LOADING = "loading",
+    SUCCESS = "success",
+    FAIL = "fail"
+}
+export type BentoLoadingButtonIconState = Partial<{
+    [key in BentoLoadingButtonState]: string;
+}>;

package/dist/@types/components/button/components/loading-button/loading-button.vue.d.ts

@@ -0,0 +1,55 @@
+import { PropType } from 'vue';
+import { BentoButtonVariant } from '@/components/button';
+import { BentoLoadingButtonState } from './loading-button.types';
+declare const _default: import("vue").DefineComponent<{
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    state: {
+        type: PropType<BentoLoadingButtonState>;
+        default: BentoLoadingButtonState;
+        validator: (value: BentoLoadingButtonState) => boolean;
+    };
+    variant: {
+        type: PropType<BentoButtonVariant>;
+        default: BentoButtonVariant;
+        validator: (value: BentoButtonVariant) => boolean;
+    };
+}, {
+    BentoLoadingButtonState: typeof BentoLoadingButtonState;
+    onClick: () => void;
+    conditionalClasses: import("vue").ComputedRef<{
+        [x: string]: boolean;
+    }>;
+    isInverseLoadingIndicator: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    condensed: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    state: {
+        type: PropType<BentoLoadingButtonState>;
+        default: BentoLoadingButtonState;
+        validator: (value: BentoLoadingButtonState) => boolean;
+    };
+    variant: {
+        type: PropType<BentoButtonVariant>;
+        default: BentoButtonVariant;
+        validator: (value: BentoButtonVariant) => boolean;
+    };
+}>>, {
+    state: BentoLoadingButtonState;
+    disabled: boolean;
+    condensed: boolean;
+    variant: BentoButtonVariant;
+}>;
+export default _default;

package/dist/@types/components/button/index.d.ts

@@ -0,0 +1,5 @@
+export { default as BentoButton } from './button.vue';
+export * from './button.types';
+export { default as BentoButtonGroup } from './components/button-group.vue';
+export * from './components/button-actions';
+export * from './components/loading-button';

package/dist/@types/components/card/card.types.d.ts

@@ -0,0 +1,10 @@
+export declare enum AdlCardImagePosition {
+    TOP = "top",
+    LEFT = "left"
+}
+export declare enum AdlCardPropClass {
+    CLICKABLE = "clickable",
+    WITH_FOOTER = "with-footer",
+    WITH_IMAGE = "with-image",
+    WITH_LEFT_SIDE_IMAGE = "with-left-side-image"
+}

package/dist/@types/components/card/card.vue.d.ts

@@ -0,0 +1,44 @@
+import { PropType } from 'vue';
+import { AdlCardImagePosition } from './card.types';
+declare const _default: import("vue").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    subTitle: {
+        type: StringConstructor;
+        default: any;
+    };
+    imagePosition: {
+        type: PropType<AdlCardImagePosition>;
+        default: AdlCardImagePosition;
+    };
+}, {}, {}, {
+    conditionalClasses(): {
+        [key: string]: boolean;
+    };
+    isClickable(): boolean;
+    showBody(): boolean;
+    showFooter(): boolean;
+    showHeaderActions(): boolean;
+    showImage(): boolean;
+}, {
+    onClickCard(): void;
+}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    subTitle: {
+        type: StringConstructor;
+        default: any;
+    };
+    imagePosition: {
+        type: PropType<AdlCardImagePosition>;
+        default: AdlCardImagePosition;
+    };
+}>>, {
+    subTitle: string;
+    imagePosition: AdlCardImagePosition;
+}>;
+export default _default;

package/dist/@types/components/card/components/card-image/card-image.vue.d.ts

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/dist/@types/components/card/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AdlCard } from './card.vue';
+export { default as AdlCardImage } from './components/card-image/card-image.vue';
+export * from './card.types';

package/dist/@types/components/checkbox/checkbox.types.d.ts

@@ -0,0 +1,2 @@
+export type BentoMultiCheckboxType = Array<string | number>;
+export type BentoCheckboxType = boolean | BentoMultiCheckboxType;