Skip to content
Snippets Groups Projects
Commit ef7e40a4 authored by Rajab Natshah's avatar Rajab Natshah
Browse files

Issue #3357698: Improve the component implementation of selected view, grid,...

Issue #3357698: Improve the component implementation of selected view, grid, table and unformatted. atom SDC components
parent af676b02
No related branches found
No related tags found
No related merge requests found
Showing
with 167 additions and 14 deletions
......@@ -30,7 +30,7 @@
{% if title|render|striptags|trim %}
{% include 'varbase_components:heading' with {
html_tag: 'h1',
content: title|render|striptags|trim,
content: title,
attributes: title_attributes,
utility_classes: classes
}
......
......@@ -31,7 +31,7 @@
{% if heading_text|render|striptags|trim %}
{% include 'varbase_components:heading' with {
html_tag: heading_tag,
content: heading_text|render|striptags|trim,
content: heading_text,
attributes: []
}
%}
......
......@@ -43,12 +43,18 @@
%}
{% if html_tag %}
<{{ html_tag }} {{ attributes.addClass(classes) }}>
<{{ html_tag }}{{ attributes.addClass(classes) }}>
{% endif %}
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes.addClass('block__title') }}>{{ label }}</h2>
{% include 'varbase_components:heading' with {
html_tag: 'h2',
content: label,
attributes: title_attributes,
utility_classes: ['block__title']
}
%}
{% endif %}
{{ title_suffix }}
{% block content %}
......
# views-view-grid
Component implementation for views to display rows in a grid.
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Views view grid
status: BETA
componentType: organism
description: Component implementation for views to display rows in a grid.
props:
type: object
required:
- content
properties:
content:
type: string
title: Content
{#
/**
* @file
* Varbase Components implementation for views to display rows in a grid.
*
* Available variables:
* - attributes: HTML attributes for the wrapping element.
* - title: The title of this group of rows.
* - view: The view object.
* - rows: The rendered view results.
* - options: The view plugin style options.
* - row_class_default: A flag indicating whether default classes should be
* used on rows.
* - col_class_default: A flag indicating whether default classes should be
* used on columns.
* - items: A list of grid items. Each item contains a list of rows or columns.
* The order in what comes first (row or column) depends on which alignment
* type is chosen (horizontal or vertical).
* - attributes: HTML attributes for each row or column.
* - content: A list of columns or rows. Each row or column contains:
* - attributes: HTML attributes for each row or column.
* - content: The row or column contents.
*
* @see template_preprocess_views_view_grid()
*/
#}
{%
set classes = [
'views-view-grid',
options.alignment,
'cols-' ~ options.columns,
'clearfix',
'col',
]
%}
{% if options.row_class_default %}
{%
set row_classes = [
'views-row',
options.alignment == 'horizontal' ? 'clearfix',
]
%}
{% endif %}
{% if options.col_class_default %}
{%
set col_classes = [
'views-col',
options.alignment == 'vertical' ? 'clearfix',
]
%}
{% endif %}
{% if title %}
{% include 'varbase_components:heading' with {
html_tag: 'h3',
content: title
}
%}
{% endif %}
<div{{ attributes.addClass(classes) }}>
{% if options.alignment == 'horizontal' %}
{% for row in items %}
<div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
{% for column in row.content %}
<div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
{{ column.content }}
</div>
{% endfor %}
</div>
{% endfor %}
{% else %}
{% for column in items %}
<div{{ column.attributes.addClass(col_classes, options.col_class_default ? 'col-' ~ loop.index) }}>
{% for row in column.content %}
<div{{ row.attributes.addClass(row_classes, options.row_class_default ? 'row-' ~ loop.index) }}>
{{ row.content }}
</div>
{% endfor %}
</div>
{% endfor %}
{% endif %}
</div>
# Views view table
Component implementation for displaying a view as a table.
......@@ -2,7 +2,7 @@ $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc
name: Views view table
status: BETA
componentType: organism
description: Region
description: Implementation for displaying a view as a table.
props:
type: object
required:
......
{#
/**
* @file
* Template for a views table.
* Varbase Components implementation for displaying a view as a table.
*
* Available variables:
* - attributes: Remaining HTML attributes for the element.
* - class: HTML classes that can be used to style contextually through CSS.
* - title : The title of this group of rows.
* - header: The table header columns.
* - attributes: Remaining HTML attributes for the element.
* - content: HTML classes to apply to each header cell, indexed by
* the header's key.
* - default_classes: A flag indicating whether default classes should be
* used.
* - caption_needed: Is the caption tag needed.
* - caption: The caption for this table.
* - accessibility_description: Extended description for the table details.
* - accessibility_summary: Summary for the table details.
* - rows: Table row items. Rows are keyed by row number.
* - attributes: HTML classes to apply to each row.
* - columns: Row column items. Columns are keyed by column number.
* - attributes: HTML classes to apply to each column.
* - content: The column content.
* - default_classes: A flag indicating whether default classes should be
* used.
* - responsive: A flag indicating whether table is responsive.
* - sticky: A flag indicating whether table header is sticky.
* - summary_element: A render array with table summary information (if any).
*
* @see template_preprocess_views_view_table()
*
* @ingroup themeable
*/
#}
{% set classes = [
'cols-' ~ header|length,
responsive ? 'responsive-enabled',
......
# Views view unformatted
Implementation to display a view of unformatted rows.
\ No newline at end of file
......@@ -2,7 +2,7 @@ $schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc
name: Views view unformatted
status: BETA
componentType: organism
description: Region
description: Component implementation to display a view of unformatted rows.
props:
type: object
required:
......
{#
/**
* @file
* Theme override to display a view of unformatted rows.
* Varbase Component implementation to display a view of unformatted rows.
*
* Available variables:
* - title: The title of this group of rows. May be empty.
......@@ -15,9 +15,13 @@
* @see template_preprocess_views_view_unformatted()
*/
#}
{% include 'varbase_components:heading' with { html_tag: 'h3' } %}
{% if title %}
{% include 'varbase_components:heading' with {
html_tag: 'h3',
content: title
}
%}
{% endif %}
{% for row in rows %}
{%
set row_classes = [
......
# Views view
Component implementation for main view component.
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
name: Views view
status: BETA
componentType: organism
componentType: Implementation for main view component.
description: Region
props:
type: object
......
......@@ -32,12 +32,19 @@
#}
{%
set classes = [
'view',
'view-' ~ id|clean_class,
'view-id-' ~ id,
'view-display-id-' ~ display_id,
dom_id ? 'js-view-dom-id-' ~ dom_id,
css_name ? 'view-' ~ css_name,
]
%}
<div{{ attributes.addClass(classes) }}>
{% include 'varbase_components:heading' with { html_tag: 'h3' } %}
{{ title_prefix }}
{{ title }}
{{ title_suffix }}
{% if header %}
<div class="view-header">
......
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