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

BUILD BEFORE CHANGE NEW COMPONENTS WITH UI FUNCTION

Browse Source
This commit is contained in:
natxocc
2026-04-01 20:53:41 +02:00
parent c9411be600
commit 5a77deb442
55 changed files with 4137 additions and 5469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
docs/components/button copy.md Normal file
View File

@@ -0,0 +1,248 @@
# Button
Styled button with full DaisyUI support and reactive states.
## Tag
`Button`
## Props
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
| `onclick` | `function` | `-` | Click event handler |
| `type` | `string` | `'button'` | Native button type |
## Live Examples
### Basic Button
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const BasicDemo = () => {
return Button({ class: "btn btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
```
### With Loading State
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const LoadingDemo = () => {
const isSaving = $(false);
return Button(
{
class: "btn btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
await new Promise((resolve) => setTimeout(resolve, 2000));
isSaving(false);
},
},
"Save Changes",
);
};
$mount(LoadingDemo, "#demo-loading");
```
### With Badge
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const BadgeDemo = () => {
return Button(
{
class: "btn btn-outline",
badge: "3",
badgeClass: "badge-accent",
},
"Notifications",
);
};
$mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const TooltipDemo = () => {
return Button(
{
class: "btn btn-ghost",
tooltip: "Delete item",
},
"Delete",
);
};
$mount(TooltipDemo, "#demo-tooltip");
```
### Disabled State
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
```javascript
const DisabledDemo = () => {
const isDisabled = $(true);
return Button(
{
class: "btn btn-primary",
disabled: isDisabled,
},
"Submit",
);
};
$mount(DisabledDemo, "#demo-disabled");
```
### All Variants
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
const VariantsDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn btn-primary" }, "Primary"),
Button({ class: "btn btn-secondary" }, "Secondary"),
Button({ class: "btn btn-accent" }, "Accent"),
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline"),
]);
};
$mount(VariantsDemo, "#demo-variants");
```
<script>
(function() {
const initButtonExamples = () => {
// 1. Basic Button
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
$mount(BasicDemo, basicTarget);
}
// 2. Loading State
const loadingTarget = document.querySelector('#demo-loading');
if (loadingTarget && !loadingTarget.hasChildNodes()) {
const LoadingDemo = () => {
const isSaving = $(false);
return Button({
class: "btn btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
await new Promise(resolve => setTimeout(resolve, 2000));
isSaving(false);
}
}, "Save Changes");
};
$mount(LoadingDemo, loadingTarget);
}
// 3. Badge
const badgeTarget = document.querySelector('#demo-badge');
if (badgeTarget && !badgeTarget.hasChildNodes()) {
const BadgeDemo = () => Button({
class: "btn btn-outline",
badge: "3",
badgeClass: "badge-accent"
}, "Notifications");
$mount(BadgeDemo, badgeTarget);
}
// 4. Tooltip
const tooltipTarget = document.querySelector('#demo-tooltip');
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
const TooltipDemo = () => Button({
class: "btn btn-ghost",
tooltip: "Delete item"
}, "Delete");
$mount(TooltipDemo, tooltipTarget);
}
// 5. Disabled State
const disabledTarget = document.querySelector('#demo-disabled');
if (disabledTarget && !disabledTarget.hasChildNodes()) {
const DisabledDemo = () => {
const isDisabled = $(true);
return Button({
class: "btn btn-primary",
disabled: isDisabled
}, "Submit");
};
$mount(DisabledDemo, disabledTarget);
}
// 6. All Variants
const variantsTarget = document.querySelector('#demo-variants');
if (variantsTarget && !variantsTarget.hasChildNodes()) {
const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn btn-primary" }, "Primary"),
Button({ class: "btn btn-secondary" }, "Secondary"),
Button({ class: "btn btn-accent" }, "Accent"),
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline")
]);
$mount(VariantsDemo, variantsTarget);
}
};
// Ejecutar la función después de definirla
initButtonExamples();
// Registrar para navegación en Docsify
if (window.$docsify) {
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
hook.doneEach(initButtonExamples);
});
}
})();
</script>

224
docs/components/button.md
View File

