Merge pull request #11 from huntabyte/onchange/aschild

huntabyte · Aug 10, 2023 · b3b7fc0 · b3b7fc0
2 parents 71f0839 + 850e13a
commit b3b7fc0
Show file tree

Hide file tree

Showing 55 changed files with 328 additions and 87 deletions.
diff --git a/src/lib/internal/types.ts b/src/lib/internal/types.ts
@@ -17,6 +17,8 @@ export type OmitChecked<T> = Omit<T, "checked" | "defaultChecked" | "onCheckedCh
 export type OmitPressed<T> = Omit<T, "pressed" | "defaultPressed" | "onPressedChange">;
 export type OmitForceVisible<T> = Omit<T, "forceVisible">;
 
+export type OnChangeFn<T> = (value: T) => void;
+
 export type Expand<T> = T extends object
 	? T extends infer O
 		? { [K in keyof O]: O[K] }

diff --git a/src/lib/primitives/accordion/components/Accordion.svelte b/src/lib/primitives/accordion/components/Accordion.svelte
@@ -8,6 +8,7 @@
 	export let multiple: $$Props["multiple"] = false;
 	export let disabled: $$Props["disabled"] = false;
 	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
 
 	const {
 		elements: { root },
@@ -19,6 +20,7 @@
 		defaultValue: value,
 		onValueChange: ({ next }) => {
 			value = next;
+			onValueChange?.(next);
 			return next;
 		}
 	});

diff --git a/src/lib/primitives/accordion/types.ts b/src/lib/primitives/accordion/types.ts
@@ -3,7 +3,9 @@ import type {
 	ObjectVariation,
 	Transition,
 	TransitionParams,
-	OmitValue
+	OmitValue,
+	Expand,
+	OnChangeFn
 } from "$internal/index.js";
 import type {
 	CreateAccordionProps,
@@ -12,9 +14,13 @@ import type {
 } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 
-type Props = OmitValue<CreateAccordionProps> & {
-	value?: CreateAccordionProps["defaultValue"] & {};
-} & HTMLDivAttributes;
+type Props = Expand<
+	OmitValue<CreateAccordionProps> & {
+		value?: CreateAccordionProps["defaultValue"] & {};
+		onValueChange?: OnChangeFn<CreateAccordionProps["defaultValue"]>;
+	}
+> &
+	HTMLDivAttributes;
 
 type ItemProps = ObjectVariation<_ItemProps> & HTMLDivAttributes;
 type HeaderProps = ObjectVariation<_HeadingProps> & HTMLDivAttributes;

diff --git a/src/lib/primitives/alert-dialog/components/AlertDialog.svelte b/src/lib/primitives/alert-dialog/components/AlertDialog.svelte
@@ -10,6 +10,7 @@
 	export let portal: $$Props["portal"] = undefined;
 	export let forceVisible: $$Props["forceVisible"] = undefined;
 	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 
 	const {
 		states: { open: localOpen },
@@ -23,6 +24,7 @@
 		defaultOpen: open,
 		onOpenChange: ({ next }) => {
 			open = next;
+			onOpenChange?.(next);
 			return next;
 		}
 	});

diff --git a/src/lib/primitives/alert-dialog/types.ts b/src/lib/primitives/alert-dialog/types.ts
@@ -2,14 +2,16 @@ import type {
 	HTMLDivAttributes,
 	OmitOpen,
 	Expand,
-	HTMLHeadingAttributes
+	HTMLHeadingAttributes,
+	OnChangeFn
 } from "$internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { CreateDialogProps } from "@melt-ui/svelte";
 
 type Props = Expand<
 	OmitOpen<Omit<CreateDialogProps, "role">> & {
 		open?: CreateDialogProps["defaultOpen"] & {};
+		onOpenChange?: OnChangeFn<CreateDialogProps["defaultOpen"]>;
 	}
 >;
 

diff --git a/src/lib/primitives/avatar/components/Avatar.svelte b/src/lib/primitives/avatar/components/Avatar.svelte
@@ -5,6 +5,7 @@
 	type $$Props = Props;
 	export let delayMs: $$Props["delayMs"] = undefined;
 	export let loadingStatus: $$Props["loadingStatus"] = undefined;
