@cocreate/render 1.24.13 → 1.24.14

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,11 @@
1
+ ## [1.24.14](https://github.com/CoCreate-app/CoCreate-render/compare/v1.24.13...v1.24.14) (2023-06-02)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * format demo html ([7814bca](https://github.com/CoCreate-app/CoCreate-render/commit/7814bca546918868f95ef28590ec9fdb2c414094))
7
+ * Update dependencies versions for [@cocreate](https://github.com/cocreate) libraries ([5fe97de](https://github.com/CoCreate-app/CoCreate-render/commit/5fe97de0da3874f74e4fb57bb74778eb9c73f8a3))
8
+
1
9
  ## [1.24.13](https://github.com/CoCreate-app/CoCreate-render/compare/v1.24.12...v1.24.13) (2023-05-21)
2
10
 
3
11
 
@@ -1,16 +1,22 @@
1
- <html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
2
3
  <head>
3
4
  <title>Render | CoCreateJS</title>
4
-
5
+
5
6
  <!-- CoCreate Favicon -->
6
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
- <link rel="manifest" href="/manifest.webmanifest" />
8
- </head>
7
+ <link
8
+ rel="icon"
9
+ href="https://cdn.cocreate.app/favicon.ico"
10
+ type="image/ico"
11
+ sizes="16x16" />
12
+ <link rel="manifest" href="/manifest.webmanifest" />
13
+ </head>
9
14
  <style>
10
- .template{display:none}
15
+ .template {
16
+ display: none;
17
+ }
11
18
  </style>
12
19
  <body>
13
-
14
20
  <cocreate-select name="current_org" template_id="abc1">
15
21
  <selected template="abc1" render-array="data">
16
22
  <cc-option class="template" value="{{document.current_org}}">
@@ -18,9 +24,8 @@
18
24
  </cc-option>
19
25
  </selected>
20
26
  </cocreate-select>
21
-
22
-
23
- <pre>
27
+
28
+ <pre>
24
29
  <h1>Paste in your browser console</h1>
25
30
 
26
31
  /** Example of array object from db -- render2 is an example of render_id**/
@@ -42,6 +47,5 @@
42
47
  <!--<script src="../dist/CoCreate-render-key.js"></script>-->
43
48
  <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
44
49
  <!-- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script> -->
45
-
46
50
  </body>
47
- </html>
51
+ </html>
package/demo/index.html CHANGED
@@ -1,46 +1,72 @@
1
- <html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
2
3
  <head>
3
4
  <title>Render | CoCreateJS</title>
4
-
5
+
5
6
  <!-- CoCreate Favicon -->
6
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
- <link rel="manifest" href="/manifest.webmanifest" />
8
- </head>
7
+ <link
8
+ rel="icon"
9
+ href="https://cdn.cocreate.app/favicon.ico"
10
+ type="image/ico"
11
+ sizes="16x16" />
12
+ <link rel="manifest" href="/manifest.webmanifest" />
13
+ </head>
9
14
  <body>
10
-
11
15
  <div template_id="abc1">
12
- <div class="template card {{render2.collection}} card margin:10px firstname"
13
- value="{{render2.data._id}}"
14
- template_id="abc1"
16
+ <div
17
+ class="template card {{render2.collection}} card margin:10px firstname"
18
+ value="{{render2.data._id}}"
19
+ template_id="abc1"
15
20
  render-array="render2.data">
16
- <div class="card-body padding:15px" collection="{{render2.collection}}">
17
- <h3 class="{{render2.data.firstname}} blue" value="{{render2.data.lastname}} - {{render2.data.firstname}}">--</h3>
18
- <h3 value="{{ render2.data.lastname }}" value="{{lastname}}"></h3>
19
- <input value="{{ render2.collection }}"/>
21
+ <div
22
+ class="card-body padding:15px"
23
+ collection="{{render2.collection}}">
24
+ <h3
25
+ class="{{render2.data.firstname}} blue"
26
+ value="{{render2.data.lastname}} - {{render2.data.firstname}}">
27
+ --
28
+ </h3>
29
+ <h3
30
+ value="{{ render2.data.lastname }}"
31
+ test="{{lastname}}"></h3>
32
+ <input value="{{ render2.collection }}" />
20
33
  <h3 class="email" value="{{render2.data.email}}">--</h3>
21
34
  <textarea value="{{render2.data.lastname}}"></textarea>
22
- <h3 data-attribute="{{render2.data.personal_info.email}}" name="email" value="{{render2.data.personal_info.email}}"></h3>
23
-
24
- <div class="template card" render-array="render2.data.testing_array">
35
+ <h3
36
+ data-attribute="{{render2.data.personal_info.email}}"
37
+ name="email"
38
+ value="{{render2.data.personal_info.email}}"></h3>
39
+
40
+ <div
41
+ class="template card"
42
+ render-array="render2.data.testing_array">
25
43
  testing-array template
26
- <h3 data-attribute="{{render2.data.testing_array.email}}" name="email" class="{{render2.data.testing_array.email}}" value="{{render2.data.testing_array.email}}"></h3>
44
+ <h3
45
+ data-attribute="{{render2.data.testing_array.email}}"
46
+ name="email"
47
+ class="{{render2.data.testing_array.email}}"
48
+ value="{{render2.data.testing_array.email}}"></h3>
27
49
  <h3 value="{{render2.collection}}"></h3>
28
-
50
+
29
51
  <h3 value="{{render2.data.personal_info.email}}"></h3>
30
52
  <div>*******************************************</div>
31
53
  </div>
32
- <div class="template card" render-array="render2.data.string_array" render-key="string">
54
+ <div
55
+ class="template card"
56
+ render-array="render2.data.string_array"
57
+ render-key="string">
33
58
  string - template
34
- <h3 name="test" data-attribute="{{string}}" class="{{string}}" value="{{string}}"></h3>
35
-
59
+ <h3
60
+ name="test"
61
+ data-attribute="{{string}}"
62
+ class="{{string}}"
63
+ value="{{string}}"></h3>
36
64
  </div>
37
-
38
65
  </div>
39
66
  </div>
40
67
  </div>
41
-
42
-
43
- <pre>
68
+
69
+ <pre>
44
70
  <h1>Paste in your browser console</h1>
45
71
 
46
72
  /** Example of array object from db -- render2 is an example of render_id**/
@@ -88,8 +114,8 @@
88
114
  })
