Skip to content

Commit

Permalink
form and table docs advances
Browse files Browse the repository at this point in the history
  • Loading branch information
marcodpt committed Aug 13, 2024
1 parent 725f93f commit 3d9d3dc
Show file tree
Hide file tree
Showing 2 changed files with 158 additions and 2 deletions.
102 changes: 101 additions & 1 deletion src/form/spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,107 @@ export default ({
title: 'form',
description: 'Form with validation.',
component: form,
properties: {},
args: [
{
type: 'object',
properties: {
css: {
type: ['string', 'array'],
description: `Classes to apply to the returned node.`,
default: ''
},
update: {
type: 'function',
description: `
Function that is called every time a form field is updated.
When rendering the form, update is also called with the default values.
`,
args: [
{
title: 'error',
type: 'boolean',
description: `Whether the form fields passed validation.`
},
{
title: 'Data',
type: 'object',
description: `
Form data, regardless of whether it passes validation.
`
}, {
title: 'Label',
type: 'object',
description: `
Associated formatted text of each data property.
In the case of options present, it will bear the associated label.
`
}
]
},
submit: {
type: 'function',
description: `
Function that will be called when submitting the form.
And if validation passes.
`,
args: [
{
title: 'Data',
type: 'object',
description: `Form data.`
}, {
title: 'Label',
type: 'object',
description: `
Associated formatted text of each data property.
In the case of options present, it will bear the associated label.
`
}
],
returns: {
type: ['string', 'null'],
default: null,
description: `
When the download and mime properties are passed.
If submit returns a string, it will be treated as downloadable content.
`
}
},
links: {
type: 'array',
description: `
Links that will be displayed at the end of the form.
Use href: 'submit' to create a submit button.
`
},
block: {
type: 'boolean',
default: false,
description: `
Whether links should occupy the entire width.
And whether they should be displayed as a group.
`
},
download: {
type: 'string',
default: '',
description: `
The name of the file to download when upload returns its contents.
`
},
mime: {
type: 'string',
default: '',
description: `
The MIME of the file to download when upload returns its contents.
`
}
}
}
],
returns: {
type: 'node'
},
examples: [
{
title: 'Empty',
Expand Down
58 changes: 57 additions & 1 deletion src/table/spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,63 @@ export default ({
title: 'table',
description: 'Table with many integrated functionalities.',
component: table,
properties: {},
args: [
{
type: 'object',
properties: {
title: {
type: 'string',
},
links: {
type: 'array'
},
items: {
type: 'object'
},
sort: {
type: 'boolean',
default: false
},
search: {
type: 'string',
default: ''
},
css: {
type: ['string', 'array'],
default: '',
description: `
A list of classes to apply to the returned table element.
Common use cases:
table-striped
Adds zebra stripes to the table.
table-hover
Highlights current line on hover.
table-bordered
Adds borders to the table.
table-borderless
Removes all borders from the table.
table-sm
Makes the table more compact by reducing spacing.
table-{context}
Changes the color scheme of the table.
table-responsive{-sm|-md|-lg|-xl|-xxl}
Allows horizontal scrolling in the table.
Useful for tables with many columns that are large for the viewport.
`
}
}
}
],
returns: {
type: 'node'
},
examples: [
{
title: 'Empty',
Expand Down

0 comments on commit 3d9d3dc

Please sign in to comment.