pxd 0.1.2 → 0.1.3

package/dist/components/mention/index.vue

@@ -6,8 +6,9 @@ import { useModelValue } from "../../composables/_internal/use-model-value.js";
 import { usePopoverResponsive } from "../../composables/_internal/use-popover-responsive.js";
 import { useToggleValue } from "../../composables/use-toggle-value.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
+import { DEFAULT_TRIGGER } from "../../utils/_internal/mention-html.js";
+import { isCompositionKeydown } from "../../utils/event.js";
 import { getUniqueId } from "../../utils/helper.js";
-import { DEFAULT_TRIGGER } from "../../utils/mention-html.js";
 import PMentionEditor from "../_internal/mention-editor.vue";
 import PList from "../list/index.vue";
 import PPopover from "../popover/index.vue";
@@ -73,18 +74,16 @@ const emits = defineEmits([
 	"mention-click",
 	"update:modelValue"
 ]);
-const modelValue = useModelValue(props, emits);
-const configProvider = useConfigProvider();
-const { isAdaptive, responsiveClasses } = usePopoverResponsive();
 const listId = getUniqueId("mention-list");
 const searchInputId = getUniqueId("mention-search");
-const { value: popoverVisible, toggle: togglePopoverVisible } = useToggleValue(false);
 const editorRef = shallowRef();
 const listRef = shallowRef();
 const searchInputRef = shallowRef();