89
115
 
90
116
  </pre>
91
-
92
- <!--<script src="../dist/CoCreate-render.js"></script>-->
93
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
117
+
118
+ <!--<script src="../dist/CoCreate-render.js"></script>-->
119
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
94
120
  </body>
95
- </html>
121
+ </html>
@@ -1,31 +1,51 @@
1
- <html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
2
3
  <head>
3
4
  <title>Render | CoCreateJS</title>
4
-
5
+
5
6
  <!-- CoCreate Favicon -->
6
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
- <link rel="manifest" href="/manifest.webmanifest" />
8
- </head>
7
+ <link
8
+ rel="icon"
9
+ href="https://cdn.cocreate.app/favicon.ico"
10
+ type="image/ico"
11
+ sizes="16x16" />
12
+ <link rel="manifest" href="/manifest.webmanifest" />
13
+ </head>
9
14
  <style>
10
- .template{display:none}
15
+ .template {
16
+ display: none;
17
+ }
11
18
  </style>
19
+
12
20
  <body>
13
-
14
- <body>
15
- <filter template_id="domains" filter-name="_id" filter-value="5ff747727005da1c272740ab"></filter>
16
- <cc-options fetch-collection="organizations" fetch-name="domains" template_id="domains" class="overflow:auto">
17
- <cc-option class="template display:flex" template_id="domains" value="{{domains}}">
18
- <h4>{{domains}}</h4>
19
- </cc-option>
20
- </cc-options>
21
+ <filter
22
+ template_id="domains"
23
+ filter-name="_id"
24
+ filter-value="5ff747727005da1c272740ab"></filter>
25
+ <cc-options
26
+ fetch-collection="organizations"
27
+ fetch-name="domains"
28
+ template_id="domains"
29
+ class="overflow:auto">
30
+ <cc-option
31
+ class="template display:flex"
32
+ template_id="domains"
33
+ value="{{domains}}">
34
+ <h4>{{domains}}</h4>
35
+ </cc-option>
36
+ </cc-options>
21
37
 
22
- <div template="abc1">
23
- <div class="template" render-array="data[0].current" render-key="current_org" value="{{current_org.name}}">
24
- <h3>{{current_org.name}}</h3>
25
- </div>
38
+ <div template="abc1">
39
+ <div
40
+ class="template"
41
+ render-array="data[0].current"
42
+ render-key="current_org"
43
+ value="{{current_org.name}}">
44
+ <h3>{{current_org.name}}</h3>
26
45
  </div>
27
-
28
- <pre>
46
+ </div>
47
+
48
+ <pre>
29
49
  <h1>Paste in your browser console</h1>
30
50
 
31
51
  /** Example **/
@@ -43,8 +63,8 @@
43
63
  })
44
64
 
45
65
  </pre>
46
-
47
- <!-- CoCreate JS CDN -->
48
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
49
- </body>
50
- </html>
66
+
67
+ <!-- CoCreate JS CDN -->
68
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
69
+ </body>
70
+ </html>
package/demo/render.html CHANGED
@@ -1,24 +1,29 @@
1
- <html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
2
3
  <head>
3
4
  <title>Render | CoCreateJS</title>
4
-
5
+
5
6
  <!-- CoCreate Favicon -->
6
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
- <link rel="manifest" href="/manifest.webmanifest" />
8
- </head>
7
+ <link
8
+ rel="icon"
9
+ href="https://cdn.cocreate.app/favicon.ico"
10
+ type="image/ico"
11
+ sizes="16x16" />
12
+ <link rel="manifest" href="/manifest.webmanifest" />
13
+ </head>
9
14
  <style>
10
- .template{display:none}
15
+ .template {
16
+ display: none;
17
+ }
11
18
  </style>
19
+
12
20
  <body>
13
-
14
- <body>
21
+ <div template="abc1">
22
+ <h3>{{document.collection}}</h3>
23
+ <h3>{{document._id}}</h3>
24
+ </div>
15
25
 
16
- <div template="abc1">
17
- <h3>{{document.collection}}</h3>
18
- <h3>{{document._id}}</h3>
19
- </div>
20
-
21
- <pre>
26
+ <pre>
22
27
  <h1>Paste in your browser console</h1>
