Add Actions layout playground for Blade, React, Vue, and Svelte

Author: danharrin

app/Filament/Pages/ActionsPlayground.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Filament\Pages;
+
+use App\Filament\Widgets\ActionsBlade;
+use App\Filament\Widgets\ActionsReact;
+use App\Filament\Widgets\ActionsSvelte;
+use App\Filament\Widgets\ActionsVue;
+use Filament\Pages\Dashboard;
+
+class ActionsPlayground extends Dashboard
+{
+    protected static string $routePath = 'actions-playground';
+
+    protected static ?string $title = 'Actions playground';
+
+    public function getWidgets(): array
+    {
+        return [ActionsBlade::class, ActionsReact::class, ActionsVue::class, ActionsSvelte::class];
+    }
+}

app/Filament/Widgets/ActionsBlade.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace App\Filament\Widgets;
+
+use Filament\Widgets\Widget;
+
+class ActionsBlade extends Widget
+{
+    protected string $view = 'filament.widgets.actions-blade';
+}

app/Filament/Widgets/ActionsReact.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Filament\Widgets;
+
+use Filament\Widgets\Concerns\HasJsRenderer;
+use Filament\Widgets\Widget;
+use Illuminate\Support\Facades\Vite;
+
+class ActionsReact extends Widget
+{
+    use HasJsRenderer;
+
+    public function getRenderer(): string
+    {
+        return Vite::asset('resources/js/filament/widgets/actions-react.jsx');
+    }
+}

app/Filament/Widgets/ActionsSvelte.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Filament\Widgets;
+
+use Filament\Widgets\Concerns\HasJsRenderer;
+use Filament\Widgets\Widget;
+use Illuminate\Support\Facades\Vite;
+
+class ActionsSvelte extends Widget
+{
+    use HasJsRenderer;
+
+    public function getRenderer(): string
+    {
+        return Vite::asset('resources/js/filament/widgets/actions-svelte.svelte.js');
+    }
+}

app/Filament/Widgets/ActionsVue.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App\Filament\Widgets;
+
+use Filament\Widgets\Concerns\HasJsRenderer;
+use Filament\Widgets\Widget;
+use Illuminate\Support\Facades\Vite;
+
+class ActionsVue extends Widget
+{
+    use HasJsRenderer;
+
+    public function getRenderer(): string
+    {
+        return Vite::asset('resources/js/filament/widgets/actions-vue.js');
+    }
+}

resources/css/filament/admin/theme.css

@@ -164,3 +164,28 @@
 .callout-demo {
     @apply grid gap-4;
 }
+
+.actions-demo {
+    @apply grid gap-4;
+
+    & form {
+        @apply grid gap-4;
+    }
+
+    & form > label {
+        @apply grid gap-2 text-sm;
+    }
+
+    & form input {
+        @apply min-w-0 rounded-md border border-gray-300 bg-white p-2 text-gray-950 dark:border-gray-600 dark:bg-gray-900 dark:text-white;
+    }
+
+    & button,
+    & a {
+        @apply text-primary-700 ring-primary-300 dark:text-primary-300 dark:ring-primary-700 rounded-md px-3 py-2 text-sm font-medium ring-1;
+    }
+
+    & p {
+        @apply text-sm;
+    }
+}

resources/js/filament/widgets/ActionsSvelte.svelte

