Skip to content

Commit 7d1cac5

Browse files
nolimits4webnolimits4web
committed
feat(svelte): updated Radio, Chip, Checkbox components
1 parent a2b12e4 commit 7d1cac5

4 files changed

Lines changed: 105 additions & 102 deletions

File tree

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

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -42,36 +42,46 @@
4242
<BlockTitle>Contact Chips</BlockTitle>
4343
<Block strongIos outlineIos>
4444
<Chip text="Jane Doe">
45-
<img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
45+
{#snippet media()}
46+
<img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
47+
{/snippet}
4648
</Chip>
4749
<Chip text="John Doe">
48-
<img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" />
50+
{#snippet media()}
51+
<img src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" />
52+
{/snippet}
4953
</Chip>
5054
<Chip text="Adam Smith">
51-
<img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
55+
{#snippet media()}
56+
<img src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
57+
{/snippet}
5258
</Chip>
5359
<Chip text="Jennifer" mediaBgColor="pink" media="J" />
5460
<Chip text="Chris" mediaBgColor="yellow" media="C" />
5561
<Chip text="Kate" mediaBgColor="red" media="K" />
5662
</Block>
5763
<BlockTitle>Deletable Chips / Tags</BlockTitle>
5864
<Block strongIos outlineIos>
59-
<Chip text="Example Chip" deleteable onDelete={deleteChip} />
65+
<Chip text="Example Chip" deleteable deleteClick={deleteChip} />
6066
<Chip
6167
text="Chris"
6268
media="C"
6369
mediaBgColor="orange"
6470
textColor="black"
6571
deleteable
66-
onDelete={deleteChip}
72+
deleteClick={deleteChip}
6773
/>
68-
<Chip text="Jane Doe" deleteable onDelete={deleteChip}>
69-
<img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
74+
<Chip text="Jane Doe" deleteable deleteClick={deleteChip}>
75+
{#snippet media()}
76+
<img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
77+
{/snippet}
7078
</Chip>
71-
<Chip text="One More Chip" deleteable onDelete={deleteChip} />
72-
<Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable onDelete={deleteChip} />
73-
<Chip text="Adam Smith" deleteable onDelete={deleteChip}>
74-
<img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
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}>
82+
{#snippet media()}
83+
<img src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
84+
{/snippet}
7585
</Chip>
7686
</Block>
7787
<BlockTitle>Color Chips</BlockTitle>

‎src/svelte/components/checkbox.svelte‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,36 @@
11
<script>
2-
import { createEventDispatcher, onMount, afterUpdate } from 'svelte';
2+
import { onMount } 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
7-
const emit = createEmitter(createEventDispatcher, $$props);
6+
let {
7+
class: className,
8+
checked = undefined,
9+
indeterminate = undefined,
10+
name = undefined,
11+
value = undefined,
12+
disabled = undefined,
13+
readonly = undefined,
14+
children,
15+
...restProps
16+
} = $props();
817
9-
let className = undefined;
10-
export { className as class };
1118
12-
export let checked = undefined;
13-
export let indeterminate = undefined;
14-
export let name = undefined;
15-
export let value = undefined;
16-
export let disabled = undefined;
17-
export let readonly = undefined;
1819
1920
let inputEl;
2021
21-
$: classes = classNames(
22+
const classes = $derived(classNames(
2223
className,
2324
{
2425
checkbox: true,
2526
disabled,
2627
},
27-
colorClasses($$props),
28-
);
28+
colorClasses(restProps),
29+
));
2930
3031
function onChange(event) {
31-
emit('change', [event]);
3232
checked = event.target.checked;
33+
restProps.onchange?.(event);
3334
}
3435
3536
onMount(() => {
@@ -38,14 +39,15 @@
3839
}
3940
});
4041
41-
afterUpdate(() => {
42+
$effect(() => {
4243
if (inputEl) {
4344
inputEl.indeterminate = indeterminate;
4445
}
45-
});
46+
})
47+
4648
</script>
4749
48-
<label class={classes} {...restProps($$restProps)}>
50+
<label class={classes} {...restProps}>
4951
<input
5052
bind:this={inputEl}
5153
type="checkbox"
@@ -54,8 +56,8 @@
5456
{disabled}
5557
{readonly}
5658
{checked}
57-
on:change={onChange}
59+
onchange={onChange}
5860
/>
5961
<i class="icon-checkbox" />
60-
<slot />
62+
{@render children?.()}
6163
</label>

‎src/svelte/components/chip.svelte‎

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,47 @@
11
<script>
2-
import { createEventDispatcher } from 'svelte';
3-
42
import { colorClasses } from '../shared/mixins.js';
5-
import { classNames, plainText, createEmitter } from '../shared/utils.js';
6-
import { restProps } from '../shared/rest-props.js';
3+
import { classNames } from '../shared/utils.js';
74
import { useTooltip } from '../shared/use-tooltip.js';
85
import { useIcon } from '../shared/use-icon.js';
96
107
import UseIcon from './use-icon.svelte';
118
12-
const emit = createEmitter(createEventDispatcher, $$props);
13-
14-
let className = undefined;
15-
export { className as class };
16-
17-
export let media = undefined;
18-
export let text = undefined;
19-
export let deleteable = undefined;
20-
export let mediaBgColor = undefined;
21-
export let mediaTextColor = undefined;
22-
export let outline = undefined;
239
24-
export let tooltip = undefined;
25-
export let tooltipTrigger = undefined;
10+
let {
11+
class: className,
12+
media = undefined,
13+
text = undefined,
14+
deleteable = undefined,
15+
mediaBgColor = undefined,
16+
mediaTextColor = undefined,
17+
outline = undefined,
18+
tooltip = undefined,
19+
tooltipTrigger = undefined,
20+
children,
21+
...restProps
22+
} = $props();
2623
2724
let el;
2825
29-
$: classes = classNames(
26+
const classes = $derived(classNames(
3027
className,
3128
'chip',
3229
{
3330
'chip-outline': outline,
3431
},
35-
colorClasses($$props),
36-
);
32+
colorClasses(restProps),
33+
));
3734
38-
$: mediaClasses = classNames(
35+
const mediaClasses = $derived(classNames(
3936
'chip-media',
4037
mediaTextColor && `text-color-${mediaTextColor}`,
4138
mediaBgColor && `bg-color-${mediaBgColor}`,
42-
);
39+
));
4340
44-
// eslint-disable-next-line
45-
$: hasMediaSlots = $$slots.media;
46-
// eslint-disable-next-line
47-
$: hasTextSlots = $$slots.text;
48-
// eslint-disable-next-line
49-
$: hasDefaultSlots = $$slots.default;
41+
const icon = $derived(useIcon(restProps));
5042
51-
$: icon = useIcon($$props);
52-
53-
function onClick(e) {
54-
emit('click', [e]);
55-
}
5643
function onDeleteClick(e) {
57-
emit('delete', [e]);
44+
restProps.deleteClick?.(e);
5845
}
5946
</script>
6047
@@ -63,25 +50,33 @@
6350
<div
6451
bind:this={el}
6552
class={classes}
66-
on:click={onClick}
67-
{...restProps($$restProps)}
53+
{...restProps}
6854
use:useTooltip={{ tooltip, tooltipTrigger }}
6955
>
70-
{#if media || hasMediaSlots || icon}
56+
{#if media || icon}
7157
<div class={mediaClasses}>
7258
{#if icon}
7359
<UseIcon {icon} />
7460
{/if}
75-
{plainText(media)}
76-
<slot name="media" />
77-
</div>
78-
{/if}
79-
{#if text || hasTextSlots || hasDefaultSlots}
80-
<div class="chip-label">
81-
{plainText(text)}
82-
<slot name="text" />
83-
<slot />
61+
{#if media}
62+
{#if typeof media === 'function'}
63+
{@render media?.()}
64+
{:else}
65+
{media}
66+
{/if}
67+
{/if}
8468
</div>
8569
{/if}
86-
{#if deleteable}<a class="chip-delete" on:click={onDeleteClick} />{/if}
70+
<div class="chip-label">
71+
{#if text}
72+
{#if typeof text === 'function'}
73+
{@render text?.()}
74+
{:else}
75+
{text}
76+
{/if}
77+
{/if}
78+
79+
{@render children?.()}
80+
</div>
81+
{#if deleteable}<a class="chip-delete" onclick={onDeleteClick} />{/if}
8782
</div>

‎src/svelte/components/radio.svelte‎

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,44 @@
11
<script>
2-
import { createEventDispatcher } from 'svelte';
32
import { colorClasses } from '../shared/mixins.js';
4-
import { classNames, createEmitter } from '../shared/utils.js';
5-
import { restProps } from '../shared/rest-props.js';
3+
import { classNames } from '../shared/utils.js';
64
7-
const emit = createEmitter(createEventDispatcher, $$props);
5+
let {
6+
class: className,
7+
checked = undefined,
8+
name = undefined,
9+
value = undefined,
10+
disabled = undefined,
11+
readonly = undefined,
12+
children,
13+
...restProps
14+
} = $props();
815
9-
let className = undefined;
10-
export { className as class };
1116
12-
export let checked = undefined;
13-
export let name = undefined;
14-
export let value = undefined;
15-
export let disabled = undefined;
16-
export let readonly = undefined;
17-
18-
let inputEl;
19-
20-
$: classes = classNames(
17+
const classes = $derived(classNames(
2118
className,
2219
'radio',
2320
{
2421
disabled,
2522
},
26-
colorClasses($$props),
27-
);
23+
colorClasses(restProps),
24+
));
2825
2926
function onChange(event) {
30-
emit('change', [event]);
3127
checked = event.target.checked;
28+
restProps.onchange?.(event);
3229
}
3330
</script>
3431
35-
<label class={classes} {...restProps($$restProps)}>
32+
<label class={classes} {...restProps}>
3633
<input
37-
bind:this={inputEl}
3834
type="radio"
3935
{name}
4036
value={typeof value === 'undefined' ? '' : value}
4137
{disabled}
4238
{readonly}
4339
{checked}
44-
on:change={onChange}
40+
onchange={onChange}
4541
/>
46-
<i class="icon-radio" />
47-
<slot />
42+
<i class="icon-radio"></i>
43+
{@render children?.()}
4844
</label>

0 commit comments

Comments
 (0)