Release v0.4.1

RELEASE.md

@@ -1,10 +1,15 @@
-> v0.4.0 ~ "Tab navigation overflow fix"
+> v0.4.1 ~ "Resource identity: pills, one-line identity cells, hover summaries and select options"
 
 ---
 ## Highlights
 
-- Route-backed tabs without explicit IDs remain accessible through the TabNavigation More menu when the tab bar overflows (#171).
-- Tab identity falls back from `id` to `route` to `key` for active state, overflow calculations, and keyboard navigation.
+- **Resource descriptor registry** — `utils/resource-registry` stores one descriptor per kind of record (title, identifier, image, status, badges, facts, how it opens) in the shared `universe/registry-service`, so the host and every engine read one set. `resolveResourceKey` accepts a record, an identity stub, a model name or alias, a `prefix:key` string, a PHP class name or a polymorphic type; `openResource` unwraps proxies and stubs, swaps a subtype for its canonical record and never throws. The `resource-type`, `resource-component` and `resource-relation` helpers and the `resource-registry` service expose it to templates and engines.
+- **Resource::Pill, Resource::Summary, Resource::HoverCard** — a descriptor-driven pill that opens its record and shows a compact summary card on hover (photo or icon, name and identifier, status and online state, a handful of facts and one View action). The card is lazy: nothing renders until the pointer has rested on the target, and it hydrates only then.
+- **Table::Cell::Identity** — a one-line identity cell: a small image with the status dot, the name and up to two inline badges, no status badge. It opens the record on click, disables on `column.permission`, and never fires the row action as well.
+- **Resource::SelectOption** — the option row for record pickers, with a compact variant for the closed trigger. `filter/model` renders options through it and the new `filter/model-multiple` filter selects several records.
+- **Core resource families** — pills, summaries, select options and identity cells for user, company, group, role, file and category, registered by an instance-initializer in the host.
+- **Fixes** — `Attach::Popover` applies `@class`, keeps an interactive popover enterable while shown, follows later changes to `@isShown` and removes its listeners on destroy; `Attach::Tooltip` forwards `hideDelay`, `hideDuration`, `@class`, `@style`, `floatingTarget`, `floatingContainer` and `onChange`; `Pill` renders a static span when it has nothing to do and hands its tooltip component the resource; `MultiSelect` forwards `@selectedItemComponent`, `@searchField` and `@searchPlaceholder`; `table/cell/resource-identity` no longer renders an empty meta row.
+- **Dummy app** — `@fleetbase/ember-core` is declared as a dependency so the components that import it can render in tests.
 
 ---
 ## Need help?

addon/components/attach/popover.hbs

@@ -1,8 +1,9 @@
-<div {{did-insert this.setupComponent}}>
+<div {{did-insert this.setupComponent}} {{did-update this.isShownArgumentChanged @isShown}}>
     {{#if (and this.currentTarget (or (not this.lazyRender) this.mustRender))}}
         <Floating
             id={{this.id}}
-            class="ember-attacher"
+            class="ember-attacher {{this.class}}"
+            @pointerEvents={{this.floatingPointerEvents}}
             @ariaRole={{@ariaRole}}
             @placement={{this.placement}}
             @container={{this.floatingContainer}}

addon/components/attach/popover.js

@@ -8,6 +8,7 @@ import { cancel, debounce, later, run } from '@ember/runloop';
 export default class AttachPopoverComponent extends Component {
     @tracked animation = 'fill';
     @tracked arrow = false;
+    @tracked class = null;
     @tracked flip = null;
     @tracked hideDelay = 0;
     @tracked hideDuration = 300;
@@ -47,10 +48,21 @@ export default class AttachPopoverComponent extends Component {
         return `ember-attacher-${this.animation} ${showOrHideClass} ${arrowClass}`;
     }
 
-    @computed('style', 'transitionDuration', 'isShown') get computedStyle() {
-        const { style, transitionDuration, isShown } = this;
+    @computed('style', 'transitionDuration', 'isShown', 'interactive') get computedStyle() {
+        const { style, transitionDuration, isShown, interactive } = this;
 
-        return htmlSafe(`transition-duration: ${transitionDuration}ms; pointer-events: ${isShown ? 'auto' : 'none'}; ${style ?? ''}`);
+        // Only an interactive attachment may be entered: a plain tooltip stays
+        // transparent to the pointer so hovering it never steals the target's
+        // mouseleave. `isShown` is maintained by show()/hide().
+        return htmlSafe(`transition-duration: ${transitionDuration}ms; pointer-events: ${isShown && interactive ? 'auto' : 'none'}; ${style ?? ''}`);
+    }
+
+    /**
+     * The pointer-events value the floating element itself should carry so an
+     * interactive attachment can be entered while it is visible.
+     */
+    @computed('isShown', 'interactive') get floatingPointerEvents() {
+        return this.isShown && this.interactive ? 'auto' : 'none';
     }
 
     @computed('showOn') get showEvents() {
@@ -93,6 +105,10 @@ export default class AttachPopoverComponent extends Component {
         // apply default arguments
         this.setDefaultOptions();
 
+        // Whether the attachment should currently be visible; also driven by
+        // show()/hide() and, later, by updates to @isShown.
+        this.isShown = Boolean(this.args.isShown);
+
         // set last used capture arg
         this.lastUseCaptureArgumentValue = this.useCapture;
 
@@ -121,6 +137,18 @@ export default class AttachPopoverComponent extends Component {
         this.initializeAttacher();
     }
 
+    /**
+     * Follows later changes to `@isShown` so a parent can open or close the
+     * attachment after the initial render.
+     */
+    @action isShownArgumentChanged(element, [isShown]) {
+        if (isShown) {
+            this.show();
+        } else if (this.floatingElement) {
+            this.hide();
+        }
+    }
+
     @action initializeAttacher() {
         this.removeEventListeners();
 
@@ -143,6 +171,14 @@ export default class AttachPopoverComponent extends Component {
     @action hide() {
         const { floatingElement } = this;
 
+        this.isShown = false;
+        this.hidePending = false;
+
+        if (this.hideListenersOnDocumentByEvent.mousemove) {
+            delete this.hideListenersOnDocumentByEvent.mousemove;
+            document.removeEventListener('mousemove', this.hideIfMouseOutsideTargetOrAttachment, this.useCapture);
+        }
+
         if (!floatingElement) {
             this.animationTimeout = requestAnimationFrame(() => {
                 this.animationTimeout = this.hide();
@@ -191,13 +227,19 @@ export default class AttachPopoverComponent extends Component {
             return;
         }
 
-        // If cursor is not on the attachment or target, hide the popover
-        if (!target.contains(event.target) && !(this.isOffset && this.isCursorBetweenTargetAndAttachment(event)) && this.floatingElement && !this.floatingElement.contains(event.target)) {
-            // Remove this listener before hiding the attachment
-            delete this.hideListenersOnDocumentByEvent.mousemove;
-            document.removeEventListener('mousemove', this.hideIfMouseOutsideTargetOrAttachment, this.useCapture);
+        const outside =
+            !target.contains(event.target) && !(this.isOffset && this.isCursorBetweenTargetAndAttachment(event)) && this.floatingElement && !this.floatingElement.contains(event.target);
 
-            this.hideAfterDelay();
+        if (outside) {
+            // Start the delayed hide once and keep listening, so re-entering the
+            // target or the attachment within the delay cancels it.
+            if (!this.hidePending) {
+                this.hidePending = true;
+                this.hideAfterDelay();
+            }
+        } else if (this.hidePending) {
+            cancel(this.delayedVisibilityToggle);
+            this.hidePending = false;
         }
     }
 
@@ -326,6 +368,7 @@ export default class AttachPopoverComponent extends Component {
 
     @action showAfterDelay() {
         cancel(this.delayedVisibilityToggle);
+        this.hidePending = false;
 
         this.mustRender = true;
         this.addListenersForHideEvents();
@@ -343,10 +386,25 @@ export default class AttachPopoverComponent extends Component {
         }
 
         this.mustRender = true;
+        this.isShown = true;
 
         // Make the attachment visible immediately so transition animations can take place
         this.setIsVisibleAfterDelay(true, 0);
         this.startShowAnimation();
+
+        // An interactive attachment that was opened programmatically (or whose
+        // target the pointer left before the listeners were bound) must still
+        // close once the pointer is away from both target and attachment.
+        if (this.interactive && this.hideEvents.includes('mouseleave')) {
+            this.hideOnMouseLeaveTarget();
+        }
+    }
+
+    willDestroy() {
+        super.willDestroy(...arguments);
+        cancel(this.delayedVisibilityToggle);
+        cancelAnimationFrame(this.animationTimeout);
+        this.removeEventListeners();
     }
 
     @action startShowAnimation() {
@@ -416,6 +474,7 @@ export default class AttachPopoverComponent extends Component {
                     this.animationTimeout = requestAnimationFrame(() => {
                         if (!this.isDestroyed && !this.isDestroying) {
                             this.floatingElement.style.display = isVisible ? '' : 'none';
+                            this.floatingElement.style.pointerEvents = this.floatingPointerEvents;
 
                             // Prevent jank by making the attachment invisible until positioned.
                             // The visibility style will be toggled by this.startShowAnimation()
@@ -431,6 +490,7 @@ export default class AttachPopoverComponent extends Component {
             );
         } else {
             this.floatingElement.style.display = isVisible ? '' : 'none';
+            this.floatingElement.style.pointerEvents = this.floatingPointerEvents;
 
             // Prevent jank by making the attachment invisible until positioned.
             // The visibility style will be toggled by this.startShowAnimation()

addon/components/attach/tooltip.hbs

@@ -7,6 +7,12 @@
     @offset={{@offset}}
     @shiftOptions={{@shiftOptions}}
     @animation={{@animation}}
+    @class={{@class}}
+    @style={{@style}}
+    @floatingTarget={{@floatingTarget}}
+    @floatingContainer={{@floatingContainer}}
+    @hideDelay={{@hideDelay}}
+    @hideDuration={{@hideDuration}}
     @hideOn={{@hideOn}}
     @showOn={{@showOn}}
     @interactive={{@interactive}}
@@ -15,5 +21,6 @@
     @showDelay={{@showDelay}}
     @showDuration={{@showDuration}}
     @transitionDuration={{@transitionDuration}}
+    @onChange={{@onChange}}
     ...attributes
 >{{yield}}</Attach::Popover>

addon/components/category/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{or @category @resource}}
+    @resourceType="category"
+    @title={{@title}}
+    @titleFallback={{or @titleFallback "No category"}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

addon/components/category/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{or @category @resource}} @resourceType="category" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

addon/components/company/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{or @company @resource}}
+    @resourceType="company"
+    @title={{@title}}
+    @titleFallback={{or @titleFallback "No company"}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

addon/components/company/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{or @company @resource}} @resourceType="company" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

addon/components/file/pill.hbs

@@ -0,0 +1,24 @@
+<Resource::Pill
+    @resource={{or @file @resource}}
+    @resourceType="file"
+    @title={{@title}}
+    @titleFallback={{or @titleFallback "No file"}}
+    @subtitle={{@subtitle}}
+    @showOnlineIndicator={{@showOnlineIndicator}}
+    @noPopover={{@noPopover}}
+    @popoverPlacement={{@popoverPlacement}}
+    @static={{@static}}
+    @onClick={{@onClick}}
+    @onView={{@onView}}
+    @anchorClass={{@anchorClass}}
+    @imageClass={{@imageClass}}
+    @imageWrapperClass={{@imageWrapperClass}}
+    @contentWrapperClass={{@contentWrapperClass}}
+    @titleClass={{@titleClass}}
+    @subtitleClass={{@subtitleClass}}
+    @useBlock={{(has-block)}}
+    ...attributes
+    as |resource|
+>
+    {{yield resource}}
+</Resource::Pill>

addon/components/file/summary.hbs

@@ -0,0 +1 @@
+<Resource::Summary @resource={{or @file @resource}} @resourceType="file" @onView={{@onView}} @showView={{@showView}} @onClose={{@onClose}} @titleFallback={{@titleFallback}} ...attributes />

addon/components/filter/model-multiple.hbs

@@ -0,0 +1,24 @@
+<div class="filter-model-multiple flex flex-row items-center" ...attributes>
+    <ModelSelectMultiple
+        @modelName={{@filter.model}}
+        @query={{@filter.query}}
+        @optionLabel={{this.optionLabel}}
+        @selectedModel={{this.selectedModels}}
+        @placeholder={{@placeholder}}
+        @triggerClass="form-select form-input form-input-sm flex-1"
+        @infiniteScroll={{false}}
+        @renderInPlace={{true}}
+        @onChange={{this.onChange}}
+        @selectedItemComponent={{if this.optionComponent (component this.optionComponent compact=true)}}
+        as |model|
+    >
+        {{#if this.optionComponent}}
+            {{component this.optionComponent option=model}}
+        {{else}}
+            {{get model this.optionLabel}}
+        {{/if}}
+    </ModelSelectMultiple>
+    <button type="button" class="clear-button" disabled={{not this.selectedModels.length}} aria-label="Clear" {{on "click" this.clear}}>
+        <FaIcon @icon="times" />
+    </button>
+</div>