@tendaui/components 1.2.3 → 1.3.0

package/styles/components/dialog/_vars.scss

@@ -1,59 +1,60 @@
-$dialog-border-color: transparent;
-$dialog-bg-color: $bg-color-container;
-$dialog-header-text-color: $text-color-primary;
-$dialog-header-bg-color-fullscreen: $bg-color-secondarycontainer;
-$dialog-close-icon-fullscreen-hover: $bg-color-secondarycontainer-hover;
-$dialog-close-icon-fullscreen-active: $bg-color-secondarycontainer-active;
-$dialog-body-text-color: $text-color-secondary;
-$dialog-close-icon-hover: $bg-color-container-hover;
-$dialog-close-icon-active: $bg-color-container-active;
-$dialog-info-icon-color: $brand-color;
-$dialog-success-icon-color: $success-color;
-$dialog-warning-icon-color: $warning-color;
-$dialog-error-icon-color: $error-color;
-$dialog-close-color: $text-color-secondary;
-$dialog-mask-bg-color: $mask-active;
-
-// 字体
-$dialog-header-font: $font-title-medium;
-$dialog-header-weight: 600;
-$dialog-body-text-font: $font-body-medium;
-
-// 尺寸
-$dialog-width: 480px;
-$dialog-header-height-fullscreen: $comp-size-xxxl;
-$dialog-icon-size: calc($font-size-l + 8px);
-$dialog-close-icon-size: calc($font-size-l + 4px);
-$dialog-footer-height-fullscreen: $comp-size-xxxxl;
-
-// 间距
-$dialog-spacer: $comp-paddingTB-xxl $comp-paddingLR-xxl;
-$dialog-default-spacer: $comp-paddingTB-xxl $comp-paddingLR-xxl;
-$dialog-default-padding: $dialog-spacer;
-$dialog-header-icon-margin-right: $comp-margin-s;
-$dialog-header-icon-margin-top: $size-1;
-$dialog-header-content-margin-right: $comp-margin-s;
-$dialog-header-padding-fullscreen: 0 $comp-paddingLR-xxl;
-$dialog-closebtn-padding: $comp-paddingTB-xxs $comp-paddingLR-xxs;
-$dialog-body-padding: $comp-paddingTB-l 0;
-$dialog-body-padding-fullscreen: $comp-paddingTB-xl $comp-paddingLR-xxl;
-$dialog-body-icon-padding: $comp-paddingTB-l 0;
-$dialog-footer-button-margin-left: $comp-margin-s;
-$dialog-footer-padding: $comp-paddingTB-l 0 0;
-$dialog-footer-padding-fullscreen: 0 $comp-paddingLR-xxl $comp-paddingTB-xxl;
-
-// 边框
-$dialog-border: 1px solid $border-level-1-color;
-$dialog-border-radius: $border-radius-medium;
-$dialog-close-border-radius: $border-radius-medium;
-
-// 位置
-$dialog-close-position-top: $spacer-3;
-$dialog-close-position-right: $spacer-3;
-// 此处不能使用20% 因为定位是paddingTop 所以20% 会根据屏幕宽度
-$dialog-top-position-top: 20vh;
-
-// 动画
-$dialog-anim-duration: $anim-duration-base;
-$dialog-anim-time-fn-enter: $anim-time-fn-easing;
-$dialog-anim-time-fn-exit: $anim-time-fn-easing;
+@use "../../_vars.scss" as *;
+$dialog-border-color: transparent;
+$dialog-bg-color: $bg-color-container;
+$dialog-header-text-color: $text-color-primary;
+$dialog-header-bg-color-fullscreen: $bg-color-secondarycontainer;
+$dialog-close-icon-fullscreen-hover: $bg-color-secondarycontainer-hover;
+$dialog-close-icon-fullscreen-active: $bg-color-secondarycontainer-active;
+$dialog-body-text-color: $text-color-secondary;
+$dialog-close-icon-hover: $bg-color-container-hover;
+$dialog-close-icon-active: $bg-color-container-active;
+$dialog-info-icon-color: $brand-color;
+$dialog-success-icon-color: $success-color;
+$dialog-warning-icon-color: $warning-color;
+$dialog-error-icon-color: $error-color;
+$dialog-close-color: $text-color-secondary;
+$dialog-mask-bg-color: $mask-active;
+
+// 字体
+$dialog-header-font: $font-title-medium;
+$dialog-header-weight: 600;
+$dialog-body-text-font: $font-body-medium;
+
+// 尺寸
+$dialog-width: 480px;
+$dialog-header-height-fullscreen: $comp-size-xxxl;
+$dialog-icon-size: calc($font-size-l + 8px);
+$dialog-close-icon-size: calc($font-size-l + 4px);
+$dialog-footer-height-fullscreen: $comp-size-xxxxl;
+
+// 间距
+$dialog-spacer: $comp-paddingTB-xxl $comp-paddingLR-xxl;
+$dialog-default-spacer: $comp-paddingTB-xxl $comp-paddingLR-xxl;
+$dialog-default-padding: $dialog-spacer;
+$dialog-header-icon-margin-right: $comp-margin-s;
+$dialog-header-icon-margin-top: $size-1;
+$dialog-header-content-margin-right: $comp-margin-s;
+$dialog-header-padding-fullscreen: 0 $comp-paddingLR-xxl;
+$dialog-closebtn-padding: $comp-paddingTB-xxs $comp-paddingLR-xxs;
+$dialog-body-padding: $comp-paddingTB-l 0;
+$dialog-body-padding-fullscreen: $comp-paddingTB-xl $comp-paddingLR-xxl;
+$dialog-body-icon-padding: $comp-paddingTB-l 0;
+$dialog-footer-button-margin-left: $comp-margin-s;
+$dialog-footer-padding: $comp-paddingTB-l 0 0;
+$dialog-footer-padding-fullscreen: 0 $comp-paddingLR-xxl $comp-paddingTB-xxl;
+
+// 边框
+$dialog-border: 1px solid $border-level-1-color;
+$dialog-border-radius: $border-radius-medium;
+$dialog-close-border-radius: $border-radius-medium;
+
+// 位置
+$dialog-close-position-top: $spacer-3;
+$dialog-close-position-right: $spacer-3;
+// 此处不能使用 20% 因为定位是 paddingTop，所以 20% 会根据屏幕宽度计算
+$dialog-top-position-top: 20vh;
+
+// 动画
+$dialog-anim-duration: $anim-duration-base;
+$dialog-anim-time-fn-enter: $anim-time-fn-easing;
+$dialog-anim-time-fn-exit: $anim-time-fn-easing;

