Skip to content

Commit 6931d24

Browse files
google-labs-jules[bot]google-labs-jules[bot]
committed
docs: complete documentation for all components and utilities
Added MDX documentation for Modal, Navigation, Sheet, Snackbar, Toast, and Input components. Created documentation for utilities: Component Manager, createStyle, Function, IDB Storage, and others. Updated Input component documentation to be more comprehensive.
1 parent 9404cdc commit 6931d24

File tree

17 files changed

+1525
-5
lines changed

17 files changed

+1525
-5
lines changed

‎packages/docs/pages/core/form.mdx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import Preview from '@/helper/preview.vue'
2+
import PreviewFrame from '@/helper/preview-frame.vue'
3+
import CodeHighlight from '@/helper/code-highlight.vue'
4+
import Form from '@vue-material/core/Form'
5+
import Input from '@vue-material/core/Input'
6+
import Button from '@vue-material/core/Button'
7+
import Flex from '@vue-material/core/Box/Flex'
8+
9+
export const meta = {
10+
title: 'Form',
11+
description: 'A form component that provides form values to its children.',
12+
source: 'packages/lib/src/components/Form',
13+
inherits: []
14+
}
15+
16+
## Usage
17+
18+
<Preview>
19+
<PreviewFrame height="300">
20+
<Form :modelValue="{ name: '', email: '' }" @submit.prevent>
21+
<Flex direction="column" gap="#sm" style="padding: 20px;">
22+
<Input name="name" placeholder="Name" />
23+
<Input name="email" placeholder="Email" />
24+
<Button type="submit">Submit</Button>
25+
</Flex>
26+
</Form>
27+
</PreviewFrame>
28+
29+
<CodeHighlight>
30+
```vue
31+
<script setup lang="ts">
32+
import { Form, Input, Button, Flex } from '@vue-material/core'
33+
import { ref } from 'vue'
34+
35+
const formData = ref({
36+
name: '',
37+
email: ''
38+
})
39+
</script>
40+
41+
<template>
42+
<Form v-model="formData">
43+
<Flex direction="column" gap="#sm">
44+
<Input name="name" placeholder="Name" />
45+
<Input name="email" placeholder="Email" />
46+
<Button type="submit">Submit</Button>
47+
</Flex>
48+
</Form>
49+
</template>
50+
```
51+
52+
</CodeHighlight>
53+
</Preview>
54+
55+
## Props
56+
57+
`modelValue?`: any
58+
59+
- The form data object. It provides values to child components based on their `name` prop.

