@sdata/web-vue 1.6.0 → 1.7.0

package/es/input/style/input.scss

@@ -0,0 +1,258 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@style/mixins/index.scss' as *;
+@use '@components/input/style/token.scss' as *;
+
+$__less-vars: (
+  'input-border-radius': $input-border-radius,
+  'input-border-width': $input-border-width,
+  'input-color-addon-border': $input-color-addon-border,
+  'input-color-addon-border_default': $input-color-addon-border_default,
+  'input-color-bg': $input-color-bg,
+  'input-color-bg_disabled': $input-color-bg_disabled,
+  'input-color-bg_error': $input-color-bg_error,
+  'input-color-bg_error_focus': $input-color-bg_error_focus,
+  'input-color-bg_error_hover': $input-color-bg_error_hover,
+  'input-color-bg_focus': $input-color-bg_focus,
+  'input-color-bg_hover': $input-color-bg_hover,
+  'input-color-border': $input-color-border,
+  'input-color-border_disabled': $input-color-border_disabled,
+  'input-color-border_error': $input-color-border_error,
+  'input-color-border_error_focus': $input-color-border_error_focus,
+  'input-color-border_error_hover': $input-color-border_error_hover,
+  'input-color-border_focus': $input-color-border_focus,
+  'input-color-border_hover': $input-color-border_hover,
+  'input-color-icon-clear': $input-color-icon-clear,
+  'input-color-icon-clear-bg_hover': $input-color-icon-clear-bg_hover,
+  'input-color-placeholder-text': $input-color-placeholder-text,
+  'input-color-prefix-text': $input-color-prefix-text,
+  'input-color-shadow_error_focus': $input-color-shadow_error_focus,
+  'input-color-shadow_focus': $input-color-shadow_focus,
+  'input-color-suffix-text': $input-color-suffix-text,
+  'input-color-text': $input-color-text,
+  'input-color-text_disabled': $input-color-text_disabled,
+  'input-feedback-icon-color_error': $input-feedback-icon-color_error,
+  'input-feedback-icon-color_success': $input-feedback-icon-color_success,
+  'input-feedback-icon-color_validating': $input-feedback-icon-color_validating,
+  'input-feedback-icon-color_warning': $input-feedback-icon-color_warning,
+  'input-group-border-radius_compact': $input-group-border-radius_compact,
+  'input-padding-horizontal': $input-padding-horizontal,
+  'input-size-default-height': $input-size-default-height,
+  'input-size-default-font-size': $input-size-default-font-size,
+  'input-size-default-line-height': $input-size-medium-line-height,
+  'input-size-default-icon-suffix-size': $input-size-default-icon-suffix-size,
+  'input-size-icon-clear': $input-size-icon-clear,
+  'input-size-large-height': $input-size-large-height,
+  'input-size-large-font-size': $input-size-large-font-size,
+  'input-size-large-line-height': $input-size-large-line-height,
+  'input-size-medium-height': $input-size-medium-height,
+  'input-size-medium-font-size': $input-size-medium-font-size,
+  'input-size-medium-line-height': $input-size-medium-line-height,
+  'input-size-small-height': $input-size-small-height,
+  'input-size-small-font-size': $input-size-small-font-size,
+  'input-size-small-line-height': $input-size-small-line-height,
+  'input-size-shadow_error_focus': $input-size-shadow_error_focus,
+  'input-size-shadow_focus': $input-size-shadow_focus,
+  'line-height-base': theme.$line-height-base,
+  'prefix': theme.$prefix,
+  'transition-duration-1': theme.$transition-duration-1,
+  'transition-timing-function-linear': theme.$transition-timing-function-linear,
+  'input-size-mini-height': $input-size-mini-height,
+  'input-size-mini-line-height': $input-size-mini-line-height,
+  'input-size-mini-font-size': $input-size-mini-font-size,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+@mixin input-suffix-feedback-icon-color() {
+  .#{theme.$prefix}-feedback-icon {
+    display: inline-flex;
+
+    &-status-validating {
+      color: $input-feedback-icon-color_validating;
+    }
+
+    &-status-success {
+      color: $input-feedback-icon-color_success;
+    }
+
+    &-status-warning {
+      color: $input-feedback-icon-color_warning;
+    }
+
+    &-status-error {
+      color: $input-feedback-icon-color_error;
+    }
+  }
+}
+
+@mixin input-wrapper-style($cls) {
+  display: inline-flex;
+  box-sizing: border-box;
+  width: 100%;
+  padding-right: $input-padding-horizontal;
+  padding-left: $input-padding-horizontal;
+  color: $input-color-text;
+  font-size: $input-size-default-font-size;
+  background-color: $input-color-bg;
+  border: $input-border-width solid $input-color-border;
+  border-radius: $input-border-radius;
+  cursor: text;
+  transition:
+    color theme.$transition-duration-1 theme.$transition-timing-function-linear,
+    border-color theme.$transition-duration-1 theme.$transition-timing-function-linear,
+    background-color theme.$transition-duration-1 theme.$transition-timing-function-linear;
+
+  &:hover {
+    background-color: $input-color-bg_hover;
+    border-color: $input-color-border_hover;
+  }
+
+  &:focus-within,
+  &.#{$cls}-focus {
+    z-index: 1;
+    background-color: $input-color-bg_focus;
+    border-color: $input-color-border_focus;
+    box-shadow: 0 0 0 $input-size-shadow_focus $input-color-shadow_focus;
+  }
+
+  // 禁用状态样式
+  &.#{$cls}-disabled {
+    color: $input-color-text_disabled;
+    background-color: $input-color-bg_disabled;
+    border-color: $input-color-border_disabled;
+    cursor: not-allowed;
+
+    &:hover {
+      color: $input-color-text_disabled;
+      background-color: $input-color-bg_disabled;
+      border-color: $input-color-border_disabled;
+    }
+
+    .#{$cls}-prefix,
+    .#{$cls}-suffix {
+      color: inherit;
+    }
+  }
+
+  // 错误状态样式
+  &.#{$cls}-error {
+    background-color: $input-color-bg_error;
+    border-color: $input-color-border_error;
+
+    &:hover {
+      background-color: $input-color-bg_error_hover;
+      border-color: $input-color-border_error_hover;
+    }
+  }
+
+  &.#{$cls}-error:focus-within,
+  &.#{$cls}-error#{&}-focus {
+    z-index: 1;
+    background-color: $input-color-bg_error_focus;
+    border-color: $input-color-border_error_focus;
+    box-shadow: 0 0 0 $input-size-shadow_error_focus $input-color-shadow_error_focus;
+  }
+
+  // 前后缀样式
+  .#{$cls}-prefix,
+  .#{$cls}-suffix {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    white-space: nowrap;
+    user-select: none;
+
+    > svg {
+      font-size: $input-size-default-icon-suffix-size;
+    }
+  }
+
+  .#{$cls}-prefix {
+    padding-right: $input-padding-horizontal;
+    color: $input-color-prefix-text;
+  }
+
+  .#{$cls}-suffix {
+    padding-left: $input-padding-horizontal;
+    color: $input-color-suffix-text;
+
+    @include input-suffix-feedback-icon-color();
+  }
+
+  // 清除按钮样式
+  .#{$cls}-clear-btn {
+    align-self: center;
+    color: $input-color-icon-clear;
+    font-size: $input-size-icon-clear;
+    visibility: hidden;
+    cursor: pointer;
+
+    > svg {
+      position: relative;
+      transition: color theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    }
+  }
+
+  &:hover .#{$cls}-clear-btn {
+    visibility: visible;
+  }
+
+  // 没有选中情况下显示深色
+  &:not(.#{$cls}-focus) .#{$cls}-icon-hover:hover::before {
+    background-color: $input-color-icon-clear-bg_hover;
+  }
+}
+
+@mixin input-style() {
+  width: 100%;
+  padding-right: 0;
+  padding-left: 0;
+  color: inherit;
+  line-height: theme.$line-height-base;
+  background: none;
+  border: none;
+  border-radius: 0;
+  outline: none;
+  cursor: inherit;
+  appearance: none;
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+
+  &::placeholder {
+    color: $input-color-placeholder-text;
+  }
+
+  &[disabled]::placeholder {
+    color: $input-color-text_disabled;
+  }
+
+  // fix color error under disabled status in safari
+  &[disabled] {
+    -webkit-text-fill-color: $input-color-text_disabled;
+  }
+}
+
+@mixin input-size($size) {
+  $height: string.unquote('input-size-#{$size}-height');
+  $font-size: string.unquote('input-size-#{$size}-font-size');
+  $line-height: string.unquote('input-size-#{$size}-line-height');
+
+  /* prettier-ignore */
+  padding-top: math.div(
+    math.round(less-var($height) - $input-border-width * 2 - less-var($line-height) * less-var($font-size)),
+    2
+  );
+
+  /* prettier-ignore */
+  padding-bottom: math.div(
+    math.round(less-var($height) - $input-border-width * 2 - less-var($line-height) * less-var($font-size)),
+    2
+  );
+  font-size: less-var($font-size);
+  line-height: less-var($line-height);
+}

package/es/input/style/password.scss

@@ -0,0 +1,15 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+
+@use '@components/input/style/token.scss' as *;
+
+.#{$input-prefix-cls}-wrapper.#{$input-prefix-cls}-password {
+  &:not(.#{$input-prefix-cls}-disabled) {
+    .#{$input-prefix-cls}-suffix {
+      color: $password-color-eye-icon;
+      font-size: $password-size-eye-icon;
+      cursor: pointer;
+    }
+  }
+}

package/es/input/style/search.scss

@@ -0,0 +1,22 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+
+@use '@components/input/style/token.scss' as *;
+
+.#{$input-prefix-cls}-search {
+  .#{$input-prefix-cls}-append {
+    padding: 0;
+    border: none;
+  }
+
+  .#{$input-prefix-cls}-suffix {
+    color: $search-color-icon;
+    font-size: $search-size-icon;
+  }
+
+  .#{$input-prefix-cls}-search-btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

package/es/input/style/size.scss

@@ -0,0 +1,166 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:math';
+@use 'sass:string';
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+
+@use '@components/input/style/token.scss' as *;
+
+@mixin get-padding($input-size-height, $input-font-size) {
+  /* prettier-ignore */
+  padding-top: (math.round($input-size-height - $input-border-width * 2 - theme.$line-height-base * $input-font-size) * 0.5);
+
+  /* prettier-ignore */
+  padding-bottom: (math.round($input-size-height - $input-border-width * 2 - theme.$line-height-base * $input-font-size) * 0.5);
+}
+
+// 前置后置标签
+@mixin addon-item-style($position) {
+  width: auto;
+  height: 100%;
+  margin-top: -1px;
+  margin-bottom: -1px;
+
+  @if ($position == before) {
+    margin-right: -$input-padding-horizontal;
+    margin-left: -$input-padding-horizontal - 1px;
+  }
+
+  @if ($position == after) {
+    margin-right: -$input-padding-horizontal - 1px;
+    margin-left: -$input-padding-horizontal;
+  }
+}
+
+@mixin addon-border-radius($position) {
+  @if ($position == before) {
+    border-color: transparent;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  @if ($position == after) {
+    border-color: transparent;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+@mixin addon($position, $size-height, $size-font-size) {
+  .#{theme.$prefix}-input {
+    @include addon-item-style($position);
+    @include addon-border-radius($position);
+  }
+
+  // 作为前置/后置标签时，重写一些select的样式
+  .#{theme.$prefix}-select {
+    @include addon-item-style($position);
+
+    .#{theme.$prefix}-select-view {
+      background-color: inherit;
+      border-color: transparent;
+      border-radius: 0;
+    }
+
+    &.#{theme.$prefix}-select-single {
+      .#{theme.$prefix}-select-view {
+        height: 100%;
+      }
+    }
+  }
+}
+
+// 不同尺寸的高度
+@mixin input-size-height($size-height, $size-font-size) {
+  @include get-padding($size-height, $size-font-size);
+
+  font-size: $size-font-size;
+}
+
+.size-height {
+  &-size-mini {
+    /* prettier-ignore */
+    padding-top: (math.round($input-size-mini-height - $input-border-width * 2 - 1.667 * $input-size-mini-font-size) * 0.5);
+
+    /* prettier-ignore */
+    padding-bottom: (math.round($input-size-mini-height - $input-border-width * 2 - 1.667 * $input-size-mini-font-size) * 0.5);
+    font-size: $input-size-mini-font-size;
+    line-height: 1.667;
+  }
+
+  &-size-small {
+    @include input-size-height($input-size-small-height, $input-size-small-font-size);
+  }
+
+  &-size-large {
+    @include input-size-height($input-size-large-height, $input-size-large-font-size);
+  }
+}
+
+// 不同尺寸的带有前置后置标签的高度
+@mixin outer-size-font-size(
+  $size-input-height,
+  $size-font-size,
+  $suffix-icon-size,
+  $addon-icon-size
+) {
+  .#{$input-prefix-cls}-outer {
+    font-size: $size-font-size;
+  }
+
+  .#{$input-prefix-cls}-wrapper {
+    .#{$input-prefix-cls}-prefix,
+    .#{$input-prefix-cls}-suffix {
+      font-size: $size-font-size;
+
+      > svg {
+        font-size: $suffix-icon-size;
+      }
+    }
+  }
+
+  .#{$input-prefix-cls}-prepend,
+  .#{$input-prefix-cls}-append {
+    font-size: $size-font-size;
+
+    > svg {
+      font-size: $addon-icon-size;
+    }
+  }
+
+  .#{$input-prefix-cls}-prepend {
+    @include addon(after, $size-input-height, $size-font-size);
+  }
+
+  .#{$input-prefix-cls}-append {
+    @include addon(before, $size-input-height, $size-font-size);
+  }
+}
+
+@mixin outer-size() {
+  &#{&}-size-mini {
+    @include outer-size-font-size(
+      $input-size-mini-height,
+      $input-size-mini-font-size,
+      $input-size-mini-icon-suffix-size,
+      $input-size-mini-icon-addon-size
+    );
+  }
+
+  &#{&}-size-small {
+    @include outer-size-font-size(
+      $input-size-small-height,
+      $input-size-small-font-size,
+      $input-size-small-icon-suffix-size,
+      $input-size-small-icon-addon-size
+    );
+  }
+
+  &#{&}-size-large {
+    @include outer-size-font-size(
+      $input-size-large-height,
+      $input-size-large-font-size,
+      $input-size-large-icon-suffix-size,
+      $input-size-large-icon-addon-size
+    );
+  }
+}

package/es/input/style/textarea.scss

@@ -0,0 +1,42 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/component.scss' as component;
+@use 'sass:string';
+@use '@components/input/style/token.scss' as *;
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+$textarea-prefix-cls: string.unquote('#{theme.$prefix}-textarea');
+
+.#{$textarea-prefix-cls}-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.#{$textarea-prefix-cls}-clear-wrapper {
+  &:hover {
+    .#{$textarea-prefix-cls}-clear-icon {
+      display: inline-block;
+    }
+  }
+  .#{$textarea-prefix-cls} {
+    padding-right: component.$icon-hover-size-default-height;
+  }
+}
+
+.#{$textarea-prefix-cls} {
+  &-word-limit {
+    position: absolute;
+    right: $textarea-layout-tip-right;
+    bottom: $textarea-layout-tip-bottom;
+    color: $textarea-color-tip-text;
+    font-size: $textarea-font-tip-size;
+    user-select: none;
+  }
+
+  &-clear-icon {
+    position: absolute;
+    top: $textarea-layout-top-icon-clear;
+    right: $textarea-layout-tip-right;
+    display: none;
+    font-size: $textarea-size-icon-clear;
+  }
+}

package/es/input/style/token.scss

@@ -0,0 +1,139 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+/******** 基础配置项 end *******/
+
+// 背景色
+$input-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$input-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$input-color-bg_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+$input-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$input-color-addon-bg: $input-color-bg;
+
+// 边框色
+$input-color-addon-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+$input-border-addon-separator-width: global.$border-1;
+$input-color-border_focus: global.$color-primary-6;
+$input-color-shadow_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2')
+);
+$input-size-shadow_focus: global.$shadow-distance-none;
+$input-color-addon-border_default: global.$color-transparent;
+
+// 文本色
+$input-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$input-color-placeholder-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$input-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+// textarea  color
+$textarea-color-tip-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+/******** 基础配置项 end *******/
+
+/******** 高级配置项 *******/
+
+// 错误状态
+$input-color-bg_error: var(string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-1'));
+$input-color-bg_error_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-2')
+);
+$input-color-bg_error_focus: $input-color-bg_focus;
+$input-color-border_error_focus: global.$color-danger-6;
+$input-color-shadow_error_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-2')
+);
+$input-size-shadow_error_focus: global.$shadow-distance-none;
+
+// 圆角
+$input-border-radius: global.$radius-small;
+
+// 不同尺寸
+$input-size-default-height: global.$size-default;
+$input-size-mini-height: global.$size-mini;
+$input-size-small-height: global.$size-small;
+$input-size-large-height: global.$size-large;
+
+// 边框尺寸以及边框色
+$input-border-width: global.$border-1;
+$input-color-border: global.$color-transparent;
+$input-color-border_disabled: global.$color-transparent;
+$input-color-border_hover: global.$color-transparent;
+$input-color-border_error: global.$color-transparent;
+$input-color-border_error_hover: global.$color-transparent;
+
+// 不同尺寸文字大小
+$input-size-default-font-size: global.$font-size-body-3;
+$input-size-small-font-size: global.$font-size-body-3;
+$input-size-large-font-size: global.$font-size-body-3;
+$input-size-mini-font-size: global.$font-size-body-1;
+$input-font-tip-size: global.$font-size-body-1; // show limit word 文字色
+
+// 不同尺寸的 suffix，addon 尺寸。
+$input-size-mini-icon-suffix-size: global.$size-3;
+$input-size-small-icon-suffix-size: 14px;
+$input-size-default-icon-suffix-size: 14px;
+$input-size-large-icon-suffix-size: 14px;
+
+$input-size-mini-icon-addon-size: global.$size-3;
+$input-size-small-icon-addon-size: 14px;
+$input-size-default-icon-addon-size: 14px;
+$input-size-large-icon-addon-size: 14px;
+
+$input-size-icon-clear: global.$size-3;
+$input-color-prefix-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$input-color-suffix-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$input-color-tip-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$input-color-icon-clear: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$input-color-icon-clear-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
+
+// input search
+$search-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$search-size-icon: 14px;
+
+// 布局
+$input-padding-horizontal: global.$spacing-6;
+$input-margin-left-clear-btn: global.$spacing-6;
+$input-spacing-clear-icon-right: global.$spacing-4;
+$input-padding-word-limit-left: global.$spacing-4;
+
+// textarea
+$textarea-padding-horizontal: global.$spacing-6;
+$textarea-padding-vertical: global.$spacing-2;
+$textarea-font-size: global.$font-size-body-3;
+$textarea-font-tip-size: global.$font-size-body-1;
+$textarea-layout-tip-right: global.$spacing-5;
+$textarea-layout-tip-bottom: global.$spacing-3;
+$textarea-size-min-height: global.$size-default;
+$textarea-size-icon-clear: global.$font-size-body-1;
+$textarea-layout-top-icon-clear: global.$spacing-5;
+
+// password
+$password-color-eye-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$password-size-eye-icon: global.$size-3;
+
+// input.group
+$input-group-border-radius_compact: global.$radius-small;
+$input-group-border-separator-width: global.$border-1;
+$input-group-color-separator-border: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+/******** 高级配置项 end *******/
+
+// vue覆盖变量
+$input-size-medium-height: $input-size-default-height;
+$input-size-medium-font-size: $input-size-default-font-size;
+$input-size-mini-line-height: 1.667;
+$input-size-small-line-height: $line-height-base;
+$input-size-medium-line-height: $line-height-base;
+$input-size-large-line-height: $line-height-base;
+
+$input-feedback-icon-color_success: global.$color-success-6;
+$input-feedback-icon-color_error: global.$color-danger-6;
+$input-feedback-icon-color_warning: global.$color-warning-6;
+$input-feedback-icon-color_validating: global.$color-primary-6;