Issue #3452147 by Osama Nuserat: Kick-off: Initial Module Setup

README.txt

+CONTENTS OF THIS FILE
+---------------------
+
+ * Introduction
+ * Requirements
+ * Installation
+ * Configuration
+ * Using Views
+ * Organization
+ * Maintainers
+
+INTRODUCTION
+------------
+
+The Views Tailwind module adds styles to Views to output the results of a view
+as several common Tailwind components.
+
+ * For a full description of the module, visit the project page:
+   https://www.drupal.org/project/tailwind_grid
+
+REQUIREMENTS
+------------
+
+This module requires the following themes/modules:
+
+ * Views (Core)
+
+INSTALLATION
+------------
+
+ * Install the Tailwind Grid module as you would normally install a
+   contributed Drupal module. Visit https://www.drupal.org/node/1897420 for
+   further information.
+
+
+CONFIGURATION
+-------------
+
+    1. Navigate to Administration > Extend and enable the module.
+    2. Go to Configure and add the breakpoints you have inside your tailwind.config.
+
+USING VIEWS
+-----------
+
+    1. First, add the desired style type. You can choose from a variety of Tailwind CSS grid styles based on your needs.
+    2. After selecting a style, you can customize the settings for that specific component to fit your design requirements.
+
+ORGANIZATION
+------------
+
+  This project is maintained by Sprintive - https://www.drupal.org/sprintive
+
+  For more information, please visit our website at https://sprintive.com/.
+
+MAINTAINERS
+-----------
+
+ * M. Abdulqader (m.abdulqader) - https://www.drupal.org/u/mabdulqader
+ * Osama Nuserat (osama.nuserat) - https://www.drupal.org/u/osama-nuserat

grid_view_tailwind.theme.inc

+<?php
+
+/**
+ * @file
+ * Preprocessors and helper functions to make theming easier.
+ */
+
+use Drupal\Core\Template\Attribute;
+use Drupal\tailwind_grid\TailwindGrid;
+
+/**
+ * Prepares variables for views grid templates.
+ *
+ * Default template: views-tailwind-grid.html.twig.
+ *
+ * @param array $vars
+ *   An associative array containing:
+ *   - view: A ViewExecutable object.
+ *   - rows: The raw row data.
+ */
+function template_preprocess_views_tailwind_grid(array &$vars) {
+  $view = $vars['view'];
+  $vars['id'] = TailwindGrid::getUniqueId($view);
+  $options = $view->style_plugin->options;
+  $vars['row_attributes'] = new Attribute();
+  foreach (TailwindGrid::getBreakpoints() as $breakpoint) {
+    if ($options["$breakpoint"] == 'none') {
+      continue;
+    }
+    $vars['row_attributes']->addClass($options["$breakpoint"]);
+  }
+  $vars['options'] = $options;
+}

src/Form/BreakpointsForm.php

+<?php
+
+namespace Drupal\tailwind_grid\Form;
+
+use Drupal\Core\Form\ConfigFormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Configuration form for Tailwind Grid breakpoints.
+ */
+class BreakpointsForm extends ConfigFormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'tailwind_grid_breakpoints_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function getEditableConfigNames() {
+    return ['tailwind_grid.settings'];
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    $config = $this->config('tailwind_grid.settings');
+
+    $breakpoints = $config->get('breakpoints');
+
+    if (empty($breakpoints)) {
+      $breakpoints = "sm\nmd\nlg\nxl\n2xl";
+    }
+    elseif (is_array($breakpoints)) {
+      $breakpoints = implode("\n", $breakpoints);
+    }
+
+    $form['breakpoints'] = [
+      '#type' => 'textarea',
+      '#title' => $this->t('Breakpoints'),
+      '#description' => $this->t('Enter the breakpoints, one per line.'),
+      '#default_value' => $breakpoints,
+    ];
+
+    return parent::buildForm($form, $form_state);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    parent::submitForm($form, $form_state);
+
+    $breakpoints = array_filter(array_map('trim', explode("\n", $form_state->getValue('breakpoints'))));
+
+    $this->config('tailwind_grid.settings')
+      ->set('breakpoints', $breakpoints)
+      ->save();
+  }
+
+}

src/Plugin/views/style/ViewsTailwindGrid.php

