@tendaui/components 1.2.4 → 1.3.0

package/styles/components/switch/_vars.scss

@@ -1,63 +1,63 @@
-@use "../../_vars.scss" as *;
-
-// 颜色
-$switch-checked-bg-color: $brand-color;
-$switch-checked-bg-color-hover: $brand-color-hover;
-$switch-checked-bg-color-loading: $brand-color-focus;
-$switch-checked-bg-color-disabled: $brand-color-disabled;
-
-$switch-unchecked-bg-color: $bg-color-secondarycomponent;
-$switch-unchecked-bg-color-hover: $bg-color-secondarycomponent-hover;
-$switch-unchecked-bg-color-loading: $bg-color-component-disabled;
-$switch-unchecked-bg-color-disabled: $bg-color-component-disabled;
-
-$switch-handle-bg-color: #fff;
-$switch-content-color-checked: $text-color-anti;
-$switch-content-color-unchecked: $text-color-anti;
-
-// 尺寸
-$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 / 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-l: $switch-width-border-base;
-$switch-width-border-default: ($switch-width-border-base - $switch-width-border-value * 1);
-$switch-width-border-s: ($switch-width-border-base - $switch-width-border-value * 2);
-
-//change check handle size
-$switch-width-border-check-base: 3px;
-$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);
-$switch-width-border-check-s: ($switch-width-border-check-base - $switch-width-border-check-value * 2);
-
-// 字体
-$switch-content-font-size-l: $font-size-l;
-$switch-content-font-size-default: $font-size-s;
-$switch-content-font-size-s: 9px;
-
-// 间距
-$switch-content-margin-left-l: calc($switch-min-width-l / 2 + 4px);
-$switch-content-margin-right-l: $comp-margin-s;
-
-$switch-content-margin-left-default: calc($switch-min-width-default / 2 + 2px);
-$switch-content-margin-right-default: $comp-margin-xs;
-
-$switch-content-margin-left-s: calc($switch-min-width-s / 2 + 2px);
-$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,
-  opacity $anim-duration-base linear;
+@use "../../_vars.scss" as *;
+
+// 颜色
+$switch-checked-bg-color: $brand-color;
+$switch-checked-bg-color-hover: $brand-color-hover;
+$switch-checked-bg-color-loading: $brand-color-focus;
+$switch-checked-bg-color-disabled: $brand-color-disabled;
+
+$switch-unchecked-bg-color: $bg-color-secondarycomponent;
+$switch-unchecked-bg-color-hover: $bg-color-secondarycomponent-hover;
+$switch-unchecked-bg-color-loading: $bg-color-component-disabled;
+$switch-unchecked-bg-color-disabled: $bg-color-component-disabled;
+
+$switch-handle-bg-color: #fff;
+$switch-content-color-checked: $text-color-anti;
+$switch-content-color-unchecked: $text-color-anti;
+
+// 尺寸
+$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 / 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-l: $switch-width-border-base;
+$switch-width-border-default: ($switch-width-border-base - $switch-width-border-value * 1);
+$switch-width-border-s: ($switch-width-border-base - $switch-width-border-value * 2);
+
+//change check handle size
+$switch-width-border-check-base: 3px;
+$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);
+$switch-width-border-check-s: ($switch-width-border-check-base - $switch-width-border-check-value * 2);
+
+// 字体
+$switch-content-font-size-l: $font-size-l;
+$switch-content-font-size-default: $font-size-s;
+$switch-content-font-size-s: 9px;
+
+// 间距
+$switch-content-margin-left-l: calc($switch-min-width-l / 2 + 4px);
+$switch-content-margin-right-l: $comp-margin-s;
+
+$switch-content-margin-left-default: calc($switch-min-width-default / 2 + 2px);
+$switch-content-margin-right-default: $comp-margin-xs;
+
+$switch-content-margin-left-s: calc($switch-min-width-s / 2 + 2px);
+$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,
+  opacity $anim-duration-base linear;

package/styles/components/table/_index.scss

