@onetype/framework 2.0.39 → 2.0.41

package/addons/render/transforms/item/functions/run.js

@@ -8,7 +8,11 @@ transforms.Fn('item.run', function(item, node, data = null)
     item.Fn('load').then(() =>
     {
         item.Get('code').call({}, data, node, item);
-        node.removeAttribute('ot-init');
-        node.removeAttribute('ot');
+
+        requestAnimationFrame(() =>
+        {
+            node.removeAttribute('ot');
+            node.removeAttribute('ot-init');
+        });
     });
 });

package/lib/load.js

@@ -23,7 +23,6 @@ onetype.Assets('sources', import.meta.url, { js: '../addons/modules/sources/fron
 onetype.Assets('directives', import.meta.url, { js: '../addons/render/directives/front' });
 onetype.Assets('directives/items', import.meta.url, { js: 'items/directives' });
 onetype.Assets('transforms', import.meta.url, { js: '../addons/render/transforms' });
-onetype.Assets('transforms/items', import.meta.url, { js: 'items/transforms' });
 onetype.Assets('pages', import.meta.url, { js: '../addons/render/pages', css: '../addons/render/pages/front' });
 onetype.Assets('elements', import.meta.url, { js: '../addons/render/elements/front', css: '../addons/render/elements/front' });
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onetype/framework",
-    "version": "2.0.39",
+    "version": "2.0.41",
     "description": "OneType Framework — Full-stack isomorphic JavaScript framework built from scratch. One addon abstraction powers databases, servers, commands, pages, directives, queues, and more.",
     "type": "module",
     "main": "lib/load.js",

package/lib/items/transforms/accordion/accordion.js

@@ -1,172 +0,0 @@
-transforms.ItemAdd({
-    id: 'accordion',
-    icon: 'expand_more',
-    name: 'Accordion',
-    description: 'Collapsible accordion component with multiple items. Supports single or multiple open panels with smooth animations.',
-    config: {
-        'multiple': ['boolean', false],
-        'first-open': ['boolean', true],
-        'animation-duration': ['number', 300],
-        'icon': ['boolean', true],
-        'icon-position': ['string', 'right']
-    },
-    code: function(data, node, transformer)
-    {
-        const id = 'accordion-' + onetype.Generate(8);
-
-        this.setup = () =>
-        {
-            node.classList.add('accordion');
-            node.classList.add(id);
-
-            const children = Array.from(node.children);
-            const items = [];
-
-            for(let i = 0; i < children.length; i += 2)
-            {
-                const header = children[i];
-                const content = children[i + 1];
-
-                if(!header || !content)
-                {
-                    continue;
-                }
-
-                const wrapper = document.createElement('div');
-                const headerWrapper = document.createElement('div');
-                const contentWrapper = document.createElement('div');
-
-                wrapper.className = 'accordion-item';
-                headerWrapper.className = 'accordion-header';
-                contentWrapper.className = 'accordion-content';
-
-                headerWrapper.appendChild(header);
-                contentWrapper.appendChild(content);
-
-                wrapper.appendChild(headerWrapper);
-                wrapper.appendChild(contentWrapper);
-
-                items.push(wrapper);
-            }
-
-            node.innerHTML = '';
-            items.forEach(item => node.appendChild(item));
-        };
-
-        this.icons = () =>
-        {
-            if(!data['icon'])
-            {
-                return;
-            }
-
-            const headers = node.querySelectorAll('.accordion-header');
-
-            headers.forEach(header =>
-            {
-                const icon = document.createElement('span');
-                icon.className = 'accordion-icon';
-                icon.innerHTML = '▼';
-
-                if(data['icon-position'] === 'left')
-                {
-                    header.insertBefore(icon, header.firstChild);
-                }
-                else
-                {
-                    header.appendChild(icon);
-                }
-            });
-        };
-
-        this.styles = () =>
-        {
-            const duration = data['animation-duration'];
-            const style = document.createElement('style');
-
-            style.textContent = `
-                .${id} .accordion-content {
-                    max-height: 0;
-                    overflow: hidden;
-                    transition: max-height ${duration}ms ease-in-out;
-                }
-                .${id} .accordion-item.active .accordion-content {
-                    max-height: 2000px;
-                }
-                .${id} .accordion-header {
-                    cursor: pointer;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                }
-                .${id} .accordion-icon {
-                    transition: transform ${duration}ms ease;
-                    display: inline-block;
-                }
-                .${id} .accordion-item.active .accordion-icon {
-                    transform: rotate(180deg);
-                }
-            `;
-
-            document.head.appendChild(style);
-        };
-
-        this.toggle = (item) =>
-        {
-            const isActive = item.classList.contains('active');
-
-            if(!data['multiple'])
-            {
-                const items = node.querySelectorAll('.accordion-item');
-                items.forEach(otherItem =>
-                {
-                    if(otherItem !== item)
-                    {
-                        otherItem.classList.remove('active');
-                    }
-                });
-            }
-
-            if(isActive)
-            {
-                item.classList.remove('active');
-            }
-            else
-            {
-                item.classList.add('active');
-            }
-        };
-
-        this.events = () =>
-        {
-            const headers = node.querySelectorAll('.accordion-header');
-
-            headers.forEach(header =>
-            {
-                header.addEventListener('click', () =>
-                {
-                    const item = header.parentElement;
-                    this.toggle(item);
-                });
-            });
-        };
-
-        this.initialize = () =>
-        {
-            if(data['first-open'])
-            {
-                const firstItem = node.querySelector('.accordion-item');
-                if(firstItem)
-                {
-                    firstItem.classList.add('active');
-                }
-            }
-        };
-
-        this.setup();
-        this.icons();
-        this.styles();
-        this.events();
-        this.initialize();
-    }
-});

package/lib/items/transforms/chart/area.js

@@ -1,153 +0,0 @@
-transforms.ItemAdd({
-    id: 'ot-chart-area',
-    icon: 'area_chart',
-    name: 'Area Chart',
-    description: 'Filled area chart visualization. Show data trends with colored regions under the line.',
-    js: [
-        'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
-    ],
-    config: {
-        'labels': ['array', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']],
-        'datasets': ['array', []],
-        'stacked': ['boolean', false],
-        'smooth': ['boolean', true],
-        'options': ['object', {}]
-    },
-    code: function(data, node, transformer)
-    {
-        this.setup = () =>
-        {
-            node.innerHTML = '';
-            node.classList.add('ot-chart-area');
-
-            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(),
-                brandOpacity: style.getPropertyValue('--ot-brand-opacity').trim(),
-                blueOpacity: style.getPropertyValue('--ot-blue-opacity').trim(),
-                greenOpacity: style.getPropertyValue('--ot-green-opacity').trim(),
-                orangeOpacity: style.getPropertyValue('--ot-orange-opacity').trim(),
-                redOpacity: style.getPropertyValue('--ot-red-opacity').trim()
-            };
-        };
-
-        this.datasets = () =>
-        {
-            const datasets = data['datasets'];
-            const colors = this.colors();
-            const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
-            const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
-            const smooth = data['smooth'];
-
-            if(datasets.length === 0)
-            {
-                return [{
-                    label: 'Sample Data',
-                    data: [30, 45, 28, 56, 42, 65],
-                    backgroundColor: paletteOpacity[0],
-                    borderColor: palette[0],
-                    borderWidth: 2,
-                    fill: true,
-                    tension: smooth ? 0.4 : 0
-                }];
-            }
-
-            return datasets.map((dataset, index) =>
-            {
-                const color = palette[index % palette.length];
-                const colorOpacity = paletteOpacity[index % paletteOpacity.length];
-
-                return {
-                    ...dataset,
-                    backgroundColor: dataset.backgroundColor || colorOpacity,
-                    borderColor: dataset.borderColor || color,
-                    borderWidth: dataset.borderWidth || 2,
-                    fill: dataset.fill !== undefined ? dataset.fill : true,
-                    tension: dataset.tension !== undefined ? dataset.tension : (smooth ? 0.4 : 0)
-                };
-            });
-        };
-
-        this.config = () =>
-        {
-            const style = getComputedStyle(document.body);
-            const textColor = style.getPropertyValue('--ot-text-1').trim();
-            const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
-            const stacked = data['stacked'];
-
-            return {
-                type: 'line',
-                data: {
-                    labels: data['labels'],
-                    datasets: this.datasets()
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    interaction: {
-                        intersect: false,
-                        mode: 'index'
-                    },
-                    plugins: {
-                        legend: {
-                            labels: {
-                                color: textColor,
-                                font: {
-                                    family: style.getPropertyValue('--ot-font-primary').trim()
-                                }
-                            }
-                        },
-                        filler: {
-                            propagate: false
-                        }
-                    },
-                    scales: {
-                        x: {
-                            ticks: { color: textColor },
-                            grid: { color: gridColor }
-                        },
-                        y: {
-                            stacked: stacked,
-                            ticks: { color: textColor },
-                            grid: { color: gridColor },
-                            beginAtZero: true
-                        }
-                    },
-                    ...data['options']
-                }
-            };
-        };
-
-        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/lib/items/transforms/chart/bar.js

@@ -1,137 +0,0 @@
-transforms.ItemAdd({
-    id: 'ot-chart-bar',
-    icon: 'bar_chart',
-    name: 'Bar Chart',
-    description: 'Vertical or horizontal bar charts. Compare values across categories with bars.',
-    js: [
-        'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
-    ],
-    config: {
-        'labels': ['array', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']],
-        'datasets': ['array', []],
-        'stacked': ['boolean', false],
-        'horizontal': ['boolean', false],
-        'options': ['object', {}]
-    },
-    code: function(data, node, transformer)
-    {
-        this.setup = () =>
-        {
-            node.innerHTML = '';
-            node.classList.add('ot-chart-bar');
-
-            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'];
-            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: [42, 56, 28, 84, 65, 39],
-                    backgroundColor: palette[0],
-                    borderColor: palette[0],
-                    borderWidth: 0
-                }];
-            }
-
-            return datasets.map((dataset, index) =>
-            {
-                const color = palette[index % palette.length];
-
-                return {
-                    ...dataset,
-                    backgroundColor: dataset.backgroundColor || color,
-                    borderColor: dataset.borderColor || color,
-                    borderWidth: dataset.borderWidth || 0
-                };
-            });
-        };
-
-        this.config = () =>
-        {
-            const style = getComputedStyle(document.body);
-            const textColor = style.getPropertyValue('--ot-text-1').trim();
-            const gridColor = style.getPropertyValue('--ot-bg-3-border').trim();
-            const stacked = data['stacked'];
-            const horizontal = data['horizontal'];
-
-            return {
-                type: horizontal ? 'bar' : 'bar',
-                data: {
-                    labels: data['labels'],
-                    datasets: this.datasets()
-                },
-                options: {
-                    indexAxis: horizontal ? 'y' : 'x',
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            labels: {
-                                color: textColor,
-                                font: {
-                                    family: style.getPropertyValue('--ot-font-primary').trim()
-                                }
-                            }
-                        }
-                    },
-                    scales: {
-                        x: {
-                            stacked: stacked,
-                            ticks: { color: textColor },
-                            grid: { color: gridColor }
-                        },
-                        y: {
-                            stacked: stacked,
-                            ticks: { color: textColor },
-                            grid: { color: gridColor },
-                            beginAtZero: true
-                        }
-                    },
-                    ...data['options']
-                }
-            };
-        };
-
-        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/lib/items/transforms/chart/bubble.js

@@ -1,166 +0,0 @@
-transforms.ItemAdd({
-    id: 'ot-chart-bubble',
-    icon: 'bubble_chart',
-    name: 'Bubble Chart',
-    description: 'Bubble chart with three dimensions. Display data points as sized bubbles on X/Y axes.',
-    js: [
-        'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
-    ],
-    config: {
-        'datasets': ['array', []],
-        'options': ['object', {}]
-    },
-    code: function(data, node, transformer)
-    {
-        this.setup = () =>
-        {
-            node.innerHTML = '';
-            node.classList.add('ot-chart-bubble');
-
-            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(),
-                brandOpacity: style.getPropertyValue('--ot-brand-opacity').trim(),
-                blueOpacity: style.getPropertyValue('--ot-blue-opacity').trim(),
-                greenOpacity: style.getPropertyValue('--ot-green-opacity').trim(),
-                orangeOpacity: style.getPropertyValue('--ot-orange-opacity').trim(),
-                redOpacity: style.getPropertyValue('--ot-red-opacity').trim()
-            };
-        };
-
-        this.datasets = () =>
-        {
-            const datasets = data['datasets'];
-            const colors = this.colors();
-            const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
-            const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
-
-            if(datasets.length === 0)
-            {
-                return [{
-                    label: 'Sample Data',
-                    data: [
-                        {x: 10, y: 20, r: 8},
-                        {x: 15, y: 35, r: 12},
-                        {x: 20, y: 30, r: 10},
-                        {x: 25, y: 45, r: 15},
-                        {x: 30, y: 40, r: 6},
-                        {x: 35, y: 55, r: 20}
-                    ],
-                    backgroundColor: paletteOpacity[0],
-                    borderColor: palette[0],
-                    borderWidth: 2
-                }];
-            }
-
-            return datasets.map((dataset, index) =>
-            {
-                const color = palette[index % palette.length];
-                const colorOpacity = paletteOpacity[index % paletteOpacity.length];
-
-                return {
-                    ...dataset,
-                    backgroundColor: dataset.backgroundColor || colorOpacity,
-                    borderColor: dataset.borderColor || color,
-                    borderWidth: dataset.borderWidth || 2
-                };
-            });
-        };
-
-        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: 'bubble',
-                data: {
-                    datasets: this.datasets()
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            labels: {
-                                color: textColor,
-                                font: {
-                                    family: style.getPropertyValue('--ot-font-primary').trim()
-                                }
-                            }
-                        },
-                        tooltip: {
-                            callbacks: {
-                                label: function(context)
-                                {
-                                    const label = context.dataset.label || '';
-                                    const x = context.parsed.x;
-                                    const y = context.parsed.y;
-                                    const r = context.raw.r;
-                                    return label + ': (x: ' + x + ', y: ' + y + ', size: ' + r + ')';
-                                }
-                            }
-                        }
-                    },
-                    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']
-                }
-            };
-        };
-
-        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();
-    }
-});