@qsxy/element-plus-react 1.0.0-next.15 → 1.0.0-next.17

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export { Input as ElInput } from './Input';
 export type { InputProps, InputRangeProps, InputRef, TextareaProps, TextareaRef } from './Input';
 export { InputNumber as ElInputNumber } from './InputNumber';
 export type { InputNumberProps, InputNumberRef } from './InputNumber';
-export { Select as ElSelect } from './Select';
+export { Option as ElOption, OptionGroup as ElOptionGroup, Select as ElSelect } from './Select';
 export type { SelectOptionGroupProps, SelectOptionProps, SelectProps, SelectRef } from './Select';
 export { Calendar, CalendarContext } from './Calendar';
 export type { DateRangeType, DateType } from './Calendar';

package/dist/index.js

@@ -17,7 +17,7 @@ export { Radio as ElRadio } from "./Radio";
 export { RadioGroup as ElRadioGroup } from "./RadioGroup";
 export { Input as ElInput } from "./Input";
 export { InputNumber as ElInputNumber } from "./InputNumber";
-export { Select as ElSelect } from "./Select";
+export { Option as ElOption, OptionGroup as ElOptionGroup, Select as ElSelect } from "./Select";
 export { Calendar, CalendarContext } from "./Calendar";
 export { DatePicker as ElDatePicker } from "./DatePicker";
 export { TimePicker as ElTimePicker } from "./TimePicker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.0-next.15",
+  "version": "1.0.0-next.17",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/theme-chalk/index.scss

@@ -50,7 +50,7 @@
 @import './dropdown';
 @import './tabs';
 @import './empty';
-@import './placeholder';
+@import './skeleton';
 
 /* Feedback 反馈组件 */
 @import './dialog';

package/theme-chalk/skeleton/index.scss

@@ -0,0 +1,120 @@
+@use '../common/var';
+
+.#{$namespace}-skeleton {
+    --#{$namespace}-skeleton-color: var(--#{$namespace}-fill-color);
+    --#{$namespace}-skeleton-to-color: var(--#{$namespace}-fill-color-darker);
+}
+
+.is-dark {
+    .#{$namespace}-skeleton {
+        --#{$namespace}-skeleton-color: #3c3f43;
+        --#{$namespace}-skeleton-to-color: #484c50;
+    }
+}
+
+.#{$namespace}-skeleton {
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    -webkit-box-align: start;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    justify-content: flex-start;
+    display: flex;
+
+    &-paragraph {
+        justify-content: flex-start;
+        align-items: flex-start;
+
+        &-graph {
+            flex: 0 0 auto;
+            width: 60px;
+            height: 60px;
+            border-radius: 2px;
+            margin-right: 20px;
+            background-color: var(--#{$namespace}-skeleton-color);
+
+            &-circle {
+                border-radius: 50%;
+            }
+
+            &-image {
+                width: 200px;
+                height: 200px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border-radius: 0;
+
+                & > svg {
+                    color: var(--el-border-color);
+                    fill: currentColor;
+                    width: 22%;
+                    height: 22%;
+                }
+            }
+
+            &-image &-inner {
+                width: 12px;
+                height: 12px;
+                right: 18px;
+                top: 10px;
+                border-radius: 50%;
+                position: absolute;
+            }
+        }
+
+        &-rows {
+            width: 100%;
+
+            .#{$namespace}-skeleton__item {
+                background-color: var(--#{$namespace}-skeleton-color);
+                border-radius: 4px;
+            }
+        }
+    }
+
+    &-grid {
+        &-col {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+
+            & > p {
+                background-color: var(--#{$namespace}-skeleton-color);
+                border-radius: 4px;
+            }
+
+            &:first-child {
+                align-items: flex-start; //first col align left
+            }
+        }
+    }
+
+    &-graph {
+        display: inline-block;
+        width: 100%;
+        background-color: var(--#{$namespace}-skeleton-color);
+    }
+
+    &-active {
+        &.#{$namespace}-skeleton-graph,
+        .#{$namespace}-skeleton-paragraph-graph-image,
+        .#{$namespace}-skeleton-grid-col .#{$namespace}-skeleton__item,
+        .#{$namespace}-skeleton-paragraph-rows .#{$namespace}-skeleton__item {
+            background: linear-gradient(-45deg, var(--#{$namespace}-skeleton-color) 25%, var(--#{$namespace}-skeleton-to-color) 37%, var(--#{$namespace}-skeleton-color) 63%);
+            background-size: 400% 100% !important;
+            animation: skeleton-active 1.4s ease infinite;
+        }
+    }
+
+    @keyframes skeleton-active {
+        0% {
+            background-position: 100% 50%;
+        }
+
+        100% {
+            background-position: 0 50%;
+        }
+    }
+}

package/theme-chalk/tabs/index.scss

@@ -298,7 +298,7 @@
         &.#{$namespace}-tabs--border-card,
         &.#{$namespace}-tabs--card,
         .#{$namespace}-tabs--left,
-        .#{$namespace}-tabs--elight {
+        .#{$namespace}-tabs--right {
             & > .#{$namespace}-tabs__header {
                 .#{$namespace}-tabs__item:nth-child(2) {
                     padding-left: 20px;
@@ -332,7 +332,7 @@
         }
     }
     &.#{$namespace}-tabs--left,
-    &.#{$namespace}-tabs--elight {
+    &.#{$namespace}-tabs--right {
         overflow: hidden;
 
         .#{$namespace}-tabs__header.is-left,
@@ -474,7 +474,7 @@
             }
         }
     }
