@tendaui/components 1.0.0

package/styles/components/input/_index.scss

@@ -0,0 +1,349 @@
+@import './_vars.scss';
+@import './_mixins.scss';
+@import '../../mixins/_text.scss';
+@import './_map.scss';
+
+@import '../../mixins/_reset.scss';
+@import '../../utilities/_tips.scss';
+
+.#{$prefix}-input {
+  @include reset;
+  @include input-status(success);
+  @include input-status(warning);
+  @include input-status(error);
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+  height: $input-height-default;
+  @include input-base;
+
+  // borderless mode
+  &--borderless:not(&--focused) {
+    border-color: transparent;
+    transition: $input-inner-transition;
+
+    &:hover {
+      border-color: $component-border;
+      background-color: $bg-color-container-hover;
+      cursor: pointer;
+    }
+
+    &.#{$prefix}-is-disabled {
+      border: none;
+      background-color: $input-bg-color-disabled;
+    }
+  }
+
+  &--focused {
+    border-color: $input-border-color-default-focus;
+    box-shadow: $input-box-shadow-focus;
+    z-index: 1;
+  }
+
+  :focus-visible {
+    outline: none;
+  }
+
+  // 真正的输入框
+  &__inner {
+    flex: 1;
+    border: none;
+    outline: none;
+    padding: 0;
+    max-width: 100%;
+    min-width: 0;
+    color: $input-text-color-default;
+    font: inherit;
+    background-color: transparent;
+    box-sizing: border-box;
+    @include text-ellipsis;
+
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+
+    &:placeholder-shown {
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+
+    // 隐藏Edge浏览器默认的密码框样式
+    &[type='password']::-ms-reveal {
+      display: none;
+    }
+
+    &[type='search']::-webkit-search-decoration,
+    &[type='search']::-webkit-search-cancel-button,
+    &[type='search']::-webkit-search-results-button,
+    &[type='search']::-webkit-search-results-decoration {
+      appearance: none;
+    }
+
+    &.#{$prefix}-input--soft-hidden {
+      width: 0;
+    }
+  }
+
+  // 底部的额外消息
+  &__extra {
+    font: $input-extra-font;
+    color: $input-extra-color-default;
+  }
+
+  // 输入框后面的状态图标
+  &__status {
+    position: absolute;
+    right: $input-status-position-right;
+    top: 0;
+  }
+
+  &.#{$prefix}-input--suffix > span.#{$prefix}-input__clear {
+    opacity: 0;
+    visibility: hidden;
+    transition: $input-inner-transition;
+  }
+
+  &.#{$prefix}-input--suffix:hover > span.#{$prefix}-input__clear {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  // 输入框状态
+
+  @include input-readonly;
+  @include input-disabled;
+
+  // 输入框的前置、后置图标
+  @include input-fix-position(prefix);
+  @include input-fix-position(suffix);
+
+  .#{$prefix}-input__suffix-clear {
+    cursor: pointer;
+    width: 1em;
+    height: 1em;
+  }
+
+  // 输入框大小
+  &.#{$prefix}-size-l {
+    height: $input-height-l;
+    font: $input-font-l;
+    padding: $input-padding-l;
+  }
+
+  &.#{$prefix}-size-s {
+    height: $input-height-s;
+    font: $input-font-s;
+  }
+
+  .#{$prefix}-input__prefix,
+  .#{$prefix}-input__suffix {
+    > .t-icon {
+      font-size: $input-inner-icon-font-size;
+    }
+  }
+
+  .#{$prefix}-input__prefix {
+    > .t-icon {
+      color: $input-inner-prefix-icon-color;
+    }
+
+    &:not(:empty) {
+      margin-right: $comp-margin-s;
+    }
+  }
+
+  .#{$prefix}-input__suffix {
+    > .t-icon {
+      color: $input-inner-suffix-icon-color;
+      transition: all $anim-duration-base linear;
+
+      &:hover {
+        color: $input-inner-suffix-icon-color-hover;
+        transition: all $anim-duration-base linear;
+      }
+    }
+
+    &:not(:empty) {
+      margin-left: $comp-margin-s;
+    }
+  }
+
+  // 输入框被聚焦
+  &.#{$prefix}-is-focused {
+    .#{$prefix}-input__prefix {
+      > .t-icon {
+        color: $input-border-color-default-focus;
+      }
+    }
+    .#{$prefix}-input__suffix {
+      // 特殊使用的 suffix icon
+      > .t-icon-time,
+      .t-icon-calendar {
+        color: $input-border-color-default-focus;
+      }
+    }
+  }
+}
+
+// 输入框组
+.#{$prefix}-input-group {
+  position: relative;
+  display: inline-flex;
+  align-items: stretch;
+
+  .#{$prefix}-input__wrap {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: $input-border-radius 0 0 $input-border-radius;
+    }
+
+    &:last-child {
+      border-radius: 0 $border-radius-default $border-radius-default 0;
+    }
+  }
+
+  .#{$prefix}-button,
+  .#{$prefix}-select {
+    border-radius: 0;
+
+    &:not(:first-child) {
+      margin-left: $input-group-first-child-margin-left;
+    }
+  }
+
+  .#{$prefix}-input__wrap {
+    &:not(:first-child) {
+      .#{$prefix}-input {
+        margin-left: $input-group-first-child-margin-left;
+      }
+    }
+
+    &:first-child {
+      .#{$prefix}-input {
+        border-radius: $input-border-radius 0 0 $input-border-radius;
+      }
+    }
+
+    &:last-child {
+      .#{$prefix}-input {
+        border-radius: 0 $input-border-radius $input-border-radius 0;
+      }
+    }
+  }
+
+  .#{$prefix}-button,
+  .#{$prefix}-select {
+    &:first-child {
+      border-radius: $input-border-radius 0 0 $input-border-radius;
+    }
+
+    &:last-child {
+      border-radius: 0 $input-border-radius $input-border-radius 0;
+    }
+  }
+
+  &--separate {
+    .#{$prefix}-input__wrap + .#{$prefix}-input__wrap {
+      margin-left: $input-margin-distance-default;
+    }
+
+    .#{$prefix}-button,
+    .#{$prefix}-select {
+      border-radius: $input-border-radius;
+
+      &:first-child {
+        border-radius: $input-border-radius 0 0 $input-border-radius;
+      }
+
+      &:last-child {
+        border-radius: 0 $input-border-radius $input-border-radius 0;
+      }
+    }
+
+    .#{$prefix}-input__wrap {
+      .#{$prefix}-input {
+        border-radius: $input-border-radius;
+
+        &:first-child {
+          border-radius: $input-border-radius;
+        }
+
+        &:last-child {
+          border-radius: $input-border-radius;
+        }
+      }
+    }
+  }
+
+  .#{$prefix}-input__inner,
+  .#{$prefix}-button,
+  .#{$prefix}-select {
+    position: relative;
+    z-index: 0;
+
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 1;
+    }
+  }
+}
+
+.#{$prefix}-input__wrap {
+  width: 100%;
+}
+
+.#{$prefix}-input__tips {
+  height: auto;
+  min-height: $input-tips-min-height;
+  font: $input-tips-font;
+  position: absolute;
+}
+
+.#{$prefix}-input__tips--default {
+  color: $input-text-color-tips;
+}
+
+.#{$prefix}-input__tips--success {
+  color: $input-text-color-success;
+}
+
+.#{$prefix}-input__tips--warning {
+  color: $input-text-color-warning;
+}
+
+.#{$prefix}-input__tips--error {
+  color: $input-text-color-error;
+}
+
+.#{$prefix}-align-center > .#{$prefix}-input__inner {
+  text-align: center;
+}
+
+.#{$prefix}-align-right > .#{$prefix}-input__inner {
+  text-align: right;
+}
+
+.#{$prefix}-input__input-pre {
+  position: absolute;
+  visibility: hidden;
+  white-space: pre;
+  display: block;
+}
+
+.#{$prefix}-input--auto-width {
+  width: fit-content;
+  min-width: 60px;
+}
+
+// 字数限制数字
+.#{$prefix}-input__limit-number {
+  font: $input-font;
+  color: $input-limit-color;
+  background: $input-bg-color-default;
+
+  &.#{$prefix}-is-disabled {
+    background: $input-bg-color-disabled;
+  }
+}

