mirror of
https://github.com/filamentphp/filament.git
synced 2026-08-31 01:14:50 +08:00
Use Blade prettier plugin
This commit is contained in:
Dan Harrin
@@ -1,4 +1,6 @@
|
||||
*.md
|
||||
**/dist
|
||||
docs-assets
|
||||
tests/src/Upgrade/Fixture
|
||||
**/vendor
|
||||
composer.lock
|
||||
|
||||
+43
-24
@@ -25,31 +25,46 @@ const defaultOptions = {
|
||||
treeShaking: true,
|
||||
target: ['es2020'],
|
||||
minify: !isDev,
|
||||
plugins: [{
|
||||
name: 'watchPlugin',
|
||||
setup: function (build) {
|
||||
build.onStart(() => {
|
||||
console.log(`Build started at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`)
|
||||
})
|
||||
plugins: [
|
||||
{
|
||||
name: 'watchPlugin',
|
||||
setup: function (build) {
|
||||
build.onStart(() => {
|
||||
console.log(
|
||||
`Build started at ${new Date(
|
||||
Date.now(),
|
||||
).toLocaleTimeString()}: ${
|
||||
build.initialOptions.outfile
|
||||
}`,
|
||||
)
|
||||
})
|
||||
|
||||
build.onEnd((result) => {
|
||||
if (result.errors.length > 0) {
|
||||
console.log(`Build failed at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`, result.errors)
|
||||
} else {
|
||||
console.log(`Build finished at ${new Date(Date.now()).toLocaleTimeString()}: ${build.initialOptions.outfile}`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}],
|
||||
build.onEnd((result) => {
|
||||
if (result.errors.length > 0) {
|
||||
console.log(
|
||||
`Build failed at ${new Date(
|
||||
Date.now(),
|
||||
).toLocaleTimeString()}: ${
|
||||
build.initialOptions.outfile
|
||||
}`,
|
||||
result.errors,
|
||||
)
|
||||
} else {
|
||||
console.log(
|
||||
`Build finished at ${new Date(
|
||||
Date.now(),
|
||||
).toLocaleTimeString()}: ${
|
||||
build.initialOptions.outfile
|
||||
}`,
|
||||
)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const corePackages = [
|
||||
'forms',
|
||||
'notifications',
|
||||
'panels',
|
||||
'support',
|
||||
'tables',
|
||||
]
|
||||
const corePackages = ['forms', 'notifications', 'panels', 'support', 'tables']
|
||||
|
||||
corePackages.forEach((packageName) => {
|
||||
compile({
|
||||
@@ -90,7 +105,9 @@ const formComponents = [
|
||||
formComponents.forEach((componentName) => {
|
||||
compile({
|
||||
...defaultOptions,
|
||||
entryPoints: [`./packages/forms/resources/js/components/${componentName}.js`],
|
||||
entryPoints: [
|
||||
`./packages/forms/resources/js/components/${componentName}.js`,
|
||||
],
|
||||
outfile: `./packages/forms/dist/components/${componentName}.js`,
|
||||
})
|
||||
})
|
||||
@@ -103,6 +120,8 @@ compile({
|
||||
|
||||
compile({
|
||||
...defaultOptions,
|
||||
entryPoints: [`./packages/widgets/resources/js/components/stats-overview/card/chart.js`],
|
||||
entryPoints: [
|
||||
`./packages/widgets/resources/js/components/stats-overview/card/chart.js`,
|
||||
],
|
||||
outfile: `./packages/widgets/dist/components/stats-overview/card/chart.js`,
|
||||
})
|
||||
|
||||
Generated
+587
-466
File diff suppressed because it is too large
Load Diff
+2
-1
@@ -7,7 +7,7 @@
|
||||
"build:js": "node bin/build.mjs",
|
||||
"build:css": "npx tailwindcss -c ./packages/panels/tailwind.config.js -i ./packages/panels/resources/css/theme.css -o ./packages/panels/dist/theme.css --minify",
|
||||
"build": "npm-run-all build:*",
|
||||
"prettier": "npx prettier --write '**/*.{css,js,yml}' '!**/dist' '!**/public' '!**/vendor'"
|
||||
"prettier": "npx prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alpinejs/collapse": "^3.10.3",
|
||||
@@ -45,6 +45,7 @@
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.4.4",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-blade": "^1.5.3",
|
||||
"prettier-plugin-tailwindcss": "^0.3.0",
|
||||
"pusher-js": "^7.4.0",
|
||||
"sortablejs": "^1.15.0",
|
||||
|
||||
@@ -16,16 +16,18 @@
|
||||
|
||||
@if (count($actions))
|
||||
<div
|
||||
{{ $attributes->class([
|
||||
'filament-actions-actions',
|
||||
'flex flex-wrap items-center gap-4' => ! $fullWidth,
|
||||
match ($alignment) {
|
||||
'center' => 'justify-center',
|
||||
'right' => 'flex-row-reverse space-x-reverse',
|
||||
default => 'justify-start',
|
||||
} => ! $fullWidth,
|
||||
'grid gap-2 grid-cols-[repeat(auto-fit,minmax(0,1fr))]' => $fullWidth,
|
||||
]) }}
|
||||
{{
|
||||
$attributes->class([
|
||||
'filament-actions-actions',
|
||||
'flex flex-wrap items-center gap-4' => ! $fullWidth,
|
||||
match ($alignment) {
|
||||
'center' => 'justify-center',
|
||||
'right' => 'flex-row-reverse space-x-reverse',
|
||||
default => 'justify-start',
|
||||
} => ! $fullWidth,
|
||||
'grid grid-cols-[repeat(auto-fit,minmax(0,1fr))] gap-2' => $fullWidth,
|
||||
])
|
||||
}}
|
||||
>
|
||||
@foreach ($actions as $action)
|
||||
{{ $action }}
|
||||
|
||||
@@ -75,7 +75,9 @@
|
||||
|
||||
@if (count($modalActions = $action->getVisibleModalActions()))
|
||||
<x-slot name="footer">
|
||||
<x-filament::modal.actions :full-width="$action->isModalCentered()">
|
||||
<x-filament::modal.actions
|
||||
:full-width="$action->isModalCentered()"
|
||||
>
|
||||
@foreach ($modalActions as $modalAction)
|
||||
{{ $modalAction }}
|
||||
@endforeach
|
||||
@@ -168,7 +170,9 @@
|
||||
|
||||
@if (count($modalActions = $action->getVisibleModalActions()))
|
||||
<x-slot name="footer">
|
||||
<x-filament::modal.actions :full-width="$action->isModalCentered()">
|
||||
<x-filament::modal.actions
|
||||
:full-width="$action->isModalCentered()"
|
||||
>
|
||||
@foreach ($modalActions as $modalAction)
|
||||
{{ $modalAction }}
|
||||
@endforeach
|
||||
@@ -261,7 +265,9 @@
|
||||
|
||||
@if (count($modalActions = $action->getVisibleModalActions()))
|
||||
<x-slot name="footer">
|
||||
<x-filament::modal.actions :full-width="$action->isModalCentered()">
|
||||
<x-filament::modal.actions
|
||||
:full-width="$action->isModalCentered()"
|
||||
>
|
||||
@foreach ($modalActions as $modalAction)
|
||||
{{ $modalAction }}
|
||||
@endforeach
|
||||
@@ -348,7 +354,9 @@
|
||||
|
||||
@if (count($modalActions = $action->getVisibleModalActions()))
|
||||
<x-slot name="footer">
|
||||
<x-filament::modal.actions :full-width="$action->isModalCentered()">
|
||||
<x-filament::modal.actions
|
||||
:full-width="$action->isModalCentered()"
|
||||
>
|
||||
@foreach ($modalActions as $modalAction)
|
||||
{{ $modalAction }}
|
||||
@endforeach
|
||||
@@ -428,7 +436,9 @@
|
||||
|
||||
@if (count($modalActions = $action->getVisibleModalActions()))
|
||||
<x-slot name="footer">
|
||||
<x-filament::modal.actions :full-width="$action->isModalCentered()">
|
||||
<x-filament::modal.actions
|
||||
:full-width="$action->isModalCentered()"
|
||||
>
|
||||
@foreach ($modalActions as $modalAction)
|
||||
{{ $modalAction }}
|
||||
@endforeach
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<select
|
||||
id="{{ $getId() }}"
|
||||
wire:model="{{ $getName() }}"
|
||||
{{ $attributes->class(['text-gray-900 border-gray-300 invalid:text-gray-400 block w-full h-9 py-1 transition duration-75 rounded-lg shadow-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 dark:focus:border-primary-500']) }}
|
||||
{{ $attributes->class(['block h-9 w-full rounded-lg border-gray-300 py-1 text-gray-900 shadow-sm outline-none transition duration-75 invalid:text-gray-400 focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:focus:border-primary-500']) }}
|
||||
>
|
||||
@if (($placeholder = $getPlaceholder()) !== null)
|
||||
<option value="">{{ $placeholder }}</option>
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
<div {{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-forms-actions-component flex flex-col h-full',
|
||||
match ($verticalAlignment = $getVerticalAlignment()) {
|
||||
'center' => 'justify-center',
|
||||
'end' => 'justify-end',
|
||||
'start' => 'justify-start',
|
||||
default => $verticalAlignment,
|
||||
},
|
||||
])
|
||||
}}>
|
||||
<div
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-forms-actions-component flex h-full flex-col',
|
||||
match ($verticalAlignment = $getVerticalAlignment()) {
|
||||
'center' => 'justify-center',
|
||||
'end' => 'justify-end',
|
||||
'start' => 'justify-start',
|
||||
default => $verticalAlignment,
|
||||
},
|
||||
])
|
||||
}}
|
||||
>
|
||||
<x-filament-actions::actions
|
||||
:actions="$getChildComponentContainer()->getComponents()"
|
||||
:alignment="$getAlignment()"
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
])
|
||||
|
||||
@php
|
||||
$baseAffixClasses = 'whitespace-nowrap group-focus-within:text-primary-500 shadow-sm px-2 border border-gray-300 self-stretch flex items-center dark:border-gray-600 dark:bg-gray-700';
|
||||
$baseAffixClasses = 'flex items-center self-stretch whitespace-nowrap border border-gray-300 px-2 shadow-sm group-focus-within:text-primary-500 dark:border-gray-600 dark:bg-gray-700';
|
||||
|
||||
$prefixActions = array_filter(
|
||||
$prefixActions,
|
||||
@@ -22,9 +22,11 @@
|
||||
);
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes->class(['filament-forms-affix-container flex rtl:space-x-reverse group']) }}>
|
||||
<div
|
||||
{{ $attributes->class(['filament-forms-affix-container group flex rtl:space-x-reverse']) }}
|
||||
>
|
||||
@if (count($prefixActions))
|
||||
<div class="self-stretch flex gap-1 items-center pe-2">
|
||||
<div class="flex items-center gap-1 self-stretch pe-2">
|
||||
@foreach ($prefixActions as $prefixAction)
|
||||
{{ $prefixAction }}
|
||||
@endforeach
|
||||
@@ -35,7 +37,7 @@
|
||||
<span
|
||||
@class([
|
||||
$baseAffixClasses,
|
||||
'rounded-s-lg -me-px',
|
||||
'-me-px rounded-s-lg',
|
||||
])
|
||||
@if (filled($statePath))
|
||||
x-bind:class="{
|
||||
@@ -58,7 +60,7 @@
|
||||
@class([
|
||||
'filament-input-affix-label -me-px',
|
||||
$baseAffixClasses,
|
||||
'rounded-s-lg' => ! $prefixIcon
|
||||
'rounded-s-lg' => ! $prefixIcon,
|
||||
])
|
||||
@if (filled($statePath))
|
||||
x-bind:class="{
|
||||
@@ -71,7 +73,7 @@
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="min-w-0 flex-1">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@@ -80,7 +82,7 @@
|
||||
@class([
|
||||
'filament-input-affix-label -ms-px',
|
||||
$baseAffixClasses,
|
||||
'rounded-e-lg' => ! $suffixIcon
|
||||
'rounded-e-lg' => ! $suffixIcon,
|
||||
])
|
||||
@if (filled($statePath))
|
||||
x-bind:class="{
|
||||
@@ -97,7 +99,7 @@
|
||||
<span
|
||||
@class([
|
||||
$baseAffixClasses,
|
||||
'rounded-e-lg -ms-px',
|
||||
'-ms-px rounded-e-lg',
|
||||
])
|
||||
@if (filled($statePath))
|
||||
x-bind:class="{
|
||||
@@ -116,7 +118,7 @@
|
||||
@endif
|
||||
|
||||
@if (count($suffixActions))
|
||||
<div class="self-stretch flex gap-1 items-center ps-2">
|
||||
<div class="flex items-center gap-1 self-stretch ps-2">
|
||||
@foreach ($suffixActions as $suffixAction)
|
||||
{{ $suffixAction }}
|
||||
@endforeach
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$containers = $getChildComponentContainers();
|
||||
|
||||
@@ -22,11 +19,15 @@
|
||||
<div>
|
||||
@if ((count($containers) > 1) && $isCollapsible)
|
||||
<div class="space-x-2 rtl:space-x-reverse" x-data="{}">
|
||||
<span x-on:click="$dispatch('builder-collapse', '{{ $statePath }}')">
|
||||
<span
|
||||
x-on:click="$dispatch('builder-collapse', '{{ $statePath }}')"
|
||||
>
|
||||
{{ $getAction('collapseAll') }}
|
||||
</span>
|
||||
|
||||
<span x-on:click="$dispatch('builder-expand', '{{ $statePath }}')">
|
||||
<span
|
||||
x-on:click="$dispatch('builder-expand', '{{ $statePath }}')"
|
||||
>
|
||||
{{ $getAction('expandAll') }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -93,7 +94,7 @@
|
||||
<header
|
||||
@if ($isCollapsible) x-on:click.stop="isCollapsed = ! isCollapsed" @endif
|
||||
@class([
|
||||
'flex items-center h-10 overflow-hidden border-b bg-gray-50 rounded-t-xl dark:bg-gray-800 dark:border-gray-700',
|
||||
'flex h-10 items-center overflow-hidden rounded-t-xl border-b bg-gray-50 dark:border-gray-700 dark:bg-gray-800',
|
||||
'cursor-pointer' => $isCollapsible,
|
||||
])
|
||||
>
|
||||
@@ -104,7 +105,9 @@
|
||||
@endif
|
||||
|
||||
@if ($hasBlockLabels)
|
||||
<p class="flex-none px-4 text-xs font-medium text-gray-600 truncate dark:text-gray-400">
|
||||
<p
|
||||
class="flex-none truncate px-4 text-xs font-medium text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
@php
|
||||
$block = $item->getParentComponent();
|
||||
|
||||
@@ -118,42 +121,56 @@
|
||||
@endphp
|
||||
|
||||
@if ($hasBlockNumbers)
|
||||
<small class="font-mono">{{ $loop->iteration }}</small>
|
||||
<small class="font-mono">
|
||||
{{ $loop->iteration }}
|
||||
</small>
|
||||
@endif
|
||||
</p>
|
||||
@endif
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<ul class="flex divide-x rtl:divide-x-reverse dark:divide-gray-700">
|
||||
<ul
|
||||
class="flex divide-x rtl:divide-x-reverse dark:divide-gray-700"
|
||||
>
|
||||
@if ($isReorderableWithButtons)
|
||||
@if (! $loop->first)
|
||||
<li class="flex items-center justify-center">
|
||||
<li
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
{{ $moveUpAction(['item' => $uuid]) }}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if (! $loop->last)
|
||||
<li class="flex items-center justify-center">
|
||||
<li
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
{{ $moveDownAction(['item' => $uuid]) }}
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
@if ($cloneAction)
|
||||
<li class="flex items-center justify-center">
|
||||
<li
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
{{ $cloneAction(['item' => $uuid]) }}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($deleteAction)
|
||||
<li class="flex items-center justify-center">
|
||||
<li
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
{{ $deleteAction(['item' => $uuid]) }}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($isCollapsible)
|
||||
<li x-on:click.stop="isCollapsed = ! isCollapsed">
|
||||
<li
|
||||
x-on:click.stop="isCollapsed = ! isCollapsed"
|
||||
>
|
||||
<div x-show="!isCollapsed">
|
||||
{{ $getAction('collapse') }}
|
||||
</div>
|
||||
@@ -167,11 +184,17 @@
|
||||
</header>
|
||||
@endif
|
||||
|
||||
<div x-bind:class="{ 'invisible h-0 !m-0 overflow-y-hidden': isCollapsed, 'p-6': !isCollapsed}">
|
||||
<div
|
||||
x-bind:class="{ 'invisible h-0 !m-0 overflow-y-hidden': isCollapsed, 'p-6': !isCollapsed}"
|
||||
>
|
||||
{{ $item }}
|
||||
</div>
|
||||
|
||||
<div class="p-2 text-xs text-center text-gray-400" x-show="isCollapsed" x-cloak>
|
||||
<div
|
||||
class="p-2 text-center text-xs text-gray-400"
|
||||
x-show="isCollapsed"
|
||||
x-cloak
|
||||
>
|
||||
{{ __('filament-forms::components.builder.collapsed') }}
|
||||
</div>
|
||||
|
||||
@@ -179,7 +202,7 @@
|
||||
<div
|
||||
x-show="isAddButtonVisible"
|
||||
x-transition
|
||||
class="absolute inset-x-0 bottom-0 flex items-center justify-center h-12 -mb-12"
|
||||
class="absolute inset-x-0 bottom-0 -mb-12 flex h-12 items-center justify-center"
|
||||
>
|
||||
<x-filament-forms::builder.block-picker
|
||||
:action="$addBetweenAction"
|
||||
|
||||
@@ -6,7 +6,9 @@
|
||||
'trigger',
|
||||
])
|
||||
|
||||
<x-filament::dropdown {{ $attributes->class(['filament-forms-builder-component-block-picker']) }}>
|
||||
<x-filament::dropdown
|
||||
{{ $attributes->class(['filament-forms-builder-component-block-picker']) }}
|
||||
>
|
||||
<x-slot name="trigger">
|
||||
{{ $trigger }}
|
||||
</x-slot>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<div {{ $attributes->merge($getExtraAttributes(), escape: false)->class(['filament-forms-builder-component-block py-8']) }}>
|
||||
<div
|
||||
{{ $attributes->merge($getExtraAttributes(), escape: false)->class(['filament-forms-builder-component-block py-8']) }}
|
||||
>
|
||||
{{ $getChildComponentContainer() }}
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<div {{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-forms-card-component rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20'])
|
||||
}}>
|
||||
<div
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-forms-card-component rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20'])
|
||||
}}
|
||||
>
|
||||
{{ $getChildComponentContainer() }}
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$gridDirection = $getGridDirection();
|
||||
$isBulkToggleable = $isBulkToggleable();
|
||||
@@ -10,7 +7,8 @@
|
||||
$statePath = $getStatePath();
|
||||
@endphp
|
||||
|
||||
<div x-data="{
|
||||
<div
|
||||
x-data="{
|
||||
|
||||
areAllCheckboxesChecked: false,
|
||||
|
||||
@@ -57,14 +55,15 @@
|
||||
})
|
||||
}
|
||||
|
||||
}">
|
||||
}"
|
||||
>
|
||||
@if (! $isDisabled)
|
||||
@if ($isSearchable)
|
||||
<input
|
||||
x-model.debounce.{{ $getSearchDebounce() }}="search"
|
||||
type="search"
|
||||
placeholder="{{ $getSearchPrompt() }}"
|
||||
class="mb-2 block h-7 px-2 text-sm w-full rounded-lg border-gray-300 shadow-sm text-gray-700 transition duration-75 outline-none focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:text-gray-200 dark:bg-gray-700 dark:focus:border-primary-500 dark:border-gray-600"
|
||||
class="mb-2 block h-7 w-full rounded-lg border-gray-300 px-2 text-sm text-gray-700 shadow-sm outline-none transition duration-75 focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:focus:border-primary-500"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@@ -108,7 +107,9 @@
|
||||
]))"
|
||||
>
|
||||
@forelse ($getOptions() as $optionValue => $optionLabel)
|
||||
<div wire:key="{{ $this->id }}.{{ $statePath }}.{{ $field::class }}.options.{{ $optionValue }}">
|
||||
<div
|
||||
wire:key="{{ $this->id }}.{{ $statePath }}.{{ $field::class }}.options.{{ $optionValue }}"
|
||||
>
|
||||
<label
|
||||
class="filament-forms-checkbox-list-component-option-label flex items-center space-x-3 rtl:space-x-reverse"
|
||||
@if ($isSearchable)
|
||||
@@ -130,20 +131,24 @@
|
||||
$applyStateBindingModifiers('wire:model') => $statePath,
|
||||
], escape: false)
|
||||
->class([
|
||||
'text-primary-600 transition duration-75 rounded shadow-sm focus:ring-2 disabled:opacity-70 dark:bg-gray-700 dark:checked:bg-primary-500',
|
||||
'rounded text-primary-600 shadow-sm transition duration-75 focus:ring-2 disabled:opacity-70 dark:bg-gray-700 dark:checked:bg-primary-500',
|
||||
'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
])
|
||||
}}
|
||||
/>
|
||||
|
||||
<span class="filament-forms-checkbox-list-component-option-label-text text-sm text-gray-700 dark:text-gray-200">
|
||||
<span
|
||||
class="filament-forms-checkbox-list-component-option-label-text text-sm text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
{{ $optionLabel }}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@empty
|
||||
<div wire:key="{{ $this->id }}.{{ $statePath }}.{{ $field::class }}.empty"></div>
|
||||
<div
|
||||
wire:key="{{ $this->id }}.{{ $statePath }}.{{ $field::class }}.empty"
|
||||
></div>
|
||||
@endforelse
|
||||
</x-filament::grid>
|
||||
|
||||
|
||||
@@ -1,32 +1,31 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$statePath = $getStatePath();
|
||||
@endphp
|
||||
|
||||
@capture($content)
|
||||
<input {{
|
||||
$attributes
|
||||
->merge([
|
||||
'autofocus' => $isAutofocused(),
|
||||
'disabled' => $isDisabled(),
|
||||
'dusk' => "filament.forms.{$statePath}",
|
||||
'id' => $getId(),
|
||||
'required' => $isRequired() && (! $isConcealed()),
|
||||
'type' => 'checkbox',
|
||||
'wire:loading.attr' => 'disabled',
|
||||
$applyStateBindingModifiers('wire:model') => $statePath,
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraInputAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-forms-checkbox-component filament-forms-input text-primary-600 transition duration-75 rounded shadow-sm focus:ring-2 disabled:opacity-70 dark:bg-gray-700 dark:checked:bg-primary-500',
|
||||
'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
])
|
||||
}} />
|
||||
<input
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'autofocus' => $isAutofocused(),
|
||||
'disabled' => $isDisabled(),
|
||||
'dusk' => "filament.forms.{$statePath}",
|
||||
'id' => $getId(),
|
||||
'required' => $isRequired() && (! $isConcealed()),
|
||||
'type' => 'checkbox',
|
||||
'wire:loading.attr' => 'disabled',
|
||||
$applyStateBindingModifiers('wire:model') => $statePath,
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraInputAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-forms-checkbox-component filament-forms-input rounded text-primary-600 shadow-sm transition duration-75 focus:ring-2 disabled:opacity-70 dark:bg-gray-700 dark:checked:bg-primary-500',
|
||||
'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
])
|
||||
}}
|
||||
/>
|
||||
@endcapture
|
||||
|
||||
@if ($isInline())
|
||||
|
||||
@@ -8,10 +8,7 @@
|
||||
$suffixLabel = $getSuffixLabel();
|
||||
@endphp
|
||||
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
<x-filament-forms::affixes
|
||||
:state-path="$statePath"
|
||||
:prefix="$prefixLabel"
|
||||
@@ -23,7 +20,9 @@
|
||||
class="filament-forms-text-input-component"
|
||||
:attributes="\Filament\Support\prepare_inherited_attributes($getExtraAttributeBag())"
|
||||
>
|
||||
<div {{ $attributes->merge($getExtraAttributes(), escape: false)->class(['filament-forms-color-picker-component flex items-center space-x-1 rtl:space-x-reverse group']) }}>
|
||||
<div
|
||||
{{ $attributes->merge($getExtraAttributes(), escape: false)->class(['filament-forms-color-picker-component group flex items-center space-x-1 rtl:space-x-reverse']) }}
|
||||
>
|
||||
<div
|
||||
x-ignore
|
||||
ax-load
|
||||
@@ -53,7 +52,7 @@
|
||||
'type' => 'text',
|
||||
], escape: false)
|
||||
->class([
|
||||
'filament-forms-input text-gray-900 block w-full transition duration-75 shadow-sm outline-none sm:text-sm focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white',
|
||||
'filament-forms-input block w-full text-gray-900 shadow-sm outline-none transition duration-75 focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white sm:text-sm',
|
||||
'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
'rounded-s-lg' => ! ($prefixLabel || $prefixIcon),
|
||||
@@ -64,11 +63,11 @@
|
||||
|
||||
<span
|
||||
x-cloak
|
||||
class="absolute inset-y-0 end-0 flex items-center pe-2 pointer-events-none"
|
||||
class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-2"
|
||||
>
|
||||
<span
|
||||
x-bind:style="{ 'background-color': state, ...(state ? { 'background-image': 'none' } : {}) }"
|
||||
class="filament-forms-color-picker-component-preview relative overflow-hidden rounded-md w-7 h-7"
|
||||
class="filament-forms-color-picker-component-preview relative h-7 w-7 overflow-hidden rounded-md"
|
||||
></span>
|
||||
</span>
|
||||
|
||||
@@ -79,8 +78,8 @@
|
||||
wire:ignore.self
|
||||
wire:key="{{ $this->id }}.{{ $statePath }}.{{ $field::class }}.panel"
|
||||
@class([
|
||||
'hidden absolute z-10 shadow-lg',
|
||||
'opacity-70 pointer-events-none' => $isDisabled,
|
||||
'absolute z-10 hidden shadow-lg',
|
||||
'pointer-events-none opacity-70' => $isDisabled,
|
||||
])
|
||||
>
|
||||
@php
|
||||
@@ -95,7 +94,6 @@
|
||||
<{{ $tag }} color="{{ $getState() }}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-filament-forms::affixes>
|
||||
</x-dynamic-component>
|
||||
|
||||
@@ -10,10 +10,7 @@
|
||||
$suffixLabel = $getSuffixLabel();
|
||||
@endphp
|
||||
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
<x-filament-forms::affixes
|
||||
:state-path="$statePath"
|
||||
:prefix="$prefixLabel"
|
||||
@@ -50,7 +47,7 @@
|
||||
$applyStateBindingModifiers('wire:model') => $statePath,
|
||||
], escape: false)
|
||||
->class([
|
||||
'block w-full transition duration-75 shadow-sm outline-none sm:text-sm focus:relative focus:z-[1] focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white',
|
||||
'block w-full shadow-sm outline-none transition duration-75 focus:relative focus:z-[1] focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white sm:text-sm',
|
||||
'rounded-s-lg' => ! ($prefixLabel || $prefixIcon),
|
||||
'rounded-e-lg' => ! ($suffixLabel || $suffixIcon),
|
||||
])
|
||||
@@ -77,9 +74,21 @@
|
||||
->class(['filament-forms-date-time-picker-component relative'])
|
||||
}}
|
||||
>
|
||||
<input x-ref="maxDate" type="hidden" value="{{ $getMaxDate() }}" />
|
||||
<input x-ref="minDate" type="hidden" value="{{ $getMinDate() }}" />
|
||||
<input x-ref="disabledDates" type="hidden" value="{{ json_encode($getDisabledDates()) }}" />
|
||||
<input
|
||||
x-ref="maxDate"
|
||||
type="hidden"
|
||||
value="{{ $getMaxDate() }}"
|
||||
/>
|
||||
<input
|
||||
x-ref="minDate"
|
||||
type="hidden"
|
||||
value="{{ $getMinDate() }}"
|
||||
/>
|
||||
<input
|
||||
x-ref="disabledDates"
|
||||
type="hidden"
|
||||
value="{{ json_encode($getDisabledDates()) }}"
|
||||
/>
|
||||
|
||||
<button
|
||||
x-ref="button"
|
||||
@@ -97,17 +106,19 @@
|
||||
type="button"
|
||||
tabindex="-1"
|
||||
@disabled($isDisabled)
|
||||
{{ $getExtraTriggerAttributeBag()->class([
|
||||
'bg-white relative w-full border py-2 text-start cursor-default shadow-sm outline-none sm:text-sm dark:bg-gray-700',
|
||||
'focus-within:ring-1 focus-within:ring-inset' => ! $isDisabled,
|
||||
'border-gray-300 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-600 dark:focus-within:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
'opacity-70 dark:text-gray-300' => $isDisabled,
|
||||
'rounded-s-lg' => ! ($prefixLabel || $prefixIcon),
|
||||
'rounded-e-lg' => ! ($suffixLabel || $suffixIcon),
|
||||
'px-3' => $icon === false,
|
||||
'ps-3 pe-10' => $icon !== false,
|
||||
]) }}
|
||||
{{
|
||||
$getExtraTriggerAttributeBag()->class([
|
||||
'relative w-full cursor-default border bg-white py-2 text-start shadow-sm outline-none dark:bg-gray-700 sm:text-sm',
|
||||
'focus-within:ring-1 focus-within:ring-inset' => ! $isDisabled,
|
||||
'border-gray-300 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-600 dark:focus-within:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
'opacity-70 dark:text-gray-300' => $isDisabled,
|
||||
'rounded-s-lg' => ! ($prefixLabel || $prefixIcon),
|
||||
'rounded-e-lg' => ! ($suffixLabel || $suffixIcon),
|
||||
'px-3' => $icon === false,
|
||||
'pe-10 ps-3' => $icon !== false,
|
||||
])
|
||||
}}
|
||||
>
|
||||
<input
|
||||
readonly
|
||||
@@ -116,13 +127,15 @@
|
||||
x-model="displayText"
|
||||
@if ($id = $getId()) id="{{ $id }}" @endif
|
||||
@class([
|
||||
'w-full h-full p-0 placeholder-gray-400 bg-transparent border-0 outline-none focus:outline-none focus:placeholder-gray-500 focus:ring-0 dark:bg-gray-700 dark:placeholder-gray-400',
|
||||
'h-full w-full border-0 bg-transparent p-0 placeholder-gray-400 outline-none focus:placeholder-gray-500 focus:outline-none focus:ring-0 dark:bg-gray-700 dark:placeholder-gray-400',
|
||||
'cursor-default' => $isDisabled,
|
||||
])
|
||||
/>
|
||||
|
||||
@if ($icon !== false)
|
||||
<span class="absolute inset-y-0 end-0 flex items-center pe-2 pointer-events-none">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-2"
|
||||
>
|
||||
<x-filament::icon
|
||||
:name="$icon"
|
||||
alias="forms::components.date-time-picker.suffix"
|
||||
@@ -140,20 +153,25 @@
|
||||
wire:ignore
|
||||
wire:key="{{ $this->id }}.{{ $statePath }}.{{ $field::class }}.panel"
|
||||
@class([
|
||||
'absolute hidden z-10 my-1 bg-white border border-gray-300 rounded-lg shadow-md dark:bg-gray-700 dark:border-gray-600',
|
||||
'p-4 min-w-[16rem] w-fit' => $hasDate(),
|
||||
'absolute z-10 my-1 hidden rounded-lg border border-gray-300 bg-white shadow-md dark:border-gray-600 dark:bg-gray-700',
|
||||
'w-fit min-w-[16rem] p-4' => $hasDate(),
|
||||
])
|
||||
>
|
||||
<div class="space-y-3">
|
||||
@if ($hasDate())
|
||||
<div class="flex items-center justify-between space-x-1 rtl:space-x-reverse">
|
||||
<div
|
||||
class="flex items-center justify-between space-x-1 rtl:space-x-reverse"
|
||||
>
|
||||
<select
|
||||
x-model="focusedMonth"
|
||||
class="grow px-1 py-0 text-lg font-medium text-gray-800 border-0 cursor-pointer outline-none focus:ring-0 dark:bg-gray-700 dark:text-gray-200"
|
||||
class="grow cursor-pointer border-0 px-1 py-0 text-lg font-medium text-gray-800 outline-none focus:ring-0 dark:bg-gray-700 dark:text-gray-200"
|
||||
dusk="filament.forms.{{ $statePath }}.focusedMonth"
|
||||
>
|
||||
<template x-for="(month, index) in months">
|
||||
<option x-bind:value="index" x-text="month"></option>
|
||||
<option
|
||||
x-bind:value="index"
|
||||
x-text="month"
|
||||
></option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
@@ -161,26 +179,37 @@
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="focusedYear"
|
||||
class="w-20 p-0 text-lg text-end border-0 outline-none focus:ring-0 dark:bg-gray-700 dark:text-gray-200"
|
||||
class="w-20 border-0 p-0 text-end text-lg outline-none focus:ring-0 dark:bg-gray-700 dark:text-gray-200"
|
||||
dusk="filament.forms.{{ $statePath }}.focusedYear"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
<template x-for="(day, index) in dayLabels" x-bind:key="index">
|
||||
<template
|
||||
x-for="(day, index) in dayLabels"
|
||||
x-bind:key="index"
|
||||
>
|
||||
<div
|
||||
x-text="day"
|
||||
class="text-xs font-medium text-center text-gray-800 dark:text-gray-200"
|
||||
class="text-center text-xs font-medium text-gray-800 dark:text-gray-200"
|
||||
></div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div role="grid" class="grid grid-cols-7 gap-1">
|
||||
<template x-for="day in emptyDaysInFocusedMonth" x-bind:key="day">
|
||||
<div class="text-sm text-center border border-transparent"></div>
|
||||
<template
|
||||
x-for="day in emptyDaysInFocusedMonth"
|
||||
x-bind:key="day"
|
||||
>
|
||||
<div
|
||||
class="border border-transparent text-center text-sm"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<template x-for="day in daysInFocusedMonth" x-bind:key="day">
|
||||
<template
|
||||
x-for="day in daysInFocusedMonth"
|
||||
x-bind:key="day"
|
||||
>
|
||||
<div
|
||||
x-text="day"
|
||||
x-on:click="dayIsDisabled(day) || selectDate(day)"
|
||||
@@ -197,14 +226,16 @@
|
||||
'opacity-50': focusedDate.date() !== day && dayIsDisabled(day),
|
||||
}"
|
||||
x-bind:dusk="'filament.forms.{{ $statePath }}' + '.focusedDate.' + day"
|
||||
class="text-sm leading-loose text-center transition duration-100 ease-in-out rounded-full"
|
||||
class="rounded-full text-center text-sm leading-loose transition duration-100 ease-in-out"
|
||||
></div>
|
||||
</template>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($hasTime())
|
||||
<div class="flex items-center justify-center bg-gray-50 py-2 rounded-lg rtl:flex-row-reverse dark:bg-gray-800">
|
||||
<div
|
||||
class="flex items-center justify-center rounded-lg bg-gray-50 py-2 rtl:flex-row-reverse dark:bg-gray-800"
|
||||
>
|
||||
<input
|
||||
max="23"
|
||||
min="0"
|
||||
@@ -212,11 +243,15 @@
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="hour"
|
||||
class="w-16 p-0 pe-1 text-xl bg-gray-50 text-center text-gray-700 border-0 outline-none focus:ring-0 dark:text-gray-200 dark:bg-gray-800"
|
||||
class="w-16 border-0 bg-gray-50 p-0 pe-1 text-center text-xl text-gray-700 outline-none focus:ring-0 dark:bg-gray-800 dark:text-gray-200"
|
||||
dusk="filament.forms.{{ $statePath }}.hour"
|
||||
/>
|
||||
|
||||
<span class="text-xl font-medium bg-gray-50 text-gray-700 dark:text-gray-200 dark:bg-gray-800">:</span>
|
||||
<span
|
||||
class="bg-gray-50 text-xl font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
|
||||
<input
|
||||
max="59"
|
||||
@@ -225,12 +260,16 @@
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="minute"
|
||||
class="w-16 p-0 pe-1 text-xl text-center bg-gray-50 text-gray-700 border-0 outline-none focus:ring-0 dark:text-gray-200 dark:bg-gray-800"
|
||||
class="w-16 border-0 bg-gray-50 p-0 pe-1 text-center text-xl text-gray-700 outline-none focus:ring-0 dark:bg-gray-800 dark:text-gray-200"
|
||||
dusk="filament.forms.{{ $statePath }}.minute"
|
||||
/>
|
||||
|
||||
@if ($hasSeconds())
|
||||
<span class="text-xl font-medium text-gray-700 bg-gray-50 dark:text-gray-200 dark:bg-gray-800">:</span>
|
||||
<span
|
||||
class="bg-gray-50 text-xl font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
|
||||
<input
|
||||
max="59"
|
||||
@@ -240,7 +279,7 @@
|
||||
inputmode="numeric"
|
||||
x-model.debounce="second"
|
||||
dusk="filament.forms.{{ $statePath }}.second"
|
||||
class="w-16 p-0 pe-1 text-xl text-center bg-gray-50 text-gray-700 border-0 outline-none focus:ring-0 dark:text-gray-200 dark:bg-gray-800"
|
||||
class="w-16 border-0 bg-gray-50 p-0 pe-1 text-center text-xl text-gray-700 outline-none focus:ring-0 dark:bg-gray-800 dark:text-gray-200"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
<p
|
||||
data-validation-error
|
||||
{{ $attributes->class([
|
||||
'filament-forms-field-wrapper-error-message text-sm text-danger-600 dark:text-danger-400',
|
||||
]) }}
|
||||
{{
|
||||
$attributes->class([
|
||||
'filament-forms-field-wrapper-error-message text-sm text-danger-600 dark:text-danger-400',
|
||||
])
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</p>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<div {{ $attributes->class(['filament-forms-field-wrapper-helper-text text-sm text-gray-600 dark:text-gray-300']) }}>
|
||||
<div
|
||||
{{ $attributes->class(['filament-forms-field-wrapper-helper-text text-sm text-gray-600 dark:text-gray-300']) }}
|
||||
>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@@ -4,19 +4,23 @@
|
||||
'icon' => null,
|
||||
])
|
||||
|
||||
<div {{ $attributes->class([
|
||||
'filament-forms-field-wrapper-hint flex items-center space-x-2 rtl:space-x-reverse',
|
||||
match ($color) {
|
||||
'danger' => 'text-danger-500 dark:text-danger-300',
|
||||
'gray', null => 'text-gray-500 dark:text-gray-300',
|
||||
'info' => 'text-info-500 dark:text-info-300',
|
||||
'primary' => 'text-primary-500 dark:text-primary-300',
|
||||
'secondary' => 'text-secondary-500 dark:text-secondary-300',
|
||||
'success' => 'text-success-500 dark:text-success-300',
|
||||
'warning' => 'text-warning-500 dark:text-warning-300',
|
||||
default => $color,
|
||||
},
|
||||
]) }}>
|
||||
<div
|
||||
{{
|
||||
$attributes->class([
|
||||
'filament-forms-field-wrapper-hint flex items-center space-x-2 rtl:space-x-reverse',
|
||||
match ($color) {
|
||||
'danger' => 'text-danger-500 dark:text-danger-300',
|
||||
'gray', null => 'text-gray-500 dark:text-gray-300',
|
||||
'info' => 'text-info-500 dark:text-info-300',
|
||||
'primary' => 'text-primary-500 dark:text-primary-300',
|
||||
'secondary' => 'text-secondary-500 dark:text-secondary-300',
|
||||
'success' => 'text-success-500 dark:text-success-300',
|
||||
'warning' => 'text-warning-500 dark:text-warning-300',
|
||||
default => $color,
|
||||
},
|
||||
])
|
||||
}}
|
||||
>
|
||||
@if ($slot->isNotEmpty())
|
||||
<span class="text-xs leading-tight">
|
||||
{{ $slot }}
|
||||
@@ -32,7 +36,9 @@
|
||||
@endif
|
||||
|
||||
@if (count($actions))
|
||||
<div class="filament-forms-field-wrapper-hint-action flex gap-1 items-center">
|
||||
<div
|
||||
class="filament-forms-field-wrapper-hint-action flex items-center gap-1"
|
||||
>
|
||||
@foreach ($actions as $action)
|
||||
{{ $action }}
|
||||
@endforeach
|
||||
|
||||
@@ -49,7 +49,9 @@
|
||||
|
||||
<div class="space-y-2">
|
||||
@if (($label && (! $labelSrOnly)) || $labelPrefix || $labelSuffix || $hint || $hintIcon || count($hintActions))
|
||||
<div class="flex items-center justify-between space-x-2 rtl:space-x-reverse">
|
||||
<div
|
||||
class="flex items-center justify-between space-x-2 rtl:space-x-reverse"
|
||||
>
|
||||
@if ($label && (! $labelSrOnly))
|
||||
<x-filament-forms::field-wrapper.label
|
||||
:for="$id"
|
||||
@@ -69,7 +71,11 @@
|
||||
@endif
|
||||
|
||||
@if ($hint || $hintIcon || count($hintActions))
|
||||
<x-filament-forms::field-wrapper.hint :actions="$hintActions" :color="$hintColor" :icon="$hintIcon">
|
||||
<x-filament-forms::field-wrapper.hint
|
||||
:actions="$hintActions"
|
||||
:color="$hintColor"
|
||||
:icon="$hintIcon"
|
||||
>
|
||||
{{ filled($hint) ? ($hint instanceof \Illuminate\Support\HtmlString ? $hint : str($hint)->markdown()->sanitizeHtml()->toHtmlString()) : null }}
|
||||
</x-filament-forms::field-wrapper.hint>
|
||||
@endif
|
||||
|
||||
@@ -47,9 +47,11 @@
|
||||
</label>
|
||||
@endif
|
||||
|
||||
<div class="grid gap-2 sm:grid-cols-3 sm:gap-4 sm:items-start">
|
||||
<div class="grid gap-2 sm:grid-cols-3 sm:items-start sm:gap-4">
|
||||
@if (($label && (! $labelSrOnly)) || $labelPrefix || $labelSuffix || $hint || $hintIcon || count($hintActions))
|
||||
<div class="flex items-center justify-between gap-2 sm:gap-1 sm:items-start sm:flex-col sm:pt-2">
|
||||
<div
|
||||
class="flex items-center justify-between gap-2 sm:flex-col sm:items-start sm:gap-1 sm:pt-2"
|
||||
>
|
||||
@if ($label && (! $labelSrOnly))
|
||||
<x-filament-forms::field-wrapper.label
|
||||
:for="$id"
|
||||
@@ -69,14 +71,18 @@
|
||||
@endif
|
||||
|
||||
@if ($hint || $hintIcon || count($hintActions))
|
||||
<x-filament-forms::field-wrapper.hint :actions="$hintActions" :color="$hintColor" :icon="$hintIcon">
|
||||
<x-filament-forms::field-wrapper.hint
|
||||
:actions="$hintActions"
|
||||
:color="$hintColor"
|
||||
:icon="$hintIcon"
|
||||
>
|
||||
{{ filled($hint) ? ($hint instanceof \Illuminate\Support\HtmlString ? $hint : str($hint)->markdown()->sanitizeHtml()->toHtmlString()) : null }}
|
||||
</x-filament-forms::field-wrapper.hint>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="space-y-2 sm:space-y-1 sm:col-span-2">
|
||||
<div class="space-y-2 sm:col-span-2 sm:space-y-1">
|
||||
{{ $slot }}
|
||||
|
||||
@if ($errors->has($statePath) || ($hasNestedRecursiveValidationRules && $errors->has("{$statePath}.*")))
|
||||
|
||||
@@ -7,17 +7,21 @@
|
||||
'suffix' => null,
|
||||
])
|
||||
|
||||
<label {{ $attributes->class(['filament-forms-field-wrapper-label inline-flex items-center space-x-3 rtl:space-x-reverse']) }}>
|
||||
<label
|
||||
{{ $attributes->class(['filament-forms-field-wrapper-label inline-flex items-center space-x-3 rtl:space-x-reverse']) }}
|
||||
>
|
||||
{{ $prefix }}
|
||||
|
||||
<span @class([
|
||||
'text-sm font-medium leading-4',
|
||||
'text-gray-700 dark:text-gray-300' => ! $error,
|
||||
'text-danger-700 dark:text-danger-400' => $error,
|
||||
])>
|
||||
<span
|
||||
@class([
|
||||
'text-sm font-medium leading-4',
|
||||
'text-gray-700 dark:text-gray-300' => ! $error,
|
||||
'text-danger-700 dark:text-danger-400' => $error,
|
||||
])
|
||||
>
|
||||
{{-- Deliberately poor formatting to ensure that the asterisk sticks to the final word in the label. --}}
|
||||
{{ $slot }}@if ($required && $isMarkedAsRequired && ! $isDisabled)<span class="whitespace-nowrap">
|
||||
<sup class="font-medium text-danger-700 dark:text-danger-400">*</sup>
|
||||
<sup class="text-danger-700 dark:text-danger-400 font-medium">*</sup>
|
||||
</span>
|
||||
@endif
|
||||
</span>
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
<fieldset {{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-forms-fieldset-component rounded-xl shadow-sm border border-gray-300 p-6 dark:border-gray-600 dark:text-gray-200'])
|
||||
}}>
|
||||
<fieldset
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-forms-fieldset-component rounded-xl border border-gray-300 p-6 shadow-sm dark:border-gray-600 dark:text-gray-200'])
|
||||
}}
|
||||
>
|
||||
@if (filled($label = $getLabel()))
|
||||
<legend class="text-sm leading-tight font-medium px-2 -ms-2">
|
||||
<legend class="-ms-2 px-2 text-sm font-medium leading-tight">
|
||||
{{ $getLabel() }}
|
||||
</legend>
|
||||
@endif
|
||||
|
||||
@@ -81,7 +81,9 @@
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style="min-height: {{ $isAvatar ? '8em' : ($getPanelLayout() === 'compact' ? '2.625em' : '4.75em') }}"
|
||||
style="
|
||||
min-height: {{ $isAvatar ? '8em' : ($getPanelLayout() === 'compact' ? '2.625em' : '4.75em') }};
|
||||
"
|
||||
@class([
|
||||
'w-32' => $isAvatar,
|
||||
'w-full' => ! $isAvatar,
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$addAction = $getAction('add');
|
||||
$deleteAction = $getAction('delete');
|
||||
@@ -27,19 +24,23 @@
|
||||
->class(['filament-forms-key-value-component'])
|
||||
}}
|
||||
>
|
||||
<div class="border border-gray-300 divide-y shadow-sm bg-white rounded-xl overflow-hidden dark:bg-gray-700 dark:border-gray-600 dark:divide-gray-600">
|
||||
<table class="w-full text-start divide-y table-auto dark:divide-gray-700">
|
||||
<div
|
||||
class="divide-y overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm dark:divide-gray-600 dark:border-gray-600 dark:bg-gray-700"
|
||||
>
|
||||
<table
|
||||
class="w-full table-auto divide-y text-start dark:divide-gray-700"
|
||||
>
|
||||
<thead>
|
||||
<tr class="bg-gray-50 dark:bg-gray-800/60">
|
||||
<th
|
||||
class="px-4 py-2 whitespace-nowrap font-medium text-sm text-gray-600 dark:text-gray-300"
|
||||
class="whitespace-nowrap px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300"
|
||||
scope="col"
|
||||
>
|
||||
{{ $getKeyLabel() }}
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="px-4 py-2 whitespace-nowrap font-medium text-sm text-gray-600 dark:text-gray-300"
|
||||
class="whitespace-nowrap px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-300"
|
||||
scope="col"
|
||||
>
|
||||
{{ $getValueLabel() }}
|
||||
@@ -65,7 +66,11 @@
|
||||
x-ref="tableBody"
|
||||
class="divide-y whitespace-nowrap dark:divide-gray-600"
|
||||
>
|
||||
<template x-for="(row, index) in rows" x-bind:key="index" x-ref="rowTemplate">
|
||||
<template
|
||||
x-for="(row, index) in rows"
|
||||
x-bind:key="index"
|
||||
x-ref="rowTemplate"
|
||||
>
|
||||
<tr
|
||||
@if ($reorderAction)
|
||||
x-bind:x-sortable-item="row.key"
|
||||
@@ -81,8 +86,8 @@
|
||||
@if ((! $canEditKeys()) || $isDisabled)
|
||||
disabled
|
||||
@endif
|
||||
class="w-full px-4 py-3 font-mono text-sm bg-transparent border-0 focus:ring-0"
|
||||
>
|
||||
class="w-full border-0 bg-transparent px-4 py-3 font-mono text-sm focus:ring-0"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap">
|
||||
@@ -94,13 +99,15 @@
|
||||
@if ((! $canEditValues()) || $isDisabled)
|
||||
disabled
|
||||
@endif
|
||||
class="w-full px-4 py-3 font-mono text-sm bg-transparent border-0 focus:ring-0"
|
||||
>
|
||||
class="w-full border-0 bg-transparent px-4 py-3 font-mono text-sm focus:ring-0"
|
||||
/>
|
||||
</td>
|
||||
|
||||
@if (($deleteAction || $reorderAction) && (! $isDisabled))
|
||||
<td class="whitespace-nowrap">
|
||||
<div class="flex items-center justify-center px-2">
|
||||
<div
|
||||
class="flex items-center justify-center px-2"
|
||||
>
|
||||
@if ($reorderAction)
|
||||
<div x-sortable-handle>
|
||||
{{ $reorderAction }}
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$id = $getId();
|
||||
$statePath = $getStatePath();
|
||||
@@ -40,7 +37,9 @@
|
||||
<textarea x-ref="editor" class="hidden"></textarea>
|
||||
</div>
|
||||
@else
|
||||
<div class="prose block w-full max-w-none rounded-lg border border-gray-300 bg-white p-3 opacity-70 shadow-sm dark:prose-invert dark:border-gray-600 dark:bg-gray-700">
|
||||
<div
|
||||
class="prose block w-full max-w-none rounded-lg border border-gray-300 bg-white p-3 opacity-70 shadow-sm dark:prose-invert dark:border-gray-600 dark:bg-gray-700"
|
||||
>
|
||||
{!! str($getState())->markdown()->sanitizeHtml() !!}
|
||||
</div>
|
||||
@endunless
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
->merge([
|
||||
'type' => 'button',
|
||||
], escape: false)
|
||||
->class(['filament-forms-markdown-editor-component-toolbar-button h-full border-gray-300 bg-white text-gray-800 text-sm py-1 px-3 cursor-pointer font-medium border rounded-lg transition duration-200 shadow-sm hover:bg-gray-100 focus:ring-primary-200 focus:ring focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white'])
|
||||
->class(['filament-forms-markdown-editor-component-toolbar-button h-full cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-1 text-sm font-medium text-gray-800 shadow-sm transition duration-200 hover:bg-gray-100 focus:ring focus:ring-primary-200 focus:ring-opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white'])
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
|
||||
@@ -10,7 +10,9 @@
|
||||
:hint-icon="$getHintIcon()"
|
||||
:state-path="$getStatePath()"
|
||||
>
|
||||
<div {{ $attributes->merge($getExtraAttributes(), escape: false)->class(['filament-forms-placeholder-component sm:text-sm']) }}>
|
||||
<div
|
||||
{{ $attributes->merge($getExtraAttributes(), escape: false)->class(['filament-forms-placeholder-component sm:text-sm']) }}
|
||||
>
|
||||
{{ $getContent() }}
|
||||
</div>
|
||||
</x-dynamic-component>
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$id = $getId();
|
||||
$isDisabled = $isDisabled();
|
||||
@@ -29,12 +26,14 @@
|
||||
$shouldOptionBeDisabled = $isDisabled || $isOptionDisabled($value, $label);
|
||||
@endphp
|
||||
|
||||
<div @class([
|
||||
'flex items-start',
|
||||
'gap-3' => ! $isInline,
|
||||
'gap-2' => $isInline,
|
||||
])>
|
||||
<div class="flex items-center h-5">
|
||||
<div
|
||||
@class([
|
||||
'flex items-start',
|
||||
'gap-3' => ! $isInline,
|
||||
'gap-2' => $isInline,
|
||||
])
|
||||
>
|
||||
<div class="flex h-5 items-center">
|
||||
<input
|
||||
name="{{ $id }}"
|
||||
id="{{ $id }}-{{ $value }}"
|
||||
@@ -43,22 +42,27 @@
|
||||
dusk="filament.forms.{{ $statePath }}"
|
||||
@disabled($shouldOptionBeDisabled)
|
||||
{{ $applyStateBindingModifiers('wire:model') }}="{{ $statePath }}"
|
||||
{{ $getExtraInputAttributeBag()->class([
|
||||
'h-4 w-4 text-primary-600 outline-none ring-1 ring-inset disabled:opacity-70 dark:bg-gray-700 dark:checked:bg-primary-500',
|
||||
'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
]) }}
|
||||
{{
|
||||
$getExtraInputAttributeBag()->class([
|
||||
'h-4 w-4 text-primary-600 outline-none ring-1 ring-inset disabled:opacity-70 dark:bg-gray-700 dark:checked:bg-primary-500',
|
||||
'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
])
|
||||
}}
|
||||
wire:loading.attr="disabled"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-sm">
|
||||
<label for="{{ $id }}-{{ $value }}" @class([
|
||||
'font-medium',
|
||||
'text-gray-700 dark:text-gray-200' => ! $errors->has($statePath),
|
||||
'text-danger-600 dark:text-danger-400' => $errors->has($statePath),
|
||||
'opacity-50' => $shouldOptionBeDisabled,
|
||||
])>
|
||||
<label
|
||||
for="{{ $id }}-{{ $value }}"
|
||||
@class([
|
||||
'font-medium',
|
||||
'text-gray-700 dark:text-gray-200' => ! $errors->has($statePath),
|
||||
'text-danger-600 dark:text-danger-400' => $errors->has($statePath),
|
||||
'opacity-50' => $shouldOptionBeDisabled,
|
||||
])
|
||||
>
|
||||
{{ $label }}
|
||||
</label>
|
||||
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$containers = $getChildComponentContainers();
|
||||
|
||||
@@ -22,11 +19,15 @@
|
||||
<div>
|
||||
@if ((count($containers) > 1) && $isCollapsible)
|
||||
<div class="space-x-2 rtl:space-x-reverse" x-data="{}">
|
||||
<span x-on:click="$dispatch('repeater-collapse', '{{ $statePath }}')">
|
||||
<span
|
||||
x-on:click="$dispatch('repeater-collapse', '{{ $statePath }}')"
|
||||
>
|
||||
{{ $getAction('collapseAll') }}
|
||||
</span>
|
||||
|
||||
<span x-on:click="$dispatch('repeater-expand', '{{ $statePath }}')">
|
||||
<span
|
||||
x-on:click="$dispatch('repeater-expand', '{{ $statePath }}')"
|
||||
>
|
||||
{{ $getAction('expandAll') }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -87,7 +88,7 @@
|
||||
<header
|
||||
@if ($isCollapsible) x-on:click.stop="isCollapsed = ! isCollapsed" @endif
|
||||
@class([
|
||||
'flex items-center h-10 overflow-hidden border-b bg-gray-50 rounded-t-xl dark:bg-gray-800 dark:border-gray-700',
|
||||
'flex h-10 items-center overflow-hidden rounded-t-xl border-b bg-gray-50 dark:border-gray-700 dark:bg-gray-800',
|
||||
'cursor-pointer' => $isCollapsible,
|
||||
])
|
||||
>
|
||||
@@ -97,46 +98,63 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<p class="flex-none px-4 text-xs font-medium text-gray-600 truncate dark:text-gray-400">
|
||||
<p
|
||||
class="flex-none truncate px-4 text-xs font-medium text-gray-600 dark:text-gray-400"
|
||||
>
|
||||
{{ $getItemLabel($uuid) }}
|
||||
</p>
|
||||
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<ul class="flex divide-x rtl:divide-x-reverse dark:divide-gray-700">
|
||||
<ul
|
||||
class="flex divide-x rtl:divide-x-reverse dark:divide-gray-700"
|
||||
>
|
||||
@if ($isReorderableWithButtons)
|
||||
@if (! $loop->first)
|
||||
<li class="flex items-center justify-center">
|
||||
<li
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
{{ $moveUpAction(['item' => $uuid]) }}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if (! $loop->last)
|
||||
<li class="flex items-center justify-center">
|
||||
<li
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
{{ $moveDownAction(['item' => $uuid]) }}
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
@if ($cloneAction)
|
||||
<li class="flex items-center justify-center">
|
||||
<li
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
{{ $cloneAction(['item' => $uuid]) }}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($deleteAction)
|
||||
<li class="flex items-center justify-center">
|
||||
<li
|
||||
class="flex items-center justify-center"
|
||||
>
|
||||
{{ $deleteAction(['item' => $uuid]) }}
|
||||
</li>
|
||||
@endif
|
||||
|
||||
@if ($isCollapsible)
|
||||
<li x-on:click.stop="isCollapsed = ! isCollapsed">
|
||||
<li
|
||||
x-on:click.stop="isCollapsed = ! isCollapsed"
|
||||
>
|
||||
<div x-show="!isCollapsed">
|
||||
{{ $getAction('collapse') }}
|
||||
</div>
|
||||
|
||||
<div x-show="isCollapsed" x-cloak>
|
||||
<div
|
||||
x-show="isCollapsed"
|
||||
x-cloak
|
||||
>
|
||||
{{ $getAction('expand') }}
|
||||
</div>
|
||||
</li>
|
||||
@@ -145,11 +163,17 @@
|
||||
</header>
|
||||
@endif
|
||||
|
||||
<div x-bind:class="{ 'invisible h-0 !m-0 overflow-y-hidden': isCollapsed, 'p-6': !isCollapsed}">
|
||||
<div
|
||||
x-bind:class="{ 'invisible h-0 !m-0 overflow-y-hidden': isCollapsed, 'p-6': !isCollapsed}"
|
||||
>
|
||||
{{ $item }}
|
||||
</div>
|
||||
|
||||
<div class="p-2 text-xs text-center text-gray-400" x-show="isCollapsed" x-cloak>
|
||||
<div
|
||||
class="p-2 text-center text-xs text-gray-400"
|
||||
x-show="isCollapsed"
|
||||
x-cloak
|
||||
>
|
||||
{{ __('filament-forms::components.repeater.collapsed') }}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$id = $getId();
|
||||
$statePath = $getStatePath();
|
||||
@@ -50,10 +47,17 @@
|
||||
'hidden' => ! count($getToolbarButtons()),
|
||||
])
|
||||
>
|
||||
<div class="flex justify-between space-x-4 rtl:space-x-reverse overflow-x-auto items-stretch overflow-y-hidden">
|
||||
<div class="flex items-stretch space-x-4 outline-none rtl:space-x-reverse">
|
||||
<div
|
||||
class="flex items-stretch justify-between space-x-4 overflow-x-auto overflow-y-hidden rtl:space-x-reverse"
|
||||
>
|
||||
<div
|
||||
class="flex items-stretch space-x-4 outline-none rtl:space-x-reverse"
|
||||
>
|
||||
@if ($hasToolbarButton(['bold', 'italic', 'underline', 'strike', 'link']))
|
||||
<div data-trix-button-group="text-tools" class="flex items-stretch space-x-1 rtl:space-x-reverse">
|
||||
<div
|
||||
data-trix-button-group="text-tools"
|
||||
class="flex items-stretch space-x-1 rtl:space-x-reverse"
|
||||
>
|
||||
@if ($hasToolbarButton('bold'))
|
||||
<x-filament-forms::rich-editor.toolbar-button
|
||||
data-trix-attribute="bold"
|
||||
@@ -72,7 +76,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 384 512"
|
||||
>
|
||||
<path fill="currentColor" d="M321.1 242.4C340.1 220.1 352 191.6 352 160c0-70.59-57.42-128-128-128L32 32.01c-17.67 0-32 14.31-32 32s14.33 32 32 32h16v320H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h224c70.58 0 128-57.41 128-128C384 305.3 358.6 264.8 321.1 242.4zM112 96.01H224c35.3 0 64 28.72 64 64s-28.7 64-64 64H112V96.01zM256 416H112v-128H256c35.3 0 64 28.71 64 63.1S291.3 416 256 416z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M321.1 242.4C340.1 220.1 352 191.6 352 160c0-70.59-57.42-128-128-128L32 32.01c-17.67 0-32 14.31-32 32s14.33 32 32 32h16v320H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h224c70.58 0 128-57.41 128-128C384 305.3 358.6 264.8 321.1 242.4zM112 96.01H224c35.3 0 64 28.72 64 64s-28.7 64-64 64H112V96.01zM256 416H112v-128H256c35.3 0 64 28.71 64 63.1S291.3 416 256 416z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -94,7 +101,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 384 512"
|
||||
>
|
||||
<path fill="currentColor" d="M384 64.01c0 17.69-14.31 32-32 32h-58.67l-133.3 320H224c17.69 0 32 14.31 32 32s-14.31 32-32 32H32c-17.69 0-32-14.31-32-32s14.31-32 32-32h58.67l133.3-320H160c-17.69 0-32-14.31-32-32s14.31-32 32-32h192C369.7 32.01 384 46.33 384 64.01z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M384 64.01c0 17.69-14.31 32-32 32h-58.67l-133.3 320H224c17.69 0 32 14.31 32 32s-14.31 32-32 32H32c-17.69 0-32-14.31-32-32s14.31-32 32-32h58.67l133.3-320H160c-17.69 0-32-14.31-32-32s14.31-32 32-32h192C369.7 32.01 384 46.33 384 64.01z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -105,10 +115,24 @@
|
||||
title="{{ __('forms::components.rich_editor.toolbar_buttons.underline') }}"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg @class([
|
||||
'h-4',
|
||||
'dark:fill-current' => config('forms.dark_mode'),
|
||||
]) aria-hidden="true" focusable="false" data-prefix="fas" data-icon="underline" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-16v128c0 53 43 96 96 96s96-43 96-96V96h-16c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-16v128c0 88.4-71.6 160-160 160S64 312.4 64 224V96H48c-17.7 0-32-14.3-32-32zM0 448c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"/></svg>
|
||||
<svg
|
||||
@class([
|
||||
'h-4',
|
||||
'dark:fill-current' => config('forms.dark_mode'),
|
||||
])
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="underline"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-16v128c0 53 43 96 96 96s96-43 96-96V96h-16c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32h-16v128c0 88.4-71.6 160-160 160S64 312.4 64 224V96H48c-17.7 0-32-14.3-32-32zM0 448c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"
|
||||
/>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
|
||||
@@ -128,7 +152,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path fill="currentColor" d="M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21c-3.031 17.59-10.88 29.34-24.72 36.99c-35.44 19.75-108.5 11.96-186-19.68c-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37c29.62 0 58.81-5.156 83.72-18.96c30.81-17.09 50.44-45.46 56.72-82.11c3.998-23.27 2.168-42.58-3.488-59.05H332.2zM488 239.9l-176.5-.0309c-15.85-5.613-31.83-10.34-46.7-14.62c-85.47-24.62-110.9-39.05-103.7-81.33c2.5-14.53 10.16-25.96 22.72-34.03c20.47-13.15 64.06-23.84 155.4 .3438c17.09 4.531 34.59-5.654 39.13-22.74c4.531-17.09-5.656-34.59-22.75-39.12c-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1C89.26 184.5 107.9 217.3 137.2 239.9L24 239.9c-13.25 0-24 10.75-24 23.1c0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1C512 250.7 501.3 239.9 488 239.9z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21c-3.031 17.59-10.88 29.34-24.72 36.99c-35.44 19.75-108.5 11.96-186-19.68c-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37c29.62 0 58.81-5.156 83.72-18.96c30.81-17.09 50.44-45.46 56.72-82.11c3.998-23.27 2.168-42.58-3.488-59.05H332.2zM488 239.9l-176.5-.0309c-15.85-5.613-31.83-10.34-46.7-14.62c-85.47-24.62-110.9-39.05-103.7-81.33c2.5-14.53 10.16-25.96 22.72-34.03c20.47-13.15 64.06-23.84 155.4 .3438c17.09 4.531 34.59-5.654 39.13-22.74c4.531-17.09-5.656-34.59-22.75-39.12c-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1C89.26 184.5 107.9 217.3 137.2 239.9L24 239.9c-13.25 0-24 10.75-24 23.1c0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1C512 250.7 501.3 239.9 488 239.9z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -151,7 +178,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<path fill="currentColor" d="M598.6 41.41C570.1 13.8 534.8 0 498.6 0s-72.36 13.8-99.96 41.41l-43.36 43.36c15.11 8.012 29.47 17.58 41.91 30.02c3.146 3.146 5.898 6.518 8.742 9.838l37.96-37.96C458.5 72.05 477.1 64 498.6 64c20.67 0 40.1 8.047 54.71 22.66c14.61 14.61 22.66 34.04 22.66 54.71s-8.049 40.1-22.66 54.71l-133.3 133.3C405.5 343.1 386 352 365.4 352s-40.1-8.048-54.71-22.66C296 314.7 287.1 295.3 287.1 274.6s8.047-40.1 22.66-54.71L314.2 216.4C312.1 212.5 309.9 208.5 306.7 205.3C298.1 196.7 286.8 192 274.6 192c-11.93 0-23.1 4.664-31.61 12.97c-30.71 53.96-23.63 123.6 22.39 169.6C293 402.2 329.2 416 365.4 416c36.18 0 72.36-13.8 99.96-41.41L598.6 241.3c28.45-28.45 42.24-66.01 41.37-103.3C639.1 102.1 625.4 68.16 598.6 41.41zM234 387.4L196.1 425.3C181.5 439.1 162 448 141.4 448c-20.67 0-40.1-8.047-54.71-22.66c-14.61-14.61-22.66-34.04-22.66-54.71s8.049-40.1 22.66-54.71l133.3-133.3C234.5 168 253.1 160 274.6 160s40.1 8.048 54.71 22.66c14.62 14.61 22.66 34.04 22.66 54.71s-8.047 40.1-22.66 54.71L325.8 295.6c2.094 3.939 4.219 7.895 7.465 11.15C341.9 315.3 353.3 320 365.4 320c11.93 0 23.1-4.664 31.61-12.97c30.71-53.96 23.63-123.6-22.39-169.6C346.1 109.8 310.8 96 274.6 96C238.4 96 202.3 109.8 174.7 137.4L41.41 270.7c-27.6 27.6-41.41 63.78-41.41 99.96c-.0001 36.18 13.8 72.36 41.41 99.97C69.01 498.2 105.2 512 141.4 512c36.18 0 72.36-13.8 99.96-41.41l43.36-43.36c-15.11-8.012-29.47-17.58-41.91-30.02C239.6 394.1 236.9 390.7 234 387.4z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M598.6 41.41C570.1 13.8 534.8 0 498.6 0s-72.36 13.8-99.96 41.41l-43.36 43.36c15.11 8.012 29.47 17.58 41.91 30.02c3.146 3.146 5.898 6.518 8.742 9.838l37.96-37.96C458.5 72.05 477.1 64 498.6 64c20.67 0 40.1 8.047 54.71 22.66c14.61 14.61 22.66 34.04 22.66 54.71s-8.049 40.1-22.66 54.71l-133.3 133.3C405.5 343.1 386 352 365.4 352s-40.1-8.048-54.71-22.66C296 314.7 287.1 295.3 287.1 274.6s8.047-40.1 22.66-54.71L314.2 216.4C312.1 212.5 309.9 208.5 306.7 205.3C298.1 196.7 286.8 192 274.6 192c-11.93 0-23.1 4.664-31.61 12.97c-30.71 53.96-23.63 123.6 22.39 169.6C293 402.2 329.2 416 365.4 416c36.18 0 72.36-13.8 99.96-41.41L598.6 241.3c28.45-28.45 42.24-66.01 41.37-103.3C639.1 102.1 625.4 68.16 598.6 41.41zM234 387.4L196.1 425.3C181.5 439.1 162 448 141.4 448c-20.67 0-40.1-8.047-54.71-22.66c-14.61-14.61-22.66-34.04-22.66-54.71s8.049-40.1 22.66-54.71l133.3-133.3C234.5 168 253.1 160 274.6 160s40.1 8.048 54.71 22.66c14.62 14.61 22.66 34.04 22.66 54.71s-8.047 40.1-22.66 54.71L325.8 295.6c2.094 3.939 4.219 7.895 7.465 11.15C341.9 315.3 353.3 320 365.4 320c11.93 0 23.1-4.664 31.61-12.97c30.71-53.96 23.63-123.6-22.39-169.6C346.1 109.8 310.8 96 274.6 96C238.4 96 202.3 109.8 174.7 137.4L41.41 270.7c-27.6 27.6-41.41 63.78-41.41 99.96c-.0001 36.18 13.8 72.36 41.41 99.97C69.01 498.2 105.2 512 141.4 512c36.18 0 72.36-13.8 99.96-41.41l43.36-43.36c-15.11-8.012-29.47-17.58-41.91-30.02C239.6 394.1 236.9 390.7 234 387.4z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -159,7 +189,10 @@
|
||||
@endif
|
||||
|
||||
@if ($hasToolbarButton(['h1', 'h2', 'h3']))
|
||||
<div data-trix-button-group="heading-tools" class="flex items-stretch space-x-1 rtl:space-x-reverse">
|
||||
<div
|
||||
data-trix-button-group="heading-tools"
|
||||
class="flex items-stretch space-x-1 rtl:space-x-reverse"
|
||||
>
|
||||
@if ($hasToolbarButton('h1'))
|
||||
<x-filament-forms::rich-editor.toolbar-button
|
||||
data-trix-attribute="heading1"
|
||||
@@ -193,7 +226,10 @@
|
||||
@endif
|
||||
|
||||
@if ($hasToolbarButton(['blockquote', 'codeBlock', 'bulletList', 'orderedList']))
|
||||
<div data-trix-button-group="block-tools" class="flex items-stretch space-x-1 rtl:space-x-reverse">
|
||||
<div
|
||||
data-trix-button-group="block-tools"
|
||||
class="flex items-stretch space-x-1 rtl:space-x-reverse"
|
||||
>
|
||||
@if ($hasToolbarButton('blockquote'))
|
||||
<x-filament-forms::rich-editor.toolbar-button
|
||||
data-trix-attribute="quote"
|
||||
@@ -210,7 +246,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 448 512"
|
||||
>
|
||||
<path fill="currentColor" d="M96 224C84.72 224 74.05 226.3 64 229.9V224c0-35.3 28.7-64 64-64c17.67 0 32-14.33 32-32S145.7 96 128 96C57.42 96 0 153.4 0 224v96c0 53.02 42.98 96 96 96s96-42.98 96-96S149 224 96 224zM352 224c-11.28 0-21.95 2.305-32 5.879V224c0-35.3 28.7-64 64-64c17.67 0 32-14.33 32-32s-14.33-32-32-32c-70.58 0-128 57.42-128 128v96c0 53.02 42.98 96 96 96s96-42.98 96-96S405 224 352 224z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M96 224C84.72 224 74.05 226.3 64 229.9V224c0-35.3 28.7-64 64-64c17.67 0 32-14.33 32-32S145.7 96 128 96C57.42 96 0 153.4 0 224v96c0 53.02 42.98 96 96 96s96-42.98 96-96S149 224 96 224zM352 224c-11.28 0-21.95 2.305-32 5.879V224c0-35.3 28.7-64 64-64c17.67 0 32-14.33 32-32s-14.33-32-32-32c-70.58 0-128 57.42-128 128v96c0 53.02 42.98 96 96 96s96-42.98 96-96S405 224 352 224z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -231,7 +270,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<path fill="currentColor" d="M416 31.94C416 21.75 408.1 0 384.1 0c-13.98 0-26.87 9.072-30.89 23.18l-128 448c-.8404 2.935-1.241 5.892-1.241 8.801C223.1 490.3 232 512 256 512c13.92 0 26.73-9.157 30.75-23.22l128-448C415.6 37.81 416 34.85 416 31.94zM176 143.1c0-18.28-14.95-32-32-32c-8.188 0-16.38 3.125-22.62 9.376l-112 112C3.125 239.6 0 247.8 0 255.1S3.125 272.4 9.375 278.6l112 112C127.6 396.9 135.8 399.1 144 399.1c17.05 0 32-13.73 32-32c0-8.188-3.125-16.38-9.375-22.63L77.25 255.1l89.38-89.38C172.9 160.3 176 152.2 176 143.1zM640 255.1c0-8.188-3.125-16.38-9.375-22.63l-112-112C512.4 115.1 504.2 111.1 496 111.1c-17.05 0-32 13.73-32 32c0 8.188 3.125 16.38 9.375 22.63l89.38 89.38l-89.38 89.38C467.1 351.6 464 359.8 464 367.1c0 18.28 14.95 32 32 32c8.188 0 16.38-3.125 22.62-9.376l112-112C636.9 272.4 640 264.2 640 255.1z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M416 31.94C416 21.75 408.1 0 384.1 0c-13.98 0-26.87 9.072-30.89 23.18l-128 448c-.8404 2.935-1.241 5.892-1.241 8.801C223.1 490.3 232 512 256 512c13.92 0 26.73-9.157 30.75-23.22l128-448C415.6 37.81 416 34.85 416 31.94zM176 143.1c0-18.28-14.95-32-32-32c-8.188 0-16.38 3.125-22.62 9.376l-112 112C3.125 239.6 0 247.8 0 255.1S3.125 272.4 9.375 278.6l112 112C127.6 396.9 135.8 399.1 144 399.1c17.05 0 32-13.73 32-32c0-8.188-3.125-16.38-9.375-22.63L77.25 255.1l89.38-89.38C172.9 160.3 176 152.2 176 143.1zM640 255.1c0-8.188-3.125-16.38-9.375-22.63l-112-112C512.4 115.1 504.2 111.1 496 111.1c-17.05 0-32 13.73-32 32c0 8.188 3.125 16.38 9.375 22.63l89.38 89.38l-89.38 89.38C467.1 351.6 464 359.8 464 367.1c0 18.28 14.95 32 32 32c8.188 0 16.38-3.125 22.62-9.376l112-112C636.9 272.4 640 264.2 640 255.1z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -252,7 +294,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path fill="currentColor" d="M16 96C16 69.49 37.49 48 64 48C90.51 48 112 69.49 112 96C112 122.5 90.51 144 64 144C37.49 144 16 122.5 16 96zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H192C174.3 128 160 113.7 160 96C160 78.33 174.3 64 192 64H480zM480 224C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H192C174.3 288 160 273.7 160 256C160 238.3 174.3 224 192 224H480zM480 384C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H192C174.3 448 160 433.7 160 416C160 398.3 174.3 384 192 384H480zM16 416C16 389.5 37.49 368 64 368C90.51 368 112 389.5 112 416C112 442.5 90.51 464 64 464C37.49 464 16 442.5 16 416zM112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208C90.51 208 112 229.5 112 256z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M16 96C16 69.49 37.49 48 64 48C90.51 48 112 69.49 112 96C112 122.5 90.51 144 64 144C37.49 144 16 122.5 16 96zM480 64C497.7 64 512 78.33 512 96C512 113.7 497.7 128 480 128H192C174.3 128 160 113.7 160 96C160 78.33 174.3 64 192 64H480zM480 224C497.7 224 512 238.3 512 256C512 273.7 497.7 288 480 288H192C174.3 288 160 273.7 160 256C160 238.3 174.3 224 192 224H480zM480 384C497.7 384 512 398.3 512 416C512 433.7 497.7 448 480 448H192C174.3 448 160 433.7 160 416C160 398.3 174.3 384 192 384H480zM16 416C16 389.5 37.49 368 64 368C90.51 368 112 389.5 112 416C112 442.5 90.51 464 64 464C37.49 464 16 442.5 16 416zM112 256C112 282.5 90.51 304 64 304C37.49 304 16 282.5 16 256C16 229.5 37.49 208 64 208C90.51 208 112 229.5 112 256z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -273,7 +318,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512"
|
||||
>
|
||||
<path fill="currentColor" d="M55.1 56.04C55.1 42.78 66.74 32.04 79.1 32.04H111.1C125.3 32.04 135.1 42.78 135.1 56.04V176H151.1C165.3 176 175.1 186.8 175.1 200C175.1 213.3 165.3 224 151.1 224H71.1C58.74 224 47.1 213.3 47.1 200C47.1 186.8 58.74 176 71.1 176H87.1V80.04H79.1C66.74 80.04 55.1 69.29 55.1 56.04V56.04zM118.7 341.2C112.1 333.8 100.4 334.3 94.65 342.4L83.53 357.9C75.83 368.7 60.84 371.2 50.05 363.5C39.26 355.8 36.77 340.8 44.47 330.1L55.59 314.5C79.33 281.2 127.9 278.8 154.8 309.6C176.1 333.1 175.6 370.5 153.7 394.3L118.8 432H152C165.3 432 176 442.7 176 456C176 469.3 165.3 480 152 480H64C54.47 480 45.84 474.4 42.02 465.6C38.19 456.9 39.9 446.7 46.36 439.7L118.4 361.7C123.7 355.9 123.8 347.1 118.7 341.2L118.7 341.2zM512 64C529.7 64 544 78.33 544 96C544 113.7 529.7 128 512 128H256C238.3 128 224 113.7 224 96C224 78.33 238.3 64 256 64H512zM512 224C529.7 224 544 238.3 544 256C544 273.7 529.7 288 512 288H256C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224H512zM512 384C529.7 384 544 398.3 544 416C544 433.7 529.7 448 512 448H256C238.3 448 224 433.7 224 416C224 398.3 238.3 384 256 384H512z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M55.1 56.04C55.1 42.78 66.74 32.04 79.1 32.04H111.1C125.3 32.04 135.1 42.78 135.1 56.04V176H151.1C165.3 176 175.1 186.8 175.1 200C175.1 213.3 165.3 224 151.1 224H71.1C58.74 224 47.1 213.3 47.1 200C47.1 186.8 58.74 176 71.1 176H87.1V80.04H79.1C66.74 80.04 55.1 69.29 55.1 56.04V56.04zM118.7 341.2C112.1 333.8 100.4 334.3 94.65 342.4L83.53 357.9C75.83 368.7 60.84 371.2 50.05 363.5C39.26 355.8 36.77 340.8 44.47 330.1L55.59 314.5C79.33 281.2 127.9 278.8 154.8 309.6C176.1 333.1 175.6 370.5 153.7 394.3L118.8 432H152C165.3 432 176 442.7 176 456C176 469.3 165.3 480 152 480H64C54.47 480 45.84 474.4 42.02 465.6C38.19 456.9 39.9 446.7 46.36 439.7L118.4 361.7C123.7 355.9 123.8 347.1 118.7 341.2L118.7 341.2zM512 64C529.7 64 544 78.33 544 96C544 113.7 529.7 128 512 128H256C238.3 128 224 113.7 224 96C224 78.33 238.3 64 256 64H512zM512 224C529.7 224 544 238.3 544 256C544 273.7 529.7 288 512 288H256C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224H512zM512 384C529.7 384 544 398.3 544 416C544 433.7 529.7 448 512 448H256C238.3 448 224 433.7 224 416C224 398.3 238.3 384 256 384H512z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -281,7 +329,10 @@
|
||||
@endif
|
||||
|
||||
@if ($hasToolbarButton('attachFiles'))
|
||||
<div data-trix-button-group="file-tools" class="flex items-stretch space-x-1 rtl:space-x-reverse">
|
||||
<div
|
||||
data-trix-button-group="file-tools"
|
||||
class="flex items-stretch space-x-1 rtl:space-x-reverse"
|
||||
>
|
||||
<x-filament-forms::rich-editor.toolbar-button
|
||||
data-trix-action="attachFiles"
|
||||
title="{{ __('filament-forms::components.rich_editor.toolbar_buttons.attach_files') }}"
|
||||
@@ -297,7 +348,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path fill="currentColor" d="M447.1 32h-484C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M447.1 32h-484C28.64 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM111.1 96c26.51 0 48 21.49 48 48S138.5 192 111.1 192s-48-21.49-48-48S85.48 96 111.1 96zM446.1 407.6C443.3 412.8 437.9 416 432 416H82.01c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C142.1 290.4 146.9 288 152 288s9.916 2.441 12.93 6.574l32.46 44.51l93.3-139.1C293.7 194.7 298.7 192 304 192s10.35 2.672 13.31 7.125l128 192C448.6 396 448.9 402.3 446.1 407.6z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
</div>
|
||||
@@ -322,10 +376,14 @@
|
||||
focusable="false"
|
||||
data-prefix="fas"
|
||||
data-icon="rotate-left"
|
||||
role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path fill="currentColor" d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -347,7 +405,10 @@
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path fill="currentColor" d="M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2c0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64c-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31c18.48 0 31.97 15.04 31.97 31.96c0 35.04-81.59 70.41-147 70.41c-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26l47.6-47.63C455.5 34.57 462.3 32.11 468.9 32.11z"></path>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M468.9 32.11c13.87 0 27.18 10.77 27.18 27.04v145.9c0 10.59-8.584 19.17-19.17 19.17h-145.7c-16.28 0-27.06-13.32-27.06-27.2c0-6.634 2.461-13.4 7.96-18.9l45.12-45.14c-28.22-23.14-63.85-36.64-101.3-36.64c-88.09 0-159.8 71.69-159.8 159.8S167.8 415.9 255.9 415.9c73.14 0 89.44-38.31 115.1-38.31c18.48 0 31.97 15.04 31.97 31.96c0 35.04-81.59 70.41-147 70.41c-123.4 0-223.9-100.5-223.9-223.9S132.6 32.44 256 32.44c54.6 0 106.2 20.39 146.4 55.26l47.6-47.63C455.5 34.57 462.3 32.11 468.9 32.11z"
|
||||
></path>
|
||||
</svg>
|
||||
</x-filament-forms::rich-editor.toolbar-button>
|
||||
@endif
|
||||
@@ -364,11 +425,14 @@
|
||||
<div class="trix-dialog__link-fields">
|
||||
<input
|
||||
name="href"
|
||||
placeholder="{{ __('filament-forms::components.rich_editor.dialogs.link.placeholder') }}" aria-label="{{ __('filament-forms::components.rich_editor.dialogs.link.label') }}" required data-trix-input
|
||||
placeholder="{{ __('filament-forms::components.rich_editor.dialogs.link.placeholder') }}"
|
||||
aria-label="{{ __('filament-forms::components.rich_editor.dialogs.link.label') }}"
|
||||
required
|
||||
data-trix-input
|
||||
disabled
|
||||
type="url"
|
||||
class="trix-input trix-input--dialog"
|
||||
>
|
||||
/>
|
||||
|
||||
<div class="trix-button-group">
|
||||
<input
|
||||
@@ -376,14 +440,14 @@
|
||||
data-trix-method="setAttribute"
|
||||
type="button"
|
||||
class="trix-button trix-button--dialog"
|
||||
>
|
||||
/>
|
||||
|
||||
<input
|
||||
value="{{ __('filament-forms::components.rich_editor.dialogs.link.actions.unlink') }}"
|
||||
data-trix-method="removeAttribute"
|
||||
type="button"
|
||||
class="trix-button trix-button--dialog"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -399,7 +463,7 @@
|
||||
toolbar="trix-toolbar-{{ $id }}"
|
||||
x-ref="trix"
|
||||
dusk="filament.forms.{{ $statePath }}"
|
||||
{{ $getExtraInputAttributeBag()->class(['bg-white block w-full transition duration-75 rounded-lg shadow-sm outline-none focus:ring-1 focus:ring-inset prose max-w-none break-words dark:prose-invert dark:bg-gray-700']) }}
|
||||
{{ $getExtraInputAttributeBag()->class(['prose block w-full max-w-none break-words rounded-lg bg-white shadow-sm outline-none transition duration-75 dark:prose-invert focus:ring-1 focus:ring-inset dark:bg-gray-700']) }}
|
||||
x-bind:class="{
|
||||
'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500': ! (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400': (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
<button {{ $attributes
|
||||
->merge([
|
||||
'type' => 'button',
|
||||
], escape: false)
|
||||
->class(['filament-forms-rich-editor-component-toolbar-button h-full border-gray-300 bg-white text-gray-800 text-sm py-1 px-3 cursor-pointer font-medium border rounded-lg transition duration-200 shadow-sm hover:bg-gray-100 focus:ring-primary-200 focus:ring focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:text-white'])
|
||||
}}>
|
||||
<button
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'type' => 'button',
|
||||
], escape: false)
|
||||
->class(['filament-forms-rich-editor-component-toolbar-button h-full cursor-pointer rounded-lg border border-gray-300 bg-white px-3 py-1 text-sm font-medium text-gray-800 shadow-sm transition duration-200 hover:bg-gray-100 focus:ring focus:ring-primary-200 focus:ring-opacity-50 dark:border-gray-600 dark:bg-gray-700 dark:text-white'])
|
||||
}}
|
||||
>
|
||||
{{ $slot }}
|
||||
</button>
|
||||
|
||||
@@ -12,14 +12,14 @@
|
||||
:icon-color="$getIconColor()"
|
||||
:icon-size="$getIconSize()"
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraAlpineAttributes(), escape: false)
|
||||
->class(['filament-forms-section-component'])
|
||||
}}
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraAlpineAttributes(), escape: false)
|
||||
->class(['filament-forms-section-component'])
|
||||
}}
|
||||
>
|
||||
<x-slot name="heading">
|
||||
{{ $getHeading() }}
|
||||
|
||||
@@ -12,10 +12,7 @@
|
||||
$hasSuffix = $suffixLabel || $suffixIcon;
|
||||
@endphp
|
||||
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
<x-filament-forms::affixes
|
||||
:state-path="$statePath"
|
||||
:prefix="$prefixLabel"
|
||||
@@ -47,7 +44,11 @@
|
||||
@endphp
|
||||
|
||||
@if ($canSelectPlaceholder())
|
||||
<option value="">@if (! $isDisabled) {{ $getPlaceholder() }} @endif</option>
|
||||
<option value="">
|
||||
@if (! $isDisabled)
|
||||
{{ $getPlaceholder() }}
|
||||
@endif
|
||||
</option>
|
||||
@endif
|
||||
|
||||
@foreach ($getOptions() as $value => $label)
|
||||
|
||||
@@ -35,18 +35,18 @@
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraAlpineAttributes(), escape: false)
|
||||
->class(['filament-forms-tabs-component rounded-xl shadow-sm bg-white ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20'])
|
||||
->class(['filament-forms-tabs-component rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20'])
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
value='{{
|
||||
value="{{
|
||||
collect($getChildComponentContainer()->getComponents())
|
||||
->filter(static fn (\Filament\Forms\Components\Tabs\Tab $tab): bool => $tab->isVisible())
|
||||
->map(static fn (\Filament\Forms\Components\Tabs\Tab $tab) => $tab->getId())
|
||||
->values()
|
||||
->toJson()
|
||||
}}'
|
||||
}}"
|
||||
x-ref="tabsData"
|
||||
/>
|
||||
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$id = $getId();
|
||||
$isDisabled = $isDisabled();
|
||||
@@ -24,11 +21,13 @@
|
||||
}}
|
||||
>
|
||||
<div x-show="state?.length || @js(! $isDisabled)">
|
||||
<div @class([
|
||||
'block w-full transition duration-75 rounded-lg shadow-sm sm:text-sm border overflow-hidden focus-within:ring-1',
|
||||
'border-gray-300 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-600 dark:focus-within:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
])>
|
||||
<div
|
||||
@class([
|
||||
'block w-full overflow-hidden rounded-lg border shadow-sm transition duration-75 focus-within:ring-1 sm:text-sm',
|
||||
'border-gray-300 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-600 dark:focus-within:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
])
|
||||
>
|
||||
@unless ($isDisabled)
|
||||
<div>
|
||||
<input
|
||||
@@ -62,12 +61,15 @@
|
||||
})
|
||||
})"
|
||||
x-model="newTag"
|
||||
{{ $getExtraInputAttributeBag()->class(['webkit-calendar-picker-indicator:opacity-0 block w-full border-0 sm:text-sm dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400']) }}
|
||||
{{ $getExtraInputAttributeBag()->class(['webkit-calendar-picker-indicator:opacity-0 block w-full border-0 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 sm:text-sm']) }}
|
||||
/>
|
||||
|
||||
<datalist id="{{ $id }}-suggestions">
|
||||
@foreach ($getSuggestions() as $suggestion)
|
||||
<template x-if="! state.includes(@js($suggestion))" x-bind:key="@js($suggestion)">
|
||||
<template
|
||||
x-if="! state.includes(@js($suggestion))"
|
||||
x-bind:key="@js($suggestion)"
|
||||
>
|
||||
<option value="{{ $suggestion }}" />
|
||||
</template>
|
||||
@endforeach
|
||||
@@ -76,15 +78,18 @@
|
||||
@endunless
|
||||
|
||||
<div wire:ignore>
|
||||
<template
|
||||
x-if="state?.length"
|
||||
x-cloak
|
||||
>
|
||||
<div @class([
|
||||
'relative w-full p-2 overflow-hidden flex flex-wrap gap-1',
|
||||
'border-t dark:border-gray-600' => ! $isDisabled,
|
||||
])>
|
||||
<template class="hidden" x-for="tag in state" x-bind:key="tag">
|
||||
<template x-if="state?.length" x-cloak>
|
||||
<div
|
||||
@class([
|
||||
'relative flex w-full flex-wrap gap-1 overflow-hidden p-2',
|
||||
'border-t dark:border-gray-600' => ! $isDisabled,
|
||||
])
|
||||
>
|
||||
<template
|
||||
class="hidden"
|
||||
x-for="tag in state"
|
||||
x-bind:key="tag"
|
||||
>
|
||||
<button
|
||||
@unless ($isDisabled)
|
||||
x-on:click="deleteTag(tag)"
|
||||
@@ -92,11 +97,14 @@
|
||||
type="button"
|
||||
x-bind:dusk="'filament.forms.{{ $statePath }}' + '.tag.' + tag + '.delete'"
|
||||
@class([
|
||||
'inline-flex items-center justify-center min-h-6 px-2 py-0.5 text-sm font-medium tracking-tight text-primary-700 rounded-xl bg-primary-500/10 space-x-1 rtl:space-x-reverse dark:text-primary-500',
|
||||
'min-h-6 inline-flex items-center justify-center space-x-1 rounded-xl bg-primary-500/10 px-2 py-0.5 text-sm font-medium tracking-tight text-primary-700 rtl:space-x-reverse dark:text-primary-500',
|
||||
'cursor-default' => $isDisabled,
|
||||
])
|
||||
>
|
||||
<span class="text-start" x-text="tag"></span>
|
||||
<span
|
||||
class="text-start"
|
||||
x-text="tag"
|
||||
></span>
|
||||
|
||||
@unless ($isDisabled)
|
||||
<x-filament::icon
|
||||
|
||||
@@ -10,10 +10,7 @@
|
||||
$suffixLabel = $getSuffixLabel();
|
||||
@endphp
|
||||
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
<x-filament-forms::affixes
|
||||
:state-path="$statePath"
|
||||
:prefix="$prefixLabel"
|
||||
@@ -68,7 +65,7 @@
|
||||
$applyStateBindingModifiers('wire:model') => (! $hasMask) ? $statePath : null,
|
||||
], escape: false)
|
||||
->class([
|
||||
'filament-forms-input block w-full transition duration-75 shadow-sm outline-none sm:text-sm focus:relative focus:z-[1] focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white',
|
||||
'filament-forms-input block w-full shadow-sm outline-none transition duration-75 focus:relative focus:z-[1] focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white sm:text-sm',
|
||||
'rounded-s-lg' => ! ($prefixLabel || $prefixIcon),
|
||||
'rounded-e-lg' => ! ($suffixLabel || $suffixIcon),
|
||||
])
|
||||
|
||||
@@ -3,10 +3,7 @@
|
||||
$statePath = $getStatePath();
|
||||
@endphp
|
||||
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
<textarea
|
||||
@if ($shouldAutosize())
|
||||
x-ignore
|
||||
@@ -37,7 +34,7 @@
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraInputAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-forms-textarea-component filament-forms-input block w-full transition duration-75 rounded-lg shadow-sm outline-none sm:text-sm focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white',
|
||||
'filament-forms-textarea-component filament-forms-input block w-full rounded-lg shadow-sm outline-none transition duration-75 focus:ring-1 focus:ring-inset disabled:opacity-70 dark:bg-gray-700 dark:text-white sm:text-sm',
|
||||
'border-gray-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500' => ! $errors->has($statePath),
|
||||
'border-danger-600 ring-danger-600 dark:border-danger-400 dark:ring-danger-400' => $errors->has($statePath),
|
||||
])
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
|
||||
@php
|
||||
$offColor = $getOffColor();
|
||||
$onColor = $getOnColor();
|
||||
@@ -15,27 +12,31 @@
|
||||
x-on:click="state = ! state"
|
||||
x-bind:class="
|
||||
state
|
||||
? '{{ match ($onColor) {
|
||||
'danger' => 'bg-danger-600',
|
||||
'gray' => 'bg-gray-600',
|
||||
'info' => 'bg-info-600',
|
||||
'primary', null => 'bg-primary-600',
|
||||
'secondary' => 'bg-secondary-600',
|
||||
'success' => 'bg-success-600',
|
||||
'warning' => 'bg-warning-600',
|
||||
default => $onColor,
|
||||
} }}'
|
||||
: '{{ match ($offColor) {
|
||||
'danger' => 'bg-danger-600',
|
||||
'gray' => 'bg-gray-600',
|
||||
'info' => 'bg-info-600',
|
||||
'primary' => 'bg-primary-600',
|
||||
'secondary' => 'bg-secondary-600',
|
||||
'success' => 'bg-success-600',
|
||||
'warning' => 'bg-warning-600',
|
||||
null => 'bg-gray-200 dark:bg-gray-700',
|
||||
default => $offColor,
|
||||
} }}'
|
||||
? '{{
|
||||
match ($onColor) {
|
||||
'danger' => 'bg-danger-600',
|
||||
'gray' => 'bg-gray-600',
|
||||
'info' => 'bg-info-600',
|
||||
'primary', null => 'bg-primary-600',
|
||||
'secondary' => 'bg-secondary-600',
|
||||
'success' => 'bg-success-600',
|
||||
'warning' => 'bg-warning-600',
|
||||
default => $onColor,
|
||||
}
|
||||
}}'
|
||||
: '{{
|
||||
match ($offColor) {
|
||||
'danger' => 'bg-danger-600',
|
||||
'gray' => 'bg-gray-600',
|
||||
'info' => 'bg-info-600',
|
||||
'primary' => 'bg-primary-600',
|
||||
'secondary' => 'bg-secondary-600',
|
||||
'success' => 'bg-success-600',
|
||||
'warning' => 'bg-warning-600',
|
||||
null => 'bg-gray-200 dark:bg-gray-700',
|
||||
default => $offColor,
|
||||
}
|
||||
}}'
|
||||
"
|
||||
{{
|
||||
$attributes
|
||||
@@ -51,18 +52,18 @@
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraAlpineAttributes(), escape: false)
|
||||
->class(['filament-forms-toggle-component relative inline-flex border-2 border-transparent shrink-0 h-6 w-11 rounded-full cursor-pointer transition-colors ease-in-out duration-200 outline-none disabled:opacity-70 disabled:pointer-events-none'])
|
||||
->class(['filament-forms-toggle-component 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 h-5 w-5 rounded-full bg-white shadow transform ring-0 ease-in-out transition duration-200"
|
||||
class="pointer-events-none relative inline-block h-5 w-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 h-full w-full flex items-center justify-center transition-opacity"
|
||||
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,
|
||||
@@ -90,7 +91,7 @@
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity"
|
||||
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,
|
||||
|
||||
@@ -93,23 +93,25 @@
|
||||
>
|
||||
<input
|
||||
type="hidden"
|
||||
value='{{
|
||||
value="{{
|
||||
collect($getChildComponentContainer()->getComponents())
|
||||
->filter(static fn (\Filament\Forms\Components\Wizard\Step $step): bool => $step->isVisible())
|
||||
->map(static fn (\Filament\Forms\Components\Wizard\Step $step) => $step->getId())
|
||||
->values()
|
||||
->toJson()
|
||||
}}'
|
||||
}}"
|
||||
x-ref="stepsData"
|
||||
/>
|
||||
|
||||
<ol
|
||||
@if ($label = $getLabel()) aria-label="{{ $label }}" @endif
|
||||
role="list"
|
||||
class="filament-forms-wizard-component-header border border-gray-300 shadow-sm bg-white rounded-xl overflow-hidden divide-y divide-gray-300 md:flex md:divide-y-0 dark:bg-gray-800 dark:border-gray-700 dark:divide-gray-700"
|
||||
class="filament-forms-wizard-component-header divide-y divide-gray-300 overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800 md:flex md:divide-y-0"
|
||||
>
|
||||
@foreach ($getChildComponentContainer()->getComponents() as $step)
|
||||
<li class="filament-forms-wizard-component-header-step relative overflow-hidden group md:flex-1">
|
||||
<li
|
||||
class="filament-forms-wizard-component-header-step group relative overflow-hidden md:flex-1"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
x-on:click="if (isStepAccessible(step, {{ $loop->index }})) step = '{{ $step->getId() }}'"
|
||||
@@ -118,18 +120,20 @@
|
||||
'pointer-events-none': ! isStepAccessible(step, {{ $loop->index }}),
|
||||
}"
|
||||
role="step"
|
||||
class="flex items-center w-full h-full text-start"
|
||||
class="flex h-full w-full items-center text-start"
|
||||
>
|
||||
<div
|
||||
x-bind:class="{
|
||||
'bg-primary-600': getStepIndex(step) === {{ $loop->index }},
|
||||
'bg-transparent group-hover:bg-gray-200 dark:group-hover:bg-gray-600': getStepIndex(step) > {{ $loop->index }},
|
||||
}"
|
||||
class="absolute top-0 start-0 w-1 h-full md:w-full md:h-1 md:bottom-0 md:top-auto"
|
||||
class="absolute start-0 top-0 h-full w-1 md:bottom-0 md:top-auto md:h-1 md:w-full"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
|
||||
<div class="flex items-center gap-3 px-5 py-4 text-sm font-medium">
|
||||
<div
|
||||
class="flex items-center gap-3 px-5 py-4 text-sm font-medium"
|
||||
>
|
||||
<div class="shrink-0">
|
||||
<div
|
||||
x-bind:class="{
|
||||
@@ -138,7 +142,7 @@
|
||||
'border-primary-500': getStepIndex(step) === {{ $loop->index }},
|
||||
'border-gray-300 dark:border-gray-500': getStepIndex(step) < {{ $loop->index }},
|
||||
}"
|
||||
class="filament-forms-wizard-component-header-step-icon flex items-center justify-center w-10 h-10 rounded-full"
|
||||
class="filament-forms-wizard-component-header-step-icon flex h-10 w-10 items-center justify-center rounded-full"
|
||||
>
|
||||
<x-filament::icon
|
||||
name="heroicon-m-check"
|
||||
@@ -176,12 +180,16 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-start justify-center">
|
||||
<div class="filament-forms-wizard-component-header-step-label text-sm font-medium">
|
||||
<div
|
||||
class="filament-forms-wizard-component-header-step-label text-sm font-medium"
|
||||
>
|
||||
{{ $step->getLabel() }}
|
||||
</div>
|
||||
|
||||
@if (filled($description = $step->getDescription()))
|
||||
<div class="filament-forms-wizard-component-header-step-description text-sm leading-4 font-medium text-gray-500 dark:text-gray-400">
|
||||
<div
|
||||
class="filament-forms-wizard-component-header-step-description text-sm font-medium leading-4 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ $description }}
|
||||
</div>
|
||||
@endif
|
||||
@@ -190,14 +198,21 @@
|
||||
</button>
|
||||
|
||||
@if (! $loop->first)
|
||||
<div class="hidden absolute top-0 start-0 w-3 inset-0 md:block" aria-hidden="true">
|
||||
<div
|
||||
class="absolute inset-0 start-0 top-0 hidden w-3 md:block"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
class="h-full w-full text-gray-300 rtl:rotate-180 dark:text-gray-700"
|
||||
viewBox="0 0 12 82"
|
||||
fill="none"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path d="M0.5 0V31L10.5 41L0.5 51V82" stroke="currentcolor" vector-effect="non-scaling-stroke" />
|
||||
<path
|
||||
d="M0.5 0V31L10.5 41L0.5 51V82"
|
||||
stroke="currentcolor"
|
||||
vector-effect="non-scaling-stroke"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
@@ -213,11 +228,7 @@
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div
|
||||
x-on:click="previousStep"
|
||||
x-show="! isFirstStep()"
|
||||
x-cloak
|
||||
>
|
||||
<div x-on:click="previousStep" x-show="! isFirstStep()" x-cloak>
|
||||
{{ $getAction('previous') }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,19 +1,21 @@
|
||||
<div {{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-infolists-actions-component flex flex-col h-full',
|
||||
match ($verticalAlignment = $getVerticalAlignment()) {
|
||||
'center' => 'justify-center',
|
||||
'end' => 'justify-end',
|
||||
'start' => 'justify-start',
|
||||
default => $verticalAlignment,
|
||||
},
|
||||
])
|
||||
}}>
|
||||
<div
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-infolists-actions-component flex h-full flex-col',
|
||||
match ($verticalAlignment = $getVerticalAlignment()) {
|
||||
'center' => 'justify-center',
|
||||
'end' => 'justify-end',
|
||||
'start' => 'justify-start',
|
||||
default => $verticalAlignment,
|
||||
},
|
||||
])
|
||||
}}
|
||||
>
|
||||
<x-filament-actions::actions
|
||||
:actions="$getChildComponentContainer()->getComponents()"
|
||||
:alignment="$getAlignment()"
|
||||
|
||||
@@ -15,21 +15,23 @@
|
||||
);
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes->class(['filament-infolists-affix-container flex rtl:space-x-reverse group']) }}>
|
||||
<div
|
||||
{{ $attributes->class(['filament-infolists-affix-container group flex rtl:space-x-reverse']) }}
|
||||
>
|
||||
@if (count($prefixActions))
|
||||
<div class="self-stretch flex gap-1 items-center pe-2">
|
||||
<div class="flex items-center gap-1 self-stretch pe-2">
|
||||
@foreach ($prefixActions as $prefixAction)
|
||||
{{ $prefixAction }}
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="min-w-0 flex-1">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@if (count($suffixActions))
|
||||
<div class="self-stretch flex gap-1 items-center ps-2">
|
||||
<div class="flex items-center gap-1 self-stretch ps-2">
|
||||
@foreach ($suffixActions as $suffixAction)
|
||||
{{ $suffixAction }}
|
||||
@endforeach
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<div {{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-infolists-card-component rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20'])
|
||||
}}>
|
||||
<div
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-infolists-card-component rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20'])
|
||||
}}
|
||||
>
|
||||
{{ $getChildComponentContainer() }}
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<x-dynamic-component
|
||||
:component="$getEntryWrapperView()"
|
||||
:entry="$entry"
|
||||
>
|
||||
<div {{ $attributes
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-infolists-color-entry flex flex-wrap gap-1',
|
||||
])
|
||||
}}>
|
||||
<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
|
||||
<div
|
||||
{{
|
||||
$attributes
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-infolists-color-entry flex flex-wrap gap-1',
|
||||
])
|
||||
}}
|
||||
>
|
||||
@php
|
||||
$isCopyable = $isCopyable();
|
||||
$copyMessage = $getCopyMessage();
|
||||
@@ -29,8 +29,7 @@
|
||||
'relative flex h-6 w-6 rounded-md',
|
||||
'cursor-pointer' => $isCopyable,
|
||||
])
|
||||
>
|
||||
</div>
|
||||
></div>
|
||||
@endforeach
|
||||
</div>
|
||||
</x-dynamic-component>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<div {{ $attributes->class(['filament-infolists-entry-wrapper-helper-text text-sm text-gray-600 dark:text-gray-300']) }}>
|
||||
<div
|
||||
{{ $attributes->class(['filament-infolists-entry-wrapper-helper-text text-sm text-gray-600 dark:text-gray-300']) }}
|
||||
>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@@ -4,19 +4,23 @@
|
||||
'icon' => null,
|
||||
])
|
||||
|
||||
<div {{ $attributes->class([
|
||||
'filament-infolists-entry-wrapper-hint flex items-center space-x-2 rtl:space-x-reverse',
|
||||
match ($color) {
|
||||
'danger' => 'text-danger-500 dark:text-danger-300',
|
||||
'gray', null => 'text-gray-500 dark:text-gray-300',
|
||||
'info' => 'text-info-500 dark:text-info-300',
|
||||
'primary' => 'text-primary-500 dark:text-primary-300',
|
||||
'secondary' => 'text-secondary-500 dark:text-secondary-300',
|
||||
'success' => 'text-success-500 dark:text-success-300',
|
||||
'warning' => 'text-warning-500 dark:text-warning-300',
|
||||
default => $color,
|
||||
},
|
||||
]) }}>
|
||||
<div
|
||||
{{
|
||||
$attributes->class([
|
||||
'filament-infolists-entry-wrapper-hint flex items-center space-x-2 rtl:space-x-reverse',
|
||||
match ($color) {
|
||||
'danger' => 'text-danger-500 dark:text-danger-300',
|
||||
'gray', null => 'text-gray-500 dark:text-gray-300',
|
||||
'info' => 'text-info-500 dark:text-info-300',
|
||||
'primary' => 'text-primary-500 dark:text-primary-300',
|
||||
'secondary' => 'text-secondary-500 dark:text-secondary-300',
|
||||
'success' => 'text-success-500 dark:text-success-300',
|
||||
'warning' => 'text-warning-500 dark:text-warning-300',
|
||||
default => $color,
|
||||
},
|
||||
])
|
||||
}}
|
||||
>
|
||||
@if ($slot->isNotEmpty())
|
||||
<span class="text-xs leading-tight">
|
||||
{{ $slot }}
|
||||
@@ -32,7 +36,9 @@
|
||||
@endif
|
||||
|
||||
@if (count($actions))
|
||||
<div class="filament-infolists-entry-wrapper-hint-action flex gap-1 items-center">
|
||||
<div
|
||||
class="filament-infolists-entry-wrapper-hint-action flex items-center gap-1"
|
||||
>
|
||||
@foreach ($actions as $action)
|
||||
{{ $action }}
|
||||
@endforeach
|
||||
|
||||
@@ -51,7 +51,9 @@
|
||||
|
||||
<div class="space-y-2">
|
||||
@if (($label && (! $labelSrOnly)) || $labelPrefix || $labelSuffix || $hint || $hintIcon)
|
||||
<div class="flex items-center justify-between space-x-2 rtl:space-x-reverse">
|
||||
<div
|
||||
class="flex items-center justify-between space-x-2 rtl:space-x-reverse"
|
||||
>
|
||||
@if ($label && (! $labelSrOnly))
|
||||
<x-filament-infolists::entry-wrapper.label
|
||||
:prefix="$labelPrefix"
|
||||
@@ -66,7 +68,11 @@
|
||||
@endif
|
||||
|
||||
@if ($hint || $hintIcon || count($hintActions))
|
||||
<x-filament-infolists::entry-wrapper.hint :actions="$hintActions" :color="$hintColor" :icon="$hintIcon">
|
||||
<x-filament-infolists::entry-wrapper.hint
|
||||
:actions="$hintActions"
|
||||
:color="$hintColor"
|
||||
:icon="$hintIcon"
|
||||
>
|
||||
{{ filled($hint) ? ($hint instanceof \Illuminate\Support\HtmlString ? $hint : str($hint)->markdown()->sanitizeHtml()->toHtmlString()) : null }}
|
||||
</x-filament-infolists::entry-wrapper.hint>
|
||||
@endif
|
||||
|
||||
@@ -48,9 +48,11 @@
|
||||
</dt>
|
||||
@endif
|
||||
|
||||
<div class="grid gap-2 sm:grid-cols-3 sm:gap-4 sm:items-start">
|
||||
<div class="grid gap-2 sm:grid-cols-3 sm:items-start sm:gap-4">
|
||||
@if (($label && (! $labelSrOnly)) || $labelPrefix || $labelSuffix || $hint || $hintIcon)
|
||||
<div class="flex items-center justify-between gap-2 sm:gap-1 sm:items-start sm:flex-col sm:pt-1">
|
||||
<div
|
||||
class="flex items-center justify-between gap-2 sm:flex-col sm:items-start sm:gap-1 sm:pt-1"
|
||||
>
|
||||
@if ($label && (! $labelSrOnly))
|
||||
<x-filament-infolists::entry-wrapper.label
|
||||
:prefix="$labelPrefix"
|
||||
@@ -65,14 +67,18 @@
|
||||
@endif
|
||||
|
||||
@if ($hint || $hintIcon || count($hintActions))
|
||||
<x-filament-infolists::entry-wrapper.hint :actions="$hintActions" :color="$hintColor" :icon="$hintIcon">
|
||||
<x-filament-infolists::entry-wrapper.hint
|
||||
:actions="$hintActions"
|
||||
:color="$hintColor"
|
||||
:icon="$hintIcon"
|
||||
>
|
||||
{{ filled($hint) ? ($hint instanceof \Illuminate\Support\HtmlString ? $hint : str($hint)->markdown()->sanitizeHtml()->toHtmlString()) : null }}
|
||||
</x-filament-infolists::entry-wrapper.hint>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="space-y-2 sm:space-y-1 sm:col-span-2">
|
||||
<div class="space-y-2 sm:col-span-2 sm:space-y-1">
|
||||
<dd
|
||||
@if ($tooltip)
|
||||
x-data="{}"
|
||||
|
||||
@@ -3,10 +3,14 @@
|
||||
'suffix' => null,
|
||||
])
|
||||
|
||||
<dt {{ $attributes->class(['filament-infolists-entry-wrapper-label inline-flex items-center space-x-3 rtl:space-x-reverse']) }}>
|
||||
<dt
|
||||
{{ $attributes->class(['filament-infolists-entry-wrapper-label inline-flex items-center space-x-3 rtl:space-x-reverse']) }}
|
||||
>
|
||||
{{ $prefix }}
|
||||
|
||||
<span class="text-sm text-gray-500 font-medium leading-4 dark:text-gray-400">
|
||||
<span
|
||||
class="text-sm font-medium leading-4 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ $slot }}
|
||||
</span>
|
||||
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
<fieldset {{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-infolists-fieldset-component rounded-xl shadow-sm border border-gray-300 p-6 dark:border-gray-600 dark:text-gray-200'])
|
||||
}}>
|
||||
<legend class="text-sm leading-tight font-medium px-2 -ms-2">
|
||||
<fieldset
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-infolists-fieldset-component rounded-xl border border-gray-300 p-6 shadow-sm dark:border-gray-600 dark:text-gray-200'])
|
||||
}}
|
||||
>
|
||||
<legend class="-ms-2 px-2 text-sm font-medium leading-tight">
|
||||
{{ $getLabel() }}
|
||||
</legend>
|
||||
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<x-dynamic-component
|
||||
:component="$getEntryWrapperView()"
|
||||
:entry="$entry"
|
||||
>
|
||||
<div {{ $attributes
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-infolists-icon-entry flex flex-wrap gap-1',
|
||||
])
|
||||
}}>
|
||||
<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
|
||||
<div
|
||||
{{
|
||||
$attributes
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'filament-infolists-icon-entry flex flex-wrap gap-1',
|
||||
])
|
||||
}}
|
||||
>
|
||||
@foreach (\Illuminate\Support\Arr::wrap($getState()) as $state)
|
||||
@if ($icon = $getIcon($state))
|
||||
<x-filament::icon
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<x-dynamic-component
|
||||
:component="$getEntryWrapperView()"
|
||||
:entry="$entry"
|
||||
>
|
||||
<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
|
||||
@php
|
||||
$isCircular = $isCircular();
|
||||
$isSquare = $isSquare();
|
||||
@@ -9,16 +6,20 @@
|
||||
$width = $getWidth() ?? ($isCircular || $isSquare ? $height : null);
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes->merge($getExtraAttributes(), escape: false)->class([
|
||||
'filament-infolists-image-entry flex',
|
||||
match ($getAlignment()) {
|
||||
'center' => 'justify-center',
|
||||
'end' => 'justify-end',
|
||||
'left' => 'justify-left',
|
||||
'right' => 'justify-right',
|
||||
'start', null => 'justify-start',
|
||||
},
|
||||
]) }}>
|
||||
<div
|
||||
{{
|
||||
$attributes->merge($getExtraAttributes(), escape: false)->class([
|
||||
'filament-infolists-image-entry flex',
|
||||
match ($getAlignment()) {
|
||||
'center' => 'justify-center',
|
||||
'end' => 'justify-end',
|
||||
'left' => 'justify-left',
|
||||
'right' => 'justify-right',
|
||||
'start', null => 'justify-start',
|
||||
},
|
||||
])
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style="
|
||||
@if ($height) height: {{ $height }}; @endif
|
||||
@@ -37,10 +38,12 @@
|
||||
@if ($height) height: {{ $height }}; @endif
|
||||
@if ($width) width: {{ $width }}; @endif
|
||||
"
|
||||
{{ $getExtraImgAttributeBag()->class([
|
||||
'object-cover object-center' => $isCircular || $isSquare,
|
||||
]) }}
|
||||
>
|
||||
{{
|
||||
$getExtraImgAttributeBag()->class([
|
||||
'object-cover object-center' => $isCircular || $isSquare,
|
||||
])
|
||||
}}
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<x-dynamic-component
|
||||
:component="$getEntryWrapperView()"
|
||||
:entry="$entry"
|
||||
>
|
||||
<ul {{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-infolists-repeatable-entry'])
|
||||
}}>
|
||||
<x-dynamic-component :component="$getEntryWrapperView()" :entry="$entry">
|
||||
<ul
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class(['filament-infolists-repeatable-entry'])
|
||||
}}
|
||||
>
|
||||
<x-filament::grid
|
||||
:default="$getGridColumns('default')"
|
||||
:sm="$getGridColumns('sm')"
|
||||
@@ -20,7 +19,9 @@
|
||||
class="gap-6"
|
||||
>
|
||||
@foreach ($getChildComponentContainers() as $container)
|
||||
<li class="block p-6 rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20">
|
||||
<li
|
||||
class="block rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20"
|
||||
>
|
||||
{{ $container }}
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
@@ -12,14 +12,14 @@
|
||||
:icon-color="$getIconColor()"
|
||||
:icon-size="$getIconSize()"
|
||||
{{
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraAlpineAttributes(), escape: false)
|
||||
->class(['filament-infolists-section-component'])
|
||||
}}
|
||||
$attributes
|
||||
->merge([
|
||||
'id' => $getId(),
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraAlpineAttributes(), escape: false)
|
||||
->class(['filament-infolists-section-component'])
|
||||
}}
|
||||
>
|
||||
<x-slot name="heading">
|
||||
{{ $getHeading() }}
|
||||
|
||||
@@ -1,22 +1,27 @@
|
||||
<div {{ $attributes
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'flex gap-6',
|
||||
match ($getFromBreakpoint()) {
|
||||
'sm' => 'flex-col sm:items-center sm:flex-row',
|
||||
'md' => 'flex-col md:items-center md:flex-row',
|
||||
'lg' => 'flex-col lg:items-center lg:flex-row',
|
||||
'xl' => 'flex-col xl:items-center xl:flex-row',
|
||||
'2xl' => 'flex-col 2xl:items-center 2xl:flex-row',
|
||||
default => 'items-center',
|
||||
},
|
||||
])
|
||||
}}>
|
||||
<div
|
||||
{{
|
||||
$attributes
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->class([
|
||||
'flex gap-6',
|
||||
match ($getFromBreakpoint()) {
|
||||
'sm' => 'flex-col sm:flex-row sm:items-center',
|
||||
'md' => 'flex-col md:flex-row md:items-center',
|
||||
'lg' => 'flex-col lg:flex-row lg:items-center',
|
||||
'xl' => 'flex-col xl:flex-row xl:items-center',
|
||||
'2xl' => 'flex-col 2xl:flex-row 2xl:items-center',
|
||||
default => 'items-center',
|
||||
},
|
||||
])
|
||||
}}
|
||||
>
|
||||
@foreach ($getChildComponentContainers() as $container)
|
||||
@foreach ($container->getComponents() as $component)
|
||||
<div @class([
|
||||
'flex-1 w-full' => $component->canGrow(),
|
||||
])>
|
||||
<div
|
||||
@class([
|
||||
'w-full flex-1' => $component->canGrow(),
|
||||
])
|
||||
>
|
||||
{{ $component }}
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
], escape: false)
|
||||
->merge($getExtraAttributes(), escape: false)
|
||||
->merge($getExtraAlpineAttributes(), escape: false)
|
||||
->class(['filament-infolists-tabs-component rounded-xl shadow-sm bg-white ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20'])
|
||||
->class(['filament-infolists-tabs-component rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-800 dark:ring-white/20'])
|
||||
}}
|
||||
>
|
||||
<div class="p-1">
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<div {{ $attributes->class(['filament-notifications-body mt-1 text-sm text-gray-500 dark:text-gray-300']) }}>
|
||||
<div
|
||||
{{ $attributes->class(['filament-notifications-body mt-1 text-sm text-gray-500 dark:text-gray-300']) }}
|
||||
>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
tabindex="-1"
|
||||
wire:target="markAllNotificationsAsRead"
|
||||
wire:loading.attr="disabled"
|
||||
class="disabled:opacity-70 disabled:pointer-events-none"
|
||||
class="disabled:pointer-events-none disabled:opacity-70"
|
||||
>
|
||||
{{ __('filament-notifications::database.modal.buttons.mark_all_as_read.label') }}
|
||||
</x-filament::link>
|
||||
@@ -30,7 +30,7 @@
|
||||
tabindex="-1"
|
||||
wire:target="clearNotifications"
|
||||
wire:loading.attr="disabled"
|
||||
class="disabled:opacity-70 disabled:pointer-events-none"
|
||||
class="disabled:pointer-events-none disabled:opacity-70"
|
||||
>
|
||||
{{ __('filament-notifications::database.modal.buttons.clear.label') }}
|
||||
</x-filament::link>
|
||||
|
||||
+9
-3
@@ -1,5 +1,9 @@
|
||||
<div {{ $attributes->class(['flex flex-col items-center justify-center mx-auto my-6 space-y-4 text-center bg-white dark:bg-gray-800']) }}>
|
||||
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-50 dark:bg-gray-700">
|
||||
<div
|
||||
{{ $attributes->class(['mx-auto my-6 flex flex-col items-center justify-center space-y-4 bg-white text-center dark:bg-gray-800']) }}
|
||||
>
|
||||
<div
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-primary-50 dark:bg-gray-700"
|
||||
>
|
||||
<x-filament::icon
|
||||
name="heroicon-o-bell"
|
||||
alias="notifications::database.modal.empty-state"
|
||||
@@ -13,7 +17,9 @@
|
||||
{{ __('filament-notifications::database.modal.empty.heading') }}
|
||||
</h2>
|
||||
|
||||
<p class="whitespace-normal text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||
<p
|
||||
class="whitespace-normal text-sm font-medium text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ __('filament-notifications::database.modal.empty.description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
</span>
|
||||
|
||||
@if ($unreadNotificationsCount)
|
||||
<span class="inline-flex absolute items-center justify-center top-0 ms-1 min-w-[1rem] h-4 rounded-full text-xs text-primary-700 bg-primary-500/10 dark:text-primary-500">
|
||||
<span
|
||||
class="absolute top-0 ms-1 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-primary-500/10 text-xs text-primary-700 dark:text-primary-500"
|
||||
>
|
||||
{{ $unreadNotificationsCount }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@@ -21,20 +21,22 @@
|
||||
/>
|
||||
</x-slot>
|
||||
|
||||
<div class="mt-[calc(-1rem-1px)] -mx-6 border-b divide-y dark:border-gray-700">
|
||||
<div
|
||||
class="-mx-6 mt-[calc(-1rem-1px)] divide-y border-b dark:border-gray-700"
|
||||
>
|
||||
@foreach ($notifications as $notification)
|
||||
<div @class([
|
||||
'bg-primary-50 dark:bg-gray-700' => $notification->unread(),
|
||||
])>
|
||||
<div
|
||||
@class([
|
||||
'bg-primary-50 dark:bg-gray-700' => $notification->unread(),
|
||||
])
|
||||
>
|
||||
{{ $this->getNotification($notification)->inline() }}
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@if (
|
||||
$notifications instanceof \Illuminate\Contracts\Pagination\Paginator &&
|
||||
$notifications->hasPages()
|
||||
)
|
||||
@if ($notifications instanceof \Illuminate\Contracts\Pagination\Paginator &&
|
||||
$notifications->hasPages())
|
||||
<x-slot name="footer">
|
||||
@php
|
||||
$isRtl = __('filament::layout.direction') === 'rtl';
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<p {{ $attributes->class(['filament-notifications-date text-xs text-gray-500 dark:text-gray-300']) }}>
|
||||
<p
|
||||
{{ $attributes->class(['filament-notifications-date text-xs text-gray-500 dark:text-gray-300']) }}
|
||||
>
|
||||
{{ $slot }}
|
||||
</p>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
<div {{ $attributes->class(['filament-notifications-title flex h-6 items-center text-sm font-medium text-gray-900 dark:text-gray-100']) }}>
|
||||
<div
|
||||
{{ $attributes->class(['filament-notifications-title flex h-6 items-center text-sm font-medium text-gray-900 dark:text-gray-100']) }}
|
||||
>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
@@ -21,6 +21,8 @@
|
||||
/>
|
||||
|
||||
@if ($broadcastChannel = $this->getBroadcastChannel())
|
||||
<x-filament-notifications::database.echo :channel="$broadcastChannel" />
|
||||
<x-filament-notifications::database.echo
|
||||
:channel="$broadcastChannel"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -42,11 +42,11 @@
|
||||
>
|
||||
<div
|
||||
@class([
|
||||
'flex gap-3 w-full',
|
||||
'flex w-full gap-3',
|
||||
...match ($isInline) {
|
||||
true => ['py-2 ps-6 pe-2'],
|
||||
true => ['py-2 pe-2 ps-6'],
|
||||
false => [
|
||||
'p-4 rounded-xl',
|
||||
'rounded-xl p-4',
|
||||
match ($color) {
|
||||
'danger' => 'bg-danger-500/10 dark:bg-danger-500/20',
|
||||
'gray' => 'bg-gray-500/10 dark:bg-gray-500/20',
|
||||
|
||||
@@ -4,15 +4,17 @@
|
||||
])
|
||||
|
||||
<div
|
||||
{{ $attributes->class([
|
||||
'rounded-full bg-gray-200 bg-cover bg-center dark:bg-gray-900',
|
||||
match ($size) {
|
||||
'xs' => 'w-6 h-6',
|
||||
'sm' => 'w-8 h-8',
|
||||
'md' => 'w-10 h-10',
|
||||
'lg' => 'w-12 h-12',
|
||||
default => $size,
|
||||
},
|
||||
]) }}
|
||||
{{
|
||||
$attributes->class([
|
||||
'rounded-full bg-gray-200 bg-cover bg-center dark:bg-gray-900',
|
||||
match ($size) {
|
||||
'xs' => 'h-6 w-6',
|
||||
'sm' => 'h-8 w-8',
|
||||
'md' => 'h-10 w-10',
|
||||
'lg' => 'h-12 w-12',
|
||||
default => $size,
|
||||
},
|
||||
])
|
||||
}}
|
||||
style="background-image: url('{{ $src }}')"
|
||||
></div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="filament-global-search flex items-center ms-4">
|
||||
<div class="filament-global-search ms-4 flex items-center">
|
||||
{{ filament()->renderHook('global-search.start') }}
|
||||
|
||||
@if ($this->isEnabled())
|
||||
@@ -6,7 +6,9 @@
|
||||
<x-filament::global-search.input />
|
||||
|
||||
@if ($results !== null)
|
||||
<x-filament::global-search.results-container :results="$results" />
|
||||
<x-filament::global-search.results-container
|
||||
:results="$results"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -3,8 +3,10 @@
|
||||
{{ __('filament::global-search.field.label') }}
|
||||
</label>
|
||||
|
||||
<div class="relative group max-w-md">
|
||||
<span class="absolute inset-y-0 start-0 flex items-center justify-center w-10 h-10 pointer-events-none">
|
||||
<div class="group relative max-w-md">
|
||||
<span
|
||||
class="pointer-events-none absolute inset-y-0 start-0 flex h-10 w-10 items-center justify-center"
|
||||
>
|
||||
<x-filament::icon
|
||||
name="heroicon-m-magnifying-glass"
|
||||
alias="panels::global-search.input.prefix"
|
||||
@@ -31,7 +33,7 @@
|
||||
placeholder="{{ __('filament::global-search.field.placeholder') }}"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
class="block w-full h-10 ps-10 bg-gray-400/10 placeholder-gray-500 border-transparent transition duration-75 rounded-lg outline-none focus:bg-white focus:placeholder-gray-400 focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
|
||||
>
|
||||
class="block h-10 w-full rounded-lg border-transparent bg-gray-400/10 ps-10 placeholder-gray-500 outline-none transition duration-75 focus:border-primary-500 focus:bg-white focus:placeholder-gray-400 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+3
-1
@@ -1,3 +1,5 @@
|
||||
<div {{ $attributes->class(['filament-global-search-no-results-message px-6 py-4 dark:text-gray-200']) }}>
|
||||
<div
|
||||
{{ $attributes->class(['filament-global-search-no-results-message px-6 py-4 dark:text-gray-200']) }}
|
||||
>
|
||||
{{ __('filament::global-search.no_results_message') }}
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,16 @@
|
||||
'results',
|
||||
])
|
||||
|
||||
<ul {{ $attributes->class(['filament-global-search-result-group divide-y dark:divide-gray-700']) }}>
|
||||
<ul
|
||||
{{ $attributes->class(['filament-global-search-result-group divide-y dark:divide-gray-700']) }}
|
||||
>
|
||||
<li class="sticky top-0 z-10">
|
||||
<header class="px-6 py-2 bg-gray-50/80 backdrop-blur-xl backdrop-saturate-150 dark:bg-gray-700">
|
||||
<p class="text-xs font-bold tracking-wider text-gray-500 uppercase dark:text-gray-400">
|
||||
<header
|
||||
class="bg-gray-50/80 px-6 py-2 backdrop-blur-xl backdrop-saturate-150 dark:bg-gray-700"
|
||||
>
|
||||
<p
|
||||
class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ $label }}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
@@ -6,16 +6,22 @@
|
||||
])
|
||||
|
||||
<li {{ $attributes->class(['filament-global-search-result']) }}>
|
||||
<div class="relative block px-6 py-4 focus:bg-gray-500/5 hover:bg-gray-500/5 focus:ring-1 focus:ring-gray-300">
|
||||
<div
|
||||
class="relative block px-6 py-4 hover:bg-gray-500/5 focus:bg-gray-500/5 focus:ring-1 focus:ring-gray-300"
|
||||
>
|
||||
<a href="{{ $url }}" class="">
|
||||
<p class="font-medium dark:text-gray-200">
|
||||
{{ $title }}
|
||||
</p>
|
||||
|
||||
<p class="text-sm space-x-2 rtl:space-x-reverse font-medium text-gray-500 dark:text-gray-400">
|
||||
<p
|
||||
class="space-x-2 text-sm font-medium text-gray-500 rtl:space-x-reverse dark:text-gray-400"
|
||||
>
|
||||
@foreach ($details as $label => $value)
|
||||
<span>
|
||||
<span class="font-medium text-gray-700 dark:text-gray-200">
|
||||
<span
|
||||
class="font-medium text-gray-700 dark:text-gray-200"
|
||||
>
|
||||
{{ $label }}:
|
||||
</span>
|
||||
|
||||
|
||||
+7
-2
@@ -10,9 +10,14 @@
|
||||
x-on:open-global-search-results.window="isOpen = true"
|
||||
{{ $attributes->class(['filament-global-search-results-container absolute end-0 top-auto z-10 mt-2 w-screen max-w-xs overflow-hidden rounded-xl shadow-xl ring-1 ring-gray-950/5 dark:ring-white/20 sm:max-w-lg']) }}
|
||||
>
|
||||
<div class="max-h-96 overflow-x-hidden overflow-y-scroll bg-white dark:bg-gray-800">
|
||||
<div
|
||||
class="max-h-96 overflow-x-hidden overflow-y-scroll bg-white dark:bg-gray-800"
|
||||
>
|
||||
@forelse ($results->getCategories() as $group => $groupedResults)
|
||||
<x-filament::global-search.result-group :label="$group" :results="$groupedResults" />
|
||||
<x-filament::global-search.result-group
|
||||
:label="$group"
|
||||
:results="$groupedResults"
|
||||
/>
|
||||
@empty
|
||||
<x-filament::global-search.no-results-message />
|
||||
@endforelse
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
@props([
|
||||
'actions' => null,
|
||||
'heading',
|
||||
'subheading' => null
|
||||
'subheading' => null,
|
||||
])
|
||||
|
||||
<header {{ $attributes->class(['filament-header space-y-2 items-start justify-between sm:flex sm:space-y-0 sm:space-x-4 sm:rtl:space-x-reverse sm:py-4']) }}>
|
||||
<header
|
||||
{{ $attributes->class(['filament-header items-start justify-between space-y-2 sm:flex sm:space-x-4 sm:space-y-0 sm:py-4 sm:rtl:space-x-reverse']) }}
|
||||
>
|
||||
<div>
|
||||
<x-filament::header.heading>
|
||||
{{ $heading }}
|
||||
@@ -17,6 +19,5 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
|
||||
<x-filament-actions::actions :actions="$actions" class="shrink-0" />
|
||||
</header>
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
@endphp
|
||||
|
||||
<x-filament::layouts.base :livewire="$livewire">
|
||||
<div class="filament-app-layout flex w-full h-full overflow-x-clip">
|
||||
<div class="filament-app-layout flex h-full w-full overflow-x-clip">
|
||||
<div
|
||||
x-data="{}"
|
||||
x-cloak
|
||||
x-show="$store.sidebar.isOpen"
|
||||
x-transition.opacity.500ms
|
||||
x-on:click="$store.sidebar.close()"
|
||||
class="filament-sidebar-close-overlay fixed inset-0 z-20 w-full h-full bg-gray-900/50 lg:hidden"
|
||||
class="filament-sidebar-close-overlay fixed inset-0 z-20 h-full w-full bg-gray-900/50 lg:hidden"
|
||||
></div>
|
||||
|
||||
<x-filament::layouts.app.sidebar :navigation="$navigation" />
|
||||
@@ -31,7 +31,7 @@
|
||||
x-bind:style="'display: flex'" {{-- Mimics `x-cloak`, as using `x-cloak` causes visual issues with chart widgets --}}
|
||||
@endif
|
||||
@class([
|
||||
'filament-main flex-col space-y-6 w-screen flex-1 lg:pe-0',
|
||||
'filament-main w-screen flex-1 flex-col space-y-6 lg:pe-0',
|
||||
'hidden h-full transition-all' => filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop(),
|
||||
'flex lg:ps-[--sidebar-width]' => ! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation()),
|
||||
])
|
||||
@@ -43,7 +43,7 @@
|
||||
|
||||
<div
|
||||
@class([
|
||||
'filament-main-content flex-1 w-full px-4 mx-auto md:px-6 lg:px-8',
|
||||
'filament-main-content mx-auto w-full flex-1 px-4 md:px-6 lg:px-8',
|
||||
match ($maxContentWidth ?? filament()->getMaxContentWidth() ?? '7xl') {
|
||||
'xl' => 'max-w-xl',
|
||||
'2xl' => 'max-w-2xl',
|
||||
@@ -64,7 +64,7 @@
|
||||
{{ filament()->renderHook('content.end') }}
|
||||
</div>
|
||||
|
||||
<div class="filament-main-footer py-4 shrink-0">
|
||||
<div class="filament-main-footer shrink-0 py-4">
|
||||
<x-filament::footer />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,17 +9,17 @@
|
||||
x-show="$store.sidebar.isOpen"
|
||||
@endif
|
||||
@class([
|
||||
'inline-flex items-center justify-center ms-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal',
|
||||
'min-h-4 ms-auto inline-flex items-center justify-center whitespace-normal rounded-xl px-2 py-0.5 text-xs font-medium tracking-tight',
|
||||
match ($active) {
|
||||
true => 'text-white bg-gray-900/10',
|
||||
true => 'bg-gray-900/10 text-white',
|
||||
false => match ($badgeColor) {
|
||||
'danger' => 'text-danger-700 bg-danger-500/10 dark:text-danger-500',
|
||||
'gray' => 'text-gray-700 bg-gray-500/10 dark:text-gray-500',
|
||||
'info' => 'text-info-700 bg-info-500/10 dark:text-info-500',
|
||||
'primary', null => 'text-primary-700 bg-primary-500/10 dark:text-primary-500',
|
||||
'secondary' => 'text-secondary-700 bg-secondary-500/10 dark:text-secondary-500',
|
||||
'success' => 'text-success-700 bg-success-500/10 dark:text-success-500',
|
||||
'warning' => 'text-warning-700 bg-warning-500/10 dark:text-warning-500',
|
||||
'danger' => 'bg-danger-500/10 text-danger-700 dark:text-danger-500',
|
||||
'gray' => 'bg-gray-500/10 text-gray-700 dark:text-gray-500',
|
||||
'info' => 'bg-info-500/10 text-info-700 dark:text-info-500',
|
||||
'primary', null => 'bg-primary-500/10 text-primary-700 dark:text-primary-500',
|
||||
'secondary' => 'bg-secondary-500/10 text-secondary-700 dark:text-secondary-500',
|
||||
'success' => 'bg-success-500/10 text-success-700 dark:text-success-500',
|
||||
'warning' => 'bg-warning-500/10 text-warning-700 dark:text-warning-500',
|
||||
default => $badgeColor,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
@endif
|
||||
class="flex items-center justify-between w-full"
|
||||
class="flex w-full items-center justify-between"
|
||||
>
|
||||
<div class="flex items-center gap-4">
|
||||
@if ($icon)
|
||||
@@ -37,7 +37,9 @@
|
||||
/>
|
||||
@endif
|
||||
|
||||
<p class="flex-1 font-bold uppercase text-xs tracking-wider text-primary-600 dark:text-primary-500">
|
||||
<p
|
||||
class="flex-1 text-xs font-bold uppercase tracking-wider text-primary-600 dark:text-primary-500"
|
||||
>
|
||||
{{ $label }}
|
||||
</p>
|
||||
</div>
|
||||
@@ -63,7 +65,7 @@
|
||||
@endif
|
||||
x-collapse.duration.200ms
|
||||
@class([
|
||||
'text-sm space-y-1 -mx-3',
|
||||
'-mx-3 space-y-1 text-sm',
|
||||
'mt-2' => $label,
|
||||
])
|
||||
>
|
||||
|
||||
@@ -16,15 +16,17 @@
|
||||
x-bind:class="$store.sidebar.isOpen ? 'filament-sidebar-open translate-x-0' : '-translate-x-full rtl:translate-x-full'"
|
||||
@endif
|
||||
@class([
|
||||
'filament-sidebar fixed inset-y-0 start-0 z-20 flex h-screen w-[--sidebar-width] flex-col bg-white transition-all dark:bg-gray-800 lg:bg-transparent lg:dark:bg-transparent lg:z-0',
|
||||
'filament-sidebar fixed inset-y-0 start-0 z-20 flex h-screen w-[--sidebar-width] flex-col bg-white transition-all dark:bg-gray-800 lg:z-0 lg:bg-transparent lg:dark:bg-transparent',
|
||||
'lg:translate-x-0 rtl:lg:-translate-x-0' => ! (filament()->isSidebarCollapsibleOnDesktop() || filament()->isSidebarFullyCollapsibleOnDesktop() || filament()->hasTopNavigation()),
|
||||
'lg:-translate-x-full rtl:lg:translate-x-full' => filament()->hasTopNavigation(),
|
||||
])
|
||||
>
|
||||
<header class="filament-sidebar-header border-b h-[4rem] shrink-0 flex items-center justify-center relative bg-white dark:bg-gray-800 dark:border-gray-700">
|
||||
<header
|
||||
class="filament-sidebar-header relative flex h-[4rem] shrink-0 items-center justify-center border-b bg-white dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<div
|
||||
@class([
|
||||
'flex items-center justify-center px-6 w-full',
|
||||
'flex w-full items-center justify-center px-6',
|
||||
'lg:px-4' => filament()->isSidebarCollapsibleOnDesktop() && (! filament()->isSidebarFullyCollapsibleOnDesktop()),
|
||||
])
|
||||
x-show="$store.sidebar.isOpen || @js(! filament()->isSidebarCollapsibleOnDesktop()) || @js(filament()->isSidebarFullyCollapsibleOnDesktop())"
|
||||
@@ -35,7 +37,7 @@
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop() && (! filament()->isSidebarFullyCollapsibleOnDesktop()))
|
||||
<button
|
||||
type="button"
|
||||
class="filament-sidebar-collapse-button shrink-0 hidden lg:flex items-center justify-center w-10 h-10 text-primary-500 rounded-full outline-none hover:bg-gray-500/5 focus:bg-primary-500/10"
|
||||
class="filament-sidebar-collapse-button hidden h-10 w-10 shrink-0 items-center justify-center rounded-full text-primary-500 outline-none hover:bg-gray-500/5 focus:bg-primary-500/10 lg:flex"
|
||||
x-bind:aria-label="$store.sidebar.isOpen ? '{{ __('filament::layout.buttons.sidebar.collapse.label') }}' : '{{ __('filament::layout.buttons.sidebar.expand.label') }}'"
|
||||
x-on:click.stop="$store.sidebar.isOpen ? $store.sidebar.close() : $store.sidebar.open()"
|
||||
x-transition:enter="lg:transition delay-100"
|
||||
@@ -47,8 +49,21 @@
|
||||
color="text-primary-500"
|
||||
size="h-6 w-6"
|
||||
>
|
||||
<svg class="h-full w-full" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M20.25 7.5L16 12L20.25 16.5M3.75 12H12M3.75 17.25H16M3.75 6.75H16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<svg
|
||||
class="h-full w-full"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.25 7.5L16 12L20.25 16.5M3.75 12H12M3.75 17.25H16M3.75 6.75H16"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</x-filament::icon>
|
||||
</button>
|
||||
@@ -57,15 +72,12 @@
|
||||
<div
|
||||
data-turbo="false"
|
||||
@class([
|
||||
'flex items-center w-full relative',
|
||||
'relative flex w-full items-center',
|
||||
'lg:ms-3' => filament()->isSidebarCollapsibleOnDesktop() && (! filament()->isSidebarFullyCollapsibleOnDesktop()),
|
||||
])
|
||||
>
|
||||
@if ($homeUrl = filament()->getHomeUrl())
|
||||
<a
|
||||
href="{{ $homeUrl }}"
|
||||
class="inline-block"
|
||||
>
|
||||
<a href="{{ $homeUrl }}" class="inline-block">
|
||||
<x-filament::logo />
|
||||
</a>
|
||||
@else
|
||||
@@ -77,7 +89,7 @@
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop())
|
||||
<button
|
||||
type="button"
|
||||
class="filament-sidebar-close-button shrink-0 flex items-center justify-center w-10 h-10 text-primary-500 rounded-full outline-none hover:bg-gray-500/5 focus:bg-primary-500/10"
|
||||
class="filament-sidebar-close-button flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-primary-500 outline-none hover:bg-gray-500/5 focus:bg-primary-500/10"
|
||||
x-bind:aria-label="$store.sidebar.isOpen ? '{{ __('filament::layout.buttons.sidebar.collapse.label') }}' : '{{ __('filament::layout.buttons.sidebar.expand.label') }}'"
|
||||
x-on:click.stop="$store.sidebar.isOpen ? $store.sidebar.close() : $store.sidebar.open()"
|
||||
x-show="(! $store.sidebar.isOpen) && @js(! filament()->isSidebarFullyCollapsibleOnDesktop())"
|
||||
@@ -94,14 +106,16 @@
|
||||
@endif
|
||||
</header>
|
||||
|
||||
<nav class="flex-1 py-6 overflow-x-hidden overflow-y-auto filament-sidebar-nav">
|
||||
<nav
|
||||
class="filament-sidebar-nav flex-1 overflow-y-auto overflow-x-hidden py-6"
|
||||
>
|
||||
{{ filament()->renderHook('sidebar.start') }}
|
||||
|
||||
@if (filament()->hasTenancy())
|
||||
<div class="px-6 space-y-6 mb-6">
|
||||
<div class="mb-6 space-y-6 px-6">
|
||||
<x-filament::tenant-menu />
|
||||
|
||||
<div class="border-t -me-6 dark:border-gray-700"></div>
|
||||
<div class="-me-6 border-t dark:border-gray-700"></div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -114,15 +128,18 @@
|
||||
|
||||
<script>
|
||||
if (
|
||||
(JSON.parse(localStorage.getItem('collapsedGroups')) === null) ||
|
||||
(JSON.parse(localStorage.getItem('collapsedGroups')) === 'null')
|
||||
JSON.parse(localStorage.getItem('collapsedGroups')) === null ||
|
||||
JSON.parse(localStorage.getItem('collapsedGroups')) === 'null'
|
||||
) {
|
||||
localStorage.setItem('collapsedGroups', JSON.stringify(@js($collapsedNavigationGroupLabels)))
|
||||
localStorage.setItem(
|
||||
'collapsedGroups',
|
||||
JSON.stringify(@js($collapsedNavigationGroupLabels)),
|
||||
)
|
||||
}
|
||||
</script>
|
||||
|
||||
@if (filament()->hasNavigation())
|
||||
<ul class="px-6 space-y-6">
|
||||
<ul class="space-y-6 px-6">
|
||||
@foreach ($navigation as $group)
|
||||
<x-filament::layouts.app.sidebar.group
|
||||
:label="$group->getLabel()"
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
'url',
|
||||
])
|
||||
|
||||
<li @class(['filament-sidebar-item overflow-hidden', 'filament-sidebar-item-active' => $active])>
|
||||
<li
|
||||
@class(['filament-sidebar-item overflow-hidden', 'filament-sidebar-item-active' => $active])
|
||||
>
|
||||
<a
|
||||
href="{{ $url }}"
|
||||
@if ($shouldOpenUrlInNewTab) target="_blank" @endif
|
||||
@@ -31,7 +33,7 @@
|
||||
x-tooltip.html="tooltip"
|
||||
@endif
|
||||
@class([
|
||||
'flex items-center justify-center gap-3 px-3 py-2 rounded-lg font-medium transition',
|
||||
'flex items-center justify-center gap-3 rounded-lg px-3 py-2 font-medium transition',
|
||||
'hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700' => ! $active,
|
||||
'bg-primary-500 text-white' => $active,
|
||||
])
|
||||
|
||||
@@ -6,17 +6,17 @@
|
||||
|
||||
<span
|
||||
@class([
|
||||
'inline-flex items-center justify-center ms-auto min-h-4 px-2 py-0.5 text-xs font-medium tracking-tight rounded-xl whitespace-normal',
|
||||
'min-h-4 ms-auto inline-flex items-center justify-center whitespace-normal rounded-xl px-2 py-0.5 text-xs font-medium tracking-tight',
|
||||
match ($active) {
|
||||
true => 'text-white bg-gray-900/10',
|
||||
true => 'bg-gray-900/10 text-white',
|
||||
false => match ($badgeColor) {
|
||||
'danger' => 'text-danger-700 bg-danger-500/10 dark:text-danger-500',
|
||||
'gray' => 'text-gray-700 bg-gray-500/10 dark:text-gray-500',
|
||||
'info' => 'text-info-700 bg-info-500/10 dark:text-info-500',
|
||||
'primary', null => 'text-primary-700 bg-primary-500/10 dark:text-primary-500',
|
||||
'secondary' => 'text-secondary-700 bg-secondary-500/10 dark:text-secondary-500',
|
||||
'success' => 'text-success-700 bg-success-500/10 dark:text-success-500',
|
||||
'warning' => 'text-warning-700 bg-warning-500/10 dark:text-warning-500',
|
||||
'danger' => 'bg-danger-500/10 text-danger-700 dark:text-danger-500',
|
||||
'gray' => 'bg-gray-500/10 text-gray-700 dark:text-gray-500',
|
||||
'info' => 'bg-info-500/10 text-info-700 dark:text-info-500',
|
||||
'primary', null => 'bg-primary-500/10 text-primary-700 dark:text-primary-500',
|
||||
'secondary' => 'bg-secondary-500/10 text-secondary-700 dark:text-secondary-500',
|
||||
'success' => 'bg-success-500/10 text-success-700 dark:text-success-500',
|
||||
'warning' => 'bg-warning-500/10 text-warning-700 dark:text-warning-500',
|
||||
default => $badgeColor,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
'breadcrumbs' => [],
|
||||
])
|
||||
|
||||
<div {{ $attributes->class(['hidden filament-breadcrumbs flex-1 lg:block']) }}>
|
||||
<div {{ $attributes->class(['filament-breadcrumbs hidden flex-1 lg:block']) }}>
|
||||
<ul class="flex items-center gap-3 text-sm font-medium dark:text-white">
|
||||
@foreach ($breadcrumbs as $url => $label)
|
||||
<li>
|
||||
@@ -18,7 +18,9 @@
|
||||
</li>
|
||||
|
||||
@if (! $loop->last)
|
||||
<li class="h-4 border-e border-gray-300 -skew-x-12 dark:border-gray-500"></li>
|
||||
<li
|
||||
class="h-4 -skew-x-12 border-e border-gray-300 dark:border-gray-500"
|
||||
></li>
|
||||
@endif
|
||||
@endforeach
|
||||
</ul>
|
||||
|
||||
+1
-1
@@ -5,5 +5,5 @@
|
||||
icon-size="lg"
|
||||
color="gray"
|
||||
:indicator="$unreadNotificationsCount"
|
||||
class="ms-4 -me-1"
|
||||
class="-me-1 ms-4"
|
||||
/>
|
||||
|
||||
@@ -3,9 +3,13 @@
|
||||
'navigation',
|
||||
])
|
||||
|
||||
<header {{ $attributes->class(['filament-main-topbar sticky top-0 z-10 border-b bg-white dark:bg-gray-800 dark:border-gray-700']) }}>
|
||||
<div class="flex items-center justify-between h-16 -mt-px px-2 sm:px-4 md:px-6 lg:px-8">
|
||||
<div class="flex items-center flex-1">
|
||||
<header
|
||||
{{ $attributes->class(['filament-main-topbar sticky top-0 z-10 border-b bg-white dark:border-gray-700 dark:bg-gray-800']) }}
|
||||
>
|
||||
<div
|
||||
class="-mt-px flex h-16 items-center justify-between px-2 sm:px-4 md:px-6 lg:px-8"
|
||||
>
|
||||
<div class="flex flex-1 items-center">
|
||||
{{ filament()->renderHook('topbar.start') }}
|
||||
|
||||
<button
|
||||
@@ -14,7 +18,7 @@
|
||||
x-bind:aria-label="$store.sidebar.isOpen ? '{{ __('filament::layout.buttons.sidebar.collapse.label') }}' : '{{ __('filament::layout.buttons.sidebar.expand.label') }}'"
|
||||
x-on:click="$store.sidebar.isOpen ? $store.sidebar.close() : $store.sidebar.open()"
|
||||
@class([
|
||||
'filament-sidebar-open-button shrink-0 flex items-center justify-center w-10 h-10 rounded-full outline-none hover:bg-gray-500/5 focus:bg-primary-500/10',
|
||||
'filament-sidebar-open-button flex h-10 w-10 shrink-0 items-center justify-center rounded-full outline-none hover:bg-gray-500/5 focus:bg-primary-500/10',
|
||||
'lg:me-4' => filament()->isSidebarFullyCollapsibleOnDesktop(),
|
||||
'lg:hidden' => ! (filament()->isSidebarFullyCollapsibleOnDesktop()),
|
||||
])
|
||||
@@ -28,12 +32,9 @@
|
||||
</button>
|
||||
|
||||
@if (filament()->hasTopNavigation())
|
||||
<div class="hidden me-12 lg:flex">
|
||||
<div class="me-12 hidden lg:flex">
|
||||
@if ($homeUrl = filament()->getHomeUrl())
|
||||
<a
|
||||
href="{{ $homeUrl }}"
|
||||
data-turbo="false"
|
||||
>
|
||||
<a href="{{ $homeUrl }}" data-turbo="false">
|
||||
<x-filament::logo />
|
||||
</a>
|
||||
@else
|
||||
@@ -42,7 +43,7 @@
|
||||
</div>
|
||||
|
||||
@if (filament()->hasNavigation())
|
||||
<ul class="hidden items-center flex-wrap gap-3 lg:flex">
|
||||
<ul class="hidden flex-wrap items-center gap-3 lg:flex">
|
||||
@foreach ($navigation as $group)
|
||||
@if ($groupLabel = $group->getLabel())
|
||||
<x-filament::dropdown placement="bottom-start">
|
||||
@@ -87,7 +88,9 @@
|
||||
</ul>
|
||||
@endif
|
||||
@elseif (count($breadcrumbs))
|
||||
<x-filament::layouts.app.topbar.breadcrumbs :breadcrumbs="$breadcrumbs" />
|
||||
<x-filament::layouts.app.topbar.breadcrumbs
|
||||
:breadcrumbs="$breadcrumbs"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -107,8 +110,12 @@
|
||||
</div>
|
||||
|
||||
@if (filament()->hasTopNavigation() && count($breadcrumbs))
|
||||
<div class="hidden border-t items-center h-12 px-8 lg:flex dark:border-gray-700">
|
||||
<x-filament::layouts.app.topbar.breadcrumbs :breadcrumbs="$breadcrumbs" />
|
||||
<div
|
||||
class="hidden h-12 items-center border-t px-8 dark:border-gray-700 lg:flex"
|
||||
>
|
||||
<x-filament::layouts.app.topbar.breadcrumbs
|
||||
:breadcrumbs="$breadcrumbs"
|
||||
/>
|
||||
</div>
|
||||
@endif
|
||||
</header>
|
||||
|
||||
@@ -8,14 +8,16 @@
|
||||
'url' => null,
|
||||
])
|
||||
|
||||
<li @class(['filament-topbar-item overflow-hidden', 'filament-topbar-item-active' => $active])>
|
||||
<li
|
||||
@class(['filament-topbar-item overflow-hidden', 'filament-topbar-item-active' => $active])
|
||||
>
|
||||
<a
|
||||
@if ($url)
|
||||
href="{{ $url }}"
|
||||
@if ($shouldOpenUrlInNewTab) target="_blank" @endif
|
||||
@endif
|
||||
@class([
|
||||
'flex items-center justify-center gap-3 text-sm px-3 py-2 rounded-lg font-medium transition',
|
||||
'flex items-center justify-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition',
|
||||
'hover:bg-gray-500/5 focus:bg-gray-500/5 dark:text-gray-300 dark:hover:bg-gray-700' => ! $active,
|
||||
'bg-primary-500 text-white' => $active,
|
||||
])
|
||||
|
||||
@@ -7,106 +7,116 @@
|
||||
lang="{{ str_replace('_', '-', app()->getLocale()) }}"
|
||||
dir="{{ __('filament::layout.direction') ?? 'ltr' }}"
|
||||
@class([
|
||||
'filament antialiased min-h-screen js-focus-visible',
|
||||
'filament js-focus-visible min-h-screen antialiased',
|
||||
'dark' => filament()->hasDarkModeForced(),
|
||||
])
|
||||
>
|
||||
<head>
|
||||
{{ filament()->renderHook('head.start') }}
|
||||
<head>
|
||||
{{ filament()->renderHook('head.start') }}
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}" />
|
||||
|
||||
@if ($favicon = filament()->getFavicon())
|
||||
<link rel="icon" href="{{ $favicon }}">
|
||||
@endif
|
||||
@if ($favicon = filament()->getFavicon())
|
||||
<link rel="icon" href="{{ $favicon }}" />
|
||||
@endif
|
||||
|
||||
<title>
|
||||
{{ filled($title = $livewire->getTitle()) ? "{$title} - " : null }} {{ filament()->getBrandName() }}
|
||||
</title>
|
||||
<title>
|
||||
{{ filled($title = $livewire->getTitle()) ? "{$title} - " : null }}
|
||||
{{ filament()->getBrandName() }}
|
||||
</title>
|
||||
|
||||
{{ filament()->renderHook('styles.start') }}
|
||||
{{ filament()->renderHook('styles.start') }}
|
||||
|
||||
<style>
|
||||
[x-cloak=""], [x-cloak="x-cloak"], [x-cloak="1"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 1023px) {
|
||||
[x-cloak="-lg"] {
|
||||
<style>
|
||||
[x-cloak=''],
|
||||
[x-cloak='x-cloak'],
|
||||
[x-cloak='1'] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
[x-cloak="lg"] {
|
||||
display: none !important;
|
||||
@media (max-width: 1023px) {
|
||||
[x-cloak='-lg'] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@livewireStyles
|
||||
@filamentStyles
|
||||
{{ filament()->getTheme()->getHtml() }}
|
||||
{{ filament()->getFontHtml() }}
|
||||
@media (min-width: 1024px) {
|
||||
[x-cloak='lg'] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--font-family: {!! filament()->getFontFamily() !!};
|
||||
--filament-widgets-chart-font-family: var(--font-family);
|
||||
--sidebar-width: {{ filament()->getSidebarWidth() }};
|
||||
--collapsed-sidebar-width: {{ filament()->getCollapsedSidebarWidth() }};
|
||||
@livewireStyles
|
||||
@filamentStyles
|
||||
{{ filament()->getTheme()->getHtml() }}
|
||||
{{ filament()->getFontHtml() }}
|
||||
|
||||
@foreach (filament()->getColors() as $key => $palette)
|
||||
@foreach ($palette as $shade => $color)
|
||||
--{{ $key }}-color-{{ $shade }}: {{ $color }};
|
||||
<style>
|
||||
:root {
|
||||
--font-family: {!! filament()->getFontFamily() !!};
|
||||
--filament-widgets-chart-font-family: var(--font-family);
|
||||
--sidebar-width: {{ filament()->getSidebarWidth() }};
|
||||
--collapsed-sidebar-width: {{ filament()->getCollapsedSidebarWidth() }};
|
||||
|
||||
@foreach (filament()->getColors() as $key => $palette)
|
||||
@foreach ($palette as $shade => $color)
|
||||
--{{ $key }}-color-{{ $shade }}: {{ $color }};
|
||||
@endforeach
|
||||
@endforeach
|
||||
@endforeach
|
||||
}
|
||||
</style>
|
||||
|
||||
{{ filament()->renderHook('styles.end') }}
|
||||
|
||||
@if (filament()->hasDarkMode() && (! filament()->hasDarkModeForced()))
|
||||
<script>
|
||||
const theme = localStorage.getItem('theme') ?? 'system'
|
||||
|
||||
if ((theme === 'dark') || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
}
|
||||
</script>
|
||||
@endif
|
||||
</style>
|
||||
|
||||
{{ filament()->renderHook('head.end') }}
|
||||
</head>
|
||||
{{ filament()->renderHook('styles.end') }}
|
||||
|
||||
<body class="filament-body min-h-screen overscroll-y-none bg-gray-50 text-gray-900 dark:text-white dark:bg-gray-900">
|
||||
{{ filament()->renderHook('body.start') }}
|
||||
@if (filament()->hasDarkMode() && (! filament()->hasDarkModeForced()))
|
||||
<script>
|
||||
const theme = localStorage.getItem('theme') ?? 'system'
|
||||
|
||||
{{ $slot }}
|
||||
if (
|
||||
theme === 'dark' ||
|
||||
(theme === 'system' &&
|
||||
window.matchMedia('(prefers-color-scheme: dark)')
|
||||
.matches)
|
||||
) {
|
||||
document.documentElement.classList.add('dark')
|
||||
}
|
||||
</script>
|
||||
@endif
|
||||
|
||||
@livewire('filament.core.notifications')
|
||||
{{ filament()->renderHook('head.end') }}
|
||||
</head>
|
||||
|
||||
{{ filament()->renderHook('scripts.start') }}
|
||||
<body
|
||||
class="filament-body min-h-screen overscroll-y-none bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-white"
|
||||
>
|
||||
{{ filament()->renderHook('body.start') }}
|
||||
|
||||
@livewireScripts
|
||||
@filamentScripts(withCore: true)
|
||||
{{ $slot }}
|
||||
|
||||
@if (config('filament.broadcasting.echo'))
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
window.Echo = new window.EchoFactory(@js(config('filament.broadcasting.echo')))
|
||||
@livewire('filament.core.notifications')
|
||||
|
||||
window.dispatchEvent(new CustomEvent('EchoLoaded'))
|
||||
})
|
||||
</script>
|
||||
@endif
|
||||
{{ filament()->renderHook('scripts.start') }}
|
||||
|
||||
@stack('scripts')
|
||||
@livewireScripts
|
||||
@filamentScripts(withCore: true)
|
||||
|
||||
{{ filament()->renderHook('scripts.end') }}
|
||||
@if (config('filament.broadcasting.echo'))
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
window.Echo = new window.EchoFactory(@js(config('filament.broadcasting.echo')))
|
||||
|
||||
{{ filament()->renderHook('body.end') }}
|
||||
</body>
|
||||
window.dispatchEvent(new CustomEvent('EchoLoaded'))
|
||||
})
|
||||
</script>
|
||||
@endif
|
||||
|
||||
@stack('scripts')
|
||||
|
||||
{{ filament()->renderHook('scripts.end') }}
|
||||
|
||||
{{ filament()->renderHook('body.end') }}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,40 +5,50 @@
|
||||
])
|
||||
|
||||
<x-filament::layouts.base :livewire="$livewire">
|
||||
<div class="filament-card-layout flex items-center justify-center min-h-screen py-14">
|
||||
<div @class([
|
||||
'w-screen px-6 space-y-8 md:mt-0 md:px-2',
|
||||
match ($width = $livewire->getCardWidth()) {
|
||||
'xs' => 'max-w-xs',
|
||||
'sm' => 'max-w-sm',
|
||||
'md' => 'max-w-md',
|
||||
'lg' => 'max-w-lg',
|
||||
'xl' => 'max-w-xl',
|
||||
'2xl' => 'max-w-2xl',
|
||||
'3xl' => 'max-w-3xl',
|
||||
'4xl' => 'max-w-4xl',
|
||||
'5xl' => 'max-w-5xl',
|
||||
'6xl' => 'max-w-6xl',
|
||||
'7xl' => 'max-w-7xl',
|
||||
default => $width,
|
||||
},
|
||||
])>
|
||||
<div class="filament-card-layout-card relative space-y-4 rounded-xl bg-white/50 p-8 shadow-2xl ring-1 ring-gray-950/5 backdrop-blur-xl dark:bg-gray-900/50 dark:ring-white/20">
|
||||
<div
|
||||
class="filament-card-layout flex min-h-screen items-center justify-center py-14"
|
||||
>
|
||||
<div
|
||||
@class([
|
||||
'w-screen space-y-8 px-6 md:mt-0 md:px-2',
|
||||
match ($width = $livewire->getCardWidth()) {
|
||||
'xs' => 'max-w-xs',
|
||||
'sm' => 'max-w-sm',
|
||||
'md' => 'max-w-md',
|
||||
'lg' => 'max-w-lg',
|
||||
'xl' => 'max-w-xl',
|
||||
'2xl' => 'max-w-2xl',
|
||||
'3xl' => 'max-w-3xl',
|
||||
'4xl' => 'max-w-4xl',
|
||||
'5xl' => 'max-w-5xl',
|
||||
'6xl' => 'max-w-6xl',
|
||||
'7xl' => 'max-w-7xl',
|
||||
default => $width,
|
||||
},
|
||||
])
|
||||
>
|
||||
<div
|
||||
class="filament-card-layout-card relative space-y-4 rounded-xl bg-white/50 p-8 shadow-2xl ring-1 ring-gray-950/5 backdrop-blur-xl dark:bg-gray-900/50 dark:ring-white/20"
|
||||
>
|
||||
@if ($livewire->hasLogo())
|
||||
<div class="flex justify-center w-full">
|
||||
<div class="flex w-full justify-center">
|
||||
<x-filament::logo />
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="space-y-2">
|
||||
@if (filled($heading ??= $livewire->getHeading()))
|
||||
<h2 class="text-2xl font-bold tracking-tight text-center">
|
||||
<h2
|
||||
class="text-center text-2xl font-bold tracking-tight"
|
||||
>
|
||||
{{ $heading }}
|
||||
</h2>
|
||||
@endif
|
||||
|
||||
@if (filled($subheading ??= $livewire->getSubHeading()))
|
||||
<h3 class="text-sm text-gray-600 font-medium tracking-tight text-center dark:text-gray-300">
|
||||
<h3
|
||||
class="text-center text-sm font-medium tracking-tight text-gray-600 dark:text-gray-300"
|
||||
>
|
||||
{{ $subheading }}
|
||||
</h3>
|
||||
@endif
|
||||
@@ -53,7 +63,9 @@
|
||||
</div>
|
||||
|
||||
@if (filament()->auth()->check())
|
||||
<div class="absolute top-0 end-0 flex items-center justify-end p-2 w-full">
|
||||
<div
|
||||
class="absolute end-0 top-0 flex w-full items-center justify-end p-2"
|
||||
>
|
||||
@if (filament()->hasDatabaseNotifications())
|
||||
@livewire('filament.core.database-notifications')
|
||||
@endif
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@if (filled($brand = filament()->getBrandName()))
|
||||
<div class="filament-brand text-xl font-bold leading-5 tracking-tight dark:text-white">
|
||||
<div
|
||||
class="filament-brand text-xl font-bold leading-5 tracking-tight dark:text-white"
|
||||
>
|
||||
{{ $brand }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@@ -60,7 +60,7 @@
|
||||
class="space-y-4 outline-none"
|
||||
>
|
||||
@if ($managers[$activeManager] instanceof \Filament\Resources\RelationManagers\RelationGroup)
|
||||
@foreach($managers[$activeManager]->ownerRecord($ownerRecord)->pageClass($pageClass)->getManagers() as $groupedManager)
|
||||
@foreach ($managers[$activeManager]->ownerRecord($ownerRecord)->pageClass($pageClass)->getManagers() as $groupedManager)
|
||||
@livewire(\Livewire\Livewire::getAlias($groupedManager, $groupedManager::getName()), ['ownerRecord' => $ownerRecord, 'pageClass' => $pageClass], key($groupedManager))
|
||||
@endforeach
|
||||
@else
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
>
|
||||
<x-slot name="trigger">
|
||||
<div
|
||||
class="flex items-center space-x-3 -m-3 p-2 rounded-lg transition rtl:space-x-reverse hover:bg-gray-500/5 dark:hover:bg-gray-900/50"
|
||||
class="-m-3 flex items-center space-x-3 rounded-lg p-2 transition hover:bg-gray-500/5 rtl:space-x-reverse dark:hover:bg-gray-900/50"
|
||||
@if (filament()->isSidebarCollapsibleOnDesktop())
|
||||
x-data="{ tooltip: {} }"
|
||||
x-init="
|
||||
@@ -62,7 +62,9 @@
|
||||
@endif
|
||||
>
|
||||
@if ($currentTenant instanceof \Filament\Models\Contracts\HasCurrentTenantLabel)
|
||||
<p class="text-[.625rem] font-bold uppercase tracking-wider text-gray-500 -mb-0.5 dark:text-gray-400">
|
||||
<p
|
||||
class="-mb-0.5 text-[.625rem] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
{{ $currentTenant->getCurrentTenantLabel() }}
|
||||
</p>
|
||||
@endif
|
||||
|
||||
@@ -14,7 +14,10 @@
|
||||
|
||||
<x-filament::dropdown placement="bottom-end" class="filament-user-menu">
|
||||
<x-slot name="trigger" class="ms-4">
|
||||
<button class="block" aria-label="{{ __('filament::layout.buttons.user_menu.label') }}">
|
||||
<button
|
||||
class="block"
|
||||
aria-label="{{ __('filament::layout.buttons.user_menu.label') }}"
|
||||
>
|
||||
<x-filament::avatar.user :user="$user" />
|
||||
</button>
|
||||
</x-slot>
|
||||
@@ -75,7 +78,7 @@
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
},
|
||||
}"
|
||||
class="filament-theme-switcher flex items-center border-b border-gray-950/5 divide-x divide-gray-950/5 dark:border-gray-700 dark:divide-gray-700"
|
||||
class="filament-theme-switcher flex items-center divide-x divide-gray-950/5 border-b border-gray-950/5 dark:divide-gray-700 dark:border-gray-700"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@@ -83,7 +86,7 @@
|
||||
x-tooltip="'{{ __('filament::layout.buttons.light_theme.label') }}'"
|
||||
x-on:click="theme = 'light'"
|
||||
x-bind:class="theme === 'light' ? 'text-primary-500' : 'text-gray-700 dark:text-gray-200'"
|
||||
class="flex-1 flex items-center justify-center p-2 hover:bg-gray-500/10 focus:bg-gray-500/10"
|
||||
class="flex flex-1 items-center justify-center p-2 hover:bg-gray-500/10 focus:bg-gray-500/10"
|
||||
>
|
||||
<x-filament::icon
|
||||
name="heroicon-m-sun"
|
||||
@@ -98,7 +101,7 @@
|
||||
x-tooltip="'{{ __('filament::layout.buttons.dark_theme.label') }}'"
|
||||
x-on:click="theme = 'dark'"
|
||||
x-bind:class="theme === 'dark' ? 'text-primary-500' : 'text-gray-700 dark:text-gray-200'"
|
||||
class="flex-1 flex items-center justify-center p-2 text-gray-700 hover:bg-gray-500/10 focus:bg-gray-500/10"
|
||||
class="flex flex-1 items-center justify-center p-2 text-gray-700 hover:bg-gray-500/10 focus:bg-gray-500/10"
|
||||
>
|
||||
<x-filament::icon
|
||||
name="heroicon-m-moon"
|
||||
@@ -113,7 +116,7 @@
|
||||
x-tooltip="'{{ __('filament::layout.buttons.system_theme.label') }}'"
|
||||
x-on:click="theme = 'system'"
|
||||
x-bind:class="theme === 'system' ? 'text-primary-500' : 'text-gray-700 dark:text-gray-200'"
|
||||
class="flex-1 flex items-center justify-center p-2 text-gray-700 hover:bg-gray-500/10 focus:bg-gray-500/10"
|
||||
class="flex flex-1 items-center justify-center p-2 text-gray-700 hover:bg-gray-500/10 focus:bg-gray-500/10"
|
||||
>
|
||||
<x-filament::icon
|
||||
name="heroicon-m-computer-desktop"
|
||||
|
||||
+5
-3
@@ -1,8 +1,10 @@
|
||||
<div class="space-y-6">
|
||||
<p class="text-center text-sm text-gray-600 dark:text-gray-300">
|
||||
{{ __('filament::pages/auth/email-verification/email-verification-prompt.messages.notification_sent', [
|
||||
'email' => filament()->auth()->user()->getEmailForVerification(),
|
||||
]) }}
|
||||
{{
|
||||
__('filament::pages/auth/email-verification/email-verification-prompt.messages.notification_sent', [
|
||||
'email' => filament()->auth()->user()->getEmailForVerification(),
|
||||
])
|
||||
}}
|
||||
</p>
|
||||
|
||||
<p class="text-center text-sm text-gray-600 dark:text-gray-300">
|
||||
|
||||
@@ -7,10 +7,7 @@
|
||||
</x-slot>
|
||||
@endif
|
||||
|
||||
<form
|
||||
wire:submit.prevent="authenticate"
|
||||
class="grid gap-y-8"
|
||||
>
|
||||
<form wire:submit.prevent="authenticate" class="grid gap-y-8">
|
||||
{{ $this->form }}
|
||||
|
||||
{{ $this->authenticateAction }}
|
||||
|
||||
+1
-4
@@ -5,10 +5,7 @@
|
||||
</x-slot>
|
||||
@endif
|
||||
|
||||
<form
|
||||
wire:submit.prevent="request"
|
||||
class="grid gap-y-8"
|
||||
>
|
||||
<form wire:submit.prevent="request" class="grid gap-y-8">
|
||||
{{ $this->form }}
|
||||
|
||||
{{ $this->requestAction }}
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
<form
|
||||
wire:submit.prevent="resetPassword"
|
||||
class="grid gap-y-8"
|
||||
>
|
||||
<form wire:submit.prevent="resetPassword" class="grid gap-y-8">
|
||||
{{ $this->form }}
|
||||
|
||||
{{ $this->resetPasswordAction }}
|
||||
|
||||
@@ -7,10 +7,7 @@
|
||||
</x-slot>
|
||||
@endif
|
||||
|
||||
<form
|
||||
wire:submit.prevent="register"
|
||||
class="grid gap-y-8"
|
||||
>
|
||||
<form wire:submit.prevent="register" class="grid gap-y-8">
|
||||
{{ $this->form }}
|
||||
|
||||
{{ $this->registerAction }}
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<div>
|
||||
<form
|
||||
wire:submit.prevent="register"
|
||||
class="grid gap-y-8"
|
||||
>
|
||||
<form wire:submit.prevent="register" class="grid gap-y-8">
|
||||
{{ $this->form }}
|
||||
|
||||
{{ $this->registerAction }}
|
||||
@@ -10,13 +7,16 @@
|
||||
|
||||
@if (count($tenants = filament()->getUserTenants(filament()->auth()->user())))
|
||||
<x-slot name="after">
|
||||
<ul class="bg-white/50 divide-y rounded-xl shadow-sm ring-1 ring-gray-950/5 overflow-hidden dark:ring-white/20 dark:bg-gray-900/50 dark:divide-gray-700 backdrop-blur-xl mt-8">
|
||||
<ul
|
||||
class="mt-8 divide-y overflow-hidden rounded-xl bg-white/50 shadow-sm ring-1 ring-gray-950/5 backdrop-blur-xl dark:divide-gray-700 dark:bg-gray-900/50 dark:ring-white/20"
|
||||
>
|
||||
@foreach ($tenants as $tenant)
|
||||
<li>
|
||||
<a href="{{ filament()->getUrl($tenant) }}" class="flex items-center gap-4 px-4 py-3 transition hover:bg-gray-500/5 dark:hover:bg-gray-900/50">
|
||||
<x-filament::avatar.tenant
|
||||
:tenant="$tenant"
|
||||
/>
|
||||
<a
|
||||
href="{{ filament()->getUrl($tenant) }}"
|
||||
class="flex items-center gap-4 px-4 py-3 transition hover:bg-gray-500/5 dark:hover:bg-gray-900/50"
|
||||
>
|
||||
<x-filament::avatar.tenant :tenant="$tenant" />
|
||||
|
||||
<div class="flex-1">
|
||||
{{ filament()->getTenantName($tenant) }}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<x-filament::page @class([
|
||||
'filament-resources-create-record-page',
|
||||
'filament-resources-' . str_replace('/', '-', $this->getResource()::getSlug()),
|
||||
])>
|
||||
<x-filament::page
|
||||
@class([
|
||||
'filament-resources-create-record-page',
|
||||
'filament-resources-' . str_replace('/', '-', $this->getResource()::getSlug()),
|
||||
])
|
||||
>
|
||||
<x-filament::form wire:submit.prevent="create">
|
||||
{{ $this->form }}
|
||||
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
<x-filament::page @class([
|
||||
'filament-resources-list-records-page',
|
||||
'filament-resources-' . str_replace('/', '-', $this->getResource()::getSlug()),
|
||||
])>
|
||||
<x-filament::page
|
||||
@class([
|
||||
'filament-resources-list-records-page',
|
||||
'filament-resources-' . str_replace('/', '-', $this->getResource()::getSlug()),
|
||||
])
|
||||
>
|
||||
@if (count($tabs = $this->getTabs()))
|
||||
<div class="flex justify-center">
|
||||
<x-filament::tabs>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
$user = filament()->auth()->user();
|
||||
@endphp
|
||||
|
||||
<div class="h-12 flex items-center space-x-4 rtl:space-x-reverse">
|
||||
<div class="flex h-12 items-center space-x-4 rtl:space-x-reverse">
|
||||
<x-filament::avatar.user :user="$user" />
|
||||
|
||||
<div>
|
||||
@@ -12,7 +12,11 @@
|
||||
{{ __('filament::widgets/account-widget.welcome', ['user' => filament()->getUserName($user)]) }}
|
||||
</h2>
|
||||
|
||||
<form action="{{ filament()->getLogoutUrl() }}" method="post" class="text-sm">
|
||||
<form
|
||||
action="{{ filament()->getLogoutUrl() }}"
|
||||
method="post"
|
||||
class="text-sm"
|
||||
>
|
||||
@csrf
|
||||
|
||||
<button
|
||||
|
||||
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user