@cocreate/api 1.22.1 → 1.22.3

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 (8) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/docs/form.html +12 -12
  3. package/docs/index.html +14 -14
  4. package/docs/module.html +10 -10
  5. package/docs/server.html +12 -12
  6. package/package.json +10 -14
  7. package/src/index.js +23 -9
  8. package/webpack.config.js +65 -90
package/CHANGELOG.md CHANGED
@@ -1,3 +1,21 @@
1
+ ## [1.22.3](https://github.com/CoCreate-app/CoCreate-api/compare/v1.22.2...v1.22.3) (2025-04-30)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * added css-loader ([a1a89c4](https://github.com/CoCreate-app/CoCreate-api/commit/a1a89c4d610fd0ec1930b54d9a5904ef95a0ed77))
7
+ * update query attributes ([b637439](https://github.com/CoCreate-app/CoCreate-api/commit/b6374395011d48441aeb0efead620737c48703de))
8
+ * updated cocreate modules versions ([a6ab726](https://github.com/CoCreate-app/CoCreate-api/commit/a6ab72610d5bdb089c295630944dabf02e303e1b))
9
+ * webpack.config and devdependencies ([acaf88c](https://github.com/CoCreate-app/CoCreate-api/commit/acaf88ce9d39d6aae2e4c65d7d6ccf312a5f4ca7))
10
+
11
+ ## [1.22.2](https://github.com/CoCreate-app/CoCreate-api/compare/v1.22.1...v1.22.2) (2025-04-11)
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * dispatch end event on action element rather than document ([805bb62](https://github.com/CoCreate-app/CoCreate-api/commit/805bb627f7de7dc918ca41ea57bfde1e82407e4e))
17
+ * update observer observe param to type and and attributeName to attributeFilter ([ea6ab8d](https://github.com/CoCreate-app/CoCreate-api/commit/ea6ab8d8408696fdcc8959ea7fc199d706a5c05b))
18
+
1
19
  ## [1.22.1](https://github.com/CoCreate-app/CoCreate-api/compare/v1.22.0...v1.22.1) (2025-01-18)
2
20
 
3
21
 
package/docs/form.html CHANGED
@@ -19,7 +19,7 @@
19
19
  <body>
20
20
  <nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" array="files" object="60395ef42b3ac232657040fd" key="src">
21
21
  </nav>
22
- <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-selector="[content_id='content']" resize-property="margin-left" resize-value="width">
22
+ <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-query="[content_id='content']" resize-property="margin-left" resize-value="width">
23
23
  <menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
24
24
  <div resize="right"></div>
25
25
  </sidenav>
@@ -30,7 +30,7 @@
30
30
  </div>
31
31
  <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
32
32
  <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="An api helper component in vanilla javascript to setup thirdparty api intergrations. Apis can be accessible using HTML5 attributes and/or JavaScript API"
33
- share-title="CoCreate API form" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/api.png" hover="display:block!important" hover-selector=".social-networks">
33
+ share-title="CoCreate API form" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/api.png" hover="display:block!important" hover-query=".social-networks">
34
34
  <div class="display:none social-networks">
35
35
  <a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i src="/assets/svg/twitter.svg"></i></a>
36
36
  <a class="margin-right:15px" share-network="facebook" title="Share on Facebook"><i src="/assets/svg/facebook.svg"></i></a>
@@ -47,8 +47,8 @@
47
47
  <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
48
48
 
49
49
 
50
- <div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-install-section">
51
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-install']">
50
+ <div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-install-section">
51
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-install']">
52
52
  <h2 class="padding:5px_0px">Install</h2>
53
53
  <a class="margin-left:10px display:none" href="#api-install"><i src="/assets/svg/link.svg"></i></a>
54
54
  </span>
@@ -61,13 +61,13 @@
61
61
  <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/api/latest/CoCreate-api.min.js&lt;/script&gt;</code></pre>
62
62
 
63
63
  <div>
64
- <h2 id="api-server-run" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
64
+ <h2 id="api-server-run" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
65
65
  <a class="display:none" href="#api-server-run"><i src="/assets/svg/link.svg"></i></a>
66
66
  </div>
67
67
  <pre><code class="language-javascript">npm run start</code></pre>
68
68
 
69
69
  <div>
70
- <h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
70
+ <h2 id="api-dependencies" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
71
71
  <a class="display:none" href="#api-dependencies"><i src="/assets/svg/link.svg"></i></a>
72
72
  </div>
73
73
  <p class="padding:10px_0px line-height:1.5">
@@ -77,7 +77,7 @@
77
77
 
78
78
 
79
79
  <div>
80
- <h2 id="api-development" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
80
+ <h2 id="api-development" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
81
81
  <a class="display:none" href="#api-development"><i src="/assets/svg/link.svg"></i></a>
82
82
  </div>
83
83
 
@@ -168,8 +168,8 @@
168
168
  <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
169
169
 
170
170
  <!-- SandBox -->
171
- <div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-demo-section">
172
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-demo']">
171
+ <div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-demo-section">
172
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-demo']">
173
173
  <h2 class="padding:5px_0px">Demo</h2>
174
174
  <a class="margin-left:10px display:none" href="#api-demo"><i src="/assets/svg/link.svg"></i></a>
175
175
  </span>
@@ -189,11 +189,11 @@
189
189
  </div>
190
190
 
191
191
  <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
192
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
193
- <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a>
192
+ <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-query="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
193
+ <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-query="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a>
194
194
  <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i src="/assets/svg/code.svg"></i></a>
195
195
  <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a>
196
- <a class="margin-right:5px" fullscreen fullscreen-selector="#playground"></a>
196
+ <a class="margin-right:5px" fullscreen fullscreen-query="#playground"></a>
197
197
  </div>
198
198
 
199
199
  </div>
package/docs/index.html CHANGED
@@ -27,7 +27,7 @@
27
27
  object="60395ef42b3ac232657040fd"
28
28
  key="src">
29
29
  </nav>
30
- <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-selector="[content_id='content']" resize-property="margin-left" resize-value="width">
30
+ <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-query="[content_id='content']" resize-property="margin-left" resize-value="width">
31
31
  <menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
32
32
  <div resize="right"></div>
33
33
  </sidenav>
@@ -38,7 +38,7 @@
38
38
  </div>
39
39
  <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
40
40
  <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="Enter decription here" share-title="testing im a title" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/api.png"
41
- hover="display:block!important" hover-selector=".social-networks">
41
+ hover="display:block!important" hover-query=".social-networks">
42
42
  <div class="display:none social-networks">
43
43
  <a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i src="/assets/svg/twitter.svg"></i></a>
44
44
  <a class="margin-right:15px" share-network="facebook" title="Share on Facebook"><i src="/assets/svg/facebook.svg"></i></a>
@@ -55,8 +55,8 @@
55
55
  <div id="api-section" class="display:flex flex-wrap:wrap">
56
56
  <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
57
57
 
58
- <div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-install-section">
59
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-install']">
58
+ <div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-install-section">
59
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-install']">
60
60
  <h2 class="padding:5px_0px">Install</h2>
61
61
  <a class="margin-left:10px display:none" href="#api-install"><i src="/assets/svg/link.svg"></i></a>
62
62
  </span>
@@ -67,7 +67,7 @@
67
67
  <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/api/latest/CoCreate-api.min.js&lt;/script&gt;</code></pre>
68
68
 
69
69
  <div>
70
- <h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
70
+ <h2 id="api-dependencies" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
71
71
  <a class="display:none" href="#api-dependencies"><i src="/assets/svg/link.svg"></i></a>
72
72
  </div>
73
73
 
@@ -78,8 +78,8 @@
78
78
  </p>
79
79
 
80
80
 
81
- <div id="api-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-usage-section">
82
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-usage']">
81
+ <div id="api-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-usage-section">
82
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-usage']">
83
83
  <h2 class="padding:5px_0px">Usage</h2>
84
84
  <a class="margin-left:10px display:none" href="#api-usage"><i src="/assets/svg/link.svg"></i></a>
85
85
  </span>
@@ -93,7 +93,7 @@
93
93
  <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/api/latest/CoCreate-api.min.js&lt;/script&gt;</code></pre>
94
94
 
95
95
  <div>
96
- <h2 id="api-server-run" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
96
+ <h2 id="api-server-run" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
97
97
  <a class="display:none" href="#api-server-run"><i src="/assets/svg/link.svg"></i></a>
98
98
  </div>
99
99
 
@@ -110,7 +110,7 @@
110
110
  </p>
111
111
 
112
112
  <div>
113
- <h2 id="api-functions" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">CoCreate-api functions</h2>
113
+ <h2 id="api-functions" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">CoCreate-api functions</h2>
114
114
  <a class="display:none" href="#api-functions"><i src="/assets/svg/link.svg"></i></a>
115
115
  </div>
116
116
 
@@ -197,8 +197,8 @@
197
197
  <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
198
198
 
199
199
  <!-- SandBox -->
200
- <div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-demo-section">
201
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-demo']">
200
+ <div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-demo-section">
201
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-demo']">
202
202
  <h2 class="padding:5px_0px">Demo</h2>
203
203
  <a class="margin-left:10px display:none" href="#api-demo"><i src="/assets/svg/link.svg"></i></a>
204
204
  </span>
@@ -217,11 +217,11 @@
217
217
  </div>
218
218
 
219
219
  <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
220
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
221
- <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a>
220
+ <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-query="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
221
+ <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-query="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a>
222
222
  <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i src="/assets/svg/code.svg"></i></a>
223
223
  <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a>
224
- <a class="margin-right:5px" fullscreen fullscreen-selector="#playground"></a>
224
+ <a class="margin-right:5px" fullscreen fullscreen-query="#playground"></a>
225
225
  </div>
226
226
 
227
227
  </div>
package/docs/module.html CHANGED
@@ -21,7 +21,7 @@
21
21
  <body>
22
22
  <nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" array="files" object="60395ef42b3ac232657040fd" key="src">
23
23
  </nav>
24
- <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-selector="[content_id='content']" resize-property="margin-left" resize-value="width">
24
+ <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-query="[content_id='content']" resize-property="margin-left" resize-value="width">
25
25
  <menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
26
26
  <div resize="right"></div>
27
27
  </sidenav>
@@ -38,8 +38,8 @@
38
38
  <div id="api-section" class="display:flex flex-wrap:wrap">
39
39
  <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
40
40
 
41
- <div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-install-section">
42
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-install']">
41
+ <div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-install-section">
42
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-install']">
43
43
  <h2 class="padding:5px_0px">Install</h2>
44
44
  <a class="margin-left:10px display:none" href="#api-install"><i src="/assets/svg/link.svg"></i></a>
45
45
  </span>
@@ -52,7 +52,7 @@
52
52
  <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/api/latest/CoCreate-api.min.js&lt;/script&gt;</code></pre>
53
53
 
54
54
  <div>
55
- <h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
55
+ <h2 id="api-dependencies" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
56
56
  <a class="display:none" href="#api-dependencies"><i src="/assets/svg/link.svg"></i></a>
57
57
  </div>
58
58
  <p class="padding:10px_0px line-height:1.5">
@@ -62,7 +62,7 @@
62
62
 
63
63
 
64
64
  <div>
65
- <h2 id="api-development" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
65
+ <h2 id="api-development" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
66
66
  <a class="display:none" href="#api-development"><i src="/assets/svg/link.svg"></i></a>
67
67
  </div>
68
68
 
@@ -159,8 +159,8 @@
159
159
  <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
160
160
 
161
161
  <!-- SandBox -->
162
- <div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-demo-section">
163
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-demo']">
162
+ <div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-demo-section">
163
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-demo']">
164
164
  <h2 class="padding:5px_0px">Demo</h2>
165
165
  <a class="margin-left:10px display:none" href="#api-demo"><i src="/assets/svg/link.svg"></i></a>
166
166
  </span>
@@ -181,11 +181,11 @@
181
181
  </div>
182
182
 
183
183
  <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
184
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
185
- <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a>
184
+ <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-query="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
185
+ <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-query="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a>
186
186
  <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i src="/assets/svg/code.svg"></i></a>
187
187
  <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a>
188
- <a class="margin-right:5px" fullscreen fullscreen-selector="#playground"></a>
188
+ <a class="margin-right:5px" fullscreen fullscreen-query="#playground"></a>
189
189
  </div>
190
190
 
191
191
  </div>
package/docs/server.html CHANGED
@@ -19,7 +19,7 @@
19
19
  <body>
20
20
  <nav class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px" content_id="content" scroll="sticky-nav,hide-nav" scroll-up="10" scroll-down="10" array="files" object="60395ef42b3ac232657040fd" key="src">
21
21
  </nav>
22
- <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-selector="[content_id='content']" resize-property="margin-left" resize-value="width">
22
+ <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-query="[content_id='content']" resize-property="margin-left" resize-value="width">
23
23
  <menu array="files" object="603717b07de7fb350ae9fec8" key="src"></menu>
24
24
  <div resize="right"></div>
25
25
  </sidenav>
@@ -30,7 +30,7 @@
30
30
  </div>
31
31
  <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
32
32
  <div class="display:flex align-items:center transition:0.3s padding-left:10px" share-network="true" share-text="An api helper component in vanilla javascript to setup thirdparty api intergrations. Apis can be accessible using HTML5 attributes and/or JavaScript API"
33
- share-title="CoCreate API server" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/api.png" hover="display:block!important" hover-selector=".social-networks">
33
+ share-title="CoCreate API server" share-height="600" share-width="700" share-media="https://cdn.cocreate.app/docs/api.png" hover="display:block!important" hover-query=".social-networks">
34
34
  <div class="display:none social-networks">
35
35
  <a class="margin-right:15px" share-network="twitter" title="Share on twitter"><i src="/assets/svg/twitter.svg"></i></a>
36
36
  <a class="margin-right:15px" share-network="facebook" title="Share on Facebook"><i src="/assets/svg/facebook.svg"></i></a>
@@ -45,8 +45,8 @@
45
45
  client component and server side for api processing.</h1>
46
46
  <div id="api-section" class="display:flex flex-wrap:wrap">
47
47
  <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
48
- <div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-install-section">
49
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-install']">
48
+ <div id="api-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-install-section">
49
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-install']">
50
50
  <h2 class="padding:5px_0px">Install</h2>
51
51
  <a class="margin-left:10px display:none" href="#api-install"><i src="/assets/svg/link.svg"></i></a>
52
52
  </span>
@@ -58,13 +58,13 @@
58
58
  <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/api/latest/CoCreate-api.min.js&lt;/script&gt;</code></pre>
59
59
 
60
60
  <div>
61
- <h2 id="api-server-run" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
61
+ <h2 id="api-server-run" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey padding:5px_0px">Server run</h2>
62
62
  <a class="display:none" href="#api-server-run"><i src="/assets/svg/link.svg"></i></a>
63
63
  </div>
64
64
  <pre><code class="language-javascript">npm run start</code></pre>
65
65
 
66
66
  <div>
67
- <h2 id="api-dependencies" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
67
+ <h2 id="api-dependencies" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Dependencies components</h2>
68
68
  <a class="display:none" href="#api-dependencies"><i src="/assets/svg/link.svg"></i></a>
69
69
  </div>
70
70
  <p class="padding:10px_0px line-height:1.5">
@@ -74,7 +74,7 @@
74
74
 
75
75
 
76
76
  <div>
77
- <h2 id="api-development" hover="display:block" hover-selector="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
77
+ <h2 id="api-development" hover="display:block" hover-query="" class="border-bottom:1px_solid_lightgrey margin-top:80px padding:5px_0px">Development Guide</h2>
78
78
  <a class="display:none" href="#api-development"><i src="/assets/svg/link.svg"></i></a>
79
79
  </div>
80
80
 
@@ -169,8 +169,8 @@
169
169
  <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
170
170
 
171
171
  <!-- SandBox -->
172
- <div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-selector="#api-demo-section">
173
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-selector="[href='#api-demo']">
172
+ <div id="api-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-query="#api-demo-section">
173
+ <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-query="[href='#api-demo']">
174
174
  <h2 class="padding:5px_0px">Demo</h2>
175
175
  <a class="margin-left:10px display:none" href="#api-demo"><i src="/assets/svg/link.svg"></i></a>
176
176
  </span>
@@ -190,11 +190,11 @@
190
190
  </div>
191
191
 
192
192
  <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
193
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-selector="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
194
- <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-selector="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a>
193
+ <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-query="#demo-code"><i class="height:18px" src="/assets/svg/eye.svg"></i></a>
194
+ <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-query="#demo-code"><i src="/assets/svg/eye-slash.svg"></i></a>
195
195
  <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i src="/assets/svg/code.svg"></i></a>
196
196
  <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="height:18px" src="/assets/svg/code.svg"></i></a>
197
- <a class="margin-right:5px" fullscreen fullscreen-selector="#playground"></a>
197
+ <a class="margin-right:5px" fullscreen fullscreen-query="#playground"></a>
198
198
  </div>
199
199
 
200
200
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/api",
3
- "version": "1.22.1",
3
+ "version": "1.22.3",
4
4
  "description": "A simple api helper component in vanilla javascript used by JavaScript developers to create thirdparty api intergrations. CoCreate-api includes the client component and server side for api processing. Thirdparty apis can be accessible using HTML5 attributes and/or JavaScript API. ",
5
5
  "keywords": [
6
6
  "thirdparty-api-intergration",
@@ -46,24 +46,20 @@
46
46
  },
47
47
  "main": "./src/index.js",
48
48
  "devDependencies": {
49
- "@babel/core": "^7.9.6",
50
- "@babel/preset-env": "^7.9.6",
51
- "babel-loader": "^8.1.0",
52
- "clean-webpack-plugin": "^3.0.0",
53
- "file-loader": "^6.2.0",
49
+ "css-loader": "^5.1.3",
50
+ "esbuild": "^0.25.2",
51
+ "esbuild-loader": "^4.3.0",
54
52
  "mini-css-extract-plugin": "^1.5.0",
55
- "style-loader": "^3.3.1",
56
- "terser-webpack-plugin": "^5.1.1",
57
53
  "webpack": "^5.24.4",
58
54
  "webpack-cli": "^4.5.0",
59
55
  "webpack-log": "^3.0.1"
60
56
  },
61
57
  "dependencies": {
62
- "@cocreate/actions": "^1.18.2",
63
- "@cocreate/crud-client": "^1.33.9",
64
- "@cocreate/element-prototype": "^1.23.0",
65
- "@cocreate/render": "^1.41.0",
66
- "@cocreate/socket-client": "^1.5.7",
67
- "@cocreate/utils": "^1.33.7"
58
+ "@cocreate/actions": "^1.21.0",
59
+ "@cocreate/crud-client": "^1.34.1",
60
+ "@cocreate/element-prototype": "^1.29.0",
61
+ "@cocreate/render": "^1.45.1",
62
+ "@cocreate/socket-client": "^1.40.1",
63
+ "@cocreate/utils": "^1.38.0"
68
64
  }
69
65
  }
package/src/index.js CHANGED
@@ -55,7 +55,7 @@ const CoCreateApi = {
55
55
 
56
56
  Observer.init({
57
57
  name: `${name}NodeObserver`,
58
- observe: ["addedNodes"],
58
+ types: ["addedNodes"],
59
59
  selector: `[${name}]`,
60
60
  callback: function (mutation) {
61
61
  inputEvent(mutation.target);
@@ -69,8 +69,8 @@ const CoCreateApi = {
69
69
 
70
70
  Observer.init({
71
71
  name: `${name}AttributeObserver`,
72
- observe: ["attributes"],
73
- attributeName: [name],
72
+ types: ["attributes"],
73
+ attributeFilter: [name],
74
74
  callback: function (mutation) {
75
75
  self.request({
76
76
  name,
@@ -129,7 +129,7 @@ const CoCreateApi = {
129
129
  } else {
130
130
  CoCreateApi.setData(object);
131
131
 
132
- document.dispatchEvent(
132
+ object.element.dispatchEvent(
133
133
  new CustomEvent(object.endEvent, {
134
134
  detail: {
135
135
  data: object
@@ -167,13 +167,14 @@ const CoCreateApi = {
167
167
  if (!elements[i] || elements[i].closest("[template]")) continue;
168
168
  let key = elements[i].getAttribute(`${name}-key`);
169
169
  if (key) {
170
- let value = await elements[i].getValue();
170
+ let value =
171
+ elements[i].stripeElement || (await elements[i].getValue());
171
172
  if (key.endsWith("[]")) {
172
173
  if (!data[key]) data[key] = [];
173
174
 
174
175
  if (Array.isArray(value)) data[key].push(...value);
175
176
  else data[key].push(value);
176
- } else data[key] = await elements[i].getValue();
177
+ } else data[key] = value;
177
178
  }
178
179
 
179
180
  let endpoint = elements[i].getAttribute("endpoint");
@@ -212,7 +213,9 @@ const CoCreateApi = {
212
213
  let form = object.form;
213
214
  if (!form) form = document;
214
215
 
215
- let elements = form.querySelectorAll(`[${name}="${object.method}"]`);
216
+ let elements = form.querySelectorAll(
217
+ `[${name}="${object.method}"]:not([${name}-response="false"])`
218
+ );
216
219
  if (!elements || elements.length == 0) return;
217
220
 
218
221
  for (let i = 0; i < elements.length; i++) {
@@ -229,13 +232,24 @@ const CoCreateApi = {
229
232
  selector: `[template="${templateid}"]`,
230
233
  data
231
234
  });
235
+ } else if (elements[i].renderValue) {
236
+ let key = elements[i].getAttribute(`${name}-key`);
237
+ if (key === "{}") {
238
+ elements[i].renderValue(data[name]);
239
+ } else {
240
+ let value = getValueFromObject(data[name], key);
241
+ if (typeof value === "function") {
242
+ value = value(); // Call the function and assign its return value.
243
+ }
244
+ elements[i].renderValue(value);
245
+ }
232
246
  } else {
233
247
  let key = elements[i].getAttribute(`${name}-key`);
234
248
  if (key === "{}") elements[i].setValue(data[name]);
235
249
  else {
236
250
  let value = getValueFromObject(data[name], key);
237
251
  if (typeof value === "function") {
238
- value = value(); // Call the function and assign its return value
252
+ value = value(); // Call the function and assign its return value.
239
253
  }
240
254
  elements[i].setValue(value);
241
255
  }
@@ -247,7 +261,7 @@ const CoCreateApi = {
247
261
 
248
262
  Observer.init({
249
263
  name: `apiNodeObserver`,
250
- observe: ["addedNodes"],
264
+ types: ["addedNodes"],
251
265
  selector: "[module], [api]",
252
266
  callback: function (mutation) {
253
267
  let name =
package/webpack.config.js CHANGED
@@ -1,90 +1,65 @@
1
- const path = require("path")
2
- const TerserPlugin = require("terser-webpack-plugin")
3
- const MiniCssExtractPlugin = require("mini-css-extract-plugin")
4
- const { CleanWebpackPlugin } = require("clean-webpack-plugin")
5
-
6
- module.exports = (env, argv) => {
7
- let isProduction = false
8
- if (argv.mode === 'production')
9
- isProduction = true
10
-
11
- const config = {
12
- entry: {
13
- "CoCreate-api": "./src/index.js",
14
- },
15
- output: {
16
- path: path.resolve(__dirname, "dist"),
17
- filename: isProduction ? "[name].min.js" : "[name].js",
18
- libraryTarget: "umd",
19
- libraryExport: "default",
20
- library: ["CoCreate", "api"],
21
- globalObject: "this",
22
- },
23
-
24
- plugins: [
25
- new CleanWebpackPlugin(),
26
- new MiniCssExtractPlugin({
27
- filename: "[name].css",
28
- }),
29
- ],
30
- // Default mode for Webpack is production.
31
- // Depending on mode Webpack will apply different things
32
- // on final bundle. For now we don't need production's JavaScript
33
- // minifying and other thing so let's set mode to development
34
- mode: isProduction ? "production" : "development",
35
- module: {
36
- rules: [
37
- {
38
- test: /.js$/,
39
- exclude: /(node_modules)/,
40
- use: {
41
- loader: "babel-loader",
42
- options: {
43
- plugins: ["@babel/plugin-transform-modules-commonjs"],
44
- },
45
- },
46
- },
47
- {
48
- test: /.css$/i,
49
- use: [
50
- { loader: "style-loader", options: { injectType: "linkTag" } },
51
- "file-loader",
52
- ],
53
- },
54
- ],
55
- },
56
-
57
- // add source map
58
- ...(isProduction ? {} : { devtool: "eval-source-map" }),
59
-
60
- optimization: {
61
- minimize: true,
62
- minimizer: [
63
- new TerserPlugin({
64
- extractComments: true,
65
- // cache: true,
66
- parallel: true,
67
- // sourceMap: true, // Must be set to true if using source-maps in production
68
- terserOptions: {
69
- // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
70
- // extractComments: 'all',
71
- compress: {
72
- drop_console: true,
73
- },
74
- },
75
- }),
76
- ],
77
- splitChunks: {
78
- chunks: "all",
79
- minSize: 200,
80
- // maxSize: 99999,
81
- //minChunks: 1,
82
-
83
- cacheGroups: {
84
- defaultVendors: false,
85
- },
86
- },
87
- },
88
- }
89
- return config
90
- }
1
+ const path = require("path");
2
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3
+ const { EsbuildPlugin } = require("esbuild-loader");
4
+ const { FileUploader } = require("@cocreate/webpack");
5
+
6
+ module.exports = async (env, argv) => {
7
+ const isProduction = argv && argv.mode === "production";
8
+ const config = {
9
+ entry: {
10
+ "CoCreate-api": "./src/index.js"
11
+ },
12
+ output: {
13
+ path: path.resolve(__dirname, "dist"),
14
+ filename: isProduction ? "[name].min.js" : "[name].js",
15
+ libraryExport: "default",
16
+ library: ["CoCreate", "api"],
17
+ clean: true
18
+ },
19
+ plugins: [
20
+ new MiniCssExtractPlugin({
21
+ filename: isProduction ? "[name].min.css" : "[name].css"
22
+ }),
23
+ new FileUploader(env, argv)
24
+ ],
25
+ mode: isProduction ? "production" : "development",
26
+ devtool: isProduction ? "source-map" : "eval-source-map",
27
+ module: {
28
+ rules: [
29
+ {
30
+ test: /.js$/,
31
+ exclude: /node_modules/,
32
+ use: {
33
+ loader: "esbuild-loader",
34
+ options: {
35
+ loader: "js",
36
+ target: "es2017"
37
+ }
38
+ }
39
+ },
40
+ {
41
+ test: /.css$/i,
42
+ use: [MiniCssExtractPlugin.loader, "css-loader"]
43
+ }
44
+ ]
45
+ },
46
+ optimization: {
47
+ minimize: isProduction,
48
+ minimizer: [
49
+ new EsbuildPlugin({
50
+ target: "es2017",
51
+ css: true
52
+ })
53
+ ],
54
+ splitChunks: {
55
+ cacheGroups: {
56
+ defaultVendors: false
57
+ }
58
+ }
59
+ },
60
+ performance: {
61
+ hints: isProduction ? "warning" : false
62
+ }
63
+ };
64
+ return config;
65
+ };