‎packages/docs/pages/core/frame.mdx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import Preview from '@/helper/preview.vue'
2+
import PreviewFrame from '@/helper/preview-frame.vue'
3+
import CodeHighlight from '@/helper/code-highlight.vue'
4+
import Frame from '@vue-material/core/Frame'
5+
import Flex from '@vue-material/core/Box/Flex'
6+
7+
export const meta = {
8+
title: 'Frame',
9+
description: 'A shaped container component.',
10+
source: 'packages/lib/src/components/Frame',
11+
inherits: ['core/Box']
12+
}
13+
14+
## Usage
15+
16+
<Preview>
17+
<PreviewFrame height="200">
18+
<Flex gap="#sm" align="center" justify="center">
19+
<Frame size="96px">
20+
Frame
21+
</Frame>
22+
</Flex>
23+
</PreviewFrame>
24+
25+
<CodeHighlight>
26+
```vue
27+
<script setup lang="ts">
28+
import { Frame } from '@vue-material/core'
29+
</script>
30+
31+
<template>
32+
<Frame size="96px">
33+
Frame
34+
</Frame>
35+
</template>
36+
```
37+
38+
</CodeHighlight>
39+
</Preview>
40+
41+
## Themes
42+
43+
<Preview>
44+
<PreviewFrame height="200">
45+
<Flex gap="#sm" align="center" justify="center">
46+
<Frame theme="primary">Primary</Frame>
47+
<Frame theme="secondary">Secondary</Frame>
48+
<Frame theme="tertiary">Tertiary</Frame>
49+
<Frame theme="error">Error</Frame>
50+
</Flex>
51+
</PreviewFrame>
52+
53+
<CodeHighlight>
54+
```vue
55+
<script setup lang="ts">
56+
import { Frame, Flex } from '@vue-material/core'
57+
</script>
58+
59+
<template>
60+
<Flex gap="#sm">
61+
<Frame theme="primary">Primary</Frame>
62+
<Frame theme="secondary">Secondary</Frame>
63+
<Frame theme="tertiary">Tertiary</Frame>
64+
<Frame theme="error">Error</Frame>
65+
</Flex>
66+
</template>
67+
```
68+
69+
</CodeHighlight>
70+
</Preview>
71+
72+
## Shapes
73+
74+
<Preview>
75+
<PreviewFrame height="200">
76+
<Flex gap="#sm" align="center" justify="center">
77+
<Frame frame="circle">Circle</Frame>
78+
<Frame frame="flower">Flower</Frame>
79+
<Frame frame="clover">Clover</Frame>
80+
<Frame frame="hexagon">Hexagon</Frame>
81+
</Flex>
82+
</PreviewFrame>
83+
84+
<CodeHighlight>
85+
```vue
86+
<script setup lang="ts">
87+
import { Frame, Flex } from '@vue-material/core'
88+
</script>
89+
90+
<template>
91+
<Flex gap="#sm">
92+
<Frame frame="circle">Circle</Frame>
93+
<Frame frame="flower">Flower</Frame>
94+
<Frame frame="clover">Clover</Frame>
95+
<Frame frame="hexagon">Hexagon</Frame>
96+
</Flex>
97+
</template>
98+
```
99+
100+
</CodeHighlight>
101+
</Preview>
102+
103+
## Props
104+
105+
> #### Inherits `BoxProps`
106+
107+
`size?`: SizesString
108+
109+
- The size of the frame
110+
- Default: `96`
111+
112+
`frame?`: 'circle' | 'flower' | 'clover' | 'hexagon' | 'none'
113+
114+
- The shape of the frame
115+
- Default: `'none'`
116+
117+
`theme?`: 'primary' | 'secondary' | 'tertiary' | 'error' | 'none'
118+
119+
- The color theme of the frame
120+
- Default: `'none'`

‎packages/docs/pages/core/input/index.mdx‎

Lines changed: 197 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,207 @@
11
import Preview from '@/helper/preview.vue'
22
import PreviewFrame from '@/helper/preview-frame.vue'
33
import CodeHighlight from '@/helper/code-highlight.vue'
4+
import Input from '@vue-material/core/Input'
5+
import Flex from '@vue-material/core/Box/Flex'
46

57
export const meta = {
68
title: 'Input',
7-
description: 'Form components',
9+
description: 'A set of input components including text, number, checkbox, and radio.',
810
source: 'packages/lib/src/components/Input',
9-
inherits: []
11+
inherits: ['core/Input']
1012
}
1113