package/styles/components/drawer/_index.scss

@@ -1,205 +1,206 @@
-@import "../../_vars.scss";
-@import "./_var.scss";
-@import "./_mixins.scss";
-@import "../../mixins/_reset.scss";
-@import "../../utilities/_tips.scss";
-
-.#{$prefix}-drawer {
-  $root: ".#{$prefix}-drawer";
-
-  position: fixed;
-  z-index: 1500;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  overflow: hidden;
-  outline: none;
-
-  &--lock {
-    overflow: hidden;
-  }
-
-  &--attach {
-    position: absolute;
-  }
-
-  &--left,
-  &--right {
-    top: 0;
-  }
-
-  &--left {
-    left: 0;
-  }
-
-  &--right {
-    right: 0;
-  }
-
-  &--top,
-  &--bottom {
-    left: 0;
-  }
-
-  &--top {
-    top: 0;
-  }
-
-  &--bottom {
-    bottom: 0;
-  }
-
-  &__mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: $drawer-mask;
-    transition: opacity $drawer-default-duration $drawer-default-timing-function;
-    opacity: 0;
-  }
-
-  &__content-wrapper {
-    display: flex;
-    flex-direction: column;
-    background: $drawer-bg-color;
-    width: 16px;
-    height: 16px;
-    font-size: $drawer-body-text-font-size;
-    color: $drawer-body-text-color;
-    box-shadow: $dialog-box-shadow;
-    overflow: hidden;
-    pointer-events: auto;
-    transition:
-      transform $drawer-slow-duration $drawer-default-timing-function,
-      visibility $drawer-slow-duration $drawer-default-timing-function;
-    position: relative;
-  }
-
-  #{$root}__content-wrapper {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-
-    &--left,
-    &--right {
-      top: 0;
-    }
-
-    &--left {
-      left: 0;
-      transform: translateX(-100%);
-    }
-
-    &--right {
-      right: 0;
-      transform: translateX(100%);
-    }
-
-    &--top,
-    &--bottom {
-      left: 0;
-    }
-
-    &--top {
-      top: 0;
-      transform: translateY(-100%);
-    }
-
-    &--bottom {
-      bottom: 0;
-      transform: translateY(100%);
-    }
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    min-height: $drawer-header-height;
-    padding: $drawer-header-padding;
-    font: $drawer-header-font-size;
-    color: $drawer-header-text-color;
-    border-bottom: 1px solid $drawer-border-color;
-    border-radius: $drawer-header-border-radius;
-    box-sizing: border-box;
-  }
-
-  &__body {
-    padding: $drawer-body-padding;
-    overflow: auto;
-    flex: 1;
-  }
-
-  &__footer {
-    width: 100%;
-    padding: $drawer-footer-padding;
-    text-align: $drawer-footer-text-align;
-    border-top: 1px solid $drawer-border-color;
-    background-color: $drawer-bg-color;
-    box-sizing: border-box;
-
-    .#{$prefix}-button {
-      margin-left: $drawer-footer-btn-margin-left;
-    }
-
-    .#{$prefix}-button:first-child {
-      margin-left: 0;
-    }
-  }
-
-  &__close-btn {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: $drawer-close-btn-size;
-    height: $drawer-close-btn-size;
-    top: calc((#{$drawer-header-height} - #{$drawer-close-btn-size}) / 2);
-    right: $drawer-close-btn-position-right;
-    color: $drawer-close-btn-color;
-    background-color: $drawer-close-btn-bg-color;
-    border-radius: $border-radius-default;
-    cursor: pointer;
-    transition: background-color $anim-duration-base;
-
-    &:hover {
-      background-color: $dialog-close-btn-bg-hover;
-    }
-
-    &:active {
-      background-color: $dialog-close-btn-bg-active;
-    }
-
-    .t-icon {
-      font-size: $drawer-icon-size;
-      vertical-align: unset;
-    }
-  }
-
-  &--open {
-    width: 100%;
-    height: 100%;
-    pointer-events: auto;
-
-    > #{$root}__content-wrapper {
-      visibility: visible;
-    }
-
-    > #{$root}__mask {
-      opacity: 1;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  // 覆盖 t-drawer--open
-  &--without-mask {
-    pointer-events: none;
-  }
-}
-
-[tabindex="-1"]:focus {
-  outline: none !important;
-}
+@use "../../_vars.scss" as *;
+@use "./_var.scss" as *;
+@use "./_mixins.scss" as *;
+@use "../../mixins/_reset.scss" as *;
+@use "../../utilities/_tips.scss" as *;
+
+.#{$prefix}-drawer {
+  $root: ".#{$prefix}-drawer";
+
+  position: fixed;
+  z-index: 1500;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: hidden;
+  outline: none;
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &--attach {
+    position: absolute;
+  }
+
+  &--left,
+  &--right {
+    top: 0;
+  }
+
+  &--left {
+    left: 0;
+  }
+
+  &--right {
+    right: 0;
+  }
+
+  &--top,
+  &--bottom {
+    left: 0;
+  }
+
+  &--top {
+    top: 0;
+  }
+
+  &--bottom {
+    bottom: 0;
+  }
+
+  &__mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: $drawer-mask;
+    transition: opacity $drawer-default-duration $drawer-default-timing-function;
+    opacity: 0;
+  }
+
+  &__content-wrapper {
+    display: flex;
+    flex-direction: column;
+    background: $drawer-bg-color;
+    width: 16px;
+    height: 16px;
+    font-size: $drawer-body-text-font-size;
+    color: $drawer-body-text-color;
+    box-shadow: $dialog-box-shadow;
+    overflow: hidden;
+    pointer-events: auto;
+    transition:
+      transform $drawer-slow-duration $drawer-default-timing-function,
+      visibility $drawer-slow-duration $drawer-default-timing-function;
+    position: relative;
+  }
+
+  #{$root}__content-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+
+    &--left,
+    &--right {
+      top: 0;
+    }
+
+    &--left {
+      left: 0;
+      transform: translateX(-100%);
+    }
+
+    &--right {
+      right: 0;
+      transform: translateX(100%);
+    }
+
+    &--top,
+    &--bottom {
+      left: 0;
+    }
+
+    &--top {
+      top: 0;
+      transform: translateY(-100%);
+    }
+
+    &--bottom {
+      bottom: 0;
+      transform: translateY(100%);
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    min-height: $drawer-header-height;
+    padding: $drawer-header-padding;
+    font: $drawer-header-font-size;
+    color: $drawer-header-text-color;
+    border-bottom: 1px solid $drawer-border-color;
+    border-radius: $drawer-header-border-radius;
+    box-sizing: border-box;
+  }
+
+  &__body {
+    padding: $drawer-body-padding;
+    overflow: auto;
+    flex: 1;
+  }
+
+  &__footer {
+    width: 100%;
+    padding: $drawer-footer-padding;
+    text-align: $drawer-footer-text-align;
+    border-top: 1px solid $drawer-border-color;
+    background-color: $drawer-bg-color;
+    box-sizing: border-box;
+
+    .#{$prefix}-button {
+      margin-inline-start: $drawer-footer-btn-margin-left;
+    }
+
+    .#{$prefix}-button:first-child {
+      margin-inline-start: 0;
+    }
+  }
+
+  &__close-btn {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: $drawer-close-btn-size;
+    height: $drawer-close-btn-size;
+    top: calc((#{$drawer-header-height} - #{$drawer-close-btn-size}) / 2);
+    inset-inline-end: $drawer-close-btn-position-right;
+    color: $drawer-close-btn-color;
+    background-color: $drawer-close-btn-bg-color;
+    border-radius: $border-radius-default;
+    cursor: pointer;
+    transition: background-color $anim-duration-base;
+
+    &:hover {
+      background-color: $dialog-close-btn-bg-hover;
+    }
+
+    &:active {
+      background-color: $dialog-close-btn-bg-active;
+    }
+
+    .t-icon {
+      font-size: $drawer-icon-size;
+      vertical-align: unset;
+    }
+  }
+
+  &--open {
+    width: 100%;
+    height: 100%;
+    pointer-events: auto;
+
+    > #{$root}__content-wrapper {
+      visibility: visible;
+    }
+
+    > #{$root}__mask {
+      opacity: 1;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // 覆盖 t-drawer--open
+  &--without-mask {
+    pointer-events: none;
+  }
+}
+
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+

package/styles/components/drawer/_var.scss

@@ -1,53 +1,55 @@
-/**
- * 颜色
- */
-$dialog-box-shadow: $shadow-2;
-$drawer-bg-color: $bg-color-container;
-$drawer-border-color: $border-level-1-color;
-$drawer-header-text-color: $text-color-primary;
-$drawer-body-text-color: $text-color-secondary;
-$drawer-shadow: $shadow-2;
-$drawer-mask: $mask-active;
-$drawer-close-btn-color: $text-color-primary;
-$drawer-close-btn-bg-color: $bg-color-container;
-$dialog-close-btn-bg-hover: $bg-color-container-hover;
-$dialog-close-btn-bg-active: $bg-color-container-active;
-/**
- * 尺寸
- */
-$drawer-icon-size: calc($font-size-base + 2px);
-$drawer-header-height: $comp-size-xxxl;
-$drawer-close-btn-size: $comp-size-xs;
-$drawer-content-wrapper-size: 300px;
-
-/**
- * 字体
- */
-$drawer-body-text-font-size: $font-body-medium;
-$drawer-header-font-size: $font-title-medium;
-
-/**
- * 动画
- */
-$drawer-default-timing-function: $anim-time-fn-easing;
-$drawer-default-duration: $anim-duration-base;
-$drawer-slow-duration: $anim-duration-slow;
-
-/**
- * 间距
- */
-$drawer-footer-padding: $comp-paddingTB-l $comp-paddingLR-l;
-$drawer-header-padding: 0 $comp-paddingLR-l;
-$drawer-body-padding: $comp-paddingTB-l $comp-paddingLR-l;
-$drawer-footer-btn-margin-left: $comp-margin-s;
-
-/**
- * 位置
- */
-$drawer-close-btn-position-right: $comp-margin-s;
-$drawer-footer-text-align: left;
-
-/**
- * 边框弧度
- */
-$drawer-header-border-radius: $border-radius-small $border-radius-small 0 0;
+/**
+ * 颜色
+ */
+@use "../../_vars.scss" as *;
+
+$dialog-box-shadow: $shadow-2;
+$drawer-bg-color: $bg-color-container;
+$drawer-border-color: $border-level-1-color;
+$drawer-header-text-color: $text-color-primary;
+$drawer-body-text-color: $text-color-secondary;
+$drawer-shadow: $shadow-2;
+$drawer-mask: $mask-active;
+$drawer-close-btn-color: $text-color-primary;
+$drawer-close-btn-bg-color: $bg-color-container;
+$dialog-close-btn-bg-hover: $bg-color-container-hover;
+$dialog-close-btn-bg-active: $bg-color-container-active;
+/**
+ * 尺寸
+ */
+$drawer-icon-size: calc($font-size-base + 2px);
+$drawer-header-height: $comp-size-xxxl;
+$drawer-close-btn-size: $comp-size-xs;
+$drawer-content-wrapper-size: 300px;
+
+/**
+ * 字体
+ */
+$drawer-body-text-font-size: $font-body-medium;
+$drawer-header-font-size: $font-title-medium;
+
+/**
+ * 动画
+ */
+$drawer-default-timing-function: $anim-time-fn-easing;
+$drawer-default-duration: $anim-duration-base;
+$drawer-slow-duration: $anim-duration-slow;
+
+/**
+ * 间距
+ */
+$drawer-footer-padding: $comp-paddingTB-l $comp-paddingLR-l;
+$drawer-header-padding: 0 $comp-paddingLR-l;
+$drawer-body-padding: $comp-paddingTB-l $comp-paddingLR-l;
+$drawer-footer-btn-margin-left: $comp-margin-s;
+
+/**
+ * 位置
+ */
+$drawer-close-btn-position-right: $comp-margin-s;
+$drawer-footer-text-align: start;
+
+/**
+ * 边框弧度
+ */
+$drawer-header-border-radius: $border-radius-small $border-radius-small 0 0;