@tendaui/components 1.3.0 → 1.3.1

package/styles/components/input-number/_vars.scss

@@ -1,56 +1,56 @@
-@use "../../_vars.scss" as *;
-// 颜色
-$input-number-border-color: $border-level-2-color; // 数字输入框边框颜色
-$input-number-inner-color: $text-color-primary; // 数字输入框文字颜色
-$input-number-button-bg-color: transparent; // 数字输入框操作按钮背景颜色
-$input-number-right-button-bg-color: $bg-color-secondarycontainer; // 右侧数字输入框操作按钮背景颜色
-$input-number-right-button-hover-bg-color: $bg-color-component-hover; // 右侧数字输入框操作按钮背景颜色
-$input-number-button-border-color: $border-level-2-color; // 数字输入框操作按钮边框颜色
-$input-number-button-color: $text-color-disabled; // 数字输入框操作按钮图标颜色
-$input-number-right-bg-color: $bg-color-container; // 右侧调整数字输入框背景颜色
-$input-number-right-button-border-color: $border-level-2-color; // 右侧调整数字输入框操作按钮边框颜色
-$input-number-border-color-hover: $brand-color-hover; // 数字输入框hover边框颜色
-$input-number-right-border-color-hover: $brand-color-hover; // 数字输入框操作按钮hover边框颜色
-$input-number-button-color-hover: $brand-color; // 数字输入框操作按钮hover字体颜色
-$input-number-bg-color-disabled: $bg-color-component-disabled; // 数字输入区域disabled背景颜色
-$input-number-inner-color-disabled: $text-color-disabled; // 数字输入区域disabled文字颜色
-$input-number-button-color-disabled: $text-color-disabled; // 数字输入框操作按钮disabled图标颜色
-$input-number-button-bg-color-disabled: $bg-color-component-disabled; // 数字输入框操作按钮disabled背景颜色
-
-$input-number-text-color-tips: $text-color-placeholder;
-$input-number-text-color-success: $success-color;
-$input-number-text-color-warning: $warning-color;
-$input-number-text-color-error: $error-color;
-
-// 尺寸
-$input-number-width-s: 120px; // 数字输入组件宽度
-$input-number-width: 144px; // 数字输入组件宽度
-$input-number-width-l: 168px; // 数字输入组件宽度
-$input-number-button-width-s: $comp-size-xs; // 数字输入框操作按钮宽度
-$input-number-button-width: $comp-size-m; // 数字输入框操作按钮的宽度
-$input-number-button-width-l: $comp-size-xl; // 数字输入框操作按钮宽度
-$input-number-button-height-s: $comp-size-xs; // 数字输入框操作按钮高度
-$input-number-button-height: $comp-size-m; // 数字输入框操作按钮的高度
-$input-number-button-height-l: $comp-size-xl; // 数字输入框操作按钮高度
-$input-number-inner-height-s: $comp-size-xs; // 数字输入框高度
-$input-number-inner-height: $comp-size-m; // 数字输入框高度
-$input-number-inner-height-l: $comp-size-xl; // 数字输入框高度
-$input-number-right-width-s: 88px; // 右侧调整数字输入组件宽度
-$input-number-right-width: 96px; // 右侧调整数字输入组件宽度
-$input-number-right-width-l: 120px; // 右侧调整数字输入组件宽度
-$input-number-right-button-width: $comp-size-m; // 右侧调整数字输入框操作按钮宽度
-$input-number-right-button-width-l: $comp-size-xl; // 右侧调整数字输入框操作按钮宽度
-$input-number-button-column-height-s: calc(calc($comp-size-xs / 2) - 2px); //  右侧调整数字操作按钮的高度
-$input-number-button-column-height: calc(calc($comp-size-m / 2) - 2px); //  右侧调整数字操作按钮的高度
-$input-number-button-column-height-l: calc(calc($comp-size-xl / 2) - 2px); //  右侧调整数字操作按钮的高度
-$input-number-padding-horizontal-default: $comp-paddingLR-s;
-
-// 字号
-$input-number-font-size: $font-size-l; // 数字输入框操作按钮字号
-$input-number-font-size-s: $font-size-base; // 小尺寸数字输入框操作按钮字号
-$input-number-font-size-l: ($font-size * 1.8); // 大尺寸数字输入框操作按钮字号
-
-$input-number-right-font-size: $font-size-s; // 右侧调整数字输入框操作按钮字号
-$input-number-right-font-size-l: $font-size-l; // 大尺寸右侧调整数字输入框操作按钮字号
-
-$input-number-tips-font-size: $font-size-s;
+@use "../../_vars.scss" as *;
+// 颜色
+$input-number-border-color: $border-level-2-color; // 数字输入框边框颜色
+$input-number-inner-color: $text-color-primary; // 数字输入框文字颜色
+$input-number-button-bg-color: transparent; // 数字输入框操作按钮背景颜色
+$input-number-right-button-bg-color: $bg-color-secondarycontainer; // 右侧数字输入框操作按钮背景颜色
+$input-number-right-button-hover-bg-color: $bg-color-component-hover; // 右侧数字输入框操作按钮背景颜色
+$input-number-button-border-color: $border-level-2-color; // 数字输入框操作按钮边框颜色
+$input-number-button-color: $text-color-disabled; // 数字输入框操作按钮图标颜色
+$input-number-right-bg-color: $bg-color-container; // 右侧调整数字输入框背景颜色
+$input-number-right-button-border-color: $border-level-2-color; // 右侧调整数字输入框操作按钮边框颜色
+$input-number-border-color-hover: $brand-color-hover; // 数字输入框hover边框颜色
+$input-number-right-border-color-hover: $brand-color-hover; // 数字输入框操作按钮hover边框颜色
+$input-number-button-color-hover: $brand-color; // 数字输入框操作按钮hover字体颜色
+$input-number-bg-color-disabled: $bg-color-component-disabled; // 数字输入区域disabled背景颜色
+$input-number-inner-color-disabled: $text-color-disabled; // 数字输入区域disabled文字颜色
+$input-number-button-color-disabled: $text-color-disabled; // 数字输入框操作按钮disabled图标颜色
+$input-number-button-bg-color-disabled: $bg-color-component-disabled; // 数字输入框操作按钮disabled背景颜色
+
+$input-number-text-color-tips: $text-color-placeholder;
+$input-number-text-color-success: $success-color;
+$input-number-text-color-warning: $warning-color;
+$input-number-text-color-error: $error-color;
+
+// 尺寸
+$input-number-width-s: 120px; // 数字输入组件宽度
+$input-number-width: 144px; // 数字输入组件宽度
+$input-number-width-l: 168px; // 数字输入组件宽度
+$input-number-button-width-s: $comp-size-xs; // 数字输入框操作按钮宽度
+$input-number-button-width: $comp-size-m; // 数字输入框操作按钮的宽度
+$input-number-button-width-l: $comp-size-xl; // 数字输入框操作按钮宽度
+$input-number-button-height-s: $comp-size-xs; // 数字输入框操作按钮高度
+$input-number-button-height: $comp-size-m; // 数字输入框操作按钮的高度
+$input-number-button-height-l: $comp-size-xl; // 数字输入框操作按钮高度
+$input-number-inner-height-s: $comp-size-xs; // 数字输入框高度
+$input-number-inner-height: $comp-size-m; // 数字输入框高度
+$input-number-inner-height-l: $comp-size-xl; // 数字输入框高度
+$input-number-right-width-s: 88px; // 右侧调整数字输入组件宽度
+$input-number-right-width: 96px; // 右侧调整数字输入组件宽度
+$input-number-right-width-l: 120px; // 右侧调整数字输入组件宽度
+$input-number-right-button-width: $comp-size-m; // 右侧调整数字输入框操作按钮宽度
+$input-number-right-button-width-l: $comp-size-xl; // 右侧调整数字输入框操作按钮宽度
+$input-number-button-column-height-s: calc(calc($comp-size-xs / 2) - 2px); //  右侧调整数字操作按钮的高度
+$input-number-button-column-height: calc(calc($comp-size-m / 2) - 2px); //  右侧调整数字操作按钮的高度
+$input-number-button-column-height-l: calc(calc($comp-size-xl / 2) - 2px); //  右侧调整数字操作按钮的高度
+$input-number-padding-horizontal-default: $comp-paddingLR-s;
+
+// 字号
+$input-number-font-size: $font-size-l; // 数字输入框操作按钮字号
+$input-number-font-size-s: $font-size-base; // 小尺寸数字输入框操作按钮字号
+$input-number-font-size-l: ($font-size * 1.8); // 大尺寸数字输入框操作按钮字号
+
+$input-number-right-font-size: $font-size-s; // 右侧调整数字输入框操作按钮字号
+$input-number-right-font-size-l: $font-size-l; // 大尺寸右侧调整数字输入框操作按钮字号
+
+$input-number-tips-font-size: $font-size-s;

