Make components CSP-compatible

Author: ganyicz

stubs/resources/views/flux/input/clearable.blade.php

@@ -12,8 +12,8 @@
 <flux:button
     :$attributes
     :size="$size === 'sm' || $size === 'xs' ? 'xs' : 'sm'"
-    x-data
-    x-on:click="let input = $el.closest('[data-flux-input]').querySelector('input'); input.value = ''; input.dispatchEvent(new Event('input', { bubbles: false })); input.dispatchEvent(new Event('change', { bubbles: false })); input.focus()"
+    x-data="fluxInputClearable"
+    x-on:click="clear()"
     tabindex="-1"
     aria-label="Clear input"
     data-flux-clear-button

stubs/resources/views/flux/input/copyable.blade.php

@@ -12,8 +12,8 @@
 <flux:button
     :$attributes
     :size="$size === 'sm' || $size === 'xs' ? 'xs' : 'sm'"
-    x-data="{ copied: false }"
-    x-on:click="copied = ! copied; navigator.clipboard && navigator.clipboard.writeText($el.closest('[data-flux-input]').querySelector('input').value); setTimeout(() => copied = false, 2000)"
+    x-data="fluxInputCopyable"
+    x-on:click="copy()"
     x-bind:data-copyable-copied="copied"
     aria-label="{{ __('Copy to clipboard') }}"
 >

stubs/resources/views/flux/input/expandable.blade.php

@@ -12,7 +12,6 @@
 <flux:button
     :$attributes
     :size="$size === 'sm' || $size === 'xs' ? 'xs' : 'sm'"
-    x-on:click="$el.closest('[data-flux-input]').querySelector('input').value = ''"
 >
     <flux:icon.chevron-down variant="micro" />
 </flux:button>

stubs/resources/views/flux/input/file.blade.php

@@ -32,26 +32,16 @@
     data-flux-input-file
     wire:ignore
     tabindex="0"
-    x-data {{-- This is here to "scope" the x-ref references inside this component from interfering with others outside... --}}
+    x-data="fluxInputFile({ files: '{{ __('files') }}', noFile: '{{ __('No file chosen') }}' })"
     x-on:click.prevent.stop="$refs.input.click()"
     x-on:keydown.enter.prevent.stop="$refs.input.click()"
     x-on:keydown.space.prevent.stop
     x-on:keyup.space.prevent.stop="$refs.input.click()"
-    x-on:change="$refs.name.textContent = $event.target.files[1] ? ($event.target.files.length + ' {!! __('files') !!}') : ($event.target.files[0]?.name || '{!! __('No file chosen') !!}')"
+    x-on:change="updateLabel($event)"
 >
     <input
         x-ref="input"
         x-on:click.stop {{-- Without this, the parent element's click listener will ".prevent" the file input from being clicked... --}}
-        {{-- This is here because clearing the input via .value = "" doesn't trigger a change event... --}}
-        {{-- We need it to so that we can know to clear the selected file labels when the input is cleared... --}}
-        x-init="Object.defineProperty($el, 'value', {
-          ...Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'),
-            set(value) {
-            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set.call(this, value);
-
-            if(! value) this.dispatchEvent(new Event('change', { bubbles: true }))
-          }
-        })"
         type="file"
         class="sr-only"
         tabindex="-1"

stubs/resources/views/flux/input/viewable.blade.php

@@ -12,25 +12,10 @@
 <flux:button
     :$attributes
     :size="$size === 'sm' || $size === 'xs' ? 'xs' : 'sm'"
-    x-data="{ open: false }"
-    x-on:click="open = ! open; $el.closest('[data-flux-input]').querySelector('input').setAttribute('type', open ? 'text' : 'password')"
+    x-data="fluxInputViewable"
+    x-on:click="toggle()"
     x-bind:data-viewable-open="open"
     aria-label="{{ __('Toggle password visibility') }}"
-
-    {{-- We need to make the input type "durable" (immune to Livewire morph manipulations): --}}
-    x-init="
-        let input = $el.closest('[data-flux-input]')?.querySelector('input');
-
-        if (! input) return;
-
-        let observer = new MutationObserver(() => {
-            let type = open ? 'text' : 'password';
-            if (input.getAttribute('type') === type) return;
-            input.setAttribute('type', type)
-        });
-
-        observer.observe(input, { attributes: true, attributeFilter: ['type'] });
-    "
 >
     <flux:icon.eye-slash variant="micro" class="hidden [[data-viewable-open]>&]:block" />
     <flux:icon.eye variant="micro" class="block [[data-viewable-open]>&]:hidden" />

stubs/resources/views/flux/modal/index.blade.php

@@ -90,20 +90,9 @@
         {{ $styleAttributes->class($classes) }}
         @if ($name) data-modal="{{ $name }}" @endif
         @if ($flyout) data-flux-flyout @endif
-        x-data
-        @isset($__livewire)
-            x-on:modal-show.document="
-                if ($event.detail.name === @js($name) && ($event.detail.scope === @js($__livewire->getId()))) $el.showModal();
-                if ($event.detail.name === @js($name) && (! $event.detail.scope)) $el.showModal();
-            "
-            x-on:modal-close.document="
-                if ($event.detail.name === @js($name) && ($event.detail.scope === @js($__livewire->getId()))) $el.close();
-                if (! $event.detail.name || ($event.detail.name === @js($name) && (! $event.detail.scope))) $el.close();
-            "
-        @else
-            x-on:modal-show.document="if ($event.detail.name === @js($name) && (! $event.detail.scope)) $el.showModal()"
-            x-on:modal-close.document="if (! $event.detail.name || ($event.detail.name === @js($name) && (! $event.detail.scope))) $el.close()"
-        @endif
+        x-data="fluxModal(@js($name), @js($__livewire?->getId()))"
+        x-on:modal-show.document="handleShow($event)"
+        x-on:modal-close.document="handleClose($event)"
     >
         {{ $slot }}