@qsxy/element-plus-react 1.0.0-next.8 → 1.0.2

package/theme-chalk/container.scss

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +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);
+}

package/theme-chalk/dark/var.scss

@@ -0,0 +1,225 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:color';
+
+@use '../common/var.scss' as common;
+@use '../mixins/mixins.scss' as *;
+@use '../color/index.scss' as *;
+@use '../mixins/function.scss' as *;
+
+$colors: () !default;
+@each $type in common.$types {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        'base': map.get(common.$colors, $type, 'base'),
+      ),
+    ),
+    $colors
+  ) !global;
+}
+
+// https://sass-lang.com/documentation/values/maps#immutability
+// mix colors with white/black to generate light/dark level
+@mixin set-color-mix-level(
+  $type,
+  $number,
+  $mode: 'light',
+  $mix-color: $color-white
+) {
+  // hex mix color
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}':
+          roundColor(
+            color.mix(
+              $mix-color,
+              map.get($colors, $type, 'base'),
+              math.percentage(math.div($number, 10))
+            )
+          ),
+      ),
+    ),
+    $colors
+  ) !global;
+
+  // for designer to view transparent
+  // $colors: map.deep-merge(
+  //   (
+  //     $type: (
+  //       '#{$mode}-#{$number}':
+  //         rgba(map.get($colors, $type, 'base'), math.div(10 - $number, 10)),
+  //     ),
+  //   ),
+  //   $colors
+  // ) !global;
+}
+
+// Background
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    'page': #0a0a0a,
+    '': #141414,
+    'overlay': #1d1e1f,
+  ),
+  $bg-color
+);
+
+// dark-mode
+@each $type in common.$types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', map.get($bg-color, ''));
+  }
+}
+@each $type in common.$types {
+  @include set-color-mix-level($type, 2, 'dark', common.$color-white);
+}
+
+// border
+$border-color-base: #f5f8ff;
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    'darker': rgba($border-color-base, 0.35),
+    'dark': rgba($border-color-base, 0.3),
+    '': rgba($border-color-base, 0.25),
+    'light': rgba($border-color-base, 0.2),
+    'lighter': rgba($border-color-base, 0.15),
+    'extra-light': rgba($border-color-base, 0.1),
+  ),
+  $border-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $border-color {
+  $border-color: map.merge(
+    $border-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, '')),
+    )
+  ) !global;
+}
+
+// Box-shadow
+$box-shadow: () !default;
+$box-shadow: map.merge(
+  (
+    '': (
+      0px 12px 32px 4px rgba(0, 0, 0, 0.36),
+      0px 8px 20px rgba(0, 0, 0, 0.72),
+    ),
+    'light': (
+      0px 0px 12px rgba(0, 0, 0, 0.72),
+    ),
+    'lighter': (
+      0px 0px 6px rgba(0, 0, 0, 0.72),
+    ),
+    'dark': (
+      0px 16px 48px 16px rgba(0, 0, 0, 0.72),
+      0px 12px 32px #000000,
+      0px 8px 16px -8px #000000,
+    ),
+  ),
+  $box-shadow
+);
+
+// fill
+$fill-color-base: #fafcff;
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    'darker': rgba($fill-color-base, 0.2),
+    'dark': rgba($fill-color-base, 0.16),
+    '': rgba($fill-color-base, 0.12),
+    'light': rgba($fill-color-base, 0.08),
+    'lighter': rgba($fill-color-base, 0.04),
+    'extra-light': rgba($fill-color-base, 0.02),
+    'blank': transparent,
+  ),
+  $fill-color
+);
+
+// mix to hex to avoid overlay issues
+@each $key, $val in $fill-color {
+  @if ($key != 'blank') {
+    $fill-color: map.merge(
+      $fill-color,
+      (
+        $key: mix-overlay-color($val, map.get($bg-color, '')),
+      )
+    ) !global;
+  }
+}
+
+// text
+$text-color-base: #f0f5ff;
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': rgba($text-color-base, 0.95),
+    'regular': rgba($text-color-base, 0.85),
+    'secondary': rgba($text-color-base, 0.65),
+    'placeholder': rgba($text-color-base, 0.55),
+    'disabled': rgba($text-color-base, 0.4),
+  ),
+  $text-color
+);
+// mix to hex to avoid overlay issues
+@each $key, $val in $text-color {
+  $text-color: map.merge(
+    $text-color,
+    (
+      $key: mix-overlay-color($val, map.get($bg-color, '')),
+    )
+  ) !global;
+}
+
+// mask
+$mask-color: () !default;
+$mask-color: map.merge(
+  (
+    '': rgba(0, 0, 0, 0.8),
+    'extra-light': rgba(0, 0, 0, 0.3),
+  ),
+  $mask-color
+);
+
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+$button: () !default;
+$button: map.merge(
+  (
+    'disabled-text-color': rgba(255, 255, 255, 0.5),
+  ),
+  $button
+);
+
+// card
+$card: () !default;
+$card: map.merge(
+  (
+    'bg-color': getCssVar('bg-color', 'overlay'),
+  ),
+  $card
+);
+
+// Empty
+// css3 var in packages/theme-chalk/src/empty.scss
+$empty: () !default;
+$empty: map.merge(
+  (
+    'fill-color-0': getCssVar('color-black'),
+    'fill-color-1': #4b4b52,
+    'fill-color-2': #36383d,
+    'fill-color-3': #1e1e20,
+    'fill-color-4': #262629,
+    'fill-color-5': #202124,
+    'fill-color-6': #212224,
+    'fill-color-7': #1b1c1f,
+    'fill-color-8': #1c1d1f,
+    'fill-color-9': #18181a,
+  ),
+  $empty
+);

