@sdata/web-vue 1.5.0 → 1.7.0

package/es/tree/style/index.less

@@ -1,379 +0,0 @@
-@import url('./token.less');
-@import url('../../style/mixins/index.less');
-
-@tree-prefix-cls: ~'@{prefix}-tree';
-@tree-node-prefix-cls: ~'@{prefix}-tree-node';
-
-/******* icon ******/
-
-.icon-hover(@tree-node-prefix-cls, @tree-size-default-icon-size, @tree-size-expand-icon-bg_hover);
-
-.getLinePos(@size) {
-  top: (@size / 2) + (@tree-showline-size-switcher-icon / 2) + @tree-showline-spacing-line-vertical;
-  bottom: min(
-    -((@size / 2) - (@tree-showline-size-switcher-icon / 2) - @tree-showline-spacing-line-vertical),
-    0
-  );
-}
-
-.getIndentLinePos(@size) {
-  top: @tree-showline-spacing-line-vertical -
-    ((@size / 2) - (@tree-showline-size-switcher-icon / 2));
-  // 计算：距离上一节点的图标和下一节点的图标都是 @tree-showline-spacing-line-vertical
-  bottom: min(
-    -((@size / 2) - (@tree-showline-size-switcher-icon / 2) - @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 @transition-duration-2 @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;
-  }
-
-  .@{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 / 2);
-      margin-left: -(@tree-showline-size-plus-icon-width / 2);
-      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 / 2);
-    margin-left: -(@tree-showline-size-plus-icon-stroke / 2);
-    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;
-
-  .@{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 / 2) - (@tree-size-default-icon-size / 2);
-    color: @tree-color-title-text;
-    line-height: @line-height-base;
-    cursor: pointer;
-
-    &-selected &-title,
-    &-selected &-title:hover {
-      color: @tree-color-title-text_active;
-      transition: color @transition-duration-2 @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&-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: (round((@tree-size-default-line-height - @line-height-base * $font-size)) / 2) 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 / 2);
-      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 / 2) - (@tree-showline-size-switcher-icon / 2);
-
-    .@{tree-prefix-cls}-node-switcher {
-      width: @tree-showline-size-switcher-icon;
-      text-align: center;
-
-      .@{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: '';
-
-      .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 / 2);
-      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: '';
-
-      .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;
-  }
-
-  .@{prefix}-checkbox {
-    line-height: @tree-size-mini-line-height;
-  }
-
-  .@{tree-prefix-cls}-node-title {
-    padding-top: (round((@tree-size-mini-line-height - $line-height * $font-size)) / 2);
-    padding-bottom: $padding-top;
-    font-size: @tree-size-mini-font-size;
-    line-height: 1.667;
-  }
-
-  .@{tree-prefix-cls}-node-indent-block::after {
-    .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 {
-    .getIndentLinePos(@tree-size-mini-line-height);
-  }
-}
-
-.@{tree-prefix-cls}-size-small {
-  .@{tree-prefix-cls}-node-switcher {
-    height: @tree-size-small-line-height;
-  }
-
-  .@{prefix}-checkbox {
-    line-height: @tree-size-small-line-height;
-  }
-
-  .@{tree-prefix-cls}-node-title {
-    padding-top: (round((@tree-size-small-line-height - @line-height-base * $font-size)) / 2);
-    padding-bottom: $padding-top;
-    font-size: @tree-size-small-font-size;
-  }
-
-  .@{tree-prefix-cls}-node-indent-block::after {
-    .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 {
-    .getIndentLinePos(@tree-size-small-line-height);
-  }
-}
-
-.@{tree-prefix-cls}-size-large {
-  .@{tree-prefix-cls}-node-switcher {
-    height: @tree-size-large-line-height;
-  }
-
-  .@{prefix}-checkbox {
-    line-height: @tree-size-large-line-height;
-  }
-
-  .@{tree-prefix-cls}-node-title {
-    padding-top: (round((@tree-size-large-line-height - @line-height-base * $font-size)) / 2);
-    padding-bottom: $padding-top;
-    font-size: @tree-size-large-font-size;
-  }
-
-  .@{tree-prefix-cls}-node-indent-block::after {
-    .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 {
-    .getIndentLinePos(@tree-size-large-line-height);
-  }
-}
-
-.@{tree-prefix-cls}-node-list {
-  overflow: hidden;
-  transition: height @transition-duration-2 @transition-timing-function-standard;
-}

package/es/tree/style/token.less

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

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

@@ -1,49 +0,0 @@
-@import url('./token.less');
-
-@tree-prefix-cls: ~'@{prefix}-tree';
-@tree-select-prefix-cls: ~'@{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(~'@{sd-cssvars-prefix}-color-bg-popup');
-    border: 1px solid @select-popup-color-border;
-    border-radius: @select-popup-border-radius;
-    box-shadow: @select-popup-box-shadow;
-
-    .@{tree-select-prefix-cls}-tree-wrapper {
-      height: 100%;
-      max-height: @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: @font-weight-500;
-  }
-
-  &-has-header {
-    padding-top: 0;
-  }
-
-  &-header {
-    border-bottom: 1px solid @select-popup-color-border;
-  }
-
-  &-has-footer {
-    padding-bottom: 0;
-  }
-
-  &-footer {
-    border-top: 1px solid @select-popup-color-border;
-  }
-}

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

@@ -1,9 +0,0 @@
-@import url('../../style/theme/index.less');
-@import url('../../_components/select-view/style/token.less');
-@import url('../../select/style/token.less');
-
-@tree-select-padding-popup-left: @spacing-5;
-
-@tree-select-padding-popup-right: @spacing-2;
-
-@tree-select-padding-popup-vertical: @spacing-2;

package/es/trigger/style/token.less

@@ -1,7 +0,0 @@
-@import url('../../style/theme/index.less');
-
-@trigger-color-arrow-bg: var(~'@{sd-cssvars-prefix}-color-bg-5');
-
-@trigger-size-arrow-width: @size-2;
-
-@trigger-border-arrow-radius: @radius-small;