@dhtmlx/vault 5.0.6

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 (175) hide show
  1. package/README.md +251 -0
  2. package/codebase/fonts/roboto-bold-webfont.woff +0 -0
  3. package/codebase/fonts/roboto-bold-webfont.woff2 +0 -0
  4. package/codebase/fonts/roboto-medium-webfont.woff +0 -0
  5. package/codebase/fonts/roboto-medium-webfont.woff2 +0 -0
  6. package/codebase/fonts/roboto-regular-webfont.woff +0 -0
  7. package/codebase/fonts/roboto-regular-webfont.woff2 +0 -0
  8. package/codebase/types/ts-calendar/index.d.ts +2 -0
  9. package/codebase/types/ts-calendar/sources/Calendar.d.ts +37 -0
  10. package/codebase/types/ts-calendar/sources/helper.d.ts +1 -0
  11. package/codebase/types/ts-calendar/sources/types.d.ts +64 -0
  12. package/codebase/types/ts-combobox/index.d.ts +3 -0
  13. package/codebase/types/ts-combobox/sources/Combobox.d.ts +53 -0
  14. package/codebase/types/ts-combobox/sources/ProCombobox.d.ts +6 -0
  15. package/codebase/types/ts-combobox/sources/helper.d.ts +4 -0
  16. package/codebase/types/ts-combobox/sources/keyListener.d.ts +14 -0
  17. package/codebase/types/ts-combobox/sources/locales/en.d.ts +8 -0
  18. package/codebase/types/ts-combobox/sources/types.d.ts +95 -0
  19. package/codebase/types/ts-common/FocusManager.d.ts +15 -0
  20. package/codebase/types/ts-common/KeyManager.d.ts +19 -0
  21. package/codebase/types/ts-common/ScrollView.d.ts +40 -0
  22. package/codebase/types/ts-common/core.d.ts +40 -0
  23. package/codebase/types/ts-common/date.d.ts +34 -0
  24. package/codebase/types/ts-common/dom.d.ts +24 -0
  25. package/codebase/types/ts-common/events.d.ts +35 -0
  26. package/codebase/types/ts-common/html.d.ts +74 -0
  27. package/codebase/types/ts-common/input.d.ts +24 -0
  28. package/codebase/types/ts-common/keycodes.d.ts +9 -0
  29. package/codebase/types/ts-common/locale.d.ts +1 -0
  30. package/codebase/types/ts-common/polyfills/array.d.ts +0 -0
  31. package/codebase/types/ts-common/polyfills/element.d.ts +0 -0
  32. package/codebase/types/ts-common/polyfills/fetch.d.ts +0 -0
  33. package/codebase/types/ts-common/polyfills/math.d.ts +0 -0
  34. package/codebase/types/ts-common/polyfills/object.d.ts +0 -0
  35. package/codebase/types/ts-common/polyfills/string.d.ts +0 -0
  36. package/codebase/types/ts-common/types.d.ts +76 -0
  37. package/codebase/types/ts-common/view.d.ts +27 -0
  38. package/codebase/types/ts-data/index.d.ts +13 -0
  39. package/codebase/types/ts-data/sources/CollectionStore.d.ts +7 -0
  40. package/codebase/types/ts-data/sources/DragManager.d.ts +19 -0
  41. package/codebase/types/ts-data/sources/ajax.d.ts +2 -0
  42. package/codebase/types/ts-data/sources/datacollection/group.d.ts +43 -0
  43. package/codebase/types/ts-data/sources/datacollection/loader.d.ts +16 -0
  44. package/codebase/types/ts-data/sources/datacollection/sort.d.ts +7 -0
  45. package/codebase/types/ts-data/sources/datacollection.d.ts +101 -0
  46. package/codebase/types/ts-data/sources/dataproxy.d.ts +10 -0
  47. package/codebase/types/ts-data/sources/drivers/CsvDriver.d.ts +16 -0
  48. package/codebase/types/ts-data/sources/drivers/JsonDriver.d.ts +10 -0
  49. package/codebase/types/ts-data/sources/drivers/XMLDriver.d.ts +18 -0
  50. package/codebase/types/ts-data/sources/drivers/drivers.d.ts +12 -0
  51. package/codebase/types/ts-data/sources/helpers.d.ts +17 -0
  52. package/codebase/types/ts-data/sources/lazydataproxy.d.ts +9 -0
  53. package/codebase/types/ts-data/sources/methods.d.ts +11 -0
  54. package/codebase/types/ts-data/sources/selection.d.ts +17 -0
  55. package/codebase/types/ts-data/sources/serializers/xml.d.ts +2 -0
  56. package/codebase/types/ts-data/sources/treecollection.d.ts +72 -0
  57. package/codebase/types/ts-data/sources/types.d.ts +340 -0
  58. package/codebase/types/ts-dataview/index.d.ts +3 -0
  59. package/codebase/types/ts-dataview/sources/DataView.d.ts +41 -0
  60. package/codebase/types/ts-dataview/sources/ProDataView.d.ts +11 -0
  61. package/codebase/types/ts-dataview/sources/editors/InputEditor.d.ts +16 -0
  62. package/codebase/types/ts-dataview/sources/editors/editors.d.ts +4 -0
  63. package/codebase/types/ts-dataview/sources/types.d.ts +63 -0
  64. package/codebase/types/ts-grid/index.d.ts +7 -0
  65. package/codebase/types/ts-grid/sources/ExtendedGrid.d.ts +47 -0
  66. package/codebase/types/ts-grid/sources/Grid.d.ts +114 -0
  67. package/codebase/types/ts-grid/sources/ProGrid.d.ts +67 -0
  68. package/codebase/types/ts-grid/sources/helpers/cells.d.ts +9 -0
  69. package/codebase/types/ts-grid/sources/helpers/data.d.ts +36 -0
  70. package/codebase/types/ts-grid/sources/helpers/default.d.ts +6 -0
  71. package/codebase/types/ts-grid/sources/helpers/dom.d.ts +3 -0
  72. package/codebase/types/ts-grid/sources/helpers/keys.d.ts +27 -0
  73. package/codebase/types/ts-grid/sources/helpers/main.d.ts +23 -0
  74. package/codebase/types/ts-grid/sources/locales/en.d.ts +7 -0
  75. package/codebase/types/ts-grid/sources/modules/BlockSelection.d.ts +122 -0
  76. package/codebase/types/ts-grid/sources/modules/Clipboard.d.ts +55 -0
  77. package/codebase/types/ts-grid/sources/modules/DropManager.d.ts +21 -0
  78. package/codebase/types/ts-grid/sources/modules/Exporter.d.ts +80 -0
  79. package/codebase/types/ts-grid/sources/modules/History.d.ts +72 -0
  80. package/codebase/types/ts-grid/sources/modules/Range.d.ts +71 -0
  81. package/codebase/types/ts-grid/sources/modules/Resizer.d.ts +2 -0
  82. package/codebase/types/ts-grid/sources/modules/Selection.d.ts +58 -0
  83. package/codebase/types/ts-grid/sources/types.d.ts +660 -0
  84. package/codebase/types/ts-grid/sources/ui/FixedCols.d.ts +3 -0
  85. package/codebase/types/ts-grid/sources/ui/FixedRows.d.ts +5 -0
  86. package/codebase/types/ts-grid/sources/ui/cells.d.ts +34 -0
  87. package/codebase/types/ts-grid/sources/ui/common.d.ts +8 -0
  88. package/codebase/types/ts-grid/sources/ui/components/dragPanel.d.ts +7 -0
  89. package/codebase/types/ts-grid/sources/ui/components/groupPanel.d.ts +13 -0
  90. package/codebase/types/ts-grid/sources/ui/components/subRow.d.ts +4 -0
  91. package/codebase/types/ts-grid/sources/ui/content/ComboFilter.d.ts +35 -0
  92. package/codebase/types/ts-grid/sources/ui/content/DateFilter.d.ts +42 -0
  93. package/codebase/types/ts-grid/sources/ui/content/InputFilter.d.ts +32 -0
  94. package/codebase/types/ts-grid/sources/ui/content/SelectFilter.d.ts +28 -0
  95. package/codebase/types/ts-grid/sources/ui/content.d.ts +55 -0
  96. package/codebase/types/ts-grid/sources/ui/editors/CheckboxEditor.d.ts +18 -0
  97. package/codebase/types/ts-grid/sources/ui/editors/ComboboxEditor.d.ts +18 -0
  98. package/codebase/types/ts-grid/sources/ui/editors/DateEditor.d.ts +37 -0
  99. package/codebase/types/ts-grid/sources/ui/editors/InputEditor.d.ts +22 -0
  100. package/codebase/types/ts-grid/sources/ui/editors/SelectEditor.d.ts +16 -0
  101. package/codebase/types/ts-grid/sources/ui/editors/TextAreaEditor.d.ts +27 -0
  102. package/codebase/types/ts-grid/sources/ui/editors/editors.d.ts +2 -0
  103. package/codebase/types/ts-grid/sources/ui/proContent.d.ts +37 -0
  104. package/codebase/types/ts-grid/sources/ui/render.d.ts +9 -0
  105. package/codebase/types/ts-layout/index.d.ts +3 -0
  106. package/codebase/types/ts-layout/sources/Cell.d.ts +60 -0
  107. package/codebase/types/ts-layout/sources/Layout.d.ts +29 -0
  108. package/codebase/types/ts-layout/sources/ProCell.d.ts +9 -0
  109. package/codebase/types/ts-layout/sources/ProLayout.d.ts +6 -0
  110. package/codebase/types/ts-layout/sources/helpers.d.ts +6 -0
  111. package/codebase/types/ts-layout/sources/types.d.ts +129 -0
  112. package/codebase/types/ts-list/index.d.ts +4 -0
  113. package/codebase/types/ts-list/sources/List.d.ts +56 -0
  114. package/codebase/types/ts-list/sources/ProList.d.ts +11 -0
  115. package/codebase/types/ts-list/sources/Selection.d.ts +24 -0
  116. package/codebase/types/ts-list/sources/editors/InputEditor.d.ts +16 -0
  117. package/codebase/types/ts-list/sources/editors/editors.d.ts +4 -0
  118. package/codebase/types/ts-list/sources/types.d.ts +98 -0
  119. package/codebase/types/ts-message/index.d.ts +5 -0
  120. package/codebase/types/ts-message/sources/alert.d.ts +2 -0
  121. package/codebase/types/ts-message/sources/common.d.ts +1 -0
  122. package/codebase/types/ts-message/sources/confirm.d.ts +2 -0
  123. package/codebase/types/ts-message/sources/locales/en.d.ts +5 -0
  124. package/codebase/types/ts-message/sources/message.d.ts +4 -0
  125. package/codebase/types/ts-message/sources/tooltip.d.ts +6 -0
  126. package/codebase/types/ts-message/sources/types.d.ts +79 -0
  127. package/codebase/types/ts-navbar/index.d.ts +3 -0
  128. package/codebase/types/ts-navbar/sources/Navbar.d.ts +61 -0
  129. package/codebase/types/ts-navbar/sources/elements/button.d.ts +1 -0
  130. package/codebase/types/ts-navbar/sources/elements/customHTMLButton.d.ts +1 -0
  131. package/codebase/types/ts-navbar/sources/elements/datePicker.d.ts +1 -0
  132. package/codebase/types/ts-navbar/sources/elements/helpers.d.ts +17 -0
  133. package/codebase/types/ts-navbar/sources/elements/imageButton.d.ts +1 -0
  134. package/codebase/types/ts-navbar/sources/elements/input.d.ts +1 -0
  135. package/codebase/types/ts-navbar/sources/elements/menuItem.d.ts +1 -0
  136. package/codebase/types/ts-navbar/sources/elements/navItem.d.ts +1 -0
  137. package/codebase/types/ts-navbar/sources/elements/separator.d.ts +1 -0
  138. package/codebase/types/ts-navbar/sources/elements/spacer.d.ts +1 -0
  139. package/codebase/types/ts-navbar/sources/elements/title.d.ts +1 -0
  140. package/codebase/types/ts-navbar/sources/itemfactory.d.ts +10 -0
  141. package/codebase/types/ts-navbar/sources/types.d.ts +210 -0
  142. package/codebase/types/ts-popup/index.d.ts +2 -0
  143. package/codebase/types/ts-popup/sources/Popup.d.ts +29 -0
  144. package/codebase/types/ts-popup/sources/types.d.ts +42 -0
  145. package/codebase/types/ts-slider/index.d.ts +2 -0
  146. package/codebase/types/ts-slider/sources/Slider.d.ts +55 -0
  147. package/codebase/types/ts-slider/sources/types.d.ts +60 -0
  148. package/codebase/types/ts-timepicker/index.d.ts +2 -0
  149. package/codebase/types/ts-timepicker/sources/Timepicker.d.ts +28 -0
  150. package/codebase/types/ts-timepicker/sources/helper.d.ts +4 -0
  151. package/codebase/types/ts-timepicker/sources/locales/en.d.ts +6 -0
  152. package/codebase/types/ts-timepicker/sources/types.d.ts +52 -0
  153. package/codebase/types/ts-toolbar/index.d.ts +2 -0
  154. package/codebase/types/ts-toolbar/sources/ProToolbar.d.ts +10 -0
  155. package/codebase/types/ts-toolbar/sources/Toolbar.d.ts +33 -0
  156. package/codebase/types/ts-treegrid/index.d.ts +3 -0
  157. package/codebase/types/ts-treegrid/sources/TreeGrid.d.ts +26 -0
  158. package/codebase/types/ts-treegrid/sources/TreeGridCollection.d.ts +21 -0
  159. package/codebase/types/ts-treegrid/sources/types.d.ts +17 -0
  160. package/codebase/types/ts-vault/sources/ProgressBar.d.ts +12 -0
  161. package/codebase/types/ts-vault/sources/ReadStackPreview.d.ts +11 -0
  162. package/codebase/types/ts-vault/sources/Uploader.d.ts +26 -0
  163. package/codebase/types/ts-vault/sources/Vault.d.ts +39 -0
  164. package/codebase/types/ts-vault/sources/configs.d.ts +2 -0
  165. package/codebase/types/ts-vault/sources/entry.d.ts +8 -0
  166. package/codebase/types/ts-vault/sources/helper.d.ts +31 -0
  167. package/codebase/types/ts-vault/sources/locales/en.d.ts +21 -0
  168. package/codebase/types/ts-vault/sources/types.d.ts +127 -0
  169. package/codebase/vault.d.ts +3 -0
  170. package/codebase/vault.min.css +1 -0
  171. package/codebase/vault.min.js +21 -0
  172. package/codebase/vault.min.js.map +1 -0
  173. package/license.md +360 -0
  174. package/package.json +14 -0
  175. package/whatsnew.txt +99 -0
