From 872e431e3f54c948b98041801f88003076f33c51 Mon Sep 17 00:00:00 2001
From: Abhimanyu Aryan <8083613+AbhimanyuAryan@users.noreply.github.com>
Date: Fri, 31 Dec 2021 11:44:55 +0530
Subject: [PATCH 1/2] imageview for q-img API support

---
 src/ImageViews.jl | 18 ++++++++++++++++++
 src/StippleUI.jl  |  2 ++
 2 files changed, 20 insertions(+)
 create mode 100644 src/ImageViews.jl

diff --git a/src/ImageViews.jl b/src/ImageViews.jl
new file mode 100644
index 00000000..edce59cb
--- /dev/null
+++ b/src/ImageViews.jl
@@ -0,0 +1,18 @@
+module ImageViews
+
+using Genie, Stipple, StippleUI, StippleUI.API
+import Genie.Renderer.Html: HTMLString, normal_element, register_normal_element
+
+export imageview
+
+register_normal_element("q__img", context = @__MODULE__)
+
+function imageview(args...;
+              wrap::Function = StippleUI.DEFAULT_WRAPPER,
+              kwargs...)
+  wrap() do
+    q__img(args...; attributes([kwargs...], StippleUI.API.ATTRIBUTES_MAPPINGS)...)
+  end
+end
+
+end
diff --git a/src/StippleUI.jl b/src/StippleUI.jl
index 8bb2133e..5d0bbeea 100644
--- a/src/StippleUI.jl
+++ b/src/StippleUI.jl
@@ -71,6 +71,7 @@ include("Forms.jl")
 include("FormInputs.jl")
 include("Headings.jl")
 include("Icons.jl")
+include("ImageViews.jl")
 include("InnerLoaders.jl")
 include("Intersections.jl")
 include("Knobs.jl")
@@ -114,6 +115,7 @@ export quasar, quasar_pure, vue, vue_pure, xelem, xelem_pure, @click, csscolors
 @reexport using .FormInputs
 @reexport using .Headings
 @reexport using .Icons
+@reexport using .ImageViews
 @reexport using .InnerLoaders
 @reexport using .Intersections
 @reexport using .Knobs

From a710f01008917cffbe12092221a37b10391981e0 Mon Sep 17 00:00:00 2001
From: Abhimanyu Aryan <8083613+AbhimanyuAryan@users.noreply.github.com>
Date: Mon, 3 Jan 2022 19:35:34 +0530
Subject: [PATCH 2/2] atributes mapping for imageview

---
 src/API.jl | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/API.jl b/src/API.jl
index 1a2883c2..718fed80 100644
--- a/src/API.jl
+++ b/src/API.jl
@@ -39,6 +39,8 @@ const ATTRIBUTES_MAPPINGS = Dict{String,String}(
   "iconcolor" => "icon-color",
   "iconremove" => "icon-remove",
   "iconright" => "icon-right",
+  "imageclass" => "img-class",
+  "imagestyle" => "img-style",
   "indeterminateicon" => "indeterminate-icon",
   "indeterminatevalue" => "indeterminate-value",
   "inputclass" => "input-class",
@@ -59,11 +61,13 @@ const ATTRIBUTES_MAPPINGS = Dict{String,String}(
   "minheight" => "min-height",
   "maxheight" => "max-height",
   "multiline" => "multi-line",
+  "nativecontextmenu" => "native-context-menu",
   "navmaxyearmonth" => "navigation-max-year-month",
   "navminyearmonth" => "navigation-min-year-month",
   "newvaluemode" => "new-value-mode",
   "nobackdrop" => "no-backdrop-dismiss",
   "nocaps" => "no-caps",
+  "nodefaultspinner" => "no-default-spinner",
   "noerrorfocus" => "no-error-focus",
   "noerroricon" => "no-error-icon",
   "noesc" => "no-esc-dismiss",
@@ -74,12 +78,15 @@ const ATTRIBUTES_MAPPINGS = Dict{String,String}(
   "nowrap" => "no-wrap",
   "nounset" => "no-unset",
   "pagination" => ":pagination.sync",
+  "placeholdersrc" => "placeholder-src",
   "reactiverules" => "reactive-rules",
   "reversefillmask" => "reverse-fill-mask",
   "rules" => ":rules",
   "selected" => ":selected.sync",
   "shadowtext" => "shadow-text",
   "showifabove" => "show-if-above",
+  "spinnercolor" => "spinner-color",
+  "spinnersize" => "spinner-size",
   "stacked" => "stack",
   "stacklabel" => "stack-label",
   "textcolor" => "text-color",