nexa-ui-kit 0.6.2 → 0.7.0

package/dist/components/NCard.js

@@ -24,7 +24,11 @@ _sfc_main.render = function(ctx) {
         (image) ? h('img', { class: "n-card-image", src: image, "data-v-34850782": "" }) : null,
         (title || $slots.header) ? h('div', { class: "n-card-header", "data-v-34850782": "" }, [
         "\n      ",
-        ctx.$slots.header ? ctx.$slots.header() : null,
+        ctx.$slots.header ? ctx.$slots.header() : ["\n        ", h('h3', { class: "n-card-title" }, [
+        title
+      ]), "\n        ", h('p', { class: "n-card-subtitle" }, [
+        subtitle
+      ]), "\n      "],
         "\n    "
       ]) : null,
         h('div', { class: ['n-card-body', padding ? 'has-padding' : ''], "data-v-34850782": "" }, [

package/dist/components/NDataTable.js

@@ -2,7 +2,7 @@ import { signal, computed, effect, h, hText, defineComponent, registerComponent,
 import NPaginator from './NPaginator.js'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-71b71cd6',
+  __scopeId: 'data-v-17a3d2ce',
   __hmrId: 'NDataTable_nexa',
   props: { value: { type: Array, default: () => [] }, columns: { type: Array, default: () => [] }, stripedRows: { type: Boolean, default: false }, hoverRows: { type: Boolean, default: true }, size: { type: String, default: 'md' }, scrollable: { type: Boolean, default: true }, paginator: { type: Boolean, default: true }, rows: { type: Number, default: 10 }, first: { type: Number, default: 0 }, rowsPerPageOptions: { type: Array, default: () => [10, 20, 50] }, selectionMode: { type: String, default: '' }, selection: { type: null, default: null }, dataKey: { type: String, default: '' }, sortField: { type: String, default: '' }, sortOrder: { type: Number, default: 1 }, resizableColumns: { type: Boolean, default: true }, columnResizeMode: { type: String, default: 'fit' }, filterDisplay: { type: String, default: 'row' }, globalFilter: { type: String, default: '' }, globalFilterFields: { type: Array, default: null }, filters: { type: null, default: null }, lazy: { type: Boolean, default: false }, totalRecords: { type: Number, default: 0 }, emptyMessage: { type: String, default: 'No records found' }, showGridlines: { type: Boolean, default: false } },
   emits: ['update:first', 'update:rows', 'update:selection', 'update:sortField', 'update:sortOrder', 'update:globalFilter', 'update:filters', 'updateFirst', 'updateRows', 'updateSelection', 'updateSortField', 'updateSortOrder', 'updateGlobalFilter', 'updateFilters', 'page', 'rowSelect', 'rowUnselect', 'sort', 'filter'],
@@ -167,70 +167,82 @@ const _sfc_main = defineComponent({
 // Injected render function
 _sfc_main.render = function(ctx) {
   const { internalFirst, internalRows, internalSortField, internalSortOrder, internalFilters, effectiveFilters, columnWidths, resizing, internalSelection, lastPropGlobal, lastPropSelection, normalizeColumns, getRowKey, effectiveSelection, isRowSelected, toggleRowSelection, allVisibleSelected, toggleAllVisible, getHeaderContent, getRawValue, getCellContent, matchFilter, filteredRows, sortedRows, totalRecords, visibleRows, setSort, onSortClick, setGlobal, setColumnFilter, onColumnFilterInput, onPage, getWidth, startResize, NPaginator: _ntc_NPaginator, $slots, emit, value, columns, stripedRows, hoverRows, size, scrollable, paginator, rows, first, rowsPerPageOptions, selectionMode, selection, dataKey, sortField, sortOrder, resizableColumns, columnResizeMode, filterDisplay, globalFilter, globalFilterFields, filters, lazy, emptyMessage, showGridlines, Fragment: _ntc_Fragment } = ctx
-    return h('div', { class: ["n-dt", [`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']], "data-v-71b71cd6": "" }, [
+    return h('div', { class: ["n-dt", [`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']], "data-v-17a3d2ce": "" }, [
         "\n    ",
-        h('div', { class: "n-dt-toolbar", "data-v-71b71cd6": "" }, [
-        h('div', { class: "n-dt-global", "data-v-71b71cd6": "" }, [
-        h('input', { class: "n-dt-global-input", value: effectiveFilters.value.__global || '', placeholder: "Search...", onInput: setGlobal, "data-v-71b71cd6": "" })
+        h('div', { class: "n-dt-toolbar", "data-v-17a3d2ce": "" }, [
+        h('div', { class: "n-dt-global", "data-v-17a3d2ce": "" }, [
+        h('input', { class: "n-dt-global-input", value: effectiveFilters.value.__global || '', placeholder: "Search...", onInput: setGlobal, "data-v-17a3d2ce": "" })
       ])
       ]),
         "\n    ",
-        h('div', { class: "n-dt-wrapper", "data-v-71b71cd6": "" }, [
+        h('div', { class: "n-dt-wrapper", "data-v-17a3d2ce": "" }, [
         "\n      ",
-        h('table', { class: ["n-dt-table", { 'is-striped': stripedRows, 'is-hover': hoverRows }], "data-v-71b71cd6": "" }, [
+        h('table', { class: ["n-dt-table", { 'is-striped': stripedRows, 'is-hover': hoverRows }], "data-v-17a3d2ce": "" }, [
         "\n        ",
-        h('thead', { class: "n-dt-thead", "data-v-71b71cd6": "" }, [
+        h('thead', { class: "n-dt-thead", "data-v-17a3d2ce": "" }, [
         "\n          ",
-        h('tr', { class: "n-dt-head-row", "data-v-71b71cd6": "" }, [
-        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-71b71cd6": "" }, [
-        (selectionMode === 'multiple') ? h('input', { class: "n-dt-selectbox", type: "checkbox", checked: allVisibleSelected.value, onClick: ($event) => { $event.stopPropagation(); (toggleAllVisible)($event) }, "data-v-71b71cd6": "" }) : null
+        h('tr', { class: "n-dt-head-row", "data-v-17a3d2ce": "" }, [
+        "\n            ",
+        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-17a3d2ce": "" }, [
+        (selectionMode === 'multiple') ? h('input', { class: "n-dt-selectbox", type: "checkbox", checked: allVisibleSelected.value, onClick: ($event) => { $event.stopPropagation(); (toggleAllVisible)($event) }, "data-v-17a3d2ce": "" }) : null
       ]) : null,
         normalizeColumns.value.map((col, index) =>
-        h('th', { class: ["n-dt-th", [`is-${col.align}`, col.sortable ? 'is-sortable' : '']], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-field": col.field, onClick: onSortClick, "data-v-71b71cd6": "" }, [
-        h('div', { class: "n-dt-th-content", "data-v-71b71cd6": "" }, [
-        h('span', { class: "n-dt-th-text", "data-v-71b71cd6": "" }, [
-        getHeaderContent(col)
+        h('th', { class: ["n-dt-th", [`is-${col.align}`, col.sortable ? 'is-sortable' : '']], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-field": col.field, onClick: onSortClick, "data-v-17a3d2ce": "" }, [
+        "\n              ",
+        h('div', { class: "n-dt-th-content", "data-v-17a3d2ce": "" }, [
+        "\n                ",
+        h('span', { class: "n-dt-th-text", "data-v-17a3d2ce": "" }, [
+        $slots.value && $slots.value[`header-${col.field}`] ? $slots[`header-${col.field}`]({ column: col }) : getHeaderContent(col)
       ]),
-        (col.sortable) ? h('span', { class: ["n-dt-sort", { 'is-active': internalSortField.value === col.field }], "data-v-71b71cd6": "" }, [
-        (internalSortField.value !== col.field) ? h('span', { class: "n-dt-sort-icon", "data-v-71b71cd6": "" }, [
+        "\n                ",
+        (col.sortable) ? h('span', { class: ["n-dt-sort", { 'is-active': internalSortField.value === col.field }], "data-v-17a3d2ce": "" }, [
+        "\n                  ",
+        (internalSortField.value !== col.field) ? h('span', { class: "n-dt-sort-icon", "data-v-17a3d2ce": "" }, [
         "↕"
-      ]) : (true) ? h('span', { class: "n-dt-sort-icon", "data-v-71b71cd6": "" }, [
+      ]) : (true) ? h('span', { class: "n-dt-sort-icon", "data-v-17a3d2ce": "" }, [
         internalSortOrder.value === 1 ? '↑' : '↓'
-      ]) : null
+      ]) : null,
+        "\n                "
       ]) : null
       ]),
-        (resizableColumns) ? h('span', { class: "n-dt-resizer", "data-field": col.field, onMousedown: startResize, "data-v-71b71cd6": "" }) : null
+        "\n              ",
+        (resizableColumns) ? h('span', { class: "n-dt-resizer", "data-field": col.field, onMousedown: startResize, "data-v-17a3d2ce": "" }) : null
       ])
-      )
+      ),
+        "\n          "
       ]),
         "\n          ",
-        (filterDisplay === 'row') ? h('tr', { class: "n-dt-filter-row", "data-v-71b71cd6": "" }, [
-        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-71b71cd6": "" }) : null,
+        (filterDisplay === 'row') ? h('tr', { class: "n-dt-filter-row", "data-v-17a3d2ce": "" }, [
+        (selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-17a3d2ce": "" }) : null,
         normalizeColumns.value.map((col, index) =>
-        h('th', { class: ["n-dt-th", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-71b71cd6": "" }, [
-        (col.filterable) ? h('input', { class: "n-dt-filter", "data-field": col.field, value: (effectiveFilters.value[col.field]?.value) || '', placeholder: "Filter", onInput: onColumnFilterInput, "data-v-71b71cd6": "" }) : null
+        h('th', { class: ["n-dt-th", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-17a3d2ce": "" }, [
+        (col.filterable) ? h('input', { class: "n-dt-filter", "data-field": col.field, value: (effectiveFilters.value[col.field]?.value) || '', placeholder: "Filter", onInput: onColumnFilterInput, "data-v-17a3d2ce": "" }) : null
       ])
       )
       ]) : null
       ]),
         "\n        ",
-        h('tbody', { class: "n-dt-tbody", "data-v-71b71cd6": "" }, [
+        h('tbody', { class: "n-dt-tbody", "data-v-17a3d2ce": "" }, [
         "\n          ",
         visibleRows.value.map((row, i) =>
-        h('tr', { class: ["n-dt-row", { 'is-selected': isRowSelected(row, i + internalFirst.value) }], key: getRowKey(row, i + internalFirst.value), onClick: ($event) => { toggleRowSelection(row, i + internalFirst.value) }, "data-v-71b71cd6": "" }, [
-        (selectionMode) ? h('td', { class: "n-dt-td is-selection", "data-v-71b71cd6": "" }, [
-        h('input', { class: "n-dt-selectbox", type: "checkbox", checked: isRowSelected(row, i + internalFirst.value), onClick: ($event) => { $event.stopPropagation(); (($event) => { toggleRowSelection(row, i + internalFirst.value) })($event) }, "data-v-71b71cd6": "" })
+        h('tr', { class: ["n-dt-row", { 'is-selected': isRowSelected(row, i + internalFirst.value) }], key: getRowKey(row, i + internalFirst.value), onClick: ($event) => { toggleRowSelection(row, i + internalFirst.value) }, "data-v-17a3d2ce": "" }, [
+        "\n            ",
+        (selectionMode) ? h('td', { class: "n-dt-td is-selection", "data-v-17a3d2ce": "" }, [
+        h('input', { class: "n-dt-selectbox", type: "checkbox", checked: isRowSelected(row, i + internalFirst.value), onClick: ($event) => { $event.stopPropagation(); (($event) => { toggleRowSelection(row, i + internalFirst.value) })($event) }, "data-v-17a3d2ce": "" })
       ]) : null,
         normalizeColumns.value.map((col, index) =>
-        h('td', { class: ["n-dt-td", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-71b71cd6": "" }, [
-        getCellContent(row, col, i + internalFirst.value)
+        h('td', { class: ["n-dt-td", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-17a3d2ce": "" }, [
+        "\n              ",
+        $slots.value && $slots.value[`body-${col.field}`] ? $slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value }) : getCellContent(row, col, i + internalFirst.value),
+        "\n            "
       ])
-      )
+      ),
+        "\n          "
       ])
       ),
         "\n          ",
-        (visibleRows.value.length === 0) ? h('tr', { class: "n-dt-empty-row", "data-v-71b71cd6": "" }, [
-        h('td', { class: "n-dt-empty", colspan: normalizeColumns.value.length + (selectionMode ? 1 : 0), "data-v-71b71cd6": "" }, [
+        (visibleRows.value.length === 0) ? h('tr', { class: "n-dt-empty-row", "data-v-17a3d2ce": "" }, [
+        h('td', { class: "n-dt-empty", colspan: normalizeColumns.value.length + (selectionMode ? 1 : 0), "data-v-17a3d2ce": "" }, [
         emptyMessage
       ])
       ]) : null
@@ -240,13 +252,13 @@ _sfc_main.render = function(ctx) {
         "\n    "
       ]),
         "\n    ",
-        (paginator) ? h(_ntc_NPaginator, { first: internalFirst.value, rows: internalRows.value, totalRecords: totalRecords.value, rowsPerPageOptions: rowsPerPageOptions, onPage: onPage, "data-v-71b71cd6": "" }) : null
+        (paginator) ? h(_ntc_NPaginator, { first: internalFirst.value, rows: internalRows.value, totalRecords: totalRecords.value, rowsPerPageOptions: rowsPerPageOptions, onPage: onPage, "data-v-17a3d2ce": "" }) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-71b71cd6'
+_sfc_main.__scopeId = 'data-v-17a3d2ce'
 _sfc_main.__hmrId = 'NDataTable_nexa'
 
 export default _sfc_main
 
-const __style = `.n-dt[data-v-71b71cd6]{border:1px solid var(--n-color-border);border-radius:var(--n-radius-lg);background:var(--n-color-surface);overflow:hidden;font-family:var(--n-font-sans)}.n-dt-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--n-space-3) var(--n-space-4);border-bottom:1px solid var(--n-color-border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08))}.n-dt-global{display:flex;align-items:center;gap:var(--n-space-2)}.n-dt-global-input{width:280px;max-width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.55rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;box-sizing:border-box}.n-dt-global-input:focus{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-dt-wrapper{width:100%;overflow:auto}.n-dt-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.n-dt-thead{background:var(--n-color-surface)}.n-dt-th,.n-dt-td{padding:0.75rem 0.9rem;border-bottom:1px solid var(--n-color-border);color:var(--n-color-text);font-size:var(--n-text-sm);vertical-align:middle}.n-dt-th{position:relative;overflow:hidden;background:rgba(0,0,0,.10);color:var(--n-color-text-secondary);font-weight:var(--n-weight-semibold);user-select:none}.n-dt-th.is-sortable{cursor:pointer}.n-dt-th-content{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.n-dt-sort{display:inline-flex;align-items:center;gap:0.25rem;color:var(--n-color-text-muted)}.n-dt-sort.is-active{color:var(--n-color-primary)}.n-dt-resizer{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:col-resize}.n-dt-filter-row .n-dt-th{background:rgba(0,0,0,.06)}.n-dt-filter{width:100%;max-width:100%;display:block;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:0.35rem 0.5rem;color:var(--n-color-text);font-size:var(--n-text-xs);outline:none;box-sizing:border-box}.n-dt-filter:focus{border-color:var(--n-color-primary)}.n-dt-td{background:transparent;color:var(--n-color-text)}.n-dt-row.is-selected .n-dt-td{background:rgba(59,130,246,.12)}.n-dt-table.is-striped .n-dt-row:nth-child(even) .n-dt-td{background:rgba(0,0,0,.06)}.n-dt-table.is-hover .n-dt-row:hover .n-dt-td{background:rgba(255,255,255,.06)}.n-dt-empty{text-align:center;color:var(--n-color-text-muted);padding:1.25rem}.is-left{text-align:left}.is-right{text-align:right}.is-center{text-align:center}.is-selection{width:44px;min-width:44px;max-width:44px;text-align:center}.n-dt-selectbox{width:16px;height:16px;accent-color:var(--n-color-primary)}.n-dt-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;border:1px solid var(--n-color-border);color:var(--n-color-primary)}.is-grid .n-dt-td,.is-grid .n-dt-th{border-right:1px solid var(--n-color-border)}.is-grid .n-dt-td:last-child,.is-grid .n-dt-th:last-child{border-right:none}.n-dt-sm .n-dt-th,.n-dt-sm .n-dt-td{padding:0.55rem 0.7rem}.n-dt-lg .n-dt-th,.n-dt-lg .n-dt-td{padding:0.9rem 1rem}`
-injectStyle('data-v-71b71cd6', __style)
+const __style = `.n-dt[data-v-17a3d2ce]{border:1px solid var(--n-color-border);border-radius:var(--n-radius-lg);background:var(--n-color-surface);overflow:hidden;font-family:var(--n-font-sans)}.n-dt-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--n-space-3) var(--n-space-4);border-bottom:1px solid var(--n-color-border);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.08))}.n-dt-global{display:flex;align-items:center;gap:var(--n-space-2)}.n-dt-global-input{width:280px;max-width:100%;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);padding:0.55rem 0.75rem;color:var(--n-color-text);font-size:var(--n-text-sm);outline:none;box-sizing:border-box}.n-dt-global-input:focus{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-dt-wrapper{width:100%;overflow:auto}.n-dt-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.n-dt-thead{background:var(--n-color-surface)}.n-dt-th,.n-dt-td{padding:0.75rem 0.9rem;border-bottom:1px solid var(--n-color-border);color:var(--n-color-text);font-size:var(--n-text-sm);vertical-align:middle}.n-dt-th{position:relative;overflow:hidden;background:rgba(0,0,0,.10);color:var(--n-color-text-secondary);font-weight:var(--n-weight-semibold);user-select:none}.n-dt-th.is-sortable{cursor:pointer}.n-dt-th-content{display:flex;align-items:center;justify-content:space-between;gap:0.5rem}.n-dt-sort{display:inline-flex;align-items:center;gap:0.25rem;color:var(--n-color-text-muted)}.n-dt-sort.is-active{color:var(--n-color-primary)}.n-dt-resizer{position:absolute;right:0;top:0;bottom:0;width:8px;cursor:col-resize}.n-dt-filter-row .n-dt-th{background:rgba(0,0,0,.06)}.n-dt-filter{width:100%;max-width:100%;display:block;background:var(--n-color-bg);border:1px solid var(--n-color-border);border-radius:var(--n-radius-sm);padding:0.35rem 0.5rem;color:var(--n-color-text);font-size:var(--n-text-xs);outline:none;box-sizing:border-box}.n-dt-filter:focus{border-color:var(--n-color-primary)}.n-dt-td{background:transparent;color:var(--n-color-text)}.n-dt-row.is-selected .n-dt-td{background:rgba(59,130,246,.12)}.n-dt-table.is-striped .n-dt-row:nth-child(even) .n-dt-td{background:rgba(0,0,0,.06)}.n-dt-table.is-hover .n-dt-row:hover .n-dt-td{background:rgba(255,255,255,.06)}.n-dt-empty{text-align:center;color:var(--n-color-text-muted);padding:1.25rem}.is-left{text-align:left}.is-right{text-align:right}.is-center{text-align:center}.is-selection{width:44px;min-width:44px;max-width:44px;text-align:center}.n-dt-selectbox{width:16px;height:16px;accent-color:var(--n-color-primary)}.n-dt-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;border:1px solid var(--n-color-border);color:var(--n-color-primary)}.is-grid .n-dt-td,.is-grid .n-dt-th{border-right:1px solid var(--n-color-border)}.is-grid .n-dt-td:last-child,.is-grid .n-dt-th:last-child{border-right:none}.n-dt-sm .n-dt-th,.n-dt-sm .n-dt-td{padding:0.55rem 0.7rem}.n-dt-lg .n-dt-th,.n-dt-lg .n-dt-td{padding:0.9rem 1rem}`
+injectStyle('data-v-17a3d2ce', __style)

package/dist/components/NDataTable.nexa

@@ -168,11 +168,28 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
     <div class="n-dt-wrapper">
       <table class="n-dt-table" :class="{ 'is-striped': stripedRows, 'is-hover': hoverRows }">
         <thead class="n-dt-thead">
-          <tr class="n-dt-head-row"><th v-if="selectionMode" class="n-dt-th is-selection"><input v-if="selectionMode === 'multiple'" class="n-dt-selectbox" type="checkbox" :checked="allVisibleSelected.value" @click.stop="toggleAllVisible" /></th><th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="[`is-${col.align}`, col.sortable ? 'is-sortable' : '']" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }" :data-field="col.field" @click="onSortClick"><div class="n-dt-th-content"><span class="n-dt-th-text">{{ getHeaderContent(col) }}</span><span v-if="col.sortable" class="n-dt-sort" :class="{ 'is-active': internalSortField.value === col.field }"><span v-if="internalSortField.value !== col.field" class="n-dt-sort-icon">↕</span><span v-else class="n-dt-sort-icon">{{ internalSortOrder.value === 1 ? '↑' : '↓' }}</span></span></div><span v-if="resizableColumns" class="n-dt-resizer" :data-field="col.field" @mousedown="startResize"></span></th></tr>
+          <tr class="n-dt-head-row">
+            <th v-if="selectionMode" class="n-dt-th is-selection"><input v-if="selectionMode === 'multiple'" class="n-dt-selectbox" type="checkbox" :checked="allVisibleSelected.value" @click.stop="toggleAllVisible" /></th>
+            <th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="[`is-${col.align}`, col.sortable ? 'is-sortable' : '']" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }" :data-field="col.field" @click="onSortClick">
+              <div class="n-dt-th-content">
+                <span class="n-dt-th-text">{{ $slots.value && $slots.value[`header-${col.field}`] ? $slots[`header-${col.field}`]({ column: col }) : getHeaderContent(col) }}</span>
+                <span v-if="col.sortable" class="n-dt-sort" :class="{ 'is-active': internalSortField.value === col.field }">
+                  <span v-if="internalSortField.value !== col.field" class="n-dt-sort-icon">↕</span>
+                  <span v-else class="n-dt-sort-icon">{{ internalSortOrder.value === 1 ? '↑' : '↓' }}</span>
+                </span>
+              </div>
+              <span v-if="resizableColumns" class="n-dt-resizer" :data-field="col.field" @mousedown="startResize"></span>
+            </th>
+          </tr>
           <tr v-if="filterDisplay === 'row'" class="n-dt-filter-row"><th v-if="selectionMode" class="n-dt-th is-selection"></th><th v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-th" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }"><input v-if="col.filterable" class="n-dt-filter" :data-field="col.field" :value="(effectiveFilters.value[col.field]?.value) || ''" placeholder="Filter" @input="onColumnFilterInput" /></th></tr>
         </thead>
         <tbody class="n-dt-tbody">
-          <tr v-for="(row, i) in visibleRows.value" :key="getRowKey(row, i + internalFirst.value)" class="n-dt-row" :class="{ 'is-selected': isRowSelected(row, i + internalFirst.value) }" @click="toggleRowSelection(row, i + internalFirst.value)"><td v-if="selectionMode" class="n-dt-td is-selection"><input class="n-dt-selectbox" type="checkbox" :checked="isRowSelected(row, i + internalFirst.value)" @click.stop="toggleRowSelection(row, i + internalFirst.value)" /></td><td v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-td" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }">{{ getCellContent(row, col, i + internalFirst.value) }}</td></tr>
+          <tr v-for="(row, i) in visibleRows.value" :key="getRowKey(row, i + internalFirst.value)" class="n-dt-row" :class="{ 'is-selected': isRowSelected(row, i + internalFirst.value) }" @click="toggleRowSelection(row, i + internalFirst.value)">
+            <td v-if="selectionMode" class="n-dt-td is-selection"><input class="n-dt-selectbox" type="checkbox" :checked="isRowSelected(row, i + internalFirst.value)" @click.stop="toggleRowSelection(row, i + internalFirst.value)" /></td>
+            <td v-for="col in normalizeColumns.value" :key="col.field" class="n-dt-td" :class="`is-${col.align}`" :style="{ width: getWidth(col) || undefined, minWidth: col.minWidth }">
+              {{ $slots.value && $slots.value[`body-${col.field}`] ? $slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value }) : getCellContent(row, col, i + internalFirst.value) }}
+            </td>
+          </tr>
           <tr v-if="visibleRows.value.length === 0" class="n-dt-empty-row"><td :colspan="normalizeColumns.value.length + (selectionMode ? 1 : 0)" class="n-dt-empty">{{ emptyMessage }}</td></tr>
         </tbody>
       </table>

package/dist/components/NImage.js

@@ -0,0 +1,104 @@
+import { signal, computed, onMounted, onUnmounted, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
+
+const _sfc_main = defineComponent({
+  __scopeId: 'data-v-1f83e1a6',
+  __hmrId: 'NImage_nexa',
+  props: {
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+  fallback: { type: String, default: '' },
+  fit: { type: String, default: 'cover' },
+  lazy: { type: Boolean, default: true },
+  width: { type: String, default: null },
+  height: { type: String, default: null },
+  rounded: { type: Boolean, default: false },
+  blur: { type: Boolean, default: true }
+},
+  setup(props, setupContext) {
+    const { emit, slots, slots: $slots } = setupContext
+    const loaded = signal(false)
+    const error = signal(false)
+    const visible = signal(!props.lazy)
+    let observer = null
+    let imgRef = null
+    const currentSrc = computed(() => {
+      if (error.value && props.fallback) return props.fallback
+      return props.src
+    })
+    const wrapperStyle = computed(() => ({
+      width: props.width ?? '100%',
+      height: props.height ?? 'auto',
+      position: 'relative',
+      overflow: 'hidden',
+      display: 'block',
+      borderRadius: props.rounded ? '50%' : undefined
+    }))
+    const imgStyle = computed(() => ({
+      width: '100%',
+      height: '100%',
+      objectFit: props.fit,
+      transition: 'opacity 0.3s ease, filter 0.4s ease',
+      opacity: loaded.value ? '1' : '0',
+      filter: (props.blur && !loaded.value) ? 'blur(8px)' : 'none'
+    }))
+    onMounted(() => {
+      if (!props.lazy) return
+      observer = new IntersectionObserver(entries => {
+        if (entries[0].isIntersecting) {
+          visible.value = true
+          observer?.disconnect()
+        }
+      }, { rootMargin: '200px' })
+      if (imgRef) observer.observe(imgRef)
+    })
+    onUnmounted(() => {
+      observer?.disconnect()
+    })
+    const onLoad = () => { console.log('ON_LOAD_CALLED'); loaded.value = true }
+    const onError = () => { console.log('ON_ERROR_CALLED'); error.value = true; loaded.value = true }
+    return { loaded, error, visible, observer, imgRef, currentSrc, wrapperStyle, imgStyle, onLoad, onError, $slots }
+  }
+})
+// Injected render function
+_sfc_main.render = function(ctx) {
+  const { loaded, error, visible, observer, imgRef, currentSrc, wrapperStyle, imgStyle, onLoad, onError, $slots, src, alt, fallback, fit, lazy, width, height, rounded, blur, Fragment: _ntc_Fragment } = ctx
+    return h('span', { class: "n-image-wrapper", style: wrapperStyle.value, ref: el => imgRef = el, "data-v-1f83e1a6": "" }, [
+        "\n    ",
+        (!loaded.value) ? h('span', { class: "n-image-skeleton", "data-v-1f83e1a6": "" }) : null,
+        (visible.value) ? h('img', { class: "n-image", src: currentSrc.value, alt: alt, style: { width: '100%', height: '100%', objectFit: fit, transition: 'opacity 0.3s ease, filter 0.4s ease', opacity: loaded.value ? '1' : '0', filter: (blur && !loaded.value) ? 'blur(8px)' : 'none' }, onLoad: onLoad, onError: onError, "data-v-1f83e1a6": "" }) : null
+      ])
+}
+_sfc_main.__scopeId = 'data-v-1f83e1a6'
+_sfc_main.__hmrId = 'NImage_nexa'
+
+export default _sfc_main
+
+const __style = `.n-image-wrapper[data-v-1f83e1a6]{
+  background: var(--n-color-surface-hover, #1a1a2e);
+  display: inline-block;
+}
+
+.n-image-skeleton[data-v-1f83e1a6]{
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    var(--n-color-surface, #111827) 25%,
+    var(--n-color-surface-hover, #1f2937) 50%,
+    var(--n-color-surface, #111827) 75%
+  );
+  background-size: 200% 100%;
+  animation: n-img-shimmer 1.5s infinite;
+}
+
+@keyframes n-img-shimmer {
+0%[data-v-1f83e1a6]{ background-position: 200% 0; }
+100%[data-v-1f83e1a6]{ background-position: -200% 0; }
+}
+
+.n-image[data-v-1f83e1a6]{
+  display: block;
+  position: relative;
+  z-index: 1;
+}`
+injectStyle('data-v-1f83e1a6', __style)

package/dist/components/NImage.nexa

@@ -0,0 +1,112 @@
+<script setup>
+import { signal, computed, onMounted, onUnmounted } from 'nexa-framework'
+
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+  fallback: { type: String, default: '' },
+  fit: { type: String, default: 'cover' },
+  lazy: { type: Boolean, default: true },
+  width: { type: String, default: null },
+  height: { type: String, default: null },
+  rounded: { type: Boolean, default: false },
+  blur: { type: Boolean, default: true }
+})
+
+const loaded = signal(false)
+const error = signal(false)
+const visible = signal(!props.lazy)
+let observer = null
+let imgRef = null
+
+const currentSrc = computed(() => {
+  if (error.value && props.fallback) return props.fallback
+  return props.src
+})
+
+const wrapperStyle = computed(() => ({
+  width: props.width ?? '100%',
+  height: props.height ?? 'auto',
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'block',
+  borderRadius: props.rounded ? '50%' : undefined
+}))
+
+const imgStyle = computed(() => ({
+  width: '100%',
+  height: '100%',
+  objectFit: props.fit,
+  transition: 'opacity 0.3s ease, filter 0.4s ease',
+  opacity: loaded.value ? '1' : '0',
+  filter: (props.blur && !loaded.value) ? 'blur(8px)' : 'none'
+}))
+
+onMounted(() => {
+  if (!props.lazy) return
+  observer = new IntersectionObserver(entries => {
+    if (entries[0].isIntersecting) {
+      visible.value = true
+      observer?.disconnect()
+    }
+  }, { rootMargin: '200px' })
+  if (imgRef) observer.observe(imgRef)
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+})
+
+const onLoad = () => { console.log('ON_LOAD_CALLED'); loaded.value = true }
+const onError = () => { console.log('ON_ERROR_CALLED'); error.value = true; loaded.value = true }
+</script>
+
+<template>
+  <span
+    class="n-image-wrapper"
+    :style="wrapperStyle.value"
+    :ref="el => imgRef = el"
+  >
+    <span v-if="!loaded.value" class="n-image-skeleton" />
+    <img
+      v-if="visible.value"
+      :src="currentSrc.value"
+      :alt="alt"
+      :style="{ width: '100%', height: '100%', objectFit: fit, transition: 'opacity 0.3s ease, filter 0.4s ease', opacity: loaded.value ? '1' : '0', filter: (blur && !loaded.value) ? 'blur(8px)' : 'none' }"
+      class="n-image"
+      @load="onLoad"
+      @error="onError"
+    />
+  </span>
+</template>
+
+<style scoped>
+.n-image-wrapper {
+  background: var(--n-color-surface-hover, #1a1a2e);
+  display: inline-block;
+}
+
+.n-image-skeleton {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    var(--n-color-surface, #111827) 25%,
+    var(--n-color-surface-hover, #1f2937) 50%,
+    var(--n-color-surface, #111827) 75%
+  );
+  background-size: 200% 100%;
+  animation: n-img-shimmer 1.5s infinite;
+}
+
+@keyframes n-img-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.n-image {
+  display: block;
+  position: relative;
+  z-index: 1;
+}
+</style>

package/dist/components/NModal.js

@@ -1,13 +1,14 @@
 import { signal, effect, onMounted, onUnmounted, h, hText, defineComponent, registerComponent, reloadComponent, injectStyle, Teleport } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-42ba3820',
+  __scopeId: 'data-v-39fa634f',
   __hmrId: 'NModal_nexa',
   props: {
   show: { type: Boolean, default: false },
   title: { type: String, default: '' },
   size: { type: String, default: 'md' },
-  closable: { type: Boolean, default: true }
+  closable: { type: Boolean, default: true },
+  closeLeft: { type: Boolean, default: false }
 },
   emits: ['close'],
   setup(props, setupContext) {
@@ -76,30 +77,35 @@ const _sfc_main = defineComponent({
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { isVisible, modalEl, previousFocus, bodyOverflow, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit, show, title, size, closable, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
-    return h(_ntc_Teleport, { to: "body", "data-v-42ba3820": "" }, [
+  const { isVisible, modalEl, previousFocus, bodyOverflow, sizeMap, close, handleEsc, handleOverlayClick, focusableSelector, handleKeydown, $slots, emit, show, title, size, closable, closeLeft, Fragment: _ntc_Fragment, Teleport: _ntc_Teleport } = ctx
+    return h(_ntc_Teleport, { to: "body", "data-v-39fa634f": "" }, [
         "\n    ",
-        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-42ba3820": "" }, [
+        (isVisible.value) ? h('div', { class: "n-modal-root", "data-v-39fa634f": "" }, [
         "\n      ",
-        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-42ba3820": "" }),
+        h('div', { class: ["n-modal-overlay", { 'is-active': show }], onClick: handleOverlayClick, "data-v-39fa634f": "" }),
         "\n      ",
-        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: "modalEl", style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-42ba3820": "" }, [
+        h('div', { class: ["n-modal-container", { 'is-active': show }], ref: "modalEl", style: { maxWidth: sizeMap[size] || size }, tabindex: "-1", onKeydown: handleKeydown, "data-v-39fa634f": "" }, [
         "\n        ",
-        (title) ? h('div', { class: "n-modal-header", "data-v-42ba3820": "" }, [
+        (title || $slots.header) ? h('div', { class: ["n-modal-header", { 'close-left': closeLeft }], "data-v-39fa634f": "" }, [
         "\n          ",
-        ctx.$slots.header ? ctx.$slots.header() : null,
+        (closable && closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-39fa634f": "" }, [
+        "×"
+      ]) : null,
+        ctx.$slots.header ? ctx.$slots.header() : ["\n            ", h('h3', null, [
+        title
+      ]), "\n          "],
         "\n          ",
-        (closable) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-42ba3820": "" }, [
+        (closable && !closeLeft) ? h('button', { class: "n-modal-close", onClick: close, "aria-label": "Close", "data-v-39fa634f": "" }, [
         "×"
       ]) : null
       ]) : null,
-        h('div', { class: "n-modal-content", "data-v-42ba3820": "" }, [
+        h('div', { class: "n-modal-content", "data-v-39fa634f": "" }, [
         "\n          ",
         ctx.$slots.default ? ctx.$slots.default() : null,
         "\n        "
       ]),
         "\n        ",
-        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-42ba3820": "" }, [
+        ($slots.footer) ? h('div', { class: "n-modal-footer", "data-v-39fa634f": "" }, [
         "\n          ",
         ctx.$slots.footer ? ctx.$slots.footer() : null,
         "\n        "
@@ -109,12 +115,12 @@ _sfc_main.render = function(ctx) {
       ]) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-42ba3820'
+_sfc_main.__scopeId = 'data-v-39fa634f'
 _sfc_main.__hmrId = 'NModal_nexa'
 
 export default _sfc_main
 
-const __style = `.n-modal-root[data-v-42ba3820]{
+const __style = `.n-modal-root[data-v-39fa634f]{
   position: fixed;
   top: 0;
   left: 0;
@@ -126,7 +132,7 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   z-index: var(--n-z-modal);
 }
 
-.n-modal-overlay[data-v-42ba3820]{
+.n-modal-overlay[data-v-39fa634f]{
   position: absolute;
   top: 0;
   left: 0;
@@ -138,11 +144,11 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   transition: opacity 0.25s ease;
 }
 
-.n-modal-overlay.is-active[data-v-42ba3820]{
+.n-modal-overlay.is-active[data-v-39fa634f]{
   opacity: 1;
 }
 
-.n-modal-container[data-v-42ba3820]{
+.n-modal-container[data-v-39fa634f]{
   position: relative;
   width: 90%;
   background: var(--n-color-surface);
@@ -159,12 +165,12 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   flex-direction: column;
 }
 
-.n-modal-container.is-active[data-v-42ba3820]{
+.n-modal-container.is-active[data-v-39fa634f]{
   transform: scale(1) translateY(0);
   opacity: 1;
 }
 
-.n-modal-header[data-v-42ba3820]{
+.n-modal-header[data-v-39fa634f]{
   padding: var(--n-space-6) var(--n-space-8);
   border-bottom: 1px solid var(--n-color-border);
   display: flex;
@@ -173,14 +179,14 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   flex-shrink: 0;
 }
 
-.n-modal-header h3[data-v-42ba3820]{
+.n-modal-header h3[data-v-39fa634f]{
   margin: 0;
   font-size: var(--n-text-xl);
   font-weight: var(--n-weight-bold);
   color: var(--n-color-text);
 }
 
-.n-modal-close[data-v-42ba3820]{
+.n-modal-close[data-v-39fa634f]{
   background: transparent;
   border: none;
   color: var(--n-color-text-secondary);
@@ -197,19 +203,19 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   border-radius: var(--n-radius-sm);
 }
 
-.n-modal-close[data-v-42ba3820]:hover{
+.n-modal-close[data-v-39fa634f]:hover{
   color: var(--n-color-text);
   background: var(--n-color-glass);
 }
 
-.n-modal-content[data-v-42ba3820]{
+.n-modal-content[data-v-39fa634f]{
   padding: var(--n-space-8);
   color: var(--n-color-text-secondary);
   overflow-y: auto;
   flex: 1;
 }
 
-.n-modal-footer[data-v-42ba3820]{
+.n-modal-footer[data-v-39fa634f]{
   padding: var(--n-space-5) var(--n-space-8);
   background: rgba(0, 0, 0, 0.15);
   border-top: 1px solid var(--n-color-border);
@@ -218,4 +224,4 @@ const __style = `.n-modal-root[data-v-42ba3820]{
   gap: var(--n-space-4);
   flex-shrink: 0;
 }`
-injectStyle('data-v-42ba3820', __style)
+injectStyle('data-v-39fa634f', __style)

package/dist/components/NModal.nexa

@@ -5,7 +5,8 @@ const props = defineProps({
   show: { type: Boolean, default: false },
   title: { type: String, default: '' },
   size: { type: String, default: 'md' },
-  closable: { type: Boolean, default: true }
+  closable: { type: Boolean, default: true },
+  closeLeft: { type: Boolean, default: false }
 })
 
 const emit = defineEmits(['close'])
@@ -96,11 +97,12 @@ onUnmounted(() => {
         tabindex="-1"
         @keydown="handleKeydown"
       >
-        <div v-if="title" class="n-modal-header">
+        <div v-if="title || $slots.header" class="n-modal-header" :class="{ 'close-left': closeLeft }">
+          <button v-if="closable && closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
           <slot name="header">
             <h3>{{ title }}</h3>
           </slot>
-          <button v-if="closable" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
+          <button v-if="closable && !closeLeft" class="n-modal-close" @click="close" aria-label="Close">&times;</button>
         </div>
         <div class="n-modal-content">
           <slot />