Skip to content

Commit

Permalink
feat(website): document vue emits
Browse files Browse the repository at this point in the history
  • Loading branch information
cschroeter committed May 15, 2024
1 parent a8dd253 commit 0139ab8
Show file tree
Hide file tree
Showing 114 changed files with 11,616 additions and 10,288 deletions.
7 changes: 6 additions & 1 deletion packages/vue/src/components/menu/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,11 @@ export type {
} from '@zag-js/menu'
export { default as MenuArrow, type MenuArrowProps } from './menu-arrow.vue'
export { default as MenuArrowTip, type MenuArrowTipProps } from './menu-arrow-tip.vue'
export { default as MenuCheckboxItem, type MenuCheckboxItemProps } from './menu-checkbox-item.vue'
export {
default as MenuCheckboxItem,
type MenuCheckboxItemProps,
type MenuCheckboxItemEmits,
} from './menu-checkbox-item.vue'
export { default as MenuContent, type MenuContentProps } from './menu-content.vue'
export { default as MenuContext, type MenuContextProps } from './menu-context.vue'
export {
Expand All @@ -30,6 +34,7 @@ export { default as MenuRadioItem, type MenuRadioItemProps } from './menu-radio-
export {
default as MenuRadioItemGroup,
type MenuRadioItemGroupProps,
type MenuRadioItemGroupEmits,
} from './menu-radio-item-group.vue'
export { default as MenuRoot, type MenuRootProps, type MenuRootEmits } from './menu-root.vue'
export { default as MenuSeparator, type MenuSeparatorProps } from './menu-separator.vue'
Expand Down
2 changes: 2 additions & 0 deletions packages/vue/src/components/menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export { default as ArrowTip, type MenuArrowTipProps as ArrowTipProps } from './
export { default as Arrow, type MenuArrowProps as ArrowProps } from './menu-arrow.vue'
export {
default as CheckboxItem,
type MenuCheckboxItemEmits as CheckboxItemEmits,
type MenuCheckboxItemProps as CheckboxItemProps,
} from './menu-checkbox-item.vue'
export { default as Content, type MenuContentProps as ContentProps } from './menu-content.vue'
Expand Down Expand Up @@ -39,6 +40,7 @@ export {
} from './menu-positioner.vue'
export {
default as RadioItemGroup,
type MenuRadioItemGroupEmits as RadioItemGroupEmits,
type MenuRadioItemGroupProps as RadioItemGroupProps,
} from './menu-radio-item-group.vue'
export {
Expand Down
18 changes: 15 additions & 3 deletions scripts/src/generate-type-docs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -202,14 +202,26 @@ const extractTypesForFramework = async (framework: string) => {
'',
)
const newName = voca.isEmpty(shortName) ? 'Root' : shortName
return [newName, Object.fromEntries(Object.entries(x[1]))]
return [newName, { props: Object.fromEntries(Object.entries(x[1])) }]
})
.filter((y) => Object.keys(y[1]).length !== 0),
),
)
.filter((value) => Object.keys(value).length !== 0)
// biome-ignore lint/performance/noAccumulatingSpread: <explanation>
.reduce((acc, value) => ({ ...acc, ...value }), {}),
.reduce((acc, value) => {
const [partName, partValue] = Object.entries(value)[0]
const key = partName.replace('Emits', '')
// @ts-expect-error
const props = partValue.props

if (partName.endsWith('Emits')) {
acc[key] = { ...acc[key], emits: props }
} else {
acc[partName] = { ...acc[partName], props }
}

return acc
}, {}),
}
}),
)
Expand Down
6 changes: 4 additions & 2 deletions website/src/components/component-types.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Fragment } from 'react'
import { Heading } from '~/components/ui'
import { getServerContext } from '~/lib/server-context'
import { DataAttrTable } from './data-attr-table'
import { EmitsTable } from './emits-table'
import { PropsTable } from './props-table'
import { types } from '.velite'

