@fleetbase/ember-ui 0.3.12 → 0.3.13

package/addon/components/activity-log.js

@@ -167,11 +167,17 @@ export default class ActivityLogComponent extends Component {
 
             if (c.from !== 'null' && c.from !== undefined && c.from !== '' && c.from !== c.to) {
                 parts.push(
-                    `<span class="activity-change">changed <span class="activity-change-prop highlight-gray ${this.args.activityChangePropClass ?? ''}">${k}</span> from <span class="activity-change-prop highlight-gray ${this.args.activityPreviousValueClass ?? ''}">${this.#code(c.from)}</span> to <span class="activity-change-prop highlight-blue ${this.args.activityNewValueClass ?? ''}">${this.#code(c.to)}</span></span>`
+                    `<span class="activity-change">changed <span class="activity-change-prop highlight-gray ${
+                        this.args.activityChangePropClass ?? ''
+                    }">${k}</span> from <span class="activity-change-prop highlight-gray ${this.args.activityPreviousValueClass ?? ''}">${this.#code(
+                        c.from
+                    )}</span> to <span class="activity-change-prop highlight-blue ${this.args.activityNewValueClass ?? ''}">${this.#code(c.to)}</span></span>`
                 );
             } else {
                 parts.push(
-                    `<span class="activity-change">set <span class="activity-change-prop highlight-gray ${this.args.activityChangePropClass ?? ''}">${k}</span> to <span class="activity-change-prop highlight-blue ${this.args.activityNewValueClass ?? ''}">${this.#code(c.to)}</span></span>`
+                    `<span class="activity-change">set <span class="activity-change-prop highlight-gray ${
+                        this.args.activityChangePropClass ?? ''
+                    }">${k}</span> to <span class="activity-change-prop highlight-blue ${this.args.activityNewValueClass ?? ''}">${this.#code(c.to)}</span></span>`
                 );
             }
         }

package/addon/components/chart.hbs

