@ajaxjs/util 1.0.9 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +11 -20
  3. package/dist/index.d.ts +34 -6
  4. package/dist/index.js +45 -8
  5. package/dist/index.js.map +1 -1
  6. package/dist/main.d.ts +1 -0
  7. package/dist/main.js +16 -0
  8. package/dist/main.js.map +1 -0
  9. package/dist/router/index.d.ts +3 -0
  10. package/dist/router/index.js +44 -0
  11. package/dist/router/index.js.map +1 -0
  12. package/dist/router.d.ts +3 -0
  13. package/dist/router.js +44 -0
  14. package/dist/router.js.map +1 -0
  15. package/dist/shims-vue.d.ts +4 -0
  16. package/dist/style/common-functions.less +294 -0
  17. package/dist/style/reset.less +19 -0
  18. package/dist/util/cookies.d.ts +18 -0
  19. package/dist/util/cookies.js +46 -0
  20. package/dist/util/cookies.js.map +1 -0
  21. package/dist/util/dom.d.ts +17 -0
  22. package/dist/util/dom.js +44 -0
  23. package/dist/util/dom.js.map +1 -0
  24. package/dist/util/utils.d.ts +51 -0
  25. package/dist/util/utils.js +174 -0
  26. package/dist/util/utils.js.map +1 -0
  27. package/dist/{xhr-config.js.map → util/xhr-config.js.map} +1 -1
  28. package/dist/{xhr.d.ts → util/xhr.d.ts} +16 -1
  29. package/dist/{xhr.js → util/xhr.js} +84 -36
  30. package/dist/util/xhr.js.map +1 -0
  31. package/dist/widget/AccordionMenu.vue +140 -0
  32. package/dist/widget/AdjustFontSize.vue +65 -0
  33. package/dist/widget/Article.vue +59 -0
  34. package/dist/widget/EmptyContent.d.ts +5 -0
  35. package/dist/widget/EmptyContent.js +7 -0
  36. package/dist/widget/EmptyContent.js.map +1 -0
  37. package/dist/widget/Expander.vue +65 -0
  38. package/dist/widget/FileUploader/FileUploader.d.ts +70 -0
  39. package/dist/widget/FileUploader/FileUploader.js +139 -0
  40. package/dist/widget/FileUploader/FileUploader.js.map +1 -0
  41. package/dist/widget/FileUploader/FileUploader.less +68 -0
  42. package/dist/widget/FileUploader/FileUploader.ts +156 -0
  43. package/dist/widget/FileUploader/FileUploader.vue +43 -0
  44. package/dist/widget/HtmlEditor/HtmlEditor.d.ts +70 -0
  45. package/dist/widget/HtmlEditor/HtmlEditor.js +287 -0
  46. package/dist/widget/HtmlEditor/HtmlEditor.js.map +1 -0
  47. package/dist/widget/HtmlEditor/HtmlEditor.less +345 -0
  48. package/dist/widget/HtmlEditor/HtmlEditor.ts +339 -0
  49. package/dist/widget/HtmlEditor/HtmlEditor.vue +70 -0
  50. package/dist/widget/HtmlEditor/html-editor-HtmlSanitizer.js +103 -0
  51. package/dist/widget/ImageEnlarger.vue +105 -0
  52. package/dist/widget/OpacityBanner.vue +125 -0
  53. package/dist/widget/ProcessLine.vue +133 -0
  54. package/dist/widget/Resize.d.ts +51 -0
  55. package/dist/widget/Resize.js +133 -0
  56. package/dist/widget/Resize.js.map +1 -0
  57. package/dist/widget/Resize.ts +152 -0
  58. package/dist/widget/Resize.vue +104 -0
  59. package/dist/widget/TreeSelector.vue +4 -0
  60. package/dist/widget/calendar/BetweenDate.vue +63 -0
  61. package/dist/widget/calendar/Calendar.d.ts +55 -0
  62. package/dist/widget/calendar/Calendar.js +145 -0
  63. package/dist/widget/calendar/Calendar.js.map +1 -0
  64. package/dist/widget/calendar/Calendar.less +210 -0
  65. package/dist/widget/calendar/Calendar.ts +167 -0
  66. package/dist/widget/calendar/Calendar.vue +52 -0
  67. package/dist/widget/calendar/CalendarInput.vue +71 -0
  68. package/dist/widget/form/validator.d.ts +70 -0
  69. package/dist/widget/form/validator.js +220 -0
  70. package/dist/widget/form/validator.js.map +1 -0
  71. package/dist/widget/form/validator.ts +289 -0
  72. package/dist/widget/play-ground/sku.vue +93 -0
  73. package/package.json +31 -15
  74. package/dist/base.d.ts +0 -42
  75. package/dist/base.js +0 -133
  76. package/dist/base.js.map +0 -1
  77. package/dist/entity.d.ts +0 -26
  78. package/dist/entity.js +0 -2
  79. package/dist/entity.js.map +0 -1
  80. package/dist/xhr.js.map +0 -1
  81. package/src/base.ts +0 -145
  82. package/src/entity.ts +0 -31
  83. package/src/index.ts +0 -13
  84. package/src/xhr-config.ts +0 -25
  85. package/src/xhr.ts +0 -233
  86. package/tsconfig.json +0 -73
  87. /package/dist/{xhr-config.d.ts → util/xhr-config.d.ts} +0 -0
  88. /package/dist/{xhr-config.js → util/xhr-config.js} +0 -0
