@sdata/web-vue 1.6.0 → 1.7.0

package/es/tree/style/index.scss

@@ -0,0 +1,433 @@
+@use '@style/mixins/icon-hover.scss' as icon-hover;
+@use '@style/theme/index.scss' as theme;
+@use 'sass:math';
+@use 'sass:string';
+@use '@components/tree/style/token.scss' as *;
+@use '@style/mixins/index.scss' as *;
+
+$tree-prefix-cls: string.unquote('#{theme.$prefix}-tree');
+$tree-node-prefix-cls: string.unquote('#{theme.$prefix}-tree-node');
+
+/******* icon ******/
+
+@include icon-hover.icon-hover(
+  $tree-node-prefix-cls,
+  $tree-size-default-icon-size,
+  $tree-size-expand-icon-bg_hover
+);
+
+@mixin getLinePos($size) {
+  top: ($size * 0.5) + ($tree-showline-size-switcher-icon * 0.5) +
+    $tree-showline-spacing-line-vertical;
+  bottom: math.min(
+    -(
+        ($size * 0.5) - ($tree-showline-size-switcher-icon * 0.5) -
+          $tree-showline-spacing-line-vertical
+      ),
+    0
+  );
+}
+
+@mixin getIndentLinePos($size) {
+  top: $tree-showline-spacing-line-vertical -
+    (($size * 0.5) - ($tree-showline-size-switcher-icon * 0.5));
+  // 计算：距离上一节点的图标和下一节点的图标都是 $tree-showline-spacing-line-vertical
+  bottom: math.min(
+    -(
+        ($size * 0.5) - ($tree-showline-size-switcher-icon * 0.5) -
+          $tree-showline-spacing-line-vertical
+      ),
+    0
+  );
+}
+
+.#{$tree-node-prefix-cls} {
+  &-switcher {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    width: $tree-size-default-icon-size;
+    height: $tree-size-default-line-height;
+    margin-right: $tree-margin-switcher-icon-right;
+    color: $tree-color-switcher-icon;
+    font-size: $tree-size-default-icon-size;
+    cursor: pointer;
+    user-select: none;
+
+    &-icon {
+      position: relative;
+      margin: 0 auto;
+
+      svg {
+        position: relative;
+        transform: rotate(-90deg);
+        transition: transform theme.$transition-duration-2
+          theme.$transition-timing-function-standard;
+      }
+    }
+  }
+
+  &-expanded &-switcher-icon svg,
+  &-is-leaf &-switcher-icon svg {
+    transform: rotate(0);
+  }
+
+  &-drag-icon {
+    margin-left: $tree-spacing-drag-icon-text;
+    color: $tree-color-drag-icon;
+    opacity: 0;
+  }
+
+  // 自定义icon
+  &-custom-icon {
+    margin-right: $tree-margin-custom-icon-right;
+    font-size: inherit;
+    line-height: 1;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .#{theme.$prefix}-icon-loading {
+    color: $tree-color-loading-icon;
+  }
+
+  &-minus-icon,
+  &-plus-icon {
+    position: relative;
+    display: block;
+    width: $tree-showline-size-switcher-icon;
+    height: $tree-showline-size-switcher-icon;
+    background: $tree-showline-color-plus-icon-bg;
+    border-radius: $tree-showline-border-plus-icon-radius;
+    cursor: pointer;
+
+    &::after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: block;
+      width: $tree-showline-size-plus-icon-width;
+      height: $tree-showline-size-plus-icon-stroke;
+      margin-top: -($tree-showline-size-plus-icon-stroke * 0.5);
+      margin-left: -($tree-showline-size-plus-icon-width * 0.5);
+      color: $tree-color-switcher-icon;
+      background-color: $tree-color-switcher-icon;
+      border-radius: 0.5px;
+      content: '';
+    }
+  }
+
+  &-plus-icon::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: $tree-showline-size-plus-icon-stroke;
+    height: $tree-showline-size-plus-icon-width;
+    margin-top: -($tree-showline-size-plus-icon-width * 0.5);
+    margin-left: -($tree-showline-size-plus-icon-stroke * 0.5);
+    color: $tree-color-switcher-icon;
+    background-color: $tree-color-switcher-icon;
+    border-radius: 0.5px;
+    content: '';
+  }
+}
+
+/******* tree ***********/
+.#{$tree-prefix-cls} {
+  color: $tree-color-title-text;
+
+  .#{theme.$prefix}-checkbox {
+    margin-right: $tree-margin-checkbox-right;
+    padding-left: 0;
+    line-height: $tree-size-default-line-height;
+  }
+
+  &-node {
+    position: relative;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding-left: ($tree-size-expand-icon-bg_hover * 0.5) - ($tree-size-default-icon-size * 0.5);
+    color: $tree-color-title-text;
+    line-height: theme.$line-height-base;
+    cursor: pointer;
+
+    &-selected &-title,
+    &-selected &-title:hover {
+      color: $tree-color-title-text_active;
+      transition: color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+    }
+
+    &-disabled-selectable,
+    &-disabled {
+      .#{$tree-node-prefix-cls}-title,
+      .#{$tree-node-prefix-cls}-title:hover {
+        color: $tree-color-title-text_disabled;
+        background: none;
+        cursor: not-allowed;
+      }
+    }
+
+    &-disabled.#{$tree-node-prefix-cls}-selected &-title {
+      color: $tree-color-title-text_active_disabled;
+    }
+  }
+
+  &-node-title-block {
+    flex: 1;
+    box-sizing: content-box;
+
+    .#{$tree-node-prefix-cls}-drag-icon {
+      position: absolute;
+      right: $tree-spacing-drag-icon-right;
+    }
+  }
+
+  &-node-indent {
+    position: relative;
+    flex-shrink: 0;
+    align-self: stretch;
+  }
+
+  &-node-indent-block {
+    position: relative;
+    display: inline-block;
+    width: $tree-size-default-icon-size;
+    height: 100%;
+    margin-right: $tree-margin-switcher-icon-right;
+    vertical-align: top;
+  }
+
+  &-node-draggable {
+    margin-top: $tree-draggable-size-gap-height;
+  }
+
+  &-node-title {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-left: -$tree-padding-title-horizontal;
+    padding: (
+        math.round(
+            (
+              $tree-size-default-line-height - theme.$line-height-base *
+                $tree-size-default-font-size
+            )
+          ) *
+          0.5
+      )
+      0;
+    padding-right: $tree-padding-title-horizontal;
+    padding-left: $tree-padding-title-horizontal;
+    font-size: $tree-size-default-font-size;
+    border-radius: $tree-node-border-radius;
+
+    // overflow: hidden;
+    &:hover {
+      color: $tree-color-title-text_hover;
+      background-color: $tree-color-title-bg_hover;
+
+      .#{$tree-node-prefix-cls}-drag-icon {
+        opacity: 1;
+      }
+    }
+
+    // &-draggable {
+    //   margin-top: $tree-draggable-size-gap-height;
+    // }
+    &-draggable::before {
+      position: absolute;
+      top: -$tree-draggable-size-gap-height;
+      right: 0;
+      left: 0;
+      display: block;
+      height: $tree-draggable-size-gap-height;
+      border-radius: ($tree-draggable-size-gap-height * 0.5);
+      content: '';
+    }
+
+    &-gap-bottom::before {
+      top: unset;
+      bottom: -$tree-draggable-size-gap-height;
+      background-color: $tree-draggable-color-gap-bg;
+    }
+
+    &-gap-top::before {
+      background-color: $tree-draggable-color-gap-bg;
+    }
+
+    &-highlight {
+      color: $tree-color-title-text_highlight;
+      background-color: $tree-color-title-bg_highlight;
+    }
+
+    &-dragging,
+    &-dragging:hover {
+      color: $tree-color-title-text_dragging;
+      background-color: $tree-color-title-bg_dragging;
+    }
+  }
+
+  // show line
+  &-show-line {
+    padding-left: ($tree-size-expand-icon-bg_hover * 0.5) -
+      ($tree-showline-size-switcher-icon * 0.5);
+
+    .#{$tree-prefix-cls}-node-switcher {
+      width: $tree-showline-size-switcher-icon;
+      text-align: center;
+
+      .#{theme.$prefix}-tree-node-icon-hover {
+        width: 100%;
+      }
+    }
+
+    .#{$tree-prefix-cls}-node-indent-block {
+      width: $tree-showline-size-switcher-icon;
+    }
+
+    .#{$tree-prefix-cls}-node-indent-block::before {
+      position: absolute;
+      left: 50%;
+      box-sizing: border-box;
+      width: $tree-showline-size-line-width;
+      border-left: $tree-showline-size-line-width $tree-showline-style-line
+        $tree-showline-color-line-bg;
+      transform: translateX(-50%);
+      content: '';
+
+      @include getIndentLinePos($tree-size-default-line-height);
+    }
+
+    .#{$tree-prefix-cls}-node-is-leaf:not(.#{$tree-prefix-cls}-node-is-tail)
+      .#{$tree-prefix-cls}-node-indent::after {
+      position: absolute;
+      right: -($tree-showline-size-switcher-icon * 0.5);
+      box-sizing: border-box;
+      width: $tree-showline-size-line-width;
+      border-left: $tree-showline-size-line-width $tree-showline-style-line
+        $tree-showline-color-line-bg;
+      transform: translateX(50%);
+      content: '';
+
+      @include getLinePos($tree-size-default-line-height);
+    }
+
+    .#{$tree-prefix-cls}-node-indent-block-lineless:before {
+      display: none;
+    }
+  }
+}
+
+/******** size *******/
+
+.#{$tree-prefix-cls}-size-mini {
+  .#{$tree-prefix-cls}-node-switcher {
+    height: $tree-size-mini-line-height;
+  }
+
+  .#{theme.$prefix}-checkbox {
+    line-height: $tree-size-mini-line-height;
+  }
+
+  .#{$tree-prefix-cls}-node-title {
+    padding-top: (
+      math.round(($tree-size-mini-line-height - 1.667 * $tree-size-mini-font-size)) * 0.5
+    );
+    padding-bottom: (
+      (math.round(($tree-size-mini-line-height - 1.667 * $tree-size-mini-font-size)) * 0.5)
+    );
+    font-size: $tree-size-mini-font-size;
+    line-height: 1.667;
+  }
+
+  .#{$tree-prefix-cls}-node-indent-block::after {
+    @include getLinePos($tree-size-mini-line-height);
+  }
+
+  .#{$tree-prefix-cls}-node-is-leaf:not(.#{$tree-prefix-cls}-node-is-tail)
+    .#{$tree-prefix-cls}-node-indent::before {
+    @include getIndentLinePos($tree-size-mini-line-height);
+  }
+}
+
+.#{$tree-prefix-cls}-size-small {
+  .#{$tree-prefix-cls}-node-switcher {
+    height: $tree-size-small-line-height;
+  }
+
+  .#{theme.$prefix}-checkbox {
+    line-height: $tree-size-small-line-height;
+  }
+
+  .#{$tree-prefix-cls}-node-title {
+    padding-top: (
+      math.round(
+          ($tree-size-small-line-height - theme.$line-height-base * $tree-size-small-font-size)
+        ) *
+        0.5
+    );
+    padding-bottom: (
+      (
+        math.round(
+            ($tree-size-small-line-height - theme.$line-height-base * $tree-size-small-font-size)
+          ) *
+          0.5
+      )
+    );
+    font-size: $tree-size-small-font-size;
+  }
+
+  .#{$tree-prefix-cls}-node-indent-block::after {
+    @include getLinePos($tree-size-small-line-height);
+  }
+
+  .#{$tree-prefix-cls}-node-is-leaf:not(.#{$tree-prefix-cls}-node-is-tail)
+    .#{$tree-prefix-cls}-node-indent::before {
+    @include getIndentLinePos($tree-size-small-line-height);
+  }
+}
+
+.#{$tree-prefix-cls}-size-large {
+  .#{$tree-prefix-cls}-node-switcher {
+    height: $tree-size-large-line-height;
+  }
+
+  .#{theme.$prefix}-checkbox {
+    line-height: $tree-size-large-line-height;
+  }
+
+  .#{$tree-prefix-cls}-node-title {
+    padding-top: (
+      math.round(
+          ($tree-size-large-line-height - theme.$line-height-base * $tree-size-large-font-size)
+        ) *
+        0.5
+    );
+    padding-bottom: (
+      (
+        math.round(
+            ($tree-size-large-line-height - theme.$line-height-base * $tree-size-large-font-size)
+          ) *
+          0.5
+      )
+    );
+    font-size: $tree-size-large-font-size;
+  }
+
+  .#{$tree-prefix-cls}-node-indent-block::after {
+    @include getLinePos($tree-size-large-line-height);
+  }
+
+  .#{$tree-prefix-cls}-node-is-leaf:not(.#{$tree-prefix-cls}-node-is-tail)
+    .#{$tree-prefix-cls}-node-indent::before {
+    @include getIndentLinePos($tree-size-large-line-height);
+  }
+}
+
+.#{$tree-prefix-cls}-node-list {
+  overflow: hidden;
+  transition: height theme.$transition-duration-2 theme.$transition-timing-function-standard;
+}

