@mshuja288/aksuicore 0.2.1 → 0.4.0
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.
- package/CHANGELOG.md +19 -0
- package/README.md +1 -1
- package/dist/aksui.css +386 -6
- package/dist/index.cjs +496 -66
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +53 -7
- package/dist/index.d.ts +53 -7
- package/dist/index.js +496 -66
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/patterns/AppShell.tsx +140 -17
- package/src/patterns/RecordWorkspace.tsx +426 -43
- package/src/patterns/index.ts +8 -2
- package/src/primitives/SideNav.tsx +3 -1
- package/src/primitives/Topbar.tsx +38 -8
- package/src/theme/patterns.css +223 -0
- package/src/theme/primitives.css +9 -1
- package/src/theme/shell.css +154 -5
package/dist/index.d.cts
CHANGED
|
@@ -84,12 +84,16 @@ declare function Snackbar({ message, success, onDismiss, }: {
|
|
|
84
84
|
/** @deprecated Prefer Snackbar — alias kept for configurator migration */
|
|
85
85
|
declare const StatusMessage: typeof Snackbar;
|
|
86
86
|
|
|
87
|
-
declare function Topbar({ title, logoSrc, logoAlt, username, onLogout, children, }: {
|
|
87
|
+
declare function Topbar({ title, logoSrc, logoAlt, username, onLogout, showMenuButton, menuOpen, onMenuClick, children, }: {
|
|
88
88
|
title: string;
|
|
89
89
|
logoSrc?: string;
|
|
90
90
|
logoAlt?: string;
|
|
91
91
|
username?: string;
|
|
92
92
|
onLogout?: () => void;
|
|
93
|
+
/** Shows a hamburger control (used by AppShell drawer on small screens). */
|
|
94
|
+
showMenuButton?: boolean;
|
|
95
|
+
menuOpen?: boolean;
|
|
96
|
+
onMenuClick?: () => void;
|
|
93
97
|
children?: ReactNode;
|
|
94
98
|
}): react.JSX.Element;
|
|
95
99
|
|
|
@@ -99,11 +103,12 @@ type SideNavItem = {
|
|
|
99
103
|
/** Compact label for the mobile bottom nav (falls back to `label`). */
|
|
100
104
|
short?: string;
|
|
101
105
|
};
|
|
102
|
-
declare function SideNav({ items, activeId, onSelect, label, }: {
|
|
106
|
+
declare function SideNav({ items, activeId, onSelect, label, className, }: {
|
|
103
107
|
items: SideNavItem[];
|
|
104
108
|
activeId: string;
|
|
105
109
|
onSelect: (id: string) => void;
|
|
106
110
|
label?: string;
|
|
111
|
+
className?: string;
|
|
107
112
|
}): react.JSX.Element;
|
|
108
113
|
|
|
109
114
|
type PageSizeOption = {
|
|
@@ -132,6 +137,7 @@ declare function FormActions({ pending, editing, saveLabel, updateLabel, newLabe
|
|
|
132
137
|
replaceSaveWhenEditing?: boolean;
|
|
133
138
|
}): react.JSX.Element | null;
|
|
134
139
|
|
|
140
|
+
type MobileNavMode = "drawer" | "bottom" | "hybrid";
|
|
135
141
|
type AppShellProps = {
|
|
136
142
|
title: string;
|
|
137
143
|
logoSrc?: string;
|
|
@@ -142,8 +148,21 @@ type AppShellProps = {
|
|
|
142
148
|
activeNavId: string;
|
|
143
149
|
onNavSelect: (id: string) => void;
|
|
144
150
|
navLabel?: string;
|
|
145
|
-
/**
|
|
151
|
+
/**
|
|
152
|
+
* Small-screen navigation strategy.
|
|
153
|
+
* - `drawer` (default): hamburger opens a collapsible side menu; no crowded bottom bar
|
|
154
|
+
* - `bottom`: classic bottom nav from all `navItems` (fine for a few sections)
|
|
155
|
+
* - `hybrid`: compact bottom bar with current section + Menu that opens the drawer
|
|
156
|
+
*/
|
|
157
|
+
mobileNav?: MobileNavMode;
|
|
158
|
+
/**
|
|
159
|
+
* When true, renders the mobile bottom nav.
|
|
160
|
+
* Defaults to true for `bottom` / `hybrid`, false for `drawer`.
|
|
161
|
+
*/
|
|
146
162
|
showBottomNav?: boolean;
|
|
163
|
+
/** Controlled drawer open state (optional). */
|
|
164
|
+
navDrawerOpen?: boolean;
|
|
165
|
+
onNavDrawerOpenChange?: (open: boolean) => void;
|
|
147
166
|
topbarActions?: ReactNode;
|
|
148
167
|
children: ReactNode;
|
|
149
168
|
/** Extra class on the content/screen region */
|
|
@@ -151,9 +170,9 @@ type AppShellProps = {
|
|
|
151
170
|
};
|
|
152
171
|
/**
|
|
153
172
|
* Application chrome: topbar + left side nav + content screen.
|
|
154
|
-
*
|
|
173
|
+
* On small screens, prefers a collapsible drawer over a crowded bottom nav.
|
|
155
174
|
*/
|
|
156
|
-
declare function AppShell({ title, logoSrc, logoAlt, username, onLogout, navItems, activeNavId, onNavSelect, navLabel, showBottomNav, topbarActions, children, screenClassName, }: AppShellProps): react.JSX.Element;
|
|
175
|
+
declare function AppShell({ title, logoSrc, logoAlt, username, onLogout, navItems, activeNavId, onNavSelect, navLabel, mobileNav, showBottomNav, navDrawerOpen, onNavDrawerOpenChange, topbarActions, children, screenClassName, }: AppShellProps): react.JSX.Element;
|
|
157
176
|
|
|
158
177
|
type TableColumn<T> = {
|
|
159
178
|
key: string;
|
|
@@ -165,8 +184,19 @@ type TableColumn<T> = {
|
|
|
165
184
|
/** When set, filter uses an exact-match Select instead of text contains. */
|
|
166
185
|
filterOptions?: SelectOption[];
|
|
167
186
|
filterPlaceholder?: string;
|
|
187
|
+
/** When false, column starts hidden. Default true. */
|
|
188
|
+
defaultVisible?: boolean;
|
|
189
|
+
/** Key sent to export APIs when different from `key` (e.g. PascalCase property name). */
|
|
190
|
+
exportKey?: string;
|
|
191
|
+
};
|
|
192
|
+
/** Formats supported by the shared table download control (matches akscore TableExport). */
|
|
193
|
+
type ExportDownloadFormat = "csv" | "xlsx" | "json";
|
|
194
|
+
/** Column descriptors passed to `onDownload` (visible columns only). */
|
|
195
|
+
type ExportColumnRef = {
|
|
196
|
+
key: string;
|
|
197
|
+
header: string;
|
|
168
198
|
};
|
|
169
|
-
declare function RecordWorkspace<T>({ title, columns, items, rowKey, empty, onAdd, addLabel, canAdd, onView, onUpdate, onDelete, canUpdate, canDelete, toolbar, form, }: {
|
|
199
|
+
declare function RecordWorkspace<T>({ title, columns, items, rowKey, empty, onAdd, addLabel, canAdd, onView, onUpdate, onDelete, canUpdate, canDelete, onDownload, canDownload, downloadBusy, showColumnPicker, columnPrefsKey, visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange, toolbar, form, }: {
|
|
170
200
|
title: string;
|
|
171
201
|
columns: TableColumn<T>[];
|
|
172
202
|
items: T[];
|
|
@@ -180,6 +210,22 @@ declare function RecordWorkspace<T>({ title, columns, items, rowKey, empty, onAd
|
|
|
180
210
|
onDelete?: (item: T) => void;
|
|
181
211
|
canUpdate?: (item: T) => boolean;
|
|
182
212
|
canDelete?: (item: T) => boolean;
|
|
213
|
+
/**
|
|
214
|
+
* When set, shows CSV / Excel / JSON download controls.
|
|
215
|
+
* Second argument lists currently visible columns (exportKey ?? key).
|
|
216
|
+
*/
|
|
217
|
+
onDownload?: (format: ExportDownloadFormat, columns: ExportColumnRef[]) => void;
|
|
218
|
+
canDownload?: boolean;
|
|
219
|
+
downloadBusy?: boolean;
|
|
220
|
+
/** Column checklist in the side rail. Default true. */
|
|
221
|
+
showColumnPicker?: boolean;
|
|
222
|
+
/** Persist visible column keys in localStorage under this key. */
|
|
223
|
+
columnPrefsKey?: string;
|
|
224
|
+
/** Controlled visible column keys. */
|
|
225
|
+
visibleColumnKeys?: string[];
|
|
226
|
+
/** Uncontrolled initial visible keys (defaults to columns with defaultVisible !== false). */
|
|
227
|
+
defaultVisibleColumnKeys?: string[];
|
|
228
|
+
onVisibleColumnKeysChange?: (keys: string[]) => void;
|
|
183
229
|
toolbar?: ReactNode;
|
|
184
230
|
/** Slot for Add/Update/View dialogs owned by the host app. */
|
|
185
231
|
form?: ReactNode;
|
|
@@ -187,4 +233,4 @@ declare function RecordWorkspace<T>({ title, columns, items, rowKey, empty, onAd
|
|
|
187
233
|
/** @deprecated Prefer RecordWorkspace — alias kept for configurator migration */
|
|
188
234
|
declare const RecordTable: typeof RecordWorkspace;
|
|
189
235
|
|
|
190
|
-
export { type AksuiTokenName, AppSelect, type AppSelectOption, AppShell, type AppShellProps, Button, type ButtonVariant, ConfirmDeleteDialog, DateField, Dialog, FormActions, FormDialog, type PageSizeOption, Pagination, RecordTable, RecordWorkspace, Select, type SelectOption, SideNav, type SideNavItem, Snackbar, StatusMessage, type TableColumn, Topbar, aksuiThemeVersion, aksuiTokens };
|
|
236
|
+
export { type AksuiTokenName, AppSelect, type AppSelectOption, AppShell, type AppShellProps, Button, type ButtonVariant, ConfirmDeleteDialog, DateField, Dialog, type ExportColumnRef, type ExportDownloadFormat, FormActions, FormDialog, type MobileNavMode, type PageSizeOption, Pagination, RecordTable, RecordWorkspace, Select, type SelectOption, SideNav, type SideNavItem, Snackbar, StatusMessage, type TableColumn, Topbar, aksuiThemeVersion, aksuiTokens };
|
package/dist/index.d.ts
CHANGED
|
@@ -84,12 +84,16 @@ declare function Snackbar({ message, success, onDismiss, }: {
|
|
|
84
84
|
/** @deprecated Prefer Snackbar — alias kept for configurator migration */
|
|
85
85
|
declare const StatusMessage: typeof Snackbar;
|
|
86
86
|
|
|
87
|
-
declare function Topbar({ title, logoSrc, logoAlt, username, onLogout, children, }: {
|
|
87
|
+
declare function Topbar({ title, logoSrc, logoAlt, username, onLogout, showMenuButton, menuOpen, onMenuClick, children, }: {
|
|
88
88
|
title: string;
|
|
89
89
|
logoSrc?: string;
|
|
90
90
|
logoAlt?: string;
|
|
91
91
|
username?: string;
|
|
92
92
|
onLogout?: () => void;
|
|
93
|
+
/** Shows a hamburger control (used by AppShell drawer on small screens). */
|
|
94
|
+
showMenuButton?: boolean;
|
|
95
|
+
menuOpen?: boolean;
|
|
96
|
+
onMenuClick?: () => void;
|
|
93
97
|
children?: ReactNode;
|
|
94
98
|
}): react.JSX.Element;
|
|
95
99
|
|
|
@@ -99,11 +103,12 @@ type SideNavItem = {
|
|
|
99
103
|
/** Compact label for the mobile bottom nav (falls back to `label`). */
|
|
100
104
|
short?: string;
|
|
101
105
|
};
|
|
102
|
-
declare function SideNav({ items, activeId, onSelect, label, }: {
|
|
106
|
+
declare function SideNav({ items, activeId, onSelect, label, className, }: {
|
|
103
107
|
items: SideNavItem[];
|
|
104
108
|
activeId: string;
|
|
105
109
|
onSelect: (id: string) => void;
|
|
106
110
|
label?: string;
|
|
111
|
+
className?: string;
|
|
107
112
|
}): react.JSX.Element;
|
|
108
113
|
|
|
109
114
|
type PageSizeOption = {
|
|
@@ -132,6 +137,7 @@ declare function FormActions({ pending, editing, saveLabel, updateLabel, newLabe
|
|
|
132
137
|
replaceSaveWhenEditing?: boolean;
|
|
133
138
|
}): react.JSX.Element | null;
|
|
134
139
|
|
|
140
|
+
type MobileNavMode = "drawer" | "bottom" | "hybrid";
|
|
135
141
|
type AppShellProps = {
|
|
136
142
|
title: string;
|
|
137
143
|
logoSrc?: string;
|
|
@@ -142,8 +148,21 @@ type AppShellProps = {
|
|
|
142
148
|
activeNavId: string;
|
|
143
149
|
onNavSelect: (id: string) => void;
|
|
144
150
|
navLabel?: string;
|
|
145
|
-
/**
|
|
151
|
+
/**
|
|
152
|
+
* Small-screen navigation strategy.
|
|
153
|
+
* - `drawer` (default): hamburger opens a collapsible side menu; no crowded bottom bar
|
|
154
|
+
* - `bottom`: classic bottom nav from all `navItems` (fine for a few sections)
|
|
155
|
+
* - `hybrid`: compact bottom bar with current section + Menu that opens the drawer
|
|
156
|
+
*/
|
|
157
|
+
mobileNav?: MobileNavMode;
|
|
158
|
+
/**
|
|
159
|
+
* When true, renders the mobile bottom nav.
|
|
160
|
+
* Defaults to true for `bottom` / `hybrid`, false for `drawer`.
|
|
161
|
+
*/
|
|
146
162
|
showBottomNav?: boolean;
|
|
163
|
+
/** Controlled drawer open state (optional). */
|
|
164
|
+
navDrawerOpen?: boolean;
|
|
165
|
+
onNavDrawerOpenChange?: (open: boolean) => void;
|
|
147
166
|
topbarActions?: ReactNode;
|
|
148
167
|
children: ReactNode;
|
|
149
168
|
/** Extra class on the content/screen region */
|
|
@@ -151,9 +170,9 @@ type AppShellProps = {
|
|
|
151
170
|
};
|
|
152
171
|
/**
|
|
153
172
|
* Application chrome: topbar + left side nav + content screen.
|
|
154
|
-
*
|
|
173
|
+
* On small screens, prefers a collapsible drawer over a crowded bottom nav.
|
|
155
174
|
*/
|
|
156
|
-
declare function AppShell({ title, logoSrc, logoAlt, username, onLogout, navItems, activeNavId, onNavSelect, navLabel, showBottomNav, topbarActions, children, screenClassName, }: AppShellProps): react.JSX.Element;
|
|
175
|
+
declare function AppShell({ title, logoSrc, logoAlt, username, onLogout, navItems, activeNavId, onNavSelect, navLabel, mobileNav, showBottomNav, navDrawerOpen, onNavDrawerOpenChange, topbarActions, children, screenClassName, }: AppShellProps): react.JSX.Element;
|
|
157
176
|
|
|
158
177
|
type TableColumn<T> = {
|
|
159
178
|
key: string;
|
|
@@ -165,8 +184,19 @@ type TableColumn<T> = {
|
|
|
165
184
|
/** When set, filter uses an exact-match Select instead of text contains. */
|
|
166
185
|
filterOptions?: SelectOption[];
|
|
167
186
|
filterPlaceholder?: string;
|
|
187
|
+
/** When false, column starts hidden. Default true. */
|
|
188
|
+
defaultVisible?: boolean;
|
|
189
|
+
/** Key sent to export APIs when different from `key` (e.g. PascalCase property name). */
|
|
190
|
+
exportKey?: string;
|
|
191
|
+
};
|
|
192
|
+
/** Formats supported by the shared table download control (matches akscore TableExport). */
|
|
193
|
+
type ExportDownloadFormat = "csv" | "xlsx" | "json";
|
|
194
|
+
/** Column descriptors passed to `onDownload` (visible columns only). */
|
|
195
|
+
type ExportColumnRef = {
|
|
196
|
+
key: string;
|
|
197
|
+
header: string;
|
|
168
198
|
};
|
|
169
|
-
declare function RecordWorkspace<T>({ title, columns, items, rowKey, empty, onAdd, addLabel, canAdd, onView, onUpdate, onDelete, canUpdate, canDelete, toolbar, form, }: {
|
|
199
|
+
declare function RecordWorkspace<T>({ title, columns, items, rowKey, empty, onAdd, addLabel, canAdd, onView, onUpdate, onDelete, canUpdate, canDelete, onDownload, canDownload, downloadBusy, showColumnPicker, columnPrefsKey, visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange, toolbar, form, }: {
|
|
170
200
|
title: string;
|
|
171
201
|
columns: TableColumn<T>[];
|
|
172
202
|
items: T[];
|
|
@@ -180,6 +210,22 @@ declare function RecordWorkspace<T>({ title, columns, items, rowKey, empty, onAd
|
|
|
180
210
|
onDelete?: (item: T) => void;
|
|
181
211
|
canUpdate?: (item: T) => boolean;
|
|
182
212
|
canDelete?: (item: T) => boolean;
|
|
213
|
+
/**
|
|
214
|
+
* When set, shows CSV / Excel / JSON download controls.
|
|
215
|
+
* Second argument lists currently visible columns (exportKey ?? key).
|
|
216
|
+
*/
|
|
217
|
+
onDownload?: (format: ExportDownloadFormat, columns: ExportColumnRef[]) => void;
|
|
218
|
+
canDownload?: boolean;
|
|
219
|
+
downloadBusy?: boolean;
|
|
220
|
+
/** Column checklist in the side rail. Default true. */
|
|
221
|
+
showColumnPicker?: boolean;
|
|
222
|
+
/** Persist visible column keys in localStorage under this key. */
|
|
223
|
+
columnPrefsKey?: string;
|
|
224
|
+
/** Controlled visible column keys. */
|
|
225
|
+
visibleColumnKeys?: string[];
|
|
226
|
+
/** Uncontrolled initial visible keys (defaults to columns with defaultVisible !== false). */
|
|
227
|
+
defaultVisibleColumnKeys?: string[];
|
|
228
|
+
onVisibleColumnKeysChange?: (keys: string[]) => void;
|
|
183
229
|
toolbar?: ReactNode;
|
|
184
230
|
/** Slot for Add/Update/View dialogs owned by the host app. */
|
|
185
231
|
form?: ReactNode;
|
|
@@ -187,4 +233,4 @@ declare function RecordWorkspace<T>({ title, columns, items, rowKey, empty, onAd
|
|
|
187
233
|
/** @deprecated Prefer RecordWorkspace — alias kept for configurator migration */
|
|
188
234
|
declare const RecordTable: typeof RecordWorkspace;
|
|
189
235
|
|
|
190
|
-
export { type AksuiTokenName, AppSelect, type AppSelectOption, AppShell, type AppShellProps, Button, type ButtonVariant, ConfirmDeleteDialog, DateField, Dialog, FormActions, FormDialog, type PageSizeOption, Pagination, RecordTable, RecordWorkspace, Select, type SelectOption, SideNav, type SideNavItem, Snackbar, StatusMessage, type TableColumn, Topbar, aksuiThemeVersion, aksuiTokens };
|
|
236
|
+
export { type AksuiTokenName, AppSelect, type AppSelectOption, AppShell, type AppShellProps, Button, type ButtonVariant, ConfirmDeleteDialog, DateField, Dialog, type ExportColumnRef, type ExportDownloadFormat, FormActions, FormDialog, type MobileNavMode, type PageSizeOption, Pagination, RecordTable, RecordWorkspace, Select, type SelectOption, SideNav, type SideNavItem, Snackbar, StatusMessage, type TableColumn, Topbar, aksuiThemeVersion, aksuiTokens };
|