okonomi_ui_kit 0.1.8 → 0.1.10

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.
Files changed (81) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +50 -6
  3. data/app/assets/builds/okonomi_ui_kit/application.tailwind.css +508 -225
  4. data/app/helpers/okonomi_ui_kit/CLAUDE.md +619 -0
  5. data/app/helpers/okonomi_ui_kit/application_helper.rb +8 -0
  6. data/app/helpers/okonomi_ui_kit/attribute_section_helper.rb +5 -5
  7. data/app/helpers/okonomi_ui_kit/component.rb +14 -6
  8. data/app/helpers/okonomi_ui_kit/components/alert.rb +1 -1
  9. data/app/helpers/okonomi_ui_kit/components/badge.rb +4 -4
  10. data/app/helpers/okonomi_ui_kit/components/breadcrumbs.rb +4 -4
  11. data/app/helpers/okonomi_ui_kit/components/button_base.rb +94 -22
  12. data/app/helpers/okonomi_ui_kit/components/button_tag.rb +14 -8
  13. data/app/helpers/okonomi_ui_kit/components/button_to.rb +8 -7
  14. data/app/helpers/okonomi_ui_kit/components/code.rb +41 -37
  15. data/app/helpers/okonomi_ui_kit/components/confirmation_modal.rb +130 -0
  16. data/app/helpers/okonomi_ui_kit/components/dropdown_button.rb +147 -0
  17. data/app/helpers/okonomi_ui_kit/components/forms/check_box_with_label.rb +38 -0
  18. data/app/helpers/okonomi_ui_kit/components/forms/collection_select.rb +57 -0
  19. data/app/helpers/okonomi_ui_kit/components/forms/date_field.rb +9 -0
  20. data/app/helpers/okonomi_ui_kit/components/forms/datetime_local_field.rb +9 -0
  21. data/app/helpers/okonomi_ui_kit/components/forms/email_field.rb +9 -0
  22. data/app/helpers/okonomi_ui_kit/components/forms/field.rb +24 -0
  23. data/app/helpers/okonomi_ui_kit/components/forms/field_set.rb +17 -0
  24. data/app/helpers/okonomi_ui_kit/components/forms/input_base.rb +57 -0
  25. data/app/helpers/okonomi_ui_kit/components/forms/label.rb +27 -0
  26. data/app/helpers/okonomi_ui_kit/components/forms/multi_select.rb +18 -0
  27. data/app/helpers/okonomi_ui_kit/components/forms/number_field.rb +9 -0
  28. data/app/helpers/okonomi_ui_kit/components/forms/password_field.rb +9 -0
  29. data/app/helpers/okonomi_ui_kit/components/forms/search_field.rb +9 -0
  30. data/app/helpers/okonomi_ui_kit/components/forms/select.rb +57 -0
  31. data/app/helpers/okonomi_ui_kit/components/forms/show_if.rb +28 -0
  32. data/app/helpers/okonomi_ui_kit/components/forms/telephone_field.rb +9 -0
  33. data/app/helpers/okonomi_ui_kit/components/forms/text_area.rb +9 -0
  34. data/app/helpers/okonomi_ui_kit/components/forms/text_field.rb +9 -0
  35. data/app/helpers/okonomi_ui_kit/components/forms/time_field.rb +9 -0
  36. data/app/helpers/okonomi_ui_kit/components/forms/upload_field.rb +25 -0
  37. data/app/helpers/okonomi_ui_kit/components/forms/url_field.rb +9 -0
  38. data/app/helpers/okonomi_ui_kit/components/forms.rb +6 -0
  39. data/app/helpers/okonomi_ui_kit/components/icon.rb +6 -6
  40. data/app/helpers/okonomi_ui_kit/components/link_to.rb +11 -10
  41. data/app/helpers/okonomi_ui_kit/components/navigation.rb +98 -0
  42. data/app/helpers/okonomi_ui_kit/components/page.rb +18 -203
  43. data/app/helpers/okonomi_ui_kit/components/page_header.rb +111 -0
  44. data/app/helpers/okonomi_ui_kit/components/page_section.rb +145 -0
  45. data/app/helpers/okonomi_ui_kit/components/table.rb +7 -8
  46. data/app/helpers/okonomi_ui_kit/components/typography.rb +16 -16
  47. data/app/helpers/okonomi_ui_kit/components.rb +4 -0
  48. data/app/helpers/okonomi_ui_kit/configs.rb +4 -0
  49. data/app/helpers/okonomi_ui_kit/form_builder.rb +39 -130
  50. data/app/helpers/okonomi_ui_kit/form_component.rb +7 -0
  51. data/app/helpers/okonomi_ui_kit/svg_icons.rb +5 -5
  52. data/app/helpers/okonomi_ui_kit/t_w_merge.rb +33 -27
  53. data/app/helpers/okonomi_ui_kit/ui_helper.rb +17 -58
  54. data/app/javascript/okonomi_ui_kit/controllers/dropdown_controller.js +6 -0
  55. data/app/views/okonomi/components/confirmation_modal/_confirmation_modal.html.erb +76 -0
  56. data/app/views/okonomi/components/dropdown_button/_dropdown_button.html.erb +282 -0
  57. data/app/views/okonomi/components/forms/check_box_with_label/_check_box_with_label.html.erb +6 -0
  58. data/app/views/okonomi/{forms/tailwind → components/forms/field}/_field.html.erb +7 -7
  59. data/app/views/okonomi/components/forms/field_set/_field_set.html.erb +3 -0
  60. data/app/views/okonomi/components/forms/upload_field/_upload_field.html.erb +1 -0
  61. data/app/views/okonomi/components/navigation/_link.html.erb +18 -0
  62. data/app/views/okonomi/components/navigation/_navigation.html.erb +4 -0
  63. data/app/views/okonomi/components/page/_page.html.erb +1 -1
  64. data/app/views/okonomi/components/page_header/_page_header.html.erb +4 -0
  65. data/app/views/okonomi/components/page_section/_page_section.html.erb +4 -0
  66. data/app/views/okonomi/forms/tailwind/_checkbox_label.html.erb +2 -2
  67. data/app/views/okonomi/forms/tailwind/_multi_select.html.erb +2 -4
  68. data/app/views/okonomi/forms/tailwind/_upload_field.html.erb +10 -10
  69. data/config/importmap.rb +1 -1
  70. data/lib/okonomi_ui_kit/engine.rb +0 -1
  71. data/lib/okonomi_ui_kit/version.rb +1 -1
  72. metadata +47 -16
  73. data/app/helpers/okonomi_ui_kit/navigation_helper.rb +0 -72
  74. data/app/helpers/okonomi_ui_kit/theme.rb +0 -136
  75. data/app/helpers/okonomi_ui_kit/theme_helper.rb +0 -17
  76. data/app/views/okonomi/forms/tailwind/_field_set.html.erb +0 -3
  77. data/app/views/okonomi/modals/_confirmation_modal.html.erb +0 -77
  78. data/app/views/okonomi/navigation/_link.html.erb +0 -15
  79. data/app/views/okonomi/navigation/_menu.html.erb +0 -3
  80. data/app/views/okonomi/navigation/_navbar.html.erb +0 -105
  81. data/app/views/okonomi/page_builder/_page.html.erb +0 -3
