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

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

@@ -1,3 +1,5 @@
+@use 'variables' as *;
+@use 'mixins' as *;
 // sizing icons
 // -------------------------
 

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

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

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

@@ -0,0 +1,29 @@
+@use 'sass:string';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
+
+:root,
+:host {
+    --#{$fa-css-prefix}-font-brands: normal 400 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+    font-family: #{$fa-style-family};
+    font-style: normal;
+    font-weight: 400;
+    font-display: $fa-font-display;
+    src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'), url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
+}
+
+.fab,
+.#{$fa-css-prefix}-brands {
+    font-family: #{$fa-style-family};
+    font-weight: 400;
+}
+
+@each $name, $icon in $fa-brand-icons {
+    .#{$fa-css-prefix}-#{$name}:before {
+        content: string.unquote('"#{ $icon }"');
+    }
+}

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

@@ -1,18 +1,14 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {
-    --#{$fa-css-prefix}-font-duotone: normal 900 1em/1 'Font Awesome 6 Duotone';
+    --#{$fa-css-prefix}-font-duotone: normal 900 1em/1 '#{ $fa-style-family } Duotone';
 }
 
 @font-face {
-    font-family: 'Font Awesome 6 Duotone';
+    font-family: '#{ $fa-style-family } Duotone';
     font-style: normal;
     font-weight: 900;
     font-display: $fa-font-display;
@@ -22,7 +18,7 @@
 .fad,
 .#{$fa-css-prefix}-duotone {
     position: relative;
-    font-family: 'Font Awesome 6 Duotone';
+    font-family: '#{ $fa-style-family } Duotone';
     font-weight: 900;
     letter-spacing: normal;
 }

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

@@ -0,0 +1,13 @@
+@use 'functions';
+@use 'variables';
+@use 'mixins';
+@use 'core';
+@use 'sizing';
+@use 'fixed-width';
+@use 'list';
+@use 'bordered-pulled';
+@use 'animated';
+@use 'rotated-flipped';
+@use 'stacked';
+@use 'icons';
+@use 'screen-reader';

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

@@ -0,0 +1,12 @@
+@use 'core';
+@use 'sizing';
+@use 'fixed-width';
+@use 'list';
+@use 'bordered-pulled';
+@use 'animated';
+@use 'rotated-flipped';
+@use 'stacked';
+@use 'icons';
+@use 'screen-reader';
+@use 'duotone-icons';
+@use 'shims';

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

@@ -1,10 +1,6 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {
@@ -12,7 +8,7 @@
 }
 
 @font-face {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-style: normal;
     font-weight: 300;
     font-display: $fa-font-display;
@@ -21,6 +17,6 @@
 
 .fal,
 .#{$fa-css-prefix}-light {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-weight: 300;
 }

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

@@ -1,10 +1,6 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {
@@ -12,7 +8,7 @@
 }
 
 @font-face {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-style: normal;
     font-weight: 400;
     font-display: $fa-font-display;
@@ -21,6 +17,6 @@
 
 .far,
 .#{$fa-css-prefix}-regular {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-weight: 400;
 }

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

@@ -1,10 +1,6 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {
@@ -12,7 +8,7 @@
 }
 
 @font-face {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-style: normal;
     font-weight: 900;
     font-display: $fa-font-display;
@@ -21,6 +17,6 @@
 
 .fas,
 .#{$fa-css-prefix}-solid {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-weight: 900;
 }

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

@@ -1,10 +1,6 @@
-/*!
- * Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com
- * License - https://fontawesome.com/license (Commercial License)
- * Copyright 2022 Fonticons, Inc.
- */
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {
@@ -12,7 +8,7 @@
 }
 
 @font-face {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-style: normal;
     font-weight: 100;
     font-display: $fa-font-display;
@@ -21,6 +17,6 @@
 
 .fat,
 .#{$fa-css-prefix}-thin {
-    font-family: 'R Icons';
+    font-family: $fa-style-family;
     font-weight: 100;
 }

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

@@ -1,9 +1,10 @@
+@use '../../common/var' as *;
+@use 'functions' as *;
 // variables
 // --------------------------
-
 $fa-css-prefix: fa !default;
 $fa-style: 900 !default;
-$fa-style-family: 'R Icons' !default;
+$fa-style-family: $fa-font-family;
 
 $fa-display: inline-block !default;
 
@@ -46,7 +47,6 @@ $fa-stack-width: ($fa-fw-width * 2) !default;
 $fa-stack-z-index: auto !default;
 
 $fa-font-display: block !default;
-$fa-font-path: '/fonts' !default;
 
 $fa-var-0: \30;
 $fa-var-1: \31;

package/theme-chalk/index.scss

