@kispace-io/core 0.7.0

package/src/components/k-app-switcher.ts

@@ -0,0 +1,126 @@
+import { html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { KElement } from "../parts/k-element";
+import { appLoaderService, type AppDefinition } from "../core/apploader";
+import { contributionRegistry } from "../core/contributionregistry";
+import { CLOSE_BUTTON, DIALOG_CONTRIBUTION_TARGET, dialogService } from "../core/dialogservice";
+
+const APP_SWITCHER_DIALOG_ID = 'app-switcher';
+
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+    id: APP_SWITCHER_DIALOG_ID,
+    label: "Switch Application",
+    buttons: [CLOSE_BUTTON],
+    component: (state?: any) => {
+        const apps: AppDefinition[] = state?.apps || [];
+        const currentAppId: string | undefined = state?.currentAppId;
+        const selectApp = state?.selectApp as (app: AppDefinition) => void;
+
+        return html`
+            <wa-scroller orientation="vertical" style="min-width: 300px; max-height: 400px; padding: var(--wa-space-m);">
+                <div style="display: flex; flex-direction: column; gap: var(--wa-space-s);">
+                    ${apps.map(app => html`
+                        <wa-card 
+                            style="cursor: pointer;"
+                            variant=${app.id === currentAppId ? 'brand' : 'neutral'}
+                            @click=${() => selectApp(app)}>
+                            <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--wa-space-xs);">
+                                <span style="font-weight: 600;">${app.name}</span>
+                                ${app.version ? html`<wa-badge variant="neutral">v${app.version}</wa-badge>` : ''}
+                            </div>
+                            ${app.description ? html`<p style="margin: 0; font-size: 0.875rem; line-height: 1.4;">${app.description}</p>` : ''}
+                            <div style="font-size: 0.75rem; color: var(--wa-color-neutral-foreground-quiet); font-family: monospace; margin-top: var(--wa-space-xs);">ID: ${app.id}</div>
+                        </wa-card>
+                    `)}
+                </div>
+            </wa-scroller>
+        `;
+    },
+    onButton: async () => true,
+});
+
+const showAppSwitcherDialog = async (): Promise<void> => {
+    const apps = appLoaderService.getRegisteredApps();
+    const currentApp = appLoaderService.getCurrentApp();
+
+    if (apps.length === 0) {
+        return;
+    }
+
+    const state = {
+        apps,
+        currentAppId: currentApp?.id,
+        selectApp: async (app: AppDefinition) => {
+            if (app.id === currentApp?.id) {
+                state.close?.();
+                return;
+            }
+
+            try {
+                await appLoaderService.setPreferredAppId(app.id);
+                await appLoaderService.loadApp(app.id, document.body);
+            } catch (error) {
+                console.error('Failed to switch app:', error);
+            } finally {
+                state.close?.();
+            }
+        },
+        close: undefined as (() => void) | undefined,
+    };
+
+    await dialogService.open(APP_SWITCHER_DIALOG_ID, state);
+};
+
+@customElement('k-app-switcher')
+export class KAppSwitcher extends KElement {
+    @state()
+    private currentApp: AppDefinition | undefined;
+
+    protected doBeforeUI() {
+        this.currentApp = appLoaderService.getCurrentApp();
+        
+        const updateCurrentApp = () => {
+            this.currentApp = appLoaderService.getCurrentApp();
+            this.requestUpdate();
+        };
+        
+        window.addEventListener('app-loaded', updateCurrentApp);
+        
+        return () => {
+            window.removeEventListener('app-loaded', updateCurrentApp);
+        };
+    }
+
+    protected render() {
+        const apps = appLoaderService.getRegisteredApps();
+        const appName = this.currentApp?.name || 'No App';
+        
+        if (apps.length <= 1) {
+            return html``;
+        }
+        
+        return html`
+            <wa-button 
+                appearance="plain" 
+                size="small"
+                title="Current app: ${appName}. Click to switch applications."
+                @click=${() => showAppSwitcherDialog()}>
+                <wa-icon name="grip" style="margin-right: 0.5rem;"></wa-icon>
+                ${appName}
+            </wa-button>
+        `;
+    }
+
+    static styles = css`
+        :host {
+            display: inline-block;
+        }
+    `;
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-app-switcher': KAppSwitcher;
+    }
+}
+

package/src/components/k-command.ts

