@tendaui/components 1.0.0

package/styles/components/checkbox/_index.scss

@@ -0,0 +1,158 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import '../../vars.scss';
+
+@import './_var.scss';
+
+@import './_mixin.scss';
+
+@import '../../mixins/_layout.scss';
+
+@import '../../mixins/_reset.scss';
+
+@import '../../mixins/_focus.scss';
+
+// <name> 替换为组件名
+.#{$checkbox-cls}-group {
+  @include reset;
+
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: $checkbox-group-gap;
+}
+
+.#{$checkbox-cls} {
+  @include reset;
+
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  color: $checkbox-label-color;
+
+  & + .#{$checkbox-cls} {
+    margin-left: $checkbox-margin;
+  }
+
+  &__former {
+    @include input-visually-hidden();
+  }
+
+  &__input {
+    position: relative;
+    display: inline-block;
+    width: $checkbox-size;
+    height: $checkbox-size;
+    vertical-align: middle;
+    border: 1px solid $checkbox-border-color;
+    border-radius: $checkbox-border-radius;
+    background-color: $checkbox-input-color;
+    box-sizing: border-box;
+    flex-shrink: 0;
+
+    &::after {
+      content: '';
+      position: absolute;
+      opacity: 0;
+      box-sizing: border-box;
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    margin-left: $checkbox-input-label-spacer;
+    vertical-align: middle;
+    font: $checkbox-font;
+  }
+
+  &:hover {
+    .#{$checkbox-cls}__input {
+      border-color: $checkbox-border-color-hover;
+      transition: border-color $anim-duration-base linear;
+    }
+  }
+
+  &.#{$prefix}-is-checked {
+    .#{$checkbox-cls}__input {
+      border-color: $checkbox-border-color-checked;
+      background-color: $checkbox-input-color-checked;
+      transition: background-color $anim-duration-base $anim-time-fn-ease-in;
+
+      &::after {
+        opacity: 1;
+        top: (($checkbox-size) / 2 - 2px);
+        left: $checkbox-check-left;
+        width: $checkbox-check-width;
+        height: $checkbox-check-height;
+        border: 2px solid $checkbox-check-color;
+        border-radius: 0 0 1px;
+        border-top: 0;
+        border-left: 0;
+        transform: rotate(45deg) scale(1) translate(-50%, -50%);
+        background: transparent;
+      }
+    }
+  }
+
+  &.#{$prefix}-is-indeterminate {
+    .#{$checkbox-cls}__input {
+      border-color: $checkbox-input-color-indeterminate;
+      background-color: $checkbox-input-color-indeterminate;
+      transition: background-color $anim-duration-base $anim-time-fn-ease-in;
+
+      &::after {
+        opacity: 1;
+        width: $checkbox-indeterminate-width;
+        height: $checkbox-indeterminate-height;
+        left: -1px;
+        right: 0;
+        top: (($checkbox-size - 2 - $checkbox-indeterminate-height) * 0.5);
+        border: unset;
+        transform: scale(0.5);
+        background-color: $checkbox-indeterminate-color;
+      }
+    }
+  }
+
+  &.#{$prefix}-is-disabled {
+    cursor: not-allowed;
+
+    .#{$checkbox-cls}__label {
+      color: $checkbox-check-color-disabled;
+    }
+
+    .#{$checkbox-cls}__input {
+      background-color: $checkbox-input-color-disabled;
+    }
+
+    &:hover {
+      .#{$checkbox-cls}__input {
+        border-color: $checkbox-border-color;
+      }
+    }
+
+    &.#{$prefix}-is-checked {
+      .#{$checkbox-cls}__input {
+        border-color: $checkbox-border-color;
+
+        &::after {
+          border-color: $checkbox-check-icon-disabled-color;
+        }
+      }
+    }
+
+    &.#{$prefix}-is-indeterminate {
+      .#{$checkbox-cls}__input {
+        border-color: $checkbox-border-color;
+
+        &::after {
+          background-color: $checkbox-indeterminate-color-disabled;
+        }
+      }
+    }
+  }
+}
+
+.#{$prefix}-checkbox:focus-visible {
+  @include tab-focus-style-rect();
+}

