Description

Add the "vertical" Tabler layout to the bundle.

Tabler demo link : https://preview.tabler.io/layout-vertical.html

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [x] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

Description

Add accordion component. see #99

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [x] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

Description

Related to #89

Usage

{% from '@Tabler/components/alert.html.twig' import alert %}

<div class="row">
    <div class="col-6">
        {{ alert('danger', 'Description' ,'Title', 'fas fa-exclamation-triangle', true) }}
        {{ alert('danger', 'Description' ,'Title', 'fas fa-exclamation-triangle') }}
        {{ alert('danger', 'Description' ,'Title', 'fas fa-exclamation-triangle') }} {# Error here #}
        {{ alert('warning', 'Description' ,'Title') }}
        {{ alert('warning', null ,'Title') }}
        {{ alert('warning', null ,'Title', 'fas fa-exclamation-triangle') }}
        {{ alert('success', 'Description') }}
        {{ alert('success', 'Description', null, 'fas fa-exclamation-triangle') }}
        {{ alert('primary') }}
    </div>

    <div class="col-6">
        {{ alert({title : 'Title V2', description: 'Description V2', icon : 'warning', dismissible : true}) }}
        {{ alert({title : 'Title V2', description: 'Description V2', icon : 'warning'}) }}
        {{ alert({title : 'Title V2', description: 'Description V2', icon : 'warning', important: true}) }} {# Looks good now #}
        {{ alert({title : 'Title V2', description: 'Description V2', type : 'warning'}) }}
        {{ alert({title : 'Title V2', type : 'warning'}) }}
        {{ alert({title : 'Title V2', icon : 'warning', type : 'warning'}) }}
        {{ alert({description : 'Description V2', type : 'success'}) }}
        {{ alert({description : 'Description V2', type : 'success', icon : 'warning'}) }}
        {{ alert({type : 'primary'}) }}
    </div>
</div>

Preview

Types of changes

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [ ] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

Context 📋

In the page-header, I want to add buttons like Create new,

and still have the breadcrumb: Items > Actions.

Current state 👀

Page header buttons are at the position of Breadcrumb. https://github.com/kevinpapst/TablerBundle/blob/014debb4a80785a99d070259b62cc34d4be2ad90/templates/layout.html.twig#L96-L109

Problem ❌

With that current state,

• If I want to add my buttons, I'll put them INSIDE breadcrumb block with custom HTML to allow to have Buttons + Breadcrumb.
• Plus, we are declaring a block about Breadcrumb with buttons on default values. In that case, it's not really a "Breadcrumb".

Possible solution ✔️

Split current {% block breadcrumb %} into 3 blocks

{% block page_header_right %}
    <div class="col-auto ms-auto d-print-none">
        {% block page_header_actions %}
            <div class="btn-list">
                <a href="#" class="btn btn-white">
                    New view
                </a>
                <a href="#" class="btn btn-primary d-none d-sm-inline-block">
                    Create new report
                </a>
            </div>
        {% endblock %}
        {% block breadcrumb_container %}
            <div class="text-end">
                {% block breadcrumb %}
                    Entity > Action > ...
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}

Description

Attention: This can a BC break if you used more than an argument in the |icon filter or more than one argument in the tabler_icon() function before.

Fixes #68

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [ ] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

https://github.com/kevinpapst/TablerBundle/blob/8af12de25e69acc6658fed69eb331a2c532b6f47/templates/components/button.html.twig#L43

If using Tabler JS import file:

• data-toggle="tooltip" supposed to be data-bs-toggle="tooltip" https://github.com/tabler/tabler/blob/74985f8d008395d695d5ab1ad5b729684b00b8af/src/js/src/tooltip.js#L3

Should we use Tabler default behavior or Bootstrap configuration ?

When using the blocks for header titles, there names can be not comprehended by devs (and me).

We are talking about subtitle and title. Or in Tabler, it's more pretitle and title.

Example

My page is a List of products that come from Products. Breadcrumb would be : Products > List of products.

| | Tabler.io | TablerBundle | |:---:|:---:|:---:| | Variable | | |
| Example | | |

I think it's more normal/user friendly to have the main title more bigger and wider than the pretitle.

⚠️ Renaming a block can break existing projects ⚠️

See https://preview.tabler.io/docs/statuses.html#status-indicator

Usage

{% from '@Tabler/components/status_indicator.html.twig' import status_indicator %}

<div class="row align-items-center text-start">
    <div class="col p-0">
        {{ status_indicator({color : item.open ? 'green' : 'red', animated : false, extraClass :'float-end' }) }}
    </div>
    <div class="col p-0">
        {{ item.open ? 'label.opened'|trans : 'label.closed'|trans }}
    </div>
</div>

Preview

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [ ] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

Description

I'm sorry but I have to 😢.

Changes:

• Simple way to disable icon from button() macro. Give false to icon parameter.
• Add label color into macro values parameter.

Demo

Code

Twig

{{ button('save', { title : 'action.save'|trans}) }}
{{ button('save', { title : 'action.save'|trans}, false) }}
{{ button('save', { title : 'action.save'|trans, label: 'test'}) }}
{{ button('save', { title : 'action.save'|trans}, 'success') }}
{{ button(false , { title : 'action.save'|trans}) }}
{{ button(false , { title : 'action.save'|trans}, 'link') }}
{{ button(false , { title : 'action.save'|trans}, 'success') }}
{{ button('save', { title : 'action.save'|trans, combined: true}, 'success') }}
{{ button('save', { title : 'action.save'|trans, combined: true, label: 'test', labelColor: 'red'}, 'success') }}

HTML rendered

<a class="btn  btn-icon" href="#" data-toggle="tooltip" data-bs-placement="top" title="Enregistrer"><i class="icon fas fa-save"></i></a>
<a class="btn  btn-icon" href="#" data-toggle="tooltip" data-bs-placement="top" title="Enregistrer"><i class="icon fas fa-save"></i></a>
<a class="btn" href="#" data-toggle="tooltip" data-bs-placement="top" title="Enregistrer"><i class="icon fas fa-save"></i><span class="badge bg-yellow ">test</span></a>
<a class="btn btn-success  btn-icon" href="#" data-toggle="tooltip" data-bs-placement="top" title="Enregistrer"><i class="icon fas fa-save"></i></a>
<a class="btn" href="#">Enregistrer</a>
<a class="btn btn-link" href="#">Enregistrer</a>
<a class="btn btn-success" href="#">Enregistrer</a>
<a class="btn btn-success" href="#"><i class="icon fas fa-save"></i>
    Enregistrer
</a>
<a class="btn btn-success" href="#"><i class="icon fas fa-save"></i>
    Enregistrer
    <span class="badge bg-red ms-1">test</span>
</a>

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [ ] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

Description

Want to give it a try @cavasinf @wucherpfennig before merge?

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [ ] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

I'm currently migrating my project to Symfony 5. FOSUserBundle being deprecated, I've unplugged it from my project.

But now I've an error at that line:

https://github.com/kevinpapst/TablerBundle/blob/5110ae631e47581880c668d456c20a9dd3d2bafa/templates/security.html.twig#L68-L70

❔ Who define that variable ❔

If I change the line by {% if csrf_token | default(true) %}, it works. What is the purpose of that "if" condition ?

Description

{% set raw_html_example %}
    <div class="card-body">
        <h3><span class="badge bg-success">Active</span> content</h3>
        <p class="mb-0">With some text</p>
    </div>
    <div class="card-footer">
        <div class="d-flex">
            <a href="#" class="btn btn-link">Cancel</a>
            <a href="#" class="btn btn-primary ms-auto">Go somewhere</a>
        </div>
    </div>
{% endset %}

{% set items = [
    {
        name : 'First',
        content : 'First content',
    },
    {
        name : '<i class="fas fa-times me-2"></i>Disabled',
        content : 'Disabled content',
        disabled : true,
        raw : true,
    },
    {
        name : 'Active',
        content : raw_html_example,
        active : true,
        raw : true,
    },
    {
        name : 'Url',
        url : 'https://www.w3schools.com/',
    },
] %}

{% embed '@Tabler/embeds/card_nav.html.twig' with { items : items} %}{% endembed %}

{% embed '@Tabler/embeds/card_nav.html.twig' with { items : items, pills: true} %}
    {% block card_nav_after %}
        <li class="nav-item ms-auto">
            <a class="nav-link" href="#">
                <i class="fas fa-cog"></i>
            </a>
        </li>
    {% endblock %}
{% endembed %}

{% embed '@Tabler/embeds/card_nav.html.twig' with { items : items, tabs : true} %}{% endembed %}

{% embed '@Tabler/embeds/card_nav.html.twig' with { items : items, tabs : true, bottom : true} %}{% endembed %}

{% embed '@Tabler/embeds/card_nav.html.twig' with { items : items, tabs : true} %}
    {% block card_content %}
        <div class="card">
            <div class="card-body">
                <h2>Single page/tab content</h2>
                <p>
                    I'm a content that will not be changed.<br/>
                    Even if you click tabs!
                </p>
                <blockquote>Useful when one tab correspond to one specifics URL</blockquote>
            </div>
        </div>
    {% endblock %}
{% endembed %}

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [x] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

Big BC BREAK but we should rename blocks inside card embed.

https://github.com/kevinpapst/TablerBundle/blob/a2d91a62db826e770c645515286615668673cf1f/templates/embeds/card.html.twig#L24

They are called box_xxxxx as a remnant of AdminLTE. And classes card-xxxx We should stick to Bootstrap and/or Tabler name convention and use card_xxxx instead.

WDYT ?

AdminLTEBundle supported KnpMenu, which was nice. It's a powerful library.

I see that the key for knp_menu support is in the config, but if it's enabled it fails, because knp-menu.yml is missing from the config.

I've added that file, but of course the rendering doesn't work. @kevinpapst , is that something you can bring over from the old bundle? Especially since it looks like we should have vertical menu support soon.

Description

From https://github.com/kevinpapst/TablerBundle/issues/10

More here: https://github.com/SymfonyCasts/reset-password-bundle

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

• [ ] I updated the documentation (see here)
• [x] I agree that this code will be published under the MIT license

Given that this is a new bundle, with no existing user base with promises of backwards compatibility, I'd like to advocate for PHP8 and dropping Symfony support less than 5.4.

In particular, I really like using attributes instead of annotations. Also, strong type-hinting makes coding easier and more robust.

I've switched to 8.1, and although I'm not using any 8.1 specific features yet, given the newness of this bundle, I'm not sure how many people we'd lose if that were a requirement.

For example, MenuItemModel could be MUCH shorter by defining properties in the constructor (PHP 8.0) and I think some of those properties are readonly, and could be defined as such in the constructor (PHP 8.1)

While not essential, I think it would make for a better bundle, and certainly a better developer experience.

When using Symfony FormType and form_row() or form_widget(),

Final input render HTML are not related to Tabler.io template.

First what is input today, Second what it should be.

Update required in templates/layout/form-theme.html.twig and templates/layout/form-theme-horizontal.html.twig