@qsxy/element-plus-react 1.0.0-next.8 → 1.0.2

package/theme-chalk/select/index.scss

@@ -0,0 +1,272 @@
+@use 'sass:map';
+
+@use '../mixins/mixins' as *;
+@use '../mixins/utils' as *;
+@use '../mixins/var' as *;
+@use '../common/var' as *;
+@use './select-dropdown.scss';
+@use './option.scss';
+@use './option-group.scss';
+
+@mixin mixed-input-border($color) {
+    box-shadow: 0 0 0 1px $color inset;
+}
+
+@include b(select) {
+    @include set-component-css-var('select', $select);
+}
+
+@include b(select) {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    width: getCssVar('select-width');
+
+    @include e(wrapper) {
+        display: flex;
+        align-items: center;
+        position: relative;
+        box-sizing: border-box;
+        cursor: pointer;
+        text-align: left;
+        font-size: map.get($input-font-size, 'default');
+        padding: map.get($select-wrapper-padding, 'default');
+        gap: map.get($select-item-gap, 'default');
+        min-height: map.get($input-height, 'default');
+        line-height: map.get($select-item-height, 'default');
+        border-radius: getCssVar('border-radius-base');
+        background-color: getCssVar('fill-color', 'blank');
+        transition: getCssVar('transition', 'duration');
+        transform: translate3d(0, 0, 0);
+        @include mixed-input-border(#{getCssVar('border-color')});
+
+        @include when(filterable) {
+            cursor: text;
+        }
+
+        @include when(focused) {
+            @include mixed-input-border(#{getCssVar('color-primary')});
+        }
+
+        @include when(hovering) {
+            &:not(.is-focused) {
+                @include mixed-input-border(#{getCssVar('border-color-hover')});
+            }
+        }
+
+        @include when(disabled) {
+            cursor: not-allowed;
+
+            background-color: getCssVar('fill-color', 'light');
+            color: getCssVar('text-color', 'placeholder');
+            @include mixed-input-border(#{getCssVar('select-disabled-border')});
+
+            &:hover {
+                @include mixed-input-border(#{getCssVar('select-disabled-border')});
+            }
+
+            &.is-focus {
+                @include mixed-input-border(#{getCssVar('input-focus-border-color')});
+            }
+
+            @include e(selected-item) {
+                color: getCssVar('select-disabled-color');
+            }
+
+            @include e(caret) {
+                cursor: not-allowed;
+            }
+
+            .#{$namespace}-tag {
+                cursor: not-allowed;
+            }
+
+            // When the native input tag is disabled, the cursor value is the 'default'.
+            input {
+                cursor: not-allowed;
+            }
+
+            .#{$namespace}-select__prefix,
+            .#{$namespace}-select__suffix {
+                pointer-events: none;
+            }
+        }
+    }
+
+    @include e(prefix) {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: map.get($select-item-gap, 'default');
+        color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
+    }
+
+    @include e(suffix) {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: map.get($select-item-gap, 'default');
+        color: var(#{getCssVarName('input-icon-color')}, map.get($input, 'icon-color'));
+
+        @include when(hidden-clear) {
+            .#{$namespace}-select__clear {
+                display: none;
+            }
+        }
+
+        @include when(hidden-arrow) {
+            .#{$namespace}-select__arrow {
+                display: none;
+            }
+        }
+    }
+
+    @include e(caret) {
+        color: getCssVar('select-input-color');
+        font-size: getCssVar('select-input-font-size');
+        transition: getCssVar('transition', 'duration');
+        transform: rotateZ(0deg);
+        cursor: pointer;
+
+        @include when(reverse) {
+            transform: rotateZ(180deg);
+        }
+    }
+
+    @include e(clear) {
+        cursor: pointer;
+
+        &:hover {
+            color: getCssVar('select-close-hover-color');
+        }
+    }
+
+    @include e(selection) {
+        position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+        gap: map.get($select-item-gap, 'default');
+
+        @include when(near) {
+            margin-left: map.get($select-near-margin-left, 'default');
+        }
+
+        .#{$namespace}-tag {
+            cursor: pointer;
+            border-color: transparent;
+
+            &.#{$namespace}-tag--plain {
+                border-color: getCssVar('tag', 'border-color');
+            }
+
+            .#{$namespace}-tag__content {
+                min-width: 0;
+            }
+        }
+    }
+
+    @include e(selected-item) {
+        display: flex;
+        flex-wrap: wrap;
+        user-select: none;
+    }
+
+    @include e(tags-text) {
+        display: block;
+        line-height: normal;
+        @include utils-ellipsis;
+    }
+
+    @include e(placeholder) {
+        position: absolute;
+        z-index: -1;
+        display: block;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 100%;
+        @include utils-ellipsis;
+        color: var(#{getCssVarName('input-text-color')}, map.get($input, 'text-color'));
+
+        @include when(transparent) {
+            user-select: none;
+            color: getCssVar('text-color', 'placeholder');
+        }
+    }
+
+    @include e(popper) {
+        @include picker-popper(map.get($select-dropdown, 'bg-color'), map.get($select-dropdown, 'border'), map.get($select-dropdown, 'shadow'));
+    }
+
+    @include e(input-wrapper) {
+        flex: 1;
+
+        @include when(hidden) {
+            // Out of the document flow
+            position: absolute;
+            opacity: 0;
+            z-index: -1;
+        }
+    }
+
+    @include e(input) {
+        border: none;
+        outline: none;
+        padding: 0;
+        color: getCssVar('select-multiple-input-color');
+        font-size: inherit;
+        font-family: inherit;
+        appearance: none;
+        height: map.get($select-item-height, 'default');
+        width: 100%;
+        background-color: transparent;
+
+        @include when(disabled) {
+            cursor: not-allowed;
+        }
+    }
+
+    @include e(input-calculator) {
+        position: absolute;
+        left: 0;
+        top: 0;
+        max-width: 100%;
+        visibility: hidden;
+        white-space: pre;
+        overflow: hidden;
+    }
+
+    @each $size in (large, small) {
+        @include m($size) {
+            @include e(wrapper) {
+                gap: map.get($select-item-gap, $size);
+                padding: map.get($select-wrapper-padding, $size);
+                min-height: map.get($input-height, $size);
+                line-height: map.get($select-item-height, $size);
+                font-size: map.get($input-font-size, $size);
+            }
+
+            @include e(selection) {
+                gap: map.get($select-item-gap, $size);
+
+                @include when(near) {
+                    margin-left: map.get($select-near-margin-left, $size);
+                }
+            }
+
+            @include e(prefix) {
+                gap: map.get($select-item-gap, $size);
+            }
+
+            @include e(suffix) {
+                gap: map.get($select-item-gap, $size);
+            }
+
+            @include e(input) {
+                height: map.get($select-item-height, $size);
+            }
+        }
+    }
+}

package/{dist/theme-chalk/select/index.scss → theme-chalk/select/index.scss--bak}

@@ -1,4 +1,4 @@
-@use '../common/var';
+@use '../mixins/config' as *;
 
 .#{$namespace}-select {
     --#{$namespace}-select-border-color-hover: var(--#{$namespace}-border-color-hover);
@@ -12,7 +12,8 @@
 .#{$namespace}-select {
     display: inline-block;
     position: relative;
-    line-height: 32px;
+    // height: 32px;
+    // line-height: 32px;
     font-size: 14px;
     zoom: 1;
     *display: inline;
@@ -54,13 +55,15 @@
     }
 }
 
