landaxs 1.0.4 → 1.1.0

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
  1. package/README.md +38 -7
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +34 -5
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,5 @@
1
1
  Landaxs is library for dynamically managing input forms, supporting two-way binding and event handling with clean syntax.
2
2
 
3
- <img src="logo.png" width="200" />
4
3
  ## ✨ Features
5
4
  - Two-way data binding
6
5
  - Event handling
@@ -10,11 +9,7 @@ Landaxs is library for dynamically managing input forms, supporting two-way bind
10
9
  CDN
11
10
 
12
11
  ```html
13
- <<<<<<< HEAD
14
- <script src="https://cdn.jsdelivr.net/npm/landaxs@1.0.2/dist/index.min.js"></script>
15
- =======
16
- <script src="https://cdn.jsdelivr.net/npm/landaxs@1.0.1/dist/index.min.js"></script>]
17
- >>>>>>> 3aae99719c3d4c89c92b32e14b0e6c95c37afc9e
12
+ <script src="https://cdn.jsdelivr.net/npm/landaxs@1.0.1/dist/index.min.js"></script>
18
13
  ```
19
14
 
20
15
  ### Define input name
@@ -49,6 +44,11 @@ define the input tag input name into the input property
49
44
  form_login.input.email
50
45
  form_login.input.gender
51
46
  form_login.input.role
47
+ // to change input
48
+ form_login.input.username = "Darent"
49
+ form_login.input.email = "darent@example.com"
50
+ form_login.input.gender = "male"
51
+ form_login.input.role = "admin"
52
52
  </script>
53
53
  ```
54
54
 
@@ -165,6 +165,35 @@ register a method to the methods property
165
165
     
166
166
  </script>
167
167
  ```
168
+
169
+ ### setStyle & setClas
170
+ Apply styles and classes to Dom references
171
+ > For set style
172
+ ```js
173
+
174
+ const app = new Landaxs()
175
+ app
176
+     .defineInput({ nama: "", email: "" })
177
+     .setRef(["tombol", "kotak", "pesan"])
178
+ // Ubah style elemen
179
+ app.setStyle("kotak", {
180
+     backgroundColor : "#1e1e2e",
181
+     color           : "white",
182
+     padding         : "16px",
183
+     borderRadius    : "8px",
184
+     fontSize        : "14px",
185
+     display         : "flex",
186
+     gap             : "8px"
187
+ })
188
+ ```
189
+ >for set class
190
+ ```js
191
+     app.setClass("pesan", {
192
+         "hidden"    :  true,
193
+         "text-red"  : !true,
194
+         "text-green":  false
195
+     })
196
+ ```
168
197
  ### properties and methods of the Landaxs class
169
198
  ### 📦 Properties (Internal State)
170
199
 
@@ -184,6 +213,8 @@ register a method to the methods property
184
213
  | `setRef` | `string \| string[]` | Registers DOM references using `x_ref` |
185
214
  | `triggerInput` | `string \| string[]`, `callback` | Executes callback when input value changes |
186
215
  | methods | Record<string, Function> | Registers external custom methods into the instance |
216
+ | setStyle | `string \| sRecord<string, any> | Set style to reference DOM |
217
+ | setClass | `string \| Record<string, any> | set Class to reference DOM |
187
218
  >example use
188
219
  ```html
189
220
  <!DOCTYPE html>
@@ -368,4 +399,4 @@ form
368
399
  ✅ Safari 11+  
369
400
  ✅ Edge 79+  
370
401
 
371
- ---
402
+ ---
package/dist/index.d.ts CHANGED
@@ -7,5 +7,7 @@ declare class Landaxs {
7
7
  defineInput(data: Record<string, any>): this;
8
8
  setRef(data: string | Array<string>): this;
9
9
  triggerInput(name_input: string | Array<string>, callback: Function): this;
10
+ setStyle(name_reference: string, style: Record<string, any>): void;
11
+ setClass(name_reference: string, class_name: Record<string, any>): void;
10
12
  methods(function_parameter: Record<string, (...args: any[]) => any>): this;
11
13
  }
package/dist/index.js CHANGED
@@ -55,7 +55,7 @@ class Landaxs {
55
55
  if (ctx.value === this._data[key]) {
56
56
  ctx.checked = true;
57
57
  }
58
- ctx.addEventListener("change", (e) => {
58
+ ctx.addEventListener("input", (e) => {
59
59
  let target = e.currentTarget;
60
60
  this._data[key] = target.value;
61
61
  });
@@ -134,12 +134,25 @@ class Landaxs {
134
134
  return this;
135
135
  }
136
136
  setRef(data) {
137
+ let querySelectorLength = 1;
137
138
  if (typeof data === "string") {
138
- this.ref[data] = document.querySelectorAll(`[x_ref='${data}']`)[0];
139
+ let dom_reference = document.querySelectorAll(`[x_ref='${data}']`);
140
+ if (dom_reference.length > querySelectorLength) {
141
+ this.ref[data] = dom_reference;
142
+ }
143
+ else {
144
+ this.ref[data] = dom_reference[0];
145
+ }
139
146
  }
140
147
  else {
141
148
  data.forEach(ctx => {
142
- this.ref[ctx] = document.querySelectorAll(`[x_ref='${ctx}']`)[0];
149
+ let dom_reference = document.querySelectorAll(`[x_ref='${ctx}']`);
150
+ if (dom_reference.length > querySelectorLength) {
151
+ this.ref[ctx] = dom_reference;
152
+ }
153
+ else {
154
+ this.ref[ctx] = dom_reference[0];
155
+ }
143
156
  });
144
157
  }
145
158
  return this;
@@ -149,12 +162,12 @@ class Landaxs {
149
162
  document.querySelectorAll(`[x_input='${name_input}']`).forEach(ctx => {
150
163
  if (ctx.type === "file") {
151
164
  ctx.addEventListener("change", (e) => {
152
- callback(this._data);
165
+ callback(this.input);
153
166
  });
154
167
  }
155
168
  else {
156
169
  ctx.addEventListener("input", (e) => {
157
- callback(this._data);
170
+ callback(this.input);
158
171
  });
159
172
  }
160
173
  });
@@ -177,6 +190,22 @@ class Landaxs {
177
190
  }
178
191
  return this;
179
192
  }
193
+ setStyle(name_reference, style) {
194
+ for (let [key, value] of Object.entries(style)) {
195
+ this.ref[name_reference].style[key] = value;
196
+ }
197
+ }
198
+ setClass(name_reference, class_name) {
199
+ for (let [key, value] of Object.entries(class_name)) {
200
+ let MATCH_VALUE = true;
201
+ if (value === MATCH_VALUE) {
202
+ this.ref[name_reference].classList.add(key);
203
+ }
204
+ else {
205
+ this.ref[name_reference].classList.remove(key);
206
+ }
207
+ }
208
+ }
180
209
  methods(function_parameter) {
181
210
  this.method = { ...this.method, ...function_parameter };
182
211
  return this;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "landaxs",
3
- "version": "1.0.4",
3
+ "version": "1.1.0",
4
4
  "description": "Landaxs is a lightweight library for dynamic input binding with two-way data flow.",
5
5
  "keywords": ["forms", "binding", "javascript", "typescript"],
6
6
  "homepage": "https://github.com/Rakhmadi/Landaxs#readme",