@qsxy/element-plus-react 1.0.3 → 2.0.0

package/theme-chalk/cascader.scss

@@ -1,35 +1,87 @@
-@use './mixins/config' as *;
+@use 'sass:map';
+
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@mixin cascader-tag-normal($background-color) {
+    .#{$namespace}-tag {
+        display: inline-flex;
+        align-items: center;
+        max-width: 100%;
+        text-overflow: ellipsis;
+        background: $background-color;
+
+        &.#{$namespace}-tag--dark,
+        &.#{$namespace}-tag--plain {
+            background-color: getCssVar('tag', 'bg-color');
+        }
+
+        &:not(.is-hit) {
+            border-color: transparent;
+
+            &.#{$namespace}-tag--dark,
+            &.#{$namespace}-tag--plain {
+                border-color: getCssVar('tag', 'border-color');
+            }
+        }
+
+        > span {
+            flex: 1;
+            line-height: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .#{$namespace}-icon-close {
+            flex: none;
+            background-color: getCssVar('text-color', 'placeholder');
+            color: getCssVar('color-white');
+
+            &:hover {
+                background-color: getCssVar('text-color', 'secondary');
+            }
+        }
+
+        & + input {
+            margin-left: 0;
+        }
+    }
+}
+
+@include b(cascader) {
+    @include set-component-css-var('cascader', $cascader);
 
-.#{$namespace}-cascader {
     display: inline-block;
+    vertical-align: middle;
     position: relative;
-    font-size: 14px;
-    line-height: 32px;
+    font-size: getCssVar('font-size', 'base');
+    line-height: map.get($input-height, 'default');
     outline: none;
-    width: 100%;
 
-    // &:not(.is-disabled):hover {
-    //     .#{$namespace}-input__wrapper {
-    //         cursor: pointer;
-    //         box-shadow: 0 0 0 1px var(--#{$namespace}-border-color-hover) inset;
-    //     }
-    // }
+    &:not(.is-disabled):hover {
+        .#{$namespace}-input__wrapper {
+            cursor: pointer;
+            box-shadow: 0 0 0 1px getCssVar('input', 'hover-border-color') inset;
+        }
+    }
 
     .#{$namespace}-input {
+        display: flex;
         cursor: pointer;
 
-        .#{$namespace}-input__wrapper {
+        .#{$namespace}-input__inner {
             text-overflow: ellipsis;
-
-            &:focus {
-                box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
+            &:read-only {
+                cursor: pointer;
+            }
+            &:disabled {
+                cursor: not-allowed;
             }
         }
 
         .#{$namespace}-input__suffix-inner {
             .#{$namespace}-icon {
-                // height: calc(100% - 2px);
-
                 svg {
                     vertical-align: middle;
                 }
