Clean up (#60)

.scrutinizer.yml

@@ -10,7 +10,7 @@ build:
 
   environment:
     php:
-      version: 8.0.11
+      version: 8.0.16
       ini:
         xdebug.mode: coverage
 

README.md

@@ -27,6 +27,57 @@ and plugins in terms of Yii widgets, and thus makes using Bulma components/plugi
 composer require yiisoft/yii-bulma --prefer-dist
 ```
 
+## Install assets
+
+There are several ways to install the assets, they are:
+
+1.- Using the [AssetPackagist](https://asset-packagist.org/) package manager.
+
+Add to composer.json the following:
+
+```json
+{
+    "require": {
+        "npm-asset/bulma": "^0.9.3",
+        "npm-asset/bulma-helpers": "^0.4.2",
+        "npm-asset/vizuaalog--bulmajs": "^0.12.1",
+        "oomphinc/composer-installers-extender": "^2.0.0",
+    },
+    "extra": {
+        "installer-types": [
+            "npm-asset"
+        ],
+        "installer-paths": {
+            "./node_modules/{$name}": [
+                "type:npm-asset"
+            ]
+        }
+    },
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://asset-packagist.org"
+        }
+    ]
+}
+```
+
+Once the changes are made, you can install the assets using the following command:
+
+```php
+composer update --prefer-dist
+```
+
+2.- Using the [npm-asset](https://www.npmjs.com/) package manager.    
+
+Run the following command at the root directory of your application.
+
+```shell
+npm i bulma
+npm i @vizuaalog/bulmajs
+npm i bulma-helpers
+```
+
 ## Using assets
 
 Bulma is a CSS framework that provides all the CSS and SASS files to customize your application, the widgets by default
@@ -97,14 +148,14 @@ the Bulma CSS framework with PHP:
 
 - [Breadcrumbs](docs/breadcrumbs.md)
 - [Dropdown](docs/dropdown.md)
-- [NavBar](docs/navbar.md)
 - [Menu](docs/menu.md)
 - [Message](docs/message.md)
-- [ProgressBar](docs/progressbar.md)
 - [Modal](docs/modal.md)
 - [ModalCard](docs/modalcard.md)
-- [Tabs](docs/tabs.md)
+- [NavBar](docs/navbar.md)
 - [Panel](docs/panel.md)
+- [ProgressBar](docs/progressbar.md)
+- [Tabs](docs/tabs.md)
 
 ## Testing
 

composer.json

@@ -19,10 +19,6 @@
     },
     "require": {
         "php": "^7.4|^8.0",
-        "npm-asset/bulma": "^0.9.3",
-        "npm-asset/bulma-helpers": "^0.4.0",
-        "npm-asset/vizuaalog--bulmajs": "^0.12.1",
-        "oomphinc/composer-installers-extender": "^2.0.0",
         "yiisoft/arrays": "^2.0",
         "yiisoft/assets": "^2.0",
         "yiisoft/html": "^2.0",
@@ -61,15 +57,11 @@
         "sort-packages": true,
         "allow-plugins": {
             "infection/extension-installer": true,
-            "composer/package-versions-deprecated": true
+            "composer/package-versions-deprecated": true,
+            "composer/installers": true,
+            "oomphinc/composer-installers-extender": true
         }
     },
-    "repositories": [
-        {
-            "type": "composer",
-            "url": "https://asset-packagist.org"
-        }
-    ],
     "scripts": {
         "test": "phpunit --testdox --no-interaction",
         "test-watch": "phpunit-watcher watch"

docs/breadcrumbs.md

@@ -1,8 +1,9 @@
 # Breadcrumbs widget
 
-[The Bulma breadcrumb](https://bulma.io/documentation/components/breadcrumb/) is a simple navigation component.
+### [The Bulma breadcrumb](https://bulma.io/documentation/components/breadcrumb/) is a simple navigation component.
 
 <p align="center">
+    </br>
     <img src="images/breadcrumbs.png">
 </p>
 
@@ -84,7 +85,7 @@ Method | Description | Default
         'template' => '<li><a href="{url}">{icon}{label}</a></li>',
         'encode' => true,
         'icon' => 'fas fa-home',
-        'iconAttributes' => ['class' => 'icon']
+        'iconAttributes' => ['class' => 'icon'],
     ],
 ]
 ```

docs/dropdown.md

@@ -1,9 +1,9 @@
 # Dropdown widget
 
