npm - @api-client/ui - Versions diffs - 0.2.3 → 0.2.5 - Mend

@api-client/ui 0.2.3 → 0.2.5

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 (204) hide show

package/demo/elements/authorization/oauth-authorize.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { nanoid } from 'nanoid'
 import '../../../src/md/button/ui-filled-button.js'
-import '../../../src/md/text-field/ui-text-field.js'
+import '../../../src/md/text-field/ui-filled-text-field.js'
 function setupFormAction(): void {
   const u = new URL(window.location.href)

package/demo/elements/autocomplete/index.html ADDED Viewed

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>Autocomplete</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <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="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <link href="../../page.css" rel="stylesheet" type="text/css" />
+  <style>
+    .share-input {
+      .input-container {
+        min-height: 3em;
+        border: none;
+        padding: 4px 12px;
+        display: flex;
+        flex-wrap: wrap;
+        box-sizing: border-box;
+        gap: 4px;
+        border-radius: 4px;
+        background-color: var(--md-sys-color-surface-container-lowest);
+        outline-color: var(--md-sys-color-primary);
+        outline-style: solid;
+        outline-width: 1px;
+        outline-offset: -1px;
+        transition:
+          outline-width 0.14s ease-in-out,
+          outline-offset 0.14s ease-in-out;
+        &:focus-within {
+          outline-width: 2px;
+          outline-offset: -2px;
+        }
+        .native-input {
+          flex: 1;
+          outline: none;
+          border: none;
+          background: transparent;
+          color: var(--md-sys-color-on-surface);
+          font-size: 1rem;
+          font-family: var(--md-sys-typescale-body-large-font-family);
+          line-height: var(--md-sys-typescale-body-large-line-height);
+          padding: 0;
+        }
+      }
+    }
+  </style>
+</head>
+<body class="demo">
+  <div id="app"></div>
+  <script type="module" src="/.tmp/demo/elements/autocomplete/index.js"></script>
+</body>
+</html>

package/demo/elements/autocomplete/index.ts ADDED Viewed

@@ -0,0 +1,171 @@
+import { html, TemplateResult } from 'lit'
+import { live } from 'lit/directives/live.js'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import reactive from '../../../src/decorators/reactive.js'
+import type { IUser } from '@api-client/core/models/store/User.js'
+import { User } from '@api-client/core/mocking/lib/User.js'
+import '../../../src/elements/autocomplete/autocomplete-input.js'
+import '../../../src/md/text-field/ui-outlined-text-field.js'
+import '../../../src/md/listbox/ui-listbox.js'
+import '../../../src/md/list/ui-list-item.js'
+class ComponentDemoPage extends DemoPage {
+  override accessor componentName = 'Autocomplete input'
+  @reactive() accessor fixedValue = ''
+  @reactive() accessor dynamicValue = ''
+  @reactive() accessor dynamicCustomValue = ''
+  @reactive() accessor users: IUser[] = []
+  @reactive() accessor customUsers: IUser[] = []
+  userMock = new User()
+  handleFixedAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
+    const item = event.detail.item
+    this.fixedValue = item.getAttribute('data-value') || item.textContent || ''
+  }
+  handleFixedInput(event: InputEvent): void {
+    const target = event.target as HTMLInputElement
+    this.fixedValue = target.value
+  }
+  handleDynamicAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
+    const item = event.detail.item
+    this.dynamicValue = item.dataset.name || ''
+  }
+  handleDynamicInput(event: InputEvent): void {
+    const target = event.target as HTMLInputElement
+    this.dynamicValue = target.value
+    this.generateMockUsers(target.value, 'users')
+  }
+  generateMockUsers(startsWith: string, prop: 'users' | 'customUsers'): void {
+    const timeout = this.userMock.types.number({ min: 100, max: 1000 })
+    const results = this.userMock.types.number({ min: 0, max: 30 })
+    setTimeout(() => {
+      this[prop] = Array.from({ length: results }, () => {
+        const item = this.userMock.user()
+        item.name = item.name.startsWith(startsWith) ? item.name : `${startsWith}${item.name}`
+        return item
+      })
+      console.log('Generated users:', this[prop])
+    }, timeout)
+  }
+  handleDynamicCustomInput(event: InputEvent): void {
+    const target = event.target as HTMLInputElement
+    this.dynamicCustomValue = target.value
+    this.generateMockUsers(target.value, 'customUsers')
+  }
+  handleDynamicCustomAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
+    const item = event.detail.item
+    this.dynamicCustomValue = item.dataset.name || ''
+  }
+  override contentTemplate(): TemplateResult {
+    return html`
+      <a href="../">Back</a>
+      <section class="demo-section">
+        <h2 class="title-large">Fixed suggestions</h2>
+        <div class="demo-row">
+          <autocomplete-input @autocomplete="${this.handleFixedAutocomplete}">
+            <ui-outlined-text-field
+              slot="input"
+              label="Select a fruit"
+              name="fixed"
+              .value="${live(this.fixedValue)}"
+              @input="${this.handleFixedInput}"
+            ></ui-outlined-text-field>
+            <ui-listbox slot="suggestions">
+              <ui-list-item data-value="apple" role="option">Apple</ui-list-item>
+              <ui-list-item data-value="banana" role="option">Banana</ui-list-item>
+              <ui-list-item data-value="cherry" role="option">Cherry</ui-list-item>
+              <ui-list-item data-value="date" role="option">Date</ui-list-item>
+              <ui-list-item data-value="elderberry" role="option">Elderberry</ui-list-item>
+              <ui-list-item data-value="fig" role="option">Fig</ui-list-item>
+              <ui-list-item data-value="grape" role="option">Grape</ui-list-item>
+              <ui-list-item data-value="honeydew" role="option">Honeydew</ui-list-item>
+              <ui-list-item data-value="kiwi" role="option">Kiwi</ui-list-item>
+              <ui-list-item data-value="lemon" role="option">Lemon</ui-list-item>
+              <ui-list-item data-value="mango" role="option">Mango</ui-list-item>
+              <ui-list-item data-value="nectarine" role="option">Nectarine</ui-list-item>
+              <ui-list-item data-value="orange" role="option">Orange</ui-list-item>
+              <ui-list-item data-value="papaya" role="option">Papaya</ui-list-item>
+            </ui-listbox>
+          </autocomplete-input>
+        </div>
+      </section>
+      <section class="demo-section">
+        <h2 class="title-large">Dynamic suggestions</h2>
+        <div class="demo-row">
+          <autocomplete-input @autocomplete="${this.handleDynamicAutocomplete}">
+            <ui-outlined-text-field
+              slot="input"
+              label="Choose a user"
+              name="dynamic"
+              .value="${live(this.dynamicValue)}"
+              @input="${this.handleDynamicInput}"
+            ></ui-outlined-text-field>
+            <ui-listbox slot="suggestions"
+              >${this.users.map(
+                (user) =>
+                  html`<ui-list-item
+                    data-name="${user.name}"
+                    data-email="${user.email[0].email}"
+                    data-index="name email"
+                    role="option"
+                    >${user.name}<span slot="supporting-text">${user.email[0].email}</span></ui-list-item
+                  >`
+              )}</ui-listbox
+            >
+          </autocomplete-input>
+        </div>
+      </section>
+      <section class="demo-section">
+        <h2 class="title-large">Custom Input</h2>
+        <div class="demo-row">
+          <autocomplete-input @autocomplete="${this.handleDynamicCustomAutocomplete}">
+            <div class="share-input" slot="anchor">
+              <div class="input-container">
+                <input
+                  type="text"
+                  slot="input"
+                  autocomplete="off"
+                  placeholder="Enter name or email"
+                  name="dynamic-custom"
+                  class="native-input"
+                  .value="${live(this.dynamicCustomValue)}"
+                  @input="${this.handleDynamicCustomInput}"
+                />
+              </div>
+            </div>
+            <ui-listbox slot="suggestions"
+              >${this.customUsers.map(
+                (user) =>
+                  html`<ui-list-item
+                    data-name="${user.name}"
+                    data-email="${user.email[0].email}"
+                    data-index="name email"
+                    role="option"
+                    >${user.name}<span slot="supporting-text">${user.email[0].email}</span></ui-list-item
+                  >`
+              )}</ui-listbox
+            >
+          </autocomplete-input>
+        </div>
+      </section>
+    `
+  }
+}
+const instance = new ComponentDemoPage()
+instance.render()

