@tendaui/components 1.2.3 → 1.3.0

package/styles/components/tag/_var.scss

@@ -1,85 +1,86 @@
-// <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;
+@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,163 +1,164 @@
-@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;
-  }
-}
+@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,16 +1,17 @@
-$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/components/tooltip/_index.scss

@@ -0,0 +1,104 @@
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+
+// Tooltip 组件样式
+.#{$prefix}-tooltip {
+  .#{$prefix}-popup__content {
+    display: inline-block;
+    border: 0;
+    z-index: $z-index-Tooltip;
+    margin-bottom: 1px;
+    max-width: $tooltip-max-width;
+    word-break: break-word;
+    box-sizing: border-box;
+    border-radius: $border-radius-medium;
+    color: $tooltip-light-text-color;
+  }
+
+  &--dark {
+    .#{$prefix}-popup__content {
+      color: $tooltip-text-color;
+      background: $tooltip-bg;
+      box-shadow:
+        inset 0 0.5px 0 $gray-color-9,
+        inset 0.5px 0 0 $gray-color-9,
+        inset 0 -0.5px 0 $gray-color-9,
+        inset -0.5px 0 0 $gray-color-9;
+    }
+
+    &[data-popper-placement^="left"] .#{$prefix}-popup__arrow:before {
+      box-shadow:
+        inset -0.5px 0 0 $gray-color-9,
+        inset 0 0.5px 0 $gray-color-9;
+    }
+
+    &[data-popper-placement^="right"] .#{$prefix}-popup__arrow:before {
+      box-shadow:
+        inset 0.5px 0 0 $gray-color-9,
+        inset 0 -0.5px 0 $gray-color-9;
+    }
+
+    &[data-popper-placement^="top"] .#{$prefix}-popup__arrow:before {
+      box-shadow:
+        inset 0 -0.5px 0 $gray-color-9,
+        inset -0.5px 0 0 $gray-color-9;
+    }
+
+    &[data-popper-placement^="bottom"] .#{$prefix}-popup__arrow:before {
+      box-shadow:
+        inset 0.5px 0 0 $gray-color-9,
+        inset 0 0.5px 0 $gray-color-9;
+    }
+  }
+
+  &--light {
+    .#{$prefix}-popup__content {
+      color: $tooltip-light-text-color;
+      background: $bg-color-container;
+      box-shadow: $shadow-2;
+    }
+  }
+
+  &--primary {
+    .#{$prefix}-popup__content {
+      color: $tooltip-color-primary;
+      background: $tooltip-bg-primary;
+    }
+  }
+
+  &--success {
+    .#{$prefix}-popup__content {
+      color: $tooltip-color-success;
+      background: $tooltip-bg-success;
+    }
+  }
+
+  &--error {
+    .#{$prefix}-popup__content {
+      color: $tooltip-color-danger;
+      background: $tooltip-bg-danger;
+    }
+  }
+
+  &--warning {
+    .#{$prefix}-popup__content {
+      color: $tooltip-color-warning;
+      background: $tooltip-bg-warning;
+    }
+  }
+
+  .#{$prefix}-popup__arrow {
+    background: inherit;
+    height: auto;
+    &::before {
+      background: inherit;
+    }
+  }
+
+  &--noshadow {
+    .#{$prefix}-popup__content,
+    &[data-popper-placement] .#{$prefix}-popup__arrow:before {
+      box-shadow: none;
+    }
+  }
+}

package/styles/components/tooltip/_vars.scss

@@ -0,0 +1,23 @@
+@use "../../_vars.scss" as *;
+// Tooltip 组件变量
+// 宽度
+$tooltip-max-width: 480px;
+
+// 颜色
+$tooltip-bg: $gray-color-9; // tooltip 背景色
+$tooltip-color-primary: $brand-color;
+$tooltip-bg-primary: $brand-color-light;
+$tooltip-color-success: $success-color;
+$tooltip-bg-success: $success-color-light;
+$tooltip-color-danger: $error-color;
+$tooltip-bg-danger: $error-color-light;
+$tooltip-color-warning: $warning-color;
+$tooltip-bg-warning: $warning-color-light;
+$tooltip-text-color: $text-color-anti;
+$tooltip-light-text-color: $text-color-primary;
+
+// 间距
+$tooltip-default-margin: $comp-margin-s;
+
+// tooltip箭头位移量
+$tooltip-arrow-position: $comp-margin-xs;