@sdata/web-vue 1.6.0 → 1.7.0

package/es/link/style/index.scss

@@ -0,0 +1,123 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/link/style/token.scss' as *;
+
+$link-prefix-cls: string.unquote('#{theme.$prefix}-link');
+
+.#{$link-prefix-cls} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: $link-padding-vertical $link-padding-horizontal;
+  color: $link-color-text;
+  font-size: $link-font-size;
+  line-height: $link-line-height;
+  text-decoration: none;
+  background-color: global.$color-transparent;
+  border-radius: $link-border-radius;
+  cursor: pointer;
+  transition: all theme.$transition-duration-1 theme.$transition-timing-function-linear;
+
+  &:hover {
+    color: $link-color-text_hover;
+    background-color: $link-color-bg_hover;
+  }
+
+  &:active {
+    color: $link-color-text_active;
+    background-color: $link-color-bg_active;
+    transition: none;
+  }
+
+  &#{&}-hoverless {
+    display: inline;
+    padding: 0;
+    background-color: unset;
+
+    &:active,
+    &:hover {
+      background-color: unset;
+    }
+  }
+
+  &#{&}-disabled {
+    color: $link-color-text_disabled;
+    background: none;
+    cursor: not-allowed;
+  }
+
+  &#{&}-loading {
+    color: $link-color-text_loading;
+    background: none;
+    cursor: default;
+  }
+
+  // 不同状态
+  &-status-success {
+    color: $link-color-text_success;
+
+    &:hover {
+      color: $link-color-text_success_hover;
+    }
+
+    &:active {
+      color: $link-color-text_success_active;
+    }
+  }
+
+  &-status-success#{&}-disabled {
+    color: $link-color-text_success_disabled;
+  }
+
+  &-status-success#{&}-loading {
+    color: $link-color-text_success_loading;
+  }
+
+  &-status-danger {
+    color: $link-color-text_error;
+
+    &:hover {
+      color: $link-color-text_error_hover;
+    }
+
+    &:active {
+      color: $link-color-text_error_active;
+    }
+  }
+
+  &-status-danger#{&}-disabled {
+    color: $link-color-text_error_disabled;
+  }
+
+  &-status-danger#{&}-loading {
+    color: $link-color-text_error_loading;
+  }
+
+  &-status-warning {
+    color: $link-color-text_warning;
+
+    &:hover {
+      color: $link-color-text_warning_hover;
+    }
+
+    &:active {
+      color: $link-color-text_warning_active;
+    }
+  }
+
+  &-status-warning#{&}-disabled {
+    color: $link-color-text_warning_disabled;
+  }
+
+  &-status-warning#{&}-loading {
+    color: $link-color-text_warning_loading;
+  }
+
+  // 链接图标
+  &-icon {
+    margin-right: $link-margin-icon-right;
+    font-size: $link-size-icon;
+    vertical-align: middle;
+  }
+}

package/es/link/style/token.scss

@@ -0,0 +1,77 @@
+@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 *;
+
+$link-font-size: global.$font-size-body-3;
+
+$link-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$link-color-bg_active: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$link-padding-horizontal: global.$spacing-2;
+
+$link-line-height: $line-height-base;
+
+$link-color-text: global.$color-link-6;
+
+$link-color-text_hover: $link-color-text;
+
+$link-color-text_active: $link-color-text;
+
+$link-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-link-light-3'));
+
+$link-color-text_loading: var(string.unquote('#{global.$sd-cssvars-prefix}-color-link-light-3'));
+
+$link-color-text_success: global.$color-success-6;
+
+$link-color-text_success_hover: $link-color-text_success;
+
+$link-color-text_success_active: $link-color-text_success;
+
+$link-color-text_success_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-success-light-3')
+);
+
+$link-color-text_success_loading: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-success-light-3')
+);
+
+$link-color-text_error: global.$color-danger-6;
+
+$link-color-text_error_active: $link-color-text_error;
+
+$link-color-text_error_hover: $link-color-text_error;
+
+$link-color-text_error_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-3')
+);
+
+$link-color-text_error_loading: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-danger-light-3')
+);
+
+$link-color-text_warning: global.$color-warning-6;
+
+$link-color-text_warning_hover: $link-color-text_warning;
+
+$link-color-text_warning_active: $link-color-text_warning;
+
+$link-color-text_warning_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-warning-light-2')
+);
+
+$link-color-text_warning_loading: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-warning-light-2')
+);
+
+$link-margin-icon-right: global.$spacing-3;
+
+$link-padding-vertical: 1px;
+
+$link-size-icon: global.$size-3;
+
+$link-border-radius: global.$radius-small;

