@tendaui/components 1.2.3 → 1.3.0

package/styles/components/notification/_vars.scss

@@ -1,59 +1,60 @@
-// 组件变量
-// 名称可按如下规则定义：
-// <component>-[type]-[attrtype]-<attr>-[status]
-
-// component:组件名，如button，
-// type: 组件类型，如 button 的次要按钮（line）
-// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
-// attr: 属性名称，如color、height、radius等
-// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等
-
-// 如：$button-line-bg-color-hover
-// 如：$button-line-height-s
-
-// 颜色
-$notification-close-icon-color: $text-color-secondary;
-$notification-color-block: $bg-color-container;
-$notification-title-color: $text-color-primary;
-$notification-content-color: $text-color-secondary;
-$notification-detail-item-color-hover: inherit;
-$notification-detail-item-bg-color-hover: $bg-color-container-hover;
-$notification-detail-item-color-active: inherit;
-$notification-detail-item-bg-color-active: $bg-color-container-active;
-$notification-detail-item-is-active-color: $brand-color;
-$notification-icon-info-color: $brand-color;
-$notification-icon-success-color: $success-color;
-$notification-icon-warning-color: $warning-color;
-$notification-icon-error-color: $error-color-6;
-$notification-detail-item-color: inherit;
-$notification-close-bg-color-hover: $bg-color-container-hover;
-$notification-close-bg-color-active: $bg-color-container-active;
-
-// 尺寸
-$notification-width-default: 360px;
-$notification-content-max-height: 66px;
-$notification-icon-width: calc($font-size-l + 8px);
-$notification-icon-font-size: calc($font-size-l + 8px);
-$notification-icon-close-font-size: $font-size-l;
-
-// 圆角
-$notification-detail-item-border-radius: $border-radius-medium;
-$notification-close-border-radius: $border-radius-medium;
-
-// 阴影
-$notification-shadow: $shadow-2-inset;
-
-//字号
-$notification-font: $font-body-medium;
-$notification-detail-font: $font-body-medium;
-$notification-content-font: $font-body-medium;
-$notification-title-font: $font-title-medium;
-
-// padding
-$notification-padding-default: $comp-paddingTB-l $comp-paddingLR-l;
-
-//margin
-$notification-detail-margin-top: $comp-margin-l;
-$notification-content-margin-top: $comp-margin-s;
-$notification-icon-margin-right: $comp-margin-s;
-$notification-detail-item-margin-left: $comp-margin-s;
+@use "../../_vars.scss" as *;
+// 组件变量
+// 名称可按如下规则定义//
+// <component>-[type]-[attrtype]-<attr>-[status]
+
+// component: 组件名，如 button
+// type: 组件类型，如 button 的次要按钮（line）
+// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
+// attr: 属性名称，如 color、height、radius
+// status: 表示组件状态或尺寸，如 hover、disabled、s、l
+
+// 如：$button-line-bg-color-hover
+// 如：$button-line-height-s
+
+// 颜色
+$notification-close-icon-color: $text-color-secondary;
+$notification-color-block: $bg-color-container;
+$notification-title-color: $text-color-primary;
+$notification-content-color: $text-color-secondary;
+$notification-detail-item-color-hover: inherit;
+$notification-detail-item-bg-color-hover: $bg-color-container-hover;
+$notification-detail-item-color-active: inherit;
+$notification-detail-item-bg-color-active: $bg-color-container-active;
+$notification-detail-item-is-active-color: $brand-color;
+$notification-icon-info-color: $brand-color;
+$notification-icon-success-color: $success-color;
+$notification-icon-warning-color: $warning-color;
+$notification-icon-error-color: $error-color-6;
+$notification-detail-item-color: inherit;
+$notification-close-bg-color-hover: $bg-color-container-hover;
+$notification-close-bg-color-active: $bg-color-container-active;
+
+// 尺寸
+$notification-width-default: 360px;
+$notification-content-max-height: 66px;
+$notification-icon-width: calc($font-size-l + 8px);
+$notification-icon-font-size: calc($font-size-l + 8px);
+$notification-icon-close-font-size: $font-size-l;
+
+// 圆角
+$notification-detail-item-border-radius: $border-radius-medium;
+$notification-close-border-radius: $border-radius-medium;
+
+// 阴影
+$notification-shadow: $shadow-2-inset;
+
+//字号
+$notification-font: $font-body-medium;
+$notification-detail-font: $font-body-medium;
+$notification-content-font: $font-body-medium;
+$notification-title-font: $font-title-medium;
+
+// padding
+$notification-padding-default: $comp-paddingTB-l $comp-paddingLR-l;
+
+//margin
+$notification-detail-margin-top: $comp-margin-l;
+$notification-content-margin-top: $comp-margin-s;
+$notification-icon-margin-right: $comp-margin-s;
+$notification-detail-item-margin-left: $comp-margin-s;

