@qsxy/element-plus-react 1.0.3 → 2.0.0

package/theme-chalk/common/var.scss

@@ -288,6 +288,7 @@ $checkbox-button: map.merge(
         'checked-bg-color': getCssVar('color-primary'),
         'checked-text-color': getCssVar('color-white'),
         'checked-border-color': getCssVar('color-primary'),
+        'disabled-checked-fill': getCssVar('border-color-extra-light'),
     ),
     $checkbox-button
 );
@@ -436,7 +437,7 @@ $select-dropdown: map.merge(
         'empty-color': getCssVar('text-color-secondary'),
         'max-height': 274px,
         'padding': 6px 0,
-        'empty-padding': 4px 0,
+        'empty-padding': 10px 0,
         'header-padding': 10px,
         'footer-padding': 10px,
         'border': 1px solid getCssVar('border-color-light'),
@@ -621,6 +622,24 @@ $input-number-width: map.merge(
     $input-number-width
 );
 
+$input-otp-gap: () !default;
+$input-otp-gap: map.merge(
+    (
+        'large': 12px,
+        'default': 8px,
+        'small': 6px,
+    ),
+    $input-otp-gap
+);
+$input-otp: () !default;
+$input-otp: map.merge(
+    (
+        'text-color': getCssVar('text-color-regular'),
+        'field-width': calc(getCssVar('input-otp-size') - 4px),
+    ),
+    $input-otp
+);
+
 $input-padding-horizontal: () !default;
 $input-padding-horizontal: map.merge(
     (
@@ -691,6 +710,16 @@ $cascader-search-input-margin-left: map.merge(
     $cascader-search-input-margin-left
 );
 
+$cascader-dropdown: () !default;
+$cascader-dropdown: map.merge(
+    (
+        'header-padding': 10px,
+        'footer-padding': 10px,
+        'border': 1px solid getCssVar('border-color-light'),
+    ),
+    $cascader-dropdown
+);
+
 //statistic
 // css3 var in packages/theme-chalk/src/statistic.scss
 $statistic: () !default;
@@ -711,8 +740,8 @@ $button: () !default;
 $button: map.merge(
     (
         'font-weight': getCssVar('font-weight-primary'),
-        'border-style': solid,
         'border-color': getCssVar('border-color'),
+        'border-style': solid,
         'bg-color': getCssVar('fill-color', 'blank'),
         'text-color': getCssVar('text-color', 'regular'),
         'disabled-text-color': getCssVar('disabled-text-color'),
@@ -858,6 +887,7 @@ $anchor: map.merge(
         'font-size': 12px,
         'color': getCssVar('text-color-secondary'),
         'active-color': getCssVar('color-primary'),
+        'hover-color': getCssVar('text-color-regular'),
         'marker-bg-color': getCssVar('color-primary'),
     ),
     $anchor
@@ -966,10 +996,10 @@ $table: map.merge(
         'header-text-color': getCssVar('text-color-secondary'),
         'row-hover-bg-color': getCssVar('fill-color', 'light'),
         'current-row-bg-color': getCssVar('color-primary-light-9'),
-        'header-bg-color': getCssVar('bg-color'),
+        'header-bg-color': getCssVar('fill-color', 'blank'),
         'fixed-box-shadow': getCssVar('box-shadow', 'light'),
         'bg-color': getCssVar('fill-color', 'blank'),
-        'tr-bg-color': getCssVar('bg-color'),
+        'tr-bg-color': getCssVar('fill-color', 'blank'),
         'expanded-cell-bg-color': getCssVar('fill-color', 'blank'),
         'fixed-left-column': inset 10px 0 10px -10px rgb(0 0 0 / 15%),
         'fixed-right-column': inset -10px 0 10px -10px rgb(0 0 0 / 15%),
@@ -1068,6 +1098,8 @@ $popper: () !default;
 $popper: map.merge(
     (
         'border-radius': var(#{getCssVarName('popover-border-radius')}, 4px),
+        'bg-color-light': getCssVar('bg-color', 'overlay'),
+        'bg-color-dark': getCssVar('text-color', 'primary'),
     ),
     $popper
 );
@@ -1176,6 +1208,7 @@ $drawer: map.merge(
     (
         'bg-color': var(#{getCssVarName('dialog', 'bg-color')}, #{getCssVar('bg-color')}),
         'padding-primary': var(#{getCssVarName('dialog', 'padding-primary')}, 20px),
+        'dragger-size': 8px,
     ),
     $drawer
 );
@@ -1262,10 +1295,21 @@ $rate: map.merge(
         'fill-color': #f7ba2a,
         'disabled-void-color': getCssVar('fill-color'),
         'text-color': getCssVar('text-color', 'primary'),
+        'outline-color': getCssVar('color-primary', 'light-5'),
     ),
     $rate
 );
 
+// ColorPicker
+// css3 var in packages/theme-chalk/src/color-picker.scss
+$colorpicker: () !default;
+$colorpicker: map.merge(
+    (
+        'bg-color': getCssVar('bg-color', 'overlay'),
+    ),
+    $colorpicker
+);
+
 // DatePicker
 // css3 var packages/theme-chalk/src/date-picker/var.scss
 $datepicker: () !default;
@@ -1281,6 +1325,7 @@ $datepicker: map.merge(
         'inrange-hover-bg-color': getCssVar('border-color-extra-light'),
         'active-color': getCssVar('color-primary'),
         'hover-text-color': getCssVar('color-primary'),
+        'bg-color': getCssVar('bg-color', 'overlay'),
     ),
     $datepicker
 );
@@ -1480,6 +1525,15 @@ $avatar-size: map.merge(
     $avatar-size
 );
 
+$avatar-group: () !default;
+$avatar-group: map.merge(
+    (
+        'item-gap': -8px,
+        'collapse-item-gap': 4px,
+    ),
+    $avatar-group
+);
+
 // Empty
 // css3 var in packages/theme-chalk/src/empty.scss
 $empty: () !default;
@@ -1534,8 +1588,10 @@ $result: map.merge(
 $upload: () !default;
 $upload: map.merge(
     (
-        'dragger-padding-horizontal': 40px,
-        'dragger-padding-vertical': 10px,
+        'dragger-padding-horizontal': 10px,
+        'dragger-padding-vertical': 40px,
+        'list-picture-card-size': var(#{getCssVarName('upload', 'picture-card-size')}),
+        'picture-card-size': 148px,
     ),
     $upload
 );

package/theme-chalk/dialog.scss

@@ -1,190 +1,198 @@
-@use './mixins/config' as *;
+@use 'sass:map';
 
-// Kill the scroll on the body
-.#{$namespace}-popup-parent--hidden {
-    overflow: hidden !important;
-}
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+@use 'common/popup' as *;
 
-.#{$namespace}-overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 2000;
-    height: 100%;
-    background-color: var(--#{$namespace}-overlay-color-lighter);
-    overflow: auto;
+@include b(dialog) {
+    @include set-component-css-var('dialog', $dialog);
 
-    &.is-message-box .el-overlay-message-box {
-        text-align: center;
+    position: relative;
+    margin: var(#{getCssVarName('dialog-margin-top')}, 15vh) auto 50px;
+    background: getCssVar('dialog', 'bg-color');
+    border-radius: getCssVar('dialog', 'border-radius');
+    box-shadow: getCssVar('dialog', 'box-shadow');
+    box-sizing: border-box;
+    padding: getCssVar('dialog', 'padding-primary');
+    width: var(#{getCssVarName('dialog-width')}, 50%);
+    overflow-wrap: break-word;
+
+    &:focus {
+        outline: none !important;
+    }
+
+    @include when(align-center) {
+        margin: auto;
+    }
+
+    @include when(fullscreen) {
+        @include set-css-var-value('dialog-width', 100%);
+        @include set-css-var-value('dialog-margin-top', 0);
+
+        margin-bottom: 0;
+        height: 100%;
+        overflow: auto;
+        border-radius: 0px;
+    }
+
+    @include e(wrapper) {
         position: fixed;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
-        padding: 16px;
         overflow: auto;
+        margin: 0;
     }
 
-    &.is-message-box .el-overlay-message-box:after {
-        content: '';
-        display: inline-block;
-        height: 100%;
-        width: 0;
-        vertical-align: middle;
+    @include when(draggable) {
+        @include e(header) {
+            cursor: move;
+            user-select: none;
+        }
     }
-}
 
-.#{$namespace}-overlay-dialog {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-}
+    @include e(header) {
+        padding-bottom: getCssVar('dialog', 'padding-primary');
 
-// Container that the dialog scrolls within
-.#{$namespace}-dialog {
-    --#{$namespace}-dialog-width: 50%;
-    --#{$namespace}-dialog-margin-top: 15vh;
-    --#{$namespace}-dialog-bg-color: var(--#{$namespace}-bg-color);
-    --#{$namespace}-dialog-box-shadow: var(--#{$namespace}-box-shadow);
-    --#{$namespace}-dialog-title-font-size: var(--#{$namespace}-font-size-large);
-    --#{$namespace}-dialog-content-font-size: 14px;
-    --#{$namespace}-dialog-font-line-height: var(--#{$namespace}-font-line-height-primary);
-    --#{$namespace}-dialog-padding-primary: 16px;
-    --#{$namespace}-dialog-border-radius: var(--#{$namespace}-border-radius-base);
-    position: relative;
-    margin: var(--#{$namespace}-dialog-margin-top, 15vh) auto 50px;
-    background: var(--#{$namespace}-dialog-bg-color);
-    border-radius: var(--#{$namespace}-dialog-border-radius);
-    box-shadow: var(--#{$namespace}-dialog-box-shadow);
-    box-sizing: border-box;
-    padding: var(--#{$namespace}-dialog-padding-primary);
-    width: var(--#{$namespace}-dialog-width, 50%);
+        &.show-close {
+            padding-right: calc(getCssVar('dialog', 'padding-primary') + var(#{getCssVarName('message-close-size')}, map.get($message, 'close-size')));
+        }
+    }
 
-    &:focus {
-        outline: none !important;
+    @include e(headerbtn) {
+        position: absolute;
+        top: 0;
+        right: 0;
+        padding: 0;
+        width: 48px;
+        height: 48px;
+        background: transparent;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        font-size: var(#{getCssVarName('message-close-size')}, map.get($message, 'close-size'));
+
+        .#{$namespace}-dialog__close {
+            color: getCssVar('color', 'info');
+            font-size: inherit;
+        }
+
+        &:focus,
+        &:hover {
+            .#{$namespace}-dialog__close {
+                color: getCssVar('color', 'primary');
+            }
+        }
     }
 
-    &.is-align-center {
-        margin: auto;
+    @include e(title) {
+        line-height: getCssVar('dialog-font-line-height');
+        font-size: getCssVar('dialog-title-font-size');
+        color: getCssVar('text-color', 'primary');
     }
 
-    &.is-fullscreen {
-        --#{$namespace}-dialog-width: 100%;
-        --#{$namespace}-dialog-margin-top: 0;
-        margin-bottom: 0;
-        height: 100%;
-        overflow: auto;
-        border-radius: 0;
+    @include e(body) {
+        color: getCssVar('text-color', 'regular');
+        font-size: getCssVar('dialog-content-font-size');
     }
 
-    &.is-draggable .#{$namespace}-dialog__header {
-        cursor: move;
-        -webkit-user-select: none;
-        user-select: none;
+    @include e(footer) {
+        padding-top: getCssVar('dialog', 'padding-primary');
+        text-align: right;
+        box-sizing: border-box;
     }
 
-    &.#{$namespace}-dialog-shake {
-        animation: 0.3s linear rShakeHead;
+    // 内容居中布局
+    @include m(center) {
+        text-align: center;
+
+        @include e(body) {
+            text-align: initial;
+        }
+
+        @include e(footer) {
+            text-align: inherit;
+        }
     }
 }
 
-.#{$namespace}-dialog--center {
-    text-align: center;
+.#{$namespace}-modal-dialog {
+    &.is-penetrable {
+        pointer-events: none;
+
+        .#{$namespace}-dialog {
+            pointer-events: auto;
+        }
+    }
 }
 
-.#{$namespace}-dialog__wrapper {
+.#{$namespace}-overlay-dialog {
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     overflow: auto;
-    margin: 0;
-}
-
-.#{$namespace}-dialog__header {
-    padding-bottom: var(--#{$namespace}-dialog-padding-primary);
-}
-
-.#{$namespace}-dialog__header.show-close {
-    padding-right: calc(var(--#{$namespace}-dialog-padding-primary) + var(--#{$namespace}-message-close-size, 16px));
-}
-
-.#{$namespace}-dialog__headerbtn {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0;
-    width: 48px;
-    height: 48px;
-    background: transparent;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    font-size: var(--#{$namespace}-message-close-size, 16px);
-
-    & .#{$namespace}-dialog__close {
-        color: var(--#{$namespace}-color-info);
-        font-size: inherit;
-    }
 
-    &:focus .#{$namespace}-dialog__close,
-    &:hover .#{$namespace}-dialog__close {
-        color: var(--#{$namespace}-color-primary);
+    @include when(closing) {
+        @include b(dialog) {
+            pointer-events: none;
+        }
     }
 }
 
-.#{$namespace}-dialog__title {
-    line-height: var(--#{$namespace}-dialog-font-line-height);
-    font-size: var(--#{$namespace}-dialog-title-font-size);
-    color: var(--#{$namespace}-text-color-primary);
+.dialog-fade-enter-active {
+    animation: modal-fade-in getCssVar('transition-duration');
+    .#{$namespace}-overlay-dialog {
+        animation: dialog-fade-in getCssVar('transition-duration');
+    }
 }
 
-.#{$namespace}-dialog__body {
-    color: var(--#{$namespace}-text-color-regular);
-    font-size: var(--#{$namespace}-dialog-content-font-size);
+.dialog-fade-leave-active {
+    animation: modal-fade-out getCssVar('transition-duration');
+    .#{$namespace}-overlay-dialog {
+        animation: dialog-fade-out getCssVar('transition-duration');
+    }
 }
 
-.#{$namespace}-dialog__footer {
-    padding-top: var(--#{$namespace}-dialog-padding-primary);
-    text-align: right;
-    box-sizing: border-box;
-
-    &.is-left {
-        text-align: left;
+@keyframes dialog-fade-in {
+    0% {
+        transform: translate3d(0, -20px, 0);
+        opacity: 0;
     }
-
-    &.is-center {
-        text-align: center;
+    100% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
     }
+}
 
-    &.is-right {
-        text-align: right;
+@keyframes dialog-fade-out {
+    0% {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+    100% {
+        transform: translate3d(0, -20px, 0);
+        opacity: 0;
     }
 }
 
-.#{$namespace}-dialog--center {
-    text-align: center;
-
-    & .#{$namespace}-dialog__body {
-        text-align: initial;
+@keyframes modal-fade-in {
+    0% {
+        opacity: 0;
     }
-
-    & .#{$namespace}-dialog__footer {
-        text-align: inherit;
+    100% {
+        opacity: 1;
     }
 }
 
-.#{$namespace}-overlay-dialog {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
+@keyframes modal-fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
 }