fernandes-ui 0.1.4 → 0.1.6
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.
- checksums.yaml +4 -4
- data/app/assets/javascripts/ui.esm.js +0 -1
- data/app/assets/javascripts/ui.js +0 -1
- data/app/behaviors/ui/button_behavior.rb +7 -5
- data/app/behaviors/ui/button_group_behavior.rb +6 -4
- data/app/behaviors/ui/input_group_button_behavior.rb +5 -3
- data/app/components/ui/slider.rb +80 -0
- data/app/components/ui/slider_range.rb +33 -0
- data/app/components/ui/slider_thumb.rb +47 -0
- data/app/components/ui/slider_track.rb +35 -0
- data/app/javascript/ui/common.js +0 -1
- data/app/views/ui/_item.html.erb +6 -1
- data/app/views/ui/field/_label.html.erb +2 -1
- data/app/views/ui/field/_separator.html.erb +7 -1
- data/docs/components/ANNOTATIONS.md +220 -0
- data/docs/components/accordion.yml +109 -0
- data/docs/components/alert.yml +47 -0
- data/docs/components/alert_dialog.yml +151 -0
- data/docs/components/aspect_ratio.yml +37 -0
- data/docs/components/avatar.yml +55 -0
- data/docs/components/badge.yml +24 -0
- data/docs/components/breadcrumb.yml +76 -0
- data/docs/components/button.yml +56 -0
- data/docs/components/button_group.yml +67 -0
- data/docs/components/calendar.yml +166 -0
- data/docs/components/card.yml +99 -0
- data/docs/components/carousel.yml +100 -0
- data/docs/components/checkbox.yml +59 -0
- data/docs/components/collapsible.yml +74 -0
- data/docs/components/combobox.yml +21 -0
- data/docs/components/command.yml +144 -0
- data/docs/components/context_menu.yml +124 -0
- data/docs/components/dialog.yml +155 -0
- data/docs/components/drawer.yml +219 -0
- data/docs/components/dropdown_menu.yml +151 -0
- data/docs/components/empty.yml +88 -0
- data/docs/components/field.yml +81 -0
- data/docs/components/hover_card.yml +75 -0
- data/docs/components/input.yml +51 -0
- data/docs/components/input_group.yml +37 -0
- data/docs/components/input_group_addon.yml +24 -0
- data/docs/components/input_group_button.yml +30 -0
- data/docs/components/input_otp.yml +80 -0
- data/docs/components/input_otp_slot.yml +39 -0
- data/docs/components/item.yml +84 -0
- data/docs/components/kbd.yml +26 -0
- data/docs/components/label.yml +26 -0
- data/docs/components/menubar.yml +201 -0
- data/docs/components/menubar_menu.yml +21 -0
- data/docs/components/navigation_menu.yml +161 -0
- data/docs/components/pagination.yml +86 -0
- data/docs/components/popover.yml +105 -0
- data/docs/components/progress.yml +37 -0
- data/docs/components/radio_button.yml +52 -0
- data/docs/components/resizable.yml +44 -0
- data/docs/components/scroll_area.yml +76 -0
- data/docs/components/select.yml +195 -0
- data/docs/components/separator.yml +26 -0
- data/docs/components/sheet.yml +133 -0
- data/docs/components/sidebar.yml +138 -0
- data/docs/components/skeleton.yml +17 -0
- data/docs/components/sonner.yml +46 -0
- data/docs/components/spinner.yml +22 -0
- data/docs/components/switch.yml +72 -0
- data/docs/components/table.yml +32 -0
- data/docs/components/tabs.yml +126 -0
- data/docs/components/textarea.yml +41 -0
- data/docs/components/toggle.yml +92 -0
- data/docs/components/toggle_group.yml +106 -0
- data/docs/components/tooltip.yml +75 -0
- data/lib/ui/version.rb +1 -1
- metadata +61 -1
|
@@ -0,0 +1,201 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Menubar
|
|
3
|
+
slug: menubar
|
|
4
|
+
category: navigation
|
|
5
|
+
description: Menubar - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Menubar
|
|
8
|
+
description: Container for horizontal menu bar with Stimulus controller for interactivity.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: Container for menu items that appears when trigger is activated.
|
|
12
|
+
required: true
|
|
13
|
+
- name: Item
|
|
14
|
+
description: A selectable menu item.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Label
|
|
17
|
+
description: Non-interactive label/header for menu sections.
|
|
18
|
+
required: false
|
|
19
|
+
- name: Separator
|
|
20
|
+
description: Visual divider between menu items.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Shortcut
|
|
23
|
+
description: Displays keyboard shortcut hint for menu items.
|
|
24
|
+
required: false
|
|
25
|
+
- name: Sub
|
|
26
|
+
description: Container for submenu within the menubar menu.
|
|
27
|
+
required: false
|
|
28
|
+
- name: Sub Content
|
|
29
|
+
description: Container for submenu items.
|
|
30
|
+
required: true
|
|
31
|
+
- name: Sub Trigger
|
|
32
|
+
description: Menu item that opens a submenu.
|
|
33
|
+
required: true
|
|
34
|
+
- name: Trigger
|
|
35
|
+
description: Button that toggles the menu content open/closed.
|
|
36
|
+
required: true
|
|
37
|
+
features:
|
|
38
|
+
- Custom styling with Tailwind classes
|
|
39
|
+
- ARIA attributes for accessibility
|
|
40
|
+
- Keyboard navigation with arrow keys
|
|
41
|
+
- Click outside to close
|
|
42
|
+
api:
|
|
43
|
+
Menubar:
|
|
44
|
+
description: Container for horizontal menu bar with Stimulus controller for interactivity.
|
|
45
|
+
parameters:
|
|
46
|
+
- name: loop
|
|
47
|
+
type: Boolean
|
|
48
|
+
default: 'false'
|
|
49
|
+
description: The loop
|
|
50
|
+
- name: aria_label
|
|
51
|
+
type: String
|
|
52
|
+
default: nil
|
|
53
|
+
description: The aria label
|
|
54
|
+
data_attributes: []
|
|
55
|
+
css_variables: []
|
|
56
|
+
Content:
|
|
57
|
+
description: Container for menu items that appears when trigger is activated.
|
|
58
|
+
parameters:
|
|
59
|
+
- name: align
|
|
60
|
+
type: String
|
|
61
|
+
default: start
|
|
62
|
+
description: Alignment within container
|
|
63
|
+
- name: side
|
|
64
|
+
type: String
|
|
65
|
+
default: bottom
|
|
66
|
+
description: Which side to display on
|
|
67
|
+
data_attributes: []
|
|
68
|
+
css_variables: []
|
|
69
|
+
Item:
|
|
70
|
+
description: A selectable menu item.
|
|
71
|
+
parameters:
|
|
72
|
+
- name: variant
|
|
73
|
+
type: Symbol
|
|
74
|
+
default: ":default"
|
|
75
|
+
description: Visual style variant
|
|
76
|
+
- name: inset
|
|
77
|
+
type: Boolean
|
|
78
|
+
default: 'false'
|
|
79
|
+
description: The inset
|
|
80
|
+
- name: disabled
|
|
81
|
+
type: Boolean
|
|
82
|
+
default: 'false'
|
|
83
|
+
description: Whether the element is disabled
|
|
84
|
+
data_attributes: []
|
|
85
|
+
css_variables: []
|
|
86
|
+
Label:
|
|
87
|
+
description: Non-interactive label/header for menu sections.
|
|
88
|
+
parameters:
|
|
89
|
+
- name: inset
|
|
90
|
+
type: Boolean
|
|
91
|
+
default: 'false'
|
|
92
|
+
description: The inset
|
|
93
|
+
data_attributes: []
|
|
94
|
+
css_variables: []
|
|
95
|
+
Separator:
|
|
96
|
+
description: Visual divider between menu items.
|
|
97
|
+
parameters: []
|
|
98
|
+
data_attributes: []
|
|
99
|
+
css_variables: []
|
|
100
|
+
Shortcut:
|
|
101
|
+
description: Displays keyboard shortcut hint for menu items.
|
|
102
|
+
parameters: []
|
|
103
|
+
data_attributes: []
|
|
104
|
+
css_variables: []
|
|
105
|
+
Sub:
|
|
106
|
+
description: Container for submenu within the menubar menu.
|
|
107
|
+
parameters: []
|
|
108
|
+
data_attributes: []
|
|
109
|
+
css_variables: []
|
|
110
|
+
Sub Content:
|
|
111
|
+
description: Container for submenu items.
|
|
112
|
+
parameters: []
|
|
113
|
+
data_attributes: []
|
|
114
|
+
css_variables: []
|
|
115
|
+
Sub Trigger:
|
|
116
|
+
description: Menu item that opens a submenu.
|
|
117
|
+
parameters:
|
|
118
|
+
- name: inset
|
|
119
|
+
type: Boolean
|
|
120
|
+
default: 'false'
|
|
121
|
+
description: The inset
|
|
122
|
+
- name: disabled
|
|
123
|
+
type: Boolean
|
|
124
|
+
default: 'false'
|
|
125
|
+
description: Whether the element is disabled
|
|
126
|
+
data_attributes: []
|
|
127
|
+
css_variables: []
|
|
128
|
+
Trigger:
|
|
129
|
+
description: Button that toggles the menu content open/closed.
|
|
130
|
+
parameters:
|
|
131
|
+
- name: first
|
|
132
|
+
type: Boolean
|
|
133
|
+
default: 'false'
|
|
134
|
+
description: The first
|
|
135
|
+
data_attributes: []
|
|
136
|
+
css_variables: []
|
|
137
|
+
accessibility:
|
|
138
|
+
aria_pattern: Menu Bar
|
|
139
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
|
|
140
|
+
description: Implements the WAI-ARIA Menu Bar pattern with proper roles, states,
|
|
141
|
+
and keyboard navigation.
|
|
142
|
+
aria_attributes:
|
|
143
|
+
- aria-label
|
|
144
|
+
- role="menubar"
|
|
145
|
+
keyboard:
|
|
146
|
+
- key: Enter
|
|
147
|
+
description: Activates the focused element
|
|
148
|
+
- key: Space
|
|
149
|
+
description: Activates the focused element
|
|
150
|
+
- key: Escape
|
|
151
|
+
description: Closes the component
|
|
152
|
+
- key: ArrowDown
|
|
153
|
+
description: Moves focus to next item
|
|
154
|
+
- key: ArrowUp
|
|
155
|
+
description: Moves focus to previous item
|
|
156
|
+
- key: ArrowLeft
|
|
157
|
+
description: Moves focus left or decreases value
|
|
158
|
+
- key: ArrowRight
|
|
159
|
+
description: Moves focus right or increases value
|
|
160
|
+
- key: Home
|
|
161
|
+
description: Moves focus to first item
|
|
162
|
+
- key: End
|
|
163
|
+
description: Moves focus to last item
|
|
164
|
+
- key: Tab
|
|
165
|
+
description: Moves focus to next focusable element
|
|
166
|
+
javascript:
|
|
167
|
+
controller: ui--menubar
|
|
168
|
+
targets:
|
|
169
|
+
- trigger
|
|
170
|
+
- content
|
|
171
|
+
- item
|
|
172
|
+
values:
|
|
173
|
+
- name: open
|
|
174
|
+
type: Boolean
|
|
175
|
+
description: Controls open state
|
|
176
|
+
actions:
|
|
177
|
+
- initializeTriggers
|
|
178
|
+
- toggle
|
|
179
|
+
- openMenu
|
|
180
|
+
- closeAll
|
|
181
|
+
- trackHoveredItem
|
|
182
|
+
- selectItem
|
|
183
|
+
- openSubmenu
|
|
184
|
+
- openSubmenuWithAutoUpdate
|
|
185
|
+
- closeSubmenuAndCleanup
|
|
186
|
+
- closeSubmenu
|
|
187
|
+
- cancelSubmenuClose
|
|
188
|
+
- closeSiblingSubmenus
|
|
189
|
+
- teardownKeyboardNavigation
|
|
190
|
+
- navigateToNextMenu
|
|
191
|
+
- navigateToPreviousMenu
|
|
192
|
+
- openSubmenuWithKeyboard
|
|
193
|
+
- closeCurrentSubmenu
|
|
194
|
+
- activateCurrentItem
|
|
195
|
+
- toggleCheckbox
|
|
196
|
+
- selectRadio
|
|
197
|
+
events: []
|
|
198
|
+
related:
|
|
199
|
+
- dropdown_menu
|
|
200
|
+
- context_menu
|
|
201
|
+
- navigation_menu
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Menubar Menu
|
|
3
|
+
slug: menubar_menu
|
|
4
|
+
category: other
|
|
5
|
+
description: Menu - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Menubar Menu
|
|
8
|
+
description: Wrapper for each top-level menu in the menubar.
|
|
9
|
+
required: true
|
|
10
|
+
features:
|
|
11
|
+
- Custom styling with Tailwind classes
|
|
12
|
+
api:
|
|
13
|
+
Menubar Menu:
|
|
14
|
+
description: Wrapper for each top-level menu in the menubar.
|
|
15
|
+
parameters:
|
|
16
|
+
- name: value
|
|
17
|
+
type: String
|
|
18
|
+
default: nil
|
|
19
|
+
description: The current value
|
|
20
|
+
data_attributes: []
|
|
21
|
+
css_variables: []
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Navigation Menu
|
|
3
|
+
slug: navigation_menu
|
|
4
|
+
category: navigation
|
|
5
|
+
description: NavigationMenu - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Navigation Menu
|
|
8
|
+
description: A collection of links for navigating websites. Built on Radix UI patterns.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: Container for navigation menu content that appears when trigger is
|
|
12
|
+
activated.
|
|
13
|
+
required: true
|
|
14
|
+
- name: Item
|
|
15
|
+
description: Wrapper for individual navigation menu item.
|
|
16
|
+
required: false
|
|
17
|
+
- name: Link
|
|
18
|
+
description: Navigation link component. Supports asChild pattern for composition
|
|
19
|
+
with link_to.
|
|
20
|
+
required: false
|
|
21
|
+
- name: List
|
|
22
|
+
description: Container for navigation menu items.
|
|
23
|
+
required: false
|
|
24
|
+
- name: Trigger
|
|
25
|
+
description: Button that toggles the navigation menu content.
|
|
26
|
+
required: true
|
|
27
|
+
- name: Viewport
|
|
28
|
+
description: Container for navigation menu content when viewport mode is enabled.
|
|
29
|
+
required: false
|
|
30
|
+
features:
|
|
31
|
+
- Custom styling with Tailwind classes
|
|
32
|
+
- Keyboard navigation with arrow keys
|
|
33
|
+
- Click outside to close
|
|
34
|
+
- Animation support
|
|
35
|
+
api:
|
|
36
|
+
Navigation Menu:
|
|
37
|
+
description: A collection of links for navigating websites. Built on Radix UI
|
|
38
|
+
patterns.
|
|
39
|
+
parameters:
|
|
40
|
+
- name: viewport
|
|
41
|
+
type: Boolean
|
|
42
|
+
default: 'true'
|
|
43
|
+
description: The viewport
|
|
44
|
+
- name: delay_duration
|
|
45
|
+
type: Integer
|
|
46
|
+
default: '200'
|
|
47
|
+
description: The delay duration
|
|
48
|
+
- name: skip_delay_duration
|
|
49
|
+
type: Integer
|
|
50
|
+
default: '300'
|
|
51
|
+
description: The skip delay duration
|
|
52
|
+
data_attributes: []
|
|
53
|
+
css_variables: []
|
|
54
|
+
Content:
|
|
55
|
+
description: Container for navigation menu content that appears when trigger is
|
|
56
|
+
activated.
|
|
57
|
+
parameters:
|
|
58
|
+
- name: viewport
|
|
59
|
+
type: Boolean
|
|
60
|
+
default: 'true'
|
|
61
|
+
description: The viewport
|
|
62
|
+
data_attributes: []
|
|
63
|
+
css_variables: []
|
|
64
|
+
Item:
|
|
65
|
+
description: Wrapper for individual navigation menu item.
|
|
66
|
+
parameters:
|
|
67
|
+
- name: value
|
|
68
|
+
type: String
|
|
69
|
+
default: nil
|
|
70
|
+
description: The current value
|
|
71
|
+
data_attributes: []
|
|
72
|
+
css_variables: []
|
|
73
|
+
Link:
|
|
74
|
+
description: Navigation link component. Supports asChild pattern for composition
|
|
75
|
+
with link_to.
|
|
76
|
+
parameters:
|
|
77
|
+
- name: href
|
|
78
|
+
type: String
|
|
79
|
+
default: nil
|
|
80
|
+
description: The href
|
|
81
|
+
- name: active
|
|
82
|
+
type: Boolean
|
|
83
|
+
default: 'false'
|
|
84
|
+
description: The active
|
|
85
|
+
- name: as_child
|
|
86
|
+
type: Boolean
|
|
87
|
+
default: 'false'
|
|
88
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
89
|
+
- name: trigger_style
|
|
90
|
+
type: Boolean
|
|
91
|
+
default: 'false'
|
|
92
|
+
description: The trigger style
|
|
93
|
+
data_attributes: []
|
|
94
|
+
css_variables: []
|
|
95
|
+
List:
|
|
96
|
+
description: Container for navigation menu items.
|
|
97
|
+
parameters: []
|
|
98
|
+
data_attributes: []
|
|
99
|
+
css_variables: []
|
|
100
|
+
Trigger:
|
|
101
|
+
description: Button that toggles the navigation menu content.
|
|
102
|
+
parameters:
|
|
103
|
+
- name: first
|
|
104
|
+
type: Boolean
|
|
105
|
+
default: 'false'
|
|
106
|
+
description: The first
|
|
107
|
+
data_attributes: []
|
|
108
|
+
css_variables: []
|
|
109
|
+
Viewport:
|
|
110
|
+
description: Container for navigation menu content when viewport mode is enabled.
|
|
111
|
+
parameters: []
|
|
112
|
+
data_attributes: []
|
|
113
|
+
css_variables: []
|
|
114
|
+
accessibility:
|
|
115
|
+
aria_pattern: Navigation
|
|
116
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/navigation/
|
|
117
|
+
description: Implements the WAI-ARIA Navigation pattern with proper roles, states,
|
|
118
|
+
and keyboard navigation.
|
|
119
|
+
aria_attributes: []
|
|
120
|
+
keyboard:
|
|
121
|
+
- key: Enter
|
|
122
|
+
description: Activates the focused element
|
|
123
|
+
- key: Escape
|
|
124
|
+
description: Closes the component
|
|
125
|
+
- key: ArrowDown
|
|
126
|
+
description: Moves focus to next item
|
|
127
|
+
- key: ArrowLeft
|
|
128
|
+
description: Moves focus left or decreases value
|
|
129
|
+
- key: ArrowRight
|
|
130
|
+
description: Moves focus right or increases value
|
|
131
|
+
- key: Home
|
|
132
|
+
description: Moves focus to first item
|
|
133
|
+
- key: End
|
|
134
|
+
description: Moves focus to last item
|
|
135
|
+
- key: Tab
|
|
136
|
+
description: Moves focus to next focusable element
|
|
137
|
+
javascript:
|
|
138
|
+
controller: ui--navigation-menu
|
|
139
|
+
targets:
|
|
140
|
+
- trigger
|
|
141
|
+
- content
|
|
142
|
+
- viewport
|
|
143
|
+
- item
|
|
144
|
+
values:
|
|
145
|
+
- name: viewport
|
|
146
|
+
type: Boolean
|
|
147
|
+
description: The viewport
|
|
148
|
+
actions:
|
|
149
|
+
- initializeTriggers
|
|
150
|
+
- clearTimers
|
|
151
|
+
- toggle
|
|
152
|
+
- openMenu
|
|
153
|
+
- animateContentOut
|
|
154
|
+
- closeMenu
|
|
155
|
+
- closeAll
|
|
156
|
+
- calculateEnterMotion
|
|
157
|
+
- calculateExitMotion
|
|
158
|
+
events: []
|
|
159
|
+
related:
|
|
160
|
+
- menubar
|
|
161
|
+
- tabs
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Pagination
|
|
3
|
+
slug: pagination
|
|
4
|
+
category: navigation
|
|
5
|
+
description: Pagination component (Phlex) Container for pagination navigation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Pagination
|
|
8
|
+
description: Root container for pagination
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: Main content container
|
|
12
|
+
required: true
|
|
13
|
+
- name: Ellipsis
|
|
14
|
+
description: Indicator for truncated items
|
|
15
|
+
required: false
|
|
16
|
+
- name: Item
|
|
17
|
+
description: Individual item element
|
|
18
|
+
required: false
|
|
19
|
+
- name: Link
|
|
20
|
+
description: Clickable navigation link
|
|
21
|
+
required: false
|
|
22
|
+
- name: Next
|
|
23
|
+
description: Navigate to next item
|
|
24
|
+
required: false
|
|
25
|
+
- name: Previous
|
|
26
|
+
description: Navigate to previous item
|
|
27
|
+
required: false
|
|
28
|
+
features:
|
|
29
|
+
- Custom styling with Tailwind classes
|
|
30
|
+
- ARIA attributes for accessibility
|
|
31
|
+
api:
|
|
32
|
+
Pagination:
|
|
33
|
+
description: ''
|
|
34
|
+
parameters: []
|
|
35
|
+
data_attributes: []
|
|
36
|
+
css_variables: []
|
|
37
|
+
Content:
|
|
38
|
+
description: ''
|
|
39
|
+
parameters: []
|
|
40
|
+
data_attributes: []
|
|
41
|
+
css_variables: []
|
|
42
|
+
Ellipsis:
|
|
43
|
+
description: ''
|
|
44
|
+
parameters: []
|
|
45
|
+
data_attributes: []
|
|
46
|
+
css_variables: []
|
|
47
|
+
Item:
|
|
48
|
+
description: ''
|
|
49
|
+
parameters: []
|
|
50
|
+
data_attributes: []
|
|
51
|
+
css_variables: []
|
|
52
|
+
Link:
|
|
53
|
+
description: ''
|
|
54
|
+
parameters:
|
|
55
|
+
- name: href
|
|
56
|
+
type: String
|
|
57
|
+
default: "#"
|
|
58
|
+
description: The href
|
|
59
|
+
- name: active
|
|
60
|
+
type: Boolean
|
|
61
|
+
default: 'false'
|
|
62
|
+
description: The active
|
|
63
|
+
- name: size
|
|
64
|
+
type: String
|
|
65
|
+
default: icon
|
|
66
|
+
description: Size of the element
|
|
67
|
+
data_attributes: []
|
|
68
|
+
css_variables: []
|
|
69
|
+
Next:
|
|
70
|
+
description: ''
|
|
71
|
+
parameters:
|
|
72
|
+
- name: href
|
|
73
|
+
type: String
|
|
74
|
+
default: "#"
|
|
75
|
+
description: The href
|
|
76
|
+
data_attributes: []
|
|
77
|
+
css_variables: []
|
|
78
|
+
Previous:
|
|
79
|
+
description: ''
|
|
80
|
+
parameters:
|
|
81
|
+
- name: href
|
|
82
|
+
type: String
|
|
83
|
+
default: "#"
|
|
84
|
+
description: The href
|
|
85
|
+
data_attributes: []
|
|
86
|
+
css_variables: []
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Popover
|
|
3
|
+
slug: popover
|
|
4
|
+
category: overlay
|
|
5
|
+
description: Popover - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Popover
|
|
8
|
+
description: Container for popover trigger and content.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: The floating content panel.
|
|
12
|
+
required: true
|
|
13
|
+
- name: Trigger
|
|
14
|
+
description: Button or element that triggers the popover.
|
|
15
|
+
required: true
|
|
16
|
+
features:
|
|
17
|
+
- Custom styling with Tailwind classes
|
|
18
|
+
- Click outside to close
|
|
19
|
+
api:
|
|
20
|
+
Popover:
|
|
21
|
+
description: Container for popover trigger and content.
|
|
22
|
+
parameters:
|
|
23
|
+
- name: placement
|
|
24
|
+
type: String
|
|
25
|
+
default: bottom
|
|
26
|
+
description: The placement
|
|
27
|
+
- name: offset
|
|
28
|
+
type: Integer
|
|
29
|
+
default: '4'
|
|
30
|
+
description: The offset
|
|
31
|
+
- name: trigger
|
|
32
|
+
type: String
|
|
33
|
+
default: click
|
|
34
|
+
description: The trigger
|
|
35
|
+
- name: hover_delay
|
|
36
|
+
type: Integer
|
|
37
|
+
default: '200'
|
|
38
|
+
description: The hover delay
|
|
39
|
+
- name: align
|
|
40
|
+
type: String
|
|
41
|
+
default: nil
|
|
42
|
+
description: Alignment within container
|
|
43
|
+
- name: side_offset
|
|
44
|
+
type: String
|
|
45
|
+
default: nil
|
|
46
|
+
description: The side offset
|
|
47
|
+
data_attributes: []
|
|
48
|
+
css_variables: []
|
|
49
|
+
Content:
|
|
50
|
+
description: The floating content panel.
|
|
51
|
+
parameters:
|
|
52
|
+
- name: side
|
|
53
|
+
type: String
|
|
54
|
+
default: bottom
|
|
55
|
+
description: Which side to display on
|
|
56
|
+
- name: align
|
|
57
|
+
type: String
|
|
58
|
+
default: center
|
|
59
|
+
description: Alignment within container
|
|
60
|
+
data_attributes: []
|
|
61
|
+
css_variables: []
|
|
62
|
+
Trigger:
|
|
63
|
+
description: Button or element that triggers the popover.
|
|
64
|
+
parameters:
|
|
65
|
+
- name: as_child
|
|
66
|
+
type: Boolean
|
|
67
|
+
default: 'false'
|
|
68
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
69
|
+
data_attributes: []
|
|
70
|
+
css_variables: []
|
|
71
|
+
accessibility:
|
|
72
|
+
aria_pattern: Dialog (Non-modal)
|
|
73
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-non-modal/
|
|
74
|
+
description: Implements the WAI-ARIA Dialog (Non-modal) pattern with proper roles,
|
|
75
|
+
states, and keyboard navigation.
|
|
76
|
+
aria_attributes: []
|
|
77
|
+
keyboard:
|
|
78
|
+
- key: Enter
|
|
79
|
+
description: Activates the focused element
|
|
80
|
+
- key: Escape
|
|
81
|
+
description: Closes the component
|
|
82
|
+
javascript:
|
|
83
|
+
controller: ui--popover
|
|
84
|
+
targets:
|
|
85
|
+
- trigger
|
|
86
|
+
- content
|
|
87
|
+
values:
|
|
88
|
+
- name: open
|
|
89
|
+
type: Boolean
|
|
90
|
+
description: Controls open state
|
|
91
|
+
actions:
|
|
92
|
+
- teardownKeyboardNavigation
|
|
93
|
+
- toggle
|
|
94
|
+
- show
|
|
95
|
+
- findTriggerElementToFocus
|
|
96
|
+
- hide
|
|
97
|
+
events:
|
|
98
|
+
- name: popover:show
|
|
99
|
+
description: Fired when popover show
|
|
100
|
+
- name: popover:hide
|
|
101
|
+
description: Fired when popover hide
|
|
102
|
+
related:
|
|
103
|
+
- tooltip
|
|
104
|
+
- hover_card
|
|
105
|
+
- dropdown_menu
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Progress
|
|
3
|
+
slug: progress
|
|
4
|
+
category: feedback
|
|
5
|
+
description: Progress - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Progress
|
|
8
|
+
description: A progress indicator component for displaying task completion or loading
|
|
9
|
+
status.
|
|
10
|
+
required: true
|
|
11
|
+
features:
|
|
12
|
+
- Custom styling with Tailwind classes
|
|
13
|
+
- Form integration
|
|
14
|
+
- ARIA attributes for accessibility
|
|
15
|
+
api:
|
|
16
|
+
Progress:
|
|
17
|
+
description: A progress indicator component for displaying task completion or
|
|
18
|
+
loading status.
|
|
19
|
+
parameters:
|
|
20
|
+
- name: value
|
|
21
|
+
type: Integer
|
|
22
|
+
default: '0'
|
|
23
|
+
description: The current value
|
|
24
|
+
data_attributes: []
|
|
25
|
+
css_variables: []
|
|
26
|
+
accessibility:
|
|
27
|
+
aria_pattern: Meter
|
|
28
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/meter/
|
|
29
|
+
description: Implements the WAI-ARIA Meter pattern with proper roles, states, and
|
|
30
|
+
keyboard navigation.
|
|
31
|
+
aria_attributes:
|
|
32
|
+
- aria-valuemin
|
|
33
|
+
- aria-valuemax
|
|
34
|
+
- aria-valuenow
|
|
35
|
+
- role="progressbar"
|
|
36
|
+
related:
|
|
37
|
+
- skeleton
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Radio Button
|
|
3
|
+
slug: radio_button
|
|
4
|
+
category: forms
|
|
5
|
+
anatomy:
|
|
6
|
+
- name: Radio Button
|
|
7
|
+
description: Root container for radio button
|
|
8
|
+
required: true
|
|
9
|
+
features:
|
|
10
|
+
- Custom styling with Tailwind classes
|
|
11
|
+
- Disabled state support
|
|
12
|
+
- ARIA attributes for accessibility
|
|
13
|
+
api:
|
|
14
|
+
Radio Button:
|
|
15
|
+
description: ''
|
|
16
|
+
parameters:
|
|
17
|
+
- name: name
|
|
18
|
+
type: String
|
|
19
|
+
default: nil
|
|
20
|
+
description: Form field name
|
|
21
|
+
- name: id
|
|
22
|
+
type: String
|
|
23
|
+
default: nil
|
|
24
|
+
description: HTML id attribute
|
|
25
|
+
- name: value
|
|
26
|
+
type: String
|
|
27
|
+
default: nil
|
|
28
|
+
description: The current value
|
|
29
|
+
- name: checked
|
|
30
|
+
type: Boolean
|
|
31
|
+
default: 'false'
|
|
32
|
+
description: Whether the element is checked
|
|
33
|
+
- name: disabled
|
|
34
|
+
type: Boolean
|
|
35
|
+
default: 'false'
|
|
36
|
+
description: Whether the element is disabled
|
|
37
|
+
- name: required
|
|
38
|
+
type: Boolean
|
|
39
|
+
default: 'false'
|
|
40
|
+
description: The required
|
|
41
|
+
data_attributes: []
|
|
42
|
+
css_variables: []
|
|
43
|
+
accessibility:
|
|
44
|
+
aria_pattern: Radio Group
|
|
45
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
|
|
46
|
+
description: Implements the WAI-ARIA Radio Group pattern with proper roles, states,
|
|
47
|
+
and keyboard navigation.
|
|
48
|
+
aria_attributes: []
|
|
49
|
+
related:
|
|
50
|
+
- toggle_group
|
|
51
|
+
- checkbox
|
|
52
|
+
- select
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Resizable
|
|
3
|
+
slug: resizable
|
|
4
|
+
category: other
|
|
5
|
+
description: ResizablePanel component (Phlex) Individual resizable panel within a
|
|
6
|
+
panel group
|
|
7
|
+
anatomy:
|
|
8
|
+
- name: Resizable Panel
|
|
9
|
+
description: Resizable Panel component part
|
|
10
|
+
required: true
|
|
11
|
+
- name: Group
|
|
12
|
+
description: Container for grouping related items
|
|
13
|
+
required: false
|
|
14
|
+
api:
|
|
15
|
+
Resizable Panel:
|
|
16
|
+
description: ''
|
|
17
|
+
parameters:
|
|
18
|
+
- name: default_size
|
|
19
|
+
type: String
|
|
20
|
+
default: nil
|
|
21
|
+
description: The default size
|
|
22
|
+
- name: min_size
|
|
23
|
+
type: String
|
|
24
|
+
default: nil
|
|
25
|
+
description: The min size
|
|
26
|
+
- name: max_size
|
|
27
|
+
type: String
|
|
28
|
+
default: nil
|
|
29
|
+
description: The max size
|
|
30
|
+
data_attributes: []
|
|
31
|
+
css_variables: []
|
|
32
|
+
Group:
|
|
33
|
+
description: ''
|
|
34
|
+
parameters:
|
|
35
|
+
- name: direction
|
|
36
|
+
type: String
|
|
37
|
+
default: horizontal
|
|
38
|
+
description: The direction
|
|
39
|
+
- name: keyboard_resize_by
|
|
40
|
+
type: Integer
|
|
41
|
+
default: '10'
|
|
42
|
+
description: The keyboard resize by
|
|
43
|
+
data_attributes: []
|
|
44
|
+
css_variables: []
|