@sdata/web-vue 1.6.0 → 1.7.0

package/es/result/style/index.scss

@@ -0,0 +1,130 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@components/result/style/token.scss' as *;
+
+$result-prefix-cls: string.unquote('#{theme.$prefix}-result');
+
+$__less-vars: (
+  'prefix': theme.$prefix,
+  'result-color-icon-bg_error': $result-color-icon-bg_error,
+  'result-color-icon-bg_info': $result-color-icon-bg_info,
+  'result-color-icon-bg_success': $result-color-icon-bg_success,
+  'result-color-icon-bg_warning': $result-color-icon-bg_warning,
+  'result-color-icon_default': $result-color-icon_default,
+  'result-color-icon_error': $result-color-icon_error,
+  'result-color-icon_info': $result-color-icon_info,
+  'result-color-icon_success': $result-color-icon_success,
+  'result-color-icon_warning': $result-color-icon_warning,
+  'result-color-subtitle-text': $result-color-subtitle-text,
+  'result-color-title-text': $result-color-title-text,
+  'result-font-subtitle-size': $result-font-subtitle-size,
+  'result-font-title-size': $result-font-title-size,
+  'result-font-title-weight': $result-font-title-weight,
+  'result-margin-content-top': $result-margin-content-top,
+  'result-margin-extra-top': $result-margin-extra-top,
+  'result-margin-icon-bottom': $result-margin-icon-bottom,
+  'result-padding-bottom': $result-padding-bottom,
+  'result-padding-horizontal': $result-padding-horizontal,
+  'result-padding-top': $result-padding-top,
+  'result-padding-top_icon': $result-padding-top_icon,
+  'result-size-icon': $result-size-icon,
+  'result-size-icon-wrapper': $result-size-icon-wrapper,
+  'result-size-icon_custom': $result-size-icon_custom,
+  'result-size-image-width': $result-size-image-width,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+@mixin icon-status($status) {
+  $color: string.unquote('result-color-icon_#{$status}');
+  $bg: string.unquote('result-color-icon-bg_#{$status}');
+
+  color: less-var($color);
+  background-color: less-var($bg);
+}
+
+.#{$result-prefix-cls} {
+  box-sizing: border-box;
+  width: 100%;
+  padding: $result-padding-top_icon $result-padding-horizontal $result-padding-bottom;
+
+  &-icon {
+    margin-bottom: $result-margin-icon-bottom;
+    font-size: $result-size-icon;
+    text-align: center;
+
+    &-tip {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $result-size-icon-wrapper;
+      height: $result-size-icon-wrapper;
+      margin: 0 auto;
+      border-radius: 50%;
+    }
+
+    // status == null
+    &-custom &-tip {
+      width: unset;
+      height: unset;
+      color: $result-color-icon_default;
+      font-size: $result-size-icon_custom;
+    }
+
+    &-success &-tip {
+      @include icon-status(success);
+    }
+
+    &-error &-tip {
+      @include icon-status(error);
+    }
+
+    &-info &-tip {
+      @include icon-status(info);
+    }
+
+    &-warning &-tip {
+      @include icon-status(warning);
+    }
+
+    &-404,
+    &-403,
+    &-500 {
+      padding-top: $result-padding-top;
+
+      .#{$result-prefix-cls}-icon-tip {
+        width: $result-size-image-width;
+        height: $result-size-image-width;
+        line-height: $result-size-image-width;
+      }
+    }
+  }
+
+  &-title {
+    color: $result-color-title-text;
+    font-weight: $result-font-title-weight;
+    font-size: $result-font-title-size;
+    line-height: 1.5715;
+    text-align: center;
+  }
+
+  &-subtitle {
+    color: $result-color-subtitle-text;
+    font-size: $result-font-subtitle-size;
+    line-height: 1.5715;
+    text-align: center;
+  }
+
+  &-extra {
+    margin-top: $result-margin-extra-top;
+    text-align: center;
+  }
+
+  &-content {
+    margin-top: $result-margin-content-top;
+  }
+}

package/es/result/style/token.scss