package/{dist/theme-chalk/date-picker/index.scss → theme-chalk/date-picker.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 @use 'sass:map';
 
@@ -147,7 +147,7 @@ $input-font-size: map.merge(
         padding: 0 5px;
         margin: 0;
         font-size: 14px;
-        word-break: keep-all;
+        word-break: break-all;
         color: var(--#{$namespace}-text-color-primary);
     }
 

package/{dist/theme-chalk/date-time-picker/time-picker.scss → theme-chalk/date-time-picker.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 @use 'sass:math';
 

package/{dist/theme-chalk/descriptions → theme-chalk}/descriptions-item.scss

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 @use 'sass:map';
 

package/{dist/theme-chalk/descriptions → theme-chalk}/descriptions.scss

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 @use 'sass:map';
 

package/theme-chalk/dev.scss

@@ -0,0 +1,2 @@
+@use './common/var' with($fa-font-path: '/fonts');
+@use './index.scss';

package/{dist/theme-chalk/dialog/index.scss → theme-chalk/dialog.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 // Kill the scroll on the body
 .#{$namespace}-popup-parent--hidden {

package/theme-chalk/display.scss

@@ -0,0 +1,46 @@
+@use './mixins/config' as *;
+
+@use 'sass:string';
+@use 'sass:map';
+
+// Break-point
+$sm: 768px !default;
+$md: 992px !default;
+$lg: 1200px !default;
+$xl: 1920px !default;
+
+$breakpoints-spec: (
+    'xs-only': '(max-width: #{$sm - 1})',
+    'sm-and-up': '(min-width: #{$sm})',
+    'sm-only': '(min-width: #{$sm}) and (max-width: #{$md - 1})',
+    'sm-and-down': '(max-width: #{$md - 1})',
+    'md-and-up': '(min-width: #{$md})',
+    'md-only': '(min-width: #{$md}) and (max-width: #{$lg - 1})',
+    'md-and-down': '(max-width: #{$lg - 1})',
+    'lg-and-up': '(min-width: #{$lg})',
+    'lg-only': '(min-width: #{$lg}) and (max-width: #{$xl - 1})',
+    'lg-and-down': '(max-width: #{$xl - 1})',
+    'xl-only': '(min-width: #{$xl})',
+) !default;
+
+// Break-points
+@mixin res($key, $map: $breakpoints) {
+    // loop breakpoint Map, return if present
+    @if map.has-key($map, $key) {
+        @media only screen and #{string.unquote(map.get($map, $key))} {
+            @content;
+        }
+    } @else {
+        @warn "Undefined points: `#{$map}`";
+    }
+}
+
+.hidden {
+    @each $break-point-name, $value in $breakpoints-spec {
+        &-#{$break-point-name} {
+            @include res($break-point-name, $breakpoints-spec) {
+                display: none !important;
+            }
+        }
+    }
+}

package/{dist/theme-chalk/divider/index.scss → theme-chalk/divider.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-divider {
     --#{$namespace}-divider-text-bg-color: var(--#{$namespace}-bg-color);

package/theme-chalk/doc.scss

@@ -0,0 +1,2 @@
+@use './common/var' with($fa-font-path: '/element-plus-react/fonts');
+@use './index.scss';

package/{dist/theme-chalk/drawer/index.scss → theme-chalk/drawer.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-drawer-wrapper {
     height: 100%;
@@ -10,7 +10,7 @@
 }
 
 .#{$namespace}-drawer {
-    --#{$namespace}-drawer-width: auto;
+    --#{$namespace}-drawer-width: 30%;
     --#{$namespace}-drawer-height: 100%;
     --#{$namespace}-drawer-margin-top: 30px;
     --#{$namespace}-drawer-bg-color: var(--#{$namespace}-bg-color-overlay);
@@ -40,60 +40,28 @@
 .#{$namespace}-drawer-right {
     top: 0;
     --#{$namespace}-drawer-height: 100%;
-
-    &.#{$namespace}-drawer-large {
-        --#{$namespace}-drawer-width: 969px;
-    }
-
-    &.#{$namespace}-drawer-md {
-        --#{$namespace}-drawer-width: 800px;
-    }
-
-    &.#{$namespace}-drawer-small {
-        --#{$namespace}-drawer-width: 600px;
-    }
-
-    &.#{$namespace}-drawer-xs {
-        --#{$namespace}-drawer-width: 400px;
-    }
 }
 
 .#{$namespace}-drawer-top,
 .#{$namespace}-drawer-bottom {
     --#{$namespace}-drawer-width: 100%;