@@ -0,0 +1,236 @@
+import { css, html, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { KWidget } from '../widgets/k-widget'
+import '../widgets/k-icon'
+import { keyBindingManager } from '../core/keybindings'
+import { contributionRegistry, Contribution, CommandContribution, HTMLContribution, ContributionChangeEvent, TOPIC_CONTRIBUTEIONS_CHANGED } from '../core/contributionregistry'
+import { subscribe } from '../core/events'
+import { Signal } from '@lit-labs/signals'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+
+@customElement('k-command')
+export class KCommand extends KWidget {
+    @property()
+    cmd: string = ''
+
+    @property({ type: Object, attribute: false })
+    action?: (event?: Event) => void
+
+    @property()
+    title: string = ''
+
+    @property()
+    label?: boolean = false
+
+    @property()
+    icon?: string
+
+    @property({ type: Boolean })
+    disabled: boolean = false
+
+    @property()
+    appearance: 'default' | 'plain' | 'outline' | 'accent' | 'filled-outlined' | 'filled' | 'outlined' = 'plain'
+
+    @property()
+    variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'
+
+    @property()
+    size: 'small' | 'medium' | 'large' = 'small'
+
+    @property({ type: Object, attribute: false })
+    params: Record<string, any> = {}
+
+    @property()
+    dropdown?: string
+
+    @property()
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end' = 'bottom-start'
+
+    @state()
+    private dropdownContributions: Contribution[] = []
+
+    private handleClick(event?: Event) {
+        if (this.disabled) return
+
+        if (event) {
+            event.stopPropagation()
+        }
+
+        if (this.action) {
+            this.action(event)
+            return
+        }
+
+        if (this.cmd) {
+            const dropdown = this.closest('wa-dropdown') as any;
+            if (dropdown && dropdown.open !== undefined) {
+                dropdown.open = false;
+            }
+            this.executeCommand(this.cmd, this.params);
+        }
+    }
+
+    private handleSelect(event: CustomEvent) {
+        // Close dropdown immediately when any item is selected
+        // This ensures the dropdown is hidden before the command executes
+        const dropdown = event.target as any;
+        if (dropdown && dropdown.open !== undefined) {
+            dropdown.open = false;
+        }
+    }
+
+    private isInDropdown(): boolean {
+        return !!this.closest('wa-dropdown, wa-dropdown-menu')
+    }
+
+    private getKeybinding(): string | null {
+        if (!this.cmd || this.action) return null
+        const keybindings = keyBindingManager.getKeyBindingsForCommand(this.cmd)
+        return keybindings.length > 0 ? keybindings[0] : null
+    }
+
+    protected doBeforeUI() {
+        if (this.dropdown) {
+            this.loadDropdownContributions()
+            
+            subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event: ContributionChangeEvent) => {
+                if (this.dropdown && event.target === this.dropdown) {
+                    this.dropdownContributions = event.contributions;
+                    this.requestUpdate();
+                }
+            })
+        }
+    }
+
+    private loadDropdownContributions() {
+        if (!this.dropdown) return
+        this.dropdownContributions = contributionRegistry.getContributions(this.dropdown)
+        this.requestUpdate()
+    }
+
+    private renderContribution(contribution: Contribution) {
+        if ('command' in contribution) {
+            const commandContribution = contribution as CommandContribution
+            const disabled = (commandContribution.disabled as Signal.Computed<boolean>)?.get()
+            return html`
+                <k-command 
+                    cmd="${commandContribution.command}"
+                    icon="${commandContribution.icon || ''}"
+                    .params=${commandContribution.params || {}}
+                    ?disabled="${disabled}">
+                    ${commandContribution.label}
+                </k-command>
+            `
+        }
+        
+        if ('html' in contribution) {
+            const htmlContribution = contribution as HTMLContribution
+            const contents = htmlContribution.html
+            if (contents instanceof Function) {
+                return contents()
+            }
+            return unsafeHTML(contents)
+        }
+        
+        return nothing
+    }
+
+    render() {
+        const keybinding = this.getKeybinding()
+
+        if (this.isInDropdown()) {
+            return html`
+                <wa-dropdown-item 
+                    ?disabled=${this.disabled}
+                    @click=${(e: Event) => this.handleClick(e)}>
+                    <k-icon name="${this.icon}" label="${this.title}" slot="icon"></k-icon>
+                    <slot></slot>
+                    ${keybinding ? html`<span class="keybinding">${keybinding}</span>` : ''}
+                </wa-dropdown-item>
+            `
+        }
+
+        if (this.dropdown) {
+            return html`
+                <wa-dropdown 
+                    placement=${this.placement}
+                    @wa-select=${(e: CustomEvent) => this.handleSelect(e)}>
+                    <wa-button 
+                        slot="trigger"
+                        appearance=${this.appearance}
+                        variant=${this.variant}
+                        size=${this.size}
+                        ?disabled=${this.disabled}
+                        with-caret
+                        title=${keybinding ? `${this.title} (${keybinding})` : this.title}>
+                        <k-icon slot="start" name="${this.icon}" label="${this.title}"></k-icon>
+                        <slot></slot>
+                        ${this.label ? this.title : nothing}
+                    </wa-button>
+                    
+                    ${this.title ? html`
+                        <h6 style="padding: var(--wa-space-xs) var(--wa-space-s); margin: 0; color: var(--wa-color-neutral-50); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;">
+                            ${this.title}
+                        </h6>
+                    ` : nothing}
+                    
+                    ${this.dropdownContributions.map(c => this.renderContribution(c))}
+                    
+                    ${this.cmd ? html`
+                        <wa-divider></wa-divider>
+                        <k-command 
+                            cmd="${this.cmd}"
+                            icon="${this.icon || ''}"
+                            .params=${this.params}
+                            ?disabled=${this.disabled}>
+                            <slot></slot>
+                            ${this.title}
+                        </k-command>
+                    ` : nothing}
+                </wa-dropdown>
+            `
+        }
+
+        return html`
+            <wa-button
+                appearance=${this.appearance}
+                variant=${this.variant}
+                size=${this.size}
+                ?disabled=${this.disabled}
+                title=${keybinding ? `${this.title} (${keybinding})` : this.title}
+                @click=${(e: Event) => this.handleClick(e)}>
+                <k-icon slot="start" name="${this.icon}" label="${this.title}"></k-icon>
+                <slot></slot>
+            </wa-button>
+        `
+    }
+
+    static styles = css`
+        :host {
+            display: inline-block;
+        }
+
+        .keybinding {
+            margin-left: auto;
+            padding: 2px 6px;
+            background: var(--wa-color-neutral-15);
+            border: 1px solid var(--wa-color-neutral-25);
+            border-radius: 3px;
+            font-size: 10px;
+            font-family: monospace;
+            opacity: 0.7;
+        }
+
+        :host-context(.wa-light) .keybinding {
+            background: var(--wa-color-neutral-85);
+            border: 1px solid var(--wa-color-neutral-75);
+        }
+    `
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-command': KCommand
+    }
+}
+