natxocc
817de6a0ee
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 6s
747 lines
39 KiB
JavaScript
747 lines
39 KiB
JavaScript
// All base components
|
|
import { $, $$, watch, batch, h, Fragment, mount, when, each, router, onUnmount, isArr, isFunc, isObj } from "./sigpro.js"
|
|
if (typeof window !== "undefined") {
|
|
"a abbr article aside audio b blockquote br button canvas caption cite code col colgroup datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd label legend li main mark meter nav object ol optgroup option output p picture pre progress section select slot small source span strong sub summary sup svg table tbody td template textarea tfoot th thead time tr u ul video"
|
|
.split(" ")
|
|
.forEach(tag => { window[tag] = (props, children) => h(tag, props, children) })
|
|
}
|
|
export { $, $$, watch, batch, h, Fragment, mount, when, each, router, onUnmount, isArr, isFunc, isObj }
|
|
|
|
// Helpers
|
|
const val = val => typeof val === "function" ? val() : val;
|
|
const getBy = (item, field = 'label') => (item && typeof item === 'object') ? item[field] : item;
|
|
const cls = (...classes) => classes.filter(Boolean).join(' ').trim();
|
|
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));
|
|
};
|
|
const rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`
|
|
export const hide = () => document.activeElement?.blur()
|
|
|
|
// Locales
|
|
export const lang = {
|
|
es: {
|
|
uploadFiles: "Arrastrar y soltar o click para seleccionar...",
|
|
},
|
|
en: {
|
|
uploadFiles: "Drag and drop or click to select",
|
|
}
|
|
};
|
|
|
|
export const currentLocale = $("en");
|
|
export const Locale = t => currentLocale(t);
|
|
export const t = t => () => lang[currentLocale()][t] || t;
|
|
|
|
// Components
|
|
export const Accordion = (p) => {
|
|
const name = p.name || rand('acc')
|
|
return each(p.items, (it) => {
|
|
return h('div', { class: cls('collapse', p.class) }, [
|
|
h('input', { type: 'radio', name, checked: it.open || undefined }),
|
|
it.title ? h('div', { class: cls("collapse-title", `${it.classTitle ?? ' font-semibold'}`) }, it.title) : null,
|
|
it.content ? h('div', { class: cls("collapse-content text-sm", `${it.classContent ?? ' font-semibold'}`) }, it.content) : null,
|
|
]);
|
|
});
|
|
}
|
|
export const Alert = (p, c) => h("div", { ...p, class: cls("alert", p.class) }, c);
|
|
export const Avatar = (p, c) => h("div", { class: "avatar" }, h('div', { class: p.class }, c));
|
|
export const AvatarGroup = (p, c) => h("div", { ...p, class: cls("avatar-group -space-x-6", p.class) }, c);
|
|
export const Autocomplete = ({ items, value, onselect, placeholder = '...', ...props }) => {
|
|
const query = $(val(value) || '')
|
|
const filtered = $(() => filterBy(items, query()))
|
|
const pick = (item) => {
|
|
const display = getBy(item)
|
|
const actual = typeof item === 'string' ? item : item.value
|
|
query(display)
|
|
if (isFunc(value)) value(actual)
|
|
onselect?.(item)
|
|
hide()
|
|
}
|
|
return Dropdown({ class: 'w-80' }, [
|
|
h('div', { tabindex: '0', role: 'button', class: 'w-full' }, Input({ ...props, placeholder, value: query, left: Icon('icon-[lucide--search]') })),
|
|
DropdownContent({ class: 'p-2 bg-base-100 rounded-box shadow-xl w-full max-h-60 overflow-y-auto border border-base-300 z-50' },
|
|
h('ul', { class: 'menu flex-col flex-nowrap w-full p-0' }, [
|
|
each(filtered, (item) => h('li', {}, [h('a', { onmousedown: (e) => e.preventDefault(), onclick: () => pick(item) }, getBy(item))]), 'value'),
|
|
() => filtered().length === 0 ? h('li', { class: 'p-4 opacity-50 text-center' }, 'Sin resultados') : null
|
|
])
|
|
)
|
|
])
|
|
}
|
|
export const Badge = (p, c) => h("span", { ...p, class: cls("badge", p.class) }, c);
|
|
export const Breadcrumbs = (p, c) => h("div", { ...p, class: cls("breadcrumbs", p.class) }, c);
|
|
export const Button = (p, c) => h("button", { ...p, class: cls("btn", p.class) }, c);
|
|
export const Calendar = (p) => {
|
|
const internalDate = $(new Date())
|
|
const hoverDate = $(null)
|
|
const startHour = $(0)
|
|
const endHour = $(0)
|
|
const now = new Date()
|
|
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
|
const fmt = d => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
|
|
const rangeMode = () => val(p.range) === true
|
|
const current = () => val(p.value)
|
|
const selectDate = (date) => {
|
|
const s = fmt(date)
|
|
const v = current()
|
|
if (rangeMode()) {
|
|
if (!v?.start || (v.start && v.end)) {
|
|
p.onChange?.({ start: s, end: null, ...(p.hour && { startHour: startHour() }) })
|
|
} else {
|
|
const start = v.start
|
|
const nv = s < start ? { start: s, end: start } : { start, end: s }
|
|
if (p.hour) { nv.startHour = v.startHour ?? startHour(); nv.endHour = endHour() }
|
|
p.onChange?.(nv)
|
|
}
|
|
} else {
|
|
p.onChange?.(p.hour ? `${s}T${String(startHour()).padStart(2, '0')}:00:00` : s)
|
|
}
|
|
}
|
|
const move = (m) => { const d = internalDate(); internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1)) }
|
|
const moveYear = (y) => { const d = internalDate(); internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1)) }
|
|
const HourSlider = ({ value: hVal, onChange: onH }) => h('div', { class: 'flex-1' }, [
|
|
h('div', { class: 'flex gap-2 items-center' }, [
|
|
h('input', { type: 'range', min: 0, max: 23, value: hVal, class: 'range range-xs flex-1', oninput: e => onH(+e.target.value) }),
|
|
h('span', { class: 'text-sm font-mono min-w-[48px] text-center' }, () => String(val(hVal)).padStart(2, '0') + ':00')
|
|
])
|
|
])
|
|
return h('div', {
|
|
class: cls('p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none', p.class)
|
|
}, [
|
|
h('div', { class: 'flex justify-between items-center mb-4 gap-1' }, [
|
|
h('div', { class: 'flex gap-0.5' }, [
|
|
h('button', { type: 'button', class: 'btn btn-ghost btn-xs px-1', onclick: () => moveYear(-1) }, h('span', { class: 'icon-[lucide--chevrons-left]' })),
|
|
h('button', { type: 'button', class: 'btn btn-ghost btn-xs px-1', onclick: () => move(-1) }, h('span', { class: 'icon-[lucide--chevron-left]' }))
|
|
]),
|
|
h('span', { class: 'font-bold uppercase flex-1 text-center' }, () => internalDate().toLocaleString('es-ES', { month: 'short', year: 'numeric' })),
|
|
h('div', { class: 'flex gap-0.5' }, [
|
|
h('button', { type: 'button', class: 'btn btn-ghost btn-xs px-1', onclick: () => move(1) }, h('span', { class: 'icon-[lucide--chevron-right]' })),
|
|
h('button', { type: 'button', class: 'btn btn-ghost btn-xs px-1', onclick: () => moveYear(1) }, h('span', { class: 'icon-[lucide--chevrons-right]' }))
|
|
])
|
|
]),
|
|
h('div', { class: 'grid grid-cols-7 gap-1', onmouseleave: () => hoverDate(null) }, [
|
|
...['L', 'M', 'X', 'J', 'V', 'S', 'D'].map(d => h('div', { class: 'text-[10px] opacity-40 font-bold text-center' }, d)),
|
|
() => {
|
|
const d = internalDate(), y = d.getFullYear(), m = d.getMonth()
|
|
const firstDay = new Date(y, m, 1).getDay()
|
|
const offset = firstDay === 0 ? 6 : firstDay - 1
|
|
const dim = new Date(y, m + 1, 0).getDate()
|
|
const cells = []
|
|
for (let i = 0; i < offset; i++) cells.push(h('div'))
|
|
for (let i = 1; i <= dim; i++) {
|
|
const date = new Date(y, m, i), ds = fmt(date)
|
|
cells.push(h('button', {
|
|
type: 'button',
|
|
class: () => {
|
|
const v = current(), h = hoverDate()
|
|
const isStart = typeof v === 'string' ? v.split('T')[0] === ds : v?.start === ds
|
|
const isEnd = v?.end === ds
|
|
let inRange = false
|
|
if (rangeMode() && v?.start) {
|
|
const start = v.start
|
|
if (!v.end && h) inRange = (ds > start && ds <= h) || (ds < start && ds >= h)
|
|
else if (v.end) inRange = ds > start && ds < v.end
|
|
}
|
|
const base = 'btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative'
|
|
const st = isStart || isEnd ? 'btn-primary z-10' : inRange ? 'bg-primary/20 border-none rounded-none' : 'btn-ghost'
|
|
const today = ds === todayStr ? 'ring-1 ring-primary ring-inset font-black text-primary' : ''
|
|
return cls(base, st, today)
|
|
},
|
|
onmouseenter: () => rangeMode() && hoverDate(ds),
|
|
onclick: () => selectDate(date)
|
|
}, i.toString()))
|
|
}
|
|
return cells
|
|
}
|
|
]),
|
|
p.hour ? h('div', { class: 'mt-3 pt-2 border-t border-base-300' },
|
|
rangeMode()
|
|
? h('div', { class: 'flex gap-4' }, [HourSlider({ value: startHour, onChange: h => startHour(h) }), HourSlider({ value: endHour, onChange: h => endHour(h) })])
|
|
: HourSlider({ value: startHour, onChange: h => startHour(h) })
|
|
) : null
|
|
])
|
|
}
|
|
export const Card = (p, c) => h('div', { ...p, class: cls('card', p.class) }, c);
|
|
export const CardTitle = (p, c) => h('div', { ...p, class: cls('card-title', p.class) }, c);
|
|
export const CardBody = (p, c) => h('div', { ...p, class: cls('card-body', p.class) }, c);
|
|
export const CardActions = (p, c) => h('div', { ...p, class: cls('card-actions', p.class) }, c);
|
|
export const Carousel = (p, c) => h("div", { ...p, class: cls("carousel", p.class) }, c);
|
|
export const CarouselItem = (p, c) => h("div", { ...p, class: cls("carousel-item", p.class) }, c);
|
|
export const Chat = (p, c) => h("div", { ...p, class: cls("chat", p.class) }, c);
|
|
export const ChatBubble = (p, c) => h("div", { ...p, class: cls("chat-bubble", p.class) }, c);
|
|
export const ChatFooter = (p, c) => h("div", { ...p, class: cls("chat-footer", p.class) }, c);
|
|
export const ChatHeader = (p, c) => h("div", { ...p, class: cls("chat-header", p.class) }, c);
|
|
export const ChatImage = (p, c) => h("div", { ...p, class: cls("chat-image avatar", p.class) }, h("div", { class: "w-10 rounded-full" }, typeof c === "string" ? h("img", { src: c, alt: "avatar" }) : c));
|
|
export const Checkbox = (p) => h("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) });
|
|
export const Colorpicker = (p) => {
|
|
const current = () => val(p.value) || '#000000'
|
|
return Dropdown({}, [
|
|
DropdownButton({ class: 'btn' }, [
|
|
h('div', { class: 'size-5 rounded-sm', style: () => `background-color: ${current()}` }),
|
|
p.label && h('span', {}, p.label)
|
|
]),
|
|
DropdownContent({ class: 'p-0' },
|
|
ColorPalette({ value: p.value, onchange: (c) => { isFunc(p.value) ? p.value(c) : p.onchange?.(c) } })
|
|
)
|
|
])
|
|
}
|
|
export const ColorPalette = (p) => {
|
|
const current = () => val(p.value) || '#000000'
|
|
const palette = [
|
|
'#000', '#1A1A1A', '#333', '#4D4D4D', '#666', '#808080', '#B3B3B3', '#FFF',
|
|
'#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626', '#ef4444', '#f87171', '#fca5a5',
|
|
'#431407', '#7c2d12', '#9a3412', '#c2410c', '#ea580c', '#f97316', '#fb923c', '#ffedd5',
|
|
'#713f12', '#a16207', '#ca8a04', '#eab308', '#facc15', '#fde047', '#fef08a', '#fff9c4',
|
|
'#064e3b', '#065f46', '#059669', '#10b981', '#34d399', '#4ade80', '#84cc16', '#d9f99d',
|
|
'#082f49', '#075985', '#0284c7', '#0ea5e9', '#38bdf8', '#7dd3fc', '#22d3ee', '#cffafe',
|
|
'#1e1b4b', '#312e81', '#4338ca', '#4f46e5', '#6366f1', '#818cf8', '#a5b4fc', '#e0e7ff',
|
|
'#2e1065', '#4c1d95', '#6d28d9', '#7c3aed', '#8b5cf6', '#a855f7', '#d946ef', '#fae8ff'
|
|
]
|
|
const pick = (c) => {
|
|
isFunc(p.value) ? p.value(c) : p.onchange?.(c)
|
|
hide()
|
|
}
|
|
|
|
return h('div', {
|
|
class: cls('p-3 bg-base-100 rounded-box shadow w-64', p.class)
|
|
}, h('div', { class: 'grid grid-cols-8 gap-1' },
|
|
palette.map(c => h('button', {
|
|
type: 'button',
|
|
style: `background-color: ${c}`,
|
|
class: () => {
|
|
const act = current().toLowerCase() === c.toLowerCase()
|
|
return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5 p-0 min-h-0 ${act ? 'ring-2 ring-offset-1 ring-primary z-10 scale-110' : ''}`
|
|
},
|
|
onclick: () => { pick(c) }
|
|
}))
|
|
))
|
|
}
|
|
export const Datepicker = (p) => {
|
|
const displayValue = $("")
|
|
const rangeMode = () => val(p.range) === true
|
|
|
|
watch(() => {
|
|
const v = val(p.value)
|
|
if (!v) return displayValue("")
|
|
let text = ""
|
|
if (typeof v === "string") {
|
|
text = p.hour && v.includes("T") ? v.replace("T", " ") : v
|
|
} else if (v.start && v.end) {
|
|
const startStr = p.hour && v.startHour != null ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start
|
|
const endStr = p.hour && v.endHour != null ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end
|
|
text = `${startStr} - ${endStr}`
|
|
} else if (v.start) {
|
|
const startStr = p.hour && v.startHour != null ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start
|
|
text = `${startStr}...`
|
|
}
|
|
displayValue(text)
|
|
})
|
|
|
|
const handleChange = (val) => {
|
|
if (isFunc(p.value)) p.value(val)
|
|
else p.onChange?.(val)
|
|
if (!rangeMode() || val?.end != null) hide()
|
|
}
|
|
|
|
return Dropdown({ class: cls('w-full', p.class) }, [
|
|
h('label', {
|
|
tabindex: '0',
|
|
role: 'button',
|
|
class: 'input input-bordered flex items-center gap-2 cursor-pointer'
|
|
}, [
|
|
h('span', { class: 'icon-[lucide--calendar] shrink-0' }),
|
|
h('span', {
|
|
class: () => `grow text-left truncate ${!displayValue() ? 'opacity-50' : ''}`,
|
|
}, () => displayValue() || p.placeholder || (rangeMode() ? 'Seleccionar rango...' : 'Seleccionar fecha...')),
|
|
() => displayValue() ? h('button', {
|
|
type: 'button',
|
|
class: 'btn btn-ghost btn-xs btn-circle -mr-2',
|
|
onmousedown: (e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
if (isFunc(p.value)) p.value(null)
|
|
else p.onChange?.(null)
|
|
displayValue("") // Forzar limpieza visual inmediata
|
|
}
|
|
}, h('span', { class: 'icon-[lucide--x] opacity-50' })) : null
|
|
]),
|
|
DropdownContent({ class: 'p-0' },
|
|
Calendar({ value: p.value, range: rangeMode(), hour: p.hour, onChange: handleChange })
|
|
)
|
|
])
|
|
}
|
|
export const Drawer = (p, c) => div({ ...p, class: cls('drawer', p.class) }, c)
|
|
export const DrawerToggle = (p) => input({ ...p, type: 'checkbox', class: 'drawer-toggle', checked: () => val(p.checked), onchange: (e) => isFunc(p.checked) && p.checked(e.target.checked) })
|
|
export const DrawerContent = (p, c) => div({ ...p, class: cls('drawer-content', p.class) }, c)
|
|
export const DrawerSide = (p, c) => div({ ...p, class: cls('drawer-side', p.class) }, c)
|
|
export const DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls('drawer-overlay', p.class) })
|
|
export const Divider = (p) => h("div", { ...p, class: cls("divider", p.class) });
|
|
export const Dropdown = (p, c) => (h('div', { ...p, class: cls('dropdown', p.class) }, c));
|
|
export const DropdownButton = (p, c) => (h('div', { ...p, tabindex: '0', role: 'button', class: cls('btn', p.class) }, c));
|
|
export const DropdownContent = (p, c) => (h('div', { ...p, tabindex: '0', class: cls('dropdown-content', p.class) }, c));
|
|
export const Fab = (p, c) => h("div", { class: "fab" }, [h('div', { tabindex: "0", role: "button", class: cls('btn', p.class) }, Icon(p.icon)), c]);
|
|
export const Fieldset = (p, c) => h("fieldset", { class: cls("fieldset", p.class) }, [h("legend", { class: "fieldset-legend" }, p.label), c])
|
|
export const Fileinput = (p) => {
|
|
const files = $([])
|
|
const drag = $(false)
|
|
const error = $(null)
|
|
const maxBytes = (p.max || 2) * 1024 * 1024
|
|
const process = (fileList) => {
|
|
const arr = Array.from(fileList)
|
|
error(null)
|
|
if (arr.some(f => f.size > maxBytes)) {
|
|
error(`Máx ${p.max || 2}MB`)
|
|
return
|
|
}
|
|
const updated = [...files(), ...arr]
|
|
files(updated)
|
|
if (isFunc(p.onselect)) p.onselect(updated)
|
|
else if (isFunc(p.value)) p.value(updated)
|
|
}
|
|
const remove = (idx) => {
|
|
const updated = files().filter((_, i) => i !== idx)
|
|
files(updated)
|
|
if (isFunc(p.onselect)) p.onselect(updated)
|
|
else if (isFunc(p.value)) p.value(updated)
|
|
}
|
|
return h('div', { class: cls('fieldset w-full p-0', p.class) }, [
|
|
h('label', {
|
|
class: () => `relative flex items-center justify-between w-full h-12 px-4 border-2 border-dashed rounded-lg cursor-pointer transition-all duration-200 ${drag() ? 'border-primary bg-primary/10' : 'border-base-content/20 bg-base-100 hover:bg-base-200'}`,
|
|
ondragover: (e) => { e.preventDefault(); drag(true) },
|
|
ondragleave: () => drag(false),
|
|
ondrop: (e) => { e.preventDefault(); drag(false); process(e.dataTransfer.files) }
|
|
}, [
|
|
h('div', { class: 'flex items-center gap-3 w-full' }, [
|
|
h('span', { class: 'icon-[lucide--upload]' }),
|
|
h('span', { class: 'text-sm opacity-70 truncate grow text-left' }, t("uploadFiles")),
|
|
h('span', { class: 'text-[10px] opacity-40 shrink-0' }, `Máx ${p.max || 2}MB`)
|
|
]),
|
|
h('input', {
|
|
type: 'file',
|
|
multiple: true,
|
|
accept: p.accept || '*',
|
|
class: 'hidden',
|
|
onchange: (e) => process(e.target.files)
|
|
})
|
|
]),
|
|
() => error() && h('span', { class: 'text-[10px] text-error mt-1 px-1 font-medium' }, error()),
|
|
when(() => files().length > 0, () =>
|
|
h('ul', { class: 'mt-2 space-y-1' },
|
|
each(files, (file, idx) =>
|
|
h('li', { class: 'flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300' }, [
|
|
h('div', { class: 'flex items-center gap-2 truncate' }, [
|
|
h('span', { class: 'opacity-50' }, '📄'),
|
|
h('span', { class: 'truncate font-medium max-w-[200px]' }, file.name),
|
|
h('span', { class: 'text-[9px] opacity-40' }, `(${(file.size / 1024).toFixed(0)} KB)`)
|
|
]),
|
|
h('button', {
|
|
type: 'button',
|
|
class: 'btn btn-ghost btn-xs btn-circle',
|
|
onclick: (e) => { e.preventDefault(); remove(idx) }
|
|
}, h('span', { class: 'icon-[lucide--x]' }))
|
|
])
|
|
)
|
|
)
|
|
)
|
|
])
|
|
}
|
|
export const Icon = (p) => h("span", { class: p.startsWith("icon-") ? p : "" }, p.startsWith("icon-") ? null : p);
|
|
export const Indicator = (p, c) => h("div", { ...p, class: cls("indicator", p.class) }, [p.value && h("span", { class: cls("indicator-item badge", p.class) }, p.value), c]);
|
|
export const Input = (p) => {
|
|
const { label, icon, float, placeholder, value, left, right, rule, hint, content, ...rest } = p;
|
|
const showPassword = $(false);
|
|
const isPassword = p.type === 'password';
|
|
const pattern = rule ?? null;
|
|
const inputType = () => isPassword ? (val(showPassword) ? 'text' : 'password') : (p.type || 'search');
|
|
return h("label", { class: float ? 'floating-label' : '' }, [
|
|
float ? h("span", {}, label) : null,
|
|
h("label", { pattern: pattern, class: () => cls('input validator', p.class) },
|
|
[
|
|
label && !float ? h('span', { class: 'label' }, label) : null,
|
|
left ?? null,
|
|
h('input', { ...rest, type: inputType, class: 'grow', pattern: pattern, placeholder: placeholder || label || ' ', value: value }),
|
|
right ?? null,
|
|
isPassword ? Swap({ class: 'ml-2' }, [
|
|
SwapToggle({ value: showPassword, class: "swap-rotate" }),
|
|
SwapOn({}, Icon('icon-[lucide--eye]')),
|
|
SwapOff({}, Icon('icon-[lucide--eye-off]')),
|
|
]) : null
|
|
]),
|
|
hint ? h('div', { class: "validator-hint" }, hint) : null,
|
|
]);
|
|
};
|
|
export const Kbd = (p, c) => h("kbd", { ...p, class: cls("kbd", p.class) }, c);
|
|
export const List = (p, c) => h('ul', { ...p, class: cls('list', p.class) }, c)
|
|
export const ListRows = (p) => () => (val(p.items) || []).map((item, idx) => h('li', { class: cls('list-row', p.class, item?.class) }, typeof p.render === 'function' ? p.render(item, idx) : item))
|
|
export const Loading = (p, c) => h("span", { ...p, class: cls("loading loading-spinner", p.class) }, c);
|
|
export const Menu = (p) => {
|
|
if (p.children !== undefined) return h('ul', { class: cls('menu', p.class), ...p }, p.children)
|
|
const { items } = p
|
|
const render = (item) => item.children
|
|
? h('li', {}, h('details', { open: item.open || undefined }, [
|
|
h('summary', {}, getBy(item)),
|
|
h('ul', {}, each(() => val(item.children) || [], render))
|
|
]))
|
|
: h('li', {}, h('a', {
|
|
href: item.href,
|
|
onclick: item.onclick ? (e) => { if (!item.href) e.preventDefault(); item.onclick(e) } : null
|
|
}, getBy(item)))
|
|
return h('ul', { class: cls('menu', p.class) },
|
|
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(); });
|
|
const close = () => isFunc(p.open) && p.open(false);
|
|
return h("dialog", { ...p, ref: el => dialogRef = el, class: cls('modal', p.class), onclose: close, oncancel: close }, [
|
|
h("div", { class: "modal-box" }, [
|
|
p.title && h("h3", { class: "text-lg font-bold" }, p.title),
|
|
p.children,
|
|
h("div", { class: "modal-action" }, [
|
|
p.actions || Button({ class: 'btn', onclick: close }, 'Cerrar')
|
|
])
|
|
]),
|
|
h("form", { method: "dialog", class: "modal-backdrop" }, [
|
|
h("button", {}, "close")
|
|
])
|
|
]);
|
|
};
|
|
export const Navbar = (p, c) => h("div", { ...p, class: cls("navbar", p.class) }, c);
|
|
export const Progress = (p) => h("progress", { ...p, class: cls("progress", p.class) });
|
|
export const Radial = (p, c) => h("div", { class: cls("radial-progress", p.class,), style: `--value:${val(p.value) ?? 0};`, role: "progressbar", "aria-valuenow": p.value }, c)
|
|
export const Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) });
|
|
export const Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) });
|
|
export const Rating = (p, c) => h('div', { ...p, class: "rating" }, c);
|
|
export const RatingItems = (p) => [...Array(p.count)].map((_, i) => h('input', { class: cls('mask', p.class), name: p.name, type: 'radio', checked: () => val(p.value) === i, onchange: () => isFunc(p.value) ? p.value(i) : p.onchange?.(i) }))
|
|
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
|
|
const opts = () => {
|
|
const raw = val(items) || []
|
|
const ph = placeholder ? [{ disabled: placeholderDisabled, label: placeholder, value: '' }] : []
|
|
return [...ph, ...raw]
|
|
}
|
|
return h('label', { class: float ? 'floating-label' : '' }, [
|
|
float ? h('span', {}, label) : null,
|
|
h('label', { class: cls('select', rest.class) }, [
|
|
(!float && label) ? h('span', { class: 'label' }, label) : null,
|
|
left ?? null,
|
|
h('select', {
|
|
value: () => val(value),
|
|
onchange: (e) => isFunc(value) ? value(e.target.value) : rest.onchange?.(e)
|
|
},
|
|
each(opts, (item) => {
|
|
const val = getBy(item, item.value !== undefined ? 'value' : undefined)
|
|
const lab = getBy(item, 'label')
|
|
return h('option', { value: val, disabled: item.disabled || undefined }, lab)
|
|
})
|
|
),
|
|
right ?? null
|
|
]),
|
|
hint ? h('div', { class: 'validator-hint' }, hint) : null
|
|
])
|
|
}
|
|
export const Skeleton = (p) => h("div", { ...p, class: cls("skeleton", p.class) });
|
|
export const SkeletonText = (p) => h("span", { ...p, class: cls("skeleton skeleton-text", p.class) });
|
|
export const Stack = (p, c) => h("div", { ...p, class: cls("stack", p.class) }, c);
|
|
export const Stats = (p, c) => h('div', { ...p, class: cls('stats shadow', p.class) }, c)
|
|
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 Steps = (p, c) => h("ul", { ...p, class: cls("steps", p.class) }, c);
|
|
export const Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
|
|
export const Swap = (p, c) => h('label', { ...p, class: cls('swap', p.class) }, c)
|
|
export const SwapToggle = (p) => h('input', { type: 'checkbox', checked: () => val(p.value), onchange: (e) => isFunc(p.value) && p.value(e.target.checked), class: p.class })
|
|
export const SwapOn = (p, c) => h('div', { ...p, class: cls('swap-on', p.class) }, c)
|
|
export const SwapOff = (p, c) => h('div', { ...p, class: cls('swap-off', p.class) }, c)
|
|
export const Table = (p, c) => h('table', { ...p, class: cls('table', p.class) }, c)
|
|
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', {}, () => {
|
|
const list = val(items) || []
|
|
return list.map((it, idx) => h('tr', {}, columns.map(c => { const v = c.render ? c.render(it, idx) : it[c.key]; return h('td', { class: c.class }, v) })))
|
|
})
|
|
return [head, body].filter(Boolean)
|
|
}
|
|
export const Tabs = (p, c) => {
|
|
if (!p.items) {
|
|
const { class: className, ...rest } = p
|
|
return h('div', { ...rest, class: cls('tabs', className) }, c)
|
|
}
|
|
const { items, activeIndex, onClose, class: className, ...rest } = p
|
|
const get = x => (isFunc(x) ? x() : x)
|
|
const closeH = onClose || (isFunc(items) ? (idx, item) => {
|
|
const arr = val(items)
|
|
const newArr = arr.filter((_, i) => i !== idx)
|
|
items(newArr)
|
|
if (activeIndex() >= newArr.length) activeIndex(Math.max(0, newArr.length - 1))
|
|
} : null)
|
|
return h('div', { ...rest, class: cls('tabs', className) }, () => {
|
|
const list = val(items) || []
|
|
return list.flatMap((it, idx) => {
|
|
const isActive = () => activeIndex() === idx
|
|
const button = h('button', {
|
|
class: () => `tab ${isActive() ? 'tab-active' : ''} ${it.class || ''}`,
|
|
onclick: (e) => { e.preventDefault(); activeIndex(idx); it.onclick?.(e) }
|
|
}, [
|
|
getBy(it),
|
|
it.closable ? h('span', {
|
|
class: 'ml-1 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-base-300 text-base-content/60 hover:text-base-content cursor-pointer',
|
|
onclick: (e) => { e.stopPropagation(); closeH?.(idx, it) }
|
|
}, h('span', { class: 'icon-[lucide--x] w-3 h-3' })) : null
|
|
])
|
|
const contentDiv = h('div', {
|
|
class: 'tab-content bg-base-100 border-base-300 p-6',
|
|
style: () => `display: ${isActive() ? 'block' : 'none'};`
|
|
}, isFunc(it.content) ? it.content() : it.content)
|
|
return [button, contentDiv]
|
|
})
|
|
})
|
|
}
|
|
export const Textarea = (p) => h("textarea", { ...p, class: cls("textarea", p.class) });
|
|
export const Textrotate = (p, c) => h('span', { ...p, class: cls('text-rotate', p.class) }, h('span', {}, c))
|
|
export const Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class) }, c);
|
|
export const Toast = (message, type = "alert-success", duration = 3500) => {
|
|
let container = document.getElementById("sigpro-toast-container");
|
|
if (!container) {
|
|
container = h("div", { id: "sigpro-toast-container", class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col items-end gap-2 pointer-events-none" });
|
|
document.body.appendChild(container);
|
|
}
|
|
const host = h("div", { style: "display: contents" });
|
|
container.appendChild(host);
|
|
let closeFn, timer, enterTimer;
|
|
const ToastComponent = () => {
|
|
const visible = $(false);
|
|
const leaving = $(false);
|
|
closeFn = () => {
|
|
if (leaving()) return;
|
|
clearTimeout(timer);
|
|
clearTimeout(enterTimer);
|
|
leaving(true);
|
|
setTimeout(() => { instance.destroy(); host.remove(); if (!container.hasChildNodes()) container.remove(); }, 300);
|
|
};
|
|
enterTimer = setTimeout(() => visible(true), 0);
|
|
const content = typeof message === 'function' ? val(message) : message;
|
|
const msgNode = typeof content === 'string' ? h("span", {}, content) : content;
|
|
return h("div", {
|
|
class: () => {
|
|
const base = `alert alert-soft ${type} shadow-lg transition-all duration-300 inline-flex w-auto whitespace-nowrap pointer-events-auto`;
|
|
if (leaving()) return `${base} translate-x-full opacity-0`;
|
|
if (visible()) return `${base} translate-x-0 opacity-100`;
|
|
return `${base} translate-x-10 opacity-0`;
|
|
}
|
|
}, [
|
|
msgNode,
|
|
h("button", {
|
|
class: "btn btn-xs btn-circle btn-ghost",
|
|
onclick: closeFn
|
|
}, h("span", { class: "icon-[lucide--x]" }))
|
|
]);
|
|
};
|
|
const instance = mount(ToastComponent, host);
|
|
if (duration > 0) timer = setTimeout(closeFn, duration);
|
|
return closeFn;
|
|
};
|
|
export const Toggle = (p) => h("input", { ...p, type: "checkbox", class: cls("toggle", p.class) });
|
|
export const Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c);
|
|
export const Editor = (p) => {
|
|
const { value, class: extraClass } = p
|
|
let editorRef = null
|
|
let savedRange = null
|
|
|
|
const isSource = $(false)
|
|
const source = $("")
|
|
const count = $(0)
|
|
const refreshTick = $(0)
|
|
const showEmojis = $(false)
|
|
|
|
const emojis = ["😀", "😊", "😉", "🧐", "😮", "🤔", "😅", "😂", "😍", "😘", "🥰", "👍", "👎", "👌", "🤝", "🤞", "👋", "👏", "🙌", "🙏", "💪", "☝️", "👇", "👈", "👉", "🖕", "✅", "⚠️", "🚀", "📢", "✉️", "❤️"]
|
|
|
|
const saveSelection = () => {
|
|
const sel = window.getSelection()
|
|
if (sel.getRangeAt && sel.rangeCount) savedRange = sel.getRangeAt(0)
|
|
}
|
|
|
|
const restoreSelection = () => {
|
|
if (savedRange) {
|
|
const sel = window.getSelection()
|
|
sel.removeAllRanges()
|
|
sel.addRange(savedRange)
|
|
}
|
|
}
|
|
|
|
const triggerRefresh = () => {
|
|
refreshTick(refreshTick() + 1)
|
|
if (editorRef) count(editorRef.innerText.length)
|
|
}
|
|
|
|
const notify = () => {
|
|
if (!editorRef) return
|
|
const html = editorRef.innerHTML
|
|
if (isFunc(value)) value(html)
|
|
else p.onchange?.(html)
|
|
triggerRefresh()
|
|
}
|
|
|
|
const exec = (cmd, val = null) => {
|
|
if (!editorRef) return
|
|
editorRef.focus()
|
|
if (savedRange) restoreSelection()
|
|
document.execCommand(cmd, false, val)
|
|
savedRange = null
|
|
notify()
|
|
}
|
|
|
|
const openLightbox = (src) => {
|
|
const overlay = document.createElement('div')
|
|
overlay.style = `position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;display:flex;align-items:center;justify-content:center;cursor:zoom-out;`
|
|
const img = document.createElement('img')
|
|
img.src = src
|
|
img.style = `max-width:95%;max-height:95%;box-shadow:0 0 30px rgba(0,0,0,0.5);border-radius:4px;`
|
|
overlay.onclick = () => document.body.removeChild(overlay)
|
|
overlay.appendChild(img)
|
|
document.body.appendChild(overlay)
|
|
}
|
|
|
|
const handleUpload = (file) => {
|
|
if (!file) return
|
|
const reader = new FileReader()
|
|
reader.onload = (re) => {
|
|
if (file.type.startsWith('image/')) {
|
|
const imgHtml = `<div style="display:inline-block; resize:both; overflow:hidden; vertical-align:bottom; line-height:0; width:200px; height:auto; border:1px dashed #ccc; padding:2px; cursor:pointer;" class="resizable-img-container"><img src="${re.target.result}" style="width:100%; height:100%; object-fit:contain; pointer-events:none;"></div> `
|
|
exec("insertHTML", imgHtml)
|
|
} else {
|
|
const linkHtml = `<a href="${re.target.result}" download="${file.name}" contenteditable="false" style="display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; background:#f9f9f9; text-decoration:none; color:#333; font-size:12px; margin:2px; cursor:pointer;"><span class="icon-[lucide--paperclip] w-3 h-3"></span>${file.name}</a> `
|
|
exec("insertHTML", linkHtml)
|
|
}
|
|
}
|
|
reader.readAsDataURL(file)
|
|
}
|
|
|
|
const queryState = (cmd, val = null) => {
|
|
refreshTick(); if (!editorRef || isSource()) return false
|
|
try {
|
|
if (cmd === 'formatBlock') {
|
|
let node = window.getSelection().getRangeAt(0).commonAncestorContainer
|
|
while (node && node !== editorRef) {
|
|
if (node.nodeType === 1 && node.tagName === val) return true
|
|
node = node.parentNode
|
|
}
|
|
return false
|
|
}
|
|
return document.queryCommandState(cmd)
|
|
} catch (e) { return false }
|
|
}
|
|
|
|
const toolbar = h("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
|
|
h("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
|
|
|
|
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('bold') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("bold") }, h("span", { class: "icon-[lucide--bold]" })),
|
|
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('italic') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("italic") }, h("span", { class: "icon-[lucide--italic]" })),
|
|
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('underline') ? 'btn-active bg-primary/20' : ''}`, onclick: () => exec("underline") }, h("span", { class: "icon-[lucide--underline]" })),
|
|
h("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
|
|
|
|
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
|
|
|
h("button", {
|
|
type: "button",
|
|
class: "btn btn-ghost btn-xs",
|
|
onclick: () => exec("justifyLeft")
|
|
}, h("span", { class: "icon-[lucide--align-left]" })),
|
|
|
|
h("button", {
|
|
type: "button",
|
|
class: "btn btn-ghost btn-xs",
|
|
onclick: () => exec("justifyCenter")
|
|
}, h("span", { class: "icon-[lucide--align-center]" })),
|
|
|
|
h("button", {
|
|
type: "button",
|
|
class: "btn btn-ghost btn-xs",
|
|
onclick: () => exec("justifyRight")
|
|
}, h("span", { class: "icon-[lucide--align-right]" })),
|
|
|
|
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
|
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h("span", { class: "icon-[lucide--list]" })),
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h("span", { class: "icon-[lucide--list-ordered]" })),
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h("span", { class: "icon-[lucide--indent-decrease]" })),
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent") }, h("span", { class: "icon-[lucide--indent-increase]" })),
|
|
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState('formatBlock', 'BLOCKQUOTE') ? 'btn-active' : ''}`, onclick: () => exec("formatBlock", queryState('formatBlock', 'BLOCKQUOTE') ? 'P' : 'BLOCKQUOTE') }, h("span", { class: "icon-[lucide--quote]" })),
|
|
|
|
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
|
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const url = window.prompt('URL:'); if (url) exec("createLink", url) } }, h("span", { class: "icon-[lucide--link]" })),
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => { const input = document.createElement('input'); input.type = 'file'; input.onchange = (e) => handleUpload(e.target.files[0]); input.click(); } }, h("span", { class: "icon-[lucide--paperclip]" })),
|
|
|
|
h("div", { class: "relative" }, [
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => { e.stopPropagation(); saveSelection(); showEmojis(!showEmojis()); } }, h("span", { class: "icon-[lucide--smile]" })),
|
|
h("div", { class: "absolute top-full left-0 mt-1 p-2 bg-base-100 border border-base-300 shadow-xl rounded-box w-52 z-50 flex flex-wrap gap-1", style: () => showEmojis() ? "display:flex" : "display:none" }, emojis.map(emo => h("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => { e.stopPropagation(); exec("insertText", emo); showEmojis(false); } }, emo)))
|
|
]),
|
|
|
|
h("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
|
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h("span", { class: "icon-[lucide--undo-2]" })),
|
|
h("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h("span", { class: "icon-[lucide--redo-2]" })),
|
|
]),
|
|
|
|
h("button", { type: "button", class: () => `btn btn-ghost btn-xs ${isSource() ? 'btn-active' : ''}`, onclick: () => { if (!isSource()) source(editorRef?.innerHTML || ""); else if (editorRef) { editorRef.innerHTML = source(); notify(); }; isSource(!isSource()) } }, h("span", { class: "icon-[lucide--code-2]" }))
|
|
])
|
|
|
|
if (typeof document !== 'undefined' && !document.getElementById('editor-styles')) {
|
|
const style = document.createElement('style')
|
|
style.id = 'editor-styles'
|
|
style.textContent = `
|
|
[contenteditable="true"] div,
|
|
[contenteditable="true"] p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|
|
}
|
|
return h("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
|
|
toolbar,
|
|
h("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
|
|
h("div", {
|
|
ref: el => {
|
|
if (!editorRef && el) {
|
|
editorRef = el; el.innerHTML = val(value) || "";
|
|
document.execCommand("defaultParagraphSeparator", false, "br");
|
|
el.addEventListener('click', (e) => {
|
|
const container = e.target.closest('.resizable-img-container');
|
|
if (container) { const img = container.querySelector('img'); if (img) openLightbox(img.src); }
|
|
});
|
|
}
|
|
},
|
|
style: () => `min-height:22rem;${isSource() ? 'display:none' : ''}`,
|
|
class: "p-4 outline-none text-base-content leading-relaxed [&>div]:m-0 [&>p]:m-0 [&>div]:min-h-[1em] [&_.resizable-img-container]:hover:border-primary [&_blockquote]:border-l-4 [&_blockquote]:border-base-300 [&_blockquote]:pl-4 [&_blockquote]:italic [&_ul]:list-disc [&_ul]:pl-8 [&_ol]:list-decimal [&_ol]:pl-8",
|
|
contenteditable: "true",
|
|
oninput: notify,
|
|
onkeydown: (e) => { if (e.key === 'Tab') { e.preventDefault(); exec("indent"); } },
|
|
onkeyup: () => { triggerRefresh(); saveSelection(); },
|
|
onclick: (e) => { triggerRefresh(); saveSelection(); e.stopPropagation(); },
|
|
onmouseup: () => { notify(); saveSelection(); },
|
|
onpaste: (e) => {
|
|
e.preventDefault();
|
|
const text = e.clipboardData.getData('text/plain');
|
|
exec('insertText', text);
|
|
},
|
|
ondragover: (e) => e.preventDefault(),
|
|
ondrop: (e) => { e.preventDefault(); handleUpload(e.dataTransfer.files[0]) }
|
|
}),
|
|
h("textarea", {
|
|
class: "w-full flex-1 min-h-[22rem] p-4 outline-none font-mono text-sm bg-base-200 border-0",
|
|
style: () => isSource() ? '' : 'display:none',
|
|
value: source,
|
|
oninput: (e) => { source(e.target.value); if (editorRef) editorRef.innerHTML = e.target.value; p.onchange?.(e.target.value); }
|
|
})
|
|
]),
|
|
h("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
|
|
h("span", () => `${count()}`)
|
|
])
|
|
])
|
|
} |