@antify/ui 4.1.32 → 4.1.34

package/dist/components/calendar/AntDatePicker.vue

@@ -35,11 +35,16 @@ const props = withDefaults(defineProps<{
     date: string;
     color: string;
   }[];
+  /**
+   * Color token used for the week number column (e.g., 'base-200', 'primary-500').
+   */
+  weekNumberColor?: string;
 }>(), {
   showWeekend: false,
   showWeekNumbers: false,
   skeleton: false,
   specialDays: () => [],
+  weekNumberColor: 'base-200',
 });
 const emit = defineEmits([
   'select',
@@ -134,6 +139,18 @@ const getColorNumber = (color: string) => {
   return match ? parseInt(match[0], 10) : null;
 };
 
+const getContrastTextColor = (colorToken: string) => {
+  const match = colorToken.match(/(\d+)/);
+  const weight = match ? parseInt(match[0], 10) : 0;
+
+  return weight < 500 ? 'var(--color-for-white-bg-font)' : '#fff';
+};
+
+const weekNumberStyles = computed(() => ({
+  backgroundColor: `var(--color-${props.weekNumberColor})`,
+  color: getContrastTextColor(props.weekNumberColor),
+}));
+
 watch(() => props.modelValue, (val) => {
   const date = new Date(val);
   currentMonthIndex.value = date.getMonth();
@@ -179,9 +196,11 @@ onMounted(() => {
       }"
     >
       <div
-        v-for="day in weekDays"
-        :key="day"
-        class="text-for-white-bg-font text-center flex items-center justify-center"
+        v-for="(day, index) in weekDays"
+        :key="`${day}-${index}`"
+        class="text-center flex items-center justify-center rounded-md"
+        :class="[!(showWeekNumbers && index === 0) ? 'text-for-white-bg-font' : '']"
+        :style="showWeekNumbers && index === 0 ? weekNumberStyles : {}"
       >
         <AntSkeleton
           :visible="skeleton"
@@ -200,7 +219,8 @@ onMounted(() => {
       >
         <div
           v-if="showWeekNumbers"
-          class="flex text-base-500 font-semibold bg-base-100 rounded-md"
+          class="flex font-semibold rounded-md transition-colors"
+          :style="weekNumberStyles"
         >
           <AntSkeleton
             :visible="skeleton"

package/dist/components/calendar/__stories/AntDatePicker.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof AntCalendar>;
 export default meta;
 type Story = StoryObj<typeof AntCalendar>;
 export declare const Docs: Story;
+export declare const WeekNumberStyling: Story;
 export declare const Summary: Story;

package/dist/components/calendar/__stories/AntDatePicker.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Summary = exports.Docs = void 0;
+module.exports = exports.WeekNumberStyling = exports.Summary = exports.Docs = void 0;
 var _AntDatePicker = _interopRequireDefault(require("../AntDatePicker.vue"));
 var _AntDateSwitcher = _interopRequireDefault(require("../AntDateSwitcher.vue"));
 var _vue = require("vue");
@@ -31,6 +31,21 @@ const meta = {
         }
       }
     },
+    weekNumberColor: {
+      control: "text",
+      description: "Color token e.g. 'base-200', 'primary-500'. Automatically calculates contrast text color.",
+      table: {
+        type: {
+          summary: "string"
+        },
+        defaultValue: {
+          summary: "base-200"
+        }
+      }
+    },
+    showWeekNumbers: {
+      control: "boolean"
+    },
     onSelect: {
       action: "select"
     }
@@ -66,6 +81,65 @@ const Docs = exports.Docs = {
     }]
   }
 };
+const WeekNumberStyling = exports.WeekNumberStyling = {
+  render: args => ({
+    components: {
+      AntCalendar: _AntDatePicker.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const value = (0, _vue.ref)((/* @__PURE__ */new Date("2026-01-01")).getTime());
+      return {
+        value,
+        args
+      };
+    },
+    template: `
+      <AntFormGroup class="p-4 flex gap-4 w-fit">
+        <AntFormGroupLabel>Week Number Styling (Presets)</AntFormGroupLabel>
+
+        <AntFormGroup class="grid grid-cols-4 gap-10">
+          <div class="flex flex-col w-64 gap-2">
+            <span class="text-sm font-medium text-for-white-bg-font">1. Default (Base 200)</span>
+            <AntCalendar
+              v-model="value"
+              :show-week-numbers="true"
+            />
+          </div>
+
+          <div class="flex flex-col w-64 gap-2">
+            <span class="text-sm font-medium text-for-white-bg-font">2. Primary 900</span>
+            <AntCalendar
+              v-model="value"
+              :show-week-numbers="true"
+              week-number-color="primary-900"
+            />
+          </div>
+
+          <div class="flex flex-col w-64 gap-2">
+            <span class="text-sm font-medium text-for-white-bg-font">3. Info 100</span>
+            <AntCalendar
+              v-model="value"
+              :show-week-numbers="true"
+              week-number-color="info-100"
+            />
+          </div>
+
+          <div class="flex flex-col w-64 gap-2">
+            <span class="text-sm font-medium text-for-white-bg-font">4. Success 500</span>
+            <AntCalendar
+              v-model="value"
+              :show-week-numbers="true"
+              week-number-color="success-500"
+            />
+          </div>
+
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  })
+};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

package/dist/components/calendar/__stories/AntDatePicker.stories.mjs

@@ -29,6 +29,21 @@ const meta = {
         }
       }
     },
+    weekNumberColor: {
+      control: "text",
+      description: "Color token e.g. 'base-200', 'primary-500'. Automatically calculates contrast text color.",
+      table: {
+        type: {
+          summary: "string"
+        },
+        defaultValue: {
+          summary: "base-200"
+        }
+      }
+    },
+    showWeekNumbers: {
+      control: "boolean"
+    },
     onSelect: {
       action: "select"
     }
@@ -66,6 +81,65 @@ export const Docs = {
     ]
   }
 };
+export const WeekNumberStyling = {
+  render: (args) => ({
+    components: {
+      AntCalendar,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      const value = ref((/* @__PURE__ */ new Date("2026-01-01")).getTime());
+      return {
+        value,
+        args
+      };
+    },
+    template: `
+      <AntFormGroup class="p-4 flex gap-4 w-fit">
+        <AntFormGroupLabel>Week Number Styling (Presets)</AntFormGroupLabel>
+
+        <AntFormGroup class="grid grid-cols-4 gap-10">
+          <div class="flex flex-col w-64 gap-2">
+            <span class="text-sm font-medium text-for-white-bg-font">1. Default (Base 200)</span>
+            <AntCalendar
+              v-model="value"
+              :show-week-numbers="true"
+            />
+          </div>
+
+          <div class="flex flex-col w-64 gap-2">
+            <span class="text-sm font-medium text-for-white-bg-font">2. Primary 900</span>
+            <AntCalendar
+              v-model="value"
+              :show-week-numbers="true"
+              week-number-color="primary-900"
+            />
+          </div>
+
+          <div class="flex flex-col w-64 gap-2">
+            <span class="text-sm font-medium text-for-white-bg-font">3. Info 100</span>
+            <AntCalendar
+              v-model="value"
+              :show-week-numbers="true"
+              week-number-color="info-100"
+            />
+          </div>
+
+          <div class="flex flex-col w-64 gap-2">
+            <span class="text-sm font-medium text-for-white-bg-font">4. Success 500</span>
+            <AntCalendar
+              v-model="value"
+              :show-week-numbers="true"
+              week-number-color="success-500"
+            />
+          </div>
+
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  })
+};
 export const Summary = {
   parameters: {
     chromatic: {

package/dist/components/inputs/AntNumberInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {
-  computed, onMounted,
+  computed, onMounted, nextTick, ref, useId,
 } from 'vue';
 import AntButton from '../AntButton.vue';
 import AntField from '../forms/AntField.vue';
@@ -58,6 +58,7 @@ const props = withDefaults(defineProps<{
   messages?: string[];
   indicators?: boolean;
   inputRef?: HTMLInputElement | null;
+  selectAllOnFocus?: boolean;
 }>(), {
   state: InputState.base,
   disabled: false,
@@ -69,95 +70,197 @@ const props = withDefaults(defineProps<{
   messages: () => [],
   indicators: false,
   inputRef: null,
+  selectAllOnFocus: false,
 });
 const emit = defineEmits([
   'update:modelValue',
   'update:inputRef',
   'validate',
+  'focus',
+  'blur',
 ]);
 
+const id = useId();
+const _inputRef = useVModel(props, 'inputRef', emit);
+const isFocused = ref(false);
+
 const _modelValue = computed({
   get: () => {
-    if(!props.modelValue) {
-      return props.modelValue;
+    if (props.modelValue === null || props.modelValue === undefined || props.modelValue === '') {
+      return null;
     }
 
-    const modelDecimalPlaces = getDecimalPlaces(props.modelValue || 0);
-    const stepDecimalPlaces = getDecimalPlaces(props.steps);
-    const decimalPlaces = Math.max(modelDecimalPlaces, stepDecimalPlaces);
+    if (isFocused.value) {
+      return props.modelValue.toString();
+    }
 
-    return String(new Big(props.modelValue).toFixed(decimalPlaces));
+    const bigValue = new Big(props.modelValue);
+    const isInteger = bigValue.mod(1).eq(0);
+
+    if (isInteger) {
+      return props.modelValue.toString();
+    }
+
+    const dp = getPrecision();
+
+    return bigValue.toFixed(dp);
   },
-  set: (val: string) => {
-    emit('update:modelValue', Number(val));
+  set: (val: string | number | null) => {
+    if (val === '' || val === null || val === undefined) {
+      emit('update:modelValue', null);
+
+      return;
+    }
+
+    const num = Number(val);
+    if (!isNaN(num)) {
+      emit('update:modelValue', num);
+    }
   },
 });
-const _inputRef = useVModel(props, 'inputRef', emit);
+
+function onInputFocus(e: FocusEvent) {
+  isFocused.value = true;
+
+  const el = e.target as HTMLInputElement;
+
+  if (el && props.selectAllOnFocus && el.value !== '') {
+    const originalType = el.type;
+    el.type = 'text';
+
+    setTimeout(() => {
+      el.setSelectionRange(0, el.value.length);
+      el.type = originalType;
+    }, 0);
+  }
+  emit('focus', e);
+}
+
+function getPrecision() {
+  const modelDecimalPlaces = getDecimalPlaces(props.modelValue || 0);
+  const stepDecimalPlaces = getDecimalPlaces(props.steps);
+
+  return Math.max(modelDecimalPlaces, stepDecimalPlaces);
+}
+
+function subtract() {
+  const dp = getPrecision();
+
+  const current = props.modelValue !== null ? new Big(props.modelValue) : new Big(props.max || 0);
+  let result = current.sub(props.steps);
+
+  if (props.min !== undefined && result.lt(props.min)) {
+    result = new Big(props.min);
+  }
+
+  emit('update:modelValue', Number(result.toFixed(dp)));
+}
+
+function add() {
+  const dp = getPrecision();
+
+  const current = props.modelValue !== null ? new Big(props.modelValue) : new Big(props.min || 0);
+  let result = current.add(props.steps);
+
+  if (props.max !== undefined && result.gt(props.max)) {
+    result = new Big(props.max);
+  }
+
+  emit('update:modelValue', Number(result.toFixed(dp)));
+}
 
 const isPrevButtonDisabled = computed(() => {
-  if (props.disabled) {
+  if (props.disabled || props.readonly) {
     return true;
   }
 
-  if (_modelValue.value === null) {
+  if (props.modelValue === null) {
     return false;
   }
 
-  return props.min !== undefined ? Number(_modelValue.value) <= props.min : false;
+  return props.min !== undefined ? Number(props.modelValue) <= props.min : false;
 });
+
 const isNextButtonDisabled = computed(() => {
-  if (props.disabled) {
+  if (props.disabled || props.readonly) {
     return true;
   }
 
-  if (_modelValue.value === null) {
+  if (props.modelValue === null) {
     return false;
   }
 
-  return props.max !== undefined ? Number(_modelValue.value) >= props.max : false;
+  return props.max !== undefined ? Number(props.modelValue) >= props.max : false;
 });
 
-onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.state, InputState, 'state');
-});
+function onButtonBlur(e: FocusEvent) {
+  isFocused.value = false;
 
-function subtract() {
-  const modelDecimalPlaces = getDecimalPlaces(_modelValue.value || 0);
-  const stepDecimalPlaces = getDecimalPlaces(props.steps);
-  const decimalPlaces = Math.max(modelDecimalPlaces, stepDecimalPlaces);
-
-  if (_modelValue.value === null) {
-    _modelValue.value = String(props.max || new Big(0).toFixed(decimalPlaces));
-  } else if (props.max !== undefined && Number(_modelValue.value) - props.steps > props.max) {
-    _modelValue.value = String(props.max);
-  } else {
-    _modelValue.value = new Big(_modelValue.value).sub(props.steps).toFixed(decimalPlaces);
+  if (props.modelValue !== null) {
+    let finalValue = props.modelValue;
+    const dp = getPrecision();
+
+    if (props.max !== undefined && finalValue > props.max) {
+      finalValue = props.max;
+    }
+    if (props.min !== undefined && finalValue < props.min) {
+      finalValue = props.min;
+    }
+
+    const roundedValue = Number(new Big(finalValue).toFixed(dp));
+
+    emit('update:modelValue', roundedValue);
+
+    if (_inputRef.value) {
+      _inputRef.value.value = roundedValue.toString();
+    }
+
+    emit('validate', roundedValue);
   }
+
+  emit('blur', e);
 }
 
-function add() {
-  const modelDecimalPlaces = getDecimalPlaces(_modelValue.value || 0);
-  const stepDecimalPlaces = getDecimalPlaces(props.steps);
-  const decimalPlaces = Math.max(modelDecimalPlaces, stepDecimalPlaces);
-
-  if (_modelValue.value === null) {
-    return _modelValue.value = String(props.min || new Big(0).toFixed(decimalPlaces));
-  } else if (props.min !== undefined && Number(_modelValue.value) + props.steps < props.min) {
-    return _modelValue.value = String(props.min);
-  } else {
-    _modelValue.value = new Big(_modelValue.value).add(props.steps).toFixed(decimalPlaces);
+function onKeyDown(e: KeyboardEvent) {
+  if (e.ctrlKey || e.metaKey) {
+    return;
+  }
+
+  const allowedKeys = [
+    'Backspace',
+    'Delete',
+    'Tab',
+    'Escape',
+    'Enter',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'ArrowDown',
+    'Home',
+    'End',
+  ];
+
+  if (allowedKeys.includes(e.key)) {
+    return;
   }
-}
 
-function onButtonBlur() {
-  emit('validate', _modelValue.value);
+  if (!/^[0-9.-]$/.test(e.key)) {
+    e.preventDefault();
+
+    return;
+  }
 }
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.state, InputState, 'state');
+});
 </script>
 
 <template>
   <AntField
     :label="label"
+    :label-for="id"
     :size="size"
     :skeleton="skeleton"
     :description="description"
@@ -185,7 +288,8 @@ function onButtonBlur() {
       />
 
       <AntBaseInput
-        v-model.number="_modelValue"
+        :id="id"
+        v-model="_modelValue"
         v-model:input-ref="_inputRef"
         :type="BaseInputType.number"
         :grouped="indicators ? Grouped.center : Grouped.none"
@@ -193,6 +297,7 @@ function onButtonBlur() {
         :state="state"
         :size="size"
         :skeleton="skeleton"
+        :step="steps"
         :min="min"
         :max="max"
         :disabled="disabled"
@@ -200,7 +305,9 @@ function onButtonBlur() {
         :placeholder="placeholder || label"
         :show-icon="false"
         v-bind="$attrs"
-        @validate="val => $emit('validate', val)"
+        @focus="onInputFocus"
+        @blur="onButtonBlur"
+        @keydown="onKeyDown"
       />
 
       <AntButton

package/dist/components/inputs/Elements/AntBaseInput.vue

@@ -61,6 +61,7 @@ const props = withDefaults(defineProps<{
   inputRef?: null | HTMLInputElement;
   min?: string | number;
   max?: string | number;
+  step?: string | number;
 }>(), {
   state: InputState.base,
   disabled: false,
@@ -73,6 +74,7 @@ const props = withDefaults(defineProps<{
   default: false,
   nullable: false,
   inputRef: null,
+  step: 1,
 });
 const slot = useSlots();
 const hasInputState = computed(() => props.skeleton || props.disabled);
@@ -161,13 +163,26 @@ const icon = computed(() => icons[props.state]);
 const _modelValue = computed<string | number | null>({
   get: () => props.modelValue,
   set: (val: string | number | null) => {
-    if (props.type === BaseInputType.number && typeof val !== 'number') {
-      return emit('update:modelValue', null);
+    if (props.type === BaseInputType.number) {
+      if (val === '' || val === null || val === undefined) {
+        emit('update:modelValue', null);
+
+        return;
+      }
+
+      const num = Number(val);
+
+      if (!isNaN(num)) {
+        emit('update:modelValue', num);
+      }
+
+      return;
     }
 
     emit('update:modelValue', val);
   },
 });
+
 const inputIconSize = computed(() => {
   if (props.size === Size.xs || props.size === Size.xs2) {
     return IconSize.xs;
@@ -270,6 +285,7 @@ function onClickClearIcon() {
         :min="min"
         :max="max"
         title=""
+        :step="step"
         v-bind="$attrs"
         :data-e2e-state="state"
         @blur="onBlur"

package/dist/components/inputs/__stories/AntNumberInput.stories.d.ts

@@ -4,5 +4,8 @@ declare const meta: Meta<typeof AntNumberInput>;
 export default meta;
 type Story = StoryObj<typeof AntNumberInput>;
 export declare const Docs: Story;
+export declare const SelectAllOnFocus: Story;
+export declare const PrecisionAndSteps: Story;
+export declare const Limits: Story;
 export declare const WithIndicators: Story;
 export declare const Summary: Story;

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

@@ -3,13 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.WithIndicators = exports.Summary = exports.Docs = void 0;
+module.exports = exports.WithIndicators = exports.Summary = exports.SelectAllOnFocus = exports.PrecisionAndSteps = exports.Limits = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntNumberInput = _interopRequireDefault(require("../AntNumberInput.vue"));
 var _State = require("../../../enums/State.enum");
 var _vue = require("vue");
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _test = require("@storybook/test");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Number Input",
@@ -47,11 +48,19 @@ const meta = {
         }
       }
     },
-    placeholder: {
-      table: {
-        defaultValue: {
-          summary: "this.label"
-        }
+    steps: {
+      control: {
+        type: "number"
+      }
+    },
+    min: {
+      control: {
+        type: "number"
+      }
+    },
+    max: {
+      control: {
+        type: "number"
       }
     }
   }
@@ -67,20 +76,17 @@ const Docs = exports.Docs = {
         args
       };
     },
-    template: `
-      <AntNumberInput
-        v-bind="args"
-        v-model="args.modelValue"
-      />`
+    template: '<AntNumberInput v-bind="args" v-model="args.modelValue" />'
   }),
   args: {
     modelValue: null,
     steps: 1,
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+    label: "Standard Number Input",
+    description: "Basic usage with manual entry or indicators",
+    onValidate: (0, _test.fn)()
   }
 };
-const WithIndicators = exports.WithIndicators = {
+const SelectAllOnFocus = exports.SelectAllOnFocus = {
   render: args => ({
     components: {
       AntNumberInput: _AntNumberInput.default,
@@ -88,19 +94,112 @@ const WithIndicators = exports.WithIndicators = {
       AntFormGroupLabel: _AntFormGroupLabel.default
     },
     setup() {
+      const val = (0, _vue.ref)(999.99);
       return {
-        args
+        args,
+        val
       };
     },
     template: `
-      <AntFormGroup>
-        <AntFormGroup direction="column">
-          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
-                          description="Lorem ipsum dolor sit amet"/>
-          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
-                          description="Lorem ipsum dolor sit amet" :steps="0.0001"/>
+      <AntFormGroup class="w-80">
+        <AntFormGroupLabel>Select All on Focus</AntFormGroupLabel>
+        <AntNumberInput
+          v-bind="args"
+          v-model="val"
+          :selectAllOnFocus="true"
+          label="Price"
+          description="Click to select the entire number for quick replacement"
+        />
+      </AntFormGroup>
+    `
+  })
+};
+const PrecisionAndSteps = exports.PrecisionAndSteps = {
+  render: args => ({
+    components: {
+      AntNumberInput: _AntNumberInput.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const intVal = (0, _vue.ref)(null);
+      const floatVal = (0, _vue.ref)(0.5);
+      return {
+        args,
+        intVal,
+        floatVal
+      };
+    },
+    template: `
+      <AntFormGroup direction="row">
+        <AntFormGroup>
+          <AntFormGroupLabel>Integer (Step 1)</AntFormGroupLabel>
+          <AntNumberInput v-bind="args" :steps="1" v-model="intVal" />
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Currency Style (Step 0.01)</AntFormGroupLabel>
+          <AntNumberInput v-bind="args" :steps="0.01" v-model="floatVal" indicators />
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>High Precision (Step 0.0005)</AntFormGroupLabel>
+          <AntNumberInput v-bind="args" :steps="0.0005" v-model="floatVal" indicators />
         </AntFormGroup>
       </AntFormGroup>`
+  })
+};
+const Limits = exports.Limits = {
+  render: args => ({
+    components: {
+      AntNumberInput: _AntNumberInput.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const limitedVal = (0, _vue.ref)(5);
+      return {
+        args,
+        limitedVal
+      };
+    },
+    template: `
+      <AntFormGroup class="w-96">
+        <AntFormGroupLabel>Min: {{ args.min }} | Max: {{ args.max }}</AntFormGroupLabel>
+        <AntNumberInput
+          v-bind="args"
+          v-model="limitedVal"
+          label="Try to exceed limits"
+        />
+      </AntFormGroup>`
+  }),
+  args: {
+    min: 0,
+    max: 10,
+    indicators: true,
+    limiter: true
+  }
+};
+const WithIndicators = exports.WithIndicators = {
+  render: args => ({
+    components: {
+      AntNumberInput: _AntNumberInput.default,
+      AntFormGroup: _AntFormGroup.default
+    },
+    setup() {
+      const val1 = (0, _vue.ref)(null);
+      const val2 = (0, _vue.ref)(null);
+      return {
+        args,
+        val1,
+        val2
+      };
+    },
+    template: `
+      <AntFormGroup direction="column">
+        <AntNumberInput v-bind="args" v-model="val1" label="Step 1" :steps="1"/>
+        <AntNumberInput v-bind="args" v-model="val2" label="Step 0.0001" :steps="0.0001"/>
+      </AntFormGroup>`
   }),
   args: {
     ...Docs.args,

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

@@ -10,6 +10,9 @@ import {
 } from "vue";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import {
+  fn
+} from "@storybook/test";
 const meta = {
   title: "Inputs/Number Input",
   component: AntNumberInput,
@@ -46,11 +49,19 @@ const meta = {
         }
       }
     },
-    placeholder: {
-      table: {
-        defaultValue: {
-          summary: "this.label"
-        }
+    steps: {
+      control: {
+        type: "number"
+      }
+    },
+    min: {
+      control: {
+        type: "number"
+      }
+    },
+    max: {
+      control: {
+        type: "number"
       }
     }
   }
@@ -66,20 +77,17 @@ export const Docs = {
         args
       };
     },
-    template: `
-      <AntNumberInput
-        v-bind="args"
-        v-model="args.modelValue"
-      />`
+    template: '<AntNumberInput v-bind="args" v-model="args.modelValue" />'
   }),
   args: {
     modelValue: null,
     steps: 1,
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+    label: "Standard Number Input",
+    description: "Basic usage with manual entry or indicators",
+    onValidate: fn()
   }
 };
-export const WithIndicators = {
+export const SelectAllOnFocus = {
   render: (args) => ({
     components: {
       AntNumberInput,
@@ -87,18 +95,111 @@ export const WithIndicators = {
       AntFormGroupLabel
     },
     setup() {
+      const val = ref(999.99);
       return {
-        args
+        args,
+        val
       };
     },
     template: `
-      <AntFormGroup>
-        <AntFormGroup direction="column">
-          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
-                          description="Lorem ipsum dolor sit amet"/>
-          <AntNumberInput v-bind="args" v-model="args.modelValue" label="Label"
-                          description="Lorem ipsum dolor sit amet" :steps="0.0001"/>
+      <AntFormGroup class="w-80">
+        <AntFormGroupLabel>Select All on Focus</AntFormGroupLabel>
+        <AntNumberInput
+          v-bind="args"
+          v-model="val"
+          :selectAllOnFocus="true"
+          label="Price"
+          description="Click to select the entire number for quick replacement"
+        />
+      </AntFormGroup>
+    `
+  })
+};
+export const PrecisionAndSteps = {
+  render: (args) => ({
+    components: {
+      AntNumberInput,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      const intVal = ref(null);
+      const floatVal = ref(0.5);
+      return {
+        args,
+        intVal,
+        floatVal
+      };
+    },
+    template: `
+      <AntFormGroup direction="row">
+        <AntFormGroup>
+          <AntFormGroupLabel>Integer (Step 1)</AntFormGroupLabel>
+          <AntNumberInput v-bind="args" :steps="1" v-model="intVal" />
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Currency Style (Step 0.01)</AntFormGroupLabel>
+          <AntNumberInput v-bind="args" :steps="0.01" v-model="floatVal" indicators />
         </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>High Precision (Step 0.0005)</AntFormGroupLabel>
+          <AntNumberInput v-bind="args" :steps="0.0005" v-model="floatVal" indicators />
+        </AntFormGroup>
+      </AntFormGroup>`
+  })
+};
+export const Limits = {
+  render: (args) => ({
+    components: {
+      AntNumberInput,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      const limitedVal = ref(5);
+      return {
+        args,
+        limitedVal
+      };
+    },
+    template: `
+      <AntFormGroup class="w-96">
+        <AntFormGroupLabel>Min: {{ args.min }} | Max: {{ args.max }}</AntFormGroupLabel>
+        <AntNumberInput
+          v-bind="args"
+          v-model="limitedVal"
+          label="Try to exceed limits"
+        />
+      </AntFormGroup>`
+  }),
+  args: {
+    min: 0,
+    max: 10,
+    indicators: true,
+    limiter: true
+  }
+};
+export const WithIndicators = {
+  render: (args) => ({
+    components: {
+      AntNumberInput,
+      AntFormGroup
+    },
+    setup() {
+      const val1 = ref(null);
+      const val2 = ref(null);
+      return {
+        args,
+        val1,
+        val2
+      };
+    },
+    template: `
+      <AntFormGroup direction="column">
+        <AntNumberInput v-bind="args" v-model="val1" label="Step 1" :steps="1"/>
+        <AntNumberInput v-bind="args" v-model="val2" label="Step 0.0001" :steps="0.0001"/>
       </AntFormGroup>`
   }),
   args: {

package/package.json

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