vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Accessibility for InputNumber

pull/2770/head
Tuğçe Küçükoğlu 2022-07-06 13:47:43 +03:00
parent 2972ed0d73
commit 519359e2d4
3 changed files with 173 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/inputnumber/InputNumber.vue
View File

@ -1,13 +1,13 @@
<template>
<span :class="containerClass" :style="style">
<INInputText ref="input" :class="['p-inputnumber-input', inputClass]" :style="inputStyle" :value="formattedValue" v-bind="$attrs" :aria-valumin="min" :aria-valuemax="max" :readonly="readonly"
@input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur"/>
<span :class="containerClass">
<INInputText ref="input" class="p-inputnumber-input" role="spinbutton" :id="inputId" :value="formattedValue" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :readonly="readonly"
@input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur" v-bind="inputProps"/>
<span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
<INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="$attrs.disabled" />
<INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="$attrs.disabled" />
<INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" v-bind="incrementButtonProps" />
<INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="disabled" v-bind="decrementButtonProps" />
</span>
<INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="$attrs.disabled" />
<INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="$attrs.disabled" />
<INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="disabled" v-bind="incrementButtonProps" />
<INButton :class="downButtonClass" :icon="decrementButtonIcon" v-on="downButtonListeners" v-if="showButtons && buttonLayout !== 'stacked'" :disabled="disabled" v-bind="decrementButtonProps" />
</span>
</template>
@ -17,7 +17,6 @@ import Button from 'primevue/button';
export default {
name: 'InputNumber',
inheritAttrs: false,
emits: ['update:modelValue', 'input', 'focus', 'blur'],
props: {
modelValue: {
@ -112,10 +111,14 @@ export default {
type: Boolean,
default: false
},
style: null,
class: null,
inputStyle: null,
inputClass: null
disabled: {
type: Boolean,
default: false
},
inputId: null,
inputProps: null,
incrementButtonProps: null,
decrementButtonProps: null
},
numberFormat: null,
_numeral: null,
@ -327,24 +330,24 @@ export default {
}
},
onUpButtonMouseDown(event) {
if (!this.$attrs.disabled) {
if (!this.disabled) {
this.$refs.input.$el.focus();
this.repeat(event, null, 1);
event.preventDefault();
}
},
onUpButtonMouseUp() {
if (!this.$attrs.disabled) {
if (!this.disabled) {
this.clearTimer();
}
},
onUpButtonMouseLeave() {
if (!this.$attrs.disabled) {
if (!this.disabled) {
this.clearTimer();
}
},
onUpButtonKeyUp() {
if (!this.$attrs.disabled) {
if (!this.disabled) {
this.clearTimer();
}
},
@ -354,24 +357,24 @@ export default {
}
},
onDownButtonMouseDown(event) {
if (!this.$attrs.disabled) {
if (!this.disabled) {
this.$refs.input.$el.focus();
this.repeat(event, null, -1);
event.preventDefault();
}
},
onDownButtonMouseUp() {
if (!this.$attrs.disabled) {
if (!this.disabled) {
this.clearTimer();
}
},
onDownButtonMouseLeave() {
if (!this.$attrs.disabled) {
if (!this.disabled) {
this.clearTimer();
}
},
onDownButtonKeyUp() {
if (!this.$attrs.disabled) {
if (!this.disabled) {
this.clearTimer();
}
},
@ -536,6 +539,22 @@ export default {
}
break;
//home
case 36:
if (this.min) {
this.updateModel(event, this.min);
event.preventDefault();
}
break;
//end
case 35:
if (this.max) {
this.updateModel(event, this.max);
event.preventDefault();
}
break;
default:
break;
}
@ -947,7 +966,7 @@ export default {
},
computed: {
containerClass() {
return ['p-inputnumber p-component p-inputwrapper', this.class, {
return ['p-inputnumber p-component p-inputwrapper', {
'p-inputwrapper-filled': this.filled,
'p-inputwrapper-focus': this.focused,
'p-inputnumber-buttons-stacked': this.showButtons && this.buttonLayout === 'stacked',
@ -957,7 +976,7 @@ export default {
},
upButtonClass() {
return ['p-inputnumber-button p-inputnumber-button-up', this.incrementButtonClass, {
return ['p-inputnumber-button p-inputnumber-button-up', {
'p-disabled': this.showButtons && this.max !== null && this.maxBoundry()
}];
},

40
src/views/inputnumber/InputNumberDemo.vue
View File

@ -15,36 +15,36 @@
<div class="p-fluid grid formgrid">
<div class="field col-12 md:col-3">
<label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" />
<InputNumber inputId="integeronly" v-model="value1" />
</div>
<div class="field col-12 md:col-3">
<label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
<InputNumber inputId="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div>
<div class="field col-12 md:col-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label>
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
<InputNumber inputId="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div>
<div class="field col-12 md:col-3">
<label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
<InputNumber inputId="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
<InputNumber inputId="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
<InputNumber inputId="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
<InputNumber inputId="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div>
<div class="field col-12 md:col-3">
<label for="locale-indian">Indian Locale</label>
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
<InputNumber inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div>
</div>
@ -52,19 +52,19 @@
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
<InputNumber inputId="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
<InputNumber inputId="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
<InputNumber inputId="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
<InputNumber inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div>
</div>
@ -72,19 +72,19 @@
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" />
<InputNumber inputId="mile" v-model="value13" suffix=" mi" />
</div>
<div class="field col-12 md:col-3">
<label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" />
<InputNumber inputId="percent" v-model="value14" prefix="%" />
</div>
<div class="field col-12 md:col-3">
<label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
<InputNumber inputId="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div>
<div class="field col-12 md:col-3">
<label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
<InputNumber inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
</div>
</div>
@ -92,22 +92,22 @@
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
<InputNumber inputId="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div>
<div class="field col-12 md:col-3">
<label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
<InputNumber inputId="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div>
<div class="field col-12 md:col-3">
<label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
<InputNumber inputId="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div>
</div>
<div class="field col-12 md:col-3">
<label for="vertical" style="display: block">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
<InputNumber inputId="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
</div>
</div>

172
src/views/inputnumber/InputNumberDoc.vue
View File

@ -411,6 +411,58 @@ Vertical
</table>
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
The input element uses <i>spinbutton</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.</p>
<pre v-code><code>
&lt;label for="price"&gt;Price&lt;/label&gt;
&lt;InputNumber inputId="price" /&gt;
&lt;span id="label_number"&gt;Number&lt;/span&gt;
&lt;InputNumber aria-labelledby="label_number" /&gt;
&lt;InputNumber aria-label="Number" /&gt;
</code></pre>
<h6>Keyboard Support</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>tab</i></td>
<td>Moves focus to the input.</td>
</tr>
<tr>
<td><i>up arrow</i></td>
<td>Increments the value.</td>
</tr>
<tr>
<td><i>down arrow</i></td>
<td>Decrements the value.</td>
</tr>
<tr>
<td><i>home</i></td>
<td>Set the minimum value if provided.</td>
</tr>
<tr>
<td><i>end</i></td>
<td>Set the maximum value if provided.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>
@ -430,36 +482,36 @@ export default {
<div class="p-fluid grid formgrid">
<div class="field col-12 md:col-3">
<label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" />
<InputNumber inputId="integeronly" v-model="value1" />
</div>
<div class="field col-12 md:col-3">
<label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
<InputNumber inputId="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div>
<div class="field col-12 md:col-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label>
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
<InputNumber inputId="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div>
<div class="field col-12 md:col-3">
<label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
<InputNumber inputId="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
<InputNumber inputId="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
<InputNumber inputId="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
<InputNumber inputId="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div>
<div class="field col-12 md:col-3">
<label for="locale-indian">Indian Locale</label>
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
<InputNumber inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div>
</div>
@ -467,19 +519,19 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
<InputNumber inputId="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
<InputNumber inputId="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
<InputNumber inputId="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
<InputNumber inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div>
</div>
@ -487,19 +539,19 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" />
<InputNumber inputId="mile" v-model="value13" suffix=" mi" />
</div>
<div class="field col-12 md:col-3">
<label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" />
<InputNumber inputId="percent" v-model="value14" prefix="%" />
</div>
<div class="field col-12 md:col-3">
<label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
<InputNumber inputId="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div>
<div class="field col-12 md:col-3">
<label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
<InputNumber inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
</div>
</div>
@ -507,22 +559,22 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
<InputNumber inputId="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div>
<div class="field col-12 md:col-3">
<label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
<InputNumber inputId="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div>
<div class="field col-12 md:col-3">
<label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
<InputNumber inputId="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div>
</div>
<div class="field col-12 md:col-3">
<label for="vertical" style="display: block">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
<InputNumber inputId="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
</div>
</div>
@ -567,36 +619,36 @@ export default {
<div class="p-fluid grid formgrid">
<div class="field col-12 md:col-3">
<label for="integeronly">Integer Only</label>
<InputNumber id="integeronly" v-model="value1" />
<InputNumber inputId="integeronly" v-model="value1" />
</div>
<div class="field col-12 md:col-3">
<label for="withoutgrouping">Without Grouping</label>
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
<InputNumber inputId="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
</div>
<div class="field col-12 md:col-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label>
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
<InputNumber inputId="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div>
<div class="field col-12 md:col-3">
<label for="minmax">Min-Max Boundaries</label>
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
<InputNumber inputId="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-user">User Locale</label>
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
<InputNumber inputId="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-us">United States Locale</label>
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
<InputNumber inputId="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div>
<div class="field col-12 md:col-3">
<label for="locale-german">German Locale</label>
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
<InputNumber inputId="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div>
<div class="field col-12 md:col-3">
<label for="locale-indian">Indian Locale</label>
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
<InputNumber inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div>
</div>
@ -604,19 +656,19 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="currency-us">United States</label>
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
<InputNumber inputId="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-germany">Germany</label>
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
<InputNumber inputId="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-india">India</label>
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
<InputNumber inputId="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div>
<div class="field col-12 md:col-3">
<label for="currency-japan">Japan</label>
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
<InputNumber inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div>
</div>
@ -624,19 +676,19 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="mile">Mile</label>
<InputNumber id="mile" v-model="value13" suffix=" mi" />
<InputNumber inputId="mile" v-model="value13" suffix=" mi" />
</div>
<div class="field col-12 md:col-3">
<label for="percent">Percent</label>
<InputNumber id="percent" v-model="value14" prefix="%" />
<InputNumber inputId="percent" v-model="value14" prefix="%" />
</div>
<div class="field col-12 md:col-3">
<label for="expiry">Expiry</label>
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
<InputNumber inputId="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
</div>
<div class="field col-12 md:col-3">
<label for="temperature">Temperature</label>
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
<InputNumber inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
</div>
</div>
@ -644,22 +696,22 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="stacked">Stacked</label>
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
<InputNumber inputId="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
</div>
<div class="field col-12 md:col-3">
<label for="horizontal">Horizontal with Step</label>
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
<InputNumber inputId="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
</div>
<div class="field col-12 md:col-3">
<label for="minmax-buttons">Min-Max Boundaries</label>
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
<InputNumber inputId="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div>
</div>
<div class="field col-12 md:col-3">
<label for="vertical" style="display: block">Vertical</label>
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
<InputNumber inputId="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
</div>
</div>
@ -705,36 +757,36 @@ export default {
<div class="p-fluid grid formgrid">
<div class="field col-12 md:col-3">
<label for="integeronly">Integer Only</label>
<p-inputnumber id="integeronly" v-model="value1"></p-inputnumber>
<p-inputnumber input-id="integeronly" v-model="value1"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="withoutgrouping">Without Grouping</label>
<p-inputnumber id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
<p-inputnumber input-id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="minmaxfraction">Min-Max Fraction Digits</label>
<p-inputnumber id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
<p-inputnumber input-id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="minmax">Min-Max Boundaries</label>
<p-inputnumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
<p-inputnumber input-id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="locale-user">User Locale</label>
<p-inputnumber id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
<p-inputnumber input-id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="locale-us">United States Locale</label>
<p-inputnumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
<p-inputnumber input-id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="locale-german">German Locale</label>
<p-inputnumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
<p-inputnumber input-id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="locale-indian">Indian Locale</label>
<p-inputnumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
<p-inputnumber input-id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
</div>
</div>
@ -742,19 +794,19 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="currency-us">United States</label>
<p-inputnumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
<p-inputnumber input-id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="currency-germany">Germany</label>
<p-inputnumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
<p-inputnumber input-id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="currency-india">India</label>
<p-inputnumber id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
<p-inputnumber input-id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="currency-japan">Japan</label>
<p-inputnumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
<p-inputnumber input-id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
</div>
</div>
@ -762,19 +814,19 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="mile">Mile</label>
<p-inputnumber id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
<p-inputnumber input-id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="percent">Percent</label>
<p-inputnumber id="percent" v-model="value14" prefix="%"></p-inputnumber>
<p-inputnumber input-id="percent" v-model="value14" prefix="%"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="expiry">Expiry</label>
<p-inputnumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
<p-inputnumber input-id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="temperature">Temperature</label>
<p-inputnumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
<p-inputnumber input-id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
</div>
</div>
@ -782,22 +834,22 @@ export default {
<div class="grid p-fluid">
<div class="field col-12 md:col-3">
<label for="stacked">Stacked</label>
<p-inputnumber id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
<p-inputnumber input-id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="horizontal">Horizontal with Step</label>
<p-inputnumber id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
<p-inputnumber input-id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
decrement-button-class="p-button-danger" increment-button-class="p-button-success" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus" mode="currency" currency="EUR"></p-inputnumber>
</div>
<div class="field col-12 md:col-3">
<label for="minmax-buttons">Min-Max Boundaries</label>
<p-inputnumber id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
<p-inputnumber input-id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
</div>
</div>
<div class="field col-12 md:col-3">
<label for="vertical" style="display: block">Vertical</label>
<p-inputnumber id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
<p-inputnumber input-id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
decrement-button-class="p-button-secondary" increment-button-class="p-button-secondary" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus"></p-inputnumber>
</div>
</div>