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

package/dist/index.d.ts

@@ -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

@@ -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.15",
   "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/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%;
         }