@nuraly/lumenui 0.1.0

package/dist/src/components/db-connection-select/bundle.js

@@ -0,0 +1,308 @@
+import{css as t,LitElement as e,html as i,nothing as s}from"lit";import{property as r,state as o,customElement as a}from"lit/decorators.js";
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */var n=function(t,e,i,s){for(var r,o=arguments.length,a=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,n=t.length-1;n>=0;n--)(r=t[n])&&(a=(o<3?r(a):o>3?r(e,i,a):r(e,i))||a);return o>3&&a&&Object.defineProperty(e,i,a),a};let l=class extends e{constructor(){super(...arguments),this.dbType="postgresql",this.value="",this.placeholder="Select database connection...",this.entries=[],this.loading=!1,this.testResult=null,this.showCreateForm=!1,this.creating=!1,this.testing=!1,this.error="",this.newConnectionName="",this.newHost="localhost",this.newPort=5432,this.newDatabase="",this.newUsername="",this.newPassword="",this.newSsl=!1}connectedCallback(){super.connectedCallback(),this.updateDefaultPort()}updated(t){t.has("dbType")&&this.updateDefaultPort()}updateDefaultPort(){this.newPort={postgresql:5432,mysql:3306,mongodb:27017,mssql:1433,oracle:1521,sqlite:0}[this.dbType]||5432}handleSelectChange(t){var e;const i=(null===(e=t.detail)||void 0===e?void 0:e.value)||"";this.value=i,this.dispatchEvent(new CustomEvent("value-change",{detail:{value:i},bubbles:!0,composed:!0}))}toggleCreateForm(){this.showCreateForm=!this.showCreateForm,this.showCreateForm||this.resetCreateForm()}resetCreateForm(){this.newConnectionName="",this.newHost="localhost",this.updateDefaultPort(),this.newDatabase="",this.newUsername="",this.newPassword="",this.newSsl=!1,this.error="",this.testing=!1,this.creating=!1}handleTestConnection(){this.testing=!0,this.dispatchEvent(new CustomEvent("test-connection",{detail:{type:this.dbType,host:this.newHost,port:this.newPort,database:this.newDatabase,username:this.newUsername,password:this.newPassword,ssl:this.newSsl},bubbles:!0,composed:!0}))}notifyTestResult(t){this.testResult=t,this.testing=!1}handleCreate(){if(!this.newConnectionName||!this.newHost||!this.newDatabase)return;this.creating=!0,this.error="";const t=`database/${this.newConnectionName}`,e={type:this.dbType,host:this.newHost,port:this.newPort,database:this.newDatabase,username:this.newUsername,password:this.newPassword,ssl:this.newSsl};this.dispatchEvent(new CustomEvent("create-entry",{detail:{keyPath:t,value:JSON.stringify(e),scope:this.dbType,isSecret:!0},bubbles:!0,composed:!0}))}notifyCreateSuccess(t){this.value=t,this.showCreateForm=!1,this.resetCreateForm(),this.dispatchEvent(new CustomEvent("value-change",{detail:{value:t},bubbles:!0,composed:!0}))}notifyCreateError(t){this.error=t,this.creating=!1}getDbTypeLabel(){return{postgresql:"PostgreSQL",mysql:"MySQL",mongodb:"MongoDB",mssql:"SQL Server",oracle:"Oracle",sqlite:"SQLite"}[this.dbType]||this.dbType}renderCreateForm(){const t=this.newConnectionName&&this.newHost&&this.newDatabase&&this.newUsername;return i`
+      <div class="create-form">
+        <div class="create-form-header">
+          <span class="create-form-title">Add ${this.getDbTypeLabel()} Connection</span>
+        </div>
+
+        <div class="form-field">
+          <label>Connection Name</label>
+          <nr-input
+            .value=${this.newConnectionName}
+            placeholder="e.g., production, dev"
+            @nr-input=${t=>{var e;return this.newConnectionName=(null===(e=t.detail)||void 0===e?void 0:e.value)||""}}
+          ></nr-input>
+        </div>
+
+        <div class="form-row">
+          <div class="form-field">
+            <label>Host</label>
+            <nr-input
+              .value=${this.newHost}
+              placeholder="localhost"
+              @nr-input=${t=>{var e;return this.newHost=(null===(e=t.detail)||void 0===e?void 0:e.value)||""}}
+            ></nr-input>
+          </div>
+
+          <div class="form-field">
+            <label>Port</label>
+            <nr-input
+              type="number"
+              .value=${String(this.newPort)}
+              placeholder="${this.newPort}"
+              @nr-input=${t=>{var e;return this.newPort=Number.parseInt(null===(e=t.detail)||void 0===e?void 0:e.value)||this.newPort}}
+            ></nr-input>
+          </div>
+        </div>
+
+        <div class="form-field">
+          <label>Database</label>
+          <nr-input
+            .value=${this.newDatabase}
+            placeholder="database name"
+            @nr-input=${t=>{var e;return this.newDatabase=(null===(e=t.detail)||void 0===e?void 0:e.value)||""}}
+          ></nr-input>
+        </div>
+
+        <div class="form-row">
+          <div class="form-field">
+            <label>Username</label>
+            <nr-input
+              .value=${this.newUsername}
+              placeholder="username"
+              @nr-input=${t=>{var e;return this.newUsername=(null===(e=t.detail)||void 0===e?void 0:e.value)||""}}
+            ></nr-input>
+          </div>
+
+          <div class="form-field">
+            <label>Password</label>
+            <nr-input
+              type="password"
+              .value=${this.newPassword}
+              placeholder="password"
+              @nr-input=${t=>{var e;return this.newPassword=(null===(e=t.detail)||void 0===e?void 0:e.value)||""}}
+            ></nr-input>
+          </div>
+        </div>
+
+        <div class="form-field">
+          <div class="checkbox-field">
+            <input
+              type="checkbox"
+              id="ssl-checkbox"
+              .checked=${this.newSsl}
+              @change=${t=>this.newSsl=t.target.checked}
+            />
+            <label for="ssl-checkbox">Use SSL</label>
+          </div>
+        </div>
+
+        ${this.testResult?i`
+          <div class="test-result ${this.testResult.success?"success":"error"}">
+            ${this.testResult.message}
+          </div>
+        `:s}
+
+        ${this.error?i`<div class="error-message">${this.error}</div>`:s}
+
+        <div class="form-actions">
+          <button
+            class="btn btn-test"
+            ?disabled=${!t||this.testing}
+            @click=${this.handleTestConnection}
+          >
+            ${this.testing?"Testing...":"Test Connection"}
+          </button>
+          <button
+            class="btn btn-primary"
+            ?disabled=${!t||this.creating}
+            @click=${this.handleCreate}
+          >
+            ${this.creating?"Creating...":"Create"}
+          </button>
+          <button
+            class="btn btn-secondary"
+            @click=${this.toggleCreateForm}
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    `}renderAddButton(){return i`
+      <div class="add-btn-container">
+        <button class="add-btn" @click=${this.toggleCreateForm}>
+          <nr-icon name="plus" size="small"></nr-icon>
+          Add new ${this.getDbTypeLabel()} connection
+        </button>
+      </div>
+    `}render(){const t=this.entries.filter(t=>t.isSecret).map(t=>({label:t.keyPath.replace("database/",""),value:t.keyPath,icon:"database"}));return i`
+      <nr-select
+        .value=${this.value}
+        .options=${t}
+        placeholder=${this.placeholder}
+        .noOptionsMessage=${"No connections for ${this.getDbTypeLabel()}"}
+        @nr-change=${this.handleSelectChange}
+      >
+        <div slot="after-options">
+          ${this.loading?i`<div class="loading">Loading...</div>`:s}
+          ${this.showCreateForm?this.renderCreateForm():this.renderAddButton()}
+        </div>
+      </nr-select>
+    `}};l.styles=t`
+    :host {
+      display: block;
+    }
+
+    .create-form {
+      padding: 12px;
+      border-top: 1px solid var(--border-color, #e5e7eb);
+      background: var(--bg-secondary, #f9fafb);
+    }
+
+    .create-form-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .create-form-title {
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--text-primary, #1f2937);
+    }
+
+    .form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+
+    .form-field {
+      margin-bottom: 12px;
+    }
+
+    .form-field.full-width {
+      grid-column: span 2;
+    }
+
+    .form-field label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-secondary, #6b7280);
+      margin-bottom: 4px;
+    }
+
+    .form-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 12px;
+    }
+
+    .btn {
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      transition: all 0.2s;
+    }
+
+    .btn-primary {
+      background: var(--primary-color, #6366f1);
+      color: white;
+    }
+
+    .btn-primary:hover {
+      background: #4f46e5;
+    }
+
+    .btn-primary:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .btn-secondary {
+      background: var(--bg-secondary, #f3f4f6);
+      color: var(--text-primary, #1f2937);
+      border: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .btn-secondary:hover {
+      background: #e5e7eb;
+    }
+
+    .btn-test {
+      background: var(--bg-tertiary, #f3f4f6);
+      color: var(--text-secondary, #6b7280);
+      border: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .btn-test:hover {
+      border-color: var(--primary-color, #6366f1);
+      color: var(--primary-color, #6366f1);
+    }
+
+    .add-btn-container {
+      padding: 8px 12px;
+      border-top: 1px solid var(--border-color, #e5e7eb);
+    }
+
+    .add-btn {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: 100%;
+      padding: 8px 12px;
+      background: transparent;
+      border: 1px dashed var(--border-color, #d1d5db);
+      border-radius: 6px;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    .add-btn:hover {
+      border-color: var(--primary-color, #6366f1);
+      color: var(--primary-color, #6366f1);
+      background: #f5f3ff;
+    }
+
+    .error-message {
+      color: #dc2626;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .success-message {
+      color: #16a34a;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+
+    .loading {
+      padding: 12px;
+      text-align: center;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+    }
+
+    .test-result {
+      padding: 8px 12px;
+      border-radius: 6px;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+
+    .test-result.success {
+      background: #dcfce7;
+      color: #166534;
+    }
+
+    .test-result.error {
+      background: #fef2f2;
+      color: #991b1b;
+    }
+
+    .checkbox-field {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .checkbox-field input {
+      width: 16px;
+      height: 16px;
+    }
+
+    .checkbox-field label {
+      margin-bottom: 0;
+    }
+  `,n([r({type:String})],l.prototype,"dbType",void 0),n([r({type:String})],l.prototype,"value",void 0),n([r({type:String})],l.prototype,"placeholder",void 0),n([r({attribute:!1})],l.prototype,"entries",void 0),n([r({type:Boolean})],l.prototype,"loading",void 0),n([r({attribute:!1})],l.prototype,"testResult",void 0),n([o()],l.prototype,"showCreateForm",void 0),n([o()],l.prototype,"creating",void 0),n([o()],l.prototype,"testing",void 0),n([o()],l.prototype,"error",void 0),n([o()],l.prototype,"newConnectionName",void 0),n([o()],l.prototype,"newHost",void 0),n([o()],l.prototype,"newPort",void 0),n([o()],l.prototype,"newDatabase",void 0),n([o()],l.prototype,"newUsername",void 0),n([o()],l.prototype,"newPassword",void 0),n([o()],l.prototype,"newSsl",void 0),l=n([a("nr-db-connection-select")],l);export{l as NrDbConnectionSelect};

