jsuites 5.1.4 → 5.2.0

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 (58) hide show
  1. package/content/contact.md +1 -1
  2. package/content/docs/ajax.md +4 -4
  3. package/content/docs/color-picker/mobile.md +1 -1
  4. package/content/docs/dropdown.md +2 -2
  5. package/content/docs/getting-started.md +5 -3
  6. package/content/docs/heatmap.md +185 -2
  7. package/content/docs/image-cropper.md +22 -20
  8. package/content/docs/javascript-calendar/international.md +1 -1
  9. package/content/docs/javascript-calendar/year-month.md +5 -5
  10. package/content/docs/javascript-html-editor/extensions.md +2 -2
  11. package/content/docs/javascript-mask.md +2 -2
  12. package/content/docs/javascript-tabs.md +1 -1
  13. package/content/docs/javascript-toast.md +2 -2
  14. package/content/docs/organogram.md +2 -2
  15. package/content/docs/tests.md +100 -0
  16. package/content/docs/v4/color-picker/color-palettes.md +1 -1
  17. package/content/docs/v4/color-picker/events.md +2 -2
  18. package/content/docs/v4/color-picker/mobile.md +4 -4
  19. package/content/docs/v4/color-picker.md +1 -1
  20. package/content/docs/v4/core/animations.md +1 -1
  21. package/content/docs/v4/core/javascript-toast.md +1 -1
  22. package/content/docs/v4/core/js-drag-and-drop.md +1 -1
  23. package/content/docs/v4/core/loading-spin.md +2 -2
  24. package/content/docs/v4/dropdown-and-autocomplete/countries.md +4 -4
  25. package/content/docs/v4/dropdown-and-autocomplete/events.md +3 -3
  26. package/content/docs/v4/dropdown-and-autocomplete/mobile.md +2 -2
  27. package/content/docs/v4/dropdown-and-autocomplete.md +1 -1
  28. package/content/docs/v4/getting-started.md +11 -11
  29. package/content/docs/v4/image-cropper/rotate-and-zoom.md +1 -1
  30. package/content/docs/v4/image-cropper.md +0 -1
  31. package/content/docs/v4/javascript-calendar/mobile.md +1 -1
  32. package/content/docs/v4/javascript-calendar/valid-range.md +1 -1
  33. package/content/docs/v4/javascript-calendar/year-month.md +4 -4
  34. package/content/docs/v4/javascript-html-editor/quick-reference.md +1 -1
  35. package/content/docs/v4/javascript-html-editor/text-editor.md +9 -5
  36. package/content/docs/v4/javascript-html-editor/tracking-for-form-changes.md +83 -0
  37. package/content/docs/v4/javascript-html-editor.md +1 -1
  38. package/content/docs/v4/javascript-mask/getting-started.md +5 -1
  39. package/content/docs/v4/javascript-tabs/icons.md +4 -0
  40. package/content/docs/v4/javascript-tags/javascript-tags-with-vue.md +2 -2
  41. package/content/docs/v4/javascript-tags.md +1 -1
  42. package/content/docs/v4/layout/buttons.md +20 -1
  43. package/content/docs/v4/modal/external-content.md +7 -1
  44. package/content/docs/v4/picker/picker-with-vue.md +1 -1
  45. package/content/docs/v4/rating/javascript-rating-with-vue.md +2 -2
  46. package/content/docs/v4/rating.md +1 -1
  47. package/content/docs/v4/rich-form/basic.md +5 -0
  48. package/content/docs/v4/rich-form/getting-started.md +4 -0
  49. package/content/docs/v4/toolbar/custom-icons.md +1 -1
  50. package/content/docs/v4/toolbar/fontawsome.md +5 -5
  51. package/content/docs/v4/toolbar/quick-reference.md +1 -1
  52. package/content/docs/v4/toolbar.md +1 -1
  53. package/content/docs/v4/validations.md +25 -25
  54. package/content/docs/v4.md +2 -2
  55. package/dist/jsuites.css +65 -64
  56. package/dist/jsuites.js +21 -21
  57. package/dist/types/tabs.d.ts +3 -3
  58. package/package.json +1 -1
package/content/contact.md CHANGED
@@ -7,7 +7,7 @@ Get in touch
7
7
 
8
8
  For technical questions please go to the issues section in our github page.
9
9
 
10
- Please visit our github page: [https://github.com/jsuites/issues](https://github.com/jsuites/issues)
10
+ Please visit our GitHub page: [https://github.com/jsuites/jsuites/issues](https://github.com/jsuites/jsuites/issues)
11
11
 
12
12
  ## Email
13
13
 
package/content/docs/ajax.md CHANGED
@@ -16,7 +16,7 @@ The jSuites.ajax component is an abstraction layer that efficiently manages Java
16
16
 
17
17
  ### Basic request example
18
18
 
19
- {.ignore}
19
+ {.ignore-execution}
20
20
  ```html
21
21
  <html>
22
22
  <script src="https://jsuites.net/v5/jsuites.js"></script>
@@ -97,7 +97,7 @@ The jSuites.ajax component provides a robust feature as a `beforesend` event. Th
97
97
 
98
98
  Here's how you can utilize the `beforesend` event to add an authorization bearer:
99
99
 
100
- {.ignore}
100
+ {.ignore-execution}
101
101
  ```html
102
102
  <html>
103
103
  <script src="https://jsuites.net/v5/jsuites.js"></script>
@@ -184,7 +184,7 @@ The `jSuites.ajax` component introduces a queue management system for handling A
184
184
 
185
185
  ![Ajax request queue](img/ajax-waterfall.png)
186
186
 
187
- {.ignore}
187
+ {.ignore-execution}
188
188
  ```html
189
189
  <html>
190
190
  <script src="https://jsuites.net/v5/jsuites.js"></script>
@@ -247,7 +247,7 @@ for (let i = 0; i < 10; i++) {
247
247
 
248
248
  This example demonstrates executing a series of AJAX POST requests using the `juices.ajax` method and triggering a single event upon completing all these requests. This technique is highly beneficial in scenarios where a batch of asynchronous operations and a collective response are needed after all operations have concluded.
249
249
 
250
- {.ignore}
250
+ {.ignore-execution}
251
251
  ```html
252
252
  <html>
253
253
  <script src="https://jsuites.net/v5/jsuites.js"></script>
package/content/docs/color-picker/mobile.md CHANGED
@@ -1,6 +1,6 @@
1
1
  title: Responsive JavaScript Color Picker
2
2
  keywords: Javascript, color picker, color picker, examples, customize the colors
3
- description: How to customize the colors on the jSuites javascript color plugin.
3
+ description: Help to understand how the jSuites color plugin responsive configuration works.
4
4
 
5
5
  * [JavaScript Color Picker](/docs/color-picker)
6
6
 
package/content/docs/dropdown.md CHANGED
@@ -1,8 +1,8 @@
1
- title: JavaScript Dropdown and Autocomplete
1
+ title: JavaScript Dropdown
2
2
  keywords: JavaScript, Autocomplete, Element Picker, JavaScript Dropdown, JavaScript Select, Select Box
3
3
  description: Explore comprehensive examples for managing JavaScript dropdowns, from basic setups to advanced configurations and autocomplete features. Learn to create dynamic select boxes with conditional logic for an enhanced user experience on your web application.
4
4
 
5
- ![JavaScript Autocomplete Dropdown](img/js-dropdown.svg)
5
+ ![JavaScript Dropdown](img/js-dropdown.svg)
6
6
 
7
7
  # JavaScript Dropdown
8
8
 
package/content/docs/getting-started.md CHANGED
@@ -1,4 +1,4 @@
1
- title: Getting Started with jSuites
1
+ title: Getting Started with jSuites Version 4
2
2
  keywords: JavaScript, jSuites, JavaScript plugins, web development tools, spreadsheets, dropdowns, color pickers, cross-platform development, user-friendly JavaScript
3
3
  description: Explore jSuites, a free, comprehensive collection of JavaScript plugins. Features include spreadsheets, dropdowns, color pickers, and more, tailored for modern web development with a cross-platform, user-friendly approach.
4
4
 
@@ -57,10 +57,10 @@ jSuites includes a range of native and extended libraries, each providing specif
57
57
  - [JavaScript Rating](/docs/rating)
58
58
  - [JavaScript Rich forms](/docs/rich-form)
59
59
  - [JavaScript HTML editor](/docs/javascript-html-editor)
60
- - [JavaScript Slider](/docs/slider)
60
+ - [JavaScript Slider](/docs/image-slider)
61
61
  - [JavaScript Tags](/docs/javascript-tags)
62
62
  - [JavaScript Tabs](/docs/javascript-tabs)
63
- - [JavaScript Toolbars](/docs/toolbars)
63
+ - [JavaScript Toolbars](/docs/toolbar)
64
64
 
65
65
  ### External extended official libraries
66
66
 
@@ -75,6 +75,8 @@ There are many extended solutions that will bring specific installation instruct
75
75
 
76
76
  jSuites employs Jest for testing. Following the cloning of our GitHub project, testing can be initiated using:
77
77
 
78
+ - [JavaScript Tests](/docs/tests)
79
+
78
80
  ```bash
79
81
  npm run test
80
82
  ```
package/content/docs/heatmap.md CHANGED
@@ -45,7 +45,7 @@ The `jSuites.heatmap` is a JavaScript plugin to embed GitHub-style activity heat
45
45
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.css" type="text/css" />
46
46
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.js"></script>
47
47
 
48
- <div id='root'></div>
48
+ <div id='root' style="padding: 40px;"></div>
49
49
 
50
50
  <script>
51
51
  var initialDate = '2021-01-01';
@@ -72,6 +72,98 @@ jSuites.heatmap(document.getElementById('root'), {
72
72
  </script>
73
73
  </html>
74
74
  ```
75
+ ```jsx
76
+ import heatmap from "@jsuites/heatmap";
77
+ import { useRef, useEffect } from "react";
78
+ import "@jsuites/heatmap/heatmap.css";
79
+
80
+
81
+ let initialDate = '2021-01-01';
82
+
83
+ let year = [];
84
+ let date = new Date(initialDate);
85
+
86
+ while (year.length < 366) {
87
+ year.push({
88
+ date: date.toISOString().slice(0, 10),
89
+ value: Math.random() * 10,
90
+ });
91
+
92
+ date.setDate(date.getDate() + 1);
93
+ }
94
+
95
+
96
+ function App() {
97
+ const heatmapEl = useRef(null);
98
+
99
+ useEffect(() => {
100
+ heatmap(heatmapEl.current, {
101
+ title: 'Example',
102
+ data: year,
103
+ date: initialDate,
104
+ colors: ['#B2DFDB', '#4DB6AC', '#009688', '#00796B', '#004D40'],
105
+ tooltip: true,
106
+ })
107
+ })
108
+
109
+ return (
110
+ <div className="App">
111
+ <div ref={heatmapEl}></div>
112
+ </div>
113
+ );
114
+ }
115
+
116
+ export default App;
117
+ ```
118
+ ```vue
119
+ <template>
120
+ <div>
121
+ <div ref="heatmapEl"></div>
122
+ </div>
123
+ </template>
124
+
125
+ <script>
126
+ import heatmap from "@jsuites/heatmap";
127
+ import "@jsuites/heatmap/heatmap.css";
128
+
129
+ export default {
130
+ name: "App",
131
+ data() {
132
+ return {
133
+ initialDate: "2021-01-01",
134
+ year: [],
135
+ };
136
+ },
137
+ mounted() {
138
+ this.generateYearData();
139
+ this.initializeHeatmap();
140
+ },
141
+ methods: {
142
+ generateYearData() {
143
+ let date = new Date(this.initialDate);
144
+
145
+ while (this.year.length < 366) {
146
+ this.year.push({
147
+ date: date.toISOString().slice(0, 10),
148
+ value: Math.random() * 10,
149
+ });
150
+
151
+ date.setDate(date.getDate() + 1);
152
+ }
153
+ },
154
+ initializeHeatmap() {
155
+ heatmap(this.$refs.heatmapEl, {
156
+ title: "Example",
157
+ data: this.year,
158
+ date: this.initialDate,
159
+ colors: ["#B2DFDB", "#4DB6AC", "#009688", "#00796B", "#004D40"],
160
+ tooltip: true,
161
+ });
162
+ },
163
+ },
164
+ };
165
+ </script>
166
+ ```
75
167
 
76
168
 
77
169
  ### Displaying title and showing tooltip
@@ -84,7 +176,7 @@ jSuites.heatmap(document.getElementById('root'), {
84
176
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.css" type="text/css" />
85
177
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@jsuites/heatmap/heatmap.min.js"></script>
86
178
 
87
- <div id='root'></div>
179
+ <div id='root' style="padding: 40px;"></div>
88
180
 
89
181
  <script>
90
182
  var initialDate = '2021-07-15';
@@ -110,3 +202,94 @@ jSuites.heatmap(document.getElementById('root'), {
110
202
  </script>
111
203
  </html>
112
204
  ```
205
+ ```jsx
206
+ import heatmap from "@jsuites/heatmap";
207
+ import { useRef, useEffect } from "react";
208
+ import "@jsuites/heatmap/heatmap.css";
209
+
210
+
211
+ let initialDate = '2021-07-15';
212
+
213
+ let year = [];
214
+ let date = new Date(initialDate);
215
+
216
+ while (year.length < 366) {
217
+ year.push({
218
+ date: date.toISOString().slice(0, 10),
219
+ value: Math.random() * 10,
220
+ });
221
+
222
+ date.setDate(date.getDate() + 1);
223
+ }
224
+
225
+
226
+ function App() {
227
+ const heatmapEl = useRef(null);
228
+
229
+ useEffect(() => {
230
+ heatmap(heatmapEl.current, {
231
+ data: year,
232
+ date: initialDate,
233
+ title: 'This is the title',
234
+ tooltip: true,
235
+ })
236
+ })
237
+
238
+ return (
239
+ <div className="App">
240
+ <div ref={heatmapEl}></div>
241
+ </div>
242
+ );
243
+ }
244
+
245
+
246
+ export default App;
247
+ ```
248
+ ```vue
249
+ <template>
250
+ <div>
251
+ <div ref="heatmapEl"></div>
252
+ </div>
253
+ </template>
254
+
255
+ <script>
256
+ import heatmap from "@jsuites/heatmap";
257
+ import "@jsuites/heatmap/heatmap.css";
258
+
259
+ export default {
260
+ name: "App",
261
+ data() {
262
+ return {
263
+ initialDate: "2021-07-15",
264
+ year: [],
265
+ };
266
+ },
267
+ mounted() {
268
+ this.generateYearData();
269
+ this.initializeHeatmap();
270
+ },
271
+ methods: {
272
+ generateYearData() {
273
+ let date = new Date(this.initialDate);
274
+
275
+ while (this.year.length < 366) {
276
+ this.year.push({
277
+ date: date.toISOString().slice(0, 10),
278
+ value: Math.random() * 10,
279
+ });
280
+
281
+ date.setDate(date.getDate() + 1);
282
+ }
283
+ },
284
+ initializeHeatmap() {
285
+ heatmap(this.$refs.heatmapEl, {
286
+ title: "Example",
287
+ data: this.year,
288
+ date: this.initialDate,
289
+ tooltip: true,
290
+ });
291
+ },
292
+ },
293
+ };
294
+ </script>
295
+ ```
package/content/docs/image-cropper.md CHANGED
@@ -1,8 +1,8 @@
1
- title: JavaScript Image Cropper Plugin
1
+ title: JavaScript Cropper
2
2
  keywords: JavaScript, Image Cropper, Cropper Plugin, JS Image Editing, Web Components, Image Manipulation
3
3
  description: The jSuites Image Cropper is a JavaScript plugin to create basic image editing functionalities in web applications. It provides features such as crop, brightness and contrast adjustment, rotation, and zoom, enabling direct, efficient and straightforward image manipulation.
4
4
 
5
- ![JavaScript Image Cropper](img/js-crop.svg)
5
+ ![JavaScript Cropper](img/js-crop.svg)
6
6
 
7
7
  # JavaScript Image Cropper
8
8
 
@@ -12,23 +12,23 @@ The jSuites Image Cropper is a JavaScript plugin to create basic image editing f
12
12
 
13
13
  ### Methods
14
14
 
15
- | Method | Description |
16
- |----------------------------|------------------------------------------------------------------------------------|
17
- | resetCropSelection(); | Reset the crop selection |
18
- | reset(); | Reset the current image edition and canvas |
19
- | contrast(double); | Change the image contrast. Input value as double; Valid range: -1 to 1 |
20
- | brightness(double); | Change the image brightness. Input value input as double; Valid range: -1 to 1 |
21
- | getImageType(); | Get the image type uplodaed to the cropper. |
22
- | getSelectionCoordinates(); | Get the crop coordinates from the current selection. |
23
- | getCroppedImage(); | Get a new DOM image element based on the crop selection. |
24
- | getCroppedContent(); | Get a new based 64 image code based on the crop selection. |
25
- | getCroppedAsBlob(); | Get a new blob reference based on the crop selection. |
26
- | getImage(); | Get the DOM of the image from the cropper. |
27
- | getCanvas(); | Get the DOM of the canvas from the cropper. |
28
- | addFromFile(); | Start the edition of a new imagem from the computer. |
29
- | addFromUrl(string); | Start the edition of a new imagem from a remote URL. Be aware of CORS limitations. |
30
- | zoom(double); | Apply zoom to the image. |
31
- | rotate(double); | Apply rotate to the image. |
15
+ | Method | Description |
16
+ |----------------------------|-----------------------------------------------------------------------------------|
17
+ | resetCropSelection(); | Reset the crop selection |
18
+ | reset(); | Reset the current image edition and canvas |
19
+ | contrast(double); | Change the image contrast. Input value as double; Valid range: -1 to 1 |
20
+ | brightness(double); | Change the image brightness. Input value input as double; Valid range: -1 to 1 |
21
+ | getImageType(); | Get the image type uploaded to the cropper. |
22
+ | getSelectionCoordinates(); | Get the crop coordinates from the current selection. |
23
+ | getCroppedImage(); | Get a new DOM image element based on the crop selection. |
24
+ | getCroppedContent(); | Get a new based 64 image code based on the crop selection. |
25
+ | getCroppedAsBlob(); | Get a new blob reference based on the crop selection. |
26
+ | getImage(); | Get the DOM of the image from the cropper. |
27
+ | getCanvas(); | Get the DOM of the canvas from the cropper. |
28
+ | addFromFile(); | Start the edition of a new image from the computer. |
29
+ | addFromUrl(string); | Start the edition of a new image from a remote URL. Be aware of CORS limitations. |
30
+ | zoom(double); | Apply zoom to the image. |
31
+ | rotate(double); | Apply rotate to the image. |
32
32
 
33
33
  ### Events
34
34
 
@@ -164,7 +164,9 @@ export default {
164
164
 
165
165
  ### More examples
166
166
 
167
- * [Image cropper example on jsFiddle](https://jsfiddle.net/spreadsheet/1a5mts0u/)
167
+ More examples using our JavaScript Cropper plugin.
168
+
169
+ * [Image Cropper example on jsFiddle](https://jsfiddle.net/spreadsheet/1a5mts0u/)
168
170
  * [Image Brightness and Contrast](/docs/image-cropper/brightness-and-contrast-filters)
169
171
  * [Image Rotate and Zoom](/docs/image-cropper/rotate-and-zoom)
170
172
 
package/content/docs/javascript-calendar/international.md CHANGED
@@ -1,4 +1,4 @@
1
- title: JavaScript Calendar International Options
1
+ title: JavaScript Calendar: International Settings
2
2
  keywords: JavaScript, Calendar, Date, DateTime, Date Picker, DateTime Picker, Examples, International Options, Customizations
3
3
  description: Tailor your JavaScript calendar with customizable texts and international settings, ensuring a localized experience for global audiences.
4
4
 
package/content/docs/javascript-calendar/year-month.md CHANGED
@@ -1,16 +1,16 @@
1
- title: JavaScript Year-Month Picker
1
+ title: JavaScript Year Month Picker
2
2
  keywords: JavaScript, Calendar, Date, DateTime, Date Picker, DateTime Picker, Examples, Year Picker, Month Picker
3
3
  description: Easily select year and month with our JavaScript picker, streamlining date inputs for more efficient user experiences.
4
4
 
5
- [JavaScript Calendar](/docs/javascript-calendar)
5
+ [JavaScript Year Month Picker](/docs/javascript-calendar)
6
6
 
7
- # JavaScript Calendar: Year-Month Picker
7
+ # JavaScript Calendar: Year Month Picker
8
8
 
9
- Enhance your web applications with a JavaScript calendar specialising in year and month-only selections, providing a streamlined experience for users needing to pick broader date ranges without specific days.
9
+ This section covers the process of setting up the jSuites `calendar plugin` to serve as a JavaScript year and month picker selector, thereby excluding daily selection to tailor the calendar more closely to specific application requirements.
10
10
 
11
11
  ## Example
12
12
 
13
- ### JavaScript Year-Month Picker
13
+ ### JavaScript Year Month Picker
14
14
 
15
15
  This feature allows for a simplified interface where users can quickly navigate and select a particular year and month, ideal for reports, archives, and any scenario where the day of the month is secondary.
16
16
 
package/content/docs/javascript-html-editor/extensions.md CHANGED
@@ -1,9 +1,9 @@
1
1
  title: JavaScript Editor Extensions
2
2
  keywords: JavaScript, Editor, HTML, HTML editor
3
- description: jSuites HTML editor is a JavaScript-based plugin offering an interface for web content editing. It includes various manipulation tools and filters, extensions, and a customizable toolbar for seamless integration into web applications and projects.
3
+ description: This section brings more information about the HTML editor extensions and add-ons.
4
4
 
5
5
 
6
- [JavaScript Editor](/docs/javascript-html-editor)
6
+ [JavaScript Editor Addons](/docs/javascript-html-editor)
7
7
 
8
8
  JavaScript Editor Extensions
9
9
  ==========================
package/content/docs/javascript-mask.md CHANGED
@@ -1,10 +1,10 @@
1
- title: Javascript string and number mask
1
+ title: Javascript Input Mask
2
2
  keywords: Javascript, mask, input mask, currency mask, money mask, javascript mask
3
3
  description: A simple javascript mask plugin. Create mask on HTML input to make sure the data is correctly input on form elements.
4
4
 
5
5
  ![JavaScript Input Mask](img/js-mask.svg)
6
6
 
7
- # JavaScript Input Mask
7
+ # JavaScript Mask
8
8
 
9
9
  ## Overview
10
10
 
package/content/docs/javascript-tabs.md CHANGED
@@ -1,4 +1,4 @@
1
- title: JavaScript Tabs Plugin
1
+ title: JavaScript Tabs
2
2
  keywords: JavaScript, jSuites Tabs Plugin, Web Content Management, Responsive Design, Developer Tools
3
3
  description: jSuites.tabs offers a responsive and versatile JavaScript solution for organizing web content into tabbed layouts, providing developers with extensive customization options and interactive features for enhanced user engagement.
4
4
 
package/content/docs/javascript-toast.md CHANGED
@@ -1,8 +1,8 @@
1
- title: JavaScript Toast Notification
1
+ title: JavaScript Toast
2
2
  keywords: JavaScript toast, toast notification, JS toast
3
3
  description: This section details a basic yet responsive JavaScript toast notification system. It is ideal for displaying quick, transient messages to users in a non-disruptive manner.
4
4
 
5
- JavaScript Toast notifications
5
+ JavaScript Toast
6
6
  ==============================
7
7
 
8
8
  This script has less than 1Kb
package/content/docs/organogram.md CHANGED
@@ -88,7 +88,7 @@ function App() {
88
88
  Organogram(organogramElement.current, {
89
89
  width: 460,
90
90
  height: 420,
91
- url: "https://jsuites.net/v4/plugins/organogram.json",
91
+ url: "https://jsuites.net/plugins/organogram.json",
92
92
  vertical: true,
93
93
  });
94
94
  }
@@ -117,7 +117,7 @@ export default {
117
117
  Organogram(this.$refs.organogram, {
118
118
  width: 460,
119
119
  height: 420,
120
- url: "https://jsuites.net/v4/plugins/organogram.json",
120
+ url: "https://jsuites.net/plugins/organogram.json",
121
121
  vertical: true,
122
122
  });
123
123
  }
package/content/docs/tests.md ADDED
@@ -0,0 +1,100 @@
1
+ title: Testing jSuites Plugins
2
+ keywords: jSuites, testing, frontend, JavaScript library, plugins, automation
3
+ description: How to create and automate tests for your jSuites plugins, ensuring high-quality reliable web applications.
4
+
5
+ Tests
6
+ =====
7
+
8
+ jSuites has integrated Jest for its unit testing implementation. This section will provide additional details on effectively conducting tests for your jSuites plugins. Whether you prefer running tests through the command line or in a browser environment, you can follow the instructions provided in this section to accomplish either approach.
9
+
10
+
11
+ Blue print
12
+ ----------
13
+
14
+ In the example provided below, a test is conducted wherein the render method of the mask plugin is invoked. Subsequently, the output is compared against the specified assertions.
15
+
16
+ {.ignore}
17
+ ```javascript
18
+ describe('Testing jSuites.mask', () => {
19
+ it('Render method', function() {
20
+ expect(jSuites.mask.render(123, { mask: '00000'}, true)).toBe('00123');
21
+ expect(jSuites.mask.render(11.45, { mask: '0.0' }, true)).toBe('11.5');
22
+ });
23
+ });
24
+ ```
25
+
26
+ Testing DOM Related Plugins
27
+ ----------
28
+
29
+ In order to test DOM related plugins, you need to install the `jsdom` package, which allows you to render plugins on HTML elements and then make assertions based on them.
30
+
31
+ With `jsdom` configured on your project, you can run a test like the example below to check if an element is correctly added or removed from the document body.
32
+
33
+ {.ignore}
34
+ ```javascript
35
+ describe('Testing jSuites.contextmenu', () => {
36
+ test('Testing if elements are being displayed in HTML', () => {
37
+ document.body.innerHTML = '<div id="root"></div>';
38
+ let div = document.getElementById('root')
39
+
40
+ jSuites.contextmenu(div, {
41
+ items: [
42
+ {
43
+ title: 'Select All',
44
+ shortcut: 'Ctrl + A',
45
+ tooltip: 'Method to Select All Text',
46
+ },
47
+ ],
48
+ })
49
+
50
+ expect(document.body.innerHTML).toContain('Select All')
51
+ expect(document.body.innerHTML).toContain('Ctrl + A')
52
+ expect(document.body.innerHTML).toContain('Method to Select All Text')
53
+ });
54
+ });
55
+ ```
56
+
57
+ More examples in our [GitHub repository](https://github.com/jsuites/jsuites/tree/main/tests)
58
+
59
+
60
+
61
+
62
+ Running your tests
63
+ ------------------
64
+
65
+
66
+
67
+ ### Via NPM
68
+
69
+ Create a `./test` folder in your project root and include your test files, then you can execute:
70
+
71
+ To run those tests via command line you will need
72
+
73
+ ```bash
74
+ npm run test
75
+ ```
76
+
77
+ Troubleshooting
78
+ ---------------
79
+
80
+
81
+
82
+ ### Not possible to load a file outside the module
83
+
84
+ **Issue:** Unable to Load a File Outside the Module
85
+
86
+ This problem occurs when attempting to use the 'import' statement to load your components, and it's a limitation of Node.js when dealing with the interaction between ES modules (ESM) and CommonJS.
87
+
88
+ **Solution:**
89
+
90
+ To address this issue, follow these steps:
91
+
92
+ - Open your package.json file.
93
+ - Add the 'type' field with the value 'module' as shown below:
94
+
95
+ ```{ "type": "module", // ... other package.json configurations }```
96
+ - Save the package.json file.
97
+ - Run your tests.
98
+ - After running the tests, you can remove the 'type' field from package.json if needed.
99
+
100
+ This solution allows for proper module loading when working with ES modules and CommonJS in Node.js.
package/content/docs/v4/color-picker/color-palettes.md CHANGED
@@ -1,4 +1,4 @@
1
- title: Javascript color picker palettes
1
+ title: Javascript Color Picker: Custom Color Palettes
2
2
  keywords: Javascript, color picker, color picker, examples, customize the colors, color palettes.
3
3
  description: How to integrate jsuites palettes with the jsuites javascript color plugin.
4
4
 
package/content/docs/v4/color-picker/events.md CHANGED
@@ -1,6 +1,6 @@
1
- title: Javascript color picker events
1
+ title: Javascript Color Picker | JSuites 4
2
2
  keywords: Javascript, color picker, color picker, examples, events
3
- description: Handling javascript events in your color picker plugin.
3
+ description: Handling javascript events in your jSuites color picker plugin.
4
4
 
5
5
  * [JavaScript Color Picker](/docs/v4/color-picker)
6
6
 
package/content/docs/v4/color-picker/mobile.md CHANGED
@@ -1,13 +1,13 @@
1
- title: Responsive JavaScript color picker
1
+ title: Responsive JavaScript Color Picker with jSuites Version 4
2
2
  keywords: Javascript, color picker, color picker, examples, customize the colors
3
- description: How to customize the colors on the jsuites javascript color plugin.
3
+ description: jSuites color picker plugin is a responsive plugin that helps improve the user experience on web applications.
4
4
 
5
5
  * [JavaScript Color Picker](/docs/v4/color-picker)
6
6
 
7
- Reponsive JavaScript color picker
7
+ Responsive JavaScript color picker
8
8
  =================================
9
9
 
10
- The fullscreen initiation flag can be used to open the color picke in fullscreen mode. The `jSuites.color` will automatically set this as true for screens lower than 800 pixels.
10
+ The fullscreen initiation flag can be used to open the color picker in fullscreen mode. The `jSuites.color` will automatically set this as true for screens lower than 800 pixels.
11
11
 
12
12
 
13
13
  ```html
package/content/docs/v4/color-picker.md CHANGED
@@ -1,4 +1,4 @@
1
- title: Javascript color picker
1
+ title: Javascript Color Picker Plugin
2
2
  keywords: Javascript, color picker, color picker
3
3
  description: Vanilla javascript color picker plugin.
4
4
 
package/content/docs/v4/core/animations.md CHANGED
@@ -1,4 +1,4 @@
1
- title: JavaScript basic animations
1
+ title: JavaScript Animations Plugins
2
2
  keywords: JavaScript animations, JS animations, slide in, slide out, slide left, slide right, slide bottom, slide top, fade in, fade out
3
3
  description: A collection of basic JavaScript animations, slide left, slide right, slide bottom, slide top, fade in, fade out
4
4
 
package/content/docs/v4/core/javascript-toast.md CHANGED
@@ -1,4 +1,4 @@
1
- title: JavaScript toast notification
1
+ title: JavaScript Toast Notification
2
2
  keywords: JavaScript toast, toast notification, JS toast
3
3
  description: Basic responsive JavaScript toast notification
4
4
 
package/content/docs/v4/core/js-drag-and-drop.md CHANGED
@@ -1,4 +1,4 @@
1
- title: JavaScript drag and drop plugin
1
+ title: JS Drag and Drop with jSuites Version 4
2
2
  keywords: JavaScript drag and drop, sortable list
3
3
  description: JavaScript drag and drop plugin.
4
4
 
package/content/docs/v4/core/loading-spin.md CHANGED
@@ -1,8 +1,8 @@
1
- title: JavaScript loading spin
1
+ title: JavaScript Loading Spin with Jsuites v4
2
2
  keywords: JavaScript loading spin, animations, JS loading, javascript loading component
3
3
  description: JavaScript loading spin web component.
4
4
 
5
- Loading spin
5
+ JavaScript Loading Spin
6
6
  ============
7
7
 
8
8
  This script has less than 1 Kbyte
package/content/docs/v4/dropdown-and-autocomplete/countries.md CHANGED
@@ -1,10 +1,10 @@
1
- title: Javascript dropdown with flags
1
+ title: Javascript Autocomplete With Country Flags
2
2
  keywords: Javascript, autocomplete dropdown, javascript dropdown, country search with flags
3
- description: Create a country dropdown with autocomplete and flag icons.
3
+ description: How to include country flag images on your jSuites dropdowns.
4
4
 
5
- * [JavaScript dropdown and autocomplete plugin](/docs/v4/dropdown-and-autocomplete)
5
+ * [JavaScript Autocomplete](/docs/v4/dropdown-and-autocomplete)
6
6
 
7
- JavaScript autocomplete dropdown with images
7
+ JavaScript Autocomplete Dropdown
8
8
  ============================================
9
9
 
10
10
  The `javascript autocomplete` countries dropdown is a real life example using JSON and a CDN images that works great in small screen devices.