@fboes/formwerk - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

CHANGELOG.md

 # Changelog
 
+- Improved attribute handling for `disabled`, `required`, `options` and `values`
+
+## 1.1.0
+
 - Added `disabled` and `required` component property
@@ -4,0 +8,0 @@ - Fixed `id` of checkboxes / radio buttons

dist/formwerk.js

@@ -32,10 +32,16 @@ /**
     }
-    connectedCallback() {
-        this.disabled = this.hasAttribute("disabled");
-        this.required = this.hasAttribute("required");
-        const options = this.getAttribute("options");
-        const values = this.getAttribute("values");
-        if (options || values) {
-            this.options = JSON.parse(options ?? "[]");
-            this.values = JSON.parse(values ?? "[]");
+    attributeChangedCallback(attrName, oldValue, newValue) {
+        switch (attrName) {
+            case "disabled":
+                this.disabled = Boolean(newValue);
+                break;
+            case "required":
+                this.required = Boolean(newValue);
+                break;
+            case "options":
+                this.options = JSON.parse(newValue ?? "[]");
+                break;
+            case "values":
+                this.values = JSON.parse(newValue ?? "[]");
+                break;
         }
@@ -72,2 +78,3 @@ }
 }
+FormwerkElement.observedAttributes = ["disabled", "required", "options", "values"];
 // -----------------------------------------------------------------------------
@@ -84,3 +91,2 @@ /**
     connectedCallback() {
-        super.connectedCallback();
         this._addHtml();
@@ -247,3 +253,2 @@ this.input = this.querySelector("input, select, textarea");
     connectedCallback() {
-        super.connectedCallback();
         this._addHtml();
@@ -250,0 +255,0 @@ this.formGroup = this.querySelector('[role="group"]');

package.json

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

README.md

@@ -28,3 +28,3 @@ # Formwerk
 
-All components have in common that any attributes attached will be attached to the `<input>` and/or `<select>` field inside of it. And then there are some extra attributes to make your live easier.
+All components have in common that any attributes attached will be attached to the `<input>`, `<select>` or `<textarea>` field inside of it. There are some additional attributes which will not be attached to the form field elements, but instead will make your live easier by attaching extra DOM structures around the form field element.
 
@@ -70,3 +70,3 @@ ## Installation
 
-Be aware that changing the attributes of the web components after mounting these to the DOM does not apply any further changes. Instead change the _properties_ of the web components.
+Be aware that changing the attributes of the web components after mounting these to the DOM does most often not apply any further changes. Instead change the _properties_ of the web components.
 
@@ -77,42 +77,41 @@ ## Attributes
 
-### `label` (string)
+| Name         | Type               | Property | `<formwerk-input />` | `<formwerk-select />` | `<formwerk-checkboxes />` | `<formwerk-textarea />` |
+| ------------ | ------------------ | :------: | :------------------: | :-------------------: | :-----------------------: | :---------------------: |
+| `label`      | string             |          |          ✅          |          ✅           |            ✅             |           ✅            |
+| `helptext`   | string             |          |          ✅          |          ✅           |            ✅             |           ✅            |
+| `output`     | boolean            |          |          ✅          |          ✅           |                           |                         |
+| `unit`       | string             |          |          ✅          |          ✅           |                           |                         |
+| `required`   | boolean            |    ✅    |          ✅          |          ✅           |            ✅             |           ✅            |
+| `disabled`   | boolean            |    ✅    |          ✅          |          ✅           |            ✅             |           ✅            |
+| `options`    | string[]\|object[] |    ✅    |          ✅          |          ✅           |            ✅             |                         |
+| `values`     | string[]           |    ✅    |          ✅          |          ✅           |            ✅             |                         |
+| `toggletype` | object             |          |          ✅          |                       |                           |                         |
+| `autogrow`   | boolean            |          |                      |                       |                           |           ✅            |
 
-Exists on: `<formwerk-input />`, `<formwerk-select />`, `<formwerk-checkboxes />`, `<formwerk-textarea />`
+### `label`
 
 Will spawn an extra `<label>` before the form element, the attribute value will be the label text.
 
-### `helptext` (string)
+### `helptext`
 
-Exists on: `<formwerk-input />`, `<formwerk-select />`, `<formwerk-checkboxes />`, `<formwerk-textarea />`
-
 Will spawn an extra help paragraph text after the form element, the attribute value will be the paragraph text.
 
-### `output` (boolean)
+### `output`
 
-Exists on: `<formwerk-input />`, `<formwerk-select />`
-
 Will spawn an extra `<output>` after the form element, if set to `true`. This output show the current value, and may be helpful for inputs which do not show the current value like `<input type="range" />`.
 
-### `unit` (string)
+### `unit`
 
-Exists on: `<formwerk-input />`, `<formwerk-select />`
-
 Will spawn an extra extra unit name (e.g. "°C") text after the form element, the attribute value will be the unit text.
 
-### `required` (boolean)
+### `required`
 
-Exists on: `<formwerk-input />`, `<formwerk-select />`, `<formwerk-checkboxes />`, `<formwerk-textarea />`
-
 Will toggle the input element's attribute `required` and add/remove the class `is-required`.
 
-### `disabled` (boolean)
+### `disabled`
 
-Exists on: `<formwerk-input />`, `<formwerk-select />`, `<formwerk-checkboxes />`, `<formwerk-textarea />`
-
 Will toggle the input element's attribute `disabled` and add/remove the class `is-disabled`.
 
-### `options` (string[]\|object[])
+### `options`
 
-Exists on: `<formwerk-input />`, `<formwerk-select />`, `<formwerk-checkboxes />`
-
 Instead of creating multiple options for a `<datalist>`, `<option>`, `<input type="checkbox">` or `<input type="radio">`, the `options` property allows for a fast creation of option lists.
@@ -138,6 +137,4 @@
 
-### `values` (string[])
+### `values`
 
-Exists on: `<formwerk-input />`, `<formwerk-select />`, `<formwerk-checkboxes />`
-
 For `<select multiple />` as well as `<input type="checkbox" />` it is possible to have multiple selected values for a given input element. For these elements there is a helpful `values` property to set and read multiple `value`.
@@ -151,6 +148,4 @@
 
-### `toggletype` (object)
+### `toggletype`
 
-Exists on: `<formwerk-input />`
-
 This allows `<input>` field to change their type. The attribute requires the following JSON:
@@ -167,6 +162,4 @@
 
-### `autogrow` (boolean)
+### `autogrow`
 
-Exists on: `<formwerk-textarea />`
-
 Text areas will grow according to their input text size.
@@ -173,0 +166,0 @@

src/formwerk.ts

@@ -63,13 +63,20 @@ /**
 
+  static observedAttributes = ["disabled", "required", "options", "values"];
+
   input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement = document.createElement("input");
 
-  connectedCallback() {
-    this.disabled = this.hasAttribute("disabled");
-    this.required = this.hasAttribute("required");
-
-    const options = this.getAttribute("options");
-    const values = this.getAttribute("values");
-    if (options || values) {
-      this.options = JSON.parse(options ?? "[]");
-      this.values = JSON.parse(values ?? "[]");
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null) {
+    switch (attrName) {
+      case "disabled":
+        this.disabled = Boolean(newValue);
+        break;
+      case "required":
+        this.required = Boolean(newValue);
+        break;
+      case "options":
+        this.options = JSON.parse(newValue ?? "[]");
+        break;
+      case "values":
+        this.values = JSON.parse(newValue ?? "[]");
+        break;
     }
@@ -123,3 +130,2 @@ }
   connectedCallback() {
-    super.connectedCallback();
     this._addHtml();
@@ -313,3 +319,2 @@ this.input = this.querySelector("input, select, textarea") as
   connectedCallback() {
-    super.connectedCallback();
     this._addHtml();
@@ -316,0 +321,0 @@ this.formGroup = this.querySelector('[role="group"]') as HTMLDivElement;

types/formwerk.d.ts

@@ -8,6 +8,8 @@ /**
  */
