@onetype/framework 2.0.20

package/addons/render/transforms/front/js/items/self/chart/scatter.js

@@ -0,0 +1,152 @@
+onetype.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({
+        id: 'ot-chart-scatter',
+        icon: 'scatter_plot',
+        name: 'Scatter Plot',
+        description: 'Scatter plot for correlation data. Show relationship between two variables with points.',
+        js: [
+            'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
+        ],
+        config: {
+            'datasets': ['array', []],
+            'options': ['object', {}]
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            this.setup = () =>
+            {
+                node.innerHTML = '';
+                node.classList.add('ot-chart-scatter');
+
+                const canvas = document.createElement('canvas');
+                this.canvas = canvas;
+                node.appendChild(canvas);
+            };
+
+            this.colors = () =>
+            {
+                const style = getComputedStyle(document.body);
+
+                return {
+                    brand: style.getPropertyValue('--ot-brand').trim(),
+                    blue: style.getPropertyValue('--ot-blue').trim(),
+                    green: style.getPropertyValue('--ot-green').trim(),
+                    orange: style.getPropertyValue('--ot-orange').trim(),
+                    red: style.getPropertyValue('--ot-red').trim()
+                };
+            };
+
+            this.datasets = () =>
+            {
+                const datasets = data['datasets'].value;
+                const colors = this.colors();
+                const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
+
+                if(datasets.length === 0)
+                {
+                    return [{
+                        label: 'Sample Data',
+                        data: [
+                            {x: 10, y: 20},
+                            {x: 15, y: 35},
+                            {x: 20, y: 30},
+                            {x: 25, y: 45},
+                            {x: 30, y: 40},
+                            {x: 35, y: 55}
+                        ],
+                        backgroundColor: palette[0],
+                        borderColor: palette[0],
+                        borderWidth: 1,
+                        pointRadius: 5
+                    }];
+                }
+
+                return datasets.map((dataset, index) =>
+                {
+                    const color = palette[index % palette.length];
+
+                    return {
+                        ...dataset,
+                        backgroundColor: dataset.backgroundColor || color,
+                        borderColor: dataset.borderColor || color,
+                        borderWidth: dataset.borderWidth || 1,
+                        pointRadius: dataset.pointRadius || 5
+                    };
+                });
+            };
+
+            this.config = () =>
+            {
+                const style = getComputedStyle(document.body);
+                const textColor = style.getPropertyValue('--ot-text-1').trim();
+                const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
+
+                return {
+                    type: 'scatter',
+                    data: {
+                        datasets: this.datasets()
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        plugins: {
+                            legend: {
+                                labels: {
+                                    color: textColor,
+                                    font: {
+                                        family: style.getPropertyValue('--ot-font-primary').trim()
+                                    }
+                                }
+                            }
+                        },
+                        scales: {
+                            x: {
+                                type: 'linear',
+                                position: 'bottom',
+                                ticks: { color: textColor },
+                                grid: { color: gridColor },
+                                title: {
+                                    display: true,
+                                    text: 'X Axis',
+                                    color: textColor
+                                }
+                            },
+                            y: {
+                                type: 'linear',
+                                ticks: { color: textColor },
+                                grid: { color: gridColor },
+                                title: {
+                                    display: true,
+                                    text: 'Y Axis',
+                                    color: textColor
+                                }
+                            }
+                        },
+                        ...data['options'].value
+                    }
+                };
+            };
+
+            this.initialize = () =>
+            {
+                setTimeout(() =>
+                {
+                    if(typeof Chart === 'undefined')
+                    {
+                        console.error('Chart.js library not loaded');
+                        return;
+                    }
+
+                    const context = this.canvas.getContext('2d');
+                    this.instance = new Chart(context, this.config());
+
+                    node.chart = this.instance;
+                }, 100);
+            };
+
+            this.setup();
+            this.initialize();
+        }
+    });
+});

package/addons/render/transforms/front/js/items/self/codeflask.js