-
-    &.#{$namespace}-drawer-large {
-        --#{$namespace}-drawer-height: 568px;
-    }
-
-    &.#{$namespace}-drawer-md {
-        --#{$namespace}-drawer-height: 480px;
-    }
-
-    &.#{$namespace}-drawer-small {
-        --#{$namespace}-drawer-height: 400px;
-    }
-
-    &.#{$namespace}-drawer-xs {
-        --#{$namespace}-drawer-height: 290px;
-    }
 }
 
-.#{$namespace}-drawer-full {
-    &.#{$namespace}-drawer-top,
-    &.#{$namespace}-drawer-bottom {
-        --#{$namespace}-drawer-height: 100%;
+// .#{$namespace}-drawer-full {
+//     &.#{$namespace}-drawer-top,
+//     &.#{$namespace}-drawer-bottom {
+//         --#{$namespace}-drawer-height: 100%;
 
-        .#{$namespace}-drawer-content {
-            --#{$namespace}-drawer-height: 100%;
-        }
-    }
+//         .#{$namespace}-drawer-content {
+//             --#{$namespace}-drawer-height: 100%;
+//         }
+//     }
 
-    &.#{$namespace}-drawer-left,
-    &.#{$namespace}-drawer-right {
-        --#{$namespace}-drawer-width: calc(100% - 60px);
-    }
-}
+//     &.#{$namespace}-drawer-left,
+//     &.#{$namespace}-drawer-right {
+//         --#{$namespace}-drawer-width: calc(100% - 60px);
+//     }
+// }
 
 .#{$namespace}-drawer-right {
     right: 0;
@@ -156,6 +124,13 @@
 }
 
 .#{$namespace}-drawer-header {
