├── src
    ├── view
    │   └── frontend
    │   │   ├── templates
    │   │       ├── magewire
    │   │       │   ├── features
    │   │       │   │   ├── switch-template
    │   │       │   │   │   ├── header.phtml
    │   │       │   │   │   ├── a.phtml
    │   │       │   │   │   ├── b.phtml
    │   │       │   │   │   ├── c.phtml
    │   │       │   │   │   └── tools.phtml
    │   │       │   │   ├── magic-actions-properties
    │   │       │   │   │   ├── emit-global.phtml
    │   │       │   │   │   └── emit-specific.phtml
    │   │       │   │   ├── data-via-layout.phtml
    │   │       │   │   ├── reset.phtml
    │   │       │   │   ├── template-methods.phtml
    │   │       │   │   ├── wire-ignore.phtml
    │   │       │   │   ├── dollar-wire.phtml
    │   │       │   │   └── magic-actions-properties.phtml
    │   │       │   ├── quick-search.phtml
    │   │       │   ├── todo-checklist.phtml
    │   │       │   ├── pagination.phtml
    │   │       │   ├── dispatch-events.phtml
    │   │       │   ├── todo.phtml
    │   │       │   ├── form.phtml
    │   │       │   ├── list-shuffle.phtml
    │   │       │   └── reacticon.phtml
    │   │       └── examples.phtml
    │   │   └── layout
    │   │       ├── magewire_examples_index.xml
    │   │       └── magewire_features_index.xml
    ├── etc
    │   ├── module.xml
    │   └── frontend
    │   │   └── routes.xml
    ├── registration.php
    ├── Magewire
    │   ├── Features
    │   │   ├── MagicActionsProperties.php
    │   │   ├── WireIgnore.php
    │   │   ├── TemplateMethods.php
    │   │   ├── DollarWire.php
    │   │   ├── Reset.php
    │   │   ├── DataViaLayout.php
    │   │   ├── MagicActionsProperties
    │   │   │   ├── EmitGlobal.php
    │   │   │   └── EmitSpecific.php
    │   │   └── SwitchTemplate.php
    │   ├── DispatchEvents.php
    │   ├── QuickSearch.php
    │   ├── ListShuffle.php
    │   ├── TodoChecklist.php
    │   ├── Form.php
    │   ├── Reacticon.php
    │   ├── Todo.php
    │   ├── Todo
    │   │   └── Todo
    │   │   │   └── Todo.php
    │   └── Pagination.php
    └── Controller
    │   ├── Examples
    │       └── Index.php
    │   └── Features
    │       └── Index.php
├── composer.json
├── .github
    └── FUNDING.yml
├── README.md
└── LICENSE.md


/src/view/frontend/templates/magewire/features/switch-template/header.phtml:
--------------------------------------------------------------------------------
1 | <h2 class="text-xl font-bold mb-3 pb-2 border-b">
2 |     <?= __('Switch Template') ?>
3 | </h2>
4 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/switch-template/a.phtml:
--------------------------------------------------------------------------------
1 | <div id="switch-template">
2 |     <?= $block->getChildHtml('switch-template.header') ?>
3 | 
4 |     <h2 class="text-xl">Template A</h2>
5 | 
6 |     <?= $block->getChildHtml('switch-template.tools') ?>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/switch-template/b.phtml:
--------------------------------------------------------------------------------
1 | <div id="switch-template">
2 |     <?= $block->getChildHtml('switch-template.header') ?>
3 | 
4 |     <h2 class="text-xl">Template B</h2>
5 | 
6 |     <?= $block->getChildHtml('switch-template.tools') ?>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/switch-template/c.phtml:
--------------------------------------------------------------------------------
1 | <div id="switch-template">
2 |     <?= $block->getChildHtml('switch-template.header') ?>
3 | 
4 |     <h2 class="text-xl">Template C</h2>
5 | 
6 |     <?= $block->getChildHtml('switch-template.tools') ?>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/src/etc/module.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3 |         xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"
 4 | >
 5 |   <module name="Magewirephp_MagewireExamples">
 6 |     <sequence>
 7 |         <module name="Magewirephp_Magewire"/>
 8 |     </sequence>
 9 |   </module>
