Add Lazy Grids

[carson-katri]

Closes #99, #100, #101

Currently, the columns/rows attribute uses a custom Elixir GridItem type in a list, which then needs to be JSON encoded manually. This could be a special case in the engine to JSON encode these particular attributes automatically.

<lazy-v-grid columns={
  Jason.encode! [
    LiveViewNativeSwiftUi.Types.GridItem.adaptive(10, 100),
    LiveViewNativeSwiftUi.Types.GridItem.fixed(250),
    LiveViewNativeSwiftUi.Types.GridItem.flexible()
  ]
}>
  ...
</lazy-v-grid>

Alternatively, the columns could be specified using elements:

<lazy-v-grid>
  <lazy-v-grid:columns>
    <adaptive minimum="10" maximum="100" />
    <fixed size="250" />
    <flexible />
  </lazy-v-grid:columns>
</lazy-v-grid>

LazyVGrid Example

Demo Code

<vstack spacing="0">
    <hstack modifiers={@native |> padding(all: 16)}>
        <async-image src={@show["image"]["medium"]} modifiers={@native |> frame(width: 90, height: 160)} />
        <vstack alignment="leading">
            <text font="title" font-weight="bold"><%= @show["name"] %></text>
            <text font="subheadline" color="system-secondary"><%= @show["network"]["name"] %></text>
        </vstack>
        <spacer />
    </hstack>
    <divider />
    <scroll-view>
        <lazy-v-grid
            columns={
                Jason.encode!([
                    LiveViewNativeSwiftUi.Types.GridItem.adaptive(180)
                ])
            }
            pinned-views="section-headers"
        >
            <%= for {season, episodes} <- @episodes do %>
                <section id={season |> Integer.to_string}>
                    <section:header>
                        <vstack spacing="0">
                            <divider />
                            <zstack alignment="leading">
                                <rectangle fill-color="system-white" modifiers={@native |> frame(height: 40)} />
                                <hstack modifiers={@native |> padding(all: 8)}>
                                    <text font="subheadline" color="system-secondary">Season <%= season %></text>
                                </hstack>
                            </zstack>
                        </vstack>
                    </section:header>
                    <%= for episode <- episodes do %>
                        <link destination={episode["url"]} id={episode["id"] |> Integer.to_string} >
                            <vstack alignment="leading" modifiers={@native |> padding(all: 8)}>
                                <async-image src={episode["image"]["medium"]} modifiers={@native |> frame(width: 180, height: 102)} />
                                <text font="title3" font-weight="semibold"><%= episode["name"] %></text>
                                <text font="subheadline" color="system-secondary">S <%= episode["season"] %> E <%= episode["number"] %></text>
                            </vstack>
                        </link>
                    <% end %>
                </section>
            <% end %>
        </lazy-v-grid>
    </scroll-view>
</vstack>

vgrid.mp4

LazyHGrid Example

Demo Code

<vstack spacing="0">
    <hstack modifiers={@native |> padding(all: 16)}>
        <async-image src={@show["image"]["medium"]} modifiers={@native |> frame(width: 90, height: 160)} />
        <vstack alignment="leading">
            <text font="title" font-weight="bold"><%= @show["name"] %></text>
            <text font="subheadline" color="system-secondary"><%= @show["network"]["name"] %></text>
        </vstack>
        <spacer />
    </hstack>
    <divider />
    <scroll-view>
        <v-stack alignment="leading" pinned-views="section-headers">
            <%= for {season, episodes} <- @episodes do %>
                <section id={season |> Integer.to_string}>
                    <section:header>
                        <vstack spacing="0">
                            <divider />
                            <zstack alignment="leading">
                                <rectangle fill-color="system-white" modifiers={@native |> frame(height: 40)} />
                                <hstack modifiers={@native |> padding(all: 8)}>
                                    <text font="subheadline" color="system-secondary">Season <%= season %></text>
                                </hstack>
                            </zstack>
                        </vstack>
                    </section:header>
                    <scroll-view axes="horizontal">
                        <lazy-h-grid rows={
                            Jason.encode!([
                                LiveViewNativeSwiftUi.Types.GridItem.flexible(200),
                                LiveViewNativeSwiftUi.Types.GridItem.flexible(200),
                            ])
                        }>
                            <%= for episode <- episodes do %>
                                <link destination={episode["url"]} id={episode["id"] |> Integer.to_string} >
                                    <vstack alignment="leading" modifiers={@native |> padding(all: 8)}>
                                        <async-image src={episode["image"]["medium"]} modifiers={@native |> frame(width: 180, height: 102)} />
                                        <text font="title3" font-weight="semibold"><%= episode["name"] %></text>
                                        <text font="subheadline" color="system-secondary">S <%= episode["season"] %> E <%= episode["number"] %></text>
                                    </vstack>
                                </link>
                            <% end %>
                        </lazy-h-grid>
                    </scroll-view>
                </section>
            <% end %>
        </v-stack>
    </scroll-view>
</vstack>

hgrid.mp4