@tendaui/components 1.0.2 → 1.2.4

package/styles/components/loading/_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

package/styles/components/notification/_index.scss

@@ -1,11 +1,12 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
-@import '../../vars.scss';
+@use '../../vars.scss' as *;
 
-@import './_vars.scss';
+@use './_vars.scss' as *;
 
-@import './_mixins.scss';
+@use './_mixins.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
 .#{$prefix}-notify {
   &[data-x-position='right'] {

package/styles/components/notification/_mixins.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 @mixin notification() {
   font: $notification-font;
   outline: 0;

package/styles/components/notification/_vars.scss

@@ -1,12 +1,13 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
+// 名称可按如下规则定义//
 // <component>-[type]-[attrtype]-<attr>-[status]
 
-// component:组件名，如button，
+// 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

package/styles/components/popup/_index.scss

@@ -1,14 +1,10 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+@use "./_mixin.scss" as *;
 
-@import '../../vars.scss';
+@use "../../mixins/_layout.scss" as *;
 
-@import './_var.scss';
-
-@import './_mixin.scss';
-
-@import '../../mixins/_layout.scss';
-
-@import '../../mixins/_reset.scss';
+@use "../../mixins/_reset.scss" as *;
 
 .#{$prefix}-popup {
   @include reset;
@@ -38,7 +34,7 @@
 
   &::before {
     position: absolute;
-    content: '';
+    content: "";
     width: $popup-arrow-width;
     height: $popup-arrow-height;
     transform: rotate(45deg);

package/styles/components/popup/_mixin.scss

@@ -1,3 +1,5 @@
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
 @mixin content-placement-top {
   .#{$prefix}-popup[data-popper-placement^="top"] {
     .#{$prefix}-popup__content {
@@ -123,7 +125,7 @@
   }
 }
 
-@mixin  arrow-placement-right() {
+@mixin arrow-placement-right() {
   .#{$prefix}-popup[data-popper-placement^="right"] .#{$prefix}-popup__arrow {
     left: calc(-#{$popup-arrow-width} / 2);
 
@@ -145,5 +147,3 @@
     top: calc(100% - $popup-arrow-width * 2);
   }
 }
-
-

package/styles/components/popup/{_var.scss → _vars.scss}

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 // 颜色
 $popup-bg: $bg-color-container;
 $arrow-bg: $bg-color-container;
@@ -11,7 +12,7 @@ $popup-arrow-height: 8px;
 $popup-content-arrow-spacer: $comp-margin-l;
 $popup-content-margin: $comp-margin-s;
 
-// 箭头位置偏移量
+// 箭头位置偏移
 $popup-arrow-position: $popup-arrow-width;
 $popup-content-font-size: $font-size-base;
 
@@ -27,5 +28,6 @@ $popup-flow: "#{prefix}-popup--animation";
 $popup-flow-duration: $anim-duration-base;
 $popup-flow-fn: $anim-time-fn-ease-in;
 $popup-flow-transition-enter: opacity $popup-flow-duration linear;
-$popup-flow-transition-leave: opacity $popup-flow-duration $anim-time-fn-ease-out,
+$popup-flow-transition-leave:
+  opacity $popup-flow-duration $anim-time-fn-ease-out,
   visibility $popup-flow-duration $popup-flow-fn;

package/styles/components/radio/_index.scss

@@ -1,11 +1,11 @@
+@use "../../_vars.scss" as *;
 // 组件允许单个组件打包，因此默认引入公共基础样式
 
-@import "../../vars.scss";
-@import "./_var.scss";
-@import "./_mixins.scss";
-@import "../../mixins/_reset.scss";
-@import "../../mixins/_scrollbar.scss";
-@import "../../mixins/_focus.scss";
+@use "./_vars.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "../../mixins/_scrollbar.scss" as *;
+@use "../../mixins/_focus.scss" as *;
 
 // <name> 替换为组件名
 .#{$radio-cls}-group {

package/styles/components/radio/{_var.scss → _vars.scss}

@@ -1,13 +1,10 @@
+@use "../../_vars.scss" as *;
 // 组件变量
-// 名称可按如下规则定义：
-// <component>-[type]-[attrtype]-<attr>-[status]
+// 名称可按如下规则定义// <component>-[type]-[attrtype]-<attr>-[status]
 
 // component:组件名，如button
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
-
+// 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
 
@@ -85,7 +82,7 @@ $radio-button-before-transition: translateY(-50%);
 $radio-button-transition: color $anim-duration-base $anim-time-fn-ease-out;
 $radio-input-transition: border $anim-duration-base $anim-time-fn-ease-out;
 
-// 透明度
+// 透明
 $radio-opacity-transparent: 0; // 全透明
 
 // 边框

package/styles/components/select/_index.scss

@@ -1,12 +1,13 @@
-@import '../../_vars.scss';
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
 
-@import './_var.scss';
+@use './_var.scss' as *;
 
-@import '../../mixins/_text.scss';
+@use '../../mixins/_text.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
-@import '../../mixins/_scrollbar.scss';
+@use '../../mixins/_scrollbar.scss' as *;
 
 // select
 .#{$prefix}-select__wrap {
@@ -19,7 +20,7 @@
     @include scrollbar(8px, 2px);
 
     margin: $select-dropdown-margin;
-    padding: 0; // 展开动画 如果有padding会直接生长 需要移动到内部
+    padding: 0; // 展开动画 如果有padding会直接生�?需要移动到内部
     max-height: $select-dropdown-max-height;
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -245,7 +246,7 @@
   }
 }
 
-/** 规范 CSS 类名为 --hover */
+/** 规范 CSS 类名�?--hover */
 .#{$prefix}-select-option.#{$prefix}-select-option__hover,
 .#{$prefix}-select-option.#{$prefix}-select-option--hover {
   &:not(.#{$prefix}-is-disabled),

package/styles/components/select/_var.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 // 颜色
 $select-bg-color: $bg-color-specialcomponent;
 $select-border-color: $border-level-2-color;
@@ -46,8 +47,6 @@ $select-input-shadow: 0 0 0 2px $brand-color-focus;
 $select-border-radius: $border-radius-default;
 $select-option-border-radius: $border-radius-default;
 
-//透明度
-
 // padding
 $select-option-padding-s: 0 $comp-paddingLR-s;
 $select-option-padding-default: 0 $comp-paddingLR-s;

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

@@ -1,5 +1,5 @@
-@import '../../vars.scss';
+@use '../../vars.scss' as *;
 
-@import './_var.scss';
+@use './_var.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;

package/styles/components/select-input/_var.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 $select-input-focus-bg: $bg-color-container-hover;
 $select-input-border-radius: $border-radius-default;
 $select-input-shadow: 0 0 0 2px $brand-color-focus;

package/styles/components/slider/_index.scss

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

package/styles/components/slider/_vars.scss

@@ -1,11 +1,12 @@
+@use "../../_vars.scss" as *;
 $slider-background: $bg-color-secondarycomponent;
 $slider-background-current: $brand-color;
 $slider-text: $text-color-primary;
-$slider-control-bar-background: #fff; // 滑块背景色不随默认/深色模式切换改变，固定为白色，故不使用背景色 token
+$slider-control-bar-background: #fff; // 滑块背景色不随默认深色模式切换改变，固定为白色，故不使用背景色 token
 $slider-control-bar-border: $brand-color;
 
 $slider-background-hover: $bg-color-secondarycomponent-hover;
-$slider-control-bar-background-hover: $gray-color-1; // 滑块背景色不随默认/深色模式切换改变，hover 后颜色固定为 $gray-color-1
+$slider-control-bar-background-hover: $gray-color-1; // 滑块背景色不随默认深色模式切换改变，hover 后颜色固定为 $gray-color-1
 
 $slider-background-disabled: $bg-color-component-disabled;
 $slider-background-current-disabled: $brand-color-disabled;

package/styles/components/switch/_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 './_mixins.scss';
+@use './_mixins.scss' as *;
 
-@import '../../mixins/_reset.scss';
+@use '../../mixins/_reset.scss' as *;
 
 .#{$prefix}-switch {
   @include reset;

package/styles/components/switch/_vars.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 
 // 颜色
 $switch-checked-bg-color: $brand-color;
@@ -19,13 +20,13 @@ $switch-height-l: $comp-size-xs;
 $switch-height-default: $comp-size-xxs;
 $switch-height-s: $comp-size-xxxs;
 
-$switch-min-width-l: calc($switch-height-l / .618);
-$switch-min-width-default: calc($switch-height-default / .618);
-$switch-min-width-s: calc($switch-height-s / .618);
+$switch-min-width-l: calc($switch-height-l / 0.618);
+$switch-min-width-default: calc($switch-height-default / 0.618);
+$switch-min-width-s: calc($switch-height-s / 0.618);
 
 //change uncheck handle size
 $switch-width-border-base: 5px;
-$switch-width-border-value: 1px; //公差值
+$switch-width-border-value: 1px; //公差
 
 $switch-width-border-l: $switch-width-border-base;
 $switch-width-border-default: ($switch-width-border-base - $switch-width-border-value * 1);
@@ -33,7 +34,7 @@ $switch-width-border-s: ($switch-width-border-base - $switch-width-border-value
 
 //change check handle size
 $switch-width-border-check-base: 3px;
-$switch-width-border-check-value: .5px; //公差值
+$switch-width-border-check-value: 0.5px; //公差
 
 $switch-width-border-check-l: $switch-width-border-check-base;
 $switch-width-border-check-default: ($switch-width-border-check-base - $switch-width-border-check-value * 1);
@@ -57,5 +58,6 @@ $switch-content-margin-right-s: $comp-margin-xxs;
 // 动画
 $switch-transition: all $anim-duration-base $anim-time-fn-easing;
 $switch-handle-transition: all $anim-duration-base $anim-time-fn-easing;
-$switch-content-transition: padding $anim-duration-base $anim-time-fn-easing,
+$switch-content-transition:
+  padding $anim-duration-base $anim-time-fn-easing,
   opacity $anim-duration-base linear;

package/styles/components/table/_index.scss

@@ -1,6 +1,7 @@
-@import "../../vars.scss";
-@import "../../mixins/_reset.scss";
-@import "./_var.scss";
+@use "../../_vars.scss" as *;
+@use "../../vars.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "./_var.scss" as *;
 
 // 表格基础样式
 .#{$prefix}-table {
@@ -75,20 +76,17 @@
     display: block;
   }
 
-  // 当单元格启用省略时
-  &__cell--ellipsis {
-    overflow: hidden;
-    position: relative;
-    max-width: 100%;
+  // 当单元格启用省略�?  &__cell--ellipsis {
+  overflow: hidden;
+  position: relative;
+  max-width: 100%;
 
-    // 确保内部内容不会超出
-    & > div {
-      width: 100%;
-      max-width: 100%;
-      box-sizing: border-box;
-    }
+  // 确保内部内容不会超出
+  & > div {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
   }
-
   // 边框模式
   &--bordered {
     td,
@@ -106,11 +104,9 @@
     }
   }
 
-  // 斑马纹
-  &--stripe {
-    tbody tr:nth-of-type(odd) {
-      background-color: $table-highlight-bg-color;
-    }
+  // 斑马�?  &--stripe {
+  tbody tr:nth-of-type(odd) {
+    background-color: $table-highlight-bg-color;
   }
 
   // 悬浮效果
@@ -150,8 +146,7 @@
   &--layout-fixed {
     table-layout: fixed;
 
-    // 固定布局下，省略文本需要特殊处理
-    td.#{$prefix}-table__cell--ellipsis,
+    // 固定布局下，省略文本需要特殊处�?    td.#{$prefix}-table__cell--ellipsis,
     th.#{$prefix}-table__cell--ellipsis {
       overflow: hidden;
       position: relative;
@@ -175,12 +170,10 @@
     }
   }
 
-  // 空数据
-  &__empty-row {
-    td {
-      padding: 0;
-      border: 0;
-    }
+  // 空数�?  &__empty-row {
+  td {
+    padding: 0;
+    border: 0;
   }
 
   &__empty {

package/styles/components/table/_var.scss

@@ -1,5 +1,5 @@
+@use "../../_vars.scss" as *;
 // 表格变量
-// 参考 table_tdesign/style/table/_var.less
 
 // Color
 $table-bg: $bg-color-container;

package/styles/components/tabs/_index.scss

@@ -1,7 +1,8 @@
-@import "../../vars.scss";
-@import "./vars.scss";
-@import "./_mixins.scss";
-@import "../../mixins/reset.scss";
+@use "../../_vars.scss" as *;
+@use "../../vars.scss" as *;
+@use "./vars.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/reset.scss" as *;
 
 .#{$prefix}-tabs {
   @include reset;
@@ -108,58 +109,58 @@
     &.#{$prefix}-is-active {
       color: $tab-default-text-select;
       // font-weight: 500;
-      text-shadow: $tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代替
-    }
+      text-shadow: $tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代�?    }
 
-    &.#{$prefix}-is-disabled {
-      color: $tab-default-text-disabled;
-      cursor: not-allowed;
-    }
+      &.#{$prefix}-is-disabled {
+        color: $tab-default-text-disabled;
+        cursor: not-allowed;
+      }
 
