@julingbase/jly-arco-design 0.0.1

package/lib/pagination/style/css.js

@@ -0,0 +1,13 @@
+"use strict";
+require("../../style/index.css");
+require("../../input/style/index.css");
+require("../../_components/input-label/style/index.css");
+require("../../tag/style/index.css");
+require("../../input-tag/style/index.css");
+require("../../_components/select-view/style/index.css");
+require("../../trigger/style/index.css");
+require("../../empty/style/index.css");
+require("../../checkbox/style/index.css");
+require("../../scrollbar/style/index.css");
+require("../../select/style/index.css");
+require("./index.css");

package/lib/pagination/style/index.css

@@ -0,0 +1,274 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.arco-pagination {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  /*** 快速跳转 ***/
+}
+.arco-pagination-list {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+  list-style: none;
+}
+.arco-pagination-item {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 0 8px;
+  color: var(--color-text-2);
+  text-align: center;
+  vertical-align: middle;
+  list-style: none;
+  background-color: transparent;
+  border: 0 solid transparent;
+  border-radius: var(--border-radius-small);
+  outline: 0;
+  cursor: pointer;
+  user-select: none;
+  min-width: 32px;
+  height: 32px;
+  font-size: 14px;
+  line-height: 32px;
+}
+.arco-pagination-item-previous,
+.arco-pagination-item-next {
+  font-size: 12px;
+}
+.arco-pagination-item:hover {
+  color: var(--color-text-2);
+  background-color: var(--color-fill-1);
+  border-color: transparent;
+}
+.arco-pagination-item-active,
+.arco-pagination-item-active:hover {
+  color: rgb(var(--primary-6));
+  background-color: var(--color-primary-light-1);
+  border-color: transparent;
+  transition: color 0.2s cubic-bezier(0, 0, 1, 1), background-color 0.2s cubic-bezier(0, 0, 1, 1);
+}
+.arco-pagination-item-disabled,
+.arco-pagination-item-disabled:hover {
+  color: var(--color-text-4);
+  background-color: transparent;
+  border-color: transparent;
+  cursor: not-allowed;
+}
+.arco-pagination-item:not(:last-child) {
+  margin-right: 8px;
+}
+.arco-pagination-item-previous,
+.arco-pagination-item-next {
+  color: var(--color-text-2);
+  font-size: 12px;
+  background-color: transparent;
+}
+.arco-pagination-item-previous:not(.arco-pagination-item-disabled):hover,
+.arco-pagination-item-next:not(.arco-pagination-item-disabled):hover {
+  color: rgb(var(--primary-6));
+  background-color: var(--color-fill-1);
+}
+.arco-pagination-item-previous::after,
+.arco-pagination-item-next::after {
+  display: inline-block;
+  font-size: 0;
+  vertical-align: middle;
+  content: '.';
+}
+.arco-pagination .arco-pagination-item-previous.arco-pagination-item-disabled,
+.arco-pagination .arco-pagination-item-next.arco-pagination-item-disabled {
+  color: var(--color-text-4);
+  background-color: transparent;
+}
+.arco-pagination-item-jumper {
+  font-size: 16px;
+}
+.arco-pagination-jumper {
+  display: flex;
+  align-items: center;
+  margin-left: 8px;
+}
+.arco-pagination-jumper > span {
+  font-size: 14px;
+}
+.arco-pagination-jumper-text-goto,
+.arco-pagination-jumper-prepend,
+.arco-pagination-jumper-append {
+  color: var(--color-text-3);
+  white-space: nowrap;
+}
+.arco-pagination-jumper-prepend {
+  margin-right: 8px;
+}
+.arco-pagination-jumper-append {
+  margin-left: 8px;
+}
+.arco-pagination-jumper .arco-pagination-jumper-input {
+  width: 40px;
+  padding-right: 2px;
+  padding-left: 2px;
+}
+.arco-pagination-jumper .arco-pagination-jumper-input input {
+  text-align: center;
+}
+.arco-pagination-options {
+  position: relative;
+  display: inline-block;
+  flex: 0 0 auto;
+  min-width: 0;
+  margin-left: 8px;
+  text-align: center;
+  vertical-align: middle;
+}
+.arco-pagination-options .arco-select {
+  width: auto;
+}
+.arco-pagination-options .arco-select-view-value {
+  padding-right: 6px;
+  overflow: inherit;
+}
+.arco-pagination-total {
+  display: inline-block;
+  height: 100%;
+  margin-right: 8px;
+  color: var(--color-text-1);
+  font-size: 14px;
+  line-height: 32px;
+  white-space: nowrap;
+}
+.arco-pagination-jumper {
+  flex: 0 0 auto;
+}
+.arco-pagination-jumper-separator {
+  padding: 0 12px 0 12px;
+}
+.arco-pagination-jumper-total-page {
+  margin-right: 8px;
+}
+.arco-pagination-simple {
+  display: flex;
+  align-items: center;
+}
+.arco-pagination-simple .arco-pagination-item {
+  margin-right: 0;
+}
+.arco-pagination-simple .arco-pagination-jumper {
+  margin: 0 4px;
+  color: var(--color-text-1);
+}
+.arco-pagination-simple .arco-pagination-jumper .arco-pagination-jumper-input {
+  width: 40px;
+  margin-left: 0;
+}
+.arco-pagination-simple .arco-pagination-item-previous,
+.arco-pagination-simple .arco-pagination-item-next {
+  color: var(--color-text-2);
+  background-color: transparent;
+}
+.arco-pagination-simple .arco-pagination-item-previous:not(.arco-pagination-item-disabled):hover,
+.arco-pagination-simple .arco-pagination-item-next:not(.arco-pagination-item-disabled):hover {
+  color: rgb(var(--primary-6));
+  background-color: var(--color-fill-1);
+}
+.arco-pagination-simple .arco-pagination-item-previous.arco-pagination-item-disabled,
+.arco-pagination-simple .arco-pagination-item-next.arco-pagination-item-disabled {
+  color: var(--color-text-4);
+  background-color: transparent;
+}
+.arco-pagination-disabled {
+  cursor: not-allowed;
+}
+.arco-pagination-disabled .arco-pagination-item,
+.arco-pagination-disabled .arco-pagination-item:not(.arco-pagination-item-disabled):not(.arco-pagination-item-active):hover {
+  color: var(--color-text-4);
+  background-color: transparent;
+  border-color: transparent;
+  cursor: not-allowed;
+}
+.arco-pagination.arco-pagination-disabled .arco-pagination-item-active {
+  color: var(--color-primary-light-3);
+  background-color: var(--color-fill-1);
+  border-color: transparent;
+}
+.arco-pagination-size-mini .arco-pagination-item {
+  min-width: 24px;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+}
+.arco-pagination-size-mini .arco-pagination-item-previous,
+.arco-pagination-size-mini .arco-pagination-item-next {
+  font-size: 12px;
+}
+.arco-pagination-size-mini .arco-pagination-total {
+  font-size: 12px;
+  line-height: 24px;
+}
+.arco-pagination-size-mini .arco-pagination-option {
+  height: 24px;
+  font-size: 12px;
+  line-height: 0;
+}
+.arco-pagination-size-mini .arco-pagination-jumper > span {
+  font-size: 12px;
+}
+.arco-pagination-size-small .arco-pagination-item {
+  min-width: 28px;
+  height: 28px;
+  font-size: 14px;
+  line-height: 28px;
+}
+.arco-pagination-size-small .arco-pagination-item-previous,
+.arco-pagination-size-small .arco-pagination-item-next {
+  font-size: 12px;
+}
+.arco-pagination-size-small .arco-pagination-total {
+  font-size: 14px;
+  line-height: 28px;
+}
+.arco-pagination-size-small .arco-pagination-option {
+  height: 28px;
+  font-size: 14px;
+  line-height: 0;
+}
+.arco-pagination-size-small .arco-pagination-jumper > span {
+  font-size: 14px;
+}
+.arco-pagination-size-large .arco-pagination-item {
+  min-width: 36px;
+  height: 36px;
+  font-size: 14px;
+  line-height: 36px;
+}
+.arco-pagination-size-large .arco-pagination-item-previous,
+.arco-pagination-size-large .arco-pagination-item-next {
+  font-size: 14px;
+}
+.arco-pagination-size-large .arco-pagination-total {
+  font-size: 14px;
+  line-height: 36px;
+}
+.arco-pagination-size-large .arco-pagination-option {
+  height: 36px;
+  font-size: 14px;
+  line-height: 0;
+}
+.arco-pagination-size-large .arco-pagination-jumper > span {
+  font-size: 14px;
+}

