playbook_ui 14.22.0.pre.alpha.PLAY23038970 → 14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971
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/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb +46 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +11 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +2 -0
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +4 -2
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_row_styling.md → _advanced_table_row_styling_react.md} +0 -0
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c1951f86a585c70927101907cbfa6aa6d83d222baafc563fa470eeb490fb4439
|
4
|
+
data.tar.gz: ac23e64cf6d33417c71e6f4282e441b249b934808abc397679f1988f6d2f19f1
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: adfb1539088a12f382b08121237037bbf7b9d89ea1acbaa74aeb6e34df20c84bd57fc0c6c73f696d513651948d3cd138d9132a2164132c4d7074bfee8c97312c
|
7
|
+
data.tar.gz: 0a457e8d1e1abce99a8228ec489d17bbfc84e66789153d865ea391fc044777546e9761645d16d31ad43a315362262aaa698a020588d004766fdf184b62d69665
|
@@ -12,7 +12,7 @@
|
|
12
12
|
<% content.presence %>
|
13
13
|
<% else %>
|
14
14
|
<%= pb_rails("advanced_table/table_header", props: { column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, show_actions_bar: object.show_actions_bar }) %>
|
15
|
-
<%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion }) %>
|
15
|
+
<%= pb_rails("advanced_table/table_body", props: { id: object.id, table_data: object.table_data, column_definitions: object.column_definitions, responsive: object.responsive, loading: object.loading, selectable_rows: object.selectable_rows, enable_toggle_expansion: object.enable_toggle_expansion, row_styling: object.row_styling }) %>
|
16
16
|
<% end %>
|
17
17
|
<% end %>
|
18
18
|
<% end %>
|
@@ -31,6 +31,8 @@ module Playbook
|
|
31
31
|
default: []
|
32
32
|
prop :scroll_bar_none, type: Playbook::Props::Boolean,
|
33
33
|
default: false
|
34
|
+
prop :row_styling, type: Playbook::Props::Array,
|
35
|
+
default: []
|
34
36
|
|
35
37
|
def classname
|
36
38
|
additional_classes = [responsive_classname, max_height_classname, hide_scroll_bar_class]
|
@@ -0,0 +1,46 @@
|
|
1
|
+
<% column_definitions = [
|
2
|
+
{
|
3
|
+
accessor: "year",
|
4
|
+
label: "Year",
|
5
|
+
cellAccessors: ["quarter", "month", "day"],
|
6
|
+
},
|
7
|
+
{
|
8
|
+
accessor: "newEnrollments",
|
9
|
+
label: "New Enrollments",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
accessor: "scheduledMeetings",
|
13
|
+
label: "Scheduled Meetings",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
accessor: "attendanceRate",
|
17
|
+
label: "Attendance Rate",
|
18
|
+
},
|
19
|
+
{
|
20
|
+
accessor: "completedClasses",
|
21
|
+
label: "Completed Classes",
|
22
|
+
},
|
23
|
+
{
|
24
|
+
accessor: "classCompletionRate",
|
25
|
+
label: "Class Completion Rate",
|
26
|
+
},
|
27
|
+
{
|
28
|
+
accessor: "graduatedStudents",
|
29
|
+
label: "Graduated Students",
|
30
|
+
}
|
31
|
+
] %>
|
32
|
+
|
33
|
+
<% row_styling = [
|
34
|
+
{
|
35
|
+
row_id: "1",
|
36
|
+
background_color: "#F9BB00",
|
37
|
+
},
|
38
|
+
{
|
39
|
+
row_id: "8",
|
40
|
+
background_color: "#0056CF",
|
41
|
+
font_color: "white",
|
42
|
+
expand_button_color: "white",
|
43
|
+
},
|
44
|
+
] %>
|
45
|
+
|
46
|
+
<%= pb_rails("advanced_table", props: { id: "row-styling", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
|
@@ -0,0 +1,7 @@
|
|
1
|
+
The `row_styling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `row_styling` gives you 3 optional controls:
|
2
|
+
|
3
|
+
- `background_color` : use this to control the background color of the row
|
4
|
+
- `font_color`: use this to control font color for each row if needed, for example if using a darker background color.
|
5
|
+
- `expand_button_color`: use this to control the color of the expand icon if needed, for example if using a darker background color.
|
6
|
+
|
7
|
+
**NOTE:** Each object within the `table_data` Array must contain a unique id in order to attach an id to all Rows for this to function.
|
@@ -18,6 +18,7 @@ examples:
|
|
18
18
|
- advanced_table_selectable_rows_actions_rails: Selectable Rows (With Actions)
|
19
19
|
- advanced_table_selectable_rows_header_rails: Selectable Rows (No Actions Bar)
|
20
20
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
21
|
+
- advanced_table_row_styling: Row Styling
|
21
22
|
- advanced_table_column_styling_rails: Column Styling
|
22
23
|
- advanced_table_column_styling_column_headers_rails: Column Styling with Multiple Headers
|
23
24
|
- advanced_table_column_border_color_rails: Column Group Border Color
|
@@ -23,6 +23,8 @@ module Playbook
|
|
23
23
|
default: "scroll"
|
24
24
|
prop :selectable_rows, type: Playbook::Props::Boolean,
|
25
25
|
default: false
|
26
|
+
prop :row_styling, type: Playbook::Props::Array,
|
27
|
+
default: []
|
26
28
|
|
27
29
|
def flatten_columns(columns)
|
28
30
|
columns.flat_map do |col|
|
@@ -66,7 +68,7 @@ module Playbook
|
|
66
68
|
end
|
67
69
|
|
68
70
|
# Additional class and data attributes needed for toggle logic
|
69
|
-
output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
|
71
|
+
output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion, row_styling: row_styling })
|
70
72
|
|
71
73
|
if row[:children].present?
|
72
74
|
row[:children].each do |child_row|
|
@@ -1,3 +1,10 @@
|
|
1
|
+
<%
|
2
|
+
row_style = object.row_styling.find { |style| style[:row_id].to_s == object.row_id.to_s }
|
3
|
+
button_color = row_style&.[](:expand_button_color)
|
4
|
+
bg_color = row_style&.[](:background_color)
|
5
|
+
font_color = row_style&.[](:font_color)
|
6
|
+
%>
|
7
|
+
|
1
8
|
<%= pb_content_tag(:tr) do %>
|
2
9
|
<% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
|
3
10
|
<% if has_separate_checkbox %>
|
@@ -5,7 +12,7 @@
|
|
5
12
|
<% end %>
|
6
13
|
<% object.column_definitions.each_with_index do |column, index| %>
|
7
14
|
<% next unless column[:accessor].present? %>
|
8
|
-
<%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
|
15
|
+
<%= pb_rails("table/table_cell", props: { html_options: { style: { "background-color": bg_color, color: font_color } }, classname:object.td_classname(column, index)}) do %>
|
9
16
|
<%= pb_rails("flex", props:{ align: "center", justify: object.justify_for(column, index), classname: object.loading ? "loading-cell" : "" }) do %>
|
10
17
|
<% if collapsible_trail && index.zero? %>
|
11
18
|
<% (1..depth).each do |i| %>
|
@@ -28,7 +35,9 @@
|
|
28
35
|
<button
|
29
36
|
id="<%= "#{object.id}_#{object.row.object_id}" %>"
|
30
37
|
class="gray-icon expand-toggle-icon"
|
31
|
-
data-advanced-table="true"
|
38
|
+
data-advanced-table="true"
|
39
|
+
style="color: <%= button_color %>"
|
40
|
+
>
|
32
41
|
<%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
|
33
42
|
<%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play-down", cursor: "pointer" }) %>
|
34
43
|
</button>
|
@@ -27,6 +27,8 @@ module Playbook
|
|
27
27
|
prop :enable_toggle_expansion, type: Playbook::Props::Enum,
|
28
28
|
values: %w[all header none],
|
29
29
|
default: "header"
|
30
|
+
prop :row_styling, type: Playbook::Props::Array,
|
31
|
+
default: []
|
30
32
|
|
31
33
|
def data
|
32
34
|
Hash(prop(:data)).merge(table_data_attributes)
|
@@ -1 +1 @@
|
|
1
|
-
import WebpackerReact from"webpacker-react";import{g as getDefaultExportFromCjs}from"./chunks/lib-DYpq0k8j.js";import{C as CircleChart,B as BarGraph}from"./chunks/_circle_chart-BZmlhBs2.js";import{P as PhoneNumberInput,G as Gauge,T as Typeahead,R as RichTextEditor,h as Passphrase,L as LineGraph,i as Legend,M as MultiLevelSelect,D as DistributionBar,j as DialogHeader,k as DialogFooter,l as DialogBody,n as Dialog}from"./chunks/_typeahead-B1tu_vWi.js";import"react";import"react/jsx-runtime";import"react-dom";import"react-trix";import"trix";import"react-is";var ujs$1={};var hasRequiredUjs;function requireUjs(){if(hasRequiredUjs)return ujs$1;hasRequiredUjs=1;Object.defineProperty(ujs$1,"__esModule",{value:true});var ujs2={handleEvent:function handleEvent(eventName,callback){var _ref=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{once:false},once=_ref.once;var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){if(once){$(document).one(eventName,callback)}else{$(document).on(eventName,callback)}}else{document.addEventListener(eventName,callback,{once:once})}},setup:function setup(onMount,onUnmount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;var Turbolinks=window.Turbolinks;if(typeof Turbolinks!=="undefined"&&Turbolinks.supported){if(typeof Turbolinks.EVENTS!=="undefined"){this.turbolinksClassic(onMount,onUnmount)}else if(typeof Turbolinks.controller!=="undefined"){this.turbolinks5(onMount,onUnmount)}else{this.turbolinksClassicDeprecated(onMount,onUnmount)}}else if($&&typeof $.pjax==="function"){this.pjax(onMount,onUnmount)}else{this.native(onMount)}},turbolinks5:function turbolinks5(onMount,onUnmount){this.handleEvent("turbolinks:load",onMount,{once:true});this.handleEvent("turbolinks:render",onMount);this.handleEvent("turbolinks:before-render",onUnmount)},turbolinksClassic:function turbolinksClassic(onMount,onUnmount){var Turbolinks=window.Turbolinks;this.handleEvent(Turbolinks.EVENTS.CHANGE,onMount);this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,onUnmount)},turbolinksClassicDeprecated:function turbolinksClassicDeprecated(onMount,onUnmount){var Turbolinks=window.Turbolinks;Turbolinks.pagesCached(0);this.handleEvent("page:change",onMount);this.handleEvent("page:receive",onUnmount)},pjax:function pjax(onMount,onUnmount){this.handleEvent("ready",onMount);this.handleEvent("pjax:end",onMount);this.handleEvent("pjax:beforeReplace",onUnmount)},native:function native(onMount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){$((function(){return onMount()}))}else if("addEventListener"in window){document.addEventListener("DOMContentLoaded",onMount)}else{window.attachEvent("onload",onMount)}}};ujs$1.default=ujs2;return ujs$1}var ujsExports=requireUjs();const ujs=getDefaultExportFromCjs(ujsExports);WebpackerReact.registerComponents({BarGraph:BarGraph,CircleChart:CircleChart,Dialog:Dialog,DialogBody:DialogBody,DialogFooter:DialogFooter,DialogHeader:DialogHeader,DistributionBar:DistributionBar,MultiLevelSelect:MultiLevelSelect,Legend:Legend,LineGraph:LineGraph,Passphrase:Passphrase,RichTextEditor:RichTextEditor,Typeahead:Typeahead,Gauge:Gauge,PhoneNumberInput:PhoneNumberInput});
|
1
|
+
import WebpackerReact from"webpacker-react";import{g as getDefaultExportFromCjs}from"./chunks/lib-DYpq0k8j.js";import{C as CircleChart,B as BarGraph}from"./chunks/_circle_chart-BZmlhBs2.js";import{P as PhoneNumberInput,G as Gauge,T as Typeahead,R as RichTextEditor,h as Passphrase,L as LineGraph,i as Legend,M as MultiLevelSelect,D as DistributionBar,j as DialogHeader,k as DialogFooter,l as DialogBody,n as Dialog}from"./chunks/_typeahead-B1tu_vWi.js";import"react";import"react/jsx-runtime";import"react-dom";import"react-trix";import"trix";import"react-is";var ujs$1={};var hasRequiredUjs;function requireUjs(){if(hasRequiredUjs)return ujs$1;hasRequiredUjs=1;Object.defineProperty(ujs$1,"__esModule",{value:true});var ujs2={handleEvent:function handleEvent(eventName,callback){var _ref=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{once:false},once=_ref.once;var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){if(once){$(document).one(eventName,callback)}else{$(document).on(eventName,callback)}}else{document.addEventListener(eventName,callback,{once:once})}},setup:function setup(onMount,onUnmount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;var Turbolinks=window.Turbolinks;if(typeof Turbolinks!=="undefined"&&Turbolinks.supported){if(typeof Turbolinks.EVENTS!=="undefined"){this.turbolinksClassic(onMount,onUnmount)}else if(typeof Turbolinks.controller!=="undefined"){this.turbolinks5(onMount,onUnmount)}else{this.turbolinksClassicDeprecated(onMount,onUnmount)}}else if($&&typeof $.pjax==="function"){this.pjax(onMount,onUnmount)}else{this.native(onMount)}},turbolinks5:function turbolinks5(onMount,onUnmount){this.handleEvent("turbolinks:load",onMount,{once:true});this.handleEvent("turbolinks:render",onMount);this.handleEvent("turbolinks:before-render",onUnmount)},turbolinksClassic:function turbolinksClassic(onMount,onUnmount){var Turbolinks=window.Turbolinks;this.handleEvent(Turbolinks.EVENTS.CHANGE,onMount);this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,onUnmount)},turbolinksClassicDeprecated:function turbolinksClassicDeprecated(onMount,onUnmount){var Turbolinks=window.Turbolinks;Turbolinks.pagesCached(0);this.handleEvent("page:change",onMount);this.handleEvent("page:receive",onUnmount)},pjax:function pjax(onMount,onUnmount){this.handleEvent("ready",onMount);this.handleEvent("pjax:end",onMount);this.handleEvent("pjax:beforeReplace",onUnmount)},native:function native(onMount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){$((function(){return onMount()}))}else if("addEventListener"in window){document.addEventListener("DOMContentLoaded",onMount)}else{window.attachEvent("onload",onMount)}}};ujs$1.default=ujs2;return ujs$1}var ujsExports=requireUjs();const ujs=getDefaultExportFromCjs(ujsExports);WebpackerReact.registerComponents({BarGraph:BarGraph,CircleChart:CircleChart,Dialog:Dialog,DialogBody:DialogBody,DialogFooter:DialogFooter,DialogHeader:DialogHeader,DistributionBar:DistributionBar,MultiLevelSelect:MultiLevelSelect,Legend:Legend,LineGraph:LineGraph,Passphrase:Passphrase,RichTextEditor:RichTextEditor,Typeahead:Typeahead,Gauge:Gauge,PhoneNumberInput:PhoneNumberInput});ujs.setup((()=>WebpackerReact.mountComponents()),(()=>WebpackerReact.unmountComponents()));
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 14.22.0.pre.alpha.
|
4
|
+
version: 14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -359,8 +359,10 @@ files:
|
|
359
359
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
|
360
360
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
|
361
361
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
|
362
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.html.erb
|
362
363
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx
|
363
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/
|
364
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md
|
365
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md
|
364
366
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.html.erb
|
365
367
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.jsx
|
366
368
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
|