natxocc/sigpro-ui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dropdown ok

Browse Source
This commit is contained in:
natxocc
2026-04-02 21:40:07 +02:00
parent f0c710f8c2
commit b0629ef3d0
6 changed files with 301 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

421
dist/sigpro-ui.js vendored
View File

@@ -266,7 +266,7 @@
runner();
return runner.stop;
};
var $html = (tag, props = {}, content = []) => {
var $html2 = (tag, props = {}, content = []) => {
if (props instanceof Node || Array.isArray(props) || typeof props !== "object") {
content = props;
props = {};
@@ -328,7 +328,7 @@
};
var $if = (condition, thenVal, otherwiseVal = null) => {
const marker = document.createTextNode("");
const container = $html("div", { style: "display:contents" }, [marker]);
const container = $html2("div", { style: "display:contents" }, [marker]);
let current = null, last = null;
$watch(() => {
const state = !!(typeof condition === "function" ? condition() : condition);
@@ -348,7 +348,7 @@
$if.not = (condition, thenVal, otherwiseVal) => $if(() => !(typeof condition === "function" ? condition() : condition), thenVal, otherwiseVal);
var $for = (source, render, keyFn) => {
const marker = document.createTextNode("");
const container = $html("div", { style: "display:contents" }, [marker]);
const container = $html2("div", { style: "display:contents" }, [marker]);
let cache = new Map;
$watch(() => {
const items = (typeof source === "function" ? source() : source) || [];
@@ -385,7 +385,7 @@
var $router = (routes) => {
const sPath = $(window.location.hash.replace(/^#/, "") || "/");
window.addEventListener("hashchange", () => sPath(window.location.hash.replace(/^#/, "") || "/"));
const outlet = $html("div", { class: "router-outlet" });
const outlet = $html2("div", { class: "router-outlet" });
let current = null;
$watch([sPath], async () => {
const path = sPath();
@@ -411,7 +411,7 @@
try {
return typeof comp === "function" ? comp(params) : comp;
} catch (e) {
return $html("div", { class: "p-4 text-error" }, "Error loading view");
return $html2("div", { class: "p-4 text-error" }, "Error loading view");
}
});
outlet.appendChild(current.container);
@@ -434,7 +434,7 @@
MOUNTED_NODES.set(el, instance);
return instance;
};
var SigProCore = { $, $watch, $html, $if, $for, $router, $mount };
var SigProCore = { $, $watch, $html: $html2, $if, $for, $router, $mount };
if (typeof window !== "undefined") {
const install = (registry) => {
Object.keys(registry).forEach((key) => {
@@ -444,7 +444,7 @@
tags.forEach((tagName) => {
const helperName = tagName.charAt(0).toUpperCase() + tagName.slice(1);
if (!(helperName in window)) {
window[helperName] = (props, content) => $html(tagName, props, content);
window[helperName] = (props, content) => $html2(tagName, props, content);
}
});
window.SigPro = Object.freeze(registry);
@@ -509,10 +509,10 @@
if (!icon)
return null;
if (typeof icon === "function") {
return $html("span", { class: "mr-1" }, icon());
return $html2("span", { class: "mr-1" }, icon());
}
if (typeof icon === "object") {
return $html("span", { class: "mr-1" }, icon);
return $html2("span", { class: "mr-1" }, icon);
}
if (typeof icon === "string") {
const parts = icon.trim().split(/\s+/);
@@ -520,9 +520,9 @@
const iconClass = hasRight ? parts.slice(0, -1).join(" ") : icon;
const spacing = hasRight ? "ml-1" : "mr-1";
if (iconClass && !iconClass.startsWith("icon-[") && !iconClass.includes("--")) {
return $html("span", { class: spacing }, iconClass);
return $html2("span", { class: spacing }, iconClass);
}
return $html("span", { class: `${iconClass} ${spacing}`.trim() });
return $html2("span", { class: `${iconClass} ${spacing}`.trim() });
}
return null;
};
@@ -530,17 +530,17 @@
// src/components/Accordion.js
var Accordion = (props, children) => {
const { class: className, title, name, open, ...rest } = props;
return $html("div", {
return $html2("div", {
...rest,
class: ui("collapse collapse-arrow bg-base-200 mb-2", className)
}, [
$html("input", {
$html2("input", {
type: name ? "radio" : "checkbox",
name,
checked: val(open)
}),
$html("div", { class: "collapse-title text-xl font-medium" }, title),
$html("div", { class: "collapse-content" }, children)
$html2("div", { class: "collapse-title text-xl font-medium" }, title),
$html2("div", { class: "collapse-content" }, children)
]);
};
@@ -561,16 +561,16 @@
const softClass = soft ? "alert-soft" : "";
const allClasses = [typeClass, softClass, className].filter(Boolean).join(" ");
const content = children || props.message;
return $html("div", {
return $html2("div", {
...rest,
role: "alert",
class: ui("alert", allClasses)
}, () => [
getIcon(iconMap[type]),
$html("div", { class: "flex-1" }, [
$html("span", {}, [typeof content === "function" ? content() : content])
$html2("div", { class: "flex-1" }, [
$html2("span", {}, [typeof content === "function" ? content() : content])
]),
actions ? $html("div", { class: "flex-none" }, [
actions ? $html2("div", { class: "flex-none" }, [
typeof actions === "function" ? actions() : actions
]) : null
].filter(Boolean));
@@ -646,8 +646,8 @@
return "btn-lg";
return "btn-md";
};
return $html("div", { class: "relative w-full" }, () => [
$html("input", {
return $html2("div", { class: "relative w-full" }, () => [
$html2("input", {
...rest,
type: () => isPassword ? visible() ? "text" : "password" : type,
placeholder: placeholder || " ",
@@ -656,10 +656,10 @@
oninput: (e) => oninput?.(e),
disabled: () => val(disabled)
}),
leftIcon ? $html("div", {
leftIcon ? $html2("div", {
class: "absolute left-3 inset-y-0 flex items-center pointer-events-none text-base-content/60"
}, leftIcon) : null,
isPassword ? $html("button", {
isPassword ? $html2("button", {
type: "button",
class: ui("absolute right-3 inset-y-0 flex items-center", "btn btn-ghost btn-circle opacity-50 hover:opacity-100", buttonSize()),
onclick: (e) => {
@@ -707,7 +707,7 @@
isOpen(false);
}
};
return $html("div", { class: "relative w-full" }, [
return $html2("div", { class: "relative w-full" }, [
Input({
label,
class: className,
@@ -726,18 +726,18 @@
},
...rest
}),
$html("ul", {
$html2("ul", {
class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
style: () => isOpen() && list().length ? "display:block" : "display:none"
}, [
$for(list, (opt, i) => $html("li", {}, [
$html("a", {
$for(list, (opt, i) => $html2("li", {}, [
$html2("a", {
class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
onclick: () => pick(opt),
onmouseenter: () => cursor(i)
}, typeof opt === "string" ? opt : opt.label)
]), (opt, i) => (typeof opt === "string" ? opt : opt.value) + i),
() => list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())
() => list().length ? null : $html2("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())
])
]);
};
@@ -749,7 +749,7 @@
});
var Badge = (props, children) => {
const { class: className, ...rest } = props;
return $html("span", {
return $html2("span", {
...rest,
class: ui("badge", className)
}, children);
@@ -763,12 +763,12 @@
var Button = (props, children) => {
const { class: className, loading, icon, ...rest } = props;
const iconEl = getIcon(icon);
return $html("button", {
return $html2("button", {
...rest,
class: ui("btn", className),
disabled: () => val(loading) || val(props.disabled)
}, () => [
val(loading) && $html("span", { class: "loading loading-spinner" }),
val(loading) && $html2("span", { class: "loading loading-spinner" }),
iconEl,
children
].filter(Boolean));
@@ -781,17 +781,17 @@
});
var Checkbox = (props) => {
const { class: className, value, tooltip, toggle, label, ...rest } = props;
const checkEl = $html("input", {
const checkEl = $html2("input", {
...rest,
type: "checkbox",
class: () => ui(val(toggle) ? "toggle" : "checkbox", className),
checked: value
});
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
const layout = $html2("label", { class: "label cursor-pointer justify-start gap-3" }, [
checkEl,
label ? $html("span", { class: "label-text" }, label) : null
label ? $html2("span", { class: "label-text" }, label) : null
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
return tooltip ? $html2("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};
// src/components/Colorpicker.js
@@ -813,8 +813,8 @@
...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"]
];
const getColor = () => val(value) || "#000000";
return $html("div", { class: ui("relative w-fit", className) }, [
$html("button", {
return $html2("div", { class: ui("relative w-fit", className) }, [
$html2("button", {
type: "button",
class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
onclick: (e) => {
@@ -823,17 +823,17 @@
},
...rest
}, [
$html("div", {
$html2("div", {
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
style: () => `background-color: ${getColor()}`
}),
label ? $html("span", { class: "opacity-80" }, label) : null
label ? $html2("span", { class: "opacity-80" }, label) : null
]),
$if(isOpen, () => $html("div", {
$if(isOpen, () => $html2("div", {
class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
onclick: (e) => e.stopPropagation()
}, [
$html("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => $html("button", {
$html2("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => $html2("button", {
type: "button",
style: `background-color: ${c}`,
class: () => {
@@ -848,7 +848,7 @@
}
})))
])),
$if(isOpen, () => $html("div", {
$if(isOpen, () => $html2("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false)
}))
@@ -936,9 +936,9 @@
internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
};
const HourSlider = ({ value: hVal, onChange }) => {
return $html("div", { class: "flex-1" }, [
$html("div", { class: "flex gap-2 items-center" }, [
$html("input", {
return $html2("div", { class: "flex-1" }, [
$html2("div", { class: "flex gap-2 items-center" }, [
$html2("input", {
type: "range",
min: 0,
max: 23,
@@ -949,11 +949,11 @@
onChange(newHour);
}
}),
$html("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(val(hVal)).padStart(2, "0") + ":00")
$html2("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(val(hVal)).padStart(2, "0") + ":00")
])
]);
};
return $html("div", { class: ui("relative w-full", className) }, [
return $html2("div", { class: ui("relative w-full", className) }, [
Input({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
@@ -966,25 +966,25 @@
},
...rest
}),
$if(isOpen, () => $html("div", {
$if(isOpen, () => $html2("div", {
class: "absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",
onclick: (e) => e.stopPropagation()
}, [
$html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
$html("div", { class: "flex gap-0.5" }, [
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
$html2("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
$html2("div", { class: "flex gap-0.5" }, [
$html2("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
$html2("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
]),
$html("span", { class: "font-bold uppercase flex-1 text-center" }, [
$html2("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
]),
$html("div", { class: "flex gap-0.5" }, [
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
$html2("div", { class: "flex gap-0.5" }, [
$html2("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
$html2("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
])
]),
$html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["L", "M", "X", "J", "V", "S", "D"].map((d) => $html("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
$html2("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["L", "M", "X", "J", "V", "S", "D"].map((d) => $html2("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
() => {
const d = internalDate();
const year = d.getFullYear();
@@ -994,11 +994,11 @@
const daysInMonth = new Date(year, month + 1, 0).getDate();
const nodes = [];
for (let i = 0;i < offset; i++)
nodes.push($html("div"));
nodes.push($html2("div"));
for (let i = 1;i <= daysInMonth; i++) {
const date = new Date(year, month, i);
const dStr = formatDate(date);
nodes.push($html("button", {
nodes.push($html2("button", {
type: "button",
class: () => {
const v = val(value);
@@ -1029,8 +1029,8 @@
return nodes;
}
]),
hour ? $html("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
isRangeMode() ? $html("div", { class: "flex gap-4" }, [
hour ? $html2("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
isRangeMode() ? $html2("div", { class: "flex gap-4" }, [
HourSlider({
value: startHour,
onChange: (newHour) => {
@@ -1061,7 +1061,7 @@
})
]) : null
])),
$if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) }))
$if(isOpen, () => $html2("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) }))
]);
};
@@ -1073,11 +1073,11 @@
var Drawer = (props, children) => {
const { class: className, id, open, side, content, ...rest } = props;
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
return $html("div", {
return $html2("div", {
...rest,
class: ui("drawer", className)
}, [
$html("input", {
$html2("input", {
id: drawerId,
type: "checkbox",
class: "drawer-toggle",
@@ -1087,11 +1087,11 @@
open(e.target.checked);
}
}),
$html("div", { class: "drawer-content" }, [
$html2("div", { class: "drawer-content" }, [
typeof content === "function" ? content() : content
]),
$html("div", { class: "drawer-side" }, [
$html("label", {
$html2("div", { class: "drawer-side" }, [
$html2("label", {
for: drawerId,
class: "drawer-overlay",
onclick: () => {
@@ -1099,7 +1099,7 @@
open(false);
}
}),
$html("div", { class: "min-h-full bg-base-200 w-80" }, [
$html2("div", { class: "min-h-full bg-base-200 w-80" }, [
typeof side === "function" ? side() : side
])
])
@@ -1111,51 +1111,64 @@
__export(exports_Dropdown, {
Dropdown: () => Dropdown
});
var Dropdown = (props, children) => {
var currentOpen = null;
if (typeof window !== "undefined" && !window.__dropdownHandlerRegistered) {
window.addEventListener("click", (e) => {
if (currentOpen && !currentOpen.contains(e.target)) {
currentOpen.open = false;
currentOpen = null;
}
});
window.__dropdownHandlerRegistered = true;
}
var Dropdown = (props) => {
const { class: className, label, icon, items, ...rest } = props;
const renderContent = () => {
if (items) {
const source = typeof items === "function" ? items : () => items;
return $html("ul", {
tabindex: 0,
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
}, [
$for(source, (item) => $html("li", {}, [
return $html("details", {
...rest,
class: ui("dropdown", className)
}, [
$html("summary", {
class: "btn m-1 flex items-center gap-2 list-none cursor-pointer",
style: "display: inline-flex;",
onclick: (e) => {
const details = e.currentTarget.closest("details");
if (currentOpen && currentOpen !== details) {
currentOpen.open = false;
}
setTimeout(() => {
currentOpen = details.open ? details : null;
}, 0);
}
}, [
() => icon ? typeof icon === "function" ? icon() : icon : null,
() => label ? typeof label === "function" ? label() : label : null
]),
$html("ul", {
tabindex: "-1",
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
}, [
() => {
const currentItems = typeof items === "function" ? items() : items || [];
return currentItems.map((item) => $html("li", {}, [
$html("a", {
class: item.class || "",
onclick: (e) => {
if (item.onclick)
item.onclick(e);
if (document.activeElement)
document.activeElement.blur();
const details = e.currentTarget.closest("details");
if (details) {
details.open = false;
if (currentOpen === details)
currentOpen = null;
}
}
}, [
item.icon ? $html("span", {}, item.icon) : null,
$html("span", {}, item.label)
])
]))
]);
}
return $html("div", {
tabindex: 0,
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"
}, [
typeof children === "function" ? children() : children
]);
};
return $html("div", {
...rest,
class: ui("dropdown", className)
}, [
$html("div", {
tabindex: 0,
role: "button",
class: "btn m-1 flex items-center gap-2"
}, [
icon ? typeof icon === "function" ? icon() : icon : null,
label ? typeof label === "function" ? label() : label : null
]),
renderContent()
]));
}
])
]);
};
@@ -1166,11 +1179,11 @@
});
var Fab = (props) => {
const { class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
return $html("div", {
return $html2("div", {
...rest,
class: ui(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, className)
}, [
$html("div", {
$html2("div", {
tabindex: 0,
role: "button",
class: "btn btn-lg btn-circle btn-primary shadow-2xl"
@@ -1178,9 +1191,9 @@
icon ? getIcon(icon) : null,
!icon && label ? label : null
]),
...val(actions).map((act) => $html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
$html("button", {
...val(actions).map((act) => $html2("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
act.label ? $html2("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
$html2("button", {
type: "button",
class: `btn btn-circle shadow-lg ${act.class || ""}`,
onclick: (e) => {
@@ -1199,13 +1212,13 @@
});
var Fieldset = (props, children) => {
const { class: className, legend, ...rest } = props;
return $html("fieldset", {
return $html2("fieldset", {
...rest,
class: ui("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", className)
}, [
() => {
const legendText = val(legend);
return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
return legendText ? $html2("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
},
children
]);
@@ -1238,12 +1251,12 @@
selectedFiles(updated);
onSelect?.(updated);
};
return $html("fieldset", { ...rest, class: ui("fieldset w-full p-0", className) }, [
$html("div", {
return $html2("fieldset", { ...rest, class: ui("fieldset w-full p-0", className) }, [
$html2("div", {
class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
"data-tip": tooltip
}, [
$html("label", {
$html2("label", {
class: () => `
relative flex items-center justify-between w-full h-12 px-4
border-2 border-dashed rounded-lg cursor-pointer
@@ -1261,12 +1274,12 @@
handleFiles(e.dataTransfer.files);
}
}, [
$html("div", { class: "flex items-center gap-3 w-full" }, [
$html2("div", { class: "flex items-center gap-3 w-full" }, [
getIcon("icon-[lucide--upload]"),
$html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
$html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
$html2("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
$html2("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
]),
$html("input", {
$html2("input", {
type: "file",
multiple: true,
accept,
@@ -1275,15 +1288,15 @@
})
])
]),
() => error() ? $html("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null,
$if(() => selectedFiles().length > 0, () => $html("ul", { class: "mt-2 space-y-1" }, [
$for(selectedFiles, (file, index) => $html("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
$html("div", { class: "flex items-center gap-2 truncate" }, [
$html("span", { class: "opacity-50" }, "\uD83D\uDCC4"),
$html("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
$html("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
() => error() ? $html2("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null,
$if(() => selectedFiles().length > 0, () => $html2("ul", { class: "mt-2 space-y-1" }, [
$for(selectedFiles, (file, index) => $html2("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
$html2("div", { class: "flex items-center gap-2 truncate" }, [
$html2("span", { class: "opacity-50" }, "\uD83D\uDCC4"),
$html2("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
$html2("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
]),
$html("button", {
$html2("button", {
type: "button",
class: "btn btn-ghost btn-xs btn-circle",
onclick: (e) => {
@@ -1302,9 +1315,9 @@
__export(exports_Indicator, {
Indicator: () => Indicator
});
var Indicator = (props, children) => $html("div", { class: "indicator" }, () => [
var Indicator = (props, children) => $html2("div", { class: "indicator" }, () => [
children,
props.value && $html("span", { class: ui("indicator-item badge", props.class) }, props.value)
props.value && $html2("span", { class: ui("indicator-item badge", props.class) }, props.value)
].filter(Boolean));
// src/components/Label.js
@@ -1315,16 +1328,16 @@
var Label = (props) => {
const { children, value, floating = false, error, required, class: className, ...rest } = props;
if (floating) {
return $html("label", { class: ui("floating-label w-full", className), ...rest }, () => [
value ? $html("span", {}, value) : null,
return $html2("label", { class: ui("floating-label w-full", className), ...rest }, () => [
value ? $html2("span", {}, value) : null,
children,
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null
error ? $html2("span", { class: "text-error text-xs" }, val(error)) : null
]);
}
return $html("label", { class: ui("input w-full", className), ...rest }, () => [
value ? $html("span", { class: "label" }, value) : null,
return $html2("label", { class: ui("input w-full", className), ...rest }, () => [
value ? $html2("span", { class: "label" }, value) : null,
children,
error ? $html("span", { class: "text-error text-xs" }, val(error)) : null
error ? $html2("span", { class: "text-error text-xs" }, val(error)) : null
]);
};
@@ -1335,11 +1348,11 @@
});
var List = (props) => {
const { class: className, items, header, render, keyFn = (item, index) => index, ...rest } = props;
const listItems = $for(items, (item, index) => $html("li", { class: "list-row" }, [render(item, index)]), keyFn);
return $html("ul", {
const listItems = $for(items, (item, index) => $html2("li", { class: "list-row" }, [render(item, index)]), keyFn);
return $html2("ul", {
...rest,
class: ui("list bg-base-100 rounded-box shadow-md", className)
}, header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems);
}, header ? [$if(header, () => $html2("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems);
};
// src/components/Loading.js
@@ -1348,10 +1361,10 @@
Loading: () => Loading
});
var Loading = (props) => {
return $if(props.$show, () => $html("div", {
return $if(props.$show, () => $html2("div", {
class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"
}, [
$html("span", { class: "loading loading-spinner loading-lg text-primary" })
$html2("span", { class: "loading loading-spinner loading-lg text-primary" })
]));
};
@@ -1362,16 +1375,16 @@
});
var Menu = (props) => {
const { class: className, items, ...rest } = props;
const renderItems = (items2) => $for(() => items2 || [], (it) => $html("li", {}, [
it.children ? $html("details", { open: it.open }, [
$html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
$html("ul", {}, renderItems(it.children))
]) : $html("a", { class: () => val(it.active) ? "active" : "", onclick: it.onclick }, [
it.icon && $html("span", { class: "mr-2" }, it.icon),
const renderItems = (items2) => $for(() => items2 || [], (it) => $html2("li", {}, [
it.children ? $html2("details", { open: it.open }, [
$html2("summary", {}, [it.icon && $html2("span", { class: "mr-2" }, it.icon), it.label]),
$html2("ul", {}, renderItems(it.children))
]) : $html2("a", { class: () => val(it.active) ? "active" : "", onclick: it.onclick }, [
it.icon && $html2("span", { class: "mr-2" }, it.icon),
it.label
])
]), (it, i) => it.label || i);
return $html("ul", { ...rest, class: ui("menu bg-base-200 rounded-box", className) }, renderItems(items));
return $html2("ul", { ...rest, class: ui("menu bg-base-200 rounded-box", className) }, renderItems(items));
};
// src/components/Modal.js
@@ -1400,28 +1413,28 @@
if (typeof open === "function")
open(false);
};
return $html("dialog", {
return $html2("dialog", {
...rest,
ref: dialogRef,
class: ui("modal", className),
oncancel: () => typeof open === "function" && open(false)
}, [
$html("div", { class: "modal-box" }, [
title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
$html("div", { class: "py-2" }, [
$html2("div", { class: "modal-box" }, [
title ? $html2("h3", { class: "text-lg font-bold mb-4" }, title) : null,
$html2("div", { class: "py-2" }, [
typeof children === "function" ? children() : children
]),
$html("div", { class: "modal-action flex gap-2" }, [
$html2("div", { class: "modal-action flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "button", onclick: close }, tt("close")())
])
]),
$html("form", {
$html2("form", {
method: "dialog",
class: "modal-backdrop",
onsubmit: close
}, [
$html("button", {}, "close")
$html2("button", {}, "close")
])
]);
};
@@ -1433,7 +1446,7 @@
});
var Navbar = (props, children) => {
const { class: className, ...rest } = props;
return $html("div", { ...rest, class: ui("navbar bg-base-100 shadow-sm px-4", className) }, children);
return $html2("div", { ...rest, class: ui("navbar bg-base-100 shadow-sm px-4", className) }, children);
};
// src/components/Radio.js
@@ -1443,7 +1456,7 @@
});
var Radio = (props) => {
const { class: className, label, tooltip, value, inputValue, name, ...rest } = props;
const radioEl = $html("input", {
const radioEl = $html2("input", {
...rest,
type: "radio",
name,
@@ -1456,11 +1469,11 @@
});
if (!label && !tooltip)
return radioEl;
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
const layout = $html2("label", { class: "label cursor-pointer justify-start gap-3" }, [
radioEl,
label ? $html("span", { class: "label-text" }, label) : null
label ? $html2("span", { class: "label-text" }, label) : null
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
return tooltip ? $html2("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};
// src/components/Range.js
@@ -1470,7 +1483,7 @@
});
var Range = (props) => {
const { class: className, label, tooltip, value, ...rest } = props;
const rangeEl = $html("input", {
const rangeEl = $html2("input", {
...rest,
type: "range",
class: ui("range", className),
@@ -1479,11 +1492,11 @@
});
if (!label && !tooltip)
return rangeEl;
const layout = $html("div", { class: "flex flex-col gap-2" }, [
label ? $html("span", { class: "label-text" }, label) : null,
const layout = $html2("div", { class: "flex flex-col gap-2" }, [
label ? $html2("span", { class: "label-text" }, label) : null,
rangeEl
]);
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
return tooltip ? $html2("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
};
// src/components/Rating.js
@@ -1494,12 +1507,12 @@
var Rating = (props) => {
const { class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
return $html("div", {
return $html2("div", {
...rest,
class: () => ui(`rating ${val(readonly) ? "pointer-events-none" : ""}`, className)
}, Array.from({ length: val(count) }, (_, i) => {
const starValue = i + 1;
return $html("input", {
return $html2("input", {
type: "radio",
name: ratingGroup,
class: `mask ${mask}`,
@@ -1524,18 +1537,18 @@
});
var Select = (props) => {
const { class: className, label, items, value, ...rest } = props;
const selectEl = $html("select", {
const selectEl = $html2("select", {
...rest,
class: ui("select select-bordered w-full", className),
value
}, $for(() => val(items) || [], (opt) => $html("option", {
}, $for(() => val(items) || [], (opt) => $html2("option", {
value: opt.value,
$selected: () => String(val(value)) === String(opt.value)
}, opt.label), (opt) => opt.value));
if (!label)
return selectEl;
return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
$html("span", {}, label),
return $html2("label", { class: "fieldset-label flex flex-col gap-1" }, [
$html2("span", {}, label),
selectEl
]);
};
@@ -1547,7 +1560,7 @@
});
var Stack = (props, children) => {
const { class: className, ...rest } = props;
return $html("div", { ...rest, class: ui("stack", className) }, children);
return $html2("div", { ...rest, class: ui("stack", className) }, children);
};
// src/components/Stat.js
@@ -1557,11 +1570,11 @@
});
var Stat = (props) => {
const { class: className, icon, label, value, desc, ...rest } = props;
return $html("div", { ...rest, class: ui("stat", className) }, [
icon && $html("div", { class: "stat-figure text-secondary" }, icon),
label && $html("div", { class: "stat-title" }, label),
$html("div", { class: "stat-value" }, () => val(value) ?? value),
desc && $html("div", { class: "stat-desc" }, desc)
return $html2("div", { ...rest, class: ui("stat", className) }, [
icon && $html2("div", { class: "stat-figure text-secondary" }, icon),
label && $html2("div", { class: "stat-title" }, label),
$html2("div", { class: "stat-value" }, () => val(value) ?? value),
desc && $html2("div", { class: "stat-desc" }, desc)
]);
};
@@ -1572,13 +1585,13 @@
});
var Swap = (props) => {
const { class: className, value, on, off, ...rest } = props;
return $html("label", { ...rest, class: ui("swap", className) }, [
$html("input", {
return $html2("label", { ...rest, class: ui("swap", className) }, [
$html2("input", {
type: "checkbox",
checked: val(value)
}),
$html("div", { class: "swap-on" }, on),
$html("div", { class: "swap-off" }, off)
$html2("div", { class: "swap-on" }, on),
$html2("div", { class: "swap-off" }, off)
]);
};
@@ -1594,31 +1607,31 @@
const pinRowsClass = val(pinRows) ? "table-pin-rows" : "";
return ui("table", className, zebraClass, pinRowsClass);
};
return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
$html("table", { ...rest, class: tableClass }, [
$html("thead", {}, [
$html("tr", {}, columns.map((col) => $html("th", { class: col.class || "" }, col.label)))
return $html2("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
$html2("table", { ...rest, class: tableClass }, [
$html2("thead", {}, [
$html2("tr", {}, columns.map((col) => $html2("th", { class: col.class || "" }, col.label)))
]),
$html("tbody", {}, [
$html2("tbody", {}, [
$for(items, (item, index) => {
return $html("tr", { class: "hover" }, columns.map((col) => {
return $html2("tr", { class: "hover" }, columns.map((col) => {
const cellContent = () => {
if (col.render)
return col.render(item, index);
const value = item[col.key];
return val(value);
};
return $html("td", { class: col.class || "" }, [cellContent]);
return $html2("td", { class: col.class || "" }, [cellContent]);
}));
}, keyFn || ((item, idx) => item.id || idx)),
$if(() => val(items).length === 0, () => $html("tr", {}, [
$html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
$if(() => val(items).length === 0, () => $html2("tr", {}, [
$html2("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
val(empty)
])
]))
]),
$if(() => columns.some((c) => c.footer), () => $html("tfoot", {}, [
$html("tr", {}, columns.map((col) => $html("th", {}, col.footer || "")))
$if(() => columns.some((c) => c.footer), () => $html2("tfoot", {}, [
$html2("tr", {}, columns.map((col) => $html2("th", {}, col.footer || "")))
]))
])
]);
@@ -1640,13 +1653,13 @@
}
onClick?.(e);
};
return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
$html("div", {
return $html2("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
$html2("div", {
role: "tablist",
class: ui("tabs tabs-box", className)
}, $for(itemsSignal, (it, idx) => {
const isActive = val(it.active) ?? currentActive() === idx;
return $html("a", {
return $html2("a", {
role: "tab",
class: () => ui("tab", isActive ? "tab-active" : "", val(it.disabled) ? "tab-disabled" : ""),
onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined
@@ -1657,7 +1670,7 @@
if (!activeItem)
return null;
const content = val(activeItem.content);
return $html("div", { class: "p-4" }, [
return $html2("div", { class: "p-4" }, [
typeof content === "function" ? content() : content
]);
}
@@ -1677,7 +1690,7 @@
warning: "icon-[lucide--alert-triangle]",
error: "icon-[lucide--alert-circle]"
};
return $html("ul", {
return $html2("ul", {
...rest,
class: () => ui(`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`, className)
}, [
@@ -1686,14 +1699,14 @@
const isLast = i === val(items).length - 1;
const itemType = item.type || "success";
const renderSlot = (content) => typeof content === "function" ? content() : content;
return $html("li", { class: "flex-1" }, [
!isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
$html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
$html("div", { class: "timeline-middle" }, [
return $html2("li", { class: "flex-1" }, [
!isFirst ? $html2("hr", { class: item.completed ? "bg-primary" : "" }) : null,
$html2("div", { class: "timeline-start" }, [renderSlot(item.title)]),
$html2("div", { class: "timeline-middle" }, [
item.icon ? getIcon(item.icon) : getIcon(iconMap[itemType] || iconMap.success)
]),
$html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
!isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null
$html2("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
!isLast ? $html2("hr", { class: item.completed ? "bg-primary" : "" }) : null
]);
}, (item, i) => item.id || i)
]);
@@ -1707,13 +1720,13 @@
var Toast = (message, type = "alert-success", duration = 3500) => {
let container = document.getElementById("sigpro-toast-container");
if (!container) {
container = $html("div", {
container = $html2("div", {
id: "sigpro-toast-container",
class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none"
});
document.body.appendChild(container);
}
const toastHost = $html("div", { style: "display: contents" });
const toastHost = $html2("div", { style: "display: contents" });
container.appendChild(toastHost);
let timeoutId;
const close = () => {
@@ -1734,10 +1747,10 @@
};
const ToastComponent = () => {
const closeIcon = getIcon("icon-[lucide--x]");
const el = $html("div", {
const el = $html2("div", {
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
}, [
$html("span", {}, [typeof message === "function" ? message() : message]),
$html2("span", {}, [typeof message === "function" ? message() : message]),
Button({
class: "btn-xs btn-circle btn-ghost",
onclick: close
@@ -1758,7 +1771,7 @@
__export(exports_Tooltip, {
Tooltip: () => Tooltip
});
var Tooltip = (props, children) => $html("div", {
var Tooltip = (props, children) => $html2("div", {
...props,
class: () => ui("tooltip", props.ui, props.class),
"data-tip": props.tip

6
dist/sigpro-ui.min.js vendored
View File

File diff suppressed because one or more lines are too long