Skip to content

Commit

Permalink
Enhancements (#61)
Browse files Browse the repository at this point in the history 
* Raise MSI level to 100%.
* Fix docs.
* Add better images.
* Fix phpdocs, add use function, fix minor corrections.
  • Loading branch information
@terabytesoftw
terabytesoftw committed Mar 29, 2022
1 parent fbd3726 commit f1cabfe
Show file tree
Hide file tree
Showing 19 changed files with 154 additions and 114 deletions.
Binary file modified docs/images/dropdown.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/modal.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/menu.md
View file
Expand Up @@ -44,13 +44,13 @@ $this->setJsFiles($assetManager->getJsFiles());
'label' => 'Dashboard',
'url' => 'site/index',
'icon' => 'mdi mdi-desktop-mac',
'iconOptions' => ['class' => 'icon']
'iconAttributes' => ['class' => 'icon']
],
[
'label' => 'Logout',
'url' => 'site/logout',
'icon' => 'mdi mdi-logout',
'iconOptions' => ['class' => 'icon']
'iconAttributes' => ['class' => 'icon']
],
]
],
Expand Down
5 changes: 5 additions & 0 deletions docs/modal.md
View file
Expand Up @@ -8,6 +8,11 @@ The modal structure:
- `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

<p align="center">
</br>
<img src="images/modal.png">
</p>

## Usage

```php
Expand Down
4 changes: 2 additions & 2 deletions docs/navbar.md
View file
Expand Up @@ -75,13 +75,13 @@ $this->setJsFiles($assetManager->getJsFiles());
'label' => 'Setting Account',
'url' => '/setting/account',
'icon' => 'fas fa-user-cog',
'iconOptions' => ['class' => 'icon']
'iconAttributes' => ['class' => 'icon']
],
[
'label' => 'Profile',
'url' => '/profile',
'icon' => 'fas fa-users',
'iconOptions' => ['class' => 'icon']
'iconAttributes' => ['class' => 'icon']
],
[
'label' => 'Admin' . Html::img(
Expand Down
6 changes: 3 additions & 3 deletions docs/tabs.md
View file
Expand Up @@ -41,7 +41,7 @@ echo Tabs::widget()
'icon' => 'fas fa-image',
'active' => true,
'content' => 'Some text about pictures',
'contentOptions' => [
'contentAttributes' => [
'class' => 'is-active',
],
],
Expand Down Expand Up @@ -104,13 +104,13 @@ HTML produced is like the following:
Method | Description | Default
-------|-------------|---------
`alignment(string $value)` | Alignment of the tabs list. | `''`
`attributes(array $value)` | HTML attributes for the widget container nav tag. | `[]`
`autoIdPrefix(string $value)` | Prefix to the automatically generated widget ID. | `w`
`currentPath(string $value)` | Allows you to assign the current path of the URL from request controller. | ``
`deactivateItems()` | Disable active items according to their current path. | `false`
`id(string $value)` | Widget ID. | `''`
`items(array $value)` | List of tab items. | `[]`
`options(array $value)` | HTML attributes for the widget container tag. | [`class` => `tabs`]
`size(string $value)` | Size of the tabs list. | `is-small`, `is-medium`, `is-large`
`style(string $value)` | Style of the tabs list. | `''`
`tabsContentOptions(array $value)` | List of HTML attributes for the `tabs-content` container. | `[]`
`tabsContentAttributes(array $value)` | List of HTML attributes for the `tabs-content` container. | `[]`
`withoutEncodeLabels()` | When tags Labels HTML should not be encoded. | `false` |
29 changes: 19 additions & 10 deletions src/Breadcrumbs.php
View file
Expand Up @@ -56,7 +56,7 @@ public function activeItemTemplate(string $value): self
}

/**
* Defines a string value that labels the current element.
* Returns a new instance with the specified `aria-label` attribute for the current element.
*
* @param string $value The value of the aria-label attribute.
*
Expand All @@ -72,7 +72,7 @@ public function ariaLabel(string $value): self
}

/**
* The HTML attributes. The following special options are recognized.
* Returns a new instance with the specified HTML attributes for widget.
*
* @param array $values Attribute values indexed by attribute names.
*
Expand Down Expand Up @@ -102,7 +102,7 @@ public function autoIdPrefix(string $value): self
}

/**
* Set encode to true to encode the output.
* Returns a new instance with the specified whether the tags for the breadcrumbs are encoded.
*
* @param bool $value Whether to encode the output.
*
Expand All @@ -118,7 +118,7 @@ public function encode(bool $value): self
/**
* Returns a new instance with the specified first item in the breadcrumbs (called home link).
*
* If a `false` is specified, the home item will not be rendered.
* If a `null` is specified, the home item will not be rendered.
*
* @param array|null $value Please refer to {@see items()} on the format.
*
Expand Down Expand Up @@ -161,9 +161,12 @@ public function id(string $value): self
*
* ```php
* [
* 'label' => 'label of the link', // required
* 'url' => 'url of the link', // optional, will be processed by Url::to()
* 'label' => 'label of the link', // required
* 'url' => 'url of the link', // optional, will be processed by Url::to()
* 'template' => 'own template of the item', // optional, if not set $this->itemTemplate will be used
* 'encode' => true/false, // optional, is encoded is `true`, the tags will be encoded
* 'icon' => 'icon css class', // optional, icon css class
* 'iconAttributes' => [], // the html attributes for icon container
* ]
* ```
*
Expand All @@ -177,7 +180,7 @@ public function items(array $value): self
}

/**
* Returns a new instance with the specified item HTML attributes.
* Returns a new instance with the specified items HTML attributes.
*
* @param array $value The HTML attributes for the item's widget.
*
Expand Down Expand Up @@ -226,9 +229,9 @@ protected function run(): string
$customTag = $customTag->id(Html::generateId($this->autoIdPrefix) . '-breadcrumbs');
}

$content = "\n" . Html::openTag('ul', $this->itemsAttributes) . "\n" .
$content = PHP_EOL . Html::openTag('ul', $this->itemsAttributes) . PHP_EOL .
implode('', $this->renderItems()) .
Html::closeTag('ul') . "\n";
Html::closeTag('ul') . PHP_EOL;

return $customTag->content($content)->attributes($attributes)->encode(false)->render();
}
Expand Down Expand Up @@ -268,23 +271,29 @@ private function renderItem(array $item, string $template): string
/** @var bool */
$encode = $item['encode'] ?? $this->encode;
unset($item['encode']);

/** @var string|null */
$icon = $item['icon'] ?? null;
unset($item['icon']);

/** @var array */
$iconAttributes = $item['iconAttributes'] ?? [];
unset($item['iconAttributes']);

/** @var string */
$template = $item['template'] ?? $template;
unset($item['template']);

/** @var string|null */
$url = $item['url'] ?? null;
unset($item['url']);
$icon = $this->renderIcon($icon, $iconAttributes);

/** @var string */
$label = $item['label'];
unset($item['label']);

$icon = $this->renderIcon($icon, $iconAttributes);

if ($icon !== '') {
$label = $icon . Span::tag()->content($label)->render();
}
Expand Down
50 changes: 26 additions & 24 deletions src/Dropdown.php
View file
Expand Up @@ -19,6 +19,7 @@

use function array_merge;
use function implode;
use function is_array;

/**
* The dropdown component is a container for a dropdown button and a dropdown menu.
Expand Down Expand Up @@ -50,7 +51,7 @@ final class Dropdown extends Widget
private string $triggerCssClass = 'dropdown-trigger';

/**
* The HTML attributes. The following special options are recognized.
* Returns a new instance with the specified HTML attributes for widget.
*
* @param array $values Attribute values indexed by attribute names.
*
Expand Down Expand Up @@ -80,7 +81,7 @@ public function autoIdPrefix(string $value): self
}

/**
* The HTML attributes for the dropdown button.
* Returns a new instance with the specified HTML attributes for the dropdown button.
*
* @param array $values Attribute values indexed by attribute names.
*
Expand All @@ -94,7 +95,7 @@ public function buttonAttributes(array $values): self
}

/**
* The HTML attributes for the dropdown button icon.
* Returns a new instance with the specified HTML attributes for the dropdown button icon.
*
* @param array $values Attribute values indexed by attribute names.
*
Expand All @@ -108,7 +109,7 @@ public function buttonIconAttributes(array $values): self
}

/**
* Set icon CSS class for the dropdown button.
* Returns a new instance with the specified icon CSS class for the dropdown button.
*
* @param string $value The CSS class.
*
Expand All @@ -122,7 +123,7 @@ public function buttonIconCssClass(string $value): self
}

/**
* Set icon text for the dropdown button.
* Returns a new instance with the specified icon text for the dropdown button.
*
* @param string $value The text.
*
Expand All @@ -136,7 +137,7 @@ public function buttonIconText(string $value): self
}

/**
* Set label for the dropdown button.
* Returns a new instance with the specified label for the dropdown button.
*
* @param string $value The label.
*
Expand All @@ -150,7 +151,7 @@ public function buttonLabel(string $value): self
}

/**
* The HTML attributes for the dropdown button label.
* Returns a new instance with the specified HTML attributes for the dropdown button label.
*
* @param array $values Attribute values indexed by attribute names.
*
Expand All @@ -164,7 +165,7 @@ public function buttonLabelAttributes(array $values): self
}

/**
* Set CSS class for dropdown content.
* Returns a new instance with the specified CSS class for dropdown content.
*
* @param string $value The CSS class.
*
Expand All @@ -180,7 +181,7 @@ public function contentCssClass(string $value): self
}

/**
* Set CSS class for the dropdown container.
* Returns a new instance with the specified CSS class for the dropdown container.
*
* @param string $value The CSS class.
*
Expand All @@ -194,7 +195,7 @@ public function cssClass(string $value): self
}

/**
* Set CSS class for horizontal line separating dropdown items.
* Returns a new instance with the specified CSS class for horizontal line separating dropdown items.
*
* @param string $value The CSS class.
*
Expand All @@ -208,7 +209,7 @@ public function dividerCssClass(string $value): self
}

/**
* If the widget should be enclosed by container.
* Returns a new instance with the specified if the widget should be enclosed by container.
*
* @param bool $value Whether the widget should be enclosed by container. Defaults to true.
*
Expand Down Expand Up @@ -236,7 +237,7 @@ public function id(string $value): self
}

/**
* Set CSS class for active dropdown item.
* Returns a new instance with the specified CSS class for active dropdown item.
*
* @param string $value The CSS class.
*
Expand All @@ -250,7 +251,7 @@ public function itemActiveCssClass(string $value): self
}

/**
* Set CSS class for dropdown item.
* Returns a new instance with the specified CSS class for dropdown item.
*
* @param string $value The CSS class.
*
Expand All @@ -264,7 +265,7 @@ public function itemCssClass(string $value): self
}

/**
* Set Style attributes for disabled dropdown item.
* Returns a new instance with the specified style attributes for disabled dropdown item.
*
* @param string $value The CSS class.
*
Expand All @@ -278,7 +279,7 @@ public function itemDisabledStyleCss(string $value): self
}

/**
* Set CSS class for dropdown item header.
* Returns a new instance with the specified CSS class for dropdown item header.
*
* @param string $value The CSS class.
*
Expand All @@ -292,20 +293,21 @@ public function itemHeaderCssClass(string $value): self
}

/**
* List of menu items in the dropdown. Each array element can be either an HTML string, or an array representing a
* single menu with the following structure:
* Returns a new instance with the specified list of items.
*
* Each array element can be either an HTML string, or an array representing a single menu with the following
* structure:
*
* - label: string, required, the label of the item link.
* - encode: bool, optional, whether to HTML-encode item label.
* - url: string|array, optional, the URL of the item link. This will be processed by {@see currentPath}.
* If not set, the item will be treated as a menu header when the item has no sub-menu.
* - visible: bool, optional, whether this menu item is visible. Defaults to true.
* - urlAttributes: array, optional, the HTML attributes of the item link.
* - attributes: array, optional, the HTML attributes of the item.
* - items: array, optional, the submenu items. The structure is the same as this property.
* Note that Bootstrap doesn't support dropdown submenu. You have to add your own CSS styles to support it.
* - submenuOptions: array, optional, the HTML attributes for sub-menu container tag. If specified it will be
* merged with {@see submenuOptions}.
* - submenuAttributes: array, optional, the HTML attributes for sub-menu container tag. If specified it will be
* merged with {@see submenuAttributes}.
*
* To insert divider use `-`.
*
Expand All @@ -321,7 +323,7 @@ public function items(array $value): self
}

/**
* Set Dropdown menu CSS class.
* Returns a new instance with the specified dropdown menu CSS class.
*
* @param string $value The CSS class.
*
Expand All @@ -335,7 +337,7 @@ public function menuCssClass(string $value): self
}

/**
* Set Dropdown trigger CSS class.
* Returns a new instance with the specified dropdown trigger CSS class.
*
* @param string $value The CSS class.
*
Expand All @@ -349,7 +351,7 @@ public function triggerCssClass(string $value): self
}

/**
* Set if it is a submenu or sub-dropdown.
* Returns a new instance with the specified if it is a submenu or sub-dropdown.
*
* @param bool $value Whether it is a submenu or sub-dropdown. Defaults to false.
*
Expand All @@ -363,7 +365,7 @@ public function submenu(bool $value): self
}

/**
* The HTML attributes for sub-menu container tag.
* Returns a new instance with the specified HTML attributes for sub-menu container tag.
*
* @param array $values Attribute values indexed by attribute names.
*
Expand Down

0 comments on commit f1cabfe

Please sign in to comment.