@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/transfer.scss

@@ -1,7 +1,7 @@
 @use './mixins/config' as *;
 
 .#{$namespace}-transfer {
-    --#{$namespace}-transfer-border-color: var(--#{$namespace}-border-color);
+    --#{$namespace}-transfer-border-color: var(--#{$namespace}-border-color-lighter);
     --#{$namespace}-transfer-border-radius: 4px;
     --#{$namespace}-transfer-panel-width: 200px;
     --#{$namespace}-transfer-panel-header-height: 40px;
@@ -36,7 +36,6 @@
         display: flex;
         flex-direction: column;
         width: var(--#{$namespace}-transfer-panel-width);
-        height: var(--#{$namespace}-transfer-panel-body-height);
         border: 1px solid var(--#{$namespace}-transfer-border-color);
         border-radius: 4px;
 
@@ -56,7 +55,7 @@
             flex: none;
             align-items: center;
             height: var(--#{$namespace}-transfer-panel-header-height);
-            padding: 8px 12px 9px;
+            padding-left: 15px;
             color: var(--#{$namespace}-text-color-regular);
             background: var(--#{$namespace}-transfer-panel-header-bg-color);
             border-bottom: 1px solid;
@@ -64,19 +63,43 @@
             border-radius: var(--#{$namespace}-transfer-border-radius) var(--#{$namespace}-transfer-border-radius) 0 0;
 
             & > *:not(:last-child) {
-                margin-right: 4px;
+                display: flex;
+                flex: 1;
+                align-items: center;
+                min-width: 0;
+                font-size: 16px;
+                color: var(--#{$namespace}-text-color-primary);
+                font-weight: 400;
             }
 
             & > * {
                 flex: none;
             }
 
-            .#{$namespace}-transfer-list-header-title {
-                flex: auto;
+            .#{$namespace}-checkbox .#{$namespace}-checkbox__label {
+                display: flex;
+                flex: 1;
+                align-items: center;
+                min-width: 0;
+                font-size: 16px;
+                color: var(--#{$namespace}-text-color-primary);
+                font-weight: 400;
+            }
+
+            .#{$namespace}-transfer-list__header-title {
                 overflow: hidden;
-                white-space: nowrap;
-                text-align: right;
                 text-overflow: ellipsis;
+                white-space: nowrap;
+                flex: 1;
+                min-width: 0;
+            }
+
+            .#{$namespace}-transfer-list__header-count {
+                flex-shrink: 0;
+                margin-left: 8px;
+                margin-right: 15px;
+                color: var(--#{$namespace}-text-color-secondary);
+                font-size: 12px;
             }
 
             .#{$namespace}-transfer-list-header-dropdown {
@@ -96,6 +119,7 @@
             flex-direction: column;
             overflow: hidden;
             font-size: 14px;
+            height: var(--#{$namespace}-transfer-panel-body-height);
 
             .#{$namespace}-transfer-list-body-search-wrapper {
                 position: relative;
@@ -205,26 +229,28 @@
             flex: none;
             width: 100%;
             margin: auto 0;
-            color: fade(#000, 25%);
+            color: var(--#{$namespace}-text-color-secondary);
             text-align: center;
         }
 
         .#{$namespace}-transfer-list-footer {
             border-top: 1px solid #e4e7ed;
+            height: var(--#{$namespace}-transfer-panel-footer-height);
+            line-height: var(--#{$namespace}-transfer-panel-footer-height);
         }
     }
 
     .#{$namespace}-transfer-operation {
         display: flex;
         flex: none;
-        flex-direction: column;
+        // flex-direction: column;
         align-self: center;
-        margin: 0 8px;
+        margin: 0 30px;
         vertical-align: middle;
 
         .#{$namespace}-button {
             display: block;
-            margin-left: 0;
+            // margin-left: 0;
 
             &:first-child {
                 margin-bottom: 4px;

package/theme-chalk/transition.scss

@@ -376,20 +376,20 @@
 }
 
 .#{$namespace}-anim-bounce-out {
-    // animation-name: rBounceOut;
+    animation-name: rBounceOut;
     animation-duration: 0.3s;
     animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
-    // animation-fill-mode: forwards;
+    animation-fill-mode: forwards;
 
     @keyframes rBounceOut {
         from {
             opacity: 1;
-            transform: scale(1);
+            // transform: scale(1);
         }
 
         to {
             opacity: 0;
-            transform: scale(0.8);
+            // transform: scale(0.8);
         }
     }
 }
@@ -658,6 +658,10 @@
     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;
 }
 
+.el-collapse-transition {
+    transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
+}
+
 .#{$namespace}-menu-collapse-enter-active,
 .#{$namespace}-menu-collapse-leave-active {
     animation-duration: 0.3s;
@@ -754,3 +758,29 @@
     opacity: 0;
     transform: scale(0.45, 0.45);
 }
+
+.dialog-fade-enter-active {
+    animation: modal-fade-in var(--el-transition-duration);
+}
+
+@keyframes modal-fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.dialog-fade-leave-active {
+    animation: modal-fade-out var(--el-transition-duration);
+}
+
+@keyframes modal-fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

package/theme-chalk/tree-select.scss

@@ -1,25 +1,41 @@
-@use './mixins/config' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
 
-.#{$namespace}-select-dropdown__list {
-    .#{$namespace}-tree.#{$namespace}-tree-directory {
-        .#{$namespace}-tree-treenode-selected:hover {
-            background: var(--#{$namespace}-tree-node-hover-bg-color) !important;
-        }
+@include b(tree-select) {
+  @include set-component-css-var('tree', $tree);
+}
+
+@include b(tree-select) {
+  @include e(popper) {
+    // padding-left same with select option
+    .#{$namespace}-tree-node__expand-icon {
+      margin-left: 8px;
+    }
+
+    // remove icon when show checkbox
+    .#{$namespace}-tree-node.is-checked
+      > .#{$namespace}-tree-node__content
+      .#{$namespace}-select-dropdown__item.selected::after {
+      content: none;
+    }
+
+    .#{$namespace}-select-dropdown__list
+      > .#{$namespace}-select-dropdown__item {
+      padding-left: 32px;
+    }
 
-        .#{$namespace}-tree-treenode-selected::before {
-            background: transparent !important;
-        }
+    .#{$namespace}-select-dropdown__item {
+      flex: 1;
+      background: transparent !important;
 
-        .#{$namespace}-tree-treenode .#{$namespace}-tree-node-content-wrapper.#{$namespace}-tree-node-selected {
-            color: var(--#{$namespace}-color-primary) !important;
-            font-weight: 700;
-        }
+      // padding-left move to `el-tree-node__expand-icon`
+      padding-left: 0;
 
-        .#{$namespace}-tree-treenode.#{$namespace}-tree-treenode-checkbox-checked {
-            .#{$namespace}-tree-node-content-wrapper {
-                color: var(--#{$namespace}-color-primary) !important;
-                font-weight: 700;
-            }
-        }
+      // fix: select height > tree node height
+      // https://github.com/yujinpan/el-select-tree/pull/33
+      height: 20px;
+      line-height: 20px;
     }
+  }
 }

