@tendaui/components 1.0.0

package/styles/components/tag/_index.scss

@@ -0,0 +1,316 @@
+@import './_var.scss';
+
+@import '../../mixins/reset.scss';
+
+.#{$prefix}-tag {
+  @include reset;
+
+  display: inline-flex;
+  align-items: center;
+  flex-direction: row;
+  padding: $tag-medium-padding;
+  height: $tag-height-medium;
+  font: $tag-medium-font;
+  color: $tag-text-color;
+  border-radius: $tag-border-radius-square;
+  border: $tag-default-border-width solid $tag-default-border-color;
+  white-space: nowrap;
+
+  .t-icon {
+    margin-right: $tag-icon-margin-right;
+    width: $tag-icon-size;
+    height: $tag-icon-size;
+    flex-shrink: 0;
+  }
+
+  .#{$prefix}-tag__icon-close {
+    margin-right: 0;
+    margin-left: $tag-close-icon-margin-right;
+    font: $tag-large-font;
+    cursor: pointer;
+    transition: color $anim-duration-base $anim-time-fn-easing;
+  }
+
+  &--default {
+    color: $tag-default-text-color;
+    background-color: $tag-default-background-color;
+
+    .#{$prefix}-tag__icon-close {
+      color: $tag-close-icon-color;
+
+      &:hover {
+        color: $tag-close-icon-hover-color;
+      }
+    }
+
+    &:active {
+      cursor: default;
+    }
+
+    // 失效标签
+    &.#{$prefix}-tag--disabled {
+      color: $tag-disabled-color;
+      background-color: $tag-disabled-bg;
+      border-color: $component-border;
+      cursor: not-allowed;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+
+      .t-icon {
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-default-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-default-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-default-border-color;
+      background-color: $tag-default-color-light;
+    }
+  }
+
+  &--primary {
+    background-color: $tag-primary-color;
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-primary-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-primary-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-primary-border-color;
+      background-color: $tag-primary-color-light;
+    }
+
+    &.#{$prefix}-tag--light,
+    &.#{$prefix}-tag--outline,
+    &.#{$prefix}-tag--light-outline {
+      color: $tag-primary-color;
+
+      .#{$prefix}-tag__icon-close {
+        &:hover {
+          color: $brand-color-hover;
+        }
+      }
+    }
+  }
+
+  &--success {
+    background-color: $tag-success-color;
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-success-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-success-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-success-border-color;
+      background-color: $tag-success-color-light;
+    }
+
+    &.#{$prefix}-tag--light,
+    &.#{$prefix}-tag--outline,
+    &.#{$prefix}-tag--light-outline {
+      color: $tag-success-color;
+
+      .#{$prefix}-tag__icon-close {
+        &:hover {
+          color: $success-color-hover;
+        }
+      }
+    }
+  }
+
+  &--warning {
+    background-color: $tag-warning-color;
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-warning-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-warning-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-warning-border-color;
+      background-color: $tag-warning-color-light;
+    }
+
+    &.#{$prefix}-tag--light,
+    &.#{$prefix}-tag--outline,
+    &.#{$prefix}-tag--light-outline {
+      color: $tag-warning-color;
+
+      .#{$prefix}-tag__icon-close {
+        &:hover {
+          color: $warning-color-hover;
+        }
+      }
+    }
+  }
+
+  &--danger {
+    background-color: $tag-danger-color;
+
+    &.#{$prefix}-tag--outline {
+      border-color: $tag-outline-danger-border-color;
+    }
+
+    &.#{$prefix}-tag--light {
+      background-color: $tag-error-color-light;
+    }
+
+    &.#{$prefix}-tag--light-outline {
+      border-color: $tag-outline-danger-border-color;
+      background-color: $tag-error-color-light;
+    }
+
+    .#{$prefix}-tag__icon-close {
+      fill: $error-color;
+
+      &:hover {
+        fill: $error-color-hover;
+      }
+    }
+
+    &.#{$prefix}-tag--light,
+    &.#{$prefix}-tag--outline,
+    &.#{$prefix}-tag--light-outline {
+      color: $tag-danger-color;
+
+      .#{$prefix}-tag__icon-close {
+        &:hover {
+          color: $error-color-hover;
+        }
+      }
+    }
+  }
+
+  &--dark:not(.#{$prefix}-tag--default) {
+    .#{$prefix}-tag__icon-close {
+      color: $tag-close-icon-color--dark;
+
+      &:hover {
+        color: $tag-close-icon-hover-color--dark;
+      }
+    }
+  }
+
+  &.#{$prefix}-tag--outline {
+    background: transparent;
+  }
+
+  &.#{$prefix}-size-s {
+    padding: $tag-small-padding;
+    height: $tag-height-small;
+    font: $tag-small-font;
+
+    .t-icon {
+      font-size: $tag-small-font;
+    }
+  }
+
+  &.#{$prefix}-size-l {
+    padding: $tag-large-padding;
+    height: $tag-height-large;
+    font: $tag-large-font;
+
+    .t-icon {
+      font: $tag-large-font;
+    }
+  }
+
+  &.#{$prefix}-tag--round {
+    border-radius: $tag-border-radius-round;
+  }
+
+  &.#{$prefix}-tag--mark {
+    border-radius: 0 $tag-border-radius-round $tag-border-radius-round 0;
+  }
+
+  &.#{$prefix}-tag--ellipsis {
+    .#{$prefix}-tag--text {
+      display: inline-block;
+      // @include text-ellipsis();
+    }
+  }
+}
+
+.#{$prefix}-tag.#{$prefix}-tag--check:not(.#{$prefix}-tag--disabled) {
+  transition: background-color $anim-duration-base $anim-time-fn-easing;
+  cursor: pointer;
+
+  &.#{$prefix}-tag--default.#{$prefix}-tag--dark:not(.#{$prefix}-tag--checked) {
+    &:hover {
+      background-color: $tag-grey-hover-color;
+    }
+  }
+
+  &.#{$prefix}-tag--primary.#{$prefix}-tag--dark.#{$prefix}-tag--checked {
+    &:hover {
+      background-color: $tag-default-hover-color;
+    }
+  }
+
+  &.#{$prefix}-tag--default.#{$prefix}-tag--outline:not(
+      .#{$prefix}-tag--checked
+    ) {
+    &:hover {
+      color: $tag-grey-outline-hover-color;
+    }
+  }
+}
+
+.#{$prefix}-tag--check.#{$prefix}-tag--disabled.#{$prefix}-tag--primary {
+  &.#{$prefix}-tag--dark {
+    background-color: $tag-default-disabled-color;
+    cursor: not-allowed;
+  }
+
+  &.#{$prefix}-tag--outline {
+    color: $tag-disabled-color;
+    background-color: $tag-grey-outline-disabled-color;
+    border-color: $tag-disabled-color;
+    cursor: not-allowed;
+  }
+}
+
+.#{$prefix}-check-tag-group {
+  .#{$prefix}-tag:not(:last-child) {
+    margin-right: $check-tag-margin-left;
+  }
+}
+
+a {
+  .#{$prefix}-tag {
+    cursor: pointer;
+    transition: all $anim-duration-base linear;
+
+    &:hover {
+      color: $link-tag-hover-color;
+      background-color: $link-tag-hover-bg;
+    }
+
+    &:active {
+      color: $link-tag-active-color;
+      background-color: $link-tag-active-bg;
+    }
+  }
+}

