From 1e7d921ed9a2fed955cfdd4907bd088b7ebe6989 Mon Sep 17 00:00:00 2001 From: Luan Freitas <33601626+luanfreitasdev@users.noreply.github.com> Date: Thu, 9 Nov 2023 10:41:12 -0300 Subject: [PATCH] [5.x] Add filter container class (#1238) * add filter classes * remove uniqid --- dist/mix-manifest.json | 4 ++-- dist/powergrid.css | 2 +- dist/tailwind.css | 2 +- resources/css/style.css | 4 ++++ resources/css/tailwind.css | 4 ++++ .../views/components/frameworks/tailwind/filter.blade.php | 3 +-- 6 files changed, 13 insertions(+), 6 deletions(-) diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json index 0f8972b8..7e7fa58a 100644 --- a/dist/mix-manifest.json +++ b/dist/mix-manifest.json @@ -1,7 +1,7 @@ { "/powergrid.js": "/powergrid.js?id=3043c3fe79e9f0b46ab1caad476bf63e", "/bootstrap5.css": "/bootstrap5.css?id=03aba1df82c23db07c1d1096efcd42ae", - "/tailwind.css": "/tailwind.css?id=23e875c1f75fa40980aa6037d6d9daf0", + "/tailwind.css": "/tailwind.css?id=0a704dc8cc7a1f02d8000c080300b604", "/tom-select.css": "/tom-select.css?id=7af730d2c4bf937316d4002948b1571d", - "/powergrid.css": "/powergrid.css?id=f6bd5092ec92b7fb6d3488dd0bb5602f" + "/powergrid.css": "/powergrid.css?id=c85bbcfe3743c122f454f0e55408eaf4" } diff --git a/dist/powergrid.css b/dist/powergrid.css index 57c71896..778f2a3c 100644 --- a/dist/powergrid.css +++ b/dist/powergrid.css @@ -1 +1 @@ -[x-cloak]{display:none}table{width:100%}.btn-light{background-color:#fff;border-color:#d7dbdf;color:#000;font-size:.85rem}.form-control:disabled,.form-control[readonly]{background-color:#fff!important;opacity:1}.btn-light:hover{background-color:#fff;border-color:#d7dbdf;color:#000;font-size:.85rem}.btn-light,.has-search .form-control{padding-left:10px!important}.table .checkbox-column{max-width:50px!important;text-align:center;width:50px!important}.accordion-button{padding:.7rem}.btn-light,.has-search .form-control{padding-left:2.375rem}.page-link{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(229 231 235/var(--tw-border-opacity));border-right-width:1px;color:rgb(30 64 175/var(--tw-text-opacity));display:block;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding-bottom:.5rem;padding-top:.5rem;text-align:center;width:3rem}.page-link:last-child{border-width:0}.page-item.active .page-link,.page-link:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity));border-color:rgb(29 78 216/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.page-item.disabled .page-link{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(229 231 235/var(--tw-border-opacity));color:rgb(209 213 219/var(--tw-text-opacity))}.page-link{color:gray!important}.page-item.active .page-link{background-color:gray;border-color:gray;color:#fff!important}.loader{animation:spinner 1.5s linear infinite;border-top-color:#222}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(1turn)}}table thead{color:#6b6a6a;font-size:.75rem;padding-bottom:8px;padding-left:15px;padding-top:8px;text-transform:uppercase}.badge{font-size:.77em}.btn,.form-control{box-shadow:none!important}.btn-group-vertical>.btn,.btn-group>.btn{border-color:#ced4da!important;flex:1 1 auto;position:relative}[x-ref=editable].pg-single-line{overflow:hidden;white-space:nowrap}[x-ref=editable].pg-single-line br{display:none}[x-ref=editable].pg-single-line *{display:inline;white-space:nowrap}[x-ref=editable][placeholder]:empty:before{background-color:transparent;color:gray;content:attr(placeholder);position:absolute}.power-grid-button{width:100%}.pg-btn-white{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;--tw-ring-opacity:1;--tw-ring-color:rgb(226 232 240/var(--tw-ring-opacity));align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(203 213 225/var(--tw-border-opacity));border-radius:.5rem;border-width:1px;color:rgb(100 116 139/var(--tw-text-opacity));-moz-column-gap:.5rem;column-gap:.5rem;display:inline-flex;font-size:.875rem;justify-content:center;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem .75rem}.pg-btn-white:hover{--tw-bg-opacity:1;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);background-color:rgb(241 245 249/var(--tw-bg-opacity));box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.pg-btn-white:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-offset-width:1px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.pg-btn-white:disabled{cursor:not-allowed;opacity:.8}.bs5-rotate-0{transform:rotate(0deg);transition:all .3s ease}.bs5-rotate-90{transform:rotate(90deg);transition:all .3s ease}.bs5-w-h-1_5em{height:1.5em;width:1.5em}.pg-actions{display:flex;gap:.5rem;width:100%} +[x-cloak]{display:none}table{width:100%}.btn-light{background-color:#fff;border-color:#d7dbdf;color:#000;font-size:.85rem}.form-control:disabled,.form-control[readonly]{background-color:#fff!important;opacity:1}.btn-light:hover{background-color:#fff;border-color:#d7dbdf;color:#000;font-size:.85rem}.btn-light,.has-search .form-control{padding-left:10px!important}.table .checkbox-column{max-width:50px!important;text-align:center;width:50px!important}.accordion-button{padding:.7rem}.btn-light,.has-search .form-control{padding-left:2.375rem}.page-link{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(229 231 235/var(--tw-border-opacity));border-right-width:1px;color:rgb(30 64 175/var(--tw-text-opacity));display:block;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding-bottom:.5rem;padding-top:.5rem;text-align:center;width:3rem}.page-link:last-child{border-width:0}.page-item.active .page-link,.page-link:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity));border-color:rgb(29 78 216/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.page-item.disabled .page-link{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(229 231 235/var(--tw-border-opacity));color:rgb(209 213 219/var(--tw-text-opacity))}.page-link{color:gray!important}.page-item.active .page-link{background-color:gray;border-color:gray;color:#fff!important}.loader{animation:spinner 1.5s linear infinite;border-top-color:#222}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(1turn)}}table thead{color:#6b6a6a;font-size:.75rem;padding-bottom:8px;padding-left:15px;padding-top:8px;text-transform:uppercase}.badge{font-size:.77em}.btn,.form-control{box-shadow:none!important}.btn-group-vertical>.btn,.btn-group>.btn{border-color:#ced4da!important;flex:1 1 auto;position:relative}[x-ref=editable].pg-single-line{overflow:hidden;white-space:nowrap}[x-ref=editable].pg-single-line br{display:none}[x-ref=editable].pg-single-line *{display:inline;white-space:nowrap}[x-ref=editable][placeholder]:empty:before{background-color:transparent;color:gray;content:attr(placeholder);position:absolute}.power-grid-button{width:100%}.pg-btn-white{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;--tw-ring-opacity:1;--tw-ring-color:rgb(226 232 240/var(--tw-ring-opacity));align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(203 213 225/var(--tw-border-opacity));border-radius:.5rem;border-width:1px;color:rgb(100 116 139/var(--tw-text-opacity));-moz-column-gap:.5rem;column-gap:.5rem;display:inline-flex;font-size:.875rem;justify-content:center;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem .75rem}.pg-btn-white:hover{--tw-bg-opacity:1;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);background-color:rgb(241 245 249/var(--tw-bg-opacity));box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.pg-btn-white:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-offset-width:1px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.pg-btn-white:disabled{cursor:not-allowed;opacity:.8}.bs5-rotate-0{transform:rotate(0deg);transition:all .3s ease}.bs5-rotate-90{transform:rotate(90deg);transition:all .3s ease}.bs5-w-h-1_5em{height:1.5em;width:1.5em}.pg-actions{display:flex;gap:.5rem;width:100%}.pg-filter-container{padding-bottom:.75rem;padding-top:.75rem} diff --git a/dist/tailwind.css b/dist/tailwind.css index c0b02802..fa1c3aea 100644 --- a/dist/tailwind.css +++ b/dist/tailwind.css @@ -1,3 +1,3 @@ [x-cloak]{display:none}table{width:100%}.loader{animation:spinner 1.5s linear infinite;border-top-color:#222}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(1turn)}}table thead{color:#6b6a6a;font-size:.75rem;padding-bottom:8px;padding-left:15px;padding-top:8px;text-transform:uppercase}.pg-actions{display:flex;gap:4px;width:100%} [x-ref=editable].pg-single-line{overflow:hidden;white-space:nowrap}[x-ref=editable].pg-single-line br{display:none}[x-ref=editable].pg-single-line *{display:inline;white-space:nowrap}[x-ref=editable][placeholder]:empty:before{background-color:transparent;color:gray;content:attr(placeholder);position:absolute} -.page-link{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(229 231 235/var(--tw-border-opacity));border-right-width:1px;color:rgb(30 64 175/var(--tw-text-opacity));display:block;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding-bottom:.5rem;padding-top:.5rem;text-align:center;width:3rem}.page-link:last-child{border-width:0}.page-item.active .page-link,.page-link:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity));border-color:rgb(29 78 216/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.page-item.disabled .page-link{border-color:rgb(229 231 235/var(--tw-border-opacity));color:rgb(209 213 219/var(--tw-text-opacity))}.page-item.disabled .page-link,.pg-btn-white{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.pg-btn-white{--tw-ring-opacity:1;--tw-ring-color:rgb(226 232 240/var(--tw-ring-opacity));align-items:center;border-color:rgb(203 213 225/var(--tw-border-opacity));border-radius:.5rem;border-width:1px;color:rgb(100 116 139/var(--tw-text-opacity));-moz-column-gap:.5rem;column-gap:.5rem;display:inline-flex;font-size:.875rem;justify-content:center;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem .75rem}.pg-btn-white:hover{--tw-bg-opacity:1;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);background-color:rgb(241 245 249/var(--tw-bg-opacity));box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.pg-btn-white:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-offset-width:1px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.pg-btn-white:disabled{cursor:not-allowed;opacity:.8} +.page-link{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-color:rgb(229 231 235/var(--tw-border-opacity));border-right-width:1px;color:rgb(30 64 175/var(--tw-text-opacity));display:block;font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding-bottom:.5rem;padding-top:.5rem;text-align:center;width:3rem}.page-link:last-child{border-width:0}.page-item.active .page-link,.page-link:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity));border-color:rgb(29 78 216/var(--tw-border-opacity));color:rgb(255 255 255/var(--tw-text-opacity))}.page-item.disabled .page-link{border-color:rgb(229 231 235/var(--tw-border-opacity));color:rgb(209 213 219/var(--tw-text-opacity))}.page-item.disabled .page-link,.pg-btn-white{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.pg-btn-white{--tw-ring-opacity:1;--tw-ring-color:rgb(226 232 240/var(--tw-ring-opacity));align-items:center;border-color:rgb(203 213 225/var(--tw-border-opacity));border-radius:.5rem;border-width:1px;color:rgb(100 116 139/var(--tw-text-opacity));-moz-column-gap:.5rem;column-gap:.5rem;display:inline-flex;font-size:.875rem;justify-content:center;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem .75rem}.pg-btn-white:hover{--tw-bg-opacity:1;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);background-color:rgb(241 245 249/var(--tw-bg-opacity));box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.pg-btn-white:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-offset-width:1px;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.pg-btn-white:disabled{cursor:not-allowed;opacity:.8}.pg-filter-container{padding-bottom:.75rem;padding-top:.75rem} diff --git a/resources/css/style.css b/resources/css/style.css index ffda21f3..4f09ac79 100644 --- a/resources/css/style.css +++ b/resources/css/style.css @@ -166,3 +166,7 @@ table thead { .pg-actions { @apply flex gap-2 w-full } + +.pg-filter-container { + @apply py-3; +} diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css index 1e261512..3f6f9739 100644 --- a/resources/css/tailwind.css +++ b/resources/css/tailwind.css @@ -26,3 +26,7 @@ hover:shadow-sm disabled:opacity-80 disabled:cursor-not-allowed rounded-lg gap-x-2 text-sm px-3 py-2 border border-pg-primary-300 text-pg-primary-500 hover:bg-pg-primary-100 ring-pg-primary-200 } + +.pg-filter-container { + @apply py-3; +} diff --git a/resources/views/components/frameworks/tailwind/filter.blade.php b/resources/views/components/frameworks/tailwind/filter.blade.php index 280ab7cd..ceb1aed0 100644 --- a/resources/views/components/frameworks/tailwind/filter.blade.php +++ b/resources/views/components/frameworks/tailwind/filter.blade.php @@ -18,8 +18,7 @@ class="mt-2 md:mt-0" x-transition:leave="transform duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90" - class="py-3" - wire:key="filter-{{ uniqid() }}" + class="pg-filter-container" > @php $customConfig = [];