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

Farris Vue, a Farris Design based Vue3 component library.

import { ref as m, watch as B, createVNode as u, computed as g, defineComponent as U, watchEffect as re, Fragment as C, createTextVNode as F, inject as ce, onMounted as pe } from "vue";
import { isPlainObject as Q, cloneDeep as X } from "lodash-es";
import { withInstall as de } from "../common/index.esm.js";
const Y = {}, Z = {};
function H(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 ? H(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 fe(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 ? H(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 = fe(s);
    const r = Z[a];
    return n = r ? r({ getSchemaByType: K }, n, e, c) : n, n;
  }
  return null;
}
function ve(a, e) {
  const c = H(e);
  return Object.keys(c).reduce((s, n) => (Object.prototype.hasOwnProperty.call(a, n) && (s[n] && Q(s[n]) && Q(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, d, v) {
    if (typeof d == "number")
      return v[l].length === d;
    if (typeof d == "object") {
      const b = Object.keys(d)[0], w = d[b];
      if (b === "not")
        return Number(v[l].length) !== Number(w);
      if (b === "moreThan")
        return Number(v[l].length) >= Number(w);
      if (b === "lessThan")
        return Number(v[l].length) <= Number(w);
    }
    return !1;
  }
  function c(l, i, d, v) {
    return v[l] && v[l].propertyValue && String(v[l].propertyValue.value) === String(d);
  }
  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 d = l;
    return typeof i == "number" ? [{ target: d, operator: "length", param: null, value: Number(i) }] : typeof i == "boolean" ? [{ target: d, operator: "getProperty", param: l, value: !!i }] : typeof i == "object" ? Object.keys(i).map((v) => {
      if (v === "length")
        return { target: d, operator: "length", param: null, value: i[v] };
      const b = v, w = i[v];
      return { target: d, operator: "getProperty", param: b, value: w };
    }) : [];
  }
  function r(l) {
    return Object.keys(l).reduce((d, v) => {
      const b = n(v, l[v]);
      return d.push(...b), d;
    }, []);
  }
  function t(l, i) {
    if (s.has(l.operator)) {
      const d = s.get(l.operator);
      return d && d(l.target, l.param, l.value, i) || !1;
    }
    return !1;
  }
  function o(l, i) {
    return r(l).reduce((b, w) => b && t(w, i), !0);
  }
  function p(l, i) {
    const d = Object.keys(l), v = d.includes("allOf"), b = d.includes("anyOf"), w = v || b, j = (w ? l[w ? v ? "allOf" : "anyOf" : "allOf"] : [l]).map((L) => o(L, i));
    return v ? !j.includes(!1) : j.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, d) => (i[d] = a[d].default, i), {});
    return Object.assign(l, p);
  };
}
function we(a, e) {
  return { customClass: e.class, customStyle: e.style };
}
const Se = /* @__PURE__ */ new Map([
  ["appearance", we]
]), Pe = "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: Pe,
  $id: je,
  title: ke,
  description: Ne,
  type: Oe,
  properties: Me,
  required: Be
}, Te = "pagination", ze = "A Farris Component", $e = "object", De = {
  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: "右对齐"
            }
          ]
        }
      }
    }
  }
}, Ee = {
  title: Te,
  description: ze,
  type: $e,
  categories: De
};
function Ae(a, e, c) {
  return e;
}
const J = {
  /**
   * 当前页码
   */
  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(J, Le, Se, Ae, Ee);
function te(a, e, c, s) {
  const n = m("跳转至"), r = m(""), t = m(a.value);
  B(t, (i, d) => {
    i >= 1 && i <= e.value ? a.value = i : t.value = d;
  }), B(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 d(h) {
    r.value = !0;
  }
  function v(h) {
    r.value = !1;
  }
  function b(h, j, M) {
    const T = h * j - j + 1;
    return Math.ceil(T / M);
  }
  function w(h, j) {
    const M = a.value;
    a.value = b(a.value, e.value, j), M !== a.value && n.emit("update:currentPage", a.value), e.value = j, 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 P() {
    return u("li", {
      class: "pagination-pagelist"
    }, [u("div", {
      class: p.value,
      onMouseenter: (h) => d(),
      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: (j) => w(j, h)
    }, [u("span", null, [h])]))])])]);
  }
  return {
    renderPageList: P
  };
}
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), d = n <= i, v = l - i < n, b = !d && !v, w = o < l;
    let P = 1;
    for (; P <= l && P <= o; ) {
      const h = c(P, n, o, l), j = P === 2 && (b || v), M = P === o - 1 && (b || d), L = w && (j || M) ? "..." : "" + h;
      p.push({ label: L, value: h }), P++;
    }
    e.value = p;
  }
  return { pages: e, updatePages: s };
}
const R = /* @__PURE__ */ U({
  name: "FPagination",
  props: J,
  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(), d = {
      position: "relative"
    }, v = {
      position: "absolute",
      right: "0",
      zIndex: 1,
      background: "rgba(250,250,252,.6)",
      width: "100%",
      height: "100%"
    }, b = g(() => !p.value || o.value === 1), w = g(() => a.pageList), P = g(() => Math.ceil(p.value / t.value)), h = g(() => !p.value || o.value === P.value), j = g(() => a.showGoButton), M = g(() => o.value > 1), L = g(() => !(r.value && l.value.length <= 1)), T = g(() => !0), z = g(() => a.showPageList), $ = g(() => a.showPageNumbers), f = g(() => !0), {
      renderFirstPage: y,
      renderPreviousPage: S
    } = oe(o, b, M, t, e), {
      renderLastPage: k,
      renderNextPage: O
    } = ne(o, h, P, t, e), {
      renderPageInfo: E
    } = le(n, p), {
      renderPageList: q
    } = se(o, t, w, p, e), {
      renderPageNumbers: x
    } = ie(a, o, l, t, e), {
      renderGotoButton: A
    } = te(o, P, t, e);
    i(o.value, t.value, p.value, 7), B(() => a.totalItems, (N) => {
      p.value = N;
    }), B([o, t, p], () => {
      i(o.value, t.value, p.value, 7);
    }), B(o, (N, D) => {
    }), B(t, (N, D) => {
    }), B(() => a.totalItems, (N) => {
      p.value = N, i(o.value, t.value, p.value, 7);
    }), B(() => a.currentPage, (N, D) => {
      N !== D && (o.value = N);
    }), B(() => a.pageSize, (N, D) => {
      N !== D && (t.value = N);
    }), re(() => {
      const N = w.value.includes(t.value);
      t.value = N ? t.value : w.value[0], N || (e.emit("update:pageSize", t.value), e.emit("changed", {
        pageIndex: o.value,
        pageSize: t.value
      }), e.emit("pageSizeChanged", {
        pageIndex: o.value,
        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 I() {
      return u(C, null, [T.value && E(), z.value && q(), f.value && y(), f.value && S(), $.value && x(), f.value && O(), f.value && k(), j.value && A()]);
    }
    function W() {
      return u(C, null, [u("li", {
        class: "page-item d-flex flex-fill"
      }, null), f.value && y(), f.value && S(), A(), u("li", {
        class: "page-item page-separator",
        style: "margin-left: 10px"
      }, [u("span", {
        style: "font-size: 15px; font-weight: 200;"
      }, [F(" /")])]), u("li", {
        class: "page-item page-total",
        style: "margin-left: 5px"
      }, [u("span", {
        style: "font-size: 16px; font-weight: 600;"
      }, [F(" "), P.value])]), f.value && O(), f.value && k()]);
    }
    return () => u("div", {
      class: "pagination-container",
      style: d
    }, [a.disabled && u("div", {
      style: v
    }, null), L.value && u("ul", {
      role: "navigation",
      class: G.value,
      style: _.value
    }, [s.value === "default" ? I() : W()])]);
  }
});
function Ce(a, e, c) {
  var $;
  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(f) {
    if (!f || !f.value)
      return null;
    if (f.value.schema && f.value.schema.type === "component")
      return f.value;
    const y = m(f == null ? void 0 : f.value.parent), S = i(y);
    return S || null;
  }
  function d(f = e) {
    var O;
    const { componentInstance: y, designerItemElementRef: S } = f;
    if (!y || !y.value)
      return null;
    const { getCustomButtons: k } = y.value;
    return y.value.canMove || k && ((O = k()) != null && O.length) ? S : d(f.parent);
  }
  function v(f) {
    return !!c;
  }
  function b() {
    return (e == null ? void 0 : e.schema.label) || (e == null ? void 0 : e.schema.title) || (e == null ? void 0 : e.schema.name);
  }
  function w() {
  }
  function P(f, y) {
    var S;
    !f || !y || (S = e == null ? void 0 : e.setupContext) == null || S.emit("dragEnd");
  }
  function h(f, y) {
    const { componentType: S } = f;
    let k = K(S, f, y);
    const O = S.toLowerCase().replace(/-/g, "_");
    return k && !k.id && k.type === S && (k.id = `${O}_${Math.random().toString().slice(2, 6)}`), k;
  }
  function j(f) {
  }
  function M(...f) {
  }
  function L() {
    e != null && e.schema.contents && e.schema.contents.map((f) => {
      let y = f.id;
      f.type === "component-ref" && (y = f.component);
      const S = a.value.querySelectorAll(`#${y}-design-item`);
      S != null && S.length && Array.from(S).map((k) => {
        var O;
        (O = k == null ? void 0 : k.componentInstance) != null && O.value.onRemoveComponent && k.componentInstance.value.onRemoveComponent();
      });
    });
  }
  function T() {
  }
  function z(f) {
  }
  return r.value = {
    canMove: t(),
    canSelectParent: o(),
    canDelete: p(),
    canNested: !l(),
    contents: e == null ? void 0 : e.schema.contents,
    elementRef: a,
    parent: ($ = e == null ? void 0 : e.parent) == null ? void 0 : $.componentInstance,
    schema: e == null ? void 0 : e.schema,
    styles: s,
    designerClass: n,
    canAccepts: v,
    getBelongedComponentInstance: i,
    getDraggableDesignItemElement: d,
    getDraggingDisplayText: b,
    getPropConfig: M,
    getDragScopeElement: w,
    onAcceptMovedChildElement: P,
    onChildElementMovedOut: j,
    addNewChildComponentSchema: h,
    triggerBelongedComponentToMoveWhenMoved: m(!1),
    triggerBelongedComponentToDeleteWhenDeleted: m(!1),
    onRemoveComponent: L,
    getCustomButtons: T,
    onPropertyChanged: z
  }, r;
}
const Fe = /* @__PURE__ */ U({
  name: "FPagination",
  props: J,
  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"), d = Ce(l, i);
    pe(() => {
      l.value.componentInstance = d;
    }), e.expose(d.value);
    const {
      pages: v,
      updatePages: b
    } = ue(), w = g(() => o.value === 1), P = g(() => [20, 50, 100]), h = g(() => Math.ceil(p.value / t.value)), j = g(() => o.value === h.value), M = g(() => !0), L = g(() => o.value > 1), T = g(() => !(r.value && v.value.length <= 1)), z = g(() => !0), $ = g(() => !0), f = g(() => !0), y = g(() => !0), {
      renderFirstPage: S,
      renderPreviousPage: k
    } = oe(o, w, L, t, e), {
      renderLastPage: O,
      renderNextPage: E
    } = ne(o, j, h, t, e), {
      renderPageInfo: q
    } = le(n, p), {
      renderPageList: x
    } = se(o, t, P, p, e), {
      renderPageNumbers: A
    } = ie(a, o, v, t, e), {
      renderGotoButton: V
    } = te(o, h, t, e);
    b(o.value, t.value, p.value, 7), B([o, t], () => {
      b(o.value, t.value, p.value, 7);
    }), B(o, () => {
      e.emit("pageIndexChanged", o.value);
    }), B(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 I() {
      return u(C, null, [z.value && q(), $.value && x(), y.value && S(), y.value && k(), f.value && A(), y.value && E(), y.value && O(), M.value && V()]);
    }
    function W() {
      return u(C, null, [u("li", {
        class: "page-item d-flex flex-fill"
      }, null), y.value && S(), y.value && k(), V(), u("li", {
        class: "page-item page-separator",
        style: "margin-left: 10px"
      }, [u("span", {
        style: "font-size: 15px; font-weight: 200;"
      }, [F(" /")])]), u("li", {
        class: "page-item page-total",
        style: "margin-left: 5px"
      }, [u("span", {
        style: "font-size: 16px; font-weight: 600;"
      }, [F(" "), h.value])]), y.value && E(), y.value && O()]);
    }
    return () => u("div", {
      ref: l,
      class: "pagination-container"
    }, [T.value && u("ul", {
      role: "navigation",
      class: G.value,
      style: _.value
    }, [s.value === "default" ? I() : W()])]);
  }
});
R.register = (a, e, c) => {
  a.pagination = R, e.pagination = ae;
};
R.registerDesigner = (a, e, c) => {
  a.pagination = Fe, e.pagination = ae;
};
const Ve = de(R);
export {
  R as FPagination,
  Ve as default,
  J as paginationProps,
  ae as propsResolver
};