@@ -0,0 +1,73 @@
+/* Basic 基础组件 */
+@use './var';
+@use './link';
+@use './button';
+@use './button-group';
+@use './icon/fonts';
+@use './icon';
+@use './row';
+@use './col';
+@use './scrollbar';
+@use './popper';
+@use './transition';
+
+// /* Form 表单组件 */
+@use './cascader';
+@use './cascader-panel';
+@use './carousel';
+@use './checkbox';
+@use './checkbox-button';
+@use './checkbox-group';
+@use './color-picker';
+@use './radio';
+@use './radio-button';
+@use './radio-group';
+@use './input';
+@use './input-number';
+@use './select';
+@use './calendar';
+@use './date-picker';
+@use './date-time-picker';
+@use './time-range-picker';
+@use './time-picker';
+@use './switch';
+@use './transfer';
+@use './form';
+@use './upload';
+
+/* Data 数据展示 */
+@use './avatar';
+@use './badge';
+@use './card';
+@use './collapse';
+@use './descriptions';
+@use './descriptions-item';
+@use './pagination';
+@use './progress';
+@use './table';
+@use './time-line';
+@use './timeline-item';
+@use './tree';
+@use './tree-select';
+@use './tag';
+
+// /* Navigation 导航 */
+@use './breadcrumb';
+@use './dropdown';
+@use './tabs';
+@use './empty';
+@use './skeleton';
+
+/* Feedback 反馈组件 */
+@use './dialog';
+@use './drawer';
+@use './loading';
+@use './message';
+@use './message-box';
+@use './notification';
+@use './tooltip';
+@use './popconfirm';
+@use './popover';
+
+/* Others 其他 */
+@use './divider';

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

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use '../mixins/config' as *;
 
 @mixin placeholder {
     &::-webkit-input-placeholder {

package/theme-chalk/input/index.scss

@@ -0,0 +1,2 @@
+@use './input.scss';
+@use './input-range.scss';

package/{dist/theme-chalk → theme-chalk}/input/input-range.scss

@@ -1,4 +1,5 @@
-@use '../common/var';
+@use '../mixins/config' as *;
+@use './mixins' as *;
 @use 'sass:map';
 
 $input-height: () !default;

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

@@ -1,4 +1,5 @@
-@use '../common/var';
+@use '../mixins/config' as *;
+@use './mixins' as *;
 @use 'sass:map';
 
 @mixin inset-prepend-border($color, $important: false) {
@@ -160,11 +161,12 @@
 }
 
 .#{$namespace}-input {
+    --#{$namespace}-input-inner-height: calc(var(--#{$namespace}-input-height, 32px) - 2px);
     position: relative;
     display: inline-flex;
     width: 100%;
     font-size: 14px;
-    line-height: var(--#{$namespace}-input-height, 32px);
+    line-height: var(--#{$namespace}-input-inner-height, 30px);
     box-sizing: border-box;
     vertical-align: middle;
 
@@ -411,6 +413,7 @@
     .#{$namespace}-button {
         display: inline-block;
         margin: 0 -20px;
+        line-height: 0;
     }
 
     button.#{$namespace}-button,
@@ -564,12 +567,12 @@
 
 .#{$namespace}-input--large {
     --#{$namespace}-input-height: var(--#{$namespace}-component-size-large);
-    --#{$namespace}-input-inner-height: calc(var(--#{$namespace}-input-height, var(--#{$namespace}-component-size-large)) - 2px);
+    --#{$namespace}-input-inner-height: calc(var(--#{$namespace}-input-height, 40px) - 2px);
     font-size: 14px;
 }
 
 .#{$namespace}-input--small {
     --#{$namespace}-input-height: var(--#{$namespace}-component-size-small);
-    --#{$namespace}-input-inner-height: var(--#{$namespace}-component-size-small);
+    --#{$namespace}-input-inner-height: calc(var(--#{$namespace}-input-height, 24px) - 2px);
     font-size: 12px;
 }

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

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 @use 'sass:map';
 @use 'sass:math';
@@ -97,7 +97,7 @@ $input-height: map.merge(
 
     @each $size in (large, small) {
         &.#{$namespace}-input-number--#{$size} {
-            line-height: #{map.get($input-height, $size) - 2};
+            line-height: calc(#{map.get($input-height, $size)} - 2px);
 
             .#{$namespace}-input-number__increase,
             .#{$namespace}-input-number__decrease {
@@ -106,8 +106,8 @@ $input-height: map.merge(
             }
 
             .#{$namespace}-input__wrapper {
-                padding-left: #{map.get($input-height, $size) + 7};
-                padding-right: #{map.get($input-height, $size) + 7};
+                padding-left: calc(#{map.get($input-height, $size)} + 7px);
+                padding-right: calc(#{map.get($input-height, $size)} + 7px);
             }
         }
     }

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

@@ -1,89 +1,4 @@
-// @use 'sass:map';
-
-// @use '../../Common/styles/mixins/mixins' as *;
-// @use '../../Common/styles/mixins/var' as *;
-// @use '../../Common/styles/mixins/utils' as *;
-// @use '../../Common/styles/common/var' as *;
-
-// @include b(link) {
-//     @include set-component-css-var('link', $link);
-// }
-
-// @include b(link) {
-//     display: inline-flex;
-//     flex-direction: row;
-//     align-items: center;
-//     justify-content: center;
-//     vertical-align: middle;
-//     position: relative;
-//     text-decoration: none;
-//     outline: none;
-//     cursor: pointer;
-//     padding: 0;
-//     font-size: getCssVar('link', 'font-size');
-//     font-weight: getCssVar('link', 'font-weight');
-
-//     color: getCssVar('link', 'text-color');
-
-//     &:hover {
-//         color: getCssVar('link', 'hover-text-color');
-//     }
-
-//     @include when(underline) {
-//         &:hover:after {
-//             content: '';
-//             position: absolute;
-//             left: 0;
-//             right: 0;
-//             height: 0;
-//             bottom: 0;
-//             border-bottom: 1px solid getCssVar('link', 'hover-text-color');
-//         }
-//     }
-
-//     @include when(disabled) {
-//         color: getCssVar('link', 'disabled-text-color');
-//         cursor: not-allowed;
-//     }
-
-//     & [class*='#{$namespace}-icon-'] {
-//         & + span {
-//             margin-left: 5px;
-//         }
-//     }
-
-//     &.#{$namespace}-link--default {
-//         &:after {
-//             border-color: getCssVar('link', 'hover-text-color');
-//         }
-//     }
-
-//     @include e(inner) {
-//         display: inline-flex;
-//         justify-content: center;
-//         align-items: center;
-//     }
-
-//     @each $type in $types {
-//         &.#{$namespace}-link--#{$type} {
-//             @include css-var-from-global(('link', 'text-color'), ('color', $type));
-//             @include css-var-from-global(('link', 'hover-text-color'), ('color', $type, 'light-3'));
-//             @include css-var-from-global(('link', 'disabled-text-color'), ('color', $type, 'light-5'));
-
-//             &:after {
-//                 border-color: getCssVar('link', 'text-color');
-//             }
-
-//             @include when(underline) {
-//                 &:hover:after {
-//                     border-color: getCssVar('link', 'text-color');
-//                 }
-//             }
-//         }
-//     }
-// }
-
-@use '../common/var';
+@use './mixins/config' as *;
 .#{$namespace}-link {
     --#{$namespace}-link-font-size: 14px;
     --#{$namespace}-link-font-weight: 500;

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

@@ -1,13 +1,11 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
-.#{$namespace}-loading-parent {
-    .#{$namespace}-loading-parent--relative {
-        position: relative !important;
-    }
+.#{$namespace}-loading-parent--relative {
+    position: relative !important;
+}
 
-    .#{$namespace}-loading-parent--hidden {
-        overflow: hidden !important;
-    }
+.#{$namespace}-loading-parent--hidden {
+    overflow: hidden !important;
 }
 
 .#{$namespace}-loading-mask {

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

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
 .#{$namespace}-message-box {
     --#{$namespace}-messagebox-title-color: var(--#{$namespace}-text-color-primary);

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

