Jump to content
Fórum Script Brasil
  • 0

modal.blade.php


Frank K Hosaka

Question

Eu fiz uma grande besteira e assim eu perdi o meu acesso ao projeto Chirp, o primeiro projeto que aparece no tutorial do Laravel. A única solução que eu encontrei foi começar do zero para descobrir qual foi a besteira que eu fiz. A primeira etapa é criar um projeto vazio, mas ele não é nada vazio. A página Welcome já traz embutido o Tailwind CSS.

A segunda etapa é a instalação do componente Breezer do Laravel, ele define a rotina de bloqueio e autenticação do usuário. Nessa etapa, o editor VS Code encontrou dois problemas nessa linha: 

style="display: {{ $show ? 'block' : 'none' }}"

O CS Code disse "property value expected" e "at-rule or selector expected". Procurei a solução do problema no Google, mas nada funcionou. Tentei executar o modal.blade.php, criando uma rota para ele, mas eu não consegui enxergar coisa alguma. Tudo o que eu sei é que esse arquivo é executado dentro da rotina da conta do usuário, onde ele redefine ou elimina a conta.

Enfim, só sobrou a contemplação. Quem usa essa gramática de definir o estilo no meio do caminho era somente eu. Mas desconfio que eu não sou o único. Desconfio que isso é coisa do Tailwind CSS, mas não posso provar porque eu não consegui instalar o CSS no meu notebook. E assim, o meu estudo do Laravel fica comprometido, porque eu também não sei nada sobre o Tailwind CSS.

Em seguida faço a listagem de todo o arquivo  modal.blade.php e que o Laravel coloca junto com o app.blade.php onde tem o comando <!DOCTYPE html>:

@props([
    'name',
    'show' => false,
    'maxWidth' => '2xl'
])

@php
$maxWidth = [
    'sm' => 'sm:max-w-sm',
    'md' => 'sm:max-w-md',
    'lg' => 'sm:max-w-lg',
    'xl' => 'sm:max-w-xl',
    '2xl' => 'sm:max-w-2xl',
][$maxWidth];
@endphp

<div
    x-data="{
        show: @js($show),
        focusables() {
            // All focusable element types...
            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
            return [...$el.querySelectorAll(selector)]
                // All non-disabled elements...
                .filter(el => ! el.hasAttribute('disabled'))
        },
        firstFocusable() { return this.focusables()[0] },
        lastFocusable() { return this.focusables().slice(-1)[0] },
        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
    }"
    x-init="$watch('show', value => {
        if (value) {
            document.body.classList.add('overflow-y-hidden');
            {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
        } else {
            document.body.classList.remove('overflow-y-hidden');
        }
    })"
    x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
    x-on:close.stop="show = false"
    x-on:keydown.escape.window="show = false"
    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
    x-show="show"
    class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
    style="display: {{ $show ? 'block' : 'none' }}"
>
    <div
        x-show="show"
        class="fixed inset-0 transform transition-all"
        x-on:click="show = false"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    >
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

    <div
        x-show="show"
        class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    >
        {{ $slot }}
    </div>
</div>

 

Edited by Frank K Hosaka
Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
31 minutos atrás, Frank K Hosaka disse:

Eu fiz uma grande besteira e assim eu perdi o meu acesso ao projeto Chirp, o primeiro projeto que aparece no tutorial do Laravel. A única solução que eu encontrei foi começar do zero para descobrir qual foi a besteira que eu fiz. A primeira etapa é criar um projeto vazio, mas ele não é nada vazio. A página Welcome já traz embutido o Tailwind CSS.

A segunda etapa é a instalação do componente Breezer do Laravel, ele define a rotina de bloqueio e autenticação do usuário. Nessa etapa, o editor VS Code encontrou dois problemas nessa linha: 

style="display: {{ $show ? 'block' : 'none' }}"

O CS Code disse "property value expected" e "at-rule or selector expected". Procurei a solução do problema no Google, mas nada funcionou. Tentei executar o modal.blade.php, criando uma rota para ele, mas eu não consegui enxergar coisa alguma. Tudo o que eu sei é que esse arquivo é executado dentro da rotina da conta do usuário, onde ele redefine ou elimina a conta.

Enfim, só sobrou a contemplação. Quem usa essa gramática de definir o estilo no meio do caminho era somente eu. Mas desconfio que eu não sou o único. Desconfio que isso é coisa do Tailwind CSS, mas não posso provar porque eu não consegui instalar o CSS no meu notebook. E assim, o meu estudo do Laravel fica comprometido, porque eu também não sei nada sobre o Tailwind CSS.

Em seguida faço a listagem de todo o arquivo  modal.blade.php e que o Laravel coloca junto com o app.blade.php onde tem o comando <!DOCTYPE html>:

@props([
    'name',
    'show' => false,
    'maxWidth' => '2xl'
])

@php
$maxWidth = [
    'sm' => 'sm:max-w-sm',
    'md' => 'sm:max-w-md',
    'lg' => 'sm:max-w-lg',
    'xl' => 'sm:max-w-xl',
    '2xl' => 'sm:max-w-2xl',
][$maxWidth];
@endphp

<div
    x-data="{
        show: @js($show),
        focusables() {
            // All focusable element types...
            let selector = 'a, button, input:not([type=\'hidden\']), textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'
            return [...$el.querySelectorAll(selector)]
                // All non-disabled elements...
                .filter(el => ! el.hasAttribute('disabled'))
        },
        firstFocusable() { return this.focusables()[0] },
        lastFocusable() { return this.focusables().slice(-1)[0] },
        nextFocusable() { return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() },
        prevFocusable() { return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() },
        nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
        prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
    }"
    x-init="$watch('show', value => {
        if (value) {
            document.body.classList.add('overflow-y-hidden');
            {{ $attributes->has('focusable') ? 'setTimeout(() => firstFocusable().focus(), 100)' : '' }}
        } else {
            document.body.classList.remove('overflow-y-hidden');
        }
    })"
    x-on:open-modal.window="$event.detail == '{{ $name }}' ? show = true : null"
    x-on:close.stop="show = false"
    x-on:keydown.escape.window="show = false"
    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
    x-show="show"
    class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
    style="display: {{ $show ? 'block' : 'none' }}"
>
    <div
        x-show="show"
        class="fixed inset-0 transform transition-all"
        x-on:click="show = false"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
    >
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

    <div
        x-show="show"
        class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
        x-transition:enter="ease-out duration-300"
        x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave="ease-in duration-200"
        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
    >
        {{ $slot }}
    </div>
</div>

 

Tentei usar o PHP para testar o código com o CDN da Tailwind, mas não deu certo: a mensagem que eu recebi é essa: cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.9k
×
×
  • Create New...