Skip to content

Commit

Permalink
Merge pull request #16 from huntabyte/forward-more-events
Browse files Browse the repository at this point in the history
  • Loading branch information
huntabyte authored Aug 12, 2023
2 parents f28b251 + 1506d81 commit d4a2164
Show file tree
Hide file tree
Showing 107 changed files with 1,168 additions and 474 deletions.
7 changes: 7 additions & 0 deletions .changeset/blue-yaks-join.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@huntabyte/primitives": patch
---

- Add types to component events
- Forward component events
- Add transition options
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,11 @@
"types": "./dist/index.d.ts",
"type": "module",
"dependencies": {
"@melt-ui/svelte": "0.34.3",
"@melt-ui/svelte": "0.34.5",
"nanoid": "^4.0.2"
},
"peerDependencies": {
"svelte": "^4.0.0"
},
"packageManager": "pnpm@8.6.3"
}
}
14 changes: 7 additions & 7 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions src/lib/internal/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,8 @@ export type Builder = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
action: Action<HTMLElement, any, any>;
};

export type KeydownClickEvents = {
click: MouseEvent;
keydown: KeyboardEvent;
};
2 changes: 1 addition & 1 deletion src/lib/primitives/accordion/components/Accordion.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
disabled,
defaultValue: value,
onValueChange: ({ next }) => {
value = next;
onValueChange?.(next);
value = next;
return next;
}
});
Expand Down
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<script lang="ts">
import { melt } from "@melt-ui/svelte";
import { ctx } from "../ctx.js";
import type { TriggerProps } from "../types.js";
import type { TriggerEvents, TriggerProps } from "../types.js";
type $$Props = TriggerProps;
type $$Events = TriggerEvents;
const { trigger, props } = ctx.getTrigger();
</script>

<button use:melt={$trigger(props)} {...$$restProps} on:m-click on:m-keydown>
<button use:melt={$trigger(props)} {...$$restProps} on:click on:keydown on:m-keydown on:m-click>
<slot />
</button>
14 changes: 11 additions & 3 deletions src/lib/primitives/accordion/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ import type {
TransitionParams,
OmitValue,
Expand,
OnChangeFn
OnChangeFn,
KeydownClickEvents
} from "$internal/index.js";
import type {
CreateAccordionProps,
AccordionItemProps as _ItemProps,
AccordionHeadingProps as _HeadingProps
AccordionHeadingProps as _HeadingProps,
AccordionComponentEvents
} from "@melt-ui/svelte";
import type { HTMLButtonAttributes } from "svelte/elements";

Expand All @@ -31,6 +33,8 @@ type ContentProps<T extends Transition = Transition> = {
transitionConfig?: TransitionParams<T>;
} & HTMLDivAttributes;

type TriggerEvents = AccordionComponentEvents["trigger"] & KeydownClickEvents;

