From 9b40088050924a234e90359fab0fd273ad4e933e Mon Sep 17 00:00:00 2001
From: Yevgeny Tomenko <skie@mail.ru>
Date: Fri, 27 Sep 2024 21:05:39 +0300
Subject: [PATCH] extract css into theme files. provide inline css theme. add
 feature to teleport top buttons out of component

---
 templates/element/Search/v_search.php    |   1 +
 templates/element/Search/v_templates.php | 413 +----------------------
 webroot/css/default.css                  | 392 +++++++++++++++++++++
 webroot/css/inline.css                   | 410 ++++++++++++++++++++++
 webroot/js/main.js                       |  70 +---
 5 files changed, 834 insertions(+), 452 deletions(-)
 create mode 100644 webroot/css/default.css
 create mode 100644 webroot/css/inline.css

diff --git a/templates/element/Search/v_search.php b/templates/element/Search/v_search.php
index 168ab31..f3da469 100644
--- a/templates/element/Search/v_search.php
+++ b/templates/element/Search/v_search.php
@@ -15,6 +15,7 @@
     window._search.values = {};
 <?php endif; ?>
 </script>
+<?= $this->Html->css('CakeDC/SearchFilter.default'); ?>
 
 <script src="/search_filter/js/vue3.js"></script>
 <script src="/search_filter/js/main.js" type="module"></script>