@@ -0,0 +1,99 @@
+onetype.AddonReady('transforms', (transforms) =>
+{
+	transforms.ItemAdd({
+		id: 'codeflask',
+		icon: 'code',
+		name: 'CodeFlask',
+		description: 'Micro code editor with syntax highlighting. Supports live editing with onUpdate handler.',
+		js: [
+			'https://cdn.jsdelivr.net/npm/codeflask/build/codeflask.min.js'
+		],
+		config: {
+			'value': ['string', ''],
+			'language': ['string', 'markup'],
+			'line-numbers': ['boolean', true],
+			'readonly': ['boolean', false],
+			'onUpdate': ['function']
+		},
+		code: function(data, item, compile, node, identifier)
+		{
+			this.setup = () =>
+			{
+				node.classList.add('codeflask-editor');
+				node.classList.add('codeflask-editor-' + identifier);
+
+				const initialValue = data['value'].value || node.textContent || '';
+				node.innerHTML = '';
+
+				this.container = document.createElement('div');
+				this.container.className = 'codeflask-container';
+				node.appendChild(this.container);
+
+				this.initialValue = initialValue;
+			};
+
+			this.styles = () =>
+			{
+				const style = document.createElement('style');
+				style.textContent = `
+					.codeflask-editor-${identifier}
+					{
+						height: 100%;
+						width: 100%;
+					}
+					.codeflask-editor-${identifier} .codeflask-container
+					{
+						height: 100%;
+						width: 100%;
+					}
+					.codeflask-editor-${identifier} .codeflask
+					{
+						height: 100%;
+					}
+				`;
+				document.head.appendChild(style);
+			};
+
+			this.initialize = () =>
+			{
+				setTimeout(() =>
+				{
+					if(typeof CodeFlask === 'undefined')
+					{
+						console.error('CodeFlask library not loaded');
+						node.innerHTML = '<div style="padding: 20px;">CodeFlask not loaded</div>';
+						return;
+					}
+
+					const flask = new CodeFlask(this.container, {
+						language: data['language'].value || 'markup',
+						lineNumbers: data['line-numbers'].value !== false,
+						readonly: data['readonly'].value === true
+					});
+
+					flask.updateCode(this.initialValue);
+
+					this.flask = flask;
+
+					flask.onUpdate((code) =>
+					{
+						// const onUpdate = data['onUpdate'].value;
+						// if(typeof onUpdate === 'function')
+						// {
+						// 	onUpdate({value: code, node});
+						// }
+					});
+
+					node.getValue = () => flask.getCode();
+					node.setValue = (value) => flask.updateCode(value);
+					node.setLanguage = (language) => flask.updateLanguage(language);
+
+				}, 200);
+			};
+
+			this.setup();
+			this.styles();
+			this.initialize();
+		}
+	});
+});

package/addons/render/transforms/front/js/items/self/codemirror.js

