Skip to content

Commit 8722c83

Browse files
herbert-julio-azionherbert-julio-azion
committed
[ENG-46087] feat(webkit): Table border/principal/empty-state + Table/Paginator story refinements
- table: add `border` prop (default false); `principal` column flag + Table.Cell/HeadCell `principal` prop (first non-action column defaults to grow 2); empty-state block in the #empty slot (plain block, no row hover, no CTAs) reusing IllustrationLayers - table stories: data-driven zero-logic stories, card-style Composition example, Empty story, explicit docs source code, generic <=10-row dataset, border control - paginator stories: compound dot-notation form (Paginator.Button/Info/PageSize) + explicit source code - specs: table.md updated (border, principal, empty-state), checksum refreshed - fix: point @aziontech/theme at the workspace package (workspace:*) so install no longer 404s
1 parent 7f2e455 commit 8722c83

8 files changed

Lines changed: 466 additions & 441 deletions

File tree

‎.specs/table.md‎

Lines changed: 11 additions & 9 deletions
Large diffs are not rendered by default.

‎apps/storybook/src/stories/webkit/data/Paginator.stories.js‎

Lines changed: 81 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,79 @@
1-
import PaginationButton from '@aziontech/webkit/data/pagination-button'
21
import Paginator from '@aziontech/webkit/data/paginator'
3-
import PaginatorInfo from '@aziontech/webkit/data/paginator-info'
4-
import PaginatorPageSize from '@aziontech/webkit/data/paginator-page-size'
52
import { ref, watch } from 'vue'
63

7-
const paginatorComponents = {
8-
Paginator,
9-
PaginationButton,
10-
PaginatorInfo,
11-
PaginatorPageSize
12-
}
4+
// Compound API — one import of the root; every part is reached via dot-notation
5+
// (`<Paginator.Button>`, `<Paginator.Info>`, `<Paginator.PageSize>`). The
6+
// standalone imports (`@aziontech/webkit/data/pagination-button`, …) remain the
7+
// tree-shaking path; the stories lead with the compound form per compound-api.md.
8+
const paginatorComponents = { Paginator }
139

1410
const usage = [
1511
'```vue',
1612
'<Paginator>',
1713
' <template #info>',
18-
' <PaginatorInfo>Showing 1 to 10 of 20 entries</PaginatorInfo>',
14+
' <Paginator.Info>Showing 1 to 10 of 20 entries</Paginator.Info>',
1915
' </template>',
20-
' <PaginationButton kind="previous" disabled>Previous</PaginationButton>',
21-
' <PaginationButton kind="number" selected>1</PaginationButton>',
22-
' <PaginationButton kind="number">2</PaginationButton>',
23-
' <PaginationButton kind="more" />',
24-
' <PaginationButton kind="next">Next</PaginationButton>',
16+
' <Paginator.Button kind="previous" disabled>Previous</Paginator.Button>',
17+
' <Paginator.Button kind="number" selected>1</Paginator.Button>',
18+
' <Paginator.Button kind="number">2</Paginator.Button>',
19+
' <Paginator.Button kind="more" />',
20+
' <Paginator.Button kind="next">Next</Paginator.Button>',
2521
' <template #controls>',
26-
' <PaginatorPageSize :model-value="10" :options="[10, 25, 50, 100]" />',
22+
' <Paginator.PageSize :model-value="10" :options="[10, 25, 50, 100]" />',
2723
' </template>',
2824
'</Paginator>',
2925
'```'
3026
].join('\n')
3127

