implement tag component

README.md

@@ -26,7 +26,7 @@ This library was inspired by Jetpack Compose. It contains components that allow
 - [x] `Grid`;
 - [ ] `Slider` (range slider);
 - [ ] `Stepper` (number changer);
-- [ ] `Tag` (for content);
+- [x] `Tag` (for content);
 - [x] `Tooltip`;
 - [x] `Switcher`;
 - [x] `ChildModifier` (applies modifier to all children (not recursive));

src/happyx_ui.nim

@@ -1,11 +1,12 @@
 import
   happyx_ui/[
     core, colors, containers, button, image, surface,
-    text, card, input, progress, tooltip
+    text, card, input, progress, tooltip, tag
   ]
 
 
 export
   core, colors,
   containers, surface,
-  button, image, text, card, input, progress, tooltip
+  button, image, text, card, input, progress,
+  tooltip, tag

src/happyx_ui/core.nim

@@ -96,6 +96,52 @@ proc padding*(self: Modifier, value: string): Modifier =
   self
 
 
+proc objectContain*(self: Modifier): Modifier =
+  self.style.add(fmt"object-fit: contain")
+  self
+proc objectCover*(self: Modifier): Modifier =
+  self.style.add(fmt"object-fit: cover")
+  self
+proc objectFill*(self: Modifier): Modifier =
+  self.style.add(fmt"object-fit: fill")
+  self
+proc objectNone*(self: Modifier): Modifier =
+  self.style.add(fmt"object-fit: none")
+  self
+proc objectScaleDown*(self: Modifier): Modifier =
+  self.style.add(fmt"object-fit: scale-down")
+  self
+
+
+proc objectBottom*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: bottom")
+  self
+proc objectCenter*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: center")
+  self
+proc objectLeft*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: left")
+  self
+proc objectLeftBottom*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: left bottom")
+  self
+proc objectLeftTop*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: left top")
+  self
+proc objectRight*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: right")
+  self
+proc objectRightBottom*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: right bottom")
+  self
+proc objectRightTop*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: right top")
+  self
+proc objectTop*(self: Modifier): Modifier =
+  self.style.add(fmt"object-position: top")
+  self
+
+
 proc margin*(self: Modifier, left, top, right, bottom: string): Modifier =
   self.style.add(fmt"margin: {top} {right} {bottom} {left}")
   self
@@ -287,14 +333,23 @@ proc dropShadow*(self: Modifier, size: DropShadow): Modifier =
   self
 
 
-proc cursor(self: Modifier, cursor: string): Modifier =
+proc cursor*(self: Modifier, cursor: string): Modifier =
   self.style.add(fmt"cursor: {cursor}")
   self
-proc cursor(self: Modifier, cursor: Cursor): Modifier =
+proc cursor*(self: Modifier, cursor: Cursor): Modifier =
   self.style.add(fmt"cursor: {cursor}")
   self
 
 
+proc overflowHidden*(self: Modifier): Modifier =
+  self.style.add("overflow: hidden")
+  self
+
+proc style*(self: Modifier, s: string): Modifier =
+  self.style.add(s)
+  self
+
+
 # Positions
 proc absolute*(self: Modifier): Modifier =
   self.style.add("position: absolute")
@@ -334,6 +389,28 @@ proc flowColDense*(self: Modifier): Modifier =
   self
 
 
+proc flex*(self: Modifier): Modifier =
+  self.style.add("display: flex")
+  self
+proc inline*(self: Modifier): Modifier =
+  self.style.add("display: inline")
+  self
+proc inlineFlex*(self: Modifier): Modifier =
+  self.style.add("display: inline-flex")
+  self
+
+
+proc flexWrap*(self: Modifier): Modifier =
+  self.style.add("flex-wrap: wrap")
+  self
+proc flexWrapReverse*(self: Modifier): Modifier =
+  self.style.add("flex-wrap: wrap-reverse")
+  self
+proc flexNoWrap*(self: Modifier): Modifier =
+  self.style.add("flex-wrap: nowrap")
+  self
+
+
 proc build*(self: Modifier): string =
   self.style.join(";")
 proc build*(self: State[Modifier]): string =

src/happyx_ui/tag.nim

@@ -0,0 +1,40 @@
+import
+  happyx,
+  ./core,
+  ./colors
+
+
+let style = buildHtml:
+  tStyle: {fmt("""
+    .hpx-tag {
+      display: flex;
+      border-radius: .3rem;
+      border: 2px <PRIMARY_COLOR> solid;
+      background-color: <PRIMARY_COLOR>70;
+      color: <FOREGROUND_COLOR>;
+      transition: all;
+      transition-duration: .3s;
+      white-space: nowrap;
+      padding: .05rem .1rem;
+      cursor: default;
+    }
+    .hpx-tag:hover {
+      border-color: <PRIMARY_HOVER_COLOR>;
+      background-color: <PRIMARY_HOVER_COLOR>70;
+    }
+    .hpx-tag:active {
+      border-color: <PRIMARY_ACTIVE_COLOR>;
+      background-color: <PRIMARY_ACTIVE_COLOR>70;
+    }
+  """, '<', '>')}
+document.head.appendChild(style.children[0])
+
+
+proc Tag*(text: string = "", modifier: Modifier = initModifier(),
+          class: string = "", stmt: TagRef = nil): TagRef =
+  buildHtml:
+    tDiv(class = "hpx-tag {class}"):
+      if text.len > 0:
+        {text}
+      elif not stmt.isNil:
+        stmt

tests/test.nim

@@ -63,6 +63,25 @@ appRoutes "app":
               Text("switchers")
               Switcher(state = isMale):
                 "Are you male?"
+          Card(modifier = initModifier()
+            .padding(0.px)
+            .overflowHidden()
+          ):
+            Image(
+              "https://images.kinorium.com/movie/poster/2409863/w1500_52078438.jpg",
+              modifier = initModifier()
+                .width(200.px)
+                .height(240.px)
+                .objectCover()
+                .objectCenter()
+            )
+            Column(modifier = initModifier().padding(4.px, 0.px, 4.px, 10.px)):
+              Title("Fallout")
+              Row(modifier = initModifier().width(190.px).flexWrap()):
+                Tag("science fiction")
+                Tag("action")
+                Tag("drama")
+                Tag("adventure")
         Title("Containers 👀")
         Row(2.rem):
           Column():