23
28
 
24
29
  /** Example **/
@@ -36,8 +41,8 @@
36
41
  })
37
42
 
38
43
  </pre>
39
-
40
- <!-- CoCreate JS CDN -->
41
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
42
- </body>
43
- </html>
44
+
45
+ <!-- CoCreate JS CDN -->
46
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
47
+ </body>
48
+ </html>
@@ -1,28 +1,38 @@
1
- <html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
2
3
  <head>
3
4
  <title>Render | CoCreateJS</title>
4
-
5
+
5
6
  <!-- CoCreate Favicon -->
6
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
7
- <link rel="manifest" href="/manifest.webmanifest" />
8
- </head>
7
+ <link
8
+ rel="icon"
9
+ href="https://cdn.cocreate.app/favicon.ico"
10
+ type="image/ico"
11
+ sizes="16x16" />
12
+ <link rel="manifest" href="/manifest.webmanifest" />
13
+ </head>
9
14
  <style>
10
- .template{display:none}
15
+ .template {
16
+ display: none;
17
+ }
11
18
  </style>
12
19
  <body>
13
-
14
20
  <div template="abc1">
15
21
  <!-- <div>{{data}}</div>
16
22
  <h1> {{document.collection}} {{document._id}}</h1> -->
17
23
  <div class="template" render-object="" render-key="one">
18
24
  <h5>{{one.key}}: {{one.value}}</h5>
19
25
  </div>
20
- <div class="template" render-array="data[0].current_org" render-key="current_org" value="{{current_org}}">
26
+ <div
27
+ class="template"
28
+ render-array="data[0].current_org"
29
+ render-key="current_org"
30
+ value="{{current_org}}">
21
31
  <h3>{{current_org}}</h3>
22
32
  </div>
23
33
  </div>
24
-
25
- <pre>
34
+
35
+ <pre>
26
36
  <h1>Paste in your browser console</h1>
27
37
 
28
38
  /** Example **/
@@ -40,8 +50,8 @@
40
50
  })
41
51
 
42
52
  </pre>
43
-
53
+
44
54
  <!-- CoCreate JS CDN -->
45
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>
55
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
46
56
  </body>
47
- </html>
57
+ </html>
@@ -1,31 +1,31 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
-
4
3
  <head>
5
4
  <title>Render-key | CoCreateJS</title>
6
-
5
+
7
6
  <!-- CoCreate Favicon -->
8
- <link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
9
- <link rel="manifest" href="/manifest.webmanifest" />
10
- </head>
11
-
7
+ <link
8
+ rel="icon"
9
+ href="https://cdn.cocreate.app/favicon.ico"
10
+ type="image/ico"
11
+ sizes="16x16" />
12
+ <link rel="manifest" href="/manifest.webmanifest" />
13
+ </head>
14
+
12
15
  <body class="padding:20px">
13
-
14
16
  <form>
15
- <input render-key="name" value="test">
16
- <input render-key="domain" value="test.com">
17
+ <input render-key="name" value="test" />
18
+ <input render-key="domain" value="test.com" />
17
19
  <div template_id="render-key">
18
20
  <div>This is <b>{{render-key.name}}</b></div>
19
21
  <p>This {{render-key.name}}</p>
20
- <input value="{{render-key.name}}">
21
- <input value="{{render-key.domain}}">
22
- <button actions='renderKey'>Create Form</button>
22
+ <input value="{{render-key.name}}" />
23
+ <input value="{{render-key.domain}}" />
24
+ <button actions="renderKey">Create Form</button>
23
25
  </div>
24
26
  </form>
25
-
26
- <!-- <script src="../dist/CoCreate-render-key.js"></script> -->
27
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
28
27
 
28
+ <!-- <script src="../dist/CoCreate-render-key.js"></script> -->
29
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
29
30
  </body>
30
-
31
- </html>
31
+ </html>
package/docs/index.html CHANGED
@@ -1,81 +1,205 @@
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
+ <title>CoCreate-render Documentation | CoCreateJS</title>
8
+ <link
9
+ rel="icon"
10
+ type="image/png"
11
+ sizes="32x32"
12
+ href="https://cocreate.app/images/favicon.ico" />
13
+ <meta
14
+ name="description"
15
+ content="A simple yet powerful drag-and-drop solution powered by javascript." />
16
+ <meta
17
+ name="keywords"
18
+ content="drag and drop, colaboration, dnd utility, drag and drop utility" />
19
+ <meta name="robots" content="index,follow" />
20
+ <meta
21
+ property="og:image"
22
+ content="https://cdn.cocreate.app/docs/render.png" />
3
23
 
4
- <head>
5
- <meta charset="utf-8">
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <meta name="viewport" content="width=device-width, initial-scale=1">
8
- <title>CoCreate-render Documentation | CoCreateJS </title>
9
- <link rel="icon" type="image/png" sizes="32x32" href="https://cocreate.app/images/favicon.ico">
10
- <meta name="description" content="A simple yet powerful drag-and-drop solution powered by javascript." />
11
- <meta name="keywords" content="drag and drop, colaboration, dnd utility, drag and drop utility" />
12
- <meta name="robots" content="index,follow" />
13
- <meta property="og:image" content="https://cdn.cocreate.app/docs/render.png">
24
+ <!-- CoCreate CSS -->
25
+ <link
26
+ rel="stylesheet"
27
+ href="https://cdn.cocreate.app/latest/CoCreate.min.css"
28
+ type="text/css" />
29
+ <link
30
+ rel="stylesheet"
31
+ href="/docs/index.css"
32
+ collection="files"
33
+ document_id="60888216117c640e7596303f"
34
+ name="src"
35
+ type="text/css"
36
+ save="true" />
37
+ <link rel="manifest" href="/manifest.webmanifest" />
38
+ </head>
14
39
 
