@qsxy/element-plus-react 1.0.0-next.2 → 1.0.0-next.21

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/{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;
+}

package/theme-chalk/icon/fonts.scss

@@ -0,0 +1,9 @@
+@use './scss/index.scss';
+@use './scss/shims.scss';
+
+@use './scss/regular.scss';
+@use './scss/light.scss';
+@use './scss/thin.scss';
+@use './scss/duotone.scss';
+@use './scss/brands.scss';
+@use './scss/solid.scss';

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

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use '../mixins/config' as *;
 
 .#{$namespace}-icon-loading {
     animation: rotating 2s linear infinite;

package/{dist/theme-chalk → theme-chalk}/icon/scss/_animated.scss

@@ -1,3 +1,4 @@
+@use 'variables' as *;
 // animating icons
 // --------------------------
 

package/{dist/theme-chalk → theme-chalk}/icon/scss/_bordered-pulled.scss

@@ -1,3 +1,4 @@
+@use 'variables' as *;
 // bordered + pulled icons
 // -------------------------
 

package/{dist/theme-chalk → theme-chalk}/icon/scss/_core.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+@use 'mixins' as *;
 // base icon class definition
 // -------------------------
 

package/{dist/theme-chalk → theme-chalk}/icon/scss/_duotone-icons.scss

@@ -1,12 +1,11 @@
+@use 'variables' as *;
+@use 'sass:string';
 // specific duotone icon class definition
 // -------------------------
 
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-readers do not read off random characters that represent icons */
-
 @each $name, $icon in $fa-icons {
     .fad.#{$fa-css-prefix}-#{$name}::after,
     .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after {
-        content: unquote('"#{ $icon }#{ $icon }"');
+        content: string.unquote('"#{ $icon }#{ $icon }"');
     }
 }

package/{dist/theme-chalk → theme-chalk}/icon/scss/_fixed-width.scss

@@ -1,3 +1,4 @@
+@use 'variables' as *;
 // fixed-width icons
 // -------------------------
 

package/{dist/theme-chalk → theme-chalk}/icon/scss/_functions.scss

@@ -1,9 +1,10 @@
+@use 'sass:string';
 // functions
 // --------------------------
 
 // fa-content: convenience function used to set content property
 @function fa-content($fa-var) {
-    @return unquote('"#{ $fa-var }"');
+    @return string.unquote('"#{ $fa-var }"');
 }
 
 // fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap

package/theme-chalk/icon/scss/_icons.scss

@@ -0,0 +1,10 @@
+@use 'sass:string';
+@use 'variables' as *;
+// specific icon class definition
+// -------------------------
+
+@each $name, $icon in $fa-icons {
+    .#{$fa-css-prefix}-#{$name}::before {
+        content: string.unquote('"#{ $icon }"');
+    }
+}

package/{dist/theme-chalk → theme-chalk}/icon/scss/_list.scss

@@ -1,3 +1,4 @@
+@use 'variables' as *;
 // icons in a list
 // -------------------------
 

package/{dist/theme-chalk → theme-chalk}/icon/scss/_mixins.scss

@@ -1,3 +1,6 @@
+@use 'sass:string';
+@use 'variables' as *;
+@use 'functions' as *;
 // mixins
 // --------------------------
 
@@ -49,7 +52,7 @@
     @extend .fa-solid;
 
     &::before {
-        content: unquote('"#{ $fa-var }"');
+        content: string.unquote('"#{ $fa-var }"');
     }
 }
 
@@ -58,7 +61,7 @@
     @extend .fa-regular;
 
     &::before {
-        content: unquote('"#{ $fa-var }"');
+        content: string.unquote('"#{ $fa-var }"');
     }
 }
 
@@ -67,7 +70,7 @@
     @extend .fa-light;
 
     &::before {
-        content: unquote('"#{ $fa-var }"');
+        content: string.unquote('"#{ $fa-var }"');
     }
 }
 
@@ -76,7 +79,7 @@
     @extend .fa-thin;
 
     &::before {
-        content: unquote('"#{ $fa-var }"');
+        content: string.unquote('"#{ $fa-var }"');
     }
 }
 
@@ -85,10 +88,10 @@
     @extend .fa-duotone;
 
     &::before {
-        content: unquote('"#{ $fa-var }"');
+        content: string.unquote('"#{ $fa-var }"');
     }
     &::after {
-        content: unquote('"#{ $fa-var }#{ $fa-var }"');
+        content: string.unquote('"#{ $fa-var }#{ $fa-var }"');
     }
 }
 
@@ -97,6 +100,6 @@
     @extend .fa-brands;
 
     &::before {
-        content: unquote('"#{ $fa-var }"');
+        content: string.unquote('"#{ $fa-var }"');
     }
 }

package/{dist/theme-chalk → theme-chalk}/icon/scss/_rotated-flipped.scss

@@ -1,3 +1,4 @@
+@use 'variables' as *;
 // rotating + flipping icons
 // -------------------------
 

package/{dist/theme-chalk → theme-chalk}/icon/scss/_screen-reader.scss

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+@use 'mixins' as *;
 // screen-reader utilities
 // -------------------------