@api-client/ui 0.5.0 → 0.5.2

package/demo/md/dialog/dialog.ts

@@ -18,6 +18,8 @@ class ComponentDemoPage extends DemoPage {
 
   @reactive() accessor overflowOpened = false
 
+  @reactive() accessor formOpened = false
+
   protected openSimple(): void {
     this.simpleOpened = true
   }
@@ -45,6 +47,15 @@ class ComponentDemoPage extends DemoPage {
     this.reportClosingReason(e.detail)
   }
 
+  protected openForm(): void {
+    this.formOpened = true
+  }
+
+  protected formClosed(e: CustomEvent<UiDialogClosingReason>): void {
+    this.formOpened = false
+    this.reportClosingReason(e.detail)
+  }
+
   imperativeDialog: UiDialog | null = null
 
   protected openImperative(): void {
@@ -81,7 +92,8 @@ class ComponentDemoPage extends DemoPage {
   contentTemplate(): TemplateResult {
     return html`
       <a href="../">Back</a>
-      ${this.simpleDialog()} ${this.fullDialog()} ${this.overflowDialog()} ${this.renderImperativeDialog()}
+      ${this.simpleDialog()} ${this.fullDialog()} ${this.overflowDialog()} ${this.formDialog()}
+      ${this.renderImperativeDialog()}
     `
   }
 
@@ -244,6 +256,128 @@ class ComponentDemoPage extends DemoPage {
     `
   }
 
+  formDialog(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Form dialog</h2>
+        <p>This dialog contains a form with validation and submit handling.</p>
+        <ui-button color="filled" @click="${this.openForm}">Open Form Dialog</ui-button>
+        <form @submit="${this.handleFormSubmit}" style="display: contents;">
+          <ui-dialog
+            ?open="${this.formOpened}"
+            @close="${this.formClosed}"
+            modal
+            style="--ui-dialog-max-width: 500px;"
+            submitClose
+          >
+            <ui-icon slot="icon" icon="info"></ui-icon>
+            <span slot="title">User Registration</span>
+
+            <div style="display: flex; flex-direction: column; gap: 16px;">
+              <label style="display: flex; flex-direction: column; gap: 4px;">
+                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Full Name *</span>
+                <input
+                  type="text"
+                  name="fullName"
+                  required
+                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
+                  placeholder="Enter your full name"
+                />
+              </label>
+
+              <label style="display: flex; flex-direction: column; gap: 4px;">
+                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Email *</span>
+                <input
+                  type="email"
+                  name="email"
+                  required
+                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
+                  placeholder="Enter your email address"
+                />
+              </label>
+
+              <label style="display: flex; flex-direction: column; gap: 4px;">
+                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Phone Number</span>
+                <input
+                  type="tel"
+                  name="phone"
+                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
+                  placeholder="Enter your phone number (optional)"
+                />
+              </label>
+
+              <label style="display: flex; flex-direction: column; gap: 4px;">
+                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Department</span>
+                <select
+                  name="department"
+                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px; background: white;"
+                >
+                  <option value="">Select a department</option>
+                  <option value="engineering">Engineering</option>
+                  <option value="design">Design</option>
+                  <option value="marketing">Marketing</option>
+                  <option value="sales">Sales</option>
+                  <option value="support">Support</option>
+                </select>
+              </label>
+
+              <label style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
+                <input type="checkbox" name="newsletter" style="margin: 0;" />
+                <span style="font-size: 14px; color: var(--md-sys-color-on-surface);">
+                  Subscribe to our newsletter
+                </span>
+              </label>
+
+              <label style="display: flex; align-items: center; gap: 8px;">
+                <input type="checkbox" name="terms" required style="margin: 0;" />
+                <span style="font-size: 14px; color: var(--md-sys-color-on-surface);">
+                  I agree to the <a href="#" style="color: var(--md-sys-color-primary);">Terms and Conditions</a> *
+                </span>
+              </label>
+            </div>
+
+            <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+            <ui-button color="filled" slot="button" value="confirm" type="submit">Register</ui-button>
+          </ui-dialog>
+        </form>
+      </section>
+    `
+  }
+
+  protected handleFormSubmit(e: CustomEvent): void {
+    e.preventDefault()
+
+    // Get form data from the event
+    const form = e.target as HTMLFormElement
+    const formData = new FormData(form)
+
+    // Convert to regular object for easier handling
+    const data: Record<string, string | boolean> = {}
+    for (const [key, value] of formData.entries()) {
+      if (key === 'newsletter' || key === 'terms') {
+        data[key] = value === 'on'
+      } else {
+        data[key] = value as string
+      }
+    }
+
+    console.log('Form submitted with data:', data)
+
+    // Simulate form validation
+    if (!data.fullName || !data.email) {
+      console.error('Required fields are missing')
+      return
+    }
+
+    if (!data.terms) {
+      console.error('Terms and conditions must be accepted')
+      return
+    }
+
+    // If validation passes, the dialog will close automatically
+    console.log('Registration successful!', data)
+  }
+
   renderImperativeDialog(): TemplateResult {
     return html`
       <section class="demo-section">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -182,7 +182,7 @@
     "dompurify": "^3.2.5",
     "idb-keyval": "^6.1.0",
     "lit": "^3.2.1",
-    "marked": "^15.0.7",
+    "marked": "^16.0.0",
     "monaco-editor": "^0.52.2",
     "nanoid": "^5.1.5",
     "prismjs": "^1.28.0",

package/src/elements/highlight/MarkedHighlight.ts

@@ -247,7 +247,8 @@ export default class MarkedHighlight extends LitElement {
       pedantic: this.pedantic,
       gfm: true,
     }
-    let out = marked(data, opts) as string
+    // eslint-disable-next-line no-misleading-character-class
+    let out = marked(data.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ''), opts) as string
     if (this.sanitize) {
       if (this.sanitizer) {
         out = this.sanitizer(out)

package/src/md/button/internals/base.ts

@@ -240,7 +240,7 @@ export default class BaseButton extends UiElement {
   }
 
   override handleClick(e: MouseEvent): void {
-    super.handleClick(e)
+    // Do not call super.handleClick() here, as it would call `endPress` again.
     if (this.disabled) {
       e.preventDefault()
       e.stopPropagation()

package/src/md/dialog/internals/Dialog.ts

@@ -8,6 +8,7 @@ import type { TypedEvents } from '../../../core/types.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'
 import '../../button/ui-button.js'
+import { bound } from '../../../decorators/bound.js'
 
 export interface UiDialogClosingReason {
   /**
@@ -137,6 +138,8 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    * - When the submit event is not cancelled, then:
    *  - The default confirm action is invoked.
    *  - The dialog is closed.
+   *
+   * @deprecated Wrap the content in a `<form>` element instead.
    */
   @property({ type: Boolean }) accessor useForm: boolean | undefined
 
@@ -147,6 +150,15 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    * @attribute
    */
   @property({ type: String }) accessor confirmValue: string | undefined
+  /**
+   * When the dialog is wrapped in a form, set this to `true` to close the dialog
+   * when the form is submitted.
+   *
+   * Note that the dialog doesn't perform any validation of the form. It only closes
+   * when the form is submitted, regardless of the application logic. The `submit` event
+   * is dispatched by the dialog when the form is valid.
+   */
+  @property({ type: Boolean }) accessor submitClose: boolean | undefined
 
   /**
    * A reference to the underlying dialog element.
@@ -173,14 +185,32 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
 
   #formId?: string
 
+  /**
+   * @deprecated Use `useForm` instead.
+   */
   get formId(): string | undefined {
     return this.#formId
   }
 
+  /**
+   * @deprecated This will be removed in the future.
+   */
   @state() accessor #inject: TemplateResult | RenderFunction | undefined
 
+  /**
+   * @deprecated This will be removed in the future.
+   */
   #pendingStyles?: CSSResultOrNative[]
 
+  /**
+   * A reference to the parent form element.
+   * When a form is found, the dialog will hook into the form's submit event
+   * and close the dialog when the form is submitted.
+   * Since the `submit` event is dispatched when the form is valid,
+   * we can use this to close the dialog and not worry about the form validation.
+   */
+  #form: HTMLFormElement | null = null
+
   constructor() {
     super()
 
@@ -192,6 +222,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
    * Allows to inject a template into the internals of the element.
    * This is helpful when working with imperative dialogs.
    * @param content The content to inject into the body.
+   * @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.
    */
   inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {
     this.#inject = content
@@ -210,6 +241,22 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     }
   }
 
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.#form = this.closest('form')
+    if (this.#form) {
+      this.#form.addEventListener('submit', this.handleFormSubmit)
+    }
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    if (this.#form) {
+      this.#form.removeEventListener('submit', this.handleFormSubmit)
+      this.#form = null
+    }
+  }
+
   protected override firstUpdated(): void {
     const styles = this.#pendingStyles
     if (styles) {
@@ -226,6 +273,13 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     }
   }
 
+  @bound
+  protected handleFormSubmit(): void {
+    if (this.submitClose) {
+      this.handleInteraction('confirm')
+    }
+  }
+
   override handleClick(e: MouseEvent): void {
     super.handleClick(e)
     const path = e.composedPath()
@@ -238,7 +292,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
       // Adds support for forms.
       // When a form's submit button is clicked we yield the flow control to the form.
       // This way the form can handle the submit event.
-      e.preventDefault()
       return
     }
     const { value = '' } = button

package/src/md/input/Input.ts

@@ -143,7 +143,7 @@ export default abstract class Input extends UiElement {
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
    * @attribute
    */
-  @property({ type: String }) accessor max = ''
+  @property({ type: String }) accessor max: number | string = ''
 
   /**
    * The maximum number of characters a user can enter into the text field. Set
@@ -160,7 +160,7 @@ export default abstract class Input extends UiElement {
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
    * @attribute
    */
-  @property({ type: String }) accessor min = ''
+  @property({ type: String }) accessor min: number | string = ''
 
   /**
    * The minimum number of characters a user can enter into the text field. Set
@@ -169,7 +169,7 @@ export default abstract class Input extends UiElement {
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
    * @attribute
    */
-  @property({ type: Number }) accessor minLength = -1
+  @property({ type: Number }) accessor minLength: number | undefined
 
   /**
    * A regular expression that the text field's value must match to pass
@@ -304,7 +304,7 @@ export default abstract class Input extends UiElement {
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
    * @attribute
    */
-  @property({ type: String }) accessor step = ''
+  @property({ type: Number }) accessor step = 1
 
   /**
    * Returns the native validation error message that would be displayed upon

package/src/md/text-area/internals/TextAreaElement.ts

@@ -35,7 +35,6 @@ export default class TextAreaElement extends Input {
   protected override renderInput(): TemplateResult {
     const placeholderValue = this.placeholder || undefined
     const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined
-    const minLengthValue = this.minLength > -1 ? this.minLength : undefined
     const roleValue = this.dataRole || undefined
     const { disabled } = this
 
@@ -59,7 +58,7 @@ export default class TextAreaElement extends Input {
         name="${ifDefined(this.name)}"
         .value=${live(this.getInputValue())}
         maxlength=${ifDefined(maxLengthValue)}
-        minlength=${ifDefined(minLengthValue)}
+        minlength=${ifDefined(this.minLength)}
         placeholder=${ifDefined(placeholderValue)}
         role=${ifDefined(roleValue as 'textbox')}
         ?disabled=${disabled}

package/src/md/text-field/internals/TextField.ts

@@ -10,7 +10,6 @@ export default class TextField extends Input {
     const maxValue = this.max || undefined
     const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined
     const minValue = this.min || undefined
-    const minLengthValue = this.minLength > -1 ? this.minLength : undefined
     const patternValue = this.pattern || undefined
     const roleValue = this.dataRole || undefined
     const stepValue = this.step || undefined
@@ -36,17 +35,17 @@ export default class TextField extends Input {
         type=${this.effectiveType}
         name="${ifDefined(this.name)}"
         .value=${live(this.getInputValue())}
-        max=${ifDefined(maxValue as unknown as number)}
+        max=${ifDefined(maxValue)}
         maxlength=${ifDefined(maxLengthValue)}
-        min=${ifDefined(minValue as unknown as number)}
-        minlength=${ifDefined(minLengthValue)}
+        min=${ifDefined(minValue)}
+        minlength=${ifDefined(this.minLength)}
         pattern=${ifDefined(patternValue)}
         placeholder=${ifDefined(placeholderValue)}
         role=${ifDefined(roleValue as 'textbox')}
         ?disabled=${disabled}
         ?readonly=${this.readOnly}
         ?required=${this.required}
-        step=${ifDefined(stepValue as unknown as number)}
+        step=${ifDefined(stepValue)}
         autocomplete="${ifDefined(this.autocomplete)}"
         autocapitalize="${ifDefined(this.autocapitalize)}"
         inputmode="${ifDefined(this.inputMode)}"