package/styles/components/input/_mixins.scss

@@ -0,0 +1,116 @@
+@import './_map.scss';
+
+@mixin input-base() {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: $input-border-radius;
+  border-color: $input-border-color-default;
+  padding: $input-padding-default;
+  background-color: $input-bg-color-default;
+  outline: none;
+  color: $input-text-color-default;
+  font: $input-font;
+  width: 100%;
+  box-sizing: border-box;
+  transition: $input-inner-transition;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+
+  &:hover {
+    border-color: $input-border-color-default-hover;
+  }
+
+  &:focus {
+    z-index: 1;
+    border-color: $input-border-color-default-focus;
+    box-shadow: $input-box-shadow-focus;
+  }
+}
+
+@mixin input-readonly {
+  &.#{$prefix}-is-readonly {
+    color: $input-text-color-readonly;
+    background-color: $input-bg-color-readonly;
+
+    .#{$prefix}-input__inner {
+      cursor: $input-cursor-readonly;
+    }
+  }
+}
+
+@mixin input-disabled {
+  &.#{$prefix}-is-disabled {
+    color: $input-text-color-disabled;
+    background-color: $input-bg-color-disabled;
+
+    &:hover {
+      border-color: $input-border-color-default;
+    }
+
+    .#{$prefix}-input__inner {
+      cursor: not-allowed;
+      color: $input-text-color-disabled;
+      text-overflow: initial;
+
+      &::placeholder {
+        color: $input-text-color-disabled;
+      }
+    }
+
+    & > .#{$prefix}-input__prefix,
+    & > .#{$prefix}-input__suffix {
+      .t-icon {
+        color: $input-text-color-disabled;
+
+        &:hover {
+          color: $input-text-color-disabled;
+        }
+      }
+    }
+  }
+}
+
+// 状态样式：需要 map-get 或 #{} 来拼接变量名
+@mixin input-status($status) {
+  &.#{$prefix}-is-#{$status} {
+    border-color: #000;
+
+    &:focus,
+    &.#{$prefix}-input--focused {
+      box-shadow: 0 0 0 2px #000;
+    }
+
+    & > .#{$prefix}-input__extra {
+      color: #000;
+    }
+  }
+}
+
+@mixin input-fix-position($position) {
+  &.#{$prefix}-input--#{$position} {
+    & > .#{$prefix}-input__#{$position} {
+      z-index: 2;
+      height: 100%;
+      text-align: center;
+      display: flex;
+      align-items: center;
+    }
+
+    & > .#{$prefix}-input__#{$position}-icon {
+      font-size: $font-size-l;
+    }
+
+    &.#{$prefix}-size-s {
+      .#{$prefix}-input__#{$position}-icon {
+        font-size: $font-size-base;
+      }
+    }
+
+    &.#{$prefix}-size-l {
+      .#{$prefix}-input__#{$position}-icon {
+        font-size: $font-size-xl;
+      }
+    }
+  }
+}

