Lookslike saga components 7 (#79)

* Add build step to dev cmd

* Add more components, move app into common-ui

- rename common-app common-system-layout
- add common-hero-layout
- add common-spacer

* Add common-todo and reflect value to common-input

Author: gordonbrander

typescript/packages/common-ui/src/components/common-hero-layout.ts

@@ -0,0 +1,51 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import {baseStyles} from "./style.js";
+
+@customElement("common-hero-layout")
+export class CommonHeroLayoutElement extends LitElement {
+  static override styles = [
+    baseStyles,
+    css`
+    :host {
+      display: block;
+      height: 100%;
+    }
+
+    .layout {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 3fr 1fr;
+      grid-template-areas:
+        "primary"
+        "secondary"
+      ;
+      row-gap: var(--gap);
+      height: 100%;
+    }
+    
+    .layout-primary {
+      grid-area: primary;
+      overflow-y: auto;
+    }
+
+    .layout-secondary {
+      grid-area: secondary;
+      overflow-y: auto;
+    }
+    `
+  ];
+
+  override render() {
+    return html`
+    <div class="layout">
+      <div class="layout-primary">
+        <slot></slot>
+      </div>
+      <div class="layout-secondary">
+        <slot name="secondary"></slot>
+      </div>
+    </div>
+    `;
+  }
+}

typescript/packages/common-ui/src/components/common-img.ts

@@ -6,6 +6,8 @@ export class CommonImgElement extends LitElement {
   static override styles = css`
   :host {
     display: block;
+    width: 100%;
+    height: 100%;
   }
 
   .img {

typescript/packages/common-ui/src/components/common-input.ts

@@ -8,18 +8,24 @@ export class CommonInputElement extends LitElement {
     baseStyles,
     css`
     :host {
-      --height: 40px;
+      display: block;
+      --height: 24px;
     }
     
     .input {
       appearance: none;
-      background-color: var(--input-background);
       border: 0;
-      border-radius: calc(var(--height) / 2);
+      outline: 0;
       box-sizing: border-box;
       font-size: var(--body-size);
       width: 100%;
-      height: 100%;
+      height: var(--height);
+    }
+
+    :host-context([appearance="rounded"]) .input {
+      --height: 40px;
+      background-color: var(--input-background);
+      border-radius: calc(var(--height) / 2);
       padding: 8px 16px;
       height: var(--height);
     }
@@ -28,11 +34,18 @@ export class CommonInputElement extends LitElement {
 
   @property({ type: String }) value = "";
   @property({ type: String }) placeholder = "";
+  @property({ type: String }) appearance = "default";
 
   override render() {
+    const oninput = (event: Event) => {
+      const value = (event.target as HTMLInputElement).value;
+      this.value = value;
+    }
+
     return html`
     <input
       class="input"
+      @input="${oninput}"
       .value="${this.value}"
       .placeholder="${this.placeholder}"
       type="text" />`;

typescript/packages/common-ui/src/components/common-navstack.ts

@@ -0,0 +1,39 @@
+import { LitElement, html, css } from "lit";
+import {customElement} from "lit/decorators.js";
+
+@customElement("common-navstack")
+export class CommonNavstackElement extends LitElement {
+  static override styles = css`
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .navstack {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+  .navstack ::slotted(*) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+  }
+  
+  .navstack ::slotted(*:first-child) {
+    opacity: 1;
+  }
+  `;
+
+  override render() {
+    return html`
+    <div class="navstack">
+      <slot></slot>
+    </div>
+    `;
+  }
+}

typescript/packages/common-ui/src/components/common-spacer.ts

@@ -0,0 +1,13 @@
+import { LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("common-spacer")
+export class CommonSpacerElement extends LitElement {
+  static override styles = css`
+  :host {
+    display: block;
+    flex-grow: 999;
+    flex-shrink: 999;
+  }
+  `;
+}

typescript/packages/lookslike-sagas/src/components/app.ts renamed to typescript/packages/common-ui/src/components/common-system-layout.ts

@@ -1,11 +1,9 @@
 import { LitElement, html, css } from "lit";
 import { customElement } from "lit/decorators.js";
-import { style } from "@commontools/common-ui/components.js";
+import { baseStyles } from "./style.js";
 
-const { baseStyles } = style;
-
-@customElement("common-app")
-export class CommonAppElement extends LitElement {
+@customElement("common-system-layout")
+export class CommonSystemLayoutElement extends LitElement {
   static override styles = [
     baseStyles,
     css`
@@ -30,19 +28,15 @@ export class CommonAppElement extends LitElement {
 
     .app-primary {
       grid-area: primary;
-      overflow: auto;
-      container-type: size;
-      container-name: app-primary;
+      overflow: hidden;
     }
     
     .app-secondary {
       grid-area: secondary;  
-      container-type: inline-size;
     }
     
     .app-search {
       grid-area: search;
-      container-type: inline-size;
       background-color: var(--secondary-background);
       display: block;
       padding: var(--gap);

typescript/packages/common-ui/src/components/common-todo.ts

@@ -0,0 +1,68 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { baseStyles } from "./style.js";
+
+@customElement("common-todo")
+export class CommonTodoElement extends LitElement {
+  static override styles = [
+    baseStyles,
+    css`
+    :host {
+      display: block;
+    }
+
+    .todo {
+      display: grid;
+      grid-template-columns: min-content 1fr;
+      align-items: center;
+      column-gap: var(--pad);
+      min-height: 40px;
+    }
+
+    .todo-ctl {
+      display: flex;
+      gap: var(--gap);
+      align-items: center;
+    }
+
+    .todo-checkbox {
+      height: 24px;
+      width: 24px;
+    }
+    `
+  ];
+
+  @property({ type: Boolean }) checked = false;
+  @property({ type: String }) placeholder = "";
+  @property({ type: String }) value = "";
+
+  override render() {
+    const oncheck = (event: Event) => {
+      const checked = (event.target as HTMLInputElement).checked;
+      this.checked = checked;
+    }
+
+    const oninput = (event: Event) => {
+      const value = (event.target as HTMLInputElement).value;
+      this.value = value;
+    }
+
+    return html`
+    <div class="todo">
+      <div class="todo-ctl">
+        <input
+          class="todo-checkbox"
+          type="checkbox"
+          @change="${oncheck}"
+          .checked="${this.checked}" />
+      </div>
+      <common-input
+        class="unibox-input"
+        @input="${oninput}"
+        .placeholder="${this.placeholder}"
+        .value="${this.value}">
+      </common-input>
+    </div>
+    `;
+  }
+}

typescript/packages/common-ui/src/components/common-unibox.ts

@@ -27,6 +27,7 @@ export class CommonUniboxElement extends LitElement {
     return html`
     <div class="unibox">
       <common-input
+        appearance="rounded"
         class="unibox-input"
         .placeholder="${this.placeholder}"
         .value="${this.value}">

typescript/packages/common-ui/src/components/index.ts

@@ -14,4 +14,9 @@ export * as CommonVstack from './common-vstack.js';
 export * as CommonUnibox from './common-unibox.js';
 export * as CommonSuggestion from './common-suggestion.js';
 export * as CommonSuggestions from './common-suggestions.js';
+export * as CommonSpacer from './common-spacer.js';
+export * as CommonHeroLayout from './common-hero-layout.js';
+export * as CommonSystemLayout from './common-system-layout.js';
+export * as CommonNavstack from './common-navstack.js';
+export * as CommonTodo from './common-todo.js';
 export * as style from './style.js';

typescript/packages/lookslike-sagas/index.html

@@ -9,12 +9,9 @@
 </head>
 <body class="theme">
     <common-screen>
-        <common-app>
-            <common-hero>
-                <common-img src="example/mitchell-orr-jQqR2xGkesc-unsplash.jpg">
-                </common-img>
-            </common-hero>
+        <common-system-layout>
             <common-list>
+                <common-todo value="Buy milk" placeholder="Todo..."></common-todo>
                 <common-media src="example/mitchell-orr-jQqR2xGkesc-unsplash.jpg">
                     Hello!
                 </common-media>
@@ -39,7 +36,7 @@
                 </common-suggestions>
             </div>
             <common-unibox slot="search" placeholder="Imagine..."></common-unibox>
-        </common-app>
+        </common-system-layout>
     </common-screen>
 </body>
 </html>