package/theme-chalk/tree.scss

@@ -0,0 +1,136 @@
+@use './mixins/mixins' as *;
+@use './mixins/var' as *;
+@use './common/var' as *;
+@use './common/transition';
+
+@include b(tree) {
+    @include set-component-css-var('tree', $tree);
+}
+
+@include b(tree) {
+    position: relative;
+    cursor: default;
+    background: getCssVar('fill-color', 'blank');
+    color: getCssVar('tree-text-color');
+    font-size: getCssVar('font-size', 'base');
+
+    @include e(empty-block) {
+        position: relative;
+        min-height: 60px;
+        text-align: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    @include e(empty-text) {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        color: getCssVar('text-color', 'secondary');
+        font-size: getCssVar('font-size', 'base');
+    }
+
+    @include e(drop-indicator) {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background-color: getCssVar('color-primary');
+    }
+}
+
+@include b(tree-node) {
+    white-space: nowrap;
+    outline: none;
+    &:focus {
+        /* focus */
+        > .#{$namespace}-tree-node__content {
+            background-color: getCssVar('tree-node-hover-bg-color');
+        }
+    }
+
+    @include when(drop-inner) {
+        > .#{$namespace}-tree-node__content .#{$namespace}-tree-node__label {
+            background-color: getCssVar('color-primary');
+            color: #fff;
+        }
+    }
+
+    @include when(hidden) {
+        display: none;
+    }
+
+    @include e(content) {
+        @include css-var-from-global('checkbox-height', 'tree-node-content-height');
+
+        display: flex;
+        align-items: center;
+        height: getCssVar('tree-node-content-height');
+        cursor: pointer;
+
+        & > .#{$namespace}-tree-node__expand-icon {
+            padding: 6px;
+            box-sizing: content-box;
+        }
+        & > label.#{$namespace}-checkbox {
+            margin-right: 8px;
+        }
+        &:hover {
+            background-color: getCssVar('tree-node-hover-bg-color');
+        }
+
+        .#{$namespace}-tree.is-dragging & {
+            cursor: move;
+
+            & * {
+                pointer-events: none;
+            }
+        }
+
+        .#{$namespace}-tree.is-dragging.is-drop-not-allow & {
+            cursor: not-allowed;
+        }
+    }
+
+    @include e(expand-icon) {
+        cursor: pointer;
+        color: getCssVar('tree-expand-icon-color');
+        font-size: 12px;
+
+        transform: rotate(0deg);
+        transition: transform getCssVar('transition-duration') ease-in-out;
+
+        &.expanded {
+            transform: rotate(90deg);
+        }
+
+        &.is-leaf {
+            color: transparent;
+            cursor: default;
+            visibility: hidden;
+        }
+        &.is-hidden {
+            visibility: hidden;
+        }
+    }
+
+    @include e(loading-icon) {
+        margin-right: 8px;
+        font-size: getCssVar('font-size', 'base');
+        color: getCssVar('tree-expand-icon-color');
+    }
+
+    & > .#{$namespace}-tree-node__children {
+        overflow: hidden;
+        background-color: transparent;
+    }
+
+    &.is-expanded > .#{$namespace}-tree-node__children {
+        display: block;
+    }
+}
+
+.#{$namespace}-tree--highlight-current .#{$namespace}-tree-node.is-current > .#{$namespace}-tree-node__content {
+    background-color: getCssVar('color-primary-light-9');
+}

