mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
docs: enhance Component API documentation
Replaces PUBLIC_API.json with COMPONENT_API.json generated by sveld.
This commit is contained in:
Eric Liu
parent
380a780b65
commit
b313fb6787
9 changed files with 110 additions and 16516 deletions
10185
docs/src/COMPONENT_API.json
Normal file
10185
docs/src/COMPONENT_API.json
Normal file
File diff suppressed because it is too large
Load diff
16451
docs/src/PUBLIC_API.json
16451
docs/src/PUBLIC_API.json
File diff suppressed because it is too large
Load diff
|
|
@ -2,8 +2,8 @@
|
|||
export let component = {
|
||||
props: [],
|
||||
slots: [],
|
||||
forwarded_events: [],
|
||||
dispatched_events: [],
|
||||
events: [],
|
||||
rest_props: undefined,
|
||||
};
|
||||
|
||||
import {
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
TooltipDefinition,
|
||||
UnorderedList,
|
||||
ListItem,
|
||||
Tag,
|
||||
} from "carbon-components-svelte";
|
||||
import InlineSnippet from "./InlineSnippet.svelte";
|
||||
import Launch16 from "carbon-icons-svelte/lib/Launch16";
|
||||
|
|
@ -28,6 +29,14 @@
|
|||
null: "null",
|
||||
Date: "JavaScript Date",
|
||||
};
|
||||
|
||||
$: source = `https://github.com/IBM/carbon-components-svelte/tree/master${component.filePath}`;
|
||||
$: forwarded_events = component.events.filter(
|
||||
(event) => event.type === "forwarded"
|
||||
);
|
||||
$: dispatched_events = component.events.filter(
|
||||
(event) => event.type === "dispatched"
|
||||
);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -53,6 +62,14 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<p style="margin-bottom: var(--cds-layout-02)">
|
||||
View component
|
||||
<Link href="{source}" target="_blank">
|
||||
source code
|
||||
<Launch16 />
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<h3 id="props">Props</h3>
|
||||
|
||||
{#if component.props.length > 0}
|
||||
|
|
@ -69,16 +86,18 @@
|
|||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
{#each component.props as prop}
|
||||
{#each component.props.sort((a, b) => {
|
||||
if (a.reactive > b.reactive) return -1;
|
||||
}) as prop (prop.name)}
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>
|
||||
<InlineSnippet code="{prop[0]}" />
|
||||
<InlineSnippet code="{prop.name}" />
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#each prop[1].type.split(' | ') as type, i (type)}
|
||||
{#each prop.type.split(' | ') as type, i (type)}
|
||||
<div
|
||||
class="cell"
|
||||
style="z-index: {prop[1].type.split(' | ').length - i}"
|
||||
style="z-index: {prop.type.split(' | ').length - i}"
|
||||
>
|
||||
{#if type.startsWith('typeof')}
|
||||
<TooltipDefinition
|
||||
|
|
@ -106,14 +125,24 @@
|
|||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{#if prop.reactive}
|
||||
<div
|
||||
style="white-space: nowrap; margin-left: calc(-1 * var(--cds-spacing-03)); margin-top: var(--cds-spacing-05)"
|
||||
>
|
||||
<Tag type="green">Reactive</Tag>
|
||||
</div>
|
||||
{/if}
|
||||
</StructuredListCell>
|
||||
<StructuredListCell><code>{prop.value}</code></StructuredListCell>
|
||||
<StructuredListCell>
|
||||
<code>{prop[1].value}</code>
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#each prop[1].description.split('\n') as line}
|
||||
<div class="description">{line}.</div>
|
||||
{/each}
|
||||
{#if prop.description}
|
||||
{#each prop.description.split('\n') as line}
|
||||
<div class="description">{line}.</div>
|
||||
{/each}
|
||||
{:else}
|
||||
<div class="description">No description available.</div>
|
||||
{/if}
|
||||
</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
{/each}
|
||||
|
|
@ -126,8 +155,8 @@
|
|||
<h3 id="slots">Slots</h3>
|
||||
{#if component.slots.length > 0}
|
||||
<UnorderedList class="my-layout-01-03">
|
||||
{#each component.slots as slot}
|
||||
<ListItem>{slot[0]}</ListItem>
|
||||
{#each component.slots as slot (slot.name)}
|
||||
<ListItem>{slot.default ? 'default' : slot.name}</ListItem>
|
||||
{/each}
|
||||
</UnorderedList>
|
||||
{:else}
|
||||
|
|
@ -135,10 +164,10 @@
|
|||
{/if}
|
||||
|
||||
<h3 id="forwarded-events">Forwarded events</h3>
|
||||
{#if component.forwarded_events.length > 0}
|
||||
{#if forwarded_events.length > 0}
|
||||
<UnorderedList class="my-layout-01-03">
|
||||
{#each component.forwarded_events as event}
|
||||
<ListItem>on:{event[0]}</ListItem>
|
||||
{#each forwarded_events as event (event.name)}
|
||||
<ListItem>on:{event.name}</ListItem>
|
||||
{/each}
|
||||
</UnorderedList>
|
||||
{:else}
|
||||
|
|
@ -147,12 +176,27 @@
|
|||
|
||||
<h3 id="dispatched-events">Dispatched events</h3>
|
||||
|
||||
{#if component.dispatched_events.length > 0}
|
||||
{#if dispatched_events.length > 0}
|
||||
<UnorderedList class="my-layout-01-03">
|
||||
{#each component.dispatched_events as event}
|
||||
<ListItem>on:{event[0]}</ListItem>
|
||||
{#each dispatched_events as event (event.name)}
|
||||
<ListItem>on:{event.name}</ListItem>
|
||||
{/each}
|
||||
</UnorderedList>
|
||||
{:else}
|
||||
<p class="my-layout-01-03">No dispatched events.</p>
|
||||
{/if}
|
||||
|
||||
<h3 id="rest-props">$$restProps</h3>
|
||||
|
||||
<div class="my-layout-01-03">
|
||||
{#if component.rest_props}
|
||||
<code>{component.moduleName}</code>
|
||||
spreads
|
||||
<code>$$restProps</code>
|
||||
to the
|
||||
{#if component.rest_props.type === 'Element'}
|
||||
<code>{component.rest_props.name}</code>
|
||||
element.
|
||||
{:else}<code>{component.rest_props.name}</code> component.{/if}
|
||||
{:else}This component does not spread <code>restProps</code>{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,18 +12,13 @@
|
|||
Tabs,
|
||||
Tab,
|
||||
TabContent,
|
||||
StructuredList,
|
||||
StructuredListHead,
|
||||
StructuredListRow,
|
||||
StructuredListCell,
|
||||
StructuredListBody,
|
||||
} from "carbon-components-svelte";
|
||||
import Code16 from "carbon-icons-svelte/lib/Code16";
|
||||
import { page, metatags } from "@sveltech/routify";
|
||||
import { onMount } from "svelte";
|
||||
import { theme } from "../store";
|
||||
import ComponentApi from "../components/ComponentApi.svelte";
|
||||
import API from "../PUBLIC_API.json";
|
||||
import COMPONENT_API from "../COMPONENT_API.json";
|
||||
|
||||
export let component = $page.title;
|
||||
export let components = [component];
|
||||
|
|
@ -33,8 +28,10 @@
|
|||
|
||||
metatags.title = $page.title;
|
||||
|
||||
$: api = components.map((_) => API.components[_]).filter(Boolean);
|
||||
$: multiple = api.length > 1;
|
||||
$: api_components = components.map((i) =>
|
||||
COMPONENT_API.components.find((_) => _.moduleName === i)
|
||||
);
|
||||
$: multiple = api_components.length > 1;
|
||||
|
||||
onMount(() => {
|
||||
const currentTheme = window.location.search.split("?theme=")[1];
|
||||
|
|
@ -173,15 +170,10 @@
|
|||
<slot />
|
||||
<h2 id="component-api">Component API</h2>
|
||||
<p>
|
||||
Component API documentation is
|
||||
<Link
|
||||
inline
|
||||
href="https://github.com/IBM/carbon-components-svelte/blob/master/scripts/rollup/plugin-generate-docs.js"
|
||||
target="_blank"
|
||||
>
|
||||
auto-generated
|
||||
Component documentation is
|
||||
<Link inline href="https://github.com/IBM/sveld" target="_blank">
|
||||
auto-generated by sveld.
|
||||
</Link>
|
||||
from a build script.
|
||||
</p>
|
||||
</Column>
|
||||
</Row>
|
||||
|
|
@ -190,11 +182,11 @@
|
|||
<Column class="prose" noGutter="{multiple}">
|
||||
{#if multiple}
|
||||
<Tabs class="override-tabs">
|
||||
{#each api as component, i (component.moduleName)}
|
||||
{#each api_components as component (component.moduleName)}
|
||||
<Tab label="{component.moduleName}" />
|
||||
{/each}
|
||||
<div slot="content" style="padding-top: var(--cds-spacing-06)">
|
||||
{#each api as component, i (component.moduleName)}
|
||||
{#each api_components as component (component.moduleName)}
|
||||
<TabContent>
|
||||
<ComponentApi component="{component}" />
|
||||
</TabContent>
|
||||
|
|
@ -202,7 +194,7 @@
|
|||
</div>
|
||||
</Tabs>
|
||||
{:else}
|
||||
<ComponentApi component="{api[0]}" />
|
||||
<ComponentApi component="{api_components[0]}" />
|
||||
{/if}
|
||||
</Column>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
Content,
|
||||
Select,
|
||||
SelectItem,
|
||||
InlineNotification,
|
||||
} from "carbon-components-svelte";
|
||||
import { page, metatags } from "@sveltech/routify";
|
||||
import { onMount } from "svelte";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue