cs

filamentphp · Oct 18, 2024 · 63ba76c · 63ba76c
1 parent 3804e16
commit 63ba76c
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 104 deletions.
diff --git a/packages/forms/resources/views/components/toggle.blade.php b/packages/forms/resources/views/components/toggle.blade.php
@@ -3,7 +3,7 @@
 
  $statePath = $getStatePath();
 
- $toggleAttributes = (new ComponentAttributeBag())
+ $toggleAttributes = (new ComponentAttributeBag)
  ->merge([
  'aria-checked' => 'false',
  'autofocus' => $isAutofocused(),

diff --git a/packages/support/resources/css/components/toggle.css b/packages/support/resources/css/components/toggle.css
@@ -38,11 +38,11 @@
  @apply translate-x-5 rtl:-translate-x-5;
 
  & > :first-child {
- @apply opacity-0 ease-out duration-100;
+ @apply opacity-0 duration-100 ease-out;
  }
 
  & > :last-child {
- @apply opacity-100 ease-in duration-200;
+ @apply opacity-100 duration-200 ease-in;
  }
  }
  }
@@ -52,11 +52,11 @@
  @apply translate-x-0;
 
  & > :first-child {
- @apply opacity-100 ease-in duration-200;
+ @apply opacity-100 duration-200 ease-in;
  }
 
  & > :last-child {
- @apply opacity-0 ease-out duration-100;
+ @apply opacity-0 duration-100 ease-out;
  }
  }
  }

diff --git a/packages/support/resources/views/components/toggle.blade.php b/packages/support/resources/views/components/toggle.blade.php
@@ -14,30 +14,34 @@
  x-data="{ state: {{ $state }} }"
  x-bind:aria-checked="state?.toString()"
  x-on:click="state = ! state"