15
- <!-- CoCreate CSS -->
16
- <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" />
17
- <link rel="stylesheet" href="/docs/index.css" collection="files" document_id="60888216117c640e7596303f" name="src" type="text/css" save="true" />
18
- <link rel="manifest" href="/manifest.webmanifest">
19
- </head>
20
-
21
- <body>
22
-
23
- <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" collection="files" document_id="60395ef42b3ac232657040fd" name="src">
24
- </nav>
25
- <sidenav id="menuL" class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl" resizable resize-target="[content_id='content']" resize-property="margin-left" resize-value="width">
26
- <menu collection="files" document_id="603717b07de7fb350ae9fec8" name="src"></menu>
27
- <div resize="right"></div>
28
- </sidenav>
29
- <main class="padding-top:15px padding:15px@lg@xl" content_id="content" id="CoCreate-render">
30
- <div class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
31
- <div class="display:flex align-items:center">
32
- <h2>CoCreate-render</h2>
33
- </div>
34
- <div class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
35
- <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/render.png"
36
- hover="display:block!important" hover-target=".social-networks">
37
- <div class="display:none social-networks">
38
- <a class="margin-right:15px" share-network='twitter' title="Share on twitter"><i class="height:20px fill:#505050" src="/assets/svg/twitter.svg"></i></a>
39
- <a class="margin-right:15px" share-network='facebook' title="Share on Facebook"><i class="height:20px fill:#505050" src="/assets/svg/facebook.svg"></i></a>
40
- <a class="margin-right:15px" share-network='instagram' title="Share on instagram"><i class="height:20px fill:#505050" src="/assets/svg/instagram.svg"></i></a>
41
- </div>
42
- <a class="margin-right:15px" share-network='share' title="Share on share"><i class="height:20px fill:#505050" src="/assets/svg/share-alt.svg"></i></a>
43
- </div>
44
- <a href="https://github.com/CoCreate-app/CoCreate-dnd" target="_blank" class=""><i class="height:20px fill:#505050" src="/assets/svg/github.svg"></i></a>
45
- </div>
46
- </div>
47
- <h1 class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">CoCreate-render javascript component. Easy configuration using HTML5 attributes or Javscript api and highly styleable.</p>
48
- <div id="render-section" class="display:flex flex-wrap:wrap">
49
- <div class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
50
- <div id="render-install" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#render-install-section">
51
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#render-install"]'>
52
- <h2 class="padding:5px_0px">Install</h2>
53
- <a class="margin-left:10px display:none" href="#render-install"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
54
- </span>
55
- </div>
56
- <pre><code class="language-bash">npm i @cocreate/render</code></pre>
57
- <p class="padding:10px_0px line-height:1.5">Or you can use cdn link:</p>
58
- <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/render/latest/CoCreate-render.min.js&lt;/script&gt;</code></pre>
59
- <p class="padding:10px_0px line-height:1.5">for styling please refer to #id-style</p>
40
+ <body>
41
+ <nav
42
+ class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px"
43
+ content_id="content"
44
+ scroll="sticky-nav,hide-nav"
45
+ scroll-up="10"
46
+ scroll-down="10"
47
+ collection="files"
48
+ document_id="60395ef42b3ac232657040fd"
49
+ name="src"></nav>
50
+ <sidenav
51
+ id="menuL"
52
+ class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
53
+ resizable
54
+ resize-target="[content_id='content']"
55
+ resize-property="margin-left"
56
+ resize-value="width">
57
+ <menu
58
+ collection="files"
59
+ document_id="603717b07de7fb350ae9fec8"
60
+ name="src"></menu>
61
+ <div resize="right"></div>
62
+ </sidenav>
63
+ <main
64
+ class="padding-top:15px padding:15px@lg@xl"
65
+ content_id="content"
66
+ id="CoCreate-render">
67
+ <div
68
+ class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
69
+ <div class="display:flex align-items:center">
70
+ <h2>CoCreate-render</h2>
71
+ </div>
72
+ <div
73
+ class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
74
+ <div
75
+ class="display:flex align-items:center transition:0.3s padding-left:10px"
76
+ share-network="true"
77
+ share-text="Enter decription here"
78
+ share-title="testing im a title"
79
+ share-height="600"
80
+ share-width="700"
81
+ share-media="https://cdn.cocreate.app/docs/render.png"
82
+ hover="display:block!important"
83
+ hover-target=".social-networks">
84
+ <div class="display:none social-networks">
85
+ <a
86
+ class="margin-right:15px"
87
+ share-network="twitter"
88
+ title="Share on twitter"
89
+ ><i
90
+ class="height:20px fill:#505050"
91
+ src="/assets/svg/twitter.svg"></i
92
+ ></a>
93
+ <a
94
+ class="margin-right:15px"
95
+ share-network="facebook"
96
+ title="Share on Facebook"
97
+ ><i
98
+ class="height:20px fill:#505050"
99
+ src="/assets/svg/facebook.svg"></i
100
+ ></a>
101
+ <a
102
+ class="margin-right:15px"
103
+ share-network="instagram"
104
+ title="Share on instagram"
105
+ ><i
106
+ class="height:20px fill:#505050"
107
+ src="/assets/svg/instagram.svg"></i
108
+ ></a>
109
+ </div>
110
+ <a
111
+ class="margin-right:15px"
112
+ share-network="share"
113
+ title="Share on share"
114
+ ><i
115
+ class="height:20px fill:#505050"
116
+ src="/assets/svg/share-alt.svg"></i
117
+ ></a>
118
+ </div>
119
+ <a
120
+ href="https://github.com/CoCreate-app/CoCreate-dnd"
121
+ target="_blank"
122
+ class=""
123
+ ><i
124
+ class="height:20px fill:#505050"
125
+ src="/assets/svg/github.svg"></i
126
+ ></a>
127
+ </div>
128
+ </div>
129
+ <h1
130
+ class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
131
+ CoCreate-render javascript component. Easy configuration using
132
+ HTML5 attributes or Javscript api and highly styleable.
133
+ </h1>
134
+ <div id="render-section" class="display:flex flex-wrap:wrap">
135
+ <div
136
+ class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
137
+ <div
138
+ id="render-install"
139
+ class="border-bottom:1px_solid_lightgrey"
140
+ scroll
141
+ scroll-intersect="color:dodgerblue"
142
+ scroll-target="#render-install-section">
143
+ <span
144
+ class="display:flex align-items:center width:fit-content"
145
+ hover="display:block!important"
146
+ hover-target="[href='#render-install']">
147
+ <h2 class="padding:5px_0px">Install</h2>
148
+ <a
149
+ class="margin-left:10px display:none"
150
+ href="#render-install"
151
+ ><i
152
+ class="height:20px fill:#505050"
153
+ src="/assets/svg/link.svg"></i
154
+ ></a>
155
+ </span>
156
+ </div>
157
+ <pre><code class="language-bash">npm i @cocreate/render</code></pre>
158
+ <p class="padding:10px_0px line-height:1.5">
159
+ Or you can use cdn link:
160
+ </p>
161
+ <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/render/latest/CoCreate-render.min.js&lt;/script&gt;</code></pre>
162
+ <p class="padding:10px_0px line-height:1.5">
163
+ for styling please refer to #id-style
164
+ </p>
60
165
 
