@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.10

package/theme-chalk/input-number/index.scss

@@ -0,0 +1,172 @@
+@use '../common/var';
+
+@use 'sass:map';
+@use 'sass:math';
+
+$input-height: () !default;
+$input-height: map.merge(
+    (
+        'large': var(--#{$namespace}-component-size-large),
+        'default': 32px,
+        'small': var(--#{$namespace}-component-size-small),
+    ),
+    $input-height
+);
+
+.#{$namespace}-input-number {
+    --#{$namespace}-input-number-controls-height: 16px;
+    --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
+
+    position: relative;
+    display: inline-flex;
+    width: 150px;
+    line-height: #{map.get($input-height, 'default')};
+    vertical-align: middle;
+
+    .#{$namespace}-input__wrapper {
+        padding-left: 42px;
+        padding-right: 42px;
+    }
+
+    .#{$namespace}-input__inner {
+        -webkit-appearance: none;
+        -moz-appearance: textfield;
+        text-align: center;
+        line-height: 1;
+    }
+
+    .#{$namespace}-input-number__increase,
+    .#{$namespace}-input-number__decrease {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: auto;
+
+        position: absolute;
+        z-index: 1;
+        top: 1px;
+        bottom: 1px;
+
+        width: 32px;
+        background: var(--#{$namespace}-fill-color-light);
+        color: var(--#{$namespace}-text-color-regular);
+        cursor: pointer;
+        font-size: 13px;
+        user-select: none;
+
+        &:hover {
+            color: var(--#{$namespace}-color-primary);
+
+            & ~ .#{$namespace}-input:not(.is-disabled) .#{$namespace}-input__wrapper {
+                box-shadow: 0 0 0 1px var(--#{$namespace}-input-focus-border-color) inset;
+            }
+        }
+
+        &.is-disabled {
+            color: var(--#{$namespace}-disabled-text-color);
+            cursor: not-allowed;
+            background-color: var(--#{$namespace}-disabled-bg-color);
+            border-color: var(--#{$namespace}-border-color-light);
+        }
+    }
+
+    .#{$namespace}-input-number__increase {
+        right: 1px;
+        border-radius: 0 4px 4px 0;
+        border-left: 1px solid var(--#{$namespace}-border-color);
+    }
+
+    .#{$namespace}-input-number__decrease {
+        left: 1px;
+        border-radius: 4px 0 0 4px;
+        border-right: 1px solid var(--#{$namespace}-border-color);
+    }
+
+    .is-disabled {
+        .#{$namespace}-input-number__increase,
+        .#{$namespace}-input-number__decrease {
+            border-color: var(--#{$namespace}-border-color-light);
+            color: var(--#{$namespace}-disabled-text-color);
+
+            &:hover {
+                color: var(--#{$namespace}-disabled-text-color);
+                cursor: not-allowed;
+            }
+        }
+    }
+
+    @each $size in (large, small) {
+        &.#{$namespace}-input-number--#{$size} {
+            line-height: #{map.get($input-height, $size) - 2};
+
+            .#{$namespace}-input-number__increase,
+            .#{$namespace}-input-number__decrease {
+                width: map.get($input-height, $size);
+                font-size: 14px;
+            }
+
+            .#{$namespace}-input__wrapper {
+                padding-left: #{map.get($input-height, $size) + 7};
+                padding-right: #{map.get($input-height, $size) + 7};
+            }
+        }
+    }
+
+    .#{$namespace}-input-number--small {
+        .#{$namespace}-input-number__increase,
+        .#{$namespace}-input-number__decrease {
+            [class*='#{$namespace}-icon'] {
+                transform: scale(0.9);
+            }
+        }
+    }
+
+    .is-without-controls {
+        .#{$namespace}-input__wrapper {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+    }
+
+    &.is-controls-right {
+        .#{$namespace}-input__wrapper {
+            padding-left: 15px;
+            padding-right: 42px;
+        }
+
+        .#{$namespace}-input-number__increase,
+        .#{$namespace}-input-number__decrease {
+            height: var(--#{$namespace}-input-number-controls-height);
+            line-height: var(--#{$namespace}-input-number-controls-height);
+
+            [class*='#{$namespace}-icon'] {
+                transform: scale(0.8);
+            }
+        }
+
+        .#{$namespace}-input-number__increase {
+            bottom: auto;
+            left: auto;
+            border-radius: 0 4px 0 0;
+            border-bottom: 1px solid var(--#{$namespace}-border-color);
+        }
+
+        .#{$namespace}-input-number__decrease {
+            right: 1px;
+            top: auto;
+            left: auto;
+            border-right: none;
+            border-left: 1px solid var(--#{$namespace}-border-color);
+            border-radius: 0 0 4px 0;
+        }
+
+        @each $size in (large, small) {
+            &[class*='#{$size}'] {
+                [class*='increase'],
+                [class*='decrease'] {
+                    --#{$namespace}-input-number-controls-height: #{calc(map.get($input-height, $size) / 2)};
+                }
+            }
+        }
+    }
+}

package/theme-chalk/link/index.scss

@@ -0,0 +1,99 @@
+@use '../common/var';
+.#{$namespace}-link {
+    --#{$namespace}-link-font-size: 14px;
+    --#{$namespace}-link-font-weight: 500;
+    --#{$namespace}-link-text-color: var(--#{$namespace}-text-color-regular, #555555);
+    --#{$namespace}-link-hover-text-color: var(--#{$namespace}-color-primary);
+    --#{$namespace}-link-disabled-text-color: var(--#{$namespace}-text-color-placeholder);
+}
+
+.#{$namespace}-link {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    text-decoration: none;
+    outline: none;
+    cursor: pointer;
+    padding: 0;
+    font-size: var(--#{$namespace}-link-font-size);
+    font-weight: var(--#{$namespace}-link-font-weight);
+
+    color: var(--#{$namespace}-link-text-color);
+
+    &:hover {
+        color: var(--#{$namespace}-link-hover-text-color);
+    }
+
+    &.is-underline {
+        &:hover:after {
+            content: '';
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 0;
+            bottom: 0;
+            border-bottom: 1px solid var(--#{$namespace}-link-hover-text-color);
+        }
+    }
+
+    &.is-disabled {
+        color: var(--#{$namespace}-link-disabled-text-color);
+        cursor: not-allowed;
+    }
+
+    & [class*='#{$namespace}-icon-'] {
+        & + span {
+            margin-left: 5px;
+        }
+    }
+
+    &.#{$namespace}-link--default {
+        &:after {
+            border-color: var(--#{$namespace}-link-hover-text-color);
+        }
+    }
+
+    .#{$namespace}-link__inner {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    @each $type in primary {
+        &.#{$namespace}-link--#{$type} {
+            --#{$namespace}-link-text-color: var(--#{$namespace}-color-primary);
+            --#{$namespace}-link-hover-text-color: var(--#{$namespace}-color-primary-light-3);
+            --#{$namespace}-link-disabled-text-color: var(--#{$namespace}-color-primary-light-5);
+
+            &:after {
+                border-color: var(--#{$namespace}-link-text-color);
+            }
+
+            &.is-underline {
+                &:hover:after {
+                    border-color: var(--#{$namespace}-link-text-color);
+                }
+            }
+        }
+    }
+    @each $type in success, warning, error, info {
+        &.#{$namespace}-link--#{$type} {
+            --#{$namespace}-link-text-color: var(--#{$namespace}-color-#{$type});
+            --#{$namespace}-link-hover-text-color: var(--#{$namespace}-color-#{$type}-light-3);
+            --#{$namespace}-link-disabled-text-color: var(--#{$namespace}-color-#{$type}-light-5);
+
+            &:after {
+                border-color: var(--#{$namespace}-link-text-color);
+            }
+
+            &.is-underline {
+                &:hover:after {
+                    border-color: var(--#{$namespace}-link-text-color);
+                }
+            }
+        }
+    }
+}

package/theme-chalk/loading/index.scss

@@ -0,0 +1,94 @@
+@use '../common/var';
+
+.#{$namespace}-loading-parent--relative {
+    position: relative !important;
+}
+
+.#{$namespace}-loading-parent--hidden {
+    overflow: hidden !important;
+}
+
+.#{$namespace}-loading-mask {
+    position: absolute;
+    z-index: 2000;
+    background-color: rgba(0, 0, 0, 0.6);
+    margin: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transition: opacity 0.3s;
+
+    &.is-fullscreen {
+        position: fixed;
+
+        .#{$namespace}-loading-spinner {
+            margin-top: -21px;
+
+            .circular {
+                height: 50px;
+                width: 50px;
+            }
+        }
+    }
+}
+
+.#{$namespace}-loading-spinner {
+    top: 50%;
+    margin-top: -21px;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+
+    .#{$namespace}-loading-text {
+        color: var(--#{$namespace}-color-primary);
+        margin: 3px 0;
+        font-size: 14px;
+    }
+
+    .circular {
+        display: inline;
+        height: 42px;
+        width: 42px;
+        animation: loading-rotate 2s linear infinite;
+    }
+
+    .path {
+        animation: loading-dash 1.5s ease-in-out infinite;
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: 0;
+        stroke-width: 2;
+        stroke: var(--#{$namespace}-color-primary);
+        stroke-linecap: round;
+    }
+
+    i {
+        color: var(--#{$namespace}-color-primary);
+    }
+}
+
+.#{$namespace}-loading-fade-enter-from,
+.#{$namespace}-loading-fade-leave-to {
+    opacity: 0;
+}
+
+@keyframes loading-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes loading-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -40px;
+    }
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -120px;
+    }
+}

