@onetype/framework 2.0.26 → 2.0.27

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 (65) hide show
  1. package/addons/core/assets/back/functions/utils/transform.js +1 -1
  2. package/addons/render/directives/front/js/functions/process/data.js +0 -1
  3. package/addons/render/transforms/addon.js +2 -0
  4. package/addons/render/transforms/functions/data.js +21 -0
  5. package/addons/render/transforms/functions/run.js +11 -0
  6. package/addons/render/transforms/item/functions/load.js +55 -0
  7. package/addons/render/transforms/item/functions/run.js +12 -0
  8. package/addons/render/transforms/items/directives/transform.js +15 -18
  9. package/lib/items/elements/global/heading/heading.css +1 -1
  10. package/lib/items/elements/global/markdown/markdown.js +207 -3
  11. package/lib/items/elements/{sections → navigation}/navbar/navbar.css +9 -9
  12. package/lib/items/elements/{sections → navigation}/navbar/navbar.js +2 -2
  13. package/lib/items/elements/navigation/sidebar/sidebar.css +101 -0
  14. package/lib/items/elements/navigation/sidebar/sidebar.js +56 -0
  15. package/lib/items/elements/{global → navigation}/tabs/tabs.css +6 -6
  16. package/lib/items/elements/{global → navigation}/tabs/tabs.js +2 -2
  17. package/lib/items/elements/sections/pricing/pricing.css +148 -0
  18. package/lib/items/elements/sections/pricing/pricing.js +76 -0
  19. package/lib/items/transforms/accordion/accordion.js +139 -141
  20. package/lib/items/transforms/chart/area.js +130 -133
  21. package/lib/items/transforms/chart/bar.js +116 -119
  22. package/lib/items/transforms/chart/bubble.js +142 -145
  23. package/lib/items/transforms/chart/doughnut.js +104 -107
  24. package/lib/items/transforms/chart/line.js +127 -130
  25. package/lib/items/transforms/chart/pie.js +102 -105
  26. package/lib/items/transforms/chart/radar.js +134 -137
  27. package/lib/items/transforms/chart/scatter.js +127 -130
  28. package/lib/items/transforms/codeflask/codeflask.js +10 -12
  29. package/lib/items/transforms/codemirror/codemirror.js +186 -189
  30. package/lib/items/transforms/comparison/comparison.js +130 -133
  31. package/lib/items/transforms/heatmap/heatmap.js +406 -407
  32. package/lib/items/transforms/interact/interact.js +240 -241
  33. package/lib/items/transforms/particles/particles.js +282 -283
  34. package/lib/items/transforms/sparkline/sparkline.js +207 -208
  35. package/lib/items/transforms/swiper/swiper.js +115 -118
  36. package/lib/items/transforms/tabs/tabs.js +383 -384
  37. package/lib/items/transforms/typed/typed.js +146 -147
  38. package/lib/load.js +8 -16
  39. package/lib/src/mixins/addons.js +10 -10
  40. package/lib/styles/variables.css +1 -1
  41. package/package.json +1 -1
  42. package/addons/render/transforms/functions/load/assets.js +0 -49
  43. /package/{addons/render/directives/front/js/items → lib/items/directives}/100-if.js +0 -0
  44. /package/{addons/render/directives/front/js/items → lib/items/directives}/1000-render.js +0 -0
  45. /package/{addons/render/directives/front/js/items → lib/items/directives}/110-show.js +0 -0
  46. /package/{addons/render/directives/front/js/items → lib/items/directives}/160-slot.js +0 -0
  47. /package/{addons/render/directives/front/js/items → lib/items/directives}/200-for.js +0 -0
  48. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-blur.js +0 -0
  49. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-change.js +0 -0
  50. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-click-outside.js +0 -0
  51. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-click.js +0 -0
  52. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-double-click.js +0 -0
  53. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-focus.js +0 -0
  54. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-input.js +0 -0
  55. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-keydown.js +0 -0
  56. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-keyup.js +0 -0
  57. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-mouse-enter.js +0 -0
  58. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-mouse-leave.js +0 -0
  59. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-mouse-move.js +0 -0
  60. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-scroll.js +0 -0
  61. /package/{addons/render/directives/front/js/items → lib/items/directives}/500-submit.js +0 -0
  62. /package/{addons/render/directives/front/js/items → lib/items/directives}/650-fetch.js +0 -0
  63. /package/{addons/render/directives/front/js/items → lib/items/directives}/660-form.js +0 -0
  64. /package/{addons/render/directives/front/js/items → lib/items/directives}/700-text.js +0 -0
  65. /package/{addons/render/directives/front/js/items → lib/items/directives}/750-html.js +0 -0