12-
## Usage
14+
## Text Input
15+
16+
<Preview>
17+
<PreviewFrame height="200">
18+
<Flex direction="column" gap="#sm" style="padding: 20px;">
19+
<Input.Text placeholder="Text Input" />
20+
<Input.Text variant="outlined" placeholder="Outlined Input" />
21+
<Input.Text left-icon="material-symbols:search" placeholder="With Icon" />
22+
</Flex>
23+
</PreviewFrame>
24+
25+
<CodeHighlight>
26+
```vue
27+
<script setup lang="ts">
28+
import { Input, Flex } from '@vue-material/core'
29+
</script>
30+
31+
<template>
32+
<Flex direction="column" gap="#sm">
33+
<Input.Text placeholder="Text Input" />
34+
<Input.Text variant="outlined" placeholder="Outlined Input" />
35+
<Input.Text left-icon="material-symbols:search" placeholder="With Icon" />
36+
</Flex>
37+
</template>
38+
```
39+
40+
</CodeHighlight>
41+
</Preview>
42+
43+
### Props (Text)
44+
45+
> #### Inherits `InputHTMLAttributes`
46+
47+
`variant?`: 'filled' | 'outlined'
48+
49+
- Visual style of the input.
50+
- Default: `filled`
51+
52+
`leftIcon?`: string | Component
53+
54+
- Icon to display on the left.
55+
56+
`rightIcon?`: string | Component
57+
58+
- Icon to display on the right.
59+
60+
`prefix?`: string
61+
62+
- Text prefix.
63+
64+
`suffix?`: string
65+
66+
- Text suffix.
67+
68+
`counter?`: boolean
69+
70+
- Show character counter.
71+
72+
`textbox?`: boolean
73+
74+
- Render as textarea.
75+
76+
77+
## Number Input
78+
79+
<Preview>
80+
<PreviewFrame height="200">
81+
<Flex direction="column" gap="#sm" style="padding: 20px;">
82+
<Input.Number placeholder="Number Input" />
83+
<Input.Number variant="outlined" placeholder="Outlined Number" />
84+
</Flex>
85+
</PreviewFrame>
86+
87+
<CodeHighlight>
88+
```vue
89+
<script setup lang="ts">
90+
import { Input, Flex } from '@vue-material/core'
91+
</script>
92+
93+
<template>
94+
<Flex direction="column" gap="#sm">
95+
<Input.Number placeholder="Number Input" />
96+
<Input.Number variant="outlined" placeholder="Outlined Number" />
97+
</Flex>
98+
</template>
99+
```
100+
101+
</CodeHighlight>
102+
</Preview>
103+
104+
### Props (Number)
105+
106+
> #### Inherits `InputHTMLAttributes`
107+
108+
`variant?`: 'filled' | 'outlined'
109+
110+
- Visual style of the input.
111+
- Default: `filled`
112+
113+
`min?`: number
114+
115+
- Minimum value.
116+
117+
`max?`: number
118+
119+
- Maximum value.
120+
121+
## Checkbox
122+
123+
<Preview>
124+
<PreviewFrame height="100">
125+
<Flex gap="#sm" align="center" justify="center">
126+
<Input.Checkbox />
127+
<Input.Checkbox checked />
128+
<Input.Checkbox indeterminate />
129+
</Flex>
130+
</PreviewFrame>
131+
132+
<CodeHighlight>
133+
```vue
134+
<script setup lang="ts">
135+
import { Input, Flex } from '@vue-material/core'
136+
</script>
137+
138+
<template>
139+
<Flex gap="#sm">
140+
<Input.Checkbox />
141+
<Input.Checkbox checked />
142+
<Input.Checkbox indeterminate />
143+
</Flex>
144+
</template>
145+
```
146+
147+
</CodeHighlight>
148+
</Preview>
149+
150+
### Props (Checkbox)
151+
152+
> #### Inherits `InputHTMLAttributes`
153+
154+
`checked?`: boolean
155+
156+
- Checked state.
157+
158+
`indeterminate?`: boolean
159+
160+
- Indeterminate state.
161+
162+
`error?`: boolean
163+
164+
- Error state.
165+
166+
167+
## Radio
168+
169+
<Preview>
170+
<PreviewFrame height="150">
171+
<Flex direction="column" gap="#sm" align="center" justify="center">
172+
<Input.Radio name="group1">
173+
<Input.Radio.Item value="1" label="Option 1" />
174+
<Input.Radio.Item value="2" label="Option 2" />
175+
<Input.Radio.Item value="3" label="Option 3" />
176+
</Input.Radio>
177+
</Flex>
178+
</PreviewFrame>
179+
180+
<CodeHighlight>
181+
```vue
182+
<script setup lang="ts">
183+
import { Input, Flex } from '@vue-material/core'
184+
</script>
185+
186+
<template>
187+
<Input.Radio name="group1">
188+
<Input.Radio.Item value="1" label="Option 1" />
189+
<Input.Radio.Item value="2" label="Option 2" />
190+
<Input.Radio.Item value="3" label="Option 3" />
191+
</Input.Radio>
192+
</template>
193+
```
194+
195+
</CodeHighlight>
196+
</Preview>
197+
198+
### Props (Radio Item)
199+
200+
`value`: string | number
201+
202+
- Value of the radio item.
203+
204+
`label`: string
205+
206+
- Label of the radio item.
13207

14-
> [!WARNING]
15-
> Undocumented

0 commit comments

Comments
 (0)