@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.
- package/CHANGELOG.mdx +76 -48
- package/buttons/ConfirmButton.svelte +11 -3
- package/buttons/DeleteButton.svelte +2 -3
- package/buttons/ProcessButton.svelte +3 -4
- package/buttons/SubmitButton.svelte +11 -3
- package/charts/AreaChart.svelte +1 -1
- package/charts/BarChart.svelte +1 -1
- package/charts/Chart.svelte +1 -0
- package/charts/DonutChart.svelte +1 -1
- package/charts/LineChart.svelte +1 -1
- package/charts/MixedChart.svelte +1 -1
- package/charts/PieChart.svelte +1 -1
- package/charts/RadialChart.svelte +1 -1
- package/charts/utils.js +1 -0
- package/controls/Checkbox.svelte +10 -4
- package/controls/FileUpload.svelte +14 -8
- package/controls/NumberInput.svelte +19 -10
- package/controls/Radio.svelte +8 -2
- package/controls/RangeSlider.svelte +8 -2
- package/controls/Toggle.svelte +9 -2
- package/controls/ToggleButtons.svelte +10 -3
- package/datagrid/DataSearch/DataSearch.svelte +1 -1
- package/datagrid/GridView/GridCell.svelte +3 -0
- package/datagrid/GridView/GridRow.svelte +15 -0
- package/datagrid/GridView/GridView.svelte +21 -3
- package/datagrid/Pagination/Pagination.svelte +3 -3
- package/datagrid/TileView/TileView.svelte +46 -5
- package/datagrid/TileView/TileViewItem.svelte +4 -0
- package/form/index.js +160 -0
- package/forms/AutoComplete.svelte +126 -76
- package/forms/Datepicker.svelte +22 -5
- package/forms/PasswordValidator/PasswordValidator.svelte +8 -8
- package/forms/PasswordValidator/validatePassword.js +13 -2
- package/forms/SearchInput.svelte +180 -0
- package/forms/Timepicker.svelte +69 -4
- package/forms/actions.js +21 -15
- package/forms/colorpicker/Colorpicker.js +28 -3
- package/forms/colorpicker/Colorpicker.svelte +2 -2
- package/forms/select/MultiSelect.svelte +103 -46
- package/forms/select/SearchableSelect.svelte +6 -5
- package/helpers/CardModal.svelte +2 -1
- package/helpers/ClipboardCopier.svelte +4 -1
- package/helpers/Dialog/Dialog.svelte +13 -8
- package/helpers/Dialog/index.js +6 -0
- package/helpers/Divider.svelte +2 -2
- package/helpers/FloatingUI/Floatie.svelte +6 -6
- package/helpers/FloatingUI/index.js +2 -1
- package/helpers/Icon.svelte +25 -9
- package/helpers/Loader.svelte +10 -3
- package/helpers/Message.svelte +2 -2
- package/helpers/Modal.svelte +2 -1
- package/helpers/Notification.svelte +1 -1
- package/helpers/Popover.svelte +4 -4
- package/helpers/ScrollableList.svelte +12 -8
- package/helpers/Skeleton.svelte +4 -1
- package/helpers/Timeline/Timeline.svelte +1 -1
- package/helpers/Timeline/TimelineItem.svelte +5 -5
- package/helpers/Tooltip.js +1 -1
- package/index.js +10 -4
- package/internal/fuzzy.js +116 -0
- package/internal/index.js +27 -0
- package/internal/scrollIntoActiveElement.js +22 -0
- package/keyboard/index.js +94 -0
- package/package.json +6 -4
- package/{utils/resizeObserver.js → resizeObserver/index.js} +0 -0
- package/search/index.js +52 -0
- package/settings.js +1 -1
- package/sliding-panes/SlidingPane.svelte +1 -4
- package/styles/AutoComplete.scss +2 -1
- package/styles/Datepicker.scss +1 -1
- package/styles/Grid.scss +14 -0
- package/styles/Select.scss +2 -1
- package/transitions/components/Scale.svelte +1 -0
- package/transitions/components/getEasing.js +18 -5
- package/types/ambient.d.ts +16 -0
- package/types/index.d.ts +46 -0
- package/types/type-defs/index.ts +14 -0
- package/utils/index.js +110 -9
- package/utils/fuzzysearch.js +0 -20
- package/utils/keyboard-events.js +0 -32
package/utils/index.js
CHANGED
|
@@ -1,32 +1,64 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
56
|
-
|
|
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
|
-
|
|
60
|
-
|
|
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
|
}
|
package/utils/fuzzysearch.js
DELETED
|
@@ -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
|
-
}
|
package/utils/keyboard-events.js
DELETED
|
@@ -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
|
-
}
|