Pre-made card component

Project.toml

@@ -1,7 +1,7 @@
 name = "StippleUI"
 uuid = "a3c5d34a-b254-4859-a8fa-b86abb7e84a3"
 authors = ["Adrian Salceanu <[email protected]>"]
-version = "0.22.17"
+version = "0.22.18"
 
 [deps]
 Colors = "5ae59095-9a9b-59fe-a467-6f913c188581"

demos/cards/Project.toml

@@ -0,0 +1,3 @@
+[deps]
+GenieFramework = "a59fdf5c-6bf0-4f5d-949c-a137c9e2f353"
+StippleUI = "a3c5d34a-b254-4859-a8fa-b86abb7e84a3"

demos/cards/app.jl

@@ -0,0 +1,13 @@
+using GenieFramework
+@genietools
+
+@app begin
+
+end
+
+ui() = begin
+  card_1(; show_avatar = false, title = "Welcome to Genie", subtitle = "The best Julia Framework", content = "",
+            buttons_component = nothing, menu_component = nothing, show_separator = false)
+end
+
+@page("/", ui)

demos/complex_inputs/app.jl

@@ -1,8 +1,6 @@
 using GenieFramework
 @genietools
 
-
-
 @app begin
     @in start_date = today()
     @out start_date_has_errors = false

src/Cards.jl

@@ -5,6 +5,7 @@ import Genie.Renderer.Html: HTMLString, normal_element, register_normal_element
 
 export card, card_section, card_actions
 export cardsection, cardactions
+export card_1
 
 register_normal_element("q__card", context = @__MODULE__)
 register_normal_element("q__card__section", context = @__MODULE__)
@@ -64,7 +65,7 @@ end
 
 ```julia-repl
 julia> card(class="text-white", style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%); width: 30%", [
-          card_section("lorLorem Ipsum is simply dummy text of the printing 
+          card_section("lorLorem Ipsum is simply dummy text of the printing
           and typesetting industry")
        ])
 ```
@@ -88,7 +89,7 @@ const cardsection = card_section
 # Examples
 ----------
     card_actions()
-    
+
 ### Model
 
 ```julia-repl
@@ -125,4 +126,119 @@ end
 
 const cardactions = card_actions
 
+
+"""
+    card_1
+
+Premade card component with many options. This is a good starting point for creating your own card component.
+Allows for:
+  * showing and hidding of avatar, media, separator.
+  * customizing avatar, media, title, subtitle, content, buttons, menu.
+  * controlling the content of the components with buttons_component, menu_component, media_component, content.
+  * customizing the props of the components with card_props, media_props, title_props, subtitle_props, content_props, separator_props.
+
+# Example
+card_1(; show_avatar = false, title = "Welcome to Genie", subtitle = "The best Julia Framework", content = "",
+            buttons_component = nothing, menu_component = nothing, show_separator = false)
+"""
+function card_1(args...;
+                show_avatar::Bool = true,
+                show_media::Bool = true,
+                show_separator::Bool = true,
+                avatar_img::Union{Nothing,ParsedHTMLString,AbstractString} = "https://api.multiavatar.com/12345.png",
+                avatar_title::Union{Nothing,ParsedHTMLString,AbstractString} = "",
+                avatar_subtitle::Union{Nothing,ParsedHTMLString,AbstractString} = "",
+                media_image::Union{Nothing,ParsedHTMLString,AbstractString} = nothing, # "https://cdn.quasar.dev/img/mountains.jpg",
+                media_component::Union{Nothing,ParsedHTMLString,AbstractString} = nothing,
+                title::Union{Nothing,ParsedHTMLString,AbstractString} = "",
+                subtitle::Union{Nothing,ParsedHTMLString,AbstractString} = "",
+                content::Union{Nothing,ParsedHTMLString,AbstractString} = "",
+                buttons_component::Union{Nothing,ParsedHTMLString,AbstractString} = ParsedHTMLString("""<q-btn flat>Action 1</q-btn><q-btn flat>Action 2</q-btn>"""),
+                menu_component::Union{Nothing,ParsedHTMLString,AbstractString} = ParsedHTMLString("""<q-item clickable><q-item-section>Menu 1</q-item-section></q-item>"""),
+                card_props::Dict = Dict(),
+                media_props::Dict = Dict(),
+                title_props::Dict = Dict(),
+                subtitle_props::Dict = Dict(),
+                content_props::Dict = Dict(),
+                separator_props::Dict = Dict(),
+                kwargs...)
+  avatar_component = if show_avatar
+    item([
+      itemsection(avatar=true, [
+        avatar([
+          img(src=avatar_img)
+        ])
+      ])
+
+      itemsection([
+        itemlabel(avatar_title)
+        itemlabel(avatar_subtitle; caption=true)
+      ])
+    ])
+  else
+    ""
+  end
+
+  media_component = if media_component !== nothing
+    media_component
+  elseif show_media
+    img(; src=media_image, kw(media_props)...)
+  else
+    ""
+  end
+
+  buttons_component = if buttons_component !== nothing
+    Html.div([
+      cardactions([
+        buttons_component
+      ])
+    ]; class="col")
+  else
+    ""
+  end
+
+  menu_component = if menu_component !== nothing
+    Html.div(class="col-auto", [
+      btn(color="grey-7", round=true, flat=true, icon="more_vert", [
+        menu(cover=true, autoclose=true, [
+          list([
+            menu_component
+          ])
+        ])
+      ])
+    ])
+  else
+    ""
+  end
+
+  card_separator = if show_separator
+    separator(; kw(separator_props)...)
+  else
+    ""
+  end
+
+  bottom_section = if isempty(buttons_component) || isempty(menu_component)
+    ""
+  else
+    card_separator
+    cardsection([
+      Html.div([
+        buttons_component
+        menu_component
+      ]; class="row items-center no-wrap")
+    ])
+  end
+
+  card([
+    avatar_component
+    media_component
+    cardsection([
+      Html.div(title; class="text-h6", kw(title_props)...),
+      Html.div(subtitle; class="text-subtitle2", kw(subtitle_props)...)
+    ])
+    cardsection(content; kw(content_props)...)
+    bottom_section
+  ]; flat=true, bordered=true, kw(card_props)...)
+end
+
 end