@cocreate/elements 1.17.33 → 1.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/demo/index.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="en">
3
3
  <head>
4
- <title>HTML Tags | CoCreateJS</title>
4
+ <title>Elements | CoCreateJS</title>
5
5
  <!-- CoCreate Favicon -->
6
6
  <link
7
7
  rel="icon"
@@ -10,31 +10,193 @@
10
10
  sizes="16x16" />
11
11
  <link rel="manifest" href="/manifest.webmanifest" />
12
12
  </head>
13
- <body>
14
- <form
15
- collection="test"
16
- document_id=""
17
- realtime="false"
18
- class="margin:20px">
19
- <input name="name" />
20
- <input name="_id" />
21
- <!-- <p name document>eeeeeer</p>
22
- <h1 name="name" contenteditable></h1>
23
- <h2 name="name"></h2>
24
- <h3 name="color" ></h3>
25
- <h4 name="search"></h4>
26
- <h5 name="date"></h5>
27
- <h6 name="time"></h6>
28
- <p name="date-time"></p>
29
- <span name="date-time"></span>
30
- <div name="text_area" classs="domeditor"></div>
31
- <span name="personal_info.email"></span> -->
32
- <button type="button" actions="save">save</button>
13
+ <body class="padding:20px">
14
+ <!-- Supports create and update of all crud types -->
15
+ <h2>Supports create and update of all crud types</h2>
16
+ <form realtime="false">
17
+ <input
18
+ placeholder="test"
19
+ array="test"
20
+ object="6465646af1e023c0aee760c2"
21
+ key="name" />
22
+
23
+ <a actions="save">Save</a>
33
24
  </form>
25
+ <form realtime="false">
26
+ <!-- creates a database -->
27
+ <input database key="name" />
28
+ <!-- updates a database -->
29
+ <input database="test" key="name" />
30
+ <!-- deletes a database -->
31
+ <input database="test" key="name" value="$delete" />
34
32
 
35
- <!-- <script src="../dist/CoCreate-elements.js"></script> -->
36
- <!-- <script src="../../../CoCreateJS/dist/CoCreate.js" ></script> -->
33
+ <!-- creates an array -->
34
+ <input array key="name" />
35
+ <!-- updates an array -->
36
+ <input array="test" key="name" />
37
+ <!-- deletes an array -->
38
+ <input array="test" key="name" value="$delete" />
39
+
40
+ <!-- creates an index -->
41
+ <input array="test" index key="name" />
42
+ <!-- updates an index -->
43
+ <input array="test" index="test" key="name" />
44
+ <!-- deletes an index -->
45
+ <input array="test" index="test" key="name" value="$delete" />
46
+
47
+ <!-- creates an object with key name -->
48
+ <input array="test" object key="name" />
49
+ <!-- updates an object keys value -->
50
+ <input array="test" object="6465646af1e023c0aee760c2" key="name" />
51
+ <!-- deletes an object key if the object key is primary the object will be deleted -->
52
+ <input
53
+ array="test"
54
+ object="6465646af1e023c0aee760c2"
55
+ key="_id"
56
+ value="$delete" />
57
+
58
+ <!-- updates a key -->
59
+ <input
60
+ array="test"
61
+ object="6465646af1e023c0aee760c2"
62
+ key="name"
63
+ update />
64
+
65
+ <!-- updating the key name to a new key using value and/or value-prefix, value-suffix to generate a valid json sting {$update: value } -->
66
+ <input
67
+ array="test"
68
+ object="6465646af1e023c0aee760c2"
69
+ key="name"
70
+ value="{$update: firstName}" />
71
+
72
+ <br />
73
+
74
+ <a actions="save"></a>
75
+ </form>
76
+
77
+ <!-- Supports all data types -->
78
+ <h2>Supports updating arrays</h2>
79
+ <form>
80
+ <!-- inserts the value at the end of the array and returns index number. attribute "push" is optional, result is same -->
81
+ <input
82
+ array="test"
83
+ object="6465646af1e023c0aee760c2"
84
+ key="name[]"
85
+ push />
86
+
87
+ <!-- inserts the value at a specified index position of an array -->
88
+ <input
89
+ array="test"
90
+ object="6465646af1e023c0aee760c2"
91
+ key="name[3]"
92
+ splice />
37
93
 
