@sdata/web-vue 1.5.0 → 1.7.0

package/dist/sd.scss

@@ -0,0 +1,2 @@
+@import '../es/index.scss';
+

package/es/_components/auto-tooltip/style/index.css

@@ -20,4 +20,4 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-}
+}

package/es/_components/auto-tooltip/style/index.d.ts

@@ -1,2 +1,2 @@
 import '../../../tooltip/style';
-import './index.less';
+import './index.scss';

package/es/_components/auto-tooltip/style/index.js

@@ -1 +1 @@
-import "./index.less";
+import "./index.scss";

package/es/_components/auto-tooltip/style/index.scss

@@ -0,0 +1,11 @@
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$auto-tooltip-prefix-cls: string.unquote('#{$prefix}-auto-tooltip');
+
+.#{$auto-tooltip-prefix-cls} {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/es/_components/input-label/style/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /******** borderSize *******/
 /******** borderStyle *******/
 /******** radius *******/
@@ -19,6 +20,12 @@
 /******** 基础配置项 end *******/
 /******** 高级配置项 *******/
 /******** 高级配置项 end *******/
+.sd-input-label.sd-input-label-search {
+  cursor: text;
+}
+.sd-input-label.sd-input-label-search .sd-input-label-value {
+  pointer-events: none;
+}
 .sd-input-label {
   display: inline-flex;
   box-sizing: border-box;
@@ -32,20 +39,12 @@
   border-radius: var(--border-radius-small);
   cursor: text;
   transition: color 0.1s cubic-bezier(0, 0, 1, 1), border-color 0.1s cubic-bezier(0, 0, 1, 1), background-color 0.1s cubic-bezier(0, 0, 1, 1);
-  cursor: pointer;
-}
-.sd-input-label.sd-input-label-search {
-  cursor: text;
-}
-.sd-input-label.sd-input-label-search .sd-input-label-value {
-  pointer-events: none;
 }
 .sd-input-label:hover {
   background-color: var(--color-fill-3);
   border-color: transparent;
 }
-.sd-input-label:focus-within,
-.sd-input-label.sd-input-label-focus {
+.sd-input-label:focus-within, .sd-input-label.sd-input-label-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--primary-6));
@@ -74,8 +73,7 @@
   background-color: var(--color-danger-light-2);
   border-color: transparent;
 }
