@tendaui/components 1.0.0

package/styles/components/dialog/_vars.scss

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

package/styles/components/form/_index.scss

@@ -0,0 +1,174 @@
+// 组件允许单个组件打包，因此默认引入公共基础样式
+
+@import '../../_vars.scss';
+
+@import './_vars.scss';
+
+@import './_mixins.scss';
+
+@import '../../mixins/_reset.scss';
+
+.#{$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

@@ -0,0 +1,76 @@
+@use 'sass:map';
+
+@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);
+  }
+}

package/styles/components/form/_vars.scss

@@ -0,0 +1,100 @@
+// 组件变量
+// 名称可按如下规则定义：
+// <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
+//字体
+
+$form-font: $font-body-medium;
+$form-item-help-font: $font-body-small;
+
+// 行高
+$form-item-help-line-height: $text-line-height-s;
+
+// 颜色
+$form-color-label: $text-color-primary;
+$form-color-error: $error-color;
+$form-color-warning: $warning-color;
+$form-color-success: $success-color;
+$form-color-extra: $text-color-placeholder;
+
+$form-color: (
+  label: $text-color-primary,
+  error: $error-color,
+  warning: $warning-color,
+  success: $success-color,
+  extra: $text-color-placeholder,
+);
+// 间距
+$form-item-margin-bottom: $comp-margin-xxl;
+$form-item-with-help-margin-bottom: $comp-margin-xs;
+$form-item-control-height: $comp-margin-xxxl;
+$form-item-row-gap: $comp-margin-l;
+$form-item-padding-bottom: $comp-paddingTB-xs;
+$form-item-margin-right-inline: $comp-margin-xxl;
+
+$form-label-line-height: $text-line-height-base;
+$form-label-padding-right: $comp-paddingLR-xl;
+$form-label-margin-left-required: $comp-margin-xs;
+$form-label-margin-right-required: $comp-margin-xs;
+$form-label-margin-colon: 0 $comp-margin-xxs;
+$form-status-margin: 0 $comp-margin-s;
+$form-status-button-margin: $comp-margin-s;
+$form-status-button-width: $comp-size-m;
+$from-help-text-margin-top: $comp-margin-xs;
+$form-status-icon-size: $comp-size-xxxs;
+
+// status
+$input-border-color-success: $success-color;
+$input-box-shadow-color-success-focus: $success-color-focus;
+$input-border-color-warning: $warning-color;
+$input-box-shadow-color-warning-focus: $warning-color-focus;
+$input-border-color-error: $error-color;
+$input-box-shadow-color-error-focus: $error-color-focus;
+
+$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,
+  ),
+);