@qsxy/element-plus-react 1.0.2 → 2.0.0

package/theme-chalk/color/index.scss

@@ -1,20 +1,20 @@
-@use 'sass:color';
-@use 'sass:string';
-
-@function rgb2hex($color) {
-  @return string.unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
-}
-
-// rgba color above solid color
-@function mix-overlay-color($upper, $lower) {
-  $opacity: color.alpha($upper);
-
-  $red: color.channel($upper, 'red') * $opacity + color.channel($lower, 'red') *
-    (1 - $opacity);
-  $green: color.channel($upper, 'green') * $opacity +
-    color.channel($lower, 'green') * (1 - $opacity);
-  $blue: color.channel($upper, 'blue') * $opacity +
-    color.channel($lower, 'blue') * (1 - $opacity);
-
-  @return rgb2hex(rgb($red, $green, $blue));
-}
+@use 'sass:color';
+@use 'sass:string';
+
+@function rgb2hex($color) {
+  @return string.unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
+}
+
+// rgba color above solid color
+@function mix-overlay-color($upper, $lower) {
+  $opacity: color.alpha($upper);
+
+  $red: color.channel($upper, 'red') * $opacity + color.channel($lower, 'red') *
+    (1 - $opacity);
+  $green: color.channel($upper, 'green') * $opacity +
+    color.channel($lower, 'green') * (1 - $opacity);
+  $blue: color.channel($upper, 'blue') * $opacity +
+    color.channel($lower, 'blue') * (1 - $opacity);
+
+  @return rgb2hex(rgb($red, $green, $blue));
+}

package/theme-chalk/common/popup.scss

@@ -0,0 +1,47 @@
+@use './var' as *;
+@use '../mixins/mixins' as *;
+@use '../mixins/var' as *;
+
+:root {
+  @include set-component-css-var('popup', $popup);
+}
+
+.v-modal-enter {
+  animation: v-modal-in getCssVar('transition-duration-fast') ease;
+}
+
+.v-modal-leave {
+  animation: v-modal-out getCssVar('transition-duration-fast') ease forwards;
+}
+
+@keyframes v-modal-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+  }
+}
+
+@keyframes v-modal-out {
+  0% {
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.v-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: getCssVar('popup-modal-opacity');
+  background: getCssVar('popup-modal-bg-color');
+}
+
+@include b(popup-parent) {
+  @include m(hidden) {
+    overflow: hidden;
+  }
+}

package/theme-chalk/common/transition.scss

@@ -1,142 +1,142 @@
-@use '../mixins/config' as *;
-@use '../mixins/mixins' as *;
-
-.fade-in-linear-enter-active,
-.fade-in-linear-leave-active {
-    transition: getCssVar('transition-fade', 'linear');
-}
-
-.fade-in-linear-enter-from,
-.fade-in-linear-leave-to {
-    opacity: 0;
-}
-
-.#{$namespace}-fade-in-linear-enter-active,
-.#{$namespace}-fade-in-linear-leave-active {
-    transition: getCssVar('transition-fade', 'linear');
-}
-.#{$namespace}-fade-in-linear-enter-from,
-.#{$namespace}-fade-in-linear-leave-to {
-    opacity: 0;
-}
-
-.#{$namespace}-fade-in-enter-active,
-.#{$namespace}-fade-in-leave-active {
-    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
-}
-.#{$namespace}-fade-in-enter-from,
-.#{$namespace}-fade-in-leave-active {
-    opacity: 0;
-}
-
-.#{$namespace}-zoom-in-center-enter-active,
-.#{$namespace}-zoom-in-center-leave-active {
-    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
-}
-.#{$namespace}-zoom-in-center-enter-from,
-.#{$namespace}-zoom-in-center-leave-active {
-    opacity: 0;
-    transform: scaleX(0);
-}
-
-.#{$namespace}-zoom-in-top-enter-active,
-.#{$namespace}-zoom-in-top-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition: getCssVar('transition-md-fade');
-    transform-origin: center top;
-
-    &[data-popper-placement^='top'] {
-        transform-origin: center bottom;
-    }
-}
-.#{$namespace}-zoom-in-top-enter-from,
-.#{$namespace}-zoom-in-top-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-bottom-enter-active,
-.#{$namespace}-zoom-in-bottom-leave-active {
-    opacity: 1;
-    transform: scaleY(1);
-    transition: getCssVar('transition-md-fade');
-    transform-origin: center bottom;
-}
-.#{$namespace}-zoom-in-bottom-enter-from,
-.#{$namespace}-zoom-in-bottom-leave-active {
-    opacity: 0;
-    transform: scaleY(0);
-}
-
-.#{$namespace}-zoom-in-left-enter-active,
-.#{$namespace}-zoom-in-left-leave-active {
-    opacity: 1;
-    transform: scale(1, 1);
-    transition: getCssVar('transition-md-fade');
-    transform-origin: top left;
-}
-.#{$namespace}-zoom-in-left-enter-from,
-.#{$namespace}-zoom-in-left-leave-active {
-    opacity: 0;
-    transform: scale(0.45, 0.45);
-}
-
-.collapse-transition {
-    transition: getCssVar('transition-duration') height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
-        getCssVar('transition-duration') padding-bottom ease-in-out;
-}
-
-.#{$namespace}-collapse-transition-leave-active,
-.#{$namespace}-collapse-transition-enter-active {
-    transition: getCssVar('transition-duration') max-height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
-        getCssVar('transition-duration') padding-bottom ease-in-out;
-}
-
-.#{$namespace}-menu-collapse-enter-active,
-.#{$namespace}-menu-collapse-leave-active {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-play-state: paused;
-}
-
-.#{$namespace}-menu-collapse-enter-from {
-    // opacity: 0;
-    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
-    animation-name: rSlideUpIn;
-    animation-play-state: running;
-}
-
-.#{$namespace}-menu-collapse-leave-active {
-    animation-name: treeNodeLeave;
-    animation-play-state: running;
-    pointer-events: none;
-}
-
-.#{$namespace}-menu-collapse-leave-to {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-}
-
-.horizontal-collapse-transition {
-    transition: getCssVar('transition-duration') width ease-in-out, getCssVar('transition-duration') padding-left ease-in-out,
-        getCssVar('transition-duration') padding-right ease-in-out;
-}
-
-.#{$namespace}-list-enter-active,
-.#{$namespace}-list-leave-active {
-    transition: all 1s;
-}
-
-.#{$namespace}-list-enter-from,
-.#{$namespace}-list-leave-to {
-    opacity: 0;
-    transform: translateY(-30px);
-}
-
-.#{$namespace}-list-leave-active {
-    position: absolute !important;
-}
-
-.#{$namespace}-opacity-transition {
-    transition: opacity getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
-}
+@use '../mixins/config' as *;
+@use '../mixins/mixins' as *;
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+    opacity: 0;
+}
+
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
+    opacity: 0;
+    transform: scaleX(0);
+}
+
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center top;
+
+    &[data-popper-placement^='top'] {
+        transform-origin: center bottom;
+    }
+}
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center bottom;
+}
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 1;
+    transform: scale(1, 1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: top left;
+}
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 0;
+    transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+    transition: getCssVar('transition-duration') height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-collapse-transition-leave-active,
+.#{$namespace}-collapse-transition-enter-active {
+    transition: getCssVar('transition-duration') max-height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-menu-collapse-enter-active,
+.#{$namespace}-menu-collapse-leave-active {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+}
+
+.#{$namespace}-menu-collapse-enter-from {
+    // opacity: 0;
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    animation-name: rSlideUpIn;
+    animation-play-state: running;
+}
+
+.#{$namespace}-menu-collapse-leave-active {
+    animation-name: treeNodeLeave;
+    animation-play-state: running;
+    pointer-events: none;
+}
+
+.#{$namespace}-menu-collapse-leave-to {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+.horizontal-collapse-transition {
+    transition: getCssVar('transition-duration') width ease-in-out, getCssVar('transition-duration') padding-left ease-in-out,
+        getCssVar('transition-duration') padding-right ease-in-out;
+}
+
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
+    transition: all 1s;
+}
+
+.#{$namespace}-list-enter-from,
+.#{$namespace}-list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+}
+
+.#{$namespace}-list-leave-active {
+    position: absolute !important;
+}
+
+.#{$namespace}-opacity-transition {
+    transition: opacity getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}

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/container.scss

