F
Filament•12mo ago
Matthew

Help with ExtraAlpineAttributes

Can someone help me add extra alpine attributes and/or functions in a form component? In this case, I tried this from a index.blade.php 
    x-data="{
        isCollapsed: @if ($persistCollapsed) $persist(@js($collapsed)).as(`section-${$el.id}-isCollapsed`) @else @js($collapsed) @endif,
        mouseX: 0,
        mouseY: 0,
        maxDistance: 100, // Control the maximum reach of the effect
        updateLighting: null,
        init() {
            this.updateLighting = ($event) => {
                if (!this.$el) return;

                const rect = this.$el.getBoundingClientRect();
                this.mouseX = ($event.clientX - rect.left) / rect.width;
                this.mouseY = ($event.clientY - rect.top) / rect.height;

                // Calculate distance from the mouse to the nearest edge
                let distance = Math.min(
                    $event.clientX - rect.left,
                    rect.right - $event.clientX,
                    $event.clientY - rect.top,
                    rect.bottom - $event.clientY
                );

                // Ensure distance is not negative
                distance = Math.max(0, distance);

                // Normalize distance and calculate intensity
                const normalizedDistance = Math.max(0, Math.min(distance / this.maxDistance, 1));
                const intensity = 1 - normalizedDistance;

                // Apply gradient based on intensity
                this.applyBorderGradient(intensity);
            };

            this.updateLighting = this.updateLighting.bind(this);
            document.addEventListener('mousemove', this.updateLighting);
        },
    x-data="{
        isCollapsed: @if ($persistCollapsed) $persist(@js($collapsed)).as(`section-${$el.id}-isCollapsed`) @else @js($collapsed) @endif,
        mouseX: 0,
        mouseY: 0,
        maxDistance: 100, // Control the maximum reach of the effect
        updateLighting: null,
        init() {
            this.updateLighting = ($event) => {
                if (!this.$el) return;

                const rect = this.$el.getBoundingClientRect();
                this.mouseX = ($event.clientX - rect.left) / rect.width;
                this.mouseY = ($event.clientY - rect.top) / rect.height;

                // Calculate distance from the mouse to the nearest edge
                let distance = Math.min(
                    $event.clientX - rect.left,
                    rect.right - $event.clientX,
                    $event.clientY - rect.top,
                    rect.bottom - $event.clientY
                );

                // Ensure distance is not negative
                distance = Math.max(0, distance);

                // Normalize distance and calculate intensity
                const normalizedDistance = Math.max(0, Math.min(distance / this.maxDistance, 1));
                const intensity = 1 - normalizedDistance;

                // Apply gradient based on intensity
                this.applyBorderGradient(intensity);
            };

            this.updateLighting = this.updateLighting.bind(this);
            document.addEventListener('mousemove', this.updateLighting);
        },
16 Replies
Matthew
MatthewOP•12mo ago
        applyBorderGradient(intensity) {
            const posX = this.mouseX * 100;
            const posY = this.mouseY * 100;

            // Control the size of the gradient based on intensity
            const size = Math.max(20, intensity * 50); // Adjust size factor as needed

            this.$el.style.borderImage = `radial-gradient(circle at ${posX}% ${posY}%, rgba(255,255,255,${intensity}), rgba(255,255,255,0) ${size}%) 1 / 1 / 0 stretch`;
        },
        destroyed() {
            document.removeEventListener('mousemove', this.updateLighting);
        }
    }"
        applyBorderGradient(intensity) {
            const posX = this.mouseX * 100;
            const posY = this.mouseY * 100;

            // Control the size of the gradient based on intensity
            const size = Math.max(20, intensity * 50); // Adjust size factor as needed

            this.$el.style.borderImage = `radial-gradient(circle at ${posX}% ${posY}%, rgba(255,255,255,${intensity}), rgba(255,255,255,0) ${size}%) 1 / 1 / 0 stretch`;
        },
        destroyed() {
            document.removeEventListener('mousemove', this.updateLighting);
        }
    }"
It works the way I want, but how can I implement this using ->extraAlpineAttributes()? Is it even possible? Even with 
@php
    $isAside = $isAside();
@endphp

<x-filament::section
    :aside="$isAside"
    :collapsed="$isCollapsed()"
    :collapsible="$isCollapsible() && (! $isAside)"
    :compact="$isCompact()"
    :content-before="$isFormBefore()"
    :description="$getDescription()"
    :header-actions="$getHeaderActions()"
    :heading="$getHeading()"
    :icon="$getIcon()"
    :icon-color="$getIconColor()"
    :icon-size="$getIconSize()"
    :persist-collapsed="$shouldPersistCollapsed()"
    :attributes="
        \Filament\Support\prepare_inherited_attributes($attributes)
            ->merge([
                'id' => $getId(),
                'x-data' => '{ mouseX: 0, mouseY: 0, maxDistance: 100 }',
            ], escape: false)
            ->merge(['x-data' => '{ mouseX: 0, mouseY: 0, maxDistance: 100 }',], escape: false)
            ->merge(['x-data' => '{ mouseX: 0, mouseY: 0, maxDistance: 100 }',], escape: false)
    "