@@ -37,203 +89,197 @@
         }
 
         .icon-arrow-down {
-            transition: transform 0.3s;
+            transition: transform getCssVar('transition-duration');
             font-size: 14px;
 
-            &.is-reverse {
+            @include when(reverse) {
                 transform: rotateZ(180deg);
             }
         }
 
         .icon-circle-close:hover {
-            color: #909399;
+            color: var(#{getCssVarName('input', 'clear-hover-color')}, map.get($input, 'clear-hover-color'));
         }
 
-        &.is-focus {
+        @include when(focus) {
             .#{$namespace}-input__wrapper {
-                box-shadow: 0 0 0 1px var(--#{$namespace}-color-primary) inset;
+                box-shadow: 0 0 0 1px var(#{getCssVarName('input', 'focus-border-color')}, map.get($input, 'focus-border-color')) inset;
             }
         }
     }
 
-    // @each $size in (large, small) {
-    //   @include m($size) {
-    //     font-size: map.get($input-font-size, $size);
-    //     line-height: map.get($input-height, $size);
-    //   }
-    // }
+    @each $size in (large, small) {
+        @include m($size) {
+            font-size: map.get($input-font-size, $size);
+            line-height: map.get($input-height, $size);
 
-    &.is-disabled {
-        .#{$namespace}-cascader__label {
-            z-index: 2;
-            color: var(--#{$namespace}-disabled-text-color);
+            @include e(tags) {
+                gap: map.get($cascader-item-gap, $size);
+                padding: map.get($cascader-wrapper-padding, $size);
+            }
+
+            @include e(search-input) {
+                height: map.get($cascader-item-height, $size);
+                margin-left: map.get($cascader-search-input-margin-left, $size);
+            }
         }
     }
 
-    &.#{$namespace}-cascader--large {
-        line-height: var(--#{$namespace}-component-size-large);
+    @include when(disabled) {
+        .#{$namespace}-cascader__label {
+            z-index: calc(getCssVar('index', 'normal') + 1);
+            color: getCssVar('disabled-text-color');
+        }
     }
 
-    &.#{$namespace}-cascader--small {
-        line-height: var(--#{$namespace}-component-size-small);
+    @include e(dropdown) {
+        @include set-component-css-var('cascader', $cascader);
     }
-}
 
-.#{$namespace}-cascader__dropdown {
-    font-size: 14px;
-    border-radius: 4px;
+    @include e(dropdown) {
+        font-size: getCssVar('cascader-menu-font-size');
+        border-radius: getCssVar('cascader-menu-radius');
 
-    &.#{$namespace}-popper[role='tooltip'] {
-        background-color: var(--#{$namespace}-bg-color-overlay);
-        border: 1px solid var(--#{$namespace}-border-color);
-        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
-    }
+        @include picker-popper(getCssVar('cascader-menu-fill'), getCssVar('cascader-menu-border'), getCssVar('cascader-menu-shadow'));
 
-    &.#{$namespace}-popper[role='tooltip'] .#{$namespace}-popper__arrow:before {
-        border: 1px solid var(--#{$namespace}-border-color);
+        &.#{$namespace}-popper {
+            box-shadow: getCssVar('cascader-menu-shadow');
+        }
     }
 
-    &.#{$namespace}-popper[role='tooltip'][data-popper-placement^='top'] .#{$namespace}-popper__arrow:before {
-        border-top-color: transparent;
-        border-left-color: transparent;
+    @include e(header) {
+        padding: map.get($cascader-dropdown, 'header-padding');
+        border-bottom: map.get($cascader-dropdown, 'border');
     }
 
-    &.#{$namespace}-popper[role='tooltip'][data-popper-placement^='bottom'] .#{$namespace}-popper__arrow:before {
-        border-bottom-color: transparent;
-        border-right-color: transparent;
+    @include e(footer) {
+        padding: map.get($cascader-dropdown, 'footer-padding');
+        border-top: map.get($cascader-dropdown, 'border');
     }
 
-    &.#{$namespace}-popper[role='tooltip'][data-popper-placement^='left'] .#{$namespace}-popper__arrow:before {
-        border-left-color: transparent;
-        border-bottom-color: transparent;
+    @include e(tags) {
+        position: absolute;
+        left: 0;
+        right: 30px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        flex-wrap: wrap;
+        padding: map.get($cascader-wrapper-padding, 'default');
+        gap: map.get($cascader-item-gap, 'default');
+        line-height: normal;
+        text-align: left;
+        box-sizing: border-box;
+        @include cascader-tag-normal(getCssVar('cascader-tag-background'));
+
+        &.is-validate {
+            right: 55px;
+        }
     }
 
-    &.#{$namespace}-popper[role='tooltip'][data-popper-placement^='right'] .#{$namespace}-popper__arrow:before {
-        border-right-color: transparent;
-        border-top-color: transparent;
+    @include e(collapse-tags) {
+        white-space: normal;
+        z-index: getCssVar('index-normal');
+        @include cascader-tag-normal(getCssVar('fill-color'));
+
+        .#{$namespace}-tag {
+            margin: 2px 0;
+        }
     }
 
-    &.#{$namespace}-popper {
-        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+    @include e(suggestion-panel) {
+        border-radius: getCssVar('cascader-menu', 'radius');
     }
-}
 
-.#{$namespace}-cascader__trigger {
-    cursor: pointer;
-}
+    @include e(suggestion-wrap) {
+        max-height: 204px;
+    }
 
-.#{$namespace}-cascader__tags {
-    position: absolute;
-    left: 0;
-    right: 30px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    flex-wrap: wrap;
-    line-height: normal;
-    text-align: left;
-    box-sizing: border-box;
-    z-index: 1;
+    @include e(suggestion-list) {
+        list-style: none;
+        margin: 0;
+        padding: 6px 0;
+        font-size: getCssVar('font-size', 'base');
+        color: getCssVar('cascader-menu', 'text-color');
+        text-align: center;
+
+        &.#{$namespace}-vl__window {
+            // for virtual scroll
+            margin: 6px 0;
+            padding: 0;
+            ul {
+                margin: 0;
+                padding: 0;
+            }
+        }
+    }
 
-    .#{$namespace}-tag {
-        display: inline-flex;
+    @include e(suggestion-item) {
+        display: flex;
+        justify-content: space-between;
         align-items: center;
-        max-width: 100%;
-        margin: 2px 0 2px 6px;
-        text-overflow: ellipsis;
-        background: #f0f2f5;
+        height: 34px;
+        padding: 0 15px;
+        text-align: left;
+        outline: none;
+        cursor: pointer;
+        box-sizing: border-box;
 
-        &:not(.is-hit) {
-            border-color: transparent;
+        &:hover,
+        &:focus {
+            background: getCssVar('cascader-node', 'background-hover');
         }
 
-        & > span {
-            flex: 1;
+        &.is-checked {
+            color: getCssVar('cascader', 'menu-selected-text-color');
+            font-weight: bold;
+        }
+
+        > :not(.#{$namespace}-icon) {
+            white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            flex: 1;
+            min-width: 0;
         }
 
-        .#{$namespace}-icon-close {
-            flex: none;
-            background-color: #a8abb2;
-            color: #ffffff;
+        > span {
+            margin-right: 10px;
+        }
 
-            &:hover {
-                background-color: #909399;
-            }
+        .#{$namespace}-icon {
+            flex-shrink: 0;
         }
     }
-}
-
-.#{$namespace}-cascader__collapse-tags {
-    white-space: normal;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-}
-
-.#{$namespace}-cascader__collapse-tag {
-    line-height: inherit;
-    height: inherit;
-    display: flex;
-}
-
-.#{$namespace}-cascader__suggestion-panel {
-    border-radius: 4px;
-}
 
