@onetype/framework 2.0.38 → 2.0.40

package/lib/items/transforms/sparkline/sparkline.js

@@ -1,239 +0,0 @@
-transforms.ItemAdd({
-    id: 'sparkline',
-    icon: 'show_chart',
-    name: 'Sparkline',
-    description: 'Inline mini charts for data trends. Compact line charts perfect for dashboards.',
-    js: [
-        'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
-    ],
-    config: {
-        'values': ['array', [5, 10, 5, 20, 8, 15, 12, 8, 10, 15, 20, 25]],
-        'type': ['string', 'line'], // line, bar, area
-        'width': ['number', 100],
-        'height': ['number', 30],
-        'color': ['string', ''], // empty means use theme brand color
-        'fill': ['boolean', false],
-        'show-dots': ['boolean', false],
-        'show-tooltip': ['boolean', true],
-        'smooth': ['boolean', true],
-        'animate': ['boolean', true],
-        'min': ['number', null],
-        'max': ['number', null]
-    },
-    code: function(data, node, transformer)
-    {
-        const id = 'sparkline-' + onetype.Generate(8);
-
-        this.setup = () =>
-        {
-            node.innerHTML = '';
-            node.classList.add('sparkline');
-            node.classList.add(id);
-
-            // Set inline-block display for sparklines
-            node.style.display = 'inline-block';
-            node.style.verticalAlign = 'middle';
-            node.style.width = data['width'] + 'px';
-            node.style.height = data['height'] + 'px';
-
-            const canvas = document.createElement('canvas');
-            canvas.width = data['width'];
-            canvas.height = data['height'];
-            this.canvas = canvas;
-            node.appendChild(canvas);
-        };
-
-        this.colors = () =>
-        {
-            const style = getComputedStyle(document.body);
-
-            // Get custom color or default to brand
-            let lineColor = data['color'];
-            if (!lineColor)
-            {
-                lineColor = style.getPropertyValue('--ot-brand').trim() || '#3b82f6';
-            }
-
-            // Extract RGB values for opacity
-            let fillColor = lineColor;
-            if (lineColor.startsWith('#'))
-            {
-                const r = parseInt(lineColor.slice(1, 3), 16);
-                const g = parseInt(lineColor.slice(3, 5), 16);
-                const b = parseInt(lineColor.slice(5, 7), 16);
-                fillColor = `rgba(${r}, ${g}, ${b}, 0.1)`;
-            }
-            else if (lineColor.startsWith('rgb'))
-            {
-                fillColor = lineColor.replace('rgb', 'rgba').replace(')', ', 0.1)');
-            }
-
-            return {
-                line: lineColor,
-                fill: fillColor
-            };
-        };
-
-        this.dataset = () =>
-        {
-            const values = data['values'];
-            const colors = this.colors();
-            const type = data['type'];
-            const smooth = data['smooth'];
-            const fill = data['fill'] || type === 'area';
-            const showDots = data['show-dots'];
-
-            const dataset = {
-                data: values,
-                borderColor: colors.line,
-                backgroundColor: fill ? colors.fill : 'transparent',
-                borderWidth: 1.5,
-                pointRadius: showDots ? 2 : 0,
-                pointHoverRadius: showDots ? 3 : 0,
-                pointBackgroundColor: colors.line,
-                pointBorderColor: colors.line,
-                tension: smooth ? 0.4 : 0,
-                fill: fill
-            };
-
-            // Adjust for bar type
-            if (type === 'bar')
-            {
-                dataset.backgroundColor = colors.line;
-                dataset.borderWidth = 0;
-            }
-
-            return dataset;
-        };
-
-        this.config = () =>
-        {
-            const type = data['type'] === 'area' ? 'line' : data['type'];
-            const showTooltip = data['show-tooltip'];
-            const animate = data['animate'];
-            const minValue = data['min'];
-            const maxValue = data['max'];
-
-            // Generate labels based on data length
-            const labels = Array.from({length: data['values'].length}, (_, i) => '');
-
-            return {
-                type: type === 'bar' ? 'bar' : 'line',
-                data: {
-                    labels: labels,
-                    datasets: [this.dataset()]
-                },
-                options: {
-                    responsive: false,
-                    maintainAspectRatio: false,
-                    animation: {
-                        duration: animate ? 750 : 0
-                    },
-                    interaction: {
-                        intersect: false,
-                        mode: showTooltip ? 'index' : null
-                    },
-                    plugins: {
-                        legend: {
-                            display: false
-                        },
-                        tooltip: {
-                            enabled: showTooltip,
-                            backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                            titleFont: {
-                                size: 11
-                            },
-                            bodyFont: {
-                                size: 11
-                            },
-                            padding: 4,
-                            displayColors: false,
-                            callbacks: {
-                                title: () => '',
-                                label: (context) => {
-                                    return context.parsed.y.toLocaleString();
-                                }
-                            }
-                        }
-                    },
-                    scales: {
-                        x: {
-                            display: false,
-                            grid: {
-                                display: false
-                            }
-                        },
-                        y: {
-                            display: false,
-                            beginAtZero: minValue === null,
-                            min: minValue,
-                            max: maxValue,
-                            grid: {
-                                display: false
-                            }
-                        }
-                    },
-                    elements: {
-                        line: {
-                            borderJoinStyle: 'round'
-                        }
-                    },
-                    layout: {
-                        padding: 0
-                    }
-                }
-            };
-        };
-
-        this.styles = () =>
-        {
-            const style = document.createElement('style');
-
-            style.textContent = `
-                .sparkline-${id} {
-                    position: relative;
-                    line-height: 1;
-                }
-                .sparkline-${id} canvas {
-                    display: block;
-                    max-width: 100%;
-                }
-            `;
-
-            document.head.appendChild(style);
-        };
-
-        this.initialize = () =>
-        {
-            setTimeout(() =>
-            {
-                if(typeof Chart === 'undefined')
-                {
-                    console.error('Chart.js library not loaded for sparkline');
-                    return;
-                }
-
-                const context = this.canvas.getContext('2d');
-                this.instance = new Chart(context, this.config());
-
-                // Expose instance for external access
-                node.sparkline = this.instance;
-
-                // Add update method for dynamic updates
-                node.updateSparkline = (newValues) =>
-                {
-                    if (this.instance)
-                    {
-                        this.instance.data.datasets[0].data = newValues;
-                        this.instance.data.labels = Array.from({length: newValues.length}, () => '');
-                        this.instance.update('none'); // Update without animation
-                    }
-                };
-            }, 100);
-        };
-
-        this.setup();
-        this.styles();
-        this.initialize();
-    }
-});

