Skip to content

Commit 8cb0312

Browse files
nolimits4webnolimits4web
committed
feat: more svelte v5 tweaks
1 parent 40ecfa0 commit 8cb0312

11 files changed

Lines changed: 92 additions & 61 deletions

File tree

‎kitchen-sink/react/src/pages/color-themes.jsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -153,11 +153,7 @@ export default () => {
153153
<ListItem
154154
title="Vibrant"
155155
after={
156-
<Toggle
157-
checked={vibrant}
158-
onToggleChange={() => setMdColorSchemeVibrant(!vibrant)}
159-
color="blue"
160-
/>
156+
<Toggle checked={vibrant} onToggleChange={() => setMdColorSchemeVibrant(!vibrant)} />
161157
}
162158
></ListItem>
163159
</List>

‎kitchen-sink/svelte/src/app.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
class="safe-areas"
4646
masterDetailBreakpoint={768}
4747
browserHistory={needsBrowserHistory}
48-
browserHistoryRoot={needsBrowserHistory ? '/kitchen-sink/react/dist/' : ''}
48+
browserHistoryRoot={needsBrowserHistory ? '/kitchen-sink/svelte/dist/' : ''}
4949
preloadPreviousPage={!needsBrowserHistory}
5050
iosSwipeBack={!needsBrowserHistory}
5151
/>

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

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<script context="module">
22
let globalTheme = 'light';
3-
let globalThemeColor = document.documentElement.style
4-
.getPropertyValue('--f7-color-primary')
5-
.trim();
3+
let globalThemeColor = dom7('html').css('--f7-color-primary').trim();
4+
let globalMonochrome = false;
5+
let globalVibrant = false;
66
</script>
77

88
<script>
9+
import dom7 from 'dom7';
910
import {
1011
f7,
1112
Navbar,
@@ -15,20 +16,23 @@
1516
Block,
1617
List,
1718
ListInput,
19+
ListItem,
20+
Toggle,
1821
Checkbox,
1922
Link,
2023
Toolbar,
2124
} from 'framework7-svelte';
2225
23-
let theme = globalTheme;
24-
let themeColor = globalThemeColor;
26+
let theme = $state(globalTheme);
27+
let themeColor = $state(globalThemeColor || dom7('html').css('--f7-color-primary').trim());
28+
let monochrome = $state(globalMonochrome);
29+
let vibrant = $state(globalVibrant);
2530
2631
const colors = Object.keys(f7.colors).filter(
2732
(c) => c !== 'primary' && c !== 'white' && c !== 'black',
2833
);
2934
3035
function setScheme(newTheme) {
31-
console.log(newTheme);
3236
f7.setDarkMode(newTheme === 'dark');
3337
globalTheme = newTheme;
3438
theme = newTheme;
@@ -45,6 +49,28 @@
4549
globalThemeColor = newColor;
4650
f7.setColorTheme(newColor);
4751
}
52+
53+
const setMdColorScheme = () => {
54+
if (!globalVibrant && !globalMonochrome) {
55+
f7.setMdColorScheme('default');
56+
} else if (globalVibrant && !globalMonochrome) {
57+
f7.setMdColorScheme('vibrant');
58+
} else if (!globalVibrant && globalMonochrome) {
59+
f7.setMdColorScheme('monochrome');
60+
} else if (globalVibrant && globalMonochrome) {
61+
f7.setMdColorScheme('monochrome-vibrant');
62+
}
63+
};
64+
const setMdColorSchemeMonochrome = (value) => {
65+
globalMonochrome = value;
66+
monochrome = globalMonochrome;
67+
setMdColorScheme();
68+
};
69+
const setMdColorSchemeVibrant = (value) => {
70+
globalVibrant = value;
71+
vibrant = globalVibrant;
72+
setMdColorScheme();
73+
};
4874
</script>
4975

5076
<Page>
@@ -73,12 +99,12 @@
7399
<Block strong>
74100
<p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
75101
<div class="grid grid-cols-2 grid-gap">
76-
<div class="bg-color-white demo-theme-picker" on:click={() => setScheme('light')}>
102+
<div class="bg-color-white demo-theme-picker" onclick={() => setScheme('light')}>
77103
{#if theme === 'light'}
78104
<Checkbox checked disabled />
79105
{/if}
80106
</div>
81-
<div class="bg-color-black demo-theme-picker" on:click={() => setScheme('dark')}>
107+
<div class="bg-color-black demo-theme-picker" onclick={() => setScheme('dark')}>
82108
{#if theme === 'dark'}
83109
<Checkbox checked disabled />
84110
{/if}
@@ -106,6 +132,23 @@
106132
{/each}
107133
</div>
108134
</Block>
135+
<BlockTitle medium>Material Color Scheme</BlockTitle>
136+
<List strong inset dividersIos>
137+
<ListItem title="Monochrome">
138+
{#snippet after()}
139+
<Toggle
140+
checked={monochrome}
141+
onToggleChange={() => setMdColorSchemeMonochrome(!monochrome)}
142+
/>
143+
{/snippet}
144+
</ListItem>
145+
<ListItem title="Vibrant">
146+
{#snippet after()}
147+
<Toggle checked={vibrant} onToggleChange={() => setMdColorSchemeVibrant(!vibrant)} />
148+
{/snippet}
149+
</ListItem>
150+
</List>
151+
109152
<BlockTitle medium>Custom Color Theme</BlockTitle>
110153
<List strongIos outlineIos>
111154
<ListInput
@@ -117,11 +160,12 @@
117160
onColorPickerChange={(value) => setCustomColor(value.hex)}
118161
colorPickerParams={{ targetEl: '#color-theme-picker-color' }}
119162
>
120-
<div
121-
slot="media"
122-
id="color-theme-picker-color"
123-
style="width: 28px; height: 28px; borderRadius: 4px; background: var(--f7-theme-color)"
124-
/>
163+
{#snippet media()}
164+
<div
165+
id="color-theme-picker-color"
166+
style="width: 28px; height: 28px; borderRadius: 4px; background: var(--f7-theme-color)"
167+
></div>
168+
{/snippet}
125169
</ListInput>
126170
</List>
127171
</Page>

‎kitchen-sink/svelte/src/pages/master-detail-detail.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<Page>
88
<Navbar title={`Detail Page ${f7route.params.id}`} backLink />
9-
<Block strong>
9+
<Block strong inset>
1010
<p><b>Detail Page {f7route.params.id}</b></p>
1111
<p>
1212
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue turpis et risus

‎kitchen-sink/svelte/src/pages/master-detail-master.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<Page>
66
<Navbar title="Master Detail" backLink />
7-
<Block strong>
7+
<Block strong inset>
88
<p>
99
Master-Detail pattern oftenly used on wide enough screens and tablets, and consists of two
1010
views. Master - is an area in the UI where you have a list of something. Detail - is the area
@@ -17,7 +17,7 @@
1717
<p>Navigation to/from Master-Detail view happens without transition.</p>
1818
</Block>
1919

20-
<List>
20+
<List strong inset dividersIos>
2121
<ListItem reloadDetail={true} link="/master-detail/1/">Detail Page 1</ListItem>
2222
<ListItem reloadDetail={true} link="/master-detail/2/">Detail Page 2</ListItem>
2323
<ListItem reloadDetail={true} link="/master-detail/3/">Detail Page 3</ListItem>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -224,7 +224,7 @@
224224
</script>
225225

226226
<!-- svelte-ignore a11y-missing-attribute -->
227-
<Page>
227+
<Page messagesContent>
228228
<Navbar title="Messages" backLink />
229229

230230
<Messagebar

‎kitchen-sink/svelte/src/pages/panel-left.svelte‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
<Page>
66
<BlockTitle>Left Panel</BlockTitle>
7-
<Block>
7+
<Block strong inset>
88
<p>
99
This is a left side panel. You can close it by clicking outsite or on this link:
1010
<Link panelClose>close me</Link>. You can put here anything, even another isolated view like
@@ -13,7 +13,7 @@
1313
</p>
1414
</Block>
1515
<BlockTitle>Main View Navigation</BlockTitle>
16-
<List>
16+
<List strong inset dividersIos>
1717
<ListItem link="/accordion/" title="Accordion" panelClose />
1818
<ListItem link="/action-sheet/" title="Action Sheet" panelClose />
1919
<ListItem link="/badge/" title="Badge" panelClose />
@@ -24,24 +24,4 @@
2424
<ListItem link="/contacts-list/" title="Contacts List" panelClose />
2525
<ListItem link="/data-table/" title="Data Table" panelClose />
2626
</List>
27-
<Block>
28-
<p>
29-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu
30-
bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in
31-
lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim.
32-
Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam
33-
elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa
34-
sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum
35-
pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
36-
</p>
37-
<p>
38-
Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut
39-
lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam
40-
risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend
41-
sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero. Mauris dapibus
42-
laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id, pharetra at urna.
43-
Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros, convallis blandit dui
44-
sit amet, gravida adipiscing libero.
45-
</p>
46-
</Block>
4727
</Page>

‎kitchen-sink/svelte/src/pages/panel-right.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44

55
<Page>
66
<Navbar title="Right Panel" />
7-
<Block>
7+
<Block strong inset>
88
<p>
99
This is a right side panel. You can close it by clicking outsite or on this link:
1010
<Link panelClose>close me</Link>. You can put here anything, even another isolated view.
1111
</p>
1212
</Block>
1313
<BlockTitle>Panel Navigation</BlockTitle>
14-
<List>
14+
<List strong inset dividersIos>
1515
<ListItem link="/panel-right-1/" title="Right panel page 1" />
1616
<ListItem link="/panel-right-2/" title="Right panel page 2" />
1717
</List>

‎src/svelte/components/list-input.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -319,6 +319,9 @@
319319
value,
320320
on: {
321321
change(colorPicker, colorPickerValue) {
322+
if (JSON.stringify(value) === JSON.stringify(colorPickerValue)) {
323+
return;
324+
}
322325
restProps.onColorPickerChange?.(colorPickerValue);
323326
restProps.oncolorPickerChange?.(colorPickerValue);
324327
value = colorPickerValue;

‎src/svelte/components/messagebar.svelte‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
77
import Link from './link.svelte';
88
import Input from './input.svelte';
9+
import ToolbarPane from './toolbar-pane.svelte';
910
1011
let {
1112
class: className,
@@ -58,8 +59,6 @@
5859
),
5960
);
6061
61-
const hasSendLinkSlots = $derived(sendLink);
62-
6362
let initialWatchedSheet = $state(false);
6463
function watchSheetVisible() {
6564
if (!initialWatchedSheet) {
@@ -196,7 +195,11 @@
196195
{@render beforeInner?.(f7Messagebar)}
197196
198197
<div class="toolbar-inner">
199-
{@render innerStart?.(f7Messagebar)}
198+
{#if innerStart}
199+
<ToolbarPane>
200+
{@render innerStart?.(f7Messagebar)}
201+
</ToolbarPane>
202+
{/if}
200203
<div class="messagebar-area">
201204
{@render beforeArea?.(f7Messagebar)}
202205
<Input
@@ -209,20 +212,25 @@
209212
{readonly}
210213
{resizable}
211214
value={typeof value === 'undefined' ? '' : value}
212-
on:input={onInput}
213-
on:change={onChange}
214-
on:focus={onFocus}
215-
on:blur={onBlur}
215+
oninput={onInput}
216+
onchange={onChange}
217+
onfocus={onFocus}
218+
onblur={onBlur}
216219
/>
217220
{@render afterArea?.(f7Messagebar)}
218221
</div>
219-
{#if (sendLink && sendLink.length > 0) || hasSendLinkSlots}
220-
<Link {onClick}>
221-
{@render sendLink?.(f7Messagebar)}
222-
{sendLink}
223-
</Link>
222+
{#if sendLink || innerEnd}
223+
<ToolbarPane>
224+
{#if sendLink}
225+
<Link onclick={onClick}>
226+
{@render sendLink?.(f7Messagebar)}
227+
{sendLink}
228+
</Link>
229+
{/if}
230+
{@render innerEnd?.(f7Messagebar)}
231+
</ToolbarPane>
224232
{/if}
225-
{@render innerEnd?.(f7Messagebar)}
233+
226234
{@render children?.(f7Messagebar)}
227235
</div>
228236
{@render afterInner?.(f7Messagebar)}

0 commit comments

Comments
 (0)