@@ -1,186 +1,194 @@
-@use "../../_vars.scss" as *;
-@use "../../vars.scss" as *;
-@use "../../mixins/_reset.scss" as *;
-@use "./_var.scss" as *;
-
-// 表格基础样式
-.#{$prefix}-table {
-  @include reset;
-
-  width: 100%;
-  font: $table-font;
-  color: $table-text-color;
-  background-color: $table-bg;
-  position: relative;
-
-  &__content {
-    position: relative;
-    overflow: auto;
-  }
-
-  &__table {
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-
-  // 表头
-  &__header {
-    th {
-      color: $table-head-text-color;
-      font-weight: 500;
-    }
-  }
-
-  // 表体
-  &__body {
-    tr {
-      background-color: $table-bg;
-    }
-  }
-
-  // 单元格基础样式
-  th,
-  td {
-    position: relative;
-    padding: $table-padding-normal;
-    border-bottom: 1px solid $table-border-color;
-    line-height: $table-line-height;
-    font-weight: normal;
-    overflow-wrap: break-word;
-    background-color: inherit;
-    box-sizing: border-box;
-    text-align: left;
-  }
-
-  // 对齐方式
-  .#{$prefix}-align-left {
-    text-align: left;
-  }
-
-  .#{$prefix}-align-center {
-    text-align: center;
-  }
-
-  .#{$prefix}-align-right {
-    text-align: right;
-  }
-
-  // 文本省略
-  &__ellipsis {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-    max-width: 100%;
-    display: block;
-  }
-
-  // 当单元格启用省略�?  &__cell--ellipsis {
-  overflow: hidden;
-  position: relative;
-  max-width: 100%;
-
-  // 确保内部内容不会超出
-  & > div {
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-  // 边框模式
-  &--bordered {
-    td,
-    th {
-      border-left: 1px solid $table-border-color;
-
-      &:first-child {
-        border-left-width: 0;
-      }
-    }
-
-    &__content {
-      border: 1px solid $table-border-color;
-      border-radius: var(--td-border-radius-default, 4px);
-    }
-  }
-
-  // 斑马�?  &--stripe {
-  tbody tr:nth-of-type(odd) {
-    background-color: $table-highlight-bg-color;
-  }
-
-  // 悬浮效果
-  &--hover {
-    tbody tr {
-      transition: background-color 0.2s linear;
-
-      &:hover {
-        background-color: $table-highlight-bg-color-hover;
-      }
-    }
-  }
-
-  // 尺寸
-  &--size-small {
-    th,
-    td {
-      padding: $table-padding-small;
-    }
-  }
-
-  &--size-medium {
-    th,
-    td {
-      padding: $table-padding-normal;
-    }
-  }
-
-  &--size-large {
-    th,
-    td {
-      padding: $table-padding-large;
-    }
-  }
-
-  // 布局方式
-  &--layout-fixed {
-    table-layout: fixed;
-
-    // 固定布局下，省略文本需要特殊处�?    td.#{$prefix}-table__cell--ellipsis,
-    th.#{$prefix}-table__cell--ellipsis {
-      overflow: hidden;
-      position: relative;
-    }
-  }
-
-  &--layout-auto {
-    table-layout: auto;
-  }
-
-  // 垂直对齐
-  &--vertical-align-top {
-    tbody td {
-      vertical-align: top;
-    }
-  }
-
-  &--vertical-align-bottom {
-    tbody td {
-      vertical-align: bottom;
-    }
-  }
-
-  // 空数�?  &__empty-row {
-  td {
-    padding: 0;
-    border: 0;
-  }
-
-  &__empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: $table-empty-min-height;
-    color: $table-color-empty;
-  }
-}
+@use "../../_vars.scss" as *;
+@use "../../vars.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "./_var.scss" as *;
+
+// 表格基础样式
+.#{$prefix}-table {
+  @include reset;
+
+  width: 100%;
+  font: $table-font;
+  color: $table-text-color;
+  background-color: $table-bg;
+  position: relative;
+
+  &__content {
+    position: relative;
+    overflow: auto;
+  }
+
+  &__table {
+    width: 100%;
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  // 表头
+  &__header {
+    th {
+      color: $table-head-text-color;
+      font-weight: 500;
+    }
+  }
+
+  // 表体
+  &__body {
+    tr {
+      background-color: $table-bg;
+    }
+  }
+
+  // 单元格基础样式
+  th,
+  td {
+    position: relative;
+    padding: $table-padding-normal;
+    border-bottom: 1px solid $table-border-color;
+    line-height: $table-line-height;
+    font-weight: normal;
+    overflow-wrap: break-word;
+    background-color: inherit;
+    box-sizing: border-box;
+    text-align: start;
+  }
+
+  // 对齐方式
+  .#{$prefix}-align-left {
+    text-align: start;
+  }
+
+  .#{$prefix}-align-center {
+    text-align: center;
+  }
+
+  .#{$prefix}-align-right {
+    text-align: end;
+  }
+
+  // 文本省略
+  &__ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+    max-width: 100%;
+    display: block;
+  }
+
+  // 当单元格启用省略时
+  &__cell--ellipsis {
+    overflow: hidden;
+    position: relative;
+    max-width: 100%;
+
+    // 确保内部内容不会超出
+    & > div {
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+  }
+
+  // 边框模式
+  &--bordered {
+    td,
+    th {
+      border-inline-start: 1px solid $table-border-color;
+
+      &:first-child {
+        border-inline-start-width: 0;
+      }
+    }
+
+    &__content {
+      border: 1px solid $table-border-color;
+      border-radius: var(--td-border-radius-default, 4px);
+    }
+  }
+
+  // 斑马纹
+  &--stripe {
+    tbody tr:nth-of-type(odd) {
+      background-color: $table-highlight-bg-color;
+    }
+  }
+
+  // 悬浮效果
+  &--hover {
+    tbody tr {
+      transition: background-color 0.2s linear;
+
+      &:hover {
+        background-color: $table-highlight-bg-color-hover;
+      }
+    }
+  }
+
+  // 尺寸
+  &--size-small {
+    th,
+    td {
+      padding: $table-padding-small;
+    }
+  }
+
+  &--size-medium {
+    th,
+    td {
+      padding: $table-padding-normal;
+    }
+  }
+
+  &--size-large {
+    th,
+    td {
+      padding: $table-padding-large;
+    }
+  }
+
+  // 布局方式
+  &--layout-fixed {
+    table-layout: fixed;
+
+    // 固定布局下，省略文本需要特殊处理
+    td.#{$prefix}-table__cell--ellipsis,
+    th.#{$prefix}-table__cell--ellipsis {
+      overflow: hidden;
+      position: relative;
+    }
+  }
+
+  &--layout-auto {
+    table-layout: auto;
+  }
+
+  // 垂直对齐
+  &--vertical-align-top {
+    tbody td {
+      vertical-align: top;
+    }
+  }
+
+  &--vertical-align-bottom {
+    tbody td {
+      vertical-align: bottom;
+    }
+  }
+
+  // 空行
+  &__empty-row {
+    td {
+      padding: 0;
+      border: 0;
+    }
+
+    &__empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: $table-empty-min-height;
+      color: $table-color-empty;
+    }
+  }
+}

