Add onDelete modifier

Sources/LiveViewNative/Stylesheets/Modifiers/DynamicViewContent/OnDeleteModifier.swift

@@ -0,0 +1,55 @@
+//
+//  OnDeleteModifier.swift
+//
+//
+//  Created by Carson Katri on 10/2/24.
+//
+
+import SwiftUI
+import LiveViewNativeStylesheet
+
+/// See [`SwiftUI.DynamicViewContent/onDelete(perform:)`](https://developer.apple.com/documentation/swiftui/dynamicviewcontent/onDelete(perform:)) for more details on this ViewModifier.
+///
+/// ### onDelete(perform:)
+/// - `action`: ``SwiftUI/Image/TemplateRenderingMode`` or `nil` (required)
+///
+/// See [`SwiftUI.DynamicViewContent/onDelete(perform:)`](https://developer.apple.com/documentation/swiftui/dynamicviewcontent/onDelete(perform:)) for more details on this ViewModifier.
+///
+/// Example:
+///
+/// ```html
+/// <List style='onDelete(perform: event("delete"))'>
+///   ...
+/// </List>
+/// ```
+@_documentation(visibility: public)
+@ParseableExpression
+struct _OnDeleteModifier: ViewModifier {
+    static let name = "onDelete"
+
+    @ObservedElement private var element
+    @Event private var action: Event.EventHandler
+
+    init(perform action: Event) {
+        self._action = action
+    }
+
+    func body(content: Content) -> some View {
+        content.environment(\.onDeleteAction, { indices in
+            var meta = element.buildPhxValuePayload()
+            meta["index_set"] = Array(indices)
+            action(value: meta) {}
+        })
+    }
+}
+
+extension EnvironmentValues {
+    private enum OnDeleteActionKey: EnvironmentKey {
+        static let defaultValue: ((IndexSet) -> ())? = nil
+    }
+
+    var onDeleteAction: ((IndexSet) -> ())? {
+        get { self[OnDeleteActionKey.self] }
+        set { self[OnDeleteActionKey.self] = newValue }
+    }
+}

Sources/LiveViewNative/Views/Layout Containers/Collection Containers/List.swift

@@ -92,25 +92,10 @@ struct List<Root: RootRegistry>: View {
     @Environment(\.editMode) var editMode
     #endif
 
-    /// Event sent when a row is deleted.
-    ///
-    /// An event is sent with the `index` of the item to delete.
-    ///
-    /// ```html
-    /// <List phx-delete="on_delete">
-    ///     ...
-    /// </List>
-    /// ```
-    ///
-    /// ```elixir
-    /// defmodule MyAppWeb.SportsLive do
-    ///     def handle_event("on_delete", %{ "index" => index }, socket) do
-    ///         {:noreply, assign(socket, :items, List.delete_at(socket.assigns.items, index))}
-    ///     end
-    /// end
-    /// ```
-    @_documentation(visibility: public)
-    @Event("phx-delete", type: "click") private var delete
+    @LiveElementIgnored
+    @Environment(\.onDeleteAction)
+    private var onDeleteAction: ((IndexSet) -> Void)?
+
     /// Event sent when a row is moved.
     ///
     /// An event is sent with the `index` of the item to move and its `destination` index.
@@ -245,20 +230,10 @@ struct List<Root: RootRegistry>: View {
                     .trackListItemScrollOffset(id: childNode.id)
             }
         }
-            .onDelete(perform: onDeleteHandler)
+            .onDelete(perform: onDeleteAction)
             .onMove(perform: onMoveHandler)
     }
 
-    private var onDeleteHandler: ((IndexSet) -> Void)? {
-        guard delete.event != nil else { return nil }
-        return { indices in
-            var meta = $liveElement.element.buildPhxValuePayload()
-            // todo: what about multiple indicies?
-            meta["index"] = indices.first!
-            delete(value: meta) {}
-        }
-    }
-
     private var onMoveHandler: ((IndexSet, Int) -> Void)? {
         guard move.event != nil else { return nil }
         return { indices, index in

Sources/LiveViewNative/Views/Layout Containers/Collection Containers/Section.swift

@@ -59,6 +59,10 @@ struct Section<Root: RootRegistry>: View {
     @_documentation(visibility: public)
     private var collapsible: Bool = false
 
+    @LiveElementIgnored
+    @Environment(\.onDeleteAction)
+    private var onDeleteAction: ((IndexSet) -> Void)?
+
     public var body: some View {
         SwiftUI.Section {
             let elements = $liveElement.childNodes(in: "content", default: true)
@@ -75,6 +79,7 @@ struct Section<Root: RootRegistry>: View {
                 ViewTreeBuilder<Root>.NodeView(node: childNode.node, context: $liveElement.context.storage)
                     .trackListItemScrollOffset(id: childNode.id)
             }
+            .onDelete(perform: onDeleteAction)
         } header: {
             $liveElement.children(in: "header")
         } footer: {