@@ -147,6 +128,7 @@
style="width: 100%; height: 100%;"
>
+
@@ -158,7 +140,7 @@ import SwitchInput from "../Input/SwitchInput.vue";
import AppLayout from '../AppLayout.vue';
import axios from "axios";
import {store} from '../../Store/store';
-import {watch, ref, onMounted, reactive} from 'vue';
+import {ref, onMounted, computed, reactive} from 'vue';
import AutocompleteInput from "../Input/AutocompleteInput.vue";
import StringInput from "../Input/StringInput.vue";
import FloatInput from "../Input/FloatInput.vue";
@@ -166,8 +148,10 @@ import IntegerInput from "../Input/IntegerInput.vue";
export default {
setup() {
+ const searchQuery = ref('');
const previewFrame = ref(null);
const expandedSections = reactive({});
+ const errorMessage = ref('');
const toggleSection = (sectionKey) => {
expandedSections[sectionKey] = !expandedSections[sectionKey];
@@ -205,14 +189,22 @@ export default {
const compile = async () => {
store.isLoading = true;
- await axios.post('/api/v1/compile/bootstrap53', store.variables).then((response) => {
- store.css = response.data;
- applyCss(store.css);
- }).finally(() => {
- store.isLoading = false;
- });
+ errorMessage.value = '';
+
+ await axios.post('/api/v1/compile/bootstrap53', store.variables)
+ .then((response) => {
+ store.css = response.data;
+ applyCss(store.css);
+ })
+ .catch((error) => {
+ errorMessage.value = error.response?.data?.message || 'An error occurred during compilation.';
+ })
+ .finally(() => {
+ store.isLoading = false;
+ });
};
+
const applyCss = (css) => {
const iframe = previewFrame.value;
if (iframe && iframe.contentDocument) {
@@ -227,10 +219,33 @@ export default {
store.setRandomColorVariables();
};
- const handleLockUpdate = ({id, locked}) => {
- store.updateLock(id, locked);
+ const filteredSections = computed(() => {
+ if (!searchQuery.value) return store.variables;
+
+ const query = searchQuery.value.toLowerCase();
+ return Object.fromEntries(
+ Object.entries(store.variables).map(([sectionKey, section]) => {
+ // Filter items within each section based on the label
+ const filteredItems = Object.fromEntries(
+ Object.entries(section).filter(([itemKey, item]) =>
+ item.label && item.label.toLowerCase().includes(query)
+ )
+ );
+
+ // Only return sections that have matching items
+ return [sectionKey, filteredItems];
+ }).filter(([, filteredItems]) => Object.keys(filteredItems).length > 0) // Keep sections with at least one matching item
+ );
+ });
+
+ const matchesSearch = (sectionKey, itemKey, value) => {
+ const query = searchQuery.value.toLowerCase();
+ return (
+ (value?.label && value.label.toLowerCase().includes(query))
+ );
};
+
onMounted(async () => {
await axios.get('/api/v1/inputs/bootstrap53').then((response) => {
store.variables = response.data;
@@ -241,9 +256,12 @@ export default {
return {
store,
+ searchQuery,
+ matchesSearch,
+ filteredSections,
previewFrame,
+ errorMessage,
randomizeColors,
- handleLockUpdate,
expandedSections,
toggleSection,
download,
diff --git a/composer.json b/composer.json
index 049d7c3..2b8ad6c 100644
--- a/composer.json
+++ b/composer.json
@@ -44,6 +44,7 @@
"symfony/string": "7.1.*",
"symfony/translation": "7.1.*",
"symfony/twig-bundle": "7.1.*",
+ "symfony/uid": "7.1.*",
"symfony/ux-turbo": "^2.21",
"symfony/ux-vue": "^2.21",
"symfony/validator": "7.1.*",
diff --git a/composer.lock b/composer.lock
index ee37e18..735b8ab 100644
--- a/composer.lock
+++ b/composer.lock
@@ -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": "1161544a938da28975e5bcc9dd93b109",
+ "content-hash": "b5b4c0382a9bed04bc3e9b0bb8612cda",
"packages": [
{
"name": "carbonphp/carbon-doctrine-types",
@@ -6142,6 +6142,85 @@
],
"time": "2024-09-09T11:45:10+00:00"
},
+ {
+ "name": "symfony/polyfill-uuid",
+ "version": "v1.31.0",
+ "source": {
+ "type": "git",
+ "url": "https://github.com/symfony/polyfill-uuid.git",
+ "reference": "21533be36c24be3f4b1669c4725c7d1d2bab4ae2"
+ },
+ "dist": {
+ "type": "zip",
+ "url": "https://api.github.com/repos/symfony/polyfill-uuid/zipball/21533be36c24be3f4b1669c4725c7d1d2bab4ae2",
+ "reference": "21533be36c24be3f4b1669c4725c7d1d2bab4ae2",
+ "shasum": ""
+ },
+ "require": {
+ "php": ">=7.2"
+ },
+ "provide": {
+ "ext-uuid": "*"
+ },
+ "suggest": {
+ "ext-uuid": "For best performance"
+ },
+ "type": "library",
+ "extra": {
+ "thanks": {
+ "name": "symfony/polyfill",
+ "url": "https://github.com/symfony/polyfill"
+ }
+ },
+ "autoload": {
+ "files": [
+ "bootstrap.php"
+ ],
+ "psr-4": {
+ "Symfony\\Polyfill\\Uuid\\": ""
+ }
+ },
+ "notification-url": "https://packagist.org/downloads/",
+ "license": [
+ "MIT"
+ ],
+ "authors": [
+ {
+ "name": "Grégoire Pineau",
+ "email": "lyrixx@lyrixx.info"
+ },
+ {
+ "name": "Symfony Community",
+ "homepage": "https://symfony.com/contributors"
+ }
+ ],
+ "description": "Symfony polyfill for uuid functions",
+ "homepage": "https://symfony.com",
+ "keywords": [
+ "compatibility",
+ "polyfill",
+ "portable",
+ "uuid"
+ ],
+ "support": {
+ "source": "https://github.com/symfony/polyfill-uuid/tree/v1.31.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-09T11:45:10+00:00"
+ },
{
"name": "symfony/process",
"version": "v7.1.7",
@@ -7718,6 +7797,80 @@
],
"time": "2024-09-25T14:20:29+00:00"
},
+ {
+ "name": "symfony/uid",
+ "version": "v7.1.6",
+ "source": {
+ "type": "git",
+ "url": "https://github.com/symfony/uid.git",
+ "reference": "65befb3bb2d503bbffbd08c815aa38b472999917"
+ },
+ "dist": {
+ "type": "zip",
+ "url": "https://api.github.com/repos/symfony/uid/zipball/65befb3bb2d503bbffbd08c815aa38b472999917",
+ "reference": "65befb3bb2d503bbffbd08c815aa38b472999917",
+ "shasum": ""
+ },
+ "require": {
+ "php": ">=8.2",
+ "symfony/polyfill-uuid": "^1.15"
+ },
+ "require-dev": {
+ "symfony/console": "^6.4|^7.0"
+ },
+ "type": "library",
+ "autoload": {
+ "psr-4": {
+ "Symfony\\Component\\Uid\\": ""
+ },
+ "exclude-from-classmap": [
+ "/Tests/"
+ ]
+ },
+ "notification-url": "https://packagist.org/downloads/",
+ "license": [
+ "MIT"
+ ],
+ "authors": [
+ {
+ "name": "Grégoire Pineau",
+ "email": "lyrixx@lyrixx.info"
+ },
+ {
+ "name": "Nicolas Grekas",
+ "email": "p@tchwork.com"
+ },
+ {
+ "name": "Symfony Community",
+ "homepage": "https://symfony.com/contributors"
+ }
+ ],
+ "description": "Provides an object-oriented API to generate and represent UIDs",
+ "homepage": "https://symfony.com",
+ "keywords": [
+ "UID",
+ "ulid",
+ "uuid"
+ ],
+ "support": {
+ "source": "https://github.com/symfony/uid/tree/v7.1.6"
+ },
+ "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-25T14:20:29+00:00"
+ },
{
"name": "symfony/ux-turbo",
"version": "v2.21.0",
diff --git a/public/examples/example.bootstrap.5.3.html b/public/examples/example.bootstrap.5.3.html
index c5b6383..bc4c649 100644
--- a/public/examples/example.bootstrap.5.3.html
+++ b/public/examples/example.bootstrap.5.3.html
@@ -9,6 +9,17 @@
padding: 15px;
}
+
+
+
@@ -1727,6 +1738,77 @@