@@ -0,0 +1,282 @@
1
+ <%
2
+ # Extract dropdown builder from block execution
3
+ yield(dropdown_builder)
4
+
5
+ primary = dropdown_builder.primary_item
6
+ menu_items = dropdown_builder.menu_items
7
+
8
+ # Check if there are any menu items beyond the primary
9
+ has_menu_items = menu_items.any? { |item| item != primary }
10
+
11
+ # For split buttons, we need to handle borders specially for outlined variant
12
+ is_outlined = base_button_classes.include?("border")
13
+ is_text_variant = !base_button_classes.include?("border") && !base_button_classes.include?("bg-")
14
+
15
+ # Build classes for the primary action
16
+ if is_text_variant
17
+ # Text variant: keep normal rounded corners
18
+ primary_classes = base_button_classes
19
+ .gsub(/px-2/, "px-2 pr-3") # Increase right padding
20
+ else
21
+ # Other variants: remove right border radius and handle borders
22
+ primary_classes = base_button_classes
23
+ .gsub(/rounded-md/, "rounded-l-md")
24
+ .gsub(/px-2/, "px-2 pr-3") # Increase right padding
25
+
26
+ # Add border-r-0 for outlined variant to remove double border
27
+ primary_classes += " border-r-0" if is_outlined
28
+ end
29
+
30
+ # Build classes for dropdown trigger
31
+ if is_text_variant
32
+ # Text variant: keep normal rounded corners and add spacing
33
+ trigger_classes = base_button_classes
34
+ .gsub(/px-\d+/, "px-2") + " ml-1"
35
+ else
36
+ # Other variants: remove left border radius and overlap
37
+ trigger_classes = base_button_classes
38
+ .gsub(/rounded-md/, "rounded-r-md")
39
+ .gsub(/px-\d+/, "px-2") + " -ml-px"
40
+ end
41
+ %>
42
+
43
+ <div <%= tag.attributes(options.merge(
44
+ class: ["relative inline-block", options[:class]].compact.join(" "),
45
+ data: (options[:data] || {}).merge(controller: "dropdown", action: "click@window->dropdown#closeOnClickOutside")
46
+ )) %>>
47
+ <% if primary && !has_menu_items %>
48
+ <%# Render only primary button when no menu items %>
49
+ <% if primary[:type] == :link %>
50
+ <%= link_to primary[:options], primary[:html_options].merge(
51
+ class: base_button_classes
52
+ ) do %>
53
+ <% if primary[:icon] %>
54
+ <%= ui.icon(primary[:icon], class: component.style(:primary, :icon)) %>
55
+ <% end %>
56
+ <% if primary[:block] %>
57
+ <%= capture(&primary[:block]) %>
58
+ <% else %>
59
+ <%= primary[:name] %>
60
+ <% end %>
61
+ <% end %>
62
+ <% elsif primary[:type] == :button %>
63
+ <%= button_to primary[:options], primary[:html_options].merge(
64
+ class: base_button_classes
65
+ ) do %>
66
+ <% if primary[:icon] %>
67
+ <%= ui.icon(primary[:icon], class: component.style(:primary, :icon)) %>
68
+ <% end %>
69
+ <% if primary[:block] %>
70
+ <%= capture(&primary[:block]) %>
71
+ <% else %>
72
+ <%= primary[:name] %>
73
+ <% end %>
74
+ <% end %>
75
+ <% elsif primary[:type] == :button_tag %>
76
+ <%= button_tag primary[:options].merge(
77
+ class: base_button_classes
78
+ ) do %>
79
+ <% if primary[:icon] %>
80
+ <%= ui.icon(primary[:icon], class: component.style(:primary, :icon)) %>
81
+ <% end %>
82
+ <% if primary[:block] %>
83
+ <%= capture(&primary[:block]) %>
84
+ <% else %>
85
+ <%= primary[:name] %>
86
+ <% end %>
87
+ <% end %>
88
+ <% end %>
89
+ <% elsif primary && has_menu_items %>
90
+ <div class="relative inline-flex">
91
+ <% if primary[:type] == :link %>
92
+ <% primary_options = primary[:html_options].dup %>
93
+ <%= link_to primary[:options], primary_options.merge(
94
+ class: primary_classes
95
+ ) do %>
96
+ <% if primary[:icon] %>
97
+ <%= ui.icon(primary[:icon], class: component.style(:primary, :icon)) %>
98
+ <% end %>
99
+ <% if primary[:block] %>
100
+ <%= capture(&primary[:block]) %>
101
+ <% else %>
102
+ <%= primary[:name] %>
103
+ <% end %>
104
+ <% end %>
105
+ <% elsif primary[:type] == :button %>
106
+ <% primary_options = primary[:html_options].dup %>
107
+ <%= button_to primary[:options], primary_options.merge(
108
+ class: primary_classes
109
+ ) do %>
110
+ <% if primary[:icon] %>
111
+ <%= ui.icon(primary[:icon], class: component.style(:primary, :icon)) %>
112
+ <% end %>
113
+ <% if primary[:block] %>
114
+ <%= capture(&primary[:block]) %>
115
+ <% else %>
116
+ <%= primary[:name] %>
117
+ <% end %>
118
+ <% end %>
119
+ <% elsif primary[:type] == :button_tag %>
120
+ <% primary_options = primary[:options].dup %>
121
+ <%= button_tag primary_options.merge(
122
+ class: primary_classes
123
+ ) do %>
124
+ <% if primary[:icon] %>
125
+ <%= ui.icon(primary[:icon], class: component.style(:primary, :icon)) %>
126
+ <% end %>
127
+ <% if primary[:block] %>
128
+ <%= capture(&primary[:block]) %>
129
+ <% else %>
130
+ <%= primary[:name] %>
131
+ <% end %>
132
+ <% end %>
133
+ <% end %>
134
+
135
+ <button type="button"
136
+ class="<%= trigger_classes %>"
137
+ data-action="click->dropdown#toggle"
138
+ aria-haspopup="true"
139
+ aria-expanded="false">
140
+ <span class="sr-only">Open options</span>
141
+ <%= ui.icon("heroicons/solid/chevron-down", class: component.style(:primary, :chevron)) %>
142
+ </button>
143
+ </div>
144
+ <% else %>
145
+ <button type="button"
146
+ class="<%= base_button_classes %>"
147
+ data-action="click->dropdown#toggle"
148
+ aria-haspopup="true"
149
+ aria-expanded="false">
150
+ Options
151
+ <%= ui.icon("heroicons/solid/chevron-down", class: "-mr-1 h-5 w-5") %>
152
+ </button>
153
+ <% end %>
154
+
155
+ <% if has_menu_items %>
156
+ <div class="<%= menu_classes %> hidden" data-dropdown-target="menu">
157
+ <div class="py-1" role="menu" aria-orientation="vertical">
158
+ <% # Check if any menu item has an icon to ensure consistent alignment %>
159
+ <% has_any_icon = menu_items.any? { |item| item != primary && item[:icon] && item[:type] != :divider } %>
160
+
161
+ <% menu_items.each do |item| %>
162
+ <% next if item == primary %> <%# Skip the primary item in the menu %>
163
+
164
+ <% if item[:type] == :divider %>
165
+ <div class="<%= component.style(:menu, :divider) %>" role="separator"></div>
166
+ <% elsif item[:type] == :link %>
167
+ <% link_options = item[:html_options].dup %>
168
+ <% icon_path = item[:icon] %>
169
+ <% link_class = [component.style(:menu, :item, :root), link_options.delete(:class)].compact.join(" ") %>
170
+
171
+ <% # Add deferred close action %>
172
+ <% link_options[:data] ||= {} %>
173
+ <% existing_action = link_options[:data][:action] || link_options.delete("data-action") %>
174
+ <% link_options[:data][:action] = [existing_action, "click->dropdown#closeDeferred"].compact.join(" ") %>
175
+
176
+ <%= link_to item[:options], link_options.merge(
177
+ class: link_class,
178
+ role: "menuitem"
179
+ ) do %>
180
+ <% if has_any_icon %>
181
+ <span class="<%= component.style(:menu, :item, :label) %>">
182
+ <% if icon_path %>
183
+ <%= ui.icon(icon_path, class: component.style(:menu, :item, :icon)) %>
184
+ <% else %>
185
+ <span class="<%= component.style(:menu, :item, :icon) %>"></span>
186
+ <% end %>
187
+ <% if item[:block] %>
188
+ <%= capture(&item[:block]) %>
189
+ <% else %>
190
+ <%= item[:name] %>
191
+ <% end %>
192
+ </span>
193
+ <% else %>
194
+ <% if item[:block] %>
195
+ <%= capture(&item[:block]) %>
196
+ <% else %>
197
+ <%= item[:name] %>
198
+ <% end %>
199
+ <% end %>
200
+ <% end %>
201
+ <% elsif item[:type] == :button %>
202
+ <% button_options = item[:html_options].dup %>
203
+ <% icon_path = item[:icon] %>
204
+ <% button_class = [component.style(:menu, :item, :root), button_options.delete(:class)].compact.join(" ") %>
205
+
206
+ <% # Add deferred close action %>
207
+ <% button_options[:data] ||= {} %>
208
+ <% existing_action = button_options[:data][:action] || button_options.delete("data-action") %>
209
+ <% button_options[:data][:action] = [existing_action, "click->dropdown#closeDeferred"].compact.join(" ") %>
210
+
211
+ <%= button_to item[:options], button_options.merge(
212
+ class: button_class,
213
+ role: "menuitem"
214
+ ) do %>
215
+ <% if has_any_icon %>
216
+ <span class="<%= component.style(:menu, :item, :label) %>">
217
+ <% if icon_path %>
218
+ <%= ui.icon(icon_path, class: component.style(:menu, :item, :icon)) %>
219
+ <% else %>
220
+ <span class="<%= component.style(:menu, :item, :icon) %>"></span>
221
+ <% end %>
222
+ <% if item[:block] %>
223
+ <%= capture(&item[:block]) %>
224
+ <% else %>
225
+ <%= item[:name] %>
226
+ <% end %>
227
+ </span>
228
+ <% else %>
229
+ <% if item[:block] %>
230
+ <%= capture(&item[:block]) %>
231
+ <% else %>
232
+ <%= item[:name] %>
233
+ <% end %>
234
+ <% end %>
235
+ <% end %>
236
+ <% elsif item[:type] == :button_tag %>
237
+ <% button_options = item[:options].dup %>
238
+ <% icon_path = item[:icon] %>
239
+ <% button_class = [component.style(:menu, :item, :root), button_options.delete(:class)].compact.join(" ") %>
240
+
241
+ <% # Add deferred close action %>
242
+ <% button_options[:data] ||= {} %>
243
+ <% existing_action = button_options[:data][:action] || button_options.delete("data-action") %>
244
+ <% button_options[:data][:action] = [existing_action, "click->dropdown#closeDeferred"].compact.join(" ") %>
245
+
246
+ <% # Handle onclick attribute if present %>
247
+ <% if button_options[:onclick] %>
248
+ <% original_onclick = button_options[:onclick] %>
249
+ <% button_options[:onclick] = "#{original_onclick}; setTimeout(() => { this.closest('[data-controller=\"dropdown\"]').querySelector('[data-dropdown-target=\"menu\"]').classList.add('hidden'); }, 50);" %>
250
+ <% end %>
251
+
252
+ <%= button_tag button_options.merge(
253
+ class: button_class,
254
+ role: "menuitem"
255
+ ) do %>
256
+ <% if has_any_icon %>
257
+ <span class="<%= component.style(:menu, :item, :label) %>">
258
+ <% if icon_path %>
259
+ <%= ui.icon(icon_path, class: component.style(:menu, :item, :icon)) %>
260
+ <% else %>
261
+ <span class="<%= component.style(:menu, :item, :icon) %>"></span>
262
+ <% end %>
263
+ <% if item[:block] %>
264
+ <%= capture(&item[:block]) %>
265
+ <% else %>
266
+ <%= item[:name] %>
267
+ <% end %>
268
+ </span>
269
+ <% else %>
270
+ <% if item[:block] %>
271
+ <%= capture(&item[:block]) %>
272
+ <% else %>
273
+ <%= item[:name] %>
274
+ <% end %>
275
+ <% end %>
276
+ <% end %>
277
+ <% end %>
278
+ <% end %>
279
+ </div>
280
+ </div>
281
+ <% end %>
282
+ </div>
@@ -0,0 +1,6 @@
1
+ <% if options[:label] %>
2
+ <%= form.label method, options[:label], class: component.style(:label, :root) %>
3
+ <% end %>
4
+ <% if options[:hint] %>
5
+ <p class="<%= component.style(:hint, :root) %>"><%= options[:hint] %></p>
6
+ <% end %>
@@ -1,15 +1,15 @@
1
- <div class="w-full flex flex-col gap-2">
2
- <div class="flex justify-between items-center" x-data="{ open: false }">
1
+ <div class="<%= component.style(:wrapper) %>">
2
+ <div class="<%= component.style(:header) %>" x-data="{ open: false }">
3
3
  <% if field_id %>
