20260720172840

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

@@ -0,0 +1,35 @@
+# _semantic-otp
+
+## 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: 'input', desc: t('input') },
+  { name: 'separator', desc: t('OTPSeparator') },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="InputOTP"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <a-input-otp
+        :length="6"
+        separator="-"
+        :classes="classes"
+      />
+    </template>
+  </SemanticPreview>
+</template>
+```

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

@@ -0,0 +1,47 @@
+# _semantic-password
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { EditOutlined, UserOutlined } from '@antdv-next/icons'
+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: 'count', desc: t('count') },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="InputPassword"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <div style="width: 100%">
+        <a-input-password
+          default-value="Hello, Antdv-Next"
+          show-count
+          :classes="classes"
+        >
+          <template #prefix>
+            <UserOutlined />
+          </template>
+          <template #suffix>
+            <EditOutlined />
+          </template>
+        </a-input-password>
+      </div>
+    </template>
+  </SemanticPreview>
+</template>
+```

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

@@ -0,0 +1,52 @@
+# _semantic-search
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { EditOutlined, UserOutlined } from '@antdv-next/icons'
+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: 'count', desc: t('count') },
+  { name: 'button.root', desc: t('button.root') },
+  { name: 'button.icon', desc: t('button.icon') },
+  { name: 'button.content', desc: t('button.content') },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="InputSearch"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <div style="width: 100%">
+        <a-input-search
+          default-value="Hello, Antdv-Next"
+          enter-button="Searching..."
+          loading
+          show-count
+          :classes="classes"
+        >
+          <template #prefix>
+            <UserOutlined />
+          </template>
+          <template #suffix>
+            <EditOutlined />
+          </template>
+        </a-input-search>
+      </div>
+    </template>
+  </SemanticPreview>
+</template>
+```

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

@@ -0,0 +1,38 @@
+# _semantic-textarea
+
+## 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('TextAreaRoot') },
+  { name: 'textarea', desc: t('textarea') },
+  { name: 'count', desc: t('TextAreaCount') },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="TextArea"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <div style="width: 100%">
+        <a-textarea
+          default-value="Hello, Antdv-Next"
+          :maxlength="100"
+          show-count
+          :classes="classes"
+        />
+      </div>
+    </template>
+  </SemanticPreview>
+</template>
+```

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

@@ -0,0 +1,49 @@
+# _semantic
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { EditOutlined, UserOutlined } from '@antdv-next/icons'
+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: 'count', desc: t('count') },
+  { name: 'clear', desc: t('clear'), version: '1.3.0' },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="Input"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <div style="width: 100%">
+        <a-input
+          default-value="Hello, Antdv-Next"
+          show-count
+          allow-clear
+          :classes="classes"
+        >
+          <template #prefix>
+            <UserOutlined />
+          </template>
+          <template #suffix>
+            <EditOutlined />
+          </template>
+        </a-input>
+      </div>
+    </template>
+  </SemanticPreview>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input/demo/advance-count.md

@@ -0,0 +1,55 @@
+# Custom count logic
+
+## Description (en-US)
+
+It is necessary to customize the counting ability in some scenarios (such as emoji length is counted as 1), which can be achieved through the `count` attribute. Use `count.max` attribute exceeds the limit of the native `maxLength`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import runes from './advance-count-runes'
+
+const value1 = ref('Hello, antdv!')
+const value2 = ref('🔥🔥🔥')
+const value3 = ref('🔥antdv')
+</script>
+
+<template>
+  <a-flex vertical gap="16">
+    <div>
+      <a-typography>
+        <a-typography-title :level="5">
+          Exceed Max
+        </a-typography-title>
+      </a-typography>
+      <a-input v-model:value="value1" :count="{ show: true, max: 10 }" />
+    </div>
+    <div>
+      <a-typography>
+        <a-typography-title :level="5">
+          Exceed Max
+        </a-typography-title>
+      </a-typography>
+      <a-input v-model:value="value2" :count="{ show: true, strategy: (txt) => runes(txt).length }" />
+    </div>
+    <div>
+      <a-typography>
+        <a-typography-title :level="5">
+          Exceed Max
+        </a-typography-title>
+      </a-typography>
+      <a-input
+        v-model:value="value3"
+        :count="{
+          show: true,
+          max: 6,
+          strategy: (txt) => runes(txt).length,
+          exceedFormatter: (txt, { max }) => runes(txt).slice(0, max).join(''),
+        }"
+      />
+    </div>
+  </a-flex>
+</template>
+```

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

@@ -0,0 +1,16 @@
+# With clear icon
+
+## Description (en-US)
+
+Input box with the remove icon, click the icon to delete everything.
+
+## Source
+
+```vue
+<template>
+  <a-input allow-clear placeholder="input with clear icon" />
+  <br>
+  <br>
+  <a-textarea allow-clear placeholder="textarea with clear icon" />
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input/demo/autosize-textarea.md

