natxocc
2cfa7db221
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
1016 lines
42 KiB
JavaScript
1016 lines
42 KiB
JavaScript
var __defProp = Object.defineProperty;
|
|
var __returnValue = (v) => v;
|
|
function __exportSetter(name, newValue) {
|
|
this[name] = __returnValue.bind(null, newValue);
|
|
}
|
|
var __export = (target, all) => {
|
|
for (var name in all)
|
|
__defProp(target, name, {
|
|
get: all[name],
|
|
enumerable: true,
|
|
configurable: true,
|
|
set: __exportSetter.bind(all, name)
|
|
});
|
|
};
|
|
|
|
// sigpro-ui.js
|
|
var exports_sigpro_ui = {};
|
|
__export(exports_sigpro_ui, {
|
|
Tooltip: () => Tooltip,
|
|
Toggle: () => Toggle,
|
|
Toast: () => Toast,
|
|
Timeline: () => Timeline,
|
|
Textrotate: () => Textrotate,
|
|
Textarea: () => Textarea,
|
|
Tabs: () => Tabs,
|
|
TableItems: () => TableItems,
|
|
Table: () => Table,
|
|
SwapToggle: () => SwapToggle,
|
|
SwapOn: () => SwapOn,
|
|
SwapOff: () => SwapOff,
|
|
Swap: () => Swap,
|
|
Steps: () => Steps,
|
|
Step: () => Step,
|
|
Stats: () => Stats,
|
|
Stat: () => Stat,
|
|
Stack: () => Stack,
|
|
SkeletonText: () => SkeletonText,
|
|
Skeleton: () => Skeleton,
|
|
Select: () => Select,
|
|
RatingItems: () => RatingItems,
|
|
Rating: () => Rating,
|
|
Range: () => Range,
|
|
Radio: () => Radio,
|
|
Radial: () => Radial,
|
|
Progress: () => Progress,
|
|
Navbar: () => Navbar,
|
|
Modal: () => Modal,
|
|
Menu: () => Menu,
|
|
Loading: () => Loading,
|
|
ListRows: () => ListRows,
|
|
List: () => List,
|
|
Kbd: () => Kbd,
|
|
Input: () => Input,
|
|
Indicator: () => Indicator,
|
|
Icon: () => Icon,
|
|
Fileinput: () => Fileinput,
|
|
Fieldset: () => Fieldset,
|
|
Fab: () => Fab,
|
|
DropdownContent: () => DropdownContent,
|
|
DropdownButton: () => DropdownButton,
|
|
Dropdown: () => Dropdown,
|
|
DrawerToggle: () => DrawerToggle,
|
|
DrawerSide: () => DrawerSide,
|
|
DrawerOverlay: () => DrawerOverlay,
|
|
DrawerContent: () => DrawerContent,
|
|
Drawer: () => Drawer,
|
|
Divider: () => Divider,
|
|
Datepicker: () => Datepicker,
|
|
Colorpicker: () => Colorpicker,
|
|
ColorPalette: () => ColorPalette,
|
|
Checkbox: () => Checkbox,
|
|
ChatImage: () => ChatImage,
|
|
ChatHeader: () => ChatHeader,
|
|
ChatFooter: () => ChatFooter,
|
|
ChatBubble: () => ChatBubble,
|
|
Chat: () => Chat,
|
|
CarouselItem: () => CarouselItem,
|
|
Carousel: () => Carousel,
|
|
CardTitle: () => CardTitle,
|
|
CardBody: () => CardBody,
|
|
CardActions: () => CardActions,
|
|
Card: () => Card,
|
|
Calendar: () => Calendar,
|
|
Button: () => Button,
|
|
Badge: () => Badge,
|
|
Autocomplete: () => Autocomplete,
|
|
Alert: () => Alert,
|
|
Accordion: () => Accordion
|
|
});
|
|
import { h, each, watch, when, mount, $ } from "sigpro";
|
|
|
|
// sigpro-helpers.js
|
|
var get = (val) => typeof val === "function" ? val() : val;
|
|
var getBy = (item, field = "label") => item && typeof item === "object" ? item[field] : item;
|
|
var cls = (...classes) => classes.filter(Boolean).join(" ").trim();
|
|
var isFn = (f) => typeof f === "function";
|
|
var filterBy = (items, query, field = "label", q = String(query).toLowerCase()) => !query ? get(items) : get(items).filter((item) => String(item && typeof item === "object" ? item[field] : item).toLowerCase().includes(q));
|
|
var rand = (r) => `${r}-${Math.random().toString(36).slice(2, 9)}`;
|
|
var close = () => document.activeElement?.blur();
|
|
|
|
// sigpro-ui.js
|
|
var 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
|
|
]);
|
|
});
|
|
};
|
|
var Alert = (p, c) => h("div", { ...p, class: cls("alert", p.class) }, c);
|
|
var 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);
|
|
close();
|
|
};
|
|
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
|
|
]))
|
|
]);
|
|
};
|
|
var Badge = (p, c) => h("span", { ...p, class: cls("badge", p.class) }, c);
|
|
var Button = (p, c) => h("button", { ...p, class: cls("btn", p.class) }, c);
|
|
var 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(), h2 = 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 && h2)
|
|
inRange = ds > start && ds <= h2 || ds < start && ds >= h2;
|
|
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: (h2) => startHour(h2) }), HourSlider({ value: endHour, onChange: (h2) => endHour(h2) })]) : HourSlider({ value: startHour, onChange: (h2) => startHour(h2) })) : null
|
|
]);
|
|
};
|
|
var Card = (p, c) => h("div", { ...p, class: cls("card", p.class) }, c);
|
|
var CardTitle = (p, c) => h("div", { ...p, class: cls("card-title", p.class) }, c);
|
|
var CardBody = (p, c) => h("div", { ...p, class: cls("card-body", p.class) }, c);
|
|
var CardActions = (p, c) => h("div", { ...p, class: cls("card-actions", p.class) }, c);
|
|
var Carousel = (p, c) => h("div", { ...p, class: cls("carousel", p.class) }, c);
|
|
var CarouselItem = (p, c) => h("div", { ...p, class: cls("carousel-item", p.class) }, c);
|
|
var Chat = (p, c) => h("div", { ...p, class: cls("chat", p.class) }, c);
|
|
var ChatBubble = (p, c) => h("div", { ...p, class: cls("chat-bubble", p.class) }, c);
|
|
var ChatFooter = (p, c) => h("div", { ...p, class: cls("chat-footer", p.class) }, c);
|
|
var ChatHeader = (p, c) => h("div", { ...p, class: cls("chat-header", p.class) }, c);
|
|
var 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));
|
|
var Checkbox = (p) => h("input", { ...p, type: "checkbox", class: cls("checkbox", p.class) });
|
|
var 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-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p.value, onchange: (c) => {
|
|
isFn(p.value) ? p.value(c) : p.onchange?.(c);
|
|
} }))
|
|
]);
|
|
};
|
|
var 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);
|
|
return 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);
|
|
close();
|
|
}
|
|
})));
|
|
};
|
|
var 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)
|
|
close();
|
|
};
|
|
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("");
|
|
}
|
|
}, h("span", { class: "icon-[lucide--x] opacity-50" })) : null
|
|
]),
|
|
DropdownContent({ class: "p-0 bg-base-100 rounded-box shadow-xl" }, Calendar({
|
|
value: p.value,
|
|
range: rangeMode(),
|
|
hour: p.hour,
|
|
onChange: handleChange
|
|
}))
|
|
]);
|
|
};
|
|
var Drawer = (p, c) => div({ ...p, class: cls("drawer", p.class) }, c);
|
|
var DrawerToggle = (p) => input({ ...p, type: "checkbox", class: "drawer-toggle", checked: () => get(p.checked), onchange: (e) => isFn(p.checked) && p.checked(e.target.checked) });
|
|
var DrawerContent = (p, c) => div({ ...p, class: cls("drawer-content", p.class) }, c);
|
|
var DrawerSide = (p, c) => div({ ...p, class: cls("drawer-side", p.class) }, c);
|
|
var DrawerOverlay = (p) => label({ ...p, for: p.for, class: cls("drawer-overlay", p.class) });
|
|
var Divider = (p) => h("div", { ...p, class: cls("divider", p.class) });
|
|
var Dropdown = (p, c) => h("div", { ...p, class: cls("dropdown", p.class) }, c);
|
|
var DropdownButton = (p, c) => h("div", { ...p, tabindex: "0", role: "button", class: cls("btn", p.class) }, c);
|
|
var DropdownContent = (p, c) => h("div", { ...p, tabindex: "0", class: cls("dropdown-content", p.class) }, c);
|
|
var Fab = (p, c) => h("div", { class: "fab" }, [h("div", { tabindex: "0", role: "button", class: cls("btn", p.class) }, Icon(p.icon)), c]);
|
|
var Fieldset = (p, c) => h("fieldset", { class: cls("fieldset", p.class) }, [h("legend", { class: "fieldset-legend" }, p.label), c]);
|
|
var 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" }, "Arrastra o selecciona archivos..."),
|
|
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" }, "\uD83D\uDCC4"),
|
|
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]" }))
|
|
]))))
|
|
]);
|
|
};
|
|
var Icon = (p) => h("span", { class: p.startsWith("icon-") ? p : "" }, p.startsWith("icon-") ? null : p);
|
|
var 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]);
|
|
var Input = (p) => {
|
|
const { label: label2, 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", {}, label2) : null,
|
|
h("label", { pattern, class: () => cls("input validator", p.class) }, [
|
|
label2 && !float ? h("span", { class: "label" }, label2) : null,
|
|
left ?? null,
|
|
h("input", { ...rest, type: inputType, class: "grow", pattern, placeholder: placeholder || label2 || " ", 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
|
|
]);
|
|
};
|
|
var Kbd = (p, c) => h("kbd", { ...p, class: cls("kbd", p.class) }, c);
|
|
var List = (p, c) => h("ul", { ...p, class: cls("list", p.class) }, c);
|
|
var 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));
|
|
var Loading = (p, c) => h("span", { ...p, class: cls("loading loading-spinner", p.class) }, c);
|
|
var 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));
|
|
};
|
|
var Modal = (p) => {
|
|
let dialogRef = null;
|
|
watch(() => {
|
|
const isOpen = get(p.open);
|
|
if (!dialogRef)
|
|
return;
|
|
isOpen ? dialogRef.showModal() : dialogRef.close();
|
|
});
|
|
const close2 = () => isFn(p.open) && p.open(false);
|
|
return h("dialog", {
|
|
...p,
|
|
ref: (el) => dialogRef = el,
|
|
class: cls("modal", p.class),
|
|
onclose: close2,
|
|
oncancel: close2
|
|
}, [
|
|
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: close2 }, "Cerrar")
|
|
])
|
|
]),
|
|
h("form", { method: "dialog", class: "modal-backdrop" }, [
|
|
h("button", {}, "close")
|
|
])
|
|
]);
|
|
};
|
|
var Navbar = (p, c) => h("div", { ...p, class: cls("navbar", p.class) }, c);
|
|
var Progress = (p) => h("progress", { ...p, class: cls("progress", p.class) });
|
|
var Radial = (p, c) => h("div", { ...p, class: cls("radial-progress", p.class), style: `--value:${p.value ?? 0};${p.style ?? ""}`, role: "progressbar", "aria-valuenow": p.value ?? 0 }, c ?? `${p.value ?? 0}%`);
|
|
var Radio = (p) => h("input", { ...p, type: "radio", class: cls("radio", p.class) });
|
|
var Range = (p) => h("input", { ...p, type: "range", class: cls("range", p.class) });
|
|
var Rating = (p, c) => h("div", { ...p, class: "rating" }, c);
|
|
var 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) }));
|
|
var Select = (p, c) => {
|
|
if (c !== undefined)
|
|
return h("select", { class: cls("select", p.class), ...p }, c);
|
|
const { label: label2, 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", {}, label2) : null,
|
|
h("label", { class: cls("select", rest.class) }, [
|
|
!float && label2 ? h("span", { class: "label" }, label2) : 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
|
|
]);
|
|
};
|
|
var Skeleton = (p) => h("div", { ...p, class: cls("skeleton", p.class) });
|
|
var SkeletonText = (p) => h("span", { ...p, class: cls("skeleton skeleton-text", p.class) });
|
|
var Stack = (p, c) => h("div", { ...p, class: cls("stack", p.class) }, c);
|
|
var Stats = (p, c) => h("div", { ...p, class: cls("stats shadow", p.class) }, c);
|
|
var 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
|
|
]);
|
|
var Steps = (p, c) => h("ul", { ...p, class: cls("steps", p.class) }, c);
|
|
var Step = (p, c) => h("li", { ...p, class: cls("step", p.class), "data-content": p.dataContent }, c);
|
|
var Swap = (p, c) => h("label", { ...p, class: cls("swap", p.class) }, c);
|
|
var SwapToggle = (p) => h("input", { type: "checkbox", checked: () => get(p.value), onchange: (e) => isFn(p.value) && p.value(e.target.checked), class: p.class });
|
|
var SwapOn = (p, c) => h("div", { ...p, class: cls("swap-on", p.class) }, c);
|
|
var SwapOff = (p, c) => h("div", { ...p, class: cls("swap-off", p.class) }, c);
|
|
var Table = (p, c) => h("table", { ...p, class: cls("table", p.class) }, c);
|
|
var 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);
|
|
};
|
|
var Tabs = (p, c) => {
|
|
if (!p.items) {
|
|
const { class: className2, ...rest2 } = p;
|
|
return h("div", { ...rest2, class: cls("tabs", className2) }, c);
|
|
}
|
|
const { items, activeIndex, onClose, class: className, ...rest } = p;
|
|
const get2 = (x) => isFn(x) ? x() : x;
|
|
const closeH = onClose || (isFn(items) ? (idx, item) => {
|
|
const arr = get2(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 = get2(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];
|
|
});
|
|
});
|
|
};
|
|
var Textarea = (p) => h("textarea", { ...p, class: cls("textarea", p.class) });
|
|
var Textrotate = (p, c) => h("span", { ...p, class: cls("text-rotate", p.class) }, c);
|
|
var Timeline = (p, c) => h("ul", { ...p, class: cls("timeline", p.class) }, c);
|
|
var 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;
|
|
};
|
|
var Toggle = (p) => h("input", { ...p, type: "checkbox", class: cls("toggle", p.class) });
|
|
var Tooltip = (p, c) => h("div", { ...p, class: cls("tooltip", p.class), "data-tip": p.tip }, c);
|
|
|
|
// sigpro-editor.js
|
|
var exports_sigpro_editor = {};
|
|
__export(exports_sigpro_editor, {
|
|
Editor: () => Editor
|
|
});
|
|
import { h as h2, $ as $2 } from "sigpro";
|
|
var Editor = (p) => {
|
|
const { value, class: extraClass } = p;
|
|
let editorRef = null;
|
|
let savedRange = null;
|
|
const isSource = $2(false);
|
|
const source = $2("");
|
|
const count = $2(0);
|
|
const refreshTick = $2(0);
|
|
const showEmojis = $2(false);
|
|
const emojis = ["\uD83D\uDE00", "\uD83D\uDE0A", "\uD83D\uDE09", "\uD83E\uDDD0", "\uD83D\uDE2E", "\uD83E\uDD14", "\uD83D\uDE05", "\uD83D\uDE02", "\uD83D\uDE0D", "\uD83D\uDE18", "\uD83E\uDD70", "\uD83D\uDC4D", "\uD83D\uDC4E", "\uD83D\uDC4C", "\uD83E\uDD1D", "\uD83E\uDD1E", "\uD83D\uDC4B", "\uD83D\uDC4F", "\uD83D\uDE4C", "\uD83D\uDE4F", "\uD83D\uDCAA", "☝️", "\uD83D\uDC47", "\uD83D\uDC48", "\uD83D\uDC49", "\uD83D\uDD95", "✅", "⚠️", "\uD83D\uDE80", "\uD83D\uDCE2", "✉️", "❤️"];
|
|
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 (isFn(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 = h2("div", { class: "flex flex-wrap items-center gap-1 p-2 border-b border-base-300 bg-base-200 sticky top-0 z-20" }, [
|
|
h2("div", { class: "flex flex-wrap gap-1 flex-1 items-center" }, [
|
|
h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("bold") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("bold") }, h2("span", { class: "icon-[lucide--bold]" })),
|
|
h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("italic") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("italic") }, h2("span", { class: "icon-[lucide--italic]" })),
|
|
h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("underline") ? "btn-active bg-primary/20" : ""}`, onclick: () => exec("underline") }, h2("span", { class: "icon-[lucide--underline]" })),
|
|
h2("input", { type: "color", class: "w-5 h-5 p-0 border-0 bg-transparent cursor-pointer", oninput: (e) => exec("foreColor", e.target.value) }),
|
|
h2("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
|
h2("button", {
|
|
type: "button",
|
|
class: "btn btn-ghost btn-xs",
|
|
onclick: () => exec("justifyLeft")
|
|
}, h2("span", { class: "icon-[lucide--align-left]" })),
|
|
h2("button", {
|
|
type: "button",
|
|
class: "btn btn-ghost btn-xs",
|
|
onclick: () => exec("justifyCenter")
|
|
}, h2("span", { class: "icon-[lucide--align-center]" })),
|
|
h2("button", {
|
|
type: "button",
|
|
class: "btn btn-ghost btn-xs",
|
|
onclick: () => exec("justifyRight")
|
|
}, h2("span", { class: "icon-[lucide--align-right]" })),
|
|
h2("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertUnorderedList") }, h2("span", { class: "icon-[lucide--list]" })),
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("insertOrderedList") }, h2("span", { class: "icon-[lucide--list-ordered]" })),
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("outdent") }, h2("span", { class: "icon-[lucide--indent-decrease]" })),
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("indent") }, h2("span", { class: "icon-[lucide--indent-increase]" })),
|
|
h2("button", { type: "button", class: () => `btn btn-ghost btn-xs ${queryState("formatBlock", "BLOCKQUOTE") ? "btn-active" : ""}`, onclick: () => exec("formatBlock", queryState("formatBlock", "BLOCKQUOTE") ? "P" : "BLOCKQUOTE") }, h2("span", { class: "icon-[lucide--quote]" })),
|
|
h2("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
|
|
const url = window.prompt("URL:");
|
|
if (url)
|
|
exec("createLink", url);
|
|
} }, h2("span", { class: "icon-[lucide--link]" })),
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => {
|
|
const input2 = document.createElement("input");
|
|
input2.type = "file";
|
|
input2.onchange = (e) => handleUpload(e.target.files[0]);
|
|
input2.click();
|
|
} }, h2("span", { class: "icon-[lucide--paperclip]" })),
|
|
h2("div", { class: "relative" }, [
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: (e) => {
|
|
e.stopPropagation();
|
|
saveSelection();
|
|
showEmojis(!showEmojis());
|
|
} }, h2("span", { class: "icon-[lucide--smile]" })),
|
|
h2("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) => h2("span", { class: "cursor-pointer hover:bg-base-200 p-1 rounded text-lg", onclick: (e) => {
|
|
e.stopPropagation();
|
|
exec("insertText", emo);
|
|
showEmojis(false);
|
|
} }, emo)))
|
|
]),
|
|
h2("span", { class: "w-px h-5 bg-base-300 mx-1" }),
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("undo") }, h2("span", { class: "icon-[lucide--undo-2]" })),
|
|
h2("button", { type: "button", class: "btn btn-ghost btn-xs", onclick: () => exec("redo") }, h2("span", { class: "icon-[lucide--redo-2]" }))
|
|
]),
|
|
h2("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());
|
|
} }, h2("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 h2("div", { class: cls("border border-base-300 rounded-box bg-base-100 overflow-hidden shadow-sm flex flex-col", extraClass) }, [
|
|
toolbar,
|
|
h2("div", { class: "relative flex-1 flex flex-col", onclick: () => showEmojis(false) }, [
|
|
h2("div", {
|
|
ref: (el) => {
|
|
if (!editorRef && el) {
|
|
editorRef = el;
|
|
el.innerHTML = get(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]);
|
|
}
|
|
}),
|
|
h2("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);
|
|
}
|
|
})
|
|
]),
|
|
h2("div", { class: "px-3 py-1 border-t border-base-300 bg-base-100/50 text-[10px] text-right text-base-content/60 italic" }, [
|
|
h2("span", () => `${count()} caracteres`)
|
|
])
|
|
]);
|
|
};
|
|
|
|
// sigpro-locale.js
|
|
import { $ as $3, h as h3 } from "sigpro";
|
|
var i18n = {
|
|
es: {
|
|
close: "Cerrar",
|
|
confirm: "Confirmar",
|
|
cancel: "Cancelar",
|
|
search: "Buscar...",
|
|
loading: "Cargando...",
|
|
nodata: "Sin datos"
|
|
},
|
|
en: {
|
|
close: "Close",
|
|
confirm: "Confirm",
|
|
cancel: "Cancel",
|
|
search: "Search...",
|
|
loading: "Loading...",
|
|
nodata: "No data"
|
|
}
|
|
};
|
|
var currentLocale = $3("es");
|
|
var Locale = (t) => currentLocale(t);
|
|
var tt = (t) => () => i18n[currentLocale()][t] || t;
|
|
|
|
// index.js
|
|
var Components = {
|
|
...exports_sigpro_ui,
|
|
...exports_sigpro_editor
|
|
};
|
|
var Utils = {
|
|
Locale,
|
|
tt
|
|
};
|
|
export {
|
|
Utils,
|
|
Components
|
|
};
|