Component

Component Module for ProcessWire CMS/CMF

Module will check :

• site/modules/**/components/*/templates/template.php
• site/templates/components/*/templates/template.php

directories for the components. If you want to use default params create a component.php file in Component root dir.

Template Components

└── site/templates/components     └── name-of-component         ├── component.php (optional)         ├── layout-default.php (optional)         ├── layout-home.php (optional)         ├── layout-contact.php (optional)         ├── fields.php (optional)         └── templates             └── template.php (required)

Module Components

└── site/modules/name-of-module/components     └── name-of-component         ├── component.php (optional)         ├── layout-default.php (optional)         ├── layout-home.php (optional)         ├── layout-contact.php (optional)         ├── fields.php (optional)         └── templates             └── template.php (required)

Requirements

• ProcessWire 3.0 or newer
• PHP 8.1 or newer

Installation

Install the module from the modules directory

Via Composer:

composer require trk/component

Via git clone:

cd your-processwire-project-folder/ cd site/modules/ git clone https://github.com/trk/Component.git

All component.php file settings

<?php  namespace ProcessWire;  return [     'title' => 'Title of component',     'params' => [         'foo' => '',     ],     'params' => [      ],     'parent' => [],     // cache the output     'cache' => function (array $component): array {         return [             'name' => 'name-of-cache',             'expire' => 'expire-time-of-cache'         ];     },     'metadata' => function (array $params, array $component): void {         // add some metadata for component     },     'defaults' => function (array $params, array $component): array {         $defaults = [             'foo' => 'bar'         ];         return $defaults;     },     'transform' => function (array $params, array $component): array {         // do something with params         return $params;     },     // 'attrs' => [     //     // add more attrs     // ],     'attrs' => function (array $attrs, array $component): array {         // do something with attrs         return $attrs;     },     'fn' => [         // add hello method to TemplateFile and use it like $this->hello(); in template         'hello' => function (HookEvent $e) {             $e->return = 'Hello World';         }     ],     // Check component has required parameters     'render' => function(array $params, array $component): bool {         return count($params);     },     // Do something with output     // 'output' => function(string $output, array $component): bool {     //     return str_replace('<alert />', component('alert', ['content' => 'Warning !']), $output);     // } ];

Component array output

[     'name' => 'name-of-component', // string     'dir' => 'path-of-component', // string     'templateFile' => 'template-file-of-component', // string     'componentFile' => null, // optional component configuration file, ?string     'fieldsFile' => null, // optional fields configuration file, ?string     'layouts' => [], // optional ready to use layout files, you can overwrite params by passing `layout` array of layout file list     'title' => 'title-of-component', // string      'params' => [], // array     'parent' => null, // ?array     'cache' => null, // ?callable     'metadata' => null, // ?callable     'defaults' => null, // ?array|callable     'transform' => null, // ?callable     'attrs' => null, // ?array|callable     'fn' => null, // ?array     'render' => null, // ?callable      'output' => null // ?callable ];

Create heading Component Config File not required

// site/templates/components/heading/component.php <?php  namespace ProcessWire;  return [     // Set default params     'params' => [         'content' => '',         'tag' => 'h1',         'size' => '',         'decoration' => '',         'transform' => '',         'color' => '',         'align' => ''     ],     // cache the output     'cache' => function (array $component): array {         $params = $component['params'];          $name = null;         $expire = null;          if (isset($params['page']) && $params['page'] instanceof Page) {             $name = $params['page']->id;             $expire = $params['page'];         }          return [             'name' => $page->id,             'expire' => $expire         ];     },     'transform' => function (array $params): array {         // do something with params         return $params;     },     // 'attrs' => [     //     // add more attrs     // ],     'attrs' => function (array $attrs): array {         // do something with attrs         return $attrs;     },     'fn' => [         // add hello method to TemplateFile and use it like $this->hello(); in template         'hello' => function (HookEvent $e) {             $e->return = 'Hello World';         }     ],     // Check component has required parameters     'render' => function(array $params): bool {         return strlen($params['content']) ?: false;     },     // Do something with output     // 'output' => function(string $output): bool {     //     return str_replace('<alert />', component('alert', ['content' => 'Warning !']), $output);     // } ];

Create heading Template File required

// site/templates/components/heading/templates/template.php <?php  namespace ProcessWire;  /**  * @var WireFileTools $files  * @var string  $__name Name of the component  * @var string  $__title Title of component  * @var string  $__dir Directory of component  * @var string  $__template Template file of component  * @var string  $__component Component file of component  * @var string  $__fields Fields file of component  * @var array   $__layouts Layouts of component  * @var ?array  $parent Parent component  * @var array   $params Parameters of component  * @var array   $attrs Attributes of component  * @var array   $children Children of component  */  if ($params['size']) {     $attrs['class'][] = "uk-{$params['size']}"; }  if ($params['decoration']) {     $attrs['class'][] = "uk-{$params['decoration']}"; }  if ($params['transform']) {     $attrs['class'][] = "uk-text-{$params['transform']}"; }  if ($params['color']) {     $attrs['class'][] = "uk-text-{$params['transform']}"; }  if ($params['align']) {     $attrs['class'][] = "uk-text-{$params['align']}"; }  // $this->hello(); added dynamically as function // $this->attrs(array $attrs); Accept array of attributes, return is string  echo "<{$params['tag']}{$this->attrs($attrs)}>{$params['content']}</{$params['tag']}>";

Print heading Component

echo component('heading', [     'content' => 'Hello World !', ]);