@sdata/web-vue 1.6.0 → 1.7.0

package/es/input-number/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -50,16 +51,14 @@
   background-color: var(--color-fill-2);
   cursor: not-allowed;
 }
-.sd-input-number-step-button:disabled:hover,
-.sd-input-number-step-button:disabled:active {
+.sd-input-number-step-button:disabled:hover, .sd-input-number-step-button:disabled:active {
   background-color: var(--color-fill-2);
   border-color: var(--color-neutral-3);
 }
 .sd-input-number .sd-input-wrapper {
   position: relative;
 }
-.sd-input-number-prefix,
-.sd-input-number-suffix {
+.sd-input-number-prefix, .sd-input-number-suffix {
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
 }
 .sd-input-number-mode-embed .sd-input-number-step {
@@ -90,24 +89,20 @@
 .sd-input-number-mode-embed .sd-input-suffix-has-feedback .sd-input-number-step {
   right: 30px;
 }
-.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):hover .sd-input-suffix:has(.sd-input-number-suffix),
-.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):focus-within .sd-input-suffix:has(.sd-input-number-suffix) {
+.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):hover .sd-input-suffix:has(.sd-input-number-suffix), .sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):focus-within .sd-input-suffix:has(.sd-input-number-suffix) {
   padding-left: 4px;
 }
-.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):hover .sd-input-number-step,
-.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):focus-within .sd-input-number-step {
+.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):hover .sd-input-number-step, .sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):focus-within .sd-input-number-step {
   opacity: 1;
 }
-.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):hover .sd-input-number-suffix,
-.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):focus-within .sd-input-number-suffix {
+.sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):hover .sd-input-number-suffix, .sd-input-number-mode-embed:not(.sd-input-disabled):not(.sd-input-outer-disabled):focus-within .sd-input-number-suffix {
   opacity: 0;
   pointer-events: none;
 }
