From 3d9d3dc374df3d72fb4d757663fd212216ba4cb0 Mon Sep 17 00:00:00 2001
From: Marco Di Pillo Tomic <marcodpt@protonmail.com>
Date: Tue, 13 Aug 2024 15:37:35 -0300
Subject: [PATCH] form and table docs advances

---
 src/form/spec.js  | 102 +++++++++++++++++++++++++++++++++++++++++++++-
 src/table/spec.js |  58 +++++++++++++++++++++++++-
 2 files changed, 158 insertions(+), 2 deletions(-)

diff --git a/src/form/spec.js b/src/form/spec.js
index d2ff62b..0c89418 100644
--- a/src/form/spec.js
+++ b/src/form/spec.js
@@ -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',
diff --git a/src/table/spec.js b/src/table/spec.js
index bdd4a71..f44615d 100644
--- a/src/table/spec.js
+++ b/src/table/spec.js
@@ -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',