fix #202, fix #204;

- rename utils in docs to be lowercase (same as their actual names)

.github/workflows/node.js.yml

@@ -16,15 +16,15 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
-    # - run: npm run build --if-present
+#    - run: npm run dist --if-present
     - run: npm test

docs-src/components/utils/functions/align-item.svelte

@@ -1,4 +1,4 @@
-<Util id="AlignItem" name="alignItem(config)" {example} {api}>
+<Util id="alignItem" name="alignItem(config)" {example} {api}>
 	<p>Aligns an element to another element,
 		ensuring that the aligned element remains within the viewport.
 	</p>

docs-src/components/utils/functions/animate.svelte

@@ -1,4 +1,4 @@
-<Util id="Animate" name="animate(element, from, to, options?)" {example} {api}>
+<Util id="animate" name="animate(element, from, to, options?)" {example} {api}>
 	<p>Animates an element from one state to another. Shortcut & wrapper for the native javascript animation.</p>
 	<p>Returns a promise which resolves when the animation finishes.</p>
 </Util>

docs-src/components/utils/functions/blink.svelte

@@ -1,4 +1,4 @@
-<Util id="Blink" name="blink(element, duration = 160)" {example}>
+<Util id="blink" name="blink(element, duration = 160)" {example}>
 	<p>Animates an element by changing its opacity from 0.5 to 1.</p>
 	<ul>
 		<li><em>element</em> - HTMLElement to animate

docs-src/components/utils/functions/debounce.svelte

@@ -1,4 +1,4 @@
-<Util id="Debounce" name="debounce(fn, timeout = 300)" {example}>
+<Util id="debounce" name="debounce(fn, timeout = 300)" {example}>
 	<p>The "debounced" function will only be called after it has not been called for <em>timeout</em> milliseconds.</p>
 	<ul>
 		<li><em>fn</em> - function to debounce.

docs-src/components/utils/functions/empty.svelte

@@ -1,4 +1,4 @@
-<Util id="Empty" name="empty(value)" {example}>
+<Util id="empty" name="empty(value)" {example}>
 	<p>Similar to PHP's <em>empty</em> - returns true if a value is empty.</p>
 	<ul>
 		<li><em>value</em> - any data type.

docs-src/components/utils/functions/format-date.svelte

@@ -1,4 +1,4 @@
-<Util id="FormatDate" name="formatDate(date)" {example}>
+<Util id="formatDate" name="formatDate(date)" {example}>
 	<p>Converts date to a string in the format: <em>YYYY-MM-DD HH:mm</em>.</p>
 </Util>
 

docs-src/components/utils/functions/fuzzy.svelte

@@ -1,4 +1,4 @@
-<Util id="Fuzzy" name="fuzzy(haystack = '', needle = '')" {example}>
+<Util id="fuzzy" name="fuzzy(haystack = '', needle = '')" {example}>
 	<p>Fuzzy finds if <em>haystack</em> contains characters from the <em>needle</em> in the same order.</p>
 	<ul>
 		<li><em>haystack</em> - a string to be searched in.

docs-src/components/utils/functions/get-mouse-x.svelte.svelte

@@ -1,4 +1,4 @@
-<Util id="GetMouseX" name="getMouseX(event)" {example}>
+<Util id="getMouseX" name="getMouseX(event)" {example}>
 	<p>Returns the mouse X position. Event is standardised across platforms (touch & pointer)</p>
 </Util>
 

docs-src/components/utils/functions/get-mouse-xy.svelte.svelte

@@ -1,4 +1,4 @@
-<Util id="GetMouseXY" name="getMouseXY(event)" {example}>
+<Util id="getMouseXY" name="getMouseXY(event)" {example}>
 	<p>Returns the mouse XY position (as an array: [x, y]). Event is standardised across platforms (touch & pointer)</p>
 </Util>
 

docs-src/components/utils/functions/get-mouse-y.svelte.svelte

@@ -1,4 +1,4 @@
-<Util id="GetMouseY" name="getMouseY(event)" {example}>
+<Util id="getMouseY" name="getMouseY(event)" {example}>
 	<p>Returns the mouse Y position. Event is standardised across platforms (touch & pointer)</p>
 </Util>
 

docs-src/components/utils/functions/guid.svelte

@@ -1,4 +1,4 @@
-<Util id="Guid" name="guid()" {example}>
+<Util id="guid" name="guid()" {example}>
 	<p>Generates a globally unique identifier.</p>
 </Util>
 

docs-src/components/utils/functions/index.js