94
+ <!-- updates the value at a specified index position of an array -->
95
+ <input
96
+ array="test"
97
+ object="6465646af1e023c0aee760c2"
98
+ key="name[0]" />
99
+
100
+ <!-- delete an item from the array by setting its value to "$delete" or "$slice" -->
101
+ <input
102
+ array="test"
103
+ object="6465646af1e023c0aee760c2"
104
+ key="name[0]"
105
+ value="$delete" />
106
+
107
+ <!-- delete the last item from the array by settting its value to "$delete" or "$slice" -->
108
+ <input
109
+ array="test"
110
+ object="6465646af1e023c0aee760c2"
111
+ key="name[]"
112
+ value="$delete" />
113
+
114
+ <!-- updating the key name will move the item to a new position -->
115
+ <input
116
+ array="test"
117
+ object="6465646af1e023c0aee760c2"
118
+ key="name[3]"
119
+ update />
120
+
121
+ <!-- updating the key name to a new key using value and/or value-prefix, value-suffix to generate a valid json sting {$update: value } -->
122
+ <input
123
+ array="test"
124
+ object="6465646af1e023c0aee760c2"
125
+ key="name[3]"
126
+ value="{$splice: name[1]}" />
127
+ </form>
128
+
129
+ <!-- Supports all input types -->
130
+ <h2>Supports all input types</h2>
131
+ <form array="apples" object="" realtime="false">
132
+ <input
133
+ type="text"
134
+ class="floating-label"
135
+ placeholder="Text"
136
+ key="name" />
137
+ <input
138
+ type="number"
139
+ class="floating-label"
140
+ placeholder="number"
141
+ key="number" />
142
+ <input
143
+ type="text"
144
+ class="floating-label"
145
+ placeholder="color"
146
+ key="color" />
147
+ <input
148
+ type="date"
149
+ class="floating-label"
150
+ placeholder="Date"
151
+ key="date" />
152
+ <input
153
+ type="time"
154
+ class="floating-label"
155
+ placeholder="Time"
156
+ key="time" />
157
+ <input
158
+ type="datetime-local"
159
+ class="floating-label"
160
+ placeholder="Date Time"
161
+ key="date-time" />
162
+ <textarea
163
+ class="floating-label"
164
+ placeholder="Text Area"
165
+ key="text_area"></textarea>
166
+ <!-- <cocreate-select
167
+ class="floating-label"
168
+ placeholder="Primary View"
169
+ key="navbar-menu-primary">
170
+ <input
171
+ placeholder="Search"
172
+ filter-next="[array]"
173
+ filter-search />
174
+ <cc-options
175
+ array="files"
176
+ render-selector="[template]"
177
+ class="overflow:auto">
178
+ <cc-option
179
+ template
180
+ value="{{object._id}}"
181
+ object="{{object._id}}"
182
+ render="object">
183
+ <h3>{{object.name}}</h3>
184
+ <h5>{{object._id}}</h5>
185
+ </cc-option>
186
+ </cc-options>
187
+ </cocreate-select> -->
188
+
189
+ <button
190
+ actions="save, reset"
191
+ class="position:fixed bottom:15px right:15px bg-blue grow-hover round">
192
+ <i
193
+ class="height:20px fill:#505050"
194
+ src="/assets/svg/save.svg"></i>
195
+ </button>
196
+ </form>
197
+
198
+ <!-- <script src="../dist/CoCreate-elements.js"></script> -->
199
+ <!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
38
200
  <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
39
201
  </body>
40
202
  </html>
package/docs/index.html CHANGED
@@ -5,10 +5,10 @@
5
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
7
  <meta
8
- name="description"
8
+ key="description"
9
9
  content="Fetch content into any html element by using attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags" />
10
10
  <meta
11
- name="keywords"
11
+ key="keywords"
12
12
  content="helper classes, utility classes, css framework, css library, inline style classes" />
13
13
  <meta name="robots" content="index,follow" />
14
14
  <meta
@@ -26,9 +26,9 @@
26
26
  <link
27
27
  rel="stylesheet"
