bkui-vue 1.0.3-beta.26 → 1.0.3-beta.28

package/lib/tree/tree.css

@@ -1,25 +1,25 @@
-:where(.bk-F-scroll-x) {
+.bk-F-scroll-x {
   overflow-x: auto;
   scrollbar-color: #a0a0a0 transparent;
   scrollbar-width: thin;
 }
-:where(.bk-F-scroll-x)::-webkit-scrollbar {
+.bk-F-scroll-x::-webkit-scrollbar {
   height: 6px;
 }
-:where(.bk-F-scroll-y) {
+.bk-F-scroll-y {
   overflow-y: auto;
 }
-:where(.bk-F-scroll-y)::-webkit-scrollbar {
+.bk-F-scroll-y::-webkit-scrollbar {
   width: 4px;
 }
-:where(.bk-F-scroll-y)::-webkit-scrollbar-thumb {
+.bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-:where(.bk-virtual-render) {
+.bk-virtual-render {
   position: relative;
 }
-:where(.bk-virtual-render) .bk-virtual-content,
-:where(.bk-virtual-render).bk-virtual-content {
+.bk-virtual-render .bk-virtual-content,
+.bk-virtual-render.bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -27,15 +27,15 @@
   width: 100%;
   height: 100%;
 }
-:where(.bk-virtual-render) .bk-virtual-section {
+.bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;
 }
-:where(.bk-checkbox-group) {
+.bk-checkbox-group {
   display: inline-flex;
   letter-spacing: normal;
 }
-:where(.bk-checkbox) {
+.bk-checkbox {
   display: inline-flex;
   justify-self: center;
   align-items: center;
@@ -45,19 +45,19 @@
   cursor: pointer;
   user-select: none;
 }
-:where(.bk-checkbox) ~ .bk-checkbox {
+.bk-checkbox ~ .bk-checkbox {
   margin-left: 24px;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input {
+.bk-checkbox.is-checked .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input.small::after {
+.bk-checkbox.is-checked .bk-checkbox-input.small::after {
   width: 3px;
   height: 6px;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input::after {
+.bk-checkbox.is-checked .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -70,16 +70,16 @@
   transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
   transform-origin: center;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input {
+.bk-checkbox.is-indeterminated .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input.small::after {
+.bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
   width: 6px;
   height: 2px;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input::after {
+.bk-checkbox.is-indeterminated .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -91,31 +91,31 @@
   content: '';
   transform: translate(-50%, -50%);
 }
-:where(.bk-checkbox).is-disabled {
+.bk-checkbox.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-:where(.bk-checkbox).is-disabled .bk-checkbox-input {
+.bk-checkbox.is-disabled .bk-checkbox-input {
   background: #fafbfd;
   border-color: #dcdee5;
 }
-:where(.bk-checkbox).is-disabled .bk-checkbox-input::after {
+.bk-checkbox.is-disabled .bk-checkbox-input::after {
   background: #dcdee5;
 }
-:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input {
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
   background: #a3c5fd;
   border-color: #a3c5fd;
 }
-:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input::after {
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: #a3c5fd;
 }
-:where(.bk-checkbox).is-prechecking {
+.bk-checkbox.is-prechecking {
   position: relative;
 }
-:where(.bk-checkbox).is-prechecking .bk-checkbox-input {
+.bk-checkbox.is-prechecking .bk-checkbox-input {
   visibility: hidden;
 }
-:where(.bk-checkbox-input) {
+.bk-checkbox-input {
   position: relative;
   display: inline-block;
   width: 16px;
@@ -124,11 +124,11 @@
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
-:where(.bk-checkbox-input).small {
+.bk-checkbox-input.small {
   width: 14px;
   height: 14px;
 }
-:where(.bk-checkbox-original) {
+.bk-checkbox-original {
   position: absolute;
   top: 0;
   left: 0;
@@ -136,27 +136,27 @@
   width: 0;
   height: 0;
 }
-:where(.bk-checkbox-label) {
+.bk-checkbox-label {
   display: inline-block;
   margin-left: 6px;
   vertical-align: middle;
 }
-:where(.bk-checkbox-checking) {
+.bk-checkbox-checking {
   position: absolute;
   font-size: 16px;
   color: #3a84ff;
   animation: loading 1s linear infinite;
 }
-:where(.bk-tree) {
+.bk-tree {
   font-size: 14px;
 }
-:where(.bk-tree) .bk-node-row {
+.bk-tree .bk-node-row {
   padding-left: calc(var(--offset-left));
 }
-:where(.bk-tree) .bk-node-row.is-selected {
+.bk-tree .bk-node-row.is-selected {
   background-color: #ebf2ff;
 }
-:where(.bk-tree) .bk-tree-node {
+.bk-tree-node {
   position: relative;
   display: flex;
   height: var(--lineHeight);
@@ -165,10 +165,10 @@
   cursor: pointer;
   align-items: center;
 }
-:where(.bk-tree) .bk-tree-node:not(.is-root) {
-  margin-left: calc(var(--depth) * var(--indent));
+.bk-tree-node:not(.is-root) {
+  margin-left: calc(var(--depth)*var(--indent));
 }
-:where(.bk-tree) .bk-tree-node:not(.is-root).level-line::before {
+.bk-tree-node:not(.is-root).level-line::before {
   position: absolute;
   top: calc(50% + 1px);
   left: calc(0px - var(--indent) + 6px);
@@ -179,10 +179,10 @@
   border-bottom: var(--level-line);
   content: '';
 }
-:where(.bk-tree) .bk-tree-node.is-open .bk-node-action {
+.bk-tree-node.is-open .bk-node-action {
   color: #63656e;
 }
-:where(.bk-tree) .bk-tree-node .node-virtual-line {
+.bk-tree-node .node-virtual-line {
   position: absolute;
   top: -12px;
   bottom: 50%;
@@ -191,44 +191,44 @@
   width: 0;
   border-left: var(--level-line);
 }
-:where(.bk-tree) .bk-tree-node .bk-node-prefix {
+.bk-tree-node .bk-node-prefix {
   display: flex;
   width: 14px;
   height: 14px;
   align-items: center;
   justify-content: center;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-action {
+.bk-tree-node .bk-node-action {
   margin-right: 6px;
   color: #979ba5;
 }
-:where(.bk-tree) .bk-tree-node .bk-tree-icon {
+.bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-content {
+.bk-tree-node .bk-node-content {
   display: flex;
   flex: 1;
   align-items: center;
   min-width: 0;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-content .bk-checkbox {
+.bk-tree-node .bk-node-content .bk-checkbox {
   margin: 0;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-content .bk-checkbox .bk-checkbox-input {
+.bk-tree-node .bk-node-content .bk-checkbox .bk-checkbox-input {
   margin: 0;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-content .bk-node-text {
+.bk-tree-node .bk-node-content .bk-node-text {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:where(.bk-tree) .bk-tree-drop-active {
+.bk-tree-drop-active {
   background: #f5f7fa;
 }
-:where(.bk-tree) .bk-tree-drop-disabled {
+.bk-tree-drop-disabled {
   background: #ffd5d5;
 }
-:where(.bk-tree) .bk-tree-drop-disabled .bk-tree-node {
+.bk-tree-drop-disabled .bk-tree-node {
   cursor: no-drop;
 }

package/lib/tree/tree.less

@@ -3,7 +3,7 @@
 @import '../virtual-render/virtual-render.less';
 @import '../checkbox/checkbox.less';
 
-:where(.@{bk-prefix}-tree) {
+.@{bk-prefix}-tree {
   font-size: 14px;
 
   .@{bk-prefix}-node-row {
@@ -14,7 +14,7 @@
     }
   }
 
-  .@{bk-prefix}-tree-node {
+  &-node {
     position: relative;
     display: flex;
     height: var(--lineHeight);
@@ -24,7 +24,7 @@
     align-items: center;
 
     &:not(.is-root) {
-      margin-left: calc(var(--depth) * var(--indent));
+      margin-left: calc(var(--depth)*var(--indent));
 
       &.level-line {
         &::before {
@@ -97,17 +97,18 @@
     }
   }
 
-  .@{bk-prefix}-tree-drop-active {
+  &-drop-active {
     background: #f5f7fa;
   }
 
-  .@{bk-prefix}-tree-drop-disabled {
+  &-drop-disabled {
     background: #ffd5d5;
     .@{bk-prefix}-tree-node {
       cursor: no-drop;
     }
   }
 
-  .@{bk-prefix}-tree-drag-disabled {
+  &-drag-disabled{
+
   }
 }

package/lib/tree/tree.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
   --line-height-base: 16px;
   --line-height-medium: 16px;
   --line-height-large: 18px;
-  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656e;
+  --table-body-font-color: #63656E;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,28 +127,28 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-:where(.bk-F-scroll-x) {
+.bk-F-scroll-x {
   overflow-x: auto;
   scrollbar-color: #a0a0a0 transparent;
   scrollbar-width: thin;
 }
-:where(.bk-F-scroll-x)::-webkit-scrollbar {
+.bk-F-scroll-x::-webkit-scrollbar {
   height: 6px;
 }
-:where(.bk-F-scroll-y) {
+.bk-F-scroll-y {
   overflow-y: auto;
 }
-:where(.bk-F-scroll-y)::-webkit-scrollbar {
+.bk-F-scroll-y::-webkit-scrollbar {
   width: 4px;
 }
-:where(.bk-F-scroll-y)::-webkit-scrollbar-thumb {
+.bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
-:where(.bk-virtual-render) {
+.bk-virtual-render {
   position: relative;
 }
-:where(.bk-virtual-render) .bk-virtual-content,
-:where(.bk-virtual-render).bk-virtual-content {
+.bk-virtual-render .bk-virtual-content,
+.bk-virtual-render.bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -156,15 +156,15 @@
   width: 100%;
   height: 100%;
 }
-:where(.bk-virtual-render) .bk-virtual-section {
+.bk-virtual-render .bk-virtual-section {
   width: 1px;
   background: transparent;
 }
-:where(.bk-checkbox-group) {
+.bk-checkbox-group {
   display: inline-flex;
   letter-spacing: normal;
 }
-:where(.bk-checkbox) {
+.bk-checkbox {
   display: inline-flex;
   justify-self: center;
   align-items: center;
@@ -174,19 +174,19 @@
   cursor: pointer;
   user-select: none;
 }
-:where(.bk-checkbox) ~ .bk-checkbox {
+.bk-checkbox ~ .bk-checkbox {
   margin-left: 24px;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input {
+.bk-checkbox.is-checked .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input.small::after {
+.bk-checkbox.is-checked .bk-checkbox-input.small::after {
   width: 3px;
   height: 6px;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input::after {
+.bk-checkbox.is-checked .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -199,16 +199,16 @@
   transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
   transform-origin: center;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input {
+.bk-checkbox.is-indeterminated .bk-checkbox-input {
   background: #3a84ff;
   border-color: #3a84ff;
   transition: all 0.1s;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input.small::after {
+.bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
   width: 6px;
   height: 2px;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input::after {
+.bk-checkbox.is-indeterminated .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -220,31 +220,31 @@
   content: '';
   transform: translate(-50%, -50%);
 }
-:where(.bk-checkbox).is-disabled {
+.bk-checkbox.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-:where(.bk-checkbox).is-disabled .bk-checkbox-input {
+.bk-checkbox.is-disabled .bk-checkbox-input {
   background: #fafbfd;
   border-color: #dcdee5;
 }
-:where(.bk-checkbox).is-disabled .bk-checkbox-input::after {
+.bk-checkbox.is-disabled .bk-checkbox-input::after {
   background: #dcdee5;
 }
-:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input {
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
   background: #a3c5fd;
   border-color: #a3c5fd;
 }
-:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input::after {
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: #a3c5fd;
 }
-:where(.bk-checkbox).is-prechecking {
+.bk-checkbox.is-prechecking {
   position: relative;
 }
-:where(.bk-checkbox).is-prechecking .bk-checkbox-input {
+.bk-checkbox.is-prechecking .bk-checkbox-input {
   visibility: hidden;
 }
-:where(.bk-checkbox-input) {
+.bk-checkbox-input {
   position: relative;
   display: inline-block;
   width: 16px;
@@ -253,11 +253,11 @@
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
-:where(.bk-checkbox-input).small {
+.bk-checkbox-input.small {
   width: 14px;
   height: 14px;
 }
-:where(.bk-checkbox-original) {
+.bk-checkbox-original {
   position: absolute;
   top: 0;
   left: 0;
@@ -265,27 +265,27 @@
   width: 0;
   height: 0;
 }
-:where(.bk-checkbox-label) {
+.bk-checkbox-label {
   display: inline-block;
   margin-left: 6px;
   vertical-align: middle;
 }
-:where(.bk-checkbox-checking) {
+.bk-checkbox-checking {
   position: absolute;
   font-size: 16px;
   color: #3a84ff;
   animation: loading 1s linear infinite;
 }
-:where(.bk-tree) {
+.bk-tree {
   font-size: 14px;
 }
-:where(.bk-tree) .bk-node-row {
+.bk-tree .bk-node-row {
   padding-left: calc(var(--offset-left));
 }
-:where(.bk-tree) .bk-node-row.is-selected {
+.bk-tree .bk-node-row.is-selected {
   background-color: #ebf2ff;
 }
-:where(.bk-tree) .bk-tree-node {
+.bk-tree-node {
   position: relative;
   display: flex;
   height: var(--lineHeight);
@@ -294,10 +294,10 @@
   cursor: pointer;
   align-items: center;
 }
-:where(.bk-tree) .bk-tree-node:not(.is-root) {
-  margin-left: calc(var(--depth) * var(--indent));
+.bk-tree-node:not(.is-root) {
+  margin-left: calc(var(--depth)*var(--indent));
 }
-:where(.bk-tree) .bk-tree-node:not(.is-root).level-line::before {
+.bk-tree-node:not(.is-root).level-line::before {
   position: absolute;
   top: calc(50% + 1px);
   left: calc(0px - var(--indent) + 6px);
@@ -308,10 +308,10 @@
   border-bottom: var(--level-line);
   content: '';
 }
-:where(.bk-tree) .bk-tree-node.is-open .bk-node-action {
+.bk-tree-node.is-open .bk-node-action {
   color: #63656e;
 }
-:where(.bk-tree) .bk-tree-node .node-virtual-line {
+.bk-tree-node .node-virtual-line {
   position: absolute;
   top: -12px;
   bottom: 50%;
@@ -320,44 +320,44 @@
   width: 0;
   border-left: var(--level-line);
 }
-:where(.bk-tree) .bk-tree-node .bk-node-prefix {
+.bk-tree-node .bk-node-prefix {
   display: flex;
   width: 14px;
   height: 14px;
   align-items: center;
   justify-content: center;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-action {
+.bk-tree-node .bk-node-action {
   margin-right: 6px;
   color: #979ba5;
 }
-:where(.bk-tree) .bk-tree-node .bk-tree-icon {
+.bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-content {
+.bk-tree-node .bk-node-content {
   display: flex;
   flex: 1;
   align-items: center;
   min-width: 0;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-content .bk-checkbox {
+.bk-tree-node .bk-node-content .bk-checkbox {
   margin: 0;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-content .bk-checkbox .bk-checkbox-input {
+.bk-tree-node .bk-node-content .bk-checkbox .bk-checkbox-input {
   margin: 0;
 }
-:where(.bk-tree) .bk-tree-node .bk-node-content .bk-node-text {
+.bk-tree-node .bk-node-content .bk-node-text {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-:where(.bk-tree) .bk-tree-drop-active {
+.bk-tree-drop-active {
   background: #f5f7fa;
 }
-:where(.bk-tree) .bk-tree-drop-disabled {
+.bk-tree-drop-disabled {
   background: #ffd5d5;
 }
-:where(.bk-tree) .bk-tree-drop-disabled .bk-tree-node {
+.bk-tree-drop-disabled .bk-tree-node {
   cursor: no-drop;
 }