@aplus-frontend/ui 0.6.1 → 0.6.3

package/theme/antdv-override.less

@@ -0,0 +1,659 @@
+@import './mixins/config.less';
+
+@tw: ~'@{ns}-ap-table__table-wrapper';
+@sb: ~'@{ns}-scroll-bar';
+
+[data-aplus-ui-mode='aplus'] {
+  // Alert
+  .ant-alert {
+    .ant-alert-close-icon {
+      line-height: 18px;
+    }
+
+    .ant-alert-icon {
+      font-size: 16px;
+      margin-inline-end: @spacing;
+    }
+
+    .ant-alert-message {
+      color: #182948;
+      font-weight: normal !important;
+      font-size: @font-size-base;
+      line-height: @line-height-base;
+
+      .href {
+        color: #0070ff;
+        cursor: pointer;
+      }
+    }
+
+    &.ant-alert-with-description {
+      .ant-alert-message {
+        margin-bottom: @spacing-xs;
+        font-weight: bold !important;
+      }
+    }
+
+    .ant-alert-description {
+      color: #182948;
+    }
+
+    &.ant-alert-warning {
+      background: rgba(255, 169, 64, 0.1);
+      border: 1px solid rgba(255, 169, 64, 0.4);
+    }
+
+    &.ant-alert-info {
+      background: rgba(0, 112, 255, 0.1);
+      border: 1px solid rgba(0, 112, 255, 0.4);
+    }
+
+    &.ant-alert-success {
+      background: rgba(46, 209, 163, 0.1);
+      border: 1px solid rgba(46, 209, 163, 0.4);
+    }
+
+    &.ant-alert-error {
+      background: rgba(255, 77, 79, 0.1);
+      border: 1px solid rgba(255, 77, 79, 0.4);
+    }
+  }
+  // Button
+  .ant-btn {
+    box-shadow: none;
+
+    &.ant-btn-primary[disabled],
+    &.ant-btn-primary[disabled]:hover {
+      color: #ffffff;
+      background: #cce2ff;
+      border-color: #cce2ff;
+    }
+
+    &.ant-btn-dangerous.ant-btn-primary[disabled],
+    &.ant-btn-dangerous.ant-btn-primary[disabled]:hover {
+      color: #ffffff;
+      background: #ffdbdc;
+      border-color: #ffdbdc;
+    }
+
+    &.ant-btn-default[disabled],
+    &.ant-btn-default[disabled]:hover {
+      color: #abb7cc;
+      background: #f9f9fa;
+      border-color: #dee4ed;
+    }
+
+    &.ant-btn-link[disabled],
+    &.ant-btn-link[disabled]:hover,
+    &.ant-btn-text[disabled],
+    &.ant-btn-text[disabled]:hover {
+      color: #cce2ff;
+    }
+  }
+  // message
+  .ant-message {
+    div.ant-message-notice-content {
+      padding: 10px 16px;
+      font-size: 14px;
+      line-height: 22px;
+      box-shadow: 0 3px 6px 0 rgba(44, 54, 69, 0.102);
+    }
+
+    .ant-message-notice .anticon {
+      margin-bottom: 1px;
+      margin-inline-end: 9px;
+    }
+  }
+  // Modal
+  .ant-modal-root {
+    .ant-modal {
+      .ant-modal-close {
+        top: 14px;
+        inset-inline-end: 18px;
+        color: rgb(135, 150, 176);
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      .ant-modal-close-x {
+        line-height: 0;
+      }
+
+      .ant-modal-content {
+        padding: 0;
+
+        .ant-modal-header {
+          margin-bottom: 0;
+          padding: 12px 20px;
+          border-bottom: 1px solid#E9EDF3;
+        }
+
+        .ant-modal-body {
+          padding: 16px 20px;
+
+          &:has([class*='ap-modal-body-wrapper']) {
+            padding: 16px 0 !important;
+
+            [class*='ap-modal-body-wrapper'] {
+              padding: 0 20px;
+              overflow: hidden auto;
+            }
+          }
+        }
+
+        .ant-modal-footer {
+          margin-top: 0;
+          padding: 0 20px 12px;
+
+          button {
+            min-width: 72px;
+          }
+
+          .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+            margin-inline-start: 8px;
+          }
+        }
+      }
+    }
+
+    .ant-modal-confirm {
+      .ant-modal-content {
+        .ant-modal-body {
+          padding: 20px 24px;
+
+          .ant-modal-confirm-body {
+            // left icon
+            & > .anticon {
+              margin-inline-end: 10px;
+              font-size: 22px;
+            }
+
+            .ant-modal-confirm-title {
+              color: #182948;
+              font-weight: normal;
+            }
+
+            .ant-modal-confirm-content {
+              max-width: calc(100% - 40px);
+              color: #8896b0;
+              font-weight: normal;
+              line-height: 1.5;
+              margin-block-start: 4px;
+              margin-inline-start: 34px;
+
+              & > * {
+                color: #8896b0;
+              }
+            }
+          }
+
+          .ant-modal-confirm-btns {
+            margin-top: 0;
+            padding-top: 16px;
+
+            button {
+              min-width: 72px;
+            }
+
+            .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+              margin-inline-start: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-modal-confirm-success .ant-modal-confirm-body > .anticon {
+    color: #06c687;
+  }
+
+  .ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
+    color: #0070ff;
+  }
+
+  .ant-modal-confirm-warning .ant-modal-confirm-body > .anticon,
+  .ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon {
+    color: #ffa940;
+  }
+
+  .ant-modal-confirm-error .ant-modal-confirm-body > .anticon {
+    color: #ff4d4f;
+  }
+  // Table
+  [class*='-ap-table'].ap-table--sticky {
+    .@{tw},
+    .ant-table-wrapper {
+      &:has(ul.ant-pagination) {
+        padding-bottom: 0;
+      }
+
+      & .ant-spin-container,
+      &,
+      .ant-spin-container {
+        overflow: visible;
+
+        .ant-table {
+          overflow: visible;
+
+          .ant-table-container {
+            overflow: visible;
+
+            .ant-table-header {
+              position: sticky;
+              top: 0;
+              z-index: 90;
+              border-top: 4px solid #ffffff;
+            }
+          }
+        }
+        .@{sb} {
+          position: sticky;
+          bottom: -1px;
+          z-index: 90;
+        }
+
+        &:has(ul.ant-pagination) {
+          .@{sb} {
+            bottom: 44px;
+          }
+        }
+
+        ul.ant-pagination {
+          position: sticky;
+          bottom: 0;
+          z-index: 90;
+          margin: 0;
+          padding: 8px 0;
+          background-color: #ffffff;
+        }
+
+        &:has(.@{sb}) {
+          ul.ant-pagination {
+            padding-top: 4px;
+          }
+        }
+      }
+    }
+  }
+  // Field
+  .ant-checkbox:not(.ant-checkbox-checked) .ant-checkbox-inner {
+    border-color: #d3d7de;
+  }
+
+  .ant-radio:not(.ant-radio-checked) .ant-radio-inner {
+    border-color: #d3d7de;
+  }
+
+  .ant-input::placeholder {
+    color: #abb7cc;
+  }
+
+  .ant-select .ant-select-selection-placeholder {
+    color: #abb7cc;
+  }
+
+  .ant-picker .ant-picker-input > input::placeholder {
+    color: #abb7cc;
+  }
+
+  .ant-input-number .ant-input-number-input-wrap > input::placeholder {
+    color: #abb7cc;
+  }
+
+  input[disabled].ant-input {
+    color: var(--ap-text-color-1);
+  }
+
+  textarea[disabled].ant-input {
+    color: var(--ap-text-color-1);
+  }
+
+  .ant-picker.ant-picker-disabled .ant-picker-input > input[disabled] {
+    color: var(--ap-text-color-1);
+  }
+
+  .ant-select-disabled .ant-select-selection-item {
+    color: var(--ap-text-color-1) !important;
+  }
+
+  .ant-input-clear-icon {
+    line-height: 18px;
+  }
+  // Tooltip
+  .ant-tooltip div[role='tooltip'] {
+    padding-block: 6px;
+  }
+}
+
+[data-aplus-ui-mode='admin'] {
+  // Alert
+  .ant-alert {
+    .ant-alert-close-icon {
+      line-height: 18px;
+    }
+
+    .ant-alert-icon {
+      font-size: 16px;
+      margin-inline-end: @spacing;
+    }
+
+    .ant-alert-message {
+      color: #333333;
+      font-weight: normal !important;
+      font-size: @font-size-base;
+      line-height: @line-height-base;
+
+      .href {
+        color: #1890ff;
+        cursor: pointer;
+      }
+    }
+
+    &.ant-alert-with-description {
+      .ant-alert-message {
+        margin-bottom: @spacing-xs;
+        font-weight: bold !important;
+      }
+    }
+
+    &.ant-alert-warning {
+      background: rgba(250, 173, 20, 0.1);
+      border: 1px solid rgba(250, 173, 20, 0.4);
+    }
+
+    &.ant-alert-info {
+      background: rgba(24, 144, 255, 0.1);
+      border: 1px solid rgba(24, 144, 255, 0.4);
+    }
+
+    &.ant-alert-success {
+      background: rgba(52, 183, 124, 0.1);
+      border: 1px solid rgba(52, 183, 124, 0.4);
+    }
+
+    &.ant-alert-error {
+      background: rgba(255, 77, 79, 0.1);
+      border: 1px solid rgba(255, 77, 79, 0.4);
+    }
+  }
+  // Button
+  .ant-btn {
+    box-shadow: none;
+
+    &.ant-btn-primary[disabled],
+    &.ant-btn-primary[disabled]:hover {
+      color: #ffffff;
+      background: #d6f1e5;
+      border-color: #d6f1e5;
+    }
+
+    &.ant-btn-dangerous.ant-btn-primary[disabled],
+    &.ant-btn-dangerous.ant-btn-primary[disabled]:hover {
+      color: #ffffff !important;
+      background: #ffdbdc !important;
+      border-color: #ffdbdc !important;
+    }
+
+    &.ant-btn-default[disabled],
+    &.ant-btn-default[disabled]:hover {
+      color: #bfbfbf !important;
+      background: #fafafa !important;
+      border-color: #d9d9d9 !important;
+    }
+
+    &.ant-btn-link[disabled],
+    &.ant-btn-link[disabled]:hover,
+    &.ant-btn-text[disabled],
+    &.ant-btn-text[disabled]:hover {
+      color: rgba(24, 144, 255, 0.2) !important;
+    }
+  }
+  // message
+  .ant-message {
+    div.ant-message-notice-content {
+      padding: 10px 16px;
+      font-size: 14px;
+      line-height: 22px;
+      box-shadow: 0 3px 6px 0 rgba(44, 54, 69, 0.102);
+    }
+
+    .ant-message-notice .anticon {
+      margin-bottom: 1px;
+      margin-inline-end: 9px;
+    }
+  }
+  // Modal
+  .ant-modal-root {
+    .ant-modal {
+      .ant-modal-close {
+        top: 14px;
+        inset-inline-end: 18px;
+        color: #666666;
+
+        &:hover {
+          background-color: transparent;
+        }
+      }
+
+      .ant-modal-close-x {
+        line-height: 0;
+      }
+
+      .ant-modal-content {
+        padding: 0;
+
+        .ant-modal-header {
+          margin-bottom: 0;
+          padding: 12px 20px;
+          border-bottom: 1px solid#E9E9E9;
+        }
+
+        .ant-modal-body {
+          padding: 16px 20px;
+
+          & > .scrollbar {
+            padding: 0;
+          }
+
+          .scrollbar__wrap {
+            margin-bottom: 0 !important;
+          }
+
+          &:has([class*='ap-modal-body-wrapper']) {
+            padding: 16px 0 !important;
+
+            [class*='ap-modal-body-wrapper'] {
+              padding: 0 20px;
+              overflow: hidden auto;
+            }
+          }
+        }
+
+        .ant-modal-footer {
+          margin-top: 0;
+          padding: 0 20px 12px;
+          border-top: none;
+
+          button {
+            min-width: 72px;
+          }
+
+          .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+            margin-inline-start: 8px;
+          }
+        }
+      }
+    }
+
+    .ant-modal-confirm {
+      .ant-modal-content {
+        .ant-modal-body {
+          padding: 20px 24px;
+
+          .ant-modal-confirm-body {
+            & > .anticon {
+              margin-inline-end: 10px;
+              font-size: 22px;
+            }
+
+            .ant-modal-confirm-title {
+              color: #333333;
+              font-weight: normal;
+            }
+
+            .ant-modal-confirm-content {
+              max-width: calc(100% - 40px);
+              color: #999999;
+              font-weight: normal;
+              line-height: 200%;
+              margin-block-start: 4px;
+              margin-inline-start: 34px;
+
+              & > * {
+                color: #999999;
+              }
+            }
+          }
+
+          .ant-modal-confirm-btns {
+            margin-top: 0;
+            padding-top: 16px;
+
+            button {
+              min-width: 72px;
+            }
+
+            .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+              margin-inline-start: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .ant-modal-confirm-success .ant-modal-confirm-body > .anticon {
+    color: #06c687;
+  }
+
+  .ant-modal-confirm-info .ant-modal-confirm-body > .anticon {
+    color: #1890ff;
+  }
+
+  .ant-modal-confirm-warning .ant-modal-confirm-body > .anticon,
+  .ant-modal-confirm-confirm .ant-modal-confirm-body > .anticon {
+    color: #faad14;
+  }
+
+  .ant-modal-confirm-error .ant-modal-confirm-body > .anticon {
+    color: #ff4d4f;
+  }
+  // Table
+  [class*='-ap-table'].ap-table--sticky {
+    .@{tw},
+    .ant-table-wrapper {
+      &:has(ul.ant-pagination) {
+        padding-bottom: 0;
+      }
+
+      & .ant-spin-container,
+      &,
+      .ant-spin-container {
+        overflow: visible;
+
+        .ant-table {
+          overflow: visible;
+
+          .ant-table-container {
+            overflow: visible;
+
+            .ant-table-header {
+              position: sticky;
+              top: 0;
+              z-index: 90;
+              border-top: 4px solid #ffffff;
+            }
+          }
+        }
+
+        .@{sb} {
+          position: sticky;
+          bottom: -1px;
+          z-index: 90;
+        }
+
+        &:has(ul.ant-pagination) {
+          .@{sb} {
+            bottom: 44px;
+          }
+        }
+
+        ul.ant-pagination {
+          position: sticky;
+          bottom: 0;
+          z-index: 90;
+          margin: 0;
+          padding: 8px 0;
+          background-color: #ffffff;
+        }
+
+        &:has(.@{sb}) {
+          ul.ant-pagination {
+            padding-top: 4px;
+          }
+        }
+      }
+    }
+  }
+  // Tooltip
+  .ant-tooltip div[role='tooltip'] {
+    padding-block: 6px;
+  }
+  // Field
+  .ant-checkbox:not(.ant-checkbox-checked) .ant-checkbox-inner {
+    border-color: #d9d9d9;
+  }
+
+  .ant-radio:not(.ant-radio-checked) .ant-radio-inner {
+    border-color: #d9d9d9;
+  }
+
+  .ant-input::placeholder {
+    color: #bfbfbf;
+  }
+
+  .ant-select .ant-select-selection-placeholder {
+    color: #bfbfbf;
+  }
+
+  .ant-picker .ant-picker-input > input::placeholder {
+    color: #bfbfbf;
+  }
+
+  .ant-input-number .ant-input-number-input-wrap > input::placeholder {
+    color: #bfbfbf;
+  }
+
+  input[disabled].ant-input {
+    color: var(--ap-text-color-1);
+  }
+
+  textarea[disabled].ant-input {
+    color: var(--ap-text-color-1);
+  }
+
+  .ant-picker.ant-picker-disabled .ant-picker-input > input[disabled] {
+    color: var(--ap-text-color-1);
+  }
+
+  .ant-select-disabled .ant-select-selection-item {
+    color: var(--ap-text-color-1) !important;
+  }
+
+  .ant-input-clear-icon {
+    line-height: 18px;
+  }
+}

package/theme/ap-grid/index.css

@@ -586,6 +586,13 @@
   display: flex;
   align-items: center;
 }
+.aplus-ap-grid__table-loading-wrapper {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--vxe-ui-loading-background-color);
+}
 .aplus-ap-grid-pagination-count-text {
   color: var(--ap-text-color-2);
 }

package/theme/ap-grid/index.less

@@ -112,6 +112,13 @@
       align-items: center;
     }
   }
+  &__table-loading-wrapper {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--vxe-ui-loading-background-color);
+  }
   &-pagination-count-text {
     color: var(--ap-text-color-2);
   }