export type {
Props,
ItemProps,
Expand All @@ -42,5 +46,9 @@ export type {
ItemProps as AccordionItemProps,
HeaderProps as AccordionHeaderProps,
TriggerProps as AccordionTriggerProps,
ContentProps as AccordionContentProps
ContentProps as AccordionContentProps,
//
TriggerEvents,
//
TriggerEvents as AccordionTriggerEvents
};
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<script lang="ts">
import { melt } from "@melt-ui/svelte";
import { ctx } from "../ctx.js";
import type { ActionProps } from "../types.js";
import type { ActionEvents, ActionProps } from "../types.js";
type $$Props = ActionProps;
type $$Events = ActionEvents;
export let asChild = false;
const action = ctx.getClose();
</script>

{#if asChild}
<slot action={$action} />
{:else}
<button use:melt={$action} {...$$restProps}>
<button use:melt={$action} {...$$restProps} on:click on:keydown on:m-click on:m-keydown>
<slot />
</button>
{/if}
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<script lang="ts">
import { melt } from "@melt-ui/svelte";
import { ctx } from "../ctx.js";
import type { CancelProps } from "../types.js";
import type { CancelEvents, CancelProps } from "../types.js";
type $$Props = CancelProps;
type $$Events = CancelEvents;
export let asChild = false;
const cancel = ctx.getClose();
</script>

{#if asChild}
<slot cancel={$cancel} />
{:else}
<button use:melt={$cancel} on:m-click on:m-keydown {...$$restProps}>
<button use:melt={$cancel} on:click on:keydown on:m-click on:m-keydown {...$$restProps}>
<slot cancel={$cancel} />
</button>
{/if}
Original file line number Diff line number Diff line change
@@ -1,12 +1,24 @@
<script lang="ts">
import { melt } from "@melt-ui/svelte";
import type { Transition } from "$internal/index.js";
import { ctx } from "../ctx.js";
import type { ContentProps } from "../types.js";
type $$Props = ContentProps;
type T = $$Generic<Transition>;
type $$Props = ContentProps<T>;
export let transition: ContentProps<T>["transition"] = undefined;
export let transitionConfig: ContentProps<T>["transitionConfig"] = undefined;
const content = ctx.getContent();
</script>

<div use:melt={$content} {...$$restProps}>
<slot />
</div>
{#if transition}
<div use:melt={$content} {...$$restProps} transition:transition={transitionConfig}>
<slot />
</div>
{:else}
<div use:melt={$content} {...$$restProps}>
<slot />
</div>
{/if}
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
<script lang="ts">
import { melt } from "@melt-ui/svelte";
import { ctx } from "../ctx.js";
import type { TriggerProps } from "../types.js";
import type { TriggerEvents, TriggerProps } from "../types.js";
type $$Props = TriggerProps;
type $$Events = TriggerEvents;
export let asChild = false;
const trigger = ctx.getTrigger();
</script>

{#if asChild}
<slot trigger={$trigger} />
{:else}
<button use:melt={$trigger} {...$$restProps}>
<button use:melt={$trigger} on:click on:keydown on:m-click on:m-keydown {...$$restProps}>
<slot trigger={$trigger} />
</button>
{/if}
3 changes: 2 additions & 1 deletion src/lib/primitives/alert-dialog/ctx.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ const NAME = "AlertDialog";
function set(props: CreateAlertDialogProps) {
const alertDialog = createDialog({
...removeUndefined(props),
role: "alertdialog"
role: "alertdialog",
forceVisible: true
});
setContext(NAME, alertDialog);
return {
Expand Down
26 changes: 22 additions & 4 deletions src/lib/primitives/alert-dialog/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,13 @@ import type {
OmitOpen,
Expand,
HTMLHeadingAttributes,
OnChangeFn
OnChangeFn,
KeydownClickEvents,
Transition,
TransitionParams
} from "$internal/index.js";
import type { HTMLButtonAttributes } from "svelte/elements";
import type { CreateDialogProps } from "@melt-ui/svelte";
import type { CreateDialogProps, DialogComponentEvents } from "@melt-ui/svelte";

type Props = Expand<
OmitOpen<Omit<CreateDialogProps, "role">> & {
Expand All @@ -21,14 +24,21 @@ type TriggerProps = HTMLButtonAttributes & {

type ActionProps = TriggerProps;
type CancelProps = TriggerProps;
type ContentProps = HTMLDivAttributes;
type ContentProps<T extends Transition = Transition> = HTMLDivAttributes & {
transition?: T;
transitionConfig?: TransitionParams<T>;
};
type DescriptionProps = HTMLDivAttributes;
type OverlayProps = HTMLDivAttributes;
type PortalProps = HTMLDivAttributes;
type TitleProps = {
level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
} & HTMLHeadingAttributes;

type TriggerEvents = DialogComponentEvents["trigger"] & KeydownClickEvents;
type CancelEvents = DialogComponentEvents["close"] & KeydownClickEvents;
type ActionEvents = CancelEvents;

export type {
Props,
TriggerProps,
Expand All @@ -48,5 +58,13 @@ export type {
DescriptionProps as AlertDialogDescriptionProps,
OverlayProps as AlertDialogOverlayProps,
PortalProps as AlertDialogPortalProps,
TitleProps as AlertDialogTitleProps
TitleProps as AlertDialogTitleProps,
//
TriggerEvents,
CancelEvents,
ActionEvents,
//
TriggerEvents as AlertDialogTriggerEvents,
CancelEvents as AlertDialogCancelEvents,
ActionEvents as AlertDialogActionEvents
};
3 changes: 2 additions & 1 deletion src/lib/primitives/button/components/Button.svelte
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
<script lang="ts">
import { builderActions, getAttrs } from "$internal/index.js";
import type { Props } from "../types.js";
import type { Props, Events } from "../types.js";
type $$Props = Props;
type $$Events = Events;
export let href: $$Props["href"] = undefined;
export let type: $$Props["type"] = undefined;
export let builders: $$Props["builders"] = [];
Expand Down
18 changes: 17 additions & 1 deletion src/lib/primitives/button/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,21 @@ interface ButtonElement extends Builders, HTMLButtonAttributes {
}

type Props = AnchorElement | ButtonElement;
type Events = {
click: MouseEvent;
change: Event;
keydown: KeyboardEvent;
keyup: KeyboardEvent;
mouseenter: MouseEvent;
mouseleave: MouseEvent;
};

export type { Props, Props as ButtonProps };
export type {
Props,
//
Props as ButtonProps,
//
Events,
//
Events as ButtonEvents
};
21 changes: 11 additions & 10 deletions src/lib/primitives/checkbox/components/Checkbox.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<script lang="ts">
import { melt } from "@melt-ui/svelte";
import { ctx } from "../ctx.js";
import type { CheckboxProps } from "../types.js";
import type { Props, Events } from "../types.js";
type $$Props = CheckboxProps;
export let checked: CheckboxProps["checked"] = undefined;
export let disabled: CheckboxProps["disabled"] = undefined;
export let name: CheckboxProps["name"] = undefined;
export let required: CheckboxProps["required"] = undefined;
export let value: CheckboxProps["value"] = undefined;
export let onCheckedChange: CheckboxProps["onCheckedChange"] = undefined;
type $$Props = Props;
type $$Events = Events;
export let checked: $$Props["checked"] = undefined;
export let disabled: $$Props["disabled"] = undefined;
export let name: $$Props["name"] = undefined;
export let required: $$Props["required"] = undefined;
export let value: $$Props["value"] = undefined;
export let onCheckedChange: $$Props["onCheckedChange"] = undefined;
const {
elements: { root, input },
Expand All @@ -22,8 +23,8 @@
required,
value,
onCheckedChange: ({ next }) => {
checked = next;
onCheckedChange?.(next);
checked = next;
return next;
}
});
Expand All @@ -36,7 +37,7 @@
$: updateOption("value", value);
</script>

<button use:melt={$root} {...$$restProps}>
<button use:melt={$root} {...$$restProps} on:click on:keydown on:m-click on:m-keydown>
<slot />
<input use:melt={$input} />
</button>
Loading

0 comments on commit d4a2164

Please sign in to comment.