@antify/ui 2.5.1 → 2.5.3

package/dist/components/inputs/AntDateInput.vue

@@ -4,6 +4,7 @@ import {
 } from 'vue';
 import AntField from '../forms/AntField.vue';
 import AntBaseInput from './Elements/AntBaseInput.vue';
+import AntButton from '../buttons/AntButton.vue';
 import AntIcon from '../AntIcon.vue';
 import {
   Size,
@@ -12,7 +13,7 @@ import {
   useVModel,
 } from '@vueuse/core';
 import {
-  InputState,
+  Grouped, InputState, State,
 } from '../../enums';
 import {
   BaseInputType,
@@ -24,7 +25,7 @@ import {
   AntDateInputTypes,
 } from './__types/AntDateInput.types';
 import {
-  faCalendar, faClock,
+  faCalendar, faClock, faMultiply,
 } from '@fortawesome/free-solid-svg-icons';
 import {
   IconSize,
@@ -47,6 +48,7 @@ const props = withDefaults(defineProps<{
   messages?: string[];
   min?: string;
   max?: string;
+  nullable?: boolean;
 }>(), {
   state: InputState.base,
   type: AntDateInputTypes.date,
@@ -55,6 +57,7 @@ const props = withDefaults(defineProps<{
   skeleton: false,
   size: Size.md,
   messages: () => [],
+  nullable: false,
 });
 const emit = defineEmits([
   'update:modelValue',
@@ -78,6 +81,7 @@ const iconColor = computed(() => {
 });
 const iconSize = computed(() => props.size === Size.xs || props.size === Size.xs2 ? IconSize.xs : IconSize.sm);
 const _icon = computed(() => props.type === AntDateInputTypes.time ? faClock : faCalendar);
+const _nullable = computed(() => props.nullable && props.modelValue);
 
 onMounted(() => {
   handleEnumValidation(props.state, InputState, 'state');
@@ -102,30 +106,42 @@ function onClickCalendar() {
     :state="state"
     :messages="messages"
   >
-    <AntBaseInput
-      v-model="_modelValue"
-      v-model:input-ref="inputRef"
-      :type="type as unknown as BaseInputType"
-      :state="state"
-      :size="size"
-      :skeleton="skeleton"
-      :disabled="disabled"
-      :readonly="readonly"
-      :show-icon="false"
-      :min="min"
-      :max="max"
-      v-bind="$attrs"
-      @validate="val => $emit('validate', val)"
-    >
-      <template #icon-right>
-        <AntIcon
-          :icon="_icon"
-          :color="iconColor"
-          :size="iconSize"
-          :class="{'cursor-pointer': !disabled && !readonly, 'opacity-50': disabled}"
-          @click="onClickCalendar"
-        />
-      </template>
-    </AntBaseInput>
+    <div class="flex">
+      <AntBaseInput
+        v-model="_modelValue"
+        v-model:input-ref="inputRef"
+        :type="type as unknown as BaseInputType"
+        :state="state"
+        :size="size"
+        :skeleton="skeleton"
+        :disabled="disabled"
+        :readonly="readonly"
+        :show-icon="false"
+        :min="min"
+        :max="max"
+        :grouped="_nullable ? Grouped.left : Grouped.none"
+        v-bind="$attrs"
+        @validate="val => $emit('validate', val)"
+      >
+        <template #icon-right>
+          <AntIcon
+            :icon="_icon"
+            :color="iconColor"
+            :size="iconSize"
+            :class="{'cursor-pointer': !disabled && !readonly, 'opacity-50': disabled}"
+            @click="onClickCalendar"
+          />
+        </template>
+      </AntBaseInput>
+
+      <AntButton
+        v-if="_nullable"
+        :icon-left="faMultiply"
+        :grouped="Grouped.right"
+        :state="state as unknown as State"
+        :size="size"
+        @click="_modelValue = null"
+      />
+    </div>
   </AntField>
 </template>

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/components/inputs/__stories/AntDateInput.stories.d.ts

@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import AntDateInput from '../AntDateInput.vue';
 declare const meta: Meta<typeof AntDateInput>;
 export default meta;

package/dist/components/inputs/__stories/AntDateInput.stories.js

@@ -165,6 +165,41 @@ const Summary = exports.Summary = {
           />
         </AntFormGroup>
 
+        <AntFormGroupLabel>
+          Nullable
+        </AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            nullable
+          />
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            :state="InputState.info"
+            nullable
+          />
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            :state="InputState.success"
+            nullable
+          />
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            :state="InputState.warning"
+            nullable
+          />
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            :state="InputState.danger"
+            nullable
+          />
+        </AntFormGroup>
+
         <AntFormGroupLabel>
           Type
         </AntFormGroupLabel>

package/dist/components/inputs/__stories/AntDateInput.stories.mjs

@@ -166,6 +166,41 @@ export const Summary = {
           />
         </AntFormGroup>
 
+        <AntFormGroupLabel>
+          Nullable
+        </AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            nullable
+          />
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            :state="InputState.info"
+            nullable
+          />
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            :state="InputState.success"
+            nullable
+          />
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            :state="InputState.warning"
+            nullable
+          />
+          <AntDateInput
+            v-bind="args"
+            model-value="2025-01-01"
+            :state="InputState.danger"
+            nullable
+          />
+        </AntFormGroup>
+
         <AntFormGroupLabel>
           Type
         </AntFormGroupLabel>

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.3",
   "private": false,
   "type": "module",
   "exports": {