package/es/list/style/index.css

@@ -70,8 +70,7 @@
 .sd-list-bordered {
   border: 1px solid var(--color-neutral-3);
 }
-.sd-list-split .sd-list-header,
-.sd-list-split .sd-list-item:not(:last-child) {
+.sd-list-split .sd-list-header, .sd-list-split .sd-list-item:not(:last-child) {
   border-bottom: 1px solid var(--color-neutral-3);
 }
 .sd-list-split .sd-list-footer {
@@ -145,7 +144,7 @@
   height: 0;
   overflow: hidden;
   visibility: hidden;
-  content: '';
+  content: "";
 }
 .sd-list-scroll-loading {
   display: flex;
@@ -160,4 +159,4 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-}
+}

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

@@ -1,7 +1,7 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../pagination/style';
 import '../../spin/style';
 import '../../grid/style';
 import '../../empty/style';
 import '../../scrollbar/style';
-import './index.less';
+import './index.scss';

package/es/list/style/index.js

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

package/es/list/style/index.scss

@@ -0,0 +1,228 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@components/list/style/token.scss' as *;
+
+$list-prefix-cls: string.unquote('#{theme.$prefix}-list');
+
+$__less-vars: (
+  'list-action-gap': $list-action-gap,
+  'list-action-margin-top': $list-action-margin-top,
+  'list-border-color': $list-border-color,
+  'list-border-radius': $list-border-radius,
+  'list-border-width': $list-border-width,
+  'list-color-bg-item-hover': $list-color-bg-item-hover,
+  'list-color-text': $list-color-text,
+  'list-color-text-header': $list-color-text-header,
+  'list-font-size': $list-font-size,
+  'list-font-size-header': $list-font-size-header,
+  'list-font-weight-header': $list-font-weight-header,
+  'list-line-height': $list-line-height,
+  'list-line-height-header': $list-line-height-header,
+  'list-meta-color-title': $list-meta-color-title,
+  'list-meta-font-weight-title': $list-meta-font-weight-title,
+  'list-meta-margin-bottom-title': $list-meta-margin-bottom-title,
+  'list-meta-margin-right-avatar': $list-meta-margin-right-avatar,
+  'list-meta-padding-horizontal': $list-meta-padding-horizontal,
+  'list-meta-padding-vertical': $list-meta-padding-vertical,
+  'list-mete-color-description': $list-mete-color-description,
+  'list-pagination-margin-top': $list-pagination-margin-top,
+  'list-size-small-padding-vertical-header': $list-size-small-padding-vertical-header,
+  'list-size-small-padding-horizontal-header': $list-size-small-padding-horizontal-header,
+  'list-size-small-padding-vertical-item': $list-size-small-padding-vertical-item,
+  'list-size-small-padding-horizontal-item': $list-size-small-padding-horizontal-item,
+  'list-size-medium-padding-vertical-header': $list-size-medium-padding-vertical-header,
+  'list-size-medium-padding-horizontal-header': $list-size-medium-padding-horizontal-header,
+  'list-size-medium-padding-vertical-item': $list-size-medium-padding-vertical-item,
+  'list-size-medium-padding-horizontal-item': $list-size-medium-padding-horizontal-item,
+  'list-size-large-padding-vertical-header': $list-size-large-padding-vertical-header,
+  'list-size-large-padding-horizontal-header': $list-size-large-padding-horizontal-header,
+  'list-size-large-padding-vertical-item': $list-size-large-padding-vertical-item,
+  'list-size-large-padding-horizontal-item': $list-size-large-padding-horizontal-item,
+  'prefix': theme.$prefix,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+.#{$list-prefix-cls} {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100%;
+  overflow-y: auto;
+  color: $list-color-text;
+  font-size: $list-font-size;
+  line-height: $list-line-height;
+  border-radius: $list-border-radius;
+
+  &-wrapper {
+    overflow: hidden;
+
+    .#{$list-prefix-cls}-spin {
+      display: block;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+
+  &-content {
+    overflow: hidden;
+  }
+
+  @mixin size($size) {
+    &-#{$size} {
+      $ref-padding-vertical-header: string.unquote('list-size-#{$size}-padding-vertical-header');
+      $ref-padding-horizontal-header: string.unquote(
+        'list-size-#{$size}-padding-horizontal-header'
+      );
+      $ref-padding-vertical-item: string.unquote('list-size-#{$size}-padding-vertical-item');
+      $ref-padding-horizontal-item: string.unquote('list-size-#{$size}-padding-horizontal-item');
+
+      .#{$list-prefix-cls}-content-wrapper .#{$list-prefix-cls}-header {
+        padding: less-var($ref-padding-vertical-header) less-var($ref-padding-horizontal-header);
+      }
+
+      // 在存在列表嵌套的时候，通过 > 限定 size 仅对其直接子元素生效，避免影响被嵌套的列表的样式
+      .#{$list-prefix-cls}-content-wrapper .#{$list-prefix-cls}-footer,
+      .#{$list-prefix-cls}-content-wrapper .#{$list-prefix-cls}-content > .#{$list-prefix-cls}-item,
+      .#{$list-prefix-cls}-content-wrapper
+        .#{$list-prefix-cls}-content
+        .#{$list-prefix-cls}-col
+        > .#{$list-prefix-cls}-item,
+      .#{$list-prefix-cls}-content-wrapper
+        .#{$list-prefix-cls}-content.#{$list-prefix-cls}-virtual
+        .#{$list-prefix-cls}-item {
+        padding: less-var($ref-padding-vertical-item) less-var($ref-padding-horizontal-item);
+      }
+    }
+  }
+
+  @mixin border() {
+    &-bordered {
+      border: $list-border-width solid $list-border-color;
+    }
+  }
+
+  @mixin split() {
+    &-split &-header,
+    &-split &-item:not(:last-child) {
+      border-bottom: $list-border-width solid $list-border-color;
+    }
+
+    &-split &-footer {
+      border-top: $list-border-width solid $list-border-color;
+    }
+  }
+
+  @include size(small);
+  @include size(medium);
+  @include size(large);
+  @include border();
+  @include split();
+
+  &-header {
+    color: $list-color-text-header;
+    font-weight: $list-font-weight-header;
+    font-size: $list-font-size-header;
+    line-height: $list-line-height-header;
+  }
+
+  &-item {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 100%;
+    overflow: hidden;
+
+    &-main {
+      flex: 1;
+
+      .#{$list-prefix-cls}-item-action:not(:first-child) {
+        margin-top: $list-action-margin-top;
+      }
+    }
+
+    &-meta {
+      display: flex;
+      align-items: center;
+      padding: $list-meta-padding-vertical $list-meta-padding-horizontal;
+
+      &-avatar {
+        display: flex;
+
+        &:not(:last-child) {
+          margin-right: $list-meta-margin-right-avatar;
+        }
+      }
+
+      &-title {
+        color: $list-meta-color-title;
+        font-weight: $list-meta-font-weight-title;
+
+        &:not(:last-child) {
+          margin-bottom: $list-meta-margin-bottom-title;
+        }
+      }
+
+      &-description {
+        color: $list-mete-color-description;
+      }
+    }
+
+    &-action {
+      display: flex;
+      flex-wrap: nowrap;
+      align-self: center;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      > li {
+        display: inline-block;
+        cursor: pointer;
+
+        &:not(:last-child) {
+          margin-right: $list-action-gap;
+        }
+      }
+    }
+  }
+
+  &-hover &-item:hover {
+    background-color: $list-color-bg-item-hover;
+  }
+
+  &-pagination {
+    float: right;
+    margin-top: $list-pagination-margin-top;
+
+    &::after {
+      display: block;
+      clear: both;
+      height: 0;
+      overflow: hidden;
+      visibility: hidden;
+      content: '';
+    }
+  }
+
+  &-scroll-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-content {
+    flex: auto;
+
+    .#{theme.$prefix}-empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+    }
+  }
+}