61
- <div id="render-usage" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#render-usage-section">
62
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#render-usage"]'>
63
- <h2 class="padding:5px_0px">Usage</h2>
64
- <a class="margin-left:10px display:none" href="#render-usage"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
65
- </span>
66
- </div>
67
- <p class="padding:10px_0px line-height:1.5">
68
- CoCreate-render would use that set attributes and renders the elements based on html and json data.
69
- </p>
166
+ <div
167
+ id="render-usage"
168
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
169
+ scroll
170
+ scroll-intersect="color:dodgerblue"
171
+ scroll-target="#render-usage-section">
172
+ <span
173
+ class="display:flex align-items:center width:fit-content"
174
+ hover="display:block!important"
175
+ hover-target="[href='#render-usage']">
176
+ <h2 class="padding:5px_0px">Usage</h2>
177
+ <a
178
+ class="margin-left:10px display:none"
179
+ href="#render-usage"
180
+ ><i
181
+ class="height:20px fill:#505050"
182
+ src="/assets/svg/link.svg"></i
183
+ ></a>
184
+ </span>
185
+ </div>
186
+ <p class="padding:10px_0px line-height:1.5">
187
+ CoCreate-render would use that set attributes and
188
+ renders the elements based on html and json data.
189
+ </p>
70
190
 
71
- <h3 class="border-bottom:1px_solid_lightgrey margin-top:40px padding:5px_0px">Example</h3>
72
- <p class="padding:10px_0px line-height:1.5">
73
- </p>
191
+ <h3
192
+ class="border-bottom:1px_solid_lightgrey margin-top:40px padding:5px_0px">
193
+ Example
194
+ </h3>
195
+ <p class="padding:10px_0px line-height:1.5"></p>
74
196
 
75
- <h4 class="margin-top:20px padding:5px_0px">HTML Template</h4>
197
+ <h4 class="margin-top:20px padding:5px_0px">
198
+ HTML Template
199
+ </h4>
76
200
 
77
- <div class="margin-top:10px">
78
- <pre><code class="language-html">
201
+ <div class="margin-top:10px">
202
+ <pre><code class="language-html">
79
203
  &lt;div template_id=&quot;abc1&quot; fetch-collection=&quot;render_test&quot;&gt;
80
204
  &lt;div class=&quot;template card {{render2.collection}} card margin:10px firstname&quot;
81
205
  value=&quot;{{render2.data._id}}&quot;
@@ -109,11 +233,13 @@
109
233
  &lt;/div&gt;
110
234
  &lt;/div&gt;
111
235
  </code></pre>
112
- </div>
236
+ </div>
113
237
 
