diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000..3d8d32c --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,7 @@ +Contributing to Yii2 +==================== + +- [Report an issue](https://github.com/yiisoft/yii2/blob/master/docs/internals/report-an-issue.md) +- [Translate documentation or messages](https://github.com/yiisoft/yii2/blob/master/docs/internals/translation-workflow.md) +- [Give us feedback or start a design discussion](http://www.yiiframework.com/forum/index.php/forum/42-general-discussions-for-yii-20/) +- [Contribute to the core code or fix bugs](https://github.com/yiisoft/yii2/blob/master/docs/internals/git-workflow.md) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..5f5c645 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,5 @@ +# These are supported funding model platforms + +open_collective: yiisoft +github: [yiisoft] +tidelift: "packagist/yiisoft/yii2-bootstrap4" diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..fb58a29 --- /dev/null +++ b/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,19 @@ + + +### What steps will reproduce the problem? + +### What's expected? + +### What do you get instead? + + +### Additional info + +| Q | A +| ---------------- | --- +| Yii vesion | +| PHP version | +| Operating system | diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..968a845 --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,7 @@ +| Q | A +| ------------- | --- +| Is bugfix? | yes/no +| New feature? | yes/no +| Breaks BC? | yes/no +| Tests pass? | yes/no +| Fixed issues | comma-separated list of tickets # fixed by the PR, if any diff --git a/.github/SECURITY.md b/.github/SECURITY.md new file mode 100644 index 0000000..f713847 --- /dev/null +++ b/.github/SECURITY.md @@ -0,0 +1,6 @@ +# Security Policy + +Please use the [security issue form](https://www.yiiframework.com/security) to report to us any security issue you find in Yii. +DO NOT use the issue tracker or discuss it in the public forum as it will cause more damage than help. + +Please note that as a non-commerial OpenSource project we are not able to pay bounties at the moment. diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml new file mode 100644 index 0000000..5f8fea2 --- /dev/null +++ b/.github/workflows/build.yml @@ -0,0 +1,47 @@ +name: build + +on: [push, pull_request] + +env: + DEFAULT_COMPOSER_FLAGS: "--prefer-dist --no-interaction --no-progress --optimize-autoloader --ansi" + +jobs: + phpunit: + name: PHP ${{ matrix.php }} on ${{ matrix.os }} + runs-on: ${{ matrix.os }} + strategy: + fail-fast: false + matrix: + os: [ubuntu-latest] + php: ['7.4', '8.0'] + + steps: + - name: Checkout + uses: actions/checkout@v2 + - name: Install PHP + uses: shivammathur/setup-php@v2 + with: + php-version: ${{ matrix.php }} + - name: Get composer cache directory + id: composer-cache + run: echo "::set-output name=dir::$(composer config cache-files-dir)" + - name: Cache composer dependencies + uses: actions/cache@v1 + with: + path: ${{ steps.composer-cache.outputs.dir }} + key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }} + restore-keys: ${{ runner.os }}-composer- + - name: Install dependencies + run: composer update $DEFAULT_COMPOSER_FLAGS + - name: Run unit tests with coverage + run: vendor/bin/phpunit --verbose --coverage-clover=coverage.clover --colors=always + if: matrix.php == '7.4' + - name: Run unit tests without coverage + run: vendor/bin/phpunit --verbose --colors=always + if: matrix.php != '7.4' + - name: Upload code coverage + run: | + wget https://scrutinizer-ci.com/ocular.phar + php ocular.phar code-coverage:upload --format=php-clover coverage.clover + if: matrix.php == '7.4' + continue-on-error: true # if is fork diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..0929951 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,6 @@ +Yii Framework 2 bootstrap5 extension Change Log +============================================== + +1.0.0 under development +----------------------- +- Initial release diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..f6657fb --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,29 @@ +Copyright © 2008 by Yii Software LLC (http://www.yiisoft.com) +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions +are met: + +* Redistributions of source code must retain the above copyright + notice, this list of conditions and the following disclaimer. +* Redistributions in binary form must reproduce the above copyright + notice, this list of conditions and the following disclaimer in + the documentation and/or other materials provided with the + distribution. +* Neither the name of Yii Software LLC nor the names of its + contributors may be used to endorse or promote products derived + from this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS +FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE +COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, +INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, +BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; +LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT +LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN +ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..e582067 --- /dev/null +++ b/README.md @@ -0,0 +1,49 @@ +

+ + + +

Twitter Bootstrap 5 Extension for Yii 2

+
+

+ +This is the Twitter Bootstrap extension for [Yii framework 2.0](http://www.yiiframework.com). It encapsulates [Bootstrap 5](http://getbootstrap.com/) components +and plugins in terms of Yii widgets, and thus makes using Bootstrap components/plugins +in Yii applications extremely easy. + +For license information check the [LICENSE](LICENSE.md)-file. + +Documentation is at [docs/guide/README.md](docs/guide/README.md). + +[![Latest Stable Version](https://poser.pugx.org/simialbi/yii2-bootstrap5/v/stable.png)](https://packagist.org/packages/simialbi/yii2-bootstrap5) +[![Total Downloads](https://poser.pugx.org/simialbi/yii2-bootstrap5/downloads.png)](https://packagist.org/packages/simialbi/yii2-bootstrap5) +[![Build Status](https://github.com/simialbi/yii2-bootstrap5/workflows/build/badge.svg)](https://github.com/simialbi/yii2-bootstrap5/actions) + + +Installation +------------ + +The preferred way to install this extension is through [composer](http://getcomposer.org/download/). + +Either run + +``` +php composer.phar require --prefer-dist simialbi/yii2-bootstrap5 +``` + +or add + +``` +"simialbi/yii2-bootstrap5": "~1.0@dev" +``` + +to the require section of your `composer.json` file. + +Usage +---- + +For example, the following +single line of code in a view file would render a Bootstrap Progress plugin: + +```php + 60, 'label' => 'test']) ?> +``` diff --git a/composer.json b/composer.json index 7306979..b71ce7e 100644 --- a/composer.json +++ b/composer.json @@ -1,5 +1,5 @@ { - "name": "mylistryx/yii2-bootstrap5", + "name": "simialbi/yii2-bootstrap5", "description": "The Twitter Bootstrap v5 extension for the Yii framework", "version": "1.0.0", "keywords": [ @@ -10,25 +10,29 @@ "type": "yii2-extension", "license": "BSD-3-Clause", "support": { - "source": "https://github.com/mylistryx/yii2-bootstrap45" + "source": "https://github.com/simialbi/yii2-bootstrap5" }, "authors": [ { "name": "Sergey Zhukovskiy", "email": "mylistryx@gmail.com", "homepage": "https://net23.ru/" + }, + { + "name": "Simon Karlen", + "email": "simi.albi@outlook.com" } ], - "minimum-stability": "dev", + "minimum-stability": "stable", "require": { - "php": "~7.4.0", - "yiisoft/yii2": "~2.0", - "npm-asset/bootstrap": "^5.0.0", - "ext-json": "*" + "php": ">=7.4.0", + "ext-json": "*", + "yiisoft/yii2": "^2.0.42", + "npm-asset/bootstrap": "^5.0.0" }, "require-dev": { "yiisoft/yii2-coding-standards": "~2.0", - "cweagans/composer-patches": "^1.7" + "phpunit/phpunit": "^7.5.20" }, "repositories": [ { @@ -41,6 +45,11 @@ "yii\\bootstrap5\\": "src" } }, + "autoload-dev": { + "psr-4": { + "yiiunit\\extensions\\bootstrap5\\": "tests" + } + }, "extra": { "branch-alias": { "dev-master": "1.0.x-dev" diff --git a/docs/guide-de/README.md b/docs/guide-de/README.md new file mode 100644 index 0000000..0a203d8 --- /dev/null +++ b/docs/guide-de/README.md @@ -0,0 +1,30 @@ +Twitter Bootstrap Erweiterung für Yii 2 +======================================= + +Diese Erweiterung enthält Unterstützung für das [Bootstrap 4 Framework](http://getbootstrap.com/) (auch bekannt als "Twitter Bootstrap") +Markup und dessen Komponenten. Bootstrap ist eine exzellentes, reponsives Framework welches den clientseitigen +Entwicklungsprozess vehement zu verkürzen vermag. + +Die Basis von Bootstrap ist unterteilt in folgende 2 Bereiche: + - CSS Basics: Grid Layout System, Typography, Helper-Klassen, Responsive Funktionen. + - "Ready to use"-Komponenten: Formulare, Menus, Paginationen, Modals, Tabs etc. + +Loslegen +-------- + +* [Installation](installation.md) +* [Assets Setup](assets-setup.md) +* [Basic Usage](basic-usage.md) + +Verwendung +---------- + +* [Yii widgets](usage-widgets.md) +* [Html helper](helper-html.md) +* [Asset Bundles](asset-bundles.md) + +Weitere Themen +-------------- + +* [Using the .sass files of Bootstrap directly](topics-sass.md) +* [Migration von yii2-bootstrap](migrating-yii2-bootstrap.md) diff --git a/docs/guide-de/asset-bundles.md b/docs/guide-de/asset-bundles.md new file mode 100644 index 0000000..0b3a7db --- /dev/null +++ b/docs/guide-de/asset-bundles.md @@ -0,0 +1,15 @@ +Asset Bundles +============= + +Bootstrap ist eine komplexe Front-End-Lösung, welche CSS, Javascript, Schriften usw. beinhaltet. +Um Ihnen die flexibelste Kontrolle über die einzelnen Komponenten zu ermöglichen enthält diese Erweiterung verschiedene Asset Bundles. + +Das sind: +- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - enthält nur das hauptsächliche CSS. +- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - enthält das Javascript. Abhängig von [[yii\bootstrap4\BootstrapAsset]]. + +Verschiedene Anwendunganforderungen erfordern verschiedene Bundles (bzw. Kombinationen). +Falls Sie nur auf das CSS angewiesen sind, reicht es wenn Sie [[yii\bootstrap4\BootstrapAsset]] laden. +Wenn Sie das Javascript verwenden möchten, müssen Sie [[yii\bootstrap4\BootstrapPluginAsset]] auch laden. + +> Tipp: Die meisten Widgets laden [[yii\bootstrap4\BootstrapPluginAsset]] automatisch. diff --git a/docs/guide-de/assets-setup.md b/docs/guide-de/assets-setup.md new file mode 100644 index 0000000..4c01ac8 --- /dev/null +++ b/docs/guide-de/assets-setup.md @@ -0,0 +1,170 @@ +Asset-Konfiguration +=================== + +Diese Erweiterung beruht auf [Bower](http://bower.io/) und/oder [NPM](https://www.npmjs.org/) Packages für die Asset Installation. +Bevor Sie diese Erweiterung einsetzen, sollten Sie entscheiden, auf welche Weise Sie diese Packages installieren möchten. + +## Verwendung des asset-packagist Repository + +Sie können [asset-packagist.or](https://asset-packagist.org) als Package-Quelle für die Bootstrap-Assets angeben. +Fügen Sie dazu folgende Zeilen zur `composer.json`-Datei ihres Projekts hinzu: + +```json +"repositories": [ + { + "type": "composer", + "url": "https://asset-packagist.org" + } +] +``` + +Passen Sie `@npm` und `@bower` in der Konfiguration ihrer Applikation wie folgt an: + +```php +return [ + //... + 'aliases' => [ + '@bower' => '@vendor/bower-asset', + '@npm' => '@vendor/npm-asset', + ], + //... +]; +``` + + +## Verwendung des composer asset Plugins + +Installieren Sie das [composer asset plugin](https://github.com/francoispluchino/composer-asset-plugin/) global durch das Ausführen folgendes Befehls: + +``` +composer global require "fxp/composer-asset-plugin:^1.4.0" +``` + +Fügen Sie folgende Zeilen zur `composer.json`-Datei ihres Projekts hinzu um das Verzeichnis der Installation von Assets anzupassen +falls Sie möchten, das Yii sie verwaltet: + +```json +"extra": { + "asset-installer-paths": { + "npm-asset-library": "vendor/npm", + "bower-asset-library": "vendor/bower" + } +} +``` + +Daraufhin können Sie den composer install bzw. update Befehl ausführen um die Boostrap Assets zu installieren. + +> Warnung: Das Plugin `fxp/composer-asset-plugin` verlangsamt den `composer update` Befehl signifikant verglichen zur + "asset-packagist"-Methode. + +## Direkte Verwendung des Bower/NPM Clients + +Sie kännen die Bootstrap Assets direkt via Bower oder NPM Client installieren. +Fügen Sie dafür folgende Zeilen zur `package.json`-Datei Ihres Projekts hinzu: + +```json +{ + ... + "dependencies": { + "bootstrap": "4.2.1", + ... + } + ... +} +``` + +Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen: + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + +## Verwendung des CDN + +Sie können die Bootstrap Assets vom [offiziellen CDN](https://www.bootstrapcdn.com) laden. + +Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen: + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + +Konfigurieren Sie die 'assetManager'-Komponente wie folgt (überschreibt die Bootstrap Asset mit den CDN Links): + +```php +return [ + 'components' => [ + 'assetManager' => [ + // override bundles to use CDN : + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1', + 'css' => [ + 'css/bootstrap.min.css' + ], + ], + 'yii\bootstrap4\BootstrapPluginAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1', + 'js' => [ + 'js/bootstrap.bundle.min.js' + ], + ], + ], + ], + // ... + ], + // ... +]; +``` + + +## Kompilieren von den .sass Dateien + +Falls Sie den Bootstrap Quelltext direkt anpassen möchten, können Sie das CSS direkt von den Quell *.sass-Dateien kompilieren. +In diesem Fall macht die Installation der Bootstrap Assets via composer bzw. Bower/NPM kein Sinn, da Sie keine Dateien innerhalb +des 'vendor'-Verzeichnisses bearbeiten können. +Sie müssen die Bootstrap-Assets manuell herunterladen und sie irgendwo in Ihrem Projekt platzieren (z.B. 'assets/source/bootstrap'). + +Fügen Sie zur `composer.json`-Datei Ihres Projekts folgende Zeilen hinzu zum Verhindern von redundanten Bootstrap-Installationen: + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + +Konfigurieren Sie die 'assetManager'-Komponente wie folgt (überschreibt die Bootstrap Assets): + +```php +return [ + 'components' => [ + 'assetManager' => [ + // override bundles to use local project files : + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap/dist', + 'css' => [ + YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css', + ], + ], + 'yii\bootstrap4\BootstrapPluginAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap/dist', + 'js' => [ + YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js', + ] + ], + ], + ], + // ... + ], + // ... +]; +``` + +Nach dem Verändern des Bootstrap Quellcodes, stellen Sie sicher, dass sie neu [kompiliert werden](https://getbootstrap.com/docs/4.1/getting-started/build-tools/), z.B. mittels `npm run dist`. diff --git a/docs/guide-de/basic-usage.md b/docs/guide-de/basic-usage.md new file mode 100644 index 0000000..84bcd4c --- /dev/null +++ b/docs/guide-de/basic-usage.md @@ -0,0 +1,17 @@ +Grundlegende Verwendung +======================= + +Yii verpackt die Bootstrap Basics nicht in PHP Code, da dass HTML selbst sehr einfach aufgebaut ist. Sie finden mehr +Informationen zur Verwendung der Basics unter [bootstrap documentation website](http://getbootstrap.com/css/). Yii bietet +aber eine einfache Methode zur Einbindung der Bootstrap Assets in Ihre Seite durch das Hinzufügen einer Zeile zu `AppAsset.ph` +im `@app/assets` Verzeichnis: + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap4\BootstrapAsset', // Diese Zeile +]; +``` + +Die Verwendung von Bootstrap mittels des Yii Asset Manager erlaubt die Komprimierung und Kombinierung der Bootstrapressourcen +mit den Applikationsressourcen (falls nötig). diff --git a/docs/guide-de/helper-html.md b/docs/guide-de/helper-html.md new file mode 100644 index 0000000..929dfbb --- /dev/null +++ b/docs/guide-de/helper-html.md @@ -0,0 +1,28 @@ +HTML helper +=========== + +Bootstrap führt viele konsistente HTML Strukturen ein, welche es erlauben, verschiedene visuelle Effekte einfach zu verwenden. +Ausschliesslich die komplexesten von ihnen sind mittels Widgets in dieser Erweiterung umgesetzt worden. Der Rest kann manuell +mittels HTML zusammengestellt werden. +Einige spezielle Bootstrap Markups sind implementiert im [[\yii\bootstrap4\Html]]-Helper. +Die [[\yii\bootstrap4\Html]]-Klasse ist eine Erweiterung der regulären [[\yii\helpers\Html]]-Klasse mit Anpassungen zur +Verwendung mit Bootstrap. Sie bietet verschiedene nützliche Methoden. + +Die [[\yii\bootstrap4\Html]]-Klasse erbt von der [[\yii\helpers\Html]]-Klasse und ersetzt diese dadurch vollumfänglich. +Sie benötigen folglich **nicht** beide in Ihren Views. +Beispiel: + +```php + + Html::tag('i', ['class' => 'fas fa-check']) . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> Vorsicht: Verwechseln Sie [[\yii\bootstrap4\Html]] und [[\yii\helpers\Html]] Klassen nicht und bedenken Sie jeweils + welche Sie in Ihren Views verwenden. diff --git a/docs/guide-de/installation.md b/docs/guide-de/installation.md new file mode 100644 index 0000000..0981aeb --- /dev/null +++ b/docs/guide-de/installation.md @@ -0,0 +1,20 @@ +Installation +============ + +## Mittels Composer Package + +Der empfohlene Weg zur Installation dieser Erweiterung ist mittels [composer](http://getcomposer.org/download/). + +Führen Sie entweder folgenden Befehlt aus + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 +``` + +oder fügen Sie folgendes + +``` +"yiisoft/yii2-bootstrap4": "~1.0.0" +``` + +zur `require`-Sektion Ihrer `composer.json`-Datei hinzu. diff --git a/docs/guide-de/migrating-yii2-bootstrap.md b/docs/guide-de/migrating-yii2-bootstrap.md new file mode 100644 index 0000000..dc92e11 --- /dev/null +++ b/docs/guide-de/migrating-yii2-bootstrap.md @@ -0,0 +1,110 @@ +Migration von yii2-bootstrap +============================ + +yii2-bootstrap4 ist eine komplette Überarbeitung des Projekts (siehe den Bootstrap 4 von Bootstrap 3 Migrationsguide). +Die grössten Änderungen finden Sie hier zusammengefasst: + +## Allgemein + +* Der Namespace ist nun `yii\bootstrap4` anstatt `yii\bootstrap` +* Es wird das `npm` Paket verwendet anstatt das `bower` Paket +* Es gibt kein Theme Asset mehr +* `popper.js` muss nicht mehr extra installiert werden (wird vom Bootstrap JS Bundle mitgeliefert) + +## Widgets / Klassen + +* [[yii\bootstrap\Collapse|Collapse]] wurde umbenannt zu [[yii\bootstrap4\Accordion|Accordion]] +* [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] wurde entfernt +* [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] wurde hinzugefügt (Bootstrap 4 Implementation von [[yii\widgets\Breadcrumbs]]) +* [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] wurde hinzugefügt (https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar) + + +### BaseHtml + +Die Methode `icon` wurde entfernt. Sie macht keinen Sinn mehr, da Bootstrap 4 keine Icons mehr mit sich bringt. Eine +mögliche Alternative wäre das [Font Awesome Widget](https://github.com/rmrevin/yii2-fontawesome) oder aber das +[Font Awesome Inline Widget](https://github.com/YiiRocks/yii2-fontawesome-inline). + +### ActiveField + +Folgende Properties wurden umbenannt: +* `$checkboxTemplate` zu `$checkTemplate`, +* `$horizontalCheckboxTemplate` zu `$checkHorizontalTemplate`, +* `$horizontalRadioTemplate` zu `$radioHorizontalTemplate` + +Die Properties `$inlineCheckboxListTemplate` und `$inlineRadioListTemplate` wurden entfernt. Dafür gibt es ein neues +Template mit dem Namen `$checkEnclosedTemplate`. In Bootstrap 4 sind Checkboxen standardmässig nicht mehr von Labeln +eingeschlossen. + +### ActiveForm + +Hier wurden die Konstanten [[yii\bootstrap4\ActiveForm::LAYOUT_DEFAULT]], [[yii\bootstrap4\ActiveForm::LAYOUT_HORIZONTAL]] +und [[yii\bootstrap4\ActiveForm::LAYOUT_INLINE]] eingeführt. Sie sollen die Verwendung der Layout vereinfachen und bei +allfälligen Änderungen der Werte Folgefehler verhindern. + +### Breadcrumbs + +Dieses Widget wurde neu eingeführt um die Korrekte Darstellung von Breadcrumbs im Bootstrap 4 Design zu gerwährleisten. +Es ist vollständig komptibel mit [[yii\widgets\Breadcrumbs]]. + +### ButtonDropdown + +Dieses Widget hat ein neues Property mit Namen `$direction` erhalten. Es ermöglicht die Anzeige des Menüs auf z.B. der +rechten Seite des Buttons. Des weiteren gibt es die Konstanten [[yii\bootstrap4\ButtonDropdown::DIRECTION_DOWN]], +[[yii\bootstrap4\ButtonDropdown::DIRECTION_LEFT]], [[yii\bootstrap4\ButtonDropdown::DIRECTION_RIGHT]] und +[[yii\bootstrap4\ButtonDropdown::DIRECTION_UP]] um die Richtungsselektion zu vereinfachen. +Es wurde ein weiteres Property eingeführt mit dem Namen `$renderContainer`. Falls dieses auf `false` gestellt wird, wird +das rendern des das Dropdown umfassenden DIVs verhindert. + +Folgende Properties wurden umbenannt: +* `$containerOptions` zu `$options`, +* `$options` zu `$buttonOptions` + +### ButtonToolbar + +Dieses Widget wurde eingeführt um einfach Button-Toolbars zu erstellen. Weitere Informationen erhalten Sie unter +https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar. + +### Carousel + +Dieses Widget hat das Property `$crossfade` erhalten. Es erlaubt das Ändern der Animation zwischen den Slides auf ein Fade, +anstatt eines Slided wenn es auf `true` gestellt wird. + +### LinkPager + +Dieses neue Widget repräsentiert die Bootstrap Version von [[yii\widgets\LinkPager]]. Es rendert eine Pagination im Bootstrap +Stil. Weitere Informationen erhalten Sie unter https://getbootstrap.com/docs/4.3/components/pagination/. + +### Modal + +Folgende Properties wurden umbenannt: +* `$header` zu `$title`, +* `$headerOptions` zu `$titleOptions` + +Des Weiteren ist es nicht mehr von nöten, beim `$title` die Titel-Tags `

[ + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'css' => [], + ] + ] + ] +``` diff --git a/docs/guide-de/usage-widgets.md b/docs/guide-de/usage-widgets.md new file mode 100644 index 0000000..6749bf8 --- /dev/null +++ b/docs/guide-de/usage-widgets.md @@ -0,0 +1,91 @@ +Yii widgets +=========== + +Die komplexesten Bootstrap Komponenten sind umgesetzt mittels Yii-Widget zur vereinfachten Verwendung und Integration +von Framework-Funktionen. Alle Widgets gehören zum `\yii\bootstrap4` Namespace: + +- [[yii\bootstrap4\Accordion|Accordion]] +- [[yii\bootstrap4\ActiveField|ActiveField]] +- [[yii\bootstrap4\ActiveForm|ActiveForm]] +- [[yii\bootstrap4\Alert|Alert]] +- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] +- [[yii\bootstrap4\Button|Button]] +- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] +- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] +- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] +- [[yii\bootstrap4\Carousel|Carousel]] +- [[yii\bootstrap4\Dropdown|Dropdown]] +- [[yii\bootstrap4\Modal|Modal]] +- [[yii\bootstrap4\Nav|Nav]] +- [[yii\bootstrap4\NavBar|NavBar]] +- [[yii\bootstrap4\Progress|Progress]] +- [[yii\bootstrap4\Tabs|Tabs]] +- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] + + +## Anpassen der Widget CSS-Klassen + +Die Widgets erlauben die schnelle Erstellung von HTML-Markup der Bootstrap Komponenten. +Die Standard-CSS-Klassen einer bestimmten Komponente wird automatisch vom Widget hinzugefügt. Alle weiteren (optionalen) +Klassen können Sie mittels der Attribute des Widgets anpassen. + +Verwenden Sie z.B. [[yii\bootstrap4\Button::options]] zur Anpassung des Aussehens des Buttons. Die Klasse `btn`, welche +benötigt vom Button Widget benötigt wird, wird automatisch hinzugefügt. Sie müssen lediglich die besondere Button-Klasse +hinzufügen: + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // produces class "btn btn-primary" +]); +``` + +Manchmal möchte man aber die Standard-Klasse ersetzen. +Das [[yii\bootstrap4\ButtonGroup]]-Widget beispielsweise verwendet standardmässig die 'btn-group' Klasse für den Container, +es müsste aber 'btn-group-vertical' erhalten zur vertikalen Ausrichtung. +Würden Sie wie oben nur die 'class'-Option verwenden, würde die 'btn-group-vertical'-Klasse zur 'btn-group'-Klasse hinzugefügt. +Zum Überschreiben der Standard-Klassen eines Widgets, müssen Sie die 'class'-Option unter dem Array-Schlüssel 'widget' angeben: + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical' + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` + + +## Navbar widget + +Das Navbar Widget hat so seine Eigenheiten. Bei der Verwendung des Widgets sollten Sie darauf achten, dass der Breakpoint, +ab welchem die Navigation zugeklappt wird (Mobile Navigation) sowie das Farbschema definiert sind. + +Diese Definition geschieht über CSS Klassen. Die Standartwerte lauten `navbar-light bg-light` fürs Farbschema und +`navbar-expand-lg` für den brakpoint. Für weitere Informationen, konsultieren Sie die [Bootstrap Dokumentation](https://getbootstrap.com/docs/4.2/components/navbar/): +```php +Navbar::begin([ + 'options' => [ + 'class' => ['navbar-dark', 'bg-dark', 'navbar-expand-md'] + ] +]); + [...] +Navbar::end(); +``` + +Falls Sie die Reihenfolge des Logos und des "Toggle Buttons" ändern möchten, können Sie dies wie folgt tun: +```php +Navbar::begin([ + 'brandOptions' => [ + 'class' => ['order-1'] + ], + 'togglerOptions' => [ + 'class' => ['order-0'] + ] +]); + [...] +Navbar::end(); +``` diff --git a/docs/guide-es/README.md b/docs/guide-es/README.md new file mode 100644 index 0000000..cbdd4fb --- /dev/null +++ b/docs/guide-es/README.md @@ -0,0 +1,29 @@ +Extensión Twitter Bootstrap para Yii 2 +====================================== + +La extensión incluye soporte para el marcado de [Bootstrap 4](http://getbootstrap.com/) y los componentes del framework +(también conocido como "Twitter Bootstrap"). Bootstrap es un excelente framework responsivo que puede acelerar +enormemente el proceso de desarrollo del lado del cliente. + +El núcleo de Boostrap está representado por dos partes: + +- Bases de CSS, tales como un sistema de cuadriculas, tipografía, clases de ayuda, y utilidades responsivas. +- Componentes listos para usar, tales como formularios, menús, paginación, cajas modales, tabs, etc. + +Pasos Iniciales +--------------- + +* [Instalación](installation.md) +* [Uso Básico](basic-usage.md) + +Uso +--- + +* [Yii widgets](usage-widgets.md) +* [Html helper](helper-html.md) +* [Asset Bundles](asset-bundles.md) + +Temas Adicionales +----------------- + +* [Usando directamente los ficheros .sass de Bootstrap](topics-sass.md) diff --git a/docs/guide-es/asset-bundles.md b/docs/guide-es/asset-bundles.md new file mode 100644 index 0000000..d0e59a0 --- /dev/null +++ b/docs/guide-es/asset-bundles.md @@ -0,0 +1,16 @@ +Asset Bundles +============= + +Bootstrap es una completa solución front-end, que incluye CSS, JavaScript, fuentes y mucho más. +Con el fin de permitir un control más flexible sobre los componentes de Bootstrap, esta extensión proporciona +varios asset bundles. +Ellos son: + +- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - contiene unicamente los ficheros CSS principales. +- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - depende de [[yii\bootstrap4\BootstrapAsset]], contiene ficheros javascript. + +Particularmente las aplicaciones pueden necesitar requerir diferentes usos de bundle (o combinación de bundle). +Si necesitas unicamente estilos CSS, [[yii\bootstrap4\BootstrapAsset]] será suficiente para ti. Sin embargo, si +quieres usar el JavaScript de Bootstrap, necesitas registrar [[yii\bootstrap4\BootstrapPluginAsset]]. + +> Consejo: la mayoría de los widgets registran automaticamente [[yii\bootstrap4\BootstrapPluginAsset]]. diff --git a/docs/guide-es/basic-usage.md b/docs/guide-es/basic-usage.md new file mode 100644 index 0000000..d37d20f --- /dev/null +++ b/docs/guide-es/basic-usage.md @@ -0,0 +1,16 @@ +Uso Básico +========== + +Yii no se ajusta a los conceptos básicos de bootstrap dentro del código PHP, desde el HTML es muy simple en si mismo +en este caso. Puedes encontrar los detalles sobre el uso de los conceptos básicos en la [web de bootstrap](http://getbootstrap.com/css/). Yii proporciona una manera de incluir los assets de bootstrap en tus páginas añadiendo una única linea a `AppAsset.php` localizado en tu +directorio `@app/assets`: + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap4\BootstrapAsset', // esta linea +]; +``` + +Usando bootstrap a través de Yii asset manager permite que minimices los recursos y combinarlos con tus propios recursos +cuando lo necesites. diff --git a/docs/guide-es/helper-html.md b/docs/guide-es/helper-html.md new file mode 100644 index 0000000..6e54729 --- /dev/null +++ b/docs/guide-es/helper-html.md @@ -0,0 +1,29 @@ +Html helper +=========== + +Bootstrap introduce muchas construcciones y esqueletos consistentes de HTML, que permiten crear diferentes efectos visuales. +Unicamente lo más complejo está cubierto por los widgets proporcionados en esta extensión. El resto debería ser +compuesto manualmente usando HTML directamente. +Sin embargo, algunas marcas especiales de Bootstrap son cubiertas por el helper [[\yii\bootstrap4\Html]]. +[[\yii\bootstrap4\Html]] es una versión mejorada de la regular [[\yii\helpers\Html]] dedicada a las necesidades de Bootstrap. +Proporciona varios métodos útiles: + + - `icon()` - permite renderizar iconos de Glyphicon + - `staticControl()` - permite renderizar formularios "static controls" + +[[\yii\bootstrap4\Html]] hereda todas las funcionalidades disponibles en [[\yii\helpers\Html]] y puede usarse como sustituto, +así que no es necesario incluir ambos dentro de los archivos de tus vistas. +Por ejemplo: + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> Atención: no confundas [[\yii\bootstrap4\Html]] con [[\yii\helpers\Html]], ten cuidado que clases estás usando dentro de tus vistas. diff --git a/docs/guide-es/installation.md b/docs/guide-es/installation.md new file mode 100644 index 0000000..f4d0270 --- /dev/null +++ b/docs/guide-es/installation.md @@ -0,0 +1,20 @@ +Instalación +=========== + +## Obteniendo el Paquete de Composer + +La mejor manera para instalar esta extensión es a través de [composer](http://getcomposer.org/download/). + +Ejecuta + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 +``` + +o añade + +``` +"yiisoft/yii2-bootstrap": "~1.0.0" +``` + +en la sección require de tu fichero `composer.json`. diff --git a/docs/guide-es/topics-sass.md b/docs/guide-es/topics-sass.md new file mode 100644 index 0000000..8da0975 --- /dev/null +++ b/docs/guide-es/topics-sass.md @@ -0,0 +1,17 @@ +Usando directamente los ficheros .sass de Bootstrap +=================================================== + +Si deseas incluir el [css de Bootstrap directamente en tus ficheros sass](http://getbootstrap.com/getting-started/#customizing) puedes necesitar deshabilitar los ficheros css de bootstrap originales para ser cargados. +Puedes hacer esto mediante la configuración de la propiedad css de [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] asignando +un array vacio. +Para esto necesitas configurar el `assetManager` [componente de aplicación](https://github.com/yiisoft/yii2/blob/master/docs/guide-es/structure-application-components.md) como se muestra a continuación: + +```php + 'assetManager' => [ + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'css' => [], + ] + ] + ] +``` diff --git a/docs/guide-es/usage-widgets.md b/docs/guide-es/usage-widgets.md new file mode 100644 index 0000000..c34014f --- /dev/null +++ b/docs/guide-es/usage-widgets.md @@ -0,0 +1,62 @@ +Yii widgets +=========== + +La mayoría de los componentes de bootstrap están encapsulados dentro de Yii widgets lo que permite una sintaxis +más robusta y poder integrarse con las características del framework. Todos los widgets pertenecen +al namespace `\yii\bootstrap4`: + +- [[yii\bootstrap4\Accordion|Accordion]] +- [[yii\bootstrap4\ActiveField|ActiveField]] +- [[yii\bootstrap4\ActiveForm|ActiveForm]] +- [[yii\bootstrap4\Alert|Alert]] +- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] +- [[yii\bootstrap4\Button|Button]] +- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] +- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] +- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] +- [[yii\bootstrap4\Carousel|Carousel]] +- [[yii\bootstrap4\Dropdown|Dropdown]] +- [[yii\bootstrap4\Modal|Modal]] +- [[yii\bootstrap4\Nav|Nav]] +- [[yii\bootstrap4\NavBar|NavBar]] +- [[yii\bootstrap4\Progress|Progress]] +- [[yii\bootstrap4\Tabs|Tabs]] +- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] + + +## Personalización de las clases css para los widget + +Los widgets permiten una rápida composición del HTML para los componentes de bootstrap que requieren las clases +CSS de bootstrap. +Las clases por defecto para un componente en particular serán añadidas automáticamente por los widgets, y las clases +opcionales que quieres personalizar son frecuentemente soportadas a través de las propiedades de los widgets. + +Por ejemplo, puedas usar [[yii\bootstrap4\Button::options]] para personalizar la apariencia de un botón. +La clase 'btn' que se requiere para un botón será añadida automáticamente, por lo que no necesitas preocuparte +por ello. +Todo lo que necesitas es especificar una clase de botón en particular: + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // produce la clase "btn btn-primary" +]); +``` + +Sin embargo, a veces puede que tengas que remplazar las clases por defecto por las alternativas. +Por ejemplo, el widget [[yii\bootstrap4\ButtonGroup]] utiliza por defecto la clase 'btn-group' para el contenido del div, pero necesitas usar 'btn-group-vertical' en lugar de alinear los botones verticalmente. +El uso directo de la opción 'class' simplemente añade 'btn-group-vertical' a 'btn-group, el cual producirá un resultado incorrecto. +Con el fin de sobrescribir las clases por defecto de un widget, necesitas especificar la opción 'class' como un +array que contiene la definición de la clase personalizada bajo la clave 'widget': + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // remplaza 'btn-group' con 'btn-group-vertical' + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` diff --git a/docs/guide-ja/README.md b/docs/guide-ja/README.md new file mode 100644 index 0000000..115bd83 --- /dev/null +++ b/docs/guide-ja/README.md @@ -0,0 +1,31 @@ +Yii 2 Twitter Bootstrap エクステンション +======================================== + +このエクステンションは、マークアップとコンポーネントのフレームワーク [Bootstrap 4](http://getbootstrap.com/) ("Twitter Bootstrap" としても知られています) +に対するサポートを提供します。 +Bootstrap は優れた、レスポンシブなフレームワークであり、クライアント・サイドの開発プロセスを大いにスピードアップすることが出来るものです。 + +Bootstrap のコアは二つの部分によって表されます。 + +- CSS の基礎。例えば、グリッド・レイアウト・システム、タイポグラフィ、ヘルパ・クラス、レスポンシブ・ユーティリティなど。 +- そのまま使えるコンポーネント。フォーム、メニュー、ページネーション、モーダル・ボックス、タブなど。 + +始めよう +-------- + +* [インストール](installation.md) +* [アセットのセットアップ](assets-setup.md) +* [基本的な使用方法](basic-usage.md) + +使用方法 +-------- + +* [Yii ウィジェット](usage-widgets.md) +* [Html ヘルパ](helper-html.md) +* [アセット・バンドル](asset-bundles.md) + +追加のトピック +-------------- + +* [Bootstrap の .sass ファイルを直接に使う](topics-sass.md) +* [yii2-bootstrap からの移行](migrating-yii2-bootstrap.md) diff --git a/docs/guide-ja/asset-bundles.md b/docs/guide-ja/asset-bundles.md new file mode 100644 index 0000000..0a3d317 --- /dev/null +++ b/docs/guide-ja/asset-bundles.md @@ -0,0 +1,16 @@ +アセット・バンドル +================== + +Bootstrap は、CSS、JavaScript、フォントなどを含む複雑なフロントエンド・ソリューションです。 +Bootstrap コンポーネントに対する最大限の柔軟な制御を可能にするために、このエクステンションは複数のアセット・バンドルを提供しています。 +すなわち、 + +- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - メインの CSS ファイルのみを含みます。 +- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - [[yii\bootstrap4\BootstrapAsset]] に依存し、javascript ファイルを含みます。 + +個々のアプリケーションは、その要求に応じて、異なるバンドル (またはバンドルの組み合わせ) を必要とするでしょう。 +CSS のスタイルだけが必要なのであれば、[[yii\bootstrap4\BootstrapAsset]] だけで十分です。 +しかし、Bootstrap の JavaScript を必要とする場合は、[[yii\bootstrap4\BootstrapPluginAsset]] +をも登録しなければなりません。 + +> Tip: ほとんどのウィジェットは [[yii\bootstrap4\BootstrapPluginAsset]] を自動的に登録します。 diff --git a/docs/guide-ja/assets-setup.md b/docs/guide-ja/assets-setup.md new file mode 100644 index 0000000..f4065c0 --- /dev/null +++ b/docs/guide-ja/assets-setup.md @@ -0,0 +1,176 @@ +アセットのセットアップ +====================== + +Bootstrap エクステンションは、アセットのインストールについて、[Bower](http://bower.io/) および/または [NPM](https://www.npmjs.org/) のパッケージに依存しています。 +Bootstrap パッケージを使う前に、これらのパッケージをあなたのプロジェクトにインストールする方法を決定しなければなりません。 + + +## asset-packagist レポジトリを使う + +[asset-packagist.org](https://asset-packagist.org) を Bootstrap アセットのソース・パッケージとしてセットアップすることが出来ます。 + +あなたのプロジェクトの `composer.json` に下記の行を追加して下さい。 + +```json +"repositories": [ + { + "type": "composer", + "url": "https://asset-packagist.org" + } +] +``` + +そして、アプリケーション構成で `@npm` と `@bower` を設定します。 + +```php +return [ + //... + 'aliases' => [ + '@bower' => '@vendor/bower-asset', + '@npm' => '@vendor/npm-asset', + ], + //... +]; +``` + + +## composer アセット・プラグインを使う + +次のコマンドを使って [composer アセット・プラグイン](https://github.com/francoispluchino/composer-asset-plugin/) をグローバルにインストールします。 + +``` +composer global require "fxp/composer-asset-plugin:^1.4.0" +``` + +Yii を使ってアセットを発行したい場合は、あなたのプロジェクトの `composer.json` に下記の行を追加して、 +インストールされるパッケージが置かれるディレクトリを設定します。 + +```json +"extra": { + "asset-installer-paths": { + "npm-asset-library": "vendor/npm", + "bower-asset-library": "vendor/bower" + } +} +``` + +これで、`composer install/update` コマンドを実行すると、Bootstrap のアセットを取得することが可能になります。 + +> Note: `fxp/composer-asset-plugin` は asset-packagist に比べると、`composer update` + コマンドを著しく遅くさせます。 + + +## Bower/NPM クライアントを直接に使う + +Bower または NPM のクライアントを直接に使って Bootstrap のアセットをインストールすることが出来ます。 +あなたのプロジェクトの `package.json` に次の行を追加して下さい。 + +```json +{ + ... + "dependencies": { + "bootstrap": "4.2.1", + ... + } + ... +} +``` + +あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。 + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + + +## CDN を使う + +[公式 CDN](https://www.bootstrapcdn.com) から Bootstrap アセットを使うことが出来ます。. + +あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。 + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + +'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルを CDN のリンクでオーバーライドします。 + +```php +return [ + 'components' => [ + 'assetManager' => [ + // CDN を使うようにバンドルをオーバーライド + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1', + 'css' => [ + 'css/bootstrap.min.css' + ], + ], + 'yii\bootstrap4\BootstrapPluginAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1', + 'js' => [ + 'js/bootstrap.bundle.min.js' + ], + ], + ], + ], + // ... + ], + // ... +]; +``` + + +## .sass ファイルからコンパイルする + +Bootstrap CSS ソースを直接にカスタマイズしたい場合、ソースの *.sass ファイルから CSS をコンパイルしたいと思うことがあるでしょう。 + +そのような場合は、Bootstrap アセットを Composer や Bower/NPM からインストールしても意味がありません。 +なぜなら、`vendor` ディレクトリ内のファイルは変更できないからです。 +Bootstrap アセットを手作業でダウンロードし、プロジェクト・ソース・コード内のどこか、 +例えば `assets/source/bootstrap` フォルダに置かなければなりません。 + +あなたのプロジェクトの `package.json` に次の行を追加して、Bootstrap アセットの冗長なインストールを防止します。 + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + +'assetManager' アプリケーション・コンポーネントを構成して、Bootstrap アセット・バンドルをオーバーライドします。 + +```php +return [ + 'components' => [ + 'assetManager' => [ + // バンドルをオーバーライドし、ローカル・プロジェクト・ファイルを使う + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap/dist', + 'css' => [ + YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css', + ], + ], + 'yii\bootstrap4\BootstrapPluginAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap/dist', + 'js' => [ + YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js', + ] + ], + ], + ], + // ... + ], + // ... +]; +``` + +Bootsrap のソース・ファイルを変更した後は、例えば `npm run dist` を使って、必ず[コンパイル](https://getbootstrap.com/docs/4.1/getting-started/build-tools/)して下さい。 diff --git a/docs/guide-ja/basic-usage.md b/docs/guide-ja/basic-usage.md new file mode 100644 index 0000000..4abc206 --- /dev/null +++ b/docs/guide-ja/basic-usage.md @@ -0,0 +1,17 @@ +基本的な使用方法 +================ + +Yii は bootstrap の基礎を PHP コードでラップすることをしていません。なぜなら、この場合の HTML コードがそれ自体として非常にシンプルだからです。 +bootstrap の基礎を使用することに関する詳細は、[bootstrap ドキュメント・ウェブ・サイト](http://getbootstrap.com/css/) で見ることが出来ます。 +それでも、Yii はあなたのページに bootstrap のアセットをインクルードするための便利な方法を提供しています。 +`@app/assets` ディレクトリに配置されている `AppAsset.php` に一行を加えるだけで大丈夫です。 + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap4\BootstrapAsset', // この行です +]; +``` + +Yii のアセットマネージャによって bootstrap を使うと、必要に応じて、bootstrap のリソースを最小化したり、 +あなた自身のリソースと結合したりすることが出来ます。 diff --git a/docs/guide-ja/helper-html.md b/docs/guide-ja/helper-html.md new file mode 100644 index 0000000..157d898 --- /dev/null +++ b/docs/guide-ja/helper-html.md @@ -0,0 +1,30 @@ +Html ヘルパ +=========== + +Bootstrap は、一貫性の高い多数の HTML 構文ないしはスケルトンを導入して、さまざまな視覚的効果の生成を可能にしています。 +このエクステンションによって提供されるウィジェットがカバーしているのは、その中の最も複雑なものだけです。 +残りのものは、直接に HTML 構文を使って、手作業で構築しなければなりません。 +ただし、いくつかの特別な Bootstrap マークアップについては、[[\yii\bootstrap4\Html]] によってカバーされています。 +[[\yii\bootstrap4\Html]] は通常の [[\yii\helpers\Html]] の拡張版であり、Bootstrap の要求に特化して、 +いくつかの便利なメソッドを提供するものです。例えば、 + + - `staticControl()` - フォームの "[static controls](https://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text)" のレンダリングを可能にする + +[[\yii\bootstrap4\Html]] は [[\yii\helpers\Html]] を継承しており、 +その代替物として使うことが出来ますので、ビュー・ファイルの中で両方を使う必要はありません。 + +例えば、 + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> 注意: [[\yii\bootstrap4\Html]] と [[\yii\helpers\Html]] を混同してはいけません。 + ビューの中でどちらのクラスを使っているのかに注意してください。 diff --git a/docs/guide-ja/installation.md b/docs/guide-ja/installation.md new file mode 100644 index 0000000..445eb9d --- /dev/null +++ b/docs/guide-ja/installation.md @@ -0,0 +1,19 @@ +インストール +============ + +## Composer パッケージを取得する + +このエクステンションをインストールするのに推奨される方法は [composer](http://getcomposer.org/download/) によるものです。 + +下記のコマンドを実行してください。 + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 +``` + +または、あなたの `composer.json` ファイルの `require` セクションに、 +``` +"yiisoft/yii2-bootstrap": "~1.0.0" +``` + +を追加してください。 diff --git a/docs/guide-ja/migrating-yii2-bootstrap.md b/docs/guide-ja/migrating-yii2-bootstrap.md new file mode 100644 index 0000000..920a581 --- /dev/null +++ b/docs/guide-ja/migrating-yii2-bootstrap.md @@ -0,0 +1,107 @@ +yii2-bootstrap からの移行 +========================= + +yii2-bootstrap4 は、Bootstrap 3 から Bootstrap 4 への移行ガイドに従って、yii-bootstrap プロジェクト全体を大きく書き換えたものです。 +最も注目すべき変更点を要約すると以下の通りです。 + +## 一般 + +* 名前空間は `yii\bootstrap` から `yii\bootstrap4` に変更 +* `bower` ではなく `npm` パッケージを使用 +* テーマ・アセットは廃止 +* `popper.js` は不要になった (bootstrap js バンドルによって供給される) + +## ウィジェット / クラス + +* [[yii\bootstrap\Collapse|Collapse]] の名前は [[yii\bootstrap4\Accordion|Accordion]] に変更 +* [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] は廃止 +* [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] を追加 ([[yii\widgets\Breadcrumbs]] の Bootstrap 4 による実装) +* [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] を追加 (https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar) + +### BaseHtml + +`icon` メソッドは削除されました。グリフアイコンがもうバンドルされておらず、このメソッドが無意味になったためです。 +代りに、[Font Awesome Widget](https://github.com/rmrevin/yii2-fontawesome) または +[Font Awesome Inline Widget](https://github.com/YiiRocks/yii2-fontawesome-inline) を使うことを検討して下さい。 + +### ActiveField + +以下のプロパティの名前が変りました。 +* `$checkboxTemplate` は `$checkTemplate` に変更。 +* `$horizontalCheckboxTemplate` は `$checkHorizontalTemplate` に変更。 +* `$horizontalRadioTemplate` は `$radioHorizontalTemplate` に変更。 + +プロパティ `$inlineCheckboxListTemplate` および `$inlineRadioListTemplate` は削除されました。`$checkEnclosedTemplate` と呼ばれる新しいテンプレートが追加されています。 +bootstrap 4 では、チェックボックスはラベルに包まれないのがデフォルトになりました。 + +### ActiveForm + +新しい定数 [[yii\bootstrap4\ActiveForm::LAYOUT_DEFAULT]]、[[yii\bootstrap4\ActiveForm::LAYOUT_HORIZONTAL]] +および [[yii\bootstrap4\ActiveForm::LAYOUT_INLINE]] が追加されました。 +これらによって、レイアウトの選択が容易になり、文字列がいつ何時変っても、リファクタリングが安全に出来るようになることが期待されます。 + +### Breadcrumbs + +このクラスは bootstrap の要求を満たす正しいクラスと属性でパンくずリストをレンダリングするために導入されました。 +これは [[yii\widgets\Breadcrumbs]] と完全に互換です。 + +### ButtonDropdown + +`$direction` という新しいプロパティが導入され、メニューを開く方向を選ぶ（例えばボタンの右側に開く）ことが可能になりました。 +方向の選択をより容易にするために、[[yii\bootstrap4\ButtonDropdown::DIRECTION_DOWN]]、[[yii\bootstrap4\ButtonDropdown::DIRECTION_LEFT]]、 +[[yii\bootstrap4\ButtonDropdown::DIRECTION_RIGHT]] そして +[[yii\bootstrap4\ButtonDropdown::DIRECTION_UP]] という定数が導入されました。 +`$renderContainer` という新しいプロパティもあります。これが `false` に設定されると、ドロップダウンを包む div は描画されません。 + +次のプロパティは名前が変更されました。 +* `$containerOptions` は `$options` に変更。 +* `$options` はe `$buttonOptions` に変更。 + +### ButtonToolbar + +この新しいクラスを使うとボタン・ツールバーを描画することが出来ます。 +詳細は https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar を参照して下さい。 + +### Carousel + +スライド間のアニメーションを制御する `$crossfade` というプロパティが導入されました。 +これが `true` に設定されると、スライド・アニメーションの代りにクロスフェイド・アニメーションが実行されます。 + +### LinkPager + +この新しいクラスは [[yii\widgets\LinkPager]] のブートストラップ・バージョンです。 +詳細は https://getbootstrap.com/docs/4.3/components/pagination/ を参照して下さい。 + +### Modal + + +次のプロパティの名前が変りました。 +* `$header` は `$title` に変更。 +* `$headerOptions` は `$titleOptions` に変更。 + +もう `

