@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11 → 1.0.0

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

@@ -1,551 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}