package/theme-chalk/var.scss

@@ -1,83 +1,83 @@
-// CSS3 var
-@use 'common/var' as *;
-@use 'mixins/var' as *;
-@use 'mixins/mixins' as *;
-
-// for better performance do not dynamically change the root variable if you really
-// do not need that, since this could introduce recalculation overhead for rendering.
-// https://lisilinhart.info/posts/css-variables-performance/
-
-// common
-:root {
-    @include set-css-var-value('color-white', $color-white);
-    @include set-css-var-value('color-black', $color-black);
-
-    // get rgb
-    @each $type in (primary, success, warning, danger, error, info) {
-        @include set-css-color-rgb($type);
-    }
-
-    // Typography
-    @include set-component-css-var('font-size', $font-size);
-    @include set-component-css-var('font-family', $font-family);
-
-    @include set-css-var-value('font-weight-primary', 500);
-    @include set-css-var-value('font-line-height-primary', 24px);
-
-    // z-index --el-index-#{$type}
-    @include set-component-css-var('index', $z-index);
-
-    // --el-border-radius-#{$type}
-    @include set-component-css-var('border-radius', $border-radius);
-
-    // Transition
-    // refer to this website to get the bezier motion function detail
-    // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
-    @include set-component-css-var('transition-duration', $transition-duration);
-
-    @include set-component-css-var('transition-function', $transition-function);
-    @include set-component-css-var('transition', $transition);
-
-    // common component size
-    @include set-component-css-var('component-size', $common-component-size);
-}
-
-// for light
-:root {
-    color-scheme: light;
-
-    // --el-color-#{$type}
-    // --el-color-#{$type}-light-{$i}
-    @each $type in (primary, success, warning, danger, error, info) {
-        @include set-css-color-type($colors, $type);
-    }
-
-    // color-scheme
-    // Background --el-bg-color-#{$type}
-    @include set-component-css-var('bg-color', $bg-color);
-    // --el-text-color-#{$type}
-    @include set-component-css-var('text-color', $text-color);
-    // --el-border-color-#{$type}
-    @include set-component-css-var('border-color', $border-color);
-    // Fill --el-fill-color-#{$type}
-    @include set-component-css-var('fill-color', $fill-color);
-
-    // Box-shadow
-    // --el-box-shadow-#{$type}
-    @include set-component-css-var('box-shadow', $box-shadow);
-    // Disable base
-    @include set-component-css-var('disabled', $disabled);
-
-    // overlay & mask
-    @include set-component-css-var('overlay-color', $overlay-color);
-    @include set-component-css-var('mask-color', $mask-color);
-
-    // Border
-    @include set-css-var-value('border-width', $border-width);
-    @include set-css-var-value('border-style', $border-style);
-    @include set-css-var-value('border-color-hover', $border-color-hover);
-    @include set-css-var-value('border', getCssVar('border-width') getCssVar('border-style') getCssVar('border-color'));
-
-    // Svg
-    @include css-var-from-global('svg-monochrome-grey', 'border-color');
-}
+// CSS3 var
+@use 'common/var' as *;
+@use 'mixins/var' as *;
+@use 'mixins/mixins' as *;
+
+// for better performance do not dynamically change the root variable if you really
+// do not need that, since this could introduce recalculation overhead for rendering.
+// https://lisilinhart.info/posts/css-variables-performance/
+
+// common
+:root {
+    @include set-css-var-value('color-white', $color-white);
+    @include set-css-var-value('color-black', $color-black);
+
+    // get rgb
+    @each $type in (primary, success, warning, danger, error, info) {
+        @include set-css-color-rgb($type);
+    }
+
+    // Typography
+    @include set-component-css-var('font-size', $font-size);
+    @include set-component-css-var('font-family', $font-family);
+
+    @include set-css-var-value('font-weight-primary', 500);
+    @include set-css-var-value('font-line-height-primary', 24px);
+
+    // z-index --el-index-#{$type}
+    @include set-component-css-var('index', $z-index);
+
+    // --el-border-radius-#{$type}
+    @include set-component-css-var('border-radius', $border-radius);
+
+    // Transition
+    // refer to this website to get the bezier motion function detail
+    // https://cubic-bezier.com/#p1,p2,p3,p4 (change px as your function parameter)
+    @include set-component-css-var('transition-duration', $transition-duration);
+
+    @include set-component-css-var('transition-function', $transition-function);
+    @include set-component-css-var('transition', $transition);
+
+    // common component size
+    @include set-component-css-var('component-size', $common-component-size);
+}
+
+// for light
+:root {
+    color-scheme: light;
+
+    // --el-color-#{$type}
+    // --el-color-#{$type}-light-{$i}
+    @each $type in (primary, success, warning, danger, error, info) {
+        @include set-css-color-type($colors, $type);
+    }
+
+    // color-scheme
+    // Background --el-bg-color-#{$type}
+    @include set-component-css-var('bg-color', $bg-color);
+    // --el-text-color-#{$type}
+    @include set-component-css-var('text-color', $text-color);
+    // --el-border-color-#{$type}
+    @include set-component-css-var('border-color', $border-color);
+    // Fill --el-fill-color-#{$type}
+    @include set-component-css-var('fill-color', $fill-color);
+
+    // Box-shadow
+    // --el-box-shadow-#{$type}
+    @include set-component-css-var('box-shadow', $box-shadow);
+    // Disable base
+    @include set-component-css-var('disabled', $disabled);
+
+    // overlay & mask
+    @include set-component-css-var('overlay-color', $overlay-color);
+    @include set-component-css-var('mask-color', $mask-color);
+
+    // Border
+    @include set-css-var-value('border-width', $border-width);
+    @include set-css-var-value('border-style', $border-style);
+    @include set-css-var-value('border-color-hover', $border-color-hover);
+    @include set-css-var-value('border', getCssVar('border-width') getCssVar('border-style') getCssVar('border-color'));
+
+    // Svg
+    @include css-var-from-global('svg-monochrome-grey', 'border-color');
+}