package/styles/components/input/_vars.scss

@@ -0,0 +1,134 @@
+// 组件变量
+// 名称可按如下规则定义：
+// <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
+
+@import '../../_vars.scss';
+
+// 颜色
+$input-border-color-default: $border-level-2-color;
+$input-border-color-default-hover: $brand-color;
+$input-border-color-default-focus: $brand-color;
+$input-border-color-success: $success-color;
+$input-border-color-warning: $warning-color;
+$input-border-color-error: $error-color;
+
+$input-color: (
+  border: (
+    default: (
+      hover: $brand-color,
+      focus: $brand-color,
+    ),
+    success: $success-color,
+    warning: $warning-color,
+    error: $error-color,
+  ),
+  text: (
+    default: $text-color-primary,
+    success: $success-color,
+    warning: $warning-color,
+    error: $error-color,
+    readonly: $text-color-primary,
+    tips: $text-color-placeholder,
+    disabled: $text-color-disabled,
+  ),
+  bg-color: (
+    default: $text-color-placeholder,
+    readonly: $bg-color-specialcomponent,
+    disabled: $bg-color-component-disabled,
+  ),
+  extra: (
+    default: $text-color-placeholder,
+    success: $success-color,
+    warning: $warning-color,
+    error: $error-color,
+  ),
+  append: $bg-color-secondarycontainer-hover,
+  limit: $text-color-placeholder,
+  box-shadow: (
+    default: $brand-color-focus,
+    success: $success-color-focus,
+    warning: $warning-color-focus,
+    error: $error-color-focus,
+  ),
+);
+
+$input-text-color-success: $success-color;
+$input-text-color-warning: $warning-color;
+$input-text-color-error: $error-color;
+
+$input-text-color-default: $text-color-primary;
+$input-text-color-readonly: $text-color-primary;
+$input-text-color-disabled: $text-color-disabled;
+$input-text-color-tips: $text-color-placeholder;
+$input-placeholder-color: $text-color-placeholder;
+
+// input 输入框需要在浅色主题下有默认白色背景，而在暗色等其他主题下 transparent 适配背景色，因此不使用通用背景 token
+$input-bg-color-default: $bg-color-specialcomponent;
+$input-bg-color-readonly: $bg-color-specialcomponent;
+$input-bg-color-disabled: $bg-color-component-disabled;
+
+$input-extra-color-default: $text-color-placeholder;
+$input-extra-color-success: $success-color;
+$input-extra-color-warning: $warning-color;
+$input-extra-color-error: $error-color;
+
+$input-append-color: $bg-color-secondarycontainer-hover;
+
+$input-limit-color: $text-color-placeholder;
+
+// 位置
+$input-fix-position: $spacer;
+
+// 间距
+$input-padding-l: $comp-paddingTB-m $comp-paddingLR-m;
+$input-padding-default: 0 $comp-paddingLR-s;
+$input-margin-distance-default: $comp-margin-xxxl;
+$input-status-position-right: -24px;
+$input-group-first-child-margin-left: -1px;
+
+// 尺寸
+$input-height-s: $comp-size-xs;
+$input-height-default: $comp-size-m;
+$input-height-l: $comp-size-xl;
+$input-inner-icon-font-size: inherit;
+$input-tips-min-height: $text-line-height-s;
+
+// 图标
+$input-inner-prefix-icon-color: $text-color-placeholder;
+$input-inner-suffix-icon-color: $text-color-placeholder;
+$input-inner-suffix-icon-color-hover: $text-color-secondary;
+
+// 字号
+$input-font-l: $font-body-large;
+$input-font: $font-body-medium;
+$input-font-s: $font-body-small;
+$input-extra-font: $font-body-small;
+$input-tips-font: $font-body-small;
+
+// 边框
+$input-border-radius: $border-radius-default;
+
+// box
+$input-box-shadow-color-default-focus: $brand-color-focus;
+$input-box-shadow-color-success-focus: $success-color-focus;
+$input-box-shadow-color-warning-focus: $warning-color-focus;
+$input-box-shadow-color-error-focus: $error-color-focus;
+$input-box-shadow-focus: 0 0 0 2px $input-box-shadow-color-default-focus;
+
+// 动画
+$input-inner-transition:
+  border $anim-time-fn-easing $anim-duration-base,
+  box-shadow $anim-time-fn-easing $anim-duration-base,
+  background-color $anim-time-fn-easing $anim-duration-base;
+
+// 交互
+$input-cursor-readonly: pointer;

