nexa-ui-kit 0.7.7 → 0.7.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,7 +2,7 @@ import { signal, computed, effect, h, hText, defineComponent, registerComponent,
|
|
|
2
2
|
import NPaginator from './NPaginator.js'
|
|
3
3
|
|
|
4
4
|
const _sfc_main = defineComponent({
|
|
5
|
-
__scopeId: 'data-v-
|
|
5
|
+
__scopeId: 'data-v-508018ce',
|
|
6
6
|
__hmrId: 'NDataTable_nexa',
|
|
7
7
|
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 } },
|
|
8
8
|
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,73 +167,75 @@ const _sfc_main = defineComponent({
|
|
|
167
167
|
// Injected render function
|
|
168
168
|
_sfc_main.render = function(ctx) {
|
|
169
169
|
let { 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
|
|
170
|
-
return h('div', { class: ["n-dt", [`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']], "data-v-
|
|
170
|
+
return h('div', { class: ["n-dt", [`n-dt-${size}`, showGridlines ? 'is-grid' : '', scrollable ? 'is-scroll' : '']], "data-v-508018ce": "" }, [
|
|
171
171
|
"\n ",
|
|
172
|
-
h('div', { class: "n-dt-toolbar", "data-v-
|
|
173
|
-
h('div', { class: "n-dt-global", "data-v-
|
|
174
|
-
h('input', { class: "n-dt-global-input", value: effectiveFilters.value.__global || '', placeholder: "Search...", onInput: setGlobal, "data-v-
|
|
172
|
+
h('div', { class: "n-dt-toolbar", "data-v-508018ce": "" }, [
|
|
173
|
+
h('div', { class: "n-dt-global", "data-v-508018ce": "" }, [
|
|
174
|
+
h('input', { class: "n-dt-global-input", value: effectiveFilters.value.__global || '', placeholder: "Search...", onInput: setGlobal, "data-v-508018ce": "" })
|
|
175
175
|
])
|
|
176
176
|
]),
|
|
177
177
|
"\n ",
|
|
178
|
-
h('div', { class: "n-dt-wrapper", "data-v-
|
|
178
|
+
h('div', { class: "n-dt-wrapper", "data-v-508018ce": "" }, [
|
|
179
179
|
"\n ",
|
|
180
|
-
h('table', { class: ["n-dt-table", { 'is-striped': stripedRows, 'is-hover': hoverRows }], "data-v-
|
|
180
|
+
h('table', { class: ["n-dt-table", { 'is-striped': stripedRows, 'is-hover': hoverRows }], "data-v-508018ce": "" }, [
|
|
181
181
|
"\n ",
|
|
182
|
-
h('thead', { class: "n-dt-thead", "data-v-
|
|
182
|
+
h('thead', { class: "n-dt-thead", "data-v-508018ce": "" }, [
|
|
183
183
|
"\n ",
|
|
184
|
-
h('tr', { class: "n-dt-head-row", "data-v-
|
|
184
|
+
h('tr', { class: "n-dt-head-row", "data-v-508018ce": "" }, [
|
|
185
185
|
"\n ",
|
|
186
|
-
(selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-
|
|
187
|
-
(selectionMode === 'multiple') ? h('input', { class: "n-dt-selectbox", type: "checkbox", checked: allVisibleSelected.value, onClick: ($event) => { $event.stopPropagation(); (toggleAllVisible)($event) }, "data-v-
|
|
186
|
+
(selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-508018ce": "" }, [
|
|
187
|
+
(selectionMode === 'multiple') ? h('input', { class: "n-dt-selectbox", type: "checkbox", checked: allVisibleSelected.value, onClick: ($event) => { $event.stopPropagation(); (toggleAllVisible)($event) }, "data-v-508018ce": "" }) : null
|
|
188
188
|
]) : null,
|
|
189
189
|
(normalizeColumns.value).map((col, index) =>
|
|
190
|
-
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-
|
|
190
|
+
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-508018ce": "" }, [
|
|
191
191
|
"\n ",
|
|
192
|
-
h('div', { class: "n-dt-th-content", "data-v-
|
|
192
|
+
h('div', { class: "n-dt-th-content", "data-v-508018ce": "" }, [
|
|
193
193
|
"\n ",
|
|
194
|
-
h('span', { class: "n-dt-th-text", "data-v-
|
|
194
|
+
h('span', { class: "n-dt-th-text", "data-v-508018ce": "" }, [
|
|
195
195
|
$slots.value && $slots.value[`header-${col.field}`] ? $slots[`header-${col.field}`]({ column: col }) : getHeaderContent(col)
|
|
196
196
|
]),
|
|
197
197
|
"\n ",
|
|
198
|
-
(col.sortable) ? h('span', { class: ["n-dt-sort", { 'is-active': internalSortField.value === col.field }], "data-v-
|
|
198
|
+
(col.sortable) ? h('span', { class: ["n-dt-sort", { 'is-active': internalSortField.value === col.field }], "data-v-508018ce": "" }, [
|
|
199
199
|
"\n ",
|
|
200
|
-
(internalSortField.value !== col.field) ? h('span', { class: "n-dt-sort-icon", "data-v-
|
|
200
|
+
(internalSortField.value !== col.field) ? h('span', { class: "n-dt-sort-icon", "data-v-508018ce": "" }, [
|
|
201
201
|
"↕"
|
|
202
|
-
]) : (true) ? h('span', { class: "n-dt-sort-icon", "data-v-
|
|
202
|
+
]) : (true) ? h('span', { class: "n-dt-sort-icon", "data-v-508018ce": "" }, [
|
|
203
203
|
internalSortOrder.value === 1 ? '↑' : '↓'
|
|
204
204
|
]) : null,
|
|
205
205
|
"\n "
|
|
206
206
|
]) : null
|
|
207
207
|
]),
|
|
208
208
|
"\n ",
|
|
209
|
-
(resizableColumns) ? h('span', { class: "n-dt-resizer", "data-field": col.field, onMousedown: startResize, "data-v-
|
|
209
|
+
(resizableColumns) ? h('span', { class: "n-dt-resizer", "data-field": col.field, onMousedown: startResize, "data-v-508018ce": "" }) : null
|
|
210
210
|
])
|
|
211
211
|
),
|
|
212
212
|
"\n "
|
|
213
213
|
]),
|
|
214
214
|
"\n ",
|
|
215
|
-
(filterDisplay === 'row') ? h('tr', { class: "n-dt-filter-row", "data-v-
|
|
216
|
-
(selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-
|
|
215
|
+
(filterDisplay === 'row') ? h('tr', { class: "n-dt-filter-row", "data-v-508018ce": "" }, [
|
|
216
|
+
(selectionMode) ? h('th', { class: "n-dt-th is-selection", "data-v-508018ce": "" }) : null,
|
|
217
217
|
(normalizeColumns.value).map((col, index) =>
|
|
218
|
-
h('th', { class: ["n-dt-th", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-
|
|
219
|
-
(col.filterable) ? h('input', { class: "n-dt-filter", "data-field": col.field, value: (effectiveFilters.value[col.field]?.value) || '', placeholder: "Filter", onInput: onColumnFilterInput, "data-v-
|
|
218
|
+
h('th', { class: ["n-dt-th", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-508018ce": "" }, [
|
|
219
|
+
(col.filterable) ? h('input', { class: "n-dt-filter", "data-field": col.field, value: (effectiveFilters.value[col.field]?.value) || '', placeholder: "Filter", onInput: onColumnFilterInput, "data-v-508018ce": "" }) : null
|
|
220
220
|
])
|
|
221
221
|
)
|
|
222
222
|
]) : null
|
|
223
223
|
]),
|
|
224
224
|
"\n ",
|
|
225
|
-
h('tbody', { class: "n-dt-tbody", "data-v-
|
|
225
|
+
h('tbody', { class: "n-dt-tbody", "data-v-508018ce": "" }, [
|
|
226
226
|
"\n ",
|
|
227
227
|
(visibleRows.value).map((row, i) =>
|
|
228
|
-
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-
|
|
228
|
+
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-508018ce": "" }, [
|
|
229
229
|
"\n ",
|
|
230
|
-
(selectionMode) ? h('td', { class: "n-dt-td is-selection", "data-v-
|
|
231
|
-
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-
|
|
230
|
+
(selectionMode) ? h('td', { class: "n-dt-td is-selection", "data-v-508018ce": "" }, [
|
|
231
|
+
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-508018ce": "" })
|
|
232
232
|
]) : null,
|
|
233
233
|
(normalizeColumns.value).map((col, index) =>
|
|
234
|
-
h('td', { class: ["n-dt-td", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-
|
|
234
|
+
h('td', { class: ["n-dt-td", `is-${col.align}`], key: col.field, style: { width: getWidth(col) || undefined, minWidth: col.minWidth }, "data-v-508018ce": "" }, [
|
|
235
235
|
"\n ",
|
|
236
|
-
$slots.value && $slots.value[`body-${col.field}`] ?
|
|
236
|
+
($slots.value && $slots.value[`body-${col.field}`]) ? h('span', { "data-v-508018ce": "" }, [
|
|
237
|
+
$slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value })
|
|
238
|
+
]) : (true) ? h('span', { innerHTML: getCellContent(row, col, i + internalFirst.value), "data-v-508018ce": "" }) : null,
|
|
237
239
|
"\n "
|
|
238
240
|
])
|
|
239
241
|
),
|
|
@@ -241,8 +243,8 @@ _sfc_main.render = function(ctx) {
|
|
|
241
243
|
])
|
|
242
244
|
),
|
|
243
245
|
"\n ",
|
|
244
|
-
(visibleRows.value.length === 0) ? h('tr', { class: "n-dt-empty-row", "data-v-
|
|
245
|
-
h('td', { class: "n-dt-empty", colspan: normalizeColumns.value.length + (selectionMode ? 1 : 0), "data-v-
|
|
246
|
+
(visibleRows.value.length === 0) ? h('tr', { class: "n-dt-empty-row", "data-v-508018ce": "" }, [
|
|
247
|
+
h('td', { class: "n-dt-empty", colspan: normalizeColumns.value.length + (selectionMode ? 1 : 0), "data-v-508018ce": "" }, [
|
|
246
248
|
emptyMessage
|
|
247
249
|
])
|
|
248
250
|
]) : null
|
|
@@ -252,13 +254,13 @@ _sfc_main.render = function(ctx) {
|
|
|
252
254
|
"\n "
|
|
253
255
|
]),
|
|
254
256
|
"\n ",
|
|
255
|
-
(paginator) ? h(_ntc_NPaginator, { first: internalFirst.value, rows: internalRows.value, totalRecords: totalRecords.value, rowsPerPageOptions: rowsPerPageOptions, onPage: onPage, "data-v-
|
|
257
|
+
(paginator) ? h(_ntc_NPaginator, { first: internalFirst.value, rows: internalRows.value, totalRecords: totalRecords.value, rowsPerPageOptions: rowsPerPageOptions, onPage: onPage, "data-v-508018ce": "" }) : null
|
|
256
258
|
])
|
|
257
259
|
}
|
|
258
|
-
_sfc_main.__scopeId = 'data-v-
|
|
260
|
+
_sfc_main.__scopeId = 'data-v-508018ce'
|
|
259
261
|
_sfc_main.__hmrId = 'NDataTable_nexa'
|
|
260
262
|
|
|
261
263
|
export default _sfc_main
|
|
262
264
|
|
|
263
|
-
const __style = `.n-dt[data-v-
|
|
264
|
-
injectStyle('data-v-
|
|
265
|
+
const __style = `.n-dt[data-v-508018ce]{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}`
|
|
266
|
+
injectStyle('data-v-508018ce', __style)
|
|
@@ -187,7 +187,8 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
|
|
|
187
187
|
<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)">
|
|
188
188
|
<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>
|
|
189
189
|
<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 }">
|
|
190
|
-
|
|
190
|
+
<span v-if="$slots.value && $slots.value[`body-${col.field}`]">{{ $slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value }) }}</span>
|
|
191
|
+
<span v-else :innerHTML="getCellContent(row, col, i + internalFirst.value)"></span>
|
|
191
192
|
</td>
|
|
192
193
|
</tr>
|
|
193
194
|
<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>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nexa-ui-kit",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.9",
|
|
4
4
|
"description": "Premium component library for Nexa Framework",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -22,12 +22,12 @@
|
|
|
22
22
|
"src"
|
|
23
23
|
],
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"nexa-framework": "0.7.
|
|
26
|
-
"nexa-mobile": "0.7.
|
|
25
|
+
"nexa-framework": "0.7.9",
|
|
26
|
+
"nexa-mobile": "0.7.9"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"cpx": "^1.5.0",
|
|
30
|
-
"nexa-compiler": "0.7.
|
|
30
|
+
"nexa-compiler": "0.7.9"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",
|
|
@@ -187,7 +187,8 @@ const startResize = (e) => { if (!props.resizableColumns) return; const field =
|
|
|
187
187
|
<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)">
|
|
188
188
|
<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>
|
|
189
189
|
<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 }">
|
|
190
|
-
|
|
190
|
+
<span v-if="$slots.value && $slots.value[`body-${col.field}`]">{{ $slots[`body-${col.field}`]({ data: row, column: col, index: i + internalFirst.value }) }}</span>
|
|
191
|
+
<span v-else :innerHTML="getCellContent(row, col, i + internalFirst.value)"></span>
|
|
191
192
|
</td>
|
|
192
193
|
</tr>
|
|
193
194
|
<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>
|