@aplus-frontend/ui 0.5.37 → 0.6.0-beta.1

package/theme/ap-form/search-form.less

@@ -1,9 +1,11 @@
 @import '../mixins/mixins.less';
+@import '../mixins/config.less';
 @import './ap-form-item.less';
+@import './search-form-sorter.less';
 
 .b(ap-form-search-form, {
   .ant-form-item {
-    margin-bottom: 16px;
+    margin-bottom: @spacing;
   }
   .ant-form-item-control {
     .ant-picker {
@@ -13,4 +15,58 @@
       width: 100%;
     }
   }
+  &__popover {
+    .ant-form-item {
+      margin-bottom: @spacing;
+    }
+    & .ant-popover-arrow {
+      display: none;
+    }
+
+    & .ant-popover-inner {
+      padding: 0;
+    }
+    &-content {
+      padding: @spacing-lg @spacing-xl @spacing-xl;
+      textarea {
+        padding: 0;
+      }
+    }
+    &-footer {
+      padding: @spacing-lg @spacing-xl;
+      &-confirm-btn {
+        margin-left: 10px;
+      }
+    }
+  }
+  &-column-setting-trigger-wrapper {
+    flex-shrink: 0;
+    .ant-btn:not(:only-child) {
+      &:first-child {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        &:hover {
+          z-index: 1;
+        }
+      }
+      &:last-child {
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        margin-left: -1px;
+        &:hover {
+          z-index: 1;
+        }
+      }
+    }
+    span.aplus-frontend-icon {
+      line-height: 0px;
+      vertical-align: -0.125em;
+    }
+  }
+  &-action-btn {
+    padding-inline: @spacing-lg;
+  }
+  &-action-btn-reset {
+    background-color: #E9EDF3;
+  }
 });

package/theme/ap-grid/editable.css

@@ -1,3 +1,31 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+}
+.clear-fix::before {
+  display: table;
+  content: '';
+}
+.clear-fix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.common-style {
+  box-sizing: border-box;
+  font-size: 12px;
+  font-family: inherit;
+}
+.common-style::before,
+.common-style::after {
+  box-sizing: border-box;
+}
 .aplus-editable-grid__header-cell--required {
   color: #FF4D4F;
   padding-right: 2px;
@@ -15,8 +43,8 @@
   flex: 1;
 }
 .aplus-editable-grid .ant-form-item {
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
 .aplus-editable-grid .vxe-cell:has(.is-editable) {
-  padding-block: 20px 0px !important;
+  padding-block: 16px 0px !important;
 }

package/theme/ap-grid/editable.less

@@ -20,9 +20,9 @@
     }
   }
   .ant-form-item {
-    margin-bottom: 20px;
+    margin-bottom: 16px;
   }
   .vxe-cell:has(.is-editable) {
-    padding-block: 20px 0px !important;
+    padding-block: 16px 0px !important;
   }
 });

package/theme/ap-grid/index.css

@@ -1,3 +1,31 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+}
+.clear-fix::before {
+  display: table;
+  content: '';
+}
+.clear-fix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.common-style {
+  box-sizing: border-box;
+  font-size: 12px;
+  font-family: inherit;
+}
+.common-style::before,
+.common-style::after {
+  box-sizing: border-box;
+}
 .aplus-ap-form-item-group .ant-form-item-control .ant-picker {
   display: flex;
 }