package/lib/items/transforms/chart/bubble.js CHANGED
@@ -1,169 +1,166 @@
1
- onetype.AddonReady('transforms', (transforms) =>
2
- {
3
- transforms.ItemAdd({
4
- id: 'ot-chart-bubble',
5
- icon: 'bubble_chart',
6
- name: 'Bubble Chart',
7
- description: 'Bubble chart with three dimensions. Display data points as sized bubbles on X/Y axes.',
8
- js: [
9
- 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
10
- ],
11
- config: {
12
- 'datasets': ['array', []],
13
- 'options': ['object', {}]
14
- },
15
- code: function(data, item, compile, node, identifier)
1
+ transforms.ItemAdd({
2
+ id: 'ot-chart-bubble',
3
+ icon: 'bubble_chart',
4
+ name: 'Bubble Chart',
5
+ description: 'Bubble chart with three dimensions. Display data points as sized bubbles on X/Y axes.',
6
+ js: [
7
+ 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
8
+ ],
9
+ config: {
10
+ 'datasets': ['array', []],
11
+ 'options': ['object', {}]
12
+ },
13
+ code: function(data, node, transformer)
14
+ {
15
+ this.setup = () =>
16
16
  {
17
- this.setup = () =>
18
- {
19
- node.innerHTML = '';
20
- node.classList.add('ot-chart-bubble');
17
+ node.innerHTML = '';
18
+ node.classList.add('ot-chart-bubble');
21
19
 
22
- const canvas = document.createElement('canvas');
23
- this.canvas = canvas;
24
- node.appendChild(canvas);
25
- };
20
+ const canvas = document.createElement('canvas');
21
+ this.canvas = canvas;
22
+ node.appendChild(canvas);
23
+ };
26
24
 
27
- this.colors = () =>
28
- {
29
- const style = getComputedStyle(document.body);
25
+ this.colors = () =>
26
+ {
27
+ const style = getComputedStyle(document.body);
30
28
 
31
- return {
32
- brand: style.getPropertyValue('--ot-brand').trim(),
33
- blue: style.getPropertyValue('--ot-blue').trim(),
34
- green: style.getPropertyValue('--ot-green').trim(),
35
- orange: style.getPropertyValue('--ot-orange').trim(),
36
- red: style.getPropertyValue('--ot-red').trim(),
37
- brandOpacity: style.getPropertyValue('--ot-brand-opacity').trim(),
38
- blueOpacity: style.getPropertyValue('--ot-blue-opacity').trim(),
39
- greenOpacity: style.getPropertyValue('--ot-green-opacity').trim(),
40
- orangeOpacity: style.getPropertyValue('--ot-orange-opacity').trim(),
41
- redOpacity: style.getPropertyValue('--ot-red-opacity').trim()
42
- };
29
+ return {
30
+ brand: style.getPropertyValue('--ot-brand').trim(),
31
+ blue: style.getPropertyValue('--ot-blue').trim(),
32
+ green: style.getPropertyValue('--ot-green').trim(),
33
+ orange: style.getPropertyValue('--ot-orange').trim(),
34
+ red: style.getPropertyValue('--ot-red').trim(),
35
+ brandOpacity: style.getPropertyValue('--ot-brand-opacity').trim(),
36
+ blueOpacity: style.getPropertyValue('--ot-blue-opacity').trim(),
37
+ greenOpacity: style.getPropertyValue('--ot-green-opacity').trim(),
38
+ orangeOpacity: style.getPropertyValue('--ot-orange-opacity').trim(),
39
+ redOpacity: style.getPropertyValue('--ot-red-opacity').trim()
43
40
  };
41
+ };
44
42
 
45
- this.datasets = () =>
46
- {
47
- const datasets = data['datasets'].value;
48
- const colors = this.colors();
49
- const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
50
- const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
51
-
52
- if(datasets.length === 0)
53
- {
54
- return [{
55
- label: 'Sample Data',
56
- data: [
57
- {x: 10, y: 20, r: 8},
58
- {x: 15, y: 35, r: 12},
59
- {x: 20, y: 30, r: 10},
60
- {x: 25, y: 45, r: 15},
61
- {x: 30, y: 40, r: 6},
62
- {x: 35, y: 55, r: 20}
63
- ],
64
- backgroundColor: paletteOpacity[0],
65
- borderColor: palette[0],
66
- borderWidth: 2
67
- }];
68
- }
69
-
70
- return datasets.map((dataset, index) =>
71
- {
72
- const color = palette[index % palette.length];
73
- const colorOpacity = paletteOpacity[index % paletteOpacity.length];
43
+ this.datasets = () =>
44
+ {
45
+ const datasets = data['datasets'];
46
+ const colors = this.colors();
47
+ const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
48
+ const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
74
49
 
75
- return {
76
- ...dataset,
77
- backgroundColor: dataset.backgroundColor || colorOpacity,
78
- borderColor: dataset.borderColor || color,
79
- borderWidth: dataset.borderWidth || 2
80
- };
81
- });
82
- };
50
+ if(datasets.length === 0)
51
+ {
52
+ return [{
53
+ label: 'Sample Data',
54
+ data: [
55
+ {x: 10, y: 20, r: 8},
56
+ {x: 15, y: 35, r: 12},
57
+ {x: 20, y: 30, r: 10},
58
+ {x: 25, y: 45, r: 15},
59
+ {x: 30, y: 40, r: 6},
60
+ {x: 35, y: 55, r: 20}
61
+ ],
62
+ backgroundColor: paletteOpacity[0],
63
+ borderColor: palette[0],
64
+ borderWidth: 2
65
+ }];
66
+ }
83
67
 
84
- this.config = () =>
68
+ return datasets.map((dataset, index) =>
85
69
  {
86
- const style = getComputedStyle(document.body);
87
- const textColor = style.getPropertyValue('--ot-text-1').trim();
88
- const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
70
+ const color = palette[index % palette.length];
71
+ const colorOpacity = paletteOpacity[index % paletteOpacity.length];
89
72
 
90
73
  return {
91
- type: 'bubble',
92
- data: {
93
- datasets: this.datasets()
94
- },
95
- options: {
96
- responsive: true,
97
- maintainAspectRatio: false,
98
- plugins: {
99
- legend: {
100
- labels: {
101
- color: textColor,
102
- font: {
103
- family: style.getPropertyValue('--ot-font-primary').trim()
104
- }
105
- }
106
- },
107
- tooltip: {
108
- callbacks: {
109
- label: function(context)
110
- {
111
- const label = context.dataset.label || '';
112
- const x = context.parsed.x;
113
- const y = context.parsed.y;
114
- const r = context.raw.r;
115
- return label + ': (x: ' + x + ', y: ' + y + ', size: ' + r + ')';
116
- }
74
+ ...dataset,
75
+ backgroundColor: dataset.backgroundColor || colorOpacity,
76
+ borderColor: dataset.borderColor || color,
77
+ borderWidth: dataset.borderWidth || 2
78
+ };
79
+ });
80
+ };
81
+
82
+ this.config = () =>
83
+ {
84
+ const style = getComputedStyle(document.body);
85
+ const textColor = style.getPropertyValue('--ot-text-1').trim();
86
+ const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
87
+
88
+ return {
89
+ type: 'bubble',
90
+ data: {
91
+ datasets: this.datasets()
92
+ },
93
+ options: {
94
+ responsive: true,
95
+ maintainAspectRatio: false,
96
+ plugins: {
97
+ legend: {
98
+ labels: {
99
+ color: textColor,
100
+ font: {
101
+ family: style.getPropertyValue('--ot-font-primary').trim()
117
102
  }
118
103
  }
119
104
  },
120
- scales: {
121
- x: {
122
- type: 'linear',
123
- position: 'bottom',
124
- ticks: { color: textColor },
125
- grid: { color: gridColor },
126
- title: {
127
- display: true,
128
- text: 'X Axis',
129
- color: textColor
130
- }
131
- },
132
- y: {
133
- type: 'linear',
134
- ticks: { color: textColor },
135
- grid: { color: gridColor },
136
- title: {
137
- display: true,
138
- text: 'Y Axis',
139
- color: textColor
105
+ tooltip: {
106
+ callbacks: {
107
+ label: function(context)
108
+ {
109
+ const label = context.dataset.label || '';
110
+ const x = context.parsed.x;
111
+ const y = context.parsed.y;
112
+ const r = context.raw.r;
113
+ return label + ': (x: ' + x + ', y: ' + y + ', size: ' + r + ')';
140
114
  }
141
115
  }
116
+ }
117
+ },
118
+ scales: {
119
+ x: {
120
+ type: 'linear',
121
+ position: 'bottom',
122
+ ticks: { color: textColor },
123
+ grid: { color: gridColor },
124
+ title: {
125
+ display: true,
126
+ text: 'X Axis',
127
+ color: textColor
128
+ }
142
129
  },
143
- ...data['options'].value
144
- }
145
- };
130
+ y: {
131
+ type: 'linear',
132
+ ticks: { color: textColor },
133
+ grid: { color: gridColor },
134
+ title: {
135
+ display: true,
136
+ text: 'Y Axis',
137
+ color: textColor
138
+ }
139
+ }
140
+ },
141
+ ...data['options']
142
+ }
146
143
  };
144
+ };
147
145
 
148
- this.initialize = () =>
146
+ this.initialize = () =>
147
+ {
148
+ setTimeout(() =>
149
149
  {
150
- setTimeout(() =>
150
+ if(typeof Chart === 'undefined')
151
151
  {
152
- if(typeof Chart === 'undefined')
153
- {
154
- console.error('Chart.js library not loaded');
155
- return;
156
- }
152
+ console.error('Chart.js library not loaded');
153
+ return;
154
+ }
157
155
 
158
- const context = this.canvas.getContext('2d');
159
- this.instance = new Chart(context, this.config());
156
+ const context = this.canvas.getContext('2d');
157
+ this.instance = new Chart(context, this.config());
160
158
 
161
- node.chart = this.instance;
162
- }, 100);
163
- };
159
+ node.chart = this.instance;
160
+ }, 100);
161
+ };
164
162
 
165
- this.setup();
166
- this.initialize();
167
- }
168
- });
169
- });
163
+ this.setup();
164
+ this.initialize();
165
+ }
166
+ });
package/lib/items/transforms/chart/doughnut.js CHANGED
@@ -1,127 +1,124 @@
1
- onetype.AddonReady('transforms', (transforms) =>
2
- {
3
- transforms.ItemAdd({
4
- id: 'ot-chart-doughnut',
5
- icon: 'donut_large',
6
- name: 'Doughnut Chart',
7
- description: 'Ring-shaped doughnut chart. Similar to pie chart with a hollow center.',
8
- js: [
9
- 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
10
- ],
11
- config: {
12
- 'labels': ['array', ['Category A', 'Category B', 'Category C', 'Category D']],
13
- 'values': ['array', [30, 25, 20, 25]],
14
- 'cutout': ['string', '50%'],
15
- 'options': ['object', {}]
16
- },
17
- code: function(data, item, compile, node, identifier)
1
+ transforms.ItemAdd({
2
+ id: 'ot-chart-doughnut',
3
+ icon: 'donut_large',
4
+ name: 'Doughnut Chart',
5
+ description: 'Ring-shaped doughnut chart. Similar to pie chart with a hollow center.',
6
+ js: [
7
+ 'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
8
+ ],
9
+ config: {
10
+ 'labels': ['array', ['Category A', 'Category B', 'Category C', 'Category D']],
11
+ 'values': ['array', [30, 25, 20, 25]],
12
+ 'cutout': ['string', '50%'],
13
+ 'options': ['object', {}]
14
+ },
15
+ code: function(data, node, transformer)
16
+ {
17
+ this.setup = () =>
18
18
  {
19
- this.setup = () =>
20
- {
21
- node.innerHTML = '';
22
- node.classList.add('ot-chart-doughnut');
19
+ node.innerHTML = '';
20
+ node.classList.add('ot-chart-doughnut');
23
21
 
24
- const canvas = document.createElement('canvas');
25
- this.canvas = canvas;
26
- node.appendChild(canvas);
27
- };
22
+ const canvas = document.createElement('canvas');
23
+ this.canvas = canvas;
24
+ node.appendChild(canvas);
25
+ };
28
26
 
29
- this.colors = () =>
30
- {
31
- const style = getComputedStyle(document.body);
27
+ this.colors = () =>
28
+ {
29
+ const style = getComputedStyle(document.body);
32
30
 
33
- return [
34
- style.getPropertyValue('--ot-brand').trim(),
35
- style.getPropertyValue('--ot-blue').trim(),
36
- style.getPropertyValue('--ot-green').trim(),
37
- style.getPropertyValue('--ot-orange').trim(),
38
- style.getPropertyValue('--ot-red').trim()
39
- ];
40
- };
31
+ return [
32
+ style.getPropertyValue('--ot-brand').trim(),
33
+ style.getPropertyValue('--ot-blue').trim(),
34
+ style.getPropertyValue('--ot-green').trim(),
35
+ style.getPropertyValue('--ot-orange').trim(),
36
+ style.getPropertyValue('--ot-red').trim()
37
+ ];
38
+ };
41
39
 
42
- this.dataset = () =>
43
- {
44
- const values = data['values'].value;
45
- const palette = this.colors();
40
+ this.dataset = () =>
41
+ {
42
+ const values = data['values'];
43
+ const palette = this.colors();
46
44
 
47
- const extendedPalette = [];
48
- for(let i = 0; i < values.length; i++)
49
- {
50
- extendedPalette.push(palette[i % palette.length]);
51
- }
45
+ const extendedPalette = [];
46
+ for(let i = 0; i < values.length; i++)
47
+ {
48
+ extendedPalette.push(palette[i % palette.length]);
49
+ }
52
50
 
53
- return {
54
- data: values,
55
- backgroundColor: extendedPalette,
56
- borderColor: '#ffffff',
57
- borderWidth: 2
58
- };
51
+ return {
52
+ data: values,
53
+ backgroundColor: extendedPalette,
54
+ borderColor: '#ffffff',
55
+ borderWidth: 2
59
56
  };
57
+ };
60
58
 
61
- this.config = () =>
62
- {
63
- const style = getComputedStyle(document.body);
64
- const textColor = style.getPropertyValue('--ot-text-1').trim();
59
+ this.config = () =>
60
+ {
61
+ const style = getComputedStyle(document.body);
62
+ const textColor = style.getPropertyValue('--ot-text-1').trim();
65
63
 
66
- return {
67
- type: 'doughnut',
68
- data: {
69
- labels: data['labels'].value,
70
- datasets: [this.dataset()]
71
- },
72
- options: {
73
- responsive: true,
74
- maintainAspectRatio: false,
75
- cutout: data['cutout'].value,
76
- plugins: {
77
- legend: {
78
- position: 'bottom',
79
- labels: {
80
- color: textColor,
81
- padding: 20,
82
- font: {
83
- family: style.getPropertyValue('--ot-font-primary').trim(),
84
- size: 13
85
- }
86
- }
87
- },
88
- tooltip: {
89
- callbacks: {
90
- label: function(context)
91
- {
92
- const label = context.label || '';
93
- const value = context.parsed;
94
- const total = context.dataset.data.reduce((a, b) => a + b, 0);
95
- const percentage = ((value / total) * 100).toFixed(1);
96
- return label + ': ' + percentage + '%';
97
- }
64
+ return {
65
+ type: 'doughnut',
66
+ data: {
67
+ labels: data['labels'],
68
+ datasets: [this.dataset()]
69
+ },
70
+ options: {
71
+ responsive: true,
72
+ maintainAspectRatio: false,
73
+ cutout: data['cutout'],
74
+ plugins: {
75
+ legend: {
76
+ position: 'bottom',
77
+ labels: {
78
+ color: textColor,
79
+ padding: 20,
80
+ font: {
81
+ family: style.getPropertyValue('--ot-font-primary').trim(),
82
+ size: 13
98
83
  }
99
84
  }
100
85
  },
101
- ...data['options'].value
102
- }
103
- };
86
+ tooltip: {
87
+ callbacks: {
88
+ label: function(context)
89
+ {
90
+ const label = context.label || '';
91
+ const value = context.parsed;
92
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
93
+ const percentage = ((value / total) * 100).toFixed(1);
94
+ return label + ': ' + percentage + '%';
95
+ }
96
+ }
97
+ }
98
+ },
99
+ ...data['options']
100
+ }
104
101
  };
102
+ };
105
103
 
106
- this.initialize = () =>
104
+ this.initialize = () =>
105
+ {
106
+ setTimeout(() =>
107
107
  {
108
- setTimeout(() =>
108
+ if(typeof Chart === 'undefined')
109
109
  {
110
- if(typeof Chart === 'undefined')
111
- {
112
- console.error('Chart.js library not loaded');
113
- return;
114
- }
110
+ console.error('Chart.js library not loaded');
111
+ return;
112
+ }
115
113
 
116
- const context = this.canvas.getContext('2d');
117
- this.instance = new Chart(context, this.config());
114
+ const context = this.canvas.getContext('2d');
115
+ this.instance = new Chart(context, this.config());
118
116
 
119
- node.chart = this.instance;
120
- }, 100);
121
- };
117
+ node.chart = this.instance;
118
+ }, 100);
119
+ };
122
120
 
123
- this.setup();
124
- this.initialize();
125
- }
126
- });
127
- });
121
+ this.setup();
122
+ this.initialize();
123
+ }
124
+ });