package/es/list/style/token.scss

@@ -0,0 +1,61 @@
+@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 *;
+
+$list-border-width: 1px;
+$list-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+$list-border-radius: global.$radius-medium;
+
+$list-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$list-font-size: global.$font-size-body-3;
+$list-line-height: $line-height-base;
+
+$list-color-text-header: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$list-color-bg-item-hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+$list-font-size-header: global.$font-size-title-1;
+$list-font-weight-header: global.$font-weight-500;
+$list-line-height-header: 1.5;
+
+/**********************************************
+ * size:  small / default / large
+ **********************************************/
+$list-size-small-padding-vertical-header: global.$spacing-4;
+$list-size-small-padding-horizontal-header: global.$spacing-8;
+$list-size-small-padding-vertical-item: 9px;
+$list-size-small-padding-horizontal-item: global.$spacing-8;
+
+$list-size-default-padding-vertical-header: global.$spacing-6;
+$list-size-default-padding-horizontal-header: global.$spacing-8;
+$list-size-default-padding-vertical-item: 13px;
+$list-size-default-padding-horizontal-item: global.$spacing-8;
+
+$list-size-large-padding-vertical-header: global.$spacing-7;
+$list-size-large-padding-horizontal-header: global.$spacing-8;
+$list-size-large-padding-vertical-item: 17px;
+$list-size-large-padding-horizontal-item: global.$spacing-8;
+
+// meta
+$list-meta-font-weight-title: global.$font-weight-500;
+$list-meta-color-title: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$list-mete-color-description: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$list-meta-margin-right-avatar: global.$spacing-7;
+$list-meta-margin-bottom-title: global.$spacing-1;
+$list-meta-padding-horizontal: global.$spacing-none;
+$list-meta-padding-vertical: global.$spacing-2;
+
+// actions
+$list-action-gap: global.$spacing-8;
+$list-action-margin-top: global.$spacing-2;
+
+// pagination
+$list-pagination-margin-top: global.$spacing-9;
+
+// vue覆盖token
+$list-size-medium-padding-vertical-header: $list-size-default-padding-vertical-header;
+$list-size-medium-padding-horizontal-header: $list-size-default-padding-horizontal-header;
+$list-size-medium-padding-vertical-item: $list-size-default-padding-vertical-item;
+$list-size-medium-padding-horizontal-item: $list-size-default-padding-horizontal-item;