@@ -0,0 +1,70 @@
1
+ declare const _default: {
2
+ props: {
3
+ action: {
4
+ type: StringConstructor;
5
+ required: boolean;
6
+ };
7
+ limitSize: {
8
+ type: NumberConstructor;
9
+ default: number;
10
+ };
11
+ limitFileType: StringConstructor;
12
+ isImgUpload: BooleanConstructor;
13
+ isShowBtn: {
14
+ type: BooleanConstructor;
15
+ default: boolean;
16
+ };
17
+ accpectFileType: {
18
+ type: StringConstructor;
19
+ default(): string;
20
+ };
21
+ buttonBottom: BooleanConstructor;
22
+ radomId: {
23
+ type: NumberConstructor;
24
+ default(): number;
25
+ };
26
+ };
27
+ data(): {
28
+ model: {
29
+ children: any[];
30
+ };
31
+ imgSrc: string;
32
+ open: boolean;
33
+ allowAddNode: boolean;
34
+ fileName: string;
35
+ fileSize: number;
36
+ progress: number;
37
+ errMsg: string;
38
+ newlyId: string;
39
+ fileObj: any;
40
+ };
41
+ methods: {
42
+ /**
43
+ * 选择文件后触发的事件
44
+ *
45
+ * @param ev
46
+ */
47
+ onUploadInputChange(ev: Event): void;
48
+ /**
49
+ * 返回 File 对象,在表单混合上传时候有用
50
+ * @returns
51
+ */
52
+ getFileObj(): File;
53
+ onDrop(ev: DragEvent): void;
54
+ onFileGet(files: FileList): void;
55
+ /**
56
+ * 执行上传
57
+ *
58
+ * @param this
59
+ */
60
+ doUpload(): void;
61
+ changeByte: typeof changeByte;
62
+ };
63
+ };
64
+ export default _default;
65
+ /**
66
+ * 字节 Byte 转化成 KB,MB,GB
67
+ *
68
+ * @param limit
69
+ */
70
+ declare function changeByte(limit: number): string;
@@ -0,0 +1,139 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const EmptyContent_1 = __importDefault(require("../EmptyContent"));
7
+ exports.default = {
8
+ props: {
9
+ action: { type: String, required: false },
10
+ limitSize: { type: Number, default: 20000 },
11
+ limitFileType: String,
12
+ isImgUpload: Boolean,
13
+ isShowBtn: { type: Boolean, default: true },
14
+ accpectFileType: {
15
+ type: String, default() {
16
+ if (this.isImgUpload)
17
+ return 'image/*';
18
+ }
19
+ },
20
+ buttonBottom: Boolean,
21
+ radomId: {
22
+ type: Number, default() {
23
+ return Math.round(Math.random() * 1000);
24
+ },
25
+ },
26
+ },
27
+ data() {
28
+ return {
29
+ model: { children: [] },
30
+ imgSrc: EmptyContent_1.default.empty,
31
+ open: false,
32
+ allowAddNode: false,
33
+ // isFolder : false
34
+ fileName: '',
35
+ fileSize: 0,
36
+ progress: 0,
37
+ errMsg: '',
38
+ newlyId: '',
39
+ fileObj: null
40
+ };
41
+ },
42
+ methods: {
43
+ /**
44
+ * 选择文件后触发的事件
45
+ *
46
+ * @param ev
47
+ */
48
+ onUploadInputChange(ev) {
49
+ let fileInput = ev.target;
50
+ if (!fileInput.files || !fileInput.files[0])
51
+ return;
52
+ // this.errStatus = [false, false, false];
53
+ this.onFileGet(fileInput.files);
54
+ let file = fileInput.files[0];
55
+ this.fileObj = file;
56
+ if (this.isImgUpload) {
57
+ let reader = new FileReader();
58
+ reader.onload = (e) => {
59
+ let imgBase64 = e.target.result; // 得到了图片的 base64 编码
60
+ // alert(imgBase64Str);
61
+ this.imgSrc = imgBase64;
62
+ };
63
+ reader.readAsDataURL(file);
64
+ }
65
+ },
66
+ /**
67
+ * 返回 File 对象,在表单混合上传时候有用
68
+ * @returns
69
+ */
70
+ getFileObj() {
71
+ return this.fileObj;
72
+ },
73
+ onDrop(ev) {
74
+ var _a;
75
+ ev.preventDefault(); // 阻止进行拖拽时浏览器的默认行为,即自动打开图片
76
+ if ((_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.files)
77
+ this.onFileGet(ev.dataTransfer.files);
78
+ },
79
+ onFileGet(files) {
80
+ let file = files[0], fileType = file.type;
81
+ this.$fileObj = file;
82
+ this.fileName = file.name;
83
+ this.fileSize = file.size;
84
+ },
85
+ /**
86
+ * 执行上传
87
+ *
88
+ * @param this
89
+ */
90
+ doUpload() {
91
+ // this.$uploadOk_callback({ isOk: true, msg: "ok!", imgUrl: "fdfdf" });
92
+ // return;
93
+ let fd = new FormData();
94
+ if (this.$blob)
95
+ fd.append("file", this.$blob, this.fileName);
96
+ else if (this.$fileObj)
97
+ fd.append("file", this.$fileObj);
98
+ let xhr = new XMLHttpRequest();
99
+ //@ts-ignore
100
+ xhr.onreadystatechange = aj.xhr.requestHandler.delegate(null, this.$uploadOk_callback, "json");
101
+ xhr.open("POST", this.action, true);
102
+ xhr.onprogress = (ev) => {
103
+ let progress = 0, p = ~~((ev.loaded * 1000) / ev.total);
104
+ p = p / 10;
105
+ if (progress !== p)
106
+ progress = p;
107
+ this.progress = progress;
108
+ };
109
+ xhr.send(fd);
110
+ },
111
+ changeByte: changeByte
112
+ }
113
+ };
114
+ /**
115
+ * 字节 Byte 转化成 KB,MB,GB
116
+ *
117
+ * @param limit
118
+ */
119
+ function changeByte(limit) {
120
+ let size = "";
121
+ if (limit < 0.1 * 1024)
122
+ // 小于 0.1KB,则转化成 B
123
+ size = limit.toFixed(2) + "B";
124
+ else if (limit < 0.1 * 1024 * 1024)
125
+ // 小于 0.1MB,则转化成 KB
126
+ size = (limit / 1024).toFixed(2) + "KB";
127
+ else if (limit < 0.1 * 1024 * 1024 * 1024)
128
+ // 小于 0.1GB,则转化成 MB
129
+ size = (limit / (1024 * 1024)).toFixed(2) + "MB";
130
+ // 其他转化成 GB
131
+ else
132
+ size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
133
+ let index = size.indexOf("."); // 获取小数点处的索引
134
+ if (size.substr(index + 1, 2) == "00")
135
+ // 获取小数点后两位的值,判断后两位是否为 00,如果是则删除 00
136
+ return size.substring(0, index) + size.substr(index + 3, 2);
137
+ return size;
138
+ }
139
+ //# sourceMappingURL=FileUploader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FileUploader.js","sourceRoot":"","sources":["../../../src/widget/FileUploader/FileUploader.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,68 @@
1
+ .aj-file-uploader {
2
+ width: 360px;
3
+
4
+ &>* {
5
+ display: inline-block;
6
+ vertical-align: middle;
7
+ }
8
+
9
+ label {
10
+ margin-right: 2%;
11
+
12
+ &>div {
13
+ border: 1px solid lightgray;
14
+ border-radius: 5px;
15
+ text-align: center;
16
+ color: gray;
17
+ cursor: pointer;
18
+ font-size: 0.8rem;
19
+ padding: 10px;
20
+ padding-bottom: 25px;
21
+ width: 100px;
22
+ height: 70px;
23
+ transition: border-color linear 300ms, color linear 300ms;
24
+
25
+ &:hover {
26
+ border-color: gray;
27
+ color: black;
28
+ }
29
+
30
+ &>div {
31
+ font-size: 2rem;
32
+ }
33
+ }
34
+ }
35
+
36
+ button {
37
+ min-width: 110px;
38
+ }
39
+
40
+ input[type="file"] {
41
+ display: none;
42
+ }
43
+
44
+ .msg {
45
+ font-size: 0.8rem;
46
+ color: gray;
47
+ max-width: 50%;
48
+ word-break: break-word;
49
+ text-overflow: ellipsis;
50
+
51
+ &>div {
52
+ font-size: 0.75rem;
53
+ }
54
+ }
55
+
56
+ .perviewImg {
57
+ max-width: 260px;
58
+ }
59
+
60
+ .fileName {
61
+ // display: inline-block;
62
+ text-overflow: ellipsis; //溢出用省略号显示
63
+ white-space: nowrap; //溢出不换行
64
+ max-width: 120px;
65
+ max-height: 20px;
66
+ overflow: hidden;
67
+ }
68
+ }
@@ -0,0 +1,156 @@
1
+ import Empty from '../EmptyContent';
2
+
3
+ export default {
4
+ props: {
5
+ action: { type: String, required: false }, // 上传路径
6
+ limitSize: { type: Number, default: 20000 }, // 文件大小限制
7
+ limitFileType: String,
8
+ isImgUpload: Boolean,
9
+ isShowBtn: { type: Boolean, default: true },
10
+ accpectFileType: {
11
+ type: String, default() {
12
+ if (this.isImgUpload)
13
+ return 'image/*';
14
+ }
15
+ }, // 可以上传类型 如 image/*
16
+ buttonBottom: Boolean, // 上传按钮是否位于下方
17
+ radomId: {
18
+ type: Number, default() { // 不重复的 id,用关于关联 label 与 input[type=file]
19
+ return Math.round(Math.random() * 1000);
20
+ },
21
+ },
22
+ },
23
+
24
+ data() {
25
+ return {
26
+ model: { children: [] },
27
+ imgSrc: Empty.empty,
28
+ open: false,
29
+ allowAddNode: false,
30
+ // isFolder : false
31
+ fileName: '', // 获取文件名称,只能是名称,不能获取完整的文件目录
32
+ fileSize: 0, // 文件大小
33
+ progress: 0, // 上传进度百分比
34
+ errMsg: '', // 错误信息。约定:只有为空字符串,才表示允许上传。
35
+ newlyId: '', // 成功上传之后的文件 id
36
+ fileObj: null
37
+ }
38
+ },
39
+
40
+ methods: {
41
+ /**
42
+ * 选择文件后触发的事件
43
+ *
44
+ * @param ev
45
+ */
46
+ onUploadInputChange(ev: Event): void {
47
+ let fileInput: HTMLInputElement = <HTMLInputElement>ev.target;
48
+ if (!fileInput.files || !fileInput.files[0]) return;
49
+
50
+ // this.errStatus = [false, false, false];
51
+ this.onFileGet(fileInput.files);
52
+
53
+ let file: File = fileInput.files[0];
54
+ this.fileObj = file;
55
+
56
+ if (this.isImgUpload) {
57
+ let reader: FileReader = new FileReader();
58
+ reader.onload = (e) => {
59
+ let imgBase64: string = <string>e.target.result; // 得到了图片的 base64 编码
60
+ // alert(imgBase64Str);
61
+ this.imgSrc = imgBase64;
62
+ }
63
+
64
+ reader.readAsDataURL(file);
65
+ }
66
+ },
67
+
68
+ /**
69
+ * 返回 File 对象,在表单混合上传时候有用
70
+ * @returns
71
+ */
72
+ getFileObj(): File {
73
+ return this.fileObj;
74
+ },
75
+
76
+ onDrop(ev: DragEvent): void {
77
+ ev.preventDefault(); // 阻止进行拖拽时浏览器的默认行为,即自动打开图片
78
+
79
+ if (ev.dataTransfer?.files) this.onFileGet(ev.dataTransfer.files);
80
+ },
81
+
82
+ onFileGet(files: FileList): void {
83
+ let file: File = files[0],
84
+ fileType: string = file.type;
85
+
86
+ this.$fileObj = file;
87
+ this.fileName = file.name;
88
+ this.fileSize = file.size;
89
+ },
90
+ /**
91
+ * 执行上传
92
+ *
93
+ * @param this
94
+ */
95
+ doUpload(): void {
96
+ // this.$uploadOk_callback({ isOk: true, msg: "ok!", imgUrl: "fdfdf" });
97
+ // return;
98
+
99
+ let fd: FormData = new FormData();
100
+
101
+ if (this.$blob) fd.append("file", this.$blob, this.fileName);
102
+ else if (this.$fileObj) fd.append("file", this.$fileObj);
103
+
104
+ let xhr: XMLHttpRequest = new XMLHttpRequest();
105
+ //@ts-ignore
106
+ xhr.onreadystatechange = aj.xhr.requestHandler.delegate(
107
+ null,
108
+ this.$uploadOk_callback,
109
+ "json"
110
+ );
111
+ xhr.open("POST", this.action, true);
112
+ xhr.onprogress = (ev: ProgressEvent) => {
113
+ let progress: number = 0,
114
+ p: number = ~~((ev.loaded * 1000) / ev.total);
115
+ p = p / 10;
116
+
117
+ if (progress !== p) progress = p;
118
+
119
+ this.progress = progress;
120
+ };
121
+
122
+ xhr.send(fd);
123
+ },
124
+
125
+ changeByte: changeByte
126
+ }
127
+ }
128
+
129
+ /**
130
+ * 字节 Byte 转化成 KB,MB,GB
131
+ *
132
+ * @param limit
133
+ */
134
+ function changeByte(limit: number): string {
135
+ let size: string = "";
136
+
137
+ if (limit < 0.1 * 1024)
138
+ // 小于 0.1KB,则转化成 B
139
+ size = limit.toFixed(2) + "B";
140
+ else if (limit < 0.1 * 1024 * 1024)
141
+ // 小于 0.1MB,则转化成 KB
142
+ size = (limit / 1024).toFixed(2) + "KB";
143
+ else if (limit < 0.1 * 1024 * 1024 * 1024)
144
+ // 小于 0.1GB,则转化成 MB
145
+ size = (limit / (1024 * 1024)).toFixed(2) + "MB";
146
+ // 其他转化成 GB
147
+ else size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
148
+
149
+ let index = size.indexOf("."); // 获取小数点处的索引
150
+
151
+ if (size.substr(index + 1, 2) == "00")
152
+ // 获取小数点后两位的值,判断后两位是否为 00,如果是则删除 00
153
+ return size.substring(0, index) + size.substr(index + 3, 2);
154
+
155
+ return size;
156
+ }
@@ -0,0 +1,43 @@
1
+ <template>
2
+ <div class="aj-file-uploader">
3
+ <div v-if="isImgUpload">
4
+ <img class="perviewImg" :src='imgSrc' />
5
+ <br />
6
+ </div>
7
+
8
+ <table>
9
+ <tr>
10
+ <td>
11
+ <input type="file" :id="'uploadInput_' + radomId" @change="onUploadInputChange" :accept="accpectFileType" />
12
+
13
+ <label class="pseudoFilePicker" :for="'uploadInput_' + radomId">
14
+ <div @drop="onDrop" ondragover="event.preventDefault();">
15
+ <div>+</div>点击选择文件<br />或拖放到此
16
+ </div>
17
+ </label>
18
+
19
+ </td>
20
+ <td>
21
+ <div class="msg" v-if="errMsg != ''">
22
+ 允许类型:{{limitFileType || '无限制'}}
23
+ <br />
24
+ 允许大小:{{limitSize ? changeByte(limitSize * 1024) : '无限制'}}
25
+ <span class="slot"></span>
26
+ </div>
27
+
28
+ <div class="msg" v-if="errMsg == ''">
29
+ <div class="fileName" :title="'本地文件名: ' + fileName">{{fileName}}</div>
30
+ <div v-if="fileSize">{{changeByte(fileSize)}}</div>
31
+ <button @click.prevent="doUpload" v-if="isShowBtn">{{progress && progress !== 100 ? '上传中 ' + progress + '%': '上传'}}</button>
32
+ </div>
33
+ </td>
34
+ </tr>
35
+
36
+ </table>
37
+
38
+ </div>
39
+ </template>
40
+
41
+ <script lang="ts" src="./FileUploader.ts"></script>
42
+
43
+ <style lang="less" src="./FileUploader.less"></style>
@@ -0,0 +1,70 @@
1
+ declare const _default: {
2
+ props: {
3
+ vModel: StringConstructor;
4
+ uploadImageActionUrl: StringConstructor;
5
+ isIonicons: BooleanConstructor;
6
+ };
7
+ data(): any;
8
+ mounted(): void;
9
+ methods: {
10
+ /**
11
+ * 输入 HTML 内容
12
+ *
13
+ * @param html
14
+ */
15
+ setIframeBody(html: string): void;
16
+ /**
17
+ * 获取内容的 HTML
18
+ *
19
+ * @param cleanWord 是否清理冗余标签
20
+ * @param encode 是否 URL 编码
21
+ */
22
+ getValue(cleanWord: boolean, encode: boolean): string;
23
+ createLink(): void;
24
+ insertImage(): void;
25
+ /**
26
+ * 清理冗余 HTML
27
+ */
28
+ cleanHTML(): void;
29
+ saveRemoteImage2Local(): void;
30
+ /**
31
+ * 当工具条点击的时候触发
32
+ *
33
+ * @param ev
34
+ */
35
+ onCmdClk(ev: Event): void;
36
+ /**
37
+ * 通过 document.execCommand() 来操纵可编辑内容区域的元素
38
+ *
39
+ * @param type 命令的名称
40
+ * @param para 一些命令(例如 insertImage)需要额外的参数(insertImage 需要提供插入 image 的 url),默认为 null
41
+ */
42
+ format(type: string, para?: string): void;
43
+ /**
44
+ * 选择字号大小
45
+ *
46
+ * @param ev
47
+ */
48
+ onFontsizeChoserClk(ev: Event): void;
49
+ /**
50
+ * 选择字体
51
+ *
52
+ * @param ev
53
+ */
54
+ onFontfamilyChoserClk(ev: Event): void;
55
+ /**
56
+ * 创建颜色选择器
57
+ */
58
+ createColorPickerHTML(): string;
59
+ };
60
+ watch: {
61
+ vModel(newHtml: string, oldHtml: string): void;
62
+ /**
63
+ * 切換 HTML 編輯 or 可視化編輯
64
+ *
65
+ * @param n
66
+ */
67
+ isShowCode(n: boolean): void;
68
+ };
69
+ };
70
+ export default _default;