@adyen/bento-vue2 0.0.7 → 0.0.8

package/README.md

@@ -30,7 +30,8 @@ In order to use the compoent via the `BentoVue` plugin, the following steps must
 
 1. Load the plugin globally in **Vue**
 2. Import the `font.css` file.
-3. Use the library defined components in your application
+3. Initialize `vue-i18n`.
+4. Use the library defined components in your application
 
 #### Load plugin and register components
 
@@ -54,22 +55,47 @@ NOTE: make sure the builder your are using (e.g. `webpack` , `vite`, etc...) is
 import '@adyen/bento-vue2/fonts.css';
 ```
 
+#### Initialize `vue-i18n`
+
+Some Bento components require translations for which the `vue-i18n` package was used so it has to be initialized like
+this:
+
+```diff
+import Vue from 'vue';
++ import VueI18n from 'vue-i18n';
++
++ Vue.use(VueI18n);
++
++ const i18n = new VueI18n({
++     locale: 'en-US',
++     fallbackLocale: 'en-US',
++     fallbackRoot: false,
++ });
+
+const app = new Vue({
+    el: '#app',
+    router,
+    template: '<router-view />',
++    i18n,
+});
+```
+
 #### Use the components
 
 Inside the `.vue` components of your application, you can simply use the available components:
 
 ```javascript
 <template>
-    <b-button @click="onClickHandler">
+    <bento-button @click="onClickHandler">
         {{ buttonLabel }}
-    </b-button>
+    </bento-button>
 </template>
 
 <script>
