From ba03186465d872e25ca6d3f698ffabe7c30d2a28 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 3 Mar 2025 16:58:17 +0300
Subject: [PATCH] Move inputnumber

---
 apps/volt/doc/inputnumber/ButtonsDoc.vue      | 73 +++++++++++++++++
 apps/volt/doc/inputnumber/CurrencyDoc.vue     | 67 +++++++++++++++
 apps/volt/doc/inputnumber/DisabledDoc.vue     | 31 +++++++
 apps/volt/doc/inputnumber/FilledDoc.vue       | 31 +++++++
 apps/volt/doc/inputnumber/ImportDoc.vue       | 16 ++++
 apps/volt/doc/inputnumber/InvalidDoc.vue      | 31 +++++++
 apps/volt/doc/inputnumber/LocaleDoc.vue       | 67 +++++++++++++++
 apps/volt/doc/inputnumber/NumeralsDoc.vue     | 67 +++++++++++++++
 apps/volt/doc/inputnumber/PrefixSuffixDoc.vue | 67 +++++++++++++++
 apps/volt/doc/inputnumber/SizesDoc.vue        | 39 +++++++++
 apps/volt/doc/inputnumber/VerticalDoc.vue     | 45 +++++++++++
 apps/volt/pages/inputnumber/index.vue         | 81 +++++++++++++++++++
 apps/volt/volt/inputnumber/index.vue          | 62 ++++++++++++++
 13 files changed, 677 insertions(+)
 create mode 100644 apps/volt/doc/inputnumber/ButtonsDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/CurrencyDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/DisabledDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/FilledDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/ImportDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/InvalidDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/LocaleDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/NumeralsDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/SizesDoc.vue
 create mode 100644 apps/volt/doc/inputnumber/VerticalDoc.vue
 create mode 100644 apps/volt/pages/inputnumber/index.vue
 create mode 100644 apps/volt/volt/inputnumber/index.vue

diff --git a/apps/volt/doc/inputnumber/ButtonsDoc.vue b/apps/volt/doc/inputnumber/ButtonsDoc.vue
new file mode 100644
index 000000000..2e2194ba3
--- /dev/null
+++ b/apps/volt/doc/inputnumber/ButtonsDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/CurrencyDoc.vue b/apps/volt/doc/inputnumber/CurrencyDoc.vue
new file mode 100644
index 000000000..2e51b6a1a
--- /dev/null
+++ b/apps/volt/doc/inputnumber/CurrencyDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/DisabledDoc.vue b/apps/volt/doc/inputnumber/DisabledDoc.vue
new file mode 100644
index 000000000..72b738e58
--- /dev/null
+++ b/apps/volt/doc/inputnumber/DisabledDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/FilledDoc.vue b/apps/volt/doc/inputnumber/FilledDoc.vue
new file mode 100644
index 000000000..6d3bef177
--- /dev/null
+++ b/apps/volt/doc/inputnumber/FilledDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/ImportDoc.vue b/apps/volt/doc/inputnumber/ImportDoc.vue
new file mode 100644
index 000000000..8a8773dce
--- /dev/null
+++ b/apps/volt/doc/inputnumber/ImportDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/InvalidDoc.vue b/apps/volt/doc/inputnumber/InvalidDoc.vue
new file mode 100644
index 000000000..7225599cf
--- /dev/null
+++ b/apps/volt/doc/inputnumber/InvalidDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/LocaleDoc.vue b/apps/volt/doc/inputnumber/LocaleDoc.vue
new file mode 100644
index 000000000..ec82caa43
--- /dev/null
+++ b/apps/volt/doc/inputnumber/LocaleDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/NumeralsDoc.vue b/apps/volt/doc/inputnumber/NumeralsDoc.vue
new file mode 100644
index 000000000..8adf88af7
--- /dev/null
+++ b/apps/volt/doc/inputnumber/NumeralsDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue b/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
new file mode 100644
index 000000000..6f416962f
--- /dev/null
+++ b/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
@@ -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="&uarr; " 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="&uarr; " 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>
diff --git a/apps/volt/doc/inputnumber/SizesDoc.vue b/apps/volt/doc/inputnumber/SizesDoc.vue
new file mode 100644
index 000000000..eda20dd39
--- /dev/null
+++ b/apps/volt/doc/inputnumber/SizesDoc.vue
@@ -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>
diff --git a/apps/volt/doc/inputnumber/VerticalDoc.vue b/apps/volt/doc/inputnumber/VerticalDoc.vue
new file mode 100644
index 000000000..f531f50be
--- /dev/null
+++ b/apps/volt/doc/inputnumber/VerticalDoc.vue
@@ -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>
diff --git a/apps/volt/pages/inputnumber/index.vue b/apps/volt/pages/inputnumber/index.vue
new file mode 100644
index 000000000..9f0515cd0
--- /dev/null
+++ b/apps/volt/pages/inputnumber/index.vue
@@ -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>
diff --git a/apps/volt/volt/inputnumber/index.vue b/apps/volt/volt/inputnumber/index.vue
new file mode 100644
index 000000000..7824f133b
--- /dev/null
+++ b/apps/volt/volt/inputnumber/index.vue
@@ -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>