Refactor checkbox and toggle editable columns & toggle Blade component

bin/build.js

@@ -140,6 +140,18 @@ compile({
  outfile: `./packages/tables/dist/components/table.js`,
 })
 
+compile({
+ ...defaultOptions,
+ entryPoints: [`./packages/tables/resources/js/components/columns/checkbox.js`],
+ outfile: `./packages/tables/dist/components/columns/checkbox.js`,
+})
+
+compile({
+ ...defaultOptions,
+ entryPoints: [`./packages/tables/resources/js/components/columns/toggle.js`],
+ outfile: `./packages/tables/dist/components/columns/toggle.js`,
+})
+
 compile({
  ...defaultOptions,
  entryPoints: [`./packages/widgets/resources/js/components/chart.js`],

packages/forms/resources/views/components/toggle.blade.php

@@ -1,136 +1,41 @@
 @php
- $offColor = $getOffColor() ?? 'gray';
- $onColor = $getOnColor() ?? 'primary';
+ use Illuminate\View\ComponentAttributeBag;
+
  $statePath = $getStatePath();
+
+ $toggleAttributes = (new ComponentAttributeBag())
+ ->merge([
+ 'aria-checked' => 'false',
+ 'autofocus' => $isAutofocused(),
+ 'disabled' => $isDisabled(),
+ 'id' => $getId(),
+ 'offColor' => $getOffColor() ?? 'gray',
+ 'offIcon' => $getOffIcon(),
+ 'onColor' => $getOnColor() ?? 'primary',
+ 'onIcon' => $getOnIcon(),
+ 'state' => '$wire.' . $applyStateBindingModifiers('$entangle(\'' . $statePath . '\')'),
+ 'wire:loading.attr' => 'disabled',
+ 'wire:target' => $statePath,
+ ], escape: false)
+ ->merge($getExtraAttributes(), escape: false)
+ ->merge($getExtraAlpineAttributes(), escape: false)
+ ->class(['fi-fo-toggle']);
 @endphp
 
 <x-dynamic-component
  :component="$getFieldWrapperView()"
  :field="$field"
  :inline-label-vertical-alignment="\Filament\Support\Enums\VerticalAlignment::Center"
 >
- @capture($content)
- <button
- x-data="{
- state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
- }"
- x-bind:aria-checked="state?.toString()"
- x-on:click="state = ! state"
- x-bind:class="
- state
- ? '{{
- \Illuminate\Support\Arr::toCssClasses([
- match ($onColor) {
- 'gray' => 'bg-gray-200 dark:bg-gray-700',
- default => 'fi-color-custom bg-custom-600',
- },
- is_string($onColor) ? "fi-color-{$onColor}" : null,
- ])
- }}'
- : '{{
- \Illuminate\Support\Arr::toCssClasses([
- match ($offColor) {
- 'gray' => 'bg-gray-200 dark:bg-gray-700',
- default => 'fi-color-custom bg-custom-600',
- },
- is_string($offColor) ? "fi-color-{$offColor}" : null,
- ])
- }}'
- "
- x-bind:style="
- state
- ? '{{
- \Filament\Support\get_color_css_variables(
- $onColor,
- shades: [600],
- alias: 'forms::components.toggle.on',
- )
- }}'
- : '{{
- \Filament\Support\get_color_css_variables(
- $offColor,
- shades: [600],
- alias: 'forms::components.toggle.off',
- )
- }}'
- "
- {{
- $attributes
- ->merge([
- 'aria-checked' => 'false',
- 'autofocus' => $isAutofocused(),
- 'disabled' => $isDisabled(),
- 'id' => $getId(),
- 'role' => 'switch',
- 'type' => 'button',
- 'wire:loading.attr' => 'disabled',
- 'wire:target' => $statePath,
- ], escape: false)
- ->merge($getExtraAttributes(), escape: false)
- ->merge($getExtraAlpineAttributes(), escape: false)
- ->class(['fi-fo-toggle relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70'])
- }}
- >
- <span
- class="pointer-events-none relative inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
- x-bind:class="{
- 'translate-x-5 rtl:-translate-x-5': state,
- 'translate-x-0': ! state,
- }"
- >
- <span
- class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
- aria-hidden="true"
- x-bind:class="{
- 'opacity-0 ease-out duration-100': state,
- 'opacity-100 ease-in duration-200': ! state,
- }"
- >
- @if ($hasOffIcon())
- <x-filament::icon
- :icon="$getOffIcon()"
- @class([
- 'fi-fo-toggle-off-icon size-3',
- match ($offColor) {
- 'gray' => 'text-gray-400 dark:text-gray-700',
- default => 'text-custom-600',
- },
- ])
- />
- @endif
- </span>
-
- <span
- class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity"
- aria-hidden="true"
- x-bind:class="{
- 'opacity-100 ease-in duration-200': state,
- 'opacity-0 ease-out duration-100': ! state,
- }"
- >
- @if ($hasOnIcon())
- <x-filament::icon
- :icon="$getOnIcon()"
- x-cloak="x-cloak"
- @class([
- 'fi-fo-toggle-on-icon size-3',
- match ($onColor) {
- 'gray' => 'text-gray-400 dark:text-gray-700',
- default => 'text-custom-600',
- },
- ])
- />
- @endif
- </span>
- </span>
- </button>
- @endcapture
-
  @if ($isInline())
  <x-slot name="labelPrefix">
