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

Updateing Docs

Browse Source
This commit is contained in:
natxocc
2026-04-02 19:31:39 +02:00
parent 5a77deb442
commit f0c710f8c2
138 changed files with 25729 additions and 3918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Datepicker.js
View File

@@ -1,17 +1,23 @@
// components/Datepicker.js
import { $, $html, $if } from "sigpro";
import { val } from "../core/utils.js";
import {
iconCalendar,
iconLeft,
iconRight,
iconLLeft,
iconRRight
} from "../core/icons.js";
import { val, ui, getIcon } from "../core/utils.js";
import { Input } from "./Input.js";
/** DATEPICKER */
/**
* Datepicker component
*
* daisyUI classes used:
* - input, input-bordered, input-primary
* - btn, btn-ghost, btn-xs, btn-circle
* - bg-base-100, border, border-base-300, shadow-2xl, rounded-box
* - absolute, left-0, mt-2, p-4, w-80, z-100, z-90
* - grid, grid-cols-7, gap-1, text-center
* - ring, ring-primary, ring-inset, font-black
* - range, range-xs
* - tooltip, tooltip-top, tooltip-bottom
*/
export const Datepicker = (props) => {
const { value, range, label, placeholder, hour = false, ...rest } = props;
const { class: className, value, range, label, placeholder, hour = false, ...rest } = props;
const isOpen = $(false);
const internalDate = $(new Date());
@@ -113,13 +119,13 @@ export const Datepicker = (props) => {
]);
};
return $html("div", { class: "relative w-full" }, [
return $html("div", { class: ui('relative w-full', className) }, [
Input({
label,
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
value: displayValue,
readonly: true,
icon: $html("img", { src: iconCalendar, class: "opacity-40" }),
icon: getIcon("icon-[lucide--calendar]"),
onclick: (e) => {
e.stopPropagation();
isOpen(!isOpen());
@@ -138,10 +144,10 @@ export const Datepicker = (props) => {
$html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
$html("div", { class: "flex gap-0.5" }, [
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
$html("img", { src: iconLLeft, class: "opacity-40" })
getIcon("icon-[lucide--chevrons-left]")
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
$html("img", { src: iconLeft, class: "opacity-40" })
getIcon("icon-[lucide--chevron-left]")
),
]),
$html("span", { class: "font-bold uppercase flex-1 text-center" }, [
@@ -149,10 +155,10 @@ export const Datepicker = (props) => {
]),
$html("div", { class: "flex gap-0.5" }, [
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
$html("img", { src: iconRight, class: "opacity-40" })
getIcon("icon-[lucide--chevron-right]")
),
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
$html("img", { src: iconRRight, class: "opacity-40" })
getIcon("icon-[lucide--chevrons-right]")
),
]),
]),
@@ -249,4 +255,4 @@ export const Datepicker = (props) => {
$if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
]);
};
};