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

Initiated InputNumber

pull/310/head
cagataycivici 2020-04-18 13:11:58 +03:00
parent 0a12e2330e
commit 8314c182ee
6 changed files with 979 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/AppMenu.vue
View File

@ -15,6 +15,7 @@
<router-link to="/editor">Editor</router-link>
<router-link to="/inputgroup">InputGroup</router-link>
<router-link to="/inputmask">InputMask</router-link>
<router-link to="/inputnumber">InputNumber</router-link>
<router-link to="/inputswitch">InputSwitch</router-link>
<router-link to="/inputtext">InputText</router-link>
<router-link to="/listbox">Listbox</router-link>

729
src/components/inputnumber/InputNumber.vue Normal file
View File

@ -0,0 +1,729 @@
<template>
<span :class="containerClass">
<INInputText ref="input" class="p-inputnumber-input" v-bind="$attrs" v-on="listeners" :aria-valumin="min" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy" />
<span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
<Button :class="upButtonClass" icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="$attrs.disabled" />
<Button :class="downButtonClass" icon="decrementButtonIcon" v-on="downButtonListeners" :disabled="$attrs.disabled" />
</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" />
</span>
</template>
<script>
import InputText from '../inputtext/InputText';
import Button from '../button/Button';
export default {
inheritAttrs: false,
props: {
value: {
type: Number,
default: null
},
format: {
type: Boolean,
default: true
},
showButtons: {
type: Boolean,
default: false
},
buttonLayout: {
type: String,
default: 'stacked'
},
incrementButtonClass: {
type: String,
default: null,
},
decrementButtonClass: {
type: String,
default: null,
},
incrementButtonIcon: {
type: String,
default: 'pi pi-caret-up',
},
decrementButtonIcon: {
type: String,
default: 'pi pi-caret-down',
},
locale: {
type: String,
default: undefined
},
localeMatcher: {
type: String,
default: undefined
},
mode: {
type: String,
default: 'decimal'
},
suffix: {
type: String,
default: null
},
prefix: {
type: String,
default: null
},
currency: {
type: String,
default: undefined
},
currencyDisplay: {
type: String,
default: undefined
},
useGrouping: {
type: Boolean,
default: true
},
minFractionDigits: {
type: Number,
default: undefined
},
maxFractionDigits: {
type: Number,
default: undefined
},
min: {
type: Number,
default: null
},
max: {
type: Number,
default: null
},
step: {
type: Number,
default: null
},
ariaLabelledBy: {
type: String,
default: null
}
},
numberFormat: null,
_numeral: null,
_decimal: null,
_group: null,
_minusSign: null,
_currency: null,
_suffix: null,
_prefix: null,
_index: null,
isSpecialChar: null,
timer: null,
watch: {
value(newValue) {
const formattedValue = this.formatValue(newValue);
if (this.$refs.input.$el.value !== formattedValue) {
this.$refs.input.$el.value = formattedValue;
this.$refs.input.$el.setAttribute('aria-valuenow', this.props.value);
}
}
},
created() {
this.numberFormat = new Intl.NumberFormat(this.locale, this.getOptions());
const numerals = [...new Intl.NumberFormat(this.locale, {useGrouping: false}).format(9876543210)].reverse();
const index = new Map(numerals.map((d, i) => [d, i]));
this._numeral = new RegExp(`[${numerals.join('')}]`, 'g');
this._decimal = this.getDecimalExpression();
this._group = this.getGroupingExpression();
this._minusSign = this.getMinusSignExpression();
this._currency = this.getCurrencyExpression();
this._suffix = new RegExp(`[${this.suffix||''}]`, 'g');
this._prefix = new RegExp(`[${this.prefix||''}]`, 'g');
this._index = d => index.get(d);
},
mounted() {
this.$refs.input.$el.value = this.formatValue(this.value);
this.$refs.input.$el.setAttribute('aria-valuenow', this.value);
},
methods: {
getOptions() {
return {
localeMatcher: this.localeMatcher,
style: this.mode,
currency: this.currency,
currencyDisplay: this.currencyDisplay,
useGrouping: this.useGrouping,
minimumFractionDigits: this.minFractionDigits,
maximumFractionDigits: this.maxFractionDigits
};
},
getDecimalExpression() {
const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false});
return new RegExp(`[${formatter.format(1.1).trim().replace(this._numeral, '')}]`, 'g');
},
getGroupingExpression() {
const formatter = new Intl.NumberFormat(this.locale, {useGrouping: true});
return new RegExp(`[${formatter.format(1000).trim().replace(this._numeral, '')}]`, 'g');
},
getMinusSignExpression() {
const formatter = new Intl.NumberFormat(this.locale, {useGrouping: false});
return new RegExp(`[${formatter.format(-1).trim().replace(this._numeral, '')}]`, 'g');
},
getCurrencyExpression() {
if (this.currency) {
const formatter = new Intl.NumberFormat(this.locale, {style: 'currency', currency: this.currency, currencyDisplay: this.currencyDisplay});
return new RegExp(`[${formatter.format(1).replace(/\s/g, '').replace(this._numeral, '').replace(this._decimal, '').replace(this._group, '')}]`, 'g');
}
return new RegExp(`[]`,'g');
},
formatValue(value) {
if (value != null) {
if (this.format) {
let formatter = new Intl.NumberFormat(this.locale, this.getOptions());
let formattedValue = formatter.format(value);
if (this.prefix) {
formattedValue = this.prefix + formattedValue;
}
if (this.suffix) {
formattedValue = formattedValue + this.suffix;
}
return formattedValue;
}
return value;
}
return '';
},
parseValue(text) {
let filteredText = text.trim()
.replace(/\s/g, '')
.replace(this._currency, '')
.replace(this._group, '')
.replace(this._suffix, '')
.replace(this._prefix, '')
.replace(this._minusSign, '-')
.replace(this._decimal, '.')
.replace(this._numeral, this._index);
if (filteredText) {
let parsedValue = +filteredText;
return isNaN(parsedValue) ? null : parsedValue;
}
return null;
},
repeat(event, interval, dir) {
let i = interval || 500;
this.clearTimer();
this.timer = setTimeout(() => {
this.repeat(event, 40, dir);
}, i);
this.spin(event, dir);
},
spin(event, dir) {
let step = this.step * dir;
let currentValue = this.value || 0;
let newValue = currentValue + step;
if (this.min !== null && newValue < this.min) {
newValue = this.min;
}
if (this.max !== null && newValue > this.max) {
newValue = this.max;
}
this.updateInput(newValue, 'spin');
this.updateModel(event, newValue);
},
onUpButtonMouseDown(event) {
this.$refs.input.$el.focus();
this.repeat(event, null, 1);
event.preventDefault();
},
onUpButtonMouseUp() {
this.clearTimer();
},
onUpButtonMouseLeave() {
this.clearTimer();
},
onUpButtonKeyUp() {
this.clearTimer();
},
onUpButtonKeyDown(event) {
if (event.keyCode === 32 || event.keyCode === 13) {
this.repeat(event, null, 1);
}
},
onDownButtonMouseDown(event) {
this.$refs.input.$el.focus();
this.repeat(event, null, -1);
event.preventDefault();
},
onDownButtonMouseUp() {
this.clearTimer();
},
onDownButtonMouseLeave() {
this.clearTimer();
},
onDownButtonKeyUp() {
this.clearTimer();
},
onDownButtonKeyDown(event) {
if (event.keyCode === 32 || event.keyCode === 13) {
this.repeat(event, null, -1);
}
},
onInput(event) {
debugger;
if (this.isSpecialChar) {
event.target.value = this.lastValue;
}
this.isSpecialChar = false;
},
onInputKeyDown(event) {
this.lastValue = event.target.value;
if (event.shiftKey || event.altKey) {
this.isSpecialChar = true;
return;
}
let selectionStart = event.target.selectionStart;
let selectionEnd = event.target.selectionEnd;
let inputValue = event.target.value;
if (event.altKey) {
event.preventDefault();
}
switch (event.which) {
//up
case 38:
this.spin(event, 1);
event.preventDefault();
break;
//down
case 40:
this.spin(event, -1);
event.preventDefault();
break;
//left
case 37:
if (!this.isNumeralChar(inputValue.charAt(selectionStart - 1))) {
event.preventDefault();
}
break;
//right
case 39:
if (!this.isNumeralChar(inputValue.charAt(selectionStart))) {
event.preventDefault();
}
break;
//backspace
case 8: {
event.preventDefault();
let newValueStr = null;
if (selectionStart === selectionEnd) {
let deleteChar = inputValue.charAt(selectionStart - 1);
let decimalCharIndex = inputValue.search(this._decimal);
this._decimal.lastIndex = 0;
if (this.isNumeralChar(deleteChar)) {
if (this._group.test(deleteChar)) {
this._group.lastIndex = 0;
newValueStr = inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
}
else if (this._decimal.test(deleteChar)) {
this._decimal.lastIndex = 0;
this.$refs.input.$el.setSelectionRange(selectionStart - 1, selectionStart - 1);
}
else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
newValueStr = inputValue.slice(0, selectionStart - 1) + '0' + inputValue.slice(selectionStart);
}
else {
newValueStr = inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
}
}
if (newValueStr != null) {
this.updateValue(event, newValueStr, 'delete-single');
}
}
else {
newValueStr = this.deleteRange(inputValue, selectionStart, selectionEnd);
this.updateValue(event, newValueStr, 'delete-range');
}
break;
}
default:
break;
}
},
onInputKeyPress(event) {
event.preventDefault();
let code = event.which || event.keyCode;
let char = String.fromCharCode(code);
if ((48 <= code && code <= 57) || this.isMinusSign(char)) {
this.insert(event, char);
}
},
onPaste(event) {
event.preventDefault();
let data = (event.clipboardData || window['clipboardData']).getData('Text');
if (data) {
let filteredData = this.parseValue(data);
if (filteredData != null) {
this.insert(event, filteredData.toString());
}
}
},
isMinusSign(char) {
if (this._minusSign.test(char)) {
this._minusSign.lastIndex = 0;
return true;
}
return false;
},
insert(event, text) {
let selectionStart = this.$refs.input.$el.selectionStart;
let selectionEnd = this.$refs.input.$el.selectionEnd;
let inputValue = this.$refs.input.$el.value.trim();
let maxFractionDigits = this.numberFormat.resolvedOptions().maximumFractionDigits;
let newValueStr;
let decimalCharIndex = inputValue.search(this._decimal);
this._decimal.lastIndex = 0;
if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
if ((selectionStart + text.length - (decimalCharIndex + 1)) <= maxFractionDigits) {
newValueStr = inputValue.slice(0, selectionStart) + text + inputValue.slice(selectionStart + text.length);
this.updateValue(event, newValueStr, 'insert');
}
}
else {
newValueStr = this.insertText(inputValue, text, selectionStart, selectionEnd);
this.updateValue(event, newValueStr, 'insert');
}
},
insertText(value, text, start, end) {
let newValueStr;
if ((end - start) === value.length)
newValueStr = text;
else if (start === 0)
newValueStr = text + value.slice(end);
else if (end === value.length)
newValueStr = value.slice(0, start) + text;
else
newValueStr = value.slice(0, start) + text + value.slice(end);
return newValueStr;
},
deleteRange(value, start, end) {
let newValueStr;
if ((end - start) === value.length)
newValueStr = '';
else if (start === 0)
newValueStr = value.slice(end);
else if (end === value.length)
newValueStr = value.slice(0, start);
else
newValueStr = value.slice(0, start) + value.slice(end);
return newValueStr;
},
initCursor() {
let selectionStart = this.$refs.input.$el.selectionStart;
let inputValue = this.$refs.input.$el.value;
let valueLength = inputValue.length;
let index = null;
let char = inputValue.charAt(selectionStart);
if (this.isNumeralChar(char)) {
return;
}
//left
let i = selectionStart - 1;
while (i >= 0) {
char = inputValue.charAt(i);
if (this.isNumeralChar(char)) {
index = i;
break;
}
else {
i--;
}
}
if (index !== null) {
this.$refs.input.$el.setSelectionRange(index + 1, index + 1);
}
else {
i = selectionStart + 1;
while (i < valueLength) {
char = inputValue.charAt(i);
if (this.isNumeralChar(char)) {
index = i;
break;
}
else {
i++;
}
}
if (index !== null) {
this.$refs.input.$el.setSelectionRange(index, index);
}
}
},
onInputClick() {
this.initCursor();
},
isNumeralChar(char) {
if (char.length === 1 && (this._numeral.test(char) || this._decimal.test(char) || this._group.test(char) || this._minusSign.test(char))) {
this.resetRegex();
return true;
}
return false;
},
resetRegex() {
this._numeral.lastIndex = 0;
this._decimal.lastIndex = 0;
this._group.lastIndex = 0;
this._minusSign.lastIndex = 0;
},
updateValue(event, valueStr, operation) {
if (valueStr != null) {
let newValue = this.parseValue(valueStr);
let valid = this.isWithinRange(newValue);
if (valid) {
this.updateInput(newValue, operation);
this.updateModel(event, newValue);
}
}
},
isWithinRange(value) {
return value == null || ((this.min == null || value > this.min) && (this.max == null || value < this.max));
},
updateInput(value, operation) {
let currentLength = this.$refs.input.$el.value.length;
if (currentLength === 0) {
this.$refs.input.$el.value = this.formatValue(value);
this.$refs.input.$el.setSelectionRange(0, 0);
this.initCursor();
this.$refs.input.$el.setSelectionRange(this.$refs.input.$el.selectionStart + 1, this.$refs.input.$el.selectionStart + 1);
}
else {
let selectionStart = this.$refs.input.$el.selectionEnd;
let selectionEnd = this.$refs.input.$el.selectionEnd;
this.$refs.input.$el.value = this.formatValue(value);
let newLength = this.$refs.input.$el.value.length;
if (newLength === currentLength) {
if (operation === 'insert')
this.$refs.input.$el.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
else if (operation === 'delete-single')
this.$refs.input.$el.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
else if (operation === 'delete-range')
this.$refs.input.$el.setSelectionRange(selectionStart, selectionStart);
else if (operation === 'spin')
this.$refs.input.$el.setSelectionRange(selectionStart, selectionEnd);
}
else {
selectionEnd = selectionEnd + (newLength - currentLength);
this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
}
}
this.$refs.input.$el.setAttribute('aria-valuenow', value);
},
updateModel(event, value) {
this.$emit('input', value);
},
onInputFocus(event) {
this.focused = true;
this.$emit('blur', event);
},
onInputBlur(event) {
this.focused = false;
this.$emit('blur', event);
},
clearTimer() {
if (this.timer) {
clearInterval(this.timer);
}
}
},
computed: {
containerClass() {
return ['p-inputnumber p-component', {
'p-inputwrapper-filled': this.filled,
'p-inputwrapper-focus': this.focused,
'p-inputnumber-buttons-stacked': this.buttonLayout === 'stacked',
'p-inputnumber-buttons-horizontal': this.buttonLayout === 'horizontal',
'p-inputnumber-buttons-vertical': this.buttonLayout === 'vertical'
}];
},
upButtonClass() {
return ['p-inputnumber-button p-inputnumber-button-up', this.incrementButtonClass];
},
downButtonClass() {
return ['p-inputnumber-button p-inputnumber-button-down', this.decrementButtonClass];
},
filled() {
return (this.value != null && this.value.toString().length > 0)
},
listeners() {
return {
...this.$listeners,
input: event => this.onInput(event),
keydown: event => this.onInputKeyDown(event),
keypress: event => this.onInputKeyPress(event),
paste: event => this.onPaste(event),
click: event => this.onInputClick(event),
focus: event => this.onInputFocus(event),
blur: event => this.onInputBlur(event)
};
},
upButtonListeners() {
return {
mousedown: event => this.onUpButtonMouseDown(event),
mouseup: event => this.onUpButtonMouseUp(event),
mouseleave: event => this.onUpButtonMouseLeave(event),
keydown: event => this.onUpButtonKeyDown(event),
keyup: event => this.onUpButtonKeyUp(event)
}
},
downButtonListeners() {
return {
mousedown: event => this.onDownButtonMouseDown(event),
mouseup: event => this.onDownButtonMouseUp(event),
mouseleave: event => this.onDownButtonMouseLeave(event),
keydown: event => this.onDownButtonKeyDown(event),
keyup: event => this.onDownButtonKeyUp(event)
}
}
},
components: {
'INInputText': InputText,
'INButton': Button
}
}
</script>
<style>
.p-inputnumber {
display: inline-flex;
}
.p-inputnumber-button-up,
.p-inputnumber-button-down {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.p-inputnumber-input {
flex: 1 1 auto;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-up {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-down {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
display: flex;
flex-direction: column;
}
.p-inputnumber-buttons-stacked .p-inputnumber-button-group .p-inputnumber-button {
flex: 1 1 auto;
}
.p-inputnumber-buttons-horizontal .p-inputnumber-button-up {
order: 3;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.p-inputnumber-buttons-horizontal .p-inputnumber-input {
order: 2;
border-radius: 0;
}
.p-inputnumber-buttons-horizontal .p-inputnumber-button-down {
order: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.p-inputnumber-buttons-vertical {
flex-direction: column;
}
.p-inputnumber-buttons-vertical .p-inputnumber-button-up {
order: 1;
flex: 1 1 auto;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
width: auto;
}
.p-inputnumber-buttons-vertical .p-inputnumber-input {
order: 2;
border-radius: 0;
text-align: center;
}
.p-inputnumber-buttons-vertical .p-inputnumber-button-down {
order: 3;
flex: 1 1 auto;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: auto;
}
.p-fluid .p-inputnumber {
width: 100%;
}
.p-fluid .p-inputnumber .p-inputnumber-input {
width: 1%;
}
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input,
.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-button {
width: 100%;
}
</style>

6
src/main.js
View File

@ -28,6 +28,8 @@ import Fieldset from './components/fieldset/Fieldset';
import FileUpload from './components/fileupload/FileUpload';
import FullCalendar from './components/fullcalendar/FullCalendar';
import Inplace from './components/inplace/Inplace';
import InputMask from './components/inputmask/InputMask';
import InputNumber from './components/inputnumber/InputNumber';
import InputSwitch from './components/inputswitch/InputSwitch';
import InputText from './components/inputtext/InputText';
import Listbox from './components/listbox/Listbox';
@ -69,7 +71,6 @@ import Toolbar from './components/toolbar/Toolbar';
import Tooltip from './components/tooltip/Tooltip';
import ToggleButton from './components/togglebutton/ToggleButton';
import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
import InputMask from './components/inputmask/InputMask';
import ValidationMessage from './components/validationmessage/ValidationMessage';
import Galleria from './components/galleria/Galleria';
@ -117,6 +118,8 @@ Vue.component('Fieldset', Fieldset);
Vue.component('FileUpload', FileUpload);
Vue.component('FullCalendar', FullCalendar);
Vue.component('Inplace', Inplace);
Vue.component('InputMask', InputMask);
Vue.component('InputNumber', InputNumber);
Vue.component('InputSwitch', InputSwitch);
Vue.component('InputText', InputText);
Vue.component('Listbox', Listbox);
@ -156,7 +159,6 @@ Vue.component('ToggleButton', ToggleButton);
Vue.component('Tree', Tree);
Vue.component('TreeTable', TreeTable);
Vue.component('TriStateCheckbox', TriStateCheckbox);
Vue.component('InputMask', InputMask);
Vue.component('ValidationMessage', ValidationMessage);
Vue.component('Galleria', Galleria);

5
src/router.js
View File

@ -315,6 +315,11 @@ export default new Router({
path: '/inputmask',
name: 'inputmask',
component: () => import('./views/inputmask/InputMaskDemo.vue')
},
{
path: '/inputnumber',
name: 'inputnumber',
component: () => import('./views/inputnumber/InputNumberDemo.vue')
},
{
path: '/listbox',

151
src/views/inputnumber/InputNumberDemo.vue Normal file
View File

@ -0,0 +1,151 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>InputNumber</h1>
<p>InputNumber is an input component to provide numerical input.</p>
</div>
</div>
<div class="content-section implementation">
<h3>Numerals</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
Integer Only
<InputNumber v-model="value1" />
</div>
<div class="p-col-12 p-md-3">
Without Grouping
<InputNumber v-model="value2" mode="decimal" :useGrouping="false" />
</div>
<div class="p-col-12 p-md-3">
Min-Max Fraction Digits
<InputNumber v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
</div>
<div class="p-col-12 p-md-3">
Min-Max Boundaries
<InputNumber v-model="value4" mode="decimal" :min="0" :max="100" />
</div>
<div class="p-col-12 p-md-3">
User Locale
<InputNumber v-model="value5" mode="decimal" :minFractionDigits="2" />
</div>
<div class="p-col-12 p-md-3">
United State Locale
<InputNumber v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
</div>
<div class="p-col-12 p-md-3">
German Locale
<InputNumber v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
</div>
<div class="p-col-12 p-md-3">
Indian Locale
<InputNumber v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
</div>
</div>
<h3>Currency</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
United States
<InputNumber v-model="value9" mode="currency" currency="USD" locale="en-US" />
</div>
<div class="p-col-12 p-md-3">
Germany
<InputNumber v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
</div>
<div class="p-col-12 p-md-3">
India
<InputNumber v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
</div>
<div class="p-col-12 p-md-3">
Japan
<InputNumber v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
</div>
</div>
<h3>Prefix and Suffix</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
Mile
<InputNumber v-model="value13" suffix=" mi" />
</div>
<div class="p-col-12 p-md-3">
Percent
<InputNumber v-model="value14" prefix="%" />
</div>
<div class="p-col-12 p-md-3">
Expiry
<InputNumber v-model="value15" prefix="Expires in " suffix=" days" />
</div>
<div class="p-col-12 p-md-3">
Temperature
<InputNumber v-model="value16" prefix="&uarr; " suffix="℃" :min="0" :max="40" />
</div>
</div>
<h3>Buttons</h3>
<div class="p-grid p-fluid">
<div class="p-col-12 p-md-3">
Stacked
<InputNumber v-model="value17" showButtons mode="currency" currency="USD" />
</div>
<div class="p-col-12 p-md-3">
Horizontal with Step
<InputNumber v-model="value18" showButtons buttonLayout="horizontal" spinnerMode="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="p-col-12 p-md-3">
<div>Vertical</div>
<InputNumber v-model="value19" mode="decimal" showButtons buttonLayout="vertical" spinnerMode="vertical"
decrementButtonclass="p-button-secondary" incrementButtonclass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
</div>
<div class="p-col-12 p-md-3">
Min-Max Boundaries
<InputNumber v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
</div>
</div>
</div>
<InputNumberDoc />
</div>
</template>
<script>
import InputNumberDoc from './InputNumberDoc';
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
}
},
components: {
'InputNumberDoc': InputNumberDoc
}
}
</script>
<style>
</style>

89
src/views/inputnumber/InputNumberDoc.vue Normal file
View File

@ -0,0 +1,89 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
import InputText from 'primevue/inputtext';
</CodeHighlight>
<h3>Getting Started</h3>
<p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight>
&lt;InputText type="text" v-model="value" /&gt;
</CodeHighlight>
<h3>Float Label</h3>
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
<CodeHighlight>
&lt;span class="p-float-label"&gt;
&lt;InputText id="username" type="text" v-model="value" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
</CodeHighlight>
<h3>Properties</h3>
<p>InputText passes any valid attribute to the underlying input element.</p>
<h3>Events</h3>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3>
<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-inputtext</td>
<td>Input element</td>
</tr>
</tbody>
</table>
</div>
<h3>Dependencies</h3>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;InputText type="text" v-model="value1" /&gt;
&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
&lt;h3&gt;Floating Label&lt;/h3&gt;
&lt;span class="p-float-label"&gt;
&lt;InputText id="username" type="text" v-model="value2" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;InputText type="text" v-model="value3" disabled /&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
value1: '',
value2: '',
value3: 'PrimeVue'
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>