@tendaui/components 1.0.0 → 1.0.2

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

@@ -0,0 +1,353 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import "../../_vars.scss";
+
+@import "./_vars.scss";
+
+@import "../../mixins/_reset.scss";
+
+$inputCls: "#{$prefix}-input";
+$inputNumberCls: "#{$prefix}-input-number";
+
+.#{$inputNumberCls} {
+  @include reset;
+
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 $input-number-button-width;
+  user-select: none;
+  width: $input-number-width;
+
+  &:not(&--column) {
+    > .#{$prefix}-input-number__decrease + .#{$prefix}-input__wrap {
+      margin-left: $comp-margin-xs;
+    }
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    appearance: none;
+  }
+
+  input[type="number"] {
+    appearance: textfield;
+  }
+
+  > .#{$prefix}-input__tips {
+    position: absolute;
+    left: 0;
+  }
+
+  // 输入框和右置内容之间需要间距
+  input + .#{$prefix}-input__suffix {
+    margin-left: $input-number-padding-horizontal-default;
+  }
+
+  .#{$prefix}-input__prefix {
+    margin-right: $input-number-padding-horizontal-default;
+  }
+
+  .#{$inputCls} {
+    color: $input-number-inner-color;
+  }
+
+  // autoWidth适配
+  &.#{$inputNumberCls}--auto-width {
+    width: auto;
+
+    &.#{$prefix}-is-controls-right {
+      min-width: auto;
+      width: auto;
+    }
+
+    .#{$prefix}-input__inner {
+      min-width: 42px;
+    }
+  }
+
+  & &__decrease,
+  & &__increase {
+    width: $input-number-button-width;
+    height: $input-number-button-height;
+    position: absolute;
+    top: 0;
+    border: 1px solid $input-number-button-border-color;
+    box-sizing: border-box;
+    border-radius: $border-radius-default;
+    background-color: $input-number-button-bg-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+    cursor: pointer;
+    // transition: all @anim-time-fn-easing @anim-duration-base;
+
+    &:hover {
+      color: $input-number-button-color-hover;
+      border-color: $input-number-button-color-hover;
+
+      .t-icon {
+        color: $input-number-button-color-hover;
+      }
+    }
+
+    &:active {
+      color: $input-number-button-color-hover;
+      background-color: $bg-color-container-hover;
+    }
+
+    .t-icon {
+      position: relative;
+      z-index: 1;
+      font-size: $input-number-font-size;
+      color: $text-color-secondary;
+    }
+
+    &.#{$prefix}-is-disabled {
+      color: $input-number-button-color-disabled;
+      cursor: no-drop;
+      background-color: $input-number-button-bg-color-disabled;
+
+      .t-icon {
+        color: $input-number-button-color-disabled;
+      }
+
+      &:hover {
+        border-color: $input-number-button-border-color;
+
+        .t-icon {
+          color: $input-number-button-color-disabled;
+        }
+      }
+
+      &::placeholder {
+        color: $input-number-inner-color-disabled;
+      }
+    }
+  }
+
+  & &__decrease {
+    left: 0;
+  }
+
+  & &__increase {
+    right: -8px;
+  }
+}
+
+.#{$inputNumberCls}.#{$prefix}-is-disabled {
+  .#{$inputCls} {
+    cursor: no-drop;
+    background-color: $input-number-bg-color-disabled;
+    color: $input-number-inner-color-disabled;
+
+    &:hover,
+    &:focus,
+    &:active {
+      border-color: $input-number-button-border-color;
+    }
+  }
+
+  .#{$inputNumberCls}__decrease,
+  .#{$inputNumberCls}__increase {
+    color: $input-number-button-color-disabled;
+    cursor: no-drop;
+    background-color: $input-number-button-bg-color-disabled;
+
+    .t-icon {
+      color: $text-color-secondary;
+    }
+  }
+}
+
+.#{$inputNumberCls}.#{$prefix}-size-s {
+  width: $input-number-width-s;
+  padding: 0 $input-number-button-width-s;
+
+  .#{$inputCls} {
+    font-size: $font-size-s;
+    height: $input-number-inner-height-s;
+    line-height: $input-number-inner-height-s;
+  }
+
+  .#{$inputNumberCls}__decrease,
+  .#{$inputNumberCls}__increase {
+    font-size: $input-number-font-size-s;
+    width: $input-number-button-width-s;
+    height: $input-number-button-height-s;
+  }
+}
+
+.#{$inputNumberCls}.#{$prefix}-size-l {
+  width: $input-number-width-l;
+  padding: 0 $input-number-button-width-l;
+
+  .#{$inputCls} {
+    height: $input-number-inner-height-l;
+    line-height: $input-number-inner-height-l;
+  }
+
+  .#{$inputNumberCls}__decrease,
+  .#{$inputNumberCls}__increase {
+    font-size: $input-number-font-size-l;
+    width: $input-number-button-width-l;
+    height: $input-number-button-height-l;
+  }
+
+  &.#{$prefix}-is-controls-right {
+    .#{$inputCls} {
+      height: $input-number-inner-height-l;
+      line-height: $input-number-inner-height-l;
+      padding-right: calc($input-number-right-button-width-l + $input-number-padding-horizontal-default);
+    }
+
+    .#{$inputNumberCls}__decrease,
+    .#{$inputNumberCls}__increase {
+      width: $input-number-right-button-width-l;
+      font-size: $input-number-right-font-size-l;
+    }
+  }
+
+  .#{$prefix}-input--prefix {
+    font: $font-body-large;
+    padding: 0 $comp-paddingLR-m;
+  }
+}
+
+.#{$inputNumberCls}.#{$inputNumberCls}--normal {
+  padding: 0;
+  border-radius: $border-radius-default;
+
+  &.#{$prefix}-is-disabled {
+    cursor: no-drop;
+    color: $input-number-button-color-disabled;
+
+    &:hover {
+      .#{$inputCls} {
+        border-color: $input-number-button-border-color;
+      }
+    }
+
+    &::placeholder {
+      color: $input-number-inner-color-disabled;
+    }
+
+    .#{$inputCls}:focus {
+      box-shadow: none;
+    }
+  }
+}
+.#{$inputNumberCls}.#{$prefix}-is-controls-right {
+  width: $input-number-right-width;
+  padding: 0;
+
+  &:hover {
+    .#{$inputNumberCls}__decrease,
+    .#{$inputNumberCls}__increase {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .#{$inputCls} {
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding-right: calc($input-number-right-button-width + $input-number-padding-horizontal-default);
+    border-radius: $border-radius-default;
+  }
+
+  .#{$inputNumberCls}__decrease,
+  .#{$inputNumberCls}__increase {
+    width: $input-number-right-button-width;
+    height: $input-number-button-column-height;
+    border: 0;
+    left: initial;
+    top: initial;
+    right: 1px;
+    border-radius: 0;
+    background: $input-number-right-button-bg-color;
+    opacity: 0;
+    visibility: hidden;
+    z-index: 2;
+
+    .t-icon {
+      font-size: $input-number-right-font-size;
+    }
+
+    &:hover {
+      background: $input-number-right-button-hover-bg-color;
+
+      .t-icon {
+        color: $text-color-primary;
+      }
+    }
+
+    &.#{$prefix}-is-disabled {
+      color: $input-number-button-color-disabled;
+      cursor: no-drop;
+      background-color: $input-number-button-bg-color-disabled;
+
+      .t-icon {
+        color: $input-number-button-color-disabled;
+      }
+
+      &:hover {
+        border-color: $input-number-button-border-color;
+
+        .t-icon {
+          color: $input-number-button-color-disabled;
+        }
+      }
+
+      &::placeholder {
+        color: $input-number-inner-color-disabled;
+      }
+    }
+  }
+
+  .#{$inputNumberCls}__increase {
+    top: 1px;
+    border-top-right-radius: calc($border-radius-default - 1px);
+  }
+
+  .#{$inputNumberCls}__decrease {
+    top: calc($input-number-button-column-height + 3px);
+    border-bottom-right-radius: calc($border-radius-default - 1px);
+  }
+
+  &.#{$prefix}-size-l {
+    width: $input-number-right-width-l;
+
+    .#{$inputNumberCls}__increase,
+    .#{$inputNumberCls}__decrease {
+      height: $input-number-button-column-height-l;
+    }
+    .#{$inputNumberCls}__decrease {
+      top: calc($input-number-button-column-height-l + 3px);
+    }
+  }
+
+  &.#{$prefix}-size-s {
+    width: $input-number-right-width-s;
+
+    .#{$inputNumberCls}__increase,
+    .#{$inputNumberCls}__decrease {
+      height: $input-number-button-column-height-s;
+    }
+    .#{$inputNumberCls}__decrease {
+      top: calc($input-number-button-column-height-s + 3px);
+    }
+  }
+}
+
+.#{$inputNumberCls}--row {
+  .#{$prefix}-input__wrap {
+    width: initial;
+    margin-right: $comp-margin-xs;
+  }
+  .#{$prefix}-input-number__increase {
+    right: 0;
+  }
+}

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

@@ -0,0 +1,65 @@
+// 颜色
+// $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

@@ -0,0 +1,280 @@
+@import "../../_vars.scss";
+@import "../input/_vars.scss";
+@import "../input/_mixins.scss";
+@import "../../mixins/_reset.scss";
+@import "../../utilities/_tips.scss";
+
+.#{$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;
+    }
+  }
+
+  // 移除整个组件的 is-error 样式，因为每个段有自己的错误状态
+  // 错误状态通过 __segment--error 等类来控制
+}