@api-client/ui 0.0.10 → 0.0.12

package/src/elements/layout/SplitPanel.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
 /* eslint-disable import/no-cycle */
 import { html, TemplateResult } from "lit";
 import { uuidV4 } from "@api-client/core/build/browser.js";
@@ -108,7 +109,7 @@ export class SplitPanel {
   }
 
   getParent(): SplitPanel | undefined {
-    return this.manager.getParent(this.key);
+    return this.manager.getParents(this.key)[0];
   }
 
   /**
@@ -226,6 +227,14 @@ export class SplitPanel {
       return instance;
     }
 
+    const panel = this.splitByRegion(region);
+    // we don't call request update here because
+    // the app has to redo the view rendering first as
+    // the panel purpose has changed.
+    return panel.addItem(item, { index });
+  }
+
+  protected splitByRegion(region: SplitRegion): SplitPanel {
     let panel: SplitPanel;
     if (region === 'east') {
       [, panel] = this.split({
@@ -252,10 +261,7 @@ export class SplitPanel {
         noSideEffects: true,
       });
     }
-    // we don't call request update here because
-    // the app has to redo the view rendering first as
-    // the panel purpose has changed.
-    return panel.addItem(item, { index });
+    return panel;
   }
 
   /**
@@ -273,11 +279,8 @@ export class SplitPanel {
     this.items = [];
     this.selected = undefined;
 
-    const p1 = this.addPanel()
-    const p2 = this.addPanel()
-
-
-
+    const p1 = this.addPanel();
+    const p2 = this.addPanel();
 
     // const p1 = new SplitPanel(this.manager);
     // const p2 = new SplitPanel(this.manager);
@@ -368,24 +371,19 @@ export class SplitPanel {
     }
   }
 
-  /**
-   * Removes an item from the layout
-   * @param key The `key` of the item.
-   * @returns The removed item, if any.
-   */
-  removeItem(key: string, opts: SplitPanelRemoveItemOptions = {}): SplitItem | undefined {
-    const removed = this.manager.findItem(key);
-    if (!removed) {
-      return undefined;
-    }
-    const index = this.items.findIndex(i => i.key === key);
+  removeChildItem(item: SplitItem, opts: SplitPanelRemoveItemOptions = {}): SplitItem | undefined {
+    const index = this.items.findIndex(i => i.key === item.key);
     if (index < 0) {
       return undefined;
     }
     const itemInfo = this.items[index];
     this.items.splice(index, 1);
-    this.manager.definitions.delete(itemInfo.key);
-    this.decreaseIndex(removed.index || 0);
+    this.decreaseIndex(item.index || 0);
+    const parents = this.manager.getParents(item.key);
+    if (!parents.length) {
+      // remove the definition since no other panel have this item.
+      this.manager.definitions.delete(itemInfo.key);
+    }
 
     if (this.items.length === 0) {
       // remove panel (self)
@@ -393,29 +391,82 @@ export class SplitPanel {
       if (parent) {
         parent.removePanel(this.key);
         // Note, ignore `opts.noSideEffects` for tab close. It won't get dispatched elsewhere.
-        this.manager.notifyTabClose(key);
+        this.manager.notifyTabClose(item.key, this.key);
         // no point doing the stuff below as the whole panel is removed.
-        return removed;
+        return item;
       }
     }
-    if (this.selected === key) {
+
+    if (this.selected === item.key) {
       let nextKey: string | undefined;
       if (this.items[index]) {
         nextKey = this.items[index].key;
       } else if (this.items[index - 1]) {
         nextKey = this.items[index - 1].key;
       } else if (this.items.length) {
-        const [item] = this.items;
-        nextKey = item.key;
+        const [other] = this.items;
+        nextKey = other.key;
       }
       this.selected = nextKey;
     }
+
     if (!opts.noSideEffects) {
-      this.manager.notifyTabClose(key);
+      this.manager.notifyTabClose(item.key, this.key);
       this.manager.notifyChange();
       this.manager.updateView(this.key);
     }
-    return removed;
+    return item;
+  }
+
+  /**
+   * Removes an item from the layout
+   * @param key The `key` of the item.
+   * @returns The removed item, if any.
+   */
+  removeItem(key: string, opts?: SplitPanelRemoveItemOptions): SplitItem | undefined {
+    const removed = this.manager.findItem(key);
+    if (!removed) {
+      return undefined;
+    }
+    return this.removeChildItem(removed, opts);
+    // const index = this.items.findIndex(i => i.key === key);
+    // if (index < 0) {
+    //   return undefined;
+    // }
+    // const itemInfo = this.items[index];
+    // this.items.splice(index, 1);
+    // this.manager.definitions.delete(itemInfo.key);
+    // this.decreaseIndex(removed.index || 0);
+
+    // if (this.items.length === 0) {
+    //   // remove panel (self)
+    //   const parent = this.getParent();
+    //   if (parent) {
+    //     parent.removePanel(this.key);
+    //     // Note, ignore `opts.noSideEffects` for tab close. It won't get dispatched elsewhere.
+    //     this.manager.notifyTabClose(key);
+    //     // no point doing the stuff below as the whole panel is removed.
+    //     return removed;
+    //   }
+    // }
+    // if (this.selected === key) {
+    //   let nextKey: string | undefined;
+    //   if (this.items[index]) {
+    //     nextKey = this.items[index].key;
+    //   } else if (this.items[index - 1]) {
+    //     nextKey = this.items[index - 1].key;
+    //   } else if (this.items.length) {
+    //     const [item] = this.items;
+    //     nextKey = item.key;
+    //   }
+    //   this.selected = nextKey;
+    // }
+    // if (!opts.noSideEffects) {
+    //   this.manager.notifyTabClose(key);
+    //   this.manager.notifyChange();
+    //   this.manager.updateView(this.key);
+    // }
+    // return removed;
   }
 
   /**
@@ -423,30 +474,30 @@ export class SplitPanel {
    * @param dir The direction to which close other items. Default to both directions leaving only the `key` item
    */
   removeRelative(key: string, dir: SplitCloseDirection = SplitCloseDirection.both): void {
-    const index = this.items.findIndex(i => i.key === key);
+    const items = this.sortedItems();
+    const index = items.findIndex(i => i.key === key);
     if (index < 0) {
       return;
     }
-    // note, even though we keep indexes in the item, the logic actually
-    // keeps track of them and orders the `items` accordingly.
-    const item = this.items[index];
-    let removed: IPanelObject[];
+    
+    const item = items[index];
+    let removed: string[] = [];
     if (dir === SplitCloseDirection.both) {
-      removed = this.items.filter(i => i !== item);
-      this.items = [item];
-      this.selected = item.key;
+      removed = items.filter(i => i !== item).map(i => i.key);
     } else if (dir === SplitCloseDirection.left) {
-      removed = this.items.slice(0, index);
-      this.items = this.items.splice(index);
-      this.selected = item.key;
+      removed = items.slice(0, index).map(i => i.key);
     } else {
-      removed = this.items.slice(index + 1);
-      this.items = this.items.splice(0, index + 1);
-      this.selected = item.key;
+      removed = this.items.slice(index + 1).map(i => i.key);
     }
+    this.items = this.items.filter(i => !removed.includes(i.key));
+    this.selected = item.key;
+
     removed.forEach(i => {
-      this.manager.definitions.delete(i.key);
-      this.manager.notifyTabClose(i.key);
+      const parents = this.manager.getParents(i);
+      if (!parents.length) {
+        this.manager.definitions.delete(i);
+      }
+      this.manager.notifyTabClose(i, this.key);
     });
     this.manager.notifyChange();
     this.manager.updateView(this.key);
@@ -490,7 +541,7 @@ export class SplitPanel {
    * @param key The item key
    * @param toIndex The new index. When not set it moves the item to the end.
    */
-  moveItem(key: string, toIndex?: number): void {
+  moveItem(key: string, opts: SplitLayoutAddOptions = {}): void {
     const info = this.items.find(i => i.key === key);
     if (!info) {
       return;
@@ -499,22 +550,54 @@ export class SplitPanel {
     if (!item) {
       return;
     }
-    const hasIndex = typeof toIndex === 'number';
-    if (hasIndex && item.index === toIndex) {
+    const { index, region } = opts;
+    if (region) {
+      this.moveToRegion(item, region);
+    } else if (typeof index === 'number') {
+      this.moveToIndex(item, index);
+    } else {
+      this.moveToEnd(item);
+    }
+  }
+
+  moveToRegion(item: SplitItem, region: SplitRegion): void {
+    if (this.items.length < 2) {
+      // nothing to split.
       return;
     }
-    let hasTargetAtTarget = false;
-    if (hasIndex) {
-      hasTargetAtTarget = !!this.items[toIndex];
+    if (region === SplitRegion.center) {
+      // the item is already there.
+      return;
     }
-    if (item.index !== undefined) {
-      this.decreaseIndex(item.index);
+    const itemsIndex = this.items.findIndex(i => i.key === item.key);
+    if (itemsIndex < 0) {
+      return;
+    }
+    this.items.splice(itemsIndex, 1);
+    const index = typeof item.index === 'number' ? item.index : this.nextIndex();
+    const panel = this.splitByRegion(region);
+    panel.addItem(item, { index });
+  }
+
+  moveToIndex(item: SplitItem, index: number): void {
+    if (item.index === index) {
+      return;
     }
-    const finalIndex = hasIndex ? toIndex as number : this.nextIndex();
+    const hasTargetAtTarget = !!this.items[index as number];
+    this.decreaseIndex(item.index);
     if (hasTargetAtTarget) {
-      this.increaseIndex(finalIndex);
+      this.increaseIndex(index);
+    }
+    item.index = index;
+    this.manager.notifyChange();
+    this.manager.updateView(this.key);
+  }
+
+  moveToEnd(item: SplitItem): void {
+    if (item.index !== undefined) {
+      this.decreaseIndex(item.index);
     }
-    item.index = finalIndex;
+    item.index = this.nextIndex();
     this.manager.notifyChange();
     this.manager.updateView(this.key);
   }

package/src/elements/layout/SplitView.ts

@@ -70,7 +70,7 @@ export default class SplitView extends LitElement {
     e.stopPropagation();
     dataTransfer.dropEffect = 'copy';
   }
-
+  
   protected handleDragOver(e: DragEvent): void {
     const { dataTransfer } = e;
     if (!dataTransfer || !this.panelCanDrop(e)) {
@@ -90,7 +90,8 @@ export default class SplitView extends LitElement {
 
   protected handleDrop(e: DragEvent): void {
     const { dataTransfer } = e;
-    if (!dataTransfer || !this.panelCanDrop(e)) {
+    const { panel } = this;
+    if (!dataTransfer || !panel || !this.panelCanDrop(e)) {
       return;
     }
     e.preventDefault();
@@ -100,22 +101,23 @@ export default class SplitView extends LitElement {
     if (!kind || !key) {
       return;
     }
+    const layoutKey = dataTransfer.getData('layout/key');
     this.inDrag = false;
-    const { panel } = this;
-    let dispatch = true;
-    if (panel) {
+    // TODO: When the drag originated in another panel then we 
+    // move the panel between them. Otherwise we add the item to the panel.
+    if (layoutKey) {
+      // move operation not add.
+      panel.manager.moveItem(layoutKey, panel.key, key, { region: this.dragRegion });
+    } else {
       panel.addItem({ key, kind, label: 'New tab' }, { region: this.dragRegion });
       panel.manager.requestNameUpdate(key);
-      dispatch = true;
-    }
-    if (dispatch) {
-      this.dispatchEvent(new CustomEvent('datadrop', {
-        detail: { kind, key, region: this.dragRegion },
-        composed: true,
-        bubbles: true,
-        cancelable: true,
-      }));
     }
+    this.dispatchEvent(new CustomEvent('datadrop', {
+      detail: { kind, key, region: this.dragRegion },
+      composed: true,
+      bubbles: true,
+      cancelable: true,
+    }));
     this.requestUpdate();
   }
 
@@ -282,7 +284,7 @@ export default class SplitView extends LitElement {
   protected moveTab(fromLayout: string, toLayout: string, key: string, toIndex?: number): void {
     const { panel } = this;
     if (panel) {
-      panel.manager.moveItem(fromLayout, toLayout, key, toIndex);
+      panel.manager.moveItem(fromLayout, toLayout, key, { index: toIndex });
     }
   }
 
@@ -452,6 +454,7 @@ export default class SplitView extends LitElement {
       data-index="${index}"
       data-parent="${ifDefined(parent)}"
       data-dirty="${isDirty}"
+      data-panel="${ifDefined(panel?.key)}"
       role="tab"
       class="${classMap(classes)}" 
       draggable="true"

package/src/elements/layout/type.ts

@@ -1,7 +1,6 @@
-/* eslint-disable import/no-cycle */
-import { TemplateResult } from "lit";
-import { SplitItem } from "./SplitItem.js";
-import { ISplitLayout } from "./SplitLayout.js";
+import type { TemplateResult } from "lit";
+import type { SplitItem } from "./SplitItem.js";
+import type { ISplitLayout } from "./SplitLayout.js";
 
 export enum SplitDirection {
   horizontal = 'horizontal',

package/src/elements/store/FilePicker.element.ts

@@ -0,0 +1,297 @@
+import { 
+  FolderKind, IFile, 
+  ListFileKind 
+} from "@api-client/core/build/browser.js";
+import { CSSResult, html, nothing, TemplateResult } from "lit";
+import { eventOptions, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import ApiElement from "../ApiElement.js";
+import styles from './FilePicker.styles.js';
+import { fileIcon } from "./FilesLib.js";
+import type UiList from "../../ui/list/UiList.js";
+import type { UiListSelection } from "../../ui/list/UiList.js";
+import { FileSystem } from "../../store/FileSystem.js";
+import '../../define/ui/ui-divider.js';
+import '../../define/ui/ui-button.js';
+import '../../define/ui/ui-icon-button.js';
+import '../../define/ui/ui-icon.js';
+import '../../define/ui/ui-list.js';
+import '../../define/ui/ui-list-item.js';
+import '../../define/ui/ui-progress.js';
+
+export interface FilePickerClosingReason {
+  /**
+   * Whether the picker was canceled.
+   */
+  canceled: boolean;
+  /**
+   * The file selected by the user. This is always and only selected when the `canceled` is false.
+   */
+  file?: IFile;
+}
+
+/**
+ * A portable element that allow to pick a file from the Store.
+ * 
+ * @fires close - When a file is selected or the user cancelled the dialog. The detail object is the picked file object. Note, this event bubbles.
+ * @fires querycomplete - When the page of results was loaded.
+ */
+export default class FilePicker extends ApiElement {
+  static override get styles(): CSSResult[] {
+    return styles;
+  }
+
+  /**
+   * The key of the parent folder to query for files.
+   * @attribute
+   */
+  @property({ type: String, hasChanged: () => false }) 
+  get folder(): string | undefined {
+    return this.fs.parent;
+  }
+
+  set folder(value: string | undefined) {
+    this.fs.selectFolder(value);
+  }
+
+  /**
+   * The page limit. Defaults to the store defaults.
+   * @attribute
+   */
+  @property({ type: Number, hasChanged: () => false }) 
+  set limit(value: number | undefined) {
+    this.fs.limit = value;
+  }
+
+  get limit(): number | undefined {
+    return this.fs.limit;
+  }
+
+  /**
+   * The timeout for the page query debouncer.
+   * @attribute
+   */
+  @property({ type: Number, hasChanged: () => false }) 
+  get debounceTimeout(): number {
+    return this.fs.debounceTimeout;
+  }
+
+  set debounceTimeout(value: number) {
+    this.fs.debounceTimeout = value || 0;
+  }
+
+  /**
+   * The list of file kinds to list.
+   * Folders are always included.
+   */
+  @property({ type: Array, hasChanged: () => false }) 
+  get kinds(): ListFileKind[] | undefined {
+    return this.fs.kinds;
+  }
+
+  set kinds(value: ListFileKind[] | undefined) {
+    this.fs.kinds = value;
+    this.fs.resetList();
+    this.fs.debounceQuery();
+  }
+
+  @query('ui-list') protected list?: UiList;
+
+  /**
+   * The currently selected in the picker file.
+   */
+  @state() protected selectedFile?: IFile;
+
+  @state() errorMessage?: string;
+
+  /**
+   * When set it does not query for files when attached to the DOM. 
+   * It will still query for files when attributes change. This is primarily used in tests.
+   * @attribute
+   */
+  @property({ type: Boolean }) manualQuery?: boolean;
+
+  get selectedKey(): string | undefined {
+    return this.selectedFile?.key;
+  }
+
+  fs = new FileSystem();
+
+  constructor() {
+    super();
+    this.fs.eventsTarget = this;
+    this.fs.addEventListener('change', () => this.requestUpdate());
+    this.fs.addEventListener('error', (e: Event) => {
+      const event = e as CustomEvent<string>;
+      this.errorMessage = event.detail;
+    });
+    this.fs.addEventListener('querycomplete', () => {
+      this.dispatchEvent(new Event('querycomplete'));
+    });
+    this.fs.addEventListener('delete', (e: Event) => {
+      const event = e as CustomEvent<string>;
+      if (this.selectedFile && this.selectedFile.key === event.detail) {
+        this.selectedFile = undefined;
+      }
+    });
+  }
+  
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.fs.observe();
+    if (!this.manualQuery) {
+      this.fs.debounceQuery();
+    }
+    if (!this.hasAttribute('tabindex')) {
+      this.setAttribute('tabindex', '0');
+    }
+  }
+  
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this.fs.unobserve();
+  }
+
+  override focus(options?: FocusOptions | undefined): void {
+    const { list } = this;
+    if (list) {
+      list.focus(options);
+    }
+  }
+
+  protected handleFileSelect(e: CustomEvent<UiListSelection>): void {
+    // this prevents the dropdown list to close the UI.
+    e.preventDefault();
+    const file = this.fs.files[e.detail.index];
+    if (!file) {
+      return;
+    }
+    if (file.kind === FolderKind) {
+      this.fs.selectFolder(file.key);
+      this.selectedFile = undefined;
+      return;
+    }
+    this.selectedFile = file;
+  }
+
+  protected handleParentUp(): void {
+    this.fs.parentUp();
+    this.selectedFile = undefined;
+  }
+
+  protected notifyClose(canceled: boolean): void {
+    if (!canceled && !this.selectedFile) {
+      return;
+    }
+    const detail: FilePickerClosingReason = {
+      canceled,
+    };
+    if (!canceled) {
+      detail.file = this.selectedFile;
+    }
+    // this event bubbles so any dropdown on the way can close itself.
+    const e = new CustomEvent<FilePickerClosingReason>('close', {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail,
+    });
+    this.dispatchEvent(e);
+  }
+
+  protected handleSelect(): void {
+    this.notifyClose(false);
+  }
+
+  protected handleCancel(): void {
+    this.notifyClose(true);
+  }
+
+  @eventOptions({ passive: true })
+  protected handleListScroll(e: Event): void {
+    const list = e.target as UiList;
+    if (this.fs.isListEnd(list)) {
+      this.fs.debounceQuery();
+    }
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+    <div class="content">
+      ${this.renderHeader()}
+      <ui-divider></ui-divider>
+      ${this.renderFiles()}
+      ${this.errorMessage ? html`<p class="error">${this.errorMessage}</p>` : nothing}
+      <ui-divider></ui-divider>
+      ${this.renderActions()}
+    </div>
+    `;
+  }
+
+  protected renderHeader(): TemplateResult {
+    const { breadcrumbs = [], reading } = this.fs;
+    let content: TemplateResult;
+    let withIcon = false;
+    if (!breadcrumbs.length) {
+      content = html`<span class="title-large label">My files</span>`;
+    } else {
+      withIcon = true;
+      const [parent] = breadcrumbs;
+      content = html`
+        <ui-icon-button aria-label="Open parent folder" @click="${this.handleParentUp}" class="back-button">
+          <ui-icon role="presentation" icon="arrowBack"></ui-icon>
+        </ui-icon-button>
+        <span class="title-large label">${parent.name}</span>
+      `;
+    }
+    const classes = {
+      header: true,
+      withIcon,
+    }
+    return html`
+    <div class="${classMap(classes)}">
+      ${content}
+      ${reading ? html`<ui-progress indeterminate class="progress"></ui-progress>` : nothing}
+    </div>
+    `;
+  }
+
+  protected renderFiles(): TemplateResult {
+    const { files } = this.fs;
+    if (!files || !files.length) {
+      return this.renderEmptyList();
+    }
+    return html`
+    <ui-list class="list" role="menu" @select="${this.handleFileSelect}" selectActive @scroll="${this.handleListScroll}">
+      ${files.map(item => this.renderFileItem(item))}
+    </ui-list>
+    `;
+  }
+
+  protected renderEmptyList(): TemplateResult {
+    return html`
+    <p class="no-files body-large">No files in this view.</p>
+    `;
+  }
+
+  protected renderFileItem(item: IFile): TemplateResult {
+    const icon = fileIcon(item);
+    return html`
+    <ui-list-item role="menuitem" data-key="${item.key}" data-kind="${item.kind}">
+      ${icon ? html`<ui-icon icon="${icon}" class="file-icon"></ui-icon>` : nothing}
+      ${item.info.name || 'Unnamed file'}
+    </ui-list-item>
+    `;
+  }
+
+  protected renderActions(): TemplateResult {
+    const { selectedFile } = this;
+    const disableSelect = !selectedFile;
+    return html`
+    <div class="actions">
+      <ui-button type="text" @click="${this.handleCancel}" value="cancel">Cancel</ui-button>
+      <ui-button type="tonal" ?disabled="${disableSelect}" @click="${this.handleSelect}" value="select">Select</ui-button>
+    </div>
+    `;
+  }
+}