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

Farris Vue, a Farris Design based Vue3 component library.

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