+	export let onLoadingStatusChange: $$Props["onLoadingStatusChange"] = undefined;
 
 	const {
 		states: { loadingStatus: localLoadingStatus },
@@ -14,6 +15,7 @@
 		delayMs,
 		onLoadingStatusChange: ({ next }) => {
 			loadingStatus = next;
+			onLoadingStatusChange?.(next);
 			return next;
 		}
 	});

diff --git a/src/lib/primitives/avatar/types.ts b/src/lib/primitives/avatar/types.ts
@@ -1,10 +1,11 @@
-import type { HTMLDivAttributes, HTMLSpanAttributes } from "$internal/index.js";
+import type { Expand, HTMLDivAttributes, HTMLSpanAttributes, OnChangeFn } from "$internal/index.js";
 import type { CreateAvatarProps } from "@melt-ui/svelte";
 import type { HTMLImgAttributes } from "svelte/elements";
 
 type Props = Expand<
 	Omit<CreateAvatarProps, "onLoadingStatusChange" | "loadingStatus" | "src"> & {
 		loadingStatus?: "loading" | "loaded" | "error";
+		onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error">;
 	}
 > &
 	HTMLDivAttributes;

diff --git a/src/lib/primitives/checkbox/components/Checkbox.svelte b/src/lib/primitives/checkbox/components/Checkbox.svelte
@@ -9,6 +9,7 @@
 	export let name: CheckboxProps["name"] = undefined;
 	export let required: CheckboxProps["required"] = undefined;
 	export let value: CheckboxProps["value"] = undefined;
+	export let onCheckedChange: CheckboxProps["onCheckedChange"] = undefined;
 
 	const {
 		elements: { root, input },
@@ -22,6 +23,7 @@
 		value,
 		onCheckedChange: ({ next }) => {
 			checked = next;
+			onCheckedChange?.(next);
 			return next;
 		}
 	});

diff --git a/src/lib/primitives/checkbox/types.ts b/src/lib/primitives/checkbox/types.ts
@@ -1,10 +1,11 @@
-import type { HTMLDivAttributes, OmitChecked } from "$internal/index.js";
+import type { Expand, HTMLDivAttributes, OmitChecked, OnChangeFn } from "$internal/index.js";
 import type { CreateCheckboxProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes, HTMLInputAttributes } from "svelte/elements";
 
 type Props = Expand<
 	OmitChecked<CreateCheckboxProps> & {
 		checked?: CreateCheckboxProps["defaultChecked"] & {};
+		onCheckedChange?: OnChangeFn<CreateCheckboxProps["defaultChecked"]>;
 	}
 > &
 	HTMLButtonAttributes;

diff --git a/src/lib/primitives/collapsible/components/Collapsible.svelte b/src/lib/primitives/collapsible/components/Collapsible.svelte
@@ -7,6 +7,7 @@
 	export let forceVisible: $$Props["forceVisible"] = false;
 	export let disabled: $$Props["disabled"] = undefined;
 	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 
 	const {
 		elements: { root },
@@ -18,6 +19,7 @@
 		defaultOpen: open,
 		onOpenChange: ({ next }) => {
 			open = next;
+			onOpenChange?.(next);
 			return next;
 		}
 	});

diff --git a/src/lib/primitives/collapsible/types.ts b/src/lib/primitives/collapsible/types.ts
@@ -3,14 +3,16 @@ import type {
 	Transition,
 	TransitionParams,
 	OmitOpen,
-	Expand
+	Expand,
+	OnChangeFn
 } from "$internal/index.js";
 import type { CreateCollapsibleProps } from "@melt-ui/svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
 
 type Props = Expand<
 	OmitOpen<CreateCollapsibleProps> & {
 		open?: CreateCollapsibleProps["defaultOpen"] & {};
+		onOpenChange?: OnChangeFn<CreateCollapsibleProps["defaultOpen"]> & {};
 	}
 > &
 	HTMLDivAttributes;

diff --git a/src/lib/primitives/context-menu/components/ContextMenu.svelte b/src/lib/primitives/context-menu/components/ContextMenu.svelte
@@ -8,6 +8,7 @@
 	export let portal: $$Props["portal"] = undefined;
 	export let forceVisible: $$Props["forceVisible"] = undefined;
 	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
 	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let positioning: $$Props["positioning"] = undefined;
