@razerspine/pug-ui-kit 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+## [1.0.1] - 2026-02-03
+
+### Changed
+- **dataTable**: Refactored the `dataTable` mixin to improve configuration consistency.
+- **dataTable**: The `options` parameter now accepts an `actions` array to define row actions (links/buttons) dynamically.
+
+### Removed
+- **dataTable**: Removed support for the Pug `block` (slot) content for rendering actions. The `showActions` boolean option has also been removed.
+
+### Migration Guide
+If you were using the block content for actions:
+```pug
+// Old version (v1.0.0)
++dataTable(items, cols, { showActions: true })
+  a(href=`/edit/${item.id}`) Edit
+```
+You should now update to:
+
+```pug
+// New version (v1.0.1)
++dataTable(items, cols, {
+  actions: [
+    { label: 'Edit', url: (item) => `/edit/${item.id}` }
+  ]
+})
+```

package/mixins/data-table.pug

@@ -1,80 +1,87 @@
 //- dataTable mixin
 //- Renders a flexible table from an array of objects. Columns are derived
 //- from the provided `columns` array or automatically collected from object keys.
-//- Supports optional index column, optional actions column (slot), per-column
-//- formatters and custom header labels.
 //-
 //- Parameters:
 //-   items       - **Array** — Array of objects to render as rows. Each object
-//-                 represents one row; object keys map to columns. If not an
-//-                 array, an empty table is rendered.
-//-                 Example: [{ id:1, name:'Olya' }, { id:2, name:'Ivan' }]
+//-                 represents one row.
 //-                 Default: []
 //-   columns     - **Array | undefined** — Optional ordered list of keys to use
-//-                 as columns. If omitted or empty, unique keys are collected
-//-                 from all objects in `items` and used in insertion order.
-//-                 Example: ['id','name','email']
+//-                 as columns. If omitted, unique keys are collected from `items`.
 //-                 Default: auto-collected from items
-//-   options     - **Object | undefined** — Additional options:
+//-   options     - **Object | undefined** — Configuration options:
 //-                 - emptyText: **String** — Text shown when no rows; Default: 'No data'.
 //-                 - showIndex: **Boolean** — Render leading index column; Default: false.
-//-                 - showActions: **Boolean** — Render trailing Actions column (slot); Default: true.
 //-                 - formatters: **Object** — Map of column -> function(value) for custom rendering.
 //-                   Example: { createdAt: v => new Date(v).toLocaleDateString() }.
-//-                 - labels: **Object** — Map of column -> header label string. If absent,
-//-                   header is generated by humanizing the key (underscores -> spaces, capitalized).
-//-                 Default: {}
+//-                 - labels: **Object** — Map of column -> header label string.
+//-                   Example: { id: 'ID', user_name: 'Name' }.
+//-                 - actions: **Array** — List of action objects to render in the last column.
+//-                   Replaces the deprecated block/slot mechanism.
+//-                   Structure:
+//-                     [
+//-                       {
+//-                         label: String,              // Text of the link/button
+//-                         url: Function(item),        // Callback returning the URL string based on the row item
+//-                         class: String (optional)    // CSS classes for the link
+//-                       }
+//-                     ]
+//-                   Default: []
 //-
 //- Behavior:
-//-   - If `items` is empty, a single header cell spanning all columns displays `emptyText`.
-//-   - Column order follows `columns` if provided; otherwise it follows the unique keys
-//-     discovered across `items`.
-//-   - For each cell, `formatters[col]` is used when present; otherwise arrays are joined,
-//-     objects are JSON-stringified, and primitives are stringified.
-//-   - The Actions column is a slot: when `showActions` is true, the mixin renders a `td`
-//-     containing the caller-provided block. Inside the block the current row object is
-//-     available as `item` and the row index as `i`.
-//-
-//- Notes and best practices:
-//-   - Prefer passing an explicit `columns` array when you need stable column order.
-//-   - Use `labels` for human-friendly or localized header text instead of renaming keys.
-//-   - Keep `formatters` pure and return safe strings; if returning HTML, use `!=` in the mixin call
-//-     or return already-escaped content carefully to avoid XSS.
-//-   - To hide the Actions column entirely, set `showActions: false` in `options`.
-//-   - For large datasets, consider server-side pagination or client-side slicing before passing `items`.
+//-   - Renders a table with Bootstrap-like classes (`table`).
+//-   - If `items` is empty, displays a unified row with `emptyText`.
+//-   - Actions are rendered as `<a>` tags in a separate column if `options.actions` is provided.
 //-
 //- Examples:
-//-   // Basic usage with auto columns
-//-   - const data = [{ id:1, name:'Olya' }, { id:2, name:'Ivan' }]
+//-   const data = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
+//-
+//-   // 1. Basic usage
 //-   +dataTable(data)
 //-
