@adyen/bento-vue2 1.2.0 → 1.3.0

package/README.md

@@ -1,34 +1,45 @@
-# Bento Vue2 component library
+# Bento Vue component library
 
-Welcome to the Bento Vue2 component library!
+Welcome to the Bento Vue 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.
+Bento Vue contains foundational Vue 2.x (and Vue 3.x) UI components for shipping new features faster.
 
 ## Getting started
 
 ### Installation
 
+#### Vue 2
+
 Bento Vue2 is available as an npm package
 
 ```bash
 npm install @adyen/bento-vue2
 ```
 
+#### Vue 3
+
+Bento Vue3 is available as an npm package
+
+```bash
+npm install @adyen/bento-vue3
+```
+
 ### Adyen Design System Vue ecosystem
 
 | Project                      | Optional | Description                                                                    |
 | ---------------------------- | -------- | ------------------------------------------------------------------------------ |
 | `@adyen/bento-vue2`          | ❌       | A collection of Vue 2.x UI components                                          |
+| `@adyen/bento-vue3`          | ❌       | A collection of Vue 3.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 compoents via the `BentoVue` plugin, the following steps must be reproduced:
 
-1. Load the plugin globally in **Vue**
+1. Load the plugin globally in **Vue** (and optional enable certain features).
 2. Import the `font.css` file.
 3. Initialize `vue-i18n`.
 4. Add changes to your [bundler](#Bundlers) configuration e.g. [webpack](#webpack) or [vite](#vite).
@@ -37,7 +48,12 @@ In order to use the compoents via the `BentoVue` plugin, the following steps mus
 #### Load plugin and register components
 
 To start using the Bento components, import the `BentoVue` plugin to inject the theme by default to Vue in order to
-allow the components to use the Design Token CSS variables:
+allow the components to use the Design Token CSS variables.
+
+You can enable the following feature by passing them the second argument to in the `.use` function.
+
+-   `withToast`: Will enable all toast functionality required by the `BentoToast` component.
+-   `withUtilityClasses`: Will inject the utility classes into the page.
 
 ##### Vue 2
 
@@ -46,7 +62,10 @@ import BentoVue from '@adyen/bento-vue2';
 
 Vue.use(BentoVue);
 // or, if you want to make use of the toast component we provide
-Vue.use(BentoVue, { withToast: true }); // this line installs Bento and includes the toast component
+Vue.use(BentoVue, {
+    withToast: true, // this line installs Bento and includes the toast component
+    withUtilityClasses: true, // this line injects the utility classes into the page
+});
 ```
 
 ##### Vue 3
@@ -55,7 +74,10 @@ Vue.use(BentoVue, { withToast: true }); // this line installs Bento and includes
 import BentoVue from '@adyen/bento-vue3';
 
 const app = createApp()
-    .use(BentoVue, { withToast: true }) // this line installs Bento and includes the toast component
+    .use(BentoVue, {
+        withToast: true, // this line installs Bento and includes the toast component
+        withUtilityClasses: true, // this line injects the utility classes into the page
+    })
     .mount('#app');
 ```
 
@@ -85,42 +107,42 @@ initialization the following lines of code must be included:
 
 ##### Vue 2
 
-```diff
+```typescript
 import Vue from 'vue';
-+ import VueI18n from 'vue-i18n';
-+
-+ Vue.use(VueI18n);
-+
-+ const i18n = new VueI18n({
-+     locale: 'en-US',
-+     fallbackLocale: 'en-US',
-+     fallbackRoot: false,
-+ });
+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,
+    i18n,
 });
 ```
 
 ##### Vue 3
 
-```diff
+```typescript
 import BentoVue from '@adyen/bento-vue3';
-+ import VueI18n from 'vue-i18n';
+import VueI18n from 'vue-i18n';
 
-+ const i18n = createI18n({
-+    locale: 'en-US',
-+    fallbackLocale: 'en-US',
-+    fallbackRoot: false,
-+    allowComposition: true,
-+ });
+const i18n = createI18n({
+    locale: 'en-US',
+    fallbackLocale: 'en-US',
+    fallbackRoot: false,
+    allowComposition: true,
+});
 
 const app = createApp()
     .use(BentoVue, { withToast: true }) // this line installs Bento
-+   .use(i18n) // this line vue-i18n
+    .use(i18n) // this line vue-i18n
     .mount('#app');
 ```
 
