Update to UMD

This commit is contained in:
2026-03-31 17:23:49 +02:00
parent 881b61b69a
commit 0efb288a93
3 changed files with 3 additions and 129 deletions

View File

@@ -26,17 +26,6 @@ Styled button with full DaisyUI support and reactive states.
<div id="demo-basic"></div>
<script type="module">
import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
const Demo = () => {
return Button({ class: "btn-primary" }, "Click Me");
};
$mount(Demo, "#demo-basic");
</script>
```javascript
Button({ class: "btn-primary" }, "Click Me")
```
@@ -45,27 +34,6 @@ Button({ class: "btn-primary" }, "Click Me")
<div id="demo-loading"></div>
<script type="module">
import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
import { Button } from '../../sigpro-ui/sigpro-ui.js';
const isSaving = $(false);
const Demo = () => {
return Button({
class: "btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
await new Promise(resolve => setTimeout(resolve, 2000));
isSaving(false);
}
}, "Save Changes");
};
$mount(Demo, "#demo-loading");
</script>
```javascript
const isSaving = $(false);
@@ -84,21 +52,6 @@ Button({
<div id="demo-badge"></div>
<script type="module">
import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
const Demo = () => {
return Button({
class: "btn-outline",
badge: "3",
badgeClass: "badge-accent"
}, "Notifications");
};
$mount(Demo, "#demo-badge");
</script>
```javascript
Button({
class: "btn-outline",
@@ -111,20 +64,6 @@ Button({
<div id="demo-tooltip"></div>
<script type="module">
import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
const Demo = () => {
return Button({
class: "btn-ghost",
tooltip: "Delete item"
}, "Delete");
};
$mount(Demo, "#demo-tooltip");
</script>
```javascript
Button({
class: "btn-ghost",
@@ -136,22 +75,6 @@ Button({
<div id="demo-disabled"></div>
<script type="module">
import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
const isDisabled = $(true);
const Demo = () => {
return Button({
class: "btn-primary",
disabled: isDisabled
}, "Submit");
};
$mount(Demo, "#demo-disabled");
</script>
```javascript
const isDisabled = $(true);
@@ -165,29 +88,6 @@ Button({
<div id="demo-variants"></div>
<script type="module">
import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
import { Button, Div } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';
const isLoading = $(false);
const Demo = () => {
return Div({ class: "flex flex-wrap gap-2" }, [
Button({ class: "btn-primary" }, "Primary"),
Button({ class: "btn-secondary" }, "Secondary"),
Button({ class: "btn-accent" }, "Accent"),
Button({ class: "btn-ghost" }, "Ghost"),
Button({ class: "btn-outline" }, "Outline"),
Button({ class: "btn-success", loading: isLoading, onclick: () => {
isLoading(true);
setTimeout(() => isLoading(false), 1500);
} }, "Loading")
]);
};
$mount(Demo, "#demo-variants");
</script>
```javascript
Div({ class: "flex flex-wrap gap-2" }, [
Button({ class: "btn-primary" }, "Primary"),
@@ -198,24 +98,3 @@ Div({ class: "flex flex-wrap gap-2" }, [
])
```
```
## Ventajas de este enfoque:
1. **Ejecución real** - Los ejemplos son interactivos y funcionales
2. **Código visible** - Debajo de cada ejemplo se muestra el código fuente
3. **Aprendizaje visual** - Los usuarios pueden ver y probar los componentes
4. **Reactivo** - Los ejemplos con signals demuestran la reactividad en acción
## Consejos adicionales:
Para mejorar la experiencia, podrías agregar estilos a los contenedores de los ejemplos:
```css
/* En tu HTML, dentro de <style> */
.demo-container {
margin: 1rem 0;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
background: #f8fafc;
}

View File

@@ -39,13 +39,8 @@
};
</script>
<script type="module">
import * as sigpro from "https://cdn.jsdelivr.net/npm/sigpro@latest/+esm";
import { UI } from "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm";
window.sigpro = sigpro;
// const ui = UI("en");
// window.sigproui = ui;
</script>
<script src="https://unpkg.com/sigpro"> </script>
<script src="https://unpkg.com/sigpro-ui"> </script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
</body>