4
4
  <%= form.label field_id, t("activerecord.attributes.#{form.object_name}.#{field_id}") %>
5
5
  <% end %>
6
6
  <% if options[:hint] %>
7
7
  <div class="relative">
8
- <div class="text-primary-600 text-sm hover:cursor-help" @mouseover="open = true" @mouseover.away = "open = false">
8
+ <div class="<%= component.style(:hint, :trigger) %>" @mouseover="open = true" @mouseover.away = "open = false">
9
9
  Hilfe
10
10
  </div>
11
11
  <div x-show="open"
12
- class="text-xs absolute border rounded-md bg-gray-100 border-gray-600 text-gray-600 p-1 z-10"
12
+ class="<%= component.style(:hint, :content) %>"
13
13
  style="top: 32px; right: -10px; width: 200px; max-width: 400px; display: none;"
14
14
  x-transition:enter="transition duration-200 transform ease-out"
15
15
  x-transition:enter-start="scale-75"
@@ -21,12 +21,12 @@
21
21
  </div>
22
22
  <% end %>
23
23
  </div>
24
- <div class="block">
25
- <div class="grid grid-cols-<%= options[:columns] || 1 %> gap-2">
24
+ <div class="<%= component.style(:content) %>">
25
+ <div class="grid grid-cols-<%= options[:columns] || 1 %> gap-2 p-[1px]">
26
26
  <%= yield %>