Expand All @@ -21,10 +22,11 @@ export const ComponentTypes = (props: Props) => {

return Object.entries(api.parts)
.sort(([key]) => (key === 'Root' ? -1 : 1))
.map(([key, properties]) => (
.map(([key, types]) => (
<Fragment key={key}>
<Heading as="h3">{key}</Heading>
<PropsTable properties={properties} />
<PropsTable properties={types.props} />
<EmitsTable emits={types.emits} />
<DataAttrTable component={props.id} part={key} />
</Fragment>
))
Expand Down
57 changes: 57 additions & 0 deletions website/src/components/emits-table.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { MinusIcon } from 'lucide-react'
import { Box, Stack } from 'styled-system/jsx'
import { Code, Icon, Table, Text } from '~/components/ui'

interface Props {
emits:
| Record<
string,
{
type: string
isRequired: boolean
defaultValue?: string | undefined
description?: string | undefined
}
>
| undefined
}

export const EmitsTable = (props: Props) => {
const { emits } = props
if (!emits) {
return null
}
return (
<Box borderWidth="1px" borderRadius="lg" overflowX="auto" className="not-prose" my="8">
<Table.Root variant="outline" size="sm" border="none">
<Table.Head>
<Table.Row>
<Table.Header px="4" bg="gray.2" h="10">
Emit
</Table.Header>
<Table.Header px="4" bg="gray.2" h="10">
Event
</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
{Object.entries(emits).map(([name, property]) => (
<Table.Row key={name}>
<Table.Cell width="36" px="4" py="2" verticalAlign="top">
<Code size="sm" color="accent.default">
{name}
</Code>
</Table.Cell>
<Table.Cell px="4" py="2" verticalAlign="top">
<Stack gap="1" align="start">
<Code size="sm">{property.type}</Code>
<Text>{property.description}</Text>
</Stack>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
</Box>
)
}
200 changes: 105 additions & 95 deletions website/src/content/types/react/accordion.types.json
Original file line number Diff line number Diff line change
@@ -1,112 +1,122 @@
{
"ItemContent": {
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
"props": {
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
}
}
},
"ItemIndicator": {
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
"props": {
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
}
}
},
"Item": {
"value": {
"type": "string",
"isRequired": true,
"description": "The value of the accordion item."
},
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
},
"disabled": {
"type": "boolean",
"isRequired": false,
"description": "Whether the accordion item is disabled."
"props": {
"value": {
"type": "string",
"isRequired": true,
"description": "The value of the accordion item."
},
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
},
"disabled": {
"type": "boolean",
"isRequired": false,
"description": "Whether the accordion item is disabled."
}
}
},
"ItemTrigger": {
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
"props": {
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
}
}
},
"Root": {
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
},
"collapsible": {
"type": "boolean",
"defaultValue": "false",
"isRequired": false,
"description": "Whether an accordion item can be after it has been expanded."
},
"defaultValue": {
"type": "string[]",
"isRequired": false,
"description": "The initial value of the accordion when it is first rendered.\nUse when you do not need to control the state of the accordion."
},
"disabled": {
"type": "boolean",
"isRequired": false,
"description": "Whether the accordion items are disabled"
},
"id": {
"type": "string",
"isRequired": false,
"description": "The unique identifier of the machine."
},
"ids": {
"type": "Partial<{\n root: string\n item(value: string): string\n content(value: string): string\n trigger(value: string): string\n}>",
"isRequired": false,
"description": "The ids of the elements in the accordion. Useful for composition."
},
"lazyMount": {
"type": "boolean",
"defaultValue": "false",
"isRequired": false,
"description": "Whether to enable lazy mounting"
},
"multiple": {
"type": "boolean",
"defaultValue": "false",
"isRequired": false,
"description": "Whether multple accordion items can be expanded at the same time."
},
"onFocusChange": {
"type": "(details: FocusChangeDetails) => void",
"isRequired": false,
"description": "The callback fired when the focused accordion item changes."
},
"onValueChange": {
"type": "(details: ValueChangeDetails) => void",
"isRequired": false,
"description": "The callback fired when the state of expanded/collapsed accordion items changes."
},
"orientation": {
"type": "'horizontal' | 'vertical'",
"defaultValue": "\"vertical\"",
"isRequired": false,
"description": "The orientation of the accordion items."
},
"unmountOnExit": {
"type": "boolean",
"defaultValue": "false",
"isRequired": false,
"description": "Whether to unmount on exit."
},
"value": {
"type": "string[]",
"isRequired": false,
"description": "The `value` of the accordion items that are currently being expanded."
"props": {
"asChild": {
"type": "boolean",
"isRequired": false,
"description": "Render as a different element type."
},
"collapsible": {
"type": "boolean",
"defaultValue": "false",
"isRequired": false,
"description": "Whether an accordion item can be after it has been expanded."
},
"defaultValue": {
"type": "string[]",
"isRequired": false,
"description": "The initial value of the accordion when it is first rendered.\nUse when you do not need to control the state of the accordion."
},
"disabled": {
"type": "boolean",
"isRequired": false,
"description": "Whether the accordion items are disabled"
},
"id": {
"type": "string",
"isRequired": false,
"description": "The unique identifier of the machine."
},
"ids": {
"type": "Partial<{\n root: string\n item(value: string): string\n content(value: string): string\n trigger(value: string): string\n}>",
"isRequired": false,
"description": "The ids of the elements in the accordion. Useful for composition."
},
"lazyMount": {
"type": "boolean",
"defaultValue": "false",
"isRequired": false,
"description": "Whether to enable lazy mounting"
},
"multiple": {
"type": "boolean",
"defaultValue": "false",
"isRequired": false,
"description": "Whether multple accordion items can be expanded at the same time."
},
"onFocusChange": {
"type": "(details: FocusChangeDetails) => void",
"isRequired": false,
"description": "The callback fired when the focused accordion item changes."
},
"onValueChange": {
"type": "(details: ValueChangeDetails) => void",
"isRequired": false,
"description": "The callback fired when the state of expanded/collapsed accordion items changes."
},
"orientation": {
"type": "'horizontal' | 'vertical'",
"defaultValue": "\"vertical\"",
"isRequired": false,
"description": "The orientation of the accordion items."
},
"unmountOnExit": {
"type": "boolean",
"defaultValue": "false",
"isRequired": false,
"description": "Whether to unmount on exit."
},
"value": {
"type": "string[]",
"isRequired": false,
"description": "The `value` of the accordion items that are currently being expanded."
}
}
}
}

0 comments on commit 0139ab8

Please sign in to comment.