bootstrap4_helper 0.0.0 → 1.0.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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d7020497c5ab04befa69e766fceccf23205cf037ff6fcd9f9d9d97eb1692bfea
4
- data.tar.gz: 19e74f6faa3d47e7f46237bd412dc035b9c38d1465721692b87eb969602f22b6
3
+ metadata.gz: f0b8c171fc1cd2510c422ae2e359386eac13e14a11437674208960480d35167b
4
+ data.tar.gz: 7779d13c5a369aec5c1b15b10916e78a197cb3d7a3d31b1bc3284dedb1376563
5
5
  SHA512:
6
- metadata.gz: 3bdeb7b93ee7f27f6368401b9e5d6b647d3f6a75a7a5acdb1f9a4937d1fd7a306f5962a0c0830832b9586f4162a8620e0947ca84dddc5aeef917788fd23a5395
7
- data.tar.gz: b0e26599505280dc162aed3f2c36332e1e6801a6d67fc839cb630050b5557b684b1621964431ec441bf12e67c090bed6a135df63ea58d3a4784be99b6f576b9b
6
+ metadata.gz: fccc06d01e6e46ee9e33d67d1842705a87567dab8d8ac6d6dbce18449e478d9353937cb14ab1887b3fce71e34528c1462014f5e22531b1e7e7ee8ea9c60def9a
7
+ data.tar.gz: b2574bbfd27950f1bec5234a09937f78570b9cd41a0a7cbab02c8e3f79c1d126b5140a5daf38897a684fd488bae7e5f9ca7ef5364d656d343d5b8269d6b79a6c
@@ -1,5 +1,525 @@
1
- require "bootstrap4_helper/railtie"
1
+ require 'bootstrap4_helper/version'
2
+ require 'bootstrap4_helper/railtie'
3
+ require 'bootstrap4_helper/constants'
2
4
 
5
+ Bootstrap4Helper::Constants::COMPONENTS.each do |component|
6
+ require "bootstrap4_helper/#{component}"
7
+ end
8
+
9
+ require 'bootstrap4_helper/initialize'
10
+
11
+ # @todo
12
+ # - We need a configuration system so people can specify what DOM elements to
13
+ # use when building components. Like, so we want <h1> for Card Headers or just
14
+ # <div>'s.
15
+ #
3
16
  module Bootstrap4Helper
