From 07d1fb00602b503208a6b014c64416abc33f532a Mon Sep 17 00:00:00 2001 From: Natxo <1172351+natxocc@users.noreply.github.com> Date: Sat, 21 Mar 2026 21:10:45 +0100 Subject: [PATCH] Update sigpro_ui.js --- packages/sigpro/sigpro_ui.js | 89 +++++++++++++++++++++++++++--------- 1 file changed, 68 insertions(+), 21 deletions(-) diff --git a/packages/sigpro/sigpro_ui.js b/packages/sigpro/sigpro_ui.js index 482bb1a..74ecc10 100644 --- a/packages/sigpro/sigpro_ui.js +++ b/packages/sigpro/sigpro_ui.js @@ -1,17 +1,19 @@ /** - * SigPro 2.0 UI - daisyUI v5 & Tailwind v4 Plugin + * SigPro UI 2.0 - daisyUI v5 & Tailwind v4 Plugin */ (() => { - if (!window.$ || !window.$.use) return console.error("[SigPro UI] Core not found."); + if (!window.$) return console.error("[SigPro UI] Fatal: SigPro 2.0 Core not found."); $.use(($) => { + const ui = {}; + const parseClass = (base, extra) => { if (typeof extra === 'function') return () => `${base} ${extra() || ''}`; return `${base} ${extra || ''}`; }; - /** @param {Object} p @param {any} [c] */ - $._button = (p, c) => button({ + /** _button @param {Object} p @param {any} [c] */ + ui._button = (p, c) => button({ ...p, class: parseClass('btn', p.$class || p.class), $disabled: () => p.$disabled?.() || p.$loading?.() @@ -22,8 +24,8 @@ p.badge && span({ class: `badge ${p.badgeClass || ''}` }, p.badge) ]); - /** @param {Object} p */ - $._input = (p) => label({ class: 'fieldset-label flex flex-col gap-1' }, [ + /** _input @param {Object} p */ + ui._input = (p) => label({ class: 'fieldset-label flex flex-col gap-1' }, [ p.label && div({ class: 'flex items-center gap-2' }, [ span(p.label), p.tip && div({ class: 'tooltip tooltip-right', 'data-tip': p.tip }, span({ class: 'badge badge-ghost badge-xs' }, '?')) @@ -32,8 +34,8 @@ () => p.$error?.() ? span({ class: 'text-error text-xs' }, p.$error()) : null ]); - /** @param {Object} p */ - $._select = (p) => label({ class: 'fieldset-label flex flex-col gap-1' }, [ + /** _select @param {Object} p */ + ui._select = (p) => label({ class: 'fieldset-label flex flex-col gap-1' }, [ p.label && span(p.label), select({ ...p, @@ -42,24 +44,54 @@ }, (p.options || []).map(o => $.html('option', { value: o.value, selected: o.value === p.$value?.() }, o.label))) ]); - /** @param {Object} p */ - $._checkbox = (p) => label({ class: 'label cursor-pointer justify-start gap-3' }, [ + /** _checkbox @param {Object} p */ + ui._checkbox = (p) => label({ class: 'label cursor-pointer justify-start gap-3' }, [ $.html('input', { type: 'checkbox', ...p, class: parseClass('checkbox', p.$class || p.class), $checked: p.$value }), p.label && span({ class: 'label-text' }, p.label) ]); - /** @param {Object} p */ - $._modal = (p, c) => () => p.$open() ? dialog({ class: 'modal modal-open' }, [ + /** _radio @param {Object} p */ + ui._radio = (p) => label({ class: 'label cursor-pointer justify-start gap-3' }, [ + $.html('input', { + type: 'radio', ...p, + class: parseClass('radio', p.$class || p.class), + $checked: () => p.$value?.() === p.value, + onclick: () => p.$value?.(p.value) + }), + p.label && span({ class: 'label-text' }, p.label) + ]); + + /** _range @param {Object} p */ + ui._range = (p) => div({ class: 'flex flex-col gap-2' }, [ + p.label && span({ class: 'label-text' }, p.label), + $.html('input', { type: 'range', ...p, class: parseClass('range', p.$class || p.class), $value: p.$value }) + ]); + + /** _modal @param {Object} p @param {any} c */ + ui._modal = (p, c) => () => p.$open() ? dialog({ class: 'modal modal-open' }, [ div({ class: 'modal-box' }, [ p.title && h3({ class: 'text-lg font-bold mb-4' }, p.title), c, - div({ class: 'modal-action' }, $._button({ onclick: () => p.$open(false) }, "Close")) + div({ class: 'modal-action' }, ui._button({ onclick: () => p.$open(false) }, "Cerrar")) ]), form({ method: 'dialog', class: 'modal-backdrop', onclick: () => p.$open(false) }, button("close")) ]) : null; - /** @param {Object} p */ - $._tabs = (p) => div({ role: 'tablist', class: parseClass('tabs tabs-lifted', p.$class || p.class) }, + /** _dropdown @param {Object} p @param {any} c */ + ui._dropdown = (p, c) => div({ ...p, class: parseClass('dropdown', p.$class || p.class) }, [ + div({ tabindex: 0, role: 'button', class: 'btn m-1' }, p.label), + div({ tabindex: 0, class: 'dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52' }, c) + ]); + + /** _accordion @param {Object} p @param {any} c */ + ui._accordion = (p, c) => div({ class: 'collapse collapse-arrow bg-base-200 mb-2' }, [ + $.html('input', { type: p.name ? 'radio' : 'checkbox', name: p.name, checked: p.open }), + div({ class: 'collapse-title text-xl font-medium' }, p.title), + div({ class: 'collapse-content' }, c) + ]); + + /** _tabs @param {Object} p */ + ui._tabs = (p) => div({ role: 'tablist', class: parseClass('tabs tabs-lifted', p.$class || p.class) }, (p.items || []).map(it => a({ role: 'tab', class: () => `tab ${ (typeof it.active === 'function' ? it.active() : it.active) ? 'tab-active' : '' }`, @@ -67,16 +99,25 @@ }, it.label)) ); - /** @param {Object} p */ - $._menu = (p) => ul({ ...p, class: parseClass('menu bg-base-200 rounded-box', p.$class || p.class) }, + /** _badge @param {Object} p @param {any} c */ + ui._badge = (p, c) => span({ ...p, class: parseClass('badge', p.$class || p.class) }, c); + + /** _tooltip @param {Object} p @param {any} c */ + ui._tooltip = (p, c) => div({ ...p, class: parseClass('tooltip', p.$class || p.class), 'data-tip': p.tip }, c); + + /** _navbar @param {Object} p @param {any} c */ + ui._navbar = (p, c) => div({ ...p, class: parseClass('navbar bg-base-100 shadow-sm px-4', p.$class || p.class) }, c); + + /** _menu @param {Object} p */ + ui._menu = (p) => ul({ ...p, class: parseClass('menu bg-base-200 rounded-box', p.$class || p.class) }, (p.items || []).map(it => li({}, a({ class: () => (typeof it.active === 'function' ? it.active() : it.active) ? 'active' : '', onclick: it.onclick }, [it.icon && span({class:'mr-2'}, it.icon), it.label]))) ); - /** @param {Object} p */ - $._drawer = (p) => div({ class: 'drawer' }, [ + /** _drawer @param {Object} p */ + ui._drawer = (p) => div({ class: 'drawer' }, [ $.html('input', { id: p.id, type: 'checkbox', class: 'drawer-toggle', $checked: p.$open }), div({ class: 'drawer-content' }, p.content), div({ class: 'drawer-side' }, [ @@ -85,10 +126,16 @@ ]) ]); - /** @param {Object} p @param {any} c */ - $._fieldset = (p, c) => fieldset({ ...p, class: parseClass('fieldset bg-base-200 border border-base-300 p-4 rounded-lg', p.$class || p.class) }, [ + /** _fieldset @param {Object} p @param {any} c */ + ui._fieldset = (p, c) => fieldset({ ...p, class: parseClass('fieldset bg-base-200 border border-base-300 p-4 rounded-lg', p.$class || p.class) }, [ p.legend && legend({ class: 'fieldset-legend font-bold' }, p.legend), c ]); + + // Expose components to window and $ object + Object.keys(ui).forEach(key => { + window[key] = ui[key]; + $[key] = ui[key]; + }); }); })();