@sdata/web-vue 1.6.0 → 1.7.0

package/es/transfer/style/index.scss

@@ -0,0 +1,298 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/transfer/style/token.scss' as *;
+@use '@style/mixins/index.scss' as *;
+
+$transfer-prefix-cls: string.unquote('#{theme.$prefix}-transfer');
+
+.#{$transfer-prefix-cls} {
+  display: flex;
+  align-items: center;
+
+  &-view {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: $transfer-width;
+    height: $transfer-height;
+    border: $transfer-border-width solid $transfer-border-color;
+    border-radius: $transfer-border-radius;
+
+    &-search {
+      padding: $transfer-search-padding-top $transfer-search-padding-right
+        $transfer-search-padding-bottom $transfer-search-padding-left;
+    }
+
+    &-list {
+      flex: 1;
+    }
+
+    &-custom-list {
+      flex: 1;
+      overflow: auto;
+    }
+
+    &-header {
+      display: flex;
+      align-items: center;
+      padding: 0 $transfer-item-padding-horizontal;
+    }
+
+    &-header > *:first-child {
+      flex: 1;
+
+      @include text-ellipsis();
+
+      &:not(:last-child) {
+        margin-right: 8px;
+      }
+    }
+
+    &-header {
+      height: $transfer-height-title;
+      color: $transfer-color-text-header;
+      font-weight: $transfer-font-weight-header;
+      font-size: $transfer-font-size-header;
+      line-height: $transfer-height-title;
+      background-color: $transfer-color-bg-header;
+
+      &-title {
+        display: flex;
+        align-items: center;
+
+        .#{theme.$prefix}-checkbox {
+          @include text-ellipsis();
+
+          font-size: inherit;
+
+          &-text {
+            color: inherit;
+          }
+          // fix the title in checkbox-label ellipsis not work
+          &-label {
+            @include text-ellipsis();
+          }
+        }
+        // fix simple mode the title  ellipsis not work
+        &-simple {
+          @include text-ellipsis();
+        }
+      }
+
+      &-clear-btn {
+        color: $transfer-color-icon;
+        font-size: $transfer-font-size-icon;
+        cursor: pointer;
+
+        &:hover::before {
+          background-color: $transfer-color-bg-icon;
+        }
+      }
+
+      &-count {
+        margin-right: 2px;
+        color: $transfer-color-text-header-unit;
+        font-weight: normal;
+        font-size: $transfer-font-size-header-unit;
+      }
+    }
+
+    &-body {
+      flex: 1 1 auto;
+      overflow: hidden;
+
+      .#{$transfer-prefix-cls}-view-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+    }
+
+    .#{theme.$prefix}-scrollbar {
+      height: 100%;
+
+      &-container {
+        height: 100%;
+        overflow: auto;
+      }
+    }
+
+    .#{theme.$prefix}-list {
+      border-radius: 0;
+
+      &-footer {
+        position: relative;
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        height: $transfer-height-footer;
+        padding: 0 $transfer-padding-horizontal-footer;
+      }
+
+      .#{theme.$prefix}-pagination {
+        position: absolute;
+        top: 50%;
+        right: $transfer-padding-horizontal-footer;
+        margin: 0;
+        transform: translateY(-50%);
+
+        &-jumper-input {
+          width: $transfer-pagination-width-input;
+        }
+
+        &-jumper-separator {
+          padding: 0 $transfer-pagination-gap-separator;
+        }
+      }
+    }
+
+    .#{theme.$prefix}-checkbox {
+      padding-left: 6px;
+
+      &-wrapper {
+        display: inline;
+      }
+
+      .#{theme.$prefix}-icon-hover:hover::before {
+        background-color: $transfer-color-bg-icon;
+      }
+    }
+  }
+
+  &-list-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: $transfer-item-height;
+    padding: 0 $transfer-item-padding-horizontal;
+    color: $transfer-item-color_default;
+    line-height: $transfer-item-height;
+    list-style: none;
+    background-color: $transfer-item-color-bg_default;
+    cursor: default;
+
+    &-content {
+      font-size: $transfer-item-font-size;
+
+      @include text-ellipsis();
+    }
+
+    &-checkbox {
+      .#{theme.$prefix}-checkbox-label {
+        @include text-ellipsis();
+      }
+    }
+
+    &-disabled {
+      color: $transfer-item-color_disabled;
+      background-color: $transfer-item-color-bg_disabled;
+      cursor: not-allowed;
+    }
+
+    &:not(#{&}-disabled):hover {
+      color: $transfer-item-color_hover;
+      background-color: $transfer-item-color-bg_hover;
+    }
+
+    .#{theme.$prefix}-checkbox {
+      width: 100%;
+
+      &-text {
+        color: inherit;
+      }
+    }
+
+    &-remove-btn {
+      margin-left: auto;
+      color: $transfer-color-icon;
+      font-size: $transfer-font-size-icon;
+      cursor: pointer;
+
+      &:hover::before {
+        background-color: $transfer-color-bg-icon;
+      }
+    }
+
+    // 拖动样式
+    &-draggable::before {
+      position: absolute;
+      right: 0;
+      left: 0;
+      display: block;
+      height: $transfer-item-draggable-height-gap;
+      border-radius: ($transfer-item-draggable-height-gap * 0.5);
+      content: '';
+    }
+
+    &-gap-bottom::before {
+      bottom: -$transfer-item-draggable-height-gap;
+      background-color: $transfer-item-draggable-color-bg-gap;
+    }
+
+    &-gap-top::before {
+      top: -$transfer-item-draggable-height-gap;
+      background-color: $transfer-item-draggable-color-bg-gap;
+    }
+
+    &-dragging {
+      color: $transfer-item-draggable-color_dragging !important;
+      background-color: $transfer-item-draggable-color-bg_dragging !important;
+    }
+
+    &-dragged {
+      animation: #{theme.$prefix}-transfer-drag-item-blink 0.4s;
+      animation-timing-function: theme.$transition-timing-function-linear;
+    }
+  }
+
+  &-operations {
+    padding: 0 $transfer-operation-padding-horizontal;
+
+    .#{theme.$prefix}-btn {
+      display: block;
+
+      &:last-child {
+        margin-top: $transfer-operation-gap-buttons;
+      }
+    }
+
+    &-words {
+      .#{theme.$prefix}-btn {
+        width: 100%;
+        padding: 0 12px;
+        text-align: left;
+      }
+    }
+  }
+
+  &-simple {
+    .#{$transfer-prefix-cls}-view-source {
+      border-right: none;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    .#{$transfer-prefix-cls}-view-target {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  &-disabled {
+    .#{$transfer-prefix-cls}-view-header {
+      color: $transfer-item-color_disabled;
+    }
+  }
+}
+
+@keyframes #{theme.$prefix}-transfer-drag-item-blink {
+  0% {
+    background-color: $transfer-item-draggable-color_blink;
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}