28
28
  href="/docs/index.css"
29
- collection="files"
30
- document_id="60888216117c640e7596303f"
31
- name="src"
29
+ array="files"
30
+ object="60888216117c640e7596303f"
31
+ key="src"
32
32
  type="text/css"
33
33
  save="true" />
34
34
  <link rel="manifest" href="/manifest.webmanifest" />
@@ -41,20 +41,20 @@
41
41
  scroll="sticky-nav,hide-nav"
42
42
  scroll-up="10"
43
43
  scroll-down="10"
44
- collection="files"
45
- document_id="60395ef42b3ac232657040fd"
46
- name="src"></nav>
44
+ array="files"
45
+ object="60395ef42b3ac232657040fd"
46
+ key="src"></nav>
47
47
  <sidenav
48
48
  id="menuL"
49
49
  class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
50
50
  resizable
51
- resize-target="[content_id='content']"
51
+ resize-selector="[content_id='content']"
52
52
  resize-property="margin-left"
53
53
  resize-value="width">
54
54
  <menu
55
- collection="files"
56
- document_id="603717b07de7fb350ae9fec8"
57
- name="src"></menu>
55
+ array="files"
56
+ object="603717b07de7fb350ae9fec8"
57
+ key="src"></menu>
58
58
  <div resize="right"></div>
59
59
  </sidenav>
60
60
  <main
@@ -77,7 +77,7 @@
77
77
  share-width="700"
78
78
  share-media="https://cdn.cocreate.app/docs/elements.png"
79
79
  hover="display:block!important"
80
- hover-target=".social-networks">
80
+ hover-selector=".social-networks">
81
81
  <div class="display:none social-networks">
82
82
  <a
83
83
  class="margin-right:15px"
@@ -138,11 +138,11 @@
138
138
  class="border-bottom:1px_solid_lightgrey"
139
139
  scroll
140
140
  scroll-intersect="color:dodgerblue"
141
- scroll-target="#elements-install-section">
141
+ scroll-selector="#elements-install-section">
142
142
  <span
143
143
  class="display:flex align-items:center width:fit-content"
144
144
  hover="display:block!important"
145
- hover-target="[href='#elements-install']">
145
+ hover-selector="[href='#elements-install']">
146
146
  <h2 class="padding:5px_0px">Install</h2>
147
147
  <a
148
148
  class="margin-left:10px display:none"
@@ -164,11 +164,11 @@
164
164
  class="margin-top:80px border-bottom:1px_solid_lightgrey"
165
165
  scroll
166
166
  scroll-intersect="color:dodgerblue"
167
- scroll-target="#elements-usage-section">
167
+ scroll-selector="#elements-usage-section">
168
168
  <span
169
169
  class="display:flex align-items:center width:fit-content"
170
170
  hover="display:block!important"
171
- hover-target="[href='#elements-usage']">
171
+ hover-selector="[href='#elements-usage']">
172
172
  <h2 class="padding:5px_0px">Usage</h2>
173
173
  <a
174
174
  class="margin-left:10px display:none"
@@ -199,11 +199,11 @@
199
199
  class="margin-top:80px border-bottom:1px_solid_lightgrey"
200
200
  scroll
201
201
  scroll-intersect="color:dodgerblue"
202
- scroll-target="#elements-attributes-section">
202
+ scroll-selector="#elements-attributes-section">
203
203
  <span
204
204
  class="display:flex align-items:center width:fit-content"
205
205
  hover="display:block!important"
206
- hover-target="[href='#elements-attributes']">
206
+ hover-selector="[href='#elements-attributes']">
207
207
  <h2 class="padding:5px_0px">Attributes</h2>
208
208
  <a
209
209
  class="margin-left:10px display:none"
@@ -252,11 +252,11 @@
252
252
  class="border-bottom:1px_solid_lightgrey"
253
253
  scroll
254
254
  scroll-intersect="color:dodgerblue"
255
- scroll-target="#elements-demo-section">
255
+ scroll-selector="#elements-demo-section">
256
256
  <span
257
257
  class="display:flex align-items:center width:fit-content"
258
258
  hover="display:block!important"
