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

Import individual
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-17 20:29:16 +02:00
parent 33c7cede32
commit 949be7939d
48 changed files with 1624 additions and 5295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Accordion.js
View File

@@ -1,5 +1,5 @@
// components/Accordion.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui, val } from "../core/utils.js";
/**

2
src/components/Alert.js
View File

@@ -1,5 +1,5 @@
// components/Alert.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui, getIcon } from "../core/utils.js";
/**

7
src/components/Autocomplete.js
View File

@@ -1,7 +1,6 @@
// components/Autocomplete.js
// import { $, Tag, For } from "../sigpro.js";
import { $, Tag, For } from "sigpro";
import { val } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Input } from "./Input.js";
/**
@@ -69,7 +68,7 @@ export const Autocomplete = (props) => {
Input({
label,
class: className,
placeholder: placeholder || tt("search")(),
placeholder: placeholder,
value: query, // Vinculado a la señal query
onfocus: () => isOpen(true),
onblur: () => setTimeout(() => isOpen(false), 150),
@@ -108,7 +107,7 @@ export const Autocomplete = (props) => {
(opt, i) => (typeof opt === "string" ? opt : opt.value) + i,
),
// Mensaje de "no hay datos" reactivo
() => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, tt("nodata")())),
() => (list().length ? null : Tag("li", { class: "p-2 text-center opacity-50" }, "nodata")),
],
),
]);

2
src/components/Badge.js
View File

@@ -1,5 +1,5 @@
// components/Badge.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui } from "../core/utils.js";
/**

2
src/components/Button.js
View File

@@ -1,5 +1,5 @@
// components/Button.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui, val, getIcon } from "../core/utils.js";
/**

1
src/components/Checkbox.js
View File

@@ -1,4 +1,5 @@
// components/Checkbox.js
import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Colorpicker.js
View File

@@ -1,5 +1,5 @@
// components/Colorpicker.js
// import { $, Tag, If } from "../sigpro.js";
import { $, Tag, If } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Datepicker.js
View File

@@ -1,5 +1,5 @@
// components/Datepicker.js
// import { $, Tag, If } from "../sigpro.js";
import { $, Tag, If } from "sigpro";
import { val, ui, getIcon } from "../core/utils.js";
import { Input } from "./Input.js";

2
src/components/Drawer.js
View File

@@ -1,5 +1,5 @@
// components/Drawer.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui } from "../core/utils.js";
/**

2
src/components/Dropdown.js
View File

@@ -1,5 +1,5 @@
// components/Dropdown.js
// import { Tag, For, Watch } from "../sigpro.js";
import { Tag, For, Watch } from "sigpro";
import { ui } from "../core/utils.js";
/**

2
src/components/Fab.js
View File

@@ -1,5 +1,5 @@
// components/Fab.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { val, ui, getIcon } from "../core/utils.js";
/**

1
src/components/Fetch.js
View File

@@ -1,3 +1,4 @@
import { $$ } from "sigpro";
export const Fetch = ({ url, options = {}, fallback = "Cargando..." }, { children }) => {
const state = $$({ data: null, loading: true, error: null });
let controller = null;

2
src/components/Fetch2.js
View File

@@ -1,4 +1,4 @@
import { $$, Tag, isFunc } from "./sigpro.js";
import { $$, Tag, isFunc } from "sigpro";
const _cache = new Map();

2
src/components/Fieldset.js
View File

@@ -1,5 +1,5 @@
// components/Fieldset.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Fileinput.js
View File

@@ -1,5 +1,5 @@
// components/Fileinput.js
// import { $, Tag, If, For } from "../sigpro.js";
import { $, Tag, If, For } from "sigpro";
import { ui, getIcon } from "../core/utils.js";
/**

2
src/components/Indicator.js
View File

@@ -1,5 +1,5 @@
// components/Indicator.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui } from "../core/utils.js";
/**

1
src/components/Input.js
View File

@@ -1,4 +1,5 @@
// components/Input.js
import { Tag } from "sigpro";
import { val, ui, getIcon } from "../core/utils.js";
/**

1
src/components/Label.js
View File

@@ -1,4 +1,5 @@
// components/Label.js
import { Tag } from "sigpro";
import { ui, val } from "../core/utils.js";
export const Label = (props) => {

2
src/components/List.js
View File

@@ -1,5 +1,5 @@
// components/List.js
// import { Tag, If, For } from "../sigpro.js";
import { Tag, If, For } from "sigpro";
import { ui, val } from "../core/utils.js";
/**

2
src/components/Menu.js
View File

@@ -1,5 +1,5 @@
// components/Menu.js
// import { Tag, For } from "../sigpro.js";
import { Tag, For } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

5
src/components/Modal.js
View File

@@ -1,7 +1,6 @@
// components/Modal.js
// import { Tag, Watch } from "../sigpro.js";
import { Tag, Watch } from "sigpro";
import { ui } from "../core/utils.js";
import { tt } from "../core/i18n.js";
import { Button } from "./Button.js";
/**
@@ -54,7 +53,7 @@ export const Modal = (props, children) => {
Tag("div", { class: "modal-action" }, [
Tag("form", { method: "dialog", class: "flex gap-2" }, [
...(Array.isArray(buttons) ? buttons : [buttons]).filter(Boolean),
Button({ type: "submit" }, tt("close")())
Button({ type: "submit" }, "close")
])
])
]),

2
src/components/Navbar.js
View File

@@ -1,5 +1,5 @@
// components/Navbar.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui } from "../core/utils.js";
/**

2
src/components/Radio.js
View File

@@ -1,5 +1,5 @@
// components/Radio.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Range.js
View File

@@ -1,5 +1,5 @@
// components/Range.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Rating.js
View File

@@ -1,5 +1,5 @@
// components/Rating.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Select.js
View File

@@ -1,5 +1,5 @@
// components/Select.js
// import { Tag, For } from "../sigpro.js";
import { Tag, For } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Stack.js
View File

@@ -1,5 +1,5 @@
// components/Stack.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui } from "../core/utils.js";
/**

2
src/components/Stat.js
View File

@@ -1,5 +1,5 @@
// components/Stat.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { val, ui } from "../core/utils.js";
/**

2
src/components/Swap.js
View File

@@ -1,5 +1,5 @@
// components/Swap.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui, val } from "../core/utils.js";
/**

5
src/components/Table.js
View File

@@ -1,7 +1,6 @@
// components/Table.js
// import { Tag, For, If } from "../sigpro.js";
import { Tag, For, If } from "sigpro";
import { val, ui } from "../core/utils.js";
import { tt } from "../core/i18n.js";
/**
* Table component
@@ -14,7 +13,7 @@ import { tt } from "../core/i18n.js";
* - hover, text-center, p-10, opacity-50
*/
export const Table = (props) => {
const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = tt("nodata")(), ...rest } = props;
const { class: className, items = [], columns = [], keyFn, zebra = false, pinRows = false, empty = "nodata", ...rest } = props;
const tableClass = () => {
const zebraClass = val(zebra) ? "table-zebra" : "";

2
src/components/Tabs.js
View File

@@ -1,5 +1,5 @@
// components/Tabs.js
import { $, Tag, Watch } from "../sigpro.js";
import { $, Tag, Watch } from "sigpro";
import { val, ui, getIcon } from "..//core/utils.js";
/**

2
src/components/Timeline.js
View File

@@ -1,5 +1,5 @@
// components/Timeline.js
// import { Tag, For } from "../sigpro.js";
import { Tag } from "sigpro";
import { val, ui, getIcon } from "../core/utils.js";
/**

2
src/components/Toast.js
View File

@@ -1,5 +1,5 @@
// components/Toast.js
// import { Tag, Mount } from "../sigpro.js";
import { Tag, Mount } from "sigpro";
import { getIcon } from "../core/utils.js";
import { Button } from "./Button.js";

4
src/components/Tooltip.js
View File

@@ -1,5 +1,5 @@
// components/Tooltip.js
// import { Tag } from "../sigpro.js";
import { Tag } from "sigpro";
import { ui } from "../core/utils.js";
/**
@@ -16,4 +16,4 @@ export const Tooltip = (props, children) =>
...props,
class: () => ui('tooltip w-full', props.class),
"data-tip": props.tip,
}, children);
}, children)

110
src/components/index.js
View File

@@ -1,110 +0,0 @@
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 LabelModule from './Label.js';
import * as ListModule from './List.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 './Label.js';
export * from './List.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,
...LabelModule,
...ListModule,
...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");
}
};