@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.10

package/theme-chalk/tree/_directory.scss

@@ -0,0 +1,73 @@
+@use '../common/var';
+
+.#{$namespace}-tree.#{$namespace}-tree-directory {
+    // ================== TreeNode ==================
+    .#{$namespace}-tree-treenode {
+        position: relative;
+
+        // Hover color
+        &::before {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 4px;
+            left: 0;
+            transition: background-color 0.3s;
+            content: '';
+            pointer-events: none;
+        }
+
+        &:hover {
+            background: var(--#{$namespace}-tree-node-hover-bg-color);
+        }
+
+        // Elements
+        > * {
+            z-index: 1;
+        }
+
+        // >>> Switcher
+        .#{$namespace}-tree-switcher {
+            transition: color 0.3s;
+        }
+
+        // >>> Title
+        .#{$namespace}-tree-node-content-wrapper {
+            border-radius: 0;
+            user-select: none;
+            white-space: nowrap;
+
+            &:hover {
+                background: transparent;
+            }
+
+            &.#{$namespace}-tree-node-selected {
+                color: var(--#{$namespace}-tree-text-color);
+                background: transparent;
+            }
+        }
+
+        // ============= Selected =============
+        &-selected {
+            &:hover,
+            & {
+                background: var(--#{$namespace}-tree-node-hover-bg-color);
+            }
+
+            // >>> Switcher
+            // .#{$namespace}-tree-switcher {
+            //     color: #fff;
+
+            //     .#{$namespace}-tree-switcher-icon {
+            //         color: #fff;
+            //     }
+            // }
+
+            // >>> Title
+            .#{$namespace}-tree-node-content-wrapper {
+                color: var(--#{$namespace}-tree-text-color);
+                background: transparent;
+            }
+        }
+    }
+}

package/theme-chalk/tree/_tree.scss

