From 25b1787db9ce1df130307773e14088081eb7ab0c Mon Sep 17 00:00:00 2001 From: Glenn Jacobs Date: Thu, 16 Jul 2026 17:57:15 +0100 Subject: [PATCH 1/2] =?UTF-8?q?fix(panel):=20Toggle=20never=20emitted=20?= =?UTF-8?q?=E2=80=94=20bind=20reka-ui=20v2=20modelValue=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The shared Toggle component was written against radix-vue's old Switch API (:checked / @update:checked); reka-ui v2 renamed these to modelValue / update:modelValue, so clicking the switch never emitted toggle. Channels was the only consumer, making it impossible to set a channel as the default from the create dialog or edit page. Co-Authored-By: Claude Fable 5 --- .../resources/js/components/Toggle.test.ts | 34 +++++++++++++++++++ .../panel/resources/js/components/Toggle.vue | 10 +++--- 2 files changed, 40 insertions(+), 4 deletions(-) create mode 100644 packages/panel/resources/js/components/Toggle.test.ts diff --git a/packages/panel/resources/js/components/Toggle.test.ts b/packages/panel/resources/js/components/Toggle.test.ts new file mode 100644 index 0000000000..6f2bc967af --- /dev/null +++ b/packages/panel/resources/js/components/Toggle.test.ts @@ -0,0 +1,34 @@ +import { describe, expect, it } from 'vitest'; +import { mount } from '@vue/test-utils'; +import Toggle from './Toggle.vue'; + +describe('Toggle', () => { + it('emits toggle when the switch is clicked', async () => { + const wrapper = mount(Toggle, { props: { on: false } }); + + await wrapper.find('button').trigger('click'); + + expect(wrapper.emitted('toggle')).toHaveLength(1); + }); + + it('emits toggle when clicked while on', async () => { + const wrapper = mount(Toggle, { props: { on: true } }); + + await wrapper.find('button').trigger('click'); + + expect(wrapper.emitted('toggle')).toHaveLength(1); + }); + + it('does not emit toggle when disabled', async () => { + const wrapper = mount(Toggle, { props: { on: true, disabled: true } }); + + await wrapper.find('button').trigger('click'); + + expect(wrapper.emitted('toggle')).toBeUndefined(); + }); + + it('reflects the on prop in the switch state', () => { + expect(mount(Toggle, { props: { on: true } }).find('button').attributes('data-state')).toBe('checked'); + expect(mount(Toggle, { props: { on: false } }).find('button').attributes('data-state')).toBe('unchecked'); + }); +}); diff --git a/packages/panel/resources/js/components/Toggle.vue b/packages/panel/resources/js/components/Toggle.vue index c82c229f09..63d89af542 100644 --- a/packages/panel/resources/js/components/Toggle.vue +++ b/packages/panel/resources/js/components/Toggle.vue @@ -1,18 +1,20 @@