@tendaui/components 1.2.4 → 1.3.0

package/styles/components/fireworks/_index.scss

@@ -1,86 +1,86 @@
-@use "../../_vars.scss" as *;
-@use "./_vars.scss" as *;
-
-.#{$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);
-  }
-}
-
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+
+.#{$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

@@ -1,5 +1,5 @@
-@use "../../_vars.scss" as *;
-$fireworks-min-height: 260px !default;
-$fireworks-spark-width: 2px !default;
-$fireworks-spark-blur: 6px !default;
-$fireworks-tail-scale: 0.2 !default;
+@use "../../_vars.scss" as *;
+$fireworks-min-height: 260px !default;
+$fireworks-spark-width: 2px !default;
+$fireworks-spark-blur: 6px !default;
+$fireworks-tail-scale: 0.2 !default;

package/styles/components/form/_index.scss

@@ -1,175 +1,176 @@
-@use "../../_vars.scss" as *;
-// 组件允许单个组件打包，因此默认引入公共基础样式
+@use "../../_vars.scss" as *;
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@use '../../_vars.scss' as *;
+
+@use './_vars.scss' as *;
+
+@use './_mixins.scss' as *;
+
+@use '../../mixins/_reset.scss' as *;
+
+.#{$prefix}-form {
+  @include reset;
+
+  font: $form-font;
+
+  &:not(.#{$prefix}-form-inline) {
+    .#{$prefix}-form__item {
+      &:last-of-type {
+        margin: 0;
+      }
+    }
+  }
+
+  &__item {
+    margin-bottom: $form-item-margin-bottom;
+
+    // 文档流撑开内容补足剩余�?4px
+    &.#{$prefix}-form__item-with-help {
+      margin-bottom: $form-item-with-help-margin-bottom;
+    }
+
+    // 绝对定位布局需要重设底部间�?
+    &.#{$prefix}-form__item-with-extra {
+      margin-bottom: $form-item-margin-bottom;
+    }
+  }
+
+  &__label {
+    float: left;
+    padding-inline-end: $form-label-padding-right;
+    vertical-align: middle;
+    line-height: $form-item-control-height;
+    color: $form-color-label;
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    &--top {
+      float: none;
+      min-height: $form-item-control-height;
+    }
+
+    &--left {
+      text-align: left;
+    }
+
+    &--right {
+      text-align: right;
+    }
+
+    &--required:not(.#{$prefix}-form__label--required-right) {
+      label::before {
+        display: inline-block;
+        margin-inline-end: $form-label-margin-right-required;
+        color: $form-color-error;
+        line-height: $form-label-line-height;
+        content: '*';
+      }
+    }
+
+    &--required-right {
+      label::after {
+        display: inline-block;
+        margin-inline-start: $form-label-margin-left-required;
+        color: $form-color-error;
+        line-height: $form-label-line-height;
+        content: '*';
+      }
+    }
+
+    &--colon {
+      label::after {
+        content: ':';
+        position: relative;
+        margin: $form-label-margin-colon;
+      }
+    }
+  }
+
+  &__controls {
+    min-height: $form-item-control-height;
+    display: flow-root;
+    position: relative;
+
+    &-content {
+      display: flex;
+      align-items: center;
+      min-height: $form-item-control-height;
+    }
+
+    // formItem 嵌套情况无间�?
+    .#{$prefix}-form__item {
+      margin-bottom: 0;
+      margin-inline-end: $form-item-margin-right-inline;
+    }
+  }
+
+  &__controls.#{$prefix}-is-success {
+    @include input-status-icon(success);
+    @include input-status-extra(success);
+  }
+
+  &__controls.#{$prefix}-form--success-border {
+    // 输入框状�?
+    @include input-status(success);
+  }
+
+  &__status {
+    display: flex;
+    margin: $form-status-margin;
+
+    > .t-icon {
+      font-size: $form-status-icon-size;
+    }
+
+    &-without-icon {
+      width: 25px;
+      height: 25px;
+    }
+
+    button {
+      width: $form-status-button-width;
+    }
+
+    button + button {
+      margin-inline-start: $form-status-button-margin;
+    }
+  }
+}
+
+.#{$prefix}-form-inline {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: $form-item-row-gap;
+
+  .#{$prefix}-form__item {
+    margin: 0;
+    min-width: 200px;
+    display: inline-block;
+    margin-inline-end: $form-item-margin-right-inline;
+  }
+}
+
+.#{$prefix}-input__extra,
+.#{$prefix}-input__help {
+  margin: 0;
+  width: 100%;
+  height: auto;
+  min-height: $form-item-help-line-height;
+  font: $form-item-help-font;
+  color: $form-color-extra;
+}
+
+.#{$prefix}-input__extra {
+  position: absolute;
+  bottom: calc(0px - $form-item-help-line-height);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// 输入框状�?
+@include input-status(warning);
+@include input-status(error);
 