@@ -316,8 +338,17 @@ are:
 -   Default: _no class needed_
 -   ADL: `.b-legacy-theme`.
 
-To use an alternative theme in your application, set the respective theme class in the main container inside the
-`App.vue` component.
+To use an alternative theme in your application, you will need to:
+
+1.  Import the the css file into your app.
+
+e.g. add the ADL theme.
+
+```typescript
+import '@adyen/bento-design-tokens/dist/css/bento/variables-legacy.css';
+```
+
+2.  set the respective theme class in the main container inside the `App.vue` component.
 
 ```html
 <template>

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

@@ -28,6 +28,10 @@ import {
     BentoDropdownCurrency,
     BentoDropdownPaymentMethod,
     BentoFilterBar,
+    BentoFormLayout,
+    BentoFormLayoutFieldTip,
+    BentoFormLayoutGroup,
+    BentoFormLayoutTitle,
     BentoHeader,
     BentoInfoIcon,
     BentoInputField,
@@ -42,6 +46,8 @@ import {
     BentoRadioGroup,
     BentoSearchBar,
     BentoSegmentedControl,
+    BentoSidepanel,
+    BentoSidepanelPage,
     BentoStatus,
     BentoStructuredList,
     BentoStructuredListItem,
@@ -91,6 +97,10 @@ declare module 'vue' {
         BentoDropdownAvatar: typeof BentoDropdownAvatar;
         BentoDropdownCountry: typeof BentoDropdownCountry;
         BentoFilterBar: typeof BentoFilterBar;
+        BentoFormLayout: typeof BentoFormLayout;
+        BentoFormLayoutFieldTip: typeof BentoFormLayoutFieldTip;
+        BentoFormLayoutGroup: typeof BentoFormLayoutGroup;
+        BentoFormLayoutTitle: typeof BentoFormLayoutTitle;
         BentoHeader: typeof BentoHeader;
         BentoInfoIcon: typeof BentoInfoIcon;
         BentoDropdownCurrency: typeof BentoDropdownCurrency;
@@ -107,6 +117,8 @@ declare module 'vue' {
         BentoRadioGroup: typeof BentoRadioGroup;
         BentoSearchBar: typeof BentoSearchBar;
         BentoSegmentedControl: typeof BentoSegmentedControl;
+        BentoSidepanel: typeof BentoSidepanel;
+        BentoSidepanelPage: typeof BentoSidepanelPage;
         BentoStatus: typeof BentoStatus;
         BentoStructuredList: typeof BentoStructuredList;
         BentoStructuredListItem: typeof BentoStructuredListItem;

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

@@ -11,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     state: {
-        type: PropType<BentoLoadingButtonState>;
+        type: PropType<"start" | "success" | "loading" | BentoLoadingButtonState | "fail">;
         default: BentoLoadingButtonState;
         validator: (value: BentoLoadingButtonState) => boolean;
     };
@@ -37,7 +37,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     state: {
-        type: PropType<BentoLoadingButtonState>;
+        type: PropType<"start" | "success" | "loading" | BentoLoadingButtonState | "fail">;
         default: BentoLoadingButtonState;
         validator: (value: BentoLoadingButtonState) => boolean;
     };
@@ -50,6 +50,6 @@ declare const _default: import("vue").DefineComponent<{
     condensed: boolean;
     disabled: boolean;
     variant: "primary" | "secondary" | "tertiary" | BentoButtonVariant;
-    state: BentoLoadingButtonState;
+    state: "start" | "success" | "loading" | BentoLoadingButtonState | "fail";
 }>;
 export default _default;

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

@@ -2,10 +2,38 @@ import { PropType } from 'vue';
 import { BentoCheckboxGroupItems, BentoCheckboxGroupVariant } from './checkbox-group.types';
 import { BentoCheckboxEvent } from '../../checkbox.types';
 declare const _default: import("vue").DefineComponent<{
+    description: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorMessage: {
+        type: StringConstructor;
+        default: any;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    hasError: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLabel: {
+        type: BooleanConstructor;
+        default: any;
+    };
     items: {
         type: PropType<BentoCheckboxGroupItems>;
         required: true;
     };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
     modelValue: {
         type: {
             (arrayLength: number): (string | number)[];
@@ -23,16 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         default: () => any[];
     };
-    variant: {
-        type: PropType<"vertical" | "horizontal" | BentoCheckboxGroupVariant>;
-        default: BentoCheckboxGroupVariant;
-        validator: (value: BentoCheckboxGroupVariant) => boolean;
-    };
-    formId: {
-        type: StringConstructor;
-        default: any;
-    };
-    disabled: {
+    optional: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -40,20 +59,22 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    hasError: {
+    required: {
         type: BooleanConstructor;
         default: boolean;
     };
-    errorMessage: {
+    tooltipText: {
         type: StringConstructor;
         default: any;
     };
-    label: {
-        type: StringConstructor;
-        required: true;
+    variant: {
+        type: PropType<"vertical" | "horizontal" | BentoCheckboxGroupVariant>;
+        default: BentoCheckboxGroupVariant;
+        validator: (value: BentoCheckboxGroupVariant) => boolean;
     };
 }, {
     errorId: string;
+    isReadOnly: import("vue").ComputedRef<boolean>;
     shouldShowGroupError: import("vue").ComputedRef<boolean>;
     shouldShowGroupErrorMessage: import("vue").ComputedRef<boolean>;
     conditionalClasses: import("vue").ComputedRef<{
@@ -62,10 +83,38 @@ declare const _default: import("vue").DefineComponent<{
     inputValue: import("vue").Ref<(string | number)[]>;
     onInput: (value: any) => void;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoCheckboxEvent[], string, Readonly<import("vue").ExtractPropTypes<{
+    description: {
+        type: StringConstructor;
+        default: any;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    errorMessage: {
+        type: StringConstructor;
+        default: any;
+    };
+    formId: {
+        type: StringConstructor;
+        default: any;
+    };
+    hasError: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideLabel: {
+        type: BooleanConstructor;
+        default: any;
+    };
     items: {
         type: PropType<BentoCheckboxGroupItems>;
         required: true;
     };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
     modelValue: {
         type: {
             (arrayLength: number): (string | number)[];
@@ -83,16 +132,7 @@ declare const _default: import("vue").DefineComponent<{
         };
         default: () => any[];
     };
-    variant: {
-        type: PropType<"vertical" | "horizontal" | BentoCheckboxGroupVariant>;
-        default: BentoCheckboxGroupVariant;
-        validator: (value: BentoCheckboxGroupVariant) => boolean;
-    };
-    formId: {
-        type: StringConstructor;
-        default: any;
-    };
-    disabled: {
+    optional: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -100,21 +140,27 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    hasError: {
+    required: {
         type: BooleanConstructor;
         default: boolean;
     };
-    errorMessage: {
+    tooltipText: {
         type: StringConstructor;
         default: any;
     };
-    label: {
-        type: StringConstructor;
-        required: true;
+    variant: {
+        type: PropType<"vertical" | "horizontal" | BentoCheckboxGroupVariant>;
+        default: BentoCheckboxGroupVariant;
+        validator: (value: BentoCheckboxGroupVariant) => boolean;
     };
 }>>, {
+    description: string;
     disabled: boolean;
     variant: "vertical" | "horizontal" | BentoCheckboxGroupVariant;
+    required: boolean;
+    tooltipText: string;
+    optional: boolean;
+    hideLabel: boolean;
     errorMessage: string;
     readonly: boolean;
     modelValue: (string | number)[];

package/dist/@types/packages/vue2/src/components/country/composables/index.d.ts

@@ -1,4 +1,3 @@
 export { useCountryCapital } from './useCountryCapital/useCountryCapital';
-export { useCountryFlag } from './useCountryFlag';
 export { useCountryName } from './useCountryName/useCountryName';
 export { useCountryPhoneCode } from './useCountryPhoneCode/useCountryPhoneCode';

package/dist/@types/packages/vue2/src/components/country/country.vue.d.ts

@@ -17,9 +17,8 @@ declare const _default: import("vue").DefineComponent<{
         validator: (value: BentoCountryVariant) => boolean;
     };
 }, {
-    flagIconSrc: import("vue").Ref<string>;
     countryName: import("vue").ComputedRef<any>;
-    countryLabel: import("vue").Ref<any>;
+    countryLabel: import("vue").Ref<string>;
     BentoTypographyElement: typeof BentoTypographyElement;
 }, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
     code: {

package/dist/@types/packages/vue2/src/components/date-picker/date-picker.vue.d.ts

@@ -31,6 +31,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -49,6 +53,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     isDateIncorrect: Ref<boolean>;
     isDatePickerOpen: Ref<boolean>;
+    isReadOnly: import("vue").ComputedRef<boolean>;
     dateErrorText: import("vue").ComputedRef<string>;
     labelId: string;
     descriptionId: string;
@@ -113,6 +118,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -129,7 +138,8 @@ declare const _default: import("vue").DefineComponent<{
     required: boolean;
     isDateDisabled: import("../internal").CalendarIsDateDisabled;
     firstDayOfWeek: import("../internal").CalendarFirstDayOfWeek;
-    errorMessage: string;
     optional: boolean;
+    errorMessage: string;
+    readonly: boolean;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/date-range-picker/date-range-picker.vue.d.ts

@@ -36,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -67,6 +71,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     isDateIncorrect: import("vue").Ref<boolean>;
     isDateRangePickerOpen: import("vue").Ref<boolean>;
+    isReadOnly: import("vue").ComputedRef<boolean>;
     labelId: string;
     descriptionId: string;
     dateErrorId: string;
@@ -138,6 +143,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     required: {
         type: BooleanConstructor;
         default: boolean;
@@ -170,8 +179,9 @@ declare const _default: import("vue").DefineComponent<{
     firstDayOfWeek: import("../internal").CalendarFirstDayOfWeek;
     maxRange: number;
     numberOfMonths: number;
-    errorMessage: string;
     optional: boolean;
+    errorMessage: string;
+    readonly: boolean;
     allowTimeInput: boolean;
     quickSelectRanges: DateRangePickerCalendarRangeSelectorItems;
 }>;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue.d.ts

@@ -193,6 +193,7 @@ declare const _default: import("vue").DefineComponent<{
     ariaLabel: string;
     loading: boolean;
     placeholder: string;
+    optional: boolean;
     errorMessage: string;
     size: "DropdownInputDefault" | "DropdownInputSmall" | import("../../../dropdown.types").BentoDropdownSize;
     items: BentoAvatarListboxOptions;
@@ -203,6 +204,5 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;
-    optional: boolean;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue.d.ts

@@ -202,6 +202,7 @@ declare const _default: import("vue").DefineComponent<{
     ariaLabel: string;
     loading: boolean;
     placeholder: string;
+    optional: boolean;
     errorMessage: string;
     size: "DropdownInputDefault" | "DropdownInputSmall" | import("../../../dropdown.types").BentoDropdownSize;
     items: BentoCountryListboxOptions;
@@ -212,6 +213,5 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;
-    optional: boolean;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue.d.ts

@@ -188,6 +188,7 @@ declare const _default: import("vue").DefineComponent<{
     ariaLabel: string;
     loading: boolean;
     placeholder: string;
+    optional: boolean;
     errorMessage: string;
     size: "DropdownInputDefault" | "DropdownInputSmall" | import("../../../dropdown.types").BentoDropdownSize;
     items: BentoCurrencyListboxOptions;
@@ -198,6 +199,5 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;
-    optional: boolean;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue.d.ts

@@ -188,6 +188,7 @@ declare const _default: import("vue").DefineComponent<{
     ariaLabel: string;
     loading: boolean;
     placeholder: string;
+    optional: boolean;
     errorMessage: string;
     size: "DropdownInputDefault" | "DropdownInputSmall" | import("../../../dropdown.types").BentoDropdownSize;
     items: BentoPaymentMethodListboxOptions;
@@ -198,6 +199,5 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;
-    optional: boolean;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue.d.ts

@@ -193,6 +193,7 @@ declare const _default: import("vue").DefineComponent<{
     ariaLabel: string;
     loading: boolean;
     placeholder: string;
+    optional: boolean;
     errorMessage: string;
     size: "DropdownInputDefault" | "DropdownInputSmall" | import("../../../dropdown.types").BentoDropdownSize;
     items: BentoTagListboxOptions;
@@ -203,6 +204,5 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;
-    optional: boolean;
 }>;
 export default _default;

package/dist/@types/packages/vue2/src/components/dropdown/dropdown.vue.d.ts

@@ -96,6 +96,7 @@ declare const _default: import("vue").DefineComponent<{
     dropdownOptionsContainerId: string;
     filteredItems: import("vue").ComputedRef<any>;
     isSearching: import("vue").ComputedRef<boolean>;
+    isReadOnly: import("vue").ComputedRef<boolean>;
     searchTerm: import("vue").Ref<string>;
     labelId: string;
     descriptionId: string;
@@ -238,6 +239,7 @@ declare const _default: import("vue").DefineComponent<{
     ariaLabel: string;
     loading: boolean;
     placeholder: string;
+    optional: boolean;
     errorMessage: string;
     size: "DropdownInputDefault" | "DropdownInputSmall" | BentoDropdownSize;
     items: BentoListboxOptions;
@@ -248,6 +250,5 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     dynamicFiltering: boolean;
     showSlotContentInMultiple: boolean;
-    optional: boolean;
 }>;
 export default _default;

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

@@ -184,11 +184,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     BentoTypographyElement: typeof BentoTypographyElement;
     BentoTypographyVariant: typeof BentoTypographyVariant;
-    clearFilter: () => void;
     onDateSelected: (selectedDate: BentoDateRangePickerValue) => void;
     openFilter: () => void;
     updateFilter: () => void;
-    resetFilter: () => void;
     onDatePickerRangeError: () => void;
     onDatePickerRangeFormDateInputUpdate: (dateFormDate: DateRangePickerCalendarFormData) => void;
     onDateInputSelected: (selectedDate: BentoDateRangePickerValue) => void;

package/dist/@types/packages/vue2/src/components/form-layout/components/form-layout-field-tip/form-layout-field-tip.vue.d.ts

@@ -0,0 +1,10 @@
+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;
+    message: (_: {}) => any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/@types/packages/vue2/src/components/form-layout/components/form-layout-field-tip/index.d.ts

@@ -0,0 +1 @@
+export { default as BentoFormLayoutFieldTip } from './form-layout-field-tip.vue';

package/dist/@types/packages/vue2/src/components/form-layout/components/form-layout-group/composable/use-form-layout-group-percentage.d.ts

@@ -0,0 +1,3 @@
+import { Ref } from 'vue';
+import { BentoLayoutGroupProportions } from '../form-layout-group.types';
+export declare const useFormLayoutGroupPercentage: (layoutProp: Ref<BentoLayoutGroupProportions>, formLayoutGroupRef: Ref<HTMLElement>) => void;

package/dist/@types/packages/vue2/src/components/form-layout/components/form-layout-group/form-layout-group.types.d.ts

@@ -0,0 +1 @@
+export type BentoLayoutGroupProportions = '50-50' | '25-75' | '75-25' | '33-66' | '66-33' | '25' | '33' | '50' | '100';

package/dist/@types/packages/vue2/src/components/form-layout/components/form-layout-group/form-layout-group.vue.d.ts

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

package/dist/@types/packages/vue2/src/components/form-layout/components/form-layout-group/index.d.ts

@@ -0,0 +1 @@
+export { default as BentoFormLayoutGroup } from './form-layout-group.vue';