@omegagrid/commands 0.8.3 → 0.9.0

package/dist/ui/commandWindow.js

@@ -4,14 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Commands, Command, CommandSection } from "../model";
-import { dom, ListSelectTrigger } from "@omegagrid/core";
+import { Commands, Command, CommandGroup, initOptions } from "../model";
+import { ListSelectTrigger } from "@omegagrid/core";
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { debounce } from "ts-debounce";
 import { style, itemStyle } from "./commandWindow.style";
-import constants from "../constants";
+import { styleMap } from "lit-html/directives/style-map.js";
+import { msg } from "@omegagrid/localize";
 export class CommandEvent extends Event {
     constructor(type, args) {
         super(`command.${type}`, { bubbles: true, composed: true });
@@ -20,86 +20,75 @@ export class CommandEvent extends Event {
     }
 }
 let CommandWindow = class CommandWindow extends LitElement {
-    get input() { return this.inputRef?.value; }
+    get activeSection() { return this.sections?.[this.activeSectionIndex]; }
     get inputValue() { return this.input?.value ?? ''; }
-    get list() { return this.listRef?.value; }
-    get filterValue() { return this.mode == 'search' ? this.input.value : null; }
-    exec(dispatchEvent = true) {
-        const tokens = this.input.value.split('>').map(t => t.trim());
-        if (tokens[0].length == 0) {
-            if (this.list.selectedIndex > -1 && this.list.selectedIndex < this.visibleItems.length) {
-                tokens[0] = this.visibleItems[this.list.selectedIndex].name;
-            }
-        }
-        if (this.mode == 'search') {
-            const command = this.commands.get(tokens[0])
-                ?? this.visibleItems.find(item => item instanceof Command && item.name == tokens[0]);
-            if (!command)
-                return;
-            if (tokens.length - 1 < command.requiredParams) {
-                tokens.push('');
-                this.input.value = tokens.join(' > ');
-                this.input.focus();
-            }
-            else {
-                tokens.shift();
-                command.exec(...tokens);
-                if (dispatchEvent)
-                    this.dispatchEvent(new CommandEvent('exec', {
-                        command,
-                        value: this.inputValue
-                    }));
-                this.close();
-            }
+    get parsedInput() {
+        const input = this.inputValue;
+        const chunks = input.split(' ', 2);
+        if (chunks.length > 1) {
+            const section = (this.sections ?? []).findIndex(s => s?.triggerCommand == chunks[0]);
+            const value = section > -1 ? chunks[1] ?? '' : input;
+            return { section, value };
         }
         else {
-            const command = this.visibleItems[this.list.selectedIndex];
-            if (!command)
-                return;
-            if (dispatchEvent)
-                this.dispatchEvent(new CommandEvent('exec', {
-                    command: command,
-                    value: this.inputValue
-                }));
-            this.close();
+            return { section: -1, value: input };
+        }
+    }
+    get filterValue() {
+        return this.mode == 'search' ? this.parsedInput?.value ?? '' : '';
+    }
+    async exec(dispatchEvent = true) {
+        const input = this.parsedInput;
+        const command = this.visibleItems[this.list.selectedIndex];
+        if (!(command instanceof Command))
+            return;
+        this.clearFilter(false);
+        command.exec(input.value);
+        if (this.adapter) {
+            this.adapter.exec(command, input.value);
         }
+        if (dispatchEvent)
+            this.dispatchEvent(new CommandEvent('exec', {
+                command: command,
+                section: this.sections.find(s => s.id === input.section),
+                value: input.value
+            }));
     }
     constructor() {
         super();
-        this.inputRef = createRef();
-        this.listRef = createRef();
+        this.options = initOptions();
         /**
          * search = commands are filtered by input value
          * input = commands are not filtered, input is used to enter custom value
          * none = no input, only command list is shown
          */
         this.mode = 'search';
-        this.commands = new Commands();
-        this.triggerKey = 'F1';
+        this.sectionPosition = 'right';
         this.placeholder = '';
-        this.showSections = false;
-        this.requireUpdateCommands = true;
+        this.showGroups = false;
+        this.model = new Commands();
+        this.sections = [{ id: 'default' }];
+        this.activeSectionIndex = 0;
+        this.noResults = false;
         this._commandRenderer = (div, command) => {
-            return html `
-			<div class="command">
-				${command.name}
-			</div>
-		`;
+            return html `<div class="command">${command.name}</div>`;
         };
-        this._sectionRenderer = (div, section) => {
+        this._groupRenderer = (div, group) => {
             return html `
-			<div class="section" @mousedown="${(e) => e.preventDefault()}">
-				<div class="section-toggle">
-					<og-icon icon="angle-${section.open ? 'down' : 'right'}"></og-icon>
+			<div class="group" @mousedown="${(e) => e.preventDefault()}">
+				<div class="group-toggle">
+					<og-icon icon="angle-${group.open ? 'down' : 'right'}"></og-icon>
 				</div>
-				<div class="section-text">
-					${section.name}
+				
+				<div class="group-text">
+					${group.name}
 				</div>
 			</div>
 		`;
         };
         this._onKeyDown = (e) => {
-            e.stopPropagation();
+            if (e.key != 'Escape')
+                e.stopPropagation();
             switch (e.key) {
                 case 'ArrowDown':
                     e.preventDefault();
@@ -111,185 +100,254 @@ let CommandWindow = class CommandWindow extends LitElement {
                     break;
                 case 'Enter':
                     e.preventDefault();
-                    if (this.visibleItems[this.list.selectedIndex] instanceof CommandSection)
-                        this.toggleSection(this.visibleItems[this.list.selectedIndex].id);
+                    if (this.visibleItems[this.list.selectedIndex] instanceof CommandGroup)
+                        this.toggleGroup(this.visibleItems[this.list.selectedIndex].id);
                     else
                         this.exec();
                     break;
-                case 'Escape':
-                case this.triggerKey:
-                    e.preventDefault();
-                    this.close();
-                    break;
             }
         };
-        this._onKeyUp = debounce(e => {
-            e.stopPropagation();
-            if (this.mode == 'search') {
-                const excludedKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Shift', 'Enter', this.triggerKey];
-                if (excludedKeys.indexOf(e.key) == -1) {
-                    this.updateCommands();
-                    this.list.size = this.visibleItems.length;
-                }
+        this._debounceInput = debounce(() => {
+            if (this.mode != 'search')
+                return;
+            const input = this.parsedInput;
+            if (input.section > -1) {
+                this.activeSectionIndex = input.section;
+                this.input.value = '';
             }
+            this.updateCommands();
         });
-        this._onTargetKeyDown = (e) => {
-            if (e.key == this.triggerKey) {
-                e.stopPropagation();
-                e.preventDefault();
-                this.open();
+        this._onInput = (e) => {
+            e.stopPropagation();
+            this._debounceInput();
+        };
+        this._onSectionSelect = (e) => {
+            if (this.activeSectionIndex == e.index)
+                return;
+            this.activeSectionIndex = e.index;
+            if (this.activeSection?.triggerCommand != null) {
+                //this.input.value = this.activeSection?.triggerCommand + ' ';
+                this.updateCommands();
+            }
+            this.focus();
+        };
+        this._onDropdownChange = (e) => {
+            this.activeSectionIndex = this.sections.findIndex(s => s.id === this.dropdown.value);
+            if (this.activeSection?.triggerCommand != null) {
+                //this.input.value = this.activeSection?.triggerCommand + ' ';
+                this.updateCommands();
             }
+            this.focus();
         };
         this._onSelect = (e) => {
             const item = this.visibleItems[e.index];
             if (item instanceof Command) {
                 if (this.mode == 'search')
                     this.input.value = item.name;
-                if (e.trigger == ListSelectTrigger.Click || e.trigger == ListSelectTrigger.Enter)
+                if (e.trigger == ListSelectTrigger.Click || e.trigger == ListSelectTrigger.Enter) {
                     this.exec();
+                }
             }
             else {
                 this.input.value = '';
                 if (e.trigger == ListSelectTrigger.Click || e.trigger == ListSelectTrigger.Enter) {
-                    this.toggleSection(item.id);
+                    this.toggleGroup(item.id);
                 }
             }
             setTimeout(() => this.input.focus());
         };
-        this._itemRenderer = (div, index) => {
-            return this.visibleItems[index] instanceof CommandSection
-                ? this._sectionRenderer(div, this.visibleItems[index])
-                : this._commandRenderer(div, this.visibleItems[index]);
+        this._itemRenderer = (div, index, opts) => {
+            return this.visibleItems[index] instanceof CommandGroup
+                ? this._groupRenderer(div, this.visibleItems[index], opts)
+                : this._commandRenderer(div, this.visibleItems[index], opts);
         };
+        this.renderTabs = () => this.sections?.length > 1 ? html `
+		<og-container 
+			.horizontalSliderPosition="${this.sectionPosition == 'top' ? 'bottom' : 'top'}"
+			scrollMode="horizontal" 
+			sliderSize="4">
+			<og-tabs
+				slot="content"
+				class="tabs"
+				tabSize="stretch"
+				tabAlign="center"
+				style="${styleMap({ borderTop: this.sectionPosition == 'bottom' ? '1px solid var(--og-border)' : '' })}"
+				@tab.select="${this._onSectionSelect}"
+				.position="${this.sectionPosition == 'top' ? 'top' : 'bottom'}"
+				.selectedIndex="${this.activeSectionIndex}"
+				.items="${this.sections.map(section => ({ ...section, title: this.getSectionTitle(section) }))}">
+			</og-tabs>
+		</og-container>
+	` : '';
+        this.renderDropdown = () => this.sections?.length > 1 ? html `
+		<og-dropdown-list 
+			color="transparent"
+			.value="${this.activeSection?.id}"
+			@change="${this._onDropdownChange}"
+			.items="${this.sections.map(section => ({
+            k: section.id,
+            v: this.getSectionTitle(section),
+            icon: section.icon
+        }))}">
+		</og-dropdown-list>
+	` : '';
+        this.renderSwitches = () => this.activeSection?.switches?.length > 0 ? html `
+		<div class="switches">
+			${this.activeSection.switches.map((s) => html `
+				<og-button 
+					type="toggle"
+					.text="${s.value}"
+					.state="${s.checked ? 'checked' : 'unchecked'}"
+					@click="${(e) => {
+            s.checked = e.target.state === 'checked';
+            this.focus();
+            this.updateCommands();
+        }}">
+				</og-button>
+			`)}
+		</div>
+	` : '';
         this.render = () => html `
 		<div class="input">
-			<input ${ref(this.inputRef)}
+			${this.sectionPosition == 'left' ? this.renderDropdown() : ''}
+			
+			<input
 				type="text"
+				@input="${this._onInput}"
 				.placeholder="${this.placeholder}"
-				.value="${this.value}">
+				.value="${this.value ?? ''}">
+
+			${this.sectionPosition == 'right' ? this.renderDropdown() : ''}
 		</div>
 
+		${this.sectionPosition != 'bottom' ? this.renderSwitches() : ''}
+
 		${this.text != null ? html `<div class="text">${this.text}</div>` : ''}
-		
+
+		${this.sectionPosition == 'top' ? this.renderTabs() : ''}
+
+		${this.noResults ? html `
+			<div class="no-results">${msg('No results found')}</div>
+		` : ''}
+
 		<div class="list">
-			<og-list ${ref(this.listRef)}
+			<og-list
+				arrowEvents
 				maxHeight="300"
-				.customStyle="${itemStyle}"
-				itemHeight="22"
-				lineHeight="20"
-				arrowEvents>
+				?dynamicItemHeight="${this.options?.commandRenderer != null}"
+				.customStyle="${[this.options?.itemStyle, itemStyle]}"
+				.lineHeight="${this.options.itemHeight - 2}"
+				.itemHeight="${this.options.itemHeight}"
+				.itemRenderer="${this._itemRenderer}"
+				@select="${this._onSelect}">
 			</og-list>
 		</div>
+
+		${this.sectionPosition == 'bottom' ? this.renderSwitches() : ''}
+
+		${this.sectionPosition == 'bottom' ? this.renderTabs() : ''}
 	`;
         this.addEventListener('click', e => e.stopPropagation());
-        this.addEventListener('keyup', this._onKeyUp);
         this.addEventListener('keydown', this._onKeyDown);
-        this.addEventListener('blur', () => this.close());
-    }
-    async open(dispatchEvent = true) {
-        if (!this.target)
-            throw new Error('target element not set');
-        dom.showElement(this);
-        this.input.value = this.value ?? '';
-        if (this.requireUpdateCommands) {
-            this.requireUpdateCommands = false;
-            await this.updateCommands();
-        }
-        this.input.focus();
-        this.visibleItems = this.commands.filter(null, this.showSections);
-        this.updatePosition();
-        if (dispatchEvent)
-            this.dispatchEvent(new CommandEvent('open'));
-    }
-    close(dispatchEvent = true) {
-        if (this.target) {
-            dom.hideElement(this);
-            this.target.focus();
-            if (dispatchEvent)
-                this.dispatchEvent(new CommandEvent('close'));
-        }
     }
     connectedCallback() {
         super.connectedCallback();
         this.tabIndex = 0;
     }
+    focus() {
+        this.input?.focus();
+    }
+    clearFilter(updateCommands = true) {
+        this.input.value = '';
+        this.focus();
+        if (updateCommands)
+            this.updateCommands();
+    }
     async willUpdate(props) {
         if (props.has('adapter') && this.adapter) {
-            const options = await this.adapter.getOptions();
+            this.adapter.attach(this);
+            const [sections, options] = await Promise.all([this.adapter.getSections(), this.adapter.getOptions()]);
+            this.sections = sections;
             if (options)
-                this.options = options;
+                this.options = initOptions(options, this.options);
+        }
+        else if (props.has('commands') && this.commands) {
+            this.model.clear();
+            this.commands.forEach(c => this.model.register(c));
         }
         if (this.options) {
             if (this.options.commandRenderer)
                 this._commandRenderer = this.options.commandRenderer;
-            if (this.options.sectionRenderer)
-                this._sectionRenderer = this.options.sectionRenderer;
+            if (this.options.groupRenderer)
+                this._groupRenderer = this.options.groupRenderer;
         }
     }
     async updated(props) {
-        if (props.has('target')) {
-            const oldTarget = props.get('target');
-            if (oldTarget)
-                oldTarget.removeEventListener('keydown', this._onTargetKeyDown);
-            if (this.target)
-                this.target.addEventListener('keydown', this._onTargetKeyDown);
-        }
-        if (props.has('adapter'))
-            this.requireUpdateCommands = true;
-        if (props.has('commands'))
+        if (props.has('commands') || props.has('adapter') || props.has('model')) {
             await this.updateCommands();
-        this.updatePosition();
-    }
-    firstUpdated() {
-        this.list.itemRenderer = this._itemRenderer;
-        this.list.addEventListener('select', this._onSelect);
+        }
     }
     async updateCommands() {
         if (this.adapter) {
-            this.commands.clear();
-            const sections = (await Promise.all([this.adapter.getSections(this.filterValue)]))[0];
-            sections.forEach(section => this.commands.registerSection(section, false));
-            this.visibleItems = this.commands.filter(null, this.showSections, true);
+            this.model.clear();
+            const switches = this.activeSection?.switches?.filter(s => s.checked).map(s => s.key) || [];
+            const [groups, commands] = (await Promise.all([this.adapter.getGroups({
+                    sectionId: this.activeSection?.id,
+                    filter: this.filterValue,
+                    switches
+                }), this.adapter.getCommands({
+                    sectionId: this.activeSection?.id,
+                    filter: this.filterValue,
+                    switches
+                })]));
+            groups?.forEach(group => this.model.registerGroup(group));
+            commands?.forEach(command => this.model.register(command));
+            this.visibleItems = this.model.filter(null, this.showGroups, true);
         }
         else {
-            this.visibleItems = this.commands.filter(this.filterValue, this.showSections);
+            this.visibleItems = this.model.filter(this.filterValue, this.showGroups);
         }
+        this.placeholder = this.activeSection?.placeholder || '';
+        this.list.reset();
         this.list.size = this.visibleItems.length;
-        this.list.selectedIndex = this.list.size > 0 ? 0 : -1;
+        this.list.selectedIndex = this.visibleItems.findIndex(item => item instanceof Command) ?? 0;
         this.list.renderItems(true);
+        this.noResults = this.visibleItems.length == 0;
         await this.list.updateComplete;
     }
-    async toggleSection(sectionId) {
-        const section = this.commands.sections.get(sectionId);
-        if (section.open) {
-            section.open = false;
-            this.visibleItems = this.commands.filter(this.filterValue, this.showSections, true);
+    async toggleGroup(groupId) {
+        const group = this.model.groups.get(groupId);
+        this.list.reset();
+        if (group.open) {
+            group.open = false;
+            this.visibleItems = this.model.filter(this.filterValue, this.showGroups, true);
             this.list.size = this.visibleItems.length;
         }
         else {
-            section.open = true;
+            group.open = true;
             if (this.adapter) {
-                const commands = (await Promise.all([this.adapter.getCommands(sectionId, this.filterValue)]))[0];
+                const commands = (await Promise.all([this.adapter.getCommands({
+                        sectionId: this.activeSection?.id,
+                        groupId,
+                        filter: this.filterValue
+                    })]))[0];
                 if (commands.length > 0) {
-                    section.commands.clear();
-                    commands.forEach(c => section.addCommand(c));
+                    group.commands.clear();
+                    commands.forEach(c => {
+                        if (!c.group || c.group == groupId)
+                            group.addCommand(c);
+                    });
                 }
-                this.visibleItems = this.commands.filter(null, this.showSections, true);
+                this.visibleItems = this.model.filter(null, this.showGroups, true);
             }
             else {
-                this.visibleItems = this.commands.filter(this.filterValue, this.showSections, true);
+                this.visibleItems = this.model.filter(this.filterValue, this.showGroups, true);
             }
         }
         this.list.size = this.visibleItems.length;
     }
-    updatePosition() {
-        if (this.target) {
-            dom.setSize(this, {
-                w: Math.min(constants.COMMAND_WINDOW_MAX_WIDTH, 0.9 * this.target.clientWidth)
-            });
-            dom.setCenterPosition(this, this.target, { horizontal: true, vertical: false });
-            dom.setPosition(this, { t: 100 });
-        }
+    getSectionTitle(section) {
+        return (section.title ?? section.id) + (section.triggerCommand ? ` (${section.triggerCommand})` : '');
     }
 };
 CommandWindow.styles = [style];
@@ -302,11 +360,14 @@ __decorate([
 __decorate([
     property({ type: String })
 ], CommandWindow.prototype, "value", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], CommandWindow.prototype, "sectionPosition", void 0);
 __decorate([
     property({ type: String })
 ], CommandWindow.prototype, "text", void 0);
 __decorate([
-    property({ type: Object })
+    property({ type: Array })
 ], CommandWindow.prototype, "commands", void 0);
 __decorate([
     property({ type: Object })
@@ -314,15 +375,33 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], CommandWindow.prototype, "target", void 0);
-__decorate([
-    property({ type: String })
-], CommandWindow.prototype, "triggerKey", void 0);
 __decorate([
     property({ type: String })
 ], CommandWindow.prototype, "placeholder", void 0);
 __decorate([
     property({ type: Boolean })
-], CommandWindow.prototype, "showSections", void 0);
+], CommandWindow.prototype, "showGroups", void 0);
+__decorate([
+    property({ type: Object })
+], CommandWindow.prototype, "model", void 0);
+__decorate([
+    state()
+], CommandWindow.prototype, "sections", void 0);
+__decorate([
+    state()
+], CommandWindow.prototype, "activeSectionIndex", void 0);
+__decorate([
+    state()
+], CommandWindow.prototype, "noResults", void 0);
+__decorate([
+    query('og-list')
+], CommandWindow.prototype, "list", void 0);
+__decorate([
+    query('input')
+], CommandWindow.prototype, "input", void 0);
+__decorate([
+    query('og-dropdown-list')
+], CommandWindow.prototype, "dropdown", void 0);
 CommandWindow = __decorate([
     customElement('og-commands')
 ], CommandWindow);