@@ -30,6 +31,7 @@
 		dir,
 		onOpenChange: ({ next }) => {
 			open = next;
+			onOpenChange?.(next);
 			return next;
 		}
 	});

diff --git a/src/lib/primitives/context-menu/components/ContextMenuCheckboxItem.svelte b/src/lib/primitives/context-menu/components/ContextMenuCheckboxItem.svelte
@@ -6,7 +6,8 @@
 	type $$Props = CheckboxItemProps;
 	export let checked: $$Props["checked"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
-
+	export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { checkboxItem },
 		states: { checked: localChecked },
@@ -16,6 +17,7 @@
 		defaultChecked: checked,
 		onCheckedChange: ({ next }) => {
 			checked = next;
+			onCheckedChange?.(next);
 			return next;
 		}
 	});
@@ -24,6 +26,10 @@
 	$: updateOption("disabled", disabled);
 </script>
 
-<div use:melt={$checkboxItem} {...$$restProps}>
-	<slot />
-</div>
+{#if asChild}
+	<slot checkboxItem={$checkboxItem} />
+{:else}
+	<div use:melt={$checkboxItem} {...$$restProps}>
+		<slot checkboxItem={$checkboxItem} />
+	</div>
+{/if}
diff --git a/src/lib/primitives/context-menu/components/ContextMenuItem.svelte b/src/lib/primitives/context-menu/components/ContextMenuItem.svelte
@@ -4,11 +4,16 @@
 	import type { ItemProps } from "../types.js";
 
 	type $$Props = ItemProps;
+	export let asChild: $$Props["asChild"] = false;
 	const {
 		elements: { item }
 	} = ctx.get();
 </script>
 
-<div use:melt={$item} {...$$restProps}>
-	<slot />
-</div>
+{#if asChild}
+	<slot item={$item} />
+{:else}
+	<div use:melt={$item} {...$$restProps}>
+		<slot item={$item} />
+	</div>
+{/if}
diff --git a/src/lib/primitives/context-menu/components/ContextMenuRadioGroup.svelte b/src/lib/primitives/context-menu/components/ContextMenuRadioGroup.svelte
@@ -5,6 +5,7 @@
 
 	type $$Props = RadioGroupProps;
 	export let value: $$Props["value"] = undefined;
+	export let onValueChange: $$Props["onValueChange"] = undefined;
 
 	const {
 		elements: { radioGroup },
@@ -14,6 +15,7 @@
 		onValueChange: ({ next }) => {
 			if (next) {
 				value = next;
+				onValueChange?.(next);
 			}
 			return next;
 		}

diff --git a/src/lib/primitives/context-menu/components/ContextMenuRadioItem.svelte b/src/lib/primitives/context-menu/components/ContextMenuRadioItem.svelte
@@ -4,11 +4,16 @@
 	import type { RadioItemProps } from "../types.js";
 
 	type $$Props = RadioItemProps;
-	export let value: RadioItemProps["value"];
-	export let disabled: RadioItemProps["disabled"] = false;
+	export let value: $$Props["value"];
+	export let disabled: $$Props["disabled"] = false;
+	export let asChild: $$Props["asChild"] = false;
 	const radioItem = ctx.getRadioItem(value);
 </script>
 
-<div use:melt={$radioItem({ value, disabled })} {...$$restProps}>
-	<slot />
-</div>
+{#if asChild}
+	<slot radioItem={$radioItem} />
+{:else}
+	<div use:melt={$radioItem({ value, disabled })} {...$$restProps}>
+		<slot radioItem={$radioItem} />
+	</div>
+{/if}
diff --git a/src/lib/primitives/context-menu/types.ts b/src/lib/primitives/context-menu/types.ts
@@ -1,4 +1,11 @@
-import type { HTMLDivAttributes, OmitChecked, OmitOpen, OmitValue } from "$internal/index.js";
+import type {
+	Expand,
+	HTMLDivAttributes,
+	OmitChecked,
+	OmitOpen,
+	OmitValue,
+	OnChangeFn
+} from "$internal/index.js";
 import type {
 	CreateContextMenuProps,
 	CreateContextMenuCheckboxItemProps,
@@ -10,19 +17,30 @@ import type {
 type Props = Expand<
 	OmitOpen<CreateContextMenuProps> & {
 		open?: CreateContextMenuProps["defaultOpen"] & {};
+		onOpenChange?: OnChangeFn<CreateContextMenuProps["defaultOpen"]>;
 	}
 >;
 
 type CheckboxItemProps = Expand<
 	OmitChecked<CreateContextMenuCheckboxItemProps> & {
 		checked?: CreateContextMenuCheckboxItemProps["defaultChecked"] & {};
+		onCheckedChange?: OnChangeFn<CreateContextMenuCheckboxItemProps["defaultChecked"]>;
+		asChild?: boolean;
 	}
 > &
 	HTMLDivAttributes;
 
 type RadioGroupProps = Expand<
 	OmitValue<CreateContextMenuRadioGroupProps> & {
 		value?: CreateContextMenuRadioGroupProps["defaultValue"] & {};
+		onValueChange?: OnChangeFn<CreateContextMenuRadioGroupProps["defaultValue"]>;
+	}
+> &
+	HTMLDivAttributes;
+
+type RadioItemProps = Expand<
+	ContextMenuRadioItemProps & {
+		asChild?: boolean;
 	}
 > &
 	HTMLDivAttributes;
@@ -31,10 +49,11 @@ type ContentProps = {
 	sideOffset?: number;
 } & HTMLDivAttributes;
 type GroupProps = HTMLDivAttributes;
-type ItemProps = HTMLDivAttributes;
+type ItemProps = {
+	asChild?: boolean;
+} & HTMLDivAttributes;
 type CheckboxItemIndicatorProps = HTMLDivAttributes;
 type LabelProps = HTMLDivAttributes;
-type RadioItemProps = ContextMenuRadioItemProps & HTMLDivAttributes;
 type SeparatorProps = HTMLDivAttributes;
 type SubProps = Expand<CreateContextSubmenuProps>;
 type SubContentProps = HTMLDivAttributes;

diff --git a/src/lib/primitives/dialog/components/Dialog.svelte b/src/lib/primitives/dialog/components/Dialog.svelte
@@ -10,6 +10,7 @@
 	export let portal: $$Props["portal"] = undefined;
 	export let forceVisible: $$Props["forceVisible"] = undefined;
 	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 
 	const {
 		states: { open: localOpen },
@@ -23,6 +24,7 @@
 		defaultOpen: open,
 		onOpenChange: ({ next }) => {
 			open = next;
+			onOpenChange?.(next);
 			return next;
 		}
 	});

diff --git a/src/lib/primitives/dialog/types.ts b/src/lib/primitives/dialog/types.ts
@@ -1,11 +1,18 @@
-import type { HTMLDivAttributes, HTMLHeadingAttributes, OmitOpen } from "$internal/index.js";
+import type {
+	Expand,
+	HTMLDivAttributes,
+	HTMLHeadingAttributes,
+	OmitOpen,
+	OnChangeFn
+} from "$internal/index.js";
 import type { HTMLButtonAttributes } from "svelte/elements";
 
 import type { CreateDialogProps } from "@melt-ui/svelte";
 
 type Props = Expand<
 	OmitOpen<Omit<CreateDialogProps, "role">> & {
 		open?: CreateDialogProps["defaultOpen"] & {};
+		onOpenChange?: OnChangeFn<CreateDialogProps["defaultOpen"]>;
 	}
 >;
 

diff --git a/src/lib/primitives/dropdown-menu/components/DropdownMenu.svelte b/src/lib/primitives/dropdown-menu/components/DropdownMenu.svelte
@@ -8,6 +8,7 @@
 	export let portal: $$Props["portal"] = undefined;
 	export let forceVisible: $$Props["forceVisible"] = undefined;
 	export let open: $$Props["open"] = undefined;
+	export let onOpenChange: $$Props["onOpenChange"] = undefined;
 	export let preventScroll: $$Props["preventScroll"] = undefined;
 	export let arrowSize: $$Props["arrowSize"] = undefined;
 	export let positioning: $$Props["positioning"] = undefined;
@@ -30,6 +31,7 @@
 		dir,
 		onOpenChange: ({ next }) => {
 			open = next;
+			onOpenChange?.(next);
 			return next;
 		}
 	});