pxd 0.0.55 → 0.0.61

package/dist/components/menu/types.d.ts

@@ -1,7 +1,12 @@
+import type { ComponentPosition } from '../../types/shared'
+import type { ListOption, ListOptionSelected } from '../list/types'
+
 export interface MenuProps {
   width?: string | number
   options?: ListOption[]
   position?: ComponentPosition
+  showDelay?: number
+  hideDelay?: number
   closeOnPressEscape?: boolean
 }
 

package/dist/components/message/index.d.vue.ts

@@ -1,11 +1,12 @@
-import type { MessageItemType } from '../../composables/use-message';
+import type { MessageItemConfig } from '../../composables/use-message';
 import type { MessageProps } from './types';
-declare function getMessageById(id: MessageItemType['id']): {
+declare function getMessageById(id: MessageItemConfig['id']): {
     index: number;
     message: null;
 } | {
     index: number;
     message: {
+        height?: number | undefined;
         _timerId?: {
             close: () => NodeJS.Timeout;
             hasRef: () => boolean;
@@ -53,12 +54,13 @@ declare function getMessageById(id: MessageItemType['id']): {
         }>)) | undefined;
     };
 };
-declare function pauseMessageById(id: MessageItemType['id']): void;
-declare function resumeMessageById(id: MessageItemType['id']): void;
-declare function closeMessageById(id: MessageItemType['id']): void;
+declare function pauseMessageById(id: MessageItemConfig['id']): void;
+declare function resumeMessageById(id: MessageItemConfig['id']): void;
+declare function closeMessageById(id: MessageItemConfig['id']): void;
 declare function clearMessage(): void;
 declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
     messages: import("vue").Ref<{
+        height?: number | undefined;
         _timerId?: {
             close: () => NodeJS.Timeout;
             hasRef: () => boolean;
@@ -104,7 +106,8 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
         }>) | ((data: unknown) => string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>)) | undefined;
