@chakra-ui/vue components documentation

[codebender828]

@chakra-ui/vue components documentation

Deploy Preview -> https://chakra-ui-vue.now.sh

GUIDELINES

I thought to include this guideline for how to write the component docs.

Props &. Events

You might be referencing the docs for React while writing these. But we must be extremely cautious that we write them knowing that the end user is going to be a Vue.js user. And Vue has fairly different patterns. In React, the entire component API is handled via props. But in Vue we have both props and events.

When browsing the docs in Chakra-ui you will find a few components with a prop called onChange or onSubmit. These should be changed to @change and @submit events in the Vue docs to avoid confusion. These types of props doesn't exist on the @chakra-ui/vue components except 1 or 2 of them.

So this means you need to create two kinds of tables. One for Props, and another for Events.

The Props table will document the usual props. The Events table will document the events emitted by a component.

In summary:

• Use Props table to document props for a component
• Use Events table to document events for a component

Live code samples.

Again, to make the consumption of these components as consumer friendly as possible, we need to provide the code examples is a pattern that is familiar with all Vue developers. Every Vue dev is familiar with the concept of Vue Single File Components. It's made up of the template and script as well.

Static template examples
For simple examples that do not require any data from the script we can just directly render the components. See the badge example taken from here:

<c-badge variant="outline">Updated</c-badge>

Dynamic template state
Examples that require reactive state from the <template> should be accompanied with the <script />. So all such exmaples should adopt the structure of:

<template>
  <!--
    Live code example goes here
  -->
</template>

<script>
export default {
  // Provide reactive data if needed
  data () {
    return {}
  }
}
</script>

In summary:

• For examples that have no reactive state, just directly paste snippet. (See examples in button, checkbox, etc)
• For examples that use reactive state. Include both the and the <script>. (See examples on alertdialog) docs.

  STATUTORIES

  • Getting Started
  • Principles
  • Style Props
  • Color Mode
  • Theme
  • Recipes

  COMPONENTS

  • Accordion
  • Accordion
  • Alert
  • AlertDialog
  • AspectRatioBox
  • Avatar
  • Badge
  • Box
  • Breadcrumb
  • Button
  • Checkbox
  • CircularProgress
  • CloseButton
  • Code
  • Collapse
  • ControlBox
  • Divider
  • Drawer
  • Editable
  • Flex
  • FormControl
  • Grid
  • Heading
  • Icon
  • IconButton
  • Image
  • Input
  • Link
  • List
  • Menu
  • Modal
  • NumberInput
  • Popover
  • Progress
  • PseudoBox
  • Radio
  • SimpleGrid
  • Select
  • Slider
  • Spinner
  • Stat
  • Stack
  • Switch
  • Tabs
  • Tag
  • Text
  • Textarea
  • Toast
  • Tooltip

[DominusKelvin]

Looks all good.

[DominusKelvin]

Okay, I got that. I would update as per the guidelines.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-vue/kgvnhr01m
✅ Preview: https://chakra-ui-vue-git-dev-docs.chakra-ui.now.sh