govuk_publishing_components 29.14.0 → 29.15.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/components/table.js +52 -0
- data/app/views/govuk_publishing_components/components/_table.html.erb +60 -30
- data/app/views/govuk_publishing_components/components/docs/table.yml +30 -0
- data/config/locales/ar.yml +4 -0
- data/config/locales/az.yml +4 -0
- data/config/locales/be.yml +4 -0
- data/config/locales/bg.yml +4 -0
- data/config/locales/bn.yml +4 -0
- data/config/locales/cs.yml +4 -0
- data/config/locales/cy.yml +4 -0
- data/config/locales/da.yml +4 -0
- data/config/locales/de.yml +4 -0
- data/config/locales/dr.yml +4 -0
- data/config/locales/el.yml +4 -0
- data/config/locales/en.yml +4 -0
- data/config/locales/es-419.yml +4 -0
- data/config/locales/es.yml +4 -0
- data/config/locales/et.yml +4 -0
- data/config/locales/fa.yml +4 -0
- data/config/locales/fi.yml +4 -0
- data/config/locales/fr.yml +4 -0
- data/config/locales/gd.yml +4 -0
- data/config/locales/gu.yml +4 -0
- data/config/locales/he.yml +4 -0
- data/config/locales/hi.yml +4 -0
- data/config/locales/hr.yml +4 -0
- data/config/locales/hu.yml +4 -0
- data/config/locales/hy.yml +4 -0
- data/config/locales/id.yml +4 -0
- data/config/locales/is.yml +4 -0
- data/config/locales/it.yml +4 -0
- data/config/locales/ja.yml +4 -0
- data/config/locales/ka.yml +4 -0
- data/config/locales/kk.yml +4 -0
- data/config/locales/ko.yml +4 -0
- data/config/locales/lt.yml +4 -0
- data/config/locales/lv.yml +4 -0
- data/config/locales/ms.yml +4 -0
- data/config/locales/mt.yml +4 -0
- data/config/locales/nl.yml +4 -0
- data/config/locales/no.yml +4 -0
- data/config/locales/pa-pk.yml +4 -0
- data/config/locales/pa.yml +4 -0
- data/config/locales/pl.yml +4 -0
- data/config/locales/ps.yml +4 -0
- data/config/locales/pt.yml +4 -0
- data/config/locales/ro.yml +4 -0
- data/config/locales/ru.yml +4 -0
- data/config/locales/si.yml +4 -0
- data/config/locales/sk.yml +4 -0
- data/config/locales/sl.yml +4 -0
- data/config/locales/so.yml +4 -0
- data/config/locales/sq.yml +4 -0
- data/config/locales/sr.yml +4 -0
- data/config/locales/sv.yml +4 -0
- data/config/locales/sw.yml +4 -0
- data/config/locales/ta.yml +4 -0
- data/config/locales/th.yml +4 -0
- data/config/locales/tk.yml +4 -0
- data/config/locales/tr.yml +4 -0
- data/config/locales/uk.yml +4 -0
- data/config/locales/ur.yml +4 -0
- data/config/locales/uz.yml +4 -0
- data/config/locales/vi.yml +4 -0
- data/config/locales/zh-hk.yml +4 -0
- data/config/locales/zh-tw.yml +4 -0
- data/config/locales/zh.yml +4 -0
- data/lib/govuk_publishing_components/app_helpers/table_helper.rb +3 -3
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f53467f684078c59a2e499d0697b47183adacc1b30b9c19839ab8a8983715ff2
|
4
|
+
data.tar.gz: edddfebbcd07e825aa735e3bbe59fe000ebf5b2007272522ef94e92506cae352
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 25eed8d95465c897c95ab654b97e2bfc15fbf956fd7535c361354da8326cc23795160413abdca24bb80757f4c6ea4c1033f3ca96474caf705ae92059896bf8c8
|
7
|
+
data.tar.gz: a7c01b6e8fa79cde09ef1a04c596a97a2dde847341c7e50fece0997cd78472b8a6f30741f228feb6c29b969c3374664f46d9262827027fc42ec4a67bb0c59bd4
|
@@ -0,0 +1,52 @@
|
|
1
|
+
window.GOVUK = window.GOVUK || {}
|
2
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
3
|
+
|
4
|
+
(function (Modules) {
|
5
|
+
function Table ($module) {
|
6
|
+
this.$module = $module
|
7
|
+
this.searchInput = $module.querySelector('input[name="filter"]')
|
8
|
+
this.tableRows = $module.querySelectorAll('.js-govuk-table__row')
|
9
|
+
this.filter = $module.querySelector('.js-gem-c-table__filter')
|
10
|
+
this.filterCount = this.filter.querySelector('.js-filter-count')
|
11
|
+
this.message = $module.querySelector('.js-gem-c-table__message')
|
12
|
+
this.hiddenClass = 'govuk-!-display-none'
|
13
|
+
this.filterCountText = this.filterCount.getAttribute('data-count-text')
|
14
|
+
this.tableRowsContent = []
|
15
|
+
|
16
|
+
for (var i = 0; i < this.tableRows.length; i++) {
|
17
|
+
this.tableRowsContent.push(this.tableRows[i].textContent.toUpperCase())
|
18
|
+
}
|
19
|
+
}
|
20
|
+
|
21
|
+
Table.prototype.init = function () {
|
22
|
+
this.$module.updateRows = this.updateRows.bind(this)
|
23
|
+
this.filter.classList.remove(this.hiddenClass)
|
24
|
+
this.searchInput.addEventListener('input', this.$module.updateRows)
|
25
|
+
}
|
26
|
+
|
27
|
+
// Reads value of input and filters content
|
28
|
+
Table.prototype.updateRows = function () {
|
29
|
+
var value = this.searchInput.value
|
30
|
+
var hiddenRows = 0
|
31
|
+
var length = this.tableRows.length
|
32
|
+
|
33
|
+
for (var i = 0; i < length; i++) {
|
34
|
+
if (this.tableRowsContent[i].includes(value.toUpperCase())) {
|
35
|
+
this.tableRows[i].classList.remove(this.hiddenClass)
|
36
|
+
} else {
|
37
|
+
this.tableRows[i].classList.add(this.hiddenClass)
|
38
|
+
hiddenRows++
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
this.filterCount.textContent = (length - hiddenRows) + ' ' + this.filterCountText
|
43
|
+
|
44
|
+
if (length === hiddenRows) {
|
45
|
+
this.message.classList.remove(this.hiddenClass)
|
46
|
+
} else {
|
47
|
+
this.message.classList.add(this.hiddenClass)
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
Modules.Table = Table
|
52
|
+
})(window.GOVUK.Modules)
|
@@ -2,46 +2,76 @@
|
|
2
2
|
caption ||= nil
|
3
3
|
head ||= []
|
4
4
|
rows ||= []
|
5
|
-
first_cell_is_header ||=false
|
5
|
+
first_cell_is_header ||= false
|
6
6
|
caption_classes ||= nil
|
7
|
-
sortable ||=false
|
7
|
+
sortable ||= false
|
8
|
+
filterable ||= false
|
9
|
+
label ||= t("components.table.filter_label")
|
10
|
+
|
11
|
+
table_id = "table-id-#{SecureRandom.hex(4)}"
|
12
|
+
filter_count_id = "filter-count-id-#{SecureRandom.hex(4)}"
|
8
13
|
%>
|
9
14
|
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
15
|
+
<% @table = capture do %>
|
16
|
+
<%= GovukPublishingComponents::AppHelpers::TableHelper.helper(self, caption, table_id, {
|
17
|
+
sortable: sortable,
|
18
|
+
filterable: filterable,
|
19
|
+
caption_classes: caption_classes
|
20
|
+
}) do |t| %>
|
21
|
+
|
22
|
+
<% if head.any? %>
|
23
|
+
<%= t.head do %>
|
24
|
+
<% head.each_with_index do |item, cellindex| %>
|
25
|
+
<%= t.header item[:text], {
|
26
|
+
format: item[:format],
|
27
|
+
href: item[:href],
|
28
|
+
data_attributes: item[:data_attributes],
|
29
|
+
sort_direction: item[:sort_direction]
|
30
|
+
} %>
|
31
|
+
<% end %>
|
24
32
|
<% end %>
|
25
33
|
<% end %>
|
26
|
-
<% end %>
|
27
34
|
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
35
|
+
<%= t.body do %>
|
36
|
+
<% rows.each_with_index do |row, rowindex| %>
|
37
|
+
<%= t.row do %>
|
38
|
+
<% row.each_with_index do |cell, cellindex| %>
|
39
|
+
<% if cellindex == 0 && first_cell_is_header %>
|
40
|
+
<%= t.header cell[:text], {
|
41
|
+
scope: "row",
|
42
|
+
format: cell[:format]
|
43
|
+
} %>
|
44
|
+
<% else %>
|
45
|
+
<%= t.cell cell[:text], {
|
46
|
+
format: cell[:format]
|
47
|
+
} %>
|
48
|
+
<% end %>
|
41
49
|
<% end %>
|
42
50
|
<% end %>
|
43
51
|
<% end %>
|
44
52
|
<% end %>
|
45
53
|
<% end %>
|
54
|
+
<% end %>
|
55
|
+
|
56
|
+
<% if filterable %>
|
57
|
+
<div data-module="table">
|
58
|
+
<div class="js-gem-c-table__filter govuk-!-display-none">
|
59
|
+
<%= render "govuk_publishing_components/components/input", {
|
60
|
+
label: {
|
61
|
+
text: label
|
62
|
+
},
|
63
|
+
name: "filter",
|
64
|
+
controls: table_id,
|
65
|
+
aria_described_by: filter_count_id,
|
66
|
+
} %>
|
67
|
+
|
68
|
+
<p id="<%= filter_count_id %>" aria-live="polite" class="js-filter-count govuk-visually-hidden" data-count-text="<%= t("components.table.filter_count") %>"></p>
|
69
|
+
</div>
|
70
|
+
|
71
|
+
<%= @table %>
|
46
72
|
|
73
|
+
<p class="govuk-body govuk-!-display-none js-gem-c-table__message"><%= t("components.table.filter_message") %></p>
|
74
|
+
</div>
|
75
|
+
<% else %>
|
76
|
+
<%= @table %>
|
47
77
|
<% end %>
|
@@ -134,3 +134,33 @@ examples:
|
|
134
134
|
format: numeric
|
135
135
|
- text: £80
|
136
136
|
format: numeric
|
137
|
+
with_filter:
|
138
|
+
description: This option allows table rows to be filtered by user input. Since this filtering is implemented client-side the filter section is not displayed by default but displays only when JavaScript is enabled. The label for the input field can be set when the coponent is rendered via the `label` key. if this is not set a fallback value will display.
|
139
|
+
data:
|
140
|
+
filterable: true
|
141
|
+
label: Filter months
|
142
|
+
head:
|
143
|
+
- text: Month you apply
|
144
|
+
- text: Rate for bicycles
|
145
|
+
format: numeric
|
146
|
+
- text: Rate for vehicles
|
147
|
+
format: numeric
|
148
|
+
rows:
|
149
|
+
-
|
150
|
+
- text: January
|
151
|
+
- text: £85
|
152
|
+
format: numeric
|
153
|
+
- text: £95
|
154
|
+
format: numeric
|
155
|
+
-
|
156
|
+
- text: February
|
157
|
+
- text: £75
|
158
|
+
format: numeric
|
159
|
+
- text: £55
|
160
|
+
format: numeric
|
161
|
+
-
|
162
|
+
- text: March
|
163
|
+
- text: £165
|
164
|
+
format: numeric
|
165
|
+
- text: £125
|
166
|
+
format: numeric
|
data/config/locales/ar.yml
CHANGED
data/config/locales/az.yml
CHANGED
data/config/locales/be.yml
CHANGED
data/config/locales/bg.yml
CHANGED
data/config/locales/bn.yml
CHANGED
data/config/locales/cs.yml
CHANGED
data/config/locales/cy.yml
CHANGED
data/config/locales/da.yml
CHANGED
data/config/locales/de.yml
CHANGED
data/config/locales/dr.yml
CHANGED
data/config/locales/el.yml
CHANGED
data/config/locales/en.yml
CHANGED
data/config/locales/es-419.yml
CHANGED
data/config/locales/es.yml
CHANGED
data/config/locales/et.yml
CHANGED
data/config/locales/fa.yml
CHANGED
data/config/locales/fi.yml
CHANGED
data/config/locales/fr.yml
CHANGED
data/config/locales/gd.yml
CHANGED
data/config/locales/gu.yml
CHANGED
data/config/locales/he.yml
CHANGED
data/config/locales/hi.yml
CHANGED
data/config/locales/hr.yml
CHANGED
data/config/locales/hu.yml
CHANGED
data/config/locales/hy.yml
CHANGED
data/config/locales/id.yml
CHANGED
data/config/locales/is.yml
CHANGED
data/config/locales/it.yml
CHANGED
data/config/locales/ja.yml
CHANGED
data/config/locales/ka.yml
CHANGED
data/config/locales/kk.yml
CHANGED
data/config/locales/ko.yml
CHANGED
data/config/locales/lt.yml
CHANGED
data/config/locales/lv.yml
CHANGED
data/config/locales/ms.yml
CHANGED
data/config/locales/mt.yml
CHANGED
data/config/locales/nl.yml
CHANGED
data/config/locales/no.yml
CHANGED
data/config/locales/pa-pk.yml
CHANGED
data/config/locales/pa.yml
CHANGED
data/config/locales/pl.yml
CHANGED
data/config/locales/ps.yml
CHANGED
data/config/locales/pt.yml
CHANGED
data/config/locales/ro.yml
CHANGED
data/config/locales/ru.yml
CHANGED
data/config/locales/si.yml
CHANGED
data/config/locales/sk.yml
CHANGED
data/config/locales/sl.yml
CHANGED
data/config/locales/so.yml
CHANGED
data/config/locales/sq.yml
CHANGED
data/config/locales/sr.yml
CHANGED
data/config/locales/sv.yml
CHANGED
data/config/locales/sw.yml
CHANGED
data/config/locales/ta.yml
CHANGED
data/config/locales/th.yml
CHANGED
data/config/locales/tk.yml
CHANGED
data/config/locales/tr.yml
CHANGED
data/config/locales/uk.yml
CHANGED
data/config/locales/ur.yml
CHANGED
data/config/locales/uz.yml
CHANGED
data/config/locales/vi.yml
CHANGED
data/config/locales/zh-hk.yml
CHANGED
data/config/locales/zh-tw.yml
CHANGED
data/config/locales/zh.yml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
module GovukPublishingComponents
|
2
2
|
module AppHelpers
|
3
3
|
class TableHelper
|
4
|
-
def self.helper(context, caption = nil, opt = {})
|
4
|
+
def self.helper(context, caption = nil, id = nil, opt = {})
|
5
5
|
builder = TableBuilder.new(context.tag)
|
6
6
|
|
7
7
|
classes = %w[gem-c-table govuk-table]
|
@@ -10,7 +10,7 @@ module GovukPublishingComponents
|
|
10
10
|
caption_classes = %w[govuk-table__caption]
|
11
11
|
caption_classes << opt[:caption_classes] if opt[:caption_classes]
|
12
12
|
|
13
|
-
context.tag.table class: classes do
|
13
|
+
context.tag.table class: classes, id: id do
|
14
14
|
context.concat context.tag.caption caption, class: caption_classes
|
15
15
|
yield(builder)
|
16
16
|
end
|
@@ -41,7 +41,7 @@ module GovukPublishingComponents
|
|
41
41
|
end
|
42
42
|
|
43
43
|
def row
|
44
|
-
tag.tr class: "govuk-table__row" do
|
44
|
+
tag.tr class: "govuk-table__row js-govuk-table__row" do
|
45
45
|
yield(self)
|
46
46
|
end
|
47
47
|
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: govuk_publishing_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 29.
|
4
|
+
version: 29.15.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GOV.UK Dev
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2022-07-
|
11
|
+
date: 2022-07-11 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: govuk_app_config
|
@@ -481,6 +481,7 @@ files:
|
|
481
481
|
- app/assets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
|
482
482
|
- app/assets/javascripts/govuk_publishing_components/components/skip-link.js
|
483
483
|
- app/assets/javascripts/govuk_publishing_components/components/step-by-step-nav.js
|
484
|
+
- app/assets/javascripts/govuk_publishing_components/components/table.js
|
484
485
|
- app/assets/javascripts/govuk_publishing_components/components/tabs.js
|
485
486
|
- app/assets/javascripts/govuk_publishing_components/dependencies.js
|
486
487
|
- app/assets/javascripts/govuk_publishing_components/ie.js
|