natxocc
5cfa3a231e
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
577 lines
27 KiB
JavaScript
577 lines
27 KiB
JavaScript
// All base components
|
|
import { h, each, watch, when, mount, $ } from "sigpro";
|
|
import { get, getBy, cls, isFn, filterBy, rand, hide } from "./sigpro-helpers.js"
|
|
|
|
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 = $(get(value) || '')
|
|
const filtered = $(() => filterBy(items, query()))
|
|
|
|
const pick = (item) => {
|
|
const display = getBy(item)
|
|
const actual = typeof item === 'string' ? item : item.value
|
|
query(display)
|
|
if (isFn(value)) value(actual)
|
|
onselect?.(item)
|
|
hide()
|
|
}
|
|
|
|
return Dropdown({ class: 'w-full' }, [
|
|
h('div', { tabindex: '0', role: 'button', class: 'w-full' },
|
|
Input({
|
|
...props,
|
|
placeholder,
|
|
value: query,
|
|
left: h('span', { class: 'icon-[lucide--search]' }),
|
|
oninput: (e) => {
|
|
query(e.target.value)
|
|
if (isFn(value)) value(e.target.value)
|
|
}
|
|
})
|
|
),
|
|
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))
|
|
]),
|
|
(item) => getBy(item)
|
|
),
|
|
() => 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 = () => get(p.range) === true
|
|
const current = () => get(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(get(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 = () => get(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) => { isFn(p.value) ? p.value(c) : p.onchange?.(c) }
|
|
})
|
|
)
|
|
])
|
|
}
|
|
export const ColorPalette = (p) => {
|
|
const current = () => get(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) => {
|
|
isFn(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 = () => get(p.range) === true
|
|
|
|
watch(() => {
|
|
const v = get(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 (isFn(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 (isFn(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: () => get(p.checked), onchange: (e) => isFn(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 (isFn(p.onselect)) p.onselect(updated)
|
|
else if (isFn(p.value)) p.value(updated)
|
|
}
|
|
|
|
const remove = (idx) => {
|
|
const updated = files().filter((_, i) => i !== idx)
|
|
files(updated)
|
|
if (isFn(p.onselect)) p.onselect(updated)
|
|
else if (isFn(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' }, 'Drag and drop...'),
|
|
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
|
|
? (get(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) => () => (get(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(() => get(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(() => get(items) || [], render)
|
|
)
|
|
}
|
|
export const Modal = (p) => {
|
|
let dialogRef = null;
|
|
|
|
watch(() => {
|
|
const isOpen = get(p.open);
|
|
if (!dialogRef) return;
|
|
isOpen ? dialogRef.showModal() : dialogRef.hide();
|
|
});
|
|
|
|
const close = () => isFn(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:${get(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: () => get(p.value) === i, onchange: () => isFn(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 = get(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: () => get(value),
|
|
onchange: (e) => isFn(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: () => get(p.value), onchange: (e) => isFn(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 = get(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 => (isFn(x) ? x() : x)
|
|
const closeH = onClose || (isFn(items) ? (idx, item) => {
|
|
const arr = get(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 = get(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'};`
|
|
}, isFn(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' ? get(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); |