@kispace-io/core 0.7.0

package/src/parts/k-toolbar.ts

@@ -0,0 +1,158 @@
+import {css, html} from 'lit'
+import {customElement, property, state} from 'lit/decorators.js'
+import {KElement} from "./k-element";
+import {styleMap} from 'lit/directives/style-map.js';
+import {
+    CommandContribution,
+    Contribution,
+    ContributionChangeEvent,
+    contributionRegistry,
+    HTMLContribution,
+    TOPIC_CONTRIBUTEIONS_CHANGED
+} from "../core/contributionregistry";
+import {Signal} from '@lit-labs/signals';
+import {unsafeHTML} from "lit/directives/unsafe-html.js";
+import {subscribe} from "../core/events";
+
+@customElement('k-toolbar')
+export class KToolbar extends KElement {
+    @property()
+    private position: "start" | "center" | "end" = "start";
+
+    @property({type: Boolean, attribute: 'is-editor'})
+    private isEditor: boolean = false;
+
+    @property({attribute: false})
+    public partToolbarContent?: any = undefined;
+
+    @property({attribute: false})
+    public partToolbarRenderer?: () => any = undefined;
+
+    @state()
+    private contributions: Contribution[] = [];
+
+    protected doBeforeUI() {
+        const id = this.getAttribute("id");
+        if (id) {
+            this.loadContributions(id);
+        }
+        
+        subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event: ContributionChangeEvent) => {
+            if (!id) return;
+            
+            const shouldReload = this.matchesTarget(id, event.target);
+            if (shouldReload) {
+                this.loadContributions(id);
+                this.requestUpdate()
+            }
+        })
+    }
+
+
+    private matchesTarget(id: string, target: string): boolean {
+        if (target === id) return true;
+        
+        if (!id.includes(':')) return false;
+        
+        const [prefix] = id.split(':');
+        if (target === `${prefix}:*`) return true;
+        
+        const targetParts = target.split(':');
+        if (targetParts.length === 2) {
+            const categoryToken = targetParts[1];
+            if (categoryToken === 'system.editors' || categoryToken === '.system.editors') {
+                return this.isEditor && id.startsWith(`${prefix}:`);
+            }
+        }
+        
+        return false;
+    }
+
+    private loadContributions(id: string) {
+        const specific = contributionRegistry.getContributions(id);
+        
+        if (!id.includes(':')) {
+            this.contributions = specific;
+            return;
+        }
+        
+        const [prefix] = id.split(':');
+        const wildcardId = `${prefix}:*`;
+        const wildcard = contributionRegistry.getContributions(wildcardId);
+        
+        const categoryMatches: Contribution[] = [];
+        
+        if (this.isEditor) {
+            const allCategories = ['system.editors', '.system.editors'];
+            for (const category of allCategories) {
+                const categoryId = `${prefix}:${category}`;
+                const matches = contributionRegistry.getContributions(categoryId);
+                categoryMatches.push(...matches);
+            }
+        }
+        
+        this.contributions = [...wildcard, ...categoryMatches, ...specific];
+    }
+
+    contributionCreator(contribution: Contribution) {
+        if ("command" in contribution) {
+            const commandContribution = contribution as CommandContribution
+            const showLabel = !!commandContribution.showLabel
+            return html`
+                <wa-button @click=${() => this.executeCommand(commandContribution.command, commandContribution.params || {})}
+                           title=${commandContribution.label}
+                           ?disabled="${(commandContribution.disabled as Signal.Computed<boolean>)?.get()}"
+                           appearance="plain" size="small">
+                    <wa-icon name=${commandContribution.icon} label="${commandContribution.label}"></wa-icon>
+                    ${showLabel ? commandContribution.label : ''}
+                </wa-button>
+            `
+        } else if ("html" in contribution) {
+            const contents = (contribution as HTMLContribution).html
+            if (contents instanceof Function) {
+                return contents()
+            }
+            return unsafeHTML(contents)
+        } else {
+            return html`<span>unknown contribution type: ${typeof contribution}</span>`
+        }
+    }
+
+    render() {
+        const partContent = this.partToolbarRenderer ? this.partToolbarRenderer() : 
+                           (this.partToolbarContent ? this.partToolbarContent : '');
+        
+        return html`
+            <div class="toolbar-items" style=${styleMap({"justify-content": this.position})}>
+                <slot name="start">
+                    ${this.contributions.filter(c => c.slot === "start").map(this.contributionCreator.bind(this))}
+                </slot>
+                ${partContent}
+                ${this.contributions.filter(c => c.slot === undefined).map(this.contributionCreator.bind(this))}
+                <slot>
+                </slot>
+                <slot name="end">
+                    ${this.contributions.filter(c => c.slot === "end").map(this.contributionCreator.bind(this))}
+                </slot>
+            </div>
+        `;
+    }
+
+    static styles = css`
+        :host {
+            display: flex;
+            flex-direction: row;
+        }
+
+        .toolbar-items {
+            display: flex;
+            flex: 1;
+        }
+    `
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-toolbar': KToolbar
+    }
+}

