@cocreate/elements 1.37.0 → 1.38.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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,32 @@
1
+ # [1.38.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.37.1...v1.38.0) (2024-11-04)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * pretier.config.js and file formating ([644eec6](https://github.com/CoCreate-app/CoCreate-elements/commit/644eec6bb63cd484b871cb203a45435654e23da9))
7
+
8
+
9
+ ### Features
10
+
11
+ * add prettier.config.js and format files ([f14df0e](https://github.com/CoCreate-app/CoCreate-elements/commit/f14df0e3d9630a3b20eeeb65574c2d6af5902a85))
12
+ * add prettier.config.js and format files ([e24974a](https://github.com/CoCreate-app/CoCreate-elements/commit/e24974a35c72c384f10d9edc36d8d89390ba1235))
13
+
14
+ ## [1.37.1](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.37.0...v1.37.1) (2024-11-02)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * checkValue(key) prior to excutuing element.setValue() ([8234c96](https://github.com/CoCreate-app/CoCreate-elements/commit/8234c96ff445b7a9bbc4d7171c07ae1b189fb9ee))
20
+ * element.getValue() ([7009f70](https://github.com/CoCreate-app/CoCreate-elements/commit/7009f70d7a18d0e79100da8c25788db1a1c4c2e2))
21
+ * handling contenteditable iframes ([11b6819](https://github.com/CoCreate-app/CoCreate-elements/commit/11b6819089e2b3ab2bbbcb47aa4f6134a036ad92))
22
+ * if form has attribute object set as empty on reset ([29c1b6d](https://github.com/CoCreate-app/CoCreate-elements/commit/29c1b6d469afbaecd8e760288961726a2d9cd49b))
23
+ * init if observer ol attribute value not the same as new ([456913c](https://github.com/CoCreate-app/CoCreate-elements/commit/456913c6d4a13279aad08a40732efd91e272add0))
24
+ * observer taget has been renamed to selector ([239974c](https://github.com/CoCreate-app/CoCreate-elements/commit/239974ca9316607f28ce9fa1440b18b4e60735a0))
25
+ * removed comsole.log ([d0b6fe3](https://github.com/CoCreate-app/CoCreate-elements/commit/d0b6fe314ab9532df479e955d243d3ef242bbc89))
26
+ * removed dead code ([3929b76](https://github.com/CoCreate-app/CoCreate-elements/commit/3929b76d6a7d5bd71b5973f3ff4b2a8061954d7a))
27
+ * removed test console.log ([4fea18d](https://github.com/CoCreate-app/CoCreate-elements/commit/4fea18d4f32c604b2666d92a384dce6bfe53dfc7))
28
+ * resetType support ([2ce141e](https://github.com/CoCreate-app/CoCreate-elements/commit/2ce141e832f97c8df7a68a7bdfc5206d98cf66da))
29
+
1
30
  # [1.37.0](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.36.2...v1.37.0) (2024-09-21)
2
31
 
3
32
 
package/docs/index.html CHANGED
@@ -1,342 +1,344 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1" />
7
- <meta
8
- name="description"
9
- content="Fetch content into any html element by using attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags" />
10
- <meta
11
- name="keywords"
12
- content="helper classes, utility classes, css framework, css library, inline style classes" />
13
- <meta name="robots" content="index,follow" />
14
- <meta
15
- property="og:image"
16
- content="https://cdn.cocreate.app/docs/elements.png" />
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <meta
8
+ name="description"
9
+ content="Fetch content into any html element by using attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags"
10
+ />
11
+ <meta
12
+ name="keywords"
13
+ content="helper classes, utility classes, css framework, css library, inline style classes"
14
+ />
15
+ <meta name="robots" content="index,follow" />
16
+ <meta
17
+ property="og:image"
18
+ content="https://cdn.cocreate.app/docs/elements.png"
19
+ />
17
20
 
18
- <title>CoCreate-elements Documentation | CoCreateJS</title>
21
+ <title>CoCreate-elements Documentation | CoCreateJS</title>
19
22
 
20
- <!-- CoCreate Favicon -->
21
- <link
22
- rel="icon"
23
- type="image/png"
24
- sizes="32x32"
25
- href="https://cocreate.app/images/favicon.ico" />
26
- <link
27
- rel="stylesheet"
28
- href="../index.css"
29
- array="files"
30
- object="60888216117c640e7596303f"
31
- key="src"
32
- type="text/css"
33
- save="true" />
34
- <link rel="manifest" href="/manifest.webmanifest" />
35
- </head>
23
+ <!-- CoCreate Favicon -->
24
+ <link
25
+ rel="icon"
26
+ type="image/png"
27
+ sizes="32x32"
28
+ href="https://cocreate.app/images/favicon.ico"
29
+ />
30
+ <link
31
+ rel="stylesheet"
32
+ href="../index.css"
33
+ array="files"
34
+ object="60888216117c640e7596303f"
35
+ key="src"
36
+ type="text/css"
37
+ save="true"
38
+ />
39
+ <link rel="manifest" href="/manifest.webmanifest" />
40
+ </head>
36
41
 
37
- <body>
38
- <!-- Navbar -->
39
- <nav
40
- class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
41
- content_id="content"
42
- scroll="sticky-nav,"
43
- scroll-up="5"
44
- scroll-down="5"
45
- path="../"
46
- src="../components/navbar.html"></nav>
47
- <sidenav
48
- id="menuL"
49
- class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
50
- resizable
51
- resize-selector="[content_id='content']"
52
- resize-property="margin-left"
53
- resize-value="width">
54
- <menu
55
- array="files"
56
- object="603717b07de7fb350ae9fec8"
57
- key="src"></menu>
58
- <div resize="right"></div>
59
- </sidenav>
60
- <main
61
- class="padding-top:15px padding:15px@lg@xl"
62
- content_id="content"
63
- id="cocreate-elements">
64
- <div
65
- class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
66
- <div class="display:flex align-items:center">
67
- <h2>CoCreate-elements</h2>
68
- </div>
69
- <div
70
- class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
71
- <div
72
- class="display:flex align-items:center transition:0.3s padding-left:10px"
73
- share-network="true"
74
- share-text="Fetch content into any html element by using attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags"
75
- share-title="CoCreate elements"
76
- share-height="600"
77
- share-width="700"
78
- share-media="https://cdn.cocreate.app/docs/elements.png"
79
- hover="display:block!important"
80
- hover-selector=".social-networks">
81
- <div class="display:none social-networks">
82
- <a
83
- class="margin-right:15px"
84
- share-network="twitter"
85
- title="Share on twitter"
86
- ><i src="/assets/svg/twitter.svg"></i
87
- ></a>
88
- <a
89
- class="margin-right:15px"
90
- share-network="facebook"
91
- title="Share on Facebook"
92
- ><i src="/assets/svg/facebook.svg"></i
93
- ></a>
94
- <a
95
- class="margin-right:15px"
96
- share-network="instagram"
97
- title="Share on instagram"
98
- ><i src="/assets/svg/instagram.svg"></i
99
- ></a>
100
- </div>
101
- <a
102
- class="margin-right:15px"
103
- share-network="share"
104
- title="Share on share"
105
- ><i src="/assets/svg/share-alt.svg"></i
106
- ></a>
107
- </div>
108
- <a
109
- href="https://github.com/CoCreate-app/CoCreate-elements"
110
- target="_blank"
111
- class="margin-right:15px"
112
- ><i src="/assets/svg/github.svg"></i
113
- ></a>
114
- </div>
42
+ <body>
43
+ <!-- Navbar -->
44
+ <nav
45
+ class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
46
+ content_id="content"
47
+ scroll="sticky-nav,"
48
+ scroll-up="5"
49
+ scroll-down="5"
50
+ path="../"
51
+ src="../components/navbar.html"
52
+ ></nav>
53
+ <sidenav
54
+ id="menuL"
55
+ class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
56
+ resizable
57
+ resize-selector="[content_id='content']"
58
+ resize-property="margin-left"
59
+ resize-value="width"
60
+ >
61
+ <menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
62
+ <div resize="right"></div>
63
+ </sidenav>
64
+ <main
65
+ class="padding-top:15px padding:15px@lg@xl"
66
+ content_id="content"
67
+ id="cocreate-elements"
68
+ >
69
+ <div
70
+ class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px"
71
+ >
72
+ <div class="display:flex align-items:center">
73
+ <h2>CoCreate-elements</h2>
74
+ </div>
75
+ <div
76
+ class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white"
77
+ >
78
+ <div
79
+ class="display:flex align-items:center transition:0.3s padding-left:10px"
80
+ share-network="true"
81
+ share-text="Fetch content into any html element by using attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags"
82
+ share-title="CoCreate elements"
83
+ share-height="600"
84
+ share-width="700"
85
+ share-media="https://cdn.cocreate.app/docs/elements.png"
86
+ hover="display:block!important"
87
+ hover-selector=".social-networks"
88
+ >
89
+ <div class="display:none social-networks">
90
+ <a
91
+ class="margin-right:15px"
92
+ share-network="twitter"
93
+ title="Share on twitter"
94
+ ><i src="/assets/svg/twitter.svg"></i
95
+ ></a>
96
+ <a
97
+ class="margin-right:15px"
98
+ share-network="facebook"
99
+ title="Share on Facebook"
100
+ ><i src="/assets/svg/facebook.svg"></i
101
+ ></a>
102
+ <a
103
+ class="margin-right:15px"
104
+ share-network="instagram"
105
+ title="Share on instagram"
106
+ ><i src="/assets/svg/instagram.svg"></i
107
+ ></a>
115
108
  </div>
116
- <h1
117
- class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
118
- Fetch content into any html element by using html5 attributes to
119
- query data stored in CoCreate headless CMS. If data is changed
120
- it will instantly reflect in html tags as changes are
121
- broadcasted in realtime
122
- </h1>
123
- <div id="elements-section" class="display:flex flex-wrap:wrap">
124
- <div
125
- class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
126
- <div
127
- id="elements-install"
128
- class="border-bottom:1px_solid_lightgrey"
129
- scroll
130
- scroll-intersect="color:dodgerblue"
131
- scroll-selector="#elements-install-section">
132
- <span
133
- class="display:flex align-items:center width:fit-content"
134
- hover="display:block!important"
135
- hover-selector="[href='#elements-install']">
136
- <h2 class="padding:5px_0px">Install</h2>
137
- <a
138
- class="margin-left:10px display:none"
139
- href="#elements-install"
140
- ><i src="/assets/svg/link.svg"></i
141
- ></a>
142
- </span>
143
- </div>
144
- <pre><code class="language-bash">npm i @cocreate/elements</code></pre>
145
- <p class="padding:10px_0px line-height:1.5">
146
- Or you can use cdn link:
147
- </p>
148
- <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/elements/latest/CoCreate-elements.min.js&lt;/script&gt;</code></pre>
109
+ <a
110
+ class="margin-right:15px"
111
+ share-network="share"
112
+ title="Share on share"
113
+ ><i src="/assets/svg/share-alt.svg"></i
114
+ ></a>
115
+ </div>
116
+ <a
117
+ href="https://github.com/CoCreate-app/CoCreate-elements"
118
+ target="_blank"
119
+ class="margin-right:15px"
120
+ ><i src="/assets/svg/github.svg"></i
121
+ ></a>
122
+ </div>
123
+ </div>
124
+ <h1
125
+ class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100"
126
+ >
127
+ Fetch content into any html element by using html5 attributes to query
128
+ data stored in CoCreate headless CMS. If data is changed it will
129
+ instantly reflect in html tags as changes are broadcasted in realtime
130
+ </h1>
131
+ <div id="elements-section" class="display:flex flex-wrap:wrap">
132
+ <div
133
+ class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px"
134
+ >
135
+ <div
136
+ id="elements-install"
137
+ class="border-bottom:1px_solid_lightgrey"
138
+ scroll
139
+ scroll-intersect="color:dodgerblue"
140
+ scroll-selector="#elements-install-section"
141
+ >
142
+ <span
143
+ class="display:flex align-items:center width:fit-content"
144
+ hover="display:block!important"
145
+ hover-selector="[href='#elements-install']"
146
+ >
147
+ <h2 class="padding:5px_0px">Install</h2>
148
+ <a class="margin-left:10px display:none" href="#elements-install"
149
+ ><i src="/assets/svg/link.svg"></i
150
+ ></a>
151
+ </span>
152
+ </div>
153
+ <pre><code class="language-bash">npm i @cocreate/elements</code></pre>
154
+ <p class="padding:10px_0px line-height:1.5">
155
+ Or you can use cdn link:
156
+ </p>
157
+ <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/elements/latest/CoCreate-elements.min.js&lt;/script&gt;</code></pre>
149
158
 
150
- <div
151
- id="elements-usage"
152
- class="margin-top:80px border-bottom:1px_solid_lightgrey"
153
- scroll
154
- scroll-intersect="color:dodgerblue"
155
- scroll-selector="#elements-usage-section">
156
- <span
157
- class="display:flex align-items:center width:fit-content"
158
- hover="display:block!important"
159
- hover-selector="[href='#elements-usage']">
160
- <h2 class="padding:5px_0px">Usage</h2>
161
- <a
162
- class="margin-left:10px display:none"
163
- href="#elements-usage"
164
- ><i src="/assets/svg/link.svg"></i
165
- ></a>
166
- </span>
167
- </div>
168
- <div class="">
169
- <p class="padding:10px_0px line-height:1.5">
170
- This is elements usage
171
- </p>
159
+ <div
160
+ id="elements-usage"
161
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
162
+ scroll
163
+ scroll-intersect="color:dodgerblue"
164
+ scroll-selector="#elements-usage-section"
165
+ >
166
+ <span
167
+ class="display:flex align-items:center width:fit-content"
168
+ hover="display:block!important"
169
+ hover-selector="[href='#elements-usage']"
170
+ >
171
+ <h2 class="padding:5px_0px">Usage</h2>
172
+ <a class="margin-left:10px display:none" href="#elements-usage"
173
+ ><i src="/assets/svg/link.svg"></i
174
+ ></a>
175
+ </span>
176
+ </div>
177
+ <div class="">
178
+ <p class="padding:10px_0px line-height:1.5">
179
+ This is elements usage
180
+ </p>
172
181
 
173
- <div class="flex-grow:1 min-width:300px width:100%">
174
- <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
175
- </div>
176
- <p class="padding:10px_0px line-height:1.5">
177
- This is elements usage
178
- </p>
179
- <p class="padding:10px_0px line-height:1.5">
180
- This is elements usage
181
- </p>
182
- </div>
183
- <div
184
- id="elements-attributes"
185
- class="margin-top:80px border-bottom:1px_solid_lightgrey"
186
- scroll
187
- scroll-intersect="color:dodgerblue"
188
- scroll-selector="#elements-attributes-section">
189
- <span
190
- class="display:flex align-items:center width:fit-content"
191
- hover="display:block!important"
192
- hover-selector="[href='#elements-attributes']">
193
- <h2 class="padding:5px_0px">Attributes</h2>
194
- <a
195
- class="margin-left:10px display:none"
196
- href="#elements-attributes"
197
- ><i src="/assets/svg/link.svg"></i
198
- ></a>
199
- </span>
200
- </div>
201
- <ul class="list-style-type:none">
202
- <li
203
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
204
- <h4>
205
- <span>elements</span>
206
- <span class="cocreate-badge success"
207
- >string</span
208
- >
209
- <span class="cocreate-badge warning"
210
- >optional</span
211
- >
212
- </h4>
213
- <p>elements-attribute</p>
214
- </li>
215
- <li
216
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
217
- <h4>
218
- <span>elements</span>
219
- <span class="cocreate-badge success"
220
- >string</span
221
- >
222
- <span class="cocreate-badge warning"
223
- >optional</span
224
- >
225
- </h4>
226
- <p>elements-attribute</p>
227
- </li>
228
- </ul>
229
- </div>
182
+ <div class="flex-grow:1 min-width:300px width:100%">
183
+ <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
184
+ </div>
185
+ <p class="padding:10px_0px line-height:1.5">
186
+ This is elements usage
187
+ </p>
188
+ <p class="padding:10px_0px line-height:1.5">
189
+ This is elements usage
190
+ </p>
191
+ </div>
192
+ <div
193
+ id="elements-attributes"
194
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
195
+ scroll
196
+ scroll-intersect="color:dodgerblue"
197
+ scroll-selector="#elements-attributes-section"
198
+ >
199
+ <span
200
+ class="display:flex align-items:center width:fit-content"
201
+ hover="display:block!important"
202
+ hover-selector="[href='#elements-attributes']"
203
+ >
204
+ <h2 class="padding:5px_0px">Attributes</h2>
205
+ <a
206
+ class="margin-left:10px display:none"
207
+ href="#elements-attributes"
208
+ ><i src="/assets/svg/link.svg"></i
209
+ ></a>
210
+ </span>
211
+ </div>
212
+ <ul class="list-style-type:none">
213
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
214
+ <h4>
215
+ <span>elements</span>
216
+ <span class="cocreate-badge success">string</span>
217
+ <span class="cocreate-badge warning">optional</span>
218
+ </h4>
219
+ <p>elements-attribute</p>
220
+ </li>
221
+ <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
222
+ <h4>
223
+ <span>elements</span>
224
+ <span class="cocreate-badge success">string</span>
225
+ <span class="cocreate-badge warning">optional</span>
226
+ </h4>
227
+ <p>elements-attribute</p>
228
+ </li>
229
+ </ul>
230
+ </div>
230
231
 
231
- <div
232
- class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
233
- <!-- SandBox -->
234
- <div
235
- id="elements-demo"
236
- class="border-bottom:1px_solid_lightgrey"
237
- scroll
238
- scroll-intersect="color:dodgerblue"
239
- scroll-selector="#elements-demo-section">
240
- <span
241
- class="display:flex align-items:center width:fit-content"
242
- hover="display:block!important"
243
- hover-selector="[href='#elements-demo']">
244
- <h2 class="padding:5px_0px">Demo</h2>
245
- <a
246
- class="margin-left:10px display:none"
247
- href="#elements-demo"
248
- ><i src="/assets/svg/link.svg"></i
249
- ></a>
250
- </span>
251
- </div>
252
- <div
253
- class="position:sticky top:0 padding:15px_0px height:100vh">
254
- <!-- SandBox -->
255
- <div
256
- class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
257
- id="playground">
258
- <div
259
- id="demo-code"
260
- resizable
261
- class="position:relative height:50%">
262
- <textarea
263
- type="code"
264
- lang="html"
265
- array="demos"
266
- object=""
267
- key="demo"
268
- save="false"
269
- id="demo"
270
- class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
271
- <div
272
- resize="bottom"
273
- class="background:lightgrey"></div>
274
- </div>
232
+ <div
233
+ class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey"
234
+ >
235
+ <!-- SandBox -->
236
+ <div
237
+ id="elements-demo"
238
+ class="border-bottom:1px_solid_lightgrey"
239
+ scroll
240
+ scroll-intersect="color:dodgerblue"
241
+ scroll-selector="#elements-demo-section"
242
+ >
243
+ <span
244
+ class="display:flex align-items:center width:fit-content"
245
+ hover="display:block!important"
246
+ hover-selector="[href='#elements-demo']"
247
+ >
248
+ <h2 class="padding:5px_0px">Demo</h2>
249
+ <a class="margin-left:10px display:none" href="#elements-demo"
250
+ ><i src="/assets/svg/link.svg"></i
251
+ ></a>
252
+ </span>
253
+ </div>
254
+ <div class="position:sticky top:0 padding:15px_0px height:100vh">
255
+ <!-- SandBox -->
256
+ <div
257
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
258
+ id="playground"
259
+ >
260
+ <div
261
+ id="demo-code"
262
+ resizable
263
+ class="position:relative height:50%"
264
+ >
265
+ <textarea
266
+ type="code"
267
+ lang="html"
268
+ array="demos"
269
+ object=""
270
+ key="demo"
271
+ save="false"
272
+ id="demo"
273
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"
274
+ ></textarea>
275
+ <div resize="bottom" class="background:lightgrey"></div>
276
+ </div>
275
277
 
276
- <div
277
- id="demo-preview"
278
- class="position:relative overflow:auto background-color:white">
279
- <div class="demopreview padding:20px"></div>
280
- </div>
278
+ <div
279
+ id="demo-preview"
280
+ class="position:relative overflow:auto background-color:white"
281
+ >
282
+ <div class="demopreview padding:20px"></div>
283
+ </div>
281
284
 
282
- <div
283
- class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
284
- <a
285
- class="margin-right:10px"
286
- id="eye"
287
- show="#eye-slash"
288
- hide="#eye, #demo-preview"
289
- toggle="code-height"
290
- toggle-selector="#demo-code"
291
- ><i
292
- class="height:18px"
293
- src="/assets/svg/eye.svg"></i
294
- ></a>
295
- <a
296
- class="margin-right:10px"
297
- hidden
298
- id="eye-slash"
299
- show="#eye, #demo-preview"
300
- hide="#eye-slash"
301
- toggle="code-height"
302
- toggle-selector="#demo-code"
303
- ><i src="/assets/svg/eye-slash.svg"></i
304
- ></a>
305
- <a
306
- class="margin-right:10px"
307
- id="code"
308
- show="#code-slash"
309
- hide="#code, #demo-code"
310
- ><i src="/assets/svg/code.svg"></i
311
- ></a>
312
- <a
313
- class="margin-right:10px"
314
- hidden
315
- id="code-slash"
316
- show="#code, #demo-code"
317
- hide="#code-slash"
318
- ><i
319
- class="height:18px"
320
- src="/assets/svg/code.svg"></i
321
- ></a>
322
- <a
323
- class="margin-right:5px"
324
- fullscreen
325
- fullscreen-selector="#playground"></a>
326
- </div>
327
- </div>
328
- <!-- End SandBox -->
329
- </div>
330
- </div>
285
+ <div
286
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6"
287
+ >
288
+ <a
289
+ class="margin-right:10px"
290
+ id="eye"
291
+ show="#eye-slash"
292
+ hide="#eye, #demo-preview"
293
+ toggle="code-height"
294
+ toggle-selector="#demo-code"
295
+ ><i class="height:18px" src="/assets/svg/eye.svg"></i
296
+ ></a>
297
+ <a
298
+ class="margin-right:10px"
299
+ hidden
300
+ id="eye-slash"
301
+ show="#eye, #demo-preview"
302
+ hide="#eye-slash"
303
+ toggle="code-height"
304
+ toggle-selector="#demo-code"
305
+ ><i src="/assets/svg/eye-slash.svg"></i
306
+ ></a>
307
+ <a
308
+ class="margin-right:10px"
309
+ id="code"
310
+ show="#code-slash"
311
+ hide="#code, #demo-code"
312
+ ><i src="/assets/svg/code.svg"></i
313
+ ></a>
314
+ <a
315
+ class="margin-right:10px"
316
+ hidden
317
+ id="code-slash"
318
+ show="#code, #demo-code"
319
+ hide="#code-slash"
320
+ ><i class="height:18px" src="/assets/svg/code.svg"></i
321
+ ></a>
322
+ <a
323
+ class="margin-right:5px"
324
+ fullscreen
325
+ fullscreen-selector="#playground"
326
+ ></a>
327
+ </div>
331
328
  </div>
332
- <button
333
- href="https://github.com/CoCreate-app/CoCreate-elements/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
334
- target="_blank"
335
- class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
336
- <i class="height:20px" src="../assets/svg/pencil-alt.svg"></i>
337
- </button>
338
- </main>
329
+ <!-- End SandBox -->
330
+ </div>
331
+ </div>
332
+ </div>
333
+ <button
334
+ href="https://github.com/CoCreate-app/CoCreate-elements/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
335
+ target="_blank"
336
+ class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)"
337
+ >
338
+ <i src="../assets/svg/pencil-alt.svg"></i>
339
+ </button>
340
+ </main>
339
341
 
340
- <script src="https://CoCreate.app/dist/CoCreate.js"></script>
341
- </body>
342
+ <script src="https://CoCreate.app/dist/CoCreate.js"></script>
343
+ </body>
342
344
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/elements",
3
- "version": "1.37.0",
3
+ "version": "1.38.0",
4
4
  "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
5
5
  "keywords": [
6
6
  "elements",
@@ -0,0 +1,16 @@
1
+ module.exports = {
2
+ tabWidth: 4,
3
+ semi: true,
4
+ trailingComma: "none",
5
+ bracketSameLine: true,
6
+ useTabs: true,
7
+ overrides: [
8
+ {
9
+ files: ["*.json", "*.yml", "*.yaml"],
10
+ options: {
11
+ tabWidth: 2,
12
+ useTabs: false
13
+ },
14
+ }
15
+ ],
16
+ };
package/src/fetchSrc.js CHANGED
@@ -208,7 +208,7 @@ function base64ToArrayBuffer(base64) {
208
208
  observer.init({
209
209
  name: 'CoCreateSrc',
210
210
  observe: ['addedNodes'],
211
- target: selector,
211
+ selector: selector,
212
212
  callback: function (mutation) {
213
213
  init(mutation.target);
214
214
  }
@@ -218,9 +218,10 @@ observer.init({
218
218
  name: 'CoCreateSrcAttributes',
219
219
  observe: ['attributes'],
220
220
  attributeName: ['src'],
221
- target: selector,
221
+ selector: selector,
222
222
  callback: function (mutation) {
223
- init(mutation.target);
223
+ if (mutation.oldValue !== mutation.target.getAttribute(mutation.attributeName))
224
+ init(mutation.target);
224
225
  }
225
226
  });
226
227
 
package/src/form.js CHANGED
@@ -23,7 +23,7 @@ function init(elements) {
23
23
  Observer.init({
24
24
  name: 'CoCreateFormElements',
25
25
  observe: ['addedNodes'],
26
- target: '[storage], [database], [array], [index], [object], [key]',
26
+ selector: '[storage], [database], [array], [index], [object], [key]',
27
27
  callback: function (mutation) {
28
28
  if (element == mutation.target.form)
29
29
  setAttribute(element, [mutation.target])
@@ -74,8 +74,9 @@ function setAttribute(form, elements) {
74
74
  if (variable) {
75
75
  for (let el of elements) {
76
76
  // Set the value of the attribute.
77
+ // TODO: skip-attribute naming convention, perhaps skip by defualt if storage, database, array not the same and use attribute to apply for cases where one _id will be used across 2 arrays
77
78
  if (!el.getAttribute(attribute.name) && !el.hasAttribute('skip-attribute')) {
78
- el.setAttribute(attribute.name, form.getAttribute(attribute.name));
79
+ el.setAttribute(attribute.name, attribute.value);
79
80
  }
80
81
  }
81
82
  }
@@ -101,32 +102,44 @@ function disableAutoFill(element) {
101
102
  * @param form
102
103
  */
103
104
  function reset(form) {
104
- if (form.hasAttribute('object'))
105
- form.setAttribute('object', '');
106
- let formElements = new Map();
107
- for (let element of form) {
108
- formElements.set(element, '')
109
- // Set object attribute to object if it exists
110
- if (element.hasAttribute('object'))
105
+ // Convert the form elements collection to an array
106
+ const formElementsArray = Array.from(form.elements);
107
+
108
+ // Query for additional elements with [object] or [key] attributes that are not already part of form controls
109
+ const customElements = Array.from(form.querySelectorAll('[object], [key]:not(input):not(select):not(textarea):not(button)'));
110
+
111
+ // Merge form elements and custom elements using the spread operator
112
+ const allElements = [...formElementsArray, ...customElements];
113
+
114
+ // Store the elements and their values in a map for restoration
115
+ const elementStates = new Map();
116
+
117
+ // Iterate over all elements and store their current state based on the 'reset' attribute
118
+ for (const element of allElements) {
119
+ if (['BUTTON', 'FIELDSET'].includes(element.tagName))
120
+ continue
121
+ // Get the reset attribute value, if any
122
+ const resetType = element.getAttribute('reset');
123
+ if (element.hasAttribute('object') && (!resetType || resetType === 'object'))
111
124
  element.setAttribute('object', '');
112
- // If the element is a button and has a button with the same key, set the value to the value of the button.
113
- if (!['BUTTON'].includes(element.tagName))
125
+ if (resetType === 'false' || resetType === 'object')
126
+ elementStates.set(element, element.getValue() || element.value || element.getAttribute('value'));
127
+ if (!resetType || resetType !== 'object')
114
128
  element.setValue('')
115
129
  }
116
130
 
117
- let elements = form.querySelectorAll('[object], [key]');
118
- for (let element of elements) {
119
- // Set the object id attribute of the element to the object id if it has not yet been set.
120
- if (!formElements.has(element)) {
121
- // Set object attribute to object if it exists
122
- if (element.hasAttribute('object'))
123
- element.setAttribute('object', '');
124
- element.setValue('')
125
- }
126
- }
131
+ if (form.hasAttribute('object'))
132
+ form.setAttribute('object', '');
127
133
 
134
+ // Perform the default form reset
128
135
  form.reset();
129
- // dispatch input event to rest filter??
136
+
137
+ // Restore values based on the 'reset' attribute
138
+ elementStates.forEach((value, element) => {
139
+ element.setValue(value)
140
+ });
141
+
142
+ // Dispatch a custom reset event
130
143
  document.dispatchEvent(new CustomEvent('reset', {
131
144
  detail: {}
132
145
  }));
@@ -152,7 +165,7 @@ function setValue(form) {
152
165
  Observer.init({
153
166
  name: 'CoCreateForm',
154
167
  observe: ['addedNodes'],
155
- target: 'form',
168
+ selector: 'form',
156
169
  callback: mutation => init(mutation.target)
157
170
  });
158
171
 
@@ -160,7 +173,7 @@ Observer.init({
160
173
  name: 'CoCreateForm',
161
174
  observe: ['attributes'],
162
175
  attributeName: getAttributeNames(['storage', 'database', 'array', 'object', 'index']),
163
- target: 'form',
176
+ selector: 'form',
164
177
  callback: mutation => mutation.target.tagName === "FORM" &&
165
178
  setAttribute(mutation.target)
166
179
  });
package/src/index.js CHANGED
@@ -85,8 +85,6 @@ async function init(element) {
85
85
  }
86
86
 
87
87
  async function initElement(el) {
88
- // if (el.closest('.template')) return;
89
-
90
88
  let data = getObject(el);
91
89
  if (!data || !data.type)
92
90
  return
@@ -97,14 +95,20 @@ async function initElement(el) {
97
95
  if (!elements.has(el)) {
98
96
  elements.set(el, '')
99
97
 
100
- if (el.tagName === "EDITOR")
101
- console.log('editor event added')
102
98
  if (!el.elementsInputEvent) {
103
99
  el.elementsInputEvent = true;
104
100
 
105
101
  if (['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)
106
102
  || (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false')
107
103
  || el.contenteditable) {
104
+
105
+ if (el.tagName == 'IFRAME') {
106
+ // ToDo: saving on contenteditable elements when an objectId does not exist in order to crud or crdt
107
+ el = el.contentDocument.documentElement
108
+ el.setAttribute('contenteditable', 'true')
109
+
110
+ }
111
+
108
112
  el.addEventListener('input', function (e) {
109
113
  if (el.pendingObject) return
110
114
 
@@ -121,6 +125,7 @@ async function initElement(el) {
121
125
  }
122
126
  // let attributes = ['filter-key', 'filter-search', 'filter-sort-key', 'filter-on', 'filter-limit']
123
127
  // if (el.getFilter || attributes.some(attr => el.hasAttribute(attr))) {
128
+
124
129
  await filter.init()
125
130
  if (el.getFilter) {
126
131
  data.$filter = await el.getFilter();
@@ -380,7 +385,7 @@ async function setData(element, data) {
380
385
  if (!data[type] || !data[type].length)
381
386
  continue;
382
387
 
383
- if (key) {
388
+ if (key && checkValue(key)) {
384
389
  let value
385
390
  if (key.includes('$length')) {
386
391
  value = CRUD.getValueFromObject(data[type][0], key.replace(/\.\$length$/, ''))
@@ -402,7 +407,6 @@ async function setData(element, data) {
402
407
  if (isUpdate === "false" || isListen === "false" && !data.method.endsWith('.read')) continue;
403
408
  // TODO: object.update data returned from server will not include $operator
404
409
  el.setValue(value);
405
-
406
410
  }
407
411
  }
408
412
  }
@@ -411,8 +415,7 @@ async function setData(element, data) {
411
415
  async function filterData(element, data, type, key) {
412
416
  let operator = '', value
413
417
 
414
- // if (key && key !== '$length') {
415
- if (key && !key.includes('$length')) {
418
+ if (key && !key.includes('$length') && key !== '{}') {
416
419
  if (!data || !type) return
417
420
 
418
421
  if (key.startsWith('$')) {
@@ -465,7 +468,6 @@ async function filterData(element, data, type, key) {
465
468
  }
466
469
 
467
470
  let isRendered = element.querySelector('[render-clone]');
468
-
469
471
  if (operator) {
470
472
  element.setValue(value);
471
473
  } else if (element.renderValue && data.method && data.method.endsWith('.read') && data.$filter && (data.$filter.overwrite || !isRendered)) {
@@ -481,6 +483,8 @@ async function filterData(element, data, type, key) {
481
483
  } else if (key && key.includes('$length')) {
482
484
  let value = CRUD.getValueFromObject(data[type][0], key.replace(/\.\$length$/, ''))
483
485
  element.setValue(value.length);
486
+ } else if (key === '{}') {
487
+ element.setValue(data[type])
484
488
  } else if (data)
485
489
  element.setValue(data)
486
490
 
@@ -1177,7 +1181,7 @@ function initSocket() {
1177
1181
  Observer.init({
1178
1182
  name: 'render',
1179
1183
  observe: ['addedNodes'],
1180
- target: '[render-clone]',
1184
+ selector: '[render-clone]',
1181
1185
  callback: function (mutation) {
1182
1186
  if (!mutation.parentElement.hasAttribute('dnd'))
1183
1187
  return
@@ -1327,7 +1331,7 @@ function dndCrudSend(data, crudType) {
1327
1331
  Observer.init({
1328
1332
  name: 'CoCreateElementsChildList',
1329
1333
  observe: ['childList'],
1330
- target: selector,
1334
+ selector: selector,
1331
1335
  callback: function (mutation) {
1332
1336
  init(mutation.addedNodes);
1333
1337
  }
@@ -1336,7 +1340,7 @@ Observer.init({
1336
1340
  Observer.init({
1337
1341
  name: 'CoCreateElementsRemovedNodes',
1338
1342
  observe: ['removedNodes'],
1339
- target: selector,
1343
+ selector: selector,
1340
1344
  callback: function (mutation) {
1341
1345
  // if (mutation.target.parentElement) return
1342
1346
  // if (mutation.target.parentElement) {