small css fix, and updated filter select component

fleetbase · May 29, 2024 · 4fe36e8 · 4fe36e8
1 parent eb5bb9f
commit 4fe36e8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/addon/components/filter/select.hbs b/addon/components/filter/select.hbs
@@ -1,10 +1,10 @@
 <Select
     @options={{this.options}}
-    @optionLabel={{@filter.optionLabel}}
-    @optionValue={{@filter.optionValue}}
+    @optionLabel={{this.optionLabel}}
+    @optionValue={{this.optionValue}}
     @value={{this.value}}
     @onSelect={{this.onChange}}
-    @placeholder={{@filter.placeholder}}
+    @placeholder={{this.placeholder}}
     class="w-full form-input form-input-sm"
     ...attributes
 />
diff --git a/addon/components/filter/select.js b/addon/components/filter/select.js
@@ -9,13 +9,19 @@ const { assign } = Object;
 export default class FilterSelectComponent extends Component {
     @service fetch;
     @tracked value;
+    @tracked optionLabel;
+    @tracked optionValue;
+    @tracked placeholder;
     @tracked options = [];
     @tracked isLoading = false;
 
     constructor() {
         super(...arguments);
         this.value = this.args.value;
         this.options = isArray(this.args.options) ? this.args.options : [];
+        this.optionLabel = this.args.optionLabel ?? this.args.filterOptionLabel;
+        this.optionValue = this.args.optionValue ?? this.args.filterOptionValue;
+        this.placeholder = this.args.placeholder ?? this.args.filterPlaceholder;
 
         if (typeof this.args.filter?.filterFetchOptions === 'string') {
             this.fetchOptions(this.args.filter?.filterFetchOptions);

diff --git a/addon/styles/layout/next.css b/addon/styles/layout/next.css
@@ -1076,12 +1076,23 @@ body[data-theme='dark'] .next-content-panel-wrapper .next-content-panel-containe
 
 .next-view-section-footer,
 .next-view-section-subheader {
-    @apply grid grid-cols-2 min-w-full max-w-full border-b border-gray-200 dark:border-gray-700;
+    @apply border-gray-200 dark:border-gray-700;
+    border-bottom-width: 1px;
+    display: flex;
+    min-width: 100%;
+    max-width: 100%;
+    width: 100%;
     box-align: center;
     padding: 0px 24px 0px 36px;
     height: 57px;
 }
 
+.next-view-section-subheader,
+.next-view-section-footer.next-view-section-footer-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .next-view-section-footer {
     @apply border-b-0 border-t sticky bottom-0 inset-x-0 dark:bg-gray-900;
 }