karm-kira: Added select component.

Author: sleepy-monax

src/apps/hideo-zoo/app.cpp

@@ -17,6 +17,7 @@
 #include "page-radio.h"
 #include "page-resizable.h"
 #include "page-rows.h"
+#include "page-select.h"
 #include "page-side-nav.h"
 #include "page-side-panel.h"
 #include "page-slider.h"
@@ -39,6 +40,7 @@ static Array PAGES = {
     &PAGE_RADIO,
     &PAGE_RESIZABLE,
     &PAGE_ROWS,
+    &PAGE_SELECT,
     &PAGE_SIDE_PANEL,
     &PAGE_SIDENAV,
     &PAGE_SLIDER,

src/apps/hideo-zoo/page-select.h

@@ -0,0 +1,47 @@
+#pragma once
+
+#include <karm-kira/select.h>
+#include <karm-ui/layout.h>
+#include <mdi/form-select.h>
+
+#include "model.h"
+
+namespace Hideo::Zoo {
+
+static inline Page PAGE_SELECT{
+    Mdi::FORM_SELECT,
+    "Select",
+    "A control that allows the user to toggle between checked and not checked.",
+    [] {
+        return Kr::select(
+                   Kr::selectValue("Pick something to eat"s),
+                   [] -> Ui::Children {
+                       return {
+                           Kr::selectGroup({
+                               Kr::selectLabel("Fruits"s),
+                               Kr::selectItem(Ui::NOP, "Apple"s),
+                               Kr::selectItem(Ui::NOP, "Banana"s),
+                               Kr::selectItem(Ui::NOP, "Cherry"s),
+                           }),
+                           Ui::separator(),
+                           Kr::selectGroup({
+                               Kr::selectLabel("Vegetables"s),
+                               Kr::selectItem(Ui::NOP, "Carrot"s),
+                               Kr::selectItem(Ui::NOP, "Cucumber"s),
+                               Kr::selectItem(Ui::NOP, "Tomato"s),
+                           }),
+                           Ui::separator(),
+                           Kr::selectGroup({
+                               Kr::selectLabel("Meat"s),
+                               Kr::selectItem(Ui::NOP, "Beef"s),
+                               Kr::selectItem(Ui::NOP, "Chicken"s),
+                               Kr::selectItem(Ui::NOP, "Pork"s),
+                           }),
+                       };
+                   }
+               ) |
+               Ui::center();
+    },
+};
+
+} // namespace Hideo::Zoo

src/libs/karm-kira/select.cpp

@@ -0,0 +1,74 @@
+#include <karm-ui/anim.h>
+#include <karm-ui/layout.h>
+#include <karm-ui/popover.h>
+#include <karm-ui/scroll.h>
+#include <mdi/chevron-down.h>
+
+#include "select.h"
+
+namespace Karm::Kira {
+
+Ui::Child select(Ui::Child value, Ui::Slots slots) {
+    return Ui::button(
+        [slots = std::move(slots)](auto &n) {
+            Ui::showPopover(
+                n,
+                n.bound().bottomStart(),
+                Ui::vflow(
+                    slots()
+                ) |
+                    Ui::vscroll() |
+                    Ui::sizing({n.bound().width, Ui::UNCONSTRAINED}, {Ui::UNCONSTRAINED, 160}) |
+                    Ui::box({
+                        .borderRadii = 6,
+                        .borderWidth = 1,
+                        .borderFill = Ui::GRAY800,
+                        .backgroundFill = Ui::GRAY900,
+                        .shadowStyle = Gfx::BoxShadow::elevated(4),
+                    }) |
+                    Ui::scaleIn()
+            );
+        },
+        Ui::ButtonStyle::outline(),
+        Ui::hflow(
+            8,
+            Math::Align::CENTER,
+            value,
+            Ui::icon(Mdi::CHEVRON_DOWN)
+        ) | Ui::insets({6, 12, 6, 16}) |
+            Ui::minSize({Ui::UNCONSTRAINED, 36})
+    );
+}
+
+Ui::Child selectValue(String text) {
+    return Ui::labelMedium(text);
+}
+
+Ui::Child selectLabel(String text) {
+    return Ui::labelMedium(Ui::GRAY400, text) |
+           Ui::insets({12, 6, 3, 14});
+}
+
+Ui::Child selectItem(Ui::OnPress onPress, String t) {
+    return Ui::hflow(
+               12,
+               Math::Align::CENTER,
+               Ui::text(t)
+           ) |
+           Ui::insets({6, 6, 6, 10}) |
+           Ui::minSize({Ui::UNCONSTRAINED, 28}) |
+           Ui::button(
+               [onPress = std::move(onPress)](auto &n) {
+                   onPress(n);
+                   Ui::closePopover(n);
+               },
+               Ui::ButtonStyle::subtle()
+           ) |
+           Ui::insets(4);
+}
+
+Ui::Child selectGroup(Ui::Children children) {
+    return Ui::vflow(children);
+}
+
+} // namespace Karm::Kira

src/libs/karm-kira/select.h

@@ -0,0 +1,19 @@
+#pragma once
+
+#include <karm-ui/input.h>
+
+#include "_prelude.h"
+
+namespace Karm::Kira {
+
+Ui::Child select(Ui::Child value, Ui::Slots options);
+
+Ui::Child selectValue(String text);
+
+Ui::Child selectLabel(String text);
+
+Ui::Child selectItem(Ui::OnPress onPress, String t);
+
+Ui::Child selectGroup(Ui::Children children);
+
+} // namespace Karm::Kira