package/lib/pagination/style/index.js

@@ -0,0 +1,13 @@
+"use strict";
+require("../../style/index.less");
+require("../../input/style/index.less");
+require("../../_components/input-label/style/index.less");
+require("../../tag/style/index.less");
+require("../../input-tag/style/index.less");
+require("../../_components/select-view/style/index.less");
+require("../../trigger/style/index.less");
+require("../../empty/style/index.less");
+require("../../checkbox/style/index.less");
+require("../../scrollbar/style/index.less");
+require("../../select/style/index.less");
+require("./index.less");

package/lib/pagination/style/index.less

@@ -0,0 +1,300 @@
+@import './token.less';
+
+.page-item(@size) {
+  min-width: ~'@{pagination-size-@{size}}';
+  height: ~'@{pagination-size-@{size}}';
+  font-size: ~'@{pagination-size-@{size}-font-size}';
+  line-height: ~'@{pagination-size-@{size}}';
+
+  &-previous,
+  &-next {
+    font-size: ~'@{pagination-size-icon-arrow_@{size}}';
+  }
+}
+
+.option(@size) {
+  height: ~'@{pagination-size-@{size}}';
+  font-size: ~'@{pagination-size-@{size}-font-size}';
+  line-height: 0;
+}
+
+.total(@size) {
+  font-size: ~'@{pagination-size-@{size}-font-size}';
+  line-height: ~'@{pagination-size-@{size}}';
+}
+
+.@{pagination-prefix-cls} {
+  display: flex;
+  align-items: center;
+  font-size: @pagination-size-default-font-size;
+
+  &-list {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    list-style: none;
+  }
+
+  &-item {
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0 @pagination-padding-horizontal;
+    color: @pagination-color-item-text;
+    text-align: center;
+    vertical-align: middle;
+    list-style: none;
+    background-color: @pagination-color-bg-item;
+    border: @pagination-border-width solid @pagination-color-item-border;
+    border-radius: @pagination-item-border-radius;
+    outline: 0;
+    cursor: pointer;
+    user-select: none;
+
+    .page-item(default);
+
+    &:hover {
+      color: @pagination-color-item-text_hover;
+      background-color: @pagination-color-bg-item_hover;
+      border-color: @pagination-color-item-border_hover;
+    }
+
+    &-active,
+    &-active:hover {
+      color: @pagination-color-item-text_active;
+      background-color: @pagination-color-bg-item_active;
+      border-color: @pagination-color-item-border_active;
+      transition: color @transition-duration-2
+          @transition-timing-function-linear,
+        background-color @transition-duration-2
+          @transition-timing-function-linear;
+    }
+
+    &-disabled,
+    &-disabled:hover {
+      color: @pagination-color-item-text_disabled;
+      background-color: @pagination-color-bg-item_disabled;
+      border-color: @pagination-color-item-border_disabled;
+      cursor: not-allowed;
+    }
+
+    &:not(:last-child) {
+      margin-right: @pagination-item-spacing;
+    }
+  }
+
+  &-item-previous,
+  &-item-next {
+    color: @pagination-color-icon-arrow;
+    font-size: @pagination-size-icon-arrow_default;
+    background-color: @pagination-color-icon-arrow-bg;
+
+    &:not(.@{pagination-prefix-cls}-item-disabled):hover {
+      color: @pagination-color-icon-arrow-text_hover;
+      background-color: @pagination-color-icon-arrow-bg_hover;
+    }
+
+    // 解决少数情况下出现的图标不垂直水平剧中的 bug
+    &::after {
+      display: inline-block;
+      font-size: 0;
+      vertical-align: middle;
+      content: '.';
+    }
+  }
+
+  & &-item-previous&-item-disabled,
+  & &-item-next&-item-disabled {
+    color: @pagination-color-icon-arrow-text_disabled;
+    background-color: @pagination-color-icon-arrow-bg_disabled;
+  }
+
+  &-item-jumper {
+    font-size: @pagination-size-icon-ellipsis;
+  }
+
+  /*** 快速跳转 ***/
+  &-jumper {
+    display: flex;
+    align-items: center;
+    margin-left: @pagination-margin-jumper-left;
+
+    > span {
+      font-size: @pagination-size-default-font-size;
+    }
+
+    &-text-goto,
+    &-prepend,
+    &-append {
+      color: @pagination-color-jumper-goto;
+      white-space: nowrap;
+    }
+
+    &-prepend {
+      margin-right: @pagination-item-spacing;
+    }
+
+    &-append {
+      margin-left: @pagination-item-spacing;
+    }
+
+    & &-input {
+      width: @patination-jumper-input-width;
+      padding-right: 2px;
+      padding-left: 2px;
+
+      input {
+        text-align: center;
+      }
+    }
+  }
+
+  &-options {
+    position: relative;
+    display: inline-block;
+    flex: 0 0 auto;
+    min-width: 0;
+    margin-left: @pagination-margin-option-left;
+    text-align: center;
+    vertical-align: middle;
+
+    .@{prefix}-select {
+      width: auto;
+
+      &-view-value {
+        padding-right: 6px;
+        overflow: inherit;
+      }
+    }
+  }
+
+  &-total {
+    display: inline-block;
+    height: 100%;
+    margin-right: @pagination-margin-total-spacing;
+    color: @pagination-color-text-total;
+    font-size: @pagination-size-default-font-size;
+    .total(default);
+
+    white-space: nowrap;
+  }
+
+  // simple
+  &-jumper {
+    flex: 0 0 auto;
+
+    &-separator {
+      padding: 0 @pagination-simple-margin-separator-right 0
+        @pagination-simple-margin-separator-left;
+    }
+
+    &-total-page {
+      margin-right: @pagination-simple-margin-next-left -
+        @pagination-simple-margin-prev-right;
+    }
+  }
+
+  &-simple {
+    display: flex;
+    align-items: center;
+  }
+
+  &-simple &-item {
+    margin-right: 0;
+  }
+
+  &-simple &-jumper {
+    margin: 0 @pagination-simple-margin-prev-right;
+    color: var(~'@{arco-cssvars-prefix}-color-text-1');
+  }
+
+  &-simple &-jumper &-jumper-input {
+    width: @pagination-simple-input-width;
+    margin-left: 0;
+  }
+
+  &-simple &-item-previous,
+  &-simple &-item-next {
+    color: @pagination-simple-color-icon-arrow;
+    background-color: @pagination-simple-color-icon-arrow-bg;
+
+    &:not(.@{pagination-prefix-cls}-item-disabled):hover {
+      color: @pagination-simple-color-icon-arrow-text_hover;
+      background-color: @pagination-simple-color-icon-arrow-bg_hover;
+    }
+  }
+
+  &-simple &-item-previous&-item-disabled,
+  &-simple &-item-next&-item-disabled {
+    color: @pagination-simple-color-icon-arrow-text_disabled;
+    background-color: @pagination-simple-color-icon-arrow-bg_disabled;
+  }
+
+  // Disabled
+  &-disabled {
+    cursor: not-allowed;
+  }
+
+  &-disabled &-item,
+  &-disabled &-item:not(&-item-disabled):not(&-item-active):hover {
+    color: @pagination-color-item-text_disabled;
+    background-color: @pagination-color-bg-item_disabled;
+    border-color: @pagination-color-item-border_disabled;
+    cursor: not-allowed;
+  }
+
+  &&-disabled &-item-active {
+    color: @pagination-color-item-text_active_disabled;
+    background-color: @pagination-color-bg-item_active_disabled;
+    border-color: @pagination-color-item-border_active_disabled;
+  }
+
+  // size
+  &-size-mini &-item {
+    .page-item(mini);
+  }
+
+  &-size-mini &-total {
+    .total(mini);
+  }
+
+  &-size-mini &-option {
+    .option(mini);
+  }
+
+  &-size-mini &-jumper > span {
+    font-size: @pagination-size-mini-font-size;
+  }
+
+  &-size-small &-item {
+    .page-item(small);
+  }
+
+  &-size-small &-total {
+    .total(small);
+  }
+
+  &-size-small &-option {
+    .option(small);
+  }
+
+  &-size-small &-jumper > span {
+    font-size: @pagination-size-small-font-size;
+  }
+
+  &-size-large &-item {
+    .page-item(large);
+  }
+
+  &-size-large &-total {
+    .total(large);
+  }
+
+  &-size-large &-option {
+    .option(large);
+  }
+
+  &-size-large &-jumper > span {
+    font-size: @pagination-size-large-font-size;
+  }
+}

