944 lines
42 KiB
Vue
Executable File
944 lines
42 KiB
Vue
Executable File
<template>
|
|
<AppDoc name="InputNumberDemo" :sources="sources">
|
|
<h5>Import via Module</h5>
|
|
<pre v-code.script><code>
|
|
import InputNumber from 'primevue/inputnumber';
|
|
|
|
</code></pre>
|
|
|
|
<h5>Import via CDN</h5>
|
|
<pre v-code><code>
|
|
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
|
|
|
|
</code></pre>
|
|
|
|
<h5>Getting Started</h5>
|
|
<p>InputNumber is used with the standard v-model directive. Component always provides a number type although formatting on the input is a string.</p>
|
|
|
|
<pre v-code><code>
|
|
<InputNumber v-model="value" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Decimal Mode</h5>
|
|
<p>Format is defined using the <i>mode</i> property, "decimal" is the default value allowing only integers when there is no other configuration.</p>
|
|
<pre v-code><code>
|
|
<InputNumber v-model="value" mode="decimal" />
|
|
|
|
</code></pre>
|
|
|
|
<p>Fractions are configured with the <i>minFractionDigits</i> property. Optionally <i>maxFractionDigits</i> can be used to defined a boundary for the maximum digits.</p>
|
|
<pre v-code><code>
|
|
<InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" />
|
|
<InputNumber v-model="value2" mode="decimal" :minFractionDigits="2" :maxFractionDigits="2" />
|
|
|
|
</code></pre>
|
|
|
|
<p>
|
|
<i>locale</i> option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per
|
|
<a href="https://tools.ietf.org/html/rfc5646">BCP Language Tag</a>.
|
|
</p>
|
|
<pre v-code><code>
|
|
User Locale
|
|
<InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" />
|
|
|
|
United State Locale
|
|
<InputNumber v-model="value2" mode="decimal" locale="en-US" :minFractionDigits="2" />
|
|
|
|
German Locale
|
|
<InputNumber v-model="value3" mode="decimal" locale="de-DE" :minFractionDigits="2" />
|
|
|
|
Indian Locale
|
|
<InputNumber v-model="value4" mode="decimal" locale="en-IN" :minFractionDigits="2" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Currency</h5>
|
|
<p>Currency formatting is specified by setting the <i>mode</i> option to currency and <i>currency</i> property. In addition <i>currencyDisplay</i> option allows how the currency is displayed, valid values are "symbol" (default) or "code".</p>
|
|
<pre v-code><code>
|
|
United States
|
|
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" />
|
|
|
|
Germany
|
|
<InputNumber v-model="value2" mode="currency" currency="EUR" locale="de-DE" />
|
|
|
|
India
|
|
<InputNumber v-model="value3" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
|
|
|
|
Japan
|
|
<InputNumber v-model="value4" mode="currency" currency="JPY" locale="jp-JP" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Prefix and Suffix</h5>
|
|
<p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
|
|
<pre v-code><code>
|
|
Mile
|
|
<InputNumber v-model="value1" suffix=" mi" />
|
|
|
|
Percent
|
|
<InputNumber v-model="value2" prefix="%" />
|
|
|
|
Expiry
|
|
<InputNumber v-model="value3" prefix="Expires in " suffix=" days" />
|
|
|
|
Temperature
|
|
<InputNumber v-model="value4" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Buttons</h5>
|
|
<p>
|
|
Spinner buttons is enabled using the <i>showButtons</i> options and layout is defined with the <i>buttonLayout</i>. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up
|
|
and down arrow keys can be used to spin the values with keyboard.
|
|
</p>
|
|
<pre v-code><code>
|
|
Stacked
|
|
<InputNumber v-model="value1" showButtons mode="currency" currency="USD" />
|
|
|
|
Horizontal
|
|
<InputNumber v-model="value2" showButtons buttonLayout="horizontal"
|
|
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
|
|
|
|
Vertical
|
|
<InputNumber v-model="value3" mode="decimal" showButtons buttonLayout="vertical"
|
|
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Step</h5>
|
|
<p>Step factor is 1 by default and can be customized with <i>step</i> option.</p>
|
|
<pre v-code><code>
|
|
<InputNumber v-model="value" :step="0.25" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Min and Max Boundaries</h5>
|
|
<p>Value to be entered can be restricted by configuring the <i>min</i> and <i>max</i> options.</p>
|
|
<pre v-code><code>
|
|
<InputNumber v-model="value" :min="0" :max="100" />
|
|
|
|
</code></pre>
|
|
|
|
<h5>Properties</h5>
|
|
<p>InputNumber passes any valid attribute to the underlying input element.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>modelValue</td>
|
|
<td>number</td>
|
|
<td>null</td>
|
|
<td>Value of the component.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>format</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>Whether to format the value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>showButtons</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Displays spinner buttons.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>buttonLayout</td>
|
|
<td>string</td>
|
|
<td>stacked</td>
|
|
<td>Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".</td>
|
|
</tr>
|
|
<tr>
|
|
<td>incrementButtonClass</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Style class of the increment button.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>decrementButtonClass</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Style class of the decrement button.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>incrementButtonIcon</td>
|
|
<td>string</td>
|
|
<td>pi pi-angle-up</td>
|
|
<td>Style class of the increment button.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>decrementButtonIcon</td>
|
|
<td>string</td>
|
|
<td>pi pi-angle-down</td>
|
|
<td>Style class of the decrement button.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>locale</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Locale to be used in formatting.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>localeMatcher</td>
|
|
<td>string</td>
|
|
<td>best fit</td>
|
|
<td>
|
|
The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">Locale Negotation</a> for details.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>mode</td>
|
|
<td>string</td>
|
|
<td>decimal</td>
|
|
<td>Defines the behavior of the component, valid values are "decimal" and "currency".</td>
|
|
</tr>
|
|
<tr>
|
|
<td>prefix</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Text to display before the value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>suffix</td>
|
|
<td>string</td>
|
|
<td>decimal</td>
|
|
<td>Text to display after the value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>currency</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>
|
|
The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro, or
|
|
"CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>currencyDisplay</td>
|
|
<td>string</td>
|
|
<td>symbol</td>
|
|
<td>
|
|
How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, "code" to use the ISO currency code, "name" to use a localized currency name such as "dollar";
|
|
the default is "symbol".
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>useGrouping</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>minFractionDigits</td>
|
|
<td>number</td>
|
|
<td>null</td>
|
|
<td>
|
|
The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by
|
|
the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that information).
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>maxFractionDigits</td>
|
|
<td>number</td>
|
|
<td>null</td>
|
|
<td>
|
|
The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of
|
|
minimumFractionDigits and the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO 4217 currency code list</a> (2 if the list doesn't provide that
|
|
information).
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>min</td>
|
|
<td>number</td>
|
|
<td>null</td>
|
|
<td>Mininum boundary value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>max</td>
|
|
<td>number</td>
|
|
<td>null</td>
|
|
<td>Maximum boundary value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>step</td>
|
|
<td>number</td>
|
|
<td>1</td>
|
|
<td>Step factor to increment/decrement the value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>allowEmpty</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>Determines whether the input field is empty.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>highlightOnFocus</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Highlights automatically the input value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>When present, it specifies that the element should be disabled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>readonly</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>When present, it specifies that an input field is read-only.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>placeholder</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Placeholder text for the input.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>inputId</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Style class of the component input field.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>inputStyle</td>
|
|
<td>any</td>
|
|
<td>null</td>
|
|
<td>Inline style of the input field.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>inputClass</td>
|
|
<td>string</td>
|
|
<td>null</td>
|
|
<td>Style class of the input field.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>inputProps</td>
|
|
<td>object</td>
|
|
<td>null</td>
|
|
<td>Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>incrementButtonProps</td>
|
|
<td>object</td>
|
|
<td>null</td>
|
|
<td>Uses to pass all properties of the HTMLButtonElement to increment button inside the component.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>decrementButtonProps</td>
|
|
<td>object</td>
|
|
<td>null</td>
|
|
<td>Uses to pass all properties of the HTMLButtonElement to decrement button inside the component.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Methods</h5>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Parameters</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>getFormatter</td>
|
|
<td>-</td>
|
|
<td>Returns Intl.NumberFormat object.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Events</h5>
|
|
<p>Any valid event such as focus and blur are passed to the underlying input element. Following are the additional events to configure the component.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Parameters</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>input</td>
|
|
<td>
|
|
event.originalEvent: Browser event <br />
|
|
event.value: New value
|
|
</td>
|
|
<td>Callback to invoke when the value is entered.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>focus</td>
|
|
<td>event: Focus event</td>
|
|
<td>Callback to invoke on focus of input field.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>blur</td>
|
|
<td>
|
|
event.originalEvent: Blur event <br />
|
|
event.value: Input value
|
|
</td>
|
|
<td>Callback to invoke on blur of input field.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Styling</h5>
|
|
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
|
<div class="doc-tablewrapper">
|
|
<table class="doc-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Element</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>p-inputnumber</td>
|
|
<td>Container element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputnumber-stacked</td>
|
|
<td>Container element with stacked buttons.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputnumber-horizontal</td>
|
|
<td>Container element with horizontal buttons.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputnumber-vertical</td>
|
|
<td>Container element with vertical buttons.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputnumber-input</td>
|
|
<td>Input element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputnumber-button</td>
|
|
<td>Input element</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputnumber-button-up</td>
|
|
<td>Increment button</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputnumber-button-down</td>
|
|
<td>Decrement button</td>
|
|
</tr>
|
|
<tr>
|
|
<td>p-inputnumber-button-icon</td>
|
|
<td>Button icon</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h5>Accessibility</h5>
|
|
<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>
|
|
<label for="price">Price</label>
|
|
<InputNumber inputId="price" />
|
|
|
|
<span id="label_number">Number</span>
|
|
<InputNumber aria-labelledby="label_number" />
|
|
|
|
<InputNumber aria-label="Number" />
|
|
|
|
</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>
|
|
|
|
<h5>Dependencies</h5>
|
|
<p>None.</p>
|
|
</AppDoc>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
sources: {
|
|
'options-api': {
|
|
tabName: 'Options API Source',
|
|
content: `
|
|
<template>
|
|
<div>
|
|
<h5>Numerals</h5>
|
|
<div class="p-fluid grid formgrid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="integeronly">Integer Only</label>
|
|
<InputNumber inputId="integeronly" v-model="value1" />
|
|
</div>
|
|
<div class="field col-12 md:col-3">
|
|
<label for="withoutgrouping">Without Grouping</label>
|
|
<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 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 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 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 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 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 inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Currency</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="currency-us">United States</label>
|
|
<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 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 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 inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Prefix and Suffix</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="mile">Mile</label>
|
|
<InputNumber inputId="mile" v-model="value13" suffix=" mi" />
|
|
</div>
|
|
<div class="field col-12 md:col-3">
|
|
<label for="percent">Percent</label>
|
|
<InputNumber inputId="percent" v-model="value14" prefix="%" />
|
|
</div>
|
|
<div class="field col-12 md:col-3">
|
|
<label for="expiry">Expiry</label>
|
|
<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 inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Buttons</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="stacked">Stacked</label>
|
|
<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 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 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 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>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
value1: 42723,
|
|
value2: 58151,
|
|
value3: 2351.35,
|
|
value4: 50,
|
|
value5: 151351,
|
|
value6: 115744,
|
|
value7: 635524,
|
|
value8: 732762,
|
|
value9: 1500,
|
|
value10: 2500,
|
|
value11: 4250,
|
|
value12: 5002,
|
|
value13: 20,
|
|
value14: 50,
|
|
value15: 10,
|
|
value16: 20,
|
|
value17: 20,
|
|
value18: 10.50,
|
|
value19: 25,
|
|
value20: 50
|
|
}
|
|
}
|
|
}
|
|
<\\/script>
|
|
`
|
|
},
|
|
'composition-api': {
|
|
tabName: 'Composition API Source',
|
|
content: `
|
|
<template>
|
|
<div>
|
|
<h5>Numerals</h5>
|
|
<div class="p-fluid grid formgrid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="integeronly">Integer Only</label>
|
|
<InputNumber inputId="integeronly" v-model="value1" />
|
|
</div>
|
|
<div class="field col-12 md:col-3">
|
|
<label for="withoutgrouping">Without Grouping</label>
|
|
<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 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 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 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 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 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 inputId="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Currency</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="currency-us">United States</label>
|
|
<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 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 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 inputId="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Prefix and Suffix</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="mile">Mile</label>
|
|
<InputNumber inputId="mile" v-model="value13" suffix=" mi" />
|
|
</div>
|
|
<div class="field col-12 md:col-3">
|
|
<label for="percent">Percent</label>
|
|
<InputNumber inputId="percent" v-model="value14" prefix="%" />
|
|
</div>
|
|
<div class="field col-12 md:col-3">
|
|
<label for="expiry">Expiry</label>
|
|
<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 inputId="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Buttons</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="stacked">Stacked</label>
|
|
<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 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 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 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>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from 'vue';
|
|
|
|
export default {
|
|
setup() {
|
|
const value1 = ref(42723);
|
|
const value2 = ref(58151);
|
|
const value3 = ref(2351.35);
|
|
const value4 = ref(50);
|
|
const value5 = ref(151351);
|
|
const value6 = ref(115744);
|
|
const value7 = ref(635524);
|
|
const value8 = ref(732762);
|
|
const value9 = ref(1500);
|
|
const value10 = ref(2500);
|
|
const value11 = ref(4250);
|
|
const value12 = ref(5002);
|
|
const value13 = ref(20);
|
|
const value14 = ref(50);
|
|
const value15 = ref(10);
|
|
const value16 = ref(20);
|
|
const value17 = ref(20);
|
|
const value18 = ref(10.50);
|
|
const value19 = ref(25);
|
|
const value20 = ref(50);
|
|
|
|
return { value1, value2, value3, value4, value5, value6, value7, value8, value9, value10,
|
|
value11, value12, value13, value14, value15, value16, value17, value18, value19, value20 }
|
|
}
|
|
}
|
|
<\\/script>
|
|
`
|
|
},
|
|
'browser-source': {
|
|
tabName: 'Browser Source',
|
|
content: `<div id="app">
|
|
<h5>Numerals</h5>
|
|
<div class="p-fluid grid formgrid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="integeronly">Integer Only</label>
|
|
<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 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 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 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 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 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 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 input-id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Currency</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="currency-us">United States</label>
|
|
<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 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 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 input-id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Prefix and Suffix</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="mile">Mile</label>
|
|
<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 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 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 input-id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Buttons</h5>
|
|
<div class="grid p-fluid">
|
|
<div class="field col-12 md:col-3">
|
|
<label for="stacked">Stacked</label>
|
|
<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 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 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 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>
|
|
|
|
<script type="module">
|
|
const { createApp, ref } = Vue;
|
|
|
|
const App = {
|
|
setup() {
|
|
const value1 = ref(42723);
|
|
const value2 = ref(58151);
|
|
const value3 = ref(2351.35);
|
|
const value4 = ref(50);
|
|
const value5 = ref(151351);
|
|
const value6 = ref(115744);
|
|
const value7 = ref(635524);
|
|
const value8 = ref(732762);
|
|
const value9 = ref(1500);
|
|
const value10 = ref(2500);
|
|
const value11 = ref(4250);
|
|
const value12 = ref(5002);
|
|
const value13 = ref(20);
|
|
const value14 = ref(50);
|
|
const value15 = ref(10);
|
|
const value16 = ref(20);
|
|
const value17 = ref(20);
|
|
const value18 = ref(10.50);
|
|
const value19 = ref(25);
|
|
const value20 = ref(50);
|
|
|
|
return { value1, value2, value3, value4, value5, value6, value7, value8, value9, value10,
|
|
value11, value12, value13, value14, value15, value16, value17, value18, value19, value20 }
|
|
},
|
|
components: {
|
|
"p-inputnumber": primevue.inputnumber
|
|
}
|
|
};
|
|
|
|
createApp(App)
|
|
.use(primevue.config.default)
|
|
.mount("#app");
|
|
<\\/script>
|
|
`
|
|
}
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|