docs: add api reference documents

Author: akinoccc

docs/.vitepress/config.mts

@@ -55,7 +55,7 @@ export default defineConfig({
         text: 'API',
         items: [
           { text: 'Core', link: '/guide/api/core' },
-          { text: 'Utils', link: '/guide/api/utils' },
+          { text: 'Helper', link: '/guide/api/helper' },
         ],
       },
     ],

docs/guide/api/core.md

@@ -4,65 +4,90 @@ outline: deep
 
 # Core
 
-### `styled`
+## `styled`
 
 It is a factory function.
 
-#### Properties
+**Augments**
 
-| Properties | Description                                                                                                                              |
-|------------|------------------------------------------------------------------------------------------------------------------------------------------|
-| HTML Tag   | See [Supported HTML Tags](https://github.com/vue-styled-components/vue3-styled-components/blob/master/package/constants/domElements.ts). |
-| attrs      | Pass attrs for styled component.                                                                                                         |
+- Tag Name, `SupportedHTMLElements | Vue Component`, `required`
+- Props Definition, `Record<string, any>`
 
-#### Arguments
+**Return**
 
-| Params           | Type                    |
-|------------------|-------------------------|
-| Tag Name         | `SupportedHTMLElements` |
-| Props Definition | `Record<string, any>`   |
+- Tag Function, used to create a styled component.
 
-#### Return
+**Usage**
 
-- `Tag Function`, used to create a styled component.
+```vue
+<script setup lang="ts">
+import { styled } from '@vue3-styled-components/package'
+
+const StyledDiv = styled('div', { color: String })`
+  width: 100%;
+  padding: 0 10px;
+  border-radius: 4px;
+  text-align: center;
+`
+</script>
+
+<template>
+  <StyledDiv>Styled Div</StyledDiv>
+</template>
+```
+
+### `.[HTML Tag]`
+
+**Augments**
+
+- Tagged Template Literal, `TemplateStringsArray`, `required`
+
+**Return**
 
-#### Usage
+- Vue Component, `DefineSetupFnComponent`
 
-:::demo
+**Usage**
 
 ```vue
+<script setup lang="ts">
+import { styled } from '@vue3-styled-components/package'
 
-<script setup>
-  import { styled } from '@vue3-styled-components/package'
-
-  const StyledDiv = styled('div', { color: String })`
-    width: 100%;
-    height: 100px;
-    border-radius: 4px;
-    background-color: #6a488f;
-    text-align: center;
-    line-height: 100px;
-    color: ${props => props.color};
-  `
+const StyledDiv = styled.div`
+  width: 40px;
+  height: 40px;
+`
 </script>
 
 <template>
-  <StyledDiv color="#fff">Hi, I'm styled component.🥺</StyledDiv>
+  <StyledDiv>Styled Component</StyledDiv>
 </template>
 ```
 
-:::
-
 ### `.arrts`
 
 It is used for passing attributes to styled component.
 
-#### Arguments
+**Augments**
+
+- Attrs Object, `Record<string, number | string | boolean>`, `required`
+
+**Return**
+
+- Tag Function, used to create a styled component.
+
+**Usage**
 
-| Params       | Type                               |
-|--------------|------------------------------------|
-| Attrs Object | `Record<string, number \| string>` |
+```vue
+<script setup lang="ts">
+import { styled } from '@vue3-styled-components/package'
 
-#### Return
+const InputWithValue = styled.input.attrs({ value: "I'm input with default value. 🥺" })`
+  width: 100%;
+  height: 40px;
+`
+</script>
 
-- `Tag Function`, used to create a styled component.
+<template>
+  <InputWithValue type="text" />
+</template>
+```

docs/guide/api/helper.md

@@ -0,0 +1,114 @@
+---
+outline: deep
+---
+
+# Helper
+
+## `createGlobalStyle`
+
+A function to create a `style component` that can be used to handle global styles.
+
+**Augments**
+
+- Tagged Template Literal, `TemplateStringsArray`, `required`
+
+**Return**
+
+- Vue Component, `DefineSetupFnComponent`
+
+**Usage**
+
+```vue
+<script setup>
+import { createGlobalStyle } from '@vue3-styled-components/package'
+
+const GlobalStyle = createGlobalStyle`
+    body {
+      color: ${(props) => props.color};
+    }
+  `
+</script>
+<template>
+  <GlobalStyle color="white" />
+</template>
+```
+
+## `keyframes`
+
+A function to generate keyframes. It takes a template literal as an argument and returns a animation name.
+
+**Augments**
+
+- Tagged Template Literal, `TemplateStringsArray`, `required`
+
+**Return**
+
+- Animation Name, `string`
+
+**Usage**
+
+```vue
+<script setup lang="ts">
+import { styled, keyframes } from '@vue3-styled-components/package'
+
+const animation = keyframes`
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  `
+const DivWithAnimation = styled('div')`
+  width: 100%;
+  height: 40px;
+  animation: ${animation} 2s ease-in infinite;
+`
+</script>
+<template>
+  <DivWithAnimation>Div with animation</DivWithAnimation>
+</template>
+```
+
+## `withAttrs`
+
+A function to add attributes to a `ComponentInstance` or `HTMLElements`.
+**Augments**
+
+- Component or Html Tag, `ComponentInstance | SupportedHTMLElements`, `required`
+- Attributes, `Record<string, any>`, `required`
+
+**Return**
+
+- Vue Component, `DefineSetupFnComponent`
+
+**Usage**
+
+```vue
+<script setup lang="ts">
+import { withAttrs } from '@vue3-styled-components/package'
+
+const DivWithAttrs = withAttrs('div', {
+  class: 'div-with-attrs'
+})
+
+const DivWithAttrs2 = withAttrs(DivWithAttrs, {
+  class: 'div-with-attrs-2'
+})
+</script>
+
+<template>
+  <DivWithAttrs>Div with attrs</DivWithAttrs>
+  <DivWithAttrs2>Div with attrs 2</DivWithAttrs2>
+</template>
+
+<style scope>
+.div-with-attrs {
+  color: red;
+}
+
+.div-with-attrs-2 {
+  color: blue;
+}
+</style>
+```