package/es/tree/style/token.scss

@@ -0,0 +1,99 @@
+@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 *;
+
+$tree-color-title-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$tree-color-title-text_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$tree-color-title-text_active: global.$color-primary-6;
+
+$tree-color-title-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$tree-color-title-text_active_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$tree-color-title-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$tree-color-title-bg_highlight: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+
+$tree-color-title-text_highlight: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$tree-color-title-bg_dragging: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+
+$tree-color-title-text_dragging: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$tree-color-loading-icon: global.$color-primary-6;
+
+$tree-color-switcher-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$tree-color-drag-icon: global.$color-primary-6;
+
+$tree-node-border-radius: global.$radius-small;
+
+$tree-margin-checkbox-right: global.$spacing-5;
+
+$tree-margin-switcher-icon-right: global.$spacing-5;
+
+$tree-margin-custom-icon-right: global.$spacing-5;
+
+$tree-padding-title-horizontal: global.$spacing-2;
+
+$tree-spacing-drag-icon-right: global.$spacing-6;
+
+$tree-spacing-drag-icon-text: global.$spacing-22;
+
+$tree-draggable-color-gap-bg: global.$color-primary-6;
+
+$tree-draggable-size-gap-height: 2px;
+
+$tree-showline-color-line-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$tree-showline-color-plus-icon-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$tree-showline-size-plus-icon-stroke: 2px;
+
+$tree-showline-size-plus-icon-width: 6px;
+
+$tree-showline-size-line-width: global.$border-1;
+
+$tree-showline-style-line: global.$border-solid;
+
+$tree-showline-size-switcher-icon: 14px;
+
+$tree-showline-spacing-line-vertical: global.$spacing-2;
+
+$tree-showline-border-plus-icon-radius: global.$radius-small;
+
+$tree-size-mini-icon-size: global.$size-3;
+
+$tree-size-small-icon-size: global.$size-3;
+
+$tree-size-default-icon-size: global.$size-3;
+
+$tree-size-large-icon-size: global.$size-3;
+
+$tree-size-expand-icon-bg_hover: global.$size-4;
+
+$tree-size-mini-font-size: global.$font-size-body-1;
+
+$tree-size-small-font-size: global.$font-size-body-3;
+
+$tree-size-default-font-size: global.$font-size-body-3;
+
+$tree-size-large-font-size: global.$font-size-body-3;
+
+$tree-size-mini-line-height: global.$size-mini;
+
+$tree-size-small-line-height: global.$size-small;
+
+$tree-size-default-line-height: global.$size-default;
+
+$tree-size-large-line-height: global.$size-large;