-.#{$namespace}-cascader__suggestion-list {
-    max-height: 204px;
-    margin: 0;
-    padding: 6px 0;
-    font-size: 14px;
-    color: #606266;
-    text-align: center;
-}
-
-.#{$namespace}-cascader__suggestion-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 34px;
-    padding: 0 15px;
-    text-align: left;
-    outline: none;
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-        background: #f5f7fa;
+    @include e(empty-text) {
+        margin: 10px 0;
+        color: getCssVar('cascader', 'color-empty');
     }
 
-    &.is-checked {
-        color: var(--#{$namespace}-color-primary);
-        font-weight: bold;
+    @include e(search-input) {
+        flex: 1;
+        height: map.get($cascader-item-height, 'default');
+        min-width: 60px;
+        margin-left: map.get($cascader-search-input-margin-left, 'default');
+        padding: 0;
+        color: getCssVar('cascader', 'menu-text-color');
+        border: none;
+        outline: none;
+        box-sizing: border-box;
+        background: transparent;
+
+        &::placeholder {
+            // two input overlap
+            color: transparent;
+        }
     }
 
-    & > span {
-        margin-right: 10px;
+    @include e(panels) {
+        display: flex;
     }
-}
 
-.#{$namespace}-cascader__empty-text {
-    margin: 10px 0;
-    color: #a8abb2;
+    @include e(search) {
+        padding: 0 7px;
+    }
 }
-
-// .#{$namespace}-cascader__search-input {
-//     flex: 1;
-//     height: 28px;
-//     min-width: 60px;
-//     margin: 2px 0 2px map.get($input-padding-horizontal, 'default')-$border-width;
-//     padding: 0;
-//     color: var(--#{$namespace}-cascader-menu-text-color);
-//     border: none;
-//     outline: none;
-//     box-sizing: border-box;
-
-//     &::placeholder {
-//         color: var(--#{$namespace}-text-color-placeholder);
-//     }
-// }

package/theme-chalk/checkbox.scss

@@ -46,6 +46,10 @@
         width: 100%;
     }
 
+    &:last-child {
+        margin-right: 0;
+    }
+
     &.is-disabled {
         cursor: not-allowed;
     }

package/theme-chalk/collapse-item.scss

