@indielayer/ui/lib/components/pagination/Pagination.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as X, computed as v, ref as D, watch as F, openBlock as s, createElementBlock as n, normalizeStyle as L, unref as t, normalizeClass as c, Fragment as u, createVNode as r, createElementVNode as f, withKeys as Q, toDisplayString as T, createBlock as m, createCommentVNode as d, renderList as P } from "vue";
import { useTheme as U } from "../../composables/useTheme.js";
import { useCommon as C } from "../../composables/useCommon.js";
import { prevIcon as j, nextIcon as A, dotsIcon as y } from "../../common/icons.js";
import b from "../icon/Icon.vue.js";
import G from "../input/Input.vue.js";
import I from "../button/Button.vue.js";
import V from "./PaginationItem.vue.js";
const H = { class: "mx-9 flex items-center" }, J = { class: "text-secondary-600 ml-2" }, M = ["onClick"], O = ["simple", "quick", "dots"], R = {
  ...C.props(),
  links: Boolean,
  totalPages: {
    type: Number,
    default: 1
  },
  modelValue: {
    type: Number,
    default: 1
  },
  variant: {
    type: String,
    default: "simple"
  }
}, W = {
  name: "XPagination",
  validators: {
    ...C.validators(),
    variant: O
  }
}, oe = /* @__PURE__ */ X({
  ...W,
  props: R,
  emits: ["update:modelValue"],
  setup($, { emit: B }) {
    const l = $, p = B, N = v(() => l.totalPages === 3 ? [2] : l.totalPages > 2 ? l.modelValue === 1 || l.modelValue === 2 ? [2, 3] : l.modelValue === l.totalPages || l.modelValue === l.totalPages - 1 ? [l.totalPages - 2, l.totalPages - 1] : [l.modelValue - 1, l.modelValue, l.modelValue + 1] : []), i = D(l.modelValue + "");
    function w() {
      const e = parseInt(i.value);
      e >= 0 && e <= l.totalPages ? p("update:modelValue", e) : i.value = l.modelValue + "";
    }
    F(() => l.modelValue, (e) => {
      i.value = l.modelValue + "";
    });
    function q() {
      l.modelValue > 1 && p("update:modelValue", l.modelValue - 1);
    }
    function S() {
      l.modelValue < l.totalPages && p("update:modelValue", l.modelValue + 1);
    }
    const g = v(() => l.size === "xs" ? "xs" : l.size === "sm" ? "sm" : l.size === "lg" ? "md" : l.size === "xl" ? "lg" : "sm"), { styles: E, classes: k, className: K } = U("Pagination", {}, l);
    return (e, o) => (s(), n("ul", {
      style: L(t(E)),
      class: c([
        t(K),
        t(k).wrapper
      ])
    }, [
      e.variant === "quick" ? (s(), n(u, { key: 0 }, [
        r(I, {
          "icon-left": t(j),
          size: g.value,
          disabled: e.modelValue <= 1,
          onClick: q
        }, null, 8, ["icon-left", "size", "disabled"]),
        f("div", H, [
          o[4] || (o[4] = f("span", { class: "text-secondary-600 mr-2" }, "Page", -1)),
          r(G, {
            modelValue: i.value,
            "onUpdate:modelValue": o[0] || (o[0] = (a) => i.value = a),
            size: e.size,
            class: "text-center w-16",
            "hide-footer": "",
            onKeydown: Q(w, ["enter"])
          }, null, 8, ["modelValue", "size"]),
          f("span", J, "of " + T(e.totalPages), 1)
        ]),
        r(I, {
          "icon-left": t(A),
          size: g.value,
          disabled: e.modelValue >= e.totalPages,
          onClick: S
        }, null, 8, ["icon-left", "size", "disabled"])
      ], 64)) : e.variant === "simple" ? (s(), n(u, { key: 1 }, [
        r(V, {
          value: 1,
          links: e.links,
          size: e.size,
          selected: e.modelValue === 1,
          onInput: o[1] || (o[1] = (a) => e.$emit("update:modelValue", a))
        }, null, 8, ["links", "size", "selected"]),
        e.totalPages > 3 && e.modelValue > 3 ? (s(), m(b, {
          key: 0,
          class: "mx-1",
          icon: t(y),
          size: e.size
        }, null, 8, ["icon", "size"])) : d("", !0),
        (s(!0), n(u, null, P(N.value, (a) => (s(), m(V, {
          key: a,
          value: a,
          links: e.links,
          size: e.size,
          selected: e.modelValue === a,
          onInput: o[2] || (o[2] = (z) => e.$emit("update:modelValue", z))
        }, null, 8, ["value", "links", "size", "selected"]))), 128)),
        e.totalPages > 3 && e.modelValue < e.totalPages - 2 ? (s(), m(b, {
          key: 1,
          class: "mx-1",
          icon: t(y),
          size: e.size
        }, null, 8, ["icon", "size"])) : d("", !0),
        e.totalPages > 1 ? (s(), m(V, {
          key: 2,
          value: e.totalPages,
          links: e.links,
          size: e.size,
          selected: e.modelValue === e.totalPages,
          onInput: o[3] || (o[3] = (a) => e.$emit("update:modelValue", a))
        }, null, 8, ["value", "links", "size", "selected"])) : d("", !0)
      ], 64)) : e.variant === "dots" ? (s(!0), n(u, { key: 2 }, P(e.totalPages, (a) => (s(), n("li", {
        key: a,
        class: c(["rounded-full cursor-pointer", [
          t(k).dots,
          a === e.modelValue ? "bg-[color:var(--x-pagination-bg)]" : "bg-secondary-100 hover:bg-secondary-200"
        ]]),
        onClick: (z) => e.$emit("update:modelValue", a)
      }, null, 10, M))), 128)) : d("", !0)
    ], 6));
  }
});
export {
  oe as default
};