@aplus-frontend/ui 6.20.0 → 6.21.0

package/theme/ap-value-select-card/index.less

@@ -0,0 +1,157 @@
+@import '../mixins/mixins.less';
+@import '../mixins/config.less';
+
+.b('ap-value-select-card', {
+  @root-cls: ~'@{ns}@{common-separator}ap-value-select-card';
+  position: relative;
+  margin-top: 8px;
+
+  .ant-popover {
+    width: 100%;
+  }
+
+  &-list {
+    display: grid;
+    grid-template-columns: repeat(var(--ap-value-select-card-column-count, 5), minmax(var(--ap-value-select-card-max-width, 150px), 1fr));
+    gap: 12px;
+
+    &-item {
+      position: relative;
+      box-sizing: border-box;
+      padding: 8px 16px;
+      color: var(--ap-text-color-1);
+      border: 1px solid var(--ap-color-bg);
+      border-radius: @border-radius;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+
+      &-close {
+        position: absolute;
+        top: 4px;
+        right: 12px;
+        z-index: 1;
+        padding: 4px;
+        color: var(--ap-text-color-3);
+        font-size: @font-size-lg;
+        cursor: pointer;
+
+        &:hover {
+          color: @error-color;
+        }
+      }
+
+      
+
+      .label {
+        margin-bottom: 4px;
+        font-size: @font-size-base;
+        line-height: @line-height-base;
+      }
+
+      .value {
+        overflow: hidden;
+        font-weight: bold;
+        font-size: @fonts-size-xl;
+        line-height: 24px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &:hover:not(.select) {
+        border: 1px solid var(--ap-color-primary);
+      }
+
+      &.select {
+        color: var(--ap-text-color-2);
+        border-color: transparent;
+        box-shadow: 3px 10px 30px -2px rgba(123, 121, 140, 0.15);
+        background: linear-gradient(
+          270deg,
+          rgba(255, 255, 255, 0) 0%,
+          var(--ap-value-select-card-bg-color, #f5f9ff) 92%
+        );
+        &:hover {
+          background: var(--ap-value-select-card-bg-color, #f5f9ff);
+        }
+      }
+
+      &.all {
+        color: var(--ap-text-color-1);
+        background: #ffffff;
+        border: 1px solid var(--ap-color-bg);
+        box-shadow: none;
+
+        &:hover:not(.disabled) {
+          border-color: var(--ap-color-primary);
+        }
+
+        &.disabled {
+          color: #8896b0;
+          background: #f9f9fa;
+          cursor: not-allowed;
+        }
+
+        &.select {
+          background: #f5f9ff;
+          border-color: var(--ap-color-primary);
+          cursor: pointer;
+        }
+      }
+
+      &.choose {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: var(--ap-color-primary);
+        background: #ffffff;
+        border: 1px dashed #d1d7df;
+        box-shadow: none;
+
+        .text {
+          font-size: @font-size-base;
+          margin-left: 4px;
+        }
+
+        &:hover {
+          border-color: var(--ap-color-primary);
+        }
+      }
+    }
+  }
+
+  &-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    color: #526a90;
+    font-size: @font-size-lg;
+
+    &-icon {
+      margin-right: 4px;
+      color: #abb7cc;
+      font-size: @font-size-lg;
+    }
+  }
+
+  &--admin {
+    .@{root-cls} {
+      &-list {
+        &-item {
+          &.all {
+            &.select {
+              background: #F7FCFA;
+            }
+            &.disabled {
+              color: #999;
+            }
+          }
+        }
+      }
+      &-title {
+        color: #666;
+      }
+    }
+  }
+
+});

package/theme/index.css

@@ -4145,3 +4145,333 @@ div.aplus-ap-info-layout-admin__header-shadow.aplus-ap-info-layout-admin__sticky
   min-height: 200px;
   padding: 20px;
 }
+.aplus-ap-value-select-card {
+  position: relative;
+  margin-top: 8px;
+}
+.aplus-ap-value-select-card .ant-popover {
+  width: 100%;
+}
+.aplus-ap-value-select-card-list {
+  display: grid;
+  grid-template-columns: repeat(var(--ap-value-select-card-column-count, 5), minmax(var(--ap-value-select-card-max-width, 150px), 1fr));
+  gap: 12px;
+}
+.aplus-ap-value-select-card-list-item {
+  position: relative;
+  box-sizing: border-box;
+  padding: 8px 16px;
+  color: var(--ap-text-color-1);
+  border: 1px solid var(--ap-color-bg);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.aplus-ap-value-select-card-list-item-close {
+  position: absolute;
+  top: 4px;
+  right: 12px;
+  z-index: 1;
+  padding: 4px;
+  color: var(--ap-text-color-3);
+  font-size: 14px;
+  cursor: pointer;
+}
+.aplus-ap-value-select-card-list-item-close:hover {
+  color: #ed6f6f;
+}
+.aplus-ap-value-select-card-list-item .label {
+  margin-bottom: 4px;
+  font-size: 12px;
+  line-height: 18px;
+}
+.aplus-ap-value-select-card-list-item .value {
+  overflow: hidden;
+  font-weight: bold;
+  font-size: 16px;
+  line-height: 24px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.aplus-ap-value-select-card-list-item:hover:not(.select) {
+  border: 1px solid var(--ap-color-primary);
+}
+.aplus-ap-value-select-card-list-item.select {
+  color: var(--ap-text-color-2);
+  border-color: transparent;
+  box-shadow: 3px 10px 30px -2px rgba(123, 121, 140, 0.15);
+  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, var(--ap-value-select-card-bg-color, #f5f9ff) 92%);
+}
+.aplus-ap-value-select-card-list-item.select:hover {
+  background: var(--ap-value-select-card-bg-color, #f5f9ff);
+}
+.aplus-ap-value-select-card-list-item.all {
+  color: var(--ap-text-color-1);
+  background: #ffffff;
+  border: 1px solid var(--ap-color-bg);
+  box-shadow: none;
+}
+.aplus-ap-value-select-card-list-item.all:hover:not(.disabled) {
+  border-color: var(--ap-color-primary);
+}
+.aplus-ap-value-select-card-list-item.all.disabled {
+  color: #8896b0;
+  background: #f9f9fa;
+  cursor: not-allowed;
+}
+.aplus-ap-value-select-card-list-item.all.select {
+  background: #f5f9ff;
+  border-color: var(--ap-color-primary);
+  cursor: pointer;
+}
+.aplus-ap-value-select-card-list-item.choose {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--ap-color-primary);
+  background: #ffffff;
+  border: 1px dashed #d1d7df;
+  box-shadow: none;
+}
+.aplus-ap-value-select-card-list-item.choose .text {
+  font-size: 12px;
+  margin-left: 4px;
+}
+.aplus-ap-value-select-card-list-item.choose:hover {
+  border-color: var(--ap-color-primary);
+}
+.aplus-ap-value-select-card-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  color: #526a90;
+  font-size: 14px;
+}
+.aplus-ap-value-select-card-title-icon {
+  margin-right: 4px;
+  color: #abb7cc;
+  font-size: 14px;
+}
+.aplus-ap-value-select-card--admin .aplus-ap-value-select-card-list-item.all.select {
+  background: #F7FCFA;
+}
+.aplus-ap-value-select-card--admin .aplus-ap-value-select-card-list-item.all.disabled {
+  color: #999;
+}
+.aplus-ap-value-select-card--admin .aplus-ap-value-select-card-title {
+  color: #666;
+}
+.aplus-pro-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 0;
+  width: 100%;
+  transition: all 0.3s;
+  background: var(--ap-pro-card-colo-bg-container);
+  border-radius: var(--ap-pro-card-border-radius);
+}
+.aplus-pro-card-border {
+  border: var(--ap-pro-card-border-line-width) var(--ap-pro-card-border-line-type) var(--ap-pro-card-border-color-split);
+}
+.aplus-pro-card-box-shadow {
+  border-color: transparent;
+  box-shadow: var(--ap-pro-card-box-shadow);
+}
+.aplus-pro-card-hoverable {
+  cursor: pointer;
+  transition: box-shadow 0.3s, border-color 0.3s;
+}
+.aplus-pro-card-hoverable:hover {
+  border-color: transparent;
+  box-shadow: var(--ap-pro-card-box-shadow);
+}
+.aplus-pro-card-header {
+  display: flex;
+  align-items: center;
+  padding: var(--ap-pro-card-header-padding);
+}
+.aplus-pro-card-header-title {
+  display: flex;
+  font-size: var(--ap-pro-card-header-title-font-size);
+  color: var(--ap-pro-card-header-title-font-color);
+  font-weight: 500;
+}
+.aplus-pro-card-header-title-tooltip {
+  margin-left: 5px;
+  font-size: 14px;
+  color: var(--ap-pro-card-tooltip-color);
+}
+.aplus-pro-card-header-extra {
+  margin-inline-start: auto;
+}
+.aplus-pro-card-header-border {
+  padding-block-end: var(--ap-pro-card-header-padding-bottom);
+  border-block-end: var(--ap-pro-card-border-line-width) var(--ap-pro-card-border-line-type) var(--ap-pro-card-border-color-split);
+}
+.aplus-pro-card-type-inner > .aplus-pro-card-header {
+  background: var(--ap-pro-card-area-color);
+}
+.aplus-pro-card-body {
+  display: block;
+  box-sizing: border-box;
+  height: 100%;
+  padding: var(--ap-pro-card-body-padding);
+}
+.aplus-pro-card-body-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.aplus-pro-card-body-direction-column {
+  flex-direction: column;
+}
+.aplus-pro-card-body-wrap {
+  flex-wrap: wrap;
+}
+.aplus-pro-card-contain-card > .aplus-pro-card-body {
+  display: flex;
+}
+.aplus-pro-card-split > .aplus-pro-card-body {
+  padding: 0;
+}
+.aplus-pro-card-ghost {
+  background: transparent;
+}
+.aplus-pro-card-ghost > .aplus-pro-card-body {
+  background: transparent;
+  padding: 0;
+}
+.aplus-pro-card-col {
+  width: 100%;
+}
+.aplus-pro-card-col-split-vertical {
+  position: relative;
+}
+.aplus-pro-card-col-split-vertical::after {
+  position: absolute;
+  height: var(--ap-pro-card-split-line-height);
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
+  border-right: var(--ap-pro-card-border-line-width) var(--ap-pro-card-border-line-type) var(--ap-pro-card-border-color-split);
+  content: '';
+}
+.aplus-pro-card-col-split-horizontal {
+  position: relative;
+}
+.aplus-pro-card-col-split-horizontal::after {
+  position: absolute;
+  width: var(--ap-pro-card-split-line-height);
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 0;
+  border-bottom: var(--ap-pro-card-border-line-width) var(--ap-pro-card-border-line-type) var(--ap-pro-card-border-color-split);
+  content: '';
+}
+.aplus-pro-card-col-span-0 {
+  display: none;
+}
+.aplus-pro-card-col-span-1 {
+  flex-shrink: 0;
+  width: calc((1 / 24) * 100%);
+}
+.aplus-pro-card-col-span-2 {
+  flex-shrink: 0;
+  width: calc((2 / 24) * 100%);
+}
+.aplus-pro-card-col-span-3 {
+  flex-shrink: 0;
+  width: calc((3 / 24) * 100%);
+}
+.aplus-pro-card-col-span-4 {
+  flex-shrink: 0;
+  width: calc((4 / 24) * 100%);
+}
+.aplus-pro-card-col-span-5 {
+  flex-shrink: 0;
+  width: calc((5 / 24) * 100%);
+}
+.aplus-pro-card-col-span-6 {
+  flex-shrink: 0;
+  width: calc((6 / 24) * 100%);
+}
+.aplus-pro-card-col-span-7 {
+  flex-shrink: 0;
+  width: calc((7 / 24) * 100%);
+}
+.aplus-pro-card-col-span-8 {
+  flex-shrink: 0;
+  width: calc((8 / 24) * 100%);
+}
+.aplus-pro-card-col-span-9 {
+  flex-shrink: 0;
+  width: calc((9 / 24) * 100%);
+}
+.aplus-pro-card-col-span-10 {
+  flex-shrink: 0;
+  width: calc((10 / 24) * 100%);
+}
+.aplus-pro-card-col-span-11 {
+  flex-shrink: 0;
+  width: calc((11 / 24) * 100%);
+}
+.aplus-pro-card-col-span-12 {
+  flex-shrink: 0;
+  width: calc((12 / 24) * 100%);
+}
+.aplus-pro-card-col-span-13 {
+  flex-shrink: 0;
+  width: calc((13 / 24) * 100%);
+}
+.aplus-pro-card-col-span-14 {
+  flex-shrink: 0;
+  width: calc((14 / 24) * 100%);
+}
+.aplus-pro-card-col-span-15 {
+  flex-shrink: 0;
+  width: calc((15 / 24) * 100%);
+}
+.aplus-pro-card-col-span-16 {
+  flex-shrink: 0;
+  width: calc((16 / 24) * 100%);
+}
+.aplus-pro-card-col-span-17 {
+  flex-shrink: 0;
+  width: calc((17 / 24) * 100%);
+}
+.aplus-pro-card-col-span-18 {
+  flex-shrink: 0;
+  width: calc((18 / 24) * 100%);
+}
+.aplus-pro-card-col-span-19 {
+  flex-shrink: 0;
+  width: calc((19 / 24) * 100%);
+}
+.aplus-pro-card-col-span-20 {
+  flex-shrink: 0;
+  width: calc((20 / 24) * 100%);
+}
+.aplus-pro-card-col-span-21 {
+  flex-shrink: 0;
+  width: calc((21 / 24) * 100%);
+}
+.aplus-pro-card-col-span-22 {
+  flex-shrink: 0;
+  width: calc((22 / 24) * 100%);
+}
+.aplus-pro-card-col-span-23 {
+  flex-shrink: 0;
+  width: calc((23 / 24) * 100%);
+}
+.aplus-pro-card-col-span-24 {
+  flex-shrink: 0;
+  width: calc((24 / 24) * 100%);
+}
+.aplus-pro-card-actions {
+  border-block-start: var(--ap-pro-card-border-line-width) var(--ap-pro-card-border-line-type) var(--ap-pro-card-border-color-split);
+  background: var(--ap-pro-card-colo-bg-container);
+  padding: var(--ap-pro-card-actions-padding);
+}

package/theme/index.less

@@ -51,3 +51,5 @@
 @import './ap-radio-group/ap-radio-group.less';
 @import './ap-drawer/ap-drawer.less';
 @import './ap-draggable-grid/ap-draggable-grid.less';
+@import './ap-value-select-card/index.less';
+@import './ap-pro-card/index.less';