-    import { BButton } from '@adyen/bento-vue2'
+    import { BentoButton } from '@adyen/bento-vue2'
 
     export default {
-        components: { BButton },
+        components: { BentoButton },
         data: () => ({
             buttonLabel: 'Button text'
         }),

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

@@ -1,6 +1,6 @@
-export declare enum AdlAlertSeverityOption {
+export declare enum BentoAlertSeverityOption {
     WARNING = "warning",
-    ERROR = "error",
-    INFO = "info",
+    CRITICAL = "critical",
+    HIGHLIGHT = "highlight",
     SUCCESS = "success"
 }

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

@@ -1,34 +1,47 @@
 import { PropType } from 'vue';
-import { AdlAlertSeverityOption } from '@/components/alert/alert.types';
+import { BentoAlertSeverityOption } from '@/components/alert/alert.types';
 import { BentoButtonVariant } from '@/components/button/button.types';
+import { BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';
 declare const _default: import("vue").DefineComponent<{
     severity: {
-        type: PropType<AdlAlertSeverityOption>;
-        default: AdlAlertSeverityOption;
+        type: PropType<BentoAlertSeverityOption>;
+        default: BentoAlertSeverityOption;
     };
     closeButton: {
         type: BooleanConstructor;
         default: boolean;
     };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     alertConditionalClasses: import("vue").ComputedRef<{
-        [x: string]: AdlAlertSeverityOption;
+        [x: string]: boolean | BentoAlertSeverityOption;
+        'b-alert--inline': boolean;
     }>;
     computedRole: import("vue").ComputedRef<"alert" | "status">;
     onCloseButtonClick: () => void;
     BentoButtonVariant: typeof BentoButtonVariant;
-    AdlAlertSeverityOption: typeof AdlAlertSeverityOption;
+    BentoAlertSeverityOption: typeof BentoAlertSeverityOption;
+    BentoTypographyVariant: typeof BentoTypographyVariant;
+    BentoTypographyElement: typeof BentoTypographyElement;
 }, {}, {}, {}, 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;
+        type: PropType<BentoAlertSeverityOption>;
+        default: BentoAlertSeverityOption;
     };
     closeButton: {
         type: BooleanConstructor;
         default: boolean;
     };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
-    severity: AdlAlertSeverityOption;
+    inline: boolean;
+    severity: BentoAlertSeverityOption;
     closeButton: boolean;
 }>;
 export default _default;

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

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

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

@@ -23,17 +23,19 @@ declare const _default: import("vue").DefineComponent<{
         default: any;
     };
 }, {
-    computedAriaLabel: import("vue").ComputedRef<string>;
     ariaChecked: import("vue").ComputedRef<"mixed" | (boolean | "false" | "true")>;
-    isCheckboxGroup: import("vue").ComputedRef<boolean>;
-    isChecked: import("vue").ComputedRef<boolean>;
-    isIndeterminate: import("vue").ComputedRef<boolean>;
+    computedAriaLabel: import("vue").ComputedRef<string>;
     conditionalClass: import("vue").ComputedRef<{
         'b-checkbox--disabled': boolean;
     }>;
     conditionalClassOutline: import("vue").ComputedRef<{
         'b-checkbox__outline--unchecked': boolean;
     }>;
+    defaultSlot: import("vue").ComputedRef<string>;
+    descriptionSlot: import("vue").ComputedRef<string>;
+    isCheckboxGroup: import("vue").ComputedRef<boolean>;
+    isChecked: import("vue").ComputedRef<boolean>;
+    isIndeterminate: import("vue").ComputedRef<boolean>;
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
     onChange: (event: Event) => void;

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

@@ -0,0 +1,11 @@
+export declare enum BentoCheckboxGroupVariant {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export interface BentoCheckboxGroupItem {
+    value: string | number;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export type BentoCheckboxGroupItems = Array<BentoCheckboxGroupItem>;

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

@@ -0,0 +1,58 @@
+import { PropType } from 'vue';
+import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<BentoCheckboxGroupItems>;
+        required: true;
+    };
+    variant: {
+        type: PropType<BentoCheckboxGroupVariant>;
+        default: BentoCheckboxGroupVariant;
+        validator: (value: BentoCheckboxGroupVariant) => boolean;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    conditionalClasses: import("vue").ComputedRef<{
+        'b-checkbox-group--horizontal': boolean;
+    }>;
+    modelValue: import("vue").Ref<any[]>;
+    onInput: (value: any) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<BentoCheckboxGroupItems>;
+        required: true;
+    };
+    variant: {
+        type: PropType<BentoCheckboxGroupVariant>;
+        default: BentoCheckboxGroupVariant;
+        validator: (value: BentoCheckboxGroupVariant) => boolean;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    disabled: boolean;
+    variant: BentoCheckboxGroupVariant;
+    formId: string;
+}>;
+export default _default;

package/dist/@types/components/checkbox/components/checkbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BentoCheckboxGroup } from './checkbox-group.vue';
+export { BentoCheckboxGroupVariant } from './checkbox-group.types';

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

@@ -1,2 +1,3 @@
 export { default as BentoCheckbox } from './checkbox.vue';
 export * from './checkbox.types';
+export * from './components/checkbox-group';

package/dist/@types/components/data-grid/data-grid.types.d.ts

@@ -10,6 +10,7 @@ export interface BentoColumn {
     minWidth?: number;
     flex?: number;
     sortable?: boolean;
+    numeric?: boolean;
     padding?: {
         left?: boolean;
         right?: boolean;

package/dist/@types/components/data-grid/data-grid.vue.d.ts

@@ -30,6 +30,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridIsDataItemDisabledFn>;
         default: () => false;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     outline: {
         type: BooleanConstructor;
         default: boolean;
@@ -119,6 +123,7 @@ declare const _default: import("vue").DefineComponent<{
         minWidth?: number;
         flex?: number;
         sortable?: boolean;
+        numeric?: boolean;
         padding?: {
             left?: boolean;
             right?: boolean;
@@ -139,6 +144,7 @@ declare const _default: import("vue").DefineComponent<{
         'b-data-grid__column--sortable': boolean;
         'b-data-grid__column--padding-left-unset': boolean;
         'b-data-grid__column--padding-right-unset': boolean;
+        'b-data-grid__column--numeric': boolean;
     };
     conditionalRowClasses: (row: BentoDatagridDataItem) => {
         'b-data-grid__row--disabled': boolean;
@@ -147,6 +153,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: boolean;
         'b-data-grid__cell--padding-left-unset': boolean;
         'b-data-grid__cell--padding-right-unset': boolean;
+        'b-data-grid__cell--numeric': boolean;
         'b-data-grid__cell--condensed': boolean;
     };
     conditionalColumnSeperatorClasses: import("vue").ComputedRef<{
@@ -215,6 +222,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<BentoDatagridIsDataItemDisabledFn>;
         default: () => false;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     outline: {
         type: BooleanConstructor;
         default: boolean;
@@ -298,6 +309,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     outline: boolean;
+    loading: boolean;
     condensed: boolean;
     filters: import("../filter-bar").BentoFilterBarModel;
     getDataItemId: BentoDatagridGetDataItemIdFn;

package/dist/@types/components/{radio-button → radio-group/components/radio-button}/radio-button.vue.d.ts

@@ -16,12 +16,13 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     ariaLabel: ComputedRef<string>;
     isChecked: ComputedRef<boolean>;
-    shouldShowDescription: ComputedRef<boolean>;
-    shouldShowLabel: ComputedRef<boolean>;
-    shouldShowSubLabel: ComputedRef<boolean>;
+    shouldShowDescription: ComputedRef<string>;
+    shouldShowLabel: ComputedRef<string>;
+    shouldShowSubLabel: ComputedRef<string>;
     conditionalClass: ComputedRef<{
-        'b-input-radio--disabled': boolean;
+        'b-radio-button--disabled': boolean;
     }>;
+    radioButtonId: string;
     onClick: () => void;
     BentoTypographyVariant: typeof BentoTypographyVariant;
     BentoTypographyElement: typeof BentoTypographyElement;

package/dist/@types/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BentoRadioGroup } from './radio-group.vue';
+export { BentoRadioGroupVariant } from './radio-group.types';

package/dist/@types/components/radio-group/radio-group.types.d.ts

@@ -0,0 +1,11 @@
+export declare enum BentoRadioGroupVariant {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export interface BentoRadioGroupItem {
+    value: string | number;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export type BentoRadioGroupItems = Array<BentoRadioGroupItem>;

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

@@ -0,0 +1,58 @@
+import { PropType } from 'vue';
+import { BentoRadioGroupItems, BentoRadioGroupVariant } from './radio-group.types';
+declare const _default: import("vue").DefineComponent<{
+    items: {
+        type: PropType<BentoRadioGroupItems>;
+        required: true;
+    };
+    variant: {
+        type: PropType<BentoRadioGroupVariant>;
+        default: BentoRadioGroupVariant;
+        validator: (value: BentoRadioGroupVariant) => boolean;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    conditionalClasses: import("vue").ComputedRef<{
+        'b-radio-group--horizontal': boolean;
+    }>;
+    inputValue: import("vue").Ref<string | number>;
+    onInput: (value: any) => void;
+}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, "input"[], string, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<BentoRadioGroupItems>;
+        required: true;
+    };
+    variant: {
+        type: PropType<BentoRadioGroupVariant>;
+        default: BentoRadioGroupVariant;
+        validator: (value: BentoRadioGroupVariant) => boolean;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    disabled: boolean;
+    variant: BentoRadioGroupVariant;
+    formId: string;
+}>;
+export default _default;

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

@@ -2,7 +2,6 @@ import {
     // ADL
     // AdlAccordion,
     // AdlAccordionItem,
-    // AdlAlert,
     // AdlBadge,
     // AdlCard,
     // AdlCardImage,
@@ -16,10 +15,12 @@ import {
     // AdlTextarea,
 
     // Bento
+    BentoAlert,
     BentoButton,
     BentoButtonActions,
     BentoButtonGroup,
     BentoCheckbox,
+    BentoCheckboxGroup,
     BentoClickOutside,
     BentoDataGrid,
     BentoInputField,
@@ -28,7 +29,7 @@ import {
     BentoLoadingIndicator,
     BentoPagination,
     BentoPopover,
-    BentoRadioButton,
+    BentoRadioGroup,
     BentoStatus,
     BentoTag,
     BentoToggle,
@@ -40,7 +41,6 @@ declare module 'vue' {
         // ADL
         // AdlAccordion: typeof AdlAccordion;
         // AdlAccordionItem: typeof AdlAccordionItem;
-        // AdlAlert: typeof AdlAlert;
         // AdlBadge: typeof AdlBadge;
         // AdlCard: typeof AdlCard;
         // AdlCardImage: typeof AdlCardImage;
@@ -54,10 +54,12 @@ declare module 'vue' {
         // AdlTextarea: typeof AdlTextarea;
 
         // Bento
+        BentoAlert: typeof BentoAlert;
         BentoButton: typeof BentoButton;
         BentoButtonGroup: typeof BentoButtonGroup;
         BentoButtonActions: typeof BentoButtonActions;
         BentoCheckbox: typeof BentoCheckbox;
+        BentoCheckboxGroup: typeof BentoCheckboxGroup;
         BentoClickOutside: typeof BentoClickOutside;
         BentoDataGrid: typeof BentoDataGrid;
         BentoInputField: typeof BentoInputField;
@@ -66,7 +68,7 @@ declare module 'vue' {
         BentoLoadingIndicator: typeof BentoLoadingIndicator;
         BentoPagination: typeof BentoPagination;
         BentoPopover: typeof BentoPopover;
-        BentoRadioButton: typeof BentoRadioButton;
+        BentoRadioGroup: typeof BentoRadioGroup;
         BentoStatus: typeof BentoStatus;
         BentoTag: typeof BentoTag;
         BentoToggle: typeof BentoToggle;

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

@@ -1,4 +1,5 @@
 import BentoVue from './install';
+export * from './components/alert';
 export * from './components/button';
 export * from './components/data-grid';
 export * from './components/checkbox';
@@ -9,7 +10,7 @@ export * from './components/loading-indicator';
 export * from './components/link';
 export * from './components/pagination';
 export * from './components/popover';
-export * from './components/radio-button';
+export * from './components/radio-group';
 export * from './components/status';
 export * from './components/tag';
 export * from './components/toggle';