list

src/sigpro-ui.js

@@ -905,6 +905,22 @@ export const UI = ($, defaultLang = "es") => {
       ],
     );
 
+  /** LIST */
+  ui.List = (props) => {
+    const { items, header, render, keyFn, class: className } = props;
+
+    return $.html(
+      "ul",
+      {
+        class: joinClass("list bg-base-100 rounded-box shadow-md", className),
+      },
+      [
+        ui.If(header, () => $.html("li", { class: "p-4 pb-2 text-xs opacity-60 tracking-wide" }, [val(header)])),
+        ui.For(items, (item, index) => $.html("li", { class: "list-row" }, [render(item, index)]), keyFn),
+      ],
+    );
+  };
+
   /** STACK */
   ui.Stack = (props, children) => $.html("div", { ...props, class: joinClass("stack", props.$class || props.class) }, children);