landaxs 1.1.1 → 1.1.4
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.
- package/README.md +5 -3
- package/dist/index.js +40 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
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="250"/>
|
|
4
|
+
|
|
3
5
|
## ✨ Features
|
|
4
6
|
- Two-way data binding
|
|
5
7
|
- Event handling
|
|
@@ -9,7 +11,7 @@ Landaxs is library for dynamically managing input forms, supporting two-way bind
|
|
|
9
11
|
CDN
|
|
10
12
|
|
|
11
13
|
```html
|
|
12
|
-
<script src="https://cdn.jsdelivr.net/npm/landaxs@
|
|
14
|
+
<script src="https://cdn.jsdelivr.net/npm/landaxs@latest/dist/index.min.js"></script>
|
|
13
15
|
```
|
|
14
16
|
|
|
15
17
|
### Define input name
|
|
@@ -224,7 +226,7 @@ app.setStyle("kotak", {
|
|
|
224
226
|
<meta charset="UTF-8">
|
|
225
227
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
226
228
|
<title>Document</title>
|
|
227
|
-
<script src="https://cdn.jsdelivr.net/npm/landaxs@
|
|
229
|
+
<script src="https://cdn.jsdelivr.net/npm/landaxs@latest/dist/index.min.js"></script>
|
|
228
230
|
<style>
|
|
229
231
|
.form-control {
|
|
230
232
|
display: flex;
|
|
@@ -399,4 +401,4 @@ form
|
|
|
399
401
|
✅ Safari 11+
|
|
400
402
|
✅ Edge 79+
|
|
401
403
|
|
|
402
|
-
---
|
|
404
|
+
---
|
package/dist/index.js
CHANGED
|
@@ -43,6 +43,7 @@ class Landaxs {
|
|
|
43
43
|
});
|
|
44
44
|
let input_details = [];
|
|
45
45
|
for (let [key, value] of Object.entries(this._data)) {
|
|
46
|
+
console.log(key);
|
|
46
47
|
document.querySelectorAll(`[x_input='${key}']`).forEach((ctx) => {
|
|
47
48
|
if (ctx instanceof HTMLInputElement) {
|
|
48
49
|
input_details.push({
|
|
@@ -125,6 +126,45 @@ class Landaxs {
|
|
|
125
126
|
}
|
|
126
127
|
});
|
|
127
128
|
}
|
|
129
|
+
else if (ctx instanceof HTMLSelectElement) {
|
|
130
|
+
input_details.push({
|
|
131
|
+
name_input: key,
|
|
132
|
+
type_input: "select",
|
|
133
|
+
type_variable: typeof this._data[key],
|
|
134
|
+
});
|
|
135
|
+
ctx.setAttribute("name", key);
|
|
136
|
+
ctx.value = this._data[key];
|
|
137
|
+
ctx.addEventListener("input", (e) => {
|
|
138
|
+
let target = e.currentTarget;
|
|
139
|
+
this._data[key] = target.value;
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
else if (ctx instanceof HTMLTextAreaElement) {
|
|
143
|
+
input_details.push({
|
|
144
|
+
name_input: key,
|
|
145
|
+
type_input: "textarea",
|
|
146
|
+
type_variable: typeof this._data[key],
|
|
147
|
+
});
|
|
148
|
+
ctx.setAttribute("name", key);
|
|
149
|
+
ctx.value = this._data[key];
|
|
150
|
+
ctx.addEventListener("input", (e) => {
|
|
151
|
+
let target = e.currentTarget;
|
|
152
|
+
this._data[key] = target.value;
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
input_details.push({
|
|
157
|
+
name_input: key,
|
|
158
|
+
type_input: "any",
|
|
159
|
+
type_variable: typeof this._data[key],
|
|
160
|
+
});
|
|
161
|
+
ctx.setAttribute("name", key);
|
|
162
|
+
ctx.value = this._data[key];
|
|
163
|
+
ctx.addEventListener("input", (e) => {
|
|
164
|
+
let target = e.currentTarget;
|
|
165
|
+
this._data[key] = target.value;
|
|
166
|
+
});
|
|
167
|
+
}
|
|
128
168
|
});
|
|
129
169
|
}
|
|
130
170
|
function removeDuplicateByKey(arr, key) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "landaxs",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
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",
|