This is page 36 of 181. Use http://codebase.md/xmlui-org/xmlui/mockApiDef.js?lines=true&page={x} to view the full context.
# Directory Structure
```
├── .changeset
│ └── config.json
├── .eslintrc.cjs
├── .github
│ ├── build-checklist.png
│ ├── ISSUE_TEMPLATE
│ │ ├── bug_report.md
│ │ └── feature_request.md
│ └── workflows
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs.yml
│ ├── prepare-versions.yml
│ ├── release-packages.yml
│ ├── run-all-tests.yml
│ └── run-smoke-tests.yml
├── .gitignore
├── .prettierrc.js
├── .vscode
│ ├── launch.json
│ └── settings.json
├── blog
│ ├── .gitignore
│ ├── .gitkeep
│ ├── CHANGELOG.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── layout-changes.md
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ └── lorem-ipsum.png
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ └── welcome-to-the-xmlui-blog.md
│ │ ├── mockServiceWorker.js
│ │ ├── resources
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ └── for-download
│ │ │ │ └── xmlui
│ │ │ │ └── xmlui-standalone.umd.js
│ │ │ ├── github.svg
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ ├── rss.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ └── PageNotFound.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── blog-theme.ts
│ └── tsconfig.json
├── CONTRIBUTING.md
├── docs
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── ComponentRefLinks.txt
│ ├── content
│ │ ├── _meta.json
│ │ ├── components
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── APICall.md
│ │ │ ├── App.md
│ │ │ ├── AppHeader.md
│ │ │ ├── AppState.md
│ │ │ ├── AutoComplete.md
│ │ │ ├── Avatar.md
│ │ │ ├── Backdrop.md
│ │ │ ├── Badge.md
│ │ │ ├── BarChart.md
│ │ │ ├── Bookmark.md
│ │ │ ├── Breakout.md
│ │ │ ├── Button.md
│ │ │ ├── Card.md
│ │ │ ├── Carousel.md
│ │ │ ├── ChangeListener.md
│ │ │ ├── Checkbox.md
│ │ │ ├── CHStack.md
│ │ │ ├── ColorPicker.md
│ │ │ ├── Column.md
│ │ │ ├── ContentSeparator.md
│ │ │ ├── CVStack.md
│ │ │ ├── DataSource.md
│ │ │ ├── DateInput.md
│ │ │ ├── DatePicker.md
│ │ │ ├── DonutChart.md
│ │ │ ├── DropdownMenu.md
│ │ │ ├── EmojiSelector.md
│ │ │ ├── ExpandableItem.md
│ │ │ ├── FileInput.md
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FlowLayout.md
│ │ │ ├── Footer.md
│ │ │ ├── Form.md
│ │ │ ├── FormItem.md
│ │ │ ├── FormSection.md
│ │ │ ├── Fragment.md
│ │ │ ├── H1.md
│ │ │ ├── H2.md
│ │ │ ├── H3.md
│ │ │ ├── H4.md
│ │ │ ├── H5.md
│ │ │ ├── H6.md
│ │ │ ├── Heading.md
│ │ │ ├── HSplitter.md
│ │ │ ├── HStack.md
│ │ │ ├── Icon.md
│ │ │ ├── IFrame.md
│ │ │ ├── Image.md
│ │ │ ├── Items.md
│ │ │ ├── LabelList.md
│ │ │ ├── Legend.md
│ │ │ ├── LineChart.md
│ │ │ ├── Link.md
│ │ │ ├── List.md
│ │ │ ├── Logo.md
│ │ │ ├── Markdown.md
│ │ │ ├── MenuItem.md
│ │ │ ├── MenuSeparator.md
│ │ │ ├── ModalDialog.md
│ │ │ ├── NavGroup.md
│ │ │ ├── NavLink.md
│ │ │ ├── NavPanel.md
│ │ │ ├── NoResult.md
│ │ │ ├── NumberBox.md
│ │ │ ├── Option.md
│ │ │ ├── Page.md
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── Pages.md
│ │ │ ├── Pagination.md
│ │ │ ├── PasswordInput.md
│ │ │ ├── PieChart.md
│ │ │ ├── ProgressBar.md
│ │ │ ├── Queue.md
│ │ │ ├── RadioGroup.md
│ │ │ ├── RealTimeAdapter.md
│ │ │ ├── Redirect.md
│ │ │ ├── Select.md
│ │ │ ├── Slider.md
│ │ │ ├── Slot.md
│ │ │ ├── SpaceFiller.md
│ │ │ ├── Spinner.md
│ │ │ ├── Splitter.md
│ │ │ ├── Stack.md
│ │ │ ├── StickyBox.md
│ │ │ ├── SubMenuItem.md
│ │ │ ├── Switch.md
│ │ │ ├── TabItem.md
│ │ │ ├── Table.md
│ │ │ ├── TableOfContents.md
│ │ │ ├── Tabs.md
│ │ │ ├── Text.md
│ │ │ ├── TextArea.md
│ │ │ ├── TextBox.md
│ │ │ ├── Theme.md
│ │ │ ├── TimeInput.md
│ │ │ ├── Timer.md
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneSwitch.md
│ │ │ ├── Tooltip.md
│ │ │ ├── Tree.md
│ │ │ ├── VSplitter.md
│ │ │ ├── VStack.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ ├── xmlui-spreadsheet
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Spreadsheet.md
│ │ │ └── xmlui-website-blocks
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Carousel.md
│ │ │ ├── HelloMd.md
│ │ │ ├── HeroSection.md
│ │ │ └── ScrollToTop.md
│ │ └── extensions
│ │ ├── _meta.json
│ │ ├── xmlui-animations
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ ├── Animation.md
│ │ │ ├── FadeAnimation.md
│ │ │ ├── FadeInAnimation.md
│ │ │ ├── FadeOutAnimation.md
│ │ │ ├── ScaleAnimation.md
│ │ │ └── SlideInAnimation.md
│ │ └── xmlui-website-blocks
│ │ ├── _meta.json
│ │ ├── _overview.md
│ │ ├── Carousel.md
│ │ ├── HelloMd.md
│ │ ├── HeroSection.md
│ │ └── ScrollToTop.md
│ ├── extensions.ts
│ ├── index.html
│ ├── index.ts
│ ├── package.json
│ ├── public
│ │ ├── feed.rss
│ │ ├── mockServiceWorker.js
│ │ ├── pages
│ │ │ ├── _meta.json
│ │ │ ├── app-structure.md
│ │ │ ├── build-editor-component.md
│ │ │ ├── build-hello-world-component.md
│ │ │ ├── components-intro.md
│ │ │ ├── context-variables.md
│ │ │ ├── forms.md
│ │ │ ├── globals.md
│ │ │ ├── glossary.md
│ │ │ ├── helper-tags.md
│ │ │ ├── hosted-deployment.md
│ │ │ ├── howto
│ │ │ │ ├── assign-a-complex-json-literal-to-a-component-variable.md
│ │ │ │ ├── chain-a-refetch.md
│ │ │ │ ├── debug-a-component.md
│ │ │ │ ├── delay-a-datasource-until-another-datasource-is-ready.md
│ │ │ │ ├── delegate-a-method.md
│ │ │ │ ├── do-custom-form-validation.md
│ │ │ │ ├── expose-a-method-from-a-component.md
│ │ │ │ ├── filter-and-transform-data-from-an-api.md
│ │ │ │ ├── group-items-in-list-by-a-property.md
│ │ │ │ ├── handle-background-operations.md
│ │ │ │ ├── hide-an-element-until-its-datasource-is-ready.md
│ │ │ │ ├── make-a-set-of-equal-width-cards.md
│ │ │ │ ├── make-a-table-responsive.md
│ │ │ │ ├── make-navpanel-width-responsive.md
│ │ │ │ ├── modify-a-value-reported-in-a-column.md
│ │ │ │ ├── paginate-a-list.md
│ │ │ │ ├── pass-data-to-a-modal-dialog.md
│ │ │ │ ├── react-to-button-click-not-keystrokes.md
│ │ │ │ ├── set-the-initial-value-of-a-select-from-fetched-data.md
│ │ │ │ ├── share-a-modaldialog-across-components.md
│ │ │ │ ├── sync-selections-between-table-and-list-views.md
│ │ │ │ ├── update-ui-optimistically.md
│ │ │ │ ├── use-built-in-form-validation.md
│ │ │ │ └── use-the-same-modaldialog-to-add-or-edit.md
│ │ │ ├── howto.md
│ │ │ ├── intro.md
│ │ │ ├── layout.md
│ │ │ ├── markup.md
│ │ │ ├── mcp.md
│ │ │ ├── modal-dialogs.md
│ │ │ ├── news-and-reviews.md
│ │ │ ├── reactive-intro.md
│ │ │ ├── refactoring.md
│ │ │ ├── routing-and-links.md
│ │ │ ├── samples
│ │ │ │ ├── color-palette.xmlui
│ │ │ │ ├── color-values.xmlui
│ │ │ │ ├── shadow-sizes.xmlui
│ │ │ │ ├── spacing-sizes.xmlui
│ │ │ │ ├── swatch.xmlui
│ │ │ │ ├── theme-gallery-brief.xmlui
│ │ │ │ └── theme-gallery.xmlui
│ │ │ ├── scoping.md
│ │ │ ├── scripting.md
│ │ │ ├── styles-and-themes
│ │ │ │ ├── common-units.md
│ │ │ │ ├── layout-props.md
│ │ │ │ ├── theme-variable-defaults.md
│ │ │ │ ├── theme-variables.md
│ │ │ │ └── themes.md
│ │ │ ├── template-properties.md
│ │ │ ├── test.md
│ │ │ ├── tutorial-01.md
│ │ │ ├── tutorial-02.md
│ │ │ ├── tutorial-03.md
│ │ │ ├── tutorial-04.md
│ │ │ ├── tutorial-05.md
│ │ │ ├── tutorial-06.md
│ │ │ ├── tutorial-07.md
│ │ │ ├── tutorial-08.md
│ │ │ ├── tutorial-09.md
│ │ │ ├── tutorial-10.md
│ │ │ ├── tutorial-11.md
│ │ │ ├── tutorial-12.md
│ │ │ ├── universal-properties.md
│ │ │ ├── user-defined-components.md
│ │ │ ├── vscode.md
│ │ │ ├── working-with-markdown.md
│ │ │ ├── working-with-text.md
│ │ │ ├── xmlui-animations
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── Animation.md
│ │ │ │ ├── FadeAnimation.md
│ │ │ │ ├── FadeInAnimation.md
│ │ │ │ ├── FadeOutAnimation.md
│ │ │ │ ├── ScaleAnimation.md
│ │ │ │ └── SlideInAnimation.md
│ │ │ ├── xmlui-charts
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── DonutChart.md
│ │ │ │ ├── LabelList.md
│ │ │ │ ├── Legend.md
│ │ │ │ ├── LineChart.md
│ │ │ │ └── PieChart.md
│ │ │ ├── xmlui-pdf
│ │ │ │ ├── _meta.json
│ │ │ │ ├── _overview.md
│ │ │ │ └── Pdf.md
│ │ │ └── xmlui-spreadsheet
│ │ │ ├── _meta.json
│ │ │ ├── _overview.md
│ │ │ └── Spreadsheet.md
│ │ ├── resources
│ │ │ ├── devdocs
│ │ │ │ ├── debug-proxy-object-2.png
│ │ │ │ ├── debug-proxy-object.png
│ │ │ │ ├── table_editor_01.png
│ │ │ │ ├── table_editor_02.png
│ │ │ │ ├── table_editor_03.png
│ │ │ │ ├── table_editor_04.png
│ │ │ │ ├── table_editor_05.png
│ │ │ │ ├── table_editor_06.png
│ │ │ │ ├── table_editor_07.png
│ │ │ │ ├── table_editor_08.png
│ │ │ │ ├── table_editor_09.png
│ │ │ │ ├── table_editor_10.png
│ │ │ │ ├── table_editor_11.png
│ │ │ │ ├── table-editor-01.png
│ │ │ │ ├── table-editor-02.png
│ │ │ │ ├── table-editor-03.png
│ │ │ │ ├── table-editor-04.png
│ │ │ │ ├── table-editor-06.png
│ │ │ │ ├── table-editor-07.png
│ │ │ │ ├── table-editor-08.png
│ │ │ │ ├── table-editor-09.png
│ │ │ │ └── xmlui-rendering-of-tiptap-markdown.png
│ │ │ ├── favicon.ico
│ │ │ ├── files
│ │ │ │ ├── clients.json
│ │ │ │ ├── daily-revenue.json
│ │ │ │ ├── dashboard-stats.json
│ │ │ │ ├── demo.xmlui
│ │ │ │ ├── demo.xmlui.xs
│ │ │ │ ├── downloads
│ │ │ │ │ └── downloads.json
│ │ │ │ ├── for-download
│ │ │ │ │ ├── index-with-api.html
│ │ │ │ │ ├── index.html
│ │ │ │ │ ├── mockApi.js
│ │ │ │ │ ├── start-darwin.sh
│ │ │ │ │ ├── start-linux.sh
│ │ │ │ │ ├── start.bat
│ │ │ │ │ └── xmlui
│ │ │ │ │ └── xmlui-standalone.umd.js
│ │ │ │ ├── getting-started
│ │ │ │ │ ├── cl-tutorial-final.zip
│ │ │ │ │ ├── cl-tutorial.zip
│ │ │ │ │ ├── cl-tutorial2.zip
│ │ │ │ │ ├── cl-tutorial3.zip
│ │ │ │ │ ├── cl-tutorial4.zip
│ │ │ │ │ ├── cl-tutorial5.zip
│ │ │ │ │ ├── cl-tutorial6.zip
│ │ │ │ │ ├── getting-started.zip
│ │ │ │ │ ├── hello-xmlui.zip
│ │ │ │ │ ├── xmlui-empty.zip
│ │ │ │ │ └── xmlui-starter.zip
│ │ │ │ ├── howto
│ │ │ │ │ └── component-icons
│ │ │ │ │ └── up-arrow.svg
│ │ │ │ ├── invoices.json
│ │ │ │ ├── monthly-status.json
│ │ │ │ ├── news-and-reviews.json
│ │ │ │ ├── products.json
│ │ │ │ ├── releases.json
│ │ │ │ ├── tutorials
│ │ │ │ │ ├── datasource
│ │ │ │ │ │ └── api.ts
│ │ │ │ │ └── p2do
│ │ │ │ │ ├── api.ts
│ │ │ │ │ └── todo-logo.svg
│ │ │ │ └── xmlui.json
│ │ │ ├── github.svg
│ │ │ ├── images
│ │ │ │ ├── apiaction-tutorial
│ │ │ │ │ ├── add-success.png
│ │ │ │ │ ├── apiaction-param.png
│ │ │ │ │ ├── change-completed.png
│ │ │ │ │ ├── change-in-progress.png
│ │ │ │ │ ├── confirm-delete.png
│ │ │ │ │ ├── data-error.png
│ │ │ │ │ ├── data-progress.png
│ │ │ │ │ ├── data-success.png
│ │ │ │ │ ├── display-1.png
│ │ │ │ │ ├── item-deleted.png
│ │ │ │ │ ├── item-updated.png
│ │ │ │ │ ├── missing-api-key.png
│ │ │ │ │ ├── new-item-added.png
│ │ │ │ │ └── test-message.png
│ │ │ │ ├── chat-api
│ │ │ │ │ └── domain-model.svg
│ │ │ │ ├── components
│ │ │ │ │ ├── image
│ │ │ │ │ │ └── breakfast.jpg
│ │ │ │ │ ├── markdown
│ │ │ │ │ │ └── colors.png
│ │ │ │ │ └── modal
│ │ │ │ │ ├── deep_link_dialog_1.jpg
│ │ │ │ │ └── deep_link_dialog_2.jpg
│ │ │ │ ├── create-apps
│ │ │ │ │ ├── collapsed-vertical.png
│ │ │ │ │ ├── using-forms-warning-dialog.png
│ │ │ │ │ └── using-forms.png
│ │ │ │ ├── datasource-tutorial
│ │ │ │ │ ├── data-with-header.png
│ │ │ │ │ ├── filtered-data.png
│ │ │ │ │ ├── filtered-items.png
│ │ │ │ │ ├── initial-page-items.png
│ │ │ │ │ ├── list-items.png
│ │ │ │ │ ├── next-page-items.png
│ │ │ │ │ ├── no-data.png
│ │ │ │ │ ├── pagination-1.jpg
│ │ │ │ │ ├── pagination-1.png
│ │ │ │ │ ├── polling-1.png
│ │ │ │ │ ├── refetch-data.png
│ │ │ │ │ ├── slow-loading.png
│ │ │ │ │ ├── test-message.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── unconventional-data.png
│ │ │ │ │ └── unfiltered-items.png
│ │ │ │ ├── flower.jpg
│ │ │ │ ├── get-started
│ │ │ │ │ ├── add-new-contact.png
│ │ │ │ │ ├── app-modified.png
│ │ │ │ │ ├── app-start.png
│ │ │ │ │ ├── app-with-boxes.png
│ │ │ │ │ ├── app-with-toast.png
│ │ │ │ │ ├── boilerplate-structure.png
│ │ │ │ │ ├── cl-initial.png
│ │ │ │ │ ├── cl-start.png
│ │ │ │ │ ├── contact-counts.png
│ │ │ │ │ ├── contact-dialog-title.png
│ │ │ │ │ ├── contact-dialog.png
│ │ │ │ │ ├── contact-menus.png
│ │ │ │ │ ├── contact-predicates.png
│ │ │ │ │ ├── context-menu.png
│ │ │ │ │ ├── dashboard-numbers.png
│ │ │ │ │ ├── default-contact-list.png
│ │ │ │ │ ├── delete-contact.png
│ │ │ │ │ ├── delete-task.png
│ │ │ │ │ ├── detailed-template.png
│ │ │ │ │ ├── edit-contact-details.png
│ │ │ │ │ ├── edited-contact-saved.png
│ │ │ │ │ ├── empty-sections.png
│ │ │ │ │ ├── filter-completed.png
│ │ │ │ │ ├── fullwidth-desktop.png
│ │ │ │ │ ├── fullwidth-mobile.png
│ │ │ │ │ ├── initial-table.png
│ │ │ │ │ ├── items-and-badges.png
│ │ │ │ │ ├── loading-message.png
│ │ │ │ │ ├── new-contact-button.png
│ │ │ │ │ ├── new-contact-saved.png
│ │ │ │ │ ├── no-empty-sections.png
│ │ │ │ │ ├── personal-todo-initial.png
│ │ │ │ │ ├── piechart.png
│ │ │ │ │ ├── review-today.png
│ │ │ │ │ ├── rudimentary-dashboard.png
│ │ │ │ │ ├── section-collapsed.png
│ │ │ │ │ ├── sectioned-items.png
│ │ │ │ │ ├── sections-ordered.png
│ │ │ │ │ ├── spacex-list-with-links.png
│ │ │ │ │ ├── spacex-list.png
│ │ │ │ │ ├── start-personal-todo-1.png
│ │ │ │ │ ├── submit-new-contact.png
│ │ │ │ │ ├── submit-new-task.png
│ │ │ │ │ ├── syntax-highlighting.png
│ │ │ │ │ ├── table-with-badge.png
│ │ │ │ │ ├── template-with-card.png
│ │ │ │ │ ├── test-emulated-api.png
│ │ │ │ │ ├── Thumbs.db
│ │ │ │ │ ├── todo-logo.png
│ │ │ │ │ └── xmlui-tools.png
│ │ │ │ ├── HelloApp.png
│ │ │ │ ├── HelloApp2.png
│ │ │ │ ├── logos
│ │ │ │ │ ├── xmlui1.svg
│ │ │ │ │ ├── xmlui2.svg
│ │ │ │ │ ├── xmlui3.svg
│ │ │ │ │ ├── xmlui4.svg
│ │ │ │ │ ├── xmlui5.svg
│ │ │ │ │ ├── xmlui6.svg
│ │ │ │ │ └── xmlui7.svg
│ │ │ │ ├── pdf
│ │ │ │ │ └── dummy-pdf.jpg
│ │ │ │ ├── rendering-engine
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ ├── Component.svg
│ │ │ │ │ ├── CompoundComponent.svg
│ │ │ │ │ ├── RootComponent.svg
│ │ │ │ │ └── tree-with-containers.svg
│ │ │ │ ├── reviewers-guide
│ │ │ │ │ ├── AppEngine-flow.svg
│ │ │ │ │ └── incbutton-in-action.png
│ │ │ │ ├── tools
│ │ │ │ │ └── boilerplate-structure.png
│ │ │ │ ├── try.svg
│ │ │ │ ├── tutorial
│ │ │ │ │ ├── app-chat-history.png
│ │ │ │ │ ├── app-content-placeholder.png
│ │ │ │ │ ├── app-header-and-content.png
│ │ │ │ │ ├── app-links-channel-selected.png
│ │ │ │ │ ├── app-links-click.png
│ │ │ │ │ ├── app-navigation.png
│ │ │ │ │ ├── finished-ex01.png
│ │ │ │ │ ├── finished-ex02.png
│ │ │ │ │ ├── hello.png
│ │ │ │ │ ├── splash-screen-advanced.png
│ │ │ │ │ ├── splash-screen-after-click.png
│ │ │ │ │ ├── splash-screen-centered.png
│ │ │ │ │ ├── splash-screen-events.png
│ │ │ │ │ ├── splash-screen-expression.png
│ │ │ │ │ ├── splash-screen-reuse-after.png
│ │ │ │ │ ├── splash-screen-reuse-before.png
│ │ │ │ │ └── splash-screen.png
│ │ │ │ └── tutorial-01.png
│ │ │ ├── llms.txt
│ │ │ ├── logo-dark.svg
│ │ │ ├── logo.svg
│ │ │ ├── pg-popout.svg
│ │ │ └── xmlui-logo.svg
│ │ ├── serve.json
│ │ └── web.config
│ ├── scripts
│ │ ├── download-latest-xmlui.js
│ │ ├── generate-rss.js
│ │ ├── get-releases.js
│ │ └── utils.js
│ ├── src
│ │ ├── components
│ │ │ ├── BlogOverview.xmlui
│ │ │ ├── BlogPage.xmlui
│ │ │ ├── Boxes.xmlui
│ │ │ ├── Breadcrumb.xmlui
│ │ │ ├── ChangeLog.xmlui
│ │ │ ├── ColorPalette.xmlui
│ │ │ ├── DocumentLinks.xmlui
│ │ │ ├── DocumentPage.xmlui
│ │ │ ├── DocumentPageNoTOC.xmlui
│ │ │ ├── Icons.xmlui
│ │ │ ├── IncButton.xmlui
│ │ │ ├── IncButton2.xmlui
│ │ │ ├── NameValue.xmlui
│ │ │ ├── PageNotFound.xmlui
│ │ │ ├── PaletteItem.xmlui
│ │ │ ├── Palettes.xmlui
│ │ │ ├── SectionHeader.xmlui
│ │ │ ├── TBD.xmlui
│ │ │ ├── Test.xmlui
│ │ │ ├── ThemesIntro.xmlui
│ │ │ ├── ThousandThemes.xmlui
│ │ │ ├── TubeStops.xmlui
│ │ │ ├── TubeStops.xmlui.xs
│ │ │ └── TwoColumnCode.xmlui
│ │ ├── config.ts
│ │ ├── Main.xmlui
│ │ └── themes
│ │ ├── docs-theme.ts
│ │ ├── earthtone.ts
│ │ ├── xmlui-gray-on-default.ts
│ │ ├── xmlui-green-on-default.ts
│ │ └── xmlui-orange-on-default.ts
│ └── tsconfig.json
├── LICENSE
├── package-lock.json
├── package.json
├── packages
│ ├── xmlui-animations
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── Animation.tsx
│ │ │ ├── AnimationNative.tsx
│ │ │ ├── FadeAnimation.tsx
│ │ │ ├── FadeInAnimation.tsx
│ │ │ ├── FadeOutAnimation.tsx
│ │ │ ├── index.tsx
│ │ │ ├── ScaleAnimation.tsx
│ │ │ └── SlideInAnimation.tsx
│ │ └── tsconfig.json
│ ├── xmlui-devtools
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── devtools
│ │ │ │ ├── DevTools.tsx
│ │ │ │ ├── DevToolsNative.module.scss
│ │ │ │ ├── DevToolsNative.tsx
│ │ │ │ ├── ModalDialog.module.scss
│ │ │ │ ├── ModalDialog.tsx
│ │ │ │ ├── ModalVisibilityContext.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── editor
│ │ │ │ └── Editor.tsx
│ │ │ └── index.tsx
│ │ ├── tsconfig.json
│ │ └── vite.config-overrides.ts
│ ├── xmlui-hello-world
│ │ ├── .gitignore
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── HelloWorld.module.scss
│ │ │ ├── HelloWorld.tsx
│ │ │ ├── HelloWorldNative.tsx
│ │ │ └── index.tsx
│ │ └── tsconfig.json
│ ├── xmlui-os-frames
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── IPhoneFrame.module.scss
│ │ │ ├── IPhoneFrame.tsx
│ │ │ ├── MacOSAppFrame.module.scss
│ │ │ ├── MacOSAppFrame.tsx
│ │ │ ├── WindowsAppFrame.module.scss
│ │ │ └── WindowsAppFrame.tsx
│ │ └── tsconfig.json
│ ├── xmlui-pdf
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ ├── components
│ │ │ │ └── Pdf.xmlui
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── LazyPdfNative.tsx
│ │ │ ├── Pdf.module.scss
│ │ │ └── Pdf.tsx
│ │ └── tsconfig.json
│ ├── xmlui-playground
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── usePlayground.ts
│ │ │ │ └── useToast.ts
│ │ │ ├── index.tsx
│ │ │ ├── playground
│ │ │ │ ├── Box.module.scss
│ │ │ │ ├── Box.tsx
│ │ │ │ ├── CodeSelector.tsx
│ │ │ │ ├── ConfirmationDialog.module.scss
│ │ │ │ ├── ConfirmationDialog.tsx
│ │ │ │ ├── Editor.tsx
│ │ │ │ ├── Header.module.scss
│ │ │ │ ├── Header.tsx
│ │ │ │ ├── Playground.tsx
│ │ │ │ ├── PlaygroundContent.module.scss
│ │ │ │ ├── PlaygroundContent.tsx
│ │ │ │ ├── PlaygroundNative.module.scss
│ │ │ │ ├── PlaygroundNative.tsx
│ │ │ │ ├── Preview.module.scss
│ │ │ │ ├── Preview.tsx
│ │ │ │ ├── Select.module.scss
│ │ │ │ ├── StandalonePlayground.tsx
│ │ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ │ ├── ThemeSwitcher.module.scss
│ │ │ │ ├── ThemeSwitcher.tsx
│ │ │ │ ├── ToneSwitcher.tsx
│ │ │ │ ├── Tooltip.module.scss
│ │ │ │ ├── Tooltip.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── providers
│ │ │ │ ├── Toast.module.scss
│ │ │ │ └── ToastProvider.tsx
│ │ │ ├── state
│ │ │ │ └── store.ts
│ │ │ ├── themes
│ │ │ │ └── theme.ts
│ │ │ └── utils
│ │ │ └── helpers.ts
│ │ └── tsconfig.json
│ ├── xmlui-search
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Search.module.scss
│ │ │ └── Search.tsx
│ │ └── tsconfig.json
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ ├── src
│ │ │ ├── index.tsx
│ │ │ ├── Spreadsheet.tsx
│ │ │ └── SpreadsheetNative.tsx
│ │ └── tsconfig.json
│ └── xmlui-website-blocks
│ ├── .gitignore
│ ├── CHANGELOG.md
│ ├── demo
│ │ ├── components
│ │ │ ├── HeroBackgroundBreakoutPage.xmlui
│ │ │ ├── HeroBackgroundsPage.xmlui
│ │ │ ├── HeroContentsPage.xmlui
│ │ │ ├── HeroTextAlignPage.xmlui
│ │ │ ├── HeroTextPage.xmlui
│ │ │ └── HeroTonesPage.xmlui
│ │ ├── Main.xmlui
│ │ └── themes
│ │ └── default.ts
│ ├── index.html
│ ├── index.ts
│ ├── meta
│ │ └── componentsMetadata.ts
│ ├── package.json
│ ├── public
│ │ └── resources
│ │ ├── building.jpg
│ │ └── xmlui-logo.svg
│ ├── src
│ │ ├── Carousel
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── FancyButton
│ │ │ ├── FancyButton.module.scss
│ │ │ ├── FancyButton.tsx
│ │ │ └── FancyButton.xmlui
│ │ ├── Hello
│ │ │ ├── Hello.tsx
│ │ │ ├── Hello.xmlui
│ │ │ └── Hello.xmlui.xs
│ │ ├── HeroSection
│ │ │ ├── HeroSection.module.scss
│ │ │ ├── HeroSection.tsx
│ │ │ └── HeroSectionNative.tsx
│ │ ├── index.tsx
│ │ ├── ScrollToTop
│ │ │ ├── ScrollToTop.module.scss
│ │ │ ├── ScrollToTop.tsx
│ │ │ └── ScrollToTopNative.tsx
│ │ └── vite-env.d.ts
│ └── tsconfig.json
├── README.md
├── tools
│ ├── codefence
│ │ └── xmlui-code-fence-docs.md
│ ├── create-app
│ │ ├── .gitignore
│ │ ├── CHANGELOG.md
│ │ ├── create-app.ts
│ │ ├── helpers
│ │ │ ├── copy.ts
│ │ │ ├── get-pkg-manager.ts
│ │ │ ├── git.ts
│ │ │ ├── install.ts
│ │ │ ├── is-folder-empty.ts
│ │ │ ├── is-writeable.ts
│ │ │ ├── make-dir.ts
│ │ │ └── validate-pkg.ts
│ │ ├── index.ts
│ │ ├── package.json
│ │ ├── templates
│ │ │ ├── default
│ │ │ │ └── ts
│ │ │ │ ├── gitignore
│ │ │ │ ├── index.html
│ │ │ │ ├── index.ts
│ │ │ │ ├── public
│ │ │ │ │ ├── mockServiceWorker.js
│ │ │ │ │ ├── resources
│ │ │ │ │ │ ├── favicon.ico
│ │ │ │ │ │ └── xmlui-logo.svg
│ │ │ │ │ └── serve.json
│ │ │ │ └── src
│ │ │ │ ├── components
│ │ │ │ │ ├── ApiAware.xmlui
│ │ │ │ │ ├── Home.xmlui
│ │ │ │ │ ├── IncButton.xmlui
│ │ │ │ │ └── PagePanel.xmlui
│ │ │ │ ├── config.ts
│ │ │ │ └── Main.xmlui
│ │ │ ├── index.ts
│ │ │ └── types.ts
│ │ └── tsconfig.json
│ ├── create-xmlui-hello-world
│ │ ├── index.js
│ │ └── package.json
│ └── vscode
│ ├── .gitignore
│ ├── .vscode
│ │ ├── launch.json
│ │ └── tasks.json
│ ├── .vscodeignore
│ ├── build.sh
│ ├── CHANGELOG.md
│ ├── esbuild.js
│ ├── eslint.config.mjs
│ ├── formatter-docs.md
│ ├── generate-test-sample.sh
│ ├── LICENSE.md
│ ├── package-lock.json
│ ├── package.json
│ ├── README.md
│ ├── resources
│ │ ├── xmlui-logo.png
│ │ └── xmlui-markup-syntax-highlighting.png
│ ├── src
│ │ ├── extension.ts
│ │ └── server.ts
│ ├── syntaxes
│ │ └── xmlui.tmLanguage.json
│ ├── test-samples
│ │ └── sample.xmlui
│ ├── tsconfig.json
│ └── tsconfig.tsbuildinfo
├── turbo.json
└── xmlui
├── .gitignore
├── bin
│ ├── bootstrap.js
│ ├── build-lib.ts
│ ├── build.ts
│ ├── index.ts
│ ├── preview.ts
│ ├── start.ts
│ ├── vite-xmlui-plugin.ts
│ └── viteConfig.ts
├── CHANGELOG.md
├── conventions
│ ├── component-qa-checklist.md
│ ├── copilot-conventions.md
│ ├── create-xmlui-components.md
│ ├── mermaid.md
│ ├── testing-conventions.md
│ └── xmlui-in-a-nutshell.md
├── dev-docs
│ ├── accessibility.md
│ ├── build-system.md
│ ├── build-xmlui.md
│ ├── component-behaviors.md
│ ├── components-with-options.md
│ ├── containers.md
│ ├── data-operations.md
│ ├── glossary.md
│ ├── index.md
│ ├── next
│ │ ├── component-dev-guide.md
│ │ ├── configuration-management-enhancement-summary.md
│ │ ├── documentation-scripts-refactoring-complete-summary.md
│ │ ├── documentation-scripts-refactoring-plan.md
│ │ ├── duplicate-pattern-extraction-summary.md
│ │ ├── error-handling-standardization-summary.md
│ │ ├── generating-component-reference.md
│ │ ├── index.md
│ │ ├── logging-consistency-implementation-summary.md
│ │ ├── project-build.md
│ │ ├── project-structure.md
│ │ ├── theme-context.md
│ │ ├── tiptap-design-considerations.md
│ │ ├── working-with-code.md
│ │ ├── xmlui-runtime-architecture
│ │ └── xmlui-wcag-accessibility-report.md
│ ├── react-fundamentals.md
│ ├── release-method.md
│ ├── standalone-app.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── playwright.config.ts
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── generate-docs
│ │ ├── build-downloads-map.mjs
│ │ ├── build-pages-map.mjs
│ │ ├── components-config.json
│ │ ├── configuration-management.mjs
│ │ ├── constants.mjs
│ │ ├── create-theme-files.mjs
│ │ ├── DocsGenerator.mjs
│ │ ├── error-handling.mjs
│ │ ├── extensions-config.json
│ │ ├── folders.mjs
│ │ ├── generate-summary-files.mjs
│ │ ├── get-docs.mjs
│ │ ├── input-handler.mjs
│ │ ├── logger.mjs
│ │ ├── logging-standards.mjs
│ │ ├── MetadataProcessor.mjs
│ │ ├── pattern-utilities.mjs
│ │ └── utils.mjs
│ ├── get-langserver-metadata.mjs
│ ├── inline-links.mjs
│ └── README-e2e-summary.md
├── src
│ ├── abstractions
│ │ ├── _conventions.md
│ │ ├── ActionDefs.ts
│ │ ├── AppContextDefs.ts
│ │ ├── ComponentDefs.ts
│ │ ├── ContainerDefs.ts
│ │ ├── ExtensionDefs.ts
│ │ ├── FunctionDefs.ts
│ │ ├── RendererDefs.ts
│ │ ├── scripting
│ │ │ ├── BlockScope.ts
│ │ │ ├── Compilation.ts
│ │ │ ├── LogicalThread.ts
│ │ │ ├── LoopScope.ts
│ │ │ ├── modules.ts
│ │ │ ├── ScriptParserError.ts
│ │ │ ├── Token.ts
│ │ │ ├── TryScope.ts
│ │ │ └── TryScopeExp.ts
│ │ └── ThemingDefs.ts
│ ├── components
│ │ ├── _conventions.md
│ │ ├── abstractions.ts
│ │ ├── Accordion
│ │ │ ├── Accordion.md
│ │ │ ├── Accordion.module.scss
│ │ │ ├── Accordion.spec.ts
│ │ │ ├── Accordion.tsx
│ │ │ ├── AccordionContext.tsx
│ │ │ ├── AccordionItem.tsx
│ │ │ ├── AccordionItemNative.tsx
│ │ │ └── AccordionNative.tsx
│ │ ├── Animation
│ │ │ └── AnimationNative.tsx
│ │ ├── APICall
│ │ │ ├── APICall.md
│ │ │ ├── APICall.spec.ts
│ │ │ ├── APICall.tsx
│ │ │ └── APICallNative.tsx
│ │ ├── App
│ │ │ ├── App.md
│ │ │ ├── App.module.scss
│ │ │ ├── App.spec.ts
│ │ │ ├── App.tsx
│ │ │ ├── AppLayoutContext.ts
│ │ │ ├── AppNative.tsx
│ │ │ ├── AppStateContext.ts
│ │ │ ├── doc-resources
│ │ │ │ ├── condensed-sticky.xmlui
│ │ │ │ ├── condensed.xmlui
│ │ │ │ ├── horizontal-sticky.xmlui
│ │ │ │ ├── horizontal.xmlui
│ │ │ │ ├── vertical-full-header.xmlui
│ │ │ │ ├── vertical-sticky.xmlui
│ │ │ │ └── vertical.xmlui
│ │ │ ├── IndexerContext.ts
│ │ │ ├── LinkInfoContext.ts
│ │ │ ├── SearchContext.tsx
│ │ │ ├── Sheet.module.scss
│ │ │ └── Sheet.tsx
│ │ ├── AppHeader
│ │ │ ├── AppHeader.md
│ │ │ ├── AppHeader.module.scss
│ │ │ ├── AppHeader.spec.ts
│ │ │ ├── AppHeader.tsx
│ │ │ └── AppHeaderNative.tsx
│ │ ├── AppState
│ │ │ ├── AppState.md
│ │ │ ├── AppState.spec.ts
│ │ │ ├── AppState.tsx
│ │ │ └── AppStateNative.tsx
│ │ ├── AutoComplete
│ │ │ ├── AutoComplete.md
│ │ │ ├── AutoComplete.module.scss
│ │ │ ├── AutoComplete.spec.ts
│ │ │ ├── AutoComplete.tsx
│ │ │ ├── AutoCompleteContext.tsx
│ │ │ └── AutoCompleteNative.tsx
│ │ ├── Avatar
│ │ │ ├── Avatar.md
│ │ │ ├── Avatar.module.scss
│ │ │ ├── Avatar.spec.ts
│ │ │ ├── Avatar.tsx
│ │ │ └── AvatarNative.tsx
│ │ ├── Backdrop
│ │ │ ├── Backdrop.md
│ │ │ ├── Backdrop.module.scss
│ │ │ ├── Backdrop.spec.ts
│ │ │ ├── Backdrop.tsx
│ │ │ └── BackdropNative.tsx
│ │ ├── Badge
│ │ │ ├── Badge.md
│ │ │ ├── Badge.module.scss
│ │ │ ├── Badge.spec.ts
│ │ │ ├── Badge.tsx
│ │ │ └── BadgeNative.tsx
│ │ ├── Bookmark
│ │ │ ├── Bookmark.md
│ │ │ ├── Bookmark.module.scss
│ │ │ ├── Bookmark.spec.ts
│ │ │ ├── Bookmark.tsx
│ │ │ └── BookmarkNative.tsx
│ │ ├── Breakout
│ │ │ ├── Breakout.module.scss
│ │ │ ├── Breakout.spec.ts
│ │ │ ├── Breakout.tsx
│ │ │ └── BreakoutNative.tsx
│ │ ├── Button
│ │ │ ├── Button-style.spec.ts
│ │ │ ├── Button.md
│ │ │ ├── Button.module.scss
│ │ │ ├── Button.spec.ts
│ │ │ ├── Button.tsx
│ │ │ └── ButtonNative.tsx
│ │ ├── Card
│ │ │ ├── Card.md
│ │ │ ├── Card.module.scss
│ │ │ ├── Card.spec.ts
│ │ │ ├── Card.tsx
│ │ │ └── CardNative.tsx
│ │ ├── Carousel
│ │ │ ├── Carousel.md
│ │ │ ├── Carousel.module.scss
│ │ │ ├── Carousel.spec.ts
│ │ │ ├── Carousel.tsx
│ │ │ ├── CarouselContext.tsx
│ │ │ ├── CarouselItem.tsx
│ │ │ ├── CarouselItemNative.tsx
│ │ │ └── CarouselNative.tsx
│ │ ├── ChangeListener
│ │ │ ├── ChangeListener.md
│ │ │ ├── ChangeListener.spec.ts
│ │ │ ├── ChangeListener.tsx
│ │ │ └── ChangeListenerNative.tsx
│ │ ├── chart-color-schemes.ts
│ │ ├── Charts
│ │ │ ├── AreaChart
│ │ │ │ ├── AreaChart.md
│ │ │ │ ├── AreaChart.spec.ts
│ │ │ │ ├── AreaChart.tsx
│ │ │ │ └── AreaChartNative.tsx
│ │ │ ├── BarChart
│ │ │ │ ├── BarChart.md
│ │ │ │ ├── BarChart.module.scss
│ │ │ │ ├── BarChart.spec.ts
│ │ │ │ ├── BarChart.tsx
│ │ │ │ └── BarChartNative.tsx
│ │ │ ├── DonutChart
│ │ │ │ ├── DonutChart.spec.ts
│ │ │ │ └── DonutChart.tsx
│ │ │ ├── LabelList
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ ├── LabelListNative.module.scss
│ │ │ │ └── LabelListNative.tsx
│ │ │ ├── Legend
│ │ │ │ ├── Legend.spec.ts
│ │ │ │ ├── Legend.tsx
│ │ │ │ └── LegendNative.tsx
│ │ │ ├── LineChart
│ │ │ │ ├── LineChart.md
│ │ │ │ ├── LineChart.module.scss
│ │ │ │ ├── LineChart.spec.ts
│ │ │ │ ├── LineChart.tsx
│ │ │ │ └── LineChartNative.tsx
│ │ │ ├── PieChart
│ │ │ │ ├── PieChart.md
│ │ │ │ ├── PieChart.spec.ts
│ │ │ │ ├── PieChart.tsx
│ │ │ │ ├── PieChartNative.module.scss
│ │ │ │ └── PieChartNative.tsx
│ │ │ ├── RadarChart
│ │ │ │ ├── RadarChart.md
│ │ │ │ ├── RadarChart.spec.ts
│ │ │ │ ├── RadarChart.tsx
│ │ │ │ └── RadarChartNative.tsx
│ │ │ ├── Tooltip
│ │ │ │ ├── TooltipContent.module.scss
│ │ │ │ ├── TooltipContent.spec.ts
│ │ │ │ └── TooltipContent.tsx
│ │ │ └── utils
│ │ │ ├── abstractions.ts
│ │ │ └── ChartProvider.tsx
│ │ ├── Checkbox
│ │ │ ├── Checkbox.md
│ │ │ ├── Checkbox.spec.ts
│ │ │ └── Checkbox.tsx
│ │ ├── CodeBlock
│ │ │ ├── CodeBlock.module.scss
│ │ │ ├── CodeBlock.spec.ts
│ │ │ ├── CodeBlock.tsx
│ │ │ ├── CodeBlockNative.tsx
│ │ │ └── highlight-code.ts
│ │ ├── collectedComponentMetadata.ts
│ │ ├── ColorPicker
│ │ │ ├── ColorPicker.md
│ │ │ ├── ColorPicker.module.scss
│ │ │ ├── ColorPicker.spec.ts
│ │ │ ├── ColorPicker.tsx
│ │ │ └── ColorPickerNative.tsx
│ │ ├── Column
│ │ │ ├── Column.md
│ │ │ ├── Column.tsx
│ │ │ ├── ColumnNative.tsx
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ └── TableContext.tsx
│ │ ├── component-utils.ts
│ │ ├── ComponentProvider.tsx
│ │ ├── ComponentRegistryContext.tsx
│ │ ├── container-helpers.tsx
│ │ ├── ContentSeparator
│ │ │ ├── ContentSeparator.md
│ │ │ ├── ContentSeparator.module.scss
│ │ │ ├── ContentSeparator.spec.ts
│ │ │ ├── ContentSeparator.tsx
│ │ │ └── ContentSeparatorNative.tsx
│ │ ├── DataSource
│ │ │ ├── DataSource.md
│ │ │ └── DataSource.tsx
│ │ ├── DateInput
│ │ │ ├── DateInput.md
│ │ │ ├── DateInput.module.scss
│ │ │ ├── DateInput.spec.ts
│ │ │ ├── DateInput.tsx
│ │ │ └── DateInputNative.tsx
│ │ ├── DatePicker
│ │ │ ├── DatePicker.md
│ │ │ ├── DatePicker.module.scss
│ │ │ ├── DatePicker.spec.ts
│ │ │ ├── DatePicker.tsx
│ │ │ └── DatePickerNative.tsx
│ │ ├── DropdownMenu
│ │ │ ├── DropdownMenu.md
│ │ │ ├── DropdownMenu.module.scss
│ │ │ ├── DropdownMenu.spec.ts
│ │ │ ├── DropdownMenu.tsx
│ │ │ ├── DropdownMenuNative.tsx
│ │ │ ├── MenuItem.md
│ │ │ └── SubMenuItem.md
│ │ ├── EmojiSelector
│ │ │ ├── EmojiSelector.md
│ │ │ ├── EmojiSelector.spec.ts
│ │ │ ├── EmojiSelector.tsx
│ │ │ └── EmojiSelectorNative.tsx
│ │ ├── ExpandableItem
│ │ │ ├── ExpandableItem.module.scss
│ │ │ ├── ExpandableItem.spec.ts
│ │ │ ├── ExpandableItem.tsx
│ │ │ └── ExpandableItemNative.tsx
│ │ ├── FileInput
│ │ │ ├── FileInput.md
│ │ │ ├── FileInput.module.scss
│ │ │ ├── FileInput.spec.ts
│ │ │ ├── FileInput.tsx
│ │ │ └── FileInputNative.tsx
│ │ ├── FileUploadDropZone
│ │ │ ├── FileUploadDropZone.md
│ │ │ ├── FileUploadDropZone.module.scss
│ │ │ ├── FileUploadDropZone.spec.ts
│ │ │ ├── FileUploadDropZone.tsx
│ │ │ └── FileUploadDropZoneNative.tsx
│ │ ├── FlowLayout
│ │ │ ├── FlowLayout.md
│ │ │ ├── FlowLayout.module.scss
│ │ │ ├── FlowLayout.spec.ts
│ │ │ ├── FlowLayout.spec.ts-snapshots
│ │ │ │ └── Edge-cases-boxShadow-is-not-clipped-1-non-smoke-darwin.png
│ │ │ ├── FlowLayout.tsx
│ │ │ └── FlowLayoutNative.tsx
│ │ ├── Footer
│ │ │ ├── Footer.md
│ │ │ ├── Footer.module.scss
│ │ │ ├── Footer.spec.ts
│ │ │ ├── Footer.tsx
│ │ │ └── FooterNative.tsx
│ │ ├── Form
│ │ │ ├── Form.md
│ │ │ ├── Form.module.scss
│ │ │ ├── Form.spec.ts
│ │ │ ├── Form.tsx
│ │ │ ├── formActions.ts
│ │ │ ├── FormContext.ts
│ │ │ └── FormNative.tsx
│ │ ├── FormItem
│ │ │ ├── FormItem.md
│ │ │ ├── FormItem.module.scss
│ │ │ ├── FormItem.spec.ts
│ │ │ ├── FormItem.tsx
│ │ │ ├── FormItemNative.tsx
│ │ │ ├── HelperText.module.scss
│ │ │ ├── HelperText.tsx
│ │ │ ├── ItemWithLabel.tsx
│ │ │ └── Validations.ts
│ │ ├── FormSection
│ │ │ ├── FormSection.md
│ │ │ ├── FormSection.ts
│ │ │ └── FormSection.xmlui
│ │ ├── Fragment
│ │ │ ├── Fragment.spec.ts
│ │ │ └── Fragment.tsx
│ │ ├── Heading
│ │ │ ├── abstractions.ts
│ │ │ ├── H1.md
│ │ │ ├── H1.spec.ts
│ │ │ ├── H2.md
│ │ │ ├── H2.spec.ts
│ │ │ ├── H3.md
│ │ │ ├── H3.spec.ts
│ │ │ ├── H4.md
│ │ │ ├── H4.spec.ts
│ │ │ ├── H5.md
│ │ │ ├── H5.spec.ts
│ │ │ ├── H6.md
│ │ │ ├── H6.spec.ts
│ │ │ ├── Heading.md
│ │ │ ├── Heading.module.scss
│ │ │ ├── Heading.spec.ts
│ │ │ ├── Heading.tsx
│ │ │ └── HeadingNative.tsx
│ │ ├── HoverCard
│ │ │ ├── HoverCard.tsx
│ │ │ └── HovercardNative.tsx
│ │ ├── HtmlTags
│ │ │ ├── HtmlTags.module.scss
│ │ │ ├── HtmlTags.spec.ts
│ │ │ └── HtmlTags.tsx
│ │ ├── Icon
│ │ │ ├── AdmonitionDanger.tsx
│ │ │ ├── AdmonitionInfo.tsx
│ │ │ ├── AdmonitionNote.tsx
│ │ │ ├── AdmonitionTip.tsx
│ │ │ ├── AdmonitionWarning.tsx
│ │ │ ├── ApiIcon.tsx
│ │ │ ├── ArrowDropDown.module.scss
│ │ │ ├── ArrowDropDown.tsx
│ │ │ ├── ArrowDropUp.module.scss
│ │ │ ├── ArrowDropUp.tsx
│ │ │ ├── ArrowLeft.module.scss
│ │ │ ├── ArrowLeft.tsx
│ │ │ ├── ArrowRight.module.scss
│ │ │ ├── ArrowRight.tsx
│ │ │ ├── Attach.tsx
│ │ │ ├── Binding.module.scss
│ │ │ ├── Binding.tsx
│ │ │ ├── BoardIcon.tsx
│ │ │ ├── BoxIcon.tsx
│ │ │ ├── CheckIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeft.tsx
│ │ │ ├── ChevronRight.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CodeFileIcon.tsx
│ │ │ ├── CodeSandbox.tsx
│ │ │ ├── CompactListIcon.tsx
│ │ │ ├── ContentCopyIcon.tsx
│ │ │ ├── DarkToLightIcon.tsx
│ │ │ ├── DatabaseIcon.module.scss
│ │ │ ├── DatabaseIcon.tsx
│ │ │ ├── DocFileIcon.tsx
│ │ │ ├── DocIcon.tsx
│ │ │ ├── DotMenuHorizontalIcon.tsx
│ │ │ ├── DotMenuIcon.tsx
│ │ │ ├── EmailIcon.tsx
│ │ │ ├── EmptyFolderIcon.tsx
│ │ │ ├── ErrorIcon.tsx
│ │ │ ├── ExpressionIcon.tsx
│ │ │ ├── FillPlusCricleIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FolderIcon.tsx
│ │ │ ├── GlobeIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── HyperLinkIcon.tsx
│ │ │ ├── Icon.md
│ │ │ ├── Icon.module.scss
│ │ │ ├── Icon.spec.ts
│ │ │ ├── Icon.tsx
│ │ │ ├── IconNative.tsx
│ │ │ ├── ImageFileIcon.tsx
│ │ │ ├── Inspect.tsx
│ │ │ ├── LightToDark.tsx
│ │ │ ├── LinkIcon.tsx
│ │ │ ├── ListIcon.tsx
│ │ │ ├── LooseListIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MoreOptionsIcon.tsx
│ │ │ ├── NoSortIcon.tsx
│ │ │ ├── PDFIcon.tsx
│ │ │ ├── PenIcon.tsx
│ │ │ ├── PhoneIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlusIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortAscendingIcon.tsx
│ │ │ ├── SortDescendingIcon.tsx
│ │ │ ├── StarsIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── svg
│ │ │ │ ├── admonition_danger.svg
│ │ │ │ ├── admonition_info.svg
│ │ │ │ ├── admonition_note.svg
│ │ │ │ ├── admonition_tip.svg
│ │ │ │ ├── admonition_warning.svg
│ │ │ │ ├── api.svg
│ │ │ │ ├── arrow-dropdown.svg
│ │ │ │ ├── arrow-left.svg
│ │ │ │ ├── arrow-right.svg
│ │ │ │ ├── arrow-up.svg
│ │ │ │ ├── attach.svg
│ │ │ │ ├── binding.svg
│ │ │ │ ├── box.svg
│ │ │ │ ├── bulb.svg
│ │ │ │ ├── code-file.svg
│ │ │ │ ├── code-sandbox.svg
│ │ │ │ ├── dark_to_light.svg
│ │ │ │ ├── database.svg
│ │ │ │ ├── doc.svg
│ │ │ │ ├── empty-folder.svg
│ │ │ │ ├── expression.svg
│ │ │ │ ├── eye-closed.svg
│ │ │ │ ├── eye-dark.svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── file-text.svg
│ │ │ │ ├── filter.svg
│ │ │ │ ├── folder.svg
│ │ │ │ ├── img.svg
│ │ │ │ ├── inspect.svg
│ │ │ │ ├── light_to_dark.svg
│ │ │ │ ├── moon.svg
│ │ │ │ ├── pdf.svg
│ │ │ │ ├── photo.svg
│ │ │ │ ├── share.svg
│ │ │ │ ├── stars.svg
│ │ │ │ ├── sun.svg
│ │ │ │ ├── trending-down.svg
│ │ │ │ ├── trending-level.svg
│ │ │ │ ├── trending-up.svg
│ │ │ │ ├── txt.svg
│ │ │ │ ├── unknown-file.svg
│ │ │ │ ├── unlink.svg
│ │ │ │ └── xls.svg
│ │ │ ├── TableDeleteColumnIcon.tsx
│ │ │ ├── TableDeleteRowIcon.tsx
│ │ │ ├── TableInsertColumnIcon.tsx
│ │ │ ├── TableInsertRowIcon.tsx
│ │ │ ├── TrashIcon.tsx
│ │ │ ├── TrendingDownIcon.tsx
│ │ │ ├── TrendingLevelIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TxtIcon.tsx
│ │ │ ├── UnknownFileIcon.tsx
│ │ │ ├── UnlinkIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── WarningIcon.tsx
│ │ │ └── XlsIcon.tsx
│ │ ├── IconProvider.tsx
│ │ ├── IconRegistryContext.tsx
│ │ ├── IFrame
│ │ │ ├── IFrame.md
│ │ │ ├── IFrame.module.scss
│ │ │ ├── IFrame.spec.ts
│ │ │ ├── IFrame.tsx
│ │ │ └── IFrameNative.tsx
│ │ ├── Image
│ │ │ ├── Image.md
│ │ │ ├── Image.module.scss
│ │ │ ├── Image.spec.ts
│ │ │ ├── Image.tsx
│ │ │ └── ImageNative.tsx
│ │ ├── Input
│ │ │ ├── index.ts
│ │ │ ├── InputAdornment.module.scss
│ │ │ ├── InputAdornment.tsx
│ │ │ ├── InputDivider.module.scss
│ │ │ ├── InputDivider.tsx
│ │ │ ├── InputLabel.module.scss
│ │ │ ├── InputLabel.tsx
│ │ │ ├── PartialInput.module.scss
│ │ │ └── PartialInput.tsx
│ │ ├── InspectButton
│ │ │ ├── InspectButton.module.scss
│ │ │ └── InspectButton.tsx
│ │ ├── Items
│ │ │ ├── Items.md
│ │ │ ├── Items.spec.ts
│ │ │ ├── Items.tsx
│ │ │ └── ItemsNative.tsx
│ │ ├── Link
│ │ │ ├── Link.md
│ │ │ ├── Link.module.scss
│ │ │ ├── Link.spec.ts
│ │ │ ├── Link.tsx
│ │ │ └── LinkNative.tsx
│ │ ├── List
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── List.md
│ │ │ ├── List.module.scss
│ │ │ ├── List.spec.ts
│ │ │ ├── List.tsx
│ │ │ └── ListNative.tsx
│ │ ├── Logo
│ │ │ ├── doc-resources
│ │ │ │ └── xmlui-logo.svg
│ │ │ ├── Logo.md
│ │ │ ├── Logo.tsx
│ │ │ └── LogoNative.tsx
│ │ ├── Markdown
│ │ │ ├── CodeText.module.scss
│ │ │ ├── CodeText.tsx
│ │ │ ├── Markdown.md
│ │ │ ├── Markdown.module.scss
│ │ │ ├── Markdown.spec.ts
│ │ │ ├── Markdown.tsx
│ │ │ ├── MarkdownNative.tsx
│ │ │ ├── parse-binding-expr.ts
│ │ │ └── utils.ts
│ │ ├── metadata-helpers.ts
│ │ ├── ModalDialog
│ │ │ ├── ConfirmationModalContextProvider.tsx
│ │ │ ├── Dialog.module.scss
│ │ │ ├── Dialog.tsx
│ │ │ ├── ModalDialog.md
│ │ │ ├── ModalDialog.module.scss
│ │ │ ├── ModalDialog.spec.ts
│ │ │ ├── ModalDialog.tsx
│ │ │ ├── ModalDialogNative.tsx
│ │ │ └── ModalVisibilityContext.tsx
│ │ ├── NavGroup
│ │ │ ├── NavGroup.md
│ │ │ ├── NavGroup.module.scss
│ │ │ ├── NavGroup.spec.ts
│ │ │ ├── NavGroup.tsx
│ │ │ ├── NavGroupContext.ts
│ │ │ └── NavGroupNative.tsx
│ │ ├── NavLink
│ │ │ ├── NavLink.md
│ │ │ ├── NavLink.module.scss
│ │ │ ├── NavLink.spec.ts
│ │ │ ├── NavLink.tsx
│ │ │ └── NavLinkNative.tsx
│ │ ├── NavPanel
│ │ │ ├── NavPanel.md
│ │ │ ├── NavPanel.module.scss
│ │ │ ├── NavPanel.spec.ts
│ │ │ ├── NavPanel.tsx
│ │ │ └── NavPanelNative.tsx
│ │ ├── NestedApp
│ │ │ ├── AppWithCodeView.module.scss
│ │ │ ├── AppWithCodeView.tsx
│ │ │ ├── AppWithCodeViewNative.tsx
│ │ │ ├── defaultProps.tsx
│ │ │ ├── logo.svg
│ │ │ ├── NestedApp.module.scss
│ │ │ ├── NestedApp.tsx
│ │ │ ├── NestedAppNative.tsx
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.tsx
│ │ │ └── utils.ts
│ │ ├── NoResult
│ │ │ ├── NoResult.md
│ │ │ ├── NoResult.module.scss
│ │ │ ├── NoResult.spec.ts
│ │ │ ├── NoResult.tsx
│ │ │ └── NoResultNative.tsx
│ │ ├── NumberBox
│ │ │ ├── numberbox-abstractions.ts
│ │ │ ├── NumberBox.md
│ │ │ ├── NumberBox.module.scss
│ │ │ ├── NumberBox.spec.ts
│ │ │ ├── NumberBox.tsx
│ │ │ └── NumberBoxNative.tsx
│ │ ├── Option
│ │ │ ├── Option.md
│ │ │ ├── Option.spec.ts
│ │ │ ├── Option.tsx
│ │ │ ├── OptionNative.tsx
│ │ │ └── OptionTypeProvider.tsx
│ │ ├── PageMetaTitle
│ │ │ ├── PageMetaTilteNative.tsx
│ │ │ ├── PageMetaTitle.md
│ │ │ ├── PageMetaTitle.spec.ts
│ │ │ └── PageMetaTitle.tsx
│ │ ├── Pages
│ │ │ ├── Page.md
│ │ │ ├── Pages.md
│ │ │ ├── Pages.module.scss
│ │ │ ├── Pages.tsx
│ │ │ └── PagesNative.tsx
│ │ ├── Pagination
│ │ │ ├── Pagination.md
│ │ │ ├── Pagination.module.scss
│ │ │ ├── Pagination.spec.ts
│ │ │ ├── Pagination.tsx
│ │ │ └── PaginationNative.tsx
│ │ ├── PositionedContainer
│ │ │ ├── PositionedContainer.module.scss
│ │ │ ├── PositionedContainer.tsx
│ │ │ └── PositionedContainerNative.tsx
│ │ ├── ProfileMenu
│ │ │ ├── ProfileMenu.module.scss
│ │ │ └── ProfileMenu.tsx
│ │ ├── ProgressBar
│ │ │ ├── ProgressBar.md
│ │ │ ├── ProgressBar.module.scss
│ │ │ ├── ProgressBar.spec.ts
│ │ │ ├── ProgressBar.tsx
│ │ │ └── ProgressBarNative.tsx
│ │ ├── Queue
│ │ │ ├── Queue.md
│ │ │ ├── Queue.spec.ts
│ │ │ ├── Queue.tsx
│ │ │ ├── queueActions.ts
│ │ │ └── QueueNative.tsx
│ │ ├── RadioGroup
│ │ │ ├── RadioGroup.md
│ │ │ ├── RadioGroup.module.scss
│ │ │ ├── RadioGroup.spec.ts
│ │ │ ├── RadioGroup.tsx
│ │ │ ├── RadioGroupNative.tsx
│ │ │ ├── RadioItem.tsx
│ │ │ └── RadioItemNative.tsx
│ │ ├── RealTimeAdapter
│ │ │ ├── RealTimeAdapter.tsx
│ │ │ └── RealTimeAdapterNative.tsx
│ │ ├── Redirect
│ │ │ ├── Redirect.md
│ │ │ ├── Redirect.spec.ts
│ │ │ └── Redirect.tsx
│ │ ├── ResponsiveBar
│ │ │ ├── README.md
│ │ │ ├── ResponsiveBar.md
│ │ │ ├── ResponsiveBar.module.scss
│ │ │ ├── ResponsiveBar.spec.ts
│ │ │ ├── ResponsiveBar.tsx
│ │ │ └── ResponsiveBarNative.tsx
│ │ ├── Select
│ │ │ ├── HiddenOption.tsx
│ │ │ ├── OptionContext.ts
│ │ │ ├── Select.md
│ │ │ ├── Select.module.scss
│ │ │ ├── Select.spec.ts
│ │ │ ├── Select.tsx
│ │ │ ├── SelectContext.tsx
│ │ │ └── SelectNative.tsx
│ │ ├── SelectionStore
│ │ │ ├── SelectionStore.md
│ │ │ ├── SelectionStore.tsx
│ │ │ └── SelectionStoreNative.tsx
│ │ ├── Slider
│ │ │ ├── Slider.md
│ │ │ ├── Slider.module.scss
│ │ │ ├── Slider.spec.ts
│ │ │ ├── Slider.tsx
│ │ │ └── SliderNative.tsx
│ │ ├── Slot
│ │ │ ├── Slot.md
│ │ │ ├── Slot.spec.ts
│ │ │ └── Slot.ts
│ │ ├── SlotItem.tsx
│ │ ├── SpaceFiller
│ │ │ ├── SpaceFiller.md
│ │ │ ├── SpaceFiller.module.scss
│ │ │ ├── SpaceFiller.spec.ts
│ │ │ ├── SpaceFiller.tsx
│ │ │ └── SpaceFillerNative.tsx
│ │ ├── Spinner
│ │ │ ├── Spinner.md
│ │ │ ├── Spinner.module.scss
│ │ │ ├── Spinner.spec.ts
│ │ │ ├── Spinner.tsx
│ │ │ └── SpinnerNative.tsx
│ │ ├── Splitter
│ │ │ ├── HSplitter.md
│ │ │ ├── HSplitter.spec.ts
│ │ │ ├── Splitter.md
│ │ │ ├── Splitter.module.scss
│ │ │ ├── Splitter.spec.ts
│ │ │ ├── Splitter.tsx
│ │ │ ├── SplitterNative.tsx
│ │ │ ├── utils.ts
│ │ │ ├── VSplitter.md
│ │ │ └── VSplitter.spec.ts
│ │ ├── Stack
│ │ │ ├── CHStack.md
│ │ │ ├── CHStack.spec.ts
│ │ │ ├── CVStack.md
│ │ │ ├── CVStack.spec.ts
│ │ │ ├── HStack.md
│ │ │ ├── HStack.spec.ts
│ │ │ ├── Stack.md
│ │ │ ├── Stack.module.scss
│ │ │ ├── Stack.spec.ts
│ │ │ ├── Stack.tsx
│ │ │ ├── StackNative.tsx
│ │ │ ├── VStack.md
│ │ │ └── VStack.spec.ts
│ │ ├── StickyBox
│ │ │ ├── StickyBox.md
│ │ │ ├── StickyBox.module.scss
│ │ │ ├── StickyBox.tsx
│ │ │ └── StickyBoxNative.tsx
│ │ ├── Switch
│ │ │ ├── Switch.md
│ │ │ ├── Switch.spec.ts
│ │ │ └── Switch.tsx
│ │ ├── Table
│ │ │ ├── doc-resources
│ │ │ │ └── list-component-data.js
│ │ │ ├── react-table-config.d.ts
│ │ │ ├── Table.md
│ │ │ ├── Table.module.scss
│ │ │ ├── Table.spec.ts
│ │ │ ├── Table.tsx
│ │ │ ├── TableNative.tsx
│ │ │ └── useRowSelection.tsx
│ │ ├── TableOfContents
│ │ │ ├── TableOfContents.module.scss
│ │ │ ├── TableOfContents.spec.ts
│ │ │ ├── TableOfContents.tsx
│ │ │ └── TableOfContentsNative.tsx
│ │ ├── Tabs
│ │ │ ├── TabContext.tsx
│ │ │ ├── TabItem.md
│ │ │ ├── TabItem.tsx
│ │ │ ├── TabItemNative.tsx
│ │ │ ├── Tabs.md
│ │ │ ├── Tabs.module.scss
│ │ │ ├── Tabs.spec.ts
│ │ │ ├── Tabs.tsx
│ │ │ └── TabsNative.tsx
│ │ ├── Text
│ │ │ ├── Text.md
│ │ │ ├── Text.module.scss
│ │ │ ├── Text.spec.ts
│ │ │ ├── Text.tsx
│ │ │ └── TextNative.tsx
│ │ ├── TextArea
│ │ │ ├── TextArea.md
│ │ │ ├── TextArea.module.scss
│ │ │ ├── TextArea.spec.ts
│ │ │ ├── TextArea.tsx
│ │ │ ├── TextAreaNative.tsx
│ │ │ ├── TextAreaResizable.tsx
│ │ │ └── useComposedRef.ts
│ │ ├── TextBox
│ │ │ ├── TextBox.md
│ │ │ ├── TextBox.module.scss
│ │ │ ├── TextBox.spec.ts
│ │ │ ├── TextBox.tsx
│ │ │ └── TextBoxNative.tsx
│ │ ├── Theme
│ │ │ ├── NotificationToast.tsx
│ │ │ ├── Theme.md
│ │ │ ├── Theme.module.scss
│ │ │ ├── Theme.spec.ts
│ │ │ ├── Theme.tsx
│ │ │ └── ThemeNative.tsx
│ │ ├── TimeInput
│ │ │ ├── TimeInput.md
│ │ │ ├── TimeInput.module.scss
│ │ │ ├── TimeInput.spec.ts
│ │ │ ├── TimeInput.tsx
│ │ │ ├── TimeInputNative.tsx
│ │ │ └── utils.ts
│ │ ├── Timer
│ │ │ ├── Timer.md
│ │ │ ├── Timer.spec.ts
│ │ │ ├── Timer.tsx
│ │ │ └── TimerNative.tsx
│ │ ├── Toggle
│ │ │ ├── Toggle.module.scss
│ │ │ └── Toggle.tsx
│ │ ├── ToneChangerButton
│ │ │ ├── ToneChangerButton.md
│ │ │ ├── ToneChangerButton.spec.ts
│ │ │ └── ToneChangerButton.tsx
│ │ ├── ToneSwitch
│ │ │ ├── ToneSwitch.md
│ │ │ ├── ToneSwitch.module.scss
│ │ │ ├── ToneSwitch.spec.ts
│ │ │ ├── ToneSwitch.tsx
│ │ │ └── ToneSwitchNative.tsx
│ │ ├── Tooltip
│ │ │ ├── Tooltip.md
│ │ │ ├── Tooltip.module.scss
│ │ │ ├── Tooltip.spec.ts
│ │ │ ├── Tooltip.tsx
│ │ │ └── TooltipNative.tsx
│ │ ├── Tree
│ │ │ ├── testData.ts
│ │ │ ├── Tree-dynamic.spec.ts
│ │ │ ├── Tree-icons.spec.ts
│ │ │ ├── Tree.md
│ │ │ ├── Tree.spec.ts
│ │ │ ├── TreeComponent.module.scss
│ │ │ ├── TreeComponent.tsx
│ │ │ └── TreeNative.tsx
│ │ ├── TreeDisplay
│ │ │ ├── TreeDisplay.md
│ │ │ ├── TreeDisplay.module.scss
│ │ │ ├── TreeDisplay.tsx
│ │ │ └── TreeDisplayNative.tsx
│ │ ├── ValidationSummary
│ │ │ ├── ValidationSummary.module.scss
│ │ │ └── ValidationSummary.tsx
│ │ └── VisuallyHidden.tsx
│ ├── components-core
│ │ ├── abstractions
│ │ │ ├── ComponentRenderer.ts
│ │ │ ├── LoaderRenderer.ts
│ │ │ ├── standalone.ts
│ │ │ └── treeAbstractions.ts
│ │ ├── action
│ │ │ ├── actions.ts
│ │ │ ├── APICall.tsx
│ │ │ ├── FileDownloadAction.tsx
│ │ │ ├── FileUploadAction.tsx
│ │ │ ├── NavigateAction.tsx
│ │ │ └── TimedAction.tsx
│ │ ├── ApiBoundComponent.tsx
│ │ ├── appContext
│ │ │ ├── date-functions.ts
│ │ │ ├── math-function.ts
│ │ │ └── misc-utils.ts
│ │ ├── AppContext.tsx
│ │ ├── behaviors
│ │ │ ├── Behavior.tsx
│ │ │ └── CoreBehaviors.tsx
│ │ ├── component-hooks.ts
│ │ ├── ComponentDecorator.tsx
│ │ ├── ComponentViewer.tsx
│ │ ├── CompoundComponent.tsx
│ │ ├── constants.ts
│ │ ├── DebugViewProvider.tsx
│ │ ├── descriptorHelper.ts
│ │ ├── devtools
│ │ │ ├── InspectorDialog.module.scss
│ │ │ ├── InspectorDialog.tsx
│ │ │ └── InspectorDialogVisibilityContext.tsx
│ │ ├── EngineError.ts
│ │ ├── event-handlers.ts
│ │ ├── InspectorButton.module.scss
│ │ ├── InspectorContext.tsx
│ │ ├── interception
│ │ │ ├── abstractions.ts
│ │ │ ├── ApiInterceptor.ts
│ │ │ ├── ApiInterceptorProvider.tsx
│ │ │ ├── apiInterceptorWorker.ts
│ │ │ ├── Backend.ts
│ │ │ ├── Errors.ts
│ │ │ ├── IndexedDb.ts
│ │ │ ├── initMock.ts
│ │ │ ├── InMemoryDb.ts
│ │ │ ├── ReadonlyCollection.ts
│ │ │ └── useApiInterceptorContext.tsx
│ │ ├── loader
│ │ │ ├── ApiLoader.tsx
│ │ │ ├── DataLoader.tsx
│ │ │ ├── ExternalDataLoader.tsx
│ │ │ ├── Loader.tsx
│ │ │ ├── MockLoaderRenderer.tsx
│ │ │ └── PageableLoader.tsx
│ │ ├── LoaderComponent.tsx
│ │ ├── markup-check.ts
│ │ ├── parts.ts
│ │ ├── renderers.ts
│ │ ├── rendering
│ │ │ ├── AppContent.tsx
│ │ │ ├── AppRoot.tsx
│ │ │ ├── AppWrapper.tsx
│ │ │ ├── buildProxy.ts
│ │ │ ├── collectFnVarDeps.ts
│ │ │ ├── ComponentAdapter.tsx
│ │ │ ├── ComponentWrapper.tsx
│ │ │ ├── Container.tsx
│ │ │ ├── containers.ts
│ │ │ ├── ContainerWrapper.tsx
│ │ │ ├── ErrorBoundary.module.scss
│ │ │ ├── ErrorBoundary.tsx
│ │ │ ├── InvalidComponent.module.scss
│ │ │ ├── InvalidComponent.tsx
│ │ │ ├── nodeUtils.ts
│ │ │ ├── reducer.ts
│ │ │ ├── renderChild.tsx
│ │ │ ├── StandaloneComponent.tsx
│ │ │ ├── StateContainer.tsx
│ │ │ ├── UnknownComponent.module.scss
│ │ │ ├── UnknownComponent.tsx
│ │ │ └── valueExtractor.ts
│ │ ├── reportEngineError.ts
│ │ ├── RestApiProxy.ts
│ │ ├── script-runner
│ │ │ ├── asyncProxy.ts
│ │ │ ├── AttributeValueParser.ts
│ │ │ ├── bannedFunctions.ts
│ │ │ ├── BindingTreeEvaluationContext.ts
│ │ │ ├── eval-tree-async.ts
│ │ │ ├── eval-tree-common.ts
│ │ │ ├── eval-tree-sync.ts
│ │ │ ├── ParameterParser.ts
│ │ │ ├── process-statement-async.ts
│ │ │ ├── process-statement-common.ts
│ │ │ ├── process-statement-sync.ts
│ │ │ ├── ScriptingSourceTree.ts
│ │ │ ├── simplify-expression.ts
│ │ │ ├── statement-queue.ts
│ │ │ └── visitors.ts
│ │ ├── StandaloneApp.tsx
│ │ ├── StandaloneExtensionManager.ts
│ │ ├── TableOfContentsContext.tsx
│ │ ├── theming
│ │ │ ├── _themes.scss
│ │ │ ├── component-layout-resolver.ts
│ │ │ ├── extendThemeUtils.ts
│ │ │ ├── hvar.ts
│ │ │ ├── layout-resolver.ts
│ │ │ ├── parse-layout-props.ts
│ │ │ ├── StyleContext.tsx
│ │ │ ├── StyleRegistry.ts
│ │ │ ├── ThemeContext.tsx
│ │ │ ├── ThemeProvider.tsx
│ │ │ ├── themes
│ │ │ │ ├── base-utils.ts
│ │ │ │ ├── palette.ts
│ │ │ │ ├── root.ts
│ │ │ │ ├── solid.ts
│ │ │ │ ├── theme-colors.ts
│ │ │ │ └── xmlui.ts
│ │ │ ├── themeVars.module.scss
│ │ │ ├── themeVars.ts
│ │ │ ├── transformThemeVars.ts
│ │ │ └── utils.ts
│ │ ├── utils
│ │ │ ├── actionUtils.ts
│ │ │ ├── audio-utils.ts
│ │ │ ├── base64-utils.ts
│ │ │ ├── compound-utils.ts
│ │ │ ├── css-utils.ts
│ │ │ ├── DataLoaderQueryKeyGenerator.ts
│ │ │ ├── date-utils.ts
│ │ │ ├── extractParam.ts
│ │ │ ├── hooks.tsx
│ │ │ ├── LruCache.ts
│ │ │ ├── mergeProps.ts
│ │ │ ├── misc.ts
│ │ │ ├── request-params.ts
│ │ │ ├── statementUtils.ts
│ │ │ └── treeUtils.ts
│ │ └── xmlui-parser.ts
│ ├── index-standalone.ts
│ ├── index.scss
│ ├── index.ts
│ ├── language-server
│ │ ├── server-common.ts
│ │ ├── server-web-worker.ts
│ │ ├── server.ts
│ │ ├── services
│ │ │ ├── common
│ │ │ │ ├── docs-generation.ts
│ │ │ │ ├── lsp-utils.ts
│ │ │ │ ├── metadata-utils.ts
│ │ │ │ └── syntax-node-utilities.ts
│ │ │ ├── completion.ts
│ │ │ ├── diagnostic.ts
│ │ │ ├── format.ts
│ │ │ └── hover.ts
│ │ └── xmlui-metadata-generated.mjs
│ ├── logging
│ │ ├── LoggerContext.tsx
│ │ ├── LoggerInitializer.tsx
│ │ ├── LoggerService.ts
│ │ └── xmlui.ts
│ ├── logo.svg
│ ├── parsers
│ │ ├── common
│ │ │ ├── GenericToken.ts
│ │ │ ├── InputStream.ts
│ │ │ └── utils.ts
│ │ ├── scripting
│ │ │ ├── code-behind-collect.ts
│ │ │ ├── Lexer.ts
│ │ │ ├── modules.ts
│ │ │ ├── Parser.ts
│ │ │ ├── ParserError.ts
│ │ │ ├── ScriptingNodeTypes.ts
│ │ │ ├── TokenTrait.ts
│ │ │ ├── TokenType.ts
│ │ │ └── tree-visitor.ts
│ │ ├── style-parser
│ │ │ ├── errors.ts
│ │ │ ├── source-tree.ts
│ │ │ ├── StyleInputStream.ts
│ │ │ ├── StyleLexer.ts
│ │ │ ├── StyleParser.ts
│ │ │ └── tokens.ts
│ │ └── xmlui-parser
│ │ ├── CharacterCodes.ts
│ │ ├── diagnostics.ts
│ │ ├── fileExtensions.ts
│ │ ├── index.ts
│ │ ├── lint.ts
│ │ ├── parser.ts
│ │ ├── ParserError.ts
│ │ ├── scanner.ts
│ │ ├── syntax-kind.ts
│ │ ├── syntax-node.ts
│ │ ├── transform.ts
│ │ ├── utils.ts
│ │ ├── xmlui-serializer.ts
│ │ └── xmlui-tree.ts
│ ├── react-app-env.d.ts
│ ├── syntax
│ │ ├── monaco
│ │ │ ├── grammar.monacoLanguage.ts
│ │ │ ├── index.ts
│ │ │ ├── xmlui-dark.ts
│ │ │ ├── xmlui-light.ts
│ │ │ └── xmluiscript.monacoLanguage.ts
│ │ └── textMate
│ │ ├── index.ts
│ │ ├── xmlui-dark.json
│ │ ├── xmlui-light.json
│ │ ├── xmlui.json
│ │ └── xmlui.tmLanguage.json
│ ├── testing
│ │ ├── assertions.ts
│ │ ├── component-test-helpers.ts
│ │ ├── ComponentDrivers.ts
│ │ ├── drivers
│ │ │ ├── DateInputDriver.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── infrastructure
│ │ │ ├── index.html
│ │ │ ├── main.tsx
│ │ │ ├── public
│ │ │ │ ├── mockServiceWorker.js
│ │ │ │ ├── resources
│ │ │ │ │ ├── bell.svg
│ │ │ │ │ ├── box.svg
│ │ │ │ │ ├── doc.svg
│ │ │ │ │ ├── eye.svg
│ │ │ │ │ ├── flower-640x480.jpg
│ │ │ │ │ ├── sun.svg
│ │ │ │ │ ├── test-image-100x100.jpg
│ │ │ │ │ └── txt.svg
│ │ │ │ └── serve.json
│ │ │ └── TestBed.tsx
│ │ └── themed-app-test-helpers.ts
│ └── vite-env.d.ts
├── tests
│ ├── components
│ │ ├── CodeBlock
│ │ │ └── hightlight-code.test.ts
│ │ ├── playground-pattern.test.ts
│ │ └── Tree
│ │ └── Tree-states.test.ts
│ ├── components-core
│ │ ├── abstractions
│ │ │ └── treeAbstractions.test.ts
│ │ ├── container
│ │ │ └── buildProxy.test.ts
│ │ ├── interception
│ │ │ ├── orderBy.test.ts
│ │ │ ├── ReadOnlyCollection.test.ts
│ │ │ └── request-param-converter.test.ts
│ │ ├── scripts-runner
│ │ │ ├── AttributeValueParser.test.ts
│ │ │ ├── eval-tree-arrow-async.test.ts
│ │ │ ├── eval-tree-arrow.test.ts
│ │ │ ├── eval-tree-func-decl-async.test.ts
│ │ │ ├── eval-tree-func-decl.test.ts
│ │ │ ├── eval-tree-pre-post.test.ts
│ │ │ ├── eval-tree-regression.test.ts
│ │ │ ├── eval-tree.test.ts
│ │ │ ├── function-proxy.test.ts
│ │ │ ├── parser-regression.test.ts
│ │ │ ├── process-event.test.ts
│ │ │ ├── process-function.test.ts
│ │ │ ├── process-implicit-context.test.ts
│ │ │ ├── process-statement-asgn.test.ts
│ │ │ ├── process-statement-destruct.test.ts
│ │ │ ├── process-statement-regs.test.ts
│ │ │ ├── process-statement-sync.test.ts
│ │ │ ├── process-statement.test.ts
│ │ │ ├── process-switch-sync.test.ts
│ │ │ ├── process-switch.test.ts
│ │ │ ├── process-try-sync.test.ts
│ │ │ ├── process-try.test.ts
│ │ │ └── test-helpers.ts
│ │ ├── test-metadata-handler.ts
│ │ ├── theming
│ │ │ ├── border-segments.test.ts
│ │ │ ├── component-layout.resolver.test.ts
│ │ │ ├── layout-property-parser.test.ts
│ │ │ ├── layout-resolver.test.ts
│ │ │ ├── layout-resolver2.test.ts
│ │ │ ├── layout-vp-override.test.ts
│ │ │ └── padding-segments.test.ts
│ │ └── utils
│ │ ├── date-utils.test.ts
│ │ ├── format-human-elapsed-time.test.ts
│ │ └── LruCache.test.ts
│ ├── language-server
│ │ ├── completion.test.ts
│ │ ├── format.test.ts
│ │ ├── hover.test.ts
│ │ └── mockData.ts
│ └── parsers
│ ├── common
│ │ └── input-stream.test.ts
│ ├── markdown
│ │ └── parse-binding-expression.test.ts
│ ├── parameter-parser.test.ts
│ ├── paremeter-parser.test.ts
│ ├── scripting
│ │ ├── eval-tree-arrow.test.ts
│ │ ├── eval-tree-pre-post.test.ts
│ │ ├── eval-tree.test.ts
│ │ ├── function-proxy.test.ts
│ │ ├── lexer-literals.test.ts
│ │ ├── lexer-misc.test.ts
│ │ ├── module-parse.test.ts
│ │ ├── parser-arrow.test.ts
│ │ ├── parser-assignments.test.ts
│ │ ├── parser-binary.test.ts
│ │ ├── parser-destructuring.test.ts
│ │ ├── parser-errors.test.ts
│ │ ├── parser-expressions.test.ts
│ │ ├── parser-function.test.ts
│ │ ├── parser-literals.test.ts
│ │ ├── parser-primary.test.ts
│ │ ├── parser-regex.test.ts
│ │ ├── parser-statements.test.ts
│ │ ├── parser-unary.test.ts
│ │ ├── process-event.test.ts
│ │ ├── process-implicit-context.test.ts
│ │ ├── process-statement-asgn.test.ts
│ │ ├── process-statement-destruct.test.ts
│ │ ├── process-statement-regs.test.ts
│ │ ├── process-statement-sync.test.ts
│ │ ├── process-statement.test.ts
│ │ ├── process-switch-sync.test.ts
│ │ ├── process-switch.test.ts
│ │ ├── process-try-sync.test.ts
│ │ ├── process-try.test.ts
│ │ ├── simplify-expression.test.ts
│ │ ├── statement-hooks.test.ts
│ │ └── test-helpers.ts
│ ├── style-parser
│ │ ├── generateHvarChain.test.ts
│ │ ├── parseHVar.test.ts
│ │ ├── parser.test.ts
│ │ └── tokens.test.ts
│ └── xmlui
│ ├── lint.test.ts
│ ├── parser.test.ts
│ ├── scanner.test.ts
│ ├── transform.attr.test.ts
│ ├── transform.circular.test.ts
│ ├── transform.element.test.ts
│ ├── transform.errors.test.ts
│ ├── transform.escape.test.ts
│ ├── transform.regression.test.ts
│ ├── transform.script.test.ts
│ ├── transform.test.ts
│ └── xmlui.ts
├── tests-e2e
│ ├── api-bound-component-regression.spec.ts
│ ├── api-call-as-extracted-component.spec.ts
│ ├── assign-to-object-or-array-regression.spec.ts
│ ├── binding-regression.spec.ts
│ ├── children-as-template-context-vars.spec.ts
│ ├── compound-component.spec.ts
│ ├── context-vars-regression.spec.ts
│ ├── data-bindings.spec.ts
│ ├── datasource-and-api-usage-in-var.spec.ts
│ ├── datasource-direct-binding.spec.ts
│ ├── datasource-onLoaded-regression.spec.ts
│ ├── modify-array-item-regression.spec.ts
│ ├── namespaces.spec.ts
│ ├── push-to-array-regression.spec.ts
│ ├── screen-breakpoints.spec.ts
│ ├── scripting.spec.ts
│ ├── state-scope-in-pages.spec.ts
│ └── state-var-scopes.spec.ts
├── tsconfig.bin.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/src/components-core/rendering/reducer.ts:
--------------------------------------------------------------------------------
```typescript
1 | import produce from "immer";
2 | import { cloneDeep, isPlainObject, keyBy, setWith, unset } from "lodash-es";
3 |
4 | import type { ContainerState } from "../../abstractions/ContainerDefs";
5 | import type { ContainerAction} from "./containers";
6 | import { ContainerActionKind } from "./containers";
7 | import type { IDebugViewContext } from "../DebugViewProvider";
8 |
9 | const MAX_STATE_TRANSITION_LENGTH = 100;
10 |
11 | /**
12 | * This function creates a reducer for the container state. For diagnostics, it may
13 | * log the state transitions.
14 | * @param debugView This debug view determines if the state transitions should be logged.
15 | */
16 | export function createContainerReducer(debugView: IDebugViewContext) {
17 | const allowLogging = debugView.collectStateTransitions;
18 | let prevState: any = undefined;
19 | let nextState: any = undefined;
20 |
21 | // --- The reducer function
22 | return produce((state: ContainerState, action: ContainerAction) => {
23 | // --- Check if the action has an appropriate uid
24 | const { uid } = action.payload;
25 | if (uid === undefined && action.type !== ContainerActionKind.STATE_PART_CHANGED) {
26 | console.error("uid not provided for control component", {
27 | state,
28 | action,
29 | });
30 | return state;
31 | }
32 |
33 | // --- Store the previous state for logging
34 | if (allowLogging) {
35 | try {
36 | prevState = cloneDeep(state[uid]);
37 | } catch (e) {
38 | console.error("Error while cloning previous value", e);
39 | }
40 | }
41 |
42 | // --- Apply the action
43 | switch (action.type) {
44 | case ContainerActionKind.LOADER_IN_PROGRESS_CHANGED: {
45 | state[uid] = { ...state[uid], inProgress: action.payload.inProgress };
46 | storeNextValue(state[uid]);
47 | break;
48 | }
49 | case ContainerActionKind.LOADER_IS_REFETCHING_CHANGED: {
50 | state[uid] = { ...state[uid], isRefetching: action.payload.isRefetching };
51 | storeNextValue(state[uid]);
52 | break;
53 | }
54 | case ContainerActionKind.LOADER_LOADED: {
55 | const { data, pageInfo } = action.payload;
56 | state[uid] = {
57 | value: data,
58 | byId: Array.isArray(data) ? keyBy(data, (item) => item.$id) : undefined,
59 | inProgress: false,
60 | loaded: data !== undefined,
61 | pageInfo,
62 | };
63 | storeNextValue(state[uid]);
64 | break;
65 | }
66 | case ContainerActionKind.LOADER_ERROR: {
67 | const { error } = action.payload;
68 | state[uid] = { ...state[uid], error, inProgress: false, loaded: true };
69 | storeNextValue(state[uid]);
70 | break;
71 | }
72 | case ContainerActionKind.EVENT_HANDLER_STARTED: {
73 | const { eventName } = action.payload;
74 | const inProgressFlagName = `${eventName}InProgress`;
75 | // Preserve existing state or use empty object
76 | state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: true } : { [inProgressFlagName]: true };
77 | storeNextValue(state[uid]);
78 | break;
79 | }
80 | case ContainerActionKind.EVENT_HANDLER_COMPLETED: {
81 | const { eventName } = action.payload;
82 | const inProgressFlagName = `${eventName}InProgress`;
83 | // Preserve existing state or use empty object
84 | state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: false } : { [inProgressFlagName]: false };
85 | storeNextValue(state[uid]);
86 | break;
87 | }
88 | case ContainerActionKind.EVENT_HANDLER_ERROR: {
89 | const { eventName } = action.payload;
90 | const inProgressFlagName = `${eventName}InProgress`;
91 | // Preserve existing state or use empty object
92 | state[uid] = state[uid] ? { ...state[uid], [inProgressFlagName]: false } : { [inProgressFlagName]: false };
93 | storeNextValue(state[uid]);
94 | break;
95 | }
96 | case ContainerActionKind.COMPONENT_STATE_CHANGED: {
97 | const { state: newState } = action.payload;
98 | state[uid] = {
99 | ...state[uid],
100 | ...newState,
101 | };
102 | storeNextValue(state[uid]);
103 | break;
104 | }
105 | case ContainerActionKind.STATE_PART_CHANGED: {
106 | const { path, value, target, actionType, localVars } = action.payload;
107 | if (actionType === "unset") {
108 | unset(state, path);
109 | } else {
110 | let tempValueInLocalVars = localVars;
111 | setWith(state, path, value, (nsValue, key, nsObject) => {
112 | tempValueInLocalVars = tempValueInLocalVars?.[key];
113 | if (
114 | nsValue === undefined &&
115 | isPlainObject(tempValueInLocalVars) &&
116 | isPlainObject(target)
117 | ) {
118 | // if we are setting a new object's key, lodash defaults it to an array, if the key is a number.
119 | // This way we can force it to be an object.
120 | // (example: we have an empty object in vars called usersTyped: {}, we set usersTyped[1] = Date.now().
121 | // During the first state setting, we don't have a previous value for usersTyped, because it was defined
122 | // in vars, and wasn't updated yet. In the first update, it's value is undefined, and because the key is
123 | // a number (an id in our case), lodash thinks it has to create an array after this 'set'. This way we
124 | // can force it, because in the target we have the target object value (given by the proxy change),so if
125 | // it's an object, it should be an object. Otherwise, we let lodash decide)
126 | const next = Object(nsValue);
127 | return next;
128 | }
129 | });
130 | storeNextValue(state);
131 | }
132 | break;
133 | }
134 | default:
135 | throw new Error();
136 | }
137 |
138 | // --- Log the transition
139 | if (allowLogging) {
140 | const loggedTransition = {
141 | action: action.type,
142 | uid,
143 | prevState,
144 | nextState,
145 | };
146 |
147 | // TODO: Logging to the console is a temporary solution. We should use a proper
148 | // logging mechanism. Nonetheless, this works only with state transition logging
149 | // enabled (which is disabled by default).
150 | if (debugView.stateTransitions) {
151 | if (debugView.stateTransitions.length >= MAX_STATE_TRANSITION_LENGTH) {
152 | debugView.stateTransitions.shift();
153 | }
154 | debugView.stateTransitions.push(loggedTransition);
155 | }
156 | }
157 |
158 | function storeNextValue(nextValue: any) {
159 | if (allowLogging) {
160 | try {
161 | nextState = cloneDeep(nextValue);
162 | } catch (e) {
163 | console.error("Error while cloning next value", e);
164 | }
165 | }
166 | }
167 | });
168 | }
169 |
```
--------------------------------------------------------------------------------
/docs/content/components/BarChart.md:
--------------------------------------------------------------------------------
```markdown
1 | # BarChart [#barchart]
2 |
3 | `BarChart` displays data as horizontal or vertical bars, supporting both grouped and stacked layouts. It's ideal for comparing values across categories, showing revenue trends, or displaying any quantitative data over time or categories.
4 |
5 | The BarChart component accommodates the size of its parent unless you set it explicitly:
6 |
7 | ```xmlui-pg copy display height="300px" name="Example: dimension determined by the parent" /Card height="240px" width="75%"/
8 | <Card height="240px" width="75%">
9 | <BarChart
10 | orientation="horizontal"
11 | data="{[
12 | { 'sprint': 'Sprint 1', 'A': 44 },
13 | { 'sprint': 'Sprint 2', 'A': 32 },
14 | { 'sprint': 'Sprint 3', 'A': 48 },
15 | { 'sprint': 'Sprint 4', 'A': 72 }
16 | ]}"
17 | yKeys="{['A']}"
18 | xKey="sprint"
19 | />
20 | </Card>
21 | ```
22 |
23 | ```xmlui-pg copy display height="300px" name="Example: dimension overwritten by BarChart" /height="240px"/ /height="200px"/
24 | <Card height="240px">
25 | <BarChart
26 | orientation="horizontal"
27 | height="200px"
28 | data="{[
29 | { 'sprint': 'Sprint 1', 'A': 44 },
30 | { 'sprint': 'Sprint 2', 'A': 32 },
31 | { 'sprint': 'Sprint 3', 'A': 48 },
32 | { 'sprint': 'Sprint 4', 'A': 72 }
33 | ]}"
34 | yKeys="{['A']}"
35 | xKey="sprint"
36 | />
37 | </Card>
38 | ```
39 |
40 | **Key features:**
41 | - **Flexible orientation**: Choose horizontal or vertical bar layouts
42 | - **Multiple data series**: Display several metrics on the same chart with different colored bars
43 | - **Stacked vs grouped**: Stack bars on top of each other or place them side by side
44 | - **Custom formatting**: Use `tickFormatter` to format axis labels and [`LabelList`](/components/LabelList) for data labels
45 |
46 | ## Properties [#properties]
47 |
48 | ### `data` [#data]
49 |
50 | This property is used to provide the component with data to display.The data needs to be an array of objects.
51 |
52 | ### `hideTickX` (default: false) [#hidetickx-default-false]
53 |
54 | Controls the visibility of the X-axis ticks. If set to `true`, tick labels on the X-axis will be hidden.
55 |
56 | ### `hideTickY` (default: false) [#hideticky-default-false]
57 |
58 | Controls the visibility of the Y-axis ticks. If set to `true`, tick labels on the Y-axis will be hidden.
59 |
60 | ### `hideTooltip` (default: false) [#hidetooltip-default-false]
61 |
62 | Determines whether the tooltip should be hidden. If set to `true`, tooltips will not appear on hover.
63 |
64 | ### `hideX` (default: false) [#hidex-default-false]
65 |
66 | Determines whether the X-axis should be hidden. If set to `true`, the axis will not be rendered.
67 |
68 | ### `hideY` (default: false) [#hidey-default-false]
69 |
70 | Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.
71 |
72 | ### `orientation` (default: "vertical") [#orientation-default-vertical]
73 |
74 | This property determines the orientation of the bar chart. The `vertical` variant specifies the horizontal axis as the primary and lays out the bars from left to right. The `horizontal` variant specifies the vertical axis as the primary and has the bars spread from top to bottom.
75 |
76 | Available values: `horizontal`, `vertical` **(default)**
77 |
78 | ### `showLegend` (default: false) [#showlegend-default-false]
79 |
80 | Determines whether the legend should be displayed.
81 |
82 | ### `stacked` (default: false) [#stacked-default-false]
83 |
84 | This property determines how the bars are laid out.If set to `true`, bars with the same category will be stacked on top of each other rather than placed side by side.
85 |
86 | ### `tickFormatterX` [#tickformatterx]
87 |
88 | A function that formats the tick labels on the X-axis.
89 |
90 | ```xmlui-pg copy display height="320px" name="Example: tickFormatterX" /tickFormatterX/
91 | <App>
92 | <BarChart
93 | orientation="horizontal"
94 | height="240px"
95 | data="{[
96 | { 'sprint': 'Sprint 1', 'A': 44 },
97 | { 'sprint': 'Sprint 2', 'A': 32 },
98 | { 'sprint': 'Sprint 3', 'A': 48 },
99 | { 'sprint': 'Sprint 4', 'A': 72 }
100 | ]}"
101 | yKeys="{['A']}"
102 | xKey="sprint"
103 | tickFormatterX="{(value) => '(' + value + ')'}"
104 | />
105 | </App>
106 | ```
107 |
108 | ### `tickFormatterY` [#tickformattery]
109 |
110 | A function that formats the tick labels on the Y-axis.
111 |
112 | ```xmlui-pg copy display height="320px" name="Example: tickFormatterY" /tickFormatterY/
113 | <App>
114 | <BarChart
115 | orientation="horizontal"
116 | height="240px"
117 | data="{[
118 | { 'sprint': 'Sprint 1', 'A': 44 },
119 | { 'sprint': 'Sprint 2', 'A': 32 },
120 | { 'sprint': 'Sprint 3', 'A': 48 },
121 | { 'sprint': 'Sprint 4', 'A': 72 }
122 | ]}"
123 | yKeys="{['A']}"
124 | xKey="sprint"
125 | tickFormatterY="{(value) => '$' + value}"
126 | />
127 | </App>
128 | ```
129 |
130 | ### `tooltipTemplate` [#tooltiptemplate]
131 |
132 | This property allows replacing the default template to display a tooltip.
133 |
134 | ```xmlui-pg copy display height="320px" name="Example: tooltipTemplate" /tooltipTemplate/
135 | <App>
136 | <BarChart
137 | orientation="horizontal"
138 | height="240px"
139 | data="{[
140 | { 'sprint': 'Sprint 1', 'A': 44, 'B': 28 },
141 | { 'sprint': 'Sprint 2', 'A': 32, 'B': 41 },
142 | { 'sprint': 'Sprint 3', 'A': 48, 'B': 35 },
143 | { 'sprint': 'Sprint 4', 'A': 72, 'B': 58 }
144 | ]}"
145 | yKeys="{['A', 'B']}"
146 | xKey="sprint"
147 | >
148 | <property name="tooltipTemplate">
149 | <VStack backgroundColor='white' padding="$space-2">
150 | <Text fontWeight='bold'>{$tooltip.label}</Text>
151 | <Items data="{$tooltip.payload}">
152 | <HStack gap="$space-2" verticalAlignment="center">
153 | <Stack
154 | width="8px"
155 | height="8px"
156 | backgroundColor="{$item.color}" />
157 | <Text>{$item.label}: {$item.value}</Text>
158 | </HStack>
159 | </Items>
160 | </VStack>
161 | </property>
162 | </BarChart>
163 | </App>
164 | ```
165 |
166 | The `tooltipTemplate` prop allows you to customize the appearance and content of chart tooltips. The template receives a `$tooltip` context variable containing:
167 |
168 | - `$tooltip.label`: The label for the data point (typically the yKey value)
169 | - `$tooltip.payload`: An object containing all data values for the hovered point
170 | - `$tooltip.active`: Boolean indicating if the tooltip is currently active
171 |
172 | ### `xKey` [#xkey]
173 |
174 | This property specifies the keys in the data objects that should be used for rendering the bars.E.g. 'id' or 'key'.
175 |
176 | ### `yKeys` [#ykeys]
177 |
178 | Specifies the key in the data objects that will be used to label the different data series.
179 |
180 | ## Events [#events]
181 |
182 | This component does not have any events.
183 |
184 | ## Exposed Methods [#exposed-methods]
185 |
186 | This component does not expose any methods.
187 |
188 | ## Styling [#styling]
189 |
190 | This component does not have any styles.
191 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Backdrop/Backdrop.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { create } from "domain";
2 | import { test, expect } from "../../testing/fixtures";
3 |
4 | // =============================================================================
5 | // BASIC FUNCTIONALITY TESTS
6 | // =============================================================================
7 |
8 | test("component renders with default props", async ({ initTestBed, createBackdropDriver }) => {
9 | // TODO: review these Copilot-created tests
10 |
11 | await initTestBed(`<Backdrop>Content</Backdrop>`, {});
12 | const backdropDriver = await createBackdropDriver();
13 | const backdropElement = backdropDriver.getBackdrop();
14 |
15 | await expect(backdropElement).toBeVisible();
16 | await expect(backdropElement).toHaveCSS(
17 | "background-color",
18 | backdropDriver.getDefaultBackgroundColor(),
19 | );
20 | await expect(backdropElement).toHaveCSS("opacity", backdropDriver.getDefaultOpacity());
21 | await expect(backdropDriver.component).toHaveText("Content");
22 | });
23 |
24 | test("component renders with custom background color", async ({
25 | initTestBed,
26 | createBackdropDriver,
27 | }) => {
28 | const EXPECTED_COLOR = "rgb(255, 0, 0)"; // Red color
29 | await initTestBed(`<Backdrop backgroundColor="${EXPECTED_COLOR}">Content</Backdrop>`, {});
30 | const backdropDriver = await createBackdropDriver();
31 | const backdropElement = backdropDriver.getBackdrop();
32 |
33 | await expect(backdropElement).toHaveCSS("background-color", EXPECTED_COLOR);
34 | });
35 |
36 | test("component renders with custom opacity", async ({ initTestBed, createBackdropDriver }) => {
37 | const EXPECTED_OPACITY = "0.5";
38 | await initTestBed(`<Backdrop opacity="${EXPECTED_OPACITY}">Content</Backdrop>`, {});
39 | const backdropDriver = await createBackdropDriver();
40 | const backdropElement = backdropDriver.getBackdrop();
41 |
42 | await expect(backdropElement).toHaveCSS("opacity", EXPECTED_OPACITY);
43 | });
44 |
45 | test("component renders with overlay template", async ({ initTestBed, createBackdropDriver }) => {
46 | await initTestBed(
47 | `
48 | <Backdrop>
49 | <property name="overlayTemplate">
50 | <H1>Overlay</H1>
51 | </property>
52 | Content
53 | </Backdrop>
54 | `,
55 | {},
56 | );
57 | const backdropDriver = await createBackdropDriver();
58 | const backdropElement = backdropDriver.getBackdrop();
59 |
60 | await expect(backdropElement).toBeVisible();
61 | await expect(backdropElement).toHaveCSS(
62 | "background-color",
63 | backdropDriver.getDefaultBackgroundColor(),
64 | );
65 | await expect(backdropElement).toHaveCSS("opacity", backdropDriver.getDefaultOpacity());
66 | await expect(backdropDriver.component).toContainText("Content");
67 | await expect(backdropDriver.getOverlay()).toContainText("Overlay");
68 | });
69 |
70 | // =============================================================================
71 | // ACCESSIBILITY TESTS
72 | // =============================================================================
73 |
74 | // TODO: Implement accessibility tests
75 |
76 | // =============================================================================
77 | // VISUAL STATE TESTS
78 | // =============================================================================
79 |
80 | test("component handles different background colors", async ({
81 | initTestBed,
82 | createBackdropDriver,
83 | }) => {
84 | await initTestBed(`<Backdrop backgroundColor="blue">Content</Backdrop>`, {});
85 | const EXPECTED_COLOR = "rgb(0, 0, 255)"; // Blue color
86 | const backdropDriver = await createBackdropDriver();
87 | const backdropElement = backdropDriver.getBackdrop();
88 |
89 | await expect(backdropElement).toHaveCSS("background-color", EXPECTED_COLOR);
90 | });
91 |
92 | test("component handles theme variables", async ({
93 | initTestBed,
94 | createBackdropDriver,
95 | }) => {
96 | await initTestBed(`<Backdrop>Content</Backdrop>`, {
97 | testThemeVars: {
98 | "backgroundColor-Backdrop": "rgb(255, 0, 0)", // Red color
99 | "opacity-Backdrop": "0.75",
100 | },
101 | });
102 | const backdropDriver = await createBackdropDriver();
103 | const backdropElement = backdropDriver.getBackdrop();
104 |
105 | await expect(backdropElement).toHaveCSS("background-color", "rgb(255, 0, 0)"); // Red color
106 | await expect(backdropElement).toHaveCSS("opacity", "0.75");
107 | });
108 |
109 |
110 | // =============================================================================
111 | // EDGE CASE TESTS
112 | // =============================================================================
113 |
114 | test("component handles empty string props gracefully", async ({
115 | initTestBed,
116 | createBackdropDriver,
117 | }) => {
118 | await initTestBed(`<Backdrop backgroundColor="">Content</Backdrop>`, {});
119 | const backdropDriver = await createBackdropDriver();
120 | const backdropElement = backdropDriver.getBackdrop();
121 |
122 | await expect(backdropElement).toHaveCSS("background-color", "rgb(0, 0, 0)"); // Default transparent color
123 | await expect(backdropElement).toHaveCSS("opacity", "0.1");
124 | });
125 |
126 | test("component handles special characters in content correctly", async ({
127 | initTestBed,
128 | createBackdropDriver,
129 | }) => {
130 | await initTestBed(`<Backdrop>Content with special characters: !@#$%^&*()</Backdrop>`, {});
131 | const backdropDriver = await createBackdropDriver();
132 | const backdropElement = backdropDriver.getBackdrop();
133 |
134 | await expect(backdropElement).toBeVisible();
135 | await expect(backdropDriver.component).toContainText("Content with special characters: !@#$%^&*()");
136 | });
137 |
138 | // =============================================================================
139 | // INTEGRATION TESTS
140 | // =============================================================================
141 |
142 | test("component works correctly with nested content", async ({ initTestBed, createBackdropDriver }) => {
143 | // TODO: review these Copilot-created tests
144 |
145 | await initTestBed(
146 | `
147 | <Backdrop>
148 | <VStack>
149 | <Text>Line 1</Text>
150 | <Text>Line 2</Text>
151 | </VStack>
152 | </Backdrop>
153 | `,
154 | {},
155 | );
156 | const backdropDriver = await createBackdropDriver();
157 |
158 | // Test that nested content renders correctly
159 | await expect(backdropDriver.component).toContainText("Line 1");
160 | await expect(backdropDriver.component).toContainText("Line 2");
161 |
162 | // Test that backdrop is rendered over the content
163 | await expect(backdropDriver.getBackdrop()).toBeVisible();
164 | });
165 |
166 | test("component works correctly in different layout contexts", async ({
167 | initTestBed,
168 | createBackdropDriver,
169 | }) => {
170 | await initTestBed(
171 | `
172 | <HStack>
173 | <Text>Before</Text>
174 | <Backdrop backgroundColor="blue" opacity="0.3">Backdrop Content</Backdrop>
175 | <Text>After</Text>
176 | </HStack>
177 | `,
178 | {},
179 | );
180 | const backdropDriver = await createBackdropDriver();
181 |
182 | // Test that backdrop is rendered over the content
183 | await expect(backdropDriver.getBackdrop()).toBeVisible();
184 | });
185 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/AutoComplete/AutoComplete.module.scss:
--------------------------------------------------------------------------------
```scss
1 | @use "../../components-core/theming/themes" as t;
2 |
3 | // --- This code snippet is required to collect the theme variables used in this module
4 | $themeVars: (
5 | );
6 |
7 | @function createThemeVar($componentVariable) {
8 | $themeVars: t.appendThemeVar($themeVars, $componentVariable) !global;
9 | @return t.getThemeVar($themeVars, $componentVariable);
10 | }
11 |
12 | $component: "AutoComplete";
13 | $themeVars: t.composeBorderVars($themeVars, $component);
14 | $themeVars: t.composePaddingVars($themeVars, $component);
15 | $themeVars: t.composePaddingVars($themeVars, "item-#{$component}");
16 |
17 | // --- CSS properties of a particular AutoComplete variant
18 | @mixin variant($variantName) {
19 | border-radius: createThemeVar("Input:borderRadius-#{$component}-#{$variantName}");
20 | border-color: createThemeVar("Input:borderColor-#{$component}-#{$variantName}");
21 | border-width: createThemeVar("Input:borderWidth-#{$component}-#{$variantName}");
22 | border-style: createThemeVar("Input:borderStyle-#{$component}-#{$variantName}");
23 | font-size: createThemeVar("Input:fontSize-#{$component}-#{$variantName}");
24 | background-color: createThemeVar("Input:backgroundColor-#{$component}-#{$variantName}");
25 | box-shadow: createThemeVar("Input:boxShadow-#{$component}-#{$variantName}");
26 | color: createThemeVar("Input:textColor-#{$component}-#{$variantName}");
27 |
28 | &:hover {
29 | border-color: createThemeVar("Input:borderColor-#{$component}-#{$variantName}--hover");
30 | background-color: createThemeVar("Input:backgroundColor-#{$component}-#{$variantName}--hover");
31 | box-shadow: createThemeVar("Input:boxShadow-#{$component}-#{$variantName}--hover");
32 | color: createThemeVar("Input:textColor-#{$component}-#{$variantName}--hover");
33 | }
34 |
35 | &::placeholder {
36 | color: createThemeVar("Input:textColor-placeholder-#{$component}-#{$variantName}");
37 | font-size: createThemeVar("Input:fontSize-placeholder-#{$component}-#{$variantName}");
38 | }
39 | }
40 |
41 | @layer components {
42 | .command {
43 | width: 100%;
44 | height: auto;
45 | overflow: visible;
46 | background-color: transparent;
47 | }
48 |
49 | .badgeListWrapper {
50 | outline: none;
51 | width: 100%;
52 | gap: t.$space-1;
53 | display: flex;
54 | flex-direction: row;
55 | flex-wrap: wrap;
56 | @include t.paddingVars($themeVars, $component);
57 |
58 | @include variant("default");
59 |
60 | &.error {
61 | @include variant("error");
62 | }
63 |
64 | &.warning {
65 | @include variant("warning");
66 | }
67 |
68 | &.valid {
69 | @include variant("success");
70 | }
71 |
72 | &.disabled {
73 | cursor: not-allowed;
74 | opacity: 0.5;
75 | background-color: createThemeVar("Input:backgroundColor-#{$component}--disabled");
76 | color: createThemeVar("Input:textColor-#{$component}--disabled");
77 | border-color: createThemeVar("Input:borderColor-#{$component}--disabled");
78 | }
79 |
80 | &.focused {
81 | outline-width: createThemeVar("Input:outlineWidth-#{$component}--focus");
82 | outline-color: createThemeVar("Input:outlineColor-#{$component}--focus");
83 | outline-style: createThemeVar("Input:outlineStyle-#{$component}--focus");
84 | outline-offset: createThemeVar("Input:outlineOffset-#{$component}--focus");
85 | }
86 | }
87 |
88 | .badgeList {
89 | position: relative;
90 | align-items: center;
91 | display: flex;
92 | flex-wrap: wrap;
93 | gap: 0.25rem;
94 | }
95 |
96 | .inputWrapper {
97 | display: flex;
98 | align-items: center;
99 | min-width: fit-content;
100 | flex: 1;
101 | gap: t.$space-1;
102 | }
103 |
104 | .badge {
105 | width: fit-content;
106 | height: fit-content;
107 | min-width: 0;
108 | padding: createThemeVar("paddingVertical-#{$component}-badge") createThemeVar("paddingHorizontal-#{$component}-badge");
109 | border-radius: createThemeVar("borderRadius-#{$component}-badge");
110 | transition:
111 | color 0.2s,
112 | background-color 0.2s;
113 | user-select: none;
114 | cursor: pointer;
115 | display: flex;
116 | gap: t.$space-1;
117 | justify-content: center;
118 | align-items: center;
119 | font-size: createThemeVar("Input:fontSize-#{$component}-badge");
120 | background-color: createThemeVar("Input:backgroundColor-#{$component}-badge");
121 | color: createThemeVar("Input:textColor-#{$component}-badge");
122 |
123 | &:hover {
124 | background-color: createThemeVar("Input:backgroundColor-#{$component}-badge--hover");
125 | color: createThemeVar("Input:textColor-#{$component}-badge--hover");
126 | }
127 |
128 | &:active {
129 | background-color: createThemeVar("Input:backgroundColor-#{$component}-badge--active");
130 | color: createThemeVar("Input:textColor-#{$component}-badge--active");
131 | }
132 | }
133 |
134 | .commandInput {
135 | width: 100%;
136 | background-color: transparent;
137 | outline: none;
138 |
139 | &:disabled {
140 | cursor: not-allowed;
141 | opacity: 0.5;
142 | }
143 |
144 | &::placeholder {
145 | color: createThemeVar("Input:textColor-placeholder-#{$component}");
146 | }
147 |
148 | &:focus-within {
149 | outline: none;
150 | }
151 | }
152 |
153 | .actions {
154 | display: flex;
155 | align-items: center;
156 | flex-shrink: 0;
157 | }
158 |
159 | .action {
160 | cursor: pointer;
161 | }
162 |
163 | .autoCompleteEmpty {
164 | display: flex;
165 | gap: 0.2rem;
166 | padding: 10px 0;
167 | justify-content: center;
168 | align-items: center;
169 | font-size: 14px;
170 | width: 100%;
171 | }
172 |
173 | .commandList {
174 | width: 100%;
175 | position: absolute;
176 | overflow: hidden;
177 | top: t.$space-1;
178 | z-index: 999;
179 | outline: none;
180 | border-radius: createThemeVar("Input:borderRadius-menu-#{$component}");
181 | border: createThemeVar("Input:borderWidth-menu-#{$component}") solid createThemeVar("Input:borderColor-menu-#{$component}");
182 | background-color: createThemeVar("Input:backgroundColor-menu-#{$component}");
183 | box-shadow: createThemeVar("Input:boxShadow-menu-#{$component}");
184 | animation: fade-in 0.3s ease-in-out;
185 | }
186 |
187 | .autoCompleteOption {
188 | @include t.paddingVars($themeVars, "item-#{$component}");
189 | display: flex;
190 | gap: t.$space-1;
191 | align-items: center;
192 | justify-content: space-between;
193 | cursor: pointer;
194 | transition: background-color 0.2s ease;
195 | background-color: createThemeVar("backgroundColor-item-#{$component}");
196 |
197 | &[aria-selected="true"] {
198 | background-color: createThemeVar("backgroundColor-item-#{$component}--active");
199 | }
200 |
201 | &:hover,
202 | &.highlighted {
203 | background-color: createThemeVar("backgroundColor-item-#{$component}--hover");
204 | }
205 |
206 | &[aria-disabled="true"],
207 | &.disabledOption {
208 | pointer-events: none;
209 | cursor: not-allowed;
210 | color: createThemeVar("textColor-item-#{$component}--disabled");
211 | font-style: italic;
212 | }
213 | }
214 | }
215 |
216 | // --- We export the theme variables to add them to the component renderer
217 | :export {
218 | themeVars: t.json-stringify($themeVars);
219 | }
```
--------------------------------------------------------------------------------
/docs/public/pages/scripting.md:
--------------------------------------------------------------------------------
```markdown
1 | # XMLUI Scripting
2 |
3 | With XMLUI you can go a long way without coding anything more than small JavaScript snippets like those we've seen in the [Markup](/markup) chapter.
4 |
5 | An expression:
6 |
7 | ```xmlui !/{ 6 * 7 }/
8 | <Text value="Life, the universe, and everything: { 6 * 7 }" />
9 | ```
10 |
11 | A statement:
12 |
13 | ```xmlui !/{ count++ }/
14 | <Button label="Click to increment the count">
15 | <event name="click">
16 | { count++ }
17 | </event>
18 | </Button>
19 | ```
20 |
21 | An object literal:
22 |
23 | ```xmlui !/{ station: "Brixton", wifi: true, toilets: false }/
24 | <Form
25 | data='{{ station: "Brixton", wifi: true, toilets: false }}'
26 | onSubmit="() => { preview.setValue(JSON.stringify($data)) }"
27 | >
28 | ```
29 |
30 | A function call:
31 |
32 | ```xmlui !/() => { preview.setValue(JSON.stringify($data)) }/
33 | <Form
34 | data='{{ station: "Brixton", wifi: true, toilets: false }}'
35 | onSubmit="() => { preview.setValue(JSON.stringify($data)) }"
36 | >
37 | ```
38 |
39 | The last example uses a JavaScript [arrow function expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), a concise way to define and use a function in an XMLUI attribute. The function receives the value of a selected theme in the `newTheme` argument (a name of your choosing) and calls the [global](/globals) `setTheme` function with that value.
40 |
41 | ## Writing longer functions
42 |
43 | The most elaborate function we've seen so far was this one, used in [Components](/components-intro) chapter to extract data from a complex API response.
44 |
45 | ```js copy
46 | window.transformStops = function(stops) {
47 | return stops.map(function(stop) {
48 | // Helper to extract a value from additionalProperties by key
49 | function getProp(key) {
50 | if (!stop.additionalProperties) return '';
51 | var propObj = stop.additionalProperties.find(function(p) {
52 | return p.key === key;
53 | });
54 | return propObj ? propObj.value : '';
55 | }
56 | return {
57 | name: stop.commonName,
58 | zone: getProp('Zone'),
59 | wifi: getProp('WiFi'),
60 | toilets: getProp('Toilets'),
61 | // A comma-separated list of line names that serve this stop
62 | lines: stop.lines
63 | ? stop.lines.map(function(line) { return line.name; }).join(', ')
64 | : ''
65 | };
66 | });
67 | }
68 | ```
69 |
70 | Here's how it works.
71 |
72 | - `transformStops` receives a `stops` argument which is an array of JavaScript objects created by a `DataSource`. Each is a complex object representing a London tube stop.
73 | - `map` is a method on an array object like `stops`. It takes an anonymous function as an argument, runs it for each item in the array, and returns a new array with each item transformed by a call to the function.
74 | - `function(stop) { ... }` is the anonymous function passed to `map`. It defines a nested helper function, `getProp`, to extract property values.
75 | - `getProp` calls `find`, another method on an array object. In this case the array is `stop.additionalProperties`. Like `map` it receives an anonymous function (`function(p)`) that receives an `additionalProperties` object. It returns true if the name passed to `getProp` matches the value of `p.key`.
76 |
77 | It helps to see the structure of a single object in the `stops` array.
78 |
79 | ```json
80 | {
81 | "commonName": "Baker Street Underground Station",
82 | "placeType": "StopPoint",
83 | "additionalProperties": [
84 | {
85 | "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
86 | "category": "ServiceInfo",
87 | "key": "WiFi",
88 | "sourceSystemKey": "StaticObjects",
89 | "value": "yes"
90 | },
91 | {
92 | "$type": "Tfl.Api.Presentation.Entities.AdditionalProperties, Tfl.Api.Presentation.Entities",
93 | "category": "Facility",
94 | "key": "Car park",
95 | "sourceSystemKey": "StaticObjects",
96 | "value": "no"
97 | },
98 | ]
99 | }
100 | ```
101 |
102 | Here's an example of the transformed output.
103 |
104 | ```json
105 | {
106 | "value": [
107 | {
108 | "name": "Bank Underground Station",
109 | "zone": "1",
110 | "wifi": "yes",
111 | "toilets": "yes",
112 | "lines": "Central, Northern, Waterloo & City"
113 | },
114 | {
115 | "name": "Waterloo Underground Station",
116 | "zone": "1",
117 | "wifi": "yes",
118 | "toilets": "no",
119 | "lines": "Bakerloo, Jubilee, Northern, Waterloo & City"
120 | }
121 | ]
122 | }
123 | ```
124 |
125 | ## Deploying the transform function
126 |
127 | We defined the function in XMLUI's `index.html` like so:
128 |
129 | ```html
130 | <script>
131 | window.transformStops = function(stops) {
132 | ...
133 | }
134 | </script>
135 | ```
136 |
137 | When you define functions in `index.html` you can keep everything in one place for easy reference, and debug your functions in the browser's devtools environment.
138 |
139 | You can alternatively put functions into XMLUI *code-behind* files. In this case, for the `TubeStops` component which lives in the file `TubeStops.xmlui`, you would create a parallel file called `TubeStops.xmlui.xs`. In that context, arrow functions are required, so the function would look like this.
140 |
141 | ```js
142 | function transformStops(stops) {
143 | return stops.map(stop => {
144 | // Helper to extract a value from additionalProperties by key
145 | const getProp = (key) => {
146 | const prop = stop.additionalProperties &&
147 | stop.additionalProperties.find(p => p.key === key);
148 | return prop ? prop.value : '';
149 | };
150 | return {
151 | name: stop.commonName,
152 | zone: getProp('Zone'),
153 | wifi: getProp('WiFi'),
154 | toilets: getProp('Toilets'),
155 | // A comma-separated list of line names that serve this stop
156 | lines: stop.lines ? stop.lines.map(line => line.name).join(', ') : ''
157 | };
158 | });
159 | }
160 | ```
161 |
162 | ## index.html vs code-behind
163 |
164 | You can use either or both of these strategies in an XMLUI app. Use `index.html` if:
165 |
166 | - Your function will be reused across components
167 | - You like keeping all your functions in one place for convenient review
168 | - You need to debug your function
169 | - Your function interacts with JavaScript libraries you load via `index.html`
170 | - You are unfamiliar with "modern" JavaScript features like arrow functions
171 |
172 | Use code-behind if:
173 |
174 | - You prefer to organize functions by component
175 | - Your function works with variables scoped to a component
176 | - Your function works with XMLUI [globals](/globals)
177 |
178 | ## Inline code
179 |
180 | When you write JavaScript expressions in XMLUI attributes you typically write single expressions, not multiline code blocks. But you can write multiline code blocks in some event handlers, for example click handlers.
181 |
182 | ```xmlui copy
183 | <Button label="onClick" onClick="{
184 | console.log('clicked');
185 | count++;
186 | toast('count now' + count)
187 | }" />
188 | ```
189 |
190 | ```xmlui copy
191 | <Button label="event tag">
192 | <event name="click">
193 | {
194 | console.log('clicked');
195 | count++;
196 | toast('count now' + count)
197 | }
198 | </event>
199 | </Button>
200 | ```
201 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/APICall/APICall.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { type ComponentDef } from "../../abstractions/ComponentDefs";
2 | import { createComponentRenderer } from "../../components-core/renderers";
3 | import type { ApiOperationDef } from "../../components-core/RestApiProxy";
4 | import { createMetadata, dInternal } from "../../components/metadata-helpers";
5 | import { httpMethodNames } from "../abstractions";
6 | import { APICallNative, defaultProps } from "./APICallNative";
7 |
8 | const COMP = "APICall";
9 |
10 | export interface ApiActionComponent extends ComponentDef {
11 | props?: ApiOperationDef & {
12 | invalidates?: string | string[];
13 | updates?: string | string[];
14 | confirmTitle?: string;
15 | confirmMessage?: string;
16 | confirmButtonLabel?: string;
17 | optimisticValue: any;
18 | getOptimisticValue: string;
19 | inProgressNotificationMessage?: string;
20 | errorNotificationMessage?: string;
21 | completedNotificationMessage?: string;
22 | };
23 | events?: {
24 | success: string;
25 | progress: string;
26 | error: string;
27 | beforeRequest: string;
28 | };
29 | }
30 |
31 | export const APICallMd = createMetadata({
32 | status: "stable",
33 | description:
34 | "`APICall` creates, updates or deletes data on the backend, versus [`DataSource`]" +
35 | "(/components/DataSource) which fetches data. Unlike DataSource, APICall doesn't " +
36 | "automatically execute - you must trigger it manually with the `execute()` method, " +
37 | "typically from form submissions or button clicks.",
38 | props: {
39 | method: {
40 | description: "The method of data manipulation can be done via setting this property.",
41 | valueType: "string",
42 | availableValues: httpMethodNames,
43 | defaultValue: defaultProps.method,
44 | },
45 | url: {
46 | description:
47 | "Use this property to set the URL to which data will be sent. If not provided, an empty URL is used.",
48 | isRequired: true,
49 | valueType: "string",
50 | },
51 | rawBody: {
52 | description:
53 | "This optional property sets the request body to the value provided here without any conversion. " +
54 | "Use the * \`body\` property if you want the object sent in JSON. When you define " +
55 | "\`body\` and \`rawBody\`, the latest one prevails.",
56 | valueType: "string",
57 | },
58 | body: {
59 | description:
60 | "This optional property sets the request body. Use to pass an object that will be " +
61 | "serialized as a JSON string. If you have an object that is already serialized as " +
62 | "a JSON string, use `rawBody` instead.",
63 | valueType: "string",
64 | },
65 | queryParams: {
66 | description:
67 | "This optional property sets the query parameters for the request. The object you pass here will " +
68 | "be serialized to a query string and appended to the request URL. You can specify key " +
69 | "and value pairs where the key is the name of a particular query parameter and the value " +
70 | "is that parameter's value.",
71 | },
72 | headers: {
73 | description:
74 | "You can optionally define request header values as key-value pairs, where the key is the ID " +
75 | "of the particular header and the value is that header's corresponding value.",
76 | },
77 | confirmTitle: {
78 | description:
79 | "This optional string sets the title in the confirmation dialog that is displayed before " +
80 | `the \`${COMP}\` is executed.`,
81 | valueType: "string",
82 | },
83 | confirmMessage: {
84 | description:
85 | "This optional string sets the message in the confirmation dialog that is displayed before " +
86 | `the \`${COMP}\` is executed.`,
87 | valueType: "string",
88 | },
89 | confirmButtonLabel: {
90 | description:
91 | "This optional string property enables the customization of the submit button in the " +
92 | `confirmation dialog that is displayed before the \`${COMP}\` is executed.`,
93 | valueType: "string",
94 | },
95 | inProgressNotificationMessage: {
96 | description:
97 | "This property customizes the message that is displayed in a toast while the API " +
98 | "operation is in progress. If not defined, no progress message is displayed.",
99 | valueType: "string",
100 | },
101 | errorNotificationMessage: {
102 | description:
103 | "This property defines the message to display automatically when the operation " +
104 | "results in an error. You can use the `$error` context value in an expression to " +
105 | "refer to the original error message.",
106 | valueType: "string",
107 | },
108 | completedNotificationMessage: {
109 | description:
110 | "This property defines the message to display automatically when the operation has " +
111 | "been completed. When this property is not defined, the completion does not display any message.",
112 | valueType: "string",
113 | },
114 | payloadType: dInternal(),
115 | invalidates: dInternal(),
116 | updates: dInternal(),
117 | optimisticValue: dInternal(),
118 | getOptimisticValue: dInternal(),
119 | },
120 | events: {
121 | beforeRequest: {
122 | description:
123 | "This event fires before the request is sent. Returning an explicit boolean" +
124 | "\`false\` value will prevent the request from being sent.",
125 | },
126 | success: {
127 | description: "This event fires when a request results in a success.",
128 | },
129 | // This event fires when a request results in an error.
130 | error: {
131 | description: "This event fires when a request results in an error.",
132 | },
133 | progress: dInternal(),
134 | },
135 | contextVars: {
136 | $param: {
137 | description: "The first parameter passed to `execute()` method",
138 | },
139 | $params: {
140 | description:
141 | "Array of all parameters passed to `execute()` method (access with " +
142 | "`$params[0]`, `$params[1]`, etc.)",
143 | },
144 | $result: {
145 | description:
146 | "Response data (available in `completedNotificationMessage`)",
147 | },
148 | $error: {
149 | description: "Error details (available in `errorNotificationMessage`)",
150 | },
151 | },
152 | apis: {
153 | execute: {
154 | description:
155 | "This method triggers the invocation of the API. You can pass an arbitrary " +
156 | "number of parameters to the method. In the \`APICall\` instance, you can " +
157 | "access those with the \`$param\` and \`$params\` context values.",
158 | signature: "execute(...params: any[])",
159 | parameters: {
160 | params: "An arbitrary number of parameters that can be used in the API call.",
161 | },
162 | },
163 | },
164 | });
165 |
166 | export const apiCallRenderer = createComponentRenderer(
167 | COMP,
168 | APICallMd,
169 | ({ node, registerComponentApi, uid }) => {
170 | return (
171 | <APICallNative registerComponentApi={registerComponentApi} node={node as any} uid={uid} />
172 | );
173 | },
174 | );
175 |
```
--------------------------------------------------------------------------------
/docs/public/pages/working-with-text.md:
--------------------------------------------------------------------------------
```markdown
1 | # Working with Text
2 |
3 | Text elements appear in UI components such as menu items, titles, headings, labels, and descriptions. There is also a [Markdown](/components/Markdown) component for complete text documents (like this page). We'll cover `Text` here and `Markdown` in the [next chapter](/working-with-markdown).
4 |
5 | You can nest text in any component that renders its children.
6 |
7 |
8 | ```xmlui-pg display name="Example: displaying text"
9 | <App>
10 | This is text!
11 | <Button label="This is text too." />
12 | This is more text!
13 | </App>
14 | ```
15 |
16 | To gain more control we can use the `Text` component.
17 |
18 | ```xmlui-pg display name="Example: Using the Text component"
19 | <App>
20 | <Text fontSize="1.5rem" color="purple">This is a text!</Text>
21 | <Button label="I'm just a button" />
22 | <Text backgroundColor="lightgreen">This is another text!</Text>
23 | </App>
24 | ```
25 |
26 | Components that render text support theme variables. You can use them, for example, to control the styling of the heading family of components ([Heading](/components/Heading), [H1](/components/H1), [H2](/components/H2), etc).
27 |
28 | ```xmlui-pg display name="Example: Text can be styled"
29 | <App>
30 | <Theme
31 | textColor-H1 = "red"
32 | textColor-H2 = "green">
33 | <H1>My Main Title</H1>
34 | This document contains several sections.
35 | <H2>Section Title</H2>
36 | </Theme>
37 | </App>
38 | ```
39 |
40 | ## Specifying text content
41 |
42 | Components like `Text`, `H1` and `Badge` can display text in two ways:
43 |
44 | - **Nesting text**
45 | - **Setting the `value` property**
46 |
47 | We've seen nesting, here's an example that uses the `value` property.
48 |
49 | ```xmlui-pg display name="Example: Text and the value property"
50 | <App>
51 | <H2 value="Text Content with Properties" />
52 | <Text value="This text is set in the 'value' property of 'Text'." />
53 | </App>
54 | ```
55 |
56 | >[!INFO]
57 | > With nested text, multiple consecutive spaces or newlines collapse to a single space. That doesn't happen when you set text using the `value`.
58 |
59 | Whitespace collapsing enables you to maintain source text that's broken into multiple lines for easier editing.
60 |
61 | The collapsed view renders neatly.
62 |
63 | ```xmlui-pg display name="Example: whitespace collapsing"
64 | <App>
65 | This is a long text broken into multiple lines.
66 |
67 | The source markup would be challenging to read if
68 |
69 | the entire text were specified in a single line.
70 | </App>
71 | ```
72 |
73 |
74 | ## Binding expressions
75 |
76 | Binding expressions are placeholders for computed values.
77 |
78 |
79 | ```xmlui-pg display name="Try the reset button!"
80 | <App>
81 | Seconds of the current minute: { getDate().getSeconds() }
82 | </App>
83 | ```
84 |
85 | Results of binding expressions are displayed with collapsed whitespace.
86 |
87 |
88 | ## Inline and block rendering
89 |
90 | When you render text, it accommodates the current layout context. If that context uses inline rendering, the text is rendered inline; otherwise, it renders as a block.
91 |
92 | In an `HStack`, text segments render inline.
93 |
94 | ```xmlui-pg copy display name="Example: inline rendering"
95 | <App>
96 | <HStack>
97 | Show me a trash
98 | <Icon name="trash"/>
99 | icon!
100 | </HStack>
101 | </App>
102 | ```
103 |
104 |
105 |
106 | In a `VStack` they render as blocks.
107 |
108 | ```xmlui-pg copy display name="Example: block rendering"
109 | <App>
110 | <VStack>
111 | Show me a trash
112 | <Icon name="trash"/>
113 | icon!
114 | </VStack>
115 | </App>
116 | ```
117 |
118 | ## Non-breaking spaces
119 |
120 | Use ` ` to preserve spaces in a context where they would otherwise collapse.
121 |
122 | ```xmlui-pg copy display name="Example: non-breaking spaces"
123 | <App>
124 | A series of non-breaking segments: [1 2 3 4]
125 | </App>
126 | ```
127 |
128 |
129 | ## Long text
130 |
131 | With long text you may need to control how that text is broken into new lines (if at all) and how to handle overflows. By default a long text breaks into multiple lines.
132 |
133 | ```xmlui-pg copy display name="Example: text breaks into multiple lines"
134 | <App>
135 | <Text width="200px">
136 | This long text does not fit into a width constraint of 200 pixels.
137 | </Text>
138 | </App>
139 | ```
140 |
141 | If necessary, breaks occur within a word.
142 |
143 | ```xmlui-pg copy display name="Example: break within a word"
144 | <App>
145 | <Text width="200px">
146 | ThisLongTextDoesNotFitInTheGivenConstraint of 200 pixels wide.
147 | </Text>
148 | </App>
149 | ```
150 |
151 | ## Preserving line breaks
152 |
153 | Sometimes you want to preserve line breaks, as when inspecting a JSON object.
154 |
155 | ```xmlui-pg copy display name="Example: preserving line breaks" /preserveLinebreaks="true"/
156 | <App
157 | var.data = "{
158 | {
159 | apples: 3,
160 | oranges: 4
161 | }
162 | }"
163 | >
164 | <Text preserveLinebreaks="false">
165 | { JSON.stringify(data, null, 2) }
166 | </Text>
167 | <Text preserveLinebreaks="true">
168 | { JSON.stringify(data, null, 2) }
169 | </Text>
170 | </App>
171 | ```
172 |
173 | ## Variants of the Text component
174 |
175 | In addition to the theme variables that govern the `Text` component, you can use the [`variant`](/components/Text#variant) property to control styles directly.
176 |
177 | ```xmlui-pg
178 | <App>
179 | <HStack>
180 | <Text width="150px">default:</Text>
181 | <Text>This is an example text</Text>
182 | </HStack>
183 | <HStack>
184 | <Text width="150px">paragraph:</Text>
185 | <Text variant="paragraph">This is an example paragraph</Text>
186 | </HStack>
187 | <HStack>
188 | <Text width="150px">placeholder:</Text>
189 | <Text variant="placeholder">
190 | This is an example text
191 | </Text>
192 | </HStack>
193 | <HStack>
194 | <Text width="150px">secondary:</Text>
195 | <Text variant="secondary">
196 | This is an example text
197 | </Text>
198 | </HStack>
199 | <HStack>
200 | <Text width="150px">code:</Text>
201 | <Text variant="code">
202 | This is an example text
203 | </Text>
204 | </HStack>
205 | <HStack>
206 | <Text width="150px">codefence + code:</Text>
207 | <Text variant="codefence">
208 | <Text variant="code">
209 | This is an example text
210 | </Text>
211 | </Text>
212 | </HStack>
213 | <HStack>
214 | <Text width="150px">keyboard:</Text>
215 | <Text variant="keyboard">
216 | This is an example text
217 | </Text>
218 | </HStack>
219 | <HStack>
220 | <Text width="150px">sup:</Text>
221 | <Text>
222 | This is an example text
223 | <Text variant="sup">(with some additional text)</Text>
224 | </Text>
225 | </HStack>
226 | <HStack>
227 | <Text width="150px">sub:</Text>
228 | <Text>
229 | This is an example text
230 | <Text variant="sub">(with some additional text)</Text>
231 | </Text>
232 | </HStack>
233 | <HStack>
234 | <Text width="150px">mono:</Text>
235 | <Text variant="mono">
236 | This is an example text
237 | </Text>
238 | </HStack>
239 | <HStack>
240 | <Text width="150px">strong:</Text>
241 | <Text variant="strong">
242 | This is an example text
243 | </Text>
244 | </HStack>
245 | <HStack>
246 | <Text width="150px">small:</Text>
247 | <Text variant="small">
248 | This is an example text
249 | </Text>
250 | </HStack>
251 | <HStack>
252 | <Text width="150px">caption:</Text>
253 | <Text variant="caption">
254 | This is an example text
255 | </Text>
256 | </HStack>
257 | </App>
258 | ```
259 |
260 |
```
--------------------------------------------------------------------------------
/xmlui/dev-docs/next/project-build.md:
--------------------------------------------------------------------------------
```markdown
1 | # XMLUI Project Build System
2 |
3 | This document explains how the XMLUI monorepo is built using Turborepo, covering the build pipeline, task orchestration, and development workflows.
4 |
5 | ## Build System Overview
6 |
7 | XMLUI uses **Turborepo** to orchestrate builds across the entire monorepo containing 12+ buildable packages. Turborepo provides:
8 |
9 | - **Parallel execution** of build tasks across workspaces
10 | - **Intelligent caching** to avoid rebuilding unchanged packages
11 | - **Task dependency management** ensuring correct build order
12 | - **Incremental builds** for faster development cycles
13 |
14 | ## Turborepo Configuration
15 |
16 | ### Core Configuration (`turbo.json`)
17 |
18 | The build pipeline is defined in the root `turbo.json` file:
19 |
20 | ```json
21 | {
22 | "pipeline": {
23 | "build": {
24 | "dependsOn": ["^build"],
25 | "outputs": ["dist/**", "build/**"]
26 | },
27 | "build:xmlui": {
28 | "dependsOn": ["^build:xmlui"],
29 | "outputs": ["dist/**"]
30 | },
31 | "test": {
32 | "dependsOn": ["build"],
33 | "outputs": []
34 | },
35 | "lint": {
36 | "outputs": []
37 | }
38 | }
39 | }
40 | ```
41 |
42 | ### Key Pipeline Tasks
43 |
44 | - **`build`**: Generic build task for all packages
45 | - **`build:xmlui`**: Specific build for XMLUI framework and extensions
46 | - **`test`**: Run tests (depends on build completion)
47 | - **`lint`**: Code quality checks
48 |
49 | ## Workspace Build Scripts
50 |
51 | ### Root Package Scripts
52 |
53 | The root `package.json` defines orchestration scripts:
54 |
55 | ```json
56 | {
57 | "scripts": {
58 | "build-xmlui": "turbo run build:xmlui-all",
59 | "build-vscode-extension": "turbo run xmlui-vscode#build:vsix",
60 | "test-xmlui": "turbo run build:xmlui-all test:xmlui-all",
61 | "test-xmlui-smoke": "turbo run build:xmlui-all test:xmlui-smoke",
62 | "build-extensions": "turbo run build:extension",
63 | "build-docs": "turbo run build:xmlui-all build:docs",
64 | "publish-packages": "turbo run build:xmlui-all test:xmlui-all && npm run changeset:publish"
65 | }
66 | }
67 | ```
68 |
69 | ## Build Targets by Workspace
70 |
71 | ### 1. Core Framework (`xmlui/`)
72 |
73 | **Build Scripts:**
74 | ```json
75 | {
76 | "scripts": {
77 | "build:xmlui": "vite build --mode lib",
78 | "build:xmlui-standalone": "vite build --mode standalone",
79 | "build:xmlui-metadata": "vite build --mode metadata",
80 | "build:bin": "tsc -p tsconfig.bin.json"
81 | }
82 | }
83 | ```
84 |
85 | **Build Outputs:**
86 | - `dist/` - Library bundle for npm distribution
87 | - `bin/` - CLI executables
88 | - Metadata files for tooling support
89 |
90 | ### 2. Extension Packages (`packages/*/`)
91 |
92 | **Common Build Scripts:**
93 | ```json
94 | {
95 | "scripts": {
96 | "build:extension": "xmlui build-lib",
97 | "build:demo": "xmlui build",
98 | "build:meta": "xmlui build-lib --mode=metadata",
99 | "build-watch": "xmlui build-lib --watch"
100 | }
101 | }
102 | ```
103 |
104 | **Build Outputs:**
105 | - `dist/` - Extension library bundle
106 | - Demo applications (when applicable)
107 | - Component metadata
108 |
109 | ### 3. Documentation Website (`docs/`)
110 |
111 | **Build Scripts:**
112 | ```json
113 | {
114 | "scripts": {
115 | "build:docs": "xmlui build --buildMode=INLINE_ALL --withMock && xmlui zip-dist --target=dist/ui.zip"
116 | }
117 | }
118 | ```
119 |
120 | **Build Outputs:**
121 | - Static website with inlined dependencies
122 | - Zipped distribution package
123 | - Mock service worker integration
124 |
125 | ### 4. Development Tools (`tools/`)
126 |
127 | **CLI Tool (`tools/create-app/`):**
128 | ```json
129 | {
130 | "scripts": {
131 | "build": "ncc build ./index.ts -o dist/ --minify"
132 | }
133 | }
134 | ```
135 |
136 | **VS Code Extension (`tools/vscode/`):**
137 | ```json
138 | {
139 | "scripts": {
140 | "build:vsix": "vsce package"
141 | }
142 | }
143 | ```
144 |
145 | ## Build Execution Flows
146 |
147 | ### Development Build
148 |
149 | ```bash
150 | # Build everything for development
151 | npm run build-xmlui
152 |
153 | # This executes:
154 | # 1. Core framework build
155 | # 2. All extension packages (in parallel)
156 | # 3. CLI tools compilation
157 | ```
158 |
159 | ### Production Build
160 |
161 | ```bash
162 | # Full production build with tests
163 | npm run publish-packages
164 |
165 | # This executes:
166 | # 1. Build all packages
167 | # 2. Run complete test suite
168 | # 3. Publish to npm (if tests pass)
169 | ```
170 |
171 | ### Incremental Development
172 |
173 | ```bash
174 | # Watch mode for specific package
175 | cd packages/xmlui-animations
176 | npm run build-watch
177 |
178 | # Or build only changed packages
179 | turbo run build --filter=...@main
180 | ```
181 |
182 | ## Build Dependencies
183 |
184 | ### Inter-Package Dependencies
185 |
186 | ```mermaid
187 | graph TD
188 | Core[xmlui] --> Ext1[xmlui-animations]
189 | Core --> Ext2[xmlui-devtools]
190 | Core --> Ext3[xmlui-playground]
191 | Core --> Docs[xmlui-docs]
192 | Ext3 --> Docs
193 | Core --> Tests[xmlui-e2e]
194 | Core --> CLI[create-xmlui-app]
195 | ```
196 |
197 | ### Build Order
198 |
199 | 1. **Core Framework** (`xmlui`) - Must build first
200 | 2. **Extension Packages** - Can build in parallel after core
201 | 3. **Applications** - Documentation and test bed
202 | 4. **Tools** - CLI and VS Code extension
203 |
204 | ## Caching Strategy
205 |
206 | ### Turborepo Cache
207 |
208 | Turborepo automatically caches build outputs based on:
209 | - **Input files** - Source code, configuration files
210 | - **Dependencies** - package.json, lock files
211 | - **Environment** - Node version, environment variables
212 |
213 | ### Cache Locations
214 |
215 | - **Local cache**: `.turbo/cache/`
216 | - **Remote cache**: Configured via `TURBO_TOKEN` (optional)
217 |
218 | ### Cache Invalidation
219 |
220 | Cache is invalidated when:
221 | - Source files change
222 | - Dependencies are updated
223 | - Build configuration changes
224 | - Environment variables change
225 |
226 | ## Development Workflows
227 |
228 | ### First-Time Setup
229 |
230 | ```bash
231 | # 1. Install dependencies
232 | npm install
233 |
234 | # 2. Build documentation (includes framework)
235 | npm run build-docs
236 |
237 | # 3. Build complete framework
238 | npm run build-xmlui
239 |
240 | # 4. Run tests
241 | npm run test-xmlui-smoke
242 | ```
243 |
244 | ### Daily Development
245 |
246 | ```bash
247 | # Build only changed packages
248 | turbo run build --filter=...@HEAD~1
249 |
250 | # Start development server
251 | cd docs && npm start
252 |
253 | # Build specific package
254 | turbo run build --filter=xmlui-animations
255 | ```
256 |
257 | ### Pre-Release
258 |
259 | ```bash
260 | # Complete build and test
261 | npm run test-xmlui
262 |
263 | # Build documentation
264 | npm run build-docs
265 |
266 | # Package VS Code extension
267 | npm run build-vscode-extension
268 | ```
269 |
270 | ## Performance Optimization
271 |
272 | ### Parallel Execution
273 |
274 | Turborepo runs tasks in parallel when dependencies allow:
275 |
276 | ```bash
277 | # These run in parallel:
278 | - xmlui-animations build
279 | - xmlui-devtools build
280 | - xmlui-pdf build
281 | # (after xmlui core completes)
282 | ```
283 |
284 | ### Build Filtering
285 |
286 | Target specific packages or changes:
287 |
288 | ```bash
289 | # Build only animation package and its dependencies
290 | turbo run build --filter=xmlui-animations
291 |
292 | # Build packages changed since main branch
293 | turbo run build --filter=...@main
294 |
295 | # Build specific scope
296 | turbo run build --filter=./packages/*
297 | ```
298 |
299 | ### Watch Mode
300 |
301 | For active development:
302 |
303 | ```bash
304 | # Watch core framework
305 | cd xmlui && npm run build:xmlui-watch
306 |
307 | # Watch specific extension
308 | cd packages/xmlui-playground && npm run build-watch
309 | ```
310 |
311 | This build system ensures efficient, reliable builds across the entire XMLUI ecosystem while supporting both development and production workflows.
312 |
```
--------------------------------------------------------------------------------
/docs/content/components/NavGroup.md:
--------------------------------------------------------------------------------
```markdown
1 | # NavGroup [#navgroup]
2 |
3 | `NavGroup` creates collapsible containers for organizing related navigation items into hierarchical menu structures. It groups `NavLink` components and other `NavGroup` components, providing expandable submenus with customizable icons and states.
4 |
5 | **Key features:**
6 |
7 | - **Hierarchical organization**: Creates nested menu structures by containing NavLinks and other NavGroups
8 | - **Expand/collapse behavior**: Users can toggle visibility of grouped navigation items
9 | - **Customizable icons**: Different icons for expanded/collapsed states and layout orientations
10 | - **Flexible placement**: Works within NavPanel for app navigation or standalone for custom menus
11 | - **Initial state control**: Configure whether groups start expanded or collapsed
12 |
13 | ## Using `NavGroup` [#using-navgroup]
14 |
15 | The primary use of a `NavGroup` is to create an application menu with submenus, as the following example shows:
16 |
17 | ```xmlui-pg copy display name="Example: NavGroup in App" height="280px"
18 | ---app
19 | <App layout="condensed">
20 | <NavPanel>
21 | <NavLink label="Home" to="/" icon="home"/>
22 | <NavGroup label="Pages">
23 | <NavLink label="Page 1" to="/page/1"/>
24 | <NavGroup label="Page 2-4">
25 | <NavLink label="Page 2" to="/page/2"/>
26 | <NavLink label="Page 3" to="/page/3"/>
27 | <NavLink label="Page 4" to="/page/4"/>
28 | </NavGroup>
29 | <NavLink label="Page 5" to="/page/5"/>
30 | <NavLink label="Page Other" to="/page/Other"/>
31 | </NavGroup>
32 | </NavPanel>
33 | <Pages fallbackPath="/">
34 | <Page url="/">
35 | Home
36 | </Page>
37 | <Page url="/page/:id">
38 | <Text value="Page {$routeParams.id}" />
39 | </Page>
40 | </Pages>
41 | </App>
42 | ---desc
43 | Here, the highlighted `NavGroup` element nests other `NavLink` and `NavGroup` elements to create a hierarchical menu:
44 | ```
45 |
46 | You do not have to use `NavGroup` within `NavPanel`; you can nest it into other components to represent a menu, like in the following example:
47 |
48 | ```xmlui-pg copy display name="Example: NavGroup in a Stack" height="280px"
49 | <App>
50 | <HStack verticalAlignment="center">
51 | <Text>Use this menu:</Text>
52 | <NavGroup label="Pages">
53 | <NavLink label="Page 1" />
54 | <NavGroup label="Page 2-4">
55 | <NavLink label="Page 2" />
56 | <NavLink label="Page 3" />
57 | <NavLink label="Page 4" />
58 | </NavGroup>
59 | <NavLink label="Page 5" />
60 | <NavLink label="Page Other" />
61 | </NavGroup>
62 | </HStack>
63 | </App>
64 | ```
65 |
66 | ### Custom Icons [#custom-icons]
67 |
68 | You can also provide custom icons for a specific NavGroup component via it's respective property:
69 |
70 | - [iconHorizontalCollapsed](#iconHorizontalCollapsed)
71 | - [iconHorizontalExpanded](#iconHorizontalExpanded)
72 | - [iconVerticalCollapsed](#iconVerticalCollapsed)
73 | - [iconVerticalExpanded](#iconVerticalExpanded)
74 |
75 | See the following for an example of all variants:
76 |
77 | ```xmlui-pg copy display name="Example: custom icons in horizontal layout" height="250px"
78 | <App layout="horizontal">
79 | <NavGroup icon="email" label="Send To"
80 | iconVerticalExpanded="arrowup" iconVerticalCollapsed="arrowbottom">
81 | <NavLink icon="arrowup" label="Boss" />
82 | <NavGroup icon="users" label="Team"
83 | iconHorizontalExpanded="arrowleft" iconHorizontalCollapsed="arrowright">
84 | <NavLink label="Jane" />
85 | <NavLink label="Will" />
86 | </NavGroup>
87 | <NavLink icon="cube" label="Support" />
88 | </NavGroup>
89 | </App>
90 | ```
91 |
92 | ## Properties [#properties]
93 |
94 | ### `enabled` (default: true) [#enabled-default-true]
95 |
96 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
97 |
98 | ### `icon` [#icon]
99 |
100 | This property defines an optional icon to display along with the `NavGroup` label.
101 |
102 | Look at this example:
103 |
104 | ```xmlui-pg copy {3, 5} display name="Example: label and icon" height="280px"
105 | <App>
106 | <HStack verticalAlignment="center">
107 | <NavGroup icon="email" label="Send To" >
108 | <NavLink icon="arrowup" label="Boss" />
109 | <NavGroup icon="users" label="Team">
110 | <NavLink label="Jane" />
111 | <NavLink label="Will" />
112 | <NavLink label="Sandra" />
113 | </NavGroup>
114 | <NavLink icon="cube" label="Support" />
115 | </NavGroup>
116 | </HStack>
117 | </App>
118 | ```
119 |
120 | ### `iconHorizontalCollapsed` (default: "chevronright") [#iconhorizontalcollapsed-default-chevronright]
121 |
122 | Set a custom icon to display when the navigation menu is collapsed, is in a **horizontal** app layout, and is in a navigation submenu.
123 |
124 | For an example, see the [Custom Icons section](#custom-icons).
125 |
126 | ### `iconHorizontalExpanded` (default: "chevronright") [#iconhorizontalexpanded-default-chevronright]
127 |
128 | Set a custom icon to display when the navigation menu is expanded, is in a **horizontal** app layout, and is in a navigation submenu.
129 |
130 | For an example, see the [Custom Icons section](#custom-icons).
131 |
132 | ### `iconVerticalCollapsed` (default: "chevronright") [#iconverticalcollapsed-default-chevronright]
133 |
134 | Set a custom icon to display when the navigation menu is collapsed, is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.
135 |
136 | For an example, see the [Custom Icons section](#custom-icons).
137 |
138 | ### `iconVerticalExpanded` (default: "chevrondown") [#iconverticalexpanded-default-chevrondown]
139 |
140 | Set a custom icon to display when the navigation menu is expanded, is in a **vertical** app layout, or is in a **horizontal** layout and is the top-level navigation item in the menu.
141 |
142 | For an example, see the [Custom Icons section](#custom-icons).
143 |
144 | ### `initiallyExpanded` [#initiallyexpanded]
145 |
146 | This property defines whether the group is initially expanded or collapsed. If not defined, the group is collapsed by default.
147 |
148 | ### `label` [#label]
149 |
150 | This property sets the label of the component. If not set, the component will not display a label.
151 |
152 | This property sets the text displayed as the name of the `NavGroup`.
153 |
154 | For an example, see the [section on the icon property](#icon).
155 |
156 | ### `to` [#to]
157 |
158 | This property defines an optional navigation link.
159 |
160 | ## Events [#events]
161 |
162 | This component does not have any events.
163 |
164 | ## Exposed Methods [#exposed-methods]
165 |
166 | This component does not expose any methods.
167 |
168 | ## Styling [#styling]
169 |
170 | ### Theme Variables [#theme-variables]
171 |
172 | | Variable | Default Value (Light) | Default Value (Dark) |
173 | | --- | --- | --- |
174 | | [backgroundColor](../styles-and-themes/common-units/#color)-dropdown-NavGroup | $backgroundColor-primary | $backgroundColor-primary |
175 | | [borderRadius](../styles-and-themes/common-units/#border-rounding)-dropdown-NavGroup | $borderRadius | $borderRadius |
176 | | [boxShadow](../styles-and-themes/common-units/#boxShadow)-dropdown-NavGroup | $boxShadow-spread | $boxShadow-spread |
177 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Slider/Slider.tsx:
--------------------------------------------------------------------------------
```typescript
1 | import { Slider } from "./SliderNative";
2 | import styles from "./Slider.module.scss";
3 | import { createComponentRenderer } from "../../components-core/renderers";
4 | import { parseScssVar } from "../../components-core/theming/themeVars";
5 | import {
6 | createMetadata,
7 | d,
8 | dAutoFocus,
9 | dDidChange,
10 | dEnabled,
11 | dGotFocus,
12 | dInitialValue,
13 | dLostFocus,
14 | dReadonly,
15 | dRequired,
16 | dValidationStatus,
17 | } from "../metadata-helpers";
18 |
19 | const COMP = "Slider";
20 |
21 | export const SliderMd = createMetadata({
22 | status: "stable",
23 | description:
24 | "`Slider` provides an interactive control for selecting numeric values within " +
25 | "a defined range, supporting both single value selection and range selection with " +
26 | "multiple thumbs. It offers precise control through customizable steps and visual " +
27 | "feedback with formatted value display." +
28 | "\n\n" +
29 | "Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip.",
30 | props: {
31 | initialValue: dInitialValue(),
32 | minValue: {
33 | description: `This property specifies the minimum value of the allowed input range.`,
34 | valueType: "number",
35 | defaultValue: 0,
36 | },
37 | maxValue: {
38 | description: `This property specifies the maximum value of the allowed input range.`,
39 | valueType: "number",
40 | defaultValue: 10,
41 | },
42 | step: {
43 | description: `This property defines the increment value for the slider, determining the allowed intervals between selectable values.`,
44 | defaultValue: 1,
45 | },
46 | minStepsBetweenThumbs: d(
47 | `This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.`,
48 | undefined,
49 | "number",
50 | 1,
51 | ),
52 | enabled: dEnabled(),
53 | autoFocus: dAutoFocus(),
54 | required: dRequired(),
55 | readOnly: dReadonly(),
56 | validationStatus: {
57 | ...dValidationStatus(),
58 | defaultValue: "none",
59 | },
60 | rangeStyle: d(
61 | `This optional property allows you to apply custom styles to the range element of the slider.`,
62 | ),
63 | thumbStyle: d(
64 | `This optional property allows you to apply custom styles to the thumb elements of the slider.`,
65 | ),
66 | showValues: {
67 | description: `This property controls whether the slider shows the current values of the thumbs.`,
68 | valueType: "boolean",
69 | defaultValue: true,
70 | },
71 | valueFormat: {
72 | description: `This property allows you to customize how the values are displayed.`,
73 | valueType: "any",
74 | defaultValue: "(value) => value.toString()",
75 | },
76 | },
77 | events: {
78 | didChange: dDidChange(COMP),
79 | gotFocus: dGotFocus(COMP),
80 | lostFocus: dLostFocus(COMP),
81 | },
82 | apis: {
83 | focus: {
84 | description: `This method sets the focus on the slider component.`,
85 | signature: "focus(): void",
86 | },
87 | value: {
88 | description: `This API retrieves the current value of the \`${COMP}\`. You can use it to get the value programmatically.`,
89 | signature: "get value(): number | [number, number] | undefined",
90 | },
91 | setValue: {
92 | description: `This API sets the value of the \`${COMP}\`. You can use it to programmatically change the value.`,
93 | signature: "setValue(value: number | [number, number] | undefined): void",
94 | parameters: {
95 | value: "The new value to set. Can be a single value or an array of values for range sliders.",
96 | },
97 | },
98 | },
99 | themeVars: parseScssVar(styles.themeVars),
100 | defaultThemeVars: {
101 | [`backgroundColor-track-${COMP}`]: "$color-surface-200",
102 | [`backgroundColor-range-${COMP}`]: "$color-primary",
103 | [`borderWidth-thumb-${COMP}`]: "2px",
104 | [`borderStyle-thumb-${COMP}`]: "solid",
105 | [`borderColor-thumb-${COMP}`]: "$color-surface-50",
106 | [`backgroundColor-thumb-${COMP}`]: "$color-primary",
107 | [`backgroundColor-thumb-${COMP}--focus`]: "$color-primary",
108 | [`boxShadow-thumb-${COMP}--focus`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
109 | [`backgroundColor-thumb-${COMP}--hover`]: "$color-primary",
110 | [`boxShadow-thumb-${COMP}--hover`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
111 | [`backgroundColor-thumb-${COMP}--active`]: "$color-primary-400",
112 | [`boxShadow-thumb-${COMP}--active`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
113 | [`borderRadius-${COMP}-default`]: "$borderRadius",
114 | [`borderColor-${COMP}-default`]: "transparent",
115 | [`borderWidth-${COMP}-default`]: "0",
116 | [`borderStyle-${COMP}-default`]: "solid",
117 | [`boxShadow-${COMP}-default`]: "none",
118 |
119 | light: {
120 | [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-300",
121 | [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-400",
122 | [`backgroundColor-thumb-${COMP}`]: "$color-primary-500",
123 | [`borderColor-thumb-${COMP}`]: "$color-surface-50",
124 | },
125 | dark: {
126 | [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-600",
127 | [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-800",
128 | [`backgroundColor-thumb-${COMP}`]: "$color-primary-400",
129 | [`borderColor-thumb-${COMP}`]: "$color-surface-950",
130 | },
131 | },
132 | });
133 |
134 | export const sliderComponentRenderer = createComponentRenderer(
135 | COMP,
136 | SliderMd,
137 | ({
138 | node,
139 | extractValue,
140 | lookupEventHandler,
141 | lookupSyncCallback,
142 | className,
143 | updateState,
144 | state,
145 | registerComponentApi,
146 | }) => {
147 | return (
148 | <Slider
149 | validationStatus={extractValue(node.props.validationStatus)}
150 | minStepsBetweenThumbs={extractValue(node.props?.minStepsBetweenThumbs)}
151 | value={state.value}
152 | initialValue={extractValue(node.props.initialValue)}
153 | updateState={updateState}
154 | onDidChange={lookupEventHandler("didChange")}
155 | onFocus={lookupEventHandler("gotFocus")}
156 | onBlur={lookupEventHandler("lostFocus")}
157 | registerComponentApi={registerComponentApi}
158 | className={className}
159 | step={extractValue(node.props?.step)}
160 | min={extractValue(node.props?.minValue)}
161 | max={extractValue(node.props?.maxValue)}
162 | enabled={extractValue.asOptionalBoolean(node.props?.enabled)}
163 | autoFocus={extractValue.asOptionalBoolean(node.props.autoFocus)}
164 | readOnly={extractValue.asOptionalBoolean(node.props.readOnly)}
165 | required={extractValue.asOptionalBoolean(node.props.required)}
166 | rangeStyle={extractValue(node.props?.rangeStyle)}
167 | thumbStyle={extractValue(node.props?.thumbStyle)}
168 | showValues={extractValue.asOptionalBoolean(node.props?.showValues)}
169 | valueFormat={lookupSyncCallback(node.props?.valueFormat)}
170 | />
171 | );
172 | },
173 | );
174 |
```
--------------------------------------------------------------------------------
/xmlui/src/components-core/theming/component-layout-resolver.ts:
--------------------------------------------------------------------------------
```typescript
1 | import type { CSSProperties } from "react";
2 | import type { LayoutContext } from "../../abstractions/RendererDefs";
3 | import { EMPTY_OBJECT } from "../constants";
4 | import { parseLayoutProperty } from "./parse-layout-props";
5 |
6 | export type ResolvedComponentLayout = Record<string, ResolvedPartLayout>;
7 |
8 | export type ResolvedPartLayout = {
9 | baseStyles?: CssPropsWithStates;
10 | responsiveStyles?: Record<string, CssPropsWithStates>;
11 | };
12 |
13 | export type CssPropsWithStates = CSSProperties & {
14 | states?: Record<string, CSSProperties>;
15 | };
16 |
17 | export const THEME_VAR_PREFIX = "xmlui";
18 | export const BASE_COMPONENT_PART = "_base_";
19 | const themeVarCapturesRegex = /(\$[a-zA-Z][a-zA-Z0-9-_]*)/g;
20 | const starSizeRegex = /^\d*\*$/;
21 |
22 | export function resolveComponentLayoutProps(
23 | layoutProps: Record<string, any> = EMPTY_OBJECT,
24 | layoutContext?: LayoutContext,
25 | ): ResolvedComponentLayout {
26 | const result: ResolvedComponentLayout = {};
27 |
28 | for (const [key, value] of Object.entries(layoutProps)) {
29 | const parsed = parseLayoutProperty(key, false);
30 |
31 | if (typeof parsed === "string") {
32 | // --- Ignore failed properties
33 | continue;
34 | }
35 |
36 | // --- Process the properties, resolve theme variables to CSS variables
37 | const cssPropName = parsed.property;
38 | const appliedValue = value
39 | ?.toString()
40 | ?.replace(themeVarCapturesRegex, (match: string) => toCssVar(match.trim()));
41 |
42 | // --- Some properties may need transformation
43 | const cssProps: CSSProperties =
44 | cssPropName in specialResolvers
45 | ? specialResolvers[cssPropName](appliedValue, layoutContext)
46 | : { [cssPropName]: appliedValue };
47 |
48 | // --- Check if the property belongs to one or more states
49 | const stateName = parsed.states && parsed.states.length > 0 ? parsed.states.join("&") : null;
50 |
51 | // --- Prepare the place to store the styles. It belongs to the specified part.
52 | const partName = parsed.part ? parsed.part : BASE_COMPONENT_PART;
53 | let propertyTarget: any = (result[partName] ??= {});
54 | if (parsed.screenSizes && parsed.screenSizes.length > 0) {
55 | const screenSizeKey = parsed.screenSizes.join("&");
56 | propertyTarget.responsiveStyles ??= {};
57 | propertyTarget.responsiveStyles[screenSizeKey] ??= {};
58 | if (stateName) {
59 | propertyTarget.responsiveStyles[screenSizeKey].states ??= {};
60 | propertyTarget.responsiveStyles[screenSizeKey].states = {
61 | ...propertyTarget.responsiveStyles[screenSizeKey].states,
62 | [stateName]: {
63 | ...propertyTarget.responsiveStyles[screenSizeKey].states[stateName],
64 | ...cssProps,
65 | },
66 | };
67 | } else {
68 | propertyTarget.responsiveStyles[screenSizeKey] = {
69 | ...propertyTarget.responsiveStyles[screenSizeKey],
70 | ...cssProps,
71 | };
72 | }
73 | } else {
74 | // --- No screen sizes specified, the property belongs to the base styles
75 | propertyTarget.baseStyles ??= {};
76 | if (stateName) {
77 | propertyTarget.baseStyles.states ??= {};
78 | propertyTarget.baseStyles.states = {
79 | ...propertyTarget.baseStyles.states,
80 | [stateName]: { ...propertyTarget.baseStyles.states[stateName], ...cssProps },
81 | };
82 | } else {
83 | propertyTarget.baseStyles = { ...propertyTarget.baseStyles, ...cssProps };
84 | }
85 | }
86 | }
87 |
88 | // --- Done
89 | return result;
90 | }
91 |
92 | // --- Checks if the specified size is a star size and the orientation is horizontal
93 | function getHorizontalStarSize(
94 | size: string | number,
95 | layoutContext?: LayoutContext,
96 | ): number | null {
97 | if (!size) return null;
98 | const orientation = getOrientation(layoutContext);
99 | return orientation === "horizontal" && starSizeRegex.test(size.toString())
100 | ? getStarSizeNumber(size.toString())
101 | : null;
102 | }
103 |
104 | // --- Checks if the specified size is a star size and the orientation is vertical
105 | function getVerticalStarSize(size: string | number, layoutContext?: LayoutContext): number | null {
106 | if (!size) return null;
107 | const orientation = getOrientation(layoutContext);
108 | return orientation === "vertical" && starSizeRegex.test(size.toString())
109 | ? getStarSizeNumber(size.toString())
110 | : null;
111 | }
112 |
113 | // --- Obtains the integer number from a string that matches the starSizeRegex.
114 | function getStarSizeNumber(input: string): number | null {
115 | if (starSizeRegex.test(input)) {
116 | const numberPart = input.slice(0, -1); // Remove the trailing '*'
117 | return numberPart === "" ? 1 : parseInt(numberPart, 10); // Default to 1 if no number is present
118 | }
119 | return null;
120 | }
121 |
122 | // --- Gets the current orientation from the layout context
123 | function getOrientation(layoutContext?: LayoutContext): string | undefined {
124 | if (!layoutContext) return;
125 | let orientation = layoutContext?.type === "Stack" && layoutContext?.orientation;
126 | return orientation?.toString();
127 | }
128 |
129 | function toCssVar(c: string): string {
130 | return `var(--${THEME_VAR_PREFIX}-${c.substring(1)})`;
131 | }
132 |
133 | type SpecialResolver = (propValue: any, layoutContext?: LayoutContext) => CSSProperties;
134 |
135 | export const specialResolvers: Record<string, SpecialResolver> = {
136 | paddingHorizontal: (propValue) => ({
137 | paddingLeft: propValue,
138 | paddingRight: propValue,
139 | }),
140 | paddingVertical: (propValue) => ({
141 | paddingTop: propValue,
142 | paddingBottom: propValue,
143 | }),
144 | marginHorizontal: (propValue) => ({
145 | marginLeft: propValue,
146 | marginRight: propValue,
147 | }),
148 | marginVertical: (propValue) => ({
149 | marginTop: propValue,
150 | marginBottom: propValue,
151 | }),
152 | borderHorizontal: (propValue) => ({
153 | borderLeft: propValue,
154 | borderRight: propValue,
155 | }),
156 | borderVertical: (propValue) => ({
157 | borderTop: propValue,
158 | borderBottom: propValue,
159 | }),
160 | wrapContent: (propValue) => ({
161 | flexWrap: propValue === "true" ? "wrap" : "nowrap",
162 | }),
163 | canShrink: (propValue) => ({
164 | flexShrink: propValue === "true" ? 1 : 0,
165 | }),
166 | width: (propValue, layoutContext) => {
167 | const horizontalStarSize = getHorizontalStarSize(propValue, layoutContext);
168 | const result: CSSProperties = {};
169 | if (horizontalStarSize !== null) {
170 | // --- We use "flex" when width is in start-size and allow shrinking
171 | result.flex = horizontalStarSize;
172 | result.flexShrink = 1;
173 | } else {
174 | result.width = propValue;
175 | }
176 | return result;
177 | },
178 | height: (propValue, layoutContext) => {
179 | const verticalStarSize = getVerticalStarSize(propValue, layoutContext);
180 | const result: CSSProperties = {};
181 | if (verticalStarSize !== null) {
182 | // --- We use "flex" when height is in start-size and allow shrinking
183 | result.flex = verticalStarSize;
184 | result.flexShrink = 1;
185 | } else {
186 | result.height = propValue;
187 | }
188 | return result;
189 | },
190 | };
191 |
```