@ajaxjs/util 1.0.8 → 1.1.0

package/dist/widget/Article.vue

@@ -0,0 +1,59 @@
+<template>
+  <article>
+    <h2>{{title}}</h2>
+
+    <div class="toolbar">
+      <span v-if="author">作者: {{author}}</span> &nbsp;
+      <a :href="source" v-if="source" target="_blank">
+
+        <svg width="16px" height="16px" viewBox="0 0 24 24" style="cursor:pointer;vertical-align: middle;">
+          <g stroke-width="2.1" stroke="#666" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="17 13.5 17 19.5 5 19.5 5 7.5 11 7.5"></polyline>
+            <path d="M14,4.5 L20,4.5 L20,10.5 M20,4.5 L11,13.5"></path>
+          </g>
+        </svg>
+        来源</a>
+      <FontSize style="float:right;clear:both"></FontSize>
+    </div>
+    <slot></slot>
+  </article>
+</template>
+
+<script>
+import FontSize from './AdjustFontSize.vue';
+
+export default { 
+  props: {
+    title: String, author: String, source: String
+  },
+  components: { FontSize }
+}
+</script>
+
+<style lang="less" scoped>
+@import "../style/common-functions.less";
+
+article {
+  & > p {
+    .aj-text-function();
+    text-indent: 2em;
+  }
+  & > img,
+  & > p > img {
+    max-width: 80%;
+    margin: 0 auto;
+    display: block;
+  }
+
+  h2 {
+    .aj-text-title();
+  }
+
+  .toolbar {
+    height: 15px;
+    margin: 30px 0;
+    font-size: 0.8rem;
+    text-align: right;
+  }
+}
+</style>

package/dist/widget/EmptyContent.d.ts

@@ -0,0 +1,5 @@
+declare namespace _default {
+    const empty: string;
+    const emptyDrak: string;
+}
+export default _default;

package/dist/widget/EmptyContent.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    empty: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiNEQURFRTMiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTUwLjU5OCAxMS4wOTNDMjUuNTU0IDE1Ljc2IDExLjcyOCAyNC41NzMgOS4xMiAzNy41MzUgNS45OSA2OC42NDQgMTI4LjA4IDcwLjIgMTEzLjIxIDEwMi44NjNjLTcuODI2IDEwLjg4Ny0yNS41NjYgMTMuMjItNTMuMjE5IDYuOTk5IiBzdHJva2UtZGFzaGFycmF5PSIzIi8+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0ibTU1IDY4LjI3IDQyLjE2Mi0xMi4zMjR2NDkuNTc3TDU1IDExNy41Njh6TTU1IDY4LjEwOCAxNi4wODEgNTUuOTQ2djQ5LjU3N0w1NSAxMTcuNTY4eiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNi4wMTIgNTYuMDQgNTUgNjguMTA4IDQyLjUgODYuNzU3IDQuNzMgNzMuMDYzek05Ny4xNjIgNTUuOTQ2IDU1IDY4LjEwOGwxMi44MSAxOC42NDkgNDIuMzI1LTE0LjE2NnoiLz48cGF0aCBmaWxsPSIjRjZGN0Y4IiBkPSJtMTYuMDgxIDU1Ljk0NiA0My4zNDctMTIuMTYyIDM3LjczNCAxMi4xNjJMNTUgNjguMTA4eiIvPjwvZz48ZyBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNzguMDY4IDEwLjMxIDYwLjA0IDguOGwyLjc5LTUuMzF6Ii8+PHBhdGggZmlsbD0iI0Y2RjdGOCIgZD0iTTc4LjA2OCAxMC4zMSA1Ni40NSAxMy44OGwtMy44MzQtNS45MzR6Ii8+PC9nPjwvZz48L3N2Zz4=',
+    emptyDrak: 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyMCIgd2lkdGg9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMzYTNjNDYiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTUwLjU5OCAxMS4wOTNDMjUuNTU0IDE1Ljc2IDExLjcyOCAyNC41NzMgOS4xMiAzNy41MzUgNS45OSA2OC42NDQgMTI4LjA4IDcwLjIgMTEzLjIxIDEwMi44NjNjLTcuODI2IDEwLjg4Ny0yNS41NjYgMTMuMjItNTMuMjE5IDYuOTk5IiBzdHJva2UtZGFzaGFycmF5PSIzIi8+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGcgZmlsbD0iIzFhMWIxZSI+PHBhdGggZD0ibTU1IDY4LjI3IDQyLjE2Mi0xMi4zMjR2NDkuNTc3TDU1IDExNy41Njh6TTU1IDY4LjEwOCAxNi4wODEgNTUuOTQ2djQ5LjU3N0w1NSAxMTcuNTY4eiIvPjxwYXRoIGQ9Ik0xNi4wMTIgNTYuMDQgNTUgNjguMTA4IDQyLjUgODYuNzU3IDQuNzMgNzMuMDYzek05Ny4xNjIgNTUuOTQ2IDU1IDY4LjEwOGwxMi44MSAxOC42NDkgNDIuMzI1LTE0LjE2NnoiLz48L2c+PHBhdGggZD0ibTE2LjA4MSA1NS45NDYgNDMuMzQ3LTEyLjE2MiAzNy43MzQgMTIuMTYyTDU1IDY4LjEwOHoiIGZpbGw9IiMxNDE1MTgiLz48L2c+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTc4LjA2OCAxMC4zMSA2MC4wNCA4LjhsMi43OS01LjMxeiIgZmlsbD0iIzFhMWIxZSIvPjxwYXRoIGQ9Ik03OC4wNjggMTAuMzEgNTYuNDUgMTMuODhsLTMuODM0LTUuOTM0eiIgZmlsbD0iIzE0MTUxOCIvPjwvZz48L2c+PC9zdmc+'
+};
+//# sourceMappingURL=EmptyContent.js.map

