Add `autocapitalization` and `inputmode` settings to some `input` elements

This commit is contained in:
Christopher C. Wells 2021-03-27 12:55:22 -07:00
parent 594f5c6e4b
commit 8c8a46c4f6
8 changed files with 40 additions and 35 deletions

View File

@ -11,10 +11,12 @@
x-ref="ingredients_type"/>
<x-inputs.input type="text"
name="ingredients[name][]"
class="w-full"
value="{{ $defaultName ?? '' }}"
placeholder="Search..."
autocomplete="off"
class="w-full"
autocapitalize="none"
inputmode="search"
x-ref="ingredients_name"
x-spread="search" />
</div>

View File

@ -1,11 +1,13 @@
<div x-data="searchView()" x-init="loadMore()">
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
<nav class="md:w-1/4">
<x-inputs.input type="text"
name="search"
placeholder="Search..."
autocomplete="off"
<x-inputs.input name="search"
type="text"
class="w-full mb-4"
autocomplete="off"
autocapitalize="none"
inputmode="search"
placeholder="Search..."
@input.debounce.400ms="search($event)" />
<details open>
<summary>Filters</summary>

View File

@ -7,14 +7,15 @@
x-model="tags"/>
<x-inputs.label for="tag_picker" value="Tags"/>
<div class="flex flex-row items-center">
<x-inputs.input
type="text"
name="tag_picker"
class="mr-2"
x-model="searchTerm"
x-ref="searchTerm"
@input="search($event.target.value)"
placeholder="Enter some tags..." />
<x-inputs.input name="tag_picker"
type="text"
class="mr-2"
autocapitalize="none"
inputmode="search"
placeholder="Enter some tags..."
x-model="searchTerm"
x-ref="searchTerm"
@input="search($event.target.value)" />
<div x-show="open">
<div class="absolute z-40 left-0 mt-2">
<div class="py-1 text-sm bg-white rounded shadow-lg border border-gray-300">

View File

@ -13,10 +13,10 @@
<div class="flex-auto">
<x-inputs.label for="name" value="Name"/>
<x-inputs.input id="name"
class="block mt-1 w-full"
<x-inputs.input name="name"
type="text"
name="name"
class="block mt-1 w-full"
autocapitalize="none"
:value="old('name', $food->name)"
required/>
</div>
@ -25,10 +25,10 @@
<div class="flex-auto">
<x-inputs.label for="detail" value="Detail"/>
<x-inputs.input id="detail"
class="block mt-1 w-full"
<x-inputs.input name="detail"
type="text"
name="detail"
class="block mt-1 w-full"
autocapitalize="none"
:value="old('detail', $food->detail)"/>
</div>
@ -36,10 +36,9 @@
<div class="flex-auto">
<x-inputs.label for="brand" value="Brand"/>
<x-inputs.input id="brand"
class="block mt-1 w-full"
<x-inputs.input name="brand"
type="text"
name="brand"
class="block mt-1 w-full"
:value="old('brand', $food->brand)"/>
</div>
</div>
@ -49,10 +48,9 @@
<div>
<x-inputs.label for="serving_size" value="Serving size"/>
<x-inputs.input id="serving_size"
class="block mt-1 w-full"
<x-inputs.input name="serving_size"
type="text"
name="serving_size"
class="block mt-1 w-full"
size="10"
:value="old('serving_size', $food->serving_size_formatted)"
required/>
@ -75,9 +73,10 @@
<x-inputs.label for="serving_unit_name" value="Serving unit name"/>
<x-inputs.input name="serving_unit_name"
placeholder="e.g. clove, egg"
class="block mt-1 w-full"
type="text"
autocapitalize="none"
class="block mt-1 w-full"
placeholder="e.g. clove, egg"
size="10"
:value="old('serving_unit_name', $food->serving_unit_name)"/>
</div>
@ -86,11 +85,10 @@
<div>
<x-inputs.label for="serving_weight" value="Serving weight (g)"/>
<x-inputs.input id="serving_weight"
class="block mt-1 w-full"
<x-inputs.input name="serving_weight"
type="number"
step="any"
name="serving_weight"
class="block mt-1 w-full"
size="10"
:value="old('serving_weight', $food->serving_weight)"
required/>
@ -106,8 +104,8 @@
<x-inputs.input name="{{ $nutrient['value'] }}"
type="number"
class="block w-full mt-1 md:w-5/6"
step="any"
class="block w-full mt-1 md:w-5/6"
:value="old($nutrient['value'], $food->{$nutrient['value']})"/>
</div>
@endforeach
@ -123,6 +121,7 @@
<x-inputs.input name="source"
type="text"
class="block mt-1 w-full"
inputmode="url"
:value="old('source', $food->source)" />
</div>

View File

@ -37,7 +37,7 @@
</x-inputs.select>
</div>
<!-- Name -->
<!-- Trackable -->
<div class="flex-auto">
<x-inputs.label for="name" value="Trackable" />
<x-inputs.select name="name"

View File

@ -54,11 +54,10 @@
<x-inputs.label for="{{ $nutrient['value'] }}"
:value="ucfirst($nutrient['value']) . ($nutrient['unit'] ? ' (' . $nutrient['unit'] . ')' : '')"/>
<x-inputs.input id="{{ $nutrient['value'] }}"
class="block w-full"
<x-inputs.input name="{{ $nutrient['value'] }}"
type="number"
step="any"
name="{{ $nutrient['value'] }}"
class="block w-full"
:value="old($nutrient['value'])"/>
</div>
@endforeach

View File

@ -116,6 +116,7 @@
<x-inputs.input name="source"
type="text"
class="block mt-1 w-full"
inputmode="url"
:value="old('source', $recipe->source)" />
</div>

View File

@ -28,6 +28,7 @@
<x-inputs.input name="ingredients[detail][]"
type="text"
class="block"
autocapitalize="none"
placeholder="Detail (diced, chopped, etc.)"
:value="$detail ?? null" />
</div>