package/styles/components/loading/_index.scss

@@ -0,0 +1,112 @@
+@import '../../_vars.scss';
+
+@import './_vars.scss';
+
+@import '../../utilities/_animation.scss';
+
+@import '../../mixins/_reset.scss';
+
+.#{$prefix}-loading {
+  @include reset;
+
+  position: relative;
+  color: $loading-color;
+  font-size: $loading-icon-size;
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &.#{$prefix}-size-s {
+    font-size: $loading-icon-size-small;
+  }
+
+  &.#{$prefix}-size-l {
+    font-size: $loading-icon-size-large;
+  }
+
+  &__parent--relative {
+    position: relative !important;
+  }
+}
+
+.#{$prefix}-loading__fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-loading;
+}
+
+.#{$prefix}-loading--center {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+}
+
+.#{$prefix}-loading__content {
+  position: absolute;
+  left: 48%;
+  top: 20%;
+}
+
+.#{$prefix}-loading--inherit-color {
+  color: inherit;
+}
+
+.#{$prefix}-loading__parent {
+  position: relative;
+}
+
+.#{$prefix}-loading__overlay {
+  background-color: $loading-mask-color;
+}
+
+/** 仅用于作为包裹元素时 */
+.#{$prefix}-loading--full {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-loading;
+}
+
+.#{$prefix}-loading--hidden {
+  visibility: hidden;
+}
+
+.#{$prefix}-loading--visible {
+  visibility: visible;
+}
+
+.#{$prefix}-loading__text {
+  width: auto;
+  display: inline-block;
+  vertical-align: middle;
+  font: $loading-text-size;
+  margin-left: $loading-text-margin-left;
+}
+
+.#{$prefix}-loading__gradient {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+
+  &-conic {
+    width: 100%;
+    height: 100%;
+    border-radius: $border-radius-circle;
+    /* stylelint-disable-next-line color-no-hex */
+    background: conic-gradient(
+      from 90deg at 50% 50%,
+      #fff 0deg,
+      currentcolor 360deg
+    );
+    -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
+    mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
+  }
+}