@sellmate/design-system 1.0.75 → 1.0.76

package/dist/esm/sd-thead.entry.js

@@ -1,177 +0,0 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-Bp7ytJz5.js';
-import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-
-const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:36px}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #E1E1E1;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:#F5FAFF;z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:#F5FAFF;z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.th__resizer--left{right:auto;left:0}`;
-
-const SdThead = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    columns;
-    selectable;
-    resizable;
-    stickyColumn;
-    stickyHeader;
-    scrolledLeft;
-    scrolledRight;
-    rows = [];
-    columnWidths = [];
-    tableId = '';
-    _columns = [];
-    _selectable = false;
-    _resizable = false;
-    _stickyColumn = { left: 0, right: 0 };
-    _stickyHeader = false;
-    _scrolledLeft = false;
-    _scrolledRight = false;
-    tableEl = null;
-    handleColumnsChange(newCols) {
-        if (Array.isArray(newCols) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
-        }
-    }
-    componentWillLoad() {
-        this.syncTableContext();
-        this.columnWidths = Array.isArray(this.columnWidths) ? this.columnWidths : [];
-        this.resolveConfig();
-        if ((this.columnWidths ?? []).length === 0) {
-            this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
-        }
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-        this.resolveConfig();
-    }
-    syncTableContext() {
-        const table = this.el.closest('sd-table');
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    resolveConfig() {
-        const config = this.tableEl?.getConfigSync?.();
-        const resolvedColumns = Array.isArray(this.columns)
-            ? this.columns
-            : Array.isArray(config?.columns)
-                ? config.columns
-                : [];
-        this._columns = resolvedColumns;
-        this._selectable = this.selectable ?? config?.selectable ?? false;
-        this._resizable = this.resizable ?? config?.resizable ?? false;
-        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
-        this._stickyHeader = this.stickyHeader ?? config?.stickyHeader ?? false;
-        this._scrolledLeft = this.scrolledLeft ?? config?.scrolledLeft ?? false;
-        this._scrolledRight = this.scrolledRight ?? config?.scrolledRight ?? false;
-        if (Array.isArray(config?.columnWidths) && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = [...config.columnWidths];
-        }
-        if (!Array.isArray(this.columnWidths)) {
-            this.columnWidths = [];
-        }
-    }
-    async refreshConfig() {
-        this.resolveConfig();
-    }
-    async setColumnWidths(widths) {
-        this.columnWidths = Array.isArray(widths) ? widths : [];
-    }
-    async refreshSelection() {
-        const checkbox = this.el.querySelector('sd-checkbox');
-        if (checkbox) {
-            checkbox.value = this.getIsAllChecked();
-        }
-    }
-    get visibleColumns() {
-        return this._columns.filter(col => col.visible !== false);
-    }
-    getStickyStyle(colIdx) {
-        if (this.tableEl?.getStickyStyleSync) {
-            return this.tableEl.getStickyStyleSync(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        return {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
-        };
-    }
-    handleResize(index, event, reversed = false) {
-        if (this.tableEl?.handleResize) {
-            this.tableEl.handleResize(index, event, reversed);
-        }
-    }
-    handleSelectAll(checked) {
-        const currentState = this.getIsAllChecked();
-        const nextChecked = currentState === null ? false : !!checked;
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        if (this.tableEl?.toggleSelectAllSync) {
-            this.tableEl.toggleSelectAllSync(nextChecked, safeRows);
-        }
-    }
-    getIsAllChecked() {
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        if (this.tableEl?.getIsAllCheckedSync && safeRows.length > 0) {
-            return this.tableEl.getIsAllCheckedSync(safeRows);
-        }
-        return false;
-    }
-    render() {
-        const safeRows = Array.isArray(this.rows) ? this.rows : [];
-        const stickyLeftCount = this._stickyColumn.left || 0;
-        const stickyRightCount = this._stickyColumn.right || 0;
-        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
-        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: '2358499ef65d88005d03b1246604c0fd8eefdde1', slot: `${this.tableId}-head` }, h("thead", { key: '49bb43a19aeb83f3a60367b26dbb6535ebcec743', class: {
-                'thead': true,
-                'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: 'cd6388d79e9a4a5d9edbbda05601abbbefcb1ff4', class: "tr" }, this._selectable && (h("th", { key: 'fa09e82368d45e9fb1d32838ef44e609c698609d', class: {
-                'th': true,
-                'th--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': stickyLeftCount === 0,
-                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '5ab4861aecfac9495101363d5bd809d077c7dbc3', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
-                'th': true,
-                [`${col.thClass}`]: Boolean(col.thClass),
-                'sticky-left': true,
-                'sticky-left-edge': idx === stickyLeftCount - 1,
-                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-            }, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))))), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + relativeIdx;
-            return (h("th", { key: col.name, class: {
-                    th: true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
-        }), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            return (h("th", { key: col.name, class: {
-                    'th': true,
-                    [`${col.thClass}`]: Boolean(col.thClass),
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                }, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, h("div", { class: `th__content th__content--${col.align || 'left'}` }, h("div", { class: "th__content--label" }, col.label), col.usePageMoveIcon && h("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (h("sd-tooltip", { ...col.tooltipOptions }, h("div", { slot: "content" }, col.tooltip.map(text => (h("p", null, text))))))), this._resizable && (h("div", { class: "th__resizer th__resizer--left", onMouseDown: (evt) => this.handleResize(actualColIdx, evt, true) }))));
-        })))));
-    }
-    static get watchers() { return {
-        "columns": [{
-                "handleColumnsChange": 0
-            }]
-    }; }
-};
-SdThead.style = sdTheadCss();
-
-export { SdThead as sd_thead };

package/dist/esm/sd-tr.entry.js

