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,124 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Context Menu
|
|
3
|
+
slug: context_menu
|
|
4
|
+
category: overlay
|
|
5
|
+
description: ContextMenu - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Context Menu
|
|
8
|
+
description: Container for context menus triggered by right-click.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: Menu items container with animations and positioning.
|
|
12
|
+
required: true
|
|
13
|
+
- name: Item
|
|
14
|
+
description: Individual menu item that can be rendered as a link or div.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Label
|
|
17
|
+
description: Non-interactive label for grouping menu items.
|
|
18
|
+
required: false
|
|
19
|
+
- name: Separator
|
|
20
|
+
description: A visual divider between menu items.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Shortcut
|
|
23
|
+
description: Displays keyboard shortcut text for a menu item.
|
|
24
|
+
required: false
|
|
25
|
+
- name: Trigger
|
|
26
|
+
description: The element that triggers the context menu on right-click.
|
|
27
|
+
required: true
|
|
28
|
+
features:
|
|
29
|
+
- Custom styling with Tailwind classes
|
|
30
|
+
- Keyboard navigation with arrow keys
|
|
31
|
+
- Click outside to close
|
|
32
|
+
api:
|
|
33
|
+
Context Menu:
|
|
34
|
+
description: Container for context menus triggered by right-click.
|
|
35
|
+
parameters: []
|
|
36
|
+
data_attributes: []
|
|
37
|
+
css_variables: []
|
|
38
|
+
Content:
|
|
39
|
+
description: Menu items container with animations and positioning.
|
|
40
|
+
parameters: []
|
|
41
|
+
data_attributes: []
|
|
42
|
+
css_variables: []
|
|
43
|
+
Item:
|
|
44
|
+
description: Individual menu item that can be rendered as a link or div.
|
|
45
|
+
parameters:
|
|
46
|
+
- name: href
|
|
47
|
+
type: String
|
|
48
|
+
default: nil
|
|
49
|
+
description: The href
|
|
50
|
+
- name: inset
|
|
51
|
+
type: Boolean
|
|
52
|
+
default: 'false'
|
|
53
|
+
description: The inset
|
|
54
|
+
- name: variant
|
|
55
|
+
type: String
|
|
56
|
+
default: default
|
|
57
|
+
description: Visual style variant
|
|
58
|
+
data_attributes: []
|
|
59
|
+
css_variables: []
|
|
60
|
+
Label:
|
|
61
|
+
description: Non-interactive label for grouping menu items.
|
|
62
|
+
parameters:
|
|
63
|
+
- name: inset
|
|
64
|
+
type: Boolean
|
|
65
|
+
default: 'false'
|
|
66
|
+
description: The inset
|
|
67
|
+
data_attributes: []
|
|
68
|
+
css_variables: []
|
|
69
|
+
Separator:
|
|
70
|
+
description: A visual divider between menu items.
|
|
71
|
+
parameters: []
|
|
72
|
+
data_attributes: []
|
|
73
|
+
css_variables: []
|
|
74
|
+
Shortcut:
|
|
75
|
+
description: Displays keyboard shortcut text for a menu item.
|
|
76
|
+
parameters: []
|
|
77
|
+
data_attributes: []
|
|
78
|
+
css_variables: []
|
|
79
|
+
Trigger:
|
|
80
|
+
description: The element that triggers the context menu on right-click.
|
|
81
|
+
parameters: []
|
|
82
|
+
data_attributes: []
|
|
83
|
+
css_variables: []
|
|
84
|
+
accessibility:
|
|
85
|
+
aria_pattern: Menu
|
|
86
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/menu/
|
|
87
|
+
description: Implements the WAI-ARIA Menu pattern with proper roles, states, and
|
|
88
|
+
keyboard navigation.
|
|
89
|
+
aria_attributes: []
|
|
90
|
+
keyboard:
|
|
91
|
+
- key: Enter
|
|
92
|
+
description: Activates the focused element
|
|
93
|
+
- key: Escape
|
|
94
|
+
description: Closes the component
|
|
95
|
+
- key: ArrowDown
|
|
96
|
+
description: Moves focus to next item
|
|
97
|
+
- key: ArrowUp
|
|
98
|
+
description: Moves focus to previous item
|
|
99
|
+
- key: Home
|
|
100
|
+
description: Moves focus to first item
|
|
101
|
+
- key: End
|
|
102
|
+
description: Moves focus to last item
|
|
103
|
+
javascript:
|
|
104
|
+
controller: ui--context-menu
|
|
105
|
+
targets:
|
|
106
|
+
- trigger
|
|
107
|
+
- content
|
|
108
|
+
- item
|
|
109
|
+
values:
|
|
110
|
+
- name: open
|
|
111
|
+
type: Boolean
|
|
112
|
+
description: Controls open state
|
|
113
|
+
actions:
|
|
114
|
+
- open
|
|
115
|
+
- close
|
|
116
|
+
- closeAllContextMenus
|
|
117
|
+
- teardownKeyboardNavigation
|
|
118
|
+
- findCurrentItemIndex
|
|
119
|
+
- trackHoveredItem
|
|
120
|
+
- positionContextMenu
|
|
121
|
+
events: []
|
|
122
|
+
related:
|
|
123
|
+
- dropdown_menu
|
|
124
|
+
- menubar
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Dialog
|
|
3
|
+
slug: dialog
|
|
4
|
+
category: overlay
|
|
5
|
+
anatomy:
|
|
6
|
+
- name: Dialog
|
|
7
|
+
description: Root container with state management
|
|
8
|
+
required: true
|
|
9
|
+
- name: Close
|
|
10
|
+
description: Button to close/dismiss the component
|
|
11
|
+
required: false
|
|
12
|
+
- name: Content
|
|
13
|
+
description: Main content container
|
|
14
|
+
required: true
|
|
15
|
+
- name: Description
|
|
16
|
+
description: Descriptive text element
|
|
17
|
+
required: false
|
|
18
|
+
- name: Footer
|
|
19
|
+
description: Footer section with actions
|
|
20
|
+
required: false
|
|
21
|
+
- name: Header
|
|
22
|
+
description: Header section with title and controls
|
|
23
|
+
required: false
|
|
24
|
+
- name: Overlay
|
|
25
|
+
description: Background overlay that dims the page
|
|
26
|
+
required: false
|
|
27
|
+
- name: Title
|
|
28
|
+
description: Title text element
|
|
29
|
+
required: false
|
|
30
|
+
- name: Trigger
|
|
31
|
+
description: Button or element that activates the component
|
|
32
|
+
required: true
|
|
33
|
+
features:
|
|
34
|
+
- Custom styling with Tailwind classes
|
|
35
|
+
- Focus management
|
|
36
|
+
api:
|
|
37
|
+
Dialog:
|
|
38
|
+
description: ''
|
|
39
|
+
parameters:
|
|
40
|
+
- name: open
|
|
41
|
+
type: Boolean
|
|
42
|
+
default: 'false'
|
|
43
|
+
description: Whether the element is open
|
|
44
|
+
- name: close_on_escape
|
|
45
|
+
type: Boolean
|
|
46
|
+
default: 'true'
|
|
47
|
+
description: The close on escape
|
|
48
|
+
- name: close_on_overlay_click
|
|
49
|
+
type: Boolean
|
|
50
|
+
default: 'true'
|
|
51
|
+
description: The close on overlay click
|
|
52
|
+
data_attributes: []
|
|
53
|
+
css_variables: []
|
|
54
|
+
Close:
|
|
55
|
+
description: ''
|
|
56
|
+
parameters:
|
|
57
|
+
- name: variant
|
|
58
|
+
type: Symbol
|
|
59
|
+
default: ":outline"
|
|
60
|
+
description: Visual style variant
|
|
61
|
+
- name: size
|
|
62
|
+
type: Symbol
|
|
63
|
+
default: ":default"
|
|
64
|
+
description: Size of the element
|
|
65
|
+
data_attributes: []
|
|
66
|
+
css_variables: []
|
|
67
|
+
Content:
|
|
68
|
+
description: ''
|
|
69
|
+
parameters:
|
|
70
|
+
- name: open
|
|
71
|
+
type: Boolean
|
|
72
|
+
default: 'false'
|
|
73
|
+
description: Whether the element is open
|
|
74
|
+
data_attributes: []
|
|
75
|
+
css_variables: []
|
|
76
|
+
Description:
|
|
77
|
+
description: ''
|
|
78
|
+
parameters: []
|
|
79
|
+
data_attributes: []
|
|
80
|
+
css_variables: []
|
|
81
|
+
Footer:
|
|
82
|
+
description: ''
|
|
83
|
+
parameters: []
|
|
84
|
+
data_attributes: []
|
|
85
|
+
css_variables: []
|
|
86
|
+
Header:
|
|
87
|
+
description: ''
|
|
88
|
+
parameters: []
|
|
89
|
+
data_attributes: []
|
|
90
|
+
css_variables: []
|
|
91
|
+
Overlay:
|
|
92
|
+
description: ''
|
|
93
|
+
parameters:
|
|
94
|
+
- name: open
|
|
95
|
+
type: Boolean
|
|
96
|
+
default: 'false'
|
|
97
|
+
description: Whether the element is open
|
|
98
|
+
data_attributes: []
|
|
99
|
+
css_variables: []
|
|
100
|
+
Title:
|
|
101
|
+
description: ''
|
|
102
|
+
parameters: []
|
|
103
|
+
data_attributes: []
|
|
104
|
+
css_variables: []
|
|
105
|
+
Trigger:
|
|
106
|
+
description: ''
|
|
107
|
+
parameters:
|
|
108
|
+
- name: as_child
|
|
109
|
+
type: Boolean
|
|
110
|
+
default: 'false'
|
|
111
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
112
|
+
- name: variant
|
|
113
|
+
type: Symbol
|
|
114
|
+
default: ":outline"
|
|
115
|
+
description: Visual style variant
|
|
116
|
+
- name: size
|
|
117
|
+
type: Symbol
|
|
118
|
+
default: ":default"
|
|
119
|
+
description: Size of the element
|
|
120
|
+
data_attributes: []
|
|
121
|
+
css_variables: []
|
|
122
|
+
accessibility:
|
|
123
|
+
aria_pattern: Dialog (Modal)
|
|
124
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
|
|
125
|
+
description: Implements the WAI-ARIA Dialog (Modal) pattern with proper roles, states,
|
|
126
|
+
and keyboard navigation.
|
|
127
|
+
aria_attributes: []
|
|
128
|
+
keyboard:
|
|
129
|
+
- key: Escape
|
|
130
|
+
description: Closes the component
|
|
131
|
+
javascript:
|
|
132
|
+
controller: ui--dialog
|
|
133
|
+
targets:
|
|
134
|
+
- container
|
|
135
|
+
- overlay
|
|
136
|
+
- content
|
|
137
|
+
values:
|
|
138
|
+
- name: open
|
|
139
|
+
type: Boolean
|
|
140
|
+
description: Controls open state
|
|
141
|
+
actions:
|
|
142
|
+
- open
|
|
143
|
+
- close
|
|
144
|
+
- show
|
|
145
|
+
- hide
|
|
146
|
+
- closeOnOverlayClick
|
|
147
|
+
events:
|
|
148
|
+
- name: dialog:open
|
|
149
|
+
description: Fired when dialog open
|
|
150
|
+
- name: dialog:close
|
|
151
|
+
description: Fired when dialog close
|
|
152
|
+
related:
|
|
153
|
+
- alert_dialog
|
|
154
|
+
- drawer
|
|
155
|
+
- sheet
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Drawer
|
|
3
|
+
slug: drawer
|
|
4
|
+
category: overlay
|
|
5
|
+
anatomy:
|
|
6
|
+
- name: Drawer
|
|
7
|
+
description: Root container with state management
|
|
8
|
+
required: true
|
|
9
|
+
- name: Close
|
|
10
|
+
description: Button to close/dismiss the component
|
|
11
|
+
required: false
|
|
12
|
+
- name: Content
|
|
13
|
+
description: Main content container
|
|
14
|
+
required: true
|
|
15
|
+
- name: Description
|
|
16
|
+
description: Descriptive text element
|
|
17
|
+
required: false
|
|
18
|
+
- name: Footer
|
|
19
|
+
description: Footer section with actions
|
|
20
|
+
required: false
|
|
21
|
+
- name: Handle
|
|
22
|
+
description: Draggable handle element
|
|
23
|
+
required: false
|
|
24
|
+
- name: Header
|
|
25
|
+
description: Header section with title and controls
|
|
26
|
+
required: false
|
|
27
|
+
- name: Overlay
|
|
28
|
+
description: Background overlay that dims the page
|
|
29
|
+
required: false
|
|
30
|
+
- name: Title
|
|
31
|
+
description: Title text element
|
|
32
|
+
required: false
|
|
33
|
+
- name: Trigger
|
|
34
|
+
description: Button or element that activates the component
|
|
35
|
+
required: true
|
|
36
|
+
features:
|
|
37
|
+
- Custom styling with Tailwind classes
|
|
38
|
+
- Focus management
|
|
39
|
+
- Animation support
|
|
40
|
+
api:
|
|
41
|
+
Drawer:
|
|
42
|
+
description: ''
|
|
43
|
+
parameters:
|
|
44
|
+
- name: open
|
|
45
|
+
type: Boolean
|
|
46
|
+
default: 'false'
|
|
47
|
+
description: Whether the element is open
|
|
48
|
+
- name: direction
|
|
49
|
+
type: String
|
|
50
|
+
default: bottom
|
|
51
|
+
description: The direction
|
|
52
|
+
- name: dismissible
|
|
53
|
+
type: Boolean
|
|
54
|
+
default: 'true'
|
|
55
|
+
description: The dismissible
|
|
56
|
+
- name: modal
|
|
57
|
+
type: Boolean
|
|
58
|
+
default: 'true'
|
|
59
|
+
description: The modal
|
|
60
|
+
- name: snap_points
|
|
61
|
+
type: String
|
|
62
|
+
default: nil
|
|
63
|
+
description: The snap points
|
|
64
|
+
- name: active_snap_point
|
|
65
|
+
type: String
|
|
66
|
+
default: nil
|
|
67
|
+
description: The active snap point
|
|
68
|
+
- name: fade_from_index
|
|
69
|
+
type: String
|
|
70
|
+
default: nil
|
|
71
|
+
description: The fade from index
|
|
72
|
+
- name: snap_to_sequential_point
|
|
73
|
+
type: Boolean
|
|
74
|
+
default: 'false'
|
|
75
|
+
description: The snap to sequential point
|
|
76
|
+
- name: handle_only
|
|
77
|
+
type: Boolean
|
|
78
|
+
default: 'false'
|
|
79
|
+
description: The handle only
|
|
80
|
+
- name: reposition_inputs
|
|
81
|
+
type: Boolean
|
|
82
|
+
default: 'true'
|
|
83
|
+
description: The reposition inputs
|
|
84
|
+
data_attributes: []
|
|
85
|
+
css_variables: []
|
|
86
|
+
Close:
|
|
87
|
+
description: ''
|
|
88
|
+
parameters:
|
|
89
|
+
- name: variant
|
|
90
|
+
type: Symbol
|
|
91
|
+
default: ":outline"
|
|
92
|
+
description: Visual style variant
|
|
93
|
+
- name: size
|
|
94
|
+
type: Symbol
|
|
95
|
+
default: ":default"
|
|
96
|
+
description: Size of the element
|
|
97
|
+
data_attributes: []
|
|
98
|
+
css_variables: []
|
|
99
|
+
Content:
|
|
100
|
+
description: ''
|
|
101
|
+
parameters:
|
|
102
|
+
- name: open
|
|
103
|
+
type: Boolean
|
|
104
|
+
default: 'false'
|
|
105
|
+
description: Whether the element is open
|
|
106
|
+
- name: direction
|
|
107
|
+
type: String
|
|
108
|
+
default: bottom
|
|
109
|
+
description: The direction
|
|
110
|
+
data_attributes: []
|
|
111
|
+
css_variables: []
|
|
112
|
+
Description:
|
|
113
|
+
description: ''
|
|
114
|
+
parameters: []
|
|
115
|
+
data_attributes: []
|
|
116
|
+
css_variables: []
|
|
117
|
+
Footer:
|
|
118
|
+
description: ''
|
|
119
|
+
parameters: []
|
|
120
|
+
data_attributes: []
|
|
121
|
+
css_variables: []
|
|
122
|
+
Handle:
|
|
123
|
+
description: ''
|
|
124
|
+
parameters: []
|
|
125
|
+
data_attributes: []
|
|
126
|
+
css_variables: []
|
|
127
|
+
Header:
|
|
128
|
+
description: ''
|
|
129
|
+
parameters: []
|
|
130
|
+
data_attributes: []
|
|
131
|
+
css_variables: []
|
|
132
|
+
Overlay:
|
|
133
|
+
description: ''
|
|
134
|
+
parameters:
|
|
135
|
+
- name: open
|
|
136
|
+
type: Boolean
|
|
137
|
+
default: 'false'
|
|
138
|
+
description: Whether the element is open
|
|
139
|
+
data_attributes: []
|
|
140
|
+
css_variables: []
|
|
141
|
+
Title:
|
|
142
|
+
description: ''
|
|
143
|
+
parameters: []
|
|
144
|
+
data_attributes: []
|
|
145
|
+
css_variables: []
|
|
146
|
+
Trigger:
|
|
147
|
+
description: ''
|
|
148
|
+
parameters:
|
|
149
|
+
- name: as_child
|
|
150
|
+
type: Boolean
|
|
151
|
+
default: 'false'
|
|
152
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
153
|
+
- name: variant
|
|
154
|
+
type: Symbol
|
|
155
|
+
default: ":outline"
|
|
156
|
+
description: Visual style variant
|
|
157
|
+
- name: size
|
|
158
|
+
type: Symbol
|
|
159
|
+
default: ":default"
|
|
160
|
+
description: Size of the element
|
|
161
|
+
data_attributes: []
|
|
162
|
+
css_variables: []
|
|
163
|
+
accessibility:
|
|
164
|
+
aria_pattern: Dialog (Modal)
|
|
165
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
|
|
166
|
+
description: Implements the WAI-ARIA Dialog (Modal) pattern with proper roles, states,
|
|
167
|
+
and keyboard navigation.
|
|
168
|
+
aria_attributes: []
|
|
169
|
+
keyboard:
|
|
170
|
+
- key: Escape
|
|
171
|
+
description: Closes the component
|
|
172
|
+
- key: End
|
|
173
|
+
description: Moves focus to last item
|
|
174
|
+
javascript:
|
|
175
|
+
controller: ui--drawer
|
|
176
|
+
targets:
|
|
177
|
+
- container
|
|
178
|
+
- overlay
|
|
179
|
+
- content
|
|
180
|
+
- handle
|
|
181
|
+
values:
|
|
182
|
+
- name: open
|
|
183
|
+
type: Boolean
|
|
184
|
+
description: Controls open state
|
|
185
|
+
actions:
|
|
186
|
+
- open
|
|
187
|
+
- close
|
|
188
|
+
- closeOnOverlayClick
|
|
189
|
+
- startDrag
|
|
190
|
+
- endDrag
|
|
191
|
+
- snapPointToPixels
|
|
192
|
+
- calculateSnapPosition
|
|
193
|
+
- findClosestSnapPointIndex
|
|
194
|
+
- snapTo
|
|
195
|
+
- snapPointToPercentage
|
|
196
|
+
- isHorizontalDirection
|
|
197
|
+
- isVerticalDirection
|
|
198
|
+
- isClosingDirection
|
|
199
|
+
- calculateVelocity
|
|
200
|
+
- applyDamping
|
|
201
|
+
- shouldIgnoreDrag
|
|
202
|
+
- isHandleEvent
|
|
203
|
+
- resetPosition
|
|
204
|
+
- calculateOverlayOpacity
|
|
205
|
+
- show
|
|
206
|
+
- hide
|
|
207
|
+
- animateToClosedPosition
|
|
208
|
+
- cleanupAfterClose
|
|
209
|
+
- isMobile
|
|
210
|
+
- hasSnapPoints
|
|
211
|
+
- positionAtClosed
|
|
212
|
+
- animateToOpen
|
|
213
|
+
- cleanupEscapeHandler
|
|
214
|
+
- applyTransform
|
|
215
|
+
- dispatchEvent
|
|
216
|
+
events: []
|
|
217
|
+
related:
|
|
218
|
+
- dialog
|
|
219
|
+
- sheet
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Dropdown Menu
|
|
3
|
+
slug: dropdown_menu
|
|
4
|
+
category: overlay
|
|
5
|
+
description: DropdownMenu - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Dropdown Menu
|
|
8
|
+
description: Container for dropdown menus with Stimulus controller for interactivity.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: Menu items container with animations and positioning.
|
|
12
|
+
required: true
|
|
13
|
+
- name: Item
|
|
14
|
+
description: Individual menu item that can be rendered as a link or div.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Label
|
|
17
|
+
description: Label for menu sections to organize items.
|
|
18
|
+
required: false
|
|
19
|
+
- name: Separator
|
|
20
|
+
description: Visual separator between menu items.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Shortcut
|
|
23
|
+
description: Keyboard shortcut indicator displayed at the end of menu items.
|
|
24
|
+
required: false
|
|
25
|
+
- name: Sub
|
|
26
|
+
description: Container for submenu with relative positioning.
|
|
27
|
+
required: false
|
|
28
|
+
- name: Sub Content
|
|
29
|
+
description: Submenu items container positioned to the right of the trigger.
|
|
30
|
+
required: true
|
|
31
|
+
- name: Sub Trigger
|
|
32
|
+
description: Item that opens a submenu on hover.
|
|
33
|
+
required: true
|
|
34
|
+
- name: Trigger
|
|
35
|
+
description: Wrapper that adds toggle action to child element.
|
|
36
|
+
required: true
|
|
37
|
+
features:
|
|
38
|
+
- Custom styling with Tailwind classes
|
|
39
|
+
api:
|
|
40
|
+
Dropdown Menu:
|
|
41
|
+
description: Container for dropdown menus with Stimulus controller for interactivity.
|
|
42
|
+
parameters:
|
|
43
|
+
- name: as_child
|
|
44
|
+
type: Boolean
|
|
45
|
+
default: 'false'
|
|
46
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
47
|
+
- name: placement
|
|
48
|
+
type: String
|
|
49
|
+
default: bottom-start
|
|
50
|
+
description: The placement
|
|
51
|
+
- name: offset
|
|
52
|
+
type: Integer
|
|
53
|
+
default: '4'
|
|
54
|
+
description: The offset
|
|
55
|
+
- name: flip
|
|
56
|
+
type: Boolean
|
|
57
|
+
default: 'true'
|
|
58
|
+
description: The flip
|
|
59
|
+
data_attributes: []
|
|
60
|
+
css_variables: []
|
|
61
|
+
Content:
|
|
62
|
+
description: Menu items container with animations and positioning.
|
|
63
|
+
parameters:
|
|
64
|
+
- name: side_offset
|
|
65
|
+
type: Integer
|
|
66
|
+
default: '4'
|
|
67
|
+
description: The side offset
|
|
68
|
+
data_attributes: []
|
|
69
|
+
css_variables: []
|
|
70
|
+
Item:
|
|
71
|
+
description: Individual menu item that can be rendered as a link or div.
|
|
72
|
+
parameters:
|
|
73
|
+
- name: href
|
|
74
|
+
type: String
|
|
75
|
+
default: nil
|
|
76
|
+
description: The href
|
|
77
|
+
- name: inset
|
|
78
|
+
type: Boolean
|
|
79
|
+
default: 'false'
|
|
80
|
+
description: The inset
|
|
81
|
+
- name: variant
|
|
82
|
+
type: String
|
|
83
|
+
default: default
|
|
84
|
+
description: Visual style variant
|
|
85
|
+
data_attributes: []
|
|
86
|
+
css_variables: []
|
|
87
|
+
Label:
|
|
88
|
+
description: Label for menu sections to organize items.
|
|
89
|
+
parameters:
|
|
90
|
+
- name: inset
|
|
91
|
+
type: Boolean
|
|
92
|
+
default: 'false'
|
|
93
|
+
description: The inset
|
|
94
|
+
data_attributes: []
|
|
95
|
+
css_variables: []
|
|
96
|
+
Separator:
|
|
97
|
+
description: Visual separator between menu items.
|
|
98
|
+
parameters: []
|
|
99
|
+
data_attributes: []
|
|
100
|
+
css_variables: []
|
|
101
|
+
Shortcut:
|
|
102
|
+
description: Keyboard shortcut indicator displayed at the end of menu items.
|
|
103
|
+
parameters: []
|
|
104
|
+
data_attributes: []
|
|
105
|
+
css_variables: []
|
|
106
|
+
Sub:
|
|
107
|
+
description: Container for submenu with relative positioning.
|
|
108
|
+
parameters: []
|
|
109
|
+
data_attributes: []
|
|
110
|
+
css_variables: []
|
|
111
|
+
Sub Content:
|
|
112
|
+
description: Submenu items container positioned to the right of the trigger.
|
|
113
|
+
parameters:
|
|
114
|
+
- name: side
|
|
115
|
+
type: String
|
|
116
|
+
default: right
|
|
117
|
+
description: Which side to display on
|
|
118
|
+
- name: align
|
|
119
|
+
type: String
|
|
120
|
+
default: start
|
|
121
|
+
description: Alignment within container
|
|
122
|
+
data_attributes: []
|
|
123
|
+
css_variables: []
|
|
124
|
+
Sub Trigger:
|
|
125
|
+
description: Item that opens a submenu on hover.
|
|
126
|
+
parameters:
|
|
127
|
+
- name: inset
|
|
128
|
+
type: Boolean
|
|
129
|
+
default: 'false'
|
|
130
|
+
description: The inset
|
|
131
|
+
data_attributes: []
|
|
132
|
+
css_variables: []
|
|
133
|
+
Trigger:
|
|
134
|
+
description: Wrapper that adds toggle action to child element.
|
|
135
|
+
parameters:
|
|
136
|
+
- name: as_child
|
|
137
|
+
type: Boolean
|
|
138
|
+
default: 'false'
|
|
139
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
140
|
+
data_attributes: []
|
|
141
|
+
css_variables: []
|
|
142
|
+
accessibility:
|
|
143
|
+
aria_pattern: Menu Button
|
|
144
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
|
|
145
|
+
description: Implements the WAI-ARIA Menu Button pattern with proper roles, states,
|
|
146
|
+
and keyboard navigation.
|
|
147
|
+
aria_attributes: []
|
|
148
|
+
related:
|
|
149
|
+
- context_menu
|
|
150
|
+
- menubar
|
|
151
|
+
- select
|