-.#{$namespace}-select--large {
-    line-height: var(--#{$namespace}-component-size-large);
-}
+// .#{$namespace}-select--large {
+//     height: var(--#{$namespace}-component-size-large);
+//     line-height: var(--#{$namespace}-component-size-large);
+// }
 
-.#{$namespace}-select--small {
-    line-height: var(--#{$namespace}-component-size-small);
-}
+// .#{$namespace}-select--small {
+//     height: var(--#{$namespace}-component-size-small);
+//     line-height: var(--#{$namespace}-component-size-small);
+// }
 
 .#{$namespace}-select__tags {
     position: absolute;

package/{dist/theme-chalk → theme-chalk}/select/option-group.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 
-@use '../../Common/styles/mixins/mixins' as *;
-@use '../../Common/styles/common/var' as *;
+@use '../mixins/mixins' as *;
+@use '../common/var' as *;
 
 @include b(select-group) {
     $gap: 20px;

package/{dist/theme-chalk → theme-chalk}/select/option.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 
-@use '../../Common/styles/mixins/mixins' as *;
-@use '../../Common/styles/common/var' as *;
+@use '../mixins/mixins' as *;
+@use '../common/var' as *;
 
 $checked-icon: "data:image/svg+xml;utf8,%3Csvg class='icon' width='200' height='200' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M406.656 706.944L195.84 496.256a32 32 0 10-45.248 45.248l256 256 512-512a32 32 0 00-45.248-45.248L406.592 706.944z'%3E%3C/path%3E%3C/svg%3E";
 

package/{dist/theme-chalk → theme-chalk}/select/select-dropdown.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 
-@use '../../Common/styles/mixins/mixins' as *;
-@use '../../Common/styles/common/var' as *;
+@use '../mixins/mixins' as *;
+@use '../common/var' as *;
 
 @include b(select-dropdown) {
     z-index: calc(#{getCssVar('index-top')} + 1);

package/{dist/theme-chalk/placeholder/index.scss → theme-chalk/skeleton.scss}

@@ -1,18 +1,18 @@
-@use '../common/var';
+@use './mixins/config' as *;
 
-.#{$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 .#{$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: placeholder-active 1.4s ease infinite;
+            animation: skeleton-active 1.4s ease infinite;
         }
     }
 
-    @keyframes placeholder-active {
+    @keyframes skeleton-active {
         0% {
             background-position: 100% 50%;
         }