package/demo/elements/http/body-editor.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import BodyEditor from '../../../src/elements/http/BodyEditor.js'
 import Input from '../../../src/md/input/Input.js'
 import { Events } from '../../../src/events/Events.js'
 import '../../../src/define/http/http-body-editor.js'
-import '../../../src/md/text-field/ui-text-field.js'
+import '../../../src/md/text-field/ui-filled-text-field.js'
 const STORE_KEY = 'demo.request-ui.editor.body'
@@ -90,11 +90,11 @@ class ComponentDemoPage extends DemoPage {
       <a href="./">Back</a>
       <section class="demo-section">
         <h2 class="title-large">Setup</h2>
-        <ui-text-field
+        <ui-filled-text-field
           label="Content type"
           .value="${live(this.contentType || '')}"
           @change="${this.handleContentType}"
-        ></ui-text-field>
+        ></ui-filled-text-field>
       </section>
       <section class="demo-section">
         <h2 class="title-large">HTTP body editor</h2>

package/demo/elements/index.html CHANGED Viewed

@@ -18,11 +18,21 @@
     <a href="../">Back</a>
     <nav>
       <dl>
-        <dt><a href="icons/index.html">Icons</a></dt>
-        <dd>The icons library.</dd>
+        <dt><a href="autocomplete/index.html">Autocomplete input</a></dt>
+        <dd>Turns an input element into an autocomplete.</dd>
+        <dt><a href="authorization/index.html">Authorization element</a></dt>
+        <dd>Elements to define HTTP authorization.</dd>
+        <dt><a href="context-menu/index.html">Context menu</a></dt>
+        <dd>An element that render a context menu.</dd>
         <dt><a href="environment/index.html">Environment</a></dt>
         <dd>The environment elements library.</dd>
+        <dt><a href="har/index.html">HAR utilities</a></dt>
+        <dd>Elements related to processing and visualizing HAR data.</dd>
         <dt><a href="highlight/index.html">Highlight</a></dt>
         <dd>The syntax highlighting library.</dd>
@@ -33,18 +43,12 @@
         <dt><a href="http-client/index.html">HTTP Client</a></dt>
         <dd>The HTTP Client UI library.</dd>
+        <dt><a href="icons/index.html">Icons</a></dt>
+        <dd>The icons library.</dd>
         <dt><a href="project/index.html">HTTP project</a></dt>
         <dd>Elements related to HTTP project.</dd>
-        <dt><a href="har/index.html">HAR utilities</a></dt>
-        <dd>Elements related to processing and visualizing HAR data.</dd>
-        <dt><a href="context-menu/index.html">Context menu</a></dt>
-        <dd>An element that render a context menu.</dd>
-        <dt><a href="authorization/index.html">Authorization element</a></dt>
-        <dd>Elements to define HTTP authorization.</dd>
         <dt><a href="user/user-avatar.html">User avatar</a></dt>
         <dd>User avatar element.</dd>
       </dl>

package/demo/md/index.html CHANGED Viewed

@@ -37,7 +37,7 @@
         <dd>A Material 3-styled list and list item.</dd>
         <dt><a href="list/dropdown-list.html">dropdown-list</a></dt>
         <dd>A Material 3-styled dropdown-list.</dd>
-        <dt><a href="inputs/input.html">ui-text-field</a></dt>
+        <dt><a href="inputs/input.html">Text field</a></dt>
         <dd>A Material 3-styled text field and text area.</dd>
         <dt><a href="notification/snack.html">ui-snackbar</a></dt>
         <dd>A Material 3-styled snackbar notification.</dd>

package/demo/md/inputs/input.html CHANGED Viewed

@@ -8,26 +8,21 @@
   <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
   <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-    .grid-5 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-      justify-items: center;
+    .demo-section {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
     }
-    .grid-4 {
+    .input-compare {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr;
-      justify-items: center;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(1, 1fr);
+      gap: 8px;;
     }
-    .grid-3 {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      justify-items: center;
+    .demo-row {
+      margin: 20px 0;
     }
   </style>
 </head>