20260720172840

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/_semantic.md

@@ -0,0 +1,50 @@
+# _semantic
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SemanticPreview } from '@/components/semantic'
+import { useComponentLocale } from '@/composables/use-locale'
+import { locales } from '../locales'
+
+const { t } = useComponentLocale(locales)
+
+const semantics = computed(() => [
+  { name: 'root', desc: t('root') },
+  { name: 'prefix', desc: t('prefix') },
+  { name: 'input', desc: t('input') },
+  { name: 'suffix', desc: t('suffix') },
+  { name: 'actions', desc: t('actions') },
+  { name: 'action', desc: t('action') },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="InputNumber"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <div :style="{ display: 'flex', flexDirection: 'column', gap: '16px' }">
+        <a-input-number
+          prefix="￥"
+          suffix="RMB"
+          :default-value="100"
+          :style="{ width: '200px' }"
+          :styles="{ actions: { opacity: 1, width: '24px' }, suffix: { marginRight: '28px' } }"
+          :classes="classes"
+        />
+        <a-input-number
+          :default-value="100"
+          :style="{ width: '200px' }"
+          :styles="{ actions: { opacity: 1, width: '24px' }, suffix: { marginRight: '28px' } }"
+          mode="spinner"
+          :classes="classes"
+        />
+      </div>
+    </template>
+  </SemanticPreview>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/basic.md

@@ -0,0 +1,19 @@
+# Basic
+
+## Description (en-US)
+
+Numeric-only input box.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref(3)
+</script>
+
+<template>
+  <a-input-number v-model:value="value" :min="1" :max="10" />
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/change-on-wheel.md

@@ -0,0 +1,24 @@
+# Wheel
+
+## Description (en-US)
+
+Control with mouse wheel.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+function onChange(value: number) {
+  console.log('changed', value)
+}
+const value = ref(3)
+</script>
+
+<template>
+  <a-input-number
+    v-model:value="value" :min="1" :max="10" change-on-wheel @change="onChange"
+  />
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/digit.md

@@ -0,0 +1,30 @@
+# High precision decimals
+
+## Description (en-US)
+
+Use `stringMode` to support high precision decimals support. `onChange` will return string value instead. You need polyfill of BigInt if browser not support.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+function onChange(value: string) {
+  console.log('changed', value)
+}
+const value = ref(1)
+</script>
+
+<template>
+  <a-input-number
+    v-model:value="value"
+    style="width: 200px;"
+    min="0"
+    max="10"
+    step="0.00000000000001"
+    string-mode
+    @change="onChange"
+  />
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/disabled.md

@@ -0,0 +1,31 @@
+# Disabled
+
+## Description (en-US)
+
+Click the button to toggle between available and disabled states.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const disabled = ref(true)
+
+function toggle() {
+  disabled.value = !disabled.value
+}
+const value = ref(3)
+</script>
+
+<template>
+  <div>
+    <a-input-number v-model:value="value" :min="1" :max="10" :disabled="disabled" />
+    <div style="margin-top: 20px;">
+      <a-button type="primary" @click="toggle">
+        Toggle disabled
+      </a-button>
+    </div>
+  </div>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/focus.md

@@ -0,0 +1,39 @@
+# Focus
+
+## Description (en-US)
+
+Focus with additional option.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+
+const value = ref(999)
+const inputRef = useTemplateRef('input')
+function handleFocus(options: unknown) {
+  inputRef.value?.focus(options)
+}
+</script>
+
+<template>
+  <a-space vertical style="width: 100%;">
+    <a-space wrap>
+      <a-button @click="() => handleFocus({ cursor: 'start' })">
+        Focus at first
+      </a-button>
+      <a-button @click="() => handleFocus({ cursor: 'end' })">
+        Focus at last
+      </a-button>
+      <a-button @click="() => handleFocus({ cursor: 'all' })">
+        Focus to select all
+      </a-button>
+      <a-button @click="() => handleFocus({ preventScroll: true })">
+        Focus prevent scroll
+      </a-button>
+    </a-space>
+    <a-input-number ref="input" v-model:value="value" style="width: 100%;" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/formatter.md

@@ -0,0 +1,57 @@
+# Formatter
+
+## Description (en-US)
+
+Display value within it's situation with `formatter`, and we usually use `parser` at the same time.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { InputNumberProps } from 'antdv-next'
+import { ref } from 'vue'
+
+function onChange(value: number | null) {
+  console.log('changed', value)
+}
+
+const formatter: InputNumberProps['formatter'] = (value) => {
+  const [start, end] = `${value}`.split('.') || []
+  const v = `${start}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return `$ ${end ? `${v}.${end}` : `${v}`}`
+}
+
+function parser(value: string | undefined) {
+  return value?.replace(/\$\s?|(,*)/g, '') as unknown as number
+}
+
+const percentFormatter: InputNumberProps['formatter'] = (value) => {
+  return `${value}%`
+}
+
+function percentParser(value: string | undefined) {
+  return value?.replace('%', '') as unknown as number
+}
+const value1 = ref(1000)
+const value2 = ref(100)
+</script>
+
+<template>
+  <a-space>
+    <a-input-number
+      v-model:value="value1"
+      :formatter="formatter"
+      :parser="parser"
+      @change="onChange"
+    />
+    <a-input-number
+      v-model:value="value2"
+      :min="0"
+      :max="100"
+      :formatter="percentFormatter"
+      :parser="percentParser"
+      @change="onChange"
+    />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/keyboard.md

@@ -0,0 +1,25 @@
+# Keyboard
+
+## Description (en-US)
+
+Control keyboard behavior by `keyboard`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const keyboard = ref(true)
+const value = ref(3)
+</script>
+
+<template>
+  <a-space>
+    <a-input-number v-model:value="value" :min="1" :max="10" :keyboard="keyboard" />
+    <a-checkbox v-model:checked="keyboard">
+      Toggle keyboard
+    </a-checkbox>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/out-of-range.md

@@ -0,0 +1,28 @@
+# Out of range
+
+## Description (en-US)
+
+Show warning style when `value` is out of range by control.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref<string | number | null>('99')
+
+function reset() {
+  value.value = 99
+}
+</script>
+
+<template>
+  <a-space>
+    <a-input-number v-model:value="value" :min="1" :max="10" />
+    <a-button type="primary" @click="reset">
+      Reset
+    </a-button>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/presuffix.md

@@ -0,0 +1,30 @@
+# Prefix / Suffix
+
+## Description (en-US)
+
+Add a prefix or suffix inside input.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { UserOutlined } from '@antdv-next/icons'
+</script>
+
+<template>
+  <a-flex vertical gap="middle">
+    <a-input-number prefix="￥" style="width: 100%;" />
+
+    <a-space-compact block>
+      <a-space-addon>
+        <UserOutlined />
+      </a-space-addon>
+      <a-input-number prefix="￥" style="width: 100%;" />
+    </a-space-compact>
+
+    <a-input-number prefix="￥" disabled style="width: 100%;" />
+
+    <a-input-number suffix="RMB" style="width: 100%;" />
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/size.md

@@ -0,0 +1,29 @@
+# Sizes
+
+## Description (en-US)
+
+There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+function onChange(value: number | null) {
+  console.log('changed', value)
+}
+
+const value1 = ref(3)
+const value2 = ref(3)
+const value3 = ref(3)
+</script>
+
+<template>
+  <a-space wrap>
+    <a-input-number v-model:value="value1" size="large" :min="1" :max="100000" @change="onChange" />
+    <a-input-number v-model:value="value2" :min="1" :max="100000" @change="onChange" />
+    <a-input-number v-model:value="value3" size="small" :min="1" :max="100000" @change="onChange" />
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/spinner.md

@@ -0,0 +1,44 @@
+# Spinner
+
+## Description (en-US)
+
+Digit spinner.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+function onChange(value: number | null) {
+  console.log('changed', value)
+}
+
+const value1 = ref(3)
+const value2 = ref(3)
+</script>
+
+<template>
+  <a-flex vertical gap="middle">
+    <a-input-number
+      v-model:value="value1"
+      mode="spinner"
+      :min="1"
+      :max="10"
+      placeholder="Outlined"
+      style="width: 150px;"
+      @change="onChange"
+    />
+    <a-input-number
+      v-model:value="value2"
+      mode="spinner"
+      variant="filled"
+      :min="1"
+      :max="10"
+      placeholder="Filled"
+      style="width: 150px;"
+      @change="onChange"
+    />
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/status.md

@@ -0,0 +1,30 @@
+# Status
+
+## Description (en-US)
+
+Add status to InputNumber with `status`, which could be `error` or `warning`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ClockCircleOutlined } from '@antdv-next/icons'
+</script>
+
+<template>
+  <a-space direction="vertical" style="width: 100%;">
+    <a-input-number status="error" style="width: 100%;" />
+    <a-input-number status="warning" style="width: 100%;" />
+    <a-input-number status="error" style="width: 100%;">
+      <template #prefix>
+        <ClockCircleOutlined />
+      </template>
+    </a-input-number>
+    <a-input-number status="warning" style="width: 100%;">
+      <template #prefix>
+        <ClockCircleOutlined />
+      </template>
+    </a-input-number>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/style-class.md

@@ -0,0 +1,46 @@
+# Custom semantic dom styling
+
+## Description (en-US)
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { InputNumberProps } from 'antdv-next'
+
+const shardStyle = {
+  root: 'shard',
+}
+const styleObject: InputNumberProps['styles'] = {
+  input: {
+    fontSize: '14px',
+  },
+}
+const styleFn: InputNumberProps['styles'] = ({ props }) => {
+  if (props.size === 'large') {
+    return {
+      root: {
+        backgroundColor: 'rgba(250,250,250, 0.5)',
+        borderColor: '#722ed1',
+      },
+    } satisfies InputNumberProps['styles']
+  }
+  return {}
+}
+</script>
+
+<template>
+  <a-flex vertical gap="middle">
+    <a-input-number :classes="shardStyle" :styles="styleObject" placeholder="Object" />
+    <a-input-number :classes="shardStyle" :styles="styleFn" placeholder="Function" size="large" />
+  </a-flex>
+</template>
+
+<style scoped>
+.shard {
+  border: 1px solid #1677ff;
+  border-radius: 8px;
+  width: 200px;
+}
+</style>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/demo/variant.md

@@ -0,0 +1,18 @@
+# Variants
+
+## Description (en-US)
+
+Variants of InputNumber, there are four variants: `outlined` `filled` `borderless` and `underlined`.
+
+## Source
+
+```vue
+<template>
+  <a-flex vertical :gap="12">
+    <a-input-number placeholder="Outlined" style="width: 200px;" />
+    <a-input-number placeholder="Filled" variant="filled" style="width: 200px;" />
+    <a-input-number placeholder="Borderless" variant="borderless" style="width: 200px;" />
+    <a-input-number placeholder="Underlined" variant="underlined" style="width: 200px;" />
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/docs.md

@@ -0,0 +1,84 @@
+---
+title: InputNumber
+description: Enter a number within certain range with the mouse or keyboard.
+---
+
+## When To Use 
+When a numeric value needs to be provided.
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Basic | demo/basic.md |
+| Sizes | demo/size.md |
+| Disabled | demo/disabled.md |
+| High precision decimals | demo/digit.md |
+| Formatter | demo/formatter.md |
+| Keyboard | demo/keyboard.md |
+| Wheel | demo/change-on-wheel.md |
+| Variants | demo/variant.md |
+| Spinner | demo/spinner.md |
+| Out of range | demo/out-of-range.md |
+| Prefix / Suffix | demo/presuffix.md |
+| Status | demo/status.md |
+| Focus | demo/focus.md |
+| Custom semantic dom styling | demo/style-class.md |
+
+## API
+
+Common props ref：[Common props](../../docs/vue/common-props.md)
+
+### Props 
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| size | The height of input box | SizeType | - | - | × |
+| status | Set validation status | InputStatus | - | - | × |
+| disabled | If the input is disabled | boolean | false | - | × |
+| addonBefore | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | VueNode | - | - | × |
+| addonAfter | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | VueNode | - | - | × |
+| prefix | The prefix icon for the Input | VueNode | - | - | × |
+| suffix | The suffix icon for the Input | VueNode | - | - | × |
+| bordered | Deprecated. | boolean | - | - | × |
+| variant | Variants of Input | Variant | `outlined` | - | ✓ |
+| classes | Customize class for each semantic structure inside the component. Supports object or function. | InputNumberClassNamesType | - | - | ✓ |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | InputNumberStylesType | - | - | ✓ |
+| controls | Whether to show `+-` controls, or set custom arrow icons | boolean \| { upIcon?: VueNode, downIcon?: VueNode } | - | - | × |
+| type | - | 'number' \| 'text' | - | - | × |
+| max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - | × |
+| min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - | × |
+| step | The number to which the current value is increased or decreased. It can be an integer or decimal | 'number' \| 'string' | 1 | - | × |
+
+### Events 
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| change | The callback triggered when the value is changed | (value: any) => void | - |
+| update:value | - | (value: any) => void | - |
+| input | - | (text: string) => void | - |
+| pressEnter | The callback function that is triggered when Enter key is pressed | (e: KeyboardEvent) => void | - |
+| step | `@step`The callback function that is triggered when click up or down buttons / Keyboard / Wheel | (value: any, info: InputNumberStepContext) => void | - |
+| mousedown | - | (e: MouseEvent) => void | - |
+| click | - | (e: MouseEvent) => void | - |
+| mouseup | - | (e: MouseEvent) => void | - |
+| mouseleave | - | (e: MouseEvent) => void | - |
+| mousemove | - | (e: MouseEvent) => void | - |
+| mouseenter | - | (e: MouseEvent) => void | - |
+| mouseout | - | (e: MouseEvent) => void | - |
+| focus | - | (e: FocusEvent) => void | - |
+| blur | - | (e: FocusEvent) => void | - |
+| keydown | - | (e: KeyboardEvent) => void | - |
+| keyup | - | (e: KeyboardEvent) => void | - |
+| compositionstart | - | (e: CompositionEvent) => void | - |
+| compositionend | - | (e: CompositionEvent) => void | - |
+| beforeinput | - | (e: InputEvent) => void | - |
+
+### Slots 
+| Slot | Description | Type | Version |
+| --- | --- | --- | --- |
+| prefix | The prefix icon for the Input | () => any | - |
+| suffix | The suffix icon for the Input | () => any | - |
+| addonBefore | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | () => any | - |
+| addonAfter | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | () => any | - |
+
+## Semantic DOM 
+| _semantic | demo/_semantic.md |

code/fms/.codebuddy/skills/antdv-next/references/components/input-number/token.md

@@ -0,0 +1,51 @@
+# input-number Token
+
+Use these variables through `theme.components.InputNumber`. This document lists definitions only and does not include values.
+
+```vue
+<a-config-provider
+  :theme="{
+    token: {
+      // Global token configuration
+    },
+    components: {
+      InputNumber: {
+        // Token name: value
+      },
+    },
+  }"
+>
+  ...
+</a-config-provider>
+```
+
+## Token List
+
+| Token | Type | Description |
+| --- | --- | --- |
+| `controlWidth` | `number` | Width of input |
+| `handleWidth` | `number` | Width of control button |
+| `handleFontSize` | `number` | Icon size of control button |
+| `handleVisible` | `true \| "auto"` | Handle visible |
+| `handleBg` | `string` | Background color of handle |
+| `handleActiveBg` | `string` | Active background color of handle |
+| `handleHoverColor` | `string` | Hover color of handle |
+| `handleBorderColor` | `string` | Border color of handle |
+| `filledHandleBg` | `string` | Background color of handle in filled variant |
+| `paddingInline` | `number` | Horizontal padding of input |
+| `paddingInlineSM` | `number` | Horizontal padding of small input |
+| `paddingInlineLG` | `number` | Horizontal padding of large input |
+| `paddingBlock` | `number` | Vertical padding of input |
+| `paddingBlockSM` | `number` | Vertical padding of small input |
+| `paddingBlockLG` | `number` | Vertical padding of large input |
+| `addonBg` | `string` | Background color of addon |
+| `hoverBorderColor` | `string` | Hover border color |
+| `activeBorderColor` | `string` | Active border color |
+| `activeShadow` | `string` | Box-shadow when active |
+| `errorActiveShadow` | `string` | Box-shadow when active in error status |
+| `warningActiveShadow` | `string` | Box-shadow when active in warning status |
+| `hoverBg` | `string` | Background color when the input box hovers |
+| `activeBg` | `string` | Background color when the input box is activated |
+| `inputFontSize` | `number` | Font size |
+| `inputFontSizeLG` | `number` | Font size of large |
+| `inputFontSizeSM` | `number` | Font size of small |