@progress/kendo-vue-data-tools/pager/PagerNumericButtons.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as h, createVNode as r, createTextVNode as p, isVNode as m } from "vue";
import { Button as a } from "@progress/kendo-vue-buttons";
import { kendoThemeMaps as g } from "@progress/kendo-vue-common";
import { provideLocalizationService as f } from "@progress/kendo-vue-intl";
import { pagerSmallPageSelectorAriaLabel as l, messages as k } from "../messages/main.mjs";
function $(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !m(e);
}
const v = /* @__PURE__ */ h({
  name: "KendoNumericButtons",
  props: {
    buttonCount: Number,
    totalPages: Number,
    currentPage: Number,
    size: String,
    responsiveSize: String,
    onPagechange: Function
  },
  inject: {
    kendoLocalizationService: {
      default: null
    }
  },
  computed: {
    start() {
      const e = this.$props.currentPage, s = this.$props.buttonCount;
      if (e > s) {
        const i = e % s;
        return i === 0 ? e - s + 1 : e - i + 1;
      }
      return 1;
    },
    end() {
      return Math.min(this.start + this.$props.buttonCount - 1, this.$props.totalPages);
    },
    dropdownClass() {
      const {
        size: e
      } = this.$props;
      return {
        "k-picker": !0,
        "k-dropdown-list": !0,
        "k-dropdown": !0,
        "k-rounded-md": !0,
        "k-picker-solid": !0,
        [`k-picker-${g.sizeMap[e] || e}`]: e
      };
    }
  },
  methods: {
    click(e, s) {
      e.preventDefault(), this.$emit("pagechange", s, e);
    },
    ddlChange(e) {
      this.$emit("pagechange", parseInt(e.target.value, 10), e);
    }
  },
  render() {
    const e = f(this), s = this.$props.messagesMap ? this.$props.messagesMap(l) : {
      messageKey: l,
      defaultMessage: k[l]
    }, i = this.start > 1 && r(a, {
      fillMode: "flat",
      themeColor: "primary",
      size: this.$props.size,
      rounded: null,
      onClick: (t) => this.click(t, this.start - 1)
    }, {
      default: () => [p("...")]
    }), u = this.end < this.$props.totalPages && r(a, {
      fillMode: "flat",
      themeColor: "primary",
      size: this.$props.size,
      rounded: null,
      onClick: (t) => this.click(t, this.end + 1)
    }, {
      default: () => [p("...")]
    }), n = [];
    for (let t = this.start; t <= this.end; t++)
      n.push(t);
    const c = n.map(function(t) {
      return r(a, {
        key: t,
        class: "k-link",
        onClick: (o) => this.click(o, t),
        selected: this.$props.currentPage === t,
        fillMode: "flat",
        themeColor: "primary",
        size: this.$props.size,
        rounded: null,
        role: "button",
        title: "Page " + t,
        "aria-current": this.$props.currentPage === t ? !0 : void 0
      }, $(t) ? t : {
        default: () => [t]
      });
    }, this), d = function(t) {
      return r("select", {
        style: {
          width: "5em",
          margin: "0px 1em",
          display: this.$props.responsiveSize === "small" ? "inline-flex" : "none"
        },
        class: this.dropdownClass,
        "aria-label": e.toLanguageString(s.messageKey, s.defaultMessage),
        onChange: this.ddlChange
      }, [t.map(function(o) {
        return r("option", {
          value: o,
          selected: o === this.$props.currentPage
        }, [o]);
      }, this)]);
    };
    return r("div", {
      class: "k-pager-numbers-wrap"
    }, [r("div", {
      class: "k-pager-numbers",
      style: {
        display: this.$props.responsiveSize !== "small" ? "" : "none"
      }
    }, [i, c, u]), d.call(this, n)]);
  }
});
export {
  v as PagerNumericButtons
};