forked from huntabyte/bits-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New Component: Toggle Group (huntabyte#154)
- Loading branch information
Showing
16 changed files
with
504 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"bits-ui": minor | ||
--- | ||
|
||
New Component: Toggle Group |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
--- | ||
title: Toggle Group | ||
description: An interactive component that toggles between two states. | ||
--- | ||
|
||
<script> | ||
import { APISection, ComponentPreview, ToggleGroupDemo } from '@/components' | ||
export let schemas; | ||
</script> | ||
|
||
<ComponentPreview name="toggle-group-demo" comp="ToggleGroup"> | ||
|
||
<ToggleGroupDemo slot="preview" /> | ||
|
||
</ComponentPreview> | ||
|
||
## Structure | ||
|
||
```svelte | ||
<script lang="ts"> | ||
import { ToggleGroup } from "bits-ui"; | ||
</script> | ||
<ToggleGroup.Root> | ||
<ToggleGroup.Item value="bold">bold</ToggleGroup.Item> | ||
<ToggleGroup.Item value="italic">italic</ToggleGroup.Item> | ||
</ToggleGroup.Root> | ||
``` | ||
|
||
🚧 **UNDER CONSTRUCTION** 🚧 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
<script lang="ts"> | ||
import { ToggleGroup } from "$lib"; | ||
import { Bold, Italic } from "lucide-svelte"; | ||
import { toggleVariants } from "@/components/ui/toggle"; | ||
let value: string[] | undefined = undefined; | ||
$: console.log(value); | ||
</script> | ||
|
||
<ToggleGroup.Root bind:value kind="multiple"> | ||
<ToggleGroup.Item | ||
class={toggleVariants({ variant: "default" })} | ||
aria-label="toggle bold" | ||
value="bold" | ||
> | ||
<Bold class="h-4 w-4" /> | ||
</ToggleGroup.Item> | ||
<ToggleGroup.Item | ||
class={toggleVariants({ variant: "default" })} | ||
aria-label="toggle italic" | ||
value="italic" | ||
> | ||
<Italic class="h-4 w-4" /> | ||
</ToggleGroup.Item> | ||
</ToggleGroup.Root> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
<script lang="ts"> | ||
import { melt } from "@melt-ui/svelte"; | ||
import { setCtx, getAttrs } from "../ctx.js"; | ||
import type { Events, Props } from "../types.js"; | ||
type T = $$Generic<"single" | "multiple">; | ||
type $$Props = Props<T>; | ||
type $$Events = Events; | ||
export let kind: $$Props["kind"] = "single" as T; | ||
export let disabled: $$Props["disabled"] = undefined; | ||
export let loop: $$Props["loop"] = undefined; | ||
export let value: $$Props["value"] = undefined; | ||
export let orientation: $$Props["orientation"] = undefined; | ||
export let onValueChange: $$Props["onValueChange"] = undefined; | ||
export let asChild = false; | ||
const { | ||
elements: { root }, | ||
states: { value: localValue }, | ||
updateOption | ||
} = setCtx<T>({ | ||
disabled, | ||
type: kind, | ||
defaultValue: value, | ||
loop, | ||
orientation, | ||
onValueChange: (({ next }: { next: $$Props["value"] }) => { | ||
if (Array.isArray(next)) { | ||
onValueChange?.(next); | ||
value = next; | ||
return next; | ||
} | ||
if (value !== next) { | ||
onValueChange?.(next); | ||
value = next; | ||
} | ||
return next; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
}) as any | ||
}); | ||
$: value !== undefined && localValue.set(value); | ||
$: updateOption("disabled", disabled); | ||
$: updateOption("loop", loop); | ||
$: updateOption("type", kind); | ||
$: updateOption("orientation", orientation); | ||
$: builder = $root; | ||
const attrs = getAttrs("root"); | ||
</script> | ||
|
||
{#if asChild} | ||
<slot {builder} {attrs} /> | ||
{:else} | ||
<div use:melt={builder} {...$$restProps} {...attrs}> | ||
<slot {builder} {attrs} /> | ||
</div> | ||
{/if} |
35 changes: 35 additions & 0 deletions
35
src/lib/bits/toggle-group/components/ToggleGroupItem.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<script lang="ts"> | ||
import { melt } from "@melt-ui/svelte"; | ||
import { getCtx, getAttrs } from "../ctx"; | ||
import type { ItemProps } from "../types"; | ||
import { createDispatcher } from "$lib/internal"; | ||
type $$Props = ItemProps; | ||
export let value: $$Props["value"]; | ||
export let disabled: $$Props["disabled"] = false; | ||
export let asChild: $$Props["asChild"] = false; | ||
const { | ||
elements: { item } | ||
} = getCtx(); | ||
const dispatch = createDispatcher(); | ||
$: builder = $item({ value, disabled }); | ||
const attrs = getAttrs("item"); | ||
</script> | ||
|
||
{#if asChild} | ||
<slot {builder} {attrs} /> | ||
{:else} | ||
<button | ||
use:melt={builder} | ||
{...$$restProps} | ||
{...attrs} | ||
on:m-click={dispatch} | ||
on:m-keydown={dispatch} | ||
> | ||
<slot {builder} {attrs} /> | ||
</button> | ||
{/if} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { createBitAttrs, getOptionUpdater, removeUndefined } from "$lib/internal/index.js"; | ||
import { | ||
createToggleGroup, | ||
type CreateToggleGroupProps, | ||
type ToggleGroup as ToggleGroupReturn | ||
} from "@melt-ui/svelte"; | ||
import { getContext, setContext } from "svelte"; | ||
|
||
const NAME = "toggle-group"; | ||
const PARTS = ["root", "item"] as const; | ||
|
||
export const getAttrs = createBitAttrs(NAME, PARTS); | ||
|
||
type GetReturn = ToggleGroupReturn; | ||
|
||
export function setCtx<T extends "single" | "multiple">(props: CreateToggleGroupProps<T>) { | ||
const toggleGroup = createToggleGroup(removeUndefined(props)); | ||
setContext(NAME, toggleGroup); | ||
return { | ||
...toggleGroup, | ||
updateOption: getOptionUpdater(toggleGroup.options) | ||
}; | ||
} | ||
|
||
export function getCtx() { | ||
return getContext<GetReturn>(NAME); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import Root from "./components/ToggleGroup.svelte"; | ||
import Item from "./components/ToggleGroupItem.svelte"; | ||
|
||
export { | ||
Root, | ||
Item, | ||
// | ||
Root as ToggleGroup, | ||
Item as ToggleGroupItem | ||
}; | ||
export * from "./types.js"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
import type { CreateToggleGroupProps } from "@melt-ui/svelte"; | ||
import type { | ||
AsChild, | ||
Expand, | ||
HTMLDivAttributes, | ||
OmitValue, | ||
OnChangeFn | ||
} from "$lib/internal/index.js"; | ||
import type { HTMLButtonAttributes } from "svelte/elements"; | ||
import type { CustomEventHandler } from "$lib/index.js"; | ||
|
||
type Props<T extends "single" | "multiple"> = Expand< | ||
OmitValue<CreateToggleGroupProps> & { | ||
value?: CreateToggleGroupProps<T>["defaultValue"]; | ||
onValueChange?: OnChangeFn<CreateToggleGroupProps<T>["defaultValue"]>; | ||
kind?: T; | ||
} | ||
> & | ||
AsChild & | ||
HTMLDivAttributes; | ||
|
||
type ItemProps = { | ||
value: string; | ||
disabled?: boolean; | ||
} & AsChild & | ||
HTMLButtonAttributes; | ||
|
||
type Events<T extends Element = HTMLButtonElement> = { | ||
click: CustomEventHandler<MouseEvent, T>; | ||
keydown: CustomEventHandler<KeyboardEvent, T>; | ||
}; | ||
|
||
export type { | ||
Props, | ||
ItemProps, | ||
// | ||
Props as ToggleGroupProps, | ||
ItemProps as ToggleGroupItemProps, | ||
// | ||
Events, | ||
// | ||
Events as ToggleGroupEvents | ||
}; |
Oops, something went wrong.