npm - landaxs - Versions diffs - 1.0.5 → 1.1.1 - Mend

landaxs 1.0.5 → 1.1.1

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

package/README.md CHANGED Viewed

@@ -1,6 +1,5 @@
 Landaxs is library for dynamically managing input forms, supporting two-way binding and event handling with clean syntax.
-<img src="logo.png" width="200" />
 ## ✨ Features
 - Two-way data binding
 - Event handling
@@ -10,7 +9,7 @@ Landaxs is library for dynamically managing input forms, supporting two-way bind
 CDN
 ```html
-<script src="https://cdn.jsdelivr.net/npm/landaxs@1.0.2/dist/index.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/landaxs@1.1.0/dist/index.min.js"></script>
 ```
 ### Define input name
@@ -45,6 +44,11 @@ define the input tag input name into the input property
 	form_login.input.email
 	form_login.input.gender
 	form_login.input.role
+// to change input
+	form_login.input.username = "Darent"
+	form_login.input.email = "darent@example.com"
+	form_login.input.gender = "male"
+	form_login.input.role = "admin"
 </script>
 ```
@@ -161,6 +165,35 @@ register a method to the methods property
 </script>
 ```
+### setStyle & setClas
+Apply styles and classes to Dom references
+> For set style
+```js
+const app = new Landaxs()
+app
+    .defineInput({ nama: "", email: "" })
+    .setRef(["tombol", "kotak", "pesan"])
+// Ubah style elemen
+app.setStyle("kotak", {
+    backgroundColor : "#1e1e2e",
+    color           : "white",
+    padding         : "16px",
+    borderRadius    : "8px",
+    fontSize        : "14px",
+    display         : "flex",
+    gap             : "8px"
+})
+```
+>for set class
+```js
+    app.setClass("pesan", {
+        "hidden"    :  true,
+        "text-red"  : !true,
+        "text-green":  false
+    })
+```
 ### properties and methods of the Landaxs class
 ### 📦 Properties (Internal State)
@@ -180,6 +213,8 @@ register a method to the methods property
 | `setRef`       | `string \| string[]`             | Registers DOM references using `x_ref`                       |
 | `triggerInput` | `string \| string[]`, `callback` | Executes callback when input value changes                   |
 | methods        | Record<string, Function>         | Registers external custom methods into the instance          |
+| setStyle       | `string \| sRecord<string, any>  | Set style to reference DOM                                   |
+| setClass       | `string \| Record<string, any>   | set Class to reference DOM                                   |
 >example use
 ```html
 <!DOCTYPE html>
@@ -189,7 +224,7 @@ register a method to the methods property
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="https://cdn.jsdelivr.net/npm/landaxs@1.0.1/dist/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/landaxs@1.1.0/dist/index.min.js"></script>
 <style>
     .form-control {
         display: flex;
@@ -364,4 +399,4 @@ form
 ✅ Safari 11+
 ✅ Edge 79+
----
+---

package/dist/index.d.ts CHANGED Viewed

@@ -7,5 +7,7 @@ declare class Landaxs {
     defineInput(data: Record<string, any>): this;
     setRef(data: string | Array<string>): this;
     triggerInput(name_input: string | Array<string>, callback: Function): this;
+    setStyle(name_reference: string, style: Record<string, any>): void;
+    setClass(name_reference: string, class_name: Record<string, any>): void;
     methods(function_parameter: Record<string, (...args: any[]) => any>): this;
 }

package/dist/index.js CHANGED Viewed

@@ -55,7 +55,7 @@ class Landaxs {
                         if (ctx.value === this._data[key]) {
                             ctx.checked = true;
                         }
-                        ctx.addEventListener("change", (e) => {
+                        ctx.addEventListener("input", (e) => {
                             let target = e.currentTarget;
                             this._data[key] = target.value;
                         });
@@ -134,12 +134,25 @@ class Landaxs {
         return this;
     }
     setRef(data) {
+        let querySelectorLength = 1;
         if (typeof data === "string") {
-            this.ref[data] = document.querySelectorAll(`[x_ref='${data}']`)[0];
+            let dom_reference = document.querySelectorAll(`[x_ref='${data}']`);
+            if (dom_reference.length > querySelectorLength) {
+                this.ref[data] = dom_reference;
+            }
+            else {
+                this.ref[data] = dom_reference[0];
+            }
         }
         else {
             data.forEach(ctx => {
-                this.ref[ctx] = document.querySelectorAll(`[x_ref='${ctx}']`)[0];
+                let dom_reference = document.querySelectorAll(`[x_ref='${ctx}']`);
+                if (dom_reference.length > querySelectorLength) {
+                    this.ref[ctx] = dom_reference;
+                }
+                else {
+                    this.ref[ctx] = dom_reference[0];
+                }
             });
         }
         return this;
@@ -149,12 +162,12 @@ class Landaxs {
             document.querySelectorAll(`[x_input='${name_input}']`).forEach(ctx => {
                 if (ctx.type === "file") {
                     ctx.addEventListener("change", (e) => {
-                        callback(this._data);
+                        callback(this.input);
                     });
                 }
                 else {
                     ctx.addEventListener("input", (e) => {
-                        callback(this._data);
+                        callback(this.input);
                     });
                 }
             });
@@ -177,6 +190,22 @@ class Landaxs {
         }
         return this;
     }
+    setStyle(name_reference, style) {
+        for (let [key, value] of Object.entries(style)) {
+            this.ref[name_reference].style[key] = value;
+        }
+    }
+    setClass(name_reference, class_name) {
+        for (let [key, value] of Object.entries(class_name)) {
+            let MATCH_VALUE = true;
+            if (value === MATCH_VALUE) {
+                this.ref[name_reference].classList.add(key);
+            }
+            else {
+                this.ref[name_reference].classList.remove(key);
+            }
+        }
+    }
     methods(function_parameter) {
         this.method = { ...this.method, ...function_parameter };
         return this;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "landaxs",
-  "version": "1.0.5",
+  "version": "1.1.1",
   "description": "Landaxs is a lightweight library for dynamic input binding with two-way data flow.",
   "keywords": ["forms", "binding", "javascript", "typescript"],
   "homepage": "https://github.com/Rakhmadi/Landaxs#readme",