@kispace-io/core 0.7.0

package/src/dialogs/confirm-dialog.ts

@@ -0,0 +1,72 @@
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { KDialogContent } from "../parts/k-dialog-content";
+import { contributionRegistry } from "../core/contributionregistry";
+import { DIALOG_CONTRIBUTION_TARGET, OK_BUTTON, CANCEL_BUTTON, DialogContribution, dialogService } from "../core/dialogservice";
+
+@customElement('k-confirm-dialog-content')
+export class KConfirmDialogContent extends KDialogContent {
+    @property({ type: String })
+    message: string = '';
+
+    @property({ type: Boolean })
+    markdown: boolean = false;
+
+    getResult(): boolean {
+        return false;
+    }
+
+    render() {
+        return html`
+            ${this.renderMessage(this.message, this.markdown)}
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-confirm-dialog-content': KConfirmDialogContent;
+    }
+}
+
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+    id: 'confirm',
+    label: 'Confirm',
+    buttons: [OK_BUTTON, CANCEL_BUTTON],
+    component: (state?: any) => {
+        if (!state) {
+            return html`<div>Error: No confirm dialog state</div>`;
+        }
+        
+        return html`
+            <k-confirm-dialog-content 
+                .message="${state.message}"
+                .markdown="${state.markdown}"
+            ></k-confirm-dialog-content>
+        `;
+    },
+    onButton: async (id: string, result: any, state?: any) => {
+        if (!state) {
+            return true;
+        }
+        
+        if (id === 'ok') {
+            state.resolve(true);
+        } else {
+            state.resolve(false);
+        }
+        
+        return true;
+    }
+});
+
+export async function confirmDialog(message: string, markdown: boolean = false): Promise<boolean> {
+    return new Promise((resolve) => {
+        dialogService.open('confirm', {
+            message,
+            markdown,
+            resolve
+        });
+    });
+}
+

package/src/dialogs/index.ts

@@ -0,0 +1,4 @@
+export { promptDialog } from './prompt-dialog';
+export { infoDialog } from './info-dialog';
+export { confirmDialog } from './confirm-dialog';
+export { navigableInfoDialog, type NavigableDialogAction } from './navigable-info-dialog';

package/src/dialogs/info-dialog.ts

@@ -0,0 +1,67 @@
+import { html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { KDialogContent } from "../parts/k-dialog-content";
+import { contributionRegistry } from "../core/contributionregistry";
+import { DIALOG_CONTRIBUTION_TARGET, OK_BUTTON, DialogContribution, dialogService } from "../core/dialogservice";
+
+@customElement('k-info-dialog-content')
+export class KInfoDialogContent extends KDialogContent {
+    @property({ type: String })
+    message: string = '';
+
+    @property({ type: Boolean })
+    markdown: boolean = false;
+
+    render() {
+        return html`
+            ${this.renderMessage(this.message, this.markdown)}
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-info-dialog-content': KInfoDialogContent;
+    }
+}
+
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+    id: 'info',
+    label: 'Information',
+    buttons: [OK_BUTTON],
+    component: (state?: any) => {
+        if (!state) {
+            return html`<div>Error: No info dialog state</div>`;
+        }
+        
+        return html`
+            <k-info-dialog-content 
+                .message="${state.message}"
+                .markdown="${state.markdown}"
+            ></k-info-dialog-content>
+        `;
+    },
+    onButton: async (id: string, result: any, state?: any) => {
+        if (!state) {
+            return true;
+        }
+        
+        if (state.resolve) {
+            state.resolve();
+        }
+        
+        return true;
+    }
+});
+
+export async function infoDialog(title: string, message: string, markdown: boolean = false): Promise<void> {
+    return new Promise((resolve) => {
+        dialogService.open('info', {
+            title,
+            message,
+            markdown,
+            resolve
+        });
+    });
+}
+

package/src/dialogs/navigable-info-dialog.ts

