bkui-vue 0.0.1-beta.13 → 0.0.1-beta.132

package/lib/upload/upload.less

@@ -0,0 +1,455 @@
+@import '../styles/themes/themes.less';
+@import '../styles/mixins/mixins.less';
+
+.picture-item-thumbnail(@thumbnail-size: 32px) {
+  width: @thumbnail-size;
+  height: @thumbnail-size;
+  object-fit: contain;
+}
+
+.picture-item-actions() {
+  position: absolute;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background: rgba(0, 0, 0, .45);
+  opacity: 0;
+  transition: opacity .35s;
+  align-items: center;
+  justify-content: center;
+
+  .action-icon {
+    margin: 0 4px;
+    font-size: 18px;
+    cursor: pointer;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.picture-item-progress() {
+  position: absolute;
+}
+
+.@{bk-prefix}-upload {
+  &__input-file {
+    display: none;
+  }
+
+  &__tip {
+    font-size: 12px;
+    color: @default-color;
+  }
+
+  &--disabled {
+    .@{bk-prefix}-upload__tip {
+      color: @light-gray;
+    }
+  }
+
+  &--button {
+    .@{bk-prefix}-upload-trigger {
+      display: inline-flex;
+    }
+    .@{bk-prefix}-upload__tip {
+      display: inline-flex;
+      margin-left: 8px;
+    }
+  }
+
+  &--picture {
+    display: flex;
+    flex-wrap: wrap;
+
+    .@{bk-prefix}-upload__tip {
+      order: 1;
+      flex: 1 0 100%;
+    }
+  }
+
+  &--single-picture {
+    .@{bk-prefix}-upload__tip {
+      margin-top: 8px;
+    }
+  }
+
+  &--draggable {
+    .@{bk-prefix}-upload__tip {
+      margin-top: 8px;
+    }
+  }
+}
+
+.@{bk-prefix}-upload-trigger {
+  color: @default-color;
+
+  &__picture-inner {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  &__picture-icon {
+    font-size: 24px;
+    font-weight: bold;
+    color: @gray-color;
+  }
+
+  &__picture-text {
+    font-size: 12px;
+  }
+
+  // 单图片/头像模式
+  &__picture-thumbnail {
+    .picture-item-thumbnail(88px)
+  }
+
+  &__picture-actions {
+    .picture-item-actions()
+  }
+
+  &__picture-progress {
+    .picture-item-progress()
+  }
+
+  &--button {
+    font-size: 12px;
+  }
+
+  &__button-icon {
+    font-size: 18px;
+  }
+
+  &__button-text {
+    font-size: 12px;
+  }
+
+  &--draggable {
+    height: 80px;
+    cursor: pointer;
+    background-color: @whitesmoke-color;
+    border: @border-width-base dashed @light-gray;
+    border-radius: @border-radius-base;
+  }
+
+  &--dragover {
+    border-color: @primary-color;
+  }
+
+  &__draggable {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  &__draggable-icon {
+    font-size: 24px;
+    font-weight: bold;
+    color: @gray-color;
+  }
+
+  &__draggable-text {
+    font-size: 12px;
+  }
+
+  &__draggable-upload-link {
+    color: @primary-color;
+  }
+
+  &--picture {
+    position: relative;
+    display: inline-flex;
+    width: 96px;
+    height: 96px;
+    margin: 0 8px 8px 0;
+    overflow: hidden;
+    cursor: pointer;
+    background-color: @whitesmoke-color;
+    border: @border-width-base dashed @light-gray;
+    border-radius: @border-radius-base;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--single-picture {
+    &.@{bk-prefix}-upload-trigger {
+      &--uploading {
+        background: rgba(0, 0, 0, .65);
+      }
+    }
+  }
+
+  &--has-file {
+    border-style: solid;
+  }
+
+  &--fail {
+    background: rgba(254, 221, 220, .40);
+    border-color: #ff5656;
+  }
+
+  &--disabled {
+    &.@{bk-prefix}-upload-trigger {
+      color: @light-gray;
+
+      &--draggable,
+      &--picture {
+        cursor: not-allowed;
+        background-color: #fff;
+        border-color: @disable-color;
+      }
+    }
+    .@{bk-prefix}-upload-trigger {
+      &__draggable-inner,
+      &__draggable-icon,
+      &__draggable-upload-link,
+      &__picture-inner,
+      &__picture-icon,
+      &__picture-upload-link {
+        color: @light-gray;
+      }
+    }
+  }
+
+  &:not(.@{bk-prefix}-upload-trigger--disabled) {
+    &:hover {
+      color: @primary-color;
+      border-color: @primary-color;
+
+      .@{bk-prefix}-upload-trigger {
+        &__picture-icon,
+        &__draggable-icon {
+          color: @primary-color;
+        }
+      }
+    }
+  }
+
+  &--single-picture {
+    &.@{bk-prefix}-upload-trigger--fail {
+      &.@{bk-prefix}-upload-trigger--has-file {
+        &:hover {
+          border-color: #ff5656;
+        }
+      }
+    }
+    &.@{bk-prefix}-upload-trigger--has-file {
+      &:hover {
+        border-color: @light-gray;
+      }
+    }
+  }
+
+}
+
+.@{bk-prefix}-upload-list {
+  @thumbnail-size: 32px;
+
+  &__item {
+    display: flex;
+    padding: 10px;
+    margin: 8px 0;
+    background: #fff;
+    border: 1px solid @light-gray;
+    border-radius: 2px;
+    transition: all .125s cubic-bezier(.55, 0, .1, 1);
+
+    &:hover {
+      border-color: @gray-color;
+      .@{bk-prefix}-upload-list {
+        &__item-speed {
+          display: none;
+        }
+
+        &__item-actions {
+          display: block;
+        }
+      }
+    }
+
+    &-enter-active,
+    &-leave-active {
+      transition: all .625s;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+  }
+
+  &__item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: @gray-color;
+  }
+
+  &__item-thumbnail {
+    width: @thumbnail-size;
+    height: @thumbnail-size;
+    object-fit: contain;
+  }
+
+  &__item-file-icon {
+    font-size: @thumbnail-size;
+  }
+
+  &__item-summary {
+    flex: 1;
+    position: relative;
+    padding: 2px 2px 2px 10px;
+    overflow: hidden;
+  }
+
+  &__item-name {
+    font-size: 12px;
+    color: @default-color;
+    text-align: left;
+    direction: rtl;
+    .ellipsis-style(85%, block);
+  }
+
+  &__item-speed {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 12px;
+    font-weight: 700;
+    color: @default-color;
+  }
+
+  &__item-speed-rate {
+    margin-left: 4px;
+  }
+
+  &__item-speed-percentage {
+    margin-left: 16px;
+  }
+
+  &__item-message {
+    .ellipsis-style(85%, block);
+  }
+
+  &__item-actions {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    display: none;
+    font-size: 12px;
+    transform: translateY(-50%);
+  }
+
+  &__item-del-icon {
+    font-size: 14px;
+    color: @gray-color;
+    cursor: pointer;
+  }
+
+  &__item-progress {
+    margin-top: 8px;
+    font-size: 12px;
+  }
+
+  &__item--success {
+    .@{bk-prefix}-upload-list {
+      &__item-speed {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      &__item-message {
+        color: @success-color;
+      }
+
+      &__item-message-success-icon {
+        display: inline-block;
+        font-size: 22px;
+        line-height: 18px;
+      }
+    }
+
+    &:hover {
+      .@{bk-prefix}-upload-list {
+        &__item-speed {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &__item--fail {
+    background: rgba(254, 221, 220, .40);
+    border-color: #ff5656;
+    .@{bk-prefix}-upload-list {
+      &__item-message {
+        color: #ff5656;
+      }
+
+      &__item-actions {
+        display: block;
+      }
+    }
+
+    &:hover {
+      border-color: #ff5656;
+    }
+  }
+
+  // 图片列表模式
+  &__item-picture {
+    position: relative;
+    display: flex;
+    width: 96px;
+    height: 96px;
+    padding: 0;
+    margin: 0 8px 8px 0;
+    overflow: hidden;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    &.@{bk-prefix}-upload-list {
+      &__item {
+        &--uploading {
+          background: rgba(0, 0, 0, .65);
+        }
+      }
+    }
+  }
+
+  &__picture-item-thumbnail {
+    .picture-item-thumbnail(88px)
+  }
+
+  &__picture-item-actions {
+    .picture-item-actions()
+  }
+
+  &__picture-item-progress {
+    .picture-item-progress()
+  }
+
+  &--picture {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &--disabled {
+    .@{bk-prefix}-upload-list {
+      &__item {
+        pointer-events: none;
+      }
+    }
+  }
+}

package/lib/upload/upload.type.d.ts

@@ -0,0 +1,78 @@
+import { ExtractPropTypes } from 'vue';
+import uploadProps from './props';
+export declare const CLASS_PREFIX = "bk-upload";
+export declare const enum EThemes {
+    BUTTON = "button",
+    DRAGGABLE = "draggable",
+    PICTURE = "picture"
+}
+export declare type Theme = Lowercase<keyof typeof EThemes>;
+export declare const enum EUploadStatus {
+    NEW = "new",
+    UPLOADING = "uploading",
+    SUCCESS = "success",
+    FAIL = "fail"
+}
+export declare type UploadStatus = Lowercase<keyof typeof EUploadStatus>;
+export declare type FormDataAttr = {
+    name: string;
+    value: string | Blob | [string | Blob, string];
+};
+export declare type HeaderDataAttr = {
+    name: string;
+    value: string;
+};
+export declare type ExtraFormData = Record<string, string | Blob | [string | Blob, string]>;
+export declare type UploadFiles = UploadFile[];
+export declare type UploadFile = {
+    name: string;
+    status: UploadStatus;
+    statusText?: string;
+    percentage?: number;
+    response?: unknown;
+    size: number;
+    uid: number;
+    url?: string;
+    raw: UploadRawFile;
+    isPic?: boolean;
+};
+export interface UploadRawFile extends File {
+    uid: number;
+}
+export declare type MaxSize = {
+    maxFileSize: number;
+    maxImgSize: number;
+};
+export interface UploadProgressEvent extends ProgressEvent {
+    percent: number;
+}
+export interface APIResponse {
+    code: number;
+    data: unknown;
+    message?: string;
+}
+export declare type SuccessResponse = APIResponse | XMLHttpRequestResponseType | unknown;
+export declare type UploadProps = ExtractPropTypes<typeof uploadProps>;
+export interface UploadRequestOptions {
+    action: string;
+    method: string;
+    data?: ExtraFormData | ExtraFormData[];
+    formDataAttributes?: FormDataAttr | FormDataAttr[];
+    filename: string;
+    file: File;
+    headers?: Headers | Record<string, string | number | null | undefined>;
+    header?: HeaderDataAttr | HeaderDataAttr[];
+    withCredentials: boolean;
+    sliceUrl: string;
+    mergeUrl: string;
+    chunkSize: number;
+    onProgress: (event: UploadProgressEvent, i?: number) => void;
+    onError: (error: Error) => void;
+    onSuccess: (res: SuccessResponse) => void;
+    onComplete: () => void;
+}
+export declare type UploadRequestHandler = (options: UploadRequestOptions) => XMLHttpRequest | Promise<unknown>;
+export declare type HookHandler = (uploadFile: UploadFile, uploadFiles: UploadFiles) => void;
+export interface UploadHanderHooks {
+    onRemove: HookHandler;
+}