Implemented InputNumber
Cagatay Civici
parent
75dbcb8e50
commit
a40075764e
|
|
@ -30,6 +30,10 @@
|
|||
"name": "InputMask",
|
||||
"to": "/inputmask"
|
||||
},
|
||||
{
|
||||
"name": "InputNumber",
|
||||
"to": "/inputnumber"
|
||||
},
|
||||
{
|
||||
"name": "InputText",
|
||||
"to": "/inputtext"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(20);
|
||||
const value2 = ref(25);
|
||||
const value3 = ref(10.5);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(20);
|
||||
const value2 = ref(25);
|
||||
const value3 = ref(10.5);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="currency-us" class="font-bold block mb-2"> United States </label>
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-germany" class="font-bold block mb-2"> Germany </label>
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-india" class="font-bold block mb-2"> India </label>
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-japan" class="font-bold block mb-2"> Japan </label>
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(1500);
|
||||
const value2 = ref(2500);
|
||||
const value3 = ref(4250);
|
||||
const value4 = ref(5002);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="currency-us" class="font-bold block mb-2"> United States </label>
|
||||
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-germany" class="font-bold block mb-2"> Germany </label>
|
||||
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-india" class="font-bold block mb-2"> India </label>
|
||||
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="currency-japan" class="font-bold block mb-2"> Japan </label>
|
||||
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(1500);
|
||||
const value2 = ref(2500);
|
||||
const value3 = ref(4250);
|
||||
const value4 = ref(5002);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<InputNumber v-model="value" disabled prefix="%" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(50);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<InputNumber v-model="value" disabled prefix="%" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(50);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<InputNumber v-model="value" variant="filled" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<InputNumber v-model="value" variant="filled" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs" />
|
||||
<DocSectionCode :code="code" lang="script" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: `
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
`
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap justify-center gap-4">
|
||||
<InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(null);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="locale-user" class="font-bold block mb-2"> User Locale </label>
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-german" class="font-bold block mb-2"> German Locale </label>
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(151351);
|
||||
const value2 = ref(115744);
|
||||
const value3 = ref(635524);
|
||||
const value4 = ref(732762);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="locale-user" class="font-bold block mb-2"> User Locale </label>
|
||||
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
|
||||
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-german" class="font-bold block mb-2"> German Locale </label>
|
||||
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
|
||||
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(151351);
|
||||
const value2 = ref(115744);
|
||||
const value3 = ref(635524);
|
||||
const value4 = ref(732762);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
|
||||
<InputNumber v-model="value1" inputId="integeronly" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(42723);
|
||||
const value2 = ref(58151);
|
||||
const value3 = ref(2351.35);
|
||||
const value4 = ref(50);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
|
||||
<InputNumber v-model="value1" inputId="integeronly" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
|
||||
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
|
||||
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(42723);
|
||||
const value2 = ref(58151);
|
||||
const value3 = ref(2351.35);
|
||||
const value4 = ref(50);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<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>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="mile" class="font-bold block mb-2"> Mile </label>
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="percent" class="font-bold block mb-2"> Percent </label>
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="expiry" class="font-bold block mb-2"> Expiry </label>
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="temperature" class="font-bold block mb-2"> Temperature </label>
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" fluid />
|
||||
</div>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(20);
|
||||
const value2 = ref(50);
|
||||
const value3 = ref(10);
|
||||
const value4 = ref(20);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="mile" class="font-bold block mb-2"> Mile </label>
|
||||
<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="percent" class="font-bold block mb-2"> Percent </label>
|
||||
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="expiry" class="font-bold block mb-2"> Expiry </label>
|
||||
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="temperature" class="font-bold block mb-2"> Temperature </label>
|
||||
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" fluid />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(20);
|
||||
const value2 = ref(50);
|
||||
const value3 = ref(10);
|
||||
const value4 = ref(20);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>InputNumber provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const value3 = ref(null);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex flex-col items-center gap-4">
|
||||
<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
|
||||
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value1 = ref(null);
|
||||
const value2 = ref(null);
|
||||
const value3 = ref(null);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
|
||||
</DocSectionText>
|
||||
<div class="card flex justify-center">
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
<DocSectionCode :code="code" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(50);
|
||||
|
||||
const code = ref(`
|
||||
<template>
|
||||
<div class="card flex justify-center">
|
||||
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
<template #decrementbuttonicon>
|
||||
<span class="pi pi-minus" />
|
||||
</template>
|
||||
</InputNumber>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from '@/plex/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref(50);
|
||||
<\/script>
|
||||
`);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
|
||||
import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
|
||||
import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
|
||||
import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
|
||||
import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
|
||||
import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
|
||||
import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
|
||||
import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
|
||||
import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
|
||||
import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
|
||||
import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
docs: [
|
||||
{
|
||||
id: 'import',
|
||||
label: 'Import',
|
||||
component: ImportDoc
|
||||
},
|
||||
{
|
||||
id: 'numerals',
|
||||
label: 'Numerals',
|
||||
component: NumeralsDoc
|
||||
},
|
||||
{
|
||||
id: 'locale',
|
||||
label: 'Locale',
|
||||
component: LocaleDoc
|
||||
},
|
||||
{
|
||||
id: 'currency',
|
||||
label: 'Currency',
|
||||
component: CurrencyDoc
|
||||
},
|
||||
{
|
||||
id: 'prefixsuffix',
|
||||
label: 'Prefix & Suffix',
|
||||
component: PrefixSuffixDoc
|
||||
},
|
||||
{
|
||||
id: 'buttons',
|
||||
label: 'Buttons',
|
||||
component: ButtonsDoc
|
||||
},
|
||||
{
|
||||
id: 'vertical',
|
||||
label: 'Vertical',
|
||||
component: VerticalDoc
|
||||
},
|
||||
{
|
||||
id: 'filled',
|
||||
label: 'Filled',
|
||||
component: FilledDoc
|
||||
},
|
||||
{
|
||||
id: 'sizes',
|
||||
label: 'Sizes',
|
||||
component: SizesDoc
|
||||
},
|
||||
{
|
||||
id: 'invalid',
|
||||
label: 'Invalid',
|
||||
component: InvalidDoc
|
||||
},
|
||||
{
|
||||
id: 'disabled',
|
||||
label: 'Disabled',
|
||||
component: DisabledDoc
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<InputNumber unstyled :pt="theme" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import InputNumber from 'primevue/inputnumber';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const theme = ref({
|
||||
root: `inline-flex relative
|
||||
p-vertical:flex-col p-fluid:w-full`,
|
||||
pcInputText: {
|
||||
root: `appearance-none rounded-md outline-none flex-auto
|
||||
bg-surface-0 dark:bg-surface-950
|
||||
p-filled:bg-surface-50 dark:p-filled:bg-surface-800
|
||||
text-surface-700 dark:text-surface-0
|
||||
placeholder:text-surface-500 dark:placeholder:text-surface-400
|
||||
border border-surface-300 dark:border-surface-700
|
||||
enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
|
||||
enabled:focus:border-primary
|
||||
disabled:bg-surface-200 disabled:text-surface-500
|
||||
dark:disabled:bg-surface-700 dark:disabled:text-surface-400
|
||||
p-invalid:border-red-400 dark:p-invalid:border-red-300
|
||||
p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
|
||||
px-3 py-2 p-fluid:w-full
|
||||
p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
|
||||
p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
|
||||
transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
|
||||
|
||||
p-horizontal:order-2 p-horizontal:rounded-none
|
||||
p-vertical:order-2 p-vertical:rounded-none p-vertical:text-center
|
||||
p-fluid:w-[1%] p-fluid:p-vertical:w-full`
|
||||
},
|
||||
buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`,
|
||||
incrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
|
||||
bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
|
||||
border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
|
||||
text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
|
||||
dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
|
||||
dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
|
||||
transition-colors duration-200
|
||||
p-stacked:relative p-stacked:flex-auto p-stacked:border-none
|
||||
p-stacked:p-0 p-stacked:rounded-tr-[5px]
|
||||
p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
|
||||
p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`,
|
||||
incrementIcon: ``,
|
||||
decrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
|
||||
bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
|
||||
border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
|
||||
text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
|
||||
dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
|
||||
dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
|
||||
dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
|
||||
transition-colors duration-200
|
||||
p-stacked:relative p-stacked:flex-auto p-stacked:border-none
|
||||
p-stacked:p-0 p-stacked:rounded-br-[5px]
|
||||
p-horizontal:order-1 p-horizontal:rounded-s-md p-horizontal:border-e-0
|
||||
p-vertical:py-2 p-vertical:order-3 p-vertical:rounded-ee-md p-vertical:rounded-es-md p-vertical:w-full p-vertical:border-t-0`,
|
||||
decrementIcon: ``
|
||||
});
|
||||
</script>
|
||||
|
|
@ -15,6 +15,7 @@ export default {
|
|||
addVariant('p-filled', '&[data-p~="filled"]');
|
||||
addVariant('p-horizontal', '&[data-p~="horizontal"]');
|
||||
addVariant('p-vertical', '&[data-p~="vertical"]');
|
||||
addVariant('p-stacked', '&[data-p~="stacked"]');
|
||||
addVariant('p-checked', '&[data-p~="checked"]');
|
||||
addVariant('p-disabled', '&[data-p~="disabled"]');
|
||||
addVariant('p-enabled', '&:not([data-p~="disabled"])');
|
||||
|
|
|
|||
|
|
@ -5,16 +5,16 @@
|
|||
<div class="card flex flex-wrap gap-4">
|
||||
<div class="flex-auto">
|
||||
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid disabled />
|
||||
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
|
||||
</div>
|
||||
|
||||
<div class="flex-auto">
|
||||
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid disabled />
|
||||
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
|
||||
</div>
|
||||
<div class="flex-auto">
|
||||
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid disabled>
|
||||
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
|
||||
<template #incrementbuttonicon>
|
||||
<span class="pi pi-plus" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span :class="cx('root')" v-bind="ptmi('root')">
|
||||
<span :class="cx('root')" v-bind="ptmi('root')" :data-p="dataP">
|
||||
<InputText
|
||||
ref="input"
|
||||
:id="inputId"
|
||||
|
|
@ -29,17 +29,18 @@
|
|||
@blur="onInputBlur"
|
||||
:pt="ptm('pcInputText')"
|
||||
:unstyled="unstyled"
|
||||
:data-p="dataP"
|
||||
/>
|
||||
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
|
||||
<span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')" :data-p="dataP">
|
||||
<slot name="incrementbutton" :listeners="upButtonListeners">
|
||||
<button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('incrementButton')">
|
||||
<button :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('incrementButton')" :data-p="dataP">
|
||||
<slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
|
||||
<component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
|
||||
</slot>
|
||||
</button>
|
||||
</slot>
|
||||
<slot name="decrementbutton" :listeners="downButtonListeners">
|
||||
<button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('decrementButton')">
|
||||
<button :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('decrementButton')" :data-p="dataP">
|
||||
<slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
|
||||
<component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
|
||||
</slot>
|
||||
|
|
@ -47,7 +48,17 @@
|
|||
</slot>
|
||||
</span>
|
||||
<slot name="incrementbutton" :listeners="upButtonListeners">
|
||||
<button v-if="showButtons && buttonLayout !== 'stacked'" :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" type="button" v-bind="ptm('incrementButton')">
|
||||
<button
|
||||
v-if="showButtons && buttonLayout !== 'stacked'"
|
||||
:class="[cx('incrementButton'), incrementButtonClass]"
|
||||
v-on="upButtonListeners"
|
||||
:disabled="disabled"
|
||||
:tabindex="-1"
|
||||
aria-hidden="true"
|
||||
type="button"
|
||||
v-bind="ptm('incrementButton')"
|
||||
:data-p="dataP"
|
||||
>
|
||||
<slot :name="$slots.incrementicon ? 'incrementicon' : 'incrementbuttonicon'">
|
||||
<component :is="incrementIcon || incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="[incrementIcon, incrementButtonIcon]" v-bind="ptm('incrementIcon')" data-pc-section="incrementicon" />
|
||||
</slot>
|
||||
|
|
@ -63,6 +74,7 @@
|
|||
aria-hidden="true"
|
||||
type="button"
|
||||
v-bind="ptm('decrementButton')"
|
||||
:data-p="dataP"
|
||||
>
|
||||
<slot :name="$slots.decrementicon ? 'decrementicon' : 'decrementbuttonicon'">
|
||||
<component :is="decrementIcon || decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="[decrementIcon, decrementButtonIcon]" v-bind="ptm('decrementIcon')" data-pc-section="decrementicon" />
|
||||
|
|
@ -74,6 +86,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { cn } from '@primeuix/utils';
|
||||
import { clearSelection, getSelection } from '@primeuix/utils/dom';
|
||||
import { isNotEmpty } from '@primeuix/utils/object';
|
||||
import AngleDownIcon from '@primevue/icons/angledown';
|
||||
|
|
@ -1002,6 +1015,15 @@ export default {
|
|||
},
|
||||
getFormatter() {
|
||||
return this.numberFormat;
|
||||
},
|
||||
dataP() {
|
||||
return cn({
|
||||
invalid: this.$invalid,
|
||||
fluid: this.$fluid,
|
||||
filled: this.$variant === 'filled',
|
||||
[this.size]: this.size,
|
||||
[this.buttonLayout]: this.showButtons && this.buttonLayout
|
||||
});
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue