wavemaker-dev-mcp 0.1.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -51
- package/dist/index.js +131 -180
- package/dist/index.js.map +1 -1
- package/dist/layout-tools.d.ts +27 -3
- package/dist/layout-tools.d.ts.map +1 -1
- package/dist/layout-tools.js +85 -32
- package/dist/layout-tools.js.map +1 -1
- package/dist/skills/loader.d.ts +36 -0
- package/dist/skills/loader.d.ts.map +1 -0
- package/dist/skills/loader.js +107 -0
- package/dist/skills/loader.js.map +1 -0
- package/package.json +8 -4
- package/skills/components/wm-accordion-pane.md +44 -0
- package/skills/components/wm-accordion.md +43 -0
- package/skills/components/wm-alert-dialog.md +42 -0
- package/skills/components/wm-anchor.md +51 -0
- package/skills/components/wm-audio.md +41 -0
- package/skills/components/wm-button-group.md +36 -0
- package/skills/components/wm-button.md +114 -0
- package/skills/components/wm-calendar.md +54 -0
- package/skills/components/wm-card.md +60 -0
- package/skills/components/wm-carousel.md +43 -0
- package/skills/components/wm-chart.md +104 -0
- package/skills/components/wm-checkbox.md +52 -0
- package/skills/components/wm-checkboxset.md +75 -0
- package/skills/components/wm-chips.md +78 -0
- package/skills/components/wm-composite.md +30 -0
- package/skills/components/wm-confirm-dialog.md +43 -0
- package/skills/components/wm-container.md +100 -0
- package/skills/components/wm-currency.md +69 -0
- package/skills/components/wm-datatable.md +146 -0
- package/skills/components/wm-date-time.md +80 -0
- package/skills/components/wm-date.md +78 -0
- package/skills/components/wm-dialog-body.md +28 -0
- package/skills/components/wm-dialog-container.md +48 -0
- package/skills/components/wm-dialog-content.md +31 -0
- package/skills/components/wm-dialog-footer.md +28 -0
- package/skills/components/wm-dialog-header.md +43 -0
- package/skills/components/wm-dialog.md +40 -0
- package/skills/components/wm-file-upload.md +58 -0
- package/skills/components/wm-footer.md +31 -0
- package/skills/components/wm-form-field.md +81 -0
- package/skills/components/wm-form.md +58 -0
- package/skills/components/wm-grid-column.md +30 -0
- package/skills/components/wm-header.md +31 -0
- package/skills/components/wm-html.md +31 -0
- package/skills/components/wm-icon.md +40 -0
- package/skills/components/wm-iframe-dialog.md +52 -0
- package/skills/components/wm-iframe.md +35 -0
- package/skills/components/wm-label.md +45 -0
- package/skills/components/wm-left-nav.md +35 -0
- package/skills/components/wm-linear-layout-item.md +28 -0
- package/skills/components/wm-linear-layout.md +92 -0
- package/skills/components/wm-list.md +92 -0
- package/skills/components/wm-live-filter.md +50 -0
- package/skills/components/wm-live-form.md +35 -0
- package/skills/components/wm-login-dialog.md +50 -0
- package/skills/components/wm-login.md +39 -0
- package/skills/components/wm-marquee.md +31 -0
- package/skills/components/wm-menu.md +71 -0
- package/skills/components/wm-message.md +41 -0
- package/skills/components/wm-nav-item.md +28 -0
- package/skills/components/wm-nav.md +61 -0
- package/skills/components/wm-number.md +62 -0
- package/skills/components/wm-page-content.md +34 -0
- package/skills/components/wm-page-dialog.md +45 -0
- package/skills/components/wm-page-toast.md +34 -0
- package/skills/components/wm-page.md +34 -0
- package/skills/components/wm-pagination.md +62 -0
- package/skills/components/wm-panel.md +69 -0
- package/skills/components/wm-partial-container.md +32 -0
- package/skills/components/wm-picture.md +46 -0
- package/skills/components/wm-popover.md +51 -0
- package/skills/components/wm-prefab-container.md +29 -0
- package/skills/components/wm-prefab.md +35 -0
- package/skills/components/wm-progress-bar.md +42 -0
- package/skills/components/wm-progress-circle.md +45 -0
- package/skills/components/wm-radioset.md +66 -0
- package/skills/components/wm-rating.md +76 -0
- package/skills/components/wm-rich-text-editor.md +36 -0
- package/skills/components/wm-right-nav.md +32 -0
- package/skills/components/wm-search.md +66 -0
- package/skills/components/wm-select.md +129 -0
- package/skills/components/wm-slider.md +53 -0
- package/skills/components/wm-spinner.md +43 -0
- package/skills/components/wm-tab-pane.md +45 -0
- package/skills/components/wm-table.md +113 -0
- package/skills/components/wm-tabs.md +48 -0
- package/skills/components/wm-text.md +65 -0
- package/skills/components/wm-textarea.md +47 -0
- package/skills/components/wm-tile.md +34 -0
- package/skills/components/wm-time.md +63 -0
- package/skills/components/wm-top-nav.md +31 -0
- package/skills/components/wm-tree.md +41 -0
- package/skills/components/wm-upload.md +42 -0
- package/skills/components/wm-video.md +48 -0
- package/skills/components/wm-wizard.md +59 -0
- package/skills/index.json +1151 -0
- package/skills/tokens/border.md +85 -0
- package/skills/tokens/colors.md +97 -0
- package/skills/tokens/elevation.md +73 -0
- package/skills/tokens/spacing.md +89 -0
- package/skills/tokens/typography.md +88 -0
- package/dist/components.d.ts +0 -17
- package/dist/components.d.ts.map +0 -1
- package/dist/components.js +0 -67
- package/dist/components.js.map +0 -1
- package/dist/paths.d.ts +0 -43
- package/dist/paths.d.ts.map +0 -1
- package/dist/paths.js +0 -103
- package/dist/paths.js.map +0 -1
- package/dist/search.d.ts +0 -15
- package/dist/search.d.ts.map +0 -1
- package/dist/search.js +0 -130
- package/dist/search.js.map +0 -1
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmRating
|
|
3
|
+
category: input
|
|
4
|
+
import: components/input/rating
|
|
5
|
+
tags: [input, rating, data-binding, multi-select, collapsible, dropdown, form-field]
|
|
6
|
+
summary: Rating — dropdown input field bound to a dataset.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmRating
|
|
11
|
+
|
|
12
|
+
Rating — dropdown input field bound to a dataset.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmRating
|
|
18
|
+
name="rating"
|
|
19
|
+
caption="My Rating"
|
|
20
|
+
dataset={items}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Req | Default | Description |
|
|
27
|
+
|------|------|-----|---------|-------------|
|
|
28
|
+
| maxvalue | `number` | No | `5` | Maximum rating value. |
|
|
29
|
+
| name | `string` | Yes | — | The unique name of the rating widget (required). |
|
|
30
|
+
| caption | `string` | No | — | Caption text displayed alongside the rating. |
|
|
31
|
+
| readonly | `boolean` | No | — | Whether the rating is read-only. |
|
|
32
|
+
| showcaptions | `boolean` | No | — | Whether to show captions for each rating value. |
|
|
33
|
+
| iconcolor | `string` | No | — | Color of the rating icons. |
|
|
34
|
+
| iconsize | `string` | No | — | Size of the rating icons. |
|
|
35
|
+
| activeiconclass | `string` | No | `"wi wi-star"` | CSS class for the active (selected) icon. |
|
|
36
|
+
| inactiveiconclass | `string` | No | `"wi wi-star-border"` | CSS class for the inactive (unselected) icon. |
|
|
37
|
+
| setDatasetItems | `(items: RatingItem[]) => void` | No | — | Setter function for dataset items (injected by HOC). |
|
|
38
|
+
| dataset | `unknown[] \| string \| Record<string, unknown>` | No | — | The data source bound to the rating widget. |
|
|
39
|
+
| datafield | `string` | No | — | The field from the dataset to use as the data value. |
|
|
40
|
+
| displayfield | `string` | No | — | The field from the dataset to use as the display label. |
|
|
41
|
+
| displaylabel | `string` | No | — | Display label override. |
|
|
42
|
+
| displayimagesrc | `string` | No | — | The field from the dataset to use as the display image. |
|
|
43
|
+
| displayexpression | `(data: Record<string, unknown>) => string` | No | — | Custom function to compute the display text for each item. |
|
|
44
|
+
| usekeys | `boolean` | No | — | Whether to use keys as values. |
|
|
45
|
+
| orderby | `string` | No | — | Field(s) to order the dataset by. |
|
|
46
|
+
| multiple | `boolean` | No | — | Whether multiple selections are allowed. |
|
|
47
|
+
| content | `string` | No | — | Content template type. |
|
|
48
|
+
| collapsible | `boolean` | No | — | Whether the widget is collapsible. |
|
|
49
|
+
| groupby | `string` | No | — | The field to group items by. |
|
|
50
|
+
| allowempty | `boolean` | No | — | Whether to allow empty selection. |
|
|
51
|
+
| compareby | `string[]` | No | — | Fields used for comparison. |
|
|
52
|
+
| disabled | `boolean` | No | — | Whether the widget is disabled. |
|
|
53
|
+
| required | `boolean` | No | — | Whether a selection is required. |
|
|
54
|
+
| isDestroyed | `boolean` | No | — | Whether the widget has been destroyed. |
|
|
55
|
+
| widgetType | `string` | No | — | The widget type identifier. |
|
|
56
|
+
| datavalue | `string \| number` | No | — | The current selected data value. |
|
|
57
|
+
| validation | `Record<string, unknown>` | No | — | Validation configuration. |
|
|
58
|
+
| handleHeaderClick | `() => void` | No | — | Callback invoked when the header is clicked. |
|
|
59
|
+
| toggleAllHeaders | `(props: Record<string, unknown>) => void` | No | — | Callback to toggle all accordion headers. |
|
|
60
|
+
| datasetItems | `RatingItem[]` | No | — | Transformed dataset items (injected by HOC). |
|
|
61
|
+
| selectedItems | `RatingItem[]` | No | — | Currently selected items. |
|
|
62
|
+
| displayValue | `string` | No | — | Formatted display value. |
|
|
63
|
+
| value | `string \| number` | No | — | Raw value of the rating. |
|
|
64
|
+
| onblur | `() => void` | No | — | Callback invoked on blur. |
|
|
65
|
+
| groupedData | `Array<{ key: string; data: RatingItem[] }>` | No | — | Grouped dataset items. |
|
|
66
|
+
| onChange | `( event: SyntheticEvent, widget: Record<string, unknown>, newVal: string \| nu...` | No | — | Callback invoked when the rating value changes. |
|
|
67
|
+
| invokeEventCallback | `(eventName: string, eventData: Record<string, unknown>) => void` | No | — | Internal event callback. |
|
|
68
|
+
| fieldName | `string` | No | — | Field name used by the form controller. |
|
|
69
|
+
|
|
70
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
71
|
+
|
|
72
|
+
## CSS Tokens
|
|
73
|
+
|
|
74
|
+
Component-specific CSS variables: `--wm-rating-*`
|
|
75
|
+
|
|
76
|
+
See foundation-css: `src/tokens/web/components/rating/rating.json`
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmRichTextEditor
|
|
3
|
+
category: basic
|
|
4
|
+
import: components/basic/richtexteditor
|
|
5
|
+
tags: [basic, rich, text, editor, input]
|
|
6
|
+
summary: Rich Text Editor display widget.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmRichTextEditor
|
|
11
|
+
|
|
12
|
+
Rich Text Editor display widget.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmRichTextEditor
|
|
18
|
+
name="richTextEditor"
|
|
19
|
+
/>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
| Prop | Type | Req | Default | Description |
|
|
25
|
+
|------|------|-----|---------|-------------|
|
|
26
|
+
| placeholder | `string` | No | — | The placeholder text to display when the editor is empty. |
|
|
27
|
+
| readonly | `boolean` | No | `false` | If true, the editor will be in read-only mode. |
|
|
28
|
+
| showpreview | `boolean` | No | — | If true, a preview of the content will be shown. |
|
|
29
|
+
| disabled | `boolean` | No | `false` | If true, the editor will be disabled. |
|
|
30
|
+
| id | `string` | No | — | — |
|
|
31
|
+
| onBeforerender | `(event: ChangeEvent<any>, widget: Record<string, any>) => void` | No | — | Callback fired before the editor is rendered. |
|
|
32
|
+
| onChange | `(event: any, widget: any, newVal?: any, oldVal?: any) => void` | No | — | Callback fired when the editor content changes. |
|
|
33
|
+
| updatedelay | `string` | No | `10` | Delay in milliseconds before triggering an update. |
|
|
34
|
+
| fieldName | `string` | No | — | The name of the field. |
|
|
35
|
+
|
|
36
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmRightNav
|
|
3
|
+
category: layout
|
|
4
|
+
import: components/layout/rightnav
|
|
5
|
+
tags: [layout, right, nav]
|
|
6
|
+
summary: Right Nav page layout component.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmRightNav
|
|
11
|
+
|
|
12
|
+
Right Nav page layout component.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmRightNav
|
|
18
|
+
name="rightNav"
|
|
19
|
+
/>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
| Prop | Type | Req | Default | Description |
|
|
25
|
+
|------|------|-----|---------|-------------|
|
|
26
|
+
| columnwidth | `number \| string` | No | `2` | The number of columns the right panel should span. |
|
|
27
|
+
| children | `ReactNode` | No | — | — |
|
|
28
|
+
| className | `string` | No | — | — |
|
|
29
|
+
| styles | `CSSProperties` | No | — | — |
|
|
30
|
+
| id | `string` | No | — | — |
|
|
31
|
+
|
|
32
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmSearch
|
|
3
|
+
category: basic
|
|
4
|
+
import: components/basic/search
|
|
5
|
+
tags: [basic, search, input]
|
|
6
|
+
summary: Search display widget.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmSearch
|
|
11
|
+
|
|
12
|
+
Search display widget.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmSearch
|
|
18
|
+
name="search"
|
|
19
|
+
/>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
| Prop | Type | Req | Default | Description |
|
|
25
|
+
|------|------|-----|---------|-------------|
|
|
26
|
+
| searchon | `SearchOn` | No | `"typing"` | When to trigger the search: 'typing' or 'onsearchiconclick'. |
|
|
27
|
+
| showclear | `boolean \| string` | No | — | Whether to show the clear icon in the search bar. |
|
|
28
|
+
| fieldName | `string` | No | — | The field name for the search component. |
|
|
29
|
+
| debouncetime | `number` | No | `250` | The debounce time in milliseconds for the search. |
|
|
30
|
+
| searchkey | `string` | No | — | The key to search for in the dataset. |
|
|
31
|
+
| matchmode | `string` | No | — | The match mode for searching: 'startignorecase', 'anywhereignorecase', etc. |
|
|
32
|
+
| minchars | `number` | No | `1` | The minimum characters required to trigger a search. |
|
|
33
|
+
| limit | `number` | No | — | The maximum number of results to display. |
|
|
34
|
+
| placeholder | `string` | No | — | The placeholder text for the search input. |
|
|
35
|
+
| dropup | `boolean` | No | — | If true, the results dropdown will open upwards. |
|
|
36
|
+
| type | `SearchType` | No | `"search"` | The type of search component: 'search' or 'autocomplete'. |
|
|
37
|
+
| showsearchicon | `boolean` | No | `true` | Whether to show the search icon. |
|
|
38
|
+
| showbackbutton | `boolean` | No | — | Whether to show the back button (relevant for mobile layouts). |
|
|
39
|
+
| imagewidth | `string` | No | — | The width of images in the search results. |
|
|
40
|
+
| datacompletemsg | `string` | No | — | Message to show when data loading is complete. |
|
|
41
|
+
| loadingdatamsg | `string` | No | — | Message to show while data is loading. |
|
|
42
|
+
| clearsearchiconclass | `string` | No | — | CSS class for the clear search icon. |
|
|
43
|
+
| backsearchiconclass | `string` | No | — | CSS class for the back search icon. |
|
|
44
|
+
| searchiconclass | `string` | No | — | CSS class for the search icon. |
|
|
45
|
+
| navsearchbar | `boolean` | No | — | If true, the search bar will be integrated into the navigation bar. |
|
|
46
|
+
| shortcutkey | `string` | No | — | Custom shortcut key to focus the search input. |
|
|
47
|
+
| id | `string` | No | — | — |
|
|
48
|
+
| onBeforeservicecall | `(widget: any, inputData: any) => void` | No | — | Callback fired before a service call is made for searching. |
|
|
49
|
+
| onSelect | `(event: MouseEvent<HTMLLIElement>, widget: any, selectedValue: any) => void` | No | — | Callback fired when a search result is selected. |
|
|
50
|
+
| onSubmit | `(event: MouseEvent<HTMLDivElement>, widget: any) => void` | No | — | Callback fired when the search is submitted. |
|
|
51
|
+
| onClear | `(event: any, widget: any) => void` | No | — | Callback fired when search is cleared. |
|
|
52
|
+
| onSearch | `(event: MouseEvent<HTMLButtonElement>, widget: any) => void` | No | — | Callback fired when a search is triggered via icon/button. |
|
|
53
|
+
| onDatasetready | `(widget: any, data: any[]) => void` | No | — | Callback fired when the dataset is ready. |
|
|
54
|
+
| onQuerySearch | `(params: any, success: (val: any) => void, error: (err: any) => void) => void` | No | — | Callback for custom query search logic. |
|
|
55
|
+
| autofocus | `boolean` | No | — | Whether to auto-focus the search input on load. |
|
|
56
|
+
| getDisplayExpression | `(data: any) => string` | No | — | Function to get the display expression for an item. |
|
|
57
|
+
| isSearchInChips | `boolean` | No | — | Whether searching in chips is enabled. |
|
|
58
|
+
| onChange | `(event: any, widget: any, newVal?: any, oldVal?: any) => void` | No | — | Callback fired when the search value changes. |
|
|
59
|
+
|
|
60
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
61
|
+
|
|
62
|
+
## CSS Tokens
|
|
63
|
+
|
|
64
|
+
Component-specific CSS variables: `--wm-search-*`
|
|
65
|
+
|
|
66
|
+
See foundation-css: `src/tokens/web/components/search/search.json`
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmSelect
|
|
3
|
+
category: input
|
|
4
|
+
import: components/input/select
|
|
5
|
+
tags: [dropdown, select, options, form-field, single-select, multi-select, dataset, input]
|
|
6
|
+
summary: Dropdown select field bound to a dataset with display/data field mapping. Supports single and multiple selection.
|
|
7
|
+
related: [WmCombobox, WmCheckboxset, WmRadioset, WmChips]
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmSelect
|
|
11
|
+
|
|
12
|
+
Dropdown select input bound to a dataset. Supports single and multiple selection, grouping, ordering, and custom display expressions.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmSelect
|
|
18
|
+
name="roleSelect"
|
|
19
|
+
datavalue={selectedRole}
|
|
20
|
+
dataset={roles}
|
|
21
|
+
displayfield="label"
|
|
22
|
+
datafield="id"
|
|
23
|
+
placeholder="Select a role"
|
|
24
|
+
onChange={(e, widget, value) => setSelectedRole(value)}
|
|
25
|
+
/>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Key Props
|
|
29
|
+
|
|
30
|
+
| Prop | Type | Required | Default | Description |
|
|
31
|
+
|------|------|----------|---------|-------------|
|
|
32
|
+
| name | `string` | Yes | — | Widget identifier |
|
|
33
|
+
| datavalue | `string \| number \| boolean \| null \| Array` | No | — | Currently selected value(s) |
|
|
34
|
+
| dataset | `array \| string \| object` | No | — | Options source — pass an array or a variable binding string |
|
|
35
|
+
| displayfield | `string` | No | — | Field from each dataset item to show as the option label |
|
|
36
|
+
| datafield | `string` | No | — | Field from each dataset item to use as the value |
|
|
37
|
+
| placeholder | `string` | No | — | Hint text shown when no option is selected |
|
|
38
|
+
| multiple | `boolean` | No | `false` | Allow multiple selections |
|
|
39
|
+
| required | `boolean` | No | `false` | Mark field as required for form validation |
|
|
40
|
+
| disabled | `boolean` | No | `false` | Disable the field |
|
|
41
|
+
| readonly | `boolean` | No | `false` | Prevent user changes |
|
|
42
|
+
| groupby | `string` | No | — | Field to group options by |
|
|
43
|
+
| orderby | `string` | No | — | Field to sort options by |
|
|
44
|
+
| displayExpression | `string \| function` | No | — | Custom expression or fn to build the displayed label |
|
|
45
|
+
| displaylabel | `string` | No | — | Label shown above the field |
|
|
46
|
+
| error | `boolean` | No | `false` | Apply error styling |
|
|
47
|
+
| onChange | `function` | No | — | `(event, widget, newValue, prevValue) => void` |
|
|
48
|
+
| onFocus | `function` | No | — | Fires on focus |
|
|
49
|
+
| onKeyDown | `function` | No | — | Fires on key down |
|
|
50
|
+
|
|
51
|
+
## Patterns
|
|
52
|
+
|
|
53
|
+
**Bound to a WaveMaker variable (service call result):**
|
|
54
|
+
```jsx
|
|
55
|
+
<WmSelect
|
|
56
|
+
name="countrySelect"
|
|
57
|
+
dataset="Variables.getCountries.dataSet"
|
|
58
|
+
displayfield="name"
|
|
59
|
+
datafield="code"
|
|
60
|
+
placeholder="Select country"
|
|
61
|
+
/>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
**Static options array:**
|
|
65
|
+
```jsx
|
|
66
|
+
<WmSelect
|
|
67
|
+
name="statusSelect"
|
|
68
|
+
dataset={[
|
|
69
|
+
{ label: "Active", value: "active" },
|
|
70
|
+
{ label: "Inactive", value: "inactive" },
|
|
71
|
+
]}
|
|
72
|
+
displayfield="label"
|
|
73
|
+
datafield="value"
|
|
74
|
+
datavalue="active"
|
|
75
|
+
/>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
**Multi-select with grouping:**
|
|
79
|
+
```jsx
|
|
80
|
+
<WmSelect
|
|
81
|
+
name="tagSelect"
|
|
82
|
+
dataset={tags}
|
|
83
|
+
displayfield="name"
|
|
84
|
+
datafield="id"
|
|
85
|
+
multiple={true}
|
|
86
|
+
groupby="category"
|
|
87
|
+
orderby="name"
|
|
88
|
+
/>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
**Inside a form with validation:**
|
|
92
|
+
```jsx
|
|
93
|
+
<WmSelect
|
|
94
|
+
name="prioritySelect"
|
|
95
|
+
dataset={priorities}
|
|
96
|
+
displayfield="label"
|
|
97
|
+
datafield="id"
|
|
98
|
+
required={true}
|
|
99
|
+
displaylabel="Priority"
|
|
100
|
+
error={formErrors.priority}
|
|
101
|
+
/>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
**Custom display expression:**
|
|
105
|
+
```jsx
|
|
106
|
+
<WmSelect
|
|
107
|
+
name="userSelect"
|
|
108
|
+
dataset={users}
|
|
109
|
+
datafield="id"
|
|
110
|
+
displayExpression={(item) => `${item.firstName} ${item.lastName}`}
|
|
111
|
+
/>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## CSS Tokens
|
|
115
|
+
|
|
116
|
+
| Token | CSS Variable | Applied to |
|
|
117
|
+
|-------|-------------|-----------|
|
|
118
|
+
| Primary | `--wm-color-primary` | Focus border, selected state |
|
|
119
|
+
| Surface | `--wm-color-surface` | Dropdown background |
|
|
120
|
+
| On-surface | `--wm-color-on-surface` | Option text |
|
|
121
|
+
| Error | `--wm-color-error` | Error border/icon |
|
|
122
|
+
| Label large | `--wm-label-large-font-size` | Option text size |
|
|
123
|
+
|
|
124
|
+
## Notes
|
|
125
|
+
|
|
126
|
+
- If `dataset` is a string, it is treated as a WaveMaker variable binding path.
|
|
127
|
+
- When `multiple={true}`, `datavalue` will be an array of selected values.
|
|
128
|
+
- `displayfield` and `datafield` both default to the full item if omitted (works for primitive arrays).
|
|
129
|
+
- Use `error={true}` to show error styling; combine with a `WmLabel` for the validation message.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmSlider
|
|
3
|
+
category: input
|
|
4
|
+
import: components/input/slider
|
|
5
|
+
tags: [input, slider]
|
|
6
|
+
summary: Slider input field.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmSlider
|
|
11
|
+
|
|
12
|
+
Slider input field.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmSlider
|
|
18
|
+
name="slider"
|
|
19
|
+
datavalue={value}
|
|
20
|
+
/>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Props
|
|
24
|
+
|
|
25
|
+
| Prop | Type | Req | Default | Description |
|
|
26
|
+
|------|------|-----|---------|-------------|
|
|
27
|
+
| disabled | `boolean` | No | — | Whether the slider is disabled. |
|
|
28
|
+
| shortcutkey | `string` | No | — | Keyboard shortcut key to focus the slider. |
|
|
29
|
+
| readonly | `boolean` | No | — | Whether the slider is read-only. |
|
|
30
|
+
| datavalue | `number` | No | — | The bound data value of the slider. |
|
|
31
|
+
| minvalue | `number` | No | `0` | Minimum value of the slider. |
|
|
32
|
+
| maxvalue | `number` | No | `100` | Maximum value of the slider. |
|
|
33
|
+
| step | `number` | No | `1` | Step increment for the slider. |
|
|
34
|
+
| onChange | `( event: ChangeEvent<HTMLInputElement>, widget: Record<string, unknown>, newD...` | No | — | Callback invoked when the slider value changes. |
|
|
35
|
+
| invokeOnChange | `(newValue: number, $event?: ChangeEvent<HTMLInputElement>) => void` | No | — | Invokes the onChange callback propagated from form controller. |
|
|
36
|
+
| invokeOnTouched | `() => void` | No | — | Invokes the onTouched callback propagated from form controller. |
|
|
37
|
+
| invokeOnFocus | `(event: FocusEvent<HTMLElement>) => void` | No | — | Invokes the onFocus callback propagated from form controller. |
|
|
38
|
+
| invokeOnBlur | `(event: FocusEvent<HTMLElement>) => void` | No | — | Invokes the onBlur callback propagated from form controller. |
|
|
39
|
+
| displayValue | `string` | No | — | Formatted display value of the slider. |
|
|
40
|
+
| showmarkers | `boolean` | No | — | Whether to show markers on the slider track. |
|
|
41
|
+
| markerlabeltext | `string \| string[]` | No | — | Custom label text for each marker. |
|
|
42
|
+
| showicons | `boolean` | No | — | Whether to show start/end icons. |
|
|
43
|
+
| starticon | `string` | No | — | CSS class for the icon at the start of the slider. |
|
|
44
|
+
| endicon | `string` | No | — | CSS class for the icon at the end of the slider. |
|
|
45
|
+
| rangelabelposition | `"top" \| "bottom" \| "side"` | No | `"top"` | Position of range labels (min/max). |
|
|
46
|
+
|
|
47
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
48
|
+
|
|
49
|
+
## CSS Tokens
|
|
50
|
+
|
|
51
|
+
Component-specific CSS variables: `--wm-slider-*`
|
|
52
|
+
|
|
53
|
+
See foundation-css: `src/tokens/web/components/slider/slider.json`
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmSpinner
|
|
3
|
+
category: basic
|
|
4
|
+
import: components/basic/spinner
|
|
5
|
+
tags: [basic, spinner, caption, icon]
|
|
6
|
+
summary: Spinner display widget.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmSpinner
|
|
11
|
+
|
|
12
|
+
Spinner display widget.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmSpinner
|
|
18
|
+
name="spinner"
|
|
19
|
+
caption="My Spinner"
|
|
20
|
+
/>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Props
|
|
24
|
+
|
|
25
|
+
| Prop | Type | Req | Default | Description |
|
|
26
|
+
|------|------|-----|---------|-------------|
|
|
27
|
+
| caption | `string` | No | — | The message to be displayed along with the spinner. |
|
|
28
|
+
| type | `string` | No | `"icon"` | The type of spinner to display: 'icon', 'image', or any other value for a default circular progress. |
|
|
29
|
+
| servicevariabletotrack | `string` | No | — | Comma-separated names of service variables to track for loading state. |
|
|
30
|
+
| iconclass | `string` | No | `"fa fa-circle-o-notch fa-spin"` | The CSS class for the icon (effective only when type is 'icon'). |
|
|
31
|
+
| iconsize | `string` | No | — | The font size for the icon (effective only when type is 'icon'). |
|
|
32
|
+
| image | `string` | No | — | The URL of the image to use as a spinner (effective only when type is 'image'). |
|
|
33
|
+
| imagewidth | `string` | No | `"20px"` | The width of the spinner image. |
|
|
34
|
+
| imageheight | `string` | No | — | The height of the spinner image. |
|
|
35
|
+
| id | `string` | No | — | — |
|
|
36
|
+
|
|
37
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
38
|
+
|
|
39
|
+
## CSS Tokens
|
|
40
|
+
|
|
41
|
+
Component-specific CSS variables: `--wm-spinner-*`
|
|
42
|
+
|
|
43
|
+
See foundation-css: `src/tokens/web/components/spinner/spinner.json`
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmTabPane
|
|
3
|
+
category: container
|
|
4
|
+
import: components/container/tabs/tab-pane
|
|
5
|
+
tags: [container, tab, pane, caption, panel, badge]
|
|
6
|
+
summary: Tab Pane layout container.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmTabPane
|
|
11
|
+
|
|
12
|
+
Tab Pane layout container.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmTabPane
|
|
18
|
+
name="tabPane"
|
|
19
|
+
caption="My Tab Pane"
|
|
20
|
+
/>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Props
|
|
24
|
+
|
|
25
|
+
| Prop | Type | Req | Default | Description |
|
|
26
|
+
|------|------|-----|---------|-------------|
|
|
27
|
+
| caption | `string` | No | — | Tab caption/title (alternative to title). |
|
|
28
|
+
| smoothscroll | `boolean` | No | — | Enable smooth scroll when tab is selected. |
|
|
29
|
+
| content | `string` | No | — | Tab content (legacy). |
|
|
30
|
+
| heading | `string` | No | — | Tab heading (alternative to title). |
|
|
31
|
+
| title | `string` | No | — | Tab title displayed in the tab header. |
|
|
32
|
+
| disabled | `boolean` | No | `false` | Whether the tab is disabled. |
|
|
33
|
+
| badgevalue | `string \| number` | No | — | Badge value displayed in the tab header. |
|
|
34
|
+
| badgetype | `string` | No | — | Badge style variant. |
|
|
35
|
+
| paneicon | `string` | No | — | Icon class for the tab header. |
|
|
36
|
+
| isdynamic | `boolean` | No | — | Whether this pane is from dynamic tabs (injected). |
|
|
37
|
+
| index | `number` | No | — | Tab index (injected by parent). |
|
|
38
|
+
| item | `Record<string, unknown>` | No | — | Dynamic tab item data (injected for dynamic tabs). |
|
|
39
|
+
| onSelect | `( event: SyntheticEvent \| null, widgetOrProps: Record<string, unknown>, paneI...` | No | — | Called when tab is selected. |
|
|
40
|
+
| onDeselect | `( event: SyntheticEvent \| null, widgetOrProps: Record<string, unknown>, paneI...` | No | — | Called when tab is deselected. |
|
|
41
|
+
| onLoad | `(event: SyntheticEvent \| null, widgetOrProps: Record<string, unknown>) => void` | No | — | Called when tab content loads. |
|
|
42
|
+
| onHeaderClick | `(event: SyntheticEvent, props: WmTabPaneProps, paneIndex: number) => void` | No | — | Called when tab header is clicked. |
|
|
43
|
+
| renderPartial | `(props: WmTabPaneProps, onLoad?: (widget?: WmTabPaneProps) => void) => ReactNode` | No | — | Custom render function for tab content. |
|
|
44
|
+
|
|
45
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmTable
|
|
3
|
+
category: data
|
|
4
|
+
import: components/data/table
|
|
5
|
+
tags: [data, table, data-binding, pagination, editable, icon, filter]
|
|
6
|
+
summary: Table — data-bound data widget with pagination, sorting, and filtering.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmTable
|
|
11
|
+
|
|
12
|
+
Table — data-bound data widget with pagination, sorting, and filtering.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmTable
|
|
18
|
+
name="table"
|
|
19
|
+
dataset={items}
|
|
20
|
+
title="My Panel"
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
| Prop | Type | Req | Default | Description |
|
|
27
|
+
|------|------|-----|---------|-------------|
|
|
28
|
+
| editmode | `TableEditMode` | No | `"none"` | Mode for editing table data. |
|
|
29
|
+
| statehandler | `StorageType` | No | — | Storage type for persisting table state. |
|
|
30
|
+
| showrowindex | `boolean` | No | `false` | Whether to show the row index column. |
|
|
31
|
+
| showheader | `boolean` | No | `true` | Whether to show the table header. |
|
|
32
|
+
| enablesort | `boolean` | No | `true` | Whether to enable sorting on columns. |
|
|
33
|
+
| enablecolumnselection | `boolean` | No | `false` | When true, clicking column header selects/deselects the column instead of sorting. |
|
|
34
|
+
| shownavigation | `boolean` | No | `true` | Whether to show navigation controls. |
|
|
35
|
+
| showrecordcount | `boolean` | No | `false` | Whether to show the total record count. |
|
|
36
|
+
| radioselect | `boolean` | No | `false` | Whether to enable radio button selection. |
|
|
37
|
+
| radioselecttitle | `string` | No | — | Title for the radio selection column. |
|
|
38
|
+
| radioselectarialabel | `string` | No | — | Accessible label for the radio selection column. |
|
|
39
|
+
| multiselect | `boolean` | No | `false` | Whether to enable multi-selection using checkboxes. |
|
|
40
|
+
| multiselecttitle | `string` | No | — | Title for the multi-selection column. |
|
|
41
|
+
| multiselectarialabel | `string` | No | — | Accessible label for the multi-selection column. |
|
|
42
|
+
| gridfirstrowselect | `boolean` | No | `false` | Whether to select the first row by default. |
|
|
43
|
+
| isrowselectable | `boolean` | No | `true` | When true (default), clicking anywhere on row selects it. When false, only radio/checkbox column click selects. |
|
|
44
|
+
| isrowexpansionenabled | `boolean` | No | `false` | Whether row expansion is enabled. |
|
|
45
|
+
| formposition | `TableFormPosition` | No | — | Position of the form when editing. |
|
|
46
|
+
| rowClass | `string` | No | — | CSS class to apply to rows. |
|
|
47
|
+
| spacing | `TablePanelSpacing` | No | `"normal"` | Spacing between table panels. |
|
|
48
|
+
| title | `string` | No | — | Title of the table. |
|
|
49
|
+
| subheading | `string` | No | — | Subheading text for the table. |
|
|
50
|
+
| iconclass | `string` | No | — | CSS class for the table icon. |
|
|
51
|
+
| dataset | `any[]` | No | — | The collection of data items to display in the table. |
|
|
52
|
+
| navigation | `INavigation` | No | — | The type of navigation to use. |
|
|
53
|
+
| isdynamictable | `boolean` | No | — | Whether the table is dynamic. |
|
|
54
|
+
| table_reference | `string` | No | — | Reference key for the table. |
|
|
55
|
+
| formName | `string` | No | — | Name of the form associated with the table. |
|
|
56
|
+
| parentForm | `string` | No | — | Name of the parent form. |
|
|
57
|
+
| pagesize | `number` | No | `10` | Number of items per page. |
|
|
58
|
+
| navigationalign | `IAlignment` | No | — | Alignment of navigation controls. |
|
|
59
|
+
| maxsize | `number` | No | — | Maximum number of page links to show. |
|
|
60
|
+
| boundarylinks | `boolean` | No | — | Whether to show first/last page links. |
|
|
61
|
+
| allowpagesizechange | `boolean` | No | — | Whether to allow changing the page size. |
|
|
62
|
+
| pagesizeoptions | `string` | No | — | Available options for page size. |
|
|
63
|
+
| onDemandLoad | `boolean` | No | — | Whether to load data on demand. |
|
|
64
|
+
| filtermode | `TableFilterMode` | No | — | Mode for filtering table data. |
|
|
65
|
+
| searchlabel | `string` | No | — | Label for the search box. |
|
|
66
|
+
| filteronkeypress | `boolean` | No | — | Whether to filter data on every key press in the search box. |
|
|
67
|
+
| exportformat | `any[]` | No | — | Available formats for exporting data. |
|
|
68
|
+
| exportOptions | `any[]` | No | — | Options for exporting data. |
|
|
69
|
+
| exportdatasize | `number` | No | — | Maximum dataset size for export. |
|
|
70
|
+
| onBeforeexport | `(data: any) => boolean \| void` | No | — | Callback fired before exporting data. |
|
|
71
|
+
| onAfterexport | `(data: any) => void` | No | — | Callback fired after exporting data. |
|
|
72
|
+
| confirmdelete | `string` | No | — | Message to confirm record deletion. |
|
|
73
|
+
| deleteoktext | `string` | No | — | Text for the delete confirm button. |
|
|
74
|
+
| deletecanceltext | `string` | No | — | Text for the delete cancel button. |
|
|
75
|
+
| errormessage | `string` | No | — | Error message to display. |
|
|
76
|
+
| nodatamessage | `string` | No | — | Message to display when no data is available. |
|
|
77
|
+
| loadingdatamsg | `string` | No | — | Message to display while loading data. |
|
|
78
|
+
| insertmessage | `string` | No | — | Message to display after successful record insertion. |
|
|
79
|
+
| updatemessage | `string` | No | — | Message to display after successful record update. |
|
|
80
|
+
| deletemessage | `string` | No | — | Message to display after successful record deletion. |
|
|
81
|
+
| ondemandmessage | `string` | No | — | Message for on-demand loading button. |
|
|
82
|
+
| viewlessmessage | `string` | No | — | Message for view-less button. |
|
|
83
|
+
| showviewlessbutton | `boolean` | No | — | Whether to show the view-less button. |
|
|
84
|
+
| onRowDelete | `(deletedRowData: any, deletedRowIndex: number, updatedDataset: any[]) => void` | No | — | Callback fired when a row is deleted. |
|
|
85
|
+
| onRowUpdate | `(updatedRowData: any, rowIndex: number, updatedDataset: any[]) => void` | No | — | Callback fired when a row is updated. |
|
|
86
|
+
| onRowclick | `(event: any, widget: any, row: any) => void` | No | — | Callback fired when a row is clicked. |
|
|
87
|
+
| onBeforedatarender | `(widget: any, data: any, columns: any) => void` | No | — | Callback fired before data is rendered. |
|
|
88
|
+
| onDatarender | `(widget: any, data: any) => void` | No | — | Callback fired after data is rendered. |
|
|
89
|
+
| onColumnselect | `( event: MouseEvent, data: { field: string; colDef: any; data: any[] } ) => void` | No | — | Callback fired when a column is selected. |
|
|
90
|
+
| onColumndeselect | `( event: MouseEvent, data: { field: string; colDef: any; data: any[] } ) => void` | No | — | Callback fired when a column is deselected. |
|
|
91
|
+
| onSort | `(event: any, widget: any, data: any) => void` | No | — | Callback fired when data is sorted. |
|
|
92
|
+
| onBeforerowdelete | `( event: any, widget: any, row: any, options: any ) => void \| boolean \| Promi...` | No | — | Callback fired before a row is deleted. |
|
|
93
|
+
| onBeforefilter | `(widget: any, filterFields: any) => void \| boolean \| Promise<void \| boolean>` | No | — | Callback fired before filtering data. |
|
|
94
|
+
| onHeaderclick | `(event: any, widget: any, column: any) => void` | No | — | Callback fired when a header is clicked. |
|
|
95
|
+
| onRowselect | `(event: any, widget: any, row: any) => void` | No | — | Callback fired when a row is selected. |
|
|
96
|
+
| onRowdeselect | `(event: any, widget: any, row: any) => void` | No | — | Callback fired when a row is deselected. |
|
|
97
|
+
| onSetrecord | `(event: SyntheticEvent, widget: unknown, data: any, pageInfo: any) => void` | No | — | Callback fired when a record is set. |
|
|
98
|
+
| children | `ReactNode` | Yes | — | Children components (columns, actions, etc.). |
|
|
99
|
+
| onRowinsert | `(event: any, widget: any, data: any) => void` | No | — | Callback fired when a row is inserted. |
|
|
100
|
+
| onRowupdate | `(event: any, widget: any, data: any) => void` | No | — | Callback fired when a row is updated. |
|
|
101
|
+
| onRowdelete | `(event: any, widget: any, row: any) => void` | No | — | Callback fired when a row is deleted. |
|
|
102
|
+
| datasource | `LiveVariableConfig` | No | — | Data source for the table. |
|
|
103
|
+
| binddataset | `string` | No | — | Binding path for the dataset. |
|
|
104
|
+
| onSuccess | `(operation: string, data: any) => void` | No | — | Callback fired on successful operation. |
|
|
105
|
+
| onError | `(event: any, widget: any, data: any, operation: string) => void` | No | — | Callback fired on operation error. |
|
|
106
|
+
|
|
107
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
108
|
+
|
|
109
|
+
## CSS Tokens
|
|
110
|
+
|
|
111
|
+
Component-specific CSS variables: `--wm-table-*`
|
|
112
|
+
|
|
113
|
+
See foundation-css: `src/tokens/web/components/data-table/data-table.json`
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
---
|
|
2
|
+
component: WmTabs
|
|
3
|
+
category: container
|
|
4
|
+
import: components/container/tabs
|
|
5
|
+
tags: [container, tabs, data-binding, input]
|
|
6
|
+
summary: Tabs layout container.
|
|
7
|
+
generated: true
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# WmTabs
|
|
11
|
+
|
|
12
|
+
Tabs layout container.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```jsx
|
|
17
|
+
<WmTabs
|
|
18
|
+
name="tabs"
|
|
19
|
+
dataset={items}
|
|
20
|
+
/>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Props
|
|
24
|
+
|
|
25
|
+
| Prop | Type | Req | Default | Description |
|
|
26
|
+
|------|------|-----|---------|-------------|
|
|
27
|
+
| dataset | `Record<string, unknown>[]` | No | `[]` | Data source for dynamic tabs. Each item renders a tab. |
|
|
28
|
+
| defaultpaneindex | `number` | No | `0` | Index of the tab to show by default (0-based). |
|
|
29
|
+
| justified | `boolean` | No | `false` | Whether tabs are justified (equal width). |
|
|
30
|
+
| tabsposition | `TabsPosition` | No | `"top"` | Tab list position. |
|
|
31
|
+
| nodatamessage | `string` | No | `"No Data Found"` | Message shown when dataset is empty in dynamic mode. |
|
|
32
|
+
| statehandler | `StateHandler` | No | `"none"` | Where to persist selected tab index. |
|
|
33
|
+
| autotabactivation | `boolean` | No | `true` | Whether tab content activates on focus. |
|
|
34
|
+
| transition | `TabTransition` | No | `"none"` | Transition effect when switching tabs. |
|
|
35
|
+
| type | `"static" \| "dynamic"` | No | `"static"` | Tabs type: static (children) or dynamic (dataset). |
|
|
36
|
+
| iconposition | `TabIconPosition` | No | `"left"` | Icon position relative to tab label. |
|
|
37
|
+
| enablescroll | `boolean` | No | `false` | Whether to enable scroll for many tabs. |
|
|
38
|
+
| render | `( item: Record<string, unknown>, index: number, dataset: Record<string, unkno...` | No | — | Render function for dynamic tabs. Receives item, index, dataset, and isActive. |
|
|
39
|
+
| selectedindex | `number` | No | — | Controlled selected tab index (optional). |
|
|
40
|
+
| onChange | `( event: SyntheticEvent \| null, props: WmTabsProps, newPaneIndex: number, old...` | No | — | Called when the active tab changes. |
|
|
41
|
+
|
|
42
|
+
*Inherits BaseProps: `name`, `show`, `className`, `width`, `height`, `padding`, `margin`, `onClick`, and more.*
|
|
43
|
+
|
|
44
|
+
## CSS Tokens
|
|
45
|
+
|
|
46
|
+
Component-specific CSS variables: `--wm-tabs-*`
|
|
47
|
+
|
|
48
|
+
See foundation-css: `src/tokens/web/components/tabs/tabs.json`
|