Skip to content

Commit aed3196

Browse files
ChqThomasChqThomas
committed
[Svelte] Example page for ux.symfony.com
1 parent 2e2b82d commit aed3196

File tree

16 files changed

+200
-1
lines changed

16 files changed

+200
-1
lines changed

‎ux.symfony.com/assets/app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { registerReactControllerComponents } from '@symfony/ux-react';
22
import {registerVueControllerComponents} from "@symfony/ux-vue";
3+
import { registerSvelteControllerComponents } from "@symfony/ux-svelte";
34

45
// any CSS you import will output into a single css file (app.css in this case)
56
import './styles/app.scss';
@@ -15,3 +16,4 @@ import Tab from 'bootstrap/js/dist/tab';
1516
// initialize symfony/ux-react
1617
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
1718
registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue?$/, 'lazy'));
19+
registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));

‎ux.symfony.com/assets/controllers.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@
6262
"fetch": "eager"
6363
}
6464
},
65+
"@symfony/ux-svelte": {
66+
"svelte": {
67+
"enabled": true,
68+
"fetch": "eager"
69+
}
70+
},
6571
"@symfony/ux-swup": {
6672
"swup": {
6773
"enabled": true,

‎ux.symfony.com/assets/images/svelte.png

2.77 KB
Loading

‎ux.symfony.com/assets/svelte/components/PackageList.svelte

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script lang='ts'>
2+
import { fade } from 'svelte/transition';
3+
import { flip } from 'svelte/animate';
4+
5+
export let packages = [];
6+
let transitionDuration = 200;
7+
</script>
8+
9+
{#if packages.length === 0}
10+
<div class='alert alert-info'>Sad trombone... we haven't built any components that
11+
match this search yet!
12+
</div>
13+
{:else}
14+
<div class='row'>
15+
{#each packages as uxPackage(uxPackage.name)}
16+
<a
17+
href='{uxPackage.url}'
18+
class='col-12 col-md-4 col-lg-3 mb-2'
19+
animate:flip={{duration: transitionDuration}} in:fade={{duration:transitionDuration}}
20+
>
21+
<div class='components-container p-2'>
22+
<div class='d-flex'>
23+
<div
24+
class='live-component-img d-flex justify-content-center align-items-center'
25+
style='background: {uxPackage.gradient}'>
26+
<img width='17' height='17'
27+
src='{uxPackage.imageUrl}'
28+
alt='`Image for the {uxPackage.humanName} UX package`'
29+
/>
30+
</div>
31+
<h4 class='ubuntu-title ps-2 align-self-center'>
32+
{ uxPackage.humanName }
33+
</h4>
34+
</div>
35+
</div>
36+
</a>
37+
{/each}
38+
</div>
39+
{/if}

‎ux.symfony.com/assets/svelte/controllers/PackageSearch.svelte

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script>
2+
import PackageList from '../components/PackageList';
3+
4+
export let packages = [];
5+
6+
let search = '';
7+
8+
$: filteredPackages = packages.filter(
9+
uxPackage => uxPackage.humanName.toLowerCase().includes(search.toLowerCase())
10+
);
11+
</script>
12+
13+
<div>
14+
<input
15+
bind:value={search}
16+
class='form-control'
17+
type='search'
18+
placeholder='This search is built in Svelte!'
19+
/>
20+
<div class='mt-3'>
21+
<PackageList packages={filteredPackages} />
22+
</div>
23+
</div>

‎ux.symfony.com/code_snippets/_PackageSearch.svelte

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script>
2+
import PackageList from '../components/PackageList';
3+
export let packages = [];
4+
let search = '';
5+
$: filteredPackages = packages.filter(
6+
uxPackage => uxPackage.humanName.includes(search)
7+
);
8+
</script>
9+
<div>
10+
<input bind:value={search} />
11+
<div className='mt-3'>
12+
<PackageList packages={filteredPackages} />
13+
</div>
14+
</div>

‎ux.symfony.com/code_snippets/_svelte.html.twig

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{#
2+
"PackageSearch" mounts assets/svelte/controllers/PackageSearch.svelte.
3+
4+
"packagesData" is dynamic data, which becomes the "packages" prop!
5+
#}
6+
7+
<div {{ svelte_component('PackageSearch', {
8+
packages: packagesData
9+
}) }}>
10+
Loading... <i class="fas fa-cog fa-spin fa-3x"></i>
11+
</div>

‎ux.symfony.com/composer.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"symfony/ux-live-component": "2.x-dev",
3636
"symfony/ux-notify": "2.x-dev",
3737
"symfony/ux-react": "2.x-dev",
38+
"symfony/ux-svelte": "2.x-dev",
3839
"symfony/ux-swup": "2.x-dev",
3940
"symfony/ux-turbo": "2.x-dev",
4041
"symfony/ux-twig-component": "2.x-dev",

‎ux.symfony.com/config/bundles.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@
2424
Symfony\UX\Notify\NotifyBundle::class => ['all' => true],
2525
Symfony\UX\React\ReactBundle::class => ['all' => true],
2626
Symfony\UX\Vue\VueBundle::class => ['all' => true],
27+
Symfony\UX\Svelte\SvelteBundle::class => ['all' => true],
2728
];

‎ux.symfony.com/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
"@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",
2525
"@symfony/ux-notify": "file:vendor/symfony/ux-notify/assets",
2626
"@symfony/ux-react": "file:vendor/symfony/ux-react/assets",
27+
"@symfony/ux-svelte": "file:vendor/symfony/ux-svelte/assets",
2728
"@symfony/ux-swup": "file:vendor/symfony/ux-swup/assets",
2829
"@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
2930
"@symfony/ux-typed": "file:vendor/symfony/ux-typed/assets",
@@ -41,6 +42,8 @@
4142
"sass-loader": "^13.0.0",
4243
"snarkdown": "^2.0.0",
4344
"stimulus-clipboard": "^3.1.0",
45+
"svelte": "^3.0",
46+
"svelte-loader": "^3.0.0",
4447
"swup": "^2.0",
4548
"tom-select": "^2.2.2",
4649
"typed.js": "^2.0",

0 commit comments

Comments
 (0)