@cocreate/render 1.40.4 → 1.41.1

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 (4) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/docs/index.html +13 -35
  3. package/package.json +6 -6
  4. package/src/index.js +47 -11
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ ## [1.41.1](https://github.com/CoCreate-app/CoCreate-render/compare/v1.41.0...v1.41.1) (2024-06-12)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * bump cocreate dependencies ([159b84d](https://github.com/CoCreate-app/CoCreate-render/commit/159b84d5def4a8d2e430e50d39844f6aeeb49174))
7
+ * svg icon class ([9a1981d](https://github.com/CoCreate-app/CoCreate-render/commit/9a1981de65735c15f0c98642db4a189beebb5e64))
8
+
9
+ # [1.41.0](https://github.com/CoCreate-app/CoCreate-render/compare/v1.40.4...v1.41.0) (2024-05-19)
10
+
11
+
12
+ ### Features
13
+
14
+ * attribute render-type to define type of data being render ([4083e6f](https://github.com/CoCreate-app/CoCreate-render/commit/4083e6fa82728233b5d64e8071dc1315bd7c6056))
15
+
1
16
  ## [1.40.4](https://github.com/CoCreate-app/CoCreate-render/compare/v1.40.3...v1.40.4) (2024-04-29)
2
17
 
3
18
 
package/docs/index.html CHANGED
@@ -81,43 +81,33 @@
81
81
  class="margin-right:15px"
82
82
  share-network="twitter"
83
83
  title="Share on twitter"
84
- ><i
85
- class="height:20px fill:#505050"
86
- src="/assets/svg/twitter.svg"></i
84
+ ><i src="/assets/svg/twitter.svg"></i
87
85
  ></a>
88
86
  <a
89
87
  class="margin-right:15px"
90
88
  share-network="facebook"
91
89
  title="Share on Facebook"
92
- ><i
93
- class="height:20px fill:#505050"
94
- src="/assets/svg/facebook.svg"></i
90
+ ><i src="/assets/svg/facebook.svg"></i
95
91
  ></a>
96
92
  <a
97
93
  class="margin-right:15px"
98
94
  share-network="instagram"
99
95
  title="Share on instagram"
100
- ><i
101
- class="height:20px fill:#505050"
102
- src="/assets/svg/instagram.svg"></i
96
+ ><i src="/assets/svg/instagram.svg"></i
103
97
  ></a>
104
98
  </div>
105
99
  <a
106
100
  class="margin-right:15px"
107
101
  share-network="share"
108
102
  title="Share on share"
109
- ><i
110
- class="height:20px fill:#505050"
111
- src="/assets/svg/share-alt.svg"></i
103
+ ><i src="/assets/svg/share-alt.svg"></i
112
104
  ></a>
113
105
  </div>
114
106
  <a
115
107
  href="https://github.com/CoCreate-app/CoCreate-dnd"
116
108
  target="_blank"
117
109
  class=""
118
- ><i
119
- class="height:20px fill:#505050"
120
- src="/assets/svg/github.svg"></i
110
+ ><i src="/assets/svg/github.svg"></i
121
111
  ></a>
122
112
  </div>
123
113
  </div>
@@ -143,9 +133,7 @@
143
133
  <a
144
134
  class="margin-left:10px display:none"
145
135
  href="#render-install"
146
- ><i
147
- class="height:20px fill:#505050"
148
- src="/assets/svg/link.svg"></i
136
+ ><i src="/assets/svg/link.svg"></i
149
137
  ></a>
150
138
  </span>
151
139
  </div>
@@ -172,9 +160,7 @@
172
160
  <a
173
161
  class="margin-left:10px display:none"
174
162
  href="#render-usage"
175
- ><i
176
- class="height:20px fill:#505050"
177
- src="/assets/svg/link.svg"></i
163
+ ><i src="/assets/svg/link.svg"></i
178
164
  ></a>
179
165
  </span>
180
166
  </div>
@@ -283,9 +269,7 @@
283
269
  <a
284
270
  class="margin-left:10px display:none"
285
271
  href="#render-attributes"
286
- ><i
287
- class="height:20px fill:#505050"
288
- src="/assets/svg/link.svg"></i
272
+ ><i src="/assets/svg/link.svg"></i
289
273
  ></a>
290
274
  </span>
291
275
  </div>
@@ -468,9 +452,7 @@
468
452
  <a
469
453
  class="margin-left:10px display:none"
470
454
  href="#render-demo"
471
- ><i
472
- class="height:20px fill:#505050"
473
- src="/assets/svg/link.svg"></i
455
+ ><i src="/assets/svg/link.svg"></i
474
456
  ></a>
475
457
  </span>
476
458
  </div>
@@ -514,7 +496,7 @@
514
496
  toggle="code-height"
515
497
  toggle-selector="#demo-code"
516
498
  ><i
517
- class="height:18px fill:#505050"
499
+ class="height:18px"
518
500
  src="/assets/svg/eye.svg"></i
519
501
  ></a>
520
502
  <a
@@ -525,18 +507,14 @@
525
507
  hide="#eye-slash"
526
508
  toggle="code-height"
527
509
  toggle-selector="#demo-code"
528
- ><i
529
- class="height:20px fill:#505050"
530
- src="/assets/svg/eye-slash.svg"></i
510
+ ><i src="/assets/svg/eye-slash.svg"></i
531
511
  ></a>
532
512
  <a
533
513
  class="margin-right:10px"
534
514
  id="code"
535
515
  show="#code-slash"
536
516
  hide="#code, #demo-code"
537
- ><i
538
- class="height:20px fill:#505050"
539
- src="/assets/svg/code.svg"></i
517
+ ><i src="/assets/svg/code.svg"></i
540
518
  ></a>
541
519
  <a
542
520
  class="margin-right:10px"
@@ -545,7 +523,7 @@
545
523
  show="#code, #demo-code"
546
524
  hide="#code-slash"
547
525
  ><i
548
- class="display:flex height:18px fill:#505050"
526
+ class="height:18px"
549
527
  src="/assets/svg/code.svg"></i
550
528
  ></a>
551
529
  <a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/render",
3
- "version": "1.40.4",
3
+ "version": "1.41.1",
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",
@@ -58,10 +58,10 @@
58
58
  "webpack-log": "^3.0.1"
59
59
  },
60
60
  "dependencies": {
61
- "@cocreate/actions": "^1.18.1",
62
- "@cocreate/api": "^1.20.5",
63
- "@cocreate/element-prototype": "^1.22.2",
64
- "@cocreate/observer": "^1.16.0",
65
- "@cocreate/utils": "^1.33.6"
61
+ "@cocreate/actions": "^1.18.2",
62
+ "@cocreate/api": "^1.21.0",
63
+ "@cocreate/element-prototype": "^1.23.0",
64
+ "@cocreate/observer": "^1.16.1",
65
+ "@cocreate/utils": "^1.33.7"
66
66
  }
67
67
  }
package/src/index.js CHANGED
@@ -269,7 +269,14 @@ async function renderTemplate(template, data, key, index, keyPath) {
269
269
  let renderAs = template.element.getAttribute('render-as') || key;
270
270
  template.renderAs = renderAs
271
271
 
272
- if (key && !Array.isArray(renderData)) {
272
+ let renderType
273
+ if (templateData.source && templateData.source.element)
274
+ renderType = templateData.source.element.getAttribute('render-type');
275
+
276
+ if (key && !Array.isArray(renderData) || renderType === "object") {
277
+ if (renderType && Array.isArray(renderData) && renderData.length === 1)
278
+ renderData = renderData[0]
279
+
273
280
  let exclude = template.element.getAttribute('render-exclude') || ''
274
281
  if (exclude) {
275
282
  exclude = exclude.replace(/ /g, '').split(",")
@@ -335,7 +342,10 @@ async function renderTemplate(template, data, key, index, keyPath) {
335
342
  } else
336
343
  object = renderData[i]
337
344
 
338
- await renderValues(clone.element, object, key, renderAs);
345
+ let index
346
+ if (key !== 'data')
347
+ index = i
348
+ await renderValues(clone.element, object, key, renderAs, null, null, index);
339
349
  insertElement(template, clone.element, index);
340
350
  }
341
351
  }
@@ -413,7 +423,7 @@ function insertElement(template, element, index, currentIndex) {
413
423
  }
414
424
  }
415
425
 
416
- async function renderValues(node, data, key, renderAs, keyPath, parent) {
426
+ async function renderValues(node, data, key, renderAs, keyPath, parent, index) {
417
427
  if (!data) return;
418
428
 
419
429
  let renderedNode = renderedNodes.get(node)
@@ -486,8 +496,8 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
486
496
  let namePlaceholder = renderedAttribute.placeholder.name || name;
487
497
  let valuePlaceholder = renderedAttribute.placeholder.value || value;
488
498
 
489
- name = await renderValue(attr, data, namePlaceholder, renderAs, renderedAttribute);
490
- value = await renderValue(attr, data, valuePlaceholder, renderAs, renderedAttribute);
499
+ name = await renderValue(attr, data, namePlaceholder, renderAs, renderedAttribute, index);
500
+ value = await renderValue(attr, data, valuePlaceholder, renderAs, renderedAttribute, index);
491
501
  if (namePlaceholder.includes('{{') && name) {
492
502
  const attributes = name.match(/([^\s]+="[^"]*"|[^\s]+)/g) || [];
493
503
  attributes.forEach(attr => {
@@ -526,7 +536,7 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
526
536
  } else if (node.childNodes.length > 0) {
527
537
  // Array.from(node.childNodes).forEach(childNode => {
528
538
  for (let childNode of node.childNodes) {
529
- await renderValues(childNode, data, key, renderAs, keyPath, parent);
539
+ await renderValues(childNode, data, key, renderAs, keyPath, parent, index);
530
540
  }
531
541
  // });
532
542
  }
@@ -544,7 +554,7 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
544
554
  return
545
555
  textContent = renderedNode.placeholder || node.textContent;
546
556
 
547
- text = await renderValue(node, data, textContent, renderAs, renderedNode);
557
+ text = await renderValue(node, data, textContent, renderAs, renderedNode, index);
548
558
 
549
559
  if (text || text == "") {
550
560
  if (text != renderedNode.text) {
@@ -573,7 +583,7 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
573
583
  if (node.childNodes.length > 0) {
574
584
  // Array.from(node.childNodes).forEach(childNode => {
575
585
  for (let childNode of node.childNodes) {
576
- await renderValues(childNode, data, key, renderAs, keyPath, parent);
586
+ await renderValues(childNode, data, key, renderAs, keyPath, parent, index);
577
587
  }
578
588
  // });
579
589
  }
@@ -582,8 +592,9 @@ async function renderValues(node, data, key, renderAs, keyPath, parent) {
582
592
  }
583
593
  }
584
594
 
585
- async function renderValue(node, data, placeholder, renderAs, renderedNode) {
595
+ async function renderValue(node, data, placeholder, renderAs, renderedNode, index) {
586
596
  let output = placeholder;
597
+
587
598
  let regex = /\{([^{}]+)\}/
588
599
  let omitted = {}
589
600
 
@@ -593,7 +604,10 @@ async function renderValue(node, data, placeholder, renderAs, renderedNode) {
593
604
  if (match) {
594
605
  let value;
595
606
  try {
596
- if (match[1].startsWith('[') && match[1].endsWith(']')) { // {[]} - Dot-notation
607
+
608
+ if (match[1] === 'index' && index >= 0) { // {[]} - Dot-notation
609
+ value = index
610
+ } else if (match[1].startsWith('[') && match[1].endsWith(']')) { // {[]} - Dot-notation
597
611
  match[1] = match[1].slice(1, -1);
598
612
  value = getRenderValue(node, data, match[1], renderAs);
599
613
  } else if (match[1].startsWith('(') && match[1].endsWith(')')) { // {()} - CSS Selector and JSON Structure
@@ -632,7 +646,7 @@ async function renderValue(node, data, placeholder, renderAs, renderedNode) {
632
646
  console.error(error)
633
647
  }
634
648
 
635
- if (value || value === "") {
649
+ if (value || value === "" || value >= 0) {
636
650
  if (typeof value === "object") {
637
651
  value = JSON.stringify(value, null, 2);
638
652
  }
@@ -660,6 +674,18 @@ async function renderValue(node, data, placeholder, renderAs, renderedNode) {
660
674
 
661
675
 
662
676
  function getRenderValue(node, data, key, renderAs) {
677
+ // TODO: handle operators directly from render placholders
678
+ // <span>{{ $toLocaleDateString.object.created.on }}</span>
679
+
680
+ let operator
681
+ if (key.startsWith('$')) {
682
+ let keys = key.split('.');
683
+ operator = keys.shift();
684
+ if (keys.length > 0) {
685
+ key = keys.join('.');
686
+ }
687
+ }
688
+
663
689
  let value = getValueFromObject(data, key);
664
690
 
665
691
  if (!value && value !== '' && node) {
@@ -728,6 +754,16 @@ function getRenderValue(node, data, key, renderAs) {
728
754
 
729
755
  } while (!value && parentTemplate)
730
756
  }
757
+
758
+ if (operator) {
759
+ if (value) {
760
+ console.log('return processed render value using operator', value)
761
+ } else {
762
+ console.log('return render operator', operator)
763
+
764
+ }
765
+ }
766
+
731
767
  return value
732
768
  }
733
769