package/dist/widget/EmptyContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyContent.js","sourceRoot":"","sources":["../../src/widget/EmptyContent.js"],"names":[],"mappings":";;AAAA,kBAAe;IACX,KAAK,EAAE,4jCAA4jC;IACnkC,SAAS,EAAE,4jCAA4jC;CAC1kC,CAAC"}

package/dist/widget/Expander.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="aj-expander" :style="'height:' + (expended ? openHeight : closeHeight) + 'px;'">
+    <div :class="expended ? 'closeBtn' : 'openBtn'" @click="expended = !expended;"></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * 展开闭合器
+ */
+export default {
+  props: {
+    openHeight: { type: Number, default: 200 },
+    closeHeight: { type: Number, default: 50 },
+  },
+  data(): any {
+    return {
+      expended: false,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.aj-expander {
+  overflow: hidden;
+  position: relative;
+  clear: both;
+  transition: height 200ms ease 0s;
+
+  .mask-layer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 23px;
+    width: 100%;
+    background: -webkit-gradient(
+      linear,
+      center top,
+      center bottom,
+      from(transparent),
+      to(white)
+    );
+  }
+
+  .openBtn {
+    background: url("https://ajaxjs.nos-eastchina1.126.net/images/openBtn.png");
+  }
+
+  .closeBtn {
+    background: url("https://ajaxjs.nos-eastchina1.126.net/images/closeBtn.png");
+  }
+
+  .closeBtn,
+  .openBtn {
+    width: 45px;
+    height: 32px;
+    position: absolute;
+    cursor: pointer;
+    top: 0px;
+    right: 0px;
+  }
+}
+</style>

package/dist/widget/FileUploader/FileUploader.d.ts

@@ -0,0 +1,70 @@
+declare const _default: {
+    props: {
+        action: {
+            type: StringConstructor;
+            required: boolean;
+        };
+        limitSize: {
+            type: NumberConstructor;
+            default: number;
+        };
+        limitFileType: StringConstructor;
+        isImgUpload: BooleanConstructor;
+        isShowBtn: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        accpectFileType: {
+            type: StringConstructor;
+            default(): string;
+        };
+        buttonBottom: BooleanConstructor;
+        radomId: {
+            type: NumberConstructor;
+            default(): number;
+        };
+    };
+    data(): {
+        model: {
+            children: any[];
+        };
+        imgSrc: string;
+        open: boolean;
+        allowAddNode: boolean;
+        fileName: string;
+        fileSize: number;
+        progress: number;
+        errMsg: string;
+        newlyId: string;
+        fileObj: any;
+    };
+    methods: {
+        /**
+         * 选择文件后触发的事件
+         *
+         * @param ev
+         */
+        onUploadInputChange(ev: Event): void;
+        /**
+         * 返回 File 对象，在表单混合上传时候有用
+         * @returns
+         */
+        getFileObj(): File;
+        onDrop(ev: DragEvent): void;
+        onFileGet(files: FileList): void;
+        /**
+         * 执行上传
+         *
+         * @param this
+         */
+        doUpload(): void;
+        changeByte: typeof changeByte;
+    };
+};
+export default _default;
+/**
+ * 字节 Byte 转化成 KB，MB，GB
+ *
+ * @param limit
+ */
+declare function changeByte(limit: number): string;

package/dist/widget/FileUploader/FileUploader.js

@@ -0,0 +1,139 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const EmptyContent_1 = __importDefault(require("../EmptyContent"));
+exports.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/*';
+            }
+        },
+        buttonBottom: Boolean,
+        radomId: {
+            type: Number, default() {
+                return Math.round(Math.random() * 1000);
+            },
+        },
+    },
+    data() {
+        return {
+            model: { children: [] },
+            imgSrc: EmptyContent_1.default.empty,
+            open: false,
+            allowAddNode: false,
+            // isFolder : false
+            fileName: '',
+            fileSize: 0,
+            progress: 0,
+            errMsg: '',
+            newlyId: '',
+            fileObj: null
+        };
+    },
+    methods: {
+        /**
+         * 选择文件后触发的事件
+         *
+         * @param ev
+         */
+        onUploadInputChange(ev) {
+            let fileInput = ev.target;
+            if (!fileInput.files || !fileInput.files[0])
+                return;
+            // this.errStatus = [false, false, false];
+            this.onFileGet(fileInput.files);
+            let file = fileInput.files[0];
+            this.fileObj = file;
+            if (this.isImgUpload) {
+                let reader = new FileReader();
+                reader.onload = (e) => {
+                    let imgBase64 = e.target.result; // 得到了图片的 base64 编码
+                    // alert(imgBase64Str);
+                    this.imgSrc = imgBase64;
+                };
+                reader.readAsDataURL(file);
+            }
+        },
+        /**
+         * 返回 File 对象，在表单混合上传时候有用
+         * @returns
+         */
+        getFileObj() {
+            return this.fileObj;
+        },
+        onDrop(ev) {
+            var _a;
+            ev.preventDefault(); // 阻止进行拖拽时浏览器的默认行为，即自动打开图片
+            if ((_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.files)
+                this.onFileGet(ev.dataTransfer.files);
+        },
+        onFileGet(files) {
+            let file = files[0], fileType = file.type;
+            this.$fileObj = file;
+            this.fileName = file.name;
+            this.fileSize = file.size;
+        },
+        /**
+         * 执行上传
+         *
+         * @param this
+         */
+        doUpload() {
+            // this.$uploadOk_callback({ isOk: true, msg: "ok!", imgUrl: "fdfdf" });
+            // return;
+            let fd = new FormData();
+            if (this.$blob)
+                fd.append("file", this.$blob, this.fileName);
+            else if (this.$fileObj)
+                fd.append("file", this.$fileObj);
+            let xhr = new XMLHttpRequest();
+            //@ts-ignore
+            xhr.onreadystatechange = aj.xhr.requestHandler.delegate(null, this.$uploadOk_callback, "json");
+            xhr.open("POST", this.action, true);
+            xhr.onprogress = (ev) => {
+                let progress = 0, p = ~~((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) {
+    let size = "";
+    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;
+}
+//# sourceMappingURL=FileUploader.js.map

package/dist/widget/FileUploader/FileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.js","sourceRoot":"","sources":["../../../src/widget/FileUploader/FileUploader.ts"],"names":[],"mappings":"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"}

package/dist/widget/FileUploader/FileUploader.less

@@ -0,0 +1,68 @@
+.aj-file-uploader {
+    width: 360px;
+
+    &>* {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    label {
+        margin-right: 2%;
+
+        &>div {
+            border: 1px solid lightgray;
+            border-radius: 5px;
+            text-align: center;
+            color: gray;
+            cursor: pointer;
+            font-size: 0.8rem;
+            padding: 10px;
+            padding-bottom: 25px;
+            width: 100px;
+            height: 70px;
+            transition: border-color linear 300ms, color linear 300ms;
+
+            &:hover {
+                border-color: gray;
+                color: black;
+            }
+
+            &>div {
+                font-size: 2rem;
+            }
+        }
+    }
+
+    button {
+        min-width: 110px;
+    }
+
+    input[type="file"] {
+        display: none;
+    }
+
+    .msg {
+        font-size: 0.8rem;
+        color: gray;
+        max-width: 50%;
+        word-break: break-word;
+        text-overflow: ellipsis;
+
+        &>div {
+            font-size: 0.75rem;
+        }
+    }
+
+    .perviewImg {
+        max-width: 260px;
+    }
+
+    .fileName {
+        // display: inline-block;
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+        max-width: 120px;
+        max-height: 20px;
+        overflow: hidden;
+    }
+}

package/dist/widget/FileUploader/FileUploader.ts

@@ -0,0 +1,156 @@
+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/dist/widget/FileUploader/FileUploader.vue

@@ -0,0 +1,43 @@
+<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>