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

Include AutoInstall

Browse Source
This commit is contained in:
natxocc
2026-03-31 18:52:28 +02:00
parent 7c142eb677
commit d62e99b17e
8 changed files with 218 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/sigpro-ui.cjs vendored
View File

@@ -1618,6 +1618,10 @@ const SigproUI = {
}
};
if (typeof window !== 'undefined') {
SigproUI.install(window);
}
exports.Accordion = Accordion;
exports.Alert = Alert;
exports.Autocomplete = Autocomplete;

4
dist/sigpro-ui.esm.js vendored
View File

@@ -1614,4 +1614,8 @@ const SigproUI = {
}
};
if (typeof window !== 'undefined') {
SigproUI.install(window);
}
export { Accordion, Alert, Autocomplete, Badge, Button, Checkbox, Colorpicker, Datepicker, Drawer, Dropdown, Fab, Fieldset, Fileinput, Indicator, Input, List, Loading, Menu, Modal, Navbar, Radio, Range, Rating, Select, Stack, Stat, Swap, Table, Tabs, Timeline, Toast, Tooltip, SigproUI as default, icon123, iconAbc, iconCalendar, iconClose, iconError, iconHide, iconInfo, iconLLeft, iconLeft, iconLock, iconMail, iconRRight, iconRight, iconShow, iconSuccess, iconUpload, iconWarning, joinClass, tt, val };

4
dist/sigpro-ui.umd.js vendored
View File

@@ -1615,6 +1615,10 @@ var SigProUI = (function (exports, sigpro) {
}
};
if (typeof window !== 'undefined') {
SigproUI.install(window);
}
exports.Accordion = Accordion;
exports.Alert = Alert;
exports.Autocomplete = Autocomplete;

2
dist/sigpro-ui.umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

218
docs/components/button.md
View File

@@ -9,7 +9,7 @@ Styled button with full DaisyUI support and reactive states.
## 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 |
@@ -24,77 +24,225 @@ Styled button with full DaisyUI support and reactive states.
### Basic Button
<div id="demo-basic"></div>
<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
Button({ class: "btn-primary" }, "Click Me")
const BasicDemo = () => {
return Button({ class: "btn btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
```
### With Loading State
<div id="demo-loading"></div>
<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 isSaving = $(false);
const LoadingDemo = () => {
const isSaving = $(false);
Button({
class: "btn-success",
return Button(
{
class: "btn btn-success",
loading: isSaving,
onclick: async () => {
isSaving(true);
await saveData();
await new Promise((resolve) => setTimeout(resolve, 2000));
isSaving(false);
}
}, "Save Changes")
},
},
"Save Changes",
);
};
$mount(LoadingDemo, "#demo-loading");
```
### With Badge
<div id="demo-badge"></div>
<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
Button({
class: "btn-outline",
const BadgeDemo = () => {
return Button(
{
class: "btn btn-outline",
badge: "3",
badgeClass: "badge-accent"
}, "Notifications")
badgeClass: "badge-accent",
},
"Notifications",
);
};
$mount(BadgeDemo, "#demo-badge");
```
### With Tooltip
<div id="demo-tooltip"></div>
<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
Button({
class: "btn-ghost",
tooltip: "Delete item"
}, "Delete")
const TooltipDemo = () => {
return Button(
{
class: "btn btn-ghost",
tooltip: "Delete item",
},
"Delete",
);
};
$mount(TooltipDemo, "#demo-tooltip");
```
### Disabled State
<div id="demo-disabled"></div>
<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 isDisabled = $(true);
const DisabledDemo = () => {
const isDisabled = $(true);
Button({
class: "btn-primary",
disabled: isDisabled
}, "Submit")
return Button(
{
class: "btn btn-primary",
disabled: isDisabled,
},
"Submit",
);
};
$mount(DisabledDemo, "#demo-disabled");
```
### All Variants
<div id="demo-variants"></div>
<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
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")
])
```
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>

4
docs/index.html
View File

@@ -39,8 +39,8 @@
};
</script>
<script src="https://unpkg.com/sigpro"> </script>
<script src="https://unpkg.com/sigpro-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>

4
index.js
View File

@@ -33,4 +33,8 @@ const SigproUI = {
}
};
if (typeof window !== 'undefined') {
SigproUI.install(window);
}
export default SigproUI;

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "sigpro-ui",
"version": "1.0.5",
"version": "1.0.6",
"repository": {
"type": "git",
"url": "https://github.com/natxocc/sigpro-ui.git"