-type FormwerkOption = string | {
-    value: string;
-    label: string;
-};
+type FormwerkOption =
+  | string
+  | {
+      value: string;
+      label: string;
+    };
 /**
@@ -17,12 +19,13 @@ * Base class for all Formwerk Web Components.
 export declare class FormwerkElement extends HTMLElement {
-    protected _values: FormwerkValue[];
-    protected _options: FormwerkOption[];
-    input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-    connectedCallback(): void;
-    set options(options: FormwerkOption[]);
-    get options(): FormwerkOption[];
-    set values(values: FormwerkValue[]);
-    get values(): FormwerkValue[];
-    set required(required: boolean);
-    set disabled(disabled: boolean);
+  protected _values: FormwerkValue[];
+  protected _options: FormwerkOption[];
+  static observedAttributes: string[];
+  input: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+  attributeChangedCallback(attrName: string, oldValue: string | null, newValue: string | null): void;
+  set options(options: FormwerkOption[]);
+  get options(): FormwerkOption[];
+  set values(values: FormwerkValue[]);
+  get values(): FormwerkValue[];
+  set required(required: boolean);
+  set disabled(disabled: boolean);
 }
@@ -34,9 +37,9 @@ /**
 export declare class FormwerkInput extends FormwerkElement {
-    output: HTMLOutputElement | null;
-    connectedCallback(): void;
-    protected _addToggleButton(): void;
-    protected _addHtml(): void;
-    protected _syncOutput(): void;
-    protected _syncValidity(): void;
-    drawOptions(): void;
+  output: HTMLOutputElement | null;
+  connectedCallback(): void;
+  protected _addToggleButton(): void;
+  protected _addHtml(): void;
+  protected _syncOutput(): void;
+  protected _syncValidity(): void;
+  drawOptions(): void;
 }
@@ -48,4 +51,4 @@ /**
 export declare class FormwerkSelect extends FormwerkInput {
-    protected _addHtml(): void;
-    drawOptions(): void;
+  protected _addHtml(): void;
+  drawOptions(): void;
 }
@@ -57,6 +60,6 @@ /**
 export declare class FormwerkCheckboxes extends FormwerkElement {
-    formGroup: HTMLDivElement | null;
-    connectedCallback(): void;
-    protected _addHtml(): void;
-    drawOptions(): void;
+  formGroup: HTMLDivElement | null;
+  connectedCallback(): void;
+  protected _addHtml(): void;
+  drawOptions(): void;
 }
@@ -68,7 +71,7 @@ /**
 export declare class FormwerkTextarea extends FormwerkInput {
-    connectedCallback(): void;
-    protected _autogrow(): void;
-    protected _addHtml(): void;
+  connectedCallback(): void;
+  protected _autogrow(): void;
+  protected _addHtml(): void;
 }
 export {};
-//# sourceMappingURL=formwerk.d.ts.map
+//# sourceMappingURL=formwerk.d.ts.map

types/formwerk.test.d.ts

@@ -1,1 +0,1 @@
-//# sourceMappingURL=formwerk.test.d.ts.map
+//# sourceMappingURL=formwerk.test.d.ts.map

No alert changes

Improved metrics

Total package byte prevSize

54100

increased by3.14%

Lines of code

962

increased by1.58%

Worsened metrics

Number of lines in readme file

186

decreased by-3.63%

No dependency changes