From bed811ac2403eec727b2d0adb0f44b0ebb745a8c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 20 Dec 2023 12:25:33 +0300
Subject: [PATCH] Button demos updated

---
 doc/inputnumber/ButtonsDoc.vue  | 54 +++++++++++++++++++--------------
 doc/inputnumber/VerticalDoc.vue | 48 +++++++++++++++++++----------
 2 files changed, 64 insertions(+), 38 deletions(-)

diff --git a/doc/inputnumber/ButtonsDoc.vue b/doc/inputnumber/ButtonsDoc.vue
index 3294e0f6d..bbcf43ec6 100644
--- a/doc/inputnumber/ButtonsDoc.vue
+++ b/doc/inputnumber/ButtonsDoc.vue
@@ -14,19 +14,14 @@
         </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"
-                decrementButtonClass="p-button-danger"
-                incrementButtonClass="p-button-success"
-                incrementButtonIcon="pi pi-plus"
-                decrementButtonIcon="pi pi-minus"
-                mode="currency"
-                currency="EUR"
-            />
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -43,9 +38,14 @@ export default {
                 basic: `
 <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
 <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
-<InputNumber v-model="value3" inputId="horizontal-buttons" 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" />
+<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
+    <template #incrementbuttonicon>
+        <span class="pi pi-plus" />
+    </template>
+    <template #decrementbuttonicon>
+        <span class="pi pi-minus" />
+    </template>
+</InputNumber>
 `,
                 options: `
 <template>
@@ -61,9 +61,14 @@ export default {
         </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"
-                decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
-                mode="currency" currency="EUR" />
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
         </div>
     </div>
 </template>
@@ -94,9 +99,14 @@ export default {
         </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"
-                decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
-                mode="currency" currency="EUR" />
+            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" mode="currency" currency="EUR">
+                <template #incrementbuttonicon>
+                    <span class="pi pi-plus" />
+                </template>
+                <template #decrementbuttonicon>
+                    <span class="pi pi-minus" />
+                </template>
+            </InputNumber>
         </div>
     </div>
 </template>
diff --git a/doc/inputnumber/VerticalDoc.vue b/doc/inputnumber/VerticalDoc.vue
index 864cbd64b..00f1b58cb 100644
--- a/doc/inputnumber/VerticalDoc.vue
+++ b/doc/inputnumber/VerticalDoc.vue
@@ -3,16 +3,14 @@
         <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <InputNumber
-            v-model="value"
-            showButtons
-            buttonLayout="vertical"
-            style="width: 4rem"
-            decrementButtonClassName="p-button-secondary"
-            incrementButtonClassName="p-button-secondary"
-            incrementButtonIcon="pi pi-plus"
-            decrementButtonIcon="pi pi-minus"
-        />
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -24,14 +22,26 @@ export default {
             value: 50,
             code: {
                 basic: `
-<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
-    decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
+    <template #incrementbuttonicon>
+        <span class="pi pi-plus" />
+    </template>
+    <template #decrementbuttonicon>
+        <span class="pi pi-minus" />
+    </template>
+</InputNumber>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
-            decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
     </div>
 </template>
 
@@ -48,8 +58,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
-            decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
+        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem" decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary">
+            <template #incrementbuttonicon>
+                <span class="pi pi-plus" />
+            </template>
+            <template #decrementbuttonicon>
+                <span class="pi pi-minus" />
+            </template>
+        </InputNumber>
     </div>
 </template>