Skip to content

Commit

Permalink
next: documentation galore (#677)
Browse files Browse the repository at this point in the history
  • Loading branch information
huntabyte authored Sep 26, 2024
1 parent 1f02d0a commit 00161d1
Show file tree
Hide file tree
Showing 129 changed files with 3,960 additions and 796 deletions.
41 changes: 41 additions & 0 deletions TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,44 @@ These are outstanding tasks that need to be completed or addressed before the pr
- [ ] Determine how we can give users the ability to opt-out of Floating UI styles.
- [ ] Now that `Select` is more similar to a native `<select>` element, we need to come up with a solution/component for `MultiSelect` or just `Select` without the underlying `<select>` element and behavior. I want to have a separate `Listbox` component that doesn't have to be within a "popover-like" component and can just be static on the page, so Listbox isn't a fitting component name.
- [ ] Select deselection of items

## API Reference Audit

- [ ] Accordion
- [ ] AlertDialog
- [ ] AspectRatio
- [ ] Avatar
- [ ] Button
- [ ] Calendar
- [ ] Checkbox
- [ ] Collapsible
- [ ] Combobox
- [ ] Command
- [ ] ContextMenu
- [ ] DateField
- [ ] DatePicker
- [ ] DateRangeField
- [ ] DateRangePicker
- [ ] Dialog
- [ ] DropdownMenu
- [ ] Label
- [ ] LinkPreview
- [ ] Listbox
- [ ] Menubar
- [ ] NavigationMenu
- [ ] Pagination
- [ ] PinInput
- [ ] Popover
- [ ] Progress
- [ ] RadioGroup
- [ ] RangeCalendar
- [ ] ScrollArea
- [ ] Select
- [ ] Separator
- [ ] Slider
- [ ] Switch
- [ ] Tabs
- [ ] Toggle
- [ ] ToggleGroup
- [ ] Toolbar
- [ ] Tooltip
6 changes: 4 additions & 2 deletions packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
Original file line number Diff line number Diff line change
Expand Up @@ -155,12 +155,13 @@ export class AccordionItemState {
useRefById({
id: this.#id,
ref: this.#ref,
condition: () => this.isActive,
});
}

updateValue() {
updateValue = () => {
this.root.toggleItem(this.value.current);
}
};

createTrigger(props: AccordionTriggerStateProps) {
return new AccordionTriggerState(props, this);
Expand All @@ -180,6 +181,7 @@ export class AccordionItemState {
id: this.#id.current,
"data-state": getDataOpenClosed(this.isActive),
"data-disabled": getDataDisabled(this.isDisabled),
"data-orientation": getDataOrientation(this.root.orientation.current),
[ACCORDION_ITEM_ATTR]: "",
}) as const
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<script lang="ts">
import { box } from "svelte-toolbelt";
import type { ActionProps } from "../index.js";
import { mergeProps } from "$lib/internal/mergeProps.js";
import { useId } from "$lib/internal/useId.js";
import { useDialogClose } from "$lib/bits/dialog/dialog.svelte.js";
let {
children,
child,
id = useId(),
ref = $bindable(null),
...restProps
}: ActionProps = $props();
const closeState = useDialogClose({
variant: box.with(() => "action"),
id: box.with(() => id),
ref: box.with(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, closeState.props));
</script>

{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
onEscapeKeydown={(e) => {
onEscapeKeydown(e);
if (e.defaultPrevented) return;
contentState.root.closeDialog();
contentState.root.handleClose();
}}
>
<DismissableLayer
Expand All @@ -75,7 +75,7 @@
onInteractOutside={(e) => {
onInteractOutsideStart(e);
if (e.defaultPrevented) return;
contentState.root.closeDialog();
contentState.root.handleClose();
}}
>
<TextSelectionLayer {...mergedProps} enabled={present.current}>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<script lang="ts">
import { box } from "svelte-toolbelt";
import type { RootProps } from "../index.js";
import { noop } from "$lib/internal/callbacks.js";
import { useDialogRoot } from "$lib/bits/dialog/dialog.svelte.js";
let {
open = $bindable(false),
onOpenChange = noop,
controlledOpen = false,
children,
}: RootProps = $props();
useDialogRoot({
variant: box.with(() => "alert-dialog"),
open: box.with(
() => open,
(v) => {
if (controlledOpen) {
onOpenChange(v);
} else {
open = v;
onOpenChange(v);
}
}
),
});
</script>

{@render children?.()}
4 changes: 2 additions & 2 deletions packages/bits-ui/src/lib/bits/alert-dialog/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export { default as Root } from "$lib/bits/dialog/components/dialog.svelte";
export { default as Root } from "./components/alert-dialog.svelte";
export { default as Title } from "$lib/bits/dialog/components/dialog-title.svelte";
export { default as Action } from "$lib/bits/dialog/components/dialog-close.svelte";
export { default as Action } from "./components/alert-dialog-action.svelte";
export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
export { default as Content } from "./components/alert-dialog-content.svelte";
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<script lang="ts">
import { box } from "svelte-toolbelt";
import type { RootProps } from "../index.js";
import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
import { noop } from "$lib/internal/callbacks.js";
import { useMenuMenu, useMenuRoot } from "$lib/bits/menu/menu.svelte.js";
let {
open = $bindable(false),
dir = "ltr",
onOpenChange = noop,
controlledOpen = false,
children,
}: RootProps = $props();
const root = useMenuRoot({
variant: box.with(() => "context-menu"),
dir: box.with(() => dir),
onClose: () => {
if (controlledOpen) {
onOpenChange(false);
} else {
open = false;
onOpenChange?.(false);
}
},
});
useMenuMenu(root, {
open: box.with(
() => open,
(v) => {
if (controlledOpen) {
onOpenChange(v);
} else {
open = v;
onOpenChange(v);
}
}
),
});
</script>

<FloatingLayer.Root>
{@render children?.()}
</FloatingLayer.Root>
4 changes: 3 additions & 1 deletion packages/bits-ui/src/lib/bits/context-menu/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export { default as Root } from "$lib/bits/menu/components/menu.svelte";
export { default as Root } from "./components/context-menu.svelte";
export { default as Sub } from "$lib/bits/menu/components/menu-sub.svelte";
export { default as Item } from "$lib/bits/menu/components/menu-item.svelte";
export { default as Group } from "$lib/bits/menu/components/menu-group.svelte";
Expand All @@ -11,6 +11,7 @@ export { default as RadioItem } from "$lib/bits/menu/components/menu-radio-item.
export { default as Separator } from "$lib/bits/menu/components/menu-separator.svelte";
export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-group.svelte";
export { default as SubContent } from "$lib/bits/menu/components/menu-sub-content.svelte";
export { default as SubContentStatic } from "$lib/bits/menu/components/menu-sub-content-static.svelte";
export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte";
export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte";
export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
Expand All @@ -26,6 +27,7 @@ export type {
ContextMenuRadioItemProps as RadioItemProps,
ContextMenuSeparatorProps as SeparatorProps,
ContextMenuSubContentProps as SubContentProps,
ContextMenuSubContentStaticProps as SubContentStaticProps,
ContextMenuSubProps as SubProps,
ContextMenuSubTriggerProps as SubTriggerProps,
ContextMenuContentProps as ContentProps,
Expand Down
2 changes: 2 additions & 0 deletions packages/bits-ui/src/lib/bits/context-menu/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export type {
RadioItemProps as ContextMenuRadioItemProps,
SeparatorProps as ContextMenuSeparatorProps,
SubContentProps as ContextMenuSubContentProps,
SubContentStaticProps as ContextMenuSubContentStaticProps,
SubProps as ContextMenuSubProps,
SubTriggerProps as ContextMenuSubTriggerProps,
PortalProps as ContextMenuPortalProps,
Expand All @@ -54,5 +55,6 @@ export type {
MenuSubPropsWithoutHTML as ContextMenuSubPropsWithoutHTML,
MenuSubTriggerPropsWithoutHTML as ContextMenuSubTriggerPropsWithoutHTML,
MenuSubContentPropsWithoutHTML as ContextMenuSubContentPropsWithoutHTML,
MenuSubContentStaticPropsWithoutHTML as ContextMenuSubContentStaticPropsWithoutHTML,
MenuPortalPropsWithoutHTML as ContextMenuPortalPropsWithoutHTML,
} from "$lib/bits/menu/types.js";
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
}: CloseProps = $props();
const closeState = useDialogClose({
variant: box.with(() => "close"),
id: box.with(() => id),
ref: box.with(
() => ref,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
onEscapeKeydown={(e) => {
onEscapeKeydown(e);
if (e.defaultPrevented) return;
contentState.root.closeDialog();
contentState.root.handleClose();
}}
>
<DismissableLayer
Expand All @@ -66,7 +66,7 @@
onInteractOutside={(e) => {
onInteractOutside(e);
if (e.defaultPrevented) return;
contentState.root.closeDialog();
contentState.root.handleClose();
}}
>
<TextSelectionLayer {...mergedProps} enabled={present.current}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
}: RootProps = $props();
useDialogRoot({
variant: box.with(() => "dialog"),
open: box.with(
() => open,
(v) => {
Expand Down
Loading

0 comments on commit 00161d1

Please sign in to comment.