-    & > .remove-btn {
-      margin-left: $tab-btn-remove-btn-margin-left;
-      transition: $tab-btn-remove-btn-transition;
-      display: flex;
+      & > .remove-btn {
+        margin-left: $tab-btn-remove-btn-margin-left;
+        transition: $tab-btn-remove-btn-transition;
+        display: flex;
+      }
     }
-  }
-  &__content {
-    overflow: hidden;
-    position: relative;
-  }
-  &__bar {
-    position: absolute;
-    background-color: $tab-default-bar-bg-color;
-    z-index: 1;
-    transition: $tab-bar-transition;
-    border-radius: $border-radius-small;
-
-    &.#{$prefix}-is-top {
-      bottom: 0;
-      left: 0;
-      height: $tab-default-stroke-size;
+    &__content {
+      overflow: hidden;
+      position: relative;
     }
+    &__bar {
+      position: absolute;
+      background-color: $tab-default-bar-bg-color;
+      z-index: 1;
+      transition: $tab-bar-transition;
+      border-radius: $border-radius-small;
+
+      &.#{$prefix}-is-top {
+        bottom: 0;
+        left: 0;
+        height: $tab-default-stroke-size;
+      }
 
-    &.#{$prefix}-is-bottom {
-      top: 0;
-      left: 0;
-      height: $tab-default-stroke-size;
-    }
+      &.#{$prefix}-is-bottom {
+        top: 0;
+        left: 0;
+        height: $tab-default-stroke-size;
+      }
 
-    &.#{$prefix}-is-left {
-      top: 0;
-      right: 0;
-      width: $tab-default-stroke-size;
-    }
+      &.#{$prefix}-is-left {
+        top: 0;
+        right: 0;
+        width: $tab-default-stroke-size;
+      }
 
-    &.#{$prefix}-is-right {
-      top: 0;
-      left: 0;
-      width: $tab-default-stroke-size;
+      &.#{$prefix}-is-right {
+        top: 0;
+        left: 0;
+        width: $tab-default-stroke-size;
+      }
     }
   }
-}
-.#{$prefix}-tab-panel {
-  &.#{$prefix}-is-hidden {
-    display: none;
+  .#{$prefix}-tab-panel {
+    &.#{$prefix}-is-hidden {
+      display: none;
+    }
   }
 }

package/styles/components/tabs/_vars.scss

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 // 默认选项卡
 $tab-default-bg: $bg-color-container;
 $tab-default-bg-hover: $bg-color-container-hover;
@@ -56,7 +57,7 @@ $tab-btn-border: 1px solid $tab-card-stroke; // 按钮边框
 $tab-bar-operations-border: 1px solid $tab-card-stroke; // 卡片边框
 
 // 动画&过度
-$tab-nav-scroll-transform: translate(0); // 滚动栏滚动过度
+$tab-nav-scroll-transform: translate(0); // 滚动栏滚动动画
 $tab-btn-fade-transform-left: translateX(-50px); // 按钮过渡动画
 $tab-btn-fade-transform-right: translateX(50px); // 按钮过渡动画
 $tab-nav-warp-is-smooth-transform: transform $anim-duration-moderate $anim-time-fn-ease-out; // smooth 过渡动画

package/styles/components/tag/_index.scss

@@ -1,6 +1,7 @@
-@import './_var.scss';
+@use "../../_vars.scss" as *;
+@use './_var.scss' as *;
 
-@import '../../mixins/reset.scss';
+@use '../../mixins/reset.scss' as *;
 
 .#{$prefix}-tag {
   @include reset;

package/styles/components/tag/_var.scss

@@ -1,5 +1,6 @@
+@use "../../_vars.scss" as *;
 // <component>-[type]-[attrtype]-<attr>-[status]
-@import '../../vars.scss';
+@use '../../vars.scss' as *;
 // checked [false - default; true - primary]
 $tag-default-background-color: $bg-color-component;
 $tag-default-border-color: transparent;

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

@@ -1,9 +1,10 @@
-@import '../../_vars.scss';
-@import './_vars.scss';
-@import '../../utilities/_animation.scss';
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
+@use './_vars.scss' as *;
+@use '../../utilities/_animation.scss' as *;
 
-@import '../../mixins/_reset.scss';
-@import '../../mixins/_scrollbar.scss';
+@use '../../mixins/_reset.scss' as *;
+@use '../../mixins/_scrollbar.scss' as *;
 
 .#{$prefix}-tag-input {
   @include reset;
@@ -123,7 +124,7 @@
   margin-right: $comp-margin-s;
 }
 
