@qsxy/element-plus-react 1.0.0-next.13 → 1.0.0-next.16

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';
@@ -81,8 +81,8 @@ export { TabPane as ElTabPane, Tabs as ElTabs } from './Tabs';
 export type { TabPaneProps, TabsPaneContext, TabsProps } from './Tabs';
 export { Empty as ElEmpty } from './Empty';
 export type { IEmptyProps } from './Empty';
-export { Skeleton as ElSkeleton } from './Skeleton';
-export type { Skeleton as PlaceholderGraphProps, PlaceholderGridProps, PlaceholderParagraphProps } from './Skeleton';
+export { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from './Skeleton';
+export type { SkeletonItemProps, SkeletonProps } from './Skeleton';
 export { Dialog as ElDialog } from './Dialog';
 export type { DialogBeforeCloseFn, DialogProps } from './Dialog';
 export { Drawer as ElDrawer } from './Drawer';

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";
@@ -47,7 +47,7 @@ export { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from "
 export { Dropdown as ElDropdown, DropdownItem as ElDropdownItem, DropdownMenu as ElDropdownMenu } from "./Dropdown";
 export { TabPane as ElTabPane, Tabs as ElTabs } from "./Tabs";
 export { Empty as ElEmpty } from "./Empty";
-export { Skeleton as ElSkeleton } from "./Skeleton";
+export { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from "./Skeleton";
 /* Feedback 反馈组件 */
 export { Dialog as ElDialog } from "./Dialog";
 export { Drawer as ElDrawer } from "./Drawer";

package/package.json

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

package/theme-chalk/drawer/index.scss

@@ -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/theme-chalk/index.scss

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

package/theme-chalk/placeholder/index.scss

@@ -1,18 +1,18 @@
 @use '../common/var';
 
-.#{$namespace}-placeholder {
+.#{$namespace}-skeleton {
     --#{$namespace}-skeleton-color: var(--#{$namespace}-fill-color);
     --#{$namespace}-skeleton-to-color: var(--#{$namespace}-fill-color-darker);
 }
 
 .is-dark {
-    .#{$namespace}-placeholder {
+    .#{$namespace}-skeleton {
         --#{$namespace}-skeleton-color: #3c3f43;
         --#{$namespace}-skeleton-to-color: #484c50;
     }
 }
 
-.#{$namespace}-placeholder {
+.#{$namespace}-skeleton {
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     -webkit-box-align: start;
@@ -38,33 +38,18 @@
             }
 
             &-image {
-                width: 80px;
-                height: 60px;
-                position: relative;
-                overflow: hidden;
-
-                &::after {
-                    content: '';
-                    width: 0;
-                    height: 0;
-                    left: 10px;
-                    bottom: 10px;
-                    position: absolute;
-                    border-bottom: 36px solid;
-                    border-left: 20px solid transparent;
-                    border-right: 30px solid transparent;
-                }
-
-                &::before {
-                    content: '';
-                    width: 0;
-                    height: 0;
-                    left: 40px;
-                    bottom: 10px;
-                    position: absolute;
-                    border-bottom: 22px solid;
-                    border-left: 16px solid transparent;
-                    border-right: 16px solid transparent;
+                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%;
                 }
             }
 
@@ -81,7 +66,7 @@
         &-rows {
             width: 100%;
 
-            & > p {
+            .#{$namespace}-skeleton__item {
                 background-color: var(--#{$namespace}-skeleton-color);
                 border-radius: 4px;
             }
@@ -113,17 +98,17 @@
     }
 
     &-active {
-        &.#{$namespace}-placeholder-graph,
-        .#{$namespace}-placeholder-paragraph-graph-image,
-        .#{$namespace}-placeholder-grid-col > p,
-        .#{$namespace}-placeholder-paragraph-rows > p {
+        &.#{$namespace}-skeleton-graph,
+        .#{$namespace}-skeleton-paragraph-graph-image,
+        .#{$namespace}-skeleton-grid-col > p,
+        .#{$namespace}-skeleton-paragraph-rows > p {
             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: placeholder-active 1.4s ease infinite;
+            animation: skeleton-active 1.4s ease infinite;
         }
     }
 
-    @keyframes placeholder-active {
+    @keyframes skeleton-active {
         0% {
             background-position: 100% 50%;
         }

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;