27
27
  </div>
28
28
  <% if field_id && form.object.errors.include?(field_id) %>
29
- <div class="mt-1 text-danger-600 text-sm">
29
+ <div class="<%= component.style(:error) %>">
30
30
  <%= form.object.errors[field_id].join(", ") %>
31
31
  </div>
32
32
  <% end %>
@@ -0,0 +1,3 @@
1
+ <%= content_tag "div", class: component.style(:root) do %>
2
+ <%= yield %>
3
+ <% end %>
@@ -0,0 +1 @@
1
+ <%= render "okonomi/forms/tailwind/upload_field", component: component, form: form, method: method, options: options %>
@@ -0,0 +1,18 @@
1
+ <%
2
+ # Get the main view context that has access to helpers
3
+ view_context = style_helper.view
4
+
5
+ options = {
6
+ exact: defined?(exact) ? exact : false,
7
+ class: style_helper.style(:link, :base),
8
+ active_class: style_helper.style(:link, :active)
9
+ }
10
+ %>
11
+ <%= view_context.active_link_to path, options do %>
12
+ <% if defined?(initials) && initials.present? %>
13
+ <span class="<%= style_helper.style(:link, :initials, :base) %>"><%= initials %></span>
14
+ <% elsif defined?(icon) && icon.present? %>
15
+ <%= view_context.ui.icon icon, class: style_helper.style(:link, :icon) %>
16
+ <% end %>
17
+ <%= title %>
18
+ <% end %>
@@ -0,0 +1,4 @@
1
+ <% yield(builder) %>
2
+ <ul role="list" class="<%= builder.style(:menu, :base) %>">
3
+ <%= builder.render_groups %>
4
+ </ul>
@@ -1,4 +1,4 @@
1
- <div class="flex flex-col gap-8 p-8 <%= options[:class] || '' %>">
1
+ <div class="<%= options[:class] %>">
2
2
  <% content = capture { yield(builder) } %>