@@ -1,4 +1,5 @@
-@use '../common/var';
+@use './common/var' as *;
+@use './mixins/config' as *;
 
 .#{$namespace}-message {
     --#{$namespace}-message-bg-color: var(--#{$namespace}-color-info-light-9);
@@ -9,6 +10,8 @@
 
 .#{$namespace}-message {
     min-width: 380px;
+    width: fit-content;
+    max-width: calc(100% - 32px);
     box-sizing: border-box;
     border-radius: 4px;
     border-width: 1px;
@@ -21,8 +24,8 @@
     background-color: var(--#{$namespace}-message-bg-color);
     color: var(--#{$namespace}-message-text-color);
     transition: opacity 0.3s, transform 0.4s, top 0.4s;
-    overflow: hidden;
-    padding: 15px 15px 15px 20px;
+    // overflow: hidden;
+    padding: 15px 19px;
     display: flex;
     align-items: center;
 
@@ -32,7 +35,7 @@
 
     &.is-closable {
         .#{$namespace}-message__content {
-            padding-right: 16px;
+            padding-right: 31px;
         }
     }
 
@@ -103,7 +106,7 @@
         font-size: 16px;
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f00d';
             font-weight: 400;
         }
@@ -120,7 +123,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f058';
             font-style: normal;
             font-weight: bold;
@@ -131,7 +134,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f057';
             font-style: normal;
             font-weight: bold;
@@ -142,7 +145,7 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f05a';
             font-style: normal;
             font-weight: bold;
@@ -153,12 +156,18 @@
         color: var(--#{$namespace}-message-text-color);
 
         &::before {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f06a';
             font-style: normal;
             font-weight: bold;
         }
     }
+
+    .#{$namespace}-message__badge {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+    }
 }
 
 .#{$namespace}-fade-enter-from,