-    &.#{$namespace}-tabs--elight {
+    &.#{$namespace}-tabs--right {
         .#{$namespace}-tabs__header.is-right {
             float: right;
             margin-bottom: 0;

package/theme-chalk/tag/index.scss

@@ -1,160 +1,3 @@
-// @use 'sass:map';
-
-// @use '../../Common/styles/mixins/mixins' as *;
-// @use '../../Common/styles/mixins/var' as *;
-// @use '../../Common/styles/common/var' as *;
-
-// @include b(tag) {
-//     @include set-component-css-var('tag', $tag);
-// }
-
-// $tag-border-width: 1px;
-
-// $tag-icon-span-gap: () !default;
-// $tag-icon-span-gap: map.merge(
-//     (
-//         'large': 8px,
-//         'default': 6px,
-//         'small': 4px,
-//     ),
-//     $tag-icon-span-gap
-// );
-
-// @function returnVarList($var, $type: 'primary') {
-//     $list: ('fill-color', 'blank');
-//     @if $var != false {
-//         $list: ('color', $type, $var);
-//     }
-//     @return $list;
-// }
-// // false mean --#{$namespace}-color-white
-// @mixin genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
-//     @include css-var-from-global(('tag', 'bg-color'), returnVarList($backgroundColorWeight));
-//     @include css-var-from-global(('tag', 'border-color'), returnVarList($borderColorWeight));
-//     @include css-var-from-global(('tag', 'hover-color'), returnVarList($hoverColorWeight));
-
-//     @each $type in $types {
-//         &.#{bem('tag', '', $type)} {
-//             @include css-var-from-global(('tag', 'bg-color'), returnVarList($backgroundColorWeight, $type));
-//             @include css-var-from-global(('tag', 'border-color'), returnVarList($borderColorWeight, $type));
-//             @include css-var-from-global(('tag', 'hover-color'), returnVarList($hoverColorWeight, $type));
-//         }
-//     }
-// }
-
-// @include b(tag) {
-//     @include genTheme('light-9', 'light-8', '');
-
-//     @each $type in $types {
-//         &.#{bem('tag', '', $type)} {
-//             @include css-var-from-global(('tag', 'text-color'), ('color', $type));
-//         }
-//     }
-
-//     @include when(hit) {
-//         border-color: getCssVar('color', 'primary');
-//     }
-//     @include when(round) {
-//         border-radius: getCssVar('tag', 'border-radius-rounded');
-//     }
-
-//     .#{$namespace}-tag__close {
-//         flex-shrink: 0;
-//         color: getCssVar('tag', 'text-color');
-//         &:hover {
-//             color: getCssVar('color-white');
-//             background-color: getCssVar('tag-hover-color');
-//         }
-//     }
-
-//     background-color: getCssVar('tag-bg-color');
-//     border-color: getCssVar('tag-border-color');
-//     color: getCssVar('tag-text-color');
-
-//     display: inline-flex;
-//     justify-content: center;
-//     align-items: center;
-//     vertical-align: middle;
-//     height: map.get($tag-height, 'default');
-//     padding: 0 map.get($tag-padding, 'default') - $border-width;
-
-//     font-size: getCssVar('tag-font-size');
-//     line-height: 1;
-//     border-width: $tag-border-width;
-//     border-style: solid;
-//     border-radius: getCssVar('tag-border-radius');
-//     box-sizing: border-box;
-//     white-space: nowrap;
-
-//     @include set-css-var-value('icon-size', 14px);
-
-//     $svg-margin-size: 1px;
-//     .#{$namespace}-icon {
-//         border-radius: 50%;
-//         cursor: pointer;
-
-//         font-size: calc(#{getCssVar('icon-size')} - #{$svg-margin-size * 2});
-//         height: getCssVar('icon-size');
-//         width: getCssVar('icon-size');
-//     }
-
-//     .#{$namespace}-tag__close {
-//         margin-left: map.get($tag-icon-span-gap, 'default');
-//     }
-
-//     @include m(dark) {
-//         @include genTheme('', '', 'light-3');
-//         @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
-
-//         @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
-//         @each $type in $types {
-//             &.#{bem('tag', '', $type)} {
-//                 @include css-var-from-global(('tag', 'text-color'), ('color', 'white'));
-//             }
-//         }
-//     }
-
-//     @include m(plain) {
-//         @include genTheme(false, 'light-5', '');
-//         @include css-var-from-global(('tag', 'bg-color'), ('fill-color', 'blank'));
-//     }
-
-//     &.is-closable {
-//         padding-right: map.get($tag-icon-span-gap, 'default') - $border-width;
-//     }
-
-//     @each $size in (large, small) {
-//         @include m($size) {
-//             padding: 0 map.get($tag-padding, $size) - $tag-border-width;
-//             height: map.get($tag-height, $size);
-
-//             @include set-css-var-value('icon-size', #{map.get($tag-icon-size, $size)});
-
-//             .#{$namespace}-tag__close {
-//                 margin-left: map.get($tag-icon-span-gap, $size);
-//             }
-
-//             &.is-closable {
-//                 padding-right: map.get($tag-icon-span-gap, $size) - $border-width;
-//             }
-//         }
-//     }
-
-//     @include m(small) {
-//         .#{$namespace}-icon-close {
-//             transform: scale(0.8);
-//         }
-//     }
-
-//     @each $type in $types {
-//         &.#{bem('tag', '', $type)} {
-//             @include when(hit) {
-//                 border-color: getCssVar('color', $type);
-//             }
-//         }
-//     }
-// }
-
 @use 'sass:map';
 @use '../common/var';
 
