@aloudata/aloudata-design 1.9.17 → 1.10.1

package/dist/Tree/style/checkbox.less

@@ -0,0 +1,226 @@
+.aldCheckboxFn(@checkbox-prefix-cls: ~'ald-tree-checkbox') {
+  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
+  // 一般状态
+  .@{checkbox-prefix-cls} {
+    .reset-component();
+
+    position: relative;
+    line-height: 1;
+    white-space: nowrap;
+    outline: none;
+    cursor: pointer;
+
+    &-checked::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border: 1px solid @checkbox-color;
+      border-radius: @checkbox-border-radius;
+      visibility: hidden;
+      animation: ald-checkbox-effect 0.36s ease-in-out;
+      animation-fill-mode: backwards;
+      content: '';
+    }
+
+    &:hover::after,
+    .@{checkbox-prefix-cls}-wrapper:hover &::after {
+      visibility: hidden;
+    }
+
+    &-inner {
+      position: relative;
+      top: 0;
+      left: 0;
+      display: block;
+      width: @checkbox-size;
+      height: @checkbox-size;
+      direction: ltr;
+      background-color: @checkbox-check-bg;
+      border: 1px solid #dbdbdb;
+      border-radius: @checkbox-border-radius;
+      border-collapse: separate;
+      transition: all 0.3s;
+      transform: scale(0.875);
+
+      &::after {
+        @check-width: (@checkbox-size / 14) * 5px;
+        @check-height: (@checkbox-size / 14) * 8px;
+
+        position: absolute;
+        top: 50%;
+        left: 21.5%;
+        display: table;
+        width: @check-width;
+        height: @check-height;
+        border: 2px solid @checkbox-check-color;
+        border-top: 0;
+        border-left: 0;
+        transform: rotate(45deg) scale(0) translate(-50%, -50%);
+        opacity: 0;
+        transition: all 0.1s @ease-in-back, opacity 0.1s;
+        content: ' ';
+      }
+    }
+
+    &-input {
+      position: absolute;
+      inset: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+
+  // 选中状态
+  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
+    position: absolute;
+    display: table;
+    border: 2px solid @checkbox-color;
+    border-top: 0;
+    border-left: 0;
+    transform: rotate(45deg) scale(1) translate(-50%, -50%);
+    opacity: 1;
+    transition: all 0.2s @ease-out-back 0.1s;
+    content: ' ';
+  }
+
+  .@{checkbox-prefix-cls}-checked {
+    .@{checkbox-inner-prefix-cls} {
+      background-color: #f8f8f8;
+    }
+  }
+
+  .@{checkbox-prefix-cls}-disabled {
+    cursor: initial;
+
+    &.@{checkbox-prefix-cls}-checked {
+      .@{checkbox-inner-prefix-cls}::after {
+        border-color: @disabled-color;
+        animation-name: none;
+      }
+    }
+
+    .@{checkbox-prefix-cls}-input {
+      cursor: initial;
+      pointer-events: none;
+    }
+
+    .@{checkbox-inner-prefix-cls} {
+      background-color: @input-disabled-bg;
+      // border-color: @border-color-base !important;
+
+      &::after {
+        border-color: @input-disabled-bg;
+        border-collapse: separate;
+        animation-name: none;
+      }
+    }
+
+    & + span {
+      color: @disabled-color;
+      cursor: initial;
+    }
+
+    // Not show highlight border of checkbox when disabled
+    &:hover::after,
+    .@{checkbox-prefix-cls}-wrapper:hover &::after {
+      visibility: hidden;
+    }
+  }
+
+  .@{checkbox-prefix-cls}-wrapper {
+    .reset-component();
+
+    display: inline-flex;
+    align-items: baseline;
+    line-height: unset;
+    cursor: pointer;
+
+    &::after {
+      display: inline-block;
+      width: 0;
+      overflow: hidden;
+      content: '\a0';
+    }
+
+    &.@{checkbox-prefix-cls}-wrapper-disabled {
+      cursor: initial;
+    }
+
+    & + & {
+      margin-left: 8px;
+    }
+
+    &&-in-form-item {
+      input[type='checkbox'] {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+
+  .@{checkbox-prefix-cls} + span {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+
+  .@{checkbox-prefix-cls}-group {
+    .reset-component();
+
+    display: inline-block;
+
+    &-item {
+      margin-right: @checkbox-group-item-margin-right;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    &-item + &-item {
+      margin-left: 0;
+    }
+  }
+
+  // 半选状态
+  .@{checkbox-prefix-cls}-indeterminate {
+    .@{checkbox-inner-prefix-cls} {
+      background-color: @checkbox-check-bg;
+    }
+    .@{checkbox-inner-prefix-cls}::after {
+      @indeterminate-width: @checkbox-size - 8px;
+      @indeterminate-height: @checkbox-size - 14px;
+
+      top: 50%;
+      left: 50%;
+      width: @indeterminate-width;
+      height: @indeterminate-height;
+      background-color: @checkbox-color;
+      border: 0;
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
+      content: ' ';
+    }
+
+    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
+      background-color: @disabled-color;
+      border-color: @disabled-color;
+    }
+  }
+}
+
+@keyframes ald-checkbox-effect {
+  0% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(1.6);
+    opacity: 0;
+  }
+}

package/dist/Tree/style/directory.less

@@ -0,0 +1,68 @@
+// @import '../../style/themes/index';
+@tree-prefix-cls: ~'@{ald-prefix}-tree';
+
+.@{tree-prefix-cls}.@{tree-prefix-cls}-directory {
+  // ================== TreeNode ==================
+  .@{tree-prefix-cls}-treenode {
+    position: relative;
+
+    // Hover color
+    &::before {
+      position: absolute;
+      inset: 0 0 4px;
+      transition: background-color 0.3s;
+      content: '';
+      pointer-events: none;
+    }
+
+    &:hover {
+      &::before {
+        background: @item-hover-bg;
+      }
+    }
+
+    // Elements
+    > * {
+      z-index: 1;
+    }
+
+    // >>> Switcher
+    .@{tree-prefix-cls}-switcher {
+      transition: color 0.3s;
+    }
+
+    // >>> Title
+    .@{tree-prefix-cls}-node-content-wrapper {
+      border-radius: 0;
+      user-select: none;
+
+      &:hover {
+        background: transparent;
+      }
+
+      &.@{tree-prefix-cls}-node-selected {
+        color: @tree-directory-selected-color;
+        background: transparent;
+      }
+    }
+
+    // ============= Selected =============
+    &-selected {
+      &:hover::before,
+      &::before {
+        background: @tree-directory-selected-bg;
+      }
+
+      // >>> Switcher
+      .@{tree-prefix-cls}-switcher {
+        color: @tree-directory-selected-color;
+      }
+
+      // >>> Title
+      .@{tree-prefix-cls}-node-content-wrapper {
+        color: @tree-directory-selected-color;
+        background: transparent;
+      }
+    }
+  }
+}

package/dist/Tree/style/index.less

@@ -1,48 +1,93 @@
 @import '../../style/index.less';
+@import '../../Checkbox/style/index.less';
+@import './var.less';
+@import './rtl.less';
+@import './mixin.less';
+@import './reset.less';
+@import './checkbox.less';
 
-.ant-tree.ant-tree .ant-tree-treenode {
-  height: 28px;
+@tree-font-size-large: 13px;
+@tree-padding-large: 6px 4px;
+@tree-line-height-large: 20px;
+
+@tree-font-size-default: 12px;
+@tree-padding-default: 4px;
+@tree-line-height-default: 16px;
+.aldCheckboxFn();
+
+.@{tree-prefix-cls} {
+  .antTreeFn(@tree-prefix-cls);
+}
+
+.ald-tree-treenode {
+  display: flex;
   align-items: center;
-  padding: 0 12px;
-  width: 100%;
+  font-size: @tree-font-size-default;
+  font-weight: 400;
+  color: #171717;
 
-  &:hover {
-    background-color: #f8f8f8;
+  .ald-tree-draggable-icon {
+    display: inline-flex;
+    align-items: center;
   }
 
-  &.ant-tree-treenode-selected {
-    background-color: #f0f6ff;
+  .ald-tree-switcher {
+    display: inline-flex;
+    align-items: center;
   }
 
-  .ant-tree-switcher {
-    line-height: 16px;
-    height: 16px;
-    width: auto;
-    align-self: center;
+  .ald-tree-node-content-wrapper {
+    padding: 0;
+    flex: 1;
 
-    .ant-tree-switcher-icon {
-      vertical-align: middle;
-    }
-  }
+    .ald-tree-title {
+      padding: @tree-padding-default;
+      line-height: @tree-line-height-default;
+      border-radius: 2px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #171717;
 
-  .ant-tree-node-content-wrapper {
-    line-height: 16px;
-    font-size: 12px;
-    min-height: 16px;
-    color: @NL0;
-
-    &.ant-tree-node-selected {
-      background: none;
+      .ald-tree-tab-leader {
+        flex: 1;
+        border-top: 1px dashed #dbdbdb;
+        height: 0;
+        margin: 0 4px;
+      }
     }
 
     &:hover {
-      background: none;
+      background: var(--colors-gray-97, #f8f8f8);
+      mix-blend-mode: multiply;
+    }
+
+    &.ald-tree-node-selected {
+      border-radius: 2px;
+      background: var(--colors-blue-100, #f0f6ff);
     }
   }
+}
 
-  .ant-tree-indent {
-    .ant-tree-indent-unit {
-      width: 12px;
+.ald-tree-large {
+  .ald-tree-treenode {
+    font-size: @tree-font-size-large;
+
+    .ald-tree-node-content-wrapper {
+      .ald-tree-title {
+        display: flex;
+        padding: @tree-padding-large;
+        line-height: @tree-line-height-large;
+      }
     }
   }
 }
+
+.ald-tree-treenode-switcher-open .ald-tree-switcher svg {
+  transition: transform 0.2s;
+}
+
+.ald-tree-treenode-switcher-close .ald-tree-switcher svg {
+  transform: rotate(-90deg);
+  transition: transform 0.2s;
+}