Update to UMD
This commit is contained in:
@@ -26,17 +26,6 @@ Styled button with full DaisyUI support and reactive states.
|
|||||||
|
|
||||||
<div id="demo-basic"></div>
|
<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
|
```javascript
|
||||||
Button({ class: "btn-primary" }, "Click Me")
|
Button({ class: "btn-primary" }, "Click Me")
|
||||||
```
|
```
|
||||||
@@ -45,27 +34,6 @@ Button({ class: "btn-primary" }, "Click Me")
|
|||||||
|
|
||||||
<div id="demo-loading"></div>
|
<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
|
```javascript
|
||||||
const isSaving = $(false);
|
const isSaving = $(false);
|
||||||
|
|
||||||
@@ -84,21 +52,6 @@ Button({
|
|||||||
|
|
||||||
<div id="demo-badge"></div>
|
<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
|
```javascript
|
||||||
Button({
|
Button({
|
||||||
class: "btn-outline",
|
class: "btn-outline",
|
||||||
@@ -111,20 +64,6 @@ Button({
|
|||||||
|
|
||||||
<div id="demo-tooltip"></div>
|
<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
|
```javascript
|
||||||
Button({
|
Button({
|
||||||
class: "btn-ghost",
|
class: "btn-ghost",
|
||||||
@@ -136,22 +75,6 @@ Button({
|
|||||||
|
|
||||||
<div id="demo-disabled"></div>
|
<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
|
```javascript
|
||||||
const isDisabled = $(true);
|
const isDisabled = $(true);
|
||||||
|
|
||||||
@@ -165,29 +88,6 @@ Button({
|
|||||||
|
|
||||||
<div id="demo-variants"></div>
|
<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
|
```javascript
|
||||||
Div({ class: "flex flex-wrap gap-2" }, [
|
Div({ class: "flex flex-wrap gap-2" }, [
|
||||||
Button({ class: "btn-primary" }, "Primary"),
|
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;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -39,13 +39,8 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="module">
|
<script src="https://unpkg.com/sigpro"> </script>
|
||||||
import * as sigpro from "https://cdn.jsdelivr.net/npm/sigpro@latest/+esm";
|
<script src="https://unpkg.com/sigpro-ui"> </script>
|
||||||
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="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></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>
|
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -27,7 +27,7 @@
|
|||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"docs": "bun x serve docs",
|
"docs": "bun x serve docs",
|
||||||
"build": "bun build ./index.js --bundle --external sigpro --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --external sigpro --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
|
"build": "bun build ./index.js --bundle --external sigpro --outfile=./dist/sigpro-ui.js --format=umd --global-name=SigProUI --globals=sigpro=SigProCore && bun build ./index.js --bundle --external sigpro --outfile=./dist/sigpro-ui.min.js --format=umd --global-name=SigProUI --globals=sigpro=SigProCore --minify",
|
||||||
"prepublishOnly": "npm run build"
|
"prepublishOnly": "npm run build"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
|
|||||||
Reference in New Issue
Block a user