@enki-tek/fms-web-components 0.1.52 → 0.1.54
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/components/Card/Card.scss +1 -0
- package/components/Card/Card.svelte +1 -0
- package/components/EnkiTable/EnkiTable.svelte +1 -1
- package/components/EnkiTable/Table.scss +1 -1
- package/components/EnkiTable/TableBody.svelte +1 -1
- package/components/EnkiTable/TableCell.svelte +1 -1
- package/components/EnkiTable/TableHead.svelte +1 -1
- package/components/EnkiTable/TableHeadCell.svelte +1 -1
- package/components/EnkiTable/TableRow.svelte +1 -1
- package/components/WidgetCard/WidgetCard.svelte +25 -1
- package/components/WidgetCard/WidgetCard.svelte.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
<script>
|
|
2
|
+
import { onDestroy, onMount } from 'svelte';
|
|
2
3
|
import { Col, Row } from 'sveltestrap';
|
|
3
4
|
export let title;
|
|
4
5
|
export let resizable = false;
|
|
5
6
|
export let widthOnly = true;
|
|
6
7
|
export let resizeQuotient = 2;
|
|
7
8
|
export let cardLength = 3;
|
|
9
|
+
export let minMaximizebleWidth = 992;
|
|
8
10
|
let maximized = false;
|
|
9
11
|
let element = null;
|
|
12
|
+
let isMobileDevice = false;
|
|
10
13
|
const toggleMaximize = () => {
|
|
11
14
|
maximized = !maximized;
|
|
12
15
|
if (maximized) {
|
|
@@ -26,6 +29,24 @@
|
|
|
26
29
|
}
|
|
27
30
|
return `col-md-12 col-sm-12 col-lg-${cardLength} col-xl-${cardLength}`;
|
|
28
31
|
};
|
|
32
|
+
|
|
33
|
+
const isMobile = () => {
|
|
34
|
+
return window.innerWidth >= minMaximizebleWidth; // Example threshold for mobile (you can adjust this value)
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
const handleResize = () => {
|
|
38
|
+
isMobileDevice = isMobile();
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
onMount(() => {
|
|
42
|
+
isMobileDevice = isMobile();
|
|
43
|
+
|
|
44
|
+
window.addEventListener('resize', handleResize);
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
onDestroy(() => {
|
|
48
|
+
window.removeEventListener('resize', handleResize);
|
|
49
|
+
});
|
|
29
50
|
</script>
|
|
30
51
|
|
|
31
52
|
{#key cardLength}
|
|
@@ -36,7 +57,7 @@
|
|
|
36
57
|
<Col md="10">
|
|
37
58
|
<div {title} class="text-truncate title fw-normal">{title}</div>
|
|
38
59
|
</Col>
|
|
39
|
-
{#if resizable}
|
|
60
|
+
{#if resizable && isMobileDevice}
|
|
40
61
|
<Col md="2">
|
|
41
62
|
<div class="float-end">
|
|
42
63
|
<i on:click={toggleMaximize} class="material-icons cursor-pointer"
|
|
@@ -249,4 +270,7 @@ input:checked + .slider:before {
|
|
|
249
270
|
}
|
|
250
271
|
input:checked + .slider:after {
|
|
251
272
|
transform: translateX(36px);
|
|
273
|
+
}
|
|
274
|
+
.cursor-pointer {
|
|
275
|
+
cursor: pointer !important;
|
|
252
276
|
}</style>
|
|
@@ -8,6 +8,7 @@ export default class WidgetCard extends SvelteComponentTyped<{
|
|
|
8
8
|
widthOnly?: boolean | undefined;
|
|
9
9
|
resizeQuotient?: number | undefined;
|
|
10
10
|
cardLength?: number | undefined;
|
|
11
|
+
minMaximizebleWidth?: number | undefined;
|
|
11
12
|
}, {
|
|
12
13
|
[evt: string]: CustomEvent<any>;
|
|
13
14
|
}, {
|
|
@@ -26,6 +27,7 @@ declare const __propDef: {
|
|
|
26
27
|
widthOnly?: boolean | undefined;
|
|
27
28
|
resizeQuotient?: number | undefined;
|
|
28
29
|
cardLength?: number | undefined;
|
|
30
|
+
minMaximizebleWidth?: number | undefined;
|
|
29
31
|
};
|
|
30
32
|
events: {
|
|
31
33
|
[evt: string]: CustomEvent<any>;
|