@fleetbase/ember-ui 0.3.9 → 0.3.11

package/addon/styles/layout/next.css

@@ -695,33 +695,33 @@ body[data-theme='dark'] .next-map-container.next-map-container-layout-map .next-
     @apply mb-0;
 }
 
-.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar.leaflet-control > a[role="button"].leaflet-control-zoom-out {
+.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-control-zoom.leaflet-bar.leaflet-control > a[role='button'].leaflet-control-zoom-out {
     @apply mb-0;
 }
 
-.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role="button"] {
+.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button'] {
     @apply bg-transparent flex items-center justify-center rounded-full w-8 h-8 m-auto mb-2 border-0 outline-0;
 }
 
-.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role="button"].is-action:hover {
+.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button'].is-action:hover {
     @apply bg-blue-500;
 }
 
-.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role="button"]:focus,
-.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role="button"]:active,
-.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role="button"]:hover {
+.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:focus,
+.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:active,
+.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:hover {
     @apply outline-none;
 }
 
-.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role="button"]:hover {
+.fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:hover {
     @apply bg-gray-600;
 }
 
-body[data-theme='light'] .fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role="button"] svg {
+body[data-theme='light'] .fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button'] svg {
     @apply text-gray-800;
 }
 
-body[data-theme='light'] .fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role="button"]:hover {
+body[data-theme='light'] .fleetbase-leaflet-map-container .leaflet-control-container .leaflet-bar.leaflet-control > a[role='button']:hover {
     @apply bg-gray-200;
 }
 
@@ -1058,7 +1058,7 @@ body[data-theme='dark'] .next-view-header-item.is-open {
     @apply rounded-md;
 }
 
-body[data-theme="dark"] .next-content-panel-wrapper.bordered .next-content-panel-container .next-content-panel > .next-content-panel-header {
+body[data-theme='dark'] .next-content-panel-wrapper.bordered .next-content-panel-container .next-content-panel > .next-content-panel-header {
     @apply shadow-sm text-gray-200;
 }
 
@@ -1067,7 +1067,7 @@ body[data-theme="dark"] .next-content-panel-wrapper.bordered .next-content-panel
     @apply border rounded-lg bg-gray-50 dark:bg-gray-900 border-gray-300 dark:border-gray-700 px-3 mb-2;
 }
 
-body[data-theme="dark"] .next-content-panel-wrapper.bordered .next-content-panel-container .next-content-panel > .next-content-panel-header {
+body[data-theme='dark'] .next-content-panel-wrapper.bordered .next-content-panel-container .next-content-panel > .next-content-panel-header {
     @apply shadow-sm text-gray-200;
 }
 
@@ -1084,7 +1084,7 @@ body[data-theme="dark"] .next-content-panel-wrapper.bordered .next-content-panel
     @apply border-t-0;
 }
 
-body[data-theme="dark"] .next-content-panel-wrapper.bordered-inline .next-content-panel-container .next-content-panel > .next-content-panel-header {
+body[data-theme='dark'] .next-content-panel-wrapper.bordered-inline .next-content-panel-container .next-content-panel > .next-content-panel-header {
     @apply shadow-sm text-gray-200;
 }
 
@@ -1101,7 +1101,7 @@ body[data-theme="dark"] .next-content-panel-wrapper.bordered-inline .next-conten
     @apply border-t-0;
 }
 
-body[data-theme="dark"] .next-content-panel-wrapper.bordered-top .next-content-panel-container .next-content-panel > .next-content-panel-header {
+body[data-theme='dark'] .next-content-panel-wrapper.bordered-top .next-content-panel-container .next-content-panel > .next-content-panel-header {
     @apply text-gray-200;
 }
 
@@ -1129,15 +1129,27 @@ body[data-theme="dark"] .next-content-panel-wrapper.bordered-top .next-content-p
     @apply w-5 h-full text-xs;
 }
 
-.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header .next-content-panel-header-left > .next-content-panel-title-container .panel-title {
+.next-content-panel-wrapper
+    .next-content-panel-container
+    .next-content-panel
+    > .next-content-panel-header
+    .next-content-panel-header-left
+    > .next-content-panel-title-container
+    .panel-title {
     @apply text-sm font-semibold uppercase;
 }
 
-.next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header.bordered .next-content-panel-header-left > .next-content-panel-title-container .panel-title {
+.next-content-panel-wrapper
+    .next-content-panel-container
+    .next-content-panel
+    > .next-content-panel-header.bordered
+    .next-content-panel-header-left
+    > .next-content-panel-title-container
+    .panel-title {
     @apply font-normal;
 }
 
-body[data-theme="light"] .details-wrapper .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header {
+body[data-theme='light'] .details-wrapper .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header {
     @apply bg-white;
 }
 
@@ -1449,8 +1461,21 @@ body[data-theme='light'] .next-sidebar .next-content-panel-wrapper .next-content
     @apply flex flex-row items-center justify-between px-3 py-0.5 rounded-md text-sm mb-1 border border-transparent;
 }
 
-.next-sidebar .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header > .next-content-panel-header-left > .next-content-panel-title-container,
-.next-sidebar .next-content-panel-wrapper .next-content-panel-container .next-content-panel > .next-content-panel-header > .next-content-panel-header-left > .next-content-panel-title-container > .panel-title {
+.next-sidebar
+    .next-content-panel-wrapper
+    .next-content-panel-container
+    .next-content-panel
+    > .next-content-panel-header
+    > .next-content-panel-header-left
+    > .next-content-panel-title-container,
+.next-sidebar
+    .next-content-panel-wrapper
+    .next-content-panel-container
+    .next-content-panel
+    > .next-content-panel-header
+    > .next-content-panel-header-left
+    > .next-content-panel-title-container
+    > .panel-title {
     @apply text-sm font-normal normal-case;
 }
 
@@ -1463,7 +1488,7 @@ body[data-theme='light'] .next-sidebar .next-content-panel-wrapper .next-content
 }
 
 .next-sidebar .next-sidebar-panel-container > .next-sidebar-panel > .next-content-panel > .next-sidebar-panel-toggle > .next-content-panel-header-left {
-    padding: 0; 
+    padding: 0;
     margin: 0;
 }
 
@@ -1691,6 +1716,10 @@ body[data-theme='dark']
     @apply text-sm flex flex-row items-center px-3 py-0.5 rounded-md my-1;
 }
 
+.next-dd-menu .next-dd-item.xs-text {
+    @apply text-xs;
+}
+
 .next-dd-menu .next-dd-item > .next-nav-item-icon-container {
     width: 1rem;
 }
@@ -1785,15 +1814,18 @@ section.next-view-section {
 }
 
 .next-table-wrapper {
-    overflow: scroll;
+    overflow: auto;
+    overflow-x: scroll; /* Always show horizontal scrollbar */
+    overflow-y: scroll;
     height: 100vh;
     @apply grid grid-cols-1;
 }
 
 .next-table-wrapper > table {
-    @apply table-fixed w-full h-screen;
+    @apply table-auto min-w-full h-screen;
     border-collapse: separate;
     border-spacing: 0;
+    width: max-content;
 }
 
 .next-table-wrapper table > tbody:after {
@@ -1804,8 +1836,8 @@ section.next-view-section {
 }
 
 .next-table-wrapper table > thead {
-    position: sticky;
-    top: 0;
+    /* Removed position: sticky to avoid conflict with sticky th elements */
+    /* Individual th elements handle their own sticky positioning */
     z-index: 12;
 }
 
@@ -1836,7 +1868,7 @@ section.next-view-section {
     margin: 0 0.5rem;
 }
 
-.next-table-wrapper table tbody tr td .cell-dropdown-button span.btn-wrapper > button.btn, 
+.next-table-wrapper table tbody tr td .cell-dropdown-button span.btn-wrapper > button.btn,
 .next-table-wrapper table tbody tr td span.btn-wrapper > button.btn {
     height: 21px;
     cursor: default;
@@ -1867,6 +1899,9 @@ body[data-theme='dark'] .next-table-wrapper .tfoot-row > td {
     height: 53px;
     min-width: 100%;
     max-width: 100%;
+    position: sticky;
+    left: 0;
+    right: 0;
 }
 
 .next-table-wrapper
@@ -1895,7 +1930,7 @@ body[data-theme='dark'] .next-table-wrapper .tfoot-row > td {
 }
 
 .next-table-wrapper table thead tr th {
-    @apply px-4 py-2 text-xs text-left font-medium leading-4 tracking-wider text-gray-900 whitespace-nowrap uppercase border-b border-gray-200 bg-white;
+    @apply px-2 py-2.5 text-xs text-left font-medium leading-4 tracking-wider text-gray-900 whitespace-nowrap uppercase border-b border-gray-200 bg-white;
     text-overflow: ellipsis;
 }
 
@@ -1935,9 +1970,13 @@ body[data-theme='dark'] .next-table-wrapper .tfoot-row > td {
     max-height: 40px;
 }
 
+.next-table-wrapper table tfoot {
+    z-index: 30;
+}
+
 .next-table-wrapper table tfoot tr td,
 .next-table-wrapper table tbody tr td {
-    @apply px-4 py-1 text-sm font-medium leading-4 tracking-wider text-gray-800 truncate whitespace-nowrap select-none border-b border-gray-200;
+    @apply px-2 py-1 text-sm font-medium leading-4 tracking-wider text-gray-800 truncate whitespace-nowrap select-none border-b border-gray-200;
 }
 
 .next-table-wrapper table tfoot tr td span a,
@@ -1960,6 +1999,93 @@ body[data-theme='dark'] .next-table-wrapper .tfoot-row > td {
     border-top: 0;
 }
 
+/* Sticky Column Styles */
+.next-table-wrapper table thead th.is-sticky,
+.next-table-wrapper table tbody td.is-sticky {
+    position: sticky;
+    @apply bg-white;
+}
+
+.next-table-wrapper table thead th.is-sticky {
+    z-index: 20;
+    top: 0;
+}
+
+.next-table-wrapper table tbody td.is-sticky {
+    z-index: 15;
+}
+
+.next-table-wrapper table thead th.is-sticky.sticky-left {
+    left: 0;
+    top: 0;
+    box-shadow:
+        4px 0 8px -2px rgba(0, 0, 0, 0.15),
+        2px 0 4px -1px rgba(0, 0, 0, 0.1);
+}
+
+.next-table-wrapper table tbody td.is-sticky.sticky-left {
+    left: 0;
+    box-shadow:
+        4px 0 8px -2px rgba(0, 0, 0, 0.15),
+        2px 0 4px -1px rgba(0, 0, 0, 0.1);
+}
+
+.next-table-wrapper table thead th.is-sticky.sticky-right {
+    right: 0;
+    top: 0;
+    box-shadow:
+        -4px 0 8px -2px rgba(0, 0, 0, 0.15),
+        -2px 0 4px -1px rgba(0, 0, 0, 0.1);
+}
+
+.next-table-wrapper table tbody td.is-sticky.sticky-right {
+    right: 0;
+    box-shadow:
+        -4px 0 8px -2px rgba(0, 0, 0, 0.15),
+        -2px 0 4px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Hide shadows when sticky columns are at their natural position */
+.next-table-wrapper table thead th.is-sticky.at-natural-position,
+.next-table-wrapper table tbody td.is-sticky.at-natural-position {
+    box-shadow: none !important;
+}
+
+/* Ensure sticky columns have proper background on hover */
+.next-table-wrapper table tbody tr:hover td.is-sticky {
+    @apply bg-white;
+}
+
+/* Dark theme support for sticky columns */
+body[data-theme='dark'] .next-table-wrapper table thead th.is-sticky,
+body[data-theme='dark'] .next-table-wrapper table tbody td.is-sticky {
+    @apply bg-gray-900;
+}
+
+body[data-theme='dark'] .next-table-wrapper table tbody tr:hover td.is-sticky {
+    @apply bg-gray-900;
+}
+
+body[data-theme='dark'] .next-table-wrapper table thead th.is-sticky.sticky-left,
+body[data-theme='dark'] .next-table-wrapper table tbody td.is-sticky.sticky-left {
+    box-shadow:
+        4px 0 8px -2px rgba(0, 0, 0, 0.4),
+        2px 0 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+body[data-theme='dark'] .next-table-wrapper table thead th.is-sticky.sticky-right,
+body[data-theme='dark'] .next-table-wrapper table tbody td.is-sticky.sticky-right {
+    box-shadow:
+        -4px 0 8px -2px rgba(0, 0, 0, 0.4),
+        -2px 0 4px -1px rgba(0, 0, 0, 0.3);
+}
+
+/* Dark theme - hide shadows when at natural position */
+body[data-theme='dark'] .next-table-wrapper table thead th.is-sticky.at-natural-position,
+body[data-theme='dark'] .next-table-wrapper table tbody td.is-sticky.at-natural-position {
+    box-shadow: none !important;
+}
+
 body[data-theme='dark'] .next-table-wrapper table tfoot tr td {
     @apply bg-gray-900;
 }
@@ -2041,7 +2167,7 @@ body[data-theme='light'] .next-table-wrapper table tfoot tr td {
 }
 
 .field-info-container.field-vertical-container + .field-info-container.field-vertical-container {
-    @apply mt-1.5; 
+    @apply mt-1.5;
 }
 
 .field-info-container.field-vertical-container > .field-name {
@@ -2328,6 +2454,101 @@ a.text-danger:hover {
     @apply flex flex-row items-center;
 }
 
+.filter-multi-input {
+    @apply flex flex-col relative;
+    height: 34px;
+}
+
+.filter-multi-input > .clear-button {
+    @apply absolute top-0 right-0 dark:text-gray-500 text-gray-700 pr-3 pt-2;
+}
+
+.filter-multi-input > .clear-button:hover {
+    @apply opacity-50;
+}
+
+.filter-range {
+    @apply flex flex-col relative;
+}
+
+.filter-range-inputs {
+    @apply flex items-center gap-2 mb-2;
+}
+
+.filter-range-input-group {
+    @apply flex flex-col flex-1;
+}
+
+.filter-range-label {
+    @apply text-xs font-medium text-gray-600 dark:text-gray-400 mb-1;
+}
+
+.filter-range-separator {
+    @apply text-gray-500 dark:text-gray-400 font-semibold mt-5;
+}
+
+.filter-range-sliders {
+    @apply relative mb-2;
+}
+
+.filter-range-slider {
+    @apply absolute w-full h-2 appearance-none bg-transparent pointer-events-none;
+}
+
+.filter-range-slider::-webkit-slider-thumb {
+    @apply appearance-none w-4 h-4 rounded-full bg-blue-500 cursor-pointer pointer-events-auto;
+}
+
+.filter-range-slider::-moz-range-thumb {
+    @apply w-4 h-4 rounded-full bg-blue-500 cursor-pointer pointer-events-auto border-0;
+}
+
+.filter-range-slider::-webkit-slider-runnable-track {
+    @apply w-full h-1 bg-gray-200 dark:bg-gray-700 rounded-full;
+}
+
+.filter-range-slider::-moz-range-track {
+    @apply w-full h-1 bg-gray-200 dark:bg-gray-700 rounded-full;
+}
+
+.filter-range-slider-min::-webkit-slider-thumb {
+    @apply bg-blue-500;
+    z-index: 50;
+    position: relative;
+    top: -6px;
+}
+
+.filter-range-slider-max::-webkit-slider-thumb {
+    @apply bg-blue-600;
+    z-index: 50;
+    position: relative;
+    right: 0;
+    top: -6px;
+}
+
+.filter-range-slider-min::-moz-range-thumb {
+    @apply bg-blue-500;
+    z-index: 50;
+    position: relative;
+    top: -6px;
+}
+
+.filter-range-slider-max::-moz-range-thumb {
+    @apply bg-blue-600;
+    z-index: 50;
+    position: relative;
+    right: 0;
+    top: -6px;
+}
+
+.filter-range > .clear-button {
+    @apply absolute top-0 right-0 dark:text-gray-500 text-gray-700 pr-1;
+}
+
+.filter-range > .clear-button:hover {
+    @apply opacity-50;
+}
+
 .fleetbase-loader-wrapper {
     padding: 0;
     margin-left: 0;
@@ -2477,4 +2698,4 @@ body[data-theme='dark'] .app-version-in-nav {
 .details-wrapper > :not([hidden], .is-closed) ~ :not([hidden], .is-closed) {
     margin-top: calc(1rem * (1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(1rem * var(--tw-space-y-reverse));
-}
+}

package/addon/utils/is-image-file.js

@@ -0,0 +1,101 @@
+export default function isImageFile(file) {
+    if (!file) return false;
+
+    // MIME (most reliable if provided)
+    const mime = (file.content_type || file.type || '').toLowerCase();
+    if (mime.startsWith('image/')) return true; // e.g., "image/png"
+    // Some services mislabel images as octet-stream; fall through if so.
+
+    // data: URL (base64 inline)
+    const url = file.url || file.path || '';
+    if (typeof url === 'string' && url.startsWith('data:image/')) return true;
+
+    // Extension check (strip query/fragment, pick last segment)
+    const name = file.original_filename || file.path || file.url || '';
+    const ext = getFileExtension(name);
+    if (ext) {
+        const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'jfif', 'png', 'gif', 'bmp', 'tif', 'tiff', 'webp', 'svg', 'heic', 'heif', 'avif', 'ico', 'cur']);
+        if (IMAGE_EXTS.has(ext)) return true;
+    }
+
+    // Signature sniffing if you have bytes/base64
+    // This helps when MIME & ext are missing/misleading.
+    const bytes = file.bytes || file.arrayBuffer || file.buffer;
+    const base64 = file.base64;
+    if (bytes || base64) {
+        /* eslint-disable no-empty */
+        try {
+            const u8 = toUint8(bytes, base64);
+            if (u8) return looksLikeImageBytes(u8);
+        } catch (_) {}
+    }
+
+    return false;
+}
+
+export function getFileExtension(str) {
+    if (!str || typeof str !== 'string') return '';
+    // Fast path for data URLs
+    if (str.startsWith('data:image/')) return 'dataurl';
+    // Strip query/fragment
+    const clean = str.split('?')[0].split('#')[0];
+    // Handle full URLs safely if possible
+    try {
+        const u = new URL(clean);
+        str = u.pathname;
+    } catch (_) {
+        str = clean;
+    }
+    const last = str.split('/').pop() || '';
+    const dot = last.lastIndexOf('.');
+    if (dot <= 0 || dot === last.length - 1) return '';
+    return last.slice(dot + 1).toLowerCase();
+}
+
+// convert provided bytes/base64 into Uint8Array
+export function toUint8(bytes, base64) {
+    if (bytes instanceof Uint8Array) return bytes;
+    if (bytes && bytes.byteLength != null) return new Uint8Array(bytes);
+    if (typeof base64 === 'string') {
+        if (base64.startsWith('data:')) base64 = base64.split(',')[1] || '';
+        const bin = atob(base64);
+        const u8 = new Uint8Array(bin.length);
+        for (let i = 0; i < bin.length; i++) u8[i] = bin.charCodeAt(i);
+        return u8;
+    }
+    return null;
+}
+
+// quick magic-number checks for common formats
+export function looksLikeImageBytes(u8) {
+    if (u8.length < 12) return false;
+
+    // JPEG: FF D8 FF
+    if (u8[0] === 0xff && u8[1] === 0xd8 && u8[2] === 0xff) return true;
+
+    // PNG: 89 50 4E 47 0D 0A 1A 0A
+    if (u8[0] === 0x89 && u8[1] === 0x50 && u8[2] === 0x4e && u8[3] === 0x47 && u8[4] === 0x0d && u8[5] === 0x0a && u8[6] === 0x1a && u8[7] === 0x0a) return true;
+
+    // GIF: "GIF87a"/"GIF89a"
+    if (u8[0] === 0x47 && u8[1] === 0x49 && u8[2] === 0x46 && u8[3] === 0x38 && (u8[4] === 0x37 || u8[4] === 0x39) && u8[5] === 0x61) return true;
+
+    // WEBP: "RIFF" .... "WEBP"
+    if (u8[0] === 0x52 && u8[1] === 0x49 && u8[2] === 0x46 && u8[3] === 0x46 && u8[8] === 0x57 && u8[9] === 0x45 && u8[10] === 0x42 && u8[11] === 0x50) return true;
+
+    // BMP: "BM"
+    if (u8[0] === 0x42 && u8[1] === 0x4d) return true;
+
+    // TIFF: "II*" or "MM*"
+    if ((u8[0] === 0x49 && u8[1] === 0x49 && u8[2] === 0x2a && u8[3] === 0x00) || (u8[0] === 0x4d && u8[1] === 0x4d && u8[2] === 0x00 && u8[3] === 0x2a)) return true;
+
+    // HEIC/AVIF (ISOBMFF): "ftyp" box with known brands
+    // bytes 4..7: 'ftyp'
+    const isFtyp = u8[4] === 0x66 && u8[5] === 0x74 && u8[6] === 0x79 && u8[7] === 0x70;
+    if (isFtyp) {
+        const brand = String.fromCharCode(u8[8], u8[9], u8[10], u8[11]).toLowerCase();
+        if (['heic', 'heix', 'mif1', 'hevc', 'avif', 'avis'].includes(brand)) return true;
+    }
+
+    // SVG can’t be reliably sniffed with bytes (it’s XML). Rely on MIME/extension.
+    return false;
+}

package/app/components/filter/multi-input.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/filter/multi-input';

package/app/components/filter/range.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/filter/range';

package/app/components/modals/query-builder-computed-column-editor.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/modals/query-builder-computed-column-editor';

package/app/components/query-builder/computed-columns.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/query-builder/computed-columns';

package/app/components/schedule-calendar.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/components/schedule-calendar';

package/app/utils/is-image-file.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/utils/is-image-file';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.9",
+    "version": "0.3.11",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",