package/README.md ADDED
@@ -0,0 +1,251 @@
1
+ # DHTMLX Vault — JavaScript File Uploader (GPL Edition)
2
+
3
+ [![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)
4
+ [![npm: v.5.0.6](https://img.shields.io/badge/npm-v.5.0.6-blue.svg)](https://www.npmjs.com/package/@dhtmlx/vault)
5
+ [![License: GPL v2](https://img.shields.io/badge/license-GPL%20v2-blue.svg)](https://www.gnu.org/licenses/old-licenses/gpl-2.0.html)
6
+
7
+ ![](https://raw.githubusercontent.com/DHTMLX/public-files/main/logo/dhtmlx_logo.svg)
8
+
9
+ `@dhtmlx/vault` is a JavaScript file upload and management component with drag-and-drop queuing, real-time progress tracking, list and grid display modes, inline file renaming, file download support, upload restrictions, custom HTML templates, and a configurable toolbar.
10
+
11
+ It is a standalone widget that works with plain JavaScript and integrates with React, Angular, Vue, and Svelte.
12
+
13
+ It is ideal for prototyping file upload interfaces, embedding file management in open-source applications, and evaluating DHTMLX Vault's core features under the GPL v2 license.
14
+
15
+ ![DHTMLX Vault screenshot](https://raw.githubusercontent.com/DHTMLX/public-files/main/image/dhtmlx_vault.png)
16
+
17
+ ---
18
+
19
+ ## License
20
+
21
+ **This edition of DHTMLX Vault** is licensed under the GNU General Public License v2.0 (GPL v2).
22
+
23
+ You can redistribute this package and/or modify it under the terms of the GPL v2.
24
+
25
+ GPL v2 requires that any project using this package also be open source under a GPL-compatible license.
26
+
27
+ **You may NOT use this package in closed-source, proprietary, or commercial applications** without a separate commercial license. For commercial use, please obtain a commercial license of DHTMLX Vault.
28
+
29
+ This package is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GPL v2 for more details.
30
+
31
+ ### Using DHTMLX Vault in a commercial or closed-source project?
32
+
33
+ You need a commercial license. DHTMLX offers Individual, Commercial, Enterprise, and Ultimate license tiers.
34
+
35
+ - [Compare licenses and pricing](https://dhtmlx.com/docs/products/licenses.shtml)
36
+ - [Download a free 30-day trial of DHTMLX Vault](https://dhtmlx.com/docs/products/dhtmlxVault/download.shtml)
37
+ - [Download 30-day trial versions of all DHTMLX components](https://dhtmlx.com/docs/download/)
38
+ - Contact us regarding licensing: [info@dhtmlx.com](mailto:info@dhtmlx.com)
39
+
40
+ Copyright © 2026 XB Software Ltd.
41
+
42
+ ---
43
+
44
+ ## What is DHTMLX Vault
45
+
46
+ **DHTMLX Vault** is a JavaScript file upload and management component for web applications. It renders a configurable layout consisting of a toolbar, a real-time progress bar, and a file area where users can add files by clicking or by dragging them from the file system. Files are displayed in list mode (default) or grid mode with image previews. Uploaded files can be renamed inline, reordered in the queue by drag-and-drop, cleared individually or in bulk, and downloaded from the server. Developers control upload behavior via the `uploader` configuration object, including the server target URL, automatic or manual upload triggering, and file restrictions by type, size, and count. Custom HTML templates can be applied to the list view, grid view, and progress bar for full visual control.
47
+
48
+ **DHTMLX Vault is a standalone component.** It is not part of the DHTMLX Suite library, is distributed and licensed separately, and does not require Suite as a dependency. It can be combined with Suite widgets such as DHTMLX Form or Layout to embed the uploader inside larger application interfaces.
49
+
50
+ Use this GPL edition when you want to prototype a file upload feature, integrate file management into an open-source project, or evaluate DHTMLX Vault's core features before obtaining a commercial license.
51
+
52
+ ---
53
+
54
+ ## Quick Start
55
+
56
+ Install the package, import the styles, and initialize Vault in a container element.
57
+
58
+ ### Install
59
+
60
+ ```bash
61
+ npm install @dhtmlx/vault
62
+ ```
63
+
64
+ ### Include in your project
65
+
66
+ ```js
67
+ import { Vault } from "@dhtmlx/vault";
68
+ import "@dhtmlx/vault/vault.css";
69
+ ```
70
+
71
+ Or with script tags pointing to local codebase files:
72
+
73
+ ```html
74
+ <script type="text/javascript" src="./codebase/vault.js"></script>
75
+ <link rel="stylesheet" href="./codebase/vault.css">
76
+ ```
77
+
78
+ The CSS import is required for default Vault styling and layout.
79
+
80
+ ### Initialize
81
+
82
+ ```js
83
+ import { Vault } from "@dhtmlx/vault";
84
+ import "@dhtmlx/vault/vault.css";
85
+
86
+ const vault = new Vault("vault_container", {
87
+ uploader: {
88
+ target: "/upload" // required: URL of your server-side upload handler
89
+ }
90
+ });
91
+ ```
92
+
93
+ Add a container element to your HTML:
94
+
95
+ ```html
96
+ <div id="vault_container" style="width: 100%; height: 400px;"></div>
97
+ ```
98
+
99
+ [See a live demo](https://snippet.dhtmlx.com/8qkj3kz1?tag=vault)
100
+
101
+ ---
102
+
103
+ ## Basic Usage — DHTMLX Vault
104
+
105
+ ### Manual upload with file restrictions
106
+
107
+ Disable automatic upload so users queue files first and upload on demand. Restrict uploads to images under 2 MB:
108
+
109
+ ```js
110
+ import { Vault } from "@dhtmlx/vault";
111
+ import "@dhtmlx/vault/vault.css";
112
+
113
+ const vault = new Vault("vault_container", {
114
+ uploader: {
115
+ target: "/upload",
116
+ autosend: false, // disable auto-upload; show Upload button instead
117
+ singleRequest: false, // upload files one by one (not as a single request)
118
+ params: { // additional params sent with each upload request
119
+ userId: "123"
120
+ }
121
+ }
122
+ });
123
+
124
+ // React to successful upload of each file
125
+ vault.events.on("uploadComplete", function(files) {
126
+ console.log("All files uploaded:", files);
127
+ });
128
+
129
+ // React to upload errors
130
+ vault.events.on("uploadFail", function(file) {
131
+ console.warn("Upload failed for:", file.name);
132
+ });
133
+ ```
134
+
135
+ ### Grid mode with image previews
136
+
137
+ Switch Vault to grid mode to show thumbnails for uploaded images:
138
+
139
+ ```js
140
+ import { Vault } from "@dhtmlx/vault";
141
+ import "@dhtmlx/vault/vault.css";
142
+
143
+ const vault = new Vault("vault_container", {
144
+ mode: "grid", // display files as a grid with image previews
145
+ scaleFactor: 2, // preview image quality (1 = 98×98px, 2 = 196×196px)
146
+ uploader: {
147
+ target: "/photos"
148
+ },
149
+ downloadURL: "/files/" // base URL for file download links
150
+ });
151
+ ```
152
+
153
+ ### Loading a pre-existing file list from the server
154
+
155
+ Pre-populate the file area with files already stored on the server:
156
+
157
+ ```js
158
+ import { Vault } from "@dhtmlx/vault";
159
+ import "@dhtmlx/vault/vault.css";
160
+
161
+ const vault = new Vault("vault_container", {
162
+ uploader: {
163
+ target: "/upload"
164
+ },
165
+ downloadURL: "/files/"
166
+ });
167
+
168
+ // Load a JSON list of previously uploaded files
169
+ vault.data.load("/api/files");
170
+ ```
171
+
172
+ ### Custom progress bar template
173
+
174
+ Replace the default progress bar with a custom template showing uploaded vs. total size:
175
+
176
+ ```js
177
+ import { Vault } from "@dhtmlx/vault";
178
+ import "@dhtmlx/vault/vault.css";
179
+
180
+ function formatBytes(bytes) {
181
+ return (bytes / 1024 / 1024).toFixed(2) + " MB";
182
+ }
183
+
184
+ const vault = new Vault("vault_container", {
185
+ uploader: { target: "/upload" },
186
+ templates: {
187
+ progressBar: function(percent, extra) {
188
+ return formatBytes(extra.current) + " / " + formatBytes(extra.total);
189
+ }
190
+ }
191
+ });
192
+ ```
193
+
194
+ The `templates.progressBar` function receives the current upload percentage and an `extra` object containing `current` (bytes uploaded so far) and `total` (total bytes to upload). Return any HTML string to fully replace the default progress bar content.
195
+
196
+ ---
197
+
198
+ ## DHTMLX Vault Features
199
+
200
+ DHTMLX Vault includes the following features in the GPL edition.
201
+
202
+ | Feature | Details |
203
+ |:---|:---|
204
+ | Drag-and-drop file adding | Drag files from the file system directly into the Vault file area |
205
+ | Drag-and-drop queue reordering | Reorder files in the upload queue by dragging them within the file area |
206
+ | List mode | Display uploaded files as a vertical list with file name, size, and status |
207
+ | Grid mode | Display uploaded files as a grid of thumbnails; image previews generated as HTML canvas |
208
+ | Automatic upload | Files upload to the server as soon as they are added (default behavior) |
209
+ | Manual upload | Disable autosend to let users queue files and upload on demand via a toolbar button |
210
+ | Real-time progress bar | Total upload progress displayed in the toolbar area as a percentage |
211
+ | Per-file progress bars | Individual progress indicators shown on each file item during upload |
212
+ | Cancel upload | Cancel an in-progress upload batch via the Cancel button in the progress bar |
213
+ | Inline file renaming | Rename files by double-clicking the file name; enabled via `editable: true` |
214
+ | File download | Set `downloadURL` to enable direct download links for uploaded files |
215
+ | Load file list from server | Pre-populate the file area from a server JSON endpoint via `vault.data.load(url)` |
216
+ | File restrictions | Restrict uploads by file extension, file size, or total file count |
217
+ | Single or multi-request upload | Send all files in one request or upload them individually via `singleRequest` |
218
+ | Custom upload params | Pass additional parameters with each upload request via `uploader.params` |
219
+ | Configurable toolbar | Show, hide, or replace toolbar buttons; add custom controls with any icon font |
220
+ | Custom list template | Replace the default list item HTML via `templates.list` function |
221
+ | Custom grid template | Replace the default grid item HTML via `templates.grid` function |
222
+ | Custom progress bar template | Replace the default progress bar HTML via `templates.progressBar` function |
223
+ | Event handlers in templates | Attach DOM event handlers to custom template elements via `eventHandlers` config |
224
+ | Keyboard navigation | Navigate files in the queue using keyboard controls |
225
+ | Four built-in themes | Light, Dark, Light High Contrast, and Dark High Contrast themes |
226
+ | CSS variable theming | Customize colors, borders, and spacing via CSS variables |
227
+ | Localization | Translate all UI labels via the `locale` configuration option |
228
+ | Event system | API events including `uploadComplete`, `uploadFail`, `beforeUpload`, `fileAdded`, and more |
229
+
230
+ This table highlights key features. For the complete and up-to-date feature list, see the [DHTMLX Vault documentation](https://docs.dhtmlx.com/vault/how_to_start.html).
231
+
232
+ ---
233
+
234
+ ## Framework Integration
235
+
236
+ DHTMLX Vault works with popular front-end frameworks including React, Angular, Vue, and Svelte. These integration guides apply to both the GPL edition and the commercial editions of DHTMLX Vault.
237
+
238
+ - [React integration guide](https://docs.dhtmlx.com/vault/react_integration.html)
239
+ - [Angular integration guide](https://docs.dhtmlx.com/vault/angular_integration.html)
240
+ - [Vue.js integration guide](https://docs.dhtmlx.com/vault/vuejs_integration.html)
241
+ - [Svelte integration guide](https://docs.dhtmlx.com/vault/svelte_integration.html)
242
+
243
+ ---
244
+
245
+ ## Documentation and Resources
246
+
247
+ - [Product page](https://dhtmlx.com/docs/products/dhtmlxVault/) – overview, screenshots, and key features.
248
+ - [Documentation](https://docs.dhtmlx.com/vault/how_to_start.html) – getting started, guides, and configuration options.
249
+ - [API reference](https://docs.dhtmlx.com/vault/api__refs__vault.html) – full JavaScript API for DHTMLX Vault.
250
+ - [Live demos and samples](https://snippet.dhtmlx.com/8qkj3kz1?tag=vault) – interactive examples of DHTMLX Vault features.
251
+ - [Support forum](https://forum.dhtmlx.com/c/vault) – community Q&A and discussions for DHTMLX Vault.
@@ -0,0 +1,2 @@
1
+ export * from "./sources/Calendar";
2
+ export * from "./sources/types";
@@ -0,0 +1,37 @@
1
+ import { IEventSystem } from "../../ts-common/events";
2
+ import { View } from "../../ts-common/view";
3
+ import { CalendarEvents, ICalendar, ICalendarConfig, ViewMode, ICalendarHandlersMap } from "./types";
4
+ export declare class Calendar extends View implements ICalendar {
5
+ events: IEventSystem<CalendarEvents, ICalendarHandlersMap>;
6
+ config: ICalendarConfig;
7
+ private _selected;
8
+ private _currentDate;
9
+ private _currentViewMode;
10
+ private _isSelectedInCurrentRange;
11
+ private _handlers;
12
+ private _timepicker;
13
+ private _time;
14
+ private _linkedCalendar;
15
+ constructor(container: HTMLElement | string, config?: ICalendarConfig);
16
+ setValue(value: Date | Date[] | string | string[]): boolean;
17
+ getValue<T extends boolean = false>(asDateObject?: T): Date | string;
18
+ getValue<T extends boolean = true>(asDateObject?: T): Date[] | string[];
19
+ getCurrentMode(): ViewMode;
20
+ showDate(date?: Date, mode?: ViewMode): void;
21
+ destructor(): void;
22
+ clear(): void;
23
+ link(targetCalendar: Calendar): void;
24
+ private _unlink;
25
+ private _setSelected;
26
+ private _getSelected;
27
+ private _draw;
28
+ private _initHandlers;
29
+ private _getData;
30
+ private _drawCalendar;
31
+ private _drawMonthSelector;
32
+ private _drawYearSelector;
33
+ private _drawHeader;
34
+ private _drawTimepicker;
35
+ private _selectDate;
36
+ private _moveBrowseFocus;
37
+ }
@@ -0,0 +1 @@
1
+ export declare const linkButtonClasses = ".dhx_button.dhx_button--view_link.dhx_button--icon.dhx_button--size_medium.dhx_button--color_secondary";
@@ -0,0 +1,64 @@
1
+ export interface ICalendarConfig {
2
+ value?: Date | Date[] | string | string[];
3
+ date?: Date | string;
4
+ css?: string;
5
+ mark?: (a: Date) => string;
6
+ disabledDates?: (a: Date) => boolean;
7
+ weekStart?: "saturday" | "sunday" | "monday";
8
+ weekNumbers?: boolean;
9
+ mode?: ViewMode;
10
+ timePicker?: boolean;
11
+ dateFormat?: string;
12
+ timeFormat?: 24 | 12;
13
+ thisMonthOnly?: boolean;
14
+ width?: string | number;
15
+ range?: boolean;
16
+ $rangeMark?: (a: Date) => string;
17
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
18
+ block?: (a: Date) => boolean;
19
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
20
+ view?: ViewMode;
21
+ }
22
+ export interface ICalendar {
23
+ paint(): void;
24
+ destructor(): void;
25
+ clear(): void;
26
+ showDate(date?: Date, mode?: ViewMode): void;
27
+ setValue(value: Date | Date[] | string | string[]): boolean;
28
+ getValue(asDatObj?: boolean): Date | Date[] | string | string[];
29
+ getCurrentMode(): ViewMode;
30
+ link(calendar: ICalendar): void;
31
+ }
32
+ export type ViewMode = "calendar" | "year" | "month" | "timepicker";
33
+ export interface ICalendarDay {
34
+ css: string;
35
+ date: Date;
36
+ day: number;
37
+ }
38
+ export interface ICalendarWeek {
39
+ weekNumber: number;
40
+ days: ICalendarDay[];
41
+ disabledWeekNumber?: boolean;
42
+ }
43
+ export declare enum CalendarEvents {
44
+ change = "change",
45
+ beforeChange = "beforechange",
46
+ modeChange = "modeChange",
47
+ monthSelected = "monthSelected",
48
+ yearSelected = "yearSelected",
49
+ cancelClick = "cancelClick",
50
+ dateMouseOver = "dateMouseOver",
51
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
52
+ dateHover = "dateHover"
53
+ }
54
+ export interface ICalendarHandlersMap {
55
+ [key: string]: (...args: any[]) => any;
56
+ [CalendarEvents.change]: (date: Date, oldDate: Date, byClick: boolean, mode?: "clear") => void;
57
+ [CalendarEvents.beforeChange]: (date: Date, oldDate: Date, byClick: boolean) => boolean | void;
58
+ [CalendarEvents.dateMouseOver]: (date: Date, e: MouseEvent) => void;
59
+ [CalendarEvents.modeChange]: (mode: string) => void;
60
+ [CalendarEvents.monthSelected]: (month: number) => void;
61
+ [CalendarEvents.yearSelected]: (year: number) => void;
62
+ [CalendarEvents.cancelClick]: () => void;
63
+ [CalendarEvents.dateHover]: (date: Date, e: MouseEvent) => any;
64
+ }
@@ -0,0 +1,3 @@
1
+ export * from "./sources/Combobox";
2
+ export * from "./sources/ProCombobox";
3
+ export * from "./sources/types";
@@ -0,0 +1,53 @@
1
+ import { VNode } from "../../ts-common/dom";
2
+ import { IEventSystem } from "../../ts-common/events";
3
+ import { View } from "../../ts-common/view";
4
+ import { DataCollection, DataEvents, IDataEventsHandlersMap, IDataItem } from "../../ts-data";
5
+ import { Layout } from "../../ts-layout";
6
+ import { List } from "../../ts-list";
7
+ import { Popup } from "../../ts-popup";
8
+ import { Id, IHandlers } from "../../ts-common/types";
9
+ import { ComboboxEvents, ICombobox, IComboboxConfig, IComboboxEventHandlersMap, State } from "./types";
10
+ export declare const $template: VNode;
11
+ export declare class Combobox extends View implements ICombobox {
12
+ data: DataCollection;
13
+ config: IComboboxConfig;
14
+ events: IEventSystem<DataEvents | ComboboxEvents, IComboboxEventHandlersMap | IDataEventsHandlersMap>;
15
+ list: List;
16
+ popup: Popup;
17
+ protected _helper: Popup;
18
+ private _keyListener;
19
+ protected _layout: Layout;
20
+ private _isPopupConfiqureted;
21
+ private _state;
22
+ protected _handlers: IHandlers;
23
+ constructor(element: HTMLElement | string, config: IComboboxConfig);
24
+ focus(): void | boolean;
25
+ blur(): void | boolean;
26
+ enable(): void;
27
+ disable(): void;
28
+ isDisabled(): boolean;
29
+ clear(): void | boolean;
30
+ getValue<T extends boolean = false>(asArray?: T): T extends true ? Id[] : Id;
31
+ setValue(ids: Id[] | Id, silent?: boolean): void | boolean;
32
+ addOption<T extends IDataItem>(value: T | string, join?: boolean): void;
33
+ destructor(): void;
34
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
35
+ setState(state: State): void;
36
+ private _setValue;
37
+ protected _createLayout(): void;
38
+ private _initHandlers;
39
+ private _initEvents;
40
+ private _showOptions;
41
+ private _configurePopup;
42
+ private _hideOptions;
43
+ private _filter;
44
+ private _findBest;
45
+ private _exsistId;
46
+ private _draw;
47
+ private _drawSelectedItems;
48
+ private _drawImageOrIcon;
49
+ private _getItemText;
50
+ private _updateSelectedItem;
51
+ private _changePopupPosition;
52
+ private _updatePopup;
53
+ }
@@ -0,0 +1,6 @@
1
+ import { Combobox } from "./Combobox";
2
+ import { IComboboxConfig } from "./types";
3
+ export declare class ProCombobox extends Combobox {
4
+ constructor(element: HTMLElement | string, config: IComboboxConfig);
5
+ protected _createLayout(): void;
6
+ }
@@ -0,0 +1,4 @@
1
+ export declare function selectAllView(): any;
2
+ export declare function unselectAllView(): any;
3
+ export declare function emptyListView(value?: string): any;
4
+ export declare function emptyListHeight(value: string, width: number): number;
@@ -0,0 +1,14 @@
1
+ export declare class KeyListener {
2
+ private _isActive;
3
+ private _sequence;
4
+ private _currentAction;
5
+ private _clearTimeout;
6
+ private _handler;
7
+ constructor();
8
+ startNewListen(action: (seq: string) => any): void;
9
+ endListen(): void;
10
+ reset(): void;
11
+ destructor(): void;
12
+ private _change;
13
+ private _addClearTimeout;
14
+ }
@@ -0,0 +1,8 @@
1
+ declare const _default: {
2
+ notFound: string;
3
+ selectAll: string;
4
+ unselectAll: string;
5
+ selectedItems: string;
6
+ createItem: string;
7
+ };
8
+ export default _default;
@@ -0,0 +1,95 @@
1
+ import { Id } from "../../ts-common/types";
2
+ import { DataCollection, IDataItem } from "../../ts-data";
3
+ export type ILabelPosition = "left" | "top";
4
+ export interface IComboboxConfig {
5
+ data?: DataCollection<any> | any[];
6
+ disabled?: boolean;
7
+ readOnly?: boolean;
8
+ template?: (item: any) => string;
9
+ filter?: (item: any, input: string) => boolean;
10
+ multiselection?: boolean;
11
+ label?: string;
12
+ labelPosition?: ILabelPosition;
13
+ labelWidth?: string | number;
14
+ placeholder?: string;
15
+ selectAllButton?: boolean;
16
+ itemsCount?: boolean | ((count: number) => string);
17
+ itemHeight?: number | string;
18
+ virtual?: boolean;
19
+ listHeight?: number | string;
20
+ required?: boolean;
21
+ helpMessage?: string;
22
+ hiddenLabel?: boolean;
23
+ css?: string;
24
+ value?: Id | Id[];
25
+ newOptions?: boolean;
26
+ htmlEnable?: boolean;
27
+ eventHandlers?: {
28
+ [eventName: string]: {
29
+ [className: string]: (event: Event, id: Id) => void | boolean;
30
+ };
31
+ };
32
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
33
+ cellHeight?: number;
34
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
35
+ help?: string;
36
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
37
+ showItemsCount?: boolean | ((count: number) => string);
38
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
39
+ labelInline?: boolean;
40
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
41
+ readonly?: boolean;
42
+ }
43
+ export declare enum ComboboxEvents {
44
+ beforeChange = "beforeChange",
45
+ change = "change",
46
+ focus = "focus",
47
+ blur = "blur",
48
+ keydown = "keydown",
49
+ input = "input",
50
+ beforeOpen = "beforeOpen",
51
+ afterOpen = "afterOpen",
52
+ beforeClose = "beforeClose",
53
+ afterClose = "afterClose",
54
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
55
+ open = "open",
56
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
57
+ close = "close"
58
+ }
59
+ export interface IComboboxEventHandlersMap {
60
+ [key: string]: (...args: any[]) => any;
61
+ [ComboboxEvents.beforeChange]: (ids: Id | Id[]) => boolean | void;
62
+ [ComboboxEvents.change]: (ids: Id | Id[]) => void;
63
+ [ComboboxEvents.focus]: () => void;
64
+ [ComboboxEvents.blur]: () => void;
65
+ [ComboboxEvents.keydown]: (event: KeyboardEvent, id: Id | undefined) => void;
66
+ [ComboboxEvents.input]: (value: string) => void;
67
+ [ComboboxEvents.beforeOpen]: () => boolean | void;
68
+ [ComboboxEvents.afterOpen]: () => void;
69
+ [ComboboxEvents.beforeClose]: () => boolean | void;
70
+ [ComboboxEvents.afterClose]: () => void;
71
+ [ComboboxEvents.open]: () => void;
72
+ [ComboboxEvents.close]: () => void;
73
+ }
74
+ export interface ICombobox {
75
+ disable(): void;
76
+ enable(): void;
77
+ isDisabled(): boolean;
78
+ destructor(): void;
79
+ paint(): void;
80
+ clear(): void;
81
+ focus(): void;
82
+ blur(): void;
83
+ getValue(asArray?: boolean): Id[] | Id;
84
+ setValue(ids: Id[] | Id): void;
85
+ addOption<T extends IDataItem>(value: T | string, join?: boolean): void;
86
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
87
+ setState(state: State): void;
88
+ }
89
+ export declare enum ComboState {
90
+ default = 0,
91
+ error = 1,
92
+ success = 2
93
+ }
94
+ /** @deprecated See a documentation: https://docs.dhtmlx.com/ */
95
+ export type State = "success" | "error" | "default";
@@ -0,0 +1,15 @@
1
+ export interface IFocusManager {
2
+ getFocusId(): string;
3
+ setFocusId(id: string): void;
4
+ }
5
+ declare class FocusManager implements IFocusManager {
6
+ private _activeWidgetId;
7
+ private _initHandler;
8
+ private _removeFocusClass;
9
+ private _addFocusClass;
10
+ constructor();
11
+ getFocusId(): string;
12
+ setFocusId(id: string): void;
13
+ }
14
+ export declare const focusManager: FocusManager;
15
+ export {};
@@ -0,0 +1,19 @@
1
+ import { anyFunction } from "./types";
2
+ export interface IKeyManager {
3
+ destructor(): void;
4
+ addHotKey(key: string, handler: any): void;
5
+ removeHotKey(key?: string, context?: any): void;
6
+ exist(key: string): boolean;
7
+ getKeyStorageLength(): number;
8
+ }
9
+ export declare class KeyManager implements IKeyManager {
10
+ private _keysStorage;
11
+ private _beforeCall;
12
+ private _initHandler;
13
+ constructor(beforeCall?: (e: Event, focus: any) => boolean);
14
+ destructor(): void;
15
+ addHotKey(key: string, handler: any): void;
16
+ removeHotKey(key?: string, handler?: anyFunction): void;
17
+ exist(key: string): boolean;
18
+ getKeyStorageLength(): number;
19
+ }
@@ -0,0 +1,40 @@
1
+ import { anyFunction } from "./types";
2
+ interface IScrollViewConfig {
3
+ enable: boolean;
4
+ autoHide: boolean;
5
+ timeout: number;
6
+ scrollHandler: anyFunction;
7
+ }
8
+ export declare const scrollViewConfig: IScrollViewConfig;
9
+ export interface IScrollView {
10
+ config: IScrollViewConfig;
11
+ enable(): void;
12
+ disable(): void;
13
+ render(nods?: any[]): any;
14
+ update(): void;
15
+ }
16
+ export declare class ScrollView implements IScrollView {
17
+ config: IScrollViewConfig;
18
+ private _getRootView;
19
+ private _scrollYTop;
20
+ private _scrollXLeft;
21
+ private _runnerYTop;
22
+ private _runnerXLeft;
23
+ private _runnerHeight;
24
+ private _runnerWidth;
25
+ private _visibleYArea;
26
+ private _visibleXArea;
27
+ private _scrollWidth;
28
+ private _scrollHeight;
29
+ private _wheelName;
30
+ private _handlers;
31
+ private _autoHideFunc;
32
+ private _uid;
33
+ constructor(getRootView: any, config?: {});
34
+ enable(): void;
35
+ disable(): void;
36
+ render(element: any, uid?: string): any;
37
+ update(): void;
38
+ private _getRefs;
39
+ }
40
+ export {};