-@use '../../_vars.scss' as *;
-
-@use './_vars.scss' as *;
-
-@use './_mixins.scss' as *;
-
-@use '../../mixins/_reset.scss' as *;
-
-.#{$prefix}-form {
-  @include reset;
-
-  font: $form-font;
-
-  &:not(.#{$prefix}-form-inline) {
-    .#{$prefix}-form__item {
-      &:last-of-type {
-        margin: 0;
-      }
-    }
-  }
-
-  &__item {
-    margin-bottom: $form-item-margin-bottom;
-
-    // 文档流撑开内容补足剩余�?4px
-    &.#{$prefix}-form__item-with-help {
-      margin-bottom: $form-item-with-help-margin-bottom;
-    }
-
-    // 绝对定位布局需要重设底部间�?
-    &.#{$prefix}-form__item-with-extra {
-      margin-bottom: $form-item-margin-bottom;
-    }
-  }
-
-  &__label {
-    float: left;
-    padding-right: $form-label-padding-right;
-    vertical-align: middle;
-    line-height: $form-item-control-height;
-    color: $form-color-label;
-    box-sizing: border-box;
-    white-space: nowrap;
-
-    &--top {
-      float: none;
-      min-height: $form-item-control-height;
-    }
-
-    &--left {
-      text-align: left;
-    }
-
-    &--right {
-      text-align: right;
-    }
-
-    &--required:not(.#{$prefix}-form__label--required-right) {
-      label::before {
-        display: inline-block;
-        margin-right: $form-label-margin-right-required;
-        color: $form-color-error;
-        line-height: $form-label-line-height;
-        content: '*';
-      }
-    }
-
-    &--required-right {
-      label::after {
-        display: inline-block;
-        margin-left: $form-label-margin-left-required;
-        color: $form-color-error;
-        line-height: $form-label-line-height;
-        content: '*';
-      }
-    }
-
-    &--colon {
-      label::after {
-        content: ':';
-        position: relative;
-        margin: $form-label-margin-colon;
-      }
-    }
-  }
-
-  &__controls {
-    min-height: $form-item-control-height;
-    display: flow-root;
-    position: relative;
-
-    &-content {
-      display: flex;
-      align-items: center;
-      min-height: $form-item-control-height;
-    }
-
-    // formItem 嵌套情况无间�?
-    .#{$prefix}-form__item {
-      margin-bottom: 0;
-      margin-right: $form-item-margin-right-inline;
-    }
-  }
-
-  &__controls.#{$prefix}-is-success {
-    @include input-status-icon(success);
-    @include input-status-extra(success);
-  }
-
-  &__controls.#{$prefix}-form--success-border {
-    // 输入框状�?
-    @include input-status(success);
-  }
-
-  &__status {
-    display: flex;
-    margin: $form-status-margin;
-
-    > .t-icon {
-      font-size: $form-status-icon-size;
-    }
-
-    &-without-icon {
-      width: 25px;
-      height: 25px;
-    }
-
-    button {
-      width: $form-status-button-width;
-    }
-
-    button + button {
-      margin-left: $form-status-button-margin;
-    }
-  }
-}
-
-.#{$prefix}-form-inline {
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: $form-item-row-gap;
-
-  .#{$prefix}-form__item {
-    margin: 0;
-    min-width: 200px;
-    display: inline-block;
-    margin-right: $form-item-margin-right-inline;
-  }
-}
-
-.#{$prefix}-input__extra,
-.#{$prefix}-input__help {
-  margin: 0;
-  width: 100%;
-  height: auto;
-  min-height: $form-item-help-line-height;
-  font: $form-item-help-font;
-  color: $form-color-extra;
-}
-
-.#{$prefix}-input__extra {
-  position: absolute;
-  bottom: calc(0px - $form-item-help-line-height);
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// 输入框状�?
-@include input-status(warning);
-@include input-status(error);

package/styles/components/form/_mixins.scss