package/theme-chalk/virtual-list.scss

@@ -0,0 +1,40 @@
+@use 'mixins/mixins' as *;
+@use 'common/var' as *;
+
+@mixin showScrollbar {
+    @include b(virtual-scrollbar) {
+        opacity: 1;
+    }
+}
+
+@include b(vl) {
+    @include e(wrapper) {
+        position: relative;
+        &:hover {
+            @include showScrollbar();
+        }
+        &.always-on {
+            @include showScrollbar();
+        }
+    }
+}
+
+.#{$namespace}-vl__window {
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
+@include b(virtual-scrollbar) {
+    opacity: 0;
+    transition: opacity 340ms ease-out;
+    &.always-on {
+        opacity: 1;
+    }
+}
+
+@include b(vg) {
+    @include e(wrapper) {
+        position: relative;
+    }
+}

package/dist/Input/Input.1.d.ts

@@ -1,16 +0,0 @@
-import React, { RefObject } from 'react';
-import InputRange from './InputRange';
-import TextArea from './TextArea';
-import { InputProps, InputRef } from './typings';
-declare const ForwardInput: (props: InputProps & {
-    ref?: RefObject<InputRef> | React.ForwardedRef<InputRef>;
-}) => React.ReactElement;
-type InternalInputType = typeof ForwardInput;
-interface InputInterface extends InternalInputType {
-    displayName?: string;
-    defaultProps?: Partial<InputProps>;
-    TextArea: typeof TextArea;
-    Range: typeof InputRange;
-}
-declare const Input: InputInterface;
-export default Input;