xrk-components 2.0.0-beta.5 → 2.0.0-beta.6

package/lib/index.css

@@ -10,6 +10,7 @@
   --xrk-color-danger-rgb: 255, 11, 11;
   --xrk-color-error-rgb: 255, 11, 11;
   --xrk-color-info-rgb: 144, 147, 153;
+  --xrk-color-primary2-rgb: 44, 130, 234;
   --xrk-font-size-extra-large: 20px;
   --xrk-font-size-large: 18px;
   --xrk-font-size-medium: 16px;
@@ -98,6 +99,15 @@
   --xrk-color-info-dark-1: rgb(132.2, 134.9, 140.3);
   --xrk-color-info-dark-2: rgb(120.4, 122.8, 127.6);
   --xrk-color-info-dark-3: rgb(108.6, 110.7, 114.9);
+  --xrk-color-primary2: #2c82ea;
+  --xrk-color-primary2-light-3: rgb(107.3, 167.5, 240.3);
+  --xrk-color-primary2-light-5: rgb(149.5, 192.5, 244.5);
+  --xrk-color-primary2-light-7: rgb(191.7, 217.5, 248.7);
+  --xrk-color-primary2-light-8: rgb(212.8, 230, 250.8);
+  --xrk-color-primary2-light-9: rgb(233.9, 242.5, 252.9);
+  --xrk-color-primary2-dark-1: rgb(42.2, 119.6, 213.2);
+  --xrk-color-primary2-dark-2: rgb(40.4, 109.2, 192.4);
+  --xrk-color-primary2-dark-3: rgb(38.6, 98.8, 171.6);
   --xrk-bg-color: #ffffff;
   --xrk-bg-color-page: #f2f3f5;
   --xrk-bg-color-overlay: #ffffff;
@@ -1489,6 +1499,39 @@
   border-color: var(--xrk-color-info-light-8);
 }
 
+.xrk-button--primary2 {
+  --xrk-button-text-color: var(--xrk-color-white);
+  --xrk-button-bg-color: var(--xrk-color-primary2);
+  --xrk-button-border-color: var(--xrk-color-primary2);
+  --xrk-button-outline-color: var(--xrk-color-primary2-light-5);
+  --xrk-button-active-color: var(--xrk-color-primary2-dark-2);
+  --xrk-button-hover-text-color: var(--xrk-color-white);
+  --xrk-button-hover-link-text-color: var(--xrk-color-primary2-light-5);
+  --xrk-button-hover-bg-color: var(--xrk-color-primary2-dark-1);
+  --xrk-button-hover-border-color: var(--xrk-color-primary2-dark-1);
+  --xrk-button-active-bg-color: var(--xrk-color-primary2-dark-2);
+  --xrk-button-active-border-color: var(--xrk-color-primary2-dark-2);
+  --xrk-button-disabled-text-color: var(--xrk-color-white);
+  --xrk-button-disabled-bg-color: var(--xrk-color-primary2-light-5);
+  --xrk-button-disabled-border-color: var(--xrk-color-primary2-light-5);
+}
+
+.xrk-button--primary2.is-plain, .xrk-button--primary2.is-text, .xrk-button--primary2.is-link {
+  --xrk-button-text-color: var(--xrk-color-primary2);
+  --xrk-button-bg-color: var(--xrk-color-primary2-light-9);
+  --xrk-button-border-color: var(--xrk-color-primary2-light-5);
+  --xrk-button-hover-text-color: var(--xrk-color-white);
+  --xrk-button-hover-bg-color: var(--xrk-color-primary2);
+  --xrk-button-hover-border-color: var(--xrk-color-primary2);
+  --xrk-button-active-text-color: var(--xrk-color-white);
+}
+
+.xrk-button--primary2.is-plain.is-disabled, .xrk-button--primary2.is-plain.is-disabled:hover, .xrk-button--primary2.is-plain.is-disabled:focus, .xrk-button--primary2.is-plain.is-disabled:active, .xrk-button--primary2.is-text.is-disabled, .xrk-button--primary2.is-text.is-disabled:hover, .xrk-button--primary2.is-text.is-disabled:focus, .xrk-button--primary2.is-text.is-disabled:active, .xrk-button--primary2.is-link.is-disabled, .xrk-button--primary2.is-link.is-disabled:hover, .xrk-button--primary2.is-link.is-disabled:focus, .xrk-button--primary2.is-link.is-disabled:active {
+  color: var(--xrk-color-primary2-light-5);
+  background-color: var(--xrk-color-primary2-light-9);
+  border-color: var(--xrk-color-primary2-light-8);
+}
+
 .xrk-button--large {
   --xrk-button-size: 40px;
   height: var(--xrk-button-size);
@@ -2641,6 +2684,35 @@
   background-color: var(--xrk-color-info-light-9);
 }
 
