@statistikzh/leu 0.25.0 → 0.27.0

package/src/components/button/test/button.test.ts

@@ -155,16 +155,43 @@ describe("LeuButton", () => {
   })
 
   it("dispatches the click event", async () => {
-    const el = await fixture<LeuButton>(html` <leu-button>Sichern</leu-button>`)
-    const button = el.shadowRoot.querySelector("button")
+    const button = await fixture<LeuButton>(
+      html` <leu-button>Sichern</leu-button>`,
+    )
 
     setTimeout(() => button.click())
 
-    const event = await oneEvent(el, "click")
+    const event = await oneEvent(button, "click")
 
     expect(event).to.exist
   })
 
+  it("disables the button when loading", async () => {
+    const el = await fixture<LeuButton>(
+      html` <leu-button loading>Sichern</leu-button>`,
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.attribute("disabled")
+  })
+
+  it("doesn't dispatch click events when loading", async () => {
+    const button = await fixture<LeuButton>(
+      html` <leu-button loading>Sichern</leu-button>`,
+    )
+
+    let clicked = false
+
+    button.addEventListener("click", () => {
+      clicked = true
+    })
+
+    button.click()
+
+    expect(clicked).to.be.false
+  })
+
   describe("form association", () => {
     it("submits the form when type is submit", async () => {
       const form = await fixture<HTMLFormElement>(html`

package/src/components/file-input/FileInput.ts

@@ -145,16 +145,35 @@ export class LeuFileInput extends FormAssociatedMixin(LeuElement) {
     )
   }
 
+  /**
+   * This implementation Uses base-10 (decimal) units:
+   * 1 KB = 1_000 bytes
+   * 1 MB = 1_000_000 bytes
+   * 1 GB = 1_000_000_000 bytes
+   *
+   * To switch to base-2 (binary), use the following implementation:
+   * // const KB = 1024
+   * // const MB = 1024 * 1024
+   * // const GB = 1024 * 1024 * 1024
+   */
   protected static formatFileSize(size: number) {
-    if (size < 1e3) {
-      return html`${size}&nbsp;bytes`
+    const KB = 1e3
+    const MB = 1e6
+    const GB = 1e9
+
+    if (size >= GB) {
+      return html`${(size / GB).toFixed(1)}&nbsp;GB`
+    }
+
+    if (size >= MB) {
+      return html`${(size / MB).toFixed(1)}&nbsp;MB`
     }
 
-    if (size >= 1e3 && size < 1e6) {
-      return html`${(size / 1e3).toFixed(1)}&nbsp;KB`
+    if (size >= KB) {
+      return html`${(size / KB).toFixed(1)}&nbsp;KB`
     }
 
-    return html`${(size / 1e6).toFixed(1)}&nbsp;MB`
+    return html`${size}&nbsp;bytes`
   }
 
   protected handleDragEnter = (event: DragEvent) => {

package/src/components/input/Input.ts

@@ -86,10 +86,6 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   @property({ type: Boolean, reflect: true })
   clearable: boolean = false
 
-  /** The value of the input element. */
-  @property({ type: String, reflect: true })
-  value: string = ""
-
   /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
   @property({ type: String, reflect: true })
   error: string = ""
@@ -150,6 +146,26 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   @property({ type: Boolean, reflect: true })
   novalidate: boolean = false
 
+  /** The default value of the input element. */
+  @property({ type: String, reflect: true, attribute: "value" })
+  defaultValue: string = ""
+
+  protected _value: string
+
+  /** The value of the input element. */
+  @property({ type: String, attribute: false })
+  set value(value: string) {
+    this._value = value
+  }
+
+  get value(): string {
+    if (typeof this._value === "string") {
+      return this._value
+    }
+
+    return this.defaultValue
+  }
+
   @state()
   _validity: ValidityState | null = null
 
@@ -171,15 +187,32 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
   }
 
   formResetCallback() {
-    this.value = ""
+    this.value = this.defaultValue
   }
 
   protected setFormValue(): void {
-    this.internals.setFormValue(this.value)
+    this.internals.setFormValue(this.disabled ? null : this.value)
   }
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
-    if (changedProperties.has("value")) {
+    super.willUpdate(changedProperties)
+    let valueChanged = false
+
+    if (
+      changedProperties.has("defaultValue") &&
+      !changedProperties.has("value") &&
+      !this.hasInteracted
+    ) {
+      this.value = this.defaultValue
+      valueChanged = true
+    }
+
+    if (
+      valueChanged ||
+      changedProperties.has("value") ||
+      changedProperties.has("name") ||
+      changedProperties.has("disabled")
+    ) {
       this.setFormValue()
     }
   }
@@ -225,6 +258,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
    * @fires {CustomEvent} change
    */
   protected handleChange(event: Event & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     if (event.target.validity.valid) {
       this.value = event.target.value
     }
@@ -239,6 +273,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
    * the event can be handled outside the shadow DOM.
    */
   protected handleInput(event: Event & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     this.value = event.target.value
 
     const customEvent = new CustomEvent("input", {
@@ -311,7 +346,7 @@ export class LeuInput extends FormAssociatedMixin(LeuElement) {
       return true
     }
 
-    return this._validity === null || this.novalidate
+    return this._validity === null || this.novalidate || this.disabled
       ? false
       : !this._validity.valid
   }

package/src/components/input/test/input.test.ts

@@ -5,9 +5,10 @@ import { sendKeys } from "@web/test-runner-commands"
 import { spy } from "sinon"
 
 import "../leu-input.js"
+import { LeuInput } from "../leu-input.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(html`
+  return fixture<LeuInput>(html`
     <leu-input
       value=${ifDefined(args.value)}
       error=${ifDefined(args.error)}
@@ -495,4 +496,108 @@ describe("LeuInput", () => {
       expect(error).to.be.null
     }
   })
+
+  it("returns the defaultValue when no value has been explicitly set", async () => {
+    const el = await defaultFixture({ value: "John" })
+
+    expect(el.defaultValue).to.equal("John")
+    expect(el.value).to.equal("John")
+  })
+
+  it("value property overrides the defaultValue", async () => {
+    const el = await defaultFixture({ value: "John" })
+
+    el.value = "Jane"
+    await elementUpdated(el)
+
+    expect(el.defaultValue).to.equal("John")
+    expect(el.value).to.equal("Jane")
+  })
+
+  it("resets to the defaultValue when the form is reset", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-input name="name" value="John" label="Name"></leu-input>
+      </form>
+    `)
+
+    const input = form.querySelector<LeuInput>("leu-input")
+    input.value = "Jane"
+    await elementUpdated(input)
+
+    expect(input.value).to.equal("Jane")
+
+    form.reset()
+    await elementUpdated(input)
+
+    expect(input.value).to.equal("John")
+  })
+
+  it("updates the form data when the defaultValue changes before any interaction", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-input name="name" value="John" label="Name"></leu-input>
+      </form>
+    `)
+
+    const input = form.querySelector<LeuInput>("leu-input")
+
+    let formData = new FormData(form)
+    expect(formData.get("name")).to.equal("John")
+
+    // Changing defaultValue before interaction should update the value
+    input.defaultValue = "Jane"
+    await elementUpdated(input)
+
+    formData = new FormData(form)
+    expect(formData.get("name")).to.equal("Jane")
+  })
+
+  it("does not update the value when the defaultValue changes after interaction", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-input name="name" label="Name"></leu-input>
+        <div tabindex="0"></div>
+      </form>
+    `)
+
+    const input = form.querySelector<LeuInput>("leu-input")
+    input.focus()
+    await sendKeys({ type: "John" })
+    await elementUpdated(input)
+
+    // User has interacted, changing defaultValue should NOT override the typed value
+    input.defaultValue = "Jane"
+    await elementUpdated(input)
+
+    expect(input.value).to.equal("John")
+
+    const formData = new FormData(form)
+    expect(formData.get("name")).to.equal("John")
+  })
+
+  it("updates the form data when the value or disabled state changes", async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <leu-input name="name" value="John" label="Name"></leu-input>
+      </form>
+    `)
+
+    const input = form.querySelector<LeuInput>("leu-input")
+
+    let formData = new FormData(form)
+    expect(formData.get("name")).to.equal("John")
+
+    input.value = "Jane"
+    await elementUpdated(input)
+
+    formData = new FormData(form)
+    expect(formData.get("name")).to.equal("Jane")
+
+    input.disabled = true
+    await elementUpdated(input)
+
+    formData = new FormData(form)
+    expect(formData.get("name")).to.be.null
+  })
 })

package/src/components/scroll-top/ScrollTop.ts

@@ -22,23 +22,23 @@ export class LeuScrollTop extends LeuElement {
   static styles = [LeuElement.styles, styles]
 
   @state()
-  protected _showButton: boolean = false
+  protected showButton: boolean = false
 
-  protected _prevYPos: number = 0
+  protected prevYPos: number = 0
 
-  protected _scrollDown: boolean = false
+  protected hasScrolledDown: boolean = false
 
-  protected _scrollListener: EventListener
+  protected scrollListener: EventListener
 
   scroll = () => {
-    const delta = window.scrollY - this._prevYPos
+    const delta = window.scrollY - this.prevYPos
 
-    if (this._scrollDown) {
+    if (this.hasScrolledDown) {
       if (delta < 0) {
-        this._scrollDown = false
+        this.hasScrolledDown = false
       }
     } else if (delta > 0) {
-      this._scrollDown = true
+      this.hasScrolledDown = true
     }
 
     /**
@@ -46,22 +46,24 @@ export class LeuScrollTop extends LeuElement {
      * ... the current scroll position is greater than the window height (below-the-fold) and when
      * ... scrolling up
      */
-    this._showButton = window.scrollY > window.innerHeight && !this._scrollDown
-    this._prevYPos = window.scrollY
+    this.showButton =
+      window.scrollY > window.innerHeight && !this.hasScrolledDown
+    this.prevYPos = window.scrollY
   }
 
   connectedCallback() {
     super.connectedCallback()
-    this._scrollListener = throttle(this.scroll, 100)
-    document.addEventListener("scroll", this._scrollListener, true)
+    this.scrollListener = throttle(this.scroll, 100)
+    document.addEventListener("scroll", this.scrollListener, true)
   }
 
   disconnectedCallback() {
-    document.removeEventListener("scroll", this._scrollListener, true)
+    document.removeEventListener("scroll", this.scrollListener, true)
     super.disconnectedCallback()
   }
 
-  static scrollToTop() {
+  // eslint-disable-next-line class-methods-use-this
+  scrollToTop() {
     window.scrollTo({
       top: 0,
       left: 0,
@@ -72,14 +74,14 @@ export class LeuScrollTop extends LeuElement {
   render() {
     const cssClasses = {
       "scroll-top": true,
-      hide: !this._showButton,
+      hide: !this.showButton,
     }
     return html`
       <div class=${classMap(cssClasses)}>
         <leu-button
           label="Zum Seitenanfang"
           round
-          @click="${() => LeuScrollTop.scrollToTop()}"
+          @click="${() => this.scrollToTop()}"
         >
           <leu-icon name="arrowUp"></leu-icon>
         </leu-button>