@aplus-frontend/ui 6.20.0 → 6.21.0

package/lib/src/path-map.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={ApActionItem:["ap-action","item"],ApActionItemModal:["ap-action","item-modal"],ApActionItemPopconfirm:["ap-action","item-popconfirm"],ApActionItemDropdown:["ap-action","item-dropdown"],ApActionGroup:["ap-action","group"],ApButton:["ap-button"],ApActionButton:["ap-action-button"],ApDescriptions:["ap-descriptions"],ApDownload:["ap-download"],ApField:["ap-field"],ApFieldText:["ap-field","text"],ApFieldCheckbox:["ap-field","checkbox"],ApFieldDate:["ap-field","date"],ApFieldNumber:["ap-field","number"],ApFieldRadio:["ap-field","radio"],ApFieldSwitch:["ap-field","switch"],ApFieldTextArea:["ap-field","text-area"],ApFieldDateRange:["ap-field","date-range"],ApFieldSelect:["ap-field","select"],ApFieldPassword:["ap-field","password"],ApFieldSlider:["ap-field","slider"],ApFieldSegmented:["ap-field","segmented"],ApFieldDateRate:["ap-field","rate"],ApFieldTreeSelect:["ap-field","tree-select"],ApForm:["ap-form"],ApFormItem:["ap-form","item"],ApFormItemGroup:["ap-form","item-group"],ApFormList:["ap-form","list"],ApFormSearchForm:["ap-form","search-form"],ApFormModalForm:["ap-form","modal-form"],ApFormDependency:["ap-form","dependency"],ApFormSet:["ap-form","set"],ApFormDrawerForm:["ap-form","drawer-form"],ApFormItemText:["ap-form","item-text"],ApFormItemTextArea:["ap-form","item-text-area"],ApFormItemNumber:["ap-form","item-number"],ApFormItemDate:["ap-form","item-date"],ApFormItemDateRange:["ap-form","item-date-range"],ApFormItemRadio:["ap-form","item-radio"],ApFormItemSelect:["ap-form","item-select"],ApFormItemSwitch:["ap-form","item-switch"],ApFormItemCheckbox:["ap-form","item-checkbox"],ApFormItemTextPassword:["ap-form","item-text-password"],ApFormItemTreeSelect:["ap-form","item-tree-select"],ApFormItemTextGroup:["ap-form","item-text-group"],ApList:["ap-list"],ApModal:["ap-modal"],ApDrawer:["ap-drawer"],ApTable:["ap-table"],ApTag:["ap-tag"],ApTagGroup:["ap-tag","group"],ApUpload:["ap-upload"],CheckCard:["check-card"],CheckCardGroup:["check-card","group"],ConfigProvider:["config-provider"],EditableTable:["editable-table"],EditableTableFormItem:["editable-table","form-item"],WorkOrderModal:["work-order-modal"],ApAttachment:["business","ap-attachment"],ApBatchAction:["business","ap-batch-action"],ApBatchActionGroup:["business","ap-batch-action-group"],ApButtonGroup:["business","ap-button-group"],ApCard:["business","ap-card"],ApExpandAlert:["business","ap-expand-alert"],ApExportGroup:["business","ap-export-group"],ApImage:["business","ap-image"],ApInputRadio:["business","ap-input-radio"],ApSizeInput:["business","ap-size-input"],ApLabel:["business","ap-label"],ApLabelGroup:["business","ap-label","group"],ApLadder:["business","ap-ladder"],ApProductInfo:["business","ap-product-info"],ApCopy:["business","ap-copy"],ApSelectLayout:["business","ap-select-layout"],ApStatus:["business","ap-status"],ApStatusGroup:["business","ap-status","group"],ApTableModal:["business","ap-table-modal"],useTableModal:["business","ap-table-modal"],useTableSelectModal:["business","ap-table-modal"],ApTitle:["business","ap-title"],ApSummary:["business","ap-summary"],ScrollBar:["scroll-bar"],ScrollView:["scroll-view"],ApAppendix:["business","ap-appendix"],ApPopoverSelect:["business","ap-group-search","popover-select"],ApExtensionSelect:["business","ap-group-search","extension-select"],ApUploadSingle:["business","ap-upload-file","ap-upload-single"],BatchInputGroup:["business","batch-input-group"],ApFormControlRender:["ap-form","render"],ApFormItemRender:["ap-form","render"],Portal:["portal"],FullScreen:["full-screen"],ResizeObserver:["resize-observer"],ApGrid:["ap-grid"],EditableGrid:["ap-grid","editable"],EditableGridFormItem:["ap-grid","editable"],ApText:["text"],Mask:["mask"],Splitter:["splitter"],ApView:["business","ap-view"],ApRadioGroup:["business","ap-radio-group"],ApDraggableGrid:["business","ap-draggable-grid"]};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={ApActionItem:["ap-action","item"],ApActionItemModal:["ap-action","item-modal"],ApActionItemPopconfirm:["ap-action","item-popconfirm"],ApActionItemDropdown:["ap-action","item-dropdown"],ApActionGroup:["ap-action","group"],ApButton:["ap-button"],ApActionButton:["ap-action-button"],ApDescriptions:["ap-descriptions"],ApDownload:["ap-download"],ApField:["ap-field"],ApFieldText:["ap-field","text"],ApFieldCheckbox:["ap-field","checkbox"],ApFieldDate:["ap-field","date"],ApFieldNumber:["ap-field","number"],ApFieldRadio:["ap-field","radio"],ApFieldSwitch:["ap-field","switch"],ApFieldTextArea:["ap-field","text-area"],ApFieldDateRange:["ap-field","date-range"],ApFieldSelect:["ap-field","select"],ApFieldPassword:["ap-field","password"],ApFieldSlider:["ap-field","slider"],ApFieldSegmented:["ap-field","segmented"],ApFieldDateRate:["ap-field","rate"],ApFieldTreeSelect:["ap-field","tree-select"],ApForm:["ap-form"],ApFormItem:["ap-form","item"],ApFormItemGroup:["ap-form","item-group"],ApFormList:["ap-form","list"],ApFormSearchForm:["ap-form","search-form"],ApFormModalForm:["ap-form","modal-form"],ApFormDependency:["ap-form","dependency"],ApFormSet:["ap-form","set"],ApFormDrawerForm:["ap-form","drawer-form"],ApFormItemText:["ap-form","item-text"],ApFormItemTextArea:["ap-form","item-text-area"],ApFormItemNumber:["ap-form","item-number"],ApFormItemDate:["ap-form","item-date"],ApFormItemDateRange:["ap-form","item-date-range"],ApFormItemRadio:["ap-form","item-radio"],ApFormItemSelect:["ap-form","item-select"],ApFormItemSwitch:["ap-form","item-switch"],ApFormItemCheckbox:["ap-form","item-checkbox"],ApFormItemTextPassword:["ap-form","item-text-password"],ApFormItemTreeSelect:["ap-form","item-tree-select"],ApFormItemTextGroup:["ap-form","item-text-group"],ApList:["ap-list"],ApModal:["ap-modal"],ApDrawer:["ap-drawer"],ApTable:["ap-table"],ApTag:["ap-tag"],ApTagGroup:["ap-tag","group"],ApUpload:["ap-upload"],CheckCard:["check-card"],CheckCardGroup:["check-card","group"],ConfigProvider:["config-provider"],EditableTable:["editable-table"],EditableTableFormItem:["editable-table","form-item"],WorkOrderModal:["work-order-modal"],ApAttachment:["business","ap-attachment"],ApBatchAction:["business","ap-batch-action"],ApBatchActionGroup:["business","ap-batch-action-group"],ApButtonGroup:["business","ap-button-group"],ApCard:["business","ap-card"],ApExpandAlert:["business","ap-expand-alert"],ApExportGroup:["business","ap-export-group"],ApImage:["business","ap-image"],ApInputRadio:["business","ap-input-radio"],ApSizeInput:["business","ap-size-input"],ApLabel:["business","ap-label"],ApLabelGroup:["business","ap-label","group"],ApLadder:["business","ap-ladder"],ApProductInfo:["business","ap-product-info"],ApCopy:["business","ap-copy"],ApSelectLayout:["business","ap-select-layout"],ApStatus:["business","ap-status"],ApStatusGroup:["business","ap-status","group"],ApTableModal:["business","ap-table-modal"],useTableModal:["business","ap-table-modal"],useTableSelectModal:["business","ap-table-modal"],ApTitle:["business","ap-title"],ApSummary:["business","ap-summary"],ScrollBar:["scroll-bar"],ScrollView:["scroll-view"],ApAppendix:["business","ap-appendix"],ApPopoverSelect:["business","ap-group-search","popover-select"],ApExtensionSelect:["business","ap-group-search","extension-select"],ApUploadSingle:["business","ap-upload-file","ap-upload-single"],BatchInputGroup:["business","batch-input-group"],ApFormControlRender:["ap-form","render"],ApFormItemRender:["ap-form","render"],Portal:["portal"],FullScreen:["full-screen"],ResizeObserver:["resize-observer"],ApGrid:["ap-grid"],EditableGrid:["ap-grid","editable"],EditableGridFormItem:["ap-grid","editable"],ApText:["text"],Mask:["mask"],Splitter:["splitter"],ApView:["business","ap-view"],ApRadioGroup:["business","ap-radio-group"],ApDraggableGrid:["business","ap-draggable-grid"],ApValueSelectCard:["business","ap-value-select-card"],ApProCard:["ap-pro-card"]};exports.default=e;

package/lib/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "6.20.0";
+declare const _default: "6.21.0";
 export default _default;

package/lib/src/version.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="6.20.0";exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="6.21.0";exports.default=e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aplus-frontend/ui",
-  "version": "6.20.0",
+  "version": "6.21.0",
   "main": "./lib/index.js",
   "type": "module",
   "files": [
@@ -39,14 +39,14 @@
     "@aplus-frontend/hooks": "1.0.7"
   },
   "peerDependencies": {
-    "@aplus-frontend/antdv": "^1.2.0",
+    "@aplus-frontend/antdv": "^1.2.1",
     "@aplus-frontend/icon": "^1.2.6",
     "@aplus-frontend/oss": "^1.1.2",
     "vue": "^3.5.14",
     "vxe-table": "^4.13.37"
   },
   "devDependencies": {
-    "@aplus-frontend/antdv": "^1.2.0",
+    "@aplus-frontend/antdv": "^1.2.1",
     "@aplus-frontend/icon": "^1.2.6",
     "@aplus-frontend/oss": "^1.1.2",
     "@types/sortablejs": "^1.15.8",

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

@@ -0,0 +1,259 @@
+.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);
+}

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

@@ -0,0 +1,129 @@
+@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);
+  }
+});

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;
+}