-    }[], MessageItemType[] | {
+    }[], MessageItemConfig[] | {
+        height?: number | undefined;
         _timerId?: {
             close: () => NodeJS.Timeout;
             hasRef: () => boolean;
@@ -157,9 +160,9 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
     close: typeof closeMessageById;
     clear: typeof clearMessage;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (id: string | number | undefined) => any;
+    close: (id: MessageItemType) => any;
 }, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{
-    onClose?: ((id: string | number | undefined) => any) | undefined;
+    onClose?: ((id: MessageItemType) => any) | undefined;
 }>, {
     max: number;
     group: string;

package/dist/components/message/index.vue

@@ -8,7 +8,8 @@ import { isServer } from "../../utils/is";
 import PMessageItem from "../message-item/index.vue";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
-  name: "PMessage"
+  name: "PMessage",
+  inheritAttrs: false
 });
 const props = defineProps({
   max: { type: Number, required: false, default: 3 },
@@ -27,9 +28,8 @@ useDocumentHidden((isHidden) => {
 });
 const groupExpand = ref(props.expand);
 const groupMessages = ref([]);
-const messageItemsHeight = ref([]);
 const messageGroupStyle = computed(() => {
-  const frontHeight = messageItemsHeight.value[0]?.height || 0;
+  const frontHeight = groupMessages.value[0]?.height || 0;
   const visibleItemCounts = Math.min(props.max, groupMessages.value.length);
   return {
     "--message-width": getCssUnitValue(props.width),
@@ -116,18 +116,11 @@ function closeMessageById(id) {
     message._timerId = void 0;
   }
   groupMessages.value.splice(index, 1);
-  const heightIndex = messageItemsHeight.value.findIndex((h) => h.id === id);
-  if (heightIndex !== -1) {
-    messageItemsHeight.value.splice(heightIndex, 1);
-  }
   if (!props.expand && groupMessages.value.length === 0) {
     groupExpand.value = false;
   }
   emits("close", id);
 }
-function setItemHeight(info) {
-  messageItemsHeight.value.unshift(info);
-}
 function clearMessage() {
   groupMessages.value.forEach((m) => {
     if (m._timerId) {
@@ -136,7 +129,6 @@ function clearMessage() {
     }
   });
   groupMessages.value = [];
-  messageItemsHeight.value = [];
 }
 function resolvePromiseMessage(handler, data) {
   if (!handler) {
@@ -299,6 +291,7 @@ defineExpose({
       :data-expand="groupExpand"
       :data-position="position"
       :style="messageGroupStyle"
+      v-bind="$attrs"
     >
       <TransitionGroup
         appear
@@ -316,7 +309,6 @@ defineExpose({
           :index="index"
           :item-data="item"
           @close="closeMessageById"
-          @set-height="setItemHeight"
         />
       </TransitionGroup>
     </section>

package/dist/components/message/types.d.ts

@@ -1,5 +1,5 @@
 import type { MessageItemType } from '../../composables/use-message'
-import type { ComponentPosition } from '../../types/shared/props'
+import type { ComponentPosition } from '../../types/shared'
 
 export interface MessageProps {
   max?: number
@@ -12,14 +12,3 @@ export interface MessageProps {
 export interface MessageEmits {
   close: [id: MessageItemType['id']]
 }
-
-export interface MessageItemProps {
-  max: number
-  index: number
-  itemData: MessageItemType
-}
-
-export interface MessageItemEmits {
-  close: [key: MessageItemType['id']]
-  'set-height': [info: MessageItemHeightType]
-}

package/dist/components/message-item/index.d.vue.ts

@@ -1,10 +1,8 @@
-import type { MessageItemProps } from '../message/types';
+import type { MessageItemProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<MessageItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (key: string | number | undefined) => any;
-    "set-height": (info: MessageItemHeightType) => any;
 }, string, import("vue").PublicProps, Readonly<MessageItemProps> & Readonly<{
     onClose?: ((key: string | number | undefined) => any) | undefined;
-    "onSet-height"?: ((info: MessageItemHeightType) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/message-item/index.vue

@@ -5,7 +5,7 @@ import ErrorFillIcon from "@gdsicon/vue/cross-circle-fill";
 import InformationFillIcon from "@gdsicon/vue/information-fill";
 import LoadingIcon from "@gdsicon/vue/loader-circle";
 import WarningFillIcon from "@gdsicon/vue/warning-fill";
-import { computed, onMounted, shallowRef } from "vue";
+import { computed, onMounted, shallowRef, watch } from "vue";
 import PButton from "../button/index.vue";
 defineOptions({
   name: "PMessageItem",
@@ -16,7 +16,7 @@ const props = defineProps({
   index: { type: Number, required: true },
   itemData: { type: Object, required: true }
 });
-const emits = defineEmits(["close", "set-height"]);
+const emits = defineEmits(["close"]);
 const TYPE_ICONS = {
   info: InformationFillIcon,
   success: SuccessFillIcon,
@@ -46,12 +46,17 @@ function setItemHeightInfo() {
     return;
   }
   const rect = itemRef.value.getBoundingClientRect();
-  const info = {
-    id: props.itemData.id,
-    height: rect.height
-  };
-  emits("set-height", info);
+  props.itemData.height = rect.height;
 }
+watch(
+  () => props.itemData.message,
+  () => {
+    if (!itemRef.value) {
+      return;
+    }
+    setItemHeightInfo();
+  }
+);
 onMounted(() => {
   setItemHeightInfo();
 });
@@ -66,6 +71,7 @@ onMounted(() => {
     :style="computedStyle"
     class="pxd-message--item px-3 py-2 text-sm flex w-full max-w-full shrink-0 transform-(--message-item-transform) rounded-lg bg-background-100 break-all whitespace-pre-wrap shadow-border-modal outline-none motion-safe:transition-(--message-item-transition)"
     :class="[itemData.class, { 'pr-9': itemData.closeable }]"
+    v-bind="$attrs"
   >
     <Component
       :is="TYPE_ICONS[itemData.type]"

package/dist/components/message-item/types.d.ts

@@ -0,0 +1,11 @@
+import type { MessageItemConfig } from '../../composables/use-message'
+
+export interface MessageItemProps {
+  max: number
+  index: number
+  itemData: MessageItemConfig
+}
+
+export interface MessageItemEmits {
+  close: [key: MessageItemConfig['id']]
+}

package/dist/components/modal/index.d.vue.ts

@@ -28,10 +28,11 @@ declare const __VLS_base: import("vue").DefineComponent<ModalProps, {}, {}, {},
 }>, {
     modelValue: boolean;
     closeOnPressEscape: boolean;
+    autoFocusElement: string | boolean;
     appendToBody: boolean;
     closeOnClickOverlay: boolean;
-    headerStylize: boolean;
-    footerStylize: boolean;
+    defaultHeaderStyle: boolean;
+    defaultFooterStyle: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/modal/index.vue

@@ -19,13 +19,13 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   modelValue: { type: Boolean, required: false, default: false },
   appendToBody: { type: Boolean, required: false, default: true },
-  headerStylize: { type: Boolean, required: false, default: false },
-  footerStylize: { type: Boolean, required: false, default: true },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
+  autoFocusElement: { type: [String, Boolean], required: false, default: false },
+  defaultHeaderStyle: { type: Boolean, required: false, default: false },
+  defaultFooterStyle: { type: Boolean, required: false, default: true },
   closeOnPressEscape: { type: Boolean, required: false, default: false },
-  closeOnClickOverlay: { type: Boolean, required: false, default: false },
-  initialFocus: { type: [String, Boolean], required: false }
+  closeOnClickOverlay: { type: Boolean, required: false, default: false }
 });
 const emits = defineEmits(["show", "hide", "change", "visible-change", "outside-click", "update:modelValue"]);
 const modalRef = shallowRef();
@@ -33,11 +33,16 @@ const isVisible = useModelValue(props, emits);
 const computedStyle = computed(() => {
   return { "--modal-width": getCssUnitValue(props.width) };
 });
-useFocusTrap(modalRef, {
-  initialFocus: props.initialFocus,
+const defaultStyles = computed(() => ({
+  headerClass: props.defaultHeaderStyle ? "pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100" : "",
+  footerClass: props.defaultFooterStyle ? "border-t pt-4 bg-background-200 dark:bg-background-100" : ""
+}));
+const focusTrapOptions = computed(() => ({
+  autoFocusElement: props.autoFocusElement,
   escapeDeactivates: props.closeOnPressEscape,
   clickOutsideDeactivates: props.closeOnClickOverlay
-});
+}));
+useFocusTrap(modalRef, focusTrapOptions);
 function closeOverlayIfNeed() {
   if (isTruthyProp(props.loading)) {
     return;
@@ -76,9 +81,10 @@ watch(
       <div
         v-if="isVisible"
         ref="modalRef"
-        aria-modal="true"
         role="dialog"
         tabindex="-1"
+        aria-modal="true"
+        :aria-expanded="isVisible"
         class="pxd-modal group/modal left-0 translate-z-0 sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:[--o:0] sm:[--t:scale(0.98)] sm:w-[var(--modal-width,540px)] max-sm:bottom-0 pointer-events-auto fixed z-10 flex w-full max-w-full flex-col overflow-hidden rounded-t-lg bg-background-100 shadow-border-modal outline-none motion-safe:transition-all dark:bg-background-200"
         :class="wrapperClass"
         :style="computedStyle"
@@ -86,9 +92,7 @@ watch(
       >
         <header
           class="pxd-modal--header px-6 pt-4 sm:pt-6 empty:py-3 relative shrink-0"
-          :class="{
-  'pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100': headerStylize
-}"
+          :class="defaultStyles.headerClass"
         >
           <slot name="header">
             <h3
@@ -117,8 +121,8 @@ watch(
 
         <footer
           v-if="$slots.footer"
-          class="pxd-modal--footer p-4 gap-2 relative flex shrink-0 items-center justify-between"
-          :class="{ 'border-t bg-background-200 dark:bg-background-100': footerStylize }"
+          class="pxd-modal--footer px-4 pb-4 gap-2 relative flex shrink-0 items-center justify-between"
+          :class="defaultStyles.footerClass"
         >
           <slot name="footer" />
         </footer>

package/dist/components/modal/types.d.ts

@@ -7,13 +7,13 @@ export interface ModalProps {
   loading?: boolean
   modelValue?: boolean
   appendToBody?: boolean
-  headerStylize?: boolean
-  footerStylize?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
+  autoFocusElement?: string | boolean
+  defaultHeaderStyle?: boolean
+  defaultFooterStyle?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
-  initialFocus?: string | false
 }
 
 export interface ModalEmits {

package/dist/components/noise-background/index.vue

@@ -1,14 +1,15 @@
 <script setup>
 defineOptions({
-  name: "PNoiseBackground"
+  name: "PNoiseBackground",
+  inheritAttrs: false
 });
 defineProps({
-  as: { type: null, required: false, default: "div" }
+  as: { type: [String, Object], required: false, default: "div" }
 });
 </script>
 
 <template>
-  <Component :is="as" class="pxd-noise-background relative">
+  <Component :is="as" class="pxd-noise-background relative" v-bind="$attrs">
     <slot />
   </Component>
 </template>

package/dist/components/note/index.d.vue.ts

@@ -1,4 +1,3 @@
-import { noteVariant } from './cn';
 import type { NoteProps } from './types';
 declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
@@ -10,7 +9,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<NoteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NoteProps> & Readonly<{}>, {
     label: boolean | import("../../types/shared").ComponentLabel;
-    variant: keyof typeof noteVariant.variants.variant;
+    variant: import("./types").NoteVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/note/index.vue

@@ -3,47 +3,99 @@ import CheckCircleIcon from "@gdsicon/vue/check-circle";
 import InformationIcon from "@gdsicon/vue/information";
 import StopIcon from "@gdsicon/vue/stop";
 import WarningIcon from "@gdsicon/vue/warning";
+import { tv } from "tailwind-variants";
 import { computed, h } from "vue";
-import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useConfigProvider } from "../../contexts/config-provider";
 import { isTruthyProp } from "../../utils/format";
-import { noteVariant } from "./cn";
 defineOptions({
-  name: "PNote"
+  name: "PNote",
+  inheritAttrs: false
 });
 const props = defineProps({
-  variant: { type: null, required: false, default: "default" },
+  variant: { type: String, required: false, default: "default" },
   size: { type: String, required: false },
   fill: { type: Boolean, required: false },
   label: { type: [Boolean, String, Number, Array, null], required: false, default: true }
 });
-const configProvider = useConfigProvider();
-const VARIANTS = {
-  success: {
-    icon: CheckCircleIcon
-  },
-  error: {
-    icon: StopIcon
-  },
-  warning: {
-    icon: WarningIcon
-  },
-  default: {
-    icon: InformationIcon
+const noteVariant = tv({
+  base: "pxd-note gap-2 sm:items-center max-sm:flex-col flex max-w-full rounded-md border",
+  variants: {
+    size: {
+      sm: "px-2 py-1.5 text-xs",
+      md: "px-3 py-2 text-sm",
+      lg: "px-4 py-2.5 text-base"
+    },
+    variant: {
+      success: {
+        base: "border-blue-500 text-blue-900",
+        fill: "border-blue-100 bg-blue-200 text-blue-900"
+      },
+      error: {
+        base: "border-red-500 text-red-900",
+        fill: "border-red-100 bg-red-200 text-red-900"
+      },
+      warning: {
+        base: "border-amber-500 text-amber-900",
+        fill: "border-amber-100 bg-amber-200 text-amber-900"
+      },
+      default: {
+        base: "border-input text-gray-900",
+        fill: "border-gray-100 bg-gray-200 text-gray-900"
+      },
+      primary: {
+        base: "border-gray-alpha-400 text-primary",
+        fill: "border-gray-100 bg-primary text-gray-100"
+      },
+      violet: {
+        base: "text-violet-900 border-violet-400",
+        fill: "text-violet-900 bg-violet-200 border-violet-100"
+      },
+      cyan: {
+        base: "border-teal-400 text-teal-900",
+        fill: "border-teal-100 bg-teal-200 text-teal-900"
+      }
+    },
+    fill: {
+      true: {},
+      false: {}
+    }
   },
-  primary: {
-    icon: InformationIcon
-  },
-  violet: {
-    icon: InformationIcon
-  },
-  cyan: {
-    icon: InformationIcon
+  compoundVariants: [
+    { variant: "success", fill: true, class: "border-blue-100 bg-blue-200 text-blue-900" },
+    { variant: "success", fill: false, class: "border-blue-500 text-blue-900" },
+    { variant: "error", fill: true, class: "border-red-100 bg-red-200 text-red-900" },
+    { variant: "error", fill: false, class: "border-red-500 text-red-900" },
+    { variant: "warning", fill: true, class: "border-amber-100 bg-amber-200 text-amber-900" },
+    { variant: "warning", fill: false, class: "border-amber-500 text-amber-900" },
+    { variant: "default", fill: true, class: "border-gray-100 bg-gray-200 text-gray-900" },
+    { variant: "default", fill: false, class: "border-input text-gray-900" },
+    { variant: "primary", fill: true, class: "border-gray-100 bg-primary text-gray-100" },
+    { variant: "primary", fill: false, class: "border-gray-alpha-400 text-primary" },
+    { variant: "violet", fill: true, class: "text-violet-900 bg-violet-200 border-violet-100" },
+    { variant: "violet", fill: false, class: "text-violet-900 border-violet-400" },
+    { variant: "cyan", fill: true, class: "border-teal-100 bg-teal-200 text-teal-900" },
+    { variant: "cyan", fill: false, class: "border-teal-400 text-teal-900" }
+  ],
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+    fill: false
   }
+});
+const configProvider = useConfigProvider();
+const VARIANTS_ICON = {
+  success: CheckCircleIcon,
+  error: StopIcon,
+  warning: WarningIcon,
+  default: InformationIcon,
+  primary: InformationIcon,
+  violet: InformationIcon,
+  cyan: InformationIcon
 };
 const computedLabel = computed(() => {
   const { label } = props;
   if (isTruthyProp(label)) {
-    return VARIANTS[props.variant]?.icon || InformationIcon;
+    return VARIANTS_ICON[props.variant] || InformationIcon;
   }
   if (typeof label === "string" && label) {
     return h("span", null, label);
@@ -60,8 +112,8 @@ const computedClasses = computed(() => {
 </script>
 
 <template>
-  <div :class="computedClasses">
-    <div class="gap-3 flex flex-1">
+  <div :class="computedClasses" v-bind="$attrs">
+    <div class="gap-3 flex flex-1 shrink-0">
       <slot v-if="computedLabel" name="label">
         <Component :is="computedLabel" class="size-4 font-medium h-lh shrink-0" />
       </slot>
@@ -71,7 +123,7 @@ const computedClasses = computed(() => {
       </span>
     </div>
 
-    <div v-if="$slots.action" class="pxd-note--action">
+    <div v-if="$slots.action" class="pxd-note--action max-sm:pl-7 shrink-0">
       <slot name="action" />
     </div>
   </div>

package/dist/components/note/types.d.ts

@@ -1,8 +1,16 @@
 import type { ComponentLabel, ComponentSize } from '../../types/shared'
-import type { noteVariant } from './cn'
+
+export type NoteVariant =
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'default'
+  | 'primary'
+  | 'violet'
+  | 'cyan'
 
 export interface NoteProps {
-  variant?: keyof typeof noteVariant.variants.variant
+  variant?: NoteVariant
   size?: ComponentSize
   fill?: boolean
   label?: boolean | ComponentLabel

package/dist/components/number-input/index.d.vue.ts

@@ -11,21 +11,22 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<NumberInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     input: (args_0: number | null | undefined) => any;
-    blur: (args_0: FocusEvent) => any;
     change: (args_0: number | null | undefined, args_1: Event) => any;
-    focus: (args_0: FocusEvent) => any;
     "update:modelValue": (args_0: number | null | undefined) => any;
+    blur: (args_0: FocusEvent) => any;
+    focus: (args_0: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<NumberInputProps> & Readonly<{
     onInput?: ((args_0: number | null | undefined) => any) | undefined;
-    onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onChange?: ((args_0: number | null | undefined, args_1: Event) => any) | undefined;
-    onFocus?: ((args_0: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: number | null | undefined) => any) | undefined;
+    onBlur?: ((args_0: FocusEvent) => any) | undefined;
+    onFocus?: ((args_0: FocusEvent) => any) | undefined;
 }>, {
     max: number;
     min: number;
     clearValue: number | null;
     step: number;
+    thousandsSeparator: string;
     scientific: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/number-input/index.vue

@@ -2,7 +2,7 @@
 import MinusIcon from "@gdsicon/vue/minus";
 import PlusIcon from "@gdsicon/vue/plus";
 import { isNil, isNumber, isUndefined } from "es-toolkit";
-import { computed, reactive, watch } from "vue";
+import { computed, reactive, shallowRef, watch } from "vue";
 import { useRepeatAction } from "../../composables/use-repeat-action";
 import { NOOP } from "../../utils/event";
 import PInput from "../input/index.vue";
@@ -21,6 +21,8 @@ const props = defineProps({
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   precision: { type: Number, required: false },
+  thousands: { type: Boolean, required: false },
+  thousandsSeparator: { type: String, required: false, default: "," },
   scientific: { type: Boolean, required: false, default: true },
   clearValue: { type: [Number, null], required: false, default: null },
   modelValue: { type: [Number, null], required: false }
@@ -35,10 +37,22 @@ const modelValue = computed({
     emits("update:modelValue", value);
   }
 });
+const REGEXPS = {
+  "remove-leading-zeros": /^(-?)0+(?=\d)/,
+  "thousands-separator": /\B(?=(\d{3})+(?!\d))/g
+};
+const isFocused = shallowRef(false);
 const inputData = reactive({
   currentValue: props.modelValue,
   userInput: null
 });
+function formatWithThousands(value) {
+  const str = String(value);
+  const dotIndex = str.indexOf(".");
+  const intPart = dotIndex === -1 ? str : str.slice(0, dotIndex);
+  const decPart = dotIndex === -1 ? "" : str.slice(dotIndex);
+  return intPart.replace(REGEXPS["thousands-separator"], props.thousandsSeparator) + decPart;
+}
 const inputValue = computed(() => {
   if (inputData.userInput !== null) {
     return inputData.userInput;
@@ -55,6 +69,9 @@ const inputValue = computed(() => {
       currentValue = currentValue.toFixed(props.precision);
     }
   }
+  if (props.thousands && !isFocused.value) {
+    return formatWithThousands(currentValue);
+  }
   return currentValue;
 });
 const decreaseDisabled = computed(
@@ -138,10 +155,19 @@ function onInputKeydown(ev) {
   }
 }
 function onInputFocus(event) {
+  isFocused.value = true;
   emits("focus", event);
 }
 function onInputBlur(event) {
+  isFocused.value = false;
   inputData.userInput = null;
+  if (isNumber(inputData.currentValue)) {
+    const clamped = clampToRange(inputData.currentValue);
+    if (clamped !== inputData.currentValue) {
+      inputData.currentValue = clamped;
+      modelValue.value = clamped;
+    }
+  }
   if (inputData.currentValue === null) {
     ;
     event.target.value = "";
@@ -149,13 +175,17 @@ function onInputBlur(event) {
   emits("blur", event);
 }
 function onInputInput(value) {
-  inputData.userInput = value;
-  const newValue = value === "" ? null : Number.parseFloat(value);
+  const normalized = value.replace(REGEXPS["remove-leading-zeros"], "$1");
+  inputData.userInput = normalized;
+  const newValue = normalized === "" ? null : Number.parseFloat(normalized);
   inputData.currentValue = toPrecision(newValue ?? 0);
   modelValue.value = inputData.currentValue;
 }
 function onInputChange(value, event) {
-  const newValue = toPrecision(value === "" ? null : Number.parseFloat(value));
+  let newValue = toPrecision(value === "" ? null : Number.parseFloat(value));
+  if (isNumber(newValue)) {
+    newValue = clampToRange(newValue);
+  }
   emits("change", newValue, event);
 }
 watch(
@@ -179,10 +209,10 @@ watch(
     input-type="number"
     :disabled="disabled"
     :readonly="readonly"
-    :prefix-style="false"
-    :suffix-style="false"
     :clear-value="clearValue"
     :model-value="inputValue"
+    :default-prefix-style="false"
+    :default-suffix-style="false"
     @blur="onInputBlur"
     @focus="onInputFocus"
     @input="onInputInput"