@@ -0,0 +1,256 @@
+import { html, css, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { KDialogContent } from "../parts/k-dialog-content";
+import { contributionRegistry } from "../core/contributionregistry";
+import { DIALOG_CONTRIBUTION_TARGET, CLOSE_BUTTON, DialogContribution, dialogService } from "../core/dialogservice";
+
+export interface NavigableDialogAction {
+    label: string;
+    variant?: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger';
+    disabled?: boolean;
+    callback: () => void;
+}
+
+@customElement('k-navigable-info-dialog-content')
+export class KNavigableInfoDialogContent extends KDialogContent {
+    @property({ type: String })
+    title: string = '';
+
+    @property({ type: String })
+    message: string = '';
+
+    @property({ type: Boolean })
+    markdown: boolean = false;
+
+    @state()
+    actions: NavigableDialogAction[] = [];
+
+    @state()
+    private currentTitle: string = '';
+
+    @state()
+    private currentMessage: string = '';
+
+    resolveCallback?: () => void;
+    private dialogElement: HTMLElement | null = null;
+
+    async firstUpdated(changedProperties: PropertyValues) {
+        super.firstUpdated(changedProperties);
+        this.currentTitle = this.title;
+        this.currentMessage = this.message;
+        
+        await this.updateComplete;
+        const dialog = this.closest('wa-dialog');
+        if (dialog) {
+            this.dialogElement = dialog as HTMLElement;
+            this.updateDialogLabel();
+        }
+        
+        const contentContainer = this.closest('.dialog-service-content');
+        if (contentContainer) {
+            const footer = contentContainer.parentElement?.querySelector('.dialog-service-footer');
+            if (footer) {
+                (footer as HTMLElement).style.display = 'none';
+            }
+        }
+    }
+
+    updated(changedProperties: PropertyValues) {
+        super.updated(changedProperties);
+        if (changedProperties.has('title')) {
+            this.currentTitle = this.title;
+            this.updateDialogLabel();
+        }
+        if (changedProperties.has('message')) {
+            this.currentMessage = this.message;
+        }
+    }
+
+    private updateDialogLabel() {
+        if (this.dialogElement) {
+            this.dialogElement.setAttribute('label', this.currentTitle);
+        }
+    }
+
+    updateDialog(newTitle: string, newMessage: string, newActions: NavigableDialogAction[]) {
+        this.currentTitle = newTitle;
+        this.currentMessage = newMessage;
+        this.actions = [...newActions];
+        this.updateDialogLabel();
+        this.requestUpdate();
+    }
+
+    private handleActionClick(action: NavigableDialogAction) {
+        action.callback();
+    }
+
+    private handleClose() {
+        const dialog = this.closest('wa-dialog');
+        if (dialog && this.resolveCallback) {
+            this.resolveCallback();
+        }
+    }
+
+    static styles = [
+        ...KDialogContent.styles,
+        css`
+            :host {
+                display: block;
+            }
+
+            :host-context(.dialog-service-content) {
+                padding: 0;
+            }
+            
+            .dialog-content {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+                min-width: 400px;
+                max-width: 600px;
+                height: 500px;
+                padding: 1rem;
+            }
+            
+            .dialog-scroller {
+                flex: 1;
+                overflow-y: auto;
+            }
+            
+            .dialog-actions {
+                display: flex;
+                gap: 0.5rem;
+                justify-content: space-between;
+                margin-top: 0.5rem;
+            }
+            
+            .dialog-actions-left,
+            .dialog-actions-right {
+                display: flex;
+                gap: 0.5rem;
+            }
+        `
+    ];
+
+    render() {
+        const leftActions = this.actions.filter(a => a.label !== 'Close');
+        const rightActions = this.actions.filter(a => a.label === 'Close');
+
+        return html`
+            <div class="dialog-content">
+                <wa-scroller class="dialog-scroller">
+                    ${this.renderMessage(this.currentMessage, this.markdown)}
+                </wa-scroller>
+                
+                <div class="dialog-actions">
+                    <div class="dialog-actions-left">
+                        ${leftActions.map(action => html`
+                            <wa-button 
+                                variant="${action.variant || 'default'}"
+                                ?disabled=${action.disabled}
+                                @click=${() => this.handleActionClick(action)}
+                            >
+                                ${action.label}
+                            </wa-button>
+                        `)}
+                    </div>
+                    <div class="dialog-actions-right">
+                        ${rightActions.map(action => html`
+                            <wa-button 
+                                variant="${action.variant || 'primary'}"
+                                @click=${() => {
+                                    this.handleActionClick(action);
+                                    this.handleClose();
+                                }}
+                            >
+                                ${action.label}
+                            </wa-button>
+                        `)}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-navigable-info-dialog-content': KNavigableInfoDialogContent;
+    }
+}
+
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+    id: 'navigable-info',
+    label: 'Information',
+    buttons: [CLOSE_BUTTON],
+    component: (state?: any) => {
+        if (!state) {
+            return html`<div>Error: No navigable info dialog state</div>`;
+        }
+        
+        const componentHtml = html`
+            <k-navigable-info-dialog-content 
+                .title="${state.title}"
+                .message="${state.message}"
+                .markdown="${state.markdown}"
+            ></k-navigable-info-dialog-content>
+        `;
+        
+        (async () => {
+            const element = document.querySelector('k-navigable-info-dialog-content') as KNavigableInfoDialogContent;
+            if (element) {
+                await element.updateComplete;
+                element.actions = state.actions || [];
+                element.resolveCallback = state.resolve;
+                if (state.updateDialogRef) {
+                    state.updateDialogRef.current = (newTitle: string, newMessage: string, newActions: NavigableDialogAction[]) => {
+                        element.updateDialog(newTitle, newMessage, newActions);
+                    };
+                }
+            }
+        })();
+        
+        return componentHtml;
+    },
+    onButton: async (id: string, result: any, state?: any) => {
+        if (!state) {
+            return false;
+        }
+        
+        if (id === 'close' && state.resolve) {
+            state.resolve();
+            return true;
+        }
+        
+        return false;
+    }
+});
+
+export async function navigableInfoDialog(
+    title: string,
+    message: string,
+    actions: NavigableDialogAction[],
+    markdown: boolean = false
+): Promise<void> {
+    return new Promise((resolve) => {
+        const updateDialogRef: { current?: (title: string, message: string, actions: NavigableDialogAction[]) => void } = {};
+        
+        dialogService.open('navigable-info', {
+            title,
+            message,
+            actions,
+            markdown,
+            resolve,
+            updateDialogRef
+        });
+
+        const updateDialog = (newTitle: string, newMessage: string, newActions: NavigableDialogAction[]) => {
+            if (updateDialogRef.current) {
+                updateDialogRef.current(newTitle, newMessage, newActions);
+            }
+        };
+
+        (actions as any).updateDialog = updateDialog;
+    });
+}
+

package/src/dialogs/prompt-dialog.ts

@@ -0,0 +1,123 @@
+import { html, css, PropertyValues } from "lit";
+import { customElement, state, property } from "lit/decorators.js";
+import { KDialogContent } from "../parts/k-dialog-content";
+import { contributionRegistry } from "../core/contributionregistry";
+import { DIALOG_CONTRIBUTION_TARGET, OK_BUTTON, CANCEL_BUTTON, DialogContribution, dialogService } from "../core/dialogservice";
+
+@customElement('k-prompt-dialog-content')
+export class KPromptDialogContent extends KDialogContent {
+    @property({ type: String })
+    message: string = '';
+
+    @property({ type: String, attribute: 'default-value' })
+    defaultValue: string = '';
+
+    @property({ type: Boolean })
+    markdown: boolean = false;
+
+    @state()
+    private inputValue: string = '';
+
+    static styles = [
+        ...KDialogContent.styles,
+        css`
+            wa-input {
+                width: 100%;
+            }
+        `
+    ];
+
+    async firstUpdated(changedProperties: PropertyValues) {
+        super.firstUpdated(changedProperties);
+        this.inputValue = this.defaultValue;
+
+        await this.updateComplete;
+        const input = this.shadowRoot?.querySelector('wa-input');
+        if (input) {
+            const inputEl = (input as any).shadowRoot?.querySelector('input');
+            if (inputEl) {
+                inputEl.focus();
+                inputEl.select();
+            }
+        }
+    }
+
+    getResult(): string | null {
+        return this.inputValue;
+    }
+
+    private handleInput(e: Event) {
+        this.inputValue = (e.target as any).value;
+    }
+
+    private handleKeyDown(e: KeyboardEvent) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.dispatchEvent(new CustomEvent('dialog-ok', { bubbles: true, composed: true }));
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            this.dispatchEvent(new CustomEvent('dialog-cancel', { bubbles: true, composed: true }));
+        }
+    }
+
+    render() {
+        return html`
+            ${this.renderMessage(this.message, this.markdown)}
+            <wa-input
+                value="${this.inputValue}"
+                @input=${this.handleInput}
+                @keydown=${this.handleKeyDown}
+                autofocus
+            ></wa-input>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'k-prompt-dialog-content': KPromptDialogContent;
+    }
+}
+
+contributionRegistry.registerContribution(DIALOG_CONTRIBUTION_TARGET, {
+    id: 'prompt',
+    label: 'Input',
+    buttons: [OK_BUTTON, CANCEL_BUTTON],
+    component: (state?: any) => {
+        if (!state) {
+            return html`<div>Error: No prompt dialog state</div>`;
+        }
+        
+        return html`
+            <k-prompt-dialog-content 
+                .message="${state.message}"
+                .defaultValue="${state.defaultValue}"
+                .markdown="${state.markdown}"
+            ></k-prompt-dialog-content>
+        `;
+    },
+    onButton: async (id: string, result: any, state?: any) => {
+        if (!state) {
+            return true;
+        }
+        
+        if (id === 'ok') {
+            state.resolve(result || '');
+        } else {
+            state.resolve(null);
+        }
+        
+        return true;
+    }
+});
+
+export async function promptDialog(message: string, defaultValue: string = '', markdown: boolean = false): Promise<string | null> {
+    return new Promise((resolve) => {
+        dialogService.open('prompt', {
+            message,
+            defaultValue,
+            markdown,
+            resolve
+        });
+    });
+}

package/src/externals/lit.ts

@@ -0,0 +1,26 @@
+/**
+ * Lit library exports
+ * Centralized Lit imports for use across packages.
+ * This ensures a single source of truth for Lit dependencies.
+ */
+
+// Re-export everything from lit core
+export * from "lit";
+
+// Re-export decorators
+export * from "lit/decorators.js";
+
+// Re-export commonly used directives
+export * from "lit/directives/when.js";
+export * from "lit/directives/repeat.js";
+export * from "lit/directives/keyed.js";
+export * from "lit/directives/class-map.js";
+export * from "lit/directives/style-map.js";
+export * from "lit/directives/if-defined.js";
+export * from "lit/directives/guard.js";
+export * from "lit/directives/cache.js";
+export * from "lit/directives/unsafe-html.js";
+export * from "lit/directives/until.js";
+export * from "lit/directives/live.js";
+export * from "lit/directives/ref.js";
+

package/src/externals/third-party.ts

@@ -0,0 +1,9 @@
+/**
+ * Third-party library re-exports
+ * Centralized re-exports for commonly used third-party libraries.
+ * This ensures a single source of truth for these dependencies.
+ */
+
+// Re-export uuid (all exports including v4)
+export * from "uuid";
+

package/src/externals/webawesome.ts

@@ -0,0 +1,54 @@
+// unfortunately, webawesome has no all-in-one import, so we need to import each component individually
+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';
+import '@awesome.me/webawesome/dist/components/badge/badge.js';
+import '@awesome.me/webawesome/dist/components/breadcrumb/breadcrumb.js';
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import '@awesome.me/webawesome/dist/components/button-group/button-group.js';
+import '@awesome.me/webawesome/dist/components/callout/callout.js';
+import '@awesome.me/webawesome/dist/components/card/card.js';
+import '@awesome.me/webawesome/dist/components/carousel/carousel.js';
+import '@awesome.me/webawesome/dist/components/checkbox/checkbox.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';
+import '@awesome.me/webawesome/dist/components/details/details.js';
+import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
+import '@awesome.me/webawesome/dist/components/divider/divider.js';
+import '@awesome.me/webawesome/dist/components/drawer/drawer.js';
+import '@awesome.me/webawesome/dist/components/dropdown/dropdown.js';
+import '@awesome.me/webawesome/dist/components/format-bytes/format-bytes.js';
+import '@awesome.me/webawesome/dist/components/format-date/format-date.js';
+import '@awesome.me/webawesome/dist/components/format-number/format-number.js';
+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/mutation-observer/mutation-observer.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';
+import '@awesome.me/webawesome/dist/components/progress-ring/progress-ring.js';
+import '@awesome.me/webawesome/dist/components/qr-code/qr-code.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/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';
+import '@awesome.me/webawesome/dist/components/select/select.js';
+import '@awesome.me/webawesome/dist/components/skeleton/skeleton.js';
+import '@awesome.me/webawesome/dist/components/slider/slider.js';
+import '@awesome.me/webawesome/dist/components/spinner/spinner.js';
+import '@awesome.me/webawesome/dist/components/split-panel/split-panel.js';
+import '@awesome.me/webawesome/dist/components/switch/switch.js';
+import '@awesome.me/webawesome/dist/components/tab-group/tab-group.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/tooltip/tooltip.js';
+import '@awesome.me/webawesome/dist/components/tree/tree.js';
+import '@awesome.me/webawesome/dist/components/zoomable-frame/zoomable-frame.js';
+
+// Import default WebAwesome styles
+import '@awesome.me/webawesome/dist/styles/native.css';
+import '@awesome.me/webawesome/dist/styles/utilities.css';
+import '@awesome.me/webawesome/dist/styles/themes/default.css';

package/src/i18n/extensions.json

@@ -0,0 +1,39 @@
+{
+  "namespace": "extensions",
+  "en": {
+    "FILTER_PLACEHOLDER": "Filter extensions...",
+    "INSTALLED": "Installed",
+    "AVAILABLE": "Available",
+    "NO_MATCHES": "No extensions match \"{filterText}\"",
+    "EXTERNAL_EXTENSION": "External Extension",
+    "UNINSTALL": "Uninstall (requires restart)",
+    "REQUIRED_HINT": "This extension is required by the current app and cannot be uninstalled",
+    "INSTALL": "Install",
+    "EXPERIMENTAL": "This is an experimental extension!",
+    "VERSION": "Version:",
+    "AUTHOR": "Author:",
+    "DEPENDENCIES": "Dependencies",
+    "NOT_INSTALLED": "Not Installed",
+    "DEPENDENCIES_HINT": "Dependencies are automatically installed when this extension is enabled.",
+    "DISABLE_TITLE": "Disable this extension",
+    "ENABLE_TITLE": "Enable this extension"
+  },
+  "de": {
+    "FILTER_PLACEHOLDER": "Erweiterungen filtern...",
+    "INSTALLED": "Installiert",
+    "AVAILABLE": "Verfügbar",
+    "NO_MATCHES": "Keine Erweiterungen entsprechen \"{filterText}\"",
+    "EXTERNAL_EXTENSION": "Externe Erweiterung",
+    "UNINSTALL": "Deinstallieren (Neustart erforderlich)",
+    "REQUIRED_HINT": "Diese Erweiterung ist für die aktuelle App erforderlich und kann nicht deinstalliert werden",
+    "INSTALL": "Installieren",
+    "EXPERIMENTAL": "Dies ist eine experimentelle Erweiterung!",
+    "VERSION": "Version:",
+    "AUTHOR": "Autor:",
+    "DEPENDENCIES": "Abhängigkeiten",
+    "NOT_INSTALLED": "Nicht installiert",
+    "DEPENDENCIES_HINT": "Abhängigkeiten werden automatisch installiert, wenn diese Erweiterung aktiviert wird.",
+    "DISABLE_TITLE": "Diese Erweiterung deaktivieren",
+    "ENABLE_TITLE": "Diese Erweiterung aktivieren"
+  }
+}

package/src/i18n/fastviews.json

@@ -0,0 +1,10 @@
+{
+    "namespace": "fastviews",
+    "en": {
+        "FAST_VIEWS": "Fast Views"
+    },
+    "de": {
+        "FAST_VIEWS": "Schnellansichten"
+    }
+}
+