@@ -0,0 +1,72 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(collapse-item) {
+  @include when(disabled) {
+    .#{$namespace}-collapse-item__header {
+      color: getCssVar('text-color-disabled');
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(header) {
+    width: 100%;
+    padding: 0;
+    border: none;
+    display: flex;
+    align-items: center;
+    min-height: getCssVar('collapse-header-height');
+    line-height: getCssVar('collapse-header-height');
+    background-color: getCssVar('collapse-header-bg-color');
+    color: getCssVar('collapse-header-text-color');
+    cursor: pointer;
+    border-bottom: 1px solid getCssVar('collapse-border-color');
+    font-size: getCssVar('collapse-header-font-size');
+    font-weight: 500;
+    transition: border-bottom-color getCssVar('transition-duration');
+    outline: none;
+    box-sizing: border-box;
+
+    @include e(arrow) {
+      transition: transform getCssVar('transition-duration');
+      font-weight: 300;
+
+      @include when(active) {
+        transform: rotate(90deg);
+      }
+    }
+
+    @include e(title) {
+      text-align: left;
+      flex: auto;
+    }
+
+    &.focusing:focus:not(:hover) {
+      color: getCssVar('color-primary');
+    }
+
+    @include when(active) {
+      border-bottom-color: transparent;
+    }
+  }
+
+  @include e(wrap) {
+    will-change: height;
+    background-color: getCssVar('collapse-content-bg-color');
+    overflow: hidden;
+    box-sizing: border-box;
+    border-bottom: 1px solid getCssVar('collapse-border-color');
+  }
+
+  @include e(content) {
+    padding-bottom: 25px;
+    font-size: getCssVar('collapse-content-font-size');
+    color: getCssVar('collapse-content-text-color');
+    line-height: 1.769230769230769;
+  }
+
+  &:last-child {
+    margin-bottom: -1px;
+  }
+}

package/theme-chalk/collapse.scss

@@ -1,84 +1,29 @@
-@use './mixins/config' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
 
-.#{$namespace}-collapse {
-    --#{$namespace}-collapse-border-color: var(--#{$namespace}-border-color-lighter);
-    --#{$namespace}-collapse-header-height: 48px;
-    --#{$namespace}-collapse-header-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-collapse-header-text-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-collapse-header-font-size: 14px;
-    --#{$namespace}-collapse-content-bg-color: var(--#{$namespace}-fill-color-blank);
-    --#{$namespace}-collapse-content-font-size: 1tpx;
-    --#{$namespace}-collapse-content-text-color: var(--#{$namespace}-text-color-primary);
-    --#{$namespace}-transition-duration: 0.3s;
-    --#{$namespace}-collapse-item-margin: 0px;
-    border-top: 1px solid var(--#{$namespace}-collapse-border-color);
-    border-bottom: 1px solid var(--#{$namespace}-collapse-border-color);
-}
-
-.#{$namespace}-collapse-item {
-    &.is-disabled {
-        .#{$namespace}-collapse-item__header {
-            color: var(--#{$namespace}-text-color-disabled);
-            cursor: not-allowed;
-        }
-    }
+@include b(collapse) {
+  @include set-component-css-var('collapse', $collapse);
 
-    &:last-child {
-        margin-bottom: -1px;
-    }
-
-    & + .#{$namespace}-collapse-item {
-        margin-top: var(--#{$namespace}-collapse-item-margin);
-    }
+  border-top: 1px solid getCssVar('collapse-border-color');
+  border-bottom: 1px solid getCssVar('collapse-border-color');
 }
 
-.#{$namespace}-collapse-item__header {
-    display: flex;
-    align-items: center;
-    height: var(--#{$namespace}-collapse-header-height);
-    line-height: var(--#{$namespace}-collapse-header-height);
-    background: var(--#{$namespace}-collapse-header-bg-color);
-    color: var(--#{$namespace}-collapse-header-text-color);
-    cursor: pointer;
-    border-bottom: 1px solid var(--#{$namespace}-collapse-border-color);
-    font-size: var(--#{$namespace}-collapse-header-font-size);
-    font-weight: 500;
-    transition: border-bottom-color var(--#{$namespace}-transition-duration);
-    outline: none;
-    padding-left: 10px;
-
-    .#{$namespace}-collapse-item__arrow {
-        margin: 0 8px 0 auto;
-        transition: transform var(--#{$namespace}-transition-duration);
-        font-weight: 300;
-        font-size: 16px;
-
-        &.is-active {
-            transform: rotate(90deg);
-        }
-    }
-
-    &.focusing:focus:not(:hover) {
-        color: var(--#{$namespace}-color-primary);
+.#{$namespace}-collapse-icon-position {
+  &-left {
+    .#{$namespace}-collapse-item__ {
+      &header {
+        gap: 8px;
+      }
+      &title {
+        order: 1;
+      }
     }
+  }
 
-    &.is-active {
-        border-bottom-color: transparent;
+  &-right {
+    .#{$namespace}-collapse-item__header {
+      padding-right: 8px;
     }
-}
-
-.#{$namespace}-collapse-item__wrap {
-    display: none;
-    will-change: height;
-    background: var(--#{$namespace}-collapse-content-bg-color);
-    overflow: hidden;
-    box-sizing: border-box;
-    border-bottom: 1px solid var(--#{$namespace}-collapse-border-color);
-}
-
-.#{$namespace}-collapse-item__content {
-    padding-bottom: 25px;
-    font-size: var(--#{$namespace}-collapse-content-font-size);
-    color: var(--#{$namespace}-collapse-content-text-color);
-    line-height: 1.769230769230769;
+  }
 }

package/theme-chalk/common/popup.scss

@@ -0,0 +1,47 @@
+@use './var' as *;
+@use '../mixins/mixins' as *;
+@use '../mixins/var' as *;
+
+:root {
+  @include set-component-css-var('popup', $popup);
+}
+
+.v-modal-enter {
+  animation: v-modal-in getCssVar('transition-duration-fast') ease;
+}
+
+.v-modal-leave {
+  animation: v-modal-out getCssVar('transition-duration-fast') ease forwards;
+}
+
+@keyframes v-modal-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+  }
+}
+
+@keyframes v-modal-out {
+  0% {
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.v-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: getCssVar('popup-modal-opacity');
+  background: getCssVar('popup-modal-bg-color');
+}
+
+@include b(popup-parent) {
+  @include m(hidden) {
+    overflow: hidden;
+  }
+}