@adyen/bento-vue3 1.11.0 → 1.12.0

package/dist/pagination.js

@@ -1,13 +1,13 @@
-import { defineComponent as N, ref as k, computed as v, resolveComponent as d, openBlock as o, createElementBlock as m, createVNode as p, withCtx as c, createBlock as f, resolveDynamicComponent as B, mergeProps as b, createSlots as D, createTextVNode as T, toDisplayString as h, createCommentVNode as $, createElementVNode as u, toRefs as Z, normalizeClass as W, pushScopeId as z, popScopeId as U } from "vue";
-import { u as V } from "./chunks/aria-label.ac9651a5.js";
-import { B as A } from "./chunks/index.09f7f1b5.js";
-import { B as E } from "./chunks/dropdown.96431c25.js";
+import { defineComponent as N, ref as k, computed as v, resolveComponent as c, openBlock as o, createElementBlock as _, createVNode as u, withCtx as m, createBlock as f, resolveDynamicComponent as B, mergeProps as b, createSlots as Z, createTextVNode as T, toDisplayString as h, createCommentVNode as $, createElementVNode as d, toRefs as z, normalizeClass as W, pushScopeId as U, popScopeId as V } from "vue";
+import { u as j } from "./chunks/aria-label.ac9651a5.js";
+import { B as A } from "./chunks/index.fcfca776.js";
+import { B as E } from "./chunks/dropdown.b0e80aaa.js";
 import { g as R } from "./chunks/unique-id.a2a2b458.js";
 import { g as F, a as M } from "./chunks/i18n.6c402773.js";
 import { _ as P } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { a as j } from "./chunks/button.623a46d2.js";
