Add Modal widget

yiisoft · Nov 30, 2020 · 9932bff · 9932bff
1 parent 8617c9d
commit 9932bff
Show file tree

Hide file tree

Showing 7 changed files with 1,692 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -92,6 +92,8 @@ We will quickly and easily describe how to use widgets, and be able to use all t
 - [Menu](docs/menu.md)
 - [Message](docs/message.md)
 - [ProgressBar](docs/progressbar.md)
+- [Modal](docs/modal.md)
+- [ModalCard](docs/modalcard.md)
 
 ### Unit testing
 

diff --git a/docs/modal.md b/docs/modal.md
@@ -0,0 +1,70 @@
+# Modal widget
+
+A base [modal](https://bulma.io/documentation/components/modal/) overlay, in which you can include any content you want
+
+The modal structure:
+- `modal`: the main container
+    - `modal-background`: a transparent overlay that can act as a click target to close the modal
+    - `modal-content`: a horizontally and vertically centered container, in which you can include any content
+    - `modal-close`: a simple cross located in the top right corner
+
+## Usage
+
+```php
+<?php
+
+declare(strict_types=1);
+
+use Yiisoft\Html\Html;
+use Yiisoft\Yii\Bulma\Modal;
+use Yiisoft\Yii\Bulma\Asset\BulmaAsset;
+use Yiisoft\Yii\Bulma\Asset\BulmaJsAsset;
+
+/**
+ * @var \Yiisoft\Assets\AssetManager $assetManager
+ * @var \Yiisoft\View\WebView $this
+ */
+
+$assetManager->register([
+    BulmaAsset::class,
+    BulmaJsAsset::class,
+]);
+
+$this->setCssFiles($assetManager->getCssFiles());
+$this->setJsFiles($assetManager->getJsFiles());
+
+echo Modal::widget()
+    ->closeButtonSize(Modal::SIZE_LARGE)
+    ->begin();
+echo Html::tag('div', 'Say hello...', ['class' => 'box']);
+echo Modal::end();
+```
+
+HTML produced is like the following:
+```html
+<button type="button" class="button" data-target="#w1-modal" aria-haspopup="true">Toggle button</button>
+<div id="w1-modal" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-content">
+        <div class="box">
+            Say hello...
+        </div>
+    </div>
+    <button type="button" class="modal-close is-large" aria-label="close"></button>
+</div>
+```
+
+## Reference
+
+Method | Description | Default
+-------|-------------|---------
+options(array $value) | HTML attributes for the widget container tag. | [`class` => `modal`]
+contentOptions(array $value) | | `[]`
+closeButtonOptions(array $value) | | [`class` => `modal-close`, `aria-label` => `close`]
+closeButtonSize(string $value) | | `''`
+toggleButtonLabel(string $value) | | `Toggle button`
+toggleButtonSize(string $value) | | `''`
+toggleButtonColor(string $value) | | `''`
+toggleButtonOptions(array $value) | | [`class` => `button`, `aria-haspopup` => `true`]
+closeButtonEnabled(bool $value) | | `true`
+toggleButtonEnabled(bool $value) | | `true`
diff --git a/docs/modalcard.md b/docs/modalcard.md
@@ -0,0 +1,87 @@
+# Modal card widget
+
+A classic [modal](https://bulma.io/documentation/components/modal/) overlay, in which you can include any content you want
+
+The modal structure:
+- `modal`: the main container
+    - `modal-background`: a transparent overlay that can act as a click target to close the modal
+    - `modal-card`: ...
+        - `modal-card-head`: ...
+            - `modal-card-title`: ...
+    - `modal-card-body`: ...
+    - `modal-card-foot`: ...
+
+## Usage
+
+```php
+<?php
+
+declare(strict_types=1);
+
+use Yiisoft\Html\Html;
+use Yiisoft\Yii\Bulma\ModalCard;
+use Yiisoft\Yii\Bulma\Asset\BulmaAsset;
+use Yiisoft\Yii\Bulma\Asset\BulmaJsAsset;
+
+/**
+ * @var \Yiisoft\Assets\AssetManager $assetManager
+ * @var \Yiisoft\View\WebView $this
+ */
+
+$assetManager->register([
+    BulmaAsset::class,
+    BulmaJsAsset::class,
+]);
+
+$this->setCssFiles($assetManager->getCssFiles());
+$this->setJsFiles($assetManager->getJsFiles());
+
+$widget = ModalCard::widget()
+    ->title('Modal title')
+    ->footer(
+        Html::button('Cancel', ['class' => 'button'])
+    )
+    ->begin();
+echo "Say hello...";
+echo ModalCard::end();
+```
+
+HTML produced is like the following:
+```html
+<div id="w1-modal" class="modal">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title">Modal title</p>
+            <button class="delete" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+            Say hello...
+        </section>
+        <footer class="modal-card-foot">
+            <button type="button" class="button">Cancel</button>
+        </footer>
+    </div>
+</div>
+```
+
+## Reference
+
+Method | Description | Default
+-------|-------------|---------
+options(array $value) | HTML attributes for the widget container tag. | [`class` => `modal`]
+contentOptions(array $value) | | [`class` => `modal-card`]
+headerOptions(array $value) | | [`class` => `modal-card-head`]
+title(string $value) | | `''`
+titleOptions(array $value) | | [`class` => `modal-card-title`]
+bodyOptions(bool $value) | | [`class` => `modal-card-body`]
+footer(string $value) | | `''`
+footerOptions(bool $value) | | [`class` => `modal-card-foot`]
+closeButtonOptions(array $value) | | [`class` => `delete`, `aria-label` => `close`]
+closeButtonSize(string $value) | | `''`
+toggleButtonLabel(string $value) | | `Toggle button`
+toggleButtonSize(string $value) | | `''`
+toggleButtonColor(string $value) | | `''`
+toggleButtonOptions(array $value) | | [`class` => `button`, `aria-haspopup` => `true`]
+closeButtonEnabled(bool $value) | | `true`
+toggleButtonEnabled(bool $value) | | `true`