+.xrk-check-tag.xrk-check-tag--primary2.is-checked {
+  background-color: var(--xrk-color-primary2-light-8);
+  color: var(--xrk-color-primary2);
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-checked:hover {
+  background-color: var(--xrk-color-primary2-light-7);
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-checked.is-disabled {
+  background-color: var(--xrk-color-primary2-light-8);
+  color: var(--xrk-disabled-text-color);
+  cursor: not-allowed;
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-checked.is-disabled:hover {
+  background-color: var(--xrk-color-primary2-light-8);
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-disabled {
+  background-color: var(--xrk-color-primary2-light-9);
+  color: var(--xrk-disabled-text-color);
+  cursor: not-allowed;
+}
+
+.xrk-check-tag.xrk-check-tag--primary2.is-disabled:hover {
+  background-color: var(--xrk-color-primary2-light-9);
+}
+
 .xrk-checkbox-button {
   --xrk-checkbox-button-checked-bg-color: var(--xrk-color-primary);
   --xrk-checkbox-button-checked-text-color: var(--xrk-color-white);
@@ -10723,6 +10795,20 @@
   border-color: var(--xrk-link-text-color);
 }
 
+.xrk-link.xrk-link--primary2 {
+  --xrk-link-text-color: var(--xrk-color-primary2);
+  --xrk-link-hover-text-color: var(--xrk-color-primary2-light-3);
+  --xrk-link-disabled-text-color: var(--xrk-color-primary2-light-5);
+}
+
+.xrk-link.xrk-link--primary2:after {
+  border-color: var(--xrk-link-text-color);
+}
+
+.xrk-link.xrk-link--primary2.is-underline:hover:after {
+  border-color: var(--xrk-link-text-color);
+}
+
 :root {
   --xrk-loading-spinner-size: 42px;
   --xrk-loading-fullscreen-spinner-size: 50px;
@@ -13098,6 +13184,11 @@
   color: var(--xrk-result-color);
 }
 
+.xrk-result .icon-primary2 {
+  --xrk-result-color: var(--xrk-color-primary2);
+  color: var(--xrk-result-color);
+}
+
 .xrk-row {
   display: -webkit-box;
   display: -webkit-flex;
@@ -16893,6 +16984,12 @@
   --xrk-tag-hover-color: var(--xrk-color-info);
 }
 
+.xrk-tag.xrk-tag--primary2 {
+  --xrk-tag-bg-color: var(--xrk-color-primary2-light-9);
+  --xrk-tag-border-color: var(--xrk-color-primary2-light-8);
+  --xrk-tag-hover-color: var(--xrk-color-primary2);
+}
+
 .xrk-tag.is-hit {
   border-color: var(--xrk-color-primary);
 }
@@ -16937,6 +17034,10 @@
   --xrk-tag-text-color: var(--xrk-color-info);
 }
 
+.xrk-tag.xrk-tag--primary2 {
+  --xrk-tag-text-color: var(--xrk-color-primary2);
+}
+
 .xrk-tag .xrk-icon {
   border-radius: 50%;
   cursor: pointer;
@@ -16992,6 +17093,12 @@
   --xrk-tag-hover-color: var(--xrk-color-info-light-3);
 }
 
+.xrk-tag--dark.xrk-tag--primary2 {
+  --xrk-tag-bg-color: var(--xrk-color-primary2);
+  --xrk-tag-border-color: var(--xrk-color-primary2);
+  --xrk-tag-hover-color: var(--xrk-color-primary2-light-3);
+}
+
 .xrk-tag--dark.xrk-tag--primary {
   --xrk-tag-text-color: var(--xrk-color-white);
 }
@@ -17016,6 +17123,10 @@
   --xrk-tag-text-color: var(--xrk-color-white);
 }
 
+.xrk-tag--dark.xrk-tag--primary2 {
+  --xrk-tag-text-color: var(--xrk-color-white);
+}
+
 .xrk-tag--plain {
   --xrk-tag-bg-color: var(--xrk-fill-color-blank);
   --xrk-tag-bg-color: var(--xrk-fill-color-blank);
@@ -17059,6 +17170,12 @@
   --xrk-tag-hover-color: var(--xrk-color-info);
 }
 
+.xrk-tag--plain.xrk-tag--primary2 {
+  --xrk-tag-bg-color: var(--xrk-fill-color-blank);
+  --xrk-tag-border-color: var(--xrk-color-primary2-light-5);
+  --xrk-tag-hover-color: var(--xrk-color-primary2);
+}
+
 .xrk-tag.is-closable {
   padding-right: 5px;
 }
@@ -17120,6 +17237,10 @@
   border-color: var(--xrk-color-info);
 }
 
+.xrk-tag.xrk-tag--primary2.is-hit {
+  border-color: var(--xrk-color-primary2);
+}
+
 .xrk-text {
   --xrk-text-font-size: var(--xrk-font-size-base);
   --xrk-text-color: var(--xrk-text-color-regular);
@@ -17186,6 +17307,10 @@
   --xrk-text-color: var(--xrk-color-info);
 }
 
+.xrk-text.xrk-text--primary2 {
+  --xrk-text-color: var(--xrk-color-primary2);
+}
+
 .xrk-text > .xrk-icon {
   vertical-align: -2px;
 }
@@ -19478,6 +19603,59 @@
   padding: var(--xrk-mention-footer-padding);
   border-top: var(--xrk-mention-border);
 }
