This is page 56 of 188. Use http://codebase.md/xmlui-org/xmlui/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-optimized.yml
│ ├── deploy-blog-swa.yml
│ ├── deploy-blog.yml
│ ├── deploy-docs-optimized.yml
│ ├── deploy-docs-swa.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
│ ├── package.json
│ ├── public
│ │ ├── blog
│ │ │ ├── images
│ │ │ │ ├── an-advanced-codefence.gif
│ │ │ │ ├── an-advanced-codefence.mp4
│ │ │ │ ├── blog-page-component.png
│ │ │ │ ├── blog-scrabble.png
│ │ │ │ ├── codefence-runner.png
│ │ │ │ ├── integrated-blog-search.png
│ │ │ │ ├── lorem-ipsum.png
│ │ │ │ ├── playground-checkbox-source.png
│ │ │ │ ├── playground.png
│ │ │ │ ├── use-xmlui-mcp-to-find-a-howto.png
│ │ │ │ └── xmlui-demo-gallery.png
│ │ │ ├── introducing-xmlui.md
│ │ │ ├── lorem-ipsum.md
│ │ │ ├── newest-post.md
│ │ │ ├── older-post.md
│ │ │ ├── xmlui-playground.md
│ │ │ └── xmlui-powered-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
│ │ ├── staticwebapp.config.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
│ │ │ │ ├── control-cache-invalidation.md
│ │ │ │ ├── debounce-user-input-for-api-calls.md
│ │ │ │ ├── debounce-with-changelistener.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
│ │ ├── staticwebapp.config.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
│ ├── tsconfig.json
│ ├── 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
│ ├── 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
│ │ └── 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
│ ├── 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
│ ├── 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
│ ├── 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.module.scss
│ │ │ ├── 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.tsx
│ │ │ ├── StandalonePlayground.tsx
│ │ │ ├── StandalonePlaygroundNative.module.scss
│ │ │ ├── StandalonePlaygroundNative.tsx
│ │ │ ├── ThemeSwitcher.module.scss
│ │ │ ├── ThemeSwitcher.tsx
│ │ │ └── utils.ts
│ │ ├── providers
│ │ │ ├── Toast.module.scss
│ │ │ └── ToastProvider.tsx
│ │ ├── state
│ │ │ └── store.ts
│ │ ├── themes
│ │ │ └── theme.ts
│ │ └── utils
│ │ └── helpers.ts
│ ├── 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
│ ├── xmlui-spreadsheet
│ │ ├── .gitignore
│ │ ├── demo
│ │ │ └── Main.xmlui
│ │ ├── index.html
│ │ ├── index.ts
│ │ ├── meta
│ │ │ └── componentsMetadata.ts
│ │ ├── package.json
│ │ └── src
│ │ ├── index.tsx
│ │ ├── Spreadsheet.tsx
│ │ └── SpreadsheetNative.tsx
│ └── 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.spec.ts
│ │ ├── HeroSection.tsx
│ │ └── HeroSectionNative.tsx
│ ├── index.tsx
│ ├── ScrollToTop
│ │ ├── ScrollToTop.module.scss
│ │ ├── ScrollToTop.tsx
│ │ └── ScrollToTopNative.tsx
│ └── vite-env.d.ts
├── playwright.config.ts
├── 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.cjs
│ ├── 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
│ ├── component-metadata.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
│ ├── theme-variables-refactoring.md
│ ├── ud-components.md
│ └── xmlui-repo.md
├── package.json
├── scripts
│ ├── coverage-only.js
│ ├── e2e-test-summary.js
│ ├── extract-component-metadata.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
│ ├── generate-metadata-markdown.js
│ ├── get-langserver-metadata.js
│ ├── 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.module.scss
│ │ │ │ ├── LabelList.spec.ts
│ │ │ │ ├── LabelList.tsx
│ │ │ │ └── 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
│ │ │ └── test-padding.xmlui
│ │ ├── 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.js
│ ├── 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
│ │ │ ├── index.ts
│ │ │ ├── ModalDialogDriver.ts
│ │ │ ├── NumberBoxDriver.ts
│ │ │ ├── TextBoxDriver.ts
│ │ │ ├── TimeInputDriver.ts
│ │ │ ├── TimerDriver.ts
│ │ │ └── TreeDriver.ts
│ │ ├── fixtures.ts
│ │ ├── index.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.json
├── tsdown.config.ts
├── vite.config.ts
└── vitest.config.ts
```
# Files
--------------------------------------------------------------------------------
/xmlui/tests/parsers/scripting/parser-function.test.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { describe, expect, assert, it } from "vitest";
2 |
3 | import { Parser } from "../../../src/parsers/scripting/Parser";
4 | import {
5 | Destructure,
6 | FunctionDeclaration,
7 | Identifier,
8 | SpreadExpression,
9 | T_BLOCK_STATEMENT,
10 | T_DESTRUCTURE,
11 | T_FUNCTION_DECLARATION,
12 | T_IDENTIFIER,
13 | T_SPREAD_EXPRESSION,
14 | } from "../../../src/components-core/script-runner/ScriptingSourceTree";
15 |
16 | describe("Parser - function declarations", () => {
17 | it("No param", () => {
18 | // --- Arrange
19 | const source = "function myFunc() { return 2*v; }";
20 | const wParser = new Parser(source);
21 |
22 | // --- Act
23 | const stmts = wParser.parseStatements()!;
24 |
25 | // --- Assert
26 | expect(stmts.length).toEqual(1);
27 | const stmt = stmts[0] as FunctionDeclaration;
28 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
29 | expect(stmt.id.name).toEqual("myFunc");
30 | expect(stmt.args.length).toEqual(0);
31 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
32 | });
33 |
34 | it("Single param", () => {
35 | // --- Arrange
36 | const source = "function myFunc(v) { return 2*v; }";
37 | const wParser = new Parser(source);
38 |
39 | // --- Act
40 | const stmts = wParser.parseStatements()!;
41 |
42 | // --- Assert
43 | expect(stmts.length).toEqual(1);
44 | const stmt = stmts[0] as FunctionDeclaration;
45 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
46 | expect(stmt.id.name).toEqual("myFunc");
47 | expect(stmt.args.length).toEqual(1);
48 | expect(stmt.args[0].type).toEqual(T_IDENTIFIER);
49 | expect((stmt.args[0] as Identifier).name).toEqual("v");
50 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
51 | });
52 |
53 | it("multiple params", () => {
54 | // --- Arrange
55 | const source = "function myFunc(v, w) { return 2*v; }";
56 | const wParser = new Parser(source);
57 |
58 | // --- Act
59 | const stmts = wParser.parseStatements()!;
60 |
61 | // --- Assert
62 | expect(stmts.length).toEqual(1);
63 | const stmt = stmts[0] as FunctionDeclaration;
64 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
65 | expect(stmt.id.name).toEqual("myFunc");
66 | expect(stmt.args.length).toEqual(2);
67 | expect(stmt.args[0].type).toEqual(T_IDENTIFIER);
68 | expect((stmt.args[0] as Identifier).name).toEqual("v");
69 | expect(stmt.args[1].type).toEqual(T_IDENTIFIER);
70 | expect((stmt.args[1] as Identifier).name).toEqual("w");
71 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
72 | });
73 |
74 | it("Single object destructure #1", () => {
75 | // --- Arrange
76 | const source = "function myFunc({x, y}) { return 2*v; }";
77 | const wParser = new Parser(source);
78 |
79 | // --- Act
80 | const stmts = wParser.parseStatements()!;
81 |
82 | // --- Assert
83 | expect(stmts.length).toEqual(1);
84 | const stmt = stmts[0] as FunctionDeclaration;
85 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
86 | expect(stmt.id.name).toEqual("myFunc");
87 | expect(stmt.args.length).toEqual(1);
88 | expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
89 | expect((stmt.args[0] as Destructure).oDestr!.length).toEqual(2);
90 | expect((stmt.args[0] as Destructure).oDestr![0].id).toEqual("x");
91 | expect((stmt.args[0] as Destructure).oDestr![1].id).toEqual("y");
92 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
93 | });
94 |
95 | it("Single object destructure #2", () => {
96 | // --- Arrange
97 | const source = "function myFunc({x, y:q}) { return 2*v; }";
98 | const wParser = new Parser(source);
99 |
100 | // --- Act
101 | const stmts = wParser.parseStatements()!;
102 |
103 | // --- Assert
104 | expect(stmts.length).toEqual(1);
105 | const stmt = stmts[0] as FunctionDeclaration;
106 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
107 | expect(stmt.id.name).toEqual("myFunc");
108 | expect(stmt.args.length).toEqual(1);
109 | expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
110 | expect((stmt.args[0] as Destructure).oDestr!.length).toEqual(2);
111 | expect((stmt.args[0] as Destructure).oDestr![0].id).toEqual("x");
112 | expect((stmt.args[0] as Destructure).oDestr![1].id).toEqual("y");
113 | expect((stmt.args[0] as Destructure).oDestr![1].alias).toEqual("q");
114 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
115 | });
116 |
117 | it("Single object destructure #3", () => {
118 | // --- Arrange
119 | const source = "function myFunc({x, y: {v, w}}) { return 2*v; }";
120 | const wParser = new Parser(source);
121 |
122 | // --- Act
123 | const stmts = wParser.parseStatements()!;
124 |
125 | // --- Assert
126 | expect(stmts.length).toEqual(1);
127 | const stmt = stmts[0] as FunctionDeclaration;
128 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
129 | expect(stmt.id.name).toEqual("myFunc");
130 | expect(stmt.args.length).toEqual(1);
131 | expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
132 | expect((stmt.args[0] as Destructure).oDestr![0].id).toEqual("x");
133 | expect((stmt.args[0] as Destructure).oDestr![1].oDestr!.length).toEqual(2);
134 | expect((stmt.args[0] as Destructure).oDestr![1].oDestr![0].id).toEqual("v");
135 | expect((stmt.args[0] as Destructure).oDestr![1].oDestr![1].id).toEqual("w");
136 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
137 | });
138 |
139 | it("Single array destructure #1", () => {
140 | // --- Arrange
141 | const source = "function myFunc([x, y]) { return 2*v; }";
142 | const wParser = new Parser(source);
143 |
144 | // --- Act
145 | const stmts = wParser.parseStatements()!;
146 |
147 | // --- Assert
148 | expect(stmts.length).toEqual(1);
149 | const stmt = stmts[0] as FunctionDeclaration;
150 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
151 | expect(stmt.id.name).toEqual("myFunc");
152 | expect(stmt.args.length).toEqual(1);
153 | expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
154 | expect((stmt.args[0] as Destructure).aDestr!.length).toEqual(2);
155 | expect((stmt.args[0] as Destructure).aDestr![0].id).toEqual("x");
156 | expect((stmt.args[0] as Destructure).aDestr![1].id).toEqual("y");
157 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
158 | });
159 |
160 | it("Single array destructure #2", () => {
161 | // --- Arrange
162 | const source = "function myFunc([x,, y]) { return 2*v; }";
163 | const wParser = new Parser(source);
164 |
165 | // --- Act
166 | const stmts = wParser.parseStatements()!;
167 |
168 | // --- Assert
169 | expect(stmts.length).toEqual(1);
170 | const stmt = stmts[0] as FunctionDeclaration;
171 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
172 | expect(stmt.id.name).toEqual("myFunc");
173 | expect(stmt.args.length).toEqual(1);
174 | expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
175 | expect((stmt.args[0] as Destructure).aDestr!.length).toEqual(3);
176 | expect((stmt.args[0] as Destructure).aDestr![0].id).toEqual("x");
177 | expect((stmt.args[0] as Destructure).aDestr![1].id).toEqual(undefined);
178 | expect((stmt.args[0] as Destructure).aDestr![2].id).toEqual("y");
179 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
180 | });
181 |
182 | it("Complex destructure #1", () => {
183 | // --- Arrange
184 | const source = "function myFunc([a,, b], {c, y:d}) { return 2*v; }";
185 | const wParser = new Parser(source);
186 |
187 | // --- Act
188 | const stmts = wParser.parseStatements()!;
189 |
190 | // --- Assert
191 | expect(stmts.length).toEqual(1);
192 | const stmt = stmts[0] as FunctionDeclaration;
193 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
194 | expect(stmt.id.name).toEqual("myFunc");
195 | expect(stmt.args.length).toEqual(2);
196 | expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
197 | expect((stmt.args[0] as Destructure).aDestr!.length).toEqual(3);
198 | expect((stmt.args[0] as Destructure).aDestr![0].id).toEqual("a");
199 | expect((stmt.args[0] as Destructure).aDestr![1].id).toEqual(undefined);
200 | expect((stmt.args[0] as Destructure).aDestr![2].id).toEqual("b");
201 | expect(stmt.args[1].type).toEqual(T_DESTRUCTURE);
202 | expect((stmt.args[1] as Destructure).oDestr!.length).toEqual(2);
203 | expect((stmt.args[1] as Destructure).oDestr![0].id).toEqual("c");
204 | expect((stmt.args[1] as Destructure).oDestr![1].id).toEqual("y");
205 | expect((stmt.args[1] as Destructure).oDestr![1].alias).toEqual("d");
206 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
207 | });
208 |
209 | it("Complex destructure #2", () => {
210 | // --- Arrange
211 | const source = "function myFunc([a,, b], {c, y:d}, e) { return 2*v; }";
212 | const wParser = new Parser(source);
213 |
214 | // --- Act
215 | const stmts = wParser.parseStatements()!;
216 |
217 | // --- Assert
218 | expect(stmts.length).toEqual(1);
219 | const stmt = stmts[0] as FunctionDeclaration;
220 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
221 | expect(stmt.id.name).toEqual("myFunc");
222 | expect(stmt.args.length).toEqual(3);
223 | expect(stmt.args[0].type).toEqual(T_DESTRUCTURE);
224 | expect((stmt.args[0] as Destructure).aDestr!.length).toEqual(3);
225 | expect((stmt.args[0] as Destructure).aDestr![0].id).toEqual("a");
226 | expect((stmt.args[0] as Destructure).aDestr![1].id).toEqual(undefined);
227 | expect((stmt.args[0] as Destructure).aDestr![2].id).toEqual("b");
228 | expect(stmt.args[1].type).toEqual(T_DESTRUCTURE);
229 | expect((stmt.args[1] as Destructure).oDestr!.length).toEqual(2);
230 | expect((stmt.args[1] as Destructure).oDestr![0].id).toEqual("c");
231 | expect((stmt.args[1] as Destructure).oDestr![1].id).toEqual("y");
232 | expect((stmt.args[1] as Destructure).oDestr![1].alias).toEqual("d");
233 | expect(stmt.args[2].type).toEqual(T_IDENTIFIER);
234 | expect((stmt.args[2] as Identifier).name).toEqual("e");
235 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
236 | });
237 |
238 | it("Single rest param", () => {
239 | // --- Arrange
240 | const source = "function myFunc(...v) { return 2*v; }";
241 | const wParser = new Parser(source);
242 |
243 | // --- Act
244 | const stmts = wParser.parseStatements()!;
245 |
246 | // --- Assert
247 | expect(stmts.length).toEqual(1);
248 | const stmt = stmts[0] as FunctionDeclaration;
249 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
250 | expect(stmt.id.name).toEqual("myFunc");
251 | expect(stmt.args.length).toEqual(1);
252 | expect(stmt.args[0].type).toEqual(T_SPREAD_EXPRESSION);
253 | const spread = stmt.args[0] as SpreadExpression;
254 | expect((spread.expr as Identifier).name).toEqual("v");
255 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
256 | });
257 |
258 | it("Multiple params with rest", () => {
259 | // --- Arrange
260 | const source = "function myFunc(v, ...w) { return 2*v; }";
261 | const wParser = new Parser(source);
262 |
263 | // --- Act
264 | const stmts = wParser.parseStatements()!;
265 |
266 | // --- Assert
267 | expect(stmts.length).toEqual(1);
268 | const stmt = stmts[0] as FunctionDeclaration;
269 | expect(stmt.type).toEqual(T_FUNCTION_DECLARATION);
270 | expect(stmt.id.name).toEqual("myFunc");
271 | expect(stmt.args.length).toEqual(2);
272 | expect(stmt.args[0].type).toEqual(T_IDENTIFIER);
273 | expect((stmt.args[0] as Identifier).name).toEqual("v");
274 | expect(stmt.args[1].type).toEqual(T_SPREAD_EXPRESSION);
275 | const spread = stmt.args[1] as SpreadExpression;
276 | expect((spread.expr as Identifier).name).toEqual("w");
277 | expect(stmt.stmt.type).toEqual(T_BLOCK_STATEMENT);
278 | });
279 |
280 | it("Fails with rest params #1", () => {
281 | // --- Arrange
282 | const source = "function myFunc(...a, b) { return 2*v; }";
283 | const wParser = new Parser(source);
284 |
285 | // --- Act
286 | try {
287 | wParser.parseStatements()!;
288 | } catch (err) {
289 | // --- Assert
290 | expect(err.toString().includes("argument")).toBe(true);
291 | return;
292 | }
293 | assert.fail("Exception expected");
294 | });
295 |
296 | it("Fails with rest params #2", () => {
297 | // --- Arrange
298 | const source = "function myFunc(...(a+b)) { return 2*v; }";
299 | const wParser = new Parser(source);
300 |
301 | // --- Act
302 | try {
303 | wParser.parseStatements()!;
304 | } catch (err) {
305 | // --- Assert
306 | expect(err.toString().includes("argument")).toBe(true);
307 | return;
308 | }
309 | assert.fail("Exception expected");
310 | });
311 | });
312 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/Queue/Queue.md:
--------------------------------------------------------------------------------
```markdown
1 | %-DESC-START
2 | ## Using Queue
3 |
4 | As its name suggests, the `Queue` component keeps a queue of items to process. You can add items to the queue with the `enqueueItem` (or `enqueueItems`) method. Once the queue has some items to process, the engine reads them one by one (in FIFO order) and processes an item with the `process` event handler.
5 | Though `Queue` is a non-visual component, it can render UI for reporting progress through its `progressFeedback` property. Also, when the queue gets empty, the UI can render a result summary through the `resultFeedback` property.
6 |
7 | The following sample demonstrates these concepts. When the user clicks the button, a new random number is queued. The sample imitates a long calculation by waiting one second within the `process` event handler and reports the progress.
8 |
9 | A `ChangeListener` instance observes queue length changes and stores the actual length to display that in the UI.
10 |
11 | ```xmlui-pg copy {9-24} display name="Example: using Queue"
12 | <App
13 | var.queued="{0}"
14 | var.queueLength="{0}"
15 | var.processed="{0}"
16 | var.result="{0}">
17 | <Button
18 | label="Add a new item to the queue"
19 | onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
20 | <Queue id="myQueue"
21 | onProcess="processing =>
22 | {
23 | result += processing.item;
24 | delay(1000);
25 | processed++;
26 | processing.onProgress(processed)
27 | }
28 | ">
29 | <property name="progressFeedback">
30 | <Text value="{processed} / {queued}" />
31 | </property>
32 | <property name="resultFeedback">
33 | <Text value="{result.toFixed(4)}" />
34 | </property>
35 | </Queue>
36 | <ChangeListener
37 | listenTo="{myQueue.getQueueLength()}"
38 | onDidChange="l => queueLength = l.newValue;"/>
39 | <Text>Items queued: {queued}</Text>
40 | <Text>Current queue length: {queueLength}</Text>
41 | <Text>Current result: {result.toFixed(4)}</Text>
42 | </App>
43 | ```
44 |
45 | Try the app by clicking the button several times. Check how the queue processes the items and displays feedback.
46 |
47 | %-DESC-END
48 |
49 | %-API-START enqueueItem
50 |
51 | The following example stores and displays this item when a new item is put into the queue:
52 |
53 | ```xmlui-pg copy {5} display name="Example: enqueueItem"
54 | <App var.queued="{0}" var.itemIds="">
55 | <Button
56 | label="Add a new item to the queue"
57 | onClick="{
58 | const itemId = myQueue.enqueueItem(Math.random());
59 | itemIds += itemId + ', '; queued++;
60 | }" />
61 | <Queue id="myQueue" onProcess="processing => {}" />
62 | <Text>Items queued: {queued}</Text>
63 | <Text>Item IDs: {itemIds}</Text>
64 | </App>
65 | ```
66 |
67 | %-API-END
68 |
69 | %-API-START getQueuedItems
70 |
71 | This method returns the items currently in the queue with their entire context. The result of this method is a list of objects with these properties:
72 |
73 | - `item`: The queued item (as passed to the `enqueueItem` and `enqueueItems` methods)
74 | - `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component.
75 | - `status`: The current processing status of the item; one of the following values: `"pending"`, `"started"`, `"in-progress"`, `"completed"`, or `"error"`
76 | - `progress`: The latest progress value reported for the item (may be undefined)
77 | - `result`: The optional value the `process` event handler returns.
78 |
79 | > **Note**: When all items are processed, the queue removes the items and fires the `complete` event. When the event handler runs, the queue is empty, and `getQueuedItems` returns an empty list.
80 |
81 | %-API-END
82 |
83 | %-API-START remove
84 |
85 | The following example emulates a file-processing application. When a file is about to save (in the `process` event), the processing fails with files that deny overwrite. In such a case, the `processError` event handler asks the user to confirm the overwrite action. In case of confirmation, the queue uses the `remove` action to discard the faulty queue item and enqueues the file again with the `accept` behavior so that it won't fail next time.
86 |
87 | ```xmlui-pg copy {21} display name="Example: remove" height="240px"
88 | <App var.queued="{0}" var.processed="" var.skipped="{0}">
89 | <Button
90 | label="Add a new file to the queue"
91 | onClick="{myQueue.enqueueItem({file: ++queued, conflict: 'deny'})}" />
92 | <Queue id="myQueue"
93 | onProcess="processing =>
94 | {
95 | delay(1000);
96 | if (processing.item.conflict === 'deny') {
97 | throw 'Conflict';
98 | }
99 | processed += processing.item.file + ', ';
100 | }
101 | "
102 | onProcessError="(error, processing) => {
103 | if (error.message === 'Conflict') {
104 | console.log(error);
105 | const result = confirm('Do you want to overwrite?',
106 | 'File ' + processing.item.file + ' already exists',
107 | 'Overwrite');
108 | $this.remove(processing.actionItemId);
109 | if (result) {
110 | $this.enqueueItems([{...processing.item, conflict: 'accept'}]);
111 | }
112 | return false;
113 | }
114 | }">
115 | <property name="resultFeedback">
116 | <Text value="All items processed" />
117 | </property>
118 | </Queue>
119 | <Text>Items queued: {queued}</Text>
120 | <Text>Processed: {processed}</Text>
121 | </App>
122 | ```
123 |
124 | %-API-END
125 |
126 | %-EVENT-START complete
127 |
128 | The following sample displays a tick mark every time the queue is emptied:
129 |
130 | ```xmlui-pg copy {13} display name="Example: complete"
131 | <App
132 | var.queued="{0}"
133 | var.queueEmptied=""
134 | var.result="{0}">
135 | <Button
136 | label="Add a new item to the queue"
137 | onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
138 | <Queue id="myQueue"
139 | onProcess="processing => {
140 | result += processing.item;
141 | delay(1000);
142 | }"
143 | onComplete="queueEmptied += ' ok!'" >
144 | <property name="progressFeedback">
145 | <Text value="Completed: {$completedItems.length} of {$queuedItems.length}"/>
146 | </property>
147 | <property name="resultFeedback">
148 | <Text value="{result.toFixed(4)}" />
149 | </property>
150 | </Queue>
151 | <Text>Items queued: {queued}</Text>
152 | <Text>Current result: {result.toFixed(4)}</Text>
153 | <Text>Queue emptied: {queueEmptied}</Text>
154 | </App>
155 | ```
156 |
157 | %-EVENT-END
158 |
159 | %-EVENT-START didProcess
160 |
161 | The parameter of the event handler is an object with these properties:
162 | - `item`: the item to process
163 | - `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component. You can pass this ID to some API methods (for example, to `remove`).
164 | - `processItemContext`: A context object (initially empty) that you can use to add some context-specific information to the item. The event handlers of other events will see this information as the item being processed conveys it.
165 |
166 | The following sample uses the `didProcess` event handler to add a tick symbol to the progress whenever an item has been processed:
167 |
168 | ```xmlui-pg copy {13} display name="Example: didProcess"
169 | <App
170 | var.queued="{0}"
171 | var.progressLine=""
172 | var.result="{0}">
173 | <Button
174 | label="Add a new item to the queue"
175 | onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
176 | <Queue id="myQueue"
177 | onProcess="processing => {
178 | result += processing.item;
179 | delay(1000);
180 | }"
181 | onDidProcess="progressLine += ' ok!'" >
182 | <property name="resultFeedback">
183 | <Text value="{result.toFixed(4)}" />
184 | </property>
185 | </Queue>
186 | <Text>Items queued: {queued}</Text>
187 | <Text>Current result: {result.toFixed(4)}</Text>
188 | <Text>Progress: {progressLine}</Text>
189 | </App>
190 | ```
191 |
192 | %-EVENT-END
193 |
194 | %-EVENT-START process
195 |
196 | The parameter of the event handler is an object with these properties:
197 | - `item`: the item to process
198 | - `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component. You can pass this ID to some API methods (for example, to `remove`).
199 | - `processItemContext`: A context object (initially empty) that you can use to add some context-specific information to the item. The event handlers of other events will see this information as the item being processed conveys it.
200 | - `reportProgress`: A function you can use to report the progress. Invoke this method with an argument that the `progressFeedback` component's template will utilize.
201 |
202 | See the example in the [Using Queue](#using-queue) section.
203 |
204 | %-EVENT-END
205 |
206 | %-EVENT-START processError
207 |
208 | - `item`: the item to process
209 | - `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component. You can pass this ID to some API methods (for example, to `remove`).
210 | - `processItemContext`: A context object (initially empty) that you can use to add some context-specific information to the item. The event handlers of other events will see this information as the item being processed conveys it.
211 |
212 | If the event handler returns false, the queue does not sign the error in the UI. With other return values (including no return value), the queue displays the error.
213 |
214 | The following sample generates an error for every fourth item, and gives an error feedback with the `processError` event handler:
215 |
216 | ```xmlui-pg
217 | ---app copy {10-12, 17} display name="Example: processError"
218 | <App
219 | var.queued="{0}"
220 | var.progressLine=""
221 | var.result="{0}">
222 | <Button
223 | label="Add a new item to the queue"
224 | onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
225 | <Queue id="myQueue"
226 | onProcess="processing => {
227 | if (progressLine.length % 4 === 3) {
228 | throw 'Item cannot be processed';
229 | }
230 | result += processing.item;
231 | delay(1000);
232 | }"
233 | onDidProcess="progressLine += ' ok!'"
234 | onProcessError="progressLine += ' canceled'" >
235 | <property name="resultFeedback">
236 | <Text value="{result.toFixed(4)}" />
237 | </property>
238 | </Queue>
239 | <Text>Items queued: {queued}</Text>
240 | <Text>Current result: {result.toFixed(4)}</Text>
241 | <Text>Progress: {progressLine}</Text>
242 | </App>
243 | ---desc
244 | Click the button several times to see how processing errors are handled in the UI.
245 | ```
246 |
247 | %-EVENT-END
248 |
249 | %-EVENT-START willProcess
250 |
251 | This event is fired before the next item in the queue gets processed. If the event handler returns `false`, the queue skips processing that item. With other return values (including no return value), the queue continues processing the item.
252 |
253 | The parameter of the event handler is an object with these properties:
254 | - `item`: the item to process
255 | - `actionItemId`: The unique (internal) ID of the item being processed, as generated by the `Queue` component. You can pass this ID to some API methods (for example, to `remove`).
256 | - `processItemContext`: A context object (initially empty) that you can use to add some context-specific information to the item. The event handlers of other events will see this information as the item being processed conveys it.
257 |
258 | The following sample declares a `willProcess` event handler that will skip processing (summing) items less than 0.5; the handler counts the number of skipped items.
259 |
260 | ```xmlui-pg
261 | ---app copy {9} display name="Example: willProcess"
262 | <App
263 | var.queued="{0}"
264 | var.skipped="{0}"
265 | var.result="{0}">
266 | <Button
267 | label="Add a new item to the queue"
268 | onClick="{myQueue.enqueueItem(Math.random()); queued++; }" />
269 | <Queue id="myQueue"
270 | onWillProcess="toProcess => toProcess.item < 0.5 ? (skipped++, false) : true"
271 | onProcess="processing => {
272 | result += processing.item;
273 | delay(1000);
274 | }">
275 | <property name="resultFeedback">
276 | <Text value="{result.toFixed(4)}" />
277 | </property>
278 | </Queue>
279 | <Text>Items queued: {queued}</Text>
280 | <Text>Items skipped: {skipped}</Text>
281 | <Text>Current result: {result.toFixed(4)}</Text>
282 | </App>
283 | ---desc
284 | Click the button several times and see how the number of skipped items increments.
285 | ```
286 |
287 | %-EVENT-END
288 |
```
--------------------------------------------------------------------------------
/docs/content/components/Heading.md:
--------------------------------------------------------------------------------
```markdown
1 | # Heading [#heading]
2 |
3 | `Heading` displays hierarchical text headings with semantic importance levels from H1 to H6, following HTML heading standards. It provides text overflow handling, anchor link generation, and integrates with [TableOfContents](/components/TableOfContents).
4 |
5 | **Key features:**
6 | - **Semantic levels**: Choose from h1 through h6 for proper document structure and accessibility
7 | - **Text overflow control**: Automatic ellipses and line limiting for long headings
8 | - **Anchor generation**: Optional hover anchors for deep linking to specific sections
9 |
10 | For the shorthand versions see: [H1](./H1), [H2](./H2), [H3](./H3), [H4](./H4), [H5](./H5), [H6](./H6).
11 |
12 | ```xmlui-pg copy display name="Example: Headings with levels"
13 | <App>
14 | <Heading level="h1" value="Heading Level 1" />
15 | <Text>Text following H1</Text>
16 | <Heading level="h2" value="Heading Level 2" />
17 | <Text>Text following H2</Text>
18 | <Heading level="h3" value="Heading Level 3" />
19 | <Text>Text following H3</Text>
20 | <Heading level="h4" value="Heading Level 4" />
21 | <Text>Text following H4</Text>
22 | <Heading level="h5" value="Heading Level 5" />
23 | <Text>Text following H5</Text>
24 | <Heading level="h6" value="Heading Level 6" />
25 | <Text>Text following H6</Text>
26 | </App>
27 | ```
28 |
29 | ## Properties [#properties]
30 |
31 | ### `ellipses` (default: true) [#ellipses-default-true]
32 |
33 | This property indicates whether ellipses should be displayed (`true`) when the heading text is cropped or not (`false`).
34 |
35 | ```xmlui-pg copy {4} display name="Example: ellipses"
36 | <App>
37 | <VStack width="200px">
38 | <H3
39 | backgroundColor="cyan"
40 | maxLines="1"
41 | ellipses="false">
42 | Though this long text does is about to crop!
43 | </H3>
44 | <H3
45 | backgroundColor="cyan"
46 | maxLines="1">
47 | Though this long text does is about to crop!
48 | </H3>
49 | </VStack>
50 | </App>
51 | ```
52 |
53 | ### `level` (default: "h1") [#level-default-h1]
54 |
55 | This property sets the visual significance (level) of the heading. Accepts multiple formats: `h1`-`h6`, `H1`-`H6`, or `1`-`6`.Invalid values default to `h1`.
56 |
57 | Available values: `h1` **(default)**, `h2`, `h3`, `h4`, `h5`, `h6`, `H1`, `H2`, `H3`, `H4`, `H5`, `H6`, `1`, `2`, `3`, `4`, `5`, `6`
58 |
59 | | Value | Description |
60 | | :---- | :---------------------------------------------------- |
61 | | `h1` | **(default)** Equivalent to the `<h1 />` HTML element |
62 | | `h2` | Equivalent to the `<h2 />` HTML element |
63 | | `h3` | Equivalent to the `<h3 />` HTML element |
64 | | `h4` | Equivalent to the `<h4 />` HTML element |
65 | | `h5` | Equivalent to the `<h5 />` HTML element |
66 | | `h6` | Equivalent to the `<h6 />` HTML element |
67 |
68 | For a visual example, see the component description.
69 |
70 | ### `maxLines` [#maxlines]
71 |
72 | This optional property determines the maximum number of lines the component can wrap to. If there is not enough space for all of the text, the component wraps the text up to as many lines as specified. If the value is not specified, there is no limit on the number of displayed lines.
73 |
74 | ```xmlui-pg copy display name="Example: maxLines"
75 | <App>
76 | <H2
77 | maxWidth="160px"
78 | backgroundColor="cyan"
79 | value="A long heading text that will likely overflow" maxLines="2" />
80 | </App>
81 | ```
82 |
83 | ### `omitFromToc` (default: false) [#omitfromtoc-default-false]
84 |
85 | If true, this heading will be excluded from the table of contents.
86 |
87 | ### `preserveLinebreaks` (default: false) [#preservelinebreaks-default-false]
88 |
89 | This property indicates whether linebreaks should be preserved when displaying text.
90 |
91 | ```xmlui-pg copy display name="Example: preserveLinebreaks"
92 | ---app copy display {5}
93 | <App>
94 | <HStack>
95 | <H3
96 | width="200px"
97 | backgroundColor="cyan"
98 | preserveLinebreaks="true"
99 | value="(preserve) This long text
100 | with several line breaks
101 | does not fit into a viewport with a 200-pixel width." />
102 | <H3
103 | width="200px"
104 | backgroundColor="cyan"
105 | value="(do not preserve) This long text
106 | with several line breaks
107 | does not fit into a viewport with a 200-pixel width." />
108 | </HStack>
109 | </App>
110 | ---desc
111 | You can observe the effect of using `preserveLinebreaks`:
112 | ```
113 |
114 | >[!INFO]
115 | > Remember to use the `value` property of `Heading`.
116 | > Linebreaks are converted to spaces when nesting the text in the `Heading` component.
117 |
118 | ### `showAnchor` (default: false) [#showanchor-default-false]
119 |
120 | This property indicates whether an anchor link should be displayed next to the heading. If set to `true`, an anchor link will be displayed on hover next to the heading.
121 |
122 | If this property is not set, the engine checks if `showHeadingAnchors` flag is turned on in the global configuration (in the `appGlobals` configuration object) and displays the heading anchor accordingly.
123 |
124 | ### `value` [#value]
125 |
126 | This property determines the text displayed in the heading. `Heading` also accepts nested text instead of specifying the `value`. If both `value` and a nested text are used, the `value` will be displayed.
127 |
128 | ```xmlui-pg copy display name="Example: value"
129 | <App>
130 | <Heading value="This is level 3 (value)" level="h3" />
131 | <Heading level="h3">This is level 3 (child)</Heading>
132 | <Heading value="Value" level="h3"><Icon name="trash" /></Heading>
133 | </App>
134 | ```
135 |
136 | ## Events [#events]
137 |
138 | This component does not have any events.
139 |
140 | ## Exposed Methods [#exposed-methods]
141 |
142 | ### `hasOverflow` [#hasoverflow]
143 |
144 | Returns true when the displayed text overflows the bounds of this heading component.
145 |
146 | **Signature**: `hasOverflow()`
147 |
148 | ### `scrollIntoView` [#scrollintoview]
149 |
150 | Scrolls the heading into view.
151 |
152 | **Signature**: `scrollIntoView()`
153 |
154 | ## Styling [#styling]
155 |
156 | ### Theme Variables [#theme-variables]
157 |
158 | | Variable | Default Value (Light) | Default Value (Dark) |
159 | | --- | --- | --- |
160 | | [color](../styles-and-themes/common-units/#color)-anchor-Heading | *none* | *none* |
161 | | [color](../styles-and-themes/common-units/#color)-anchor-Heading | $color-surface-400 | $color-surface-400 |
162 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-H1 | *none* | *none* |
163 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-H2 | *none* | *none* |
164 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-H3 | *none* | *none* |
165 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-H4 | *none* | *none* |
166 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-H5 | *none* | *none* |
167 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-H6 | *none* | *none* |
168 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Heading | $fontFamily | $fontFamily |
169 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-H1 | *none* | *none* |
170 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-H2 | *none* | *none* |
171 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-H3 | *none* | *none* |
172 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-H4 | *none* | *none* |
173 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-H5 | *none* | *none* |
174 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-H6 | *none* | *none* |
175 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Heading | $fontWeight-bold | $fontWeight-bold |
176 | | [gap](../styles-and-themes/common-units/#size)-anchor-Heading | *none* | *none* |
177 | | [gap](../styles-and-themes/common-units/#size)-anchor-Heading | $space-2 | $space-2 |
178 | | [letterSpacing](../styles-and-themes/common-units/#size)-H1 | *none* | *none* |
179 | | [letterSpacing](../styles-and-themes/common-units/#size)-H2 | *none* | *none* |
180 | | [letterSpacing](../styles-and-themes/common-units/#size)-H3 | *none* | *none* |
181 | | [letterSpacing](../styles-and-themes/common-units/#size)-H4 | *none* | *none* |
182 | | [letterSpacing](../styles-and-themes/common-units/#size)-H5 | *none* | *none* |
183 | | [letterSpacing](../styles-and-themes/common-units/#size)-H6 | *none* | *none* |
184 | | [letterSpacing](../styles-and-themes/common-units/#size)-Heading | 0 | 0 |
185 | | [textColor](../styles-and-themes/common-units/#color)-H1 | *none* | *none* |
186 | | [textColor](../styles-and-themes/common-units/#color)-H2 | *none* | *none* |
187 | | [textColor](../styles-and-themes/common-units/#color)-H3 | *none* | *none* |
188 | | [textColor](../styles-and-themes/common-units/#color)-H4 | *none* | *none* |
189 | | [textColor](../styles-and-themes/common-units/#color)-H5 | *none* | *none* |
190 | | [textColor](../styles-and-themes/common-units/#color)-H6 | *none* | *none* |
191 | | [textColor](../styles-and-themes/common-units/#color)-Heading | inherit | inherit |
192 | | [textDecorationColor](../styles-and-themes/common-units/#color)-H1 | *none* | *none* |
193 | | [textDecorationColor](../styles-and-themes/common-units/#color)-H2 | *none* | *none* |
194 | | [textDecorationColor](../styles-and-themes/common-units/#color)-H3 | *none* | *none* |
195 | | [textDecorationColor](../styles-and-themes/common-units/#color)-H4 | *none* | *none* |
196 | | [textDecorationColor](../styles-and-themes/common-units/#color)-H5 | *none* | *none* |
197 | | [textDecorationColor](../styles-and-themes/common-units/#color)-H6 | *none* | *none* |
198 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-anchor-Heading | *none* | *none* |
199 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-anchor-Heading | underline | underline |
200 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H1 | *none* | *none* |
201 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H2 | *none* | *none* |
202 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H3 | *none* | *none* |
203 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H4 | *none* | *none* |
204 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H5 | *none* | *none* |
205 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-H6 | *none* | *none* |
206 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H1 | *none* | *none* |
207 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H2 | *none* | *none* |
208 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H3 | *none* | *none* |
209 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H4 | *none* | *none* |
210 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H5 | *none* | *none* |
211 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-H6 | *none* | *none* |
212 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H1 | *none* | *none* |
213 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H2 | *none* | *none* |
214 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H3 | *none* | *none* |
215 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H4 | *none* | *none* |
216 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H5 | *none* | *none* |
217 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-H6 | *none* | *none* |
218 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-H1 | *none* | *none* |
219 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-H2 | *none* | *none* |
220 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-H3 | *none* | *none* |
221 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-H4 | *none* | *none* |
222 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-H5 | *none* | *none* |
223 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-H6 | *none* | *none* |
224 |
```
--------------------------------------------------------------------------------
/docs/content/components/Link.md:
--------------------------------------------------------------------------------
```markdown
1 | # Link [#link]
2 |
3 | `Link` creates clickable navigation elements for internal app routes or external URLs. You can use the `label` and `icon` properties for simple text links, or embed custom components like buttons, cards, or complex layouts for rich interactive link presentations.
4 |
5 | ## Using Link [#using-link]
6 |
7 | ### `Link` Appearance [#link-appearance]
8 |
9 | You can use the `label` and `icon` properties of a `Link` to set its text and icon to display. If you want a custom appearance, you can nest your visual representation into `Link`:
10 |
11 | ```xmlui-pg copy {3-6} display name="Example: custom Link content"
12 | <App>
13 | <Link to="https://docs.xmlui.org/" target="_blank">
14 | <HStack verticalAlignment="center">
15 | <Stack width="16px" height="16px" backgroundColor="purple" />
16 | XMLUI introduction
17 | </HStack>
18 | </Link>
19 | </App>
20 | ```
21 |
22 | ## Properties [#properties]
23 |
24 | ### `active` (default: false) [#active-default-false]
25 |
26 | Indicates whether this link is active or not. If so, it will have a distinct visual appearance.
27 |
28 | ```xmlui-pg copy display name="Example: active" /active/
29 | <App>
30 | <Link>I'm an inactive link (by default)</Link>
31 | <Link active="true">I'm an active link</Link>
32 | <Link active="false">I'm an inactive link (explicit setting)</Link>
33 | </App>
34 | ```
35 |
36 | ### `enabled` (default: true) [#enabled-default-true]
37 |
38 | This boolean property value indicates whether the component responds to user events (`true`) or not (`false`).
39 |
40 | ```xmlui-pg copy display name="Example: enabled" /enabled/
41 | <App>
42 | <Link>I'm an enabled link (by default)</Link>
43 | <Link enabled="false">I'm a disabled link</Link>
44 | <Link enabled="true">I'm an enabled link (explicit setting)</Link>
45 | </App>
46 | ```
47 |
48 | ### `icon` [#icon]
49 |
50 | This property allows you to add an optional icon (specify the icon's name) to the link.
51 |
52 | ```xmlui-pg copy display name="Example: icon"
53 | <App>
54 | <Link icon="home" label="Home" />
55 | <Link icon="drive">Drives</Link>
56 | </App>
57 | ```
58 |
59 | >[!INFO]
60 | > If you want to specify paddings and gaps or put the icon to the right of the link text, use your custom link template (nest it into `Link`).
61 |
62 | ### `label` [#label]
63 |
64 | This property sets the label of the component. If not set, the component will not display a label.
65 |
66 | ### `target` [#target]
67 |
68 | This property specifies where to open the link represented by the `Link`. This property accepts the following values (in accordance with the HTML standard):
69 |
70 | Available values:
71 |
72 | | Value | Description |
73 | | --- | --- |
74 | | `_self` | The link will open in the same frame as it was clicked. |
75 | | `_blank` | The link will open in a new window or tab. |
76 | | `_parent` | The link will open in the parent frame. If no parent, behaves as _self. |
77 | | `_top` | The topmost browsing context. The link will open in the full body of the window. If no ancestors, behaves as _self. |
78 | | `_unfencedTop` | Allows embedded fenced frames to navigate the top-level frame, i.e. traversing beyond the root of the fenced frame. |
79 |
80 | The following sample opens its link in a new tab:
81 |
82 | ```xmlui-pg copy display name="Example: target"
83 | <App>
84 | <Link to="https://docs.xmlui.org/" target="_blank">
85 | Open XMLUI overview in a new tab
86 | </Link>
87 | </App>
88 | ```
89 |
90 | ### `to` [#to]
91 |
92 | This property defines the URL of the link. If the value is not defined, the link cannot be activated.
93 |
94 | ## Events [#events]
95 |
96 | ### `click` [#click]
97 |
98 | This event is triggered when the link is clicked.
99 |
100 | ## Exposed Methods [#exposed-methods]
101 |
102 | This component does not expose any methods.
103 |
104 | ## Styling [#styling]
105 |
106 | ### Theme Variables [#theme-variables]
107 |
108 | | Variable | Default Value (Light) | Default Value (Dark) |
109 | | --- | --- | --- |
110 | | [backgroundColor](../styles-and-themes/common-units/#color)-Link | *none* | *none* |
111 | | [border](../styles-and-themes/common-units/#border)-Link | 0px solid $borderColor | 0px solid $borderColor |
112 | | [borderBottom](../styles-and-themes/common-units/#border)-Link | *none* | *none* |
113 | | [borderBottomColor](../styles-and-themes/common-units/#color)-Link | *none* | *none* |
114 | | [borderBottomStyle](../styles-and-themes/common-units/#border-style)-Link | *none* | *none* |
115 | | [borderBottomWidth](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
116 | | [borderColor](../styles-and-themes/common-units/#color)-Link | *none* | *none* |
117 | | [borderEndEndRadius](../styles-and-themes/common-units/#border-rounding)-Link | *none* | *none* |
118 | | [borderEndStartRadius](../styles-and-themes/common-units/#border-rounding)-Link | *none* | *none* |
119 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Link | *none* | *none* |
120 | | [borderHorizontalColor](../styles-and-themes/common-units/#color)-Link | *none* | *none* |
121 | | [borderHorizontalStyle](../styles-and-themes/common-units/#border-style)-Link | *none* | *none* |
122 | | [borderHorizontalWidth](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
123 | | [borderLeft](../styles-and-themes/common-units/#border)-Link | *none* | *none* |
124 | | [color](../styles-and-themes/common-units/#color)-Link | *none* | *none* |
125 | | [borderLeftStyle](../styles-and-themes/common-units/#border-style)-Link | *none* | *none* |
126 | | [borderLeftWidth](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
127 | | [borderRight](../styles-and-themes/common-units/#border)-Link | *none* | *none* |
128 | | [color](../styles-and-themes/common-units/#color)-Link | *none* | *none* |
129 | | [borderRightStyle](../styles-and-themes/common-units/#border-style)-Link | *none* | *none* |
130 | | [borderRightWidth](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
131 | | [borderStartEndRadius](../styles-and-themes/common-units/#border-rounding)-Link | *none* | *none* |
132 | | [borderStartStartRadius](../styles-and-themes/common-units/#border-rounding)-Link | *none* | *none* |
133 | | [borderStyle](../styles-and-themes/common-units/#border-style)-Link | *none* | *none* |
134 | | [borderTop](../styles-and-themes/common-units/#border)-Link | *none* | *none* |
135 | | [borderTopColor](../styles-and-themes/common-units/#color)-Link | *none* | *none* |
136 | | [borderTopStyle](../styles-and-themes/common-units/#border-style)-Link | *none* | *none* |
137 | | [borderTopWidth](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
138 | | [borderHorizontal](../styles-and-themes/common-units/#border)-Link | *none* | *none* |
139 | | [borderVerticalColor](../styles-and-themes/common-units/#color)-Link | *none* | *none* |
140 | | [borderVerticalStyle](../styles-and-themes/common-units/#border-style)-Link | *none* | *none* |
141 | | [borderVerticalWidth](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
142 | | [borderWidth](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
143 | | [direction](../styles-and-themes/layout-props#direction)-Link | *none* | *none* |
144 | | [fontFamily](../styles-and-themes/common-units/#fontFamily)-Link | *none* | *none* |
145 | | [fontSize](../styles-and-themes/common-units/#size)-Link | inherit | inherit |
146 | | [fontStretch](../styles-and-themes/common-units/#fontStretch)-Link | *none* | *none* |
147 | | [fontStyle](../styles-and-themes/common-units/#fontStyle)-Link | *none* | *none* |
148 | | [fontVariant](../styles-and-themes/common-units/#font-variant)-Link | *none* | *none* |
149 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Link | *none* | *none* |
150 | | [fontWeight](../styles-and-themes/common-units/#fontWeight)-Link--active | $fontWeight-bold | $fontWeight-bold |
151 | | [gap](../styles-and-themes/common-units/#size)-icon-Link | $gap-tight | $gap-tight |
152 | | [letterSpacing](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
153 | | [lineBreak](../styles-and-themes/common-units/#line-break)-Link | *none* | *none* |
154 | | [lineHeight](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
155 | | [outlineColor](../styles-and-themes/common-units/#color)-Link--focus | $outlineColor--focus | $outlineColor--focus |
156 | | [outlineOffset](../styles-and-themes/common-units/#size)-Link--focus | $outlineOffset--focus | $outlineOffset--focus |
157 | | [outlineStyle](../styles-and-themes/common-units/#border)-Link--focus | $outlineStyle--focus | $outlineStyle--focus |
158 | | [outlineWidth](../styles-and-themes/common-units/#size)-Link--focus | $outlineWidth--focus | $outlineWidth--focus |
159 | | [padding](../styles-and-themes/common-units/#size)-icon-Link | $space-0_5 | $space-0_5 |
160 | | [padding](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
161 | | [paddingBottom](../styles-and-themes/common-units/#size)-icon-Link | *none* | *none* |
162 | | [paddingBottom](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
163 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-icon-Link | *none* | *none* |
164 | | [paddingHorizontal](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
165 | | [paddingLeft](../styles-and-themes/common-units/#size)-icon-Link | *none* | *none* |
166 | | [paddingLeft](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
167 | | [paddingRight](../styles-and-themes/common-units/#size)-icon-Link | *none* | *none* |
168 | | [paddingRight](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
169 | | [paddingTop](../styles-and-themes/common-units/#size)-icon-Link | *none* | *none* |
170 | | [paddingTop](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
171 | | [paddingVertical](../styles-and-themes/common-units/#size)-icon-Link | *none* | *none* |
172 | | [paddingVertical](../styles-and-themes/common-units/#size)-Link | *none* | *none* |
173 | | [textAlign](../styles-and-themes/common-units/#text-align)-Link | *none* | *none* |
174 | | [textAlignLast](../styles-and-themes/common-units/#text-align)-Link | *none* | *none* |
175 | | [textColor](../styles-and-themes/common-units/#color)-Link | $color-primary-500 | $color-primary-600 |
176 | | [textColor](../styles-and-themes/common-units/#color)-Link--active | $color-primary-400 | $color-primary-500 |
177 | | [textColor](../styles-and-themes/common-units/#color)-Link--hover | $color-primary-400 | $color-primary-500 |
178 | | [textColor](../styles-and-themes/common-units/#color)-Link--hover--active | $textColor-Link--active | $textColor-Link--active |
179 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Link | textDecorationColor-Link | textDecorationColor-Link |
180 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Link--active | textColor-Link--active | textColor-Link--active |
181 | | [textDecorationColor](../styles-and-themes/common-units/#color)-Link--hover | textColor-Link--hover | textColor-Link--hover |
182 | | [textDecorationLine](../styles-and-themes/common-units/#textDecoration)-Link | underline | underline |
183 | | [textDecorationStyle](../styles-and-themes/common-units/#textDecoration)-Link | solid | solid |
184 | | [textDecorationThickness](../styles-and-themes/common-units/#textDecoration)-Link | *none* | *none* |
185 | | [textIndent](../styles-and-themes/common-units/#text-indent)-Link | *none* | *none* |
186 | | [textShadow](../styles-and-themes/common-units/#text-shadow)-Link | *none* | *none* |
187 | | [textTransform](../styles-and-themes/common-units/#textTransform)-Link | *none* | *none* |
188 | | [textUnderlineOffset](../styles-and-themes/common-units/#size)-Link | $space-1 | $space-1 |
189 | | [wordBreak](../styles-and-themes/common-units/#word-break)-Link | *none* | *none* |
190 | | [wordSpacing](../styles-and-themes/common-units/#word-spacing)-Link | *none* | *none* |
191 | | [wordWrap](../styles-and-themes/common-units/#word-wrap)-Link | *none* | *none* |
192 | | [writingMode](../styles-and-themes/common-units/#writing-mode)-Link | *none* | *none* |
193 |
194 | ### Variable Explanations [#variable-explanations]
195 |
196 | | Theme Variable | Description |
197 | | --- | --- |
198 | | **`gap-icon-Link`** | This property defines the size of the gap between the icon and the label. |
199 |
```
--------------------------------------------------------------------------------
/xmlui/src/components/NavGroup/NavGroup.spec.ts:
--------------------------------------------------------------------------------
```typescript
1 | import { expect, test } from "../../testing/fixtures";
2 |
3 | test.describe("smoke tests", { tag: "@smoke" }, () => {
4 | test("displays menuitems after click", async ({ initTestBed, page }) => {
5 | await initTestBed(`
6 | <NavGroup label="Pages">
7 | <NavLink label="Page 1" />
8 | <NavGroup label="subpages">
9 | <NavLink label="inner page 2" />
10 | <NavLink label="inner page 3" />
11 | </NavGroup>
12 | <NavLink label="Page 4" />
13 | </NavGroup>
14 | `);
15 | await page.getByRole("button", { name: "Pages", exact: true }).click();
16 |
17 | await expect(page.getByRole("menuitem")).toHaveCount(3);
18 | await expect(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
19 | await expect(page.getByRole("menuitem", { name: "subpages" })).toBeVisible();
20 | await expect(page.getByRole("menuitem", { name: "Page 4" })).toBeVisible();
21 |
22 | await expect(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
23 | await expect(page.getByRole("menuitem", { name: "inner page 3" })).not.toBeVisible();
24 | });
25 |
26 | test("disabled navgroup can't open", async ({ initTestBed, page }) => {
27 | await initTestBed(`
28 | <NavGroup label="Pages" enabled="false">
29 | <NavLink label="Page 1" />
30 | <NavGroup label="subpages">
31 | <NavLink label="inner page 2" />
32 | <NavLink label="inner page 3" />
33 | </NavGroup>
34 | <NavLink label="Page 4" />
35 | </NavGroup>
36 | `);
37 | const pagesBtn = page.getByRole("button", { name: "Pages", exact: true });
38 |
39 | await expect(pagesBtn).toBeDisabled();
40 | await pagesBtn.click({ force: true });
41 |
42 | await expect(page.getByRole("menuitem", { name: "Page 1" })).not.toBeVisible();
43 | await expect(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
44 | });
45 |
46 | test("component trigger has correct aria labels", async ({ initTestBed, page }) => {
47 | await initTestBed(`<NavGroup testId="navGroup" label="NavGroup"/>`);
48 | const button = page.getByTestId("navGroup");
49 | await expect(button).toBeVisible();
50 | await expect(button).toHaveAttribute("aria-expanded", "false");
51 | await button.click();
52 | await expect(button).toHaveAttribute("aria-expanded", "true");
53 | });
54 |
55 | test("expanded in vertical layout to show link of current page", async ({
56 | initTestBed,
57 | page,
58 | }) => {
59 | await initTestBed(`
60 | <App layout="vertical">
61 | <NavPanel>
62 | <NavGroup label="Current-upper">
63 | <NavGroup label="Current">
64 | <NavLink label="link-to-current-page" to="/" />
65 | </NavGroup>
66 | </NavGroup>
67 | </NavPanel>
68 | </App>`);
69 | await expect(page.getByText("link-to-current-page")).toBeVisible();
70 | });
71 | });
72 |
73 | test("nested disabled navgroup can't open", async ({ initTestBed, page }) => {
74 | await initTestBed(`
75 | <NavGroup label="Pages" >
76 | <NavLink label="Page 1" />
77 | <NavGroup label="subpages" enabled="false">
78 | <NavLink label="inner page 2" />
79 | <NavLink label="inner page 3" />
80 | </NavGroup>
81 | <NavLink label="Page 4" />
82 | </NavGroup>
83 | `);
84 | const pagesBtn = page.getByRole("button", { name: "Pages", exact: true });
85 | await pagesBtn.click();
86 |
87 | await expect(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
88 |
89 | const subpagesBtn = page.getByRole("menuitem", { name: "subpages" });
90 |
91 | await expect(subpagesBtn).toBeDisabled();
92 |
93 | await subpagesBtn.click({ force: true });
94 |
95 | await expect(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
96 | });
97 |
98 | test("initiallyExpanded works", async ({ initTestBed, page }) => {
99 | await initTestBed(`
100 | <NavGroup label="Pages" initiallyExpanded="true">
101 | <NavLink label="Page 1" />
102 | <NavGroup label="subpages">
103 | <NavLink label="inner page 2" />
104 | <NavLink label="inner page 3" />
105 | </NavGroup>
106 | <NavLink label="Page 4" />
107 | </NavGroup>
108 | `);
109 |
110 | await expect(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
111 |
112 | await expect(page.getByRole("menuitem", { name: "inner page 2" })).not.toBeVisible();
113 | });
114 |
115 | test("nested initiallyExpanded works", async ({ initTestBed, page }) => {
116 | await initTestBed(`
117 | <Stack testId="stack">
118 | <NavGroup label="Pages" initiallyExpanded="true">
119 | <NavLink label="Page 1" />
120 | <NavGroup label="subpages" initiallyExpanded="true">
121 | <NavLink label="inner page 2" />
122 | <NavLink label="inner page 3" />
123 | </NavGroup>
124 | <NavLink label="Page 4" />
125 | </NavGroup>
126 | </Stack>
127 | `);
128 |
129 | const stack = page.getByTestId("stack");
130 | await expect(stack).toBeVisible();
131 |
132 | const items = page.getByRole("menuitem");
133 | await expect(items).toHaveCount(3);
134 | expect(items.nth(0)).toHaveText("Page 1");
135 | expect(items.nth(1)).toHaveText("subpages");
136 | expect(items.nth(2)).toHaveText("Page 4");
137 | });
138 |
139 | test("expands even without label", async ({ initTestBed, page }) => {
140 | await initTestBed(`
141 | <NavGroup >
142 | <NavLink label="Page 1" />
143 | <NavGroup label="subpages">
144 | <NavLink label="inner page 2" />
145 | <NavLink label="inner page 3" />
146 | </NavGroup>
147 | <NavLink label="Page 4" />
148 | </NavGroup>
149 | `);
150 |
151 | await expect(page.getByRole("menuitem", { name: "Page 1" })).not.toBeVisible();
152 | await page.getByRole("button").click();
153 | await expect(page.getByRole("menuitem", { name: "Page 1" })).toBeVisible();
154 | });
155 |
156 | test.describe("icon props", () => {
157 | test("icon appears", async ({ initTestBed, page }) => {
158 | const { testIcons } = await initTestBed(
159 | `<App layout="vertical">
160 | <NavPanel>
161 | <NavGroup icon="bell" label="NavGroup">
162 | <NavLink label="link" to="/" />
163 | </NavGroup>
164 | </NavPanel>
165 | </App>`,
166 | );
167 | await expect(testIcons.bellIcon).toBeVisible();
168 | });
169 |
170 | test("iconHorizontal shows in horizontal layout submenu", async ({ initTestBed, page }) => {
171 | const { testIcons } = await initTestBed(
172 | `
173 | <App layout="horizontal">
174 | <NavPanel>
175 | <NavGroup label="Send To">
176 | <NavGroup icon="users" label="Team"
177 | iconHorizontalExpanded="bell" iconHorizontalCollapsed="eye">
178 | <NavLink label="Jane" />
179 | </NavGroup>
180 | </NavGroup>
181 | </NavPanel>
182 | </App>
183 | `,
184 | );
185 |
186 | const bell = testIcons.bellIcon;
187 | const eye = testIcons.eyeIcon;
188 |
189 | await expect(bell).not.toBeVisible();
190 | await expect(eye).not.toBeVisible();
191 |
192 | await page.getByRole("button", { name: "Send to" }).click();
193 |
194 | await expect(bell).not.toBeVisible();
195 | await expect(eye).toBeVisible();
196 |
197 | await page.getByRole("menuitem", { name: "Team" }).hover();
198 |
199 | await expect(bell).toBeVisible();
200 | await expect(eye).not.toBeVisible();
201 | });
202 |
203 | test("iconVertical shows in horizontal layout top lvl navgroup", async ({
204 | initTestBed,
205 | page,
206 | }) => {
207 | const { testIcons } = await initTestBed(
208 | `
209 | <App layout="horizontal">
210 | <NavPanel>
211 | <NavGroup icon="users" label="Team"
212 | iconVerticalExpanded="bell" iconVerticalCollapsed="eye">
213 | <NavLink label="Jane" />
214 | </NavGroup>
215 | </NavPanel>
216 | </App>
217 | `,
218 | );
219 |
220 | const bell = testIcons.bellIcon;
221 | const eye = testIcons.eyeIcon;
222 |
223 | await expect(bell).not.toBeVisible();
224 | await expect(eye).toBeVisible();
225 |
226 | await page.getByText("Team").click();
227 |
228 | await expect(bell).toBeVisible();
229 | await expect(eye).not.toBeVisible();
230 | });
231 |
232 | test("iconVertical shows in vertical layout submenu", async ({ initTestBed, page }) => {
233 | const { testIcons } = await initTestBed(
234 | `
235 | <App layout="vertical">
236 | <NavPanel>
237 | <NavGroup label="Send To">
238 | <NavGroup icon="users" label="Team"
239 | iconVerticalExpanded="bell" iconVerticalCollapsed="eye">
240 | <NavLink label="Jane" />
241 | </NavGroup>
242 | </NavGroup>
243 | </NavPanel>
244 | </App>
245 | `,
246 | );
247 |
248 | const bell = testIcons.bellIcon;
249 | const eye = testIcons.eyeIcon;
250 |
251 | await expect(bell).not.toBeVisible();
252 |
253 | await page.getByText("Send to").click();
254 |
255 | await expect(bell).not.toBeVisible();
256 | await expect(eye).toBeVisible();
257 |
258 | await page.getByText("Team").click();
259 |
260 | await expect(bell).toBeVisible();
261 | await expect(eye).not.toBeVisible();
262 | });
263 | });
264 |
265 | // =============================================================================
266 | // DRAWER INTERACTION TESTS
267 | // =============================================================================
268 |
269 | test.describe("Drawer Interaction", () => {
270 | test("clicking NavGroup toggle in drawer does not close drawer", async ({
271 | initTestBed,
272 | page,
273 | }) => {
274 | // Set small viewport to trigger drawer mode
275 | await page.setViewportSize({ width: 400, height: 600 });
276 |
277 | await initTestBed(`
278 | <App layout="condensed">
279 | <AppHeader testId="appHeader"/>
280 | <NavPanel>
281 | <NavGroup label="Pages">
282 | <NavLink label="Page 1" to="/page1"/>
283 | <NavLink label="Page 2" to="/page2"/>
284 | </NavGroup>
285 | </NavPanel>
286 | <Pages fallbackPath="/">
287 | <Page url="/">
288 | <Text value="Home" />
289 | </Page>
290 | <Page url="/page1">
291 | <Text value="Page 1" />
292 | </Page>
293 | <Page url="/page2">
294 | <Text value="Page 2" />
295 | </Page>
296 | </Pages>
297 | </App>
298 | `);
299 |
300 | // Open drawer by clicking hamburger button
301 | const appHeader = page.getByTestId("appHeader");
302 | const hamburgerButton = appHeader.locator('[data-part-id="hamburger"]').first();
303 | await hamburgerButton.click();
304 |
305 | const dialog = page.getByRole("dialog");
306 | await expect(dialog).toBeVisible();
307 | // finst the first element in the dialog with a text of "Pages"
308 | const navGroupToggle = dialog.getByRole("button", { name: "Pages" });
309 | await navGroupToggle.click();
310 | await page.waitForTimeout(200);
311 | await expect(dialog).toBeVisible();
312 | // There must be a text "Page1"
313 | await expect(dialog).toContainText("Page 1");
314 | await expect(dialog).toContainText("Page 2");
315 | });
316 |
317 | test("clicking NavLink in drawer closes drawer", async ({ initTestBed, page }) => {
318 | // Set small viewport to trigger drawer mode
319 | await page.setViewportSize({ width: 400, height: 600 });
320 |
321 | await initTestBed(`
322 | <App layout="condensed">
323 | <AppHeader />
324 | <NavPanel>
325 | <NavGroup label="Pages">
326 | <NavLink label="Page 1" to="/page1"/>
327 | <NavLink label="Page 2" to="/page2"/>
328 | </NavGroup>
329 | </NavPanel>
330 | <Pages fallbackPath="/">
331 | <Page url="/">
332 | <Text value="Home" />
333 | </Page>
334 | <Page url="/page1">
335 | <Text value="Page 1 Content" />
336 | </Page>
337 | <Page url="/page2">
338 | <Text value="Page 2" />
339 | </Page>
340 | </Pages>
341 | </App>
342 | `);
343 |
344 | // Open drawer
345 | const hamburgerButton = page.locator('[data-part-id="hamburger"]');
346 | await hamburgerButton.click();
347 |
348 | const dialog = page.getByRole("dialog");
349 | await expect(dialog).toBeVisible();
350 |
351 | // Expand NavGroup
352 | const navGroupToggle = dialog.getByRole("button", { name: "Pages" });
353 | await navGroupToggle.click();
354 | await page.waitForTimeout(200);
355 |
356 | // Click a NavLink to navigate
357 | await dialog.getByRole("link", { name: "Page 1" }).click();
358 |
359 | // Verify navigation occurred
360 | await expect(page.getByText("Page 1 Content")).toBeVisible();
361 |
362 | // Verify drawer is closed
363 | await expect(dialog).not.toBeVisible();
364 | });
365 | });
366 |
```
--------------------------------------------------------------------------------
/tools/vscode/syntaxes/xmlui.tmLanguage.json:
--------------------------------------------------------------------------------
```json
1 | {
2 | "name": "xmlui",
3 | "scopeName": "source.xmlui",
4 | "patterns": [{ "include": "#root" }],
5 | "repository": {
6 | "root": {
7 | "patterns": [
8 | { "include": "#comments" },
9 | { "include": "#helperTag" },
10 | { "include": "#componentTag" },
11 | { "include": "#entity" },
12 | { "include": "#textWithBindingExpr" },
13 | {
14 | "begin": "(<!\\[)(CDATA)(\\[)",
15 | "beginCaptures": {
16 | "1": { "name": "punctuation.definition.tag.xmlui" },
17 | "2": { "name": "storage.xmlui" },
18 | "3": { "name": "punctuation.definition.tag.xmlui" }
19 | },
20 | "end": "]]>",
21 | "endCaptures": {
22 | "0": { "name": "punctuation.definition.tag.xmlui" }
23 | },
24 | "contentName": "string.unquoted.cdata.xmlui"
25 | }
26 | ]
27 | },
28 | "methodTag": {
29 | "begin": "(<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(method)",
30 | "beginCaptures": {
31 | "1": { "name": "punctuation.definition.tag.xmlui" },
32 | "2": { "name": "keyword.operator.namespace.xmlui" },
33 | "3": { "name": "entity.name.tag.localname.xmlui" }
34 | },
35 | "endCaptures": {
36 | "0": { "name": "punctuation.definition.tag.xmlui" }
37 | },
38 | "applyEndPatternLast": "1",
39 | "patterns": [
40 | { "include": "#comments" },
41 | { "include": "#valueAttributeScriptInside" },
42 | { "include": "#attribute" },
43 | {
44 | "begin": "(?<!/|(?:/\\s*(?:method))\\s*)>",
45 | "beginCaptures": {
46 | "0": {
47 | "name": "punctuation.definition.tag.xmlui"
48 | }
49 | },
50 | "endCaptures": {
51 | "1": { "name": "punctuation.definition.tag.xmlui" },
52 | "2": { "name": "keyword.operator.namespace.xmlui" },
53 | "3": { "name": "entity.name.tag.localname.xmlui" }
54 | },
55 | "contentName": "meta.embedded.block.javascript",
56 | "patterns": [{ "include": "source.js" }],
57 | "end": "(</)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(method)(?=\\s*>)"
58 | }
59 | ],
60 | "end": "/?>"
61 | },
62 | "eventTag": {
63 | "begin": "(<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(event)",
64 | "beginCaptures": {
65 | "1": { "name": "punctuation.definition.tag.xmlui" },
66 | "2": { "name": "keyword.operator.namespace.xmlui" },
67 | "3": { "name": "entity.name.tag.localname.xmlui" }
68 | },
69 | "endCaptures": {
70 | "0": { "name": "punctuation.definition.tag.xmlui" }
71 | },
72 | "applyEndPatternLast": "1",
73 | "patterns": [
74 | { "include": "#comments" },
75 | { "include": "#valueAttributeScriptInside" },
76 | { "include": "#attribute" },
77 | {
78 | "begin": "(?<!/|(?:/\\s*event)\\s*)(>)",
79 | "beginCaptures": {
80 | "0": {
81 | "name": "punctuation.definition.tag.xmlui"
82 | }
83 | },
84 | "endCaptures": {
85 | "1": { "name": "punctuation.definition.tag.xmlui" },
86 | "2": { "name": "keyword.operator.namespace.xmlui" },
87 | "3": { "name": "entity.name.tag.localname.xmlui" }
88 | },
89 | "patterns": [
90 | { "include": "#comments" },
91 | { "include": "#componentTag" },
92 | { "include": "source.js" }
93 | ],
94 | "end": "(</)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(event)(?=\\s*>)"
95 | }
96 | ],
97 | "end": ">"
98 | },
99 | "fieldTag": {
100 | "begin": "(<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(field)",
101 | "beginCaptures": {
102 | "1": { "name": "punctuation.definition.tag.xmlui" },
103 | "2": { "name": "keyword.operator.namespace.xmlui" },
104 | "3": { "name": "entity.name.tag.localname.xmlui" }
105 | },
106 | "endCaptures": {
107 | "0": { "name": "punctuation.definition.tag.xmlui" }
108 | },
109 | "applyEndPatternLast": "1",
110 | "patterns": [
111 | { "include": "#comments" },
112 | { "include": "#valueAttributeScriptInside" },
113 | { "include": "#attribute" },
114 | {
115 | "begin": "(?<!/|(?:/\\s*field)\\s*)(>)",
116 | "beginCaptures": {
117 | "0": {
118 | "name": "punctuation.definition.tag.xmlui"
119 | }
120 | },
121 | "endCaptures": {
122 | "1": { "name": "punctuation.definition.tag.xmlui" },
123 | "2": { "name": "keyword.operator.namespace.xmlui" },
124 | "3": { "name": "entity.name.tag.localname.xmlui" }
125 | },
126 | "patterns": [
127 | { "include": "#comments" },
128 | { "include": "#componentTag" },
129 | { "include": "source.js" }
130 | ],
131 | "end": "(</)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(field)(?=\\s*>)"
132 | }
133 | ],
134 | "end": ">"
135 | },
136 | "itemTag": {
137 | "begin": "(<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(item)",
138 | "beginCaptures": {
139 | "1": { "name": "punctuation.definition.tag.xmlui" },
140 | "2": { "name": "keyword.operator.namespace.xmlui" },
141 | "3": { "name": "entity.name.tag.localname.xmlui" }
142 | },
143 | "endCaptures": {
144 | "0": { "name": "punctuation.definition.tag.xmlui" }
145 | },
146 | "applyEndPatternLast": "1",
147 | "patterns": [
148 | { "include": "#comments" },
149 | { "include": "#valueAttributeScriptInside" },
150 | { "include": "#attribute" },
151 | {
152 | "begin": "(?<!/|(?:/\\s*item)\\s*)(>)",
153 | "beginCaptures": {
154 | "0": {
155 | "name": "punctuation.definition.tag.xmlui"
156 | }
157 | },
158 | "endCaptures": {
159 | "1": { "name": "punctuation.definition.tag.xmlui" },
160 | "2": { "name": "keyword.operator.namespace.xmlui" },
161 | "3": { "name": "entity.name.tag.localname.xmlui" }
162 | },
163 | "patterns": [
164 | { "include": "#comments" },
165 | { "include": "#componentTag" },
166 | { "include": "source.js" }
167 | ],
168 | "end": "(</)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(item)(?=\\s*>)"
169 | }
170 | ],
171 | "end": ">"
172 | },
173 | "bindingExpr": {
174 | "contentName": "meta.embedded.block.javascript",
175 | "begin": "\\{",
176 | "end": "\\}",
177 | "beginCaptures": {
178 | "0": { "name": "entity.name.function.xmlui punctuation.definition.block.xmlui" }
179 | },
180 | "endCaptures": {
181 | "0": { "name": "entity.name.function.xmlui punctuation.definition.block.xmlui" }
182 | },
183 | "patterns": [{ "include": "source.js" }]
184 | },
185 | "helperTag": {
186 | "patterns": [
187 | { "include": "#scriptTag" },
188 | { "include": "#eventTag" },
189 | { "include": "#fieldTag" },
190 | { "include": "#itemTag" },
191 | { "include": "#methodTag" },
192 | { "include": "#propOrVarTag" }
193 | ]
194 | },
195 | "valueAttributeScriptInside": {
196 | "patterns": [
197 | {
198 | "captures": {
199 | "1": { "name": "entity.other.attribute-name.localname.xmlui" },
200 | "2": { "name": "keyword.operator.xmlui" }
201 | },
202 | "match": "(?:^|\\s+)(value)(\\s*=)"
203 | },
204 | { "include": "#quotedStringJsInside" }
205 | ]
206 | },
207 | "scriptTag": {
208 | "begin": "(\\s*<)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)(script)(\\s*>)",
209 | "end": "(\\s*</)(\\2)(\\3)(\\s*>)",
210 | "contentName": "meta.embedded.block.javascript",
211 | "beginCaptures": {
212 | "1": { "name": "punctuation.definition.tag.xmlui" },
213 | "2": { "name": "keyword.operator.namespace.xmlui" },
214 | "3": { "name": "entity.name.function.xmlui" },
215 | "4": { "name": "punctuation.definition.tag.xmlui" }
216 | },
217 | "endCaptures": {
218 | "1": { "name": "punctuation.definition.tag.xmlui" },
219 | "2": { "name": "keyword.operator.namespace.xmlui" },
220 | "3": { "name": "entity.name.function.xmlui" },
221 | "4": { "name": "punctuation.definition.tag.xmlui" }
222 | },
223 | "patterns": [{ "include": "source.js" }]
224 | },
225 | "textWithBindingExpr": {
226 | "patterns": [{ "include": "#entity" }, { "match": "\\\\{" }, { "include": "#bindingExpr" }]
227 | },
228 | "propOrVarTag": {
229 | "begin": "(</?)([a-zA-Z_][\\w\\.\\-]*?:)?((?:variable)|(?:property)|(?:prop))",
230 | "beginCaptures": {
231 | "1": { "name": "punctuation.definition.tag.xmlui" },
232 | "2": { "name": "keyword.operator.namespace.xmlui" },
233 | "3": { "name": "entity.name.tag.localname.xmlui" }
234 | },
235 | "end": "(/?>)",
236 | "endCaptures": {
237 | "1": { "name": "punctuation.definition.tag.xmlui" }
238 | },
239 | "patterns": [{ "include": "#attribute" }, { "include": "#comments" }]
240 | },
241 | "componentTag": {
242 | "begin": "(\\s*</?)((?:[a-zA-Z_][\\w\\.\\-]*?:)?)([a-zA-Z][\\w\\.\\-]*)",
243 | "beginCaptures": {
244 | "1": { "name": "punctuation.definition.tag.xmlui" },
245 | "2": { "name": "keyword.operator.namespace.xmlui" },
246 | "3": { "name": "support.class.tag.component.xmlui" }
247 | },
248 | "end": "(/?>)",
249 | "endCaptures": {
250 | "1": { "name": "punctuation.definition.tag.xmlui" }
251 | },
252 | "patterns": [
253 | { "include": "#comments" },
254 | { "include": "#eventHandler" },
255 | { "include": "#attribute" }
256 | ]
257 | },
258 | "quotedStringJsInside": {
259 | "begin": "\"|'|`",
260 | "beginCaptures": {
261 | "0": { "name": "string.xmlui" }
262 | },
263 | "end": "\\0",
264 | "endCaptures": {
265 | "0": { "name": "string.xmlui" }
266 | },
267 | "contentName": "meta.embedded.block.javascript",
268 | "patterns": [{ "include": "source.js" }]
269 | },
270 | "entity": {
271 | "captures": {
272 | "1": { "name": "punctuation.definition.constant.xmlui" },
273 | "2": { "name": "punctuation.definition.constant.xmlui" },
274 | "3": { "name": "punctuation.definition.constant.xmlui" }
275 | },
276 | "match": "(&)((?:amp)|(?:lt)|(?:gt)|(?:quot)|(?:apos))(;)"
277 | },
278 | "eventHandler": {
279 | "patterns": [
280 | {
281 | "captures": {
282 | "1": { "name": "entity.other.attribute-name.localname.xmlui" },
283 | "2": { "name": "keyword.operator.xmlui" }
284 | },
285 | "match": "(?:^|\\s+)(on[A-Z][-\\w.:$]*)(\\s*=)"
286 | },
287 | { "include": "#quotedStringJsInside" }
288 | ]
289 | },
290 | "attribute": {
291 | "patterns": [
292 | {
293 | "begin": "(?:^|\\s+)((?:[a-zA-Z$_][-\\w.$]*:)?)([a-zA-Z$_][-\\w.$]*)(\\s*=\\s*)(['\"`])",
294 | "end": "\\4",
295 | "beginCaptures": {
296 | "1": { "name": "keyword.operator.namespace.xmlui" },
297 | "2": { "name": "entity.other.attribute-name.localname.xmlui" },
298 | "3": { "name": "keyword.operator.xmlui" },
299 | "4": { "name": "string.xmlui" }
300 | },
301 | "endCaptures": {
302 | "0": { "name": "string.xmlui" }
303 | },
304 | "contentName": "string.xmlui",
305 | "patterns": [{ "include": "#textWithBindingExpr" }]
306 | },
307 | {
308 | "match": "(?:^|\\s+)((?:[a-zA-Z$_][-\\w.$]*:)?)([a-zA-Z$_][-\\w.$]*)(\\s*=\\s*)([a-zA-Z$_][-\\w.$]*)",
309 | "captures": {
310 | "1": { "name": "keyword.operator.namespace.xmlui" },
311 | "2": { "name": "entity.other.attribute-name.localname.xmlui" },
312 | "3": { "name": "keyword.operator.xmlui" },
313 | "4": { "name": "string.xmlui" }
314 | }
315 | },
316 | {
317 | "match": "(?:^|\\s+)((?:[a-zA-Z$_][-\\w.$]*:)?)([a-zA-Z$_][-\\w.$]*)",
318 | "name": "entity.other.attribute-name.localname.xmlui",
319 | "captures": {
320 | "1": { "name": "keyword.operator.namespace.xmlui" },
321 | "2": { "name": "entity.other.attribute-name.localname.xmlui" }
322 | }
323 | }
324 | ]
325 | },
326 | "comments": {
327 | "patterns": [
328 | {
329 | "begin": "<!--",
330 | "captures": {
331 | "0": {
332 | "name": "punctuation.definition.comment.xmlui"
333 | }
334 | },
335 | "end": "-->",
336 | "name": "comment.block.xmlui"
337 | }
338 | ]
339 | }
340 | }
341 | }
342 |
```