@@ -0,0 +1,32 @@
+# Autosizing the height to fit the content
+
+## Description (en-US)
+
+`autoSize` prop for a `textarea` type of `Input` makes the height to automatically adjust based on the content. An option object can be provided to `autoSize` to specify the minimum and maximum number of lines the textarea will automatically adjust.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref('')
+</script>
+
+<template>
+  <div>
+    <a-textarea placeholder="Autosize height based on content lines" auto-size />
+    <div style="margin: 24px 0;" />
+    <a-textarea
+      placeholder="Autosize height with minimum and maximum number of lines"
+      :auto-size="{ minRows: 2, maxRows: 6 }"
+    />
+    <div style="margin: 24px 0;" />
+    <a-textarea
+      v-model:value="value"
+      placeholder="Controlled autosize"
+      :auto-size="{ minRows: 3, maxRows: 5 }"
+    />
+  </div>
+</template>
+```

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

@@ -0,0 +1,19 @@
+# Basic usage
+
+## Description (en-US)
+
+Basic usage example.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref()
+</script>
+
+<template>
+  <a-input v-model:value="value" placeholder="Basic usage" />
+</template>
+```

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

@@ -0,0 +1,57 @@
+# Compact Style
+
+## Description (en-US)
+
+Use Space.Compact create compact style, See the [Space.Compact](../../space/docs.md#spacecompact) documentation for more.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { SearchOutlined } from '@antdv-next/icons'
+
+// const options = [
+//   {
+//     value: 'zhejiang',
+//     label: 'Zhejiang',
+//   },
+//   {
+//     value: 'jiangsu',
+//     label: 'Jiangsu',
+//   },
+// ]
+</script>
+
+<template>
+  <a-space direction="vertical" size="middle">
+    <a-space-compact>
+      <a-input default-value="26888888" />
+    </a-space-compact>
+    <a-space-compact>
+      <a-input style="width: 20%;" default-value="0571" />
+      <a-input style="width: 80%;" default-value="26888888" />
+    </a-space-compact>
+    <a-space-compact>
+      <a-space-addon>https://</a-space-addon>
+      <a-input-search placeholder="input search text" allow-clear />
+    </a-space-compact>
+    <a-space-compact style="width: 100%;">
+      <a-input default-value="Combine input and button" />
+      <a-button type="primary">
+        Submit
+      </a-button>
+    </a-space-compact>
+    <!-- <a-space-compact>
+      <a-select default-value="Zhejiang" :options="options" />
+      <a-input default-value="Xihu District, Hangzhou" />
+    </a-space-compact> -->
+    <a-space-compact size="large">
+      <a-space-addon>
+        <SearchOutlined />
+      </a-space-addon>
+      <a-input placeholder="large size" />
+      <a-input placeholder="another input" />
+    </a-space-compact>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input/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/demo/otp.md

@@ -0,0 +1,66 @@
+# OTP
+
+## Description (en-US)
+
+One time password input.
+
+## Source
+
+```vue
+<script setup lang="ts">
+function onChange(text: string) {
+  console.log('onChange:', text)
+}
+
+function onInput(value: string) {
+  console.log('onInput:', value)
+}
+</script>
+
+<template>
+  <a-flex gap="middle" align="flex-start" vertical>
+    <a-typography-title :level="5">
+      With formatter (Upcase)
+    </a-typography-title>
+    <a-input-otp :formatter="(str: string) => str.toUpperCase()" @change="onChange" @input="onInput" />
+
+    <a-typography-title :level="5">
+      With Disabled
+    </a-typography-title>
+    <a-input-otp disabled @change="onChange" @input="onInput" />
+
+    <a-typography-title :level="5">
+      With Length (8)
+    </a-typography-title>
+    <a-input-otp :length="8" @change="onChange" @input="onInput" />
+
+    <a-typography-title :level="5">
+      With variant
+    </a-typography-title>
+    <a-input-otp variant="filled" @change="onChange" @input="onInput" />
+
+    <a-typography-title :level="5">
+      With custom display character
+    </a-typography-title>
+    <a-input-otp mask="🔒" @change="onChange" @input="onInput" />
+
+    <a-typography-title :level="5">
+      With custom ReactNode separator
+    </a-typography-title>
+    <a-input-otp @change="onChange" @input="onInput">
+      <template #separator>
+        <span>/</span>
+      </template>
+    </a-input-otp>
+
+    <a-typography-title :level="5">
+      With custom function separator
+    </a-typography-title>
+    <a-input-otp @change="onChange" @input="onInput">
+      <template #separator="{ index }">
+        <span :style="{ color: index & 1 ? 'red' : 'blue' }">—</span>
+      </template>
+    </a-input-otp>
+  </a-flex>
+</template>
+```

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

@@ -0,0 +1,38 @@
+# Password box
+
+## Description (en-US)
+
+Input type of password.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { EyeInvisibleOutlined, EyeTwoTone } from '@antdv-next/icons'
+import { ref } from 'vue'
+
+const passwordVisible = ref(false)
+</script>
+
+<template>
+  <a-space direction="vertical">
+    <a-input-password placeholder="input password" />
+    <a-input-password placeholder="input password">
+      <template #iconRender="{ visible }">
+        <EyeTwoTone v-if="visible" />
+        <EyeInvisibleOutlined v-else />
+      </template>
+    </a-input-password>
+    <a-space>
+      <a-input-password
+        placeholder="input password"
+        :visibility-toggle="{ visible: passwordVisible, onVisibleChange: (v: boolean) => passwordVisible = v }"
+      />
+      <a-button style="width: 80px;" @click="passwordVisible = !passwordVisible">
+        {{ passwordVisible ? 'Hide' : 'Show' }}
+      </a-button>
+    </a-space>
+    <a-input-password disabled placeholder="disabled input password" />
+  </a-space>
+</template>
+```

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

@@ -0,0 +1,41 @@
+# prefix and suffix
+
+## Description (en-US)
+
+Add a prefix or suffix icons inside input.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { InfoCircleOutlined, LockOutlined, UserOutlined } from '@antdv-next/icons'
+</script>
+
+<template>
+  <div>
+    <a-input placeholder="Enter your username">
+      <template #prefix>
+        <UserOutlined style="color: rgba(0, 0, 0, 0.25);" />
+      </template>
+      <template #suffix>
+        <a-tooltip title="Extra information">
+          <InfoCircleOutlined style="color: rgba(0, 0, 0, 0.45);" />
+        </a-tooltip>
+      </template>
+    </a-input>
+    <br>
+    <br>
+    <a-input prefix="￥" suffix="RMB" />
+    <br>
+    <br>
+    <a-input prefix="￥" suffix="RMB" disabled />
+    <br>
+    <br>
+    <a-input-password placeholder="input password support suffix">
+      <template #suffix>
+        <LockOutlined />
+      </template>
+    </a-input-password>
+  </div>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input/demo/search-input-loading.md

@@ -0,0 +1,21 @@
+# Search box with loading
+
+## Description (en-US)
+
+Search loading when onSearch.
+
+## Source
+
+```vue
+<template>
+  <div>
+    <a-input-search placeholder="input search loading default" loading />
+    <br>
+    <br>
+    <a-input-search placeholder="input search loading with enterButton" loading enter-button />
+    <br>
+    <br>
+    <a-input-search placeholder="input search text" enter-button="Search" size="large" loading />
+  </div>
+</template>
+```

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

@@ -0,0 +1,47 @@
+# Search box
+
+## Description (en-US)
+
+Example of creating a search box by grouping a standard input with a search button.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { AudioOutlined } from '@antdv-next/icons'
+
+function onSearch(value: string, _e?: Event, info?: { source?: string }) {
+  console.log(info?.source, value)
+}
+</script>
+
+<template>
+  <a-space direction="vertical">
+    <a-input-search placeholder="input search text" style="width: 200px;" @search="onSearch" />
+    <a-input-search placeholder="input search text" allow-clear style="width: 200px;" @search="onSearch" />
+    <a-space-compact>
+      <a-space-addon>https://</a-space-addon>
+      <a-input-search placeholder="input search text" allow-clear @search="onSearch" />
+    </a-space-compact>
+
+    <a-input-search placeholder="input search text" enter-button @search="onSearch" />
+    <a-input-search
+      placeholder="input search text"
+      allow-clear
+      enter-button="Search"
+      size="large"
+      @search="onSearch"
+    />
+    <a-input-search
+      placeholder="input search text"
+      enter-button="Search"
+      size="large"
+      @search="onSearch"
+    >
+      <template #suffix>
+        <AudioOutlined style="font-size: 16px; color: #1677ff;" />
+      </template>
+    </a-input-search>
+  </a-space>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/input/demo/show-count.md

@@ -0,0 +1,30 @@
+# With character counting
+
+## Description (en-US)
+
+Show character counting.
+
+## Source
+
+```vue
+<script setup lang="ts">
+function onChange(e: Event) {
+  const target = e.target as HTMLInputElement | HTMLTextAreaElement
+  console.log('Change:', target.value)
+}
+</script>
+
+<template>
+  <a-flex vertical :gap="32">
+    <a-input show-count :maxlength="20" @change="onChange" />
+    <a-textarea show-count :maxlength="100" placeholder="can resize" @change="onChange" />
+    <a-textarea
+      show-count
+      :max-length="100"
+      placeholder="disable resize"
+      style="height: 120px; resize: none;"
+      @change="onChange"
+    />
+  </a-flex>
+</template>
+```

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

@@ -0,0 +1,36 @@
+# Three sizes of Input
+
+## Description (en-US)
+
+There are three sizes of an Input box: `large` (40px), `default` (32px) and `small` (24px).
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { UserOutlined } from '@antdv-next/icons'
+import { ref } from 'vue'
+
+const value = ref()
+</script>
+
+<template>
+  <a-flex vertical gap="middle">
+    <a-input v-model:value="value" size="large" placeholder="large size">
+      <template #prefix>
+        <UserOutlined />
+      </template>
+    </a-input>
+    <a-input v-model:value="value" placeholder="default size">
+      <template #prefix>
+        <UserOutlined />
+      </template>
+    </a-input>
+    <a-input v-model:value="value" size="small" placeholder="small size">
+      <template #prefix>
+        <UserOutlined />
+      </template>
+    </a-input>
+  </a-flex>
+</template>
+```

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

@@ -0,0 +1,30 @@
+# Status
+
+## Description (en-US)
+
+Add status to Input 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 status="error" placeholder="Error" />
+    <a-input status="warning" placeholder="Warning" />
+    <a-input status="error" placeholder="Error with prefix">
+      <template #prefix>
+        <ClockCircleOutlined />
+      </template>
+    </a-input>
+    <a-input status="warning" placeholder="Warning with prefix">
+      <template #prefix>
+        <ClockCircleOutlined />
+      </template>
+    </a-input>
+  </a-space>
+</template>
+```

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

@@ -0,0 +1,109 @@
+# Custom semantic dom styling
+
+## Description (en-US)
+
+You can customize the [semantic dom](#semantic-input) style of Input by passing objects/functions through `classes` and `styles`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { InputOTPProps, InputPasswordProps, InputProps, InputSearchProps, TextAreaProps } from 'antdv-next'
+
+const classes: InputProps['classes'] = {
+  root: 'effect',
+}
+
+const stylesFn: InputProps['styles'] = (info) => {
+  if (info.props.size === 'middle') {
+    return {
+      root: {
+        borderColor: '#696FC7',
+      },
+    } satisfies InputProps['styles']
+  }
+  return {}
+}
+
+const stylesFnTextArea: TextAreaProps['styles'] = (info) => {
+  if (info.props.showCount) {
+    return {
+      root: { borderColor: '#BDE3C3' },
+      textarea: { resize: 'none' },
+      count: { color: '#BDE3C3' },
+    } satisfies TextAreaProps['styles']
+  }
+  return {}
+}
+
+const stylesFnPassword: InputPasswordProps['styles'] = (info) => {
+  if (info.props.size === 'middle') {
+    return {
+      root: {
+        borderColor: '#F5D3C4',
+      },
+    } satisfies InputPasswordProps['styles']
+  }
+  return {}
+}
+
+const stylesFnOTP: InputOTPProps['styles'] = (info) => {
+  if (info.props.size === 'middle') {
+    return {
+      root: {
+        borderWidth: 0,
+      },
+      input: {
+        borderColor: '#6E8CFB',
+        width: '32px',
+      },
+    } satisfies InputOTPProps['styles']
+  }
+  return {}
+}
+
+const stylesFnSearch: InputSearchProps['styles'] = (info) => {
+  if (info.props.size === 'large') {
+    return {
+      root: { color: '#4DA8DA', borderWidth: 0 },
+      input: { color: '#4DA8DA', borderColor: '#4DA8DA' },
+      prefix: { color: '#4DA8DA' },
+      suffix: { color: '#4DA8DA' },
+      count: { color: '#4DA8DA' },
+      button: {
+        root: { color: '#4DA8DA', borderColor: '#4DA8DA' },
+        icon: { color: '#4DA8DA' },
+      },
+    } satisfies InputSearchProps['styles']
+  }
+  return {}
+}
+</script>
+
+<template>
+  <a-flex vertical gap="large">
+    <a-input :classes="classes" placeholder="Object" name="input-object" />
+    <a-input :classes="classes" :styles="stylesFn" placeholder="Function" size="middle" name="input-fn" />
+    <a-textarea :classes="classes" :styles="stylesFnTextArea" placeholder="Textarea" show-count name="textarea-fn" />
+    <a-input-password :classes="classes" :styles="stylesFnPassword" placeholder="Password" size="middle" name="password-fn" />
+    <a-input-otp :classes="classes" :styles="stylesFnOTP" size="middle" :length="6" separator="*" name="otp-fn" />
+    <a-input-search :classes="classes" :styles="stylesFnSearch" placeholder="Search" size="large" name="search-fn" />
+  </a-flex>
+</template>
+
+<style scoped>
+.effect {
+  border-width: 1px;
+  border-radius: 6px;
+  -webkit-transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s;
+}
+.effect:focus-visible {
+  border-color: lab(66.128% 0 0);
+  box-shadow: 0 0 0 4px color-mix(in oklab, lab(66.128% 0 0) 50%, transparent);
+}
+.effect:hover {
+  border-radius: 1px solid #d9d9d9;
+}
+</style>
+```

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

@@ -0,0 +1,16 @@
+# TextArea
+
+## Description (en-US)
+
+For multi-line input.
+
+## Source
+
+```vue
+<template>
+  <a-textarea :rows="4" />
+  <br>
+  <br>
+  <a-textarea :rows="4" placeholder="maxLength is 6" :maxlength="6" />
+</template>
+```

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

@@ -0,0 +1,59 @@
+# Format Tooltip Input
+
+## Description (en-US)
+
+You can use the Input in conjunction with [Tooltip](../../tooltip/docs.md) component to create a Numeric Input, which can provide a good experience for extra-long content display.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+const value = ref('')
+const inputValue = ref('')
+
+function formatNumber(val: number) {
+  return new Intl.NumberFormat().format(val)
+}
+
+watch(inputValue, (newVal) => {
+  const reg = /^-?\d*(\.\d*)?$/
+  if (reg.test(newVal) || newVal === '' || newVal === '-') {
+    value.value = newVal
+  }
+  else {
+    // 恢复为有效值
+    inputValue.value = value.value
+  }
+})
+
+function handleBlur() {
+  let valueTemp = value.value
+  if (value.value.charAt(value.value.length - 1) === '.' || value.value === '-') {
+    valueTemp = value.value.slice(0, -1)
+  }
+  value.value = valueTemp.replace(/0*(\d+)/, '$1')
+  inputValue.value = value.value
+}
+
+const title = computed(() => {
+  if (value.value) {
+    return value.value !== '-' ? formatNumber(Number(value.value)) : '-'
+  }
+  return 'Input a number'
+})
+</script>
+
+<template>
+  <a-tooltip :trigger="['focus']" :title="title" placement="topLeft" root-class="numeric-input">
+    <a-input
+      v-model:value="inputValue"
+      style="width: 120px;"
+      placeholder="Input a number"
+      :maxlength="16"
+      @blur="handleBlur"
+    />
+  </a-tooltip>
+</template>
+```

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

@@ -0,0 +1,25 @@
+# Variants
+
+## Description (en-US)
+
+Variants of Input, there are four variants: `outlined` `filled` `borderless` and `underlined`.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const value = ref()
+</script>
+
+<template>
+  <a-flex vertical :gap="12">
+    <a-input v-model:value="value" placeholder="Outlined" />
+    <a-input v-model:value="value" placeholder="Filled" variant="filled" />
+    <a-input v-model:value="value" placeholder="Borderless" variant="borderless" />
+    <a-input v-model:value="value" placeholder="Underlined" variant="underlined" />
+    <a-input-search v-model:value="value" placeholder="Filled" variant="filled" />
+  </a-flex>
+</template>
+```

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

@@ -0,0 +1,193 @@
+---
+title: Input
+description: Through mouse or keyboard input content, it is the most basic form field wrapper.
+---
+
+## When To Use 
+- A user input in a form field is needed.
+- A search input is required.
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Basic usage | demo/basic.md |
+| Three sizes of Input | demo/size.md |
+| Variants | demo/variant.md |
+| Compact Style | demo/compact-style.md |
+| Search box | demo/search-input.md |
+| Search box with loading | demo/search-input-loading.md |
+| TextArea | demo/textarea.md |
+| Autosizing the height to fit the content | demo/autosize-textarea.md |
+| OTP | demo/otp.md |
+| Format Tooltip Input | demo/tooltip.md |
+| prefix and suffix | demo/presuffix.md |
+| Password box | demo/password-input.md |
+| With clear icon | demo/allowClear.md |
+| With character counting | demo/show-count.md |
+| Custom count logic | demo/advance-count.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)
+
+### Input
+
+#### Props 
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: VueNode } | false | - | ✓ |
+| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-input), string> \| (info: { props }) => Record<[SemanticDOM](#semantic-input), string> | - | - | ✓ |
+| count | Character count config | [CountConfig](#countconfig) | - | - | × |
+| defaultValue | The initial input content | string | - | - | × |
+| disabled | Whether the input is disabled | boolean | false | - | × |
+| id | The ID for input | string | - | - | × |
+| maxlength | The maximum number of characters in Input | number | - | - | × |
+| prefix | The prefix icon for the Input | VueNode | - | - | × |
+| showCount | Whether to show character count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => VueNode } | false | - | × |
+| status | Set validation status | 'error' \| 'warning' | - | - | × |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-input), CSSProperties> \| (info: { props }) => Record<[SemanticDOM](#semantic-input), CSSProperties> | - | - | ✓ |
+| size | The size of the input box. Note: in the context of a form, the `middle` size is used | `large` \| `middle` \| `small` | - | - | × |
+| suffix | The suffix icon for the Input | VueNode | - | - | × |
+| type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type="textarea"`) | string | `text` | - | × |
+| value | The input content value, support `v-model:value` | string | - | - | × |
+| variant | Variants of Input | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
+
+> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.
+
+The rest of the props of Input are exactly the same as the original [input](https://cn.vuejs.org/guide/essentials/forms.html).
+
+#### Events 
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| change | Callback when user input | function(e) | - |
+| pressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |
+| clear | Callback when click the clear button | () => void | - |
+
+#### Methods 
+| Name | Description | Parameters | Version |
+| --- | --- | --- | --- |
+| blur | Remove focus | - | - |
+| focus | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | - |
+
+#### Slots 
+| Slot | Description | Type | Version |
+| --- | --- | --- | --- |
+| prefix | Customize prefix icon | - | - |
+| suffix | Customize suffix icon | - | - |
+| clearIcon | Customize clear icon (to be used with allowClear attribute) | - | - |
+
+### TextArea 
+#### Props 
+Same as Input, and more:
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| autoSize | Height auto size feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | - | × |
+| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-textarea), string> \| (info: { props }) => Record<[SemanticDOM](#semantic-textarea), string> | - | - | ✓ |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-textarea), CSSProperties> \| (info: { props }) => Record<[SemanticDOM](#semantic-textarea), CSSProperties> | - | - | ✓ |
+
+The rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
+
+### InputSearch 
+#### Props 
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-search), string> \| (info: { props }) => Record<[SemanticDOM](#semantic-search), string> | - | - | ✓ |
+| enterButton | false displays the default button color, true uses the primary color, or you can provide a custom button. Conflicts with addonAfter. | VueNode | false | - | × |
+| loading | Search box with loading | boolean | false | - | × |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-search), CSSProperties> \| (info: { props }) => Record<[SemanticDOM](#semantic-search), CSSProperties> | - | - | ✓ |
+
+Supports all props of `Input`.
+
+#### Events 
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| search | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event, { source: "input" \| "clear" }) | - |
+
+### InputPassword 
+#### Props 
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| classes | Semantic DOM class | Record<[SemanticDOM](#semantic-password), string> | - | - |
+| iconRender | Custom toggle button | (visible) => VueNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | - |
+| styles | Semantic DOM style | Record<[SemanticDOM](#semantic-password), CSSProperties> | - | - |
+| visibilityToggle | Whether show toggle button or control password visible | boolean \| [VisibilityToggle](#visibilitytoggle) | true | - |
+
+### InputOTP 
+Added in `5.16.0`.
+
+> Notes for developers
+>
+> When the `mask` prop is string, we recommend receiving a single character or a single emoji. If multiple characters or multiple emoji are passed, a warning will be thrown.
+
+#### Props 
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| classes | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-otp), string> \| (info: { props }) => Record<[SemanticDOM](#semantic-otp), string> | - | - | ✓ |
+| defaultValue | Default value | string | - | - | × |
+| disabled | Whether the input is disabled | boolean | false | - | × |
+| formatter | Format display, blank fields will be filled with ` ` | (value: string) => string | - | - | × |
+| separator | render the separator after the input box of the specified index | VueNode \| ((i: number) => VueNode) | - | - | × |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-otp), CSSProperties> \| (info: { props }) => Record<[SemanticDOM](#semantic-otp), CSSProperties> | - | - | ✓ |
+| mask | Custom display, the original value will not be modified | boolean \| string | `false` | - | × |
+| length | The number of input elements | number | 6 | - | × |
+| status | Set validation status | 'error' \| 'warning' | - | - | × |
+| size | The size of the input box | `small` \| `middle` \| `large` | `middle` | - | × |
+| variant | Variants of Input | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | - | ✓ |
+| value | The input content value | string | - | - | × |
+
+#### Events 
+| Event | Description | Type | Version |
+| --- | --- | --- | --- |
+| change | Trigger when all the fields are filled | (value: string) => void | - |
+| input | Trigger when the input value changes | (value: string[]) => void | - |
+
+### Types 
+#### CountConfig
+
+```tsx
+interface CountConfig {
+  // Max character count. Different from the native `maxLength`, it will be marked warning but not truncated
+  max?: number
+  // Custom character count, for example, the standard emoji length is greater than 1, you can customize the counting strategy to change it to 1
+  strategy?: (value: string) => number
+  // Same as `showCount`
+  show?: boolean | ((args: { value: string, count: number, maxLength?: number }) => VueNode)
+  // Custom clipping logic when the number of characters exceeds `count.max`, no clipping when not configured
+  exceedFormatter?: (value: string, config: { max: number }) => string
+}
+```
+
+#### VisibilityToggle
+
+```tsx
+interface VisibilityToggle {
+  // tabIndex of the visibility toggle button (1.4.0)
+  tabIndex?: number
+  // Whether the password is show or hide
+  visible?: boolean
+  // Callback executed when visibility of the password is changed
+  onVisibleChange?: (visible: boolean) => void
+}
+```
+
+## Semantic DOM
+
+### Input 
+| _semantic | demo/_semantic.md |
+
+### TextArea 
+| _semantic-textarea | demo/_semantic-textarea.md |
+
+### InputSearch 
+| _semantic-search | demo/_semantic-search.md |
+
+### InputPassword 
+| _semantic-password | demo/_semantic-password.md |
+
+### InputOTP 
+| _semantic-otp | demo/_semantic-otp.md |

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

@@ -0,0 +1,42 @@
+# input Token
+
+Use these variables through `theme.components.Input`. This document lists definitions only and does not include values.
+
+```vue
+<a-config-provider
+  :theme="{
+    token: {
+      // Global token configuration
+    },
+    components: {
+      Input: {
+        // Token name: value
+      },
+    },
+  }"
+>
+  ...
+</a-config-provider>
+```
+
+## Token List
+
+| Token | Type | Description |
+| --- | --- | --- |
+| `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 |