@@ -1,74 +1,74 @@
-@use "sass:map";
-@use "../../_vars.scss" as *;
-@use "./_vars.scss" as *;
-
-@mixin input-status($status) {
-  .#{$prefix}-is-#{$status} {
-    // 辅助文字
-    @include input-status-extra($status);
-
-    .#{$prefix}-form__controls-content {
-      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变量
-      .#{$prefix}-input,
-      .#{$prefix}-select,
-      .#{$prefix}-radio-button,
-      .#{$prefix}-cascader,
-      .#{$prefix}-range-input,
-      .#{$prefix}-textarea__inner {
-        border-color: map.get(map.get($input-color, border), $status);
-
-        &--focused {
-          box-shadow: 0 0 0 2px map.get(map.get($input-color, box-shadow), $status);
-        }
-
-        // 处理组件内icon颜色
-        .t-icon,
-        .#{$prefix}-fake-arrow {
-          color: map.get(map.get($input-color, border), $status);
-        }
-      }
-
-      .#{$prefix}-select {
-        > .#{$prefix}-select__right-icon:not(.#{$prefix}-select__right-icon-clear) {
-          color: map.get(map.get($input-color, border), $status);
-        }
-      }
-
-      .#{$prefix}-radio-button {
-        &:last-child {
-          border-right-color: map.get(map.get($input-color, border), $status);
-        }
-      }
-
-      .#{$prefix}-textarea__inner {
-        &.#{$prefix}-is-focused {
-          box-shadow: 0 0 0 2px map.get(map.get($input-color, border), $status);
-        }
-      }
-
-      .#{$prefix}-cascader,
-      .#{$prefix}-select {
-        &.#{$prefix}-is-active {
-          box-shadow: 0 0 0 2px map.get(map.get($input-color, box-shadow), $status);
-        }
-      }
-
-      // 右侧状态图标
-      @include input-status-icon($status);
-    }
-  }
-}
-
-@mixin input-status-icon($status) {
-  .#{$prefix}-form__status {
-    .t-icon {
-      color: map.get($form-color, $status);
-    }
-  }
-}
-
-@mixin input-status-extra($status) {
-  .#{$prefix}-input__extra {
-    color: map.get($form-color, $status);
-  }
-}
+@use "sass:map";
+@use "../../_vars.scss" as *;
+@use "./_vars.scss" as *;
+
+@mixin input-status($status) {
+  .#{$prefix}-is-#{$status} {
+    // 辅助文字
+    @include input-status-extra($status);
+
+    .#{$prefix}-form__controls-content {
+      // TODO: 兼容目前未使用SelectInput重构的组件的样式 全部重构后可以都由input层控制状态变量
+      .#{$prefix}-input,
+      .#{$prefix}-select,
+      .#{$prefix}-radio-button,
+      .#{$prefix}-cascader,
+      .#{$prefix}-range-input,
+      .#{$prefix}-textarea__inner {
+        border-color: map.get(map.get($input-color, border), $status);
+
+        &--focused {
+          box-shadow: 0 0 0 2px map.get(map.get($input-color, box-shadow), $status);
+        }
+
+        // 处理组件内icon颜色
+        .t-icon,
+        .#{$prefix}-fake-arrow {
+          color: map.get(map.get($input-color, border), $status);
+        }
+      }
+
+      .#{$prefix}-select {
+        > .#{$prefix}-select__right-icon:not(.#{$prefix}-select__right-icon-clear) {
+          color: map.get(map.get($input-color, border), $status);
+        }
+      }
+
+      .#{$prefix}-radio-button {
+        &:last-child {
+          border-right-color: map.get(map.get($input-color, border), $status);
+        }
+      }
+
+      .#{$prefix}-textarea__inner {
+        &.#{$prefix}-is-focused {
+          box-shadow: 0 0 0 2px map.get(map.get($input-color, border), $status);
+        }
+      }
+
+      .#{$prefix}-cascader,
+      .#{$prefix}-select {
+        &.#{$prefix}-is-active {
+          box-shadow: 0 0 0 2px map.get(map.get($input-color, box-shadow), $status);
+        }
+      }
+
+      // 右侧状态图标
+      @include input-status-icon($status);
+    }
+  }
+}
+
+@mixin input-status-icon($status) {
+  .#{$prefix}-form__status {
+    .t-icon {
+      color: map.get($form-color, $status);
+    }
+  }
+}
+
+@mixin input-status-extra($status) {
+  .#{$prefix}-input__extra {
+    color: map.get($form-color, $status);
+  }
+}