+<?php
+
+namespace Drupal\tailwind_grid\Plugin\views\style;
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\tailwind_grid\TailwindGrid;
+use Drupal\views\Plugin\views\style\StylePluginBase;
+
+/**
+ * Style plugin to render each item in an ordered or unordered list.
+ *
+ * @ingroup views_style_plugins
+ *
+ * @ViewsStyle(
+ *   id = "views_tailwind_grid",
+ *   title = @Translation("Tailwind Grid"),
+ *   help = @Translation("Displays rows in a Tailwind Grid layout"),
+ *   theme = "views_tailwind_grid",
+ *   theme_file = "../grid_view_tailwind.theme.inc",
+ *   display_types = {"normal"}
+ * )
+ */
+class ViewsTailwindGrid extends StylePluginBase {
+  /**
+   * Overrides \Drupal\views\Plugin\views\style\StylePluginBase::usesRowPlugin.
+   *
+   * @var bool
+   */
+  protected $usesRowPlugin = TRUE;
+
+  /**
+   * Overrides \Drupal\views\Plugin\views\style\StylePluginBase::usesRowClass.
+   *
+   * @var bool
+   */
+  protected $usesRowClass = TRUE;
+
+  /**
+   * Definition.
+   */
+  protected function defineOptions() {
+    $options = parent::defineOptions();
+
+    foreach (TailwindGrid::getBreakpoints() as $breakpoint) {
+      $breakpoint_option = "$breakpoint";
+      $options[$breakpoint_option] = ['default' => 'none'];
+    }
+
+    $options['row_class_default'] = ['default' => TRUE];
+    $options['default'] = ['default' => ''];
+    $options['info'] = ['default' => []];
+    $options['override'] = ['default' => TRUE];
+    $options['sticky'] = ['default' => FALSE];
+    $options['order'] = ['default' => 'asc'];
+    $options['caption'] = ['default' => ''];
+    $options['summary'] = ['default' => ''];
+    $options['description'] = ['default' => ''];
+    return $options;
+  }
+
+
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+    parent::buildOptionsForm($form, $form_state);
+
+    foreach (TailwindGrid::getBreakpoints() as $breakpoint) {
+      $breakpoint_option = "$breakpoint";
+      $form[$breakpoint_option] = [
+        '#type' => 'select',
+        '#title' => $this->t("Column width of items at '$breakpoint' breakpoint"),
+        '#default_value' => $this->options[$breakpoint_option] ?? NULL,
+        '#description' => $this->t("Set the number of columns each item should take up at the '$breakpoint' breakpoint and higher."),
+        '#options' => [
+          'none' => 'None (or inherit from previous)',
+        ],
+      ];
+      foreach ([1, 2, 3, 4, 6, 12] as $width) {
+        $form[$breakpoint_option]['#options']["$breakpoint:col-span-$width"] = $this->formatPlural(12 / $width, '@count column per row', '@count columns per row', ['@width' => $width]);
+      }
+    }
+  }
+
+}

src/TailwindGrid.php

+<?php
+
+namespace Drupal\tailwind_grid;
+
+use Drupal\Component\Utility\Html;
+use Drupal\views\ViewExecutable;
+
+/**
+ * The primary class for the Views Tailwind module.
+ *
+ * Provides many helper methods.
+ *
+ * @ingroup utility
+ */
+class TailwindGrid {
+
+  /**
+   * Returns the theme hook definition information.
+   */
+  public static function getThemeHooks() {
+    $hooks['views_tailwind_grid'] = [
+      'preprocess functions' => [
+        'template_preprocess_views_tailwind_grid',
+      ],
+      'file' => 'grid_view_tailwind.theme.inc',
+    ];
+
+    return $hooks;
+  }
+
+  /**
+   * Return an array of breakpoint names.
+   */
+
+  /**
+   * Return an array of breakpoint names.
+   */
+  public static function getBreakpoints() {
+    $config = \Drupal::config('tailwind_grid.settings');
+    $breakpoints = $config->get('breakpoints');
+
+    if (is_string($breakpoints)) {
+      $breakpoints = array_filter(array_map('trim', explode("\n", $breakpoints)));
+    }
+
+    if (!is_array($breakpoints)) {
+      $breakpoints = [];
+    }
+
+    return $breakpoints;
+  }
+
+  /**
+   * Get unique element id.
+   *
+   * @param \Drupal\views\ViewExecutable $view
+   *   A ViewExecutable object.
+   *
+   * @return string
+   *   A unique id for an HTML element.
+   */
+  public static function getUniqueId(ViewExecutable $view) {
+    $id = $view->storage->id() . '-' . $view->current_display;
+    return Html::getUniqueId('views-tailwind-' . $id);
+  }
+
+}

tailwind_grid.info.yml

+name: Tailwind Grid
+type: module
+description: 'Tailwind Grid'
+package: Views
+core_version_requirement: ^10 || ^11
+configure: tailwind_grid.settings
+dependencies:
+  - drupal:views

tailwind_grid.module

+<?php
+
+/**
+ * @file
+ * Custom functions for Grid View Tailwind.
+ */
+
+use Drupal\tailwind_grid\TailwindGrid;
+
+/**
+ * Implements hook_theme().
+ */
+function grid_view_tailwind_theme() {
+  return TailwindGrid::getThemeHooks();
+}

tailwind_grid.routing.yml

+tailwind_grid.settings:
+  path: '/admin/config/user-interface/tailwind-grid'
+  defaults:
+    _form: '\Drupal\tailwind_grid\Form\BreakpointsForm'
+    _title: 'Tailwind Grid Settings'
+  requirements:
+    _permission: 'administer site configuration'

templates/views-tailwind-grid.html.twig

+{#
+/**
+ * @file views-tailwind-grid.html.twig
+ * Default simple view template to display Tailwind Grids.
+ * - rows: Contains a nested array of rows. Each row contains an array of columns.
+ * @ingroup views_templates
+ */
+#}
+
+{% if title %}
+  <h3>{{ title }}</h3>
+{% endif %}
+<div id="{{ id }}" >
+  <div class="grid grid-cols-12">
+    {% for row in rows %}
+      <div {{ row_attributes.addClass(options.row_class) }}>
+        {{ row }}
+      </div>
+    {% endfor %}
+  </div>
+</div>