+ +これらのウィジェットを使うと、bootstrap CSS クラスの使用を要求する bootstrap コンポーネントのための HTML を素速く構成することが出来ます。特定のコンポーネントのデフォルトの CSS クラスはウィジェットによって自動的に追加されます。 +そして、あなたがカスタマイズしたいであろうオプションの CSS クラスは、通常は、ウィジェットのプロパティによってサポートされています。 + +例えば、[[yii\bootstrap4\Button::options]] を使って、ボタンの外見をカスタマイズすることが出来ます。 +このとき、ボタンに要求される 'btn' クラスは自動的に追加されますので、あなたが心配をする必要はありません。 +特定のボタン・クラスを指定するだけで十分です。 + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // "btn btn-primary" というクラスを生成 +]); +``` + +しかしながら、時として、デフォルトのクラスを別のクラスで置き換える必要がある場合があります。 +例えば、[[yii\bootstrap4\ButtonGroup]] は、コンテナの div に 'btn-group' をデフォルトで使用しますが、 +ボタンを垂直に並べるために 'btn-group-vertical' を代りに使いたいことがあるでしょう。 +単純に 'class' オプションを使うと、'btn-group-vertical' が 'btn-group' に追加されるだけで、正しくない結果が生成されることになります。 +ウィジェットのデフォルトのクラスをオーバーライドするためには、'class' オプションに配列形式を使用して、'widget' キーの下にカスタマイズしたクラスの定義を指定しなければなりません。 + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // 'btn-group' を 'btn-group-vertical' で置き換え + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` + +## Navbar ウィジェット + +Navbar ウィジェットには独特の癖があります。あなたは Navbar が折り畳まれるブレークポイントと +Navbar の全体的なスタイル (カラー・スキーム) を指定しなければなりません。 + +カラー・スキームと折り畳みのブレークポイントは CSS のクラスで変更することが出来ます。指定されない場合は、カラー・スキームは `navbar-light bg-light`、 +ブレークポイントは`navbar-expand-lg` がデフォルトとして採用されます。詳細な情報は、[Bootstrap documentation](https://getbootstrap.com/docs/4.2/components/navbar/) を参照して下さい。 + +```php +Navbar::begin([ + 'options' => [ + 'class' => ['navbar-dark', 'bg-dark', 'navbar-expand-md'] + ] +]); + [...] +Navbar::end(); +``` + +モバイル向けナビゲーションでブランド (アイコン) とトグル・ボタンの位置を入れ替えたい場合は、次のようにすることが出来ます。 + +```php +Navbar::begin([ + 'brandOptions' => [ + 'class' => ['order-1'] + ], + 'togglerOptions' => [ + 'class' => ['order-0'] + ] +]); + [...] +Navbar::end(); +``` diff --git a/docs/guide-pt-BR/README.md b/docs/guide-pt-BR/README.md new file mode 100644 index 0000000..b38db8d --- /dev/null +++ b/docs/guide-pt-BR/README.md @@ -0,0 +1,29 @@ +Extenção Twitter Bootstrap para Yii 2 +===================================== + +A extensão inclui suporte para marcação e componentes ao framework [Bootstrap 4](http://getbootstrap.com/) +(também conhecido como "Bootstrap Twitter"). Bootstrap é um excelente framework ágil, que pode acelerar bastante o +do lado do cliente do seu processo de desenvolvimento. + +O núcleo do bootstrap é representado por duas partes: + +- Noções básicas de estilo CSS, tais como um sistema de rede layout, tipografia, classes auxiliares, e os utilitários de resposta. +- Componentes prontos para usar, tais como formulários, menus, paginação, caixas de modais, guias, etc. + +Iniciando +--------------- + +* [Instalação](installation.md) +* [uso Básico](basic-usage.md) + +Uso +----- + +* [Yii widgets](usage-widgets.md) +* [Html helper](helper-html.md) +* [Asset Bundles](asset-bundles.md) + +Tópicos Adicionais +----------------- + +* [Usando arquivos .sass do Bootstrap diretamente](topics-sass.md) diff --git a/docs/guide-pt-BR/asset-bundles.md b/docs/guide-pt-BR/asset-bundles.md new file mode 100644 index 0000000..64bbf3a --- /dev/null +++ b/docs/guide-pt-BR/asset-bundles.md @@ -0,0 +1,14 @@ +Asset Bundles +============= + +Bootstrap é uma solução complexa para front-end, o qual inclue CSS, JavaScript, fontes e assim por diante. +A fim de permitir que você tenha controle mais flexível sobre componentes Bootstrap , esta extensão fornece vários asset bundles. Eles são: + +- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - Contém apenas arquivos CSS. +- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - Depende de [[yii\bootstrap4\BootstrapAsset]], contem os arquivos JavaScript. + +Necessidades de aplicações específicas podem exigir utilização de pacotes diferentes ( ou a combinação bundle). +Se você precisa apenas de estilos CSS, [[yii\bootstrap4\BootstrapAsset]] será o suficiente para você. No entanto , se +você quiser usar Bootstrap JavaScript, você precisa se registrar [[yii\bootstrap4\BootstrapPluginAsset]]. + +> Tip: a maioria dos widgets [[yii\bootstrap4\BootstrapPluginAsset]] registram automaticamente. diff --git a/docs/guide-pt-BR/basic-usage.md b/docs/guide-pt-BR/basic-usage.md new file mode 100644 index 0000000..86051cb --- /dev/null +++ b/docs/guide-pt-BR/basic-usage.md @@ -0,0 +1,17 @@ +Uso Básico +=========== + +O Yii Não registra os componentes básicos do bootstrap em código PHP visto que esse HTML é muito simples, por si só. +Você pode encontrar detalhes sobre como usar o básico no [site documentação do Bootstrap] (http://getbootstrap.com/css/). O Yii ainda fornece uma +forma conveniente para incluir assets de bootstrap em suas páginas com uma única linha adicionado ao arquivo `AppAsset.php` localizado no seu +diretório `@app/assets`: + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap4\BootstrapAsset', // this line +]; +``` + +Usando bootstrap através Yii assets lhe permite minimizar os seus recursos/fontes e combinar com seus próprios recursos/fontes quando +necessário. diff --git a/docs/guide-pt-BR/helper-html.md b/docs/guide-pt-BR/helper-html.md new file mode 100644 index 0000000..2ada0b6 --- /dev/null +++ b/docs/guide-pt-BR/helper-html.md @@ -0,0 +1,18 @@ +Bootstrap introduz construções HTML mais consistentes e esqueletos, que permitem a criação de diferentes efeitos visuais. Apenas o mais complexos deles são cobertos por os widgets fornecidos com esta extensão . O restante deverá ser escrito manualmente usando escrita HTML direta. No entanto, vários casos especiais de marcação Bootstrap são cobertos pelo helper [[\yii\bootstrap4\Html]]. [[\yii\bootstrap4\Html]] é uma versão melhorada de [[\yii\helpers\Html]] dedicada à quem precisa do Bootstrap. Ele fornece vários métodos úteis : + + icon() - allows rendering of Glyphicon icons + staticControl() - allows rendering of form "static controls" + +[[\yii\bootstrap4\Html]] herda toda funcionalidade disponível em [[\yii\helpers\Html]] e pode ser usado como um substituto , para que você não precisa de ambos dentro de seus arquivos de views . Por exemplo: + + + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> + + Atenção: Não confunda [[\yii\bootstrap4\Html]] e [[\yii\helpers\Html]], tenha o cuidado de que classe você está usando dentro de seus arquivos de views. diff --git a/docs/guide-pt-BR/installation.md b/docs/guide-pt-BR/installation.md new file mode 100644 index 0000000..35c6a62 --- /dev/null +++ b/docs/guide-pt-BR/installation.md @@ -0,0 +1,20 @@ +Instalação +============ + +## Instalando através do composer + +A maneira recomendada para instalar esta extensão é através do [composer](http://getcomposer.org/download/). + +Então rode + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 +``` + +Ou Adicione + +``` +"yiisoft/yii2-bootstrap": "~1.0.0" +``` + +na sessão de requirimentos do seu arquivo `composer.json`. diff --git a/docs/guide-pt-BR/topics-sass.md b/docs/guide-pt-BR/topics-sass.md new file mode 100644 index 0000000..659fbe3 --- /dev/null +++ b/docs/guide-pt-BR/topics-sass.md @@ -0,0 +1,18 @@ +Usando arquivos .sass diretamente do Bootstrap +=========================================== + +Se você quiser incluir o [css do Bootstrap diretamente em seus arquivos sass] (http://getbootstrap.com/getting-started/#customizing) +talvez você precise desativar os arquivos css do Bootstrap originais que são carregados. +Você pode fazer isso definindo a propriedade css do [[yii \ inicialização \ BootstrapAsset | BootstrapAsset]] e deixe estar vazio. +Para isso, você precisa configurar o `assetManager` [application component](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) +do seguinte modo: + +```php + 'assetManager' => [ + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'css' => [], + ] + ] + ] +``` diff --git a/docs/guide-pt-BR/usage-widgets.md b/docs/guide-pt-BR/usage-widgets.md new file mode 100644 index 0000000..fed13ae --- /dev/null +++ b/docs/guide-pt-BR/usage-widgets.md @@ -0,0 +1,23 @@ +Yii widgets +=========== + +A maioria dos componentes complexos do bootstrap são envolvidos em widgets Yii para permitir uma sintaxe mais robusta e integrar-se com +características estruturais do framework. Todos widgets pertencem ao namespace `\yii\bootstrap4`: + +- [[yii\bootstrap4\Accordion|Accordion]] +- [[yii\bootstrap4\ActiveField|ActiveField]] +- [[yii\bootstrap4\ActiveForm|ActiveForm]] +- [[yii\bootstrap4\Alert|Alert]] +- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] +- [[yii\bootstrap4\Button|Button]] +- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] +- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] +- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] +- [[yii\bootstrap4\Carousel|Carousel]] +- [[yii\bootstrap4\Dropdown|Dropdown]] +- [[yii\bootstrap4\Modal|Modal]] +- [[yii\bootstrap4\Nav|Nav]] +- [[yii\bootstrap4\NavBar|NavBar]] +- [[yii\bootstrap4\Progress|Progress]] +- [[yii\bootstrap4\Tabs|Tabs]] +- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] diff --git a/docs/guide-ru/README.md b/docs/guide-ru/README.md new file mode 100644 index 0000000..e077ef1 --- /dev/null +++ b/docs/guide-ru/README.md @@ -0,0 +1,27 @@ +Расширение Twitter Bootstrap для Yii 2 +====================================== + +Расширение включает поддержку разметки и компонентов фреймворка [Bootstrap 4](http://getbootstrap.com/) (также известного как "Twitter Bootstrap"). Bootstrap является прекрасным, отзывчивым фреймворком, который может значительно ускорить процесс разработки на стороне клиента. + +Ядро Bootstrap представлено двумя частями: + +- CSS основа, такая как система разметки, типографика, вспомогательные классы, и утилиты адаптивности. +- Готовые к использованию компоненты, такие как формы, меню, нумерация страниц, модальные окна, вкладки и т.д. + +Как начать +---------- + +* [Установка](installation.md) +* [Основы использования](basic-usage.md) + +Использование +------------ + +* [Виджеты Yii](usage-widgets.md) +* [Класс-помощник Html](helper-html.md) +* [Asset Bundles](asset-bundles.md) + +Дополнительно +------------- + +* [Использование .sass файлов Bootstrap напрямую](topics-sass.md) diff --git a/docs/guide-ru/asset-bundles.md b/docs/guide-ru/asset-bundles.md new file mode 100644 index 0000000..3266134 --- /dev/null +++ b/docs/guide-ru/asset-bundles.md @@ -0,0 +1,11 @@ +Asset Bundles +============= + +Bootstrap - это комплексное front-end решение, включающее CSS, JavaScript, шрифты и т.д. Для того чтобы обеспечить гибкий контроль над компонентами Bootstrap, расширение предоставляет несколько Asset Bundles. Вот они: + +- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - содержит CSS файлы. +- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - зависит от [[yii\bootstrap4\BootstrapAsset]], содержащий javascript файлы. + +Конкретные приложения могут потребовать различного использования. Если вам нужны только CSS-стили, то пакета [[yii\bootstrap4\BootstrapAsset]] будет достаточно. Тем не менее, если вы хотите использовать Bootstrap JavaScript, вам необходимо зарегистрировать [[yii\bootstrap4\BootstrapPluginAsset]]. + +> Tip: большинство виджетов регистрируются с помощью [[yii\bootstrap4\BootstrapPluginAsset]] автоматически. diff --git a/docs/guide-ru/basic-usage.md b/docs/guide-ru/basic-usage.md new file mode 100644 index 0000000..c8a5859 --- /dev/null +++ b/docs/guide-ru/basic-usage.md @@ -0,0 +1,13 @@ +Базовое использование +=========== + +Yii не оборачивает базовый Bootstrap в PHP код, поскольку HTML, в этом случае, прост сам по себе. Вы можете найти подробную информацию о возможностях Bootstrap в [официальной документации](http://getbootstrap.com/css/). Тем не менее, Yii обеспечивает удобный способ включения Bootstrap assets на страницах вашего приложения добавлением одной строки в файл `AppAsset.php`, расположенный в директории `@app/assets`: + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap4\BootstrapAsset', // подключение Bootstrap +]; +``` + +Использование загрузки Bootstrap через Yii Asset Manager позволяет минимизировать ресурсы и объединить с вашими собственными ресурсами, когда это будет необходимо. diff --git a/docs/guide-ru/helper-html.md b/docs/guide-ru/helper-html.md new file mode 100644 index 0000000..e5cfb69 --- /dev/null +++ b/docs/guide-ru/helper-html.md @@ -0,0 +1,22 @@ +Класс-помощник Html +=================== + +Bootstrap предоставляет множество последовательных HTML конструкции и каркасов, которые позволяют создавать различные визуальные эффекты. Только самые сложные из них передставлены виджетами, поставляемые с данным расширением. Остальные должны быть собраны вручную, используя HTML напрямую. Тем не менее, несколько специальных Bootstrap разметок предоставляются в помощнике [[\yii\bootstrap4\Html]]. [[\yii\bootstrap4\Html]] является расширенной версией [[\yii\helpers\Html]], удовлетворяющей потребности Bootstrap. Он предоставляет несколько полезных методов: + + - `icon()` - позволяет отображать иконки Glyphicon + - `staticControl()` - позволяет отображать "статические элементы управления" формы + +[[\yii\bootstrap4\Html]] наследует все функциональные возможности, доступные в [[\yii\helpers\Html]], и может быть использован в качестве замены в ваших представлениях. Например: + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> Attention: не путайте [[\yii\bootstrap4\Html]] и [[\yii\helpers\Html]]! Следите за тем какой класс вы используете в своих представлениях. diff --git a/docs/guide-ru/installation.md b/docs/guide-ru/installation.md new file mode 100644 index 0000000..c1884ea --- /dev/null +++ b/docs/guide-ru/installation.md @@ -0,0 +1,20 @@ +Установка +========= + +## Получение расширения через Composer + +Предпочтительный способ установки расширения - через [Composer](http://getcomposer.org/download/). + +Для этого запустите команду + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 +``` + +или добавьте + +``` +"yiisoft/yii2-bootstrap": "~1.0.0" +``` + +в секцию **require** вашего `composer.json`. diff --git a/docs/guide-ru/topics-sass.md b/docs/guide-ru/topics-sass.md new file mode 100644 index 0000000..494ac11 --- /dev/null +++ b/docs/guide-ru/topics-sass.md @@ -0,0 +1,14 @@ +Использование .sass файлов Bootstrap напрямую +============================================= + +Если вы хотите включить [Bootstrap CSS непосредственно в ваши sass-файлы](http://getbootstrap.com/getting-started/#customizing), вам может понадобиться исключить исходные css-файлы Bootstrap из загрузки. Вы можете сделать это, установив пустым свойство `css` пакета [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]]. Для этого вам необходимо настроить [компонент приложения](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) `assetManager` следующим образом: + +```php + 'assetManager' => [ + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'css' => [], // исключение исходных css-файлов из загрузки + ] + ] + ] +``` diff --git a/docs/guide-ru/usage-widgets.md b/docs/guide-ru/usage-widgets.md new file mode 100644 index 0000000..5eceb28 --- /dev/null +++ b/docs/guide-ru/usage-widgets.md @@ -0,0 +1,50 @@ +Виджеты Yii +=========== + +Большинство сложных Bootstrap компонентов обернуты в виджеты Yii, чтобы обеспечить более надежный синтаксис и интеграцию с особенностями фреймворка. Все виджеты относятся к пространству имен `\yii\bootstrap4`: + +- [[yii\bootstrap4\Accordion|Accordion]] +- [[yii\bootstrap4\ActiveField|ActiveField]] +- [[yii\bootstrap4\ActiveForm|ActiveForm]] +- [[yii\bootstrap4\Alert|Alert]] +- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] +- [[yii\bootstrap4\Button|Button]] +- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] +- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] +- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] +- [[yii\bootstrap4\Carousel|Carousel]] +- [[yii\bootstrap4\Dropdown|Dropdown]] +- [[yii\bootstrap4\Modal|Modal]] +- [[yii\bootstrap4\Nav|Nav]] +- [[yii\bootstrap4\NavBar|NavBar]] +- [[yii\bootstrap4\Progress|Progress]] +- [[yii\bootstrap4\Tabs|Tabs]] +- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] + + +## Настройка CSS классов виджетов + +Виджеты позволяют быстро создавать HTML Bootstrap компоненты, которые требуют CSS классы Bootstrap. Классы по умолчанию, для конкретного компонента, будут добавлены автоматически виджетом, и необязательные классы, которые вы можете настроить, как правило, поддерживаются через свойства виджета. + +Например, вы можете использовать [[yii\bootstrap4\Button::options]] чтобы настроить внешний вид кнопки. Класс `btn`, который требуется для кнопки, будет добавлен автоматически. Все, что вам нужно, это указать конкретный класс кнопки: + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // создаст класс "btn btn-primary" +]); +``` + +Тем не менее, иногда вам может понадобиться заменить классы по умолчанию альтернативными. Например, виджет [[yii\bootstrap4\ButtonGroup]] использует класс `btn-group` для контейнера `div` по умолчанию, но вам, возможно, придётся использовать `btn-group-vertical` чтобы выровнять кнопки по вертикали. Добавление `btn-group-vertical` в параметр `class` приведет к неправильному результату. Для того, чтобы переопределить классы виджета по умолчанию, необходимо указать параметр `class` как массив, содержащий определение класса, настроенное в ключе `widget`: + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical' + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` diff --git a/docs/guide-uk/README.md b/docs/guide-uk/README.md new file mode 100644 index 0000000..d6d5e4f --- /dev/null +++ b/docs/guide-uk/README.md @@ -0,0 +1,27 @@ +Розширення Twitter Bootstrap для Yii 2 +====================================== + +З коробки Yii включає підтримку розмітки [Bootstrap 4](http://getbootstrap.com/) та компонентів фреймворку +(також відомий як "Twitter Bootstrap"). Bootstrap є чудовим, адаптивним фреймворком, який може значно прискорити +процес розробки клієнтської частини сайту. + +Ядро Bootstrap представлене двома частинами: + +- Основи CSS, такі як система макету сітки, типографія, допоміжні класи і адаптивні утиліти. +- Готові до використання компоненти, такі як форми, меню, нумерація сторінок (pagination), модальні вікна, вкладки (tabs) і т.д. + +Початок роботи +-------------- + +* [Встановлення](installation.md) +* [Основи використання](basic-usage.md) + +Використання +------------ + +* [Віджети Yii](usage-widgets.md) + +Додаткові теми +-------------- + +* [Використання .sass файлів в Bootstrap](topics-sass.md) diff --git a/docs/guide-uk/basic-usage.md b/docs/guide-uk/basic-usage.md new file mode 100644 index 0000000..710e0d6 --- /dev/null +++ b/docs/guide-uk/basic-usage.md @@ -0,0 +1,16 @@ +Основи використання +=================== + +Yii не загортає основи bootstrap в код PHP, оскільки в цьому випадку, сам по собі HTML є дуже простим. +Ви можете знайти детальну інформацію щодо використання основ на [сайті документації bootstrap](http://getbootstrap.com/css/). +Проте Yii забезпечує зручний спосіб підключення ресурсів bootstrap до ваших сторінок за допомогою додання всього одного рядка до файлу +`AppAsset.php`, розташованого в каталозі `@app/assets`: + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap4\BootstrapAsset', // цей рядок +]; +``` + +Використання bootstrap через менеджер ресурсів Yii дозволяє мінімізувати свої ресурси і обʼєднати із вашими власними ресурсами коли це необхідно. diff --git a/docs/guide-uk/installation.md b/docs/guide-uk/installation.md new file mode 100644 index 0000000..906a3ea --- /dev/null +++ b/docs/guide-uk/installation.md @@ -0,0 +1,20 @@ +Встановлення +============ + +## Отримання пакету Composer + +Кращим способом для встановлення даного розширення є встановлення через [composer](http://getcomposer.org/download/). + +Запустіть + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 +``` + +або додайте + +``` +"yiisoft/yii2-bootstrap": "~1.0.0" +``` + +до потрібного розділу вашого файлу `composer.json`. diff --git a/docs/guide-uk/topics-sass.md b/docs/guide-uk/topics-sass.md new file mode 100644 index 0000000..420bbc6 --- /dev/null +++ b/docs/guide-uk/topics-sass.md @@ -0,0 +1,18 @@ +Використання .sass файлів в Bootstrap +===================================== + +Якщо ви хочете включити [CSS Bootstrap напряму до ваших sass файлів](http://getbootstrap.com/getting-started/#customizing) +вам необхідно відключити завантаження оригінальних css файлів bootstrap. +Ви можете зробити це, встановивши CSS властивість [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] порожньою. +Для цього вам необхідно налаштувати [компонент додатка](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) +`assetManager` наступним чином: + +```php + 'assetManager' => [ + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'css' => [], + ] + ] + ] +``` diff --git a/docs/guide-uk/usage-widgets.md b/docs/guide-uk/usage-widgets.md new file mode 100644 index 0000000..7b821f1 --- /dev/null +++ b/docs/guide-uk/usage-widgets.md @@ -0,0 +1,23 @@ +Віджети Yii +=========== + +Найбільш складні компоненти bootstrap загорнуті в віджети Yii, щоб забезпечити більш надійний синтаксис +та інтегрувати його з можливостями фреймворку. Всі віджети належать до простору імен `\yii\bootstrap4`: + +- [[yii\bootstrap4\Accordion|Accordion]] +- [[yii\bootstrap4\ActiveField|ActiveField]] +- [[yii\bootstrap4\ActiveForm|ActiveForm]] +- [[yii\bootstrap4\Alert|Alert]] +- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] +- [[yii\bootstrap4\Button|Button]] +- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] +- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] +- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] +- [[yii\bootstrap4\Carousel|Carousel]] +- [[yii\bootstrap4\Dropdown|Dropdown]] +- [[yii\bootstrap4\Modal|Modal]] +- [[yii\bootstrap4\Nav|Nav]] +- [[yii\bootstrap4\NavBar|NavBar]] +- [[yii\bootstrap4\Progress|Progress]] +- [[yii\bootstrap4\Tabs|Tabs]] +- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] diff --git a/docs/guide-zh-CN/README.md b/docs/guide-zh-CN/README.md new file mode 100644 index 0000000..52deca0 --- /dev/null +++ b/docs/guide-zh-CN/README.md @@ -0,0 +1,29 @@ +基于Yii 2 的 Twitter Bootstrap 扩展 +===================================== + +扩展包括对 [Bootstrap 3](http://getbootstrap.com/) 标记和组件框架的支持 +（也称为“Twitter Bootstrap”）。 Bootstrap是一个优秀的，响应式框架，可以大大加快 +客户端的开发过程。 + +Bootstrap的核心由两部分组成： + +- 基础CSS样式，如栅格化布局，排版，帮助类和响应式工具。 +- 开箱即用的组件，如表单，菜单，分页，模态框，标签等。 + +起步 +--------------- + +* [安装](installation.md) +* [基本用法](basic-usage.md) + +使用 +----- + +* [Yii 小部件](usage-widgets.md) +* [Html 助手](helper-html.md) +* [Asset Bundles（资源包）](asset-bundles.md) + +其他 +----------------- + +* [直接使用Bootstrap的.sass文件](topics-sass.md) diff --git a/docs/guide-zh-CN/asset-bundles.md b/docs/guide-zh-CN/asset-bundles.md new file mode 100644 index 0000000..3a8502a --- /dev/null +++ b/docs/guide-zh-CN/asset-bundles.md @@ -0,0 +1,14 @@ +资源包 +============= + +Bootstrap是一个复杂的前端解决方案，其中包括 CSS ， JavaScript ，字体等。 +为了灵活的控制 Bootstrap 组件，此扩展提供了多个资源包。 +如下: + +- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - 只包含主要的 CSS 文件. +- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - 包含 javascript 文件, 依赖于 [[yii\bootstrap4\BootstrapAsset]] . + +特定的应用可能需要加载不同的资源包，（或者资源包组合）. +如果只需要 CSS 文件, 引入 [[yii\bootstrap4\BootstrapAsset]] 即可. 但是, 如果需要使用 Bootstrap 的 JavaScript, 则需要引入 [[yii\bootstrap4\BootstrapPluginAsset]]. + +> 提示：大多数小部件会自动注册到 [[yii\bootstrap4\BootstrapPluginAsset]] 。 diff --git a/docs/guide-zh-CN/basic-usage.md b/docs/guide-zh-CN/basic-usage.md new file mode 100644 index 0000000..dd10c81 --- /dev/null +++ b/docs/guide-zh-CN/basic-usage.md @@ -0,0 +1,13 @@ +使用 +=========== + +Yii不会将 bootstrap 合并到PHP代码中，因为HTML本身是非常简单的。猛击 [bootstrap 文档页](http://getbootstrap.com/css/) 查看如何使用 bootstrap. 但是 Yii 还是提供了在框架中更为方便的管理和使用 bootstrap的方式，在 `@app/assets` 路径下的 `AppAsset.php` 文件中，添加如下代码即可： + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap4\BootstrapAsset', // this line +]; +``` + +通过 Yii 的资源管理器（asset manager）引入 bootstrap ，可最小化的引入 bootstrap 并在需要时合并自定义资源文件一起使用。 \ No newline at end of file diff --git a/docs/guide-zh-CN/helper-html.md b/docs/guide-zh-CN/helper-html.md new file mode 100644 index 0000000..ab0423f --- /dev/null +++ b/docs/guide-zh-CN/helper-html.md @@ -0,0 +1,27 @@ +Html 助手 +=========== + +Bootstrap 引入了许多一致的 HTML 结构和骨架，允许创建不同的视觉效果。 +只有最复杂的部分由此扩展提供的小部件覆盖。 其余应使用直接 HTML 手动组合。 +但是, 有些特殊的 Bootstrap 标签被 [[\yii\bootstrap4\Html]] 重载. +[[\yii\bootstrap4\Html]] 是基于 Bootstrap 的 [[\yii\helpers\Html]] 增强版. +它提供了很多实用的方法，例如: + + - `icon()` - 生成Glyphicon图标 + - `staticControl()` - 生成表单静态组件 "static controls" + +[[\yii\bootstrap4\Html]] 继承了 [[\yii\helpers\Html]] 的所有功能，所以不需要在视图文件中同时引入这两个文件，如果需要，仅使用 [[\yii\bootstrap4\Html]] 即可. +例如: + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> 注意: 不要混淆 [[\yii\bootstrap4\Html]] 和 [[\yii\helpers\Html]], 一定注意你在视图中引入和使用的类. \ No newline at end of file diff --git a/docs/guide-zh-CN/installation.md b/docs/guide-zh-CN/installation.md new file mode 100644 index 0000000..159d198 --- /dev/null +++ b/docs/guide-zh-CN/installation.md @@ -0,0 +1,18 @@ +安装 +============ + +## 获取 Composer 包 + +安装此扩展的首选方式是通过 [composer](http://getcomposer.org/download/). + +直接运行 + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 +``` + +或者在项目目录的 `composer.json` 文件中添加如下代码 + +``` +"yiisoft/yii2-bootstrap": "~1.0.0" +``` diff --git a/docs/guide-zh-CN/topics-sass.md b/docs/guide-zh-CN/topics-sass.md new file mode 100644 index 0000000..5825103 --- /dev/null +++ b/docs/guide-zh-CN/topics-sass.md @@ -0,0 +1,17 @@ +直接使用Bootstrap的.sass文件 +======================================= + +如果引入 [直接使用Bootstrap的.sass文件](http://getbootstrap.com/getting-started/#customizing) +则需要禁用原始加载的 css 文件. +通过设置 [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] 的 css 属性为空即可. +为此，需要配置 `assetManager` [应用组件](https://github.com/yiisoft/yii2/blob/master/docs/guide/structure-application-components.md) 为如下: + +```php + 'assetManager' => [ + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'css' => [], + ] + ] + ] +``` diff --git a/docs/guide-zh-CN/usage-widgets.md b/docs/guide-zh-CN/usage-widgets.md new file mode 100644 index 0000000..775fe8e --- /dev/null +++ b/docs/guide-zh-CN/usage-widgets.md @@ -0,0 +1,54 @@ +Yii 小部件 +=========== + +大多数复杂的 bootstrap 组件被包装到 Yii 小部件中，以允许更强大的语法并与框架特性集成。 所有小部件都在命名空间 `\yii\bootstrap4` 下： + +- [[yii\bootstrap4\Accordion|Accordion]] +- [[yii\bootstrap4\ActiveField|ActiveField]] +- [[yii\bootstrap4\ActiveForm|ActiveForm]] +- [[yii\bootstrap4\Alert|Alert]] +- [[yii\bootstrap4\Breadcrumbs|Breadcrumbs]] +- [[yii\bootstrap4\Button|Button]] +- [[yii\bootstrap4\ButtonDropdown|ButtonDropdown]] +- [[yii\bootstrap4\ButtonGroup|ButtonGroup]] +- [[yii\bootstrap4\ButtonToolbar|ButtonToolbar]] +- [[yii\bootstrap4\Carousel|Carousel]] +- [[yii\bootstrap4\Dropdown|Dropdown]] +- [[yii\bootstrap4\Modal|Modal]] +- [[yii\bootstrap4\Nav|Nav]] +- [[yii\bootstrap4\NavBar|NavBar]] +- [[yii\bootstrap4\Progress|Progress]] +- [[yii\bootstrap4\Tabs|Tabs]] +- [[yii\bootstrap4\ToggleButtonGroup|ToggleButtonGroup]] + +## 自定义小部件CSS类 + +这些小部件可以快速构建基于 bootstrap CSS 样式的 bootstrap 组件，并直接生成 HTML 代码。 +特定组件的默认样式是自动添加的，也可以通过修改部件属性添加自定义样式类。 + +例如, 使用 [[yii\bootstrap4\Button::options]] 创建按钮。 +按钮中的 `btn` 样式将会被自动添加。只要再添加自己所需的按钮样式即可： + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // produces class "btn btn-primary" +]); +``` + +但是，有的时候需要将默认样式替换为自定义样式。 +例如, 小部件 [[yii\bootstrap4\ButtonGroup]] 默认使用 'btn-group' 类作为 div 容器的默认样式，但是我们希望使用 'btn-group-vertical' 作为默认样式以实现按钮组的垂直居中。 +直接在 'class' 选项中添加 'btn-group-vertical' 是替换不了 'btn-group' 的。 +为了重载组件的默认样式，需要在 'class' 选项中的 'widget' 选项中定义即可: + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical' + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` diff --git a/docs/guide/README.md b/docs/guide/README.md new file mode 100644 index 0000000..eb273b2 --- /dev/null +++ b/docs/guide/README.md @@ -0,0 +1,31 @@ +Twitter Bootstrap Extension for Yii 2 +===================================== + +The extension includes support for the [Bootstrap 5](http://getbootstrap.com/) markup and components framework +(also known as "Twitter Bootstrap"). Bootstrap is an excellent, responsive framework that can greatly speed up the +client-side of your development process. + +The core of Bootstrap is represented by two parts: + +- CSS basics, such as a grid layout system, typography, helper classes, and responsive utilities. +- Ready to use components, such as forms, menus, pagination, modal boxes, tabs etc. + +Getting Started +--------------- + +* [Installation](installation.md) +* [Assets Setup](assets-setup.md) +* [Basic Usage](basic-usage.md) + +Usage +----- + +* [Yii widgets](usage-widgets.md) +* [Html helper](helper-html.md) +* [Asset Bundles](asset-bundles.md) + +Additional topics +----------------- + +* [Using the .sass files of Bootstrap directly](topics-sass.md) +* [Migrating from yii2-bootstrap](migrating-yii2-bootstrap.md) diff --git a/docs/guide/asset-bundles.md b/docs/guide/asset-bundles.md new file mode 100644 index 0000000..2789aed --- /dev/null +++ b/docs/guide/asset-bundles.md @@ -0,0 +1,16 @@ +Asset Bundles +============= + +Bootstrap is a complex front-end solution, which includes CSS, JavaScript, fonts and so on. +In order to allow you the most flexible control over Bootstrap components, this extension provides several asset bundles. +They are: + +- [[yii\bootstrap4\BootstrapAsset|BootstrapAsset]] - contains only the main CSS files. +- [[yii\bootstrap4\BootstrapPluginAsset|BootstrapPluginAsset]] - depends on [[yii\bootstrap4\BootstrapAsset]], contains the javascript files. + +Particular application needs may require different bundle (or bundle combination) usage. +If you only need CSS styles, [[yii\bootstrap4\BootstrapAsset]] will be enough for you. However, if +you intend to use Bootstrap JavaScript, you will need to register [[yii\bootstrap4\BootstrapPluginAsset]] +as well. + +> Tip: most of the widgets register [[yii\bootstrap4\BootstrapPluginAsset]] automatically. diff --git a/docs/guide/assets-setup.md b/docs/guide/assets-setup.md new file mode 100644 index 0000000..4496afd --- /dev/null +++ b/docs/guide/assets-setup.md @@ -0,0 +1,176 @@ +Assets Setup +============ + +This extensions relies on [Bower](http://bower.io/) and/or [NPM](https://www.npmjs.org/) packages for the asset installation. +Before using this package you should decide in which way you will install those packages in your project. + + +## Using asset-packagist repository + +You can setup [asset-packagist.org](https://asset-packagist.org) as package source for the Bootstrap assets. + +In the `composer.json` of your project, add the following lines: + +```json +"repositories": [ + { + "type": "composer", + "url": "https://asset-packagist.org" + } +] +``` + +Adjust `@npm` and `@bower` in you application configuration: + +```php +return [ + //... + 'aliases' => [ + '@bower' => '@vendor/bower-asset', + '@npm' => '@vendor/npm-asset', + ], + //... +]; +``` + + +## Using composer asset plugin + +Install [composer asset plugin](https://github.com/francoispluchino/composer-asset-plugin/) globally, using following command: + +``` +composer global require "fxp/composer-asset-plugin:^1.4.0" +``` + +Add the following lines to `composer.json` of your project to adjust directories where the installed packages +will be placed, if you want to publish them using Yii: + +```json +"extra": { + "asset-installer-paths": { + "npm-asset-library": "vendor/npm", + "bower-asset-library": "vendor/bower" + } +} +``` + +Then you can run composer install/update command to pick up Bootstrap assets. + +> Note: `fxp/composer-asset-plugin` significantly slows down the `composer update` command in comparison + to asset-packagist. + + +## Using Bower/NPM client directly + +You can install Bootstrap assets directly via Bower or NPM client. +In the `package.json` of your project, add the following lines: + +```json +{ + ... + "dependencies": { + "bootstrap": "4.2.1", + ... + } + ... +} +``` + +In the `composer.json` of your project, add the following lines in order to prevent redundant Bootstrap asset installation: + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + + +## Using CDN + +You may use Bootstrap assets from [official CDN](https://www.bootstrapcdn.com). + +In the `composer.json` of your project, add the following lines in order to prevent redundant Bootstrap asset installation: + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + +Configure 'assetManager' application component, overriding Bootstrap asset bundles with CDN links: + +```php +return [ + 'components' => [ + 'assetManager' => [ + // override bundles to use CDN : + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://stackpath.bootstrapcdn.com/bootstrap/4.2.1', + 'css' => [ + 'css/bootstrap.min.css' + ], + ], + 'yii\bootstrap4\BootstrapPluginAsset' => [ + 'sourcePath' => null, + 'baseUrl' => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1', + 'js' => [ + 'js/bootstrap.bundle.min.js' + ], + ], + ], + ], + // ... + ], + // ... +]; +``` + + +## Compiling from the .sass files + +If you want to customize the Bootstrap CSS source directly, you may want to compile it from source *.sass files. + +In such case installing Bootstrap assets from Composer or Bower/NPM makes no sense, since you can not modify files +inside 'vendor' directory. +You'll have to download Bootstrap assets manually and place them somewhere inside your project source code, +for example in the 'assets/source/bootstrap' folder. + +In the `composer.json` of your project, add the following lines in order to prevent redundant Bootstrap asset installation: + +```json +"replace": { + "npm-asset/bootstrap": ">=4.2.1" +}, +``` + +Configure 'assetManager' application component, overriding Bootstrap asset bundles: + +```php +return [ + 'components' => [ + 'assetManager' => [ + // override bundles to use local project files : + 'bundles' => [ + 'yii\bootstrap4\BootstrapAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap/dist', + 'css' => [ + YII_ENV_DEV ? 'css/bootstrap.css' : 'css/bootstrap.min.css', + ], + ], + 'yii\bootstrap4\BootstrapPluginAsset' => [ + 'sourcePath' => '@app/assets/source/bootstrap/dist', + 'js' => [ + YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js', + ] + ], + ], + ], + // ... + ], + // ... +]; +``` + +After you make changes to Bootstrap's source files, make sure to [compile them](https://getbootstrap.com/docs/4.1/getting-started/build-tools/), eg. using `npm run dist`. diff --git a/docs/guide/basic-usage.md b/docs/guide/basic-usage.md new file mode 100644 index 0000000..b4e606f --- /dev/null +++ b/docs/guide/basic-usage.md @@ -0,0 +1,17 @@ +Basic Usage +=========== + +Yii doesn't wrap the bootstrap basics into PHP code since HTML is very simple by itself in this case. You can find details +about using the basics at [bootstrap documentation website](http://getbootstrap.com/css/). Still Yii provides a +convenient way to include bootstrap assets in your pages with a single line added to `AppAsset.php` located in your +`@app/assets` directory: + +```php +public $depends = [ + 'yii\web\YiiAsset', + 'yii\bootstrap4\BootstrapAsset', // this line +]; +``` + +Using bootstrap through Yii asset manager allows you to minimize its resources and combine with your own resources when +needed. diff --git a/docs/guide/helper-html.md b/docs/guide/helper-html.md new file mode 100644 index 0000000..38e1fc8 --- /dev/null +++ b/docs/guide/helper-html.md @@ -0,0 +1,30 @@ +Html helper +=========== + +Bootstrap introduces many consistent HTML constructions and skeletons, which allow creating different visual effects. +Only the most complex of them are covered by the widgets provided with this extension. The rest should be composed manually +using direct HTML composition. +However, several special Bootstrap markup cases are covered by the [[\yii\bootstrap4\Html]] helper. +[[\yii\bootstrap4\Html]] is an enhanced version of the regular [[\yii\helpers\Html]] dedicated to the Bootstrap needs. +It provides some useful methods like: + + - `staticControl()` - allows rendering of form "[static controls](https://getbootstrap.com/docs/4.1/components/forms/#readonly-plain-text)" + +As [[\yii\bootstrap4\Html]] extends [[\yii\helpers\Html]], it can be used as a substitute, so you don't need them both +inside your view files. + +For example: + +```php + + Html::icon('approve') . Html::encode('Save & apply'), + 'encodeLabel' => false, + 'options' => ['class' => 'btn-primary'], +]); ?> +``` + +> Attention: do not confuse [[\yii\bootstrap4\Html]] and [[\yii\helpers\Html]], be careful of which class + you are using inside your views. diff --git a/docs/guide/installation.md b/docs/guide/installation.md new file mode 100644 index 0000000..e1e4c2d --- /dev/null +++ b/docs/guide/installation.md @@ -0,0 +1,20 @@ +Installation +============ + +## Getting Composer package + +The preferred way to install this extension is through [composer](http://getcomposer.org/download/). + +Either run + +``` +php composer.phar require --prefer-dist yiisoft/yii2-bootstrap4 +``` + +or add + +``` +"yiisoft/yii2-bootstrap4": "~1.0.0" +``` + +to the require section of your `composer.json` file. diff --git a/docs/guide/migrating-yii2-bootstrap.md b/docs/guide/migrating-yii2-bootstrap.md new file mode 100644 index 0000000..557c70b --- /dev/null +++ b/docs/guide/migrating-yii2-bootstrap.md @@ -0,0 +1,107 @@ +Migrating from yii2-bootstrap +============================= + +yii2-bootstrap5 is a major rewrite of the entire project (according Bootstrap 5 to Bootstrap 4 migration guide). +The most notable changes are summarized below: + +## General + +* The namespace is `yii\bootstrap5` instead of `yii\bootstrap4` +* `npm` package is used instead of `bower` +* There is no theme asset any more +* No `popper.js` is needed any more (gets delivered with bootstrap js bundle) + +## Widgets / Classes + +* [[yii\bootstrap\Collapse|Collapse]] was renamed to [[yii\bootstrap5\Accordion|Accordion]] +* [[yii\bootstrap\BootstrapThemeAsset|BootstrapThemeAsset]] was removed +* [[yii\bootstrap5\Breadcrumbs|Breadcrumbs]] was added (Bootstrap 5 implementation of [[yii\widgets\Breadcrumbs]]) +* [[yii\bootstrap5\ButtonToolbar|ButtonToolbar]] was added (https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar) + +### BaseHtml + +Removed method `icon`. Since there are no glyphicons bundled any more, this method makes no sense. Consider using +[Font Awesome Widget](https://github.com/rmrevin/yii2-fontawesome) or +[Font Awesome Inline Widget](https://github.com/YiiRocks/yii2-fontawesome-inline) as alternative. + +### ActiveField + +Following properties were renamed: +* `$checkboxTemplate` became `$checkTemplate`, +* `$horizontalCheckboxTemplate` became `$checkHorizontalTemplate`, +* `$horizontalRadioTemplate` became `$radioHorizontalTemplate` + +The properties `$inlineCheckboxListTemplate` and `$inlineRadioListTemplate` were removed. There is a new template called +`$checkEnclosedTemplate`. In bootstrap 4 the checkboxes are not enclosed any more (by default). + +### ActiveForm + +There are some new constants [[yii\bootstrap5\ActiveForm::LAYOUT_DEFAULT]], [[yii\bootstrap5\ActiveForm::LAYOUT_HORIZONTAL]] +and [[yii\bootstrap5\ActiveForm::LAYOUT_INLINE]]. They're supposed to make layout selection easier and refactoring more +failsafe if the strings change at any time. + +### Breadcrumbs + +This class got introduced to render breadcrumbs with correct classes and attributes to fulfill bootstrap needs. It's +fully compatible with [[yii\widgets\Breadcrumbs]] + +### ButtonDropdown + +There is a new property called `$direction` which makes it possible to open the menu at e.g. the right side of the button. +There are some new constants [[yii\bootstrap5\ButtonDropdown::DIRECTION_DOWN]], [[yii\bootstrap5\ButtonDropdown::DIRECTION_LEFT]], +[[yii\bootstrap5\ButtonDropdown::DIRECTION_RIGHT]] and [[yii\bootstrap5\ButtonDropdown::DIRECTION_UP]] to make direction +selection easier. +There is a new property called `$renderContainer`. If it's set to `false`, the dropdown wrapping div will not be rendered. + +Following properties were renamed: +* `$containerOptions` became `$options`, +* `$options` became `$buttonOptions` + +### ButtonToolbar + +This new class makes it possible to render a button toolbar. See https://getbootstrap.com/docs/4.3/components/button-group/#button-toolbar +for more information. + +### Carousel + +There is a new property called `$crossfade`. It controls the animation between slides. If it's set to `true`, there will +be an crossfade animation instead of a slide animation. + +### LinkPager + +This new class is the bootstrap version of [[yii\widgets\LinkPager]]. It renders a pagination in bootstrap style. See +https://getbootstrap.com/docs/4.3/components/pagination/ for more information. + +### Modal + + +Following properties were renamed: +* `$header` became `$title`, +* `$headerOptions` became `$titleOptions` + +It isn't necessary to write the `

