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

package/package.json

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

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/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';

package/dist/theme-chalk/button/_mixins.scss

@@ -1,317 +0,0 @@
-@use 'sass:map';
-@use '../common/var';
-
-// join var name
-// joinVarName(('button', 'text-color')) => '--el-button-text-color'
-@function joinVarName($list) {
-    $name: '--el';
-    @each $item in $list {
-        @if $item != '' {
-            $name: $name + '-' + $item;
-        }
-    }
-    @return $name;
-}
-
-// getCssVar('button', 'text-color') => var(--el-button-text-color)
-@function getCssVar($args...) {
-    @return var(#{joinVarName($args)});
-}
-
-// set css var value, because we need translate value to string
-// for example:
-// @include set-css-var-value(('color', 'primary'), red);
-// --el-color-primary: red;
-@mixin set-css-var-value($name, $value) {
-    #{joinVarName($name)}: #{$value};
-}
-
-// generate css var from existing css var
-// for example:
-// @include css-var-from-global(('button', 'text-color'), ('color', $type))
-// --el-button-text-color: var(--el-color-#{$type});
-@mixin css-var-from-global($var, $gVar) {
-    $varName: joinVarName($var);
-    $gVarName: joinVarName($gVar);
-    #{$varName}: var(#{$gVarName});
-}
-
-@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: var(--#{$namespace}-fill-color-blank);
-            border-color: getCssVar('color', $type, 'light-8');
-        }
-    }
-}
-
-@mixin button-link($type) {
-    $button-color-types: (
-        '': (
-            'text-color': (
-                'color',
-                $type,
-            ),
-            // 'bg-color': (
-            //     'color',
-            //     $type,
-            //     'light-9',
-            // ),
-            // 'border-color': (
-            //     'color',
-            //     $type,
-            //     'transparent',
-            // ),,,,,,,,,,,
-        ),
-        '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');
-        }
-    }
-}
-
-@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 {
-        @include button-plain($type);
-    }
-
-    &.is-dashed {
-        @include button-dashed($type);
-    }
-
-    &.is-text,
-    &.is-link {
-        @include button-link($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/dist/theme-chalk/button/button-group.scss

@@ -1,83 +0,0 @@
-@use '../common/var';
-.#{$namespace}-button-group {
-    display: inline-block;
-    vertical-align: middle;
-
-    &::before,
-    &::after {
-        display: table;
-        content: '';
-    }
-    &::after {
-        clear: both;
-    }
-
-    & > .#{$namespace}-button {
-        float: left;
-        position: relative;
-        & + .#{$namespace}-button {
-            margin-left: 0;
-        }
-        &:first-child {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-        &:last-child {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-        &:first-child:last-child {
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 4px;
-            border-top-left-radius: 4px;
-            border-bottom-left-radius: 4px;
-
-            &.is-round {
-                border-radius: var(--#{$namespace}-button-border-radius-round);
-            }
-
-            &.is-circle {
-                border-radius: 50%;
-            }
-        }
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0;
-        }
-        &:not(:last-child) {
-            margin-right: -1px;
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-            z-index: 1;
-        }
-
-        &.is-active {
-            z-index: 1;
-        }
-    }
-
-    & > .#{$namespace}-dropdown {
-        & > .#{$namespace}-button {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border-left-color: var(--#{$namespace}-button-divide-border-color);
-        }
-    }
-
-    @each $type in (primary, success, warning, danger, info) {
-        .#{$namespace}-button--#{$type} {
-            &:first-child {
-                border-right-color: var(--#{$namespace}-button-divide-border-color) !important;
-            }
-            &:last-child {
-                border-left-color: var(--#{$namespace}-button-divide-border-color) !important;
-            }
-            &:not(:first-child):not(:last-child) {
-                border-left-color: var(--#{$namespace}-button-divide-border-color) !important;
-                border-right-color: var(--#{$namespace}-button-divide-border-color) !important;
-            }
-        }
-    }
-}