From 5a07fa3d603a41353d46c8d23c85a2e1bc5843e1 Mon Sep 17 00:00:00 2001
From: KoloMl <thekolomoets@hotmail.com>
Date: Mon, 17 Feb 2025 04:51:15 +0400
Subject: [PATCH] Refactored menu & menu items

Once again, breaking change for a lot of components, would be tackled separately
---
 src/components/ui/menu/Menu.svelte            |  4 +-
 .../ui/menu/MenuCheckboxItem.svelte           | 38 +++++++++----------
 src/components/ui/menu/MenuRadioItem.svelte   | 34 ++++++++---------
 3 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/src/components/ui/menu/Menu.svelte b/src/components/ui/menu/Menu.svelte
index 0889cc2..ffd3ab5 100644
--- a/src/components/ui/menu/Menu.svelte
+++ b/src/components/ui/menu/Menu.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  interface Props {
+  interface MenuProps {
     children?: import('svelte').Snippet;
   }
 
-  let { children }: Props = $props();
+  let { children }: MenuProps = $props();
 </script>
 
 <nav>
diff --git a/src/components/ui/menu/MenuCheckboxItem.svelte b/src/components/ui/menu/MenuCheckboxItem.svelte
index 278779d..3bae07b 100644
--- a/src/components/ui/menu/MenuCheckboxItem.svelte
+++ b/src/components/ui/menu/MenuCheckboxItem.svelte
@@ -1,33 +1,31 @@
-<script>
-  import { createBubbler, stopPropagation } from 'svelte/legacy';
+<script lang="ts">
   import MenuLink from "$components/ui/menu/MenuItem.svelte";
+  import type { Snippet } from "svelte";
+  import type { FormEventHandler, MouseEventHandler } from "svelte/elements";
 
-  const bubble = createBubbler();
+  interface MenuCheckboxItemProps {
+    checked: boolean;
+    name?: string;
+    value?: string;
+    href?: string;
+    children?: Snippet;
+    onclick?: MouseEventHandler<HTMLInputElement>;
+    oninput?: FormEventHandler<HTMLInputElement>;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} checked
-   * @property {string|undefined} [name]
-   * @property {string|undefined} [value]
-   * @property {string|null} [href]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
   let {
     checked = $bindable(),
     name = undefined,
     value = undefined,
-    href = null,
-    children
-  } = $props();
+    href = undefined,
+    children,
+    onclick,
+    oninput,
+  }: MenuCheckboxItemProps = $props();
 </script>
 
 <MenuLink {href}>
-  <input bind:checked={checked} {name} onclick={stopPropagation(bubble('click'))} oninput={bubble('input')}
-         type="checkbox"
-         {value}>
+  <input bind:checked={checked} {name} {onclick} {oninput} type="checkbox" {value}>
   {@render children?.()}
 </MenuLink>
 
diff --git a/src/components/ui/menu/MenuRadioItem.svelte b/src/components/ui/menu/MenuRadioItem.svelte
index f76c0e3..ba8860e 100644
--- a/src/components/ui/menu/MenuRadioItem.svelte
+++ b/src/components/ui/menu/MenuRadioItem.svelte
@@ -1,31 +1,31 @@
-<script>
-  import { createBubbler, stopPropagation } from 'svelte/legacy';
+<script lang="ts">
   import MenuLink from "$components/ui/menu/MenuItem.svelte";
+  import type { Snippet } from "svelte";
+  import type { FormEventHandler, MouseEventHandler } from "svelte/elements";
 
-  const bubble = createBubbler();
+  interface MenuRadioItemProps {
+    checked: boolean;
+    name: string;
+    value: string;
+    href?: string | null;
+    children?: Snippet;
+    onclick?: MouseEventHandler<HTMLInputElement>;
+    oninput?: FormEventHandler<HTMLInputElement>;
+  }
 
-
-  /**
-   * @typedef {Object} Props
-   * @property {boolean} checked
-   * @property {string} name
-   * @property {string} value
-   * @property {string|null} [href]
-   * @property {import('svelte').Snippet} [children]
-   */
-
-  /** @type {Props} */
   let {
     checked,
     name,
     value,
     href = null,
-    children
-  } = $props();
+    children,
+    onclick,
+    oninput,
+  }: MenuRadioItemProps = $props();
 </script>
 
 <MenuLink {href}>
-  <input {checked} {name} onclick={stopPropagation(bubble('click'))} oninput={bubble('input')} type="radio" {value}>
+  <input {checked} {name} {onclick} {oninput} type="radio" {value}>
   {@render children?.()}
 </MenuLink>