-[The dropdown component](https://bulma.io/documentation/components/dropdown/) is a container for a dropdown button and
-a dropdown menu.
+### [The dropdown component](https://bulma.io/documentation/components/dropdown/) is a container for a dropdown button and a dropdown menu.
 
 <p align="center">
+    </br>
     <img src="images/dropdown.png">
 </p>
 
@@ -84,20 +84,20 @@ Method | Description | Default
 `buttonIconText(string $value)` | Set icon text for the dropdown button. | `'&#8595;'`
 `buttonLabel(string $value)` | Set label for the dropdown button. | `'Click Me'`
 `buttonLabelAttributes(array $values)` | The HTML attributes for the dropdown button label. | `[]`
+`contentCssClass(string $value)` | Set CSS class for dropdown content. | `'dropdown-content'`
+`cssClass(string $value)` | Set CSS class for the dropdown container. | `'dropdown'`
 `dividerCssClass(string $value)` | Set CSS class for horizontal line separating dropdown items. | `'dropdown-divider'`
-`dropdownCssClass(string $value)` | Set CSS class for the dropdown container. | `'dropdown'`
-`dropdownContentCssClass(string $value)` | Set CSS class for dropdown content. | `'dropdown-content'`
-`dropdownItemActiveCssClass(string $value)` | Set CSS class for active dropdown item. | `'is-active'`
-`dropdownItemCssClass(string $value)` | Set CSS class for dropdown item. | `'dropdown-item'`
-`dropdownItemDisabledStyleCss(string $value)` | Set Style attributes for disabled dropdown item. | `'opacity:.65;pointer-events:none;'`
-`dropdownItemHeaderCssClass(string $value)` | Set CSS class for dropdown item header. | `'dropdown-header'`
-`dropdownMenuCssClass(string $value)` | Set CSS class for dropdown menu. | `'dropdown-menu'`
-`dropdownTriggerCssClass(string $value)` | Set CSS class for dropdown trigger. | `'dropdown-trigger'`
+`enclosedByContainer(bool $value = false)` | Whether the widget should be enclosed by a container. | `true`
 `id(string $value)` | Set the ID of the dropdown. | `''`
+`itemActiveCssClass(string $value)` | Set CSS class for active dropdown item. | `'is-active'`
+`itemCssClass(string $value)` | Set CSS class for dropdown item. | `'dropdown-item'`
+`itemDisabledStyleCss(string $value)` | Set Style attributes for disabled dropdown item. | `'opacity:.65;pointer-events:none;'`
+`itemHeaderCssClass(string $value)` | Set CSS class for dropdown item header. | `'dropdown-header'`
 `items(array $value)` | Set the dropdown items. | `[]`
+`menuCssClass(string $value)` | Set CSS class for dropdown menu. | `'dropdown-menu'`
 `submenu(bool $value)` | Set whether the dropdown is a submenu. | `false`
 `submenuAttributes(array $values)` | The HTML attributes for the dropdown submenu. | `[]`
-`enclosedByContainer(bool $value = false)` | Whether the widget should be enclosed by a container. | `true`
+`triggerCssClass(string $value)` | Set CSS class for dropdown trigger. | `'dropdown-trigger'`
 
 ### Items structure is an array of the following structure:
 

docs/menu.md

@@ -1,8 +1,9 @@
 # Menu widget
 
-[The Bulma menu](https://bulma.io/documentation/components/menu/) is a vertical navigation component.
+### [The Bulma menu](https://bulma.io/documentation/components/menu/) is a vertical navigation component.
 
 <p align="center">
+    </br>
     <img src="images/menu.png">
 </p>
 
@@ -97,20 +98,41 @@ HTML produced is like the following:
 
 Method | Description | Default
 -------|-------------|---------
-`id(string $value)` | Widget ID. | `''`
-`autoIdPrefix(string $value)` | Prefix to the automatically generated widget ID. | `w`
-`deactivateItems()` | Disable active items according to their current path. | `false`
 `activateParents()` | Whether to activate parent menu items when one of the corresponding child menu items is active. | `true`
 `activeCssClass(string $value)` | The CSS class to be appended to the active menu item. | `is-active`
+`autoIdPrefix(string $value)` | Prefix to the automatically generated widget ID. | `w`
+`attributes(array $value)` | HTML attributes for the widget container nav tag. | `[]`
 `brand(string $value)` | Custom brand content. | `''`
 `currentPath(string $value)` | Allows you to assign the current path of the URL from request controller. | `''`
-`withoutEncodeLabels()` | Disable encoding for labels. | `false`
+`deactivateItems()` | Disable active items according to their current path. | `false`
 `firstItemCssClass(string $value)` | The CSS class for the first item in the main menu or each submenu. | `''`
-`showEmptyItems()` | Whether to show empty menu items. An empty menu item is one whose `url` option is not set and which has no visible child menu items. | `false`
+`hiddenEmptyItems()` | Whether to hide empty menu items. | `false`
+`id(string $value)` | Widget ID. | `''`
+`itemAttributes(array $value)` | List of HTML attributes shared by all menu. | `[]`
 `items(array $value)` | List of menu items. | `[]`
-`itemOptions(array $value)` | List of HTML attributes shared by all menu. | `[]`
+`itemsTag(?string $value)` | Tag name of the container element, `null` value means that container tag will not be rendered. | `ul`
 `labelTemplate(string $value)`| The template used to render the body of a menu which is NOT a link. | `''`
 `lastItemCssClass(string $value)` | The CSS class that will be assigned to the last item in the main menu or each submenu. | `''`
-`linkTemplate(string $value)` | The template used to render the body of a menu which is a link. | `<a href={url}>{icon}{label}</a>`
-`options(array $value)` | The HTML attributes for the menu's container tag. | `[]`
 `subMenuTemplate(string $value)` | The template used to render a list of sub-menus. | `<ul class = menu-list>\n{items}\n</ul>`
+`urlTemplate(string $value)` | The template used to render the body of a menu which is a link. | `<a href={url}>{icon}{label}</a>`
+
+### Items structure is an array of the following structure:
+
+```php
+[
+    [
+        'label' => '',
+        'labelTemplate' => '',
+        'url' => '',
+        'urlAttributes' => [],
+        'urlTemplate' => '',
+        'items' => [],
+        'itemAtrributes' => [],
+        'icon' => '',,
+        'iconAttributes' => [],
+        'active' => false,
+        'submenuTemplate' => '',
+        'encode' => false,
+        'visible' => true,
+    ],
+]

docs/message.md

@@ -1,8 +1,9 @@
 # Message widget
 
-[The message component](https://bulma.io/documentation/components/message/) displays a message like the following:
+### [The message component](https://bulma.io/documentation/components/message/) displays a message like the following:
 
 <p align="center">
+    </br>
     <img src="images/message.png">
 </p>
 
@@ -69,10 +70,12 @@ Method | Description | Default
 `autoIdPrefix(string $value)` | Prefix to the automatically generated widget ID. | `w`
 `body(string $value)` | Message body. | `''`
 `bodyAttributes(array $value)` | HTML attributes for the body tag. | `[]`
+`bodyCssClass(string $value)` | CSS class for the body container. | `''`
 `closeButtonAttributes(array $value)`| HTML attributes for rendering the close button tag. | `[]`
+`encode()` | Enable/Disable encoding for labels. | `false`
+`headerAttributes(array $value)` | HTML attributes for the header tag. | `[]`
 `headerColor(string $value)` | Message color. Options available are: (`Message::COLOR_DARK`, `Message::COLOR_PRIMARY`, `Message::COLOR_LINK`, `Message::COLOR_INFO`, `Message::COLOR_SUCCESS`, `Message::COLOR_WARNING`, `Message::COLOR_DANGER`). | `Message::COLOR_DARK`
 `headerMessage(string $value)` | Message header. | `''`
-`headerAttributes(array $value)` | HTML attributes for the header tag. | `[]`
 `id(string $value)` | Widget ID. | `''`
 `size(string $value)` | Message widget size. Default is normal. Options available are: (`Message::SIZE_SMALL`, `Message::SIZE_MEDIUM`, `Message::SIZE_LARGE`.  | `normal`
 `withoutCloseButton(bool $value)` | Whether the close button is disabled. | `false`

docs/modalcard.md

@@ -1,8 +1,9 @@
 # Modal card widget
 
-A classic [modal](https://bulma.io/documentation/components/modal/) overlay, in which you can include any content you want
+### A classic [modal](https://bulma.io/documentation/components/modal/) overlay, in which you can include any content you want
 
 <p align="center">
+    </br>
     <img src="images/modal_card.png">
 </p>
 
@@ -103,7 +104,7 @@ Method | Description | Default
 `cardAttributes(array $value)` | HTML attributes for the card. | []
 `cardClass(string $value)` | The class for the modal card. | `modal-card`
 `closeButtonAttributes(array $value)` | HTML attributes for the close button. | []
-`closeButtonClass(string $value)` | The class for the close button. | `button delete`
+`closeButtonCssClass(string $value)` | The class for the close button. | `button delete`
 `closeButtonSize(string $value)` | Сlose button size. Options available are: (`ModalCard::SIZE_SMALL`, `ModalCard::SIZE_MEDIUM`, `ModalCard::SIZE_LARGE`). | Default setting is "normal".
 `contentClass(string $value)` | The class for the modal card content. | `modal-card-content`
 `footer(string $value)` | The footer content. | `''`

docs/navbar.md

@@ -1,17 +1,19 @@
 # Navbar and nav widget
 
-[The navbar component](https://bulma.io/documentation/components/navbar/) is a responsive and versatile horizontal
-navigation bar.
+### [The navbar component](https://bulma.io/documentation/components/navbar/) is a responsive and versatile horizontal navigation bar.
 
 <p align="center">
+    </br>
     <img src="images/navbar.png">
 </p>
 
 <p align="center">
+    </br>
     <img src="images/navbar-responsive-1.png">
 </p>
 
 <p align="center">
+    </br>
     <img src="images/navbar-responsive-2.png">
 </p>
 
@@ -131,25 +133,26 @@ All setters are immutable and return a new instance of the `Yiisoft\Yii\Bulma\Na
 
 Method | Description | Default
 -------|-------------|---------
+`ariaLabel(string $value)` | The ARIA label of the navbar. | `'main navigation'`
 `attributes(array $values)` | HTML attributes for the widget container nav. | `[]`
 `autoIdPrefix(string $value)` | Prefix to the automatically generated widget ID. | `w`
 `brandAttributes(array $values)` | HTML attributes for the navbar brand. | `[]`
+`brandCssClass(string $value)` | CSS class for the navbar brand. | `'navbar-brand'`
 `brandImage(string $value)` | Image for the navbar brand. | `''`
+`brandImageAttributes(array $values)` | HTML attributes for the navbar brand image. | `[]`
 `brandText(string $value)` | Text for the navbar brand. | `''`
 `brandTextAttributes(array $values)` | HTML attributes for the navbar brand text. | `[]`
 `brandUrl(string $value)` | URL for the navbar brand. | `''`
+`burgerAttributes(array $values)` | HTML attributes for the navbar burger. | `[]`
+`burgerCssClass(string $value)` | CSS class for the navbar burger. | `'navbar-burger'`
 `buttonLinkAriaExpanded(string $value)` | The ARIA expanded attribute of the button link. | `'false'`
 `buttonLinkAriaLabelText(string $value)` | The ARIA label text of the button link. | `'menu'`
 `buttonLinkContent(string $value)` | The content of the button link. | `''`
 `buttonLinkRole(string $value)` | The role of the button link. | `'button'`
+`cssClass(string $value)` | CSS class for the navbar. | `'navbar'`
 `id(string $value)` | Set the ID of the navbar. | `''`
-`navBarAriaLabel(string $value)` | The ARIA label of the navbar. | `'main navigation'`
-`navBarBrandCssClass(string $value)` | CSS class for the navbar brand. | `'navbar-brand'`
-`navBarBurgerAttributes(array $values)` | HTML attributes for the navbar burger. | `[]`
-`navBarBurgerCssClass(string $value)` | CSS class for the navbar burger. | `'navbar-burger'`
-`navBarCssClass(string $value)` | CSS class for the navbar. | `'navbar'`
-`navBarItemCssClass(string $value)` | CSS class for the navbar item. | `'navbar-item'`
-`navBarRole(string $value)` | The role of the navbar. | `'navigation'`
+`itemCssClass(string $value)` | CSS class for the navbar item. | `'navbar-item'`
+`role(string $value)` | The role of the navbar. | `'navigation'`
 
 All setters are immutable and return a new instance of the `Yiisoft\Yii\Bulma\Nav` class with the specified value.
 
@@ -160,7 +163,6 @@ Method | Description | Default
 `currentPath(string $value)` | Allows you to assign the current path of the url from request controller. | `''`
 `enclosedByEndMenu()` | Align the menu items to the right. | `false`
 `enclosedByStartMenu()` | Align the menu items to the left. | `false`
-`id(string $value)` | Set the ID of the navbar. | `''`
 `items(array $value)` | The menu items. | `[]`
 `withoutActivateItems()` |  Disable activate items according to whether their currentPath. | `false`