npm - @api-client/ui - Versions diffs - 0.2.13 → 0.3.0 - Mend

@api-client/ui 0.2.13 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (312) hide show

package/demo/md/buttons/{index.html → group.html} RENAMED Viewed

@@ -2,22 +2,35 @@
 <html lang="en-GB">
 <head>
   <meta charset="utf-8">
-  <title>UI button</title>
+  <title>UI button group</title>
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_drop_down,check" rel="stylesheet" />
   <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
   <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/native.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;
       display: flex;
       gap: 12px;
+      flex-wrap: wrap;
+    }
+    .demo h2, .demo h3 {
+      margin-bottom: 36px;
+    }
+    .frame {
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
     }
   </style>
 </head>
 <body>
   <div id="app"></div>
-  <script type="module" src="/.tmp/demo/md/buttons/index.js"></script>
+  <script type="module" src="/.tmp/demo/md/buttons/group.js"></script>
 </body>
 </html>

package/demo/md/buttons/group.ts ADDED Viewed

@@ -0,0 +1,171 @@
+import { html, TemplateResult } from 'lit'
+import { reactive } from '../../../src/decorators/index.js'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import type { MdButtonShape, MdButtonSize, MdButtonColor } from '../../../src/md/button/internals/button.js'
+import '../../../src/md/button/ui-button.js'
+import '../../../src/md/icons/ui-icon.js'
+import '../../../src/md/button/ui-button-group.js'
+class ComponentDemoPage extends DemoPage {
+  override accessor componentName = 'UI button group'
+  @reactive() accessor size: MdButtonSize = 's'
+  @reactive() accessor shape: MdButtonShape = 'round'
+  @reactive() accessor color: MdButtonColor = 'filled'
+  handleSizeChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.size = select.value as MdButtonSize
+  }
+  handleShapeChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.shape = select.value as MdButtonShape
+  }
+  handleColorChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.color = select.value as MdButtonColor
+  }
+  readonly icon = html`<ui-icon slot="icon" icon="edit"></ui-icon>`
+  contentTemplate(): TemplateResult {
+    const { size: s, icon: i, color: c } = this
+    return html`
+      <a href="../">Back</a>
+      ${this.renderConfigurationSection()}
+      <section class="demo-section ${s}">
+        <h2 class="display-large">Anatomy</h2>
+        <div class="frame">
+          <div class="demo-row">
+            <ui-button-group size="${s}">
+              <ui-button color="tonal">${i}</ui-button>
+              <ui-button color="tonal">${i}</ui-button>
+              <ui-button color="tonal">${i}Three</ui-button>
+              <ui-button color="tonal">${i}</ui-button>
+              <ui-button color="tonal">${i}</ui-button>
+            </ui-button-group>
+          </div>
+          <div class="demo-row">
+            <ui-button-group type="connected" size="${s}">
+              <ui-button color="filled">${i}Label</ui-button>
+              <ui-button color="filled">${i}Label</ui-button>
+              <ui-button color="filled">${i}Label</ui-button>
+              <ui-button color="filled">${i}Label</ui-button>
+              <ui-button color="filled">${i}Label</ui-button>
+            </ui-button-group>
+          </div>
+        </div>
+        <section class="demo-section ${s}">
+          <h2 class="display-large">States</h2>
+          <h3 class="headline-medium">Connected button group</h3>
+          <div class="frame">
+            <h4 class="title-medium">Multi selection</h4>
+            <div class="demo-row">
+              <ui-button-group type="connected" size="${s}" multiple>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+              </ui-button-group>
+            </div>
+            <h4 class="title-medium">Single selection</h4>
+            <div class="demo-row">
+              <ui-button-group type="connected" size="${s}">
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+              </ui-button-group>
+            </div>
+          </div>
+        </section>
+        <section class="demo-section ${s}">
+          <h3 class="headline-medium">Standard button group</h3>
+          <div class="frame">
+            <h4 class="title-medium">Multi selection</h4>
+            <div class="demo-row">
+              <ui-button-group type="standard" size="${s}" multiple>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+              </ui-button-group>
+            </div>
+            <h4 class="title-medium">Single selection</h4>
+            <div class="demo-row">
+              <ui-button-group type="standard" size="${s}">
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+                <ui-button color="${c}" toggle>${i}Label</ui-button>
+              </ui-button-group>
+            </div>
+          </div>
+        </section>
+      </section>
+    `
+  }
+  renderConfigurationSection(): TemplateResult {
+    const { size: s, shape: h, color: c } = this
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Configuration</h2>
+        <div class="md-select outlined">
+          <label for="size">Size</label>
+          <select class="md-select" id="size" @change="${this.handleSizeChange}" name="size" .value="${s}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="xs">Extra small</option>
+            <option value="s">Small</option>
+            <option value="m">Medium</option>
+            <option value="l">Large</option>
+            <option value="xl">Extra large</option>
+          </select>
+        </div>
+        <div class="md-select outlined">
+          <label for="shape">Shape</label>
+          <select id="shape" @change="${this.handleShapeChange}" name="shape" .value="${h}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="round">Round</option>
+            <option value="square">Square</option>
+          </select>
+        </div>
+        <div class="md-select outlined">
+          <label for="color">Color</label>
+          <select id="color" @change="${this.handleColorChange}" name="color" .value="${c}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="elevated">Elevated</option>
+            <option value="filled">Filled</option>
+            <option value="outlined">Outlined</option>
+            <option value="text">Text</option>
+            <option value="tonal">Tonal</option>
+          </select>
+        </div>
+      </section>
+    `
+  }
+}
+const instance = new ComponentDemoPage()
+instance.render()

package/demo/md/checkbox/index.ts CHANGED Viewed

@@ -201,7 +201,7 @@ class ComponentDemoPage extends DemoPage {
             Always indeterminate
           </label>
-          <ui-filled-button name="submit" value="on" type="submit">Submit</ui-filled-button>
+          <ui-button name="submit" value="on" type="submit">Submit</ui-button>
         </form>
         ${formValues

package/demo/md/dialog/dialog.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { html, TemplateResult } from 'lit'
 import { DemoPage } from '../../../src/demo/DemoPage.js'
-import '../../../src/md/button/ui-text-button.js'
-import '../../../src/md/button/ui-filled-button.js'
+import '../../../src/md/button/ui-button.js'
 import '../../../src/md/icons/ui-icon.js'
 import '../../../src/md/dialog/ui-dialog.js'
 import '../../../src/md/divider/ui-divider.js'
@@ -79,10 +78,10 @@ class ComponentDemoPage extends DemoPage {
     return html`
       <section class="demo-section">
         <h2 class="title-large">Simple dialog</h2>
-        <ui-filled-button @click="${this.openSimple}">Open</ui-filled-button>
+        <ui-button color="filled" @click="${this.openSimple}">Open</ui-button>
         <ui-dialog ?open="${this.simpleOpened}" @close="${this.basicClosed}">
           <p>This is a confirmation dialog content</p>
-          <ui-text-button slot="button" value="dismiss">Dismiss</ui-text-button>
+          <ui-button color="text" slot="button" value="dismiss">Dismiss</ui-button>
         </ui-dialog>
       </section>
     `
@@ -92,7 +91,7 @@ class ComponentDemoPage extends DemoPage {
     return html`
       <section class="demo-section">
         <h2 class="title-large">Full UI dialog</h2>
-        <ui-filled-button @click="${this.openFull}">Open</ui-filled-button>
+        <ui-button color="filled" @click="${this.openFull}">Open</ui-button>
         <ui-dialog ?open="${this.fullOpened}" @close="${this.fullClosed}" modal style="--ui-dialog-max-width: 380px">
           <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
           <span slot="title">Reset settings?</span>
@@ -106,9 +105,9 @@ class ComponentDemoPage extends DemoPage {
             <ui-list-item>email2@gmail.com</ui-list-item>
           </ui-list>
           <ui-divider></ui-divider>
-          <ui-text-button slot="button" @click="${this.handleInertButton}">Learn more</ui-text-button>
-          <ui-text-button slot="button" value="dismiss">Cancel</ui-text-button>
-          <ui-text-button slot="button" value="confirm">Accept</ui-text-button>
+          <ui-button color="text" slot="button" @click="${this.handleInertButton}">Learn more</ui-button>
+          <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+          <ui-button color="text" slot="button" value="confirm">Accept</ui-button>
         </ui-dialog>
       </section>
     `
@@ -119,7 +118,7 @@ class ComponentDemoPage extends DemoPage {
       <section class="demo-section">
         <h2 class="title-large">Imperative dialog</h2>
         <p>This dialog is created using imperative API.</p>
-        <ui-filled-button @click="${this.openImperative}">Open</ui-filled-button>
+        <ui-button color="filled" @click="${this.openImperative}">Open</ui-button>
       </section>
     `
   }

package/demo/md/dropdown-list/index.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import '../../../src/md/list/ui-list.js'
 import '../../../src/md/list/ui-list-item.js'
 import '../../../src/md/icon-button/ui-icon-button.js'
 import '../../../src/md/icons/ui-icon.js'
-import '../../../src/md/button/ui-outlined-button.js'
+import '../../../src/md/button/ui-button.js'
 class ComponentDemoPage extends DemoPage {
   override accessor componentName = 'UI dropdown list'
@@ -74,51 +74,12 @@ class ComponentDemoPage extends DemoPage {
   contentTemplate(): TemplateResult {
     const { list1Selected, list2Selected, list3Selected, verticalAlign, horizontalAlign, noOverlap } = this
     return html`
-    <a href="../">Back</a>
-    <section class="demo-section">
-      <h2 class="title-large">Icon button list</h2>
-      <div class="demo-row">
-        <ui-dropdown-list @select="${this.list1SelectHandler}">
-          <ui-icon-button aria-label="Trigger the menu"><ui-icon icon="moreVert"></ui-icon></ui-icon-button>
-          <ui-list slot="dropdown" role="menu">
-            <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
-            <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
-            <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
-            <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
-          </ui-list>
-        </ui-dropdown-list>
-        <p>Last selected: ${list1Selected || 'none'}</p>
-      </div>
-      <h2 class="title-large">Button list</h2>
-      <div class="demo-row">
-        <ui-dropdown-list
-          @select="${this.list2SelectHandler}"
-        >
-          <ui-outlined-button>Click me</ui-icon></ui-outlined-button>
-          <ui-list slot="dropdown" role="menu">
-            <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
-            <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
-            <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
-            <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
-          </ui-list>
-        </ui-dropdown-list>
-        <p>Last selected: ${list2Selected || 'none'}</p>
-      </div>
-      <h2 class="title-large">A list in an <code>overflow: hidden</code> element</h2>
-      <div class="demo-row">
-        <div class="button-in-lists">
-          <ui-dropdown-list
-            @select="${this.list3SelectHandler}"
-            .verticalAlign="${verticalAlign}"
-            .horizontalAlign="${horizontalAlign}"
-            ?noOverlap="${noOverlap}"
-          >
+      <a href="../">Back</a>
+      <section class="demo-section">
+        <h2 class="title-large">Icon button list</h2>
+        <div class="demo-row">
+          <ui-dropdown-list @select="${this.list1SelectHandler}">
             <ui-icon-button aria-label="Trigger the menu"><ui-icon icon="moreVert"></ui-icon></ui-icon-button>
             <ui-list slot="dropdown" role="menu">
               <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
@@ -127,32 +88,68 @@ class ComponentDemoPage extends DemoPage {
               <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
             </ui-list>
           </ui-dropdown-list>
+          <p>Last selected: ${list1Selected || 'none'}</p>
+        </div>
+        <h2 class="title-large">Button list</h2>
+        <div class="demo-row">
+          <ui-dropdown-list @select="${this.list2SelectHandler}">
+            <ui-button color="outlined">Click me</ui-button>
+            <ui-list slot="dropdown" role="menu">
+              <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
+              <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
+              <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
+              <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
+            </ui-list>
+          </ui-dropdown-list>
+          <p>Last selected: ${list2Selected || 'none'}</p>
+        </div>
+        <h2 class="title-large">A list in an <code>overflow: hidden</code> element</h2>
+        <div class="demo-row">
+          <div class="button-in-lists">
+            <ui-dropdown-list
+              @select="${this.list3SelectHandler}"
+              .verticalAlign="${verticalAlign}"
+              .horizontalAlign="${horizontalAlign}"
+              ?noOverlap="${noOverlap}"
+            >
+              <ui-icon-button aria-label="Trigger the menu"><ui-icon icon="moreVert"></ui-icon></ui-icon-button>
+              <ui-list slot="dropdown" role="menu">
+                <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
+                <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
+                <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
+                <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
+              </ui-list>
+            </ui-dropdown-list>
+          </div>
+          <label for="verticalAlign">Vertical align</label>
+          <select id="verticalAlign" @change="${this.verticalHandler}">
+            <option value="">None</option>
+            <option value="top">Top</option>
+            <option value="bottom">Bottom</option>
+            <option value="middle">Middle</option>
+            <option value="auto">Auto</option>
+          </select>
+          <label for="horizontalAlign">Horizontal align</label>
+          <select id="horizontalAlign" @change="${this.horizontalHandler}">
+            <option value="">None</option>
+            <option value="left">Left</option>
+            <option value="right">Right</option>
+            <option value="middle">Middle</option>
+            <option value="auto">Auto</option>
+          </select>
+          <label>
+            <input type="checkbox" name="noOverlap" @change="${this.noOverlapHandler}" />
+            No overlap
+          </label>
+          <p>Last selected: ${list3Selected || 'none'}</p>
         </div>
-        <label for="verticalAlign">Vertical align</label>
-        <select id="verticalAlign" @change="${this.verticalHandler}">
-          <option value="">None</option>
-          <option value="top">Top</option>
-          <option value="bottom">Bottom</option>
-          <option value="middle">Middle</option>
-          <option value="auto">Auto</option>
-        </select>
-        <label for="horizontalAlign">Horizontal align</label>
-        <select id="horizontalAlign" @change="${this.horizontalHandler}">
-          <option value="">None</option>
-          <option value="left">Left</option>
-          <option value="right">Right</option>
-          <option value="middle">Middle</option>
-          <option value="auto">Auto</option>
-        </select>
-        <label>
-          <input type="checkbox" name="noOverlap" @change="${this.noOverlapHandler}"/>
-          No overlap
-        </label>
-        <p>Last selected: ${list3Selected || 'none'}</p>
-      </div>
-    </section>
+      </section>
     `
   }
 }

package/demo/md/icon-button/index.html CHANGED Viewed

@@ -6,21 +6,111 @@
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
   <title>UI icon button</title>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-  <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
-    />
+  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet" />
   <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
   <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/native.css" rel="stylesheet" type="text/css" />
   <style>
     .demo-row {
       margin: 20px 0;
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
     }
-    .icons-demo-row {
+    .demo .demo-section {
+      max-width: 858px;
+      margin: 0 auto 80px auto;
+      --_row-height: 80px;
+    }
+    .demo .demo-section.l {
+      max-width: 1080px;
+      --_row-height: 120px;
+    }
+    .demo .demo-section.xl {
+      max-width: 1380px;
+      --_row-height: 180px;
+    }
+    .demo h2, .demo h3 {
+      margin-bottom: 36px;
+    }
+    ol {
+      padding-left: 0;
+      list-style: none;
+      counter-reset: item;
+    }
+    ol > li {
+      margin-top: 4px;
+      margin-bottom: 20px;
+      margin-left: 36px;
+      counter-increment: item;
+      vertical-align: baseline;
+    }
+    ol > li:before {
+      display: inline-block;
+      width: 24px;
+      height: 32px;
+      margin-top: -4px;
+      margin-right: 10px;
+      margin-left: -36px;
+      border-radius: 12px;
+      background: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface);
+      line-height: 32px;
+      text-align: center;
+    }
+    ol.decimal > li:before {
+      content: counter(item, decimal);
+    }
+    .color-grid,
+    .state-grid {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      justify-items: center;
+      gap: 0 0;
+      justify-items: center;
+      align-items: center;
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
+    }
+    .color-grid {
+      grid-template-columns: 80px 1fr 1fr 1fr;
+      grid-template-rows: var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height) var(--_row-height);
+    }
+    .state-grid {
+      grid-template-columns: 80px 1fr 1fr 1fr;
+      grid-template-rows: var(--_row-height) var(--_row-height);
+    }
+    .legend-marker {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background-color: var(--md-sys-color-inverse-surface);
+      color: var(--md-sys-color-inverse-on-surface);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .frame {
+      padding: 40px;
+      border-radius: 20px;
+      border: 1px var(--md-sys-color-outline) solid;
     }
   </style>
 </head>