package/es/transfer/style/token.scss

@@ -0,0 +1,91 @@
+@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 *;
+
+$transfer-width: 200px;
+
+$transfer-height: 224px;
+
+$transfer-height-title: global.$size-10;
+
+$transfer-height-footer: global.$size-10;
+
+$transfer-padding-horizontal-footer: global.$spacing-4;
+
+$transfer-border-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$transfer-border-width: global.$border-1;
+
+$transfer-border-radius: global.$radius-small;
+
+$transfer-font-size-header: global.$font-size-body-3;
+
+$transfer-font-size-header-unit: global.$font-size-body-1;
+
+$transfer-font-size-icon: global.$font-size-body-1;
+
+$transfer-font-weight-header: global.$font-weight-500;
+
+$transfer-color-text-header: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$transfer-color-text-header-unit: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+$transfer-color-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$transfer-color-bg-icon: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+
+$transfer-color-bg-header: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+
+$transfer-search-padding-left: 12px;
+
+$transfer-search-padding-right: 12px;
+
+$transfer-search-padding-top: 8px;
+
+$transfer-search-padding-bottom: 4px;
+
+$transfer-item-color-bg_default: global.$color-transparent;
+
+$transfer-item-color-bg_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+$transfer-item-color-bg_disabled: global.$color-transparent;
+
+$transfer-item-color_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$transfer-item-color_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$transfer-item-color_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+$transfer-item-height: global.$size-9;
+
+$transfer-item-padding-horizontal: global.$spacing-5;
+
+$transfer-item-font-size: global.$font-size-body-3;
+
+$transfer-item-draggable-height-gap: 2px;
+
+$transfer-item-draggable-color-bg-gap: global.$color-primary-6;
+
+$transfer-item-draggable-color-bg_dragging: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1')
+);
+
+$transfer-item-draggable-color_dragging: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$transfer-item-draggable-color_blink: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+
+$transfer-pagination-width-input: global.$size-6;
+
+$transfer-pagination-gap-separator: global.$spacing-4;
+
+$transfer-operation-padding-horizontal: global.$spacing-8;
+
+$transfer-operation-gap-buttons: global.$spacing-6;

package/es/tree/style/index.css

@@ -20,6 +20,7 @@
   width: 16px;
   height: 16px;
 }
