@farris/ui-vue/components/pagination/index.esm.js

Farris Vue, a Farris Design based Vue3 component library.

import { ref as m, watch as L, createVNode as u, computed as g, defineComponent as Q, watchEffect as re, Fragment as R, createTextVNode as x, inject as ce, onMounted as pe } from "vue";
import { isPlainObject as J, cloneDeep as X } from "lodash-es";
import { withInstall as fe } from "../common/index.esm.js";
const Y = {}, Z = {};
function I(a) {
  const { properties: e, title: c, ignore: s } = a, n = s && Array.isArray(s), r = Object.keys(e).reduce((t, o) => ((!n || !s.find((p) => p === o)) && (t[o] = e[o].type === "object" && e[o].properties ? I(e[o]) : X(e[o].default)), t), {});
  if (c && (!n || !s.find((t) => t === "id"))) {
    const t = c.toLowerCase().replace(/-/g, "_");
    r.id = `${t}_${Math.random().toString().slice(2, 6)}`;
  }
  return r;
}
function de(a) {
  const { properties: e, title: c, required: s } = a;
  if (s && Array.isArray(s)) {
    const n = s.reduce((r, t) => (r[t] = e[t].type === "object" && e[t].properties ? I(e[t]) : X(e[t].default), r), {});
    if (c && s.find((r) => r === "id")) {
      const r = c.toLowerCase().replace(/-/g, "_");
      n.id = `${r}_${Math.random().toString().slice(2, 6)}`;
    }
    return n;
  }
  return {
    type: c
  };
}
function K(a, e = {}, c) {
  const s = Y[a];
  if (s) {
    let n = de(s);
    const r = Z[a];
    return n = r ? r({ getSchemaByType: K }, n, e, c) : n, n;
  }
  return null;
}
function ve(a, e) {
  const c = I(e);
  return Object.keys(c).reduce((s, n) => (Object.prototype.hasOwnProperty.call(a, n) && (s[n] && J(s[n]) && J(a[n] || !a[n]) ? Object.assign(s[n], a[n] || {}) : s[n] = a[n]), s), c), c;
}
function ee(a, e) {
  return Object.keys(a).filter((s) => a[s] != null).reduce((s, n) => {
    if (e.has(n)) {
      const r = e.get(n);
      if (typeof r == "string")
        s[r] = a[n];
      else {
        const t = r(n, a[n], a);
        Object.assign(s, t);
      }
    } else
      s[n] = a[n];
    return s;
  }, {});
}
function ge(a, e, c = /* @__PURE__ */ new Map()) {
  const s = ve(a, e);
  return ee(s, c);
}
function me(a = {}) {
  function e(l, i, f, v) {
    if (typeof f == "number")
      return v[l].length === f;
    if (typeof f == "object") {
      const y = Object.keys(f)[0], b = f[y];
      if (y === "not")
        return Number(v[l].length) !== Number(b);
      if (y === "moreThan")
        return Number(v[l].length) >= Number(b);
      if (y === "lessThan")
        return Number(v[l].length) <= Number(b);
    }
    return !1;
  }
  function c(l, i, f, v) {
    return v[l] && v[l].propertyValue && String(v[l].propertyValue.value) === String(f);
  }
  const s = /* @__PURE__ */ new Map([
    ["length", e],
    ["getProperty", c]
  ]);
  Object.keys(a).reduce((l, i) => (l.set(i, a[i]), l), s);
  function n(l, i) {
    const f = l;
    return typeof i == "number" ? [{ target: f, operator: "length", param: null, value: Number(i) }] : typeof i == "boolean" ? [{ target: f, operator: "getProperty", param: l, value: !!i }] : typeof i == "object" ? Object.keys(i).map((v) => {
      if (v === "length")
        return { target: f, operator: "length", param: null, value: i[v] };
      const y = v, b = i[v];
      return { target: f, operator: "getProperty", param: y, value: b };
    }) : [];
  }
  function r(l) {
    return Object.keys(l).reduce((f, v) => {
      const y = n(v, l[v]);
      return f.push(...y), f;
    }, []);
  }
  function t(l, i) {
    if (s.has(l.operator)) {
      const f = s.get(l.operator);
      return f && f(l.target, l.param, l.value, i) || !1;
    }
    return !1;
  }
  function o(l, i) {
    return r(l).reduce((y, b) => y && t(b, i), !0);
  }
  function p(l, i) {
    const f = Object.keys(l), v = f.includes("allOf"), y = f.includes("anyOf"), b = v || y, k = (b ? l[b ? v ? "allOf" : "anyOf" : "allOf"] : [l]).map((T) => o(T, i));
    return v ? !k.includes(!1) : k.includes(!0);
  }
  return { parseValueSchema: p };
}
const he = {}, ye = {};
me();
function be(a, e, c = /* @__PURE__ */ new Map(), s = (t, o, p, l) => o, n = {}, r = (t) => t) {
  return Y[e.title] = e, Z[e.title] = s, he[e.title] = n, ye[e.title] = r, (t = {}, o = !0) => {
    if (!o)
      return ee(t, c);
    const p = ge(t, e, c), l = Object.keys(a).reduce((i, f) => (i[f] = a[f].default, i), {});
    return Object.assign(l, p);
  };
}
function we(a, e) {
  return { customClass: e.class, customStyle: e.style };
}
const Pe = /* @__PURE__ */ new Map([
  ["appearance", we]
]), Se = "https://json-schema.org/draft/2020-12/schema", je = "https://farris-design.gitee.io/pagination.schema.json", ke = "pagination", Ne = "A Farris Component", Oe = "object", Me = {
  id: {
    description: "The unique identifier for a pagination",
    type: "string"
  },
  type: {
    description: "The type string of pagination component",
    type: "string",
    default: "pagination"
  },
  appearance: {
    description: "",
    type: "object",
    properties: {
      class: {
        type: "string"
      },
      style: {
        type: "string"
      }
    },
    default: {}
  },
  binding: {
    description: "",
    type: "object",
    default: {}
  },
  editable: {
    description: "",
    type: "boolean",
    default: !0
  },
  enableLinkLabel: {
    description: "",
    type: "boolean",
    default: !1
  },
  label: {
    description: "",
    type: "string",
    default: ""
  },
  lableWidth: {
    description: "",
    type: "number"
  },
  placeholder: {
    description: "",
    type: "string",
    default: ""
  },
  readonly: {
    description: "",
    type: "boolean",
    default: !1
  },
  required: {
    description: "",
    type: "boolean",
    default: !1
  },
  tabindex: {
    description: "",
    type: "number",
    default: -1
  },
  textAlign: {
    description: "",
    type: "string",
    enum: [
      "left",
      "middle",
      "right"
    ],
    default: "left"
  },
  visible: {
    description: "",
    type: "boolean",
    default: !0
  },
  onBlur: {
    description: "",
    type: "string",
    default: ""
  },
  onClickLinkLabel: {
    description: "",
    type: "sting",
    default: ""
  }
}, Be = [
  "id",
  "type"
], Le = {
  $schema: Se,
  $id: je,
  title: ke,
  description: Ne,
  type: Oe,
  properties: Me,
  required: Be
}, Te = "pagination", ze = "A Farris Component", Ee = "object", $e = {
  basic: {
    description: "Basic Infomation",
    title: "基本信息",
    properties: {
      id: {
        description: "组件标识",
        title: "标识",
        type: "string",
        readonly: !0
      },
      type: {
        description: "组件类型",
        title: "控件类型",
        type: "select",
        editor: {
          type: "waiting for modification",
          enum: []
        }
      }
    }
  },
  behavior: {
    description: "Basic Infomation",
    title: "行为",
    properties: {
      editable: {
        description: "",
        title: "允许编辑",
        type: "boolean"
      },
      readonly: {
        description: "",
        title: "只读",
        type: "string"
      },
      required: {
        description: "",
        title: "必填",
        type: "boolean"
      },
      visible: {
        description: "",
        title: "可见",
        type: "boolean"
      },
      placeholder: {
        description: "",
        title: "提示文本",
        type: "string"
      },
      tabindex: {
        description: "",
        title: "tab索引",
        type: "number"
      },
      textAlign: {
        description: "",
        title: "对齐方式",
        type: "enum",
        editor: {
          type: "combo-list",
          textField: "name",
          valueField: "value",
          data: [
            {
              value: "left",
              name: "左对齐"
            },
            {
              value: "center",
              name: "居中"
            },
            {
              value: "right",
              name: "右对齐"
            }
          ]
        }
      }
    }
  }
}, De = {
  title: Te,
  description: ze,
  type: Ee,
  categories: $e
};
function Ae(a, e, c) {
  return e;
}
const U = {
  /**
   * 当前页码
   */
  currentPage: { type: Number, default: 1 },
  /**
   * 禁止点击分页组件
   */
  disabled: { type: Boolean, default: !1 },
  /**
   * 分页模式
   */
  mode: { type: String, default: "default" },
  /**
   * 每页数量
   */
  pageSize: { type: Number, default: 20 },
  /**
   * 总数量
   */
  totalItems: { type: Number, default: 0 },
  /**
   * 是否显示跳转按钮
   */
  showGoButton: { type: Boolean, default: !1 },
  /**
   * 是否展示每个数量下拉
   */
  showPageList: { type: Boolean, default: !0 },
  /**
   * 是否展示页码
   */
  showPageNumbers: { type: Boolean, default: !0 },
  /**
   * 是否展示跳转到哪一页
   */
  showRedirection: { type: Boolean, default: !0 },
  /**
   * 自定义每页数量
   */
  pageList: { type: Array, default: [20, 50, 100] }
}, ae = be(U, Le, Pe, Ae, De);
function te(a, e, c, s) {
  const n = m("跳转至"), r = m(""), t = m(a.value);
  L(t, (i, f) => {
    i >= 1 && i <= e.value ? a.value = i : t.value = f;
  }), L(a, (i) => {
    t.value !== i && (t.value = i);
  });
  function o(i) {
    t.value = i.target.valueAsNumber, s.emit("update:currentPage", t.value), s.emit("changed", {
      pageIndex: t.value,
      pageSize: c.value
    }), s.emit("pageIndexChanged", {
      pageIndex: t.value,
      pageSize: c.value
    });
  }
  function p(i) {
    i.key === "Enter" && (t.value = i.target.valueAsNumber, s.emit("update:currentPage", t.value), s.emit("changed", {
      pageIndex: t.value,
      pageSize: c.value
    }), s.emit("pageIndexChanged", {
      pageIndex: t.value,
      pageSize: c.value
    }));
  }
  function l() {
    return u("li", {
      class: "page-goto-input d-flex flex-row",
      style: "padding-left: 10px; white-space: nowrap;"
    }, [u("span", {
      class: "pagination-message"
    }, [n.value]), u("input", {
      title: "page-index-spinner",
      type: "number",
      class: "form-control farris-gotopagenumber",
      value: t.value,
      min: 1,
      max: e.value,
      style: "display: inline-block;margin-left:3px;",
      onBlur: (i) => o(i),
      onKeyup: (i) => p(i)
    }, null), r.value]);
  }
  return {
    renderGotoButton: l
  };
}
function ne(a, e, c, s, n) {
  const r = g(() => ({
    "page-item": !0,
    disabled: e.value
  }));
  function t(i) {
    a.value = a.value < c.value ? a.value + 1 : c.value, n.emit("update:currentPage", a.value), n.emit("changed", {
      pageIndex: a.value,
      pageSize: s.value
    }), n.emit("pageIndexChanged", {
      pageIndex: a.value,
      pageSize: s.value
    });
  }
  function o(i) {
    a.value = c.value, n.emit("update:currentPage", a.value), n.emit("changed", {
      pageIndex: a.value,
      pageSize: s.value
    }), n.emit("pageIndexChanged", {
      pageIndex: a.value,
      pageSize: s.value
    });
  }
  function p() {
    return u("li", {
      class: r.value
    }, [!e.value && u("a", {
      class: "page-link",
      tabindex: "0",
      onClick: (i) => t()
    }, [u("span", {
      class: "f-icon f-page-next"
    }, null)]), e.value && u("span", {
      class: "page-link"
    }, [u("span", {
      class: "f-icon f-page-next"
    }, null)])]);
  }
  function l() {
    return u("li", {
      class: r.value
    }, [!e.value && u("a", {
      class: "page-link",
      tabindex: "0",
      onClick: (i) => o()
    }, [u("span", {
      class: "f-icon f-page-last"
    }, null)]), e.value && u("span", {
      class: "page-link"
    }, [u("span", {
      class: "f-icon f-page-last"
    }, null)])]);
  }
  return {
    renderLastPage: l,
    renderNextPage: p
  };
}
function le(a, e) {
  const c = m("共"), s = m("条"), n = g(() => ({
    "pagination-message": !0,
    "text-truncate": !0,
    "d-flex": !0,
    "ml-auto": a.value === "right",
    "flex-fill": a.value === "right"
  }));
  function r() {
    return u("li", {
      class: n.value
    }, [u("div", {
      class: "text-truncate",
      style: "line-height: 26px"
    }, [u("span", {
      class: "pg-message-text"
    }, [c.value]), u("b", {
      class: "pg-message-total"
    }, [e.value]), u("span", {
      class: "pg-message-text"
    }, [s.value])])]);
  }
  return {
    renderPageInfo: r
  };
}
function se(a, e, c, s, n) {
  const r = m(!1), t = m("显示"), o = m("条"), p = g(() => ({
    dropup: !0,
    "dropdown-right": !0,
    "pg-pagelist": !0,
    "pagelist-disabled": s.value === 0,
    show: r.value
  })), l = g(() => ({
    "dropdown-menu": !0,
    show: r.value
  })), i = (h) => ({
    "w-100": !0,
    "dropdown-item": !0,
    active: e.value === h
  });
  function f(h) {
    r.value = !0;
  }
  function v(h) {
    r.value = !1;
  }
  function y(h, k, B) {
    const z = h * k - k + 1;
    return Math.ceil(z / B);
  }
  function b(h, k) {
    const B = a.value;
    a.value = y(a.value, e.value, k), B !== a.value && n.emit("update:currentPage", a.value), e.value = k, r.value = !1, n.emit("update:pageSize", e.value), n.emit("changed", {
      pageIndex: a.value,
      pageSize: e.value
    }), n.emit("pageSizeChanged", {
      pageIndex: a.value,
      pageSize: e.value
    });
  }
  function j() {
    return u("li", {
      class: "pagination-pagelist"
    }, [u("div", {
      class: p.value,
      onMouseenter: (h) => f(),
      onMouseleave: (h) => v()
    }, [u("div", {
      class: "pg-pagelist-info"
    }, [u("span", {
      class: "pagelist-text"
    }, [t.value]), u("b", {
      class: "cur-pagesize"
    }, [e.value]), u("span", {
      class: "pagelist-text"
    }, [o.value]), u("i", {
      class: "f-icon f-icon-dropdown"
    }, null)]), u("div", {
      class: l.value,
      style: "margin-bottom: -1px;"
    }, [c.value.map((h) => u("li", {
      class: i(h),
      onClick: (k) => b(k, h)
    }, [u("span", null, [h])]))])])]);
  }
  return {
    renderPageList: j
  };
}
function ie(a, e, c, s, n) {
  const r = (l) => ({
    "page-item": !0,
    current: e.value === l.value,
    ellipsis: l.label === "...",
    disabled: a.disabled
  }), t = (l) => ({
    "f-icon": !0,
    "f-icon-arrow-seek-left": l.value < e.value,
    "f-icon-arrow-seek-right": l.value > e.value
  });
  function o(l, i) {
    e.value = i, n.emit("update:currentPage", e.value), n.emit("changed", {
      pageIndex: e.value,
      pageSize: s.value
    }), n.emit("pageIndexChanged", {
      pageIndex: e.value,
      pageSize: s.value
    });
  }
  function p() {
    return c.value.map((l) => u("li", {
      class: r(l)
    }, [e.value !== l.value && u("a", {
      class: "page-link",
      tabindex: "0",
      onClick: (i) => o(i, l.value)
    }, [u("span", {
      class: "page-link-label"
    }, [l.label]), l.label === "..." && u("i", {
      class: t(l)
    }, null)]), e.value === l.value && u("span", {
      class: "page-link"
    }, [l.label])]));
  }
  return {
    renderPageNumbers: p
  };
}
function oe(a, e, c, s, n) {
  const r = g(() => ({
    "page-item": !0,
    disabled: e.value
  }));
  function t(i) {
    a.value = 1, n.emit("update:currentPage", a.value), n.emit("changed", {
      pageIndex: a.value,
      pageSize: s.value
    }), n.emit("pageIndexChanged", {
      pageIndex: a.value,
      pageSize: s.value
    });
  }
  function o(i) {
    a.value = a.value > 2 ? a.value - 1 : 1, n.emit("update:currentPage", a.value), n.emit("changed", {
      pageIndex: a.value,
      pageSize: s.value
    }), n.emit("pageIndexChanged", {
      pageIndex: a.value,
      pageSize: s.value
    });
  }
  function p() {
    return u("li", {
      class: r.value
    }, [c.value && u("a", {
      tabindex: "0",
      class: "page-link",
      onClick: (i) => t()
    }, [u("span", {
      class: "f-icon f-page-first"
    }, null)]), e.value && u("span", {
      class: "page-link"
    }, [u("span", {
      class: "f-icon f-page-first"
    }, null)])]);
  }
  function l() {
    return u("li", {
      class: r.value
    }, [c.value && u("a", {
      tabindex: "0",
      class: "page-link",
      onClick: (i) => o()
    }, [u("span", {
      class: "f-icon f-page-pre"
    }, null)]), e.value && u("span", {
      class: "page-link"
    }, [u("span", {
      class: "f-icon f-page-pre"
    }, null)])]);
  }
  return {
    renderFirstPage: p,
    renderPreviousPage: l
  };
}
function ue(a) {
  const e = m([]);
  function c(n, r, t, o) {
    const p = Math.ceil(t / 2);
    return n === t ? o : n === 1 ? n : t < o ? o - p < r ? o - t + n : p < r ? r - p + n : n : n;
  }
  function s(n, r, t, o) {
    const p = [], l = Math.ceil(t / r), i = Math.ceil(o / 2), f = n <= i, v = l - i < n, y = !f && !v, b = o < l;
    let j = 1;
    for (; j <= l && j <= o; ) {
      const h = c(j, n, o, l), k = j === 2 && (y || v), B = j === o - 1 && (y || f), T = b && (k || B) ? "..." : "" + h;
      p.push({ label: T, value: h }), j++;
    }
    e.value = p;
  }
  return { pages: e, updatePages: s };
}
const C = /* @__PURE__ */ Q({
  name: "FPagination",
  props: U,
  emits: ["changed", "pageIndexChanged", "pageSizeChanged", "update:currentPage", "update:pageSize"],
  setup(a, e) {
    const c = m(!1), s = m(a.mode), n = m(""), r = m(!1), t = m(a.pageSize), o = m(a.currentPage), p = m(a.totalItems), {
      pages: l,
      updatePages: i
    } = ue(), f = {
      position: "relative"
    }, v = {
      position: "absolute",
      right: "0",
      zIndex: 1,
      background: "rgba(250,250,252,.6)",
      width: "100%",
      height: "100%"
    }, y = g(() => !p.value || o.value === 1), b = g(() => a.pageList), j = g(() => Math.ceil(p.value / t.value)), h = g(() => !p.value || o.value === j.value), k = g(() => a.showGoButton), B = g(() => o.value > 1), T = g(() => !(r.value && l.value.length <= 1)), z = g(() => !0), E = g(() => a.showPageList), D = g(() => a.showPageNumbers), M = g(() => !0), {
      renderFirstPage: d,
      renderPreviousPage: P
    } = oe(o, y, B, t, e), {
      renderLastPage: w,
      renderNextPage: S
    } = ne(o, h, j, t, e), {
      renderPageInfo: O
    } = le(n, p), {
      renderPageList: $
    } = se(o, t, b, p, e), {
      renderPageNumbers: q
    } = ie(a, o, l, t, e), {
      renderGotoButton: F
    } = te(o, j, t, e);
    i(o.value, t.value, p.value, 7), L(() => a.totalItems, (N) => {
      p.value = N;
    }), L([o, t, p], () => {
      i(o.value, t.value, p.value, 7);
    }), L(o, (N, A) => {
    }), L(t, (N, A) => {
    }), L(() => a.totalItems, (N) => {
      p.value = N, i(o.value, t.value, p.value, 7);
    }), L(() => a.currentPage, (N, A) => {
      N !== A && (o.value = N);
    }), L(() => a.pageSize, (N, A) => {
      N !== A && (t.value = N);
    }), re(() => {
      if (!b.value || !b.value.length)
        return;
      const N = b.value.includes(t.value);
      t.value = N ? t.value : b.value[0], N || e.emit("update:pageSize", t.value);
    })();
    const G = g(() => ({
      "d-flex": !0,
      "flex-wrap": !0,
      "justify-content-end": !0,
      "w-100": !0,
      "ngx-pagination": !0,
      pagination: !0,
      responsive: c.value,
      "pager-viewmode-default": s.value === "default",
      "pager-viewmode-simple": s.value === "simple"
    })), _ = g(() => ({
      position: "relative",
      "justify-content": n.value === "center" ? "center" : "start"
    }));
    function W() {
      return u(R, null, [z.value && O(), E.value && $(), M.value && d(), M.value && P(), D.value && q(), M.value && S(), M.value && w(), k.value && F()]);
    }
    function H() {
      return u(R, null, [u("li", {
        class: "page-item d-flex flex-fill"
      }, null), M.value && d(), M.value && P(), F(), u("li", {
        class: "page-item page-separator",
        style: "margin-left: 10px"
      }, [u("span", {
        style: "font-size: 15px; font-weight: 200;"
      }, [x(" /")])]), u("li", {
        class: "page-item page-total",
        style: "margin-left: 5px"
      }, [u("span", {
        style: "font-size: 16px; font-weight: 600;"
      }, [x(" "), j.value])]), M.value && S(), M.value && w()]);
    }
    return () => u("div", {
      class: "pagination-container",
      style: f
    }, [a.disabled && u("div", {
      style: v
    }, null), T.value && u("ul", {
      role: "navigation",
      class: G.value,
      style: _.value
    }, [s.value === "default" ? W() : H()])]);
  }
});
function Fe(a, e, c) {
  var M;
  const s = "", n = "", r = m();
  function t() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function o() {
    return !1;
  }
  function p() {
    return (e == null ? void 0 : e.schema.componentType) !== "frame";
  }
  function l() {
    return (e == null ? void 0 : e.schema.componentType) === "frame";
  }
  function i(d) {
    if (!d || !d.value)
      return null;
    if (d.value.schema && d.value.schema.type === "component")
      return d.value;
    const P = m(d == null ? void 0 : d.value.parent), w = i(P);
    return w || null;
  }
  function f(d = e) {
    var O;
    const { componentInstance: P, designerItemElementRef: w } = d;
    if (!P || !P.value)
      return null;
    const { getCustomButtons: S } = P.value;
    return P.value.canMove || S && ((O = S()) != null && O.length) ? w : f(d.parent);
  }
  function v(d) {
    return !!c;
  }
  function y() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function b() {
  }
  function j(d, P) {
    var w;
    !d || !P || (w = e == null ? void 0 : e.setupContext) == null || w.emit("dragEnd");
  }
  function h(d, P) {
    const { componentType: w } = d;
    let S = K(w, d, P);
    const O = w.toLowerCase().replace(/-/g, "_");
    return S && !S.id && S.type === w && (S.id = `${O}_${Math.random().toString().slice(2, 6)}`), S;
  }
  function k(d) {
  }
  function B(...d) {
  }
  function T(d) {
    if (!d)
      return;
    const P = e == null ? void 0 : e.schema, { formSchemaUtils: w } = d;
    if (P && w.getExpressions().length) {
      const S = w.getExpressions().findIndex((O) => O.target === P.id);
      S > -1 && w.getExpressions().splice(S, 1);
    }
  }
  function z(d) {
    T(d), e != null && e.schema.contents && e.schema.contents.map((P) => {
      let w = P.id;
      P.type === "component-ref" && (w = P.component);
      const S = a.value.querySelectorAll(`#${w}-design-item`);
      S != null && S.length && Array.from(S).map((O) => {
        var $;
        ($ = O == null ? void 0 : O.componentInstance) != null && $.value.onRemoveComponent && O.componentInstance.value.onRemoveComponent(d);
      });
    });
  }
  function E() {
  }
  function D(d) {
  }
  return r.value = {
    canMove: t(),
    canSelectParent: o(),
    canDelete: p(),
    canNested: !l(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: a,
    parent: (M = e == null ? void 0 : e.parent) == null ? void 0 : M.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: s,
    designerClass: n,
    canAccepts: v,
    getBelongedComponentInstance: i,
    getDraggableDesignItemElement: f,
    getDraggingDisplayText: y,
    getPropConfig: B,
    getDragScopeElement: b,
    onAcceptMovedChildElement: j,
    onChildElementMovedOut: k,
    addNewChildComponentSchema: h,
    triggerBelongedComponentToMoveWhenMoved: m(!1),
    triggerBelongedComponentToDeleteWhenDeleted: m(!1),
    onRemoveComponent: z,
    getCustomButtons: E,
    onPropertyChanged: D
  }, r;
}
const Re = /* @__PURE__ */ Q({
  name: "FPagination",
  props: U,
  emits: ["pageIndexChanged", "pageSizeChanged"],
  setup(a, e) {
    const c = m(!1), s = m(a.mode), n = m(""), r = m(!1), t = m(a.pageSize), o = m(a.currentPage), p = m(a.totalItems), l = m(), i = ce("design-item-context"), f = Fe(l, i);
    pe(() => {
      l.value.componentInstance = f;
    }), e.expose(f.value);
    const {
      pages: v,
      updatePages: y
    } = ue(), b = g(() => o.value === 1), j = g(() => [20, 50, 100]), h = g(() => Math.ceil(p.value / t.value)), k = g(() => o.value === h.value), B = g(() => !0), T = g(() => o.value > 1), z = g(() => !(r.value && v.value.length <= 1)), E = g(() => !0), D = g(() => !0), M = g(() => !0), d = g(() => !0), {
      renderFirstPage: P,
      renderPreviousPage: w
    } = oe(o, b, T, t, e), {
      renderLastPage: S,
      renderNextPage: O
    } = ne(o, k, h, t, e), {
      renderPageInfo: $
    } = le(n, p), {
      renderPageList: q
    } = se(o, t, j, p, e), {
      renderPageNumbers: F
    } = ie(a, o, v, t, e), {
      renderGotoButton: V
    } = te(o, h, t, e);
    y(o.value, t.value, p.value, 7), L([o, t], () => {
      y(o.value, t.value, p.value, 7);
    }), L(o, () => {
      e.emit("pageIndexChanged", o.value);
    }), L(t, () => {
      e.emit("pageSizeChanged", t.value);
    });
    const G = g(() => ({
      "ngx-pagination": !0,
      pagination: !0,
      responsive: c.value,
      "pager-viewmode-default": s.value === "default",
      "pager-viewmode-simple": s.value === "simple"
    })), _ = g(() => ({
      position: "relative",
      "justify-content": n.value === "center" ? "center" : "start"
    }));
    function W() {
      return u(R, null, [E.value && $(), D.value && q(), d.value && P(), d.value && w(), M.value && F(), d.value && O(), d.value && S(), B.value && V()]);
    }
    function H() {
      return u(R, null, [u("li", {
        class: "page-item d-flex flex-fill"
      }, null), d.value && P(), d.value && w(), V(), u("li", {
        class: "page-item page-separator",
        style: "margin-left: 10px"
      }, [u("span", {
        style: "font-size: 15px; font-weight: 200;"
      }, [x(" /")])]), u("li", {
        class: "page-item page-total",
        style: "margin-left: 5px"
      }, [u("span", {
        style: "font-size: 16px; font-weight: 600;"
      }, [x(" "), h.value])]), d.value && O(), d.value && S()]);
    }
    return () => u("div", {
      ref: l,
      class: "pagination-container"
    }, [z.value && u("ul", {
      role: "navigation",
      class: G.value,
      style: _.value
    }, [s.value === "default" ? W() : H()])]);
  }
});
C.register = (a, e, c) => {
  a.pagination = C, e.pagination = ae;
};
C.registerDesigner = (a, e, c) => {
  a.pagination = Re, e.pagination = ae;
};
const Ve = fe(C);
export {
  C as FPagination,
  Ve as default,
  U as paginationProps,
  ae as propsResolver
};