Migrating new 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:
@@ -1,22 +0,0 @@
|
||||
// components/Collapse.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Collapse = (props, children) => {
|
||||
const { class: className, title, name, open, ...rest } = props;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `collapse collapse-arrow bg-base-200 ${className || ''}`.trim()
|
||||
}, [
|
||||
Tag("input", {
|
||||
type: name ? "radio" : "checkbox",
|
||||
name: name,
|
||||
checked: () => typeof open === "function" ? open() : open,
|
||||
onchange: (e) => {
|
||||
if (typeof open === "function") open(e.target.checked);
|
||||
}
|
||||
}),
|
||||
Tag("div", { class: "collapse-title text-xl font-medium" }, title),
|
||||
Tag("div", { class: "collapse-content" }, children)
|
||||
]);
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
// components/Alert.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Alert = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
role: "alert",
|
||||
class: className || undefined
|
||||
}, children);
|
||||
};
|
||||
@@ -1,93 +0,0 @@
|
||||
// components/Autocomplete.js
|
||||
import { $, Tag, For, Watch } from "sigpro";
|
||||
|
||||
export const Autocomplete = (props) => {
|
||||
const { class: className, items = [], value, onselect, placeholder, ...rest } = props;
|
||||
|
||||
const query = $(() => {
|
||||
const v = typeof value === "function" ? value() : value;
|
||||
return v || "";
|
||||
});
|
||||
|
||||
const isOpen = $(false);
|
||||
const cursor = $(-1);
|
||||
const filteredItems = $([]);
|
||||
|
||||
Watch(() => {
|
||||
const q = String(query()).toLowerCase();
|
||||
const allItems = typeof items === "function" ? items() : items;
|
||||
const filtered = q
|
||||
? allItems.filter((item) =>
|
||||
(typeof item === "string" ? item : item.label).toLowerCase().includes(q)
|
||||
)
|
||||
: allItems;
|
||||
filteredItems(filtered);
|
||||
});
|
||||
|
||||
const pick = (item) => {
|
||||
const display = typeof item === "string" ? item : item.label;
|
||||
const actual = typeof item === "string" ? item : item.value;
|
||||
query(display);
|
||||
if (typeof value === "function") value(actual);
|
||||
onselect?.(item);
|
||||
isOpen(false);
|
||||
cursor(-1);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
const list = filteredItems();
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
isOpen(true);
|
||||
cursor(Math.min(cursor() + 1, list.length - 1));
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
cursor(Math.max(cursor() - 1, 0));
|
||||
} else if (e.key === "Enter" && cursor() >= 0) {
|
||||
e.preventDefault();
|
||||
pick(list[cursor()]);
|
||||
} else if (e.key === "Escape") {
|
||||
isOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
return Tag("div", { class: `relative w-full ${className || ''}`.trim() }, [
|
||||
Tag("label", { class: "input input-bordered w-full" }, [
|
||||
Tag("span", { class: "icon-[lucide--search]" }),
|
||||
Tag("input", {
|
||||
...rest,
|
||||
type: "text",
|
||||
class: "grow",
|
||||
value: query,
|
||||
placeholder: placeholder || "Buscar...",
|
||||
onfocus: () => isOpen(true),
|
||||
onblur: () => setTimeout(() => isOpen(false), 150),
|
||||
onkeydown: handleKeyDown,
|
||||
oninput: (e) => {
|
||||
const newVal = e.target.value;
|
||||
query(newVal);
|
||||
if (typeof value === "function") value(newVal);
|
||||
isOpen(true);
|
||||
cursor(-1);
|
||||
}
|
||||
})
|
||||
]),
|
||||
|
||||
Tag("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: () => `display: ${isOpen() && filteredItems().length ? "block" : "none"};`
|
||||
}, [
|
||||
For(filteredItems, (item, idx) =>
|
||||
Tag("li", {}, [
|
||||
Tag("a", {
|
||||
class: () => `block w-full ${cursor() === idx ? "active bg-primary text-primary-content" : ""}`,
|
||||
onclick: () => pick(item),
|
||||
onmouseenter: () => cursor(idx)
|
||||
}, typeof item === "string" ? item : item.label)
|
||||
]),
|
||||
(item, idx) => (typeof item === "string" ? item : item.value) + idx
|
||||
),
|
||||
() => filteredItems().length === 0 && Tag("li", { class: "p-2 text-center opacity-50" }, "Sin resultados")
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
// components/Badge.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Badge = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
|
||||
return Tag("span", {
|
||||
...rest,
|
||||
class: className || undefined
|
||||
}, children);
|
||||
};
|
||||
@@ -1,174 +0,0 @@
|
||||
// components/Calendar.js
|
||||
import { $, Tag, Watch } from "sigpro";
|
||||
|
||||
export const Calendar = (props) => {
|
||||
const { value, range = false, hour = false, onChange, class: className = "" } = props;
|
||||
|
||||
const internalDate = $(new Date());
|
||||
const hoverDate = $(null);
|
||||
const startHour = $(0);
|
||||
const endHour = $(0);
|
||||
const isRangeMode = () => {
|
||||
const r = typeof range === "function" ? range() : range;
|
||||
return r === 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) => {
|
||||
const year = d.getFullYear();
|
||||
const month = String(d.getMonth() + 1).padStart(2, "0");
|
||||
const day = String(d.getDate()).padStart(2, "0");
|
||||
return `${year}-${month}-${day}`;
|
||||
};
|
||||
|
||||
const getCurrentValue = () => {
|
||||
const v = value;
|
||||
return typeof v === "function" ? v() : v;
|
||||
};
|
||||
|
||||
const selectDate = (date) => {
|
||||
const dateStr = formatDate(date);
|
||||
const current = getCurrentValue();
|
||||
|
||||
if (isRangeMode()) {
|
||||
if (!current?.start || (current.start && current.end)) {
|
||||
const newValue = {
|
||||
start: dateStr,
|
||||
end: null,
|
||||
...(hour && { startHour: startHour() }),
|
||||
};
|
||||
onChange?.(newValue);
|
||||
} else {
|
||||
const start = current.start;
|
||||
let newValue;
|
||||
if (dateStr < start) {
|
||||
newValue = { start: dateStr, end: start };
|
||||
} else {
|
||||
newValue = { start, end: dateStr };
|
||||
}
|
||||
if (hour) {
|
||||
newValue.startHour = current.startHour !== undefined ? current.startHour : startHour();
|
||||
newValue.endHour = endHour();
|
||||
}
|
||||
onChange?.(newValue);
|
||||
}
|
||||
} else {
|
||||
const newValue = hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr;
|
||||
onChange?.(newValue);
|
||||
}
|
||||
};
|
||||
|
||||
const move = (m) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1));
|
||||
};
|
||||
|
||||
const moveYear = (y) => {
|
||||
const d = internalDate();
|
||||
internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
|
||||
};
|
||||
|
||||
const HourSlider = ({ value: hVal, onChange: onHourChange }) => {
|
||||
return Tag("div", { class: "flex-1" }, [
|
||||
Tag("div", { class: "flex gap-2 items-center" }, [
|
||||
Tag("input", {
|
||||
type: "range",
|
||||
min: 0,
|
||||
max: 23,
|
||||
value: hVal,
|
||||
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" },
|
||||
() => 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 ${className}`.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]" })
|
||||
),
|
||||
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
|
||||
Tag("span", { class: "icon-[lucide--chevron-left]" })
|
||||
)
|
||||
]),
|
||||
Tag("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]" })
|
||||
),
|
||||
Tag("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
|
||||
Tag("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)),
|
||||
() => {
|
||||
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 cells = [];
|
||||
for (let i = 0; i < offset; i++) cells.push(Tag("div"));
|
||||
|
||||
for (let i = 1; i <= daysInMonth; i++) {
|
||||
const date = new Date(year, month, i);
|
||||
const dStr = formatDate(date);
|
||||
|
||||
cells.push(
|
||||
Tag("button", {
|
||||
type: "button",
|
||||
class: () => {
|
||||
const v = getCurrentValue();
|
||||
const h = hoverDate();
|
||||
const isStart = typeof v === "string" ? v.split("T")[0] === dStr : v?.start === dStr;
|
||||
const isEnd = v?.end === dStr;
|
||||
let inRange = false;
|
||||
|
||||
if (isRangeMode() && v?.start) {
|
||||
const start = v.start;
|
||||
if (!v.end && h) {
|
||||
inRange = (dStr > start && dStr <= h) || (dStr < start && dStr >= h);
|
||||
} else if (v.end) {
|
||||
inRange = dStr > start && dStr < v.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}`.trim();
|
||||
},
|
||||
onmouseenter: () => { if (isRangeMode()) hoverDate(dStr); },
|
||||
onclick: () => selectDate(date)
|
||||
}, i.toString())
|
||||
);
|
||||
}
|
||||
return cells;
|
||||
}
|
||||
]),
|
||||
|
||||
hour ? Tag("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
|
||||
isRangeMode()
|
||||
? Tag("div", { class: "flex gap-4" }, [
|
||||
HourSlider({ value: startHour, onChange: (h) => startHour(h) }),
|
||||
HourSlider({ value: endHour, onChange: (h) => endHour(h) })
|
||||
])
|
||||
: HourSlider({ value: startHour, onChange: (h) => startHour(h) })
|
||||
]) : null
|
||||
]);
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
// components/Card.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Card = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `card ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const CardTitle = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `card-title ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const CardBody = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `card-body ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const CardActions = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `card-actions ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
// components/Carousel.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Carousel = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `carousel ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const CarouselItem = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `carousel-item ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,42 +0,0 @@
|
||||
// components/Chat.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Chat = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `chat ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const ChatImage = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `chat-image ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const ChatHeader = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `chat-header ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const ChatFooter = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `chat-footer ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const ChatBubble = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `chat-bubble ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
// components/Checkbox.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Checkbox = (props) => {
|
||||
const { class: className, label, ...rest } = props;
|
||||
|
||||
const inputEl = Tag("input", {
|
||||
...rest,
|
||||
type: "checkbox",
|
||||
class: className || undefined
|
||||
});
|
||||
|
||||
if (!label) return inputEl;
|
||||
|
||||
return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||
inputEl,
|
||||
Tag("span", { class: "label-text" }, label)
|
||||
]);
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
// components/Collapse.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Collapse = (props, children) => {
|
||||
const { class: className, open, ...rest } = props;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `collapse ${className || ''}`.trim(),
|
||||
tabindex: 0
|
||||
}, [
|
||||
Tag("input", {
|
||||
type: "checkbox",
|
||||
checked: () => typeof open === "function" ? open() : open,
|
||||
onchange: (e) => {
|
||||
if (typeof open === "function") open(e.target.checked);
|
||||
}
|
||||
}),
|
||||
...(Array.isArray(children) ? children : [children])
|
||||
]);
|
||||
};
|
||||
@@ -1,85 +0,0 @@
|
||||
// components/Datepicker.js
|
||||
import { $, Tag, If, Watch } from "sigpro";
|
||||
import { Calendar } from "./Calendar.js";
|
||||
|
||||
export const Datepicker = (props) => {
|
||||
const { class: className, value, range, placeholder, hour = false, ...rest } = props;
|
||||
|
||||
const isOpen = $(false);
|
||||
const isRangeMode = () => {
|
||||
const r = typeof range === "function" ? range() : range;
|
||||
return r === true;
|
||||
};
|
||||
|
||||
const displayValue = $("");
|
||||
|
||||
Watch(() => {
|
||||
const v = typeof value === "function" ? value() : value;
|
||||
if (!v) {
|
||||
displayValue("");
|
||||
return;
|
||||
}
|
||||
let text = "";
|
||||
if (typeof v === "string") {
|
||||
text = (hour && v.includes("T")) ? v.replace("T", " ") : v;
|
||||
} else if (v.start && v.end) {
|
||||
const startStr = hour && v.startHour !== undefined
|
||||
? `${v.start} ${String(v.startHour).padStart(2, "0")}:00`
|
||||
: v.start;
|
||||
const endStr = hour && v.endHour !== undefined
|
||||
? `${v.end} ${String(v.endHour).padStart(2, "0")}:00`
|
||||
: v.end;
|
||||
text = `${startStr} - ${endStr}`;
|
||||
} else if (v.start) {
|
||||
const startStr = hour && v.startHour !== undefined
|
||||
? `${v.start} ${String(v.startHour).padStart(2, "0")}:00`
|
||||
: v.start;
|
||||
text = `${startStr}...`;
|
||||
}
|
||||
displayValue(text);
|
||||
});
|
||||
|
||||
const handleCalendarChange = (newValue) => {
|
||||
if (typeof value === "function") value(newValue);
|
||||
if (!isRangeMode() || (newValue?.end !== undefined && newValue?.end !== null)) {
|
||||
isOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleOpen = (e) => {
|
||||
e.stopPropagation();
|
||||
isOpen(!isOpen());
|
||||
};
|
||||
|
||||
return Tag("div", { class: `relative w-full ${className || ''}`.trim() }, [
|
||||
Tag("label", { class: "input input-bordered w-full", onclick: toggleOpen }, [
|
||||
Tag("span", { class: "icon-[lucide--calendar]" }),
|
||||
Tag("input", {
|
||||
...rest,
|
||||
type: "text",
|
||||
class: "grow",
|
||||
value: displayValue,
|
||||
readonly: true,
|
||||
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha...")
|
||||
})
|
||||
]),
|
||||
|
||||
If(isOpen, () =>
|
||||
Tag("div", {
|
||||
class: "absolute left-0 mt-2 z-[100]",
|
||||
onclick: (e) => e.stopPropagation()
|
||||
}, [
|
||||
Calendar({
|
||||
value,
|
||||
range: isRangeMode(),
|
||||
hour,
|
||||
onChange: handleCalendarChange
|
||||
})
|
||||
])
|
||||
),
|
||||
|
||||
If(isOpen, () =>
|
||||
Tag("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })
|
||||
)
|
||||
]);
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
// components/Drawer.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Drawer = (props) => {
|
||||
const { class: className, id, open, content, children, ...rest } = props;
|
||||
|
||||
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `drawer ${className || ''}`.trim()
|
||||
}, [
|
||||
Tag("input", {
|
||||
id: drawerId,
|
||||
type: "checkbox",
|
||||
class: "drawer-toggle",
|
||||
checked: () => typeof open === "function" ? open() : open,
|
||||
onchange: (e) => {
|
||||
if (typeof open === "function") open(e.target.checked);
|
||||
}
|
||||
}),
|
||||
Tag("div", { class: "drawer-content" }, children),
|
||||
Tag("div", { class: "drawer-side" }, [
|
||||
Tag("label", {
|
||||
for: drawerId,
|
||||
class: "drawer-overlay",
|
||||
onclick: () => {
|
||||
if (typeof open === "function") open(false);
|
||||
}
|
||||
}),
|
||||
Tag("div", { class: "min-h-full bg-base-200 w-80 p-4" }, [
|
||||
typeof content === "function" ? content() : content
|
||||
])
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
// components/Dropdown.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
let 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;
|
||||
}
|
||||
|
||||
export const Dropdown = (props) => {
|
||||
const { class: className, children, ...rest } = props;
|
||||
|
||||
return Tag("details", {
|
||||
...rest,
|
||||
class: `dropdown ${className || ''}`.trim(),
|
||||
onclick: (e) => {
|
||||
const details = e.currentTarget;
|
||||
if (currentOpen && currentOpen !== details) {
|
||||
currentOpen.open = false;
|
||||
}
|
||||
setTimeout(() => {
|
||||
currentOpen = details.open ? details : null;
|
||||
}, 0);
|
||||
}
|
||||
}, children);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
// components/Fab.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Fab = (props, children) => {
|
||||
const { class: className, position = "bottom-6 right-6", ...rest } = props;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `absolute ${position} flex flex-col-reverse items-end gap-3 z-[100] ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
// components/Fieldset.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Fieldset = (props, children) => {
|
||||
const { class: className, legend, ...rest } = props;
|
||||
|
||||
return Tag("fieldset", {
|
||||
...rest,
|
||||
class: `fieldset ${className || ''}`.trim()
|
||||
}, [
|
||||
legend ? Tag("legend", { class: "fieldset-legend" }, legend) : null,
|
||||
children
|
||||
]);
|
||||
};
|
||||
@@ -1,81 +0,0 @@
|
||||
// components/Fileinput.js
|
||||
import { $, Tag, If, For } from "sigpro";
|
||||
|
||||
export const Fileinput = (props) => {
|
||||
const { class: className, max = 2, accept = "*", onselect, ...rest } = props;
|
||||
|
||||
const selectedFiles = $([]);
|
||||
const isDragging = $(false);
|
||||
const error = $(null);
|
||||
const MAX_BYTES = max * 1024 * 1024;
|
||||
|
||||
const handleFiles = (files) => {
|
||||
const fileList = Array.from(files);
|
||||
error(null);
|
||||
const oversized = fileList.find((f) => f.size > MAX_BYTES);
|
||||
if (oversized) {
|
||||
error(`Máx ${max}MB`);
|
||||
return;
|
||||
}
|
||||
selectedFiles([...selectedFiles(), ...fileList]);
|
||||
onselect?.(selectedFiles());
|
||||
};
|
||||
|
||||
const removeFile = (index) => {
|
||||
const updated = selectedFiles().filter((_, i) => i !== index);
|
||||
selectedFiles(updated);
|
||||
onselect?.(updated);
|
||||
};
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `fieldset w-full p-0 ${className || ''}`.trim()
|
||||
}, [
|
||||
Tag("label", {
|
||||
class: () => `
|
||||
relative flex items-center justify-between w-full h-12 px-4
|
||||
border-2 border-dashed rounded-lg cursor-pointer
|
||||
transition-all duration-200
|
||||
${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}
|
||||
`,
|
||||
ondragover: (e) => { e.preventDefault(); isDragging(true); },
|
||||
ondragleave: () => isDragging(false),
|
||||
ondrop: (e) => { e.preventDefault(); isDragging(false); handleFiles(e.dataTransfer.files); }
|
||||
}, [
|
||||
Tag("div", { class: "flex items-center gap-3 w-full" }, [
|
||||
Tag("span", { class: "icon-[lucide--upload]" }),
|
||||
Tag("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
|
||||
Tag("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`)
|
||||
]),
|
||||
Tag("input", {
|
||||
type: "file",
|
||||
multiple: true,
|
||||
accept,
|
||||
class: "hidden",
|
||||
onchange: (e) => handleFiles(e.target.files)
|
||||
})
|
||||
]),
|
||||
|
||||
() => error() && Tag("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()),
|
||||
|
||||
If(() => selectedFiles().length > 0, () =>
|
||||
Tag("ul", { class: "mt-2 space-y-1" }, [
|
||||
For(selectedFiles, (file, idx) =>
|
||||
Tag("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
|
||||
Tag("div", { class: "flex items-center gap-2 truncate" }, [
|
||||
Tag("span", { class: "opacity-50" }, "📄"),
|
||||
Tag("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
|
||||
Tag("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`)
|
||||
]),
|
||||
Tag("button", {
|
||||
type: "button",
|
||||
class: "btn btn-ghost btn-xs btn-circle",
|
||||
onclick: (e) => { e.preventDefault(); removeFile(idx); }
|
||||
}, Tag("span", { class: "icon-[lucide--x]" }))
|
||||
]),
|
||||
(file) => file.name + file.lastModified
|
||||
)
|
||||
])
|
||||
)
|
||||
]);
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
// components/Indicator.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Indicator = (props, children) => {
|
||||
const { value, class: className, ...rest } = props;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: "indicator"
|
||||
}, [
|
||||
value ? Tag("span", { class: `indicator-item badge ${className || ''}`.trim() }, value) : null,
|
||||
children
|
||||
]);
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
// components/Input.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Input = (props) => {
|
||||
const { type = "text", value, oninput, class: className, ...rest } = props;
|
||||
|
||||
return Tag("input", {
|
||||
...rest,
|
||||
type,
|
||||
value,
|
||||
oninput,
|
||||
class: className,
|
||||
});
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
// components/Kbd.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Kbd = (props, children) => {
|
||||
if (typeof props === "string" || typeof props === "number") {
|
||||
children = props;
|
||||
props = {};
|
||||
}
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("kbd", {
|
||||
...rest,
|
||||
class: `kbd ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
// components/List.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const List = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
|
||||
return Tag("ul", {
|
||||
...rest,
|
||||
class: `list ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
// components/Spinner.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Spinner = (props) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("span", {
|
||||
...rest,
|
||||
class: `loading loading-spinner ${className || ''}`.trim()
|
||||
});
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
// components/Menu.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Menu = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
|
||||
return Tag("ul", {
|
||||
...rest,
|
||||
class: `menu ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
// components/Modal.js
|
||||
import { Tag, Watch } from "sigpro";
|
||||
|
||||
export const Modal = (props) => {
|
||||
const { class: className, open, title, children, ...rest } = props;
|
||||
let dialogRef = null;
|
||||
|
||||
Watch(() => {
|
||||
const isOpen = typeof open === "function" ? open() : open;
|
||||
if (!dialogRef) return;
|
||||
isOpen ? dialogRef.showModal() : dialogRef.close();
|
||||
});
|
||||
|
||||
const close = () => {
|
||||
if (typeof open === "function") open(false);
|
||||
};
|
||||
|
||||
return Tag("dialog", {
|
||||
...rest,
|
||||
ref: el => dialogRef = el,
|
||||
class: `modal ${className || ''}`.trim(),
|
||||
onclose: close,
|
||||
oncancel: close
|
||||
}, [
|
||||
Tag("div", { class: "modal-box" }, [
|
||||
title && Tag("h3", { class: "text-lg font-bold" }, title),
|
||||
children,
|
||||
Tag("div", { class: "modal-action" }, [
|
||||
props.actions || Button({ onclick: close }, "Cerrar")
|
||||
])
|
||||
]),
|
||||
Tag("form", { method: "dialog", class: "modal-backdrop" }, [
|
||||
Tag("button", {}, "close")
|
||||
])
|
||||
]);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
// components/Navbar.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Navbar = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `navbar ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
// components/RadialProgress.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const RadialProgress = (props) => {
|
||||
const { class: className, value, max = 100, children, ...rest } = props;
|
||||
const percentage = value != null ? (value / max) * 100 : 0;
|
||||
const style = `--value: ${percentage}; --max: 100;`;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `radial-progress ${className || ''}`.trim(),
|
||||
style: style,
|
||||
role: "progressbar",
|
||||
"aria-valuenow": value,
|
||||
"aria-valuemin": 0,
|
||||
"aria-valuemax": max
|
||||
}, children || `${Math.round(percentage)}%`);
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
// components/Radio.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Radio = (props) => {
|
||||
const { class: className, label, ...rest } = props;
|
||||
|
||||
const radioEl = Tag("input", {
|
||||
...rest,
|
||||
type: "radio",
|
||||
class: `radio ${className || ''}`.trim()
|
||||
});
|
||||
|
||||
if (!label) return radioEl;
|
||||
|
||||
return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||
radioEl,
|
||||
Tag("span", { class: "label-text" }, label)
|
||||
]);
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
// components/Range.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Range = (props) => {
|
||||
const { class: className, ...rest } = props;
|
||||
|
||||
return Tag("input", {
|
||||
...rest,
|
||||
type: "range",
|
||||
class: `range ${className || ''}`.trim()
|
||||
});
|
||||
};
|
||||
@@ -1,25 +0,0 @@
|
||||
// components/Rating.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Rating = (props, children) => {
|
||||
const { class: className, count, mask = "mask-star", value, onchange, ...rest } = props;
|
||||
|
||||
const name = `rating-${Math.random().toString(36).slice(2, 7)}`;
|
||||
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `rating ${className || ''}`.trim()
|
||||
}, children || Array.from({ length: count || 5 }, (_, i) => {
|
||||
const starValue = i + 1;
|
||||
return Tag("input", {
|
||||
type: "radio",
|
||||
name,
|
||||
class: `mask ${mask}`,
|
||||
checked: () => typeof value === "function" ? value() === starValue : value === starValue,
|
||||
onchange: () => {
|
||||
if (onchange) onchange(starValue);
|
||||
else if (typeof value === "function") value(starValue);
|
||||
}
|
||||
});
|
||||
}));
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
// components/Skeleton.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Skeleton = (props) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `skeleton ${className || ''}`.trim()
|
||||
});
|
||||
};
|
||||
|
||||
export const SkeletonText = (props) => {
|
||||
const { class: className, lines = 3, ...rest } = props;
|
||||
return Tag("div", { ...rest, class: "space-y-2" },
|
||||
Array.from({ length: lines }, (_, i) =>
|
||||
Tag("div", { class: `skeleton h-4 w-full ${className || ''}`.trim() })
|
||||
)
|
||||
);
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
// components/Stack.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Stack = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `stack ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
// components/Stat.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Stat = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `stat ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
// components/Steps.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Steps = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("ul", {
|
||||
...rest,
|
||||
class: `steps ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
|
||||
export const Step = (props, children) => {
|
||||
const { class: className, dataContent, ...rest } = props;
|
||||
return Tag("li", {
|
||||
...rest,
|
||||
class: `step ${className || ''}`.trim(),
|
||||
"data-content": dataContent
|
||||
}, children);
|
||||
};
|
||||
@@ -1,21 +0,0 @@
|
||||
// components/Swap.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Swap = (props) => {
|
||||
const { class: className, value, on, off, ...rest } = props;
|
||||
|
||||
return Tag("label", {
|
||||
...rest,
|
||||
class: `swap ${className || ''}`.trim()
|
||||
}, [
|
||||
Tag("input", {
|
||||
type: "checkbox",
|
||||
checked: () => typeof value === "function" ? value() : value,
|
||||
onchange: (e) => {
|
||||
if (typeof value === "function") value(e.target.checked);
|
||||
}
|
||||
}),
|
||||
Tag("div", { class: "swap-on" }, on),
|
||||
Tag("div", { class: "swap-off" }, off)
|
||||
]);
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
// components/Table.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Table = (props, children) => {
|
||||
const { class: className, ...rest } = props;
|
||||
return Tag("table", {
|
||||
...rest,
|
||||
class: `table ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,75 +0,0 @@
|
||||
// components/Tabs.js
|
||||
import { Tag, $, Watch } from "sigpro";
|
||||
|
||||
export const Tabs = (props) => {
|
||||
const { items, class: className, onTabClose, ...rest } = props;
|
||||
const itemsSignal = typeof items === "function" ? items : () => items || [];
|
||||
const activeIndex = $(0);
|
||||
|
||||
Watch(() => {
|
||||
const list = itemsSignal();
|
||||
const idx = list.findIndex(it => {
|
||||
const active = it.active;
|
||||
return typeof active === "function" ? active() : active;
|
||||
});
|
||||
if (idx !== -1 && activeIndex() !== idx) activeIndex(idx);
|
||||
});
|
||||
|
||||
const removeTab = (idx, item) => {
|
||||
item.onClose?.();
|
||||
onTabClose?.(item, idx);
|
||||
const current = itemsSignal();
|
||||
if (typeof items !== "function" || items._isComputed) return;
|
||||
const newItems = current.filter((_, i) => i !== idx);
|
||||
items(newItems);
|
||||
if (newItems.length) {
|
||||
let newIdx = activeIndex();
|
||||
if (idx < newIdx) newIdx--;
|
||||
else if (idx === newIdx) newIdx = Math.min(newIdx, newItems.length - 1);
|
||||
activeIndex(newIdx);
|
||||
}
|
||||
};
|
||||
|
||||
return Tag("div", { ...rest, class: `tabs ${className || ''}`.trim() }, () => {
|
||||
const list = itemsSignal();
|
||||
const elements = [];
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const item = list[i];
|
||||
const label = typeof item.label === "function" ? item.label() : item.label;
|
||||
const closable = typeof item.closable === "function" ? item.closable() : item.closable;
|
||||
|
||||
const btnContent = closable
|
||||
? Tag("span", { class: "flex items-center" }, [
|
||||
label,
|
||||
Tag("span", {
|
||||
class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
|
||||
onclick: (e) => { e.stopPropagation(); removeTab(i, item); }
|
||||
})
|
||||
])
|
||||
: label;
|
||||
|
||||
const tabBtn = Tag("button", {
|
||||
class: () => `tab ${activeIndex() === i ? 'tab-active' : ''}`,
|
||||
onclick: (e) => {
|
||||
e.preventDefault();
|
||||
const disabled = typeof item.disabled === "function" ? item.disabled() : item.disabled;
|
||||
if (!disabled) {
|
||||
item.onclick?.();
|
||||
activeIndex(i);
|
||||
}
|
||||
}
|
||||
}, btnContent);
|
||||
|
||||
elements.push(item.tip ? Tag("div", { class: "tooltip", "data-tip": item.tip }, tabBtn) : tabBtn);
|
||||
|
||||
const content = typeof item.content === "function" ? item.content() : item.content;
|
||||
elements.push(
|
||||
Tag("div", {
|
||||
class: "tab-content bg-base-100 border-base-300 p-6",
|
||||
style: () => `display: ${activeIndex() === i ? 'block' : 'none'}`
|
||||
}, content)
|
||||
);
|
||||
}
|
||||
return elements;
|
||||
});
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
// components/TextRotate.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const TextRotate = (props) => {
|
||||
const { class: className, words, ...rest } = props;
|
||||
|
||||
const wordsArray = Array.isArray(words)
|
||||
? words
|
||||
: (typeof words === 'string' ? words.split(',') : []);
|
||||
|
||||
return Tag("span", {
|
||||
...rest,
|
||||
class: `text-rotate ${className || ''}`.trim()
|
||||
}, [
|
||||
Tag("span", {},
|
||||
wordsArray.map(word => Tag("span", {}, word))
|
||||
)
|
||||
]);
|
||||
};
|
||||
@@ -1,10 +0,0 @@
|
||||
// components/Timeline.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Timeline = (props, children) => {
|
||||
const { class: className, vertical = true, compact = false, ...rest } = props;
|
||||
return Tag("ul", {
|
||||
...rest,
|
||||
class: `timeline ${vertical ? 'timeline-vertical' : 'timeline-horizontal'} ${compact ? 'timeline-compact' : ''} ${className || ''}`.trim()
|
||||
}, children);
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
// components/Toast.js
|
||||
import { Tag, Mount } from "sigpro";
|
||||
|
||||
export const Toast = (message, type = "alert-success", duration = 3500) => {
|
||||
let container = document.getElementById("sigpro-toast-container");
|
||||
|
||||
if (!container) {
|
||||
container = Tag("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 = Tag("div", { style: "display: contents" });
|
||||
container.appendChild(toastHost);
|
||||
|
||||
let timeoutId;
|
||||
|
||||
const close = () => {
|
||||
clearTimeout(timeoutId);
|
||||
const el = toastHost.firstElementChild;
|
||||
if (el && !el.classList.contains("opacity-0")) {
|
||||
el.classList.add("translate-x-full", "opacity-0");
|
||||
setTimeout(() => {
|
||||
instance.destroy();
|
||||
toastHost.remove();
|
||||
if (!container.hasChildNodes()) container.remove();
|
||||
}, 300);
|
||||
} else {
|
||||
instance.destroy();
|
||||
toastHost.remove();
|
||||
}
|
||||
};
|
||||
|
||||
const ToastComponent = () => {
|
||||
const closeIcon = Tag("span", { class: "icon-[lucide--x]" });
|
||||
const closeBtn = Tag("button", {
|
||||
class: "btn btn-xs btn-circle btn-ghost",
|
||||
onclick: close
|
||||
}, closeIcon);
|
||||
|
||||
const alertDiv = Tag("div", {
|
||||
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`
|
||||
}, [
|
||||
Tag("span", {}, typeof message === "function" ? message() : message),
|
||||
closeBtn
|
||||
]);
|
||||
|
||||
requestAnimationFrame(() => alertDiv.classList.remove("translate-x-10", "opacity-0"));
|
||||
return alertDiv;
|
||||
};
|
||||
|
||||
const instance = Mount(ToastComponent, toastHost);
|
||||
|
||||
if (duration > 0) {
|
||||
timeoutId = setTimeout(close, duration);
|
||||
}
|
||||
|
||||
return close;
|
||||
};
|
||||
@@ -1,19 +0,0 @@
|
||||
// components/Toggle.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Toggle = (props) => {
|
||||
const { class: className, label, ...rest } = props;
|
||||
|
||||
const inputEl = Tag("input", {
|
||||
...rest,
|
||||
type: "checkbox",
|
||||
class: `toggle ${className || ''}`.trim()
|
||||
});
|
||||
|
||||
if (!label) return inputEl;
|
||||
|
||||
return Tag("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||
inputEl,
|
||||
Tag("span", { class: "label-text" }, label)
|
||||
]);
|
||||
};
|
||||
@@ -1,11 +0,0 @@
|
||||
// components/Tooltip.js
|
||||
import { Tag } from "sigpro";
|
||||
|
||||
export const Tooltip = (props, children) => {
|
||||
const { class: className, tip, ...rest } = props;
|
||||
return Tag("div", {
|
||||
...rest,
|
||||
class: `tooltip ${className || ''}`.trim(),
|
||||
"data-tip": tip
|
||||
}, children);
|
||||
};
|
||||
426
src/sigpro.css
426
src/sigpro.css
@@ -1,426 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "daisyui";
|
||||
@plugin "@iconify/tailwind4";
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "light";
|
||||
default: true;
|
||||
prefersdark: false;
|
||||
color-scheme: "light";
|
||||
--color-base-100: oklch(100% 0 0);
|
||||
--color-base-200: oklch(98% 0 0);
|
||||
--color-base-300: oklch(92% 0 0);
|
||||
--color-base-content: oklch(25% 0.006 285);
|
||||
--color-primary: oklch(25% 0.006 285);
|
||||
--color-primary-content: oklch(98% 0 0);
|
||||
--color-secondary: oklch(55% 0.046 257.417);
|
||||
--color-secondary-content: oklch(98% 0 0);
|
||||
--color-accent: oklch(96% 0 0);
|
||||
--color-accent-content: oklch(25% 0.006 285);
|
||||
--color-neutral: oklch(14% 0.005 285.823);
|
||||
--color-neutral-content: oklch(92% 0.004 286.32);
|
||||
--color-info: oklch(74% 0.16 232);
|
||||
--color-success: oklch(62% 0.17 163);
|
||||
--color-warning: oklch(82% 0.18 84);
|
||||
--color-error: oklch(60% 0.25 27);
|
||||
--radius-selector: 0.5rem;
|
||||
--radius-field: 0.4rem;
|
||||
--radius-box: 0.5rem;
|
||||
--border: 1px;
|
||||
}
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "dark";
|
||||
default: false;
|
||||
prefersdark: true;
|
||||
color-scheme: "dark";
|
||||
--color-base-100: oklch(15% 0.005 285.823);
|
||||
--color-base-200: oklch(20% 0.005 285.823);
|
||||
--color-base-300: oklch(30% 0.005 285.823);
|
||||
--color-base-content: oklch(92% 0.004 286.32);
|
||||
--color-primary: oklch(98% 0 0);
|
||||
--color-primary-content: oklch(15% 0 0);
|
||||
--color-secondary: oklch(65% 0.046 257.417);
|
||||
--color-secondary-content: oklch(15% 0.005 285.823);
|
||||
--color-accent: oklch(25% 0 0);
|
||||
--color-accent-content: oklch(98% 0 0);
|
||||
--color-neutral: oklch(92% 0.004 286.32);
|
||||
--color-neutral-content: oklch(14% 0.005 285.823);
|
||||
--color-info: oklch(70% 0.1 230);
|
||||
--color-success: oklch(65% 0.15 160);
|
||||
--color-warning: oklch(85% 0.15 90);
|
||||
--color-error: oklch(55% 0.2 27);
|
||||
--radius-selector: 0.5rem;
|
||||
--radius-field: 0.4rem;
|
||||
--radius-box: 0.5rem;
|
||||
--border: 1px;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Agrupamos los selectores normales de CSS */
|
||||
.input,
|
||||
.select,
|
||||
.textarea {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
outline: 1px solid transparent !important;
|
||||
outline-offset: 1px !important;
|
||||
}
|
||||
|
||||
&:hover:not(:focus) {
|
||||
background-color: oklch(from var(--color-base-100) calc(l - 0.03) c h);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
--focus-color: var(--color-primary);
|
||||
|
||||
/* Selectores que detectan la variante de color sin importar el prefijo */
|
||||
&[class*="-secondary"] {
|
||||
--focus-color: var(--color-secondary);
|
||||
}
|
||||
&[class*="-accent"] {
|
||||
--focus-color: var(--color-accent);
|
||||
}
|
||||
&[class*="-neutral"] {
|
||||
--focus-color: var(--color-neutral);
|
||||
}
|
||||
&[class*="-ghost"] {
|
||||
--focus-color: var(--color-base-content);
|
||||
}
|
||||
&[class*="-info"] {
|
||||
--focus-color: var(--color-info);
|
||||
}
|
||||
&[class*="-success"] {
|
||||
--focus-color: var(--color-success);
|
||||
}
|
||||
&[class*="-warning"] {
|
||||
--focus-color: var(--color-warning);
|
||||
}
|
||||
&[class*="-error"] {
|
||||
--focus-color: var(--color-error);
|
||||
}
|
||||
|
||||
background-color: oklch(from var(--focus-color) l c h / 0.05);
|
||||
border-color: var(--focus-color);
|
||||
box-shadow: 0 0 0 4px oklch(from var(--focus-color) l c h / 0.25);
|
||||
|
||||
&[class*="-ghost"] {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.floating-label span {
|
||||
color: oklch(30% 0.01 260); /* Gris más oscuro (30% es más oscuro que 45%) */
|
||||
font-size: 1.1rem; /* text-base: más grande que 0.875rem */
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.floating-label:focus-within span {
|
||||
color: oklch(25% 0.02 260); /* Aún más oscuro al enfocar */
|
||||
font-size: 1.1rem; /* Mantiene el mismo tamaño */
|
||||
}
|
||||
|
||||
.floating-label:has(input:not(:placeholder-shown)) span {
|
||||
color: oklch(28% 0.01 260); /* Gris oscuro cuando tiene valor */
|
||||
font-size: 1.1rem; /* Mantiene el mismo tamaño */
|
||||
}
|
||||
|
||||
.tab-content-inner {
|
||||
animation: tabFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
@keyframes tabFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
button {
|
||||
@apply btn;
|
||||
}
|
||||
|
||||
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not(
|
||||
[type="color"]
|
||||
),
|
||||
select,
|
||||
textarea {
|
||||
@apply input;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
@apply radio;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
@apply checkbox;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
@apply range;
|
||||
}
|
||||
|
||||
select {
|
||||
@apply select;
|
||||
}
|
||||
|
||||
textarea {
|
||||
@apply textarea;
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply divider;
|
||||
}
|
||||
|
||||
progress {
|
||||
@apply progress;
|
||||
}
|
||||
|
||||
table {
|
||||
@apply table;
|
||||
}
|
||||
|
||||
dialog {
|
||||
@apply modal;
|
||||
}
|
||||
|
||||
[data-tip] {
|
||||
@apply tooltip;
|
||||
}
|
||||
|
||||
nav {
|
||||
@apply navbar;
|
||||
}
|
||||
|
||||
[role="alert"] {
|
||||
@apply alert;
|
||||
}
|
||||
}
|
||||
|
||||
/* sigpro-ui daisyUI classes - extracted from components */
|
||||
|
||||
/* join join-vertical lg:join-horizontal divider divider-horizontal validator validator-hint glass */
|
||||
|
||||
/* Accordion */
|
||||
/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
|
||||
|
||||
/* Alert */
|
||||
/* .alert, .alert-info, .alert-success, .alert-warning, .alert-error, .alert-soft, .alert-outline, .alert-dash, */
|
||||
/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
|
||||
|
||||
/* Autocomplete */
|
||||
/* .menu, .menu-dropdown, .menu-dropdown-show, */
|
||||
|
||||
/* Badge */
|
||||
/* .badge, .badge-primary, .badge-secondary, .badge-accent, .badge-info, .badge-success, .badge-warning, .badge-error, .badge-outline, .badge-soft, .badge-dash, .badge-xs, .badge-sm, .badge-md, .badge-lg, */
|
||||
|
||||
/* Button */
|
||||
/* .btn, .btn-primary, .btn-secondary, .btn-accent, .btn-ghost, .btn-info, .btn-success, .btn-warning, .btn-error, .btn-neutral, .btn-xs, .btn-sm, .btn-md, .btn-lg, .btn-xl, .btn-outline, .btn-soft, .btn-dash, .btn-link, .btn-circle, .btn-square, .btn-wide, .btn-block, .btn-active, .btn-disabled, */
|
||||
|
||||
/* Checkbox & Toggle */
|
||||
/* .checkbox, .checkbox-primary, .checkbox-secondary, .checkbox-accent, .checkbox-info, .checkbox-success, .checkbox-warning, .checkbox-error, .checkbox-xs, .checkbox-sm, .checkbox-md, .checkbox-lg, .toggle, .toggle-primary, .toggle-secondary, .toggle-accent, .toggle-xs, .toggle-sm, .toggle-md, .toggle-lg, */
|
||||
|
||||
/* Colorpicker */
|
||||
|
||||
/* Datepicker */
|
||||
/* .icon-[lucide--calendar], .icon-[lucide--chevrons-left], .icon-[lucide--chevron-left], .icon-[lucide--chevron-right], .icon-[lucide--chevrons-right], */
|
||||
|
||||
/* Drawer */
|
||||
/* .drawer, .drawer-toggle, .drawer-content, .drawer-side, .drawer-overlay, */
|
||||
|
||||
/* Dropdown */
|
||||
/* .dropdown, .dropdown-content, .dropdown-end, .dropdown-top, .dropdown-bottom, */
|
||||
|
||||
/* Fab */
|
||||
/* .fab, */
|
||||
|
||||
/* Fieldset */
|
||||
/* .fieldset, .fieldset-legend, */
|
||||
|
||||
/* Fileinput */
|
||||
/* .icon-[lucide--upload], .icon-[lucide--x], */
|
||||
|
||||
/* Indicator */
|
||||
/* .indicator, .indicator-item, */
|
||||
|
||||
/* Input */
|
||||
/* .input, .input-bordered, .input-ghost, .input-primary, .input-secondary, .input-accent, .input-info, .input-success, .input-warning, .input-error, .input-xs, .input-sm, .input-md, .input-lg, .floating-label, */
|
||||
/* .icon-[lucide--text], .icon-[lucide--lock], .icon-[lucide--calendar], .icon-[lucide--hash], .icon-[lucide--mail], .icon-[lucide--search], .icon-[lucide--phone], .icon-[lucide--link], .icon-[lucide--eye-off], .icon-[lucide--eye], */
|
||||
|
||||
/* List */
|
||||
/* .list, .list-row, .list-bullet, .list-image, .list-none, */
|
||||
|
||||
/* Mask */
|
||||
/* .mask, .mask-star, .mask-star-2, .mask-heart, .mask-circle, */
|
||||
|
||||
/* Menu */
|
||||
/* .menu, .menu-dropdown, .menu-dropdown-show, */
|
||||
|
||||
/* Modal */
|
||||
/* .modal, .modal-box, .modal-action, .modal-backdrop, .modal-open, .modal-middle, .modal-top, .modal-bottom, */
|
||||
|
||||
/* Navbar */
|
||||
/* .navbar, .navbar-start, .navbar-center, .navbar-end, */
|
||||
|
||||
/* Radio */
|
||||
/* .radio, .radio-primary, .radio-secondary, .radio-accent, .radio-info, .radio-success, .radio-warning, .radio-error, .radio-xs, .radio-sm, .radio-md, .radio-lg, */
|
||||
|
||||
/* Range */
|
||||
/* .range, .range-primary, .range-secondary, .range-accent, .range-info, .range-success, .range-warning, .range-error, .range-xs, .range-sm, .range-md, .range-lg, */
|
||||
|
||||
/* Rating */
|
||||
/* .rating, .rating-half, .rating-hidden, */
|
||||
|
||||
/* Select */
|
||||
/* .select, .select-bordered, .select-primary, .select-secondary, .select-accent, .select-info, .select-success, .select-warning, .select-error, .select-xs, .select-sm, .select-md, .select-lg, */
|
||||
|
||||
/* Stack */
|
||||
/* .stack, .stack-top, .stack-bottom, .stack-start, .stack-end, */
|
||||
|
||||
/* Stat */
|
||||
/* .stat, .stat-figure, .stat-title, .stat-value, .stat-desc, */
|
||||
|
||||
/* Swap */
|
||||
/* .swap, .swap-on, .swap-off, .swap-active, .swap-rotate, .swap-flip, .swap-indeterminate, */
|
||||
|
||||
/* Table */
|
||||
/* .table, .table-zebra, .table-pin-rows, .table-pin-cols, .table-xs, .table-sm, .table-md, .table-lg, */
|
||||
|
||||
/* Tabs */
|
||||
/* .tabs, .tabs-box, .tabs-lift, .tabs-border, .tab, .tab-content, */
|
||||
/* .icon-[lucide--x], */
|
||||
|
||||
/* Timeline */
|
||||
/* .timeline, .timeline-vertical, .timeline-horizontal, .timeline-compact, .timeline-start, .timeline-middle, .timeline-end, .timeline-box, */
|
||||
/* .icon-[lucide--info], .icon-[lucide--check-circle], .icon-[lucide--alert-triangle], .icon-[lucide--alert-circle], */
|
||||
|
||||
/* Toast */
|
||||
/* .icon-[lucide--x], */
|
||||
|
||||
/* Tooltip */
|
||||
/* .tooltip, .tooltip-top, .tooltip-bottom, .tooltip-left, .tooltip-right, .tooltip-primary, .tooltip-secondary, .tooltip-accent, .tooltip-info, .tooltip-success, .tooltip-warning, .tooltip-error, .tooltip-open, */
|
||||
|
||||
/* ===== Tailwind ===== */
|
||||
|
||||
/* Background */
|
||||
/* .bg-base-100, .bg-base-200, .bg-base-content, .bg-primary, .bg-primary/10, .bg-secondary, */
|
||||
|
||||
/* Border */
|
||||
/* .border, .border-2, .border-base-300, .border-base-content/20, .border-dashed, .border-primary, */
|
||||
|
||||
/* Bottom */
|
||||
/* .bottom-6, */
|
||||
|
||||
/* Cursor */
|
||||
/* .cursor-pointer, */
|
||||
|
||||
/* Duration */
|
||||
/* .duration-200, .duration-300, */
|
||||
|
||||
/* Flex */
|
||||
/* .flex, .flex-1, .flex-col, .flex-col-reverse, */
|
||||
|
||||
/* Font */
|
||||
/* .font-black, .font-bold, .font-medium, */
|
||||
|
||||
/* Grid */
|
||||
/* .grid, .grid-cols-7, .grid-cols-8, */
|
||||
|
||||
/* Height */
|
||||
/* .h-12, .min-h-full, */
|
||||
|
||||
/* Inset */
|
||||
/* .inset-0, */
|
||||
|
||||
/* Items */
|
||||
/* .items-center, .items-end, */
|
||||
|
||||
/* Justify */
|
||||
/* .justify-between, .justify-start, */
|
||||
|
||||
/* Left */
|
||||
/* .left-0, */
|
||||
|
||||
/* Loading */
|
||||
/* .loading, .loading-spinner, */
|
||||
|
||||
/* Max Height */
|
||||
/* .max-h-60, */
|
||||
|
||||
/* Opacity */
|
||||
/* .opacity-0, .opacity-40, .opacity-50, .opacity-60, .opacity-70, */
|
||||
|
||||
/* Overflow */
|
||||
/* .overflow-x-auto, .overflow-y-auto, */
|
||||
|
||||
/* Padding */
|
||||
/* .p-2, .p-3, .p-4, .p-6, */
|
||||
|
||||
/* Pointer events */
|
||||
/* .pointer-events-auto, .pointer-events-none, */
|
||||
|
||||
/* Position */
|
||||
/* .absolute, .fixed, .relative, */
|
||||
|
||||
/* Right */
|
||||
/* .right-0, */
|
||||
|
||||
/* Rounded */
|
||||
/* .rounded-box, .rounded-lg, */
|
||||
|
||||
/* Shadow */
|
||||
/* .shadow-2xl, .shadow-lg, .shadow-sm, .shadow-xl, */
|
||||
|
||||
/* Shrink */
|
||||
/* .shrink-0, */
|
||||
|
||||
/* Space */
|
||||
/* .space-y-1, */
|
||||
|
||||
/* Spacing */
|
||||
/* .gap-1, .gap-2, .gap-3, */
|
||||
|
||||
/* Text */
|
||||
/* .text-center, .text-error, .text-left, .text-lg, .text-primary-content, .text-right, .text-secondary, .text-sm, .text-xl, .text-xs, */
|
||||
|
||||
/* Text custom */
|
||||
/* .text-[10px], */
|
||||
|
||||
/* Top */
|
||||
/* .top-0, */
|
||||
|
||||
/* Transform */
|
||||
/* .translate-x-10, */
|
||||
|
||||
/* Transition */
|
||||
/* .transition-all, */
|
||||
|
||||
/* Truncate */
|
||||
/* .truncate, */
|
||||
|
||||
/* Width */
|
||||
/* .w-full, .w-52, .w-64, .w-80, */
|
||||
|
||||
/* Z-index */
|
||||
/* .z-100, .z-50, .z-90, .z-[100], .z-[9999], */
|
||||
|
||||
/* Tailwind variants */
|
||||
/* .hover:bg-base-200, */
|
||||
|
||||
/* Misc */
|
||||
/* .active, .hr, .label, .label-text, */
|
||||
|
||||
/* Icons */
|
||||
/* .icon-[lucide--heart] */
|
||||
62
src/utils.js
62
src/utils.js
@@ -1,62 +0,0 @@
|
||||
// core/utils.js
|
||||
import { $, Tag } from "sigpro";
|
||||
|
||||
export const val = t => typeof t === "function" ? t() : t;
|
||||
|
||||
export const ui = (baseClass, additionalClassOrFn) =>
|
||||
typeof additionalClassOrFn === "function"
|
||||
? () => `${baseClass} ${additionalClassOrFn() || ""}`.trim()
|
||||
: `${baseClass} ${additionalClassOrFn || ""}`.trim();
|
||||
|
||||
export const getIcon = (icon) => {
|
||||
if (!icon) return null;
|
||||
|
||||
if (typeof icon === 'function') {
|
||||
return Tag("span", { class: "mr-1" }, icon());
|
||||
}
|
||||
|
||||
if (typeof icon === 'object') {
|
||||
return Tag("span", { class: "mr-1" }, icon);
|
||||
}
|
||||
|
||||
if (typeof icon === 'string') {
|
||||
const parts = icon.trim().split(/\s+/);
|
||||
const hasRight = parts[parts.length - 1] === 'right';
|
||||
const iconClass = hasRight ? parts.slice(0, -1).join(' ') : icon;
|
||||
const spacing = hasRight ? 'ml-1' : 'mr-1';
|
||||
|
||||
if (iconClass && !iconClass.startsWith('icon-[') && !iconClass.includes('--')) {
|
||||
return Tag("span", { class: spacing }, iconClass);
|
||||
}
|
||||
|
||||
return Tag("span", { class: `${iconClass} ${spacing}`.trim() });
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export const i18n = {
|
||||
es: {
|
||||
close: "Cerrar",
|
||||
confirm: "Confirmar",
|
||||
cancel: "Cancelar",
|
||||
search: "Buscar...",
|
||||
loading: "Cargando...",
|
||||
nodata: "Sin datos"
|
||||
},
|
||||
en: {
|
||||
close: "Close",
|
||||
confirm: "Confirm",
|
||||
cancel: "Cancel",
|
||||
search: "Search...",
|
||||
loading: "Loading...",
|
||||
nodata: "No data"
|
||||
}
|
||||
};
|
||||
|
||||
export const currentLocale = $("es");
|
||||
|
||||
|
||||
// Export design
|
||||
export const Locale = t => currentLocale(t);
|
||||
export const tt = t => () => i18n[currentLocale()][t] || t;
|
||||
Reference in New Issue
Block a user