@sdata/web-vue 1.5.0 → 1.7.0

package/es/form/style/status.scss

@@ -0,0 +1,210 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@components/form/style/token.scss' as *;
+
+$form-prefix-cls: string.unquote('#{theme.$prefix}-form');
+
+// for input & textarea
+$__less-vars: (
+  'form-color-bg_error': $form-color-bg_error,
+  'form-color-bg_error_focus': $form-color-bg_error_focus,
+  'form-color-bg_error_hover': $form-color-bg_error_hover,
+  'form-color-bg_success': $form-color-bg_success,
+  'form-color-bg_success_focus': $form-color-bg_success_focus,
+  'form-color-bg_success_hover': $form-color-bg_success_hover,
+  'form-color-bg_validating': $form-color-bg_validating,
+  'form-color-bg_validating_focus': $form-color-bg_validating_focus,
+  'form-color-bg_validating_hover': $form-color-bg_validating_hover,
+  'form-color-bg_warning': $form-color-bg_warning,
+  'form-color-bg_warning_focus': $form-color-bg_warning_focus,
+  'form-color-bg_warning_hover': $form-color-bg_warning_hover,
+  'form-color-border_error': $form-color-border_error,
+  'form-color-border_error_focus': $form-color-border_error_focus,
+  'form-color-border_error_hover': $form-color-border_error_hover,
+  'form-color-border_success': $form-color-border_success,
+  'form-color-border_success_focus': $form-color-border_success_focus,
+  'form-color-border_success_hover': $form-color-border_success_hover,
+  'form-color-border_validating': $form-color-border_validating,
+  'form-color-border_validating_focus': $form-color-border_validating_focus,
+  'form-color-border_validating_hover': $form-color-border_validating_hover,
+  'form-color-border_warning': $form-color-border_warning,
+  'form-color-border_warning_focus': $form-color-border_warning_focus,
+  'form-color-border_warning_hover': $form-color-border_warning_hover,
+  'form-color-shadow_error_focus': $form-color-shadow_error_focus,
+  'form-color-shadow_success_focus': $form-color-shadow_success_focus,
+  'form-color-shadow_validating_focus': $form-color-shadow_validating_focus,
+  'form-color-shadow_warning_focus': $form-color-shadow_warning_focus,
+  'form-color-tip-icon-text_error': $form-color-tip-icon-text_error,
+  'form-color-tip-icon-text_success': $form-color-tip-icon-text_success,
+  'form-color-tip-icon-text_validating': $form-color-tip-icon-text_validating,
+  'form-color-tip-icon-text_warning': $form-color-tip-icon-text_warning,
+  'form-color-tip-text_error': $form-color-tip-text_error,
+  'form-color-tip-text_success': $form-color-tip-text_success,
+  'form-color-tip-text_validating': $form-color-tip-text_validating,
+  'form-color-tip-text_warning': $form-color-tip-text_warning,
+  'form-size-shadow_error_focus': $form-size-shadow_error_focus,
+  'form-size-shadow_success_focus': $form-size-shadow_success_focus,
+  'form-size-shadow_validating_focus': $form-size-shadow_validating_focus,
+  'form-size-shadow_warning_focus': $form-size-shadow_warning_focus,
+  'prefix': theme.$prefix,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+@mixin input-status($status) {
+  $input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+  $textarea-prefix-cls: string.unquote('#{theme.$prefix}-textarea');
+
+  .#{$input-prefix-cls}-wrapper:not(.#{$input-prefix-cls}-disabled),
+  .#{$textarea-prefix-cls}-wrapper:not(.#{$textarea-prefix-cls}-disabled) {
+    background-color: less-var('form-color-bg_#{$status}');
+    border-color: less-var('form-color-border_#{$status}');
+
+    &:hover {
+      background-color: less-var('form-color-bg_#{$status}_hover');
+      border-color: less-var('form-color-border_#{$status}_hover');
+    }
+  }
+
+  .#{$input-prefix-cls}-wrapper:not(.#{$input-prefix-cls}-disabled).#{$input-prefix-cls}-focus,
+  .#{$textarea-prefix-cls}-wrapper:not(
+      .#{$textarea-prefix-cls}-disabled
+    ).#{$textarea-prefix-cls}-focus {
+    background-color: less-var('form-color-bg_#{$status}_focus');
+    border-color: less-var('form-color-border_#{$status}_focus');
+    box-shadow: 0 0 0 less-var('form-size-shadow_#{$status}_focus')
+      less-var('form-color-shadow_#{$status}_focus');
+  }
+}
+
+@mixin select-view-status($status) {
+  $input-prefix-cls: string.unquote('#{theme.$prefix}-input-tag');
+  $select-view-prefix-cls: string.unquote('#{theme.$prefix}-select-view');
+
+  .#{$select-view-prefix-cls}:not(.#{$select-view-prefix-cls}-disabled),
+  .#{$input-prefix-cls}:not(.#{$input-prefix-cls}-disabled) {
+    background-color: less-var('form-color-bg_#{$status}');
+    border-color: less-var('form-color-border_#{$status}');
+
+    &:hover {
+      background-color: less-var('form-color-bg_#{$status}_hover');
+      border-color: less-var('form-color-border_#{$status}_hover');
+    }
+  }
+
+  .#{$select-view-prefix-cls}:not(
+      .#{$select-view-prefix-cls}-disabled
+    ).#{$select-view-prefix-cls}-focus,
+  .#{$input-prefix-cls}:not(.#{$input-prefix-cls}-disabled).#{$input-prefix-cls}-focus {
+    background-color: less-var('form-color-bg_#{$status}_focus');
+    border-color: less-var('form-color-border_#{$status}_focus');
+    box-shadow: 0 0 0 less-var('form-size-shadow_#{$status}_focus')
+      less-var('form-color-shadow_#{$status}_focus');
+  }
+}
+
+// datepicker
+@mixin picker($status) {
+  .#{theme.$prefix}-picker:not(.#{theme.$prefix}-picker-disabled) {
+    background-color: less-var('form-color-bg_#{$status}');
+    border-color: less-var('form-color-border_#{$status}');
+
+    &:hover {
+      background-color: less-var('form-color-bg_#{$status}_hover');
+      border-color: less-var('form-color-border_#{$status}_hover');
+    }
+  }
+
+  .#{theme.$prefix}-picker-focused:not(.#{theme.$prefix}-picker-disabled) {
+    &,
+    &:hover {
+      background-color: less-var('form-color-bg_#{$status}_focus');
+      border-color: less-var('form-color-border_#{$status}_focus');
+      box-shadow: 0 0 0 less-var('form-size-shadow_#{$status}_focus')
+        less-var('form-color-shadow_#{$status}_focus');
+    }
+  }
+}
+
+@mixin validate-status($status) {
+  .#{theme.$prefix}-form-item-status-#{$status} {
+    @include input-status($status);
+    @include select-view-status($status);
+    @include picker($status);
+  }
+
+  .#{theme.$prefix}-form-item-status-#{$status} {
+    .#{$form-prefix-cls}-item-message-help {
+      color: less-var('form-color-tip-text_#{$status}');
+    }
+
+    .#{$form-prefix-cls}-item-feedback {
+      color: less-var('form-color-tip-icon-text_#{$status}');
+    }
+  }
+}
+
+@mixin select-view-feedback($prefix) {
+  .#{$prefix}.#{$prefix}-multiple .#{$prefix}-view,
+  .#{$prefix}.#{$prefix}-single .#{$prefix}-view {
+    padding-right: 28px;
+  }
+
+  .#{$prefix}.#{$prefix}-multiple .#{$prefix}-suffix {
+    padding-right: 0;
+  }
+}
+
+@include validate-status(validating);
+@include validate-status(success);
+@include validate-status(warning);
+@include validate-status(error);
+
+.#{$form-prefix-cls}-item-control-children {
+  position: relative;
+}
+
+.#{$form-prefix-cls}-item-feedback {
+  position: absolute;
+  top: 50%;
+  right: 9px;
+  font-size: 14px;
+  transform: translateY(-50%);
+
+  .#{theme.$prefix}-icon-loading {
+    font-size: 12px;
+  }
+}
+
+.#{$form-prefix-cls}-item-has-feedback {
+  .#{theme.$prefix}-input,
+  .#{theme.$prefix}-input-inner-wrapper,
+  .#{theme.$prefix}-textarea {
+    padding-right: 28px;
+  }
+
+  .#{theme.$prefix}-input-number-mode-embed .#{theme.$prefix}-input-number-step-layer {
+    right: 24px;
+  }
+
+  @include select-view-feedback(string.unquote('#{theme.$prefix}-select'));
+  @include select-view-feedback(string.unquote('#{theme.$prefix}-cascader'));
+  @include select-view-feedback(string.unquote('#{theme.$prefix}-tree-select'));
+
+  // datepicker timepicker
+  .#{theme.$prefix}-picker {
+    padding-right: 28px;
+  }
+
+  .#{theme.$prefix}-picker-suffix {
+    .#{theme.$prefix}-picker-suffix-icon,
+    .#{theme.$prefix}-picker-clear-icon {
+      margin-right: 0;
+      margin-left: 0;
+    }
+  }
+}