package/es/mention/style/index.css

@@ -27,4 +27,4 @@
   overflow: auto;
   visibility: hidden;
   pointer-events: none;
-}
+}

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

@@ -1,5 +1,5 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../input/style';
 import '../../textarea/style';
 import '../../select/style';
-import './index.less';
+import './index.scss';

package/es/mention/style/index.js

@@ -1,3 +1,3 @@
 import "../../textarea/style/index.js";
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

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

@@ -1,8 +1,10 @@
-@import url('./token.less');
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/mention/style/token.scss' as *;
 
-@mention-prefix-cls: ~'@{prefix}-mention';
+$mention-prefix-cls: string.unquote('#{theme.$prefix}-mention');
 
-.@{mention-prefix-cls} {
+.#{$mention-prefix-cls} {
   position: relative;
   display: inline-block;
   box-sizing: border-box;

package/es/mention/style/token.scss

@@ -0,0 +1,14 @@
+@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 *;
+
+$mentions-padding-horizontal: global.$spacing-6;
+
+$mentions-padding-vertical: global.$spacing-2;
+
+$mentions-font-size: global.$font-size-body-3;
+
+$mentions-line-height: $line-height-base;

package/es/menu/base-menu.vue.d.ts

@@ -192,8 +192,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     mode: "horizontal" | "vertical" | "pop" | "popButton";
     popupMaxHeight: number | boolean;
     accordion: boolean;
-    collapsed: boolean;
     theme: "dark" | "light";
+    collapsed: boolean;
     defaultCollapsed: boolean;
     autoScrollIntoView: boolean;
     inTrigger: boolean;

package/es/menu/menu.d.ts

@@ -208,8 +208,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         mode: "horizontal" | "vertical" | "pop" | "popButton";
         popupMaxHeight: number | boolean;
         accordion: boolean;
-        collapsed: boolean;
         theme: "dark" | "light";
+        collapsed: boolean;
         defaultCollapsed: boolean;
         autoScrollIntoView: boolean;
         inTrigger: boolean;