package/dist/src/components/db-connection-select/db-connection-select.component.d.ts

@@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import type { DatabaseType } from '../canvas/data-node/data-node.types.js';
+/**
+ * Minimal KV entry shape this component needs.
+ */
+export interface KvConnectionEntry {
+    keyPath: string;
+    value?: any;
+    isSecret: boolean;
+}
+/**
+ * Database Connection Select Component
+ *
+ * A select component for choosing database connections.
+ * Includes inline creation of new connections with connection testing.
+ *
+ * Data-in / events-out:
+ * - Host provides `entries`, `loading`, and `testResult`
+ * - Component fires `create-entry` when the user submits the create form
+ * - Component fires `test-connection` when the user clicks test
+ * - Component fires `value-change` when the selection changes
+ *
+ * @example
+ * ```html
+ * <nr-db-connection-select
+ *   dbType="postgresql"
+ *   .entries=${connectionEntries}
+ *   value="postgresql/my-db"
+ *   @value-change=${(e) => console.log(e.detail.value)}
+ *   @create-entry=${(e) => handleCreate(e.detail)}
+ *   @test-connection=${(e) => handleTest(e.detail)}
+ * ></nr-db-connection-select>
+ * ```
+ *
+ * @fires value-change - Fired when selection changes
+ * @fires create-entry - Fired when user submits the create form
+ * @fires test-connection - Fired when user clicks Test Connection
+ */
+export declare class NrDbConnectionSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Database type/scope to filter KV entries by */
+    dbType: DatabaseType;
+    /** Currently selected connection path */
+    value: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Entries provided by the host */
+    entries: KvConnectionEntry[];
+    /** Loading state provided by the host */
+    loading: boolean;
+    /** Test result pushed by the host */
+    testResult: {
+        success: boolean;
+        message: string;
+    } | null;
+    private showCreateForm;
+    private creating;
+    private testing;
+    private error;
+    private newConnectionName;
+    private newHost;
+    private newPort;
+    private newDatabase;
+    private newUsername;
+    private newPassword;
+    private newSsl;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private updateDefaultPort;
+    private handleSelectChange;
+    private toggleCreateForm;
+    private resetCreateForm;
+    private handleTestConnection;
+    /**
+     * Called by host after test-connection completes.
+     */
+    notifyTestResult(result: {
+        success: boolean;
+        message: string;
+    }): void;
+    private handleCreate;
+    /**
+     * Called by host after create-entry succeeds.
+     */
+    notifyCreateSuccess(keyPath: string): void;
+    /**
+     * Called by host if create-entry fails.
+     */
+    notifyCreateError(message: string): void;
+    private getDbTypeLabel;
+    private renderCreateForm;
+    private renderAddButton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-db-connection-select': NrDbConnectionSelect;
+    }
+}
+//# sourceMappingURL=db-connection-select.component.d.ts.map