114
- <h4 class="margin-top:40px padding:5px_0px">CoCreate-render usage</h4>
115
- <p class="padding:10px_0px line-height:1.5">Description.</p>
116
- <pre><code class="language-html">
238
+ <h4 class="margin-top:40px padding:5px_0px">
239
+ CoCreate-render usage
240
+ </h4>
241
+ <p class="padding:10px_0px line-height:1.5">Description.</p>
242
+ <pre><code class="language-html">
117
243
  CoCreate.render.data({
118
244
  selector: '[template=abc1]',
119
245
  data: {
@@ -148,123 +274,309 @@
148
274
  })
149
275
  </code></pre>
150
276
 
151
- <div id="render-attributes" class="margin-top:80px border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#render-attributes-section">
152
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#render-attributes"]'>
153
- <h2 class="padding:5px_0px">Attributes</h2>
154
- <a class="margin-left:10px display:none" href="#render-attributes"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
155
- </span>
156
- </div>
157
- <ul class="list-style-type:none ">
158
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
159
- <h4><span>render-array</span> <span class="cocreate-badge warning">optional</span><span class="cocreate-badge danger">required</span></h4>
160
- <p>To render the array data, this attribute should define by the object selector path</p>
161
- </li>
162
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
163
- <h4><span>render-key</span> <span class="cocreate-badge warning">optional</span><span class="cocreate-badge">Default: render-array's value</span></h4>
164
- <p>If render-array defined, this attribute can define</p>
165
- <p>Default value is value of render-array</p>
166
- </li>
167
- </ul>
168
-
169
- <h4 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Funcations</h4>
170
- <ul class="list-style-type:none ">
171
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
172
- <h4><span>setValue(elements, data, [passTo])</span></h4>
173
- <p>This is main function. </p>
174
- <div>
175
- <p><strong>elements</strong> <span class="cocreate-badge warning">Type:NoteList</span><span class="cocreate-badge danager">required</span></p>
176
- <p> Dom elements for render</p>
177
- </div>
178
- <div>
179
- <p><strong>data</strong> <span class="cocreate-badge warning">Type:object</span><span class="cocreate-badge danager">required</span></p>
180
- <p>Data to render</p>
181
- </div>
182
- <div>
183
- <p><strong>passTo</strong><span class="cocreate-badge warning">Type:string</span><span class="cocreate-badge warning">optional</span></p>
184
- </div>
185
- </li>
186
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
187
- <h4>
188
- <span>render(selector, data)</span>
189
- </h4>
190
- <div>
191
- <p><strong>selector</strong> <span class="cocreate-badge warning">Type:String</span><span class="cocreate-badge danager">required</span></p>
192
- <p>The selector of element to render</p>
193
- </div>
194
- <div>
195
- <p><strong>data</strong> <span class="cocreate-badge warning">Type:object</span><span class="cocreate-badge danager">required</span></p>
196
- <p>Data to render</p>
197
- </div>
198
- </li>
199
- <li class="padding:15px_0px border-bottom:1px_solid_lightgrey">
200
- <h4>
201
- <span>setArray(element, data)</span>
202
- </h4>
203
- <div>
204
- <p><strong>element</strong> <span class="cocreate-badge warning">Type:Node</span><span class="cocreate-badge danager">required</span></p>
205
- <p>Element to render the array. Geneeral it will be template.</p>
206
- </div>
207
- <div>
208
- <p><strong>data</strong> <span class="cocreate-badge warning">Type:object</span><span class="cocreate-badge danager">required</span></p>
209
- <p>Data to render</p>
210
- </div>
211
- </li>
212
-
213
- </ul>
277
+ <div
278
+ id="render-attributes"
279
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
280
+ scroll
281
+ scroll-intersect="color:dodgerblue"
282
+ scroll-target="#render-attributes-section">
283
+ <span
284
+ class="display:flex align-items:center width:fit-content"
285
+ hover="display:block!important"
286
+ hover-target="[href='#render-attributes']">
287
+ <h2 class="padding:5px_0px">Attributes</h2>
288
+ <a
289
+ class="margin-left:10px display:none"
290
+ href="#render-attributes"
291
+ ><i
292
+ class="height:20px fill:#505050"
293
+ src="/assets/svg/link.svg"></i
294
+ ></a>
295
+ </span>
296
+ </div>
297
+ <ul class="list-style-type:none">
298
+ <li
299
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
300
+ <h4>
301
+ <span>render-array</span>
302
+ <span class="cocreate-badge warning"
303
+ >optional</span
304
+ ><span class="cocreate-badge danger"
305
+ >required</span
306
+ >
307
+ </h4>
308
+ <p>
309
+ To render the array data, this attribute should
310
+ define by the object selector path
311
+ </p>
312
+ </li>
313
+ <li
314
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
315
+ <h4>
316
+ <span>render-key</span>
317
+ <span class="cocreate-badge warning"
318
+ >optional</span
319
+ ><span class="cocreate-badge"
320
+ >Default: render-array's value</span
321
+ >
322
+ </h4>
323
+ <p>
324
+ If render-array defined, this attribute can
325
+ define
326
+ </p>
327
+ <p>Default value is value of render-array</p>
328
+ </li>
329
+ </ul>
214
330
 
331
+ <h4
332
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
333
+ Funcations
334
+ </h4>
335
+ <ul class="list-style-type:none">
336
+ <li
337
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
338
+ <h4>
339
+ <span>setValue(elements, data, [passTo])</span>
340
+ </h4>
341
+ <p>This is main function.</p>
342
+ <div>
343
+ <p>
344
+ <strong>elements</strong>
345
+ <span class="cocreate-badge warning"
346
+ >Type:NoteList</span
347
+ ><span class="cocreate-badge danager"
348
+ >required</span
349
+ >
350
+ </p>
351
+ <p>Dom elements for render</p>
352
+ </div>
353
+ <div>
354
+ <p>
355
+ <strong>data</strong>
356
+ <span class="cocreate-badge warning"
357
+ >Type:object</span
358
+ ><span class="cocreate-badge danager"
359
+ >required</span
360
+ >
361
+ </p>
362
+ <p>Data to render</p>
363
+ </div>
364
+ <div>
365
+ <p>
366
+ <strong>passTo</strong
367
+ ><span class="cocreate-badge warning"
368
+ >Type:string</span
369
+ ><span class="cocreate-badge warning"
370
+ >optional</span
371
+ >
372
+ </p>
373
+ </div>
374
+ </li>
375
+ <li
376
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
377
+ <h4>
378
+ <span>render(selector, data)</span>
379
+ </h4>
380
+ <div>
381
+ <p>
382
+ <strong>selector</strong>
383
+ <span class="cocreate-badge warning"
384
+ >Type:String</span
385
+ ><span class="cocreate-badge danager"
386
+ >required</span
387
+ >
388
+ </p>
389
+ <p>The selector of element to render</p>
390
+ </div>
391
+ <div>
392
+ <p>
393
+ <strong>data</strong>
394
+ <span class="cocreate-badge warning"
395
+ >Type:object</span
396
+ ><span class="cocreate-badge danager"
397
+ >required</span
398
+ >
399
+ </p>
400
+ <p>Data to render</p>
401
+ </div>
402
+ </li>
403
+ <li
404
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
405
+ <h4>
406
+ <span>setArray(element, data)</span>
407
+ </h4>
408
+ <div>
409
+ <p>
410
+ <strong>element</strong>
411
+ <span class="cocreate-badge warning"
412
+ >Type:Node</span
413
+ ><span class="cocreate-badge danager"
414
+ >required</span
415
+ >
416
+ </p>
417
+ <p>
418
+ Element to render the array. Geneeral it
419
+ will be template.
420
+ </p>
421
+ </div>
422
+ <div>
423
+ <p>
424
+ <strong>data</strong>
425
+ <span class="cocreate-badge warning"
426
+ >Type:object</span
427
+ ><span class="cocreate-badge danager"
428
+ >required</span
429
+ >
430
+ </p>
431
+ <p>Data to render</p>
432
+ </div>
433
+ </li>
434
+ </ul>
215
435
 
216
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">How Does It Works</h2>
217
- <p>CoCreate-render works based on attributes and template, The attributes to render should be wrapper "{{ }}", and attributes can include the combine "{{}}" wrapper.</p>
218
-
219
- <p>To render the array data, Render need to define <code class="language-js">class="template"</code>. <code class="language-js">render-array</code></p>
436
+ <h2
437
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
438
+ How Does It Works
439
+ </h2>
440
+ <p>
441
+ CoCreate-render works based on attributes and template,
442
+ The attributes to render should be wrapper "{{ }}", and
443
+ attributes can include the combine "{{}}" wrapper.
444
+ </p>
220
445
 
221
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Effects and Styles</h2>
446
+ <p>
447
+ To render the array data, Render need to define
448
+ <code class="language-js">class="template"</code>.
449
+ <code class="language-js">render-array</code>
450
+ </p>
222
451
 
223
- <h2 class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">Events</h2>
452
+ <h2
453
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
454
+ Effects and Styles
455
+ </h2>
224
456
 
225
- </div>
226
- <div class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
227
- <!-- SandBox -->
228
- <div id="render-demo" class="border-bottom:1px_solid_lightgrey" scroll scroll-intersect="color:dodgerblue" scroll-target="#render-demo-section">
229
- <span class="display:flex align-items:center width:fit-content" hover="display:block!important" hover-target='[href="#render-demo"]'>
230
- <h2 class="padding:5px_0px">Demo</h2>
231
- <a class="margin-left:10px display:none" href="#render-demo"><i class="height:20px fill:#505050" src="/assets/svg/link.svg"></i></a>
232
- </span>
233
- </div>
234
- <div class="position:sticky top:0 padding:15px_0px height:100vh">
457
+ <h2
458
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
459
+ Events
460
+ </h2>
461
+ </div>
462
+ <div
463
+ class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
464
+ <!-- SandBox -->
465
+ <div
466
+ id="render-demo"
467
+ class="border-bottom:1px_solid_lightgrey"
468
+ scroll
469
+ scroll-intersect="color:dodgerblue"
470
+ scroll-target="#render-demo-section">
471
+ <span
472
+ class="display:flex align-items:center width:fit-content"
473
+ hover="display:block!important"
474
+ hover-target="[href='#render-demo']">
475
+ <h2 class="padding:5px_0px">Demo</h2>
476
+ <a
477
+ class="margin-left:10px display:none"
478
+ href="#render-demo"
479
+ ><i
480
+ class="height:20px fill:#505050"
481
+ src="/assets/svg/link.svg"></i
482
+ ></a>
483
+ </span>
484
+ </div>
485
+ <div
486
+ class="position:sticky top:0 padding:15px_0px height:100vh">
235
487
  <!-- SandBox -->
236
- <div class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground">
237
-
238
- <div id="demo-code" resizable class="position:relative height:50%">
239
- <textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
240
- <div resize="bottom" class="background:lightgrey"></div>
488
+ <div
489
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
490
+ id="playground">
491
+ <div
492
+ id="demo-code"
493
+ resizable
494
+ class="position:relative height:50%">
495
+ <textarea
496
+ type="code"
497
+ lang="html"
498
+ collection="demos"
499
+ document_id=""
500
+ name="demo"
501
+ save="false"
502
+ id="demo"
503
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
504
+ <div
505
+ resize="bottom"
506
+ class="background:lightgrey"></div>
241
507
  </div>
242
-
243
- <div id="demo-preview" class="position:relative overflow:auto background-color:white">
244
- <div class="demopreview" class="padding:20px"></div>
508
+
509
+ <div
510
+ id="demo-preview"
511
+ class="position:relative overflow:auto background-color:white">
512
+ <div class="demopreview padding:20px"></div>
245
513
  </div>
246
-
247
- <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
248
- <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="height:18px fill:#505050" src="/assets/svg/eye.svg"></i></a>
249
- <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="height:20px fill:#505050" src="/assets/svg/eye-slash.svg"></i></a>
250
- <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="height:20px fill:#505050" src="/assets/svg/code.svg"></i></a>
251
- <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="display:flex height:18px fill:#505050" src="/assets/svg/code.svg"></i></a>
252
- <a class="margin-right:5px" fullscreen fullscreen-target="#playground"></a>
514
+
515
+ <div
516
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
517
+ <a
518
+ class="margin-right:10px"
519
+ id="eye"
520
+ show="#eye-slash"
521
+ hide="#eye, #demo-preview"
522
+ toggle="code-height"
523
+ toggle-target="#demo-code"
524
+ ><i
525
+ class="height:18px fill:#505050"
526
+ src="/assets/svg/eye.svg"></i
527
+ ></a>
528
+ <a
529
+ class="margin-right:10px"
530
+ hidden
531
+ id="eye-slash"
532
+ show="#eye, #demo-preview"
533
+ hide="#eye-slash"
534
+ toggle="code-height"
535
+ toggle-target="#demo-code"
536
+ ><i
537
+ class="height:20px fill:#505050"
538
+ src="/assets/svg/eye-slash.svg"></i
539
+ ></a>
540
+ <a
541
+ class="margin-right:10px"
542
+ id="code"
543
+ show="#code-slash"
544
+ hide="#code, #demo-code"
545
+ ><i
546
+ class="height:20px fill:#505050"
547
+ src="/assets/svg/code.svg"></i
548
+ ></a>
549
+ <a
550
+ class="margin-right:10px"
551
+ hidden
552
+ id="code-slash"
553
+ show="#code, #demo-code"
554
+ hide="#code-slash"
555
+ ><i
556
+ class="display:flex height:18px fill:#505050"
557
+ src="/assets/svg/code.svg"></i
558
+ ></a>
559
+ <a
560
+ class="margin-right:5px"
561
+ fullscreen
562
+ fullscreen-target="#playground"></a>
253
563
  </div>
254
-
255
564
  </div>
256
565
  <!-- End SandBox -->
257
- </div>
258
- </div>
259
- </div>
260
- <button href="https://github.com/CoCreate-app/CoCreate-render/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..." target="_blank" class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
261
- <i class="height:20px fill:#505050" src="/assets/svg/pencil-alt.svg"></i>
262
- </button>
263
- </main>
264
-
265
- <script src="./apikey.js"></script>
266
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
267
-
268
- </body>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ <button
570
+ href="https://github.com/CoCreate-app/CoCreate-render/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
571
+ target="_blank"
572
+ class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
573
+ <i
574
+ class="height:20px fill:#505050"
575
+ src="/assets/svg/pencil-alt.svg"></i>
576
+ </button>
577
+ </main>
269
578
 
579
+ <script src="./apikey.js"></script>
580
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
581
+ </body>
270
582
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/render",
3
- "version": "1.24.13",
3
+ "version": "1.24.14",
4
4
  "description": "A simple render component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
5
5
  "keywords": [
6
6
  "render",
@@ -59,11 +59,11 @@
59
59
  "webpack-log": "^3.0.1"
60
60
  },
61
61
  "dependencies": {
62
- "@cocreate/actions": "^1.8.11",
63
- "@cocreate/api": "^1.10.12",
64
- "@cocreate/docs": "^1.7.12",
65
- "@cocreate/element-prototype": "^1.8.11",
66
- "@cocreate/observer": "^1.7.9",
67
- "@cocreate/utils": "^1.20.9"
62
+ "@cocreate/actions": "^1.8.12",
63
+ "@cocreate/api": "^1.10.13",
64
+ "@cocreate/docs": "^1.7.13",
65
+ "@cocreate/element-prototype": "^1.8.12",
66
+ "@cocreate/observer": "^1.8.0",
67
+ "@cocreate/utils": "^1.20.10"
68
68
  }
69
69
  }