@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.2

package/dist/components/table/data-table.js

@@ -0,0 +1,551 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { resetStyles } from '../../styles/reset.js';
+let StDataTable = class StDataTable extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Array defining table headers, keys, and sortability.
+         */
+        this.columns = [];
+        /**
+         * Array of row data objects rendered in the table.
+         */
+        this.data = [];
+        /**
+         * Total number of rows available on the server (used for pagination).
+         */
+        this.totalRows = 0;
+        /**
+         * Current page number (1-indexed).
+         */
+        this.page = 1;
+        /**
+         * Number of rows per page.
+         */
+        this.pageSize = 10;
+        /**
+         * Enables holding 'Shift' to sort by multiple columns sequentially.
+         */
+        this.multiSort = false;
+        /**
+         * Displays loading skeleton rows and locks controls.
+         */
+        this.loading = false;
+        // --- Internal State ---
+        this.internalColumns = [];
+        this.sortState = [];
+        this.searchQuery = '';
+        this.showColumnMenu = false;
+        this.draggedColumnKey = null;
+        this.handleOutsideClick = (e) => {
+            const target = e.target;
+            if (!target.closest('.columns-toggle-wrapper')) {
+                this.showColumnMenu = false;
+            }
+        };
+    }
+    willUpdate(changedProperties) {
+        if (changedProperties.has('columns') && this.columns.length > 0) {
+            if (this.internalColumns.length === 0) {
+                this.internalColumns = [...this.columns];
+            }
+        }
+    }
+    firstUpdated() {
+        if (this.internalColumns.length === 0 && this.columns.length > 0) {
+            this.internalColumns = [...this.columns];
+        }
+        this.emitChange();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick);
+        super.disconnectedCallback();
+    }
+    emitChange() {
+        this.dispatchEvent(new CustomEvent('st-data-change', {
+            detail: {
+                page: this.page,
+                pageSize: this.pageSize,
+                search: this.searchQuery,
+                sort: this.sortState
+            },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleSearchInput(e) {
+        if (this.loading)
+            return;
+        const val = e.target.value;
+        window.clearTimeout(this.searchTimeout);
+        this.searchTimeout = window.setTimeout(() => {
+            this.searchQuery = val;
+            this.page = 1;
+            this.emitChange();
+        }, 350);
+    }
+    handleSort(key, e) {
+        if (this.loading)
+            return;
+        const isShift = e.shiftKey && this.multiSort;
+        const existingIndex = this.sortState.findIndex(s => s.key === key);
+        let newDirection = 'asc';
+        if (existingIndex !== -1) {
+            newDirection = this.sortState[existingIndex].direction === 'asc' ? 'desc' : null;
+        }
+        let newSortState = [...this.sortState];
+        if (isShift) {
+            if (newDirection) {
+                if (existingIndex !== -1) {
+                    newSortState[existingIndex].direction = newDirection;
+                }
+                else {
+                    newSortState.push({ key, direction: newDirection });
+                }
+            }
+            else {
+                newSortState.splice(existingIndex, 1);
+            }
+        }
+        else {
+            if (newDirection) {
+                newSortState = [{ key, direction: newDirection }];
+            }
+            else {
+                newSortState = [];
+            }
+        }
+        this.sortState = newSortState;
+        this.page = 1;
+        this.emitChange();
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.totalRows / this.pageSize));
+    }
+    prevPage() {
+        if (!this.loading && this.page > 1) {
+            this.page--;
+            this.emitChange();
+        }
+    }
+    nextPage() {
+        if (!this.loading && this.page < this.totalPages) {
+            this.page++;
+            this.emitChange();
+        }
+    }
+    toggleColumnVisibility(key) {
+        this.internalColumns = this.internalColumns.map(col => col.key === key ? { ...col, hidden: !col.hidden } : col);
+    }
+    handleDragStart(e, key) {
+        this.draggedColumnKey = key;
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', key);
+        }
+    }
+    handleDragOver(e) {
+        e.preventDefault();
+        if (e.dataTransfer)
+            e.dataTransfer.dropEffect = 'move';
+        const target = e.target.closest('th');
+        if (target)
+            target.classList.add('drag-over');
+    }
+    handleDragLeave(e) {
+        const target = e.target.closest('th');
+        if (target)
+            target.classList.remove('drag-over');
+    }
+    handleDrop(e, targetKey) {
+        e.preventDefault();
+        const targetEl = e.target.closest('th');
+        if (targetEl)
+            targetEl.classList.remove('drag-over');
+        if (!this.draggedColumnKey || this.draggedColumnKey === targetKey)
+            return;
+        const newCols = [...this.internalColumns];
+        const fromIndex = newCols.findIndex(c => c.key === this.draggedColumnKey);
+        const toIndex = newCols.findIndex(c => c.key === targetKey);
+        const [movedCol] = newCols.splice(fromIndex, 1);
+        newCols.splice(toIndex, 0, movedCol);
+        this.internalColumns = newCols;
+        this.draggedColumnKey = null;
+    }
+    renderSortIcon(key) {
+        const sortIndex = this.sortState.findIndex(s => s.key === key);
+        if (sortIndex === -1) {
+            return html `<svg class="sort-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>`;
+        }
+        const sortConfig = this.sortState[sortIndex];
+        const icon = sortConfig.direction === 'asc'
+            ? html `<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`
+            : html `<svg class="sort-icon active" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`;
+        const priority = this.sortState.length > 1 && this.multiSort
+            ? html `<span class="sort-priority">${sortIndex + 1}</span>`
+            : '';
+        return html `${icon}${priority}`;
+    }
+    render() {
+        const visibleColumns = this.internalColumns.filter(c => !c.hidden);
+        const skeletonRowsCount = Math.min(this.pageSize, 5);
+        return html `
+      <!-- Toolbar -->
+      <div class="toolbar">
+        <div class="search-wrapper">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+          <input 
+            type="text" 
+            class="search-input" 
+            placeholder="Search..." 
+            ?disabled=${this.loading}
+            @input=${this.handleSearchInput}
+          >
+        </div>
+
+        <div class="columns-toggle-wrapper">
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            @click=${() => this.showColumnMenu = !this.showColumnMenu}
+          >
+            Columns
+          </st-button>
+          
+          ${this.showColumnMenu ? html `
+            <div class="columns-menu">
+              ${this.internalColumns.map(col => html `
+                <label class="column-option">
+                  <input 
+                    type="checkbox" 
+                    .checked=${!col.hidden} 
+                    @change=${() => this.toggleColumnVisibility(col.key)}
+                  >
+                  ${col.header}
+                </label>
+              `)}
+            </div>
+          ` : ''}
+        </div>
+      </div>
+
+      <!-- Table -->
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              ${visibleColumns.map(col => html `
+                <th 
+                  draggable="true"
+                  @dragstart=${(e) => this.handleDragStart(e, col.key)}
+                  @dragover=${this.handleDragOver}
+                  @dragleave=${this.handleDragLeave}
+                  @drop=${(e) => this.handleDrop(e, col.key)}
+                >
+                  <div class="th-content">
+                    <svg class="drag-handle" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+                    
+                    <div 
+                      class=${classMap({ 'sortable-header': !!col.sortable })} 
+                      @click=${(e) => col.sortable && this.handleSort(col.key, e)}
+                    >
+                      ${col.header}
+                      ${col.sortable ? this.renderSortIcon(col.key) : ''}
+                    </div>
+                  </div>
+                </th>
+              `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.loading ? html `
+              ${Array.from({ length: skeletonRowsCount }).map(() => html `
+                <tr>
+                  ${visibleColumns.map(() => html `
+                    <td><st-skeleton variant="text" width="75%"></st-skeleton></td>
+                  `)}
+                </tr>
+              `)}
+            ` : this.data.length === 0 ? html `
+              <tr>
+                <td colspan=${visibleColumns.length} style="text-align: center; padding: 2rem;">No results found.</td>
+              </tr>
+            ` : this.data.map(row => html `
+              <tr>
+                ${visibleColumns.map(col => html `
+                  <td>${row[col.key]}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Pagination -->
+      <div class="pagination">
+        <div class="pagination-info">
+          Page ${this.page} of ${this.totalPages} (${this.totalRows} total items)
+        </div>
+        <div class="pagination-controls">
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            ?disabled=${this.loading || this.page === 1}
+            @click=${this.prevPage}
+          >
+            Prev
+          </st-button>
+          <st-button 
+            variant="secondary" 
+            size="sm" 
+            ?disabled=${this.loading || this.page === this.totalPages}
+            @click=${this.nextPage}
+          >
+            Next
+          </st-button>
+        </div>
+      </div>
+    `;
+    }
+};
+StDataTable.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: block;
+        width: 100%;
+        font-family: var(--st-font-family, inherit);
+      }
+
+      .toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: var(--st-spacing-md);
+        margin-bottom: var(--st-spacing-md);
+        flex-wrap: wrap;
+      }
+
+      .search-wrapper {
+        flex: 1;
+        min-width: 250px;
+        position: relative;
+      }
+
+      .search-input {
+        width: 100%;
+        padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background-color: var(--st-color-surface);
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-sm);
+      }
+
+      .search-input:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      .search-icon {
+        position: absolute;
+        left: 0.75rem;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1rem;
+        height: 1rem;
+        color: var(--st-color-text-muted);
+      }
+
+      .columns-toggle-wrapper {
+        position: relative;
+      }
+
+      .columns-menu {
+        position: absolute;
+        top: calc(100% + 0.5rem);
+        right: 0;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        padding: var(--st-spacing-sm);
+        min-width: 200px;
+        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+        z-index: 10;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+
+      .column-option {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        font-size: var(--st-font-size-sm);
+        cursor: pointer;
+        padding: 0.25rem;
+      }
+
+      .table-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: var(--st-font-size-sm);
+        background-color: var(--st-color-surface);
+      }
+
+      th {
+        font-weight: 600;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        border-bottom: 2px solid var(--st-color-border);
+        color: var(--st-color-text-muted);
+        white-space: nowrap;
+        background-color: var(--st-color-surface-muted, #f8fafc);
+        user-select: none;
+      }
+
+      th[draggable="true"] {
+        cursor: grab;
+      }
+
+      th[draggable="true"]:active {
+        cursor: grabbing;
+      }
+
+      th.drag-over {
+        border-left: 2px solid var(--st-color-primary);
+      }
+
+      .th-content {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+
+      .sortable-header {
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+      }
+
+      .sortable-header:hover {
+        color: var(--st-color-text);
+      }
+
+      .sort-icon {
+        width: 1rem;
+        height: 1rem;
+        color: var(--st-color-text-muted);
+      }
+
+      .sort-icon.active {
+        color: var(--st-color-primary);
+      }
+
+      .sort-priority {
+        font-size: 0.7rem;
+        background: var(--st-color-border);
+        color: var(--st-color-text);
+        border-radius: 50%;
+        width: 1.1rem;
+        height: 1.1rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      td {
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        border-bottom: 1px solid var(--st-color-border);
+        color: var(--st-color-text);
+      }
+
+      tbody tr:last-child td {
+        border-bottom: none;
+      }
+
+      tbody tr:hover {
+        background-color: var(--st-color-surface-hover, #f1f5f9);
+      }
+
+      .pagination {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--st-spacing-md) 0;
+        font-size: var(--st-font-size-sm);
+        color: var(--st-color-text-muted);
+      }
+
+      .pagination-controls {
+        display: flex;
+        gap: var(--st-spacing-sm);
+      }
+
+      .drag-handle {
+        opacity: 0.3;
+        cursor: grab;
+      }
+
+      .drag-handle:hover {
+        opacity: 0.7;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], StDataTable.prototype, "columns", void 0);
+__decorate([
+    property({ type: Array })
+], StDataTable.prototype, "data", void 0);
+__decorate([
+    property({ type: Number, attribute: 'total-rows' })
+], StDataTable.prototype, "totalRows", void 0);
+__decorate([
+    property({ type: Number })
+], StDataTable.prototype, "page", void 0);
+__decorate([
+    property({ type: Number, attribute: 'page-size' })
+], StDataTable.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'multi-sort' })
+], StDataTable.prototype, "multiSort", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StDataTable.prototype, "loading", void 0);
+__decorate([
+    state()
+], StDataTable.prototype, "internalColumns", void 0);
+__decorate([
+    state()
+], StDataTable.prototype, "sortState", void 0);
+__decorate([
+    state()
+], StDataTable.prototype, "searchQuery", void 0);
+__decorate([
+    state()
+], StDataTable.prototype, "showColumnMenu", void 0);
+StDataTable = __decorate([
+    customElement('st-data-table')
+], StDataTable);
+export { StDataTable };

package/dist/components/table/table.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export type TableMode = 'horizontal' | 'vertical';
+export interface TableColumn {
+    header: string;
+    key: string;
+}
+export declare class StTable extends LitElement {
+    columns: TableColumn[];
+    data: Record<string, any>[];
+    mode: TableMode;
+    striped: boolean;
+    hoverable: boolean;
+    dense: boolean;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-table': StTable;
+    }
+}
+//# sourceMappingURL=table.d.ts.map

package/dist/components/table/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAED,qBACa,OAAQ,SAAQ,UAAU;IACV,OAAO,EAAE,WAAW,EAAE,CAAM;IAC5B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAM;IAEjB,IAAI,EAAE,SAAS,CAAgB;IAC9B,OAAO,UAAS;IAChB,SAAS,UAAS;IAClB,KAAK,UAAS;IAE1D,MAAM,CAAC,MAAM,4BAsGX;IAEF,MAAM,yCAqBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}