@tendaui/components 1.0.2 → 1.2.4

package/styles/components/form/_mixins.scss

@@ -1,4 +1,6 @@
-@use 'sass:map';
+@use "sass:map";
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
 
 @mixin input-status($status) {
   .#{$prefix}-is-#{$status} {
@@ -6,7 +8,7 @@
     @include input-status-extra($status);
 
     .#{$prefix}-form__controls-content {
-      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变化
+      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变量
       .#{$prefix}-input,
       .#{$prefix}-select,
       .#{$prefix}-radio-button,
@@ -16,8 +18,7 @@
         border-color: map.get(map.get($input-color, border), $status);
 
         &--focused {
-          box-shadow: 0 0 0 2px
-            map.get(map.get($input-color, box-shadow), $status);
+          box-shadow: 0 0 0 2px map.get(map.get($input-color, box-shadow), $status);
         }
 
         // 处理组件内icon颜色
@@ -28,9 +29,7 @@
       }
 
       .#{$prefix}-select {
-        > .#{$prefix}-select__right-icon:not(
-            .#{$prefix}-select__right-icon-clear
-          ) {
+        > .#{$prefix}-select__right-icon:not(.#{$prefix}-select__right-icon-clear) {
           color: map.get(map.get($input-color, border), $status);
         }
       }
@@ -50,8 +49,7 @@
       .#{$prefix}-cascader,
       .#{$prefix}-select {
         &.#{$prefix}-is-active {
-          box-shadow: 0 0 0 2px
-            map.get(map.get($input-color, box-shadow), $status);
+          box-shadow: 0 0 0 2px map.get(map.get($input-color, box-shadow), $status);
         }
       }
 

package/styles/components/form/_vars.scss

@@ -1,12 +1,13 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
+// 名称可按如下规则定义//
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
+// component:组件名，如button//
+// type: 组件类型，如 button 的次要按钮（line//
 // attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+// attr: 属性名称，如color、height、radius//
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 
 // 如：$button-line-bg-color-hover
 // 如：$button-line-height-s
@@ -30,7 +31,7 @@ $form-color: (
   error: $error-color,
   warning: $warning-color,
   success: $success-color,
-  extra: $text-color-placeholder,
+  extra: $text-color-placeholder
 );
 // 间距
 $form-item-margin-bottom: $comp-margin-xxl;
@@ -63,11 +64,11 @@ $input-color: (
   border: (
     default: (
       hover: $brand-color,
-      focus: $brand-color,
+      focus: $brand-color
     ),
     success: $success-color,
     warning: $warning-color,
-    error: $error-color,
+    error: $error-color
   ),
   text: (
     default: $text-color-primary,
@@ -76,18 +77,18 @@ $input-color: (
     error: $error-color,
     readonly: $text-color-primary,
     tips: $text-color-placeholder,
-    disabled: $text-color-disabled,
+    disabled: $text-color-disabled
   ),
   bg-color: (
     default: $text-color-placeholder,
     readonly: $bg-color-specialcomponent,
-    disabled: $bg-color-component-disabled,
+    disabled: $bg-color-component-disabled
   ),
   extra: (
     default: $text-color-placeholder,
     success: $success-color,
     warning: $warning-color,
-    error: $error-color,
+    error: $error-color
   ),
   append: $bg-color-secondarycontainer-hover,
   limit: $text-color-placeholder,
@@ -95,6 +96,6 @@ $input-color: (
     default: $brand-color-focus,
     success: $success-color-focus,
     warning: $warning-color-focus,
-    error: $error-color-focus,
-  ),
+    error: $error-color-focus
+  )
 );

package/styles/components/input/_index.scss

@@ -1,10 +1,11 @@
-@import './_vars.scss';
-@import './_mixins.scss';
-@import '../../mixins/_text.scss';
-@import './_map.scss';
+@use "../../_vars.scss" as *;
+@use './_vars.scss' as *;
+@use './_mixins.scss' as *;
+@use '../../mixins/_text.scss' as *;
+@use './_map.scss' as *;
 
-@import '../../mixins/_reset.scss';
-@import '../../utilities/_tips.scss';
+@use '../../mixins/_reset.scss' as *;
+@use '../../utilities/_tips.scss' as *;
 
 .#{$prefix}-input {
   @include reset;
@@ -67,7 +68,7 @@
       width: 100%;
     }
 
-    // 隐藏Edge浏览器默认的密码框样式
+    // 隐藏Edge浏览器默认的密码框样�?
     &[type='password']::-ms-reveal {
       display: none;
     }
@@ -84,13 +85,13 @@
     }
   }
 
-  // 底部的额外消息
+  // 底部的额外消�?
   &__extra {
     font: $input-extra-font;
     color: $input-extra-color-default;
   }
 