package/styles/components/popup/_index.scss

@@ -1,82 +1,78 @@
-// 组件允许单个组件打包，因此默认引入公共基础样式
-
-@import '../../vars.scss';
-
-@import './_var.scss';
-
-@import './_mixin.scss';
-
-@import '../../mixins/_layout.scss';
-
-@import '../../mixins/_reset.scss';
-
-.#{$prefix}-popup {
-  @include reset;
-
-  color: $popup-text-color;
-  display: inline-block;
-  z-index: $z-index-Popup;
-
-  &__content {
-    position: relative;
-    background: $popup-bg;
-    box-shadow: $popup-shadow;
-    border-radius: $border-radius-medium;
-    padding: $popup-padding;
-    font-size: $popup-content-font-size;
-    line-height: $popup-content-line-height;
-    box-sizing: border-box;
-    word-break: break-all;
-  }
-}
-
-.#{$prefix}-popup__arrow {
-  position: absolute;
-  z-index: 1;
-  width: $popup-arrow-width;
-  height: $popup-arrow-height;
-
-  &::before {
-    position: absolute;
-    content: '';
-    width: $popup-arrow-width;
-    height: $popup-arrow-height;
-    transform: rotate(45deg);
-    background: $arrow-bg;
-  }
-}
-@include content-placement-top();
-@include content-placement-bottom();
-@include content-placement-left();
-@include content-placement-right();
-
-@include arrow-placement-top();
-@include arrow-placement-bottom();
-@include arrow-placement-left();
-@include arrow-placement-right();
-
-// animation
-.#{$popup-flow}-enter,
-.#{$popup-flow}-enter-from,
-.#{$popup-flow}-exiting,
-.#{$popup-flow}-leave-to {
-  opacity: 0;
-  visibility: hidden;
-}
-
-.#{$popup-flow}-enter-to,
-.#{$popup-flow}-entering,
-.#{$popup-flow}-leave-from,
-.#{$popup-flow}-leave {
-  opacity: 1;
-  visibility: visible;
-  transform: none;
-}
-
-.#{$popup-flow}-enter-active {
-  transition: $popup-flow-transition-enter;
-}
-
-.#{$popup-flow}-leave-active {
-  transition: $popup-flow-transition-leave;
-}
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+@use "./_mixin.scss" as *;
+
+@use "../../mixins/_layout.scss" as *;
+
+@use "../../mixins/_reset.scss" as *;
+
+.#{$prefix}-popup {
+  @include reset;
+
+  color: $popup-text-color;
+  display: inline-block;
+  z-index: $z-index-Popup;
+
+  &__content {
+    position: relative;
+    background: $popup-bg;
+    box-shadow: $popup-shadow;
+    border-radius: $border-radius-medium;
+    padding: $popup-padding;
+    font-size: $popup-content-font-size;
+    line-height: $popup-content-line-height;
+    box-sizing: border-box;
+    word-break: break-all;
+  }
+}
+
+.#{$prefix}-popup__arrow {
+  position: absolute;
+  z-index: 1;
+  width: $popup-arrow-width;
+  height: $popup-arrow-height;
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: $popup-arrow-width;
+    height: $popup-arrow-height;
+    transform: rotate(45deg);
+    background: $arrow-bg;
+  }
+}
+@include content-placement-top();
+@include content-placement-bottom();
+@include content-placement-left();
+@include content-placement-right();
+
+@include arrow-placement-top();
+@include arrow-placement-bottom();
+@include arrow-placement-left();
+@include arrow-placement-right();
+
+// animation
+.#{$popup-flow}-enter,
+.#{$popup-flow}-enter-from,
+.#{$popup-flow}-exiting,
+.#{$popup-flow}-leave-to {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.#{$popup-flow}-enter-to,
+.#{$popup-flow}-entering,
+.#{$popup-flow}-leave-from,
+.#{$popup-flow}-leave {
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+}
+
+.#{$popup-flow}-enter-active {
+  transition: $popup-flow-transition-enter;
+}
+
+.#{$popup-flow}-leave-active {
+  transition: $popup-flow-transition-leave;
+}

