maquina-components 0.2.0 → 0.3.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.
- checksums.yaml +4 -4
- data/README.md +51 -0
- data/app/assets/stylesheets/combobox.css +218 -0
- data/app/assets/stylesheets/toast.css +433 -0
- data/app/assets/tailwind/maquina_components_engine/engine.css +2 -0
- data/app/helpers/maquina_components/combobox_helper.rb +300 -0
- data/app/helpers/maquina_components/toast_helper.rb +115 -0
- data/app/javascript/controllers/combobox_controller.js +325 -0
- data/app/javascript/controllers/toast_controller.js +115 -0
- data/app/javascript/controllers/toaster_controller.js +226 -0
- data/app/views/components/_combobox.html.erb +13 -0
- data/app/views/components/_toast.html.erb +53 -0
- data/app/views/components/_toaster.html.erb +17 -0
- data/app/views/components/combobox/_content.html.erb +17 -0
- data/app/views/components/combobox/_empty.html.erb +9 -0
- data/app/views/components/combobox/_group.html.erb +8 -0
- data/app/views/components/combobox/_input.html.erb +18 -0
- data/app/views/components/combobox/_label.html.erb +8 -0
- data/app/views/components/combobox/_list.html.erb +8 -0
- data/app/views/components/combobox/_option.html.erb +24 -0
- data/app/views/components/combobox/_separator.html.erb +6 -0
- data/app/views/components/combobox/_trigger.html.erb +22 -0
- data/app/views/components/toast/_action.html.erb +14 -0
- data/app/views/components/toast/_description.html.erb +8 -0
- data/app/views/components/toast/_title.html.erb +8 -0
- data/lib/maquina_components/version.rb +1 -1
- metadata +24 -2
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<%# locals: (variant: :default, title: nil, description: nil, icon: nil, duration: 5000, dismissible: true, css_classes: "", **html_options) %>
|
|
2
|
+
<%
|
|
3
|
+
# Auto-select icon based on variant if not provided
|
|
4
|
+
default_icons = {
|
|
5
|
+
default: nil,
|
|
6
|
+
success: :circle_check,
|
|
7
|
+
info: :info,
|
|
8
|
+
warning: :triangle_alert,
|
|
9
|
+
error: :circle_x
|
|
10
|
+
}
|
|
11
|
+
toast_icon = icon || default_icons[variant]
|
|
12
|
+
%>
|
|
13
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
14
|
+
component: :toast,
|
|
15
|
+
controller: "toast",
|
|
16
|
+
variant: variant,
|
|
17
|
+
toast_duration_value: duration,
|
|
18
|
+
toast_dismissible_value: dismissible,
|
|
19
|
+
state: "entering"
|
|
20
|
+
) %>
|
|
21
|
+
|
|
22
|
+
<%= content_tag :div,
|
|
23
|
+
role: "alert",
|
|
24
|
+
class: css_classes.presence,
|
|
25
|
+
data: merged_data,
|
|
26
|
+
**html_options do %>
|
|
27
|
+
<% if toast_icon %>
|
|
28
|
+
<div data-toast-part="icon">
|
|
29
|
+
<%= icon_for toast_icon, class: "size-5" %>
|
|
30
|
+
</div>
|
|
31
|
+
<% end %>
|
|
32
|
+
|
|
33
|
+
<div data-toast-part="content">
|
|
34
|
+
<% if title.present? %>
|
|
35
|
+
<%= render "components/toast/title", text: title %>
|
|
36
|
+
<% end %>
|
|
37
|
+
|
|
38
|
+
<% if description.present? %>
|
|
39
|
+
<%= render "components/toast/description", text: description %>
|
|
40
|
+
<% end %>
|
|
41
|
+
|
|
42
|
+
<%= yield if block_given? %>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<% if dismissible %>
|
|
46
|
+
<button type="button"
|
|
47
|
+
data-toast-part="close"
|
|
48
|
+
data-action="toast#dismiss"
|
|
49
|
+
aria-label="Dismiss notification">
|
|
50
|
+
<%= icon_for :x, class: "size-4" %>
|
|
51
|
+
</button>
|
|
52
|
+
<% end %>
|
|
53
|
+
<% end %>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<%# locals: (position: :bottom_right, css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
component: :toaster,
|
|
4
|
+
controller: "toaster",
|
|
5
|
+
position: position.to_s.dasherize,
|
|
6
|
+
toaster_target: "container"
|
|
7
|
+
) %>
|
|
8
|
+
|
|
9
|
+
<%= content_tag :div,
|
|
10
|
+
id: "toaster",
|
|
11
|
+
role: "region",
|
|
12
|
+
aria: { label: "Notifications", live: "polite" },
|
|
13
|
+
class: css_classes.presence,
|
|
14
|
+
data: merged_data,
|
|
15
|
+
**html_options do %>
|
|
16
|
+
<%= yield if block_given? %>
|
|
17
|
+
<% end %>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<%# locals: (id:, align: :start, width: :default, css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
combobox_part: "content",
|
|
4
|
+
combobox_target: "content",
|
|
5
|
+
align: align,
|
|
6
|
+
width: width
|
|
7
|
+
) %>
|
|
8
|
+
|
|
9
|
+
<%= content_tag :div,
|
|
10
|
+
id: id,
|
|
11
|
+
popover: "auto",
|
|
12
|
+
role: "listbox",
|
|
13
|
+
class: css_classes.presence,
|
|
14
|
+
data: merged_data,
|
|
15
|
+
**html_options do %>
|
|
16
|
+
<%= yield %>
|
|
17
|
+
<% end %>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<%# locals: (text: "No results found.", css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
combobox_part: "empty",
|
|
4
|
+
combobox_target: "empty"
|
|
5
|
+
) %>
|
|
6
|
+
|
|
7
|
+
<%= content_tag :div, class: css_classes.presence, data: merged_data, hidden: true, **html_options do %>
|
|
8
|
+
<%= text %>
|
|
9
|
+
<% end %>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<%# locals: (css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
combobox_part: "group"
|
|
4
|
+
) %>
|
|
5
|
+
|
|
6
|
+
<%= content_tag :div, role: "group", class: css_classes.presence, data: merged_data, **html_options do %>
|
|
7
|
+
<%= yield %>
|
|
8
|
+
<% end %>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<%# locals: (placeholder: "Search...", css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
combobox_part: "input",
|
|
4
|
+
combobox_target: "input",
|
|
5
|
+
action: "input->combobox#filter"
|
|
6
|
+
) %>
|
|
7
|
+
|
|
8
|
+
<div data-combobox-part="input-wrapper">
|
|
9
|
+
<%= icon_for :search, class: "size-4 shrink-0 opacity-50" %>
|
|
10
|
+
<%= tag.input type: "text",
|
|
11
|
+
placeholder: placeholder,
|
|
12
|
+
autocomplete: "off",
|
|
13
|
+
autocorrect: "off",
|
|
14
|
+
spellcheck: false,
|
|
15
|
+
class: css_classes.presence,
|
|
16
|
+
data: merged_data,
|
|
17
|
+
**html_options %>
|
|
18
|
+
</div>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<%# locals: (text: nil, css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
combobox_part: "label"
|
|
4
|
+
) %>
|
|
5
|
+
|
|
6
|
+
<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
|
|
7
|
+
<%= text || yield %>
|
|
8
|
+
<% end %>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<%# locals: (value:, selected: false, disabled: false, css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
combobox_part: "option",
|
|
4
|
+
combobox_target: "option",
|
|
5
|
+
value: value,
|
|
6
|
+
selected: selected,
|
|
7
|
+
action: "click->combobox#select"
|
|
8
|
+
) %>
|
|
9
|
+
|
|
10
|
+
<% aria_attrs = { selected: selected } %>
|
|
11
|
+
<% aria_attrs[:disabled] = true if disabled %>
|
|
12
|
+
|
|
13
|
+
<%= content_tag :div,
|
|
14
|
+
role: "option",
|
|
15
|
+
tabindex: "-1",
|
|
16
|
+
aria: aria_attrs,
|
|
17
|
+
class: css_classes.presence,
|
|
18
|
+
data: merged_data,
|
|
19
|
+
**html_options do %>
|
|
20
|
+
<span data-combobox-part="check" class="<%= 'invisible' unless selected %>">
|
|
21
|
+
<%= icon_for :check, class: "size-4" %>
|
|
22
|
+
</span>
|
|
23
|
+
<%= yield %>
|
|
24
|
+
<% end %>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<%# locals: (for_id:, placeholder: "Select...", variant: :outline, size: :default, css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
component: :button,
|
|
4
|
+
variant: variant,
|
|
5
|
+
size: size,
|
|
6
|
+
combobox_part: "trigger",
|
|
7
|
+
combobox_target: "trigger",
|
|
8
|
+
action: "combobox#toggle"
|
|
9
|
+
) %>
|
|
10
|
+
|
|
11
|
+
<%= content_tag :button,
|
|
12
|
+
type: "button",
|
|
13
|
+
popovertarget: for_id,
|
|
14
|
+
popovertargetaction: "toggle",
|
|
15
|
+
role: "combobox",
|
|
16
|
+
aria: { expanded: false, haspopup: "listbox", controls: for_id },
|
|
17
|
+
class: css_classes.presence,
|
|
18
|
+
data: merged_data,
|
|
19
|
+
**html_options do %>
|
|
20
|
+
<span data-combobox-target="label"><%= placeholder %></span>
|
|
21
|
+
<%= icon_for :chevrons_up_down, class: "size-4 shrink-0 opacity-50" %>
|
|
22
|
+
<% end %>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<%# locals: (label:, href: nil, method: nil, css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
toast_part: "action"
|
|
4
|
+
) %>
|
|
5
|
+
|
|
6
|
+
<% merged_data["turbo-method"] = method if method.present? %>
|
|
7
|
+
|
|
8
|
+
<% if href.present? %>
|
|
9
|
+
<%= link_to label, href, class: css_classes.presence, data: merged_data, **html_options %>
|
|
10
|
+
<% else %>
|
|
11
|
+
<%= content_tag :button, type: "button", class: css_classes.presence, data: merged_data, **html_options do %>
|
|
12
|
+
<%= label %>
|
|
13
|
+
<% end %>
|
|
14
|
+
<% end %>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<%# locals: (text: nil, css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
toast_part: "description"
|
|
4
|
+
) %>
|
|
5
|
+
|
|
6
|
+
<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
|
|
7
|
+
<%= text || yield %>
|
|
8
|
+
<% end %>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<%# locals: (text: nil, css_classes: "", **html_options) %>
|
|
2
|
+
<% merged_data = (html_options.delete(:data) || {}).merge(
|
|
3
|
+
toast_part: "title"
|
|
4
|
+
) %>
|
|
5
|
+
|
|
6
|
+
<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
|
|
7
|
+
<%= text || yield %>
|
|
8
|
+
<% end %>
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: maquina-components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Mario Alberto Chávez
|
|
@@ -52,6 +52,7 @@ files:
|
|
|
52
52
|
- app/assets/stylesheets/badge.css
|
|
53
53
|
- app/assets/stylesheets/breadcrumbs.css
|
|
54
54
|
- app/assets/stylesheets/card.css
|
|
55
|
+
- app/assets/stylesheets/combobox.css
|
|
55
56
|
- app/assets/stylesheets/dropdown_menu.css
|
|
56
57
|
- app/assets/stylesheets/empty.css
|
|
57
58
|
- app/assets/stylesheets/form.css
|
|
@@ -60,26 +61,33 @@ files:
|
|
|
60
61
|
- app/assets/stylesheets/pagination.css
|
|
61
62
|
- app/assets/stylesheets/sidebar.css
|
|
62
63
|
- app/assets/stylesheets/table.css
|
|
64
|
+
- app/assets/stylesheets/toast.css
|
|
63
65
|
- app/assets/stylesheets/toggle_group.css
|
|
64
66
|
- app/assets/tailwind/maquina_components_engine/engine.css
|
|
65
67
|
- app/helpers/maquina_components/breadcrumbs_helper.rb
|
|
68
|
+
- app/helpers/maquina_components/combobox_helper.rb
|
|
66
69
|
- app/helpers/maquina_components/dropdown_menu_helper.rb
|
|
67
70
|
- app/helpers/maquina_components/empty_helper.rb
|
|
68
71
|
- app/helpers/maquina_components/icons_helper.rb
|
|
69
72
|
- app/helpers/maquina_components/pagination_helper.rb
|
|
70
73
|
- app/helpers/maquina_components/sidebar_helper.rb
|
|
71
74
|
- app/helpers/maquina_components/table_helper.rb
|
|
75
|
+
- app/helpers/maquina_components/toast_helper.rb
|
|
72
76
|
- app/helpers/maquina_components/toggle_group_helper.rb
|
|
73
77
|
- app/javascript/controllers/breadcrumb_controller.js
|
|
78
|
+
- app/javascript/controllers/combobox_controller.js
|
|
74
79
|
- app/javascript/controllers/dropdown_menu_controller.js
|
|
75
80
|
- app/javascript/controllers/menu_button_controller.js
|
|
76
81
|
- app/javascript/controllers/sidebar_controller.js
|
|
77
82
|
- app/javascript/controllers/sidebar_trigger_controller.js
|
|
83
|
+
- app/javascript/controllers/toast_controller.js
|
|
84
|
+
- app/javascript/controllers/toaster_controller.js
|
|
78
85
|
- app/javascript/controllers/toggle_group_controller.js
|
|
79
86
|
- app/views/components/_alert.html.erb
|
|
80
87
|
- app/views/components/_badge.html.erb
|
|
81
88
|
- app/views/components/_breadcrumbs.html.erb
|
|
82
89
|
- app/views/components/_card.html.erb
|
|
90
|
+
- app/views/components/_combobox.html.erb
|
|
83
91
|
- app/views/components/_dropdown.html.erb
|
|
84
92
|
- app/views/components/_dropdown_menu.html.erb
|
|
85
93
|
- app/views/components/_empty.html.erb
|
|
@@ -90,6 +98,8 @@ files:
|
|
|
90
98
|
- app/views/components/_sidebar.html.erb
|
|
91
99
|
- app/views/components/_simple_table.html.erb
|
|
92
100
|
- app/views/components/_table.html.erb
|
|
101
|
+
- app/views/components/_toast.html.erb
|
|
102
|
+
- app/views/components/_toaster.html.erb
|
|
93
103
|
- app/views/components/_toggle_group.html.erb
|
|
94
104
|
- app/views/components/alert/_description.html.erb
|
|
95
105
|
- app/views/components/alert/_title.html.erb
|
|
@@ -105,6 +115,15 @@ files:
|
|
|
105
115
|
- app/views/components/card/_footer.html.erb
|
|
106
116
|
- app/views/components/card/_header.html.erb
|
|
107
117
|
- app/views/components/card/_title.html.erb
|
|
118
|
+
- app/views/components/combobox/_content.html.erb
|
|
119
|
+
- app/views/components/combobox/_empty.html.erb
|
|
120
|
+
- app/views/components/combobox/_group.html.erb
|
|
121
|
+
- app/views/components/combobox/_input.html.erb
|
|
122
|
+
- app/views/components/combobox/_label.html.erb
|
|
123
|
+
- app/views/components/combobox/_list.html.erb
|
|
124
|
+
- app/views/components/combobox/_option.html.erb
|
|
125
|
+
- app/views/components/combobox/_separator.html.erb
|
|
126
|
+
- app/views/components/combobox/_trigger.html.erb
|
|
108
127
|
- app/views/components/dropdown_menu/_content.html.erb
|
|
109
128
|
- app/views/components/dropdown_menu/_group.html.erb
|
|
110
129
|
- app/views/components/dropdown_menu/_item.html.erb
|
|
@@ -143,6 +162,9 @@ files:
|
|
|
143
162
|
- app/views/components/table/_head.html.erb
|
|
144
163
|
- app/views/components/table/_header.html.erb
|
|
145
164
|
- app/views/components/table/_row.html.erb
|
|
165
|
+
- app/views/components/toast/_action.html.erb
|
|
166
|
+
- app/views/components/toast/_description.html.erb
|
|
167
|
+
- app/views/components/toast/_title.html.erb
|
|
146
168
|
- app/views/components/toggle_group/_item.html.erb
|
|
147
169
|
- config/importmap.rb
|
|
148
170
|
- lib/generators/maquina_components/install/USAGE
|
|
@@ -174,7 +196,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
174
196
|
- !ruby/object:Gem::Version
|
|
175
197
|
version: '0'
|
|
176
198
|
requirements: []
|
|
177
|
-
rubygems_version: 4.0.
|
|
199
|
+
rubygems_version: 4.0.3
|
|
178
200
|
specification_version: 4
|
|
179
201
|
summary: ERB, TailwindCSS, and StimulusJS UI components based on Shadcn/UI.
|
|
180
202
|
test_files: []
|