-  // 输入框后面的状态图标
+  // 输入框后面的状态图�?
   &__status {
     position: absolute;
     right: $input-status-position-right;
@@ -108,12 +109,12 @@
     visibility: visible;
   }
 
-  // 输入框状态
+  // 输入框状�?
 
   @include input-readonly;
   @include input-disabled;
 
-  // 输入框的前置、后置图标
+  // 输入框的前置、后置图�?
   @include input-fix-position(prefix);
   @include input-fix-position(suffix);
 
@@ -123,7 +124,7 @@
     height: 1em;
   }
 
-  // 输入框大小
+  // 输入框大�?
   &.#{$prefix}-size-l {
     height: $input-height-l;
     font: $input-font-l;
@@ -176,7 +177,7 @@
       }
     }
     .#{$prefix}-input__suffix {
-      // 特殊使用的 suffix icon
+      // 特殊使用�?suffix icon
       > .t-icon-time,
       .t-icon-calendar {
         color: $input-border-color-default-focus;

package/styles/components/input/_mixins.scss

@@ -1,4 +1,6 @@
-@import './_map.scss';
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+@use "./_map.scss" as *;
 
 @mixin input-base() {
   border-width: 1px;
@@ -71,7 +73,7 @@
   }
 }
 
-// 状态样式：需要 map-get 或 #{} 来拼接变量名
+// 状态样式：需使用map-get 和 #{} 来拼接变量名
 @mixin input-status($status) {
   &.#{$prefix}-is-#{$status} {
     border-color: #000;

package/styles/components/input/_vars.scss

@@ -1,18 +1,14 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
+// 名称可按如下规则定义//
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
+// component:组件名，如button// type: 组件类型，如 button 的次要按钮（line// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如color、height、radius// status: 表示组件状态或尺寸，如 hover、disabled、s、l
 
 // 如：$button-line-bg-color-hover
 // 如：$button-line-height-s
 
-@import '../../_vars.scss';
-
 // 颜色
 $input-border-color-default: $border-level-2-color;
 $input-border-color-default-hover: $brand-color;
@@ -25,11 +21,11 @@ $input-color: (
   border: (
     default: (
       hover: $brand-color,
-      focus: $brand-color,
+      focus: $brand-color
     ),
     success: $success-color,
     warning: $warning-color,
-    error: $error-color,
+    error: $error-color
   ),
   text: (
     default: $text-color-primary,
@@ -38,18 +34,18 @@ $input-color: (
     error: $error-color,
     readonly: $text-color-primary,
     tips: $text-color-placeholder,
-    disabled: $text-color-disabled,
+    disabled: $text-color-disabled
   ),
   bg-color: (
     default: $text-color-placeholder,
     readonly: $bg-color-specialcomponent,
-    disabled: $bg-color-component-disabled,
+    disabled: $bg-color-component-disabled
   ),
   extra: (
     default: $text-color-placeholder,
     success: $success-color,
     warning: $warning-color,
-    error: $error-color,
+    error: $error-color
   ),
   append: $bg-color-secondarycontainer-hover,
   limit: $text-color-placeholder,
@@ -57,8 +53,8 @@ $input-color: (
     default: $brand-color-focus,
     success: $success-color-focus,
     warning: $warning-color-focus,
-    error: $error-color-focus,
-  ),
+    error: $error-color-focus
+  )
 );
 
 $input-text-color-success: $success-color;

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

@@ -1,10 +1,10 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
 $inputCls: "#{$prefix}-input";
 $inputNumberCls: "#{$prefix}-input-number";
@@ -39,101 +39,99 @@ $inputNumberCls: "#{$prefix}-input-number";
     left: 0;
   }
 
-  // 输入框和右置内容之间需要间距
-  input + .#{$prefix}-input__suffix {
-    margin-left: $input-number-padding-horizontal-default;
-  }
+  // 输入框和右置内容之间需要间距  input + .#{$prefix}-input__suffix {
+  margin-left: $input-number-padding-horizontal-default;
+}
 
-  .#{$prefix}-input__prefix {
-    margin-right: $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;
   }
 
-  .#{$inputCls} {
-    color: $input-number-inner-color;
+  .#{$prefix}-input__inner {
+    min-width: 42px;
   }
+}
 
-  // autoWidth适配
-  &.#{$inputNumberCls}--auto-width {
-    width: auto;
+.#{$inputNumberCls}__decrease,
+.#{$inputNumberCls}__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;
 
-    &.#{$prefix}-is-controls-right {
-      min-width: auto;
-      width: auto;
-    }
+  &:hover {
+    color: $input-number-button-color-hover;
+    border-color: $input-number-button-color-hover;
 
-    .#{$prefix}-input__inner {
-      min-width: 42px;
+    .t-icon {
+      color: $input-number-button-color-hover;
     }
   }
 
-  & &__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;
+  &:active {
+    color: $input-number-button-color-hover;
+    background-color: $bg-color-container-hover;
+  }
 
