v0.2.27

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
             'error',
             {
                 allowModules: [
+                    'resolve',
                     'postcss-import',
                     'postcss-preset-env',
                     'postcss-each',

addon/components/checkbox.hbs

@@ -1,5 +1,5 @@
 {{#if this.visible}}
-    <div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}} {{@wrapperClass}}">
+    <div class="relative flex items-{{or @alignItems 'start'}} {{if @disabled 'disabled opacity-75'}} {{@wrapperClass}}" {{did-update this.trackValue @value}}>
         <div class="flex items-center h-4">
             <Input
                 @type="checkbox"

addon/components/checkbox.js

@@ -94,4 +94,15 @@ export default class CheckboxComponent extends Component {
             onChange(checked, event);
         }
     }
+
+    /**
+     * Track when the value argument changes
+     *
+     * @param {HTMLElement} el
+     * @param {Array} [value = false]
+     * @memberof CheckboxComponent
+     */
+    @action trackValue(el, [value = false]) {
+        this.checked = value;
+    }
 }

addon/components/input-info.hbs

@@ -1,6 +1,6 @@
 <div class="ui-input-info bg-opacity-{{or @opacity 100}}" ...attributes>
     <FaIcon @icon={{or @icon "info-circle"}} class={{@iconClass}} />
-    <span class="text-left {{@spanClass}}">
+    <div class="text-left {{@spanClass}} {{@yieldClass}}">
         {{#if (has-block)}}
             {{yield}}
         {{else}}
@@ -9,5 +9,5 @@
                 <pre class="break-text subpixel-antialiased">{{@exampleText}}</pre>
             {{/if}}
         {{/if}}
-    </span>
+    </div>
 </div>

addon/components/table/cell/checkbox.hbs

@@ -1 +1 @@
-<Checkbox @id={{this.id}} @onToggle={{this.onToggle}} @value={{@value}} />
+<Checkbox @id={{this.id}} @onToggle={{this.onToggle}} @value={{this.checked}} {{did-update this.trackValue @value}} />

addon/components/table/cell/checkbox.js

@@ -26,6 +26,17 @@ export default class TableCellCheckboxComponent extends Component {
      */
     @tracked checked = false;
 
+    /**
+     * Creates an instance of TableCellCheckboxComponent.
+     * @param {ApplicationInstance} owner
+     * @param {...Arguments} { value = false }
+     * @memberof TableCellCheckboxComponent
+     */
+    constructor(owner, { value = false }) {
+        super(...arguments);
+        this.checked = value;
+    }
+
     /**
      * Toggles the checkbox and sends up an action
      *
@@ -52,4 +63,15 @@ export default class TableCellCheckboxComponent extends Component {
             onToggle(checked, row);
         }
     }
+
+    /**
+     * Track when the value argument changes
+     *
+     * @param {HTMLElement} el
+     * @param {Array} [value = false]
+     * @memberof TableCellCheckboxComponent
+     */
+    @action trackValue(el, [value = false]) {
+        this.checked = value;
+    }
 }

addon/components/table/cell/vehicle-name.hbs

@@ -4,7 +4,7 @@
         @fallbackSrc={{config "defaultValues.vehicleAvatar"}}
         data-vehicle={{@row.id}}
         alt={{this.altText}}
-        class="w-6 h-6 rounded-md {{if @column.hasOnline 'mx-2' 'mr-2'}}"
+        class="w-5 h-5 rounded-md {{if @column.hasOnline 'mx-2' 'mr-2'}}"
     />
     <span class="relative block">
         <a href="javascript:;" class="relative block" {{on "click" this.onClick}} disabled={{and @column.permission (cannot @column.permission)}}>
@@ -18,6 +18,6 @@
         </a>
     </span>
     {{#if @column.showOnlineIndicator}}
-        <FaIcon @icon="circle" class="absolute left-0 top-0 {{if @row.online 'text-green-500' 'text-yellow-200'}}" />
+        <FaIcon @icon="circle" @size="2xs" class="absolute left-0 top-0 -ml-1 -mt-1 {{if @row.online 'text-green-500' 'text-yellow-200'}}" />
     {{/if}}
 </div>

addon/utils/load-assets.js

@@ -0,0 +1,42 @@
+import { later } from '@ember/runloop';
+
+export default function loadAssets(assets = { basePath: '', scripts: [], stylesheets: [], globalIndicatorKey: null }) {
+    // Set global indicator key if applicable
+    if (assets.globalIndicatorKey && typeof assets.globalIndicatorKey === 'string') {
+        window[assets.globalIndicatorKey] = false;
+    }
+
+    // Prepare base path
+    const path = `/${assets.basePath ? assets.basePath + '/' : ''}`;
+
+    // Define exports on window
+    const exportsScript = document.createElement('script');
+    exportsScript.innerHTML = 'window.exports = window.exports || {};';
+    document.body.appendChild(exportsScript);
+
+    // Insert scripts
+    for (let i = 0; i < assets.scripts.length; i++) {
+        const script = document.createElement('script');
+        script.src = path + assets.scripts[i];
+        document.body.appendChild(script);
+    }
+
+    // Insert stylesheets
+    for (let i = 0; i < assets.stylesheets.length; i++) {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = path + assets.stylesheets[i];
+        document.body.appendChild(link);
+    }
+
+    // Update global indicator key
+    later(
+        this,
+        () => {
+            if (assets.globalIndicatorKey && typeof assets.globalIndicatorKey === 'string') {
+                window[assets.globalIndicatorKey] = true;
+            }
+        },
+        300
+    );
+}

addon/utils/load-leaflet-plugins.js

@@ -0,0 +1,6 @@
+import loadAssets from './load-assets';
+
+export default function loadLeafletPlugins(assets = { basePath: null, scripts: [], stylesheets: [], globalIndicatorKey: null }) {
+    const basePath = assets.basePath ?? 'engines-dist/leaflet';
+    loadAssets({ basePath, ...assets });
+}

app/utils/load-assets.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/utils/load-assets';

app/utils/load-leaflet-plugins.js

@@ -0,0 +1 @@
+export { default } from '@fleetbase/ember-ui/utils/load-leaflet-plugins';

index.js

@@ -2,6 +2,7 @@
 const { name } = require('./package');
 const Funnel = require('broccoli-funnel');
 const MergeTrees = require('broccoli-merge-trees');
+const resolve = require('resolve');
 const path = require('path');
 const postcssImport = require('postcss-import');
 const postcssPresetEnv = require('postcss-preset-env');
@@ -60,12 +61,40 @@ module.exports = {
         this.import('node_modules/intl-tel-input/build/css/intlTelInput.min.css');
     },
 
-    treeForPublic: function () {
-        const publicTree = this._super.treeForPublic.apply(this, arguments);
+    treeForLeaflet: function () {
+        const trees = [];
+        const leafletImagesPath = path.join(this.pathBase('leaflet'), 'dist', 'images');
+        const alwaysExclude = ['LICENSE', 'package.json', 'example.html'];
+        const leafletAddons = [{ package: 'leaflet', include: ['leaflet-src.js'], exclude: [...alwaysExclude], path: ['dist'] }];
+
+        for (let i = 0; i < leafletAddons.length; i++) {
+            const leafletAdddon = leafletAddons[i];
+            const leafletAddonDist = path.join(this.pathBase(leafletAdddon.package), ...leafletAdddon.path);
 
-        // Use a Funnel to copy the `utils.js` file to `assets/libphonenumber`
+            trees.push(
+                new Funnel(leafletAddonDist, {
+                    destDir: 'leaflet',
+                    include: leafletAdddon.include,
+                    exclude: leafletAdddon.exclude,
+                    getDestinationPath: leafletAdddon.getDestinationPath,
+                })
+            );
+        }
+
+        trees.push(
+            new Funnel(leafletImagesPath, {
+                srcDir: '/',
+                destDir: '/leaflet-images',
+                allowEmpty: true,
+            })
+        );
+
+        return trees;
+    },
+
+    treeForIntlTelInput: function () {
         const intlTelInputPath = path.dirname(require.resolve('intl-tel-input')).replace(/build\/js$/, '');
-        const addonTree = [
+        const trees = [
             new Funnel(`${intlTelInputPath}/build/js`, {
                 include: ['utils.js'],
                 destDir: 'assets/libphonenumber',
@@ -82,10 +111,27 @@ module.exports = {
             }),
         ];
 
-        // Merge the addon tree with the existing tree
+        return trees;
+    },
+
+    mergeWithPublicTree: function (publicTree) {
+        const intlTelInputTree = this.treeForIntlTelInput();
+        const leafletTree = this.treeForLeaflet();
+        const addonTree = [...intlTelInputTree, ...leafletTree];
+
         return publicTree ? new MergeTrees([publicTree, ...addonTree], { overwrite: true }) : new MergeTrees([...addonTree], { overwrite: true });
     },
 
+    treeForPublic: function () {
+        const publicTree = this._super.treeForPublic.apply(this, arguments);
+
+        return this.mergeWithPublicTree(publicTree);
+    },
+
+    pathBase(packageName) {
+        return path.dirname(resolve.sync(packageName + '/package.json', { basedir: __dirname }));
+    },
+
     isDevelopingAddon: function () {
         return true;
     },

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.2.26",
+    "version": "0.2.27",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",
@@ -91,6 +91,7 @@
         "ember-get-config": "^2.1.1",
         "ember-gridstack": "^4.0.0",
         "ember-inflector": "^4.0.2",
+        "ember-leaflet": "^5.1.3",
         "ember-loading": "^2.0.0",
         "ember-math-helpers": "^4.0.0",
         "ember-modifier": "^4.1.0",
@@ -106,6 +107,7 @@
         "gridstack": "^7.3.0",
         "imask": "^6.4.3",
         "intl-tel-input": "^22.0.2",
+        "leaflet": "^1.9.4",
         "postcss-at-rules-variables": "^0.3.0",
         "postcss-conditionals-renewed": "^1.0.0",
         "postcss-each": "^1.1.0",
@@ -152,6 +154,7 @@
         "prettier": "^3.0.3",
         "qunit": "^2.20.0",
         "qunit-dom": "^2.0.0",
+        "resolve": "^1.22.8",
         "stylelint": "^15.11.0",
         "stylelint-config-standard": "^34.0.0",
         "stylelint-prettier": "^4.0.2",
@@ -186,7 +189,8 @@
     },
     "pnpm": {
         "patchedDependencies": {
-            "[email protected]": "patches/[email protected]"
+            "[email protected]": "patches/[email protected]",
+            "[email protected]": "patches/[email protected]"
         }
     }
 }

patches/ember-leaflet@5.1.3.patch

@@ -0,0 +1,111 @@
+diff --git a/index.js b/index.js
+index 7361871adfe0b79c70a3699e38cc435f3741cb33..fe08a429d35283691de28f3dc73ef7ec8bec76cb 100644
+--- a/index.js
++++ b/index.js
+@@ -1,36 +1,18 @@
+-'use strict';
+-const resolve = require('resolve');
+-const path = require('path');
+-const mergeTrees = require('broccoli-merge-trees');
+-const Funnel = require('broccoli-funnel');
+-const fastbootTransform = require('fastboot-transform');
++'use strict'
++const resolve = require('resolve')
++const path = require('path')
++const mergeTrees = require('broccoli-merge-trees')
++const Funnel = require('broccoli-funnel')
++const fastbootTransform = require('fastboot-transform')
+
+ module.exports = {
+   name: require('./package').name,
+
+-  treeForVendor() {
+-    let dist = path.join(this.pathBase('leaflet'), 'dist');
+-
+-    let leafletJs = fastbootTransform(
+-      new Funnel(dist, {
+-        files: ['leaflet-src.js'],
+-        destDir: 'leaflet'
+-      })
+-    );
+-
+-    let leafletFiles = new Funnel(dist, {
+-      exclude: ['leaflet.js', 'leaflet-src.js', '*.html'],
+-      destDir: 'leaflet'
+-    });
+-
+-    return mergeTrees([leafletJs, leafletFiles]);
+-  },
+-
+-  included(app) {
+-    this._super.included.apply(this, arguments);
++  included (app) {
++    this._super.included.apply(this, arguments)
+
+     // Addon options from the apps ember-cli-build.js
+-    let options = app.options[this.name] || {};
++    let options = app.options[this.name] || {}
+
+     // If the addon has the _findHost() method (in ember-cli >= 2.7.0), we'll just
+     // use that.
+@@ -42,46 +24,22 @@ module.exports = {
+     // method in ember-cli.
+     // Keep iterating upward until we don't have a grandparent.
+     // Has to do this grandparent check because at some point we hit the project.
+-    let current = this;
++    let current = this
+     do {
+-      if (current.lazyLoading === true || (current.lazyLoading && current.lazyLoading.enabled === true)) {
+-        app = current;
+-        break;
++      if (
++        current.lazyLoading === true ||
++        (current.lazyLoading && current.lazyLoading.enabled === true)
++      ) {
++        app = current
++        break
+       }
+-      app = current.app || app;
+-    } while (current.parent.parent && (current = current.parent));
+-
+-    if (!options.excludeJS) {
+-      app.import('vendor/leaflet/leaflet-src.js');
+-    }
+-
+-    // Import leaflet css
+-    if (!options.excludeCSS) {
+-      app.import('vendor/leaflet/leaflet.css');
+-    }
+-
+-    // Import leaflet images
+-    if (!options.excludeImages) {
+-      let imagesDestDir = '/assets/images';
+-      app.import('vendor/leaflet/images/layers-2x.png', {
+-        destDir: imagesDestDir
+-      });
+-      app.import('vendor/leaflet/images/layers.png', {
+-        destDir: imagesDestDir
+-      });
+-      app.import('vendor/leaflet/images/marker-icon-2x.png', {
+-        destDir: imagesDestDir
+-      });
+-      app.import('vendor/leaflet/images/marker-icon.png', {
+-        destDir: imagesDestDir
+-      });
+-      app.import('vendor/leaflet/images/marker-shadow.png', {
+-        destDir: imagesDestDir
+-      });
+-    }
++      app = current.app || app
++    } while (current.parent.parent && (current = current.parent))
+   },
+
+-  pathBase(packageName) {
+-    return path.dirname(resolve.sync(packageName + '/package.json', { basedir: __dirname }));
++  pathBase (packageName) {
++    return path.dirname(
++      resolve.sync(packageName + '/package.json', { basedir: __dirname })
++    )
+   }
+-};
++}