juxscript 1.1.398 → 1.1.399

package/components/sidebar/index.jux

@@ -1,272 +0,0 @@
-import { jux, pageState } from 'juxscript';
-
-var COLLAPSE_ICON_OPEN = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg>';
-var COLLAPSE_ICON_CLOSED = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform:scaleX(-1)"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg>';
-
-export function juxSidebar(id, sections, options) {
-    options = options || {};
-    var _title = options.title || 'App';
-    var _logo = options.logo || _title.charAt(0).toUpperCase();
-    var _footer = options.footer || '';
-    var _width = options.width || '260px';
-    var _collapsedWidth = options.collapsedWidth || '52px';
-    var _target = options.target;
-    var _density = options.density || 'normal';
-    var _collapsible = options.collapsible !== undefined ? options.collapsible : false;
-    var _collapsed = options.collapsed || false;
-    var _sectionCount = 0;
-    var _rendered = false;
-    var _footerRendered = false;
-
-    var DENSITY = {
-        dense: { headerPad: '10px', itemPad: '4px 10px', labelPad: '6px 10px 2px', footerPad: '8px 12px', gap: '0px', fontSize: '12px', iconSize: '13px' },
-        normal: { headerPad: '16px', itemPad: '8px 12px', labelPad: '8px 12px 4px', footerPad: '12px 16px', gap: '1px', fontSize: '13px', iconSize: '15px' },
-        inflated: { headerPad: '20px', itemPad: '12px 16px', labelPad: '12px 16px 6px', footerPad: '16px 20px', gap: '4px', fontSize: '14px', iconSize: '17px' }
-    };
-
-    function normalizeItem(item) {
-        if (typeof item === 'string') {
-            var path = item.startsWith('/') ? item : '/' + item;
-            var seg = path.split('/').filter(Boolean).pop() || 'Home';
-            return { id: id + '-' + path.replace(/^\//, '').replace(/[^a-z0-9]/gi, '-').toLowerCase() || id + '-home', label: seg.charAt(0).toUpperCase() + seg.slice(1), path: path };
-        }
-        // Support RouteInfo shape { path, name, file } from jux.routes.all()
-        var itemPath = item.path || '';
-        var seg = itemPath.split('/').filter(Boolean).pop() || 'home';
-        var fullSlug = itemPath.replace(/^\//, '').replace(/[^a-z0-9]/gi, '-').toLowerCase() || 'home';
-        return {
-            id: item.id || id + '-' + fullSlug,
-            label: item.label || item.name || seg.charAt(0).toUpperCase() + seg.slice(1),
-            path: itemPath,
-            icon: item.icon
-        };
-    }
-
-    function normalizeSections(input) {
-        if (!input || !Array.isArray(input) || input.length === 0) return [];
-        var isFlat = input.every(function (i) { return typeof i === 'string' || (typeof i === 'object' && !i.items); });
-        if (isFlat) return [{ items: input.map(normalizeItem) }];
-        return input.map(function (s) {
-            if (typeof s === 'string') return { items: [normalizeItem(s)] };
-            return { label: s.label, items: (s.items || []).map(normalizeItem) };
-        });
-    }
-
-    function ensureShell() {
-        if (_rendered) return;
-        _rendered = true;
-        injectStyles();
-        var sidebarClass = 'jux-sidebar jux-sidebar--' + _density;
-        if (_collapsed) sidebarClass += ' jux-sidebar--collapsed';
-
-        // If the target container already has our ID, reuse it instead of nesting
-        var existingEl = document.getElementById(id);
-        if (_target === id && existingEl) {
-            existingEl.className = sidebarClass;
-            existingEl.style.width = _collapsed ? _collapsedWidth : _width;
-        } else {
-            jux.div(id, { class: sidebarClass, style: 'width:' + (_collapsed ? _collapsedWidth : _width), target: _target });
-        }
-
-        jux.div(id + '-header', { class: 'jux-sidebar-header', target: id });
-        jux.div(id + '-header-link', { class: 'jux-sidebar-header-link', target: id + '-header' });
-        jux.div(id + '-logo', { class: 'jux-sidebar-logo', target: id + '-header-link' });
-        renderLogo();
-        jux.span(id + '-title', { class: 'jux-sidebar-title-text', content: _title, target: id + '-header-link' });
-
-        // Make header link navigate to root
-        var headerLinkEl = document.getElementById(id + '-header-link');
-        if (headerLinkEl) {
-            headerLinkEl.addEventListener('click', function () {
-                if (window.navigateTo) {
-                    window.navigateTo('/');
-                } else {
-                    window.location.href = '/';
-                }
-            });
-        }
-
-        if (_collapsible) {
-            jux.div(id + '-collapse-btn', {
-                class: 'jux-sidebar-collapse-btn',
-                target: id + '-header'
-            });
-            var btnEl = document.getElementById(id + '-collapse-btn');
-            if (btnEl) btnEl.innerHTML = _collapsed ? COLLAPSE_ICON_CLOSED : COLLAPSE_ICON_OPEN;
-        }
-    }
-
-    function renderLogo() {
-        var logoEl = document.getElementById(id + '-logo');
-        if (!logoEl) return;
-        if (_logo.startsWith('<svg') || _logo.startsWith('<SVG')) {
-            logoEl.innerHTML = _logo;
-        } else if (_logo.startsWith('/') || _logo.startsWith('http') || _logo.startsWith('data:')) {
-            logoEl.innerHTML = '<img src="' + _logo + '" alt="logo" class="jux-sidebar-logo-img" />';
-        } else {
-            logoEl.textContent = _logo;
-        }
-    }
-
-    function renderSection(section) {
-        ensureShell();
-        var i = _sectionCount++;
-        if (i > 0) jux.div(id + '-divider-' + i, { class: 'jux-sidebar-divider', target: id });
-        if (section.label) jux.div(id + '-label-' + i, { class: 'jux-sidebar-label', content: section.label, target: id });
-        jux.nav(id + '-nav-' + i, { target: id, items: section.items });
-    }
-
-    function renderFooter() {
-        if (_footerRendered || !_footer) return;
-        _footerRendered = true;
-        jux.div(id + '-footer', { class: 'jux-sidebar-footer', content: _footer, target: id });
-    }
-
-    function applyCollapsed(collapsed) {
-        _collapsed = collapsed;
-        var el = document.getElementById(id);
-        if (!el) return;
-        if (_collapsed) {
-            el.classList.add('jux-sidebar--collapsed');
-            el.style.width = _collapsedWidth;
-        } else {
-            el.classList.remove('jux-sidebar--collapsed');
-            el.style.width = _width;
-        }
-        if (_collapsible) {
-            var btnEl = document.getElementById(id + '-collapse-btn');
-            if (btnEl) btnEl.innerHTML = _collapsed ? COLLAPSE_ICON_CLOSED : COLLAPSE_ICON_OPEN;
-        }
-    }
-
-    function injectStyles() {
-        var appPadding = {
-            dense: '10px',
-            normal: '16px',
-            inflated: '24px'
-        };
-        var currentWidth = _collapsed ? _collapsedWidth : _width;
-        jux.style('sidebar-styles', '\
-        body { margin: 0; }\
-        #app { left: '+ currentWidth + '; position: fixed; top: 0; width: calc(100% - ' + currentWidth + '); height: 100vh; padding: ' + appPadding[_density] + '; box-sizing: border-box; transition: left 0.2s ease, width 0.2s ease, padding 0.2s ease; overflow-y: auto; }\
-        .jux-sidebar { display:flex; flex-direction:column; min-height:100vh; background:hsl(var(--card)); color:hsl(var(--card-foreground)); border-right:1px solid hsl(var(--border)); font-family:var(--font-sans,system-ui,sans-serif); transition:width 0.2s ease; overflow:hidden; }\
-        .jux-sidebar-header { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; border-bottom:1px solid hsl(var(--border)); min-height:20px; position:relative; }\
-        .jux-sidebar-header-link { display:flex; align-items:center; gap:8px; cursor:pointer; flex:1; min-width:0; text-decoration:none; color:inherit; }\
-        .jux-sidebar-header-link:hover { opacity:0.8; }\
-        .jux-sidebar-logo { width:20px; height:20px; min-width:20px; border-radius:6px; background:hsl(var(--primary)); display:flex; align-items:center; justify-content:center; color:hsl(var(--primary-foreground)); font-size:11px; font-weight:700; flex-shrink:0; overflow:hidden; }\
-        .jux-sidebar-logo-img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }\
-        .jux-sidebar-logo svg { width:14px; height:14px; }\
-        .jux-sidebar-title-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity 0.2s ease, max-width 0.2s ease; max-width:200px; flex:1; }\
-        .jux-sidebar-label { font-size:11px; font-weight:500; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; overflow:hidden; transition:opacity 0.2s ease, max-height 0.2s ease; max-height:30px; }\
-        .jux-sidebar-footer { margin-top:auto; border-top:1px solid hsl(var(--border)); font-size:11px; color:hsl(var(--muted-foreground)); white-space:nowrap; overflow:hidden; transition:opacity 0.2s ease; }\
-        .jux-sidebar-divider { height:1px; background:hsl(var(--border)); margin:4px 8px; }\
-        .jux-nav-item { display:flex; align-items:center; border-radius:var(--radius,6px); font-weight:500; color:hsl(var(--foreground)); cursor:pointer; transition:background 0.15s; user-select:none; text-decoration:none; white-space:nowrap; overflow:hidden; }\
-        .jux-nav-item:hover { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }\
-        .jux-nav-item--active { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); font-weight:600; }\
-        .jux-nav-item-icon { text-align:center; flex-shrink:0; }\
-        .jux-nav-item-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:opacity 0.2s ease; }\
-        \
-        .jux-sidebar-collapse-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:6px; color:hsl(var(--muted-foreground)); flex-shrink:0; transition:background 0.15s, color 0.15s; margin-left:auto; }\
-        .jux-sidebar-collapse-btn:hover { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }\
-        .jux-sidebar-collapse-btn svg { display:block; }\
-        \
-        .jux-sidebar--collapsed .jux-sidebar-header { flex-direction:column; align-items:center; gap:4px; padding-left:4px!important; padding-right:4px!important; }\
-        .jux-sidebar--collapsed .jux-sidebar-title-text { opacity:0; max-width:0; height:0; overflow:hidden; margin:0; }\
-        .jux-sidebar--collapsed .jux-sidebar-label { opacity:0; max-height:0; padding-top:0!important; padding-bottom:0!important; margin:0; }\
-        .jux-sidebar--collapsed .jux-sidebar-footer { opacity:0; height:0; padding:0!important; border:none; }\
-        .jux-sidebar--collapsed .jux-nav-item-text { opacity:0; width:0; overflow:hidden; }\
-        .jux-sidebar--collapsed .jux-nav-item { justify-content:center; gap:0!important; }\
-        .jux-sidebar--collapsed .jux-sidebar-collapse-btn { margin-left:0; width:24px; height:24px; }\
-        .jux-sidebar--collapsed .jux-sidebar-collapse-btn svg { width:14px; height:14px; }\
-        .jux-sidebar--collapsed .jux-sidebar-logo { margin:0; }\
-        .jux-sidebar--collapsed ~ #app, .jux-sidebar--collapsed + #app { left: ' + _collapsedWidth + '; width: calc(100% - ' + _collapsedWidth + '); }\
-        \
-        .jux-sidebar--dense .jux-sidebar-header { padding:' + DENSITY.dense.headerPad + '; }\
-        .jux-sidebar--dense .jux-sidebar-label { padding:' + DENSITY.dense.labelPad + '; }\
-        .jux-sidebar--dense .jux-sidebar-footer { padding:' + DENSITY.dense.footerPad + '; }\
-        .jux-sidebar--dense .jux-nav-item { padding:' + DENSITY.dense.itemPad + '; margin:' + DENSITY.dense.gap + ' 0; font-size:' + DENSITY.dense.fontSize + '; gap:8px; }\
-        .jux-sidebar--dense .jux-nav-item-icon { width:16px; font-size:' + DENSITY.dense.iconSize + '; }\
-        .jux-sidebar--dense ~ #app, .jux-sidebar--dense + #app { padding: ' + appPadding.dense + '; }\
-        \
-        .jux-sidebar--normal .jux-sidebar-header { padding:' + DENSITY.normal.headerPad + '; }\
-        .jux-sidebar--normal .jux-sidebar-label { padding:' + DENSITY.normal.labelPad + '; }\
-        .jux-sidebar--normal .jux-sidebar-footer { padding:' + DENSITY.normal.footerPad + '; }\
-        .jux-sidebar--normal .jux-nav-item { padding:' + DENSITY.normal.itemPad + '; margin:' + DENSITY.normal.gap + ' 0; font-size:' + DENSITY.normal.fontSize + '; gap:10px; }\
-        .jux-sidebar--normal .jux-nav-item-icon { width:18px; font-size:' + DENSITY.normal.iconSize + '; }\
-        .jux-sidebar--normal ~ #app, .jux-sidebar--normal + #app { padding: ' + appPadding.normal + '; }\
-        \
-        .jux-sidebar--inflated .jux-sidebar-header { padding:' + DENSITY.inflated.headerPad + '; }\
-        .jux-sidebar--inflated .jux-sidebar-label { padding:' + DENSITY.inflated.labelPad + '; }\
-        .jux-sidebar--inflated .jux-sidebar-footer { padding:' + DENSITY.inflated.footerPad + '; }\
-        .jux-sidebar--inflated .jux-nav-item { padding:' + DENSITY.inflated.itemPad + '; margin:' + DENSITY.inflated.gap + ' 0; font-size:' + DENSITY.inflated.fontSize + '; gap:12px; }\
-        .jux-sidebar--inflated .jux-nav-item-icon { width:20px; font-size:' + DENSITY.inflated.iconSize + '; }\
-        .jux-sidebar--inflated ~ #app, .jux-sidebar--inflated + #app { padding: ' + appPadding.inflated + '; }\
-        ');
-    }
-
-    var api = {
-        id: id,
-        title: function (val) { _title = val; return api; },
-        logo: function (val) { _logo = val; return api; },
-        footer: function (val) {
-            _footer = val;
-            if (_rendered) renderFooter();
-            return api;
-        },
-        width: function (val) { _width = val; return api; },
-        collapsedWidth: function (val) { _collapsedWidth = val; return api; },
-        target: function (val) { _target = val; return api; },
-        density: function (val) { _density = val; return api; },
-        collapsible: function (val) { _collapsible = val !== undefined ? val : true; return api; },
-
-        section: function (label, items) {
-            renderSection({ label: label, items: (items || []).map(normalizeItem) });
-            return api;
-        },
-
-        items: function (items) {
-            renderSection({ items: (items || []).map(normalizeItem) });
-            return api;
-        },
-
-        render: function () {
-            ensureShell();
-            renderFooter();
-            if (_collapsible) {
-                pageState.__watch(function () {
-                    if (pageState[id + '-collapse-btn'].click) {
-                        api.toggleCollapse();
-                    }
-                });
-            }
-            return api;
-        },
-
-        addSection: function (label, items) { return api.section(label, items); },
-        setTitle: function (val) { pageState[id + '-title'].content = val; return api; },
-        setFooter: function (val) { pageState[id + '-footer'].content = val; return api; },
-        show: function () { pageState[id].visible = true; return api; },
-        hide: function () { pageState[id].visible = false; return api; },
-        toggle: function () { pageState[id].visible = !pageState[id].visible; return api; },
-        collapse: function () { applyCollapsed(true); return api; },
-        expand: function () { applyCollapsed(false); return api; },
-        toggleCollapse: function () { applyCollapsed(!_collapsed); return api; },
-        isCollapsed: function () { return _collapsed; },
-        getElement: function () { return document.getElementById(id); }
-    };
-
-    if (sections && Array.isArray(sections) && sections.length > 0) {
-        var normalized = normalizeSections(sections);
-        normalized.forEach(renderSection);
-        renderFooter();
-        if (_collapsible) {
-            pageState.__watch(function () {
-                if (pageState[id + '-collapse-btn'].click) {
-                    api.toggleCollapse();
-                }
-            });
-        }
-    }
-
-    return api;
-}

package/components/sidebar/usage.jux

@@ -1,7 +0,0 @@
-import { jux } from 'juxscript';
-import { juxSidebar } from './index.jux';
-const allRoutes = jux.routes.all();
-// ['/route/path', '/another/route']
-juxSidebar('my-sidebar', allRoutes,
-    { title: 'Simple App', logo: 'J', footer: 'v1.0', density: 'inflated', collapsible: true });
-