3
3
  <%= builder.render_content %>
4
4
  <%= content if builder.render_content.blank? %>
@@ -0,0 +1,4 @@
1
+ <div class="<%= options[:class] %>">
2
+ <% yield(builder) %>
3
+ <%= builder.render %>
4
+ </div>
@@ -0,0 +1,4 @@
1
+ <div class="<%= options[:class] %>">
2
+ <% yield(builder) if block_given? %>
3
+ <%= builder.render_content %>
4
+ </div>
@@ -3,7 +3,7 @@
3
3
  label_options[:for] = options[:id] if options[:id]
4
4
  %>
5
5
  <%= form.label(method, label_options) do %>
6
- <div class="<%= form.ui.get_theme.dig(:components, :checkbox, :label, :root) %>">
6
+ <div class="<%= component.style(:label, :root) %>">
7
7
  <% if options[:label] %>
8
8
  <%= options[:label] %>
9
9
  <% else %>
@@ -11,7 +11,7 @@
11
11
  <% end %>
12
12
  </div>
13
13
  <% if options[:hint] %>
14
- <div class="<%= form.ui.get_theme.dig(:components, :checkbox, :hint, :root) %>">
14
+ <div class="<%= component.style(:hint, :root) %>">
15
15
  <%= t("activerecord.hints.#{form.object.class.name.underscore}.#{method}") %>
