@tendaui/components 1.0.0 → 1.0.2

package/styles/components/table/_index.scss

@@ -0,0 +1,193 @@
+@import "../../vars.scss";
+@import "../../mixins/_reset.scss";
+@import "./_var.scss";
+
+// 表格基础样式
+.#{$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;
+  }
+}

package/styles/components/table/_var.scss

@@ -0,0 +1,52 @@
+// 表格变量
+// 参考 table_tdesign/style/table/_var.less
+
+// 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;

package/styles/components/tabs/_index.scss

@@ -0,0 +1,165 @@
+@import "../../vars.scss";
+@import "./vars.scss";
+@import "./_mixins.scss";
+@import "../../mixins/reset.scss";
+
+.#{$prefix}-tabs {
+  @include reset;
+  overflow: hidden;
+  background-color: $tab-default-bg;
+
+  &__header {
+    &.#{$prefix}-is-left {
+      float: left;
+    }
+
+    &.#{$prefix}-is-right {
+      float: right;
+    }
+    .t-icon {
+      font-size: $tab-icon-size;
+    }
+  }
+  &__nav {
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+  }
+
+  &__nav-container {
+    position: relative;
+
+    &.#{$prefix}-is-addable {
+      margin-right: $tab-btn-width;
+    }
+
+    &.#{$prefix}-tabs__nav--card {
+      // border-bottom: 1px solid $tab-default-stroke;
+
+      &::after {
+        content: "";
+        background-color: transparent;
+      }
+    }
+  }
+
+  &__nav-item {
+    display: inline-flex;
+    align-items: center;
+    font: $font-body-medium;
+    color: $tab-default-text;
+    position: relative;
+    overflow: hidden;
+    z-index: 0;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: $tab-nav-item-transition;
+
+    &-wrapper {
+      display: flex;
+      align-items: center;
+      height: $tab-nav-item-wrapper-height;
+      padding: $tab-nav-item-wrapper-padding;
+      margin-left: $tab-nav-item-margin-left;
+      margin-right: $tab-nav-item-margin-right;
+      border-radius: $border-radius-default;
+      transition: $tab-nav-item-transition;
+
+      --ripple-color: $bg-color-container-active;
+    }
+
+    &.#{$prefix}-size-l {
+      font: $tab-nav-item-font;
+
+      .#{$prefix}-tabs__nav-item-wrapper {
+        height: $tab-nav-item-wrapper-height-large;
+        padding: $tab-nav-item-wrapper-padding-large;
+      }
+    }
+
+    &-text-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    &:not(.#{$prefix}-is-disabled):not(.#{$prefix}-is-active):hover {
+      .#{$prefix}-tabs__nav-item-wrapper {
+        background-color: $bg-color-container-hover;
+      }
+    }
+
+    &.#{$prefix}-is-left,
+    &.#{$prefix}-is-right {
+      display: flex;
+      align-items: center;
+    }
+
+    &.#{$prefix}-size-m {
+      height: $tab-height-middle;
+      line-height: $tab-height-middle;
+    }
+
+    &.#{$prefix}-size-l {
+      height: $tab-height-large;
+      line-height: $tab-height-large;
+    }
+
+    &.#{$prefix}-is-active {
+      color: $tab-default-text-select;
+      // font-weight: 500;
+      text-shadow: $tab-btn-text-shadow-active; // 由于在wins上字体变粗时会扩大width的宽度，导致有抖动的问题；因此采用text-shadow来代替
+    }
+
+    &.#{$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;
+    }
+  }
+  &__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-left {
+      top: 0;
+      right: 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;
+  }
+}

package/styles/components/tabs/_mixins.scss

@@ -0,0 +1,11 @@
+@mixin bar-track-pseudo($w: 100%, $h: 100%, $top: auto, $right: auto, $bottom: auto, $left: auto) {
+  content: "";
+  width: $w;
+  height: $h;
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+  background-color: $tab-card-stroke;
+}

package/styles/components/tabs/_vars.scss

@@ -0,0 +1,71 @@
+// 默认选项卡
+$tab-default-bg: $bg-color-container;
+$tab-default-bg-hover: $bg-color-container-hover;
+$tab-default-bg-active: $bg-color-container-active;
+
+$tab-default-text: $text-color-secondary;
+$tab-default-text-select: $brand-color;
+$tab-default-text-disabled: $text-color-disabled;
+
+$tab-default-icon: $text-color-secondary;
+$tab-default-icon-select: $brand-color;
+$tab-default-icon-disabled: $text-color-disabled;
+
+$tab-default-stroke: $component-stroke;
+$tab-default-bar-bg-color: $brand-color;
+$tab-default-stroke-size: 3px;
+
+// 卡片选项卡
+$tab-card-bg: $bg-color-secondarycontainer;
+$tab-card-bg-hover: $bg-color-secondarycontainer-hover;
+$tab-card-bg-active: $bg-color-secondarycontainer-active;
+$tab-card-bg-select: $bg-color-container;
+
+$tab-card-text: $text-color-secondary;
+$tab-card-text-select: $brand-color;
+$tab-card-text-disabled: $text-color-disabled;
+
+$tab-card-icon: $text-color-secondary;
+$tab-card-icon-select: $text-color-primary;
+$tab-card-icon-disabled: $text-color-disabled;
+
+$tab-card-stroke: $component-stroke;
+
+// 其他
+$tab-height-middle: $comp-size-xxl;
+$tab-height-large: $comp-size-xxxxl;
+$tab-nav-item-wrapper-height: $comp-size-m;
+$tab-nav-item-wrapper-height-large: $comp-size-xxl;
+$tab-btn-width: 40px;
+$tab-nav-item-margin-left: $comp-margin-s;
+$tab-nav-item-margin-right: $comp-margin-s;
+$tab-nav-item-wrapper-padding: 0 $comp-paddingLR-s;
+$tab-nav-item-wrapper-padding-large: 0 $comp-paddingLR-m;
+$tab-btn-remove-btn-margin-left: $comp-margin-s;
+$tab-nav-card-nav-item-padding-right: $comp-paddingLR-l;
+$tab-nav-card-nav-item-padding-left: $comp-paddingLR-l;
+$tab-nav-card-nav-item-padding-right-large: $comp-paddingLR-xl;
+$tab-nav-card-nav-item-padding-left-large: $comp-paddingLR-xl;
+
+// 尺寸
+$tab-icon-size: $font-size-l; // icon尺寸
+$tab-nav-item-font: $font-body-large; // tab文本字体大小
+
+// 圆角&边框
+$tab-btn-border: 1px solid $tab-card-stroke; // 按钮边框
+$tab-bar-operations-border: 1px solid $tab-card-stroke; // 卡片边框
+
+// 动画&过度
+$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 过渡动画
+$tab-nav-item-transition: background-color $anim-time-fn-easing $anim-duration-base;
+$tab-btn-remove-btn-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); // 删除按钮动画过渡
+$tab-btn-icon-close-transition: color $anim-time-fn-easing $anim-duration-base; // 关闭按钮过渡动画
+
+// 阴影
+$tab-bar-operations-btn-box-shadow: -10px 0 20px 5px rgba(0, 0, 0, 5%); // 按钮阴影
+$tab-bar-transition: all $anim-duration-moderate $anim-time-fn-easing; // 选项卡过渡动画
+$tab-btn-box-shadow: 10px 0px 20px 5px rgba(0, 0, 0, 0.05); // 按钮阴影
+$tab-btn-text-shadow-active: 0 0 0.3px currentcolor; // 按钮选中颜色 win系统兼容