@@ -0,0 +1,401 @@
+@use '../common/var';
+
+// @mixin antTreeSwitcherIcon($type: 'tree-default-open-icon') {
+.#{$namespace}-tree-switcher-icon {
+    display: inline-block;
+    font-size: 14px;
+    vertical-align: baseline;
+    color: #a8abb2;
+    transition: transform 0.5s;
+}
+
+// @mixin drop-indicator() {
+//   .#{$namespace}-tree-drop-indicator {
+//     position: absolute;
+//     // it should displayed over the following node
+//     z-index: 1;
+//     height: 2px;
+//     background-color: $primary-color;
+//     border-radius: 1px;
+//     pointer-events: none;
+
+//     &::after {
+//       position: absolute;
+//       top: -3px;
+//       left: -6px;
+//       width: 8px;
+//       height: 8px;
+//       background-color: transparent;
+//       border: 2px solid @primary-color;
+//       border-radius: 50%;
+//       content: '';
+//     }
+//   }
+// }
+
+.#{$namespace}-tree {
+    --#{$namespace}-tree-node-hover-bg-color: var(--#{$namespace}-fill-color-light);
+    --#{$namespace}-tree-text-color: var(--#{$namespace}-text-color-regular);
+    --#{$namespace}-tree-expand-icon-color: var(--#{$namespace}-text-color-placeholder);
+}
+
+.#{$namespace}-tree {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--#{$namespace}-tree-text-color);
+    font-size: 14px;
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    background: var(--#{$namespace}-fill-color-blank);
+    border-radius: 2px;
+    transition: background-color 0.3s;
+
+    .#{$namespace}-tree-focused:not(:hover):not(.#{$namespace}-tree-active-focused) {
+        background: #e6f7ff;
+    }
+
+    // =================== Virtual List ===================
+    .#{$namespace}-tree-list-holder-inner {
+        align-items: flex-start;
+    }
+
+    &.#{$namespace}-tree-block-node {
+        .#{$namespace}-tree-list-holder-inner {
+            align-items: stretch;
+
+            // >>> Title
+            .#{$namespace}-tree-node-content-wrapper {
+                flex: auto;
+            }
+
+            // >>> Drag
+            .#{$namespace}-tree-treenode.dragging {
+                position: relative;
+
+                &::after {
+                    position: absolute;
+                    inset: 0 0 4px;
+                    border: 1px solid var(--#{$namespace}-primary-color);
+                    opacity: 0;
+                    -webkit-animation: #{$namespace}-tree-node-fx-do-not-use 0.3s;
+                    animation: #{$namespace}-tree-node-fx-do-not-use 0.3s;
+                    -webkit-animation-play-state: running;
+                    animation-play-state: running;
+                    -webkit-animation-fill-mode: forwards;
+                    animation-fill-mode: forwards;
+                    content: '';
+                    pointer-events: none;
+                }
+            }
+        }
+    }
+
+    // ===================== TreeNode =====================
+    .#{$namespace}-tree-treenode {
+        display: flex;
+        align-items: center;
+        outline: none;
+        margin-bottom: 4px;
+
+        .#{$namespace}-checkbox {
+            margin-right: -5px;
+            height: unset;
+        }
+    }
+    // Disabled
+    .#{$namespace}-tree-treenode-disabled {
+        // >>> Title
+        .#{$namespace}-tree-node-content-wrapper {
+            color: var(--#{$namespace}-text-color-placeholder);
+            cursor: not-allowed;
+
+            &:hover {
+                background: transparent;
+            }
+        }
+    }
+
+    .#{$namespace}-tree-treenode-active .#{$namespace}-tree-node-content-wrapper {
+        background: #f5f5f5;
+    }
+
+    .#{$namespace}-tree-treenode:not(.#{$namespace}-tree .#{$namespace}-tree-treenode-disabled).filter-node .#{$namespace}-tree-title {
+        color: inherit;
+        font-weight: 500;
+    }
+}
+
+// >>> Indent
+.#{$namespace}-tree-indent {
+    align-self: stretch;
+    white-space: nowrap;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    .#{$namespace}-tree-indent-unit {
+        display: inline-block;
+        width: 24px;
+    }
+}
+
+// >>> Drag Handler
+.#{$namespace}-tree-draggable-icon {
+    width: 24px;
+    line-height: 24px;
+    text-align: center;
+    opacity: 0.2;
+    transition: opacity 0.3s;
+}
+
+.#{$namespace}-tree-treenode:hover .#{$namespace}-tree-draggable-icon {
+    opacity: 0.45;
+}
+
+// >>> Switcher
+.#{$namespace}-tree-switcher {
+    position: relative;
+    flex: none;
+    align-self: stretch;
+    width: 24px;
+    margin: 0;
+    line-height: 24px;
+    text-align: center;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    .#{$namespace}-tree-switcher-noop {
+        cursor: default;
+    }
+
+    &.#{$namespace}-tree-switcher_open {
+        .#{$namespace}-tree-switcher-icon {
+            transform: rotate(90deg);
+        }
+    }
+
+    .#{$namespace}-tree-switcher-loading-icon {
+        color: var(--#{$namespace}-color-primary);
+    }
+
+    .#{$namespace}-tree-switcher-leaf-line {
+        position: relative;
+        z-index: 1;
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+        // https://github.com/#{$namespace}-design/#{$namespace}-design/issues/31884
+        &::before {
+            position: absolute;
+            top: 0;
+            right: 12px;
+            bottom: -4px;
+            margin-left: -1px;
+            border-right: 1px solid var(--#{$namespace}-border-color);
+            content: ' ';
+        }
+
+        &::after {
+            position: absolute;
+            width: 10px;
+            height: 14px;
+            border-bottom: 1px solid var(--#{$namespace}-border-color);
+            content: ' ';
+        }
+    }
+}
+
+// >>> Checkbox
+.#{$namespace}-tree-checkbox {
+    top: initial;
+    margin: 4px 8px 0 0;
+}
+
+// >>> Title
+.#{$namespace}-tree-node-content-wrapper {
+    position: relative;
+    z-index: auto;
+    min-height: 24px;
+    margin: 0;
+    padding: 0 2px;
+    color: inherit;
+    line-height: 24px;
+    background: transparent;
+    border-radius: 2px;
+    cursor: pointer;
+    transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
+
+    &:hover {
+        background-color: #f5f5f5;
+    }
+
+    &.#{$namespace}-tree-node-selected {
+        background-color: #bae7ff;
+    }
+
+    // Icon
+    .#{$namespace}-tree-iconEle {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        vertical-align: top;
+        padding-right: 6px;
+
+        &:empty {
+            display: none;
+        }
+    }
+}
+
+// https://github.com/#{$namespace}-design/#{$namespace}-design/issues/28217
+.#{$namespace}-tree-unselectable .#{$namespace}-tree-node-content-wrapper:hover {
+    background-color: transparent;
+}
+
+// ==================== Draggable =====================
+.#{$namespace}-tree-node-content-wrapper {
+    line-height: 24px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    .#{$namespace}-tree-drop-indicator {
+        position: absolute;
+        z-index: 1;
+        height: 2px;
+        background-color: var(--#{$namespace}-primary-color);
+        border-radius: 1px;
+        pointer-events: none;
+    }
+
+    .#{$namespace}-tree-drop-indicator:after {
+        position: absolute;
+        top: -3px;
+        left: -6px;
+        width: 8px;
+        height: 8px;
+        background-color: transparent;
+        border: 2px solid var(--#{$namespace}-primary-color);
+        border-radius: 50%;
+        content: '';
+    }
+}
+
+.#{$namespace}-tree .#{$namespace}-tree-treenode.drop-container > [draggable] {
+    box-shadow: 0 0 0 2px var(--#{$namespace}-primary-color);
+}
+
+// ==================== Show Line =====================
+.#{$namespace}-tree-show-line {
+    // ================ Indent lines ================
+    .#{$namespace}-tree-indent {
+        .#{$namespace}-tree-indent-unit {
+            position: relative;
+            height: 100%;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                right: 12px;
+                bottom: -4px;
+                border-right: 1px solid var(--#{$namespace}-border-color);
+                content: '';
+            }
+
+            .#{$namespace}-tree-indent-unit-end {
+                &::before {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    // ============== Cover Background ==============
+    // .#{$namespace}-tree-switcher {
+    //     background: #fff;
+
+    //     .#{$namespace}-tree-switcher-line-icon {
+    //         vertical-align: -0.225em;
+    //     }
+    // }
+}
+
+.#{$namespace}-tree-treenode-leaf-last {
+    .#{$namespace}-tree-switcher-leaf-line {
+        &::before {
+            top: auto !important;
+            bottom: auto !important;
+            height: 14px !important;
+        }
+    }
+}
+
+@keyframes #{$namespace}-tree-node-fx-do-not-use {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.#{$namespace}-motion-collapse {
+    overflow: hidden;
+    transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
+}
+
+@keyframes treeNodeLeave {
+    0% {
+        transform: scaleY(1);
+        transform-origin: 0 0;
+        opacity: 1;
+    }
+    to {
+        transform: scaleY(0.8);
+        transform-origin: 0 0;
+        opacity: 0;
+        height: 0;
+    }
+}
+
+.#{$namespace}-treenode-collapse-enter-active,
+.#{$namespace}-treenode-collapse-leave-active {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+}
+
+.#{$namespace}-treenode-collapse-enter-from {
+    opacity: 0;
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.#{$namespace}-treenode-collapse-enter-active {
+    animation-name: rSlideUpIn;
+    animation-play-state: running;
+}
+
+.#{$namespace}-treenode-collapse-leave-active {
+    animation-name: treeNodeLeave;
+    animation-play-state: running;
+    pointer-events: none;
+}
+
+.#{$namespace}-treenode-collapse-leave-to {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+.#{$namespace}-tree-search-value {
+    color: #f50;
+}

package/theme-chalk/tree/index.scss

@@ -0,0 +1,2 @@
+@import './tree';
+@import './directory';

package/theme-chalk/tree-select/index.scss

@@ -0,0 +1,25 @@
+@use '../common/var';
+
+.#{$namespace}-select-dropdown__list {
+    .#{$namespace}-tree.#{$namespace}-tree-directory {
+        .#{$namespace}-tree-treenode-selected:hover {
+            background: var(--#{$namespace}-tree-node-hover-bg-color) !important;
+        }
+
+        .#{$namespace}-tree-treenode-selected::before {
+            background: transparent !important;
+        }
+
+        .#{$namespace}-tree-treenode .#{$namespace}-tree-node-content-wrapper.#{$namespace}-tree-node-selected {
+            color: var(--#{$namespace}-color-primary) !important;
+            font-weight: 700;
+        }
+
+        .#{$namespace}-tree-treenode.#{$namespace}-tree-treenode-checkbox-checked {
+            .#{$namespace}-tree-node-content-wrapper {
+                color: var(--#{$namespace}-color-primary) !important;
+                font-weight: 700;
+            }
+        }
+    }
+}