@@ -0,0 +1,65 @@
+@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 *;
+
+$result-padding-top: global.$spacing-9;
+
+$result-padding-top_icon: global.$spacing-10;
+
+$result-padding-bottom: global.$spacing-9;
+
+$result-padding-horizontal: global.$spacing-10;
+
+$result-margin-icon-bottom: global.$spacing-7;
+
+$result-margin-extra-top: global.$spacing-8;
+
+$result-margin-content-top: global.$spacing-8;
+
+$result-font-title-size: global.$font-size-body-3;
+
+$result-font-title-weight: global.$font-weight-500;
+
+$result-font-subtitle-size: global.$font-size-body-3;
+
+$result-color-title-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$result-color-subtitle-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$result-size-icon: global.$size-5;
+
+$result-size-icon-wrapper: 45px;
+
+$result-size-image-width: global.$size-23;
+
+$result-color-icon_success: global.$color-success-6;
+
+$result-color-icon-bg_success: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-success-light-1')
+);
+
+$result-color-icon_error: global.$color-danger-6;
+
+$result-color-icon-bg_error: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-1')
+);
+
+$result-color-icon_warning: global.$color-warning-6;
+
+$result-color-icon-bg_warning: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-warning-light-1')
+);
+
+$result-color-icon_info: global.$color-primary-6;
+
+$result-color-icon-bg_info: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+
+$result-size-icon_custom: 45px;
+
+$result-color-icon_default: inherit;

package/es/scrollbar/style/index.css

@@ -54,8 +54,7 @@
   background-color: var(--color-neutral-4);
   border-radius: 6px;
 }
-.sd-scrollbar-thumb:hover .sd-scrollbar-thumb-bar,
-.sd-scrollbar-thumb-dragging .sd-scrollbar-thumb-bar {
+.sd-scrollbar-thumb:hover .sd-scrollbar-thumb-bar, .sd-scrollbar-thumb-dragging .sd-scrollbar-thumb-bar {
   background-color: var(--color-neutral-6);
 }
 .sd-scrollbar-thumb-direction-horizontal .sd-scrollbar-thumb-bar {
@@ -68,11 +67,13 @@
 }
 .sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb {
   opacity: 0;
-  transition: opacity ease 200ms;
 }
 .sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb-dragging {
   opacity: 0.8;
 }
+.sd-scrollbar.sd-scrollbar-type-embed .sd-scrollbar-thumb {
+  transition: opacity ease 200ms;
+}
 .sd-scrollbar.sd-scrollbar-type-embed:hover .sd-scrollbar-thumb {
   opacity: 0.8;
 }
@@ -104,5 +105,5 @@
   background-color: var(--color-neutral-1);
   border-right: 1px solid var(--color-neutral-3);
   border-bottom: 1px solid var(--color-neutral-3);
-  content: '';
-}
+  content: "";
+}

package/es/scrollbar/style/index.d.ts

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

package/es/scrollbar/style/index.js

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

package/es/scrollbar/style/index.scss

@@ -0,0 +1,133 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/scrollbar/style/token.scss' as *;
+
+$scroll-prefix-cls: string.unquote('#{theme.$prefix}-scrollbar');
+
+.#{$scroll-prefix-cls} {
+  position: relative;
+
+  &-container {
+    position: relative;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &-track {
+    position: absolute;
+    z-index: 100;
+
+    &-direction-horizontal {
+      bottom: 0;
+      left: 0;
+      box-sizing: border-box;
+      width: 100%;
+      height: $scrollbar-track-size;
+    }
+
+    &-direction-vertical {
+      top: 0;
+      right: 0;
+      box-sizing: border-box;
+      width: $scrollbar-track-size;
+      height: 100%;
+    }
+  }
+
+  &-thumb {
+    position: absolute;
+    display: block;
+    box-sizing: border-box;
+
+    &-bar {
+      width: 100%;
+      height: 100%;
+      background-color: $scrollbar-thumb-bar-bg_color;
+      border-radius: $scrollbar-thumb-bar-border_radius;
+    }
+
+    &:hover,
+    &-dragging {
+      .#{$scroll-prefix-cls}-thumb-bar {
+        background-color: $scrollbar-thumb-bar-bg_color_hover;
+      }
+    }
+
+    &-direction-horizontal {
+      .#{$scroll-prefix-cls}-thumb-bar {
+        height: $scrollbar-thumb-bar-size;
+        margin: (($scrollbar-track-size - $scrollbar-thumb-bar-size) * 0.5) 0;
+      }
+    }
+
+    &-direction-vertical {
+      .#{$scroll-prefix-cls}-thumb-bar {
+        width: $scrollbar-thumb-bar-size;
+        margin: 0 (($scrollbar-track-size - $scrollbar-thumb-bar-size) * 0.5);
+      }
+    }
+  }
+
+  &#{&}-type-embed {
+    .#{$scroll-prefix-cls}-thumb {
+      opacity: 0;
+
+      &-dragging {
+        opacity: 0.8;
+      }
+
+      transition: opacity ease 200ms;
+    }
+
+    &:hover {
+      .#{$scroll-prefix-cls}-thumb {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  &#{&}-type-track {
+    .#{$scroll-prefix-cls}-track {
+      background-color: $scrollbar-track-bg_color;
+
+      &-direction-horizontal {
+        border-top: $scrollbar-track-border_size solid $scrollbar-track-border_color;
+        border-bottom: $scrollbar-track-border_size solid $scrollbar-track-border_color;
+      }
+
+      &-direction-vertical {
+        border-right: $scrollbar-track-border_size solid $scrollbar-track-border_color;
+        border-left: $scrollbar-track-border_size solid $scrollbar-track-border_color;
+      }
+    }
+
+    .#{$scroll-prefix-cls}-thumb {
+      &-direction-horizontal {
+        margin: -$scrollbar-track-border_size 0;
+      }
+
+      &-direction-vertical {
+        margin: 0 (-$scrollbar-track-border_size);
+      }
+    }
+
+    &.#{$scroll-prefix-cls}-both {
+      .#{$scroll-prefix-cls}-track-direction-vertical::after {
+        position: absolute;
+        right: -$scrollbar-track-border_size;
+        bottom: 0;
+        display: block;
+        box-sizing: border-box;
+        width: $scrollbar-track-size;
+        height: $scrollbar-track-size;
+        background-color: $scrollbar-track-bg_color;
+        border-right: $scrollbar-track-border_size solid $scrollbar-track-border_color;
+        border-bottom: $scrollbar-track-border_size solid $scrollbar-track-border_color;
+        content: '';
+      }
+    }
+  }
+}

