@fboes/formwerk - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

CHANGELOG.md

 # Changelog
 
+- Improved `<output>` element
+
 ## 1.1.3
 
-- Removed unnecessary files fro NPM package
+- Removed unnecessary files from NPM package
 - Improved handling of `id` by removing illegal characters
@@ -7,0 +9,0 @@ - Added `value` property, which will give a typed value with `string`, `number`, `Date`, `string[]` nor `null`

dist/formwerk.js

@@ -112,2 +112,19 @@ /**
     }
+    _getHtmlOutput() {
+        if (!this.getAttribute("output")) {
+            return "";
+        }
+        const id = this.id;
+        const form = this.getAttribute("form");
+        const name = this.getAttribute("name");
+        return `<output id="${_html(id)}--output"${name ? ` name="${_html(name)}--output"` : ""} for="${_html(id)}--input"${form ? ` form="${_html(form)}"` : ""}></output>`;
+    }
+    _getHtmlLabel() {
+        const label = this.getAttribute("label");
+        if (!label) {
+            return "";
+        }
+        const id = this.id;
+        return `<label for="${_html(id)}--input" class="form-label">${_html(label)}</label>`;
+    }
 }
@@ -184,3 +201,2 @@ FormwerkElement.observedAttributes = ["disabled", "required", "options", "values"];
         const label = this.getAttribute("label");
-        const output = this.getAttribute("output");
         const unit = this.getAttribute("unit");
@@ -194,7 +210,7 @@ const helptext = this.getAttribute("helptext");
             `<div class="formwerk--outer">` +
-                (label ? `<label for="${_html(id)}--input" class="form-label">${_html(label)}</label>` : "") +
+                this._getHtmlLabel() +
                 `<div class="formwerk--input"><input id="${_html(id)}--input" type="text"${(helptext ? ` aria-describedby="${_html(id)}--helptext"` : "") +
                     (datalist ? ` list="${_html(id)}--datalist"` : "") +
                     (unit ? ` aria-label="${_html(label ?? "")} (${_html(unit)})"` : "")} />` +
-                (output ? `<output id="${_html(id)}--input"></output>` : "") +
+                this._getHtmlOutput() +
                 (unit ? `<span aria-hidden="true">${_html(unit)}</span>` : "") +
@@ -245,3 +261,2 @@ (toggletype
         const label = this.getAttribute("label");
-        const output = this.getAttribute("output");
         const unit = this.getAttribute("unit");
@@ -252,6 +267,6 @@ const helptext = this.getAttribute("helptext");
             `<div class="formwerk--outer">` +
-                (label ? `<label for="${_html(id)}--input" class="form-label">${_html(label)}</label>` : "") +
+                this._getHtmlLabel() +
                 `<div class="formwerk--input"><select id="${_html(id)}--input"${(helptext ? ` aria-describedby="${_html(id)}--helptext"` : "") +
                     (unit ? ` aria-label="${_html(label ?? "")} (${_html(unit)})"` : "")}></select>` +
-                (output ? `<output id="${_html(id)}--input"></output>` : "") +
+                this._getHtmlOutput() +
                 (unit ? `<span aria-hidden="true">${_html(unit)}</span>` : "") +
@@ -373,3 +388,2 @@ `</div>` +
         const label = this.getAttribute("label");
-        const output = this.getAttribute("output");
         const unit = this.getAttribute("unit");
@@ -380,6 +394,6 @@ const helptext = this.getAttribute("helptext");
             `<div class="formwerk--outer">` +
-                (label ? `<label for="${_html(id)}--input" class="form-label">${_html(label)}</label>` : "") +
+                this._getHtmlLabel() +
                 `<div class="formwerk--input"><textarea id="${_html(id)}--input" ${(helptext ? ` aria-describedby="${_html(id)}--helptext"` : "") +
                     (unit ? ` aria-label="${_html(label ?? "")} (${_html(unit)})"` : "")}></textarea>` +
-                (output ? `<output id="${_html(id)}--input"></output>` : "") +
+                this._getHtmlOutput() +
                 (unit ? `<span aria-hidden="true">${_html(unit)}</span>` : "") +
@@ -386,0 +400,0 @@ `</div>` +

package.json

 {
   "name": "@fboes/formwerk",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Web components for improved HTML form elements.",
@@ -5,0 +5,0 @@ "main": "dist/formwerk.js",

types/formwerk.d.ts

@@ -43,2 +43,4 @@ /**
     };
+    protected _getHtmlOutput(): string;
+    protected _getHtmlLabel(): string;
 }
@@ -45,0 +47,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

31494

increased by1.1%

Lines of code

531

increased by3.11%

No dependency changes