@api-client/ui 0.0.10 → 0.0.12

package/src/pages/demo/DemoPage.ts

@@ -8,6 +8,7 @@ import CheckboxElement from '../../ui/input/CheckboxElement.js';
 import typography from "../../styles/m3/typography.module.js";
 import surface from "../../styles/m3/surface.module.js";
 import '../../define/ui/ui-icon.js';
+import '../../define/ui/ui-button.js';
 
 /**
  * A base class for demo pages in the API Client ecosystem.
@@ -33,6 +34,11 @@ export abstract class DemoPage extends RouteMixin(RenderableMixin(EventTarget))
    */
   @reactive() darkThemeActive = false;
 
+  /**
+   * For some demo pages, whether the user is authenticated in the store.
+   */
+  authenticated = false;
+
   constructor() {
     super();
     this.handleMediaQuery = this.handleMediaQuery.bind(this);
@@ -151,4 +157,15 @@ export abstract class DemoPage extends RouteMixin(RenderableMixin(EventTarget))
    * ```
    */
   abstract contentTemplate(): TemplateResult;
+
+  handleAuthenticate(): void {
+    // ...
+  }
+
+  authenticateTemplate(): TemplateResult {
+    return html`
+    <p>Store authorization required.</p>
+    <ui-button @click="${this.handleAuthenticate}">Authenticate</ui-button>
+    `;
+  }
 }

package/src/pages/http-project/HttpClientCommands.ts

@@ -85,12 +85,16 @@ const commands: IContextMenuCommand<HttpProjectContextualStore>[] = [
     label: 'Close',
     icon: close,
     execute: (init): void => {
-      const { key } = init.target.dataset;
-      if (!key) {
+      const { key, panel } = init.target.dataset;
+      if (!key || !panel) {
         return;
       }
       const layout = init.store.get('layout');
-      layout.removeItem(key);
+      const parent = layout.findPanel(panel);
+      if (!parent) {
+        return;
+      }
+      parent.removeItem(key);
     }
   },
   {
@@ -105,12 +109,16 @@ const commands: IContextMenuCommand<HttpProjectContextualStore>[] = [
       return true;
     },
     execute: (init): void => {
-      const { key } = init.target.dataset;
-      if (!key) {
+      const { key, panel } = init.target.dataset;
+      if (!key || !panel) {
         return;
       }
       const layout = init.store.get('layout');
-      layout.removeRelative(key, SplitCloseDirection.both);
+      const parent = layout.findPanel(panel);
+      if (!parent) {
+        return;
+      }
+      parent.removeRelative(key, SplitCloseDirection.both);
     },
   },
   {
@@ -124,12 +132,16 @@ const commands: IContextMenuCommand<HttpProjectContextualStore>[] = [
       return true;
     },
     execute: (init): void => {
-      const { key } = init.target.dataset;
-      if (!key) {
+      const { key, panel } = init.target.dataset;
+      if (!key || !panel) {
         return;
       }
       const layout = init.store.get('layout');
-      layout.removeRelative(key, SplitCloseDirection.right);
+      const parent = layout.findPanel(panel);
+      if (!parent) {
+        return;
+      }
+      parent.removeRelative(key, SplitCloseDirection.right);
     },
   },
   {
@@ -143,12 +155,16 @@ const commands: IContextMenuCommand<HttpProjectContextualStore>[] = [
       return true;
     },
     execute: (init): void => {
-      const { key } = init.target.dataset;
-      if (!key) {
+      const { key, panel } = init.target.dataset;
+      if (!key || !panel) {
         return;
       }
       const layout = init.store.get('layout');
-      layout.removeRelative(key, SplitCloseDirection.left);
+      const parent = layout.findPanel(panel);
+      if (!parent) {
+        return;
+      }
+      parent.removeRelative(key, SplitCloseDirection.left);
     },
   },
 

package/src/store/FileSystem.ts

@@ -0,0 +1,325 @@
+import { 
+  BroadcastEvent,
+  BroadcastFileData,
+  ContextListResult,
+  ContextSpaceListOptions,
+  DeletedBroadcastEvent,
+  FileAccessBroadcastEvent,
+  FileBreadcrumb, 
+  FileMetaCreatedBroadcastEvent, 
+  FilePatchBroadcastEvent, 
+  IFile,
+  ListFileKind,
+} from "@api-client/core/build/browser.js";
+import { Patch } from "@api-client/json";
+import { filesSortFunction } from "../elements/store/FilesLib.js";
+import { Events } from "../events/Events.js";
+import { StoreBroadcast } from "../http-client/store/StoreBroadcast.js";
+
+type FilesSource = 'own' | 'shared';
+
+/**
+ * Contains a logic to read files from the store.
+ * 
+ * It uses app events to query for the data.
+ */
+export class FileSystem extends EventTarget {
+  source: FilesSource = 'own';
+
+  /**
+   * The list of files to render.
+   * Do not overwrite this property or when you must then update the DataTable's `items` as well.
+   */
+  files: IFile[] = [];
+
+  /**
+   * The pagination cursor for files.
+   */
+  cursor?: string;
+
+  /**
+   * This is set when the last files query did not yeld results.
+   */
+  queryEnded?: boolean;
+
+  /**
+   * The currently rendered breadcrumbs.
+   */
+  breadcrumbs?: FileBreadcrumb[];
+
+  /**
+   * Whether the UI is reading files 
+   */
+  reading?: boolean;
+
+  /**
+   * The list of file kinds to list.
+   * Folders are always included.
+   */
+  kinds?: ListFileKind[];
+
+  /**
+   * The timeout for the query debouncer.
+   * When any property change this is the time the element will wait
+   * until the actual query is made.
+   */
+  debounceTimeout = 100;
+
+  debouncerValue?: number;
+
+  /**
+   * The variable parent folder key.
+   * This is set when interacting with the UI or when the `folder` attribute change.
+   */
+  parent?: string;
+
+  /**
+   * The page limit. Defaults to the store defaults.
+   * @attribute
+   */
+  limit?: number;
+
+  filesChannel = new BroadcastChannel(StoreBroadcast.files);
+
+  eventsTarget: EventTarget = document.body;
+
+  constructor() {
+    super();
+    this.fileMetaMessageHandler = this.fileMetaMessageHandler.bind(this);
+  }
+
+  observe(): void {
+    this.filesChannel.addEventListener('message', this.fileMetaMessageHandler);
+  }
+
+  unobserve(): void {
+    this.filesChannel.removeEventListener('message', this.fileMetaMessageHandler);
+  }
+
+  fileMetaMessageHandler(e: MessageEvent): void {
+    const event = e.data as BroadcastEvent & BroadcastFileData;
+    if (event.parent !== this.parent) {
+      return;
+    }
+    if (event.alt !== 'meta') {
+      return;
+    }
+    switch (event.operation) {
+      case 'created': this.handleFileCreated((event as FileMetaCreatedBroadcastEvent).data); break;
+      case 'deleted': this.handleFileDeleted(event as DeletedBroadcastEvent); break;
+      case 'patch': this.handleFilePatch(event as FilePatchBroadcastEvent); break;
+      case 'access-granted': this.handleFileAccessGranted(event as FileAccessBroadcastEvent); break;
+      case 'access-removed': this.handleFileAccessRemoved(event as FileAccessBroadcastEvent); break;
+      default:
+    }
+  }
+
+  handleFileCreated(file: IFile): void {
+    this.files.push(file);
+    // We don't sort here so files that appear at the end which makes sense because the list is scrolling.
+    // this.files.sort(filesSortFunction);
+    this.notifyUpdate();
+  }
+
+  handleFileDeleted(event: DeletedBroadcastEvent): void {
+    this.removeFileFromList(event.key);
+  }
+
+  async handleFileAccessGranted(event: FileAccessBroadcastEvent): Promise<void> {
+    if (this.source !== 'shared') {
+      return;
+    }
+    const { key } = event;
+    try {
+      const file = await Events.Store.File.read(key, false, this.eventsTarget);
+      const index = this.files.findIndex(i => i.key === key);
+      if (index >= 0) {
+        this.files.splice(index, 1);
+      }
+      this.handleFileCreated(file);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn(e);
+    }
+  }
+
+  handleFileAccessRemoved(event: FileAccessBroadcastEvent): void {
+    if (this.source !== 'shared') {
+      return;
+    }
+    const { key } = event;
+    this.removeFileFromList(key);
+  }
+
+  removeFileFromList(key: string): void {
+    const index = this.files.findIndex(i => i.key === key);
+    if (index === -1) {
+      return;
+    }
+    this.files.splice(index, 1);
+    this.notifyUpdate();
+    this.dispatchEvent(new CustomEvent('delete', { detail: key }));
+  }
+
+  handleFilePatch(event: FilePatchBroadcastEvent): void {
+    const { data, key } = event;
+    const index = this.files.findIndex(i => i.key === key);
+    if (index === -1) {
+      return;
+    }
+    const file = this.files[index];
+    const result = Patch.apply(file, data.patch);
+    this.files[index] = result.doc as IFile;
+    this.notifyUpdate();
+  }
+
+  debounceQuery(): void {
+    if (this.debouncerValue) {
+      clearTimeout(this.debouncerValue);
+    }
+    this.debouncerValue = window.setTimeout(() => { 
+      this.queryPage();
+      this.queryBreadcrumbs();
+    }, this.debounceTimeout);
+  }
+
+  resetList(): void {
+    this.files = [];
+    this.cursor = undefined;
+    this.breadcrumbs = undefined;
+    this.queryEnded = false;
+  }
+
+  async queryPage(): Promise<void> {
+    if (this.reading || this.queryEnded) {
+      return;
+    }
+    this.reading = true;
+    this.notifyUpdate();
+    try {
+      const result = await this.listFiles();
+      if (!result) {
+        throw new Error(`Files event not handled.`);
+      }
+      const { items, cursor } = result;
+      if (!items.length) {
+        this.queryEnded = true;
+      } else {
+        if (!this.files.length) {
+          // we only sort the first page as later the user scrolls and sorting would change the order.
+          items.sort(filesSortFunction);
+        }
+        this.files = this.files.concat(items);
+      }
+      if (cursor) {
+        this.cursor = cursor;
+      }
+    } catch(e) {
+      const err = e as Error;
+      this.notifyError(`Unable to load files list. ${err.message}`);
+      // eslint-disable-next-line no-console
+      console.error(e);
+    } finally {
+      this.reading = false;
+    }
+    this.dispatchEvent(new Event('querycomplete'));
+    this.notifyUpdate();
+  }
+
+  async queryBreadcrumbs(): Promise<void> {
+    if (this.parent) {
+      const br = await this.listBreadcrumbs(this.parent);
+      this.breadcrumbs = br.items;
+    } else {
+      this.breadcrumbs = undefined;
+    }
+  }
+
+  getPageQueryOptions(): ContextSpaceListOptions {
+    const { cursor: filesCursor, parent, limit } = this;
+    const opts: ContextSpaceListOptions = {
+      space: '', // this is filled by the bindings.
+      descending: true,
+    };
+    if (filesCursor) {
+      opts.cursor = filesCursor;
+    }
+    if (parent) {
+      opts.parent = parent;
+    }
+    if (typeof limit === 'number' && limit) {
+      opts.limit = limit;
+    }
+    return opts;
+  }
+
+  async listFiles(): Promise<ContextListResult<IFile>> {
+    const { kinds } = this;
+    const opts = this.getPageQueryOptions();
+    if (this.source === 'shared') {
+      return Events.Store.File.listShared(kinds, opts, this.eventsTarget);
+    }
+    return Events.Store.File.list(kinds, opts, this.eventsTarget);
+  }
+
+  async listBreadcrumbs(folder: string): Promise<ContextListResult<FileBreadcrumb>> {
+    return Events.Store.File.breadcrumbs(folder, this.eventsTarget);
+  }
+
+  notifyError(error: string): void {
+    this.dispatchEvent(new CustomEvent<string>('error', {
+      detail: error,
+    }));
+  }
+
+  notifyUpdate(): void {
+    this.dispatchEvent(new Event('change'));
+  }
+
+  /**
+   * Sets a parent and makes the query.
+   * @param key The key of the parent to query. Empty for root folder.
+   */
+  selectFolder(key?: string): void {
+    this.parent = key;
+    this.resetList();
+    this.debounceQuery();
+    // this.queryPage();
+    this.queryBreadcrumbs();
+  }
+
+  /**
+   * Moves to a parent folder, if any.
+   */
+  async parentUp(): Promise<void> {
+    const { breadcrumbs = [] } = this;
+    const [, parent] = breadcrumbs;
+    if (!parent) {
+      if (!this.parent) {
+        return;
+      }
+      this.parent = undefined;
+    } else {
+      if (this.parent === parent.key) {
+        return;
+      }
+      this.parent = parent.key;
+    }
+    this.resetList();
+    await Promise.all([
+      this.queryPage(),
+      this.queryBreadcrumbs(),
+    ]);
+    this.notifyUpdate();
+  }
+
+  /**
+   * @param target The HTML element that is a scrollable list if files.
+   * @returns True when the scroll position indicates that the user scrolled near the end of the list.
+   */
+  isListEnd(target: HTMLElement): boolean {
+    const { scrollTop, offsetHeight, scrollHeight } = target;
+    // 20 is the offset which qualifies as the end. An arbitrary number.
+    return scrollTop + offsetHeight >= scrollHeight - 20; 
+  }
+}

package/src/styles/global-styles.ts

@@ -65,6 +65,13 @@ body {
   justify-content: center;
   position: absolute;
   inset: 0;
+  background-color: var(--md-sys-color-surface);
+}
+
+.message,
+.sub-message,
+.auth-required-screen {
+  color: var(--md-sys-color-on-surface);
 }
 
 .full-error {

package/src/ui/icons/Icons.ts

@@ -8,7 +8,7 @@ import { svg, SVGTemplateResult } from 'lit';
 export const iconWrapper = (tpl: SVGTemplateResult, width = 24, height = 24, top = 0, left = 0): SVGTemplateResult => svg`<svg viewBox="${top} ${left} ${width} ${height}" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;">${tpl}</svg>`;
 
 export type IconType = 
-  'add' | 'api' | 'apps' | 'arrowBack' | 'arrowDropDown' | 'cancel' | 'cancelFilled' | 'check' | 'checkBox' | 'checkBoxBlank' | 'checkIndeterminate' | 'chevronLeft' | 'chevronRight' | 'close' | 'cloud' | 'cloudFilled' | 'collectionsBookmark' | 'deleteFile' | 'deleteOutline' | 'edit' | 'environment' | 'expandMore' | 
+  'add' | 'api' | 'apps' | 'arrowBack' | 'arrowDropDown' | 'cancel' | 'cancelFilled' | 'certificate' | 'check' | 'checkBox' | 'checkBoxBlank' | 'checkIndeterminate' | 'chevronLeft' | 'chevronRight' | 'close' | 'cloud' | 'cloudFilled' | 'collectionsBookmark' | 'deleteFile' | 'deleteOutline' | 'edit' | 'environment' | 'expandMore' | 
   'fileDownload' | 'folder' | 'folderFilled' | 'folderShared' | 'help' | 'history' | 'info' | 'key' | 'menu' | 'leaderBoard' |
   'moreVert' | 'openInNew' | 'personAdd' | 'playArrow' | 'project' | 'remove' | 'rename' | 'request' | 'restoreFromTrash' | 'save' |
   'schema' | 'schemaEntity' | 'schemaModel' | 'schemaNamespace' | 'search' | 'send' | 'settings' | 'space' | 'taskAlt' | 'timeline' | 'tune' | 'viewGrid' | 'viewList' | 'visibility' | 'visibilityOff' | 'warning';
@@ -20,6 +20,7 @@ export const arrowBack = iconWrapper(svg`<path d="M20 11H7.83l5.59-5.59L12 4l-8
 export const arrowDropDown = iconWrapper(svg`<path d="M7 10l5 5 5-5z"/>`);
 export const cancel = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/>`);
 export const cancelFilled = iconWrapper(svg`<path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>`);
+export const certificate = iconWrapper(svg`<path d="M4 3c-1.11 0-2 .89-2 2v10a2 2 0 0 0 2 2h8v5l3-3l3 3v-5h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4m8 2l3 2l3-2v3.5l3 1.5l-3 1.5V15l-3-2l-3 2v-3.5L9 10l3-1.5V5M4 5h5v2H4V5m0 4h3v2H4V9m0 4h5v2H4v-2Z"/>`);
 export const check = iconWrapper(svg`<path d="m9.55 18-5.7-5.7 1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/>`);
 export const checkBox = iconWrapper(svg`<path d="m10.6 16.2 7.05-7.05-1.4-1.4-5.65 5.65-2.85-2.85-1.4 1.4ZM5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14ZM5 5v14V5Z"/>`);
 export const checkBoxBlank = iconWrapper(svg`<path d="M5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14Z"/>`);

package/src/ui/list/UiDropdownList.ts

@@ -27,7 +27,7 @@ export interface UiDropdownListSelection {
  * 
  * @slot - The default slot for the dropdown trigger (button) 
  * @slot dropdown - The slot for the list.
- * @fires select - Custom event with the selected item on the `detail.item` when the user selected an item.
+ * @fires select - Custom event with the selected item on the `detail.item` when the user selected an item. When the event is cancelled then there's no side effects (closing the dropdown)
  * @fires dropdownopen - An event informing other dropdowns that this one was opened and other should close.
  * @fires open - An event dispatched when the open state change through a user interaction
  */
@@ -91,6 +91,13 @@ export default class UiDropdownList extends LitElement {
    */
   @property({ type: Boolean }) matchTriggerWidth?: boolean;
 
+  /**
+   * When set it closes the drop-down when `tab` button is pressed.
+   * This is not a default behavior since the drop-down content can have its own logic
+   * related to tab index.
+   */
+  @property({ type: Boolean }) closeOnTab?: boolean;
+
   /**
    * The first element located in the default slot.
    */
@@ -145,9 +152,7 @@ export default class UiDropdownList extends LitElement {
     if (e.composedPath()[0] === this) {
       return;
     }
-    this.open = false;
-    this.updateExpanded();
-    this.notifyOpen();
+    this.close();
   }
 
   protected updateExpanded(): void {
@@ -212,10 +217,15 @@ export default class UiDropdownList extends LitElement {
   }
 
   protected contentKeyDownHandler(e: KeyboardEvent): void {
-    if (e.code === 'Escape' || e.code === 'Tab') {
-      this.open = false;
-      this.updateExpanded();
-      this.notifyOpen();
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.code === 'Escape') {
+      this.close();
+    } else if (e.code === 'Tab') {
+      if (this.closeOnTab) {
+        this.close();
+      }
     } else if (['Enter', 'Space'].includes(e.code)) {
       this.activate(e);
     }
@@ -225,6 +235,17 @@ export default class UiDropdownList extends LitElement {
     this.activate(e);
   }
 
+  close(): void {
+    this.open = false;
+    this.updateExpanded();
+    this.notifyOpen();
+  }
+
+  protected contentCloseHandler(e: Event): void {
+    e.stopPropagation();
+    this.close();
+  }
+
   protected override willUpdate(cp: PropertyValues<this>): void {
     super.willUpdate(cp);
     if ((cp.has('noOverlap') || cp.has('verticalAlign') || cp.has('horizontalAlign') || cp.has('open')) && this.open) {
@@ -272,9 +293,7 @@ export default class UiDropdownList extends LitElement {
     if (inside) {
       return;
     }
-    this.open = false;
-    this.updateExpanded();
-    this.notifyOpen();
+    this.close();
   }
 
   protected toggleOpened(): void {
@@ -311,6 +330,9 @@ export default class UiDropdownList extends LitElement {
   }
 
   protected activate(e: Event): void {
+    if (e.defaultPrevented) {
+      return;
+    }
     const path = e.composedPath();
     let item: HTMLElement | undefined;
     while (!item) {
@@ -328,14 +350,18 @@ export default class UiDropdownList extends LitElement {
     if (!item) {
       return;
     }
-    this.dispatchEvent(new CustomEvent<UiDropdownListSelection>('select', {
+    const event = new CustomEvent<UiDropdownListSelection>('select', {
+      cancelable: true,
+      composed: true,
       detail: {
         item,
-      }
-    }));
-    this.open = false;
-    this.updateExpanded();
-    this.notifyOpen();
+      },
+    })
+    this.dispatchEvent(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    this.close();
   }
 
   protected notifyOpen(): void {
@@ -385,6 +411,7 @@ export default class UiDropdownList extends LitElement {
         @slotchange="${this.dropdownChanged}" 
         @keydown="${this.contentKeyDownHandler}" 
         @click="${this.contentClickHandler}"
+        @close="${this.contentCloseHandler}"
       ></slot>
     </div>
     `;

package/src/ui/list/UiList.ts

@@ -58,6 +58,15 @@ export default class UiList extends LitElement {
     }
   }
 
+  override focus(options?: FocusOptions): void {
+    const { activeListItem } = this;
+    if (activeListItem) {
+      activeListItem.focus(options);
+      return;
+    }
+    this.activateFirstItem();
+  }
+
   override firstUpdated(changedProperties: PropertyValues): void {
     super.firstUpdated(changedProperties);
 
@@ -66,7 +75,7 @@ export default class UiList extends LitElement {
 
   activateFirstItem(): void {
     this.activeListItem = this.getFirstItem();
-    this.activeListItem.activate();
+    this.activeListItem?.activate();
   }
 
   activateLastItem(): void {
@@ -318,30 +327,37 @@ export default class UiList extends LitElement {
     this.manageSelection(item);
     item.activate();
     this.activeListItem = item;
-    this.notifySelect(item);
+    if (this.notifySelect(item)) {
+      e.preventDefault();
+    }
   }
 
-  notifySelect(item: UiListItem): void {
+  /**
+   * @param item The UiListItem that is selected.
+   * @returns True when the event was canceled.
+   */
+  notifySelect(item: UiListItem): boolean {
     const index = this.items.indexOf(item);
     if (index === -1) {
-      return;
+      return false;
     }
-    this.dispatchEvent(new CustomEvent<UiListSelection>('select', {
+    const event = new CustomEvent<UiListSelection>('select', {
+      cancelable: true,
       detail: {
         item,
         index,
       }
-    }));
+    });
+    this.dispatchEvent(event);
+    return event.defaultPrevented;
   }
 
   protected manageSelection(item: UiListItem): void {
     if (!this.selectActive) {
       return;
     }
-    const { activeListItem } = this;
-    if (activeListItem) {
-      activeListItem.classList.remove('select');
-    }
+    const { items } = this;
+    items.forEach((current) => current.classList.remove('select'));
     item.classList.add('select');
   }