@@ -1,169 +0,0 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-Bp7ytJz5.js';
-import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
-
-const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.td{display:table-cell;height:44px;padding:0 16px;border-bottom:1px solid #E1E1E1;background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}`;
-
-const SdTr = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    get el() { return getElement(this); }
-    columns;
-    selectable;
-    stickyColumn;
-    rowKey = '';
-    row = {};
-    tableId = '';
-    columnWidths = [];
-    isVisible = true;
-    _columns = [];
-    _selectable = false;
-    _stickyColumn = { left: 0, right: 0 };
-    _scrolledLeft = false;
-    _scrolledRight = false;
-    tableEl = null;
-    componentWillLoad() {
-        this.syncTableContext();
-        this.columnWidths = this.columnWidths ?? [];
-        this.resolveConfig();
-        this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
-        this.updateVisibilitySync();
-    }
-    componentDidLoad() {
-        this.syncTableContext();
-    }
-    syncTableContext() {
-        const table = this.el.closest('sd-table');
-        this.tableEl = table;
-        const fromMethod = table?.getTableIdSync?.();
-        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
-        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
-            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
-            '';
-        if (resolvedTableId && resolvedTableId !== this.tableId) {
-            this.tableId = resolvedTableId;
-        }
-    }
-    resolveConfig() {
-        const config = this.tableEl?.getConfigSync?.();
-        this._columns = this.columns ?? config?.columns ?? [];
-        this._selectable = this.selectable ?? config?.selectable ?? false;
-        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
-        this._scrolledLeft = config?.scrolledLeft ?? false;
-        this._scrolledRight = config?.scrolledRight ?? false;
-        if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
-            this.columnWidths = [...config.columnWidths];
-        }
-    }
-    async refreshConfig() {
-        this.resolveConfig();
-    }
-    async updateVisibility() {
-        this.updateVisibilitySync();
-    }
-    updateVisibilitySync() {
-        const rowIndex = parseInt(this.rowKey, 10);
-        const pageInfo = this.tableEl?.getPaginationInfoSync?.();
-        if (!pageInfo) {
-            this.isVisible = true;
-            return;
-        }
-        this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
-    }
-    async setColumnWidths(widths) {
-        this.columnWidths = widths;
-    }
-    async refreshSelection() {
-        const checkbox = this.el.querySelector('sd-checkbox');
-        if (checkbox) {
-            checkbox.value = this.isSelected();
-        }
-    }
-    get visibleColumns() {
-        return this._columns.filter(col => col.visible !== false);
-    }
-    formatValue(value) {
-        if (value === null || value === undefined) {
-            return '';
-        }
-        if (typeof value === 'number') {
-            return value.toLocaleString();
-        }
-        return String(value);
-    }
-    getCellValue(column) {
-        const { field, format, name } = column;
-        const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
-        return format ? format(value, this.row) : this.formatValue(value);
-    }
-    getStickyStyle(colIdx) {
-        if (this.tableEl?.getStickyStyleSync) {
-            return this.tableEl.getStickyStyleSync(colIdx);
-        }
-        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
-        const rightOffset = this.columnWidths
-            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
-            .reduce((a, b) => a + b, 0);
-        return {
-            '--sticky-left-offset': `${leftOffset}px`,
-            '--sticky-right-offset': `${rightOffset}px`,
-            'width': `${this.columnWidths[colIdx]}px`,
-            'minWidth': `${this.columnWidths[colIdx]}px`,
-            'maxWidth': `${this.columnWidths[colIdx]}px`,
-        };
-    }
-    isSelected() {
-        if (this.tableEl?.isRowSelectedSync) {
-            return this.tableEl.isRowSelectedSync(this.row);
-        }
-        return false;
-    }
-    handleSelect() {
-        if (this.tableEl?.updateRowSelectSync) {
-            this.tableEl.updateRowSelectSync(this.row);
-        }
-    }
-    render() {
-        const stickyLeftCount = this._stickyColumn.left || 0;
-        const stickyRightCount = this._stickyColumn.right || 0;
-        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
-        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
-        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: 'd6259e5c87cce0fa70f1d849e11416ad69b0cac1', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '90e36c39bede0e07fc1c4d90183a73ebc99b6ed8', class: "tr" }, this._selectable && (h("td", { key: '601f1747063d8e73803304abc2cd767f420f359c', class: {
-                'td': true,
-                'td--selected': true,
-                'sticky-left': true,
-                'sticky-left-edge': stickyLeftCount === 0,
-                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '97068a623d3b7876c7e6392e3f5ed81cfc60d592', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
-                'td': true,
-                [`td--${col.align || 'left'}`]: true,
-                'sticky-left': true,
-                'sticky-left-edge': idx === stickyLeftCount - 1,
-                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
-                [`${col.tdClass}`]: Boolean(col.tdClass),
-            }, style: this.getStickyStyle(idx) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))))), middleCols.map((col, relativeIdx) => {
-            const actualColIdx = stickyLeftCount + relativeIdx;
-            const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (h("td", { key: col.name, class: {
-                    td: true,
-                    [`td--${col.align || 'left'}`]: true,
-                    [`${col.tdClass}`]: Boolean(col.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
-        }), stickyRightCols.map((col, relativeIdx) => {
-            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
-            const fieldName = typeof col.field === 'string' ? col.field : col.name;
-            return (h("td", { key: col.name, class: {
-                    'td': true,
-                    [`td--${col.align || 'left'}`]: true,
-                    'sticky-right': true,
-                    'sticky-right-edge': relativeIdx === 0,
-                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
-                    [`${col.tdClass}`]: Boolean(col.tdClass),
-                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
-        }))));
-    }
-};
-SdTr.style = sdTrCss();
-
-export { SdTr as sd_tr };