bkui-vue 0.0.2-table-refactor.9 → 0.0.3-beta.1

package/lib/steps/steps.css

@@ -32,7 +32,7 @@
 }
 .bk-steps .bk-step {
   position: relative;
-  margin-right: 8px;
+  margin-right: 16px;
   overflow: hidden;
   text-align: left;
   white-space: nowrap;
@@ -67,7 +67,7 @@
 .bk-steps .bk-step .bk-step-title {
   position: relative;
   display: inline-block;
-  padding-right: 8px;
+  padding-right: 16px;
   font-size: 14px;
   line-height: 24px;
   color: #63656e;
@@ -114,10 +114,12 @@
 .bk-steps .bk-step:last-child .bk-step-title::after {
   display: none;
 }
-.bk-steps .bk-step.done .bk-step-title,
-.bk-steps .bk-step.done .bk-step-description {
+.bk-steps .bk-step.done .bk-step-title {
   color: #63656e;
 }
+.bk-steps .bk-step.done .bk-step-description {
+  color: #979ba5;
+}
 .bk-steps .bk-step.done .bk-steps-icon {
   margin-bottom: 3px;
   font-size: 22px;
@@ -125,6 +127,12 @@
 .bk-steps .bk-step.done .bk-step-iconerror .bk-steps-icon {
   font-size: 14px;
 }
+.bk-steps .bk-step.done:has(+ .current.is-error) .bk-step-title::after,
+.bk-steps .bk-step.done:has( + .current.bk-step-error) .bk-step-title::after,
+.bk-steps .bk-step.done:has(+ .current.is-error) .bk-step-indicator::after,
+.bk-steps .bk-step.done:has( + .current.bk-step-error) .bk-step-indicator::after {
+  background-image: linear-gradient(to right, #ea3636 50%, transparent 0%);
+}
 .bk-steps .bk-step.current .bk-step-number,
 .bk-steps .bk-step.current .bk-step-icon,
 .bk-steps .bk-step.current .bk-step-text {
@@ -142,11 +150,11 @@
 .bk-steps .bk-step.current.bk-step-error .bk-step-description {
   color: #ea3636;
 }
-.bk-steps .bk-step.isError .bk-step-indicator {
+.bk-steps .bk-step.is-error .bk-step-indicator {
   background-color: #ea3636 !important;
   border-color: #ea3636 !important;
 }
-.bk-steps .bk-step.isError .bk-step-content .bk-step-title {
+.bk-steps .bk-step.is-error .bk-step-content .bk-step-title {
   color: #ea3636 !important;
 }
 .bk-steps-primary .bk-step.done .bk-step-number,
@@ -264,6 +272,10 @@
   background-size: 1px 6px;
   content: '';
 }
+.bk-steps-vertical .bk-step.done:has(+ .current.is-error)::after,
+.bk-steps-vertical .bk-step.done:has( + .current.bk-step-error)::after {
+  background-image: linear-gradient(#ea3636 50%, transparent 0%);
+}
 .bk-steps-vertical .bk-step .bk-step-title {
   display: flex;
   height: 100%;

package/lib/steps/steps.d.ts

@@ -28,7 +28,7 @@ declare const stepsProps: {
     theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
         default: "success" | "warning" | "danger" | "primary";
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     curStep: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -68,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
         default: "success" | "warning" | "danger" | "primary";
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     curStep: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -110,7 +110,7 @@ declare const _default: import("vue").DefineComponent<{
     theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
         default: "success" | "warning" | "danger" | "primary";
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     curStep: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {

package/lib/steps/steps.less

@@ -54,7 +54,7 @@
 
   .@{bk-prefix}-step {
     position: relative;
-    margin-right: 8px;
+    margin-right: 16px;
     overflow: hidden;
     text-align: left;
     white-space: nowrap;
@@ -96,7 +96,7 @@
     .@{bk-prefix}-step-title {
       position: relative;
       display: inline-block;
-      padding-right: 8px;
+      padding-right: 16px;
       font-size: 14px;
       line-height: 24px;
       color: #63656e;
@@ -139,10 +139,12 @@
     }
 
     &.done {
-      .@{bk-prefix}-step-title,
-      .@{bk-prefix}-step-description {
+      .@{bk-prefix}-step-title {
         color: @default-color;
       }
+      .@{bk-prefix}-step-description {
+        color: #979ba5;
+      }
 
       .@{bk-prefix}-steps-icon {
         margin-bottom: 3px;
@@ -154,6 +156,16 @@
           font-size: 14px;
         }
       }
+
+      &:has(+ .current.is-error),
+      &:has(+ .current.@{bk-prefix}-step-error) {
+        .@{bk-prefix}-step-title,
+        .@{bk-prefix}-step-indicator {
+          &::after {
+            background-image: linear-gradient(to right, @danger-color 50%, transparent 0%);
+          }
+        }
+      }
     }
 
     &.current {
@@ -181,7 +193,7 @@
       }
     }
 
-    &.isError {
+    &.is-error {
       .@{bk-prefix}-step-indicator {
         background-color: @danger-color !important;
         border-color: @danger-color !important;
@@ -288,6 +300,15 @@
         content: '';
       }
 
+      &.done {
+        &:has(+ .current.is-error),
+        &:has(+ .current.@{bk-prefix}-step-error) {
+          &::after {
+            background-image: linear-gradient(@danger-color 50%, transparent 0%);
+          }
+        }
+      }
+
       .@{bk-prefix}-step-title {
         display: flex;
         height: 100%;

package/lib/steps/steps.variable.css

@@ -12,6 +12,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -21,6 +22,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -33,7 +37,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -50,7 +54,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;
@@ -154,7 +158,7 @@
 }
 .bk-steps .bk-step {
   position: relative;
-  margin-right: 8px;
+  margin-right: 16px;
   overflow: hidden;
   text-align: left;
   white-space: nowrap;
@@ -189,7 +193,7 @@
 .bk-steps .bk-step .bk-step-title {
   position: relative;
   display: inline-block;
-  padding-right: 8px;
+  padding-right: 16px;
   font-size: 14px;
   line-height: 24px;
   color: #63656e;
@@ -236,10 +240,12 @@
 .bk-steps .bk-step:last-child .bk-step-title::after {
   display: none;
 }
-.bk-steps .bk-step.done .bk-step-title,
-.bk-steps .bk-step.done .bk-step-description {
+.bk-steps .bk-step.done .bk-step-title {
   color: var(--default-color);
 }
+.bk-steps .bk-step.done .bk-step-description {
+  color: #979ba5;
+}
 .bk-steps .bk-step.done .bk-steps-icon {
   margin-bottom: 3px;
   font-size: 22px;
@@ -247,6 +253,12 @@
 .bk-steps .bk-step.done .bk-step-iconerror .bk-steps-icon {
   font-size: 14px;
 }
+.bk-steps .bk-step.done:has(+ .current.is-error) .bk-step-title::after,
+.bk-steps .bk-step.done:has( + .current.bk-step-error) .bk-step-title::after,
+.bk-steps .bk-step.done:has(+ .current.is-error) .bk-step-indicator::after,
+.bk-steps .bk-step.done:has( + .current.bk-step-error) .bk-step-indicator::after {
+  background-image: linear-gradient(to right, var(--danger-color) 50%, transparent 0%);
+}
 .bk-steps .bk-step.current .bk-step-number,
 .bk-steps .bk-step.current .bk-step-icon,
 .bk-steps .bk-step.current .bk-step-text {
@@ -264,11 +276,11 @@
 .bk-steps .bk-step.current.bk-step-error .bk-step-description {
   color: var(--danger-color);
 }
-.bk-steps .bk-step.isError .bk-step-indicator {
+.bk-steps .bk-step.is-error .bk-step-indicator {
   background-color: var(--danger-color) !important;
   border-color: var(--danger-color) !important;
 }
-.bk-steps .bk-step.isError .bk-step-content .bk-step-title {
+.bk-steps .bk-step.is-error .bk-step-content .bk-step-title {
   color: var(--danger-color) !important;
 }
 .bk-steps-primary .bk-step.done .bk-step-number,
@@ -386,6 +398,10 @@
   background-size: 1px 6px;
   content: '';
 }
+.bk-steps-vertical .bk-step.done:has(+ .current.is-error)::after,
+.bk-steps-vertical .bk-step.done:has( + .current.bk-step-error)::after {
+  background-image: linear-gradient(var(--danger-color) 50%, transparent 0%);
+}
 .bk-steps-vertical .bk-step .bk-step-title {
   display: flex;
   height: 100%;

package/lib/styles/index.d.ts

@@ -56,3 +56,4 @@ import '../config-provider/config-provider.less';
 import '../pop-confirm/pop-confirm.less';
 import '../image/image.less';
 import '../image/image-viewer.less';
+import '../overflow-title/overflow-title.less';

package/lib/styles/mixins/animate.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;

package/lib/styles/mixins/popper.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;

package/lib/styles/mixins/scroll.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;

package/lib/styles/reset.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;

package/lib/styles/themes/themes.less

@@ -12,6 +12,7 @@
 @white-color: white;
 @whitesmoke-color: #fafbfd;
 @disable-color: #dcdee5;
+@disable-bg-color: #f9fafd;
 
 @font-size-base: 12px;
 @font-size-medium: 14px;
@@ -26,6 +27,10 @@
 @component-size-base: 32px;
 @component-size-large: 40px;
 
+@component-size-small-padding: 0 12px;
+@component-size-base-padding: 0 14px;
+@component-size-large-padding: 0 16px;
+
 @border-width-base: 1px;
 @border-style-base: solid;
 @border-radius-base: 2px;
@@ -41,10 +46,9 @@
 @input-border-color: @light-gray;
 @input-broder-radius: 3px;
 @input-shadow-color: #a3c5fd;
-@input-horizontal-padding: 10px;
+@input-horizontal-padding: 8px;
 @input-block-color: #f5f7fa;
 @input-block-hover-color: #eaebf0;
-
 @input-icon-size: @font-size-medium;
 @input-maxlength-color: #979ba5;
 
@@ -63,7 +67,7 @@
 
 // radio theme
 @radio-font-color: #63656e;
-@radio-active-color: #5594fa;
+@radio-active-color: #3a84ff;
 @radio-hover-border-color: #979ba5;
 @radio-disabled-border: #dcdee5;
 @radio-disabled-font-color: #c4c6cc;