BUILD BEFORE CHANGE NEW COMPONENTS WITH UI FUNCTION
This commit is contained in:
3
css/index.js
Normal file
3
css/index.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
// css/index.js
|
||||||
|
import './daisy.css';
|
||||||
|
export default { version: '1.0.0' };
|
||||||
2
css/sigpro.css
Normal file
2
css/sigpro.css
Normal file
File diff suppressed because one or more lines are too long
1724
dist/sigpro-ui.cjs
vendored
1724
dist/sigpro-ui.cjs
vendored
File diff suppressed because it is too large
Load Diff
1668
dist/sigpro-ui.esm.js
vendored
1668
dist/sigpro-ui.esm.js
vendored
File diff suppressed because it is too large
Load Diff
1776
dist/sigpro-ui.js
vendored
Normal file
1776
dist/sigpro-ui.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
dist/sigpro-ui.min.js
vendored
Normal file
7
dist/sigpro-ui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1727
dist/sigpro-ui.umd.js
vendored
1727
dist/sigpro-ui.umd.js
vendored
File diff suppressed because it is too large
Load Diff
1
dist/sigpro-ui.umd.min.js
vendored
1
dist/sigpro-ui.umd.min.js
vendored
File diff suppressed because one or more lines are too long
248
docs/components/button copy.md
Normal file
248
docs/components/button copy.md
Normal 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>
|
||||||
@@ -1,51 +1,68 @@
|
|||||||
# Button
|
> # Button(props, children?: string | Signal | [...]): HTMLElement
|
||||||
|
|
||||||
Styled button with full DaisyUI support and reactive states.
|
---
|
||||||
|
|
||||||
## Tag
|
|
||||||
|
|
||||||
`Button`
|
|
||||||
|
|
||||||
## Props
|
## Props
|
||||||
|
|
||||||
| Prop | Type | Default | Description |
|
| Prop | Type | Default | Description |
|
||||||
| :----------- | :--------------------------- | :------------------ | :------------------------------------------ |
|
| :----------- | :--------------------------- | :------------------ | :------------------------------- |
|
||||||
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
| `class` | `string` | `''` | Additional CSS classes (daisyUI) |
|
||||||
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
|
||||||
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
|
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
|
||||||
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
|
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
|
||||||
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
|
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
|
||||||
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
|
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
|
||||||
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
|
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
|
||||||
| `onclick` | `function` | `-` | Click event handler |
|
| `onclick` | `function` | `-` | Click event handler |
|
||||||
| `type` | `string` | `'button'` | Native button type |
|
| `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
|
### Basic Button
|
||||||
|
|
||||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||||
<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
|
```javascript
|
||||||
const BasicDemo = () => {
|
const BasicDemo = () => {
|
||||||
return Button({ class: "btn btn-primary" }, "Click Me");
|
return Button({ class: "btn-primary" }, "Click Me");
|
||||||
};
|
};
|
||||||
$mount(BasicDemo, "#demo-basic");
|
$mount(BasicDemo, "#demo-basic");
|
||||||
```
|
```
|
||||||
|
|
||||||
### With Loading State
|
### With Loading State
|
||||||
|
|
||||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
<div id="demo-loading" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||||
<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
|
```javascript
|
||||||
const LoadingDemo = () => {
|
const LoadingDemo = () => {
|
||||||
@@ -53,7 +70,7 @@ const LoadingDemo = () => {
|
|||||||
|
|
||||||
return Button(
|
return Button(
|
||||||
{
|
{
|
||||||
class: "btn btn-success",
|
class: "btn-success",
|
||||||
loading: isSaving,
|
loading: isSaving,
|
||||||
onclick: async () => {
|
onclick: async () => {
|
||||||
isSaving(true);
|
isSaving(true);
|
||||||
@@ -69,18 +86,13 @@ $mount(LoadingDemo, "#demo-loading");
|
|||||||
|
|
||||||
### With Badge
|
### With Badge
|
||||||
|
|
||||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
<div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||||
<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
|
```javascript
|
||||||
const BadgeDemo = () => {
|
const BadgeDemo = () => {
|
||||||
return Button(
|
return Button(
|
||||||
{
|
{
|
||||||
class: "btn btn-outline",
|
class: "btn-outline",
|
||||||
badge: "3",
|
badge: "3",
|
||||||
badgeClass: "badge-accent",
|
badgeClass: "badge-accent",
|
||||||
},
|
},
|
||||||
@@ -92,18 +104,13 @@ $mount(BadgeDemo, "#demo-badge");
|
|||||||
|
|
||||||
### With Tooltip
|
### With Tooltip
|
||||||
|
|
||||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
<div id="demo-tooltip" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||||
<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
|
```javascript
|
||||||
const TooltipDemo = () => {
|
const TooltipDemo = () => {
|
||||||
return Button(
|
return Button(
|
||||||
{
|
{
|
||||||
class: "btn btn-ghost",
|
class: "btn-ghost",
|
||||||
tooltip: "Delete item",
|
tooltip: "Delete item",
|
||||||
},
|
},
|
||||||
"Delete",
|
"Delete",
|
||||||
@@ -114,12 +121,7 @@ $mount(TooltipDemo, "#demo-tooltip");
|
|||||||
|
|
||||||
### Disabled State
|
### Disabled State
|
||||||
|
|
||||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
<div id="demo-disabled" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||||
<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
|
```javascript
|
||||||
const DisabledDemo = () => {
|
const DisabledDemo = () => {
|
||||||
@@ -127,8 +129,7 @@ const DisabledDemo = () => {
|
|||||||
|
|
||||||
return Button(
|
return Button(
|
||||||
{
|
{
|
||||||
class: "btn btn-primary",
|
class: "btn-primary btn-disabled",
|
||||||
disabled: isDisabled,
|
|
||||||
},
|
},
|
||||||
"Submit",
|
"Submit",
|
||||||
);
|
);
|
||||||
@@ -138,111 +139,30 @@ $mount(DisabledDemo, "#demo-disabled");
|
|||||||
|
|
||||||
### All Variants
|
### All Variants
|
||||||
|
|
||||||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||||
<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
|
```javascript
|
||||||
const VariantsDemo = () => {
|
const VariantsDemo = () => {
|
||||||
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
||||||
Button({ class: "btn btn-primary" }, "Primary"),
|
Button({ class: "btn-primary" }, "Primary"),
|
||||||
Button({ class: "btn btn-secondary" }, "Secondary"),
|
Button({ class: "btn-secondary" }, "Secondary"),
|
||||||
Button({ class: "btn btn-accent" }, "Accent"),
|
Button({ class: "btn-accent" }, "Accent"),
|
||||||
Button({ class: "btn btn-ghost" }, "Ghost"),
|
Button({ class: "btn-ghost" }, "Ghost"),
|
||||||
Button({ class: "btn btn-outline" }, "Outline"),
|
Button({ class: "btn-outline" }, "Outline"),
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
$mount(VariantsDemo, "#demo-variants");
|
$mount(VariantsDemo, "#demo-variants");
|
||||||
```
|
```
|
||||||
|
|
||||||
<script>
|
<div id="demo-test" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||||||
(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
|
```javascript
|
||||||
const loadingTarget = document.querySelector('#demo-loading');
|
const TestDemo = () => {
|
||||||
if (loadingTarget && !loadingTarget.hasChildNodes()) {
|
return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
|
||||||
const LoadingDemo = () => {
|
$html("span", {class: "indicator"},[
|
||||||
const isSaving = $(false);
|
5,
|
||||||
return Button({
|
Button('Click')])
|
||||||
class: "btn btn-success",
|
]);
|
||||||
loading: isSaving,
|
};
|
||||||
onclick: async () => {
|
$mount(TestDemo, "#demo-test");
|
||||||
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>
|
|
||||||
|
|||||||
@@ -17,6 +17,13 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Personaliza los callouts si quieres */
|
||||||
|
.markdown-section .callout {
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
@@ -26,26 +33,40 @@
|
|||||||
name: "SigPro-UI",
|
name: "SigPro-UI",
|
||||||
repo: "",
|
repo: "",
|
||||||
loadSidebar: true,
|
loadSidebar: true,
|
||||||
subMaxLevel: 3,
|
|
||||||
sidebarDisplayLevel: 1,
|
sidebarDisplayLevel: 1,
|
||||||
executeScript: true,
|
executeScript: true,
|
||||||
copyCode: {
|
copyCode: {
|
||||||
buttonText:
|
buttonText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',
|
||||||
'<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>',
|
|
||||||
errorText: "Error",
|
errorText: "Error",
|
||||||
successText:
|
successText: '<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>',
|
||||||
'<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>',
|
|
||||||
},
|
},
|
||||||
|
plugins: [
|
||||||
|
function(hook, vm) {
|
||||||
|
hook.doneEach(function() {
|
||||||
|
// Buscamos los bloques de código JS que queremos ejecutar
|
||||||
|
const codeBlocks = document.querySelectorAll('pre[data-lang="javascript"] code');
|
||||||
|
|
||||||
|
codeBlocks.forEach(code => {
|
||||||
|
// Usamos un bloque try/catch por si el código del Markdown tiene errores
|
||||||
|
try {
|
||||||
|
// Ejecutamos el código.
|
||||||
|
// Como tu librería ya puso $, $mount, Button, etc. en 'window',
|
||||||
|
// el código los encontrará directamente.
|
||||||
|
const runDemo = new Function(code.innerText);
|
||||||
|
runDemo();
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error en la demo de SigPro:", err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
]
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- <script src="https://unpkg.com/sigpro"></script> -->
|
<script src="//cdn.jsdelivr.net/npm/docsify@4.13.0/lib/docsify.min.js"></script>
|
||||||
<!-- <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro@main/dist/sigpro.js"></script> -->
|
|
||||||
<script src="./sigpro.min.js"></script>
|
|
||||||
<script src="./sigpro-ui.umd.min.js"></script>
|
|
||||||
<!-- <script src="https://cdn.jsdelivr.net/gh/natxocc/sigpro-ui@main/dist/sigpro-ui.umd.js"></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>
|
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
|
||||||
|
<script src="//cdn.jsdelivr.net/npm/docsify-plugin-flexible-alerts/docsify-plugin-flexible-alerts.min.js"></script>
|
||||||
|
<script src="./sigpro-ui.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
216
docs/install.md
216
docs/install.md
@@ -4,13 +4,18 @@ Follow these steps to integrate **SigPro-UI** into your project.
|
|||||||
|
|
||||||
## Prerequisites
|
## Prerequisites
|
||||||
|
|
||||||
Make sure your project already has:
|
|
||||||
|
|
||||||
- [SigPro Core](https://www.npmjs.com/package/sigpro) installed.
|
|
||||||
- [Tailwind CSS v4](https://tailwindcss.com/) configured.
|
- [Tailwind CSS v4](https://tailwindcss.com/) configured.
|
||||||
- [daisyUI v5](https://daisyui.com/) installed.
|
- [daisyUI v5](https://daisyui.com/) installed.
|
||||||
|
|
||||||
## 1️.Install the package
|
---
|
||||||
|
|
||||||
|
|
||||||
|
!> **📘 Core Concepts**
|
||||||
|
**Note:** SigPro-UI now includes SigPro core internally. You no longer need to install SigPro separately.
|
||||||
|
SigProUI is built on top of the [SigPro](https://natxocc.github.io/sigpro/#/) reactive core. To learn how to create signals, manage reactivity, and structure your application logic, check out the [SigPro documentation](https://natxocc.github.io/sigpro/#/). It covers everything you need to build reactive applications with signals, computed values, and effects.
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Install the package
|
||||||
|
|
||||||
Choose your preferred package manager:
|
Choose your preferred package manager:
|
||||||
|
|
||||||
@@ -24,7 +29,7 @@ bun add sigpro-ui
|
|||||||
yarn add sigpro-ui
|
yarn add sigpro-ui
|
||||||
```
|
```
|
||||||
|
|
||||||
## 2️.Configure CSS
|
## 2. Configure CSS
|
||||||
|
|
||||||
Add the following to your main CSS file (e.g., `app.css`):
|
Add the following to your main CSS file (e.g., `app.css`):
|
||||||
|
|
||||||
@@ -35,48 +40,67 @@ Add the following to your main CSS file (e.g., `app.css`):
|
|||||||
|
|
||||||
> This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.
|
> This enables Tailwind CSS v4 + daisyUI v5 styles for all SigPro-UI components.
|
||||||
|
|
||||||
## 3️.Import and initialize in your app
|
## 3. Import and use in your app
|
||||||
|
|
||||||
Create or update your `main.js` (or `index.js`):
|
### ESM / Module usage
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
// Import required modules
|
// Import everything from sigpro-ui (includes sigpro core)
|
||||||
import { $, $mount } from "sigpro";
|
import { $, $mount, Button, Alert, Input, tt } from "sigpro-ui";
|
||||||
import { UI } from "sigpro-ui";
|
|
||||||
|
|
||||||
// Import your CSS (adjust the path if needed)
|
// Import your CSS (adjust the path if needed)
|
||||||
import "./app.css";
|
import "./app.css";
|
||||||
|
|
||||||
// Import your main App component
|
// Create your app
|
||||||
import { App } from "./App.js";
|
const App = () => {
|
||||||
|
const count = $(0);
|
||||||
// Initialize SigPro-UI (English locale)
|
|
||||||
UI("en");
|
return $html('div', { class: 'p-8 max-w-md mx-auto' }, [
|
||||||
|
$html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
|
||||||
|
|
||||||
|
Input({
|
||||||
|
label: 'Your name',
|
||||||
|
placeholder: 'Enter your name...'
|
||||||
|
}),
|
||||||
|
|
||||||
|
Button({
|
||||||
|
class: 'btn-primary mt-4',
|
||||||
|
onclick: () => count(count() + 1)
|
||||||
|
}, () => `Clicks: ${count()}`),
|
||||||
|
|
||||||
|
Alert({
|
||||||
|
type: 'success',
|
||||||
|
message: () => `Welcome to SigProUI!`
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
// Mount your app
|
// Mount your app
|
||||||
$mount(App, "#app");
|
$mount(App, "#app");
|
||||||
```
|
```
|
||||||
|
|
||||||
## 4️.Create your first component
|
### CommonJS usage
|
||||||
|
|
||||||
Example `App.js`:
|
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
import { Div, Button, Alert } from "sigpro-ui";
|
const { $, $mount, Button, Input, Alert } = require('sigpro-ui');
|
||||||
|
|
||||||
export const App = () => {
|
const App = () => {
|
||||||
return Div({ class: "p-4" }, [
|
const count = $(0);
|
||||||
Button({
|
|
||||||
class: "btn-primary",
|
return $html('div', { class: 'p-8' }, [
|
||||||
onclick: () => Alert("Hello SigPro-UI!")
|
Button({
|
||||||
}, "Click Me")
|
class: 'btn-primary',
|
||||||
|
onclick: () => count(count() + 1)
|
||||||
|
}, () => `Clicks: ${count()}`)
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$mount(App, "#app");
|
||||||
```
|
```
|
||||||
|
|
||||||
## Optional: Use CDN (no build step)
|
## 4. CDN Usage (no build step)
|
||||||
|
|
||||||
If you prefer not to use a build step, you can import directly from a CDN:
|
Simply add the script tag and start using SigProUI:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
@@ -84,46 +108,134 @@ If you prefer not to use a build step, you can import directly from a CDN:
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<script type="importmap">
|
<title>SigProUI Demo</title>
|
||||||
{
|
<script src="https://unpkg.com/sigpro-ui@latest/dist/sigpro-ui.min.js"></script>
|
||||||
"imports": {
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.css" rel="stylesheet">
|
||||||
"sigpro": "https://esm.run/sigpro",
|
|
||||||
"sigpro-ui": "https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style>
|
<style>
|
||||||
@import "tailwindcss";
|
body { padding: 2rem; }
|
||||||
@plugin "daisyui";
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module">
|
|
||||||
import { $, $mount } from "sigpro";
|
|
||||||
import { UI, Div, Button, Alert } from "sigpro-ui";
|
|
||||||
|
|
||||||
UI("en");
|
<script>
|
||||||
|
// All functions are available directly in window
|
||||||
const App = () => Div({ class: "p-4" }, [
|
// No need to import anything!
|
||||||
Button({ class: "btn-primary", onclick: () => Alert("Hello!") }, "Click")
|
|
||||||
]);
|
const { $, $mount, Button, Input, Alert } = window;
|
||||||
|
|
||||||
$mount(App, "#app");
|
const App = () => {
|
||||||
|
const name = $('');
|
||||||
|
const count = $(0);
|
||||||
|
|
||||||
|
return $html('div', { class: 'max-w-md mx-auto p-4' }, [
|
||||||
|
$html('h1', { class: 'text-2xl font-bold mb-4' }, 'SigProUI Demo'),
|
||||||
|
|
||||||
|
Input({
|
||||||
|
label: 'Your name',
|
||||||
|
value: name,
|
||||||
|
placeholder: 'Enter your name...'
|
||||||
|
}),
|
||||||
|
|
||||||
|
Button({
|
||||||
|
class: 'btn-primary mt-4',
|
||||||
|
onclick: () => count(count() + 1)
|
||||||
|
}, () => `Clicks: ${count()}`),
|
||||||
|
|
||||||
|
Alert({
|
||||||
|
type: 'success',
|
||||||
|
message: () => name() ? `Hello ${name()}!` : 'Welcome to SigProUI!'
|
||||||
|
})
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
$mount(App, '#app');
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## What's included?
|
||||||
|
|
||||||
|
When you install SigProUI, you get:
|
||||||
|
|
||||||
|
### SigPro Core Functions
|
||||||
|
- `$()` - Reactive signals
|
||||||
|
- `$watch()` - Watch reactive dependencies
|
||||||
|
- `$html()` - Create HTML elements with reactivity
|
||||||
|
- `$if()` - Conditional rendering
|
||||||
|
- `$for()` - List rendering
|
||||||
|
- `$router()` - Hash-based routing
|
||||||
|
- `$mount()` - Mount components to DOM
|
||||||
|
|
||||||
|
### UI Components
|
||||||
|
- `Button()` - Styled button with DaisyUI
|
||||||
|
- `Input()` - Form input with floating labels
|
||||||
|
- `Alert()` - Alert messages
|
||||||
|
- `Modal()` - Modal dialogs
|
||||||
|
- `Table()` - Data tables
|
||||||
|
- `Tabs()` - Tabbed interfaces
|
||||||
|
- And 30+ more components!
|
||||||
|
|
||||||
|
### Utilities
|
||||||
|
- `Icons` - SVG icon set
|
||||||
|
- `Utils` - Helper functions (joinClass, val)
|
||||||
|
- `tt()` - i18n translation function
|
||||||
|
|
||||||
|
## Language Support
|
||||||
|
|
||||||
|
SigProUI includes built-in i18n with Spanish and English:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { tt } from 'sigpro-ui';
|
||||||
|
|
||||||
|
// Change locale (default is 'es')
|
||||||
|
tt.setLocale('en');
|
||||||
|
|
||||||
|
// Use translations
|
||||||
|
const closeButton = Button({}, tt('close')());
|
||||||
|
const searchPlaceholder = Input({ placeholder: tt('search')() });
|
||||||
|
```
|
||||||
|
|
||||||
|
Available translations: `close`, `confirm`, `cancel`, `search`, `loading`, `nodata`
|
||||||
|
|
||||||
|
## TypeScript Support
|
||||||
|
|
||||||
|
SigProUI includes TypeScript definitions. Import types as needed:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { Button, Input, type ButtonProps, type InputProps } from 'sigpro-ui';
|
||||||
|
|
||||||
|
const MyButton: React.FC<ButtonProps> = (props) => {
|
||||||
|
return Button(props, 'Click me');
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
| Problem | Solution |
|
| Problem | Solution |
|
||||||
| :--- | :--- |
|
| :--- | :--- |
|
||||||
| Components don't look styled | Check that `app.css` is imported and contains the Tailwind + daisyUI directives. |
|
| Components don't look styled | Check that you've included Tailwind + daisyUI CSS (either via import or CDN) |
|
||||||
| `UI is not defined` | Make sure you call `UI()` **before** using any component like `Button`, `Input`, etc. |
|
| `$ is not defined` | SigProUI includes sigpro core - no need to install separately. Make sure you're importing from 'sigpro-ui' |
|
||||||
| Locale not working | Verify you passed a valid locale (`"es"` or `"en"`) to `UI()`. |
|
| `Button is not defined` | In CDN mode, all components are in window. Use `window.Button` or destructure from window |
|
||||||
| Build errors with Tailwind v4 | Ensure Tailwind CSS v4 and daisyUI v5 are correctly installed and configured. |
|
| Build errors | Ensure you're using a modern bundler that supports ESM |
|
||||||
|
| CDN components not working | The CDN version exposes everything globally. Use `const { $, Button } = window;` or call directly |
|
||||||
|
| Locale not working | Set locale with `tt.setLocale('en')` before using translations |
|
||||||
|
|
||||||
|
## Migration from older versions
|
||||||
|
|
||||||
|
If you were using SigProUI v1.0.x with separate SigPro installation:
|
||||||
|
|
||||||
|
**Before:**
|
||||||
|
```javascript
|
||||||
|
import { $ } from 'sigpro';
|
||||||
|
import { Button } from 'sigpro-ui';
|
||||||
|
```
|
||||||
|
|
||||||
|
**Now:**
|
||||||
|
```javascript
|
||||||
|
import { $, Button } from 'sigpro-ui';
|
||||||
|
// That's it! Everything comes from one package.
|
||||||
|
```
|
||||||
|
|
||||||
**Happy coding!** 🎉
|
**Happy coding!** 🎉
|
||||||
|
|
||||||
|
|||||||
7
docs/sigpro-ui.min.js
vendored
Normal file
7
docs/sigpro-ui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
docs/sigpro-ui.umd.min.js
vendored
1
docs/sigpro-ui.umd.min.js
vendored
File diff suppressed because one or more lines are too long
1
docs/sigpro.min.js
vendored
1
docs/sigpro.min.js
vendored
File diff suppressed because one or more lines are too long
47
index.js
47
index.js
@@ -1,40 +1,25 @@
|
|||||||
/**
|
// index.js
|
||||||
* SigproUI - Entry Point
|
import 'sigpro';
|
||||||
*/
|
// import './src/css/sigpro.css'; // No importes CSS en JS
|
||||||
|
|
||||||
import * as Components from './src/components/index.js';
|
import * as Components from './src/components/index.js';
|
||||||
|
// import * as Icons from './src/core/icons.js'; // ELIMINAR
|
||||||
import * as Icons from './src/core/icons.js';
|
|
||||||
import * as Utils from './src/core/utils.js';
|
import * as Utils from './src/core/utils.js';
|
||||||
import { tt } from './src/core/i18n.js';
|
import { tt } from './src/core/i18n.js';
|
||||||
|
|
||||||
|
|
||||||
export * from './src/components/index.js';
|
export * from './src/components/index.js';
|
||||||
export * from './src/core/icons.js';
|
// export * from './src/core/icons.js'; // ELIMINAR
|
||||||
export * from './src/core/utils.js';
|
export * from './src/core/utils.js';
|
||||||
export { tt };
|
export { tt };
|
||||||
|
|
||||||
const SigproUI = {
|
|
||||||
...Components,
|
|
||||||
Icons,
|
|
||||||
Utils,
|
|
||||||
tt,
|
|
||||||
|
|
||||||
install: (target = (typeof window !== 'undefined' ? window : {})) => {
|
|
||||||
Object.entries(Components).forEach(([name, component]) => {
|
|
||||||
target[name] = component;
|
|
||||||
});
|
|
||||||
|
|
||||||
target.Icons = Icons;
|
|
||||||
target.Utils = Utils;
|
|
||||||
target.tt = tt;
|
|
||||||
|
|
||||||
console.log("🌟 SigproUI");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
SigproUI.install(window);
|
Object.entries(Components).forEach(([name, component]) => {
|
||||||
}
|
window[name] = component;
|
||||||
|
});
|
||||||
export default SigproUI;
|
|
||||||
|
// window.Icons = Icons; // ELIMINAR
|
||||||
|
window.Utils = Utils;
|
||||||
|
window.tt = tt;
|
||||||
|
window.SigProUI = { ...Components, Utils, tt };
|
||||||
|
|
||||||
|
console.log("🎨 SigProUI ready");
|
||||||
|
}
|
||||||
60
package.json
60
package.json
@@ -1,52 +1,44 @@
|
|||||||
{
|
{
|
||||||
"name": "sigpro-ui",
|
"name": "sigpro-ui",
|
||||||
"version": "1.0.6",
|
"version": "1.1.0",
|
||||||
"repository": {
|
"type": "module",
|
||||||
"type": "git",
|
"license": "MIT",
|
||||||
"url": "https://github.com/natxocc/sigpro-ui.git"
|
"main": "./index.js",
|
||||||
},
|
"module": "./index.js",
|
||||||
"main": "./dist/sigpro-ui.cjs",
|
"unpkg": "./dist/sigpro-ui.min.js",
|
||||||
"module": "./dist/sigpro-ui.esm.js",
|
"jsdelivr": "./dist/sigpro-ui.min.js",
|
||||||
"unpkg": "./dist/sigpro-ui.umd.min.js",
|
|
||||||
"jsdelivr": "./dist/sigpro-ui.umd.min.js",
|
|
||||||
"exports": {
|
"exports": {
|
||||||
".": {
|
".": {
|
||||||
"import": "./dist/sigpro-ui.esm.js",
|
"import": "./index.js",
|
||||||
"require": "./dist/sigpro-ui.cjs"
|
"script": "./dist/sigpro-ui.js"
|
||||||
|
},
|
||||||
|
"./css": {
|
||||||
|
"import": "./css/index.js",
|
||||||
|
"default": "./css/index.js"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"bugs": {
|
|
||||||
"url": "https://github.com/natxocc/sigpro-ui/issues"
|
|
||||||
},
|
|
||||||
"files": [
|
"files": [
|
||||||
"index.js",
|
"index.js",
|
||||||
"src",
|
|
||||||
"dist",
|
"dist",
|
||||||
|
"css",
|
||||||
"README.md",
|
"README.md",
|
||||||
"LICENSE"
|
"LICENSE"
|
||||||
],
|
],
|
||||||
"homepage": "https://natxocc.github.io/sigpro-ui/",
|
|
||||||
"keywords": [
|
|
||||||
"signals",
|
|
||||||
"reactive",
|
|
||||||
"sigpro",
|
|
||||||
"sigpro components",
|
|
||||||
"UI",
|
|
||||||
"vanilla-js",
|
|
||||||
"reactive-programming"
|
|
||||||
],
|
|
||||||
"license": "MIT",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"docs": "bun x serve docs",
|
"build:css": "./node_modules/.bin/tailwindcss -i ./src/css/sigpro.css -o ./css/sigpro.css --content './src/**/*.js' --minify",
|
||||||
"build": "rollup -c",
|
"build:js": "bun build ./index.js --bundle --outfile=./dist/sigpro-ui.js --format=iife --global-name=SigProUI && bun build ./index.js --bundle --outfile=./dist/sigpro-ui.min.js --format=iife --global-name=SigProUI --minify",
|
||||||
"prepublishOnly": "npm run build"
|
"build": "bun run build:css && bun run build:js",
|
||||||
|
"prepublishOnly": "bun run build",
|
||||||
|
"docs": "bun x serve docs"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"dependencies": {
|
||||||
"sigpro": ">=1.1.16"
|
"sigpro": "^1.1.18"
|
||||||
},
|
},
|
||||||
"type": "module",
|
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-terser": "^0.4.4",
|
"@iconify/json": "^2.2.458",
|
||||||
"rollup": "^4.34.8"
|
"@iconify/tailwind4": "^1.2.3",
|
||||||
|
"@tailwindcss/cli": "^4.0.0",
|
||||||
|
"daisyui": "^5.5.19",
|
||||||
|
"tailwindcss": "^4.2.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
import terser from '@rollup/plugin-terser';
|
|
||||||
|
|
||||||
export default [
|
|
||||||
// ESM
|
|
||||||
{
|
|
||||||
input: './index.js',
|
|
||||||
external: ['sigpro'],
|
|
||||||
output: {
|
|
||||||
file: './dist/sigpro-ui.esm.js',
|
|
||||||
format: 'esm'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// CommonJS
|
|
||||||
{
|
|
||||||
input: './index.js',
|
|
||||||
external: ['sigpro'],
|
|
||||||
output: {
|
|
||||||
file: './dist/sigpro-ui.cjs',
|
|
||||||
format: 'cjs'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// UMD (IIFE para navegador)
|
|
||||||
{
|
|
||||||
input: './index.js',
|
|
||||||
external: ['sigpro'],
|
|
||||||
output: {
|
|
||||||
file: './dist/sigpro-ui.umd.js',
|
|
||||||
format: 'iife',
|
|
||||||
name: 'SigProUI',
|
|
||||||
globals: {
|
|
||||||
sigpro: 'SigPro'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// UMD minificado
|
|
||||||
{
|
|
||||||
input: './index.js',
|
|
||||||
external: ['sigpro'],
|
|
||||||
output: {
|
|
||||||
file: './dist/sigpro-ui.umd.min.js',
|
|
||||||
format: 'iife',
|
|
||||||
name: 'SigProUI',
|
|
||||||
globals: {
|
|
||||||
sigpro: 'SigPro'
|
|
||||||
},
|
|
||||||
plugins: [terser()]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
input: './index.js',
|
|
||||||
external: ['sigpro'],
|
|
||||||
output: {
|
|
||||||
file: './docs/sigpro-ui.umd.min.js',
|
|
||||||
format: 'iife',
|
|
||||||
name: 'SigProUI',
|
|
||||||
globals: {
|
|
||||||
sigpro: 'SigPro'
|
|
||||||
},
|
|
||||||
plugins: [terser()]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
|
||||||
@@ -9,9 +9,7 @@ export const Button = (props, children) => {
|
|||||||
"button",
|
"button",
|
||||||
{
|
{
|
||||||
...rest,
|
...rest,
|
||||||
// Usamos props.class directamente
|
class: joinClass("btn", props.class)
|
||||||
class: joinClass("btn", props.class),
|
|
||||||
disabled: () => val(loading) || val(props.disabled),
|
|
||||||
},
|
},
|
||||||
[
|
[
|
||||||
() => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
|
() => (val(loading) ? $html("span", { class: "loading loading-spinner" }) : null),
|
||||||
|
|||||||
@@ -1,5 +1,45 @@
|
|||||||
|
import { $html } from "sigpro";
|
||||||
|
|
||||||
export const val = t => typeof t === "function" ? t() : t;
|
export const val = t => typeof t === "function" ? t() : t;
|
||||||
|
|
||||||
export const joinClass = (t, l) => typeof l === "function"
|
export const joinClass = (t, l) => typeof l === "function"
|
||||||
? () => `${t} ${l() || ""}`.trim()
|
? () => `${t} ${l() || ""}`.trim()
|
||||||
: `${t} ${l || ""}`.trim();
|
: `${t} ${l || ""}`.trim();
|
||||||
|
|
||||||
|
export const ui = (base, str) => {
|
||||||
|
if (!str) return base;
|
||||||
|
|
||||||
|
const parts = typeof str === 'string' ? str.split(' ') : str;
|
||||||
|
const classes = [base];
|
||||||
|
|
||||||
|
parts.forEach(part => {
|
||||||
|
if (part) classes.push(`${base}-${part}`);
|
||||||
|
});
|
||||||
|
|
||||||
|
return classes.join(' ');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getIcon = (icon) => {
|
||||||
|
if (!icon) return null;
|
||||||
|
|
||||||
|
let position = 'left';
|
||||||
|
let iconValue = icon;
|
||||||
|
|
||||||
|
if (typeof icon === 'string') {
|
||||||
|
const parts = icon.trim().split(/\s+/);
|
||||||
|
if (parts[parts.length - 1] === 'right') {
|
||||||
|
position = 'right';
|
||||||
|
iconValue = parts.slice(0, -1).join(' ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const spacing = position === 'left' ? 'mr-1' : 'ml-1';
|
||||||
|
|
||||||
|
const element = typeof iconValue === 'string' && iconValue.includes('--')
|
||||||
|
? $html("span", { class: `icon-[${iconValue}]` })
|
||||||
|
: typeof iconValue === 'function'
|
||||||
|
? iconValue()
|
||||||
|
: $html("span", {}, iconValue);
|
||||||
|
|
||||||
|
return $html("span", { class: spacing }, element);
|
||||||
|
};
|
||||||
4
src/css/index.js
Normal file
4
src/css/index.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
// css/index.js
|
||||||
|
import './sigpro.css';
|
||||||
|
|
||||||
|
export default { version: '1.0.0' };
|
||||||
3
src/css/sigpro.css
Normal file
3
src/css/sigpro.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui";
|
||||||
|
@plugin "@iconify/tailwind4";
|
||||||
27
src/ui/Accordion.js
Normal file
27
src/ui/Accordion.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
// components/Accordion.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, val, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Accordion = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, title, name, open, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('collapse', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("collapse collapse-arrow bg-base-200 mb-2", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", {
|
||||||
|
...rest,
|
||||||
|
class: classes,
|
||||||
|
}, [
|
||||||
|
$html("input", {
|
||||||
|
type: name ? "radio" : "checkbox",
|
||||||
|
name: name,
|
||||||
|
checked: val(open),
|
||||||
|
}),
|
||||||
|
$html("div", { class: "collapse-title text-xl font-medium" }, title),
|
||||||
|
$html("div", { class: "collapse-content" }, children),
|
||||||
|
]);
|
||||||
|
};
|
||||||
55
src/ui/Alert.js
Normal file
55
src/ui/Alert.js
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
// components/Alert.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, val, joinClass, getIcon } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Alert = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, type = "info", soft = true, actions, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('alert', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const typeClass = () => {
|
||||||
|
const t = val(type);
|
||||||
|
const map = {
|
||||||
|
info: "alert-info",
|
||||||
|
success: "alert-success",
|
||||||
|
warning: "alert-warning",
|
||||||
|
error: "alert-error",
|
||||||
|
};
|
||||||
|
return map[t] || t;
|
||||||
|
};
|
||||||
|
|
||||||
|
const softClass = () => val(soft) ? "alert-soft" : "";
|
||||||
|
|
||||||
|
const classes = joinClass(
|
||||||
|
["alert", typeClass(), softClass()].filter(Boolean).join(' '),
|
||||||
|
dynamicClasses
|
||||||
|
);
|
||||||
|
|
||||||
|
const content = children || props.message;
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
info: "lucide--info",
|
||||||
|
success: "lucide--check-circle",
|
||||||
|
warning: "lucide--alert-triangle",
|
||||||
|
error: "lucide--alert-circle",
|
||||||
|
};
|
||||||
|
|
||||||
|
const iconName = iconMap[val(type)] || iconMap.info;
|
||||||
|
|
||||||
|
return $html("div", {
|
||||||
|
...rest,
|
||||||
|
role: "alert",
|
||||||
|
class: classes,
|
||||||
|
}, [
|
||||||
|
getIcon(iconName),
|
||||||
|
$html("div", { class: "flex-1" }, [
|
||||||
|
$html("span", {}, [typeof content === "function" ? content() : content])
|
||||||
|
]),
|
||||||
|
actions ? $html("div", { class: "flex-none" }, [
|
||||||
|
typeof actions === "function" ? actions() : actions
|
||||||
|
]) : null,
|
||||||
|
]);
|
||||||
|
};
|
||||||
102
src/ui/Autocomplete.js
Normal file
102
src/ui/Autocomplete.js
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
// components/Autocomplete.js
|
||||||
|
import { $, $html, $for } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
import { tt } from "../core/i18n.js";
|
||||||
|
import { Input } from "./Input.js";
|
||||||
|
|
||||||
|
export const Autocomplete = (props) => {
|
||||||
|
const { ui: uiProps, class: className, options = [], value, onSelect, label, placeholder, ...rest } = props;
|
||||||
|
|
||||||
|
const query = $(val(value) || "");
|
||||||
|
const isOpen = $(false);
|
||||||
|
const cursor = $(-1);
|
||||||
|
|
||||||
|
const list = $(() => {
|
||||||
|
const q = query().toLowerCase();
|
||||||
|
const data = val(options) || [];
|
||||||
|
return q
|
||||||
|
? data.filter((o) => (typeof o === "string" ? o : o.label).toLowerCase().includes(q))
|
||||||
|
: data;
|
||||||
|
});
|
||||||
|
|
||||||
|
const pick = (opt) => {
|
||||||
|
const valStr = typeof opt === "string" ? opt : opt.value;
|
||||||
|
const labelStr = typeof opt === "string" ? opt : opt.label;
|
||||||
|
|
||||||
|
query(labelStr);
|
||||||
|
if (typeof value === "function") value(valStr);
|
||||||
|
onSelect?.(opt);
|
||||||
|
|
||||||
|
isOpen(false);
|
||||||
|
cursor(-1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const nav = (e) => {
|
||||||
|
const items = list();
|
||||||
|
if (e.key === "ArrowDown") {
|
||||||
|
e.preventDefault();
|
||||||
|
isOpen(true);
|
||||||
|
cursor(Math.min(cursor() + 1, items.length - 1));
|
||||||
|
} else if (e.key === "ArrowUp") {
|
||||||
|
e.preventDefault();
|
||||||
|
cursor(Math.max(cursor() - 1, 0));
|
||||||
|
} else if (e.key === "Enter" && cursor() >= 0) {
|
||||||
|
e.preventDefault();
|
||||||
|
pick(items[cursor()]);
|
||||||
|
} else if (e.key === "Escape") {
|
||||||
|
isOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('autocomplete', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const containerClasses = joinClass("relative w-full", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { class: containerClasses }, [
|
||||||
|
Input({
|
||||||
|
label,
|
||||||
|
placeholder: placeholder || tt("search")(),
|
||||||
|
value: query,
|
||||||
|
onfocus: () => isOpen(true),
|
||||||
|
onblur: () => setTimeout(() => isOpen(false), 150),
|
||||||
|
onkeydown: nav,
|
||||||
|
oninput: (e) => {
|
||||||
|
const v = e.target.value;
|
||||||
|
query(v);
|
||||||
|
if (typeof value === "function") value(v);
|
||||||
|
isOpen(true);
|
||||||
|
cursor(-1);
|
||||||
|
},
|
||||||
|
...rest,
|
||||||
|
}),
|
||||||
|
$html(
|
||||||
|
"ul",
|
||||||
|
{
|
||||||
|
class: "absolute left-0 w-full menu bg-base-100 rounded-box mt-1 p-2 shadow-xl max-h-60 overflow-y-auto border border-base-300 z-50",
|
||||||
|
style: () => (isOpen() && list().length ? "display:block" : "display:none"),
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$for(
|
||||||
|
list,
|
||||||
|
(opt, i) =>
|
||||||
|
$html("li", {}, [
|
||||||
|
$html(
|
||||||
|
"a",
|
||||||
|
{
|
||||||
|
class: () => `block w-full ${cursor() === i ? "active bg-primary text-primary-content" : ""}`,
|
||||||
|
onclick: () => pick(opt),
|
||||||
|
onmouseenter: () => cursor(i),
|
||||||
|
},
|
||||||
|
typeof opt === "string" ? opt : opt.label,
|
||||||
|
),
|
||||||
|
]),
|
||||||
|
(opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
|
||||||
|
),
|
||||||
|
() => (list().length ? null : $html("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
};
|
||||||
16
src/ui/Badge.js
Normal file
16
src/ui/Badge.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
// components/Badge.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Badge = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('badge', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("badge", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("span", { ...rest, class: classes }, children);
|
||||||
|
};
|
||||||
28
src/ui/Button.js
Normal file
28
src/ui/Button.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
// components/Button.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, val, getIcon, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Button = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, loading, icon, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('btn', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("btn", dynamicClasses);
|
||||||
|
|
||||||
|
const iconEl = getIcon(icon);
|
||||||
|
|
||||||
|
const content = [
|
||||||
|
() => val(loading) && $html("span", { class: "loading loading-spinner" }),
|
||||||
|
iconEl,
|
||||||
|
children,
|
||||||
|
].filter(Boolean);
|
||||||
|
|
||||||
|
return $html("button", {
|
||||||
|
...rest,
|
||||||
|
class: classes,
|
||||||
|
disabled: () => val(loading) || val(props.disabled),
|
||||||
|
}, content);
|
||||||
|
};
|
||||||
26
src/ui/Checkbox.js
Normal file
26
src/ui/Checkbox.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
// components/Checkbox.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Checkbox = (props) => {
|
||||||
|
const { ui: uiProps, class: className, value, tooltip, toggle, label, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('checkbox', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const checkEl = $html("input", {
|
||||||
|
...rest,
|
||||||
|
type: "checkbox",
|
||||||
|
class: () => joinClass(val(toggle) ? "toggle" : "checkbox", dynamicClasses),
|
||||||
|
checked: value
|
||||||
|
});
|
||||||
|
|
||||||
|
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||||
|
checkEl,
|
||||||
|
label ? $html("span", { class: "label-text" }, label) : null,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
||||||
|
};
|
||||||
88
src/ui/Colorpicker.js
Normal file
88
src/ui/Colorpicker.js
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
// components/Colorpicker.js
|
||||||
|
import { $, $html, $if } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Colorpicker = (props) => {
|
||||||
|
const { ui: uiProps, class: className, value, label, ...rest } = props;
|
||||||
|
const isOpen = $(false);
|
||||||
|
|
||||||
|
const palette = [
|
||||||
|
...["#000", "#1A1A1A", "#333", "#4D4D4D", "#666", "#808080", "#B3B3B3", "#FFF"],
|
||||||
|
...["#450a0a", "#7f1d1d", "#991b1b", "#b91c1c", "#dc2626", "#ef4444", "#f87171", "#fca5a5"],
|
||||||
|
...["#431407", "#7c2d12", "#9a3412", "#c2410c", "#ea580c", "#f97316", "#fb923c", "#ffedd5"],
|
||||||
|
...["#713f12", "#a16207", "#ca8a04", "#eab308", "#facc15", "#fde047", "#fef08a", "#fff9c4"],
|
||||||
|
...["#064e3b", "#065f46", "#059669", "#10b981", "#34d399", "#4ade80", "#84cc16", "#d9f99d"],
|
||||||
|
...["#082f49", "#075985", "#0284c7", "#0ea5e9", "#38bdf8", "#7dd3fc", "#22d3ee", "#cffafe"],
|
||||||
|
...["#1e1b4b", "#312e81", "#4338ca", "#4f46e5", "#6366f1", "#818cf8", "#a5b4fc", "#e0e7ff"],
|
||||||
|
...["#2e1065", "#4c1d95", "#6d28d9", "#7c3aed", "#8b5cf6", "#a855f7", "#d946ef", "#fae8ff"],
|
||||||
|
];
|
||||||
|
|
||||||
|
const getColor = () => val(value) || "#000000";
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('colorpicker', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const containerClasses = joinClass("relative w-fit", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { class: containerClasses }, [
|
||||||
|
$html(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
type: "button",
|
||||||
|
class: "btn px-3 bg-base-100 border-base-300 hover:border-primary/50 flex items-center gap-2 shadow-sm font-normal normal-case",
|
||||||
|
onclick: (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
isOpen(!isOpen());
|
||||||
|
},
|
||||||
|
...rest,
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$html("div", {
|
||||||
|
class: "size-5 rounded-sm shadow-inner border border-black/10 shrink-0",
|
||||||
|
style: () => `background-color: ${getColor()}`,
|
||||||
|
}),
|
||||||
|
label ? $html("span", { class: "opacity-80" }, label) : null,
|
||||||
|
],
|
||||||
|
),
|
||||||
|
|
||||||
|
$if(isOpen, () =>
|
||||||
|
$html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
class: "absolute left-0 mt-2 p-3 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[110] w-64 select-none",
|
||||||
|
onclick: (e) => e.stopPropagation(),
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$html(
|
||||||
|
"div",
|
||||||
|
{ class: "grid grid-cols-8 gap-1" },
|
||||||
|
palette.map((c) =>
|
||||||
|
$html("button", {
|
||||||
|
type: "button",
|
||||||
|
style: `background-color: ${c}`,
|
||||||
|
class: () => {
|
||||||
|
const active = getColor().toLowerCase() === c.toLowerCase();
|
||||||
|
return `size-6 rounded-sm cursor-pointer transition-all hover:scale-125 hover:z-10 active:scale-95 outline-none border border-black/5
|
||||||
|
${active ? "ring-2 ring-offset-1 ring-primary z-10 scale-110" : ""}`;
|
||||||
|
},
|
||||||
|
onclick: () => {
|
||||||
|
if (typeof value === "function") value(c);
|
||||||
|
isOpen(false);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
$if(isOpen, () =>
|
||||||
|
$html("div", {
|
||||||
|
class: "fixed inset-0 z-[100]",
|
||||||
|
onclick: () => isOpen(false),
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
};
|
||||||
252
src/ui/Datepicker.js
Normal file
252
src/ui/Datepicker.js
Normal file
@@ -0,0 +1,252 @@
|
|||||||
|
// components/Datepicker.js
|
||||||
|
import { $, $html, $if } from "sigpro";
|
||||||
|
import { val, ui, joinClass, getIcon } from "../core/utils.js";
|
||||||
|
import { Input } from "./Input.js";
|
||||||
|
|
||||||
|
export const Datepicker = (props) => {
|
||||||
|
const { ui: uiProps, class: className, value, range, label, placeholder, hour = false, ...rest } = props;
|
||||||
|
|
||||||
|
const isOpen = $(false);
|
||||||
|
const internalDate = $(new Date());
|
||||||
|
const hoverDate = $(null);
|
||||||
|
const startHour = $(0);
|
||||||
|
const endHour = $(0);
|
||||||
|
const isRangeMode = () => val(range) === true;
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
|
||||||
|
|
||||||
|
const formatDate = (d) => {
|
||||||
|
const year = d.getFullYear();
|
||||||
|
const month = String(d.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(d.getDate()).padStart(2, "0");
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectDate = (date) => {
|
||||||
|
const dateStr = formatDate(date);
|
||||||
|
const current = val(value);
|
||||||
|
|
||||||
|
if (isRangeMode()) {
|
||||||
|
if (!current?.start || (current.start && current.end)) {
|
||||||
|
if (typeof value === "function") {
|
||||||
|
value({
|
||||||
|
start: dateStr,
|
||||||
|
end: null,
|
||||||
|
...(hour && { startHour: startHour() }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const start = current.start;
|
||||||
|
if (typeof value === "function") {
|
||||||
|
const newValue = dateStr < start ? { start: dateStr, end: start } : { start, end: dateStr };
|
||||||
|
if (hour) {
|
||||||
|
newValue.startHour = current.startHour || startHour();
|
||||||
|
newValue.endHour = current.endHour || endHour();
|
||||||
|
}
|
||||||
|
value(newValue);
|
||||||
|
}
|
||||||
|
isOpen(false);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (typeof value === "function") {
|
||||||
|
value(hour ? `${dateStr}T${String(startHour()).padStart(2, "0")}:00:00` : dateStr);
|
||||||
|
}
|
||||||
|
isOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const displayValue = $(() => {
|
||||||
|
const v = val(value);
|
||||||
|
if (!v) return "";
|
||||||
|
if (typeof v === "string") {
|
||||||
|
if (hour && v.includes("T")) return v.replace("T", " ");
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
if (v.start && v.end) {
|
||||||
|
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
|
||||||
|
const endStr = hour && v.endHour ? `${v.end} ${String(v.endHour).padStart(2, "0")}:00` : v.end;
|
||||||
|
return `${startStr} - ${endStr}`;
|
||||||
|
}
|
||||||
|
if (v.start) {
|
||||||
|
const startStr = hour && v.startHour ? `${v.start} ${String(v.startHour).padStart(2, "0")}:00` : v.start;
|
||||||
|
return `${startStr}...`;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
});
|
||||||
|
|
||||||
|
const move = (m) => {
|
||||||
|
const d = internalDate();
|
||||||
|
internalDate(new Date(d.getFullYear(), d.getMonth() + m, 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveYear = (y) => {
|
||||||
|
const d = internalDate();
|
||||||
|
internalDate(new Date(d.getFullYear() + y, d.getMonth(), 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
const HourSlider = ({ value: hVal, onChange }) => {
|
||||||
|
return $html("div", { class: "flex-1" }, [
|
||||||
|
$html("div", { class: "flex gap-2 items-center" }, [
|
||||||
|
$html("input", {
|
||||||
|
type: "range",
|
||||||
|
min: 0,
|
||||||
|
max: 23,
|
||||||
|
value: hVal,
|
||||||
|
class: "range range-xs flex-1",
|
||||||
|
oninput: (e) => {
|
||||||
|
const newHour = parseInt(e.target.value);
|
||||||
|
onChange(newHour);
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
$html("span", { class: "text-sm font-mono min-w-[48px] text-center" },
|
||||||
|
() => String(val(hVal)).padStart(2, "0") + ":00"
|
||||||
|
),
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('datepicker', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const containerClasses = joinClass("relative w-full", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { class: containerClasses }, [
|
||||||
|
Input({
|
||||||
|
label,
|
||||||
|
placeholder: placeholder || (isRangeMode() ? "Seleccionar rango..." : "Seleccionar fecha..."),
|
||||||
|
value: displayValue,
|
||||||
|
readonly: true,
|
||||||
|
icon: getIcon("lucide--calendar"),
|
||||||
|
onclick: (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
isOpen(!isOpen());
|
||||||
|
},
|
||||||
|
...rest,
|
||||||
|
}),
|
||||||
|
|
||||||
|
$if(isOpen, () =>
|
||||||
|
$html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
class: "absolute left-0 mt-2 p-4 bg-base-100 border border-base-300 shadow-2xl rounded-box z-[100] w-80 select-none",
|
||||||
|
onclick: (e) => e.stopPropagation(),
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$html("div", { class: "flex justify-between items-center mb-4 gap-1" }, [
|
||||||
|
$html("div", { class: "flex gap-0.5" }, [
|
||||||
|
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(-1) },
|
||||||
|
getIcon("lucide--chevrons-left")
|
||||||
|
),
|
||||||
|
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(-1) },
|
||||||
|
getIcon("lucide--chevron-left")
|
||||||
|
),
|
||||||
|
]),
|
||||||
|
$html("span", { class: "font-bold uppercase flex-1 text-center" }, [
|
||||||
|
() => internalDate().toLocaleString("es-ES", { month: "short", year: "numeric" }),
|
||||||
|
]),
|
||||||
|
$html("div", { class: "flex gap-0.5" }, [
|
||||||
|
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => move(1) },
|
||||||
|
getIcon("lucide--chevron-right")
|
||||||
|
),
|
||||||
|
$html("button", { type: "button", class: "btn btn-ghost btn-xs px-1", onclick: () => moveYear(1) },
|
||||||
|
getIcon("lucide--chevrons-right")
|
||||||
|
),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
|
||||||
|
$html("div", { class: "grid grid-cols-7 gap-1", onmouseleave: () => hoverDate(null) }, [
|
||||||
|
...["L", "M", "X", "J", "V", "S", "D"].map((d) => $html("div", { class: "text-[10px] opacity-40 font-bold text-center" }, d)),
|
||||||
|
() => {
|
||||||
|
const d = internalDate();
|
||||||
|
const year = d.getFullYear();
|
||||||
|
const month = d.getMonth();
|
||||||
|
const firstDay = new Date(year, month, 1).getDay();
|
||||||
|
const offset = firstDay === 0 ? 6 : firstDay - 1;
|
||||||
|
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
||||||
|
|
||||||
|
const nodes = [];
|
||||||
|
for (let i = 0; i < offset; i++) nodes.push($html("div"));
|
||||||
|
|
||||||
|
for (let i = 1; i <= daysInMonth; i++) {
|
||||||
|
const date = new Date(year, month, i);
|
||||||
|
const dStr = formatDate(date);
|
||||||
|
|
||||||
|
nodes.push(
|
||||||
|
$html(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
type: "button",
|
||||||
|
class: () => {
|
||||||
|
const v = val(value);
|
||||||
|
const h = hoverDate();
|
||||||
|
const isStart = typeof v === "string" ? v.split("T")[0] === dStr : v?.start === dStr;
|
||||||
|
const isEnd = v?.end === dStr;
|
||||||
|
let inRange = false;
|
||||||
|
|
||||||
|
if (isRangeMode() && v?.start) {
|
||||||
|
const start = v.start;
|
||||||
|
if (!v.end && h) {
|
||||||
|
inRange = (dStr > start && dStr <= h) || (dStr < start && dStr >= h);
|
||||||
|
} else if (v.end) {
|
||||||
|
inRange = dStr > start && dStr < v.end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const base = "btn btn-xs p-0 aspect-square min-h-0 h-auto font-normal relative";
|
||||||
|
const state = isStart || isEnd ? "btn-primary z-10" : inRange ? "bg-primary/20 border-none rounded-none" : "btn-ghost";
|
||||||
|
const today = dStr === todayStr ? "ring-1 ring-primary ring-inset font-black text-primary" : "";
|
||||||
|
|
||||||
|
return `${base} ${state} ${today}`;
|
||||||
|
},
|
||||||
|
onmouseenter: () => { if (isRangeMode()) hoverDate(dStr); },
|
||||||
|
onclick: () => selectDate(date),
|
||||||
|
},
|
||||||
|
[i.toString()],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return nodes;
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
|
||||||
|
hour ? $html("div", { class: "mt-3 pt-2 border-t border-base-300" }, [
|
||||||
|
isRangeMode()
|
||||||
|
? $html("div", { class: "flex gap-4" }, [
|
||||||
|
HourSlider({
|
||||||
|
value: startHour,
|
||||||
|
onChange: (newHour) => {
|
||||||
|
startHour(newHour);
|
||||||
|
const currentVal = val(value);
|
||||||
|
if (currentVal?.start) value({ ...currentVal, startHour: newHour });
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
HourSlider({
|
||||||
|
value: endHour,
|
||||||
|
onChange: (newHour) => {
|
||||||
|
endHour(newHour);
|
||||||
|
const currentVal = val(value);
|
||||||
|
if (currentVal?.end) value({ ...currentVal, endHour: newHour });
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
])
|
||||||
|
: HourSlider({
|
||||||
|
value: startHour,
|
||||||
|
onChange: (newHour) => {
|
||||||
|
startHour(newHour);
|
||||||
|
const currentVal = val(value);
|
||||||
|
if (currentVal && typeof currentVal === "string" && currentVal.includes("-")) {
|
||||||
|
value(currentVal.split("T")[0] + "T" + String(newHour).padStart(2, "0") + ":00:00");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
]) : null,
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
$if(isOpen, () => $html("div", { class: "fixed inset-0 z-[90]", onclick: () => isOpen(false) })),
|
||||||
|
]);
|
||||||
|
};
|
||||||
28
src/ui/Drawer.js
Normal file
28
src/ui/Drawer.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
// components/Drawer.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, val, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Drawer = (props) => {
|
||||||
|
const { ui: uiProps, class: className, id, open, content, side, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('drawer', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("drawer", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { ...rest, class: classes }, [
|
||||||
|
$html("input", {
|
||||||
|
id,
|
||||||
|
type: "checkbox",
|
||||||
|
class: "drawer-toggle",
|
||||||
|
checked: val(open),
|
||||||
|
}),
|
||||||
|
$html("div", { class: "drawer-content" }, content),
|
||||||
|
$html("div", { class: "drawer-side" }, [
|
||||||
|
$html("label", { for: id, class: "drawer-overlay", onclick: () => open?.(false) }),
|
||||||
|
$html("div", { class: "min-h-full bg-base-200 w-80" }, side),
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
};
|
||||||
61
src/ui/Dropdown.js
Normal file
61
src/ui/Dropdown.js
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
// components/Dropdown.js
|
||||||
|
import { $html, $for } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Dropdown = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, label, icon, items, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('dropdown', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const containerClasses = joinClass("dropdown", dynamicClasses);
|
||||||
|
|
||||||
|
const renderContent = () => {
|
||||||
|
if (items) {
|
||||||
|
const source = typeof items === "function" ? items : () => items;
|
||||||
|
return $html("ul", {
|
||||||
|
tabindex: 0,
|
||||||
|
class: "dropdown-content z-[50] menu p-2 shadow bg-base-100 rounded-box w-52 border border-base-300"
|
||||||
|
}, [
|
||||||
|
$for(source, (item) =>
|
||||||
|
$html("li", {}, [
|
||||||
|
$html("a", {
|
||||||
|
class: item.class || "",
|
||||||
|
onclick: (e) => {
|
||||||
|
if (item.onclick) item.onclick(e);
|
||||||
|
if (document.activeElement) document.activeElement.blur();
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
item.icon ? $html("span", {}, item.icon) : null,
|
||||||
|
$html("span", {}, item.label)
|
||||||
|
])
|
||||||
|
])
|
||||||
|
)
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return $html("div", {
|
||||||
|
tabindex: 0,
|
||||||
|
class: "dropdown-content z-[50] p-2 shadow bg-base-100 rounded-box min-w-max border border-base-300"
|
||||||
|
}, [
|
||||||
|
typeof children === "function" ? children() : children
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
|
||||||
|
return $html("div", {
|
||||||
|
...rest,
|
||||||
|
class: containerClasses,
|
||||||
|
}, [
|
||||||
|
$html("div", {
|
||||||
|
tabindex: 0,
|
||||||
|
role: "button",
|
||||||
|
class: "btn m-1 flex items-center gap-2",
|
||||||
|
}, [
|
||||||
|
icon ? (typeof icon === "function" ? icon() : icon) : null,
|
||||||
|
label ? (typeof label === "function" ? label() : label) : null
|
||||||
|
]),
|
||||||
|
renderContent()
|
||||||
|
]);
|
||||||
|
};
|
||||||
54
src/ui/Fab.js
Normal file
54
src/ui/Fab.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
// components/Fab.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val, ui, joinClass, getIcon } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Fab = (props) => {
|
||||||
|
const { ui: uiProps, class: className, icon, label, actions = [], position = "bottom-6 right-6", ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('fab', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const containerClasses = joinClass(`fab absolute ${position} flex flex-col-reverse items-end gap-3 z-[100]`, dynamicClasses);
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
class: containerClasses,
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
tabindex: 0,
|
||||||
|
role: "button",
|
||||||
|
class: "btn btn-lg btn-circle btn-primary shadow-2xl",
|
||||||
|
},
|
||||||
|
[
|
||||||
|
icon ? getIcon(icon) : null,
|
||||||
|
!icon && label ? label : null
|
||||||
|
],
|
||||||
|
),
|
||||||
|
|
||||||
|
...val(actions).map((act) =>
|
||||||
|
$html("div", { class: "flex items-center gap-3 transition-all duration-300" }, [
|
||||||
|
act.label ? $html("span", { class: "badge badge-ghost shadow-sm whitespace-nowrap" }, act.label) : null,
|
||||||
|
$html(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
type: "button",
|
||||||
|
class: `btn btn-circle shadow-lg ${act.class || ""}`,
|
||||||
|
onclick: (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
act.onclick?.(e);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[act.icon ? getIcon(act.icon) : act.text || ""],
|
||||||
|
),
|
||||||
|
]),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
};
|
||||||
29
src/ui/Fieldset.js
Normal file
29
src/ui/Fieldset.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
// components/Fieldset.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Fieldset = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, legend, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('fieldset', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("fieldset bg-base-200 border border-base-300 p-4 rounded-lg", dynamicClasses);
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"fieldset",
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
class: classes,
|
||||||
|
},
|
||||||
|
[
|
||||||
|
() => {
|
||||||
|
const legendText = val(legend);
|
||||||
|
return legendText ? $html("legend", { class: "fieldset-legend font-bold" }, [legendText]) : null;
|
||||||
|
},
|
||||||
|
children,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
};
|
||||||
120
src/ui/Fileinput.js
Normal file
120
src/ui/Fileinput.js
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
// components/Fileinput.js
|
||||||
|
import { $, $html, $if, $for } from "sigpro";
|
||||||
|
import { val, ui, joinClass, getIcon } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Fileinput = (props) => {
|
||||||
|
const { ui: uiProps, class: className, tooltip, max = 2, accept = "*", onSelect, ...rest } = props;
|
||||||
|
|
||||||
|
const selectedFiles = $([]);
|
||||||
|
const isDragging = $(false);
|
||||||
|
const error = $(null);
|
||||||
|
const MAX_BYTES = max * 1024 * 1024;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('fileinput', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const fieldsetClasses = joinClass("fieldset w-full p-0", dynamicClasses);
|
||||||
|
|
||||||
|
const handleFiles = (files) => {
|
||||||
|
const fileList = Array.from(files);
|
||||||
|
error(null);
|
||||||
|
const oversized = fileList.find((f) => f.size > MAX_BYTES);
|
||||||
|
|
||||||
|
if (oversized) {
|
||||||
|
error(`Máx ${max}MB`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
selectedFiles([...selectedFiles(), ...fileList]);
|
||||||
|
onSelect?.(selectedFiles());
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeFile = (index) => {
|
||||||
|
const updated = selectedFiles().filter((_, i) => i !== index);
|
||||||
|
selectedFiles(updated);
|
||||||
|
onSelect?.(updated);
|
||||||
|
};
|
||||||
|
|
||||||
|
return $html("fieldset", { ...rest, class: fieldsetClasses }, [
|
||||||
|
$html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
class: () => `w-full ${tooltip ? "tooltip tooltip-top before:z-50 after:z-50" : ""}`,
|
||||||
|
"data-tip": tooltip,
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$html(
|
||||||
|
"label",
|
||||||
|
{
|
||||||
|
class: () => `
|
||||||
|
relative flex items-center justify-between w-full h-12 px-4
|
||||||
|
border-2 border-dashed rounded-lg cursor-pointer
|
||||||
|
transition-all duration-200
|
||||||
|
${isDragging() ? "border-primary bg-primary/10" : "border-base-content/20 bg-base-100 hover:bg-base-200"}
|
||||||
|
`,
|
||||||
|
ondragover: (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
isDragging(true);
|
||||||
|
},
|
||||||
|
ondragleave: () => isDragging(false),
|
||||||
|
ondrop: (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
isDragging(false);
|
||||||
|
handleFiles(e.dataTransfer.files);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$html("div", { class: "flex items-center gap-3 w-full" }, [
|
||||||
|
getIcon("lucide--upload"),
|
||||||
|
$html("span", { class: "text-sm opacity-70 truncate grow text-left" }, "Arrastra o selecciona archivos..."),
|
||||||
|
$html("span", { class: "text-[10px] opacity-40 shrink-0" }, `Máx ${max}MB`),
|
||||||
|
]),
|
||||||
|
$html("input", {
|
||||||
|
type: "file",
|
||||||
|
multiple: true,
|
||||||
|
accept: accept,
|
||||||
|
class: "hidden",
|
||||||
|
onchange: (e) => handleFiles(e.target.files),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
|
||||||
|
() => (error() ? $html("span", { class: "text-[10px] text-error mt-1 px-1 font-medium" }, error()) : null),
|
||||||
|
|
||||||
|
$if(
|
||||||
|
() => selectedFiles().length > 0,
|
||||||
|
() =>
|
||||||
|
$html("ul", { class: "mt-2 space-y-1" }, [
|
||||||
|
$for(
|
||||||
|
selectedFiles,
|
||||||
|
(file, index) =>
|
||||||
|
$html("li", { class: "flex items-center justify-between p-1.5 pl-3 text-xs bg-base-200/50 rounded-md border border-base-300" }, [
|
||||||
|
$html("div", { class: "flex items-center gap-2 truncate" }, [
|
||||||
|
$html("span", { class: "opacity-50" }, "📄"),
|
||||||
|
$html("span", { class: "truncate font-medium max-w-[200px]" }, file.name),
|
||||||
|
$html("span", { class: "text-[9px] opacity-40" }, `(${(file.size / 1024).toFixed(0)} KB)`),
|
||||||
|
]),
|
||||||
|
$html(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
type: "button",
|
||||||
|
class: "btn btn-ghost btn-xs btn-circle",
|
||||||
|
onclick: (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
removeFile(index);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[getIcon("lucide--x")]
|
||||||
|
),
|
||||||
|
]),
|
||||||
|
(file) => file.name + file.lastModified,
|
||||||
|
),
|
||||||
|
]),
|
||||||
|
),
|
||||||
|
]);
|
||||||
|
};
|
||||||
19
src/ui/Indicator.js
Normal file
19
src/ui/Indicator.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
// components/Indicator.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, val, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Indicator = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, badge, badgeClass = "badge-secondary", ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('indicator', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("indicator", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { ...rest, class: classes }, [
|
||||||
|
children,
|
||||||
|
badge ? $html("span", { class: joinClass("indicator-item badge", badgeClass) }, val(badge)) : null,
|
||||||
|
]);
|
||||||
|
};
|
||||||
76
src/ui/Input.js
Normal file
76
src/ui/Input.js
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
// components/Input.js
|
||||||
|
import { $, $html } from "sigpro";
|
||||||
|
import { val, ui, joinClass, getIcon } from "../core/utils.js";
|
||||||
|
import { tt } from "../core/i18n.js";
|
||||||
|
|
||||||
|
export const Input = (props) => {
|
||||||
|
const { ui: uiProps, class: className, label, tip, value, error, isSearch, icon, type = "text", ...rest } = props;
|
||||||
|
const isPassword = type === "password";
|
||||||
|
const visible = $(false);
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
text: "lucide--text",
|
||||||
|
password: "lucide--lock",
|
||||||
|
date: "lucide--calendar",
|
||||||
|
number: "lucide--hash",
|
||||||
|
email: "lucide--mail",
|
||||||
|
search: "lucide--search",
|
||||||
|
};
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('input', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const inputClasses = joinClass("input input-bordered floating-label flex items-center gap-2 w-full relative", val(error) ? "input-error" : "");
|
||||||
|
|
||||||
|
const inputEl = $html("input", {
|
||||||
|
...rest,
|
||||||
|
type: () => (isPassword ? (visible() ? "text" : "password") : type),
|
||||||
|
placeholder: props.placeholder || label || (isSearch ? tt("search")() : " "),
|
||||||
|
class: joinClass("grow order-2 focus:outline-none", dynamicClasses),
|
||||||
|
value: value,
|
||||||
|
oninput: (e) => props.oninput?.(e),
|
||||||
|
disabled: () => val(props.disabled),
|
||||||
|
});
|
||||||
|
|
||||||
|
const leftIcon = icon
|
||||||
|
? getIcon(icon)
|
||||||
|
: (iconMap[type] ? getIcon(iconMap[type]) : null);
|
||||||
|
|
||||||
|
const passwordIcon = getIcon(visible() ? "lucide--eye-off" : "lucide--eye");
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"label",
|
||||||
|
{
|
||||||
|
class: inputClasses,
|
||||||
|
},
|
||||||
|
[
|
||||||
|
leftIcon ? $html("div", { class: "order-1 shrink-0" }, leftIcon) : null,
|
||||||
|
label ? $html("span", { class: "text-base-content/60 order-0" }, label) : null,
|
||||||
|
inputEl,
|
||||||
|
isPassword
|
||||||
|
? $html(
|
||||||
|
"button",
|
||||||
|
{
|
||||||
|
type: "button",
|
||||||
|
class: "order-3 btn btn-ghost btn-xs btn-circle opacity-50 hover:opacity-100",
|
||||||
|
onclick: (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
visible(!visible());
|
||||||
|
},
|
||||||
|
},
|
||||||
|
() => passwordIcon
|
||||||
|
)
|
||||||
|
: null,
|
||||||
|
tip
|
||||||
|
? $html(
|
||||||
|
"div",
|
||||||
|
{ class: "tooltip tooltip-left order-4", "data-tip": tip },
|
||||||
|
$html("span", { class: "badge badge-ghost badge-xs cursor-help" }, "?"),
|
||||||
|
)
|
||||||
|
: null,
|
||||||
|
() => (val(error) ? $html("span", { class: "text-error text-[10px] absolute -bottom-5 left-2" }, val(error)) : null),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
};
|
||||||
37
src/ui/List.js
Normal file
37
src/ui/List.js
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
// components/List.js
|
||||||
|
import { $html, $if, $for } from "sigpro";
|
||||||
|
import { ui, joinClass, val } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const List = (props) => {
|
||||||
|
const {
|
||||||
|
ui: uiProps,
|
||||||
|
class: className,
|
||||||
|
items,
|
||||||
|
header,
|
||||||
|
render,
|
||||||
|
keyFn = (item, index) => index,
|
||||||
|
...rest
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('list', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const listClasses = joinClass("list bg-base-100 rounded-box shadow-md", dynamicClasses);
|
||||||
|
|
||||||
|
const listItems = $for(
|
||||||
|
items,
|
||||||
|
(item, index) => $html("li", { class: "list-row" }, [render(item, index)]),
|
||||||
|
keyFn
|
||||||
|
);
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"ul",
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
class: listClasses,
|
||||||
|
},
|
||||||
|
header ? [$if(header, () => $html("li", { class: "p-4 pb-2 text-xs opacity-60" }, [val(header)])), listItems] : listItems
|
||||||
|
);
|
||||||
|
};
|
||||||
13
src/ui/Loading.js
Normal file
13
src/ui/Loading.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import { $html, $if } from "sigpro";
|
||||||
|
|
||||||
|
/** LOADING (Overlay Component) */
|
||||||
|
export const Loading = (props) => {
|
||||||
|
// Se espera un signal props.$show para controlar la visibilidad
|
||||||
|
return $if(props.$show, () =>
|
||||||
|
$html("div", {
|
||||||
|
class: "fixed inset-0 z-[100] flex items-center justify-center backdrop-blur-sm bg-base-100/30"
|
||||||
|
}, [
|
||||||
|
$html("span", { class: "loading loading-spinner loading-lg text-primary" }),
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
};
|
||||||
34
src/ui/Menu.js
Normal file
34
src/ui/Menu.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
// components/Menu.js
|
||||||
|
import { $html, $for } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Menu = (props) => {
|
||||||
|
const { ui: uiProps, class: className, items, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('menu', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const menuClasses = joinClass("menu bg-base-200 rounded-box", dynamicClasses);
|
||||||
|
|
||||||
|
const renderItems = (items) =>
|
||||||
|
$for(
|
||||||
|
() => items || [],
|
||||||
|
(it) =>
|
||||||
|
$html("li", {}, [
|
||||||
|
it.children
|
||||||
|
? $html("details", { open: it.open }, [
|
||||||
|
$html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
|
||||||
|
$html("ul", {}, renderItems(it.children)),
|
||||||
|
])
|
||||||
|
: $html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
|
||||||
|
it.icon && $html("span", { class: "mr-2" }, it.icon),
|
||||||
|
it.label,
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
(it, i) => it.label || i,
|
||||||
|
);
|
||||||
|
|
||||||
|
return $html("ul", { ...rest, class: menuClasses }, renderItems(items));
|
||||||
|
};
|
||||||
58
src/ui/Modal.js
Normal file
58
src/ui/Modal.js
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
// components/Modal.js
|
||||||
|
import { $html, $watch } from "sigpro";
|
||||||
|
import { ui, val, joinClass } from "../core/utils.js";
|
||||||
|
import { tt } from "../core/i18n.js";
|
||||||
|
import { Button } from "./Button.js";
|
||||||
|
|
||||||
|
export const Modal = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, title, buttons, open, ...rest } = props;
|
||||||
|
const dialogRef = { current: null };
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('modal', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const modalClasses = joinClass("modal", dynamicClasses);
|
||||||
|
|
||||||
|
$watch(() => {
|
||||||
|
const dialog = dialogRef.current;
|
||||||
|
if (!dialog) return;
|
||||||
|
|
||||||
|
if (val(open)) {
|
||||||
|
if (!dialog.open) dialog.showModal();
|
||||||
|
} else {
|
||||||
|
if (dialog.open) dialog.close();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const close = (e) => {
|
||||||
|
if (e && e.preventDefault) e.preventDefault();
|
||||||
|
if (typeof open === "function") open(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return $html("dialog", {
|
||||||
|
...rest,
|
||||||
|
ref: dialogRef,
|
||||||
|
class: modalClasses,
|
||||||
|
oncancel: () => typeof open === "function" && open(false)
|
||||||
|
}, [
|
||||||
|
$html("div", { class: "modal-box" }, [
|
||||||
|
title ? $html("h3", { class: "text-lg font-bold mb-4" }, title) : null,
|
||||||
|
$html("div", { class: "py-2" }, [
|
||||||
|
typeof children === "function" ? children() : children
|
||||||
|
]),
|
||||||
|
$html("div", { class: "modal-action flex gap-2" }, [
|
||||||
|
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
|
||||||
|
Button({ type: "button", onclick: close }, tt("close")()),
|
||||||
|
]),
|
||||||
|
]),
|
||||||
|
$html("form", {
|
||||||
|
method: "dialog",
|
||||||
|
class: "modal-backdrop",
|
||||||
|
onsubmit: close
|
||||||
|
}, [
|
||||||
|
$html("button", {}, "close")
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
};
|
||||||
16
src/ui/Navbar.js
Normal file
16
src/ui/Navbar.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
// components/Navbar.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Navbar = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('navbar', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("navbar bg-base-100 shadow-sm px-4", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { ...rest, class: classes }, children);
|
||||||
|
};
|
||||||
34
src/ui/Radio.js
Normal file
34
src/ui/Radio.js
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
// components/Radio.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Radio = (props) => {
|
||||||
|
const { ui: uiProps, class: className, label, tooltip, value, inputValue, name, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('radio', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const radioClasses = joinClass("radio", dynamicClasses);
|
||||||
|
|
||||||
|
const radioEl = $html("input", {
|
||||||
|
...rest,
|
||||||
|
type: "radio",
|
||||||
|
name: name,
|
||||||
|
class: radioClasses,
|
||||||
|
checked: () => val(value) === inputValue,
|
||||||
|
onclick: () => {
|
||||||
|
if (typeof value === "function") value(inputValue);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!label && !tooltip) return radioEl;
|
||||||
|
|
||||||
|
const layout = $html("label", { class: "label cursor-pointer justify-start gap-3" }, [
|
||||||
|
radioEl,
|
||||||
|
label ? $html("span", { class: "label-text" }, label) : null,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
||||||
|
};
|
||||||
31
src/ui/Range.js
Normal file
31
src/ui/Range.js
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
// components/Range.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Range = (props) => {
|
||||||
|
const { ui: uiProps, class: className, label, tooltip, value, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('range', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const rangeClasses = joinClass("range", dynamicClasses);
|
||||||
|
|
||||||
|
const rangeEl = $html("input", {
|
||||||
|
...rest,
|
||||||
|
type: "range",
|
||||||
|
class: rangeClasses,
|
||||||
|
value: value,
|
||||||
|
disabled: () => val(props.disabled)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!label && !tooltip) return rangeEl;
|
||||||
|
|
||||||
|
const layout = $html("div", { class: "flex flex-col gap-2" }, [
|
||||||
|
label ? $html("span", { class: "label-text" }, label) : null,
|
||||||
|
rangeEl
|
||||||
|
]);
|
||||||
|
|
||||||
|
return tooltip ? $html("div", { class: "tooltip", "data-tip": tooltip }, layout) : layout;
|
||||||
|
};
|
||||||
41
src/ui/Rating.js
Normal file
41
src/ui/Rating.js
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
// components/Rating.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Rating = (props) => {
|
||||||
|
const { ui: uiProps, class: className, value, count = 5, mask = "mask-star", readonly = false, onchange, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('rating', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const ratingGroup = `rating-${Math.random().toString(36).slice(2, 7)}`;
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
class: () => joinClass(`rating ${val(readonly) ? "pointer-events-none" : ""}`, dynamicClasses),
|
||||||
|
},
|
||||||
|
Array.from({ length: val(count) }, (_, i) => {
|
||||||
|
const starValue = i + 1;
|
||||||
|
return $html("input", {
|
||||||
|
type: "radio",
|
||||||
|
name: ratingGroup,
|
||||||
|
class: `mask ${mask}`,
|
||||||
|
checked: () => Math.round(val(value)) === starValue,
|
||||||
|
onchange: () => {
|
||||||
|
if (!val(readonly)) {
|
||||||
|
if (typeof onchange === "function") {
|
||||||
|
onchange(starValue);
|
||||||
|
}
|
||||||
|
else if (typeof value === "function") {
|
||||||
|
value(starValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
43
src/ui/Select.js
Normal file
43
src/ui/Select.js
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
// components/Select.js
|
||||||
|
import { $html, $for } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Select = (props) => {
|
||||||
|
const { ui: uiProps, class: className, label, options, value, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('select', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const selectClasses = joinClass("select select-bordered w-full", dynamicClasses);
|
||||||
|
|
||||||
|
const selectEl = $html(
|
||||||
|
"select",
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
class: selectClasses,
|
||||||
|
value: value
|
||||||
|
},
|
||||||
|
$for(
|
||||||
|
() => val(options) || [],
|
||||||
|
(opt) =>
|
||||||
|
$html(
|
||||||
|
"option",
|
||||||
|
{
|
||||||
|
value: opt.value,
|
||||||
|
$selected: () => String(val(value)) === String(opt.value),
|
||||||
|
},
|
||||||
|
opt.label,
|
||||||
|
),
|
||||||
|
(opt) => opt.value,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!label) return selectEl;
|
||||||
|
|
||||||
|
return $html("label", { class: "fieldset-label flex flex-col gap-1" }, [
|
||||||
|
$html("span", {}, label),
|
||||||
|
selectEl
|
||||||
|
]);
|
||||||
|
};
|
||||||
16
src/ui/Stack.js
Normal file
16
src/ui/Stack.js
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
// components/Stack.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Stack = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('stack', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("stack", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { ...rest, class: classes }, children);
|
||||||
|
};
|
||||||
21
src/ui/Stat.js
Normal file
21
src/ui/Stat.js
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
// components/Stat.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Stat = (props) => {
|
||||||
|
const { ui: uiProps, class: className, icon, label, value, desc, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('stat', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("stat", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { ...rest, class: classes }, [
|
||||||
|
icon && $html("div", { class: "stat-figure text-secondary" }, icon),
|
||||||
|
label && $html("div", { class: "stat-title" }, label),
|
||||||
|
$html("div", { class: "stat-value" }, () => val(value) ?? value),
|
||||||
|
desc && $html("div", { class: "stat-desc" }, desc),
|
||||||
|
]);
|
||||||
|
};
|
||||||
23
src/ui/Swap.js
Normal file
23
src/ui/Swap.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
// components/Swap.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, val, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Swap = (props) => {
|
||||||
|
const { ui: uiProps, class: className, value, on, off, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('swap', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const classes = joinClass("swap", dynamicClasses);
|
||||||
|
|
||||||
|
return $html("label", { ...rest, class: classes }, [
|
||||||
|
$html("input", {
|
||||||
|
type: "checkbox",
|
||||||
|
checked: val(value)
|
||||||
|
}),
|
||||||
|
$html("div", { class: "swap-on" }, on),
|
||||||
|
$html("div", { class: "swap-off" }, off),
|
||||||
|
]);
|
||||||
|
};
|
||||||
67
src/ui/Table.js
Normal file
67
src/ui/Table.js
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
// components/Table.js
|
||||||
|
import { $html, $for, $if } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
import { tt } from "../core/i18n.js";
|
||||||
|
|
||||||
|
export const Table = (props) => {
|
||||||
|
const {
|
||||||
|
ui: uiProps,
|
||||||
|
class: className,
|
||||||
|
items = [],
|
||||||
|
columns = [],
|
||||||
|
keyFn,
|
||||||
|
zebra = false,
|
||||||
|
pinRows = false,
|
||||||
|
empty = tt("nodata")(),
|
||||||
|
...rest
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('table', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const tableClass = () => joinClass(
|
||||||
|
"table",
|
||||||
|
`${val(zebra) ? "table-zebra" : ""} ${val(pinRows) ? "table-pin-rows" : ""} ${dynamicClasses}`
|
||||||
|
);
|
||||||
|
|
||||||
|
return $html("div", { class: "overflow-x-auto w-full bg-base-100 rounded-box border border-base-300" }, [
|
||||||
|
$html("table", { ...rest, class: tableClass }, [
|
||||||
|
$html("thead", {}, [
|
||||||
|
$html("tr", {},
|
||||||
|
columns.map(col => $html("th", { class: col.class || "" }, col.label))
|
||||||
|
)
|
||||||
|
]),
|
||||||
|
$html("tbody", {}, [
|
||||||
|
$for(items, (item, index) => {
|
||||||
|
return $html("tr", { class: "hover" },
|
||||||
|
columns.map(col => {
|
||||||
|
const cellContent = () => {
|
||||||
|
if (col.render) return col.render(item, index);
|
||||||
|
const value = item[col.key];
|
||||||
|
return val(value);
|
||||||
|
};
|
||||||
|
return $html("td", { class: col.class || "" }, [cellContent]);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}, keyFn || ((item, idx) => item.id || idx)),
|
||||||
|
|
||||||
|
$if(() => val(items).length === 0, () =>
|
||||||
|
$html("tr", {}, [
|
||||||
|
$html("td", { colspan: columns.length, class: "text-center p-10 opacity-50" }, [
|
||||||
|
val(empty)
|
||||||
|
])
|
||||||
|
])
|
||||||
|
)
|
||||||
|
]),
|
||||||
|
$if(() => columns.some(c => c.footer), () =>
|
||||||
|
$html("tfoot", {}, [
|
||||||
|
$html("tr", {},
|
||||||
|
columns.map(col => $html("th", {}, col.footer || ""))
|
||||||
|
)
|
||||||
|
])
|
||||||
|
)
|
||||||
|
])
|
||||||
|
]);
|
||||||
|
};
|
||||||
69
src/ui/Tabs.js
Normal file
69
src/ui/Tabs.js
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
// components/Tabs.js
|
||||||
|
import { $, $html, $for } from "sigpro";
|
||||||
|
import { val, ui, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Tabs = (props) => {
|
||||||
|
const { ui: uiProps, class: className, items, activeIndex = $(0), ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('tabs', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const tabsClasses = joinClass("tabs tabs-box", dynamicClasses);
|
||||||
|
const itemsSignal = typeof items === "function" ? items : () => items || [];
|
||||||
|
|
||||||
|
// Si no se provee activeIndex, creamos uno interno
|
||||||
|
const internalActive = $(0);
|
||||||
|
const currentActive = activeIndex !== undefined ? activeIndex : internalActive;
|
||||||
|
|
||||||
|
const handleTabClick = (idx, onClick) => (e) => {
|
||||||
|
if (typeof currentActive === "function") {
|
||||||
|
currentActive(idx);
|
||||||
|
}
|
||||||
|
onClick?.(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
|
||||||
|
$html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
role: "tablist",
|
||||||
|
class: tabsClasses,
|
||||||
|
},
|
||||||
|
$for(
|
||||||
|
itemsSignal,
|
||||||
|
(it, idx) => {
|
||||||
|
const isActive = val(it.active) ?? (currentActive() === idx);
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"a",
|
||||||
|
{
|
||||||
|
role: "tab",
|
||||||
|
class: () => joinClass(
|
||||||
|
"tab",
|
||||||
|
isActive && "tab-active",
|
||||||
|
val(it.disabled) && "tab-disabled",
|
||||||
|
it.tip && "tooltip"
|
||||||
|
),
|
||||||
|
"data-tip": it.tip,
|
||||||
|
onclick: !val(it.disabled) ? handleTabClick(idx, it.onclick) : undefined,
|
||||||
|
},
|
||||||
|
it.label,
|
||||||
|
);
|
||||||
|
},
|
||||||
|
(t, idx) => t.label + idx,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
() => {
|
||||||
|
const activeItem = itemsSignal().find((it, idx) =>
|
||||||
|
val(it.active) ?? (currentActive() === idx)
|
||||||
|
);
|
||||||
|
if (!activeItem) return null;
|
||||||
|
const content = val(activeItem.content);
|
||||||
|
return $html("div", { class: "p-4" }, [
|
||||||
|
typeof content === "function" ? content() : content
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
54
src/ui/Timeline.js
Normal file
54
src/ui/Timeline.js
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
// components/Timeline.js
|
||||||
|
import { $html, $for } from "sigpro";
|
||||||
|
import { val, ui, joinClass, getIcon } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Timeline = (props) => {
|
||||||
|
const { ui: uiProps, class: className, items = [], vertical = true, compact = false, ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('timeline', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
info: "lucide--info",
|
||||||
|
success: "lucide--check-circle",
|
||||||
|
warning: "lucide--alert-triangle",
|
||||||
|
error: "lucide--alert-circle",
|
||||||
|
};
|
||||||
|
|
||||||
|
return $html(
|
||||||
|
"ul",
|
||||||
|
{
|
||||||
|
...rest,
|
||||||
|
class: () => joinClass(
|
||||||
|
`timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${val(compact) ? "timeline-compact" : ""}`,
|
||||||
|
dynamicClasses
|
||||||
|
),
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$for(
|
||||||
|
items,
|
||||||
|
(item, i) => {
|
||||||
|
const isFirst = i === 0;
|
||||||
|
const isLast = i === val(items).length - 1;
|
||||||
|
const itemType = item.type || "success";
|
||||||
|
const renderSlot = (content) => (typeof content === "function" ? content() : content);
|
||||||
|
|
||||||
|
return $html("li", { class: "flex-1" }, [
|
||||||
|
!isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
|
||||||
|
$html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
|
||||||
|
$html("div", { class: "timeline-middle" }, [
|
||||||
|
item.icon
|
||||||
|
? getIcon(item.icon)
|
||||||
|
: getIcon(iconMap[itemType] || iconMap.success)
|
||||||
|
]),
|
||||||
|
$html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
|
||||||
|
!isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
(item, i) => item.id || i,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
};
|
||||||
67
src/ui/Toast.js
Normal file
67
src/ui/Toast.js
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
// components/Toast.js
|
||||||
|
import { $html, $mount } from "sigpro";
|
||||||
|
import { getIcon } from "../core/utils.js";
|
||||||
|
import { Button } from "./Button.js";
|
||||||
|
|
||||||
|
/** TOAST (Imperative Function) */
|
||||||
|
export const Toast = (message, type = "alert-success", duration = 3500) => {
|
||||||
|
let container = document.getElementById("sigpro-toast-container");
|
||||||
|
|
||||||
|
if (!container) {
|
||||||
|
container = $html("div", {
|
||||||
|
id: "sigpro-toast-container",
|
||||||
|
class: "fixed top-0 right-0 z-[9999] p-4 flex flex-col gap-2 pointer-events-none",
|
||||||
|
});
|
||||||
|
document.body.appendChild(container);
|
||||||
|
}
|
||||||
|
|
||||||
|
const toastHost = $html("div", { style: "display: contents" });
|
||||||
|
container.appendChild(toastHost);
|
||||||
|
|
||||||
|
let timeoutId;
|
||||||
|
|
||||||
|
const close = () => {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
const el = toastHost.firstElementChild;
|
||||||
|
if (el && !el.classList.contains("opacity-0")) {
|
||||||
|
el.classList.add("translate-x-full", "opacity-0");
|
||||||
|
setTimeout(() => {
|
||||||
|
instance.destroy();
|
||||||
|
toastHost.remove();
|
||||||
|
if (!container.hasChildNodes()) container.remove();
|
||||||
|
}, 300);
|
||||||
|
} else {
|
||||||
|
instance.destroy();
|
||||||
|
toastHost.remove();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const ToastComponent = () => {
|
||||||
|
const closeIcon = getIcon("lucide--x");
|
||||||
|
|
||||||
|
const el = $html(
|
||||||
|
"div",
|
||||||
|
{
|
||||||
|
class: `alert alert-soft ${type} shadow-lg transition-all duration-300 translate-x-10 opacity-0 pointer-events-auto`,
|
||||||
|
},
|
||||||
|
[
|
||||||
|
$html("span", {}, [typeof message === "function" ? message() : message]),
|
||||||
|
Button({
|
||||||
|
class: "btn-xs btn-circle btn-ghost",
|
||||||
|
onclick: close
|
||||||
|
}, closeIcon)
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
requestAnimationFrame(() => el.classList.remove("translate-x-10", "opacity-0"));
|
||||||
|
return el;
|
||||||
|
};
|
||||||
|
|
||||||
|
const instance = $mount(ToastComponent, toastHost);
|
||||||
|
|
||||||
|
if (duration > 0) {
|
||||||
|
timeoutId = setTimeout(close, duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
return close;
|
||||||
|
};
|
||||||
19
src/ui/Tooltip.js
Normal file
19
src/ui/Tooltip.js
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
// components/Tooltip.js
|
||||||
|
import { $html } from "sigpro";
|
||||||
|
import { ui, val, joinClass } from "../core/utils.js";
|
||||||
|
|
||||||
|
export const Tooltip = (props, children) => {
|
||||||
|
const { ui: uiProps, class: className, tip, position = "top", ...rest } = props;
|
||||||
|
|
||||||
|
const dynamicClasses = [
|
||||||
|
ui('tooltip', uiProps),
|
||||||
|
className
|
||||||
|
].filter(Boolean).join(' ');
|
||||||
|
|
||||||
|
const tipText = typeof tip === "function" ? tip() : tip;
|
||||||
|
const pos = typeof position === "function" ? position() : position;
|
||||||
|
|
||||||
|
const classes = joinClass(`tooltip tooltip-${pos}`, dynamicClasses);
|
||||||
|
|
||||||
|
return $html("div", { ...rest, class: classes, "data-tip": tipText }, children);
|
||||||
|
};
|
||||||
110
src/ui/index.js
Normal file
110
src/ui/index.js
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import * as AccordionModule from './Accordion.js';
|
||||||
|
import * as AlertModule from './Alert.js';
|
||||||
|
import * as AutocompleteModule from './Autocomplete.js';
|
||||||
|
import * as BadgeModule from './Badge.js';
|
||||||
|
import * as ButtonModule from './Button.js';
|
||||||
|
import * as CheckboxModule from './Checkbox.js';
|
||||||
|
import * as ColorpickerModule from './Colorpicker.js';
|
||||||
|
import * as DatepickerModule from './Datepicker.js';
|
||||||
|
import * as DrawerModule from './Drawer.js';
|
||||||
|
import * as DropdownModule from './Dropdown.js';
|
||||||
|
import * as FabModule from './Fab.js';
|
||||||
|
import * as FieldsetModule from './Fieldset.js';
|
||||||
|
import * as FileinputModule from './Fileinput.js';
|
||||||
|
import * as IndicatorModule from './Indicator.js';
|
||||||
|
import * as InputModule from './Input.js';
|
||||||
|
import * as ListModule from './List.js';
|
||||||
|
import * as LoadingModule from './Loading.js';
|
||||||
|
import * as MenuModule from './Menu.js';
|
||||||
|
import * as ModalModule from './Modal.js';
|
||||||
|
import * as NavbarModule from './Navbar.js';
|
||||||
|
import * as RadioModule from './Radio.js';
|
||||||
|
import * as RangeModule from './Range.js';
|
||||||
|
import * as RatingModule from './Rating.js';
|
||||||
|
import * as SelectModule from './Select.js';
|
||||||
|
import * as StackModule from './Stack.js';
|
||||||
|
import * as StatModule from './Stat.js';
|
||||||
|
import * as SwapModule from './Swap.js';
|
||||||
|
import * as TableModule from './Table.js';
|
||||||
|
import * as TabsModule from './Tabs.js';
|
||||||
|
import * as TimelineModule from './Timeline.js';
|
||||||
|
import * as ToastModule from './Toast.js';
|
||||||
|
import * as TooltipModule from './Tooltip.js';
|
||||||
|
|
||||||
|
export * from './Accordion.js';
|
||||||
|
export * from './Alert.js';
|
||||||
|
export * from './Autocomplete.js';
|
||||||
|
export * from './Badge.js';
|
||||||
|
export * from './Button.js';
|
||||||
|
export * from './Checkbox.js';
|
||||||
|
export * from './Colorpicker.js';
|
||||||
|
export * from './Datepicker.js';
|
||||||
|
export * from './Drawer.js';
|
||||||
|
export * from './Dropdown.js';
|
||||||
|
export * from "./Fab.js";
|
||||||
|
export * from './Fieldset.js';
|
||||||
|
export * from './Fileinput.js';
|
||||||
|
export * from './Indicator.js';
|
||||||
|
export * from './Input.js';
|
||||||
|
export * from './List.js';
|
||||||
|
export * from './Loading.js';
|
||||||
|
export * from './Menu.js';
|
||||||
|
export * from './Modal.js';
|
||||||
|
export * from './Navbar.js';
|
||||||
|
export * from './Radio.js';
|
||||||
|
export * from './Range.js';
|
||||||
|
export * from './Rating.js';
|
||||||
|
export * from './Select.js';
|
||||||
|
export * from './Stack.js';
|
||||||
|
export * from './Stat.js';
|
||||||
|
export * from './Swap.js';
|
||||||
|
export * from './Table.js';
|
||||||
|
export * from './Tabs.js';
|
||||||
|
export * from './Timeline.js';
|
||||||
|
export * from './Toast.js';
|
||||||
|
export * from './Tooltip.js';
|
||||||
|
|
||||||
|
const Components = {
|
||||||
|
...AccordionModule,
|
||||||
|
...AlertModule,
|
||||||
|
...AutocompleteModule,
|
||||||
|
...BadgeModule,
|
||||||
|
...ButtonModule,
|
||||||
|
...CheckboxModule,
|
||||||
|
...ColorpickerModule,
|
||||||
|
...DatepickerModule,
|
||||||
|
...DrawerModule,
|
||||||
|
...DropdownModule,
|
||||||
|
...FabModule,
|
||||||
|
...FieldsetModule,
|
||||||
|
...FileinputModule,
|
||||||
|
...IndicatorModule,
|
||||||
|
...InputModule,
|
||||||
|
...ListModule,
|
||||||
|
...LoadingModule,
|
||||||
|
...MenuModule,
|
||||||
|
...ModalModule,
|
||||||
|
...NavbarModule,
|
||||||
|
...RadioModule,
|
||||||
|
...RangeModule,
|
||||||
|
...RatingModule,
|
||||||
|
...SelectModule,
|
||||||
|
...StackModule,
|
||||||
|
...StatModule,
|
||||||
|
...SwapModule,
|
||||||
|
...TableModule,
|
||||||
|
...TabsModule,
|
||||||
|
...TimelineModule,
|
||||||
|
...ToastModule,
|
||||||
|
...TooltipModule
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
...Components,
|
||||||
|
install: (target = window) => {
|
||||||
|
Object.entries(Components).forEach(([name, component]) => {
|
||||||
|
target[name] = component;
|
||||||
|
});
|
||||||
|
console.log("🚀 SigproUI");
|
||||||
|
}
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user