docs(attrs): add attrs usage

Author: akinoccc

packages/docs/.vitepress/en.ts

@@ -43,6 +43,7 @@ function sidebarGuide() {
       items: [
         { text: 'Quick Start', link: 'quick-start' },
         { text: 'Passing Props', link: 'passing-props' },
+        { text: 'Attrs Setting', link: 'attrs' },
         { text: 'Extending Styles', link: 'extending-styles' },
         { text: 'Styling Any Component', link: 'styling-any-component' },
         { text: 'Animations', link: 'animations' },

packages/docs/.vitepress/zh.ts

@@ -67,6 +67,7 @@ function sidebarGuide() {
       items: [
         { text: '快速开始', link: 'quick-start' },
         { text: '传递 props', link: 'passing-props' },
+        { text: 'Attrs设置', link: 'attrs' },
         { text: '扩展样式', link: 'extending-styles' },
         { text: '样式化任意组件', link: 'styling-any-component' },
         { text: '动画', link: 'animations' },

packages/docs/guide/api/core.md

@@ -69,7 +69,7 @@ It is used for passing attributes to styled component.
 
 **Augments**
 
-- Attrs Object, `Record<string, number | string | boolean>`, `required`
+- Attrs Object or Factory Function, `Record<string, any> | ((props: Context) => Record<string, any>)`, `required`
 
 **Return**
 
@@ -81,13 +81,17 @@ It is used for passing attributes to styled component.
 <script setup lang="ts">
 import { styled } from '@vue-styled-components/core'
 
-const InputWithValue = styled.input.attrs({ value: "I'm input with default value. 🥺" })`
-  width: 100%;
-  height: 40px;
-`
+const InputWithValue = styled
+  .input
+  .attrs({ value: "I'm input with default value. 🥺" })`
+    width: 100%;
+    height: 40px;
+  `
+
+const StyledInput = styled('input', { canInput: Boolean })
+  .attrs(props => { disabled: !props.canInput })`
+    width: 100%;
+    height: 40px;
+  `
 </script>
-
-<template>
-  <InputWithValue type="text" />
-</template>
 ```

packages/docs/guide/basic/attrs.md

@@ -0,0 +1,38 @@
+# Attributes setting
+
+You can use the `.attrs` prop to set attributes to the styled components. support passing a attrs function or an object.
+
+Here is an example:
+
+:::demo
+```vue
+<script setup lang="ts">
+import { styled } from '@vue-styled-components/core'
+
+const InputWithValue = styled
+  .input
+  .attrs({ value: "I'm input with default value. 🥺" })`
+    width: 100%;
+    height: 40px;
+    color: #333;
+  `
+
+const StyledInput = styled(InputWithValue, { canInput: Boolean })
+  .attrs(props => ({ 
+    disabled: !props.canInput, 
+    style: { 
+      background: !props.canInput ? '#f1f1f1' : '#fff', 
+      color: !props.canInput ? '#999' : '#000' 
+    } 
+  }))`
+    padding: 0 8px;
+    border-radius: 4px;
+  `
+</script>
+
+<template>
+  <InputWithValue />
+  <StyledInput :canInput="false" />
+</template>
+```
+:::

packages/docs/guide/basic/passing-props.md

@@ -49,6 +49,32 @@ fallthrough attributes.(see [Props Declaration](https://vuejs.org/guide/componen
 
 :::
 
+## Use `attributes`
+
+:::demo
+```vue
+<script setup lang="ts">
+import { styled } from '@vue-styled-components/core'
+
+const StyledInput = styled
+  .input
+  .attrs({ disabled: true })`
+    width: 100%;
+    height: 40px;
+    padding: 4px 8px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    cursor: ${ props => props.disabled ? 'not-allowed' : 'pointer'};
+  `
+</script>
+
+<template>
+  <StyledInput value="Type something..." :canInput="false" />
+</template>
+```
+:::
+
+
 ## New way to pass props
 
 From `v1.7.0`, you can use the `props` option to pass props to the styled component.

packages/docs/zh/guide/api/core.md

@@ -69,7 +69,7 @@ const StyledDiv = styled.div`
 
 **参数**
 
-- 属性对象，`Record<string, number | string | boolean>`，`必需`
+- Attrs 对象或构造函数，`Record<string, any> ｜  ((props: Context) => Record<string, any>)`，`必需`
 
 **返回值**
 
@@ -80,15 +80,19 @@ const StyledDiv = styled.div`
 
 ```vue
 <script setup lang="ts">
-import { styled } from '@vue-styled-components/core'
+  import { styled } from '@vue-styled-components/core'
 
-const InputWithValue = styled.input.attrs({ value: "I'm input with default value. 🥺" })`
-  width: 100%;
-  height: 40px;
-`
+  const InputWithValue = styled
+    .input
+    .attrs({ value: "I'm input with default value. 🥺" })`
+    width: 100%;
+    height: 40px;
+  `
+
+  const StyledInput = styled('input', { canInput: Boolean })
+    .attrs(props => { disabled: !props.canInput })`
+    width: 100%;
+    height: 40px;
+  `
 </script>
-
-<template>
-  <InputWithValue type="text" />
-</template>
 ```

packages/docs/zh/guide/basic/attrs.md

@@ -0,0 +1,38 @@
+# Attributes 设置
+
+你可以使用 `.attrs` 属性来设置组件的属性。支持传入一个 attrs 函数或者一个对象。
+
+以下是一个使用例子：
+
+:::demo
+```vue
+<script setup lang="ts">
+import { styled } from '@vue-styled-components/core'
+
+const InputWithValue = styled
+  .input
+  .attrs({ value: "I'm input with default value. 🥺" })`
+    width: 100%;
+    height: 40px;
+    color: #333;
+  `
+
+const StyledInput = styled(InputWithValue, { canInput: Boolean })
+  .attrs(props => ({ 
+    disabled: !props.canInput, 
+    style: { 
+      background: !props.canInput ? '#f1f1f1' : '#fff', 
+      color: !props.canInput ? '#999' : '#000' 
+    } 
+  }))`
+    padding: 0 8px;
+    border-radius: 4px;
+  `
+</script>
+
+<template>
+  <InputWithValue />
+  <StyledInput :canInput="false" />
+</template>
+```
+:::

packages/docs/zh/guide/basic/passing-props.md

@@ -6,6 +6,8 @@ outline: deep
 
 您可以向样式化组件传递属性，类似于 Vue 组件。例如，您可以向样式化的输入框传递一个占位符。
 
+## 基础用法
+
 :::demo
 
 ```vue
@@ -44,6 +46,32 @@ const blur = () => (borderColor.value = 'darkred')
 :::
 
 
+## 使用 `attributes`
+
+:::demo
+```vue
+<script setup lang="ts">
+import { styled } from '@vue-styled-components/core'
+
+const StyledInput = styled
+  .input
+  .attrs({ disabled: true })`
+    width: 100%;
+    height: 40px;
+    padding: 4px 8px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    cursor: ${ props => props.disabled ? 'not-allowed' : 'pointer'};
+  `
+</script>
+
+<template>
+  <StyledInput value="Type something..." :canInput="false" />
+</template>
+```
+:::
+
+
 ## 新的 props 选项
 
 从 `v1.7.0` 开始，您可以使用 `props` 选项将属性传递给样式化的组件。