Display: Add styles for input number #6862

Author: AngelFQC

assets/css/scss/atoms/_input_number.scss

@@ -0,0 +1,122 @@
+.p-inputnumber {
+  @apply inline-flex relative;
+
+  &-button {
+    @apply flex items-center justify-center grow-0 shrink-0 basis-0 cursor-pointer transition bg-transparent text-gray-90 w-8
+      disabled:cursor-auto;
+
+    &:not(:disabled) {
+      @apply hover:bg-support-1 hover:text-primary hover:border-primary
+        active:bg-support-1 active:text-primary active:border-primary;
+    }
+  }
+
+  &-stacked &-button {
+    @apply relative flex-auto border-none;
+  }
+
+  &-stacked &-button-group {
+    @apply flex flex-col absolute top-[1px] right-[1px] z-10;
+
+    height: calc(100% - 2px);
+  }
+
+  &-stacked &-increment-button {
+    @apply p-0 rounded-tr-lg;
+  }
+
+  &-stacked &-decrement-button {
+    @apply p-0 rounded-br-lg;
+  }
+
+  &-stacked &-input {
+    @apply pr-8;
+  }
+
+  &-horizontal &-button{
+    @apply border border-solid border-gray-50 basis-8
+      hover:border-solid
+      active:border-solid;
+  }
+
+  &-horizontal &-increment-button {
+    @apply order-3 rounded-r-lg right-0 border-l-0;
+  }
+
+  &-horizontal &-input {
+    @apply order-2 rounded-none;
+  }
+
+  &-horizontal &-decrement-button {
+    @apply order-1 rounded-l-lg left-0 border-r-0;
+  }
+
+  .p-floatlabel:has(&-horizontal) label {
+    @apply ml-8;
+  }
+
+  &-vertical {
+    @apply flex-col;
+  }
+
+  &-vertical &-button {
+    @apply border border-solid border-gray-50 p-0 basis-8
+      hover:border-primary
+      active:border-gray-50;
+  }
+
+  &-vertical &-increment-button {
+    @apply order-1 rounded-t-lg w-full border-b-0;
+  }
+
+  &-vertical &-input {
+    @apply order-2 rounded-none text-center;
+  }
+
+  &-vertical &-decrement-button {
+    @apply order-3 rounded-b-lg w-full border-t-0;
+  }
+
+  &-input {
+    @apply flex-auto;
+  }
+
+  &-fluid {
+    @apply w-full;
+  }
+
+  &-fluid &-input {
+    @apply w-[1%];
+  }
+
+  &-fluid.p-inputnumber-vertical &-input {
+    @apply w-full
+  }
+
+  &-clear-icon {
+    @apply absolute top-1/2 -mt-2 cursor-pointer pr-1 text-gray-90;
+  }
+
+  &:has(&-clear-icon) &-input {
+    @apply pr-8;
+  }
+
+  &-stacked &-clear-icon {
+    @apply right-8;
+  }
+}
+
+/*
+
+.p-inputnumber:has(.p-inputtext-sm) .p-inputnumber-button .p-icon {
+  font-size: dt('form.field.sm.font.size');
+  width: dt('form.field.sm.font.size');
+  height: dt('form.field.sm.font.size');
+}
+
+.p-inputnumber:has(.p-inputtext-lg) .p-inputnumber-button .p-icon {
+  font-size: dt('form.field.lg.font.size');
+  width: dt('form.field.lg.font.size');
+  height: dt('form.field.lg.font.size');
+}
+*/

assets/css/scss/index.scss

@@ -41,6 +41,7 @@
 @include meta.load-css("atoms/inputgroup");
 @include meta.load-css("atoms/input_switch");
 @include meta.load-css("atoms/input_text");
+@include meta.load-css("atoms/input_number");
 @include meta.load-css("atoms/messages");
 @include meta.load-css("atoms/multiselect");
 @include meta.load-css("atoms/overlay");

assets/vue/components/basecomponents/BaseInputNumber.vue

@@ -1,21 +1,23 @@
 <template>
   <div class="field">
-    <div class="p-float-label">
+    <FloatLabel variant="on">
       <InputNumber
-        :input-id="id"
-        :class="{ 'p-invalid': isInvalid }"
         :disabled="disabled"
+        :input-id="id"
+        :invalid="isInvalid"
         :max="max"
         :min="min"
         :model-value="modelValue"
         :step="step"
+        fluid
+        showButtons
         @update:model-value="$emit('update:modelValue', $event)"
       />
       <label
         :for="id"
         v-text="label"
       />
-    </div>
+    </FloatLabel>
     <small
       v-if="smallText"
       :class="{ 'p-error': isInvalid }"
@@ -25,6 +27,7 @@
 </template>
 
 <script setup>
+import FloatLabel from "primevue/floatlabel"
 import InputNumber from "primevue/inputnumber"
 import { computed } from "vue"