16
16
  </div>
17
17
  <% end %>
@@ -5,11 +5,9 @@
5
5
  <% associated_class = association.klass %>
6
6
  <% associated_records = options[:collection] || associated_class.all %>
7
7
 
8
- <% p associated_records %>
9
-
10
- <div class="grid grid-cols-2 gap-2">
8
+ <div class="<%= component.style(:wrapper) %>">
11
9
  <% associated_records.each do |record| %>
12
- <div class="flex items-center">
10
+ <div class="<%= component.style(:item) %>">
13
11
  <% id = "#{method}_#{record.id}" %>
14
12
  <%= form.check_box_with_label method, { label: record.send(options[:label] || :name), multiple: true, id: id, checked: form.object.send(method).include?(record) }, record.id, nil %>
15
13
  </div>
@@ -1,24 +1,24 @@
1
1
  <div
2
2
  data-controller="upload"
3
3
  data-upload-target="dropzone"
4
- class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center cursor-pointer hover:bg-gray-50 relative"
4
+ class="<%= component.style(:dropzone) %>"
5
5
  >
6
- <%= form.label method, class: "block cursor-pointer" do %>
7
- <div class="flex flex-col items-center text-gray-600 space-y-2">
8
- <div data-upload-target="preview" class="w-full flex justify-center items-center">
6
+ <%= form.label method, class: component.style(:label) do %>
7
+ <div class="<%= component.style(:content) %>">
8
+ <div data-upload-target="preview" class="<%= component.style(:preview) %>">
9
9
  <% if form.object.send(method).attached? %>
10
10
  <% blob = form.object.send(method).blob %>
11
11
  <% if blob.image? %>
12
- <%= image_tag url_for(blob), class: "max-h-32" %>
12
+ <%= image_tag url_for(blob), class: component.style(:preview_image) %>
13
13
  <% else %>
14
- <%= ui.icon("heroicons/solid/document", class: "size-12 text-gray-400") %>
14
+ <%= ui.icon("heroicons/solid/document", class: component.style(:icon)) %>
15
15
  <% end %>
16
16
  <% else %>
17
- <%= ui.icon("heroicons/solid/plus", class: "size-12 w-12 text-gray-400") %>
17
+ <%= ui.icon("heroicons/solid/plus", class: component.style(:icon)) %>
18
18
  <% end %>
19
19
  </div>
20
20
 
21
- <p class="text-sm text-gray-500" data-upload-target="filename">
21
+ <p class="<%= component.style(:filename) %>" data-upload-target="filename">
22
22
  <% if form.object.send(method).attached? %>
23
23
  <%= form.object.send(method).filename %>
24
24
  <% else %>
@@ -28,7 +28,7 @@
28
28
  </div>
29
29
 
30
30
  <%= form.file_field method,
