add: inputmode for better UI #2
2 changed files with 7 additions and 0 deletions
|
@ -11,6 +11,7 @@
|
||||||
:required="required"
|
:required="required"
|
||||||
placeholder=" "
|
placeholder=" "
|
||||||
@blur="emit('blur')"
|
@blur="emit('blur')"
|
||||||
|
:inputmode="mode"
|
||||||
/>
|
/>
|
||||||
<label :for="id">{{ label }}</label>
|
<label :for="id">{{ label }}</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -28,6 +29,7 @@ type Props = {
|
||||||
message ?: string
|
message ?: string
|
||||||
label : string
|
label : string
|
||||||
id : string
|
id : string
|
||||||
|
mode ?: 'text' | 'email' | 'search' | 'tel' | 'url' | 'none' | 'numeric' | 'decimal'
|
||||||
}
|
}
|
||||||
|
|
||||||
const {
|
const {
|
||||||
|
@ -35,6 +37,7 @@ const {
|
||||||
required = false,
|
required = false,
|
||||||
step = 0.01,
|
step = 0.01,
|
||||||
min = 1,
|
min = 1,
|
||||||
|
mode = 'text',
|
||||||
} = defineProps<Props>()
|
} = defineProps<Props>()
|
||||||
|
|
||||||
const emit = defineEmits(['blur'])
|
const emit = defineEmits(['blur'])
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
v-model="currentCard.price"
|
v-model="currentCard.price"
|
||||||
id="card_price"
|
id="card_price"
|
||||||
label="Preis"
|
label="Preis"
|
||||||
|
mode="decimal"
|
||||||
:class="{'error': !validFields.price }"
|
:class="{'error': !validFields.price }"
|
||||||
:message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
|
:message="!validFields.price ? 'Muss eine Zahl sein.' : ''"
|
||||||
/>
|
/>
|
||||||
|
@ -34,6 +35,7 @@
|
||||||
v-model="currentCard.roles"
|
v-model="currentCard.roles"
|
||||||
id="card_roles"
|
id="card_roles"
|
||||||
label="Rollen"
|
label="Rollen"
|
||||||
|
mode="decimal"
|
||||||
:class="{'error': !validFields.roles }"
|
:class="{'error': !validFields.roles }"
|
||||||
:message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
|
:message="!validFields.roles ? 'Muss eine Ganzzahl sein.' : ''"
|
||||||
/>
|
/>
|
||||||
|
@ -41,6 +43,7 @@
|
||||||
v-model="currentCard.sheets"
|
v-model="currentCard.sheets"
|
||||||
id="card_sheets"
|
id="card_sheets"
|
||||||
label="Blätter"
|
label="Blätter"
|
||||||
|
mode="decimal"
|
||||||
:class="{'error': !validFields.sheets }"
|
:class="{'error': !validFields.sheets }"
|
||||||
:message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
|
:message="!validFields.sheets ? 'Muss eine Ganzzahl sein.' : ''"
|
||||||
/>
|
/>
|
||||||
|
@ -48,6 +51,7 @@
|
||||||
v-model="currentCard.layers"
|
v-model="currentCard.layers"
|
||||||
id="card_layers"
|
id="card_layers"
|
||||||
label="Lagen"
|
label="Lagen"
|
||||||
|
mode="decimal"
|
||||||
:class="{'error': !validFields.layers }"
|
:class="{'error': !validFields.layers }"
|
||||||
:message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
|
:message="!validFields.layers ? 'Muss eine Ganzzahl sein.' : ''"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue