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

update components
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-27 01:57:14 +02:00
parent e3e5082247
commit 7590438780
8 changed files with 115 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
dist/sigpro-ui.esm.js vendored
View File

@@ -43,6 +43,7 @@ __export(exports_All, {
SkeletonText: () => SkeletonText,
Skeleton: () => Skeleton,
Select: () => Select,
RatingItems: () => RatingItems,
Rating: () => Rating,
Range: () => Range,
Radio: () => Radio,
@@ -52,6 +53,7 @@ __export(exports_All, {
Modal: () => Modal,
Menu: () => Menu,
Loading: () => Loading,
ListRows: () => ListRows,
List: () => List,
Kbd: () => Kbd,
Input: () => Input,
@@ -71,6 +73,7 @@ __export(exports_All, {
Divider: () => Divider,
Datepicker: () => Datepicker,
Colorpicker: () => Colorpicker,
ColorPalette: () => ColorPalette,
Checkbox: () => Checkbox,
ChatImage: () => ChatImage,
ChatHeader: () => ChatHeader,
@@ -713,7 +716,19 @@ var ChatHeader = (p2, c) => O("div", { ...p2, class: cls("chat-header", p2.class
var ChatImage = (p2, c) => O("div", { ...p2, class: cls("chat-image avatar", p2.class) }, O("div", { class: "w-10 rounded-full" }, typeof c === "string" ? O("img", { src: c, alt: "avatar" }) : c));
var Checkbox = (p2) => O("input", { ...p2, type: "checkbox", class: cls("checkbox", p2.class) });
var Colorpicker = (p2) => {
const isOpen = S(false);
const current = () => get(p2.value) || "#000000";
return Dropdown({}, [
DropdownButton({ class: "btn" }, [
O("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
p2.label && O("span", {}, p2.label)
]),
DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p2.value, onchange: (c) => {
isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
close();
} }))
]);
};
var ColorPalette = (p2) => {
const current = () => get(p2.value) || "#000000";
const palette = [
"#000",
@@ -781,38 +796,16 @@ var Colorpicker = (p2) => {
"#d946ef",
"#fae8ff"
];
const pick = (c) => {
isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
isOpen(false);
};
return O("div", { class: cls("relative w-fit", p2.class) }, [
O("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) => {
e.stopPropagation();
isOpen(!isOpen());
}
}, [
O("div", { class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0", style: () => `background-color: ${current()}` }),
p2.label && O("span", { class: "opacity-80" }, p2.label)
]),
z(isOpen, () => [
O("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false)
}),
O("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" }, O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("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)
}))))
])
]);
const pick = (c) => isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
return O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("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)
})));
};
var Datepicker = (p2) => {
const isOpen = S(false);
@@ -986,13 +979,8 @@ var Input = (p2) => {
]);
};
var Kbd = (p2, c) => O("kbd", { ...p2, class: cls("kbd", p2.class) }, c);
var List = (p2, c) => {
if (!p2.items)
return O("ul", { ...p2, class: cls("list", p2.class) }, c);
return O("ul", { ...p2, class: cls("list", p2.class) }, [
K(p2.items, (item, i) => O("li", { class: cls("list-row", item.class) }, typeof p2.render === "function" ? p2.render(item, i) : item), p2.key)
]);
};
var List = (p2, c) => O("ul", { ...p2, class: cls("list", p2.class) }, c);
var ListRows = (p2) => () => (get(p2.items) || []).map((item, idx) => O("li", { class: cls("list-row", p2.class, item?.class) }, typeof p2.render === "function" ? p2.render(item, idx) : item));
var Loading = (p2, c) => O("span", { ...p2, class: cls("loading loading-spinner", p2.class) }, c);
var Menu = (p2) => {
if (p2.children !== undefined)
@@ -1044,20 +1032,8 @@ var Progress = (p2) => O("progress", { ...p2, class: cls("progress", p2.class) }
var Radial = (p2, c) => O("div", { ...p2, class: cls("radial-progress", p2.class), style: `--value:${p2.value ?? 0};${p2.style ?? ""}`, role: "progressbar", "aria-valuenow": p2.value ?? 0 }, c ?? `${p2.value ?? 0}%`);
var Radio = (p2) => O("input", { ...p2, type: "radio", class: cls("radio", p2.class) });
var Range = (p2) => O("input", { ...p2, type: "range", class: cls("range", p2.class) });
var Rating = (p2) => {
const name = rand("rating");
const stars = p2.children ?? Array.from({ length: p2.count || 5 }, (_2, i) => {
const v2 = i + 1;
return O("input", {
type: "radio",
name,
class: cls("mask", p2.mask || "mask-star"),
checked: () => get(p2.value) === v2,
onchange: () => isFn(p2.value) ? p2.value(v2) : p2.onchange?.(v2)
});
});
return O("div", { class: cls("rating", p2.class), ...p2 }, stars);
};
var Rating = (p2, c) => O("div", { ...p2, class: "rating" }, c);
var RatingItems = (p2) => [...Array(p2.count)].map((_2, i) => O("input", { class: cls("mask", p2.class), name: p2.name, type: "radio", checked: () => get(p2.value) === i, onchange: () => isFn(p2.value) ? p2.value(i) : p2.onchange?.(i) }));
var Select = (p2, c) => {
if (c !== undefined)
return O("select", { class: cls("select", p2.class), ...p2 }, c);

2
dist/sigpro-ui.esm.min.js vendored
View File

File diff suppressed because one or more lines are too long

84
dist/sigpro-ui.js vendored
View File

@@ -74,6 +74,7 @@
SkeletonText: () => SkeletonText,
Skeleton: () => Skeleton,
Select: () => Select,
RatingItems: () => RatingItems,
Rating: () => Rating,
Range: () => Range,
Radio: () => Radio,
@@ -83,6 +84,7 @@
Modal: () => Modal,
Menu: () => Menu,
Loading: () => Loading,
ListRows: () => ListRows,
List: () => List,
Kbd: () => Kbd,
Input: () => Input,
@@ -102,6 +104,7 @@
Divider: () => Divider,
Datepicker: () => Datepicker,
Colorpicker: () => Colorpicker,
ColorPalette: () => ColorPalette,
Checkbox: () => Checkbox,
ChatImage: () => ChatImage,
ChatHeader: () => ChatHeader,
@@ -744,7 +747,19 @@
var ChatImage = (p2, c) => O("div", { ...p2, class: cls("chat-image avatar", p2.class) }, O("div", { class: "w-10 rounded-full" }, typeof c === "string" ? O("img", { src: c, alt: "avatar" }) : c));
var Checkbox = (p2) => O("input", { ...p2, type: "checkbox", class: cls("checkbox", p2.class) });
var Colorpicker = (p2) => {
const isOpen = S(false);
const current = () => get(p2.value) || "#000000";
return Dropdown({}, [
DropdownButton({ class: "btn" }, [
O("div", { class: "size-5 rounded-sm", style: () => `background-color: ${current()}` }),
p2.label && O("span", {}, p2.label)
]),
DropdownContent({ class: "p-3 bg-base-100 rounded-box shadow-xl w-64" }, ColorPalette({ value: p2.value, onchange: (c) => {
isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
close();
} }))
]);
};
var ColorPalette = (p2) => {
const current = () => get(p2.value) || "#000000";
const palette = [
"#000",
@@ -812,38 +827,16 @@
"#d946ef",
"#fae8ff"
];
const pick = (c) => {
isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
isOpen(false);
};
return O("div", { class: cls("relative w-fit", p2.class) }, [
O("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) => {
e.stopPropagation();
isOpen(!isOpen());
}
}, [
O("div", { class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0", style: () => `background-color: ${current()}` }),
p2.label && O("span", { class: "opacity-80" }, p2.label)
]),
z(isOpen, () => [
O("div", {
class: "fixed inset-0 z-[100]",
onclick: () => isOpen(false)
}),
O("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" }, O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("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)
}))))
])
]);
const pick = (c) => isFn(p2.value) ? p2.value(c) : p2.onchange?.(c);
return O("div", { class: "grid grid-cols-8 gap-1" }, palette.map((c) => O("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)
})));
};
var Datepicker = (p2) => {
const isOpen = S(false);
@@ -1017,13 +1010,8 @@
]);
};
var Kbd = (p2, c) => O("kbd", { ...p2, class: cls("kbd", p2.class) }, c);
var List = (p2, c) => {
if (!p2.items)
return O("ul", { ...p2, class: cls("list", p2.class) }, c);
return O("ul", { ...p2, class: cls("list", p2.class) }, [
K(p2.items, (item, i) => O("li", { class: cls("list-row", item.class) }, typeof p2.render === "function" ? p2.render(item, i) : item), p2.key)
]);
};
var List = (p2, c) => O("ul", { ...p2, class: cls("list", p2.class) }, c);
var ListRows = (p2) => () => (get(p2.items) || []).map((item, idx) => O("li", { class: cls("list-row", p2.class, item?.class) }, typeof p2.render === "function" ? p2.render(item, idx) : item));
var Loading = (p2, c) => O("span", { ...p2, class: cls("loading loading-spinner", p2.class) }, c);
var Menu = (p2) => {
if (p2.children !== undefined)
@@ -1075,20 +1063,8 @@
var Radial = (p2, c) => O("div", { ...p2, class: cls("radial-progress", p2.class), style: `--value:${p2.value ?? 0};${p2.style ?? ""}`, role: "progressbar", "aria-valuenow": p2.value ?? 0 }, c ?? `${p2.value ?? 0}%`);
var Radio = (p2) => O("input", { ...p2, type: "radio", class: cls("radio", p2.class) });
var Range = (p2) => O("input", { ...p2, type: "range", class: cls("range", p2.class) });
var Rating = (p2) => {
const name = rand("rating");
const stars = p2.children ?? Array.from({ length: p2.count || 5 }, (_2, i) => {
const v2 = i + 1;
return O("input", {
type: "radio",
name,
class: cls("mask", p2.mask || "mask-star"),
checked: () => get(p2.value) === v2,
onchange: () => isFn(p2.value) ? p2.value(v2) : p2.onchange?.(v2)
});
});
return O("div", { class: cls("rating", p2.class), ...p2 }, stars);
};
var Rating = (p2, c) => O("div", { ...p2, class: "rating" }, c);
var RatingItems = (p2) => [...Array(p2.count)].map((_2, i) => O("input", { class: cls("mask", p2.class), name: p2.name, type: "radio", checked: () => get(p2.value) === i, onchange: () => isFn(p2.value) ? p2.value(i) : p2.onchange?.(i) }));
var Select = (p2, c) => {
if (c !== undefined)
return O("select", { class: cls("select", p2.class), ...p2 }, c);

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

File diff suppressed because one or more lines are too long