Added stimulus and turbo. Added first controller to close sidebar.
This commit is contained in:
Krzysztof Płaczek
@@ -1,3 +1,4 @@
|
||||
import './bootstrap.js';
|
||||
/*
|
||||
* Welcome to your app's main JavaScript file!
|
||||
*
|
||||
|
||||
5
assets/bootstrap.js
vendored
Normal file
5
assets/bootstrap.js
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import { startStimulusApp } from '@symfony/stimulus-bundle';
|
||||
|
||||
const app = startStimulusApp();
|
||||
// register any custom, 3rd party controllers here
|
||||
// app.register('some_controller_name', SomeImportedController);
|
||||
15
assets/controllers.json
Normal file
15
assets/controllers.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"controllers": {
|
||||
"@symfony/ux-turbo": {
|
||||
"turbo-core": {
|
||||
"enabled": true,
|
||||
"fetch": "eager"
|
||||
},
|
||||
"mercure-turbo-stream": {
|
||||
"enabled": false,
|
||||
"fetch": "eager"
|
||||
}
|
||||
}
|
||||
},
|
||||
"entrypoints": []
|
||||
}
|
||||
15
assets/controllers/closable_controller.js
Normal file
15
assets/controllers/closable_controller.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import { Controller } from '@hotwired/stimulus';
|
||||
|
||||
export default class extends Controller {
|
||||
async close(){
|
||||
this.element.style.width = '0';
|
||||
await this.#waitForAnimation();
|
||||
this.element.remove();
|
||||
}
|
||||
|
||||
#waitForAnimation() {
|
||||
return Promise.all(
|
||||
this.element.getAnimations().map((animation) => animation.finished),
|
||||
);
|
||||
}
|
||||
}
|
||||
16
assets/controllers/hello_controller.js
Normal file
16
assets/controllers/hello_controller.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import { Controller } from '@hotwired/stimulus';
|
||||
|
||||
/*
|
||||
* This is an example Stimulus controller!
|
||||
*
|
||||
* Any element with a data-controller="hello" attribute will cause
|
||||
* this controller to be executed. The name "hello" comes from the filename:
|
||||
* hello_controller.js -> "hello"
|
||||
*
|
||||
* Delete this file or adapt it for your use!
|
||||
*/
|
||||
export default class extends Controller {
|
||||
connect() {
|
||||
this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,9 @@
|
||||
"symfony/property-info": "7.1.*",
|
||||
"symfony/runtime": "7.1.*",
|
||||
"symfony/serializer": "7.1.*",
|
||||
"symfony/stimulus-bundle": "^2.20",
|
||||
"symfony/twig-bundle": "7.1.*",
|
||||
"symfony/ux-turbo": "^2.20",
|
||||
"symfony/yaml": "7.1.*",
|
||||
"symfonycasts/tailwind-bundle": "^0.6.0",
|
||||
"twig/extra-bundle": "^2.12|^3.0",
|
||||
|
||||
168
composer.lock
generated
168
composer.lock
generated
@@ -4,7 +4,7 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "231f06ecf107b9b13d6a816a7d050d04",
|
||||
"content-hash": "12cd5ad142606b5e2b2d2cebd42dff12",
|
||||
"packages": [
|
||||
{
|
||||
"name": "composer/semver",
|
||||
@@ -3397,6 +3397,75 @@
|
||||
],
|
||||
"time": "2024-04-18T09:32:20+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/stimulus-bundle",
|
||||
"version": "v2.20.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/symfony/stimulus-bundle.git",
|
||||
"reference": "ae69e3a764694b9f45d8a009dd2b8c22444c5e0c"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/symfony/stimulus-bundle/zipball/ae69e3a764694b9f45d8a009dd2b8c22444c5e0c",
|
||||
"reference": "ae69e3a764694b9f45d8a009dd2b8c22444c5e0c",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"php": ">=8.1",
|
||||
"symfony/config": "^5.4|^6.0|^7.0",
|
||||
"symfony/dependency-injection": "^5.4|^6.0|^7.0",
|
||||
"symfony/deprecation-contracts": "^2.0|^3.0",
|
||||
"symfony/finder": "^5.4|^6.0|^7.0",
|
||||
"symfony/http-kernel": "^5.4|^6.0|^7.0",
|
||||
"twig/twig": "^2.15.3|^3.8"
|
||||
},
|
||||
"require-dev": {
|
||||
"symfony/asset-mapper": "^6.3|^7.0",
|
||||
"symfony/framework-bundle": "^5.4|^6.0|^7.0",
|
||||
"symfony/phpunit-bridge": "^5.4|^6.0|^7.0",
|
||||
"symfony/twig-bundle": "^5.4|^6.0|^7.0",
|
||||
"zenstruck/browser": "^1.4"
|
||||
},
|
||||
"type": "symfony-bundle",
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Symfony\\UX\\StimulusBundle\\": "src"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Symfony Community",
|
||||
"homepage": "https://symfony.com/contributors"
|
||||
}
|
||||
],
|
||||
"description": "Integration with your Symfony app & Stimulus!",
|
||||
"keywords": [
|
||||
"symfony-ux"
|
||||
],
|
||||
"support": {
|
||||
"source": "https://github.com/symfony/stimulus-bundle/tree/v2.20.0"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://symfony.com/sponsor",
|
||||
"type": "custom"
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fabpot",
|
||||
"type": "github"
|
||||
},
|
||||
{
|
||||
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2024-09-24T09:27:42+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/string",
|
||||
"version": "v7.1.5",
|
||||
@@ -3837,6 +3906,103 @@
|
||||
],
|
||||
"time": "2024-09-19T21:48:23+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/ux-turbo",
|
||||
"version": "v2.20.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/symfony/ux-turbo.git",
|
||||
"reference": "5eaa803dea9f954aa124963f2c872b414d97cc97"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/symfony/ux-turbo/zipball/5eaa803dea9f954aa124963f2c872b414d97cc97",
|
||||
"reference": "5eaa803dea9f954aa124963f2c872b414d97cc97",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"php": ">=8.1",
|
||||
"symfony/stimulus-bundle": "^2.9.1"
|
||||
},
|
||||
"conflict": {
|
||||
"symfony/flex": "<1.13"
|
||||
},
|
||||
"require-dev": {
|
||||
"dbrekelmans/bdi": "dev-main",
|
||||
"doctrine/doctrine-bundle": "^2.4.3",
|
||||
"doctrine/orm": "^2.8 | 3.0",
|
||||
"phpstan/phpstan": "^1.10",
|
||||
"symfony/debug-bundle": "^5.4|^6.0|^7.0",
|
||||
"symfony/expression-language": "^5.4|^6.0|^7.0",
|
||||
"symfony/form": "^5.4|^6.0|^7.0",
|
||||
"symfony/framework-bundle": "^5.4|^6.0|^7.0",
|
||||
"symfony/mercure-bundle": "^0.3.7",
|
||||
"symfony/messenger": "^5.4|^6.0|^7.0",
|
||||
"symfony/panther": "^1.0|^2.0",
|
||||
"symfony/phpunit-bridge": "^5.4|^6.0|^7.0",
|
||||
"symfony/process": "^5.4|6.3.*|^7.0",
|
||||
"symfony/property-access": "^5.4|^6.0|^7.0",
|
||||
"symfony/security-core": "^5.4|^6.0|^7.0",
|
||||
"symfony/stopwatch": "^5.4|^6.0|^7.0",
|
||||
"symfony/twig-bundle": "^5.4|^6.0|^7.0",
|
||||
"symfony/web-profiler-bundle": "^5.4|^6.0|^7.0",
|
||||
"symfony/webpack-encore-bundle": "^2.1.1"
|
||||
},
|
||||
"type": "symfony-bundle",
|
||||
"extra": {
|
||||
"thanks": {
|
||||
"name": "symfony/ux",
|
||||
"url": "https://github.com/symfony/ux"
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Symfony\\UX\\Turbo\\": "src/"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Kévin Dunglas",
|
||||
"email": "kevin@dunglas.fr"
|
||||
},
|
||||
{
|
||||
"name": "Symfony Community",
|
||||
"homepage": "https://symfony.com/contributors"
|
||||
}
|
||||
],
|
||||
"description": "Hotwire Turbo integration for Symfony",
|
||||
"homepage": "https://symfony.com",
|
||||
"keywords": [
|
||||
"hotwire",
|
||||
"javascript",
|
||||
"mercure",
|
||||
"symfony-ux",
|
||||
"turbo",
|
||||
"turbo-stream"
|
||||
],
|
||||
"support": {
|
||||
"source": "https://github.com/symfony/ux-turbo/tree/v2.20.0"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://symfony.com/sponsor",
|
||||
"type": "custom"
|
||||
},
|
||||
{
|
||||
"url": "https://github.com/fabpot",
|
||||
"type": "github"
|
||||
},
|
||||
{
|
||||
"url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
|
||||
"type": "tidelift"
|
||||
}
|
||||
],
|
||||
"time": "2024-09-10T12:38:04+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/var-dumper",
|
||||
"version": "v7.1.5",
|
||||
|
||||
@@ -8,4 +8,6 @@ return [
|
||||
Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
|
||||
Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true],
|
||||
Symfonycasts\TailwindBundle\SymfonycastsTailwindBundle::class => ['all' => true],
|
||||
Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
|
||||
Symfony\UX\Turbo\TurboBundle::class => ['all' => true],
|
||||
];
|
||||
|
||||
@@ -16,4 +16,13 @@ return [
|
||||
'path' => './assets/app.js',
|
||||
'entrypoint' => true,
|
||||
],
|
||||
'@hotwired/stimulus' => [
|
||||
'version' => '3.2.2',
|
||||
],
|
||||
'@symfony/stimulus-bundle' => [
|
||||
'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
|
||||
],
|
||||
'@hotwired/turbo' => [
|
||||
'version' => '7.3.0',
|
||||
],
|
||||
];
|
||||
|
||||
17
symfony.lock
17
symfony.lock
@@ -106,6 +106,20 @@
|
||||
"config/routes.yaml"
|
||||
]
|
||||
},
|
||||
"symfony/stimulus-bundle": {
|
||||
"version": "2.20",
|
||||
"recipe": {
|
||||
"repo": "github.com/symfony/recipes",
|
||||
"branch": "main",
|
||||
"version": "2.13",
|
||||
"ref": "6acd9ff4f7fd5626d2962109bd4ebab351d43c43"
|
||||
},
|
||||
"files": [
|
||||
"assets/bootstrap.js",
|
||||
"assets/controllers.json",
|
||||
"assets/controllers/hello_controller.js"
|
||||
]
|
||||
},
|
||||
"symfony/twig-bundle": {
|
||||
"version": "7.1",
|
||||
"recipe": {
|
||||
@@ -119,6 +133,9 @@
|
||||
"templates/base.html.twig"
|
||||
]
|
||||
},
|
||||
"symfony/ux-turbo": {
|
||||
"version": "v2.20.0"
|
||||
},
|
||||
"symfony/web-profiler-bundle": {
|
||||
"version": "7.1",
|
||||
"recipe": {
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<aside
|
||||
class="pb-8 lg:pb-0 lg:w-[411px] shrink-0 lg:block lg:min-h-screen text-white transition-all overflow-hidden px-8 border-b lg:border-b-0 lg:border-r border-white/20"
|
||||
class="transition-all overflow-hidden pb-8 lg:pb-0 lg:w-[411px] shrink-0 lg:block lg:min-h-screen text-white transition-all overflow-hidden px-8 border-b lg:border-b-0 lg:border-r border-white/20"
|
||||
data-controller="closable"
|
||||
>
|
||||
<div class="flex justify-between mt-11 mb-7">
|
||||
<h2 class="text-[32px] font-semibold">My Ship Status</h2>
|
||||
<button>
|
||||
<button data-action="closable#close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 448 512"><!--!Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path fill="#fff" d="M384 96c0-17.7 14.3-32 32-32s32 14.3 32 32V416c0 17.7-14.3 32-32 32s-32-14.3-32-32V96zM9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L109.3 224 288 224c17.7 0 32 14.3 32 32s-14.3 32-32 32l-178.7 0 73.4 73.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-128-128z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -12,7 +13,7 @@
|
||||
<div class="flex flex-col space-y-1.5">
|
||||
<div class="rounded-2xl py-1 px-3 flex justify-center w-32 items-center" style="background: rgba(255, 184, 0, .1);">
|
||||
<div class="rounded-full h-2 w-2 bg-amber-400 blur-[1px] mr-2"></div>
|
||||
<p class="uppercase text-xs">in progress</p>
|
||||
<p class="uppercase text-xs">{{ myShip.getStatusAsString }}</p>
|
||||
</div>
|
||||
<h3 class="tracking-tight text-[22px] font-semibold">
|
||||
<a class="hover:underline" href="{{ path('app_starship_show', {
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
<p class="text-xl">{{ ship.captain }}</p>
|
||||
</div>
|
||||
|
||||
<div class="pl-8 w-[100px]">
|
||||
<div class="pl-8 w-[200px]">
|
||||
<p class="text-slate-400 text-xs">Class</p>
|
||||
<p class="text-xl">{{ ship.class }}</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user