31
- class: "hidden",
31
+ class: component.style(:file_input),
32
32
  data: {
33
33
  upload_target: "input",
34
34
  action: "change->upload#updatePreview"
@@ -39,7 +39,7 @@
39
39
 
40
40
  <button type="button"
41
41
  data-action="upload#clear"
42
- class="absolute top-2 right-2 bg-red-100 text-red-700 px-2 py-1 text-xs rounded hover:bg-red-200">
42
+ class="<%= component.style(:clear_button) %>">
43
43
  Clear
44
44
  </button>
45
45
  </div>
data/config/importmap.rb CHANGED
@@ -4,4 +4,4 @@ pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
4
4
  pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
5
5
 
6
6
  pin "okonomi_ui_kit", to: "okonomi_ui_kit/application.js", preload: true
7
- pin_all_from OkonomiUiKit::Engine.root.join("app/javascript/okonomi_ui_kit/controllers"), under: "controllers", to: "okonomi_ui_kit/controllers"
7
+ pin_all_from OkonomiUiKit::Engine.root.join("app/javascript/okonomi_ui_kit/controllers"), under: "controllers", to: "okonomi_ui_kit/controllers"
@@ -22,7 +22,6 @@ module OkonomiUiKit
22
22
  ActiveSupport.on_load(:action_view) do
23
23
  include OkonomiUiKit::ApplicationHelper
24
24
  include OkonomiUiKit::AttributeSectionHelper
25
- include OkonomiUiKit::NavigationHelper
26
25
  include OkonomiUiKit::UiHelper
27
26
 
28
27
  ActionView::Base.field_error_proc = ->(html_tag, _instance) { html_tag.html_safe }
@@ -1,3 +1,3 @@
1
1
  module OkonomiUiKit
2
- VERSION = "0.1.8"
2
+ VERSION = "0.1.10"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: okonomi_ui_kit
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.8
4
+ version: 0.1.10
5
5
  platform: ruby
6
6
  authors:
7
7
  - Okonomi GmbH
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2025-08-01 00:00:00.000000000 Z
11
+ date: 2025-08-05 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -1355,9 +1355,11 @@ files:
1355
1355
  - app/assets/stylesheets/okonomi_ui_kit/application.css
1356
1356
  - app/assets/stylesheets/okonomi_ui_kit/application.tailwind.css
1357
1357
  - app/controllers/okonomi_ui_kit/application_controller.rb
1358
+ - app/helpers/okonomi_ui_kit/CLAUDE.md
1358
1359
  - app/helpers/okonomi_ui_kit/application_helper.rb
1359
1360
  - app/helpers/okonomi_ui_kit/attribute_section_helper.rb
1360
1361
  - app/helpers/okonomi_ui_kit/component.rb
1362
+ - app/helpers/okonomi_ui_kit/components.rb
1361
1363
  - app/helpers/okonomi_ui_kit/components/alert.rb
1362
1364
  - app/helpers/okonomi_ui_kit/components/badge.rb
1363
1365
  - app/helpers/okonomi_ui_kit/components/breadcrumbs.rb
@@ -1365,18 +1367,44 @@ files:
1365
1367
  - app/helpers/okonomi_ui_kit/components/button_tag.rb
1366
1368
  - app/helpers/okonomi_ui_kit/components/button_to.rb
1367
1369
  - app/helpers/okonomi_ui_kit/components/code.rb
1370
+ - app/helpers/okonomi_ui_kit/components/confirmation_modal.rb
1371
+ - app/helpers/okonomi_ui_kit/components/dropdown_button.rb
1372
+ - app/helpers/okonomi_ui_kit/components/forms.rb
1373
+ - app/helpers/okonomi_ui_kit/components/forms/check_box_with_label.rb
1374
+ - app/helpers/okonomi_ui_kit/components/forms/collection_select.rb
1375
+ - app/helpers/okonomi_ui_kit/components/forms/date_field.rb
1376
+ - app/helpers/okonomi_ui_kit/components/forms/datetime_local_field.rb
1377
+ - app/helpers/okonomi_ui_kit/components/forms/email_field.rb
1378
+ - app/helpers/okonomi_ui_kit/components/forms/field.rb
1379
+ - app/helpers/okonomi_ui_kit/components/forms/field_set.rb
1380
+ - app/helpers/okonomi_ui_kit/components/forms/input_base.rb
1381
+ - app/helpers/okonomi_ui_kit/components/forms/label.rb
1382
+ - app/helpers/okonomi_ui_kit/components/forms/multi_select.rb
1383
+ - app/helpers/okonomi_ui_kit/components/forms/number_field.rb
1384
+ - app/helpers/okonomi_ui_kit/components/forms/password_field.rb
1385
+ - app/helpers/okonomi_ui_kit/components/forms/search_field.rb
1386
+ - app/helpers/okonomi_ui_kit/components/forms/select.rb
1387
+ - app/helpers/okonomi_ui_kit/components/forms/show_if.rb
1388
+ - app/helpers/okonomi_ui_kit/components/forms/telephone_field.rb
1389
+ - app/helpers/okonomi_ui_kit/components/forms/text_area.rb
1390
+ - app/helpers/okonomi_ui_kit/components/forms/text_field.rb
1391
+ - app/helpers/okonomi_ui_kit/components/forms/time_field.rb
1392
+ - app/helpers/okonomi_ui_kit/components/forms/upload_field.rb
1393
+ - app/helpers/okonomi_ui_kit/components/forms/url_field.rb
1368
1394
  - app/helpers/okonomi_ui_kit/components/icon.rb
1369
1395
  - app/helpers/okonomi_ui_kit/components/link_to.rb
1396
+ - app/helpers/okonomi_ui_kit/components/navigation.rb
1370
1397
  - app/helpers/okonomi_ui_kit/components/page.rb
1398
+ - app/helpers/okonomi_ui_kit/components/page_header.rb
1399
+ - app/helpers/okonomi_ui_kit/components/page_section.rb
1371
1400
  - app/helpers/okonomi_ui_kit/components/table.rb
1372
1401
  - app/helpers/okonomi_ui_kit/components/typography.rb
1373
1402
  - app/helpers/okonomi_ui_kit/config.rb
1403
+ - app/helpers/okonomi_ui_kit/configs.rb
1374
1404
  - app/helpers/okonomi_ui_kit/form_builder.rb
1375
- - app/helpers/okonomi_ui_kit/navigation_helper.rb
1405
+ - app/helpers/okonomi_ui_kit/form_component.rb
1376
1406
  - app/helpers/okonomi_ui_kit/svg_icons.rb
1377
1407
  - app/helpers/okonomi_ui_kit/t_w_merge.rb
1378
- - app/helpers/okonomi_ui_kit/theme.rb
1379
- - app/helpers/okonomi_ui_kit/theme_helper.rb
1380
1408
  - app/helpers/okonomi_ui_kit/ui_helper.rb
1381
1409
  - app/javascript/okonomi_ui_kit/application.js
1382
1410
  - app/javascript/okonomi_ui_kit/controllers/dropdown_controller.js
@@ -1394,21 +1422,24 @@ files:
1394
1422
  - app/views/okonomi/components/alert/_alert.html.erb
1395
1423
  - app/views/okonomi/components/breadcrumbs/_breadcrumbs.html.erb
1396
1424
  - app/views/okonomi/components/code/_code.html.erb
1425
+ - app/views/okonomi/components/confirmation_modal/_confirmation_modal.html.erb
1426
+ - app/views/okonomi/components/dropdown_button/_dropdown_button.html.erb
1427
+ - app/views/okonomi/components/forms/check_box_with_label/_check_box_with_label.html.erb
1428
+ - app/views/okonomi/components/forms/field/_field.html.erb
1429
+ - app/views/okonomi/components/forms/field_set/_field_set.html.erb
1430
+ - app/views/okonomi/components/forms/upload_field/_upload_field.html.erb
1397
1431
  - app/views/okonomi/components/icon/_icon.html.erb
1432
+ - app/views/okonomi/components/navigation/_link.html.erb
1433
+ - app/views/okonomi/components/navigation/_navigation.html.erb
1398
1434
  - app/views/okonomi/components/page/_page.html.erb
1435
+ - app/views/okonomi/components/page_header/_page_header.html.erb
1436
+ - app/views/okonomi/components/page_section/_page_section.html.erb
1399
1437
  - app/views/okonomi/components/table/_table.html.erb
1400
1438
  - app/views/okonomi/components/typography/_typography.html.erb
1401
1439
  - app/views/okonomi/forms/tailwind/_checkbox_label.html.erb
1402
- - app/views/okonomi/forms/tailwind/_field.html.erb
1403
- - app/views/okonomi/forms/tailwind/_field_set.html.erb
1404
1440
  - app/views/okonomi/forms/tailwind/_multi_select.html.erb
1405
1441
  - app/views/okonomi/forms/tailwind/_radio_button.html.erb
1406
1442
  - app/views/okonomi/forms/tailwind/_upload_field.html.erb
1407
- - app/views/okonomi/modals/_confirmation_modal.html.erb
1408
- - app/views/okonomi/navigation/_link.html.erb
1409
- - app/views/okonomi/navigation/_menu.html.erb
1410
- - app/views/okonomi/navigation/_navbar.html.erb
1411
- - app/views/okonomi/page_builder/_page.html.erb
1412
1443
  - app/views/okonomi/tables/_table.html.erb
1413
1444
  - config/importmap.rb
1414
1445
  - config/routes.rb
@@ -1417,13 +1448,13 @@ files:
1417
1448
  - lib/okonomi_ui_kit/engine.rb
1418
1449
  - lib/okonomi_ui_kit/version.rb
1419
1450
  - lib/tasks/okonomi_ui_kit_tasks.rake
1420
- homepage: https://okonomi.gmbh
1451
+ homepage: https://github.com/andre-l-github/okonomi_ui_kit
1421
1452
  licenses:
1422
1453
  - MIT
1423
1454
  metadata:
1424
- homepage_uri: https://okonomi.gmbh
1425
- source_code_uri: https://okonomi.gmbh
1426
- changelog_uri: https://okonomi.gmbh
1455
+ homepage_uri: https://github.com/andre-l-github/okonomi_ui_kit
1456
+ source_code_uri: https://github.com/andre-l-github/okonomi_ui_kit
1457
+ changelog_uri: https://github.com/andre-l-github/okonomi_ui_kit
1427
1458
  post_install_message:
1428
1459
  rdoc_options: []
1429
1460
  require_paths: