@shopware-ag/meteor-component-library/dist/common/MtPagination.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-pagination.css';
"use strict";
const vue = require("vue");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const vueI18n = require("vue-i18n");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
const _hoisted_1 = { class: "mt-pagination" };
const _hoisted_2 = {
  class: "mt-pagination__info-text",
  "data-testid": "mt-pagination-info-text"
};
const _hoisted_3 = { class: "mt-pagination__controls" };
const _hoisted_4 = ["disabled"];
const _hoisted_5 = { class: "visually-hidden" };
const _hoisted_6 = ["disabled"];
const _hoisted_7 = { class: "visually-hidden" };
const _hoisted_8 = ["value", "aria-label"];
const _hoisted_9 = ["disabled"];
const _hoisted_10 = { class: "visually-hidden" };
const _hoisted_11 = ["disabled"];
const _hoisted_12 = { class: "visually-hidden" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "mt-pagination",
  props: {
    currentPage: {},
    limit: {},
    totalItems: {}
  },
  emits: ["change-current-page"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const { t } = vueI18n.useI18n({
      messages: {
        en: {
          infoText: "{start}-{end} of {totalItems}",
          firstPage: "First page",
          previousPage: "Previous page",
          nextPage: "Next page",
          lastPage: "Last page"
        },
        de: {
          infoText: "{start}-{end} von {totalItems}",
          firstPage: "Erste Seite",
          previousPage: "Voherige Seite",
          nextPage: "Nächste Seite",
          lastPage: "Letzte Seite"
        }
      }
    });
    const emit = __emit;
    vue.watch(
      () => props.limit,
      () => {
        emit("change-current-page", 1);
      }
    );
    const totalPages = vue.computed(() => {
      return Math.max(1, Math.ceil(props.totalItems / props.limit));
    });
    const isOnFirstPage = vue.computed(() => props.currentPage === 1);
    const isOnLastPage = vue.computed(() => props.currentPage === totalPages.value);
    const inputLength = vue.computed(() => {
      const length = props.currentPage.toString().length;
      if (length === 0)
        return "calc(1ch + 1px)";
      return `calc(${length}ch + 1px)`;
    });
    function onChangeInput(event) {
      const target = event.target;
      if (target.value === "")
        return;
      emit("change-current-page", parseInt(target.value));
    }
    const firstVisibleItemNumber = vue.computed(() => (props.currentPage - 1) * props.limit + 1);
    const lastVisibleItemNumber = vue.computed(() => {
      const lastItemNumberWithLimitOnly = props.limit * props.currentPage;
      return lastItemNumberWithLimitOnly > props.totalItems ? props.totalItems : lastItemNumberWithLimitOnly;
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("p", _hoisted_2, vue.toDisplayString(vue.unref(t)("infoText", {
          start: firstVisibleItemNumber.value,
          end: lastVisibleItemNumber.value,
          totalItems: _ctx.totalItems
        })), 1),
        vue.createElementVNode("div", _hoisted_3, [
          vue.createElementVNode("button", {
            type: "button",
            class: "mt-pagination__button",
            disabled: isOnFirstPage.value,
            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change-current-page", 1)),
            "data-testid": "mt-pagination-first-page-button"
          }, [
            vue.createElementVNode("span", _hoisted_5, vue.toDisplayString(vue.unref(t)("firstPage")), 1),
            vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
              name: "regular-double-chevron-left-s",
              size: "0.5rem",
              "aria-hidden": "true"
            })
          ], 8, _hoisted_4),
          vue.createElementVNode("button", {
            type: "button",
            class: "mt-pagination__button",
            disabled: isOnFirstPage.value,
            onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("change-current-page", _ctx.currentPage - 1)),
            "data-testid": "mt-pagination-previous-page-button"
          }, [
            vue.createElementVNode("span", _hoisted_7, vue.toDisplayString(vue.unref(t)("previousPage")), 1),
            vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
              name: "regular-chevron-left-s",
              size: "0.5rem",
              "aria-hidden": "true"
            })
          ], 8, _hoisted_6),
          vue.createElementVNode("input", {
            class: "mt-pagination__current-page-input",
            type: "number",
            min: "1",
            step: "1",
            style: vue.normalizeStyle({ width: inputLength.value }),
            value: _ctx.currentPage,
            onInput: onChangeInput,
            "aria-label": `Page ${_ctx.currentPage}`,
            "data-testid": "mt-pagination-current-page-input"
          }, null, 44, _hoisted_8),
          vue.createElementVNode("button", {
            type: "button",
            class: "mt-pagination__button",
            disabled: isOnLastPage.value,
            onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("change-current-page", _ctx.currentPage + 1)),
            "data-testid": "mt-pagination-next-page-button"
          }, [
            vue.createElementVNode("span", _hoisted_10, vue.toDisplayString(vue.unref(t)("nextPage")), 1),
            vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
              name: "regular-chevron-right-s",
              size: "0.5rem",
              "aria-hidden": "true"
            })
          ], 8, _hoisted_9),
          vue.createElementVNode("button", {
            type: "button",
            class: "mt-pagination__button",
            disabled: isOnLastPage.value,
            onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("change-current-page", totalPages.value)),
            "data-testid": "mt-pagination-last-page-button"
          }, [
            vue.createElementVNode("span", _hoisted_12, vue.toDisplayString(vue.unref(t)("lastPage")), 1),
            vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
              name: "regular-double-chevron-right-s",
              size: "0.5rem",
              "aria-hidden": "true"
            })
          ], 8, _hoisted_11)
        ])
      ]);
    };
  }
});
const mtPagination_vue_vue_type_style_index_0_scoped_96226e69_lang = "";
const MtPagination = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-96226e69"]]);
module.exports = MtPagination;
//# sourceMappingURL=MtPagination.js.map