Skip to content

Commit 80dd2e4

Browse files
nolimits4webnolimits4web
committed
feat(svelte): more v5 components
1 parent 7d1cac5 commit 80dd2e4

13 files changed

Lines changed: 260 additions & 282 deletions

File tree

‎.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
{
2+
"plugins": [
3+
"prettier-plugin-svelte"
4+
],
5+
"overrides": [
6+
{
7+
"files": "*.svelte",
8+
"options": {
9+
"parser": "svelte"
10+
}
11+
}
12+
],
213
"arrowParens": "always",
314
"bracketSpacing": true,
415
"htmlWhitespaceSensitivity": "css",

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -62,23 +62,23 @@
6262
</Block>
6363
<BlockTitle>Deletable Chips / Tags</BlockTitle>
6464
<Block strongIos outlineIos>
65-
<Chip text="Example Chip" deleteable deleteClick={deleteChip} />
65+
<Chip text="Example Chip" deleteable onDelete={deleteChip} />
6666
<Chip
6767
text="Chris"
6868
media="C"
6969
mediaBgColor="orange"
7070
textColor="black"
7171
deleteable
72-
deleteClick={deleteChip}
72+
onDelete={deleteChip}
7373
/>
74-
<Chip text="Jane Doe" deleteable deleteClick={deleteChip}>
74+
<Chip text="Jane Doe" deleteable onDelete={deleteChip}>
7575
{#snippet media()}
7676
<img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
7777
{/snippet}
7878
</Chip>
79-
<Chip text="One More Chip" deleteable deleteClick={deleteChip} />
80-
<Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable deleteClick={deleteChip} />
81-
<Chip text="Adam Smith" deleteable deleteClick={deleteChip}>
79+
<Chip text="One More Chip" deleteable onDelete={deleteChip} />
80+
<Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable onDelete={deleteChip} />
81+
<Chip text="Adam Smith" deleteable onDelete={deleteChip}>
8282
{#snippet media()}
8383
<img src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
8484
{/snippet}

‎src/svelte/components/accordion-item.svelte‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,44 @@
44
import { classNames } from '../shared/utils.js';
55
import { app, f7ready } from '../shared/f7.js';
66
7+
let { class: className, opened = false, children, ...restProps } = $props();
78
8-
let {
9-
class: className,
10-
opened = false,
11-
children,
12-
...restProps
13-
} = $props();
9+
let el = $state(null);
1410
15-
let el;
16-
17-
const classes = $derived(classNames(
18-
className,
19-
'accordion-item',
20-
{
21-
'accordion-item-opened': opened,
22-
},
23-
colorClasses(restProps),
24-
));
11+
const classes = $derived(
12+
classNames(
13+
className,
14+
'accordion-item',
15+
{
16+
'accordion-item-opened': opened,
17+
},
18+
colorClasses(restProps),
19+
),
20+
);
2521
2622
function onBeforeOpen(accEl, prevent) {
2723
if (accEl !== el) return;
28-
restProps.accordionBeforeOpen?.(prevent);
24+
restProps.onAccordionBeforeOpen?.(prevent);
2925
}
3026
function onOpen(accEl) {
3127
if (accEl !== el) return;
32-
restProps.accordionOpen?.();
28+
restProps.onAccordionOpen?.();
3329
}
3430
function onOpened(accEl) {
3531
if (accEl !== el) return;
36-
restProps.accordionOpened?.();
32+
restProps.onAccordionOpened?.();
3733
}
3834
function onBeforeClose(accEl, prevent) {
3935
if (accEl !== el) return;
40-
restProps.accordionBeforeClose?.(prevent);
36+
restProps.onAccordionBeforeClose?.(prevent);
4137
}
4238
function onClose(accEl) {
4339
if (accEl !== el) return;
44-
restProps.accordionClose?.();
40+
restProps.onAccordionClose?.();
4541
}
4642
function onClosed(accEl) {
4743
if (accEl !== el) return;
48-
restProps.accordionClosed?.();
44+
restProps.onAccordionClosed?.();
4945
}
5046
5147
onMount(() => {

‎src/svelte/components/actions-button.svelte‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,51 @@
11
<script>
2-
import { createEventDispatcher } from 'svelte';
32
43
import { colorClasses } from '../shared/mixins.js';
5-
import { classNames, createEmitter } from '../shared/utils.js';
6-
import { restProps } from '../shared/rest-props.js';
4+
import { classNames } from '../shared/utils.js';
75
import { app } from '../shared/f7.js';
86
9-
const emit = createEmitter(createEventDispatcher, $$props);
107
11-
let className = undefined;
12-
export { className as class };
13-
14-
export let strong = false;
15-
export let close = true;
8+
let {
9+
class: className,
10+
strong = false,
11+
close = true,
12+
children,
13+
media,
14+
...restProps
15+
} = $props();
1616
1717
let el;
1818
19-
// eslint-disable-next-line
20-
$: hasMediaSlots = $$slots.media;
2119
22-
$: classes = classNames(
20+
const classes = $derived(classNames(
2321
className,
2422
{
2523
'actions-button': true,
2624
'actions-button-strong': strong,
2725
},
28-
colorClasses($$props),
29-
);
26+
colorClasses(restProps),
27+
));
3028
3129
function onClick() {
3230
if (close && app.f7) {
3331
const dom7 = app.f7.$;
3432
app.f7.actions.close(dom7(el).parents('.actions-modal'));
3533
}
36-
emit('click');
34+
restProps.onclick?.();
3735
}
3836
</script>
3937
40-
<div class={classes} on:click={onClick} bind:this={el} {...restProps($$restProps)}>
41-
{#if hasMediaSlots}
38+
<div class={classes} onclick={onClick} bind:this={el} {...restProps}>
39+
{#if typeof media !== 'undefined'}
4240
<div class="actions-button-media">
43-
<slot name="media" />
41+
{#if typeof media === 'function'}
42+
{@render media?.()}
43+
{:else}
44+
{media}
45+
{/if}
4446
</div>
4547
{/if}
4648
<div class="actions-button-text">
47-
<slot />
49+
{@render children?.()}
4850
</div>
4951
</div>

‎src/svelte/components/actions-group.svelte‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
<script>
22
import { colorClasses } from '../shared/mixins.js';
33
import { classNames } from '../shared/utils.js';
4-
import { restProps } from '../shared/rest-props.js';
4+
let { class: className, children, ...restProps } = $props();
55
6-
let className = undefined;
7-
export { className as class };
8-
9-
$: classes = classNames(className, 'actions-group', colorClasses($$props));
6+
const classes = $derived(classNames(className, 'actions-group', colorClasses(restProps)));
107
</script>
118

12-
<div class={classes} {...restProps($$restProps)}>
13-
<slot />
9+
<div class={classes} {...restProps}>
10+
{@render children?.()}
1411
</div>

‎src/svelte/components/actions-label.svelte‎

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,21 @@
11
<script>
2-
import { createEventDispatcher } from 'svelte';
3-
42
import { colorClasses } from '../shared/mixins.js';
5-
import { classNames, createEmitter } from '../shared/utils.js';
6-
import { restProps } from '../shared/rest-props.js';
7-
8-
const emit = createEmitter(createEventDispatcher, $$props);
3+
import { classNames } from '../shared/utils.js';
94
10-
let className = undefined;
11-
export { className as class };
5+
let { class: className, strong = false, children, ...restProps } = $props();
126
13-
export let strong = false;
14-
15-
$: classes = classNames(
16-
className,
17-
'actions-label',
18-
{
19-
'actions-button-strong': strong,
20-
},
21-
colorClasses($$props),
7+
const classes = $derived(
8+
classNames(
9+
className,
10+
'actions-label',
11+
{
12+
'actions-button-strong': strong,
13+
},
14+
colorClasses(restProps),
15+
),
2216
);
23-
24-
function onClick() {
25-
emit('click');
26-
}
2717
</script>
2818

29-
<div class={classes} on:click={onClick} {...restProps($$restProps)}>
30-
<slot />
19+
<div class={classes} {...restProps}>
20+
{@render children?.()}
3121
</div>

‎src/svelte/components/actions.svelte‎

Lines changed: 45 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,66 @@
11
<script>
2-
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
2+
import { onMount, onDestroy } from 'svelte';
33
import { colorClasses } from '../shared/mixins.js';
4-
import { classNames, createEmitter } from '../shared/utils.js';
5-
import { restProps } from '../shared/rest-props.js';
4+
import { classNames } from '../shared/utils.js';
65
import { app, f7ready } from '../shared/f7.js';
76
import { modalStateClasses } from '../shared/modal-state-classes.js';
87
9-
const emit = createEmitter(createEventDispatcher, $$props);
8+
let {
9+
class: className,
10+
style = '',
11+
opened = undefined,
12+
animate = undefined,
13+
grid = undefined,
14+
convertToPopover = undefined,
15+
forceToPopover = undefined,
16+
target = undefined,
17+
backdrop = undefined,
18+
backdropEl = undefined,
19+
closeByBackdropClick = undefined,
20+
closeByOutsideClick = undefined,
21+
closeOnEscape = undefined,
22+
containerEl = undefined,
23+
...restProps
24+
} = $props();
1025
11-
let className = undefined;
12-
export { className as class };
13-
14-
export let style = '';
15-
export let opened = undefined;
16-
export let animate = undefined;
17-
export let grid = undefined;
18-
export let convertToPopover = undefined;
19-
export let forceToPopover = undefined;
20-
export let target = undefined;
21-
export let backdrop = undefined;
22-
export let backdropEl = undefined;
23-
export let closeByBackdropClick = undefined;
24-
export let closeByOutsideClick = undefined;
25-
export let closeOnEscape = undefined;
26-
export let containerEl = undefined;
27-
28-
let el;
29-
let f7Actions;
30-
31-
const state = {
32-
isOpened: opened,
33-
isClosing: false,
34-
};
26+
let el = $state(null);
27+
let f7Actions = $state(null);
28+
let isOpened = $state(opened);
29+
let isClosing = $state(false);
3530
3631
export function instance() {
3732
return f7Actions;
3833
}
3934
40-
$: classes = classNames(
41-
className,
42-
'actions-modal',
43-
{
44-
'actions-grid': grid,
45-
},
46-
modalStateClasses(state),
47-
colorClasses($$props),
35+
const classes = $derived(
36+
classNames(
37+
className,
38+
'actions-modal',
39+
{
40+
'actions-grid': grid,
41+
},
42+
modalStateClasses({ isOpened, isClosing }),
43+
colorClasses(restProps),
44+
),
4845
);
4946
5047
function onOpen(instance) {
51-
Object.assign(state, {
52-
isOpened: true,
53-
isClosing: false,
54-
});
55-
emit('actionsOpen', [instance]);
48+
isOpened = true;
49+
isClosing = false;
50+
restProps.onActionsOpen?.(instance);
5651
opened = true;
5752
}
5853
function onOpened(instance) {
59-
emit('actionsOpened', [instance]);
54+
restProps.onActionsOpened?.(instance);
6055
}
6156
function onClose(instance) {
62-
Object.assign(state, {
63-
isOpened: false,
64-
isClosing: true,
65-
});
66-
emit('actionsClose', [instance]);
57+
isOpened = false;
58+
isClosing = true;
59+
restProps.onActionsClose?.(instance);
6760
}
6861
function onClosed(instance) {
69-
Object.assign(state, {
70-
isClosing: false,
71-
});
72-
emit('actionsClosed', [instance]);
62+
isClosing = false;
63+
restProps.onActionsClosed?.(instance);
7364
opened = false;
7465
}
7566
@@ -84,7 +75,7 @@
8475
else f7Actions.close();
8576
}
8677
87-
$: watchOpened(opened);
78+
$effect(() => watchOpened(opened));
8879
8980
onMount(() => {
9081
const params = {
@@ -124,6 +115,6 @@
124115
});
125116
</script>
126117
127-
<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
128-
<slot actions={f7Actions} />
118+
<div class={classes} bind:this={el} {style} {...restProps}>
119+
{@render children?.(f7Actions)}
129120
</div>

0 commit comments

Comments
 (0)