-/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */
+/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间�?8px */
 .#{$prefix}-tag-input--break-line.#{$prefix}-tag-input--with-tag:not(
     .#{$prefix}-input--auto-width
   ),
@@ -139,14 +140,14 @@
   }
 }
 
-/** auto-width 模式，左右边距相同 */
+/** auto-width 模式，左右边距相�?*/
 .#{$prefix}-tag-input.#{$prefix}-input--auto-width {
   .#{$prefix}-input {
     padding-right: 0;
   }
 }
 
-/** max-rows模式，限制最大高度 */
+/** max-rows模式，限制最大高�?*/
 .#{$prefix}-tag-input--max-rows {
   .#{$prefix}-input {
     &.#{$prefix}-size-s {

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

@@ -1,3 +1,4 @@
+@use "../../_vars.scss" as *;
 $tag-input-height-s: $comp-size-xs;
 $tag-input-height-default: $comp-size-m;
 $tag-input-height-l: $comp-size-xl;

package/styles/mixins/_focus.scss

@@ -1,3 +1,4 @@
+@use "../_vars.scss" as *;
 @mixin tab-focus-style-rect() {
   &:focus-visible {
     outline: 2px solid $brand-color;

package/styles/mixins/_reset.scss

@@ -1,4 +1,5 @@
-@import '../_vars.scss';
+@use "../_vars.scss" as *;
+@use '../_vars.scss' as *;
 
 @mixin reset {
   font: $font-body-medium;