MOdular

2026-05-05 22:44:16 +02:00
parent fb8c5eabd2
commit e7e3def5ed
13 changed files with 178 additions and 156 deletions
@@ -1,2 +1 @@
-export * from './sigpro-ui.js';
-export * from './locale.js';
+export * from './sigpro-ui.js';
@@ -1,7 +1,6 @@
 import * as All from './sigpro-ui.js';
 import * as Edt from './editor.js';
-import * as Loc from './locale.js';

 if (typeof window !== "undefined") {
-    Object.assign(window, All, Edt, Loc)
+    Object.assign(window, All, Edt)
 }
@@ -1,5 +1,5 @@
 import { $, isFunc, h } from "./sigpro.js"
-import { val, cls } from "./helpers.js"
+import { val, cls } from "./sigpro-ui.js"

 export const Editor = (p) => {
  const { value, class: extraClass } = p
@@ -1,11 +0,0 @@
-// Helpers
-export const val = val => typeof val === "function" ? val() : val;
-export const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
-export const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
-export const filterBy = (items, query, field = 'label') => {
-  const q = String(val(query) || '').toLowerCase();
-  const list = (val(items) || []).map(i => typeof i === 'object' ? i : { label: i, value: i });
-  return !q ? list : list.filter(item => String(item[field] || '').toLowerCase().includes(q));
-};
-export const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
-export const hide = () => document.activeElement?.blur()
@@ -1,7 +0,0 @@
-const currentLocale = $("en");
-const lang = {
-    es: { uploadFiles: "Arrastrar y soltar o click para seleccionar..." },
-    en: { uploadFiles: "Drag and drop or click to select" }
-};
-export const setLocale = (locale) => { if (lang[locale]) currentLocale(locale) }
-export const t = t => () => lang[currentLocale()][t] || t;
@@ -1,13 +1,24 @@
 import { $, watch, h, mount, when, each, isFunc } from "./sigpro.js"
-import { val, getBy, cls, filterBy, rand, hide } from "./helpers.js"
-import { t } from "./locale.js"
-
-// CreateFunctions
+export const val = val => typeof val === "function" ? val() : val;
+export const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
+export const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
+export const filterBy = (items, query, field = 'label') => {
+  const q = String(val(query) || '').toLowerCase();
+  const list = (val(items) || []).map(i => typeof i === 'object' ? i : { label: i, value: i });
+  return !q ? list : list.filter(item => String(item[field] || '').toLowerCase().includes(q));
+};
+export const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
+export const hide = () => document.activeElement?.blur()
+const currentLocale = $("en");
+export const lang = {
+    es: { uploadFiles: "Arrastrar y soltar o click para seleccionar..." },
+    en: { uploadFiles: "Drag and drop or click to select" }
+};
+export const setLocale = (locale) => { if (lang[locale]) currentLocale(locale) }
+export const t = t => () => lang[currentLocale()][t] || t;
 const c1 = (tag, cls) => (p) => h(tag, { ...p, class: `${cls} ${p?.class || ''}`.trim() })
 const c2 = (tag, cls) => (p, c) => h(tag, { ...p, class: `${cls} ${p?.class || ''}`.trim() }, c)
 const ct = (tag, cls, type) => (p) => h(tag, { type, ...p, class: `${cls} ${p?.class || ''}`.trim() })
-
-// Components
 export const Alert = c2("div", "alert")
 export const Avatar = (p, c) => h("div", { class: "avatar" }, h('div', { class: p.class }, c))
 export const AvatarGroup = c2("div", "avatar-group -space-x-6")
@@ -66,7 +77,6 @@ export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate',
 export const Timeline = c2("ul", "timeline")
 export const Toggle = ct("input", "toggle", "checkbox")
 export const Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c)
-
 export const Accordion = (p) => {
    const name = p.name || rand('acc')
    return each(p.items, (it) => {
@@ -77,7 +87,6 @@ export const Accordion = (p) => {
        ]);
    });
 };
-
 export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
    const query = $(val(value) || '')
    const filtered = $(() => filterBy(items, query()))
@@ -99,7 +108,6 @@ export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...p
        )
    ])
 };
-
 export const Calendar = (p) => {
    const internalDate = $(new Date())
    const hoverDate = $(null)
@@ -190,7 +198,6 @@ export const Calendar = (p) => {
        ) : null
    ])
 };
-
 export const Colorpicker = (p) => {
    const current = () => val(p.value) || '#000000'
    return Dropdown({}, [
@@ -203,7 +210,6 @@ export const Colorpicker = (p) => {
        )
    ])
 };
-
 export const ColorPalette = (p) => {
    const current = () => val(p.value) || '#000000'
    const palette = [
@@ -235,7 +241,6 @@ export const ColorPalette = (p) => {
        }))
    ))
 };
-
 export const Datepicker = (p) => {
    const displayValue = $("")
    const rangeMode = () => val(p.range) === true
@@ -290,7 +295,6 @@ export const Datepicker = (p) => {
        )
    ])
 };
-
 export const Fileinput = (p) => {
    const files = $([])
    const drag = $(false)
@@ -355,7 +359,6 @@ export const Fileinput = (p) => {
        )
    ])
 };
-
 export const Input = (p) => {
    const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p;
    const showPassword = $(false);
@@ -379,7 +382,6 @@ export const Input = (p) => {
        hint ? h('div', { class: "validator-hint" }, hint) : null,
    ]);
 };
-
 export const Menu = (p) => {
    if (p.children !== undefined) return h('ul', { class: cls('menu', p.class), ...p }, p.children)
    const { items } = p
@@ -396,7 +398,6 @@ export const Menu = (p) => {
        each(() => val(items) || [], render)
    )
 };
-
 export const Modal = (p) => {
    let dialogRef = null;
    watch(() => { const isOpen = val(p.open); if (!dialogRef) return; isOpen ? dialogRef.showModal() : dialogRef.hide(); });
@@ -414,8 +415,6 @@ export const Modal = (p) => {
        ])
    ]);
 };
-
-
 export const Select = (p, c) => {
    if (c !== undefined) return h('select', { class: cls('select', p.class), ...p }, c)
    const { label, float, placeholder, placeholderDisabled = true, value, left, right, hint, items, keyFn, ...rest } = p
@@ -444,13 +443,11 @@ export const Select = (p, c) => {
        hint ? h('div', { class: 'validator-hint' }, hint) : null
    ])
 };
-
 export const Stat = (p) => h('div', { ...p, class: cls('stat', p.class) }, [
    p.title ? h('div', { class: 'stat-title' }, p.title) : null,
    p.value ? h('div', { class: 'stat-value' }, p.value) : null,
    p.desc ? h('div', { class: 'stat-desc' }, p.desc) : null
 ]);
-
 export const TableItems = ({ items, columns = [], header = true }) => {
    const head = header !== false && columns.some(c => c.label) ? h('thead', {}, h('tr', {}, columns.map(c => h('th', { class: c.class }, c.label)))) : null
    const body = h('tbody', {}, () => {
@@ -459,7 +456,6 @@ export const TableItems = ({ items, columns = [], header = true }) => {
    })
    return [head, body].filter(Boolean)
 };
-
 export const Tabs = (p, c) => {
    if (!p.items) {
        const { class: className, ...rest } = p
@@ -495,7 +491,6 @@ export const Tabs = (p, c) => {
        })
    })
 };
-
 export const Toast = (message, type = "alert-success", duration = 3500) => {
    let container = document.getElementById("sigpro-toast-container");
    if (!container) {