@sdata/web-vue 1.5.0 → 1.7.0

package/es/auto-complete/style/index.scss

@@ -0,0 +1,78 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@components/auto-complete/style/token.scss' as *;
+
+$auto-complete-prefix-cls: string.unquote('#{theme.$prefix}-autocomplete');
+$select-prefix-cls: string.unquote('#{theme.$prefix}-select');
+
+$__less-vars: (
+  'auto-complete-option-color-bg_default': $auto-complete-option-color-bg_default,
+  'auto-complete-option-color-bg_disabled': $auto-complete-option-color-bg_disabled,
+  'auto-complete-option-color-bg_hover': $auto-complete-option-color-bg_hover,
+  'auto-complete-option-color-bg_selected': $auto-complete-option-color-bg_selected,
+  'auto-complete-option-color-text_default': $auto-complete-option-color-text_default,
+  'auto-complete-option-color-text_disabled': $auto-complete-option-color-text_disabled,
+  'auto-complete-option-color-text_hover': $auto-complete-option-color-text_hover,
+  'auto-complete-option-color-text_selected': $auto-complete-option-color-text_selected,
+  'auto-complete-option-font-weight_selected': $auto-complete-option-font-weight_selected,
+  'auto-complete-option-height': $auto-complete-option-height,
+  'auto-complete-option-padding-horizontal': $auto-complete-option-padding-horizontal,
+  'auto-complete-popup-border-radius': $auto-complete-popup-border-radius,
+  'auto-complete-popup-box-shadow': $auto-complete-popup-box-shadow,
+  'auto-complete-popup-color-border': $auto-complete-popup-color-border,
+  'auto-complete-popup-font-size': $auto-complete-popup-font-size,
+  'auto-complete-popup-max-height': $auto-complete-popup-max-height,
+  'auto-complete-popup-padding-vertical': $auto-complete-popup-padding-vertical,
+  'prefix': theme.$prefix,
+  'sd-cssvars-prefix': theme.$sd-cssvars-prefix,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+.#{$auto-complete-prefix-cls} {
+  &-popup .#{$select-prefix-cls}-popup {
+    background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-popup'));
+    border: 1px solid $auto-complete-popup-color-border;
+    border-radius: $auto-complete-popup-border-radius;
+    box-shadow: $auto-complete-popup-box-shadow;
+
+    .#{$select-prefix-cls}-popup-inner {
+      max-height: $auto-complete-popup-max-height;
+      padding: $auto-complete-popup-padding-vertical 0;
+    }
+
+    .#{$select-prefix-cls}-option {
+      height: $auto-complete-option-height;
+      padding: 0 $auto-complete-option-padding-horizontal;
+      font-size: $auto-complete-popup-font-size;
+      line-height: $auto-complete-option-height;
+
+      @mixin option-color($status) {
+        $class-suffix: string.unquote('-#{$status}');
+
+        @if $status == default {
+          $class-suffix: string.unquote('');
+        }
+
+        &#{$class-suffix} {
+          color: less-var('auto-complete-option-color-text_#{$status}');
+          background-color: less-var('auto-complete-option-color-bg_#{$status}');
+        }
+      }
+
+      @include option-color(default);
+      @include option-color(selected);
+      @include option-color(hover);
+      // disabled 优先级最高，放在最后
+      @include option-color(disabled);
+
+      &-selected {
+        font-weight: $auto-complete-option-font-weight_selected;
+      }
+    }
+  }
+}

package/es/auto-complete/style/token.scss

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

package/es/avatar/style/index.css

@@ -94,7 +94,7 @@
   height: 100%;
   color: var(--color-white);
   font-size: 16px;
-  background-color: rgba(29, 33, 41, 0.6);
+  background-color: color-mix(in srgb, #1d2129 60%, transparent);
   border-radius: var(--border-radius-medium);
   opacity: 0;
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
@@ -139,4 +139,4 @@
 }
 .sd-avatar-group-popover .sd-avatar:not(:first-child) {
   margin-left: 4px;
-}
+}

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

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

package/es/avatar/style/index.js

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

package/es/avatar/style/index.scss

@@ -0,0 +1,161 @@
+@use '@style/color/colors.scss';
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/avatar/style/token.scss' as *;
+
+$avatar-prefix-cls: string.unquote('#{theme.$prefix}-avatar');
+
+.#{$avatar-prefix-cls} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: $avatar-size-default;
+  height: $avatar-size-default;
+  color: $avatar-color-text;
+  font-size: $avatar-font-size-text;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: $avatar-color-bg;
+
+  &-circle {
+    border-radius: $avatar-circle-border-radius;
+  }
+
+  &-circle &-image {
+    overflow: hidden;
+    border-radius: $avatar-circle-border-radius;
+  }
+
+  &-square {
+    border-radius: $avatar-square-border-radius;
+  }
+
+  &-square &-image {
+    overflow: hidden;
+    border-radius: $avatar-square-border-radius;
+  }
+
+  &-text {
+    position: absolute;
+    left: 50%;
+    font-weight: $avatar-font-weight-text;
+    // 避免继承行高导致的文字不居中
+    line-height: 1;
+    transform: translateX(-50%);
+    transform-origin: 0 center;
+  }
+
+  &-image {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+
+    &-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    img,
+    picture {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &-trigger-icon-button {
+    position: absolute;
+    right: -$avatar-spacing-trigger-button-right;
+    bottom: -$avatar-spacing-trigger-button-bottom;
+    z-index: 1;
+    width: $avatar-size-trigger-button;
+    height: $avatar-size-trigger-button;
+    color: $avatar-color-trigger-icon-button;
+    font-size: $avatar-size-trigger-icon;
+    line-height: $avatar-size-trigger-button;
+    text-align: center;
+    background-color: $avatar-color-trigger-button-bg;
+    border-radius: $avatar-border-trigger-button-radius;
+    transition: background-color theme.$transition-duration-1
+      theme.$transition-timing-function-linear;
+  }
+
+  &-trigger-icon-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    color: $avatar-color-trigger-mask-icon;
+    font-size: 16px;
+    background-color: color-mix(
+      in srgb,
+      colors.$gray-10 $avatar-opacity-trigger-mask-bg,
+      transparent
+    );
+    border-radius: $avatar-square-border-radius;
+    opacity: 0;
+    transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+  }
+
+  &-circle &-trigger-icon-mask {
+    border-radius: $avatar-circle-border-radius;
+  }
+
+  &-with-trigger-icon {
+    cursor: pointer;
+  }
+
+  &-with-trigger-icon:hover &-trigger-icon-mask {
+    z-index: 2;
+    opacity: 1;
+  }
+
+  &-with-trigger-icon:hover &-trigger-icon-button {
+    background-color: $avatar-color-trigger-button-bg_hover;
+  }
+
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-rtl &-trigger-icon-button {
+    right: unset;
+    left: -$avatar-spacing-trigger-button-right;
+  }
+
+  // Group
+  &-group {
+    display: inline-block;
+    line-height: 0;
+
+    &-max-count-avatar {
+      color: $avatar-color-max-count-text;
+      font-size: $avatar-font-size-max-count;
+      cursor: default;
+    }
+
+    &-rtl {
+      direction: rtl;
+    }
+  }
+
+  &-group & {
+    border: $avatar-group-item-border-width solid $avatar-color-group-item-border;
+  }
+
+  &-group &:not(:first-child) {
+    margin-left: $avatar-group-item-margin-left;
+  }
+
+  &-group-popover &:not(:first-child) {
+    margin-left: $avatar-group-popover-item-spacing;
+  }
+}

package/es/avatar/style/token.scss

@@ -0,0 +1,57 @@
+@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 *;
+
+$avatar-size-default: global.$size-10;
+
+$avatar-font-size-text: 20px;
+
+$avatar-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+$avatar-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
+
+$avatar-color-group-item-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+
+$avatar-group-item-border-width: 2px;
+
+$avatar-group-item-margin-left: -10px;
+
+$avatar-group-popover-item-spacing: global.$spacing-2;
+
+$avatar-font-weight-text: global.$font-weight-500;
+
+$avatar-circle-border-radius: global.$radius-circle;
+
+$avatar-square-border-radius: global.$radius-medium;
+
+$avatar-size-trigger-button: global.$size-5;
+
+$avatar-color-trigger-button-bg: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-2')
+);
+
+$avatar-color-trigger-button-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3')
+);
+
+$avatar-color-trigger-mask-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+
+$avatar-opacity-trigger-mask-bg: global.$opacity-6;
+
+$avatar-color-trigger-icon-button: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4'));
+
+$avatar-spacing-trigger-button-right: global.$spacing-2;
+
+$avatar-spacing-trigger-button-bottom: global.$spacing-2;
+
+$avatar-size-trigger-icon: global.$size-3;
+
+$avatar-border-trigger-button-radius: global.$radius-circle;
+
+$avatar-font-size-max-count: 20px;
+
+$avatar-color-max-count-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));

package/es/back-top/style/index.css