package/theme-chalk/message/index.scss

@@ -0,0 +1,169 @@
+@use '../common/var';
+
+.#{$namespace}-message {
+    --#{$namespace}-message-bg-color: var(--#{$namespace}-color-info-light-9);
+    --#{$namespace}-message-border-color: var(--#{$namespace}-border-color-lighter);
+    --#{$namespace}-message-close-icon-color: var(--#{$namespace}-text-color-placeholder);
+    --#{$namespace}-message-close-hover-color: var(--#{$namespace}-text-color-secondary);
+}
+
+.#{$namespace}-message {
+    min-width: 380px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--#{$namespace}-message-border-color);
+    position: fixed;
+    left: 50%;
+    top: 20px;
+    transform: translateX(-50%);
+    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;
+    display: flex;
+    align-items: center;
+
+    &.is-center {
+        justify-content: center;
+    }
+
+    &.is-closable {
+        .#{$namespace}-message__content {
+            padding-right: 16px;
+        }
+    }
+
+    p {
+        margin: 0;
+    }
+
+    &--info {
+        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-info-light-9);
+        --#{$namespace}-message-border-color: var(--#{$namespace}-color-info-light-8);
+        --#{$namespace}-message-text-color: var(--#{$namespace}-color-info);
+
+        .#{$namespace}-message__content {
+            color: var(--#{$namespace}-message-text-color);
+        }
+    }
+
+    &--success {
+        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-success-light-9);
+        --#{$namespace}-message-border-color: var(--#{$namespace}-color-success-light-8);
+        --#{$namespace}-message-text-color: var(--#{$namespace}-color-success);
+
+        .#{$namespace}-message__content {
+            color: var(--#{$namespace}-message-text-color);
+        }
+    }
+
+    &--warning {
+        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-warning-light-9);
+        --#{$namespace}-message-border-color: var(--#{$namespace}-color-warning-light-8);
+        --#{$namespace}-message-text-color: var(--#{$namespace}-color-warning);
+
+        .#{$namespace}-message__content {
+            color: var(--#{$namespace}-message-text-color);
+        }
+    }
+
+    &--error {
+        --#{$namespace}-message-bg-color: var(--#{$namespace}-color-error-light-9);
+        --#{$namespace}-message-border-color: var(--#{$namespace}-color-error-light-8);
+        --#{$namespace}-message-text-color: var(--#{$namespace}-color-error);
+
+        .#{$namespace}-message__content {
+            color: var(--#{$namespace}-message-text-color);
+        }
+    }
+
+    &__icon {
+        margin-right: 10px;
+    }
+
+    &__content {
+        padding: 0;
+        font-size: 14px;
+        line-height: 1;
+        &:focus {
+            outline-width: 0;
+        }
+    }
+
+    &__closeBtn {
+        position: absolute;
+        top: 50%;
+        right: 15px;
+        transform: translateY(-50%);
+        cursor: pointer;
+        color: var(--#{$namespace}-message-close-icon-color);
+        font-size: 16px;
+
+        &::before {
+            font-family: $fa-font-family;
+            content: '\f00d';
+            font-weight: 400;
+        }
+
+        &:focus {
+            outline-width: 0;
+        }
+        &:hover {
+            color: var(--#{$namespace}-message-close-hover-color);
+        }
+    }
+
+    & .#{$namespace}-icon-success {
+        color: var(--#{$namespace}-message-text-color);
+
+        &::before {
+            font-family: $fa-font-family;
+            content: '\f058';
+            font-style: normal;
+            font-weight: bold;
+        }
+    }
+
+    & .#{$namespace}-icon-error {
+        color: var(--#{$namespace}-message-text-color);
+
+        &::before {
+            font-family: $fa-font-family;
+            content: '\f057';
+            font-style: normal;
+            font-weight: bold;
+        }
+    }
+
+    & .#{$namespace}-icon-info {
+        color: var(--#{$namespace}-message-text-color);
+
+        &::before {
+            font-family: $fa-font-family;
+            content: '\f05a';
+            font-style: normal;
+            font-weight: bold;
+        }
+    }
+
+    & .#{$namespace}-icon-warning {
+        color: var(--#{$namespace}-message-text-color);
+
+        &::before {
+            font-family: $fa-font-family;
+            content: '\f06a';
+            font-style: normal;
+            font-weight: bold;
+        }
+    }
+}
+
+.#{$namespace}-fade-enter-from,
+.#{$namespace}-message-fade-enter-from,
+.#{$namespace}-message-fade-leave-active {
+    opacity: 0;
+    transform: translate(-50%, -100%) !important;
+}

