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

package/theme-chalk/upload/index.scss

@@ -0,0 +1,631 @@
+@use '../common/var';
+
+@mixin upload-success($color: null) {
+    right: -15px;
+    top: -6px;
+    width: 40px;
+    height: 24px;
+    background: var(--#{$namespace}-color-success);
+    text-align: center;
+    transform: rotate(45deg);
+
+    i {
+        font-size: 12px;
+        margin-top: 11px;
+        transform: rotate(-45deg);
+        color: $color;
+    }
+}
+
+.#{$namespace}-upload {
+    --#{$namespace}-upload-dragger-padding-horizontal: 40px;
+    --#{$namespace}-upload-dragger-padding-vertical: 10px;
+}
+
+.#{$namespace}-upload {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    outline: none;
+
+    iframe {
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        opacity: 0;
+        filter: alpha(opacity=0);
+    }
+
+    &.is-drag {
+        display: block;
+    }
+
+    &:focus {
+        border-color: var(--#{$namespace}-color-primary);
+        color: var(--#{$namespace}-color-primary);
+
+        .#{$namespace}-upload-dragger {
+            border-color: var(--#{$namespace}-color-primary);
+        }
+    }
+}
+
+/* Picture Card for Wall */
+.#{$namespace}-upload--picture-card {
+    --#{$namespace}-upload-picture-card-size: 148px;
+    background-color: var(--#{$namespace}-fill-color-lighter);
+    border: 1px dashed var(--#{$namespace}-border-color-darker);
+    border-radius: 6px;
+    box-sizing: border-box;
+    width: var(--#{$namespace}-upload-picture-card-size);
+    height: var(--#{$namespace}-upload-picture-card-size);
+    cursor: pointer;
+    vertical-align: top;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+
+    i {
+        font-size: 28px;
+        color: var(--#{$namespace}-text-color-secondary);
+    }
+
+    &:hover {
+        border-color: var(--#{$namespace}-color-primary);
+        color: var(--#{$namespace}-color-primary);
+    }
+}
+
+.#{$namespace}-upload__input {
+    display: none;
+}
+
+.#{$namespace}-upload__tip {
+    font-size: 12px;
+    color: var(--#{$namespace}-text-color-regular);
+    margin-top: 7px;
+}
+
+.#{$namespace}-upload-dragger {
+    padding: var(--#{$namespace}-upload-dragger-padding-horizontal) var(--#{$namespace}-upload-dragger-padding-vertical);
+    background-color: var(--#{$namespace}-fill-color-blank);
+    border: 1px dashed var(--#{$namespace}-border-color);
+    border-radius: 6px;
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+
+    .#{$namespace}-icon--upload {
+        font-size: 67px;
+        color: var(--#{$namespace}-text-color-placeholder);
+        margin-bottom: 16px;
+        line-height: 50px;
+    }
+
+    & + .#{$namespace}-upload__tip {
+        text-align: center;
+    }
+
+    & ~ .#{$namespace}-upload__files {
+        border-top: var(--#{$namespace}-border);
+        margin-top: 7px;
+        padding-top: 5px;
+    }
+
+    .#{$namespace}-upload__text {
+        color: var(--#{$namespace}-text-color-regular);
+        font-size: 14px;
+        text-align: center;
+
+        em {
+            color: var(--#{$namespace}-color-primary);
+            font-style: normal;
+        }
+    }
+
+    &:hover {
+        border-color: var(--#{$namespace}-color-primary);
+    }
+
+    &.is-dragover {
+        padding: calc(#{var(--#{$namespace}-upload-dragger-padding-horizontal)} - 1px) calc(#{var(--#{$namespace}-upload-dragger-padding-vertical)} - 1px);
+        background-color: getCssVar('color', 'primary', 'light-9');
+        border: 2px dashed var(--#{$namespace}-color-primary);
+    }
+}
+
+.#{$namespace}-upload-list {
+    margin: 10px 0 0;
+    padding: 0;
+    list-style: none;
+    position: relative;
+
+    &.is-disabled {
+        .#{$namespace}-upload-list__item:hover,
+        .#{$namespace}-upload-list__item-status-label {
+            display: block;
+        }
+    }
+}
+
+// upload-list
+.#{$namespace}-upload-list--picture-card {
+    --#{$namespace}-upload-list-picture-card-size: 148px;
+
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: 0;
+
+    .#{$namespace}-upload-list__item {
+        overflow: hidden;
+        background-color: var(--#{$namespace}-fill-color-blank);
+        border: 1px solid var(--#{$namespace}-border-color);
+        border-radius: 6px;
+        box-sizing: border-box;
+        width: var(--#{$namespace}-upload-list-picture-card-size);
+        height: var(--#{$namespace}-upload-list-picture-card-size);
+        margin: 0 8px 8px 0;
+        padding: 0;
+
+        display: inline-flex;
+
+        .#{$namespace}-icon--check,
+        .#{$namespace}-icon--circle-check {
+            color: var(--#{$namespace}-color-white);
+        }
+
+        .#{$namespace}-icon--close {
+            display: none;
+        }
+        &:hover {
+            .#{$namespace}-upload-list__item-status-label {
+                opacity: 0;
+                // for fade out
+                display: block;
+            }
+
+            .#{$namespace}-progress__text {
+                display: block;
+            }
+        }
+    }
+
+    .#{$namespace}-upload-list__item {
+        .#{$namespace}-upload-list__item-name {
+            display: none;
+        }
+    }
+
+    .#{$namespace}-upload-list__item-thumbnail {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    .#{$namespace}-upload-list__item-status-label {
+        @include upload-success();
+    }
+
+    .#{$namespace}-upload-list__item-actions {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        cursor: default;
+
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        color: #fff;
+        opacity: 0;
+        font-size: 20px;
+        background-color: var(--#{$namespace}-overlay-color-lighter);
+        transition: opacity 0.3s;
+
+        span {
+            display: none;
+            cursor: pointer;
+        }
+
+        span + span {
+            margin-left: 1rem;
+        }
+
+        .#{$namespace}-upload-list__item-delete {
+            position: static;
+            font-size: inherit;
+            color: inherit;
+        }
+
+        &:hover {
+            opacity: 1;
+            span {
+                display: inline-flex;
+            }
+        }
+    }
+
+    .#{$namespace}-progress {
+        top: 50% !important;
+        left: 56%;
+        transform: translate(-50%, -50%);
+        bottom: auto;
+        width: 126px;
+
+        .#{$namespace}-progress__text {
+            top: 50%;
+        }
+    }
+}
+
+.#{$namespace}-upload-list--picture {
+    .#{$namespace}-upload-list__item {
+        overflow: hidden;
+        z-index: 0;
+        background-color: var(--#{$namespace}-fill-color-blank);
+        border: 1px solid var(--#{$namespace}-border-color);
+        border-radius: 6px;
+        box-sizing: border-box;
+        margin-top: 10px;
+        padding: 10px;
+        display: flex;
+        align-items: center;
+
+        .#{$namespace}-icon--check,
+        .#{$namespace}-icon--circle-check {
+            color: var(--#{$namespace}-color-white);
+        }
+
+        &:hover {
+            .#{$namespace}-upload-list__item-status-label {
+                opacity: 0;
+                display: block;
+            }
+
+            .#{$namespace}-progress__text {
+                display: block;
+            }
+        }
+
+        &.is-success {
+            .#{$namespace}-upload-list__item-name {
+                i {
+                    display: none;
+                }
+            }
+        }
+
+        & .#{$namespace}-icon--close {
+            top: 5px;
+            transform: translateY(0);
+        }
+    }
+
+    .#{$namespace}-upload-list__item-thumbnail {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 70px;
+        height: 70px;
+        object-fit: contain;
+
+        position: relative;
+        z-index: 1;
+        background-color: var(--#{$namespace}-color-white);
+    }
+
+    .#{$namespace}-upload-list__item-status-label {
+        position: absolute;
+        right: -17px;
+        top: -7px;
+        width: 46px;
+        height: 26px;
+        background: var(--#{$namespace}-color-success);
+        text-align: center;
+        transform: rotate(45deg);
+
+        i {
+            font-size: 12px;
+            margin-top: 12px;
+            transform: rotate(-45deg);
+        }
+    }
+
+    .#{$namespace}-progress {
+        position: relative;
+        top: -7px;
+    }
+}
+
+.#{$namespace}-upload-list__item {
+    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
+    font-size: 14px;
+    color: var(--#{$namespace}-text-color-regular);
+    margin-bottom: 5px;
+    position: relative;
+    box-sizing: border-box;
+    border-radius: 4px;
+    width: 100%;
+
+    .#{$namespace}-progress {
+        position: absolute;
+        top: 20px;
+        width: 100%;
+    }
+
+    .#{$namespace}-progress__text {
+        position: absolute;
+        right: 0;
+        top: -13px;
+    }
+
+    .#{$namespace}-progress-bar {
+        margin-right: 0;
+        padding-right: 0;
+    }
+
+    & .#{$namespace}-icon--upload-success {
+        color: var(--#{$namespace}-color-success);
+    }
+
+    .#{$namespace}-icon--close {
+        display: none;
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        cursor: pointer;
+        opacity: 0.75;
+        color: var(--#{$namespace}-text-color-regular);
+        transition: opacity 0.3s;
+        transform: translateY(-50%);
+
+        &:hover {
+            opacity: 1;
+            color: var(--#{$namespace}-color-primary);
+        }
+    }
+
+    & .#{$namespace}-icon--close-tip {
+        display: none;
+        position: absolute;
+        top: 1px;
+        right: 5px;
+        font-size: 12px;
+        cursor: pointer;
+        opacity: 1;
+        color: var(--#{$namespace}-color-primary);
+        font-style: normal;
+    }
+
+    &:hover {
+        background-color: var(--#{$namespace}-fill-color-light);
+
+        .#{$namespace}-icon--close {
+            display: inline-flex;
+        }
+
+        .#{$namespace}-progress__text {
+            display: none;
+        }
+    }
+
+    .#{$namespace}-upload-list__item-info {
+        display: inline-flex;
+        justify-content: center;
+        flex-direction: column;
+        width: calc(100% - 30px);
+        margin-left: 4px;
+    }
+
+    &.is-success {
+        .#{$namespace}-upload-list__item-status-label {
+            display: inline-flex;
+        }
+
+        .#{$namespace}-upload-list__item-name:hover,
+        .#{$namespace}-upload-list__item-name:focus {
+            color: var(--#{$namespace}-color-primary);
+            cursor: pointer;
+        }
+
+        &:focus:not(:hover) {
+            /* 键盘focus */
+            .#{$namespace}-icon--close-tip {
+                display: inline-block;
+            }
+        }
+
+        &:not(.focusing):focus,
+        &:active {
+            /* click时 */
+            outline-width: 0;
+            .#{$namespace}-icon--close-tip {
+                display: none;
+            }
+        }
+
+        &:hover,
+        &:focus {
+            .#{$namespace}-upload-list__item-status-label {
+                display: none;
+                opacity: 0;
+            }
+        }
+    }
+}
+
+.#{$namespace}-upload-list__item-name {
+    color: var(--#{$namespace}-text-color-regular);
+    display: inline-flex;
+    text-align: center;
+    align-items: center;
+    padding: 4px;
+    transition: color 0.3s;
+    font-size: 14px;
+
+    .#{$namespace}-icon {
+        margin-right: 6px;
+        color: var(--#{$namespace}-text-color-secondary);
+    }
+}
+
+.#{$namespace}-upload-list__item-file-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.#{$namespace}-upload-list__item-status-label {
+    position: absolute;
+    right: 5px;
+    top: 0;
+    line-height: inherit;
+    display: none;
+
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+
+    transition: opacity 0.3s;
+}
+
+.#{$namespace}-upload-list__item-delete {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    font-size: 12px;
+    color: var(--#{$namespace}-text-color-regular);
+    display: none;
+
+    &:hover {
+        color: var(--#{$namespace}-color-primary);
+    }
+}
+
+.#{$namespace}-upload-cover {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    z-index: 10;
+    cursor: default;
+
+    &::after {
+        display: inline-block;
+        content: '';
+        height: 100%;
+        vertical-align: middle;
+    }
+
+    img {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+    & + .#{$namespace}-upload__inner {
+        opacity: 0;
+        position: relative;
+        z-index: 1;
+    }
+}
+
+.#{$namespace}-upload-cover__label {
+    @include upload-success(#fff);
+}
+
+.#{$namespace}-upload-cover__progress {
+    display: inline-block;
+    vertical-align: middle;
+    position: static;
+    width: 243px;
+
+    & + .#{$namespace}-upload__inner {
+        opacity: 0;
+    }
+}
+
+.#{$namespace}-upload-cover__content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.#{$namespace}-upload-cover__interact {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--#{$namespace}-overlay-color-light);
+    text-align: center;
+
+    .btn {
+        display: inline-block;
+        color: var(--#{$namespace}-color-white);
+        font-size: 14px;
+        cursor: pointer;
+        vertical-align: middle;
+        transition: var(--#{$namespace}-transition-md-fade);
+        margin-top: 60px;
+
+        i {
+            margin-top: 0;
+        }
+
+        span {
+            opacity: 0;
+            transition: opacity 0.15s linear;
+        }
+
+        &:not(:first-child) {
+            margin-left: 35px;
+        }
+
+        &:hover {
+            transform: translateY(-13px);
+
+            span {
+                opacity: 1;
+            }
+        }
+
+        i {
+            color: var(--#{$namespace}-color-white);
+            display: block;
+            font-size: 24px;
+            line-height: inherit;
+            margin: 0 auto 5px;
+        }
+    }
+}
+
+.#{$namespace}-upload-cover__title {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    background-color: var(--#{$namespace}-color-white);
+    height: 36px;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: normal;
+    text-align: left;
+    padding: 0 10px;
+    margin: 0;
+    line-height: 36px;
+    font-size: 14px;
+    color: var(--#{$namespace}-text-color-primary);
+}

package/dist/Tree/utils/KeyCode.d.ts

@@ -1,110 +0,0 @@
-declare const KeyCode: {
-    MAC_ENTER: number;
-    BACKSPACE: number;
-    TAB: number;
-    NUM_CENTER: number;
-    ENTER: number;
-    SHIFT: number;
-    CTRL: number;
-    ALT: number;
-    PAUSE: number;
-    CAPS_LOCK: number;
-    ESC: number;
-    SPACE: number;
-    PAGE_UP: number;
-    PAGE_DOWN: number;
-    END: number;
-    HOME: number;
-    LEFT: number;
-    UP: number;
-    RIGHT: number;
-    DOWN: number;
-    PRINT_SCREEN: number;
-    INSERT: number;
-    DELETE: number;
-    ZERO: number;
-    ONE: number;
-    TWO: number;
-    THREE: number;
-    FOUR: number;
-    FIVE: number;
-    SIX: number;
-    SEVEN: number;
-    EIGHT: number;
-    NINE: number;
-    QUESTION_MARK: number;
-    A: number;
-    B: number;
-    C: number;
-    D: number;
-    E: number;
-    F: number;
-    G: number;
-    H: number;
-    I: number;
-    J: number;
-    K: number;
-    L: number;
-    M: number;
-    N: number;
-    O: number;
-    P: number;
-    Q: number;
-    R: number;
-    S: number;
-    T: number;
-    U: number;
-    V: number;
-    W: number;
-    X: number;
-    Y: number;
-    Z: number;
-    META: number;
-    WIN_KEY_RIGHT: number;
-    CONTEXT_MENU: number;
-    NUM_ZERO: number;
-    NUM_ONE: number;
-    NUM_TWO: number;
-    NUM_THREE: number;
-    NUM_FOUR: number;
-    NUM_FIVE: number;
-    NUM_SIX: number;
-    NUM_SEVEN: number;
-    NUM_EIGHT: number;
-    NUM_NINE: number;
-    NUM_MULTIPLY: number;
-    NUM_PLUS: number;
-    NUM_MINUS: number;
-    NUM_PERIOD: number;
-    NUM_DIVISION: number;
-    F1: number;
-    F2: number;
-    F3: number;
-    F4: number;
-    F5: number;
-    F6: number;
-    F7: number;
-    F8: number;
-    F9: number;
-    F10: number;
-    F11: number;
-    F12: number;
-    NUMLOCK: number;
-    SEMICOLON: number;
-    DASH: number;
-    EQUALS: number;
-    COMMA: number;
-    PERIOD: number;
-    SLASH: number;
-    APOSTROPHE: number;
-    SINGLE_QUOTE: number;
-    OPEN_SQUARE_BRACKET: number;
-    BACKSLASH: number;
-    CLOSE_SQUARE_BRACKET: number;
-    WIN_KEY: number;
-    MAC_FF_META: number;
-    WIN_IME: number;
-    isTextModifyingKeyEvent: (e: KeyboardEvent) => boolean;
-    isCharacterKey: (keyCode: number) => boolean;
-};
-export default KeyCode;