259
- hover-target="[href='#elements-demo']">
259
+ hover-selector="[href='#elements-demo']">
260
260
  <h2 class="padding:5px_0px">Demo</h2>
261
261
  <a
262
262
  class="margin-left:10px display:none"
@@ -280,9 +280,9 @@
280
280
  <textarea
281
281
  type="code"
282
282
  lang="html"
283
- collection="demos"
284
- document_id=""
285
- name="demo"
283
+ array="demos"
284
+ object=""
285
+ key="demo"
286
286
  save="false"
287
287
  id="demo"
288
288
  class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
@@ -305,7 +305,7 @@
305
305
  show="#eye-slash"
306
306
  hide="#eye, #demo-preview"
307
307
  toggle="code-height"
308
- toggle-target="#demo-code"
308
+ toggle-selector="#demo-code"
309
309
  ><i
310
310
  class="height:18px fill:#505050"
311
311
  src="/assets/svg/eye.svg"></i
@@ -317,7 +317,7 @@
317
317
  show="#eye, #demo-preview"
318
318
  hide="#eye-slash"
319
319
  toggle="code-height"
320
- toggle-target="#demo-code"
320
+ toggle-selector="#demo-code"
321
321
  ><i
322
322
  class="height:20px fill:#505050"
323
323
  src="/assets/svg/eye-slash.svg"></i
@@ -344,7 +344,7 @@
344
344
  <a
345
345
  class="margin-right:5px"
346
346
  fullscreen
347
- fullscreen-target="#playground"></a>
347
+ fullscreen-selector="#playground"></a>
348
348
  </div>
349
349
  </div>
350
350
  <!-- End SandBox -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/elements",
3
- "version": "1.17.33",
3
+ "version": "1.19.0",
4
4
  "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
5
5
  "keywords": [
6
6
  "elements",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "scripts": {
27
27
  "start": "npx webpack --config webpack.config.js",
28
- "build": "NODE_ENV=production npx webpack --config webpack.config.js",
28
+ "build": "npx webpack --mode=production --config webpack.config.js",
29
29
  "dev": "npx webpack --config webpack.config.js --watch",
30
30
  "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
31
31
  },
@@ -34,7 +34,7 @@
34
34
  "url": "git+https://github.com/CoCreate-app/CoCreate-elements.git"
35
35
  },
36
36
  "author": "CoCreate LLC",
37
- "license": "MIT",
37
+ "license": "AGPL-3.0",
38
38
  "bugs": {
39
39
  "url": "https://github.com/CoCreate-app/CoCreate-elements/issues"
40
40
  },
@@ -58,11 +58,11 @@
58
58
  "webpack-log": "^3.0.1"
59
59
  },
60
60
  "dependencies": {
61
- "@cocreate/actions": "^1.8.31",
62
- "@cocreate/crud-client": "^1.21.23",
63
- "@cocreate/element-prototype": "^1.8.29",
64
- "@cocreate/filter": "^1.19.29",
65
- "@cocreate/observer": "^1.8.18",
66
- "@cocreate/utils": "^1.21.15"
61
+ "@cocreate/actions": "^1.9.0",
62
+ "@cocreate/crud-client": "^1.22.0",
63
+ "@cocreate/element-prototype": "^1.9.0",
64
+ "@cocreate/filter": "^1.20.0",
65
+ "@cocreate/observer": "^1.9.0",
66
+ "@cocreate/utils": "^1.22.0"
67
67
  }
68
68
  }