@@ -0,0 +1,231 @@
+onetype.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({
+        id: 'codemirror',
+        icon: 'code',
+        name: 'Code Mirror',
+        description: 'Advanced code editor with syntax highlighting. Supports multiple languages and themes.',
+        js: [
+            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js',
+           
+        ],
+        css: [
+            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/monokai.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css',
+            'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/material.min.css'
+        ],
+        config: {
+            'value': ['string', '// Welcome to CodeMirror\nfunction hello() {\n    console.log("Hello, World!");\n}\n\nhello();'],
+            'mode': ['string', 'javascript'],
+            'theme': ['string', 'monokai'],
+            'height': ['number', 400],
+            'line-numbers': ['boolean', true],
+            'line-wrapping': ['boolean', false],
+            'tab-size': ['number', 4],
+            'indent-unit': ['number', 4],
+            'font-size': ['number', 14],
+            'readonly': ['boolean', false],
+            'auto-close-brackets': ['boolean', true],
+            'match-brackets': ['boolean', true],
+            'highlight-active-line': ['boolean', true],
+            'smart-indent': ['boolean', true],
+            'electric-chars': ['boolean', true],
+            'show-cursor-when-selecting': ['boolean', false]
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            this.setup = () =>
+            {
+                // Clear existing content
+                node.innerHTML = '';
+
+                // Add codemirror wrapper class
+                node.classList.add('codemirror-wrapper');
+
+                // Create textarea element
+                const textarea = document.createElement('textarea');
+                textarea.id = 'codemirror-' + Math.random().toString(36).substring(2, 11);
+                textarea.value = data['value'].value || '';
+
+                // Store textarea reference
+                this.textarea = textarea;
+
+                // Apply wrapper styles
+                const height = data['height'].value;
+                node.style.height = height + 'px';
+                node.style.border = '1px solid #e0e0e0';
+                node.style.borderRadius = '4px';
+                node.style.overflow = 'hidden';
+
+                // Append textarea to node
+                node.appendChild(textarea);
+            };
+
+            this.config = () =>
+            {
+                const fontSize = data['font-size'].value;
+
+                return {
+                    value: data['value'].value || '',
+                    mode: data['mode'].value || 'javascript',
+                    theme: data['theme'].value || 'monokai',
+                    lineNumbers: data['line-numbers'].value !== false,
+                    lineWrapping: data['line-wrapping'].value === true,
+                    tabSize: data['tab-size'].value || 4,
+                    indentUnit: data['indent-unit'].value || 4,
+                    readOnly: data['readonly'].value === true,
+                    autoCloseBrackets: data['auto-close-brackets'].value !== false,
+                    matchBrackets: data['match-brackets'].value !== false,
+                    styleActiveLine: data['highlight-active-line'].value !== false,
+                    smartIndent: data['smart-indent'].value !== false,
+                    electricChars: data['electric-chars'].value !== false,
+                    showCursorWhenSelecting: data['show-cursor-when-selecting'].value === true,
+                    extraKeys: {
+                        'Ctrl-Space': 'autocomplete'
+                    }
+                };
+            };
+
+            this.applyStyles = () =>
+            {
+                const fontSize = data['font-size'].value;
+
+                // Apply custom font size
+                setTimeout(() =>
+                {
+                    if(this.editor)
+                    {
+                        const wrapper = this.editor.getWrapperElement();
+                        wrapper.style.fontSize = fontSize + 'px';
+                        wrapper.style.fontFamily = 'Monaco, Menlo, "Ubuntu Mono", monospace';
+                    }
+                }, 100);
+            };
+
+            this.initialize = () =>
+            {
+                setTimeout(() =>
+                {
+                    // Check if CodeMirror is available
+                    if(typeof CodeMirror === 'undefined')
+                    {
+                        console.error('CodeMirror library not loaded');
+                        node.innerHTML = '<div style="padding: 20px; color: #666;">CodeMirror library not available</div>';
+                        return;
+                    }
+
+                    try
+                    {
+                        // Create CodeMirror instance
+                        this.editor = CodeMirror.fromTextArea(this.textarea, this.config());
+
+                        // Store instance on node for external access
+                        node._codeMirrorEditor = this.editor;
+
+                        // Apply custom styles
+                        this.applyStyles();
+
+                        // Set height
+                        const height = data['height'].value;
+                        this.editor.setSize('100%', height + 'px');
+
+                        // Add helper methods to node
+                        node.getValue = () =>
+                        {
+                            return this.editor ? this.editor.getValue() : '';
+                        };
+
+                        node.setValue = (value) =>
+                        {
+                            if(this.editor && value !== undefined)
+                            {
+                                this.editor.setValue(String(value));
+                            }
+                        };
+
+                        node.getMode = () =>
+                        {
+                            return this.editor ? this.editor.getOption('mode') : '';
+                        };
+
+                        node.setMode = (mode) =>
+                        {
+                            if(this.editor && mode)
+                            {
+                                this.editor.setOption('mode', String(mode));
+                            }
+                        };
+
+                        node.setTheme = (theme) =>
+                        {
+                            if(this.editor && theme)
+                            {
+                                this.editor.setOption('theme', String(theme));
+                            }
+                        };
+
+                        node.setReadOnly = (readonly) =>
+                        {
+                            if(this.editor)
+                            {
+                                this.editor.setOption('readOnly', Boolean(readonly));
+                            }
+                        };
+
+                        node.refresh = () =>
+                        {
+                            if(this.editor)
+                            {
+                                setTimeout(() =>
+                                {
+                                    this.editor.refresh();
+                                }, 10);
+                            }
+                        };
+
+                        node.focus = () =>
+                        {
+                            if(this.editor)
+                            {
+                                this.editor.focus();
+                            }
+                        };
+
+                        node.dispose = () =>
+                        {
+                            if(this.editor)
+                            {
+                                this.editor.toTextArea();
+                                this.editor = null;
+                            }
+                        };
+
+                        // Auto-refresh when container becomes visible
+                        const observer = new IntersectionObserver((entries) =>
+                        {
+                            entries.forEach(entry =>
+                            {
+                                if(entry.isIntersecting && this.editor)
+                                {
+                                    this.editor.refresh();
+                                }
+                            });
+                        });
+
+                        observer.observe(node);
+
+                        console.log('CodeMirror editor initialized successfully');
+
+                    } catch (error) {
+                        console.error('CodeMirror initialization failed:', error);
+                        node.innerHTML = '<div style="padding: 20px; color: #666;">CodeMirror initialization failed</div>';
+                    }
+                }, 200);
+            };
+
+            this.setup();
+            this.initialize();
+        }
+    });
+});

