@kws3/ui 1.9.1 → 2.0.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 (80) hide show
  1. package/CHANGELOG.mdx +76 -48
  2. package/buttons/ConfirmButton.svelte +11 -3
  3. package/buttons/DeleteButton.svelte +2 -3
  4. package/buttons/ProcessButton.svelte +3 -4
  5. package/buttons/SubmitButton.svelte +11 -3
  6. package/charts/AreaChart.svelte +1 -1
  7. package/charts/BarChart.svelte +1 -1
  8. package/charts/Chart.svelte +1 -0
  9. package/charts/DonutChart.svelte +1 -1
  10. package/charts/LineChart.svelte +1 -1
  11. package/charts/MixedChart.svelte +1 -1
  12. package/charts/PieChart.svelte +1 -1
  13. package/charts/RadialChart.svelte +1 -1
  14. package/charts/utils.js +1 -0
  15. package/controls/Checkbox.svelte +10 -4
  16. package/controls/FileUpload.svelte +14 -8
  17. package/controls/NumberInput.svelte +19 -10
  18. package/controls/Radio.svelte +8 -2
  19. package/controls/RangeSlider.svelte +8 -2
  20. package/controls/Toggle.svelte +9 -2
  21. package/controls/ToggleButtons.svelte +10 -3
  22. package/datagrid/DataSearch/DataSearch.svelte +1 -1
  23. package/datagrid/GridView/GridCell.svelte +3 -0
  24. package/datagrid/GridView/GridRow.svelte +15 -0
  25. package/datagrid/GridView/GridView.svelte +21 -3
  26. package/datagrid/Pagination/Pagination.svelte +3 -3
  27. package/datagrid/TileView/TileView.svelte +46 -5
  28. package/datagrid/TileView/TileViewItem.svelte +4 -0
  29. package/form/index.js +160 -0
  30. package/forms/AutoComplete.svelte +126 -76
  31. package/forms/Datepicker.svelte +22 -5
  32. package/forms/PasswordValidator/PasswordValidator.svelte +8 -8
  33. package/forms/PasswordValidator/validatePassword.js +13 -2
  34. package/forms/SearchInput.svelte +180 -0
  35. package/forms/Timepicker.svelte +69 -4
  36. package/forms/actions.js +21 -15
  37. package/forms/colorpicker/Colorpicker.js +28 -3
  38. package/forms/colorpicker/Colorpicker.svelte +2 -2
  39. package/forms/select/MultiSelect.svelte +103 -46
  40. package/forms/select/SearchableSelect.svelte +6 -5
  41. package/helpers/CardModal.svelte +2 -1
  42. package/helpers/ClipboardCopier.svelte +4 -1
  43. package/helpers/Dialog/Dialog.svelte +13 -8
  44. package/helpers/Dialog/index.js +6 -0
  45. package/helpers/Divider.svelte +2 -2
  46. package/helpers/FloatingUI/Floatie.svelte +6 -6
  47. package/helpers/FloatingUI/index.js +2 -1
  48. package/helpers/Icon.svelte +25 -9
  49. package/helpers/Loader.svelte +10 -3
  50. package/helpers/Message.svelte +2 -2
  51. package/helpers/Modal.svelte +2 -1
  52. package/helpers/Notification.svelte +1 -1
  53. package/helpers/Popover.svelte +4 -4
  54. package/helpers/ScrollableList.svelte +12 -8
  55. package/helpers/Skeleton.svelte +4 -1
  56. package/helpers/Timeline/Timeline.svelte +1 -1
  57. package/helpers/Timeline/TimelineItem.svelte +5 -5
  58. package/helpers/Tooltip.js +1 -1
  59. package/index.js +10 -4
  60. package/internal/fuzzy.js +116 -0
  61. package/internal/index.js +27 -0
  62. package/internal/scrollIntoActiveElement.js +22 -0
  63. package/keyboard/index.js +94 -0
  64. package/package.json +6 -4
  65. package/{utils/resizeObserver.js → resizeObserver/index.js} +0 -0
  66. package/search/index.js +52 -0
  67. package/settings.js +1 -1
  68. package/sliding-panes/SlidingPane.svelte +1 -4
  69. package/styles/AutoComplete.scss +2 -1
  70. package/styles/Datepicker.scss +1 -1
  71. package/styles/Grid.scss +14 -0
  72. package/styles/Select.scss +2 -1
  73. package/transitions/components/Scale.svelte +1 -0
  74. package/transitions/components/getEasing.js +18 -5
  75. package/types/ambient.d.ts +16 -0
  76. package/types/index.d.ts +46 -0
  77. package/types/type-defs/index.ts +14 -0
  78. package/utils/index.js +110 -9
  79. package/utils/fuzzysearch.js +0 -20
  80. package/utils/keyboard-events.js +0 -32
