@rio-cloud/uikit-mcp 1.1.10 → 1.1.12
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/README.md +2 -1
- package/dist/doc-metadata.json +92 -92
- package/dist/docs/components/accentBar.md +1 -1
- package/dist/docs/components/activity.md +1 -1
- package/dist/docs/components/analyticsAnalysisOverlay.md +3 -1
- package/dist/docs/components/animatedNumber.md +2 -2
- package/dist/docs/components/animatedTextReveal.md +6 -6
- package/dist/docs/components/animations.md +22 -22
- package/dist/docs/components/appHeader.md +1 -1
- package/dist/docs/components/appLayout.md +31 -65
- package/dist/docs/components/appNavigationBar.md +1 -1
- package/dist/docs/components/areaCharts.md +7 -5
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
- package/dist/docs/components/assetTree.md +160 -142
- package/dist/docs/components/autosuggests.md +1 -1
- package/dist/docs/components/avatar.md +1 -1
- package/dist/docs/components/banner.md +2 -2
- package/dist/docs/components/barCharts.md +16 -14
- package/dist/docs/components/barList.md +9 -9
- package/dist/docs/components/basicMap.md +45 -1
- package/dist/docs/components/bottomSheet.md +1 -1
- package/dist/docs/components/button.md +1 -1
- package/dist/docs/components/buttonToolbar.md +1 -1
- package/dist/docs/components/calendarStripe.md +56 -56
- package/dist/docs/components/card.md +1 -1
- package/dist/docs/components/carousel.md +1 -1
- package/dist/docs/components/chartColors.md +3 -1
- package/dist/docs/components/chartsGettingStarted.md +3 -1
- package/dist/docs/components/chat.md +1 -1
- package/dist/docs/components/checkbox.md +3 -1
- package/dist/docs/components/circularProgress.md +5 -5
- package/dist/docs/components/clearableInput.md +1 -1
- package/dist/docs/components/collapse.md +4 -2
- package/dist/docs/components/composedCharts.md +17 -15
- package/dist/docs/components/contentLoader.md +1 -1
- package/dist/docs/components/dataTabs.md +1 -1
- package/dist/docs/components/datepickers.md +662 -660
- package/dist/docs/components/dayPicker.md +55 -5
- package/dist/docs/components/dayPickerCalendar.md +488 -468
- package/dist/docs/components/dialogs.md +1 -1
- package/dist/docs/components/divider.md +1 -1
- package/dist/docs/components/dropdowns.md +3270 -3244
- package/dist/docs/components/editableContent.md +1 -1
- package/dist/docs/components/expander.md +1 -1
- package/dist/docs/components/fade.md +1 -1
- package/dist/docs/components/fadeExpander.md +1 -1
- package/dist/docs/components/fadeUp.md +2 -2
- package/dist/docs/components/feedback.md +1 -1
- package/dist/docs/components/filePickers.md +1 -1
- package/dist/docs/components/formLabel.md +1 -1
- package/dist/docs/components/groupedItemList.md +1 -1
- package/dist/docs/components/htmlTable.md +113 -115
- package/dist/docs/components/iconList.md +3 -3
- package/dist/docs/components/imagePreloader.md +1 -1
- package/dist/docs/components/labeledElement.md +1 -1
- package/dist/docs/components/licensePlate.md +1 -1
- package/dist/docs/components/lineCharts.md +6 -4
- package/dist/docs/components/listMenu.md +1 -1
- package/dist/docs/components/loadMore.md +1 -1
- package/dist/docs/components/mainNavigation.md +1 -1
- package/dist/docs/components/mapCircle.md +1 -1
- package/dist/docs/components/mapCluster.md +3 -1
- package/dist/docs/components/mapContext.md +1 -1
- package/dist/docs/components/mapDraggableMarker.md +1 -1
- package/dist/docs/components/mapGettingStarted.md +39 -1
- package/dist/docs/components/mapInfoBubble.md +1 -1
- package/dist/docs/components/mapLayerGroup.md +1 -1
- package/dist/docs/components/mapMarker.md +3 -1
- package/dist/docs/components/mapPolygon.md +1 -1
- package/dist/docs/components/mapRoute.md +1 -1
- package/dist/docs/components/mapSettings.md +36 -9
- package/dist/docs/components/mapUtils.md +65 -2
- package/dist/docs/components/mapViewportHistory.md +287 -0
- package/dist/docs/components/multiselects.md +171 -1
- package/dist/docs/components/noData.md +1 -1
- package/dist/docs/components/notifications.md +1 -1
- package/dist/docs/components/numbercontrol.md +1 -1
- package/dist/docs/components/onboarding.md +1 -1
- package/dist/docs/components/page.md +1 -1
- package/dist/docs/components/pager.md +1 -1
- package/dist/docs/components/pieCharts.md +38 -36
- package/dist/docs/components/popover.md +1 -1
- package/dist/docs/components/position.md +1 -1
- package/dist/docs/components/radialBarCharts.md +27 -25
- package/dist/docs/components/radioCardGroup.md +1 -1
- package/dist/docs/components/radiobutton.md +3 -1
- package/dist/docs/components/releaseNotes.md +1 -1
- package/dist/docs/components/resizer.md +3 -1
- package/dist/docs/components/responsiveColumnStripe.md +3 -1
- package/dist/docs/components/responsiveVideo.md +1 -1
- package/dist/docs/components/rioglyph.md +1 -1
- package/dist/docs/components/rules.md +1 -1
- package/dist/docs/components/saveableInput.md +247 -247
- package/dist/docs/components/selects.md +168 -51
- package/dist/docs/components/sidebar.md +1 -1
- package/dist/docs/components/sliders.md +1 -1
- package/dist/docs/components/smoothScrollbars.md +3 -1
- package/dist/docs/components/spinners.md +1 -1
- package/dist/docs/components/states.md +15 -1
- package/dist/docs/components/statsWidgets.md +1 -1
- package/dist/docs/components/statusBar.md +3 -1
- package/dist/docs/components/stepButton.md +1 -1
- package/dist/docs/components/steppedProgressBars.md +1 -1
- package/dist/docs/components/subNavigation.md +1 -1
- package/dist/docs/components/supportMarker.md +1 -1
- package/dist/docs/components/svgImage.md +1 -1
- package/dist/docs/components/switch.md +3 -1
- package/dist/docs/components/table.md +1998 -221
- package/dist/docs/components/tableControls.md +51 -51
- package/dist/docs/components/tagManager.md +1 -1
- package/dist/docs/components/tags.md +1 -1
- package/dist/docs/components/teaser.md +3 -1
- package/dist/docs/components/textTruncateMiddle.md +1 -1
- package/dist/docs/components/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +3 -1
- package/dist/docs/components/toggleButton.md +1 -1
- package/dist/docs/components/tooltip.md +5 -1
- package/dist/docs/components/tracker.md +1 -1
- package/dist/docs/components/virtualList.md +58 -56
- package/dist/docs/foundations.md +271 -105
- package/dist/docs/start/changelog.md +44 -212
- package/dist/docs/start/goodtoknow.md +8 -2
- package/dist/docs/start/guidelines/color-combinations.md +5 -1
- package/dist/docs/start/guidelines/custom-css.md +26 -2
- package/dist/docs/start/guidelines/custom-rioglyph.md +20 -2
- package/dist/docs/start/guidelines/formatting.md +2256 -249
- package/dist/docs/start/guidelines/iframe.md +37 -1
- package/dist/docs/start/guidelines/obfuscate-data.md +26 -2
- package/dist/docs/start/guidelines/print-css.md +16 -2
- package/dist/docs/start/guidelines/spinner.md +1 -1
- package/dist/docs/start/guidelines/state-in-url.md +1138 -11
- package/dist/docs/start/guidelines/supported-browsers.md +9 -2
- package/dist/docs/start/guidelines/writing.md +228 -2
- package/dist/docs/start/howto.md +160 -10
- package/dist/docs/start/intro.md +40 -2
- package/dist/docs/start/responsiveness.md +29 -1
- package/dist/docs/templates/ai-assistant.md +1 -1
- package/dist/docs/templates/common-table.md +55 -55
- package/dist/docs/templates/detail-views.md +2 -2
- package/dist/docs/templates/expandable-details.md +1 -1
- package/dist/docs/templates/feature-cards.md +37 -37
- package/dist/docs/templates/form-summary.md +15 -15
- package/dist/docs/templates/form-toggle.md +1 -1
- package/dist/docs/templates/list-blocks.md +137 -137
- package/dist/docs/templates/loading-progress.md +1 -1
- package/dist/docs/templates/options-panel.md +1 -1
- package/dist/docs/templates/panel-variants.md +1 -1
- package/dist/docs/templates/progress-cards.md +1 -1
- package/dist/docs/templates/progress-success.md +1 -1
- package/dist/docs/templates/settings-form.md +18 -18
- package/dist/docs/templates/stats-blocks.md +10 -10
- package/dist/docs/templates/table-panel.md +1 -1
- package/dist/docs/templates/usage-cards.md +1 -1
- package/dist/docs/utilities/classNames.md +89 -1
- package/dist/docs/utilities/deviceUtils.md +1 -1
- package/dist/docs/utilities/featureToggles.md +182 -2
- package/dist/docs/utilities/fuelTypeUtils.md +1 -1
- package/dist/docs/utilities/getTrackingAttributes.md +46 -1
- package/dist/docs/utilities/routeUtils.md +210 -2
- package/dist/docs/utilities/useAfterMount.md +1 -1
- package/dist/docs/utilities/useAutoAnimate.md +1 -1
- package/dist/docs/utilities/useAverage.md +1 -1
- package/dist/docs/utilities/useClickOutside.md +1 -1
- package/dist/docs/utilities/useClipboard.md +2 -2
- package/dist/docs/utilities/useCookies.md +1 -1
- package/dist/docs/utilities/useCount.md +1 -1
- package/dist/docs/utilities/useDarkMode.md +1 -1
- package/dist/docs/utilities/useDebugInfo.md +3 -3
- package/dist/docs/utilities/useDraggableElement.md +1 -1
- package/dist/docs/utilities/useEffectOnce.md +1 -1
- package/dist/docs/utilities/useElapsedTime.md +1 -1
- package/dist/docs/utilities/useElementSize.md +1 -1
- package/dist/docs/utilities/useEsc.md +1 -1
- package/dist/docs/utilities/useEvent.md +1 -1
- package/dist/docs/utilities/useFocusTrap.md +1 -1
- package/dist/docs/utilities/useFullscreen.md +1 -1
- package/dist/docs/utilities/useHover.md +1 -1
- package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
- package/dist/docs/utilities/useInterval.md +1 -1
- package/dist/docs/utilities/useIsFocusWithin.md +1 -1
- package/dist/docs/utilities/useKey.md +1 -1
- package/dist/docs/utilities/useLocalStorage.md +1 -1
- package/dist/docs/utilities/useLocationSuggestions.md +1 -1
- package/dist/docs/utilities/useMax.md +1 -1
- package/dist/docs/utilities/useMin.md +1 -1
- package/dist/docs/utilities/useMutationObserver.md +1 -1
- package/dist/docs/utilities/useOnScreen.md +1 -1
- package/dist/docs/utilities/useOnlineStatus.md +1 -1
- package/dist/docs/utilities/usePostMessage.md +1 -1
- package/dist/docs/utilities/usePostMessageSender.md +1 -1
- package/dist/docs/utilities/usePrevious.md +111 -1
- package/dist/docs/utilities/useResizeObserver.md +1 -1
- package/dist/docs/utilities/useRioCookieConsent.md +1 -1
- package/dist/docs/utilities/useScrollPosition.md +1 -1
- package/dist/docs/utilities/useSearch.md +1 -1
- package/dist/docs/utilities/useSearchHighlight.md +1 -1
- package/dist/docs/utilities/useSorting.md +1 -1
- package/dist/docs/utilities/useStateWithValidation.md +1 -1
- package/dist/docs/utilities/useSum.md +1 -1
- package/dist/docs/utilities/useTableExport.md +61 -61
- package/dist/docs/utilities/useTableSelection.md +72 -72
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useUrlState.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +174 -70
- package/dist/search-synonyms.json +214 -76
- package/dist/version.json +2 -2
- package/package.json +8 -6
- package/dist/docs/components/mapRouteGenerator.md +0 -6
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Helper
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/routeUtils
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:23.940Z
|
|
7
7
|
|
|
8
8
|
Utility helpers for parsing and serializing URL state. These are low-level building blocks for service-specific mapping.
|
|
9
9
|
|
|
@@ -17,6 +17,19 @@ If you use UrlConfigItem with useUrlState, set an explicit defaultValue for ever
|
|
|
17
17
|
|
|
18
18
|
## Route utils overview
|
|
19
19
|
|
|
20
|
+
| Export | Good for |
|
|
21
|
+
| --- | --- |
|
|
22
|
+
| getSortDirShort | Serialize sort direction into compact empty / - prefixes. |
|
|
23
|
+
| serializeSorting | Serialize sort state into a compact URL value like -name. |
|
|
24
|
+
| parseSorting | Parse +name / -name into sortBy and sortDir values. |
|
|
25
|
+
| mapColumnsSettingsToStrings | Serialize table column order, visibility, and widths into compact strings. |
|
|
26
|
+
| parseColumnsSettingsStrings | Parse compact column strings back into column settings with defaults. |
|
|
27
|
+
| serializeValue | Serialize primitive/array/object values to URL-compatible strings. |
|
|
28
|
+
| deserializeValue | Parse URL strings into typed values (number, boolean, arrays, object). |
|
|
29
|
+
| toQueryString | Build readable query strings (keeps commas/colons readable for complex values). |
|
|
30
|
+
| isEqual | Deep compare helper re-exported for state diffing in URL sync code. |
|
|
31
|
+
| UrlTypeMap, UrlValueType, UrlConfigItem | Core typing primitives for typed URL config definitions, including mandatory defaults and history behavior. |
|
|
32
|
+
|
|
20
33
|
## Simple state in URL
|
|
21
34
|
|
|
22
35
|
Example for manual parse/stringify helpers in a service file.
|
|
@@ -53,6 +66,107 @@ params . set ( 'tabId' , tabId ) ; } } const tags = serializeValue ( state . tag
|
|
|
53
66
|
params . set ( 'tags' , tags ) ; } if ( state . showArchived ) { const archived = serializeValue ( state . showArchived , 'boolean' ) ; if ( archived ) {
|
|
54
67
|
params . set ( 'archived' , archived ) ; } } const queryString = params . toString ( ) ; return ` ${ BASE_PATH } / ${ queryString ? ` ? ${ queryString } ` : '' } ` ; } ;
|
|
55
68
|
|
|
69
|
+
#### Code (text)
|
|
70
|
+
|
|
71
|
+
```text
|
|
72
|
+
import { deserializeValue, serializeValue } from '@rio-cloud/rio-uikit/routeUtils';
|
|
73
|
+
|
|
74
|
+
// Adapt to your configuration
|
|
75
|
+
const BASE_PATH = 'my-service';
|
|
76
|
+
const VIEW_OPTIONS = ['list', 'grid'] as const;
|
|
77
|
+
|
|
78
|
+
type ViewType = (typeof VIEW_OPTIONS)[number];
|
|
79
|
+
const DEFAULT_VIEW: ViewType = 'list';
|
|
80
|
+
const DEFAULT_TAB_ID = 1;
|
|
81
|
+
|
|
82
|
+
type RouterLike = { location?: Location };
|
|
83
|
+
type RouteState = {
|
|
84
|
+
query: string;
|
|
85
|
+
view: ViewType;
|
|
86
|
+
tabId: number;
|
|
87
|
+
tags: string[];
|
|
88
|
+
showArchived: boolean;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
const isViewType = (value: string): value is ViewType => (VIEW_OPTIONS as readonly string[]).includes(value);
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* Reads URL state from a router-like object.
|
|
95
|
+
* Useful when you want a lightweight parser without a hook.
|
|
96
|
+
*
|
|
97
|
+
* Note: Optional service helper when you only need a one-off parse.
|
|
98
|
+
* For reactive state sync, use the `useUrlState` hook instead.
|
|
99
|
+
*
|
|
100
|
+
* @example
|
|
101
|
+
* const state = parseRoute({ location: window.location });
|
|
102
|
+
*/
|
|
103
|
+
export const parseRoute = (router: RouterLike): RouteState => {
|
|
104
|
+
const location = (router?.location ?? {}) as Location;
|
|
105
|
+
const params = new URLSearchParams(location.search || '');
|
|
106
|
+
|
|
107
|
+
const parsedView = deserializeValue(params.get('view'), 'string');
|
|
108
|
+
const parsedTabId = deserializeValue(params.get('tabId'), 'number');
|
|
109
|
+
const parsedTags = deserializeValue(params.get('tags'), 'array');
|
|
110
|
+
const parsedArchived = deserializeValue(params.get('archived'), 'boolean');
|
|
111
|
+
|
|
112
|
+
return {
|
|
113
|
+
query: deserializeValue(params.get('q'), 'string') ?? '',
|
|
114
|
+
view: parsedView && isViewType(parsedView) ? parsedView : DEFAULT_VIEW,
|
|
115
|
+
tabId: parsedTabId ?? DEFAULT_TAB_ID,
|
|
116
|
+
tags: parsedTags ?? [],
|
|
117
|
+
showArchived: parsedArchived ?? false,
|
|
118
|
+
};
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* Builds a deep-link URL for a given state.
|
|
123
|
+
* Useful for linking to a screen with preselected filters.
|
|
124
|
+
*
|
|
125
|
+
* Note: Optional service helper when you only need to build a link.
|
|
126
|
+
* For reactive state sync, use the `useUrlState` hook instead.
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* const url = makeRoute({ query: 'rio', view: 'list', tabId: 2, tags: ['banana'], showArchived: false });
|
|
130
|
+
*/
|
|
131
|
+
export const makeRoute = (state: RouteState) => {
|
|
132
|
+
const params = new URLSearchParams();
|
|
133
|
+
|
|
134
|
+
const query = serializeValue(state.query, 'string');
|
|
135
|
+
if (query) {
|
|
136
|
+
params.set('q', query);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
if (state.view !== DEFAULT_VIEW) {
|
|
140
|
+
const view = serializeValue(state.view, 'string');
|
|
141
|
+
if (view) {
|
|
142
|
+
params.set('view', view);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
if (state.tabId !== DEFAULT_TAB_ID) {
|
|
147
|
+
const tabId = serializeValue(state.tabId, 'number');
|
|
148
|
+
if (tabId) {
|
|
149
|
+
params.set('tabId', tabId);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
const tags = serializeValue(state.tags, 'array');
|
|
154
|
+
if (tags) {
|
|
155
|
+
params.set('tags', tags);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
if (state.showArchived) {
|
|
159
|
+
const archived = serializeValue(state.showArchived, 'boolean');
|
|
160
|
+
if (archived) {
|
|
161
|
+
params.set('archived', archived);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
const queryString = params.toString();
|
|
166
|
+
return `${BASE_PATH}/${queryString ? `?${queryString}` : ''}`;
|
|
167
|
+
};
|
|
168
|
+
```
|
|
169
|
+
|
|
56
170
|
## TableSettingsDialog state
|
|
57
171
|
|
|
58
172
|
Example for compact sort + table settings mapping with dedicated helpers.
|
|
@@ -89,4 +203,98 @@ type mapRouteProps = { sortBy : string ; sortDir : SortDirectionType ; columns :
|
|
|
89
203
|
* const url = makeRoute({ sortBy: 'name', sortDir: 'asc', columns });
|
|
90
204
|
*/ export const makeRoute = ( { sortBy , sortDir , columns } : mapRouteProps ) => { const params = new URLSearchParams ( ) ; if ( sortBy ) { // Use serializeSorting for compact empty / - prefix behavior. const serializedSort = serializeSorting ( { sortBy , sortDir } ) ; if ( serializedSort ) {
|
|
91
205
|
params . set ( 'sort' , serializedSort ) ; } } const mappedColumns = mapColumnsSettingsToStrings ( columns ) ; const serializedColumns = serializeValue ( mappedColumns , 'array' ) ; if ( serializedColumns ) {
|
|
92
|
-
params . set ( 'columns' , serializedColumns ) ; } const queryString = params . toString ( ) ; const searchFragment = queryString ? ` ? ${ queryString } ` : '' ; return ` ${ BASE_PATH } / ${ searchFragment } ` ; } ;
|
|
206
|
+
params . set ( 'columns' , serializedColumns ) ; } const queryString = params . toString ( ) ; const searchFragment = queryString ? ` ? ${ queryString } ` : '' ; return ` ${ BASE_PATH } / ${ searchFragment } ` ; } ;
|
|
207
|
+
|
|
208
|
+
#### Code (text)
|
|
209
|
+
|
|
210
|
+
```text
|
|
211
|
+
import {
|
|
212
|
+
deserializeValue,
|
|
213
|
+
mapColumnsSettingsToStrings,
|
|
214
|
+
parseColumnsSettingsStrings,
|
|
215
|
+
parseSorting,
|
|
216
|
+
serializeSorting,
|
|
217
|
+
serializeValue,
|
|
218
|
+
} from '@rio-cloud/rio-uikit/routeUtils';
|
|
219
|
+
import type { SortDirectionType } from '@rio-cloud/rio-uikit/SortUtils';
|
|
220
|
+
import type { TableColumnsSettings } from '@rio-cloud/rio-uikit/TableSettingsDialog';
|
|
221
|
+
|
|
222
|
+
// TableSettingsDialog state example.
|
|
223
|
+
// Adapt to your configuration
|
|
224
|
+
const BASE_PATH = 'my-service';
|
|
225
|
+
const defaultColumnsDetails: Record<string, { width: number; defaultWidth?: number }> = {
|
|
226
|
+
name: {
|
|
227
|
+
width: 250,
|
|
228
|
+
defaultWidth: 250,
|
|
229
|
+
},
|
|
230
|
+
};
|
|
231
|
+
|
|
232
|
+
// Sample code for parsing the route just for illustration how to use the utils functions
|
|
233
|
+
// Feel free to modify this to your needs.
|
|
234
|
+
// Note: the "parseRoute" and "makeRoute" functions may contain more props which are left out in this demo
|
|
235
|
+
type RouterLike = { location?: Location };
|
|
236
|
+
|
|
237
|
+
/**
|
|
238
|
+
* Reads table settings state from a router-like object.
|
|
239
|
+
*
|
|
240
|
+
* Note: Optional service helper when you only need a one-off parse.
|
|
241
|
+
* For reactive state sync, use the `useUrlState` hook instead.
|
|
242
|
+
*
|
|
243
|
+
* @example
|
|
244
|
+
* const state = parseRoute({ location: window.location });
|
|
245
|
+
*/
|
|
246
|
+
export const parseRoute = (router: RouterLike) => {
|
|
247
|
+
const location = (router?.location ?? {}) as Location;
|
|
248
|
+
const params = new URLSearchParams(location.search || '');
|
|
249
|
+
|
|
250
|
+
const sortValue = deserializeValue(params.get('sort'), 'string');
|
|
251
|
+
const sorting = sortValue ? parseSorting(sortValue) : undefined;
|
|
252
|
+
|
|
253
|
+
const columnsList = deserializeValue(params.get('columns'), 'array');
|
|
254
|
+
const columns = columnsList ? parseColumnsSettingsStrings(columnsList, defaultColumnsDetails) : undefined;
|
|
255
|
+
|
|
256
|
+
return {
|
|
257
|
+
sortBy: sorting?.sortBy,
|
|
258
|
+
sortDir: sorting?.sortDir,
|
|
259
|
+
columns,
|
|
260
|
+
};
|
|
261
|
+
};
|
|
262
|
+
|
|
263
|
+
type mapRouteProps = {
|
|
264
|
+
sortBy: string;
|
|
265
|
+
sortDir: SortDirectionType;
|
|
266
|
+
columns: TableColumnsSettings;
|
|
267
|
+
};
|
|
268
|
+
|
|
269
|
+
/**
|
|
270
|
+
* Builds a deep-link URL for a given table settings state.
|
|
271
|
+
*
|
|
272
|
+
* Note: Optional service helper when you only need to build a link.
|
|
273
|
+
* For reactive state sync, use the `useUrlState` hook instead.
|
|
274
|
+
*
|
|
275
|
+
* @example
|
|
276
|
+
* const url = makeRoute({ sortBy: 'name', sortDir: 'asc', columns });
|
|
277
|
+
*/
|
|
278
|
+
export const makeRoute = ({ sortBy, sortDir, columns }: mapRouteProps) => {
|
|
279
|
+
const params = new URLSearchParams();
|
|
280
|
+
|
|
281
|
+
if (sortBy) {
|
|
282
|
+
// Use serializeSorting for compact empty / - prefix behavior.
|
|
283
|
+
const serializedSort = serializeSorting({ sortBy, sortDir });
|
|
284
|
+
if (serializedSort) {
|
|
285
|
+
params.set('sort', serializedSort);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
const mappedColumns = mapColumnsSettingsToStrings(columns);
|
|
290
|
+
const serializedColumns = serializeValue(mappedColumns, 'array');
|
|
291
|
+
if (serializedColumns) {
|
|
292
|
+
params.set('columns', serializedColumns);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
const queryString = params.toString();
|
|
296
|
+
const searchFragment = queryString ? `?${queryString}` : '';
|
|
297
|
+
|
|
298
|
+
return `${BASE_PATH}/${searchFragment}`;
|
|
299
|
+
};
|
|
300
|
+
```
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useAfterMount
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:25.263Z
|
|
7
7
|
|
|
8
8
|
The useAfterMount hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useAutoAnimate
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:27.892Z
|
|
7
7
|
|
|
8
8
|
The useAutoAnimate hook is a thin re-export of the @formkit/auto-animate utility to quickly add enter/leave animations to a container. This page shows a simple example; for full configuration options, check the official documentation.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useAverage
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:40.159Z
|
|
7
7
|
|
|
8
8
|
Calculates the arithmetic mean of numeric values extracted from a list of objects using a dot-separated path. Supports localized number formats through optional locale configuration.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useClickOutside
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:28.309Z
|
|
7
7
|
|
|
8
8
|
The useClickOutside hook allows to easily detect events outside a referenced element.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useClipboard
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:33.855Z
|
|
7
7
|
|
|
8
8
|
The useClipboard hook allows to easily copy something to the browsers clipboard.
|
|
9
9
|
|
|
@@ -71,7 +71,7 @@ export default () => {
|
|
|
71
71
|
<span>Random UUID</span>
|
|
72
72
|
</label>
|
|
73
73
|
<div class="input-group">
|
|
74
|
-
<input id="random-uuid" class="form-control" type="text" value="
|
|
74
|
+
<input id="random-uuid" class="form-control" type="text" value="e8fe963c-2bdc-4225-bbbb-1a7368769772">
|
|
75
75
|
<div class="input-group-addon">
|
|
76
76
|
<button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component position-absolute top-1 right-1" tabindex="0">
|
|
77
77
|
<span class="rioglyph rioglyph-duplicate">
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useCookies
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:34.692Z
|
|
7
7
|
|
|
8
8
|
The useCookies hook allows you to set cookies, delete cookies and check whether a cookie exists in the browser.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useCount
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:40.508Z
|
|
7
7
|
|
|
8
8
|
useCount is a utility hook for counting how many objects in a list contain a specific value or match a custom condition at a given property path. It supports exact value matching (e.g. true, 0, 'PENDING') or predicate-based logic using a match function. By default, all values that are not null or undefined are counted.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDarkMode
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:34.911Z
|
|
7
7
|
|
|
8
8
|
The useDarkMode hook enables you to listen for the color scheme change and react accordingly.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDebugInfo
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:37.547Z
|
|
7
7
|
|
|
8
8
|
The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.
|
|
9
9
|
|
|
@@ -18,7 +18,7 @@ Debug Info: {
|
|
|
18
18
|
"renderCount": 1,
|
|
19
19
|
"changedProps": {},
|
|
20
20
|
"timeSinceLastRender": 0,
|
|
21
|
-
"lastRenderTimestamp":
|
|
21
|
+
"lastRenderTimestamp": 1778069736848
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
Toggle Increment
|
|
@@ -93,7 +93,7 @@ export default () => {
|
|
|
93
93
|
"renderCount": 1,
|
|
94
94
|
"changedProps": {},
|
|
95
95
|
"timeSinceLastRender": 0,
|
|
96
|
-
"lastRenderTimestamp":
|
|
96
|
+
"lastRenderTimestamp": 1778069736848
|
|
97
97
|
}</pre>
|
|
98
98
|
</div>
|
|
99
99
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useDraggableElement
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:29.128Z
|
|
7
7
|
|
|
8
8
|
The useDraggableElement hook provides drag behavior for an element. It manages pointer events, viewport clamping and draggable position state for UI elements like floating panels or overlays. Viewport mode renders through the shared portal root, while container mode is intended for absolutely positioned elements that must stay aligned with a scrollable boundary. The hook can also apply an initial position, including centered placement. The renderElement helper is mainly relevant for viewport mode; in container mode it simply returns the element unchanged.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEffectOnce
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:25.379Z
|
|
7
7
|
|
|
8
8
|
The useEffectOnce hook allows to use a side effect only once after the component has been mounted.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useElementSize
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:28.837Z
|
|
7
7
|
|
|
8
8
|
The useElementSize hook allows to easily detect an elements dimension.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEsc
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:29.338Z
|
|
7
7
|
|
|
8
8
|
The useEsc hook allows to easily detect keydown events for escape key to to react on. This comes in handy when closing something or aborting some operation on esc.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useEvent
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:37.680Z
|
|
7
7
|
|
|
8
8
|
The useEvent hook allows to easily detect given events registered on the document.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useFocusTrap
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:29.744Z
|
|
7
7
|
|
|
8
8
|
This custom hook allows to keep the focus inside a defined wrapper element. This might be a dialog or a custom overlay.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useFullscreen
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:31.001Z
|
|
7
7
|
|
|
8
8
|
The cross-browser useFullscreen hook allows to easily switch to fullscreen mode for the document or a dedicated element like a map or a certain part of a service.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useIncomingPostMessages
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:35.146Z
|
|
7
7
|
|
|
8
8
|
For handling postMessage events in React components.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Lifecycle & execution hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useInterval
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:26.457Z
|
|
7
7
|
|
|
8
8
|
The useInterval hook allows for executing some code after a specified amount of time.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useIsFocusWithin
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:30.755Z
|
|
7
7
|
|
|
8
8
|
The useIsFocusWithin hook allows you to detect whether the focus is currently within a specific element or any of its children. This is useful for managing focus-based behavior like showing or hiding UI elements, styling active areas, or triggering accessibility behavior.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useKey
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:31.154Z
|
|
7
7
|
|
|
8
8
|
The useKey hook allows to easily detect key events. It can be used in two ways, either to specify a specific key to listen for or with a callback to listen for all keys.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useLocalStorage
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:36.140Z
|
|
7
7
|
|
|
8
8
|
The useLocalStorage and the useSessionStorage hook allows to save custom data in the respective storage locations.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* UI state & input hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useLocationSuggestions
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:37.874Z
|
|
7
7
|
|
|
8
8
|
The useLocationSuggestions hook allows to use a side effect after the component has been mounted and rendered. The effect will not be triggered on mount and only when the dependencies change.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMax
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:40.805Z
|
|
7
7
|
|
|
8
8
|
Returns the largest valid numeric value found at the specified path within a list of objects. Supports localized formats and gracefully skips unparsable values.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Data aggregation hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMin
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:41.534Z
|
|
7
7
|
|
|
8
8
|
Returns the smallest valid numeric value found at the specified path within a list of objects. Handles localized number strings and safely ignores invalid values.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useMutationObserver
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:32.075Z
|
|
7
7
|
|
|
8
8
|
The useMutationObserver hook enables you to listen for changes on the given element or on its children. For more details, check out https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* DOM behavior hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useOnScreen
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:32.413Z
|
|
7
7
|
|
|
8
8
|
The useOnScreen hook tells you when an element is visible on screen.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/useOnlineStatus
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:36.264Z
|
|
7
7
|
|
|
8
8
|
The useOnlineStatus hook tells you when there is a network connection or not.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/usePostMessage
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:36.426Z
|
|
7
7
|
|
|
8
8
|
The usePostMessage hook allows to easily exchange events and data between the parent window and embedded iframes.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Utilities
|
|
4
4
|
*Section:* Browser & device hooks
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#/utilities/usePostMessageSender
|
|
6
|
-
*Captured:* 2026-
|
|
6
|
+
*Captured:* 2026-05-06T12:15:36.663Z
|
|
7
7
|
|
|
8
8
|
Helper hook to fire postMessage events to other windows: a specific target (including yourself), the parent or top window, or every iframe on the page. It uses the wildcard target origin (*) and no-ops when a target window is missing, so it is safe to call even when an iframe or parent is not present.
|
|
9
9
|
|