>
    {{ $getChildComponentContainer() }}
</x-filament::section>
@php
    $isAside = $isAside();
@endphp

<x-filament::section
    :aside="$isAside"
    :collapsed="$isCollapsed()"
    :collapsible="$isCollapsible() && (! $isAside)"
    :compact="$isCompact()"
    :content-before="$isFormBefore()"
    :description="$getDescription()"
    :header-actions="$getHeaderActions()"
    :heading="$getHeading()"
    :icon="$getIcon()"
    :icon-color="$getIconColor()"
    :icon-size="$getIconSize()"
    :persist-collapsed="$shouldPersistCollapsed()"
    :attributes="
        \Filament\Support\prepare_inherited_attributes($attributes)
            ->merge([
                'id' => $getId(),
                'x-data' => '{ mouseX: 0, mouseY: 0, maxDistance: 100 }',
            ], escape: false)
            ->merge(['x-data' => '{ mouseX: 0, mouseY: 0, maxDistance: 100 }',], escape: false)
            ->merge(['x-data' => '{ mouseX: 0, mouseY: 0, maxDistance: 100 }',], escape: false)
    "
>
    {{ $getChildComponentContainer() }}
</x-filament::section>
I still cant the new x-data when doing inspect element
awcodes
awcodes•12mo ago
Section doesn’t support extraAlpineAttributes based on what I’m seeing in the blade file.
Matthew
MatthewOP•12mo ago
Yeah, I gured out so But, it does support from a form Like this 
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('input')
                    // ->view('filament-forms::components.section')
                    ->label('Themes')
                    ->extraAlpineAttributes([
                        'x-data' => '{test: test}',
                    ])
                    ->description('Check out the themes page to change the look and feel of the website.')

            ]);
    }
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('input')
                    // ->view('filament-forms::components.section')
                    ->label('Themes')
                    ->extraAlpineAttributes([
                        'x-data' => '{test: test}',
                    ])
                    ->description('Check out the themes page to change the look and feel of the website.')

            ]);
    }
the way I structrured it is obv wrong, because I dont see my components in the html
awcodes
awcodes•12mo ago
dd() getExtraAlpineAttributes() and see if your data isn’t matching up. Also you’re merging the same thing 3 times.
Matthew
MatthewOP•12mo ago
Oh nah, I already cleaned up the other files And I also did dd() and this is the result 
array:1 [▼ // vendor/filament/forms/src/../resources/views/components/section.blade.php
  "x-data" => "{test: test}"
]
array:1 [▼ // vendor/filament/forms/src/../resources/views/components/section.blade.php
  "x-data" => "{test: test}"
]
Matthew
MatthewOP•12mo ago
No description
awcodes
awcodes•12mo ago
Crazy thought. Does it have to be on the section? Could you wrap the section in a Div with all your alpine functionality?
Matthew
MatthewOP•12mo ago
Yeahh, it does. I might sound crazy but this is what I want to do:
Matthew
MatthewOP•12mo ago
I want to create something like a custom section Its still a bit janky, but I want to get the primary functionality there
awcodes
awcodes•12mo ago
Crazy is what makes it fun. I’m not seeing anything obviously wrong with your code.
Matthew
MatthewOP•12mo ago
Yeah exactly 😅 Ive been working on this all day Ah, hmmm Thing is, I read through the code of the callback And it I dont see anything wrong with it I was hoping you woiuld know 😂
awcodes
awcodes•12mo ago
I’m not see anything either. If I get some time tomorrow I’ll see it I can figure it out.
Matthew
MatthewOP•12mo ago
Cool! Thank you If you need a reproduction repo, lemme know:)
awcodes
awcodes•12mo ago
Yes please. I don’t want to recreate all that js.
Matthew
MatthewOP•12mo ago
Yeah, I feel you 😅
Mark Chaney
Mark Chaney•11mo ago
@Matthew I am assuming you got this solved, but you definitely cant use x-data with extraAttributes or extraAlpineAttributes to set x-data anymore since its hardcoded with. 
    x-data="{
        isCollapsed: @if ($persistCollapsed) $persist(@js($collapsed)).as(`section-${$el.id}-isCollapsed`) @else @js($collapsed) @endif,
    }"
    x-data="{
        isCollapsed: @if ($persistCollapsed) $persist(@js($collapsed)).as(`section-${$el.id}-isCollapsed`) @else @js($collapsed) @endif,
    }"
you can though set any other alpine attribute like x-show, etc. What I had to do was simple put the Section::make() in a 
Group::make([
  Section::make(....),
])
  ->extraAttributes([
      'x-data' => '{ openLatLng: false }',
  ])
Group::make([
  Section::make(....),
])
  ->extraAttributes([
      'x-data' => '{ openLatLng: false }',
  ])
. Hopefully this helps you and/or someone else that stumbles upon it. It was definitely possible before the collapse feature was added as I had to change my code after a filament update.
Want results from more Discord servers?
Add your server