package/utils/index.js CHANGED
@@ -1,32 +1,64 @@
1
- export function truncate(str, len) {
1
+ /**
2
+ * Truncate a string.
3
+ * @param {string} [str=""] - String to truncate, Default: `""`
4
+ * @param {number} [len=0] - The number of characters to extract, Default: `""`
5
+ */
6
+ export function truncate(str = "", len = 0) {
2
7
  return str && str.length >= len + 3 ? str.substr(0, len) + "..." : str;
3
8
  }
4
9
 
5
- export function nl2br(input) {
10
+ /**
11
+ * Insert line breaks where newlines (\n) occur in the string.
12
+ * @param {string} [input=""] - String to be checked, Default: `""`
13
+ */
14
+ export function nl2br(input = "") {
6
15
  if (!input) {
7
16
  return "";
8
17
  }
9
- return (input + "").replace(/\n/g, "<br>");
18
+ let html = (input + ``).replace(/\n/g, "<br/>");
19
+ return html;
10
20
  }
11
21
 
22
+ /**
23
+ * Clone an Object.
24
+ * @param {object} [obj={}] - Object to be cloned, Default: `{}`
25
+ */
12
26
  export function cloneObject(obj) {
13
27
  return JSON.parse(JSON.stringify(obj));
14
28
  }
15
29
 
30
+ /**
31
+ * Request an animation before the next repaint.
32
+ * @param {function} [callback=function(){}] - callback function
33
+ */
16
34
  export var rAF =
17
35
  window.requestAnimationFrame ||
36
+ //@ts-ignore
18
37
  window.webkitRequestAnimationFrame ||
38
+ //@ts-ignore
19
39
  window.mozRequestAnimationFrame ||
40
+ //@ts-ignore
20
41
  window.oRequestAnimationFrame ||
42
+ //@ts-ignore
21
43
  window.msRequestAnimationFrame ||
22
44
  function (callback) {
23
45
  window.setTimeout(callback, 1000 / 60);
24
46
  };
25
47
 
26
- export function debounce(fn, threshold, isAsap) {
48
+ /**
49
+ * Returns a function, that, as long as it continues to be invoked, will not
50
+ * be triggered. The function will be called after it stops being called for
51
+ * `threshold` milliseconds.
52
+ * @param {function} [fn=function(){}] - The function that you want to execute after the debounce time
53
+ * @param {number} [threshold=100] - The amount of time to wait, Default: `100`
54
+ * @param {boolean} [isAsap=false] - flag to debounce early, Default: `false`
55
+ *
56
+ */
57
+ export function debounce(fn = function () {}, threshold, isAsap) {
27
58
  var timeout, result;
28
59
  function debounced() {
29
60
  var args = arguments,
61
+ //@ts-ignore
30
62
  context = this;
31
63
  function delayed() {
32
64
  if (!isAsap) {
@@ -48,14 +80,83 @@ export function debounce(fn, threshold, isAsap) {
48
80
  return debounced;
49
81
  }
50
82
 
51
- export function capitaliseFirstLetter(string) {
83
+ /**
84
+ * Capitalise First letter of string.
85
+ * @param {string} [string=""] - A string whose first letter is to be capitalised, Default: `""`
86
+ */
87
+ export function capitaliseFirstLetter(string = "") {
52
88
  return string.charAt(0).toUpperCase() + string.toLowerCase().slice(1);
53
89
  }
54
90
 
55
- export function isEnterKey(e) {
56
- return e.keyCode && e.keyCode === 13;
91
+ /**
92
+ * Returns Date Object.
93
+ * Makes mysql dates work in safari
94
+ * @param {string} [strDate=""] - Date String., Default: `""`
95
+ */
96
+ export function createDate(strDate) {
97
+ // eslint-disable-next-line @kws3/svelte3/no-date-string-arg
98
+ return strDate ? new Date(strDate.replace(/-/g, "/")) : null;
57
99
  }
58
100
 
59
- export function isEscKey(e) {
60
- return e.keyCode && e.keyCode === 27;
101
+ /**
102
+ * Returns currency format.
103
+ * @param {number} [n=''] - Number., Default: `""`
104
+ */
105
+ export function currency(n) {
106
+ var nn = Number(n);
107
+ return (isNaN(nn) ? 0 : nn).toFixed(2);
108
+ }
109
+
110
+ /**
111
+ * Converts date to ordinal.
112
+ * @param {number} [n=''] - Number., Default: `""`
113
+ */
114
+ export function dateToOrdinal(n) {
115
+ n = Number(n);
116
+ return (
117
+ n +
118
+ (n > 0
119
+ ? ["th", "st", "nd", "rd"][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10]
120
+ : "")
121
+ );
122
+ }
123
+
124
+ /**
125
+ * Returns a random integer between min (inclusive) and max (inclusive).
126
+ * The value is no lower than min (or the next integer greater than min
127
+ * if min isn't an integer) and no greater than max (or the next integer
128
+ * lower than max if max isn't an integer).
129
+ * @param {number} [min] - Minimum Number.
130
+ * @param {number} [max] - Maximum Number.
131
+ */
132
+ export function randomIntegerFromInterval(min = 0, max = Infinity) {
133
+ min = Math.ceil(min);
134
+ max = Math.floor(max);
135
+ return Math.floor(Math.random() * (max - min + 1)) + min;
136
+ }
137
+
138
+ /**
139
+ * Returns random percentage.
140
+ * @param {number} [min=1] - Minimum Number, Default: `1`
141
+ * @param {number} [max=100] - Maximum Number, Default: `100`
142
+ */
143
+ export function randomPercent(min = 1, max = 100) {
144
+ return randomIntegerFromInterval(min, max) + "%";
145
+ }
146
+
147
+ /**
148
+ * Downloads file.
149
+ * @param {Object} [data={}] - File data.
150
+ * @param {string} [fileName=''] - File Name.
151
+ */
152
+ export function fileDownloader(data, fileName = "file_name") {
153
+ let a = document.createElement("a");
154
+ document.body.appendChild(a);
155
+ a.setAttribute("style", "display: none");
156
+ let blob = new Blob([data], { type: "octet/stream" }),
157
+ url = window.URL.createObjectURL(blob);
158
+ a.href = url;
159
+ a.download = fileName;
160
+ a.click();
161
+ window.URL.revokeObjectURL(url);
61
162
  }
@@ -1,20 +0,0 @@
1
- export default function fuzzysearch(needle, haystack) {
2
- var tlen = haystack.length;
3
- var qlen = needle.length;
4
- if (qlen > tlen) {
5
- return false;
6
- }
7
- if (qlen === tlen) {
8
- return needle === haystack;
9
- }
10
- outer: for (var i = 0, j = 0; i < qlen; i++) {
11
- var nch = needle.charCodeAt(i);
12
- while (j < tlen) {
13
- if (haystack.charCodeAt(j++) === nch) {
14
- continue outer;
15
- }
16
- }
17
- return false;
18
- }
19
- return true;
20
- }
@@ -1,32 +0,0 @@
1
- let events = [
2
- {name: 'enter', code: 13},
3
- {name: 'tab', code: 9},
4
- {name: 'escape', code: 27},
5
- {name: 'space', code: 32},
6
- {name: 'leftarrow', code: 37},
7
- {name: 'rightarrow', code: 39},
8
- {name: 'downarrow', code: 40},
9
- {name: 'uparrow', code: 38},
10
- {name: 'backspace', code: 8},
11
- {name: 'del', code: 46},
12
- ];
13
-
14
- export function keyboardEvents(node) {
15
- function keydownHandler(event) {
16
- events.forEach(({name, code}) => {
17
- let which = event.which || event.keyCode;
18
- if (which === code) {
19
- node.dispatchEvent(
20
- new CustomEvent(name)
21
- );
22
- }
23
- });
24
- }
25
- node.addEventListener('keydown', keydownHandler, false);
26
-
27
- return {
28
- destroy() {
29
- node.removeEventListener('keydown', keydownHandler, false);
30
- }
31
- };
32
- }