change app

app.js

@@ -1,45 +1,109 @@
 const {DOM, Tag, H} = Gale({
-    Button: {
+  Form:{
-        padding: "20px",
+    padding: "20px"
-        background: "orange",
+  },
-        ".Inner": {
+  Input:{
-            fontSize: "10rem"
+    display:"inlnine-block",
-        }
+    padding:"0.5rem 1rem",
-    },
+    borderRadius:"0.5rem",
-    Outline: {
+    outline:"1px solid #ddd",
-        border: "2px solid orange"
+    ":focus":{
-    },
+      outline: "2px solid green"
-    Window:{
-      height: "100vh",
-      border: "2px solid black",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "end",
-      justifyContent: "center",
-      gap: "10px"
-    },
-    Ability:{
-      width: "50px",
-      height: "50px",
-      background: "red",
-      transition: "all 0.4s",
-      ":hover":{
-        transform:"scale(1.1)"
-      }
-    },
-    Orange:{
-        background:"orange"
     }
-}, "abilities");
+  },
+  Button:{
+    display:"inline-block",
+    padding:"1rem",
+    background:"green",
+    color:"white",
+    borderRadius:"0.5rem",
+    cursor:"pointer",
+    textTransform:"uppercase",
+    fontWeight:"bolder",
+    ":hover":{background:"black"}
+  },
+  Complete:{
+    fontSize:"0.6rem",
+    padding:"0.5rem",
+    background:"limegreen"
+  },
+  Incomplete:{
+    fontSize:"0.6rem",
+    padding:"0.5rem",
+    background:"yellow",
+    color:"black",
+  },
+  Delete:{
+    fontSize:"0.6rem",
+    padding:"0.5rem",
+    background:"tomato"
+  },
 
-const UI =()=>
+  Title:{
+    fontSize: "2rem"
+  },
+  List:{
+    padding:"1rem",
+    background:"#ddd"
+  },
+  Item:{
+    display:"flex",
+    gap:"1rem",
+    alignItems:"center"
+  },
+  Done:{
+    textDecoration:"line-through"
+  }
+});
+
+/** @typedef {{name:string, done:boolean}} Todo */
+
+/** @type {{pending:string, list:Todo[]}} */
+const InitialState = {pending:"todo name", list:[]};
+const Store = vanX.Store(InitialState, "todos_v1");
+
+const PendingCreate=()=>{
+  const newTodo = /** @type {Todo} */({name:Store.pending, done:false});
+  Store.list.unshift(newTodo);
+  Store.pending = "";
+  console.log(Store);
+}
+const PendingChange =(/** @type {InputEvent}*/e)=>{
+  console.log(e);
+  Store.pending = /** @type {HTMLInputElement}*/(e.target).value;
+}
+
+
+function Form()
 {
-  return H.Window(
+  const input = DOM.input.Input({value:Store.pending, oninput:PendingChange})
-    H.Ability({class:Tag("Ability", "Orange")}),
+  return DOM.form.Form(
-    H.Ability(),
+    {onsubmit(e){e.preventDefault(); PendingCreate();}},
-    H.Ability(),
+    ()=>
-    H.Ability.Orange(),
+    {
+        input.value = Store.pending;
+        input.setAttribute("data-value", Store.pending);
+        return input;
+    },
+    ()=>DOM.button.Button({disabled:Store.pending == ""}, "Create")
   )
 }
 
-van.add(document.body, UI());
+function List()
+{
+  return ()=>Store.list.length && vanX.list(DOM.ul.List, Store.list, (v, d)=>DOM.li.Item(
+    v.val.done ? DOM.button.Button.Complete({onclick(){v.val.done = false}}, "Complete") : DOM.button.Button.Incomplete({onclick(){v.val.done = true}}, "Incomplete"),
+    DOM.span({class: v.val.done ? Tag("Done") : ""}, v.val.name),
+    DOM.button.Button.Delete({onclick:d}, "Delete")
+  ));
+}
+
+van.add(
+  document.body, H.Form
+  (
+    H.Title("todos"),
+    Form(),
+    List(),
+    ()=>H.Item(Store.pending)
+  )
+);

src/gale.js

@@ -23,7 +23,7 @@ globalThis.Gale = (sheet, hash="")=>
                 case KeyGroup :
                     return Tier(`&:hover .${key.substring(KeyGroup.length)}${suffix}`, value, suffix);
             }
-            return `${ key.replace(/([a-z])([A-Z])/g, '$1-$2') }: ${value};`
+            return `${ key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() }: ${value};`
         });
     
         return `${selector}{${styles.join("\n")}}`;