package/styles/components/table/_var.scss

@@ -1,52 +1,52 @@
-@use "../../_vars.scss" as *;
-// 表格变量
-
-// Color
-$table-bg: $bg-color-container;
-$table-text-color: $text-color-primary;
-$table-head-text-color: $text-color-placeholder;
-$table-border-color: $component-border;
-$table-link-text-color: $text-color-link;
-$table-action-bg-color: $bg-color-container-hover;
-$table-highlight-bg-color: $bg-color-secondarycontainer;
-$table-highlight-bg-color-hover: $bg-color-secondarycontainer-hover;
-$table-highlight-dark-bg-color: $bg-color-container-hover;
-$table-row-disabled-color: $text-color-disabled;
-$table-icon-default-color: $text-color-placeholder;
-$table-icon-active-color: $brand-color;
-$table-filter-icon-default-color: $text-color-primary;
-$table-color-empty: $text-color-disabled;
-$table-fixed-cell-border-color: $component-border;
-$table-sort-bg-color: $bg-color-secondarycontainer;
-
-// Size
-$table-line-height: $text-line-height-base;
-$table-line-height-half: calc(#{$font-size-base} + 2px);
-$table-font: $font-body-medium;
-$table-icon-size: $font-size-l;
-$table-loading-size: $table-icon-size;
-
-$table-padding-horizontal: $comp-paddingLR-l;
-$table-padding-small: $comp-paddingTB-s $comp-paddingLR-s;
-$table-padding-normal: $comp-paddingTB-m $comp-paddingLR-l;
-$table-padding-large: $comp-paddingTB-l $comp-paddingLR-xl;
-$table-td-padding-vertical-top: 13px;
-$table-td-padding-vertical-bottom: 11px;
-$table-td-padding-vertical: $comp-paddingTB-m;
-$table-td-padding-horizontal: $comp-paddingLR-l;
-$table-td-editable-icon-margin: $comp-margin-s;
-$table-pagination-padding-normal: $comp-paddingTB-l $comp-paddingLR-l;
-$table-controller-trigger-padding: $comp-paddingTB-l 0;
-$table-default-pagination-padding: $comp-paddingTB-l $comp-paddingLR-l;
-
-$table-fixed-cell-box-shadow-spread-radius: -10px;
-$table-fixed-cell-border-width: 4px;
-$table-fixed-cell-border-width-light: 2px;
-$table-fixed-cell-border: #{$table-fixed-cell-border-width} solid $table-fixed-cell-border-color;
-$table-fixed-cell-border-light: #{$table-fixed-cell-border-width-light} solid $table-fixed-cell-border-color;
-
-// Other
-$table-double-sort-icon-space: $comp-margin-xxs;
-$table-filter-icon-margin-left: $comp-margin-s;
-$table-controller-item-margin: $comp-margin-l;
-$table-empty-min-height: 120px;
+@use "../../_vars.scss" as *;
+// 表格变量
+
+// Color
+$table-bg: $bg-color-container;
+$table-text-color: $text-color-primary;
+$table-head-text-color: $text-color-placeholder;
+$table-border-color: $component-border;
+$table-link-text-color: $text-color-link;
+$table-action-bg-color: $bg-color-container-hover;
+$table-highlight-bg-color: $bg-color-secondarycontainer;
+$table-highlight-bg-color-hover: $bg-color-secondarycontainer-hover;
+$table-highlight-dark-bg-color: $bg-color-container-hover;
+$table-row-disabled-color: $text-color-disabled;
+$table-icon-default-color: $text-color-placeholder;
+$table-icon-active-color: $brand-color;
+$table-filter-icon-default-color: $text-color-primary;
+$table-color-empty: $text-color-disabled;
+$table-fixed-cell-border-color: $component-border;
+$table-sort-bg-color: $bg-color-secondarycontainer;
+
+// Size
+$table-line-height: $text-line-height-base;
+$table-line-height-half: calc(#{$font-size-base} + 2px);
+$table-font: $font-body-medium;
+$table-icon-size: $font-size-l;
+$table-loading-size: $table-icon-size;
+
+$table-padding-horizontal: $comp-paddingLR-l;
+$table-padding-small: $comp-paddingTB-s $comp-paddingLR-s;
+$table-padding-normal: $comp-paddingTB-m $comp-paddingLR-l;
+$table-padding-large: $comp-paddingTB-l $comp-paddingLR-xl;
+$table-td-padding-vertical-top: 13px;
+$table-td-padding-vertical-bottom: 11px;
+$table-td-padding-vertical: $comp-paddingTB-m;
+$table-td-padding-horizontal: $comp-paddingLR-l;
+$table-td-editable-icon-margin: $comp-margin-s;
+$table-pagination-padding-normal: $comp-paddingTB-l $comp-paddingLR-l;
+$table-controller-trigger-padding: $comp-paddingTB-l 0;
+$table-default-pagination-padding: $comp-paddingTB-l $comp-paddingLR-l;
+
+$table-fixed-cell-box-shadow-spread-radius: -10px;
+$table-fixed-cell-border-width: 4px;
+$table-fixed-cell-border-width-light: 2px;
+$table-fixed-cell-border: #{$table-fixed-cell-border-width} solid $table-fixed-cell-border-color;
+$table-fixed-cell-border-light: #{$table-fixed-cell-border-width-light} solid $table-fixed-cell-border-color;
+
+// Other
+$table-double-sort-icon-space: $comp-margin-xxs;
+$table-filter-icon-margin-left: $comp-margin-s;
+$table-controller-item-margin: $comp-margin-l;
+$table-empty-min-height: 120px;