- x-bind:class="state ? @js(Arr::toCssClasses([
- 'fi-toggle-on',
- match ($onColor) {
- null, 'gray' => null,
- default => 'fi-color-custom',
- },
- is_string($onColor) ? "fi-color-{$onColor}" : null,
- ])) : @js(Arr::toCssClasses([
- 'fi-toggle-off',
- match ($offColor) {
- null, 'gray' => null,
- default => 'fi-color-custom bg-custom-600',
- },
- is_string($offColor) ? "fi-color-{$offColor}" : null,
- ]))"
- x-bind:style="state ? @js(\Filament\Support\get_color_css_variables(
- $onColor,
- shades: [600],
- alias: 'toggle.on',
- )) : @js(\Filament\Support\get_color_css_variables(
- $offColor,
- shades: [600],
- alias: 'toggle.off',
- ))"
+ x-bind:class="
+ state ? @js(Arr::toCssClasses([
+ 'fi-toggle-on',
+ match ($onColor) {
+ null, 'gray' => null,
+ default => 'fi-color-custom',
+ },
+ is_string($onColor) ? "fi-color-{$onColor}" : null,
+ ])) : @js(Arr::toCssClasses([
+ 'fi-toggle-off',
+ match ($offColor) {
+ null, 'gray' => null,
+ default => 'fi-color-custom bg-custom-600',
+ },
+ is_string($offColor) ? "fi-color-{$offColor}" : null,
+ ]))
+ "
+ x-bind:style="
+ state ? @js(\Filament\Support\get_color_css_variables(
+ $onColor,
+ shades: [600],
+ alias: 'toggle.on',
+ )) : @js(\Filament\Support\get_color_css_variables(
+ $offColor,
+ shades: [600],
+ alias: 'toggle.off',
+ ))
+ "
  {{
  $attributes
  ->merge([
@@ -55,8 +59,7 @@
  <div aria-hidden="true">
  {{ \Filament\Support\generate_icon_html(
  $onIcon,
- attributes: (new \Illuminate\View\ComponentattributeBag())->merge(['x-cloak' => true], escape: false)),
- }}
+ attributes: (new \Illuminate\View\ComponentattributeBag())->merge(['x-cloak' => true], escape: false)), }}
  </div>
  </div>
 </button>
diff --git a/packages/tables/resources/js/components/columns/checkbox.js b/packages/tables/resources/js/components/columns/checkbox.js
@@ -1,8 +1,4 @@
-export default function checkboxTableColumn({
- name,
- recordKey,
- state,
-}) {
+export default function checkboxTableColumn({ name, recordKey, state }) {
  return {
  error: undefined,
 
@@ -11,37 +7,45 @@ export default function checkboxTableColumn({
  state,
 
  init: function () {
- Livewire.hook('commit', ({ component, commit, succeed, fail, respond }) => {
- succeed(({ snapshot, effect }) => {
- this.$nextTick(() => {
- if (this.isLoading) {
- return
- }
-
- if (component.id !== this.$root.closest('[wire\\:id]').attributes['wire:id'].value) {
- return
- }
-
- const serverState = this.getServerState()
-
- if (
- (serverState === undefined) ||
- (Alpine.raw(this.state) === serverState)
- ) {
- return
- }
-
- this.state = serverState
+ Livewire.hook(
+ 'commit',
+ ({ component, commit, succeed, fail, respond }) => {
+ succeed(({ snapshot, effect }) => {
+ this.$nextTick(() => {
+ if (this.isLoading) {
+ return
+ }
+
+ if (
+ component.id !==
+ this.$root.closest('[wire\\:id]').attributes[
+ 'wire:id'
+ ].value
+ ) {
+ return
+ }
+
+ const serverState = this.getServerState()
+
+ if (
+ serverState === undefined ||
+ Alpine.raw(this.state) === serverState
+ ) {
+ return
+ }
+
+ this.state = serverState
+ })
  })
- })
- })
+ },
+ )
 
  this.$watch('state', async () => {
  const serverState = this.getServerState()
 
  if (
- (serverState === undefined) ||
- (Alpine.raw(this.state) === serverState)
+ serverState === undefined ||
+ Alpine.raw(this.state) === serverState
  ) {
  return
  }
@@ -56,10 +60,7 @@ export default function checkboxTableColumn({
 
  this.error = response?.error ?? undefined
 
- if (
- (! this.error) &&
- this.$refs.serverState
- ) {
+ if (!this.error && this.$refs.serverState) {
  this.$refs.serverState.value = this.state ? '1' : '0'
  }
 
@@ -68,7 +69,7 @@ export default function checkboxTableColumn({
  },
 
  getServerState: function () {
- if (! this.$refs.serverState) {
+ if (!this.$refs.serverState) {
  return undefined
  }
 

diff --git a/packages/tables/resources/js/components/columns/toggle.js b/packages/tables/resources/js/components/columns/toggle.js
@@ -1,8 +1,4 @@
-export default function toggleTableColumn({
- name,
- recordKey,
- state,
-}) {
+export default function toggleTableColumn({ name, recordKey, state }) {
  return {
  error: undefined,
 
@@ -11,37 +7,45 @@ export default function toggleTableColumn({
  state,
 
  init: function () {
- Livewire.hook('commit', ({ component, commit, succeed, fail, respond }) => {
- succeed(({ snapshot, effect }) => {
- this.$nextTick(() => {
- if (this.isLoading) {
- return
- }
-
- if (component.id !== this.$root.closest('[wire\\:id]').attributes['wire:id'].value) {
- return
- }
-
- const serverState = this.getServerState()
-
- if (
- (serverState === undefined) ||
- (Alpine.raw(this.state) === serverState)
- ) {
- return
- }
-
- this.state = serverState
+ Livewire.hook(
+ 'commit',
+ ({ component, commit, succeed, fail, respond }) => {
+ succeed(({ snapshot, effect }) => {
+ this.$nextTick(() => {
+ if (this.isLoading) {
+ return
+ }
+
+ if (
+ component.id !==
+ this.$root.closest('[wire\\:id]').attributes[
+ 'wire:id'
+ ].value
+ ) {
+ return
+ }
+
+ const serverState = this.getServerState()
+
+ if (
+ serverState === undefined ||
+ Alpine.raw(this.state) === serverState
+ ) {
+ return
+ }
+
+ this.state = serverState
+ })
  })
- })
- })
+ },
+ )
 
  this.$watch('state', async () => {
  const serverState = this.getServerState()
 
  if (
- (serverState === undefined) ||
- (Alpine.raw(this.state) === serverState)
+ serverState === undefined ||
+ Alpine.raw(this.state) === serverState
  ) {
  return
  }
@@ -56,10 +60,7 @@ export default function toggleTableColumn({
 
  this.error = response?.error ?? undefined
 
- if (
- (! this.error) &&
- this.$refs.serverState
- ) {
+ if (!this.error && this.$refs.serverState) {
  this.$refs.serverState.value = this.state ? '1' : '0'
  }
 
@@ -68,7 +69,7 @@ export default function toggleTableColumn({
  },
 
  getServerState: function () {
- if (! this.$refs.serverState) {
+ if (!this.$refs.serverState) {
  return undefined
  }
 

diff --git a/packages/tables/resources/views/index.blade.php b/packages/tables/resources/views/index.blade.php
@@ -1643,9 +1643,9 @@ class="fi-ta-record-checkbox fi-checkbox-input"
  @if (filled($columnTooltip = $column->getTooltip()))
  x-tooltip
  ="{
- content: @js($columnTooltip),
- theme: $store.theme,
- }"
+  content: @js($columnTooltip),
+  theme: $store.theme,
+  }"
  @endif
  @if ($columnWrapperTag === 'a')
  {{ \Filament\Support\generate_href_html($columnUrl ?: $recordUrl, $columnUrl ? $column->shouldOpenUrlInNewTab() : $openRecordUrlInNewTab) }}