porting to the use of penguinui5
This commit is contained in:
Priec
@@ -247,30 +247,34 @@ from the build. If the build ever balloons, check that exclusion is intact.
|
||||
|
||||
---
|
||||
|
||||
## 14. Table — PENDING
|
||||
**Penguin UI: `table/` (5 variants)**
|
||||
## 14. Table — ✅ DONE
|
||||
**Penguin UI: `table/default-table.html`**
|
||||
|
||||
> **Priority: HIGH** | ~196 lines across5 instances.
|
||||
> The same class structure is copy-pasted5 times. Penguin match:
|
||||
> `table/default-table.html` for basic tables, `table-with-action.html` for
|
||||
> row actions. Consider a `ui::table_header()` + `ui::table_row()` macro.
|
||||
- Exact upstream mirror at `penguinui-components/table/default-table.html` (reference only)
|
||||
- The same wrapper/thead/tbody/row/tfoot class structure was copy-pasted across all
|
||||
5 tables (orders index, order detail, products, categories, cart body). Centralized
|
||||
into **class-string macros** in `macros/ui.html`: `ui::table_wrap_cls()`,
|
||||
`ui::table_cls()`, `ui::thead_cls()`, `ui::tbody_cls()`, `ui::row_cls()` (hover),
|
||||
`ui::tfoot_cls()`, plus an element macro `ui::th(label, align="")` for header cells.
|
||||
- **Why class-string macros, not full row macros:** Tera has no slot/`{% raw %}{% call %}{% endraw %}`
|
||||
mechanism, and the cells are heterogeneous (product image+name, htmx quantity input
|
||||
with inline Alpine `@change`, badges, action-button forms), so rows stay inline. The
|
||||
macros centralize only the drift-prone chrome styling — `class="{{ ui::thead_cls() }}"`.
|
||||
- **Penguin improvement adopted:** the wrapper now carries `w-full overflow-x-auto`
|
||||
(from `default-table.html`) so wide tables scroll horizontally on mobile instead of
|
||||
overflowing. Our `text-xs uppercase` thead + `px-4 py-3` cells were kept (deliberate,
|
||||
richer than Penguin's `text-sm`/`p-4`).
|
||||
- Interactive lists (orders/products/categories) use `ui::row_cls()` for the hover
|
||||
highlight; non-interactive rows (order items, cart) omit it. `tfoot` (order detail +
|
||||
cart totals) uses `ui::tfoot_cls()`.
|
||||
|
||||
| # | Location | What it is | Size |
|
||||
|---|----------|------------|------|
|
||||
| 34 | `assets/views/admin/orders/index.html:11-36` | Orders table: number, customer, status pill, total, "View" link | ~26 lines |
|
||||
| 35 | `assets/views/admin/orders/show.html:20-44` | Order items table: product, quantity, line total + tfoot summary | ~25 lines |
|
||||
| 36 | `assets/views/admin/catalog/products.html:20-70` | Products table: image+name+category, price, stock, status pill, edit/view/delete actions | ~51 lines |
|
||||
| 37 | `assets/views/admin/catalog/categories.html:20-59` | Categories table: tree-indented name, product count, status pill, edit/delete | ~40 lines |
|
||||
| 38 | `assets/views/shop/_cart_body.html:6-59` | Cart table: product link, price, quantity input, line total, remove button + tfoot total | ~54 lines |
|
||||
|
||||
**Pattern:** Every table uses the same class structure:
|
||||
```
|
||||
<table class="w-full text-left text-sm">
|
||||
<thead class="border-b border-outline bg-surface-alt text-xs uppercase tracking-wide text-on-surface/70">
|
||||
<tbody class="divide-y divide-outline">
|
||||
<tr class="hover:bg-surface-alt">
|
||||
```
|
||||
This is copy-pasted 5 times.
|
||||
| # | Location | What it is |
|
||||
|---|----------|------------|
|
||||
| 34 | `assets/views/admin/orders/index.html` | Orders table |
|
||||
| 35 | `assets/views/admin/orders/show.html` | Order items table + tfoot summary |
|
||||
| 36 | `assets/views/admin/catalog/products.html` | Products table (image+name, status pill, actions) |
|
||||
| 37 | `assets/views/admin/catalog/categories.html` | Categories table (tree-indented, actions) |
|
||||
| 38 | `assets/views/shop/_cart_body.html` | Cart table (htmx qty input, remove) + tfoot total |
|
||||
|
||||
---
|
||||
|
||||
@@ -536,7 +540,7 @@ Both are wrapped in a single card-style `<form>`.
|
||||
| ~~5~~ | ~~Country/Phone Combobox~~ | ⛔ WON'T PORT — needs Alpine Focus plugin; our lightweight version kept | — | — |
|
||||
| ~~7~~ | ~~Image Gallery~~ | ✅ DONE — `carousel/default-carousel.html` | Small | ~19 |
|
||||
| ~~8~~ | ~~Radio Groups~~ | ✅ DONE — `radio/radio-with-container.html` | Small | ~47 |
|
||||
| 14 | Table | `table/default-table.html` | Medium | ~196 |
|
||||
| ~~14~~ | ~~Table~~ | ✅ DONE — `table/default-table.html` (class-string macros) | Medium | ~196 |
|
||||
|
||||
### Phase 2 — MEDIUM (good match, more integration risk)
|
||||
|
||||
@@ -559,7 +563,7 @@ Both are wrapped in a single card-style `<form>`.
|
||||
| 26 | Shipping Settings Row | Already fully uses Penguin macros |
|
||||
| 27 | Form Wrappers | Already fully uses Penguin macros |
|
||||
|
||||
### Already DONE (15 of 27)
|
||||
### Already DONE (16 of 27)
|
||||
|
||||
| # | Component |
|
||||
|---|-----------|
|
||||
@@ -575,14 +579,14 @@ Both are wrapped in a single card-style `<form>`.
|
||||
| 11 | Textarea |
|
||||
| 12 | Select/Dropdown |
|
||||
| 13 | File Input |
|
||||
| 14 | Table |
|
||||
| 15 | Alert / Error Banner |
|
||||
| 16 | Badge / Status Pill |
|
||||
| 17 | Buttons |
|
||||
|
||||
**Remaining real ports: just #14 Table (~196 lines, Medium) and #1 Navbar
|
||||
(~143 lines, Large).** #5 Combobox is a conscious WON'T-PORT (Alpine Focus
|
||||
plugin dependency). The Phase-3 items are already internally Penguin-adapted
|
||||
or have no applicable component.
|
||||
**Remaining real port: just #1 Navbar (~143 lines, Large).** #5 Combobox is a
|
||||
conscious WON'T-PORT (Alpine Focus plugin dependency). The Phase-3 items are
|
||||
already internally Penguin-adapted or have no applicable component.
|
||||
|
||||
---
|
||||
|
||||
@@ -604,7 +608,7 @@ or have no applicable component.
|
||||
| 11 | Textarea | `text-area/` | ✅ DONE | ~10 |
|
||||
| 12 | Select | `select/` | ✅ DONE | ~23 |
|
||||
| 13 | File input | `file-input/` | ✅ DONE | ~12 |
|
||||
| 14 | Table | `table/` | **HIGH** | ~196 |
|
||||
| 14 | Table | `table/` | ✅ DONE | ~196 |
|
||||
| 15 | Alert/Error | `alert/` | ✅ DONE | ~9 |
|
||||
| 16 | Badge/Pill | `badge/` | ✅ DONE | ~17 |
|
||||
| 17 | Button | `buttons/` | ✅ DONE | ~200+ |
|
||||
@@ -619,7 +623,7 @@ or have no applicable component.
|
||||
| 26 | Shipping settings row | `card/` | LOW | ~21 |
|
||||
| 27 | Form wrappers | `card/` | LOW | ~150 |
|
||||
|
||||
**Status: 15 of 27 components fully ported to Penguin UI. Only 2 real ports
|
||||
remain — #14 Table (HIGH) and #1 Navbar (MED). #5 Combobox is a conscious
|
||||
WON'T-PORT (Alpine Focus plugin dependency). The remaining Phase-3 items are
|
||||
already internally Penguin-adapted or have no applicable match.**
|
||||
**Status: 16 of 27 components fully ported to Penguin UI. Only 1 real port
|
||||
remains — #1 Navbar (MED). #5 Combobox is a conscious WON'T-PORT (Alpine Focus
|
||||
plugin dependency). The remaining Phase-3 items are already internally
|
||||
Penguin-adapted or have no applicable match.**
|
||||
|
||||
Reference in New Issue
Block a user