@@ -1,4 +1,4 @@
-<div class="ui-chart relative">
+<div class="ui-chart relative {{@wrapperClass}}">
     {{#if this.isLoading}}
         <div class="overloader overloader-opacity-2">
             <div class="p-8">

package/addon/components/model-select-multiple.hbs

@@ -1,4 +1,5 @@
 <ModelSelect
+    @multiple={{true}}
     @modelName={{@modelName}}
     @selectedModel={{@selectedModel}}
     @optionLabel={{@optionLabel}}
@@ -16,8 +17,6 @@
     @totalPagesParam={{@totalPagesParam}}
     @onCreate={{@onCreate}}
     @onChange={{this.change}}
-    @searchField={{@optionLabel}}
-    @triggerClass="ember-model-select-multiple-trigger {{@triggerClass}}"
     @triggerRole={{@triggerRole}}
     @ariaDescribedBy={{@ariaDescribedBy}}
     @ariaInvalid={{@ariaInvalid}}
@@ -48,22 +47,25 @@
     @onKeydown={{this.handleKeydown}}
     @onOpen={{this.handleOpen}}
     @options={{@options}}
-    @optionsComponent={{@optionsComponent}}
+    @optionsComponent={{ensure-safe-component @optionsComponent}}
     @placeholder={{@placeholder}}
-    @placeholderComponent={{@placeholderComponent}}
+    @placeholderComponent={{ensure-safe-component @placeholderComponent}}
     @preventScroll={{@preventScroll}}
     @registerAPI={{@registerAPI}}
     @renderInPlace={{@renderInPlace}}
     @required={{@required}}
     @scrollTo={{@scrollTo}}
     @search={{@search}}
-    @searchEnabled={{@searchEnabled}}
+    @searchEnabled={{if (eq @searchEnabled false) false true}}
+    @searchField={{or @optionLabel @searchField}}
+    @searchFieldPosition={{or @searchFieldPosition "trigger"}}
     @searchMessage={{@searchMessage}}
     @searchPlaceholder={{@searchPlaceholder}}
-    @selectedItemComponent={{@selectedItemComponent}}
+    @selectedItemComponent={{ensure-safe-component @selectedItemComponent}}
     @eventType={{@eventType}}
     @title={{@title}}
-    @triggerComponent={{component (or @triggerComponent "power-select-multiple/trigger") tabindex=@tabindex}}
+    @triggerClass="ember-power-select-multiple-trigger {{@triggerClass}}"
+    @triggerComponent={{if @triggerComponent (component (ensure-safe-component @triggerComponent) tabindex=@tabindex) (component "power-select-multiple/trigger" tabindex=@tabindex)}}
     @triggerId={{@triggerId}}
     @verticalPosition={{@verticalPosition}}
     @tabindex={{this.computedTabIndex}}

package/addon/components/model-select.hbs

@@ -22,6 +22,7 @@
         @initiallyOpened={{@initiallyOpened}}
         @loadingMessage={{@loadingMessage}}
         @eventType={{@eventType}}
+        @multiple={{@multiple}}
         @matcher={{@matcher}}
         @matchTriggerWidth={{@matchTriggerWidth}}
         @noMatchesMessage={{@noMatchesMessage}}
@@ -42,6 +43,7 @@
         @search={{perform this.searchModels}}
         @searchEnabled={{get-default-value @searchEnabled true}}
         @searchField={{@searchField}}
+        @searchFieldPosition={{@searchFieldPosition}}
         @searchMessage={{@searchMessage}}
         @searchPlaceholder={{@searchPlaceholder}}
         @selected={{this.selectedModel}}

package/addon/components/money-input.hbs

@@ -16,4 +16,4 @@
         </span>
         <Input @type="tel" @value={{@value}} class="form-input flex-1 rounded-l-none" {{did-insert this.autoNumerize}} ...attributes />
     </div>
-</div>
+</div>

package/addon/components/money-input.js

@@ -2,7 +2,6 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
-import { later } from '@ember/runloop';
 import { isNone } from '@ember/utils';
 import numbersOnly from '../utils/numbers-only';
 import getCurrency from '../utils/get-currency';
@@ -12,7 +11,6 @@ export default class MoneyInputComponent extends Component {
     @service fetch;
     @service currentUser;
     @tracked currencies = getCurrency();
-    @tracked value;
     @tracked currency;
     @tracked currencyData;
     @tracked autonumeric;
@@ -22,7 +20,6 @@ export default class MoneyInputComponent extends Component {
 
         let whois = this.currentUser.getOption('whois');
 
-        this.value = this.args.value ?? 0;
         this.currency = this.args.currency ?? whois?.currency?.code ?? 'USD';
         this.currencyData = getCurrency(this.currency);
     }
@@ -30,7 +27,11 @@ export default class MoneyInputComponent extends Component {
     @action autoNumerize(element) {
         const { onCurrencyChange } = this.args;
         let currency = this.currencyData;
-        let value = numbersOnly(this.value);
+        let value = numbersOnly(this.args.value ?? 0);
+
+        // CRITICAL: Conditional division based on currency precision
+        // - Currencies with decimals (precision > 0): divide by 100 (stored in cents)
+        // - Currencies without decimals (precision = 0): use as-is (stored in main unit)
         let amount = !currency.decimalSeparator ? value : value / 100;
 
         this.autonumeric = new AutoNumeric(element, amount, this.getCurrencyFormatOptions(currency));
@@ -40,14 +41,27 @@ export default class MoneyInputComponent extends Component {
             onCurrencyChange(currency.code, currency);
         }
 
-        element.addEventListener('autoNumeric:formatted', this.onFormatCompleted.bind(this));
+        // Use rawValueModified for better change detection
+        element.addEventListener('autoNumeric:rawValueModified', ({ detail }) => {
+            if (typeof this.args.onChange === 'function') {
+                // Convert back to storage format
+                let rawValue = detail.newRawValue;
+                // For precision > 0: multiply by 100 to get cents
+                // For precision = 0: use as-is (main unit)
+                let storedValue = !currency.decimalSeparator ? rawValue : Math.round(rawValue * 100);
+                this.args.onChange(storedValue, detail);
+            }
+        });
     }
 
     @action setCurrency(currency) {
         const { onCurrencyChange } = this.args;
 
         if (this.autonumeric) {
-            this.autonumeric.set(numbersOnly(this.value, true), this.getCurrencyFormatOptions(currency));
+            let value = this.autonumeric.getNumber();
+            this.autonumeric.update(this.getCurrencyFormatOptions(currency));
+            // Re-set the value to ensure it's formatted correctly with new currency
+            this.autonumeric.set(value);
         }
 
         this.currency = currency.code;
@@ -58,25 +72,6 @@ export default class MoneyInputComponent extends Component {
         }
     }
 
-    @action onFormatCompleted({ detail }) {
-        const { onFormatCompleted, onChange } = this.args;
-
-        // 300ms for format to apply to input ?
-        later(
-            this,
-            () => {
-                if (typeof onFormatCompleted === 'function') {
-                    onFormatCompleted(detail);
-                }
-            },
-            300
-        );
-
-        if (typeof onChange === 'function') {
-            onChange(detail);
-        }
-    }
-
     @action getCurrencyFormatOptions(currency) {
         let options = {
             currencySymbol: isNone(currency.symbol) ? '$' : currency.symbol,

package/addon/styles/components/basic-dropdown.css

@@ -40,10 +40,12 @@ body.fleetbase-console .ember-basic-dropdown-content {
     background-color: transparent;
 }
 
+.ember-power-select-multiple-option .hide-from-trigger,
 .ember-power-select-selected-item .hide-from-trigger {
     display: none;
 }
 
+.ember-power-select-multiple-option div.normalize-in-trigger,
 .ember-power-select-selected-item div.normalize-in-trigger {
     font-weight: normal;
 }

package/addon/styles/components/ember-power-select.css

@@ -51,9 +51,23 @@
 .ember-power-select-trigger-multiple-input,
 .ember-power-select-trigger-multiple-input[type='search'] {
     @apply bg-transparent text-sm text-white outline-0 leading-5 px-1;
-    max-height: 21px;
+    height: 26.42px; /** don't ask */
+    max-height: 40px;
 }
 
-.ember-power-select-option[aria-selected="true"] {
+.fleetbase-console.ember-power-select-trigger-multiple-input::placeholder,
+.ember-power-select-trigger-multiple-input .ember-power-select-trigger-multiple-input::placeholder {
+    color: #6b7280;
+    opacity: 1;
+}
+
+.ember-power-select-option[aria-selected='true'] {
     @apply dark:bg-gray-900 bg-gray-200;
-}
+}
+
+.ember-model-select-multiple-trigger > .ember-power-select-multiple-options > li.ember-power-select-multiple-option {
+    display: flex;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.45rem;
+}

package/index.js

@@ -21,7 +21,7 @@ const postcssOptions = {
         plugins: [
             postcssAtRulesVariables,
             postcssImport({
-                path: ['node_modules'],
+                path: ['node_modules', path.join(__dirname, 'addon/styles')],
                 plugins: [postcssAtRulesVariables, postcssImport],
             }),
             postcssMixins,
@@ -55,13 +55,31 @@ module.exports = {
         postcssOptions,
     },
 
+    treeForStyles: function () {
+        // Only provide styles to the root application, not to engines
+        // This prevents engines from trying to compile ember-ui styles
+        let parent = this.parent;
+        while (parent) {
+            const isEngine = parent.lazyLoading === true || (parent.lazyLoading && parent.lazyLoading.enabled === true);
+            if (isEngine) {
+                // Parent is an engine - don't provide styles
+                return null;
+            }
+            parent = parent.parent;
+        }
+
+        // Parent is the root app - provide styles normally
+        return this._super.treeForStyles ? this._super.treeForStyles.apply(this, arguments) : null;
+    },
+
     included: function (app) {
         this._super.included.apply(this, arguments);
 
-        // Get Application Host
+        // Get Application Host (skips engines, finds root app)
         app = this.findApplicationHost(app);
 
-        // PostCSS Options
+        // PostCSS Options - only applied to the root application
+        // Engines are excluded by findApplicationHost, so they won't get these options
         app.options = app.options || {};
         app.options.postcssOptions = postcssOptions;
 
@@ -128,11 +146,11 @@ module.exports = {
     findApplicationHost(app) {
         let current = this;
         do {
-            if (current.lazyLoading === true || (current.lazyLoading && current.lazyLoading.enabled === true)) {
-                app = current;
-                break;
+            // Skip engines - we want the root application, not an engine
+            const isEngine = current.lazyLoading === true || (current.lazyLoading && current.lazyLoading.enabled === true);
+            if (!isEngine) {
+                app = current.app || app;
             }
-            app = current.app || app;
         } while (current.parent.parent && (current = current.parent));
 
         return app;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fleetbase/ember-ui",
-    "version": "0.3.12",
+    "version": "0.3.13",
     "description": "Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.",
     "keywords": [
         "fleetbase-ui",
@@ -127,6 +127,7 @@
         "broccoli-asset-rev": "^3.0.0",
         "broccoli-funnel": "^3.0.8",
         "broccoli-merge-trees": "^4.2.0",
+        "broccoli-postcss-single": "^5.0.2",
         "clean-css": "^5.3.2",
         "concurrently": "^8.2.2",
         "ember-cli": "~5.4.1",

package/tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     content: [
         './app/**/*.{hbs,js}',
         './addon/**/*.{hbs,js}',
+        './addon/**/*.css',
         // All Fleetbase packages (both pnpm symlinked and normal installs)
         './node_modules/@fleetbase+*/**/addon/**/*.{hbs,js}',
         './node_modules/@fleetbase/**/addon/**/*.{hbs,js}',