53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import { Tag, For } from "sigpro";
|
|
import { val } from "../core/utils.js";
|
|
|
|
export const Dropdown = (props, children) => {
|
|
const { label, icon, items, ...rest } = props;
|
|
|
|
const renderContent = () => {
|
|
if (items) {
|
|
const source = typeof items === "function" ? items : () => items;
|
|
return Tag("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) =>
|
|
Tag("li", {}, [
|
|
Tag("a", {
|
|
class: item.class || "",
|
|
onclick: (e) => {
|
|
if (item.onclick) item.onclick(e);
|
|
if (document.activeElement) document.activeElement.blur();
|
|
}
|
|
}, [
|
|
item.icon ? Tag("span", {}, item.icon) : null,
|
|
Tag("span", {}, item.label)
|
|
])
|
|
])
|
|
)
|
|
]);
|
|
}
|
|
|
|
return Tag("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 Tag("div", {
|
|
...rest,
|
|
class: () => `dropdown ${val(props.class) || ""}`,
|
|
}, [
|
|
Tag("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()
|
|
]);
|
|
}; |