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

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

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

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

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

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

@@ -1,13 +1,15 @@
-@import 'functions';
-@import 'variables';
+@use 'sass:string';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {
-    --#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
+    --#{$fa-css-prefix}-font-brands: normal 400 1em/1 '#{ $fa-style-family }';
 }
 
 @font-face {
-    font-family: 'Font Awesome 6 Brands';
+    font-family: #{$fa-style-family};
     font-style: normal;
     font-weight: 400;
     font-display: $fa-font-display;
@@ -16,12 +18,12 @@
 
 .fab,
 .#{$fa-css-prefix}-brands {
-    font-family: 'Font Awesome 6 Brands';
+    font-family: #{$fa-style-family};
     font-weight: 400;
 }
 
 @each $name, $icon in $fa-brand-icons {
     .#{$fa-css-prefix}-#{$name}:before {
-        content: unquote('"#{ $icon }"');
+        content: string.unquote('"#{ $icon }"');
     }
 }

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

@@ -1,13 +1,14 @@
-@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;
@@ -17,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

@@ -1,13 +1,13 @@
-@import 'functions';
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'sizing';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';
+@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

@@ -1,15 +1,12 @@
-@import 'functions';
-@import 'variables';
-@import 'mixins';
-@import 'core';
-@import 'sizing';
-@import 'fixed-width';
-@import 'list';
-@import 'bordered-pulled';
-@import 'animated';
-@import 'rotated-flipped';
-@import 'stacked';
-@import 'icons';
-@import 'screen-reader';
-@import 'duotone-icons';
-@import 'shims';
+@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/theme-chalk/icon/scss/light.scss

@@ -1,5 +1,6 @@
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {

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

@@ -1,5 +1,6 @@
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {

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

@@ -1,5 +1,6 @@
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {

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

@@ -1,5 +1,6 @@
-@import 'functions';
-@import 'variables';
+@use '../../common/var' as *;
+@use 'functions' as *;
+@use 'variables' as *;
 
 :root,
 :host {

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

@@ -1,3 +1,5 @@
+@use '../../common/var' as *;
+@use 'functions' as *;
 // variables
 // --------------------------
 $fa-css-prefix: fa !default;

package/theme-chalk/index.scss

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

package/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

@@ -1,3 +1,2 @@
-@import './mixins';
-@import './input.scss';
-@import './input-range.scss';
+@use './input.scss';
+@use './input-range.scss';

package/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/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) {

package/theme-chalk/{input-number/index.scss → 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/theme-chalk/{link/index.scss → link.scss}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use './mixins/config' as *;
 .#{$namespace}-link {
     --#{$namespace}-link-font-size: 14px;
     --#{$namespace}-link-font-weight: 500;

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

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

package/theme-chalk/{message-box/index.scss → 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/theme-chalk/{message/index.scss → 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);

package/theme-chalk/mixins/_button.scss

@@ -0,0 +1,224 @@
+@use '../mixins/var' as *;
+@use '../mixins/function' as *;
+@use '../common/var' as *;
+
+@mixin button-plain($type) {
+    $button-color-types: (
+        '': (
+            'text-color': (
+                'color',
+                $type,
+            ),
+            'bg-color': (
+                'color',
+                $type,
+                'light-9',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+        ),
+        'hover': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+            'bg-color': (
+                'color',
+                $type,
+            ),
+            'border-color': (
+                'color',
+                $type,
+            ),
+        ),
+        'active': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+        ),
+    );
+
+    @each $type, $typeMap in $button-color-types {
+        @each $typeColor, $list in $typeMap {
+            @include css-var-from-global(('button', $type, $typeColor), $list);
+        }
+    }
+
+    &.is-disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+            color: getCssVar('color', $type, 'light-5');
+            background-color: getCssVar('color', $type, 'light-9');
+            border-color: getCssVar('color', $type, 'light-8');
+        }
+    }
+}
+
+@mixin button-dashed($type) {
+    $button-color-types: (
+        '': (
+            'text-color': (
+                'color',
+                $type,
+            ),
+            'bg-color': (
+                'fill-color-blank',
+            ),
+            'border-color': (
+                'color',
+                $type,
+            ),
+        ),
+        'hover': (
+            'text-color': (
+                'color',
+                $type,
+                'light-3',
+            ),
+            'bg-color': (
+                'fill-color-blank',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'light-3',
+            ),
+        ),
+        'active': (
+            'text-color': (
+                'color',
+                $type,
+            ),
+            'border-color': (
+                'color',
+                $type,
+            ),
+        ),
+    );
+
+    @each $type, $typeMap in $button-color-types {
+        @each $typeColor, $list in $typeMap {
+            @include css-var-from-global(('button', $type, $typeColor), $list);
+        }
+    }
+
+    &.is-disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+            color: getCssVar('color', $type, 'light-5');
+            background-color: getCssVar('fill-color-blank');
+            border-color: getCssVar('color', $type, 'light-8');
+        }
+    }
+}
+
+@mixin button-variant($type) {
+    $button-color-types: (
+        '': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+            'bg-color': (
+                'color',
+                $type,
+            ),
+            'border-color': (
+                'color',
+                $type,
+            ),
+            'outline-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+            'active-color': (
+                'color',
+                $type,
+                'dark-2',
+            ),
+        ),
+        'hover': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+            'link-text-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+            'bg-color': (
+                'color',
+                $type,
+                'light-3',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'light-3',
+            ),
+        ),
+        'active': (
+            'bg-color': (
+                'color',
+                $type,
+                'dark-2',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'dark-2',
+            ),
+        ),
+        'disabled': (
+            'text-color': (
+                'color',
+                'white',
+            ),
+            'bg-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+            'border-color': (
+                'color',
+                $type,
+                'light-5',
+            ),
+        ),
+    );
+
+    @each $type, $typeMap in $button-color-types {
+        @each $typeColor, $list in $typeMap {
+            @include css-var-from-global(('button', $type, $typeColor), $list);
+        }
+    }
+
+    &.is-plain,
+    &.is-text,
+    &.is-link {
+        @include button-plain($type);
+    }
+
+    &.is-dashed {
+        @include button-dashed($type);
+    }
+}
+
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
+    padding: $padding-vertical $padding-horizontal;
+    font-size: $font-size;
+    border-radius: $border-radius;
+    &.is-round {
+        padding: $padding-vertical $padding-horizontal;
+    }
+}

package/theme-chalk/mixins/_col.scss

@@ -0,0 +1,33 @@
+@use 'sass:math';
+
+@use '../common/var' as *;
+@use './mixins' as *;
+
+@mixin col-size($size) {
+  @include res($size) {
+    @for $i from 0 through 24 {
+      .#{$namespace}-col-#{$size}-#{$i} {
+        display: if($i == 0, none, block);
+        max-width: (math.div(1, 24) * $i * 100) * 1%;
+        flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
+        @include when(guttered) {
+          display: if($i == 0, none, block);
+        }
+      }
+
+      .#{$namespace}-col-#{$size}-offset-#{$i} {
+        margin-left: (math.div(1, 24) * $i * 100) * 1%;
+      }
+
+      .#{$namespace}-col-#{$size}-pull-#{$i} {
+        position: relative;
+        right: (math.div(1, 24) * $i * 100) * 1%;
+      }
+
+      .#{$namespace}-col-#{$size}-push-#{$i} {
+        position: relative;
+        left: (math.div(1, 24) * $i * 100) * 1%;
+      }
+    }
+  }
+}