yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-pagination/index.js

@@ -0,0 +1,97 @@
+import { defineComponent, computed, resolveComponent, createBlock, openBlock, normalizeClass, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { ElPagination } from "element-plus";
+import { paginationEmits, paginationProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "ElePagination",
+  components: { ElPagination },
+  props: paginationProps,
+  emits: paginationEmits,
+  setup(props, { emit }) {
+    const isInfinite = computed(() => "*" === props.total);
+    const pageTotal = computed(() => {
+      if (isInfinite.value) {
+        if (props.hasNext) {
+          return Number.MAX_SAFE_INTEGER;
+        }
+        return (props.currentPage || 1) * (props.pageSize || 10);
+      }
+      const num = props.total == null ? void 0 : Number(props.total);
+      return num == null || isNaN(num) ? void 0 : num;
+    });
+    const sizesPopperClass = computed(() => {
+      const classes = ["ele-pagination-popper"];
+      if (props.isFixedPopper) {
+        classes.push("is-fixed");
+      }
+      if (typeof props.popperClass === "string" && props.popperClass) {
+        classes.push(props.popperClass);
+      }
+      return classes.join(" ");
+    });
+    const handleUpdateCurrentPage = (currentPage) => {
+      emit("update:currentPage", currentPage);
+    };
+    const handleUpdatePageSize = (pageSize) => {
+      emit("update:pageSize", pageSize);
+    };
+    return {
+      isInfinite,
+      pageTotal,
+      sizesPopperClass,
+      handleUpdateCurrentPage,
+      handleUpdatePageSize
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElPagination = resolveComponent("ElPagination");
+  return openBlock(), createBlock(_component_ElPagination, {
+    small: _ctx.small,
+    size: _ctx.size,
+    background: _ctx.type === "circle" ? false : _ctx.background,
+    pageSize: _ctx.pageSize,
+    defaultPageSize: _ctx.defaultPageSize,
+    total: _ctx.pageTotal,
+    pageCount: _ctx.pageCount,
+    pagerCount: _ctx.pagerCount,
+    currentPage: _ctx.currentPage,
+    defaultCurrentPage: _ctx.defaultCurrentPage,
+    layout: _ctx.layout,
+    pageSizes: _ctx.pageSizes,
+    popperClass: _ctx.sizesPopperClass,
+    prevText: _ctx.prevText,
+    prevIcon: _ctx.prevIcon,
+    nextText: _ctx.nextText,
+    nextIcon: _ctx.nextIcon,
+    disabled: _ctx.disabled,
+    teleported: _ctx.teleported,
+    hideOnSinglePage: _ctx.hideOnSinglePage,
+    class: normalizeClass([
+      "ele-pagination",
+      { "is-circle": _ctx.type === "circle" },
+      { "is-infinite": _ctx.isInfinite }
+    ]),
+    "onUpdate:currentPage": _ctx.handleUpdateCurrentPage,
+    "onUpdate:pageSize": _ctx.handleUpdatePageSize
+  }, createSlots({ _: 2 }, [
+    renderList(Object.keys(_ctx.$slots), (name) => {
+      return {
+        name,
+        fn: withCtx((slotProps) => [
+          renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+        ])
+      };
+    })
+  ]), 1032, ["small", "size", "background", "pageSize", "defaultPageSize", "total", "pageCount", "pagerCount", "currentPage", "defaultCurrentPage", "layout", "pageSizes", "popperClass", "prevText", "prevIcon", "nextText", "nextIcon", "disabled", "teleported", "hideOnSinglePage", "class", "onUpdate:currentPage", "onUpdate:pageSize"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-pagination/props.d.ts

@@ -0,0 +1,123 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { PaginationType, PaginationTotal } from './types';
+
+/**
+ * 属性
+ */
+export declare const paginationProps: {
+    /** 总条目数 */
+    total: PropType<PaginationTotal>;
+    /** 是否还有下一页 */
+    hasNext: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 风格 */
+    type: {
+        type: PropType<PaginationType>;
+        default: string;
+    };
+    /** 每页数量选择下拉是否使用固定定位 */
+    isFixedPopper: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    pageSize: NumberConstructor;
+    defaultPageSize: NumberConstructor;
+    pageCount: NumberConstructor;
+    pagerCount: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 7;
+    };
+    currentPage: NumberConstructor;
+    defaultCurrentPage: NumberConstructor;
+    layout: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: string;
+    };
+    pageSizes: {
+        readonly type: PropType<number[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => [10, 20, 30, 40, 50, 100];
+    };
+    popperClass: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    prevText: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    prevIcon: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => any;
+    };
+    nextText: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    nextIcon: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => any;
+    };
+    teleported: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    small: BooleanConstructor;
+    size: {
+        readonly type: PropType<"" | "default" | "small" | "large">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    background: BooleanConstructor;
+    disabled: BooleanConstructor;
+    hideOnSinglePage: BooleanConstructor;
+    appendSizeTo: StringConstructor;
+};
+export type PaginationProps = ExtractPropTypes<typeof paginationProps>;
+/**
+ * 事件
+ */
+export declare const paginationEmits: {
+    /** 更新页码 */
+    'update:currentPage': (_currentPage: number) => boolean;
+    /** 更新每页数量 */
+    'update:pageSize': (_pageSize: number) => boolean;
+};

package/es/ele-pagination/props.js

@@ -0,0 +1,31 @@
+import { paginationProps as paginationProps$1 } from "element-plus";
+const paginationProps = {
+  ...paginationProps$1,
+  /** 总条目数 */
+  total: [String, Number],
+  /** 是否还有下一页 */
+  hasNext: {
+    type: Boolean,
+    default: true
+  },
+  /** 风格 */
+  type: {
+    type: String,
+    default: "circle"
+  },
+  /** 每页数量选择下拉是否使用固定定位 */
+  isFixedPopper: {
+    type: Boolean,
+    default: true
+  }
+};
+const paginationEmits = {
+  /** 更新页码 */
+  "update:currentPage": (_currentPage) => true,
+  /** 更新每页数量 */
+  "update:pageSize": (_pageSize) => true
+};
+export {
+  paginationEmits,
+  paginationProps
+};

package/es/ele-pagination/style/index.scss

@@ -0,0 +1,288 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-pagination-var($ele);
+
+.ele-pagination {
+  flex-wrap: wrap;
+  justify-content: center;
+
+  /* 圆角风格 */
+  &.is-circle {
+    /* 间距 */
+    & > * {
+      margin: eleVar('pagination', 'gap') !important;
+      margin-left: 0 !important;
+      margin-bottom: 0 !important;
+    }
+
+    & > .is-last {
+      margin-right: 0 !important;
+    }
+
+    /* 操作按钮 */
+    .btn-prev,
+    .btn-next,
+    .el-pager li {
+      height: eleVar('pagination', 'height');
+      line-height: eleVar('pagination', 'height');
+      min-width: eleVar('pagination', 'height');
+      padding: eleVar('pagination', 'padding');
+      border-radius: eleVar('pagination', 'radius');
+      color: eleVar('pagination', 'color');
+      font-size: eleVar('pagination', 'font-size');
+      background: eleVar('pagination', 'bg');
+      border: eleVar('pagination', 'border');
+      transition: (color $transition-base, background-color $transition-base);
+
+      &:hover {
+        color: eleVar('pagination', 'hover-color');
+        background: eleVar('pagination', 'hover-bg');
+        border: eleVar('pagination', 'hover-border');
+      }
+    }
+
+    .btn-prev:disabled,
+    .btn-next:disabled,
+    .el-pager li.is-disabled {
+      color: eleVar('pagination', 'disabled-color');
+      background: eleVar('pagination', 'disabled-bg');
+      border: eleVar('pagination', 'disabled-border');
+    }
+
+    .el-pager {
+      margin-left: eleVar('pagination', 'space') !important;
+      margin-right: eleVar('pagination', 'space') !important;
+
+      li {
+        margin: 0;
+
+        & + li {
+          margin-left: eleVar('pagination', 'space');
+        }
+
+        &.is-active {
+          color: eleVar('pagination', 'active-color');
+          background: eleVar('pagination', 'active-bg');
+          border: eleVar('pagination', 'active-border');
+          font-weight: eleVar('pagination', 'active-font-weight');
+
+          &.is-disabled {
+            color: eleVar('pagination', 'disabled-active-color');
+            background: eleVar('pagination', 'disabled-active-bg');
+            border: eleVar('pagination', 'disabled-active-border');
+          }
+        }
+      }
+    }
+
+    .btn-prev {
+      margin-right: 0 !important;
+    }
+
+    /* 图标 */
+    .btn-prev .el-icon,
+    .btn-next .el-icon {
+      font-size: initial;
+      transform: scale(1.02);
+    }
+
+    /* 输入框 */
+    .el-pagination__editor.el-input {
+      width: 50px;
+    }
+
+    .el-pagination__sizes {
+      .el-input,
+      .el-select {
+        width: 96px;
+
+        .el-select__caret {
+          margin-left: 0;
+        }
+      }
+
+      .el-input .el-input__wrapper,
+      .el-select .el-select__wrapper {
+        padding-left: 1px;
+        padding-right: 7px;
+      }
+
+      .el-select__selected-item {
+        text-align: center;
+      }
+    }
+
+    .el-input__inner,
+    .el-select__selected-item > span {
+      font-size: eleVar('pagination', 'sm-font-size');
+    }
+
+    /* 文本 */
+    .el-pagination__total,
+    .el-pagination__goto,
+    .el-pagination__classifier {
+      line-height: eleVar('pagination', 'height');
+    }
+
+    /* 小尺寸 */
+    &.el-pagination--small {
+      & > * {
+        margin: eleVar('pagination', 'sm-gap') !important;
+        margin-left: 0 !important;
+        margin-bottom: 0 !important;
+      }
+
+      & > .is-last {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        height: eleVar('pagination', 'sm-height');
+        line-height: eleVar('pagination', 'sm-height');
+        min-width: eleVar('pagination', 'sm-height');
+        padding: eleVar('pagination', 'sm-padding');
+        border-radius: eleVar('pagination', 'sm-radius');
+        font-size: eleVar('pagination', 'sm-font-size');
+      }
+
+      .el-pager {
+        margin-left: eleVar('pagination', 'sm-space') !important;
+        margin-right: eleVar('pagination', 'sm-space') !important;
+
+        li + li {
+          margin-left: eleVar('pagination', 'sm-space');
+        }
+      }
+
+      .btn-prev {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev .el-icon,
+      .btn-next .el-icon {
+        transform: scale(0.88);
+      }
+
+      .el-pagination__editor.el-input {
+        width: 44px;
+      }
+
+      .el-pagination__sizes {
+        .el-input,
+        .el-select {
+          width: 88px;
+
+          .el-select__caret {
+            font-size: 12px;
+          }
+        }
+
+        .el-input .el-input__wrapper,
+        .el-select .el-select__wrapper {
+          padding-right: 6px;
+        }
+      }
+
+      .el-input__inner,
+      .el-select__selected-item > span {
+        font-size: eleVar('pagination', 'sm-font-size');
+      }
+
+      .el-pagination__total,
+      .el-pagination__goto,
+      .el-pagination__classifier {
+        line-height: eleVar('pagination', 'sm-height');
+        font-size: eleVar('pagination', 'sm-font-size');
+      }
+    }
+
+    /* 大尺寸 */
+    &.el-pagination--large {
+      & > * {
+        margin: eleVar('pagination', 'lg-gap') !important;
+        margin-left: 0 !important;
+        margin-bottom: 0 !important;
+      }
+
+      & > .is-last {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev,
+      .btn-next,
+      .el-pager li {
+        height: eleVar('pagination', 'lg-height');
+        line-height: eleVar('pagination', 'lg-height');
+        min-width: eleVar('pagination', 'lg-height');
+        padding: eleVar('pagination', 'lg-padding');
+        border-radius: eleVar('pagination', 'lg-radius');
+        font-size: eleVar('pagination', 'lg-font-size');
+      }
+
+      .el-pager {
+        margin-left: eleVar('pagination', 'lg-space') !important;
+        margin-right: eleVar('pagination', 'lg-space') !important;
+
+        li + li {
+          margin-left: eleVar('pagination', 'lg-space');
+        }
+      }
+
+      .btn-prev {
+        margin-right: 0 !important;
+      }
+
+      .btn-prev .el-icon,
+      .btn-next .el-icon {
+        transform: scale(1.16);
+      }
+
+      .el-pagination__editor.el-input {
+        width: 56px;
+      }
+
+      .el-pagination__sizes {
+        .el-input,
+        .el-select {
+          width: 104px;
+        }
+
+        .el-input .el-input__wrapper,
+        .el-select .el-select__wrapper {
+          padding-right: 8px;
+        }
+      }
+
+      .el-input__inner,
+      .el-select__selected-item > span {
+        font-size: eleVar('pagination', 'lg-font-size');
+      }
+
+      .el-pagination__total,
+      .el-pagination__goto,
+      .el-pagination__classifier {
+        line-height: eleVar('pagination', 'lg-height');
+        font-size: eleVar('pagination', 'lg-font-size');
+      }
+    }
+  }
+
+  /* 无限页数 */
+  &.is-infinite {
+    .el-pager li:not(.is-active),
+    .el-pagination__total {
+      display: none;
+    }
+  }
+}
+
+/* 每页数量选择下拉框 */
+.ele-pagination-popper.el-popper {
+  &.is-fixed {
+    position: fixed !important;
+  }
+}