bkui-vue 2.0.1-beta.11 → 2.0.1-beta.111

package/lib/search-select/search-select.less

@@ -17,11 +17,11 @@
   }
 
   .div-input {
+    flex: 1 1 auto;
     height: 100%;
     padding: 5px 0;
     line-height: 20px;
     word-break: break-all;
-    flex: 1 1 auto;
 
     &:focus {
       outline: none;
@@ -29,21 +29,21 @@
   }
 
   &-container {
+    box-sizing: border-box;
     // position: relative;
     display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
     min-height: 30px;
     overflow: hidden;
     font-size: 12px;
     color: @search-select-font-color;
+    resize: none;
     border: @border-width-base @border-style-base @border-style-color;
     border-radius: @border-radius-base;
     outline: none;
-    box-sizing: border-box;
     transition: border 0.2s linear;
-    resize: none;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
 
     &.is-focus {
       overflow: auto;
@@ -55,8 +55,8 @@
     }
 
     .search-prefix {
-      flex: 0 0 auto;
       display: flex;
+      flex: 0 0 auto;
       align-items: center;
       height: 100%;
     }
@@ -64,6 +64,9 @@
     .search-container {
       position: relative;
       display: flex;
+      flex: 1;
+      flex-wrap: wrap;
+      align-items: center;
       max-width: calc(100% - 42px);
       min-height: 26px;
       padding: 0 2px;
@@ -71,13 +74,12 @@
       overflow: visible;
       text-align: left;
       transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      flex: 1;
-      flex-wrap: wrap;
-      align-items: center;
 
       &-selected {
         position: relative;
         display: inline-block;
+        flex: 0 0 auto;
+        align-self: center;
         max-width: 99%;
         padding-left: 8px;
         margin: 0 0 4px 6px;
@@ -85,8 +87,6 @@
         color: @search-select-font-color;
         background: #f0f1f5;
         border-radius: 2px;
-        flex: 0 0 auto;
-        align-self: center;
 
         &.hidden-selected {
           visibility: hidden;
@@ -115,6 +115,8 @@
           top: 4px;
           right: 3px;
           display: inline-flex;
+          align-items: center;
+          justify-content: center;
           width: 14px;
           height: 14px;
           overflow: hidden;
@@ -123,24 +125,22 @@
           color: #979ba5;
           text-align: center;
           cursor: pointer;
-          align-items: center;
-          justify-content: center;
         }
       }
 
       &-input {
         position: relative;
         display: block;
-        height: 100%;
+        flex: 1;
         min-width: 40px;
+        height: 100%;
         padding: 0 10px;
         margin-top: -4px;
         color: @search-select-font-color;
         border: none;
-        flex: 1;
 
         .input-before {
-          &:before {
+          &::after {
             color: @search-select-placeholder-color;
             content: attr(data-placeholder);
           }
@@ -158,13 +158,13 @@
       .selected-input {
         position: relative;
         display: flex;
-        height: 100%;
+        align-items: center;
         min-width: 40px;
+        height: 100%;
         padding: 0 10px;
         margin-top: -4px;
         color: @search-select-font-color;
         border: none;
-        align-items: center;
       }
     }
 
@@ -173,19 +173,19 @@
       top: 0;
       right: 0;
       display: flex;
-      color: @light-gray;
       align-items: center;
+      color: @light-gray;
       .search-prefix();
 
       .search-clear {
         display: flex;
+        align-items: center;
+        justify-content: center;
         width: 12px;
         height: 12px;
         margin-right: 6px;
         font-size: 12px;
         color: @light-gray;
-        align-items: center;
-        justify-content: center;
 
         &:hover {
           color: #979ba5;
@@ -195,11 +195,11 @@
 
       .search-nextfix-icon {
         display: flex;
+        align-items: center;
+        justify-content: center;
         margin-right: 8px;
         font-size: 16px;
         transition: color 0.2s linear;
-        align-items: center;
-        justify-content: center;
 
         &.is-focus {
           .focus();
@@ -221,31 +221,31 @@
 
   &-tips {
     display: flex;
+    align-items: center;
     margin-top: 5px;
     font-size: 12px;
     line-height: 16px;
     color: @search-select-message-color;
-    align-items: center;
 
     .select-tips {
       display: flex;
+      align-items: center;
+      justify-content: center;
       width: 16px;
       height: 16px;
       margin-right: 5px;
       overflow: hidden;
       font-size: 16px;
-      align-items: center;
-      justify-content: center;
     }
   }
 }
 
 .@{search-select-name}-menu {
   display: flex;
+  flex-direction: column;
   min-width: 200px;
   font-size: 12px;
   color: @search-select-font-color;
-  flex-direction: column;
 
   .menu-list-mixin {
     display: flex;
@@ -254,16 +254,16 @@
 
   .menu-item-mixin {
     display: flex;
+    flex: 0 0 32px;
+    align-items: center;
     width: 100%;
-    height: 32px;
     max-width: 500px;
+    height: 32px;
     padding: 0 8px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     outline: none;
-    align-items: center;
-    flex: 0 0 32px;
 
     &:hover {
       cursor: pointer;
@@ -300,17 +300,17 @@
 
     .menu-condition {
       display: flex;
+      flex: 0 0 64px;
+      flex-direction: column;
       width: 64px;
       padding: 8px 8px 2px 10px;
       background-color: #f5f7fa;
-      flex-direction: column;
-      flex: 0 0 64px;
 
       &-title {
         display: flex;
+        align-items: center;
         margin-bottom: 12px;
         line-height: 24px;
-        align-items: center;
       }
       .@{bk-prefix}-radio {
         width: 50px;
@@ -324,12 +324,12 @@
 
   .menu-content {
     display: flex;
-    max-height: 240px;
+    flex: 1;
+    flex-direction: column;
+    // max-height: 240px;
     padding: 4px 0;
     margin: 0;
     overflow: auto;
-    flex-direction: column;
-    flex: 1;
 
     .menu-item {
       .menu-item-mixin();
@@ -365,25 +365,25 @@
 
       .menu-name {
         display: flex;
-        max-width: 100px;
+        align-items: center;
+        // max-width: 100px;
         margin-right: 5px;
         font-weight: bold;
         color: @search-select-font-color;
-        align-items: center;
       }
     }
   }
 
   .menu-footer {
     display: flex;
+    align-items: center;
     width: 100%;
     height: 32px;
     border-top: @border-width-base @border-style-base @search-select-menu-border-color;
-    align-items: center;
 
     &-btn {
-      flex: 1;
       display: flex;
+      flex: 1;
       align-items: center;
       justify-content: center;
       height: 100%;

package/lib/search-select/search-select.variable.css

@@ -110,6 +110,7 @@
   --date-picker-dropdown-bg: #fff;
   --table-bg-color: var(--white-color);
   --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
   --table-body-font-color: #63656E;
@@ -212,30 +213,30 @@
   border-color: #3a84ff !important;
 }
 .bk-search-select .div-input {
+  flex: 1 1 auto;
   height: 100%;
   padding: 5px 0;
   line-height: 20px;
   word-break: break-all;
-  flex: 1 1 auto;
 }
 .bk-search-select .div-input:focus {
   outline: none;
 }
 .bk-search-select-container {
+  box-sizing: border-box;
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
   min-height: 30px;
   overflow: hidden;
   font-size: 12px;
   color: #63656e;
+  resize: none;
   border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
-  box-sizing: border-box;
   transition: border 0.2s linear;
-  resize: none;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
 }
 .bk-search-select-container.is-focus {
   overflow: auto;
@@ -244,14 +245,17 @@
   border-color: #3a84ff !important;
 }
 .bk-search-select-container .search-prefix {
-  flex: 0 0 auto;
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   height: 100%;
 }
 .bk-search-select-container .search-container {
   position: relative;
   display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: center;
   max-width: calc(100% - 42px);
   min-height: 26px;
   padding: 0 2px;
@@ -259,13 +263,12 @@
   overflow: visible;
   text-align: left;
   transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  flex: 1;
-  flex-wrap: wrap;
-  align-items: center;
 }
 .bk-search-select-container .search-container-selected {
   position: relative;
   display: inline-block;
+  flex: 0 0 auto;
+  align-self: center;
   max-width: 99%;
   padding-left: 8px;
   margin: 0 0 4px 6px;
@@ -273,8 +276,6 @@
   color: #63656e;
   background: #f0f1f5;
   border-radius: 2px;
-  flex: 0 0 auto;
-  align-self: center;
 }
 .bk-search-select-container .search-container-selected.hidden-selected {
   visibility: hidden;
@@ -298,6 +299,8 @@
   top: 4px;
   right: 3px;
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   width: 14px;
   height: 14px;
   overflow: hidden;
@@ -306,21 +309,19 @@
   color: #979ba5;
   text-align: center;
   cursor: pointer;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-container .search-container-input {
   position: relative;
   display: block;
-  height: 100%;
+  flex: 1;
   min-width: 40px;
+  height: 100%;
   padding: 0 10px;
   margin-top: -4px;
   color: #63656e;
   border: none;
-  flex: 1;
 }
-.bk-search-select-container .search-container-input .input-before:before {
+.bk-search-select-container .search-container-input .input-before::after {
   color: #c4c6cc;
   content: attr(data-placeholder);
 }
@@ -332,33 +333,33 @@
 .bk-search-select-container .search-container .selected-input {
   position: relative;
   display: flex;
-  height: 100%;
+  align-items: center;
   min-width: 40px;
+  height: 100%;
   padding: 0 10px;
   margin-top: -4px;
   color: #63656e;
   border: none;
-  align-items: center;
 }
 .bk-search-select-container .search-nextfix {
   position: absolute;
   top: 0;
   right: 0;
   color: #c4c6cc;
-  flex: 0 0 auto;
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   height: 100%;
 }
 .bk-search-select-container .search-nextfix .search-clear {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 12px;
   height: 12px;
   margin-right: 6px;
   font-size: 12px;
   color: #c4c6cc;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-container .search-nextfix .search-clear:hover {
   color: #979ba5;
@@ -366,11 +367,11 @@
 }
 .bk-search-select-container .search-nextfix .search-nextfix-icon {
   display: flex;
+  align-items: center;
+  justify-content: center;
   margin-right: 8px;
   font-size: 16px;
   transition: color 0.2s linear;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-container .search-nextfix .search-nextfix-icon.is-focus {
   color: #3c96ff;
@@ -388,28 +389,28 @@
 }
 .bk-search-select-tips {
   display: flex;
+  align-items: center;
   margin-top: 5px;
   font-size: 12px;
   line-height: 16px;
   color: #ea3636;
-  align-items: center;
 }
 .bk-search-select-tips .select-tips {
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 16px;
   height: 16px;
   margin-right: 5px;
   overflow: hidden;
   font-size: 16px;
-  align-items: center;
-  justify-content: center;
 }
 .bk-search-select-menu {
   display: flex;
+  flex-direction: column;
   min-width: 200px;
   font-size: 12px;
   color: #63656e;
-  flex-direction: column;
 }
 .bk-search-select-menu .menu-list-mixin {
   display: flex;
@@ -417,16 +418,16 @@
 }
 .bk-search-select-menu .menu-item-mixin {
   display: flex;
+  flex: 0 0 32px;
+  align-items: center;
   width: 100%;
-  height: 32px;
   max-width: 500px;
+  height: 32px;
   padding: 0 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: none;
-  align-items: center;
-  flex: 0 0 32px;
 }
 .bk-search-select-menu .menu-item-mixin:hover {
   cursor: pointer;
@@ -446,16 +447,16 @@
 }
 .bk-search-select-menu .menu-header-item {
   display: flex;
+  flex: 0 0 32px;
+  align-items: center;
   width: 100%;
-  height: 32px;
   max-width: 500px;
+  height: 32px;
   padding: 0 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: none;
-  align-items: center;
-  flex: 0 0 32px;
 }
 .bk-search-select-menu .menu-header-item:hover {
   cursor: pointer;
@@ -475,17 +476,17 @@
 }
 .bk-search-select-menu .menu-content-wrapper .menu-condition {
   display: flex;
+  flex: 0 0 64px;
+  flex-direction: column;
   width: 64px;
   padding: 8px 8px 2px 10px;
   background-color: #f5f7fa;
-  flex-direction: column;
-  flex: 0 0 64px;
 }
 .bk-search-select-menu .menu-content-wrapper .menu-condition-title {
   display: flex;
+  align-items: center;
   margin-bottom: 12px;
   line-height: 24px;
-  align-items: center;
 }
 .bk-search-select-menu .menu-content-wrapper .menu-condition .bk-radio {
   width: 50px;
@@ -496,25 +497,24 @@
 }
 .bk-search-select-menu .menu-content {
   display: flex;
-  max-height: 240px;
+  flex: 1;
+  flex-direction: column;
   padding: 4px 0;
   margin: 0;
   overflow: auto;
-  flex-direction: column;
-  flex: 1;
 }
 .bk-search-select-menu .menu-content .menu-item {
   display: flex;
+  flex: 0 0 32px;
+  align-items: center;
   width: 100%;
-  height: 32px;
   max-width: 500px;
+  height: 32px;
   padding: 0 8px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   outline: none;
-  align-items: center;
-  flex: 0 0 32px;
   white-space: pre;
 }
 .bk-search-select-menu .menu-content .menu-item:hover {
@@ -549,22 +549,21 @@
 }
 .bk-search-select-menu .menu-content .menu-item .menu-name {
   display: flex;
-  max-width: 100px;
+  align-items: center;
   margin-right: 5px;
   font-weight: bold;
   color: #63656e;
-  align-items: center;
 }
 .bk-search-select-menu .menu-footer {
   display: flex;
+  align-items: center;
   width: 100%;
   height: 32px;
   border-top: 1px solid #dcdee5;
-  align-items: center;
 }
 .bk-search-select-menu .menu-footer-btn {
-  flex: 1;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
   height: 100%;