-function resolveOptions(trigger) {
-	return typeof props.options === "function" ? props.options(trigger) : props.options;
-}
+const modelValue = useModelValue(props, emits);
+const configProvider = useConfigProvider();
+const computedSize = computed(() => props.size || configProvider.size);
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const { value: popoverVisible, toggle: togglePopoverVisible } = useToggleValue(false);
 const { filterKeyword, listOptions, isEmptyResult, isPending, open: openSuggest, close: closeSuggest, setKeyword } = useMentionSuggest({
 	getOptions: resolveOptions,
 	getFilterMethod: () => props.filterMethod,
@@ -96,11 +95,6 @@ const { filterKeyword, listOptions, isEmptyResult, isPending, open: openSuggest,
 // list only has to stay out of the way before anything has been asked: an unfiltered
 // empty list reads as "no results for ''" the moment the popover opens.
 const shouldRenderList = computed(() => listOptions.value.length > 0 || isPending.value || isEmptyResult.value);
-const computedSize = computed(() => props.size || configProvider.size);
-watch(listOptions, async () => {
-	await nextTick();
-	listRef.value?.setFirstAsActive();
-});
 const { onKeydown: onSearchKeydown } = useListKeyboardController({
 	enabled: () => popoverVisible.value && !isPending.value,
 	onCommand: (command) => listRef.value?.dispatch(command) ?? false,
@@ -112,6 +106,9 @@ const { onKeydown: onSearchKeydown } = useListKeyboardController({
 		End: "last"
 	}
 });
+function resolveOptions(trigger) {
+	return typeof props.options === "function" ? props.options(trigger) : props.options;
+}
 async function focusSearchInput() {
 	await nextTick();
 	searchInputRef.value?.focus({ preventScroll: true });
@@ -127,7 +124,7 @@ function onSearchInput(ev) {
 	setKeyword(ev.target.value);
 }
 function onSearchKeydownWithEscape(ev) {
-	if (ev.key === "Escape" && props.closeOnPressEscape) {
+	if (ev.key === "Escape" && props.closeOnPressEscape && !isCompositionKeydown(ev)) {
 		ev.preventDefault();
 		ev.stopPropagation();
 		closeSuggest();
@@ -152,6 +149,10 @@ function onOptionSelect(item) {
 function onMentionClick(payload) {
 	emits("mention-click", payload);
 }
+watch(listOptions, async () => {
+	await nextTick();
+	listRef.value?.setFirstAsActive();
+});
 </script>
 
 <template>
@@ -188,64 +189,63 @@ function onMentionClick(payload) {
     />
 
     <template #content>
-      <div
-        class="pxd-mention--suggest max-h-80 min-w-56 flex flex-col overflow-hidden rounded-inherit"
+      <label
+        :for="searchInputId"
+        class="px-3 py-2 gap-2 flex items-center border-b bg-background-100"
       >
-        <label :for="searchInputId" class="px-3 py-2 gap-2 flex items-center bg-background-100">
-          <input
-            :id="searchInputId"
-            ref="searchInputRef"
-            :value="filterKeyword"
-            type="text"
-            autocomplete="off"
-            autocorrect="off"
-            spellcheck="false"
-            role="combobox"
-            inputmode="search"
-            aria-autocomplete="list"
-            :aria-controls="listId"
-            :aria-expanded="popoverVisible"
-            :aria-busy="isPending"
-            :aria-disabled="disabled"
-            :placeholder="searchPlaceholder"
-            class="pxd-mention--search h-7 min-w-0 text-sm flex-1 appearance-none border-none bg-transparent font-inherit text-foreground outline-none"
-            @input="onSearchInput"
-            @keydown="onSearchKeydownWithEscape"
-          />
+        <input
+          :id="searchInputId"
+          ref="searchInputRef"
+          :value="filterKeyword"
+          type="text"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          role="combobox"
+          inputmode="search"
+          aria-autocomplete="list"
+          :aria-controls="listId"
+          :aria-expanded="popoverVisible"
+          :aria-busy="isPending"
+          :aria-disabled="disabled"
+          :placeholder="searchPlaceholder"
+          class="pxd-mention--search h-7 min-w-0 text-sm flex-1 appearance-none border-none bg-transparent font-inherit text-foreground outline-none"
+          @input="onSearchInput"
+          @keydown="onSearchKeydownWithEscape"
+        />
 
-          <button
-            type="button"
-            class="px-1.5 h-5 text-xs shrink-0 cursor-pointer appearance-none rounded-sm border bg-background-100 self-focus-ring hover:bg-background-hover active:bg-background-active motion-safe:transition-colors"
-            @click="closeSuggest"
-          >
-            <kbd class="appearance-none font-sans">Esc</kbd>
-          </button>
-        </label>
-
-        <PList
-          v-show="shouldRenderList"
-          :id="listId"
-          ref="listRef"
-          :loop="false"
-          :virtual="virtual"
-          :loading="isPending"
-          :options="listOptions"
-          :default-active-index="0"
-          class="max-h-68 min-h-0 flex-1 rounded-none border-t"
-          @change="onOptionSelect"
+        <button
+          type="button"
+          class="px-1.5 h-5 text-xs shrink-0 cursor-pointer appearance-none rounded-sm border bg-background-100 self-focus-ring hover:bg-background-hover active:bg-background-active motion-safe:transition-colors"
+          @click="closeSuggest"
         >
-          <template v-if="$slots.item" #item="itemSlotProps">
-            <slot name="item" v-bind="itemSlotProps" />
-          </template>
+          <kbd class="appearance-none font-sans">Esc</kbd>
+        </button>
+      </label>
+
+      <PList
+        v-show="shouldRenderList"
+        :id="listId"
+        ref="listRef"
+        :loop="false"
+        :virtual="virtual"
+        :loading="isPending"
+        :options="listOptions"
+        :default-active-index="0"
+        class="max-h-68 min-h-0 flex-1"
+        @change="onOptionSelect"
+      >
+        <template v-if="$slots.item" #item="itemSlotProps">
+          <slot name="item" v-bind="itemSlotProps" />
+        </template>
 
-          <template #empty>
-            <slot name="empty">
-              {{ configProvider.locale.results.searchText }}
-              <span class="whitespace-pre text-foreground">"{{ filterKeyword }}"</span>
-            </slot>
-          </template>
-        </PList>
-      </div>
+        <template #empty>
+          <slot name="empty">
+            {{ configProvider.locale.results.searchText }}
+            <span class="whitespace-pre text-foreground">"{{ filterKeyword }}"</span>
+          </slot>
+        </template>
+      </PList>
     </template>
   </PPopover>
 </template>

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

@@ -1,17 +1,17 @@
 import type { ListModelValue } from '../list/types';
 import type { MenuProps } from './types';
-declare var __VLS_10: {
+declare var __VLS_9: {
     popoverVisible: boolean;
-}, __VLS_24: {
+}, __VLS_21: {
     item: import("../list/types").ListOption;
     index: number;
     group: import("../list/types").ListOptionGroup | undefined;
     groupIndex: number | undefined;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_9) => any;
 } & {
-    item?: (props: typeof __VLS_24) => any;
+    item?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: ListModelValue) => any;

package/dist/components/menu/index.vue

@@ -54,9 +54,8 @@ const props = defineProps({
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const listRef = shallowRef();
-const { selected, apply, reset, commit } = useListSelection(props, emits);
-const { isAdaptive, responsiveClasses } = usePopoverResponsive();
 const popoverVisible = shallowRef(false);
+const { selected, apply, reset, commit } = useListSelection(props, emits);
 // Action menus (no v-model) keep List uncontrolled so checkmarks never appear.
 // Selection menus forward the session `selected` that List already toggled.
 const listModelValue = computed(() => {
@@ -65,6 +64,7 @@ const listModelValue = computed(() => {
 	}
 	return selected.value;
 });
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
 const { onKeydown } = useListKeyboardController({
 	enabled: () => popoverVisible.value,
 	onCommand: (command) => listRef.value?.dispatch(command) ?? false,
@@ -77,6 +77,14 @@ const { onKeydown } = useListKeyboardController({
 		" ": "activate"
 	}
 });
+function onListModelUpdate(value) {
+	if (isNil(value)) {
+		return;
+	}
+	if (apply(value)) {
+		popoverVisible.value = false;
+	}
+}
 watch(popoverVisible, async (visible) => {
 	if (visible) {
 		reset();
@@ -86,14 +94,6 @@ watch(popoverVisible, async (visible) => {
 	}
 	commit();
 });
-function onListModelUpdate(value) {
-	if (isNil(value)) {
-		return;
-	}
-	if (apply(value)) {
-		popoverVisible.value = false;
-	}
-}
 </script>
 
 <template>

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

@@ -1,4 +1,4 @@
-import type { ComponentPosition } from '../../types/shared'
+import type { ComponentPosition } from '../../types/shared/props'
 import type { ListModelValue, ListOptions } from '../list/types'
 
 export interface MenuProps {

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

@@ -139,7 +139,7 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
 }>, {
     max: number;
     group: string;
-    position: import("../../types/shared/props.js").ComponentPosition<"top" | "bottom">;
+    position: import("../../types/shared/props.js").ComponentPosition<"bottom" | "top">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/message/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useMessageGroup } from "../../composables/_internal/use-message-group.js";
 import { useDocumentHidden } from "../../composables/use-document-hidden.js";
 import { UPDATE_MESSAGE_EVENT_NAME } from "../../composables/use-message.js";
 import { cachedOff, cachedOn } from "../../utils/event.js";
@@ -7,9 +8,6 @@ import { getCssUnitValue } from "../../utils/format.js";
 import { isServer } from "../../utils/is.js";
 import PMessageItem from "../message-item/index.vue";
 import PTeleport from "../teleport/index.vue";
-import { useGroupExpand } from "./composables/use-group-expand.js";
-import { useMessageTimer } from "./composables/use-message-timer.js";
-import { usePromiseMessage } from "./composables/use-promise-message.js";
 defineOptions({
 	name: "PMessage",
 	inheritAttrs: false
@@ -41,29 +39,25 @@ const props = defineProps({
 });
 const emits = defineEmits(["close"]);
 const groupMessages = ref([]);
-const { setAutoCloseTimer, pauseMessage, resumeMessage, clearTimers, pauseAll, resumeAll } = useMessageTimer(closeMessageById);
-const { handlePromiseMessage } = usePromiseMessage(setAutoCloseTimer);
-const { groupExpand, collapse, onPointerEnter, onPointerLeave } = useGroupExpand({
-	expand: () => props.expand,
-	onPauseAll: () => pauseAll(groupMessages.value),
-	onResumeAll: () => resumeAll(groupMessages.value)
-});
-useDocumentHidden((isHidden) => {
-	if (isHidden) {
-		pauseAll(groupMessages.value);
-	} else {
-		resumeAll(groupMessages.value);
-	}
-});
 const messageGroupStyle = computed(() => {
 	const frontHeight = groupMessages.value[0]?.height || 0;
-	const visibleItemCounts = Math.min(props.max, groupMessages.value.length);
 	return {
 		"--message-width": getCssUnitValue(props.width),
-		"--message-items": visibleItemCounts,
 		"--message-front-height": getCssUnitValue(frontHeight)
 	};
 });
+const { groupExpand, collapse, onPointerEnter, onPointerLeave, startTimer, clearTimer, clearTimers, pauseMessage, resumeMessage, pauseAll, resumeAll, handlePromiseMessage } = useMessageGroup({
+	messages: groupMessages,
+	expand: () => props.expand,
+	onTimeout: closeMessageById
+});
+useDocumentHidden((isHidden) => {
+	if (isHidden) {
+		pauseAll();
+	} else {
+		resumeAll();
+	}
+});
 function getMessageById(id) {
 	const index = groupMessages.value.findIndex((m) => m.id === id);
 	const message = groupMessages.value[index];
@@ -101,10 +95,7 @@ function closeMessageById(id) {
 	if (!message) {
 		return;
 	}
-	if (message._timerId) {
-		clearTimeout(message._timerId);
-		message._timerId = undefined;
-	}
+	clearTimer(message);
 	groupMessages.value.splice(index, 1);
 	// Avoid manually closing all data and maintaining the expanded state when creating again
 	if (!props.expand && groupMessages.value.length === 0) {
@@ -113,8 +104,11 @@ function closeMessageById(id) {
 	emits("close", id);
 }
 function clearMessage() {
-	clearTimers(groupMessages.value);
+	clearTimers();
 	groupMessages.value = [];
+	if (!props.expand) {
+		collapse();
+	}
 }
 function handleCreateMessage(data) {
 	if (!data || data.group !== props.group) {
@@ -130,7 +124,7 @@ function handleCreateMessage(data) {
 	if (isPromiseLoading) {
 		handlePromiseMessage(message);
 	} else if (message.durations) {
-		setAutoCloseTimer(message);
+		startTimer(message);
 	}
 }
 function onUpdateMessage({ detail }) {

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

@@ -1,5 +1,5 @@
 import type { MessageItemConfig } from '../../composables/use-message'
-import type { ComponentPosition } from '../../types/shared'
+import type { ComponentPosition } from '../../types/shared/props'
 
 export interface MessageProps {
   max?: number

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

@@ -41,6 +41,7 @@ const computedStyle = computed(() => {
 		"--message-item-index": index,
 		"z-index": max - index,
 		opacity: isVisible ? 1 : 0,
+		position: isVisible ? undefined : "absolute",
 		"pointer-events": isVisible ? "auto" : "none"
 	};
 });
@@ -58,12 +59,7 @@ function setItemHeightInfo() {
 	// otherwise, the type of the promise data cannot be updated.
 	props.itemData.height = itemRef.value.offsetHeight;
 }
-watch(() => props.itemData.message, () => {
-	if (!itemRef.value) {
-		return;
-	}
-	setItemHeightInfo();
-});
+watch(() => props.itemData.message, setItemHeightInfo, { flush: "post" });
 onMounted(() => {
 	setItemHeightInfo();
 });

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

@@ -1,15 +1,15 @@
 import type { ModalProps } from './types';
-declare var __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {};
+declare var __VLS_16: {}, __VLS_18: {}, __VLS_20: {}, __VLS_35: {}, __VLS_37: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_17) => any;
+    header?: (props: typeof __VLS_16) => any;
 } & {
-    title?: (props: typeof __VLS_19) => any;
+    title?: (props: typeof __VLS_18) => any;
 } & {
-    subtitle?: (props: typeof __VLS_21) => any;
+    subtitle?: (props: typeof __VLS_20) => any;
 } & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_35) => any;
 } & {
-    footer?: (props: typeof __VLS_25) => any;
+    footer?: (props: typeof __VLS_37) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: boolean) => any;
@@ -26,9 +26,9 @@ declare const __VLS_base: import("vue").DefineComponent<ModalProps, {}, {}, {},
     onHide?: (() => any) | undefined;
     "onVisible-change"?: ((visible: boolean) => any) | undefined;
 }>, {
+    closeable: boolean;
     modelValue: boolean;
     closeOnPressEscape: boolean;
-    appendToBody: boolean;
     autoFocusElement: string | boolean;
     closeOnClickOverlay: boolean;
     defaultHeaderStyle: boolean;

package/dist/components/modal/index.vue

@@ -1,10 +1,12 @@
 <script setup>
+import CrossIcon from "@gdsicon/vue/cross";
 import { computed, shallowRef, watch } from "vue";
 import { useModelValue } from "../../composables/_internal/use-model-value.js";
 import { useOverlayDialog } from "../../composables/_internal/use-overlay-dialog.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
 import { getCssUnitValue } from "../../utils/format.js";
 import PLoadingMask from "../_internal/loading-mask.vue";
+import PButton from "../button/index.vue";
 import POverlay from "../overlay/index.vue";
 defineOptions({
 	name: "PModal",
@@ -44,11 +46,6 @@ const props = defineProps({
 		type: String,
 		required: false
 	},
-	appendToBody: {
-		type: Boolean,
-		required: false,
-		default: true
-	},
 	wrapperClass: {
 		type: [
 			String,
@@ -83,9 +80,14 @@ const props = defineProps({
 	closeOnPressEscape: {
 		type: Boolean,
 		required: false,
-		default: false
+		default: true
 	},
 	closeOnClickOverlay: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeable: {
 		type: Boolean,
 		required: false,
 		default: false
@@ -100,8 +102,6 @@ const emits = defineEmits([
 	"update:modelValue"
 ]);
 const modalRef = shallowRef();
-const isVisible = useModelValue(props, emits);
-const configProvider = useConfigProvider();
 const computedStyle = computed(() => {
 	return {
 		"--modal-index": props.zIndex,
@@ -112,6 +112,8 @@ const defaultStyles = computed(() => ({
 	headerClass: props.defaultHeaderStyle ? "pbe-4 sm:pbe-6 border-b bg-background-200 dark:bg-background-100" : "",
 	footerClass: props.defaultFooterStyle ? "border-t pbs-4 bg-background-200 dark:bg-background-100" : ""
 }));
+const isVisible = useModelValue(props, emits);
+const configProvider = useConfigProvider();
 const { closeOverlayIfNeed, onOverlayClick } = useOverlayDialog({
 	props,
 	emits,
@@ -133,7 +135,7 @@ watch(() => isVisible.value, (visible) => {
 <template>
   <POverlay
     :model-value="isVisible"
-    :append-to-body="appendToBody"
+    :z-index="zIndex"
     :close-on-press-escape="closeOnPressEscape"
     @escape="closeOverlayIfNeed"
     @click="onOverlayClick"
@@ -155,8 +157,8 @@ watch(() => isVisible.value, (visible) => {
         v-bind="$attrs"
       >
         <header
-          class="pxd-modal--header px-6 pbs-4 sm:pbs-6 empty:py-3 relative shrink-0"
-          :class="defaultStyles.headerClass"
+          class="pxd-modal--header px-6 pbs-4 sm:pbs-6 relative shrink-0 empty:hidden"
+          :class="[defaultStyles.headerClass, { 'pe-15': closeable }]"
         >
           <slot name="header">
             <h3
@@ -174,6 +176,19 @@ watch(() => isVisible.value, (visible) => {
               </slot>
             </div>
           </slot>
+
+          <PButton
+            v-if="closeable"
+            variant="ghost"
+            size="sm"
+            icon
+            class="top-4 right-6 sm:top-6 size-7 absolute"
+            :aria-label="configProvider.locale.interaction.close"
+            :title="configProvider.locale.interaction.close"
+            @click="closeOverlayIfNeed"
+          >
+            <CrossIcon class="size-3" aria-hidden="true" />
+          </PButton>
         </header>
 
         <div

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

@@ -1,4 +1,4 @@
-import type { ComponentClass, ComponentLabel } from '../../types/shared'
+import type { ComponentClass, ComponentLabel } from '../../types/shared/props'
 
 export interface ModalProps {
   zIndex?: number
@@ -8,7 +8,6 @@ export interface ModalProps {
   loading?: boolean
   modelValue?: boolean
   loadingText?: string
-  appendToBody?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
   autoFocusElement?: string | boolean
@@ -16,6 +15,7 @@ export interface ModalProps {
   defaultFooterStyle?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
+  closeable?: boolean
 }
 
 export interface ModalEmits {

package/dist/components/noise-background/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentAs } from '../../types/shared'
+import type { ComponentAs } from '../../types/shared/props'
 import type { CSSProperties } from 'vue'
 
 export interface NoiseBackgroundProps {

package/dist/components/note/index.vue

@@ -25,6 +25,10 @@ const props = defineProps({
 		type: Boolean,
 		required: false
 	},
+	text: {
+		type: String,
+		required: false
+	},
 	label: {
 		type: [
 			Boolean,
@@ -37,7 +41,6 @@ const props = defineProps({
 		default: true
 	}
 });
-const configProvider = useConfigProvider();
 const VARIANTS_ICON = {
 	success: CheckCircleIcon,
 	error: StopIcon,
@@ -57,6 +60,7 @@ const computedLabel = computed(() => {
 	}
 	return false;
 });
+const configProvider = useConfigProvider();
 const { attrs, classes } = useTailwindVariant({
 	base: "pxd-note gap-2 sm:items-center max-sm:flex-col flex max-w-full rounded-md border",
 	variants: {
@@ -129,7 +133,7 @@ const { attrs, classes } = useTailwindVariant({
       </slot>
 
       <span class="flex-1 shrink-0">
-        <slot />
+        <slot>{{ text }}</slot>
       </span>
     </div>
 

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentSize } from '../../types/shared'
+import type { ComponentLabel, ComponentSize } from '../../types/shared/props'
 
 export type NoteVariant =
   | 'success'
@@ -14,5 +14,6 @@ export interface NoteProps {
   variant?: NoteVariant
   size?: ComponentSize
   fill?: boolean
+  text?: string
   label?: boolean | ComponentLabel
 }

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

@@ -1,13 +1,17 @@
 import type { NumberInputProps } from './types';
-declare var __VLS_15: {}, __VLS_22: {}, __VLS_25: {}, __VLS_27: {};
+declare var __VLS_14: {}, __VLS_21: {}, __VLS_24: {}, __VLS_26: {}, __VLS_33: {}, __VLS_40: {};
 type __VLS_Slots = {} & {
-    minusIcon?: (props: typeof __VLS_15) => any;
+    minusIcon?: (props: typeof __VLS_14) => any;
 } & {
-    prefix?: (props: typeof __VLS_22) => any;
+    prefix?: (props: typeof __VLS_21) => any;
 } & {
-    suffix?: (props: typeof __VLS_25) => any;
+    suffix?: (props: typeof __VLS_24) => any;
 } & {
-    plusIcon?: (props: typeof __VLS_27) => any;
+    plusIcon?: (props: typeof __VLS_26) => any;
+} & {
+    minusIcon?: (props: typeof __VLS_33) => any;
+} & {
+    plusIcon?: (props: typeof __VLS_40) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NumberInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: number | null | undefined, args_1: Event) => any;
@@ -25,8 +29,9 @@ declare const __VLS_base: import("vue").DefineComponent<NumberInputProps, {}, {}
     min: number;
     clearValue: number | null;
     controls: boolean;
-    thousandsSeparator: string;
     scientific: boolean;
+    controlsPosition: "right" | "sides";
+    thousandsSeparator: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;