@@ -1,14 +1,14 @@
-@use 'mixins/mixins' as *;
-
-@include b(container) {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  flex-basis: auto;
-  box-sizing: border-box;
-  min-width: 0;
-
-  @include when(vertical) {
-    flex-direction: column;
-  }
-}
+@use 'mixins/mixins' as *;
+
+@include b(container) {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+  min-width: 0;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+}

package/theme-chalk/dark/css-vars.scss

@@ -1,39 +1,39 @@
-// CSS3 var
-@use './var' as *;
-@use '../mixins/_var.scss' as *;
-@use '../mixins/mixins.scss' as *;
-
-html.dark {
-  color-scheme: dark;
-
-  // hex colors
-  @each $type in (primary, success, warning, danger, error, info) {
-    @include set-css-color-type($colors, $type);
-  }
-
-  // --el-box-shadow-#{$type}
-  @include set-component-css-var('box-shadow', $box-shadow);
-
-  // 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);
-  @include set-component-css-var('mask-color', $mask-color);
-}
-
-@include dark(button) {
-  @include set-component-css-var('button', $button);
-}
-
-@include dark(card) {
-  @include set-component-css-var('card', $card);
-}
-
-@include dark(empty) {
-  @include set-component-css-var('empty', $empty);
-}
+// CSS3 var
+@use './var' as *;
+@use '../mixins/_var.scss' as *;
+@use '../mixins/mixins.scss' as *;
+
+html.dark {
+  color-scheme: dark;
+
+  // hex colors
+  @each $type in (primary, success, warning, danger, error, info) {
+    @include set-css-color-type($colors, $type);
+  }
+
+  // --el-box-shadow-#{$type}
+  @include set-component-css-var('box-shadow', $box-shadow);
+
+  // 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);
+  @include set-component-css-var('mask-color', $mask-color);
+}
+
+@include dark(button) {
+  @include set-component-css-var('button', $button);
+}
+
+@include dark(card) {
+  @include set-component-css-var('card', $card);
+}
+
+@include dark(empty) {
+  @include set-component-css-var('empty', $empty);
+}