@@ -0,0 +1,68 @@
+<script>
+    import Actions from '../../../../vendor/filament/support/resources/js/svelte/Actions.svelte'
+    let alignment = $state('start')
+    let fullWidth = $state(false)
+    let visible = $state(true)
+    let name = $state('Community garden')
+    let message = $state('No changes saved.')
+</script>
+
+<section class="actions-demo" data-framework="svelte">
+    <h2 class="fi-section-header-heading">Svelte · JavaScript</h2>
+    <form
+        onsubmit={(event) => {
+            event.preventDefault()
+            message = `Saved ${name} locally.`
+        }}
+    >
+        <label
+            >Project name <input bind:value={name} data-testid="name" /></label
+        >
+        {#if visible}<Actions {alignment} {fullWidth} data-testid="actions">
+                <button type="submit" data-testid="save">Save</button>
+                <button
+                    type="button"
+                    data-testid="archive"
+                    onclick={() => (message = `Archived ${name} locally.`)}
+                    >Archive</button
+                >
+                <a href="#svelte-project">View project</a>
+            </Actions>{/if}
+    </form>
+    <div class="icon-demo-controls">
+        <label
+            >Alignment <select bind:value={alignment} data-testid="alignment"
+                >{#each ['start', 'left', 'center', 'end', 'right', 'between', 'justify'] as value}<option
+                        >{value}</option
+                    >{/each}</select
+            ></label
+        >
+        <label
+            ><input
+                bind:checked={fullWidth}
+                type="checkbox"
+                data-testid="full-width"
+            />Full width</label
+        >
+        <label
+            ><input
+                bind:checked={visible}
+                type="checkbox"
+                data-testid="visible"
+            />Show actions</label
+        >
+        <button
+            type="button"
+            data-testid="reset"
+            onclick={() => {
+                alignment = 'start'
+                fullWidth = false
+                visible = true
+                name = 'Community garden'
+                message = 'No changes saved.'
+            }}>Reset</button
+        >
+    </div>
+    <p role="status" data-testid="result">{message}</p>
+    <p id="svelte-project" tabindex="-1">Community garden · Project details</p>
+</section>

resources/js/filament/widgets/ActionsVue.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref } from 'vue'
+import Actions from '../../../../vendor/filament/support/resources/js/vue/Actions.vue'
+const alignment = ref('start')
+const fullWidth = ref(false)
+const visible = ref(true)
+const name = ref('Community garden')
+const message = ref('No changes saved.')
+function reset() {
+    alignment.value = 'start'
+    fullWidth.value = false
+    visible.value = true
+    name.value = 'Community garden'
+    message.value = 'No changes saved.'
+}
+</script>
+<template>
+    <section class="actions-demo" data-framework="vue">
+        <h2 class="fi-section-header-heading">Vue · JavaScript</h2>
+        <form @submit.prevent="message = `Saved ${name} locally.`">
+            <label
+                >Project name <input v-model="name" data-testid="name"
+            /></label>
+            <Actions
+                v-if="visible"
+                :alignment="alignment"
+                :full-width="fullWidth"
+                data-testid="actions"
+            >
+                <button type="submit" data-testid="save">Save</button>
+                <button
+                    type="button"
+                    data-testid="archive"
+                    @click="message = `Archived ${name} locally.`"
+                >
+                    Archive
+                </button>
+                <a href="#vue-project">View project</a>
+            </Actions>
+        </form>
+        <div class="icon-demo-controls">
+            <label
+                >Alignment
+                <select v-model="alignment" data-testid="alignment">
+                    <option
+                        v-for="value in [
+                            'start',
+                            'left',
+                            'center',
+                            'end',
+                            'right',
+                            'between',
+                            'justify',
+                        ]"
+                        :key="value"
+                    >
+                        {{ value }}
+                    </option>
+                </select></label
+            >
+            <label
+                ><input
+                    v-model="fullWidth"
+                    type="checkbox"
+                    data-testid="full-width"
+                />Full width</label
+            >
+            <label
+                ><input
+                    v-model="visible"
+                    type="checkbox"
+                    data-testid="visible"
+                />Show actions</label
+            >
+            <button type="button" data-testid="reset" @click="reset">
+                Reset
+            </button>
+        </div>
+        <p role="status" data-testid="result">{{ message }}</p>
+        <p id="vue-project" tabindex="-1">Community garden · Project details</p>
+    </section>
+</template>

resources/js/filament/widgets/actions-react.jsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import Actions from '../../../../vendor/filament/support/resources/js/react/Actions'
+
+function ActionsReact() {
+    const [alignment, setAlignment] = useState('start')
+    const [fullWidth, setFullWidth] = useState(false)
+    const [visible, setVisible] = useState(true)
+    const [name, setName] = useState('Community garden')
+    const [message, setMessage] = useState('No changes saved.')
+    return (
+        <section className="actions-demo" data-framework="react">
+            <h2 className="fi-section-header-heading">React · JavaScript</h2>
+            <form
+                onSubmit={(event) => {
+                    event.preventDefault()
+                    setMessage(`Saved ${name} locally.`)
+                }}
+            >
+                <label>
+                    Project name{' '}
+                    <input
+                        data-testid="name"
+                        value={name}
+                        onChange={(event) => setName(event.target.value)}
+                    />
+                </label>
+                {visible && (
+                    <Actions
+                        alignment={alignment}
+                        fullWidth={fullWidth}
+                        data-testid="actions"
+                    >
+                        <button type="submit" data-testid="save">
+                            Save
+                        </button>
+                        <button
+                            type="button"
+                            data-testid="archive"
+                            onClick={() =>
+                                setMessage(`Archived ${name} locally.`)
+                            }
+                        >
+                            Archive
+                        </button>
+                        <a href="#react-project">View project</a>
+                    </Actions>
+                )}
+            </form>
+            <div className="icon-demo-controls">
+                <label>
+                    Alignment{' '}
+                    <select
+                        data-testid="alignment"
+                        value={alignment}
+                        onChange={(event) => setAlignment(event.target.value)}
+                    >
+                        {[
+                            'start',
+                            'left',
+                            'center',
+                            'end',
+                            'right',
+                            'between',
+                            'justify',
+                        ].map((value) => (
+                            <option key={value}>{value}</option>
+                        ))}
+                    </select>
+                </label>
+                <label>
+                    <input
+                        type="checkbox"
+                        data-testid="full-width"
+                        checked={fullWidth}
+                        onChange={(event) => setFullWidth(event.target.checked)}
+                    />
+                    Full width
+                </label>
+                <label>
+                    <input
+                        type="checkbox"
+                        data-testid="visible"
+                        checked={visible}
+                        onChange={(event) => setVisible(event.target.checked)}
+                    />
+                    Show actions
+                </label>
+                <button
+                    type="button"
+                    data-testid="reset"
+                    onClick={() => {
+                        setAlignment('start')
+                        setFullWidth(false)
+                        setVisible(true)
+                        setName('Community garden')
+                        setMessage('No changes saved.')
+                    }}
+                >
+                    Reset
+                </button>
+            </div>
+            <p role="status" data-testid="result">
+                {message}
+            </p>
+            <p id="react-project" tabIndex={-1}>
+                Community garden · Project details
+            </p>
+        </section>
+    )
+}
+
+export default function mountActionsReact({ host, props }) {
+    const root = createRoot(host)
+    root.render(<ActionsReact {...props} />)
+    return {
+        update: (next) => root.render(<ActionsReact {...next} />),
+        destroy: () => root.unmount(),
+    }
+}