package/es/tree-select/style/index.css

@@ -54,4 +54,4 @@
 }
 .sd-tree-select-footer {
   border-top: 1px solid var(--color-fill-3);
-}
+}

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

@@ -1,6 +1,6 @@
-import '../../style/index.less';
-import '../../_components/select-view/style/index.less';
+import '../../style/index.scss';
+import '../../_components/select-view/style/index.scss';
 import '../../empty/style';
 import '../../trigger/style';
 import '../../tree/style';
-import './index.less';
+import './index.scss';

package/es/tree-select/style/index.js

@@ -1,4 +1,4 @@
 import "../../tree/style/index.js";
-import "../../style/index.less";
-import "../../_components/select-view/style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "../../_components/select-view/style/index.scss";
+import "./index.scss";

package/es/tree-select/style/index.scss

@@ -0,0 +1,53 @@
+@use '@components/select/style/token.scss' as selectToken;
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/tree-select/style/token.scss' as *;
+
+$tree-prefix-cls: string.unquote('#{theme.$prefix}-tree');
+$tree-select-prefix-cls: string.unquote('#{theme.$prefix}-tree-select');
+
+// .select-view($tree-select-prefix-cls);
+
+.#{$tree-select-prefix-cls} {
+  &-popup {
+    box-sizing: border-box;
+    padding: $tree-select-padding-popup-vertical 0;
+    background-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+    border: 1px solid selectToken.$select-popup-color-border;
+    border-radius: selectToken.$select-popup-border-radius;
+    box-shadow: selectToken.$select-popup-box-shadow;
+
+    .#{$tree-select-prefix-cls}-tree-wrapper {
+      height: 100%;
+      max-height: selectToken.$select-popup-max-height;
+      padding-right: $tree-select-padding-popup-right;
+      padding-left: $tree-select-padding-popup-left;
+      overflow: auto;
+    }
+
+    .#{$tree-prefix-cls}-node {
+      padding-left: 0;
+    }
+  }
+
+  &-highlight {
+    font-weight: global.$font-weight-500;
+  }
+
+  &-has-header {
+    padding-top: 0;
+  }
+
+  &-header {
+    border-bottom: 1px solid selectToken.$select-popup-color-border;
+  }
+
+  &-has-footer {
+    padding-bottom: 0;
+  }
+
+  &-footer {
+    border-top: 1px solid selectToken.$select-popup-color-border;
+  }
+}

