From f9d688960d169f329391ca2f09f729830b28df74 Mon Sep 17 00:00:00 2001
From: Wout De Puysseleir <woutdp@gmail.com>
Date: Sat, 19 Oct 2024 16:22:57 -0700
Subject: [PATCH] Add composition example

---
 .../assets/svelte/CompositionParent.svelte      | 17 +++++++++++++++++
 example_project/assets/svelte/TextInput.svelte  | 17 +++++++++++++++++
 .../lib/example_web/live/live_composition.ex    | 14 ++++++++++++++
 example_project/lib/example_web/router.ex       |  1 +
 4 files changed, 49 insertions(+)
 create mode 100644 example_project/assets/svelte/CompositionParent.svelte
 create mode 100644 example_project/assets/svelte/TextInput.svelte
 create mode 100644 example_project/lib/example_web/live/live_composition.ex

diff --git a/example_project/assets/svelte/CompositionParent.svelte b/example_project/assets/svelte/CompositionParent.svelte
new file mode 100644
index 0000000..35ce7e6
--- /dev/null
+++ b/example_project/assets/svelte/CompositionParent.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    import TextInput from "./TextInput.svelte";
+    
+    export let live;
+
+    let textInput = "Content";
+
+    function handleForm() {
+        live.pushEvent("validate-item", { name: textInput });
+    }
+</script>
+
+<form on:submit|preventDefault={handleForm}>
+    <TextInput value={textInput} name="element" id="123456" />
+    <button type="submit">Submit</button>
+</form>
+
diff --git a/example_project/assets/svelte/TextInput.svelte b/example_project/assets/svelte/TextInput.svelte
new file mode 100644
index 0000000..92bad39
--- /dev/null
+++ b/example_project/assets/svelte/TextInput.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+    export let value: string;
+    export let name: string;
+    export let id: string;
+</script>
+
+<div>
+    <input
+        type="text"
+        {name}
+        {id}
+        bind:value
+        class="mt-2 block w-full rounded-lg text-zinc-900 focus:ring-2
+        sm:text-sm sm:leading-6 dark:bg-zinc-700 dark:text-zinc-100
+        inlinedark:placeholder-zinc-300"
+    />
+</div>
diff --git a/example_project/lib/example_web/live/live_composition.ex b/example_project/lib/example_web/live/live_composition.ex
new file mode 100644
index 0000000..f429135
--- /dev/null
+++ b/example_project/lib/example_web/live/live_composition.ex
@@ -0,0 +1,14 @@
+defmodule ExampleWeb.LiveComposition do
+  use ExampleWeb, :live_view
+
+  def render(assigns) do
+    ~H"""
+    <.svelte name="CompositionParent" socket={@socket} />
+    """
+  end
+
+  def handle_event("validate-item", %{"name" => name}, socket) do
+    IO.puts(name)
+    {:noreply, socket}
+  end
+end
diff --git a/example_project/lib/example_web/router.ex b/example_project/lib/example_web/router.ex
index 7ff4cee..8a3df1a 100644
--- a/example_project/lib/example_web/router.ex
+++ b/example_project/lib/example_web/router.ex
@@ -33,6 +33,7 @@ defmodule ExampleWeb.Router do
     live "/svelvet", LiveSvelvet
     live "/live-json", LiveJson
     live "/slots-experiment", LiveSlotsExperiment
+    live "/composition", LiveComposition
   end
 
   # Other scopes may use custom stacks.