package/es/scrollbar/style/token.scss

@@ -0,0 +1,25 @@
+@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 *;
+
+$scrollbar-track-size: 15px;
+
+$scrollbar-track-border_size: global.$border-1;
+
+$scrollbar-track-border_color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$scrollbar-track-bg_color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-1'));
+
+$scrollbar-thumb-bar-size: 9px;
+
+$scrollbar-thumb-bar-border_radius: 6px;
+
+$scrollbar-thumb-bar-bg_color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-4'));
+
+$scrollbar-thumb-bar-bg_color_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-6')
+);

package/es/sd-vue.js

@@ -120,6 +120,7 @@ import table_column_default from "./table/table-column.js";
 import Table from "./table/index.js";
 import tab_pane_default from "./tabs/tab-pane.js";
 import Tabs from "./tabs/index.js";
+import ThemeProvider from "./theme-provider/index.js";
 import TimePicker from "./time-picker/index.js";
 import item_default$1 from "./timeline/item.js";
 import Timeline from "./timeline/index.js";
@@ -204,6 +205,7 @@ var components = {
 	Anchor,
 	BackTop,
 	ConfigProvider,
+	ThemeProvider,
 	ResizeBox,
 	Trigger,
 	Split,

package/es/select/style/index.css

@@ -82,8 +82,7 @@
   font-weight: 500;
   background-color: var(--color-bg-popup);
 }
-.sd-select-dropdown .sd-select-option-active,
-.sd-select-dropdown .sd-select-option:not(.sd-select-dropdown .sd-select-option-disabled):hover {
+.sd-select-dropdown .sd-select-option-active, .sd-select-dropdown .sd-select-option:not(.sd-select-dropdown .sd-select-option-disabled):hover {
   color: var(--color-text-1);
   background-color: var(--color-fill-2);
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
@@ -127,4 +126,4 @@
 }
 .sd-select-dropdown-footer {
   border-top: 1px solid var(--color-fill-3);
-}
+}

package/es/select/style/index.d.ts

@@ -1,7 +1,7 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../_components/select-view/style';
 import '../../trigger/style';
 import '../../empty/style';
 import '../../checkbox/style';
 import '../../scrollbar/style';
-import './index.less';
+import './index.scss';

package/es/select/style/index.js

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

package/es/select/style/index.scss

