From f82c34a8725080e004c0165af3d35b319fc90aff Mon Sep 17 00:00:00 2001 From: Kerrial Newham <41723430+Kerrialn@users.noreply.github.com> Date: Fri, 8 Nov 2024 09:40:54 +0100 Subject: [PATCH] Fix color lock feature (#21) * add lock/unlock feature | Fix Bootstrap53Dto * Auto stash before rebase of "main" * update fe input types * add js to preview * add js to preview * Add uuid to InputDto | Add isLocked to inputDto | fix input issues * fix cs --- assets/vue/Store/store.js | 28 +--- .../controllers/Input/ColorPickerInput.vue | 77 +++++---- .../vue/controllers/Page/CustomizerPage.vue | 130 ++++++++------- composer.json | 1 + composer.lock | 155 +++++++++++++++++- public/examples/example.bootstrap.5.3.html | 82 +++++++++ src/Controller/Api/CompileController.php | 8 + src/DataTransferObject/InputDto.php | 19 ++- src/Service/BootstrapCompilerService.php | 25 ++- symfony.lock | 9 + 10 files changed, 406 insertions(+), 128 deletions(-) diff --git a/assets/vue/Store/store.js b/assets/vue/Store/store.js index efba523..b10ab44 100644 --- a/assets/vue/Store/store.js +++ b/assets/vue/Store/store.js @@ -1,10 +1,9 @@ -import { reactive } from 'vue'; +import {reactive} from 'vue'; const state = reactive({ variables: {}, css: null, isLoading: true, - lockedColors: {}, }); export const store = { @@ -34,29 +33,12 @@ export const store = { state.isLoading = value; }, - // Method to update locked state for specific keys - updateLock(id, locked) { - state.lockedColors[id] = locked; - }, - - // Function to set random color values, excluding locked colors setRandomColorVariables() { Object.keys(state.variables.colors).forEach((key) => { - const colorItem = state.variables.colors[key]; - if (!state.lockedColors[key] && colorItem.type === 'color') { - colorItem.value = `#${Math.floor(Math.random() * 16777215) - .toString(16) - .padStart(6, '0')}`; + const color = state.variables.colors[key]; + if (!color.isLocked && color.type === 'color') { + color.value = `#${Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')}`; } }); - }, - - resetDefaults(sectionKey) { - if (state.variables[sectionKey]) { - Object.keys(state.variables[sectionKey]).forEach((key) => { - const item = state.variables[sectionKey][key]; - item.value = item.default; - }); - } - }, + } }; diff --git a/assets/vue/controllers/Input/ColorPickerInput.vue b/assets/vue/controllers/Input/ColorPickerInput.vue index 8faea81..31d5a51 100644 --- a/assets/vue/controllers/Input/ColorPickerInput.vue +++ b/assets/vue/controllers/Input/ColorPickerInput.vue @@ -4,13 +4,13 @@ {{ modelValue.label }}
- + - - + + + +
+ + + + + + diff --git a/src/Controller/Api/CompileController.php b/src/Controller/Api/CompileController.php index b22f4ad..d252efd 100644 --- a/src/Controller/Api/CompileController.php +++ b/src/Controller/Api/CompileController.php @@ -10,6 +10,7 @@ use Symfony\Component\HttpFoundation\JsonResponse; use Symfony\Component\HttpKernel\Attribute\MapRequestPayload; use Symfony\Component\Routing\Attribute\Route; +use Throwable; #[OA\Tag(name: 'Compile')] #[Route(path: '/compile', methods: ['POST'])] @@ -42,6 +43,13 @@ public function compileBootstrap53(#[MapRequestPayload(serializationContext: ['g { $variables = ClassPropertyService::getClassProperties(rootDto: $bootstrap53Dto); $css = $this->bootstrapCompilerService->compileCustomBootstrap(variables: $variables); + + if ($css instanceof Throwable) { + return new JsonResponse(data: [ + 'message' => $css->getMessage(), + ], status: 500); + } + return new JsonResponse(data: $css); } diff --git a/src/DataTransferObject/InputDto.php b/src/DataTransferObject/InputDto.php index 97e4b44..af341ff 100644 --- a/src/DataTransferObject/InputDto.php +++ b/src/DataTransferObject/InputDto.php @@ -5,6 +5,7 @@ use App\Enumerators\InputTypeEnum; use OpenApi\Attributes as OA; use Symfony\Component\Serializer\Attribute\Groups; +use Symfony\Component\Uid\Uuid; #[OA\Schema( @@ -13,6 +14,8 @@ )] final readonly class InputDto { + #[Groups(['form'])] + private null|Uuid $id; /** * @param string|null $label @@ -28,9 +31,17 @@ public function __construct( #[Groups(['form'])] private null|string|bool|float|int $default = null, #[Groups(['form', 'compile'])] - private null|string|bool|float|int $value = null + private null|string|bool|float|int $value = null, + #[Groups(['form'])] + private bool $isLocked = false ) { + $this->id = Uuid::v4(); + } + + public function getId(): ?Uuid + { + return $this->id; } public function getLabel(): ?string @@ -52,4 +63,10 @@ public function getValue(): float|bool|int|string|null { return $this->value; } + + public function isLocked(): bool + { + return $this->isLocked; + } + } \ No newline at end of file diff --git a/src/Service/BootstrapCompilerService.php b/src/Service/BootstrapCompilerService.php index 43573ff..03b5f9a 100644 --- a/src/Service/BootstrapCompilerService.php +++ b/src/Service/BootstrapCompilerService.php @@ -7,19 +7,11 @@ namespace App\Service; use Minify_CSSmin; -use Psr\Log\LoggerInterface; -use Symfony\Component\Stopwatch\Stopwatch; +use ScssPhp\ScssPhp\Compiler; +use Throwable; class BootstrapCompilerService { - public function __construct( - private readonly Stopwatch $stopwatch, - private readonly LoggerInterface $logger, - private readonly ScssCompiler $scssCompiler, - ) - { - } - /** * @param array $variables * @return string @@ -33,7 +25,7 @@ public function getCustomVariable(array $variables): string * @param array $variables * @return string */ - public function compileCustomBootstrap(array $variables, bool $isMinified = false): string + public function compileCustomBootstrap(array $variables, bool $isMinified = false): Throwable|string { $scssString = ScssService::arrayToScssString(variables: $variables); @@ -45,10 +37,15 @@ public function compileCustomBootstrap(array $variables, bool $isMinified = fals @import "bootstrap"; SCSS; - $this->stopwatch->start('bootstrap'); - $css = $this->scssCompiler->compileScss($scssContent, __DIR__ . '/../../node_modules/bootstrap/scss/'); + $compiler = new Compiler(); + $compiler->setImportPaths(__DIR__ . '/../../node_modules/bootstrap/scss/'); + + try { + $css = $compiler->compileString($scssContent)->getCss(); + } catch (Throwable $exception) { + return $exception; + } - $this->logger->info(sprintf("Css compiled in %s ms", $this->stopwatch->stop('bootstrap')->getDuration())); if ($isMinified) { return Minify_CSSmin::minify($css); } diff --git a/symfony.lock b/symfony.lock index f384e0c..d7c7450 100644 --- a/symfony.lock +++ b/symfony.lock @@ -285,6 +285,15 @@ "templates/base.html.twig" ] }, + "symfony/uid": { + "version": "7.1", + "recipe": { + "repo": "github.com/symfony/recipes", + "branch": "main", + "version": "7.0", + "ref": "0df5844274d871b37fc3816c57a768ffc60a43a5" + } + }, "symfony/ux-turbo": { "version": "v2.21.0" },