package/styles/components/tag/_var.scss

@@ -0,0 +1,85 @@
+// <component>-[type]-[attrtype]-<attr>-[status]
+@import '../../vars.scss';
+// checked [false - default; true - primary]
+$tag-default-background-color: $bg-color-component;
+$tag-default-border-color: transparent;
+$tag-default-hover-color: $brand-color-hover;
+$tag-default-click-color: $brand-color-active;
+$tag-default-disabled-color: $brand-color-disabled;
+$tag-checked-color: $text-color-anti;
+$tag-checked-background-color: $brand-color;
+$tag-check-hover-bg: $bg-color-component-hover;
+$tag-checked-hover-bg: $brand-color-hover;
+$tag-default-click-bg: $bg-color-component-active;
+
+$tag-grey-hover-color: $bg-color-component-hover;
+$tag-grey-outline-disabled-color: $bg-color-component-disabled;
+$tag-grey-outline-hover-color: $brand-color-hover;
+
+// disabled
+$tag-disabled-color: $text-color-disabled;
+$tag-disabled-bg: $bg-color-component-disabled;
+
+// dark color
+$tag-primary-color: $brand-color;
+$tag-success-color: $success-color;
+$tag-warning-color: $warning-color;
+$tag-danger-color: $error-color;
+
+// light color
+$tag-default-color-light: $bg-color-secondarycontainer;
+$tag-primary-color-light: $brand-color-light;
+$tag-success-color-light: $success-color-light;
+$tag-warning-color-light: $warning-color-light;
+$tag-error-color-light: $error-color-light;
+
+// border
+$tag-outline-default-border-color: $component-border;
+$tag-outline-primary-border-color: $tag-primary-color;
+$tag-outline-success-border-color: $tag-success-color;
+$tag-outline-warning-border-color: $tag-warning-color;
+$tag-outline-danger-border-color: $tag-danger-color;
+
+// font size
+$tag-small-font: $font-body-small;
+$tag-medium-font: $font-body-small;
+$tag-large-font: $font-body-medium;
+
+// padding
+$tag-small-padding: 0px $comp-paddingLR-xs;
+$tag-medium-padding: 0px $comp-paddingLR-s;
+$tag-large-padding: 0px $comp-paddingLR-m;
+
+// text color
+$tag-text-color: $text-color-anti;
+$tag-default-text-color: $text-color-primary;
+
+// shape
+$tag-border-radius-square: $border-radius-default;
+$tag-border-radius-round: $border-radius-extraLarge;
+
+// width
+$tag-default-border-width: 1px;
+
+// height
+$tag-height-small: $comp-size-xxs;
+$tag-height-medium: $comp-size-xs;
+$tag-height-large: $comp-size-m;
+
+// icon
+$tag-icon-size: calc($font-size-base + 2px);
+$tag-close-icon-color: $text-color-placeholder;
+$tag-close-icon-hover-color: $text-color-primary;
+$tag-close-icon-color--dark: $font-white-2;
+$tag-close-icon-hover-color--dark: $font-white-1;
+
+// link
+$link-tag-hover-bg: $bg-color-component-hover;
+$link-tag-hover-color: $brand-color;
+$link-tag-active-bg: $bg-color-component-active;
+$link-tag-active-color: $brand-color-active;
+
+// margin
+$tag-icon-margin-right: $comp-margin-xs;
+$tag-close-icon-margin-right: $comp-margin-s;
+$check-tag-margin-left: $comp-margin-s;

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