+.base-button-more[data-v-c71e9bd0] {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-column-gap: 12px;
+     -moz-column-gap: 12px;
+          column-gap: 12px;
+  row-gap: 5px;
+}
+.base-button-more.wrap[data-v-c71e9bd0] {
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+}
+.base-button-more[data-v-c71e9bd0] .xrk-popover.xrk-popper {
+  padding: 5px 0;
+}
+.base-button-more .xrk-button + .xrk-button[data-v-c71e9bd0] {
+  margin-left: 0;
+}
+.btn-group .btn[data-v-c71e9bd0] {
+  cursor: pointer;
+  min-height: 36px;
+  padding: 7px 10px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.btn-group .btn.disabled[data-v-c71e9bd0] {
+  opacity: 0.9;
+  cursor: not-allowed;
+}
+.btn-group .btn[data-v-c71e9bd0]:hover {
+  color: #2c82ea;
+  background-color: #f0f0f0;
+}
 .xrk-custom-image-viewer[data-v-35819562] {
   width: 500px;
   height: 500px;
@@ -19670,6 +19848,7 @@
 }
 .xrk-dialog .xrk-dialog__body {
   overflow: auto;
+  min-height: 24px;
 }
 .base-upload[data-v-75b461d5] {
   line-height: 1.4;
@@ -19931,6 +20110,52 @@
           box-sizing: border-box;
   border-bottom: 1px solid #eaebed;
   background-color: #fff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.base-layout-header .left[data-v-cbf300d0] {
+  height: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 0 16px;
+  gap: 8px;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
+}
+.base-layout-header .left .name[data-v-cbf300d0] {
+  font-weight: bold;
+  color: var(--xrk-text-color-primary);
+}
+.base-layout-header .right[data-v-cbf300d0] {
+  height: 100%;
+}
+[data-v-d2a5b0d6] .xrk-breadcrumb__inner,[data-v-d2a5b0d6] .xrk-breadcrumb__separator {
+  color: #909090 !important;
+  font-weight: 400 !important;
+  font-size: var(--xrk-font-size-extra-small);
+}
+[data-v-d2a5b0d6] .xrk-breadcrumb__inner.is-link:hover {
+  color: var(--xrk-color-primary) !important;
+}
+[data-v-d2a5b0d6] .xrk-breadcrumb__item:last-child .xrk-breadcrumb__inner {
+  color: #636363 !important;
 }
 .base-layout-body[data-v-b5383626] {
   width: 100%;
@@ -19955,26 +20180,56 @@
   border-top-right-radius: 4px;
   overflow: auto;
 }
+.base-layout-body .body-top[data-v-b5383626] {
+  min-height: 10px;
+}
 .base-layout-menu[data-v-1bea9a2a] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.base-layout-menu .main-menu[data-v-1bea9a2a] {
   width: 100%;
   height: 100%;
   overflow: auto;
 }
-.base-layout-menu[data-v-1bea9a2a] .xrk-collapse-item__content {
+.base-layout-menu .main-menu[data-v-1bea9a2a] .xrk-collapse-item__content {
   padding-bottom: 0;
 }
-.base-layout-menu[data-v-1bea9a2a] .xrk-collapse-item__header {
+.base-layout-menu .main-menu[data-v-1bea9a2a] .xrk-collapse-item__header {
   color: var(--xrk-text-color-secondary);
 }
-.base-layout-menu[data-v-1bea9a2a] .xrk-collapse-item__header.is-active {
+.base-layout-menu .main-menu[data-v-1bea9a2a] .xrk-collapse-item__header.is-active, .base-layout-menu .main-menu[data-v-1bea9a2a] .xrk-collapse-item__header:hover {
   color: var(--xrk-text-color-primary);
   font-weight: var(--xrk-font-weight-primary);
 }
-.base-layout-menu .menu-name-one[data-v-1bea9a2a] {
+.base-layout-menu .main-menu .menu-name-one[data-v-1bea9a2a] {
   padding-left: 12px;
   font-size: var(--xrk-font-size-base);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  gap: 6px;
+}
+.base-layout-menu .main-menu .menu-name-one img[data-v-1bea9a2a] {
+  width: 18px;
+  height: 18px;
+  -o-object-fit: contain;
+     object-fit: contain;
+  -webkit-flex-shrink: 0;
+      -ms-flex-negative: 0;
+          flex-shrink: 0;
 }
-.base-layout-menu .sub-menu[data-v-1bea9a2a] {
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a] {
   min-height: var(--xrk-collapse-header-height);
   display: -webkit-box;
   display: -webkit-flex;
@@ -20001,7 +20256,7 @@
       -ms-user-select: none;
           user-select: none;
 }
-.base-layout-menu .sub-menu[data-v-1bea9a2a]::before {
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]::before {
   content: "";
   width: 3px;
   height: 3px;
@@ -20013,7 +20268,7 @@
       -ms-flex-negative: 0;
           flex-shrink: 0;
 }
-.base-layout-menu .sub-menu[data-v-1bea9a2a]::after {
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]::after {
   content: "";
   width: 3px;
   height: 100%;
@@ -20027,20 +20282,100 @@
   -webkit-transition: all 0.15s;
   transition: all 0.15s;
 }
-.base-layout-menu .sub-menu[data-v-1bea9a2a]:hover, .base-layout-menu .sub-menu.active[data-v-1bea9a2a] {
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]:hover, .base-layout-menu .main-menu .sub-menu.active[data-v-1bea9a2a] {
   color: var(--xrk-color-primary);
   background-color: var(--xrk-color-primary-light-9);
   -webkit-transition: all 0.15s;
   transition: all 0.15s;
 }
-.base-layout-menu .sub-menu[data-v-1bea9a2a]:hover::before, .base-layout-menu .sub-menu.active[data-v-1bea9a2a]::before {
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]:hover::before, .base-layout-menu .main-menu .sub-menu.active[data-v-1bea9a2a]::before {
   background-color: var(--xrk-color-primary);
 }
-.base-layout-menu .sub-menu[data-v-1bea9a2a]:hover::after, .base-layout-menu .sub-menu.active[data-v-1bea9a2a]::after {
+.base-layout-menu .main-menu .sub-menu[data-v-1bea9a2a]:hover::after, .base-layout-menu .main-menu .sub-menu.active[data-v-1bea9a2a]::after {
   opacity: 1;
   -webkit-transform: translateX(0);
           transform: translateX(0);
 }
+.base-layout-menu .sub-menus[data-v-1bea9a2a] {
+  position: absolute;
+  width: var(--base-layout-menu-sub-width, 150px);
+  height: 100%;
+  overflow: auto;
+  background-color: var(--xrk-fill-color-lighter);
+  top: 0;
+  right: 0;
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
+  z-index: 9;
+  opacity: 0;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  padding: 21px 0;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+.base-layout-menu .sub-menus.active[data-v-1bea9a2a] {
+  pointer-events: initial;
+  opacity: 1;
+}
+.base-layout-menu .sub-menus .content[data-v-1bea9a2a] {
+  overflow: auto;
+}
+.base-layout-menu .sub-menus .content .menu + .menu[data-v-1bea9a2a] {
+  margin-top: 48px;
+}
+.base-layout-menu .sub-menus .content .menu .name[data-v-1bea9a2a] {
+  font-size: var(--xrk-font-size-extra-small);
+  color: var(--xrk-text-color-disabled);
+  padding-bottom: var(--xrk-font-size-extra-small);
+  border-bottom: 1px solid #e5e5e5;
+  margin: 0 10px;
+  margin-bottom: var(--xrk-font-size-extra-small);
+  pointer-events: none;
+}
+.base-layout-menu .sub-menus .content .menu .name.no-child[data-v-1bea9a2a] {
+  cursor: pointer;
+  pointer-events: initial;
+}
+.base-layout-menu .sub-menus .content .menu .sub-menu[data-v-1bea9a2a] {
+  padding: 3px 10px;
+  min-height: 28px;
+  position: relative;
+  cursor: pointer;
+  font-size: var(--xrk-font-size-base);
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.base-layout-menu .sub-menus .content .menu .sub-menu[data-v-1bea9a2a]::after {
+  content: "";
+  width: 2px;
+  height: 100%;
+  background-color: var(--xrk-color-primary);
+  position: absolute;
+  left: 0;
+  top: 0;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
+}
+.base-layout-menu .sub-menus .content .menu .sub-menu[data-v-1bea9a2a]:hover, .base-layout-menu .sub-menus .content .menu .sub-menu.active[data-v-1bea9a2a] {
+  color: var(--xrk-color-primary);
+  background-color: var(--xrk-color-primary-light-9);
+  -webkit-transition: all 0.15s;
+  transition: all 0.15s;
+}
+.base-layout-menu .sub-menus .content .menu .sub-menu[data-v-1bea9a2a]:hover::after, .base-layout-menu .sub-menus .content .menu .sub-menu.active[data-v-1bea9a2a]::after {
+  -webkit-transform: translateX(0);
+          transform: translateX(0);
+}
 .base-layout-main[data-v-3f66cd84] {
   width: var(--base-layout-main-width, 100vw);
   height: var(--base-layout-main-height, 100vh);
@@ -20067,7 +20402,7 @@
       -ms-flex-positive: 1;
           flex-grow: 1;
   width: 100%;
-  background-color: var(--base-layout-main-content, #f3f3f3);
+  background-color: var(--base-layout-main-content, #e3e6eb);
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;