package/addons/render/transforms/front/js/items/self/comparison.js

@@ -0,0 +1,142 @@
+onetype.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({
+        id: 'comparison',
+        icon: 'compare_arrows',
+        name: 'Comparison',
+        description: 'Side-by-side comparison widget. Compare features, prices, or data in an interactive layout.',
+        js: [
+            'https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js'
+        ],
+        css: [
+            'https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css'
+        ],
+        config: {
+            'before-image': ['string', 'https://images.pexels.com/photos/3225517/pexels-photo-3225517.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'],
+            'after-image': ['string', 'https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'],
+            'before-label': ['string', 'Before'],
+            'after-label': ['string', 'After'],
+            'start-position': ['number', 50],
+            'hover-enabled': ['boolean', true],
+            'handle-color': ['string', '#ffffff'],
+            'divider-color': ['string', '#ffffff'],
+            'divider-width': ['number', 2],
+            'keyboard-enabled': ['boolean', true]
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            this.setup = () =>
+            {
+                // Create the custom element wrapper
+                const slider = document.createElement('img-comparison-slider');
+
+                // Create before image
+                const beforeImage = document.createElement('img');
+                beforeImage.setAttribute('slot', 'first');
+                beforeImage.src = data['before-image'].value;
+                beforeImage.alt = data['before-label'].value;
+
+                // Create after image
+                const afterImage = document.createElement('img');
+                afterImage.setAttribute('slot', 'second');
+                afterImage.src = data['after-image'].value;
+                afterImage.alt = data['after-label'].value;
+
+                // Append images to slider
+                slider.appendChild(beforeImage);
+                slider.appendChild(afterImage);
+
+                // Clear node and append slider
+                node.innerHTML = '';
+                node.appendChild(slider);
+
+                // Store reference for later configuration
+                this.slider = slider;
+            };
+
+            this.labels = () =>
+            {
+                const beforeLabel = data['before-label'].value;
+                const afterLabel = data['after-label'].value;
+
+                if(beforeLabel && beforeLabel !== 'Before')
+                {
+                    this.slider.setAttribute('data-first-label', beforeLabel);
+                }
+
+                if(afterLabel && afterLabel !== 'After')
+                {
+                    this.slider.setAttribute('data-second-label', afterLabel);
+                }
+            };
+
+            this.styles = () =>
+            {
+                const handleColor = data['handle-color'].value;
+                const dividerColor = data['divider-color'].value;
+                const dividerWidth = data['divider-width'].value;
+
+                const styles = [];
+
+                if(handleColor !== '#ffffff')
+                {
+                    styles.push(`--handle-color: ${handleColor}`);
+                }
+
+                if(dividerColor !== '#ffffff')
+                {
+                    styles.push(`--divider-color: ${dividerColor}`);
+                }
+
+                if(dividerWidth !== 2)
+                {
+                    styles.push(`--divider-width: ${dividerWidth}px`);
+                }
+
+                if(styles.length > 0)
+                {
+                    this.slider.style.cssText = styles.join('; ');
+                }
+            };
+
+            this.attributes = () =>
+            {
+                const startPosition = data['start-position'].value;
+                const hoverEnabled = data['hover-enabled'].value;
+                const keyboardEnabled = data['keyboard-enabled'].value;
+
+                if(startPosition !== 50)
+                {
+                    this.slider.setAttribute('value', startPosition);
+                }
+
+                if(!hoverEnabled)
+                {
+                    this.slider.setAttribute('hover', 'false');
+                }
+
+                if(!keyboardEnabled)
+                {
+                    this.slider.setAttribute('keyboard', 'false');
+                }
+            };
+
+            this.initialize = () =>
+            {
+                // Add wrapper class to node for styling if needed
+                node.classList.add('comparison-wrapper');
+
+                // Set width/height on wrapper if needed
+                node.style.display = 'block';
+                node.style.width = '100%';
+                node.style.maxWidth = '100%';
+            };
+
+            this.setup();
+            this.labels();
+            this.styles();
+            this.attributes();
+            this.initialize();
+        }
+    });
+});