@sdata/web-vue 1.5.0 → 1.7.0

package/es/drawer/style/{index.less → index.scss}

@@ -1,28 +1,31 @@
-@import url('./token.less');
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/drawer/style/token.scss' as *;
 
-@drawer-prefix-cls: ~'@{prefix}-drawer';
+$drawer-prefix-cls: string.unquote('#{theme.$prefix}-drawer');
 
-.@{drawer-prefix-cls}-container {
+.#{$drawer-prefix-cls}-container {
   position: fixed;
   inset: 0;
-  z-index: @z-index-drawer;
+  z-index: theme.$z-index-drawer;
 }
 
-.@{drawer-prefix-cls}-mask {
+.#{$drawer-prefix-cls}-mask {
   position: absolute;
   inset: 0;
-  background-color: var(~'@{sd-cssvars-prefix}-color-mask-bg');
+  background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-mask-bg'));
 }
 
-.@{drawer-prefix-cls} {
+.#{$drawer-prefix-cls} {
   position: absolute;
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: auto;
-  line-height: @line-height-base;
-  background-color: var(~'@{sd-cssvars-prefix}-color-bg-3');
+  line-height: theme.$line-height-base;
+  background-color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-bg-3'));
 
   &-header {
     display: flex;
@@ -30,22 +33,22 @@
     align-items: center;
     box-sizing: border-box;
     width: 100%;
-    height: @drawer-size-header-height;
-    padding: 0 @drawer-padding-horizontal;
-    border-bottom: @border-1 solid @drawer-color-border;
+    height: $drawer-size-header-height;
+    padding: 0 $drawer-padding-horizontal;
+    border-bottom: global.$border-1 solid $drawer-color-border;
 
-    .@{drawer-prefix-cls}-title {
+    .#{$drawer-prefix-cls}-title {
       margin-right: auto;
-      color: @drawer-color-header-text;
-      font-weight: @drawer-font-header-weight;
-      font-size: @drawer-font-header-size;
+      color: $drawer-color-header-text;
+      font-weight: $drawer-font-header-weight;
+      font-size: $drawer-font-header-size;
       text-align: left;
     }
 
-    .@{drawer-prefix-cls}-close-btn {
+    .#{$drawer-prefix-cls}-close-btn {
       margin-left: 8px;
-      color: @drawer-color-header-text;
-      font-size: @drawer-font-size-close-icon;
+      color: $drawer-color-header-text;
+      font-size: $drawer-font-size-close-icon;
       cursor: pointer;
     }
   }
@@ -53,12 +56,12 @@
   &-footer {
     flex-shrink: 0;
     box-sizing: border-box;
-    padding: @drawer-padding-footer-vertical @drawer-padding-horizontal;
+    padding: $drawer-padding-footer-vertical $drawer-padding-horizontal;
     text-align: right;
-    border-top: @border-1 solid @drawer-color-border;
+    border-top: global.$border-1 solid $drawer-color-border;
 
-    > .@{prefix}-btn {
-      margin-left: @drawer-margin-footer-button-left;
+    > .#{theme.$prefix}-btn {
+      margin-left: $drawer-margin-footer-button-left;
     }
   }
 
@@ -67,16 +70,16 @@
     flex: 1;
     box-sizing: border-box;
     height: 100%;
-    padding: @drawer-padding-content-vertical @drawer-padding-horizontal;
+    padding: $drawer-padding-content-vertical $drawer-padding-horizontal;
     overflow: auto;
-    color: @drawer-color-content-text;
+    color: $drawer-color-content-text;
   }
 }
 
-.@{drawer-prefix-cls}-penetrable {
+.#{$drawer-prefix-cls}-penetrable {
   pointer-events: none;
 
-  .@{drawer-prefix-cls} {
+  .#{$drawer-prefix-cls} {
     pointer-events: auto;
   }
 }