@@ -0,0 +1,163 @@
+@import '../../_vars.scss';
+@import './_vars.scss';
+@import '../../utilities/_animation.scss';
+
+@import '../../mixins/_reset.scss';
+@import '../../mixins/_scrollbar.scss';
+
+.#{$prefix}-tag-input {
+  @include reset;
+
+  .#{$prefix}-tag {
+    vertical-align: middle;
+    animation: t-fade-in $anim-duration-base ease-in-out;
+    margin: 3px $comp-margin-xs 3px 0;
+  }
+
+  .#{$prefix}-tag-input__drag_wrapper + .#{$prefix}-tag-input__drag_wrapper {
+    margin-left: $comp-margin-xs;
+  }
+
+  .#{$prefix}-input {
+    overflow: hidden;
+    min-height: $tag-input-height-default;
+    height: fit-content;
+    padding: 0 $comp-paddingLR-s 0 $comp-margin-xs;
+    @include t-input-suffix-icon($comp-margin-s);
+
+    &.#{$prefix}-size-s {
+      padding: 0 $comp-paddingLR-s 0 $comp-margin-xs;
+      min-height: $tag-input-height-s;
+      .#{$prefix}-tag {
+        margin: 1px $comp-margin-xs 1px 0;
+      }
+    }
+
+    &.#{$prefix}-size-l {
+      min-height: $tag-input-height-l;
+      padding: 0 $comp-paddingLR-m 0 $comp-margin-s;
+      @include t-input-suffix-icon($comp-margin-m);
+    }
+  }
+
+  /** 设计稿：未填充标签场景，边距和已填充不同 */
+  &.#{$prefix}-is-empty {
+    .#{$prefix}-input__inner {
+      margin-left: $comp-margin-xs;
+    }
+  }
+
+  &:hover,
+  .#{$prefix}-input--focused {
+    .#{$prefix}-input__inner:not(.#{$prefix}-input--soft-hidden) {
+      min-width: 20px;
+    }
+  }
+
+  .#{$prefix}-tag-input__prefix {
+    margin-left: $comp-margin-xs;
+    line-height: 1;
+
+    > .t-icon {
+      color: $text-color-placeholder;
+    }
+  }
+
+  .#{$prefix}-input .#{$prefix}-input__prefix:not(:empty) {
+    margin-right: 0;
+  }
+
+  &.#{$prefix}-input--auto-width {
+    .#{$prefix}-input.#{$prefix}-input--focused {
+      padding-right: $tag-input-clear-icon-padding-m;
+    }
+
+    .#{$prefix}-input__prefix {
+      white-space: nowrap;
+    }
+  }
+  .#{$prefix}-input__prefix--scrollable {
+    @include scrollbar();
+
+    overflow-y: hidden;
+    overflow-x: auto;
+  }
+}
+
+.#{$prefix}-tag-input__suffix-clear {
+  cursor: pointer;
+}
+
+.#{$prefix}-tag-input--drag-sort {
+  .#{$prefix}-input__prefix {
+    .#{$prefix}-tag {
+      cursor: move;
+    }
+  }
+}
+
+// 标签数量超出时，换行显示
+.#{$prefix}-tag-input--break-line:not(.#{$prefix}-is-empty) {
+  .#{$prefix}-input {
+    display: block;
+
+    &.#{$prefix}-input--prefix > .#{$prefix}-input__prefix {
+      display: inline;
+      text-align: left;
+    }
+
+    .#{$prefix}-input__suffix-icon {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
+  .#{$prefix}-tag-input__prefix {
+    vertical-align: middle;
+  }
+}
+
+.#{$prefix}-tag-input__prefix {
+  width: max-content;
+  display: inline-block;
+  margin-right: $comp-margin-s;
+}
+
+/** 换行模式避免标签和右侧图标重合，需保留图标宽度 22px 和左侧距离标签间距 8px */
+.#{$prefix}-tag-input--break-line.#{$prefix}-tag-input--with-tag:not(
+    .#{$prefix}-input--auto-width
+  ),
+.#{$prefix}-tag-input.#{$prefix}-input--auto-width:hover {
+  .#{$prefix}-input {
+    padding-right: $tag-input-clear-icon-padding-m;
+  }
+
+  .#{$prefix}-size-l {
+    .#{$prefix}-input {
+      padding-right: $tag-input-clear-icon-padding-l;
+    }
+  }
+}
+
+/** auto-width 模式，左右边距相同 */
+.#{$prefix}-tag-input.#{$prefix}-input--auto-width {
+  .#{$prefix}-input {
+    padding-right: 0;
+  }
+}
+
+/** max-rows模式，限制最大高度 */
+.#{$prefix}-tag-input--max-rows {
+  .#{$prefix}-input {
+    &.#{$prefix}-size-s {
+      max-height: calc(var(--max-rows, 1) * $tag-input-height-s);
+    }
+
+    &.#{$prefix}-size-l {
+      max-height: calc(var(--max-rows, 1) * ($tag-input-height-l - 2px));
+    }
+
+    max-height: calc(var(--max-rows, 1) * ($tag-input-height-default - 2px));
+    overflow-y: scroll;
+  }
+}

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

@@ -0,0 +1,16 @@
+$tag-input-height-s: $comp-size-xs;
+$tag-input-height-default: $comp-size-m;
+$tag-input-height-l: $comp-size-xl;
+
+$tag-input-padding-default: calc($comp-margin-xs - 1px);
+
+$tag-input-clear-icon-padding-m: calc(
+  $comp-paddingLR-xxl + $comp-paddingLR-xxs
+);
+$tag-input-clear-icon-padding-l: calc($comp-paddingLR-xxl + $comp-paddingLR-xs);
+
+@mixin t-input-suffix-icon($distance) {
+  .#{$prefix}-input__suffix-icon {
+    right: $distance;
+  }
+}