+
 .sd-tree-node-switcher {
   position: relative;
   display: flex;
@@ -42,8 +43,7 @@
   transform: rotate(-90deg);
   transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
-.sd-tree-node-expanded .sd-tree-node-switcher-icon svg,
-.sd-tree-node-is-leaf .sd-tree-node-switcher-icon svg {
+.sd-tree-node-expanded .sd-tree-node-switcher-icon svg, .sd-tree-node-is-leaf .sd-tree-node-switcher-icon svg {
   transform: rotate(0);
 }
 .sd-tree-node-drag-icon {
@@ -61,8 +61,7 @@
 .sd-tree-node .sd-icon-loading {
   color: rgb(var(--primary-6));
 }
-.sd-tree-node-minus-icon,
-.sd-tree-node-plus-icon {
+.sd-tree-node-minus-icon, .sd-tree-node-plus-icon {
   position: relative;
   display: block;
   width: 14px;
@@ -71,8 +70,7 @@
   border-radius: var(--border-radius-small);
   cursor: pointer;
 }
-.sd-tree-node-minus-icon::after,
-.sd-tree-node-plus-icon::after {
+.sd-tree-node-minus-icon::after, .sd-tree-node-plus-icon::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -84,7 +82,7 @@
   color: var(--color-text-2);
   background-color: var(--color-text-2);
   border-radius: 0.5px;
-  content: '';
+  content: "";
 }
 .sd-tree-node-plus-icon::before {
   position: absolute;
@@ -98,8 +96,9 @@
   color: var(--color-text-2);
   background-color: var(--color-text-2);
   border-radius: 0.5px;
-  content: '';
+  content: "";
 }
+
 /******* tree ***********/
 .sd-tree {
   color: var(--color-text-1);
@@ -119,14 +118,12 @@
   line-height: 1.5715;
   cursor: pointer;
 }
-.sd-tree-node-selected .sd-tree-node-title,
-.sd-tree-node-selected .sd-tree-node-title:hover {
+.sd-tree-node-selected .sd-tree-node-title, .sd-tree-node-selected .sd-tree-node-title:hover {
   color: rgb(var(--primary-6));
   transition: color 0.2s cubic-bezier(0, 0, 1, 1);
 }
 .sd-tree-node-disabled-selectable .sd-tree-node-title,
-.sd-tree-node-disabled .sd-tree-node-title,
-.sd-tree-node-disabled-selectable .sd-tree-node-title:hover,
+.sd-tree-node-disabled-selectable .sd-tree-node-title:hover, .sd-tree-node-disabled .sd-tree-node-title,
 .sd-tree-node-disabled .sd-tree-node-title:hover {
   color: var(--color-text-4);
   background: none;
@@ -185,7 +182,7 @@
   display: block;
   height: 2px;
   border-radius: 1px;
-  content: '';
+  content: "";
 }
 .sd-tree-node-title-gap-bottom::before {
   top: unset;
@@ -199,8 +196,7 @@
   color: var(--color-text-1);
   background-color: var(--color-primary-light-1);
 }
-.sd-tree-node-title-dragging,
-.sd-tree-node-title-dragging:hover {
+.sd-tree-node-title-dragging, .sd-tree-node-title-dragging:hover {
   color: var(--color-text-4);
   background-color: var(--color-fill-1);
 }
@@ -224,7 +220,7 @@
   width: 1px;
   border-left: 1px solid var(--color-neutral-3);
   transform: translateX(-50%);
-  content: '';
+  content: "";
   top: -5px;
   bottom: -5px;
 }
@@ -235,13 +231,14 @@
   width: 1px;
   border-left: 1px solid var(--color-neutral-3);
   transform: translateX(50%);
-  content: '';
+  content: "";
   top: 27px;
   bottom: -5px;
 }
 .sd-tree-show-line .sd-tree-node-indent-block-lineless:before {
   display: none;
 }
+
 /******** size *******/
 .sd-tree-size-mini .sd-tree-node-switcher {
   height: 24px;
@@ -263,6 +260,7 @@
   top: -1px;
   bottom: -1px;
 }
+
 .sd-tree-size-small .sd-tree-node-switcher {
   height: 28px;
 }
@@ -282,6 +280,7 @@
   top: -3px;
   bottom: -3px;
 }
+
 .sd-tree-size-large .sd-tree-node-switcher {
   height: 36px;
 }
@@ -301,7 +300,8 @@
   top: -7px;
   bottom: -7px;
 }
+
 .sd-tree-node-list {
   overflow: hidden;
   transition: height 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
-}
+}

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

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

package/es/tree/style/index.js

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