package/es/tree-select/style/token.scss

@@ -0,0 +1,16 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+@forward '@components/_components/select-view/style/token.scss';
+@forward '@components/select/style/token.scss';
+
+@use '@style/theme/index.scss' as *;
+@use '@components/_components/select-view/style/token.scss' as *;
+@use '@components/select/style/token.scss' as *;
+
+$tree-select-padding-popup-left: global.$spacing-5;
+
+$tree-select-padding-popup-right: global.$spacing-2;
+
+$tree-select-padding-popup-vertical: global.$spacing-2;

package/es/trigger/style/index.css

@@ -30,33 +30,25 @@
   width: 8px;
   height: 8px;
   background-color: var(--color-bg-5);
-  content: '';
+  content: "";
 }
-.sd-trigger-popup[trigger-placement='top'] .sd-trigger-arrow,
-.sd-trigger-popup[trigger-placement='tl'] .sd-trigger-arrow,
-.sd-trigger-popup[trigger-placement='tr'] .sd-trigger-arrow {
+.sd-trigger-popup[trigger-placement=top] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=tl] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=tr] .sd-trigger-arrow {
   border-top: none;
   border-left: none;
   border-bottom-right-radius: var(--border-radius-small);
 }
-.sd-trigger-popup[trigger-placement='bottom'] .sd-trigger-arrow,
-.sd-trigger-popup[trigger-placement='bl'] .sd-trigger-arrow,
-.sd-trigger-popup[trigger-placement='br'] .sd-trigger-arrow {
+.sd-trigger-popup[trigger-placement=bottom] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=bl] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=br] .sd-trigger-arrow {
   border-right: none;
   border-bottom: none;
   border-top-left-radius: var(--border-radius-small);
 }
-.sd-trigger-popup[trigger-placement='left'] .sd-trigger-arrow,
-.sd-trigger-popup[trigger-placement='lt'] .sd-trigger-arrow,
-.sd-trigger-popup[trigger-placement='lb'] .sd-trigger-arrow {
+.sd-trigger-popup[trigger-placement=left] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=lt] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=lb] .sd-trigger-arrow {
   border-bottom: none;
   border-left: none;
   border-top-right-radius: var(--border-radius-small);
 }
-.sd-trigger-popup[trigger-placement='right'] .sd-trigger-arrow,
-.sd-trigger-popup[trigger-placement='rt'] .sd-trigger-arrow,
-.sd-trigger-popup[trigger-placement='rb'] .sd-trigger-arrow {
+.sd-trigger-popup[trigger-placement=right] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=rt] .sd-trigger-arrow, .sd-trigger-popup[trigger-placement=rb] .sd-trigger-arrow {
   border-top: none;
   border-right: none;
   border-bottom-left-radius: var(--border-radius-small);
-}
+}

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

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

package/es/trigger/style/index.js

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