bs5 0.0.12 → 0.0.13
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/components/bs5/list_group_component.html.erb +17 -0
- data/app/components/bs5/list_group_component.rb +143 -0
- data/app/controllers/bs5/pages_controller.rb +11 -0
- data/app/helpers/bs5/components_helper.rb +1 -1
- data/app/views/bs5/examples/accordion/default/_example.html.erb +1 -1
- data/app/views/bs5/examples/accordion/flush/_example.html.erb +1 -1
- data/app/views/bs5/examples/alert/additional_content/_example.html.erb +1 -1
- data/app/views/bs5/examples/alert/default/_example.html.erb +1 -1
- data/app/views/bs5/examples/alert/dismissable/_example.html.erb +1 -1
- data/app/views/bs5/examples/alert/style/_example.html.erb +1 -1
- data/app/views/bs5/examples/badge/default/_example.html.erb +1 -1
- data/app/views/bs5/examples/badge/pill/_example.html.erb +1 -1
- data/app/views/bs5/examples/badge/style/_example.html.erb +1 -1
- data/app/views/bs5/examples/breadcrumb/default/_example.html.erb +1 -1
- data/app/views/bs5/examples/buttons/button_tag/default/snippet.html.erb +6 -6
- data/app/views/bs5/examples/buttons/button_tag/outline/snippet.html.erb +9 -9
- data/app/views/bs5/examples/buttons/button_tag/size/large.html.erb +2 -2
- data/app/views/bs5/examples/buttons/button_tag/size/small.html.erb +2 -2
- data/app/views/bs5/examples/buttons/button_tag/style/snippet.html.erb +9 -9
- data/app/views/bs5/examples/close_button/default/_example.html.erb +1 -1
- data/app/views/bs5/examples/close_button/disabled/_example.html.erb +1 -1
- data/app/views/bs5/examples/close_button/white/_example.html.erb +1 -1
- data/app/views/bs5/examples/list_group/actionable/_example.html.erb +3 -0
- data/app/views/bs5/examples/list_group/actionable/button.html.erb +7 -0
- data/app/views/bs5/examples/list_group/actionable/snippet.html.erb +7 -0
- data/app/views/bs5/examples/list_group/active/_example.html.erb +2 -0
- data/app/views/bs5/examples/list_group/active/snippet.html.erb +7 -0
- data/app/views/bs5/examples/list_group/checkboxes_and_radios/_example.html.erb +3 -0
- data/app/views/bs5/examples/list_group/checkboxes_and_radios/default.html.erb +22 -0
- data/app/views/bs5/examples/list_group/checkboxes_and_radios/with_labels.html.erb +32 -0
- data/app/views/bs5/examples/list_group/custom_content/_example.html.erb +2 -0
- data/app/views/bs5/examples/list_group/custom_content/default.html.erb +32 -0
- data/app/views/bs5/examples/list_group/default/_example.html.erb +2 -0
- data/app/views/bs5/examples/list_group/default/snippet.html.erb +7 -0
- data/app/views/bs5/examples/list_group/disabled/_example.html.erb +2 -0
- data/app/views/bs5/examples/list_group/disabled/snippet.html.erb +7 -0
- data/app/views/bs5/examples/list_group/flush/_example.html.erb +2 -0
- data/app/views/bs5/examples/list_group/flush/snippet.html.erb +7 -0
- data/app/views/bs5/examples/list_group/horizontal/_example.html.erb +2 -0
- data/app/views/bs5/examples/list_group/horizontal/snippet.html.erb +30 -0
- data/app/views/bs5/examples/list_group/style/_example.html.erb +3 -0
- data/app/views/bs5/examples/list_group/style/actionable.html.erb +11 -0
- data/app/views/bs5/examples/list_group/style/default.html.erb +11 -0
- data/app/views/bs5/examples/list_group/with_badges/_example.html.erb +2 -0
- data/app/views/bs5/examples/list_group/with_badges/default.html.erb +14 -0
- data/app/views/bs5/examples/tooltips/default/_example.html.erb +1 -1
- data/app/views/bs5/pages/accordion.html.erb +3 -0
- data/app/views/bs5/{examples/_alert.html.erb → pages/alert.html.erb} +1 -1
- data/app/views/bs5/{examples/_badge.html.erb → pages/badge.html.erb} +1 -1
- data/app/views/bs5/pages/breadcrumb.html.erb +2 -0
- data/app/views/bs5/{examples/_buttons.html.erb → pages/buttons.html.erb} +3 -3
- data/app/views/bs5/{examples/_close_button.html.erb → pages/close_button.html.erb} +1 -1
- data/app/views/bs5/pages/list_group.html.erb +11 -0
- data/app/views/bs5/{examples/_tooltips.html.erb → pages/tooltips.html.erb} +1 -1
- data/app/views/layouts/bs5/pages.html.erb +32 -0
- data/config/routes.rb +2 -2
- data/lib/bs5/version.rb +1 -1
- metadata +51 -11
- data/app/controllers/bs5/examples_controller.rb +0 -9
- data/app/views/bs5/examples/_accordion.html.erb +0 -3
- data/app/views/bs5/examples/_breadcrumb.html.erb +0 -2
- data/app/views/bs5/examples/index.html.erb +0 -25
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b63f00444e32de97ae7167d85ab798ec58085c325730e18a48d21bdde8a8de89
|
4
|
+
data.tar.gz: 2a8ab48a4bd4fe50a629868448315c3ef9d641ef7b30cdb189db8e95015ddd38
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 94fc5dc2aab1bb53e3155d14acfdf889ef58d3aee2e03fa8a9620fd2e3379bfd48d0c453c9c42f22a826457b8f7fb7edc0274c0db54c6437ecf901dd6f371e6e
|
7
|
+
data.tar.gz: e3cf1bbf76474375de657c37ecc3395d51993dc33cac54240014769b58b63dc466bc3e1c669f7f3500ba966de17cb17a4799cb902057d1ae39660ab6a5300c41
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<% if items.any? %>
|
2
|
+
<% if actionables? %>
|
3
|
+
<div class="<%= component_class %>">
|
4
|
+
<% items.each do |item| %>
|
5
|
+
<%= item.decorated_content %>
|
6
|
+
<% end %>
|
7
|
+
</div>
|
8
|
+
<% else %>
|
9
|
+
<ul class="<%= component_class %>">
|
10
|
+
<% items.each do |item| %>
|
11
|
+
<%= tag.li(**item.options) do %>
|
12
|
+
<%= item.content %>
|
13
|
+
<% end %>
|
14
|
+
<% end %>
|
15
|
+
</ul>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
@@ -0,0 +1,143 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Bs5
|
4
|
+
class ListGroupComponent < ViewComponent::Base
|
5
|
+
CLASS_NAME_BASE = 'list-group'
|
6
|
+
CLASS_NAME_FLUSH = "#{CLASS_NAME_BASE}-flush"
|
7
|
+
CLASS_NAME_HORIZONTAL = "#{CLASS_NAME_BASE}-horizontal"
|
8
|
+
|
9
|
+
include ViewComponent::Slotable
|
10
|
+
|
11
|
+
with_slot :item, collection: true, class_name: 'Item'
|
12
|
+
|
13
|
+
def initialize(flush: false, horizontal: false)
|
14
|
+
@flush = flush
|
15
|
+
@horizontal = horizontal
|
16
|
+
end
|
17
|
+
|
18
|
+
private
|
19
|
+
|
20
|
+
def flush?
|
21
|
+
!!@flush
|
22
|
+
end
|
23
|
+
|
24
|
+
def actionables?
|
25
|
+
items.any?(&:actionable?)
|
26
|
+
end
|
27
|
+
|
28
|
+
def horizontal?
|
29
|
+
!!@horizontal
|
30
|
+
end
|
31
|
+
|
32
|
+
def component_class
|
33
|
+
class_names = [CLASS_NAME_BASE]
|
34
|
+
class_names << flush_class
|
35
|
+
class_names << horizontal_class
|
36
|
+
class_names.join(' ')
|
37
|
+
end
|
38
|
+
|
39
|
+
def flush_class
|
40
|
+
CLASS_NAME_FLUSH if flush?
|
41
|
+
end
|
42
|
+
|
43
|
+
def horizontal_class
|
44
|
+
return unless horizontal?
|
45
|
+
|
46
|
+
class_names = [CLASS_NAME_HORIZONTAL]
|
47
|
+
class_names << @horizontal if @horizontal.in?(%i[sm md lg xl xxl])
|
48
|
+
class_names.join('-')
|
49
|
+
end
|
50
|
+
|
51
|
+
class Item < ViewComponent::Slot
|
52
|
+
CLASS_NAME_BASE = 'list-group-item'
|
53
|
+
CLASS_NAME_ACTION = "#{CLASS_NAME_BASE}-action"
|
54
|
+
|
55
|
+
attr_reader :options
|
56
|
+
|
57
|
+
def initialize(options = {})
|
58
|
+
@options = options.symbolize_keys
|
59
|
+
|
60
|
+
@active = @options.delete(:active) || false
|
61
|
+
@disabled = @options.delete(:disabled) || false
|
62
|
+
@style = @options.delete(:style)
|
63
|
+
|
64
|
+
set_attributes
|
65
|
+
end
|
66
|
+
|
67
|
+
def actionable?
|
68
|
+
!!actionable_element
|
69
|
+
end
|
70
|
+
|
71
|
+
def actionable_element
|
72
|
+
@actionable_element ||= begin
|
73
|
+
if (elements = Nokogiri::HTML::DocumentFragment.parse(content).elements).one? &&
|
74
|
+
(element = elements.first).name.in?(%w[a button label])
|
75
|
+
element
|
76
|
+
end
|
77
|
+
end
|
78
|
+
end
|
79
|
+
|
80
|
+
def decorated_content
|
81
|
+
set_actionable_element_attributes
|
82
|
+
actionable_element.to_html.html_safe # rubocop:disable Rails/OutputSafety
|
83
|
+
end
|
84
|
+
|
85
|
+
private
|
86
|
+
|
87
|
+
def set_actionable_element_class_names
|
88
|
+
class_names = Array(actionable_element[:class])
|
89
|
+
class_names << item_classes
|
90
|
+
class_names << CLASS_NAME_ACTION if actionable_element.name.in?(%w[a button])
|
91
|
+
actionable_element[:class] = class_names.join(' ')
|
92
|
+
end
|
93
|
+
|
94
|
+
def set_actionable_element_attributes
|
95
|
+
set_actionable_element_class_names
|
96
|
+
actionable_element['aria-current'] = true if active?
|
97
|
+
|
98
|
+
return unless disabled?
|
99
|
+
|
100
|
+
case actionable_element.name
|
101
|
+
when 'a'
|
102
|
+
actionable_element['aria-disabled'] = true
|
103
|
+
actionable_element['tabindex'] = -1
|
104
|
+
when 'button'
|
105
|
+
actionable_element['disabled'] = ''
|
106
|
+
end
|
107
|
+
end
|
108
|
+
|
109
|
+
def set_attributes
|
110
|
+
@options[:class] = Array(@options[:class])
|
111
|
+
@options[:class] << item_classes
|
112
|
+
@options[:aria] ||= {}
|
113
|
+
@options[:aria][:current] = true if active?
|
114
|
+
@options[:aria][:disabled] = true if disabled?
|
115
|
+
end
|
116
|
+
|
117
|
+
def item_classes
|
118
|
+
class_names = [CLASS_NAME_BASE]
|
119
|
+
class_names << 'active' if active?
|
120
|
+
class_names << 'disabled' if disabled?
|
121
|
+
class_names << contextual_class if style?
|
122
|
+
|
123
|
+
class_names
|
124
|
+
end
|
125
|
+
|
126
|
+
def active?
|
127
|
+
!!@active
|
128
|
+
end
|
129
|
+
|
130
|
+
def disabled?
|
131
|
+
!!@disabled
|
132
|
+
end
|
133
|
+
|
134
|
+
def style?
|
135
|
+
!!@style
|
136
|
+
end
|
137
|
+
|
138
|
+
def contextual_class
|
139
|
+
[CLASS_NAME_BASE, @style].join('-')
|
140
|
+
end
|
141
|
+
end
|
142
|
+
end
|
143
|
+
end
|
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
module Bs5
|
4
4
|
module ComponentsHelper
|
5
|
-
COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to].freeze
|
5
|
+
COMPONENTS = %w[accordion alert badge close_button breadcrumb button_tag button_to list_group].freeze
|
6
6
|
|
7
7
|
COMPONENTS.each do |name|
|
8
8
|
define_method("bs5_#{name}") do |*args, &block|
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Example</h2>
|
2
2
|
<%= bs5_example(snippet: 'accordion/default/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Flush</h2>
|
2
2
|
<%= bs5_example(snippet: 'accordion/flush/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Additional content</h2>
|
2
2
|
<%= bs5_example(snippet: 'alert/additional_content/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Examples</h2>
|
2
2
|
<%= bs5_example(snippet: 'alert/default/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Dismissing</h2>
|
2
2
|
<%= bs5_example(snippet: 'alert/dismissable/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Style</h2>
|
2
2
|
<%= bs5_example(snippet: 'alert/style/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Example</h2>
|
2
2
|
<%= bs5_example(snippet: 'badge/default/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Pill badges</h2>
|
2
2
|
<%= bs5_example(snippet: 'badge/pill/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Background colors</h2>
|
2
2
|
<%= bs5_example(snippet: 'badge/style/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Example</h2>
|
2
2
|
<%= bs5_example(snippet: 'breadcrumb/default/snippet') %>
|
@@ -1,15 +1,15 @@
|
|
1
1
|
<%= bs5_button_tag %>
|
2
2
|
|
3
|
-
<%= bs5_button_tag
|
3
|
+
<%= bs5_button_tag('Reset', type: 'reset') %>
|
4
4
|
|
5
|
-
<%= bs5_button_tag
|
5
|
+
<%= bs5_button_tag('Button', type: 'button') %>
|
6
6
|
|
7
|
-
<%= bs5_button_tag
|
7
|
+
<%= bs5_button_tag('Reset', type: 'reset', disabled: true) %>
|
8
8
|
|
9
9
|
<%= bs5_button_tag(type: 'button') do %>
|
10
|
-
<%=
|
10
|
+
<%= tag.strong('Ask me!') %>
|
11
11
|
<% end %>
|
12
12
|
|
13
|
-
<%= bs5_button_tag
|
13
|
+
<%= bs5_button_tag('Save', data: { confirm: 'Are you sure?' }) %>
|
14
14
|
|
15
|
-
<%= bs5_button_tag
|
15
|
+
<%= bs5_button_tag('Checkout', data: { disable_with: 'Please wait...' }) %>
|
@@ -1,19 +1,19 @@
|
|
1
|
-
<%= bs5_button_tag
|
1
|
+
<%= bs5_button_tag('Primary', style: :primary, outline: true) %>
|
2
2
|
|
3
|
-
<%= bs5_button_tag
|
3
|
+
<%= bs5_button_tag('Secondary', style: :secondary, outline: true) %>
|
4
4
|
|
5
|
-
<%= bs5_button_tag
|
5
|
+
<%= bs5_button_tag('Success', style: :success, outline: true) %>
|
6
6
|
|
7
|
-
<%= bs5_button_tag
|
7
|
+
<%= bs5_button_tag('Danger', style: :danger, outline: true) %>
|
8
8
|
|
9
9
|
<%= bs5_button_tag(style: :warning, outline: true, type: 'button') do %>
|
10
|
-
<%=
|
10
|
+
<%= tag.strong('Warning') %>
|
11
11
|
<% end %>
|
12
12
|
|
13
|
-
<%= bs5_button_tag
|
13
|
+
<%= bs5_button_tag('Info', style: :info, outline: true) %>
|
14
14
|
|
15
|
-
<%= bs5_button_tag
|
15
|
+
<%= bs5_button_tag('Light', style: :light, outline: true) %>
|
16
16
|
|
17
|
-
<%= bs5_button_tag
|
17
|
+
<%= bs5_button_tag('Dark', style: :dark, outline: true) %>
|
18
18
|
|
19
|
-
<%= bs5_button_tag
|
19
|
+
<%= bs5_button_tag('Link', style: :link, outline: true) %>
|
@@ -1,3 +1,3 @@
|
|
1
|
-
<%= bs5_button_tag
|
1
|
+
<%= bs5_button_tag('Large button', style: :primary, size: :large) %>
|
2
2
|
|
3
|
-
<%= bs5_button_tag
|
3
|
+
<%= bs5_button_tag('Large button', style: :secondary, size: :large) %>
|
@@ -1,3 +1,3 @@
|
|
1
|
-
<%= bs5_button_tag
|
1
|
+
<%= bs5_button_tag('Small button', style: :primary, size: :small) %>
|
2
2
|
|
3
|
-
<%= bs5_button_tag
|
3
|
+
<%= bs5_button_tag('Small button', style: :secondary, size: :small) %>
|
@@ -1,19 +1,19 @@
|
|
1
|
-
<%= bs5_button_tag
|
1
|
+
<%= bs5_button_tag('Primary', style: :primary) %>
|
2
2
|
|
3
|
-
<%= bs5_button_tag
|
3
|
+
<%= bs5_button_tag('Secondary', style: :secondary) %>
|
4
4
|
|
5
|
-
<%= bs5_button_tag
|
5
|
+
<%= bs5_button_tag('Success', style: :success) %>
|
6
6
|
|
7
|
-
<%= bs5_button_tag
|
7
|
+
<%= bs5_button_tag('Danger', style: :danger) %>
|
8
8
|
|
9
9
|
<%= bs5_button_tag(style: :warning, type: 'button') do %>
|
10
|
-
<%=
|
10
|
+
<%= tag.strong('Warning') %>
|
11
11
|
<% end %>
|
12
12
|
|
13
|
-
<%= bs5_button_tag
|
13
|
+
<%= bs5_button_tag('Info', style: :info) %>
|
14
14
|
|
15
|
-
<%= bs5_button_tag
|
15
|
+
<%= bs5_button_tag('Light', style: :light) %>
|
16
16
|
|
17
|
-
<%= bs5_button_tag
|
17
|
+
<%= bs5_button_tag('Dark', style: :dark) %>
|
18
18
|
|
19
|
-
<%= bs5_button_tag
|
19
|
+
<%= bs5_button_tag('Link', style: :link) %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Default</h2>
|
2
2
|
<%= bs5_example(snippet: 'close_button/default/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>Disabled</h2>
|
2
2
|
<%= bs5_example(snippet: 'close_button/disabled/snippet') %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h2>White</h2>
|
2
2
|
<%= bs5_example(snippet: 'close_button/white/snippet') %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item, active: true) do %><%= button_tag 'Cras justo odio' %><% end %>
|
3
|
+
<% lg.slot(:item) do %><%= button_tag 'Dapibus ac facilisis in' %><% end %>
|
4
|
+
<% lg.slot(:item) do %><%= button_tag 'Morbi leo risus' %><% end %>
|
5
|
+
<% lg.slot(:item) do %><%= button_tag 'Porta ac consectetur ac' %><% end %>
|
6
|
+
<% lg.slot(:item, disabled: true) do %><%= button_tag 'Vestibulum at eros' %><% end %>
|
7
|
+
<%- end %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item, active: true) do %><%= link_to 'Cras justo odio', '#' %><% end %>
|
3
|
+
<% lg.slot(:item) do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
|
4
|
+
<% lg.slot(:item) do %><%= link_to 'Morbi leo risus', '#' %><% end %>
|
5
|
+
<% lg.slot(:item) do %><%= link_to 'Porta ac consectetur ac', '#' %><% end %>
|
6
|
+
<% lg.slot(:item, disabled: true) do %><%= link_to 'Vestibulum at eros', '#' %><% end %>
|
7
|
+
<%- end %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item, active: true) do %>Cras justo odio<% end %>
|
3
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
4
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
5
|
+
<% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
|
6
|
+
<% lg.slot(:item) do %>Vestibulum at eros<% end %>
|
7
|
+
<%- end %>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item) do %>
|
3
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
4
|
+
Cras justo odio
|
5
|
+
<% end %>
|
6
|
+
<% lg.slot(:item) do %>
|
7
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
8
|
+
Dapibus ac facilisis in
|
9
|
+
<% end %>
|
10
|
+
<% lg.slot(:item) do %>
|
11
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
12
|
+
Morbi leo risus
|
13
|
+
<% end %>
|
14
|
+
<% lg.slot(:item) do %>
|
15
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
16
|
+
Porta ac consectetur ac
|
17
|
+
<% end %>
|
18
|
+
<% lg.slot(:item) do %>
|
19
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
20
|
+
Vestibulum at eros
|
21
|
+
<% end %>
|
22
|
+
<%- end %>
|
@@ -0,0 +1,32 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item) do %>
|
3
|
+
<%= label_tag do %>
|
4
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
5
|
+
Cras justo odio
|
6
|
+
<% end %>
|
7
|
+
<% end %>
|
8
|
+
<% lg.slot(:item) do %>
|
9
|
+
<%= label_tag do %>
|
10
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
11
|
+
Dapibus ac facilisis in
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
14
|
+
<% lg.slot(:item) do %>
|
15
|
+
<%= label_tag do %>
|
16
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
17
|
+
Morbi leo risus
|
18
|
+
<% end %>
|
19
|
+
<% end %>
|
20
|
+
<% lg.slot(:item) do %>
|
21
|
+
<%= label_tag do %>
|
22
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
23
|
+
Porta ac consectetur ac
|
24
|
+
<% end %>
|
25
|
+
<% end %>
|
26
|
+
<% lg.slot(:item) do %>
|
27
|
+
<%= label_tag do %>
|
28
|
+
<%= check_box_tag nil, nil, false, class: 'form-check-input mr-1', aria: { label: '...' } %>
|
29
|
+
Vestibulum at eros
|
30
|
+
<% end %>
|
31
|
+
<% end %>
|
32
|
+
<%- end %>
|
@@ -0,0 +1,32 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item, active: true) do %>
|
3
|
+
<%= link_to '#' do %>
|
4
|
+
<div class="d-flex w-100 justify-content-between">
|
5
|
+
<h5 class="mb-1">List group item heading</h5>
|
6
|
+
<small>3 days ago</small>
|
7
|
+
</div>
|
8
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
9
|
+
<small>Donec id elit non mi porta.</small>
|
10
|
+
<% end %>
|
11
|
+
<% end %>
|
12
|
+
<% lg.slot(:item) do %>
|
13
|
+
<%= link_to '#' do %>
|
14
|
+
<div class="d-flex w-100 justify-content-between">
|
15
|
+
<h5 class="mb-1">List group item heading</h5>
|
16
|
+
<small class="text-muted">3 days ago</small>
|
17
|
+
</div>
|
18
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
19
|
+
<small class="text-muted">Donec id elit non mi porta.</small>
|
20
|
+
<% end %>
|
21
|
+
<% end %>
|
22
|
+
<% lg.slot(:item) do %>
|
23
|
+
<%= link_to '#' do %>
|
24
|
+
<div class="d-flex w-100 justify-content-between">
|
25
|
+
<h5 class="mb-1">List group item heading</h5>
|
26
|
+
<small class="text-muted">3 days ago</small>
|
27
|
+
</div>
|
28
|
+
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
29
|
+
<small class="text-muted">Donec id elit non mi porta.</small>
|
30
|
+
<% end %>
|
31
|
+
<% end %>
|
32
|
+
<%- end %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item) do %>Cras justo odio<% end %>
|
3
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
4
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
5
|
+
<% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
|
6
|
+
<% lg.slot(:item) do %>Vestibulum at eros<% end %>
|
7
|
+
<%- end %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item, disabled: true) do %>Cras justo odio<% end %>
|
3
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
4
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
5
|
+
<% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
|
6
|
+
<% lg.slot(:item) do %>Vestibulum at eros<% end %>
|
7
|
+
<%- end %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
<%= bs5_list_group(flush: true) do |lg| %>
|
2
|
+
<% lg.slot(:item) do %>Cras justo odio<% end %>
|
3
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
4
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
5
|
+
<% lg.slot(:item) do %>Porta ac consectetur ac<% end %>
|
6
|
+
<% lg.slot(:item) do %>Vestibulum at eros<% end %>
|
7
|
+
<%- end %>
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<%= bs5_list_group(horizontal: true) do |lg| %>
|
2
|
+
<% lg.slot(:item) do %>Cras justo odio<% end %>
|
3
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
4
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
5
|
+
<%- end %>
|
6
|
+
<%= bs5_list_group(horizontal: :sm) do |lg| %>
|
7
|
+
<% lg.slot(:item) do %>Cras justo odio<% end %>
|
8
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
9
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
10
|
+
<%- end %>
|
11
|
+
<%= bs5_list_group(horizontal: :md) do |lg| %>
|
12
|
+
<% lg.slot(:item) do %>Cras justo odio<% end %>
|
13
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
14
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
15
|
+
<%- end %>
|
16
|
+
<%= bs5_list_group(horizontal: :lg) do |lg| %>
|
17
|
+
<% lg.slot(:item) do %>Cras justo odio<% end %>
|
18
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
19
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
20
|
+
<%- end %>
|
21
|
+
<%= bs5_list_group(horizontal: :xl) do |lg| %>
|
22
|
+
<% lg.slot(:item) do %>Cras justo odio<% end %>
|
23
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
24
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
25
|
+
<%- end %>
|
26
|
+
<%= bs5_list_group(horizontal: :xxl) do |lg| %>
|
27
|
+
<% lg.slot(:item) do %>Cras justo odio<% end %>
|
28
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
29
|
+
<% lg.slot(:item) do %>Morbi leo risus<% end %>
|
30
|
+
<%- end %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item) do %><%= link_to 'Dapibus ac facilisis in', '#' %><% end %>
|
3
|
+
<% lg.slot(:item, style: :primary) do %><%= link_to 'A simple primary list group item', '#' %><% end %>
|
4
|
+
<% lg.slot(:item, style: :secondary) do %><%= link_to 'A simple secondary list group item', '#' %><% end %>
|
5
|
+
<% lg.slot(:item, style: :success) do %><%= link_to 'A simple success list group item', '#' %><% end %>
|
6
|
+
<% lg.slot(:item, style: :danger) do %><%= link_to 'A simple danger list group item', '#' %><% end %>
|
7
|
+
<% lg.slot(:item, style: :warning) do %><%= link_to 'A simple warning list group item', '#' %><% end %>
|
8
|
+
<% lg.slot(:item, style: :info) do %><%= link_to 'A simple info list group item', '#' %><% end %>
|
9
|
+
<% lg.slot(:item, style: :light) do %><%= link_to 'A simple light list group item', '#' %><% end %>
|
10
|
+
<% lg.slot(:item, style: :dark) do %><%= link_to 'A simple dark list group item', '#' %><% end %>
|
11
|
+
<%- end %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item) do %>Dapibus ac facilisis in<% end %>
|
3
|
+
<% lg.slot(:item, style: :primary) do %>A simple primary list group item<% end %>
|
4
|
+
<% lg.slot(:item, style: :secondary) do %>A simple secondary list group item<% end %>
|
5
|
+
<% lg.slot(:item, style: :success) do %>A simple success list group item<% end %>
|
6
|
+
<% lg.slot(:item, style: :danger) do %>A simple danger list group item<% end %>
|
7
|
+
<% lg.slot(:item, style: :warning) do %>A simple warning list group item<% end %>
|
8
|
+
<% lg.slot(:item, style: :info) do %>A simple info list group item<% end %>
|
9
|
+
<% lg.slot(:item, style: :light) do %>A simple light list group item<% end %>
|
10
|
+
<% lg.slot(:item, style: :dark) do %>A simple dark list group item<% end %>
|
11
|
+
<%- end %>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<%= bs5_list_group do |lg| %>
|
2
|
+
<% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
|
3
|
+
Cras justo odio
|
4
|
+
<%= bs5_badge(text: 14, style: :primary, pill: true) %>
|
5
|
+
<% end %>
|
6
|
+
<% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
|
7
|
+
Dapibus ac facilisis in
|
8
|
+
<%= bs5_badge(text: 2, style: :primary, pill: true) %>
|
9
|
+
<% end %>
|
10
|
+
<% lg.slot(:item, class: 'd-flex justify-content-between align-items-center') do %>
|
11
|
+
Morbi leo risus
|
12
|
+
<%= bs5_badge(text: 1, style: :primary, pill: true) %>
|
13
|
+
<% end %>
|
14
|
+
<%- end %>
|
@@ -1,5 +1,5 @@
|
|
1
|
-
<
|
2
|
-
<
|
1
|
+
<h1 id='buttons'>Buttons</h1>
|
2
|
+
<h2>Decorating Rails' <code>button_tag</code></h2>
|
3
3
|
<%= render 'bs5/examples/buttons/button_tag/default/example' %>
|
4
4
|
<%= render 'bs5/examples/buttons/button_tag/style/example' %>
|
5
5
|
<%= render 'bs5/examples/buttons/button_tag/outline/example' %>
|
@@ -7,5 +7,5 @@
|
|
7
7
|
<%= render 'bs5/examples/buttons/button_tag/block_buttons/example' %>
|
8
8
|
<%= render 'bs5/examples/buttons/button_tag/toggle_states/example' %>
|
9
9
|
|
10
|
-
<
|
10
|
+
<h2>Decorating Rails' <code>button_to</code></h2>
|
11
11
|
<%= render 'bs5/examples/buttons/button_to/default/example' %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
<h1 id='list_group'>List group</h1>
|
2
|
+
<%= render 'bs5/examples/list_group/default/example' %>
|
3
|
+
<%= render 'bs5/examples/list_group/active/example' %>
|
4
|
+
<%= render 'bs5/examples/list_group/disabled/example' %>
|
5
|
+
<%= render 'bs5/examples/list_group/actionable/example' %>
|
6
|
+
<%= render 'bs5/examples/list_group/flush/example' %>
|
7
|
+
<%= render 'bs5/examples/list_group/horizontal/example' %>
|
8
|
+
<%= render 'bs5/examples/list_group/style/example' %>
|
9
|
+
<%= render 'bs5/examples/list_group/with_badges/example' %>
|
10
|
+
<%= render 'bs5/examples/list_group/custom_content/example' %>
|
11
|
+
<%= render 'bs5/examples/list_group/checkboxes_and_radios/example' %>
|
@@ -1,2 +1,2 @@
|
|
1
|
-
<
|
1
|
+
<h1 id='tooltip'>Tooltips</h1>
|
2
2
|
<%= render 'bs5/examples/tooltips/default/example' %>
|
@@ -0,0 +1,32 @@
|
|
1
|
+
<!DOCTYPE html>
|
2
|
+
<html>
|
3
|
+
<head>
|
4
|
+
<title>Bs5</title>
|
5
|
+
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
|
6
|
+
<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
|
7
|
+
<style><%= Rouge::Themes::Github.render(scope: '.highlight') %></style>
|
8
|
+
</head>
|
9
|
+
<body>
|
10
|
+
<div class="container">
|
11
|
+
<div class="row">
|
12
|
+
<div class="col">
|
13
|
+
<div class="sticky-top">
|
14
|
+
<%= bs5_list_group(flush: true) do |lg| %>
|
15
|
+
<% lg.slot(:item, active: current_page?(pages_path('accordion'))) do %><%= link_to 'Accordion', pages_path('accordion') %><% end %>
|
16
|
+
<% lg.slot(:item, active: current_page?(pages_path('alert'))) do %><%= link_to 'Alert', pages_path('alert') %><% end %>
|
17
|
+
<% lg.slot(:item, active: current_page?(pages_path('badge'))) do %><%= link_to 'Badge', pages_path('badge') %><% end %>
|
18
|
+
<% lg.slot(:item, active: current_page?(pages_path('breadcrumb'))) do %><%= link_to 'Breadcrumb', pages_path('breadcrumb') %><% end %>
|
19
|
+
<% lg.slot(:item, active: current_page?(pages_path('buttons'))) do %><%= link_to 'Buttons', pages_path('buttons') %><% end %>
|
20
|
+
<% lg.slot(:item, active: current_page?(pages_path('close_button'))) do %><%= link_to 'Close button', pages_path('close_button') %><% end %>
|
21
|
+
<% lg.slot(:item, active: current_page?(pages_path('list_group'))) do %><%= link_to 'List group', pages_path('list_group') %><% end %>
|
22
|
+
<% lg.slot(:item, active: current_page?(pages_path('tooltips'))) do %><%= link_to 'Tooltips', pages_path('tooltips') %><% end %>
|
23
|
+
<%- end %>
|
24
|
+
</div>
|
25
|
+
</div>
|
26
|
+
<div class="col-10">
|
27
|
+
<%= yield %>
|
28
|
+
</div>
|
29
|
+
</div>
|
30
|
+
</div>
|
31
|
+
</body>
|
32
|
+
</html>
|
data/config/routes.rb
CHANGED
data/lib/bs5/version.rb
CHANGED
metadata
CHANGED
@@ -1,15 +1,29 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bs5
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.13
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Patrick Baselier
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-
|
11
|
+
date: 2020-12-06 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: nokogiri
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 1.10.10
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 1.10.10
|
13
27
|
- !ruby/object:Gem::Dependency
|
14
28
|
name: rails
|
15
29
|
requirement: !ruby/object:Gem::Requirement
|
@@ -140,20 +154,15 @@ files:
|
|
140
154
|
- app/components/bs5/close_button_component.rb
|
141
155
|
- app/components/bs5/example_component.html.erb
|
142
156
|
- app/components/bs5/example_component.rb
|
157
|
+
- app/components/bs5/list_group_component.html.erb
|
158
|
+
- app/components/bs5/list_group_component.rb
|
143
159
|
- app/controllers/bs5/application_controller.rb
|
144
|
-
- app/controllers/bs5/
|
160
|
+
- app/controllers/bs5/pages_controller.rb
|
145
161
|
- app/helpers/bs5/application_helper.rb
|
146
162
|
- app/helpers/bs5/components_helper.rb
|
147
163
|
- app/helpers/bs5/examples_helper.rb
|
148
164
|
- app/models/bs5/application_record.rb
|
149
165
|
- app/validators/style_validator.rb
|
150
|
-
- app/views/bs5/examples/_accordion.html.erb
|
151
|
-
- app/views/bs5/examples/_alert.html.erb
|
152
|
-
- app/views/bs5/examples/_badge.html.erb
|
153
|
-
- app/views/bs5/examples/_breadcrumb.html.erb
|
154
|
-
- app/views/bs5/examples/_buttons.html.erb
|
155
|
-
- app/views/bs5/examples/_close_button.html.erb
|
156
|
-
- app/views/bs5/examples/_tooltips.html.erb
|
157
166
|
- app/views/bs5/examples/accordion/default/_example.html.erb
|
158
167
|
- app/views/bs5/examples/accordion/default/snippet.html.erb
|
159
168
|
- app/views/bs5/examples/accordion/flush/_example.html.erb
|
@@ -198,12 +207,43 @@ files:
|
|
198
207
|
- app/views/bs5/examples/close_button/disabled/snippet.html.erb
|
199
208
|
- app/views/bs5/examples/close_button/white/_example.html.erb
|
200
209
|
- app/views/bs5/examples/close_button/white/snippet.html.erb
|
201
|
-
- app/views/bs5/examples/
|
210
|
+
- app/views/bs5/examples/list_group/actionable/_example.html.erb
|
211
|
+
- app/views/bs5/examples/list_group/actionable/button.html.erb
|
212
|
+
- app/views/bs5/examples/list_group/actionable/snippet.html.erb
|
213
|
+
- app/views/bs5/examples/list_group/active/_example.html.erb
|
214
|
+
- app/views/bs5/examples/list_group/active/snippet.html.erb
|
215
|
+
- app/views/bs5/examples/list_group/checkboxes_and_radios/_example.html.erb
|
216
|
+
- app/views/bs5/examples/list_group/checkboxes_and_radios/default.html.erb
|
217
|
+
- app/views/bs5/examples/list_group/checkboxes_and_radios/with_labels.html.erb
|
218
|
+
- app/views/bs5/examples/list_group/custom_content/_example.html.erb
|
219
|
+
- app/views/bs5/examples/list_group/custom_content/default.html.erb
|
220
|
+
- app/views/bs5/examples/list_group/default/_example.html.erb
|
221
|
+
- app/views/bs5/examples/list_group/default/snippet.html.erb
|
222
|
+
- app/views/bs5/examples/list_group/disabled/_example.html.erb
|
223
|
+
- app/views/bs5/examples/list_group/disabled/snippet.html.erb
|
224
|
+
- app/views/bs5/examples/list_group/flush/_example.html.erb
|
225
|
+
- app/views/bs5/examples/list_group/flush/snippet.html.erb
|
226
|
+
- app/views/bs5/examples/list_group/horizontal/_example.html.erb
|
227
|
+
- app/views/bs5/examples/list_group/horizontal/snippet.html.erb
|
228
|
+
- app/views/bs5/examples/list_group/style/_example.html.erb
|
229
|
+
- app/views/bs5/examples/list_group/style/actionable.html.erb
|
230
|
+
- app/views/bs5/examples/list_group/style/default.html.erb
|
231
|
+
- app/views/bs5/examples/list_group/with_badges/_example.html.erb
|
232
|
+
- app/views/bs5/examples/list_group/with_badges/default.html.erb
|
202
233
|
- app/views/bs5/examples/tooltips/default/_example.html.erb
|
203
234
|
- app/views/bs5/examples/tooltips/default/buttons.html.erb
|
204
235
|
- app/views/bs5/examples/tooltips/default/disabled_elements.html.erb
|
205
236
|
- app/views/bs5/examples/tooltips/default/snippet.html.erb
|
237
|
+
- app/views/bs5/pages/accordion.html.erb
|
238
|
+
- app/views/bs5/pages/alert.html.erb
|
239
|
+
- app/views/bs5/pages/badge.html.erb
|
240
|
+
- app/views/bs5/pages/breadcrumb.html.erb
|
241
|
+
- app/views/bs5/pages/buttons.html.erb
|
242
|
+
- app/views/bs5/pages/close_button.html.erb
|
243
|
+
- app/views/bs5/pages/list_group.html.erb
|
244
|
+
- app/views/bs5/pages/tooltips.html.erb
|
206
245
|
- app/views/layouts/bs5/application.html.erb
|
246
|
+
- app/views/layouts/bs5/pages.html.erb
|
207
247
|
- config/definitions.rb
|
208
248
|
- config/locales/en.yml
|
209
249
|
- config/routes.rb
|
@@ -1,25 +0,0 @@
|
|
1
|
-
<div class="row">
|
2
|
-
<div class="col">
|
3
|
-
<div class="sticky-top">
|
4
|
-
<ul class="nav flex-column">
|
5
|
-
<li>Accordion</li>
|
6
|
-
<li>Alert</li>
|
7
|
-
<li>Badge</li>
|
8
|
-
<li>Close button</li>
|
9
|
-
<li>Breadcrumb</li>
|
10
|
-
<li>Buttons</li>
|
11
|
-
<li>Tooltips</li>
|
12
|
-
</ul>
|
13
|
-
</div>
|
14
|
-
</div>
|
15
|
-
<div class="col-10">
|
16
|
-
<h1>Bootstrap Examples</h1>
|
17
|
-
<%= render 'accordion' %>
|
18
|
-
<%= render 'alert' %>
|
19
|
-
<%= render 'badge' %>
|
20
|
-
<%= render 'close_button' %>
|
21
|
-
<%= render 'breadcrumb' %>
|
22
|
-
<%= render 'buttons' %>
|
23
|
-
<%= render 'tooltips' %>
|
24
|
-
</div>
|
25
|
-
</div>
|