Skip to content

Commit

Permalink
alpinejs warnings, checked as default on radio, toggle & checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@devajmeireles
devajmeireles committed Dec 1, 2023
1 parent 7f39449 commit ab9709a
Show file tree
Hide file tree
Showing 9 changed files with 132 additions and 109 deletions.
2 changes: 1 addition & 1 deletion app/Enums/Examples/DarkTheme.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,6 @@ class DarkTheme
<!-- ... -->
<p class="text-gray-700 dark:text-white">Hello World</p>
<div class="bg-red-500 dark:bg-white">Hello World</div>
<div class="bg-white dark:gray-800">Hello World</div>
HTML;
}
10 changes: 10 additions & 0 deletions app/Enums/Examples/Installation.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,16 @@ class Installation
plugins: [forms], // [tl! highlight]
HTML;

public const ALPINE = <<<'HTML'
<html>
<body>
<!-- ... -->
@livewireScripts
</body>
</html>
HTML;

public const BUILD = <<<'HTML'
npm run build && php artisan optimize:clear
HTML;
Expand Down
46 changes: 23 additions & 23 deletions composer.lock
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion contents/on-this-page.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
"docs.installation": {
"0": "Requirements",
"1": "Installation",
"2": "Livewire SPA Mode"
"3": "AlpineJS Requirement",
"4": "Livewire SPA Mode"
},
"docs.form.input": {
"0": "Basic Usage",
Expand Down
52 changes: 26 additions & 26 deletions resources/views/documentation/form/checkbox.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,32 @@
<x-section title="Color Variations">
<x-preview language="blade" :contents="$colors">
<div class="space-y-2">
<x-checkbox label="Primary" />
<x-checkbox color="secondary" label="Secondary" />
<x-checkbox color="slate" label="Slate" />
<x-checkbox color="gray" label="Gray" />
<x-checkbox color="zinc" label="Zinc" />
<x-checkbox color="neutral" label="Neutral" />
<x-checkbox color="stone" label="Stone" />
<x-checkbox color="red" label="Red" />
<x-checkbox color="orange" label="Orange" />
<x-checkbox color="amber" label="Amber" />
<x-checkbox color="yellow" label="Yellow" />
<x-checkbox color="lime" label="Lime" />
<x-checkbox color="green" label="Green" />
<x-checkbox color="emerald" label="Emerald" />
<x-checkbox color="teal" label="Teal" />
<x-checkbox color="cyan" label="Cyan" />
<x-checkbox color="sky" label="Sky" />
<x-checkbox color="blue" label="Blue" />
<x-checkbox color="indigo" label="Indigo" />
<x-checkbox color="violet" label="Violet" />
<x-checkbox color="purple" label="Purple" />
<x-checkbox color="fuchsia" label="Fuchsia" />
<x-checkbox color="pink" label="Pink" />
<x-checkbox color="rose" label="Rose" />
<x-checkbox color="black" label="Black" />
<x-checkbox color="white" label="White" />
<x-checkbox label="Primary" checked />
<x-checkbox color="secondary" label="Secondary" checked />
<x-checkbox color="slate" label="Slate" checked />
<x-checkbox color="gray" label="Gray" checked />
<x-checkbox color="zinc" label="Zinc" checked />
<x-checkbox color="neutral" label="Neutral" checked />
<x-checkbox color="stone" label="Stone" checked />
<x-checkbox color="red" label="Red" checked />
<x-checkbox color="orange" label="Orange" checked />
<x-checkbox color="amber" label="Amber" checked />
<x-checkbox color="yellow" label="Yellow" checked />
<x-checkbox color="lime" label="Lime" checked />
<x-checkbox color="green" label="Green" checked />
<x-checkbox color="emerald" label="Emerald" checked />
<x-checkbox color="teal" label="Teal" checked />
<x-checkbox color="cyan" label="Cyan" checked />
<x-checkbox color="sky" label="Sky" checked />
<x-checkbox color="blue" label="Blue" checked />
<x-checkbox color="indigo" label="Indigo" checked />
<x-checkbox color="violet" label="Violet" checked />
<x-checkbox color="purple" label="Purple" checked />
<x-checkbox color="fuchsia" label="Fuchsia" checked />
<x-checkbox color="pink" label="Pink" checked />
<x-checkbox color="rose" label="Rose" checked />
<x-checkbox color="black" label="Black" checked />
<x-checkbox color="white" label="White" checked />
</div>
</x-preview>
</x-section>
Expand Down
52 changes: 26 additions & 26 deletions resources/views/documentation/form/radio.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,32 @@
<x-section title="Color Variations">
<x-preview language="blade" :contents="$colors">
<div class="space-y-2">
<x-radio label="Primary" />
<x-radio color="secondary" label="Secondary" />
<x-radio color="slate" label="Slate" />
<x-radio color="gray" label="Gray" />
<x-radio color="zinc" label="Zinc" />
<x-radio color="neutral" label="Neutral" />
<x-radio color="stone" label="Stone" />
<x-radio color="red" label="Red" />
<x-radio color="orange" label="Orange" />
<x-radio color="amber" label="Amber" />
<x-radio color="yellow" label="Yellow" />
<x-radio color="lime" label="Lime" />
<x-radio color="green" label="Green" />
<x-radio color="emerald" label="Emerald" />
<x-radio color="teal" label="Teal" />
<x-radio color="cyan" label="Cyan" />
<x-radio color="sky" label="Sky" />
<x-radio color="blue" label="Blue" />
<x-radio color="indigo" label="Indigo" />
<x-radio color="violet" label="Violet" />
<x-radio color="purple" label="Purple" />
<x-radio color="fuchsia" label="Fuchsia" />
<x-radio color="pink" label="Pink" />
<x-radio color="rose" label="Rose" />
<x-radio color="black" label="Black" />
<x-radio color="white" label="White" />
<x-radio label="Primary" checked />
<x-radio color="secondary" label="Secondary" checked />
<x-radio color="slate" label="Slate" checked />
<x-radio color="gray" label="Gray" checked />
<x-radio color="zinc" label="Zinc" checked />
<x-radio color="neutral" label="Neutral" checked />
<x-radio color="stone" label="Stone" checked />
<x-radio color="red" label="Red" checked />
<x-radio color="orange" label="Orange" checked />
<x-radio color="amber" label="Amber" checked />
<x-radio color="yellow" label="Yellow" checked />
<x-radio color="lime" label="Lime" checked />
<x-radio color="green" label="Green" checked />
<x-radio color="emerald" label="Emerald" checked />
<x-radio color="teal" label="Teal" checked />
<x-radio color="cyan" label="Cyan" checked />
<x-radio color="sky" label="Sky" checked />
<x-radio color="blue" label="Blue" checked />
<x-radio color="indigo" label="Indigo" checked />
<x-radio color="violet" label="Violet" checked />
<x-radio color="purple" label="Purple" checked />
<x-radio color="fuchsia" label="Fuchsia" checked />
<x-radio color="pink" label="Pink" checked />
<x-radio color="rose" label="Rose" checked />
<x-radio color="black" label="Black" checked />
<x-radio color="white" label="White" checked />
</div>
</x-preview>
</x-section>
Expand Down
52 changes: 26 additions & 26 deletions resources/views/documentation/form/toggle.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,32 @@
<x-section title="Color Variations">
<x-preview language="blade" :contents="$colors">
<div class="space-y-2">
<x-toggle label="Primary" />
<x-toggle color="secondary" label="Secondary" />
<x-toggle color="slate" label="Slate" />
<x-toggle color="gray" label="Gray" />
<x-toggle color="zinc" label="Zinc" />
<x-toggle color="neutral" label="Neutral" />
<x-toggle color="stone" label="Stone" />
<x-toggle color="red" label="Red" />
<x-toggle color="orange" label="Orange" />
<x-toggle color="amber" label="Amber" />
<x-toggle color="yellow" label="Yellow" />
<x-toggle color="lime" label="Lime" />
<x-toggle color="green" label="Green" />
<x-toggle color="emerald" label="Emerald" />
<x-toggle color="teal" label="Teal" />
<x-toggle color="cyan" label="Cyan" />
<x-toggle color="sky" label="Sky" />
<x-toggle color="blue" label="Blue" />
<x-toggle color="indigo" label="Indigo" />
<x-toggle color="violet" label="Violet" />
<x-toggle color="purple" label="Purple" />
<x-toggle color="fuchsia" label="Fuchsia" />
<x-toggle color="pink" label="Pink" />
<x-toggle color="rose" label="Rose" />
<x-toggle color="black" label="Black" />
<x-toggle color="white" label="White" />
<x-toggle label="Primary" checked />
<x-toggle color="secondary" label="Secondary" checked />
<x-toggle color="slate" label="Slate" checked />
<x-toggle color="gray" label="Gray" checked />
<x-toggle color="zinc" label="Zinc" checked />
<x-toggle color="neutral" label="Neutral" checked />
<x-toggle color="stone" label="Stone" checked />
<x-toggle color="red" label="Red" checked />
<x-toggle color="orange" label="Orange" checked />
<x-toggle color="amber" label="Amber" checked />
<x-toggle color="yellow" label="Yellow" checked />
<x-toggle color="lime" label="Lime" checked />
<x-toggle color="green" label="Green" checked />
<x-toggle color="emerald" label="Emerald" checked />
<x-toggle color="teal" label="Teal" checked />
<x-toggle color="cyan" label="Cyan" checked />
<x-toggle color="sky" label="Sky" checked />
<x-toggle color="blue" label="Blue" checked />
<x-toggle color="indigo" label="Indigo" checked />
<x-toggle color="violet" label="Violet" checked />
<x-toggle color="purple" label="Purple" checked />
<x-toggle color="fuchsia" label="Fuchsia" checked />
<x-toggle color="pink" label="Pink" checked />
<x-toggle color="rose" label="Rose" checked />
<x-toggle color="black" label="Black" checked />
<x-toggle color="white" label="White" checked />
</div>
</x-preview>
</x-section>
Expand Down
16 changes: 11 additions & 5 deletions resources/views/documentation/installation.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,17 @@
</x-warning>
<p class="mt-4">5. Build the assets and do a full cleanup in the Laravel:</p>
<x-code language="shell" :contents="$build" />
<div class="mt-4">
<x-alert icon="check" color="green">
You are ready to create your first TallStackUI components.
</x-alert>
</div>
</x-section>
<x-section title="AlpineJS Requirement" :copy="false">
<p>
Livewire 3 brings AlpineJS together when you have Livewire components in the page. This made life
easier for TallStack developers, but it brought up one concern that you need to be aware of.
<u>You need to ensure that AlpineJS is always available, even when you are not in a Livewire
component but want to use TallStackUI components.</u> To do this, make sure you load AlpineJS
independently of Livewire using the <x-block>@livewireScript</x-block> directive:
</p>
<x-code language="blade" :contents="$alpine" :copy="false" />
<a href="https://livewire.laravel.com/docs/installation#manually-including-livewires-frontend-assets" class="underline" target="_blank">Learn more about it in the Livewire documentation.</a>
</x-section>
<x-section title="Livewire SPA Mode" :copy="false">
<p>
Expand Down
Loading

0 comments on commit ab9709a

Please sign in to comment.