- {{ $content() }}
+ <x-filament::toggle
+ :attributes="\Filament\Support\prepare_inherited_attributes($toggleAttributes)"
+ />
  </x-slot>
  @else
- {{ $content() }}
+ <x-filament::toggle
+ :attributes="\Filament\Support\prepare_inherited_attributes($toggleAttributes)"
+ />
  @endif
 </x-dynamic-component>

packages/support/resources/css/components/tables/columns/checkbox.css

@@ -0,0 +1,7 @@
+.fi-ta-checkbox {
+ @apply flex items-center;
+
+ &:not(.fi-inline) {
+ @apply px-3 py-4;
+ }
+}

packages/support/resources/css/components/tables/columns/toggle.css

@@ -0,0 +1,5 @@
+.fi-ta-toggle {
+ &:not(.fi-inline) {
+ @apply px-3 py-4;
+ }
+}

packages/support/resources/css/components/tables/header-cell.css

@@ -1,5 +1,5 @@
 .fi-ta-header-cell {
- @apply px-3 py-3.5 text-sm font-semibold text-gray-950 dark:text-white sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+ @apply px-3 py-3.5 text-start text-sm font-semibold text-gray-950 dark:text-white sm:first-of-type:ps-6 sm:last-of-type:pe-6;
 
  &.fi-growable {
  @apply w-full;
@@ -9,10 +9,6 @@
  @apply border-gray-200 dark:border-white/5 [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;
  }
 
- &.fi-align-start {
- @apply text-start;
- }
-
  &.fi-align-center {
  @apply text-center;
  }

packages/support/resources/css/components/toggle.css

@@ -0,0 +1,63 @@
+.fi-toggle {
+ @apply relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent outline-none transition-colors duration-200 ease-in-out disabled:pointer-events-none disabled:opacity-70;
+
+ &:disabled {
+ @apply pointer-events-none opacity-70;
+ }
+
+ &.fi-color-custom {
+ @apply bg-custom-600;
+ }
+
+ &:not(.fi-color-custom) {
+ @apply bg-gray-200 dark:bg-gray-700;
+ }
+
+ & > :first-child {
+ @apply pointer-events-none relative inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
+
+ & > * {
+ @apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity;
+
+ & > .fi-icon {
+ @apply size-3;
+
+ &:is(.fi-color-custom .fi-icon) {
+ @apply text-custom-600;
+ }
+
+ &:not(.fi-color-custom .fi-icon) {
+ @apply text-gray-400 dark:text-gray-700;
+ }
+ }
+ }
+ }
+
+ &.fi-toggle-on {
+ & > :first-child {
+ @apply translate-x-5 rtl:-translate-x-5;
+
+ & > :first-child {
+ @apply opacity-0 ease-out duration-100;
+ }
+
+ & > :last-child {
+ @apply opacity-100 ease-in duration-200;
+ }
+ }
+ }
+
+ &.fi-toggle-off {
+ & > :first-child {
+ @apply translate-x-0;
+
+ & > :first-child {
+ @apply opacity-100 ease-in duration-200;
+ }
+
+ & > :last-child {
+ @apply opacity-0 ease-out duration-100;
+ }
+ }
+ }
+}

packages/support/resources/js/index.js

@@ -15,6 +15,7 @@ import '../css/components/loading-indicator.css'
 import '../css/components/pagination.css'
 import '../css/components/tables/actions.css'
 import '../css/components/tables/cell.css'
+import '../css/components/tables/columns/checkbox.css'
 import '../css/components/tables/columns/color.css'
 import '../css/components/tables/columns/icon.css'
 import '../css/components/tables/columns/image.css'
@@ -33,6 +34,7 @@ import '../css/components/tables/empty-state.css'
 import '../css/components/tables/header-cell.css'
 import '../css/components/tables/row.css'
 import '../css/components/tables/table.css'
+import '../css/components/toggle.css'
 
 import 'tippy.js/dist/tippy.css'
 import 'tippy.js/themes/light.css'

packages/support/resources/views/components/toggle.blade.php

@@ -0,0 +1,62 @@
+@php
+ use Illuminate\Support\Arr;
+@endphp
+
+@props([
+ 'state',
+ 'offColor' => 'gray',
+ 'offIcon' => null,
+ 'onColor' => 'primary',
+ 'onIcon' => null,
+])
+
+<button
+ 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',
+ ))"
+ {{
+ $attributes
+ ->merge([
+ 'role' => 'switch',
+ 'type' => 'button',
+ ], escape: false)
+ ->class(['fi-toggle'])
+ }}
+>
+ <div>
+ <div aria-hidden="true">
+ {{ \Filament\Support\generate_icon_html($offIcon) }}
+ </div>
+
+ <div aria-hidden="true">
+ {{ \Filament\Support\generate_icon_html(
+ $onIcon,
+ attributes: (new \Illuminate\View\ComponentattributeBag())->merge(['x-cloak' => true], escape: false)),
+ }}
+ </div>
+ </div>
+</button>