bs5 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/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>
|