From 676f38b389fa6e2011b9fe212dd5a0914016505a Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Fri, 18 Aug 2023 23:34:17 -0400 Subject: [PATCH] doc updates --- src/content/api-reference/alert-dialog.ts | 2 +- src/content/api-reference/button.ts | 26 +++--- src/content/api-reference/checkbox.ts | 88 ++++++++++++++++++ src/content/api-reference/collapsible.ts | 93 +++++++++++++++++++ src/content/api-reference/dialog.ts | 2 +- src/content/api-reference/index.ts | 10 +- src/content/components/button.md | 9 +- src/content/components/checkbox.md | 7 ++ src/content/components/collapsible.md | 7 ++ .../components/CheckboxIndicator.svelte | 2 +- .../checkbox/components/CheckboxInput.svelte | 13 ++- src/utils/docs.ts | 2 +- 12 files changed, 237 insertions(+), 24 deletions(-) create mode 100644 src/content/api-reference/checkbox.ts create mode 100644 src/content/api-reference/collapsible.ts diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts index f5517adda..cdfc2b0e3 100644 --- a/src/content/api-reference/alert-dialog.ts +++ b/src/content/api-reference/alert-dialog.ts @@ -57,7 +57,7 @@ export const cancel: APISchema = { }; export const content: APISchema = { - title: "Cancel", + title: "Content", description: "The content displayed within the alert dialog modal.", props: [asChild], dataAttributes: [ diff --git a/src/content/api-reference/button.ts b/src/content/api-reference/button.ts index 4b858fc5b..59fe61acf 100644 --- a/src/content/api-reference/button.ts +++ b/src/content/api-reference/button.ts @@ -2,25 +2,21 @@ import type { APISchema } from "@/types"; export const root: APISchema = { title: "Root", - description: "The root component used to set and manage the state of the avatar.", + description: + "A special button component that can receive Melt UI builders for use with the `asChild` prop.", props: [ { - name: "delayMs", - default: "0", - type: "number", - description: - "How long to wait before showing the image after it has loaded. This can be useful to prevent a harsh flickering effect when the image loads quickly." + name: "builders", + default: "[]", + type: "Builder[]", + description: "An array of melt builders to be applied to the button." }, { - name: "loadingStatus", - type: "'loading' | 'loaded' | 'error'", - description: - "The loading status of the avatars source image. You can bind a variable to track the status outside of the component and use it to show a loading indicator or error message." - }, - { - name: "onLoadingStatusChange", - type: "(status: 'loading' | 'loaded' | 'error') => void", - description: "A callback function called when the loading status of the image changes." + name: "href", + type: "string", + description: "An optional prop that when passed converts the button into an anchor tag." } ] }; + +export const button = [root]; diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts new file mode 100644 index 000000000..170527149 --- /dev/null +++ b/src/content/api-reference/checkbox.ts @@ -0,0 +1,88 @@ +import type { APISchema } from "@/types"; + +export const root: APISchema = { + title: "Root", + description: "The button component used to toggle the state of the checkbox.", + props: [ + { + name: "disabled", + default: "false", + type: "boolean", + description: + "Whether or not the checkbox button is disabled. This prevents the user from interacting with it." + }, + { + name: "checked", + default: "false", + type: "boolean | 'indeterminate'", + description: + "The checkbox button's checked state. This can be a boolean or the string 'indeterminate', which would typically display a dash in the checkbox." + }, + { + name: "onCheckedChange", + type: "(checked: boolean | 'indeterminate') => void", + description: "A callback that is fired when the checkbox button's checked state changes." + } + ], + dataAttributes: [ + { + name: "disabled", + description: "Present when the checkbox is disabled.", + value: "''" + }, + { + name: "state", + value: "'checked' | 'unchecked' | 'indeterminate'", + description: "The checkbox's state. Can be 'checked', 'unchecked', or 'indeterminate'." + }, + { + name: "melt-checkbox", + value: "''", + description: "Present on the root element of the checkbox." + } + ] +}; + +export const input: APISchema = { + title: "Input", + description: + "The hidden input element that is used to store the checkbox's state for form submission. It receives all the same props as a regular HTML input element.", + props: [ + { + name: "value", + default: "false", + type: "boolean", + description: + "Unless a value is provided, the input's value will be a boolean that represents the checkbox's checked state. Indeterminate checkboxes will have a value of `false`." + }, + { + name: "disabled", + default: "false", + type: "boolean", + description: + "Whether or not the checkbox input is disabled. If not provided, it will inherit the disabled state of the Root component, which defaults to false." + } + ], + dataAttributes: [ + { + name: "melt-checkbox-input", + value: "''", + description: "Present on the input element." + } + ] +}; + +export const indicator: APISchema = { + title: "Indicator", + description: + "A component which passes `isChecked` and `isIndeterminate` slot props to its children. This is useful for rendering the checkbox's indicator icon depending on its state.", + dataAttributes: [ + { + name: "melt-checkbox-indicator", + value: "''", + description: "Present on the indicator element." + } + ] +}; + +export const checkbox = [root, input, indicator]; diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts new file mode 100644 index 000000000..3df1ad5ee --- /dev/null +++ b/src/content/api-reference/collapsible.ts @@ -0,0 +1,93 @@ +import type { APISchema } from "@/types"; +import { asChild } from "./helpers"; + +export const root: APISchema = { + title: "Root", + description: "The root collapsible container which manages the state of the collapsible.", + props: [ + { + name: "disabled", + default: "false", + type: "boolean", + description: + "Whether or not the collapsible is disabled. This prevents the user from interacting with it." + }, + { + name: "open", + default: "false", + type: "boolean", + description: + "The open state of the collapsible. The content will be visible when this is true, and hidden when it's false." + }, + { + name: "onOpenChange", + type: "(open: boolean) => void", + description: "A callback that is fired when the collapsible's open state changes." + } + ], + dataAttributes: [ + { + name: "disabled", + description: "Present when the checkbox is disabled.", + value: "''" + }, + { + name: "state", + value: "'open' | 'closed'", + description: "The collapsible's open state." + }, + { + name: "melt-collapsible", + value: "''", + description: "Present on the root element of the collapsible." + } + ] +}; + +export const trigger: APISchema = { + title: "Trigger", + description: "The button responsible for toggling the collapsible's open state.", + props: [asChild], + dataAttributes: [ + { + name: "disabled", + description: "Present when the checkbox is disabled.", + value: "''" + }, + { + name: "state", + value: "'open' | 'closed'", + description: "The collapsible's open state." + }, + { + name: "melt-collapsible-trigger", + value: "''", + description: "Present on the trigger element of the collapsible." + } + ] +}; + +export const content: APISchema = { + title: "Content", + description: "The content displayed when the collapsible is open.", + props: [asChild], + dataAttributes: [ + { + name: "disabled", + description: "Present when the checkbox is disabled.", + value: "''" + }, + { + name: "state", + value: "'open' | 'closed'", + description: "The collapsible's open state." + }, + { + name: "melt-collapsible-content", + value: "''", + description: "Present on the content element of the collapsible." + } + ] +}; + +export const collapsible = [root, trigger, content]; diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts index 813409302..7c695544e 100644 --- a/src/content/api-reference/dialog.ts +++ b/src/content/api-reference/dialog.ts @@ -51,7 +51,7 @@ export const close: APISchema = { }; export const content: APISchema = { - title: "Cancel", + title: "Content", description: "The content displayed within the dialog modal.", props: [asChild], dataAttributes: [ diff --git a/src/content/api-reference/index.ts b/src/content/api-reference/index.ts index 1d07c530b..c40ea152d 100644 --- a/src/content/api-reference/index.ts +++ b/src/content/api-reference/index.ts @@ -4,6 +4,9 @@ import { alertDialog } from "./alert-dialog"; import { dialog } from "./dialog"; import { aspectRatio } from "./aspect-ratio"; import { avatar } from "./avatar"; +import { button } from "./button"; +import { checkbox } from "./checkbox"; +import { collapsible } from "./collapsible"; export const bits = [ "accordion", @@ -16,7 +19,7 @@ export const bits = [ "context-menu", "dialog", "dropdown-menu", - "hover-card", + "link-preview", "label", "menubar", "popover", @@ -44,7 +47,10 @@ export const apiSchemas: Record = { "alert-dialog": alertDialog, dialog, "aspect-ratio": aspectRatio, - avatar + avatar, + button, + checkbox, + collapsible }; export function getAPISchemas(bit: Bit): APISchema[] { diff --git a/src/content/components/button.md b/src/content/components/button.md index f458af4af..f2c6e54cc 100644 --- a/src/content/components/button.md +++ b/src/content/components/button.md @@ -1,8 +1,13 @@ --- title: Button -description: An interactive component that triggers an event. +description: A special button component that can receive Melt UI builders for use with the `asChild` prop. --- + + ## Structure ```svelte @@ -13,4 +18,6 @@ description: An interactive component that triggers an event. ``` + + 🚧 **UNDER CONSTRUCTION** 🚧 diff --git a/src/content/components/checkbox.md b/src/content/components/checkbox.md index fb5f4924d..bcc841764 100644 --- a/src/content/components/checkbox.md +++ b/src/content/components/checkbox.md @@ -3,6 +3,11 @@ title: Checkbox description: Allow users to mark options as checked, unchecked, or indeterminate, accommodating versatile states. --- + + ## Structure ```svelte @@ -16,4 +21,6 @@ description: Allow users to mark options as checked, unchecked, or indeterminate ``` + + 🚧 **UNDER CONSTRUCTION** 🚧 diff --git a/src/content/components/collapsible.md b/src/content/components/collapsible.md index aeac6a32e..761e3f7b6 100644 --- a/src/content/components/collapsible.md +++ b/src/content/components/collapsible.md @@ -3,6 +3,11 @@ title: Collapsible description: An interactive component which expands and collapses content. --- + + ## Structure ```svelte @@ -16,4 +21,6 @@ description: An interactive component which expands and collapses content. ``` + + 🚧 **UNDER CONSTRUCTION** 🚧 diff --git a/src/lib/bits/checkbox/components/CheckboxIndicator.svelte b/src/lib/bits/checkbox/components/CheckboxIndicator.svelte index ffcb26b8c..2dc5f57ee 100644 --- a/src/lib/bits/checkbox/components/CheckboxIndicator.svelte +++ b/src/lib/bits/checkbox/components/CheckboxIndicator.svelte @@ -6,6 +6,6 @@ const { isChecked, isIndeterminate } = ctx.getIndicator(); -
+
diff --git a/src/lib/bits/checkbox/components/CheckboxInput.svelte b/src/lib/bits/checkbox/components/CheckboxInput.svelte index 1eacfa39f..55d4d052b 100644 --- a/src/lib/bits/checkbox/components/CheckboxInput.svelte +++ b/src/lib/bits/checkbox/components/CheckboxInput.svelte @@ -4,7 +4,16 @@ type $$Props = InputProps; - const isChecked = ctx.get().helpers.isChecked; + const { + helpers: { isChecked }, + options: { disabled } + } = ctx.get(); - + diff --git a/src/utils/docs.ts b/src/utils/docs.ts index 7559d2230..81f3e6366 100644 --- a/src/utils/docs.ts +++ b/src/utils/docs.ts @@ -1,4 +1,4 @@ -import { bits, bitsSet, getAPISchemas, isBit } from "@/content/api-reference"; +import { getAPISchemas, isBit } from "@/content/api-reference"; import type { APISchema } from "@/types"; import { error, redirect } from "@sveltejs/kit";