package/styles/components/popup/_mixin.scss

@@ -1,149 +1,149 @@
-@mixin content-placement-top {
-  .#{$prefix}-popup[data-popper-placement^="top"] {
-    .#{$prefix}-popup__content {
-      margin-bottom: $popup-content-margin;
-
-      &--arrow {
-        margin-bottom: $popup-content-arrow-spacer;
-      }
-    }
-  }
-}
-
-@mixin content-placement-bottom {
-  .#{$prefix}-popup[data-popper-placement^="bottom"] {
-    .#{$prefix}-popup__content {
-      margin-top: $popup-content-margin;
-
-      &--arrow {
-        margin-top: $popup-content-arrow-spacer;
-      }
-    }
-  }
-}
-
-@mixin content-placement-left {
-  .#{$prefix}-popup[data-popper-placement^="left"] {
-    .#{$prefix}-popup__content {
-      margin-right: $popup-content-margin;
-
-      &--arrow {
-        margin-right: $popup-content-arrow-spacer;
-      }
-
-      &--text {
-        max-width: 480px;
-      }
-    }
-  }
-}
-
-@mixin content-placement-right {
-  .#{$prefix}-popup[data-popper-placement^="right"] {
-    .#{$prefix}-popup__content {
-      margin-left: $popup-content-margin;
-
-      &--arrow {
-        margin-left: $popup-content-arrow-spacer;
-      }
-
-      &--text {
-        max-width: 480px;
-      }
-    }
-  }
-}
-
-@mixin arrow-placement-top() {
-  .#{$prefix}-popup[data-popper-placement^="top"] .#{$prefix}-popup__arrow {
-    &::before {
-      border-top-left-radius: 100%;
-      box-shadow: $popup-top-arrow-shadow;
-    }
-  }
-
-  .#{$prefix}-popup[data-popper-placement="top-start"] .#{$prefix}-popup__arrow {
-    left: $popup-arrow-width;
-  }
-
-  .#{$prefix}-popup[data-popper-placement="top"] .#{$prefix}-popup__arrow {
-    left: 50%;
-    margin-left: calc(-#{$popup-arrow-width} / 2);
-  }
-
-  .#{$prefix}-popup[data-popper-placement="top-end"] .#{$prefix}-popup__arrow {
-    left: calc(100% - $popup-arrow-width * 2);
-  }
-}
-
-@mixin arrow-placement-bottom() {
-  .#{$prefix}-popup[data-popper-placement^="bottom"] .#{$prefix}-popup__arrow {
-    top: calc(-#{$popup-arrow-width} / 2);
-
-    &::before {
-      border-bottom-right-radius: 100%;
-      box-shadow: $popup-bottom-arrow-shadow;
-    }
-  }
-
-  .#{$prefix}-popup[data-popper-placement="bottom-start"] .#{$prefix}-popup__arrow {
-    left: $popup-arrow-width;
-  }
-
-  .#{$prefix}-popup[data-popper-placement="bottom"] .#{$prefix}-popup__arrow {
-    left: 50%;
-    margin-left: calc(-#{$popup-arrow-width} / 2);
-  }
-
-  .#{$prefix}-popup[data-popper-placement="bottom-end"] .#{$prefix}-popup__arrow {
-    left: calc(100% - $popup-arrow-width * 2);
-  }
-}
-
-@mixin arrow-placement-left() {
-  .#{$prefix}-popup[data-popper-placement^="left"] .#{$prefix}-popup__arrow {
-    right: calc(-#{$popup-arrow-width} / 2);
-
-    &::before {
-      box-shadow: $popup-left-arrow-shadow;
-    }
-  }
-
-  .#{$prefix}-popup[data-popper-placement="left-start"] .#{$prefix}-popup__arrow {
-    top: $popup-arrow-width;
-  }
-
-  .#{$prefix}-popup[data-popper-placement="left"] .#{$prefix}-popup__arrow {
-    top: 50%;
-    margin-top: calc(-#{$popup-arrow-width} / 2);
-  }
-
-  .#{$prefix}-popup[data-popper-placement="left-end"] .#{$prefix}-popup__arrow {
-    top: calc(100% - $popup-arrow-width * 2);
-  }
-}
-
-@mixin  arrow-placement-right() {
-  .#{$prefix}-popup[data-popper-placement^="right"] .#{$prefix}-popup__arrow {
-    left: calc(-#{$popup-arrow-width} / 2);
-
-    &::before {
-      box-shadow: $popup-right-arrow-shadow;
-    }
-  }
-
-  .#{$prefix}-popup[data-popper-placement="right-start"] .#{$prefix}-popup__arrow {
-    top: $popup-arrow-width;
-  }
-
-  .#{$prefix}-popup[data-popper-placement="right"] .#{$prefix}-popup__arrow {
-    top: 50%;
-    margin-top: calc(-#{$popup-arrow-width} / 2);
-  }
-
-  .#{$prefix}-popup[data-popper-placement="right-end"] .#{$prefix}-popup__arrow {
-    top: calc(100% - $popup-arrow-width * 2);
-  }
-}
-
-
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+@mixin content-placement-top {
+  .#{$prefix}-popup[data-popper-placement^="top"] {
+    .#{$prefix}-popup__content {
+      margin-bottom: $popup-content-margin;
+
+      &--arrow {
+        margin-bottom: $popup-content-arrow-spacer;
+      }
+    }
+  }
+}
+
+@mixin content-placement-bottom {
+  .#{$prefix}-popup[data-popper-placement^="bottom"] {
+    .#{$prefix}-popup__content {
+      margin-top: $popup-content-margin;
+
+      &--arrow {
+        margin-top: $popup-content-arrow-spacer;
+      }
+    }
+  }
+}
+
+@mixin content-placement-left {
+  .#{$prefix}-popup[data-popper-placement^="left"] {
+    .#{$prefix}-popup__content {
+      margin-right: $popup-content-margin;
+
+      &--arrow {
+        margin-right: $popup-content-arrow-spacer;
+      }
+
+      &--text {
+        max-width: 480px;
+      }
+    }
+  }
+}
+
+@mixin content-placement-right {
+  .#{$prefix}-popup[data-popper-placement^="right"] {
+    .#{$prefix}-popup__content {
+      margin-left: $popup-content-margin;
+
+      &--arrow {
+        margin-left: $popup-content-arrow-spacer;
+      }
+
+      &--text {
+        max-width: 480px;
+      }
+    }
+  }
+}
+
+@mixin arrow-placement-top() {
+  .#{$prefix}-popup[data-popper-placement^="top"] .#{$prefix}-popup__arrow {
+    &::before {
+      border-top-left-radius: 100%;
+      box-shadow: $popup-top-arrow-shadow;
+    }
+  }
+
+  .#{$prefix}-popup[data-popper-placement="top-start"] .#{$prefix}-popup__arrow {
+    left: $popup-arrow-width;
+  }
+
+  .#{$prefix}-popup[data-popper-placement="top"] .#{$prefix}-popup__arrow {
+    left: 50%;
+    margin-left: calc(-#{$popup-arrow-width} / 2);
+  }
+
+  .#{$prefix}-popup[data-popper-placement="top-end"] .#{$prefix}-popup__arrow {
+    left: calc(100% - $popup-arrow-width * 2);
+  }
+}
+
+@mixin arrow-placement-bottom() {
+  .#{$prefix}-popup[data-popper-placement^="bottom"] .#{$prefix}-popup__arrow {
+    top: calc(-#{$popup-arrow-width} / 2);
+
+    &::before {
+      border-bottom-right-radius: 100%;
+      box-shadow: $popup-bottom-arrow-shadow;
+    }
+  }
+
+  .#{$prefix}-popup[data-popper-placement="bottom-start"] .#{$prefix}-popup__arrow {
+    left: $popup-arrow-width;
+  }
+
+  .#{$prefix}-popup[data-popper-placement="bottom"] .#{$prefix}-popup__arrow {
+    left: 50%;
+    margin-left: calc(-#{$popup-arrow-width} / 2);
+  }
+
+  .#{$prefix}-popup[data-popper-placement="bottom-end"] .#{$prefix}-popup__arrow {
+    left: calc(100% - $popup-arrow-width * 2);
+  }
+}
+
+@mixin arrow-placement-left() {
+  .#{$prefix}-popup[data-popper-placement^="left"] .#{$prefix}-popup__arrow {
+    right: calc(-#{$popup-arrow-width} / 2);
+
+    &::before {
+      box-shadow: $popup-left-arrow-shadow;
+    }
+  }
+
+  .#{$prefix}-popup[data-popper-placement="left-start"] .#{$prefix}-popup__arrow {
+    top: $popup-arrow-width;
+  }
+
+  .#{$prefix}-popup[data-popper-placement="left"] .#{$prefix}-popup__arrow {
+    top: 50%;
+    margin-top: calc(-#{$popup-arrow-width} / 2);
+  }
+
+  .#{$prefix}-popup[data-popper-placement="left-end"] .#{$prefix}-popup__arrow {
+    top: calc(100% - $popup-arrow-width * 2);
+  }
+}
+
+@mixin arrow-placement-right() {
+  .#{$prefix}-popup[data-popper-placement^="right"] .#{$prefix}-popup__arrow {
+    left: calc(-#{$popup-arrow-width} / 2);
+
+    &::before {
+      box-shadow: $popup-right-arrow-shadow;
+    }
+  }
+
+  .#{$prefix}-popup[data-popper-placement="right-start"] .#{$prefix}-popup__arrow {
+    top: $popup-arrow-width;
+  }
+
+  .#{$prefix}-popup[data-popper-placement="right"] .#{$prefix}-popup__arrow {
+    top: 50%;
+    margin-top: calc(-#{$popup-arrow-width} / 2);
+  }
+
+  .#{$prefix}-popup[data-popper-placement="right-end"] .#{$prefix}-popup__arrow {
+    top: calc(100% - $popup-arrow-width * 2);
+  }
+}