-      .t-icon {
-        color: $input-number-button-color-hover;
-      }
-    }
+  .t-icon {
+    position: relative;
+    z-index: 1;
+    font-size: $input-number-font-size;
+    color: $text-color-secondary;
+  }
 
-    &:active {
-      color: $input-number-button-color-hover;
-      background-color: $bg-color-container-hover;
-    }
+  &.#{$prefix}-is-disabled {
+    color: $input-number-button-color-disabled;
+    cursor: no-drop;
+    background-color: $input-number-button-bg-color-disabled;
 
     .t-icon {
-      position: relative;
-      z-index: 1;
-      font-size: $input-number-font-size;
-      color: $text-color-secondary;
+      color: $input-number-button-color-disabled;
     }
 
-    &.#{$prefix}-is-disabled {
-      color: $input-number-button-color-disabled;
-      cursor: no-drop;
-      background-color: $input-number-button-bg-color-disabled;
+    &:hover {
+      border-color: $input-number-button-border-color;
 
       .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;
-      }
+    &::placeholder {
+      color: $input-number-inner-color-disabled;
     }
   }
+}
 
-  & &__decrease {
-    left: 0;
-  }
+.#{$inputNumberCls}__decrease {
+  left: 0;
+}
 
-  & &__increase {
-    right: -8px;
-  }
+.#{$inputNumberCls}__increase {
+  right: -8px;
 }
 
 .#{$inputNumberCls}.#{$prefix}-is-disabled {

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

@@ -1,19 +1,17 @@
+@use "../../_vars.scss" as *;
 // 颜色
-// $input-number-border-color: $border-level-2-color; // 数字输入框边框颜色
-
+$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-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图标颜色
@@ -25,33 +23,26 @@ $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-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;
 
 // 字号

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

@@ -1,8 +1,8 @@
-@import "../../_vars.scss";
-@import "../input/_vars.scss";
-@import "../input/_mixins.scss";
-@import "../../mixins/_reset.scss";
-@import "../../utilities/_tips.scss";
+@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;
@@ -65,13 +65,13 @@
     &--error {
       border-color: $input-border-color-error;
 
-      // 错误状态下的聚焦样式，优先级高于普通聚焦和 --focused 类
+      // 错误状态下的聚焦样式，优先级高于普通聚焦和 --focused
       &:focus {
         border-color: $input-border-color-error !important;
         box-shadow: 0 0 0 1px $input-border-color-error !important;
       }
 
-      // 当同时有 --error 和 --focused 类时，确保错误样式优先
+      // 当同时有 --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;
@@ -274,7 +274,4 @@
       border-color: $input-border-color-default-focus;
     }
   }
-
-  // 移除整个组件的 is-error 样式，因为每个段有自己的错误状态
-  // 错误状态通过 __segment--error 等类来控制
 }

package/styles/components/layout/_index.scss

@@ -1,12 +1,12 @@
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "./_mixin.scss";
+@use "./_mixin.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
 .#{$prefix}-layout {
   @include reset;

package/styles/components/layout/_vars.scss

@@ -1,13 +1,14 @@
+@use "../../_vars.scss" as *;
 // 颜色
-// layout字体色
+// layout字体
 $layout-color: $text-color-secondary;
-// layout背景色
+// layout背景
 $layout-bg-color: $bg-color-page;
-// header背景色
+// header背景
 $layout-header-bg-color: $bg-color-container;
-// sider背景色
+// sider背景
 $layout-sider-bg-color: $bg-color-container;
-// footer字体色
+// footer字体
 $layout-footer-color: $text-color-placeholder;
 
 // 尺寸

package/styles/components/layout/doc.scss

@@ -1,4 +1,4 @@
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
 .#{$prefix}-layout__content {
   height: 600px;

package/styles/components/list/_index.scss

@@ -1,12 +1,12 @@
-@import "../../_vars.scss";
+@use "../../_vars.scss" as *;
 
-@import "./_vars.scss";
+@use "./_vars.scss" as *;
 
-@import "../../mixins/_reset.scss";
+@use "../../mixins/_reset.scss" as *;
 
-@import "../../mixins//layout.scss";
+@use "../../mixins//layout.scss" as *;
 
-@import "../../mixins/scrollbar.scss";
+@use "../../mixins/scrollbar.scss" as *;
 .#{$prefix}-list {
   @include reset();
   @include scrollbar();

package/styles/components/list/_vars.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 // 颜色
 $list-bg-color-default: $bg-color-container;
 $list-bg-color-strip: $bg-color-secondarycontainer;

package/styles/components/loading/_index.scss

@@ -1,10 +1,11 @@
-@import '../../_vars.scss';
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import '../../utilities/_animation.scss';
+@use '../../utilities/_animation.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
 .#{$prefix}-loading {
   @include reset;