package/src/form.js ADDED
@@ -0,0 +1,143 @@
1
+ import Observer from '@cocreate/observer';
2
+ import { getAttributeNames, ObjectId } from '@cocreate/utils';
3
+ import Action from '@cocreate/actions';
4
+ import '@cocreate/element-prototype';
5
+
6
+ /**
7
+ * @param elements
8
+ */
9
+ function init(elements) {
10
+ // Returns an array of elements.
11
+ if (!elements)
12
+ elements = document.querySelectorAll('form');
13
+ // If elements is an array of elements returns an array of elements.
14
+ else if (!Array.isArray(elements))
15
+ elements = [elements]
16
+ for (let element of elements) {
17
+ runObjectId(element);
18
+ setAttribute(element);
19
+ disableAutoFill(element);
20
+ // element.setData = () => { }
21
+ // element.getData = () => getFormData(element)
22
+ }
23
+ }
24
+
25
+ /**
26
+ * @param form
27
+ */
28
+ function runObjectId(form) {
29
+ let elements = form.querySelectorAll("[object='ObjectId()']")
30
+ let arrays = []
31
+ // Add a array to the array list
32
+ for (let i = 0; i < elements.length; i++) {
33
+ elements[i].setAttribute('object', '')
34
+ let array = elements[i].getAttribute('array')
35
+ // Add a array to the array list.
36
+ if (array && !arrays.includes(array))
37
+ arrays.push(array)
38
+
39
+ }
40
+ // Sets the object id for each array in the array.
41
+ for (let i = 0; i < arrays.length; i++) {
42
+ // TODO: needs access to setTypeValue
43
+ setTypeValue(form, { array: arrays[i], object: [{ _id: ObjectId() }] });
44
+ }
45
+ }
46
+
47
+ /**
48
+ * @param form
49
+ */
50
+ function setAttribute(form) {
51
+ let elements = form.querySelectorAll('[key]');
52
+
53
+ for (let attribute of form.attributes) {
54
+ let variable = window.CoCreateConfig.attributes[attribute.name]
55
+
56
+ // Set the attribute of all elements in the variable
57
+ if (variable) {
58
+ for (let el of elements) {
59
+ // Set the value of the attribute.
60
+ if (!el.getAttribute(attribute.name)) {
61
+ el.setAttribute(attribute.name, attribute.value);
62
+ }
63
+ }
64
+ }
65
+ }
66
+ }
67
+
68
+ /**
69
+ * @param element
70
+ */
71
+ function disableAutoFill(element) {
72
+ // Clear the text area and set the autocomplete attribute to off.
73
+ if (element.tagName == "TEXTAREA") {
74
+ element.value = "";
75
+ element.setAttribute("autocomplete", "off");
76
+ }
77
+ // Set the autocomplete attribute to off.
78
+ if (!element.hasAttribute("autocomplete")) {
79
+ element.setAttribute('autocomplete', "off");
80
+ }
81
+ }
82
+
83
+ /**
84
+ * @param btn
85
+ */
86
+ function reset(btn) {
87
+ const form = btn.closest("form");
88
+ let formElements = new Map();
89
+ for (let element of form) {
90
+ formElements.set(element, '')
91
+ // Set object attribute to object if it exists
92
+ if (element.hasAttribute('object'))
93
+ element.setAttribute('object', '');
94
+ // If the element is a button and has a button with the same key, set the value to the value of the button.
95
+ if (!['BUTTON'].includes(element.tagName))
96
+ element.setValue('')
97
+ }
98
+
99
+ let elements = form.querySelectorAll('[object], [key]');
100
+ for (let element of elements) {
101
+ // Set the object id attribute of the element to the object id if it has not yet been set.
102
+ if (!formElements.has(element)) {
103
+ // Set object attribute to object if it exists
104
+ if (element.hasAttribute('object'))
105
+ element.setAttribute('object', '');
106
+ element.setValue('')
107
+ }
108
+ }
109
+
110
+ form.reset();
111
+ // dispatch input event to rest filter??
112
+ document.dispatchEvent(new CustomEvent('reset', {
113
+ detail: {}
114
+ }));
115
+ }
116
+
117
+ Observer.init({
118
+ name: 'CoCreateForm',
119
+ observe: ['addedNodes'],
120
+ target: 'form',
121
+ callback: mutation => init(mutation.target)
122
+ });
123
+
124
+ Observer.init({
125
+ name: 'CoCreateForm',
126
+ observe: ['attributes'],
127
+ attributeName: getAttributeNames(['storage', 'database', 'array', 'object', 'index']),
128
+ target: 'form',
129
+ callback: mutation => mutation.target.tagName === "FORM" &&
130
+ setAttribute(mutation.target)
131
+ });
132
+
133
+ Action.init({
134
+ name: "reset",
135
+ endEvent: "reset",
136
+ callback: (action) => {
137
+ reset(action.element);
138
+ }
139
+ });
140
+
141
+ init();
142
+
143
+ export default { reset };