10 | </config>
11 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/switch-template/tools.phtml:
--------------------------------------------------------------------------------
1 | <div class="flex space-x-4 mt-4">
2 |     <button class="btn btn-primary flex-grow text-sm" wire:click="setTemplate('ta')">Template A</button>
3 |     <button class="btn btn-primary flex-grow text-sm" wire:click="setTemplate('tb')">Template B</button>
4 |     <button class="btn btn-primary flex-grow text-sm" wire:click="setTemplate('tc')">Template C</button>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/src/registration.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © W. Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | use Magento\Framework\Component\ComponentRegistrar;
10 | 
11 | ComponentRegistrar::register(
12 |     ComponentRegistrar::MODULE,
13 |     'Magewirephp_MagewireExamples',
14 |     __DIR__
15 | );
16 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/MagicActionsProperties.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | class MagicActionsProperties extends Component
14 | {
15 |     public $toggle = true;
16 |     public $foo    = 'foo';
17 | }
18 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/WireIgnore.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | /**
14 |  * @method string|null getFoo()
15 |  * @method bool hasFoo()
16 |  */
17 | class WireIgnore extends Component
18 | {
19 |     public $foo;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/TemplateMethods.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | /**
14 |  * @method string getFoo()
15 |  * @method bool hasFoo()
16 |  */
17 | class TemplateMethods extends Component
18 | {
19 |     public $foo;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/etc/frontend/routes.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3 |         xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"
 4 | >
 5 |     <router id="standard">
 6 |         <route id="magewire">
 7 |             <module name="Magewirephp_MagewireExamples" before="Magewirephp_Magewire"/>
 8 |         </route>
 9 | 
10 |         <route id="reacticon" frontName="reacticon">
11 |             <module name="Magewirephp_MagewireExamples"/>
12 |         </route>
13 |     </router>
14 | </config>
15 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "magewirephp/magewire-examples",
 3 |   "description": "A Magento 2 module including all sorts of Magewire inspired examples",
 4 |   "version": "1.2.0",
 5 |   "type": "magento2-module",
 6 |   "require": {
 7 |       "magewirephp/magewire": "^1.0"
 8 |   },
 9 |   "authors": [
10 |     {
11 |       "name": "Willem Poortman"
12 |     }
13 |   ],
14 |   "license": "MIT",
15 |   "autoload": {
16 |     "files": [
17 |       "src/registration.php"
18 |     ],
19 |     "psr-4": {
20 |       "Magewirephp\\MagewireExamples\\": "src/"
21 |     }
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/examples.phtml:
--------------------------------------------------------------------------------
 1 | <div>
 2 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
 3 |         <?= __('Examples Introduction') ?>
 4 |     </h2>
 5 | 
 6 |     <p class="border border-yellow-300 bg-yellow-100 p-4 rounded-md">
 7 |         <?= __('The following examples are for inspiration only. Under no circumstances is it recommended to use these
 8 |         examples in a production environment. These examples are not optimized for responsiveness. Additional generic
 9 |         examples can be added via a Github Pull Request.') ?>
10 |     </p>
11 | </div>
12 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/DollarWire.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | class DollarWire extends Component
14 | {
15 |     public $foo;
16 |     public $called = 0;
17 | 
18 |     public function promise()
19 |     {
20 |         $this->foo = random_int(0,999);
21 |         $this->called++;
22 |     }
23 | }
24 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | github: wpoortman
 2 | #patreon: # Replace with a single Patreon username
 3 | #open_collective: # Replace with a single Open Collective username
 4 | #ko_fi: # Replace with a single Ko-fi username
 5 | #tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 6 | #community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 7 | #liberapay: # Replace with a single Liberapay username
 8 | #issuehunt: # Replace with a single IssueHunt username
 9 | #otechie: # Replace with a single Otechie username
10 | #lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
11 | #custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
12 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/magic-actions-properties/emit-global.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Features\MagicActionsProperties\EmitGlobal $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="magic-actions-properties" class="p-4 bg-gray-100">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Child Block: Emit Global') ?>
15 |     </h2>
16 | 
17 |     <div class="bg-gray-200 block p-4">
18 |         Global emit was triggered: <?= $magewire->getGlobal() ? 'true' : 'false' ?>
19 |     </div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/Magewire/DispatchEvents.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | class DispatchEvents extends Component
14 | {
15 |     public $process = false;
16 | 
17 |     protected $loader = ['process'];
18 | 
19 |     public function process(): void
20 |     {
21 |         $this->process = !$this->process;
22 | 
23 |         $this->dispatchBrowserEvent('process:after', ['show' => $this->process]);
24 | 
25 |         $this->emitTo(
26 |             'magewire.todo-checklist',
27 |             'todo:finish',
28 |             'Process browser event (' . ($this->process ? 'show' : 'hide') . ')'
29 |         );
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/Controller/Examples/Index.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Controller\Examples;
10 | 
11 | use Magento\Framework\App\Action\HttpGetActionInterface;
12 | use Magento\Framework\View\Result\PageFactory;
13 | 
14 | class Index implements HttpGetActionInterface
15 | {
16 |     /** @var PageFactory */
17 |     private $pageFactory;
18 | 
19 |     public function __construct(
20 |         PageFactory $pageFactory
21 |     ) {
22 |         $this->pageFactory = $pageFactory;
23 |     }
24 | 
25 |     public function execute()
26 |     {
27 |         $page = $this->pageFactory->create();
28 |         $page->getConfig()->getTitle()->set('Magewire - Examples');
29 | 
30 |         return $page;
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/Controller/Features/Index.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Controller\Features;
10 | 
11 | use Magento\Framework\App\Action\HttpGetActionInterface;
12 | use Magento\Framework\View\Result\PageFactory;
13 | 
14 | class Index implements HttpGetActionInterface
15 | {
16 |     /** @var PageFactory */
17 |     private $pageFactory;
18 | 
19 |     public function __construct(
20 |         PageFactory $pageFactory
21 |     ) {
22 |         $this->pageFactory = $pageFactory;
23 |     }
24 | 
25 |     public function execute()
26 |     {
27 |         $page = $this->pageFactory->create();
28 |         $page->getConfig()->getTitle()->set('Magewire - Features');
29 | 
30 |         return $page;
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/magic-actions-properties/emit-specific.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Features\MagicActionsProperties\Specific $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="magic-actions-properties" class="p-4 bg-gray-100">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Child Block: Emit Specific') ?>
15 |     </h2>
16 | 
17 |     <div class="bg-gray-200 block p-4">
18 |         Global emit was triggered: <?= $magewire->getGlobal() ? 'true' : 'false' ?>
19 |     </div>
20 |     <div class="bg-gray-200 block p-4">
21 |         Specific emit was triggered: <?= $magewire->getSpecific() ? 'true' : 'false' ?>
22 |     </div>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/data-via-layout.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Features\DataViaLayout $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="data-via-layout">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Data via Layout') ?>
15 |     </h2>
16 | 
17 |     <div class="grid grid-cols-3 gap-4 items-center">
18 |     <?php foreach ($magewire->getPublicProperties() as $property => $value): ?>
19 |     <label><?= ucfirst($property) ?></label>
20 |     <input type="text" wire:model="<?= $property ?>"/>
21 |     <button type="button" wire:click="<?= $property ?>" class="btn btn-primary text-center text-sm">Perform Action</button>
22 |     <?php endforeach ?>
23 |     </div>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/Reset.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | /**
14 |  * @method string|null getFoo()
15 |  * @method bool hasFoo()
16 |  * @method string|null getBar()
17 |  * @method bool hasBar()
18 |  * @method int|null getBoot()
19 |  * @method bool hasBoot()
20 |  */
21 | class Reset extends Component
22 | {
23 |     public $foo;
24 |     public $bar;
25 | 
26 |     public $boot;
27 | 
28 |     public function boot()
29 |     {
30 |         $this->boot = random_int(0,999);
31 |     }
32 | 
33 |     public function resetByProperty(string $property)
34 |     {
35 |         $this->reset([$property], $property === 'boot');
36 |     }
37 | 
38 |     public function resetAll()
39 |     {
40 |         $this->reset();
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/Magewire/QuickSearch.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire;
10 | 
11 | use Exception;
12 | use Magewirephp\Magewire\Component;
13 | 
14 | class QuickSearch extends Component
15 | {
16 |     public string $q = '';
17 |     public array $results = [];
18 | 
19 |     /**
20 |      * @param string $for
21 |      */
22 |     public function search(string $for)
23 |     {
24 |         $this->q = $for;
25 |         $this->results = [];
26 | 
27 |         try {
28 |             for ($i = random_int(1, 10); $i <= 10; $i++) {
29 |                 $this->results[] = substr(str_shuffle(str_repeat($c = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', (int)ceil(10 / strlen($c)))), 1, 10);
30 |             }
31 |         } catch (Exception $e) {
32 |             $this->results[] = __('No results found.');
33 |         }
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/DataViaLayout.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | /**
14 |  * @method string getFoo()
15 |  * @method bool hasFoo()
16 |  *
17 |  * @method string getBar()
18 |  * @method bool hasBar()
19 |  *
20 |  * @method bool getToggle()
21 |  * @method bool hasToggle()
22 |  */
23 | class DataViaLayout extends Component
24 | {
25 |     public $foo,
26 |            $bar,
27 |            $toggle;
28 | 
29 |     public function foo()
30 |     {
31 |         $this->foo = strtoupper($this->getFoo());
32 |     }
33 | 
34 |     public function bar()
35 |     {
36 |         $this->bar = strtolower($this->getBar());
37 |     }
38 | 
39 |     public function toggle()
40 |     {
41 |         $this->toggle = !$this->getToggle();
42 |     }
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Magewire Examples
 2 | ![hyva](https://img.shields.io/badge/Hyva_Themes-Only-1abc9c)
 3 | ![Open Source](https://img.shields.io/badge/Open-Source-1abc9c)
 4 | 
 5 | A Magewire showcase to give easy insights on where Magewire could possibly fit in your project. This
 6 | package will grow over time, based on new ideas and/or features introduced into Magewire.
 7 | 
 8 | ## Installation
 9 | ```
10 | composer require magewirephp/magewire-examples --dev
11 | ```
12 | 
13 | ## Usage
14 | - Navigate to ```{store_url}/magewire/examples``` inside your browser.
15 | - Navigate to ```{store_url}/magewire/features``` inside your browser (WIP).
16 | 
17 | ## Security Vulnerabilities
18 | If you discover a security vulnerability within Magewire, please create a PR or send an e-mail to Willem Poortman via [magewirephp@wpoortman.nl](mailto:magewirephp@wpoortman.nl). All security vulnerabilities will be promptly addressed.
19 | 
20 | ## License
21 | Copyright © [Willem Poortman](https://github.com/wpoortman)
22 | 
23 | Magewire is open-sourced software licensed under the [MIT license](LICENSE.md).
24 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | ## MIT License
 2 | 
 3 | Copyright © Willem Poortman
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/MagicActionsProperties/EmitGlobal.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features\MagicActionsProperties;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | class EmitGlobal extends Component
14 | {
15 |     public $global = false;
16 | 
17 |     protected $listeners = [
18 |         'global',
19 |     ];
20 | 
21 |     /**
22 |      * @see /Magewire/Features/MagicActionsProperties/EmitSpecific.php
23 |      * @param string $prefix
24 |      */
25 |     public function global(string $prefix)
26 |     {
27 |         if ($this->global) {
28 |             $this->dispatchNoticeMessage(strtoupper($prefix) . ': Global property value was reset to false');
29 |         } else {
30 |             $this->dispatchSuccessMessage(strtoupper($prefix) . ': Dispatch message from component ' . get_class($this));
31 |         }
32 | 
33 |         $this->global = !$this->global;
34 |     }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/reset.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Features\WireIgnore $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="reset">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         Reset
15 |     </h2>
16 | 
17 |     <div class="grid grid-cols-3 gap-4 items-center">
18 |         <?php foreach ($magewire->getPublicProperties() as $property => $value): ?>
19 |             <label><?= ucfirst($property) ?></label>
20 |             <input type="text" wire:model="<?= $property ?>"/>
21 |             <button type="button" wire:click="resetByProperty('<?= $property ?>')" class="btn btn-primary text-center text-sm">Perform Action</button>
22 |         <?php endforeach ?>
23 |     </div>
24 | 
25 |     <button type="button"
26 |             wire:click="resetAll"
27 |             class="btn btn-primary text-center text-sm mt-6"
28 |     >
29 |         Reset
30 |     </button>
31 | </div>
32 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/SwitchTemplate.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | class SwitchTemplate extends Component
14 | {
15 |     public $templates;
16 |     public $template;
17 | 
18 |     public function mount(array $templates)
19 |     {
20 |         $this->templates = $templates;
21 |         $this->setTemplate('ta');
22 |     }
23 | 
24 |     /**
25 |      * @param string $key
26 |      */
27 |     public function setTemplate(string $key): void
28 |     {
29 |         if (isset($this->templates[$key])) {
30 |             if ($key === $this->template) {
31 |                 $this->dispatchNoticeMessage('Template was already visible.');
32 |             }
33 | 
34 |             $this->template = $key;
35 |             $this->switchTemplate($this->templates[$this->template]);
36 | 
37 |             return;
38 |         }
39 | 
40 |         $this->dispatchErrorMessage('Something went wrong.');
41 |     }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/template-methods.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Features\DataViaLayout $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="data-via-layout">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Template Methods') ?>
15 |     </h2>
16 | 
17 |     <div class="grid grid-cols-2 gap-4 items-center mb-4">
18 |         <label>foo === null</label>
19 |         <input type="text" value="<?= is_null($magewire->getFoo()) ? 'true' : 'false' ?>"/>
20 |         <label>hasFoo()</label>
21 |         <input type="text" value="<?= $magewire->hasFoo() ? 'true' : 'false' ?>"/>
22 |         <label>getFoo()</label>
23 |         <input type="text" value="<?= $magewire->hasFoo() ? $magewire->getFoo() : 'null' ?>"/>
24 |     </div>
25 | 
26 |     <button type="button"
27 |             wire:click="$set('foo', 'bar')"
28 |             class="btn btn-primary text-center text-sm"
29 |     >
30 |         Set Foo
31 |     </button>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/quick-search.phtml:
--------------------------------------------------------------------------------
 1 | <?php
 2 | $results = $magewire->getResults();
 3 | ?>
 4 | <div class="w-full" x-data="{
 5 |     q: $wire.q,
 6 | 
 7 |     search(el) {
 8 |         $wire.search(this.q)
 9 |     }
10 | }">
11 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
12 |         Quick search <span class="text-gray-400">(without wire:model)</span>
13 |     </h2>
14 | 
15 |     <div class="space-y-6">
16 |         <input class="form-input w-full"
17 |                type="text"
18 |                x-model="q"
19 |                x-on:keyup.debounce="search()"
20 |                placeholder="<?= __('Search for something awesome...') ?>"
21 |                wire:ignore
22 |         />
23 | 
24 |         <?php if (count($results) !== 0): ?>
25 |         <ol class="mt-6 list-disc list-inside" wire:loading wire:loading.class="opacity-25">
26 |         <?php foreach ($results as $result): ?>
27 |             <li><?= $result ?></li>
28 |         <?php endforeach ?>
29 |         </ol>
30 | 
31 |         <p class="text-sm"><?= count($results) ?> random result<?= count($results) === 1 ? '' : 's'?> found.</p>
32 |         <?php endif ?>
33 | 
34 |         <p class="border border-blue-300 bg-blue-100 p-4 rounded-md">
35 |             This example requires <a href="https://alpinejs.dev/" target="_blank">AlpineJS</a>.
36 |         </p>
37 |     </div>
38 | </div>
39 | 


--------------------------------------------------------------------------------
/src/Magewire/ListShuffle.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | /**
14 |  * @method bool getMarkAsDone()
15 |  * @method bool hasMarkAsDone()
16 |  *
17 |  * @method array getThings()
18 |  * @method bool hasThings()
19 |  */
20 | class ListShuffle extends Component
21 | {
22 |     public $markAsDone = false;
23 | 
24 |     public $things = [
25 |         ['id' => 0, 'title' => 'Let\'s'],
26 |         ['id' => 1, 'title' => 'Make'],
27 |         ['id' => 2, 'title' => 'Magento'],
28 |         ['id' => 3, 'title' => 'Even'],
29 |         ['id' => 4, 'title' => 'More'],
30 |         ['id' => 5, 'title' => 'Awesome'],
31 |     ];
32 | 
33 |     public function shuffle(): void
34 |     {
35 |         $things = $this->things;
36 |         shuffle($things);
37 | 
38 |         $this->things = $things;
39 |         $entities = array_column($things, 'id');
40 | 
41 |         if ($this->getMarkAsDone()) {
42 |             $title = 'List shuffle (' . join(',', $entities) . ')';
43 |             $this->emitTo('magewire.todo-checklist', 'todo:finish', $title);
44 |         }
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------
/src/Magewire/TodoChecklist.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | use Magewirephp\Magewire\Model\Element\FlashMessage;
13 | 
14 | /**
15 |  * @method array getTasks()
16 |  * @method array hasTasks()
17 |  */
18 | class TodoChecklist extends Component
19 | {
20 |     public $tasks = [];
21 | 
22 |     protected $loader = true;
23 | 
24 |     protected $listeners = ['todo:finish' => 'saveTask'];
25 | 
26 |     /**
27 |      * @param string|null $title
28 |      */
29 |     public function saveTask(string $title = null): void
30 |     {
31 |         $this->tasks[] = $title;
32 |     }
33 | 
34 |     /**
35 |      * @param int $index
36 |      * @return FlashMessage|void
37 |      */
38 |     public function resetTask(int $index)
39 |     {
40 |         if (!isset($this->tasks[$index])) {
41 |             return $this->dispatchErrorMessage(__('Task with ID "%1" doesnt exist', [$index]));
42 |         }
43 | 
44 |         $this->emitTo('magewire.todo', 'todo:reset', [$this->tasks[$index]]);
45 |         unset($this->tasks[$index]);
46 |     }
47 | 
48 |     public function clearTasks(): void
49 |     {
50 |         $this->tasks = [];
51 |     }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/todo-checklist.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\TodoChecklist $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="todo-checklist">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Tasks Done') ?> <span class="float-right"><?= count($magewire->getTasks()) ?></span>
15 |     </h2>
16 | 
17 |     <?php if (count($magewire->getTasks())): ?>
18 |     <ul class="space-y-4">
19 |         <?php foreach ($magewire->getTasks() as $index => $title): ?>
20 |             <li wire:key="<?= $index ?>">
21 |                 <button type="button"
22 |                         wire:click="resetTask(<?= $index ?>)"
23 |                         wire:
24 |                         class="btn w-full border-b-4 pt-4 border-green-500 bg-white text-black hover:bg-white hover:border-red-500"
25 |                         title="<?= __('Mark as incomplete') ?>"
26 |                 >
27 |                     <span><?= $title ?></span>
28 |                 </button>
29 |             </li>
30 |         <?php endforeach; ?>
31 |     </ul>
32 | 
33 |     <button type="button" wire:click="clearTasks" class="btn btn-primary mt-4 float-right">
34 |         <?= __('Clear tasks') ?>
35 |     </button>
36 |     <?php else: ?>
37 |     <p class="text-center"><?= __('No tasks available.') ?></p>
38 |     <?php endif; ?>
39 | </div>
40 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/wire-ignore.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Features\WireIgnore $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="wire-ignore" class="space-y-4">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Wire Ignore') ?>
15 |     </h2>
16 | 
17 |     <div wire:ignore class="bg-gray-100 p-4 space-y-4 relative">
18 |         <button type="button"
19 |                 class="btn btn-primary text-center text-sm"
20 |                 onclick="this.innerText = Number(this.innerText) + 1"
21 |         >
22 |             0
23 |         </button>
24 | 
25 |         <p class="text-sm">
26 |             Just hit the counter button and set it to your favorite number. Because this DOM element is ignored,
27 |             Magewire will skip it when fresh HTML comes back from the server. In this case, HTML will be returned
28 |             thanks to the "Foo Value" div rendering the value you type in the input below.
29 |         </p>
30 |     </div>
31 | 
32 |     <div class="flex items-center">
33 |         <label class="flex-1">Foo</label>
34 |         <input class="flex-grow" type="text" wire:model="foo" placeholder="Insert something here..."/>
35 |     </div>
36 | 
37 |     <div class="bg-gray-100 block p-4">
38 |         <?= 'Foo Value: ' . ($magewire->hasFoo() ? $magewire->getFoo() : 'None')?>
39 |     </div>
40 | </div>
41 | 


--------------------------------------------------------------------------------
/src/Magewire/Features/MagicActionsProperties/EmitSpecific.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Features\MagicActionsProperties;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | 
13 | class EmitSpecific extends Component
14 | {
15 |     public $global = false;
16 |     public $specific = false;
17 | 
18 |     protected $listeners = [
19 |         'global',
20 |         'specific',
21 |     ];
22 | 
23 |     /**
24 |      * @see /Magewire/Features/MagicActionsProperties/EmitGlobal.php
25 |      * @param string $prefix
26 |      */
27 |     public function global(string $prefix)
28 |     {
29 |         if ($this->global) {
30 |             $this->dispatchNoticeMessage(strtoupper($prefix) . ': Global property value was reset to false');
31 |         } else {
32 |             $this->dispatchSuccessMessage(strtoupper($prefix) . ': Dispatch message from component ' . get_class($this));
33 |         }
34 | 
35 |         $this->global = !$this->global;
36 |     }
37 | 
38 |     public function specific(string $prefix)
39 |     {
40 |         if ($this->specific) {
41 |             $this->dispatchNoticeMessage(strtoupper($prefix) . ': Specific property value was reset to false');
42 |         } else {
43 |             $this->dispatchSuccessMessage(strtoupper($prefix) . ': Specific dispatch message from component ' . get_class($this));
44 |         }
45 | 
46 |         $this->specific = !$this->specific;
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/dollar-wire.phtml:
--------------------------------------------------------------------------------
 1 | <div id="dollar-wire" x-data>
 2 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
 3 |         AlpineJS: $wire
 4 |     </h2>
 5 | 
 6 |     <div class="grid grid-cols-2 gap-4">
 7 |         <div>
 8 |             <button type="button"
 9 |                     class="btn btn-primary text-center text-sm w-full"
10 |                     x-on:click="$wire.promise().then(
11 |                         (result) => {
12 |                             $wire.promise().then(
13 |                                 (result) => {
14 |                                     alert('Promise method run '+ $wire.__instance.serverMemo.data.called +' times.')
15 |                                 }
16 |                             )
17 |                         }
18 |                     )"
19 |             >
20 |                 Run as a Promise()
21 |             </button>
22 |         </div>
23 | 
24 |         <p class="bg-gray-100 p-4 text-sm">
25 |             Uses a x-on:click to call the Magewire promise() method who then waits for it's response and calls the
26 |             promise() method again where it alerts you afterwards.
27 |         </p>
28 | 
29 |         <div>
30 |             <button type="button"
31 |                     class="btn btn-primary text-center text-sm w-full"
32 |                     x-on:click="$wire.set('foo', 'bar')"
33 |             >
34 |                 Set Foo with AlpineJS
35 |             </button>
36 |         </div>
37 | 
38 |         <p class="bg-gray-100 p-4 text-sm">
39 |             Uses a x-on:click to set the "foo" property value to "bar".
40 |         </p>
41 |     </div>
42 | </div>
43 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/pagination.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Pagination $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="pagination" class="space-y-4">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Pagination') ?>
15 |     </h2>
16 | 
17 |     <div class="overflow-x-auto">
18 |         <table class="table-auto border-collapse w-full">
19 |             <tbody class="text-sm font-normal text-gray-700">
20 |             <?php foreach($magewire->getPageItems() as $key => $item): ?>
21 |                 <tr class="bg-gray-100 py-10" wire:key="<?= $key ?>">
22 |                     <td class="px-3 py-3 font-bold"><?= $item['w'] ?></td>
23 |                     <td class="px-3 py-3"><?= $item['d'] ?></td>
24 |                     <td class="px-3 py-3"><?= $item['s'] ?></td>
25 |                     <td class="px-3 py-3"><?= $item['a'] ?></td>
26 |                 </tr>
27 |             <?php endforeach; ?>
28 |             </tbody>
29 |         </table>
30 |     </div>
31 | 
32 |     <p class="border border-blue-300 bg-blue-100 p-4 rounded-md">
33 |         <?= __('Pagination is still in early development but worthy to show anyway. It allow\'s you to render
34 |         one or multiple pagination button who are automatically attached to your component as long as it\'s extending
35 |         from the Pagination Interface.') ?>
36 |     </p>
37 | 
38 |     <?= $magewire->renderPagination() ?>
39 | </div>
40 | 


--------------------------------------------------------------------------------
/src/Magewire/Form.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire;
10 | 
11 | class Form extends \Magewirephp\Magewire\Component\Form
12 | {
13 |     // Nested properties.
14 |     public $customer = [
15 |         'credentials' => [
16 |             'firstname' => '',
17 |             'lastname'  => '',
18 |             'email'     => '',
19 |         ]
20 |     ];
21 | 
22 |     // Rules for nested properties.
23 |     protected $rules = [
24 |         'customer.credentials.firstname' => 'required|min:2',
25 |         'customer.credentials.lastname'  => 'required|min:2',
26 |         'customer.credentials.email'     => 'required|email',
27 |     ];
28 | 
29 |     // :attribute & :value are available within each message.
30 |     protected $messages = [
31 |         'customer.credentials.firstname:required'  => 'Your firstname is required',
32 |         'customer.credentials.firstname:min'       => 'Your firstname minimum is 2',
33 | 
34 |         'customer.credentials.lastname:required'  => 'Your lastname is required',
35 |         'customer.credentials.lastname:min'       => 'Your lastname minimum is 2',
36 | 
37 |         'customer.credentials.email:required' => 'Your email is required',
38 |         'customer.credentials.email:email'    => 'Your email is not valid email',
39 |     ];
40 | 
41 |     public function save()
42 |     {
43 |         $this->validate();
44 |         // Will only dispatch when all customer credentials are valid.
45 |         $this->dispatchSuccessMessage('Validation success!');
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/Magewire/Reacticon.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | use Magewirephp\Magewire\Model\Element\FlashMessage;
13 | 
14 | /**
15 |  * @method int getQuantity()
16 |  * @method bool hasQuantity()
17 |  * @method int getInterval()
18 |  * @method bool hasInterval()
19 |  * @method bool getIncrement()
20 |  * @method bool hasIncrement()
21 |  * @method bool getDecrement()
22 |  * @method bool hasDecrement()
23 |  */
24 | class Reacticon extends Component
25 | {
26 |     public $quantity  = 1;
27 |     public $interval  = 1;
28 |     public $increment = true;
29 |     public $decrement = true;
30 | 
31 |     /**
32 |      * @param bool $value
33 |      * @return bool
34 |      */
35 |     public function updatingIncrement(bool $value): bool
36 |     {
37 |         $this->dispatchBrowserEvent('toggle-button', ['increment' => $value]);
38 |         return $value;
39 |     }
40 | 
41 |     /**
42 |      * @param bool $value
43 |      * @return bool
44 |      */
45 |     public function updatingDecrement(bool $value): bool
46 |     {
47 |         $this->dispatchBrowserEvent('toggle-button', ['decrement' => $value]);
48 |         return $value;
49 |     }
50 | 
51 |     /**
52 |      * @return void
53 |      */
54 |     public function increment(): void
55 |     {
56 |         $this->quantity = $this->getQuantity() + $this->getInterval();
57 |     }
58 | 
59 |     public function decrement()
60 |     {
61 |         $calc = $this->getQuantity() - $this->getInterval();
62 | 
63 |         if ($calc < 0) {
64 |             $this->dispatchNoticeMessage('You can\'t go below zero');
65 |         } else {
66 |             $this->quantity = $calc;
67 |         }
68 |     }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/dispatch-events.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\DispatchEvents $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="dispatch-events" class="space-y-4">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Dispatch Events') ?>
15 |     </h2>
16 | 
17 |     <p class="border border-blue-300 bg-blue-100 p-4 rounded-md">
18 |         <?= __('Will trigger a PHP "process" method who on his turn fires a browser event where is being listened to.') ?>
19 |     </p>
20 | 
21 |     <div x-data="dispatchEventsDialog()" class="mt-4">
22 |         <div x-show="isVisible()">
23 |             <p class="border border-green-300 bg-green-100 p-4 rounded-md">
24 |                 <?= __('At this point the subsequent dispatched a process:after event set within the Magewire
25 |                 component. It also added a note to the finished list of todo\'s.') ?>
26 |             </p>
27 |         </div>
28 |     </div>
29 | 
30 |     <button type="button" wire:click="process" class="btn btn-primary float-right">
31 |         Toggle Process
32 |     </button>
33 | </div>
34 | 
35 | <script>
36 |     function dispatchEventsDialog() {
37 |         const self = this
38 | 
39 |         window.addEventListener('process:after', event => {
40 |             self.visible = event.detail.show
41 |         })
42 | 
43 |         return {
44 |             visible: false,
45 |             show() {
46 |                 self.visible = true
47 |             },
48 |             hide() {
49 |                 self.visible = false
50 |             },
51 |             isVisible() {
52 |                 return self.visible
53 |             }
54 |         }
55 |     }
56 | </script>
57 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/todo.phtml:
--------------------------------------------------------------------------------
 1 | <div id="todo">
 2 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
 3 |         <?= __('Tasks Todo') ?> <span class="float-right"><?= count($magewire->getTasks()) ?></span>
 4 |     </h2>
 5 | 
 6 |     <ul class="space-y-2">
 7 |         <li class="flex gap-x-4">
 8 |             <input type="text"
 9 |                    placeholder="<?= __('Task Description...') ?>"
10 |                    wire:model.defer="task"
11 |                    minlength="4"
12 |                    class="form-input flex-grow disabled:opacity-50"
13 |                    wire:loading.attr="disabled"
14 |             />
15 |             <button type="button"
16 |                     class="btn btn-primary disabled:opacity-50"
17 |                     wire:click="saveTask"
18 |                     wire:loading.attr="disabled"
19 |             >
20 |                 <?= __('Save') ?>
21 |             </button>
22 |         </li>
23 | 
24 |         <?php if (count($magewire->getTasks())): ?>
25 |         <?php foreach ($magewire->getTasks() as $index => $title): ?>
26 |         <li class="flex">
27 |             <button type="button"
28 |                     wire:click="finishTask(<?= $index ?>)"
29 |                     class="btn rounded-r-none bg-white text-black w-3/4 pt-4 hover:bg-white border-b-4 border-white hover:border-green-500"
30 |                     title="<?= __('Mark as complete') ?>"
31 |             >
32 |                 <span><?= $title ?></span>
33 |             </button>
34 | 
35 |             <button type="button"
36 |                     wire:click="modifyTask(<?= $index ?>)"
37 |                     class="btn rounded-l-none w-1/4 bg-purple-500 text-white hover:bg-purple-700 text-center"
38 |                     title="<?= __('Modify Task') ?>"
39 |             >
40 |                 <?= __('Modify') ?>
41 |             </button>
42 |         </li>
43 |         <?php endforeach; ?>
44 |         <?php else: ?>
45 |         <li class="text-center"><?= __('All done! Let\'s go and celebrate!.') ?></li>
46 |         <?php endif; ?>
47 |     </ul>
48 | </div>
49 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/form.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Form $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="form" class="pb-72">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Form') ?> <span class="text-gray-400">(including validation)</span>
15 |     </h2>
16 | 
17 |     <form wire:submit.prevent="save">
18 |         <div class="flex flex-col mb-6 gap-4">
19 |             <input type="text"
20 |                    class="form-input flex-grow disabled:opacity-50"
21 |                    placeholder="<?= __('Firstname') ?>"
22 |                    wire:model.defer="customer.credentials.firstname"/>
23 |             <?php if ($magewire->hasError('customer.credentials.firstname')): ?>
24 |                 <span class="text-red-800"><?= $magewire->getError('customer.credentials.firstname') ?></span>
25 |             <?php endif ?>
26 | 
27 |             <input type="text"
28 |                    class="form-input flex-grow disabled:opacity-50"
29 |                    placeholder="<?= __('Lastname') ?>"
30 |                    wire:model.defer="customer.credentials.lastname"/>
31 |             <?php if ($magewire->hasError('customer.credentials.lastname')): ?>
32 |                 <span class="text-red-800"><?= $magewire->getError('customer.credentials.lastname') ?></span>
33 |             <?php endif ?>
34 | 
35 |             <input type="text"
36 |                    class="form-input flex-grow disabled:opacity-50"
37 |                    placeholder="<?= __('Email') ?>"
38 |                    wire:model.defer="customer.credentials.email"/>
39 |             <?php if ($magewire->hasError('customer.credentials.email')): ?>
40 |                 <span class="text-red-800"><?= $magewire->getError('customer.credentials.email') ?></span>
41 |             <?php endif ?>
42 |         </div>
43 | 
44 |         <button type="submit" class="btn btn-primary text-center float-right">
45 |             <?= __('Validate') ?>
46 |         </button>
47 |     </form>
48 | </div>
49 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/features/magic-actions-properties.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Features\MagicActionsProperties $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="magic-actions-properties">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('Magic Actions & Properties') ?>
15 |     </h2>
16 | 
17 |     <div class="grid grid-cols-3 gap-4 items-center mb-4">
18 |         <label>$toggle</label>
19 |         <input type="text" wire:model="toggle"/>
20 |         <button type="button" wire:click="$toggle('toggle')" class="btn btn-primary text-center text-sm">Perform Action</button>
21 | 
22 |         <label>$set('foo', 'bar')</label>
23 |         <input type="text" wire:model="foo"/>
24 |         <button type="button" wire:click="$set('foo', 'bar')" class="btn btn-primary text-center text-sm">Perform Action</button>
25 | 
26 |         <label>$set('foo', '$toggle')</label>
27 |         <input type="text" wire:model="foo"/>
28 |         <button type="button" wire:click="$set('foo', '$toggle')" class="btn btn-primary text-center text-sm">Perform Action</button>
29 |     </div>
30 | 
31 |     <div class="grid grid-cols-1 gap-4 items-center mb-4">
32 |         <label class="text-sm">$emit('global', 'message')</label>
33 |         <button type="button" wire:click="$emit('global', 'message')" class="btn btn-primary text-center text-sm">Perform Action</button>
34 |     </div>
35 | 
36 |     <div class="grid grid-cols-1 gap-4 items-center mb-4">
37 |         <label class="text-sm">$emitTo('magic-actions-properties.emit-specific', 'global', 'message')</label>
38 |         <button type="button" wire:click="$emitTo('magic-actions-properties.emit-specific', 'global', 'message')" class="btn btn-primary text-center text-sm">Perform Action</button>
39 |     </div>
40 | 
41 |     <div id="magic-actions-properties-emit" wire:ignore>
42 |         <?= $block->getChildHtml('magic-actions-properties.emit-global') ?>
43 |         <?= $block->getChildHtml('magic-actions-properties.emit-specific') ?>
44 |     </div>
45 | </div>
46 | 


--------------------------------------------------------------------------------
/src/Magewire/Todo.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | use Magewirephp\Magewire\Model\Element\FlashMessage;
13 | 
14 | /**
15 |  * @method string getTask()
16 |  * @method bool hasTask()
17 |  *
18 |  * @method array getTasks()
19 |  * @method array hasTasks()
20 |  *
21 |  * @method int|null getIndex()
22 |  * @method bool hasIndex()
23 |  */
24 | class Todo extends Component
25 | {
26 |     public $task = '';
27 |     public $tasks = [];
28 |     public $index;
29 | 
30 |     protected $loader = true;
31 | 
32 |     protected $listeners = ['todo:reset' => 'saveTask'];
33 | 
34 |     /**
35 |      * @param string|null $title
36 |      * @return FlashMessage|void
37 |      */
38 |     public function saveTask(string $title = null)
39 |     {
40 |         $title = ucfirst($title ?? $this->getTask());
41 | 
42 |         if (empty($title)) {
43 |             return $this->dispatchErrorMessage(__('Title can not be empty'));
44 |         }
45 |         if (in_array($title, $this->tasks) && !$this->hasIndex()) {
46 |             return $this->dispatchWarningMessage(__('Task already exists'));
47 |         }
48 |         if ($this->hasIndex()) {
49 |             $this->tasks[$this->getIndex()] = $title;
50 |         } else {
51 |             $this->tasks[] = $title;
52 |         }
53 | 
54 |         // Notify the customer just once as this is an example
55 |         if (count($this->getTasks()) === 1) {
56 |             $this->dispatchSuccessMessage(__('Task has been saved successfully.'));
57 |         }
58 |         // Always empty it's current input title.
59 |         $this->task = '';
60 |     }
61 | 
62 |     /**
63 |      * @param int $index
64 |      * @return FlashMessage|void
65 |      */
66 |     public function finishTask(int $index)
67 |     {
68 |         if (!isset($this->tasks[$index])) {
69 |             return $this->dispatchErrorMessage(__('Task with ID "%1" doesnt exist', [$index]));
70 |         }
71 | 
72 |         $this->emitTo('magewire.todo-checklist', 'todo:finish', $this->tasks[$index]);
73 |         unset($this->tasks[$index]);
74 |     }
75 | 
76 |     public function modifyTask(int $index)
77 |     {
78 |         if (!isset($this->tasks[$index])) {
79 |             return $this->dispatchErrorMessage(__('Task with ID "%1" doesnt exist', [$index]));
80 |         }
81 | 
82 |         $this->index = $index;
83 |         $this->task = $this->tasks[$index];
84 |     }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/Magewire/Todo/Todo/Todo.php:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | namespace Magewirephp\MagewireExamples\Magewire\Todo\Todo;
10 | 
11 | use Magewirephp\Magewire\Component;
12 | use Magewirephp\Magewire\Model\Element\FlashMessage;
13 | 
14 | /**
15 |  * @method string getTask()
16 |  * @method bool hasTask()
17 |  *
18 |  * @method array getTasks()
19 |  * @method array hasTasks()
20 |  *
21 |  * @method int|null getIndex()
22 |  * @method bool hasIndex()
23 |  */
24 | class Todo extends Component
25 | {
26 |     public $task = '';
27 |     public $tasks = [];
28 |     public $index;
29 | 
30 |     protected $loader = true;
31 | 
32 |     protected $listeners = ['todo:reset' => 'saveTask'];
33 | 
34 |     /**
35 |      * @param string|null $title
36 |      * @return FlashMessage|void
37 |      */
38 |     public function saveTask(string $title = null)
39 |     {
40 |         $title = ucfirst($title ?? $this->getTask());
41 | 
42 |         if (empty($title)) {
43 |             return $this->dispatchErrorMessage(__('Title can not be empty'));
44 |         }
45 |         if (in_array($title, $this->tasks) && !$this->hasIndex()) {
46 |             return $this->dispatchWarningMessage(__('Task already exists'));
47 |         }
48 |         if ($this->hasIndex()) {
49 |             $this->tasks[$this->getIndex()] = $title;
50 |         } else {
51 |             $this->tasks[] = $title;
52 |         }
53 | 
54 |         // Notify the customer just once as this is an example
55 |         if (count($this->getTasks()) === 1) {
56 |             $this->dispatchSuccessMessage(__('Task has been saved successfully.'));
57 |         }
58 |         // Always empty it's current input title.
59 |         $this->task = '';
60 |     }
61 | 
62 |     /**
63 |      * @param int $index
64 |      * @return FlashMessage|void
65 |      */
66 |     public function finishTask(int $index)
67 |     {
68 |         if (!isset($this->tasks[$index])) {
69 |             return $this->dispatchErrorMessage(__('Task with ID "%1" doesnt exist', [$index]));
70 |         }
71 | 
72 |         $this->emitTo('magewire.todo-checklist', 'todo:finish', $this->tasks[$index]);
73 |         unset($this->tasks[$index]);
74 |     }
75 | 
76 |     public function modifyTask(int $index)
77 |     {
78 |         if (!isset($this->tasks[$index])) {
79 |             return $this->dispatchErrorMessage(__('Task with ID "%1" doesnt exist', [$index]));
80 |         }
81 | 
82 |         $this->index = $index;
83 |         $this->task = $this->tasks[$index];
84 |     }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/Magewire/Pagination.php:
--------------------------------------------------------------------------------
  1 | <?php declare(strict_types=1);
  2 | /**
  3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
  4 |  *
  5 |  * Please read the README and LICENSE files for more
  6 |  * details on copyrights and license information.
  7 |  */
  8 | 
  9 | namespace Magewirephp\MagewireExamples\Magewire;
 10 | 
 11 | use Magewirephp\Magewire\Component;
 12 | 
 13 | class Pagination extends Component\Pagination
 14 | {
 15 |     /**
 16 |      * @inheritDoc
 17 |      */
 18 |     public function toPreviousPage(): void
 19 |     {
 20 |         $this->toPage(max($this->getPage() - 1, 1));
 21 |     }
 22 | 
 23 |     /**
 24 |      * @inheritDoc
 25 |      */
 26 |     public function toNextPage(): void
 27 |     {
 28 |         $this->toPage($this->getPage() + 1);
 29 |     }
 30 | 
 31 |     /**
 32 |      * @inheritDoc
 33 |      */
 34 |     public function toPage($page): void
 35 |     {
 36 |         if ($page === $this->getLastPage()) {
 37 |             $this->dispatchNoticeMessage(__('You\'ve reached the last page.'));
 38 |         }
 39 |         if ($page === 1) {
 40 |             $this->dispatchNoticeMessage(__('You\'ve reached the first page.'));
 41 |         }
 42 | 
 43 |         $this->page = (int) $page;
 44 |     }
 45 | 
 46 |     /**
 47 |      * @inheritDoc
 48 |      */
 49 |     public function getSize(): int
 50 |     {
 51 |         return (int) ceil(count($this->getAllPageItems()) / $this->getPageSize());
 52 |     }
 53 | 
 54 |     /**
 55 |      * @inheritDoc
 56 |      */
 57 |     public function onFirstPage(): bool
 58 |     {
 59 |         return $this->getPage() === 1;
 60 |     }
 61 | 
 62 |     /**
 63 |      * @inheritDoc
 64 |      */
 65 |     public function getLastPage(): int
 66 |     {
 67 |         return $this->getSize();
 68 |     }
 69 | 
 70 |     /**
 71 |      * @inheritDoc
 72 |      */
 73 |     public function hasPages(): bool
 74 |     {
 75 |         return $this->getSize() > 0;
 76 |     }
 77 | 
 78 |     /**
 79 |      * @inheritDoc
 80 |      */
 81 |     public function onLastPage(): bool
 82 |     {
 83 |         return $this->getPage() === $this->getLastPage();
 84 |     }
 85 | 
 86 |     /**
 87 |      * @inheritDoc
 88 |      */
 89 |     public function isCurrentPage($page): bool
 90 |     {
 91 |         return $this->getPage() === (int) $page;
 92 |     }
 93 | 
 94 |     /**
 95 |      * @inheritDoc
 96 |      */
 97 |     public function hasMorePages(): bool
 98 |     {
 99 |         return !$this->onLastPage();
100 |     }
101 | 
102 |     /**
103 |      * @inheritDoc
104 |      */
105 |     public function getPageItems(): array
106 |     {
107 |         $offset = ($this->getPage() * $this->getPageSize()) - $this->getPageSize();
108 |         $length = $this->getPageSize();
109 | 
110 |         return array_slice($this->getAllPageItems(), $offset, $length, true);
111 |     }
112 | 
113 |     /**
114 |      * @inheritDoc
115 |      * @throws \Exception
116 |      */
117 |     public function getAllPageItems(): array
118 |     {
119 |         $items = [];
120 | 
121 |         for ($i = 0; $i < 100; $i ++) {
122 |             $items[] = [
123 |                 'w' => $i,
124 |                 'd' => random_int(0, 99),
125 |                 's' => random_int(0, 99),
126 |                 'a' => random_int(0, 99),
127 |             ];
128 |         }
129 | 
130 |         return $items;
131 |     }
132 | }
133 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/list-shuffle.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\ListShuffle $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="shuffle" class="space-y-4">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         <?= __('List Shuffle') ?>
15 |     </h2>
16 | 
17 |     <ul class="space-y-2">
18 |         <?php foreach ($magewire->getThings() as $thing): ?>
19 |         <li class="block px-3 py-1 bg-gray-100" wire:key="<?= $thing['id'] ?>" animate-move>
20 |             <?= $thing['title'] ?>
21 |         </li>
22 |         <?php endforeach; ?>
23 |     </ul>
24 | 
25 |     <p class="border border-blue-300 bg-blue-100 p-4 rounded-md">
26 |         <?= __('As a final measure, adding wire:key will directly tell Magewire how to keep track of a
27 |         DOM element. Over-using this attribute is a smell, but it is very useful and powerful for problems of this
28 |         nature.') ?>
29 |     </p>
30 | 
31 |     <div x-data="{explanationVisible: <?= !$magewire->getMarkAsDone() ? 'false' : 'true' ?>}"
32 |          class="flex-col space-y-4"
33 |     >
34 |         <label class="inline-flex items-center cursor-pointer" for="markAsDone">
35 |             <input type="checkbox"
36 |                    id="markAsDone"
37 |                    wire:model.defer="markAsDone"
38 |                    x-on:click="explanationVisible = !explanationVisible"/>
39 |             <span class="ml-4">Mark "Shuffle" task as done.</span>
40 |         </label>
41 | 
42 |         <p class="border border-green-300 bg-green-100 p-4 rounded-md" x-show="explanationVisible">
43 |             <?= __('Awesome, now watch what happens within the "Tasks Done" example when you click Shuffle.') ?>
44 |         </p>
45 |     </div>
46 | 
47 |     <button wire:click="shuffle" class="btn btn-primary text-center float-right">Shuffle</button>
48 | </div>
49 | 
50 | <script>
51 |     /**
52 |      * Check out this cool animation feature explanation at the official Livewire Screencasts page.
53 |      * @see https://laravel-livewire.com/screencasts/s8-animate-move
54 |      */
55 | 
56 |     let animations
57 | 
58 |     document.addEventListener('DOMContentLoaded', () => {
59 |         Magewire.hook('message.received', () => {
60 |             let things = Array.from(document.querySelectorAll('[animate-move]'))
61 | 
62 |             animations = things.map(thing => {
63 |                 let topO = thing.getBoundingClientRect().top
64 | 
65 |                 return () => {
66 |                     let topN = thing.getBoundingClientRect().top
67 |                     let calc = (topO - topN)
68 | 
69 |                     thing.animate([
70 |                         {transform: 'translateY(' + calc + 'px)'},
71 |                         {transform: 'translateY(0px)'}
72 |                     ], {duration: 1000, easing: 'ease'})
73 |                 }
74 |             })
75 | 
76 |             things.forEach((thing => {
77 |                 thing.getAnimations().forEach(animations => animations.finish())
78 |             }))
79 |         })
80 | 
81 |         Magewire.hook('message.processed', () => {
82 |             while (animations.length) {
83 |                 animations.shift()()
84 |             }
85 |         })
86 |     })
87 | </script>
88 | 


--------------------------------------------------------------------------------
/src/view/frontend/layout/magewire_examples_index.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0"?>
 2 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3 |       xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
 4 |       layout="1column"
 5 | >
 6 |     <body>
 7 |         <referenceContainer name="content">
 8 |             <container name="examples.wrapper" htmlClass="grid grid-cols-3 gap-8" htmlTag="div">
 9 |                 <block name="magewire.examples"
10 |                        template="Magewirephp_MagewireExamples::examples.phtml"
11 |                 />
12 | 
13 |                 <block name="magewire.todo">
14 |                     <arguments>
15 |                         <argument name="magewire" xsi:type="object">
16 |                             \Magewirephp\MagewireExamples\Magewire\Todo\Todo\Todo
17 |                         </argument>
18 |                     </arguments>
19 |                 </block>
20 | 
21 |                 <block name="magewire.todo-checklist">
22 |                     <arguments>
23 |                         <argument name="magewire" xsi:type="object">
24 |                             \Magewirephp\MagewireExamples\Magewire\TodoChecklist
25 |                         </argument>
26 |                     </arguments>
27 |                 </block>
28 | 
29 |                 <block name="magewire.list-randomizer">
30 |                     <arguments>
31 |                         <argument name="magewire" xsi:type="object">
32 |                             \Magewirephp\MagewireExamples\Magewire\ListShuffle
33 |                         </argument>
34 |                     </arguments>
35 |                 </block>
36 | 
37 |                 <block name="magewire.dispatch-events">
38 |                     <arguments>
39 |                         <argument name="magewire" xsi:type="object">
40 |                             \Magewirephp\MagewireExamples\Magewire\DispatchEvents
41 |                         </argument>
42 |                     </arguments>
43 |                 </block>
44 | 
45 |                 <block name="magewire.pagination">
46 |                     <arguments>
47 |                         <argument name="magewire" xsi:type="object">
48 |                             \Magewirephp\MagewireExamples\Magewire\Pagination
49 |                         </argument>
50 |                     </arguments>
51 |                 </block>
52 | 
53 |                 <block name="magewire.reacticon">
54 |                     <arguments>
55 |                         <argument name="magewire" xsi:type="object">
56 |                             \Magewirephp\MagewireExamples\Magewire\Reacticon
57 |                         </argument>
58 |                     </arguments>
59 |                 </block>
60 | 
61 |                 <block name="magewire.form">
62 |                     <arguments>
63 |                         <argument name="magewire" xsi:type="object">
64 |                             \Magewirephp\MagewireExamples\Magewire\Form
65 |                         </argument>
66 |                     </arguments>
67 |                 </block>
68 | 
69 |                 <block name="magewire.quick-search">
70 |                     <arguments>
71 |                         <argument name="magewire" xsi:type="object">
72 |                             \Magewirephp\MagewireExamples\Magewire\QuickSearch
73 |                         </argument>
74 |                     </arguments>
75 |                 </block>
76 |             </container>
77 |         </referenceContainer>
78 |     </body>
79 | </page>
80 | 


--------------------------------------------------------------------------------
/src/view/frontend/templates/magewire/reacticon.phtml:
--------------------------------------------------------------------------------
 1 | <?php declare(strict_types=1);
 2 | /**
 3 |  * Copyright © Willem Poortman 2021-present. All rights reserved.
 4 |  *
 5 |  * Please read the README and LICENSE files for more
 6 |  * details on copyrights and license information.
 7 |  */
 8 | 
 9 | /** @var \Magewirephp\MagewireExamples\Magewire\Reacticon $magewire */
10 | $magewire = $block->getMagewire();
11 | ?>
12 | <div id="reacticon" class="space-y-4">
13 |     <h2 class="text-xl font-bold mb-3 pb-2 border-b">
14 |         Reacticon
15 |     </h2>
16 | 
17 |     <div class="flex justify-between items-center"
18 |          x-data="{
19 |              increment: <?= $magewire->getIncrement() ? 'true' : 'false' ?>,
20 |              decrement: <?= $magewire->getDecrement() ? 'true' : 'false' ?>
21 |          }"
22 |     >
23 |         <button class="btn btn-primary bg-green-500 hover:bg-green-700 disabled:opacity-25"
24 |                 wire:click="increment"
25 |                 x-on:toggle-button.window="'increment' in $event.detail ? increment = $event.detail.increment"
26 |                 :disabled="!increment"
27 |         >
28 |             <span>&plus;<?= $magewire->getInterval() ?></span>
29 |         </button>
30 | 
31 |         <div class="border border-gray-500 px-4 py-2 rounded-md">
32 |             <?= $magewire->getQuantity() ?>
33 |         </div>
34 | 
35 |         <button class="btn btn-primary bg-yellow-500 hover:bg-yellow-700 disabled:opacity-25"
36 |                 wire:click="decrement"
37 |                 x-on:toggle-button.window="'decrement' in $event.detail ? decrement = $event.detail.decrement"
38 |                 :disabled="!decrement"
39 |         >
40 |             <span>&minus;<?= $magewire->getInterval() ?></span>
41 |         </button>
42 |     </div>
43 | 
44 |     <div x-data="{explanationVisible: <?= !$magewire->getMarkAsDone() ? 'false' : 'true' ?>}"
45 |          class="flex-col space-y-4"
46 |     >
47 |         <label class="inline-flex items-center cursor-pointer" for="showReacticonConfiguration">
48 |             <input type="checkbox" id="showReacticonConfiguration" x-on:click="explanationVisible = !explanationVisible"/>
49 |             <span class="ml-4">Show configuration</span>
50 |         </label>
51 | 
52 |         <div class="border border-gray-300 bg-gray-100 p-4 rounded-md space-y-4" x-show="explanationVisible">
53 |             <div class="flex items-center">
54 |                 <label for="quantity" class="inline-block w-20 mr-6 text-right font-bold text-gray-600">
55 |                     <?= __('Interval') ?>
56 |                 </label>
57 | 
58 |                 <input type="number"
59 |                        id="quantity"
60 |                        placeholder="number"
61 |                        class="form-input flex-1 outline-none"
62 |                        wire:model="interval"
63 |                 />
64 |             </div>
65 | 
66 |             <div class="flex items-center">
67 |                 <label for="quantity" class="block w-20 mr-6 text-right font-bold text-gray-600">
68 |                     <?= __('Increment') ?>
69 |                 </label>
70 | 
71 |                 <input type="checkbox" id="quantity" wire:model="increment"/>
72 |             </div>
73 | 
74 |             <div class="flex items-center">
75 |                 <label for="quantity" class="inline-block w-20 mr-6 text-right font-bold text-gray-600">
76 |                     <?= __('Decrement') ?>
77 |                 </label>
78 | 
79 |                 <input type="checkbox" id="quantity" wire:model="decrement"/>
80 |             </div>
81 |         </div>
82 |     </div>
83 | 
84 |     <p class="border border-blue-300 bg-blue-100 p-4 rounded-md">
85 |         <?= __('This example was used during my Magewire presentation at Reacticon V4. Go check it out on %1 if you
86 |         missed it.', ['<a href="https://www.youtube.com/user/yireocom" target="_blank">YouTube</a>']) ?>
87 |     </p>
88 | </div>
89 | 


--------------------------------------------------------------------------------
/src/view/frontend/layout/magewire_features_index.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0"?>
  2 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3 |       xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
  4 |       layout="1column"
  5 | >
  6 |     <body>
  7 |         <referenceContainer name="content">
  8 |             <container name="features.wrapper" htmlClass="grid grid-cols-3 gap-8" htmlTag="div">
  9 |                 <block name="data-via-layout"
 10 |                        template="Magewirephp_MagewireExamples::magewire/features/data-via-layout.phtml"
 11 |                 >
 12 |                     <arguments>
 13 |                         <argument name="magewire" xsi:type="array">
 14 |                             <item name="type" xsi:type="object">\Magewirephp\MagewireExamples\Magewire\Features\DataViaLayout</item>
 15 |                             <item name="foo" xsi:type="string">bar</item>
 16 |                             <item name="bar" xsi:type="string">FOO</item>
 17 |                             <item name="toggle" xsi:type="boolean">true</item>
 18 |                         </argument>
 19 |                     </arguments>
 20 |                 </block>
 21 | 
 22 |                 <block name="template-methods"
 23 |                        template="Magewirephp_MagewireExamples::magewire/features/template-methods.phtml"
 24 |                 >
 25 |                     <arguments>
 26 |                         <argument name="magewire" xsi:type="object">
 27 |                             \Magewirephp\MagewireExamples\Magewire\Features\TemplateMethods
 28 |                         </argument>
 29 |                     </arguments>
 30 |                 </block>
 31 | 
 32 |                 <block name="switch-template"
 33 |                        template="Magewirephp_MagewireExamples::magewire/features/switch-template/a.phtml"
 34 |                 >
 35 |                     <arguments>
 36 |                         <argument name="magewire" xsi:type="array">
 37 |                             <item name="type" xsi:type="object">
 38 |                                 \Magewirephp\MagewireExamples\Magewire\Features\SwitchTemplate
 39 |                             </item>
 40 |                             <item name="templates" xsi:type="array">
 41 |                                 <item name="ta" xsi:type="string">
 42 |                                     Magewirephp_MagewireExamples::magewire/features/switch-template/a.phtml
 43 |                                 </item>
 44 |                                 <item name="tb" xsi:type="string">
 45 |                                     Magewirephp_MagewireExamples::magewire/features/switch-template/b.phtml
 46 |                                 </item>
 47 |                                 <item name="tc" xsi:type="string">
 48 |                                     Magewirephp_MagewireExamples::magewire/features/switch-template/c.phtml
 49 |                                 </item>
 50 |                             </item>
 51 |                         </argument>
 52 |                     </arguments>
 53 | 
 54 |                     <block name="switch-template.header"
 55 |                            template="Magewirephp_MagewireExamples::magewire/features/switch-template/header.phtml"/>
 56 |                     <block name="switch-template.tools"
 57 |                            template="Magewirephp_MagewireExamples::magewire/features/switch-template/tools.phtml"/>
 58 |                 </block>
 59 | 
 60 |                 <block name="wire-ignore"
 61 |                        template="Magewirephp_MagewireExamples::magewire/features/wire-ignore.phtml"
 62 |                 >
 63 |                     <arguments>
 64 |                         <argument name="magewire" xsi:type="object">
 65 |                             \Magewirephp\MagewireExamples\Magewire\Features\WireIgnore
 66 |                         </argument>
 67 |                     </arguments>
 68 |                 </block>
 69 | 
 70 |                 <block name="magic-actions-properties"
 71 |                        template="Magewirephp_MagewireExamples::magewire/features/magic-actions-properties.phtml"
 72 |                 >
 73 |                     <arguments>
 74 |                         <argument name="magewire" xsi:type="object">
 75 |                             \Magewirephp\MagewireExamples\Magewire\Features\MagicActionsProperties
 76 |                         </argument>
 77 |                     </arguments>
 78 | 
 79 |                     <block name="magic-actions-properties.emit-global"
 80 |                            template="Magewirephp_MagewireExamples::magewire/features/magic-actions-properties/emit-global.phtml"
 81 |                     >
 82 |                         <arguments>
 83 |                             <argument name="magewire" xsi:type="object">
 84 |                                 \Magewirephp\MagewireExamples\Magewire\Features\MagicActionsProperties\EmitGlobal
 85 |                             </argument>
 86 |                         </arguments>
 87 |                     </block>
 88 | 
 89 |                     <block name="magic-actions-properties.emit-specific"
 90 |                            template="Magewirephp_MagewireExamples::magewire/features/magic-actions-properties/emit-specific.phtml"
 91 |                     >
 92 |                         <arguments>
 93 |                             <argument name="magewire" xsi:type="object">
 94 |                                 \Magewirephp\MagewireExamples\Magewire\Features\MagicActionsProperties\EmitSpecific
 95 |                             </argument>
 96 |                         </arguments>
 97 |                     </block>
 98 |                 </block>
 99 | 
100 |                 <block name="reset"
101 |                        template="Magewirephp_MagewireExamples::magewire/features/reset.phtml"
102 |                 >
103 |                     <arguments>
104 |                         <argument name="magewire" xsi:type="array">
105 |                             <item name="type" xsi:type="object">\Magewirephp\MagewireExamples\Magewire\Features\Reset</item>
106 |                             <item name="foo" xsi:type="string">Bar</item>
107 |                             <item name="bar" xsi:type="string">Foo</item>
108 |                         </argument>
109 |                     </arguments>
110 |                 </block>
111 | 
112 |                 <block name="dollar-wire"
113 |                        template="Magewirephp_MagewireExamples::magewire/features/dollar-wire.phtml"
114 |                 >
115 |                     <arguments>
116 |                         <argument name="magewire" xsi:type="object">
117 |                             \Magewirephp\MagewireExamples\Magewire\Features\DollarWire
118 |                         </argument>
119 |                     </arguments>
120 |                 </block>
121 |             </container>
122 |         </referenceContainer>
123 |     </body>
124 | </page>
125 | 


--------------------------------------------------------------------------------