package/styles/components/checkbox/_var.scss

@@ -0,0 +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
+
+$checkbox-cls: '#{$prefix}-checkbox';
+
+// 颜色
+$checkbox-border-color: $border-level-2-color;
+$checkbox-border-color-checked: $brand-color;
+$checkbox-border-color-hover: $brand-color;
+
+$checkbox-input-color: $bg-color-container;
+$checkbox-input-color-checked: $brand-color;
+$checkbox-input-color-disabled: $bg-color-component-disabled;
+
+$checkbox-check-color: $text-color-anti;
+$checkbox-check-color-disabled: $text-color-disabled;
+// 图标禁止选中状态下时icon的色值变量
+$checkbox-check-icon-disabled-color: $text-color-disabled;
+
+$checkbox-input-color-indeterminate: $brand-color;
+$checkbox-indeterminate-color-disabled: $text-color-disabled;
+
+$checkbox-label-color: $text-color-primary;
+
+// 尺寸
+$checkbox-size: 16px;
+$checkbox-border-radius: $border-radius-default;
+$checkbox-margin-right: $comp-margin-s;
+
+$checkbox-check-width: 5px;
+$checkbox-check-height: 9px;
+$checkbox-check-size: (
+  ($checkbox-check-width + $checkbox-check-height) / sqrt(2)
+);
+$checkbox-check-left: 3px;
+
+$checkbox-indeterminate-width: 16px;
+$checkbox-indeterminate-height: 4px;
+$checkbox-indeterminate-color: $font-white-1;
+
+// 字号
+$checkbox-font: $font-body-medium;
+
+// padding
+$checkbox-input-label-spacer: $spacer;
+
+// 组合复选框margin
+$checkbox-group-gap: $spacer-2;
+// 单个复选框margin
+$checkbox-margin: inherit;

package/styles/components/dialog/_animate.scss

@@ -0,0 +1,135 @@
+@import '../../_vars.scss';
+
+.#{$prefix}-dialog-zoom {
+  @keyframes tDialogZoomIn {
+    // 解决弹窗中带有动效的Icon不展示（如loading），初始scale为1可以展示正常
+    0% {
+      opacity: 0;
+      transform: scale(0.01);
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes tDialogZoomOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(0.01);
+    }
+  }
+
+  @keyframes tDialogMaskIn {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes tDialogMaskOut {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @mixin animation-enter {
+    animation-duration: $dialog-anim-duration;
+    animation-fill-mode: both;
+    animation-timing-function: $anim-time-fn-ease-out;
+    animation-play-state: paused;
+  }
+
+  @mixin animation-exit {
+    animation-duration: $dialog-anim-duration;
+    animation-fill-mode: both;
+    animation-timing-function: $dialog-anim-time-fn-exit;
+    animation-play-state: paused;
+  }
+
+  @mixin animation-active {
+    animation-play-state: running;
+    animation-fill-mode: both;
+  }
+
+  &-enter,
+  &-enter-from,
+  &-appear {
+    @include animation-enter;
+  }
+
+  &-exit {
+    @include animation-exit;
+  }
+
+  &-enter-active,
+  &-appear-active {
+    animation-name: tDialogZoomIn;
+    @include animation-active;
+  }
+
+  &-exit-active {
+    animation-name: tDialogZoomOut;
+    @include animation-active;
+  }
+
+
+}
+
+.#{$prefix}-dialog-fade-enter,
+.#{$prefix}-dialog-fade-appear {
+  opacity: 0;
+  animation-duration: $dialog-anim-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $anim-time-fn-ease-out;
+  animation-play-state: paused;
+}
+
+.#{$prefix}-dialog-fade-exit {
+  animation-duration: $dialog-anim-duration;
+  animation-fill-mode: both;
+  animation-timing-function: $anim-time-fn-ease-out;
+  animation-play-state: paused;
+}
+
+.#{$prefix}-dialog-fade-enter.#{$prefix}-dialog-fade-enter-active,
+.#{$prefix}-dialog-fade-appear.#{$prefix}-dialog-fade-appear-active {
+  animation-name: tDialogFadeIn;
+  animation-play-state: running;
+}
+
+.#{$prefix}-dialog-fade-exit.#{$prefix}-dialog-fade-exit-active {
+  animation-name: tDialogFadeOut;
+  animation-play-state: running;
+}
+
+@keyframes tDialogFadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes tDialogFadeOut {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/styles/components/dialog/_index.scss

@@ -0,0 +1,311 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import '../../_vars.scss';
+
+@import './_vars.scss';
+
+@import './_animate.scss';
+
+@import './_mixins.scss';
+
+@import '../../mixins/_reset.scss';
+
+@import '../../mixins/_scrollbar.scss';
+
+// <name> 替换为组件名
+.#{$prefix}-dialog {
+  @include reset;
+
+  width: $dialog-width;
+  background-color: $dialog-bg-color;
+  position: relative;
+  border: $dialog-border;
+  border-radius: $border-radius-large;
+
+  // icon theme
+  .t-icon.#{$prefix}-is-info {
+    color: $dialog-info-icon-color;
+  }
+
+  .t-icon.#{$prefix}-is-success {
+    color: $dialog-success-icon-color;
+  }
+
+  .t-icon.#{$prefix}-is-warning {
+    color: $dialog-warning-icon-color;
+  }
+
+  .t-icon.#{$prefix}-is-error {
+    color: $dialog-error-icon-color;
+  }
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &__header {
+    color: $dialog-header-text-color;
+    font: $dialog-header-font;
+    font-weight: $dialog-header-weight;
+    display: flex;
+    align-items: center;
+    word-break: break-word;
+    gap: $dialog-header-content-margin-right;
+    box-sizing: border-box;
+
+    .#{$prefix}-dialog__header-content {
+      display: flex;
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    .t-icon:not(.t-icon-close) {
+      font-size: $dialog-icon-size;
+      display: inline-flex;
+      align-items: center;
+      margin-right: $dialog-header-icon-margin-right;
+      flex-shrink: 0;
+    }
+  }
+
+  &__header--fullscreen {
+    background-color: $dialog-header-bg-color-fullscreen;
+    min-height: $dialog-header-height-fullscreen;
+    justify-content: flex-end;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    padding: $dialog-header-padding-fullscreen;
+
+    .#{$prefix}-dialog__header-content {
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  &__body {
+    @include scrollbar();
+
+    color: $dialog-body-text-color;
+    font: $dialog-body-text-font;
+    overflow: auto;
+    padding: $dialog-body-padding;
+    word-break: break-word;
+
+    &__icon,
+    &--icon {
+      padding: $dialog-body-icon-padding;
+    }
+  }
+
+  &__body--fullscreen {
+    @include scrollbar();
+
+    box-sizing: border-box;
+    padding: $dialog-body-padding-fullscreen;
+    height: calc(
+      100% - $dialog-header-height-fullscreen - $dialog-footer-height-fullscreen
+    );
+    overflow: auto;
+  }
+
+  &__body--fullscreen--without-footer {
+    box-sizing: border-box;
+    padding: $dialog-body-padding-fullscreen;
+    height: calc(100% - $dialog-header-height-fullscreen);
+    overflow: auto;
+  }
+
+  &__footer {
+    width: 100%;
+    text-align: right;
+    padding: $dialog-footer-padding;
+    .#{$prefix}-button + .#{$prefix}-button {
+      margin-left: $dialog-footer-button-margin-left;
+    }
+  }
+
+  &__footer--fullscreen {
+    min-height: $dialog-footer-height-fullscreen;
+    padding: $dialog-footer-padding-fullscreen;
+    box-sizing: border-box;
+  }
+
+  &--default {
+    padding: $dialog-default-spacer;
+  }
+
+  &__close {
+    font-size: $dialog-close-icon-size;
+    color: $dialog-close-color;
+    display: flex;
+    width: $dialog-close-icon-size;
+    height: $dialog-close-icon-size;
+    align-items: center;
+    border-radius: $border-radius-default;
+    transition: all $anim-duration-base linear;
+    padding: $dialog-closebtn-padding;
+
+    &:hover {
+      cursor: pointer;
+      background: $dialog-close-icon-hover;
+    }
+
+    &:active {
+      background: $dialog-close-icon-active;
+    }
+  }
+
+  &__close--fullscreen {
+    display: flex;
+    background: transparent;
+
+    &:hover {
+      cursor: pointer;
+      background: $dialog-close-icon-fullscreen-hover;
+    }
+
+    &:active {
+      background: $dialog-close-icon-fullscreen-active;
+    }
+  }
+
+  &.#{$prefix}-dialog--draggable {
+    &:hover {
+      cursor: move;
+    }
+    .#{$prefix}-dialog__header,
+    .#{$prefix}-dialog__body,
+    .#{$prefix}-dialog__footer {
+      &:hover {
+        cursor: auto;
+      }
+    }
+  }
+
+  &__fullscreen {
+    width: 100%;
+    border-radius: 0;
+  }
+}
+
+// t-dialog 组件本身
+.#{$prefix}-dialog__ctx {
+  // dialog内容溢出需要考虑滚动
+  pointer-events: auto;
+  outline: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  // modeless 点击穿透 即可以操作背景后的元素
+  &.#{$prefix}-dialog__ctx--modeless {
+    pointer-events: none;
+  }
+
+  &.#{$prefix}-dialog__ctx--fixed {
+    position: fixed;
+    z-index: $z-index-dialog;
+  }
+
+  &.#{$prefix}-dialog__ctx--absolute {
+    position: absolute;
+    // 用于挂载元素 修改定位方式
+    .#{$prefix}-dialog__mask {
+      position: absolute;
+    }
+    .#{$prefix}-dialog__wrap {
+      position: absolute;
+    }
+  }
+
+  &.#{$prefix}-is-visible {
+    visibility: visible;
+  }
+
+  &.#{$prefix}-is-hidden {
+    visibility: hidden;
+  }
+
+  &.#{$prefix}-is-display {
+    display: block;
+  }
+
+  &.#{$prefix}-not-display {
+    display: none;
+  }
+  // 遮罩层
+  .#{$prefix}-dialog__mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: $dialog-mask-bg-color;
+    pointer-events: auto;
+  }
+  // wrap 滚动的显示层 固定为页面窗口大小
+  .#{$prefix}-dialog__wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    overflow: auto;
+    @include scrollbar(8px, 2px);
+  }
+  // 定位层 用于实现居中 或者距离顶部 定位
+  .#{$prefix}-dialog__position {
+    // 因为内容会超出 使用flex布局
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    width: 100%;
+    // 通过修改position为absolute进行拖拽定位
+    position: relative;
+    // 设置最小距离顶部底部距离
+    padding: 48px 0;
+    box-sizing: border-box;
+    // 居中和距顶部布局
+    &.#{$prefix}-dialog--top {
+      align-items: flex-start;
+      // 这里top api实现 更改padding 因为子元素拖拽定位 如果使用子元素margin 拖拽时需要计算margin 比较麻烦
+      padding-top: $dialog-top-position-top;
+    }
+    // 垂直居中布局
+    &.#{$prefix}-dialog--center {
+      align-items: center;
+    }
+  }
+
+  .#{$prefix}-dialog__position_fullscreen {
+    // 因为内容会超出 使用flex布局
+    display: flex;
+    justify-content: center;
+    min-height: 100%;
+    width: 100%;
+    // 通过修改position为absolute进行拖拽定位
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .#{$prefix}-is-hidden {
+    background: none;
+  }
+
+  .#{$prefix}-dialog {
+    pointer-events: auto;
+    z-index: $z-index-dialog;
+  }
+
+  &.#{$prefix}-dialog__ctx--modeless {
+    .#{$prefix}-dialog {
+      box-shadow: $shadow-3;
+    }
+  }
+}