@@ -1,19 +1,19 @@
-export { default as AlignItem } from './align-item.svelte';
-export { default as Animate } from './animate.svelte';
-export { default as Blink } from './blink.svelte';
-export { default as Debounce } from './debounce.svelte';
-export { default as DeepCopy } from './deep-copy.svelte';
-export { default as Empty } from './empty.svelte';
-export { default as FormatDate } from './format-date.svelte';
-export { default as Fuzzy } from './fuzzy.svelte';
-export { default as GetMouseX } from './get-mouse-x.svelte.svelte';
-export { default as GetMouseXY } from './get-mouse-xy.svelte.svelte';
-export { default as GetMouseY } from './get-mouse-y.svelte.svelte';
-export { default as Guid } from './guid.svelte';
-export { default as IsInScrollable } from './is-in-scrollable.svelte';
-export { default as IsMobile } from './is-mobile.svelte';
-export { default as IsColorDark } from './is-color-dark.svelte';
-export { default as Pluck } from './pluck.svelte';
-export { default as RoundAmount } from './round-amount.svelte';
-export { default as Throttle } from './throttle.svelte';
-export { default as TimeAgo } from './time-ago.svelte';
+export { default as alignItem } from './align-item.svelte';
+export { default as animate } from './animate.svelte';
+export { default as blink } from './blink.svelte';
+export { default as debounce } from './debounce.svelte';
+export { default as empty } from './empty.svelte';
+export { default as isset } from './isset.svelte';
+export { default as formatDate } from './format-date.svelte';
+export { default as fuzzy } from './fuzzy.svelte';
+export { default as getMouseX } from './get-mouse-x.svelte.svelte';
+export { default as getMouseXY } from './get-mouse-xy.svelte.svelte';
+export { default as getMouseY } from './get-mouse-y.svelte.svelte';
+export { default as guid } from './guid.svelte';
+export { default as isInScrollable } from './is-in-scrollable.svelte';
+export { default as isMobile } from './is-mobile.svelte';
+export { default as isColorDark } from './is-color-dark.svelte';
+export { default as pluck } from './pluck.svelte';
+export { default as roundAmount } from './round-amount.svelte';
+export { default as throttle } from './throttle.svelte';
+export { default as timeAgo } from './time-ago.svelte';

docs-src/components/utils/functions/is-color-dark.svelte

@@ -1,4 +1,4 @@
-<Util id="IsColorDark" name="isColorDark(hex)" {example}>
+<Util id="isColorDark" name="isColorDark(hex)" {example}>
 	<p>Checks if a colour is dark or light (so that e.g. a text colour can have a better contrast against the background).</p>
 </Util>
 

docs-src/components/utils/functions/is-in-scrollable.svelte

@@ -1,4 +1,4 @@
-<Util id="IsInScrollable" name="isInScrollable(node)" {example}>
+<Util id="isInScrollable" name="isInScrollable(node)" {example}>
 	<p>Checks whether the given node is inside a scrollable element.</p>
 	<p>This function is useful when determining whether a swipe event should be allowed
 		to start on a given element.<br>

docs-src/components/utils/functions/is-mobile.svelte

@@ -1,4 +1,4 @@
-<Util id="IsMobile" name="isMobile()" {example}>
+<Util id="isMobile" name="isMobile()" {example}>
 	<p>Checks if the current platform is mobile.</p>
 </Util>
 

docs-src/components/utils/functions/isset.svelte

@@ -0,0 +1,20 @@
+<Util id="isset" name="isset()" {example}>
+	<p>Checks if a variable is <em>defined</em> and not <em>null</em>.</p>
+</Util>
+
+
+
+<script>
+import Util from '../Util.svelte';
+
+const example = `
+<script>
+	if (isset(a)) {
+		console.log('a is set');
+	} else {
+		console.log('a is not set');
+	}
+&lt;/script>
+`;
+
+</script>

docs-src/components/utils/functions/pluck.svelte

@@ -1,4 +1,4 @@
-<Util id="Pluck" name="pluck(object, props)" {example}>
+<Util id="pluck" name="pluck(object, props)" {example}>
 	<p>Creates a new object with only the plucked properties from the original object..</p>
 	<ul>
 		<li><em>object</em> - object to pluck from.

docs-src/components/utils/functions/round-amount.svelte

@@ -1,4 +1,4 @@
-<Util id="RoundAmount" name="roundAmount(value, precision = 2)" {example}>
+<Util id="roundAmount" name="roundAmount(value, precision = 2)" {example}>
 	<p>Rounds a number to 2 decimal places (by default).</p>
 </Util>
 

docs-src/components/utils/functions/throttle.svelte

@@ -1,4 +1,4 @@
-<Util id="Throttle" name="throttle(fn, timeout = 300)" {example}>
+<Util id="throttle" name="throttle(fn, timeout = 300)" {example}>
 	<p>The "throttled" function will only be called once every <em>timeout</em> milliseconds.</p>
 	<ul>
 		<li><em>fn</em> - function to debounce.

docs-src/components/utils/functions/time-ago.svelte

@@ -1,4 +1,4 @@
-<Util id="TimeAgo" name="timeAgo(date, now)" {example}>
+<Util id="timeAgo" name="timeAgo(date, now)" {example}>
 	<p>Converts date to a string describing how long time ago was the given date.</p>
 </Util>