new structure
This commit is contained in:
244
packages/sigproui/app.js
Normal file
244
packages/sigproui/app.js
Normal file
@@ -0,0 +1,244 @@
|
||||
/**
|
||||
* UI Demo/Test - Para probar componentes localmente sin hacer release
|
||||
*
|
||||
* Ejecutar:
|
||||
* 1. Crear un archivo index.html que importe este archivo
|
||||
* 2. O usar con Vite: bun add -d vite && bun vite UI/app.js
|
||||
*
|
||||
* Alternativamente, simplemente copiar las partes que necesitas a tu proyecto
|
||||
*/
|
||||
import { $, html, effect } from "../../index.js";
|
||||
import { Button, Input, Card, Drawer, Menu, Dropdown, Fab, Dialog, Loading } from "./index.js";
|
||||
|
||||
// Importar la función helper de loading
|
||||
import { loading } from "./components/Loading.js";
|
||||
|
||||
// Estado para la demo
|
||||
const state = {
|
||||
inputValue: $(""),
|
||||
checkboxValue: $(false),
|
||||
radioValue: $("option1"),
|
||||
rangeValue: $(50),
|
||||
showDialog: $(false),
|
||||
openDrawer: $(false),
|
||||
};
|
||||
|
||||
// Menú de navegación
|
||||
const menuItems = [
|
||||
{ label: "Home", icon: "icon-[lucide--home]", href: "#/home" },
|
||||
{ label: "About", icon: "icon-[lucide--info]", href: "#/about" },
|
||||
{
|
||||
label: "Components",
|
||||
icon: "icon-[lucide--box]",
|
||||
open: false,
|
||||
sub: [
|
||||
{ label: "Button", href: "#/button" },
|
||||
{ label: "Input", href: "#/input" },
|
||||
{ label: "Card", href: "#/card" },
|
||||
{ label: "Forms", href: "#/forms" },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
// Demo page principal
|
||||
export default function App() {
|
||||
effect(() => {
|
||||
console.log("Input value:", state.inputValue());
|
||||
});
|
||||
|
||||
return html`
|
||||
<div class="min-h-screen bg-base-100 text-base-content p-4">
|
||||
<header class="navbar bg-base-200 shadow-xl px-4 mb-6 rounded-lg">
|
||||
<div class="flex-1">
|
||||
<span class="text-xl font-bold">SigProUI Test</span>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<c-button @click=${() => state.openDrawer(!state.openDrawer())}>
|
||||
<span class="icon-[lucide--menu]"></span>
|
||||
</c-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<c-drawer .open=${state.openDrawer}>
|
||||
<c-menu .items=${menuItems}></c-menu>
|
||||
</c-drawer>
|
||||
|
||||
<main class="max-w-4xl mx-auto space-y-8">
|
||||
|
||||
<!-- Buttons Section -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">Buttons</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<c-button @click=${() => console.log("Primary clicked")}>Primary</c-button>
|
||||
<c-button ui="btn-secondary">Secondary</c-button>
|
||||
<c-button ui="btn-accent">Accent</c-button>
|
||||
<c-button ui="btn-ghost">Ghost</c-button>
|
||||
<c-button ui="btn-link">Link</c-button>
|
||||
<c-button .loading=${true}>Loading</c-button>
|
||||
<c-button .disabled=${true}>Disabled</c-button>
|
||||
<c-button .badge=${"5"}>With Badge</c-button>
|
||||
<c-button .tooltip=${"I'm a tooltip!"}>With Tooltip</c-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Input Section -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">Input</h2>
|
||||
<div class="flex flex-col gap-4 max-w-md">
|
||||
<c-input
|
||||
label="Username"
|
||||
.value=${state.inputValue}
|
||||
@input=${(v) => state.inputValue(v)}
|
||||
placeholder="Enter username"
|
||||
></c-input>
|
||||
|
||||
<c-input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="email@example.com"
|
||||
icon="icon-[lucide--mail]"
|
||||
></c-input>
|
||||
|
||||
<c-input
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
icon="icon-[lucide--lock]"
|
||||
></c-input>
|
||||
</div>
|
||||
<p class="text-sm opacity-70">Current input value: "${state.inputValue()}"</p>
|
||||
</section>
|
||||
|
||||
<!-- Card Section -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">Card</h2>
|
||||
<c-card bordered>
|
||||
<span slot="title">Card Title</span>
|
||||
<p>This is a basic card with some content.</p>
|
||||
<div slot="actions">
|
||||
<c-button ui="btn-sm btn-primary">Accept</c-button>
|
||||
<c-button ui="btn-sm">Cancel</c-button>
|
||||
</div>
|
||||
</c-card>
|
||||
|
||||
<c-card .img=${"https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"} bordered>
|
||||
<span slot="title">Card with Image</span>
|
||||
<p>Beautiful flower image</p>
|
||||
<div slot="actions">
|
||||
<c-button ui="btn-primary">Buy Now</c-button>
|
||||
</div>
|
||||
</c-card>
|
||||
</section>
|
||||
|
||||
<!-- Forms Section -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">Form Controls</h2>
|
||||
<div class="flex flex-wrap gap-6">
|
||||
|
||||
<c-check
|
||||
.checked=${state.checkboxValue}
|
||||
label="Accept terms"
|
||||
@change=${(v) => state.checkboxValue(v)}
|
||||
></c-check>
|
||||
<p class="text-sm">Checkbox value: ${() => state.checkboxValue() ? "checked" : "unchecked"}</p>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<c-radio
|
||||
name="radio-demo"
|
||||
.checked=${() => state.radioValue() === "option1"}
|
||||
.value=${"option1"}
|
||||
label="Option 1"
|
||||
@change=${(v) => state.radioValue(v)}
|
||||
></c-radio>
|
||||
<c-radio
|
||||
name="radio-demo"
|
||||
.checked=${() => state.radioValue() === "option2"}
|
||||
.value=${"option2"}
|
||||
label="Option 2"
|
||||
@change=${(v) => state.radioValue(v)}
|
||||
></c-radio>
|
||||
<c-radio
|
||||
name="radio-demo"
|
||||
.checked=${() => state.radioValue() === "option3"}
|
||||
.value=${"option3"}
|
||||
label="Option 3"
|
||||
@change=${(v) => state.radioValue(v)}
|
||||
></c-radio>
|
||||
</div>
|
||||
<p class="text-sm">Radio value: "${state.radioValue()}"</p>
|
||||
|
||||
<div class="w-full max-w-xs">
|
||||
<c-range
|
||||
.value=${state.rangeValue}
|
||||
min="0" max="100"
|
||||
@change=${(v) => state.rangeValue(Number(v))}
|
||||
></c-range>
|
||||
<p class="text-sm">Range value: ${state.rangeValue()}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Loading Section -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">Loading</h2>
|
||||
<div class="flex gap-4">
|
||||
<c-button @click=${() => loading(true, "Loading...")}>
|
||||
Show Loading
|
||||
</c-button>
|
||||
<c-button @click=${() => loading(false)}>
|
||||
Hide Loading
|
||||
</c-button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Dialog Section -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">Dialog</h2>
|
||||
<c-button @click=${() => state.showDialog(true)}>Open Dialog</c-button>
|
||||
|
||||
<c-dialog .open=${state.showDialog} @close=${() => state.showDialog(false)}>
|
||||
<span slot="title" class="font-bold text-lg">Confirm Action</span>
|
||||
<p>Are you sure you want to proceed?</p>
|
||||
<div slot="buttons" class="flex gap-2 justify-end">
|
||||
<c-button ui="btn-ghost" @click=${() => state.showDialog(false)}>Cancel</c-button>
|
||||
<c-button ui="btn-primary" @click=${() => { console.log("Confirmed!"); state.showDialog(false); }}>Confirm</c-button>
|
||||
</div>
|
||||
</c-dialog>
|
||||
</section>
|
||||
|
||||
<!-- Dropdown Section -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">Dropdown</h2>
|
||||
<c-dropdown>
|
||||
<c-button slot="trigger">Open Dropdown</c-button>
|
||||
<li><a>Item 1</a></li>
|
||||
<li><a>Item 2</a></li>
|
||||
<li><a>Item 3</a></li>
|
||||
</c-dropdown>
|
||||
</section>
|
||||
|
||||
<!-- FAB Section -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-2xl font-bold">FAB (Floating Action Button)</h2>
|
||||
<c-fab
|
||||
.actions=${[
|
||||
{ label: "Add", icon: "icon-[lucide--plus]", ui: "btn-secondary" },
|
||||
{ label: "Edit", icon: "icon-[lucide--edit]", ui: "btn-accent" },
|
||||
{ label: "Message", icon: "icon-[lucide--message]", ui: "btn-info" },
|
||||
]}
|
||||
></c-fab>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Mount the app
|
||||
if (typeof document !== "undefined") {
|
||||
const root = document.getElementById("app");
|
||||
if (root) {
|
||||
root.appendChild(App());
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user