package/lib/pagination/style/token.less

@@ -0,0 +1,91 @@
+@import '../../style/theme/index.less';
+
+@pagination-prefix-cls: ~'@{prefix}-pagination';
+
+@pagination-item-border-radius: @radius-small;
+@pagination-item-spacing: @spacing-4;
+@pagination-margin-total-spacing: @spacing-4;
+@pagination-margin-option-left: @spacing-4;
+@pagination-margin-jumper-left: @spacing-4;
+
+@pagination-size-mini: @size-mini;
+@pagination-size-small: @size-small;
+@pagination-size-default: @size-default;
+@pagination-size-large: @size-large;
+@pagination-padding-horizontal: 8px;
+
+@pagination-size-mini-font-size: @font-size-body-1;
+@pagination-size-small-font-size: @font-size-body-3;
+@pagination-size-default-font-size: @font-size-body-3;
+@pagination-size-large-font-size: @font-size-body-3;
+
+@pagination-size-icon-arrow_mini: @size-3;
+@pagination-size-icon-arrow_small: @size-3;
+@pagination-size-icon-arrow_default: @size-3;
+@pagination-size-icon-arrow_large: 14px;
+
+@pagination-size-icon-ellipsis: @size-4;
+
+@pagination-border-width: @border-none;
+@pagination-color-bg-item: @color-transparent;
+@pagination-color-bg-item_active: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-1'
+);
+@pagination-color-bg-item_hover: var(~'@{arco-cssvars-prefix}-color-fill-1');
+@pagination-color-bg-item_disabled: @color-transparent;
+@pagination-color-bg-item_active_disabled: var(
+  ~'@{arco-cssvars-prefix}-color-fill-1'
+);
+
+@pagination-color-item-text: var(~'@{arco-cssvars-prefix}-color-text-2');
+@pagination-color-item-text_hover: var(~'@{arco-cssvars-prefix}-color-text-2');
+@pagination-color-item-text_active: @color-primary-6;
+@pagination-color-item-text_disabled: var(
+  ~'@{arco-cssvars-prefix}-color-text-4'
+);
+@pagination-color-item-text_active_disabled: var(
+  ~'@{arco-cssvars-prefix}-color-primary-light-3'
+);
+
+@pagination-color-item-border: @color-transparent;
+@pagination-color-item-border_active: @color-transparent;
+@pagination-color-item-border_hover: @color-transparent;
+@pagination-color-item-border_disabled: @color-transparent;
+@pagination-color-item-border_active_disabled: @color-transparent;
+
+@pagination-color-icon-arrow: var(~'@{arco-cssvars-prefix}-color-text-2');
+@pagination-color-icon-arrow-bg: @color-transparent;
+@pagination-color-icon-arrow-bg_hover: var(
+  ~'@{arco-cssvars-prefix}-color-fill-1'
+);
+@pagination-color-icon-arrow-bg_disabled: @color-transparent;
+@pagination-color-icon-arrow-text_hover: @color-primary-6;
+@pagination-color-icon-arrow-text_disabled: var(
+  ~'@{arco-cssvars-prefix}-color-text-4'
+);
+
+// Simple
+@pagination-simple-input-width: @size-10;
+@pagination-simple-color-icon-arrow: var(
+  ~'@{arco-cssvars-prefix}-color-text-2'
+);
+@pagination-simple-color-icon-arrow-bg: @color-transparent;
+@pagination-simple-color-icon-arrow-bg_hover: var(
+  ~'@{arco-cssvars-prefix}-color-fill-1'
+);
+@pagination-simple-color-icon-arrow-bg_disabled: @color-transparent;
+@pagination-simple-color-icon-arrow-text_hover: @color-primary-6;
+@pagination-simple-color-icon-arrow-text_disabled: var(
+  ~'@{arco-cssvars-prefix}-color-text-4'
+);
+
+@pagination-simple-margin-prev-right: @spacing-2;
+@pagination-simple-margin-next-left: @spacing-6;
+@pagination-simple-margin-separator-left: @spacing-6;
+@pagination-simple-margin-separator-right: @spacing-6;
+// jumper
+@patination-jumper-input-width: @size-10;
+@pagination-color-jumper-goto: var(~'@{arco-cssvars-prefix}-color-text-3');
+
+// total text
+@pagination-color-text-total: var(~'@{arco-cssvars-prefix}-color-text-1');

package/lib/pagination/utils.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const getLegalPage = (page, { min, max }) => {
+  if (page < min) {
+    return min;
+  }
+  if (page > max) {
+    return max;
+  }
+  return page;
+};
+exports.getLegalPage = getLegalPage;