28+
// --- "Show code" source ----------------------------------------------------
29+
// Storybook's default dynamic source for a custom-template story renders the
30+
// internal markup (or the render function), not the authored `<Paginator>` usage.
31+
// Each story ships an explicit `docs.source.code` so "Show code" shows the real
32+
// component code in the compound dot-notation form.
33+
34+
const DEFAULT_SOURCE = `<Paginator>
35+
<template #info>
36+
<Paginator.Info>Showing 1 to 10 of 20 entries</Paginator.Info>
37+
</template>
38+
39+
<Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
40+
<Paginator.Button kind="number" selected>1</Paginator.Button>
41+
<Paginator.Button kind="number">2</Paginator.Button>
42+
<Paginator.Button kind="number">3</Paginator.Button>
43+
<Paginator.Button kind="more" />
44+
<Paginator.Button kind="next">Next</Paginator.Button>
45+
46+
<template #controls>
47+
<Paginator.PageSize :model-value="10" :options="[10, 25, 50, 100]" />
48+
</template>
49+
</Paginator>`
50+
51+
const BUTTONS_SOURCE = `<!-- kinds + states -->
52+
<Paginator.Button kind="previous">Previous</Paginator.Button>
53+
<Paginator.Button kind="number">1</Paginator.Button>
54+
<Paginator.Button kind="number" selected>2</Paginator.Button>
55+
<Paginator.Button kind="more" />
56+
<Paginator.Button kind="next">Next</Paginator.Button>
57+
58+
<!-- disabled -->
59+
<Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
60+
<Paginator.Button kind="number" disabled>1</Paginator.Button>
61+
<Paginator.Button kind="next" disabled>Next</Paginator.Button>`
62+
63+
const DATA_DRIVEN_SOURCE = `<Paginator
64+
v-model:page="page"
65+
v-model:page-size="pageSize"
66+
:total="200"
67+
:page-size-options="[10, 25, 50, 100]"
68+
:sibling-count="1"
69+
@page-change="loadPage"
70+
/>`
71+
3272
/** @type {import('@storybook/vue3').Meta<typeof Paginator>} */
3373
const meta = {
3474
title: 'Webkit/Data/Paginator',
3575
component: Paginator,
36-
subcomponents: { PaginationButton, PaginatorInfo },
76+
subcomponents: { PaginationButton: Paginator.Button, PaginatorInfo: Paginator.Info },
3777
tags: ['autodocs'],
3878
parameters: {
3979
layout: 'padded',
@@ -128,7 +168,7 @@ const meta = {
128168
},
129169
info: {
130170
control: false,
131-
description: 'Left region: page-info text (typically PaginatorInfo).',
171+
description: 'Left region: page-info text (typically Paginator.Info).',
132172
table: { type: { summary: 'VNode' }, category: 'slots' }
133173
},
134174
default: {
@@ -138,7 +178,7 @@ const meta = {
138178
},
139179
controls: {
140180
control: false,
141-
description: 'Right region: rows-per-page selector (e.g. Dropdown).',
181+
description: 'Right region: rows-per-page selector (e.g. Paginator.PageSize).',
142182
table: { type: { summary: 'VNode' }, category: 'slots' }
143183
}
144184
},
@@ -159,25 +199,26 @@ export const Default = {
159199
template: `
160200
<Paginator v-bind="args">
161201
<template #info>
162-
<PaginatorInfo>Showing 1 to 10 of 20 entries</PaginatorInfo>
202+
<Paginator.Info>Showing 1 to 10 of 20 entries</Paginator.Info>
163203
</template>
164-
<PaginationButton kind="previous" disabled>Previous</PaginationButton>
165-
<PaginationButton kind="number" selected>1</PaginationButton>
166-
<PaginationButton kind="number">2</PaginationButton>
167-
<PaginationButton kind="number">3</PaginationButton>
168-
<PaginationButton kind="more" />
169-
<PaginationButton kind="next">Next</PaginationButton>
204+
<Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
205+
<Paginator.Button kind="number" selected>1</Paginator.Button>
206+
<Paginator.Button kind="number">2</Paginator.Button>
207+
<Paginator.Button kind="number">3</Paginator.Button>
208+
<Paginator.Button kind="more" />
209+
<Paginator.Button kind="next">Next</Paginator.Button>
170210
<template #controls>
171-
<PaginatorPageSize :model-value="10" :options="[10, 25, 50, 100]" />
211+
<Paginator.PageSize :model-value="10" :options="[10, 25, 50, 100]" />
172212
</template>
173213
</Paginator>
174214
`
175215
}),
176216
parameters: {
177217
docs: {
218+
source: { code: DEFAULT_SOURCE },
178219
description: {
179220
story:
180-
'Full paginator: page-info text, Previous/numbers/overflow/Next, and a rows-per-page selector.'
221+
'The compound **composition** form: the full paginator assembled by hand from the dot-notation sub-components — page-info text (`Paginator.Info`), Previous / numbers / overflow / Next (`Paginator.Button`), and a rows-per-page selector (`Paginator.PageSize`).'
181222
}
182223
}
183224
}
@@ -190,25 +231,26 @@ export const Buttons = {
190231
template: `
191232
<div class="flex flex-col gap-[var(--spacing-4)]">
192233
<div class="flex items-center gap-[var(--spacing-2)]">
193-
<PaginationButton kind="previous">Previous</PaginationButton>
194-
<PaginationButton kind="number">1</PaginationButton>
195-
<PaginationButton kind="number" selected>2</PaginationButton>
196-
<PaginationButton kind="more" />
197-
<PaginationButton kind="next">Next</PaginationButton>
234+
<Paginator.Button kind="previous">Previous</Paginator.Button>
235+
<Paginator.Button kind="number">1</Paginator.Button>
236+
<Paginator.Button kind="number" selected>2</Paginator.Button>
237+
<Paginator.Button kind="more" />
238+
<Paginator.Button kind="next">Next</Paginator.Button>
198239
</div>
199240
<div class="flex items-center gap-[var(--spacing-2)]">
200-
<PaginationButton kind="previous" disabled>Previous</PaginationButton>
201-
<PaginationButton kind="number" disabled>1</PaginationButton>
202-
<PaginationButton kind="next" disabled>Next</PaginationButton>
241+
<Paginator.Button kind="previous" disabled>Previous</Paginator.Button>
242+
<Paginator.Button kind="number" disabled>1</Paginator.Button>
243+
<Paginator.Button kind="next" disabled>Next</Paginator.Button>
203244
</div>
204245
</div>
205246
`
206247
}),
207248
parameters: {
208249
docs: {
250+
source: { code: BUTTONS_SOURCE },
209251
description: {
210252
story:
211-
'PaginationButton kinds (previous / next / number / more) and states: default, selected (current page), and disabled.'
253+
'`Paginator.Button` kinds (previous / next / number / more) and states: default, selected (current page), and disabled.'
212254
}
213255
}
214256
}
@@ -217,7 +259,7 @@ export const Buttons = {
217259
/** @type {import('@storybook/vue3').StoryObj<typeof Paginator>} */
218260
export const DataDriven = {
219261
render: (args) => ({
220-
components: { Paginator },
262+
components: paginatorComponents,
221263
setup() {
222264
const page = ref(args.page ?? 1)
223265
const pageSize = ref(args.pageSize ?? 10)
@@ -250,6 +292,7 @@ export const DataDriven = {
250292
},
251293
parameters: {
252294
docs: {
295+
source: { code: DATA_DRIVEN_SOURCE },
253296
description: {
254297
story:
255298
'Data-driven mode: pass `total` and bind `v-model:page` / `v-model:page-size`. The Paginator renders its own info text, windowed page numbers, overflow ellipsis, and the rows-per-page selector, emitting `update:page` / `update:pageSize` / `page-change`.'

0 commit comments

Comments
 (0)