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,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Scroll Area
|
|
3
|
+
slug: scroll_area
|
|
4
|
+
category: layout
|
|
5
|
+
description: ScrollArea - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Scroll Area
|
|
8
|
+
description: Augments native scroll functionality for custom, cross-browser styling.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Viewport
|
|
11
|
+
description: Scrollable content container with hidden native scrollbar.
|
|
12
|
+
required: false
|
|
13
|
+
features:
|
|
14
|
+
- Custom styling with Tailwind classes
|
|
15
|
+
api:
|
|
16
|
+
Scroll Area:
|
|
17
|
+
description: Augments native scroll functionality for custom, cross-browser styling.
|
|
18
|
+
parameters:
|
|
19
|
+
- name: as_child
|
|
20
|
+
type: Boolean
|
|
21
|
+
default: 'false'
|
|
22
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
23
|
+
- name: type
|
|
24
|
+
type: String
|
|
25
|
+
default: hover
|
|
26
|
+
description: The type
|
|
27
|
+
- name: scroll_hide_delay
|
|
28
|
+
type: Integer
|
|
29
|
+
default: '600'
|
|
30
|
+
description: The scroll hide delay
|
|
31
|
+
data_attributes: []
|
|
32
|
+
css_variables: []
|
|
33
|
+
Viewport:
|
|
34
|
+
description: Shared behavior for ScrollArea viewport across ERB, ViewComponent,
|
|
35
|
+
and Phlex implementations.
|
|
36
|
+
parameters:
|
|
37
|
+
- name: as_child
|
|
38
|
+
type: Boolean
|
|
39
|
+
default: 'false'
|
|
40
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
41
|
+
data_attributes: []
|
|
42
|
+
css_variables: []
|
|
43
|
+
accessibility:
|
|
44
|
+
aria_pattern: Scrollable Region
|
|
45
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/
|
|
46
|
+
description: Implements the WAI-ARIA Scrollable Region pattern with proper roles,
|
|
47
|
+
states, and keyboard navigation.
|
|
48
|
+
aria_attributes: []
|
|
49
|
+
keyboard:
|
|
50
|
+
- key: Enter
|
|
51
|
+
description: Activates the focused element
|
|
52
|
+
- key: End
|
|
53
|
+
description: Moves focus to last item
|
|
54
|
+
javascript:
|
|
55
|
+
controller: ui--scroll-area
|
|
56
|
+
targets:
|
|
57
|
+
- viewport
|
|
58
|
+
- scrollbar
|
|
59
|
+
- thumb
|
|
60
|
+
values:
|
|
61
|
+
- name: type
|
|
62
|
+
type: String
|
|
63
|
+
description: The type
|
|
64
|
+
actions:
|
|
65
|
+
- applyViewportOverflow
|
|
66
|
+
- initializeScrollbarBehavior
|
|
67
|
+
- initializeHoverScrollbar
|
|
68
|
+
- initializeScrollScrollbar
|
|
69
|
+
- initializeAutoScrollbar
|
|
70
|
+
- initializeAlwaysScrollbar
|
|
71
|
+
- startScrollSync
|
|
72
|
+
- syncThumbPosition
|
|
73
|
+
- startDrag
|
|
74
|
+
events: []
|
|
75
|
+
related:
|
|
76
|
+
- carousel
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Select
|
|
3
|
+
slug: select
|
|
4
|
+
category: forms
|
|
5
|
+
description: Displays a list of options for the user to pick from, triggered by a
|
|
6
|
+
button.
|
|
7
|
+
anatomy:
|
|
8
|
+
- name: Select
|
|
9
|
+
description: Root container with state management
|
|
10
|
+
required: true
|
|
11
|
+
- name: Trigger
|
|
12
|
+
description: Button that opens the dropdown
|
|
13
|
+
required: true
|
|
14
|
+
- name: Content
|
|
15
|
+
description: Container for the dropdown options
|
|
16
|
+
required: true
|
|
17
|
+
- name: Item
|
|
18
|
+
description: Individual selectable option
|
|
19
|
+
required: true
|
|
20
|
+
- name: Group
|
|
21
|
+
description: Groups related items with a label
|
|
22
|
+
required: false
|
|
23
|
+
- name: Label
|
|
24
|
+
description: Label for item groups
|
|
25
|
+
required: false
|
|
26
|
+
- name: Separator
|
|
27
|
+
description: Visual separator between items
|
|
28
|
+
required: false
|
|
29
|
+
features:
|
|
30
|
+
- Single selection from a list of options
|
|
31
|
+
- Keyboard navigation with arrow keys
|
|
32
|
+
- Type-ahead search functionality
|
|
33
|
+
- Grouped options with labels
|
|
34
|
+
- Disabled items support
|
|
35
|
+
- Custom trigger with asChild pattern
|
|
36
|
+
- Placeholder text when no selection
|
|
37
|
+
- Form integration with hidden input
|
|
38
|
+
api:
|
|
39
|
+
Select:
|
|
40
|
+
description: Shared behavior for Select component across ERB, ViewComponent, and
|
|
41
|
+
Phlex implementations.
|
|
42
|
+
parameters:
|
|
43
|
+
- name: value
|
|
44
|
+
type: String
|
|
45
|
+
default: nil
|
|
46
|
+
description: The current value
|
|
47
|
+
data_attributes:
|
|
48
|
+
- name: data-state
|
|
49
|
+
values:
|
|
50
|
+
- open
|
|
51
|
+
- closed
|
|
52
|
+
description: Current open/closed state
|
|
53
|
+
- name: data-placeholder
|
|
54
|
+
values:
|
|
55
|
+
- 'true'
|
|
56
|
+
description: Present when showing placeholder
|
|
57
|
+
css_variables:
|
|
58
|
+
- name: "--trigger-width"
|
|
59
|
+
description: Width of the trigger element
|
|
60
|
+
Content:
|
|
61
|
+
description: Shared behavior for Select dropdown content across ERB, ViewComponent,
|
|
62
|
+
and Phlex implementations.
|
|
63
|
+
parameters: []
|
|
64
|
+
data_attributes: []
|
|
65
|
+
css_variables: []
|
|
66
|
+
Group:
|
|
67
|
+
description: Shared behavior for Select options group across ERB, ViewComponent,
|
|
68
|
+
and Phlex implementations.
|
|
69
|
+
parameters:
|
|
70
|
+
- name: as_child
|
|
71
|
+
type: Boolean
|
|
72
|
+
default: 'false'
|
|
73
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
74
|
+
data_attributes: []
|
|
75
|
+
css_variables: []
|
|
76
|
+
Item:
|
|
77
|
+
description: Shared behavior for Individual select option across ERB, ViewComponent,
|
|
78
|
+
and Phlex implementations.
|
|
79
|
+
parameters:
|
|
80
|
+
- name: as_child
|
|
81
|
+
type: Boolean
|
|
82
|
+
default: 'false'
|
|
83
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
84
|
+
- name: value
|
|
85
|
+
type: String
|
|
86
|
+
default: nil
|
|
87
|
+
description: The current value
|
|
88
|
+
- name: disabled
|
|
89
|
+
type: Boolean
|
|
90
|
+
default: 'false'
|
|
91
|
+
description: Whether the element is disabled
|
|
92
|
+
data_attributes: []
|
|
93
|
+
css_variables: []
|
|
94
|
+
Label:
|
|
95
|
+
description: Shared behavior for Select group label across ERB, ViewComponent,
|
|
96
|
+
and Phlex implementations.
|
|
97
|
+
parameters:
|
|
98
|
+
- name: as_child
|
|
99
|
+
type: Boolean
|
|
100
|
+
default: 'false'
|
|
101
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
102
|
+
data_attributes: []
|
|
103
|
+
css_variables: []
|
|
104
|
+
Scroll Down Button:
|
|
105
|
+
description: Shared behavior for Select scroll down button across ERB, ViewComponent,
|
|
106
|
+
and Phlex implementations.
|
|
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
|
+
data_attributes: []
|
|
113
|
+
css_variables: []
|
|
114
|
+
Scroll Up Button:
|
|
115
|
+
description: Shared behavior for Select scroll up button across ERB, ViewComponent,
|
|
116
|
+
and Phlex implementations.
|
|
117
|
+
parameters:
|
|
118
|
+
- name: as_child
|
|
119
|
+
type: Boolean
|
|
120
|
+
default: 'false'
|
|
121
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
122
|
+
data_attributes: []
|
|
123
|
+
css_variables: []
|
|
124
|
+
Trigger:
|
|
125
|
+
description: Shared behavior for Select trigger button across ERB, ViewComponent,
|
|
126
|
+
and Phlex implementations.
|
|
127
|
+
parameters:
|
|
128
|
+
- name: as_child
|
|
129
|
+
type: Boolean
|
|
130
|
+
default: 'false'
|
|
131
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
132
|
+
- name: placeholder
|
|
133
|
+
type: String
|
|
134
|
+
default: Select...
|
|
135
|
+
description: Placeholder text when no value is selected
|
|
136
|
+
data_attributes: []
|
|
137
|
+
css_variables: []
|
|
138
|
+
accessibility:
|
|
139
|
+
aria_pattern: Listbox
|
|
140
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
|
|
141
|
+
description: Implements the WAI-ARIA Listbox pattern with proper roles, states,
|
|
142
|
+
and keyboard navigation.
|
|
143
|
+
aria_attributes:
|
|
144
|
+
- role="combobox" on the trigger
|
|
145
|
+
- role="listbox" on the content container
|
|
146
|
+
- role="option" on each item
|
|
147
|
+
- aria-expanded on trigger
|
|
148
|
+
- aria-selected on the selected item
|
|
149
|
+
- aria-disabled on disabled items
|
|
150
|
+
- aria-labelledby for label association
|
|
151
|
+
keyboard:
|
|
152
|
+
- key: Space
|
|
153
|
+
description: Opens dropdown when trigger is focused
|
|
154
|
+
- key: Enter
|
|
155
|
+
description: Opens dropdown / selects highlighted item
|
|
156
|
+
- key: ArrowDown
|
|
157
|
+
description: Opens dropdown / moves to next item
|
|
158
|
+
- key: ArrowUp
|
|
159
|
+
description: Moves to previous item
|
|
160
|
+
- key: Home
|
|
161
|
+
description: Moves to first item
|
|
162
|
+
- key: End
|
|
163
|
+
description: Moves to last item
|
|
164
|
+
- key: Escape
|
|
165
|
+
description: Closes dropdown
|
|
166
|
+
- key: A-Z,a-z
|
|
167
|
+
description: Type-ahead to find matching item
|
|
168
|
+
javascript:
|
|
169
|
+
controller: ui--select
|
|
170
|
+
targets:
|
|
171
|
+
- trigger
|
|
172
|
+
- content
|
|
173
|
+
- item
|
|
174
|
+
- valueDisplay
|
|
175
|
+
- hiddenInput
|
|
176
|
+
- scrollUpButton
|
|
177
|
+
- scrollDownButton
|
|
178
|
+
- viewport
|
|
179
|
+
- itemCheck
|
|
180
|
+
values:
|
|
181
|
+
- name: open
|
|
182
|
+
type: Boolean
|
|
183
|
+
description: Controls open state
|
|
184
|
+
- name: value
|
|
185
|
+
type: String
|
|
186
|
+
description: Current selected value
|
|
187
|
+
actions:
|
|
188
|
+
- toggle
|
|
189
|
+
- close
|
|
190
|
+
- selectItem
|
|
191
|
+
events: []
|
|
192
|
+
related:
|
|
193
|
+
- combobox
|
|
194
|
+
- dropdown_menu
|
|
195
|
+
- radio_group
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Separator
|
|
3
|
+
slug: separator
|
|
4
|
+
category: layout
|
|
5
|
+
description: Separator - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Separator
|
|
8
|
+
description: Visually or semantically separates content.
|
|
9
|
+
required: true
|
|
10
|
+
features:
|
|
11
|
+
- Custom styling with Tailwind classes
|
|
12
|
+
- ARIA attributes for accessibility
|
|
13
|
+
api:
|
|
14
|
+
Separator:
|
|
15
|
+
description: Visually or semantically separates content.
|
|
16
|
+
parameters:
|
|
17
|
+
- name: orientation
|
|
18
|
+
type: Symbol
|
|
19
|
+
default: ":horizontal"
|
|
20
|
+
description: Orientation (horizontal or vertical)
|
|
21
|
+
- name: decorative
|
|
22
|
+
type: Boolean
|
|
23
|
+
default: 'true'
|
|
24
|
+
description: The decorative
|
|
25
|
+
data_attributes: []
|
|
26
|
+
css_variables: []
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Sheet
|
|
3
|
+
slug: sheet
|
|
4
|
+
category: overlay
|
|
5
|
+
anatomy:
|
|
6
|
+
- name: Sheet
|
|
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
|
+
api:
|
|
36
|
+
Sheet:
|
|
37
|
+
description: ''
|
|
38
|
+
parameters:
|
|
39
|
+
- name: open
|
|
40
|
+
type: Boolean
|
|
41
|
+
default: 'false'
|
|
42
|
+
description: Whether the element is open
|
|
43
|
+
- name: close_on_escape
|
|
44
|
+
type: Boolean
|
|
45
|
+
default: 'true'
|
|
46
|
+
description: The close on escape
|
|
47
|
+
- name: close_on_overlay_click
|
|
48
|
+
type: Boolean
|
|
49
|
+
default: 'true'
|
|
50
|
+
description: The close on overlay click
|
|
51
|
+
data_attributes: []
|
|
52
|
+
css_variables: []
|
|
53
|
+
Close:
|
|
54
|
+
description: ''
|
|
55
|
+
parameters:
|
|
56
|
+
- name: as_child
|
|
57
|
+
type: Boolean
|
|
58
|
+
default: 'false'
|
|
59
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
60
|
+
- name: variant
|
|
61
|
+
type: Symbol
|
|
62
|
+
default: ":outline"
|
|
63
|
+
description: Visual style variant
|
|
64
|
+
- name: size
|
|
65
|
+
type: Symbol
|
|
66
|
+
default: ":default"
|
|
67
|
+
description: Size of the element
|
|
68
|
+
data_attributes: []
|
|
69
|
+
css_variables: []
|
|
70
|
+
Content:
|
|
71
|
+
description: ''
|
|
72
|
+
parameters:
|
|
73
|
+
- name: side
|
|
74
|
+
type: String
|
|
75
|
+
default: right
|
|
76
|
+
description: Which side to display on
|
|
77
|
+
- name: open
|
|
78
|
+
type: Boolean
|
|
79
|
+
default: 'false'
|
|
80
|
+
description: Whether the element is open
|
|
81
|
+
- name: show_close
|
|
82
|
+
type: Boolean
|
|
83
|
+
default: 'true'
|
|
84
|
+
description: The show close
|
|
85
|
+
data_attributes: []
|
|
86
|
+
css_variables: []
|
|
87
|
+
Description:
|
|
88
|
+
description: ''
|
|
89
|
+
parameters: []
|
|
90
|
+
data_attributes: []
|
|
91
|
+
css_variables: []
|
|
92
|
+
Footer:
|
|
93
|
+
description: ''
|
|
94
|
+
parameters: []
|
|
95
|
+
data_attributes: []
|
|
96
|
+
css_variables: []
|
|
97
|
+
Header:
|
|
98
|
+
description: ''
|
|
99
|
+
parameters: []
|
|
100
|
+
data_attributes: []
|
|
101
|
+
css_variables: []
|
|
102
|
+
Overlay:
|
|
103
|
+
description: ''
|
|
104
|
+
parameters:
|
|
105
|
+
- name: open
|
|
106
|
+
type: Boolean
|
|
107
|
+
default: 'false'
|
|
108
|
+
description: Whether the element is open
|
|
109
|
+
data_attributes: []
|
|
110
|
+
css_variables: []
|
|
111
|
+
Title:
|
|
112
|
+
description: ''
|
|
113
|
+
parameters: []
|
|
114
|
+
data_attributes: []
|
|
115
|
+
css_variables: []
|
|
116
|
+
Trigger:
|
|
117
|
+
description: ''
|
|
118
|
+
parameters:
|
|
119
|
+
- name: as_child
|
|
120
|
+
type: Boolean
|
|
121
|
+
default: 'false'
|
|
122
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
123
|
+
data_attributes: []
|
|
124
|
+
css_variables: []
|
|
125
|
+
accessibility:
|
|
126
|
+
aria_pattern: Dialog (Modal)
|
|
127
|
+
w3c_reference: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
|
|
128
|
+
description: Implements the WAI-ARIA Dialog (Modal) pattern with proper roles, states,
|
|
129
|
+
and keyboard navigation.
|
|
130
|
+
aria_attributes: []
|
|
131
|
+
related:
|
|
132
|
+
- dialog
|
|
133
|
+
- drawer
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Sidebar
|
|
3
|
+
slug: sidebar
|
|
4
|
+
category: navigation
|
|
5
|
+
description: Sidebar - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Sidebar
|
|
8
|
+
description: Main sidebar container with support for variants and collapsible modes.
|
|
9
|
+
required: true
|
|
10
|
+
- name: Content
|
|
11
|
+
description: Scrollable content area in the middle of the sidebar.
|
|
12
|
+
required: true
|
|
13
|
+
- name: Footer
|
|
14
|
+
description: Fixed footer section at the bottom of the sidebar.
|
|
15
|
+
required: false
|
|
16
|
+
- name: Group
|
|
17
|
+
description: Container for grouping related sidebar items.
|
|
18
|
+
required: false
|
|
19
|
+
- name: Group Action
|
|
20
|
+
description: Action button within a sidebar group header.
|
|
21
|
+
required: false
|
|
22
|
+
- name: Group Content
|
|
23
|
+
description: Container for content within a sidebar group.
|
|
24
|
+
required: true
|
|
25
|
+
- name: Header
|
|
26
|
+
description: Fixed header section at the top of the sidebar.
|
|
27
|
+
required: false
|
|
28
|
+
- name: Input
|
|
29
|
+
description: Input field styled for sidebar usage.
|
|
30
|
+
required: false
|
|
31
|
+
- name: Separator
|
|
32
|
+
description: Visual divider within the sidebar.
|
|
33
|
+
required: false
|
|
34
|
+
- name: Trigger
|
|
35
|
+
description: Button that toggles the sidebar open/closed.
|
|
36
|
+
required: true
|
|
37
|
+
features:
|
|
38
|
+
- Custom styling with Tailwind classes
|
|
39
|
+
api:
|
|
40
|
+
Sidebar:
|
|
41
|
+
description: Main sidebar container with support for variants and collapsible
|
|
42
|
+
modes.
|
|
43
|
+
parameters:
|
|
44
|
+
- name: variant
|
|
45
|
+
type: String
|
|
46
|
+
default: sidebar
|
|
47
|
+
description: Visual style variant
|
|
48
|
+
- name: side
|
|
49
|
+
type: String
|
|
50
|
+
default: left
|
|
51
|
+
description: Which side to display on
|
|
52
|
+
- name: collapsible
|
|
53
|
+
type: String
|
|
54
|
+
default: icon
|
|
55
|
+
description: The collapsible
|
|
56
|
+
data_attributes: []
|
|
57
|
+
css_variables: []
|
|
58
|
+
Content:
|
|
59
|
+
description: Scrollable content area in the middle of the sidebar.
|
|
60
|
+
parameters: []
|
|
61
|
+
data_attributes: []
|
|
62
|
+
css_variables: []
|
|
63
|
+
Footer:
|
|
64
|
+
description: Fixed footer section at the bottom of the sidebar.
|
|
65
|
+
parameters: []
|
|
66
|
+
data_attributes: []
|
|
67
|
+
css_variables: []
|
|
68
|
+
Group:
|
|
69
|
+
description: Container for grouping related sidebar items.
|
|
70
|
+
parameters: []
|
|
71
|
+
data_attributes: []
|
|
72
|
+
css_variables: []
|
|
73
|
+
Group Action:
|
|
74
|
+
description: Action button within a sidebar group header.
|
|
75
|
+
parameters:
|
|
76
|
+
- name: as_child
|
|
77
|
+
type: Boolean
|
|
78
|
+
default: 'false'
|
|
79
|
+
description: When true, yields attributes to block instead of rendering wrapper
|
|
80
|
+
data_attributes: []
|
|
81
|
+
css_variables: []
|
|
82
|
+
Group Content:
|
|
83
|
+
description: Container for content within a sidebar group.
|
|
84
|
+
parameters: []
|
|
85
|
+
data_attributes: []
|
|
86
|
+
css_variables: []
|
|
87
|
+
Header:
|
|
88
|
+
description: Fixed header section at the top of the sidebar.
|
|
89
|
+
parameters: []
|
|
90
|
+
data_attributes: []
|
|
91
|
+
css_variables: []
|
|
92
|
+
Input:
|
|
93
|
+
description: Input field styled for sidebar usage.
|
|
94
|
+
parameters:
|
|
95
|
+
- name: type
|
|
96
|
+
type: String
|
|
97
|
+
default: text
|
|
98
|
+
description: The type
|
|
99
|
+
data_attributes: []
|
|
100
|
+
css_variables: []
|
|
101
|
+
Separator:
|
|
102
|
+
description: Visual divider within the sidebar.
|
|
103
|
+
parameters: []
|
|
104
|
+
data_attributes: []
|
|
105
|
+
css_variables: []
|
|
106
|
+
Trigger:
|
|
107
|
+
description: Button that toggles the sidebar open/closed.
|
|
108
|
+
parameters: []
|
|
109
|
+
data_attributes: []
|
|
110
|
+
css_variables: []
|
|
111
|
+
javascript:
|
|
112
|
+
controller: ui--sidebar
|
|
113
|
+
targets:
|
|
114
|
+
- sidebar
|
|
115
|
+
- trigger
|
|
116
|
+
- mobileSheet
|
|
117
|
+
- mobileDrawer
|
|
118
|
+
values:
|
|
119
|
+
- name: open
|
|
120
|
+
type: Boolean
|
|
121
|
+
description: Controls open state
|
|
122
|
+
actions:
|
|
123
|
+
- toggle
|
|
124
|
+
- open
|
|
125
|
+
- close
|
|
126
|
+
- toggleDesktop
|
|
127
|
+
- openDesktop
|
|
128
|
+
- closeDesktop
|
|
129
|
+
- toggleMobile
|
|
130
|
+
- openMobile
|
|
131
|
+
- closeMobile
|
|
132
|
+
- isMobile
|
|
133
|
+
- saveCookie
|
|
134
|
+
- loadCookie
|
|
135
|
+
- dispatchToggleEvent
|
|
136
|
+
events:
|
|
137
|
+
- name: sidebar:toggle
|
|
138
|
+
description: Fired when sidebar toggle
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Skeleton
|
|
3
|
+
slug: skeleton
|
|
4
|
+
category: feedback
|
|
5
|
+
description: Skeleton - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Skeleton
|
|
8
|
+
description: A simple loading placeholder component with pulsing animation.
|
|
9
|
+
required: true
|
|
10
|
+
api:
|
|
11
|
+
Skeleton:
|
|
12
|
+
description: A simple loading placeholder component with pulsing animation.
|
|
13
|
+
parameters: []
|
|
14
|
+
data_attributes: []
|
|
15
|
+
css_variables: []
|
|
16
|
+
related:
|
|
17
|
+
- progress
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Sonner
|
|
3
|
+
slug: sonner
|
|
4
|
+
category: other
|
|
5
|
+
description: Sonner Toaster component (Phlex) Container for toast notifications -
|
|
6
|
+
render once in your layout
|
|
7
|
+
anatomy:
|
|
8
|
+
- name: Sonner
|
|
9
|
+
description: Sonner Toaster component part
|
|
10
|
+
required: true
|
|
11
|
+
features:
|
|
12
|
+
- Custom styling with Tailwind classes
|
|
13
|
+
api:
|
|
14
|
+
Sonner Toaster:
|
|
15
|
+
description: ''
|
|
16
|
+
parameters:
|
|
17
|
+
- name: position
|
|
18
|
+
type: String
|
|
19
|
+
default: bottom-right
|
|
20
|
+
description: The position
|
|
21
|
+
- name: theme
|
|
22
|
+
type: String
|
|
23
|
+
default: system
|
|
24
|
+
description: The theme
|
|
25
|
+
- name: rich_colors
|
|
26
|
+
type: Boolean
|
|
27
|
+
default: 'false'
|
|
28
|
+
description: The rich colors
|
|
29
|
+
- name: expand
|
|
30
|
+
type: Boolean
|
|
31
|
+
default: 'false'
|
|
32
|
+
description: The expand
|
|
33
|
+
- name: duration
|
|
34
|
+
type: Integer
|
|
35
|
+
default: '4000'
|
|
36
|
+
description: The duration
|
|
37
|
+
- name: close_button
|
|
38
|
+
type: Boolean
|
|
39
|
+
default: 'false'
|
|
40
|
+
description: The close button
|
|
41
|
+
- name: visible_toasts
|
|
42
|
+
type: Integer
|
|
43
|
+
default: '3'
|
|
44
|
+
description: The visible toasts
|
|
45
|
+
data_attributes: []
|
|
46
|
+
css_variables: []
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Spinner
|
|
3
|
+
slug: spinner
|
|
4
|
+
category: feedback
|
|
5
|
+
description: Spinner - Phlex implementation
|
|
6
|
+
anatomy:
|
|
7
|
+
- name: Spinner
|
|
8
|
+
description: A loading indicator component using an animated spinner icon.
|
|
9
|
+
required: true
|
|
10
|
+
features:
|
|
11
|
+
- Custom styling with Tailwind classes
|
|
12
|
+
- ARIA attributes for accessibility
|
|
13
|
+
api:
|
|
14
|
+
Spinner:
|
|
15
|
+
description: A loading indicator component using an animated spinner icon.
|
|
16
|
+
parameters:
|
|
17
|
+
- name: size
|
|
18
|
+
type: String
|
|
19
|
+
default: default
|
|
20
|
+
description: Size of the element
|
|
21
|
+
data_attributes: []
|
|
22
|
+
css_variables: []
|