-//-   // Explicit columns, labels and formatters
-//-   +dataTable(data, ['id','name'], {
+//-   // 2. Advanced usage with Actions and Custom Labels
+//-   +dataTable(data, ['id', 'name'], {
 //-     showIndex: true,
-//-     showActions: false,
-//-     labels: { id: 'ID', name: 'Full name' },
-//-     formatters: { id: v => '#' + v }
+//-     labels: { name: 'Full Name' },
+//-     actions: [
+//-       {
+//-         label: 'Edit',
+//-         class: 'btn btn--text-primary btn--medium',
+//-         url: (item) => `/users/${item.id}/edit`
+//-       },
+//-       {
+//-         label: 'Delete',
+//-         class: 'btn btn--text-secondary btn--medium',
+//-         url: (item) => `/users/${item.id}/delete`
+//-       }
+//-     ]
 //-   })
 //-
-//-   // With Actions slot (edit/delete links). Inside block `item` is current row.
-//-   +dataTable(data, ['id','name'], { showActions: true })
-//-     a(href='/edit/#{item && item.id || ""}') Edit
-//-     |
-//-     a(href='/delete/#{item && item.id || ""}') Delete
+//-   // 3. Explicit columns, labels and formatters
+//-      +dataTable(data, ['id','name'], {
+//-        showIndex: false,
+//-        labels: { id: 'ID', name: 'Full name' },
+//-        formatters: { id: v => '#' + v }
+//-      })
 //-
-//- Keep this docblock updated when you change parameter names, defaults, or
-//- the mixin behavior so editor hover comments remain accurate.
 mixin dataTable(items, columns, options)
   - const _items = Array.isArray(items) ? items : [];
   - const cols = Array.isArray(columns) && columns.length ? columns : Array.from(new Set(_items.reduce((acc, it) => acc.concat(Object.keys(it || {})), [])));
-  - const opts = Object.assign({ emptyText: 'No data', showIndex: false, showActions: false, formatters: {}, labels: {} }, options || {});
 
+  //- Default options
+  - const opts = Object.assign({ emptyText: 'No data', showIndex: false, actions: [], formatters: {}, labels: {} }, options || {});
+
+  //- Check if actions column is needed
+  - const hasActions = Array.isArray(opts.actions) && opts.actions.length > 0;
+
+  //- Helper: Humanize keys (user_id -> User id)
   - const humanize = function(key) {
   -   if (!key && key !== 0) return '';
   -   const s = String(key).replace(/_/g, ' ');
   -   return s.charAt(0).toUpperCase() + s.slice(1);
   - }
 
+  //- Helper: Format cell values
   - const formatValue = function(v, col) {
   -   if (v === null || v === undefined || v === '') return '';
   -   if (opts.formatters && typeof opts.formatters[col] === 'function') return opts.formatters[col](v);
@@ -84,29 +91,33 @@ mixin dataTable(items, columns, options)
   - }
 
   if !_items.length
-    table.table
+    table.table.data-table
       thead
         tr
-          th(colspan=cols.length + (opts.showIndex ? 1 : 0) + (opts.showActions ? 1 : 0)) #{opts.emptyText}
+          th(colspan=cols.length + (opts.showIndex ? 1 : 0) + (hasActions ? 1 : 0)) #{opts.emptyText}
   else
-    table.table
+    table.table.data-table
       thead
         tr
           if opts.showIndex
-            th #
+            th.data-table__index #
           each col in cols
             - const label = (opts.labels && Object.prototype.hasOwnProperty.call(opts.labels, col)) ? opts.labels[col] : humanize(col)
-            th #{label}
-          if opts.showActions
-            th Actions
+            th.data-table__header #{label}
+          if hasActions
+            th.data-table__actions Actions
       tbody
         each item, i in _items
           tr
             if opts.showIndex
-              td #{i + 1}
+              td.data-table__index #{i + 1}
             each col in cols
               - const val = (item && Object.prototype.hasOwnProperty.call(item, col)) ? item[col] : ''
-              td!= formatValue(val, col)
-            if opts.showActions
-              td
-                block
+              td.data-table__cell!= formatValue(val, col)
+            if hasActions
+              td.data-table__actions-cell
+                each action in opts.actions
+                  - const href = (typeof action.url === 'function') ? action.url(item) : '#'
+                  - const className = action.class || ''
+                  a(href=href class=className) #{action.label}
+                  |

package/package.json

@@ -1,13 +1,19 @@
 {
   "name": "@razerspine/pug-ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Shared Pug mixins for Webpack Starter templates",
+  "keywords": [
+    "pug",
+    "components",
+    "mixins"
+  ],
   "main": "index.js",
   "files": [
     "mixins",
     "index.js",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "CHANGELOG.md"
   ],
   "author": "Razerspine",
   "repository": {