package/theme-chalk/message-box/index.scss

@@ -0,0 +1,184 @@
+@use '../common/var';
+
+.#{$namespace}-message-box {
+    --#{$namespace}-messagebox-title-color: var(--#{$namespace}-text-color-primary);
+    --#{$namespace}-messagebox-width: 420px;
+    --#{$namespace}-messagebox-border-radius: 4px;
+    --#{$namespace}-messagebox-box-shadow: var(--#{$namespace}-box-shadow);
+    --#{$namespace}-messagebox-font-size: var(--#{$namespace}-font-size-large);
+    --#{$namespace}-messagebox-content-font-size: var(--#{$namespace}-font-size-base);
+    --#{$namespace}-messagebox-content-color: var(--#{$namespace}-text-color-regular);
+    --#{$namespace}-messagebox-error-font-size: 12px;
+    --#{$namespace}-messagebox-padding-primary: 12px;
+    --#{$namespace}-messagebox-font-line-height: var(--#{$namespace}-font-line-height-primary);
+}
+
+.#{$namespace}-message-box {
+    display: inline-block;
+    position: relative;
+    max-width: var(--#{$namespace}-messagebox-width);
+    width: 100%;
+    padding: var(--#{$namespace}-messagebox-padding-primary);
+    vertical-align: middle;
+    background-color: var(--#{$namespace}-bg-color);
+    border-radius: var(--#{$namespace}-messagebox-border-radius);
+    font-size: var(--#{$namespace}-messagebox-font-size);
+    box-shadow: var(--#{$namespace}-messagebox-box-shadow);
+    text-align: left;
+    overflow: hidden;
+    backface-visibility: hidden;
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+
+    &:focus {
+        outline: none !important;
+    }
+
+    &.is-draggable .#{$namespace}-message-box__header {
+        cursor: move;
+        -webkit-user-select: none;
+        user-select: none;
+    }
+}
+
+.#{$namespace}-message-box__header {
+    padding-bottom: var(--#{$namespace}-messagebox-padding-primary);
+
+    &.show-close {
+        padding-right: calc(var(--#{$namespace}-messagebox-padding-primary) + var(--#{$namespace}-message-close-size, 16px));
+    }
+}
+
+.#{$namespace}-message-box__title {
+    font-size: var(--#{$namespace}-messagebox-font-size);
+    line-height: var(--#{$namespace}-messagebox-font-line-height);
+    color: var(--#{$namespace}-messagebox-title-color);
+}
+
+.#{$namespace}-message-box__headerbtn {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0;
+    width: 40px;
+    height: 40px;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: var(--#{$namespace}-message-close-size, 16px);
+    cursor: pointer;
+
+    .#{$namespace}-message-box__close {
+        color: var(--#{$namespace}-color-info);
+        font-size: inherit;
+    }
+
+    &:focus .#{$namespace}-message-box__close,
+    &:hover .#{$namespace}-message-box__close {
+        color: var(--#{$namespace}-color-primary);
+    }
+}
+
+.#{$namespace}-message-box__body {
+    color: var(--#{$namespace}-messagebox-content-color);
+    font-size: var(--#{$namespace}-messagebox-content-font-size);
+}
+
+.#{$namespace}-message-box__container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.#{$namespace}-message-box__input {
+    padding-top: 12px;
+
+    div.invalid > input {
+        border-color: var(--#{$namespace}-color-error);
+    }
+
+    div.invalid > input:focus {
+        border-color: var(--#{$namespace}-color-error);
+    }
+}
+
+.#{$namespace}-message-box__status {
+    font-size: 24px;
+
+    // &::before {
+    //     // 防止图标切割
+    //     padding-left: 1px;
+    // }
+
+    // &.#{$namespace}-icon {
+    //     // 防止 #{$namespace}-icon 的position样式覆盖
+    //     position: absolute;
+    // }
+
+    // & + .#{$namespace}-message-box__message {
+    //     padding-left: 36px;
+    //     padding-right: 12px;
+    //     word-break: break-word;
+    // }
+
+    @each $type in (success, info, warning, error) {
+        &.#{$namespace}-message-box-icon--#{$type} {
+            --#{$namespace}-messagebox-color: var(--#{$namespace}-color-#{$type});
+            color: var(--#{$namespace}-messagebox-color);
+        }
+    }
+}
+
+.#{$namespace}-message-box__message {
+    margin: 0;
+
+    & p {
+        margin: 0;
+        line-height: var(--#{$namespace}-messagebox-font-line-height);
+    }
+}
+
+.#{$namespace}-message-box__errormsg {
+    color: var(--#{$namespace}-color-error);
+    font-size: var(--#{$namespace}-messagebox-error-font-size);
+    line-height: var(--#{$namespace}-messagebox-font-line-height);
+}
+
+.#{$namespace}-message-box__footer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    padding-top: var(--#{$namespace}-messagebox-padding-primary);
+}
+
+.#{$namespace}-message-box--cente {
+    .#{$namespace}-message-box__title {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+    }
+
+    .#{$namespace}-message-box__status {
+        font-size: inherit;
+    }
+
+    .#{$namespace}-message-box__btns,
+    .#{$namespace}-message-box__container {
+        justify-content: center;
+    }
+}
+
+// .#{$namespace}-message-box__container {
+//     position: relative;
+// }
+
+// .#{$namespace}-message-box__message {
+//     margin: 0;
+
+//     & p {
+//         margin: 0;
+//         line-height: 24px;
+//     }
+// }