mirror of
https://github.com/filamentphp/filament.git
synced 2026-09-24 15:42:09 +08:00
Merge pull request #4514 from filamentphp/4194-use-blade-svg-helper-instead-of-components-for-icons
Use Blade svg helper instead of components for icons
This commit is contained in:
Dan Harrin
@@ -8,7 +8,14 @@
|
||||
'absolute inset-y-0 left-0 flex items-center justify-center w-10 h-10 text-gray-500 pointer-events-none group-focus-within:text-primary-500',
|
||||
'dark:text-gray-400' => config('filament.dark_mode'),
|
||||
])>
|
||||
<x-heroicon-m-magnifying-glass class="w-5 h-5" wire:loading.remove.delay wire:target="search" />
|
||||
@svg(
|
||||
'heroicon-m-magnifying-glass',
|
||||
'h-5 w-5',
|
||||
[
|
||||
'wire:loading.remove.delay',
|
||||
'wire:target' => 'search',
|
||||
],
|
||||
)
|
||||
|
||||
<x-filament-support::loading-indicator class="w-5 h-5" wire:loading.delay wire:target="search" />
|
||||
</span>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
'dark:text-gray-300' => config('filament.dark_mode'),
|
||||
])>
|
||||
@if ($icon)
|
||||
<x-dynamic-component :component="$icon" class="ml-1 w-3 h-3 flex-shrink-0" />
|
||||
@svg($icon, 'ml-1 w-3 h-3 flex-shrink-0')
|
||||
@endif
|
||||
|
||||
<p class="flex-1 font-bold uppercase text-xs tracking-wider">
|
||||
@@ -29,10 +29,17 @@
|
||||
</div>
|
||||
|
||||
@if ($collapsible)
|
||||
<x-heroicon-m-chevron-down :class="\Illuminate\Support\Arr::toCssClasses([
|
||||
'w-3 h-3 text-gray-600 transition',
|
||||
'dark:text-gray-300' => config('filament.dark_mode'),
|
||||
])" x-bind:class="$store.sidebar.groupIsCollapsed(label) || '-rotate-180'" x-cloak />
|
||||
@svg(
|
||||
'heroicon-m-chevron-down',
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
'h-3 w-3 text-gray-600 transition',
|
||||
'dark:text-gray-300' => config('filament.dark_mode'),
|
||||
]),
|
||||
[
|
||||
'x-bind:class' => '$store.sidebar.groupIsCollapsed(label) || "-rotate-180"',
|
||||
'x-cloak',
|
||||
],
|
||||
)
|
||||
@endif
|
||||
</button>
|
||||
@endif
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
>
|
||||
<x-heroicon-o-chevron-left class="h-6 w-6" />
|
||||
@svg('heroicon-o-chevron-left', 'h-6 w-6')
|
||||
</button>
|
||||
@endif
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
>
|
||||
<x-heroicon-o-bars-3 class="h-6 w-6" />
|
||||
@svg('heroicon-o-bars-3', 'h-6 w-6')
|
||||
</button>
|
||||
@endif
|
||||
</header>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
'bg-primary-500 text-white' => $active,
|
||||
])
|
||||
>
|
||||
<x-dynamic-component :component="$icon" class="h-5 w-5 shrink-0" />
|
||||
@svg($icon, 'h-5 w-5 shrink-0')
|
||||
|
||||
<div class="flex flex-1"
|
||||
@if (config('filament.layout.sidebar.is_collapsible_on_desktop'))
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
'dark:text-gray-200' => config('filament.dark_mode'),
|
||||
])>
|
||||
@if ($icon)
|
||||
<x-dynamic-component :component="$icon" class="w-4 h-4" />
|
||||
@svg($icon, 'h-4 w-4')
|
||||
@endif
|
||||
|
||||
<span>{{ $label }}</span>
|
||||
@@ -51,7 +51,7 @@
|
||||
<span>{{ $description }}</span>
|
||||
|
||||
@if ($descriptionIcon)
|
||||
<x-dynamic-component :component="$descriptionIcon" class="w-4 h-4" />
|
||||
@svg($descriptionIcon, 'h-4 w-4')
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
'lg:hidden' => ! (config('filament.layout.sidebar.is_collapsible_on_desktop') && (config('filament.layout.sidebar.collapsed_width') === 0)),
|
||||
])
|
||||
>
|
||||
<x-heroicon-o-bars-3 class="w-6 h-6" />
|
||||
@svg('heroicon-o-bars-3', 'h-6 w-6')
|
||||
</button>
|
||||
|
||||
<div class="flex items-center justify-between flex-1">
|
||||
|
||||
@@ -114,7 +114,7 @@
|
||||
{{ __('forms::components.builder.buttons.move_item.label') }}
|
||||
</span>
|
||||
|
||||
<x-heroicon-m-arrows-up-down class="w-4 h-4"/>
|
||||
@svg('heroicon-m-arrows-up-down', 'h-4 w-4')
|
||||
</button>
|
||||
@endunless
|
||||
|
||||
@@ -162,7 +162,7 @@
|
||||
{{ __('forms::components.builder.buttons.clone_item.label') }}
|
||||
</span>
|
||||
|
||||
<x-heroicon-m-square-2-stack class="w-4 h-4"/>
|
||||
@svg('heroicon-m-square-2-stack', 'h-4 w-4')
|
||||
</button>
|
||||
</li>
|
||||
@endif
|
||||
@@ -182,7 +182,7 @@
|
||||
{{ __('forms::components.builder.buttons.delete_item.label') }}
|
||||
</span>
|
||||
|
||||
<x-heroicon-m-trash class="w-4 h-4"/>
|
||||
@svg('heroicon-m-trash', 'h-4 w-4')
|
||||
</button>
|
||||
</li>
|
||||
@endunless
|
||||
@@ -195,13 +195,24 @@
|
||||
type="button"
|
||||
class="flex items-center justify-center flex-none w-10 h-10 text-gray-400 transition hover:text-gray-500"
|
||||
>
|
||||
<x-heroicon-m-minus class="w-4 h-4" x-show="! isCollapsed"/>
|
||||
@svg(
|
||||
'heroicon-m-minus',
|
||||
'h-4 w-4',
|
||||
['x-show' => '! isCollapsed'],
|
||||
)
|
||||
|
||||
<span class="sr-only" x-show="! isCollapsed">
|
||||
{{ __('forms::components.builder.buttons.collapse_item.label') }}
|
||||
</span>
|
||||
|
||||
<x-heroicon-m-plus class="w-4 h-4" x-show="isCollapsed" x-cloak/>
|
||||
@svg(
|
||||
'heroicon-m-plus',
|
||||
'h-4 w-4',
|
||||
[
|
||||
'x-show' => 'isCollapsed',
|
||||
'x-cloak',
|
||||
],
|
||||
)
|
||||
|
||||
<span class="sr-only" x-show="isCollapsed" x-cloak>
|
||||
{{ __('forms::components.builder.buttons.expand_item.label') }}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
@endif
|
||||
|
||||
@if ($icon = $getPrefixIcon())
|
||||
<x-dynamic-component :component="$icon" class="w-5 h-5" />
|
||||
@svg($icon, 'h-5 w-5')
|
||||
@endif
|
||||
|
||||
@if ($label = $getPrefixLabel())
|
||||
@@ -103,7 +103,7 @@
|
||||
@endif
|
||||
|
||||
@if ($icon = $getSuffixIcon())
|
||||
<x-dynamic-component :component="$icon" class="w-5 h-5" />
|
||||
@svg($icon, 'h-5 w-5')
|
||||
@endif
|
||||
|
||||
@if (($suffixAction = $getSuffixAction()) && (! $suffixAction->isHidden()))
|
||||
|
||||
@@ -67,10 +67,13 @@
|
||||
/>
|
||||
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none rtl:right-auto rtl:left-0 rtl:pl-2">
|
||||
<x-heroicon-m-calendar @class([
|
||||
'w-5 h-5 text-gray-400',
|
||||
'dark:text-gray-400' => config('forms.dark_mode'),
|
||||
]) />
|
||||
@svg(
|
||||
'heroicon-m-calendar',
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
'h-5 w-5 text-gray-400',
|
||||
'dark:text-gray-400' => config('forms.dark_mode'),
|
||||
]),
|
||||
)
|
||||
</span>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
@endif
|
||||
|
||||
@if ($icon)
|
||||
<x-dynamic-component :component="$icon" class="h-4 w-4" />
|
||||
@svg($icon, 'h-4 w-4')
|
||||
@endif
|
||||
|
||||
@if ($action && (! $action->isHidden()))
|
||||
|
||||
@@ -113,7 +113,7 @@
|
||||
type="button"
|
||||
class="text-gray-600 hover:text-gray-700"
|
||||
>
|
||||
<x-heroicon-m-arrows-up-down class="w-4 h-4" />
|
||||
@svg('heroicon-m-arrows-up-down', 'h-4 w-4')
|
||||
|
||||
<span class="sr-only">
|
||||
{{ $getDeleteButtonLabel() }}
|
||||
@@ -127,7 +127,7 @@
|
||||
type="button"
|
||||
class="text-danger-600 hover:text-danger-700"
|
||||
>
|
||||
<x-heroicon-m-trash class="w-4 h-4" />
|
||||
@svg('heroicon-m-trash', 'h-4 w-4')
|
||||
|
||||
<span class="sr-only">
|
||||
{{ $getDeleteButtonLabel() }}
|
||||
@@ -151,7 +151,7 @@
|
||||
'dark:text-white dark:bg-gray-800/60 dark:hover:bg-gray-800/30' => config('forms.dark_mode'),
|
||||
])
|
||||
>
|
||||
<x-heroicon-m-plus class="w-4 h-4" />
|
||||
@svg('heroicon-m-plus', 'h-4 w-4')
|
||||
|
||||
<span>
|
||||
{{ $getAddButtonLabel() }}
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
{{ __('forms::components.repeater.buttons.move_item.label') }}
|
||||
</span>
|
||||
|
||||
<x-heroicon-m-arrows-up-down class="w-4 h-4"/>
|
||||
@svg('heroicon-m-arrows-up-down', 'h-4 w-4')
|
||||
</button>
|
||||
@endunless
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
{{ __('forms::components.repeater.buttons.clone_item.label') }}
|
||||
</span>
|
||||
|
||||
<x-heroicon-m-square-2-stack class="w-4 h-4"/>
|
||||
@svg('heroicon-m-square-2-stack', 'h-4 w-4')
|
||||
</button>
|
||||
</li>
|
||||
@endunless
|
||||
@@ -169,7 +169,7 @@
|
||||
{{ __('forms::components.repeater.buttons.delete_item.label') }}
|
||||
</span>
|
||||
|
||||
<x-heroicon-m-trash class="w-4 h-4"/>
|
||||
@svg('heroicon-m-trash', 'h-4 w-4')
|
||||
</button>
|
||||
</li>
|
||||
@endunless
|
||||
@@ -182,13 +182,24 @@
|
||||
type="button"
|
||||
class="flex items-center justify-center flex-none w-10 h-10 text-gray-400 transition hover:text-gray-500"
|
||||
>
|
||||
<x-heroicon-m-minus class="w-4 h-4" x-show="! isCollapsed"/>
|
||||
@svg(
|
||||
'heroicon-m-minus',
|
||||
'h-4 w-4',
|
||||
['x-show' => '! isCollapsed'],
|
||||
)
|
||||
|
||||
<span class="sr-only" x-show="! isCollapsed">
|
||||
{{ __('forms::components.repeater.buttons.collapse_item.label') }}
|
||||
</span>
|
||||
|
||||
<x-heroicon-m-plus class="w-4 h-4" x-show="isCollapsed" x-cloak/>
|
||||
@svg(
|
||||
'heroicon-m-plus',
|
||||
'h-4 w-4',
|
||||
[
|
||||
'x-show' => 'isCollapsed',
|
||||
'x-cloak',
|
||||
],
|
||||
)
|
||||
|
||||
<span class="sr-only" x-show="isCollapsed" x-cloak>
|
||||
{{ __('forms::components.repeater.buttons.expand_item.label') }}
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
'-rotate-180' => ! $isCollapsed(),
|
||||
])
|
||||
>
|
||||
<x-heroicon-m-chevron-down class="h-5 w-5" />
|
||||
@svg('heroicon-m-chevron-down', 'h-5 w-5')
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
@endif
|
||||
|
||||
@if ($icon = $getPrefixIcon())
|
||||
<x-dynamic-component :component="$icon" class="w-5 h-5" />
|
||||
@svg($icon, 'h-5 w-5')
|
||||
@endif
|
||||
|
||||
@if ($label = $getPrefixLabel())
|
||||
@@ -123,7 +123,7 @@
|
||||
@endif
|
||||
|
||||
@if ($icon = $getSuffixIcon())
|
||||
<x-dynamic-component :component="$icon" class="w-5 h-5" />
|
||||
@svg($icon, 'h-5 w-5')
|
||||
@endif
|
||||
|
||||
@if (($suffixAction = $getSuffixAction()) && (! $suffixAction->isHidden()))
|
||||
|
||||
@@ -55,10 +55,7 @@
|
||||
}"
|
||||
>
|
||||
@if ($icon = $tab->getIcon())
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
@svg($icon, 'h-5 w-5')
|
||||
@endif
|
||||
|
||||
<span>{{ $tab->getLabel() }}</span>
|
||||
|
||||
@@ -90,7 +90,7 @@
|
||||
<span class="text-left" x-text="tag"></span>
|
||||
|
||||
@unless ($isDisabled())
|
||||
<x-heroicon-m-x-mark class="w-3 h-3 shrink-0" />
|
||||
@svg('heroicon-m-x-mark', 'h-3 w-3 shrink-0')
|
||||
@endunless
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
@endif
|
||||
|
||||
@if ($icon = $getPrefixIcon())
|
||||
<x-dynamic-component :component="$icon" class="w-5 h-5" />
|
||||
@svg($icon, 'h-5 w-5')
|
||||
@endif
|
||||
|
||||
@if ($label = $getPrefixLabel())
|
||||
@@ -89,7 +89,7 @@
|
||||
@endif
|
||||
|
||||
@if ($icon = $getSuffixIcon())
|
||||
<x-dynamic-component :component="$icon" class="w-5 h-5" />
|
||||
@svg($icon, 'h-5 w-5')
|
||||
@endif
|
||||
|
||||
@if (($suffixAction = $getSuffixAction()) && (! $suffixAction->isHidden()))
|
||||
|
||||
@@ -63,9 +63,9 @@
|
||||
}"
|
||||
>
|
||||
@if ($hasOffIcon())
|
||||
<x-dynamic-component
|
||||
:component="$getOffIcon()"
|
||||
:class="\Illuminate\Support\Arr::toCssClasses([
|
||||
@svg(
|
||||
$getOffIcon(),
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
'h-3 w-3',
|
||||
match ($getOffColor()) {
|
||||
'danger' => 'text-danger-500',
|
||||
@@ -74,8 +74,8 @@
|
||||
'warning' => 'text-warning-500',
|
||||
default => 'text-gray-400',
|
||||
},
|
||||
])"
|
||||
/>
|
||||
]),
|
||||
)
|
||||
@endif
|
||||
</span>
|
||||
|
||||
@@ -88,10 +88,9 @@
|
||||
}"
|
||||
>
|
||||
@if ($hasOnIcon())
|
||||
<x-dynamic-component
|
||||
:component="$getOnIcon()"
|
||||
x-cloak
|
||||
:class="\Illuminate\Support\Arr::toCssClasses([
|
||||
@svg(
|
||||
$getOnIcon(),
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
'h-3 w-3',
|
||||
match ($getOnColor()) {
|
||||
'danger' => 'text-danger-500',
|
||||
@@ -100,8 +99,9 @@
|
||||
'warning' => 'text-warning-500',
|
||||
default => 'text-primary-500',
|
||||
},
|
||||
])"
|
||||
/>
|
||||
]),
|
||||
['x-cloak'],
|
||||
)
|
||||
@endif
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -126,23 +126,35 @@
|
||||
}"
|
||||
class="w-10 h-10 flex items-center justify-center rounded-full"
|
||||
>
|
||||
<x-heroicon-m-check
|
||||
x-show="getStepIndex(step) > {{ $loop->index }}"
|
||||
x-cloak
|
||||
class="w-5 h-5 text-white"
|
||||
/>
|
||||
@svg(
|
||||
'heroicon-m-check',
|
||||
'h-5 w-5 text-white',
|
||||
[
|
||||
'x-show' => "getStepIndex(step) > {$loop->index}",
|
||||
'x-cloak',
|
||||
],
|
||||
)
|
||||
|
||||
@if ($step->getIcon())
|
||||
<x-dynamic-component
|
||||
:component="$step->getIcon()"
|
||||
x-show="getStepIndex(step) <= {{ $loop->index }}"
|
||||
x-cloak
|
||||
x-bind:class="{
|
||||
'text-gray-500 @if (config('forms.dark_mode')) dark:text-gray-400 @endif': getStepIndex(step) !== {{ $loop->index }},
|
||||
'text-primary-500': getStepIndex(step) === {{ $loop->index }},
|
||||
}"
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
@if ($icon = $step->getIcon())
|
||||
@php
|
||||
$inactiveIconClasses = \Illuminate\Support\Arr::toCssClasses([
|
||||
'text-gray-500',
|
||||
'dark:text-gray-400' => config('forms.dark_mode'),
|
||||
]);
|
||||
@endphp
|
||||
|
||||
@svg(
|
||||
$icon,
|
||||
'h-5 w-5',
|
||||
[
|
||||
'x-show' => "getStepIndex(step) <= {$loop->index}",
|
||||
'x-cloak',
|
||||
'x-bind:class' => "{
|
||||
'{$inactiveIconClasses}': getStepIndex(step) !== {$loop->index},
|
||||
'text-primary-500': getStepIndex(step) === {$loop->index},
|
||||
}",
|
||||
],
|
||||
)
|
||||
@else
|
||||
<span
|
||||
x-show="getStepIndex(step) <= {{ $loop->index }}"
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<x-heroicon-m-x-mark
|
||||
class="filament-notifications-close-button h-4 w-4 cursor-pointer text-gray-400"
|
||||
x-on:click="close"
|
||||
/>
|
||||
@svg(
|
||||
'heroicon-m-x-mark',
|
||||
'filament-notifications-close-button h-4 w-4 cursor-pointer text-gray-400',
|
||||
['x-on:click' => 'close']
|
||||
)
|
||||
|
||||
+1
-1
@@ -6,7 +6,7 @@
|
||||
'flex items-center justify-center w-12 h-12 text-primary-500 rounded-full bg-primary-50',
|
||||
'dark:bg-gray-700' => config('notifications.dark_mode'),
|
||||
])>
|
||||
<x-heroicon-o-bell class="w-5 h-5" />
|
||||
@svg('heroicon-o-bell', 'h-5 w-5')
|
||||
</div>
|
||||
|
||||
<div class="max-w-md space-y-1">
|
||||
|
||||
@@ -3,9 +3,9 @@
|
||||
'color',
|
||||
])
|
||||
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
:class="\Illuminate\Support\Arr::toCssClasses([
|
||||
@svg(
|
||||
$icon,
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
'filament-notifications-icon h-6 w-6',
|
||||
match ($color) {
|
||||
'success' => 'text-success-400',
|
||||
@@ -14,5 +14,5 @@
|
||||
'primary' => 'text-primary-400',
|
||||
'secondary' => 'text-gray-400',
|
||||
},
|
||||
])"
|
||||
/>
|
||||
]),
|
||||
)
|
||||
|
||||
@@ -103,12 +103,14 @@
|
||||
>
|
||||
@if ($iconPosition === 'before')
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
:wire:loading.remove.delay="$hasLoadingIndicator"
|
||||
:wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
|
||||
:class="$iconClasses"
|
||||
/>
|
||||
@svg(
|
||||
$icon,
|
||||
$iconClasses,
|
||||
[
|
||||
'wire:loading.remove.delay' => $hasLoadingIndicator,
|
||||
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
|
||||
],
|
||||
)
|
||||
@endif
|
||||
|
||||
@if ($hasLoadingIndicator)
|
||||
@@ -149,12 +151,14 @@
|
||||
|
||||
@if ($iconPosition === 'after')
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
:wire:loading.remove.delay="$hasLoadingIndicator"
|
||||
:wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
|
||||
:class="$iconClasses"
|
||||
/>
|
||||
@svg(
|
||||
$icon,
|
||||
$iconClasses,
|
||||
[
|
||||
'wire:loading.remove.delay' => $hasLoadingIndicator,
|
||||
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
|
||||
],
|
||||
)
|
||||
@endif
|
||||
|
||||
@if ($hasLoadingIndicator)
|
||||
@@ -181,7 +185,7 @@
|
||||
{{ $attributes->class($buttonClasses) }}
|
||||
>
|
||||
@if ($icon && $iconPosition === 'before')
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
|
||||
<span @class([
|
||||
@@ -191,7 +195,7 @@
|
||||
</span>
|
||||
|
||||
@if ($icon && $iconPosition === 'after')
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
@if ($tag === 'div')
|
||||
<div {{ $attributes->class([$headerClasses]) }}>
|
||||
@if ($icon)
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
|
||||
<span class="{{ $labelClasses }}">
|
||||
@@ -33,7 +33,7 @@
|
||||
@elseif ($tag === 'a')
|
||||
<a {{ $attributes->class([$headerClasses]) }}>
|
||||
@if ($icon)
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
|
||||
<span class="{{ $labelClasses }}">
|
||||
|
||||
@@ -56,12 +56,14 @@
|
||||
{{ $attributes->class([$buttonClasses]) }}
|
||||
>
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
:wire:loading.remove.delay="$hasLoadingIndicator"
|
||||
:wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
|
||||
:class="$iconClasses"
|
||||
/>
|
||||
@svg(
|
||||
$icon,
|
||||
$iconClasses,
|
||||
[
|
||||
'wire:loading.remove.delay' => $hasLoadingIndicator,
|
||||
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
|
||||
],
|
||||
)
|
||||
@endif
|
||||
|
||||
@if ($hasLoadingIndicator)
|
||||
@@ -86,7 +88,7 @@
|
||||
@elseif ($tag === 'a')
|
||||
<a {{ $attributes->class([$buttonClasses]) }}>
|
||||
@if ($icon)
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
|
||||
<span class="{{ $labelClasses }}">
|
||||
@@ -108,7 +110,7 @@
|
||||
{{ $attributes->except(['action', 'class', 'method', 'wire:submit.prevent'])->class([$buttonClasses]) }}
|
||||
>
|
||||
@if ($icon)
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
|
||||
<span class="{{ $labelClasses }}">
|
||||
|
||||
@@ -77,12 +77,14 @@
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
:wire:loading.remove.delay="$hasLoadingIndicator"
|
||||
:wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
|
||||
:class="$iconClasses"
|
||||
/>
|
||||
@svg(
|
||||
$icon,
|
||||
$iconClasses,
|
||||
[
|
||||
'wire:loading.remove.delay' => $hasLoadingIndicator,
|
||||
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
|
||||
],
|
||||
)
|
||||
|
||||
@if ($hasLoadingIndicator)
|
||||
<x-filament-support::loading-indicator
|
||||
@@ -121,7 +123,7 @@
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
|
||||
@if ($indicator)
|
||||
<span class="{{ $indicatorClasses }}">
|
||||
|
||||
@@ -60,13 +60,13 @@
|
||||
{{ $attributes->class($linkClasses) }}
|
||||
>
|
||||
@if ($icon && $iconPosition === 'before')
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses"/>
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
@if ($icon && $iconPosition === 'after')
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
</a>
|
||||
@elseif ($tag === 'button')
|
||||
@@ -86,12 +86,14 @@
|
||||
>
|
||||
@if ($iconPosition === 'before')
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
:wire:loading.remove.delay="$hasLoadingIndicator"
|
||||
:wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
|
||||
:class="$iconClasses"
|
||||
/>
|
||||
@svg(
|
||||
$icon,
|
||||
$iconClasses,
|
||||
[
|
||||
'wire:loading.remove.delay' => $hasLoadingIndicator,
|
||||
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
|
||||
],
|
||||
)
|
||||
@endif
|
||||
|
||||
@if ($hasLoadingIndicator)
|
||||
@@ -108,12 +110,14 @@
|
||||
|
||||
@if ($iconPosition === 'after')
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
:wire:loading.remove.delay="$hasLoadingIndicator"
|
||||
:wire:target="$hasLoadingIndicator ? $loadingIndicatorTarget : false"
|
||||
:class="$iconClasses"
|
||||
/>
|
||||
@svg(
|
||||
$icon,
|
||||
$iconClasses,
|
||||
[
|
||||
'wire:loading.remove.delay' => $hasLoadingIndicator,
|
||||
'wire:target' => $hasLoadingIndicator ? $loadingIndicatorTarget : false,
|
||||
],
|
||||
)
|
||||
@endif
|
||||
|
||||
@if ($hasLoadingIndicator)
|
||||
|
||||
@@ -121,12 +121,15 @@
|
||||
type="button"
|
||||
class="absolute top-2 right-2 rtl:right-auto rtl:left-2"
|
||||
>
|
||||
<x-heroicon-m-x-mark
|
||||
class="filament-modal-close-button h-4 w-4 cursor-pointer text-gray-400"
|
||||
title="__('filament-support::components/modal.actions.close.label')"
|
||||
x-on:click="isOpen = false"
|
||||
tabindex="-1"
|
||||
/>
|
||||
@svg(
|
||||
'heroicon-m-x-mark',
|
||||
'filament-modal-close-button h-4 w-4 cursor-pointer text-gray-400',
|
||||
[
|
||||
'title' => __('filament-support::components/modal.actions.close.label'),
|
||||
'x-on:click' => 'isOpen = false',
|
||||
'tabindex' => -1,
|
||||
],
|
||||
)
|
||||
|
||||
<span class="sr-only">
|
||||
{{ __('filament-support::components/modal.actions.close.label') }}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
$colorClasses,
|
||||
])>
|
||||
@if ($icon && $iconPosition === 'before')
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
|
||||
<span>
|
||||
@@ -40,7 +40,7 @@
|
||||
</span>
|
||||
|
||||
@if ($icon && $iconPosition === 'after')
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -15,9 +15,9 @@
|
||||
}}
|
||||
>
|
||||
@if ($icon)
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
:class="\Illuminate\Support\Arr::toCssClasses([
|
||||
@svg(
|
||||
$icon,
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
match ($color) {
|
||||
'danger' => 'text-danger-500',
|
||||
'primary' => 'text-primary-500',
|
||||
@@ -34,7 +34,7 @@
|
||||
'xl' => 'h-7 w-7',
|
||||
default => $size,
|
||||
},
|
||||
])"
|
||||
/>
|
||||
]),
|
||||
)
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
<div class="inline-flex items-center space-x-1 rtl:space-x-reverse">
|
||||
@if ($icon && $iconPosition === 'before')
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
|
||||
<span>
|
||||
@@ -59,7 +59,7 @@
|
||||
</span>
|
||||
|
||||
@if ($icon && $iconPosition === 'after')
|
||||
<x-dynamic-component :component="$icon" :class="$iconClasses" />
|
||||
@svg($icon, $iconClasses)
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
@@ -54,9 +54,9 @@
|
||||
}"
|
||||
>
|
||||
@if ($hasOffIcon())
|
||||
<x-dynamic-component
|
||||
:component="$getOffIcon()"
|
||||
:class="\Illuminate\Support\Arr::toCssClasses([
|
||||
@svg(
|
||||
$getOffIcon(),
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
'h-3 w-3',
|
||||
match ($getOffColor()) {
|
||||
'danger' => 'text-danger-500',
|
||||
@@ -65,8 +65,8 @@
|
||||
'warning' => 'text-warning-500',
|
||||
default => 'text-gray-400',
|
||||
},
|
||||
])"
|
||||
/>
|
||||
]),
|
||||
)
|
||||
@endif
|
||||
</span>
|
||||
|
||||
@@ -79,10 +79,9 @@
|
||||
}"
|
||||
>
|
||||
@if ($hasOnIcon())
|
||||
<x-dynamic-component
|
||||
:component="$getOnIcon()"
|
||||
x-cloak
|
||||
:class="\Illuminate\Support\Arr::toCssClasses([
|
||||
@svg(
|
||||
$getOnIcon(),
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
'h-3 w-3',
|
||||
match ($getOnColor()) {
|
||||
'danger' => 'text-danger-500',
|
||||
@@ -91,8 +90,9 @@
|
||||
'warning' => 'text-warning-500',
|
||||
default => 'text-primary-500',
|
||||
},
|
||||
])"
|
||||
/>
|
||||
]),
|
||||
['x-cloak'],
|
||||
)
|
||||
@endif
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -13,12 +13,14 @@
|
||||
'flex items-center justify-center w-16 h-16 text-primary-500 rounded-full bg-primary-50',
|
||||
'dark:bg-gray-700' => config('tables.dark_mode'),
|
||||
])>
|
||||
<x-dynamic-component
|
||||
:component="$icon"
|
||||
class="w-6 h-6"
|
||||
wire:loading.remove.delay
|
||||
wire:target="{{ implode(',', \Filament\Tables\Table::LOADING_TARGETS) }}"
|
||||
/>
|
||||
@svg(
|
||||
$icon,
|
||||
'h-6 w-6',
|
||||
[
|
||||
'wire:loading.remove.delay',
|
||||
'wire:target' => implode(',', \Filament\Tables\Table::LOADING_TARGETS),
|
||||
],
|
||||
)
|
||||
|
||||
<x-filament-support::loading-indicator
|
||||
class="w-6 h-6"
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
type="button"
|
||||
class="ml-1 -mr-2 rtl:mr-1 rtl:-ml-2 p-1 -my-1 hover:bg-gray-500/10 rounded-full"
|
||||
>
|
||||
<x-heroicon-m-x-mark class="w-3 h-3" />
|
||||
@svg('heroicon-m-x-mark', 'h-3 w-3')
|
||||
|
||||
<span class="sr-only">
|
||||
{{ __('tables::table.filters.buttons.remove.label') }}
|
||||
@@ -50,12 +50,15 @@
|
||||
])
|
||||
>
|
||||
<div class="w-5 h-5 flex items-center justify-center">
|
||||
<x-heroicon-m-x-mark
|
||||
:x-tooltip.raw="__('tables::table.filters.buttons.remove_all.tooltip')"
|
||||
wire:loading.remove.delay
|
||||
wire:target="removeTableFilters,removeTableFilter"
|
||||
class="w-5 h-5"
|
||||
/>
|
||||
@svg(
|
||||
'heroicon-m-x-mark',
|
||||
'h-5 w-5',
|
||||
[
|
||||
'x-tooltip.raw' => __('tables::table.filters.buttons.remove_all.tooltip'),
|
||||
'wire:loading.remove.delay',
|
||||
'wire:target' => 'removeTableFilters,removeTableFilter',
|
||||
],
|
||||
)
|
||||
|
||||
<x-filament-support::loading-indicator
|
||||
wire:loading.delay
|
||||
|
||||
@@ -30,14 +30,14 @@
|
||||
</span>
|
||||
|
||||
@if ($sortable)
|
||||
<x-dynamic-component
|
||||
:component="$isSortColumn && $sortDirection === 'asc' ? 'heroicon-m-chevron-up' : 'heroicon-m-chevron-down'"
|
||||
:class="\Illuminate\Support\Arr::toCssClasses([
|
||||
@svg(
|
||||
$isSortColumn && $sortDirection === 'asc' ? 'heroicon-m-chevron-up' : 'heroicon-m-chevron-down',
|
||||
\Illuminate\Support\Arr::toCssClasses([
|
||||
'filament-tables-header-cell-sort-icon h-3 w-3',
|
||||
'dark:text-gray-300' => config('tables.dark_mode'),
|
||||
'opacity-25' => ! $isSortColumn,
|
||||
])"
|
||||
/>
|
||||
]),
|
||||
)
|
||||
@endif
|
||||
</button>
|
||||
</th>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
]) }}
|
||||
>
|
||||
@if ($icon)
|
||||
<x-dynamic-component :component="$icon" class="w-5 h-5 rtl:scale-x-[-1]" />
|
||||
@svg($icon, 'h-5 w-5 rtl:-scale-x-100')
|
||||
@endif
|
||||
|
||||
<span>{{ $label ?? ($separator ? '...' : '') }}</span>
|
||||
|
||||
@@ -5,5 +5,5 @@
|
||||
'dark:text-gray-400 dark:group-hover:text-primary-400' => config('tables.dark_mode'),
|
||||
]) }}
|
||||
>
|
||||
<x-heroicon-o-bars-3 class="block h-4 w-4" />
|
||||
@svg('heroicon-o-bars-3', 'block h-4 w-4')
|
||||
</button>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
<div class="relative group">
|
||||
<span class="absolute inset-y-0 left-0 flex items-center justify-center w-9 h-9 text-gray-400 pointer-events-none group-focus-within:text-primary-500">
|
||||
<x-heroicon-m-magnifying-glass class="w-5 h-5" />
|
||||
@svg('heroicon-m-magnifying-glass', 'h-5 w-5')
|
||||
</span>
|
||||
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user