package/es/form/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 *;
+
+$form-size-mini-margin-item-bottom: global.$spacing-7;
+
+$form-size-small-margin-item-bottom: global.$spacing-8;
+
+$form-size-default-margin-item-bottom: global.$spacing-8;
+
+$form-size-large-margin-item-bottom: global.$spacing-8;
+
+$form-size-mini-font-label-size: global.$font-size-body-1;
+
+$form-size-small-font-label-size: global.$font-size-body-3;
+
+$form-size-large-font-label-size: global.$font-size-body-3;
+
+$form-size-default-font-label-size: global.$font-size-body-3;
+
+$form-font-extra-text-size: global.$font-size-body-1;
+
+$form-font-error-text-size: global.$font-size-body-1;
+
+$form-margin-label-right: global.$spacing-7;
+
+$form-margin-extra-bottom: global.$spacing-2;
+
+$form-margin-extra-top: global.$spacing-2;
+
+$form-inline-margin-item-right: global.$spacing-9;
+
+$form-inline-margin-item-bottom: global.$spacing-4;
+
+$form-vertical-margin-label-bottom: global.$spacing-4;
+
+$form-color-extra-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$form-color-text-label: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$form-margin-tooltip-left: global.$spacing-2;
+
+$form-color-text-tooltip: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$form-color-bg_warning: var(string.unquote('#{global.$sd-cssvars-prefix}-color-warning-light-1'));
+
+$form-color-bg_warning_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-warning-light-2')
+);
+
+$form-color-bg_warning_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$form-color-border_warning: global.$color-transparent;
+
+$form-color-border_warning_focus: global.$color-warning-6;
+
+$form-color-border_warning_hover: global.$color-transparent;
+
+$form-size-shadow_warning_focus: global.$shadow-distance-none;
+
+$form-color-shadow_warning_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-warning-light-2')
+);
+
+$form-color-bg_success: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$form-color-bg_success_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$form-color-bg_success_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$form-color-border_success: global.$color-transparent;
+
+$form-color-border_success_focus: global.$color-success-6;
+
+$form-color-border_success_hover: global.$color-transparent;
+
+$form-size-shadow_success_focus: global.$shadow-distance-none;
+
+$form-color-shadow_success_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-success-light-2')
+);
+
+$form-color-bg_error: var(string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-1'));
+
+$form-color-bg_error_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-2')
+);
+
+$form-color-bg_error_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$form-color-border_error: global.$color-transparent;
+
+$form-color-border_error_focus: global.$color-danger-6;
+
+$form-color-border_error_hover: global.$color-transparent;
+
+$form-size-shadow_error_focus: global.$shadow-distance-none;
+
+$form-color-shadow_error_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-2')
+);
+
+$form-color-bg_validating: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$form-color-bg_validating_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$form-color-bg_validating_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$form-color-border_validating: global.$color-transparent;
+
+$form-color-border_validating_focus: global.$color-primary-6;
+
+$form-color-border_validating_hover: global.$color-transparent;
+
+$form-size-shadow_validating_focus: global.$shadow-distance-none;
+
+$form-color-shadow_validating_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-2')
+);
+
+$form-color-tip-text_success: global.$color-success-6;
+
+$form-color-tip-icon-text_success: global.$color-success-6;
+
+$form-color-tip-text_error: global.$color-danger-6;
+
+$form-color-tip-icon-text_error: global.$color-danger-6;
+
+$form-color-tip-text_warning: global.$color-warning-6;
+
+$form-color-tip-icon-text_warning: global.$color-warning-6;
+
+$form-color-tip-text_validating: global.$color-primary-6;
+
+$form-color-tip-icon-text_validating: global.$color-primary-6;