+ +The widgets allow quick composition of the HTML for the bootstrap components that require the bootstrap CSS classes. +The default classes for a particular component will be added automatically by the widget, and the optional classes that you may want to customize are usually supported through the properties of the widget. + +For example, you may use [[yii\bootstrap4\Button::options]] to customize the appearance of a button. +The class 'btn' which is required for a button will be added automatically, so you don't need to worry about it. +All you need is specify a particular button class: + +```php +echo Button::widget([ + 'label' => 'Action', + 'options' => ['class' => 'btn-primary'], // produces class "btn btn-primary" +]); +``` + +However, sometimes you may need to replace the default classes with the alternative ones. +For example, the widget [[yii\bootstrap4\ButtonGroup]] uses 'btn-group' class for the container div by default, +but you may need to use 'btn-group-vertical' instead to align the buttons vertically. +Using a plain 'class' option simply adds 'btn-group-vertical' to 'btn-group', which will produce an incorrect result. +In order to override the default classes of a widget, you need to specify the 'class' option as an array that contains the customized class definition under the 'widget' key: + +```php +echo ButtonGroup::widget([ + 'options' => [ + 'class' => ['widget' => 'btn-group-vertical'] // replaces 'btn-group' with 'btn-group-vertical' + ], + 'buttons' => [ + ['label' => 'A'], + ['label' => 'B'], + ] +]); +``` + +## Navbar widget + +The navbar widget has its peculiarities. You should define at which breakpoint the navbar collapses and the generic +style of navbar (color scheme). + +You can change the color scheme and the collapse breakpoint with css classes. If not defined, the scheme defaults to +`navbar-light bg-light` and the breakpoint to `navbar-expand-lg`. For more information, see [Bootstrap documentation](https://getbootstrap.com/docs/4.2/components/navbar/): + +```php +Navbar::begin([ + 'options' => [ + 'class' => ['navbar-dark', 'bg-dark', 'navbar-expand-md'] + ] +]); + [...] +Navbar::end(); +``` + +If you'd like to flip the brand (icon) and toggle button positions in mobile navigation, you can do this like this: + +```php +Navbar::begin([ + 'brandOptions' => [ + 'class' => ['order-1'] + ], + 'togglerOptions' => [ + 'class' => ['order-0'] + ] +]); + [...] +Navbar::end(); +``` diff --git a/phpunit.xml.dist b/phpunit.xml.dist new file mode 100644 index 0000000..5311924 --- /dev/null +++ b/phpunit.xml.dist @@ -0,0 +1,14 @@ + + + + + ./tests + + + diff --git a/src/ButtonDropdown.php b/src/ButtonDropdown.php index 8e4f903..03c69c4 100644 --- a/src/ButtonDropdown.php +++ b/src/ButtonDropdown.php @@ -195,7 +195,7 @@ class ButtonDropdown extends Widget protected function renderDropdown(): string { $config = $this->dropdown; - $config['clientOptions'] = false; + $config['clientOptions'] = []; $config['view'] = $this->getView(); /** @var Widget $dropdownClass */ $dropdownClass = $this->dropdownClass; diff --git a/src/LinkPager.php b/src/LinkPager.php index d091089..77bad65 100644 --- a/src/LinkPager.php +++ b/src/LinkPager.php @@ -60,7 +60,7 @@ class LinkPager extends Widget /** * @var string the CSS class for the each page button. */ - public string $pageCssClass; + public string $pageCssClass = 'page-item'; /** * @var string the CSS class for the "first" page button. */ @@ -226,7 +226,7 @@ class LinkPager extends Widget [$beginPage, $endPage] = $this->getPageRange(); for ($i = $beginPage; $i <= $endPage; ++$i) { $buttons[] = $this->renderPageButton( - $i + 1, + (string)($i + 1), $i, '', $this->disableCurrentPageButton && $i == $currentPage, @@ -252,7 +252,7 @@ class LinkPager extends Widget $lastPageLabel = $this->lastPageLabel === true ? $pageCount : $this->lastPageLabel; if ($lastPageLabel !== false) { $buttons[] = $this->renderPageButton( - $lastPageLabel, + (string)$lastPageLabel, $pageCount - 1, $this->lastPageCssClass, $currentPage >= $pageCount - 1, diff --git a/src/Nav.php b/src/Nav.php index e910ca3..f09eead 100644 --- a/src/Nav.php +++ b/src/Nav.php @@ -136,7 +136,7 @@ class Nav extends Widget public function renderItems(): string { $items = []; - foreach ($this->items as $i => $item) { + foreach ($this->items as $item) { if (isset($item['visible']) && !$item['visible']) { continue; } @@ -211,7 +211,7 @@ class Nav extends Widget 'options' => ArrayHelper::getValue($parentItem, 'dropdownOptions', []), 'items' => $items, 'encodeLabels' => $this->encodeLabels, - 'clientOptions' => false, + 'clientOptions' => [], 'view' => $this->getView(), ]); } @@ -228,7 +228,7 @@ class Nav extends Widget if (is_array($child) && !ArrayHelper::getValue($child, 'visible', true)) { continue; } - if ($this->isItemActive($child)) { + if (is_array($child) && $this->isItemActive($child)) { ArrayHelper::setValue($items[$i], 'active', true); if ($this->activateParents) { $active = true; diff --git a/tests/AccordionTest.php b/tests/AccordionTest.php new file mode 100644 index 0000000..6b460cd --- /dev/null +++ b/tests/AccordionTest.php @@ -0,0 +1,325 @@ + [ + [ + 'label' => 'Collapsible Group Item #1', + 'content' => [ + 'test content1', + 'test content2' + ], + ], + [ + 'label' => 'Collapsible Group Item #2', + 'content' => 'Das ist das Haus vom Nikolaus', + 'contentOptions' => [ + 'class' => 'testContentOptions' + ], + 'options' => [ + 'class' => 'testClass', + 'id' => 'testId' + ], + 'footer' => 'Footer' + ], + [ + 'label' => '

Collapsible Group Item #3

', + 'content' => [ + '

test content1

', + '

test content2

' + ], + 'contentOptions' => [ + 'class' => 'testContentOptions2' + ], + 'options' => [ + 'class' => 'testClass2', + 'id' => 'testId2' + ], + 'encode' => false, + 'footer' => 'Footer2' + ], + [ + 'label' => '

Collapsible Group Item #4

', + 'content' => [ + '

test content1

', + '

test content2

' + ], + 'contentOptions' => [ + 'class' => 'testContentOptions3' + ], + 'options' => [ + 'class' => 'testClass3', + 'id' => 'testId3' + ], + 'encode' => true, + 'footer' => 'Footer3' + ], + ] + ]); + + $this->assertEqualsWithoutLE(<< +
+
+
+ + +
+
+
+
+
Das ist das Haus vom Nikolaus
+ +
Footer
+
+
+
+
+ + +
Footer2
+
+
+
+
+ + +
Footer3
+
+ + +HTML + , $output); + } + + public function testLabelKeys() + { + ob_start(); + $form = ActiveForm::begin(['action' => '/something']); + ActiveForm::end(); + ob_end_clean(); + + Accordion::$counter = 0; + $output = Accordion::widget([ + 'items' => [ + 'Item1' => 'Content1', + 'Item2' => [ + 'content' => 'Content2', + ], + [ + 'label' => 'Item3', + 'content' => 'Content3', + ], + 'FormField' => $form->field(new DynamicModel(['test']), 'test',['template' => '{input}']), + ] + ]); + + $this->assertEqualsWithoutLE(<< +
+
+
+
Content1
+ +
+
+
+
+
Content2
+ +
+
+
+
+
Content3
+ +
+
+
+
+
+ +
+ +
+ + +HTML + , $output); + } + + public function testExpandOptions() + { + Accordion::$counter = 0; + $output = Accordion::widget([ + 'items' => [ + 'Item1' => 'Content1', + 'Item2' => [ + 'content' => 'Content2', + 'expand' => true, + ], + ] + ]); + + $this->assertEqualsWithoutLE(<< +
+
+
+
Content1
+ +
+
+
+
+
Content2
+ +
+ + +HTML + , $output); + } + + public function invalidItemsProvider() + { + return [ + [ ['content'] ], // only content without label key + [ [[]] ], // only content array without label + [ [['content' => 'test']] ], // only content array without label + ]; + } + + /** + * @dataProvider invalidItemsProvider + * @expectedException \yii\base\InvalidConfigException + */ + public function testMissingLabel($items) + { + Accordion::widget([ + 'items' => $items, + ]); + } + + /** + * @see https://github.com/yiisoft/yii2/issues/8357 + */ + public function testRenderObject() + { + $template = ['template' => '{input}']; + ob_start(); + $form = ActiveForm::begin(['action' => '/something']); + ActiveForm::end(); + ob_end_clean(); + $model = new data\Singer; + + Accordion::$counter = 0; + $output = Accordion::widget([ + 'items' => [ + [ + 'label' => 'Collapsible Group Item #1', + 'content' => $form->field($model, 'firstName', $template) + ], + ] + ]); + + $this->assertEqualsWithoutLE(<< +
+
+
+
+ +
+ +
+ + +HTML + , $output); + } + + public function testAutoCloseItems() + { + $items = [ + [ + 'label' => 'Item 1', + 'content' => 'Content 1', + ], + [ + 'label' => 'Item 2', + 'content' => 'Content 2', + ], + ]; + + $output = Accordion::widget([ + 'items' => $items + ]); + $this->assertContains('data-parent="', $output); + $output = Accordion::widget([ + 'autoCloseItems' => false, + 'items' => $items + ]); + $this->assertNotContains('data-parent="', $output); + } + + /** + * @depends testRender + */ + public function testItemToggleTag() + { + $items = [ + [ + 'label' => 'Item 1', + 'content' => 'Content 1', + ], + [ + 'label' => 'Item 2', + 'content' => 'Content 2', + ], + ]; + + Accordion::$counter = 0; + + $output = Accordion::widget([ + 'items' => $items, + 'itemToggleOptions' => [ + 'tag' => 'a', + 'class' => 'custom-toggle', + ], + ]); + $this->assertContains('
assertNotContains(' $items, + 'itemToggleOptions' => [ + 'tag' => 'a', + 'class' => ['widget' => 'custom-toggle'], + ], + ]); + $this->assertContains('
assertNotContains('collapse-toggle', $output); + } +} diff --git a/tests/ActiveFieldDefaultFormCheckTest.php b/tests/ActiveFieldDefaultFormCheckTest.php new file mode 100644 index 0000000..3e8f841 --- /dev/null +++ b/tests/ActiveFieldDefaultFormCheckTest.php @@ -0,0 +1,241 @@ +mockWebApplication([ + 'container' => [ + 'definitions' => [ + 'yii\bootstrap5\ActiveField' => [ + 'checkTemplate' => "
\n{input}\n{label}\n{error}\n{hint}\n
", + 'radioTemplate' => "
\n{input}\n{label}\n{error}\n{hint}\n
", + 'checkHorizontalTemplate' => "{beginWrapper}\n
\n{input}\n{label}\n{error}\n{hint}\n
\n{endWrapper}", + 'radioHorizontalTemplate' => "{beginWrapper}\n
\n{input}\n{label}\n{error}\n{hint}\n
\n{endWrapper}", + 'checkOptions' => [ + 'class' => ['widget' => 'form-check-input'], + 'labelOptions' => [ + 'class' => ['widget' => 'form-check-label'] + ], + 'wrapperOptions' => [ + 'class' => ['widget' => 'form-check'] + ] + ], + 'radioOptions' => [ + 'class' => ['widget' => 'form-check-input'], + 'labelOptions' => [ + 'class' => ['widget' => 'form-check-label'] + ], + 'wrapperOptions' => [ + 'class' => ['widget' => 'form-check'] + ] + ] + ] + ] + ] + ]); + + $this->_helperModel = new DynamicModel(['attributeName']); + ob_start(); + $this->_helperForm = ActiveForm::begin(['action' => '/something']); + ActiveForm::end(); + ob_end_clean(); + + $this->_activeField = Yii::createObject([ + 'class' => 'yii\bootstrap5\ActiveField', + 'form' => $this->_helperForm + ]); + $this->_activeField->model = $this->_helperModel; + $this->_activeField->attribute = $this->_attributeName; + } + + public function testDefaultCheckboxByConfig() + { + Html::$counter = 0; + $this->_activeField->inline = true; + $html = $this->_activeField->checkbox()->render(); + + $expectedHtml = << +
+ + +
+ +
+ +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testDefaultRadioByConfig() + { + Html::$counter = 0; + $this->_activeField->inline = true; + $html = $this->_activeField->radio()->render(); + + $expectedHtml = << +
+ + +
+ +
+ +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testDefaultCheckboxListByConfig() + { + Html::$counter = 0; + $html = $this->_activeField->checkboxList([1 => 'name1', 2 => 'name2'])->render(); + + $expectedHtml = << + +
+ + +
+ +
+ + +
+
+
+ + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testDefaultRadioListByConfig() + { + Html::$counter = 0; + $html = $this->_activeField->radioList([1 => 'name1', 2 => 'name2'])->render(); + + $expectedHtml = << + +
+ + +
+ +
+ + +
+
+
+ + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testHorizontalLayout() + { + Html::$counter = 0; + ActiveForm::$counter = 0; + ob_start(); + $model = new DynamicModel(['attributeName', 'checkbox', 'gridRadios']); + $form = ActiveForm::begin([ + 'action' => '/some-action', + 'layout' => ActiveForm::LAYOUT_HORIZONTAL + ]); + echo $form->field($model, 'attributeName'); + echo $form->field($model, 'checkbox')->checkbox(['wrapperOptions' => ['class' => ['widget' => new UnsetArrayValue()]]]); + echo $form->field($model, 'gridRadios')->radioList([ + 'option1' => 'First radio', + 'option2' => 'Second radio', + 'option3' => 'Third radio' + ]); + ActiveForm::end(); + $out = ob_get_clean(); + + $expected = << + +
+ +
+ +
+ +HTML; + $expected2 = << +
+
+ + +
+ +
+
+ +HTML; + $expected3 = << + +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ +
+ +HTML; + + + $this->assertContainsWithoutLE($expected, $out); + $this->assertContainsWithoutLE($expected2, $out); + $this->assertContainsWithoutLE($expected3, $out); + } +} diff --git a/tests/ActiveFieldTest.php b/tests/ActiveFieldTest.php new file mode 100644 index 0000000..cdfe082 --- /dev/null +++ b/tests/ActiveFieldTest.php @@ -0,0 +1,336 @@ +helperModel = new DynamicModel(['attributeName']); + ob_start(); + $this->helperForm = ActiveForm::begin(['action' => '/something']); + ActiveForm::end(); + ob_end_clean(); + + $this->activeField = new ActiveField(['form' => $this->helperForm]); + $this->activeField->model = $this->helperModel; + $this->activeField->attribute = $this->attributeName; + } + + public function testFileInput() + { + Html::$counter = 0; + $html = $this->activeField->fileInput()->render(); + + $expectedHtml = << + + + +
+ +HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + // Tests : + + public function testRadioList() + { + Html::$counter = 0; + $html = $this->activeField->radioList([1 => 'name1', 2 => 'name2'])->render(); + + $expectedHtml = << + +
+ + +
+ +
+ + +
+
+
+ + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testRadioError() + { + Html::$counter = 0; + $this->helperModel->addError($this->attributeName, 'Test print error message'); + $html = $this->activeField->radio()->render(); + + $expectedHtml = << +
+ + +
Test print error message
+ +
+ +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testRadioListError() + { + Html::$counter = 0; + $this->helperModel->addError($this->attributeName, 'Test print error message'); + $html = $this->activeField->radioList([1 => 'name1', 2 => 'name2'])->render(); + + $expectedHtml = << + +
+ + +
+ +
+ + +
Test print error message
+
+
+ + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCheckboxList() + { + Html::$counter = 0; + $html = $this->activeField->checkboxList([1 => 'name1', 2 => 'name2'])->render(); + + $expectedHtml = << + +
+ + +
+ +
+ + +
+
+
+ + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCheckboxError() + { + Html::$counter = 0; + $this->helperModel->addError($this->attributeName, 'Test print error message'); + $html = $this->activeField->checkbox()->render(); + + $expectedHtml = << +
+ + +
Test print error message
+ +
+ +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCheckboxListError() + { + Html::$counter = 0; + $this->helperModel->addError($this->attributeName, 'Test print error message'); + $html = $this->activeField->checkboxList([1 => 'name1', 2 => 'name2'])->render(); + + $expectedHtml = << + +
+ + +
+ +
+ + +
Test print error message
+
+
+ + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testRadioListInline() + { + Html::$counter = 0; + $this->activeField->inline = true; + $html = $this->activeField->radioList([1 => 'name1', 2 => 'name2'])->render(); + + $expectedHtml = << + +
+ + +
+ +
+ + +
+
+
+ + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + public function testCheckboxListInline() + { + Html::$counter = 0; + $this->activeField->inline = true; + $html = $this->activeField->checkboxList([1 => 'name1', 2 => 'name2'])->render(); + + $expectedHtml = << + +
+ + +
+ +
+ + +
+
+
+ + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + /** + * @depends testRadioList + * + * @see https://github.com/yiisoft/yii2-bootstrap/issues/81 + */ + public function testRadioListItemOptions() + { + Html::$counter = 0; + $content = $this->activeField->radioList([1 => 'name1', 2 => 'name2'], [ + 'itemOptions' => [ + 'data-attribute' => 'test' + ] + ])->render(); + + $this->assertContains('data-attribute="test"', $content); + } + + /** + * @depends testCheckboxList + * + * @see https://github.com/yiisoft/yii2-bootstrap/issues/81 + */ + public function testCheckboxListItemOptions() + { + Html::$counter = 0; + $content = $this->activeField->checkboxList([1 => 'name1', 2 => 'name2'], [ + 'itemOptions' => [ + 'data-attribute' => 'test' + ] + ])->render(); + + $this->assertContains('data-attribute="test"', $content); + } + + /** + * + */ + public function testCustomRadio() + { + Html::$counter = 0; + $this->activeField->inline = true; + $html = $this->activeField->radio()->render(); + + $expectedHtml = << +
+ + +
+ +
+ +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + /** + * + */ + public function testCustomCheckbox() + { + Html::$counter = 0; + $this->activeField->inline = true; + $html = $this->activeField->checkbox()->render(); + + $expectedHtml = << +
+ + +
+ +
+ +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } +} diff --git a/tests/ActiveFormTest.php b/tests/ActiveFormTest.php new file mode 100644 index 0000000..8d9b2f3 --- /dev/null +++ b/tests/ActiveFormTest.php @@ -0,0 +1,321 @@ + '/some-action', + 'layout' => ActiveForm::LAYOUT_DEFAULT + ]); + echo $form->field($model, 'attributeName'); + ActiveForm::end(); + $out = ob_get_clean(); + + $expected = << + + + +
+ +HTML; + + + $this->assertContainsWithoutLE($expected, $out); + } + + public function testHorizontalLayout() + { + Html::$counter = 0; + ActiveForm::$counter = 0; + ob_start(); + $model = new DynamicModel(['attributeName', 'checkbox', 'gridRadios']); + $form = ActiveForm::begin([ + 'action' => '/some-action', + 'layout' => ActiveForm::LAYOUT_HORIZONTAL + ]); + echo $form->field($model, 'attributeName'); + echo $form->field($model, 'checkbox')->checkbox(); + echo $form->field($model, 'gridRadios')->radioList([ + 'option1' => 'First radio', + 'option2' => 'Second radio', + 'option3' => 'Third radio' + ]); + ActiveForm::end(); + $out = ob_get_clean(); + + $expected = << + +
+ +
+ +
+ +HTML; + $expected2 = << +
+
+ + +
+ +
+
+ +HTML; + $expected3 = << + +
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+ +
+ +HTML; + + + $this->assertContainsWithoutLE($expected, $out); + $this->assertContainsWithoutLE($expected2, $out); + $this->assertContainsWithoutLE($expected3, $out); + } + + /** + * @depends testHorizontalLayout + */ + public function testHorizontalLayoutTemplateOverride() + { + ActiveForm::$counter = 0; + ob_start(); + $model = new DynamicModel(['checkboxName']); + $form = ActiveForm::begin([ + 'action' => '/some-action', + 'layout' => ActiveForm::LAYOUT_HORIZONTAL + ]); + echo $form->field($model, 'checkboxName')->checkbox(['template' => "
\n{input}\n{label}\n
\n
{error}
"]); + ActiveForm::end(); + $out = ob_get_clean(); + + $expected = << + + + +
+HTML; + + + $this->assertContainsWithoutLE($expected, $out); + } + + public function testInlineLayout() + { + ActiveForm::$counter = 0; + ob_start(); + $model = new DynamicModel(['attributeName', 'selectName', 'checkboxName']); + $form = ActiveForm::begin([ + 'action' => '/some-action', + 'layout' => ActiveForm::LAYOUT_INLINE + ]); + echo $form->field($model, 'attributeName'); + echo $form->field($model, 'selectName')->listBox([ + '1' => 'One', + '2' => 'Two', + '3' => 'Three' + ]); + echo $form->field($model, 'checkboxName')->checkbox(); + ActiveForm::end(); + $out = ob_get_clean(); + + $expected = << + + + + + +HTML; + $expected2 = << + + + + + +HTML; + $expected3 = << +
+ + + + +
+ +HTML; + + + $this->assertContainsWithoutLE('
assertContainsWithoutLE($expected, $out); + $this->assertContainsWithoutLE($expected2, $out); + $this->assertContainsWithoutLE($expected3, $out); + } + + public function testHintRendering() + { + ActiveForm::$counter = 0; + ob_start(); + $model = new User(); + $form = ActiveForm::begin([ + 'action' => '/some-action', + 'layout' => ActiveForm::LAYOUT_DEFAULT + ]); + echo $form->field($model, 'firstName'); + echo $form->field($model, 'lastName'); + echo $form->field($model, 'username'); + echo $form->field($model, 'password')->passwordInput(); + ActiveForm::end(); + $out = ob_get_clean(); + + $expected = << + + + +
+ +HTML; + $expected2 = << + + + +
+ +HTML; + $expected3 = << + + +Your username must be at least 4 characters long +
+ +HTML; + $expected4 = << + + +Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji. +
+ +HTML; + + $this->assertContainsWithoutLE($expected, $out); + $this->assertContainsWithoutLE($expected2, $out); + $this->assertContainsWithoutLE($expected3, $out); + $this->assertContainsWithoutLE($expected4, $out); + } + + /** + * Fixes #128 + * @see https://github.com/yiisoft/yii2-bootstrap5/issues/128 + */ + public function testInputTemplate() + { + $model = new User(); + $model->validate(); + + ActiveForm::$counter = 0; + ob_start(); + $form = ActiveForm::begin(); + echo $form->field($model, 'username', ['inputTemplate' => '{input}']); + ActiveForm::end(); + $out = ob_get_clean(); + + $expected = << + + +Your username must be at least 4 characters long +
Username cannot be blank.
+ +HTML; + + $this->assertContainsWithoutLE($expected, $out); + } + + /** + * Fixes #196 + */ + public function testFormNoRoleAttribute() + { + $form = ActiveForm::widget(); + + $this->assertNotContains('role="form"', $form); + } + + public function testErrorSummaryRendering() + { + ActiveForm::$counter = 0; + ob_start(); + $model = new User(); + $model->validate(); + $form = ActiveForm::begin([ + 'action' => '/some-action', + 'layout' => ActiveForm::LAYOUT_DEFAULT + ]); + echo $form->errorSummary($model); + ActiveForm::end(); + $out = ob_get_clean(); + + + $this->assertContainsWithoutLE('
'Holy guacamole! You should check in on some of those fields below.', + 'options' => [ + 'class' => ['alert-warning'] + ] + ]); + + $expectedHtml = << + +Holy guacamole! You should check in on some of those fields below. + + +
+HTML; + + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + /** + * @depends testNormalAlert + */ + public function testDismissibleAlert() + { + Alert::$counter = 0; + $html = Alert::widget([ + 'body' => "Message1", + ]); + + $expectedHtml = << + +Message1 + + + +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } +} diff --git a/tests/BreadcrumbsTest.php b/tests/BreadcrumbsTest.php new file mode 100644 index 0000000..8c32444 --- /dev/null +++ b/tests/BreadcrumbsTest.php @@ -0,0 +1,33 @@ + ['label' => 'Home', 'url' => '#'], + 'links' => [ + ['label' => 'Library', 'url' => '#'], + ['label' => 'Data'] + ] + ]); + + $expected = << +HTML; + + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/ButtonDropdownTest.php b/tests/ButtonDropdownTest.php new file mode 100644 index 0000000..f0ffd7c --- /dev/null +++ b/tests/ButtonDropdownTest.php @@ -0,0 +1,82 @@ + ButtonDropdown::DIRECTION_UP, + 'options' => [ + 'class' => $containerClass, + ], + 'label' => 'Action', + 'dropdown' => [ + 'items' => [ + ['label' => 'DropdownA', 'url' => '/'], + ['label' => 'DropdownB', 'url' => '#'], + ], + ], + ]); + + $this->assertContains("$containerClass dropup btn-group", $out); + } + + public function testDirection() + { + ButtonDropdown::$counter = 0; + $out = ButtonDropdown::widget([ + 'direction' => ButtonDropdown::DIRECTION_LEFT, + 'label' => 'Action', + 'dropdown' => [ + 'items' => [ + ['label' => 'ItemA', 'url' => '#'], + ['label' => 'ItemB', 'url' => '#'], + ], + ], + ]); + + $expected = << + + +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testSplit() + { + ButtonDropdown::$counter = 0; + $out = ButtonDropdown::widget([ + 'direction' => ButtonDropdown::DIRECTION_DOWN, + 'label' => 'Split dropdown', + 'split' => true, + 'dropdown' => [ + 'items' => [ + ['label' => 'ItemA', 'url' => '#'], + ['label' => 'ItemB', 'url' => '#'] + ] + ] + ]); + + $expected = << + + +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/ButtonGroupTest.php b/tests/ButtonGroupTest.php new file mode 100644 index 0000000..40e72b9 --- /dev/null +++ b/tests/ButtonGroupTest.php @@ -0,0 +1,33 @@ + [ + ['label' => 'button-A'], + ['label' => 'button-B', 'visible' => true], + ['label' => 'button-C', 'visible' => false], + Button::widget(['label' => 'button-D']), + ], + ]); + + $expected = << + + +HTML; + + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/ButtonToolbarTest.php b/tests/ButtonToolbarTest.php new file mode 100644 index 0000000..a1f0294 --- /dev/null +++ b/tests/ButtonToolbarTest.php @@ -0,0 +1,106 @@ + [ + 'aria-label' => 'Toolbar with button groups' + ], + 'buttonGroups' => [ + ButtonGroup::widget([ + 'options' => [ + 'aria-label' => 'First group', + 'class' => ['mr-2'] + ], + 'buttons' => [ + ['label' => '1'], + ['label' => '2'], + ['label' => '3'], + ['label' => '4'] + ] + ]), + [ + 'options' => [ + 'aria-label' => 'Second group' + ], + 'buttons' => [ + ['label' => '5'], + ['label' => '6'], + ['label' => '7'] + ] + ] + ] + ]); + + $expected = <<
+ + +
+
+ +
+HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testAdditionalContent() + { + ButtonToolbar::$counter = 0; + $addHtml = << +
+
@
+
+ + +HTML; + $out = ButtonToolbar::widget([ + 'options' => [ + 'aria-label' => 'Toolbar with button groups' + ], + 'buttonGroups' => [ + [ + 'options' => [ + 'aria-label' => 'First group', + 'class' => ['mr-2'] + ], + 'buttons' => [ + ['label' => '1'], + ['label' => '2'], + ['label' => '3'], + ['label' => '4'] + ] + ], + $addHtml + ] + ]); + + $expected = <<
+ + +
+
+
+
@
+
+ +
+HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/CarouselTest.php b/tests/CarouselTest.php new file mode 100644 index 0000000..037661b --- /dev/null +++ b/tests/CarouselTest.php @@ -0,0 +1,95 @@ + [ + [ + 'content' => '', + 'caption' => '
First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

', + 'captionOptions' => [ + 'class' => ['d-none', 'd-md-block'] + ] + ], + [ + 'content' => '', + 'caption' => '
Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

', + 'captionOptions' => [ + 'class' => ['d-none', 'd-md-block'] + ] + ], + [ + 'content' => '', + 'caption' => '
Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

', + 'captionOptions' => [ + 'class' => ['d-none', 'd-md-block'] + ] + ] + ] + ]); + + $expected = << +
  1. +
  2. +
+
+
First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

+
+
Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

+ + + + +HTML; + $this->assertEqualsWithoutLE($expected, $out); + } + + /** + * @depends testContainerOptions + */ + public function testCrossfade() + { + Carousel::$counter = 0; + $out = Carousel::widget([ + 'crossfade' => true, + 'items' => [ + [ + 'content' => '', + 'caption' => '
First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

', + 'captionOptions' => [ + 'class' => ['d-none', 'd-md-block'] + ] + ], + [ + 'content' => '', + 'caption' => '
Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

', + 'captionOptions' => [ + 'class' => ['d-none', 'd-md-block'] + ] + ], + [ + 'content' => '', + 'caption' => '
Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

', + 'captionOptions' => [ + 'class' => ['d-none', 'd-md-block'] + ] + ] + ] + ]); + + $this->assertContains('class="carousel slide carousel-fade"', $out); + } +} diff --git a/tests/DropdownTest.php b/tests/DropdownTest.php new file mode 100644 index 0000000..0516aed --- /dev/null +++ b/tests/DropdownTest.php @@ -0,0 +1,248 @@ + [ + [ + 'label' => 'Page1' + ], + [ + 'label' => 'Dropdown1', + 'url' => '#test', + 'items' => [ + ['label' => 'Page2'], + ['label' => 'Page3'], + ] + ], + [ + 'label' => 'Dropdown2', + 'visible' => false, + 'items' => [ + ['label' => 'Page4', 'content' => 'Page4'], + ['label' => 'Page5', 'content' => 'Page5'], + ] + ] + ] + ] + ); + + $expected = <<
Page1
+ +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testSubMenuOptions() + { + Dropdown::$counter = 0; + $out = Dropdown::widget( + [ + 'submenuOptions' => [ + 'class' => 'submenu-list', + ], + 'items' => [ + [ + 'label' => 'Dropdown1', + 'items' => [ + ['label' => 'Page1', 'content' => 'Page2'], + ['label' => 'Page2', 'content' => 'Page3'], + ] + ], + '-', + [ + 'label' => 'Dropdown2', + 'items' => [ + ['label' => 'Page3', 'content' => 'Page4'], + ['label' => 'Page4', 'content' => 'Page5'], + ], + 'submenuOptions' => [ + 'class' => 'submenu-override', + ], + ] + ] + ] + ); + + $expected = << +
+ +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testActive() + { + Dropdown::$counter = 0; + $out = Dropdown::widget( + [ + 'submenuOptions' => [ + 'class' => 'submenu-list', + ], + 'items' => [ + [ + 'label' => 'Dropdown1', + 'items' => [ + ['label' => 'Page1', 'content' => 'Page2'], + ['label' => 'Page2', 'content' => 'Page3'], + ] + ], + '-', + [ + 'label' => 'Dropdown2', + 'items' => [ + ['label' => 'Page3', 'content' => 'Page3', 'url' => '/', 'active' => true], + ['label' => 'Page4', 'content' => 'Page4'], + ], + ] + ] + ] + ); + $expected = << +
+ +HTML; + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testDisabled() + { + Dropdown::$counter = 0; + $out = Dropdown::widget( + [ + 'submenuOptions' => [ + 'class' => 'submenu-list', + ], + 'items' => [ + [ + 'label' => 'Dropdown1', + 'items' => [ + ['label' => 'Page1', 'content' => 'Page2'], + ['label' => 'Page2', 'content' => 'Page3'], + ], + 'disabled' => true + ], + '-', + [ + 'label' => 'Dropdown2', + 'items' => [ + ['label' => 'Page3', 'content' => 'Page3'], + ['label' => 'Page4', 'content' => 'Page4'], + ], + ] + ] + ] + ); + + $expected = << +
+ +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testForms() + { + Dropdown::$counter = 0; + $form = << +
+ + +
+
+ + +
+
+ + +
+ + +HTML; + + $out = Dropdown::widget([ + 'items' => [ + $form, + '-', + ['label' => 'New around here? Sign up', 'url' => '#'], + ['label' => 'Forgot password?', 'url' => '#'] + ] + ]); + + $expected = <<
+
+ + +
+
+ + +
+
+ + +
+ +
+
+New around here? Sign up +Forgot password? +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/HtmlTest.php b/tests/HtmlTest.php new file mode 100644 index 0000000..aa29cf2 --- /dev/null +++ b/tests/HtmlTest.php @@ -0,0 +1,145 @@ +' + ], + [ + '', + [], + '' + ] + ]; + } + + /** + * @dataProvider dataProviderStaticControl + * + * @param string $value + * @param array $options + * @param string $expectedHtml + */ + public function testStaticControl($value, array $options, $expectedHtml) + { + $this->assertEquals($expectedHtml, Html::staticControl($value, $options)); + } + + public function testRadioList() + { + $this->assertEquals('
', Html::radioList('test')); + + $dataItems = [ + 'value1' => 'text1', + 'value2' => 'text2', + ]; + + Html::$counter = 0; + + $expected = <<<'EOD' +
+
+
+
+EOD; + $this->assertEqualsWithoutLE($expected, Html::radioList('test', ['value2'], $dataItems)); + + Html::$counter = 0; + $expected = <<<'EOD' +
0 +1
+EOD; + $this->assertEqualsWithoutLE($expected, Html::radioList('test', ['value2'], $dataItems, [ + 'item' => function ($index, $label, $name, $checked, $value) { + return $index . Html::label($label . ' ' . Html::radio($name, $checked, ['value' => $value])); + }, + ])); + + Html::$counter = 0; + $expected = <<<'EOD' +
+
+EOD; + $this->assertEqualsWithoutLE($expected, Html::radioList('test', [], ['value' => 'label&'])); + + Html::$counter = 0; + $expected = <<<'EOD' +
+
+EOD; + $this->assertEqualsWithoutLE($expected, Html::radioList('test', [], ['value' => 'label&'], ['encode' => false])); + } + + public function testCheckboxList() + { + $this->assertEquals('
', Html::checkboxList('test')); + + $dataItems = [ + 'value1' => 'text1', + 'value2' => 'text2', + ]; + + Html::$counter = 0; + + $expected = <<<'EOD' +
+
+
+
+EOD; + $this->assertEqualsWithoutLE($expected, Html::checkboxList('test', ['value2'], $dataItems)); + + + Html::$counter = 0; + $expected = <<<'EOD' +
0 +1
+EOD; + $this->assertEqualsWithoutLE($expected, Html::checkboxList('test', ['value2'], $dataItems, [ + 'item' => function ($index, $label, $name, $checked, $value) { + return $index . Html::label($label . ' ' . Html::checkbox($name, $checked, ['value' => $value])); + }, + ])); + + Html::$counter = 0; + $expected = <<<'EOD' +
+
+EOD; + $this->assertEqualsWithoutLE($expected, Html::checkboxList('test', 'value', ['value' => 'label&'])); + + Html::$counter = 0; + $expected = <<<'EOD' +
+
+EOD; + $this->assertEqualsWithoutLE($expected, Html::checkboxList('test', 'value', ['value' => 'label&'], ['encode' => false])); + } + + public function testError() + { + $model = new DynamicModel(); + $model->addError('foo', 'Some error message.'); + + $this->assertEquals('
Some error message.
', Html::error($model, 'foo')); + $this->assertEquals('
Some error message.
', Html::error($model, 'foo', ['class' => 'custom-class'])); + $this->assertEquals('
Some error message.
', Html::error($model, 'foo', ['class' => null])); + $this->assertEquals('

Some error message.

', Html::error($model, 'foo', ['tag' => 'p'])); + } +} diff --git a/tests/LinkPagerTest.php b/tests/LinkPagerTest.php new file mode 100644 index 0000000..f3fb06f --- /dev/null +++ b/tests/LinkPagerTest.php @@ -0,0 +1,154 @@ +mockWebApplication([ + 'components' => [ + 'urlManager' => [ + 'scriptUrl' => '/', + ], + ], + ]); + } + + /** + * Get pagination. + * @param int $page + * @return Pagination + */ + private function getPagination($page) + { + $pagination = new Pagination(); + $pagination->setPage($page); + $pagination->totalCount = 500; + $pagination->route = 'test'; + return $pagination; + } + + public function testFirstLastPageLabels() + { + $pagination = $this->getPagination(5); + $output = LinkPager::widget([ + 'pagination' => $pagination, + 'firstPageLabel' => true, + 'lastPageLabel' => true, + ]); + $this->assertContains('
  • 1
    • ', $output); + $this->assertContains('
  • 25
    • ', $output); + $output = LinkPager::widget([ + 'pagination' => $pagination, + 'firstPageLabel' => 'First', + 'lastPageLabel' => 'Last', + ]); + $this->assertContains('
  • First
    • ', $output); + $this->assertContains('
  • Last
    • ', $output); + $output = LinkPager::widget([ + 'pagination' => $pagination, + 'firstPageLabel' => false, + 'lastPageLabel' => false, + ]); + $this->assertNotContains('
  • ', $output); + $this->assertNotContains('
  • ', $output); + } + + public function testDisabledPageElementOptions() + { + $output = LinkPager::widget([ + 'pagination' => $this->getPagination(0), + 'disabledListItemSubTagOptions' => ['class' => ['foo-bar']], + ]); + $this->assertContains('
  • 6
    • ', $output); + $output = LinkPager::widget([ + 'pagination' => $pagination, + 'disableCurrentPageButton' => true, + ]); + $this->assertContains('
  • 6
    • ', $output); + } + + public function testOptionsWithTagOption() + { + LinkPager::$counter = 0; + $output = LinkPager::widget([ + 'pagination' => $this->getPagination(5), + 'options' => [ + 'tag' => 'div', + ], + ]); + $this->assertTrue(StringHelper::startsWith($output, '
    ')); + $this->assertTrue(StringHelper::endsWith($output, '
    ')); + } + + public function testLinkWrapOptions() + { + $output = LinkPager::widget([ + 'pagination' => $this->getPagination(1), + 'linkContainerOptions' => [ + 'tag' => 'div', + 'class' => 'my-class', + ], + ]); + $this->assertContains( + '
    3
    ', + $output + ); + $this->assertContains( + '
    2
    ', + $output + ); + } + + /** + * @see https://github.com/yiisoft/yii2/issues/15536 + */ + public function testShouldTriggerInitEvent() + { + $initTriggered = false; + LinkPager::widget([ + 'pagination' => $this->getPagination(1), + 'on init' => function () use (&$initTriggered) { + $initTriggered = true; + } + ]); + $this->assertTrue($initTriggered); + } +} diff --git a/tests/ModalTest.php b/tests/ModalTest.php new file mode 100644 index 0000000..8194c38 --- /dev/null +++ b/tests/ModalTest.php @@ -0,0 +1,195 @@ + false, + 'bodyOptions' => ['class' => 'modal-body test', 'style' => 'text-align:center;'] + ]); + + + $expected = << +
    +
    + +
    + +
    + +
    +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + /** + * @depends testBodyOptions + */ + public function testContainerOptions() + { + Modal::$counter = 0; + + ob_start(); + Modal::begin([ + 'title' => 'Modal title', + 'footer' => Html::button('Close', [ + 'type' => 'button', + 'class' => ['btn', 'btn-secondary'], + 'data' => [ + 'dismiss' => 'modal' + ] + ]) . "\n" . Html::button('Save changes', [ + 'type' => 'button', + 'class' => ['btn', 'btn-primary'] + ]) + ]); + echo '

    Woohoo, you\'re reading this text in a modal!

    '; + Modal::end(); + $out = ob_get_clean(); + + $expected = << +
    +
    +
    + + +
    +
    +

    Woohoo, you're reading this text in a modal!

    +
    +
    + + +
    +
    +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testTriggerButton() + { + Modal::$counter = 0; + + ob_start(); + Modal::begin([ + 'toggleButton' => [ + 'class' => ['btn', 'btn-primary'], + 'label' => 'Launch demo modal' + ], + 'title' => 'Modal title', + 'footer' => Html::button('Close', [ + 'type' => 'button', + 'class' => ['btn', 'btn-secondary'] + ]) . "\n" . Html::button('Save changes', [ + 'type' => 'button', + 'class' => ['btn', 'btn-primary'] + ]) + ]); + echo '

    Woohoo, you\'re reading this text in a modal!

    '; + Modal::end(); + $out = ob_get_clean(); + + $this->assertContains('', + $out); + } + + public function testDialogOptions() + { + Modal::$counter = 0; + $out = Modal::widget([ + 'closeButton' => false, + 'dialogOptions' => ['class' => 'test', 'style' => 'text-align:center;'] + ]); + + + $expected = << +
    +
    + +
    + +
    + +
    +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testCenterVertical() + { + Modal::$counter = 0; + $out = Modal::widget([ + 'closeButton' => false, + 'centerVertical'=>true + ]); + + + $expected = << +
    +
    + +
    + +
    + +
    +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + public function testScrollable() + { + Modal::$counter = 0; + $out = Modal::widget([ + 'closeButton' => false, + 'scrollable'=>true + ]); + + + $expected = << +
    +
    + +
    + +
    + +
    +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/NavBarTest.php b/tests/NavBarTest.php new file mode 100644 index 0000000..6bc65b6 --- /dev/null +++ b/tests/NavBarTest.php @@ -0,0 +1,129 @@ + 'My Company', + 'brandUrl' => '/', + 'options' => [ + 'class' => 'navbar-inverse navbar-static-top navbar-frontend', + ], + ]); + + $expected = << +
    +My Company + + +
    + +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testBrandImage() + { + $out = NavBar::widget([ + 'brandImage' => '/images/test.jpg', + 'brandUrl' => '/', + ]); + + $this->assertContains('', $out); + } + + public function testBrandLink() + { + $out = NavBar::widget([ + 'brandLabel' => 'Yii Framework', + 'brandUrl' => false, + ]); + + $this->assertContains('Yii Framework', $out); + } + + public function testBrandSpan() + { + $out = NavBar::widget([ + 'brandLabel' => 'Yii Framework', + 'brandUrl' => null, + ]); + + $this->assertContains('Yii Framework', $out); + } + + /** + * @depends testRender + */ + public function testNavAndForm() { + + NavBar::$counter = 0; + + ob_start(); + NavBar::begin([ + 'brandLabel' => 'My Company', + 'brandUrl' => '/', + 'options' => [ + ], + ]); + echo Nav::widget([ + 'options' => [ + 'class' => ['mr-auto'] + ], + 'items' => [ + ['label' => 'Home', 'url' => '#'], + ['label' => 'Link', 'url' => '#'], + ['label' => 'Dropdown', 'items' => [ + ['label' => 'Action', 'url' => '#'], + ['label' => 'Another action', 'url' => '#'], + '-', + ['label' => 'Something else here', 'url' => '#'], + ]] + ] + ]); + echo << + + + +HTML; + NavBar::end(); + $out = ob_get_clean(); + + $expected = << +
    +My Company + + +
    + +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/NavTest.php b/tests/NavTest.php new file mode 100644 index 0000000..c21ced5 --- /dev/null +++ b/tests/NavTest.php @@ -0,0 +1,368 @@ +mockWebApplication([ + 'components' => [ + 'request' => [ + 'class' => 'yii\web\Request', + 'scriptUrl' => '/base/index.php', + 'hostInfo' => 'http://example.com/', + 'url' => '/base/index.php&r=site%2Fcurrent&id=42' + ], + 'urlManager' => [ + 'class' => 'yii\web\UrlManager', + 'baseUrl' => '/base', + 'scriptUrl' => '/base/index.php', + 'hostInfo' => 'http://example.com/', + ] + ], + ]); + } + + public function testIds() + { + Nav::$counter = 0; + $out = Nav::widget( + [ + 'items' => [ + [ + 'label' => 'Page1', + 'content' => 'Page1', + ], + [ + 'label' => 'Dropdown1', + 'items' => [ + ['label' => 'Page2', 'content' => 'Page2'], + ['label' => 'Page3', 'content' => 'Page3'], + ] + ], + [ + 'label' => 'Dropdown2', + 'visible' => false, + 'items' => [ + ['label' => 'Page4', 'content' => 'Page4'], + ['label' => 'Page5', 'content' => 'Page5'], + ] + ] + ] + ] + ); + + $expected = <<
  • Page1
    • +
  • Dropdown1
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testRenderDropdownWithDropdownOptions() + { + Nav::$counter = 0; + $out = Nav::widget( + [ + 'items' => [ + [ + 'label' => 'Page1', + 'content' => 'Page1', + ], + [ + 'label' => 'Dropdown1', + 'dropdownOptions' => ['class' => 'test', 'data-id' => 't1', 'id' => 'test1'], + 'items' => [ + ['label' => 'Page2', 'content' => 'Page2'], + ['label' => 'Page3', 'content' => 'Page3'], + ] + ], + [ + 'label' => 'Dropdown2', + 'visible' => false, + 'items' => [ + ['label' => 'Page4', 'content' => 'Page4'], + ['label' => 'Page5', 'content' => 'Page5'], + ] + ] + ] + ] + ); + + $expected = <<
  • Page1
    • +
  • Dropdown1
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testEmptyItems() + { + Nav::$counter = 0; + $out = Nav::widget([ + 'items' => [ + [ + 'label' => 'Page1', + 'items' => null, + ], + [ + 'label' => 'Dropdown1', + 'items' => [ + ['label' => 'Page2', 'content' => 'Page2'], + ['label' => 'Page3', 'content' => 'Page3'], + ], + ], + [ + 'label' => 'Page4', + 'items' => [], + ], + ], + ]); + + $expected = <<
  • Page1
    • +
  • Dropdown1
    • +
  • Page4
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testActive() + { + $this->mockAction('site', 'users'); + + Nav::$counter = 0; + $out = Nav::widget([ + 'items' => [ + [ + 'label' => 'Main', + 'url' => ['site/index'], + ], + [ + 'label' => 'Admin', + 'items' => [ + ['label' => 'Users', 'url' => ['site/users']], + ['label' => 'Roles', 'url' => ['site/roles']], + ['label' => 'Statuses', 'url' => ['site/statuses']] + ], + ], + ], + ]); + + $expected = <<
  • Main
    • +
  • Admin
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + $this->removeMockedAction(); + } + + /** + * @see https://github.com/yiisoft/yii2-bootstrap/issues/162 + */ + public function testExplicitActive() + { + $this->mockAction('site', 'index'); + + Nav::$counter = 0; + $out = Nav::widget([ + 'activateItems' => false, + 'items' => [ + [ + 'label' => 'Item1', + 'active' => true, + ], + [ + 'label' => 'Item2', + 'url' => ['site/index'], + ], + ], + ]); + + $expected = <<
  • Item1
    • +
  • Item2
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + $this->removeMockedAction(); + } + + /** + * @see https://github.com/yiisoft/yii2-bootstrap/issues/162 + */ + public function testImplicitActive() + { + $this->mockAction('site', 'index'); + + Nav::$counter = 0; + $out = Nav::widget([ + 'items' => [ + [ + 'label' => 'Item1', + 'active' => true, + ], + [ + 'label' => 'Item2', + 'url' => ['site/index'], + ], + ], + ]); + + $expected = <<
  • Item1
    • +
  • Item2
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + $this->removeMockedAction(); + } + + /** + * @see https://github.com/yiisoft/yii2-bootstrap/issues/162 + */ + public function testExplicitActiveSubitems() + { + $this->mockAction('site', 'index'); + + Nav::$counter = 0; + $out = Nav::widget([ + 'activateItems' => false, + 'items' => [ + [ + 'label' => 'Item1', + ], + [ + 'label' => 'Item2', + 'items' => [ + ['label' => 'Page2', 'content' => 'Page2', 'url' => ['site/index']], + ['label' => 'Page3', 'content' => 'Page3', 'active' => true], + ], + ], + ], + ]); + + $expected = <<
  • Item1
    • +
  • Item2
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + $this->removeMockedAction(); + } + + /** + * @see https://github.com/yiisoft/yii2-bootstrap/issues/162 + */ + public function testImplicitActiveSubitems() + { + $this->mockAction('site', 'index'); + + Nav::$counter = 0; + $out = Nav::widget([ + 'items' => [ + [ + 'label' => 'Item1', + ], + [ + 'label' => 'Item2', + 'items' => [ + ['label' => 'Page2', 'content' => 'Page2', 'url' => ['site/index']], + ['label' => 'Page3', 'content' => 'Page3', 'active' => true], + ], + ], + ], + ]); + + $expected = <<
  • Item1
    • +
  • Item2
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + $this->removeMockedAction(); + } + + public function testDisabled() + { + $this->mockAction('site', 'index'); + + Nav::$counter = 0; + $out = Nav::widget([ + 'items' => [ + [ + 'label' => 'Item1', + 'disabled' => true + ], + [ + 'label' => 'Item2', + 'items' => [ + ['label' => 'Page2', 'content' => 'Page2', 'url' => ['site/index'], 'disabled' => true], + ['label' => 'Page3', 'content' => 'Page3', 'active' => true], + ], + ], + ], + ]); + + $expected = <<
  • Item1
    • +
  • Item2
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + $this->removeMockedAction(); + } + + /** + * @see https://github.com/yiisoft/yii2-bootstrap/issues/96 + * @see https://github.com/yiisoft/yii2-bootstrap/issues/157 + */ + public function testDeepActivateParents() + { + Nav::$counter = 0; + $out = Nav::widget([ + 'activateParents' => true, + 'items' => [ + [ + 'label' => 'Dropdown', + 'items' => [ + [ + 'label' => 'Sub-dropdown', + 'items' => [ + ['label' => 'Page', 'content' => 'Page', 'active' => true], + ], + ], + ], + ], + ], + ]); + + $expected = <<
  • Dropdown
    • +EXPECTED; + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/ProgressTest.php b/tests/ProgressTest.php new file mode 100644 index 0000000..e762637 --- /dev/null +++ b/tests/ProgressTest.php @@ -0,0 +1,98 @@ + 'Progress', + 'percent' => 25, + 'barOptions' => ['class' => 'bg-warning'] + ]); + + $expected = << +
    Progress
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testRender() + { + Progress::$counter = 0; + $out = Progress::widget([ + 'bars' => [ + ['label' => 'Progress', 'percent' => 25] + ] + ]); + + $expected = << +
    Progress
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + /** + * @depends testRender + */ + public function testMultiple() + { + Progress::$counter = 0; + $out = Progress::widget([ + 'bars' => [ + ['label' => '', 'percent' => 15], + ['label' => '', 'percent' => 30, 'options' => ['class' => ['bg-success']]], + ['label' => '', 'percent' => 20, 'options' => ['class' => ['bg-info']]] + ] + ]); + + $expected = << +
    +
    +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + /** + * @see https://github.com/yiisoft/yii2-bootstrap5/issues/121 + */ + public function testRussianLocaleRendering() + { + $this->mockWebApplication([ + 'language' => 'ru-RU', + 'sourceLanguage' => 'en-US', + ]); + + Progress::$counter = 0; + $out = Progress::widget([ + 'bars' => [ + ['label' => 'Progress', 'percent' => 25] + ] + ]); + + $expected = << +
    Progress
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/TabsTest.php b/tests/TabsTest.php new file mode 100644 index 0000000..ff84619 --- /dev/null +++ b/tests/TabsTest.php @@ -0,0 +1,408 @@ + [ + [ + 'label' => 'Page1', + 'content' => 'Page1', + ], + [ + 'label' => 'Page2', + 'content' => 'Page2', + ], + ] + ]); + + $this->assertContainsWithoutLE(' +
    Content 1
    +
    Content 2
    +HTML; + + $this->assertEquals($expected, $html); + } + + public function testHeaderOptions() + { + Tabs::$counter = 0; + $html = Tabs::widget([ + 'items' => [ + [ + 'label' => 'Tab 1', + 'content' => '
    Content 1
    ', + ], + [ + 'label' => 'Tab 2', + 'content' => '
    Content 2
    ', + 'headerOptions' => ['class' => 'col-6'], + ], + [ + 'label' => 'Link', + 'url' => 'http://www.example.com/', + 'headerOptions' => ['class' => 'col-3'], + ], + ], + 'options' => ['class' => 'row'], + 'headerOptions' => ['class' => 'col'], + ]); + + $expected = <<
  • Tab 1
    • +
  • Tab 2
    • +
  • Link
    • +
    Content 1
    +
    Content 2
    +HTML; + + $this->assertEquals($expected, $html); + } +} diff --git a/tests/TestCase.php b/tests/TestCase.php new file mode 100644 index 0000000..e2eae23 --- /dev/null +++ b/tests/TestCase.php @@ -0,0 +1,122 @@ +assertEquals($expected, $actual); + } + + /** + * Asserting two strings equality ignoring line endings + * + * @param string $needle + * @param string $haystack + */ + public function assertContainsWithoutLE(string $needle, string $haystack) + { + $needle = str_replace("\r\n", "\n", $needle); + $haystack = str_replace("\r\n", "\n", $haystack); + + $this->assertContains($needle, $haystack); + } + + /** + * {@inheritDoc} + */ + protected function setUp() + { + parent::setUp(); + $this->mockWebApplication(); + } + + /** + * {@inheritDoc} + */ + protected function tearDown() + { + parent::tearDown(); + $this->destroyApplication(); + } + + /** + * @param array $config + * @param string $appClass + */ + protected function mockWebApplication(array $config = [], string $appClass = '\yii\web\Application') + { + new $appClass(ArrayHelper::merge([ + 'id' => 'testapp', + 'basePath' => __DIR__, + 'vendorPath' => dirname(__DIR__) . '/vendor', + 'aliases' => [ + '@bower' => '@vendor/bower-asset', + '@npm' => '@vendor/npm-asset', + ], + 'components' => [ + 'request' => [ + 'cookieValidationKey' => 'wefJDF8sfdsfSDefwqdxj9oq', + 'scriptFile' => __DIR__ . '/index.php', + 'scriptUrl' => '/index.php', + ] + ] + ], $config)); + } + + /** + * Mocks controller action with parameters + * + * @param string $controllerId + * @param string $actionID + * @param string|null $moduleID + * @param array $params + */ + protected function mockAction(string $controllerId, string $actionID, string $moduleID = null, array $params = []) + { + Yii::$app->controller = $controller = new Controller($controllerId, Yii::$app); + $controller->actionParams = $params; + $controller->action = new Action($actionID, $controller); + + if ($moduleID !== null) { + $controller->module = new Module($moduleID); + } + } + + /** + * Removes controller + */ + protected function removeMockedAction() + { + Yii::$app->controller = null; + } + + /** + * Destroys application in Yii::$app by setting it to null. + */ + protected function destroyApplication() + { + Yii::$app = null; + Yii::$container = new Container(); + } +} diff --git a/tests/ToastTest.php b/tests/ToastTest.php new file mode 100644 index 0000000..9829a00 --- /dev/null +++ b/tests/ToastTest.php @@ -0,0 +1,125 @@ + ['class' => 'toast-body test', 'style' => ['text-align' => 'center']] + ]); + + $expected = << +
    + + +
    +
    + + +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + /** + * @depends testBodyOptions + */ + public function testContainerOptions() + { + Toast::$counter = 0; + + ob_start(); + Toast::begin([ + 'title' => 'Toast title', + 'dateTime' => time() - 60 + ]); + echo 'Woohoo, you\'re reading this text in a toast!'; + Toast::end(); + $out = ob_get_clean(); + + $expected = << +
    +Toast title +a minute ago + +
    +
    +Woohoo, you're reading this text in a toast! + +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testDateTimeOptions() + { + Toast::$counter = 0; + $out = Toast::widget([ + 'title' => 'Toast title', + 'dateTime' => time() - 60, + 'dateTimeOptions' => ['class' => ['toast-date-time'], 'style' => ['text-align' => 'right']] + ]); + + $expected = << +
    +Toast title +a minute ago + +
    +
    + + +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } + + public function testTitleOptions() + { + Toast::$counter = 0; + $out = Toast::widget([ + 'title' => 'Toast title', + 'titleOptions' => ['tag' => 'h5', 'style' => ['text-align' => 'left']] + ]); + + $expected = << +
    +
    Toast title
    + +
    +
    + + +
    + +HTML; + + $this->assertEqualsWithoutLE($expected, $out); + } +} diff --git a/tests/ToggleButtonGroupTest.php b/tests/ToggleButtonGroupTest.php new file mode 100644 index 0000000..c8e53ce --- /dev/null +++ b/tests/ToggleButtonGroupTest.php @@ -0,0 +1,94 @@ + ToggleButtonGroup::TYPE_CHECKBOX, + 'model' => new ToggleButtonGroupTestModel(), + 'attribute' => 'value', + 'items' => [ + '1' => 'item 1', + '2' => 'item 2', + ], + ]); + + $expectedHtml = <<
    +
    +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + /** + * @depends testCheckbox + */ + public function testCheckboxChecked() { + Html::$counter = 0; + $html = ToggleButtonGroup::widget([ + 'type' => ToggleButtonGroup::TYPE_CHECKBOX, + 'model' => new ToggleButtonGroupTestModel(['value' => '2']), + 'attribute' => 'value', + 'items' => [ + '1' => 'item 1', + '2' => 'item 2', + ], + ]); + + $this->assertContains('', $html); + } + + public function testRadio() + { + Html::$counter = 0; + $html = ToggleButtonGroup::widget([ + 'type' => ToggleButtonGroup::TYPE_RADIO, + 'model' => new ToggleButtonGroupTestModel(), + 'attribute' => 'value', + 'items' => [ + '1' => 'item 1', + '2' => 'item 2', + ], + ]); + + $expectedHtml = <<
    +
    +HTML; + $this->assertEqualsWithoutLE($expectedHtml, $html); + } + + /** + * @depends testRadio + */ + public function testRadioChecked() { + Html::$counter = 0; + $html = ToggleButtonGroup::widget([ + 'type' => ToggleButtonGroup::TYPE_RADIO, + 'model' => new ToggleButtonGroupTestModel(['value' => '2']), + 'attribute' => 'value', + 'items' => [ + '1' => 'item 1', + '2' => 'item 2', + ], + ]); + + $this->assertContains('', $html); + } +} + +class ToggleButtonGroupTestModel extends Model +{ + public $value; +} diff --git a/tests/assets/.gitignore b/tests/assets/.gitignore new file mode 100644 index 0000000..c96a04f --- /dev/null +++ b/tests/assets/.gitignore @@ -0,0 +1,2 @@ +* +!.gitignore \ No newline at end of file diff --git a/tests/bootstrap.php b/tests/bootstrap.php new file mode 100644 index 0000000..dece628 --- /dev/null +++ b/tests/bootstrap.php @@ -0,0 +1,14 @@ + + */ +class ExtendedActiveField extends ActiveField +{ + public ?array $horizontalCssClasses = [ + 'offset' => 'col-md-offset-4', + 'label' => 'col-md-4', + 'wrapper' => 'col-md-6', + 'error' => 'col-md-3', + 'hint' => 'col-md-3', + ]; +} diff --git a/tests/data/Singer.php b/tests/data/Singer.php new file mode 100644 index 0000000..fd8ad5e --- /dev/null +++ b/tests/data/Singer.php @@ -0,0 +1,27 @@ + + */ +class Singer extends Model +{ + public $firstName; + public $lastName; + public $test; + + public function rules() + { + return [ + [['lastName'], 'default', 'value' => 'Lennon'], + [['lastName'], 'required'], + [['underscore_style'], 'yii\captcha\CaptchaValidator'], + [['test'], 'required', 'when' => function($model) { return $model->firstName === 'cebe'; }], + ]; + } +} diff --git a/tests/data/User.php b/tests/data/User.php new file mode 100644 index 0000000..0e068c4 --- /dev/null +++ b/tests/data/User.php @@ -0,0 +1,41 @@ + + */ + +namespace yiiunit\extensions\bootstrap5\data; + + +use yii\base\Model; + +class User extends Model +{ + public $firstName; + public $lastName; + public $username; + public $password; + + /** + * {@inheritdoc} + */ + public function rules() + { + return [ + ['username', 'string', 'min' => 4], + ['password', 'string', 'min' => 8, 'max' => '20'], + [['username', 'password'], 'required'] + ]; + } + + /** + * {@inheritdoc} + */ + public function attributeHints() + { + return [ + 'username' => 'Your username must be at least 4 characters long', + 'password' => 'Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.' + ]; + } +}