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

changed to new functions
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-22 12:06:34 +02:00
parent 5a5f593025
commit 59e6d972a8
125 changed files with 1934 additions and 2015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
components/calendar.js
View File

@@ -1,5 +1,5 @@
// components/Calendar.js
import { $, Tag } from "sigpro";
import { $, h } from "sigpro";
export const Calendar = (props) => {
const internalDate = $(new Date());
@@ -69,9 +69,9 @@ export const Calendar = (props) => {
};
const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
return Tag("div", { class: "flex-1" }, [
Tag("div", { class: "flex gap-2 items-center" }, [
Tag("input", {
return h("div", { class: "flex-1" }, [
h("div", { class: "flex gap-2 items-center" }, [
h("input", {
type: "range",
min: 0,
max: 23,
@@ -79,38 +79,38 @@ export const Calendar = (props) => {
class: "range range-xs flex-1",
oninput: (e) => onHourChange(parseInt(e.target.value))
}),
Tag("span", { class: "text-sm font-mono min-w-[48px] text-center" },
h("span", { class: "text-sm font-mono min-w-[48px] text-center" },
() => String(typeof hVal === "function" ? hVal() : hVal).padStart(2, "0") + ":00"
)
])
]);
};
return Tag("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${props.class ?? ''}`.trim() }, [
Tag("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
Tag("span", { class: "icon-[lucide--chevrons-left]" })
return h("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${props.class ?? ''}`.trim() }, [
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]" })
),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
Tag("span", { class: "icon-[lucide--chevron-left]" })
h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
h("span", { class: "icon-[lucide--chevron-left]" })
)
]),
Tag("span", { class: "font-bold uppercase flex-1 text-center" }, [
h("span", { class: "font-bold uppercase flex-1 text-center" }, [
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
]),
Tag("div", { class: "flex gap-0.5" }, [
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
Tag("span", { class: "icon-[lucide--chevron-right]" })
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]" })
),
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
Tag("span", { class: "icon-[lucide--chevrons-right]" })
h("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
h("span", { class: "icon-[lucide--chevrons-right]" })
)
])
]),
Tag("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
...["L", "M", "X", "J", "V", "S", "D"].map((d) => Tag("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
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();
const year = d.getFullYear();
@@ -120,14 +120,14 @@ export const Calendar = (props) => {
const daysInMonth = new Date(year, month + 1, 0).getDate();
const cells = [];
for (let i = 0; i < offset; i++) cells.push(Tag("div"));
for (let i = 0; i < offset; i++) cells.push(h("div"));
for (let i = 1; i <= daysInMonth; i++) {
const date = new Date(year, month, i);
const dStr = formatDate(date);
cells.push(
Tag("button", {
h("button", {
type: "button",
class: () => {
const v = getCurrentValue();
@@ -160,9 +160,9 @@ export const Calendar = (props) => {
}
]),
props.hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
props.hour ? h("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
isRangeMode()
? Tag("div", { class: "flex gap-4" }, [
? h("div", { class: "flex gap-4" }, [
HourSlider({ value: startHour, onChange: (h) => startHour(h) }),
HourSlider({ value: endHour, onChange: (h) => endHour(h) })
])