@cocreate/elements 1.35.4 → 1.35.6

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 (6) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/demo/index.html +1 -3
  3. package/docs/index.html +13 -35
  4. package/package.json +8 -8
  5. package/src/form.js +4 -2
  6. package/src/index.js +59 -12
package/CHANGELOG.md CHANGED
@@ -1,3 +1,22 @@
1
+ ## [1.35.6](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.35.5...v1.35.6) (2024-06-19)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * add method update.object if upsert and filter ([3730438](https://github.com/CoCreate-app/CoCreate-elements/commit/37304389f0447cd24009c8deb406c48b85974bd7))
7
+ * handle isFIlter false in read function and improved handling of filter and render data ([85b6d00](https://github.com/CoCreate-app/CoCreate-elements/commit/85b6d00c128f27f378e7f5687f5fddf0a01268fe))
8
+ * skip-attribute to prevent form attributes from applying to an element ([72f18b3](https://github.com/CoCreate-app/CoCreate-elements/commit/72f18b3aa7dc929e300ddd225e3d961cc0007400))
9
+
10
+ ## [1.35.5](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.35.4...v1.35.5) (2024-06-12)
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * bump cocreate dependencies ([2a366c3](https://github.com/CoCreate-app/CoCreate-elements/commit/2a366c3c21f6daf6bbb74608500612c8fca588ac))
16
+ * comment logs ([f79fd4e](https://github.com/CoCreate-app/CoCreate-elements/commit/f79fd4ebc84e1f8b5ace052ea7fb6e86d91c1e0e))
17
+ * reset removes object from form element ([637d7d9](https://github.com/CoCreate-app/CoCreate-elements/commit/637d7d9a05899dcb69fb63f2f39ad7126b661dcb))
18
+ * svg icon class ([84d9ba3](https://github.com/CoCreate-app/CoCreate-elements/commit/84d9ba345ffaa1a3da0750c127ca1f8b739658a7))
19
+
1
20
  ## [1.35.4](https://github.com/CoCreate-app/CoCreate-elements/compare/v1.35.3...v1.35.4) (2024-05-19)
2
21
 
3
22
 
package/demo/index.html CHANGED
@@ -189,9 +189,7 @@
189
189
  <button
190
190
  actions="save, reset"
191
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>
192
+ <i src="/assets/svg/save.svg"></i>
195
193
  </button>
196
194
  </form>
197
195
 
package/docs/index.html CHANGED
@@ -83,43 +83,33 @@
83
83
  class="margin-right:15px"
84
84
  share-network="twitter"
85
85
  title="Share on twitter"
86
- ><i
87
- class="height:20px fill:#505050"
88
- src="/assets/svg/twitter.svg"></i
86
+ ><i src="/assets/svg/twitter.svg"></i
89
87
  ></a>
90
88
  <a
91
89
  class="margin-right:15px"
92
90
  share-network="facebook"
93
91
  title="Share on Facebook"
94
- ><i
95
- class="height:20px fill:#505050"
96
- src="/assets/svg/facebook.svg"></i
92
+ ><i src="/assets/svg/facebook.svg"></i
97
93
  ></a>
98
94
  <a
99
95
  class="margin-right:15px"
100
96
  share-network="instagram"
101
97
  title="Share on instagram"
102
- ><i
103
- class="height:20px fill:#505050"
104
- src="/assets/svg/instagram.svg"></i
98
+ ><i src="/assets/svg/instagram.svg"></i
105
99
  ></a>
106
100
  </div>
107
101
  <a
108
102
  class="margin-right:15px"
109
103
  share-network="share"
110
104
  title="Share on share"
111
- ><i
112
- class="height:20px fill:#505050"
113
- src="/assets/svg/share-alt.svg"></i
105
+ ><i src="/assets/svg/share-alt.svg"></i
114
106
  ></a>
115
107
  </div>
116
108
  <a
117
109
  href="https://github.com/CoCreate-app/CoCreate-elements"
118
110
  target="_blank"
119
111
  class="margin-right:15px"
120
- ><i
121
- class="height:20px fill:#505050"
122
- src="/assets/svg/github.svg"></i
112
+ ><i src="/assets/svg/github.svg"></i
123
113
  ></a>
124
114
  </div>
125
115
  </div>
@@ -147,9 +137,7 @@
147
137
  <a
148
138
  class="margin-left:10px display:none"
149
139
  href="#elements-install"
150
- ><i
151
- class="height:20px fill:#505050"
152
- src="/assets/svg/link.svg"></i
140
+ ><i src="/assets/svg/link.svg"></i
153
141
  ></a>
154
142
  </span>
155
143
  </div>
@@ -173,9 +161,7 @@
173
161
  <a
174
162
  class="margin-left:10px display:none"
175
163
  href="#elements-usage"
176
- ><i
177
- class="height:20px fill:#505050"
178
- src="/assets/svg/link.svg"></i
164
+ ><i src="/assets/svg/link.svg"></i
179
165
  ></a>
180
166
  </span>
181
167
  </div>
@@ -208,9 +194,7 @@
208
194
  <a
209
195
  class="margin-left:10px display:none"
210
196
  href="#elements-attributes"
211
- ><i
212
- class="height:20px fill:#505050"
213
- src="/assets/svg/link.svg"></i
197
+ ><i src="/assets/svg/link.svg"></i
214
198
  ></a>
215
199
  </span>
216
200
  </div>
@@ -261,9 +245,7 @@
261
245
  <a
262
246
  class="margin-left:10px display:none"
263
247
  href="#elements-demo"
264
- ><i
265
- class="height:20px fill:#505050"
266
- src="/assets/svg/link.svg"></i
248
+ ><i src="/assets/svg/link.svg"></i
267
249
  ></a>
268
250
  </span>
269
251
  </div>
@@ -307,7 +289,7 @@
307
289
  toggle="code-height"
308
290
  toggle-selector="#demo-code"
309
291
  ><i
310
- class="height:18px fill:#505050"
292
+ class="height:18px"
311
293
  src="/assets/svg/eye.svg"></i
312
294
  ></a>
313
295
  <a
@@ -318,18 +300,14 @@
318
300
  hide="#eye-slash"
319
301
  toggle="code-height"
320
302
  toggle-selector="#demo-code"
321
- ><i
322
- class="height:20px fill:#505050"
323
- src="/assets/svg/eye-slash.svg"></i
303
+ ><i src="/assets/svg/eye-slash.svg"></i
324
304
  ></a>
325
305
  <a
326
306
  class="margin-right:10px"
327
307
  id="code"
328
308
  show="#code-slash"
329
309
  hide="#code, #demo-code"
330
- ><i
331
- class="height:20px fill:#505050"
332
- src="/assets/svg/code.svg"></i
310
+ ><i src="/assets/svg/code.svg"></i
333
311
  ></a>
334
312
  <a
335
313
  class="margin-right:10px"
@@ -338,7 +316,7 @@
338
316
  show="#code, #demo-code"
339
317
  hide="#code-slash"
340
318
  ><i
341
- class="display:flex height:18px fill:#505050"
319
+ class="height:18px"
342
320
  src="/assets/svg/code.svg"></i
343
321
  ></a>
344
322
  <a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/elements",
3
- "version": "1.35.4",
3
+ "version": "1.35.6",
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",
@@ -58,12 +58,12 @@
58
58
  "webpack-log": "^3.0.1"
59
59
  },
60
60
  "dependencies": {
61
- "@cocreate/actions": "^1.18.1",
62
- "@cocreate/crud-client": "^1.33.8",
63
- "@cocreate/element-prototype": "^1.22.2",
64
- "@cocreate/filter": "^1.28.6",
65
- "@cocreate/observer": "^1.16.0",
66
- "@cocreate/render": "^1.40.3",
67
- "@cocreate/utils": "^1.33.6"
61
+ "@cocreate/actions": "^1.18.2",
62
+ "@cocreate/crud-client": "^1.33.9",
63
+ "@cocreate/element-prototype": "^1.23.0",
64
+ "@cocreate/filter": "^1.29.0",
65
+ "@cocreate/observer": "^1.16.1",
66
+ "@cocreate/render": "^1.41.0",
67
+ "@cocreate/utils": "^1.33.7"
68
68
  }
69
69
  }
package/src/form.js CHANGED
@@ -76,7 +76,7 @@ function setAttribute(form, elements) {
76
76
  if (variable) {
77
77
  for (let el of elements) {
78
78
  // Set the value of the attribute.
79
- if (!el.getAttribute(attribute.name)) {
79
+ if (!el.getAttribute(attribute.name) && !el.hasAttribute('skip-attribute')) {
80
80
  el.setAttribute(attribute.name, form.getAttribute(attribute.name));
81
81
  }
82
82
  }
@@ -103,6 +103,8 @@ function disableAutoFill(element) {
103
103
  * @param form
104
104
  */
105
105
  function reset(form) {
106
+ if (form.hasAttribute('object'))
107
+ form.setAttribute('object', '');
106
108
  let formElements = new Map();
107
109
  for (let element of form) {
108
110
  formElements.set(element, '')
@@ -153,7 +155,7 @@ Action.init({
153
155
  endEvent: "reset",
154
156
  callback: (action) => {
155
157
  if (action.form)
156
- send(action.form);
158
+ reset(action.form);
157
159
  }
158
160
  });
159
161
 
package/src/index.js CHANGED
@@ -234,11 +234,11 @@ async function read(element, data, dataKey) {
234
234
 
235
235
  for (let el of element) {
236
236
  const isRead = el.getAttribute('read');
237
- if (isRead !== 'false' && !el.hasRead) {
237
+ if (isRead !== 'false' && !el.hasRead && (!data.$filter || data.$filter && data.$filter.isFilter !== false)) {
238
238
  el.hasRead = true
239
239
  delay.elements.set(el, true)
240
240
  } else {
241
- console.log('read skipped', el)
241
+ // console.log('read skipped', el)
242
242
  }
243
243
  }
244
244
 
@@ -362,9 +362,6 @@ async function setData(element, data) {
362
362
 
363
363
  }
364
364
 
365
- if (!data[type] || !data[type].length)
366
- continue;
367
-
368
365
  let action = el.getAttribute('actions')
369
366
  if (action && ['database', 'array', 'object', 'key'].includes(action)) continue;
370
367
 
@@ -372,6 +369,9 @@ async function setData(element, data) {
372
369
  if (el.getFilter || el.renderValue)
373
370
  await filterData(el, data, type, key)
374
371
  else {
372
+ if (!data[type] || !data[type].length)
373
+ continue;
374
+
375
375
  if (key) {
376
376
  let value
377
377
  if (key.includes('$length')) {
@@ -454,11 +454,17 @@ async function filterData(element, data, type, key) {
454
454
  }
455
455
  }
456
456
 
457
+ let isRendered = element.querySelector('[render-clone]');
458
+
457
459
  if (operator) {
458
460
  element.setValue(value);
459
- } else if (element.getFilter && data.method && !data.method.endsWith('.read'))
461
+ } else if (element.renderValue && data.method && data.method.endsWith('.read') && data.$filter && (data.$filter.overwrite || !isRendered)) {
462
+ await element.renderValue(data);
463
+ } else if (data.$filter && data.$filter.loadmore || data.method && data.method.endsWith('.read') && isRendered) {
464
+ await loadMore(element, data, type)
465
+ } else if (element.getFilter && data.method && !data.method.endsWith('.read')) {
460
466
  await checkFilters(element, data, type)
461
- else if (element.renderValue) {
467
+ } else if (element.renderValue) {
462
468
  await element.renderValue(data);
463
469
  } else if (key === '$length') {
464
470
  element.setValue(data[type].length);
@@ -481,6 +487,30 @@ async function filterData(element, data, type, key) {
481
487
  element.dispatchEvent(evt);
482
488
  }
483
489
 
490
+ async function loadMore(element, data, type, sort) {
491
+ let Data = { ...data };
492
+ let renderedData = await element.getData();
493
+ if (!renderedData || !renderedData[type]) {
494
+ return;
495
+ }
496
+ for (let i = 0; i < Data[type].length; i++) {
497
+ let index;
498
+ if (type === 'object') {
499
+ index = renderedData[type].findIndex(obj => obj._id === Data[type][i]._id);
500
+ } else {
501
+ index = renderedData[type].findIndex(obj => obj.name === Data[type][i].name);
502
+ }
503
+
504
+ if (index >= 0) {
505
+ Data[type].splice(i, 1);
506
+ i--; // Adjust the index to account for the removed item
507
+ }
508
+ }
509
+ if (Data[type].length > 0) {
510
+ await element.renderValue(Data);
511
+ }
512
+ }
513
+
484
514
  async function checkFilters(element, data, type) {
485
515
  let Data
486
516
  if (!element.getData) {
@@ -702,15 +732,30 @@ async function getData(form) {
702
732
 
703
733
  // console.log(type, value, data)
704
734
  if (!Data[Data.type] && Data.key) {
735
+ if (!value)
736
+ continue
737
+ else if (Array.isArray(value) && !value.length)
738
+ continue
739
+
705
740
  Data.method = Data.type + '.create'
706
741
  if (Data.type === 'object') {
707
- if (typeof Data.object === 'string')
708
- Data.object = { _id: Data.object }
709
- else if (!Data.object)
742
+ if (!Data.object)
710
743
  Data.object = {}
744
+ else if (typeof Data.object === 'string')
745
+ Data.object = { _id: Data.object }
711
746
 
712
- if (Data.key)
713
- Data.object[Data.key] = value
747
+
748
+ if (Data.key) {
749
+ if (Data.key == '{}') {
750
+ if (Array.isArray(value)) {
751
+ Data.object = value
752
+ } else
753
+ Data.object = { ...Data.object, ...value }
754
+ } else
755
+ Data.object[Data.key] = value
756
+ }
757
+ if (Data.isUpsert && Data.$filter)
758
+ Data.method = 'object.update'
714
759
 
715
760
  } else
716
761
  Data[Data.type] = value
@@ -1090,6 +1135,8 @@ Observer.init({
1090
1135
  observe: ['addedNodes'],
1091
1136
  target: '[render-clone]',
1092
1137
  callback: function (mutation) {
1138
+ if (!mutation.parentElement.hasAttribute('dnd'))
1139
+ return
1093
1140
  let delayTimer = debounce.get(mutation)
1094
1141
  clearTimeout(delayTimer);
1095
1142
  debounce.delete(mutation.target)