@tendaui/components 1.0.0 → 1.2.3

package/styles/components/dialog/_vars.scss

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

@@ -0,0 +1,205 @@
+@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;
+}

package/styles/components/drawer/_mixins.scss

@@ -0,0 +1 @@
+

package/styles/components/drawer/_var.scss

@@ -0,0 +1,53 @@
+/**
+ * 颜色
+ */
+$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;

package/styles/components/fireworks/_index.scss

@@ -0,0 +1,86 @@
+@import "../../_vars.scss";
+@import "./_vars.scss";
+
+.#{$prefix}-fireworks {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  min-height: $fireworks-min-height;
+  background-color: rgba(2, 6, 13, 0.9);
+  border-radius: $border-radius-large;
+  isolation: isolate;
+}
+
+.#{$prefix}-fireworks__burst {
+  position: absolute;
+  top: var(--fireworks-top, 50%);
+  left: var(--fireworks-left, 50%);
+  width: var(--fireworks-size, 140px);
+  height: var(--fireworks-size, 140px);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  opacity: 0;
+  animation: fireworks-burst var(--fireworks-duration, 2400ms) ease-out forwards;
+  animation-delay: var(--fireworks-delay, 0ms);
+  mix-blend-mode: screen;
+}
+
+.#{$prefix}-fireworks__spark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: $fireworks-spark-width;
+  height: calc(var(--fireworks-size, 140px) / 2);
+  transform-origin: center 100%;
+  transform: translate(-50%, -100%) rotate(var(--fireworks-rotate, 0deg)) scaleY($fireworks-tail-scale);
+  background: linear-gradient(
+    180deg,
+    var(--fireworks-color, $brand-color) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  border-radius: $fireworks-spark-width;
+  filter: drop-shadow(0 0 $fireworks-spark-blur rgba(255, 255, 255, 0.7));
+  animation: fireworks-spark var(--fireworks-duration, 2400ms) ease-out forwards;
+  animation-delay: var(--fireworks-delay, 0ms);
+}
+
+@keyframes fireworks-burst {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -40%) scale(0.2);
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  60% {
+    opacity: 0.9;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes fireworks-spark {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -100%) rotate(var(--fireworks-rotate, 0deg)) scaleY($fireworks-tail-scale);
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  70% {
+    opacity: 0.9;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -220%) rotate(var(--fireworks-rotate, 0deg)) scaleY(1);
+  }
+}
+

package/styles/components/fireworks/_vars.scss

@@ -0,0 +1,4 @@
+$fireworks-min-height: 260px !default;
+$fireworks-spark-width: 2px !default;
+$fireworks-spark-blur: 6px !default;
+$fireworks-tail-scale: 0.2 !default;