jsuites 5.1.2 → 5.1.4

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 (199) hide show
  1. package/README.md +20 -22
  2. package/content/contact.md +14 -0
  3. package/content/docs/ajax.md +317 -0
  4. package/content/docs/animations.md +111 -0
  5. package/content/docs/color-picker/color-palettes.md +43 -0
  6. package/content/docs/color-picker/events.md +46 -0
  7. package/content/docs/color-picker/mobile.md +23 -0
  8. package/content/docs/color-picker.md +227 -0
  9. package/content/docs/contextmenu.md +356 -0
  10. package/content/docs/drag-and-drop.md +138 -0
  11. package/content/docs/dropdown/countries.md +820 -0
  12. package/content/docs/dropdown/events.md +152 -0
  13. package/content/docs/dropdown/mobile.md +116 -0
  14. package/content/docs/dropdown.md +317 -0
  15. package/content/docs/getting-started.md +80 -0
  16. package/content/docs/heatmap.md +112 -0
  17. package/content/docs/image-cropper/brightness-and-contrast-filters.md +164 -0
  18. package/content/docs/image-cropper/rotate-and-zoom.md +172 -0
  19. package/content/docs/image-cropper.md +170 -0
  20. package/content/docs/image-slider.md +121 -0
  21. package/content/docs/javascript-calendar/events.md +126 -0
  22. package/content/docs/javascript-calendar/international.md +151 -0
  23. package/content/docs/javascript-calendar/mobile.md +71 -0
  24. package/content/docs/javascript-calendar/valid-range.md +74 -0
  25. package/content/docs/javascript-calendar/year-month.md +70 -0
  26. package/content/docs/javascript-calendar.md +398 -0
  27. package/content/docs/javascript-html-editor/extensions.md +131 -0
  28. package/content/docs/javascript-html-editor.md +441 -0
  29. package/content/docs/javascript-mask.md +398 -0
  30. package/content/docs/javascript-tabs.md +284 -0
  31. package/content/docs/javascript-tags.md +237 -0
  32. package/content/docs/javascript-toast.md +104 -0
  33. package/content/docs/loading-spin.md +81 -0
  34. package/content/docs/modal.md +246 -0
  35. package/content/docs/organogram.md +126 -0
  36. package/content/docs/picker.md +103 -0
  37. package/content/docs/rating.md +223 -0
  38. package/content/docs/rich-form.md +473 -0
  39. package/content/docs/toolbar.md +616 -0
  40. package/content/docs/v4/actionsheet.md +32 -0
  41. package/content/docs/v4/color-picker/basic.md +35 -0
  42. package/content/docs/v4/color-picker/color-palettes.md +42 -0
  43. package/content/docs/v4/color-picker/custom-colors.md +34 -0
  44. package/content/docs/v4/color-picker/events.md +36 -0
  45. package/content/docs/v4/color-picker/javascript-color-picker-with-angular.md +121 -0
  46. package/content/docs/v4/color-picker/javascript-color-picker-with-react.md +60 -0
  47. package/content/docs/v4/color-picker/javascript-color-picker-with-vue.md +77 -0
  48. package/content/docs/v4/color-picker/mobile.md +26 -0
  49. package/content/docs/v4/color-picker/quick-reference.md +89 -0
  50. package/content/docs/v4/color-picker.md +117 -0
  51. package/content/docs/v4/contextmenu/basic.md +32 -0
  52. package/content/docs/v4/contextmenu/icons.md +82 -0
  53. package/content/docs/v4/contextmenu/quick-reference.md +33 -0
  54. package/content/docs/v4/contextmenu/submenu.md +105 -0
  55. package/content/docs/v4/contextmenu/vanilla.md +72 -0
  56. package/content/docs/v4/contextmenu.md +51 -0
  57. package/content/docs/v4/core/ajax.md +137 -0
  58. package/content/docs/v4/core/animations.md +40 -0
  59. package/content/docs/v4/core/dialog.md +0 -0
  60. package/content/docs/v4/core/javascript-toast.md +39 -0
  61. package/content/docs/v4/core/js-drag-and-drop.md +59 -0
  62. package/content/docs/v4/core/loading-spin.md +35 -0
  63. package/content/docs/v4/core/push-to-refresh.md +6 -0
  64. package/content/docs/v4/dropdown-and-autocomplete/autocomplete.md +27 -0
  65. package/content/docs/v4/dropdown-and-autocomplete/basic.md +56 -0
  66. package/content/docs/v4/dropdown-and-autocomplete/colors.md +34 -0
  67. package/content/docs/v4/dropdown-and-autocomplete/countries.md +280 -0
  68. package/content/docs/v4/dropdown-and-autocomplete/events.md +55 -0
  69. package/content/docs/v4/dropdown-and-autocomplete/grouping-elements.md +42 -0
  70. package/content/docs/v4/dropdown-and-autocomplete/images.md +44 -0
  71. package/content/docs/v4/dropdown-and-autocomplete/javascript-dropdown-with-angular.md +126 -0
  72. package/content/docs/v4/dropdown-and-autocomplete/javascript-dropdown-with-react.md +65 -0
  73. package/content/docs/v4/dropdown-and-autocomplete/javascript-dropdown-with-vue.md +78 -0
  74. package/content/docs/v4/dropdown-and-autocomplete/large-sample.md +32 -0
  75. package/content/docs/v4/dropdown-and-autocomplete/methods.md +48 -0
  76. package/content/docs/v4/dropdown-and-autocomplete/mobile.md +52 -0
  77. package/content/docs/v4/dropdown-and-autocomplete/multiple.md +36 -0
  78. package/content/docs/v4/dropdown-and-autocomplete/new-options.md +49 -0
  79. package/content/docs/v4/dropdown-and-autocomplete/quick-reference.md +112 -0
  80. package/content/docs/v4/dropdown-and-autocomplete/remote-search.md +31 -0
  81. package/content/docs/v4/dropdown-and-autocomplete.md +137 -0
  82. package/content/docs/v4/examples.md +17 -0
  83. package/content/docs/v4/getting-started.md +80 -0
  84. package/content/docs/v4/heatmap/basic.md +43 -0
  85. package/content/docs/v4/heatmap/colors.md +45 -0
  86. package/content/docs/v4/heatmap/quick-reference.md +86 -0
  87. package/content/docs/v4/heatmap/title-and-tooltip.md +47 -0
  88. package/content/docs/v4/heatmap.md +62 -0
  89. package/content/docs/v4/image-cropper/brightness-and-contrast-filters.md +56 -0
  90. package/content/docs/v4/image-cropper/image-cropper-angular-example.md +116 -0
  91. package/content/docs/v4/image-cropper/image-cropper-vue-example.md +90 -0
  92. package/content/docs/v4/image-cropper/quick-reference.md +80 -0
  93. package/content/docs/v4/image-cropper/react-component.md +67 -0
  94. package/content/docs/v4/image-cropper/rotate-and-zoom.md +57 -0
  95. package/content/docs/v4/image-cropper.md +115 -0
  96. package/content/docs/v4/image-slider/basic.md +30 -0
  97. package/content/docs/v4/image-slider/quick-reference.md +67 -0
  98. package/content/docs/v4/image-slider.md +51 -0
  99. package/content/docs/v4/javascript-calendar/basic.md +83 -0
  100. package/content/docs/v4/javascript-calendar/events.md +61 -0
  101. package/content/docs/v4/javascript-calendar/inline.md +34 -0
  102. package/content/docs/v4/javascript-calendar/international.md +65 -0
  103. package/content/docs/v4/javascript-calendar/javascript-calendar-with-angular.md +121 -0
  104. package/content/docs/v4/javascript-calendar/javascript-calendar-with-react.md +61 -0
  105. package/content/docs/v4/javascript-calendar/javascript-calendar-with-vue.md +76 -0
  106. package/content/docs/v4/javascript-calendar/methods.md +61 -0
  107. package/content/docs/v4/javascript-calendar/mobile.md +36 -0
  108. package/content/docs/v4/javascript-calendar/quick-reference.md +127 -0
  109. package/content/docs/v4/javascript-calendar/time-picker.md +35 -0
  110. package/content/docs/v4/javascript-calendar/valid-range.md +41 -0
  111. package/content/docs/v4/javascript-calendar/year-month.md +31 -0
  112. package/content/docs/v4/javascript-calendar.md +180 -0
  113. package/content/docs/v4/javascript-html-editor/basic.md +28 -0
  114. package/content/docs/v4/javascript-html-editor/custom-toolbar.md +85 -0
  115. package/content/docs/v4/javascript-html-editor/dropping-zone.md +29 -0
  116. package/content/docs/v4/javascript-html-editor/quick-reference.md +77 -0
  117. package/content/docs/v4/javascript-html-editor/text-editor.md +39 -0
  118. package/content/docs/v4/javascript-html-editor/website-snippet.md +29 -0
  119. package/content/docs/v4/javascript-html-editor.md +49 -0
  120. package/content/docs/v4/javascript-mask/basic.md +101 -0
  121. package/content/docs/v4/javascript-mask/events.md +32 -0
  122. package/content/docs/v4/javascript-mask/getting-started.md +79 -0
  123. package/content/docs/v4/javascript-mask/programmatically-updates.md +35 -0
  124. package/content/docs/v4/javascript-mask/quick-reference.md +78 -0
  125. package/content/docs/v4/javascript-mask.md +113 -0
  126. package/content/docs/v4/javascript-tabs/basic.md +36 -0
  127. package/content/docs/v4/javascript-tabs/events.md +64 -0
  128. package/content/docs/v4/javascript-tabs/icons.md +37 -0
  129. package/content/docs/v4/javascript-tabs/methods.md +47 -0
  130. package/content/docs/v4/javascript-tabs/quick-reference.md +97 -0
  131. package/content/docs/v4/javascript-tabs/remote.md +37 -0
  132. package/content/docs/v4/javascript-tabs/style.md +36 -0
  133. package/content/docs/v4/javascript-tabs.md +66 -0
  134. package/content/docs/v4/javascript-tags/basic.md +27 -0
  135. package/content/docs/v4/javascript-tags/events.md +40 -0
  136. package/content/docs/v4/javascript-tags/javascript-tags-with-angular.md +123 -0
  137. package/content/docs/v4/javascript-tags/javascript-tags-with-react.md +60 -0
  138. package/content/docs/v4/javascript-tags/javascript-tags-with-vue.md +76 -0
  139. package/content/docs/v4/javascript-tags/quick-reference.md +70 -0
  140. package/content/docs/v4/javascript-tags/remote-search.md +73 -0
  141. package/content/docs/v4/javascript-tags/validations.md +38 -0
  142. package/content/docs/v4/javascript-tags/webcomponent.md +0 -0
  143. package/content/docs/v4/javascript-tags.md +130 -0
  144. package/content/docs/v4/javascript-template/basic.md +108 -0
  145. package/content/docs/v4/javascript-template/event-handling.md +73 -0
  146. package/content/docs/v4/javascript-template/methods.md +74 -0
  147. package/content/docs/v4/javascript-template/pagination-and-searching.md +111 -0
  148. package/content/docs/v4/javascript-template/quick-reference.md +117 -0
  149. package/content/docs/v4/javascript-template.md +115 -0
  150. package/content/docs/v4/layout/buttons.md +16 -0
  151. package/content/docs/v4/modal/basic.md +34 -0
  152. package/content/docs/v4/modal/events.md +39 -0
  153. package/content/docs/v4/modal/external-content.md +27 -0
  154. package/content/docs/v4/modal/javascript-modal-with-react.md +75 -0
  155. package/content/docs/v4/modal/quick-reference.md +58 -0
  156. package/content/docs/v4/modal/web-components.md +53 -0
  157. package/content/docs/v4/modal.md +50 -0
  158. package/content/docs/v4/organogram/basic.md +123 -0
  159. package/content/docs/v4/organogram/methods.md +63 -0
  160. package/content/docs/v4/organogram/organogram-with-angular.md +208 -0
  161. package/content/docs/v4/organogram/organogram-with-react.md +137 -0
  162. package/content/docs/v4/organogram/organogram-with-vue.md +172 -0
  163. package/content/docs/v4/organogram/quick-reference.md +75 -0
  164. package/content/docs/v4/organogram.md +81 -0
  165. package/content/docs/v4/picker/basic.md +25 -0
  166. package/content/docs/v4/picker/handle-changes.md +31 -0
  167. package/content/docs/v4/picker/picker-with-angular.md +121 -0
  168. package/content/docs/v4/picker/picker-with-react.md +60 -0
  169. package/content/docs/v4/picker/picker-with-vue.md +77 -0
  170. package/content/docs/v4/picker/quick-reference.md +73 -0
  171. package/content/docs/v4/picker/static-front.md +27 -0
  172. package/content/docs/v4/picker/stylize-options.md +28 -0
  173. package/content/docs/v4/picker.md +47 -0
  174. package/content/docs/v4/rating/events.md +27 -0
  175. package/content/docs/v4/rating/javascript-rating-with-angular.md +124 -0
  176. package/content/docs/v4/rating/javascript-rating-with-react.md +58 -0
  177. package/content/docs/v4/rating/javascript-rating-with-vue.md +78 -0
  178. package/content/docs/v4/rating/quick-reference.md +60 -0
  179. package/content/docs/v4/rating.md +120 -0
  180. package/content/docs/v4/rich-form/basic.md +67 -0
  181. package/content/docs/v4/rich-form/getting-started.md +83 -0
  182. package/content/docs/v4/rich-form/methods.md +76 -0
  183. package/content/docs/v4/rich-form/quick-reference.md +57 -0
  184. package/content/docs/v4/rich-form/tracking-for-form-changes.md +71 -0
  185. package/content/docs/v4/rich-form/validations.md +88 -0
  186. package/content/docs/v4/rich-form.md +47 -0
  187. package/content/docs/v4/themes.md +24 -0
  188. package/content/docs/v4/toolbar/custom-icons.md +46 -0
  189. package/content/docs/v4/toolbar/fontawsome.md +68 -0
  190. package/content/docs/v4/toolbar/quick-reference.md +104 -0
  191. package/content/docs/v4/toolbar/toolbar.md +139 -0
  192. package/content/docs/v4/toolbar.md +196 -0
  193. package/content/docs/v4/tracking-for-form-changes.md +83 -0
  194. package/content/docs/v4/validations.md +148 -0
  195. package/content/docs/v4.md +66 -0
  196. package/content/docs.md +62 -0
  197. package/dist/jsuites.js +19 -7
  198. package/package.json +1 -1
  199. package/vue/calendar/index.js +1 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- ![The javascript web components](https://jsuites.net/templates/v4/img/logo.svg)
1
+ ![The javascript web components](https://jsuites.net/templates/default/img/logo.svg)
2
2
 
3
- ## jSuites v4 - Webcomponents and JavaScript plugins.
3
+ ## jSuites v5 - Webcomponents and JavaScript plugins.
4
4
 
5
5
  About
6
6
  ---------
@@ -35,8 +35,8 @@ Create a multiple and autocomplete responsive dropdown.
35
35
 
36
36
  ```html
37
37
  <html>
38
- <script src="https://jsuites.net/v4/jsuites.js"></script>
39
- <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
38
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
39
+ <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
40
40
 
41
41
  <div id="dropdown1"></div>
42
42
 
@@ -56,51 +56,51 @@ jSuites.dropdown(document.getElementById('dropdown1'), {
56
56
  </html>
57
57
  ```
58
58
  The same code can render in different ways, by directive type: default, picker or searchbar\
59
- ![Javascript dropdown](https://jsuites.net/templates/v4/img/dropdown.png)
59
+ ![Javascript dropdown](https://jsuites.net/templates/default/img/dropdown.png)
60
60
 
61
61
 
62
62
  Examples
63
63
  ---------
64
64
 
65
- * [JavaScript image cropper](https://jsuites.net/v4/image-cropper)\
65
+ * [JavaScript image cropper](https://jsuites.net/docs/)\
66
66
  The jSuites.crop is a lightweight JavaScript plugin that allow users load, crop and apply filters to images.
67
67
 
68
- * [Dropdown and autocomplete](https://jsuites.net/v4/dropdown-and-autocomplete)\
68
+ * [Dropdown and autocomplete](https://jsuites.net/docs/dropdown)\
69
69
  Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns.
70
70
 
71
- * [Javascript calendar](https://jsuites.net/v4/javascript-calendar)\
71
+ * [Javascript calendar](https://jsuites.net/docs/javascript-calendar)\
72
72
  A lightweight javascript calendar, date and datetime picker full responsive and easy integration.
73
73
 
74
- * [Javascript tags](https://jsuites.net/v4/javascript-tags)\
74
+ * [Javascript tags](https://jsuites.net/docs/javascript-tags)\
75
75
  JavaScript tags and keywords managment plugin
76
76
 
77
- * [Javascript tabs](https://jsuites.net/v4/javascript-tabs)\
77
+ * [Javascript tabs](https://jsuites.net/docs/javascript-tabs)\
78
78
  JavaScript tabs plugin
79
79
 
80
- * [Javascript mask](https://jsuites.net/v4/javascript-mask)\
80
+ * [Javascript mask](https://jsuites.net/docs/javascript-mask)\
81
81
  A simple javascript mask plugin
82
82
 
83
- * [Javascript color picker plugin](https://jsuites.net/v4/color-picker)\
83
+ * [Javascript color picker plugin](https://jsuites.net/docs/color-picker)\
84
84
  Javascript color picker plugin
85
85
 
86
- * [Javascript contextmenu plugin](https://jsuites.net/v4/contextmenu)\
86
+ * [Javascript contextmenu plugin](https://jsuites.net/docs/contextmenu)\
87
87
  Vanilla javascript contextmenu plugin
88
88
 
89
- * [Tracking the form changes](https://jsuites.net/v4/richform)\
89
+ * [Tracking the form changes](https://jsuites.net/docs/richform)\
90
90
  Track changes in a online form, apply validations and manage ajax requests.
91
91
 
92
- * [Javascript modal plugin](https://jsuites.net/v4/modal)\
92
+ * [Javascript modal plugin](https://jsuites.net/docs/modal)\
93
93
  Simple vanilla javascript modal plugin
94
94
 
95
- * [JavaSript general toolbar](https://jsuites.net/v4/toolbar)\
95
+ * [JavaSript general toolbar](https://jsuites.net/docs/toolbar)\
96
96
  Micro vanilla javascript toolbar plugin
97
97
 
98
- * [Javascript mini HTML editor plugin with filter](https://jsuites.net/v4/text-editor)\
98
+ * [Javascript mini HTML editor plugin with filter](https://jsuites.net/docs/javascript-html-editor)\
99
99
  Simple vanilla javascript image slider plugin
100
100
 
101
101
 
102
102
  ## Official website
103
- - [jSuites Official](https://jsuites.net/v4)
103
+ - [jSuites Official](https://jsuites.net/docs)
104
104
 
105
105
  ## Community
106
106
  - [GitHub](https://github.com/jsuites/jsuites/issues)
@@ -113,9 +113,7 @@ contact@jsuites.net
113
113
 
114
114
  ## Other tools
115
115
 
116
- - [LemonadeJS v2](https://lemonadejs.net/v2/)<br>
117
- - [LemonadeJS v3](https://lemonadejs.net/v3/)<br>
118
- - [Jspreadsheet Pro v9](https://jspreadsheet.com/v9/)<br>
119
- - [Jspreadsheet Pro v10](https://jspreadsheet.com/v10/)<br>
116
+ - LemonadeJS: [Reactive Library and Two-way Data Binding](https://lemonadejs.net/)<br>
117
+ - Jspreadsheet: [Data Grid with Spreadsheet Controls](https://jspreadsheet.com/)<br>
120
118
 
121
119
 
package/content/contact.md ADDED
@@ -0,0 +1,14 @@
1
+ title: Contact and Technical Support
2
+ keywords: Team, contact, issues, questions
3
+ description: Submit your ticket on github or drop us an email.
4
+
5
+ Get in touch
6
+ ============
7
+
8
+ For technical questions please go to the issues section in our github page.
9
+
10
+ Please visit our github page: [https://github.com/jsuites/issues](https://github.com/jsuites/issues)
11
+
12
+ ## Email
13
+
14
+ contact@jspreadsheet.com
package/content/docs/ajax.md ADDED
@@ -0,0 +1,317 @@
1
+ title: JavaScript Ajax Component.
2
+ keywords: Javascript ajax, ajax requests
3
+ description: The JavaScript Ajax Component streamlines the management of Ajax requests. It facilitates the creation of request queues and the registration of events, optimizing the handling of asynchronous server communication in web applications.
4
+
5
+ Ajax Requests
6
+ =============
7
+
8
+ The jSuites.ajax component is an abstraction layer that efficiently manages JavaScript AJAX requests. This vanilla JavaScript implementation boasts several key features, making it a robust choice for handling AJAX interactions.
9
+
10
+ - **Familiar Syntax**: The library's syntax is intentionally designed to be similar to other popular libraries, easing the learning curve for developers.
11
+ - **No External Dependencies**: It operates independently without additional libraries or frameworks, ensuring a lightweight and streamlined integration.
12
+ - **Queue Management**: Offers sophisticated control over AJAX requests. Users can execute requests in parallel or manage dependent requests in a specific sequence, enhancing the flexibility in handling multiple server interactions.
13
+ - **OnComplete Event Handling**: Facilitates handling multiple AJAX requests by allowing developers to define actions upon completing these requests. This feature is handy when subsequent processes depend on completing prior requests.
14
+ - **Data Submission Customization**: The `onbeforesend` callback allows developers to modify or format the data before it is sent, offering greater control over the submission process.
15
+
16
+
17
+ ### Basic request example
18
+
19
+ {.ignore}
20
+ ```html
21
+ <html>
22
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
23
+ <script>
24
+ jSuites.ajax({
25
+ url: url,
26
+ method: 'POST',
27
+ dataType: 'json',
28
+ data: { data: JSON.stringify(data) },
29
+ beforeSend: function(xhr) {
30
+ if (token) {
31
+ xhr.setRequestHeader("Authorization", "Bearer " + token);
32
+ }
33
+ },
34
+ success: function(result) {
35
+ // Result
36
+ jSuites.notification(result);
37
+ },
38
+ error: function() {
39
+ alert('disconected');
40
+ }
41
+ });
42
+ </script>
43
+ </html>
44
+ ```
45
+ ```jsx
46
+ import jSuites from "jsuites"
47
+
48
+ jSuites.ajax({
49
+ url: url,
50
+ method: 'POST',
51
+ dataType: 'json',
52
+ data: { data: JSON.stringify(data) },
53
+ beforeSend: function(xhr) {
54
+ if (token) {
55
+ xhr.setRequestHeader("Authorization", "Bearer " + token);
56
+ }
57
+ },
58
+ success: function(result) {
59
+ // Result
60
+ jSuites.notification(result);
61
+ },
62
+ error: function() {
63
+ alert('disconected');
64
+ }
65
+ });
66
+ ```
67
+ ```vue
68
+ <script>
69
+ import jSuites from "jsuites"
70
+
71
+ jSuites.ajax({
72
+ url: url,
73
+ method: 'POST',
74
+ dataType: 'json',
75
+ data: { data: JSON.stringify(data) },
76
+ beforeSend: function(xhr) {
77
+ if (token) {
78
+ xhr.setRequestHeader("Authorization", "Bearer " + token);
79
+ }
80
+ },
81
+ success: function(result) {
82
+ // Result
83
+ jSuites.notification(result);
84
+ },
85
+ error: function() {
86
+ alert('disconected');
87
+ }
88
+ });
89
+ </script>
90
+ ```
91
+
92
+ ## Features
93
+
94
+ ### BeforeSend Event
95
+
96
+ The jSuites.ajax component provides a robust feature as a `beforesend` event. This event allows developers to intercept and modify the AJAX request before sending it to the server. An everyday use case for this functionality is adding an authorization bearer token to the request, which is essential for handling secure communications and maintaining user authentication in web applications.
97
+
98
+ Here's how you can utilize the `beforesend` event to add an authorization bearer:
99
+
100
+ {.ignore}
101
+ ```html
102
+ <html>
103
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
104
+ <script>
105
+ jSuites.ajax({
106
+ url: url,
107
+ method: 'POST',
108
+ dataType: 'json',
109
+ data: { data: JSON.stringify(data) },
110
+ beforeSend: function(xhr) {
111
+ if (token) {
112
+ xhr.setRequestHeader("Authorization", "Bearer " + token);
113
+ }
114
+ },
115
+ success: function(result) {
116
+ // Result
117
+ jSuites.notification(result);
118
+ },
119
+ error: function() {
120
+ alert('disconected');
121
+ }
122
+ });
123
+ </script>
124
+ </html>
125
+ ```
126
+ ```jsx
127
+ import jSuites from "jsuites"
128
+
129
+ jSuites.ajax({
130
+ url: url,
131
+ method: 'POST',
132
+ dataType: 'json',
133
+ data: { data: JSON.stringify(data) },
134
+ beforeSend: function(xhr) {
135
+ if (token) {
136
+ xhr.setRequestHeader("Authorization", "Bearer " + token);
137
+ }
138
+ },
139
+ success: function(result) {
140
+ // Result
141
+ jSuites.notification(result);
142
+ },
143
+ error: function() {
144
+ alert('disconected');
145
+ }
146
+ });
147
+ ```
148
+ ```vue
149
+ <script>
150
+ import jSuites from "jsuites"
151
+
152
+ jSuites.ajax({
153
+ url: url,
154
+ method: 'POST',
155
+ dataType: 'json',
156
+ data: { data: JSON.stringify(data) },
157
+ beforeSend: function(xhr) {
158
+ if (token) {
159
+ xhr.setRequestHeader("Authorization", "Bearer " + token);
160
+ }
161
+ },
162
+ success: function(result) {
163
+ // Result
164
+ jSuites.notification(result);
165
+ },
166
+ error: function() {
167
+ alert('disconected');
168
+ }
169
+ });
170
+ </script>
171
+ ```
172
+
173
+ ### Request Queue
174
+
175
+ The `jSuites.ajax` component introduces a queue management system for handling AJAX requests. By setting the queue property to true, the component ensures that a new AJAX request is initiated after completing the previous one. This sequential handling of requests is beneficial in scenarios where the execution order is crucial, and each request's response might impact the subsequent requests.
176
+
177
+ #### Functionality:
178
+
179
+ - **Sequential Processing:** When the queue property is enabled, AJAX requests are handled one after the other in the order they were initiated. This sequential processing prevents the overlapping of requests, which is essential in situations where each request depends on the response of the previous one.
180
+ - **Avoiding Race Conditions**: By ensuring that only one request is processed at a time, the jSuites.ajax queue system effectively prevents race conditions. That is vital for maintaining data integrity, especially when dealing with CRUD operations in a database.
181
+ - **Simplified Error Handling**: With queued requests, error handling becomes more manageable as the response to each request can be dealt with individually before moving on to the next.
182
+
183
+ <br>
184
+
185
+ ![Ajax request queue](img/ajax-waterfall.png)
186
+
187
+ {.ignore}
188
+ ```html
189
+ <html>
190
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
191
+ <script>
192
+ let url = 'your-endpoint';
193
+ let data = {};
194
+ for (let i = 0; i < 10; i++) {
195
+ jSuites.ajax({
196
+ url: url,
197
+ method: 'POST',
198
+ dataType: 'json',
199
+ queue: true,
200
+ data: { data: JSON.stringify(data) },
201
+ success: function(result) {
202
+ }
203
+ });
204
+ }
205
+ </script>
206
+ </html>
207
+ ```
208
+ ```jsx
209
+ import jSuites from "jsuites"
210
+
211
+ let url = 'your-endpoint';
212
+ let data = {};
213
+ for (let i = 0; i < 10; i++) {
214
+ jSuites.ajax({
215
+ url: url,
216
+ method: 'POST',
217
+ dataType: 'json',
218
+ queue: true,
219
+ data: { data: JSON.stringify(data) },
220
+ success: function(result) {
221
+ }
222
+ });
223
+ }
224
+ ```
225
+ ```vue
226
+ <script>
227
+ import jSuites from "jsuites"
228
+
229
+ let url = 'your-endpoint';
230
+ let data = {};
231
+ for (let i = 0; i < 10; i++) {
232
+ jSuites.ajax({
233
+ url: url,
234
+ method: 'POST',
235
+ dataType: 'json',
236
+ queue: true,
237
+ data: { data: JSON.stringify(data) },
238
+ success: function(result) {
239
+ }
240
+ });
241
+ }
242
+ </script>
243
+ ```
244
+
245
+
246
+ ### Multiple Requests with OnComplete
247
+
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
+
250
+ {.ignore}
251
+ ```html
252
+ <html>
253
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
254
+ <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
255
+ <script>
256
+ let url = '...'
257
+ let requests = [];
258
+ for (let i = 0; i < 10; i++) {
259
+ requests.push({
260
+ url: url,
261
+ method: 'POST',
262
+ dataType: 'json',
263
+ success: function() {
264
+ }
265
+ });
266
+ }
267
+
268
+ jSuites.ajax(requests, function(result) {
269
+ // All requests have been completed
270
+ jSuites.notification(result);
271
+ });
272
+ </script>
273
+ </html>
274
+ ```
275
+ ```jsx
276
+ import jSuites from "jsuites"
277
+
278
+ let url = '...'
279
+ let requests = [];
280
+ for (let i = 0; i < 10; i++) {
281
+ requests.push({
282
+ url: url,
283
+ method: 'POST',
284
+ dataType: 'json',
285
+ success: function() {
286
+ }
287
+ });
288
+ }
289
+
290
+ jSuites.ajax(requests, function(result) {
291
+ // All requests have been completed
292
+ jSuites.notification(result);
293
+ });
294
+ ```
295
+ ```vue
296
+ <script>
297
+ import jSuites from "jsuites"
298
+
299
+ let url = '...'
300
+ let requests = [];
301
+ for (let i = 0; i < 10; i++) {
302
+ requests.push({
303
+ url: url,
304
+ method: 'POST',
305
+ dataType: 'json',
306
+ success: function() {
307
+ }
308
+ });
309
+ }
310
+
311
+ jSuites.ajax(requests, function(result) {
312
+ // All requests have been completed
313
+ jSuites.notification(result);
314
+ });
315
+ </script>
316
+ ```
317
+
package/content/docs/animations.md ADDED
@@ -0,0 +1,111 @@
1
+ title: JavaScript Basic Animations
2
+ keywords: JavaScript animations, JS animations, slide in, slide out, slide left, slide right, slide bottom, slide top, fade in, fade out
3
+ description: This section introduces a collection of basic JavaScript animations, including slide left, slide right, slide bottom, slide top, fade in, and fade out. These animations are part of the jSuites.animation library, designed to enrich user interfaces with smooth and visually appealing effects.
4
+
5
+ # Animations
6
+
7
+ The `jSuites.animation` library incorporates several straightforward animations to enhance the user experience. These include:
8
+
9
+ - fadeIn
10
+ - fadeOut
11
+ - slideLeft
12
+ - slideRight
13
+ - slideTop
14
+ - slideBottom
15
+
16
+ ## Example
17
+
18
+ ### Fade In and Fade Out Animations
19
+
20
+ Below is an example demonstrating how to implement fadeIn and fadeOut animations:
21
+
22
+ ```html
23
+ <html>
24
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
25
+ <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
26
+
27
+ <div id='animation-content' style="padding: 20px">Content is here</div>
28
+ <input type="button" id="animation-fade-in-and-out" value="Click to toggle the content" />
29
+
30
+ <script>
31
+ document.getElementById('animation-fade-in-and-out').onclick = function() {
32
+ var button = document.getElementById('animation-content');
33
+ if (button.style.display == 'none') {
34
+ jSuites.animation.fadeIn(button, function() {
35
+ // Callback to do something when animation is finished
36
+ });
37
+ } else {
38
+ jSuites.animation.fadeOut(button, function() {
39
+ // Callback to do something when animation is finished
40
+ });
41
+ }
42
+ }
43
+ </script>
44
+ </html>
45
+ ```
46
+ ```jsx
47
+ import jSuites from "jsuites"
48
+ import { useRef } from 'react'
49
+ import 'jsuites/dist/jsuites.css'
50
+
51
+
52
+ function App() {
53
+ const content = useRef(null);
54
+
55
+ const handleToggleAnimation = function () {
56
+ let button = content.current
57
+
58
+ if (button.style.display == 'none') {
59
+ jSuites.animation.fadeIn(button, function () {
60
+ // Callback to do something when animation is finished
61
+ });
62
+ } else {
63
+ jSuites.animation.fadeOut(button, function () {
64
+ // Callback to do something when animation is finished
65
+ });
66
+ }
67
+ }
68
+
69
+ return (
70
+ <div className="App">
71
+ <div ref={content} style={{ padding: "20px" }}>Content is here</div>
72
+ <input type="button" onClick={handleToggleAnimation} value="Click to toggle the content" />
73
+ </div>
74
+ );
75
+ }
76
+
77
+ export default App;
78
+ ```
79
+ ```vue
80
+ <template>
81
+ <div ref="content" style="padding: 20px">Content is here</div>
82
+ <input type="button" @click="handleToggleAnimation" value="Click to toggle the content" />
83
+ </template>
84
+
85
+ <script>
86
+ import jSuites from "jsuites";
87
+ import "jsuites/dist/jsuites.css"
88
+
89
+ export default {
90
+ name: "App",
91
+ methods: {
92
+ handleToggleAnimation: function() {
93
+ let button = this.$refs.content
94
+
95
+ if (button.style.display == "none") {
96
+ jSuites.animation.fadeIn(button, function () {
97
+ // Callback to do something when animation is finished
98
+ });
99
+ } else {
100
+ jSuites.animation.fadeOut(button, function () {
101
+ // Callback to do something when animation is finished
102
+ });
103
+ }
104
+ }
105
+ }
106
+ };
107
+ </script>
108
+ ```
109
+
110
+
111
+
package/content/docs/color-picker/color-palettes.md ADDED
@@ -0,0 +1,43 @@
1
+ title: Javascript color picker palettes
2
+ keywords: Javascript, color picker, color picker, examples, customize the colors, color palettes.
3
+ description: How to use the native Jsuites component color palettes in the color picker plugin.
4
+
5
+ * [JavaScript Color Picker](/docs/color-picker)
6
+
7
+ Color palettes
8
+ ==============
9
+
10
+ We created a collection of pre-defined palettes can be used in your javascript color picker
11
+
12
+ {.all}
13
+ ```html
14
+ <html>
15
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
16
+ <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
17
+
18
+ <input id="color-picker">
19
+
20
+ <script>
21
+ jSuites.color(document.getElementById('color-picker'), {
22
+ palette: jSuites.palette('fire')
23
+ });
24
+ </script>
25
+ </html>
26
+ ```
27
+
28
+
29
+
30
+ Generated using: [Coolors](https://coolors.co/)
31
+
32
+
33
+
34
+
35
+ Available Palette
36
+ -----------------
37
+
38
+ We are going to create more options very soon! But if you wish to contribute [please edit this file on github](https://github.com/jsuites/jsuites/blob/master/src/palette.js).
39
+
40
+ | Palette | Colors |
41
+ |----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
42
+ | material | [ "ffebee","fce4ec","f3e5f5","e8eaf6","e3f2fd","e0f7fa","e0f2f1","e8f5e9","f1f8e9","f9fbe7","fffde7","fff8e1","fff3e0","fbe9e7","efebe9","fafafa","eceff1" ],<br>[ "ffcdd2","f8bbd0","e1bee7","c5cae9","bbdefb","b2ebf2","b2dfdb","c8e6c9","dcedc8","f0f4c3","fff9c4","ffecb3","ffe0b2","ffccbc","d7ccc8","f5f5f5","cfd8dc" ],<br>[ "ef9a9a","f48fb1","ce93d8","9fa8da","90caf9","80deea","80cbc4","a5d6a7","c5e1a5","e6ee9c","fff59d","ffe082","ffcc80","ffab91","bcaaa4","eeeeee","b0bec5" ],<br>[ "e57373","f06292","ba68c8","7986cb","64b5f6","4dd0e1","4db6ac","81c784","aed581","dce775","fff176","ffd54f","ffb74d","ff8a65","a1887f","e0e0e0","90a4ae" ],<br>[ "ef5350","ec407a","ab47bc","5c6bc0","42a5f5","26c6da","26a69a","66bb6a","9ccc65","d4e157","ffee58","ffca28","ffa726","ff7043","8d6e63","bdbdbd","78909c" ],<br>[ "f44336","e91e63","9c27b0","3f51b5","2196f3","00bcd4","009688","4caf50","8bc34a","cddc39","ffeb3b","ffc107","ff9800","ff5722","795548","9e9e9e","607d8b" ],<br>[ "e53935","d81b60","8e24aa","3949ab","1e88e5","00acc1","00897b","43a047","7cb342","c0ca33","fdd835","ffb300","fb8c00","f4511e","6d4c41","757575","546e7a" ],<br>[ "d32f2f","c2185b","7b1fa2","303f9f","1976d2","0097a7","00796b","388e3c","689f38","afb42b","fbc02d","ffa000","f57c00","e64a19","5d4037","616161","455a64" ],<br>[ "c62828","ad1457","6a1b9a","283593","1565c0","00838f","00695c","2e7d32","558b2f","9e9d24","f9a825","ff8f00","ef6c00","d84315","4e342e","424242","37474f" ],<br>[ "b71c1c","880e4f","4a148c","1a237e","0d47a1","006064","004d40","1b5e20","33691e","827717","f57f17","ff6f00","e65100","bf360c","3e2723","212121","263238" ], |
43
+ | fire | ["0b1a6d","840f38","b60718","de030b","ff0c0c","fd491c","fc7521","faa331","fbb535","ffc73a"],<br>["071147","5f0b28","930513","be0309","ef0000","fa3403","fb670b","f9991b","faad1e","ffc123"],<br>["03071e","370617","6a040f","9d0208","d00000","dc2f02","e85d04","f48c06","faa307","ffba08"],<br>["020619","320615","61040d","8c0207","bc0000","c82a02","d05203","db7f06","e19405","efab00"],<br>["020515","2d0513","58040c","7f0206","aa0000","b62602","b94903","c57205","ca8504","d89b00"], |
package/content/docs/color-picker/events.md ADDED
@@ -0,0 +1,46 @@
1
+ title: JavaScript Color Picker Events
2
+ keywords: Javascript, color picker, color picker, examples, events
3
+ description: Handling javascript events in your color picker plugin.
4
+
5
+ * [JavaScript Color Picker](/docs/color-picker)
6
+
7
+ Javascript Color Picker Events
8
+ ==============================
9
+
10
+ ## Events
11
+
12
+ | Method | Description |
13
+ |----------|-------------------------------------------------------------------------------------------|
14
+ | onchange | Method executed when a value is changed. <br>(HTMLElement element, String color) => void |
15
+ | onclose | Method executed when the color picker is closed. <br>(HTMLElement element) => void |
16
+ | onopen | Method executed when the color picker is opened. <br>(HTMLElement element) => void |
17
+
18
+ ## Example
19
+
20
+ Create actions when the color is selected and the picker is opened or closed.
21
+
22
+ ```html
23
+ <html>
24
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
25
+ <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
26
+
27
+ <input id="color-picker" />
28
+
29
+ <script>
30
+ jSuites.color(document.getElementById('color-picker'), {
31
+ onchange: function(el, val) {
32
+ el.style.color = val;
33
+ },
34
+ onopen: function(el) {
35
+ console.log('Opened');
36
+ },
37
+ onclose: function(el) {
38
+ console.log('Closed');
39
+ },
40
+ placeholder: 'COLOR',
41
+ closeOnChange: true,
42
+ });
43
+ </script>
44
+ </html>
45
+ ```
46
+
package/content/docs/color-picker/mobile.md ADDED
@@ -0,0 +1,23 @@
1
+ title: Responsive JavaScript Color Picker
2
+ keywords: Javascript, color picker, color picker, examples, customize the colors
3
+ description: How to customize the colors on the jSuites javascript color plugin.
4
+
5
+ * [JavaScript Color Picker](/docs/color-picker)
6
+
7
+ Responsive JavaScript color Picker
8
+ =================================
9
+
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
+
12
+ ```html
13
+ <html>
14
+ <script src="https://jsuites.net/v5/jsuites.js"></script>
15
+ <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
16
+ <input id='color-picker' />
17
+ <script>
18
+ jSuites.color(document.getElementById('color-picker'), {
19
+ fullscreen: true,
20
+ });
21
+ </script>
22
+ </html>
23
+ ```