package/lib/items/transforms/swiper/swiper.js

@@ -1,140 +0,0 @@
-transforms.ItemAdd({
-    id: 'swiper',
-    icon: 'swipe',
-    name: 'Swiper',
-    description: 'Touch-enabled slider/carousel component. Create image galleries and content sliders with swipe gestures.',
-    js: [
-        'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js'
-    ],
-    css: [
-        'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css'
-    ],
-    config: {
-        'slides-per-view': ['number', 3],
-        'space-between': ['number', 20],
-        'loop': ['boolean', false],
-        'autoplay': ['boolean|object', false],
-        'navigation': ['boolean', true],
-        'pagination': ['boolean', true],
-        'speed': ['number', 300],
-        'grab-cursor': ['boolean', true],
-        'free-mode': ['boolean', false]
-    },
-    code: function(data, node, transformer)
-    {
-        this.setup = () => 
-        {
-            node.classList.add('swiper');
-
-            const children = Array.from(node.children);
-            const wrapper = document.createElement('div');
-
-            wrapper.className = 'swiper-wrapper';
-
-            children.forEach(child =>
-            {
-                child.classList.add('swiper-slide');
-                wrapper.appendChild(child);
-            });
-
-            node.appendChild(wrapper);
-        };
-
-        this.navigation = () =>
-        {
-            if(!data['navigation'])
-            {
-                return;
-            }
-
-            const prev = document.createElement('div');
-            const next = document.createElement('div');
-
-            prev.className = 'swiper-button-prev';
-            next.className = 'swiper-button-next';
-
-            node.appendChild(prev);
-            node.appendChild(next);
-        };
-
-        this.pagination = () =>
-        {
-            if(!data['pagination'])
-            {
-                return;
-            }
-
-            const pagination = document.createElement('div');
-
-            pagination.className = 'swiper-pagination';
-
-            node.appendChild(pagination);
-        };
-
-        this.config = () =>
-        {
-            const slidesPerView = data['slides-per-view'];
-            const spaceBetween = data['space-between'];
-
-            const config = {
-                slidesPerView: 1,
-                spaceBetween: spaceBetween,
-                speed: data['speed'],
-                loop: data['loop'],
-                grabCursor: data['grab-cursor'],
-                cssMode: false,
-                allowTouchMove: true,
-                touchRatio: 1,
-                resistance: true,
-                resistanceRatio: 0.85,
-                breakpoints: {
-                    640: { slidesPerView: Math.min(2, slidesPerView), spaceBetween: spaceBetween },
-                    1024: { slidesPerView: Math.min(3, slidesPerView), spaceBetween: spaceBetween },
-                    1280: { slidesPerView: slidesPerView, spaceBetween: spaceBetween }
-                }
-            };
-
-            if(data['free-mode'])
-            {
-                config.freeMode = {
-                    enabled: true,
-                    sticky: false
-                };
-            }
-
-            if(data['autoplay'])
-            {
-                config.autoplay = typeof data['autoplay'] === 'object'
-                    ? data['autoplay']
-                    : { delay: 3000 };
-            }
-
-            if(data['navigation'])
-            {
-                config.navigation = {
-                    nextEl: node.querySelector('.swiper-button-next'),
-                    prevEl: node.querySelector('.swiper-button-prev'),
-                };
-            }
-
-            if(data['pagination'])
-            {
-                config.pagination = {
-                    el: node.querySelector('.swiper-pagination'),
-                    clickable: true,
-                };
-            }
-
-            return config;
-        };
-
-        this.setup();
-        this.navigation();
-        this.pagination();
-
-        setTimeout(() =>
-        {
-            new Swiper(node, this.config());
-        }, 0);
-    }
-});