-
-
Notifications
You must be signed in to change notification settings - Fork 94
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
16 changed files
with
467 additions
and
204 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
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
24 changes: 0 additions & 24 deletions
24
packages/bits-ui/src/lib/bits/radio-group/components/radio-group-input.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 |
|---|---|---|
| @@ -1,26 +1,2 @@ | ||
| <script lang="ts"> | ||
| import { melt } from "@melt-ui/svelte"; | ||
| import type { InputProps } from "../index.js"; | ||
| import { getCtx } from "../ctx.js"; | ||
| type $$Props = InputProps; | ||
| export let asChild: $$Props["asChild"] = false; | ||
| export let el: $$Props["el"] = undefined; | ||
| const { | ||
| elements: { hiddenInput }, | ||
| getAttrs, | ||
| } = getCtx(); | ||
| const attrs = getAttrs("input"); | ||
| $: builder = $hiddenInput; | ||
| $: Object.assign(builder, attrs); | ||
| </script> | ||
|
|
||
| {#if asChild} | ||
| <slot {builder} /> | ||
| {:else} | ||
| <input bind:this={el} use:melt={builder} {...$$restProps} /> | ||
| {/if} |
28 changes: 0 additions & 28 deletions
28
packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item-indicator.svelte
This file was deleted.
Oops, something went wrong.
62 changes: 32 additions & 30 deletions
62
packages/bits-ui/src/lib/bits/radio-group/components/radio-group-item.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 |
|---|---|---|
| @@ -1,41 +1,43 @@ | ||
| <script lang="ts"> | ||
| import { melt } from "@melt-ui/svelte"; | ||
| import { setItemCtx } from "../ctx.js"; | ||
| import type { ItemEvents, ItemProps } from "../index.js"; | ||
| import { createDispatcher } from "$lib/internal/events.js"; | ||
| import type { ItemProps } from "../index.js"; | ||
| import { setRadioGroupItemState } from "../radio-group.svelte.js"; | ||
| import { generateId } from "$lib/internal/id.js"; | ||
| import { readonlyBox } from "$lib/internal/box.svelte.js"; | ||
| import { styleToString } from "$lib/internal/style.js"; | ||
| type $$Props = ItemProps; | ||
| type $$Events = ItemEvents; | ||
| let { | ||
| id: idProp = generateId(), | ||
| asChild, | ||
| children, | ||
| child, | ||
| value: valueProp, | ||
| disabled: disabledProp = false, | ||
| onclick: onclickProp = () => {}, | ||
| onkeydown: onkeydownProp = () => {}, | ||
| el = $bindable(), | ||
| style = {}, | ||
| ...restProps | ||
| }: ItemProps = $props(); | ||
| export let value: $$Props["value"]; | ||
| export let disabled: $$Props["disabled"] = false; | ||
| export let asChild: $$Props["asChild"] = false; | ||
| export let el: $$Props["el"] = undefined; | ||
| const value = readonlyBox(() => valueProp); | ||
| const disabled = readonlyBox(() => disabledProp); | ||
| const id = readonlyBox(() => idProp); | ||
| const onclick = readonlyBox(() => onclickProp); | ||
| const onkeydown = readonlyBox(() => onkeydownProp); | ||
| const { | ||
| elements: { item }, | ||
| getAttrs, | ||
| } = setItemCtx(value); | ||
| const item = setRadioGroupItemState({ value, disabled, id, onclick, onkeydown }); | ||
| const dispatch = createDispatcher(); | ||
| const attrs = getAttrs("item"); | ||
| $: builder = $item({ value, disabled }); | ||
| $: Object.assign(builder, attrs); | ||
| const mergedProps = $derived({ | ||
| ...restProps, | ||
| ...item.props, | ||
| style: styleToString(style), | ||
| }); | ||
| </script> | ||
|
|
||
| {#if asChild} | ||
| <slot {builder} /> | ||
| {@render child?.({ props: mergedProps })} | ||
| {:else} | ||
| <button | ||
| bind:this={el} | ||
| use:melt={builder} | ||
| type="button" | ||
| {...$$restProps} | ||
| on:m-click={dispatch} | ||
| on:m-focus={dispatch} | ||
| on:m-keydown={dispatch} | ||
| > | ||
| <slot {builder} /> | ||
| <button bind:this={el} {...mergedProps}> | ||
| {@render children?.()} | ||
| </button> | ||
| {/if} |
86 changes: 43 additions & 43 deletions
86
packages/bits-ui/src/lib/bits/radio-group/components/radio-group.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 |
|---|---|---|
| @@ -1,54 +1,54 @@ | ||
| <script lang="ts"> | ||
| import { melt } from "@melt-ui/svelte"; | ||
| import { setCtx } from "../ctx.js"; | ||
| import type { Props } from "../index.js"; | ||
| import type { RootProps } from "../index.js"; | ||
| import { setRadioGroupRootState } from "../radio-group.svelte.js"; | ||
| import { generateId } from "$lib/internal/id.js"; | ||
| import { box, readonlyBox } from "$lib/internal/box.svelte.js"; | ||
| import { styleToString } from "$lib/internal/style.js"; | ||
| type $$Props = Props; | ||
| export let required: $$Props["required"] = undefined; | ||
| export let disabled: $$Props["disabled"] = undefined; | ||
| export let value: $$Props["value"] = undefined; | ||
| export let onValueChange: $$Props["onValueChange"] = undefined; | ||
| export let loop: $$Props["loop"] = undefined; | ||
| export let orientation: $$Props["orientation"] = undefined; | ||
| export let asChild: $$Props["asChild"] = false; | ||
| export let el: $$Props["el"] = undefined; | ||
| let { | ||
| disabled: disabledProp = false, | ||
| asChild, | ||
| children, | ||
| child, | ||
| style, | ||
| value: valueProp = $bindable(""), | ||
| el = $bindable(), | ||
| orientation: orientationProp = "vertical", | ||
| loop: loopProp = true, | ||
| name: nameProp = undefined, | ||
| required: requiredProp = false, | ||
| id: idProp = generateId(), | ||
| onValueChange, | ||
| ...restProps | ||
| }: RootProps = $props(); | ||
| const { | ||
| elements: { root }, | ||
| states: { value: localValue }, | ||
| updateOption, | ||
| getAttrs, | ||
| } = setCtx({ | ||
| required, | ||
| disabled, | ||
| defaultValue: value, | ||
| loop, | ||
| orientation, | ||
| onValueChange: ({ next }) => { | ||
| if (value !== next) { | ||
| onValueChange?.(next); | ||
| value = next; | ||
| } | ||
| return next; | ||
| }, | ||
| }); | ||
| const attrs = getAttrs("root"); | ||
| const disabled = readonlyBox(() => disabledProp); | ||
| const value = box( | ||
| () => valueProp, | ||
| (v) => { | ||
| valueProp = v; | ||
| onValueChange?.(v); | ||
| } | ||
| ); | ||
| const orientation = readonlyBox(() => orientationProp); | ||
| const loop = readonlyBox(() => loopProp); | ||
| const name = readonlyBox(() => nameProp); | ||
| const required = readonlyBox(() => requiredProp); | ||
| const id = readonlyBox(() => idProp); | ||
| $: value !== undefined && localValue.set(value); | ||
| $: updateOption("required", required); | ||
| $: updateOption("disabled", disabled); | ||
| $: updateOption("loop", loop); | ||
| $: updateOption("orientation", orientation); | ||
| const root = setRadioGroupRootState({ orientation, disabled, loop, name, required, id, value }); | ||
| $: builder = $root; | ||
| $: Object.assign(builder, attrs); | ||
| const mergedProps = $derived({ | ||
| ...restProps, | ||
| ...root.props, | ||
| style: styleToString(style), | ||
| }); | ||
| </script> | ||
|
|
||
| {#if asChild} | ||
| <slot {builder} /> | ||
| {@render child?.({ props: mergedProps })} | ||
| {:else} | ||
| <div bind:this={el} use:melt={builder} {...$$restProps}> | ||
| <slot {builder} /> | ||
| <div bind:this={el} {...mergedProps}> | ||
| {@render children?.()} | ||
| </div> | ||
| {/if} |
Oops, something went wrong.