@@ -39,4 +39,4 @@
 }
 .sd-back-top-btn svg {
   font-size: 14px;
-}
+}

package/es/back-top/style/index.d.ts

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

package/es/back-top/style/index.js

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

package/es/back-top/style/index.scss

@@ -0,0 +1,34 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/back-top/style/token.scss' as *;
+
+$backtop-prefix-cls: string.unquote('#{theme.$prefix}-back-top');
+
+.#{$backtop-prefix-cls} {
+  position: fixed;
+  right: $backtop-margin-right;
+  bottom: $backtop-margin-bottom;
+  z-index: 100;
+
+  &-btn {
+    width: $backtop-button-size-width;
+    height: $backtop-button-size-width;
+    color: $backtop-button-color-text;
+    font-size: $backtop-button-size-font;
+    text-align: center;
+    background-color: $backtop-button-color-bg;
+    border: none;
+    border-radius: $backtop-button-border-radius;
+    outline: none;
+    cursor: pointer;
+    transition: all theme.$transition-duration-2 theme.$transition-timing-function-linear;
+
+    &:hover {
+      background-color: $backtop-button-color-bg_hover;
+    }
+
+    svg {
+      font-size: $backtop-button-size-icon;
+    }
+  }
+}

package/es/back-top/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 *;
+
+$backtop-margin-bottom: global.$spacing-9;
+
+$backtop-margin-right: global.$spacing-9;
+
+$backtop-button-size-width: global.$size-10;
+
+$backtop-button-size-font: global.$font-size-body-1;
+
+$backtop-button-size-icon: 14px;
+
+$backtop-button-color-bg: global.$color-primary-6;
+
+$backtop-button-color-bg_hover: global.$color-primary-5;
+
+$backtop-button-border-radius: global.$radius-circle;
+
+$backtop-button-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));

package/es/badge/style/index.css

@@ -23,10 +23,7 @@
 .sd-badge-rtl {
   direction: rtl;
 }
-.sd-badge-number,
-.sd-badge-dot,
-.sd-badge-text,
-.sd-badge-custom-dot {
+.sd-badge-number, .sd-badge-dot, .sd-badge-text, .sd-badge-custom-dot {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -38,17 +35,13 @@
   transform: translate(50%, -50%);
   transform-origin: 100% 0%;
 }
-.sd-badge-rtl .sd-badge-number,
-.sd-badge-rtl .sd-badge-dot,
-.sd-badge-rtl .sd-badge-text,
-.sd-badge-rtl .sd-badge-custom-dot {
+.sd-badge-rtl .sd-badge-number, .sd-badge-rtl .sd-badge-dot, .sd-badge-rtl .sd-badge-text, .sd-badge-rtl .sd-badge-custom-dot {
   right: unset;
 }
 .sd-badge-custom-dot {
   background-color: var(--color-bg-2);
 }
-.sd-badge-number,
-.sd-badge-text {
+.sd-badge-number, .sd-badge-text {
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
@@ -66,9 +59,7 @@
   border-radius: var(--border-radius-circle);
   box-shadow: 0 0 0 2px var(--color-bg-2);
 }
-.sd-badge-no-children .sd-badge-dot,
-.sd-badge-no-children .sd-badge-number,
-.sd-badge-no-children .sd-badge-text {
+.sd-badge-no-children .sd-badge-dot, .sd-badge-no-children .sd-badge-number, .sd-badge-no-children .sd-badge-text {
   position: relative;
   top: unset;
   right: unset;
@@ -150,6 +141,7 @@
   display: inline-block;
   animation: sd-badge-scale 0.5s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
+
 @keyframes sd-badge-scale {
   from {
     transform: scale(0, 0);
@@ -163,6 +155,7 @@
   transform: translate(50%, -50%) scale(0.2, 0.2);
   transform-origin: center;
 }
+
 .badge-zoom-enter-active,
 .badge-zoom-appear-active {
   transform: translate(50%, -50%) scale(1, 1);
@@ -170,14 +163,16 @@
   opacity: 1;
   transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
 }
+
 .badge-zoom-exit {
   transform: translate(50%, -50%) scale(1, 1);
   transform-origin: center;
   opacity: 1;
 }
+
 .badge-zoom-exit-active {
   transform: translate(50%, -50%) scale(0.2, 0.2);
   transform-origin: center;
   opacity: 0;
   transition: opacity 0.3s cubic-bezier(0.3, 1.3, 0.3, 1), transform 0.3s cubic-bezier(0.3, 1.3, 0.3, 1);
-}
+}

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

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

package/es/badge/style/index.js

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