@adyen/bento-vue3 1.1.0 → 1.1.1
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/accordion.js +1 -1
- package/dist/alert.js +3 -3
- package/dist/assets/index.css +1 -1
- package/dist/assets/index10.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/index31.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/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/avatar-image.js +1 -1
- package/dist/badge.js +1 -1
- package/dist/button.js +3 -3
- package/dist/card.js +63 -56
- package/dist/card.js.map +1 -1
- package/dist/checkbox.js +6 -6
- package/dist/chunks/{base-button.fe807878.js → base-button.7198ce06.js} +2 -2
- package/dist/chunks/{base-button.fe807878.js.map → base-button.7198ce06.js.map} +1 -1
- package/dist/chunks/{button-actions.59449cda.js → button-actions.6d64b71d.js} +2 -2
- package/dist/chunks/{button-actions.59449cda.js.map → button-actions.6d64b71d.js.map} +1 -1
- package/dist/chunks/{button.4ccc3a72.js → button.9cd485bc.js} +2 -2
- package/dist/chunks/{button.4ccc3a72.js.map → button.9cd485bc.js.map} +1 -1
- package/dist/chunks/{calendar.1fb0d5b2.js → calendar.6226cd90.js} +4 -4
- package/dist/chunks/{calendar.1fb0d5b2.js.map → calendar.6226cd90.js.map} +1 -1
- package/dist/chunks/{checkbox.39fa87c7.js → checkbox.ba6545d7.js} +3 -3
- package/dist/chunks/{checkbox.39fa87c7.js.map → checkbox.ba6545d7.js.map} +1 -1
- package/dist/chunks/{controls-group.0126679a.js → controls-group.27f1524d.js} +2 -2
- package/dist/chunks/{controls-group.0126679a.js.map → controls-group.27f1524d.js.map} +1 -1
- package/dist/chunks/{copy.012e43f2.js → copy.d3ce16b1.js} +3 -3
- package/dist/chunks/{copy.012e43f2.js.map → copy.d3ce16b1.js.map} +1 -1
- package/dist/chunks/{dropdown-default-textbox.2ac50ee2.js → dropdown-default-textbox.16cb9d12.js} +2 -2
- package/dist/chunks/{dropdown-default-textbox.2ac50ee2.js.map → dropdown-default-textbox.16cb9d12.js.map} +1 -1
- package/dist/chunks/{dropdown.374481a8.js → dropdown.1ddf24a3.js} +6 -6
- package/dist/chunks/{dropdown.374481a8.js.map → dropdown.1ddf24a3.js.map} +1 -1
- package/dist/chunks/{error-message.a65a9abf.js → error-message.a784820d.js} +2 -2
- package/dist/chunks/{error-message.a65a9abf.js.map → error-message.a784820d.js.map} +1 -1
- package/dist/chunks/{index.c25bbcc8.js → index.04996cf6.js} +2 -2
- package/dist/chunks/{index.c25bbcc8.js.map → index.04996cf6.js.map} +1 -1
- package/dist/chunks/{index.0f958a0c.js → index.11f89653.js} +2 -2
- package/dist/chunks/{index.0f958a0c.js.map → index.11f89653.js.map} +1 -1
- package/dist/chunks/{index.05d4c01b.js → index.23194ad5.js} +6 -6
- package/dist/chunks/{index.05d4c01b.js.map → index.23194ad5.js.map} +1 -1
- package/dist/chunks/{index.b2d970f6.js → index.5a8bfaa3.js} +8 -8
- package/dist/chunks/{index.b2d970f6.js.map → index.5a8bfaa3.js.map} +1 -1
- package/dist/chunks/{index.92f7d550.js → index.a169ce0d.js} +2 -2
- package/dist/chunks/{index.92f7d550.js.map → index.a169ce0d.js.map} +1 -1
- package/dist/chunks/{index.0b6c7187.js → index.ba797d8f.js} +3 -3
- package/dist/chunks/{index.0b6c7187.js.map → index.ba797d8f.js.map} +1 -1
- package/dist/chunks/{index.1e002876.js → index.c7182196.js} +3 -3
- package/dist/chunks/{index.1e002876.js.map → index.c7182196.js.map} +1 -1
- package/dist/chunks/{listbox-option-tag.caa1ceba.js → listbox-option-tag.c293fa09.js} +3 -3
- package/dist/chunks/{listbox-option-tag.caa1ceba.js.map → listbox-option-tag.c293fa09.js.map} +1 -1
- package/dist/chunks/{listbox.ceacb0ca.js → listbox.1b763229.js} +5 -5
- package/dist/chunks/{listbox.ceacb0ca.js.map → listbox.1b763229.js.map} +1 -1
- package/dist/chunks/{loading-button.5b8db3dc.js → loading-button.2e59fdb1.js} +2 -2
- package/dist/chunks/{loading-button.5b8db3dc.js.map → loading-button.2e59fdb1.js.map} +1 -1
- package/dist/chunks/{tooltip.ca53a83a.js → tooltip.86176c7d.js} +2 -2
- package/dist/chunks/{tooltip.ca53a83a.js.map → tooltip.86176c7d.js.map} +1 -1
- package/dist/code-snippet.js +6 -6
- package/dist/country.js +2 -2
- package/dist/currency.js +1 -1
- package/dist/data-grid.js +7 -7
- package/dist/date-picker.js +7 -7
- package/dist/date-range-picker.js +2 -2
- package/dist/date.js +1 -1
- package/dist/divider.js +1 -1
- package/dist/dropdown.js +3 -3
- package/dist/filter-bar.js +13 -13
- package/dist/focus-trap.js +1 -1
- package/dist/header.js +3 -3
- package/dist/index.js +15 -15
- package/dist/info-icon.js +2 -2
- package/dist/input-field.js +4 -4
- package/dist/internal.js +6 -6
- package/dist/link.js +2 -2
- package/dist/loading-indicator.js +1 -1
- package/dist/menu.js +4 -4
- package/dist/modal.js +5 -5
- package/dist/pagination.js +4 -4
- package/dist/payment-method.js +2 -2
- package/dist/popover.js +4 -4
- package/dist/popper-container.js +2 -2
- package/dist/radio-group.js +4 -4
- package/dist/search-bar.js +2 -2
- package/dist/segmented-control.js +4 -4
- package/dist/status.js +2 -2
- package/dist/structured-list.js +1 -1
- package/dist/summary-grid.js +3 -3
- package/dist/tabs.js +2 -2
- package/dist/tag.js +3 -3
- package/dist/textarea.js +4 -4
- package/dist/timeline.js +5 -5
- package/dist/toast.js +3 -3
- package/dist/toggle.js +1 -1
- package/dist/typography.js +1 -1
- package/dist/web-types.json +1 -1
- package/package.json +4 -4
package/dist/card.js
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { defineComponent as M, ref as z, computed as a, resolveComponent as h, openBlock as o, createElementBlock as
|
|
2
|
-
import { B as
|
|
3
|
-
import { a as
|
|
4
|
-
import { u as
|
|
5
|
-
import { g as
|
|
6
|
-
import { u as
|
|
7
|
-
import { B as
|
|
8
|
-
import { _ as
|
|
9
|
-
import "./assets/
|
|
10
|
-
var A = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(A || {}),
|
|
1
|
+
import { defineComponent as M, ref as z, watch as O, computed as a, resolveComponent as h, openBlock as o, createElementBlock as i, normalizeClass as c, withKeys as w, createElementVNode as k, createBlock as y, createCommentVNode as s, mergeProps as R, withCtx as B, renderSlot as g, createVNode as W } from "vue";
|
|
2
|
+
import { B as Y, a as S, b as v } from "./chunks/index.a169ce0d.js";
|
|
3
|
+
import { a as F, C as P } from "./chunks/chevron-down.69bedf14.js";
|
|
4
|
+
import { u as K } from "./chunks/use-has-slot.068222e6.js";
|
|
5
|
+
import { g as j } from "./chunks/unique-id.a2a2b458.js";
|
|
6
|
+
import { u as x } from "./chunks/i18n.6c402773.js";
|
|
7
|
+
import { B as q, c as E } from "./chunks/button-actions.6d64b71d.js";
|
|
8
|
+
import { _ as G } from "./chunks/_plugin-vue_export-helper.dad06003.js";
|
|
9
|
+
import "./assets/index14.css";
|
|
10
|
+
var A = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e))(A || {}), b = /* @__PURE__ */ ((e) => (e.DEFAULT = "default", e.SMALL = "small", e))(b || {});
|
|
11
11
|
const T = {
|
|
12
12
|
"en-US": {
|
|
13
13
|
showCardContent: "Show card content",
|
|
14
14
|
hideCardContent: "Hide card content"
|
|
15
15
|
}
|
|
16
|
-
},
|
|
16
|
+
}, J = M({
|
|
17
17
|
i18n: { messages: T },
|
|
18
18
|
name: "bento-card",
|
|
19
|
-
components: { ChevronUpIcon:
|
|
19
|
+
components: { ChevronUpIcon: F, ChevronDownIcon: P, BentoTypography: Y, BentoButtonActions: q },
|
|
20
20
|
props: {
|
|
21
21
|
/**
|
|
22
22
|
* Defines the color of card background
|
|
@@ -30,7 +30,7 @@ const T = {
|
|
|
30
30
|
*/
|
|
31
31
|
titleSize: {
|
|
32
32
|
type: String,
|
|
33
|
-
default:
|
|
33
|
+
default: b.DEFAULT
|
|
34
34
|
},
|
|
35
35
|
/**
|
|
36
36
|
* The whole content of the card will be expandable in accordion manner
|
|
@@ -40,7 +40,7 @@ const T = {
|
|
|
40
40
|
default: !1
|
|
41
41
|
},
|
|
42
42
|
/**
|
|
43
|
-
*
|
|
43
|
+
* Sets the expandable card in a closed state
|
|
44
44
|
*/
|
|
45
45
|
closed: {
|
|
46
46
|
type: Boolean,
|
|
@@ -100,10 +100,17 @@ const T = {
|
|
|
100
100
|
},
|
|
101
101
|
emits: ["click", "expanded"],
|
|
102
102
|
setup(e, { emit: n, slots: m }) {
|
|
103
|
-
const { t:
|
|
103
|
+
const { t: _ } = x({ messages: T }), t = K(m), f = j("card"), l = z(!e.closed);
|
|
104
|
+
O(
|
|
105
|
+
() => e.closed,
|
|
106
|
+
(r) => {
|
|
107
|
+
l.value = !r;
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
const u = a(() => t("default") || t("description") || t("header")), p = a(() => t("default") || t("header")), C = a(
|
|
104
111
|
() => {
|
|
105
|
-
var
|
|
106
|
-
return (t("content") || ((
|
|
112
|
+
var r;
|
|
113
|
+
return (t("content") || ((r = e.actions) == null ? void 0 : r.length)) && (!e.expandable || e.expandable && l.value);
|
|
107
114
|
}
|
|
108
115
|
), d = a(() => e.expandable && !e.disabled ? 0 : -1), L = a(() => ({
|
|
109
116
|
[`b-card--${e.background}`]: e.background,
|
|
@@ -113,30 +120,30 @@ const T = {
|
|
|
113
120
|
"b-card__header--expandable": e.expandable,
|
|
114
121
|
"b-card__header--without-body": !e.expandable && !C.value
|
|
115
122
|
})), D = a(() => ({
|
|
116
|
-
"b-card__toggle--small-text": e.titleSize ===
|
|
123
|
+
"b-card__toggle--small-text": e.titleSize === b.SMALL
|
|
117
124
|
})), $ = a(() => ({
|
|
118
125
|
"b-card__body--expandable": e.expandable && t("content"),
|
|
119
|
-
"b-card__body--without-header": !e.expandable && !
|
|
126
|
+
"b-card__body--without-header": !e.expandable && !u.value
|
|
120
127
|
})), N = a(() => ({
|
|
121
|
-
"b-card__content--without-header": !e.expandable && !
|
|
128
|
+
"b-card__content--without-header": !e.expandable && !u.value,
|
|
122
129
|
"b-card__content--expandable": e.expandable
|
|
123
130
|
})), U = a(() => {
|
|
124
|
-
const
|
|
131
|
+
const r = !e.expandable && e.actions && !t("content");
|
|
125
132
|
return {
|
|
126
|
-
"b-card__actions--without-content":
|
|
127
|
-
"b-card__actions--without-content-and-with-header":
|
|
133
|
+
"b-card__actions--without-content": r,
|
|
134
|
+
"b-card__actions--without-content-and-with-header": r && u.value
|
|
128
135
|
};
|
|
129
136
|
}), V = a(() => ({
|
|
130
137
|
"b-card__title-wrapper--truncated": t("header")
|
|
131
138
|
})), H = a(() => ({
|
|
132
139
|
el: S.DIV,
|
|
133
|
-
variant: e.titleSize ===
|
|
134
|
-
strongest: e.titleSize ===
|
|
135
|
-
wide: e.titleSize ===
|
|
140
|
+
variant: e.titleSize === b.DEFAULT ? v.TITLE : v.BODY,
|
|
141
|
+
strongest: e.titleSize === b.SMALL,
|
|
142
|
+
wide: e.titleSize === b.SMALL
|
|
136
143
|
}));
|
|
137
144
|
return {
|
|
138
145
|
// Values
|
|
139
|
-
cardId:
|
|
146
|
+
cardId: f,
|
|
140
147
|
cardConditionalClasses: L,
|
|
141
148
|
cardBodyConditionalClasses: $,
|
|
142
149
|
cardHeaderConditionalClasses: I,
|
|
@@ -147,7 +154,7 @@ const T = {
|
|
|
147
154
|
showCardBody: C,
|
|
148
155
|
showContent: l,
|
|
149
156
|
tabIndex: d,
|
|
150
|
-
showHeader:
|
|
157
|
+
showHeader: u,
|
|
151
158
|
showTitleWrapper: p,
|
|
152
159
|
typography: H,
|
|
153
160
|
// Methods
|
|
@@ -155,7 +162,7 @@ const T = {
|
|
|
155
162
|
onClick: () => {
|
|
156
163
|
e.disabled || n("click");
|
|
157
164
|
},
|
|
158
|
-
t:
|
|
165
|
+
t: _,
|
|
159
166
|
toggleExpansion: () => {
|
|
160
167
|
e.disabled || (l.value = !l.value, n("expanded", l.value));
|
|
161
168
|
},
|
|
@@ -165,20 +172,20 @@ const T = {
|
|
|
165
172
|
};
|
|
166
173
|
}
|
|
167
174
|
});
|
|
168
|
-
const
|
|
175
|
+
const Q = ["tabindex", "aria-controls", "aria-expanded", "role"], X = { class: "b-card__header-wrapper" }, Z = {
|
|
169
176
|
key: 0,
|
|
170
177
|
class: "b-card__header-slot-wrapper"
|
|
171
|
-
},
|
|
172
|
-
function
|
|
173
|
-
const l = h("chevron-up-icon"),
|
|
174
|
-
return o(),
|
|
175
|
-
class:
|
|
178
|
+
}, ee = ["id"];
|
|
179
|
+
function ae(e, n, m, _, t, f) {
|
|
180
|
+
const l = h("chevron-up-icon"), u = h("chevron-down-icon"), p = h("bento-typography"), C = h("bento-button-actions");
|
|
181
|
+
return o(), i("div", {
|
|
182
|
+
class: c(["b-card", e.cardConditionalClasses]),
|
|
176
183
|
"data-testid": "card",
|
|
177
184
|
onClick: n[3] || (n[3] = (...d) => e.onClick && e.onClick(...d))
|
|
178
185
|
}, [
|
|
179
|
-
e.showHeader ? (o(),
|
|
186
|
+
e.showHeader ? (o(), i("div", {
|
|
180
187
|
key: 0,
|
|
181
|
-
class:
|
|
188
|
+
class: c(["b-card__header", e.cardHeaderConditionalClasses]),
|
|
182
189
|
tabindex: e.tabIndex,
|
|
183
190
|
"aria-controls": e.expandable ? e.cardId : null,
|
|
184
191
|
"aria-expanded": e.expandable ? `${e.showContent}` : null,
|
|
@@ -189,26 +196,26 @@ function ee(e, n, m, f, t, _) {
|
|
|
189
196
|
n[2] || (n[2] = w((...d) => e.toggleExpansion && e.toggleExpansion(...d), ["space"]))
|
|
190
197
|
]
|
|
191
198
|
}, [
|
|
192
|
-
k("div",
|
|
193
|
-
e.showTitleWrapper ? (o(),
|
|
199
|
+
k("div", X, [
|
|
200
|
+
e.showTitleWrapper ? (o(), i("div", Z, [
|
|
194
201
|
k("div", {
|
|
195
|
-
class:
|
|
202
|
+
class: c(["b-card__title-wrapper", e.cardTitleWrapperConditionalClasses])
|
|
196
203
|
}, [
|
|
197
|
-
e.expandable ? (o(),
|
|
204
|
+
e.expandable ? (o(), i("div", {
|
|
198
205
|
key: 0,
|
|
199
|
-
class:
|
|
206
|
+
class: c(["b-card__toggle", e.cardToggleConditionalClasses])
|
|
200
207
|
}, [
|
|
201
208
|
e.showContent ? (o(), y(l, {
|
|
202
209
|
key: 0,
|
|
203
210
|
"svg-title": e.t("hideCardContent"),
|
|
204
211
|
"aria-hidden": "true"
|
|
205
|
-
}, null, 8, ["svg-title"])) : (o(), y(
|
|
212
|
+
}, null, 8, ["svg-title"])) : (o(), y(u, {
|
|
206
213
|
key: 1,
|
|
207
214
|
"svg-title": e.t("showCardContent"),
|
|
208
215
|
"aria-hidden": "true"
|
|
209
216
|
}, null, 8, ["svg-title"]))
|
|
210
217
|
], 2)) : s("", !0),
|
|
211
|
-
e.hasSlot("default") ? (o(), y(p,
|
|
218
|
+
e.hasSlot("default") ? (o(), y(p, R({
|
|
212
219
|
key: 1,
|
|
213
220
|
class: "b-card__title"
|
|
214
221
|
}, e.typography), {
|
|
@@ -232,34 +239,34 @@ function ee(e, n, m, f, t, _) {
|
|
|
232
239
|
_: 3
|
|
233
240
|
}, 8, ["el", "variant"])) : s("", !0)
|
|
234
241
|
])
|
|
235
|
-
], 42,
|
|
236
|
-
e.showCardBody ? (o(),
|
|
242
|
+
], 42, Q)) : s("", !0),
|
|
243
|
+
e.showCardBody ? (o(), i("div", {
|
|
237
244
|
key: 1,
|
|
238
245
|
id: e.expandable ? e.cardId : null,
|
|
239
|
-
class:
|
|
246
|
+
class: c(["b-card__body", e.cardBodyConditionalClasses])
|
|
240
247
|
}, [
|
|
241
|
-
e.hasSlot("content") ? (o(),
|
|
248
|
+
e.hasSlot("content") ? (o(), i("div", {
|
|
242
249
|
key: 0,
|
|
243
|
-
class:
|
|
250
|
+
class: c(["b-card__content", e.cardContentConditionalClasses])
|
|
244
251
|
}, [
|
|
245
252
|
g(e.$slots, "content", {}, void 0, !0)
|
|
246
253
|
], 2)) : s("", !0),
|
|
247
|
-
e.actions ? (o(),
|
|
254
|
+
e.actions ? (o(), i("div", {
|
|
248
255
|
key: 1,
|
|
249
|
-
class:
|
|
256
|
+
class: c(["b-card__actions", e.cardActionsConditionalClasses])
|
|
250
257
|
}, [
|
|
251
|
-
|
|
258
|
+
W(C, {
|
|
252
259
|
actions: e.actions,
|
|
253
260
|
layout: e.actionsLayout
|
|
254
261
|
}, null, 8, ["actions", "layout"])
|
|
255
262
|
], 2)) : s("", !0)
|
|
256
|
-
], 10,
|
|
263
|
+
], 10, ee)) : s("", !0)
|
|
257
264
|
], 2);
|
|
258
265
|
}
|
|
259
|
-
const
|
|
266
|
+
const be = /* @__PURE__ */ G(J, [["render", ae], ["__scopeId", "data-v-2a590998"]]);
|
|
260
267
|
export {
|
|
261
|
-
|
|
268
|
+
be as BentoCard,
|
|
262
269
|
A as BentoCardBackground,
|
|
263
|
-
|
|
270
|
+
b as BentoCardTitleSize
|
|
264
271
|
};
|
|
265
272
|
//# sourceMappingURL=card.js.map
|
package/dist/card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sources":["../../vue2/src/components/card/card.types.ts","../../vue2/src/components/card/card.vue"],"sourcesContent":["export enum BentoCardBackground {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n}\n\nexport enum BentoCardTitleSize {\n DEFAULT = 'default',\n SMALL = 'small',\n}\n","<template>\n <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n <div\n v-if=\"showHeader\"\n class=\"b-card__header\"\n :class=\"cardHeaderConditionalClasses\"\n :tabindex=\"tabIndex\"\n :aria-controls=\"expandable ? cardId : null\"\n :aria-expanded=\"expandable ? `${showContent}` : null\"\n :role=\"expandable ? 'button' : null\"\n @click=\"toggleExpansion\"\n @keypress.enter=\"toggleExpansion\"\n @keypress.space=\"toggleExpansion\"\n >\n <div class=\"b-card__header-wrapper\">\n <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideCardContent')\" aria-hidden=\"true\" />\n <chevron-down-icon v-else :svg-title=\"t('showCardContent')\" aria-hidden=\"true\" />\n </div>\n <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n <slot />\n </bento-typography>\n </div>\n\n <template v-if=\"hasSlot('header')\">\n <slot name=\"header\"></slot>\n </template>\n </div>\n\n <bento-typography\n v-if=\"hasSlot('description')\"\n class=\"b-card__description\"\n :el=\"BentoTypographyElement.DIV\"\n :variant=\"BentoTypographyVariant.BODY\"\n >\n <slot name=\"description\" />\n </bento-typography>\n </div>\n </div>\n\n <div\n v-if=\"showCardBody\"\n :id=\"expandable ? cardId : null\"\n class=\"b-card__body\"\n :class=\"cardBodyConditionalClasses\"\n >\n <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n <slot name=\"content\" />\n </div>\n\n <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref } from 'vue';\n\n // Components\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n // Utils\n import { useHasSlot } from '@/composables';\n import { generateUid } from '@/utils/ts/unique-id';\n import { useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n /**\n * A card is a flexible and composable container.\n * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n *\n * @example\n * import { BentoCard } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoCard },\n * template: `\n * <bento-card>\n * Title of the Card\n * </bento-card>\n * `\n * };\n */\n export default defineComponent({\n i18n: { messages },\n name: 'bento-card',\n components: { ChevronUpIcon, ChevronDownIcon, BentoTypography, BentoButtonActions },\n props: {\n /**\n * Defines the color of card background\n */\n background: {\n type: String as PropType<BentoCardBackground>,\n default: BentoCardBackground.PRIMARY,\n },\n /**\n * Defines the title size of the card header\n */\n titleSize: {\n type: String as PropType<BentoCardTitleSize>,\n default: BentoCardTitleSize.DEFAULT,\n },\n /**\n * The whole content of the card will be expandable in accordion manner\n */\n expandable: {\n type: Boolean,\n default: false,\n },\n /**\n * Initially sets the expandable card in a closed state\n */\n closed: {\n type: Boolean,\n default: false,\n },\n /**\n * Disables the expandable card\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n /**\n * List of actions that will be used to render the buttons.\n * First element in the list will be rendered as \"primary\".\n * All elements after the first will be rendered as \"secondary\".\n *\n * Each object in the list should have a `title`, an `event` and\n * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n *\n * `title`: Button's text.\n *\n * `event`: Event triggered when clicking the Button.\n *\n * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * ```\n * [{\n * title: 'Primary',\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 * Defines the layout in which the button actions is presented.\n * It can be one of:\n *\n * @values BUTTONS_START\n * @values BUTTONS_END\n * @values FILL_CONTAINER\n * @values SPACE_BETWEEN\n * @values VERTICAL_STACK\n */\n actionsLayout: {\n type: String as PropType<BentoButtonActionsLayout>,\n default: BentoButtonActionsLayout.BUTTONS_END,\n validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n },\n },\n emits: ['click', 'expanded'],\n setup(props, { emit, slots }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const hasSlot = useHasSlot(slots);\n\n const cardId = generateUid('card');\n const showContent = ref(!props.closed);\n const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n const showCardBody = computed(\n () =>\n (hasSlot('content') || props.actions?.length) &&\n (!props.expandable || (props.expandable && showContent.value))\n );\n const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n const cardConditionalClasses = computed(() => ({\n [`b-card--${props.background}`]: props.background,\n 'b-card--expandable': props.expandable,\n 'b-card--disabled': props.expandable && props.disabled,\n }));\n\n const cardHeaderConditionalClasses = computed(() => ({\n 'b-card__header--expandable': props.expandable,\n 'b-card__header--without-body': !props.expandable && !showCardBody.value,\n }));\n\n const cardToggleConditionalClasses = computed(() => ({\n 'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n }));\n\n const cardBodyConditionalClasses = computed(() => ({\n 'b-card__body--expandable': props.expandable && hasSlot('content'),\n 'b-card__body--without-header': !props.expandable && !showHeader.value,\n }));\n\n const cardContentConditionalClasses = computed(() => ({\n 'b-card__content--without-header': !props.expandable && !showHeader.value,\n 'b-card__content--expandable': props.expandable,\n }));\n\n const cardActionsConditionalClasses = computed(() => {\n const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n return {\n 'b-card__actions--without-content': isNotExpandableWithoutContent,\n 'b-card__actions--without-content-and-with-header':\n isNotExpandableWithoutContent && showHeader.value,\n };\n });\n\n const cardTitleWrapperConditionalClasses = computed(() => ({\n 'b-card__title-wrapper--truncated': hasSlot('header'),\n }));\n\n const typography = computed(() => ({\n el: BentoTypographyElement.DIV,\n variant:\n props.titleSize === BentoCardTitleSize.DEFAULT\n ? BentoTypographyVariant.TITLE\n : BentoTypographyVariant.BODY,\n strongest: props.titleSize === BentoCardTitleSize.SMALL,\n wide: props.titleSize === BentoCardTitleSize.SMALL,\n }));\n\n const toggleExpansion = () => {\n if (!props.disabled) {\n showContent.value = !showContent.value;\n emit('expanded', showContent.value);\n }\n };\n\n const onClick = () => {\n if (!props.disabled) {\n emit('click');\n }\n };\n\n return {\n // Values\n cardId,\n cardConditionalClasses,\n cardBodyConditionalClasses,\n cardHeaderConditionalClasses,\n cardContentConditionalClasses,\n cardActionsConditionalClasses,\n cardTitleWrapperConditionalClasses,\n cardToggleConditionalClasses,\n showCardBody,\n showContent,\n tabIndex,\n showHeader,\n showTitleWrapper,\n typography,\n\n // Methods\n hasSlot,\n onClick,\n t,\n toggleExpansion,\n\n // Enums\n BentoTypographyVariant,\n BentoTypographyElement,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","_sfc_main","defineComponent","messages","ChevronUpIcon","ChevronDownIcon","BentoTypography","BentoButtonActions","BentoButtonActionsLayout","value","props","emit","slots","t","useI18n","hasSlot","useHasSlot","cardId","generateUid","showContent","ref","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","BentoTypographyElement","BentoTypographyVariant","openBlock","createElementBlock","normalizeClass","_ctx","_cache","args","createElementVNode","_hoisted_2","_hoisted_3","createBlock","_component_chevron_up_icon","_component_chevron_down_icon","createCommentVNode","_component_bento_typography","mergeProps","withCtx","renderSlot","_hoisted_1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"card.js","sources":["../../vue2/src/components/card/card.types.ts","../../vue2/src/components/card/card.vue"],"sourcesContent":["export enum BentoCardBackground {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n}\n\nexport enum BentoCardTitleSize {\n DEFAULT = 'default',\n SMALL = 'small',\n}\n","<template>\n <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n <div\n v-if=\"showHeader\"\n class=\"b-card__header\"\n :class=\"cardHeaderConditionalClasses\"\n :tabindex=\"tabIndex\"\n :aria-controls=\"expandable ? cardId : null\"\n :aria-expanded=\"expandable ? `${showContent}` : null\"\n :role=\"expandable ? 'button' : null\"\n @click=\"toggleExpansion\"\n @keypress.enter=\"toggleExpansion\"\n @keypress.space=\"toggleExpansion\"\n >\n <div class=\"b-card__header-wrapper\">\n <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideCardContent')\" aria-hidden=\"true\" />\n <chevron-down-icon v-else :svg-title=\"t('showCardContent')\" aria-hidden=\"true\" />\n </div>\n <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n <slot />\n </bento-typography>\n </div>\n\n <template v-if=\"hasSlot('header')\">\n <slot name=\"header\"></slot>\n </template>\n </div>\n\n <bento-typography\n v-if=\"hasSlot('description')\"\n class=\"b-card__description\"\n :el=\"BentoTypographyElement.DIV\"\n :variant=\"BentoTypographyVariant.BODY\"\n >\n <slot name=\"description\" />\n </bento-typography>\n </div>\n </div>\n\n <div\n v-if=\"showCardBody\"\n :id=\"expandable ? cardId : null\"\n class=\"b-card__body\"\n :class=\"cardBodyConditionalClasses\"\n >\n <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n <slot name=\"content\" />\n </div>\n\n <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref, watch } from 'vue';\n\n // Components\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n // Utils\n import { useHasSlot } from '@/composables';\n import { generateUid } from '@/utils/ts/unique-id';\n import { useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n /**\n * A card is a flexible and composable container.\n * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n *\n * @example\n * import { BentoCard } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoCard },\n * template: `\n * <bento-card>\n * Title of the Card\n * </bento-card>\n * `\n * };\n */\n export default defineComponent({\n i18n: { messages },\n name: 'bento-card',\n components: { ChevronUpIcon, ChevronDownIcon, BentoTypography, BentoButtonActions },\n props: {\n /**\n * Defines the color of card background\n */\n background: {\n type: String as PropType<BentoCardBackground>,\n default: BentoCardBackground.PRIMARY,\n },\n /**\n * Defines the title size of the card header\n */\n titleSize: {\n type: String as PropType<BentoCardTitleSize>,\n default: BentoCardTitleSize.DEFAULT,\n },\n /**\n * The whole content of the card will be expandable in accordion manner\n */\n expandable: {\n type: Boolean,\n default: false,\n },\n /**\n * Sets the expandable card in a closed state\n */\n closed: {\n type: Boolean,\n default: false,\n },\n /**\n * Disables the expandable card\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n /**\n * List of actions that will be used to render the buttons.\n * First element in the list will be rendered as \"primary\".\n * All elements after the first will be rendered as \"secondary\".\n *\n * Each object in the list should have a `title`, an `event` and\n * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n *\n * `title`: Button's text.\n *\n * `event`: Event triggered when clicking the Button.\n *\n * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * ```\n * [{\n * title: 'Primary',\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 * Defines the layout in which the button actions is presented.\n * It can be one of:\n *\n * @values BUTTONS_START\n * @values BUTTONS_END\n * @values FILL_CONTAINER\n * @values SPACE_BETWEEN\n * @values VERTICAL_STACK\n */\n actionsLayout: {\n type: String as PropType<BentoButtonActionsLayout>,\n default: BentoButtonActionsLayout.BUTTONS_END,\n validator: (value: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(value),\n },\n },\n emits: ['click', 'expanded'],\n setup(props, { emit, slots }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const hasSlot = useHasSlot(slots);\n\n const cardId = generateUid('card');\n const showContent = ref(!props.closed);\n watch(\n () => props.closed,\n value => {\n showContent.value = !value;\n }\n );\n const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n const showCardBody = computed(\n () =>\n (hasSlot('content') || props.actions?.length) &&\n (!props.expandable || (props.expandable && showContent.value))\n );\n const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n const cardConditionalClasses = computed(() => ({\n [`b-card--${props.background}`]: props.background,\n 'b-card--expandable': props.expandable,\n 'b-card--disabled': props.expandable && props.disabled,\n }));\n\n const cardHeaderConditionalClasses = computed(() => ({\n 'b-card__header--expandable': props.expandable,\n 'b-card__header--without-body': !props.expandable && !showCardBody.value,\n }));\n\n const cardToggleConditionalClasses = computed(() => ({\n 'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n }));\n\n const cardBodyConditionalClasses = computed(() => ({\n 'b-card__body--expandable': props.expandable && hasSlot('content'),\n 'b-card__body--without-header': !props.expandable && !showHeader.value,\n }));\n\n const cardContentConditionalClasses = computed(() => ({\n 'b-card__content--without-header': !props.expandable && !showHeader.value,\n 'b-card__content--expandable': props.expandable,\n }));\n\n const cardActionsConditionalClasses = computed(() => {\n const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n return {\n 'b-card__actions--without-content': isNotExpandableWithoutContent,\n 'b-card__actions--without-content-and-with-header':\n isNotExpandableWithoutContent && showHeader.value,\n };\n });\n\n const cardTitleWrapperConditionalClasses = computed(() => ({\n 'b-card__title-wrapper--truncated': hasSlot('header'),\n }));\n\n const typography = computed(() => ({\n el: BentoTypographyElement.DIV,\n variant:\n props.titleSize === BentoCardTitleSize.DEFAULT\n ? BentoTypographyVariant.TITLE\n : BentoTypographyVariant.BODY,\n strongest: props.titleSize === BentoCardTitleSize.SMALL,\n wide: props.titleSize === BentoCardTitleSize.SMALL,\n }));\n\n const toggleExpansion = () => {\n if (!props.disabled) {\n showContent.value = !showContent.value;\n emit('expanded', showContent.value);\n }\n };\n\n const onClick = () => {\n if (!props.disabled) {\n emit('click');\n }\n };\n\n return {\n // Values\n cardId,\n cardConditionalClasses,\n cardBodyConditionalClasses,\n cardHeaderConditionalClasses,\n cardContentConditionalClasses,\n cardActionsConditionalClasses,\n cardTitleWrapperConditionalClasses,\n cardToggleConditionalClasses,\n showCardBody,\n showContent,\n tabIndex,\n showHeader,\n showTitleWrapper,\n typography,\n\n // Methods\n hasSlot,\n onClick,\n t,\n toggleExpansion,\n\n // Enums\n BentoTypographyVariant,\n BentoTypographyElement,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","_sfc_main","defineComponent","messages","ChevronUpIcon","ChevronDownIcon","BentoTypography","BentoButtonActions","BentoButtonActionsLayout","value","props","emit","slots","t","useI18n","hasSlot","useHasSlot","cardId","generateUid","showContent","ref","watch","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","BentoTypographyElement","BentoTypographyVariant","openBlock","createElementBlock","normalizeClass","_ctx","_cache","args","createElementVNode","_hoisted_2","_hoisted_3","createBlock","_component_chevron_up_icon","_component_chevron_down_icon","createCommentVNode","_component_bento_typography","mergeProps","withCtx","renderSlot","_hoisted_1"],"mappings":"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"}
|
package/dist/checkbox.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { B as k, b as m } from "./chunks/checkbox.
|
|
2
|
-
import { a as J } from "./chunks/checkbox.
|
|
1
|
+
import { B as k, b as m } from "./chunks/checkbox.ba6545d7.js";
|
|
2
|
+
import { a as J } from "./chunks/checkbox.ba6545d7.js";
|
|
3
3
|
import { defineComponent as v, computed as n, toRef as E, resolveComponent as d, openBlock as s, createElementBlock as g, createVNode as C, normalizeClass as S, withCtx as u, Fragment as B, renderList as I, createBlock as f, createSlots as G, createTextVNode as y, toDisplayString as _, createCommentVNode as M } from "vue";
|
|
4
4
|
import { g as V } from "./chunks/unique-id.a2a2b458.js";
|
|
5
|
-
import { d as x } from "./chunks/index.
|
|
6
|
-
import { C as w } from "./chunks/controls-group.
|
|
7
|
-
import { E as A } from "./chunks/error-message.
|
|
5
|
+
import { d as x } from "./chunks/index.a169ce0d.js";
|
|
6
|
+
import { C as w } from "./chunks/controls-group.27f1524d.js";
|
|
7
|
+
import { E as A } from "./chunks/error-message.a784820d.js";
|
|
8
8
|
import { _ as T } from "./chunks/_plugin-vue_export-helper.dad06003.js";
|
|
9
|
-
import "./assets/
|
|
9
|
+
import "./assets/index10.css";
|
|
10
10
|
var t = /* @__PURE__ */ ((e) => (e.HORIZONTAL = "horizontal", e.VERTICAL = "vertical", e))(t || {});
|
|
11
11
|
const U = v({
|
|
12
12
|
name: "bento-checkbox-group",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as _, computed as y, ref as C, resolveComponent as m, openBlock as n, createElementBlock as i, normalizeClass as h, renderSlot as r, createCommentVNode as l, createBlock as g, withCtx as S } from "vue";
|
|
2
|
-
import { B, a as k, b as L } from "./index.
|
|
2
|
+
import { B, a as k, b as L } from "./index.a169ce0d.js";
|
|
3
3
|
import { u as O } from "./use-has-slot.068222e6.js";
|
|
4
4
|
import { _ as T } from "./_plugin-vue_export-helper.dad06003.js";
|
|
5
5
|
import "../assets/base-button.css";
|
|
@@ -108,4 +108,4 @@ export {
|
|
|
108
108
|
V as B,
|
|
109
109
|
e as a
|
|
110
110
|
};
|
|
111
|
-
//# sourceMappingURL=base-button.
|
|
111
|
+
//# sourceMappingURL=base-button.7198ce06.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-button.
|
|
1
|
+
{"version":3,"file":"base-button.7198ce06.js","sources":["../../../vue2/src/components/internal/base-button/base-button.types.ts","../../../vue2/src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n DESTRUCTIVE = 'critical',\n ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n BLUR = 'blur',\n CLICK = 'click',\n FOCUS = 'focus',\n KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n BUTTON = 'button',\n RESET = 'reset',\n SUBMIT = 'submit',\n}\n","<template>\n <button\n ref=\"bentoBaseButtonRef\"\n class=\"b-base-button\"\n :class=\"conditionalClasses\"\n :disabled=\"disabled\"\n :type=\"type\"\n :aria-expanded=\"ariaAttributes['aria-expanded']\"\n @click=\"onClickButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n <slot name=\"iconLeft\" />\n </span>\n <bento-typography\n v-if=\"hasSlot('default')\"\n :el=\"BentoTypographyElement.SPAN\"\n :variant=\"BentoTypographyVariant.BODY\"\n stronger\n class=\"b-base-button__label\"\n >\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { Booleanish } from '@/types';\n\n /**\n * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n *\n * * @example\n * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n *\n * export default {\n * components: { BaseButton, YourImportedIcon },\n * props: {\n * text:\n * },\n * template: `\n * <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n * <template #iconLeft><your-imported-icon></template>\n * Button text\n * <template #iconRight><your-imported-icon></template>\n * </base-button>\n * `,\n * emits: [BentoButtonEvent.CLICK],\n * setup: (prps, { emit }) => {\n * const onClick = value => emit(BaseButtonEvent.CLICK, value);\n *\n * return {\n * onClick,\n * };\n * }\n * }\n */\n export default defineComponent({\n name: 'base-button',\n components: { BentoTypography },\n props: {\n /**\n * Disables button functionality\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n /**\n * Displays button as critical\n */\n critical: {\n type: Boolean,\n default: false,\n },\n /**\n * The default behavior of the button.\n * Possible values are: 'button', 'reset', 'submit'\n */\n type: {\n type: String as PropType<ButtonHTMLAttributes['type']>,\n default: 'button',\n },\n },\n emits: [\n BentoBaseButtonEvent.CLICK,\n BentoBaseButtonEvent.FOCUS,\n BentoBaseButtonEvent.BLUR,\n BentoBaseButtonEvent.KEYDOWN_ESC,\n ],\n setup(props, { slots, emit, attrs }) {\n const ariaAttributes = computed(() => ({\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const bentoBaseButtonRef = ref(null);\n\n const conditionalClasses = computed(() => ({\n [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n }));\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit(BentoBaseButtonEvent.CLICK, e);\n }\n };\n\n return {\n // Enums\n BentoTypographyElement,\n BentoTypographyVariant,\n\n // Values\n ariaAttributes,\n conditionalClasses,\n\n // Methods\n onClickButton,\n hasSlot: useHasSlot(slots),\n\n // Refs\n bentoBaseButtonRef,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","e","useHasSlot","openBlock","createElementBlock","normalizeClass","_ctx","createCommentVNode","createBlock","_component_bento_typography","_hoisted_3"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;AC4DR,MAAAE,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACwB,OAAA;AAAA;AAAA;AAAA;AAAA,IACvB,UAAA;AAAA,MAIO,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA,IACb,UAAA;AAAA,MAIU,MAAA;AAAA,MACA,SAAA;AAAA,IACG;AAAA;AAAA;AAAA;AAAA;AAAA,IACb,MAAA;AAAA,MAKM,MAAA;AAAA,MACI,SAAA;AAAA,IACG;AAAA,EACb;AAAA,EACJ,OAAA;AAAA,IACOJ,EAAA;AAAA,IACkBA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACzB,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEI,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACe;AAAA,KAAA,GAGtDC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAA2C,CAAA,kBAAAZ,EAAA,aAAA,GAAAO,EAAA;AAAA,MAC2B,CAAA,kBAAAP,EAAA,WAAA,GAAA,CAAAQ,EAAA;AAAA,IACD,EAAA;AASrE,WAAA;AAAA;AAAA,MAAO,wBAAAS;AAAA,MAEH,wBAAAC;AAAA;AAAA,MACA,gBAAAP;AAAA,MAGA,oBAAAK;AAAA;AAAA,MACA,eAbJ,CAAAG,MAAA;AACI,QAAAZ,EAAA,YACIE,EAAAP,EAAA,OAAAiB,CAAA;AAAA,MACJ;AAAA,MAaA,SAAAC,EAAAZ,CAAA;AAAA;AAAA,MACyB,oBAAAM;AAAA,IAGzB;AAAA,EACJ;AAER,CAAA;;EA3H2C,KAAA;AAAA,EAA2B,OAAA;AAAA;;EAY1B,KAAA;AAAA,EAA4B,OAAA;AAAA;;;;AAnB/D,SAAAO,EAAA,GAAAC,EAAA,UAAA;AAAA,IACG,KAAA;AAAA,IACP,OAAAC,EAAA,CAAA,iBAAAC,EAAA,kBAAA,CAAA;AAAA,IACU,UAAAA,EAAA;AAAA,IACG,MAAAA,EAAA;AAAA,IACR,iBAAAA,EAAA,eAAA,eAAA;AAAA;EAEa,GAAA;AAAA;;IAIT,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAOSD,EAAA,QAAA,SAAA,KAAAH,EAAA,GAAAK,EAAAC,GAAA;AAAA,MANiB,KAAA;AAAA,MAC/B,IAAAH,EAAA,uBAAA;AAAA,MACO,SAAAA,EAAA,uBAAA;AAAA,MACoB,UAAA;AAAA;;;;;;IAIpB,GAAA,GAAA,CAAA,MAAA,SAAA,CAAA,KAAAC,EAAA,IAAA,EAAA;AAAA,IAAZD,EAAA,QAAA,WAAA,KAAAH,EAAA,GAAAC,EAAA,QAAAM,GAAA;AAAA;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as f, computed as l, resolveComponent as C, openBlock as n, createElementBlock as o, createElementVNode as T, normalizeClass as B, Fragment as N, renderList as y, createVNode as A, createSlots as E, withCtx as d, createTextVNode as g, toDisplayString as S, createBlock as k, resolveDynamicComponent as I } from "vue";
|
|
2
|
-
import { B as V, a as _ } from "./button.
|
|
2
|
+
import { B as V, a as _ } from "./button.9cd485bc.js";
|
|
3
3
|
import { _ as O } from "./_plugin-vue_export-helper.dad06003.js";
|
|
4
4
|
import "../assets/button-actions.css";
|
|
5
5
|
var p = /* @__PURE__ */ ((t) => (t.BUTTONS_END = "buttons-end", t.FILL_CONTAINER = "fill-container", t.SPACE_BETWEEN = "space-between", t.VERTICAL_STACK = "vertical-stack", t))(p || {}), v = /* @__PURE__ */ ((t) => (t.BUTTONS_START = "buttons-start", t))(v || {});
|
|
@@ -121,4 +121,4 @@ export {
|
|
|
121
121
|
v as b,
|
|
122
122
|
u as c
|
|
123
123
|
};
|
|
124
|
-
//# sourceMappingURL=button-actions.
|
|
124
|
+
//# sourceMappingURL=button-actions.6d64b71d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-actions.
|
|
1
|
+
{"version":3,"file":"button-actions.6d64b71d.js","sources":["../../../vue2/src/components/button/components/button-actions/button-actions.types.ts","../../../vue2/src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { VueNodeElement } from '@/types';\nimport type { BentoButtonVariant } from '@/components/button';\n\nexport interface BentoButtonActionObject {\n title: string;\n event: (event: Event) => void;\n icon?: VueNodeElement;\n disabled?: boolean;\n variant?: BentoButtonVariant;\n critical?: boolean;\n}\n\nexport type BentoButtonActionsList = Array<BentoButtonActionObject>;\n\nexport enum BentoButtonActionsLayoutBasic {\n BUTTONS_END = 'buttons-end',\n FILL_CONTAINER = 'fill-container',\n SPACE_BETWEEN = 'space-between',\n VERTICAL_STACK = 'vertical-stack',\n}\n\nexport enum BentoButtonActionsLayoutExtended {\n BUTTONS_START = 'buttons-start',\n}\n\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n","<template>\n <div class=\"b-button-actions\">\n <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n <div v-for=\"(button, index) in reversedActionsList\" :key=\"index\" class=\"b-button-actions__button-wrapper\">\n <bento-button\n :critical=\"button.critical\"\n :disabled=\"button.disabled\"\n :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n @click=\"button.event\"\n >\n <template v-if=\"button.icon\" #iconLeft>\n <component :is=\"button.icon\" :svg-title=\"button.title\"></component>\n </template>\n {{ button.title }}\n </bento-button>\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoButtonVariant } from '@/core/components/button/button.types';\n import BentoButton from '../../button.vue';\n import { BentoButtonActionsLayout, BentoButtonActionsList } from './button-actions.types';\n\n export default defineComponent({\n name: 'bento-button-actions',\n components: { BentoButton },\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 *\n * Each object in the list should have a `title`, an `event` and\n * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n *\n * `title`: Button's text.\n *\n * `event`: Event triggered when clicking the Button.\n *\n * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n *\n * `disabled` (optional): Disables the action.\n *\n * `variant` (optional): Sets button's variant background color.\n *\n * `critical` (optional): Sets button red border adn color.\n *\n * ```\n * [{\n * title: 'Primary',\n * event: () => { ... },\n * icon: FourPeopleIcon\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * disabled: true,\n * variant: BentoButtonVariant.PRIMARY,\n * critical: true\n * }]\n * ```\n */\n actions: {\n type: Array as PropType<BentoButtonActionsList>,\n required: true,\n },\n\n /**\n * Defines the layout in which the button actions is presented.\n * It can be one of:\n *\n * @values BUTTONS_START\n * @values BUTTONS_END\n * @values FILL_CONTAINER\n * @values SPACE_BETWEEN\n * @values VERTICAL_STACK\n */\n layout: {\n type: String as PropType<BentoButtonActionsLayout>,\n default: BentoButtonActionsLayout.BUTTONS_END,\n validator: (layout: BentoButtonActionsLayout) =>\n Object.values(BentoButtonActionsLayout).includes(layout),\n },\n },\n setup(props) {\n const reversedActionsList = computed(() => props.actions.slice().reverse());\n const generateButtonVariantByIndex = actionIndex => {\n const lastActionIndex = props.actions.length - 1;\n return actionIndex === lastActionIndex ? BentoButtonVariant.PRIMARY : BentoButtonVariant.SECONDARY;\n };\n\n const conditionalClasses = computed(() => ({\n [`b-button-actions--${props.layout}`]: true,\n }));\n\n return {\n // Values\n conditionalClasses,\n reversedActionsList,\n\n // Methods\n generateButtonVariantByIndex,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","_sfc_main","defineComponent","BentoButton","layout","props","reversedActionsList","computed","generateButtonVariantByIndex","actionIndex","lastActionIndex","BentoButtonVariant","openBlock","createElementBlock","_hoisted_1","createElementVNode","normalizeClass","_ctx","index","button","createBlock","resolveDynamicComponent"],"mappings":";;;;AAcY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,eACAA,EAAA,iBAAA,kBACAA,EAAA,gBAAA,iBACAA,EAAA,iBAAA,kBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,gBAAA,iBADQA,IAAAD,KAAA,CAAA,CAAA;AAIL,MAAAE,IAAA,EAAA,GAAAJ,GAAA,GAAAE,EAAA,GCCHG,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAAA,EACrB,YAAA,EAAA,aAAAC,EAAA;AAAA,EACoB,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACnB,SAAA;AAAA,MAmCM,MAAA;AAAA,MACC,UAAA;AAAA,IACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACd,QAAA;AAAA,MAYQ,MAAA;AAAA,MACE,SAAAH,EAAA;AAAA,MAC4B,WAAA,CAAAI,MAAA,OAAA,OAAAJ,CAAA,EAAA,SAAAI,CAAA;AAAA,IAEyB;AAAA,EAC/D;AAAA,EACJ,MAAAC,GAAA;AAEI,UAAAC,IAAAC,EAAA,MAAAF,EAAA,QAAA,MAAA,EAAA,QAAA,CAAA,GACAG,IAAA,CAAAC,MAAA;AACI,YAAAC,IAAAL,EAAA,QAAA,SAAA;AACA,aAAAI,MAAAC,IAAAC,EAAA,UAAAA,EAAA;AAAA,IAAyF;AAO7F,WAAA;AAAA;AAAA,MAAO,oBAJPJ,EAAA,OAAA;AAAA,QAA2C,CAAA,qBAAAF,EAAA,QAAA,GAAA;AAAA,MACA,EAAA;AAAA,MAKvC,qBAAAC;AAAA;AAAA,MACA,8BAAAE;AAAA,IAGA;AAAA,EACJ;AAER,CAAA;;;;AAxGS,SAAAI,EAAA,GAAAC,EAAA,OAAAC,GAAA;AAAA,IAAMC,EAAA,OAAA;AAAA,MAA8E,OAAAC,EAAA,CAAA,uCAAAC,EAAA,kBAAA,CAAA;AAAA;;6DACfL,EAAA,GAAAC,EAAA,OAAA;AAAA,QAAmC,KAAAK;AAAA,QACrG,OAAA;AAAA,MAAA,GAAA;AAAA;UAE8B,UAAAC,EAAA;AAAA,UACT,UAAAA,EAAA;AAAA,UACF,SAAAA,EAAA,WAAAF,EAAA,6BAAAC,CAAA;AAAA;;;;;UAEC,GAAA;AAAA,QAAA,GAAA;AAAA;;;eAC6BN,EAAA,GAAAQ,EAAAC,EAAAF,EAAA,IAAA,GAAA;AAAA;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineComponent as h, computed as o, resolveComponent as k, openBlock as a, createBlock as f, resolveDynamicComponent as C, mergeProps as S, withCtx as m, createElementBlock as _, renderSlot as d, createCommentVNode as u } from "vue";
|
|
2
|
-
import { B as E, a as D, b as T } from "./index.
|
|
2
|
+
import { B as E, a as D, b as T } from "./index.a169ce0d.js";
|
|
3
3
|
import { u as B } from "./use-has-slot.068222e6.js";
|
|
4
4
|
import { BentoLink as $, BentoLinkVariant as N } from "../link.js";
|
|
5
5
|
import { _ as R } from "./_plugin-vue_export-helper.dad06003.js";
|
|
@@ -140,4 +140,4 @@ export {
|
|
|
140
140
|
b as a,
|
|
141
141
|
n as b
|
|
142
142
|
};
|
|
143
|
-
//# sourceMappingURL=button.
|
|
143
|
+
//# sourceMappingURL=button.9cd485bc.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.4ccc3a72.js","sources":["../../../core/src/components/button/button.types.ts","../../../vue2/src/components/button/button.vue"],"sourcesContent":["export enum BentoButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n CONDENSED = 'condensed',\n DESTRUCTIVE = 'critical',\n DISABLED = 'disabled',\n ICON_ONLY = 'icon-only',\n}\n","<template>\n <component\n :is=\"componentType\"\n v-bind=\"componentProps\"\n class=\"b-button\"\n :class=\"conditionalClasses\"\n @click.capture=\"onClickButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-button__icon-left\" data-testid=\"icon-button-left\">\n <slot name=\"iconLeft\" />\n </span>\n <bento-typography\n v-if=\"hasSlot('default')\"\n :el=\"BentoTypographyElement.SPAN\"\n :variant=\"BentoTypographyVariant.BODY\"\n stronger\n class=\"b-button__label\"\n >\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { Booleanish } from '@/types';\n import type { RouterLinkProps } from 'vue-router/types/router';\n import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n import { BentoLink, BentoLinkVariant } from '../link';\n\n // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n // eslint-disable-next-line vue/require-default-prop\n args?: { props: RouterLinkProps };\n\n /**\n * Set the rendered link to a regular external anchor link.\n */\n external: boolean;\n }\n\n /**\n * Button component for all the various types of bento buttons.\n *\n * @usage\n * import { BentoButton, AdlIconPosition } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoButton },\n * template: `\n * <bento-button\n * disabled\n * :icon-position=\"AdlIconPosition.AFTER\"\n * >\n * Button text\n * </bento-button>\n * `,\n * }\n */\n export default defineComponent({\n name: 'bento-button',\n components: { BentoTypography },\n props: {\n /**\n * Disables button functionality\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Displays button as critical\n */\n critical: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The default behavior of the button.\n * Possible values are: 'button', 'reset', 'submit'\n */\n type: {\n type: String as PropType<ButtonHTMLAttributes['type']>,\n default: 'button',\n },\n\n /**\n * Reduces sizing of button\n */\n condensed: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Types of flavour of Button\n * @values primary, secondary, tertiary\n */\n variant: {\n type: String as PropType<BentoButtonVariant>,\n default: BentoButtonVariant.PRIMARY,\n validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n },\n\n /**\n * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n */\n link: {\n type: Object,\n default: undefined,\n },\n },\n emits: ['click', 'focus', 'blur', 'keydown.esc'],\n setup(props, { slots, emit, attrs }) {\n const componentType = computed(() => {\n if (props?.link !== undefined) {\n return BentoLink;\n }\n return 'button';\n });\n const ariaAttributes = computed(() => ({\n 'aria-controls': attrs['aria-controls']?.toString() as string,\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const componentProps = computed(() =>\n componentType.value === 'button'\n ? {\n ...ariaAttributes.value,\n disabled: props.disabled,\n type: props.type,\n }\n : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT }\n );\n\n const variantClass = computed((): { [x: string]: boolean } => ({\n [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n }));\n\n const conditionalClasses = computed(\n (): {\n [x: string]: boolean;\n } => ({\n ...variantClass.value,\n [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n })\n );\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit('click', e);\n } else {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n return {\n // Enums\n BentoTypographyElement,\n BentoTypographyVariant,\n\n // Values\n ariaAttributes,\n conditionalClasses,\n componentType,\n componentProps,\n\n // Methods\n onClickButton,\n hasSlot: useHasSlot(slots),\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","_sfc_main","defineComponent","BentoTypography","value","props","slots","emit","attrs","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","useHasSlot","_ctx","withCtx","openBlock","createElementBlock","_hoisted_1","createCommentVNode","createBlock","_component_bento_typography","_hoisted_2"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.9cd485bc.js","sources":["../../../core/src/components/button/button.types.ts","../../../vue2/src/components/button/button.vue"],"sourcesContent":["export enum BentoButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n}\n\nexport enum BentoButtonPropClass {\n CONDENSED = 'condensed',\n DESTRUCTIVE = 'critical',\n DISABLED = 'disabled',\n ICON_ONLY = 'icon-only',\n}\n","<template>\n <component\n :is=\"componentType\"\n v-bind=\"componentProps\"\n class=\"b-button\"\n :class=\"conditionalClasses\"\n @click.capture=\"onClickButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-button__icon-left\" data-testid=\"icon-button-left\">\n <slot name=\"iconLeft\" />\n </span>\n <bento-typography\n v-if=\"hasSlot('default')\"\n :el=\"BentoTypographyElement.SPAN\"\n :variant=\"BentoTypographyVariant.BODY\"\n stronger\n class=\"b-button__label\"\n >\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { Booleanish } from '@/types';\n import type { RouterLinkProps } from 'vue-router/types/router';\n import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n import { BentoLink, BentoLinkVariant } from '../link';\n\n // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n // eslint-disable-next-line vue/require-default-prop\n args?: { props: RouterLinkProps };\n\n /**\n * Set the rendered link to a regular external anchor link.\n */\n external: boolean;\n }\n\n /**\n * Button component for all the various types of bento buttons.\n *\n * @usage\n * import { BentoButton, AdlIconPosition } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoButton },\n * template: `\n * <bento-button\n * disabled\n * :icon-position=\"AdlIconPosition.AFTER\"\n * >\n * Button text\n * </bento-button>\n * `,\n * }\n */\n export default defineComponent({\n name: 'bento-button',\n components: { BentoTypography },\n props: {\n /**\n * Disables button functionality\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Displays button as critical\n */\n critical: {\n type: Boolean,\n default: false,\n },\n\n /**\n * The default behavior of the button.\n * Possible values are: 'button', 'reset', 'submit'\n */\n type: {\n type: String as PropType<ButtonHTMLAttributes['type']>,\n default: 'button',\n },\n\n /**\n * Reduces sizing of button\n */\n condensed: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Types of flavour of Button\n * @values primary, secondary, tertiary\n */\n variant: {\n type: String as PropType<BentoButtonVariant>,\n default: BentoButtonVariant.PRIMARY,\n validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n },\n\n /**\n * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n */\n link: {\n type: Object,\n default: undefined,\n },\n },\n emits: ['click', 'focus', 'blur', 'keydown.esc'],\n setup(props, { slots, emit, attrs }) {\n const componentType = computed(() => {\n if (props?.link !== undefined) {\n return BentoLink;\n }\n return 'button';\n });\n const ariaAttributes = computed(() => ({\n 'aria-controls': attrs['aria-controls']?.toString() as string,\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const componentProps = computed(() =>\n componentType.value === 'button'\n ? {\n ...ariaAttributes.value,\n disabled: props.disabled,\n type: props.type,\n }\n : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT }\n );\n\n const variantClass = computed((): { [x: string]: boolean } => ({\n [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n }));\n\n const conditionalClasses = computed(\n (): {\n [x: string]: boolean;\n } => ({\n ...variantClass.value,\n [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !slots.default,\n [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n })\n );\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit('click', e);\n } else {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n return {\n // Enums\n BentoTypographyElement,\n BentoTypographyVariant,\n\n // Values\n ariaAttributes,\n conditionalClasses,\n componentType,\n componentProps,\n\n // Methods\n onClickButton,\n hasSlot: useHasSlot(slots),\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","_sfc_main","defineComponent","BentoTypography","value","props","slots","emit","attrs","componentType","computed","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","BentoTypographyElement","BentoTypographyVariant","useHasSlot","_ctx","withCtx","openBlock","createElementBlock","_hoisted_1","createCommentVNode","createBlock","_component_bento_typography","_hoisted_2"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent as ce, computed as p, resolveComponent as A, openBlock as _, createElementBlock as O, normalizeClass as Se, withKeys as we, createElementVNode as k, createVNode as C, ref as L, watch as H, nextTick as ke, toRef as G, resolveDirective as Re, withDirectives as Ae, mergeProps as Pe, toHandlers as Le, createBlock as z, withCtx as K, createCommentVNode as ie, createTextVNode as he, toDisplayString as _e, Fragment as J, renderList as Z, reactive as pe } from "vue";
|
|
2
2
|
import { r as h, t as y, g as Te, e as de, d as $e, f as Ue } from "./index.f55fdc32.js";
|
|
3
|
-
import { t as b, B as Be, a as Ye, f as Ne } from "./index.
|
|
4
|
-
import { B as Ce, a as We } from "./button.
|
|
5
|
-
import { B as Ve, a as Ge, b as He } from "./index.
|
|
3
|
+
import { t as b, B as Be, a as Ye, f as Ne } from "./index.04996cf6.js";
|
|
4
|
+
import { B as Ce, a as We } from "./button.9cd485bc.js";
|
|
5
|
+
import { B as Ve, a as Ge, b as He } from "./index.a169ce0d.js";
|
|
6
6
|
import { u as Fe } from "./i18n.6c402773.js";
|
|
7
7
|
import { g as je } from "./unique-id.a2a2b458.js";
|
|
8
8
|
import { a as qe } from "./debounce.f8d92e44.js";
|
|
@@ -873,4 +873,4 @@ export {
|
|
|
873
873
|
I as a,
|
|
874
874
|
V as b
|
|
875
875
|
};
|
|
876
|
-
//# sourceMappingURL=calendar.
|
|
876
|
+
//# sourceMappingURL=calendar.6226cd90.js.map
|