@ajaxjs/ui 1.2.0 → 1.2.2

package/src/widget/FileUploader/FileUploader.ts

@@ -1,156 +0,0 @@
-import Empty from '../EmptyContent';
-
-export default {
-    props: {
-        action: { type: String, required: false }, // 上传路径
-        limitSize: { type: Number, default: 20000 }, // 文件大小限制
-        limitFileType: String,
-        isImgUpload: Boolean,
-        isShowBtn: { type: Boolean, default: true },
-        accpectFileType: {
-            type: String, default() {
-                if (this.isImgUpload)
-                    return 'image/*';
-            }
-        }, // 可以上传类型 如 image/*
-        buttonBottom: Boolean, // 上传按钮是否位于下方
-        radomId: {
-            type: Number, default() { // 不重复的 id，用关于关联 label 与 input[type=file]
-                return Math.round(Math.random() * 1000);
-            },
-        },
-    },
-
-    data() {
-        return {
-            model: { children: [] },
-            imgSrc: Empty.empty,
-            open: false,
-            allowAddNode: false,
-            // isFolder : false
-            fileName: '',        // 获取文件名称，只能是名称，不能获取完整的文件目录
-            fileSize: 0,         // 文件大小
-            progress: 0,         // 上传进度百分比
-            errMsg: '',          // 错误信息。约定：只有为空字符串，才表示允许上传。
-            newlyId: '',         // 成功上传之后的文件 id
-            fileObj: null
-        }
-    },
-
-    methods: {
-        /**
-         * 选择文件后触发的事件
-         *
-         * @param ev
-         */
-        onUploadInputChange(ev: Event): void {
-            let fileInput: HTMLInputElement = <HTMLInputElement>ev.target;
-            if (!fileInput.files || !fileInput.files[0]) return;
-
-            // this.errStatus = [false, false, false];
-            this.onFileGet(fileInput.files);
-
-            let file: File = fileInput.files[0];
-            this.fileObj = file;
-
-            if (this.isImgUpload) {
-                let reader: FileReader = new FileReader();
-                reader.onload = (e) => {
-                    let imgBase64: string = <string>e.target.result; // 得到了图片的 base64 编码
-                    // alert(imgBase64Str);
-                    this.imgSrc = imgBase64;
-                }
-
-                reader.readAsDataURL(file);
-            }
-        },
-
-        /**
-         * 返回 File 对象，在表单混合上传时候有用
-         * @returns 
-         */
-        getFileObj(): File {
-            return this.fileObj;
-        },
-
-        onDrop(ev: DragEvent): void {
-            ev.preventDefault(); // 阻止进行拖拽时浏览器的默认行为，即自动打开图片
-
-            if (ev.dataTransfer?.files) this.onFileGet(ev.dataTransfer.files);
-        },
-
-        onFileGet(files: FileList): void {
-            let file: File = files[0],
-                fileType: string = file.type;
-
-            this.$fileObj = file;
-            this.fileName = file.name;
-            this.fileSize = file.size;
-        },
-        /**
-         * 执行上传
-         *
-         * @param this
-         */
-        doUpload(): void {
-            // this.$uploadOk_callback({ isOk: true, msg: "ok!", imgUrl: "fdfdf" });
-            // return;
-
-            let fd: FormData = new FormData();
-
-            if (this.$blob) fd.append("file", this.$blob, this.fileName);
-            else if (this.$fileObj) fd.append("file", this.$fileObj);
-
-            let xhr: XMLHttpRequest = new XMLHttpRequest();
-            //@ts-ignore
-            xhr.onreadystatechange = aj.xhr.requestHandler.delegate(
-                null,
-                this.$uploadOk_callback,
-                "json"
-            );
-            xhr.open("POST", this.action, true);
-            xhr.onprogress = (ev: ProgressEvent) => {
-                let progress: number = 0,
-                    p: number = ~~((ev.loaded * 1000) / ev.total);
-                p = p / 10;
-
-                if (progress !== p) progress = p;
-
-                this.progress = progress;
-            };
-
-            xhr.send(fd);
-        },
-
-        changeByte: changeByte
-    }
-}
-
-/**
- * 字节 Byte 转化成 KB，MB，GB
- *
- * @param limit
- */
-function changeByte(limit: number): string {
-    let size: string = "";
-
-    if (limit < 0.1 * 1024)
-        // 小于 0.1KB，则转化成 B
-        size = limit.toFixed(2) + "B";
-    else if (limit < 0.1 * 1024 * 1024)
-        // 小于 0.1MB，则转化成 KB
-        size = (limit / 1024).toFixed(2) + "KB";
-    else if (limit < 0.1 * 1024 * 1024 * 1024)
-        // 小于 0.1GB，则转化成 MB
-        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
-    // 其他转化成 GB
-    else size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
-
-    let index = size.indexOf("."); // 获取小数点处的索引
-
-    if (size.substr(index + 1, 2) == "00")
-        // 获取小数点后两位的值，判断后两位是否为 00，如果是则删除 00
-        return size.substring(0, index) + size.substr(index + 3, 2);
-
-    return size;
-}

package/src/widget/FileUploader/FileUploader.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="aj-file-uploader">
-    <div v-if="isImgUpload">
-      <img class="perviewImg" :src='imgSrc' />
-      <br />
-    </div>
-
-    <table>
-      <tr>
-        <td>
-          <input type="file" :id="'uploadInput_' + radomId" @change="onUploadInputChange" :accept="accpectFileType" />
-
-          <label class="pseudoFilePicker" :for="'uploadInput_' + radomId">
-            <div @drop="onDrop" ondragover="event.preventDefault();">
-              <div>+</div>点击选择文件<br />或拖放到此
-            </div>
-          </label>
-
-        </td>
-        <td>
-          <div class="msg" v-if="errMsg != ''">
-            允许类型：{{limitFileType || '无限制'}}
-            <br />
-            允许大小：{{limitSize ? changeByte(limitSize * 1024) : '无限制'}}
-            <span class="slot"></span>
-          </div>
-
-          <div class="msg" v-if="errMsg == ''">
-            <div class="fileName" :title="'本地文件名: ' + fileName">{{fileName}}</div>
-            <div v-if="fileSize">{{changeByte(fileSize)}}</div>
-            <button @click.prevent="doUpload" v-if="isShowBtn">{{progress && progress !== 100 ? '上传中 ' + progress + '%': '上传'}}</button>
-          </div>
-        </td>
-      </tr>
-
-    </table>
-
-  </div>
-</template>
-
-<script lang="ts" src="./FileUploader.ts"></script>
-
-<style lang="less" src="./FileUploader.less"></style>

package/src/widget/HtmlEditor/HtmlEditor.less