package/es/grid/style/col.scss

@@ -0,0 +1,112 @@
+@use 'sass:math';
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$col-prefix-cls: string.unquote('#{$prefix}-col');
+
+.#{$col-prefix-cls} {
+  box-sizing: border-box;
+
+  @mixin span($span, $adaptation) {
+    @if ($span > 0) and ($adaptation == '') {
+      @include span(($span - 1), $adaptation);
+
+      &-#{$span} {
+        flex: 0 0 math.div(100%, 24) * $span;
+        width: math.div(100%, 24) * $span;
+      }
+    }
+  }
+
+  @mixin span($span, $adaptation) {
+    @if ($span > 0) and (not ($adaptation == '')) {
+      @include span(($span - 1), $adaptation);
+
+      &-#{$adaptation}-#{$span} {
+        flex: 0 0 math.div(100%, 24) * $span;
+        width: math.div(100%, 24) * $span;
+      }
+    }
+  }
+
+  @include span(24, '');
+
+  @mixin offset($offset, $adaptation) {
+    @if ($offset > 0) and ($adaptation == '') {
+      @include offset(($offset - 1), $adaptation);
+
+      &-offset-#{$offset} {
+        margin-left: math.div(100%, 24) * $offset;
+      }
+    }
+  }
+
+  @mixin offset($offset, $adaptation) {
+    @if ($offset > 0) and (not ($adaptation == '')) {
+      @include offset(($offset - 1), $adaptation);
+
+      &-#{$adaptation}-offset-#{$offset} {
+        margin-left: math.div(100%, 24) * $offset;
+      }
+    }
+  }
+
+  @include offset(23, '');
+
+  @mixin order($order, $adaptation) {
+    @if ($order > 0) and ($adaptation == '') {
+      @include order(($order - 1), $adaptation);
+
+      &-order-#{$order} {
+        order: $order;
+      }
+    }
+  }
+
+  @mixin order($order, $adaptation) {
+    @if ($order > 0) and (not ($adaptation == '')) {
+      @include order(($order - 1), $adaptation);
+
+      &-#{$adaptation}-order-#{$order} {
+        order: $order;
+      }
+    }
+  }
+
+  @include order(24, '');
+
+  // adaptation
+  @include span(24, xs);
+  @include offset(23, xs);
+  @include order(24, xs);
+
+  @media (width >= 576px) {
+    @include span(24, sm);
+    @include offset(23, sm);
+    @include order(24, sm);
+  }
+
+  @media (width >= 768px) {
+    @include span(24, md);
+    @include offset(23, md);
+    @include order(24, md);
+  }
+
+  @media (width >= 992px) {
+    @include span(24, lg);
+    @include offset(23, lg);
+    @include order(24, lg);
+  }
+
+  @media (width >= 1200px) {
+    @include span(24, xl);
+    @include offset(23, xl);
+    @include order(24, xl);
+  }
+
+  @media (width >= 1600px) {
+    @include span(24, xxl);
+    @include offset(23, xxl);
+    @include order(24, xxl);
+  }
+}

package/es/grid/style/grid.scss

@@ -0,0 +1,8 @@
+@use '@style/theme/index.scss' as *;
+@use 'sass:string';
+
+$grid-prefix-cls: string.unquote('#{$prefix}-grid');
+
+.#{$grid-prefix-cls} {
+  display: grid;
+}