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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e219a5f99f6844eb2e58d00981c2dade2b18258f2f638a3aaf8c8c7b217f8cf2
4
- data.tar.gz: 5785daaa98c162e11cf887ff0f929bb49746c29046dc8f93d306f68a5e89e960
3
+ metadata.gz: c1951f86a585c70927101907cbfa6aa6d83d222baafc563fa470eeb490fb4439
4
+ data.tar.gz: ac23e64cf6d33417c71e6f4282e441b249b934808abc397679f1988f6d2f19f1
5
5
  SHA512:
6
- metadata.gz: 379c25ae627c7f26ef17e22122f7854f6831fbac592420c5616c376df01b4e4246a90baa5bd38160af71af7ee60271176c3920ca5ab5eb13d8de3d0d7ffb5e2a
7
- data.tar.gz: 6257eb1411d4ce4cf286b96fb334746cd8f69306f17d6a1aa8a54022e6380a4fdf2b833c0419b1fe6a54188dc03f55ec09c0bf86d312062d1e63fe56b14ff57e
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});const mountPlaybookReactKits=()=>{WebpackerReact.mountComponents()};const unmountPlaybookReactKits=()=>{WebpackerReact.unmountComponents()};ujs.setup(mountPlaybookReactKits,unmountPlaybookReactKits);document.addEventListener("DOMContentLoaded",mountPlaybookReactKits);document.addEventListener("turbo:load",mountPlaybookReactKits);document.addEventListener("turbo:frame-load",mountPlaybookReactKits);if(typeof window.Turbolinks!=="undefined"){document.addEventListener("turbolinks:load",mountPlaybookReactKits,{once:true});document.addEventListener("turbolinks:render",mountPlaybookReactKits);document.addEventListener("turbolinks:before-render",unmountPlaybookReactKits)}const observer=new MutationObserver((()=>{mountPlaybookReactKits()}));observer.observe(document.body,{childList:true,subtree:true});
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()));
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.22.0"
5
- VERSION = "14.22.0.pre.alpha.PLAY23038970"
5
+ VERSION = "14.22.0.pre.alpha.play2253rowlevelcoloringadvancedtablerails8971"
6
6
  end
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.PLAY23038970
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/_advanced_table_row_styling.md
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