-import "./assets/index28.css";
-const J = {
+import { a as J } from "./chunks/button.7ce49c43.js";
+import "./assets/index36.css";
+const K = {
   "en-US": {
     showingItems: "Showing {itemCount} items",
     showingItemsWithTotal: "Showing {itemCount} of {totalCount} items"
@@ -32,16 +32,16 @@ const J = {
     showingItems: "Mostrando {itemCount} artículos",
     showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} artículos"
   }
-}, K = 50, y = [
+}, H = 50, y = [
   { label: "10", value: 10 },
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   // DEFAULT_NUMBER_OF_RESULTS
   { label: "75", value: 75 },
   { label: "100", value: 100 }
-], H = N({
+], q = N({
   name: "bento-pagination-context-results-per-page",
-  i18n: { messages: J },
+  i18n: { messages: K },
   components: {
     BentoDropdown: E,
     BentoTypography: A
@@ -52,7 +52,7 @@ const J = {
      */
     itemsPerPage: {
       type: Number,
-      default: K,
+      default: H,
       validator: (e) => y.some(({ value: t }) => t === e)
     },
     /**
@@ -78,19 +78,19 @@ const J = {
     };
   }
 });
-const q = { class: "b-pagination-results-per-page" };
-function G(e, t, n, i, s, l) {
-  const g = d("bento-dropdown"), a = d("bento-typography");
-  return o(), m("div", q, [
-    p(a, { el: "div" }, {
-      default: c(() => [
+const G = { class: "b-pagination-results-per-page" };
+function Q(e, t, n, i, s, l) {
+  const g = c("bento-dropdown"), a = c("bento-typography");
+  return o(), _("div", G, [
+    u(a, { el: "div" }, {
+      default: m(() => [
         (o(), f(B(e.i18nComponent), b(e.getI18nProps(e.translationPathKey), {
           class: "b-pagination-results-per-page__dropdown-container",
           tag: "div",
           plural: e.totalCount
-        }), D({
-          itemCount: c(() => [
-            p(g, {
+        }), Z({
+          itemCount: m(() => [
+            u(g, {
               id: e.dropdownId,
               "aria-label": e.$t(e.translationPathKey, { itemCount: e.itemsPerPage, totalCount: e.totalCount }),
               class: "b-pagination-results-per-page__dropdown",
@@ -104,7 +104,7 @@ function G(e, t, n, i, s, l) {
         }, [
           e.totalCount ? {
             name: "totalCount",
-            fn: c(() => [
+            fn: m(() => [
               T(h(e.totalCount), 1)
             ]),
             key: "0"
@@ -115,7 +115,7 @@ function G(e, t, n, i, s, l) {
     })
   ]);
 }
-const Q = /* @__PURE__ */ P(H, [["render", G], ["__scopeId", "data-v-bb39845f"]]), X = {
+const X = /* @__PURE__ */ P(q, [["render", Q], ["__scopeId", "data-v-bb39845f"]]), Y = {
   "en-US": {
     pageOfTotalPages: "Page {page} of {totalPages}",
     pageOneOfOne: "Page 1 of 1",
@@ -146,8 +146,8 @@ const Q = /* @__PURE__ */ P(H, [["render", G], ["__scopeId", "data-v-bb39845f"]]
     pageOneOfOne: "Página 1 de 1",
     pageNumber: "Página {page}"
   }
-}, Y = N({
-  i18n: { messages: X },
+}, x = N({
+  i18n: { messages: Y },
   name: "bento-pagination-context",
   components: {
     BentoDropdown: E,
@@ -194,18 +194,18 @@ const Q = /* @__PURE__ */ P(H, [["render", G], ["__scopeId", "data-v-bb39845f"]]
     };
   }
 });
-const x = { class: "b-pagination-context" };
-function ee(e, t, n, i, s, l) {
-  const g = d("bento-dropdown"), a = d("bento-typography");
-  return o(), m("div", x, [
+const ee = { class: "b-pagination-context" };
+function te(e, t, n, i, s, l) {
+  const g = c("bento-dropdown"), a = c("bento-typography");
+  return o(), _("div", ee, [
     e.totalPages > 1 ? (o(), f(a, {
       key: 0,
       el: "div"
     }, {
-      default: c(() => [
+      default: m(() => [
         (o(), f(B(e.i18nComponent), b(e.getI18nProps("pageOfTotalPages"), { tag: "div" }), {
-          page: c(() => [
-            p(g, {
+          page: m(() => [
+            u(g, {
               id: e.dropdownId,
               "aria-label": e.$t("pageOfTotalPages", { page: e.page, totalPages: e.totalPages }),
               class: "b-pagination-context__dropdown",
@@ -216,7 +216,7 @@ function ee(e, t, n, i, s, l) {
               onInput: e.onPageSelectChange
             }, null, 8, ["id", "aria-label", "items", "value", "virtual-scroll", "onInput"])
           ]),
-          totalPages: c(() => [
+          totalPages: m(() => [
             T(h(e.totalPages), 1)
           ]),
           _: 1
@@ -227,7 +227,7 @@ function ee(e, t, n, i, s, l) {
       key: 1,
       el: "span"
     }, {
-      default: c(() => [
+      default: m(() => [
         T(h(e.$t("pageOneOfOne")), 1)
       ]),
       _: 1
@@ -235,110 +235,110 @@ function ee(e, t, n, i, s, l) {
       key: 2,
       el: "span"
     }, {
-      default: c(() => [
+      default: m(() => [
         T(h(e.$t("pageNumber", { page: e.page })), 1)
       ]),
       _: 1
     }))
   ]);
 }
-const te = /* @__PURE__ */ P(Y, [["render", ee], ["__scopeId", "data-v-f8359ceb"]]);
+const ae = /* @__PURE__ */ P(x, [["render", te], ["__scopeId", "data-v-f8359ceb"]]);
 let L = 0;
-const ae = {
+const ne = {
   beforeCreate() {
     this.uuid = L.toString(), L += 1;
   }
-}, ne = { key: 0 }, oe = /* @__PURE__ */ u("path", {
+}, oe = { key: 0 }, ie = /* @__PURE__ */ d("path", {
   fill: "#00112C",
   d: "M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z"
-}, null, -1), ie = /* @__PURE__ */ u("path", {
+}, null, -1), se = /* @__PURE__ */ d("path", {
   fill: "#00112C",
   d: "M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z"
 }, null, -1);
-function se(e, t, n, i, s, l) {
-  return o(), m("svg", b({ role: "img" }, e.$attrs, {
+function le(e, t, n, i, s, l) {
+  return o(), _("svg", b({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (o(), m("title", ne, h(e.$attrs["svg-title"]), 1)) : $("", !0),
-    oe,
-    ie
+    e.$attrs["svg-title"] ? (o(), _("title", oe, h(e.$attrs["svg-title"]), 1)) : $("", !0),
+    ie,
+    se
   ], 16);
 }
-const le = /* @__PURE__ */ P(ae, [["render", se]]);
+const ge = /* @__PURE__ */ P(ne, [["render", le]]);
 let S = 0;
-const ge = {
+const re = {
   beforeCreate() {
     this.uuid = S.toString(), S += 1;
   }
-}, re = { key: 0 }, pe = /* @__PURE__ */ u("path", {
+}, pe = { key: 0 }, ue = /* @__PURE__ */ d("path", {
   fill: "#00112C",
   d: "M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z"
-}, null, -1), ue = /* @__PURE__ */ u("path", {
+}, null, -1), de = /* @__PURE__ */ d("path", {
   fill: "#00112C",
   d: "M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z"
 }, null, -1);
-function de(e, t, n, i, s, l) {
-  return o(), m("svg", b({ role: "img" }, e.$attrs, {
+function ce(e, t, n, i, s, l) {
+  return o(), _("svg", b({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (o(), m("title", re, h(e.$attrs["svg-title"]), 1)) : $("", !0),
-    pe,
-    ue
+    e.$attrs["svg-title"] ? (o(), _("title", pe, h(e.$attrs["svg-title"]), 1)) : $("", !0),
+    ue,
+    de
   ], 16);
 }
-const ce = /* @__PURE__ */ P(ge, [["render", de]]);
+const me = /* @__PURE__ */ P(re, [["render", ce]]);
 let I = 0;
-const me = {
+const _e = {
   beforeCreate() {
     this.uuid = I.toString(), I += 1;
   }
-}, _e = { key: 0 }, ve = /* @__PURE__ */ u("path", {
+}, ve = { key: 0 }, he = /* @__PURE__ */ d("path", {
   fill: "#00112C",
   d: "M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z"
 }, null, -1);
-function he(e, t, n, i, s, l) {
-  return o(), m("svg", b({ role: "img" }, e.$attrs, {
+function Pe(e, t, n, i, s, l) {
+  return o(), _("svg", b({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (o(), m("title", _e, h(e.$attrs["svg-title"]), 1)) : $("", !0),
-    ve
+    e.$attrs["svg-title"] ? (o(), _("title", ve, h(e.$attrs["svg-title"]), 1)) : $("", !0),
+    he
   ], 16);
 }
-const Pe = /* @__PURE__ */ P(me, [["render", he]]);
+const fe = /* @__PURE__ */ P(_e, [["render", Pe]]);
 let O = 0;
-const fe = {
+const be = {
   beforeCreate() {
     this.uuid = O.toString(), O += 1;
   }
-}, be = { key: 0 }, Ce = /* @__PURE__ */ u("path", {
+}, Ce = { key: 0 }, $e = /* @__PURE__ */ d("path", {
   fill: "#00112C",
   d: "M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z"
 }, null, -1);
-function $e(e, t, n, i, s, l) {
-  return o(), m("svg", b({ role: "img" }, e.$attrs, {
+function Te(e, t, n, i, s, l) {
+  return o(), _("svg", b({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (o(), m("title", be, h(e.$attrs["svg-title"]), 1)) : $("", !0),
-    Ce
+    e.$attrs["svg-title"] ? (o(), _("title", Ce, h(e.$attrs["svg-title"]), 1)) : $("", !0),
+    $e
   ], 16);
 }
-const Te = /* @__PURE__ */ P(fe, [["render", $e]]), Ne = {
+const Ne = /* @__PURE__ */ P(be, [["render", Te]]), we = {
   "en-US": {
     navigateToTheFirstPage: "Navigate to the first page",
     navigateToThePreviousPage: "Navigate to the previous page",
@@ -375,15 +375,15 @@ const Te = /* @__PURE__ */ P(fe, [["render", $e]]), Ne = {
     navigateToTheNextPage: "Ir a la página siguiente",
     navigateToTheLastPage: "Ir a la última página"
   }
-}, we = N({
-  i18n: { messages: Ne },
+}, ye = N({
+  i18n: { messages: we },
   name: "adl-pagination-controls",
   components: {
-    BentoButton: j,
-    SkipLeft: le,
-    SkipRight: ce,
-    ChevronLeft: Pe,
-    ChevronRight: Te
+    BentoButton: J,
+    SkipLeft: ge,
+    SkipRight: me,
+    ChevronLeft: fe,
+    ChevronRight: Ne
   },
   props: {
     /**
@@ -418,64 +418,64 @@ const Te = /* @__PURE__ */ P(fe, [["render", $e]]), Ne = {
     };
   }
 });
-const ye = { class: "b-pagination-controls" }, Le = { class: "b-pagination-controls__item" }, Se = { class: "b-pagination-controls__item" }, Ie = { class: "b-pagination-controls__item" }, Oe = { class: "b-pagination-controls__item" };
-function ke(e, t, n, i, s, l) {
-  const g = d("skip-left"), a = d("bento-button"), r = d("chevron-left"), C = d("chevron-right"), w = d("skip-right");
-  return o(), m("ul", ye, [
-    u("li", Le, [
-      p(a, {
+const Le = { class: "b-pagination-controls" }, Se = { class: "b-pagination-controls__item" }, Ie = { class: "b-pagination-controls__item" }, Oe = { class: "b-pagination-controls__item" }, ke = { class: "b-pagination-controls__item" };
+function Be(e, t, n, i, s, l) {
+  const g = c("skip-left"), a = c("bento-button"), r = c("chevron-left"), C = c("chevron-right"), w = c("skip-right");
+  return o(), _("ul", Le, [
+    d("li", Se, [
+      u(a, {
         disabled: e.isCurrentPageFirst,
         variant: "tertiary",
         condensed: "",
-        onClick: t[0] || (t[0] = (_) => e.navigate(1))
+        onClick: t[0] || (t[0] = (p) => e.navigate(1))
       }, {
-        iconLeft: c(() => [
-          p(g, {
+        iconLeft: m(() => [
+          u(g, {
             "svg-title": e.$t("navigateToTheFirstPage")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
       }, 8, ["disabled"])
     ]),
-    u("li", Se, [
-      p(a, {
+    d("li", Ie, [
+      u(a, {
         disabled: e.isCurrentPageFirst,
         variant: "tertiary",
         condensed: "",
-        onClick: t[1] || (t[1] = (_) => e.navigate(e.page - 1))
+        onClick: t[1] || (t[1] = (p) => e.navigate(e.page - 1))
       }, {
-        iconLeft: c(() => [
-          p(r, {
+        iconLeft: m(() => [
+          u(r, {
             "svg-title": e.$t("navigateToThePreviousPage")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
       }, 8, ["disabled"])
     ]),
-    u("li", Ie, [
-      p(a, {
+    d("li", Oe, [
+      u(a, {
         disabled: e.isNextButtonDisabled,
         variant: "tertiary",
         condensed: "",
-        onClick: t[2] || (t[2] = (_) => e.navigate(e.page + 1))
+        onClick: t[2] || (t[2] = (p) => e.navigate(e.page + 1))
       }, {
-        iconLeft: c(() => [
-          p(C, {
+        iconLeft: m(() => [
+          u(C, {
             "svg-title": e.$t("navigateToTheNextPage")
           }, null, 8, ["svg-title"])
         ]),
         _: 1
       }, 8, ["disabled"])
     ]),
-    u("li", Oe, [
-      p(a, {
+    d("li", ke, [
+      u(a, {
         disabled: e.isLastPageButtonDisabled,
         variant: "tertiary",
         condensed: "",
-        onClick: t[3] || (t[3] = (_) => e.navigate(e.totalPages))
+        onClick: t[3] || (t[3] = (p) => e.navigate(e.totalPages))
       }, {
-        iconLeft: c(() => [
-          p(w, {
+        iconLeft: m(() => [
+          u(w, {
             "svg-title": e.$t("navigateToTheLastPage")
           }, null, 8, ["svg-title"])
         ]),
@@ -484,7 +484,7 @@ function ke(e, t, n, i, s, l) {
     ])
   ]);
 }
-const Be = /* @__PURE__ */ P(we, [["render", ke], ["__scopeId", "data-v-b1c3077d"]]), Ae = {
+const Ae = /* @__PURE__ */ P(ye, [["render", Be], ["__scopeId", "data-v-b1c3077d"]]), Ee = {
   "en-US": {
     paginatedNavigation: "Paginated navigation",
     showingItemsWithTotal: "Showing {itemCount} of {totalCount} item | Showing {itemCount} of {totalCount} items"
@@ -509,13 +509,13 @@ const Be = /* @__PURE__ */ P(we, [["render", ke], ["__scopeId", "data-v-b1c3077d
     paginatedNavigation: "Navegación por páginas",
     showingItemsWithTotal: "Mostrando {itemCount} de {totalCount} artículo | Mostrando {itemCount} de {totalCount} artículos"
   }
-}, Ee = N({
-  i18n: { messages: Ae },
+}, Re = N({
+  i18n: { messages: Ee },
   name: "bento-pagination",
   components: {
-    BentoPaginationContext: te,
-    BentoPaginationControls: Be,
-    BentoPaginationResultsPerPage: Q
+    BentoPaginationContext: ae,
+    BentoPaginationControls: Ae,
+    BentoPaginationResultsPerPage: X
   },
   props: {
     /**
@@ -567,18 +567,18 @@ const Be = /* @__PURE__ */ P(we, [["render", ke], ["__scopeId", "data-v-b1c3077d
   },
   emits: ["navigate", "items-page", "update:page", "update:size"],
   setup(e, { attrs: t, emit: n }) {
-    const i = k(t["aria-label"]), { ariaLabel: s } = Z(e), l = V({
+    const i = k(t["aria-label"]), { ariaLabel: s } = z(e), l = j({
       ariaLabel: i.value,
       // TODO: take this line away when the aria-label props is removed
       label: s
     }), g = v(
       () => !e.totalCount || !e.size ? null : Math.ceil(e.totalCount / e.size)
-    ), a = (_) => {
-      n("navigate", _), n("update:page", _);
-    }, r = (_) => {
-      a(_);
-    }, C = (_) => {
-      n("items-page", _), n("update:size", _), a(1);
+    ), a = (p, D) => {
+      e.hidePageSize ? n("navigate", p) : n("navigate", p, D ?? (e == null ? void 0 : e.size)), n("update:page", p);
+    }, r = (p) => {
+      a(p);
+    }, C = (p) => {
+      n("items-page", p), n("update:size", p), a(1, p);
     }, w = v(() => ({
       "b-pagination__navigation--no-results-per-page": e.hidePageSize
     }));
@@ -594,11 +594,11 @@ const Be = /* @__PURE__ */ P(we, [["render", ke], ["__scopeId", "data-v-b1c3077d
     };
   }
 });
-const Re = (e) => (z("data-v-77e3973d"), e = e(), U(), e), Fe = { class: "b-pagination" }, Me = ["aria-label"], De = { class: "b-pagination__page-navigator" }, Ze = /* @__PURE__ */ Re(() => /* @__PURE__ */ u("div", { class: "b-pagination__divider" }, null, -1));
+const Fe = (e) => (U("data-v-2aab535e"), e = e(), V(), e), Me = { class: "b-pagination" }, De = ["aria-label"], Ze = { class: "b-pagination__page-navigator" }, ze = /* @__PURE__ */ Fe(() => /* @__PURE__ */ d("div", { class: "b-pagination__divider" }, null, -1));
 function We(e, t, n, i, s, l) {
-  const g = d("bento-pagination-results-per-page"), a = d("bento-pagination-context"), r = d("bento-pagination-controls");
-  return o(), m("div", Fe, [
-    u("nav", {
+  const g = c("bento-pagination-results-per-page"), a = c("bento-pagination-context"), r = c("bento-pagination-controls");
+  return o(), _("div", Me, [
+    d("nav", {
       "aria-label": e.computedAriaLabel,
       class: W(["b-pagination__navigation", e.navigationConditionalClasses])
     }, [
@@ -609,8 +609,8 @@ function We(e, t, n, i, s, l) {
         "total-count": e.totalCount,
         onSelect: e.onItemsPerPageChange
       }, null, 8, ["items-per-page", "total-count", "onSelect"])),
-      u("div", De, [
-        p(a, {
+      d("div", Ze, [
+        u(a, {
           class: "b-pagination__context",
           "total-pages": e.totalPages,
           page: e.page,
@@ -618,8 +618,8 @@ function We(e, t, n, i, s, l) {
           "virtual-scroll": e.virtualScroll,
           onPageSelected: e.onPageSelected
         }, null, 8, ["total-pages", "page", "total-count", "virtual-scroll", "onPageSelected"]),
-        Ze,
-        p(r, {
+        ze,
+        u(r, {
           class: "b-pagination__controls",
           "has-next": e.hasNext,
           page: e.page,
@@ -627,11 +627,11 @@ function We(e, t, n, i, s, l) {
           onNavigate: e.navigate
         }, null, 8, ["has-next", "page", "total-pages", "onNavigate"])
       ])
-    ], 10, Me)
+    ], 10, De)
   ]);
 }
-const Ge = /* @__PURE__ */ P(Ee, [["render", We], ["__scopeId", "data-v-77e3973d"]]);
+const Qe = /* @__PURE__ */ P(Re, [["render", We], ["__scopeId", "data-v-2aab535e"]]);
 export {
-  Ge as BentoPagination
+  Qe as BentoPagination
 };
 //# sourceMappingURL=pagination.js.map