-.sd-input-number-mode-embed.sd-input-wrapper:not(.sd-input-focus) .sd-input-number-step-button:not( .sd-input-number-step-button-disabled):hover {
+.sd-input-number-mode-embed.sd-input-wrapper:not(.sd-input-focus) .sd-input-number-step-button:not(.sd-input-number-step-button-disabled):hover {
   background-color: var(--color-fill-4);
 }
-.sd-input-number-mode-button .sd-input-prepend,
-.sd-input-number-mode-button .sd-input-append {
+.sd-input-number-mode-button .sd-input-prepend, .sd-input-number-mode-button .sd-input-append {
   padding: 0;
   border: none;
 }
@@ -130,4 +125,4 @@
 .sd-input-number-readonly .sd-input-number-step-button {
   color: var(--color-text-4);
   pointer-events: none;
-}
+}

package/es/input-number/style/index.d.ts

@@ -1,4 +1,4 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../input/style';
 import '../../button/style';
-import './index.less';
+import './index.scss';

package/es/input-number/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/input-number/style/index.scss

@@ -0,0 +1,167 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/input-number/style/token.scss' as *;
+@use '@components/input/style/token.scss' as *;
+
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+$input-number-prefix-cls: string.unquote('#{theme.$prefix}-input-number');
+
+.#{$input-number-prefix-cls} {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: $input-number-border-radius;
+
+  @mixin transition() {
+    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  }
+
+  &-step-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0;
+    color: $input-number-step-button-color;
+    background-color: $input-number-step-button-color-bg_default;
+    cursor: pointer;
+    user-select: none;
+
+    @include transition();
+
+    &:hover {
+      background-color: $input-number-step-button-color-bg_default_hover;
+      border-color: $input-number-step-button-color-bg_default_hover;
+    }
+
+    &:active {
+      background-color: $input-number-step-button-color-bg_default_active;
+      border-color: $input-number-step-button-color-bg_default_active;
+    }
+
+    &:disabled {
+      color: $input-number-step-button-color_disabled;
+      background-color: $input-number-step-button-color-bg_disabled;
+      cursor: not-allowed;
+
+      &:hover,
+      &:active {
+        background-color: $input-number-step-button-color-bg_disabled_hover;
+        border-color: $input-number-step-button-color-border;
+      }
+    }
+  }
+
+  .#{$input-prefix-cls}-wrapper {
+    position: relative;
+  }
+
+  &-prefix,
+  &-suffix {
+    @include transition();
+  }
+
+  // embed mode
+  &-mode-embed {
+    .#{$input-number-prefix-cls}-step {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      bottom: 4px;
+      width: 18px;
+      overflow: hidden;
+      border-radius: $input-number-step-layer-border-radius;
+      opacity: 0;
+
+      @include transition();
+
+      .#{$input-number-prefix-cls}-step-button {
+        width: 100%;
+        height: 50%;
+        font-size: 10px;
+        border: none;
+        border-color: $input-number-step-button-color-border;
+      }
+    }
+
+    .#{$input-prefix-cls}-suffix {
+      justify-content: flex-end;
+      min-width: 6px;
+    }
+
+    .#{$input-prefix-cls}-suffix-has-feedback {
+      min-width: 32px;
+
+      .#{$input-number-prefix-cls}-step {
+        right: 30px;
+      }
+    }
+
+    &:not(.#{$input-prefix-cls}-disabled):not(.#{$input-prefix-cls}-outer-disabled) {
+      &:hover,
+      &:focus-within {
+        // 修正 hove 时存在 suffix 但隐藏了，视觉上 padding 过大问题
+        .#{$input-prefix-cls}-suffix:has(.#{$input-number-prefix-cls}-suffix) {
+          padding-left: global.$spacing-2;
+        }
+
+        & .#{$input-number-prefix-cls}-step {
+          opacity: 1;
+        }
+
+        & .#{$input-number-prefix-cls}-suffix {
+          opacity: 0;
+          pointer-events: none;
+        }
+      }
+    }
+
+    // 修正 InputNumber 未激活 hover 时 StepButton 的 hover 背景色
+    &.#{$input-prefix-cls}-wrapper:not(.#{$input-prefix-cls}-focus) {
+      .#{$input-number-prefix-cls}-step-button:not(
+          .#{$input-number-prefix-cls}-step-button-disabled
+        ):hover {
+        background-color: $input-number-step-button-color-bg_default_active;
+      }
+    }
+  }
+
+  // button mode
+  &-mode-button {
+    .#{$input-prefix-cls} {
+      &-prepend,
+      &-append {
+        padding: 0;
+        border: none;
+      }
+
+      &-prepend .#{$input-number-prefix-cls}-step-button {
+        border-right: $input-border-addon-separator-width solid transparent;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &:not(#{&}:active) {
+          border-right-color: $input-number-step-button-color-border;
+        }
+      }
+
+      &-append .#{$input-number-prefix-cls}-step-button {
+        border-left: $input-border-addon-separator-width solid transparent;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        &:not(#{&}:active) {
+          border-left-color: $input-number-step-button-color-border;
+        }
+      }
+    }
+  }
+
+  &-readonly {
+    .#{$input-number-prefix-cls}-step-button {
+      color: $input-number-step-button-color_disabled;
+      pointer-events: none;
+    }
+  }
+}

package/es/input-number/style/token.scss

@@ -0,0 +1,53 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$input-number-border-radius: global.$radius-small;
+
+$input-number-step-layer-border-radius: 1px;
+
+$input-number-size-mini-step-button-width: global.$size-mini;
+
+$input-number-size-small-step-button-width: global.$size-small;
+
+$input-number-size-default-step-button-width: global.$size-default;
+
+$input-number-size-large-step-button-width: global.$size-large;
+
+$input-number-step-button-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$input-number-step-button-color_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$input-number-step-button-color-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+$input-number-step-button-color-bg_default: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+
+$input-number-step-button-color-bg_default_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+
+$input-number-step-button-color-bg_default_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4')
+);
+
+$input-number-step-button-color-bg_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+
+$input-number-step-button-color-bg_disabled_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+
+$input-number-step-button-color-bg_disabled_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);