@fleetbase/ember-ui 0.3.23 → 0.3.24

package/addon/components/template-builder/layers-panel.hbs

@@ -0,0 +1,99 @@
+{{! Template Builder Layers Panel }}
+<div class="tb-layers-panel flex flex-col h-full" ...attributes>
+    {{! Header }}
+    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-700">
+        <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Layers</span>
+        <span class="text-xs text-gray-400 dark:text-gray-500">{{this.sortedElements.length}}</span>
+    </div>
+
+    {{! Element list }}
+    <div class="flex-1 overflow-y-auto">
+        {{#if this.sortedElements.length}}
+            {{#each this.sortedElements as |element|}}
+                {{! Outer row is a div so that real <button> children are valid. }}
+                <div
+                    class="tb-layer-row group flex items-center px-2 py-1.5 cursor-pointer border-b border-transparent hover:bg-gray-50 dark:hover:bg-gray-800 {{if (this.isSelected element) 'bg-blue-50 dark:bg-blue-900/20 border-l-2 border-l-blue-500'}}"
+                    {{on "click" (fn this.selectElement element)}}
+                >
+                    {{! Type icon }}
+                    <FaIcon
+                        @icon={{this.elementIcon element.type}}
+                        class="w-3 h-3 mr-2 flex-shrink-0 {{if (this.isSelected element) 'text-blue-500' 'text-gray-400 dark:text-gray-500'}}"
+                    />
+
+                    {{! Label / rename input }}
+                    <div class="flex-1 min-w-0 mr-1">
+                        {{#if (this.isRenaming element)}}
+                            <input
+                                type="text"
+                                class="w-full text-xs bg-white dark:bg-gray-700 border border-blue-400 rounded px-1 py-0 outline-none"
+                                value={{this.renameValue}}
+                                {{on "input" (fn (mut this.renameValue) value="target.value")}}
+                                {{on "keydown" (fn this.handleRenameKeydown element)}}
+                                {{on "blur" (fn this.commitRename element)}}
+                                {{did-insert (fn (mut this.renameValue) this.renameValue)}}
+                            />
+                        {{else}}
+                            <span
+                                class="block text-xs truncate {{if (this.isSelected element) 'text-blue-700 dark:text-blue-300 font-medium' 'text-gray-700 dark:text-gray-300'}} {{unless (this.isVisible element) 'opacity-40'}}"
+                                {{on "dblclick" (fn this.startRename element)}}
+                                title="Double-click to rename"
+                            >
+                                {{this.elementLabel element}}
+                            </span>
+                        {{/if}}
+                    </div>
+
+                    {{! Action buttons (shown on hover or when selected) }}
+                    <div class="flex items-center space-x-0.5 opacity-0 group-hover:opacity-100 {{if (this.isSelected element) 'opacity-100'}} transition-opacity">
+                        {{! Visibility toggle }}
+                        <button
+                            type="button"
+                            class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+                            title={{if (this.isVisible element) "Hide element" "Show element"}}
+                            {{on "click" (fn this.toggleVisibility element)}}
+                        >
+                            <FaIcon @icon={{if (this.isVisible element) "eye" "eye-slash"}} class="w-3 h-3" />
+                        </button>
+
+                        {{! Move up }}
+                        <button
+                            type="button"
+                            class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+                            title="Move layer up"
+                            {{on "click" (fn this.moveUp element)}}
+                        >
+                            <FaIcon @icon="chevron-up" class="w-3 h-3" />
+                        </button>
+
+                        {{! Move down }}
+                        <button
+                            type="button"
+                            class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+                            title="Move layer down"
+                            {{on "click" (fn this.moveDown element)}}
+                        >
+                            <FaIcon @icon="chevron-down" class="w-3 h-3" />
+                        </button>
+
+                        {{! Delete }}
+                        <button
+                            type="button"
+                            class="p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-400 dark:text-gray-500 hover:text-red-500 dark:hover:text-red-400"
+                            title="Delete element"
+                            {{on "click" (fn this.deleteElement element)}}
+                        >
+                            <FaIcon @icon="trash" class="w-3 h-3" />
+                        </button>
+                    </div>
+                </div>
+            {{/each}}
+        {{else}}
+            <div class="flex flex-col items-center justify-center py-8 px-4 text-center">
+                <FaIcon @icon="layer-group" class="w-6 h-6 text-gray-300 dark:text-gray-600 mb-2" />
+                <p class="text-xs text-gray-400 dark:text-gray-500">No elements yet.</p>
+                <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">Use the toolbar to add elements.</p>
+            </div>
+        {{/if}}
+    </div>
+</div>

package/addon/components/template-builder/layers-panel.js

@@ -0,0 +1,146 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+ * TemplateBuilderLayersPanelComponent
+ *
+ * Left panel showing the element tree (layers). Supports:
+ * - Selecting an element by clicking its row
+ * - Toggling element visibility
+ * - Deleting an element
+ * - Reordering via z_index controls (move up/down)
+ * - Renaming an element label
+ *
+ * @argument {Array}    elements         - The template content array (elements)
+ * @argument {Object}   selectedElement  - Currently selected element
+ * @argument {Function} onSelectElement  - Called with element when row is clicked
+ * @argument {Function} onUpdateElement  - Called with (uuid, changes) to update an element
+ * @argument {Function} onDeleteElement  - Called with uuid to delete an element
+ * @argument {Function} onReorderElement - Called with (uuid, direction) — 'up' or 'down'
+ */
+export default class TemplateBuilderLayersPanelComponent extends Component {
+    @tracked renamingUuid = null;
+    @tracked renameValue = '';
+
+    get sortedElements() {
+        const elements = this.args.elements ?? [];
+        // Sort descending by z_index so highest layer is at top of list (like Figma/Sketch)
+        return [...elements].sort((a, b) => (b.z_index ?? 1) - (a.z_index ?? 1));
+    }
+
+    @action
+    elementIcon(type) {
+        const icons = {
+            text: 'font',
+            image: 'image',
+            table: 'table',
+            line: 'minus',
+            shape: 'square',
+            qr_code: 'qrcode',
+            barcode: 'barcode',
+        };
+        return icons[type] ?? 'layer-group';
+    }
+
+    @action
+    elementLabel(element) {
+        if (element.label) return element.label;
+        const typeLabels = {
+            text: 'Text',
+            image: 'Image',
+            table: 'Table',
+            line: 'Line',
+            shape: 'Shape',
+            qr_code: 'QR Code',
+            barcode: 'Barcode',
+        };
+        return typeLabels[element.type] ?? 'Element';
+    }
+
+    @action
+    isSelected(element) {
+        return this.args.selectedElement?.uuid === element.uuid;
+    }
+
+    @action
+    isVisible(element) {
+        return element.visible !== false;
+    }
+
+    @action
+    isRenaming(element) {
+        return this.renamingUuid === element.uuid;
+    }
+
+    @action
+    selectElement(element, event) {
+        event.stopPropagation();
+        if (this.args.onSelectElement) {
+            this.args.onSelectElement(element);
+        }
+    }
+
+    @action
+    toggleVisibility(element, event) {
+        event.stopPropagation();
+        if (this.args.onUpdateElement) {
+            this.args.onUpdateElement(element.uuid, { visible: !this.isVisible(element) });
+        }
+    }
+
+    @action
+    deleteElement(element, event) {
+        event.stopPropagation();
+        if (this.args.onDeleteElement) {
+            this.args.onDeleteElement(element.uuid);
+        }
+    }
+
+    @action
+    moveUp(element, event) {
+        event.stopPropagation();
+        if (this.args.onReorderElement) {
+            this.args.onReorderElement(element.uuid, 'up');
+        }
+    }
+
+    @action
+    moveDown(element, event) {
+        event.stopPropagation();
+        if (this.args.onReorderElement) {
+            this.args.onReorderElement(element.uuid, 'down');
+        }
+    }
+
+    @action
+    startRename(element, event) {
+        event.stopPropagation();
+        this.renamingUuid = element.uuid;
+        this.renameValue = this.elementLabel(element);
+    }
+
+    @action
+    commitRename(element) {
+        if (this.renameValue.trim() && this.args.onUpdateElement) {
+            this.args.onUpdateElement(element.uuid, { label: this.renameValue.trim() });
+        }
+        this.renamingUuid = null;
+        this.renameValue = '';
+    }
+
+    @action
+    cancelRename() {
+        this.renamingUuid = null;
+        this.renameValue = '';
+    }
+
+    @action
+    handleRenameKeydown(element, event) {
+        if (event.key === 'Enter') {
+            this.commitRename(element);
+        } else if (event.key === 'Escape') {
+            this.cancelRename();
+        }
+    }
+}

package/addon/components/template-builder/properties-panel/field.hbs

@@ -0,0 +1,7 @@
+{{! Properties Panel Field }}
+<div class="tb-prop-field {{if (eq @span '2') 'col-span-2'}}">
+    {{#if @label}}
+        <label class="block text-xs text-gray-500 dark:text-gray-400 mb-0.5">{{@label}}</label>
+    {{/if}}
+    {{yield}}
+</div>

package/addon/components/template-builder/properties-panel/field.js

@@ -0,0 +1,9 @@
+import Component from '@glimmer/component';
+
+/**
+ * A labelled field row in the properties panel.
+ *
+ * @argument {String} label - Field label
+ * @argument {String} span  - Optional: '2' for full-width (grid col-span-2)
+ */
+export default class TemplateBuilderPropertiesPanelFieldComponent extends Component {}

package/addon/components/template-builder/properties-panel/section.hbs

@@ -0,0 +1,24 @@
+{{! Properties Panel Section }}
+<div class="tb-prop-section border-b border-gray-100 dark:border-gray-800">
+    <button
+        type="button"
+        class="w-full flex items-center justify-between px-3 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
+        {{on "click" this.toggle}}
+    >
+        <div class="flex items-center space-x-2">
+            {{#if @icon}}
+                <FaIcon @icon={{@icon}} class="w-3 h-3 text-gray-400 dark:text-gray-500" />
+            {{/if}}
+            <span class="text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider">{{@title}}</span>
+        </div>
+        <FaIcon
+            @icon={{if @isOpen "chevron-up" "chevron-down"}}
+            class="w-3 h-3 text-gray-400 dark:text-gray-500 transition-transform"
+        />
+    </button>
+    {{#if @isOpen}}
+        <div class="px-3 pb-3 pt-2">
+            {{yield}}
+        </div>
+    {{/if}}
+</div>

package/addon/components/template-builder/properties-panel/section.js

@@ -0,0 +1,19 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+/**
+ * Collapsible section wrapper for the properties panel.
+ *
+ * @argument {String}   title    - Section title
+ * @argument {String}   icon     - FontAwesome icon name
+ * @argument {Boolean}  isOpen   - Whether the section is expanded
+ * @argument {Function} onToggle - Called when the header is clicked
+ */
+export default class TemplateBuilderPropertiesPanelSectionComponent extends Component {
+    @action
+    toggle() {
+        if (this.args.onToggle) {
+            this.args.onToggle();
+        }
+    }
+}