Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
more work
Browse files Browse the repository at this point in the history
huntabyte committed Dec 7, 2024
1 parent 99d7bc9 commit 1b3756d
Showing 6 changed files with 57 additions and 54 deletions.
6 changes: 6 additions & 0 deletions docs/src/content/components/card.md
Original file line number Diff line number Diff line change
@@ -99,6 +99,12 @@ The title to display in the card.
The icon to display in the card.
</PropField>

<PropField name="href" type="string">

If provided, the card will become a link. The `target` is handled automatically based on what the `href` starts with. External links will open in a new tab, and internal links will open in the current tab.

</PropField>

<PropField name="children" type="Snippet">
The body content of the card.
</PropField>
22 changes: 22 additions & 0 deletions docs/src/content/components/prop-field.md
Original file line number Diff line number Diff line change
@@ -69,3 +69,25 @@ Configuration options to customize the behavior of the `Checkbox` component.
</PropField>
</Collapsible>
</PropField>

## Props

<PropField name="name" type="string" required>
The name of the prop.
</PropField>

<PropField name="type" type="string" required>
The type of the prop.
</PropField>

<PropField name="defaultValue" type="string">
The default value of the prop.
</PropField>

<PropField name="required" type="boolean" defaultValue="false">
Whether the prop is required.
</PropField>

<PropField name="children" type="Snippet">
The description/content to display within the prop field.
</PropField>
33 changes: 21 additions & 12 deletions docs/src/content/components/tabs.md
Original file line number Diff line number Diff line change
@@ -6,6 +6,8 @@ section: Components

<script>
import { Tabs, TabItem, Callout, PropField } from "@svecodocs/kit";
const itemsA = ["First tab", "Second tab"];
const itemsB = ["+page.svelte", "+page.server.ts"];
</script>

You can use the `Tabs` and `TabItem` components to create tabbed interfaces. A `label` prop must be provided to each `TabItem` which will be used to display the label. Whichever tab should be active by default is specified by the `value` prop on the `Tabs` component.
@@ -15,27 +17,28 @@ You can use the `Tabs` and `TabItem` components to create tabbed interfaces. A `
```svelte title="document.md"
<script>
import { Tabs, TabItem } from "@svecodocs/kit";
const items = ["First tab", "Second tab"];
</script>
<Tabs value="First tab">
<TabItem label="First tab">This is the first tab's content.</TabItem>
<TabItem label="Second tab">This is the second tab's content.</TabItem>
<Tabs value="First tab" {items}>
<TabItem value="First tab">This is the first tab's content.</TabItem>
<TabItem value="Second tab">This is the second tab's content.</TabItem>
</Tabs>
```

## Examples

### Simple Text

<Tabs value="First tab">
<TabItem label="First tab">This is the first tab's content.</TabItem>
<TabItem label="Second tab">This is the second tab's content.</TabItem>
<Tabs items={itemsA}>
<TabItem value="First tab">This is the first tab's content.</TabItem>
<TabItem value="Second tab">This is the second tab's content.</TabItem>
</Tabs>

### Markdown Syntax

<Tabs value="+page.svelte">
<TabItem label="+page.svelte">
<Tabs items={itemsB}>
<TabItem value="+page.svelte">

```svelte
<script lang="ts">
@@ -47,7 +50,7 @@ You can use the `Tabs` and `TabItem` components to create tabbed interfaces. A `

</TabItem>

<TabItem label="+page.server.ts">
<TabItem value="+page.server.ts">

```ts
export async function load() {
@@ -68,12 +71,18 @@ export async function load() {

### Tabs

<PropField name="value" type="string" required>
<PropField name="items" type="string[]" required>
The tab items to display.
</PropField>

<PropField name="value" type="string" default="items[0]">
The label of the tab to be active by default.
</PropField>

### TabItem

<PropField name="label" type="string" required>
The label to display for the tab.
<PropField name="value" type="string" required>

The value that identifies the tab. This value should map to an item within the `items` prop passed to the `Tabs` component.

</PropField>
24 changes: 0 additions & 24 deletions packages/kit/src/lib/components/tabs/context.svelte.ts

This file was deleted.

15 changes: 2 additions & 13 deletions packages/kit/src/lib/components/tabs/tab-item.svelte
Original file line number Diff line number Diff line change
@@ -1,23 +1,12 @@
<script lang="ts">
import * as Tabs from "$lib/components/ui/tabs/index.js";
import type { Snippet } from "svelte";
import { useTabs } from "./context.svelte.js";
const ctx = useTabs();
let { label, children }: { label: string; children?: Snippet } = $props();
const unregister = ctx.registerItem(label);
$effect(() => {
return () => {
unregister();
};
});
let { value, children }: { value: string; children?: Snippet } = $props();
</script>

<Tabs.Content
value={label}
{value}
class="relative [&_h3.font-heading]:text-base [&_h3.font-heading]:font-semibold"
>
{@render children?.()}
11 changes: 6 additions & 5 deletions packages/kit/src/lib/components/tabs/tabs.svelte
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<script lang="ts">
import * as Tabs from "$lib/components/ui/tabs/index.js";
import type { Snippet } from "svelte";
import { useTabs } from "./context.svelte.js";
import { Separator } from "$lib/components/ui/separator/index.js";
let { value, children }: { value: string; children?: Snippet } = $props();
const ctx = useTabs(true);
let {
items,
value = items[0],
children,
}: { value?: string; items: string[]; children?: Snippet } = $props();
</script>

<Tabs.Root class="relative mb-12 mt-6 w-full" {value}>
<Tabs.List class="w-full justify-start rounded-none bg-transparent p-0">
{#each ctx.items as item (item)}
{#each items as item (item)}
<Tabs.Trigger
class="text-muted-foreground data-[state=active]:border-b-brand data-[state=active]:text-foreground relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-medium shadow-none transition-none data-[state=active]:shadow-none"
value={item}

0 comments on commit 1b3756d

Please sign in to comment.