intelliwaketssveltekitv25 0.1.123 → 0.1.125

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.
@@ -1,7 +1,6 @@
1
1
  import type { Writable } from 'svelte/store';
2
2
  import { type TDateAny } from '@solidbasisventures/intelliwaketsfoundation';
3
3
  import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
4
- import type { Snippet } from 'svelte';
5
4
  export interface IFAProps {
6
5
  icon: IconDefinition;
7
6
  size?: 'xs' | 'sm' | 'lg' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
@@ -63,8 +62,8 @@ export interface ISpinItem<T = number> {
63
62
  classItem?: string | null;
64
63
  }
65
64
  export type TListGroupItem = {
66
- title: string | Snippet;
67
- sub_title?: string | Snippet;
65
+ title: string;
66
+ sub_title?: string;
68
67
  hover_title?: string;
69
68
  hidden?: boolean;
70
69
  faProps?: IFAProps;
@@ -150,6 +149,7 @@ export interface IMessageBoxStore<COLOR = string> {
150
149
  message: string | null;
151
150
  messageBody?: string | null;
152
151
  color?: COLOR;
152
+ dismissAfterSeconds?: number | null;
153
153
  dismissAt?: TDateAny | null;
154
154
  }
155
155
  export type TStoreMessageBox<COLOR = string> = Pick<Writable<IMessageBoxStore<COLOR>[]>, 'subscribe'> & {
@@ -166,3 +166,14 @@ export type TGenericMultiSelect = {
166
166
  id?: string | number | null;
167
167
  } & Record<string, any>;
168
168
  export type TKeyboardKey = 'Enter' | 'ArrowDown' | 'ArrowUp' | 'ArrowLeft' | 'ArrowRight' | 'Tab' | 'Backspace' | 'Escape';
169
+ export interface IShowTextStore<COLOR = string> {
170
+ text: string | null;
171
+ color?: COLOR;
172
+ dismissAfterSeconds?: number | null;
173
+ dismissAt?: TDateAny | null;
174
+ }
175
+ export type TStoreShowText<COLOR = string> = Pick<Writable<IShowTextStore<COLOR> | null>, 'subscribe'> & {
176
+ show: (message: string | IShowTextStore, color?: COLOR) => void;
177
+ hide: () => void;
178
+ };
179
+ export declare const ShowText: TStoreShowText<string>;
@@ -36,21 +36,116 @@ const storeActivityOverlay = () => {
36
36
  export const ShowActivityOverlay = storeActivityOverlay();
37
37
  const storeMessageBox = () => {
38
38
  const { subscribe, set, update } = writable([]);
39
+ let checkInterval = null;
40
+ // Function to start the interval if not already running
41
+ const startInterval = () => {
42
+ if (checkInterval === null) {
43
+ checkInterval = setInterval(() => {
44
+ update((messages) => {
45
+ const now = new Date();
46
+ const filteredMessages = messages.filter((msg) => !msg.dismissAt || new Date(msg.dismissAt) > now);
47
+ // If no messages left, clear the interval
48
+ if (filteredMessages.length === 0) {
49
+ if (checkInterval) {
50
+ clearInterval(checkInterval);
51
+ checkInterval = null;
52
+ }
53
+ }
54
+ return filteredMessages;
55
+ });
56
+ }, 1000);
57
+ }
58
+ };
59
+ // Function to stop the interval
60
+ const stopInterval = () => {
61
+ if (checkInterval !== null) {
62
+ clearInterval(checkInterval);
63
+ checkInterval = null;
64
+ }
65
+ };
66
+ return {
67
+ subscribe,
68
+ show: (message, color) => update((prevState) => {
69
+ const newState = [
70
+ ...prevState.filter((pS) => pS.message !== (typeof message === 'object' ? message.message : message)),
71
+ typeof message === 'object'
72
+ ? {
73
+ ...message,
74
+ dismissAt: message.dismissAt === undefined
75
+ ? message.dismissAfterSeconds === null
76
+ ? null
77
+ : DateParseTS('now', { seconds: message.dismissAfterSeconds ?? 3 })
78
+ : message.dismissAt
79
+ }
80
+ : { message, color, dismissAt: DateParseTS('now', { seconds: 3 }) }
81
+ ];
82
+ // Start interval if we have messages with dismissAt
83
+ if (newState.some((msg) => msg.dismissAt)) {
84
+ startInterval();
85
+ }
86
+ return newState;
87
+ }),
88
+ hide: (message) => update((prevState) => {
89
+ const newState = prevState.filter((pS) => !ToArray(message).includes(pS.message));
90
+ // If no messages left with dismissAt, stop the interval
91
+ if (!newState.some((msg) => msg.dismissAt)) {
92
+ stopInterval();
93
+ }
94
+ return newState;
95
+ }),
96
+ reset: () => {
97
+ stopInterval();
98
+ set([]);
99
+ }
100
+ };
101
+ };
102
+ export const ShowMessageBox = storeMessageBox();
103
+ const storeShowText = () => {
104
+ const { subscribe, set, update } = writable(null);
105
+ let checkInterval = null;
106
+ // Function to start the interval if not already running
107
+ const startInterval = () => {
108
+ if (checkInterval === null) {
109
+ checkInterval = setInterval(() => {
110
+ update((message) => {
111
+ if (message?.dismissAt !== null && (!message || DateCompare(message.dismissAt, 'IsSameOrBefore', 'now', 'seconds'))) {
112
+ if (checkInterval) {
113
+ clearInterval(checkInterval);
114
+ checkInterval = null;
115
+ }
116
+ return null;
117
+ }
118
+ return message;
119
+ });
120
+ }, 1000);
121
+ }
122
+ };
123
+ // Function to stop the interval
124
+ const stopInterval = () => {
125
+ if (checkInterval !== null) {
126
+ clearInterval(checkInterval);
127
+ checkInterval = null;
128
+ }
129
+ };
39
130
  return {
40
131
  subscribe,
41
- show: (message, color) => update((prevState) => [
42
- ...prevState.filter((pS) => pS.message !== (typeof message === 'object' ? message.message : message)),
43
- typeof message === 'object'
132
+ show: (text, color) => {
133
+ startInterval();
134
+ set(typeof text === 'object'
44
135
  ? {
45
- ...message,
46
- dismissAt: message.dismissAt === undefined
47
- ? DateParseTS('now', { seconds: 3 })
48
- : message.dismissAt
136
+ ...text,
137
+ dismissAt: text.dismissAt === undefined
138
+ ? text.dismissAfterSeconds === null
139
+ ? null
140
+ : DateParseTS('now', { seconds: text.dismissAfterSeconds ?? 3 })
141
+ : text.dismissAt
49
142
  }
50
- : { message, color, dismissAt: DateParseTS('now', { seconds: 3 }) }
51
- ]),
52
- hide: (message) => update((prevState) => prevState.filter((pS) => !ToArray(message).includes(pS.message))),
53
- reset: () => set([])
143
+ : { text, color, dismissAt: DateParseTS('now', { seconds: 3 }) });
144
+ },
145
+ hide: () => {
146
+ stopInterval();
147
+ set(null);
148
+ }
54
149
  };
55
150
  };
56
- export const ShowMessageBox = storeMessageBox();
151
+ export const ShowText = storeShowText();
@@ -266,9 +266,8 @@
266
266
  class='-mr-1 h-5 w-5 mt-0.5 inline-block float-right'
267
267
  xmlns='http://www.w3.org/2000/svg'
268
268
  viewBox='0 0 20 20'
269
- fill='currentColor'
270
269
  aria-hidden='true'
271
- style={openingDown ? 'rotate: 0deg;' : 'rotate: 180deg;'}
270
+ style={`fill: currentColor; ${openingDown ? 'rotate: 0deg;' : 'rotate: 180deg;'}`}
272
271
  bind:this={svgElement}
273
272
  >
274
273
  <path
@@ -42,9 +42,13 @@
42
42
  empty?: Snippet
43
43
  } = $props()
44
44
 
45
+ function titleString(title: string | null | undefined | Snippet): string | null {
46
+ return (typeof title === 'string') ? title : null
47
+ }
48
+
45
49
  function pathFromItem(modalItem: TListGroupItem): string {
46
50
  return modalItem.href ??
47
- (ToPascalCase((modalItem.title ?? '').toString()) + (modalItem.value ? `:${modalItem.value}` : ''))
51
+ (ToPascalCase((titleString(modalItem.title) ?? '').toString()) + (modalItem.value ? `:${modalItem.value}` : ''))
48
52
  }
49
53
 
50
54
  type TGroupItemPath = TListGroupItem & {
@@ -96,7 +100,7 @@
96
100
  }
97
101
 
98
102
  function getKey(listItem: TListGroupItem) {
99
- return listItem.key ?? `${listItem.value ?? 'v'}:${listItem.title ?? listItem.paneName ?? 't'}:${listItem.sub_title ?? 'st'}:${listItem.badgeValue ?? 'bv'}:${listItem.rightText ?? 'rt'}}`
103
+ return listItem.key ?? `${listItem.value ?? 'v'}:${titleString(listItem.title) ?? listItem.paneName ?? 't'}:${titleString(listItem.sub_title) ?? 'st'}:${listItem.badgeValue ?? 'bv'}:${listItem.rightText ?? 'rt'}}`
100
104
  }
101
105
 
102
106
  function sectionClick(section: string) {
@@ -242,10 +246,10 @@
242
246
  <div class='overflow-hidden'
243
247
  class:whitespace-nowrap={!wrapText}
244
248
  class:text-ellipsis={!wrapText && ellipses}
245
- title={!ellipses ? undefined : typeof listItem.title === 'string' ? listItem.title : ''}>
249
+ title={!ellipses ? undefined : titleString(listItem.title) ?? undefined}>
246
250
  <DisplayHTML noLinkReplace={listItem.noLinkReplace ?? noLinkReplace}
247
251
  value={listItem.title} />
248
- {#if listItem.sub_title && !rounded}
252
+ {#if !!titleString(listItem.sub_title) && !rounded}
249
253
  <div class='text-sm font-thin'>
250
254
  <DisplayHTML noLinkReplace={listItem.noLinkReplace ?? noLinkReplace}
251
255
  value={listItem.sub_title} />
@@ -279,7 +283,7 @@
279
283
 
280
284
  <!-- row 2 -->
281
285
  <div class:col-span-3={!listItem.bigIcon} class:col-span-2={listItem.bigIcon}>
282
- {#if listItem.sub_title && rounded}
286
+ {#if !!titleString(listItem.sub_title) && rounded}
283
287
  <div class='text-sm font-light text-gray-700 text-justify mt-0.5'>
284
288
  <DisplayHTML noLinkReplace={listItem.noLinkReplace ?? noLinkReplace}
285
289
  value={listItem.sub_title} />
@@ -314,10 +318,10 @@
314
318
  <div class='overflow-hidden'
315
319
  class:whitespace-nowrap={!wrapText}
316
320
  class:text-ellipsis={!wrapText && ellipses}
317
- title={!ellipses ? undefined : typeof listItem.title === 'string' ? listItem.title : ''}>
321
+ title={!ellipses ? undefined : titleString(listItem.title) ?? undefined}>
318
322
  <DisplayHTML noLinkReplace={listItem.noLinkReplace ?? noLinkReplace}
319
323
  value={listItem.title} />
320
- {#if listItem.sub_title}
324
+ {#if !!titleString(listItem.sub_title)}
321
325
  <div class='text-sm font-thin'>
322
326
  <DisplayHTML noLinkReplace={listItem.noLinkReplace ?? noLinkReplace}
323
327
  value={listItem.sub_title} />
@@ -2,16 +2,6 @@
2
2
  import type { IMessageBoxStore } from './Definitions'
3
3
  import { ShowMessageBox } from './Definitions'
4
4
  import { fade, fly } from 'svelte/transition'
5
- import { DateCompare } from '@solidbasisventures/intelliwaketsfoundation'
6
-
7
- setInterval(() => {
8
- const toClears = $ShowMessageBox.filter(smb => !!smb.dismissAt && DateCompare(smb.dismissAt, 'IsBefore', 'now', 'seconds'))
9
-
10
- if (toClears.length > 0) {
11
- ShowMessageBox.hide(toClears.map(smb => smb.message ?? ''))
12
- }
13
-
14
- }, 1000)
15
5
 
16
6
  function hideMessageBox(messageBox: IMessageBoxStore) {
17
7
  ShowMessageBox.hide(messageBox.message)
@@ -32,7 +22,8 @@
32
22
  data-color-dark={messageBox.color}>
33
23
  <svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"
34
24
  image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" height="22" width="22"
35
- viewBox="0 0 512 512" fill="currentColor">
25
+ viewBox="0 0 512 512"
26
+ style="fill: currentColor;">
36
27
  <path fill-rule="nonzero"
37
28
  d="M256 0c70.69 0 134.69 28.66 181.02 74.98C483.34 121.3 512 185.31 512 256c0 70.69-28.66 134.7-74.98 181.02C390.69 483.34 326.69 512 256 512c-70.69 0-134.69-28.66-181.02-74.98C28.66 390.69 0 326.69 0 256c0-70.69 28.66-134.69 74.98-181.02C121.31 28.66 185.31 0 256 0zm-9.96 161.03c0-4.28.76-8.26 2.27-11.91 1.5-3.63 3.77-6.94 6.79-9.91 3-2.95 6.29-5.2 9.84-6.7 3.57-1.5 7.41-2.28 11.52-2.28 4.12 0 7.96.78 11.49 2.27 3.54 1.51 6.78 3.76 9.75 6.73 2.95 2.97 5.16 6.26 6.64 9.91 1.49 3.63 2.22 7.61 2.22 11.89 0 4.17-.73 8.08-2.21 11.69-1.48 3.6-3.68 6.94-6.65 9.97-2.94 3.03-6.18 5.32-9.72 6.84-3.54 1.51-7.38 2.29-11.52 2.29-4.22 0-8.14-.76-11.75-2.26-3.58-1.51-6.86-3.79-9.83-6.79-2.94-3.02-5.16-6.34-6.63-9.97-1.48-3.62-2.21-7.54-2.21-11.77zm13.4 178.16c-1.11 3.97-3.35 11.76 3.3 11.76 1.44 0 3.27-.81 5.46-2.4 2.37-1.71 5.09-4.31 8.13-7.75 3.09-3.5 6.32-7.65 9.67-12.42 3.33-4.76 6.84-10.22 10.49-16.31.37-.65 1.23-.87 1.89-.48l12.36 9.18c.6.43.73 1.25.35 1.86-5.69 9.88-11.44 18.51-17.26 25.88-5.85 7.41-11.79 13.57-17.8 18.43l-.1.06c-6.02 4.88-12.19 8.55-18.51 11.01-17.58 6.81-45.36 5.7-53.32-14.83-5.02-12.96-.9-27.69 3.06-40.37l19.96-60.44c1.28-4.58 2.89-9.62 3.47-14.33.97-7.87-2.49-12.96-11.06-12.96h-17.45c-.76 0-1.38-.62-1.38-1.38l.08-.48 4.58-16.68c.16-.62.73-1.04 1.35-1.02l89.12-2.79c.76-.03 1.41.57 1.44 1.33l-.07.43-37.76 124.7zm158.3-244.93c-41.39-41.39-98.58-67-161.74-67-63.16 0-120.35 25.61-161.74 67-41.39 41.39-67 98.58-67 161.74 0 63.16 25.61 120.35 67 161.74 41.39 41.39 98.58 67 161.74 67 63.16 0 120.35-25.61 161.74-67 41.39-41.39 67-98.58 67-161.74 0-63.16-25.61-120.35-67-161.74z" />
38
29
  </svg>
@@ -46,7 +37,7 @@
46
37
  height='20'
47
38
  width='20'
48
39
  viewBox='0 0 512 512'
49
- fill="currentColor">
40
+ style="fill: currentColor;">
50
41
  <path
51
42
  d='M192 244.7L45.9 98.6 34.6 109.9 180.7 256 34.6 402.1l11.3 11.3L192 267.3 338.1 413.4l11.3-11.3L203.3 256 349.4 109.9 338.1 98.6 192 244.7z' />
52
43
  </svg>
@@ -166,7 +166,7 @@
166
166
  class:rotate-180={show}
167
167
  xmlns='http://www.w3.org/2000/svg'
168
168
  viewBox='0 0 20 20'
169
- fill='currentColor'
169
+ style="fill: currentColor;"
170
170
  aria-hidden='true'>
171
171
  <path fill-rule='evenodd'
172
172
  d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'
@@ -0,0 +1,29 @@
1
+ <script lang='ts'>
2
+ import { ShowText } from './Definitions'
3
+ import { fade } from 'svelte/transition'
4
+ import type { Snippet } from 'svelte'
5
+
6
+ let {
7
+ alternateText,
8
+ class: clazz = '',
9
+ children
10
+ }: {
11
+ alternateText?: string,
12
+ class?: string,
13
+ children?: Snippet
14
+ } = $props()
15
+ </script>
16
+
17
+ {#if $ShowText?.text || alternateText}
18
+ <span data-color-light={$ShowText?.color}
19
+ class={clazz}
20
+ out:fade='{{ duration: 200 }}'>
21
+ {#if $ShowText?.text}
22
+ {$ShowText.text}
23
+ {:else if alternateText}
24
+ {alternateText}
25
+ {/if}
26
+ </span>
27
+ {:else if children}
28
+ {@render children()}
29
+ {/if}
@@ -0,0 +1,9 @@
1
+ import type { Snippet } from 'svelte';
2
+ type $$ComponentProps = {
3
+ alternateText?: string;
4
+ class?: string;
5
+ children?: Snippet;
6
+ };
7
+ declare const TextSpan: import("svelte").Component<$$ComponentProps, {}, "">;
8
+ type TextSpan = ReturnType<typeof TextSpan>;
9
+ export default TextSpan;
package/dist/index.d.ts CHANGED
@@ -29,6 +29,7 @@ import Switch from './Switch.svelte';
29
29
  import SwitchDateNull from './SwitchDateNull.svelte';
30
30
  import TabHeader from './TabHeader.svelte';
31
31
  import TabHref from './TabHref.svelte';
32
+ import TextSpan from './TextSpan.svelte';
32
33
  export * from './AboutData';
33
34
  export * from './Cookie';
34
35
  export * from './Definitions';
@@ -74,3 +75,4 @@ export { Switch };
74
75
  export { SwitchDateNull };
75
76
  export { TabHeader };
76
77
  export { TabHref };
78
+ export { TextSpan };
package/dist/index.js CHANGED
@@ -30,6 +30,7 @@ import Switch from './Switch.svelte';
30
30
  import SwitchDateNull from './SwitchDateNull.svelte';
31
31
  import TabHeader from './TabHeader.svelte';
32
32
  import TabHref from './TabHref.svelte';
33
+ import TextSpan from './TextSpan.svelte';
33
34
  export * from './AboutData';
34
35
  export * from './Cookie';
35
36
  export * from './Definitions';
@@ -75,3 +76,4 @@ export { Switch };
75
76
  export { SwitchDateNull };
76
77
  export { TabHeader };
77
78
  export { TabHref };
79
+ export { TextSpan };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "intelliwaketssveltekitv25",
3
- "version": "0.1.123",
3
+ "version": "0.1.125",
4
4
  "exports": {
5
5
  ".": {
6
6
  "types": "./dist/index.d.ts",