bkui-vue 0.0.1-beta.61 → 0.0.1-beta.62

package/lib/upload/upload.d.ts

@@ -0,0 +1,252 @@
+import { APIResponse, EThemes, UploadFile, UploadRawFile } from './upload.type';
+declare const _default: import("vue").DefineComponent<{
+    theme: {
+        type: import("vue").PropType<"button" | "picture" | "draggable">;
+        default: "button" | "picture" | "draggable";
+        validator: (val: EThemes) => boolean;
+    };
+    files: {
+        type: import("vue").PropType<UploadFile[]>;
+        default: () => UploadFile[];
+    };
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    accept: {
+        type: StringConstructor;
+    };
+    delayTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+    url: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    method: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<number | import("./upload.type").MaxSize>;
+        default(): {
+            maxFileSize: number;
+            maxImgSize: number;
+        };
+    };
+    handleResCode: {
+        type: import("vue").PropType<(res: APIResponse) => boolean>;
+        default(res: APIResponse): boolean;
+    };
+    headers: {
+        type: import("vue").PropType<Headers>;
+        default: () => {};
+    };
+    header: {
+        type: import("vue").PropType<import("./upload.type").HeaderDataAttr | import("./upload.type").HeaderDataAttr[]>;
+        default: () => any[];
+    };
+    tip: {
+        type: StringConstructor;
+        default: string;
+    };
+    validateName: {
+        type: RegExpConstructor;
+    };
+    withCredentials: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    limit: NumberConstructor;
+    data: {
+        type: import("vue").PropType<import("./upload.type").ExtraFormData | import("./upload.type").ExtraFormData[]>;
+        default: () => any[];
+    };
+    formDataAttributes: {
+        type: import("vue").PropType<import("./upload.type").FormDataAttr | import("./upload.type").FormDataAttr[]>;
+        default: () => any[];
+    };
+    extCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    customRequest: import("vue").PropType<import("./upload.type").UploadRequestHandler>;
+    beforeUpload: {
+        type: import("vue").PropType<(file: UploadRawFile) => boolean | Promise<boolean>>;
+        default: any;
+    };
+    beforeRemove: {
+        type: import("vue").PropType<(file: UploadFile, uploadFiles: UploadFile[]) => boolean | Promise<boolean>>;
+        default: any;
+    };
+    sliceUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sliceUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    mergeUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    chunkSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("on-exceed" | "on-progress" | "on-success" | "on-error" | "on-delete" | "on-done")[], "on-exceed" | "on-progress" | "on-success" | "on-error" | "on-delete" | "on-done", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    theme: {
+        type: import("vue").PropType<"button" | "picture" | "draggable">;
+        default: "button" | "picture" | "draggable";
+        validator: (val: EThemes) => boolean;
+    };
+    files: {
+        type: import("vue").PropType<UploadFile[]>;
+        default: () => UploadFile[];
+    };
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    autoUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    accept: {
+        type: StringConstructor;
+    };
+    delayTime: {
+        type: NumberConstructor;
+        default: number;
+    };
+    url: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    method: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<number | import("./upload.type").MaxSize>;
+        default(): {
+            maxFileSize: number;
+            maxImgSize: number;
+        };
+    };
+    handleResCode: {
+        type: import("vue").PropType<(res: APIResponse) => boolean>;
+        default(res: APIResponse): boolean;
+    };
+    headers: {
+        type: import("vue").PropType<Headers>;
+        default: () => {};
+    };
+    header: {
+        type: import("vue").PropType<import("./upload.type").HeaderDataAttr | import("./upload.type").HeaderDataAttr[]>;
+        default: () => any[];
+    };
+    tip: {
+        type: StringConstructor;
+        default: string;
+    };
+    validateName: {
+        type: RegExpConstructor;
+    };
+    withCredentials: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    limit: NumberConstructor;
+    data: {
+        type: import("vue").PropType<import("./upload.type").ExtraFormData | import("./upload.type").ExtraFormData[]>;
+        default: () => any[];
+    };
+    formDataAttributes: {
+        type: import("vue").PropType<import("./upload.type").FormDataAttr | import("./upload.type").FormDataAttr[]>;
+        default: () => any[];
+    };
+    extCls: {
+        type: StringConstructor;
+        default: string;
+    };
+    customRequest: import("vue").PropType<import("./upload.type").UploadRequestHandler>;
+    beforeUpload: {
+        type: import("vue").PropType<(file: UploadRawFile) => boolean | Promise<boolean>>;
+        default: any;
+    };
+    beforeRemove: {
+        type: import("vue").PropType<(file: UploadFile, uploadFiles: UploadFile[]) => boolean | Promise<boolean>>;
+        default: any;
+    };
+    sliceUpload: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    sliceUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    mergeUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+    chunkSize: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & {
+    "onOn-exceed"?: (...args: any[]) => any;
+    "onOn-progress"?: (...args: any[]) => any;
+    "onOn-success"?: (...args: any[]) => any;
+    "onOn-error"?: (...args: any[]) => any;
+    "onOn-delete"?: (...args: any[]) => any;
+    "onOn-done"?: (...args: any[]) => any;
+}, {
+    data: import("./upload.type").ExtraFormData | import("./upload.type").ExtraFormData[];
+    header: import("./upload.type").HeaderDataAttr | import("./upload.type").HeaderDataAttr[];
+    name: string;
+    theme: "button" | "picture" | "draggable";
+    size: number | import("./upload.type").MaxSize;
+    extCls: string;
+    multiple: boolean;
+    disabled: boolean;
+    tip: string;
+    files: UploadFile[];
+    autoUpload: boolean;
+    delayTime: number;
+    method: string;
+    handleResCode: (res: APIResponse) => boolean;
+    headers: Headers;
+    withCredentials: boolean;
+    formDataAttributes: import("./upload.type").FormDataAttr | import("./upload.type").FormDataAttr[];
+    beforeUpload: (file: UploadRawFile) => boolean | Promise<boolean>;
+    beforeRemove: (file: UploadFile, uploadFiles: UploadFile[]) => boolean | Promise<boolean>;
+    sliceUpload: boolean;
+    sliceUrl: string;
+    mergeUrl: string;
+    chunkSize: number;
+}>;
+export default _default;

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 1s;
+    }
+
+    &-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;
+      }
+    }
+  }
+}