@@ -11,7 +39,7 @@
   box-sizing: border-box;
   border: 1px solid var(--ap-form-bordered-border-color-base, #DEE4ED);
   border-radius: 4px;
-  padding-inline: 12px;
+  padding-inline: 8px;
 }
 .aplus-ap-form-item--bordered .ant-input-affix-wrapper {
   padding: 0;
@@ -41,8 +69,11 @@
 .aplus-ap-form-item--bordered:has(.ant-select) {
   padding-right: 0px;
 }
+.aplus-ap-form-item--bordered:has(.ant-select) .ant-form-item-label > label {
+  padding-right: 4px;
+}
 .aplus-ap-form-item--bordered .ant-form-item-label > label {
-  padding-right: 16px;
+  padding-right: 12px;
   height: 30px;
 }
 .aplus-ap-form-item--bordered .ant-form-item-label > label::after {
@@ -66,9 +97,8 @@
   box-shadow: 0 0 0 2px var(--ap-form-bordered-shadow-color, rgba(5, 155, 255, 0.1));
 }
 .aplus-ap-form-item .ant-form-show-help .ant-form-item-explain-error {
-  font-size: 12px;
-  line-height: 18px;
-  margin-top: 2px;
+  font-size: 10px;
+  line-height: 1.6;
 }
 .aplus-ap-form-item .ant-col .ant-form-item-extra {
   line-height: 22px;
@@ -119,8 +149,100 @@
 .aplus-ap-form-modal-form .ant-modal-close {
   top: 16px;
 }
+.aplus-search-form-sorter-content {
+  width: 560px;
+}
+.aplus-search-form-sorter-header {
+  padding: 16px 16px 0px;
+}
+.aplus-search-form-sorter-header-title {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+  font-size: 14px;
+  font-weight: 700;
+  display: inline-block;
+  padding-bottom: 4px;
+}
+.aplus-search-form-sorter-header-desc {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+  color: #8896b0;
+}
+.aplus-search-form-sorter-header-action-wrapper {
+  padding: 8px;
+  margin: -8px;
+  cursor: pointer;
+}
+.aplus-search-form-sorter-header-reset-btn {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+  color: #0070ff;
+}
+.aplus-search-form-sorter-sorter-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-left: -4px;
+  margin-right: -4px;
+  row-gap: 8px;
+}
+.aplus-search-form-sorter-sorter-item {
+  flex: 0 0 33.333333%;
+  max-width: 33.333333%;
+  padding-inline: 4px;
+}
+.aplus-search-form-sorter-sorter-item > div {
+  border: 1px solid #E9EDF3;
+  border-radius: 4px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+}
+.aplus-search-form-sorter-sorter-item > div:hover {
+  border-color: var(--basic-color-primary, #0070ff);
+  cursor: pointer;
+}
+.aplus-search-form-sorter-sorter-item > div:hover .aplus-search-form-sorter-sorter-item-holder {
+  color: var(--basic-color-primary, #0070ff) !important;
+}
+.aplus-search-form-sorter-sorter-item--hidden {
+  display: none;
+}
+.aplus-search-form-sorter-sorter-item-text {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+  padding-left: 4px;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .aplus-ap-form-search-form .ant-form-item {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 .aplus-ap-form-search-form .ant-form-item-control .ant-picker {
   display: flex;
@@ -128,6 +250,55 @@
 .aplus-ap-form-search-form .ant-form-item-control .ant-input-number {
   width: 100%;
 }
+.aplus-ap-form-search-form__popover .ant-form-item {
+  margin-bottom: 8px;
+}
+.aplus-ap-form-search-form__popover .ant-popover-arrow {
+  display: none;
+}
+.aplus-ap-form-search-form__popover .ant-popover-inner {
+  padding: 0;
+}
+.aplus-ap-form-search-form__popover-content {
+  padding: 12px 16px 16px;
+}
+.aplus-ap-form-search-form__popover-content textarea {
+  padding: 0;
+}
+.aplus-ap-form-search-form__popover-footer {
+  padding: 12px 16px;
+}
+.aplus-ap-form-search-form__popover-footer-confirm-btn {
+  margin-left: 10px;
+}
+.aplus-ap-form-search-form-column-setting-trigger-wrapper {
+  flex-shrink: 0;
+}
+.aplus-ap-form-search-form-column-setting-trigger-wrapper .ant-btn:not(:only-child):first-child {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.aplus-ap-form-search-form-column-setting-trigger-wrapper .ant-btn:not(:only-child):first-child:hover {
+  z-index: 1;
+}
+.aplus-ap-form-search-form-column-setting-trigger-wrapper .ant-btn:not(:only-child):last-child {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  margin-left: -1px;
+}
+.aplus-ap-form-search-form-column-setting-trigger-wrapper .ant-btn:not(:only-child):last-child:hover {
+  z-index: 1;
+}
+.aplus-ap-form-search-form-column-setting-trigger-wrapper span.aplus-frontend-icon {
+  line-height: 0px;
+  vertical-align: -0.125em;
+}
+.aplus-ap-form-search-form-action-btn {
+  padding-inline: 12px;
+}
+.aplus-ap-form-search-form-action-btn-reset {
+  background-color: #E9EDF3;
+}
 .aplus-ap-form-item-text-group-compact .ant-select-focused {
   z-index: 1;
 }
@@ -185,7 +356,7 @@
 }
 .aplus-field-checkbox--vertical label.ant-checkbox-wrapper:not(:last-child) {
   display: flex;
-  margin-block-end: 16px;
+  margin-block-end: 12px;
 }
 .aplus-field-number-label-left {
   padding-right: 4px;
@@ -195,7 +366,7 @@
 }
 .aplus-field-radio--vertical label.ant-radio-wrapper:not(:last-child) {
   display: flex;
-  margin-block-end: 16px;
+  margin-block-end: 12px;
 }
 .aplus-field-text-area {
   white-space: pre-wrap;
@@ -203,9 +374,15 @@
   word-break: break-all;
 }
 .aplus-action-item {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
   display: inline-block;
-  font-size: 14px;
-  line-height: 22px;
   cursor: pointer;
 }
 .aplus-action-item--primary {
@@ -245,8 +422,8 @@
 }
 .aplus-action-item-dropdown__icon {
   color: #0070ff;
-  margin-left: 4px;
-  font-size: 14px;
+  margin-left: 2px;
+  font-size: 12px;
   display: inline-flex;
 }
 .aplus-ap-grid-adaptive {
@@ -259,18 +436,17 @@
   flex: 1;
 }
 .aplus-ap-grid .aplus-ap-grid-pagination-wrapper ul.ant-pagination {
-  margin: 16px 0px 0px;
+  margin-block: 12px;
 }
 .aplus-ap-grid-sticky .aplus-ap-grid-pagination-wrapper {
   background-color: #fff;
   z-index: 10;
   position: sticky;
   bottom: 0;
-  padding-bottom: 16px;
 }
 .aplus-ap-grid-sticky:has(.aplus-scroll-bar) .aplus-ap-grid-pagination-wrapper ul.ant-pagination {
   margin-top: 0;
-  padding-top: 8px;
+  padding-top: 4px;
 }
 .aplus-ap-grid-sticky:has(.aplus-scroll-bar) .vxe-table--scroll-x-wrapper {
   opacity: 0;
@@ -279,9 +455,13 @@
   height: 0px !important;
 }
 .aplus-ap-grid-wrapper {
-  padding: 16px;
+  padding: 8px;
+  padding-bottom: 12px;
   background-color: #fff;
 }
+.aplus-ap-grid-wrapper:has(ul.ant-pagination) {
+  padding-bottom: 0;
+}
 .aplus-ap-grid-wrapper.aplus-ap-grid-sticky {
   padding-bottom: 0;
 }
@@ -289,9 +469,10 @@
   padding-bottom: 0;
 }
 .aplus-ap-grid__search-wrapper {
-  padding: 16px;
-  padding-bottom: 0;
+  padding: 8px;
+  padding-bottom: 2px;
   background-color: #fff;
+  border-radius: 4px;
   margin-bottom: 10px;
 }
 .aplus-ap-grid__table-wrapper {
@@ -303,11 +484,16 @@
   flex-direction: column;
 }
 .aplus-ap-grid__table-wrapper-card {
-  padding: 12px 16px 16px;
+  padding: 8px;
+  padding-bottom: 12px;
+  border-radius: 4px;
   background-color: #fff;
 }
+.aplus-ap-grid__table-wrapper-card:has(ul.ant-pagination) {
+  padding-bottom: 0;
+}
 .aplus-ap-grid-pagination {
-  margin-top: 16px;
+  margin-block: 12px;
   display: flex;
   flex-wrap: wrap;
   row-gap: 8px;

package/theme/ap-grid/index.less

@@ -21,7 +21,7 @@
   }
   .@{pg} {
     ul.ant-pagination {
-      margin: 16px 0px 0px;
+      margin-block: @spacing-lg;
     }
   }
   &-sticky {
@@ -30,13 +30,12 @@
       z-index: 10;
       position: sticky;
       bottom: 0;
-      padding-bottom: 16px;
     }
     &:has(.@{sb}) {
       .@{pg} {
         ul.ant-pagination {
           margin-top: 0;
-          padding-top: 8px;
+          padding-top: 4px;
         }
       }
       .vxe-table--scroll-x-wrapper {
@@ -48,7 +47,11 @@
     }
   }
   &-wrapper {
-    padding: 16px;
+    padding: @spacing;
+    padding-bottom: @spacing-lg;
+    &:has(ul.ant-pagination) {
+      padding-bottom: 0;
+    }
     background-color: #fff;
   }
   &-wrapper&-sticky {
@@ -58,9 +61,10 @@
     padding-bottom: 0;
   }
   &__search-wrapper {
-    padding:16px;
-    padding-bottom: 0;
+    padding:8px;
+    padding-bottom: 2px;
     background-color: #fff;
+    border-radius: @border-radius;
     margin-bottom: 10px;
   }
   &__table-wrapper {
@@ -72,11 +76,16 @@
     flex-direction: column;
   }
   &__table-wrapper-card {
-    padding: 12px 16px 16px;
+    padding: @spacing;
+    padding-bottom: @spacing-lg;
+    &:has(ul.ant-pagination) {
+      padding-bottom: 0;
+    }
+    border-radius: @border-radius;
     background-color: #fff;
   }
   &-pagination {
-    margin-top: 16px;
+    margin-block: @spacing-lg;
     display: flex;
     flex-wrap: wrap;
     row-gap: 8px;

package/theme/ap-group-search/ap-extension-select.css

@@ -1,3 +1,31 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+}
+.clear-fix::before {
+  display: table;
+  content: '';
+}
+.clear-fix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.common-style {
+  box-sizing: border-box;
+  font-size: 12px;
+  font-family: inherit;
+}
+.common-style::before,
+.common-style::after {
+  box-sizing: border-box;
+}
 .aplus-ap-extension-select.ant-select .ant-select-selection-placeholder {
   inset-inline-end: 25px !important;
 }

package/theme/ap-group-search/ap-group-search.css

@@ -1,3 +1,31 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+}
+.clear-fix::before {
+  display: table;
+  content: '';
+}
+.clear-fix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.common-style {
+  box-sizing: border-box;
+  font-size: 12px;
+  font-family: inherit;
+}
+.common-style::before,
+.common-style::after {
+  box-sizing: border-box;
+}
 .aplus-ap-group-search__search > .ant-select-selector {
   padding: 0px 10px 0 0 !important;
 }

package/theme/ap-group-search/ap-popover-select.css

@@ -1,3 +1,31 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+}
+.clear-fix::before {
+  display: table;
+  content: '';
+}
+.clear-fix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.common-style {
+  box-sizing: border-box;
+  font-size: 12px;
+  font-family: inherit;
+}
+.common-style::before,
+.common-style::after {
+  box-sizing: border-box;
+}
 .aplus-ap-popover-select__popover {
   width: 100%;
   left: 0 !important;

package/theme/ap-image/ap-image.css

@@ -1,3 +1,31 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+}
+.clear-fix::before {
+  display: table;
+  content: '';
+}
+.clear-fix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.common-style {
+  box-sizing: border-box;
+  font-size: 12px;
+  font-family: inherit;
+}
+.common-style::before,
+.common-style::after {
+  box-sizing: border-box;
+}
 .aplus-ap-image-toolbar {
   display: flex;
   align-items: center;

package/theme/ap-input-radio/ap-input-radio.css

@@ -1,3 +1,31 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+}
+.clear-fix::before {
+  display: table;
+  content: '';
+}
+.clear-fix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.common-style {
+  box-sizing: border-box;
+  font-size: 12px;
+  font-family: inherit;
+}
+.common-style::before,
+.common-style::after {
+  box-sizing: border-box;
+}
 .aplus-ap-input-radio {
   display: flex;
   align-items: center;

package/theme/ap-label/ap-label.css

@@ -1,3 +1,31 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0 0 0 / 85%);
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.5;
+  list-style: none;
+}
+.clear-fix::before {
+  display: table;
+  content: '';
+}
+.clear-fix::after {
+  display: table;
+  clear: both;
+  content: '';
+}
+.common-style {
+  box-sizing: border-box;
+  font-size: 12px;
+  font-family: inherit;
+}
+.common-style::before,
+.common-style::after {
+  box-sizing: border-box;
+}
 .aplus-ap-label {
   display: flex;
   flex-direction: column;