@@ -1,51 +1,68 @@
# Button
> # Button(props, children?: string | Signal | [...]): HTMLElement
Styled button with full DaisyUI support and reactive states.
## Tag
`Button`
---
## Props
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
| `onclick` | `function` | `-` | Click event handler |
| `type` | `string` | `'button'` | Native button type |
| Prop | Type | Default | Description |
| :----------- | :--------------------------- | :------------------ | :------------------------------- |
| `class` | `string` | `''` | Additional CSS classes (daisyUI) |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
| `onclick` | `function` | `-` | Click event handler |
| `type` | `string` | `'button'` | Native button type |
## Live Examples
## Class Options
For more detailed information about the underlying styling system, visit the daisyUI documentation:
- [daisyUI Button](https://daisyui.com/components/button)
| Class Name | Category | Description |
| :-------------- | :------------ | :------------------------------------ |
| `btn-neutral` | `Color` 🎨 | Neutral brand color |
| `btn-primary` | `Color` 🎨 | Primary brand color |
| `btn-secondary` | `Color` 🎨 | Secondary brand color |
| `btn-accent` | `Color` 🎨 | Accent brand color |
| `btn-info` | `Color` 🎨 | Informational blue color |
| `btn-success` | `Color` 🎨 | Success green color |
| `btn-warning` | `Color` 🎨 | Warning yellow color |
| `btn-error` | `Color` 🎨 | Error red color |
| `btn-xl` | `Size` 📏 | Extra large scale |
| `btn-lg` | `Size` 📏 | Large scale |
| `btn-md` | `Size` 📏 | Medium scale (Default) |
| `btn-sm` | `Size` 📏 | Small scale |
| `btn-xs` | `Size` 📏 | Extra small scale |
| `btn-outline` | `Style` ✨ | Transparent with colored border |
| `btn-dash` | `Style` ✨ | Dashed border style |
| `btn-soft` | `Style` ✨ | Low opacity background color |
| `btn-ghost` | `Style` ✨ | No background, hover effect only |
| `btn-link` | `Style` ✨ | Looks like a text link |
| `btn-square` | `Shape` 📐 | 1:1 aspect ratio |
| `btn-circle` | `Shape` 📐 | 1:1 aspect ratio with rounded corners |
| `btn-wide` | `Shape` 📐 | Extra horizontal padding |
| `btn-block` | `Shape` 📐 | Full width of container |
| `btn-active` | `Behavior` ⚙️ | Forced active/pressed state |
| `btn-disabled` | `Behavior` ⚙️ | Visual and functional disabled state |
### Basic Button
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const BasicDemo = () => {
return Button({ class: "btn btn-primary" }, "Click Me");
return Button({ class: "btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
```
### With Loading State
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-loading" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const LoadingDemo = () => {
@@ -53,7 +70,7 @@ const LoadingDemo = () => {
return Button(
{
class: "btn btn-success",
class: "btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
@@ -69,18 +86,13 @@ $mount(LoadingDemo, "#demo-loading");
### With Badge
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const BadgeDemo = () => {
return Button(
{
class: "btn btn-outline",
class: "btn-outline",
badge: "3",
badgeClass: "badge-accent",
},
@@ -92,18 +104,13 @@ $mount(BadgeDemo, "#demo-badge");
### With Tooltip
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-tooltip" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const TooltipDemo = () => {
return Button(
{
class: "btn btn-ghost",
class: "btn-ghost",
tooltip: "Delete item",
},
"Delete",
@@ -114,12 +121,7 @@ $mount(TooltipDemo, "#demo-tooltip");
### Disabled State
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
</div>
</div>
<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const DisabledDemo = () => {
@@ -127,8 +129,7 @@ const DisabledDemo = () => {
return Button(
{
class: "btn btn-primary",
disabled: isDisabled,
class: "btn-primary btn-disabled",
},
"Submit",
);
@@ -138,111 +139,30 @@ $mount(DisabledDemo, "#demo-disabled");
### All Variants
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
```javascript
const VariantsDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn btn-primary" }, "Primary"),
Button({ class: "btn btn-secondary" }, "Secondary"),
Button({ class: "btn btn-accent" }, "Accent"),
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline"),
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"),
]);
};
$mount(VariantsDemo, "#demo-variants");
```
<script>
(function() {
const initButtonExamples = () => {
// 1. Basic Button
const basicTarget = document.querySelector('#demo-basic');
if (basicTarget && !basicTarget.hasChildNodes()) {
const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
$mount(BasicDemo, basicTarget);
}
<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
// 2. Loading State
const loadingTarget = document.querySelector('#demo-loading');
if (loadingTarget && !loadingTarget.hasChildNodes()) {
const LoadingDemo = () => {
const isSaving = $(false);
return Button({
class: "btn btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
await new Promise(resolve => setTimeout(resolve, 2000));
isSaving(false);
}
}, "Save Changes");
};
$mount(LoadingDemo, loadingTarget);
}
// 3. Badge
const badgeTarget = document.querySelector('#demo-badge');
if (badgeTarget && !badgeTarget.hasChildNodes()) {
const BadgeDemo = () => Button({
class: "btn btn-outline",
badge: "3",
badgeClass: "badge-accent"
}, "Notifications");
$mount(BadgeDemo, badgeTarget);
}
// 4. Tooltip
const tooltipTarget = document.querySelector('#demo-tooltip');
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
const TooltipDemo = () => Button({
class: "btn btn-ghost",
tooltip: "Delete item"
}, "Delete");
$mount(TooltipDemo, tooltipTarget);
}
// 5. Disabled State
const disabledTarget = document.querySelector('#demo-disabled');
if (disabledTarget && !disabledTarget.hasChildNodes()) {
const DisabledDemo = () => {
const isDisabled = $(true);
return Button({
class: "btn btn-primary",
disabled: isDisabled
}, "Submit");
};
$mount(DisabledDemo, disabledTarget);
}
// 6. All Variants
const variantsTarget = document.querySelector('#demo-variants');
if (variantsTarget && !variantsTarget.hasChildNodes()) {
const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
Button({ class: "btn btn-primary" }, "Primary"),
Button({ class: "btn btn-secondary" }, "Secondary"),
Button({ class: "btn btn-accent" }, "Accent"),
Button({ class: "btn btn-ghost" }, "Ghost"),
Button({ class: "btn btn-outline" }, "Outline")
]);
$mount(VariantsDemo, variantsTarget);
}
};
// Ejecutar la función después de definirla
initButtonExamples();
// Registrar para navegación en Docsify
if (window.$docsify) {
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
hook.doneEach(initButtonExamples);
});
}
})();
</script>
```javascript
const TestDemo = () => {
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
$html("span", {class: "indicator"},[
5,
Button('Click')])
]);
};
$mount(TestDemo, "#demo-test");
```