-.sd-input-label.sd-input-label-error:focus-within,
-.sd-input-label.sd-input-label-error.sd-input-label-focus {
+.sd-input-label.sd-input-label-error:focus-within, .sd-input-label.sd-input-label-error.sd-input-label-focus {
   z-index: 1;
   background-color: var(--color-bg-2);
   border-color: rgb(var(--danger-6));
@@ -133,6 +131,9 @@
 .sd-input-label:not(.sd-input-label-focus) .sd-input-label-icon-hover:hover::before {
   background-color: var(--color-fill-4);
 }
+.sd-input-label {
+  cursor: pointer;
+}
 .sd-input-label .sd-input-label-input {
   width: 100%;
   padding-right: 0;
@@ -173,13 +174,12 @@
   font-size: 0;
   line-height: 0;
   visibility: hidden;
-  content: '.';
+  content: ".";
 }
 .sd-input-label .sd-input-label-value-hidden {
   display: none;
 }
-.sd-input-label.sd-input-label-size-mini .sd-input-label-input,
-.sd-input-label.sd-input-label-size-mini .sd-input-label-value {
+.sd-input-label.sd-input-label-size-mini .sd-input-label-input, .sd-input-label.sd-input-label-size-mini .sd-input-label-value {
   /* prettier-ignore */
   padding-top: 1px;
   /* prettier-ignore */
@@ -190,8 +190,7 @@
 .sd-input-label.sd-input-label-size-mini .sd-input-label-value {
   min-height: 22px;
 }
-.sd-input-label.sd-input-label-size-medium .sd-input-label-input,
-.sd-input-label.sd-input-label-size-medium .sd-input-label-value {
+.sd-input-label.sd-input-label-size-medium .sd-input-label-input, .sd-input-label.sd-input-label-size-medium .sd-input-label-value {
   /* prettier-ignore */
   padding-top: 4px;
   /* prettier-ignore */
@@ -202,8 +201,7 @@
 .sd-input-label.sd-input-label-size-medium .sd-input-label-value {
   min-height: 30px;
 }
-.sd-input-label.sd-input-label-size-small .sd-input-label-input,
-.sd-input-label.sd-input-label-size-small .sd-input-label-value {
+.sd-input-label.sd-input-label-size-small .sd-input-label-input, .sd-input-label.sd-input-label-size-small .sd-input-label-value {
   /* prettier-ignore */
   padding-top: 2px;
   /* prettier-ignore */
@@ -214,8 +212,7 @@
 .sd-input-label.sd-input-label-size-small .sd-input-label-value {
   min-height: 26px;
 }
-.sd-input-label.sd-input-label-size-large .sd-input-label-input,
-.sd-input-label.sd-input-label-size-large .sd-input-label-value {
+.sd-input-label.sd-input-label-size-large .sd-input-label-input, .sd-input-label.sd-input-label-size-large .sd-input-label-value {
   /* prettier-ignore */
   padding-top: 6px;
   /* prettier-ignore */
@@ -225,4 +222,4 @@
 }
 .sd-input-label.sd-input-label-size-large .sd-input-label-value {
   min-height: 34px;
-}
+}

package/es/_components/input-label/style/index.d.ts

@@ -1,2 +1,2 @@
 import '../../../input/style';
-import './index.less';
+import './index.scss';

package/es/_components/input-label/style/index.js

@@ -1 +1 @@
-import "./index.less";
+import "./index.scss";

package/es/_components/input-label/style/index.scss

@@ -0,0 +1,9 @@
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+@use '@components/_components/input-label/style/input-label.scss' as *;
+
+$input-label-prefix-cls: string.unquote('#{$prefix}-input-label');
+
+.#{$input-label-prefix-cls} {
+  @include input-label-style($input-label-prefix-cls);
+}

package/es/_components/input-label/style/input-label.scss

@@ -0,0 +1,127 @@
+@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 *;
+@use '@components/input/style/input.scss' as *;
+
+$less-vars: (
+  '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-bg_hover': $input-color-icon-clear-bg_hover,
+  'input-color-shadow_error_focus': $input-color-shadow_error_focus,
+  'input-color-shadow_focus': $input-color-shadow_focus,
+  '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-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-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-mini-font-size': $input-size-mini-font-size,
+  'input-size-mini-height': $input-size-mini-height,
+  'input-size-mini-line-height': $input-size-mini-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,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($less-vars, $name, $fallback);
+}
+
+@mixin input-label-hide-input-element() {
+  // A div with width: 0 can also cause line breaks to cause the input box to be stretched, and to separate it from the standard document flow
+  position: absolute;
+  // Need to hide the input while ensuring that it can be focused by the Tab key
+  // So don't use display: none / visibility: hidden
+  width: 0 !important;
+}
+
+@mixin input-label-size($cls, $size) {
+  $height: string.unquote('input-size-#{$size}-height');
+
+  &.#{$cls}-size-#{$size} .#{$cls}-input,
+  &.#{$cls}-size-#{$size} .#{$cls}-value {
+    @include input-size($size);
+  }
+
+  &.#{$cls}-size-#{$size} .#{$cls}-value {
+    min-height: math.round(less-var($height) - $input-border-width * 2);
+  }
+}
+
+@mixin input-label-style($cls) {
+  &.#{$cls}-search {
+    cursor: text;
+
+    & .#{$cls}-value {
+      pointer-events: none;
+    }
+  }
+
+  @include input-wrapper-style($cls);
+
+  cursor: pointer;
+
+  .#{$cls}-input {
+    @include input-style();
+
+    &-hidden {
+      @include input-label-hide-input-element();
+    }
+  }
+
+  .#{$cls}-value {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+
+    @include text-ellipsis();
+
+    // Fix the style problem that the height of the outer div of the select layer exceeds 4px when the value is an empty string.
+    &::after {
+      font-size: 0;
+      line-height: 0;
+      visibility: hidden;
+      content: '.';
+    }
+
+    &-hidden {
+      display: none;
+    }
+  }
+
+  @include input-label-size($cls, mini);
+  @include input-label-size($cls, medium);
+  @include input-label-size($cls, small);
+  @include input-label-size($cls, large);
+}

package/es/_components/input-label/style/token.scss

@@ -0,0 +1 @@
+$__sd-input-label-token-placeholder: null;

package/es/_components/picker/style/index.scss

@@ -0,0 +1,197 @@
+@use '@components/input/style/token.scss' as inputToken;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/input/style/input.scss' as *;
+@use '@components/_components/picker/style/token.scss' as *;
+
+.#{theme.$prefix}-picker {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: $picker-padding-horizontal 11px 4px 4px;
+  line-height: theme.$line-height-base;
+  background-color: $picker-color-bg;
+  border: 1px solid $picker-color-border;
+  border-radius: $picker-input-border-radius;
+  transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+
+  &-input {
+    display: inline-flex;
+    flex: 1;
+  }
+
+  input {
+    width: 100%;
+    padding: 0;
+    padding-left: 8px;
+    color: $picker-color-text;
+    line-height: theme.$line-height-base;
+    text-align: left;
+    background-color: global.$color-transparent;
+    border: none;
+    outline: none;
+    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+
+    &::placeholder {
+      color: $picker-color-placeholder;
+    }
+
+    // fix color error under disabled status in safari
+    &[disabled] {
+      -webkit-text-fill-color: $input-color-text_disabled;
+    }
+  }
+
+  &-has-prefix {
+    padding-left: inputToken.$input-padding-horizontal;
+  }
+
+  &-prefix {
+    padding-right: $picker-padding-horizontal;
+    color: inputToken.$input-color-prefix-text;
+    font-size: inputToken.$input-size-default-icon-suffix-size;
+  }
+
+  &-suffix {
+    display: inline-flex;
+    align-items: center;
+    margin-left: 4px;
+
+    @include input-suffix-feedback-icon-color();
+
+    .#{theme.$prefix}-feedback-icon {
+      margin-left: 4px;
+    }
+  }
+
+  &-suffix-icon {
+    color: $picker-color-icon;
+  }
+
+  & &-clear-icon {
+    display: none;
+    color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+    font-size: 12px;
+  }
+
+  &:hover {
+    background-color: $picker-color-bg_hover;
+    border-color: $picker-color-border_hover;
+  }
+
+  &:not(.#{theme.$prefix}-picker-disabled):hover .#{theme.$prefix}-picker-clear-icon {
+    display: inline-block;
+  }
+
+  &:not(.#{theme.$prefix}-picker-disabled):hover
+    .#{theme.$prefix}-picker-suffix
+    .#{theme.$prefix}-picker-clear-icon
+    + span {
+    display: none;
+  }
+
+  input[disabled] {
+    color: $picker-color-text_disabled;
+    cursor: not-allowed;
+
+    &::placeholder {
+      color: $picker-color-placeholder_disabled;
+    }
+  }
+
+  &-error {
+    background-color: $picker-color-bg_error;
+    border-color: $picker-color-border_error;
+
+    &:hover {
+      background-color: $picker-color-bg_error_hover;
+      border-color: $picker-color-border_error_hover;
+    }
+  }
+
+  &-focused {
+    box-shadow: 0 0 0 $picker-size-shadow_focus $picker-color-shadow_focus;
+  }
+
+  &-focused,
+  &-focused:hover {
+    background-color: $picker-color-bg_focus;
+    border-color: $picker-color-border_focus;
+  }
+
+  &-focused.#{theme.$prefix}-picker-error {
+    border-color: $picker-color-border_error_focus;
+    box-shadow: 0 0 0 $picker-size-shadow_error_focus $picker-color-shadow_error_focus;
+  }
+
+  &-focused &-input-active input,
+  &-focused:hover &-input-active input {
+    background: $picker-range-color-bg-input_focus;
+  }
+
+  &-disabled,
+  &-disabled:hover {
+    color: $picker-color-text_disabled;
+    background-color: $picker-color-bg_disabled;
+    border-color: $picker-color-border_disabled;
+    cursor: not-allowed;
+
+    input[disabled] {
+      color: $picker-color-text_disabled;
+      cursor: not-allowed;
+
+      &::placeholder {
+        color: $picker-color-placeholder_disabled;
+      }
+    }
+  }
+
+  &-separator {
+    min-width: 10px;
+    padding: 0 8px;
+    color: $picker-color-separator;
+  }
+
+  &-disabled &-separator {
+    color: $picker-color-separator_disabled;
+  }
+
+  &-disabled &-suffix-icon {
+    color: $picker-color-icon_disabled;
+  }
+
+  // Size
+  &-size-mini {
+    height: $picker-size-mini;
+
+    input {
+      font-size: $picker-size-mini-font-size-text;
+    }
+  }
+
+  &-size-small {
+    height: $picker-size-small;
+
+    input {
+      font-size: $picker-size-small-font-size-text;
+    }
+  }
+
+  &-size-medium {
+    height: $picker-size-default;
+
+    input {
+      font-size: $picker-size-default-font-size-text;
+    }
+  }
+
+  &-size-large {
+    height: $picker-size-large;
+
+    input {
+      font-size: $picker-size-large-font-size-text;
+    }
+  }
+}

