Skip to content

Commit 40ecfa0

Browse files
nolimits4webnolimits4web
committed
feat: more svelte tweaks
1 parent 148070b commit 40ecfa0

22 files changed

Lines changed: 350 additions & 239 deletions

‎kitchen-sink/svelte/src/pages/action-sheet.svelte‎

Lines changed: 42 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -131,59 +131,65 @@
131131
<Actions grid={true} bind:opened={actionGridOpened}>
132132
<ActionsGroup>
133133
<ActionsButton>
134-
<img
135-
slot="media"
136-
src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
137-
width="48"
138-
style="max-width: 100%; border-radius: 8px"
139-
/>
134+
{#snippet media()}
135+
<img
136+
src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
137+
width="48"
138+
style="max-width: 100%; border-radius: 8px"
139+
/>
140+
{/snippet}
140141
<span>Button 1</span>
141142
</ActionsButton>
142143
<ActionsButton>
143-
<img
144-
slot="media"
145-
src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
146-
width="48"
147-
style="max-width: 100%; border-radius: 8px"
148-
/>
144+
{#snippet media()}
145+
<img
146+
src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
147+
width="48"
148+
style="max-width: 100%; border-radius: 8px"
149+
/>
150+
{/snippet}
149151
<span>Button 2</span>
150152
</ActionsButton>
151153
<ActionsButton>
152-
<img
153-
slot="media"
154-
src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
155-
width="48"
156-
style="max-width: 100%; border-radius: 8px"
157-
/>
154+
{#snippet media()}
155+
<img
156+
src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
157+
width="48"
158+
style="max-width: 100%; border-radius: 8px"
159+
/>
160+
{/snippet}
158161
<span>Button 3</span>
159162
</ActionsButton>
160163
</ActionsGroup>
161164
<ActionsGroup>
162165
<ActionsButton>
163-
<img
164-
slot="media"
165-
src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg"
166-
width="48"
167-
style="max-width: 100%; border-radius: 8px"
168-
/>
166+
{#snippet media()}
167+
<img
168+
src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg"
169+
width="48"
170+
style="max-width: 100%; border-radius: 8px"
171+
/>
172+
{/snippet}
169173
<span>Button 4</span>
170174
</ActionsButton>
171175
<ActionsButton>
172-
<img
173-
slot="media"
174-
src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
175-
width="48"
176-
style="max-width: 100%; border-radius: 8px"
177-
/>
176+
{#snippet media()}
177+
<img
178+
src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
179+
width="48"
180+
style="max-width: 100%; border-radius: 8px"
181+
/>
182+
{/snippet}
178183
<span>Button 5</span>
179184
</ActionsButton>
180185
<ActionsButton>
181-
<img
182-
slot="media"
183-
src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
184-
width="48"
185-
style="max-width: 100%; border-radius: 8px"
186-
/>
186+
{#snippet media()}
187+
<img
188+
src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
189+
width="48"
190+
style="max-width: 100%; border-radius: 8px"
191+
/>
192+
{/snippet}
187193
<span>Button 6</span>
188194
</ActionsButton>
189195
</ActionsGroup>

‎kitchen-sink/svelte/src/pages/badge.svelte‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,25 @@
4747
</Toolbar>
4848

4949
<List strongIos outlineIos dividersIos>
50-
<ListItem title="Foo Bar" badge="0"><i slot="media" class="icon icon-f7" /></ListItem>
50+
<ListItem title="Foo Bar" badge="0">
51+
{#snippet media()}
52+
<i class="icon icon-f7" />
53+
{/snippet}
54+
</ListItem>
5155
<ListItem title="Ivan Petrov" badge="CEO" badgeColor="blue">
52-
<i slot="media" class="icon icon-f7" />
56+
{#snippet media()}
57+
<i class="icon icon-f7" />
58+
{/snippet}
5359
</ListItem>
5460
<ListItem title="John Doe" badge="5" badgeColor="green">
55-
<i slot="media" class="icon icon-f7" />
61+
{#snippet media()}
62+
<i class="icon icon-f7" />
63+
{/snippet}
5664
</ListItem>
5765
<ListItem title="Jane Doe" badge="NEW" badgeColor="orange">
58-
<i slot="media" class="icon icon-f7" />
66+
{#snippet media()}
67+
<i class="icon icon-f7" />
68+
{/snippet}
5969
</ListItem>
6070
</List>
6171
</Page>

‎kitchen-sink/svelte/src/pages/calendar-page.svelte‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,11 +128,17 @@
128128
<List id="calendar-events" noHairlines class="no-margin no-safe-area-left">
129129
{#each eventItems as item, index (index)}
130130
<ListItem title={item.title} after={item.time}>
131-
<div class="event-color" style={`background-color: ${item.color}`} slot="root-start" />
131+
{#snippet rootStart()}
132+
<div class="event-color" style={`background-color: ${item.color}`} />
133+
{/snippet}
132134
</ListItem>
133135
{/each}
134136
{#if eventItems.length === 0}
135-
<ListItem><span class="text-color-gray" slot="title">No events for this day</span></ListItem>
137+
<ListItem>
138+
{#snippet title()}
139+
<span class="text-color-gray">No events for this day</span>
140+
{/snippet}
141+
</ListItem>
136142
{/if}
137143
</List>
138144
</Page>

‎kitchen-sink/svelte/src/pages/cards.svelte‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -135,25 +135,19 @@
135135
<CardContent padding={false}>
136136
<List mediaList>
137137
<ListItem title="Yellow Submarine" subtitle="Beatles">
138-
<img
139-
slot="media"
140-
src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg"
141-
width="44"
142-
/>
138+
{#snippet media()}
139+
<img src="https://cdn.framework7.io/placeholder/fashion-88x88-4.jpg" width="44" />
140+
{/snippet}
143141
</ListItem>
144142
<ListItem title="Don't Stop Me Now" subtitle="Queen">
145-
<img
146-
slot="media"
147-
src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg"
148-
width="44"
149-
/>
143+
{#snippet media()}
144+
<img src="https://cdn.framework7.io/placeholder/fashion-88x88-5.jpg" width="44" />
145+
{/snippet}
150146
</ListItem>
151147
<ListItem title="Billie Jean" subtitle="Michael Jackson">
152-
<img
153-
slot="media"
154-
src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg"
155-
width="44"
156-
/>
148+
{#snippet media()}
149+
<img src="https://cdn.framework7.io/placeholder/fashion-88x88-6.jpg" width="44" />
150+
{/snippet}
157151
</ListItem>
158152
</List>
159153
</CardContent>

‎kitchen-sink/svelte/src/pages/color-picker.svelte‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,12 @@
6767
targetEl: '.wheel-picker-target',
6868
}}
6969
>
70+
{#snippet media()}
7071
<i
71-
slot="media"
7272
style={`background-color: ${wheePickerValue.hex}`}
7373
class="icon demo-list-icon wheel-picker-target"
74-
/>
74+
></i>
75+
{/snippet}
7576
</ListInput>
7677
</List>
7778

@@ -90,11 +91,12 @@
9091
targetEl: '.spectrum-picker-target',
9192
}}
9293
>
94+
{#snippet media()}
9395
<i
94-
slot="media"
9596
style={`background-color: ${spectrumPickerValue.hex}`}
9697
class="icon demo-list-icon spectrum-picker-target"
97-
/>
98+
></i>
99+
{/snippet}
98100
</ListInput>
99101
</List>
100102

@@ -113,11 +115,12 @@
113115
targetEl: '.hs-spectrum-picker-target',
114116
}}
115117
>
118+
{#snippet media()}
116119
<i
117-
slot="media"
118120
style={`background-color: ${hsSpectrumPickerValue.hex}`}
119121
class="icon demo-list-icon hs-spectrum-picker-target"
120-
/>
122+
></i>
123+
{/snippet}
121124
</ListInput>
122125
</List>
123126

@@ -138,11 +141,12 @@
138141
targetEl: '.rgb-picker-target',
139142
}}
140143
>
144+
{#snippet media()}
141145
<i
142-
slot="media"
143146
style={`background-color: ${rgbPickerValue.hex}`}
144147
class="icon demo-list-icon rgb-picker-target"
145-
/>
148+
></i>
149+
{/snippet}
146150
</ListInput>
147151
</List>
148152

@@ -166,11 +170,12 @@
166170
},
167171
}}
168172
>
173+
{#snippet media()}
169174
<i
170-
slot="media"
171175
style={`background-color: ${rgbaPickerValue.rgba ? `rgba(${rgbaPickerValue.rgba.join(', ')})` : rgbaPickerValue.hex}`}
172176
class="icon demo-list-icon rgba-picker-target"
173-
/>
177+
></i>
178+
{/snippet}
174179
</ListInput>
175180
</List>
176181

@@ -194,11 +199,12 @@
194199
},
195200
}}
196201
>
202+
{#snippet media()}
197203
<i
198-
slot="media"
199204
style={`background-color: ${hsbPickerValue.hex}`}
200205
class="icon demo-list-icon hsb-picker-target"
201-
/>
206+
></i>
207+
{/snippet}
202208
</ListInput>
203209
</List>
204210

@@ -225,11 +231,12 @@
225231
},
226232
}}
227233
>
234+
{#snippet media()}
228235
<i
229-
slot="media"
230236
style={`background-color: ${rgbBarsPickerValue.hex}`}
231237
class="icon demo-list-icon rgb-bars-picker-target"
232-
/>
238+
></i>
239+
{/snippet}
233240
</ListInput>
234241
</List>
235242

@@ -255,11 +262,12 @@
255262
},
256263
}}
257264
>
265+
{#snippet media()}
258266
<i
259-
slot="media"
260267
style={`background-color: ${rgbSlidersColorsPickerValue.hex}`}
261268
class="icon demo-list-icon rgb-sliders-colors-picker-target"
262-
/>
269+
></i>
270+
{/snippet}
263271
</ListInput>
264272
</List>
265273

@@ -293,11 +301,12 @@
293301
},
294302
}}
295303
>
304+
{#snippet media()}
296305
<i
297-
slot="media"
298306
style={`background-color: ${palettePickerValue.hex}`}
299307
class="icon demo-list-icon palette-picker-target"
300-
/>
308+
></i>
309+
{/snippet}
301310
</ListInput>
302311
</List>
303312

@@ -339,11 +348,12 @@
339348
},
340349
}}
341350
>
342-
<i
343-
slot="media"
351+
{#snippet media()}
352+
<i
344353
style={`background-color: ${proPickerValue.rgba ? `rgba(${proPickerValue.rgba.join(', ')})` : proPickerValue.hex}`}
345354
class="icon demo-list-icon pro-picker-target"
346-
/>
355+
></i>
356+
{/snippet}
347357
</ListInput>
348358
</List>
349359

‎kitchen-sink/svelte/src/pages/color-themes.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,9 @@
4949

5050
<Page>
5151
<Navbar large title="Color Themes" backLink>
52-
<Link slot="right">Link</Link>
52+
{#snippet right()}
53+
<Link>Link</Link>
54+
{/snippet}
5355
</Navbar>
5456
<Toolbar tabbar icons bottom>
5557
<Link

‎kitchen-sink/svelte/src/pages/fab-morph.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<Fab position="center-bottom" morphTo=".demo-fab-fullscreen-sheet.fab-morph-target">
2020
<Icon ios="f7:plus" md="material:add" />
2121
</Fab>
22-
<svelte:fragment slot="fixed">
22+
{#snippet fixedContent()}
2323
<div class="list links-list demo-fab-sheet fab-morph-target">
2424
<ul>
2525
<li><a class="fab-close">Link 1</a></li>
@@ -39,7 +39,7 @@
3939
</ul>
4040
</div>
4141
</div>
42-
</svelte:fragment>
42+
{/snippet}
4343

4444
<Block strong inset>
4545
<p>

0 commit comments

Comments
 (0)