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

Farris Vue, a Farris Design based Vue3 component library.

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 = {
  /**
   * 当前页码
   */
  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] },
  /**
   * 是否展示分页汇总信息
   */
  showPageInfo: { type: Boolean, default: !1 }
}, 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 l(d) {
    return !isNaN(d) && d >= 1 && d <= a.value;
  }
  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: v.value
    }), r.emit("pageIndexChanged", {
      pageIndex: e.value,
      pageSize: v.value
    });
  }
  function o(d) {
    d.key === "Enter" && c(d);
  }
  function p() {
    return t("li", {
      class: "page-goto-input d-flex flex-row",
      style: "padding-left: 10px; white-space: nowrap;"
    }, [t("span", {
      class: "pagination-message"
    }, [s.value]), t("input", {
      title: "page-index-spinner",
      type: "number",
      class: "form-control farris-gotopagenumber",
      value: n.value,
      min: 1,
      max: a.value,
      style: "display: inline-block;margin-left:3px;",
      onBlur: (d) => c(d),
      onKeyup: (d) => o(d)
    }, null), i.value]);
  }
  return {
    renderGotoButton: p
  };
}
function X(e, a, v, r, s) {
  const i = u(() => ({
    "page-item": !0,
    disabled: a.value
  }));
  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: r.value
    }), s.emit("pageIndexChanged", {
      pageIndex: e.value,
      pageSize: r.value
    });
  }
  function l(p) {
    e.value = v.value, s.emit("update:currentPage", e.value), s.emit("changed", {
      pageIndex: e.value,
      pageSize: r.value
    }), s.emit("pageIndexChanged", {
      pageIndex: e.value,
      pageSize: r.value
    });
  }
  function c() {
    return t("li", {
      class: i.value
    }, [!a.value && t("a", {
      class: "page-link",
      tabindex: "0",
      onClick: (p) => n()
    }, [t("span", {
      class: "f-icon f-page-next"
    }, null)]), a.value && t("span", {
      class: "page-link"
    }, [t("span", {
      class: "f-icon f-page-next"
    }, null)])]);
  }
  function o() {
    return t("li", {
      class: i.value
    }, [!a.value && t("a", {
      class: "page-link",
      tabindex: "0",
      onClick: (p) => l()
    }, [t("span", {
      class: "f-icon f-page-last"
    }, null)]), a.value && t("span", {
      class: "page-link"
    }, [t("span", {
      class: "f-icon f-page-last"
    }, null)])]);
  }
  return {
    renderLastPage: o,
    renderNextPage: c
  };
}
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 i() {
    return t("li", {
      class: s.value
    }, [t("div", {
      class: "text-truncate"
    }, [t("span", {
      class: "pg-message-text"
    }, [v.value]), t("b", {
      class: "pg-message-total"
    }, [a.value]), t("span", {
      class: "pg-message-text"
    }, [r.value])])]);
  }
  return {
    renderPageInfo: i
  };
}
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": r.value === 0,
    show: i.value
  })), o = u(() => ({
    "dropdown-menu": !0,
    show: i.value
  })), p = (g) => ({
    "w-100": !0,
    "dropdown-item": !0,
    active: a.value === g
  });
  function d(g) {
    i.value = !0;
  }
  function x(g) {
    i.value = !1;
  }
  function b(g, m, S) {
    const N = g * m - m + 1;
    return Math.ceil(N / S);
  }
  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: a.value
    }), s.emit("pageSizeChanged", {
      pageIndex: e.value,
      pageSize: a.value
    });
  }
  function y() {
    return t("li", {
      class: "pagination-pagelist"
    }, [t("div", {
      class: c.value,
      onMouseenter: (g) => d(),
      onMouseleave: (g) => x()
    }, [t("div", {
      class: "pg-pagelist-info"
    }, [t("span", {
      class: "pagelist-text"
    }, [n.value]), t("b", {
      class: "cur-pagesize"
    }, [a.value]), t("span", {
      class: "pagelist-text"
    }, [l.value]), t("i", {
      class: "f-icon f-icon-dropdown"
    }, null)]), t("div", {
      class: o.value,
      style: "margin-bottom: -1px;"
    }, [v.value.map((g) => t("li", {
      class: p(g),
      onClick: (m) => I(m, g)
    }, [t("span", null, [g])]))])])]);
  }
  return {
    renderPageList: y
  };
}
function _(e, a, v, r, s) {
  const i = (o) => ({
    "page-item": !0,
    current: a.value === o.value,
    ellipsis: o.label === "...",
    disabled: e.disabled
  }), n = (o) => ({
    "f-icon": !0,
    "f-icon-arrow-seek-left": o.value < a.value,
    "f-icon-arrow-seek-right": o.value > a.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 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: (p) => l(p, o.value)
    }, [t("span", {
      class: "page-link-label"
    }, [o.label]), o.label === "..." && t("i", {
      class: n(o)
    }, null)]), a.value === o.value && t("span", {
      class: "page-link"
    }, [o.label])]));
  }
  return {
    renderPageNumbers: c
  };
}
function ee(e, a, v, r, s) {
  const i = u(() => ({
    "page-item": !0,
    disabled: a.value
  }));
  function n(p) {
    e.value = 1, s.emit("update:currentPage", e.value), s.emit("changed", {
      pageIndex: e.value,
      pageSize: r.value
    }), s.emit("pageIndexChanged", {
      pageIndex: e.value,
      pageSize: r.value
    });
  }
  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: r.value
    }), s.emit("pageIndexChanged", {
      pageIndex: e.value,
      pageSize: r.value
    });
  }
  function c() {
    return t("li", {
      class: i.value
    }, [v.value && t("a", {
      tabindex: "0",
      class: "page-link",
      onClick: (p) => n()
    }, [t("span", {
      class: "f-icon f-page-first"
    }, null)]), a.value && t("span", {
      class: "page-link"
    }, [t("span", {
      class: "f-icon f-page-first"
    }, null)])]);
  }
  function o() {
    return t("li", {
      class: i.value
    }, [v.value && t("a", {
      tabindex: "0",
      class: "page-link",
      onClick: (p) => l()
    }, [t("span", {
      class: "f-icon f-page-pre"
    }, null)]), a.value && t("span", {
      class: "page-link"
    }, [t("span", {
      class: "f-icon f-page-pre"
    }, null)])]);
  }
  return {
    renderFirstPage: c,
    renderPreviousPage: o
  };
}
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 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++;
    }
    a.value = c;
  }
  return { pages: a, updatePages: r };
}
const E = /* @__PURE__ */ J({
  name: "FPagination",
  props: H,
  emits: ["changed", "pageIndexChanged", "pageSizeChanged", "update:currentPage", "update:pageSize"],
  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",
      right: "0",
      zIndex: 1,
      background: "rgba(250,250,252,.6)",
      width: "100%",
      height: "100%"
    }, 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 h = b.value.includes(i.value);
      i.value = h ? i.value : b.value[0], h || a.emit("update:pageSize", i.value);
    })();
    const V = u(() => ({
      "d-flex": !0,
      "flex-wrap": !0,
      "justify-content-end": !0,
      "w-100": !0,
      "ngx-pagination": !0,
      pagination: !0,
      responsive: v.value,
      "pager-viewmode-default": e.mode === "default",
      "pager-viewmode-simple": e.mode === "simple"
    })), D = u(() => ({
      position: "relative",
      "justify-content": r.value === "center" ? "center" : "start"
    }));
    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 W() {
      return t(G, null, [t("li", {
        class: "page-item d-flex flex-fill"
      }, null), C.value && M(), C.value && w(), $(), 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(" "), I.value])]), C.value && L(), C.value && P()]);
    }
    return () => t("div", {
      class: "pagination-container",
      style: p
    }, [e.disabled && t("div", {
      style: d
    }, null), S.value && t("ul", {
      role: "navigation",
      class: V.value,
      style: D.value
    }, [e.mode === "default" ? R() : W()])]);
  }
}), 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 {
  E as FPagination,
  Oe as default,
  H as paginationProps,
  Q as propsResolver
};