@sdata/web-vue 1.6.0 → 1.7.0

package/es/input/style/input.less

@@ -1,184 +0,0 @@
-@import url('../../style/mixins/index.less');
-@import url('./token.less');
-
-.input-suffix-feedback-icon-color() {
-  .@{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;
-    }
-  }
-}
-
-.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 @transition-duration-1 @transition-timing-function-linear,
-    border-color @transition-duration-1 @transition-timing-function-linear,
-    background-color @transition-duration-1 @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;
-
-    .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 @transition-duration-1 @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;
-  }
-}
-
-.input-style() {
-  width: 100%;
-  padding-right: 0;
-  padding-left: 0;
-  color: inherit;
-  line-height: @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;
-  }
-}
-
-.input-size(@size) {
-  @height: ~'input-size-@{size}-height';
-  @font-size: ~'input-size-@{size}-font-size';
-  @line-height: ~'input-size-@{size}-line-height';
-
-  /* prettier-ignore */
-  padding-top: (round(@@height - @input-border-width * 2 - $line-height * $font-size) / 2);
-
-  /* prettier-ignore */
-  padding-bottom: (round(@@height - @input-border-width * 2 - $line-height * $font-size) / 2);
-  font-size: @@font-size;
-  line-height: @@line-height;
-}

package/es/input/style/password.less

@@ -1,11 +0,0 @@
-@import url('./token.less');
-
-.@{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.less

@@ -1,18 +0,0 @@
-@import url('./token.less');
-
-.@{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.less

@@ -1,149 +0,0 @@
-@import url('./token.less');
-
-// 前置后置标签
-.addon(@position, @size-height, @size-font-size) {
-  .item-style() {
-    width: auto;
-    height: 100%;
-    margin-top: -1px;
-    margin-bottom: -1px;
-
-    & when (@position = before) {
-      margin-right: -@input-padding-horizontal;
-      margin-left: -@input-padding-horizontal - 1px;
-    }
-
-    & when (@position = after) {
-      margin-right: -@input-padding-horizontal - 1px;
-      margin-left: -@input-padding-horizontal;
-    }
-  }
-
-  // select,input 的边角和边框
-  .border-radius() {
-    & when (@position = before) {
-      border-color: transparent;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    & when (@position = after) {
-      border-color: transparent;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  .@{prefix}-input {
-    .item-style();
-    .border-radius();
-  }
-
-  // 作为前置/后置标签时，重写一些select的样式
-  .@{prefix}-select {
-    .item-style();
-
-    .@{prefix}-select-view {
-      background-color: inherit;
-      border-color: transparent;
-      border-radius: 0;
-    }
-
-    &.@{prefix}-select-single {
-      .@{prefix}-select-view {
-        height: 100%;
-      }
-    }
-  }
-}
-
-// 不同尺寸的高度
-.size-height {
-  .height (@size-height, @size-font-size) {
-    .get-padding(@size-height, @size-font-size);
-
-    font-size: @size-font-size;
-  }
-
-  &-size-mini {
-    /* prettier-ignore */
-    padding-top: (round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2);
-
-    /* prettier-ignore */
-    padding-bottom: (round(@input-size-mini-height - @input-border-width * 2 - $line-height * $font-size) / 2);
-    font-size: @input-size-mini-font-size;
-    line-height: 1.667;
-  }
-
-  &-size-small {
-    .height(@input-size-small-height, @input-size-small-font-size);
-  }
-
-  &-size-large {
-    .height(@input-size-large-height, @input-size-large-font-size);
-  }
-}
-
-// 不同尺寸的带有前置后置标签的高度
-.outer-size() {
-  .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 {
-      .addon(after, @size-input-height, @size-font-size);
-    }
-
-    .@{input-prefix-cls}-append {
-      .addon(before, @size-input-height, @size-font-size);
-    }
-  }
-
-  &&-size-mini {
-    .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 {
-    .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 {
-    .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.less

@@ -1,37 +0,0 @@
-@textarea-prefix-cls: ~'@{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: @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.less

@@ -1,125 +0,0 @@
-@import url('../../style/theme/index.less');
-
-/******** 基础配置项 end *******/
-
-// 背景色
-@input-color-bg: var(~'@{sd-cssvars-prefix}-color-fill-2');
-@input-color-bg_hover: var(~'@{sd-cssvars-prefix}-color-fill-3');
-@input-color-bg_focus: var(~'@{sd-cssvars-prefix}-color-bg-2');
-@input-color-bg_disabled: var(~'@{sd-cssvars-prefix}-color-fill-2');
-@input-color-addon-bg: @input-color-bg;
-
-// 边框色
-@input-color-addon-border: var(~'@{sd-cssvars-prefix}-color-neutral-3');
-@input-border-addon-separator-width: @border-1;
-@input-color-border_focus: @color-primary-6;
-@input-color-shadow_focus: var(~'@{sd-cssvars-prefix}-color-primary-light-2');
-@input-size-shadow_focus: @shadow-distance-none;
-@input-color-addon-border_default: @color-transparent;
-
-// 文本色
-@input-color-text: var(~'@{sd-cssvars-prefix}-color-text-1');
-@input-color-placeholder-text: var(~'@{sd-cssvars-prefix}-color-text-3');
-@input-color-text_disabled: var(~'@{sd-cssvars-prefix}-color-text-4');
-
-// textarea  color
-@textarea-color-tip-text: var(~'@{sd-cssvars-prefix}-color-text-3');
-
-/******** 基础配置项 end *******/
-
-/******** 高级配置项 *******/
-
-// 错误状态
-@input-color-bg_error: var(~'@{sd-cssvars-prefix}-color-danger-light-1');
-@input-color-bg_error_hover: var(~'@{sd-cssvars-prefix}-color-danger-light-2');
-@input-color-bg_error_focus: @input-color-bg_focus;
-@input-color-border_error_focus: @color-danger-6;
-@input-color-shadow_error_focus: var(~'@{sd-cssvars-prefix}-color-danger-light-2');
-@input-size-shadow_error_focus: @shadow-distance-none;
-
-// 圆角
-@input-border-radius: @radius-small;
-
-// 不同尺寸
-@input-size-default-height: @size-default;
-@input-size-mini-height: @size-mini;
-@input-size-small-height: @size-small;
-@input-size-large-height: @size-large;
-
-// 边框尺寸以及边框色
-@input-border-width: @border-1;
-@input-color-border: @color-transparent;
-@input-color-border_disabled: @color-transparent;
-@input-color-border_hover: @color-transparent;
-@input-color-border_error: @color-transparent;
-@input-color-border_error_hover: @color-transparent;
-
-// 不同尺寸文字大小
-@input-size-default-font-size: @font-size-body-3;
-@input-size-small-font-size: @font-size-body-3;
-@input-size-large-font-size: @font-size-body-3;
-@input-size-mini-font-size: @font-size-body-1;
-@input-font-tip-size: @font-size-body-1; // show limit word 文字色
-
-// 不同尺寸的 suffix，addon 尺寸。
-@input-size-mini-icon-suffix-size: @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: @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: @size-3;
-@input-color-prefix-text: var(~'@{sd-cssvars-prefix}-color-text-2');
-@input-color-suffix-text: var(~'@{sd-cssvars-prefix}-color-text-2');
-@input-color-tip-text: var(~'@{sd-cssvars-prefix}-color-text-3');
-@input-color-icon-clear: var(~'@{sd-cssvars-prefix}-color-text-2');
-@input-color-icon-clear-bg_hover: var(~'@{sd-cssvars-prefix}-color-fill-4');
-
-// input search
-@search-color-icon: var(~'@{sd-cssvars-prefix}-color-text-2');
-@search-size-icon: 14px;
-
-// 布局
-@input-padding-horizontal: @spacing-6;
-@input-margin-left-clear-btn: @spacing-6;
-@input-spacing-clear-icon-right: @spacing-4;
-@input-padding-word-limit-left: @spacing-4;
-
-// textarea
-@textarea-padding-horizontal: @spacing-6;
-@textarea-padding-vertical: @spacing-2;
-@textarea-font-size: @font-size-body-3;
-@textarea-font-tip-size: @font-size-body-1;
-@textarea-layout-tip-right: @spacing-5;
-@textarea-layout-tip-bottom: @spacing-3;
-@textarea-size-min-height: @size-default;
-@textarea-size-icon-clear: @font-size-body-1;
-@textarea-layout-top-icon-clear: @spacing-5;
-
-// password
-@password-color-eye-icon: var(~'@{sd-cssvars-prefix}-color-text-2');
-@password-size-eye-icon: @size-3;
-
-// input.group
-@input-group-border-radius_compact: @radius-small;
-@input-group-border-separator-width: @border-1;
-@input-group-color-separator-border: var(~'@{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: @color-success-6;
-@input-feedback-icon-color_error: @color-danger-6;
-@input-feedback-icon-color_warning: @color-warning-6;
-@input-feedback-icon-color_validating: @color-primary-6;

package/es/input-number/style/index.less

@@ -1,162 +0,0 @@
-@import url('./token.less');
-@import url('../../input/style/token.less');
-
-@input-prefix-cls: ~'@{prefix}-input';
-@input-number-prefix-cls: ~'@{prefix}-input-number';
-
-.@{input-number-prefix-cls} {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  border-radius: @input-number-border-radius;
-
-  .transition() {
-    transition: all @transition-duration-1 @transition-timing-function-linear;
-  }
-
-  &-step-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    padding: 0;
-    color: @input-number-step-button-color;
-    background-color: @input-number-step-button-color-bg_default;
-    cursor: pointer;
-    user-select: none;
-    .transition();
-
-    &:hover {
-      background-color: @input-number-step-button-color-bg_default_hover;
-      border-color: $background-color;
-    }
-
-    &:active {
-      background-color: @input-number-step-button-color-bg_default_active;
-      border-color: $background-color;
-    }
-
-    &:disabled {
-      color: @input-number-step-button-color_disabled;
-      background-color: @input-number-step-button-color-bg_disabled;
-      cursor: not-allowed;
-
-      &:hover,
-      &:active {
-        background-color: @input-number-step-button-color-bg_disabled_hover;
-        border-color: @input-number-step-button-color-border;
-      }
-    }
-  }
-
-  .@{input-prefix-cls}-wrapper {
-    position: relative;
-  }
-
-  &-prefix,
-  &-suffix {
-    .transition();
-  }
-
-  // embed mode
-  &-mode-embed {
-    .@{input-number-prefix-cls}-step {
-      position: absolute;
-      top: 4px;
-      right: 4px;
-      bottom: 4px;
-      width: 18px;
-      overflow: hidden;
-      border-radius: @input-number-step-layer-border-radius;
-      opacity: 0;
-      .transition();
-
-      .@{input-number-prefix-cls}-step-button {
-        width: 100%;
-        height: 50%;
-        font-size: 10px;
-        border: none;
-        border-color: @input-number-step-button-color-border;
-      }
-    }
-
-    .@{input-prefix-cls}-suffix {
-      justify-content: flex-end;
-      min-width: 6px;
-    }
-
-    .@{input-prefix-cls}-suffix-has-feedback {
-      min-width: 32px;
-
-      .@{input-number-prefix-cls}-step {
-        right: 30px;
-      }
-    }
-
-    &:not(.@{input-prefix-cls}-disabled):not(.@{input-prefix-cls}-outer-disabled) {
-      &:hover,
-      &:focus-within {
-        // 修正 hove 时存在 suffix 但隐藏了，视觉上 padding 过大问题
-        .@{input-prefix-cls}-suffix:has(.@{input-number-prefix-cls}-suffix) {
-          padding-left: @spacing-2;
-        }
-
-        & .@{input-number-prefix-cls}-step {
-          opacity: 1;
-        }
-
-        & .@{input-number-prefix-cls}-suffix {
-          opacity: 0;
-          pointer-events: none;
-        }
-      }
-    }
-
-    // 修正 InputNumber 未激活 hover 时 StepButton 的 hover 背景色
-    &.@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-focus) {
-      .@{input-number-prefix-cls}-step-button:not(
-          .@{input-number-prefix-cls}-step-button-disabled
-        ):hover {
-        background-color: @input-number-step-button-color-bg_default_active;
-      }
-    }
-  }
-
-  // button mode
-  &-mode-button {
-    .@{input-prefix-cls} {
-      &-prepend,
-      &-append {
-        padding: 0;
-        border: none;
-      }
-
-      &-prepend .@{input-number-prefix-cls}-step-button {
-        border-right: @input-border-addon-separator-width solid transparent;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-
-        &:not(&:active) {
-          border-right-color: @input-number-step-button-color-border;
-        }
-      }
-
-      &-append .@{input-number-prefix-cls}-step-button {
-        border-left: @input-border-addon-separator-width solid transparent;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-
-        &:not(&:active) {
-          border-left-color: @input-number-step-button-color-border;
-        }
-      }
-    }
-  }
-
-  &-readonly {
-    .@{input-number-prefix-cls}-step-button {
-      color: @input-number-step-button-color_disabled;
-      pointer-events: none;
-    }
-  }
-}