+    align-items: center;
+    color: #72767b;
+    display: flex;
+    margin-bottom: 15px;
+    padding: var(--el-drawer-padding-primary);
+    padding-bottom: 0;
+
     &::before,
     &::after {
         content: ' '; // 1
@@ -166,45 +141,66 @@
         clear: both;
     }
 
-    padding: 15px 20px;
+    & > :first-child {
+        flex: 1;
+    }
 
     &.is-border {
         border-bottom: 1px solid var(--#{$namespace}-border-color);
     }
 
     .#{$namespace}-drawer-header-close {
-        background: transparent;
+        display: inline-flex;
         border: none;
         cursor: pointer;
-        position: absolute;
-        right: 20px;
-        top: 12px;
-        font-size: 16px;
-        line-height: 1.6666666667;
-        color: var(--#{$namespace}-color-info);
-        width: 20px;
-        padding: 0 4px;
+        font-size: var(--el-font-size-extra-large);
+        color: inherit;
+        background-color: transparent;
+        outline: none;
+
+        &:focus i,
+        &:hover i {
+            color: var(--el-color-primary);
+        }
+
+        // background: transparent;
+        // border: none;
+        // cursor: pointer;
+        // position: absolute;
+        // right: 20px;
+        // top: 12px;
+        // font-size: 16px;
+        // line-height: 1.6666666667;
+        // color: var(--#{$namespace}-color-info);
+        // width: 20px;
+        // padding: 0 4px;
     }
 }
 
 .#{$namespace}-drawer-title {
-    font-weight: normal;
-    color: var(--#{$namespace}-text-color-primary);
-    display: block;
+    margin: 0;
+    flex: 1;
+    line-height: inherit;
     font-size: 16px;
-    line-height: 1.25;
 
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
+    // font-weight: normal;
+    // color: var(--#{$namespace}-text-color-primary);
+    // display: block;
+    // font-size: 16px;
+    // line-height: 1.25;
+
+    // margin: 0;
+    // overflow: hidden;
+    // text-overflow: ellipsis;
+    // white-space: nowrap;
+    // width: 100%;
 }
 
 .#{$namespace}-drawer-body {
     position: relative;
     flex: 1;
     overflow: hidden;
+    padding: 20px;
 }
 
 .#{$namespace}-drawer-footer {

package/{dist/theme-chalk/dropdown/index.scss → theme-chalk/dropdown.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-dropdown__popper {
     --#{$namespace}-dropdown-menu-box-shadow: var(--#{$namespace}-box-shadow-light);

package/{dist/theme-chalk/empty/index.scss → theme-chalk/empty.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-empty {
     --#{$namespace}-empty-fill-color-0: var(--#{$namespace}-color-white);

package/theme-chalk/footer.scss

@@ -0,0 +1,12 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(footer) {
+  @include set-component-css-var('footer', $footer);
+
+  padding: getCssVar('footer-padding');
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: getCssVar('footer-height');
+}

package/{dist/theme-chalk/form/index.scss → theme-chalk/form.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 @use 'sass:map';
 
@@ -221,11 +221,23 @@ $--gorup-item-width: 400px;
     }
 
     &.is-required {
-        .#{$namespace}-form-item__label::before {
+        &:not(.is-no-asterisk).asterisk-left > .el-form-item__label:before,
+        &:not(.is-no-asterisk).asterisk-left > .el-form-item__label-wrap > .el-form-item__label:before {
             content: '*';
-            color: var(--#{$namespace}-color-error);
+            color: var(--el-color-danger);
             margin-right: 4px;
         }
+
+        &:not(.is-no-asterisk).asterisk-right > .el-form-item__label:after,
+        &:not(.is-no-asterisk).asterisk-right > .el-form-item__label-wrap > .el-form-item__label:after {
+            content: '*';
+            color: var(--el-color-danger);
+            margin-left: 4px;
+        }
+    }
+
+    &.#{$namespace}-form-item--label-top {
+        display: block;
     }
 }
 
@@ -357,3 +369,10 @@ $--gorup-item-width: 400px;
         margin-left: 10px;
     }
 }
+
+.#{$namespace}-form-item__nostyle {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    line-height: 0;
+}