package/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+

package/src/widgets/index.ts

@@ -0,0 +1,2 @@
+import "./k-nocontent"
+import "./k-icon"

package/src/widgets/k-icon.ts

@@ -0,0 +1,39 @@
+import {customElement, property} from 'lit/decorators.js'
+import {html, nothing, css} from 'lit';
+
+import {KWidget} from "./k-widget";
+import "../core/k-utils";
+
+@customElement('k-icon')
+export class KIcon extends KWidget {
+
+    @property()
+    name?: string;
+
+    @property()
+    family?: string = "regular";
+
+    @property()
+    variant?: string;
+
+    @property()
+    label?: string;
+
+    render() {
+        if (!this.name) {
+            return ""
+        }
+        const parts = this.name.trim().split(/ +/)
+        const iconName = parts.pop()
+        const library = parts.pop()
+        return html`
+            <wa-icon library="${library || nothing}" variant="${this.variant || nothing}"
+                         family="${this.family || nothing}" name=${iconName} label="${this.label || this.name || nothing}"></wa-icon>`
+    }
+
+    static styles = css`
+        :host {
+            display: contents;
+        }
+    `
+}

package/src/widgets/k-nocontent.ts

@@ -0,0 +1,40 @@
+import {css, html} from 'lit'
+import {customElement, property} from 'lit/decorators.js'
+
+import {KWidget} from "./k-widget";
+
+@customElement('k-no-content')
+export class KNoContent extends KWidget {
+
+    @property()
+    private message: string = "No content.";
+
+    @property()
+    private icon: string = "info-circle";
+
+    render() {
+        return html`
+            <h3>
+                <wa-icon name=${this.icon} label="${this.message}"></wa-icon>
+                ${this.message}
+            </h3>
+        `
+    }
+
+    static styles = css`
+        :host {
+            display: flex;
+            margin: 10px;
+        }
+
+        * {
+            flex: 1;
+        }
+    `
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-no-content': KNoContent
+    }
+}

package/src/widgets/k-widget.ts

@@ -0,0 +1,90 @@
+import {LitElement, PropertyValues} from "lit";
+import {subscribe as event_subscribe, unsubscribe as event_unsubscribe, type SubscriptionToken} from "../core/events";
+import {toastError, toastInfo} from "../core/toast";
+import {commandRegistry, ExecuteParams} from "../core/commandregistry";
+import {Signal, SignalWatcher} from "@lit-labs/signals";
+import {watchSignal} from "../core/signals";
+
+Object.defineProperty(LitElement.prototype, "model", {
+    enumerable: true,
+    configurable: true,
+    writable: true
+});
+
+export abstract class KWidget extends SignalWatcher(LitElement) {
+    private signalCleanups = new Set<() => void>();
+    private eventSubscriptions = new Set<SubscriptionToken>();
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.doBeforeUI()
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.eventSubscriptions.forEach(token => event_unsubscribe(token));
+        this.eventSubscriptions.clear();
+        this.signalCleanups.forEach(cleanup => cleanup());
+        this.signalCleanups.clear();
+    }
+
+    protected subscribe(topic: string, callback: Function): void {
+        const token = event_subscribe(topic, callback.bind(this));
+        this.eventSubscriptions.add(token);
+    }
+
+    protected showInfo(msg: string) {
+        toastInfo(msg)
+    }
+
+    protected showError(msg: string) {
+        toastError(msg)
+    }
+
+    protected nobubble(wrap: (event: Event) => void) {
+        return (event: Event) => {
+            event.stopPropagation();
+            wrap.bind(this)(event);
+        };
+    }
+
+    protected command(command: string, state: {} = {}) {
+        return () => {
+            this.executeCommand(command, state)
+        };
+    }
+
+    protected executeCommand(command: string, params: ExecuteParams) {
+        const execContext = commandRegistry.createExecutionContext(params);
+        commandRegistry.execute(command, execContext);
+    }
+
+    protected watch(signal: Signal.State<any> | Signal.Computed<any>, callback: (value: any) => void): void {
+        const cleanup = watchSignal(signal as Signal.State<any>, callback.bind(this));
+        this.signalCleanups.add(cleanup);
+    }
+
+    protected firstUpdated(_changedProperties: PropertyValues) {
+        super.firstUpdated(_changedProperties);
+        this.doInitUI()
+    }
+
+    protected updateIdle() {
+        requestIdleCallback(() => this.requestUpdate())
+    }
+
+    public updateLater() {
+        requestAnimationFrame(() => this.requestUpdate())
+    }
+
+    protected doBeforeUI() {
+    }
+
+    protected doInitUI() {
+    }
+
+    withRefresh(callback: () => void) {
+        callback()
+        this.updateLater()
+    }
+}