Styling for InputNumber

components/lib/themes/primeone/base/index.js

@@ -33,6 +33,7 @@ import image from 'primevue/themes/primeone/base/image';
 import inlinemessage from 'primevue/themes/primeone/base/inlinemessage';
 import inplace from 'primevue/themes/primeone/base/inplace';
 import inputgroup from 'primevue/themes/primeone/base/inputgroup';
+import inputnumber from 'primevue/themes/primeone/base/inputnumber';
 import inputotp from 'primevue/themes/primeone/base/inputotp';
 import inputswitch from 'primevue/themes/primeone/base/inputswitch';
 import inputtext from 'primevue/themes/primeone/base/inputtext';
@@ -119,6 +120,7 @@ export default {
         inlinemessage,
         inplace,
         inputgroup,
+        inputnumber,
         inputotp,
         inputswitch,
         inputtext,

components/lib/themes/primeone/base/inputnumber/index.js

@@ -0,0 +1,148 @@
+export default {
+    css: ({ dt }) => `
+.p-inputnumber {
+    display: inline-flex;
+    position: relative;
+}
+
+.p-inputnumber-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    background: ${dt('inputnumber.button.background')};
+    color: ${dt('inputnumber.button.color')};
+    width: ${dt('inputnumber.button.width')};
+    transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+}
+
+.p-inputnumber-button:hover {
+    background: ${dt('inputnumber.button.hover.background')};
+    color: ${dt('inputnumber.button.hover.color')};
+}
+
+.p-inputnumber-button:active {
+    background: ${dt('inputnumber.button.active.background')};
+    color: ${dt('inputnumber.button.active.color')};
+}
+
+.p-inputnumber-buttons-stacked {
+    overflow: hidden;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button {
+    position: relative;
+    border: 0 none;
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-group {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 1px;
+    right: 1px;
+    height: calc(100% - 2px);
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-up {
+    padding: 0;
+    border-top-right-radius: calc(${dt('rounded.base')} - 1px);
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button-down {
+    padding: 0;
+    border-bottom-right-radius: calc(${dt('rounded.base')} - 1px);
+}
+
+.p-inputnumber-buttons-stacked .p-inputnumber-button {
+    flex: 1 1 auto;
+    border: 0 none;
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-button {
+    border: 1px solid ${dt('inputnumber.button.border.color')};
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-button:hover {
+    border-color: ${dt('inputnumber.button.hover.border.color')};
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-button:active {
+    border-color: ${dt('inputnumber.button.active.border.color')};
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-button-up {
+    order: 3;
+    border-top-right-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
+    border-left: 0 none;
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-input {
+    order: 2;
+    border-radius: 0;
+}
+
+.p-inputnumber-buttons-horizontal .p-inputnumber-button-down {
+    order: 1;
+    border-top-left-radius: ${dt('rounded.base')};
+    border-bottom-left-radius: ${dt('rounded.base')};
+    border-right: 0 none;
+}
+
+.p-inputnumber-buttons-vertical {
+    flex-direction: column;
+}
+
+.p-inputnumber-buttons-vertical .p-inputnumber-button {
+    border: 1px solid ${dt('inputnumber.button.border.color')};
+    padding: 0.5rem 0;
+}
+
+.p-inputnumber-buttons-vertical .p-inputnumber-button:hover {
+    border-color: ${dt('inputnumber.button.hover.border.color')};
+}
+
+.p-inputnumber-buttons-vertical .p-inputnumber-button:active {
+    border-color: ${dt('inputnumber.button.active.border.color')};
+}
+
+.p-inputnumber-buttons-vertical .p-inputnumber-button-up {
+    order: 1;
+    border-top-left-radius: ${dt('rounded.base')};
+    border-top-right-radius: ${dt('rounded.base')};
+    width: 100%;
+    border-bottom: 0 none;
+}
+
+.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;
+    border-bottom-left-radius: ${dt('rounded.base')};
+    border-bottom-right-radius: ${dt('rounded.base')};
+    width: 100%;
+    border-top: 0 none;
+}
+
+.p-inputnumber-input {
+    flex: 1 1 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 {
+    width: 100%;
+}
+`
+};

components/lib/themes/primeone/base/inputnumber/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}

components/lib/themes/primeone/presets/aura/index.js

@@ -32,6 +32,7 @@ import image from 'primevue/themes/primeone/presets/aura/image';
 import inlinemessage from 'primevue/themes/primeone/presets/aura/inlinemessage';
 import inplace from 'primevue/themes/primeone/presets/aura/inplace';
 import inputgroup from 'primevue/themes/primeone/presets/aura/inputgroup';
+import inputnumber from 'primevue/themes/primeone/presets/aura/inputnumber';
 import inputotp from 'primevue/themes/primeone/presets/aura/inputotp';
 import inputswitch from 'primevue/themes/primeone/presets/aura/inputswitch';
 import inputtext from 'primevue/themes/primeone/presets/aura/inputtext';
@@ -266,8 +267,9 @@ export default {
         inlinemessage,
         inplace,
         inputgroup,
-        inputswitch,
+        inputnumber,
         inputotp,
+        inputswitch,
         inputtext,
         knob,
         listbox,

components/lib/themes/primeone/presets/aura/inputnumber/index.js

@@ -0,0 +1,33 @@
+export default {
+    button: {
+        width: '2.5rem'
+    },
+    colorScheme: {
+        light: {
+            button: {
+                background: 'transparent',
+                hoverBackground: '{surface.100}',
+                activeBackground: '{surface.200}',
+                borderColor: '{form.field.border.color}',
+                hoverBorderColor: '{form.field.border.color}',
+                activeBorderColor: '{form.field.border.color}',
+                color: '{surface.400}',
+                hoverColor: '{surface.500}',
+                activeColor: '{surface.600}'
+            }
+        },
+        dark: {
+            button: {
+                background: 'transparent',
+                hoverBackground: '{surface.800}',
+                activeBackground: '{surface.700}',
+                borderColor: '{form.field.border.color}',
+                hoverBorderColor: '{form.field.border.color}',
+                activeBorderColor: '{form.field.border.color}',
+                color: '{surface.400}',
+                hoverColor: '{surface.300}',
+                activeColor: '{surface.200}'
+            }
+        }
+    }
+};

components/lib/themes/primeone/presets/aura/inputnumber/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}