@antify/ui 2.5.1 → 2.5.2

package/dist/components/inputs/AntNumberInput.vue

@@ -9,17 +9,14 @@ import {
   Size,
 } from '../../enums/Size.enum';
 import {
-  faPlus, faMinus,
+  faMinus, faPlus,
 } from '@fortawesome/free-solid-svg-icons';
 import {
-  State, InputState,
+  InputState, State,
 } from '../../enums/State.enum';
 import {
   handleEnumValidation,
 } from '../../handler';
-import {
-  useVModel,
-} from '@vueuse/core';
 import {
   Grouped,
 } from '../../enums/Grouped.enum';
@@ -27,6 +24,10 @@ import {
   BaseInputType,
 } from './Elements/__types';
 import Big from 'big.js';
+import {
+  getDecimalPlaces,
+} from '../../utils';
+
 Big.RM = Big.roundHalfEven;
 
 defineOptions({
@@ -38,7 +39,7 @@ defineOptions({
  * Additionally, the initial value (if none is given) gets set to "0" with the same amount of decimals as used in the steps.
  */
 const props = withDefaults(defineProps<{
-  modelValue: string | null;
+  modelValue: number | null;
   label?: string;
   placeholder?: string;
   description?: string;
@@ -68,7 +69,23 @@ const emit = defineEmits([
   'update:modelValue',
   'validate',
 ]);
-const _modelValue = useVModel(props, 'modelValue', emit);
+
+const _modelValue = computed({
+  get: () => {
+    if(!props.modelValue) {
+      return props.modelValue;
+    }
+
+    const modelDecimalPlaces = getDecimalPlaces(props.modelValue || 0);
+    const stepDecimalPlaces = getDecimalPlaces(props.steps);
+    const decimalPlaces = Math.max(modelDecimalPlaces, stepDecimalPlaces);
+
+    return String(new Big(props.modelValue).toFixed(decimalPlaces));
+  },
+  set: (val: string) => {
+    emit('update:modelValue', Number(val));
+  },
+});
 
 const isPrevButtonDisabled = computed(() => {
   if (props.disabled) {
@@ -98,19 +115,6 @@ onMounted(() => {
   handleEnumValidation(props.state, InputState, 'state');
 });
 
-/**
- * Returns the amount of decimal places of the given value.
- * @param value Number to get decimal places from.
- */
-function getDecimalPlaces(value: number | string) {
-  const strValue = String(value);
-  const decimalIndex = strValue.indexOf('.');
-
-  if (decimalIndex === -1) return 0;
-
-  return strValue.length - decimalIndex - 1;
-}
-
 function subtract() {
   const modelDecimalPlaces = getDecimalPlaces(_modelValue.value || 0);
   const stepDecimalPlaces = getDecimalPlaces(props.steps);

package/dist/components/inputs/AntUnitInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  onMounted,
+  computed, onMounted,
 } from 'vue';
 import AntButton from '../buttons/AntButton.vue';
 import AntField from '../forms/AntField.vue';
@@ -12,10 +12,7 @@ import {
   type IconDefinition,
 } from '@fortawesome/free-solid-svg-icons';
 import {
-  useVModel,
-} from '@vueuse/core';
-import {
-  State, InputState,
+  InputState, State,
 } from '../../enums';
 import {
   Grouped,
@@ -26,6 +23,7 @@ import {
 import {
   handleEnumValidation,
 } from '../../handler';
+import Big from 'big.js';
 
 defineOptions({
   inheritAttrs: false,
@@ -47,6 +45,7 @@ const props = withDefaults(defineProps<{
   skeleton?: boolean;
   wrapperClass?: string | Record<string, boolean>;
   messages?: string[];
+  decimalPlaces?: number;
 }>(), {
   state: InputState.base,
   disabled: false,
@@ -55,12 +54,25 @@ const props = withDefaults(defineProps<{
   size: Size.md,
   limiter: false,
   messages: () => [],
+  decimalPlaces: 2,
 });
 const emit = defineEmits([
   'update:modelValue',
   'validate',
 ]);
-const _modelValue = useVModel(props, 'modelValue', emit);
+
+const _modelValue = computed({
+  get: () => {
+    if(!props.modelValue) {
+      return props.modelValue;
+    }
+
+    return String(new Big(props.modelValue).toFixed(Math.max(0, props.decimalPlaces)));
+  },
+  set: (val: string) => {
+    emit('update:modelValue', Number(val));
+  },
+});
 
 onMounted(() => {
   handleEnumValidation(props.state, InputState, 'state');
@@ -76,7 +88,7 @@ onMounted(() => {
     :description="description"
     :state="state"
     :limiter-max-value="limiter && max !== undefined ? max : undefined"
-    :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? _modelValue : undefined"
+    :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? Number(_modelValue) : undefined"
     :messages="messages"
   >
     <div
@@ -86,7 +98,7 @@ onMounted(() => {
         v-model="_modelValue"
         :type="BaseInputType.number"
         :grouped="Grouped.left"
-        wrapper-class="grow"
+        wrapper-class="flex-grow"
         :state="state"
         :size="size"
         :min="min"

package/dist/utils.d.ts

@@ -18,3 +18,8 @@ export declare function enumToPlainText(value: object, className: string): strin
  * To get a slot in your component, call $slots['slotName'] or useSlots()['slotName'].
  */
 export declare function hasSlotContent(slot: Slot<any> | undefined): boolean;
+/**
+ * Returns the amount of decimal places of the given value.
+ * @param value Number to get decimal places from.
+ */
+export declare function getDecimalPlaces(value: number | string): number;

package/dist/utils.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.classesToObjectSyntax = classesToObjectSyntax;
 exports.enumToPlainText = enumToPlainText;
+exports.getDecimalPlaces = getDecimalPlaces;
 exports.hasSlotContent = hasSlotContent;
 var _vue = require("vue");
 function classesToObjectSyntax(classes) {
@@ -46,4 +47,12 @@ function hasSlotContent(slot) {
     });
   };
   return !isVnodeEmpty(slot());
+}
+function getDecimalPlaces(value) {
+  const strValue = String(value);
+  const decimalIndex = strValue.indexOf(".");
+  if (decimalIndex === -1) {
+    return 0;
+  }
+  return strValue.length - decimalIndex - 1;
 }

package/dist/utils.mjs

@@ -41,3 +41,11 @@ export function hasSlotContent(slot) {
   };
   return !isVnodeEmpty(slot());
 }
+export function getDecimalPlaces(value) {
+  const strValue = String(value);
+  const decimalIndex = strValue.indexOf(".");
+  if (decimalIndex === -1) {
+    return 0;
+  }
+  return strValue.length - decimalIndex - 1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "private": false,
   "type": "module",
   "exports": {