@aplus-frontend/ui 6.20.1 → 6.21.1

package/theme/ap-pro-card/index.css

@@ -0,0 +1,311 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #182948;
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 18px;
+  list-style: none;
+}
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--ap-scrollbar-thumb-color-hover);
+}
+.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-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);
+}
+.aplus-pro-card-title-default {
+  position: relative;
+  font-weight: bold;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+.aplus-pro-card-title-default-aplus {
+  padding-left: 10px;
+}
+.aplus-pro-card-title-default-aplus::before {
+  position: absolute;
+  content: '';
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 14px;
+  background: #0070ff;
+  border-radius: 0px 4px 4px 0px;
+}
+.aplus-pro-card-title-default-admin {
+  padding-left: 14px;
+}
+.aplus-pro-card-title-default-admin::before {
+  position: absolute;
+  content: '';
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #34b77c;
+  background: #fff;
+}
+.aplus-pro-card-divider {
+  flex: none;
+  background: var(--ap-pro-card-border-color-split);
+}
+.aplus-pro-card-divider-vertical {
+  width: var(--ap-pro-card-border-line-width);
+  margin-inline: 8px;
+  margin-block: 24px;
+}
+.aplus-pro-card-divider-horizontal {
+  height: var(--ap-pro-card-border-line-width);
+  margin-inline: 24px;
+  margin-block: 8px;
+}

package/theme/ap-pro-card/index.less

@@ -0,0 +1,185 @@
+@import '../mixins/mixins.less';
+
+.b(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);
+  &-border {
+    border: var(--ap-pro-card-border-line-width) var(--ap-pro-card-border-line-type) var(--ap-pro-card-border-color-split);
+  }
+  &-box-shadow {
+    border-color: transparent;
+    box-shadow: var(--ap-pro-card-box-shadow);
+  }
+  &-hoverable {
+    cursor: pointer;
+    transition: box-shadow 0.3s, border-color 0.3s;
+    &:hover {
+      border-color: transparent;
+      box-shadow: var(--ap-pro-card-box-shadow);
+    }
+  }
+  &-header {
+    display: flex;
+    align-items: center;
+    padding: var(--ap-pro-card-header-padding);
+    &-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;
+      &-tooltip {
+        margin-left: 5px;
+        font-size: 14px;
+        color: var(--ap-pro-card-tooltip-color);
+      }
+    }
+    &-extra {
+      margin-inline-start: auto;
+    }
+    &-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);
+    }
+  }
+  &-type-inner > &-header {
+    background: var(--ap-pro-card-area-color);
+  }
+  &-body {
+    display: block;
+    box-sizing: border-box;
+    height: 100%;
+    padding: var(--ap-pro-card-body-padding);
+    &-center {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    &-direction-column {
+      flex-direction: column
+    }
+    &-wrap {
+      flex-wrap: wrap
+    }
+  }
+  &-contain-card > &-body {
+    display: flex;
+  }
+  &-split > &-body {
+    padding: 0;
+  }
+  &-ghost {
+    background: transparent;
+  }
+  &-ghost > &-body {
+    background: transparent;
+    padding: 0;
+  }
+  &-col {
+    width: 100%;
+    &-split-vertical {
+      position: relative;
+      &::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: '';
+      }
+      
+    }
+    &-split-horizontal {
+      position: relative;
+      &::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: '';
+      }
+      
+    }
+    &-span-0 {
+      display: none;
+    }
+    .loop-span(@i) when (@i <= 24) {
+      &-span-@{i} {
+        flex-shrink: 0;
+        width: calc((@i / 24) * 100%);
+      }
+      .loop-span(@i + 1);
+    }
+    .loop-span(1);
+  }
+  &-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);
+  }
+});
+
+.b(pro-card-title, {
+  &-default {
+    position: relative;
+    font-weight: bold;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    &-aplus {
+      padding-left: 10px;
+      &::before {
+        position: absolute;
+        content: '';
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 14px;
+        background: #0070ff;
+        border-radius: 0px 4px 4px 0px;
+      }
+    }
+    &-admin {
+      padding-left: 14px;
+      &::before {
+        position: absolute;
+        content: '';
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        border-width: 2px;
+        border-style: solid;
+        border-color: #34b77c;
+        background: #fff;
+      }
+    }
+  }
+});
+
+.b(pro-card-divider, {
+  flex: none;
+  background: var(--ap-pro-card-border-color-split);
+  &-vertical {
+    width: var(--ap-pro-card-border-line-width);
+    margin-inline: 8px;
+    margin-block: 24px;
+  }
+  &-horizontal {
+    height: var(--ap-pro-card-border-line-width);
+    margin-inline: 24px;
+    margin-block: 8px;
+  }
+});

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

@@ -0,0 +1,163 @@
+.reset-component {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: #182948;
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 18px;
+  list-style: none;
+}
+.reset-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: var(--ap-scrollbar-thumb-color-base);
+  background-clip: content-box;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+.reset-scrollbar ::-webkit-scrollbar-track,
+.reset-scrollbar ::-webkit-scrollbar-corner {
+  background-color: var(--ap-table-header-bg, #f2f6f9);
+}
+.reset-scrollbar ::-webkit-scrollbar-thumb:hover,
+.reset-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: var(--ap-scrollbar-thumb-color-hover);
+}
+.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-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;
+}