package/styles/components/popup/{_var.scss → _vars.scss}

@@ -1,31 +1,33 @@
-// 颜色
-$popup-bg: $bg-color-container;
-$arrow-bg: $bg-color-container;
-$popup-text-color: $text-color-primary;
-
-// 间距
-$popup-padding: $comp-paddingTB-xs $comp-paddingLR-s;
-$popup-content-line-height: $text-line-height-base;
-$popup-arrow-width: 8px;
-$popup-arrow-height: 8px;
-$popup-content-arrow-spacer: $comp-margin-l;
-$popup-content-margin: $comp-margin-s;
-
-// 箭头位置偏移量
-$popup-arrow-position: $popup-arrow-width;
-$popup-content-font-size: $font-size-base;
-
-// 阴影
-$popup-shadow: $shadow-2-inset;
-$popup-top-arrow-shadow: $shadow-inset-left, $shadow-inset-bottom;
-$popup-left-arrow-shadow: $shadow-inset-left, $shadow-inset-top;
-$popup-bottom-arrow-shadow: $shadow-inset-top, $shadow-inset-right;
-$popup-right-arrow-shadow: $shadow-inset-right, $shadow-inset-bottom;
-
-// 动画
-$popup-flow: "#{prefix}-popup--animation";
-$popup-flow-duration: $anim-duration-base;
-$popup-flow-fn: $anim-time-fn-ease-in;
-$popup-flow-transition-enter: opacity $popup-flow-duration linear;
-$popup-flow-transition-leave: opacity $popup-flow-duration $anim-time-fn-ease-out,
-  visibility $popup-flow-duration $popup-flow-fn;
+@use "../../_vars.scss" as *;
+// 颜色
+$popup-bg: $bg-color-container;
+$arrow-bg: $bg-color-container;
+$popup-text-color: $text-color-primary;
+
+// 间距
+$popup-padding: $comp-paddingTB-xs $comp-paddingLR-s;
+$popup-content-line-height: $text-line-height-base;
+$popup-arrow-width: 8px;
+$popup-arrow-height: 8px;
+$popup-content-arrow-spacer: $comp-margin-l;
+$popup-content-margin: $comp-margin-s;
+
+// 箭头位置偏移
+$popup-arrow-position: $popup-arrow-width;
+$popup-content-font-size: $font-size-base;
+
+// 阴影
+$popup-shadow: $shadow-2-inset;
+$popup-top-arrow-shadow: $shadow-inset-left, $shadow-inset-bottom;
+$popup-left-arrow-shadow: $shadow-inset-left, $shadow-inset-top;
+$popup-bottom-arrow-shadow: $shadow-inset-top, $shadow-inset-right;
+$popup-right-arrow-shadow: $shadow-inset-right, $shadow-inset-bottom;
+
+// 动画
+$popup-flow: "#{prefix}-popup--animation";
+$popup-flow-duration: $anim-duration-base;
+$popup-flow-fn: $anim-time-fn-ease-in;
+$popup-flow-transition-enter: opacity $popup-flow-duration linear;
+$popup-flow-transition-leave:
+  opacity $popup-flow-duration $anim-time-fn-ease-out,
+  visibility $popup-flow-duration $popup-flow-fn;