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

package/theme/ap-view/ap-view.css

@@ -0,0 +1,149 @@
+.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-view > .ant-btn {
+  padding: 0;
+}
+.aplus-ap-view > .ant-dropdown-trigger {
+  color: var(--ap-view-icon-color, #8896b0);
+}
+.aplus-ap-view-main-content {
+  padding: 4px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.aplus-ap-view-main-content-disabled {
+  color: var(--ap-view-message-color, #abb7cc);
+  cursor: not-allowed;
+}
+.ant-btn-default:has(.aplus-ap-view-main-content-disabled) {
+  border-color: var(--ap-view-border-color, #DEE4ED) !important;
+}
+.aplus-ap-view-icon {
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.aplus-ap-view-main-content-popover {
+  width: 340px;
+}
+.aplus-ap-view-main-content-popover-title-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.aplus-ap-view-main-content-popover-title-content-title {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+}
+.aplus-ap-view-main-content-popover-title-content .ant-form-item {
+  margin-bottom: 0;
+}
+.aplus-ap-view-main-content-popover-btn {
+  margin-bottom: 0;
+}
+.aplus-ap-view-main-content-popover-btn .ant-form-item-control-input-content {
+  display: flex;
+  justify-content: flex-end;
+}
+.aplus-ap-view-menu-list-content {
+  width: 250px;
+  display: flex;
+  padding: 6px 8px;
+  align-items: center;
+  height: 32px;
+}
+.aplus-ap-view-menu-list-content .menu-list-content-name {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  margin-right: 8px;
+}
+.aplus-ap-view-menu-list-content .menu-list-content-default {
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+.aplus-ap-view-menu-list-content .menu-list-content-action {
+  cursor: default;
+  display: none;
+  flex-shrink: 0;
+  margin-left: auto;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.aplus-ap-view-menu-list-content .menu-list-content-action-text {
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--basic-color-primary, #0070ff);
+}
+.aplus-ap-view-menu-list-content .menu-list-content-action-delete {
+  cursor: pointer;
+  color: var(--ap-view-icon-color, #8896b0);
+}
+.aplus-ap-view-menu-list-content .menu-list-content-edit {
+  display: flex;
+  align-items: center;
+}
+.aplus-ap-view-menu-list-content .menu-list-content-edit .ant-form-item {
+  margin-bottom: 0;
+}
+.aplus-ap-view-menu-list-content .menu-list-content-edit .ant-space-item:has(.menu-list-content-action-text) {
+  flex-shrink: 0;
+}
+.aplus-ap-view-menu-list-content:hover {
+  background: var(--ap-view-bg-color, #F6F9FA);
+}
+.aplus-ap-view-menu-list-content:hover .menu-list-content-action {
+  display: block;
+}
+.aplus-ap-view-menu-list-content-edit {
+  background: transparent !important;
+  padding: 0 8px;
+  cursor: default;
+}
+.aplus-ap-view-menu-list-content-active .menu-list-content-name {
+  color: var(--basic-color-primary, #0070ff);
+}
+.aplus-ap-view-overlay .ant-dropdown-menu {
+  padding: 8px;
+}
+.aplus-ap-view-overlay .ant-dropdown-menu .ant-dropdown-menu-item {
+  padding: 0;
+}
+.aplus-ap-view-overlay .ant-dropdown-menu .ant-dropdown-menu-item:hover {
+  background: transparent;
+}

package/theme/ap-view/ap-view.less

@@ -0,0 +1,128 @@
+@import '../mixins/config.less';
+@import '../mixins/mixins.less';
+.b(ap-view,{
+  & > .ant-btn {
+    padding: 0;
+  }
+  & > .ant-dropdown-trigger {
+    color: var(--ap-view-icon-color,#8896b0);
+  }
+  &-main-content {
+    padding: 4px 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-disabled {
+      color: var(--ap-view-message-color,#abb7cc);
+       cursor: not-allowed;
+    }
+  }
+  .ant-btn-default:has(&-main-content-disabled) {
+   border-color: var(--ap-view-border-color,#DEE4ED) !important;
+  }
+  &-icon {
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  &-main-content-popover {
+    width: 340px;
+    &-title-content {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      &-title{
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+      }
+      .ant-form-item{
+        margin-bottom: 0;
+      }
+    }
+    &-btn {
+      margin-bottom: 0;
+      .ant-form-item-control-input-content {
+        display: flex;
+        justify-content: flex-end;
+      }
+    }
+  }
+  &-menu-list-content {
+    width: 250px;
+    display: flex;
+    padding: 6px 8px;
+    align-items: center;
+    height: 32px;
+    .menu-list-content-name{
+      overflow: hidden;
+      display: block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 12px;
+      margin-right: 8px;
+    }
+    .menu-list-content-default{
+      margin-right: 8px;
+      flex-shrink: 0;
+    }
+    .menu-list-content-action{
+      cursor: default;
+      display: none;
+      flex-shrink: 0;
+      margin-left: auto;
+      user-select: none;
+      &-text {
+        cursor: pointer;
+        font-size: 12px;
+        color: var(--basic-color-primary,#0070ff);
+      }
+      &-delete {
+        cursor: pointer;
+        color: var(--ap-view-icon-color,#8896b0);
+      }
+    }
+    
+    .menu-list-content-edit {
+      display: flex;
+      align-items: center;
+      .ant-form-item {
+        margin-bottom: 0;
+      }
+      .ant-space-item:has(.menu-list-content-action-text) {
+        flex-shrink: 0;
+      }
+    }
+    &:hover{
+      background: var(--ap-view-bg-color,#F6F9FA);
+      .menu-list-content-action {
+        display: block;
+      }
+    }
+    &-edit {
+      background: transparent !important;
+      padding: 0 8px;
+      cursor: default;
+    }
+  }
+  &-menu-list-content-active {
+    .menu-list-content-name{
+      color: var(--basic-color-primary,#0070ff);
+    }
+  }
+  &-overlay {
+    .ant-dropdown-menu{
+      padding: 8px;
+      .ant-dropdown-menu-item {
+        padding: 0;
+        &:hover {
+          background: transparent;
+        }
+      }
+    }
+  }
+});

package/theme/batch-input-group/index.css

@@ -1,9 +1,37 @@
+.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-field-checkbox--vertical {
   display: inline-block;
 }
 .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;
@@ -13,7 +41,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;

package/theme/batch-input-group/popover-input.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-batch-input-group-popover-input {
   display: inline-flex;
   align-items: center;

package/theme/check-card/index.css

@@ -1,4 +1,40 @@
+.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-check-card {
+  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;
   border-radius: 4px;
   position: relative;
 }
@@ -21,8 +57,8 @@
   opacity: 0;
   inset-block-start: -2px;
   inset-inline-end: -2px;
-  border-inline-start: var(--check-card-indicator-size, 16px) solid transparent;
-  border-block-end: var(--check-card-indicator-size, 16px) solid transparent;
+  border-inline-start: var(--check-card-indicator-size, 14px) solid transparent;
+  border-block-end: var(--check-card-indicator-size, 14px) solid transparent;
   border-radius: 4px;
 }
 .aplus-check-card--checked {
@@ -33,9 +69,9 @@
 }
 .aplus-check-card--checked::after {
   opacity: 1;
-  border: var(--check-card-indicator-size, 16px) solid var(--check-card-checked-bg, #0070ff);
-  border-inline-start: var(--check-card-indicator-size, 16px) solid transparent;
-  border-block-end: var(--check-card-indicator-size, 16px) solid transparent;
+  border: var(--check-card-indicator-size, 14px) solid var(--check-card-checked-bg, #0070ff);
+  border-inline-start: var(--check-card-indicator-size, 14px) solid transparent;
+  border-block-end: var(--check-card-indicator-size, 14px) solid transparent;
   inset-block-start: -2px;
   inset-inline-end: -2px;
   transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -44,29 +80,41 @@
   outline-color: #E9EDF3;
 }
 .aplus-check-card--checked.aplus-check-card--disabled::after {
-  border: var(--check-card-indicator-size, 16px) solid #E9EDF3;
-  border-inline-start: var(--check-card-indicator-size, 16px) solid transparent;
-  border-block-end: var(--check-card-indicator-size, 16px) solid transparent;
+  border: var(--check-card-indicator-size, 14px) solid #E9EDF3;
+  border-inline-start: var(--check-card-indicator-size, 14px) solid transparent;
+  border-block-end: var(--check-card-indicator-size, 14px) solid transparent;
 }
 .aplus-check-card--middle {
-  padding: 16px 24px;
+  padding: 12px;
 }
 .aplus-check-card--small {
-  padding: 12px 24px;
+  padding: 6px 12px;
 }
 .aplus-check-card__title {
-  margin-bottom: 8px;
-  font-size: 14px;
-  line-height: 22px;
+  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;
+  margin-bottom: 4px;
   color: #333;
-  font-weight: 500;
+  font-weight: bold;
 }
 .aplus-check-card__title--disabled {
   color: #ABB7CC;
 }
 .aplus-check-card__content {
-  font-size: 14px;
-  line-height: 22px;
+  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: #333;
 }
 .aplus-check-card__content--disabled {
@@ -83,6 +131,6 @@
           user-select: none;
 }
 .aplus-check-card__checked-icon > img {
-  width: calc(var(--check-card-indicator-size, 16px) - 2px);
+  width: calc(var(--check-card-indicator-size, 14px) - 2px);
   vertical-align: top;
 }

package/theme/check-card/index.less

@@ -3,8 +3,11 @@
 
 @disabledCls: ~'@{ns}-check-card--disabled';
 
+@defaultIndicatorSize: 14px;
+
 .b(check-card, {
-  border-radius: 4px;
+  .reset-component();
+  border-radius: @border-radius;
   position: relative;
   &--disabled {
     background-color: #F9F9FA;
@@ -25,9 +28,9 @@
     opacity: 0;
     inset-block-start: -2px;
     inset-inline-end: -2px;
-    border-inline-start: var(--check-card-indicator-size, 16px) solid transparent;
-    border-block-end: var(--check-card-indicator-size, 16px) solid transparent;
-    border-radius: 4px;
+    border-inline-start: var(--check-card-indicator-size, @defaultIndicatorSize) solid transparent;
+    border-block-end: var(--check-card-indicator-size, @defaultIndicatorSize) solid transparent;
+    border-radius: @border-radius;
   }
   &--checked {
     &:hover:not(.@{disabledCls}) {
@@ -36,9 +39,9 @@
     outline: 2px solid var(--check-card-checked-outline-color, #0070ff);
     &::after {
       opacity: 1;
-      border: var(--check-card-indicator-size, 16px) solid var(--check-card-checked-bg, #0070ff);
-      border-inline-start: var(--check-card-indicator-size, 16px) solid transparent;
-      border-block-end: var(--check-card-indicator-size, 16px) solid transparent;
+      border: var(--check-card-indicator-size, @defaultIndicatorSize) solid var(--check-card-checked-bg, #0070ff);
+      border-inline-start: var(--check-card-indicator-size, @defaultIndicatorSize) solid transparent;
+      border-block-end: var(--check-card-indicator-size, @defaultIndicatorSize) solid transparent;
       inset-block-start: -2px;
       inset-inline-end: -2px;
       transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -47,30 +50,28 @@
   &--checked&--disabled {
     outline-color: #E9EDF3;
     &::after {
-      border: var(--check-card-indicator-size, 16px) solid #E9EDF3;
-      border-inline-start: var(--check-card-indicator-size, 16px) solid transparent;
-      border-block-end: var(--check-card-indicator-size, 16px) solid transparent;
+      border: var(--check-card-indicator-size, @defaultIndicatorSize) solid #E9EDF3;
+      border-inline-start: var(--check-card-indicator-size, @defaultIndicatorSize) solid transparent;
+      border-block-end: var(--check-card-indicator-size, @defaultIndicatorSize) solid transparent;
     }
   }
   &--middle {
-    padding: 16px 24px;
+    padding: @spacing-lg;
   }
   &--small {
-    padding: 12px 24px;
+    padding: @spacing-sm @spacing-lg;
   }
   &__title {
-    margin-bottom: 8px;
-    font-size: 14px;
-    line-height: 22px;
+    .reset-component();
+    margin-bottom: @spacing-xs;
     color: #333;
-    font-weight: 500;
+    font-weight: bold;
     &--disabled {
       color: #ABB7CC;
     }
   }
   &__content {
-    font-size: 14px;
-    line-height: 22px;
+    .reset-component();
     color: #333;
     &--disabled {
       color: #ABB7CC;
@@ -84,7 +85,7 @@
     line-height: 1;
     user-select: none;
     & > img {
-      width: calc(var(--check-card-indicator-size, 16px) - 2px);
+      width: calc(var(--check-card-indicator-size, @defaultIndicatorSize) - 2px);
       vertical-align: top;
     }
   }