@qsxy/element-plus-react 1.0.0-next.12 → 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.12",
+  "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/message/index.scss

@@ -9,6 +9,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 +23,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 +34,7 @@
 
     &.is-closable {
         .#{$namespace}-message__content {
-            padding-right: 16px;
+            padding-right: 31px;
         }
     }
 
@@ -159,6 +161,12 @@
             font-weight: bold;
         }
     }
+
+    .#{$namespace}-message__badge {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+    }
 }
 
 .#{$namespace}-fade-enter-from,

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

@@ -1,50 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-avatar {
-    --#{$namespace}-avatar-text-color: var(--#{$namespace}-color-white);
-    --#{$namespace}-avatar-bg-color: var(--#{$namespace}-text-color-disabled);
-    --#{$namespace}-avatar-text-size: 14px;
-    --#{$namespace}-avatar-icon-size: 18px;
-    --#{$namespace}-avatar-border-radius: var(--#{$namespace}-border-radius-base);
-    --#{$namespace}-avatar-size-large: 56px;
-    --#{$namespace}-avatar-size-small: 24px;
-    --#{$namespace}-avatar-size: 40px;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-    text-align: center;
-    overflow: hidden;
-    outline: none;
-    color: var(--#{$namespace}-avatar-text-color);
-    background: var(--#{$namespace}-avatar-bg-color);
-    width: var(--#{$namespace}-avatar-size);
-    height: var(--#{$namespace}-avatar-size);
-    font-size: var(--#{$namespace}-avatar-text-size);
-}
-
-.#{$namespace}-avatar > img {
-    display: block;
-    width: 100%;
-    height: 100%;
-}
-
-.#{$namespace}-avatar--circle {
-    border-radius: 50%;
-}
-
-.#{$namespace}-avatar--square {
-    border-radius: var(--#{$namespace}-avatar-border-radius);
-}
-
-.#{$namespace}-avatar--icon {
-    font-size: var(--#{$namespace}-avatar-icon-size);
-}
-
-.#{$namespace}-avatar--small {
-    --#{$namespace}-avatar-size: 24px;
-}
-
-.#{$namespace}-avatar--large {
-    --#{$namespace}-avatar-size: 56px;
-}

package/dist/theme-chalk/badge/index.scss

@@ -1,63 +0,0 @@
-@use '../common/var';
-
-@use 'sass:math';
-@use 'sass:map';
-
-.#{$namespace}-badge {
-    --#{$namespace}-badge-bg-color: var(--#{$namespace}-color-error);
-    --#{$namespace}-badge-radius: 10px;
-    --#{$namespace}-badge-font-size: 12px;
-    --#{$namespace}-badge-padding: 6px;
-    --#{$namespace}-badge-size: 18px;
-
-    position: relative;
-    vertical-align: middle;
-    display: inline-block;
-    width: fit-content;
-}
-
-.#{$namespace}-badge__content {
-    background-color: var(--#{$namespace}-badge-bg-color);
-    border-radius: var(--#{$namespace}-badge-radius);
-    color: var(--#{$namespace}-color-white);
-
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-
-    font-size: var(--#{$namespace}-badge-font-size);
-    height: var(--#{$namespace}-badge-size);
-    padding: 0 var(--#{$namespace}-badge-padding);
-    white-space: nowrap;
-    border: 1px solid var(--#{$namespace}-bg-color);
-
-    &.is-fixed {
-        position: absolute;
-        top: 0;
-        right: calc(1px + #{var(--#{$namespace}-badge-size)} / 2);
-        transform: translateY(-50%) translateX(100%);
-        z-index: 1;
-
-        &.is-dot {
-            right: 5px;
-        }
-    }
-
-    &.is-dot {
-        height: 8px;
-        width: 8px;
-        padding: 0;
-        right: 0;
-        border-radius: 50%;
-    }
-}
-
-.#{$namespace}-badge__content--primary {
-    background-color: var(--#{$namespace}-color-primary);
-}
-
-@each $type in (success, warning, info, error) {
-    .#{$namespace}-badge__content--#{$type} {
-        background-color: var(--#{$namespace}-color-#{$type});
-    }
-}

package/dist/theme-chalk/breadcrumb/index.scss

@@ -1,65 +0,0 @@
-@use '../common/var';
-
-.#{$namespace}-breadcrumb {
-    font-size: 14px;
-    line-height: 1;
-
-    &::before,
-    &::after {
-        display: table;
-        content: '';
-    }
-}
-
-.#{$namespace}-breadcrumb__separator {
-    margin: 0 9px;
-    font-weight: bold;
-    color: var(--#{$namespace}-text-color-placeholder);
-
-    &.#{$namespace}-icon {
-        margin: 0 6px;
-        font-weight: normal;
-        svg {
-            vertical-align: middle;
-        }
-    }
-}
-
-.#{$namespace}-breadcrumb__item {
-    float: left;
-    display: flex;
-    align-items: center;
-
-    &:last-child {
-        .#{$namespace}-breadcrumb__inner:not(.is-link),
-        .#{$namespace}-breadcrumb__inner:not(.is-link) a {
-            &,
-            &:hover {
-                font-weight: normal;
-                color: var(--#{$namespace}-text-color-regular);
-                cursor: text;
-            }
-        }
-
-        .#{$namespace}-breadcrumb__separator {
-            display: none;
-        }
-    }
-}
-
-.#{$namespace}-breadcrumb__inner {
-    color: var(--#{$namespace}-text-color-regular);
-
-    &.is-link,
-    & a {
-        font-weight: bold;
-        text-decoration: none;
-        transition: var(--#{$namespace}-transition-color);
-        color: var(--#{$namespace}-text-color-primary);
-
-        &:hover {
-            color: var(--#{$namespace}-color-primary);
-            cursor: pointer;
-        }
-    }
-}

package/dist/theme-chalk/build.scss

@@ -1,2 +0,0 @@
-$fa-font-path: './fonts' !default;
-@import './index.scss';