@@ -93,7 +96,7 @@
 
 .fade-drawer-enter-active,
 .fade-drawer-appear-active {
-  transition: opacity @transition-duration-3 @transition-timing-function-standard;
+  transition: opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .fade-drawer-leave-from {
@@ -105,7 +108,7 @@
 }
 
 .fade-drawer-leave-active {
-  transition: opacity @transition-duration-3 @transition-timing-function-standard;
+  transition: opacity theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-left-drawer-enter-from,
@@ -120,7 +123,7 @@
 
 .slide-left-drawer-enter-active,
 .slide-left-drawer-appear-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-left-drawer-leave-from {
@@ -132,7 +135,7 @@
 }
 
 .slide-left-drawer-leave-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-right-drawer-enter-from,
@@ -147,7 +150,7 @@
 
 .slide-right-drawer-enter-active,
 .slide-right-drawer-appear-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-right-drawer-leave-from {
@@ -159,7 +162,7 @@
 }
 
 .slide-right-drawer-leave-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-top-drawer-enter,
@@ -179,7 +182,7 @@
 
 .slide-top-drawer-enter-active,
 .slide-top-drawer-appear-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-top-drawer-leave-from {
@@ -191,7 +194,7 @@
 }
 
 .slide-top-drawer-leave-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-bottom-drawer-enter-from,
@@ -206,7 +209,7 @@
 
 .slide-bottom-drawer-enter-active,
 .slide-bottom-drawer-appear-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }
 
 .slide-bottom-drawer-leave-from {
@@ -218,5 +221,5 @@
 }
 
 .slide-bottom-drawer-leave-active {
-  transition: transform @transition-duration-3 @transition-timing-function-standard;
+  transition: transform theme.$transition-duration-3 theme.$transition-timing-function-standard;
 }

package/es/drawer/style/token.scss

@@ -0,0 +1,31 @@
+@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 *;
+
+$drawer-size-header-height: global.$size-12;
+
+$drawer-margin-footer-button-left: global.$spacing-6;
+
+$drawer-font-header-size: global.$font-size-title-1;
+
+$drawer-padding-horizontal: global.$spacing-7;
+
+$drawer-padding-footer-vertical: global.$spacing-7;
+
+$drawer-padding-content-vertical: global.$spacing-6;
+
+$drawer-font-header-weight: global.$font-weight-500;
+
+$drawer-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$drawer-color-header-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$drawer-color-content-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$drawer-position-close-icon-right: global.$spacing-7;
+
+$drawer-font-size-close-icon: global.$size-3;

package/es/dropdown/style/index.css

@@ -63,8 +63,7 @@
 .sd-dropdown-option-has-suffix {
   justify-content: space-between;
 }
-.sd-dropdown-option-active,
-.sd-dropdown-option:not(.sd-dropdown-option-disabled):hover {
+.sd-dropdown-option-active, .sd-dropdown-option:not(.sd-dropdown-option-disabled):hover {
   color: var(--color-text-1);
   background-color: var(--color-fill-2);
   transition: all 0.1s cubic-bezier(0, 0, 1, 1);
@@ -105,4 +104,4 @@
 }
 .sd-dropdown-footer {
   border-top: 1px solid var(--color-fill-3);
-}
+}

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

@@ -1,4 +1,4 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../trigger/style';
 import '../../scrollbar/style';
-import './index.less';
+import './index.scss';

package/es/dropdown/style/index.js

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

package/es/dropdown/style/index.scss

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

package/es/dropdown/style/token.scss

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

package/es/ellipsis/style/index.css

@@ -23,8 +23,8 @@
 }
 .sd-ellipsis--single-line {
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .sd-ellipsis-content {
   display: inline;
@@ -40,4 +40,4 @@
 }
 .sd-ellipsis--expanded {
   white-space: normal;
-}
+}

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

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

package/es/ellipsis/style/index.js

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

package/es/ellipsis/style/{index.less → index.scss}

@@ -1,15 +1,16 @@
-@import url('./token.less');
+@use '@style/theme/index.scss' as theme;
+@use '@components/ellipsis/style/token.scss' as *;
 
-.@{prefix}-ellipsis {
+.#{theme.$prefix}-ellipsis {
   display: inline-block;
-  max-width: @ellipsis-max-width;
-  color: @ellipsis-color-text;
+  max-width: $ellipsis-max-width;
+  color: $ellipsis-color-text;
   vertical-align: bottom;
 
   &--single-line {
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
+    text-overflow: ellipsis;
   }
 
   &-content {

package/es/ellipsis/style/token.scss

@@ -0,0 +1,5 @@
+@use '@style/theme/index.scss' as *;
+
+$ellipsis-max-width: 100%;
+
+$ellipsis-color-text: inherit;

package/es/empty/style/index.css

@@ -33,4 +33,4 @@
 .sd-empty .sd-empty-description {
   color: rgb(var(--gray-5));
   font-size: 14px;
-}
+}

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

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

package/es/empty/style/index.js

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

package/es/empty/style/index.scss

@@ -0,0 +1,28 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/empty/style/token.scss' as *;
+
+$empty-prefix-cls: string.unquote('#{theme.$prefix}-empty');
+
+.#{$empty-prefix-cls} {
+  box-sizing: border-box;
+  width: 100%;
+  padding: $empty-spacing-padding 0;
+  text-align: center;
+
+  &-image {
+    margin-bottom: $empty-spacing-image-margin-bottom;
+    color: $empty-color-icon;
+    font-size: $empty-font-size-image;
+    line-height: 1;
+
+    img {
+      height: $empty-size-img-height;
+    }
+  }
+
+  & &-description {
+    color: $empty-color-text;
+    font-size: $empty-font-size-text;
+  }
+}

package/es/empty/style/token.scss

@@ -0,0 +1,21 @@
+@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 *;
+
+$empty-spacing-padding: global.$spacing-5;
+
+$empty-color-text: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-5')));
+
+$empty-font-size-image: global.$size-12;
+
+$empty-spacing-image-margin-bottom: global.$spacing-2;
+
+$empty-size-img-height: global.$size-20;
+
+$empty-color-icon: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gray-5')));
+
+$empty-font-size-text: global.$font-size-body-3;