@@ -215,7 +58,7 @@ $tag-icon-span-gap: map.merge(
     --#{$namespace}-tag-border-color: var(--#{$namespace}-color-primary#{joinVarName($borderColorWeight)});
     --#{$namespace}-tag-hover-color: var(--#{$namespace}-color-primary#{joinVarName($hoverColorWeight)});
 
-    @each $type in success, warning, error, info {
+    @each $type in success, warning, error, danger, info {
         &.#{$namespace}-tag--#{$type} {
             --#{$namespace}-tag-bg-color: var(--#{$namespace}-color#{joinVarName(($type, $backgroundColorWeight))});
             --#{$namespace}-tag-border-color: var(--#{$namespace}-color#{joinVarName(($type, $borderColorWeight))});
@@ -233,7 +76,7 @@ $tag-icon-span-gap: map.merge(
 .#{$namespace}-tag {
     @include genTheme('light-9', 'light-8', '');
     --#{$namespace}-tag-text-color: var(--#{$namespace}-color-primary);
-    @each $type in success, warning, error, info {
+    @each $type in success, warning, error, danger, info {
         &.#{$namespace}-tag--#{$type} {
             --#{$namespace}-tag-text-color: var(--#{$namespace}-color-#{$type});
         }
@@ -302,7 +145,7 @@ $tag-icon-span-gap: map.merge(
         padding-right: map.get($tag-icon-span-gap, 'default') - 1px;
     }
 
-    @each $type in success, warning, error, info {
+    @each $type in success, warning, error, danger, info {
         &.#{$namespace}-tag--#{$type} {
             &.is-hit {
                 border-color: var(--#{$namespace}-color-#{$type});
@@ -315,7 +158,7 @@ $tag-icon-span-gap: map.merge(
     @include genTheme('', '', 'light-3');
     --#{$namespace}-tag-text-color: var(--#{$namespace}-color-white);
 
-    @each $type in success, warning, error, info {
+    @each $type in success, warning, error, danger, info {
         &.#{$namespace}-tag--#{$type} {
             --#{$namespace}-tag-text-color: var(--#{$namespace}-color-white);
         }
@@ -327,7 +170,7 @@ $tag-icon-span-gap: map.merge(
     --#{$namespace}-tag-border-color: var(--#{$namespace}-color-primary-light-5);
     --#{$namespace}-tag-hover-color: var(--#{$namespace}-color-primary);
 
-    @each $type in success, warning, error, info {
+    @each $type in success, warning, error, danger, info {
         &.#{$namespace}-tag--#{$type} {
             --#{$namespace}-tag-bg-color: var(--#{$namespace}-fill-color-blank);
             --#{$namespace}-tag-border-color: var(--#{$namespace}-color#{joinVarName(($type, 'light-5'))});

package/theme-chalk/time-line/_timeline-item.scss

@@ -59,7 +59,7 @@
 @each $type in (success, warning, danger, info) {
     .#{$namespace}-timeline-item__node--#{$type} {
         background-color: var(--#{$namespace}-color-#{$type});
-        border-color: var(--#{$namespace}-color#{$type});
+        border-color: var(--#{$namespace}-color-#{$type});
     }
 }