change components
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
This commit is contained in:
287
dist/sigpro-ui.js
vendored
287
dist/sigpro-ui.js
vendored
@@ -856,14 +856,15 @@
|
||||
__export(exports_Datepicker, {
|
||||
Datepicker: () => Datepicker
|
||||
});
|
||||
var Datepicker = (props) => {
|
||||
const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
|
||||
const isOpen = B(false);
|
||||
|
||||
// src/components/Calendar.js
|
||||
var Calendar = (props) => {
|
||||
const { value, range = false, hour = false, onChange, class: className = "" } = props;
|
||||
const internalDate = B(new Date);
|
||||
const hoverDate = B(null);
|
||||
const startHour = B(0);
|
||||
const endHour = B(0);
|
||||
const isRangeMode = () => val2(range) === true;
|
||||
const isRangeMode = () => range === true;
|
||||
const now = new Date;
|
||||
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
||||
const formatDate = (d) => {
|
||||
@@ -877,34 +878,142 @@
|
||||
const current = val2(value);
|
||||
if (isRangeMode()) {
|
||||
if (!current?.start || current.start && current.end) {
|
||||
if (typeof value === "function") {
|
||||
value({
|
||||
start: dateStr,
|
||||
end: null,
|
||||
...hour && { startHour: startHour() }
|
||||
});
|
||||
}
|
||||
const newValue = {
|
||||
start: dateStr,
|
||||
end: null,
|
||||
...hour && { startHour: startHour() }
|
||||
};
|
||||
onChange?.(newValue);
|
||||
} else {
|
||||
const start = current.start;
|
||||
if (typeof value === "function") {
|
||||
const newValue = dateStr < start ? { start: dateStr, end: start } : { start, end: dateStr };
|
||||
if (hour) {
|
||||
newValue.startHour = current.startHour || startHour();
|
||||
newValue.endHour = current.endHour || endHour();
|
||||
}
|
||||
value(newValue);
|
||||
let newValue;
|
||||
if (dateStr < start) {
|
||||
newValue = { start: dateStr, end: start };
|
||||
} else {
|
||||
newValue = { start, end: dateStr };
|
||||
}
|
||||
isOpen(false);
|
||||
if (hour) {
|
||||
newValue.startHour = current.startHour !== undefined ? current.startHour : startHour();
|
||||
newValue.endHour = endHour();
|
||||
}
|
||||
onChange?.(newValue);
|
||||
}
|
||||
} else {
|
||||
if (typeof value === "function") {
|
||||
value(hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr);
|
||||
}
|
||||
isOpen(false);
|
||||
const newValue = hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr;
|
||||
onChange?.(newValue);
|
||||
}
|
||||
};
|
||||
const move = (m2) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear(), d.getMonth() + m2, 1));
|
||||
};
|
||||
const moveYear = (y) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
|
||||
};
|
||||
const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
|
||||
return S("div", { class: "flex-1" }, [
|
||||
S("div", { class: "flex gap-2 items-center" }, [
|
||||
S("input", {
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 23,
|
||||
value: hVal,
|
||||
class: "range range-xs flex-1",
|
||||
oninput: (e) => {
|
||||
const newHour = parseInt(e.target.value);
|
||||
onHourChange(newHour);
|
||||
}
|
||||
}),
|
||||
S("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(val2(hVal)).padStart(2, "0") + ":00")
|
||||
])
|
||||
]);
|
||||
};
|
||||
return S("div", { class: `p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box w-80 select-none ${className}` }, [
|
||||
S("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
|
||||
S("div", { class: "flex gap-0.5" }, [
|
||||
S("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
|
||||
S("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
|
||||
]),
|
||||
S("span", { class: "font-bold uppercase flex-1 text-center" }, [
|
||||
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
|
||||
]),
|
||||
S("div", { class: "flex gap-0.5" }, [
|
||||
S("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
|
||||
S("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
|
||||
])
|
||||
]),
|
||||
S("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
|
||||
...["L", "M", "X", "J", "V", "S", "D"].map((d) => S("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
|
||||
() => {
|
||||
const d = internalDate();
|
||||
const year = d.getFullYear();
|
||||
const month = d.getMonth();
|
||||
const firstDay = new Date(year, month, 1).getDay();
|
||||
const offset = firstDay === 0 ? 6 : firstDay - 1;
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
const nodes = [];
|
||||
for (let i = 0;i < offset; i++)
|
||||
nodes.push(S("div"));
|
||||
for (let i = 1;i <= daysInMonth; i++) {
|
||||
const date = new Date(year, month, i);
|
||||
const dStr = formatDate(date);
|
||||
nodes.push(S("button", {
|
||||
type: "button",
|
||||
class: () => {
|
||||
const v2 = val2(value);
|
||||
const h = hoverDate();
|
||||
const isStart = typeof v2 === "string" ? v2.split("T")[0] === dStr : v2?.start === dStr;
|
||||
const isEnd = v2?.end === dStr;
|
||||
let inRange = false;
|
||||
if (isRangeMode() && v2?.start) {
|
||||
const start = v2.start;
|
||||
if (!v2.end && h) {
|
||||
inRange = dStr > start && dStr <= h || dStr < start && dStr >= h;
|
||||
} else if (v2.end) {
|
||||
inRange = dStr > start && dStr < v2.end;
|
||||
}
|
||||
}
|
||||
const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative";
|
||||
const state = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost";
|
||||
const today = dStr === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : "";
|
||||
return `${base} ${state} ${today}`;
|
||||
},
|
||||
onmouseenter: () => {
|
||||
if (isRangeMode())
|
||||
hoverDate(dStr);
|
||||
},
|
||||
onclick: () => selectDate(date)
|
||||
}, [i.toString()]));
|
||||
}
|
||||
return nodes;
|
||||
}
|
||||
]),
|
||||
hour ? S("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
|
||||
isRangeMode() ? S("div", { class: "flex gap-4" }, [
|
||||
HourSlider({
|
||||
value: startHour,
|
||||
onChange: (newHour) => startHour(newHour)
|
||||
}),
|
||||
HourSlider({
|
||||
value: endHour,
|
||||
onChange: (newHour) => endHour(newHour)
|
||||
})
|
||||
]) : HourSlider({
|
||||
value: startHour,
|
||||
onChange: (newHour) => startHour(newHour)
|
||||
})
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
|
||||
// src/components/Datepicker.js
|
||||
var Datepicker = (props) => {
|
||||
const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
|
||||
const isOpen = B(false);
|
||||
const isRangeMode = () => val2(range) === true;
|
||||
const displayValue = B("");
|
||||
Watch(() => {
|
||||
R(() => {
|
||||
const v2 = val2(value);
|
||||
if (!v2) {
|
||||
displayValue("");
|
||||
@@ -923,31 +1032,13 @@
|
||||
}
|
||||
displayValue(text);
|
||||
});
|
||||
const move = (m2) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear(), d.getMonth() + m2, 1));
|
||||
};
|
||||
const moveYear = (y) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
|
||||
};
|
||||
const HourSlider = ({ value: hVal, onChange }) => {
|
||||
return S("div", { class: "flex-1" }, [
|
||||
S("div", { class: "flex gap-2 items-center" }, [
|
||||
S("input", {
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 23,
|
||||
value: hVal,
|
||||
class: "range range-xs flex-1",
|
||||
oninput: (e) => {
|
||||
const newHour = parseInt(e.target.value);
|
||||
onChange(newHour);
|
||||
}
|
||||
}),
|
||||
S("span", { class: "text-sm font-mono min-w-[48px] text-center" }, () => String(val2(hVal)).padStart(2, "0") + ":00")
|
||||
])
|
||||
]);
|
||||
const handleCalendarChange = (newValue) => {
|
||||
if (typeof value === "function") {
|
||||
value(newValue);
|
||||
}
|
||||
if (!isRangeMode() || newValue?.end !== undefined && newValue?.end !== null) {
|
||||
isOpen(false);
|
||||
}
|
||||
};
|
||||
return S("div", { class: ui("relative w-full", className) }, [
|
||||
Input({
|
||||
@@ -963,99 +1054,15 @@
|
||||
...rest
|
||||
}),
|
||||
J(isOpen, () => S("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",
|
||||
class: "absolute left-0 mt-2 z-[100]",
|
||||
onclick: (e) => e.stopPropagation()
|
||||
}, [
|
||||
S("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
|
||||
S("div", { class: "flex gap-0.5" }, [
|
||||
S("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) }, getIcon("icon-[lucide--chevrons-left]")),
|
||||
S("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) }, getIcon("icon-[lucide--chevron-left]"))
|
||||
]),
|
||||
S("span", { class: "font-bold uppercase flex-1 text-center" }, [
|
||||
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" })
|
||||
]),
|
||||
S("div", { class: "flex gap-0.5" }, [
|
||||
S("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) }, getIcon("icon-[lucide--chevron-right]")),
|
||||
S("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) }, getIcon("icon-[lucide--chevrons-right]"))
|
||||
])
|
||||
]),
|
||||
S("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
|
||||
...["L", "M", "X", "J", "V", "S", "D"].map((d) => S("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
|
||||
() => {
|
||||
const d = internalDate();
|
||||
const year = d.getFullYear();
|
||||
const month = d.getMonth();
|
||||
const firstDay = new Date(year, month, 1).getDay();
|
||||
const offset = firstDay === 0 ? 6 : firstDay - 1;
|
||||
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||
const nodes = [];
|
||||
for (let i = 0;i < offset; i++)
|
||||
nodes.push(S("div"));
|
||||
for (let i = 1;i <= daysInMonth; i++) {
|
||||
const date = new Date(year, month, i);
|
||||
const dStr = formatDate(date);
|
||||
nodes.push(S("button", {
|
||||
type: "button",
|
||||
class: () => {
|
||||
const v2 = val2(value);
|
||||
const h = hoverDate();
|
||||
const isStart = typeof v2 === "string" ? v2.split("T")[0] === dStr : v2?.start === dStr;
|
||||
const isEnd = v2?.end === dStr;
|
||||
let inRange = false;
|
||||
if (isRangeMode() && v2?.start) {
|
||||
const start = v2.start;
|
||||
if (!v2.end && h) {
|
||||
inRange = dStr > start && dStr <= h || dStr < start && dStr >= h;
|
||||
} else if (v2.end) {
|
||||
inRange = dStr > start && dStr < v2.end;
|
||||
}
|
||||
}
|
||||
const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative";
|
||||
const state = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost";
|
||||
const today = dStr === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : "";
|
||||
return `${base} ${state} ${today}`;
|
||||
},
|
||||
onmouseenter: () => {
|
||||
if (isRangeMode())
|
||||
hoverDate(dStr);
|
||||
},
|
||||
onclick: () => selectDate(date)
|
||||
}, [i.toString()]));
|
||||
}
|
||||
return nodes;
|
||||
}
|
||||
]),
|
||||
hour ? S("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
|
||||
isRangeMode() ? S("div", { class: "flex gap-4" }, [
|
||||
HourSlider({
|
||||
value: startHour,
|
||||
onChange: (newHour) => {
|
||||
startHour(newHour);
|
||||
const currentVal = val2(value);
|
||||
if (currentVal?.start)
|
||||
value({ ...currentVal, startHour: newHour });
|
||||
}
|
||||
}),
|
||||
HourSlider({
|
||||
value: endHour,
|
||||
onChange: (newHour) => {
|
||||
endHour(newHour);
|
||||
const currentVal = val2(value);
|
||||
if (currentVal?.end)
|
||||
value({ ...currentVal, endHour: newHour });
|
||||
}
|
||||
})
|
||||
]) : HourSlider({
|
||||
value: startHour,
|
||||
onChange: (newHour) => {
|
||||
startHour(newHour);
|
||||
const currentVal = val2(value);
|
||||
if (currentVal && typeof currentVal === "string") {
|
||||
value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
|
||||
}
|
||||
}
|
||||
})
|
||||
]) : null
|
||||
Calendar({
|
||||
value,
|
||||
range: isRangeMode(),
|
||||
hour,
|
||||
onChange: handleCalendarChange
|
||||
})
|
||||
])),
|
||||
J(isOpen, () => S("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) }))
|
||||
]);
|
||||
|
||||
Reference in New Issue
Block a user