@farris/ui-vue 1.7.3 → 1.7.4

package/components/pagination/index.esm.js

@@ -1,7 +1,205 @@
-import { computed as v, ref as x, watch as S, createVNode as a, defineComponent as K, watchEffect as q, Fragment as P, createTextVNode as E } from "vue";
-import { LocaleService as k } from "../locale/index.esm.js";
-import { withInstall as J } from "../common/index.esm.js";
-const Q = {
+import { computed as u, ref as f, watch as k, createVNode as t, defineComponent as J, watchEffect as ae, Fragment as G, createTextVNode as A, inject as ne, onMounted as le } from "vue";
+import { resolveAppearance as se, createPropsResolver as ie } from "../dynamic-resolver/index.esm.js";
+import { LocaleService as B } from "../locale/index.esm.js";
+import { useDesignerComponent as oe } from "../designer-canvas/index.esm.js";
+import { withInstall as ue } from "../common/index.esm.js";
+const re = /* @__PURE__ */ new Map([
+  ["appearance", se]
+]), ce = "https://json-schema.org/draft/2020-12/schema", pe = "https://farris-design.gitee.io/pagination.schema.json", de = "pagination", ve = "A Farris Component", ge = "object", fe = {
+  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: "string",
+    default: ""
+  }
+}, me = [
+  "id",
+  "type"
+], he = {
+  $schema: ce,
+  $id: pe,
+  title: de,
+  description: ve,
+  type: ge,
+  properties: fe,
+  required: me
+}, be = "pagination", ye = "A Farris Component", xe = "object", we = {
+  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: "右对齐"
+            }
+          ]
+        }
+      }
+    }
+  }
+}, Ie = {
+  title: be,
+  description: ye,
+  type: xe,
+  categories: we
+};
+function Ce(e, a, v) {
+  return a;
+}
+const H = {
   /**
    * 当前页码
    */
@@ -46,321 +244,321 @@ const Q = {
    * 是否展示分页汇总信息
    */
   showPageInfo: { type: Boolean, default: !1 }
-};
-function U(e, l, p, i) {
-  const t = v(() => k.getLocaleValue("pagination.goto.prefix")), s = x(""), n = x(e.value);
-  S(e, (d) => {
+}, Q = ie(H, he, re, Ce, Ie);
+function U(e, a, v, r) {
+  const s = u(() => B.getLocaleValue("pagination.goto.prefix")), i = f(""), n = f(e.value);
+  k(e, (d) => {
     n.value !== d && (n.value = d);
   });
-  function o(d) {
-    return !isNaN(d) && d >= 1 && d <= l.value;
+  function l(d) {
+    return !isNaN(d) && d >= 1 && d <= a.value;
   }
-  function r(d) {
-    const y = e.value;
-    n.value = d.target.valueAsNumber, o(n.value) ? e.value = n.value : n.value = y, i.emit("update:currentPage", e.value), i.emit("changed", {
+  function c(d) {
+    const x = e.value;
+    n.value = d.target.valueAsNumber, l(n.value) ? e.value = n.value : n.value = x, r.emit("update:currentPage", e.value), r.emit("changed", {
       pageIndex: e.value,
-      pageSize: p.value
-    }), i.emit("pageIndexChanged", {
+      pageSize: v.value
+    }), r.emit("pageIndexChanged", {
       pageIndex: e.value,
-      pageSize: p.value
+      pageSize: v.value
     });
   }
-  function u(d) {
-    d.key === "Enter" && r(d);
+  function o(d) {
+    d.key === "Enter" && c(d);
   }
-  function c() {
-    return a("li", {
+  function p() {
+    return t("li", {
       class: "page-goto-input d-flex flex-row",
       style: "padding-left: 10px; white-space: nowrap;"
-    }, [a("span", {
+    }, [t("span", {
       class: "pagination-message"
-    }, [t.value]), a("input", {
+    }, [s.value]), t("input", {
       title: "page-index-spinner",
       type: "number",
       class: "form-control farris-gotopagenumber",
       value: n.value,
       min: 1,
-      max: l.value,
+      max: a.value,
       style: "display: inline-block;margin-left:3px;",
-      onBlur: (d) => r(d),
-      onKeyup: (d) => u(d)
-    }, null), s.value]);
+      onBlur: (d) => c(d),
+      onKeyup: (d) => o(d)
+    }, null), i.value]);
   }
   return {
-    renderGotoButton: c
+    renderGotoButton: p
   };
 }
-function X(e, l, p, i, t) {
-  const s = v(() => ({
+function X(e, a, v, r, s) {
+  const i = u(() => ({
     "page-item": !0,
-    disabled: l.value
+    disabled: a.value
   }));
-  function n(c) {
-    e.value = e.value < p.value ? e.value + 1 : p.value, t.emit("update:currentPage", e.value), t.emit("changed", {
+  function n(p) {
+    e.value = e.value < v.value ? e.value + 1 : v.value, s.emit("update:currentPage", e.value), s.emit("changed", {
       pageIndex: e.value,
-      pageSize: i.value
-    }), t.emit("pageIndexChanged", {
+      pageSize: r.value
+    }), s.emit("pageIndexChanged", {
       pageIndex: e.value,
-      pageSize: i.value
+      pageSize: r.value
     });
   }
-  function o(c) {
-    e.value = p.value, t.emit("update:currentPage", e.value), t.emit("changed", {
+  function l(p) {
+    e.value = v.value, s.emit("update:currentPage", e.value), s.emit("changed", {
       pageIndex: e.value,
-      pageSize: i.value
-    }), t.emit("pageIndexChanged", {
+      pageSize: r.value
+    }), s.emit("pageIndexChanged", {
       pageIndex: e.value,
-      pageSize: i.value
+      pageSize: r.value
     });
   }
-  function r() {
-    return a("li", {
-      class: s.value
-    }, [!l.value && a("a", {
+  function c() {
+    return t("li", {
+      class: i.value
+    }, [!a.value && t("a", {
       class: "page-link",
       tabindex: "0",
-      onClick: (c) => n()
-    }, [a("span", {
+      onClick: (p) => n()
+    }, [t("span", {
       class: "f-icon f-page-next"
-    }, null)]), l.value && a("span", {
+    }, null)]), a.value && t("span", {
       class: "page-link"
-    }, [a("span", {
+    }, [t("span", {
       class: "f-icon f-page-next"
     }, null)])]);
   }
-  function u() {
-    return a("li", {
-      class: s.value
-    }, [!l.value && a("a", {
+  function o() {
+    return t("li", {
+      class: i.value
+    }, [!a.value && t("a", {
       class: "page-link",
       tabindex: "0",
-      onClick: (c) => o()
-    }, [a("span", {
+      onClick: (p) => l()
+    }, [t("span", {
       class: "f-icon f-page-last"
-    }, null)]), l.value && a("span", {
+    }, null)]), a.value && t("span", {
       class: "page-link"
-    }, [a("span", {
+    }, [t("span", {
       class: "f-icon f-page-last"
     }, null)])]);
   }
   return {
-    renderLastPage: u,
-    renderNextPage: r
+    renderLastPage: o,
+    renderNextPage: c
   };
 }
-function Y(e, l) {
-  const p = v(() => k.getLocaleValue("pagination.totalInfo.firstText")), i = v(() => k.getLocaleValue("pagination.totalInfo.lastText")), t = v(() => ({
+function Y(e, a) {
+  const v = u(() => B.getLocaleValue("pagination.totalInfo.firstText")), r = u(() => B.getLocaleValue("pagination.totalInfo.lastText")), s = u(() => ({
     "pagination-message": !0,
     "text-truncate": !0,
     "d-flex": !0,
     "ml-auto": e.value === "right",
     "flex-fill": e.value === "right"
   }));
-  function s() {
-    return a("li", {
-      class: t.value
-    }, [a("div", {
+  function i() {
+    return t("li", {
+      class: s.value
+    }, [t("div", {
       class: "text-truncate"
-    }, [a("span", {
+    }, [t("span", {
       class: "pg-message-text"
-    }, [p.value]), a("b", {
+    }, [v.value]), t("b", {
       class: "pg-message-total"
-    }, [l.value]), a("span", {
+    }, [a.value]), t("span", {
       class: "pg-message-text"
-    }, [i.value])])]);
+    }, [r.value])])]);
   }
   return {
-    renderPageInfo: s
+    renderPageInfo: i
   };
 }
-function Z(e, l, p, i, t) {
-  const s = x(!1), n = v(() => k.getLocaleValue("pagination.show")), o = v(() => k.getLocaleValue("pagination.totalInfo.lastText")), r = v(() => ({
+function Z(e, a, v, r, s) {
+  const i = f(!1), n = u(() => B.getLocaleValue("pagination.show")), l = u(() => B.getLocaleValue("pagination.totalInfo.lastText")), c = u(() => ({
     dropup: !0,
     "dropdown-right": !0,
     "pg-pagelist": !0,
-    "pagelist-disabled": i.value === 0,
-    show: s.value
-  })), u = v(() => ({
+    "pagelist-disabled": r.value === 0,
+    show: i.value
+  })), o = u(() => ({
     "dropdown-menu": !0,
-    show: s.value
-  })), c = (g) => ({
+    show: i.value
+  })), p = (g) => ({
     "w-100": !0,
     "dropdown-item": !0,
-    active: l.value === g
+    active: a.value === g
   });
   function d(g) {
-    s.value = !0;
+    i.value = !0;
   }
-  function y(g) {
-    s.value = !1;
+  function x(g) {
+    i.value = !1;
   }
-  function h(g, f, C) {
-    const j = g * f - f + 1;
-    return Math.ceil(j / C);
+  function b(g, m, S) {
+    const N = g * m - m + 1;
+    return Math.ceil(N / S);
   }
-  function I(g, f) {
-    const C = e.value;
-    e.value = h(e.value, l.value, f), C !== e.value && t.emit("update:currentPage", e.value), l.value = f, s.value = !1, t.emit("update:pageSize", l.value), t.emit("changed", {
+  function I(g, m) {
+    const S = e.value;
+    e.value = b(e.value, a.value, m), S !== e.value && s.emit("update:currentPage", e.value), a.value = m, i.value = !1, s.emit("update:pageSize", a.value), s.emit("changed", {
       pageIndex: e.value,
-      pageSize: l.value
-    }), t.emit("pageSizeChanged", {
+      pageSize: a.value
+    }), s.emit("pageSizeChanged", {
       pageIndex: e.value,
-      pageSize: l.value
+      pageSize: a.value
     });
   }
-  function b() {
-    return a("li", {
+  function y() {
+    return t("li", {
       class: "pagination-pagelist"
-    }, [a("div", {
-      class: r.value,
+    }, [t("div", {
+      class: c.value,
       onMouseenter: (g) => d(),
-      onMouseleave: (g) => y()
-    }, [a("div", {
+      onMouseleave: (g) => x()
+    }, [t("div", {
       class: "pg-pagelist-info"
-    }, [a("span", {
+    }, [t("span", {
       class: "pagelist-text"
-    }, [n.value]), a("b", {
+    }, [n.value]), t("b", {
       class: "cur-pagesize"
-    }, [l.value]), a("span", {
+    }, [a.value]), t("span", {
       class: "pagelist-text"
-    }, [o.value]), a("i", {
+    }, [l.value]), t("i", {
       class: "f-icon f-icon-dropdown"
-    }, null)]), a("div", {
-      class: u.value,
+    }, null)]), t("div", {
+      class: o.value,
       style: "margin-bottom: -1px;"
-    }, [p.value.map((g) => a("li", {
-      class: c(g),
-      onClick: (f) => I(f, g)
-    }, [a("span", null, [g])]))])])]);
+    }, [v.value.map((g) => t("li", {
+      class: p(g),
+      onClick: (m) => I(m, g)
+    }, [t("span", null, [g])]))])])]);
   }
   return {
-    renderPageList: b
+    renderPageList: y
   };
 }
-function _(e, l, p, i, t) {
-  const s = (u) => ({
+function _(e, a, v, r, s) {
+  const i = (o) => ({
     "page-item": !0,
-    current: l.value === u.value,
-    ellipsis: u.label === "...",
+    current: a.value === o.value,
+    ellipsis: o.label === "...",
     disabled: e.disabled
-  }), n = (u) => ({
+  }), n = (o) => ({
     "f-icon": !0,
-    "f-icon-arrow-seek-left": u.value < l.value,
-    "f-icon-arrow-seek-right": u.value > l.value
+    "f-icon-arrow-seek-left": o.value < a.value,
+    "f-icon-arrow-seek-right": o.value > a.value
   });
-  function o(u, c) {
-    l.value = c, t.emit("update:currentPage", l.value), t.emit("changed", {
-      pageIndex: l.value,
-      pageSize: i.value
-    }), t.emit("pageIndexChanged", {
-      pageIndex: l.value,
-      pageSize: i.value
+  function l(o, p) {
+    a.value = p, s.emit("update:currentPage", a.value), s.emit("changed", {
+      pageIndex: a.value,
+      pageSize: r.value
+    }), s.emit("pageIndexChanged", {
+      pageIndex: a.value,
+      pageSize: r.value
     });
   }
-  function r() {
-    return p.value.map((u) => a("li", {
-      class: s(u),
-      key: u.value + ""
-    }, [l.value !== u.value && a("a", {
+  function c() {
+    return v.value.map((o) => t("li", {
+      class: i(o),
+      key: o.value + ""
+    }, [a.value !== o.value && t("a", {
       class: "page-link",
       tabindex: "0",
-      onClick: (c) => o(c, u.value)
-    }, [a("span", {
+      onClick: (p) => l(p, o.value)
+    }, [t("span", {
       class: "page-link-label"
-    }, [u.label]), u.label === "..." && a("i", {
-      class: n(u)
-    }, null)]), l.value === u.value && a("span", {
+    }, [o.label]), o.label === "..." && t("i", {
+      class: n(o)
+    }, null)]), a.value === o.value && t("span", {
       class: "page-link"
-    }, [u.label])]));
+    }, [o.label])]));
   }
   return {
-    renderPageNumbers: r
+    renderPageNumbers: c
   };
 }
-function R(e, l, p, i, t) {
-  const s = v(() => ({
+function ee(e, a, v, r, s) {
+  const i = u(() => ({
     "page-item": !0,
-    disabled: l.value
+    disabled: a.value
   }));
-  function n(c) {
-    e.value = 1, t.emit("update:currentPage", e.value), t.emit("changed", {
+  function n(p) {
+    e.value = 1, s.emit("update:currentPage", e.value), s.emit("changed", {
       pageIndex: e.value,
-      pageSize: i.value
-    }), t.emit("pageIndexChanged", {
+      pageSize: r.value
+    }), s.emit("pageIndexChanged", {
       pageIndex: e.value,
-      pageSize: i.value
+      pageSize: r.value
     });
   }
-  function o(c) {
-    e.value = e.value > 2 ? e.value - 1 : 1, t.emit("update:currentPage", e.value), t.emit("changed", {
+  function l(p) {
+    e.value = e.value > 2 ? e.value - 1 : 1, s.emit("update:currentPage", e.value), s.emit("changed", {
       pageIndex: e.value,
-      pageSize: i.value
-    }), t.emit("pageIndexChanged", {
+      pageSize: r.value
+    }), s.emit("pageIndexChanged", {
       pageIndex: e.value,
-      pageSize: i.value
+      pageSize: r.value
     });
   }
-  function r() {
-    return a("li", {
-      class: s.value
-    }, [p.value && a("a", {
+  function c() {
+    return t("li", {
+      class: i.value
+    }, [v.value && t("a", {
       tabindex: "0",
       class: "page-link",
-      onClick: (c) => n()
-    }, [a("span", {
+      onClick: (p) => n()
+    }, [t("span", {
       class: "f-icon f-page-first"
-    }, null)]), l.value && a("span", {
+    }, null)]), a.value && t("span", {
       class: "page-link"
-    }, [a("span", {
+    }, [t("span", {
       class: "f-icon f-page-first"
     }, null)])]);
   }
-  function u() {
-    return a("li", {
-      class: s.value
-    }, [p.value && a("a", {
+  function o() {
+    return t("li", {
+      class: i.value
+    }, [v.value && t("a", {
       tabindex: "0",
       class: "page-link",
-      onClick: (c) => o()
-    }, [a("span", {
+      onClick: (p) => l()
+    }, [t("span", {
       class: "f-icon f-page-pre"
-    }, null)]), l.value && a("span", {
+    }, null)]), a.value && t("span", {
       class: "page-link"
-    }, [a("span", {
+    }, [t("span", {
       class: "f-icon f-page-pre"
     }, null)])]);
   }
   return {
-    renderFirstPage: r,
-    renderPreviousPage: u
+    renderFirstPage: c,
+    renderPreviousPage: o
   };
 }
-function ee(e) {
-  const l = x([]);
-  function p(t, s, n, o) {
-    const r = Math.ceil(n / 2);
-    return t === n ? o : t === 1 ? t : n < o ? o - r < s ? o - n + t : r < s ? s - r + t : t : t;
+function te(e) {
+  const a = f([]);
+  function v(s, i, n, l) {
+    const c = Math.ceil(n / 2);
+    return s === n ? l : s === 1 ? s : n < l ? l - c < i ? l - n + s : c < i ? i - c + s : s : s;
   }
-  function i(t, s, n, o) {
-    const r = [], u = Math.ceil(n / s), c = Math.ceil(o / 2), d = t <= c, y = u - c < t, h = !d && !y, I = o < u;
-    let b = 1;
-    for (; b <= u && b <= o; ) {
-      const g = p(b, t, o, u), f = b === 2 && (h || y), C = b === o - 1 && (h || d), N = I && (f || C) ? "..." : "" + g;
-      r.push({ label: N, value: g }), b++;
+  function r(s, i, n, l) {
+    const c = [], o = Math.ceil(n / i), p = Math.ceil(l / 2), d = s <= p, x = o - p < s, b = !d && !x, I = l < o;
+    let y = 1;
+    for (; y <= o && y <= l; ) {
+      const g = v(y, s, l, o), m = y === 2 && (b || x), S = y === l - 1 && (b || d), j = I && (m || S) ? "..." : "" + g;
+      c.push({ label: j, value: g }), y++;
     }
-    l.value = r;
+    a.value = c;
   }
-  return { pages: l, updatePages: i };
+  return { pages: a, updatePages: r };
 }
-const ae = /* @__PURE__ */ K({
+const E = /* @__PURE__ */ J({
   name: "FPagination",
-  props: Q,
+  props: H,
   emits: ["changed", "pageIndexChanged", "pageSizeChanged", "update:currentPage", "update:pageSize"],
-  setup(e, l) {
-    const p = x(!1), i = x(""), t = x(!1), s = x(e.pageSize), n = x(e.currentPage), o = x(e.totalItems), {
-      pages: r,
-      updatePages: u
-    } = ee(), c = {
+  setup(e, a) {
+    const v = f(!1), r = f(""), s = f(!1), i = f(e.pageSize), n = f(e.currentPage), l = f(e.totalItems), {
+      pages: c,
+      updatePages: o
+    } = te(), p = {
       position: "relative"
     }, d = {
       position: "absolute",
@@ -369,79 +567,158 @@ const ae = /* @__PURE__ */ K({
       background: "rgba(250,250,252,.6)",
       width: "100%",
       height: "100%"
-    }, y = v(() => !o.value || n.value === 1), h = v(() => e.pageList), I = v(() => Math.ceil(o.value / s.value)), b = v(() => !o.value || n.value === I.value), g = v(() => e.showGoButton), f = v(() => !!o.value && n.value > 1), C = v(() => !(t.value && r.value.length <= 1)), N = v(() => e.showPageInfo), j = v(() => e.showPageList), O = v(() => e.showPageNumbers), w = v(() => !0), {
-      renderFirstPage: B,
-      renderPreviousPage: T
-    } = R(n, y, f, s, l), {
-      renderLastPage: z,
-      renderNextPage: M
-    } = X(n, b, I, s, l), {
-      renderPageInfo: $
-    } = Y(i, o), {
-      renderPageList: G
-    } = Z(n, s, h, o, l), {
-      renderPageNumbers: F
-    } = _(e, n, r, s, l), {
-      renderGotoButton: V
-    } = U(n, I, s, l);
-    u(n.value, s.value, o.value, 7), S(() => e.totalItems, (m) => {
-      o.value = m, u(n.value, s.value, o.value, 7);
-    }), S(() => e.currentPage, (m, L) => {
-      m !== L && (n.value = m, u(n.value, s.value, o.value, 7));
-    }), S(() => e.pageSize, (m, L) => {
-      m !== L && (s.value = m, u(n.value, s.value, o.value, 7));
-    }), q(() => {
-      if (!h.value || !h.value.length)
+    }, x = u(() => !l.value || n.value === 1), b = u(() => e.pageList), I = u(() => Math.ceil(l.value / i.value)), y = u(() => !l.value || n.value === I.value), g = u(() => e.showGoButton), m = u(() => !!l.value && n.value > 1), S = u(() => !(s.value && c.value.length <= 1)), j = u(() => e.showPageInfo), N = u(() => e.showPageList), z = u(() => e.showPageNumbers), C = u(() => !0), {
+      renderFirstPage: M,
+      renderPreviousPage: w
+    } = ee(n, x, m, i, a), {
+      renderLastPage: P,
+      renderNextPage: L
+    } = X(n, y, I, i, a), {
+      renderPageInfo: T
+    } = Y(r, l), {
+      renderPageList: F
+    } = Z(n, i, b, l, a), {
+      renderPageNumbers: q
+    } = _(e, n, c, i, a), {
+      renderGotoButton: $
+    } = U(n, I, i, a);
+    o(n.value, i.value, l.value, 7), k(() => e.totalItems, (h) => {
+      l.value = h, o(n.value, i.value, l.value, 7);
+    }), k(() => e.currentPage, (h, O) => {
+      h !== O && (n.value = h, o(n.value, i.value, l.value, 7));
+    }), k(() => e.pageSize, (h, O) => {
+      h !== O && (i.value = h, o(n.value, i.value, l.value, 7));
+    }), ae(() => {
+      if (!b.value || !b.value.length)
         return;
-      const m = h.value.includes(s.value);
-      s.value = m ? s.value : h.value[0], m || l.emit("update:pageSize", s.value);
+      const h = b.value.includes(i.value);
+      i.value = h ? i.value : b.value[0], h || a.emit("update:pageSize", i.value);
     })();
-    const A = v(() => ({
+    const V = u(() => ({
       "d-flex": !0,
       "flex-wrap": !0,
       "justify-content-end": !0,
       "w-100": !0,
       "ngx-pagination": !0,
       pagination: !0,
-      responsive: p.value,
+      responsive: v.value,
       "pager-viewmode-default": e.mode === "default",
       "pager-viewmode-simple": e.mode === "simple"
-    })), W = v(() => ({
+    })), D = u(() => ({
       position: "relative",
-      "justify-content": i.value === "center" ? "center" : "start"
+      "justify-content": r.value === "center" ? "center" : "start"
     }));
-    function D() {
-      return a(P, null, [N.value && $(), j.value && G(), w.value && B(), w.value && T(), O.value && F(), w.value && M(), w.value && z(), g.value && V()]);
+    function R() {
+      return t(G, null, [j.value && T(), N.value && F(), C.value && M(), C.value && w(), z.value && q(), C.value && L(), C.value && P(), g.value && $()]);
     }
-    function H() {
-      return a(P, null, [a("li", {
+    function W() {
+      return t(G, null, [t("li", {
         class: "page-item d-flex flex-fill"
-      }, null), w.value && B(), w.value && T(), V(), a("li", {
+      }, null), C.value && M(), C.value && w(), $(), t("li", {
         class: "page-item page-separator",
         style: "margin-left: 10px"
-      }, [a("span", {
+      }, [t("span", {
         style: "font-size: 15px; font-weight: 200;"
-      }, [E(" /")])]), a("li", {
+      }, [A(" /")])]), t("li", {
         class: "page-item page-total",
         style: "margin-left: 5px"
-      }, [a("span", {
+      }, [t("span", {
         style: "font-size: 16px; font-weight: 600;"
-      }, [E(" "), I.value])]), w.value && M(), w.value && z()]);
+      }, [A(" "), I.value])]), C.value && L(), C.value && P()]);
     }
-    return () => a("div", {
+    return () => t("div", {
       class: "pagination-container",
-      style: c
-    }, [e.disabled && a("div", {
+      style: p
+    }, [e.disabled && t("div", {
       style: d
-    }, null), C.value && a("ul", {
+    }, null), S.value && t("ul", {
       role: "navigation",
-      class: A.value,
-      style: W.value
-    }, [e.mode === "default" ? D() : H()])]);
+      class: V.value,
+      style: D.value
+    }, [e.mode === "default" ? R() : W()])]);
   }
-}), ue = J(ae);
+}), Se = /* @__PURE__ */ J({
+  name: "FPagination",
+  props: H,
+  emits: ["pageIndexChanged", "pageSizeChanged"],
+  setup(e, a) {
+    const v = f(!1), r = f(e.mode), s = f(""), i = f(!1), n = f(e.pageSize), l = f(e.currentPage), c = f(e.totalItems), o = f(), p = ne("design-item-context"), d = oe(o, p);
+    le(() => {
+      o.value.componentInstance = d;
+    }), a.expose(d.value);
+    const {
+      pages: x,
+      updatePages: b
+    } = te(), I = u(() => l.value === 1), y = u(() => [20, 50, 100]), g = u(() => Math.ceil(c.value / n.value)), m = u(() => l.value === g.value), S = u(() => !0), j = u(() => l.value > 1), N = u(() => !(i.value && x.value.length <= 1)), z = u(() => !0), C = u(() => !0), M = u(() => !0), w = u(() => !0), {
+      renderFirstPage: P,
+      renderPreviousPage: L
+    } = ee(l, I, j, n, a), {
+      renderLastPage: T,
+      renderNextPage: F
+    } = X(l, m, g, n, a), {
+      renderPageInfo: q
+    } = Y(s, c), {
+      renderPageList: $
+    } = Z(l, n, y, c, a), {
+      renderPageNumbers: K
+    } = _(e, l, x, n, a), {
+      renderGotoButton: V
+    } = U(l, g, n, a);
+    b(l.value, n.value, c.value, 7), k([l, n], () => {
+      b(l.value, n.value, c.value, 7);
+    }), k(l, () => {
+      a.emit("pageIndexChanged", l.value);
+    }), k(n, () => {
+      a.emit("pageSizeChanged", n.value);
+    });
+    const D = u(() => ({
+      "ngx-pagination": !0,
+      pagination: !0,
+      responsive: v.value,
+      "pager-viewmode-default": r.value === "default",
+      "pager-viewmode-simple": r.value === "simple"
+    })), R = u(() => ({
+      position: "relative",
+      "justify-content": s.value === "center" ? "center" : "start"
+    }));
+    function W() {
+      return t(G, null, [z.value && q(), C.value && $(), w.value && P(), w.value && L(), M.value && K(), w.value && F(), w.value && T(), S.value && V()]);
+    }
+    function h() {
+      return t(G, null, [t("li", {
+        class: "page-item d-flex flex-fill"
+      }, null), w.value && P(), w.value && L(), V(), t("li", {
+        class: "page-item page-separator",
+        style: "margin-left: 10px"
+      }, [t("span", {
+        style: "font-size: 15px; font-weight: 200;"
+      }, [A(" /")])]), t("li", {
+        class: "page-item page-total",
+        style: "margin-left: 5px"
+      }, [t("span", {
+        style: "font-size: 16px; font-weight: 600;"
+      }, [A(" "), g.value])]), w.value && F(), w.value && T()]);
+    }
+    return () => t("div", {
+      ref: o,
+      class: "pagination-container"
+    }, [N.value && t("ul", {
+      role: "navigation",
+      class: D.value,
+      style: R.value
+    }, [r.value === "default" ? W() : h()])]);
+  }
+});
+E.register = (e, a, v) => {
+  e.pagination = E, a.pagination = Q;
+};
+E.registerDesigner = (e, a, v) => {
+  e.pagination = Se, a.pagination = Q;
+};
+const Oe = ue(E);
 export {
-  ae as FPagination,
-  ue as default,
-  Q as paginationProps
+  E as FPagination,
+  Oe as default,
+  H as paginationProps,
+  Q as propsResolver
 };