@cocreate/element-prototype 1.8.13 → 1.8.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/docs/index.html CHANGED
@@ -1,262 +1,262 @@
1
- <!DOCTYPE html>
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-element-prototype 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 HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
16
- <meta
17
- name="keywords"
18
- content="helper classes, utility classes, css framework, css library, inline style classes" />
19
- <meta name="robots" content="index,follow" />
20
-
21
- <!-- CoCreate CSS CDN -->
22
- <link
23
- rel="stylesheet"
24
- href="https://cdn.cocreate.app/latest/CoCreate.min.css"
25
- type="text/css" />
26
-
27
- <link rel="manifest" href="/manifest.webmanifest" />
28
- </head>
29
-
30
- <body>
31
- <div
32
- collection=""
33
- document_id=""
34
- name=""
35
- id="cocreate-element-prototype">
36
- <div
37
- class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
38
- <div class="display:flex align-items:center">
39
- <h2>CoCreate-element-prototype</h2>
40
- </div>
41
- <div
42
- class="display:flex align-items:center font-size:20px"
43
- share-height="600"
44
- share-width="500"
45
- share-media="https://via.placeholder.com/300/09f/fff.png">
46
- <a
47
- href="https://github.com/CoCreate-app/CoCreate-element-prototype"
48
- target="_blank"
49
- class="margin-right:15px"
50
- ><i
51
- class="height:20px fill:#505050"
52
- src="/assets/svg/github.svg"></i
53
- ></a>
54
- <a
55
- class="margin-right:15px share"
56
- share-network="twitter"
57
- title="Share on twitter"
58
- ><i
59
- class="height:20px fill:#505050"
60
- src="/assets/svg/twitter.svg"></i
61
- ></a>
62
- <a
63
- class="margin-right:15px share"
64
- share-network="facebook"
65
- title="Share on Facebook"
66
- ><i
67
- class="height:20px fill:#505050"
68
- src="/assets/svg/facebook.svg"></i
69
- ></a>
70
- <a
71
- class="margin-right:15px share"
72
- share-network="instagram"
73
- title="Share on instagram"
74
- ><i
75
- class="height:20px fill:#505050"
76
- src="/assets/svg/instagram.svg"></i
77
- ></a>
78
- <a
79
- class="margin-right:15px share"
80
- share-network="share"
81
- title="Share on share"
82
- ><i
83
- class="height:20px fill:#505050"
84
- src="/assets/svg/share-alt.svg"></i
85
- ></a>
86
- </div>
87
- </div>
88
- <h1 class="max-width:500px margin:20px_10px">
89
- A simple HTML5, CSS and pure javascript component. Easy
90
- configuration using data-attributes and highly styleable.
91
- </h1>
92
- <div
93
- id="element-prototype-section"
94
- class="display:flex flex-wrap:wrap">
95
- <div class="flex-grow:1 width:300px padding:20px_10px">
96
- <h2
97
- class="border-bottom:1px_solid_lightgrey padding:5px_0px">
98
- Install
99
- </h2>
100
- <pre
101
- class="margin-top:15px"><code class="language-javascript">npm install cocreate-element-prototype</code></pre>
102
- <p class="padding:10px_0px">Or you can use cdn link:</p>
103
- <pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-element-prototype.min.js</code></pre>
104
-
105
- <h2
106
- class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
107
- Usage
108
- </h2>
109
- <p class="padding:10px_0px">
110
- element-prototype usage content
111
- </p>
112
- <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
113
-
114
- <h2
115
- class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
116
- Reference
117
- </h2>
118
- <p class="padding:10px_0px">
119
- This is element-prototype reference content
120
- </p>
121
- <pre><code class="language-javascript">&lt;div&gt;&lt;/div&gt;</code></pre>
122
- <p class="padding:10px_0px">
123
- This is element-prototype reference content
124
- </p>
125
-
126
- <h2
127
- class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
128
- Attributes
129
- </h2>
130
- <ul class="list-style-type:none">
131
- <li
132
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
133
- <h4>
134
- <span>element-prototype</span>
135
- <span class="cocreate-badge success"
136
- >string</span
137
- >
138
- <span class="cocreate-badge warning"
139
- >optional</span
140
- >
141
- </h4>
142
- <p>element-prototype-attribute</p>
143
- </li>
144
- <li
145
- class="padding:15px_0px border-bottom:1px_solid_lightgrey">
146
- <h4>
147
- <span>element-prototype</span>
148
- <span class="cocreate-badge success"
149
- >string</span
150
- >
151
- <span class="cocreate-badge warning"
152
- >optional</span
153
- >
154
- </h4>
155
- <p>element-prototype-attribute</p>
156
- </li>
157
- </ul>
158
- </div>
159
-
160
- <div
161
- class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
162
- <!-- SandBox -->
163
- <h2
164
- class="border-bottom:1px_solid_lightgrey padding:5px_0px">
165
- Demo
166
- </h2>
167
- <div
168
- class="position:sticky top:0 padding:10px_0px height:100vh">
169
- <!-- SandBox -->
170
- <div
171
- class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
172
- id="playground">
173
- <div
174
- id="demo-code"
175
- resizable
176
- class="position:relative height:50%">
177
- <textarea
178
- type="code"
179
- lang="html"
180
- collection="demos"
181
- document_id=""
182
- name="demo"
183
- save="false"
184
- id="demo"
185
- class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
186
- <div
187
- resize="bottom"
188
- class="background:lightgrey"></div>
189
- </div>
190
-
191
- <div
192
- id="demo-preview"
193
- class="position:relative overflow:auto background-color:white">
194
- <div class="demopreview padding:20px"></div>
195
- </div>
196
-
197
- <div
198
- class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
199
- <a
200
- class="margin-right:10px"
201
- id="eye"
202
- show="#eye-slash"
203
- hide="#eye, #demo-preview"
204
- toggle="code-height"
205
- toggle-target="#demo-code"
206
- ><i
207
- class="height:18px fill:#505050"
208
- src="/assets/svg/eye.svg"></i
209
- ></a>
210
- <a
211
- class="margin-right:10px"
212
- hidden
213
- id="eye-slash"
214
- show="#eye, #demo-preview"
215
- hide="#eye-slash"
216
- toggle="code-height"
217
- toggle-target="#demo-code"
218
- ><i
219
- class="height:20px fill:#505050"
220
- src="/assets/svg/eye-slash.svg"></i
221
- ></a>
222
- <a
223
- class="margin-right:10px"
224
- id="code"
225
- show="#code-slash"
226
- hide="#code, #demo-code"
227
- ><i
228
- class="height:20px fill:#505050"
229
- src="/assets/svg/code.svg"></i
230
- ></a>
231
- <a
232
- class="margin-right:10px"
233
- hidden
234
- id="code-slash"
235
- show="#code, #demo-code"
236
- hide="#code-slash"
237
- ><i
238
- class="display:flex height:18px fill:#505050"
239
- src="/assets/svg/code.svg"></i
240
- ></a>
241
- <a
242
- class="margin-right:5px"
243
- fullscreen
244
- fullscreen-target="#playground"></a>
245
- </div>
246
- </div>
247
- <!-- End SandBox -->
248
- </div>
249
- </div>
250
- </div>
251
- </div>
252
- <script>
253
- var CoCreateConfig = {
254
- key: "2061acef-0451-4545-f754-60cf8160",
255
- organization_id: "5ff747727005da1c272740ab",
256
- };
257
- </script>
258
-
259
- <!--CoCreateJS-->
260
- <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
261
- </body>
262
- </html>
1
+ <!DOCTYPE html>
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-element-prototype 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 HTML5 and pure javascript component. Easy configuration using data-attributes and highly styleable." />
16
+ <meta
17
+ name="keywords"
18
+ content="helper classes, utility classes, css framework, css library, inline style classes" />
19
+ <meta name="robots" content="index,follow" />
20
+
21
+ <!-- CoCreate CSS CDN -->
22
+ <link
23
+ rel="stylesheet"
24
+ href="https://cdn.cocreate.app/latest/CoCreate.min.css"
25
+ type="text/css" />
26
+
27
+ <link rel="manifest" href="/manifest.webmanifest" />
28
+ </head>
29
+
30
+ <body>
31
+ <div
32
+ collection=""
33
+ document_id=""
34
+ name=""
35
+ id="cocreate-element-prototype">
36
+ <div
37
+ class="display:flex flex-wrap:wrap justify-content:space-between margin:10px">
38
+ <div class="display:flex align-items:center">
39
+ <h2>CoCreate-element-prototype</h2>
40
+ </div>
41
+ <div
42
+ class="display:flex align-items:center font-size:20px"
43
+ share-height="600"
44
+ share-width="500"
45
+ share-media="https://via.placeholder.com/300/09f/fff.png">
46
+ <a
47
+ href="https://github.com/CoCreate-app/CoCreate-element-prototype"
48
+ target="_blank"
49
+ class="margin-right:15px"
50
+ ><i
51
+ class="height:20px fill:#505050"
52
+ src="/assets/svg/github.svg"></i
53
+ ></a>
54
+ <a
55
+ class="margin-right:15px share"
56
+ share-network="twitter"
57
+ title="Share on twitter"
58
+ ><i
59
+ class="height:20px fill:#505050"
60
+ src="/assets/svg/twitter.svg"></i
61
+ ></a>
62
+ <a
63
+ class="margin-right:15px share"
64
+ share-network="facebook"
65
+ title="Share on Facebook"
66
+ ><i
67
+ class="height:20px fill:#505050"
68
+ src="/assets/svg/facebook.svg"></i
69
+ ></a>
70
+ <a
71
+ class="margin-right:15px share"
72
+ share-network="instagram"
73
+ title="Share on instagram"
74
+ ><i
75
+ class="height:20px fill:#505050"
76
+ src="/assets/svg/instagram.svg"></i
77
+ ></a>
78
+ <a
79
+ class="margin-right:15px share"
80
+ share-network="share"
81
+ title="Share on share"
82
+ ><i
83
+ class="height:20px fill:#505050"
84
+ src="/assets/svg/share-alt.svg"></i
85
+ ></a>
86
+ </div>
87
+ </div>
88
+ <h1 class="max-width:500px margin:20px_10px">
89
+ A simple HTML5, CSS and pure javascript component. Easy
90
+ configuration using data-attributes and highly styleable.
91
+ </h1>
92
+ <div
93
+ id="element-prototype-section"
94
+ class="display:flex flex-wrap:wrap">
95
+ <div class="flex-grow:1 width:300px padding:20px_10px">
96
+ <h2
97
+ class="border-bottom:1px_solid_lightgrey padding:5px_0px">
98
+ Install
99
+ </h2>
100
+ <pre
101
+ class="margin-top:15px"><code class="language-javascript">npm install cocreate-element-prototype</code></pre>
102
+ <p class="padding:10px_0px">Or you can use cdn link:</p>
103
+ <pre><code class="language-javascript">https://cdn.cocreate.app/js/CoCreate-element-prototype.min.js</code></pre>
104
+
105
+ <h2
106
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
107
+ Usage
108
+ </h2>
109
+ <p class="padding:10px_0px">
110
+ element-prototype usage content
111
+ </p>
112
+ <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
113
+
114
+ <h2
115
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
116
+ Reference
117
+ </h2>
118
+ <p class="padding:10px_0px">
119
+ This is element-prototype reference content
120
+ </p>
121
+ <pre><code class="language-javascript">&lt;div&gt;&lt;/div&gt;</code></pre>
122
+ <p class="padding:10px_0px">
123
+ This is element-prototype reference content
124
+ </p>
125
+
126
+ <h2
127
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
128
+ Attributes
129
+ </h2>
130
+ <ul class="list-style-type:none">
131
+ <li
132
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
133
+ <h4>
134
+ <span>element-prototype</span>
135
+ <span class="cocreate-badge success"
136
+ >string</span
137
+ >
138
+ <span class="cocreate-badge warning"
139
+ >optional</span
140
+ >
141
+ </h4>
142
+ <p>element-prototype-attribute</p>
143
+ </li>
144
+ <li
145
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
146
+ <h4>
147
+ <span>element-prototype</span>
148
+ <span class="cocreate-badge success"
149
+ >string</span
150
+ >
151
+ <span class="cocreate-badge warning"
152
+ >optional</span
153
+ >
154
+ </h4>
155
+ <p>element-prototype-attribute</p>
156
+ </li>
157
+ </ul>
158
+ </div>
159
+
160
+ <div
161
+ class="flex-grow:1 width:300px padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
162
+ <!-- SandBox -->
163
+ <h2
164
+ class="border-bottom:1px_solid_lightgrey padding:5px_0px">
165
+ Demo
166
+ </h2>
167
+ <div
168
+ class="position:sticky top:0 padding:10px_0px height:100vh">
169
+ <!-- SandBox -->
170
+ <div
171
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
172
+ id="playground">
173
+ <div
174
+ id="demo-code"
175
+ resizable
176
+ class="position:relative height:50%">
177
+ <textarea
178
+ type="code"
179
+ lang="html"
180
+ collection="demos"
181
+ document_id=""
182
+ name="demo"
183
+ save="false"
184
+ id="demo"
185
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
186
+ <div
187
+ resize="bottom"
188
+ class="background:lightgrey"></div>
189
+ </div>
190
+
191
+ <div
192
+ id="demo-preview"
193
+ class="position:relative overflow:auto background-color:white">
194
+ <div class="demopreview padding:20px"></div>
195
+ </div>
196
+
197
+ <div
198
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
199
+ <a
200
+ class="margin-right:10px"
201
+ id="eye"
202
+ show="#eye-slash"
203
+ hide="#eye, #demo-preview"
204
+ toggle="code-height"
205
+ toggle-target="#demo-code"
206
+ ><i
207
+ class="height:18px fill:#505050"
208
+ src="/assets/svg/eye.svg"></i
209
+ ></a>
210
+ <a
211
+ class="margin-right:10px"
212
+ hidden
213
+ id="eye-slash"
214
+ show="#eye, #demo-preview"
215
+ hide="#eye-slash"
216
+ toggle="code-height"
217
+ toggle-target="#demo-code"
218
+ ><i
219
+ class="height:20px fill:#505050"
220
+ src="/assets/svg/eye-slash.svg"></i
221
+ ></a>
222
+ <a
223
+ class="margin-right:10px"
224
+ id="code"
225
+ show="#code-slash"
226
+ hide="#code, #demo-code"
227
+ ><i
228
+ class="height:20px fill:#505050"
229
+ src="/assets/svg/code.svg"></i
230
+ ></a>
231
+ <a
232
+ class="margin-right:10px"
233
+ hidden
234
+ id="code-slash"
235
+ show="#code, #demo-code"
236
+ hide="#code-slash"
237
+ ><i
238
+ class="display:flex height:18px fill:#505050"
239
+ src="/assets/svg/code.svg"></i
240
+ ></a>
241
+ <a
242
+ class="margin-right:5px"
243
+ fullscreen
244
+ fullscreen-target="#playground"></a>
245
+ </div>
246
+ </div>
247
+ <!-- End SandBox -->
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ <script>
253
+ var CoCreateConfig = {
254
+ key: "2061acef-0451-4545-f754-60cf8160",
255
+ organization_id: "5ff747727005da1c272740ab",
256
+ };
257
+ </script>
258
+
259
+ <!--CoCreateJS-->
260
+ <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
261
+ </body>
262
+ </html>