diff --git a/templates/element/Search/v_templates.php b/templates/element/Search/v_templates.php
index 27d618a..2f024d1 100644
--- a/templates/element/Search/v_templates.php
+++ b/templates/element/Search/v_templates.php
@@ -1,401 +1,20 @@
-<style>
-:root {
-    --search-color-background: #f8f9fa;
-    --search-color-border: #e9ecef;
-    --search-color-text: #495057;
-    --search-color-text-light: #6c757d;
-    --search-color-primary: #007bff;
-    --search-color-primary-dark: #0056b3;
-    --search-color-danger: #dc3545;
-    --search-color-danger-dark: #a71d2a;
-    --search-color-white: #fff;
-    --search-color-gray-100: #f8f9fa;
-    --search-color-gray-200: #e9ecef;
-    --search-color-gray-300: #dee2e6;
-    --search-color-gray-400: #ced4da;
-    --search-color-gray-500: #adb5bd;
-    --search-color-gray-600: #6c757d;
-    --search-color-gray-700: #495057;
-    --search-color-gray-800: #343a40;
-    --search-color-gray-900: #212529;
-    --search-color-filter-highlight: #d1e1f0;
-}
-
-.search-filter-container {
-    background-color: var(--search-color-background);
-    border: 1px solid var(--search-color-border);
-    border-radius: 8px;
-    padding: 1.25rem;
-    margin-bottom: 1.25rem;
-}
-
-.search-filter-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-}
-
-.search-filter-title {
-    font-size: 1.2em;
-    font-weight: bold;
-    color: var(--search-color-text);
-}
-
-.search-filter-actions {
-    display: flex;
-    gap: 0.625rem;
-}
-
-.btn-clear-filters,
-.btn-add-filter {
-    padding: 6px 12px;
-    border-radius: 4px;
-    font-size: 0.9em;
-    transition: all 0.3s ease;
-}
-
-.btn-clear-filters {
-    background-color: var(--search-color-gray-200);
-    color: var(--search-color-text);
-    border: none;
-}
-
-.btn-clear-filters:hover {
-    background-color: var(--search-color-gray-300);
-}
-
-.btn-add-filter {
-    background-color: var(--search-color-primary);
-    color: var(--search-color-white);
-    border: none;
-}
-
-.btn-add-filter:hover {
-    background-color: var(--search-color-primary-dark);
-}
-
-.search-filter-list {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.search-filter-item.item-alert {
-    background-color: var(--search-color-filter-highlight);
-}
-
-.search-filter-item {
-    background-color: var(--search-color-white);
-    border: 1px solid var(--search-color-gray-400);
-    border-radius: 6px;
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    transition: all 0.3s ease;
-}
-
-.search-filter-item:hover {
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-
-.search-filter-item-content {
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-
-.search-filter-item label {
-    font-weight: bold;
-    color: var(--search-color-text);
-    margin-bottom: 0;
-    min-width: 6.25rem;
-}
-
-.search-filter-item select,
-.search-filter-item input {
-    border: 1px solid var(--search-color-gray-400);
-    border-radius: 4px;
-    padding: 0.3125rem 0.625rem;
-    flex-grow: 1;
-}
-
-.search-filter-item .btn-remove-filter {
-    background: none;
-    border: none;
-    color: var(--search-color-danger);
-    cursor: pointer;
-    font-size: 1.2em;
-    padding: 0;
-}
-
-.search-filter-item .btn-remove-filter:hover {
-    color: var(--search-color-danger-dark);
-}
-
-.search-empty-state {
-    text-align: center;
-    padding: 1.25rem;
-    background-color: var(--search-color-gray-200);
-    border-radius: 6px;
-    color: var(--search-color-text-light);
-}
-
-@media (max-width: 768px) {
-    .search-filter-header {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.625rem;
-    }
-
-    .search-filter-item-content {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .search-filter-item label {
-        min-width: auto;
-    }
-}
-
-.search-multiple-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.625rem;
-    margin-top: 0.625rem;
-}
-
-.search-multiple-add {
-    align-self: flex-start;
-    color: var(--search-color-white);
-    border: none;
-    border-radius: 4px;
-    padding: 0.3125rem 0.625rem;
-    font-size: 0.9em;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.search-multiple-item {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    background-color: var(--search-color-gray-100);
-    border: 1px solid var(--search-color-gray-400);
-    border-radius: 4px;
-    padding: 0.625rem;
-}
-
-.search-multiple-item .input-area {
-    flex-grow: 1;
-    display: flex;
-    gap: 0.625rem;
-}
-
-.search-multiple-item input,
-.search-multiple-item select {
-    flex-grow: 1;
-    border: 1px solid var(--search-color-gray-400);
-    border-radius: 4px;
-    padding: 0.3125rem 0.625rem;
-}
-
-.search-multiple-item .btn-remove-item {
-    background: none;
-    border: none;
-    color: var(--search-color-danger);
-    cursor: pointer;
-    font-size: 1.2em;
-    padding: 0;
-}
-
-.search-multiple-item .btn-remove-item:hover {
-    color: var(--search-color-danger-dark);
-}
-
-@media (max-width: 768px) {
-    .search-multiple-item {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .search-multiple-item .input-area {
-        flex-direction: column;
-    }
-}
-
-.add-new-filter {
-    display: inline-block;
-}
-
-.add-new-filter-content {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 0.625rem;
-}
-
-.add-new-filter label {
-    font-weight: bold;
-    color: var(--search-color-text);
-    margin-bottom: 0;
-}
-
-.add-new-filter select {
-    min-width: 12.5rem;
-    border: 1px solid var(--search-color-gray-400);
-    border-radius: 4px;
-    padding: 0.375rem 0.75rem;
-    background-color: var(--search-color-white);
-    font-size: 0.9em;
-}
-
-.add-new-filter select:focus {
-    outline: none;
-    border-color: var(--search-color-primary);
-    box-shadow: 0 0 0 3px rgba(0,123,255,.25);
-}
-
-@media (max-width: 768px) {
-    .add-new-filter-content {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    .add-new-filter select {
-        width: 100%;
-    }
-}
-
-.search-filter-btn {
-    padding: 6px 12px;
-    border-radius: 4px;
-    border: 1px solid var(--search-color-gray-400);
-    cursor: pointer;
-    transition: background-color 0.3s ease, color 0.3s ease;
-    background-color: var(--search-color-gray-100);
-    color: var(--search-color-text);
-}
-
-.search-filter-btn:hover {
-    background-color: var(--search-color-gray-300);
-    border-color: var(--search-color-gray-300);
-    color: var(--search-color-text);
-}
-
-.search-filter-actions {
-    display: flex;
-    gap: 0.625rem;
-}
-
-.search-multiple-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.625rem;
-    margin-top: 0.625rem;
-}
-
-.search-multiple-add {
-    align-self: flex-start;
-}
-
-.multiple-item {
-    margin-top: 0.625rem;
-    margin-left: 1rem;
-}
-.fa.fa-times {
-    margin-right: 0.3125rem;
-    margin-top: 0.3125rem;
-}
-.conditions {
-    align-items: center;
-}
-.hidden {
-    display: none !important;
-}
-
-/* lookup widget */
-.lookup-wrapper {
-    position: relative;
-    display: inline-block;
-}
-
-.lookup-wrapper input {
-    width: 100%;
-}
-
-.suggestions-list {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    display: block;
-    padding: 0.3125rem 0;
-    margin: 0.125rem 0 0;
-    font-size: 14px;
-    text-align: left;
-    list-style: none;
-    background-color: var(--search-color-white);
-    background-clip: padding-box;
-    border: 1px solid rgba(0,0,0,.15);
-    border-radius: 4px;
-    box-shadow: 0 6px 12px rgba(0,0,0,.175);
-    max-height: 12.5rem;
-    overflow-y: auto;
-}
-
-.suggestions-list li {
-    padding: 0.2rem 1.25rem;
-    clear: both;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--search-color-gray-900);
-    white-space: nowrap;
-    cursor: pointer;
-}
-
-.suggestions-list li:hover {
-    color: var(--search-color-gray-800);
-    text-decoration: none;
-    background-color: var(--search-color-gray-100);
-}
-
-.suggestions-list .is-active {
-  background-color: var(--search-color-gray-200);
-}
-.lookup-wrapper {
-    position: relative;
-}
-.input-wrapper {
-    position: relative;
-}
-.loading-icon {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-.loading-spinner {
-    border: 2px solid #f3f3f3;
-    border-top: 2px solid #3498db;
-    border-radius: 50%;
-    width: 20px;
-    height: 20px;
-    animation: spin 1s linear infinite;
-}
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-</style>
-
 <script type="text/x-template" id="search-list">
     <div class="search-filter-container">
-        <div class="search-filter-header">
+        <Teleport :to="teleportTarget" v-if="shouldTeleport">
+            <div class="search-filter-header">
+                <h3 class="search-filter-title"></h3>
+                <div class="search-filter-actions">
+                    <a class="search-filter-btn" @click="removeAll()">Clear Filters</a>
+                    <AddNewFilter
+                        :fields="fields"
+                        :components="components"
+                        @add-filter="addFilter($event)"
+                    />
+                </div>
+            </div>
+        </Teleport>
+
+        <div v-else class="search-filter-header">
             <h3 class="search-filter-title"></h3>
             <div class="search-filter-actions">
                 <a class="search-filter-btn" @click="removeAll()">Clear Filters</a>
@@ -703,7 +322,7 @@ class="form-control value value-to"
 <script type="text/x-template" id="search-multiple-list-template">
     <div class="search-multiple-list">
         <a class="search-filter-btn search-multiple-add" @click="add()">
-            <i class="fa fa-plus"></i> Add Value
+            <i class="fa fa-plus"></i>&nbsp;Add&nbsp;Value
         </a>
         <div class="search-multiple-items">
             <SearchMultipleItem
diff --git a/webroot/css/default.css b/webroot/css/default.css
new file mode 100644
index 0000000..4cd6c7d
--- /dev/null
+++ b/webroot/css/default.css
@@ -0,0 +1,392 @@
+:root {
+    --search-color-background: #f8f9fa;
+    --search-color-border: #e9ecef;
+    --search-color-text: #495057;
+    --search-color-text-light: #6c757d;
+    --search-color-primary: #007bff;
+    --search-color-primary-dark: #0056b3;
+    --search-color-danger: #dc3545;
+    --search-color-danger-dark: #a71d2a;
+    --search-color-white: #fff;
+    --search-color-gray-100: #f8f9fa;
+    --search-color-gray-200: #e9ecef;
+    --search-color-gray-300: #dee2e6;
+    --search-color-gray-400: #ced4da;
+    --search-color-gray-500: #adb5bd;
+    --search-color-gray-600: #6c757d;
+    --search-color-gray-700: #495057;
+    --search-color-gray-800: #343a40;
+    --search-color-gray-900: #212529;
+    --search-color-filter-highlight: #d1e1f0;
+}
+
+.search-filter-container {
+    background-color: var(--search-color-background);
+    border: 1px solid var(--search-color-border);
+    border-radius: 8px;
+    padding: 1.25rem;
+    margin-bottom: 1.25rem;
+}
+
+.search-filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.search-filter-title {
+    font-size: 1.2em;
+    font-weight: bold;
+    color: var(--search-color-text);
+}
+
+.search-filter-actions {
+    display: flex;
+    gap: 0.625rem;
+}
+
+.btn-clear-filters,
+.btn-add-filter {
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    transition: all 0.3s ease;
+}
+
+.btn-clear-filters {
+    background-color: var(--search-color-gray-200);
+    color: var(--search-color-text);
+    border: none;
+}
+
+.btn-clear-filters:hover {
+    background-color: var(--search-color-gray-300);
+}
+
+.btn-add-filter {
+    background-color: var(--search-color-primary);
+    color: var(--search-color-white);
+    border: none;
+}
+
+.btn-add-filter:hover {
+    background-color: var(--search-color-primary-dark);
+}
+
+.search-filter-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.search-filter-item.item-alert {
+    background-color: var(--search-color-filter-highlight);
+}
+
+.search-filter-item {
+    background-color: var(--search-color-white);
+    border: 1px solid var(--search-color-gray-400);
+    border-radius: 6px;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    transition: all 0.3s ease;
+}
+
+.search-filter-item:hover {
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.search-filter-item-content {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.search-filter-item label {
+    font-weight: bold;
+    color: var(--search-color-text);
+    margin-bottom: 0;
+    min-width: 6.25rem;
+}
+
+.search-filter-item select,
+.search-filter-item input {
+    border: 1px solid var(--search-color-gray-400);
+    border-radius: 4px;
+    padding: 0.3125rem 0.625rem;
+    flex-grow: 1;
+}
+
+.search-filter-item .btn-remove-filter {
+    background: none;
+    border: none;
+    color: var(--search-color-danger);
+    cursor: pointer;
+    font-size: 1.2em;
+    padding: 0;
+}
+
+.search-filter-item .btn-remove-filter:hover {
+    color: var(--search-color-danger-dark);
+}
+
+.search-empty-state {
+    text-align: center;
+    padding: 1.25rem;
+    background-color: var(--search-color-gray-200);
+    border-radius: 6px;
+    color: var(--search-color-text-light);
+}
+
+@media (max-width: 768px) {
+    .search-filter-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.625rem;
+    }
+
+    .search-filter-item-content {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-filter-item label {
+        min-width: auto;
+    }
+}
+
+.search-multiple-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    margin-top: 0.625rem;
+}
+
+.search-multiple-add {
+    align-self: flex-start;
+    color: var(--search-color-white);
+    border: none;
+    border-radius: 4px;
+    padding: 0.3125rem 0.625rem;
+    font-size: 0.9em;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.search-multiple-item {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    background-color: var(--search-color-gray-100);
+    border: 1px solid var(--search-color-gray-400);
+    border-radius: 4px;
+    padding: 0.625rem;
+}
+
+.search-multiple-item .input-area {
+    flex-grow: 1;
+    display: flex;
+    gap: 0.625rem;
+}
+
+.search-multiple-item input,
+.search-multiple-item select {
+    flex-grow: 1;
+    border: 1px solid var(--search-color-gray-400);
+    border-radius: 4px;
+    padding: 0.3125rem 0.625rem;
+}
+
+.search-multiple-item .btn-remove-item {
+    background: none;
+    border: none;
+    color: var(--search-color-danger);
+    cursor: pointer;
+    font-size: 1.2em;
+    padding: 0;
+}
+
+.search-multiple-item .btn-remove-item:hover {
+    color: var(--search-color-danger-dark);
+}
+
+@media (max-width: 768px) {
+    .search-multiple-item {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-multiple-item .input-area {
+        flex-direction: column;
+    }
+}
+
+.add-new-filter {
+    display: inline-block;
+}
+
+.add-new-filter-content {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.625rem;
+}
+
+.add-new-filter label {
+    font-weight: bold;
+    color: var(--search-color-text);
+    margin-bottom: 0;
+}
+
+.add-new-filter select {
+    min-width: 12.5rem;
+    border: 1px solid var(--search-color-gray-400);
+    border-radius: 4px;
+    padding: 0.375rem 0.75rem;
+    background-color: var(--search-color-white);
+    font-size: 0.9em;
+}
+
+.add-new-filter select:focus {
+    outline: none;
+    border-color: var(--search-color-primary);
+    box-shadow: 0 0 0 3px rgba(0,123,255,.25);
+}
+
+@media (max-width: 768px) {
+    .add-new-filter-content {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .add-new-filter select {
+        width: 100%;
+    }
+}
+
+.search-filter-btn {
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--search-color-gray-400);
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    background-color: var(--search-color-gray-100);
+    color: var(--search-color-text);
+}
+
+.search-filter-btn:hover {
+    background-color: var(--search-color-gray-300);
+    border-color: var(--search-color-gray-300);
+    color: var(--search-color-text);
+}
+
+.search-filter-actions {
+    display: flex;
+    gap: 0.625rem;
+}
+
+.search-multiple-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    margin-top: 0.625rem;
+}
+
+.search-multiple-add {
+    align-self: flex-start;
+}
+
+.multiple-item {
+    margin-top: 0.625rem;
+    margin-left: 1rem;
+}
+.fa.fa-times {
+    margin-right: 0.3125rem;
+    margin-top: 0.3125rem;
+}
+.conditions {
+    align-items: center;
+}
+.hidden {
+    display: none !important;
+}
+
+/* lookup widget */
+.lookup-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.lookup-wrapper input {
+    width: 100%;
+}
+
+.suggestions-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: block;
+    padding: 0.3125rem 0;
+    margin: 0.125rem 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: var(--search-color-white);
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.15);
+    border-radius: 4px;
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    max-height: 12.5rem;
+    overflow-y: auto;
+}
+
+.suggestions-list li {
+    padding: 0.2rem 1.25rem;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--search-color-gray-900);
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.suggestions-list li:hover {
+    color: var(--search-color-gray-800);
+    text-decoration: none;
+    background-color: var(--search-color-gray-100);
+}
+
+.suggestions-list .is-active {
+  background-color: var(--search-color-gray-200);
+}
+.lookup-wrapper {
+    position: relative;
+}
+.input-wrapper {
+    position: relative;
+}
+.loading-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.loading-spinner {
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #3498db;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/webroot/css/inline.css b/webroot/css/inline.css
new file mode 100644
index 0000000..8ea9c4b
--- /dev/null
+++ b/webroot/css/inline.css
@@ -0,0 +1,410 @@
+:root {
+    --search-color-background: #f8f9fa;
+    --search-color-border: #e9ecef;
+    --search-color-text: #495057;
+    --search-color-text-light: #6c757d;
+    --search-color-primary: #007bff;
+    --search-color-primary-dark: #0056b3;
+    --search-color-danger: #dc3545;
+    --search-color-danger-dark: #a71d2a;
+    --search-color-white: #fff;
+    --search-color-gray-100: #f8f9fa;
+    --search-color-gray-200: #e9ecef;
+    --search-color-gray-300: #dee2e6;
+    --search-color-gray-400: #ced4da;
+    --search-color-gray-500: #adb5bd;
+    --search-color-gray-600: #6c757d;
+    --search-color-gray-700: #495057;
+    --search-color-gray-800: #343a40;
+    --search-color-gray-900: #212529;
+    --search-color-filter-highlight: #d1e1f0;
+}
+
+.search-filter-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    background-color: var(--search-color-background);
+    border: 1px solid var(--search-color-border);
+    border-radius: 8px;
+    padding: 1rem;
+}
+
+.search-filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.search-filter-title {
+    margin: 0;
+    font-size: 1.1em;
+    font-weight: bold;
+    color: var(--search-color-text);
+}
+
+.search-filter-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.search-filter-btn {
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--search-color-gray-400);
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    background-color: var(--search-color-gray-100);
+    color: var(--search-color-text);
+}
+
+.search-filter-btn:hover {
+    background-color: var(--search-color-gray-300);
+    border-color: var(--search-color-gray-300);
+    color: var(--search-color-text);
+}
+
+.search-filter-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: flex-start;
+}
+
+.search-filter-item {
+    display: flex;
+    align-items: center;
+    background-color: var(--search-color-white);
+    border: 1px solid var(--search-color-gray-300);
+    border-radius: 4px;
+    padding: 0.5rem;
+    flex: 0 1 auto;
+    min-width: min-content;
+    max-width: 100%;
+}
+
+.search-filter-item.item-alert {
+    background-color: var(--search-color-filter-highlight);
+}
+
+.search-filter-item-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    flex-grow: 1;
+}
+
+.search-filter-item label {
+    white-space: nowrap;
+    font-weight: bold;
+    color: var(--search-color-text);
+    margin-right: 0.5rem;
+}
+
+.search-filter-item select:not([type="hidden"]),
+.search-filter-item input:not([type="hidden"]) {
+    border: 1px solid var(--search-color-gray-400);
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+}
+
+.btn-remove-filter {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    color: var(--search-color-danger);
+    cursor: pointer;
+    font-size: 1.2em;
+    padding: 0.25rem;
+    margin-left: 0.25rem;
+}
+
+.btn-remove-filter:hover {
+    color: var(--search-color-danger-dark);
+}
+
+.search-empty-state {
+    text-align: center;
+    padding: 1rem;
+    background-color: var(--search-color-gray-100);
+    border-radius: 4px;
+    color: var(--search-color-text-light);
+}
+
+.search-multiple-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.search-multiple-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: flex-start;
+}
+
+.search-multiple-item {
+    display: flex;
+    align-items: center;
+    background-color: var(--search-color-white);
+    border: 1px solid var(--search-color-gray-300);
+    border-radius: 4px;
+    padding: 0.5rem;
+    flex: 0 1 auto;
+    min-width: min-content;
+    max-width: calc(50% - 0.25rem);
+    flex-grow: 1;
+}
+
+.search-multiple-item .input-area {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    flex-grow: 1;
+}
+
+.search-multiple-add {
+    align-self: center;
+    border: none;
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.9em;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    margin-bottom: 0.5rem;
+    white-space: nowrap;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+}
+
+.search-multiple-add i {
+    margin-right: 0.25rem;
+}
+
+.btn-remove-item {
+    flex-shrink: 0;
+    background: none;
+    border: none;
+    color: var(--search-color-danger);
+    cursor: pointer;
+    font-size: 1.2em;
+    padding: 0.25rem;
+    margin-left: 0.25rem;
+}
+
+.btn-remove-item:hover {
+    color: var(--search-color-danger-dark);
+}
+
+.add-new-filter {
+    display: inline-block;
+}
+
+.add-new-filter-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.add-new-filter label {
+    font-weight: bold;
+    color: var(--search-color-text);
+    margin-bottom: 0;
+}
+
+.add-new-filter select {
+    min-width: 12.5rem;
+    border: 1px solid var(--search-color-gray-400);
+    border-radius: 4px;
+    padding: 0.375rem 0.75rem;
+    background-color: var(--search-color-white);
+    font-size: 0.9em;
+}
+
+.add-new-filter select:focus {
+    outline: none;
+    border-color: var(--search-color-primary);
+    box-shadow: 0 0 0 3px rgba(0,123,255,.25);
+}
+
+.conditions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.conditions select {
+    min-width: 100px;
+    max-width: 150px;
+    width: 100%;
+}
+
+.lookup-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.input-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.loading-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.loading-spinner {
+    border: 2px solid var(--search-color-gray-200);
+    border-top: 2px solid var(--search-color-primary);
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.suggestions-list {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    display: block;
+    padding: 0.3125rem 0;
+    margin: 0.125rem 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: var(--search-color-white);
+    background-clip: padding-box;
+    border: 1px solid var(--search-color-gray-300);
+    border-radius: 4px;
+    box-shadow: 0 6px 12px rgba(0,0,0,.175);
+    max-height: 12.5rem;
+    overflow-y: auto;
+}
+
+.suggestions-list li {
+    padding: 0.2rem 1.25rem;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--search-color-text);
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.suggestions-list li:hover,
+.suggestions-list .is-active {
+    color: var(--search-color-text);
+    text-decoration: none;
+    background-color: var(--search-color-gray-200);
+}
+
+@media (max-width: 768px) {
+    .search-filter-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .search-filter-actions {
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .search-filter-item,
+    .search-multiple-item {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .search-filter-item-content,
+    .search-multiple-item .input-area,
+    .conditions {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .search-filter-item label,
+    .search-multiple-item label {
+        margin-right: 0;
+        margin-bottom: 0.25rem;
+        white-space: normal;
+    }
+
+    .search-filter-item select:not([type="hidden"]),
+    .search-filter-item input:not([type="hidden"]),
+    .search-multiple-item select:not([type="hidden"]),
+    .search-multiple-item input:not([type="hidden"]),
+    .conditions select {
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .search-filter-item select[multiple],
+    .search-multiple-item select[multiple] {
+        height: auto;
+        min-height: 100px;
+    }
+
+    .add-new-filter-content {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .add-new-filter select {
+        width: 100%;
+    }
+
+    .search-multiple-list {
+        width: 100%;
+    }
+
+    .search-multiple-items {
+        flex-direction: column;
+    }
+
+    .search-multiple-add {
+        align-self: stretch;
+        width: 100%;
+    }
+
+    .btn-remove-filter,
+    .btn-remove-item {
+        padding: 0.5rem;
+        margin-left: auto;
+    }
+
+    .lookup-wrapper {
+        width: 100%;
+    }
+
+    .suggestions-list {
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .loading-icon {
+        right: 0.5rem;
+    }
+}
+
+.hidden {
+    display: none !important;
+}
diff --git a/webroot/js/main.js b/webroot/js/main.js
index 1884d5f..79a9986 100644
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -74,7 +74,7 @@ const inputTypeMap = {
     },
     'select': function (type, condition) {
         if (isMultiple(condition)) {
-            return 'SearchMultiple';
+            return 'SearchSelectMultiple';
         }
         return 'SearchSelect';
     },
@@ -107,59 +107,6 @@ function getInputType(type, condition) {
     return defaultComponent;
 }
 
-function getInputType1(type, condition) {
-    let componentName = 'SearchInput';
-    if (condition == 'in' && type == 'multiple') {
-        componentName = 'SearchSelectMultiple';
-    } else if (condition == 'in') {
-        componentName = 'SearchMultiple';
-    } else if (condition == 'none') {
-        componentName = 'SearchNone';
-    } else if (type == 'autocomplete' && condition == 'like') {
-        componentName = 'SearchInput';
-    } else if (type == 'autocomplete') {
-        componentName = 'SearchLookupInput';
-    } else if (type == 'numeric' && condition == 'between') {
-        componentName = 'SearchInputNumericRange';
-    } else if (type == 'datetime') {
-        switch (condition) {
-            case 'last_week':
-            case 'this_week':
-            case 'yesterday':
-            case 'today':
-                componentName = 'SearchInputDateTimeFixed';
-                break;
-            case 'between':
-                componentName = 'SearchInputDateTimeRange';
-                break;
-            default:
-                componentName = 'SearchInputDateTime';
-        }
-    } else if (type == 'date') {
-        switch (condition) {
-            case 'last_week':
-            case 'this_week':
-            case 'yesterday':
-            case 'today':
-                componentName = 'SearchInputDateFixed';
-                break;
-            case 'between':
-                componentName = 'SearchInputDateRange';
-                break;
-            default:
-                componentName = 'SearchInputDate';
-        }
-    } else if (type == 'select') {
-        componentName = 'SearchSelect';
-    } else if (type == 'multiple') {
-        componentName = 'SearchSelectMultiple';
-    } else {
-        componentName = 'SearchInput';
-    }
-
-    return componentName;
-};
-
 const SearchApp = {
     template: "#search-list",
     rootElemId: 'ext-search',
@@ -168,6 +115,8 @@ const SearchApp = {
             filters: [],
             components: [],
             appKey: uuid(),
+            shouldTeleport: false,
+            teleportTarget: null,
         };
     },
     methods: {
@@ -234,10 +183,20 @@ const SearchApp = {
             let idx = this.components.findIndex(el => el.index == evt.index);
             this.components[idx] = {...this.components[idx], value: evt.value};
         },
-
+        setTeleportStatus() {
+            const headerId = window._search.searchHeaderId;
+            if (headerId && document.getElementById(headerId)) {
+                this.shouldTeleport = true;
+                this.teleportTarget = `#${headerId}`;
+            } else {
+                this.shouldTeleport = false;
+                this.teleportTarget = null;
+            }
+        },
     },
     mounted() {
         console.info("Search mounted!");
+        this.setTeleportStatus();
         if (this.values != null && this.values != undefined) {
             const keys = Object.keys(this.values);
             for (let filter of keys) {
@@ -860,3 +819,4 @@ const createMyApp = (root, callback) => {
 };
 window._search.rootElemId = SearchApp.rootElemId;
 window._search.createMyApp = createMyApp;
+