@eclipse-docks/core 0.7.122 → 0.7.125

package/src/components/language-selector.ts

@@ -134,7 +134,7 @@ export class DocksLanguageSelector extends DocksElement {
         return html`
             <wa-button 
                 appearance="plain" 
-                size="small"
+                size="s"
                 title="Current language: ${languageName}"
                 @click=${() => showLanguageSelectorDialog()}>
                 ${icon('language')}

package/src/components/layout-switcher.ts

@@ -46,12 +46,12 @@ export class DocksLayoutSwitcher extends DocksElement {
             <wa-dropdown
                 placement="bottom-end"
                 distance="4"
-                size="small"
+                size="s"
                 @wa-select=${this.handleSelect}>
                 <wa-button
                     slot="trigger"
                     appearance="plain"
-                    size="small"
+                    size="s"
                     with-caret
                     title="Switch layout (current: ${layoutName})">
                     <wa-icon name="table-cells" label="Layout"></wa-icon>

package/src/components/part-name.ts

@@ -32,7 +32,7 @@ export class DocksPartName extends DocksElement {
         return html`
             <wa-button 
                 appearance="plain"
-                size="small"
+                size="s"
                 title="${t.ACTIVE_PART}">
                 ${icon(partIcon, { label: 'Part', slot: 'start' })}
                 ${getActivePartDisplayName()}

package/src/core/commandregistry.ts

@@ -1,6 +1,6 @@
 import logger from "./logger";
 import { publish } from "./events";
-import { CommandContribution, Contribution, contributionRegistry } from "./contributionregistry";
+import { CommandContribution, contributionRegistry } from "./contributionregistry";
 import { rootContext } from "./di";
 import { activePartSignal, activeEditorSignal } from "./appstate";
 
@@ -225,7 +225,7 @@ rootContext.put("commandRegistry", commandRegistry);
 export interface RegisterOptions {
     command: Command,
     handler?: Handler,
-    contribution?: Contribution
+    contribution?: Omit<CommandContribution, 'command'>,
 }
 
 export const registerAll = (options: RegisterOptions) => {

package/src/core/dropdown-menu-utils.ts

@@ -0,0 +1,39 @@
+type DropdownItemElement = HTMLElement & { submenuOpen?: boolean };
+
+function visitElementTree(root: Node, visit: (element: Element) => void): void {
+  if (root instanceof Element) {
+    visit(root);
+    if (root.shadowRoot) {
+      visitElementTree(root.shadowRoot, visit);
+    }
+    for (const child of root.children) {
+      visitElementTree(child, visit);
+    }
+  } else if (root instanceof DocumentFragment) {
+    for (const child of root.children) {
+      visitElementTree(child, visit);
+    }
+  }
+}
+
+/** Collect wa-dropdown-item elements under a menu root, including shadow DOM. */
+export function collectDropdownItems(root: Element): DropdownItemElement[] {
+  const items: DropdownItemElement[] = [];
+  visitElementTree(root, (element) => {
+    if (element.localName === "wa-dropdown-item") {
+      items.push(element as DropdownItemElement);
+    }
+  });
+  return items;
+}
+
+/** Close every open submenu except the one being activated. */
+export function closeSiblingSubmenus(activeItem: Element, menuRoot: Element): void {
+  queueMicrotask(() => {
+    for (const item of collectDropdownItems(menuRoot)) {
+      if (item !== activeItem && item.submenuOpen) {
+        item.submenuOpen = false;
+      }
+    }
+  });
+}

package/src/core/toast.ts

@@ -1,27 +1,50 @@
-import Toastify from 'toastify-js';
-import 'toastify-js/src/toastify.css';
+import '@awesome.me/webawesome/dist/components/toast/toast.js';
 import { createLogger } from './logger';
 
 const logger = createLogger('Toast');
 
 const DURATION = 4000;
-const BASE = { duration: DURATION, gravity: 'bottom' as const, position: 'right' as const, close: true };
 
-const show = (msg: string, style: { background: string; color: string }) => {
-  Toastify({ ...BASE, text: msg, style }).showToast();
+type ToastVariant = 'brand' | 'danger' | 'warning';
+
+type WaToastElement = HTMLElement & {
+  placement: string;
+  create(
+    message: string,
+    options?: {
+      variant?: ToastVariant | 'neutral' | 'success';
+      duration?: number;
+    },
+  ): Promise<HTMLElement>;
+};
+
+let toastStack: WaToastElement | null = null;
+
+function getToastStack(): WaToastElement {
+  if (!toastStack) {
+    toastStack = document.createElement('wa-toast') as WaToastElement;
+    toastStack.placement = 'bottom-end';
+    document.body.append(toastStack);
+  }
+  return toastStack;
+}
+
+const show = (msg: string, variant: ToastVariant) => {
+  if (typeof document === 'undefined' || !document.body) return;
+  void getToastStack().create(msg, { variant, duration: DURATION });
 };
 
 export const toastInfo = (msg: string) => {
   logger.info(msg);
-  show(msg, { background: 'var(--wa-color-brand-50)', color: 'var(--wa-color-brand-on)' });
+  show(msg, 'brand');
 };
 
 export const toastError = (msg: string) => {
   logger.error(msg);
-  show(msg, { background: 'var(--wa-color-danger-50)', color: 'var(--wa-color-danger-on)' });
+  show(msg, 'danger');
 };
 
 export const toastWarning = (msg: string) => {
   logger.warn(msg);
-  show(msg, { background: 'var(--wa-color-warning-50)', color: 'var(--wa-color-warning-on)' });
+  show(msg, 'warning');
 };

package/src/externals/webawesome.ts

@@ -1,4 +1,6 @@
 // unfortunately, webawesome has no all-in-one import, so we need to import each component individually
+import '@awesome.me/webawesome/dist/components/accordion/accordion.js';
+import '@awesome.me/webawesome/dist/components/accordion-item/accordion-item.js';
 import '@awesome.me/webawesome/dist/components/animated-image/animated-image.js';
 import '@awesome.me/webawesome/dist/components/animation/animation.js';
 import '@awesome.me/webawesome/dist/components/avatar/avatar.js';
@@ -12,6 +14,7 @@ import '@awesome.me/webawesome/dist/components/card/card.js';
 import '@awesome.me/webawesome/dist/components/carousel/carousel.js';
 import '@awesome.me/webawesome/dist/components/carousel-item/carousel-item.js';
 import '@awesome.me/webawesome/dist/components/checkbox/checkbox.js';
+import '@awesome.me/webawesome/dist/components/checkbox-group/checkbox-group.js';
 import '@awesome.me/webawesome/dist/components/color-picker/color-picker.js';
 import '@awesome.me/webawesome/dist/components/comparison/comparison.js';
 import '@awesome.me/webawesome/dist/components/copy-button/copy-button.js';
@@ -28,11 +31,14 @@ import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import '@awesome.me/webawesome/dist/components/include/include.js';
 import '@awesome.me/webawesome/dist/components/input/input.js';
 import '@awesome.me/webawesome/dist/components/intersection-observer/intersection-observer.js';
+import '@awesome.me/webawesome/dist/components/known-date/known-date.js';
 import '@awesome.me/webawesome/dist/components/markdown/markdown.js';
 import '@awesome.me/webawesome/dist/components/mutation-observer/mutation-observer.js';
 import '@awesome.me/webawesome/dist/components/number-input/number-input.js';
 import '@awesome.me/webawesome/dist/components/option/option.js';
+import '@awesome.me/webawesome/dist/components/otp-input/otp-input.js';
 import '@awesome.me/webawesome/dist/components/page/page.js';
+import '@awesome.me/webawesome/dist/components/pagination/pagination.js';
 import '@awesome.me/webawesome/dist/components/popover/popover.js';
 import '@awesome.me/webawesome/dist/components/popup/popup.js';
 import '@awesome.me/webawesome/dist/components/progress-bar/progress-bar.js';
@@ -41,6 +47,7 @@ import '@awesome.me/webawesome/dist/components/qr-code/qr-code.js';
 import '@awesome.me/webawesome/dist/components/radio/radio.js';
 import '@awesome.me/webawesome/dist/components/radio-group/radio-group.js';
 import '@awesome.me/webawesome/dist/components/rating/rating.js';
+import '@awesome.me/webawesome/dist/components/random-content/random-content.js';
 import '@awesome.me/webawesome/dist/components/relative-time/relative-time.js';
 import '@awesome.me/webawesome/dist/components/resize-observer/resize-observer.js';
 import '@awesome.me/webawesome/dist/components/scroller/scroller.js';
@@ -55,6 +62,9 @@ import '@awesome.me/webawesome/dist/components/tab-group/tab-group.js';
 import '@awesome.me/webawesome/dist/components/tab-panel/tab-panel.js';
 import '@awesome.me/webawesome/dist/components/tag/tag.js';
 import '@awesome.me/webawesome/dist/components/textarea/textarea.js';
+import '@awesome.me/webawesome/dist/components/time-input/time-input.js';
+import '@awesome.me/webawesome/dist/components/toast/toast.js';
+import '@awesome.me/webawesome/dist/components/toast-item/toast-item.js';
 import '@awesome.me/webawesome/dist/components/tooltip/tooltip.js';
 import '@awesome.me/webawesome/dist/components/tree/tree.js';
 import '@awesome.me/webawesome/dist/components/tree-item/tree-item.js';

package/src/layouts/standard-layout.ts

@@ -139,11 +139,11 @@ export class DocksStandardLayout extends DocksContainer {
                                     id="left-sidebar-split" 
                                     orientation="vertical" 
                                     sizes="50%, 50%">
-                                    <docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar item-size="large"></docks-tabs>
+                                    <docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar item-size="l"></docks-tabs>
                                     <docks-tabs id="${SIDEBAR_MAIN_BOTTOM}"  placement="start" icon-only></docks-tabs>
                                 </docks-resizable-grid>
                             `
-                            : html`<docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar item-size="large"></docks-tabs>`
+                            : html`<docks-tabs id="${SIDEBAR_MAIN}" placement="start" icon-only with-toolbar item-size="l"></docks-tabs>`
                         }
                     `
                     : nothing

package/src/parts/contextmenu.ts

@@ -13,6 +13,7 @@ import {
 } from "../core/contributionregistry";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {subscribe} from "../core/events";
+import {closeSiblingSubmenus} from "../core/dropdown-menu-utils";
 import {createRef, ref} from "lit/directives/ref.js";
 import '../components/command';
 
@@ -75,8 +76,8 @@ export class DocksContextMenu extends DocksElement {
         });
     }
 
-    protected updated(changedProperties: Map<string, unknown>) {
-        super.updated?.(changedProperties);
+    protected willUpdate(changedProperties: Map<string, unknown>) {
+        super.willUpdate?.(changedProperties);
         if (changedProperties.has('scopeTokens')) {
             this.refreshContributions();
         }
@@ -173,6 +174,14 @@ export class DocksContextMenu extends DocksElement {
         return element;
     }
 
+    private getHostPart(): (HTMLElement & { updateComplete: Promise<boolean> }) | null {
+        const root = this.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            return root.host as HTMLElement & { updateComplete: Promise<boolean> };
+        }
+        return null;
+    }
+
     /**
      * Triggers a click on the element under the cursor to update selection before showing context menu.
      */
@@ -196,21 +205,35 @@ export class DocksContextMenu extends DocksElement {
         }
     }
 
+    private handleSubmenuOpening = (event: Event): void => {
+        const dropdown = this.dropdownRef.value;
+        const activeItem = (event as CustomEvent<{ item?: Element }>).detail?.item;
+        if (!dropdown || !activeItem) return;
+        closeSiblingSubmenus(activeItem, dropdown);
+    };
+
     /** Opens the menu at `position`. Returns false when there is nothing to show (no thin empty panel). */
-    public show(position: { x: number, y: number }, mouseEvent?: MouseEvent): boolean {
+    public async show(position: { x: number, y: number }, mouseEvent?: MouseEvent): Promise<boolean> {
         if (!this.hasMenuBody()) return false;
         if (mouseEvent) {
             this.triggerClickUnderCursor(mouseEvent);
+            await this.getHostPart()?.updateComplete;
         }
+
+        if (this.isOpen) {
+            this.isOpen = false;
+            await this.updateComplete;
+        }
+
         this.position = position;
         this.isOpen = true;
-        this.updateComplete.then(() => {
-            document.addEventListener('pointerdown', this.boundHandleDocumentPointerDown, { capture: true });
-        });
+        await this.updateComplete;
+        document.addEventListener('pointerdown', this.boundHandleDocumentPointerDown, { capture: true });
         return true;
     }
 
     private onClose() {
+        if (!this.isOpen) return;
         this.isOpen = false;
         document.removeEventListener('pointerdown', this.boundHandleDocumentPointerDown, { capture: true });
     }
@@ -242,14 +265,13 @@ export class DocksContextMenu extends DocksElement {
     }
 
     render() {
-        if (!this.isOpen) return nothing;
-
         const partContent = this.partContextMenuRenderer ? this.partContextMenuRenderer() : nothing;
 
         return html`
             <wa-dropdown
                 ${ref(this.dropdownRef)}
                 ?open=${this.isOpen}
+                @submenu-opening=${this.handleSubmenuOpening}
                 @wa-after-hide=${this.onClose}>
                 
                 <div 
@@ -281,9 +303,13 @@ export class DocksContextMenu extends DocksElement {
         }
 
         wa-dropdown {
-            pointer-events: auto;
+            pointer-events: none;
             min-width: 200px;
         }
+
+        wa-dropdown:state(open) {
+            pointer-events: auto;
+        }
         
         wa-dropdown::part(menu) {
             min-width: 200px;

package/src/parts/part.ts

@@ -145,10 +145,10 @@ export abstract class DocksPart extends DocksContainer {
         return contributionKey ? `contextmenu:${contributionKey}` : undefined;
     }
 
-    private onContentContextMenu = (event: MouseEvent): void => {
+    private onContentContextMenu = async (event: MouseEvent): Promise<void> => {
         const contextMenu = this.renderRoot.querySelector('docks-contextmenu') as DocksContextMenu | null;
         if (!contextMenu) return;
-        if (contextMenu.show({ x: event.clientX, y: event.clientY }, event)) {
+        if (await contextMenu.show({ x: event.clientX, y: event.clientY }, event)) {
             event.preventDefault();
         }
     };

package/src/parts/tabs.ts

@@ -45,9 +45,9 @@ export class DocksTabs extends DocksContainer {
     @property({ type: Boolean, reflect: true, attribute: 'hide-tabs' })
     hideTabs: boolean = false;
 
-    /** Tab and nav-toolbar control sizing (`small` | `medium` | `large`). */
+    /** Tab and nav-toolbar control sizing (`s` | `m` | `l`). */
     @property({ reflect: true, attribute: 'item-size' })
-    itemSize: 'small' | 'medium' | 'large' = 'medium';
+    itemSize: 's' | 'm' | 'l' = 'm';
 
     /** Tab contributions for this container */
     @state()
@@ -549,12 +549,12 @@ export class DocksTabs extends DocksContainer {
             font-size: var(--wa-font-size-s);
         }
 
-        :host([item-size="small"]) wa-tab::part(base) {
+        :host([item-size="s"]) wa-tab::part(base) {
             padding: 2px 0.375rem;
             font-size: var(--wa-font-size-xs);
         }
 
-        :host([item-size="large"]) wa-tab::part(base) {
+        :host([item-size="l"]) wa-tab::part(base) {
             padding: var(--wa-space-s) 0.75rem;
             font-size: var(--wa-font-size-m);
         }
@@ -567,11 +567,11 @@ export class DocksTabs extends DocksContainer {
             padding: var(--wa-space-s);
         }
 
-        :host([icon-only][item-size="small"]:is([placement="top"], [placement="bottom"])) wa-tab::part(base) {
+        :host([icon-only][item-size="s"]:is([placement="top"], [placement="bottom"])) wa-tab::part(base) {
             padding: var(--wa-space-xs);
         }
 
-        :host([icon-only][item-size="large"]:is([placement="top"], [placement="bottom"])) wa-tab::part(base) {
+        :host([icon-only][item-size="l"]:is([placement="top"], [placement="bottom"])) wa-tab::part(base) {
             padding: var(--wa-space-m);
         }
 
@@ -580,11 +580,11 @@ export class DocksTabs extends DocksContainer {
             padding-block: var(--wa-space-s);
         }
 
-        :host([icon-only][item-size="small"]:is([placement="start"], [placement="end"])) wa-tab::part(base) {
+        :host([icon-only][item-size="s"]:is([placement="start"], [placement="end"])) wa-tab::part(base) {
             padding-block: var(--wa-space-xs);
         }
 
-        :host([icon-only][item-size="large"]:is([placement="start"], [placement="end"])) wa-tab::part(base) {
+        :host([icon-only][item-size="l"]:is([placement="start"], [placement="end"])) wa-tab::part(base) {
             padding-block: var(--wa-space-m);
         }
 
@@ -592,11 +592,11 @@ export class DocksTabs extends DocksContainer {
             font-size: var(--wa-font-size-l);
         }
 
-        :host([icon-only][item-size="small"]) wa-tab wa-icon {
+        :host([icon-only][item-size="s"]) wa-tab wa-icon {
             font-size: var(--wa-font-size-m);
         }
 
-        :host([icon-only][item-size="large"]) wa-tab wa-icon {
+        :host([icon-only][item-size="l"]) wa-tab wa-icon {
             font-size: var(--wa-font-size-xl);
         }
 

package/src/parts/toolbar.ts

@@ -56,7 +56,7 @@ export class DocksToolbar extends DocksElement {
     align: "start" | "center" | "end" = "start";
 
     @property({reflect: true})
-    size: "small" | "medium" | "large" = "small";
+    size: "s" | "m" | "l" = "s";
 
     @property({attribute: false})
     scopeTokens: string[] = [];
@@ -83,7 +83,6 @@ export class DocksToolbar extends DocksElement {
         const trimmed = toolbarItems.scrollWidth > toolbarItems.clientWidth;
         if (this.compact !== trimmed) {
             this.compact = trimmed;
-            this.requestUpdate();
         }
     }
 
@@ -123,6 +122,10 @@ export class DocksToolbar extends DocksElement {
     updated(changedProperties: Map<string, unknown>) {
         super.updated?.(changedProperties);
         if (!this.compact) this.scheduleOverflowCheck();
+    }
+
+    protected willUpdate(changedProperties: Map<string, unknown>) {
+        super.willUpdate?.(changedProperties);
         if (changedProperties.has('scopeTokens')) {
             this.refreshContributions();
         }
@@ -145,7 +148,6 @@ export class DocksToolbar extends DocksElement {
             const shouldReload = this.matchesTarget(id, event.target);
             if (shouldReload) {
                 this.refreshContributions();
-                this.requestUpdate()
             }
         })
     }

package/src/vite-env.d.ts

@@ -18,17 +18,3 @@ declare const __RESOLVED_PACKAGE_INFO__: {
   marketplaceCatalogUrls?: string[];
 } | undefined;
 
-declare module 'toastify-js' {
-  interface ToastifyOptions {
-    text?: string;
-    duration?: number;
-    gravity?: 'top' | 'bottom';
-    position?: 'left' | 'center' | 'right';
-    close?: boolean;
-    style?: { background?: string };
-    className?: string;
-  }
-  function Toastify(options: ToastifyOptions): { showToast(): void };
-  export default Toastify;
-}
-