4
- # Your code goes here...
17
+ # @description
18
+ # - Creates a single Accordion element. The header component
19
+ # already provides the DOM element to link the Collapse area.
20
+ # You just need to provide the text or additional markup, if
21
+ # you want it.
22
+ #
23
+ # <code>
24
+ # <%= accordion_helper do |a| %>
25
+ # <%= a.header do %>
26
+ # // Some HTML or Ruby
27
+ # <% end %>
28
+ # <%= a.body %>
29
+ # // Some HTML or Ruby
30
+ # <% end %>
31
+ # <% end %>
32
+ # </code>
33
+ #
34
+ # @param [Mixed] args
35
+ # @return [Accordion]
36
+ #
37
+ def accordion_helper(opts = {}, &block)
38
+ Accordion.new(self, opts, &block)
39
+ end
40
+
41
+ # @description
42
+ # - Creates a group of Accordions that stay in sync with each other.
43
+ # One opens, the other closes.
44
+ #
45
+ # <code>
46
+ # <%= accordion_group_helper do |grp| %>
47
+ # <%= grp.accordion do |a| %>
48
+ # <%= a.header class: 'text-white bg-primary' do %>
49
+ # // Some HTML or Ruby
50
+ # <% end %>
51
+ # <%= a.body %>
52
+ # // Some HTML or Ruby
53
+ # <% end %>
54
+ # <% end %>
55
+ #
56
+ # <%= grp.accordion do |a| %>
57
+ # <%= a.header class: 'text-white bg-danger' do %>
58
+ # // Some HTML or Ruby
59
+ # <% end %>
60
+ # <%= a.body %>
61
+ # // Some HTML or Ruby
62
+ # <% end %>
63
+ # <% end %>
64
+ # <% end $>
65
+ # </code>
66
+ #
67
+ # @param [Mixed] args
68
+ # @return [Accordion]
69
+ #
70
+ def accordion_group_helper(*args, &block)
71
+ AccordionGroup.new(self, *args, &block)
72
+ end
73
+
74
+ # @description
75
+ # - Creates an Alert component.
76
+ #
77
+ # <code>
78
+ # <%= alert_helper :danger, dismissble: true do %>
79
+ # Something went wrong with your model data...
80
+ # <% end %>
81
+ # </code>
82
+ #
83
+ # @params [Symbol|String|Hash|NilClass] *args
84
+ # @return [String]
85
+ #
86
+ def alert_helper(*args, &block)
87
+ Alert.new(self, *args, &block)
88
+ end
89
+
90
+ # @description
91
+ # - Creates a badge component. Bades have a context variable. Providing nothing
92
+ # will give you the `secondary` context.
93
+ #
94
+ # <code>
95
+ # <li>
96
+ # Messages: <%= badge_helper(:primary) { @messages.count } %>
97
+ # </li>
98
+ # <li>
99
+ # Notifications: <%= badge_healper { @notifications.count } %>
100
+ # </li>
101
+ # </code>
102
+ #
103
+ # @params [Symbol|String|Hash|NilClass] *args
104
+ # @return [String]
105
+ #
106
+ def badge_helper(*args, &block)
107
+ Badge.new(self, *args, &block)
108
+ end
109
+
110
+ # @description
111
+ # - Creates a Card component.
112
+ #
113
+ #
114
+ # <code>
115
+ #
116
+ # - Regular
117
+ #
118
+ # <%= card_helper do |c| %>
119
+ # <%= c.header class: 'text-white bg-primary' do %>
120
+ # <h4>This is the header...</h4>
121
+ # <% end %>
122
+ # <%= c.body do %>
123
+ # <%= c.title { 'This is the title' } %>
124
+ # <%= c.text { 'This card body' } %>
125
+ # <ul>
126
+ # <% [1, 2, 3].each do |x| %>
127
+ # <li>Item: <%= x %></li>
128
+ # <% end %>
129
+ # </ul>
130
+ # <% end %>
131
+ # <%= c.footer do %>
132
+ # This is the footer...
133
+ # <% end %>
134
+ # <% end %>
135
+ #
136
+ # - Horizontal
137
+ #
138
+ # <div class="row">
139
+ # <div class="col-sm mt-3 mb-3">
140
+ # <%= card_helper do |c| %>
141
+ # <div class="row no-gutters">
142
+ # <div class="col-md-4">
143
+ # <%= image_tag 'placeholder.svg', class: 'card-img' %>
144
+ # </div>
145
+ # <div class="col-md-8">
146
+ # <%= c.body do %>
147
+ # <%= c.title { "Card title" } %>
148
+ # <%= c.text { "This is a wider card with supporting text below as a natural lead-in to additional content." } %>
149
+ # <%= c.text do %>
150
+ # <small class="text-muted">Last updated 3 mins ago</small>
151
+ # <% end %>
152
+ # <% end %>
153
+ # </div>
154
+ # </div>
155
+ # <% end %>
156
+ # </div>
157
+ # </div>
158
+ # </code>
159
+ #
160
+ # @param [Hash] opts
161
+ # @return [String]
162
+ #
163
+ def card_helper(opts = {}, &block)
164
+ Card.new(self, opts, &block)
165
+ end
166
+
167
+ # @description
168
+ # - Builds a card group.
169
+ #
170
+ # <code>
171
+ # <%= card_group_helper do |group| %>
172
+ # <%= group.card do |c| %>
173
+ # <%= c.body do %>
174
+ # <%= c.title { 'This is the title one' } %>
175
+ # <%= c.text { 'This card body' } %>
176
+ # <ul>
177
+ # <% [1, 2, 3, 4, 5, 6, 7].each do |x| %>
178
+ # <li>Item: <%= x %></li>
179
+ # <% end %>
180
+ # </ul>
181
+ # <% end %>
182
+ # <%= c.footer do %>
183
+ # This is the footer...
184
+ # <% end %>
185
+ # <% end %>
186
+ #
187
+ # <%= group.card do |c| %>
188
+ # <%= c.body do %>
189
+ # <%= c.title { 'This is the title two' } %>
190
+ # <%= c.text { 'This card body' } %>
191
+ # <ul>
192
+ # <% [1, 2, 3].each do |x| %>
193
+ # <li>Item: <%= x %></li>
194
+ # <% end %>
195
+ # </ul>
196
+ # <% end %>
197
+ # <%= c.footer do %>
198
+ # This is the footer...
199
+ # <% end %>
200
+ # <% end %>
201
+ #
202
+ # <%= group.card do |c| %>
203
+ # <%= c.body do %>
204
+ # <%= c.title { 'This is the title three' } %>
205
+ # <%= c.text { 'This card body' } %>
206
+ # <ul>
207
+ # <% [1, 2, 3].each do |x| %>
208
+ # <li>Item: <%= x %></li>
209
+ # <% end %>
210
+ # </ul>
211
+ # <% end %>
212
+ # <%= c.footer do %>
213
+ # This is the footer...
214
+ # <% end %>
215
+ # <% end %>
216
+ # <% end %>
217
+ # </code>
218
+ #
219
+ # @param [Hash] opts
220
+ # @return [String]
221
+ #
222
+ def card_group_helper(opts = {}, &block)
223
+ CardGroup.new(self, opts, &block)
224
+ end
225
+
226
+ # @description
227
+ # - Builds a card deck.
228
+ #
229
+ # <code>
230
+ # <%= card_deck_helper do |deck| %>
231
+ # <%= deck.card do |c| %>
232
+ # <%= c.body do %>
233
+ # <%= c.title { 'This is the title one' } %>
234
+ # <%= c.text { 'This card body' } %>
235
+ # <ul>
236
+ # <% [1, 2, 3, 4, 5, 6, 7].each do |x| %>
237
+ # <li>Item: <%= x %></li>
238
+ # <% end %>
239
+ # </ul>
240
+ # <% end %>
241
+ # <%= c.footer do %>
242
+ # This is the footer...
243
+ # <% end %>
244
+ # <% end %>
245
+ #
246
+ # <%= deck.card do |c| %>
247
+ # <%= c.body do %>
248
+ # <%= c.title { 'This is the title two' } %>
249
+ # <%= c.text { 'This card body' } %>
250
+ # <ul>
251
+ # <% [1, 2, 3].each do |x| %>
252
+ # <li>Item: <%= x %></li>
253
+ # <% end %>
254
+ # </ul>
255
+ # <% end %>
256
+ # <%= c.footer do %>
257
+ # This is the footer...
258
+ # <% end %>
259
+ # <% end %>
260
+ #
261
+ # <%= deck.card do |c| %>
262
+ # <%= c.body do %>
263
+ # <%= c.title { 'This is the title three' } %>
264
+ # <%= c.text { 'This card body' } %>
265
+ # <ul>
266
+ # <% [1, 2, 3].each do |x| %>
267
+ # <li>Item: <%= x %></li>
268
+ # <% end %>
269
+ # </ul>
270
+ # <% end %>
271
+ # <%= c.footer do %>
272
+ # This is the footer...
273
+ # <% end %>
274
+ # <% end %>
275
+ # <% end %>
276
+ # </code>
277
+ #
278
+ # @param [Hash] opts
279
+ # @return [String]
280
+ #
281
+ def card_deck_helper(opts = {}, &block)
282
+ CardDeck.new(self, opts, &block)
283
+ end
284
+
285
+ # @description
286
+ # - Builds a card column.
287
+ #
288
+ # <code>
289
+ # <%= card_column_helper do |column| %>
290
+ # <%= column.card do |c| %>
291
+ # <%= c.body do %>
292
+ # <%= c.title { 'This is the title one' } %>
293
+ # <%= c.text { 'This card body' } %>
294
+ # <ul>
295
+ # <% [1, 2, 3, 4, 5, 6, 7].each do |x| %>
296
+ # <li>Item: <%= x %></li>
297
+ # <% end %>
298
+ # </ul>
299
+ # <% end %>
300
+ # <%= c.footer do %>
301
+ # This is the footer...
302
+ # <% end %>
303
+ # <% end %>
304
+ #
305
+ # <%= column.card do |c| %>
306
+ # <%= c.body do %>
307
+ # <%= c.title { 'This is the title two' } %>
308
+ # <%= c.text { 'This card body' } %>
309
+ # <ul>
310
+ # <% [1, 2, 3].each do |x| %>
311
+ # <li>Item: <%= x %></li>
312
+ # <% end %>
313
+ # </ul>
314
+ # <% end %>
315
+ # <%= c.footer do %>
316
+ # This is the footer...
317
+ # <% end %>
318
+ # <% end %>
319
+ #
320
+ # <%= column.card do |c| %>
321
+ # <%= c.body do %>
322
+ # <%= c.title { 'This is the title three' } %>
323
+ # <%= c.text { 'This card body' } %>
324
+ # <ul>
325
+ # <% [1, 2, 3].each do |x| %>
326
+ # <li>Item: <%= x %></li>
327
+ # <% end %>
328
+ # </ul>
329
+ # <% end %>
330
+ # <%= c.footer do %>
331
+ # This is the footer...
332
+ # <% end %>
333
+ # <% end %>
334
+ # <% end %>
335
+ # </code>
336
+ #
337
+ # @param [Hash] opts
338
+ # @return [String]
339
+ #
340
+ def card_column_helper(opts = {}, &block)
341
+ CardColumn.new(self, opts, &block)
342
+ end
343
+
344
+ # @description
345
+ # - Generates a Dropdown component. Default type `:dropdown`. For inline buttons, use
346
+ # `:group`.
347
+ #
348
+ # <code>
349
+ # <%= dropdown_helper do |dropdown| %>
350
+ # <%= dropdown.button(:primary) { "Action" } %>
351
+ # <%= dropdown.menu do |menu| %>
352
+ # <%= menu.link 'Edit', '#' %>
353
+ # <%= menu.link 'Delete', '#' %>
354
+ # <%= menu.text 'Static text' %>
355
+ # <% end %>
356
+ # <% end %>
357
+ #
358
+ # <%= dropdown_helper :group, class: 'dropright' do |dropdown| %>
359
+ # <button type="button" class="btn btn-danger">Action 2</button>
360
+ # <%= dropdown.button(:danger, split: true) %>
361
+ # <%= dropdown.menu do |menu| %>
362
+ # <%= menu.header "Crud operations" %>
363
+ # <%= menu.divider %>
364
+ # <%= menu.link 'Edit', '#' %>
365
+ # <%= menu.link 'Delete', '#' %>
366
+ # <% end %>
367
+ # <% end %>
368
+ #
369
+ # <%= dropdown_helper do |dropdown| %>
370
+ # <%= dropdown.button :primary do %>
371
+ # Login
372
+ # <% end %>
373
+ # <%= dropdown.menu do |menu| %>
374
+ # <form class="px-4 py-3">
375
+ # <div class="form-group">
376
+ # <label for="exampleDropdownFormEmail1">Email address</label>
377
+ # <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
378
+ # </div>
379
+ # <div class="form-group">
380
+ # <label for="exampleDropdownFormPassword1">Password</label>
381
+ # <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
382
+ # </div>
383
+ # <div class="form-group">
384
+ # <div class="form-check">
385
+ # <input type="checkbox" class="form-check-input" id="dropdownCheck">
386
+ # <label class="form-check-label" for="dropdownCheck">
387
+ # Remember me
388
+ # </label>
389
+ # </div>
390
+ # </div>
391
+ # <button type="submit" class="btn btn-primary">Sign in</button>
392
+ # </form>
393
+ # <%= menu.divider %>
394
+ # <%= menu.link "New around here? Sign up", "#" %>
395
+ # <%= menu.link "Forgot password", "#" %>
396
+ # <% end %>
397
+ # <% end %>
398
+ # </code>
399
+ #
400
+ # @param [Mixed] args
401
+ # @return [String]
402
+ #
403
+ def dropdown_helper(*args, &block)
404
+ Dropdown.new(self, *args, &block)
405
+ end
406
+
407
+ # @description
408
+ # - Generates Modal windows.
409
+ #
410
+ # <code>
411
+ # <%= modal_helper id: 'exampleModal' do |m| %>
412
+ # <%= m.header do %>
413
+ # <%= m.title { 'Example Modal' } %>
414
+ # <%= m.close_button %>
415
+ # <% end %>
416
+ # <%= m.body do %>
417
+ # Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel nisi tempora, eius iste sit nobis
418
+ # earum in harum optio dolore explicabo. Eveniet reprehenderit harum itaque ad fuga beatae, quasi
419
+ # sequi! Laborum ea porro nihil ipsam repudiandae vel harum voluptates minima corrupti unde quas,
420
+ # dolore possimus doloribus voluptatem sint fuga dolores odio dignissimos at molestias earum.
421
+ # <% end %>
422
+ # <%= m.footer do %>
423
+ # <%= m.close_button class: 'btn btn-secondary' do %>
424
+ # Close
425
+ # <% end %>
426
+ # <% end %>
427
+ # <% end %>
428
+ # </code>
429
+ #
430
+ # @param [Hash] opts
431
+ # @return [String]
432
+ #
433
+ def modal_helper(opts = {}, &block)
434
+ Modal.new(self, opts, &block)
435
+ end
436
+
437
+ # @description
438
+ # - Generates Nav components.
439
+ #
440
+ # <code>
441
+ # <%= nav_helper do |nav| %>
442
+ # <%= nav.link "Item 1", "https://www.google.com" %>
443
+ # <%= nav.link "Item 2", "#" %>
444
+ # <%= nav.link "Item 3", "#" %>
445
+ # <%= nav.dropdown :more do |menu| %>
446
+ # <%= menu.link 'People', '#' %>
447
+ # <%= menu.link 'Records', '#' %>
448
+ # <% end %>
449
+ #
450
+ # <%= nav.dropdown "More 2" do |menu| %>
451
+ # <%= menu.link 'People', '#' %>
452
+ # <%= menu.link 'Records', '#' %>
453
+ # <% end %>
454
+ # <% end %>
455
+ # </code>
456
+ #
457
+ # @param [Hash] opts
458
+ # @return [String]
459
+ #
460
+ def nav_helper(opts = {}, &block)
461
+ Nav.new(self, opts, &block)
462
+ end
463
+
464
+ # @description
465
+ # - Generates a Tab component.
466
+ #
467
+ # <code>
468
+ # <%= tab_helper do |tab| %>
469
+ # <%= tab.nav do |nav| %>
470
+ # <%= nav.item :item1 do %>
471
+ # Item 1
472
+ # <% end %>
473
+ # <%= nav.item(:item2, class: 'active') { "Item 2" } %>
474
+ # <%= nav.item(:item3) { "Item 3" } %>
475
+ # <%= nav.item :item4 %>
476
+ # <%= nav.dropdown 'More' do |dropdown| %>
477
+ # <%= dropdown.item :item5 %>
478
+ # <%= dropdown.item(:item6) { 'Item 6' } %>
479
+ # <% end %>
480
+ # <% end %>
481
+ #
482
+ # <%= tab.content do |content| %>
483
+ # <%= content.pane :item1, class: 'mt-3' do %>
484
+ # Content 1
485
+ # <% end %>
486
+ #
487
+ # <%= content.pane :item2, class: 'active mt-3' do %>
488
+ # Content 2
489
+ # <% end %>
490
+ #
491
+ # <%= content.pane :item3, class: 'mt-3' do %>
492
+ # Content 3
493
+ # <% end %>
494
+ #
495
+ # <%= content.pane :item4, class: 'mt-3' do %>
496
+ # Content 4
497
+ # <% end %>
498
+ #
499
+ # <%= content.pane :item5, class: 'mt-3' do %>
500
+ # Content 5
501
+ # <% end %>
502
+ #
503
+ # <%= content.pane :item6, class: 'mt-3' do %>
504
+ # Content 6
505
+ # <% end %>
506
+ # <% end %>
507
+ # <% end %>
508
+ # </code>
509
+ #
510
+ def tab_helper(*args, &block)
511
+ Tab.new(self, *args, &block)
512
+ end
513
+
514
+ # @description
515
+ # - Generates spinner annimations.
516
+ #
517
+ # <code>
518
+ # <%= spinner_helper class: 'text-warning' %>
519
+ # <%= spinner_helper type: :grow, class: 'text-danger', id: 'loadingRecords' %>
520
+ # </code>
521
+ #
522
+ def spinner_helper(*args, &block)
523
+ Spinner.new(self, *args, &block)
524
+ end
5
525
  end