package/es/_components/picker/style/token.scss

@@ -0,0 +1,70 @@
+@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';
+
+@forward '@components/input/style/token.scss';
+
+@use '@style/theme/index.scss' as *;
+@use '@components/input/style/token.scss' as *;
+
+$picker-size-mini: global.$size-mini;
+$picker-size-small: global.$size-small;
+$picker-size-default: global.$size-default;
+$picker-size-large: global.$size-large;
+
+$picker-size-mini-font-size-text: global.$font-size-body-1;
+$picker-size-small-font-size-text: global.$font-size-body-3;
+$picker-size-default-font-size-text: global.$font-size-body-3;
+$picker-size-large-font-size-text: global.$font-size-body-3;
+
+$picker-input-border-radius: global.$radius-small;
+
+$picker-color-shadow_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2')
+);
+$picker-size-shadow_focus: global.$shadow-distance-none;
+$picker-color-shadow_error_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-2')
+);
+$picker-size-shadow_error_focus: global.$shadow-distance-none;
+
+$picker-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$picker-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$picker-color-bg_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+$picker-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$picker-color-bg_error: var(string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-1'));
+$picker-color-bg_error_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-2')
+);
+$picker-color-bg_error_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$picker-color-border: global.$color-transparent;
+$picker-color-border_hover: global.$color-transparent;
+$picker-color-border_focus: global.$color-primary-6;
+$picker-color-border_disabled: global.$color-transparent;
+$picker-color-border_error: global.$color-transparent;
+$picker-color-border_error_hover: global.$color-transparent;
+$picker-color-border_error_focus: global.$color-danger-6;
+
+$picker-color-placeholder: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$picker-color-placeholder_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+$picker-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$picker-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+$picker-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$picker-color-icon_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+$picker-color-separator: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$picker-color-separator_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$picker-range-color-bg-input_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+$input-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+// not in design lab
+$picker-padding-horizontal: global.$spacing-2; // 4px
+$picker-input-padding-horizontal: $input-padding-horizontal - $picker-padding-horizontal; // 8px