package/styles/components/ip-input/_index.scss

@@ -1,277 +1,277 @@
-@use "../../_vars.scss" as *;
-@use "../input/_vars.scss" as *;
-@use "../input/_mixins.scss" as *;
-@use "../../mixins/_reset.scss" as *;
-@use "../../utilities/_tips.scss" as *;
-
-.#{$prefix}-ip-input {
-  @include reset;
-  width: auto;
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-
-  &__wrapper {
-    // Windows 风格：左对齐，紧凑布局
-    display: inline-flex;
-    align-items: center;
-    width: auto;
-    min-width: fit-content;
-    position: relative;
-  }
-
-  &__segments {
-    // Windows 风格：输入框之间有间距
-    display: inline-flex;
-    align-items: center;
-    gap: 0;
-  }
-
-  &__segment {
-    // Windows 风格：固定宽度，独立边框
-    width: 50px;
-    min-width: 50px;
-    max-width: 50px;
-    height: $input-height-default;
-    padding: 0 6px;
-    border: 1px solid $input-border-color-default;
-    border-radius: $input-border-radius;
-    background-color: $input-bg-color-default;
-    color: $input-text-color-default;
-    font: $input-font;
-    text-align: center;
-    outline: none;
-    box-sizing: border-box;
-    transition: $input-inner-transition;
-    // 每个输入框都是独立的，有完整的边框
-    margin: 0;
-
-    &:focus {
-      // Windows 风格：聚焦时有明显的边框高亮
-      border-color: $input-border-color-default-focus;
-      box-shadow: 0 0 0 1px $input-border-color-default-focus;
-      z-index: 1;
-      position: relative;
-      outline: none;
-    }
-
-    &--focused {
-      border-color: $input-border-color-default-focus;
-      box-shadow: 0 0 0 1px $input-border-color-default-focus;
-      z-index: 1;
-      position: relative;
-    }
-
-    &--error {
-      border-color: $input-border-color-error;
-
-      // 错误状态下的聚焦样式，优先级高于普通聚焦和 --focused
-      &:focus {
-        border-color: $input-border-color-error !important;
-        box-shadow: 0 0 0 1px $input-border-color-error !important;
-      }
-
-      // 当同时有 --error --focused 类时，确保错误样式优先
-      &.#{$prefix}-ip-input__segment--focused {
-        border-color: $input-border-color-error !important;
-        box-shadow: 0 0 0 1px $input-border-color-error !important;
-      }
-    }
-
-    &::placeholder {
-      color: $input-placeholder-color;
-    }
-
-    &:disabled {
-      background-color: $input-bg-color-disabled;
-      color: $input-text-color-disabled;
-      cursor: not-allowed;
-    }
-
-    &[readonly] {
-      background-color: $input-bg-color-readonly;
-      color: $input-text-color-readonly;
-      cursor: $input-cursor-readonly;
-    }
-  }
-
-  &__separator {
-    // Windows 风格：点号分隔符，有适当间距
-    padding: 0 4px;
-    margin: 0 2px;
-    color: $text-color-primary;
-    font: $input-font;
-    font-weight: 500;
-    user-select: none;
-    flex-shrink: 0;
-    line-height: $input-height-default;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__cidr {
-    // Windows 风格：CIDR 掩码输入框也是独立样式
-    width: 50px;
-    min-width: 50px;
-    max-width: 50px;
-    height: $input-height-default;
-    padding: 0 6px;
-    border: 1px solid $input-border-color-default;
-    border-radius: $input-border-radius;
-    background-color: $input-bg-color-default;
-    color: $input-text-color-default;
-    font: $input-font;
-    text-align: center;
-    outline: none;
-    box-sizing: border-box;
-    transition: $input-inner-transition;
-    margin-left: 8px;
-
-    &:focus {
-      // Windows 风格：聚焦时有明显的边框高亮
-      border-color: $input-border-color-default-focus;
-      box-shadow: 0 0 0 1px $input-border-color-default-focus;
-      z-index: 1;
-      position: relative;
-      outline: none;
-    }
-
-    &--error {
-      border-color: $input-border-color-error;
-
-      &:focus {
-        border-color: $input-border-color-error;
-        box-shadow: 0 0 0 1px $input-border-color-error;
-      }
-    }
-
-    &::placeholder {
-      color: $input-placeholder-color;
-    }
-
-    &:disabled {
-      background-color: $input-bg-color-disabled;
-      color: $input-text-color-disabled;
-      cursor: not-allowed;
-    }
-
-    &[readonly] {
-      background-color: $input-bg-color-readonly;
-      color: $input-text-color-readonly;
-      cursor: $input-cursor-readonly;
-    }
-  }
-
-  &__ipv6-wrapper {
-    display: inline-flex;
-    align-items: center;
-    flex: 1;
-    gap: 0;
-  }
-
-  &__ipv6 {
-    flex: 1;
-    min-width: 0;
-    height: $input-height-default;
-    padding: 0 $comp-paddingLR-s;
-    border: 1px solid $input-border-color-default;
-    border-radius: $input-border-radius;
-    background-color: $input-bg-color-default;
-    color: $input-text-color-default;
-    font: $input-font;
-    outline: none;
-    box-sizing: border-box;
-    transition: $input-inner-transition;
-
-    &:focus {
-      border-color: $input-border-color-default-focus;
-      box-shadow: $input-box-shadow-focus;
-      z-index: 1;
-      position: relative;
-    }
-
-    &--error {
-      border-color: $input-border-color-error;
-
-      &:focus {
-        border-color: $input-border-color-error;
-        box-shadow: 0 0 0 2px $input-box-shadow-color-error-focus;
-      }
-    }
-
-    &::placeholder {
-      color: $input-placeholder-color;
-    }
-
-    &:disabled {
-      background-color: $input-bg-color-disabled;
-      color: $input-text-color-disabled;
-      cursor: not-allowed;
-    }
-
-    &[readonly] {
-      background-color: $input-bg-color-readonly;
-      color: $input-text-color-readonly;
-      cursor: $input-cursor-readonly;
-    }
-  }
-
-  &__clear {
-    position: absolute;
-    right: $comp-paddingLR-s;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: $input-inner-suffix-icon-color;
-    transition: all $anim-duration-base linear;
-    z-index: 2;
-
-    &:hover {
-      color: $input-inner-suffix-icon-color-hover;
-    }
-  }
-
-  &__error {
-    margin-top: $comp-margin-xs;
-    font: $input-tips-font;
-    color: $input-text-color-error;
-    min-height: $input-tips-min-height;
-  }
-
-  &__tips {
-    margin-top: $comp-margin-xs;
-    font: $input-tips-font;
-    color: $input-text-color-tips;
-    min-height: $input-tips-min-height;
-  }
-
-  // 状态样式
-  &.#{$prefix}-is-disabled {
-    .#{$prefix}-ip-input__segment,
-    .#{$prefix}-ip-input__cidr,
-    .#{$prefix}-ip-input__ipv6 {
-      background-color: $input-bg-color-disabled;
-      color: $input-text-color-disabled;
-      cursor: not-allowed;
-    }
-  }
-
-  &.#{$prefix}-is-readonly {
-    .#{$prefix}-ip-input__segment,
-    .#{$prefix}-ip-input__cidr,
-    .#{$prefix}-ip-input__ipv6 {
-      background-color: $input-bg-color-readonly;
-      color: $input-text-color-readonly;
-      cursor: $input-cursor-readonly;
-    }
-  }
-
-  &.#{$prefix}-is-focused {
-    .#{$prefix}-ip-input__segment,
-    .#{$prefix}-ip-input__cidr,
-    .#{$prefix}-ip-input__ipv6 {
-      border-color: $input-border-color-default-focus;
-    }
-  }
-}
+@use "../../_vars.scss" as *;
+@use "../input/_vars.scss" as *;
+@use "../input/_mixins.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "../../utilities/_tips.scss" as *;
+
+.#{$prefix}-ip-input {
+  @include reset;
+  width: auto;
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+
+  &__wrapper {
+    // Windows 风格：左对齐，紧凑布局
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+    min-width: fit-content;
+    position: relative;
+  }
+
+  &__segments {
+    // Windows 风格：输入框之间有间距
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  &__segment {
+    // Windows 风格：固定宽度，独立边框
+    width: 50px;
+    min-width: 50px;
+    max-width: 50px;
+    height: $input-height-default;
+    padding: 0 6px;
+    border: 1px solid $input-border-color-default;
+    border-radius: $input-border-radius;
+    background-color: $input-bg-color-default;
+    color: $input-text-color-default;
+    font: $input-font;
+    text-align: center;
+    outline: none;
+    box-sizing: border-box;
+    transition: $input-inner-transition;
+    // 每个输入框都是独立的，有完整的边框
+    margin: 0;
+
+    &:focus {
+      // Windows 风格：聚焦时有明显的边框高亮
+      border-color: $input-border-color-default-focus;
+      box-shadow: 0 0 0 1px $input-border-color-default-focus;
+      z-index: 1;
+      position: relative;
+      outline: none;
+    }
+
+    &--focused {
+      border-color: $input-border-color-default-focus;
+      box-shadow: 0 0 0 1px $input-border-color-default-focus;
+      z-index: 1;
+      position: relative;
+    }
+
+    &--error {
+      border-color: $input-border-color-error;
+
+      // 错误状态下的聚焦样式，优先级高于普通聚焦和 --focused
+      &:focus {
+        border-color: $input-border-color-error !important;
+        box-shadow: 0 0 0 1px $input-border-color-error !important;
+      }
+
+      // 当同时有 --error --focused 类时，确保错误样式优先
+      &.#{$prefix}-ip-input__segment--focused {
+        border-color: $input-border-color-error !important;
+        box-shadow: 0 0 0 1px $input-border-color-error !important;
+      }
+    }
+
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+
+    &:disabled {
+      background-color: $input-bg-color-disabled;
+      color: $input-text-color-disabled;
+      cursor: not-allowed;
+    }
+
+    &[readonly] {
+      background-color: $input-bg-color-readonly;
+      color: $input-text-color-readonly;
+      cursor: $input-cursor-readonly;
+    }
+  }
+
+  &__separator {
+    // Windows 风格：点号分隔符，有适当间距
+    padding: 0 4px;
+    margin: 0 2px;
+    color: $text-color-primary;
+    font: $input-font;
+    font-weight: 500;
+    user-select: none;
+    flex-shrink: 0;
+    line-height: $input-height-default;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__cidr {
+    // Windows 风格：CIDR 掩码输入框也是独立样式
+    width: 50px;
+    min-width: 50px;
+    max-width: 50px;
+    height: $input-height-default;
+    padding: 0 6px;
+    border: 1px solid $input-border-color-default;
+    border-radius: $input-border-radius;
+    background-color: $input-bg-color-default;
+    color: $input-text-color-default;
+    font: $input-font;
+    text-align: center;
+    outline: none;
+    box-sizing: border-box;
+    transition: $input-inner-transition;
+    margin-left: 8px;
+
+    &:focus {
+      // Windows 风格：聚焦时有明显的边框高亮
+      border-color: $input-border-color-default-focus;
+      box-shadow: 0 0 0 1px $input-border-color-default-focus;
+      z-index: 1;
+      position: relative;
+      outline: none;
+    }
+
+    &--error {
+      border-color: $input-border-color-error;
+
+      &:focus {
+        border-color: $input-border-color-error;
+        box-shadow: 0 0 0 1px $input-border-color-error;
+      }
+    }
+
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+
+    &:disabled {
+      background-color: $input-bg-color-disabled;
+      color: $input-text-color-disabled;
+      cursor: not-allowed;
+    }
+
+    &[readonly] {
+      background-color: $input-bg-color-readonly;
+      color: $input-text-color-readonly;
+      cursor: $input-cursor-readonly;
+    }
+  }
+
+  &__ipv6-wrapper {
+    display: inline-flex;
+    align-items: center;
+    flex: 1;
+    gap: 0;
+  }
+
+  &__ipv6 {
+    flex: 1;
+    min-width: 0;
+    height: $input-height-default;
+    padding: 0 $comp-paddingLR-s;
+    border: 1px solid $input-border-color-default;
+    border-radius: $input-border-radius;
+    background-color: $input-bg-color-default;
+    color: $input-text-color-default;
+    font: $input-font;
+    outline: none;
+    box-sizing: border-box;
+    transition: $input-inner-transition;
+
+    &:focus {
+      border-color: $input-border-color-default-focus;
+      box-shadow: $input-box-shadow-focus;
+      z-index: 1;
+      position: relative;
+    }
+
+    &--error {
+      border-color: $input-border-color-error;
+
+      &:focus {
+        border-color: $input-border-color-error;
+        box-shadow: 0 0 0 2px $input-box-shadow-color-error-focus;
+      }
+    }
+
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+
+    &:disabled {
+      background-color: $input-bg-color-disabled;
+      color: $input-text-color-disabled;
+      cursor: not-allowed;
+    }
+
+    &[readonly] {
+      background-color: $input-bg-color-readonly;
+      color: $input-text-color-readonly;
+      cursor: $input-cursor-readonly;
+    }
+  }
+
+  &__clear {
+    position: absolute;
+    right: $comp-paddingLR-s;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: $input-inner-suffix-icon-color;
+    transition: all $anim-duration-base linear;
+    z-index: 2;
+
+    &:hover {
+      color: $input-inner-suffix-icon-color-hover;
+    }
+  }
+
+  &__error {
+    margin-top: $comp-margin-xs;
+    font: $input-tips-font;
+    color: $input-text-color-error;
+    min-height: $input-tips-min-height;
+  }
+
+  &__tips {
+    margin-top: $comp-margin-xs;
+    font: $input-tips-font;
+    color: $input-text-color-tips;
+    min-height: $input-tips-min-height;
+  }
+
+  // 状态样式
+  &.#{$prefix}-is-disabled {
+    .#{$prefix}-ip-input__segment,
+    .#{$prefix}-ip-input__cidr,
+    .#{$prefix}-ip-input__ipv6 {
+      background-color: $input-bg-color-disabled;
+      color: $input-text-color-disabled;
+      cursor: not-allowed;
+    }
+  }
+
+  &.#{$prefix}-is-readonly {
+    .#{$prefix}-ip-input__segment,
+    .#{$prefix}-ip-input__cidr,
+    .#{$prefix}-ip-input__ipv6 {
+      background-color: $input-bg-color-readonly;
+      color: $input-text-color-readonly;
+      cursor: $input-cursor-readonly;
+    }
+  }
+
+  &.#{$prefix}-is-focused {
+    .#{$prefix}-ip-input__segment,
+    .#{$prefix}-ip-input__cidr,
+    .#{$prefix}-ip-input__ipv6 {
+      border-color: $input-border-color-default-focus;
+    }
+  }
+}