Skip to content
Snippets Groups Projects
Commit 05571beb authored by Florent Torregrosa's avatar Florent Torregrosa
Browse files

Issue #3423237 by Grimreaper, pdureau: Table: rework component for SDC...

Issue #3423237 by Grimreaper, pdureau: Table: rework component for SDC compatibility. Fix views summary caption. Handle active state.
parent ad400759
Branches 5.0.x
No related tags found
No related merge requests found
......@@ -91,6 +91,7 @@
* @inheritDoc
*/
Drupal.theme.message = (message, options) => {
// @todo use the pattern alert directly if possible in JS.
options = options || {};
const wrapper = Drupal.theme(
'messageWrapper',
......
......@@ -46,21 +46,80 @@
{# @todo create theme settings to control default behavior. #}
{% set responsive = responsive ? responsive : '' %}
{% set stripes = stripes ? stripes : [] %}
{% set stripes = no_stripping ? [] : stripes %}
{% set borders = borders ? borders : [] %}
{% set hover = hover ? hover : 'false' %}
{% set divider = divider ? divider : ['thead'] %}
{% set caption_top = caption_top ? caption_top : 'false' %}
{% set header_color = header_color ? header_color : '' %}
{% set footer_color = footer_color ? footer_color : '' %}
{# @todo Remove sticky-enabled when Core 10.3 will become minimum supported version. #}
{% set attributes = sticky ? attributes.addClass('sticky-enabled sticky-header') : attributes %}
{# Support 'Table Sticky Header' extension. https://bootstrap-table.com/docs/extensions/sticky-header #}
{% if sticky %}
{% set attributes = attributes.setAttribute('data-sticky-header', 'true') %}
{% endif %}
{# Prepare header in the expected format. #}
{% set prepared_header = [] %}
{% for cell in header %}
{% set active = cell.active_table_sort ?: false %}
{% set active = active ?: cell.attributes.hasClass('is-active') %}
{% set prepared_header = prepared_header|merge([
pattern('table_cell', {
'attributes': cell.attributes,
'tag': cell.tag,
'content': cell.content,
'active': active
})
]) %}
{% endfor %}
{% if no_stripping %}
{% set stripes = [] %}
{% endif %}
{# Prepare rows in the expected format. #}
{% set prepared_rows = [] %}
{% for row in rows %}
{% set prepared_cells = [] %}
{% for cell in row.cells %}
{% set active = cell.active_table_sort ?: false %}
{% set active = active ?: cell.attributes.hasClass('is-active') %}
{% set prepared_cells = prepared_cells|merge([
pattern('table_cell', {
'attributes': cell.attributes,
'tag': cell.tag,
'content': cell.content,
'active': active
})
]) %}
{% endfor %}
{% set prepared_rows = prepared_rows|merge([
pattern('table_row', {
'attributes': row.attributes,
'cells': prepared_cells
})
]) %}
{% endfor %}
{# Prepare footer in the expected format. #}
{% set prepared_footer = [] %}
{% for row in footer %}
{% set prepared_cells = [] %}
{% for cell in row.cells %}
{% set active = cell.active_table_sort ?: false %}
{% set active = active ?: cell.attributes.hasClass('is-active') %}
{% set prepared_cells = prepared_cells|merge([
pattern('table_cell', {
'attributes': cell.attributes,
'tag': cell.tag,
'content': cell.content,
'active': active
})
]) %}
{% endfor %}
{% set prepared_footer = prepared_footer|merge([
pattern('table_row', {
'attributes': row.attributes,
'cells': prepared_cells
})
]) %}
{% endfor %}
{{ pattern('table', {
attributes: attributes,
......@@ -74,11 +133,11 @@
divider: divider,
caption: caption,
caption_top: caption_top,
header: header,
header: prepared_header,
header_columns: header_columns,
colgroups: colgroups,
rows: rows,
footer: footer,
rows: prepared_rows,
footer: prepared_footer,
empty: empty
})
}}
......@@ -43,11 +43,6 @@
{% set caption_top = caption_top ? caption_top : 'false' %}
{% set header_color = header_color ? header_color : '' %}
{# Support 'Table Sticky Header' extension. https://bootstrap-table.com/docs/extensions/sticky-header #}
{% if sticky %}
{% set attributes = attributes.setAttribute('data-sticky-header', 'true') %}
{% endif %}
{# @todo Remove sticky-enabled when Core 10.3 will become minimum supported version. #}
{%
set classes = [
......@@ -58,15 +53,15 @@
%}
{# Handle caption fallback logic from Views. #}
{% if caption %}
{% set caption = caption %}
{{ caption }}
{% else %}
{% if not caption %}
{% set caption = title %}
{% endif %}
{% if (summary_element is not empty) %}
{% set caption = caption|render ~ summary_element|render %}
{% set caption = [
caption ? caption : [],
summary_element
] %}
{% endif %}
{% if not caption_needed %}
......@@ -76,7 +71,21 @@
{# Prepare header in the expected format. #}
{% set prepared_header = [] %}
{% if header %}
{% for column in header %}
{% for key, column in header %}
{% set active = column.active_table_sort ?: false %}
{% set active = active ?: column.attributes.hasClass('is-active') %}
{% set column_classes = [] %}
{% if column.default_classes %}
{%
set column_classes = [
'views-field',
'views-field-' ~ fields[key],
]
%}
{% set active = active ?: 'is-active' in fields[key] %}
{% endif %}
{% set column_content %}
{%- if column.wrapper_element -%}
<{{ column.wrapper_element }}>
......@@ -95,10 +104,14 @@
{%- endif -%}
{% endset %}
{% set prepared_header = prepared_header|merge([{
'attributes': column.attributes.setAttribute('scope', 'col'),
'content': column_content
}]) %}
{% set prepared_header = prepared_header|merge([
pattern('table_cell', {
'attributes': column.attributes.addClass(column_classes).setAttribute('scope', 'col'),
'tag': 'th',
'content': column_content,
'active': active
})
]) %}
{% endfor %}
{% endif %}
......@@ -107,6 +120,22 @@
{% for row in rows %}
{% set prepared_columns = [] %}
{% for column in row.columns %}
{% set active = column.active_table_sort ?: false %}
{% set active = active ?: column.attributes.hasClass('is-active') %}
{% set column_classes = [] %}
{% if column.default_classes %}
{%
set column_classes = [
'views-field'
]
%}
{% for field in column.fields %}
{% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
{% set active = active ?: 'is-active' in field %}
{% endfor %}
{% endif %}
{% set column_content %}
{%- if column.wrapper_element -%}
<{{ column.wrapper_element }}>
......@@ -121,16 +150,21 @@
{%- endif %}
{% endset %}
{% set prepared_columns = prepared_columns|merge([{
'attributes': column.attributes,
'content': column_content
}]) %}
{% set prepared_columns = prepared_columns|merge([
pattern('table_cell', {
'attributes': column.attributes.addClass(column_classes),
'content': column_content,
'active': active
})
]) %}
{% endfor %}
{% set prepared_rows = prepared_rows|merge([{
'attributes': row.attributes,
'cells': prepared_columns
}]) %}
{% set prepared_rows = prepared_rows|merge([
pattern('table_row', {
'attributes': row.attributes,
'cells': prepared_columns
})
]) %}
{% endfor %}
{{ pattern('table', {
......@@ -147,5 +181,4 @@
header: prepared_header,
header_columns: header|length,
rows: prepared_rows
})
}}
}) }}
......@@ -15,17 +15,9 @@
{% endfor %}
{% endif %}
{% if borders %}
{% set attributes = attributes.addClass('table-' ~ borders|lower|replace({'_': '-'})) %}
{% endif %}
{% if hover %}
{% set attributes = attributes.addClass('table-hover') %}
{% endif %}
{% if caption_top %}
{% set attributes = attributes.addClass('caption-top') %}
{% endif %}
{% set attributes = borders ? attributes.addClass('table-' ~ borders|lower|replace({'_': '-'})) : attributes %}
{% set attributes = hover ? attributes.addClass('table-hover') : attributes %}
{% set attributes = caption_top ? attributes.addClass('caption-top') : attributes %}
{% if header_color %}
{% set thead_attributes = thead_attributes.addClass('table-' ~ header_color|lower|replace({'_': '-'})) %}
......@@ -56,7 +48,7 @@
{% endif %}
{% if responsive %}
<div class="{{ 'table-' ~ responsive|lower|replace({'_': '-'}) }}">
<div class="{{ 'table-' ~ responsive|lower|replace({'_': '-'}) }}">
{% endif %}
<table{{ attributes }}>
......@@ -78,47 +70,32 @@
{% if header %}
<thead{{ thead_attributes }}>
<tr>
{% for cell in header %}
<{{ cell.tag|default('th') }}{{ cell.attributes }}>
{{- cell.content -}}
</{{ cell.tag|default('th') }}>
{% endfor %}
</tr>
{{ pattern('table_row', {
'cells': header
}) }}
</thead>
{% endif %}
{% if rows %}
<tbody{{ tbody_attributes }}>
{% for row in rows %}
<tr{{ row.attributes }}>
{% for cell in row.cells %}
<{{ cell.tag|default('td') }}{{ cell.attributes }}>
{{- cell.content -}}
</{{ cell.tag|default('td') }}>
{% endfor %}
</tr>
{% endfor %}
{{ rows }}
</tbody>
{% elseif empty %}
<tbody{{ tbody_attributes }}>
<tr>
<td colspan="{{ header_columns }}">{{ empty }}</td>
</tr>
{{ pattern('table_row', {
'cells': pattern('table_cell', {
'attributes': create_attribute({
'colspan': header_columns,
}),
'content': empty
})
}) }}
</tbody>
{% endif %}
{% if footer %}
<tfoot{{ tfoot_attributes }}>
{% for row in footer %}
<tr{{ row.attributes }}>
{% for cell in row.cells %}
<{{ cell.tag|default('td') }}{{ cell.attributes }}>
{{- cell.content -}}
</{{ cell.tag|default('td') }}>
{% endfor %}
</tr>
{% endfor %}
{{ footer }}
</tfoot>
{% endif %}
</table>
......
This diff is collapsed.
{% set tag = tag|default('td') %}
{% set attributes = active ? attributes.addClass('table-active') : attributes %}
{% set attributes = color ? attributes.addClass('table-' ~ color|lower|replace({'_': '-'})) : attributes %}
<{{ tag }}{{ attributes }}>
{{- content -}}
</{{ tag }}>
table_cell:
label: "(Table Cell)"
description: "Internal: to be used in the 'Table' and 'Table Row' components."
links:
- 'https://getbootstrap.com/docs/5.3/content/tables/'
category: "Table"
settings:
tag:
type: "select"
label: "HTML tag"
options:
th: "Head"
td: "Data (default)"
preview: "td"
allow_expose: true
allow_token: true
color:
type: "select"
label: "Cell color"
options:
primary: "Primary"
secondary: "Secondary"
success: "Success"
danger: "Danger"
warning: "Warning"
info: "Info"
light: "Light"
dark: "Dark"
preview: ""
allow_expose: true
allow_token: true
active:
type: "boolean"
label: "Active"
description: "Active state"
preview: false
allow_expose: true
allow_token: true
fields:
content:
type: "Render"
label: "Cell content"
description: "The cell content."
preview: "Cell content"
{% set attributes = active ? attributes.addClass('table-active') : attributes %}
{% set attributes = color ? attributes.addClass('table-' ~ color|lower|replace({'_': '-'})) : attributes %}
<tr{{ attributes }}>
{{- cells -}}
</tr>
table_row:
label: "(Table Row)"
description: "Internal: to be used in the 'Table' component."
links:
- 'https://getbootstrap.com/docs/5.3/content/tables/'
category: "Table"
settings:
color:
type: "select"
label: "Row color"
options:
primary: "Primary"
secondary: "Secondary"
success: "Success"
danger: "Danger"
warning: "Warning"
info: "Info"
light: "Light"
dark: "Dark"
preview: ""
allow_expose: true
allow_token: true
active:
type: "boolean"
label: "Active"
description: "Active state"
preview: false
allow_expose: true
allow_token: true
fields:
cells:
type: "Render"
label: "Row cells"
description: "A sequence of cell components."
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment