Skip to content

Commit 8c6ff6f

Browse files
nolimits4webnolimits4web
committed
fix(svelte): checks for null or undefined where printing a text
fixes #126
1 parent e026847 commit 8c6ff6f

9 files changed

+53
-29
lines changed

‎src/svelte/components/Card.svelte

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { useDarkClasses } from '../shared/use-dark-classes.js';
55
import { useTheme } from '../shared/use-theme.js';
66
import { useThemeClasses } from '../shared/use-theme-classes.js';
7+
import { printText } from '../shared/print-text.js';
78
89
export let component = 'div';
910
let className = undefined;
@@ -72,29 +73,29 @@
7273
{#if typeof component === 'string'}
7374
<svelte:element this={component} class={c.base[style]} {...$$restProps}>
7475
{#if header || $$slots.header}
75-
<div class={c.header}>{header}<slot name="header" /></div>
76+
<div class={c.header}>{printText(header)}<slot name="header" /></div>
7677
{/if}
7778
{#if contentWrap}
7879
<div class={c.content}><slot /></div>
7980
{:else}
8081
<slot />
8182
{/if}
8283
{#if footer || $$slots.footer}
83-
<div class={c.footer}>{footer}<slot name="footer" /></div>
84+
<div class={c.footer}>{printText(footer)}<slot name="footer" /></div>
8485
{/if}
8586
</svelte:element>
8687
{:else}
8788
<svelte:component this={component} class={c.base[style]} {...$$restProps}>
8889
{#if header || $$slots.header}
89-
<div class={c.header}>{header}<slot name="header" /></div>
90+
<div class={c.header}>{printText(header)}<slot name="header" /></div>
9091
{/if}
9192
{#if contentWrap}
9293
<div class={c.content}><slot /></div>
9394
{:else}
9495
<slot />
9596
{/if}
9697
{#if footer || $$slots.footer}
97-
<div class={c.footer}>{footer}<slot name="footer" /></div>
98+
<div class={c.footer}>{printText(footer)}<slot name="footer" /></div>
9899
{/if}
99100
</svelte:component>
100101
{/if}

‎src/svelte/components/Fab.svelte

+5-4
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import { useDarkClasses } from '../shared/use-dark-classes.js';
55
import { FabClasses } from '../../shared/classes/FabClasses.js';
66
import { FabColors } from '../../shared/colors/FabColors.js';
7+
import { printText } from '../shared/print-text.js';
78
89
let className = undefined;
910
export { className as class };
@@ -47,13 +48,13 @@
4748
{...$$restProps}
4849
>
4950
{#if (text || $$slots.text) && textPosition === 'before'}
50-
<span class={c.text}>{text}<slot name="text" /></span>
51+
<span class={c.text}>{printText(text)}<slot name="text" /></span>
5152
{/if}
5253
{#if $$slots.icon}
5354
<span class={c.icon}><slot name="icon" /></span>
5455
{/if}
5556
{#if (text || $$slots.text) && textPosition === 'after'}
56-
<span class={c.text}>{text}<slot name="text" /></span>
57+
<span class={c.text}>{printText(text)}<slot name="text" /></span>
5758
{/if}
5859
<slot />
5960
</svelte:element>
@@ -67,13 +68,13 @@
6768
{...$$restProps}
6869
>
6970
{#if (text || $$slots.text) && textPosition === 'before'}
70-
<span class={c.text}>{text}<slot name="text" /></span>
71+
<span class={c.text}>{printText(text)}<slot name="text" /></span>
7172
{/if}
7273
{#if $$slots.icon}
7374
<span class={c.icon}><slot name="icon" /></span>
7475
{/if}
7576
{#if (text || $$slots.text) && textPosition === 'after'}
76-
<span class={c.text}>{text}<slot name="text" /></span>
77+
<span class={c.text}>{printText(text)}<slot name="text" /></span>
7778
{/if}
7879
<slot />
7980
</svelte:component>

‎src/svelte/components/Icon.svelte

+4-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { useThemeClasses } from '../shared/use-theme-classes.js';
44
import Badge from './Badge.svelte';
55
import { IconClasses } from '../../shared/classes/IconClasses.js';
6+
import { printText } from '../shared/print-text.js';
67
78
let className = undefined;
89
export { className as class };
@@ -25,16 +26,16 @@
2526

2627
<i class={c.base} {...$$restProps}>
2728
{#if theme === 'ios'}
28-
{ios || ''}
29+
{printText(ios || '')}
2930
<slot name="ios" />
3031
{:else}
31-
{material || ''}
32+
{printText(material || '')}
3233
<slot name="material" />
3334
{/if}
3435

3536
{#if typeof badge !== 'undefined' && badge !== null && badge !== ''}
3637
<Badge small class={c.badge} colors={badgeColors}>
37-
{badge}
38+
{printText(badge)}
3839
</Badge>
3940
{/if}
4041
<slot />

‎src/svelte/components/ListInput.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import { ListInputClasses } from '../../shared/classes/ListInputClasses.js';
99
import { ListInputColors } from '../../shared/colors/ListInputColors.js';
1010
import { cls } from '../../shared/cls.js';
11+
import { printText } from '../shared/print-text.js';
1112
1213
let className = undefined;
1314
export { className as class };
@@ -181,7 +182,7 @@
181182
{#if label || $$slots.label}
182183
<div class={c.label[labelStyle]}>
183184
<div class={c.labelText}>
184-
{label}
185+
{printText(label)}
185186
<slot name="label" />
186187
</div>
187188
</div>

‎src/svelte/components/ListItem.svelte

+25-12
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import { ListItemClasses } from '../../shared/classes/ListItemClasses.js';
99
import { ListItemColors } from '../../shared/colors/ListItemColors.js';
1010
import { getReactiveContext } from '../shared/get-reactive-context.js';
11+
import { printText } from '../shared/print-text.js';
1112
1213
let className = undefined;
1314
export { className as class };
@@ -199,19 +200,21 @@
199200
{/if}
200201
<div class={c.inner}>
201202
{#if header || $$slots.header}
202-
<div class={c.header}>{header}<slot name="header" /></div>
203+
<div class={c.header}>
204+
{printText(header)}<slot name="header" />
205+
</div>
203206
{/if}
204207
{#if ((title || $$slots.title) && withTitle !== false) || after || $$slots.after}
205208
<div class={c.titleWrap}>
206209
{#if (title || $$slots.title) && withTitle !== false}
207210
<div class={titleClasses}>
208-
{title}
211+
{printText(title)}
209212
<slot name="title" />
210213
</div>
211214
{/if}
212215
{#if after || $$slots.after}
213216
<div class={c.after}>
214-
{after}
217+
{printText(after)}
215218
<slot name="after" />
216219
</div>
217220
{/if}
@@ -221,13 +224,17 @@
221224
</div>
222225
{/if}
223226
{#if subtitle || $$slots.subtitle}
224-
<div class={c.subtitle}>{subtitle}<slot name="subtitle" /></div>
227+
<div class={c.subtitle}>
228+
{printText(subtitle)}<slot name="subtitle" />
229+
</div>
225230
{/if}
226231
{#if text || $$slots.text}
227-
<div class={c.text}>{text}<slot name="text" /></div>
232+
<div class={c.text}>{printText(text)}<slot name="text" /></div>
228233
{/if}
229234
{#if footer || $$slots.footer}
230-
<div class={c.footer}>{footer}<slot name="footer" /></div>
235+
<div class={c.footer}>
236+
{printText(footer)}<slot name="footer" />
237+
</div>
231238
{/if}
232239
<slot name="inner" />
233240
</div>
@@ -245,19 +252,21 @@
245252
{/if}
246253
<div class={c.inner}>
247254
{#if header || $$slots.header}
248-
<div class={c.header}>{header}<slot name="header" /></div>
255+
<div class={c.header}>
256+
{printText(header)}<slot name="header" />
257+
</div>
249258
{/if}
250259
{#if ((title || $$slots.title) && withTitle !== false) || after || $$slots.after}
251260
<div class={c.titleWrap}>
252261
{#if (title || $$slots.title) && withTitle !== false}
253262
<div class={titleClasses}>
254-
{title}
263+
{printText(title)}
255264
<slot name="title" />
256265
</div>
257266
{/if}
258267
{#if after || $$slots.after}
259268
<div class={c.after}>
260-
{after}
269+
{printText(after)}
261270
<slot name="after" />
262271
</div>
263272
{/if}
@@ -267,13 +276,17 @@
267276
</div>
268277
{/if}
269278
{#if subtitle || $$slots.subtitle}
270-
<div class={c.subtitle}>{subtitle}<slot name="subtitle" /></div>
279+
<div class={c.subtitle}>
280+
{printText(subtitle)}<slot name="subtitle" />
281+
</div>
271282
{/if}
272283
{#if text || $$slots.text}
273-
<div class={c.text}>{text}<slot name="text" /></div>
284+
<div class={c.text}>{printText(text)}<slot name="text" /></div>
274285
{/if}
275286
{#if footer || $$slots.footer}
276-
<div class={c.footer}>{footer}<slot name="footer" /></div>
287+
<div class={c.footer}>
288+
{printText(footer)}<slot name="footer" />
289+
</div>
277290
{/if}
278291
<slot name="inner" />
279292
</div>

‎src/svelte/components/Navbar.svelte

+4-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
import { useDarkClasses } from '../shared/use-dark-classes.js';
66
import { NavbarClasses } from '../../shared/classes/NavbarClasses.js';
77
import { NavbarColors } from '../../shared/colors/NavbarColors.js';
8+
import { printText } from '../shared/print-text.js';
89
910
let className = undefined;
1011
export { className as class };
@@ -215,11 +216,11 @@
215216
{/if}
216217
{#if $$slots.title || $$slots.subtitle || title || subtitle}
217218
<div class={c.title} bind:this={titleElRef}>
218-
{title}
219+
{printText(title)}
219220
<slot name="title" />
220221
{#if subtitle || $$slots.subtitle}
221222
<div class={c.subtitle}>
222-
{subtitle}<slot name="subtitle" />
223+
{printText(subtitle)}<slot name="subtitle" />
223224
</div>
224225
{/if}
225226
</div>
@@ -231,7 +232,7 @@
231232
</div>
232233
{#if large || medium}
233234
<div class={c.titleContainer} bind:this={titleContainerElRef}>
234-
{title}
235+
{printText(title)}
235236
<slot name="title" />
236237
</div>
237238
{/if}

‎src/svelte/components/NavbarBackLink.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import BackIcon from './icons/BackIcon.svelte';
55
import Link from './Link.svelte';
66
import { NavbarBackLinkClasses } from '../../shared/classes/NavbarBackLinkClasses.js';
7+
import { printText } from '../shared/print-text.js';
78
89
let className = undefined;
910
export { className as class };
@@ -34,7 +35,7 @@
3435
<BackIcon {theme} />
3536
</span>
3637
{#if shouldShowText}
37-
<span>{text}</span>
38+
<span>{printText(text)}</span>
3839
{/if}
3940
<slot />
4041
</Link>

‎src/svelte/components/TabbarLink.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { TabbarLinkColors } from '../../shared/colors/TabbarLinkColors.js';
44
import { useThemeClasses } from '../shared/use-theme-classes.js';
55
import { useDarkClasses } from '../shared/use-dark-classes.js';
6+
import { printText } from '../shared/print-text.js';
67
78
import Link from './Link.svelte';
89
@@ -51,7 +52,7 @@
5152
{#if $$slots.label}
5253
<slot name="label" />
5354
{:else}
54-
{label}
55+
{printText(label)}
5556
<slot />
5657
{/if}
5758
</span>

‎src/svelte/shared/print-text.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const printText = (text) => {
2+
if (typeof text === 'undefined' || text === null || text === false) return '';
3+
return text;
4+
};

0 commit comments

Comments
 (0)