@rio-cloud/uikit-mcp 1.1.0 → 1.1.2
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 +1 -0
- package/dist/doc-metadata.json +20 -20
- package/dist/docs/components/accentBar.md +1 -1
- package/dist/docs/components/activity.md +1 -1
- package/dist/docs/components/animatedNumber.md +2 -2
- package/dist/docs/components/animatedTextReveal.md +6 -6
- package/dist/docs/components/animations.md +31 -31
- package/dist/docs/components/appHeader.md +1 -1
- package/dist/docs/components/appLayout.md +74 -16
- package/dist/docs/components/appNavigationBar.md +1 -1
- package/dist/docs/components/areaCharts.md +5 -5
- package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
- package/dist/docs/components/assetTree.md +371 -464
- 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 +13 -33
- package/dist/docs/components/barList.md +11 -11
- package/dist/docs/components/basicMap.md +1 -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 +50 -66
- package/dist/docs/components/card.md +1 -1
- package/dist/docs/components/carousel.md +1 -1
- package/dist/docs/components/chartColors.md +1 -1
- package/dist/docs/components/chartsGettingStarted.md +1 -1
- package/dist/docs/components/chat.md +1 -1
- package/dist/docs/components/checkbox.md +1 -1
- package/dist/docs/components/clearableInput.md +1 -1
- package/dist/docs/components/collapse.md +2 -2
- package/dist/docs/components/composedCharts.md +15 -15
- package/dist/docs/components/contentLoader.md +101 -101
- package/dist/docs/components/dataTabs.md +9 -9
- package/dist/docs/components/datepickers.md +29 -29
- package/dist/docs/components/dialogs.md +1 -1
- package/dist/docs/components/divider.md +1 -1
- package/dist/docs/components/dropdowns.md +4398 -4368
- 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/fullscreenMap.md +1 -1
- package/dist/docs/components/groupedItemList.md +1 -1
- 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 +5 -5
- 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 +1 -1
- package/dist/docs/components/mapContext.md +1 -1
- package/dist/docs/components/mapDraggableMarker.md +1 -1
- package/dist/docs/components/mapGettingStarted.md +1 -1
- package/dist/docs/components/mapInfoBubble.md +1 -1
- package/dist/docs/components/mapLayerGroup.md +1 -1
- package/dist/docs/components/mapMarker.md +1 -1
- package/dist/docs/components/mapPolygon.md +1 -1
- package/dist/docs/components/mapRoute.md +1 -1
- package/dist/docs/components/mapRouteGenerator.md +1 -1
- package/dist/docs/components/mapSettings.md +1 -1
- package/dist/docs/components/mapUtils.md +1 -1
- package/dist/docs/components/multiselects.md +1 -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 +69 -37
- package/dist/docs/components/popover.md +1 -1
- package/dist/docs/components/position.md +1 -1
- package/dist/docs/components/radialBarCharts.md +17 -17
- package/dist/docs/components/radiobutton.md +1 -1
- package/dist/docs/components/releaseNotes.md +1 -1
- package/dist/docs/components/resizer.md +1 -1
- package/dist/docs/components/responsiveColumnStripe.md +1 -1
- package/dist/docs/components/responsiveVideo.md +1 -1
- package/dist/docs/components/rioglyph.md +1 -1
- package/dist/docs/components/rules.md +3 -3
- package/dist/docs/components/saveableInput.md +19 -19
- package/dist/docs/components/selects.md +1 -1
- package/dist/docs/components/sidebar.md +1 -1
- package/dist/docs/components/sliders.md +1 -1
- package/dist/docs/components/smoothScrollbars.md +1 -1
- package/dist/docs/components/spinners.md +1 -1
- package/dist/docs/components/states.md +1 -1
- package/dist/docs/components/statsWidgets.md +1 -1
- package/dist/docs/components/statusBar.md +1 -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 +1 -1
- package/dist/docs/components/tables.md +1 -1
- package/dist/docs/components/tagManager.md +1 -1
- package/dist/docs/components/tags.md +1 -1
- package/dist/docs/components/teaser.md +1 -1
- package/dist/docs/components/timeline.md +1 -1
- package/dist/docs/components/timepicker.md +1 -1
- package/dist/docs/components/toggleButton.md +1 -1
- package/dist/docs/components/tooltip.md +1 -1
- package/dist/docs/components/virtualList.md +73 -70
- package/dist/docs/foundations.md +112 -112
- package/dist/docs/start/changelog.md +715 -434
- package/dist/docs/start/goodtoknow.md +1 -1
- package/dist/docs/start/guidelines/color-combinations.md +1 -1
- package/dist/docs/start/guidelines/custom-css.md +1 -1
- package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
- package/dist/docs/start/guidelines/formatting.md +1 -1
- package/dist/docs/start/guidelines/iframe.md +2 -2
- package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
- package/dist/docs/start/guidelines/print-css.md +1 -1
- package/dist/docs/start/guidelines/spinner.md +81 -81
- package/dist/docs/start/guidelines/supported-browsers.md +1 -1
- package/dist/docs/start/guidelines/writing.md +1 -1
- package/dist/docs/start/howto.md +9 -9
- package/dist/docs/start/intro.md +1 -1
- package/dist/docs/start/responsiveness.md +1 -1
- package/dist/docs/templates/common-table.md +11 -11
- 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 +55 -55
- package/dist/docs/templates/form-summary.md +22 -22
- package/dist/docs/templates/form-toggle.md +1 -1
- package/dist/docs/templates/list-blocks.md +206 -206
- package/dist/docs/templates/loading-progress.md +3 -3
- 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 +23 -23
- package/dist/docs/templates/stats-blocks.md +16 -16
- package/dist/docs/templates/table-panel.md +1 -1
- package/dist/docs/templates/table-row-animation.md +1 -1
- package/dist/docs/templates/usage-cards.md +1 -1
- package/dist/docs/utilities/deviceUtils.md +1 -1
- package/dist/docs/utilities/featureToggles.md +1 -1
- package/dist/docs/utilities/fuelTypeUtils.md +1 -1
- package/dist/docs/utilities/routeUtils.md +1 -1
- 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/useCount.md +1 -1
- package/dist/docs/utilities/useDarkMode.md +1 -1
- package/dist/docs/utilities/useDebugInfo.md +4 -4
- 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 +1 -1
- package/dist/docs/utilities/useResizeObserver.md +1 -1
- package/dist/docs/utilities/useScrollPosition.md +1 -1
- package/dist/docs/utilities/useSearch.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 +51 -51
- package/dist/docs/utilities/useTableSelection.md +87 -87
- package/dist/docs/utilities/useTimeout.md +1 -1
- package/dist/docs/utilities/useToggle.md +1 -1
- package/dist/docs/utilities/useWindowResize.md +1 -1
- package/dist/index.mjs +1 -1
- package/dist/version.json +2 -2
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/accentBar
|
|
6
|
-
*Captured:* 2025-12-
|
|
6
|
+
*Captured:* 2025-12-15T15:02:48.832Z
|
|
7
7
|
|
|
8
8
|
The AccentBar component is a small, colored vertical bar (typically a few pixels wide) used to visually highlight or categorize rows in lists, tables, or cards. It helps improve readability by providing a quick visual cue for different statuses, categories, or priorities.
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/animatedNumber
|
|
6
|
-
*Captured:* 2025-12-
|
|
6
|
+
*Captured:* 2025-12-15T15:02:32.772Z
|
|
7
7
|
|
|
8
8
|
## AnimatedNumber
|
|
9
9
|
|
|
@@ -59,7 +59,7 @@ export default () => (
|
|
|
59
59
|
<div>
|
|
60
60
|
<label>Default AnimatedNumber</label>
|
|
61
61
|
<div class="width-60 margin-bottom-20 text-right text-size-h1 text-color-info">
|
|
62
|
-
<span class="">
|
|
62
|
+
<span class="">27</span>
|
|
63
63
|
</div>
|
|
64
64
|
<label>AnimatedNumber with prefix and unit</label>
|
|
65
65
|
<div class="width-100 margin-bottom-20 text-right text-size-h1 text-color-primary">
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/animatedTextReveal
|
|
6
|
-
*Captured:* 2025-12-
|
|
6
|
+
*Captured:* 2025-12-15T15:02:33.935Z
|
|
7
7
|
|
|
8
8
|
AnimatedTextReveal displays text that smoothly reveals from below while a subtle shimmer effect runs across it. It’s designed for attention-grabbing messages or live-updating content, combining a primary reveal motion with an optional continuous shimmer highlight.
|
|
9
9
|
|
|
@@ -136,7 +136,7 @@ export default () => {
|
|
|
136
136
|
<div class="text-uppercase text-size-12">Live stream</div>
|
|
137
137
|
</div>
|
|
138
138
|
<div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
|
|
139
|
-
<div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.
|
|
139
|
+
<div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.282217; transform: translateY(8.91065px);">System is thinking...</div>
|
|
140
140
|
</div>
|
|
141
141
|
</div>
|
|
142
142
|
</div>
|
|
@@ -148,7 +148,7 @@ export default () => {
|
|
|
148
148
|
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with animated gradient</div>
|
|
149
149
|
<div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
|
|
150
150
|
<div class="position-relative" aria-live="polite" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
|
|
151
|
-
<div class="animated-text-reveal position-relative" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.
|
|
151
|
+
<div class="animated-text-reveal position-relative" style="--atr-duration: 2s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 260px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0.282217; transform: translateY(8.91065px);">Processing your request...</div>
|
|
152
152
|
</div>
|
|
153
153
|
</div>
|
|
154
154
|
</div>
|
|
@@ -156,7 +156,7 @@ export default () => {
|
|
|
156
156
|
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with automatic cycling but without animated gradient</div>
|
|
157
157
|
<div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
|
|
158
158
|
<div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter);">
|
|
159
|
-
<div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(2.
|
|
159
|
+
<div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-darkest); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(2.70944px);">System is thinking...</div>
|
|
160
160
|
</div>
|
|
161
161
|
</div>
|
|
162
162
|
</div>
|
|
@@ -164,7 +164,7 @@ export default () => {
|
|
|
164
164
|
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Text with custom styling</div>
|
|
165
165
|
<div class="bg-white rounded border shadow-default padding-15 display-flex flex-column gap-15">
|
|
166
166
|
<div class="position-relative text-size-16" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest);">
|
|
167
|
-
<div class="animated-text-reveal position-relative is-animated" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest); opacity: 0; transform: translateY(2.
|
|
167
|
+
<div class="animated-text-reveal position-relative is-animated" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 168px; --atr-text-color: var(--gray-dark); --atr-shimmer-color: var(--gray-lightest); opacity: 0; transform: translateY(2.70944px);">System is thinking...</div>
|
|
168
168
|
</div>
|
|
169
169
|
</div>
|
|
170
170
|
</div>
|
|
@@ -173,7 +173,7 @@ export default () => {
|
|
|
173
173
|
<div class="max-width-150">
|
|
174
174
|
<button type="button" class="btn btn-primary btn-block btn-component" tabindex="0">
|
|
175
175
|
<div class="position-relative" aria-live="polite" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter);">
|
|
176
|
-
<div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(2.
|
|
176
|
+
<div class="animated-text-reveal position-relative" style="--atr-duration: 5s; --atr-delay: 0s; --atr-iterations: infinite; --atr-spread: 64px; --atr-text-color: var(--color-white); --atr-shimmer-color: var(--gray-lighter); opacity: 0; transform: translateY(2.70944px);">Continue</div>
|
|
177
177
|
</div>
|
|
178
178
|
</button>
|
|
179
179
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Content
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/animations
|
|
6
|
-
*Captured:* 2025-12-
|
|
6
|
+
*Captured:* 2025-12-15T15:02:33.481Z
|
|
7
7
|
|
|
8
8
|
The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.
|
|
9
9
|
|
|
@@ -53,7 +53,7 @@ export default () => {
|
|
|
53
53
|
#### HTML (html)
|
|
54
54
|
|
|
55
55
|
```html
|
|
56
|
-
<div style="opacity: 0.
|
|
56
|
+
<div style="opacity: 0.873096;">
|
|
57
57
|
<div class="margin-10">
|
|
58
58
|
<label>Some Data</label>
|
|
59
59
|
<div>
|
|
@@ -161,13 +161,13 @@ export default () => (
|
|
|
161
161
|
</div>
|
|
162
162
|
<div style="opacity: 1;">
|
|
163
163
|
<svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
164
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.
|
|
164
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.9474685297172982px 1px">
|
|
165
165
|
</path>
|
|
166
166
|
</svg>
|
|
167
167
|
</div>
|
|
168
168
|
<div style="opacity: 1;">
|
|
169
169
|
<svg width="50" height="50" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
170
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="
|
|
170
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" pathLength="1" stroke-dashoffset="0px" stroke-dasharray="0.030337102158227935px 1px">
|
|
171
171
|
</path>
|
|
172
172
|
</svg>
|
|
173
173
|
</div>
|
|
@@ -176,21 +176,21 @@ export default () => (
|
|
|
176
176
|
|
|
177
177
|
### Example: Example 3
|
|
178
178
|
|
|
179
|
-
Add ItemItem
|
|
179
|
+
Add ItemItem B5WVP1454N
|
|
180
180
|
|
|
181
|
-
Item
|
|
181
|
+
Item B2NSH3LST8
|
|
182
182
|
|
|
183
|
-
Item
|
|
183
|
+
Item U0X067T8JOG
|
|
184
184
|
|
|
185
185
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
|
|
186
186
|
|
|
187
187
|
#### Summary
|
|
188
188
|
|
|
189
|
-
Add ItemItem
|
|
189
|
+
Add ItemItem B5WVP1454N
|
|
190
190
|
|
|
191
|
-
Item
|
|
191
|
+
Item B2NSH3LST8
|
|
192
192
|
|
|
193
|
-
Item
|
|
193
|
+
Item U0X067T8JOG
|
|
194
194
|
|
|
195
195
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
|
|
196
196
|
|
|
@@ -259,7 +259,7 @@ export default () => {
|
|
|
259
259
|
<div style="height: auto;">
|
|
260
260
|
<div style="opacity: 1;">
|
|
261
261
|
<div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
|
|
262
|
-
<div>Item
|
|
262
|
+
<div>Item B5WVP1454N</div>
|
|
263
263
|
<button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
|
|
264
264
|
<span class="rioglyph rioglyph-remove text-size-14">
|
|
265
265
|
</span>
|
|
@@ -270,7 +270,7 @@ export default () => {
|
|
|
270
270
|
<div style="height: auto;">
|
|
271
271
|
<div style="opacity: 1;">
|
|
272
272
|
<div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
|
|
273
|
-
<div>Item
|
|
273
|
+
<div>Item B2NSH3LST8</div>
|
|
274
274
|
<button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
|
|
275
275
|
<span class="rioglyph rioglyph-remove text-size-14">
|
|
276
276
|
</span>
|
|
@@ -281,7 +281,7 @@ export default () => {
|
|
|
281
281
|
<div style="height: auto;">
|
|
282
282
|
<div style="opacity: 1;">
|
|
283
283
|
<div class="display-flex justify-content-between align-items-center padding-x-15 padding-y-10 border border-bottom-only">
|
|
284
|
-
<div>Item
|
|
284
|
+
<div>Item U0X067T8JOG</div>
|
|
285
285
|
<button type="button" class="btn btn-muted btn-sm btn-icon-only btn-component" tabindex="0">
|
|
286
286
|
<span class="rioglyph rioglyph-remove text-size-14">
|
|
287
287
|
</span>
|
|
@@ -297,31 +297,31 @@ export default () => {
|
|
|
297
297
|
|
|
298
298
|
### Example: Example 4
|
|
299
299
|
|
|
300
|
-
Load ItemsItem
|
|
300
|
+
Load ItemsItem 38PP430D6M
|
|
301
301
|
|
|
302
|
-
Item
|
|
302
|
+
Item RPNOB6D411
|
|
303
303
|
|
|
304
|
-
Item
|
|
304
|
+
Item AQQ4M0ZVKXI
|
|
305
305
|
|
|
306
|
-
Item
|
|
306
|
+
Item KTZKI295U1
|
|
307
307
|
|
|
308
|
-
Item
|
|
308
|
+
Item 5DTMWYDMLFH
|
|
309
309
|
|
|
310
|
-
Item
|
|
310
|
+
Item Z5EJ4VMHJ1H
|
|
311
311
|
|
|
312
312
|
#### Summary
|
|
313
313
|
|
|
314
|
-
Load ItemsItem
|
|
314
|
+
Load ItemsItem 38PP430D6M
|
|
315
315
|
|
|
316
|
-
Item
|
|
316
|
+
Item RPNOB6D411
|
|
317
317
|
|
|
318
|
-
Item
|
|
318
|
+
Item AQQ4M0ZVKXI
|
|
319
319
|
|
|
320
|
-
Item
|
|
320
|
+
Item KTZKI295U1
|
|
321
321
|
|
|
322
|
-
Item
|
|
322
|
+
Item 5DTMWYDMLFH
|
|
323
323
|
|
|
324
|
-
Item
|
|
324
|
+
Item Z5EJ4VMHJ1H
|
|
325
325
|
|
|
326
326
|
#### React (tsx)
|
|
327
327
|
|
|
@@ -388,7 +388,7 @@ export default () => {
|
|
|
388
388
|
<span class="checkbox-text">
|
|
389
389
|
<span>
|
|
390
390
|
<div class="display-flex gap-5">
|
|
391
|
-
<span>Item
|
|
391
|
+
<span>Item 38PP430D6M</span>
|
|
392
392
|
</div>
|
|
393
393
|
</span>
|
|
394
394
|
</span>
|
|
@@ -400,7 +400,7 @@ export default () => {
|
|
|
400
400
|
<span class="checkbox-text">
|
|
401
401
|
<span>
|
|
402
402
|
<div class="display-flex gap-5">
|
|
403
|
-
<span>Item
|
|
403
|
+
<span>Item RPNOB6D411</span>
|
|
404
404
|
</div>
|
|
405
405
|
</span>
|
|
406
406
|
</span>
|
|
@@ -412,7 +412,7 @@ export default () => {
|
|
|
412
412
|
<span class="checkbox-text">
|
|
413
413
|
<span>
|
|
414
414
|
<div class="display-flex gap-5">
|
|
415
|
-
<span>Item
|
|
415
|
+
<span>Item AQQ4M0ZVKXI</span>
|
|
416
416
|
</div>
|
|
417
417
|
</span>
|
|
418
418
|
</span>
|
|
@@ -424,7 +424,7 @@ export default () => {
|
|
|
424
424
|
<span class="checkbox-text">
|
|
425
425
|
<span>
|
|
426
426
|
<div class="display-flex gap-5">
|
|
427
|
-
<span>Item
|
|
427
|
+
<span>Item KTZKI295U1</span>
|
|
428
428
|
</div>
|
|
429
429
|
</span>
|
|
430
430
|
</span>
|
|
@@ -436,7 +436,7 @@ export default () => {
|
|
|
436
436
|
<span class="checkbox-text">
|
|
437
437
|
<span>
|
|
438
438
|
<div class="display-flex gap-5">
|
|
439
|
-
<span>Item
|
|
439
|
+
<span>Item 5DTMWYDMLFH</span>
|
|
440
440
|
</div>
|
|
441
441
|
</span>
|
|
442
442
|
</span>
|
|
@@ -448,7 +448,7 @@ export default () => {
|
|
|
448
448
|
<span class="checkbox-text">
|
|
449
449
|
<span>
|
|
450
450
|
<div class="display-flex gap-5">
|
|
451
|
-
<span>Item
|
|
451
|
+
<span>Item Z5EJ4VMHJ1H</span>
|
|
452
452
|
</div>
|
|
453
453
|
</span>
|
|
454
454
|
</span>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Application
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/appHeader
|
|
6
|
-
*Captured:* 2025-12-
|
|
6
|
+
*Captured:* 2025-12-15T15:02:03.154Z
|
|
7
7
|
|
|
8
8
|
This is the header component for all services. All navigation link components that are passed into the header should be based on react-router
|
|
9
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Application
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/appLayout
|
|
6
|
-
*Captured:* 2025-12-
|
|
6
|
+
*Captured:* 2025-12-15T15:02:04.754Z
|
|
7
7
|
|
|
8
8
|
The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
|
|
9
9
|
|
|
@@ -1162,13 +1162,17 @@ Navigation 3
|
|
|
1162
1162
|
|
|
1163
1163
|
3
|
|
1164
1164
|
1
|
|
1165
|
+
2
|
|
1165
1166
|
1
|
|
1166
1167
|
|
|
1167
|
-
Asset
|
|
1168
|
-
Vehicle-
|
|
1169
|
-
Vehicle-
|
|
1168
|
+
Asset Group5
|
|
1169
|
+
Vehicle-2702Asset 1002
|
|
1170
|
+
Vehicle-2861Asset 1006
|
|
1171
|
+
Vehicle-3712Asset 1001
|
|
1172
|
+
Vehicle-6558Asset 1000
|
|
1173
|
+
Vehicle-9897Asset 1003
|
|
1170
1174
|
|
|
1171
|
-
|
|
1175
|
+
Ungrouped2
|
|
1172
1176
|
|
|
1173
1177
|
200
|
|
1174
1178
|
|
|
@@ -1205,13 +1209,17 @@ Navigation 3
|
|
|
1205
1209
|
|
|
1206
1210
|
3
|
|
1207
1211
|
1
|
|
1212
|
+
2
|
|
1208
1213
|
1
|
|
1209
1214
|
|
|
1210
|
-
Asset
|
|
1211
|
-
Vehicle-
|
|
1212
|
-
Vehicle-
|
|
1215
|
+
Asset Group5
|
|
1216
|
+
Vehicle-2702Asset 1002
|
|
1217
|
+
Vehicle-2861Asset 1006
|
|
1218
|
+
Vehicle-3712Asset 1001
|
|
1219
|
+
Vehicle-6558Asset 1000
|
|
1220
|
+
Vehicle-9897Asset 1003
|
|
1213
1221
|
|
|
1214
|
-
|
|
1222
|
+
Ungrouped2
|
|
1215
1223
|
|
|
1216
1224
|
200
|
|
1217
1225
|
|
|
@@ -1697,17 +1705,22 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1697
1705
|
<div class="display-flex justify-content-between align-items-start width-100pct">
|
|
1698
1706
|
<div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
|
|
1699
1707
|
<div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
|
|
1700
|
-
<span class="rioglyph rioglyph-
|
|
1708
|
+
<span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
|
|
1701
1709
|
</span>
|
|
1702
1710
|
<span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
|
|
1703
1711
|
</div>
|
|
1704
1712
|
<div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
|
|
1705
|
-
<span class="rioglyph rioglyph-
|
|
1713
|
+
<span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
|
|
1706
1714
|
</span>
|
|
1707
1715
|
<span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
|
|
1708
1716
|
</div>
|
|
1709
1717
|
<div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
|
|
1710
|
-
<span class="rioglyph rioglyph-
|
|
1718
|
+
<span class="rioglyph rioglyph-van text-size-16 margin-right-2">
|
|
1719
|
+
</span>
|
|
1720
|
+
<span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
|
|
1721
|
+
</div>
|
|
1722
|
+
<div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
|
|
1723
|
+
<span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
|
|
1711
1724
|
</span>
|
|
1712
1725
|
<span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
|
|
1713
1726
|
</div>
|
|
@@ -1727,7 +1740,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1727
1740
|
<span class="TreeLabelNameText">
|
|
1728
1741
|
<span class="TreeLabelNameTextHeadline">Asset Group</span>
|
|
1729
1742
|
</span>
|
|
1730
|
-
<span class="TreeLabelCount label label-muted label-filled label-condensed">
|
|
1743
|
+
<span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
|
|
1731
1744
|
<span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
|
|
1732
1745
|
</span>
|
|
1733
1746
|
</span>
|
|
@@ -1742,11 +1755,26 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1742
1755
|
<span class="rioglyph rioglyph-van">
|
|
1743
1756
|
</span>
|
|
1744
1757
|
<span class="TreeLabelNameText">
|
|
1745
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-
|
|
1758
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-2702</span>
|
|
1746
1759
|
<span class="TreeLabelNameTextSubline">Asset 1002</span>
|
|
1747
1760
|
</span>
|
|
1748
1761
|
</span>
|
|
1749
1762
|
</div>
|
|
1763
|
+
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
|
|
1764
|
+
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1765
|
+
<input type="checkbox" class="TreeCheckbox">
|
|
1766
|
+
<span class="checkbox-text">
|
|
1767
|
+
</span>
|
|
1768
|
+
</label>
|
|
1769
|
+
<span class="TreeLabel TreeLabelName">
|
|
1770
|
+
<span class="rioglyph rioglyph-bus">
|
|
1771
|
+
</span>
|
|
1772
|
+
<span class="TreeLabelNameText">
|
|
1773
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-2861</span>
|
|
1774
|
+
<span class="TreeLabelNameTextSubline">Asset 1006</span>
|
|
1775
|
+
</span>
|
|
1776
|
+
</span>
|
|
1777
|
+
</div>
|
|
1750
1778
|
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
|
|
1751
1779
|
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1752
1780
|
<input type="checkbox" class="TreeCheckbox">
|
|
@@ -1757,11 +1785,41 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1757
1785
|
<span class="rioglyph rioglyph-truck">
|
|
1758
1786
|
</span>
|
|
1759
1787
|
<span class="TreeLabelNameText">
|
|
1760
|
-
<span class="TreeLabelNameTextHeadline">Vehicle-
|
|
1788
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-3712</span>
|
|
1761
1789
|
<span class="TreeLabelNameTextSubline">Asset 1001</span>
|
|
1762
1790
|
</span>
|
|
1763
1791
|
</span>
|
|
1764
1792
|
</div>
|
|
1793
|
+
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
|
|
1794
|
+
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1795
|
+
<input type="checkbox" class="TreeCheckbox">
|
|
1796
|
+
<span class="checkbox-text">
|
|
1797
|
+
</span>
|
|
1798
|
+
</label>
|
|
1799
|
+
<span class="TreeLabel TreeLabelName">
|
|
1800
|
+
<span class="rioglyph rioglyph-trailer">
|
|
1801
|
+
</span>
|
|
1802
|
+
<span class="TreeLabelNameText">
|
|
1803
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-6558</span>
|
|
1804
|
+
<span class="TreeLabelNameTextSubline">Asset 1000</span>
|
|
1805
|
+
</span>
|
|
1806
|
+
</span>
|
|
1807
|
+
</div>
|
|
1808
|
+
<div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
|
|
1809
|
+
<label class="checkbox TreeCheckbox" tabindex="0">
|
|
1810
|
+
<input type="checkbox" class="TreeCheckbox">
|
|
1811
|
+
<span class="checkbox-text">
|
|
1812
|
+
</span>
|
|
1813
|
+
</label>
|
|
1814
|
+
<span class="TreeLabel TreeLabelName">
|
|
1815
|
+
<span class="rioglyph rioglyph-trailer">
|
|
1816
|
+
</span>
|
|
1817
|
+
<span class="TreeLabelNameText">
|
|
1818
|
+
<span class="TreeLabelNameTextHeadline">Vehicle-9897</span>
|
|
1819
|
+
<span class="TreeLabelNameTextSubline">Asset 1003</span>
|
|
1820
|
+
</span>
|
|
1821
|
+
</span>
|
|
1822
|
+
</div>
|
|
1765
1823
|
</div>
|
|
1766
1824
|
<div class="TreeNodeContainer user-select-none overflow-hidden" data-id="unassigned">
|
|
1767
1825
|
<div class="TreeNode from-group" data-key="unassigned">
|
|
@@ -1774,7 +1832,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
|
|
|
1774
1832
|
<span class="TreeLabelNameText">
|
|
1775
1833
|
<span class="TreeLabelNameTextHeadline">Ungrouped</span>
|
|
1776
1834
|
</span>
|
|
1777
|
-
<span class="TreeLabelCount label label-muted label-filled label-condensed">
|
|
1835
|
+
<span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
|
|
1778
1836
|
<span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
|
|
1779
1837
|
</span>
|
|
1780
1838
|
</span>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Charts
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/areaCharts
|
|
6
|
-
*Captured:* 2025-12-
|
|
6
|
+
*Captured:* 2025-12-15T15:03:21.964Z
|
|
7
7
|
|
|
8
8
|
## AreaChart
|
|
9
9
|
|
|
@@ -41,7 +41,7 @@ export default () => {
|
|
|
41
41
|
data={data}
|
|
42
42
|
dataKey={(entry: CustomData) => entry.name}
|
|
43
43
|
xAxisOptions={{ padding: { left: 30, right: 30 } }}
|
|
44
|
-
areas={[<Area key='area' dataKey={entry => entry.value} />]}
|
|
44
|
+
areas={[<Area key='area' dataKey={(entry: CustomData) => entry.value} />]}
|
|
45
45
|
/>
|
|
46
46
|
</div>
|
|
47
47
|
</>
|
|
@@ -122,7 +122,7 @@ const data: CustomData[] = [
|
|
|
122
122
|
<g class="recharts-layer">
|
|
123
123
|
<defs>
|
|
124
124
|
<clipPath id="animationClipPath-recharts-area-:r3:">
|
|
125
|
-
<rect x="45" y="0" width="
|
|
125
|
+
<rect x="45" y="0" width="149.66633180451063" height="124">
|
|
126
126
|
</rect>
|
|
127
127
|
</clipPath>
|
|
128
128
|
</defs>
|
|
@@ -562,7 +562,7 @@ const data: CustomData[] = [
|
|
|
562
562
|
<g class="recharts-layer">
|
|
563
563
|
<defs>
|
|
564
564
|
<clipPath id="animationClipPath-recharts-area-:rg:">
|
|
565
|
-
<rect x="75" y="0" width="
|
|
565
|
+
<rect x="75" y="0" width="682.1274264583936" height="224">
|
|
566
566
|
</rect>
|
|
567
567
|
</clipPath>
|
|
568
568
|
</defs>
|
|
@@ -580,7 +580,7 @@ const data: CustomData[] = [
|
|
|
580
580
|
<g class="recharts-layer">
|
|
581
581
|
<defs>
|
|
582
582
|
<clipPath id="animationClipPath-recharts-area-:rh:">
|
|
583
|
-
<rect x="75" y="0" width="
|
|
583
|
+
<rect x="75" y="0" width="682.1274264583936" height="224">
|
|
584
584
|
</rect>
|
|
585
585
|
</clipPath>
|
|
586
586
|
</defs>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*Category:* Components
|
|
4
4
|
*Section:* Misc
|
|
5
5
|
*Source:* https://uikit.developers.rio.cloud/#components/aspectRatioPlaceholder
|
|
6
|
-
*Captured:* 2025-12-
|
|
6
|
+
*Captured:* 2025-12-15T15:02:48.281Z
|
|
7
7
|
|
|
8
8
|
Use the AspectRatioPlaceholder for having responsive elements with an aspect ratio.
|
|
9
9
|
|