mirror of
https://github.com/filamentphp/filament.git
synced 2026-10-13 01:16:57 +08:00
Move text input affixes inside border
This commit is contained in:
Adam Weston
Generated
+19
-19
@@ -127,16 +127,16 @@
|
||||
},
|
||||
{
|
||||
"name": "aws/aws-sdk-php",
|
||||
"version": "3.242.0",
|
||||
"version": "3.242.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/aws/aws-sdk-php.git",
|
||||
"reference": "cab6d4f830ce275a1742a3e35e2625917b006dd2"
|
||||
"reference": "9bfd85f696fff6a9b7810f1361751ad33a9b23d1"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/cab6d4f830ce275a1742a3e35e2625917b006dd2",
|
||||
"reference": "cab6d4f830ce275a1742a3e35e2625917b006dd2",
|
||||
"url": "https://api.github.com/repos/aws/aws-sdk-php/zipball/9bfd85f696fff6a9b7810f1361751ad33a9b23d1",
|
||||
"reference": "9bfd85f696fff6a9b7810f1361751ad33a9b23d1",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@@ -215,9 +215,9 @@
|
||||
"support": {
|
||||
"forum": "https://forums.aws.amazon.com/forum.jspa?forumID=80",
|
||||
"issues": "https://github.com/aws/aws-sdk-php/issues",
|
||||
"source": "https://github.com/aws/aws-sdk-php/tree/3.242.0"
|
||||
"source": "https://github.com/aws/aws-sdk-php/tree/3.242.1"
|
||||
},
|
||||
"time": "2022-11-10T19:15:37+00:00"
|
||||
"time": "2022-11-11T19:59:24+00:00"
|
||||
},
|
||||
{
|
||||
"name": "blade-ui-kit/blade-heroicons",
|
||||
@@ -4436,23 +4436,23 @@
|
||||
},
|
||||
{
|
||||
"name": "orchestra/testbench",
|
||||
"version": "v7.11.0",
|
||||
"version": "v7.12.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/orchestral/testbench.git",
|
||||
"reference": "64a5ef91760ab62acdd4adb10ebb1e1ad68e9311"
|
||||
"reference": "575053e4c36d1445d04b3c48618f58d0a7e6f286"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/orchestral/testbench/zipball/64a5ef91760ab62acdd4adb10ebb1e1ad68e9311",
|
||||
"reference": "64a5ef91760ab62acdd4adb10ebb1e1ad68e9311",
|
||||
"url": "https://api.github.com/repos/orchestral/testbench/zipball/575053e4c36d1445d04b3c48618f58d0a7e6f286",
|
||||
"reference": "575053e4c36d1445d04b3c48618f58d0a7e6f286",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"fakerphp/faker": "^1.9.2",
|
||||
"laravel/framework": "^9.36",
|
||||
"mockery/mockery": "^1.5.1",
|
||||
"orchestra/testbench-core": "^7.11",
|
||||
"orchestra/testbench-core": "^7.12.1",
|
||||
"php": "^8.0",
|
||||
"phpunit/phpunit": "^9.5.10",
|
||||
"spatie/laravel-ray": "^1.28",
|
||||
@@ -4489,7 +4489,7 @@
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/orchestral/testbench/issues",
|
||||
"source": "https://github.com/orchestral/testbench/tree/v7.11.0"
|
||||
"source": "https://github.com/orchestral/testbench/tree/v7.12.1"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
@@ -4501,20 +4501,20 @@
|
||||
"type": "liberapay"
|
||||
}
|
||||
],
|
||||
"time": "2022-10-19T11:54:46+00:00"
|
||||
"time": "2022-11-12T11:59:49+00:00"
|
||||
},
|
||||
{
|
||||
"name": "orchestra/testbench-core",
|
||||
"version": "v7.11.2",
|
||||
"version": "v7.12.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/orchestral/testbench-core.git",
|
||||
"reference": "2406f71150840be63673310b771dca233123876c"
|
||||
"reference": "0bad7911de0af7e06ce4d030e84508ddad2b499c"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/orchestral/testbench-core/zipball/2406f71150840be63673310b771dca233123876c",
|
||||
"reference": "2406f71150840be63673310b771dca233123876c",
|
||||
"url": "https://api.github.com/repos/orchestral/testbench-core/zipball/0bad7911de0af7e06ce4d030e84508ddad2b499c",
|
||||
"reference": "0bad7911de0af7e06ce4d030e84508ddad2b499c",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
@@ -4597,7 +4597,7 @@
|
||||
"type": "liberapay"
|
||||
}
|
||||
],
|
||||
"time": "2022-11-05T09:47:28+00:00"
|
||||
"time": "2022-11-12T11:49:22+00:00"
|
||||
},
|
||||
{
|
||||
"name": "pestphp/pest",
|
||||
@@ -12651,5 +12651,5 @@
|
||||
"composer-runtime-api": "^2.1"
|
||||
},
|
||||
"platform-dev": [],
|
||||
"plugin-api-version": "2.2.0"
|
||||
"plugin-api-version": "2.3.0"
|
||||
}
|
||||
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -54,6 +54,14 @@
|
||||
@apply border-gray-600 bg-gray-700 text-white;
|
||||
}
|
||||
|
||||
.has-prefix .choices__inner {
|
||||
@apply rounded-l-none;
|
||||
}
|
||||
|
||||
.has-suffix .choices__inner {
|
||||
@apply rounded-r-none;
|
||||
}
|
||||
|
||||
.choices--error .choices__inner {
|
||||
@apply border-danger-600 ring-danger-600;
|
||||
}
|
||||
|
||||
@@ -1,117 +1,90 @@
|
||||
@php
|
||||
$affixLabelClasses = [
|
||||
'whitespace-nowrap group-focus-within:text-primary-500',
|
||||
'text-gray-400' => ! $errors->has($getStatePath()),
|
||||
'text-danger-400' => $errors->has($getStatePath()),
|
||||
];
|
||||
@endphp
|
||||
|
||||
<x-dynamic-component
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<div {{ $attributes->merge($getExtraAttributes())->class(['filament-forms-color-picker-component flex items-center space-x-1 rtl:space-x-reverse group']) }}>
|
||||
@if (($prefixAction = $getPrefixAction()) && (! $prefixAction->isHidden()))
|
||||
{{ $prefixAction }}
|
||||
@endif
|
||||
<x-filament::input.affixes
|
||||
:state-path="$statePath"
|
||||
:prefix="$getPrefixLabel()"
|
||||
:prefix-action="$getPrefixAction()"
|
||||
:prefix-icon="$getPrefixIcon()"
|
||||
:suffix="$getSuffixLabel()"
|
||||
:suffix-action="$getSuffixAction()"
|
||||
:suffix-icon="$getSuffixIcon()"
|
||||
class="filament-forms-text-input-component"
|
||||
:attributes="$getExtraAttributeBag()"
|
||||
>
|
||||
|
||||
@if ($icon = $getPrefixIcon())
|
||||
<x-filament::icon
|
||||
:name="$icon"
|
||||
alias="filament-forms::components.color-picker.prefix"
|
||||
size="h-5 w-5"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@if ($label = $getPrefixLabel())
|
||||
<span @class($affixLabelClasses)>
|
||||
{{ $label }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
<div
|
||||
x-ignore
|
||||
ax-load
|
||||
ax-load-src="/js/filament/forms/components/color-picker.js?v={{ \Composer\InstalledVersions::getVersion('filament/support') }}"
|
||||
x-data="colorPickerFormComponent({
|
||||
isAutofocused: @js($isAutofocused()),
|
||||
isDisabled: @js($isDisabled()),
|
||||
state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }}
|
||||
})"
|
||||
x-on:keydown.esc="isOpen() && $event.stopPropagation()"
|
||||
{{ $getExtraAlpineAttributeBag()->class(['relative flex-1']) }}
|
||||
>
|
||||
<input
|
||||
x-ref="input"
|
||||
type="text"
|
||||
dusk="filament.forms.{{ $getStatePath() }}"
|
||||
id="{{ $getId() }}"
|
||||
x-model="state"
|
||||
x-on:click="togglePanelVisibility()"
|
||||
x-on:keydown.enter.stop.prevent="togglePanelVisibility()"
|
||||
autocomplete="off"
|
||||
{!! $isDisabled() ? 'disabled' : null !!}
|
||||
{!! ($placeholder = $getPlaceholder()) ? "placeholder=\"{$placeholder}\"" : null !!}
|
||||
@if (! $isConcealed())
|
||||
{!! $isRequired() ? 'required' : null !!}
|
||||
@endif
|
||||
{{ $getExtraInputAttributeBag()->class([
|
||||
'text-gray-900 block w-full transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500',
|
||||
'border-gray-300 dark:border-gray-600' => ! $errors->has($getStatePath()),
|
||||
'border-danger-600 ring-danger-600' => $errors->has($getStatePath()),
|
||||
]) }}
|
||||
/>
|
||||
|
||||
<span
|
||||
x-cloak
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none rtl:right-auto rtl:left-0 rtl:pl-2"
|
||||
>
|
||||
<span
|
||||
x-bind:style="{ 'background-color': state }"
|
||||
class="filament-forms-color-picker-component-preview relative overflow-hidden rounded-md w-7 h-7"
|
||||
></span>
|
||||
</span>
|
||||
<div {{ $attributes->merge($getExtraAttributes())->class(['filament-forms-color-picker-component flex items-center space-x-1 rtl:space-x-reverse group']) }}>
|
||||
|
||||
<div
|
||||
x-cloak
|
||||
x-ref="panel"
|
||||
x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
|
||||
wire:ignore.self
|
||||
wire:key="{{ $this->id }}.{{ $getStatePath() }}.{{ $field::class }}.panel"
|
||||
@class([
|
||||
'hidden absolute z-10 shadow-lg',
|
||||
'opacity-70 pointer-events-none' => $isDisabled(),
|
||||
])
|
||||
x-ignore
|
||||
ax-load
|
||||
ax-load-src="/js/filament/forms/components/color-picker.js?v={{ \Composer\InstalledVersions::getVersion('filament/support') }}"
|
||||
x-data="colorPickerFormComponent({
|
||||
isAutofocused: @js($isAutofocused()),
|
||||
isDisabled: @js($isDisabled()),
|
||||
state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }}
|
||||
})"
|
||||
x-on:keydown.esc="isOpen() && $event.stopPropagation()"
|
||||
{{ $getExtraAlpineAttributeBag()->class(['relative flex-1']) }}
|
||||
>
|
||||
@php
|
||||
$tag = match ($getFormat()) {
|
||||
'hsl' => 'hsl-string',
|
||||
'rgb' => 'rgb-string',
|
||||
'rgba' => 'rgba-string',
|
||||
default => 'hex',
|
||||
} . '-color-picker';
|
||||
@endphp
|
||||
<input
|
||||
x-ref="input"
|
||||
type="text"
|
||||
dusk="filament.forms.{{ $getStatePath() }}"
|
||||
id="{{ $getId() }}"
|
||||
x-model="state"
|
||||
x-on:click="togglePanelVisibility()"
|
||||
x-on:keydown.enter.stop.prevent="togglePanelVisibility()"
|
||||
autocomplete="off"
|
||||
{!! $isDisabled() ? 'disabled' : null !!}
|
||||
{!! ($placeholder = $getPlaceholder()) ? "placeholder=\"{$placeholder}\"" : null !!}
|
||||
@if (! $isConcealed())
|
||||
{!! $isRequired() ? 'required' : null !!}
|
||||
@endif
|
||||
{{ $getExtraInputAttributeBag()->class([
|
||||
'text-gray-900 block w-full transition duration-75 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500',
|
||||
'border-gray-300 dark:border-gray-600' => ! $errors->has($getStatePath()),
|
||||
'border-danger-600 ring-danger-600' => $errors->has($getStatePath()),
|
||||
'rounded-l-lg' => ! ($getPrefixLabel() || $getPrefixIcon()),
|
||||
'rounded-r-lg' => ! ($getSuffixLabel() || $getSuffixIcon()),
|
||||
]) }}
|
||||
/>
|
||||
|
||||
<{{ $tag }} color="{{ $getState() }}" />
|
||||
<span
|
||||
x-cloak
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none rtl:right-auto rtl:left-0 rtl:pl-2"
|
||||
>
|
||||
<span
|
||||
x-bind:style="{ 'background-color': state }"
|
||||
class="filament-forms-color-picker-component-preview relative overflow-hidden rounded-md w-7 h-7"
|
||||
></span>
|
||||
</span>
|
||||
|
||||
<div
|
||||
x-cloak
|
||||
x-ref="panel"
|
||||
x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
|
||||
wire:ignore.self
|
||||
wire:key="{{ $this->id }}.{{ $getStatePath() }}.{{ $field::class }}.panel"
|
||||
@class([
|
||||
'hidden absolute z-10 shadow-lg',
|
||||
'opacity-70 pointer-events-none' => $isDisabled(),
|
||||
])
|
||||
>
|
||||
@php
|
||||
$tag = match ($getFormat()) {
|
||||
'hsl' => 'hsl-string',
|
||||
'rgb' => 'rgb-string',
|
||||
'rgba' => 'rgba-string',
|
||||
default => 'hex',
|
||||
} . '-color-picker';
|
||||
@endphp
|
||||
|
||||
<{{ $tag }} color="{{ $getState() }}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@if ($label = $getSuffixLabel())
|
||||
<span @class($affixLabelClasses)>
|
||||
{{ $label }}
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($icon = $getSuffixIcon())
|
||||
<x-filament::icon
|
||||
:name="$icon"
|
||||
alias="filament-forms::components.color-picker.suffix"
|
||||
size="h-5 w-5"
|
||||
/>
|
||||
@endif
|
||||
|
||||
@if (($suffixAction = $getSuffixAction()) && (! $suffixAction->isHidden()))
|
||||
{{ $suffixAction }}
|
||||
@endif
|
||||
</div>
|
||||
</x-filament::input.affixes>
|
||||
</x-dynamic-component>
|
||||
|
||||
@@ -2,181 +2,195 @@
|
||||
:component="$getFieldWrapperView()"
|
||||
:field="$field"
|
||||
>
|
||||
<div
|
||||
x-ignore
|
||||
ax-load
|
||||
ax-load-src="/js/filament/forms/components/date-time-picker.js?v={{ \Composer\InstalledVersions::getVersion('filament/support') }}"
|
||||
x-data="dateTimePickerFormComponent({
|
||||
displayFormat: '{{ convert_date_format($getDisplayFormat())->to('day.js') }}',
|
||||
firstDayOfWeek: {{ $getFirstDayOfWeek() }},
|
||||
isAutofocused: @js($isAutofocused()),
|
||||
locale: @js(app()->getLocale()),
|
||||
shouldCloseOnDateSelection: @js($shouldCloseOnDateSelection()),
|
||||
state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
|
||||
})"
|
||||
x-on:keydown.esc="isOpen() && $event.stopPropagation()"
|
||||
{{ $attributes->merge($getExtraAttributes())->class(['filament-forms-date-time-picker-component relative']) }}
|
||||
{{ $getExtraAlpineAttributeBag() }}
|
||||
<x-filament::input.affixes
|
||||
:state-path="$statePath"
|
||||
:prefix="$getPrefixLabel()"
|
||||
:prefix-action="$getPrefixAction()"
|
||||
:prefix-icon="$getPrefixIcon()"
|
||||
:suffix="$getSuffixLabel()"
|
||||
:suffix-action="$getSuffixAction()"
|
||||
:suffix-icon="$getSuffixIcon()"
|
||||
class="filament-forms-text-input-component"
|
||||
:attributes="$getExtraAttributeBag()"
|
||||
>
|
||||
<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"
|
||||
x-on:click="togglePanelVisibility()"
|
||||
x-on:keydown.enter.stop.prevent="if (! $el.disabled) { isOpen() ? selectDate() : togglePanelVisibility() }"
|
||||
x-on:keydown.arrow-left.stop.prevent="if (! $el.disabled) focusPreviousDay()"
|
||||
x-on:keydown.arrow-right.stop.prevent="if (! $el.disabled) focusNextDay()"
|
||||
x-on:keydown.arrow-up.stop.prevent="if (! $el.disabled) focusPreviousWeek()"
|
||||
x-on:keydown.arrow-down.stop.prevent="if (! $el.disabled) focusNextWeek()"
|
||||
x-on:keydown.backspace.stop.prevent="if (! $el.disabled) clearState()"
|
||||
x-on:keydown.clear.stop.prevent="if (! $el.disabled) clearState()"
|
||||
x-on:keydown.delete.stop.prevent="if (! $el.disabled) clearState()"
|
||||
aria-label="{{ $getPlaceholder() }}"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.open"
|
||||
type="button"
|
||||
@if ($isDisabled()) disabled @endif
|
||||
{{ $getExtraTriggerAttributeBag()->class([
|
||||
'bg-white relative w-full border py-2 pl-3 pr-10 rtl:pl-10 rtl:pr-3 text-start cursor-default rounded-lg shadow-sm dark:bg-gray-700',
|
||||
'focus-within:ring-1 focus-within:border-primary-500 focus-within:ring-inset focus-within:ring-primary-500' => ! $isDisabled(),
|
||||
'border-gray-300 dark:border-gray-600' => ! $errors->has($getStatePath()),
|
||||
'border-danger-600' => $errors->has($getStatePath()),
|
||||
'opacity-70 dark:text-gray-300' => $isDisabled(),
|
||||
]) }}
|
||||
>
|
||||
<input
|
||||
readonly
|
||||
placeholder="{{ $getPlaceholder() }}"
|
||||
wire:key="{{ $this->id }}.{{ $getStatePath() }}.{{ $field::class }}.display-text"
|
||||
x-model="displayText"
|
||||
{!! ($id = $getId()) ? "id=\"{$id}\"" : null !!}
|
||||
@class([
|
||||
'w-full h-full p-0 placeholder-gray-400 bg-transparent border-0 focus:placeholder-gray-500 focus:ring-0 focus:outline-none dark:bg-gray-700 dark:placeholder-gray-400',
|
||||
'cursor-default' => $isDisabled(),
|
||||
])
|
||||
/>
|
||||
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none rtl:right-auto rtl:left-0 rtl:pl-2">
|
||||
<x-filament::icon
|
||||
name="heroicon-m-calendar"
|
||||
alias="filament-forms::components.date-time-picker.suffix"
|
||||
color="text-gray-400 dark:text-gray-400"
|
||||
size="h-5 w-5"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
x-ref="panel"
|
||||
x-cloak
|
||||
x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
|
||||
wire:ignore
|
||||
wire:key="{{ $this->id }}.{{ $getStatePath() }}.{{ $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(),
|
||||
])
|
||||
x-ignore
|
||||
ax-load
|
||||
ax-load-src="/js/filament/forms/components/date-time-picker.js?v={{ \Composer\InstalledVersions::getVersion('filament/support') }}"
|
||||
x-data="dateTimePickerFormComponent({
|
||||
displayFormat: '{{ convert_date_format($getDisplayFormat())->to('day.js') }}',
|
||||
firstDayOfWeek: {{ $getFirstDayOfWeek() }},
|
||||
isAutofocused: @js($isAutofocused()),
|
||||
locale: @js(app()->getLocale()),
|
||||
shouldCloseOnDateSelection: @js($shouldCloseOnDateSelection()),
|
||||
state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
|
||||
})"
|
||||
x-on:keydown.esc="isOpen() && $event.stopPropagation()"
|
||||
{{ $attributes->merge($getExtraAttributes())->class(['filament-forms-date-time-picker-component relative']) }}
|
||||
{{ $getExtraAlpineAttributeBag() }}
|
||||
>
|
||||
<div class="space-y-3">
|
||||
@if ($hasDate())
|
||||
<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 focus:ring-0 focus:outline-none dark:bg-gray-700 dark:text-gray-200"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.focusedMonth"
|
||||
>
|
||||
<template x-for="(month, index) in months">
|
||||
<option x-bind:value="index" x-text="month"></option>
|
||||
<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"
|
||||
x-on:click="togglePanelVisibility()"
|
||||
x-on:keydown.enter.stop.prevent="if (! $el.disabled) { isOpen() ? selectDate() : togglePanelVisibility() }"
|
||||
x-on:keydown.arrow-left.stop.prevent="if (! $el.disabled) focusPreviousDay()"
|
||||
x-on:keydown.arrow-right.stop.prevent="if (! $el.disabled) focusNextDay()"
|
||||
x-on:keydown.arrow-up.stop.prevent="if (! $el.disabled) focusPreviousWeek()"
|
||||
x-on:keydown.arrow-down.stop.prevent="if (! $el.disabled) focusNextWeek()"
|
||||
x-on:keydown.backspace.stop.prevent="if (! $el.disabled) clearState()"
|
||||
x-on:keydown.clear.stop.prevent="if (! $el.disabled) clearState()"
|
||||
x-on:keydown.delete.stop.prevent="if (! $el.disabled) clearState()"
|
||||
aria-label="{{ $getPlaceholder() }}"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.open"
|
||||
type="button"
|
||||
@if ($isDisabled()) disabled @endif
|
||||
{{ $getExtraTriggerAttributeBag()->class([
|
||||
'bg-white relative w-full border py-2 pl-3 pr-10 rtl:pl-10 rtl:pr-3 text-start cursor-default shadow-sm dark:bg-gray-700',
|
||||
'focus-within:ring-1 focus-within:border-primary-500 focus-within:ring-inset focus-within:ring-primary-500' => ! $isDisabled(),
|
||||
'border-gray-300 dark:border-gray-600' => ! $errors->has($getStatePath()),
|
||||
'border-danger-600' => $errors->has($getStatePath()),
|
||||
'opacity-70 dark:text-gray-300' => $isDisabled(),
|
||||
'rounded-l-lg' => ! ($getPrefixLabel() || $getPrefixIcon()),
|
||||
'rounded-r-lg' => ! ($getSuffixLabel() || $getSuffixIcon()),
|
||||
]) }}
|
||||
>
|
||||
<input
|
||||
readonly
|
||||
placeholder="{{ $getPlaceholder() }}"
|
||||
wire:key="{{ $this->id }}.{{ $getStatePath() }}.{{ $field::class }}.display-text"
|
||||
x-model="displayText"
|
||||
{!! ($id = $getId()) ? "id=\"{$id}\"" : null !!}
|
||||
@class([
|
||||
'w-full h-full p-0 placeholder-gray-400 bg-transparent border-0 focus:placeholder-gray-500 focus:ring-0 focus:outline-none dark:bg-gray-700 dark:placeholder-gray-400',
|
||||
'cursor-default' => $isDisabled(),
|
||||
])
|
||||
/>
|
||||
|
||||
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none rtl:right-auto rtl:left-0 rtl:pl-2">
|
||||
<x-filament::icon
|
||||
name="heroicon-m-calendar"
|
||||
alias="filament-forms::components.date-time-picker.suffix"
|
||||
color="text-gray-400 dark:text-gray-400"
|
||||
size="h-5 w-5"
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
x-ref="panel"
|
||||
x-cloak
|
||||
x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
|
||||
wire:ignore
|
||||
wire:key="{{ $this->id }}.{{ $getStatePath() }}.{{ $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(),
|
||||
])
|
||||
>
|
||||
<div class="space-y-3">
|
||||
@if ($hasDate())
|
||||
<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 focus:ring-0 focus:outline-none dark:bg-gray-700 dark:text-gray-200"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.focusedMonth"
|
||||
>
|
||||
<template x-for="(month, index) in months">
|
||||
<option x-bind:value="index" x-text="month"></option>
|
||||
</template>
|
||||
</select>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="focusedYear"
|
||||
class="w-20 p-0 text-lg text-end border-0 focus:ring-0 focus:outline-none dark:bg-gray-700 dark:text-gray-200"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.focusedYear"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
<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"
|
||||
></div>
|
||||
</template>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="focusedYear"
|
||||
class="w-20 p-0 text-lg text-end border-0 focus:ring-0 focus:outline-none dark:bg-gray-700 dark:text-gray-200"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.focusedYear"
|
||||
/>
|
||||
</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>
|
||||
|
||||
<div class="grid grid-cols-7 gap-1">
|
||||
<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"
|
||||
></div>
|
||||
</template>
|
||||
</div>
|
||||
<template x-for="day in daysInFocusedMonth" x-bind:key="day">
|
||||
<div
|
||||
x-text="day"
|
||||
x-on:click="dayIsDisabled(day) || selectDate(day)"
|
||||
x-on:mouseenter="setFocusedDay(day)"
|
||||
role="option"
|
||||
x-bind:aria-selected="focusedDate.date() === day"
|
||||
x-bind:class="{
|
||||
'text-gray-700 dark:text-gray-300': ! dayIsSelected(day),
|
||||
'cursor-pointer': ! dayIsDisabled(day),
|
||||
'bg-primary-50 dark:bg-primary-100 dark:text-gray-600': dayIsToday(day) && ! dayIsSelected(day) && focusedDate.date() !== day && ! dayIsDisabled(day),
|
||||
'bg-primary-200 dark:text-gray-600': focusedDate.date() === day && ! dayIsSelected(day),
|
||||
'bg-primary-500 text-white': dayIsSelected(day),
|
||||
'cursor-not-allowed pointer-events-none': dayIsDisabled(day),
|
||||
'opacity-50': focusedDate.date() !== day && dayIsDisabled(day),
|
||||
}"
|
||||
x-bind:dusk="'filament.forms.{{ $getStatePath() }}' + '.focusedDate.' + day"
|
||||
class="text-sm leading-loose text-center transition duration-100 ease-in-out rounded-full"
|
||||
></div>
|
||||
</template>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<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>
|
||||
@if ($hasTime())
|
||||
<div class="flex items-center justify-center bg-gray-50 py-2 rounded-lg rtl:flex-row-reverse dark:bg-gray-800">
|
||||
<input
|
||||
max="23"
|
||||
min="0"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="hour"
|
||||
class="w-16 p-0 pr-1 text-xl bg-gray-50 text-center text-gray-700 border-0 focus:ring-0 focus:outline-none dark:text-gray-200 dark:bg-gray-800"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.hour"
|
||||
/>
|
||||
|
||||
<template x-for="day in daysInFocusedMonth" x-bind:key="day">
|
||||
<div
|
||||
x-text="day"
|
||||
x-on:click="dayIsDisabled(day) || selectDate(day)"
|
||||
x-on:mouseenter="setFocusedDay(day)"
|
||||
role="option"
|
||||
x-bind:aria-selected="focusedDate.date() === day"
|
||||
x-bind:class="{
|
||||
'text-gray-700 dark:text-gray-300': ! dayIsSelected(day),
|
||||
'cursor-pointer': ! dayIsDisabled(day),
|
||||
'bg-primary-50 dark:bg-primary-100 dark:text-gray-600': dayIsToday(day) && ! dayIsSelected(day) && focusedDate.date() !== day && ! dayIsDisabled(day),
|
||||
'bg-primary-200 dark:text-gray-600': focusedDate.date() === day && ! dayIsSelected(day),
|
||||
'bg-primary-500 text-white': dayIsSelected(day),
|
||||
'cursor-not-allowed pointer-events-none': dayIsDisabled(day),
|
||||
'opacity-50': focusedDate.date() !== day && dayIsDisabled(day),
|
||||
}"
|
||||
x-bind:dusk="'filament.forms.{{ $getStatePath() }}' + '.focusedDate.' + day"
|
||||
class="text-sm leading-loose text-center transition duration-100 ease-in-out rounded-full"
|
||||
></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">
|
||||
<input
|
||||
max="23"
|
||||
min="0"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="hour"
|
||||
class="w-16 p-0 pr-1 text-xl bg-gray-50 text-center text-gray-700 border-0 focus:ring-0 focus:outline-none dark:text-gray-200 dark:bg-gray-800"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.hour"
|
||||
/>
|
||||
|
||||
<span class="text-xl font-medium bg-gray-50 text-gray-700 dark:text-gray-200 dark:bg-gray-800">:</span>
|
||||
|
||||
<input
|
||||
max="59"
|
||||
min="0"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="minute"
|
||||
class="w-16 p-0 pr-1 text-xl text-center bg-gray-50 text-gray-700 border-0 focus:ring-0 focus:outline-none dark:text-gray-200 dark:bg-gray-800"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.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="text-xl font-medium bg-gray-50 text-gray-700 dark:text-gray-200 dark:bg-gray-800">:</span>
|
||||
|
||||
<input
|
||||
max="59"
|
||||
min="0"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="second"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.second"
|
||||
x-model.debounce="minute"
|
||||
class="w-16 p-0 pr-1 text-xl text-center bg-gray-50 text-gray-700 border-0 focus:ring-0 focus:outline-none dark:text-gray-200 dark:bg-gray-800"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.minute"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($hasSeconds())
|
||||
<span class="text-xl font-medium text-gray-700 bg-gray-50 dark:text-gray-200 dark:bg-gray-800">:</span>
|
||||
|
||||
<input
|
||||
max="59"
|
||||
min="0"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
x-model.debounce="second"
|
||||
dusk="filament.forms.{{ $getStatePath() }}.second"
|
||||
class="w-16 p-0 pr-1 text-xl text-center bg-gray-50 text-gray-700 border-0 focus:ring-0 focus:outline-none dark:text-gray-200 dark:bg-gray-800"
|
||||
/>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-filament::input.affixes>
|
||||
</x-dynamic-component>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
@php
|
||||
$affixLabelClasses = [
|
||||
'whitespace-nowrap group-focus-within:text-primary-500',
|
||||
'text-gray-400' => ! $errors->has($getStatePath()),
|
||||
'text-danger-400' => $errors->has($getStatePath()),
|
||||
$inputClasses = [
|
||||
'has-prefix' => $getPrefixLabel() || $getPrefixIcon(),
|
||||
'has-suffix' => $getSuffixLabel() || $getSuffixIcon(),
|
||||
];
|
||||
@endphp
|
||||
|
||||
@@ -31,6 +30,8 @@
|
||||
:attributes="$getExtraInputAttributeBag()->merge([
|
||||
$applyStateBindingModifiers('wire:model') => $getStatePath(),
|
||||
])"
|
||||
:prefix="$getPrefixLabel() || $getPrefixIcon() ? true : false"
|
||||
:suffix="$getSuffixLabel() || $getSuffixIcon() ? true : false"
|
||||
>
|
||||
@unless ($isPlaceholderSelectionDisabled())
|
||||
<option value="">{{ $getPlaceholder() }}</option>
|
||||
@@ -83,6 +84,7 @@
|
||||
x-on:keydown.esc="select.dropdown.isActive && $event.stopPropagation()"
|
||||
wire:ignore
|
||||
{{ $attributes->merge($getExtraAttributes())->merge($getExtraAlpineAttributes()) }}
|
||||
@class($inputClasses)
|
||||
x-bind:class="{
|
||||
'choices--error': (@js($getStatePath()) in $wire.__instance.serverMemo.errors),
|
||||
}"
|
||||
|
||||
@@ -2,6 +2,11 @@
|
||||
$datalistOptions = $getDatalistOptions();
|
||||
$id = $getId();
|
||||
$statePath = $getStatePath();
|
||||
$inputClasses = [
|
||||
'block w-full transition duration-75 shadow-sm focus:border-primary-500 focus:relative focus:z-[1] focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500',
|
||||
'rounded-l-lg' => ! ($getPrefixLabel() || $getPrefixIcon()),
|
||||
'rounded-r-lg' => ! ($getSuffixLabel() || $getSuffixIcon()),
|
||||
];
|
||||
@endphp
|
||||
|
||||
<x-dynamic-component
|
||||
@@ -55,7 +60,7 @@
|
||||
{!! filled($value = $getMinValue()) ? "min=\"{$value}\"" : null !!}
|
||||
{!! $isRequired() ? 'required' : null !!}
|
||||
@endif
|
||||
{{ $getExtraInputAttributeBag()->class(['block w-full transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500']) }}
|
||||
{{ $getExtraInputAttributeBag()->class($inputClasses) }}
|
||||
x-bind:class="{
|
||||
'border-gray-300 dark:border-gray-600': ! (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
'border-danger-600 ring-danger-600': (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
|
||||
@@ -12,6 +12,7 @@ use Illuminate\View\ComponentAttributeBag;
|
||||
class DateTimePicker extends Field
|
||||
{
|
||||
use Concerns\HasPlaceholder;
|
||||
use Concerns\HasAffixes;
|
||||
use HasExtraAlpineAttributes;
|
||||
|
||||
protected string $view = 'filament-forms::components.date-time-picker';
|
||||
|
||||
@@ -9,28 +9,45 @@
|
||||
])
|
||||
|
||||
@php
|
||||
$affixLabelClasses = [
|
||||
'filament-input-affix-label whitespace-nowrap group-focus-within:text-primary-500',
|
||||
'text-gray-400' => blank($statePath),
|
||||
];
|
||||
$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';
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes->class(['filament-input-affix-container flex items-center space-x-2 rtl:space-x-reverse group']) }}>
|
||||
<div {{ $attributes->class(['filament-input-affix-container flex rtl:space-x-reverse group']) }}>
|
||||
@if ($prefixAction && (! $prefixAction->isHidden()))
|
||||
{{ $prefixAction }}
|
||||
<div class="self-stretch flex items-center pr-2">
|
||||
{{ $prefixAction }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($prefixIcon)
|
||||
<x-filament::icon
|
||||
:name="$prefixIcon"
|
||||
size="h-5 w-5"
|
||||
class="filament-input-affix-icon"
|
||||
/>
|
||||
<span
|
||||
@class(array_merge(
|
||||
[$baseAffixClasses],
|
||||
['rounded-l-lg -mr-px'],
|
||||
))
|
||||
@if (filled($statePath))
|
||||
x-bind:class="{
|
||||
'text-gray-400': ! (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
'text-danger-400': (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
}"
|
||||
@endif
|
||||
>
|
||||
<x-filament::icon
|
||||
alias="support::input.affixes.prefix"
|
||||
:name="$prefixIcon"
|
||||
size="h-5 w-5"
|
||||
class="filament-input-affix-icon"
|
||||
/>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($prefix)
|
||||
<span
|
||||
@class($affixLabelClasses)
|
||||
@class([
|
||||
'filament-input-affix-label -mr-px',
|
||||
$baseAffixClasses,
|
||||
'rounded-l-lg' => ! $prefixIcon
|
||||
])
|
||||
@if (filled($statePath))
|
||||
x-bind:class="{
|
||||
'text-gray-400': ! (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
@@ -48,7 +65,11 @@
|
||||
|
||||
@if ($suffix)
|
||||
<span
|
||||
@class($affixLabelClasses)
|
||||
@class([
|
||||
'filament-input-affix-label -ml-px',
|
||||
$baseAffixClasses,
|
||||
'rounded-r-lg' => ! $suffixIcon
|
||||
])
|
||||
@if (filled($statePath))
|
||||
x-bind:class="{
|
||||
'text-gray-400': ! (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
@@ -61,14 +82,30 @@
|
||||
@endif
|
||||
|
||||
@if ($suffixIcon)
|
||||
<x-filament::icon
|
||||
:name="$prefixIcon"
|
||||
size="h-5 w-5"
|
||||
class="filament-input-affix-icon"
|
||||
/>
|
||||
<span
|
||||
@class(array_merge(
|
||||
[$baseAffixClasses],
|
||||
['rounded-r-lg -ml-px'],
|
||||
))
|
||||
@if (filled($statePath))
|
||||
x-bind:class="{
|
||||
'text-gray-400': ! (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
'text-danger-400': (@js($statePath) in $wire.__instance.serverMemo.errors),
|
||||
}"
|
||||
@endif
|
||||
>
|
||||
<x-filament::icon
|
||||
alias="support::input.affixes.suffix"
|
||||
:name="$suffixIcon"
|
||||
size="h-5 w-5"
|
||||
class="filament-input-affix-icon"
|
||||
/>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
@if ($suffixAction && (! $suffixAction->isHidden()))
|
||||
{{ $suffixAction }}
|
||||
<div class="self-stretch flex items-center pl-2">
|
||||
{{ $suffixAction }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
@props([
|
||||
'error' => false,
|
||||
'prefix' => false,
|
||||
'suffix' => false,
|
||||
])
|
||||
|
||||
<select
|
||||
{{ $attributes->class([
|
||||
'filament-select-input text-gray-900 block w-full transition duration-75 rounded-lg shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500',
|
||||
'filament-select-input text-gray-900 block w-full transition duration-75 shadow-sm focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 disabled:opacity-70 dark:bg-gray-700 dark:text-white dark:focus:border-primary-500',
|
||||
'border-gray-300 dark:border-gray-600' => ! $error,
|
||||
'border-danger-600 ring-danger-600' => $error,
|
||||
'rounded-l-lg' => ! $prefix,
|
||||
'rounded-r-lg' => ! $suffix,
|
||||
]) }}
|
||||
>
|
||||
{{ $slot }}
|
||||
|
||||
Reference in New Issue
Block a user