From e3bff262b45da24fed8d9429b9fac80bf8441d49 Mon Sep 17 00:00:00 2001 From: longph Date: Fri, 20 Dec 2024 01:07:40 +0200 Subject: [PATCH] Call custom event handlers --- .changeset/dirty-fans-tap.md | 5 +++++ .../src/lib/components/Accordion/Accordion.svelte | 1 + .../src/lib/components/Combobox/Combobox.svelte | 9 ++++++--- .../src/lib/components/Pagination/Pagination.svelte | 2 ++ .../src/lib/components/Popover/Popover.svelte | 1 + .../src/lib/components/Rating/Rating.svelte | 5 +---- .../skeleton-svelte/src/lib/components/Rating/types.ts | 6 +----- .../src/lib/components/Segment/Segment.svelte | 1 + .../skeleton-svelte/src/lib/components/Segment/types.ts | 2 +- .../src/lib/components/Slider/Slider.svelte | 1 + .../skeleton-svelte/src/lib/components/Tabs/Tabs.svelte | 1 + .../skeleton-svelte/src/lib/components/Tabs/types.ts | 2 +- .../src/lib/components/TagsInput/TagsInput.svelte | 1 + .../src/lib/components/Tooltip/Tooltip.svelte | 1 + 14 files changed, 24 insertions(+), 14 deletions(-) create mode 100644 .changeset/dirty-fans-tap.md diff --git a/.changeset/dirty-fans-tap.md b/.changeset/dirty-fans-tap.md new file mode 100644 index 000000000..f7b6261eb --- /dev/null +++ b/.changeset/dirty-fans-tap.md @@ -0,0 +1,5 @@ +--- +'@skeletonlabs/skeleton-svelte': patch +--- + +bugfix: Call custom event handlers provided in ZagJs's internal handlers diff --git a/packages/skeleton-svelte/src/lib/components/Accordion/Accordion.svelte b/packages/skeleton-svelte/src/lib/components/Accordion/Accordion.svelte index 3085f9a64..04f0cb456 100644 --- a/packages/skeleton-svelte/src/lib/components/Accordion/Accordion.svelte +++ b/packages/skeleton-svelte/src/lib/components/Accordion/Accordion.svelte @@ -28,6 +28,7 @@ accordion.machine({ id: useId(), onValueChange(details) { + zagProps.onValueChange?.(details); value = details.value; } }), diff --git a/packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte b/packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte index 6aea8ddaf..e381f54a5 100644 --- a/packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte +++ b/packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte @@ -60,16 +60,19 @@ collection, value: $state.snapshot(value), loopFocus: true, - onOpenChange() { + onOpenChange(details) { + zagProps.onOpenChange?.(details); options = data; }, - onInputValueChange({ inputValue }) { - const filtered = data.filter((item) => item.label.toLowerCase().includes(inputValue.toLowerCase())); + onInputValueChange(details) { + zagProps.onInputValueChange?.(details); + const filtered = data.filter((item) => item.label.toLowerCase().includes(details.inputValue.toLowerCase())); const newOptions = filtered.length > 0 ? filtered : data; collection.setItems(newOptions); options = newOptions; }, onValueChange(event) { + zagProps.onValueChange?.(event); value = event.value; } }), diff --git a/packages/skeleton-svelte/src/lib/components/Pagination/Pagination.svelte b/packages/skeleton-svelte/src/lib/components/Pagination/Pagination.svelte index cfc1cd8a7..4bfada0bc 100644 --- a/packages/skeleton-svelte/src/lib/components/Pagination/Pagination.svelte +++ b/packages/skeleton-svelte/src/lib/components/Pagination/Pagination.svelte @@ -48,9 +48,11 @@ id: useId(), count: data.length, onPageChange(details) { + zagProps.onPageChange?.(details); page = details.page; }, onPageSizeChange(details) { + zagProps.onPageSizeChange?.(details); pageSize = details.pageSize; } }), diff --git a/packages/skeleton-svelte/src/lib/components/Popover/Popover.svelte b/packages/skeleton-svelte/src/lib/components/Popover/Popover.svelte index ab116ef58..45f23a730 100644 --- a/packages/skeleton-svelte/src/lib/components/Popover/Popover.svelte +++ b/packages/skeleton-svelte/src/lib/components/Popover/Popover.svelte @@ -43,6 +43,7 @@ id: useId(), open, onOpenChange(details) { + zagProps.onOpenChange?.(details); open = details.open; } }), diff --git a/packages/skeleton-svelte/src/lib/components/Rating/Rating.svelte b/packages/skeleton-svelte/src/lib/components/Rating/Rating.svelte index b8c0bc9c4..0fcc16c6e 100644 --- a/packages/skeleton-svelte/src/lib/components/Rating/Rating.svelte +++ b/packages/skeleton-svelte/src/lib/components/Rating/Rating.svelte @@ -4,7 +4,6 @@ import { useId } from '$lib/internal/use-id.js'; import { starEmpty, starHalf, starFull } from '$lib/internal/snippets.js'; import type { RatingProps } from './types.js'; - import { noop } from '$lib/internal/noop.js'; // Props let { @@ -32,8 +31,6 @@ iconFull = starFull, // Children label, - // Events - onValueChange = noop, // Zag ...zagProps }: RatingProps = $props(); @@ -43,8 +40,8 @@ rating.machine({ id: useId(), onValueChange: (details) => { + zagProps.onValueChange?.(details); value = details.value; - onValueChange(details.value); } }), { diff --git a/packages/skeleton-svelte/src/lib/components/Rating/types.ts b/packages/skeleton-svelte/src/lib/components/Rating/types.ts index 4b210102c..b2f7e2834 100644 --- a/packages/skeleton-svelte/src/lib/components/Rating/types.ts +++ b/packages/skeleton-svelte/src/lib/components/Rating/types.ts @@ -1,7 +1,7 @@ import * as rating from '@zag-js/rating-group'; import type { Snippet } from 'svelte'; -export interface RatingProps extends Omit { +export interface RatingProps extends Omit { // Root --- /** Set root base classes */ base?: string; @@ -47,8 +47,4 @@ export interface RatingProps extends Omit void; } diff --git a/packages/skeleton-svelte/src/lib/components/Segment/Segment.svelte b/packages/skeleton-svelte/src/lib/components/Segment/Segment.svelte index 58b1e063a..fd511d79b 100644 --- a/packages/skeleton-svelte/src/lib/components/Segment/Segment.svelte +++ b/packages/skeleton-svelte/src/lib/components/Segment/Segment.svelte @@ -43,6 +43,7 @@ radio.machine({ id: useId(), onValueChange(details) { + zagProps.onValueChange?.(details); value = details.value; }, orientation diff --git a/packages/skeleton-svelte/src/lib/components/Segment/types.ts b/packages/skeleton-svelte/src/lib/components/Segment/types.ts index f62c12a04..bf27fb65b 100644 --- a/packages/skeleton-svelte/src/lib/components/Segment/types.ts +++ b/packages/skeleton-svelte/src/lib/components/Segment/types.ts @@ -10,7 +10,7 @@ export interface SegmentContext { // Components --- -export interface SegmentProps extends Omit { +export interface SegmentProps extends Omit { /** Set the active value. */ value?: string; /** Set the orientation. */ diff --git a/packages/skeleton-svelte/src/lib/components/Slider/Slider.svelte b/packages/skeleton-svelte/src/lib/components/Slider/Slider.svelte index a5dff9ce8..98ee63bc6 100644 --- a/packages/skeleton-svelte/src/lib/components/Slider/Slider.svelte +++ b/packages/skeleton-svelte/src/lib/components/Slider/Slider.svelte @@ -57,6 +57,7 @@ slider.machine({ id: useId(), onValueChange(details) { + zagProps.onValueChange?.(details); value = details.value; } }), diff --git a/packages/skeleton-svelte/src/lib/components/Tabs/Tabs.svelte b/packages/skeleton-svelte/src/lib/components/Tabs/Tabs.svelte index 57391aacf..ac4fa7876 100644 --- a/packages/skeleton-svelte/src/lib/components/Tabs/Tabs.svelte +++ b/packages/skeleton-svelte/src/lib/components/Tabs/Tabs.svelte @@ -33,6 +33,7 @@ tabs.machine({ id: useId(), onValueChange(details) { + zagProps.onValueChange?.(details); value = details.value; } }), diff --git a/packages/skeleton-svelte/src/lib/components/Tabs/types.ts b/packages/skeleton-svelte/src/lib/components/Tabs/types.ts index 1e2bb9824..6f720c226 100644 --- a/packages/skeleton-svelte/src/lib/components/Tabs/types.ts +++ b/packages/skeleton-svelte/src/lib/components/Tabs/types.ts @@ -10,7 +10,7 @@ export interface TabsContextState { // Components --- -export interface TabsProps extends Omit { +export interface TabsProps extends Omit { /** Set the active value. */ value?: string; /** Set tabs to stretch to fill the available width. */ diff --git a/packages/skeleton-svelte/src/lib/components/TagsInput/TagsInput.svelte b/packages/skeleton-svelte/src/lib/components/TagsInput/TagsInput.svelte index 98db790ee..dae57ae58 100644 --- a/packages/skeleton-svelte/src/lib/components/TagsInput/TagsInput.svelte +++ b/packages/skeleton-svelte/src/lib/components/TagsInput/TagsInput.svelte @@ -43,6 +43,7 @@ tagsInput.machine({ id: useId(), onValueChange: (details) => { + zagProps.onValueChange?.(details); value = details.value; } }), diff --git a/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte b/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte index f7da5a24b..b1109c893 100644 --- a/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte +++ b/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte @@ -39,6 +39,7 @@ id: useId(), open, onOpenChange(details) { + zagProps.onOpenChange?.(details); open = details.open; } }),