From abd99b2e6de034d9e3df00a7e2b9867b89b27584 Mon Sep 17 00:00:00 2001
From: HoshinoSuzumi <master@uniiem.com>
Date: Sun, 24 Nov 2024 05:16:01 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20docs(input):=20add=20input=20com?=
 =?UTF-8?q?ponent=20doc?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/content/2.components/input.md | 147 +++++++++++++++++++++++++++++
 1 file changed, 147 insertions(+)
 create mode 100644 docs/content/2.components/input.md

diff --git a/docs/content/2.components/input.md b/docs/content/2.components/input.md
new file mode 100644
index 0000000..73057e1
--- /dev/null
+++ b/docs/content/2.components/input.md
@@ -0,0 +1,147 @@
+---
+description: The input component is used to get user input
+---
+
+## Usage
+
+The basic usage.
+
+:::ComponentPreview
+---
+privateProps:
+  placeholder: "Type something..."
+---
+:::
+
+### Sizes
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Type something..."
+props:
+  size: sm
+---
+::
+
+### Colors
+
+The `color` prop affects the color of the border.
+
+::ComponentPreview
+---
+props:
+  color: primary
+---
+::
+
+### Variants
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Search..."
+props:
+  variant: outline
+---
+::
+
+### Type
+
+The `type` prop changes the type of the input. All the aviailable types can be found at [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Type anything..."
+props:
+  type: text
+---
+::
+
+### Placeholder
+
+The `placeholder` prop sets the placeholder text. It is shown when the input is empty.
+
+::ComponentPreview
+---
+props:
+  placeholder: "Type anything..."
+---
+::
+
+### Padded
+
+Inputs can be with no padding.
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Search..."
+  variant: plain
+props:
+  padded: false
+---
+::
+
+### Disabled
+
+Inputs can be disabled.
+
+::ComponentPreview
+---
+privateProps:
+  placeholder: "Search..."
+props:
+  disabled: true
+---
+::
+
+### Model Modifiers
+
+#### .trim
+
+The `.trim` modifier trims the input value.
+
+```vue [page]
+<script lang="ts" setup>
+const modal = ref<string>("");
+</script>
+
+<template>
+  <RayInput v-model.trim="modal" />
+</template>
+```
+
+#### .number
+
+The `.number` modifier converts the input value to a number. Non-numeric values are ignored.
+
+```vue [page]
+<script lang="ts" setup>
+const modal = ref<number>(0);
+</script>
+
+<template>
+  <RayInput v-model.number="modal" />
+</template>
+```
+
+#### .lazy
+
+The `.lazy` modifier syncs the input value with the model only on `change` event.
+
+```vue [page]
+<script lang="ts" setup>
+const modal = ref<string>("");
+</script>
+
+<template>
+  <RayInput v-model.lazy="modal" />
+</template>
+```
+
+## Config
+
+::ComponentDefaults
+::