@@ -1,345 +0,0 @@
-.aj-form-html-editor {
-    ul.toolbar {
-        border          : 1px solid #C5C5C5;
-        border-radius   : 4px 4px 0 0;
-        border-bottom   : 0;
-        background-color: #E8E7E4;
-        width           : 100%;
-        min-height      : 30px;
-        margin          : 0;
-        box-sizing      : border-box;
-        padding         : 3px 4px;
-
-        &>li {
-            list-style: none;
-            float     : left;
-            cursor    : pointer;
-
-            &>i {
-                border     : 1px solid transparent;
-                min-width  : 25px;
-                height     : 20px;
-                line-height: 20px;
-                text-align : center;
-                display    : block;
-
-                &.text-icon{
-                    font-family:Times New Roman;font-weight: bold;font-style: normal;
-                }
-                
-                &.fontAwesome{
-                    padding-top: 2px;
-                    font       : normal normal normal 18px/1 FontAwesome;
-                }
-
-                &:hover {
-                    border-right-color : #aaa;
-                    border-bottom-color: #aaa;
-                    border-top-color   : #fff;
-                    border-left-color  : #fff;
-                }
-
-                &:active {
-                    border-right-color : #f3f8fc;
-                    border-bottom-color: #f3f8fc;
-                    border-top-color   : #ccc;
-                    border-left-color  : #ccc;
-                }
-            }
-
-            ul li {
-                padding: 3px;
-                cursor : pointer;
-
-                &:hover {
-                    background-color: lightgray;
-                }
-            }
-
-            .cleanHTML {
-                background-size: 16px 16px;
-            }
-
-            .noBg {
-                background-image: none;
-            }
-        }
-    }
-
-    .editorBody {
-        iframe,
-        textarea {
-            border          : 1px solid #C5C5C5;
-            border-radius   : 0 0 4px 4px;
-            border-top-width: 0;
-            box-sizing      : border-box;
-            background-color: white;
-            min-height          : 300px;
-            width           : 100%;
-        }
-
-        iframe.hide{
-            display: none;
-        }
-        textarea {
-            resize: none;
-            display: none;
-            &.show{
-                display: block;
-            }
-        }
-    }
-
-    .colorPicker {
-        width   : 210px;
-        border  : 1px solid #D3D3D3;
-        position: absolute;
-
-        table {
-            border-collapse: collapse;
-        }
-
-        .colorhead {
-            height     : 23px;
-            line-height: 23px;
-            font-weight: bold;
-            width      : 100%;
-        }
-
-        .colortitle {
-            margin-left: 6px;
-            font-size  : 12px;
-        }
-
-        .colorpanel td {
-            border   : 1px solid #000;
-            height   : 10px;
-            width    : 10px;
-            overflow : hidden;
-            font-size: 1px;
-            cursor   : pointer;
-        }
-    }
-
-    // 字体演示
-    .fontfamilyChoser,
-    .fontsizeChoser {
-        a {
-            padding-right  : 2px;
-            display        : block;
-            padding-left   : 2px;
-            padding-bottom : 2px;
-            color          : #000;
-            line-height    : 120%;
-            padding-top    : 2px;
-            text-decoration: none;
-
-            &:hover {
-                background: #e5e5e5
-            }
-        }
-    }
-
-    // 登录面板 和忘记密码
-    .dorpdown {
-        position: relative;
-
-        &:hover .fontfamilyChoser,
-        .fontfamilyChoser:hover,
-        &:hover .fontsizeChoser,
-        .fontsizeChoser:hover,
-        &:hover .colorPicker,
-        .colorPicker:hover {
-            display: block;
-        }
-
-        &>div {
-            display         : none;
-            position        : absolute;
-            top             : 22px;
-            left            : 0;
-            background-color: #f5f5f5;
-            border          : 1px solid lightgray;
-            border-top      : 0;
-            padding         : 5px;
-            width           : 230px;
-        }
-
-        .fontsizeChoser {
-            top  : inherit;
-            right: 0;
-        }
-    }
-}.aj-form-html-editor {
-    ul.toolbar {
-        border          : 1px solid #C5C5C5;
-        border-radius   : 4px 4px 0 0;
-        border-bottom   : 0;
-        background-color: #E8E7E4;
-        width           : 100%;
-        min-height      : 30px;
-        margin          : 0;
-        box-sizing      : border-box;
-        padding         : 3px 4px;
-
-        &>li {
-            list-style: none;
-            float     : left;
-            cursor    : pointer;
-
-            &>i {
-                border     : 1px solid transparent;
-                min-width  : 25px;
-                height     : 20px;
-                line-height: 20px;
-                text-align : center;
-                display    : block;
-
-                &.text-icon{
-                    font-family:Times New Roman;font-weight: bold;font-style: normal;
-                }
-                
-                &.fontAwesome{
-                    padding-top: 2px;
-                    font       : normal normal normal 18px/1 FontAwesome;
-                }
-
-                &:hover {
-                    border-right-color : #aaa;
-                    border-bottom-color: #aaa;
-                    border-top-color   : #fff;
-                    border-left-color  : #fff;
-                }
-
-                &:active {
-                    border-right-color : #f3f8fc;
-                    border-bottom-color: #f3f8fc;
-                    border-top-color   : #ccc;
-                    border-left-color  : #ccc;
-                }
-            }
-
-            ul li {
-                padding: 3px;
-                cursor : pointer;
-
-                &:hover {
-                    background-color: lightgray;
-                }
-            }
-
-            .cleanHTML {
-                background-size: 16px 16px;
-            }
-
-            .noBg {
-                background-image: none;
-            }
-        }
-    }
-
-    .editorBody {
-        iframe,
-        textarea {
-            border          : 1px solid #C5C5C5;
-            border-radius   : 0 0 4px 4px;
-            border-top-width: 0;
-            box-sizing      : border-box;
-            background-color: white;
-            min-height          : 300px;
-            width           : 100%;
-        }
-
-        iframe.hide{
-            display: none;
-        }
-        textarea {
-            resize: none;
-            display: none;
-            &.show{
-                display: block;
-            }
-        }
-    }
-
-    .colorPicker {
-        width   : 210px;
-        border  : 1px solid #D3D3D3;
-        position: absolute;
-
-        table {
-            border-collapse: collapse;
-        }
-
-        .colorhead {
-            height     : 23px;
-            line-height: 23px;
-            font-weight: bold;
-            width      : 100%;
-        }
-
-        .colortitle {
-            margin-left: 6px;
-            font-size  : 12px;
-        }
-
-        .colorpanel td {
-            border   : 1px solid #000;
-            height   : 10px;
-            width    : 10px;
-            overflow : hidden;
-            font-size: 1px;
-            cursor   : pointer;
-        }
-    }
-
-    // 字体演示
-    .fontfamilyChoser,
-    .fontsizeChoser {
-        a {
-            padding-right  : 2px;
-            display        : block;
-            padding-left   : 2px;
-            padding-bottom : 2px;
-            color          : #000;
-            line-height    : 120%;
-            padding-top    : 2px;
-            text-decoration: none;
-
-            &:hover {
-                background: #e5e5e5
-            }
-        }
-    }
-
-    // 登录面板 和忘记密码
-    .dorpdown {
-        position: relative;
-
-        &:hover .fontfamilyChoser,
-        .fontfamilyChoser:hover,
-        &:hover .fontsizeChoser,
-        .fontsizeChoser:hover,
-        &:hover .colorPicker,
-        .colorPicker:hover {
-            display: block;
-        }
-
-        &>div {
-            display         : none;
-            position        : absolute;
-            top             : 22px;
-            left            : 0;
-            background-color: #f5f5f5;
-            border          : 1px solid lightgray;
-            border-top      : 0;
-            padding         : 5px;
-            width           : 230px;
-        }
-
-        .fontsizeChoser {
-            top  : inherit;
-            right: 0;
-        }
-    }
-}