@tendaui/components 1.3.0 → 1.3.1

package/styles/components/tag/_var.scss

@@ -1,86 +1,86 @@
-@use "../../_vars.scss" as *;
-// <component>-[type]-[attrtype]-<attr>-[status]
-@use '../../vars.scss' as *;
-// 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;
+@use "../../_vars.scss" as *;
+// <component>-[type]-[attrtype]-<attr>-[status]
+@use '../../vars.scss' as *;
+// 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

@@ -1,164 +1,164 @@
-@use "../../_vars.scss" as *;
-@use '../../_vars.scss' as *;
-@use './_vars.scss' as *;
-@use '../../utilities/_animation.scss' as *;
-
-@use '../../mixins/_reset.scss' as *;
-@use '../../mixins/_scrollbar.scss' as *;
-
-.#{$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;
-  }
-}
+@use "../../_vars.scss" as *;
+@use '../../_vars.scss' as *;
+@use './_vars.scss' as *;
+@use '../../utilities/_animation.scss' as *;
+
+@use '../../mixins/_reset.scss' as *;
+@use '../../mixins/_scrollbar.scss' as *;
+
+.#{$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

@@ -1,17 +1,17 @@
-@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;
-
-$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;
-  }
-}
+@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;
+
+$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;
+  }
+}

package/styles/mixins/_focus.scss

@@ -1,8 +1,8 @@
-@use "../_vars.scss" as *;
-@mixin tab-focus-style-rect() {
-  &:focus-visible {
-    outline: 2px solid $brand-color;
-    outline-offset: $comp-paddingTB-xs;
-    border-radius: 0;
-  }
-}
+@use "../_vars.scss" as *;
+@mixin tab-focus-style-rect() {
+  &:focus-visible {
+    outline: 2px solid $brand-color;
+    outline-offset: $comp-paddingTB-xs;
+    border-radius: 0;
+  }
+}

package/styles/mixins/_layout.scss

@@ -1,32 +1,32 @@
-@mixin horizontal-vertical-center-with-flex() {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin fill-with-position-absolute() {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-
-@mixin list-style-none() {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-@mixin input-visually-hidden() {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  outline: 0;
-  appearance: none;
-}
+@mixin horizontal-vertical-center-with-flex() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin fill-with-position-absolute() {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+@mixin list-style-none() {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+@mixin input-visually-hidden() {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  outline: 0;
+  appearance: none;
+}

package/styles/mixins/_reset.scss

@@ -1,11 +1,11 @@
-@use "../_vars.scss" as *;
-@use '../_vars.scss' as *;
-
-@mixin reset {
-  font: $font-body-medium;
-  color: $text-color-primary;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
+@use "../_vars.scss" as *;
+@use '../_vars.scss' as *;
+
+@mixin reset {
+  font: $font-body-medium;
+  color: $text-color-primary;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}