@@ -0,0 +1,135 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@style/mixins/index.scss' as *;
+@use '@components/select/style/token.scss' as *;
+
+$select-prefix-cls: string.unquote('#{theme.$prefix}-select');
+
+.#{$select-prefix-cls}-dropdown {
+  box-sizing: border-box;
+  padding: $select-popup-padding-vertical 0;
+  background-color: $select-popup-color-bg;
+  border: 1px solid $select-popup-color-border;
+  border-radius: $select-popup-border-radius;
+  box-shadow: $select-popup-box-shadow;
+
+  & &-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 50px;
+  }
+
+  &-list {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 0;
+    list-style: none;
+
+    &-wrapper {
+      max-height: $select-popup-max-height;
+      overflow-y: auto;
+    }
+  }
+
+  .#{$select-prefix-cls}-option {
+    position: relative;
+    // 避免 Trigger 的小箭头位于其上方
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 $select-signal-popup-option-padding-horizontal;
+
+    // default
+    color: $select-popup-option-color-text_default;
+    font-size: $select-popup-font-size;
+    line-height: $select-popup-option-height;
+    text-align: left;
+    background-color: $select-popup-option-color-bg_default;
+    cursor: pointer;
+
+    &-content {
+      @include text-ellipsis();
+    }
+
+    &-checkbox {
+      overflow: hidden;
+
+      .#{theme.$prefix}-checkbox-label {
+        @include text-ellipsis();
+      }
+    }
+
+    &-has-suffix {
+      justify-content: space-between;
+    }
+
+    // selected
+    &-selected {
+      color: $select-popup-option-color-text_selected;
+      font-weight: $select-popup-option-font-weight_selected;
+      background-color: $select-popup-option-color-bg_selected;
+    }
+
+    // hover
+    &-active,
+    &:not(#{&}-disabled):hover {
+      color: $select-popup-option-color-text_hover;
+      background-color: $select-popup-option-color-bg_hover;
+      transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+    }
+
+    // disabled
+    &-disabled {
+      color: $select-popup-option-color-text_disabled;
+      background-color: $select-popup-option-color-bg_disabled;
+      cursor: not-allowed;
+    }
+
+    &-icon {
+      display: inline-flex;
+      margin-right: 8px;
+    }
+
+    &-suffix {
+      margin-left: $dropdown-margin-left-suffix-icon;
+    }
+  }
+
+  .#{$select-prefix-cls}-group {
+    &:first-child &-title {
+      margin-top: $select-popup-group-title-padding-top;
+    }
+
+    &-title {
+      box-sizing: border-box;
+      width: 100%;
+      margin-top: $select-popup-group-title-padding-top;
+      padding: 0 $select-popup-group-title-padding-horizontal;
+      color: $select-popup-group-title-color-text;
+      font-size: $select-popup-group-title-font-size;
+      line-height: $select-popup-group-title-height;
+      cursor: default;
+
+      @include text-ellipsis();
+    }
+  }
+
+  &#{&}-has-header {
+    padding-top: 0;
+  }
+
+  &-header {
+    border-bottom: 1px solid $select-popup-color-border;
+  }
+
+  &#{&}-has-footer {
+    padding-bottom: 0;
+  }
+
+  &-footer {
+    border-top: 1px solid $select-popup-color-border;
+  }
+}

package/es/select/style/token.scss

@@ -0,0 +1,67 @@
+@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 *;
+
+/**********************************************
+ * Popup Box
+ **********************************************/
+$select-popup-max-height: global.$size-50;
+$select-popup-border-radius: global.$radius-medium;
+$select-popup-padding-vertical: global.$spacing-2;
+$select-popup-font-size: global.$font-size-body-3;
+$select-popup-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+$select-popup-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$select-popup-box-shadow: global.$shadow2-down;
+
+/**********************************************
+ * Popup Options
+ * status: default / disabled / selected / hover
+ **********************************************/
+$select-popup-option-height: global.$size-9;
+$select-popup-option-font-weight_selected: global.$font-weight-500;
+$select-signal-popup-option-padding-horizontal: global.$spacing-6;
+$select-multi-popup-option-padding-horizontal: global.$spacing-2;
+
+$select-popup-option-color-bg_default: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup')
+);
+$select-popup-option-color-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+$select-popup-option-color-bg_selected: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup')
+);
+$select-popup-option-color-bg_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup')
+);
+
+$select-popup-option-color-text_default: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$select-popup-option-color-text_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$select-popup-option-color-text_selected: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-1')
+);
+$select-popup-option-color-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$select-popup-option-color-highlight-text: var(--color-text-1);
+$select-popup-option-font-highlight-weight: global.$font-weight-500;
+
+// option group title
+$select-popup-group-title-height: global.$size-5;
+$select-popup-group-title-padding-horizontal: global.$spacing-6;
+$select-popup-group-title-padding-top: global.$spacing-4;
+$select-popup-group-title-font-size: global.$font-size-body-1;
+$select-popup-group-title-color-text: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-3')
+);
+
+$dropdown-margin-left-suffix-icon: global.$spacing-6;

package/es/skeleton/style/index.css

@@ -50,6 +50,7 @@
   background-size: 400% 100%;
   animation: sd-skeleton-circle 1.5s cubic-bezier(0, 0, 1, 1) infinite;
 }
+
 @keyframes sd-skeleton-circle {
   0% {
     background-position: 100% 50%;
@@ -57,4 +58,4 @@
   100% {
     background-position: 0 50%;
   }
-}
+}

package/es/skeleton/style/index.d.ts

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

package/es/skeleton/style/index.js

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