@adyen/bento-vue2 1.7.0 → 1.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/@types/components.d.ts +2 -0
- package/dist/@types/packages/core/src/components/button/button.types.d.ts +1 -1
- package/dist/@types/packages/vue2/src/components/action-bar/action-bar.vue.d.ts +11 -0
- package/dist/@types/packages/vue2/src/components/button/components/button-actions/button-actions.types.d.ts +1 -1
- package/dist/@types/packages/vue2/src/components/button/components/button-actions/button-actions.vue.d.ts +7 -2
- package/dist/@types/packages/vue2/src/components/button/components/loading-button/loading-button.vue.d.ts +28 -18
- package/dist/@types/packages/vue2/src/components/checkbox/checkbox.vue.d.ts +25 -0
- package/dist/@types/packages/vue2/src/components/data-grid/data-grid.vue.d.ts +13 -1
- package/dist/@types/packages/vue2/src/components/date-picker/date-picker.vue.d.ts +9 -0
- package/dist/@types/packages/vue2/src/components/date-range-picker/components/date-range-picker-calendar/date-range-picker-calendar.types.d.ts +6 -2
- package/dist/@types/packages/vue2/src/components/date-range-picker/components/date-range-picker-calendar/date-range-picker-calendar.vue.d.ts +153 -12
- package/dist/@types/packages/vue2/src/components/date-range-picker/date-range-picker.types.d.ts +1 -1
- package/dist/@types/packages/vue2/src/components/date-range-picker/date-range-picker.vue.d.ts +18 -0
- package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue.d.ts +320 -21
- package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-avatar/dropdown-avatar.vue.d.ts +9 -0
- package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-country/dropdown-country.vue.d.ts +9 -0
- package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-currency/dropdown-currency.vue.d.ts +9 -0
- package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-payment-method/dropdown-payment-method.vue.d.ts +9 -0
- package/dist/@types/packages/vue2/src/components/dropdown/components/variants/dropdown-tag/dropdown-tag.vue.d.ts +9 -0
- package/dist/@types/packages/vue2/src/components/dropdown/dropdown.vue.d.ts +12 -3
- package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue.d.ts +30 -24
- package/dist/@types/packages/vue2/src/components/filter-bar/components/date-range-filter/date-range-filter.vue.d.ts +1 -0
- package/dist/@types/packages/vue2/src/components/input-field/input-field.vue.d.ts +9 -0
- package/dist/@types/packages/vue2/src/components/internal/calendar/calendar.types.d.ts +12 -0
- package/dist/@types/packages/vue2/src/components/internal/calendar/calendar.vue.d.ts +11 -1
- package/dist/@types/packages/vue2/src/components/internal/calendar/components/calendar-month/composables/granular-min-max-date.d.ts +2 -0
- package/dist/@types/packages/vue2/src/components/internal/calendar/components/calendar-month/composables/granular-min-max-date.types.d.ts +13 -0
- package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-adjustments.d.ts +2 -0
- package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-adjustments.types.d.ts +14 -0
- package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-memory.d.ts +2 -0
- package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-memory.types.d.ts +22 -0
- package/dist/@types/packages/vue2/src/components/internal/controls-group/controls-group.vue.d.ts +1 -1
- package/dist/@types/packages/vue2/src/components/internal/field-label/field-label.vue.d.ts +48 -0
- package/dist/@types/packages/vue2/src/components/internal/field-label/index.d.ts +1 -0
- package/dist/@types/packages/vue2/src/components/internal/grid-layout/grid-layout.vue.d.ts +11 -0
- package/dist/@types/packages/vue2/src/components/internal/index.d.ts +1 -0
- package/dist/@types/packages/vue2/src/components/modal/components/base-modal/base-modal.vue.d.ts +2 -1
- package/dist/@types/packages/vue2/src/components/popover/popover.keys.d.ts +1 -0
- package/dist/@types/packages/vue2/src/components/popover/popover.vue.d.ts +16 -22
- package/dist/@types/packages/vue2/src/components/structured-list/components/structered-list-item/structured-list-item.vue.d.ts +1 -0
- package/dist/@types/packages/vue2/src/components/structured-list/structured-list.keys.d.ts +1 -0
- package/dist/@types/packages/vue2/src/components/structured-list/structured-list.vue.d.ts +20 -1
- package/dist/@types/packages/vue2/src/components/summary-grid/summary-grid.types.d.ts +4 -4
- package/dist/@types/packages/vue2/src/components/textarea/textarea.vue.d.ts +9 -0
- package/dist/@types/packages/vue2/src/components/timeline/components/timeline-item/timeline-item.vue.d.ts +19 -2
- package/dist/@types/packages/vue2/src/components/timeline/timeline.types.d.ts +4 -2
- package/dist/@types/packages/vue2/src/components/timeline/timeline.vue.d.ts +18 -2
- package/dist/@types/packages/vue2/src/index.d.ts +1 -0
- package/dist/accordion.js +1 -1
- package/dist/action-bar.js +112 -93
- package/dist/action-bar.js.map +1 -1
- package/dist/alert.js +1 -1
- package/dist/assets/base-modal.css +1 -1
- package/dist/assets/calendar.css +1 -1
- package/dist/assets/checkbox.css +1 -1
- package/dist/assets/controls-group.css +1 -1
- package/dist/assets/dropdown.css +1 -1
- package/dist/assets/field-label.css +1 -0
- package/dist/assets/grid-layout.css +1 -1
- package/dist/assets/index.css +1 -1
- package/dist/assets/index11.css +1 -1
- package/dist/assets/index12.css +1 -1
- package/dist/assets/index13.css +1 -1
- package/dist/assets/index14.css +1 -1
- package/dist/assets/index15.css +1 -1
- package/dist/assets/index16.css +1 -1
- package/dist/assets/index17.css +1 -1
- package/dist/assets/index18.css +1 -1
- package/dist/assets/index19.css +1 -1
- package/dist/assets/index2.css +1 -1
- package/dist/assets/index20.css +1 -1
- package/dist/assets/index21.css +1 -1
- package/dist/assets/index22.css +1 -1
- package/dist/assets/index23.css +1 -1
- package/dist/assets/index24.css +1 -1
- package/dist/assets/index25.css +1 -1
- package/dist/assets/index26.css +1 -1
- package/dist/assets/index27.css +1 -1
- package/dist/assets/index28.css +1 -1
- package/dist/assets/index29.css +1 -1
- package/dist/assets/index3.css +1 -1
- package/dist/assets/index30.css +1 -1
- package/dist/assets/index32.css +1 -1
- package/dist/assets/index33.css +1 -1
- package/dist/assets/index34.css +1 -1
- package/dist/assets/index35.css +1 -1
- package/dist/assets/index36.css +1 -1
- package/dist/assets/index37.css +1 -1
- package/dist/assets/index38.css +1 -1
- package/dist/assets/index39.css +1 -1
- package/dist/assets/index4.css +1 -1
- package/dist/assets/index40.css +1 -1
- package/dist/assets/index41.css +1 -1
- package/dist/assets/index42.css +1 -1
- package/dist/assets/index43.css +1 -1
- package/dist/assets/index44.css +1 -1
- package/dist/assets/index45.css +1 -1
- package/dist/assets/index5.css +1 -1
- package/dist/assets/index6.css +1 -1
- package/dist/assets/index7.css +1 -1
- package/dist/assets/index8.css +1 -1
- package/dist/assets/index9.css +1 -1
- package/dist/assets/loading-button.css +1 -1
- package/dist/avatar-image.js +1 -1
- package/dist/badge.js +1 -1
- package/dist/button.js +38 -35
- package/dist/button.js.map +1 -1
- package/dist/card.js +1 -1
- package/dist/checkbox.js +5 -5
- package/dist/chunks/{base-modal.88e7b9d4.js → base-modal.31634fe8.js} +60 -49
- package/dist/chunks/base-modal.31634fe8.js.map +1 -0
- package/dist/chunks/{button-actions-with-menu.a5413243.js → button-actions-with-menu.5faea13e.js} +5 -5
- package/dist/chunks/{button-actions-with-menu.a5413243.js.map → button-actions-with-menu.5faea13e.js.map} +1 -1
- package/dist/chunks/button.e09d5980.js.map +1 -1
- package/dist/chunks/calendar.47e9e755.js +959 -0
- package/dist/chunks/calendar.47e9e755.js.map +1 -0
- package/dist/chunks/{checkbox.5343e28e.js → checkbox.2277450e.js} +67 -56
- package/dist/chunks/checkbox.2277450e.js.map +1 -0
- package/dist/chunks/controls-group.6c5bfccd.js +79 -0
- package/dist/chunks/controls-group.6c5bfccd.js.map +1 -0
- package/dist/chunks/{copy.346eadb1.js → copy.a85c2e9f.js} +3 -3
- package/dist/chunks/{copy.346eadb1.js.map → copy.a85c2e9f.js.map} +1 -1
- package/dist/chunks/{dropdown.f1253a54.js → dropdown.ce937989.js} +200 -196
- package/dist/chunks/dropdown.ce937989.js.map +1 -0
- package/dist/chunks/field-label.330edb60.js +107 -0
- package/dist/chunks/field-label.330edb60.js.map +1 -0
- package/dist/chunks/{grid-layout.b7e0d964.js → grid-layout.a806acb2.js} +36 -27
- package/dist/chunks/grid-layout.a806acb2.js.map +1 -0
- package/dist/chunks/index.210d2169.js +290 -0
- package/dist/chunks/index.210d2169.js.map +1 -0
- package/dist/chunks/{index.8ac70774.js → index.66503760.js} +3 -3
- package/dist/chunks/{index.8ac70774.js.map → index.66503760.js.map} +1 -1
- package/dist/chunks/{index.2625175a.js → index.86fc63ca.js} +30 -28
- package/dist/chunks/{index.2625175a.js.map → index.86fc63ca.js.map} +1 -1
- package/dist/chunks/{index.a201f750.js → index.89942d3a.js} +4 -5
- package/dist/chunks/{index.a201f750.js.map → index.89942d3a.js.map} +1 -1
- package/dist/chunks/index.a5de5242.js +130 -0
- package/dist/chunks/index.a5de5242.js.map +1 -0
- package/dist/chunks/index.a99ffd48.js +634 -0
- package/dist/chunks/index.a99ffd48.js.map +1 -0
- package/dist/chunks/index.d80206ed.js +10 -0
- package/dist/chunks/index.d80206ed.js.map +1 -0
- package/dist/chunks/{index.37283390.js → index.d8bd7596.js} +96 -99
- package/dist/chunks/{index.37283390.js.map → index.d8bd7596.js.map} +1 -1
- package/dist/chunks/{listbox-option-tag.6a09e8e2.js → listbox-option-tag.97af47fc.js} +6 -7
- package/dist/chunks/{listbox-option-tag.6a09e8e2.js.map → listbox-option-tag.97af47fc.js.map} +1 -1
- package/dist/chunks/{listbox.73c38f38.js → listbox.d039b178.js} +5 -6
- package/dist/chunks/{listbox.73c38f38.js.map → listbox.d039b178.js.map} +1 -1
- package/dist/chunks/loading-button.9a9cbbad.js +89 -0
- package/dist/chunks/loading-button.9a9cbbad.js.map +1 -0
- package/dist/chunks/{tooltip.104e5fac.js → tooltip.ecd0f707.js} +2 -2
- package/dist/chunks/{tooltip.104e5fac.js.map → tooltip.ecd0f707.js.map} +1 -1
- package/dist/code-snippet.js +4 -4
- package/dist/code-snippet.js.map +1 -1
- package/dist/country.js +1 -1
- package/dist/data-grid.js +563 -541
- package/dist/data-grid.js.map +1 -1
- package/dist/date-picker.js +83 -80
- package/dist/date-picker.js.map +1 -1
- package/dist/date-range-picker.js +2 -2
- package/dist/divider.js +1 -1
- package/dist/dropdown.js +3 -3
- package/dist/empty-state.js +1 -1
- package/dist/filter-bar.js +13 -12
- package/dist/filter-bar.js.map +1 -1
- package/dist/focus-trap.js +1 -1
- package/dist/form-layout.js +1 -1
- package/dist/header.js +63 -67
- package/dist/header.js.map +1 -1
- package/dist/index.js +211 -209
- package/dist/index.js.map +1 -1
- package/dist/info-icon.js +3 -3
- package/dist/input-field.js +57 -55
- package/dist/input-field.js.map +1 -1
- package/dist/internal.js +13 -12
- package/dist/link.js +1 -1
- package/dist/loading-indicator.js +1 -1
- package/dist/menu.js +1 -1
- package/dist/modal.js +2 -2
- package/dist/modal.js.map +1 -1
- package/dist/pagination.js +2 -2
- package/dist/payment-method.js +1 -1
- package/dist/popover.js +3 -305
- package/dist/popover.js.map +1 -1
- package/dist/popper-container.js +1 -1
- package/dist/radio-group.js +3 -3
- package/dist/search-bar.js +2 -2
- package/dist/segmented-control.js +2 -2
- package/dist/sidepanel.js +2 -2
- package/dist/status.js +1 -1
- package/dist/stepper.js +1 -1
- package/dist/structured-list.js +1 -1
- package/dist/summary-grid.js +3 -3
- package/dist/summary-grid.js.map +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tag.js +2 -2
- package/dist/textarea.js +59 -56
- package/dist/textarea.js.map +1 -1
- package/dist/timeline.js +226 -173
- package/dist/timeline.js.map +1 -1
- package/dist/toast.js +1 -1
- package/dist/toggle.js +1 -1
- package/dist/tutorial.js +7 -7
- package/dist/web-types.json +519 -393
- package/package.json +3 -3
- package/dist/@types/packages/vue2/src/components/modal/components/base-modal/__mocks__/base-modal.vue.d.ts +0 -118
- package/dist/assets/error-message.css +0 -1
- package/dist/chunks/base-modal.88e7b9d4.js.map +0 -1
- package/dist/chunks/calendar.24d0ac04.js +0 -821
- package/dist/chunks/calendar.24d0ac04.js.map +0 -1
- package/dist/chunks/checkbox.5343e28e.js.map +0 -1
- package/dist/chunks/controls-group.2a21bd83.js +0 -87
- package/dist/chunks/controls-group.2a21bd83.js.map +0 -1
- package/dist/chunks/dropdown.f1253a54.js.map +0 -1
- package/dist/chunks/error-message.8302a46c.js +0 -47
- package/dist/chunks/error-message.8302a46c.js.map +0 -1
- package/dist/chunks/grid-layout.b7e0d964.js.map +0 -1
- package/dist/chunks/index.d6b5f5e1.js +0 -112
- package/dist/chunks/index.d6b5f5e1.js.map +0 -1
- package/dist/chunks/index.e566354f.js +0 -532
- package/dist/chunks/index.e566354f.js.map +0 -1
- package/dist/chunks/loading-button.c65682d6.js +0 -86
- package/dist/chunks/loading-button.c65682d6.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adyen/bento-vue2",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "Adyen Bento Vue2 components",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"url": "git@github.com:Adyen/bento.git"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@adyen/bento-design-tokens": "1.
|
|
61
|
-
"@adyen/ui-assets-icons-16": "
|
|
60
|
+
"@adyen/bento-design-tokens": "1.8.0",
|
|
61
|
+
"@adyen/ui-assets-icons-16": "3.1.0",
|
|
62
62
|
"@adyen/ui-assets-payment-method-icons": "5.2.0",
|
|
63
63
|
"@codemirror/commands": "6.3.3",
|
|
64
64
|
"@codemirror/language-data": "6.4.0",
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { PropType } from 'vue';
|
|
2
|
-
import { BentoModalColumnLayoutVariant, BentoModalEvent, BentoModalRole, BentoModalSize } from "../../../modal.types";
|
|
3
|
-
declare const _default: import("vue").DefineComponent<{
|
|
4
|
-
modalRole: {
|
|
5
|
-
type: StringConstructor;
|
|
6
|
-
default: BentoModalRole;
|
|
7
|
-
};
|
|
8
|
-
isDismissible: {
|
|
9
|
-
type: BooleanConstructor;
|
|
10
|
-
required: true;
|
|
11
|
-
};
|
|
12
|
-
hideCloseButton: {
|
|
13
|
-
type: BooleanConstructor;
|
|
14
|
-
required: true;
|
|
15
|
-
};
|
|
16
|
-
customPadding: {
|
|
17
|
-
type: StringConstructor;
|
|
18
|
-
default: any;
|
|
19
|
-
};
|
|
20
|
-
withColumnLayout: {
|
|
21
|
-
type: BooleanConstructor;
|
|
22
|
-
default: boolean;
|
|
23
|
-
};
|
|
24
|
-
columnsSize: {
|
|
25
|
-
type: PropType<BentoModalColumnLayoutVariant>;
|
|
26
|
-
default: BentoModalColumnLayoutVariant;
|
|
27
|
-
};
|
|
28
|
-
isOpen: {
|
|
29
|
-
type: BooleanConstructor;
|
|
30
|
-
required: true;
|
|
31
|
-
};
|
|
32
|
-
size: {
|
|
33
|
-
type: PropType<BentoModalSize>;
|
|
34
|
-
default: BentoModalSize;
|
|
35
|
-
};
|
|
36
|
-
initiallyOpen: {
|
|
37
|
-
type: BooleanConstructor;
|
|
38
|
-
default: boolean;
|
|
39
|
-
};
|
|
40
|
-
}, {
|
|
41
|
-
modal: any;
|
|
42
|
-
computedAriaLabel: import("vue").ComputedRef<string>;
|
|
43
|
-
openModal: () => void;
|
|
44
|
-
closeModalOnClickOutside: ({ target }: Event) => void;
|
|
45
|
-
onCloseButtonClick: () => void;
|
|
46
|
-
hasSlot: (name: string) => boolean;
|
|
47
|
-
emitCloseEvent: () => void;
|
|
48
|
-
modalConditionalClasses: import("vue").ComputedRef<{
|
|
49
|
-
[x: string]: boolean | BentoModalSize;
|
|
50
|
-
"b-modal-base__container--visible": boolean;
|
|
51
|
-
}>;
|
|
52
|
-
modalContentConditionalClasses: import("vue").ComputedRef<{
|
|
53
|
-
'b-modal-base__content--column-layout': boolean;
|
|
54
|
-
}>;
|
|
55
|
-
wrapperStyles: import("vue").ComputedRef<{
|
|
56
|
-
padding: string;
|
|
57
|
-
} | {
|
|
58
|
-
padding?: undefined;
|
|
59
|
-
}>;
|
|
60
|
-
dividerStyles: import("vue").ComputedRef<{
|
|
61
|
-
marginLeft: string;
|
|
62
|
-
width: string;
|
|
63
|
-
} | {
|
|
64
|
-
marginLeft?: undefined;
|
|
65
|
-
width?: undefined;
|
|
66
|
-
}>;
|
|
67
|
-
hasColumnLayout: import("vue").ComputedRef<boolean>;
|
|
68
|
-
computedColumnWidth: import("vue").ComputedRef<{
|
|
69
|
-
small: number;
|
|
70
|
-
medium: number;
|
|
71
|
-
large: number;
|
|
72
|
-
}[]>;
|
|
73
|
-
}, {}, {}, {}, import("vue/types/v3-component-options").ComponentOptionsMixin, import("vue/types/v3-component-options").ComponentOptionsMixin, BentoModalEvent[], string, Readonly<import("vue").ExtractPropTypes<{
|
|
74
|
-
modalRole: {
|
|
75
|
-
type: StringConstructor;
|
|
76
|
-
default: BentoModalRole;
|
|
77
|
-
};
|
|
78
|
-
isDismissible: {
|
|
79
|
-
type: BooleanConstructor;
|
|
80
|
-
required: true;
|
|
81
|
-
};
|
|
82
|
-
hideCloseButton: {
|
|
83
|
-
type: BooleanConstructor;
|
|
84
|
-
required: true;
|
|
85
|
-
};
|
|
86
|
-
customPadding: {
|
|
87
|
-
type: StringConstructor;
|
|
88
|
-
default: any;
|
|
89
|
-
};
|
|
90
|
-
withColumnLayout: {
|
|
91
|
-
type: BooleanConstructor;
|
|
92
|
-
default: boolean;
|
|
93
|
-
};
|
|
94
|
-
columnsSize: {
|
|
95
|
-
type: PropType<BentoModalColumnLayoutVariant>;
|
|
96
|
-
default: BentoModalColumnLayoutVariant;
|
|
97
|
-
};
|
|
98
|
-
isOpen: {
|
|
99
|
-
type: BooleanConstructor;
|
|
100
|
-
required: true;
|
|
101
|
-
};
|
|
102
|
-
size: {
|
|
103
|
-
type: PropType<BentoModalSize>;
|
|
104
|
-
default: BentoModalSize;
|
|
105
|
-
};
|
|
106
|
-
initiallyOpen: {
|
|
107
|
-
type: BooleanConstructor;
|
|
108
|
-
default: boolean;
|
|
109
|
-
};
|
|
110
|
-
}>>, {
|
|
111
|
-
size: BentoModalSize;
|
|
112
|
-
columnsSize: BentoModalColumnLayoutVariant;
|
|
113
|
-
customPadding: string;
|
|
114
|
-
initiallyOpen: boolean;
|
|
115
|
-
modalRole: string;
|
|
116
|
-
withColumnLayout: boolean;
|
|
117
|
-
}>;
|
|
118
|
-
export default _default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.b-error-message[data-v-2490b85a]{scrollbar-color:var(--b-color-background-quaternary) transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:flex-start;color:var(--b-error-message-color);display:flex}.b-error-message[data-v-2490b85a],.b-error-message[data-v-2490b85a]:before,.b-error-message[data-v-2490b85a]:after{box-sizing:border-box}.b-error-message *[data-v-2490b85a],.b-error-message *[data-v-2490b85a]:before,.b-error-message *[data-v-2490b85a]:after{box-sizing:border-box}.b-error-message[data-v-2490b85a] ::-webkit-scrollbar{height:14px;width:14px}.b-error-message[data-v-2490b85a] ::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:var(--b-color-background-quaternary);border:3px solid transparent;border-radius:var(--b-border-radius-l)}.b-error-message__icon[data-v-2490b85a]{align-items:center;display:flex;height:var(--b-error-message-icon-height);margin-right:var(--b-error-message-icon-margin-right)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base-modal.88e7b9d4.js","sources":["../../src/components/modal/modal.types.ts","../../src/components/modal/components/base-modal/base-modal.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalVariant {\n DEFAULT = 'BentoModalDefault',\n DIALOG = 'BentoModalDialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalSize {\n SMALL = 'small',\n MEDIUM = 'medium',\n LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalColumnLayoutVariant {\n SMALLER = 'smaller',\n EQUAL = 'equal',\n BIGGER = 'bigger',\n}\n\nexport enum BentoModalRole {\n DIALOG = 'dialog',\n ALERT_DIALOG = 'alertdialog',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoModalDialogType {\n CONFIRMATION = 'confirmation',\n DESTRUCTIVE = 'destructive',\n INFO = 'info',\n ACKNOWLEDGEMENT = 'acknowledgement',\n}\n\nexport enum BentoModalEvent {\n CLOSE_MODAL = 'close-modal',\n}\n","<template>\n <div class=\"b-modal-base\">\n <dialog\n ref=\"modal\"\n :role=\"modalRole\"\n :aria-label=\"computedAriaLabel\"\n class=\"b-modal-base__container\"\n :class=\"modalConditionalClasses\"\n :open=\"initiallyOpen\"\n @animationend=\"closeModalAfterAnimation\"\n @click=\"isDismissible && closeModalOnClickOutside($event)\"\n @keydown.esc=\"internalModalActionClose\"\n >\n <bento-focus-trap>\n <div class=\"b-modal-base__wrapper\">\n <div\n v-if=\"hasSlot('default') || !hideCloseButton\"\n class=\"b-modal-base__header-container\"\n :style=\"customPaddingStyles.header\"\n >\n <div class=\"b-modal-base__header\">\n <bento-typography\n class=\"b-modal-base__title\"\n aria-label=\"base modal title\"\n el=\"span\"\n variant=\"title\"\n stronger\n >\n <slot v-if=\"hasSlot('default')\" />\n </bento-typography>\n <bento-button\n v-if=\"!hideCloseButton\"\n class=\"b-modal-base__close-button\"\n variant=\"tertiary\"\n type=\"button\"\n @click=\"internalModalActionClose\"\n >\n <cross-icon svg-title=\"close\" />\n </bento-button>\n </div>\n\n <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n </div>\n\n <div\n class=\"b-modal-base__content\"\n :class=\"modalContentConditionalClasses\"\n :style=\"customPaddingStyles.content\"\n >\n <bento-typography\n v-if=\"hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))\"\n aria-label=\"base modal content\"\n el=\"div\"\n variant=\"body\"\n stronger\n >\n <grid-layout\n v-if=\"hasColumnLayout\"\n :column-width=\"computedColumnWidth\"\n :container-type=\"GridLayoutContainerType.NORMAL\"\n class=\"b-modal-base__grid\"\n >\n <template #col-1><slot name=\"content-col-1\"></slot></template>\n <template #col-2><slot name=\"content-col-2\"></slot></template>\n </grid-layout>\n <slot v-else name=\"content\" />\n </bento-typography>\n </div>\n\n <div\n v-if=\"hasSlot('actions')\"\n class=\"b-modal-base__actions-container\"\n :style=\"customPaddingStyles.actions\"\n >\n <bento-divider v-if=\"hasColumnLayout\" class=\"b-modal-base__divider\" />\n\n <div aria-label=\"modal actions\" class=\"b-modal-base__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </div>\n </bento-focus-trap>\n </dialog>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, onMounted, PropType, ref, useAttrs, watch } from 'vue';\n import {\n BentoModalColumnLayoutVariant,\n BentoModalEvent,\n BentoModalRole,\n BentoModalSize,\n } from '@/components/modal/modal.types';\n\n import { BentoTypography } from '@/components/typography';\n import { BentoButton, BentoButtonActionsList } from '@/components/button';\n import { BentoDivider } from '@/components/divider';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import { GridLayout, GridLayoutContainerType } from '@/internal';\n import { useHasSlot } from '@/composables';\n import { useI18n } from '@/utils/ts/i18n';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500;\n\n export default defineComponent({\n i18n: { messages },\n name: 'base-modal',\n components: { CrossIcon, BentoTypography, BentoButton, BentoDivider, BentoFocusTrap, GridLayout },\n props: {\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 * But you may change the color of 1-st action to red with 'critial' key\n * Not more than 3 action buttons can be provided\n * Or 2 action buttons and 1 Label for them\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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * ```\n * [{\n * title: 'Primary',2\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n default: null,\n },\n\n /**\n * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column.\n */\n columnsSize: {\n type: String as PropType<BentoModalColumnLayoutVariant>,\n default: BentoModalColumnLayoutVariant.SMALLER,\n },\n\n /**\n * If provided, manages the padding of the whole modal container\n */\n customPadding: { type: String, default: null },\n\n /**\n * Hides a cross icon on the right side of the title\n */\n hideCloseButton: { type: Boolean, required: true },\n\n /**\n * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility.\n */\n initiallyOpen: { type: Boolean, default: false },\n\n /**\n * If set to true, it allows the modal to be closed by clicking outside of it\n */\n isDismissible: { type: Boolean, required: true },\n\n /**\n * Controls the modal's state from the outside. Set it to true to open the modal\n */\n isOpen: { type: Boolean, required: true },\n\n /**\n * Defines whether the modal will be an alert modal\n */\n modalRole: { type: String, default: BentoModalRole.DIALOG },\n\n /**\n * Allows the inner elments to overflow the dialog\n */\n overflowVisible: { type: Boolean, default: false },\n\n /**\n * Sets the width of the modal\n */\n size: {\n type: String as PropType<BentoModalSize | `${BentoModalSize}`>,\n default: BentoModalSize.SMALL,\n },\n\n /**\n * If provided, renders the modal's content in a two-column layout an wth dividers separating its content\n */\n withColumnLayout: { type: Boolean, default: false },\n },\n emits: [BentoModalEvent.CLOSE_MODAL],\n setup(props, { slots, emit }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const attrs = useAttrs();\n const hasSlot = useHasSlot(slots);\n const modal = ref(null);\n const isClosing = ref(false);\n\n const customPaddingStyles = computed(() => {\n if (!props.customPadding) {\n return {};\n }\n\n const xPadding = {\n paddingLeft: props.customPadding,\n paddingRight: props.customPadding,\n };\n\n const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined };\n\n if (!hasSlot('default')) {\n content.paddingTop = props.customPadding;\n }\n\n if (!hasSlot('actions')) {\n content.paddingBottom = props.customPadding;\n }\n\n return {\n header: { ...xPadding, paddingTop: props.customPadding },\n content,\n actions: { ...xPadding, paddingBottom: props.customPadding },\n };\n });\n\n const computedAriaLabel = computed(\n () => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)\n );\n const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE);\n\n const openModal = (): void => {\n modal.value.showModal();\n };\n\n const emitCloseEvent = (): void => {\n emit(BentoModalEvent.CLOSE_MODAL);\n };\n\n // Handle closing and closing animation for dialog element\n const closeModalAfterAnimation = () => {\n if (isClosing.value) {\n modal.value.close();\n emitCloseEvent();\n isClosing.value = false;\n }\n };\n\n const startCloseModalAnimation = () => {\n if (!modal.value.open) {\n return;\n }\n isClosing.value = true;\n };\n\n // If the user has pressed escape, clicked outside or clicked the close icon\n const internalModalActionClose = (event?: Event) => {\n if (event) {\n event.preventDefault();\n }\n if (!props.isDismissible) {\n return;\n }\n startCloseModalAnimation();\n };\n\n /**\n * Since the dialog HTML element doesn't automatically close when clicking outside, a check on when the user is clicking is needed.\n * If the click doesn't happen in the dialog box itself, the modal closes\n */\n const closeModalOnClickOutside = ({ target }: Event): void => {\n if (target && (target as HTMLElement).tagName === BentoModalRole.DIALOG.toUpperCase()) {\n internalModalActionClose();\n }\n };\n\n const modalConditionalClasses = computed(() => ({\n [`b-modal-base__container--${props.size}`]: props.size,\n 'b-modal-base__container--hide': isClosing.value,\n 'b-modal-base__container--overflow-visible': props.overflowVisible,\n 'b-modal-base__container--column-layout': hasColumnLayout.value,\n }));\n\n const modalContentConditionalClasses = computed(() => ({\n 'b-modal-base__content--column-layout': hasColumnLayout.value,\n 'b-modal-base__content--with-header': hasSlot('default'),\n 'b-modal-base__content--with-actions': hasSlot('actions'),\n }));\n\n const computedColumnWidth = computed(() => {\n if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) {\n return [{ small: 4, medium: 4, large: 4 }];\n }\n if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) {\n return [{ small: 8, medium: 8, large: 8 }];\n }\n return [{ small: 6, medium: 6, large: 6 }];\n });\n\n watch(\n () => [props.isOpen, modal.value],\n ([newIsOpen, newModalValue], [, oldModalValue]): void => {\n if (!newModalValue) {\n return;\n }\n\n const isFirstMutation = !oldModalValue;\n if (newIsOpen) {\n openModal();\n } else if (!isFirstMutation) {\n startCloseModalAnimation();\n }\n }\n );\n\n // If the first button is a loading button then close the modal have 0.5 seconds\n // if the state is changed to 'success'.\n watch(\n () => props.actions,\n () => {\n if (props.actions?.[0]?.state === 'success') {\n setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME);\n }\n },\n { deep: true }\n );\n\n onMounted(() => {\n if (props.isOpen && modal.value) {\n openModal();\n }\n });\n\n return {\n // Refs\n modal,\n computedAriaLabel,\n\n // Handling the state\n openModal,\n closeModalOnClickOutside,\n closeModalAfterAnimation,\n startCloseModalAnimation,\n\n // Methods\n internalModalActionClose,\n hasSlot,\n emitCloseEvent,\n t,\n\n // Styles\n modalConditionalClasses,\n modalContentConditionalClasses,\n customPaddingStyles,\n hasColumnLayout,\n computedColumnWidth,\n\n // Enums\n GridLayoutContainerType,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-modal.scss\" />\n"],"names":["BentoModalVariant","BentoModalVariant2","BentoModalSize","BentoModalSize2","BentoModalColumnLayoutVariant","BentoModalColumnLayoutVariant2","BentoModalRole","BentoModalRole2","BentoModalDialogType","BentoModalDialogType2","BentoModalEvent","BentoModalEvent2","LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME","_sfc_main","defineComponent","messages","CrossIcon","BentoTypography","BentoButton","BentoDivider","BentoFocusTrap","GridLayout","props","slots","emit","t","useI18n","attrs","useAttrs","hasSlot","useHasSlot","modal","ref","isClosing","customPaddingStyles","computed","xPadding","content","computedAriaLabel","hasColumnLayout","openModal","emitCloseEvent","closeModalAfterAnimation","startCloseModalAnimation","internalModalActionClose","event","closeModalOnClickOutside","target","modalConditionalClasses","modalContentConditionalClasses","computedColumnWidth","watch","newIsOpen","newModalValue","oldModalValue","_b","_a","onMounted","GridLayoutContainerType"],"mappings":"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"}
|